/* Light is the default; the theme toggle stamps data-theme on the root and wins in both
   directions, so a chosen theme survives a system that disagrees with it. */
:root {
  --bg: #f6f7f9; --panel: #fff; --line: #e3e7ee; --line-soft: #eef1f5;
  --fg: #16202c; --dim: #6b7688; --accent: #2f6df6; --accent-soft: #eaf1ff;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --radius: 12px; --topbar: 58px; --chiprow: 52px;
}
:root[data-theme="dark"], :root:not([data-theme]) {
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0d1117; --panel: #151b23; --line: #232b36; --line-soft: #1c232d;
  --fg: #e7ecf3; --dim: #8b95a5; --accent: #5a8cff; --accent-soft: #16233d;
  --shadow: none; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0d1117; --panel: #151b23; --line: #232b36; --line-soft: #1c232d;
    --fg: #e7ecf3; --dim: #8b95a5; --accent: #5a8cff; --accent-soft: #16233d;
    --shadow: none; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 14px/1.5 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }

/* ── top bar ── */
.topbar {
  height: var(--topbar); flex: none; display: flex; align-items: center; gap: 18px;
  padding: 0 18px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 650; }
.brand-mark { width: 24px; height: 24px; border-radius: 7px;
              background: linear-gradient(145deg, #4f8cff, #2f5fe0 55%, #7c4dff); }
.brand-name { font-size: 15.5px; letter-spacing: -.01em; white-space: nowrap; }
.topnav { display: flex; gap: 4px; }
.topnav a { text-decoration: none; color: var(--dim); font-size: 13.5px;
            padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
.topnav a:hover { color: var(--fg); background: var(--line-soft); }
.topnav a.on { color: var(--accent); font-weight: 600; }
.searchwrap { flex: 1; display: flex; justify-content: center; min-width: 0; }
#q {
  width: 100%; max-width: 640px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 12px 8px 34px; font-size: 13.5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7688' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 10px 50%; background-size: 15px;
}
#q:focus { outline: none; border-color: var(--accent); }
.topright { display: flex; gap: 10px; align-items: center; }
.segmented { display: flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.segmented button { background: none; border: none; padding: 6px 11px; cursor: pointer;
                    color: var(--dim); font-size: 13px; line-height: 1; }
.segmented button.on { background: var(--accent-soft); color: var(--accent); }
.segmented button:hover:not(.on) { background: var(--line-soft); }

/* ── quick chip row ── */
.chiprow {
  height: var(--chiprow); flex: none; display: flex; align-items: center; gap: 10px;
  padding: 0 18px; background: var(--panel); border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.chiprow::-webkit-scrollbar { display: none; }
.filters-badge {
  display: inline-flex; align-items: center; gap: 7px; flex: none; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: 6px 11px;
  cursor: pointer; font-size: 13px;
}
.filters-badge:hover { border-color: var(--accent); }
.filters-badge.on { border-color: var(--accent); color: var(--accent); }
.filters-badge .badge {
  background: var(--accent); color: #fff; border-radius: 20px; min-width: 19px;
  padding: 0 6px; font-size: 11px; line-height: 18px; text-align: center;
}
.quickchips { display: flex; gap: 8px; }
.quick { flex: none; background: var(--panel); border: 1px solid var(--line);
         border-radius: 20px; padding: 6px 13px; cursor: pointer; font-size: 13px;
         white-space: nowrap; }
.quick:hover { border-color: var(--accent); }
.quick.on { background: var(--accent-soft); border-color: var(--accent);
            color: var(--accent); font-weight: 600; }

/* ── frame ── */
main { flex: 1; display: flex; min-height: 0; }
#sidebar { width: 276px; flex: none; border-right: 1px solid var(--line);
           background: var(--panel); padding: 14px 14px 14px 18px; overflow-y: auto; }
body.no-sidebar #sidebar { display: none; }
.side-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.side-head strong { font-size: 14px; }
.side-head .dim { color: var(--dim); font-size: 12px; }
#clear { margin-left: auto; background: none; border: none; color: var(--accent);
         cursor: pointer; font-size: 12.5px; padding: 0; }
#clear:hover { text-decoration: underline; }
.sidebar-foot { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line);
                font-size: 11.5px; color: var(--dim); }
.sidebar-foot a { color: var(--dim); }

/* ── facets ── */
.facet-sec { border-top: 1px solid var(--line-soft); padding: 10px 0 12px; }
.facet-head { width: 100%; display: flex; align-items: center; gap: 8px; background: none;
              border: none; padding: 2px 0 8px; cursor: pointer; text-align: left; }
.fh-name { font-size: 13.5px; font-weight: 640; }
.facet-head .mode { margin-left: auto; font-size: 10.5px; color: var(--dim); }
.facet-head .chev { color: var(--dim); font-size: 11px; transition: transform .15s; }
.facet-sec.collapsed .chev { transform: rotate(180deg); }
.facet-search { width: 100%; background: var(--bg); border: 1px solid var(--line);
                border-radius: 8px; padding: 5px 9px; font-size: 12.5px; margin-bottom: 7px; }
.facet-search:focus { outline: none; border-color: var(--accent); }
.facet-values { display: flex; flex-direction: column; }
.fv { display: flex; align-items: center; gap: 9px; padding: 4px 6px; border-radius: 7px;
      cursor: pointer; font-size: 13px; }
.fv:hover { background: var(--line-soft); }
.fv input { accent-color: var(--accent); margin: 0; }
.fv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv .n { margin-left: auto; color: var(--dim); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.fv.on { color: var(--accent); font-weight: 600; }
.fv.off { opacity: .38; cursor: default; }
.fv.off:hover { background: none; }
.more { background: none; border: none; color: var(--accent); cursor: pointer;
        font-size: 12.5px; padding: 5px 6px 0; text-align: left; }
.more:hover { text-decoration: underline; }

/* ── results ── */
.results { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.results-head { flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--panel); }
#count { font-size: 13.5px; color: var(--dim); }
#count strong { color: var(--fg); }
.active-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft);
        border: 1px solid transparent; color: var(--accent); border-radius: 20px;
        padding: 3px 10px; font-size: 12.5px; cursor: pointer; }
.pill span { opacity: .7; }
.pill:hover { border-color: var(--accent); }
.pill.clear { background: none; color: var(--dim); }
.sortwrap { margin-left: auto; display: flex; align-items: center; gap: 8px;
            font-size: 12.5px; color: var(--dim); white-space: nowrap; }
#sort { background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
        padding: 6px 10px; cursor: pointer; font-size: 13px; }
#sort:hover { border-color: var(--accent); }

/* The grid is the scroll container; .plane holds absolutely positioned cards and #spacer
   gives the scrollbar its height, so only visible rows are ever in the DOM. */
#grid { flex: 1; overflow-y: auto; position: relative; padding: 18px; min-width: 0; }
.plane { position: absolute; inset: 18px auto auto 18px; }
#spacer { pointer-events: none; }

.card { position: absolute; top: 0; left: 0; background: var(--panel);
        border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
        display: flex; flex-direction: column; box-shadow: var(--shadow); }
.card:hover { border-color: var(--accent); }
.thumb { height: 178px; flex: none; position: relative; overflow: hidden; background: var(--bg);
         display: flex; align-items: center; justify-content: center; }
.thumb img { max-width: 100%; max-height: 100%; display: block; }
.thumb img:not([src]) { opacity: 0; }
.thumb .live { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.thumb-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px;
                 opacity: 0; transition: opacity .12s; }
.card:hover .thumb-actions { opacity: 1; }
.act { width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
       background: rgba(20,26,36,.72); color: #fff; font-size: 11px; line-height: 28px;
       text-align: center; text-decoration: none; display: inline-block; padding: 0; }
.act:hover { background: rgba(20,26,36,.92); }
.meta { padding: 10px 12px; min-width: 0; overflow: hidden; }
.meta .t { display: block; font-size: 13.5px; font-weight: 640; text-decoration: none;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta .t:hover { color: var(--accent); }
.meta .sub { font-size: 11.5px; color: var(--dim); margin-top: 2px;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta .desc { font-size: 12px; color: var(--dim); margin-top: 6px; line-height: 1.4;
              display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
              overflow: hidden; }
.chips { margin-top: 8px; display: flex; gap: 5px; flex-wrap: wrap; }
.chip { font-size: 10.5px; border: 1px solid var(--line); border-radius: 5px;
        padding: 1px 7px; color: var(--dim); }
.chip.tag { color: var(--accent);
            border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }

/* list view: thumbnail left, text right */
#grid.list .card { flex-direction: row; }
#grid.list .thumb { width: 152px; height: 100%; }
#grid.list .meta { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* ── document page ── */
.doc-body { overflow: hidden; }
.doc-page { flex: 1; min-height: 0; overflow-y: auto; }
.stage { height: 66vh; display: flex; flex-direction: column; padding: 12px 28px 0; }
.stage-bar { display: flex; align-items: center; justify-content: space-between;
             gap: 16px; padding-bottom: 10px; flex: none; }
.back { color: var(--dim); font-size: 12.5px; text-decoration: none; }
.back:hover { color: var(--fg); }
.size-pick { font-size: 12px; color: var(--dim); display: flex; align-items: center; gap: 8px; }
.size-pick select { background: var(--panel); border: 1px solid var(--line);
                    border-radius: 7px; padding: 4px 8px; cursor: pointer; }
.size-pick select:hover { border-color: var(--accent); }
#size-note { font-variant-numeric: tabular-nums; min-width: 15ch; }
/* overflow:auto, not hidden: the document is shown at its true played size, so anything
   larger than the stage scrolls rather than being shrunk to fit. */
.frame { flex: 1; min-height: 0; background: var(--bg); border: 1px solid var(--line);
         border-radius: var(--radius); display: flex; align-items: center;
         justify-content: center; overflow: auto; }
/* The player must get the drag, not the browser. `.frame` is overflow:auto, so without
   this a horizontal swipe is claimed for panning the frame before the document's own touch
   handling sees it - which makes every touch-driven document unusable on a phone, and on
   any touchscreen. The player reads pointer events; this is what lets them arrive.

   The matching half is in doc.js: wherever this applies the canvas is also fitted to the
   frame, so giving the gesture away costs nothing - there is nothing left to pan to. */
.frame canvas { flex: none; margin: auto; touch-action: none; }
.doc-info { padding: 22px 28px 48px; max-width: 980px; }
.doc-info h2 { margin: 0 0 4px; font-size: 19px; }
.doc-info .path { color: var(--dim); font-size: 12px; font-family: ui-monospace, monospace; }
h3.sec { font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
         color: var(--dim); margin: 22px 0 8px; }
table.kv { border-collapse: collapse; font-size: 12.5px; margin-top: 10px; }
table.kv td { padding: 3px 18px 3px 0; vertical-align: top; }
table.kv td:first-child { color: var(--dim); white-space: nowrap; }
.ops { margin-top: 20px; font-size: 12px; }
.ops h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
          color: var(--dim); margin: 0 0 8px; }
.ops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 26px; }
.ops-grid div { display: flex; justify-content: space-between;
                border-bottom: 1px solid var(--line); padding: 3px 0; }
.dim { color: var(--dim); }
#tags { margin: 8px 0 0; }

/* ── inline source viewers ── */
.sources { display: flex; flex-direction: column; gap: 6px; max-width: 900px; }
.source { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--panel); }
.source.open { border-color: var(--accent); }
.source-head { display: flex; align-items: center; gap: 10px; padding: 7px 10px; }
.source-toggle { background: none; border: none; font-size: 12.5px;
                 font-family: ui-monospace, monospace; cursor: pointer; padding: 0; text-align: left; }
.source-toggle::before { content: '▸ '; color: var(--dim); }
.source.open .source-toggle::before { content: '▾ '; }
.source-name.binary { font-family: ui-monospace, monospace; font-size: 12.5px; color: var(--dim); }
.source-size { font-size: 11px; color: var(--dim); }
.source-dl { margin-left: auto; font-size: 11.5px; text-decoration: none;
             border: 1px solid var(--line); border-radius: 7px; padding: 3px 10px; }
.source-dl:hover { border-color: var(--accent); color: var(--accent); }
.source-body { border-top: 1px solid var(--line); max-height: 60vh; overflow: auto; }
pre.code { margin: 0; padding: 10px 12px; font-family: ui-monospace, monospace;
           font-size: 12px; line-height: 1.55; counter-reset: ln; tab-size: 4; }
pre.code .line { display: block; white-space: pre; }
pre.code .line::before { counter-increment: ln; content: counter(ln); display: inline-block;
                         width: 3.2em; margin-right: 1em; text-align: right;
                         color: var(--dim); opacity: .55; user-select: none; }
.j-root { padding: 8px 12px; font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.6; }
.j-node > summary { cursor: pointer; list-style: none; }
.j-node > summary::-webkit-details-marker { display: none; }
.j-node > summary::before { content: '▸ '; color: var(--dim); }
.j-node[open] > summary::before { content: '▾ '; }
.j-children { padding-left: 15px; border-left: 1px solid var(--line); margin-left: 4px; }
.j-leaf { padding-left: 15px; }
.j-key { color: var(--accent); }
.j-meta { color: var(--dim); font-size: 11px; }
.j-more { color: var(--dim); padding-left: 15px; font-size: 11px; }
.j-str { color: #187a3c; } .j-num { color: #a35b13; } .j-bool { color: #7b3fbf; }
.j-null { color: var(--dim); }
:root[data-theme="dark"] .j-str { color: #7ec699; }
:root[data-theme="dark"] .j-num { color: #e6a86b; }
:root[data-theme="dark"] .j-bool { color: #c792ea; }

/* ── operations page ── */
.ops-page { display: block; flex: 1; overflow-y: auto; padding: 18px 28px 48px; max-width: 1100px; }
.ops-summary { font-size: 13px; color: var(--dim); margin-bottom: 14px; }
#q.opsq { max-width: 380px; }
.op-row { border-bottom: 1px solid var(--line); padding: 9px 0; }
.op-head { display: flex; gap: 12px; align-items: baseline; }
.op-name { font-family: ui-monospace, monospace; font-size: 12.5px; font-weight: 600; }
.op-meta { font-size: 11.5px; color: var(--dim); }
.op-examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.op-examples a { font-size: 11.5px; text-decoration: none; border: 1px solid var(--line);
                 border-radius: 6px; padding: 1px 7px; }
.op-examples a:hover { border-color: var(--accent); }
#uncovered-sec { margin-top: 30px; }
#uncovered-sec h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
                    color: var(--dim); margin: 0 0 6px; }
#uncovered .facet { cursor: default; font-family: ui-monospace, monospace; font-size: 11px;
                    border: 1px solid var(--line); border-radius: 20px; padding: 2px 9px;
                    display: inline-block; margin: 0 5px 5px 0; }
.facet-values#uncovered { display: block; }
header .back { display: inline-block; margin-bottom: 8px; }
header { padding: 18px 28px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
h1 { margin: 0; font-size: 19px; letter-spacing: -.01em; }
.tagline { margin: 6px 0 0; color: var(--dim); font-size: 13px; max-width: 70ch; }
code { background: var(--bg); padding: 1px 5px; border-radius: 4px; font-size: .92em; }

/* ── full-page document view ── */
.stage-btn {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 11px; cursor: pointer; font-size: 12.5px; white-space: nowrap;
}
.stage-btn:hover { border-color: var(--accent); color: var(--accent); }
body.fullpage .doc-info { display: none; }
body.fullpage .doc-page { overflow: hidden; }
/* The stage fills the viewport; the bar stays so the size menu and the way out remain
   reachable without leaving the mode. */
body.fullpage .stage { height: 100vh; padding: 10px 14px 14px; }
body.fullpage .frame { border-radius: 10px; }
.quick.pinned { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); font-weight: 600; }
.quick.pinned.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── curation page ── */
.cbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
.pending { font-size: 12.5px; color: var(--dim); white-space: nowrap; }
.commit { background: var(--accent); color: #fff; border: none; border-radius: 9px;
          padding: 7px 13px; cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap; }
.commit[disabled] { opacity: .45; cursor: default; }
.banner { flex: none; background: var(--accent-soft); color: var(--accent);
          border-bottom: 1px solid var(--line); padding: 9px 18px; font-size: 13px; }
.banner code { background: transparent; border: 1px solid currentColor; opacity: .85; }
.act.star { background: rgba(20,26,36,.7); }
.act.star.on { background: var(--accent); }
/* The star stays visible once set - a featured card must be identifiable without hovering. */
.card.is-featured { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.card.is-featured .thumb-actions { opacity: 1; }

/* ── playground ── */
.pg-body { overflow: hidden; }
.pg { flex: 1; display: flex; min-height: 0; }
.pg-left, .pg-right { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pg-left { border-right: 1px solid var(--line); }
.pg-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px;
          background: var(--panel); border-bottom: 1px solid var(--line); }
.pg-title { font-size: 12.5px; font-family: ui-monospace, monospace; color: var(--dim); }
.pg-status { font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.pg-status.ok { color: #2e9e5b; } .pg-status.bad { color: #d4453c; }
.pg-dl { margin-left: auto; display: flex; gap: 6px; }
.pg-pick { width: 100%; max-width: 420px; background: var(--bg); border: 1px solid var(--line);
           border-radius: 9px; padding: 7px 10px; font-size: 13px; }
#document-editor { flex: 1; width: 100%; resize: none; border: none; outline: none; padding: 12px 14px;
       background: var(--bg); color: var(--fg); font-family: ui-monospace, monospace;
       font-size: 12.5px; line-height: 1.55; tab-size: 2; }
.pg-err { flex: none; max-height: 28%; overflow: auto; margin: 0; padding: 10px 14px;
          background: #2a1416; color: #ff9b95; font-family: ui-monospace, monospace;
          font-size: 12px; border-top: 1px solid var(--line); white-space: pre-wrap; }
:root[data-theme="light"] .pg-err { background: #fdecea; color: #a1231b; }
.pg-right .frame { flex: 1; margin: 14px; border-radius: var(--radius); }
.pg-file-note { max-width: 620px; margin: 12vh auto; padding: 0 24px;
                font-size: 14px; line-height: 1.6; }
.pg-file-note h2 { font-size: 19px; margin: 0 0 10px; }
.pg-file-note pre { background: var(--panel); border: 1px solid var(--line);
                    border-radius: 10px; padding: 12px 14px; overflow-x: auto;
                    font-family: ui-monospace, monospace; font-size: 12.5px; }

/* ── playground: agent surface ── */
.pg-warn { flex: none; max-height: 22%; overflow: auto; margin: 0; padding: 9px 14px;
           background: #3a2f12; color: #ffd98a; font-family: ui-monospace, monospace;
           font-size: 12px; border-top: 1px solid var(--line); white-space: pre-wrap; }
:root[data-theme="light"] .pg-warn { background: #fff6e0; color: #8a6100; }
.agent-panel { flex: none; border-top: 1px solid var(--line); background: var(--panel);
               padding: 10px 14px; max-height: 46%; overflow: auto; }
.agent-row { display: flex; gap: 20px; font-size: 12px; color: var(--dim);
             margin-bottom: 8px; flex-wrap: wrap; }
.agent-row b { color: var(--fg); font-variant-numeric: tabular-nums; }
#preview-image { max-width: 220px; max-height: 160px; border: 1px solid var(--line);
                 border-radius: 8px; display: block; margin-bottom: 8px; background: var(--bg); }
#preview-image:not([src]) { display: none; }
#agent-output { margin: 0; padding: 10px 12px; background: var(--bg);
                border: 1px solid var(--line); border-radius: 8px;
                font-family: ui-monospace, monospace; font-size: 11.5px; line-height: 1.5;
                white-space: pre-wrap; max-height: 320px; overflow: auto; }
/* Agent mode keeps the same engine and the same layout, just quieter chrome and more room
   for the machine-readable result. */
body.agent-mode .topnav, body.agent-mode .searchwrap, body.agent-mode #share,
body.agent-mode #fmt { display: none; }
body.agent-mode .pg-right .frame { max-height: 34vh; }

/* ── agent interface ── */
/* Never display:none and never visibility:hidden — the contract requires this to be ordinary
   visible text. In the human view it simply sits after the editor. */
/* display:block overrides the global `main { display:flex }`, which is a row and laid the
   whole agent interface out side by side. */
#agent-interface { display: block; flex: none; padding: 14px 18px 20px;
                   border-bottom: 1px solid var(--line); background: var(--panel);
                   font-size: 13px; overflow-y: auto; }

/* "In the human view it simply sits after the editor" was aspirational: DOM order puts this
   block first, and with nothing to reorder it a person opening the playground met a screen of
   JSON with the editor pushed out of a body that does not scroll. Flex order moves it after
   the editor for humans and leaves it first in agent mode, where a reader wants it at the top.
   Still ordinary visible content in both - the contract rules out hiding it, not placing it. */
body.pg-body:not(.agent-mode) { overflow: auto; }
body.pg-body:not(.agent-mode) .pg {
    order: 1; flex: none; height: calc(100vh - var(--topbar));
}
body.pg-body:not(.agent-mode) #agent-interface {
    order: 2; border-bottom: 0; border-top: 1px solid var(--line); overflow-y: visible;
}
.ai-h { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim);
        margin: 14px 0 5px; font-weight: 700; }
.ai-h:first-child { margin-top: 0; font-size: 12.5px; color: var(--fg); }
.ai-state { margin: 0; font-family: ui-monospace, monospace; font-size: 14px; font-weight: 600; }
.ai-facts { margin: 0; color: var(--dim); font-size: 12.5px; }
.ai-facts b { color: var(--fg); font-variant-numeric: tabular-nums; }
#agent-output, .ai-block {
  margin: 0 0 6px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; font-family: ui-monospace, monospace; font-size: 11.5px;
  line-height: 1.5; white-space: pre-wrap; max-height: 320px; overflow: auto;
}
.ai-block { font-size: 11px; color: var(--dim); }
#preview-image { max-width: 320px; max-height: 240px; border: 1px solid var(--line);
                 border-radius: 8px; display: block; background: var(--bg); }
.ai-dl { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.ai-dl a { font-size: 12.5px; border: 1px solid var(--line); border-radius: 7px;
           padding: 4px 11px; text-decoration: none; }
.ai-dl a:hover { border-color: var(--accent); color: var(--accent); }
.ai-dl a:not([href]) { opacity: .45; }
/* Agent mode: the text interface is the page. The editor and player stay present because the
   render has to happen, but they stop competing for attention. */
body.agent-mode .topnav, body.agent-mode .searchwrap,
body.agent-mode #share, body.agent-mode #fmt { display: none; }
body.agent-mode #agent-interface { max-height: 62vh; }
body.agent-mode .pg { max-height: 38vh; }
body.agent-mode .pg-right .frame { max-height: 26vh; }
/* In agent mode the result block is capped so PREVIEW and DOWNLOADS stay on screen; the JSON
   scrolls within its own box rather than pushing the rest of the contract out of view. */
body.agent-mode #agent-output { max-height: 190px; }
body.agent-mode #preview-image { max-height: 150px; }
body.agent-mode #agent-interface { max-height: 70vh; }
body.agent-mode .pg { max-height: 30vh; }

/* ── phones ───────────────────────────────────────────────────────────────────
   The desktop frame is a fixed 276px filter column beside a virtualised grid. On a
   390px-wide phone that column is most of the viewport, so below 760px it becomes a
   drawer: off-canvas by default, slid in over a scrim when Filters is tapped.

   `body.no-sidebar` is the DESKTOP collapse and means "hidden". The drawer needs the
   opposite default, so here that class is neutralised and `body.sidebar-open` governs
   instead — one class per mode rather than one class meaning different things at
   different widths, which is the version that was unreadable. */
/* Both of these belong to the drawer and are declared OFF here, before the media query
   turns them on. Declared after it they would win at every width, which is how the drawer
   first shipped without a close control. The scrim is explicitly display:none rather than
   left as a zero-height static div, so it can never sit over the desktop page. */
.side-close { display: none; }
#scrim { display: none; }

@media (max-width: 760px) {
  .topbar {
    height: auto; flex-wrap: wrap; gap: 10px 14px; padding: 9px 12px;
  }
  /* search onto its own full-width row, so the brand and the toggles keep theirs */
  .searchwrap { order: 5; flex-basis: 100%; }
  #q { max-width: none; }
  .topnav { gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav a { padding: 6px 8px; font-size: 13px; }
  .topright { margin-left: auto; }
  .chiprow { padding: 0 12px; }

  #sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 40;
    width: min(86vw, 320px); padding: 14px;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 0 0 0 1px var(--line), 12px 0 28px rgba(16, 24, 40, .18);
  }
  body.sidebar-open #sidebar { transform: none; }
  /* the desktop collapse must not also hide the drawer */
  body.no-sidebar #sidebar { display: block; }

  #scrim {
    display: block; position: fixed; inset: 0; z-index: 35; background: rgba(16, 24, 40, .44);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  body.sidebar-open #scrim { opacity: 1; pointer-events: auto; }
  /* the page behind a drawer must not scroll with it */
  body.sidebar-open { overflow: hidden; }

  /* a close control, pointless with a mouse and necessary with a thumb */
  .side-close { display: inline-flex; margin-left: auto; background: none;
                border: none; color: var(--dim); cursor: pointer;
                font-size: 20px; line-height: 1; padding: 0 2px; }

  /* The document page. The stage bar carries three controls that do not fit one row. */
  .stage { padding: 10px 12px 0; }
  .stage-bar { flex-wrap: wrap; gap: 8px 12px; }
  .size-pick { font-size: 11.5px; gap: 6px; }
  #size-note { min-width: 0; }
  .doc-info { padding: 18px 12px 40px; }
  /* The canvas is fitted to this frame by doc.js at this width, so there is nothing left
     to scroll to - and a scrollable frame would compete with the canvas for the gesture. */
  .frame { overflow: hidden; }

  #grid { padding: 12px; }
  .plane { inset: 12px auto auto 12px; }
  .results-head { padding: 8px 12px; flex-wrap: wrap; gap: 8px; }
}