/* ============================================================
   MagpieToolbox - Page layouts (pages.css)
   Text pages (legal), 404, and the styleguide. Same token system.
   ============================================================ */

/* ---------- Page header (legal / 404 / styleguide) ---------- */
.page-head{ padding-block:clamp(2.5rem,5vw,4rem) clamp(1.5rem,3vw,2.25rem); border-bottom:var(--hair); }
.page-head .eyebrow{ display:block; margin-bottom:var(--space-4); }
.page-head h1{ font-family:var(--font-display); font-weight:700; letter-spacing:-0.03em;
  font-size:clamp(2.1rem, 1.4rem + 2.6vw, 3.25rem); line-height:1.05; color:var(--text-strong); margin:0; max-width:18ch; }
.page-head p{ margin:var(--space-4) 0 0; font-size:var(--text-lg); color:var(--text-muted); max-width:54ch; }
.page-head__meta{ margin-top:var(--space-5); font-family:var(--font-mono); font-size:var(--text-2xs);
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-subtle); }

/* ---------- Prose (legal text pages) ---------- */
.prose{ max-width:var(--container-narrow); padding-block:clamp(2.25rem,4vw,3.25rem); }
.prose h2{ font-family:var(--font-display); font-size:var(--text-xl); font-weight:600; letter-spacing:-0.02em;
  color:var(--text-strong); margin:var(--space-10) 0 var(--space-3); }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-family:var(--font-display); font-size:var(--text-lg); font-weight:600; color:var(--text-strong); margin:var(--space-7) 0 var(--space-2); }
.prose p{ font-size:var(--text-base); line-height:1.7; color:var(--text-body); margin:0 0 var(--space-4); }
.prose ul{ margin:0 0 var(--space-4); padding-left:var(--space-5); }
.prose li{ font-size:var(--text-base); line-height:1.65; color:var(--text-body); margin-bottom:var(--space-2); }
.prose a{ color:var(--text-link); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.prose a:hover{ color:var(--text-link-hover); }
.prose strong{ color:var(--text-strong); font-weight:700; }
.prose .prose__updated{ font-family:var(--font-body); font-size:var(--text-lg); line-height:1.6; color:var(--text-muted);
  letter-spacing:0; padding-bottom:var(--space-6); margin-bottom:var(--space-8); border-bottom:var(--hair); }
.prose hr{ border:none; border-top:var(--hair); margin:var(--space-10) 0; }

/* contact quick row */
.contact-row{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin:var(--space-6) 0 var(--space-2); }

/* ---------- 404 ---------- */
.notfound{ min-height:60vh; display:flex; align-items:center; padding-block:clamp(3rem,8vw,6rem); }
.notfound__grid{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem,5vw,3.5rem); align-items:center; }
.notfound__code{ font-family:var(--font-mono); font-weight:600; font-size:clamp(4rem, 3rem + 8vw, 9rem);
  line-height:.9; letter-spacing:-0.04em; color:var(--text-strong);
  background:var(--sheen); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.notfound__body h1{ font-family:var(--font-display); font-size:clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight:700;
  letter-spacing:-0.025em; color:var(--text-strong); margin:0 0 var(--space-3); }
.notfound__body p{ font-size:var(--text-lg); color:var(--text-muted); max-width:46ch; margin:0 0 var(--space-7); }
.notfound__body p .mag{ display:inline-block; width:18px; height:18px; vertical-align:-3px; margin-right:2px; }
.notfound__actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
@media (max-width:560px){ .notfound__grid{ grid-template-columns:1fr; } }

/* ---------- Styleguide ---------- */
.sg-section{ padding-block:clamp(2rem,4vw,3rem); border-top:var(--hair); }
.sg-section:first-of-type{ border-top:none; }
.sg-head{ margin-bottom:var(--space-6); }
.sg-head h2{ font-family:var(--font-display); font-size:var(--text-2xl); font-weight:600; letter-spacing:-0.025em; color:var(--text-strong); margin:var(--space-3) 0 var(--space-2); }
.sg-head p{ font-size:var(--text-md); color:var(--text-muted); max-width:60ch; margin:0; }

.sg-grid{ display:grid; gap:var(--space-5); }
.sg-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.sg-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:760px){ .sg-grid--2,.sg-grid--3{ grid-template-columns:1fr; } }

.specimen{ border:var(--hair); border-radius:var(--r-frame); padding:var(--space-6); background:color-mix(in srgb, var(--surface) 50%, transparent); }
.specimen__label{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-subtle); margin:0 0 var(--space-4); padding-bottom:var(--space-3); border-bottom:var(--hair); }
.specimen__row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }
.specimen__note{ font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--text-subtle); margin:var(--space-4) 0 0; line-height:1.5; }

/* swatches */
.sw-row{ display:flex; flex-wrap:wrap; gap:var(--space-4); }
.sw{ display:flex; flex-direction:column; gap:var(--space-2); }
.sw__chip{ width:120px; height:64px; border-radius:var(--r-frame); border:var(--hair); }
.sw__chip--sheen{ background:var(--sheen); border-color:transparent; }
.sw__chip--ink{ background:var(--text); }
.sw__chip--surface{ background:var(--surface); }
.sw__chip--live{ background:var(--status-live); border-color:transparent; }
.sw__chip--soon{ background:var(--status-soon-soft); }
.sw__name{ font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--text-strong); letter-spacing:.03em; }
.sw__val{ font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--text-subtle); }

/* a 2-up tool card demo inside the styleguide keeps the real ruled frame */
.sg-cardpair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:var(--hair); border-left:var(--hair); max-width:560px; }
@media (max-width:560px){ .sg-cardpair{ grid-template-columns:1fr; } }

/* type specimen */
.type-row{ display:flex; align-items:baseline; gap:var(--space-5); padding:var(--space-4) 0; border-bottom:var(--hair); flex-wrap:wrap; }
.type-row:last-child{ border-bottom:none; }
.type-row__meta{ font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--text-subtle); width:140px; flex:0 0 auto; letter-spacing:.04em; }

/* cmdk palette */
.cmdk{ position:fixed; inset:0; z-index:200; }
.cmdk[hidden]{ display:none; }
.cmdk__backdrop{ position:absolute; inset:0; background:rgba(7,11,20,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.cmdk__panel{ position:relative; margin:12vh auto 0; width:min(560px, calc(100vw - 32px)); background:var(--surface); border:1px solid var(--border-default); border-radius:var(--radius-lg, 16px); box-shadow:var(--shadow-xl); overflow:hidden; animation:cmdkIn .16s var(--ease-out); }
@keyframes cmdkIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.cmdk__search{ display:flex; align-items:center; gap:10px; padding:14px; border-bottom:1px solid var(--border-default); }
.cmdk__search > svg{ width:18px; height:18px; color:var(--text-subtle); flex:0 0 auto; }
.cmdk__input{ flex:1; min-width:0; border:none; outline:none; background:transparent; font:inherit; font-size:var(--text-md); color:var(--text-strong); }
.cmdk__input::placeholder{ color:var(--text-subtle); }
.cmdk__escbtn{ font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--text-subtle); background:transparent; border:1px solid var(--border-default); border-radius:6px; padding:3px 7px; cursor:pointer; flex:0 0 auto; }
.cmdk__escbtn:hover{ color:var(--text-strong); border-color:var(--text-subtle); }
.cmdk__list{ list-style:none; margin:0; padding:8px; max-height:min(56vh, 420px); overflow:auto; scrollbar-width:none; -ms-overflow-style:none; }
.cmdk__list::-webkit-scrollbar{ width:0; height:0; display:none; }
.cmdk__opt{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; cursor:pointer; }
.cmdk__opt.is-active{ background:var(--brand-soft); }
.cmdk__opt.is-soon{ cursor:default; opacity:.6; }
.cmdk__dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.cmdk__ic{ display:inline-flex; align-items:center; justify-content:center; width:18px; color:var(--text-muted); flex:0 0 auto; }
.cmdk__ic svg{ width:18px; height:18px; }
.cmdk__meta{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.cmdk__name{ font-size:var(--text-sm); font-weight:600; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdk__cat{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.04em; color:var(--text-subtle); }
.cmdk__go{ display:inline-flex; color:var(--text-subtle); flex:0 0 auto; }
.cmdk__go svg{ width:16px; height:16px; }
.cmdk__opt.is-active .cmdk__go{ color:var(--brand); }
.cmdk__tag{ font-family:var(--font-body); font-size:var(--text-2xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:var(--radius-pill); flex:0 0 auto; }
.cmdk__tag--cur{ color:var(--brand); background:var(--brand-soft); }
.cmdk__tag--soon{ color:var(--text-subtle); background:color-mix(in srgb, var(--text-muted) 14%, transparent); }
.cmdk__empty{ padding:22px 12px; text-align:center; color:var(--text-muted); font-size:var(--text-sm); }
.cmdk__foot{ display:flex; flex-wrap:wrap; gap:16px; padding:10px 14px; border-top:1px solid var(--border-default); font-size:var(--text-2xs); color:var(--text-subtle); }
.cmdk__foot kbd{ font-family:var(--font-mono); background:color-mix(in srgb, var(--text-muted) 14%, transparent); border-radius:4px; padding:1px 5px; margin-right:3px; }
body.cmdk-open{ overflow:hidden; }
@media (max-width:560px){ .toolswitch__kbd{ display:none; } .toolswitch__cur{ max-width:13ch; } }
@media (prefers-reduced-motion: reduce){ .cmdk__panel{ animation:none; } }

/* context bar (in-tool nav: back + current tool + switch) */
.ctxbar{ border-bottom:1px solid var(--border-default); background:var(--surface-sunken); }
.ctxbar__in{ display:flex; align-items:center; gap:var(--space-4); padding-top:10px; padding-bottom:10px; }
.ctxbar__back{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid var(--border-default); border-radius:var(--radius-pill); background:var(--surface); color:var(--text-strong); font-size:var(--text-sm); font-weight:600; text-decoration:none; white-space:nowrap; transition:border-color var(--dur-fast), color var(--dur-fast); }
.ctxbar__back:hover{ border-color:var(--brand); color:var(--brand); }
.ctxbar__back svg{ width:16px; height:16px; flex:0 0 auto; }
.ctxbar__cur{ display:inline-flex; align-items:center; gap:9px; min-width:0; }
.ctxbar__ic{ width:30px; height:30px; flex:0 0 auto; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--border-default); }
.ctxbar__ic svg{ width:17px; height:17px; }
.ctxbar__name{ font-weight:700; font-size:var(--text-md); color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctxbar__switch{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border:none; border-radius:var(--radius-pill); background:var(--brand); color:var(--on-accent, #fff); font:inherit; font-size:var(--text-sm); font-weight:700; cursor:pointer; white-space:nowrap; box-shadow:var(--shadow-brand, 0 6px 16px -8px rgba(10,165,177,.55)); transition:filter var(--dur-fast), transform var(--dur-fast); }
.ctxbar__switch:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.ctxbar__switch:focus-visible{ outline:none; box-shadow:var(--ring-focus); }
.ctxbar__switch svg{ width:16px; height:16px; flex:0 0 auto; }
.ctxbar__switch kbd{ font-family:var(--font-mono); font-size:var(--text-2xs); background:rgba(255,255,255,.22); border-radius:5px; padding:1px 5px; }
@media (max-width:560px){ .ctxbar__switchlab{ display:none; } .ctxbar__switch kbd{ display:none; } .ctxbar__ic{ display:none; } .ctxbar__name{ max-width:14ch; } }

/* cmdk Option A: icon tiles + grouped headers */
.cmdk__tile{ width:34px; height:34px; border-radius:10px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; }
.cmdk__tile svg{ width:18px; height:18px; }
.cmdk__grp{ list-style:none; font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--text-subtle); padding:10px 12px 4px; }
.cmdk__grp:first-child{ padding-top:4px; }
.cmdk__foot span{ display:inline-flex; align-items:center; }

.cmdk__input:focus, .cmdk__input:focus-visible{ outline:none !important; box-shadow:none !important; }

/* text size switcher */
.textsize{ display:inline-flex; align-items:center; gap:1px; padding:3px 4px; border:1px solid var(--border-default); border-radius:var(--radius-pill); background:var(--surface-sunken); }
.textsize__btn{ display:inline-flex; align-items:center; justify-content:center; height:28px; min-width:28px; border:none; background:transparent; color:var(--text-muted); cursor:pointer; font-family:var(--font-body); font-weight:700; line-height:1; padding:0 9px; border-radius:var(--radius-pill); transition:background var(--dur-fast), color var(--dur-fast); }
.textsize__btn.ts-default{ font-size:11px; }
.textsize__btn.ts-comfort{ font-size:14px; }
.textsize__btn.ts-large{ font-size:17px; }
.textsize__btn:hover{ color:var(--text-strong); }
.textsize__btn[aria-pressed="true"]{ background:var(--brand); color:var(--on-accent,#fff); box-shadow:var(--shadow-xs); }

/* text-size toggle animation + app-wide resize micro-interaction */
.textsize__btn{ transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-spring); }
.textsize__btn[aria-pressed="true"]{ transform:scale(1.08); }
.textsize__btn:active{ transform:scale(.9); }
html.ts-animating, html.ts-animating *{ transition:font-size .36s var(--ease-out), line-height .36s var(--ease-out), padding .36s var(--ease-out), gap .36s var(--ease-out) !important; }
@media (prefers-reduced-motion: reduce){ .textsize__btn[aria-pressed="true"]{ transform:none; } html.ts-animating, html.ts-animating *{ transition:none !important; } }