/* app.css — THE ONE shared stylesheet for every ThaiTemptation page.
   Tokens + container + base + shared components live here ONCE. Pages link this and
   carry no per-page <style> token blocks, so nothing drifts. Loaded on top of the
   Tailwind (utility) layer; OKLCH tokens mirror DESIGN.md. */

:root{
  --canvas:0.185 0.013 72; --ink:0.185 0.013 72; --ink2:0.22 0.014 72;
  --panel:0.25 0.015 72; --panel2:0.30 0.016 72; --line:0.36 0.017 74;
  --text:0.965 0.008 85; --muted:0.785 0.015 78;
  --amber:0.80 0.16 82; --jade:0.78 0.12 165; --ember:0.64 0.21 25; --pink:0.74 0.20 356;
  color-scheme:dark; --site:1280px;
}
html[data-theme="light"]{
  --canvas:0.97 0.006 85; --ink:0.985 0.004 85; --ink2:0.955 0.008 83; --panel:1 0 85; --panel2:0.955 0.008 83;
  --line:0.87 0.012 82; --text:0.24 0.015 62; --muted:0.46 0.016 68; color-scheme:light;
}

/* ── base ── */
/* Always reserve the scrollbar gutter → pages with/without a scrollbar keep the SAME
   content width, so nothing shifts or differs from page to page. */
html{ scrollbar-gutter:stable; }
body{ font-family:"Manrope",sans-serif; background:oklch(var(--canvas)); }
.disp{ font-family:"Bodoni Moda",serif; line-height:1.02; }
.wrap{ max-width:var(--site); margin-inline:auto; padding-inline:20px; }
[hidden]{ display:none !important; }

/* ── theme-toggle icon swap (sun/moon) ── */
.theme-moon{ display:none; } .theme-sun{ display:inline-flex; }
html[data-theme="light"] .theme-sun{ display:none; } html[data-theme="light"] .theme-moon{ display:inline-flex; }

/* ── form fields (one look everywhere) ── */
.lbl{ display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:oklch(var(--muted)); margin-bottom:5px; }
.fld{ width:100%; border-radius:12px; border:1px solid oklch(var(--line)); background:oklch(var(--ink)); padding:11px 15px; color:oklch(var(--text)); outline:none; }
.fld:focus{ border-color:oklch(var(--amber)/.6); }

/* ── dashboard chrome (shared by the account/admin shell) ── */
.htab.on{ color:oklch(var(--amber)); border-color:oklch(var(--amber)); }
.no-scrollbar::-webkit-scrollbar{ display:none; } .no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
.vfilter{ border:1px solid oklch(var(--line)); border-radius:999px; padding:.4rem .85rem; font-size:.8rem; font-weight:700; color:oklch(var(--muted)); transition:all .15s; }
.vfilter:hover{ color:oklch(var(--text)); }
.vfilter.on{ background:oklch(var(--amber)); border-color:oklch(var(--amber)); color:oklch(var(--ink)); }
.vcard.on{ border-color:oklch(var(--amber)); box-shadow:inset 0 0 0 1px oklch(var(--amber)); }
.vpg{ min-width:34px; border:1px solid oklch(var(--line)); border-radius:8px; padding:.35rem .55rem; font-size:.8rem; font-weight:700; color:oklch(var(--muted)); transition:all .12s; }
.vpg:hover{ color:oklch(var(--text)); border-color:oklch(var(--amber)/.5); }
.vpg.on{ background:oklch(var(--amber)); border-color:oklch(var(--amber)); color:oklch(var(--ink)); }
.roleBtn{ border:1px solid oklch(var(--line)); color:oklch(var(--muted)); transition:all .15s; }
.roleBtn:hover{ color:oklch(var(--text)); }
.roleBtn.on{ background:oklch(var(--amber)); border-color:oklch(var(--amber)); color:oklch(var(--ink)); }