/* Design Exchange shell — quiet by design, so the work in the preview is the
   only thing on screen with any color.

   Theme: the light palette is the bare :root, so it is what a browser gets with
   no JavaScript and no preference. The same dark values appear twice on purpose
   — once for viewers whose system asks for dark and who have not chosen
   otherwise, and once for an explicit choice, which has to win in both
   directions. Keep the two lists in step. */
:root{
  color-scheme:light;
  --bg:#ffffff;
  --bg-subtle:#fafafa;
  --bg-sunken:#f2f2f3;
  --ink:#18181b;
  --ink-2:#5f5f68;
  --ink-3:#9a9aa3;
  --line:#e7e7ea;
  --line-2:#d6d6db;
  --accent:#18181b;          /* actions are monochrome; color is for state only */
  --accent-hover:#000000;
  --on-accent:#ffffff;
  --scrim:rgba(255,255,255,.6);
  --ok:#177245;
  --bad:#b42318;
  --radius:8px;
  --radius-sm:6px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --topbar-h:52px;
  --sidebar-w:208px;
  --sidebar-w-collapsed:56px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#111113;
    --bg-subtle:#17171a;
    --bg-sunken:#0a0a0b;
    --ink:#f2f2f3;
    --ink-2:#a2a2aa;
    --ink-3:#71717a;
    --line:#26262b;
    --line-2:#3a3a42;
    --accent:#f2f2f3;
    --accent-hover:#ffffff;
    --on-accent:#111113;
    --scrim:rgba(17,17,19,.6);
    --ok:#4ade80;
    --bad:#f87171;
  }
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#111113;
  --bg-subtle:#17171a;
  --bg-sunken:#0a0a0b;
  --ink:#f2f2f3;
  --ink-2:#a2a2aa;
  --ink-3:#71717a;
  --line:#26262b;
  --line-2:#3a3a42;
  --accent:#f2f2f3;
  --accent-hover:#ffffff;
  --on-accent:#111113;
  --scrim:rgba(17,17,19,.6);
  --ok:#4ade80;
  --bad:#f87171;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;font-family:var(--font);font-size:13.5px;line-height:1.55;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.015em}
code{font-family:var(--mono);font-size:.86em}
.dim{color:var(--ink-3)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---- shell: fixed sidebar, scrolling main column --------------------------
   The sidebar owns navigation and identity; the top bar keeps only utilities,
   pushed to the right. Collapsing swaps one width token, so nothing else in the
   layout has to know about it. */
:root[data-sidebar="collapsed"]{--sidebar-w:var(--sidebar-w-collapsed)}

.shell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);height:100vh}
.shell-main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto}
.page-design .shell-main{overflow:hidden}

.sidebar{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 8px;min-width:0;overflow:hidden;
  border-right:1px solid var(--line);background:var(--bg-subtle);
}
.sidebar .brand{
  display:flex;align-items:center;gap:10px;height:32px;padding:0 8px;margin-bottom:14px;
  font-weight:600;text-decoration:none;white-space:nowrap;
}
.sidenav{display:flex;flex-direction:column;gap:2px}
.nav-item{
  display:flex;align-items:center;gap:10px;
  height:34px;padding:0 8px;border:0;border-radius:var(--radius-sm);
  font:inherit;font-size:13px;color:var(--ink-2);text-decoration:none;
  background:transparent;cursor:pointer;white-space:nowrap;overflow:hidden;
}
.nav-item:hover{color:var(--ink);background:var(--bg-sunken)}
.nav-item.is-active{color:var(--ink);background:var(--bg-sunken);font-weight:500}
.nav-item svg{width:16px;height:16px;flex:none}
.nav-label{overflow:hidden;text-overflow:ellipsis}
.sidebar-toggle{margin-top:auto;color:var(--ink-3)}
.sidebar-toggle .chevron{transform-origin:15.5px 12px}

/* Collapsed: icons only, centred, labels gone from the accessibility tree too. */
:root[data-sidebar="collapsed"] .nav-label{display:none}
:root[data-sidebar="collapsed"] .nav-item,
:root[data-sidebar="collapsed"] .sidebar .brand{justify-content:center;padding:0}
:root[data-sidebar="collapsed"] .sidebar-toggle .chevron{transform:rotate(180deg)}

/* ---- top bar ---- */
.topbar{
  flex:none;height:var(--topbar-h);display:flex;align-items:center;gap:18px;
  padding:0 18px;border-bottom:1px solid var(--line);background:var(--bg);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;text-decoration:none}
.brand-mark{width:11px;height:11px;border-radius:3px;background:var(--ink)}
/* Back out of a design, to the left of its title. Not in .title-block: that is
   baseline-aligned for the title and its hash, and an icon baselined against
   14px text sits visibly low. */
/* The way out of a page. A framed 36px button rather than a loose glyph: the
   border and the tinted ground are what stop an arrow in a toolbar reading as
   decoration. Icon only, so `aria-label` and `title` carry the meaning
   for a screen reader and for a hover.
   The Mozart demo carries a visually identical control (`.volver` in
   mozart_call_bot/index.html) — same height, same 20px arrow, same hover slide —
   so the two applications behave the same way when you want out of them. Change
   one and change the other. */
.back-link{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;
  /* .topbar is a flex row with gap:18px, which reads as a gap between this and
     the title it sits beside rather than as one group. Pull it back in. */
  margin-right:-6px;
  /* 8px, not var(--radius-sm): this button is matched pixel for pixel against
     the identical one in the Mozart demo, whose own scale rounds at 8. The two
     sit in different design systems, so what is shared is the SHAPE and the
     role of each colour — one step off the panel for the fill, the hairline for
     the border — not the token names. */
  border:1px solid var(--line);border-radius:8px;
  background:var(--bg-sunken);color:var(--ink);text-decoration:none;
  transition:color .12s ease,background .12s ease,border-color .12s ease;
}
.back-link svg{width:20px;height:20px;flex:none;transition:transform .12s ease}
.back-link:hover{background:var(--line);border-color:var(--ink-3)}
/* The arrow slides back on hover — with no label, this is most of what says
   "leave this" rather than "go somewhere". */
.back-link:hover svg{transform:translateX(-3px)}
.title-block{display:flex;align-items:baseline;gap:9px;min-width:0}
.title-block h1{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw;cursor:text}
.title-block h1:hover{color:var(--ink-2)}
.hash{color:var(--ink-3);font-size:11.5px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.health{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;color:var(--ink-2);white-space:nowrap;
}
.health::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-3);
}
.health.ok::before{background:var(--ok)}
.health.bad::before{background:var(--bad)}
.health.bad{color:var(--bad)}

.whoami{font-size:12px;color:var(--ink-2)}
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);
  color:var(--ink-3);
}
.theme-toggle:hover{color:var(--ink);background:var(--bg-sunken)}
.theme-toggle svg{display:none;width:15px;height:15px}
.theme-toggle[data-choice="system"] .icon-system,
.theme-toggle[data-choice="light"] .icon-light,
.theme-toggle[data-choice="dark"] .icon-dark{display:block}
.inline-form{display:inline}

/* ---- buttons / fields ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 15px;border-radius:var(--radius-sm);border:1px solid transparent;
  font:inherit;font-weight:500;cursor:pointer;text-decoration:none;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.btn-sm{padding:5px 10px;font-size:12.5px}
.btn-accent{background:var(--accent);color:var(--on-accent)}
.btn-accent:hover{background:var(--accent-hover)}
.btn-accent:disabled{background:var(--ink-3);cursor:progress}
.btn-ghost{background:var(--bg);border-color:var(--line-2);color:var(--ink-2)}
.btn-ghost:hover{color:var(--ink);border-color:var(--ink-3)}
input,select,textarea{
  font:inherit;color:var(--ink);background:var(--bg);
  border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:8px 10px;width:100%;
}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ink)}
select{cursor:pointer}
label{font-size:12px;color:var(--ink-2)}

/* ---- gallery ---- */
.wrap{width:100%;max-width:1040px;margin:0 auto;padding:56px 24px 96px}
.intro h1{font-size:27px;line-height:1.25;max-width:34ch}
.intro p{max-width:58ch;color:var(--ink-2);margin-top:12px}
.panel{margin-top:48px}
.panel h2{
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:22px;
}
.count{font-size:11.5px;color:var(--ink-3);margin-left:4px;letter-spacing:0}
.newform{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;align-items:end}
.field{display:flex;flex-direction:column;gap:6px}
.field-wide{grid-column:1 / -1}
.newform .btn{grid-column:1;justify-self:start;padding-inline:22px}
.field input[type=file]{border:1px dashed var(--line-2);background:var(--bg-subtle);cursor:pointer}
.empty{color:var(--ink-3)}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);position:relative}
.card.is-menu-open{z-index:5}
.card:hover{border-color:var(--line-2)}
/* This overflow is what clips the 400%-wide scaled thumbnail — .card no longer
   clips, so removing it here would leak every preview across the page. */
.card-preview{display:block;position:relative;height:160px;overflow:hidden;background:var(--bg-sunken);border-radius:var(--radius) var(--radius) 0 0}
.card-preview iframe{
  position:absolute;top:0;left:0;width:400%;height:400%;border:0;
  transform:scale(.25);transform-origin:top left;pointer-events:none;
}
.card-preview-cover{position:absolute;inset:0}
.card-body{padding:12px 14px 14px;border-top:1px solid var(--line)}
.card-body h3{font-size:13.5px}
.card-body h3 a{text-decoration:none}
.card-body h3 a:hover{text-decoration:underline}
.meta{margin:5px 0 0;font-size:12px;color:var(--ink-2)}
.meta code{color:var(--ink-3)}
.tag{
  margin-left:6px;padding:1px 6px;border-radius:3px;font-size:10px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);background:var(--bg-sunken);
}

/* ---- design workspace ---- */
.workspace{
  flex:1;min-height:0;
  display:grid;grid-template-columns:minmax(0,1fr) 400px;
}
.preview{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line)}
.preview-bar{
  display:flex;align-items:center;gap:12px;padding:9px 14px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);background:var(--bg);
}
.sel{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-3)}
.sel select{width:auto;max-width:250px;padding:5px 8px;font-size:12.5px;border-color:var(--line)}
.widths{display:flex;gap:2px}
.w-btn{
  background:transparent;border:0;border-radius:var(--radius-sm);color:var(--ink-3);
  font:inherit;font-size:12px;padding:5px 10px;cursor:pointer;
}
.w-btn:hover{color:var(--ink-2)}
.w-btn.is-on{background:var(--bg-sunken);color:var(--ink)}
.preview-actions{margin-left:auto;display:flex;gap:8px}
.stage{position:relative;flex:1;min-height:0;background:var(--bg-sunken);display:flex;justify-content:center}
/* The preview keeps a white ground in both themes: a design with no
   background of its own is what a browser would show, not what the
   chrome around it happens to be wearing. */
.stage iframe{width:100%;height:100%;border:0;background:#fff;transition:width .18s ease}
.stage-busy{position:absolute;inset:0;display:grid;place-items:center;background:var(--scrim)}
.spinner{
  width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);
  border-top-color:var(--ink);animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.readonly-note{
  margin:0;padding:8px 14px;font-size:12px;color:var(--ink-2);
  border-top:1px solid var(--line);background:var(--bg-subtle);
}

/* ---- chat ---- */
.chat{display:flex;flex-direction:column;min-height:0;background:var(--bg)}
.chat-head{display:flex;align-items:center;gap:10px;padding:11px 18px;border-bottom:1px solid var(--line)}
.chat-head h2{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3)}
.model-tag{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.chat-log{flex:1;min-height:0;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:18px}
.msg{border-radius:var(--radius-sm)}
.msg-user{background:var(--bg-subtle);border:1px solid var(--line);padding:9px 12px}
.msg-system{color:var(--ink-2)}
.msg-error .msg-body{color:var(--bad)}
.msg-who{
  font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-3);margin-bottom:4px;
}
.msg-body{white-space:pre-wrap;line-height:1.6;word-break:break-word;font-size:13px}
.msg-pending .msg-body{color:var(--ink-3)}

.assets{border-top:1px solid var(--line);padding:0 18px}
.assets summary{cursor:pointer;padding:10px 0;font-size:12px;color:var(--ink-2);user-select:none}
.asset-list{list-style:none;margin:0 0 10px;padding:0;max-height:118px;overflow-y:auto;font-size:12px}
.asset-list li{display:flex;justify-content:space-between;gap:10px;padding:3px 0;color:var(--ink-2)}
.upload{
  display:block;padding:9px;margin-bottom:12px;text-align:center;font-size:12px;
  border:1px dashed var(--line-2);border-radius:var(--radius-sm);cursor:pointer;color:var(--ink-2);
}
.upload:hover{border-color:var(--ink-3);color:var(--ink)}
.upload input{display:none}

.composer{border-top:1px solid var(--line);padding:12px 18px 18px;display:flex;flex-direction:column;gap:8px}
.composer textarea{resize:vertical}
.composer-row{display:flex;align-items:center;gap:12px}
.hint{font-size:11.5px;color:var(--ink-3);flex:1}
.hint.busy{color:var(--ink-2)}

@media (max-width:1100px){
  .dev-workspace{grid-template-columns:1fr;overflow-y:auto}
  .page-dev .shell-main{overflow-y:auto}
  .dev-workspace .stage{height:60vh}
  .dev-panel{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:900px){
  .shell{grid-template-columns:var(--sidebar-w-collapsed) minmax(0,1fr)}
  .nav-label{display:none}
  .nav-item,.sidebar .brand{justify-content:center;padding:0}
  .sidebar-toggle{display:none}
}
@media (max-width:1000px){
  .page-design .shell-main{overflow-y:auto}
  .workspace{grid-template-columns:1fr;height:auto}
  .stage{height:70vh}
  .preview{border-right:0;border-bottom:1px solid var(--line)}
  .newform{grid-template-columns:1fr}
  .wrap{padding-top:36px}
}

/* ---- auth pages ---- */
.auth-wrap{width:100%;max-width:1040px;margin:0 auto;padding:72px 24px;display:flex;justify-content:center}
.auth-card{width:100%;max-width:340px}
.auth-card h1{font-size:22px}
.auth-lead{color:var(--ink-2);margin:8px 0 26px}
.auth-card form{display:flex;flex-direction:column;gap:16px}
.auth-card .btn{margin-top:4px}
.field-help{font-size:11.5px;color:var(--ink-3);line-height:1.45}
.field-help ul{margin:4px 0 0;padding-left:16px}
.auth-error{display:block;font-size:12px;color:var(--bad);margin:0 0 4px}
.auth-alt{margin-top:22px;font-size:12.5px;color:var(--ink-3)}
.auth-alt a{color:var(--ink-2)}

/* ---- invites ---- */
.inviteform{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.inviteform .field{flex:1;min-width:240px;max-width:380px}
.invite-callout{
  margin-top:20px;padding:14px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--bg-subtle);
}
.invite-callout .meta{margin:0 0 8px}
.invite-link{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.invite-link code{
  flex:1;min-width:0;overflow-x:auto;white-space:nowrap;
  padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--bg);color:var(--ink-2);
}
.invite-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.invite-list li{padding-bottom:16px;border-bottom:1px solid var(--line)}
.invite-list li:last-child{padding-bottom:0;border-bottom:0}
.invite-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.invite-row .dim{font-size:12px}

/* ---- organizations, roles and dev mode ---- */
.brand-org{
  display:block;font-style:normal;font-weight:400;font-size:11px;
  color:var(--ink-3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;
}
.role-form{display:flex;gap:8px;align-items:center}
.role-form select{width:auto;padding:5px 8px;font-size:12.5px}
.engine-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:16px}
.engine-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.mono-area{font-family:var(--mono);font-size:12px;line-height:1.55;resize:vertical}
.devnote{
  margin:0 0 18px;padding:9px 12px;font-size:12.5px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-subtle);
}
.devnote-ok{color:var(--ok);border-color:var(--ok)}
.devnote-bad{color:var(--bad);border-color:var(--bad)}
/* Dev mode: the design gets the room, the controls sit beside it. */
.page-dev .shell-main{overflow:hidden}
.dev-workspace{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 38%}
.dev-panel{
  min-width:0;min-height:0;overflow-y:auto;padding:0 20px 28px;
  border-left:1px solid var(--line);background:var(--bg);
}
.dev-panel .panel{margin-top:22px}
.dev-panel .field{margin-bottom:14px}
.dev-panel textarea{resize:vertical}
.stage-busy{flex-direction:column;gap:12px}
.stage-busy-note{font-size:12.5px;color:var(--ink-2)}

.trial-result{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.trial-result .meta{margin:4px 0}
.raw-reply{margin:14px 0}
.raw-reply summary{cursor:pointer;font-size:12.5px;color:var(--ink-2);user-select:none}
.raw-reply pre{
  margin:10px 0 0;padding:12px;max-height:320px;overflow:auto;white-space:pre-wrap;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-subtle);
}
.trial-frame{
  height:520px;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:#fff;
}
.trial-frame iframe{width:100%;height:100%;border:0}

/* ---- element picker ---- */
.pick-toggle{gap:5px;padding-inline:9px}
.pick-toggle svg{width:13px;height:13px}
.pick-toggle.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pick-chip{
  display:flex;align-items:center;gap:8px;padding:7px 10px;
  border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--bg-subtle);
}
.pick-chip-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.pick-chip code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-chip button{
  border:0;background:transparent;color:var(--ink-3);cursor:pointer;
  font-size:15px;line-height:1;padding:0 2px;
}
.pick-chip button:hover{color:var(--ink)}

/* ---- style panel ---- */
.style-panel{
  border-top:1px solid var(--line);padding:14px 16px;
  max-height:46vh;overflow-y:auto;background:var(--bg-subtle);
}
.style-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.style-head h3{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3)}
.style-head .dim{font-size:11.5px}
.style-group{margin-bottom:14px}
.style-group-name{
  display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);margin-bottom:6px;
}
.style-row{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:12.5px;color:var(--ink-2)}
.style-row > span,.style-row > label{flex:0 0 68px}
.style-row input,.style-row select{flex:1;padding:5px 8px;font-size:12.5px}
.style-row input[type="color"]{padding:2px;height:28px;cursor:pointer}
.style-row input[type="range"]{padding:0}
.style-note{margin:0 0 10px;font-size:12px;color:var(--ink-2)}
.style-scope{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.style-scope label{
  display:flex;align-items:center;gap:8px;padding:4px 0;
  font-size:12.5px;color:var(--ink-2);cursor:pointer;
}
.style-scope label:hover{color:var(--ink)}
.style-scope input{flex:0 0 auto;width:auto;padding:0;margin:0}
.style-scope code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.style-scope .scope-count{flex:0 0 auto;font-size:11px;color:var(--ink-3)}
.style-swatch-value{flex:0 0 auto;font-size:11px;color:var(--ink-3);min-width:58px}
.style-alpha{
  flex:0 0 auto;padding:4px 8px;font:inherit;font-size:11px;cursor:pointer;
  color:var(--ink-3);background:var(--bg);
  border:1px solid var(--line-2);border-radius:var(--radius-sm);
}
.style-alpha:hover{color:var(--ink);border-color:var(--ink-3)}
/* A checkerboard says "nothing here" better than a word can. */
.style-alpha.is-on{
  color:var(--ink);border-color:var(--accent);
  background-image:linear-gradient(45deg,var(--line) 25%,transparent 25%,transparent 75%,var(--line) 75%),
                   linear-gradient(45deg,var(--line) 25%,transparent 25%,transparent 75%,var(--line) 75%);
  background-size:8px 8px;background-position:0 0,4px 4px;
}

/* --- notes pinned to the design ----------------------------------------- */
/* The pin layer sits over the iframe and ignores the pointer except on the
   pins themselves, so the preview stays clickable underneath. */
.pins{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pin{position:absolute;pointer-events:auto;width:24px;height:24px;border-radius:50% 50% 50% 2px;
     border:2px solid #fff;background:var(--accent,#176BFF);color:#fff;font:600 11px/1 -apple-system,sans-serif;
     display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.35);
     transform:translate(-4px,-28px);transition:transform .12s ease}
.pin:hover,.pin.is-open{transform:translate(-4px,-28px) scale(1.15)}
.pin.is-resolved{background:var(--ink-3,#7a8699)}
.pins-toggle{display:flex;align-items:center;gap:6px}
.pins-toggle input{margin:0}

.notes{border-top:1px solid var(--line);padding:10px 14px}
.notes summary{cursor:pointer;font-weight:600;font-size:13px}
.note-hint{font-size:12.5px;color:var(--ink-2);margin:8px 0 0}
.note-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;
           max-height:34vh;overflow-y:auto}
.note-item{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--bg-subtle)}
.note-item.is-resolved{opacity:.55}
.note-item.is-open{border-color:var(--accent,#176BFF)}
.note-top{display:flex;align-items:baseline;gap:6px;font-size:12px;color:var(--ink-2)}
.note-num{font-weight:700;color:var(--accent,#176BFF)}
.note-anchor{font-family:ui-monospace,monospace;font-size:11px;color:var(--ink-3);
             overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.note-body{margin:4px 0 0;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
.note-reply{margin:6px 0 0 10px;padding-left:8px;border-left:2px solid var(--line);font-size:12.5px}
.note-actions{display:flex;gap:8px;margin-top:6px}
.note-actions button{font-size:11.5px}
.note-form{display:flex;gap:6px;margin-top:6px}
.note-form textarea{flex:1;min-height:44px;font:inherit;font-size:12.5px;padding:6px 8px;
                    border:1px solid var(--line);border-radius:6px;resize:vertical;
                    background:transparent;color:inherit}
.note-missing{font-size:11.5px;color:var(--ink-3);font-style:italic}

/* --- per-card actions on the gallery ------------------------------------- */
/* Hidden by opacity rather than display, so the trigger stays in the tab
   order: hover reveals it for a mouse, :focus-within for a keyboard, and a
   coarse pointer has no hover at all so it is simply always visible. */
.card-menu-trigger{
  position:absolute;top:8px;right:8px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--ink-2);opacity:0;
  transition:opacity .12s ease,color .12s ease,background .12s ease;
}
.card-menu-trigger svg{width:15px;height:15px}
.card-menu-trigger:hover{color:var(--ink);background:var(--bg-sunken);border-color:var(--line-2)}
.card:hover .card-menu-trigger,
.card:focus-within .card-menu-trigger,
.card-menu-trigger[aria-expanded="true"]{opacity:1}
@media (hover:none){.card-menu-trigger{opacity:1}}

.card-menu{
  position:absolute;top:40px;right:8px;z-index:6;min-width:176px;padding:4px;
  background:var(--bg);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  box-shadow:0 8px 24px rgba(0,0,0,.16);
}
.card-menu-item{
  display:block;width:100%;text-align:left;padding:6px 9px;
  border:0;border-radius:4px;background:transparent;color:var(--ink);
  font:inherit;font-size:12.5px;line-height:1.5;cursor:pointer;text-decoration:none;
}
.card-menu-item:hover{background:var(--bg-sunken)}
.card-menu-item.is-bad{color:var(--bad)}
.card-menu-sep{margin:4px 0;border:0;border-top:1px solid var(--line)}

/* --- the shared "type a name" modal -------------------------------------- */
.ask{
  padding:0;color:var(--ink);background:var(--bg);
  border:1px solid var(--line-2);border-radius:var(--radius);
  width:min(420px,calc(100vw - 32px));box-shadow:0 16px 48px rgba(0,0,0,.22);
}
/* ::backdrop inherits from nothing on older engines, where var(--scrim) would
   not resolve — the literal is the fallback, the token wins where it does. */
.ask::backdrop{background:rgba(24,24,27,.45);background:var(--scrim);backdrop-filter:blur(2px)}
.ask-form{display:flex;flex-direction:column;gap:8px;padding:16px}
.ask h2{font-size:14px;margin:0 0 2px}
.ask label{font-size:12px;color:var(--ink-2)}
.ask-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}

/* ---- traffic dashboard ----
   Tokens only, no new custom properties, so nothing has to be mirrored across
   the three theme blocks at the top of this file. */
.wrap-wide{max-width:1240px}

/* Period tabs. Links, not buttons: the window is in the URL. */
.period{display:flex;gap:4px;margin-top:28px;flex-wrap:wrap}
.period-tab{
  padding:5px 12px;border-radius:var(--radius-sm);font-size:12.5px;
  color:var(--ink-2);border:1px solid transparent;text-decoration:none;
}
.period-tab:hover{color:var(--ink);background:var(--bg-subtle)}
.period-tab.is-active{
  color:var(--ink);background:var(--bg-subtle);border-color:var(--line-2);font-weight:600;
}

.stat-grid{
  display:grid;gap:12px;margin-top:24px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.stat{
  display:flex;flex-direction:column;gap:2px;padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-subtle);
}
.stat-n{font-size:24px;font-weight:600;line-height:1.15;letter-spacing:-.02em}
.stat-label{font-size:12px;color:var(--ink-2)}
.stat-note{font-size:11px;color:var(--ink-3)}
.stat-note.live{color:var(--ok)}
.stat-note.bad,.bad{color:var(--bad)}

/* The chart. Bars are percentage-height divs — see the template for why there
   is no charting library. align-items:flex-end is what makes them grow up. */
.chart{
  display:flex;align-items:flex-end;gap:2px;height:132px;margin-top:4px;
  padding:8px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg-subtle);
}
.chart-col{flex:1;min-width:2px;height:100%;display:flex;align-items:flex-end}
.chart-bar{
  width:100%;border-radius:2px 2px 0 0;background:var(--ink-2);
  min-height:2px;transition:background .12s;
}
.chart-col:hover .chart-bar{background:var(--ink)}
/* A bucket with no traffic still draws a hairline, so a quiet day reads as a
   day rather than as a hole in the axis. */
.chart-bar.is-empty{height:1px !important;background:var(--line-2)}
.chart-axis{
  display:flex;justify-content:space-between;gap:12px;
  margin-top:6px;font-size:11px;color:var(--ink-3);
}

/* Tables. Wide ones scroll inside their own box rather than pushing the page
   sideways on a laptop. */
.table-scroll{overflow-x:auto;margin-top:4px}
table.grid{border-collapse:collapse;width:100%;font-size:12.5px}
table.grid th,table.grid td{
  text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);
  vertical-align:top;white-space:nowrap;
}
table.grid th{
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);border-bottom-color:var(--line-2);
}
table.grid tbody tr:hover{background:var(--bg-subtle)}
table.grid tbody tr:last-child td{border-bottom:0}
table.grid .num{text-align:right;font-variant-numeric:tabular-nums}
table.grid .mono{font-family:var(--mono);font-size:11.5px}
table.grid .block{display:block;margin-top:2px;font-size:11px}
table.grid .tag{margin-left:0;margin-right:4px}
table.grid .ua{max-width:26ch;overflow:hidden;text-overflow:ellipsis}
.tag-live{color:var(--ok)}
.tag-bad{color:var(--bad)}
.measure{max-width:74ch;font-size:12.5px;line-height:1.65}
.measure code{font-family:var(--mono);font-size:11.5px}