/* Runtime shell (spec §9.3 responsive model, §10). Section columns reflow vertically;
   nothing shrinks, nothing scrolls sideways except a grid inside its own scroll box. */
:root {
  --bg: #f6f7f9; --panel: #fff; --ink: #1c1f26; --muted: #6b7280; --line: #e5e7eb;
  --accent: #1f4ed8; --accent-ink: #fff; --danger: #b91c1c; --radius: 10px;
  /* Derived surfaces (decision 0058): a product sets the tokens above; these follow the mode. */
  --accent-soft: var(--accent-soft); --accent-faint: var(--accent-faint); --surface-2: var(--surface-2); --code-bg: #0f172a; --code-ink: #e2e8f0;
}
/* Dark mode (decision 0058): the same tokens, other values; a product's accent stays its own. */
:root[data-theme="dark"] {
  --bg: #0f1115; --panel: #171a21; --ink: #e7e9ee; --muted: #9aa3b2; --line: #2a2f3a;
  --accent-soft: #1e2a4a; --accent-faint: #161c2c; --surface-2: #1f232c; --code-bg: #0b0d12; --code-ink: #d6dae2;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
html, body { height: 100%; }
body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
button, input, select, textarea { font: inherit; }
a { color: var(--accent); }
.muted { color: var(--muted); }

#topbar { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
#brand { font-weight: 600; flex: 1; display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
#brand .logo { height: 2rem; width: auto; max-width: 12rem; object-fit: contain; border-radius: 4px; }
#menu { display: none; border: 0; background: none; font-size: 1.3rem; }
#topbar button, #topbar select { padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }

#layout { display: grid; grid-template-columns: auto var(--nav-width, 240px) 1fr; grid-template-areas: "rail nav main"; flex: 1; min-height: 0; overflow: hidden; }
#main { overflow: auto; min-height: 0; display: flex; flex-direction: column; padding: 0; }
#content { padding: 1rem 1.25rem; min-width: 0; flex: 1; }
/* The navigation bar (decision 0063): the sidebar's entries as a dropdown, and the page's toolbar beside it. */
#subnav { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: .75rem; padding: .45rem 1.25rem; background: var(--panel); border-bottom: 1px solid var(--line); }
#subnav[hidden] { display: none; }
#subnav .subnav-nav { display: inline-flex; align-items: center; gap: .4rem; flex: none; color: var(--muted); }
#subnav .subnav-pick { padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font-weight: 600; max-width: 16rem; }
#subnav .subnav-actions { flex: 1; min-width: 0; }
#subnav .subnav-actions .toolbar { margin: 0; justify-content: flex-end; }
#subnav .subnav-actions .toolbar h1 { display: none; }   /* the dropdown already says what is open */
body.bar-nav #content > .toolbar { display: none; }
#nav { overflow: auto; min-height: 0; }
#rail { grid-area: rail; } #nav { grid-area: nav; } #main { grid-area: main; }
body.no-nav #layout { --nav-width: 0px; }
#nav[hidden] { display: none; }
/* Where the rail sits (decision 0055): an edge of the display; top and bottom lay it across as a strip. */
body.rail-right #layout { grid-template-columns: var(--nav-width, 240px) 1fr auto; grid-template-areas: "nav main rail"; }
body.rail-right #rail { border-right: 0; border-left: 1px solid var(--line); }
body.rail-top #layout, body.rail-bottom #layout { grid-template-columns: var(--nav-width, 240px) 1fr; grid-template-rows: auto 1fr; grid-template-areas: "rail rail" "nav main"; }
body.rail-bottom #layout { grid-template-rows: 1fr auto; grid-template-areas: "nav main" "rail rail"; }
body.rail-top #rail, body.rail-bottom #rail { flex-direction: row; overflow-x: auto; overflow-y: hidden; width: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: .35rem .6rem; }
body.rail-bottom #rail { border-bottom: 0; border-top: 1px solid var(--line); }
body.rail-top #rail button, body.rail-bottom #rail button { width: auto; min-width: 4.5rem; }
body.rail-top #rail.left button, body.rail-bottom #rail.left button { min-width: 0; }
/* The bar (decision 0055): across the top, or along the bottom. */
body.bar-bottom #topbar { order: 2; position: sticky; bottom: 0; top: auto; border-bottom: 0; border-top: 1px solid var(--line); }
body.bar-bottom #layout { order: 1; }
body.bar-bottom #accountmenu { top: auto; bottom: 50px; }
/* The rail (decisions 0053, 0055, 0056): the outer-most pane. A product's entries — its apps, a person's
   pins — beside the open app's own sidebar, never in its place. Stacked icon-over-label by default. */
#rail { display: flex; flex-direction: column; gap: .2rem; padding: .6rem .35rem; background: var(--panel); border-right: 1px solid var(--line); width: var(--rail-width, 5.6rem); overflow-y: auto; }
#rail[hidden] { display: none; }
#rail button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; width: 100%; padding: .45rem .2rem; border: 0; background: none; border-radius: 10px; cursor: pointer; font-size: var(--rail-text, .72rem); line-height: 1.15; color: var(--ink); }
#rail button:hover { background: var(--bg); }
#rail button.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
#rail button.muted { color: var(--muted); }
#rail .ic { font-size: var(--rail-icon, 1.5rem); line-height: 1; display: inline-flex; }
#rail .ic .icon { width: 1em; height: 1em; vertical-align: 0; }
#rail .lb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rail.left { width: var(--rail-width, 11rem); }
#rail.left button { flex-direction: row; justify-content: flex-start; gap: .5rem; padding: .45rem .5rem; text-align: left; }
#rail.left .ic { width: 1.4em; text-align: center; flex: none; }
#rail.nolabels { width: auto; }
#rail.nolabels .lb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#rail.nolabels button { padding: .45rem .5rem; }
#nav { background: var(--panel); border-right: 1px solid var(--line); padding: .75rem; }
#nav h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: .9rem .5rem .3rem; }
#nav .area { font-weight: 600; margin: .5rem; }
#nav button { display: block; width: 100%; text-align: left; padding: .5rem .6rem; border: 0; background: none; border-radius: 8px; cursor: pointer; }
#nav button:hover { background: var(--bg); }
#nav button.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
#nav button.muted { color: var(--muted); font-size: .9rem; }
/* The account menu (decision 0055): who you are, the studio, and signing out, behind one avatar. */
#account { display: flex; align-items: center; gap: .5rem; border: 0 !important; background: none !important; padding: .2rem .3rem !important; }
#account .avatar, #accountmenu .avatar { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #fff); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; }
#account .who { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#accountmenu { position: fixed; right: .75rem; top: 50px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); min-width: 15rem; padding: .4rem; z-index: 1200; }
#accountmenu .acct-head { padding: .5rem .6rem .6rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem; display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; align-items: center; }
#accountmenu .acct-head .avatar { grid-row: span 2; }
#accountmenu button { display: block; width: 100%; text-align: left; border: 0 !important; background: none !important; padding: .5rem .6rem !important; border-radius: 8px !important; }
#accountmenu button:hover { background: var(--bg) !important; }
#accountmenu button.studio { color: var(--accent); font-weight: 600; }
/* A list of clubs to switch between (a product's dialog, decision 0059). */
.club-list { display: flex; flex-direction: column; gap: .25rem; }
.club-list button { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; }
.club-list button:hover { background: var(--bg); }
.club-list button.current { border-color: var(--accent); background: var(--accent-soft); cursor: default; }
.club-list .avatar { width: 2.1rem; height: 2.1rem; border-radius: 8px; background: var(--accent); color: var(--accent-ink, #fff); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .85rem; flex: none; }
.club-list .name { flex: 1; }

/* Icons (decision 0057): lucide glyphs from one sprite; sized by the text around them. */
.icon { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; flex: none; }
.icon-text { display: inline-block; line-height: 1; }
#menu .icon, #bell .icon { width: 1.25rem; height: 1.25rem; vertical-align: -.3rem; }
.btn .icon { width: 1em; height: 1em; vertical-align: -.15em; margin-right: .3em; }

@media (max-width: 760px) {
  #layout { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "rail" "nav" "main"; }
  #rail { flex-direction: row; overflow-x: auto; width: auto !important; border-right: 0; border-bottom: 1px solid var(--line); }
  #rail button { min-width: 4.5rem; }
  #nav { display: none; border-right: 0; border-bottom: 1px solid var(--line); }
  #nav.open { display: block; }
  #menu { display: inline-block; }
  body.no-nav #menu { display: none; }
  #account .who { display: none; }
}

.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.toolbar .cmds { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.field.required label::after { content: ' *'; color: var(--danger); }
.search { padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 8px; min-width: 180px; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: grid; place-items: center; z-index: 20; padding: 1rem; }
.modal-box { background: var(--panel); border-radius: var(--radius); padding: 1rem; width: min(92vw, 520px); max-height: 80vh; overflow: auto; }
.modal-box input { width: 100%; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; margin-bottom: .5rem; }
.results .row, .section .row { padding: .5rem .6rem; border-radius: 8px; cursor: pointer; }
.results .row:hover, .section .row:hover { background: var(--bg); }
/* A control with buttons beside it (a lookup, a file): one line, the input takes the room, the buttons keep theirs. */
.field .file { display: flex; align-items: center; gap: .4rem; flex-wrap: nowrap; }
.field .file > input { flex: 1 1 auto; min-width: 0; width: auto; }
.field .file > .btn, .field .file > button { flex: none; white-space: nowrap; }
.field .file > input[type=file] { flex: 1 1 auto; }
.quickview { margin-top: .35rem; padding: .5rem .7rem; border-left: 3px solid var(--line); font-size: .9rem; }
.quickview:empty { display: none; }
.quickview .qv { margin: .1rem 0; }
.colrow { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .35rem 0; }
.colrow input, .colrow select { padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; min-width: 120px; flex: 1 1 140px; }
.colrow .extra { display: contents; }
.chk { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .4rem; }
.checks { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.subsection { border: 1px dashed var(--line); border-radius: 8px; padding: .75rem; margin: .5rem 0; }
.section h4 { margin: 1rem 0 .3rem; font-size: .9rem; }
pre.code { background: var(--code-bg); color: var(--code-ink); padding: .75rem; border-radius: 8px; overflow: auto; max-height: 50vh; font-size: .8rem; }
.section textarea { width: 100%; min-height: 6rem; padding: .5rem; border: 1px solid var(--line); border-radius: 8px; }
.toolbar h1 { font-size: 1.25rem; margin: 0; flex: 1; }
.btn { padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.danger { color: var(--danger); }
.btn:disabled { opacity: .5; cursor: default; }

.gridwrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
table.grid { border-collapse: collapse; width: 100%; min-width: 480px; }
table.grid th, table.grid td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
table.grid th { font-size: .8rem; color: var(--muted); font-weight: 600; background: var(--surface-2); }
table.grid tbody tr { cursor: pointer; }
table.grid tbody tr:hover { background: var(--accent-faint); }

.cards { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; cursor: pointer; }
.card h4 { margin: 0 0 .25rem; }
.day { margin: .75rem 0 .25rem; font-weight: 600; }

.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: .5rem .8rem; cursor: pointer; border-bottom: 2px solid transparent; }
.tabs button.active { border-bottom-color: var(--accent); color: var(--accent); font-weight: 600; }
.tab { display: grid; gap: 1rem; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
.section { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.section h3 { margin: 0 0 .75rem; font-size: .95rem; }
.fields { display: grid; gap: .75rem 1rem; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
@media (max-width: 640px) { .tab, .fields { grid-template-columns: 1fr; } }
.field label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .2rem; }
.field label .req { color: var(--danger); }
.field input, .field select, .field textarea { width: 100%; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.field input[readonly], .field input:disabled { background: var(--surface-2); color: var(--muted); }
.field textarea { min-height: 5rem; resize: vertical; }
.field .file { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.field img.preview { max-width: 100%; max-height: 180px; border-radius: 8px; border: 1px solid var(--line); }
.field .hint { font-size: .78rem; color: var(--muted); }
.header { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1rem; color: var(--muted); font-size: .9rem; }
.header b { color: var(--ink); }

#toast { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: .6rem 1rem; border-radius: 8px; max-width: min(92vw, 520px); z-index: 10; }
#toast.error { background: var(--danger); }
.signin { max-width: 420px; margin: 4rem auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; text-align: center; }
.empty { color: var(--muted); padding: 2rem; text-align: center; }

/* Board (decision 0025) */
.board { display: flex; gap: .75rem; overflow-x: auto; align-items: flex-start; padding-bottom: .5rem; }
.lane { flex: 0 0 260px; background: var(--surface-2); border-radius: var(--radius); padding: .5rem; min-height: 8rem; display: flex; flex-direction: column; gap: .5rem; }
.lane.over { outline: 2px dashed var(--accent); }
.lane h4 { margin: .25rem .25rem 0; font-size: .9rem; }
.lane .card { cursor: grab; }
/* Gallery */
.gallery .card { padding: 0; overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gallery h4 { padding: .6rem .8rem; }
.noimg { aspect-ratio: 4 / 3; display: grid; place-items: center; color: var(--muted); background: var(--surface-2); font-size: .85rem; }
/* Calendar month */
.calhead { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.calhead h2 { flex: 1; margin: 0; font-size: 1.1rem; text-align: center; }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.calgrid .dow { background: var(--surface-2); font-size: .75rem; text-align: center; padding: .3rem; color: var(--muted); }
.calcell { background: var(--panel); min-height: 5.5rem; padding: .25rem; font-size: .8rem; min-width: 0; }
.calcell.blank { background: var(--bg); }
.calcell .dnum { display: inline-block; min-width: 1.5rem; text-align: center; font-weight: 600; margin-bottom: .2rem; }
.calcell.today .dnum { background: var(--accent); color: var(--accent-ink); border-radius: 999px; }
.calev { display: block; background: var(--ev-soft, var(--accent-soft)); color: var(--ev, var(--accent)); border-radius: 6px; padding: .1rem .3rem; margin: .1rem 0; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Filter chips over a calendar's group binding (decision 0064). */
/* A peek at an event (decision 0065). */
.calpeek { position: fixed; z-index: 40; width: min(22rem, calc(100vw - 16px)); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: .8rem .9rem; display: flex; flex-direction: column; gap: .4rem; }
.calpeek-head { display: flex; align-items: center; gap: .5rem; }
.calpeek-head .dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--ev, var(--accent)); flex: none; }
.calpeek-head strong { font-size: 1.05rem; }
.calpeek-row { display: inline-flex; align-items: center; gap: .3rem; }
.calpeek-desc { margin: .2rem 0 0; font-size: .9rem; }
/* The month on a phone (decision 0065): a compact grid and an agenda for the tapped day. */
.calgrid.compact .calcell { min-height: 2.6rem; padding: .2rem 0; text-align: center; border: 0; background: var(--panel); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.calgrid.compact .calcell.picked { background: var(--accent-soft); }
.calgrid.compact .calcell.picked .dnum { color: var(--accent); }
.calgrid.compact .dots { display: inline-flex; gap: 2px; }
.calgrid.compact .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ev, var(--accent)); }
.agenda { margin-top: .8rem; }
.agenda-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.agenda-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-left: 3px solid var(--ev, var(--accent)); background: var(--ev-soft, var(--accent-soft)); border-radius: 8px; margin: .3rem 0; cursor: pointer; }
.agenda-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .85rem; flex: none; }
.agenda-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calchips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .6rem; }
.calchips[hidden] { display: none; }
.calchips .chip { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; background: var(--panel); color: var(--ink); border-color: var(--line); }
.calchips .chip .dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--ev, var(--accent)); }
.calchips .chip.off { opacity: .5; text-decoration: line-through; }
.calchips .chip.off .dot { background: var(--line); }
@media (max-width: 700px) { .calcell { min-height: 3.5rem; } .calev { font-size: .7rem; } }

/* Map and address (decision 0026) */
.map { height: 70vh; min-height: 320px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); position: relative; z-index: 0; isolation: isolate; }
.address { position: relative; }
.addr-results { position: absolute; left: 0; right: 0; z-index: 5; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; max-height: 14rem; overflow: auto; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.addr-row { padding: .4rem .6rem; cursor: pointer; font-size: .9rem; }
.addr-row:hover { background: var(--surface-2); }

/* Studio chrome (decision 0027) */
.crumbs { display: flex; align-items: center; gap: .4rem; font-size: 1.1rem; flex: 1; flex-wrap: wrap; min-width: 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; color: var(--accent); }
.crumbs b { font-weight: 600; }
.crumbs .sep { color: var(--muted); }
.pills { display: flex; gap: .4rem; margin: .25rem 0 .75rem; flex-wrap: wrap; }
.pills button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: .3rem .85rem; cursor: pointer; }
.pills button.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.dgbar { display: flex; gap: .75rem; align-items: center; margin-bottom: .5rem; }
.dgbar .search { flex: 0 1 280px; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; }
table.dg th .sortable { cursor: pointer; user-select: none; }
table.dg th .sortable:hover { color: var(--accent); }
table.dg th .thbtn { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: .65rem; padding: 0 .1rem; vertical-align: middle; }
.tiles { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: .75rem 0; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tile h3 { margin: 0; padding: .7rem 1rem; border-bottom: 1px solid var(--line); font-size: .95rem; }
.tile a { display: block; padding: .5rem 1rem; color: var(--accent); text-decoration: none; }
.tile a:hover { background: var(--bg); }
.tile .disabled { display: block; padding: .5rem 1rem; color: var(--muted); }
.props { display: grid; gap: .25rem 2rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 0; }
.props dt { font-size: .85rem; font-weight: 600; margin: 0 0 .15rem; }
.props dd { margin: 0 0 .75rem; }
.modal-box.wide { width: min(96vw, 760px); }
.code-edit { width: 100%; min-height: 20rem; font: .85rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: .6rem; border: 1px solid var(--line); border-radius: 8px; white-space: pre; }
#main { min-width: 0; }

/* Spreadsheet-style header menu (decision 0027) */
table.dg th { position: relative; white-space: nowrap; }
table.dg th .th-label { cursor: pointer; user-select: none; }
table.dg th .th-label:hover { color: var(--accent); }
table.dg th .th-ind { margin-left: .25rem; color: var(--accent); font-size: .75rem; }
table.dg th .thbtn { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0 .25rem; margin-left: .15rem; border-radius: 4px; }
table.dg th .thbtn:hover, table.dg th.filtered .thbtn { color: var(--accent); background: var(--accent-soft); }
.dg-menu { position: fixed; z-index: 30; width: 280px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: .4rem; display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; }
.dg-menu .dg-item { text-align: left; border: 0; background: none; padding: .4rem .5rem; border-radius: 6px; cursor: pointer; }
.dg-menu .dg-item:hover:not(:disabled) { background: var(--bg); }
.dg-menu .dg-item:disabled { color: var(--muted); cursor: default; }
.dg-menu .dg-sep { border-top: 1px solid var(--line); margin: .2rem 0; }
.dg-menu input { width: 100%; box-sizing: border-box; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 6px; }
.dg-values { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: .2rem .3rem; display: flex; flex-direction: column; }
.dg-values .chk { display: flex; align-items: center; justify-content: flex-start; gap: .5rem; padding: .2rem .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.dg-menu input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; padding: 0; }
.dg-values .chk span { overflow: hidden; text-overflow: ellipsis; }
.dg-values .chk .blank { color: var(--muted); font-style: italic; }
.dg-actions { display: flex; justify-content: flex-end; gap: .4rem; padding-top: .2rem; }
.dg-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: .2rem .7rem; font-size: .8rem; cursor: pointer; }
.chip.clear { border-color: var(--line); background: var(--panel); color: var(--muted); }

/* View designer (decision 0028) */
.designer { display: grid; grid-template-columns: 240px minmax(0, 1fr) 320px; gap: .75rem; align-items: start; }
@media (max-width: 1100px) { .designer { grid-template-columns: 1fr; } }
.vd-pane { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem; max-height: calc(100vh - 170px); overflow: auto; }
.vd-pane h3 { margin: 0 0 .5rem; font-size: .95rem; }
.vd-pane .section { border: 0; padding: 0 0 .75rem; margin-bottom: .75rem; border-bottom: 1px solid var(--line); border-radius: 0; }
.vd-pane .section:last-child { border-bottom: 0; }
.vd-centre { padding: .5rem; }
.vd-centre.over { outline: 2px dashed var(--accent); }
.vd-col { display: flex; align-items: center; gap: .4rem; padding: .3rem .35rem; border-radius: 6px; cursor: grab; }
.vd-col:hover { background: var(--bg); }
.vd-col .vd-type { margin-left: auto; font-size: .75rem; }
table.vd th { cursor: pointer; user-select: none; }
table.vd th.sel, table.vd td.sel { background: var(--accent-soft); }
table.vd th.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
.vd-status { padding: .45rem .7rem; border-radius: 8px; margin-bottom: .6rem; font-size: .9rem; background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
.vd-status.err { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

/* Form designer (decision 0029) */
.fd-canvas { padding: .75rem; }
.fd-form .tabs button.fd-sel { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.fd-section { cursor: pointer; }
.fd-section.fd-sel { outline: 2px solid var(--accent); }
.fd-section.fd-over, .fd-field.fd-over { background: var(--accent-soft); }
.fd-field { cursor: grab; padding: .25rem; border-radius: 6px; border: 1px dashed transparent; }
.fd-field:hover { border-color: var(--line); }
.fd-field.fd-sel { outline: 2px solid var(--accent); background: var(--accent-faint); }
.fd-field input[readonly], .fd-field textarea[readonly], .fd-field select:disabled { background: var(--panel); color: var(--ink); pointer-events: none; }
.fd-empty { grid-column: 1 / -1; border: 1px dashed var(--line); border-radius: 8px; padding: 1rem; text-align: center; color: var(--muted); font-size: .85rem; }

/* Dialogs and grid chooser (decision 0030) */
.dlg-title { font-size: 1.1rem; margin: 0 0 .6rem; }
.modal-box p { margin: 0 0 1rem; }
.dg-cols { margin-left: auto; }
.dg-menu .dg-label { font-size: .8rem; color: var(--muted); padding: .2rem .5rem; }

/* Form display options and components (decision 0031) */
.labels-left .field { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; align-items: start; gap: .5rem; }
.labels-left .field label { margin: .5rem 0 0; }
.field.spacer { min-height: 1.5rem; }
.field.static p { margin: .2rem 0; }
.field.subgrid .gridwrap { margin-bottom: .4rem; }
.field.subgrid table.grid { min-width: 0; }
.fd-form.phone .tab, .fd-form.phone .fields { grid-template-columns: 1fr !important; }
.fd-hidden { opacity: .45; outline: 1px dashed var(--muted); }
.fd-hidden::after { content: ' (hidden)'; font-size: .75rem; color: var(--muted); }
.fd-tree { font-size: .9rem; }
.fd-tree .node { display: flex; align-items: center; gap: .35rem; padding: .2rem .35rem; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-tree .node:hover { background: var(--bg); }
.fd-tree .node.sel { background: var(--accent-soft); color: var(--accent); }
.fd-tree .node .kind { font-size: .7rem; color: var(--muted); }
.fd-cmp { display: flex; align-items: center; gap: .5rem; padding: .35rem .4rem; border: 1px solid var(--line); border-radius: 8px; margin-bottom: .35rem; cursor: grab; background: var(--panel); }
.fd-cmp:hover { border-color: var(--accent); }
.fd-cmp .muted { font-size: .75rem; }
.fd-toolbar-group { display: inline-flex; gap: .25rem; }
.fd-canvas.tablet { max-width: 768px; margin: 0 auto; }
.fd-canvas.phone { max-width: 400px; margin: 0 auto; }
.fd-subgrid-preview table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.fd-subgrid-preview th, .fd-subgrid-preview td { text-align: left; padding: .3rem .5rem; border-bottom: 1px solid var(--line); }
.fd-placeholder { border: 1px dashed var(--line); border-radius: 8px; padding: .75rem; color: var(--muted); font-size: .85rem; text-align: center; }

/* Command bar, split save, footer (decision 0033) */
.toolbar.cmdbar { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem .6rem; margin-bottom: .6rem; }
.toolbar .spacer { flex: 1; }
.split { display: inline-flex; }
.split .btn:first-child { border-radius: 8px 0 0 8px; }
.split .split-caret { border-radius: 0 8px 8px 0; padding: .45rem .55rem; border-left: 1px solid rgba(255,255,255,.45); }
.dg-menu .dg-item.danger { color: var(--danger); }
.fd-footer { display: flex; gap: .8rem; align-items: center; margin-top: .6rem; padding: .4rem .7rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); font-size: .85rem; }
.fd-footer .spacer { flex: 1; }
.fd-footer select { padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 6px; }

/* App designer (decision 0034) */
.ad-frame { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); min-height: 420px; }
.ad-top { background: var(--ink); color: var(--bg); padding: .5rem .8rem; font-size: .9rem; }
.ad-body { display: grid; grid-template-columns: 200px 1fr; min-height: 380px; }
.ad-nav { background: var(--panel); border-right: 1px solid var(--line); padding: .5rem; display: flex; flex-direction: column; }
.ad-nav h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: .6rem .4rem .2rem; }
.ad-nav button { display: block; width: 100%; text-align: left; padding: .4rem .5rem; border: 0; background: none; border-radius: 6px; cursor: pointer; }
.ad-nav button.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ad-areas { margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--line); }
.ad-areas select { width: 100%; padding: .3rem; border: 1px solid var(--line); border-radius: 6px; }
.ad-page { padding: .8rem 1rem; min-width: 0; }
.ad-page h1 { font-size: 1.1rem; margin: 0 0 .6rem; }
.ad-canvas.phone .ad-body { grid-template-columns: 1fr; }
.ad-canvas.phone .ad-nav { border-right: 0; border-bottom: 1px solid var(--line); }
.ad-canvas.tablet { max-width: 768px; margin: 0 auto; }
.ad-canvas.phone { max-width: 400px; margin: 0 auto; }

/* Flow designer (decision 0035) */
.fl-canvas { padding: 1rem; }
.fl-flow { display: flex; flex-direction: column; align-items: center; }
.fl-card { width: min(100%, 460px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; cursor: pointer; }
.fl-card:hover { border-color: var(--accent); }
.fl-card.fl-sel { outline: 2px solid var(--accent); }
.fl-card.fl-err { border-color: var(--danger); background: #fef2f2; }
.fl-card.fl-trigger { border-left: 4px solid var(--accent); }
.fl-kind { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: .15rem; }
.fl-tag { background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 0 .4rem; margin-left: .35rem; text-transform: none; letter-spacing: 0; }
.fl-insert { position: relative; height: 1.9rem; display: grid; place-items: center; }
.fl-insert::before { content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--line); }
.fl-insert .btn { position: relative; padding: .1rem .5rem; line-height: 1.2; border-radius: 999px; }
.code-edit.bad { border-color: var(--danger); }

/* Dynamic content, test pane and run detail (decision 0036) */
.fl-expr { display: flex; gap: .3rem; }
.fl-expr input { flex: 1; min-width: 0; }
.fl-expr .btn { padding: .35rem .6rem; font-style: italic; }
.dg-menu code, .dg-values code { font-size: .75rem; }
.fl-test { background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius); padding: .8rem 1rem; margin-top: .75rem; }
.fl-test .toolbar { margin-bottom: .5rem; }
.fl-test h3 { margin: 0; font-size: 1rem; }
.fl-badge { border-radius: 999px; padding: .1rem .6rem; font-size: .78rem; background: var(--surface-2); color: var(--muted); }
.fl-badge.succeeded { background: #dcfce7; color: #166534; }
.fl-badge.failed { background: #fee2e2; color: #991b1b; }
.fl-badge.running, .fl-badge.waiting { background: var(--accent-soft); color: var(--accent); }
.fl-badge.skipped { background: var(--surface-2); color: var(--muted); }
.fl-event { border-top: 1px solid var(--line); padding: .35rem 0; }
.fl-event summary { cursor: pointer; }
.fl-io { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .4rem; }
.fl-io pre.code { max-height: 180px; font-size: .75rem; }
@media (max-width: 700px) { .fl-io { grid-template-columns: 1fr; } }

/* Week and day calendar (decision 0040) */
.calmodes { margin-left: auto; display: inline-flex; gap: .25rem; }
.calcell { cursor: pointer; }
.calcell:hover { background: var(--accent-faint); }
.calcell .dnum { cursor: pointer; }
.tg-head { display: grid; grid-template-columns: 56px repeat(var(--days, 7), 1fr); }
.tg-head .tg-day { text-align: center; font-size: .8rem; padding: .3rem 0; border-left: 1px solid var(--line); }
.tg-head .tg-day.today b { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 0 .4rem; display: inline-block; }
.tg-body { display: grid; grid-template-columns: 56px repeat(var(--days, 7), 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.tg-gutter { display: flex; flex-direction: column; }
.tg-gutter .tg-hour { height: 44px; font-size: .7rem; color: var(--muted); padding: 0 .3rem; border-top: 1px solid var(--line); }
.tg-col { position: relative; border-left: 1px solid var(--line); }
.tg-slot { height: 44px; border-top: 1px solid var(--line); }
.tg-slot:hover { background: var(--accent-faint); }
.tg-ev { position: absolute; left: 2px; right: 2px; background: var(--ev-soft, var(--accent-soft)); color: var(--ev, var(--accent)); border-left: 3px solid var(--ev, var(--accent)); border-radius: 4px; font-size: .75rem; padding: .1rem .3rem; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tg-outside { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
@media (max-width: 700px) { .tg-head, .tg-body { grid-template-columns: 44px repeat(var(--days, 7), minmax(90px, 1fr)); } .calwrap { overflow-x: auto; } }

/* For each: the loop body is drawn inside the loop's own card (decision 0041) */
.fl-loop { width: min(100%, 520px); display: flex; flex-direction: column; align-items: center; }
.fl-loop > .fl-card { width: min(100%, 460px); border-left: 4px solid var(--accent); }
.fl-loop .fl-body { align-self: stretch; display: flex; flex-direction: column; align-items: center; margin: 0 0 0 1.4rem; padding: 0 .6rem .5rem; border-left: 2px dashed var(--line); border-bottom: 2px dashed var(--line); border-radius: 0 0 0 var(--radius); }
.fl-loop .fl-body .fl-card { width: min(100%, 400px); }
.fl-empty { font-size: .8rem; padding: .3rem 0; }

/* Add to calendar (decision 0042) */
.cal-add { border: 0; background: transparent; cursor: pointer; font-size: .7rem; line-height: 1; padding: 0 .1rem; opacity: 0; }
.calev:hover .cal-add, .tg-ev:hover .cal-add, .cal-add:focus { opacity: .75; }
.cal-add:hover { opacity: 1; }

/* Repeats (decision 0049) */
.recur { display: flex; flex-direction: column; gap: .35rem; }
.recur .colrow { flex-wrap: wrap; align-items: center; gap: .35rem; }
.recur .chk { font-size: .8rem; }

/* A checkbox is not a text box: the width rules above are for things you type in. */
.field input[type="checkbox"], .field input[type="radio"],
.colrow input[type="checkbox"], .colrow input[type="radio"],
.dg-menu input[type="checkbox"], .dg-menu input[type="radio"] { width: auto; min-width: 0; flex: 0 0 auto; }

/* Rows in a narrow designer pane: the control shrinks, the button stays beside it. */
.colrow.tight { flex-wrap: nowrap; gap: .3rem; }
.colrow.tight input, .colrow.tight select { min-width: 0; flex: 1 1 4rem; }
.colrow.tight .btn { flex: 0 0 auto; padding: .35rem .5rem; }
.colrow .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colrow.tight > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A row of tick boxes (Runs after, Events) wraps as boxes, not as stretched inputs. */
.colrow .chk { flex: 0 0 auto; }

/* Pages (decision 0050) */
.pagewrap { display: flex; flex-direction: column; gap: 1rem; }
.pg-section { display: block; padding: .25rem 0; }
.pg-section > h2 { margin: 0 0 .5rem; }
.pg-cols { display: grid; gap: 1rem; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); align-items: start; }
@media (max-width: 700px) { .pg-cols { grid-template-columns: 1fr; } }
.pg-block { min-width: 0; }
.pg-block img { max-width: 100%; border-radius: var(--radius); }
.pg-rich > :first-child { margin-top: 0; }
.pg-rich > :last-child { margin-bottom: 0; }
.pg-rich ul, .pg-rich ol { padding-left: 1.2rem; }
.pg-rich blockquote { margin: .5rem 0; padding-left: .8rem; border-left: 3px solid var(--line); color: var(--muted); }
.pg-value { font-size: 1.1rem; }
.grid tr.clickable { cursor: pointer; }

/* The page designer (decision 0050) */
.pg-canvas { padding: 1rem; background: var(--panel); }
.pg-canvas .pg-block { outline: 1px dashed transparent; cursor: pointer; }
.pg-canvas .pg-block:hover { outline-color: var(--line); }
.pg-canvas .pg-block.pg-sel { outline: 2px solid var(--accent); outline-offset: 2px; }
.fd-palette { display: flex; flex-wrap: wrap; gap: .3rem; }

/* A tick box reads as a sentence, not as a caption above an empty square. */
.field-check { display: flex; align-items: center; min-height: 2.1rem; }
.field-check > .chk { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: 0; cursor: pointer; }
.field-check > .chk > span { font-size: .9rem; color: inherit; }
.field-check label { margin-bottom: 0; }
.labels-left .field-check { grid-template-columns: none; display: flex; }

.pg-canvas .fd-over { outline: 2px dashed var(--accent); outline-offset: 2px; }
.pg-canvas section.fd-over { background: var(--accent-faint); }

.pg-video { position: relative; padding-top: 56.25%; }
.pg-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius); }

.pg-form { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; background: var(--panel); }
.pg-form .tabs { display: none; }

/* The rail (decision 0051): a product's pinned entries above the app's own navigation */


/* The checker's findings in the Get apps dialog (decision 0052). */
.findings { padding-left: 1.2rem; }
.findings li { margin: .25rem 0; }
.findings li strong { text-transform: uppercase; font-size: .75rem; letter-spacing: .04em; }
.findings li.error strong { color: var(--danger); }
.findings li.warning strong { color: #b45309; }
.findings li.info strong { color: var(--muted); }

/* The bell's unread count, and a person's own pages (decision 0062). */
#bell { position: relative; }
#bell .badge { position: absolute; top: -.35rem; right: -.35rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .3rem; border-radius: 999px; background: var(--danger); color: #fff; font-size: .7rem; line-height: 1.1rem; text-align: center; font-weight: 600; }
img.avatar { object-fit: cover; }
.avatar.big { width: 5rem; height: 5rem; font-size: 1.6rem; }
.mecard { text-align: left; max-width: 520px; margin: 2rem auto; }
.mecard h2 { margin-top: 0; }
.mecard h3 { margin: 1.2rem 0 .4rem; font-size: 1rem; }
.mecard .field { display: block; margin: .6rem 0; }
.mecard .field > span:first-child { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .2rem; }
.mecard .field input { width: 100%; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); }
.mecard .field .hint { display: block; font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.me-picrow { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }

/* A search that opens on demand (decision 0063). */
.searchbox { display: inline-flex; align-items: center; gap: .3rem; }
.searchbox .search { display: none; }
.searchbox .search.open { display: inline-block; }
.btn.iconbtn { padding: .4rem .5rem; line-height: 1; }
.btn.iconbtn .icon { margin: 0; width: 1.1em; height: 1.1em; vertical-align: -.2em; }

.clash { color: var(--danger); }

/* A service's thumbnail (decision 0067): its picture, its publisher's logo, or the publisher's first letter. */
.svc-thumb { width: 2rem; height: 2rem; border-radius: 8px; object-fit: contain; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: var(--accent); vertical-align: middle; }
.svc-thumb.initial { background: var(--accent-soft); }
.svc-head { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: .8rem; }
.svc-head .svc-thumb { width: 3rem; height: 3rem; font-size: 1.3rem; flex: none; }

/* The operator's page (decision 0068): links to its subpages; clickable rows in their lists. */
.op-links { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 1rem; }
.op-link { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: inherit; text-decoration: none; }
.op-link:hover { border-color: var(--accent); }
table.grid tr.clickable { cursor: pointer; }
.svc-thumb.big { width: 3.5rem; height: 3.5rem; font-size: 1.4rem; }
.modal-box .field { display: block; margin: .6rem 0; }
.modal-box .field > span:first-child { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .2rem; }
.modal-box .field input[type=text], .modal-box .field input[type=email], .modal-box .field select, .modal-box .field textarea { width: 100%; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); }

/* The default services table (decision 0066): compact fields inside a row. */
.op-fields { display: flex; flex-wrap: wrap; gap: .4rem .8rem; }
.op-field { display: inline-flex; flex-direction: column; gap: .1rem; font-size: .8rem; color: var(--muted); min-width: 11rem; }
.op-field input { padding: .3rem .45rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font-size: .9rem; }
table.grid td select { padding: .3rem .45rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); }