/* ============================================================================
   MAYA STUDIO 2.0
   A creative operating system for one recurring subject in two canonical states.

   Design intent: a first-party creative application, not an AI dashboard.
   Content first, image first, near-zero chrome. The navigation lives on the
   right on desktop and becomes a native compact system on mobile.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Surfaces --------------------------------------------------------------- */
  --bg:            #f6f6f8;
  --bg-deep:       #eeeef1;
  --surface:       #ffffff;
  --surface-2:     rgba(0,0,0,.035);
  --surface-3:     rgba(0,0,0,.055);
  --glass:         rgba(255,255,255,.72);
  --glass-strong:  rgba(255,255,255,.86);
  --scrim:         rgba(28,28,30,.62);

  /* Ink -------------------------------------------------------------------- */
  --ink:           #131316;
  --ink-2:         #5c5c66;
  --ink-3:         #8e8e98;
  --ink-4:         #b4b4bd;

  /* Line ------------------------------------------------------------------- */
  --line:          rgba(0,0,0,.085);
  --line-soft:     rgba(0,0,0,.05);

  /* Accent + semantics ----------------------------------------------------- */
  --accent:        #0a6cff;
  --accent-soft:   rgba(10,108,255,.11);
  --ok:            #12855a;
  --ok-soft:       rgba(18,133,90,.12);
  --warn:          #a8620a;
  --warn-soft:     rgba(168,98,10,.13);
  --bad:           #c02b2b;
  --bad-soft:      rgba(192,43,43,.12);
  --hero:          #7a3ff2;
  --hero-soft:     rgba(122,63,242,.12);

  /* Before / After state colours ------------------------------------------- */
  --st-before:     #b0621f;
  --st-before-soft:rgba(176,98,31,.12);
  --st-after:      #1a7f6b;
  --st-after-soft: rgba(26,127,107,.12);

  /* Geometry --------------------------------------------------------------- */
  --r-xs: 7px;  --r-sm: 11px;  --r: 16px;  --r-lg: 22px;  --r-xl: 30px;
  --rail: 74px;
  --rail-open: 236px;

  /* Type ------------------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", Inter, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  /* Motion ----------------------------------------------------------------- */
  --ease: cubic-bezier(.32,.72,0,1);
  --fast: .18s var(--ease);
  --med:  .3s  var(--ease);

  --shadow-1: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.055);
  --shadow-2: 0 2px 6px rgba(0,0,0,.07), 0 18px 46px rgba(0,0,0,.13);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0b0b0d; --bg-deep:#000; --surface:#18181b; --surface-2:rgba(255,255,255,.055);
    --surface-3:rgba(255,255,255,.085);
    --glass:rgba(24,24,27,.72); --glass-strong:rgba(24,24,27,.9); --scrim:rgba(0,0,0,.76);
    --ink:#f2f2f5; --ink-2:#a3a3ad; --ink-3:#7c7c86; --ink-4:#55555e;
    --line:rgba(255,255,255,.1); --line-soft:rgba(255,255,255,.06);
    --accent:#4d95ff; --accent-soft:rgba(77,149,255,.16);
    --ok:#3ad48f; --ok-soft:rgba(58,212,143,.15);
    --warn:#f0a23a; --warn-soft:rgba(240,162,58,.15);
    --bad:#ff6b6b; --bad-soft:rgba(255,107,107,.15);
    --hero:#b18cff; --hero-soft:rgba(177,140,255,.16);
    --st-before:#e0913f; --st-before-soft:rgba(224,145,63,.15);
    --st-after:#3fd0b0; --st-after-soft:rgba(63,208,176,.15);
    --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.34);
    --shadow-2: 0 2px 6px rgba(0,0,0,.5), 0 18px 46px rgba(0,0,0,.5);
  }
}

/* ---------------------------------------------------------------- reset --- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size:15px; line-height:1.5; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img, svg { display:block; max-width:100%; }
button, input, select, textarea { font:inherit; color:inherit; }
button { background:none; border:0; cursor:pointer; }
a { color:inherit; text-decoration:none; }
::selection { background: var(--accent-soft); }

/* Focus: visible for keyboards, silent for pointers. */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================================================ NAVIGATION === */
/* Left-hand rail (CEO preference, 2026-09-03). Narrow and persistent;         */
/* expands on hover or focus.                                                  */

.rail {
  position: fixed; top:0; left:0; bottom:0; width: var(--rail); z-index:70;
  display:flex; flex-direction:column;
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-right:.5px solid var(--line);
  transition: width var(--med);
  overflow:hidden;
}
.rail:hover, .rail:focus-within { width: var(--rail-open); box-shadow: var(--shadow-2); }

.rail-mark {
  height:60px; flex:none; display:flex; align-items:center; gap:11px;
  padding:0 0 0 25px;
}
.rail-mark i {
  width:26px; height:26px; flex:none; border-radius:8px; background:var(--ink); color:var(--bg);
  display:grid; place-items:center; font-weight:640; font-size:14px; letter-spacing:-.03em; font-style:normal;
}
.rail-mark b {
  font-size:14px; font-weight:620; letter-spacing:-.02em; white-space:nowrap;
  opacity:0; transition:opacity var(--fast);
}
.rail:hover .rail-mark b, .rail:focus-within .rail-mark b { opacity:1; }

.rail-scroll { flex:1; overflow-y:auto; overflow-x:hidden; padding:4px 0 16px; scrollbar-width:none; }
.rail-scroll::-webkit-scrollbar { display:none; }

.rail-group { padding:11px 0 3px 25px; }
.rail-group span {
  font-size:10.5px; font-weight:640; letter-spacing:.075em; text-transform:uppercase;
  color:var(--ink-4); white-space:nowrap; opacity:0; transition:opacity var(--fast);
}
.rail:hover .rail-group span, .rail:focus-within .rail-group span { opacity:1; }
.rail-group::before {
  content:""; display:block; width:15px; height:.5px; background:var(--line);
  margin-bottom:11px; transition:opacity var(--fast);
}
.rail:hover .rail-group::before, .rail:focus-within .rail-group::before { opacity:0; height:0; margin:0; }

.rail-item {
  position:relative; display:flex; align-items:center; gap:14px;
  height:40px; padding-left:25px; width:100%; color:var(--ink-2);
  transition:color var(--fast);
}
.rail-item svg { width:19px; height:19px; flex:none; }
.rail-item b {
  font-size:13.5px; font-weight:500; letter-spacing:-.012em; white-space:nowrap;
  opacity:0; transform:translateX(-5px); transition:opacity var(--fast), transform var(--fast);
}
.rail:hover .rail-item b, .rail:focus-within .rail-item b { opacity:1; transform:none; }
.rail-item:hover { color:var(--ink); }
.rail-item.on { color:var(--ink); }
.rail-item.on::before {
  content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px;
  background:var(--accent); border-radius:0 3px 3px 0;
}
.rail-item .badge {
  margin-left:auto; margin-right:16px; font-size:11px; font-weight:600; color:var(--ink-4);
  opacity:0; transition:opacity var(--fast); font-variant-numeric:tabular-nums;
}
.rail:hover .rail-item .badge, .rail:focus-within .rail-item .badge { opacity:1; }

/* Mobile: a bottom tab bar, not a shrunken rail. ---------------------------- */
.tabbar { display:none; }

/* ================================================================= SHELL === */
.shell { padding-left: var(--rail); min-height:100vh; }
.page { max-width:1320px; margin:0 auto; padding:0 clamp(18px, 3.2vw, 44px) 96px; }

/* Section header: title, count, contextual sub-navigation. */
.head { padding:38px 0 0; }
.head h1 {
  font-size: clamp(30px, 4.1vw, 46px); font-weight:680; letter-spacing:-.035em; line-height:1.04;
}
.head .sub { margin-top:9px; font-size:16px; color:var(--ink-2); max-width:62ch; letter-spacing:-.013em; }
.head .sub b { color:var(--ink); font-weight:590; }

.subnav {
  position:sticky; top:0; z-index:40; margin:22px 0 4px; padding:11px 0 12px;
  background:linear-gradient(var(--bg) 68%, transparent);
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
}
.segs {
  display:inline-flex; gap:2px; padding:2px; background:var(--surface-2);
  border-radius:11px; max-width:100%; overflow-x:auto; scrollbar-width:none;
}
.segs::-webkit-scrollbar { display:none; }
.segs button {
  font-size:13px; font-weight:520; color:var(--ink-2); padding:6px 14px; border-radius:9px;
  white-space:nowrap; transition:var(--fast); letter-spacing:-.012em;
}
.segs button:hover { color:var(--ink); }
.segs button.on { background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.11); }

.spacer { flex:1; }
.tools { display:flex; gap:6px; align-items:center; flex:none; }

/* Filter chips -------------------------------------------------------------- */
.chips { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.chip {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:500; color:var(--ink-2);
  padding:5px 11px; border-radius:99px; background:var(--surface-2);
  transition:var(--fast); letter-spacing:-.01em; white-space:nowrap;
}
.chip:hover { background:var(--surface-3); color:var(--ink); }
.chip.on { background:var(--ink); color:var(--bg); }
.chip svg { width:13px; height:13px; }
.chip .n { font-variant-numeric:tabular-nums; opacity:.55; font-size:11.5px; }

.iconbtn {
  width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  color:var(--ink-2); background:var(--surface-2); transition:var(--fast);
}
.iconbtn:hover { background:var(--surface-3); color:var(--ink); }
.iconbtn.on { background:var(--ink); color:var(--bg); }
.iconbtn svg { width:16px; height:16px; }

/* =============================================================== LABELS === */
.lab {
  font-size:11.5px; font-weight:620; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); margin:38px 0 14px; display:flex; align-items:center; gap:9px;
  /* Status pills are nowrap; without this a long one pushes the page sideways on a phone. */
  flex-wrap:wrap;
}
.lab:first-child { margin-top:26px; }
.lab .n { color:var(--ink-4); font-weight:560; letter-spacing:.02em; text-transform:none; font-size:12px;
  min-width:0; overflow-wrap:anywhere; }

/* ============================================================ PORTFOLIO === */
/* Uniform grid, and a masonry contact sheet. Images sit edge to edge.         */

.grid {
  display:grid; gap:clamp(9px, 1vw, 15px);
  grid-template-columns:repeat(auto-fill, minmax(clamp(148px, 19vw, 244px), 1fr));
}
.grid.wide { grid-template-columns:repeat(auto-fill, minmax(clamp(210px, 27vw, 340px), 1fr)); }

.sheet { column-gap:clamp(9px,1vw,15px); columns:5 200px; }
.sheet .tile { break-inside:avoid; margin-bottom:clamp(9px,1vw,15px); }

.tile {
  position:relative; border-radius:var(--r); overflow:hidden; background:var(--surface-2);
  cursor:zoom-in; transition:transform var(--fast), box-shadow var(--fast);
  isolation:isolate;
}
.tile:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); }
.tile img {
  width:100%; height:100%; object-fit:cover; display:block;
  background:var(--surface-2); transition:opacity .35s ease;
}
.tile img[data-load="0"] { opacity:0; }
.grid .tile { aspect-ratio:3/4; }
.grid .tile.free { aspect-ratio:auto; }
.sheet .tile { aspect-ratio:auto; }

/* The metadata veil. Present but quiet; it never competes with the image. */
.tile .veil {
  position:absolute; inset:auto 0 0 0; padding:26px 12px 11px;
  background:linear-gradient(transparent, rgba(0,0,0,.72));
  color:#fff; opacity:0; transition:opacity var(--fast);
  display:flex; align-items:flex-end; gap:8px;
}
.tile:hover .veil, .tile:focus-within .veil { opacity:1; }
.tile .veil b { font-size:12.5px; font-weight:540; letter-spacing:-.012em; line-height:1.3;
  text-shadow:0 1px 4px rgba(0,0,0,.5); flex:1; }
.tile .veil .sc { font-size:11.5px; font-variant-numeric:tabular-nums; opacity:.82; }

/* State + approval markers ride the top corners. */
.tile .mk {
  position:absolute; top:9px; left:9px; display:flex; gap:5px; pointer-events:none;
}
.tile .mk i {
  font-style:normal; font-size:10px; font-weight:660; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 7px; border-radius:6px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.mk i.before { background:rgba(176,98,31,.9); color:#fff; }
.mk i.after  { background:rgba(26,127,107,.9); color:#fff; }
.mk i.pair   { background:rgba(0,0,0,.55); color:#fff; }
.tile .fav {
  position:absolute; top:7px; right:7px; width:27px; height:27px; border-radius:8px;
  display:grid; place-items:center; color:#fff; opacity:0; transition:var(--fast);
  background:rgba(0,0,0,.36); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.tile:hover .fav, .tile .fav.on { opacity:1; }
.tile .fav.on { color:#ffd94a; }
.tile .fav svg { width:14px; height:14px; }

/* Paired presentation: two photographs, captions outside the image area. */
.pairs { display:grid; gap:clamp(16px,2vw,28px); grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); }
.pair { background:var(--surface); border-radius:var(--r-lg); padding:13px; box-shadow:var(--shadow-1); }
.pair-h { display:flex; align-items:baseline; gap:10px; padding:2px 4px 11px; }
.pair-h b { font-size:14px; font-weight:590; letter-spacing:-.016em; }
.pair-g { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.pair-g figure { position:relative; border-radius:var(--r-sm); overflow:hidden; cursor:zoom-in;
  background:var(--surface-2); }
.pair-g img { width:100%; aspect-ratio:3/4; object-fit:cover; }
.pair-g figcaption {
  position:absolute; left:8px; bottom:8px; font-size:9.5px; font-weight:660; letter-spacing:.07em;
  padding:3px 7px; border-radius:5px; color:#fff;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.pair-g figure:first-child figcaption { background:rgba(176,98,31,.9); }
.pair-g figure:last-child  figcaption { background:rgba(26,127,107,.9); }
.pair-g.trio { grid-template-columns:1fr 1fr 1fr; }
.pair-g.trio figure:first-child figcaption { background:rgba(0,0,0,.6); }

/* Comparison rail for engine tests. */
.mrow { display:flex; gap:9px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:5px; }
.mrow::-webkit-scrollbar { height:5px; }
.mrow::-webkit-scrollbar-thumb { background:var(--surface-3); border-radius:3px; }
.mrow figure { flex:0 0 clamp(150px,22vw,230px); scroll-snap-align:start; position:relative;
  border-radius:var(--r-sm); overflow:hidden; cursor:zoom-in; background:var(--surface-2); }
.mrow img { width:100%; aspect-ratio:3/4; object-fit:cover; }
.mrow figcaption {
  position:absolute; inset:auto 0 0 0; padding:16px 9px 7px; color:#fff; font-size:11px; font-weight:560;
  background:linear-gradient(transparent, rgba(0,0,0,.76)); display:flex; justify-content:space-between; gap:6px;
}
.mrow figcaption em { font-style:normal; font-variant-numeric:tabular-nums; opacity:.8; }

/* ================================================================ CARDS === */
.cards { display:grid; gap:11px; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); }
.card {
  background:var(--surface); border-radius:var(--r); padding:15px 17px; box-shadow:var(--shadow-1);
  display:flex; flex-direction:column; gap:5px;
}
.card b { font-size:13.5px; font-weight:610; letter-spacing:-.015em; }
.card span { font-size:13px; color:var(--ink-2); line-height:1.47; overflow-wrap:anywhere; }
.card.tight { padding:12px 14px; }

.stats { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(126px,1fr)); margin:22px 0 4px; }
.stat { background:var(--surface); border-radius:var(--r); padding:15px 17px; box-shadow:var(--shadow-1); }
.stat b { display:block; font-size:26px; font-weight:660; letter-spacing:-.035em; font-variant-numeric:tabular-nums; line-height:1.1; }
.stat span { font-size:11.5px; font-weight:560; color:var(--ink-3); letter-spacing:.02em; text-transform:uppercase; }
.stat.accent b { color:var(--accent); }

/* Pills ------------------------------------------------------------------- */
.pill {
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:590;
  padding:2.5px 8px; border-radius:99px; letter-spacing:-.005em; white-space:nowrap;
  font-variant-numeric:tabular-nums; max-width:100%;
}
.pill.neu   { background:var(--surface-2); color:var(--ink-2); }
.pill.ok    { background:var(--ok-soft); color:var(--ok); }
.pill.warn  { background:var(--warn-soft); color:var(--warn); }
.pill.bad   { background:var(--bad-soft); color:var(--bad); }
.pill.acc   { background:var(--accent-soft); color:var(--accent); }
.pill.hero  { background:var(--hero-soft); color:var(--hero); }
.pill.before{ background:var(--st-before-soft); color:var(--st-before); }
.pill.after { background:var(--st-after-soft); color:var(--st-after); }
.pill.lock  { background:var(--ink); color:var(--bg); }

/* Prose ------------------------------------------------------------------- */
.prose { max-width:74ch; font-size:14.5px; color:var(--ink-2); line-height:1.62; }
.prose p { margin-bottom:12px; }
.prose p:last-child { margin-bottom:0; }
.prose b, .prose strong { color:var(--ink); font-weight:590; }
.prose code { font-family:var(--mono); font-size:.88em; background:var(--surface-2);
  padding:1.5px 5px; border-radius:5px; color:var(--ink); }
.prose ul { margin:0 0 12px 17px; }
.prose li { margin-bottom:5px; }

.note {
  background:var(--surface); border-radius:var(--r); padding:14px 17px; box-shadow:var(--shadow-1);
  border-left:3px solid var(--accent); font-size:13.5px; color:var(--ink-2); line-height:1.55;
  max-width:78ch;
}
.note b { color:var(--ink); }
.note.warn { border-left-color:var(--warn); }
.note.bad  { border-left-color:var(--bad); }
.note.ok   { border-left-color:var(--ok); }

/* Data tables -------------------------------------------------------------- */
.tblwrap { overflow-x:auto; border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow-1); }
table { width:100%; border-collapse:collapse; font-size:13px; min-width:420px; }
th, td { text-align:left; padding:10px 15px; border-bottom:.5px solid var(--line-soft); }
th { font-size:11px; font-weight:620; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
tr:last-child td { border-bottom:0; }
td.num { font-variant-numeric:tabular-nums; text-align:right; }
td code { font-family:var(--mono); font-size:12px; }

/* Key/value rows for the inspector + schema views -------------------------- */
.kv { display:grid; grid-template-columns:minmax(96px,auto) 1fr; gap:5px 16px; font-size:13px; align-items:baseline; }
.kv dt { color:var(--ink-3); font-weight:520; }
.kv dd { color:var(--ink); overflow-wrap:anywhere; }
.kv dd.mono { font-family:var(--mono); font-size:12px; }

/* Accordion for long doctrine ---------------------------------------------- */
details.acc { background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-1); margin-bottom:9px; overflow:hidden; }
details.acc > summary {
  padding:13px 17px; cursor:pointer; font-size:13.5px; font-weight:580; letter-spacing:-.014em;
  display:flex; align-items:center; gap:10px; list-style:none;
}
details.acc > summary::-webkit-details-marker { display:none; }
details.acc > summary::after {
  content:""; margin-left:auto; width:7px; height:7px; border-right:1.6px solid var(--ink-3);
  border-bottom:1.6px solid var(--ink-3); transform:rotate(45deg) translateY(-2px); transition:transform var(--fast);
}
details.acc[open] > summary::after { transform:rotate(225deg) translateY(-2px); }
details.acc > div { padding:0 17px 15px; }

/* ============================================================= LIGHTBOX === */
.lb {
  position:fixed; inset:0; z-index:200; background:var(--scrim);
  backdrop-filter:blur(28px) saturate(150%); -webkit-backdrop-filter:blur(28px) saturate(150%);
  display:flex; opacity:0; pointer-events:none; transition:opacity var(--med);
}
.lb.on { opacity:1; pointer-events:auto; }
/* min-width/min-height 0 matter: a flex child defaults to min-*:auto and will
   refuse to shrink below its content, which is what crops a tall photograph. */
/* Sizing note, because this is easy to get wrong and it crops the photograph:
   a default `1fr` track is `minmax(auto,1fr)`, so the track grows to the image's
   intrinsic height and `max-height:100%` then resolves against that grown track —
   which is no constraint at all. `minmax(0,1fr)` forces a definite track, and the
   flex min-height:0 keeps the stage itself from refusing to shrink. */
.lb-stage {
  flex:1 1 auto; display:grid; place-items:center;
  grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr);
  padding:clamp(12px,3vw,44px); position:relative;
  min-width:0; min-height:0; overflow:hidden; touch-action:pan-y pinch-zoom;
}
.lb-stage img {
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  border-radius:var(--r-sm); box-shadow:0 24px 80px rgba(0,0,0,.5);
  animation:lbin .34s var(--ease);
}
@keyframes lbin { from { opacity:0; transform:scale(.975); } to { opacity:1; transform:none; } }

.lb-x, .lb-nav, .lb-info {
  position:absolute; z-index:2; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  color:#fff; background:rgba(255,255,255,.12); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:var(--fast);
}
.lb-x:hover, .lb-nav:hover, .lb-info:hover { background:rgba(255,255,255,.24); }
.lb-info svg { width:19px; height:19px; }
.lb-x { top:14px; left:14px; }
.lb-info { top:14px; right:14px; }
.lb.no-insp .lb-info { color:var(--ink-3); }
.lb-nav.prev { left:14px; top:50%; transform:translateY(-50%); }
.lb-nav.next { right:14px; top:50%; transform:translateY(-50%); }
.lb-nav svg, .lb-x svg { width:19px; height:19px; }
.lb-count {
  position:absolute; top:22px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.72);
  font-size:12px; font-variant-numeric:tabular-nums; letter-spacing:.02em;
}

/* Inspector: a glass panel on desktop, a sheet on mobile. */
.lb.no-insp .lb-insp { display:none; }
.lb-insp {
  width:min(392px, 34vw); flex:none; overflow-y:auto; padding:22px 24px 40px;
  background:var(--glass-strong); backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
  border-left:.5px solid var(--line); color:var(--ink);
}
.lb-insp h3 { font-size:18px; font-weight:640; letter-spacing:-.025em; margin-bottom:4px; }
.lb-insp .isub { font-size:13px; color:var(--ink-2); margin-bottom:15px; }
.insp-sec { margin-top:19px; }
.insp-sec > h4 {
  font-size:10.5px; font-weight:640; letter-spacing:.075em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:8px;
}
.insp-refs { display:flex; gap:6px; flex-wrap:wrap; }
.insp-refs img { width:52px; height:66px; object-fit:cover; border-radius:8px; background:var(--surface-2); }
.insp-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.act {
  font-size:12.5px; font-weight:560; padding:6px 12px; border-radius:9px;
  background:var(--surface-2); color:var(--ink-2); transition:var(--fast);
}
.act:hover { background:var(--surface-3); color:var(--ink); }
.act.on { background:var(--ink); color:var(--bg); }
.act.approve.on { background:var(--ok); color:#fff; }
.act.reject.on  { background:var(--bad); color:#fff; }
.act.hero.on    { background:var(--hero); color:#fff; }

pre.code {
  font-family:var(--mono); font-size:11.5px; line-height:1.6; background:var(--bg-deep);
  border-radius:var(--r-sm); padding:12px 13px; overflow-x:auto; white-space:pre-wrap;
  overflow-wrap:anywhere; color:var(--ink-2); max-height:340px; overflow-y:auto;
}

/* ================================================================ FORMS === */
.form { display:grid; gap:17px; max-width:640px; }
.field label {
  display:block; font-size:11.5px; font-weight:620; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:7px;
}
.field .hint { font-size:12.5px; color:var(--ink-3); margin-top:6px; line-height:1.45; }
input[type=text], input[type=number], textarea, select {
  width:100%; background:var(--surface); border:.5px solid var(--line); border-radius:var(--r-sm);
  padding:10px 13px; font-size:14px; transition:var(--fast); box-shadow:var(--shadow-1);
}
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
textarea { resize:vertical; min-height:78px; line-height:1.5; }

.opts { display:flex; gap:6px; flex-wrap:wrap; }
.opt {
  font-size:13px; font-weight:520; padding:7px 14px; border-radius:10px;
  background:var(--surface-2); color:var(--ink-2); transition:var(--fast);
}
.opt:hover { background:var(--surface-3); color:var(--ink); }
.opt.on { background:var(--ink); color:var(--bg); }
.opt.on.before { background:var(--st-before); color:#fff; }
.opt.on.after  { background:var(--st-after); color:#fff; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:14.5px; font-weight:590; padding:12px 22px; border-radius:13px;
  background:var(--accent); color:#fff; transition:var(--fast); letter-spacing:-.014em;
}
.btn:hover { filter:brightness(1.08); }
.btn:active { transform:scale(.985); }
.btn:disabled { opacity:.42; cursor:not-allowed; }
.btn.ghost { background:var(--surface-2); color:var(--ink); }
.btn.ghost:hover { background:var(--surface-3); }
.btn svg { width:16px; height:16px; }

/* ========================================================= EMPTY / LOAD === */
.empty {
  padding:52px 24px; text-align:center; color:var(--ink-3); font-size:14px;
  background:var(--surface-2); border-radius:var(--r-lg); grid-column:1/-1;
}
.empty svg { width:26px; height:26px; margin:0 auto 11px; opacity:.5; }
.empty b { display:block; color:var(--ink-2); font-weight:590; font-size:14.5px; margin-bottom:5px; }

.skel { background:var(--surface-2); border-radius:var(--r); aspect-ratio:3/4;
  animation:pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.5 } }

/* =============================================================== MOBILE === */
@media (max-width: 900px) {
  .rail { display:none; }
  .shell { padding-right:0; padding-bottom:calc(58px + env(safe-area-inset-bottom)); }
  .page { padding:0 16px 40px; }
  .head { padding-top:20px; }
  .head .sub { font-size:15px; }

  .tabbar {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:80;
    height:calc(58px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
    background:var(--glass-strong);
    backdrop-filter:saturate(180%) blur(22px); -webkit-backdrop-filter:saturate(180%) blur(22px);
    border-top:.5px solid var(--line);
  }
  .tabbar button {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    color:var(--ink-3); transition:color var(--fast); padding-top:5px;
  }
  .tabbar button svg { width:22px; height:22px; }
  .tabbar button span { font-size:10px; font-weight:560; letter-spacing:-.005em; }
  .tabbar button.on { color:var(--accent); }

  .subnav { top:0; padding:9px 0 10px; margin:16px 0 0; }
  .segs { width:100%; }

  /* Full-bleed contact sheet reads better than a boxed grid on a phone. */
  .grid { grid-template-columns:repeat(auto-fill, minmax(min(46vw,168px), 1fr)); gap:7px; }
  .sheet { columns:2 auto; column-gap:7px; }
  .sheet .tile { margin-bottom:7px; }
  .tile .veil { opacity:1; background:linear-gradient(transparent, rgba(0,0,0,.6)); padding:20px 9px 8px; }
  .tile .veil b { font-size:11.5px; }
  .tile .fav { opacity:1; background:rgba(0,0,0,.28); }

  /* Filters: one swipeable row per facet. Wrapped, ten board chips ate half the
     first screen before the first photograph. */
  .subnav .chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; max-width:100%; padding-bottom:2px; }
  .subnav .chips::-webkit-scrollbar { display:none; }
  .subnav { gap:8px; }
  .subnav > .spacer { display:none; }
  .subnav .iconbtn { flex:none; }
  /* Keep the view-mode buttons on the ratio row rather than orphaning them. */
  .subnav .tools { margin-left:auto; }

  .pairs { grid-template-columns:1fr; }
  .pair { padding:9px; border-radius:var(--r); }
  .cards { grid-template-columns:1fr; }
  .stats { grid-template-columns:repeat(2,1fr); }

  /* Inspector becomes a bottom sheet with a drag handle. */
  .lb { flex-direction:column; }
  .lb-stage { padding:52px 10px 10px; min-height:44vh; }
  .lb-insp {
    width:100%; max-height:46vh; border-left:0; border-top:.5px solid var(--line);
    border-radius:var(--r-xl) var(--r-xl) 0 0; padding:8px 20px calc(26px + env(safe-area-inset-bottom));
    box-shadow:0 -12px 44px rgba(0,0,0,.28);
  }
  .lb-insp::before {
    content:""; display:block; width:34px; height:4px; border-radius:99px;
    background:var(--ink-4); opacity:.45; margin:6px auto 13px;
  }
  .lb-nav { display:none; }
  .lb-x { top:12px; left:12px; }
  .lb-info { top:12px; right:12px; }
  .lb-count { top:20px; }
}

@media (max-width: 460px) {
  .stats { grid-template-columns:repeat(2,1fr); }
  .head h1 { font-size:27px; }
  .pair-g.trio { grid-template-columns:1fr; }
}

/* Landscape phone: the stage must not be crushed by the sheet. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .lb { flex-direction:row; }
  .lb-insp { width:min(300px,38vw); max-height:none; border-radius:0; border-top:0;
    border-left:.5px solid var(--line); padding-top:18px; }
  .lb-insp::before { display:none; }
  .lb-stage { padding:10px; }
  .head { padding-top:12px; }
}

@media (min-width: 1600px) {
  .page { max-width:1520px; }
}