/* My agent pages: the library of what an agent made, and the viewer for one
   page. Tokens from src/tokens.css; buttons, back link and status lines from
   src/ui.css. The library sits inside the normal site chrome; the viewer
   takes the whole window so the page inside gets the room. */
#agent-marketplace-homepage .pages-root{max-width:1060px;margin:auto;padding:var(--space-6) var(--space-5) 80px}
#agent-marketplace-homepage .pages-root [hidden]{display:none!important}
#agent-marketplace-homepage .pages-root a:not(.btn):not(.back-link){color:inherit;text-decoration:underline;text-underline-offset:3px}
#agent-marketplace-homepage .pages-root p{font-size:var(--text-md);line-height:1.45;color:var(--color-muted);max-width:68ch}
#agent-marketplace-homepage .pages-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2) var(--space-5);align-items:end;margin-bottom:var(--space-6)}
#agent-marketplace-homepage .pages-bar .back-link{grid-column:1/-1;margin-bottom:var(--space-3)}
#agent-marketplace-homepage .pages-heading{min-width:0}
#agent-marketplace-homepage .pages-root h1{font:700 var(--text-h1)/1.2 var(--font-mono);letter-spacing:-.045em;margin:0 0 var(--space-2);overflow-wrap:anywhere}
#agent-marketplace-homepage .pages-root .pages-status{max-width:none;color:var(--color-muted);font-size:var(--text-sm)}
#agent-marketplace-homepage .pages-root .pages-status:empty{display:none}
#agent-marketplace-homepage .pages-root .pages-status[data-tone="pending"]{color:var(--color-warn-ink)}
#agent-marketplace-homepage .pages-root .pages-status[data-tone="saved"]{color:var(--color-ok-ink)}
#agent-marketplace-homepage .pages-actions{display:flex;align-items:center;gap:var(--space-4);flex:none}
#agent-marketplace-homepage .pages-actions .btn-quiet{font-size:var(--text-sm)}

/* Page info lives in the shared page bar menu (ui.css). */
#agent-marketplace-homepage .pages-root :is(a,button,summary):focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
#agent-marketplace-homepage .page-bar-menu>summary::after{content:'\2304'}
#agent-marketplace-homepage .page-bar-panel .pages-check{margin:var(--space-2) 0 0;font-size:var(--text-xs)}

/* Notice: one sentence and at most one action. */
#agent-marketplace-homepage .pages-notice{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin:0 0 var(--space-5);padding:var(--space-3) var(--space-4);background:var(--color-warn-bg);border-left:3px solid var(--color-warn-ink);color:var(--color-warn-ink)}
#agent-marketplace-homepage .pages-notice p{flex:1 1 32ch;margin:0;color:inherit;font-size:var(--text-sm)}

/* Library: one group per agent, one row per page. Same row as the workspace. */
#agent-marketplace-homepage .pages-library{display:grid;gap:var(--space-6)}
#agent-marketplace-homepage .pages-library h2{margin:0 0 var(--space-3);font:700 var(--text-lg)/1.3 var(--font-mono);letter-spacing:-.04em}
#agent-marketplace-homepage .pages-list{border-top:1px solid var(--color-line)}
#agent-marketplace-homepage .pages-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);min-height:64px;padding:var(--space-3) var(--space-1);border-bottom:1px solid var(--color-line);color:inherit;text-decoration:none!important}
#agent-marketplace-homepage .pages-row:hover{background:var(--color-surface)}
#agent-marketplace-homepage .pages-row-copy{display:grid;gap:3px;min-width:0}
#agent-marketplace-homepage .pages-row-copy strong{font:700 15px/1.35 var(--font-mono);letter-spacing:-.025em;overflow-wrap:anywhere}
#agent-marketplace-homepage .pages-row-copy small{font-size:var(--text-sm);line-height:1.45;color:var(--color-muted)}
#agent-marketplace-homepage .pages-row-action{flex:none;color:var(--color-accent);font:700 var(--text-sm)/1.4 var(--font-mono)}
#agent-marketplace-homepage .pages-library .pages-group-note{margin:var(--space-3) 0 0;font-size:var(--text-sm)}
#agent-marketplace-homepage .pages-library .pages-group-note:empty{display:none}

/* Views inside one page (the Observatory's Map, Warmth, People). */
#agent-marketplace-homepage .pages-views{display:flex;gap:0;padding:0 var(--space-5);border-bottom:1px solid var(--color-line);background:var(--color-page);overflow-x:auto;flex-shrink:0}
#agent-marketplace-homepage .pages-views a{display:inline-flex;align-items:center;min-height:var(--tap-min);margin-bottom:-1px;padding:var(--space-3) var(--space-2);border-bottom:2px solid transparent;color:var(--color-muted);font:700 var(--text-sm)/1 var(--font-mono);text-decoration:none;white-space:nowrap}
#agent-marketplace-homepage .pages-views a:hover{color:var(--color-ink)}
#agent-marketplace-homepage .pages-views a[aria-current]{color:var(--color-ink);border-bottom-color:var(--color-accent)}

/* Viewer: the page gets the window. The site chrome steps aside. */
body:has(#pages-root.is-viewer) #agent-marketplace-homepage>.bf-header,body:has(#pages-root.is-viewer) #agent-marketplace-homepage>.bf-footer,body:has(#pages-root.is-viewer) #agent-marketplace-homepage>.amh-footer{display:none}
#agent-marketplace-homepage .pages-root.is-viewer{max-width:none;height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding:0}
#agent-marketplace-homepage .pages-root.is-viewer .pages-bar{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;margin:0}
#agent-marketplace-homepage .pages-root.is-viewer .pages-bar .back-link{grid-column:auto;margin:0}
#agent-marketplace-homepage .pages-root.is-viewer .pages-heading{display:flex;align-items:baseline;gap:var(--space-4);min-width:0}
#agent-marketplace-homepage .pages-root.is-viewer h1{margin:0;font:700 18px/1.3 var(--font-mono);letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#agent-marketplace-homepage .pages-root.is-viewer .pages-status{flex:none;font-size:var(--text-xs)}
#agent-marketplace-homepage .pages-root.is-viewer .pages-notice{margin:0;border-left:0;border-bottom:1px solid var(--color-line);flex-shrink:0}
#agent-marketplace-homepage #pages-frame{border:0;width:100%;flex:1;min-height:0;background:var(--color-surface)}

#agent-marketplace-homepage .pages-external{max-width:min(450px,85vw);padding:var(--space-5);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-ink);overflow-wrap:anywhere}
#agent-marketplace-homepage .pages-external h2{margin:0 0 var(--space-2);font:700 var(--text-lg)/1.3 var(--font-mono)}
#agent-marketplace-homepage .pages-external form{margin-top:var(--space-4)}

@media(max-width:700px){
#agent-marketplace-homepage .pages-root{padding:var(--space-5) var(--space-4) 60px}
#agent-marketplace-homepage .pages-bar{grid-template-columns:1fr;align-items:start}
#agent-marketplace-homepage .pages-actions{justify-content:flex-start}
#agent-marketplace-homepage .pages-row{gap:var(--space-4)}
#agent-marketplace-homepage .pages-views{padding:0 var(--space-4)}
#agent-marketplace-homepage .pages-root.is-viewer .pages-bar{grid-template-columns:1fr auto;align-items:center}
#agent-marketplace-homepage .pages-root.is-viewer .pages-bar .back-link{grid-row:1;grid-column:1}
#agent-marketplace-homepage .pages-root.is-viewer .pages-actions{grid-row:1;grid-column:2}
#agent-marketplace-homepage .pages-root.is-viewer .pages-heading{grid-row:2;grid-column:1/-1;flex-wrap:wrap;gap:var(--space-1) var(--space-3)}
#agent-marketplace-homepage .pages-root.is-viewer h1{white-space:normal}
}