/* Project Z — the one stylesheet.
   Every page uses these tokens and components. Page <style> blocks keep only layout unique to that page.
   Colors come from assets/brand/BRAND.md. Nothing outside this file defines a color, a spacing step, a type size or a breakpoint.
   Mobile first. One breakpoint: 720px (--bp-m). Above it, only layout changes. */

/* ── 1. Tokens ─────────────────────────────────────────── */
:root{
  /* color — BRAND.md, nothing else */
  --bg:#08090d;
  --card:#0c1016;
  --line:rgba(232,238,246,.10);
  --line-strong:rgba(232,238,246,.18); /* same hue as --line; outline buttons and inputs need to be visible */
  --tx:#E8EEF6;
  --mut:#8b98ab;
  --dim:#747e8c;
  --accent:#5EEAD4;
  --accent-ink:#041016;
  --danger:#f87171; /* error text only */
  --scrim:rgba(8,9,13,.78); /* = --bg at 78%, behind dialogs */

  /* spacing — 4px steps. Every margin, padding and gap uses one of these */
  --s0:2px; /* hairline gap, indicator width */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* type — three roles: title (display/h1/h2) · body · support (small/caption) */
  --font:"Apple SD Gothic Neo",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --t-display:clamp(36px,7vw,64px); --lh-display:1.06;  /* one per page, hero only */
  --t-h1:22px;   --lh-h1:1.3;   /* page title */
  --t-h2:15px;   --lh-h2:1.4;   /* section title, weight 650 */
  --t-body:15px; --lh-body:1.6;
  --t-small:13px; --lh-small:1.5;
  --t-caption:12px; --lh-caption:1.4;

  /* shape */
  --r-sm:6px; --r-md:8px; --r-lg:12px;
  --shadow:0 1px 2px rgba(0,0,0,.4); /* the only shadow */

  /* layout */
  --bp-m:720px;          /* documentation only — @media cannot read variables; the literal 720px below must match */
  --tap:44px;            /* button and input height */
  --tap-sm:40px;         /* chips and row actions — the smallest allowed touch target */
  --content:720px;       /* reading column */
  --tabbar-h:64px;
  --rail:224px;          /* left navigation width from 720px */
  --wide:920px;          /* wide column (lists, grids) */
  --pill:999px;          /* fully rounded */
  --icon:20px; --icon-sm:16px; --icon-xs:14px;
  --dot:8px; --dot-sm:6px;       /* status dots, progress bars */
  --tap-xs:32px;                 /* compact controls inside rows (info icon, sidebar select) */
  --avatar-xs:22px;
  --thumb-sm:72px; --thumb:128px; /* card thumbnails: mobile / from 720px */
  --media-h:420px; --media-sm:180px; /* post media / upload preview max height */
  --menu-w:140px;                /* dropdown menus, search fields */
  --page-wide:1180px;            /* wide page shell (landing, owner console) */
  --avatar-sm:28px; --avatar:56px;
  --sheet:480px;         /* dialog width */
  --pop:320px;           /* popover width */
  --tile:220px;          /* min width of a grid tile */
  color-scheme:dark;
}

/* ── 2. Base ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:400 var(--t-body)/var(--lh-body) var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
h1,h2,h3{word-break:keep-all;overflow-wrap:break-word;font-weight:650;letter-spacing:-.01em}
h1{font-size:var(--t-h1);line-height:var(--lh-h1)}
h2,h3{font-size:var(--t-h2);line-height:var(--lh-h2)}
.display{font-size:var(--t-display);line-height:var(--lh-display);font-weight:700;letter-spacing:-.04em;word-break:keep-all}
small,.small{font-size:var(--t-small);line-height:var(--lh-small)}
.caption{font-size:var(--t-caption);line-height:var(--lh-caption)}
.mut{color:var(--mut)} .dim{color:var(--dim)} .err{color:var(--danger)}
.note{font-size:var(--t-small);line-height:var(--lh-small);color:var(--mut);overflow-wrap:break-word} /* support text: hints, meta, captions under titles */
a{color:var(--accent);text-underline-offset:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ── 3. Components ─────────────────────────────────────── */
/* Button. One .btn-primary per screen (checked by ops/ui-audit.mjs + review, CSS can't enforce it). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--tap);padding:0 var(--s4);border-radius:var(--r-md);
  font:600 var(--t-small)/1 var(--font);text-decoration:none;cursor:pointer;white-space:nowrap;
  border:1px solid var(--line-strong);background:transparent;color:var(--tx);transition:border-color .16s ease-out,filter .16s ease-out}
.btn:hover{border-color:var(--accent)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.btn-primary:hover{filter:brightness(1.06)}
.btn-secondary{/* = .btn default: outline */}
.btn-ghost{border-color:transparent;color:var(--mut);padding:0 var(--s2)}
.btn-ghost:hover{border-color:transparent;color:var(--tx)}
.btn-danger{color:var(--danger);border-color:rgba(248,113,113,.35)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;filter:none}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}

/* Card: flat section, divided by a line. Same padding everywhere. */
.card{padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.card:last-child{border-bottom:0}
.card > * + *{margin-top:var(--s3)}
.box{padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)} /* bordered item inside a card */

/* Section header: title + optional one-line note + optional action on the right */
.sec{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.sec > h2{flex:1;min-width:0}
.sec-note{color:var(--mut);font-size:var(--t-small);line-height:var(--lh-small);margin-top:var(--s1)}

/* Form controls — every text input, textarea and select looks the same everywhere */
/* Field: label + input + error */
.field{display:grid;gap:var(--s2)}
.field > label,.field > .label,.field > span:first-child{font-size:var(--t-small);color:var(--mut)}
input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select{
  width:100%;height:var(--tap);padding:0 var(--s3);border:1px solid var(--line-strong);border-radius:var(--r-md);
  background:transparent;color:var(--tx);font:inherit}
textarea{height:auto;min-height:96px;padding:var(--s3);resize:vertical;line-height:var(--lh-body)}
input:focus,textarea:focus,select:focus{border-color:var(--accent);outline:none}
::placeholder{color:var(--dim)}
.field .err{font-size:var(--t-small)}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;accent-color:var(--accent)}
/* Language picker — same control, same place (header, right) on every page */
select.lang{width:auto;height:var(--tap-sm);max-width:140px;padding:0 var(--s2);border:1px solid var(--line);border-radius:var(--pill);background:transparent;color:var(--mut);font-size:var(--t-small);cursor:pointer}
select.lang:hover{color:var(--tx)}
.check{display:flex;align-items:center;gap:var(--s2);min-height:var(--tap-sm);cursor:pointer} /* checkbox/radio + its label on one row */

/* Empty state: one sentence (why it is empty) + at most one action. No zeros as headlines. */
.empty{padding:var(--s5) 0;color:var(--mut)}
.empty > p{margin:0}
.empty > .btn{margin-top:var(--s3)}

/* Chip: filter or tag. Selected = accent fill. */
.chip{display:inline-flex;align-items:center;min-height:var(--tap-sm);padding:0 var(--s3);border-radius:999px;
  border:1px solid var(--line-strong);background:transparent;color:var(--mut);font:500 var(--t-small)/1 var(--font);cursor:pointer}
.chip.on,.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:650}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* List row: title/support text on the left, one action on the right */
.list-row{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:0}
.list-row > .main{flex:1;min-width:0}
.list-row > .main > .sub{color:var(--mut);font-size:var(--t-small);margin-top:2px}
.list-row > .btn{flex:none}

/* Tab bar: bottom on mobile, left rail from 720px. Content never sits under it. */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-around;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  background:var(--bg);border-top:1px solid var(--line)}
.tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:var(--tap);background:none;border:0;color:var(--dim);font:500 var(--t-caption)/1 var(--font);text-decoration:none;cursor:pointer}
.tabbar [aria-current="page"],.tabbar .on{color:var(--tx)}
.tabbar svg{width:20px;height:20px;stroke-width:1.6}
.has-tabbar{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s5))}

/* Document: long-form legal or help text */
.doc{max-width:var(--content);margin:0 auto;padding:var(--s6) var(--s4) var(--s8);line-height:1.75}
.doc .brand{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5);font-weight:600}
.doc .logo{width:var(--avatar-sm);height:var(--avatar-sm);flex:none;display:block;border-radius:var(--r-sm);background:url(/assets/brand/projectz-mark-dark.svg) center/contain no-repeat;color:transparent;font-size:0;overflow:hidden}
.doc h1{margin-bottom:var(--s3)}
.doc h2{margin:var(--s6) 0 var(--s2)}
.doc h3{margin:var(--s5) 0 var(--s2);font-size:var(--t-small);color:var(--dim)}
.doc p,.doc li{color:var(--mut);margin:var(--s2) 0}
.doc ol,.doc ul{padding-left:1.25em}
.doc li::marker{color:var(--dim)}
.doc strong{color:var(--tx);font-weight:650}
.doc code{font:var(--t-small)/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;padding:1px var(--s1);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--accent)}
.doc blockquote,.doc .meta{margin:var(--s4) 0;padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);color:var(--mut);font-size:var(--t-small)}
.doc blockquote{border-left:2px solid var(--accent)}
.doc .tbd{color:var(--accent);font-weight:600}
.doc .langs{display:flex;flex-wrap:wrap;gap:var(--s4);margin-bottom:var(--s5);font-size:var(--t-small)}
.doc .langs a{display:inline-flex;align-items:center;min-height:var(--tap-sm);color:var(--dim);text-decoration:none}
.doc .langs a[aria-current="page"]{color:var(--accent);font-weight:700}
.doc .foot{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--line);font-size:var(--t-small);color:var(--dim)}

/* Page shell */
.page{max-width:var(--content);margin:0 auto;padding:var(--s4) var(--s4) var(--s7)}
.icon{width:20px;height:20px;stroke:currentColor;stroke-width:1.6;fill:none;flex:none}

/* ── 4. The one breakpoint ─────────────────────────────── */
@media (min-width:720px){
  .page{padding:var(--s6) var(--s6) var(--s8)}
  .tabbar{top:0;right:auto;bottom:0;width:224px;height:auto;flex-direction:column;justify-content:flex-start;
    gap:var(--s1);padding:var(--s5) var(--s3);border-top:0;border-right:1px solid var(--line)}
  .tabbar a,.tabbar button{flex:none;flex-direction:row;justify-content:flex-start;gap:var(--s3);padding:0 var(--s3);
    border-radius:var(--r-md);font-size:var(--t-small)}
  .tabbar [aria-current="page"],.tabbar .on{background:var(--card)}
  .has-tabbar{padding-bottom:0;padding-left:224px}
}