/* ═══════════════════════════════════════════════════════════════════════
   muli. — design system
   Tokens (§3.1) · Typography (§3.2) · Components (§3.3) · Layout (§3.5)
   Every color references a token. Theme packs override tokens only.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── §3.1 Theme pack token system ─── */
:root, [data-theme="classic"] {
  --green:#3F8F3A; --green-tint:#EAF4E6; --ink:#22313A; --muted:#5B707C;
  --line:#C7D3D9; --page:#E9EFF2; --panel:#F1F5F7; --card:#FFFFFF;
  --link:#1F6F8B; --cta:#C05F02; --cta-hi:#E8801E;
  --counter-bg:#10181C; --counter-digit:#8BE07F;
  --pack-bg:none;
}
[data-theme="glitter"] {
  --green:#C2367F; --green-tint:#FBE3F1; --ink:#3A2233; --muted:#8A5B7A;
  --line:#E5BED6; --page:#FBEAF4; --panel:#F8DFEE; --card:#FFFFFF;
  --link:#7A3FA8; --cta:#9C2B8F; --cta-hi:#C557B8;
  --counter-bg:#2A1026; --counter-digit:#FF9AD5;
  --pack-bg:radial-gradient(var(--dot) 1.4px, transparent 1.4px);
  --dot:rgba(194,54,127,0.10);
}
[data-theme="midnight"] {
  --green:#6FCF63; --green-tint:#1D2A20; --ink:#E4EDF2; --muted:#93A6B1;
  --line:#2E3C46; --page:#0F161B; --panel:#161F26; --card:#1B2630;
  --link:#6EC1E4; --cta:#D9720E; --cta-hi:#F08A24;
  --counter-bg:#000000; --counter-digit:#8BE07F;
  --pack-bg:none;
}

* { margin:0; padding:0; box-sizing:border-box; }

/* ─── §3.2 Typography ─── */
body {
  font:13px/1.55 Verdana, Geneva, sans-serif;
  color:var(--ink);
  background:var(--page);
  background-image:var(--pack-bg);
  background-size:24px 24px;
  transition:background-color .25s, color .25s;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
body.readable { font-size:16px; line-height:1.6; font-family:system-ui, sans-serif; }
h1,h2,h3 { font-family:"Trebuchet MS", Verdana, sans-serif; font-weight:700; }
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }
button { font-family:inherit; cursor:pointer; }
img { max-width:100%; }

.wm { font:700 20px "Trebuchet MS", Verdana, sans-serif; letter-spacing:-.5px; color:var(--green); }
.page-title { font:700 24px "Trebuchet MS", sans-serif; letter-spacing:-.5px; color:var(--ink); }
.lbl { font:700 10px Verdana; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.mut { color:var(--muted); }
.lnk { color:var(--link); cursor:pointer; }
.lnk:hover { text-decoration:underline; }
.small { font-size:11px; }
.fine { font:10px Tahoma, Verdana, sans-serif; color:var(--muted); }
.center { text-align:center; }
.bold { font-weight:700; }
.italic { font-style:italic; }
.row { display:flex; gap:10px; align-items:center; }
.between { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.col { display:flex; flex-direction:column; }
.gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}
.grow { flex:1; min-width:0; }
.hidden { display:none !important; }

/* ─── §3.5 Layout & breakpoints ─── */
#app { min-height:100vh; }
.sheet-wrap { max-width:920px; margin:0 auto; padding:0 12px 40px; }
.app-main {
  display:grid; grid-template-columns:264px 1fr; gap:16px;
  background:var(--card); border:1px solid var(--line); border-top:none;
  border-radius:0 0 10px 10px; padding:16px;
}
.app-main.single { grid-template-columns:1fr; }
.rail { display:flex; flex-direction:column; gap:14px; min-width:0; }
.main { display:flex; flex-direction:column; gap:14px; min-width:0; }
@media (max-width:680px) {
  .app-main { grid-template-columns:1fr; padding:12px; gap:12px; }
  .rail { order:0; }
}

/* ─── App header (persistent when logged in) ─── */
.appbar {
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; background:var(--card); border-bottom:1px solid var(--line);
}
.appbar .wm { flex:none; }
.searchbar {
  flex:1; height:34px; min-width:0;
  border:1px solid var(--line); border-radius:17px; background:var(--panel);
  display:flex; align-items:center; padding:0 14px; gap:8px;
}
.searchbar input {
  flex:1; border:none; background:none; outline:none; min-width:0;
  font:12px Verdana; color:var(--ink);
}
.searchbar input::placeholder { color:var(--muted); }
.iconbtn { position:relative; background:none; border:none; font-size:18px; color:var(--muted); padding:4px; line-height:1; }
.iconbtn .dot { position:absolute; top:0; right:0; width:8px; height:8px; border-radius:50%; background:var(--cta-hi); }

/* Folder tabs (§3.3.2) */
.tabbar {
  max-width:920px; margin:0 auto; padding:8px 12px 0;
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
}
.tabbar::-webkit-scrollbar { display:none; }
.tab {
  position:relative; flex:none;
  font:700 13px "Trebuchet MS", sans-serif; color:var(--muted);
  padding:9px 15px; border:1px solid var(--line); border-bottom:none;
  border-radius:8px 8px 0 0;
  background:linear-gradient(var(--panel), var(--page));
  white-space:nowrap; cursor:pointer; top:1px;
}
.tab:hover { color:var(--ink); text-decoration:none; }
.tab.on { color:var(--green); background:var(--card); border-bottom:1px solid var(--card); z-index:2; }
.tab .badge { position:absolute; top:-6px; right:-4px; }

/* ─── §3.3.1 Module box ─── */
.mod {
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  overflow:hidden;
}
.mod-h {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 12px; border-bottom:1px solid var(--line);
  background:linear-gradient(rgba(255,255,255,.5), var(--panel));
  font:700 13px "Trebuchet MS", sans-serif; color:var(--ink);
}
[data-theme="midnight"] .mod-h { background:linear-gradient(rgba(255,255,255,.04), var(--panel)); }
.mod-h small, .mod-h .meta { font:400 10px Verdana; color:var(--link); display:flex; gap:8px; align-items:center; }
.mod-h .meta .lnk { font-weight:700; }
.mod-h .pencil { cursor:pointer; color:var(--muted); font-size:12px; }
.mod-b { padding:12px; display:flex; flex-direction:column; gap:10px; }

/* ─── §3.3.3/4 Buttons ─── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font:700 14px "Trebuchet MS", sans-serif; border-radius:16px;
  padding:9px 16px; border:1px solid transparent; text-align:center;
  transition:filter .12s; user-select:none;
}
.btn.cta { background:linear-gradient(var(--cta-hi), var(--cta)); color:#fff; }
.btn.cta:hover { filter:brightness(1.06); text-decoration:none; }
.btn.ghost { background:var(--card); border-color:var(--line); color:var(--link); }
.btn.ghost:hover { filter:brightness(.98); text-decoration:none; }
.btn.sm { font-size:12px; padding:6px 12px; border-radius:13px; }
.btn.block { width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; filter:none; }

/* ─── §3.3.5 Avatar ─── */
.ava {
  border-radius:8px; color:#fff; font-family:"Trebuchet MS", sans-serif; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex:none;
  background-size:cover; background-position:center;
}
.ava.s22 { width:22px; height:22px; font-size:9px; border-radius:6px; }
.ava.s34 { width:34px; height:34px; font-size:13px; }
.ava.s64 { width:64px; height:64px; font-size:24px; }
.profile-photo {
  width:100%; aspect-ratio:3/4; border-radius:8px;
  background:var(--card); padding:4px; border:1px solid var(--line);
}
.profile-photo .inner {
  width:100%; height:100%; border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font:700 40px "Trebuchet MS", sans-serif;
  background-size:cover; background-position:center;
}
/* schematic image placeholder (wireframe fidelity) */
.img {
  background:repeating-linear-gradient(45deg, color-mix(in srgb, var(--line) 55%, var(--card)) 0 6px, color-mix(in srgb, var(--panel) 80%, var(--card)) 6px 12px);
  border:1px solid var(--line); border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font:10px "Courier New", monospace; color:var(--muted); text-align:center;
}

/* ─── §3.3.6 Degrees strip ─── */
.degstrip {
  background:var(--green-tint); border:1px dashed var(--green); border-radius:8px;
  padding:9px 12px; font:12px/1.45 Verdana; color:var(--ink);
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
}
.degstrip a, .degstrip .name { color:var(--link); font-weight:700; }
.degstrip .arrow { color:var(--green); font-weight:700; }

/* ─── §3.3.7 Hit counter ─── */
.counter { display:inline-flex; gap:2px; vertical-align:middle; }
.counter span {
  font:700 15px "Courier New", monospace; background:var(--counter-bg); color:var(--counter-digit);
  padding:2px 4px; border-radius:2px; min-width:14px; text-align:center;
}
.counter.sm span { font-size:11px; padding:1px 3px; min-width:11px; }
.counter .flip { animation:flip .15s ease-out; }
@keyframes flip { 0%{transform:translateY(-40%);opacity:.3} 100%{transform:none;opacity:1} }

/* ─── §3.3.8 Online dot ─── */
.online { display:inline-flex; align-items:center; gap:5px; font:700 10px Verdana; color:var(--green); }
.online i { width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block; animation:pulse 2.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ─── §3.3.9 Dotted divider ─── */
.dvd { border-top:1px dotted var(--line); }

/* ─── §3.3.10 Theme pill ─── */
.chip {
  display:inline-flex; align-items:center; gap:6px;
  font:600 11px Verdana; padding:5px 11px; border-radius:13px;
  border:1px solid var(--line); background:var(--panel); color:var(--muted);
  white-space:nowrap; cursor:pointer;
}
.chip.on { background:var(--green-tint); border-color:var(--green); color:var(--green); }
.chip .swatch { width:10px; height:10px; border-radius:50%; flex:none; }
.pill-row { display:flex; gap:8px; flex-wrap:wrap; }

/* ─── §3.3.11 Toast ─── */
#toast-layer { position:fixed; left:0; right:0; bottom:24px; display:flex; flex-direction:column; align-items:center; gap:8px; z-index:200; pointer-events:none; }
.toast {
  background:var(--counter-bg); color:#fff;
  border-radius:8px; padding:10px 16px; font:700 12px "Trebuchet MS", sans-serif;
  box-shadow:0 4px 16px rgba(0,0,0,.25); animation:toast-in .2s ease-out;
}
@keyframes toast-in { from{transform:translateY(8px);opacity:0} to{transform:none;opacity:1} }

/* ─── §3.3.12 Form field ─── */
.field { display:flex; flex-direction:column; gap:4px; }
.field > input, .field > textarea, .field > select, .input {
  width:100%; background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:8px 12px; font:13px Verdana; color:var(--ink); outline:none;
}
.field > input:focus, .field > textarea:focus, .input:focus { border-color:var(--link); }
.field textarea { resize:vertical; min-height:80px; line-height:1.5; }
.field.err > input, .field.err > textarea { border-color:var(--cta); }
.err { font:700 11px Verdana; color:var(--cta); display:flex; gap:5px; align-items:baseline; }
.err::before { content:"▲"; }
.hint { font:11px Verdana; color:var(--muted); }
select.input { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 15px) center,calc(100% - 10px) center; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }

/* ─── §3.3.13 Wizard frame ─── */
.wizard { max-width:480px; margin:32px auto; }
.step { font:700 11px Verdana; color:var(--muted); letter-spacing:.04em; }

/* ─── §3.3.14 Empty state / lock ─── */
.empty { text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px 16px; }
.empty .big { font:700 15px "Trebuchet MS", sans-serif; color:var(--ink); }
.lock {
  background:var(--panel); border:1px dashed var(--line); border-radius:8px;
  padding:16px 12px; font:12px Verdana; color:var(--muted); text-align:center;
}

/* ─── coach strip / banner ─── */
.coach {
  background:var(--green-tint); border:1px solid var(--green); border-radius:8px;
  padding:11px 13px; font:12px/1.45 Verdana; color:var(--ink);
  display:flex; gap:10px; align-items:flex-start; justify-content:space-between;
}
.coach.plain { background:var(--panel); border-color:var(--line); }
.coach .x { cursor:pointer; color:var(--muted); flex:none; }
.banner {
  background:var(--green-tint); border:1px solid var(--green); border-radius:8px;
  padding:9px 13px; font:11px Verdana; color:var(--ink); text-align:center;
}

/* ─── secondary in-page tabs ─── */
.tabbar2 { display:flex; gap:6px; flex-wrap:wrap; }
.tab2 {
  font:700 12px "Trebuchet MS", sans-serif; padding:6px 12px; border-radius:13px;
  background:var(--panel); border:1px solid var(--line); color:var(--muted); cursor:pointer;
}
.tab2.on { background:var(--green-tint); border-color:var(--green); color:var(--green); }

/* ─── landing / centered auth column ─── */
.center-col { max-width:440px; margin:0 auto; padding:48px 16px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.center-col .wm.hero { font-size:48px; }

/* ─── status chips (testi status) ─── */
.status { font:600 10px Verdana; padding:2px 9px; border-radius:11px; border:1px solid var(--line); background:var(--panel); color:var(--muted); }
.status.published { background:var(--green-tint); border-color:var(--green); color:var(--green); }
.status.declined { border-color:var(--cta); color:var(--cta); }

/* ─── testimonial card ─── */
.testi { display:flex; flex-direction:column; gap:5px; padding:4px 0; }
.testi.featured { border-left:3px solid #C99A2E; padding-left:10px; margin-left:-2px; }
.testi .body { font:13px/1.55 Verdana; color:var(--ink); }
.testi .attr { font:11px Verdana; color:var(--muted); }
.testi.approving { animation:approve-flash .3s ease-out; }
@keyframes approve-flash { from{box-shadow:0 0 0 2px var(--green)} to{box-shadow:none} }

/* ─── grids ─── */
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.thumb { aspect-ratio:1; border-radius:6px; cursor:pointer; }
.thumb.add { border-style:dashed; flex-direction:column; gap:2px; font-size:11px; }

/* friend/person card */
.person-card { text-align:center; }
.person-card .mod-b { align-items:center; gap:6px; }

/* toggle switch */
.toggle { width:38px; height:22px; border-radius:11px; background:var(--line); position:relative; flex:none; cursor:pointer; transition:background .15s; border:none; }
.toggle .knob { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .15s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.toggle.on { background:var(--green); }
.toggle.on .knob { left:19px; }

/* radio audience dots */
.aud { display:flex; gap:8px; }
.aud .dot { width:18px; height:18px; border-radius:50%; border:1px solid var(--line); background:var(--card); cursor:pointer; }
.aud .dot.on { background:var(--green); border-color:var(--green); box-shadow:inset 0 0 0 2px var(--card); }

/* ─── modal / lightbox ─── */
.scrim { position:fixed; inset:0; background:rgba(16,24,28,.5); z-index:150; display:flex; align-items:flex-end; justify-content:center; }
@media (min-width:560px){ .scrim { align-items:center; } }
.modal { width:100%; max-width:480px; background:var(--card); border-radius:12px 12px 0 0; overflow:hidden; animation:sheet-up .22s ease-out; }
@media (min-width:560px){ .modal { border-radius:12px; margin:16px; } }
@keyframes sheet-up { from{transform:translateY(24px)} to{transform:none} }
.lightbox { position:fixed; inset:0; background:var(--counter-bg); z-index:160; display:flex; flex-direction:column; }
.lightbox .stage { flex:1; display:flex; align-items:center; justify-content:center; color:#93A6B1; position:relative; }
.lightbox .nav { position:absolute; top:50%; transform:translateY(-50%); font-size:28px; color:#fff; padding:12px; cursor:pointer; user-select:none; opacity:.8; }
.lightbox .nav.prev { left:4px; } .lightbox .nav.next { right:4px; }
.lightbox .lb-top { display:flex; justify-content:space-between; padding:12px 16px; color:#93A6B1; }
.lightbox .lb-top .x { color:#fff; cursor:pointer; font-size:16px; }
.lightbox .sheet { background:var(--card); border-radius:12px 12px 0 0; max-height:44vh; overflow:auto; }

/* progress bar (upload) */
.progress { height:6px; border-radius:3px; background:var(--line); overflow:hidden; }
.progress .fill { height:100%; background:var(--green); border-radius:3px; transition:width .2s; }

/* system screen */
.system { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; padding:24px; }

/* focus-visible accessibility (§7) */
:focus-visible { outline:2px solid var(--link); outline-offset:2px; border-radius:4px; }

/* reduced motion (§3.4) */
@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition:none !important; }
}
body.reduce-motion * { animation:none !important; transition:none !important; }

/* loading text (era-authentic, §3.4) */
.loading { color:var(--muted); font:13px Verdana; padding:24px; text-align:center; }

/* utility spacing */
.mt-auto { margin-top:auto; }
.sticky-actions { position:sticky; bottom:0; background:var(--card); border-top:1px solid var(--line); padding:12px; display:flex; gap:10px; margin:0 -12px -12px; }