/* ==========================================================================
   SellUp Mockup Kit — "Client portal, SEO that just works"
   Self-owned foundation for the SellUp portal decks (sellup/design/*).
   Adapted from the shared mockup kit; owned and maintained by SellUp.
   This copy must never reference anything outside sellup/.

   SellUp adaptations vs the kit default:
     · --brand and --primary are SellUp teal #2f7d70 (client-facing product:
       teal appears on buttons, active nav and the lockup dot — still
       disciplined; graphite/paper neutrals carry everything else).
     · §0b adds the skeleton-placeholder tokens and primitives used by
       every content-type screen (content is unknown; SEO is the subject).
   ========================================================================== */

/* ==========================================================================
   SellUp Client Portal · SEO module
   Static product design mockup.
   Aesthetic: calm, approachable graphite/paper UI — teal where the product
   acts, status hue only on 6px dots / chips, skeleton greys for content.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:hidden;scroll-behavior:smooth}

/* ==========================================================================
   0. DESIGN TOKENS — from packages/tailwind-config/shared-styles.css
      (--radius:0.625rem · --primary:oklch(0.205 0 0) · neutral oklch ramp)
   ========================================================================== */
:root{
  /* surfaces — two-step system */
  --bg:#fafafa; --card:#ffffff; --rail:#fcfcfc; --sunken:#f4f4f5;
  --line:#e4e4e7; --line-soft:#f1f1f3; --line-strong:#d4d4d8;

  /* ink ramp */
  --ink:#18181b;        /* oklch(0.145 0 0) — headings */
  --ink-2:#3f3f46;      /* body strong */
  --ink-3:#52525b;      /* body */
  --muted:#71717a;      /* oklch(0.556 0 0) — secondary */
  --muted-2:#a1a1aa;    /* tertiary, placeholder */

  /* primary — SellUp teal, the product's action + active-nav colour */
  --primary:#2f7d70; --primary-hover:#26685d; --primary-fg:#fafafa;
  --accent:#f5f5f5; --ring:#a1a1aa;

  /* muted semantic — dots, 2px rules and small glyphs ONLY */
  --ok:#4d7c5a; --warn:#a8761f; --danger:#a13d3d; --info:#4a6b8a; --idle:#a1a1aa;

  /* SellUp brand — lockup dot; teal, same hue family as --primary */
  --brand:#2f7d70;

  /* skeleton placeholders (kit adaptation §0b) — content is unknown in the
     client-portal decks; skeleton greys must never be mistaken for status */
  --skel:#ececee; --skel-strong:#e0e0e3; --skel-soft:#f4f4f5;

  /* elevation */
  --shadow-xs:0 1px 2px rgba(24,24,27,.05);
  --shadow-sm:0 1px 3px rgba(24,24,27,.06),0 1px 2px rgba(24,24,27,.04);
  --shadow-md:0 4px 14px rgba(24,24,27,.07);
  --shadow-pop:0 10px 32px rgba(24,24,27,.12),0 2px 8px rgba(24,24,27,.06);

  /* radius — mirrors --radius:0.625rem scale */
  --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:14px; --r-full:999px;

  /* shell metrics — must match the real app shell */
  --rail-w:52px; --sb-w:240px; --sb-w-collapsed:72px; --nav-h:72px;

  /* frame height — MacBook Pro 14" logical content height (1512 × 982).
     16" is 1728 × 1117; swap to 1117px to review at that size. */
  --frame-h:982px;

  --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
}

body{
  font-family:var(--font);font-size:13.5px;line-height:1.5;color:var(--ink-3);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}
/* texture instead of colour — a 3px paper grain, barely there */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.55;mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(24,24,27,.025) .5px,transparent .5px);background-size:3px 3px;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer}
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(161,161,170,.5);border-radius:var(--r-sm)}

/* ==========================================================================
   0b. SKELETON PLACEHOLDERS (SellUp kit adaptation)
   For content the portal cannot show (the client's actual pages, posts,
   products …). Skeleton greys carry NO meaning — never colour a skeleton.
   Paired, real columns (SEO status etc.) sit beside them carrying all signal.
   ========================================================================== */
.sk{display:block;background:var(--skel);border-radius:4px;height:10px;min-width:0}
.sk-strong{background:var(--skel-strong)}
.sk-soft{background:var(--skel-soft)}
.sk-t{height:12px;border-radius:5px}          /* item title bar */
.sk-t-sm{height:9px}                           /* secondary line */
.sk-chip{width:64px;height:16px;border-radius:var(--r-md)}
.sk-img{border-radius:var(--r-md);background:var(--skel)}
.sk-av{border-radius:var(--r-full);background:var(--skel)}
.shimmer{position:relative;overflow:hidden}
.shimmer::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:shimmer 2.4s ease-in-out infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.shimmer::after{animation:none}}

/* ==========================================================================
   1. PRIMITIVES — icons, buttons, badges, chips, dots, avatars, inputs
   ========================================================================== */
.ico{width:16px;height:16px;flex:0 0 auto;display:block}
.ico-xs{width:12px;height:12px;stroke-width:1.75}
.ico-sm{width:14px;height:14px;stroke-width:1.75}
.ico-lg{width:18px;height:18px}
.ico-xl{width:20px;height:20px}
.ico-2xl{width:24px;height:24px}
.ico-fill *{fill:currentColor}
.mono{font-family:var(--mono);letter-spacing:.01em}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.grow{flex:1 1 auto;min-width:0}
.trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row{display:flex;align-items:center}
.gap4{gap:4px}.gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}

/* --- button (packages/ui/src/components/ui/button.tsx) ------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  height:36px;padding:0 20px;border-radius:var(--r-md);font-size:13.5px;font-weight:500;
  border:1px solid transparent;transition:all .15s;color:var(--ink-2)}
.btn-md{height:40px;padding:0 24px}
.btn-sm{height:36px;padding:0 12px;gap:6px}
.btn-xs{height:30px;padding:0 10px;gap:6px;font-size:12.5px}
.btn-default{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}
.btn-default:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn-outline{background:var(--card);border-color:var(--line);box-shadow:var(--shadow-xs);color:var(--ink-2)}
.btn-outline:hover{background:var(--accent);color:var(--ink)}
.btn-secondary{background:var(--sunken);color:var(--ink)}
.btn-secondary:hover{background:#ededf0}
.btn-ghost{background:transparent;color:var(--ink-3)}
.btn-ghost:hover{background:var(--sunken);color:var(--ink)}
.btn-danger-ghost{background:transparent;color:var(--danger)}
.btn-danger-ghost:hover{background:#fbf4f4}
.btn:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px rgba(161,161,170,.5)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;pointer-events:none}
.btn-default:active{background:#20564d}
.btn-outline:active{background:#ededf0}

/* split button — primary body + hairline divider + chevron cap */
.split{display:inline-flex;align-items:stretch;border-radius:var(--r-md);overflow:hidden;background:var(--primary)}
.split .btn{border-radius:0;border:0;box-shadow:none}
.split .cap{display:inline-flex;align-items:center;justify-content:center;width:32px;color:var(--primary-fg);
  border-left:1px solid rgba(255,255,255,.18);transition:background .15s}
.split .cap:hover,.split .btn:hover{background:var(--primary-hover)}
.split:focus-within{box-shadow:0 0 0 3px rgba(161,161,170,.5)}
/* split button — outline variant (light body + dark cap) */
.split-outline{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-xs)}
.split-outline .btn{border:1px solid var(--line);border-right:0;color:var(--ink-2);background:var(--card)}
.split-outline .btn:hover{background:var(--accent);color:var(--ink)}
.split-outline .cap{background:var(--primary);color:var(--primary-fg);border-left:1px solid var(--line)}
.split-outline .cap:hover{background:var(--primary-hover)}

.iconbtn{width:36px;height:36px;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);transition:background .15s,color .15s;flex:0 0 auto}
.iconbtn:hover{background:var(--sunken);color:var(--ink)}
.iconbtn-sm{width:32px;height:32px}
.iconbtn-xs{width:26px;height:26px;border-radius:var(--r-sm)}
.iconbtn-outline{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-xs);color:var(--ink-2)}
.iconbtn-outline:hover{background:var(--accent)}

/* --- badge (packages/ui/src/components/ui/badge.tsx) — r-md, NOT a pill -- */
.badge{display:inline-flex;align-items:center;justify-content:center;gap:4px;width:fit-content;white-space:nowrap;
  border-radius:var(--r-md);padding:2px 8px;font-size:11.5px;font-weight:500;border:1px solid transparent;line-height:1.5}
.badge svg{width:12px;height:12px;stroke-width:1.75;flex:0 0 auto}
.badge-outline{border-color:var(--line);color:var(--ink-2);background:transparent}
.badge-secondary{background:var(--sunken);color:var(--ink)}
.badge-default{background:var(--primary);color:var(--primary-fg)}
.badge-soft{background:#fafafa;border-color:var(--line);color:var(--ink-2)}

/* status chip — neutral surface, the dot carries the only hue */
.chip{display:inline-flex;align-items:center;gap:6px;background:#fafafa;border:1px solid var(--line);
  border-radius:var(--r-md);padding:2px 8px;font-size:11.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;line-height:1.5}
.dot{width:6px;height:6px;border-radius:var(--r-full);flex:0 0 auto;display:inline-block}
.d-ok{background:var(--ok)}.d-warn{background:var(--warn)}.d-danger{background:var(--danger)}
.d-info{background:var(--info)}.d-idle{background:var(--idle)}.d-ink{background:var(--ink-2)}

/* priority — the glyph is the signal, the muted ink is secondary */
.prio{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.prio svg{width:14px;height:14px;stroke-width:1.75;flex:0 0 auto}
.p-lowest{color:var(--idle)}.p-low{color:var(--info)}.p-med{color:var(--muted)}
.p-high{color:var(--warn)}.p-highest{color:var(--danger)}.p-crit{color:var(--danger)}

.star-on{color:var(--brand)}
.star-off{color:var(--muted-2)}
.star-btn{transition:color .15s,transform .15s}
.star-btn:hover{transform:scale(1.08)}

/* --- avatars — monogram set (photo sprite unavailable, see system notes) -- */
.av{width:28px;height:28px;border-radius:var(--r-full);flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:var(--sunken);border:1px solid var(--line);color:var(--ink-2);
  font-family:var(--mono);font-weight:600;font-size:11px;line-height:1;letter-spacing:0}
.av-20{width:20px;height:20px;font-size:8.5px}
.av-24{width:24px;height:24px;font-size:9.5px}
.av-32{width:32px;height:32px;font-size:12px}
.av-36{width:36px;height:36px;font-size:12.5px}
.av-40{width:40px;height:40px;font-size:13px}
.av-stack{display:inline-flex;align-items:center}
/* -6px, not -8px: monogram initials must stay legible under the overlap */
.av-stack>*{margin-left:-6px;box-shadow:0 0 0 2px var(--card)}
.av-stack>*:first-child{margin-left:0}

/* --- inputs / selects --------------------------------------------------- */
.field{position:relative;display:flex;align-items:center;min-width:0}
.field>svg{position:absolute;left:12px;width:16px;height:16px;color:var(--muted);pointer-events:none}
.inp{width:100%;height:36px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-md);
  padding:0 12px;font:inherit;font-size:13.5px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.inp::placeholder{color:var(--muted-2)}
.inp:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px rgba(161,161,170,.5)}
.field>svg+.inp{padding-left:36px}
.sel{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 12px;border:1px solid var(--line);
  background:var(--card);border-radius:var(--r-md);font-size:13.5px;color:var(--ink-2);box-shadow:var(--shadow-xs);
  white-space:nowrap;transition:all .15s}
.sel:hover{background:var(--accent);color:var(--ink)}
.sel svg{color:var(--muted-2)}
.sel-sm{height:32px;font-size:12.5px;padding:0 6px 0 9px;gap:5px}
.sel .k{color:var(--muted)}
.sel .v{color:var(--ink);font-weight:500}

/* faceted filter — shadcn DataTableFacetedFilter: dashed border + CirclePlus */
.facet{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border:1px dashed var(--line-strong);
  background:var(--card);border-radius:var(--r-md);font-size:13px;color:var(--ink-2);white-space:nowrap;transition:all .15s}
.facet:hover{background:var(--accent);border-color:var(--muted-2);color:var(--ink)}
.facet svg{color:var(--muted-2)}
.facet .vr{width:1px;height:14px;background:var(--line);margin:0 1px}

.cb{width:16px;height:16px;flex:0 0 auto;border:1px solid var(--line-strong);border-radius:4px;background:var(--card);
  display:inline-flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s;position:relative}
.cb svg{width:11px;height:11px;stroke:var(--primary-fg);stroke-width:3;opacity:0}
.cb:hover{border-color:var(--muted-2)}
.cb[aria-checked=true]{background:var(--primary);border-color:var(--primary)}
.cb[aria-checked=true] svg{opacity:1}

.toggle-group{display:inline-flex;align-items:center;gap:2px;padding:2px;background:var(--sunken);border-radius:var(--r-lg)}
.toggle-group button{width:32px;height:32px;border-radius:var(--r-md);display:inline-flex;align-items:center;
  justify-content:center;color:var(--muted);transition:all .15s}
.toggle-group button:hover{color:var(--ink-2)}
.toggle-group button[aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:var(--shadow-xs)}

/* --- card ---------------------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-xs)}
.card-head{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.card-head.flush{border-bottom:0;padding-bottom:8px}
.card-title{margin:0;font-size:16px;font-weight:620;letter-spacing:-.01em;color:var(--ink);line-height:1.35}
.card-sub{margin:4px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45}
.card-body{padding:18px}
.card-foot{border-top:1px solid var(--line-soft);padding:12px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:12.5px;color:var(--muted)}
.card-int{transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease}
.card-int:hover{box-shadow:var(--shadow-md);border-color:var(--line-strong);transform:translateY(-1px)}

/* neutral icon tile — differentiation comes from the glyph, never the tile */
.tile{display:inline-flex;align-items:center;justify-content:center;background:#f4f4f5;border:1px solid var(--line);
  border-radius:var(--r-lg);color:var(--ink-2);flex:0 0 auto}
.tile-28{width:28px;height:28px;border-radius:var(--r-md)}
.tile-32{width:32px;height:32px;border-radius:var(--r-md)}
.tile-36{width:36px;height:36px}
.tile-44{width:44px;height:44px;border-radius:var(--r-lg)}
.tile-mono{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--ink-2)}

/* progress — one graphite fill, always */
.bar{display:block;height:6px;border-radius:var(--r-full);background:#f4f4f5;overflow:hidden;flex:1 1 auto;min-width:40px}
.bar>i{display:block;height:100%;border-radius:var(--r-full);background:#3f3f46;
  animation:growW .8s cubic-bezier(.22,.8,.28,1) both}
.bar-2{height:2px}
.bar-4{height:4px}
@keyframes growW{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1)}}

/* --- table --------------------------------------------------------------- */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;text-align:left}
.tbl thead th{background:var(--card);border-bottom:1px solid var(--line);padding:10px;
  font-size:11.5px;font-weight:600;letter-spacing:.04em;line-height:1;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.tbl thead th:first-child,.tbl tbody td:first-child{padding-left:16px}
.tbl thead th:last-child,.tbl tbody td:last-child{padding-right:16px}
.tbl tbody td{border-bottom:1px solid var(--line-soft);padding:10px;font-size:13.5px;color:var(--ink-3);vertical-align:middle}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:#fafafa}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .r-rich td{height:64px}
.tbl .r-plain td{height:52px}
.tbl .r-dense td{height:44px;padding-top:6px;padding-bottom:6px}
.tbl .num{text-align:right;font-family:var(--mono);font-size:12.5px}
/* row actions stay reachable when a dense table scrolls inside its card */
.tbl-pin thead th:last-child,.tbl-pin tbody td:last-child{position:sticky;right:0;background:var(--card);
  box-shadow:-8px 0 8px -8px rgba(24,24,27,.14)}
.tbl-pin tbody tr:hover td:last-child{background:#fafafa}
.tbl .sortable{display:inline-flex;align-items:center;gap:5px;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit}
.tbl .sortable svg{width:12px;height:12px;color:var(--muted-2)}
.tbl tr.is-sel{background:#fafafa;box-shadow:inset 2px 0 0 var(--primary)}
.tbl tr.is-sel:hover{background:#f6f6f7}
.tbl tr.is-muted td{color:var(--muted)}
.tbl .grp td{background:#fafafa;height:36px;padding-top:0;padding-bottom:0;
  font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line)}
.cellname{font-size:13.5px;font-weight:500;color:var(--ink);letter-spacing:-.005em;line-height:1.4}
.celldesc{font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:2px}
.cellsub{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap}

/* --- tabs ---------------------------------------------------------------- */
.tabs{display:flex;align-items:center;gap:0;height:44px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a,.tabs button{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 2px;margin-right:24px;
  font-size:13.5px;font-weight:500;color:var(--muted);white-space:nowrap;transition:color .15s,box-shadow .15s}
.tabs a:hover,.tabs button:hover{color:var(--ink-2)}
.tabs .on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--primary)}
.tabs svg{width:16px;height:16px;flex:0 0 auto}
.tabs-sub{height:40px}
.tabs-sub a,.tabs-sub button{height:40px;font-size:13px;margin-right:20px}

/* segmented pill tabs — shipped settings sub-nav */
.seg{display:inline-flex;align-items:center;gap:2px;padding:3px;background:var(--sunken);border-radius:var(--r-lg)}
.seg button{height:30px;padding:0 12px;border-radius:var(--r-md);font-size:12.5px;font-weight:500;color:var(--muted);
  transition:all .15s;white-space:nowrap}
.seg button:hover{color:var(--ink-2)}
.seg button[aria-selected=true]{background:var(--card);color:var(--ink);box-shadow:var(--shadow-xs)}

/* --- vertical sub-nav rail (settings) ----------------------------------- */
.subnav{flex:0 0 216px;width:216px;display:flex;flex-direction:column;gap:2px}
.subnav a{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-radius:var(--r-md);
  font-size:13.5px;color:var(--ink-3);position:relative;transition:background .15s,color .15s}
.subnav a svg{width:16px;height:16px;color:var(--muted);flex:0 0 auto}
.subnav a:hover{background:#fafafa;color:var(--ink)}
.subnav a.on{background:var(--accent);color:var(--ink);font-weight:500}
.subnav a.on svg{color:var(--ink)}
.subnav a.on::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:0 2px 2px 0;background:var(--primary)}
.subnav a .cnt{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-2);
  background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);padding:1px 6px;line-height:1.5}
.subnav .sep{height:1px;background:var(--line-soft);margin:8px 4px}
.subnav a.danger{color:var(--danger)}
.subnav a.danger svg{color:var(--danger)}
.subnav a.danger:hover{background:#fbf4f4}

/* ==========================================================================
   2. APP SHELL — navbar (72px) + icon rail (52px) + module sidebar (240px)
   ========================================================================== */
.shell{display:flex;flex-direction:column;height:100%;min-width:1180px;overflow:hidden;background:var(--bg)}

/* 3-column grid so the search sits on the shell's true centre line,
   independent of how wide the brand block or the user block happen to be */
.navbar{flex:0 0 auto;height:var(--nav-h);background:var(--card);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px) minmax(0,1fr);
  align-items:center;gap:16px;padding:0 16px;user-select:none;z-index:60}
.nav-left{display:flex;align-items:center;gap:12px;justify-self:start;min-width:0}
/* lockup: the CHEK wordmark + dot is scaled so its advance width matches the
   "CHECK IN. STAND OUT." tagline exactly — both flush left at x=0 */
.brand-svg{display:block;width:96px;height:50px;flex:0 0 auto;overflow:visible}
.brand-svg .wm{font-family:var(--font);font-size:34.9px;font-weight:800;letter-spacing:-.61px;fill:var(--ink)}
.brand-svg .dot{fill:var(--brand)}
.brand-svg .tg{font-family:var(--font);font-size:6.2px;font-weight:700;letter-spacing:.9px;fill:var(--muted-2)}

.nav-search{width:100%;max-width:560px;justify-self:center;position:relative;display:flex;align-items:center}
.nav-search>svg{position:absolute;left:14px;width:16px;height:16px;color:var(--muted);pointer-events:none}
.nav-search input{width:100%;height:40px;padding:0 14px 0 40px;background:#f4f4f5;border:1px solid transparent;
  border-radius:var(--r-lg);font:inherit;font-size:13.5px;color:var(--ink);transition:all .15s}
.nav-search input::placeholder{color:var(--muted-2)}
.nav-search input:focus{outline:none;background:var(--card);border-color:var(--ring);box-shadow:0 0 0 3px rgba(161,161,170,.5)}

.nav-right{display:flex;align-items:center;gap:12px;justify-self:end;min-width:0}
.bell{position:relative}
.bell .cnt{position:absolute;top:0;right:-2px;display:inline-flex;align-items:center;gap:3px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 4px;height:16px;
  font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--ink-2);box-shadow:var(--shadow-xs)}
.bell .cnt i{width:4px;height:4px;border-radius:var(--r-full);background:var(--danger)}
.nav-user{display:flex;align-items:center;gap:10px;padding:4px 6px 4px 4px;border-radius:var(--r-lg);transition:background .15s}
.nav-user:hover{background:var(--sunken)}
.nav-user .nm{font-size:13px;font-weight:500;color:var(--ink);line-height:1.3}
.nav-user .rl{font-size:12px;color:var(--muted);line-height:1.3}
.nav-user svg{color:var(--muted-2)}

.body-row{flex:1 1 auto;display:flex;min-height:0}

.rail{flex:0 0 var(--rail-w);width:var(--rail-w);background:var(--rail);border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;z-index:40}
.rail-top{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:12px;width:100%}
.rail-bottom{padding:12px 0}
.rail button,.rail a{position:relative;width:36px;height:36px;border-radius:var(--r-md);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;color:var(--muted-2);transition:background .18s,color .18s}
.rail svg{width:20px;height:20px}
.rail button:hover,.rail a:hover{background:var(--sunken);color:var(--ink-3)}
.rail .on{background:#f4f4f5;color:var(--ink)}
.rail .on::before{content:"";position:absolute;left:-8px;width:2px;height:20px;border-radius:0 2px 2px 0;background:var(--primary)}

.sidebar{flex:0 0 var(--sb-w);width:var(--sb-w);background:var(--card);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;z-index:35}
.sb-head{display:flex;align-items:flex-start;gap:10px;padding:14px 12px 14px 16px;border-bottom:1px solid var(--line-soft)}
.sb-head>svg{width:18px;height:18px;color:var(--ink-2);flex:0 0 auto;margin-top:1px}
.sb-head h2{margin:0;flex:1 1 auto;font-size:11px;font-weight:700;letter-spacing:.06em;line-height:1.45;
  text-transform:uppercase;color:var(--ink)}
.sb-collapse{width:26px;height:26px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted-2);flex:0 0 auto;transition:background .15s,color .15s}
.sb-collapse:hover{background:var(--sunken);color:var(--ink-2)}
.sb-nav{flex:1 1 auto;padding:8px 0;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.sb-nav a{display:flex;align-items:center;gap:10px;height:40px;margin:0 8px;padding:0 10px;border-radius:var(--r-md);
  font-size:13.5px;color:var(--ink-3);position:relative;transition:background .15s,color .15s}
.sb-nav a svg{width:16px;height:16px;color:var(--muted);flex:0 0 auto}
.sb-nav a:hover{background:#fafafa;color:var(--ink)}
.sb-nav a.on{background:var(--accent);color:var(--ink);font-weight:500}
.sb-nav a.on svg{color:var(--ink)}
.sb-nav a.on::before{content:"";position:absolute;left:-8px;top:10px;bottom:10px;width:2px;border-radius:0 2px 2px 0;background:var(--primary)}
.sb-nav .lab{padding:12px 18px 6px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2)}
.sb-foot{flex:0 0 auto;padding:12px;border-top:1px solid var(--line-soft)}

/* ==========================================================================
   3. CONTENT AREA — page head, breadcrumb, toolbars, pagination
   ========================================================================== */
.main{flex:1 1 auto;min-width:0;overflow-y:auto;background:var(--bg)}
.main::-webkit-scrollbar{width:10px}
.main::-webkit-scrollbar-thumb{background:#e4e4e7;border-radius:var(--r-full);border:3px solid var(--bg)}
.main-inner{padding:20px 24px 40px;display:flex;flex-direction:column;gap:20px}
.main-inner.tight{gap:16px}
.main-flush{padding:0;display:flex;flex-direction:column;height:100%;min-height:0}

.crumb{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);flex-wrap:wrap;line-height:1.5}
.crumb svg{width:14px;height:14px;color:var(--muted-2)}
.crumb a:hover{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.crumb .cur{color:var(--ink-2);font-weight:500}

.phead{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.phead h1{margin:0;font-size:22px;font-weight:640;letter-spacing:-.02em;line-height:1.25;color:var(--ink);
  display:flex;align-items:center;gap:8px}
.phead p{margin:5px 0 0;font-size:13.5px;color:var(--muted);line-height:1.5}
.phead .acts{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.toolbar .right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tb-search{width:260px;flex:0 0 auto}

.pager{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.pager .pages{display:flex;align-items:center;gap:4px;margin-left:auto}
.pager .pg{width:32px;height:32px;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;
  font-size:12.5px;color:var(--ink-3);border:1px solid transparent;transition:all .15s}
.pager .pg:hover{background:var(--sunken);color:var(--ink)}
.pager .pg[aria-current=page]{background:var(--primary);color:var(--primary-fg)}
.pager .pg:disabled{color:var(--muted-2);pointer-events:none}
.pager .rpp{display:inline-flex;align-items:center;gap:8px}
@media (max-width:1279px){.pager .rpp{display:none}}

.mutedstat{font-family:var(--mono);font-size:11.5px;color:var(--muted)}

/* stat card row */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-xs);padding:16px}
.stat .top{display:flex;align-items:center;gap:10px}
.stat .lab{font-size:12.5px;color:var(--muted);line-height:1.4}
.stat .val{margin-top:10px;font-family:var(--mono);font-size:26px;font-weight:640;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.stat .sub{margin-top:6px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px;line-height:1.4}
.stat .up{color:var(--ok)}
.stat .down{color:var(--danger)}

/* ==========================================================================
   10. DECK CHROME — hero, single-screen viewer + picker, frames, captions
   ========================================================================== */
.deck{max-width:1760px;margin:0 auto;padding:0 28px 80px}
.hero{display:flex;align-items:flex-end;gap:32px;flex-wrap:wrap;padding:44px 0 6px}
.hero .b{flex:1 1 560px;min-width:0;max-width:760px}
.hero .eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hero h1{margin:12px 0 10px;font-size:30px;font-weight:640;letter-spacing:-.03em;line-height:1.15;color:var(--ink)}
.hero p{margin:0;font-size:14px;color:var(--muted);line-height:1.6}
/* margin-left:auto pins the lockup to the page edge — .b's max-width would
   otherwise park it mid-page, well short of the right margin */
.hero .side{flex:0 0 auto;margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:12px;padding-bottom:4px}
.hero .tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.tag{font-family:var(--mono);font-size:11px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:3px 8px;color:var(--ink-3);white-space:nowrap}

/* single-screen viewer — one screen at a time, chosen from the picker */
.viewer{position:sticky;top:0;z-index:200;margin:24px -28px 24px;padding:10px 28px;
  background:rgba(250,250,250,.9);backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* picker — shadcn Select anatomy: 40px trigger + popover listbox */
/* fixed width so the toolbar never reflows when the label length changes */
.picker{position:relative;flex:0 0 auto;width:340px;max-width:100%}
.picker-btn{display:inline-flex;align-items:center;gap:10px;height:40px;width:100%;min-width:0;padding:0 10px 0 12px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-xs);
  font-size:13.5px;color:var(--ink);text-align:left;transition:background .15s,border-color .15s,box-shadow .15s}
.picker-btn:hover{background:var(--accent)}
.picker-btn .no{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--primary-fg);
  background:var(--primary);border-radius:var(--r-sm);padding:3px 6px;line-height:1.35;flex:0 0 auto}
.picker-btn .lb{flex:1 1 auto;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picker-btn>svg:last-child{color:var(--muted-2);flex:0 0 auto;transition:transform .18s}
.picker-btn[aria-expanded=true]{border-color:var(--ring);box-shadow:0 0 0 3px rgba(161,161,170,.5)}
.picker-btn[aria-expanded=true]>svg:last-child{transform:rotate(180deg)}

.picker-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:300;width:430px;max-width:calc(100vw - 56px);
  max-height:min(560px,calc(100vh - 120px));overflow-y:auto;padding:5px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);
  animation:popIn .14s cubic-bezier(.22,.8,.28,1) both}
.picker-menu[hidden]{display:none}
@keyframes popIn{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}}
.picker-menu .glab{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2);padding:9px 10px 5px}
.picker-menu .sep{height:1px;background:var(--line-soft);margin:5px 4px}
.opt{display:flex;align-items:center;gap:10px;width:100%;height:38px;padding:0 10px;border-radius:var(--r-md);
  font-size:13.5px;color:var(--ink-3);text-align:left;transition:background .12s,color .12s}
.opt:hover,.opt.cursor{background:var(--sunken);color:var(--ink)}
.opt .no{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--muted-2);width:18px;flex:0 0 auto}
.opt .lb{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opt>svg{color:var(--ink);opacity:0;flex:0 0 auto}
.opt[aria-selected=true]{background:var(--accent);color:var(--ink);font-weight:500}
.opt[aria-selected=true] .no{color:var(--ink-2)}
.opt[aria-selected=true]>svg{opacity:1}

.stepper{display:inline-flex;align-items:center;gap:2px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-xs);padding:2px;flex:0 0 auto}
.stepper button{width:30px;height:30px;border-radius:var(--r-sm);display:inline-flex;align-items:center;
  justify-content:center;color:var(--muted);transition:background .15s,color .15s}
.stepper button:hover{background:var(--sunken);color:var(--ink)}
.stepper button:disabled{color:var(--line-strong);pointer-events:none}
.viewer .pos{font-family:var(--mono);font-size:11.5px;color:var(--muted);flex:0 0 auto}
.viewer .legend-chips{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:auto}
.viewer .hint{font-size:11.5px;color:var(--muted-2);flex:0 0 auto;display:inline-flex;align-items:center;gap:5px}
.viewer .hint kbd{font-family:var(--mono);font-size:10.5px;line-height:1.5;background:var(--sunken);
  border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;color:var(--ink-2)}

/* only the selected screen is mounted */
.screen{display:none;margin-bottom:40px;scroll-margin-top:70px}
.screen.is-active{display:block;animation:swapIn .28s cubic-bezier(.22,.8,.28,1) both}
@keyframes swapIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.screen-cap{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px; margin-top: 15px}
.screen-cap .no{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--primary-fg);
  background:var(--primary);border-radius:var(--r-sm);padding:4px 8px;flex:0 0 auto;margin-top:2px}
.screen-cap .b{min-width:0;flex:1 1 460px}
.screen-cap h2{margin:0;font-size:16px;font-weight:620;letter-spacing:-.01em;color:var(--ink);line-height:1.35}
.screen-cap p{margin:6px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
.screen-cap .route{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);background:var(--sunken);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:2px 7px;display:inline-block;margin-top:8px;word-break:break-all}

.frame{position:relative;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:var(--card);
  box-shadow:var(--shadow-md)}
/* One screen on screen. The frame is a real window, not a slice of one: it stands at
   MacBook Pro 14" content height (1512×982 logical) so the shell renders at the size an
   operator actually sees, and scrolls internally. The page scrolls to reach it — the
   .viewer toolbar is sticky, so switching screens stays in reach. One rule, every screen. */
.frame-body{height:var(--frame-h);overflow:auto}
.frame-body::-webkit-scrollbar{height:10px;width:10px}
.frame-body::-webkit-scrollbar-thumb{background:#dcdce0;border-radius:var(--r-full);border:3px solid #fff}
.capstrip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.capstrip .k{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);margin-right:2px}
.capstrip code{font-family:var(--mono);font-size:11px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:3px 7px;color:var(--ink-3);white-space:nowrap}

/* system notes */
.notes{margin-top:8px}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.sw{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--card)}
.sw .chipc{height:44px;display:block}
.sw .m{padding:7px 9px;border-top:1px solid var(--line-soft)}
.sw .n{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);display:block;line-height:1.5}
.sw .h{font-family:var(--mono);font-size:10px;color:var(--muted-2);display:block;line-height:1.5}
.specimen{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.notelist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.notelist li{position:relative;padding-left:20px;font-size:13px;line-height:1.55;color:var(--ink-3)}
.notelist li::before{content:"";position:absolute;left:4px;top:8px;width:5px;height:5px;border-radius:var(--r-full);background:var(--muted-2)}
.notelist li b{color:var(--ink);font-weight:600}
.notelist li code{font-family:var(--mono);font-size:11.5px;background:var(--sunken);border:1px solid var(--line);
  border-radius:4px;padding:1px 5px;color:var(--ink-2)}

/* ==========================================================================
   11. MOTION — staggered reveal, one high-impact drag moment (screen 03)
   ========================================================================== */
.rise{opacity:0;transform:translateY(8px);animation:rise .5s cubic-bezier(.22,.8,.28,1) both}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.10s}.d3{animation-delay:.15s}.d4{animation-delay:.20s}
.d5{animation-delay:.25s}.d6{animation-delay:.30s}.d7{animation-delay:.35s}.d8{animation-delay:.40s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important}
}

/* ==========================================================================
   12. RESPONSIVE — deck never scrolls horizontally; frames scroll internally
   ========================================================================== */
@media (max-width:1279px){
  .deck{padding:0 20px 64px}
  .viewer{margin:20px -20px 22px;padding:10px 20px}
  .viewer .hint{display:none}
  .picker-menu{max-width:calc(100vw - 40px)}
}
@media (max-width:899px){
  .deck{padding:0 14px 52px}
  .viewer{margin:16px -14px 18px;padding:9px 14px;gap:8px}
  .viewer .legend-chips{display:none}
  .viewer .pos{margin-left:auto}
  .picker{flex:1 1 100%;width:100%;order:-1}
  .picker-menu{max-width:calc(100vw - 28px)}
  .hero{padding:30px 0 4px;gap:20px}
  .hero .b{flex:1 1 100%}
  .hero h1{font-size:24px}
  .hero .side{align-items:flex-start;width:100%;margin-left:0}
  .hero .tags{justify-content:flex-start}
  .frame-body{height:clamp(560px,calc(100vh - 220px),820px)}
  .screen{margin-bottom:32px}
  .screen-cap .no{margin-top:0}
  .swatches{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}