/* Geometry and typography follow the approved overview, not its demo ledger. */
/* The overview sits in the same column as every other page (shell.css: 32/36px padding, 1250px max width). */
.overview { --overview-brand-ink:#4f46e5; --overview-primary-hover:#374151; font-size:14px; line-height:1.6; }
:root[data-theme=dark] .overview { --overview-brand-ink:#8586ef; --overview-primary-hover:#e5e7eb; }
.overview h1 { font-size:30px; font-weight:600; line-height:1.3; letter-spacing:-1px; overflow-wrap:anywhere; }
.overview h2 { font-size:19px; font-weight:600; letter-spacing:-.3px; }
.overview-head { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:27px; }
.overview-head>div { min-width:0; }
.overview-head p { margin-top:7px; color:var(--muted); font-size:13px; }
.overview-eyebrow { color:var(--overview-brand-ink); font-size:10px; font-weight:600; letter-spacing:1.7px; text-transform:uppercase; margin-bottom:12px; overflow-wrap:anywhere; }
.overview .btn { border-radius:7px; min-height:38px; padding:9px 15px; font-size:12px; font-weight:500; line-height:1.4; }
.overview .btn.quiet { color:var(--muted); padding:5px 9px; }
.overview .btn:hover { background:var(--soft); border-color:var(--muted); }
.overview .btn.primary:hover { background:var(--overview-primary-hover); border-color:var(--overview-primary-hover); color:var(--primary-fg); }
.overview .btn>.nav-icon { width:16px; height:16px; }
.overview-panel { min-width:0; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
/* Two rows: the composer beside the browser panel, the metrics beside the coding-agent card. Items in a row share its height, so each pair's boxes align top and bottom. */
.overview-launch { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(270px,1fr); gap:20px; margin-bottom:25px; align-items:stretch; }
/* The right column stacks the browser panel and the coding-agent card; the composer keeps its own height. */
.overview-prompt { display:grid; gap:12px; padding:20px 22px 18px; }
.overview-prompt .overview-panel-head { padding:0; border:0; }
.overview-prompt h2 { display:flex; align-items:center; gap:8px; margin:0; font-size:15px; }
.overview-prompt h2 .nav-icon, .overview-prompt h2 svg { width:16px; height:16px; }
.overview-prompt-preview { position:relative; max-height:132px; overflow:hidden; margin:0; padding:12px 14px; border-radius:10px; background:var(--soft); mask-image:linear-gradient(to bottom,#000 45%,transparent); font:11px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--muted); user-select:none; }
.overview-prompt-preview code { display:block; white-space:pre-wrap; overflow-wrap:anywhere; }
.overview-prompt-preview .code-line { display:block; }
.overview-prompt>p { margin:0; font-size:12px; }
.overview-prompt-copy { justify-self:end; height:34px; padding:0 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); font-size:13px; }
.overview-prompt-copy:hover { background:var(--soft); }
/* Both launch panels push their action to the bottom, so the two buttons share a baseline whichever panel is taller. The composer's input stays compact and grows with its text (Browser Use's composer: a few lines, then scroll); any spare height is room between input and toolbar, and a click there focuses the input. The browser panel keeps its logo beside the copy rather than under it, so its natural height matches the compact composer's. */
.overview-composer { display:flex; flex-direction:column; padding:25px; container:overview-composer / inline-size; }
.overview-composer h2 { display:flex; align-items:center; gap:9px; }
.overview-composer h2>.nav-icon { width:19px; height:19px; color:var(--muted); }
.overview-quick-form { display:flex; flex-direction:column; flex:1 1 auto; margin-top:14px; }
.overview-quick-form fieldset { display:flex; flex-direction:column; flex:1 1 auto; gap:16px; cursor:text; }
/* The input is its own rounded field (Browser Use's create page: bordered box, toolbar beneath); focus is the border and a soft ring, not the global square outline. Heights include the 12px padding: three lines minimum, ten before it scrolls. */
.overview-quick-form textarea { display:block; width:100%; min-height:98px; max-height:264px; padding:12px 14px; margin:0; border:1px solid var(--line); border-radius:12px; background:var(--surface); font-size:14px; line-height:1.7; resize:none; overflow-y:auto; transition:border-color .15s, box-shadow .15s; }
.overview-quick-form textarea::placeholder { color:var(--muted); }
.overview-quick-form textarea:focus-visible { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.overview-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:auto; cursor:default; }
.overview-tools { display:flex; align-items:center; gap:4px; flex:1 1 0; min-width:0; }
.overview-model { flex:none; width:170px; margin-right:4px; }
.overview-model .select-field { display:block; }
.overview-model .select-field>span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.overview-model .select-trigger { height:36px; min-height:36px; padding:0 11px; border-radius:7px; background:var(--soft); font-size:12px; font-weight:500; }
.overview-model .select-popover { width:270px; max-width:calc(100vw - 80px); }
.overview-tool { display:inline-flex; align-items:center; justify-content:center; flex:none; gap:6px; height:36px; min-width:36px; padding:0 9px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--muted); font-size:12px; line-height:1; white-space:nowrap; }
.overview-tools .run-settings-toggle { height:36px; min-width:36px; border-radius:7px; font-size:12px; }
.overview-tools .agent-chips { flex:1 1 0; margin-left:6px; }
.overview-tool:hover { background:var(--soft); color:var(--ink); }
.overview-tool>.nav-icon { width:16px; height:16px; }
.overview-toolbar>.overview-run, .overview-browser>.btn { height:36px; min-height:36px; padding:0 12px; gap:6px; }
.overview-toolbar>.overview-run { margin-left:auto; }
.overview-browser>.btn { grid-column:1; grid-row:4; align-self:end; justify-self:start; }
.overview-run>.nav-icon { width:14px; height:14px; }
.overview-attachments { display:flex; flex-wrap:wrap; gap:7px; }
.overview-attachments:empty { display:none; }
.overview-file { display:inline-flex; align-items:center; gap:6px; max-width:100%; border:1px solid var(--line); border-radius:6px; padding:3px 7px; font-size:11px; }
.overview-file>span { min-width:0; overflow-wrap:anywhere; }
.overview-file>.nav-icon { width:14px; height:14px; }
.overview-file small { flex:none; }
.overview-file button { flex:none; border:0; border-radius:4px; padding:2px 5px; background:transparent; color:var(--muted); }
.overview-file button:hover { background:var(--soft); color:var(--danger); }
.overview-notice { margin-top:16px; padding:10px 12px; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:var(--soft); font-size:12px; }
.overview-browser { position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto 1fr auto; column-gap:16px; padding:25px; background:var(--soft); }
/* The map sits behind the copy (negative z-index inside the panel's own stacking context). The panel-sized box carries the fade so its stops are panel percentages; the basemap inside is drawn larger than the panel and shifted so the visible crop runs from Europe to Australia at a readable dot pitch. */
.overview-map { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; user-select:none; -webkit-mask-image:linear-gradient(90deg, transparent 6%, #000 58%); mask-image:linear-gradient(90deg, transparent 6%, #000 58%); }
.overview-map svg { position:absolute; display:block; width:175%; height:auto; right:-6%; top:-14%; }
.overview-map-land { opacity:.3; }
.overview-map-routes { fill:none; stroke:var(--brand); stroke-width:.24; stroke-linecap:round; opacity:.3; }
.overview-map-halo { fill:var(--brand); opacity:.08; }
.overview-map-point { fill:var(--brand); opacity:.75; }
.overview-map-center { fill:var(--surface); }
.overview-map-traveler { display:none; fill:var(--brand); }
@media (prefers-reduced-motion: no-preference) { .overview-map-traveler { display:block; } }
.overview-browser>.overview-eyebrow { grid-row:1; }
.overview-browser>h2 { grid-row:2; }
.overview-browser>p { grid-row:3; max-width:255px; margin:8px 0 18px; color:var(--muted); font-size:12px; }
/* The access card: API key over usage, two sections one line apart, the chart filling what the row leaves. */
.overview-access { display:grid; grid-template-rows:auto minmax(0,1fr); min-width:0; overflow:hidden; }
.overview-access:has(.usage-tip:not([hidden])) { overflow:visible; }
.overview-access-section { display:grid; gap:12px; padding:18px 22px; }
.overview-access-section+.overview-access-section { border-top:1px solid var(--line); }
.overview-access-usage { grid-template-rows:auto minmax(0,1fr); min-height:0; }
.overview-access-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.overview-access-head h2 { margin:0; font-size:15px; font-weight:600; }
.overview-access-link { padding:0; min-height:0; height:auto; border:0; background:none; color:var(--muted); font-size:13px; }
.overview-access-link svg { width:14px; height:14px; }
.overview-access-link:hover { color:var(--ink); background:none; }
.overview-access-button { justify-content:center; width:100%; height:40px; gap:8px; background:var(--soft); border-color:var(--line); }
.overview-access-button svg { width:16px; height:16px; }
.overview-access-meta { margin:4px 0 0; display:flex; flex-wrap:wrap; gap:6px; color:var(--muted); font-size:12px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.overview-access-meta a { color:inherit; }
.overview-access-meta a:hover { color:var(--ink); }
.overview-access-meta strong { color:var(--ink); font-weight:600; }
.overview-access-meta i { font-style:normal; opacity:.6; }
.overview-access-chart { min-height:0; display:grid; align-content:end; }
.overview-access-chart .usage-chart { width:100%; height:auto; margin:6px 0 0; }
.overview-access-chart .usage-chart-labels { font-size:11px; }
.overview-panel-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:18px 23px; border-bottom:1px solid var(--line); }
.overview-panel-head h2 { font-size:14px; }
.overview-recent { overflow:hidden; }
.overview-recent table { font-size:12px; white-space:nowrap; }
.overview-recent th { padding:13px 22px; font-size:11px; font-weight:400; background:var(--bg); }
.overview-recent td { padding:18px 22px; }
.overview-recent td:first-child { width:40%; min-width:180px; }
.overview-recent td small { display:block; font-size:10px; color:var(--muted); margin-top:4px; }
.overview-run-title { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; max-width:420px; white-space:normal; overflow-wrap:anywhere; font-weight:500; }
.overview-run-title:hover { color:var(--overview-brand-ink); }
.overview-status { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:5px; font-size:10px; color:var(--muted); background:var(--soft); }
.overview-status>span { font-size:7px; }
.overview-status.active { color:var(--brand); background:var(--brand-soft); }
.overview-status.success { color:#15803d; background:#f0fdf4; }
.overview-status.waiting { color:#92400e; background:#fffbeb; }
.overview-status.failure { color:#b91c1c; background:#fef2f2; }
:root[data-theme=dark] .overview-status.success { color:#86efac; background:#052e16; }
:root[data-theme=dark] .overview-status.waiting { color:#fcd34d; background:#451a03; }
:root[data-theme=dark] .overview-status.failure { color:#fca5a5; background:#450a0a; }
.overview-guide { margin-top:20px; }
@container overview-composer (max-width:580px) { .overview-tools { flex-basis:100%; } }
@container overview-composer (max-width:360px) { .overview-tool>span { display:none; } .overview-model { width:164px; } }
@media (max-width:1150px) { .overview-launch { grid-template-columns:minmax(0,1.3fr) minmax(235px,1fr); } }
@media (max-width:850px) { .overview-launch { grid-template-columns:minmax(0,1fr); } .overview-browser>p { max-width:none; } .overview-map-land { opacity:.16; } .overview-map-routes, .overview-map-stops, .overview-map-traveler { display:none; } .overview-access-section { padding:15px 17px; } }
@media (max-width:540px) {
  .overview h1 { font-size:25px; }
  .overview-head { gap:15px; margin-bottom:22px; }
  .overview-composer { padding:18px; }
  .overview-panel-head { padding:15px 18px; }
}
/* The assistants the prompt is written for, as their marks, at the head's right. */
.overview-prompt-agents { display:flex; align-items:center; gap:12px; color:var(--ink); }
.overview-prompt-agents .agent-mark { width:20px; height:20px; flex:none; }

/* The first-use guide: three numbered paths on an empty project; the guide dialog shows the same list. */
.overview-welcome { margin-bottom:20px; }
.overview-welcome .overview-panel-head { align-items:flex-start; }
.overview-welcome .overview-panel-head h2 { font-size:19px; }
.overview-welcome .overview-panel-head p { margin-top:4px; font-size:13px; }
.overview-welcome .overview-eyebrow { margin-bottom:6px; }
.overview-paths { list-style:none; margin:0; padding:6px 23px 8px; }
.overview-welcome .overview-paths { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 24px; }
.overview-path { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:start; padding:14px 0; border-top:1px solid var(--line); }
.overview-welcome .overview-path { border-top:0; }
.overview-path:first-child { border-top:0; }
.overview-path-n { grid-row:span 2; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:600; color:var(--overview-brand-ink); background:color-mix(in srgb, var(--overview-brand-ink) 10%, transparent); }
.overview-path h3 { font-size:14px; font-weight:600; }
.overview-path p { font-size:13px; margin-top:2px; }
.overview-path .btn { grid-column:2; justify-self:start; margin-top:4px; }
.overview-path .btn .nav-icon { width:14px; height:14px; }
.overview-guide { --overview-brand-ink:#4f46e5; }
:root[data-theme=dark] .overview-guide { --overview-brand-ink:#8586ef; }
.overview-guide .overview-paths { padding:0; }
.overview-guide .overview-path { padding:12px 0; }
@media (max-width:900px) { .overview-welcome .overview-paths { grid-template-columns:1fr; } .overview-welcome .overview-path { border-top:1px solid var(--line); } .overview-welcome .overview-path:first-child { border-top:0; } }