/* ==========================================================================
   Mass Register - foundation
   Tokens, fonts, reset, type, and the small components every page shares.
   Colours live ONLY in this file.
   ========================================================================== */

/* Fonts are self-hosted so the app looks the same offline. */
@font-face { font-family: "Newsreader"; font-weight: 200 800; font-display: swap; src: url("../fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Newsreader"; font-weight: 200 800; font-display: swap; src: url("../fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 600; font-display: swap; src: url("../fonts/atkinson-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 600; font-display: swap; src: url("../fonts/atkinson-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  color-scheme: light;

  /* Whitewash walls, ink, wine (the sacrament), brass (the lamp) */
  --paper:     #EEF0EB;   /* page */
  --sheet:     #FAFBF8;   /* register pages, cards, sheets */
  --sheet-2:   #E5E9E1;   /* hover, pressed, quiet fills */
  --ink:       #17211D;
  --ink-2:     #55605A;   /* secondary text */
  --rule:      #D3D8CF;   /* hairlines */
  --rule-2:    #7E887E;   /* input borders, 3:1 */
  --wine:      #6A1B2B;   /* primary actions, active tab */
  --on-wine:   #FFFFFF;
  --margin:    #D9A8AF;   /* the ruled margin of the register (decorative) */
  --brass:     #B38B2D;   /* ribbon + highlight (decorative) */
  --done:      #25583E;   /* Celebrated */
  --done-bg:   #DCEBE0;
  --wait:      #7A4F00;   /* Pending */
  --wait-bg:   #F6E8C6;
  --danger:    #A4231B;
  --scrim:     rgb(16 24 20 / .5);
  --shadow:    0 -8px 30px rgb(16 24 20 / .14);
  --shadow-fab: 0 6px 18px rgb(16 24 20 / .28);
  --focus:     #6A1B2B;

  --font-ui:   "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", "Noto Sans Malayalam", sans-serif;
  --font-book: "Newsreader", "Iowan Old Style", Georgia, "Noto Serif Malayalam", serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 62px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:   #0E1411;
  --sheet:   #151D19;
  --sheet-2: #1E2823;
  --ink:     #E8EDE7;
  --ink-2:   #A3AEA6;
  --rule:    #28332D;
  --rule-2:  #667870;
  --wine:    #E8A3B0;
  --on-wine: #2A0C13;
  --margin:  #5B3039;
  --brass:   #D6B25E;
  --done:    #8FD0A5;
  --done-bg: #1E3326;
  --wait:    #E8C26F;
  --wait-bg: #3A2F17;
  --danger:  #FF9B90;
  --scrim:   rgb(0 0 0 / .62);
  --shadow:  0 -8px 30px rgb(0 0 0 / .5);
  --focus:   #E8C26F;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body { min-height: 100dvh; margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.5 var(--font-ui); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: var(--wine); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- type ---------- */
.book, h1, h2 { font-family: var(--font-book); font-weight: 600; letter-spacing: -.005em; font-optical-sizing: auto; }
h1 { font-size: clamp(1.75rem, 6vw, 2.25rem); line-height: 1.1; }
h2 { font-size: 1.375rem; line-height: 1.2; }
.sub { color: var(--ink-2); font-size: .9375rem; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: 0 1.25rem; border: 1px solid transparent; border-radius: 10px; background: var(--wine); color: var(--on-wine); font-weight: 600; text-decoration: none; transition: filter .12s, background .12s; }
.btn:active { filter: brightness(.9); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--quiet { background: transparent; border-color: var(--rule-2); color: var(--ink); }
.btn--quiet:active { background: var(--sheet-2); filter: none; }
.btn--danger { background: transparent; border-color: transparent; color: var(--danger); }
.btn--danger:active { background: var(--sheet-2); filter: none; }
.btn--block { width: 100%; }
.btn-text { display: inline-flex; align-items: center; gap: .375rem; min-height: 44px; padding: 0 .5rem; border: 0; background: none; color: var(--wine); font-weight: 600; }
.btn-text:active { opacity: .7; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--sheet); color: var(--ink); }
.icon-btn:active { background: var(--sheet-2); }

/* ---------- fields ---------- */
.field { display: grid; gap: .375rem; margin-bottom: 1rem; }
.field > label, .field-label { font-size: .9375rem; font-weight: 600; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; min-height: 48px; padding: .625rem .875rem; border: 1px solid var(--rule-2); border-radius: 8px; background: var(--sheet); color: var(--ink); font-size: 1rem; appearance: none; -webkit-appearance: none; }
select { padding-right: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
textarea { min-height: 96px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-2); opacity: .85; }
input[readonly] { background: var(--sheet-2); color: var(--ink-2); }
input:focus, select:focus, textarea:focus { border-color: var(--wine); outline: 2px solid var(--wine); outline-offset: 0; }
input[type="date"] { min-width: 0; }

.input-box { display: grid; gap: .375rem; margin-bottom: 1rem; }
.input-box > label { font-size: .9375rem; font-weight: 600; }
.password-box { display: grid; grid-template-columns: 1fr 48px; gap: .5rem; }
.togglePassword { display: grid; place-items: center; min-height: 48px; border: 1px solid var(--rule-2); border-radius: 8px; background: var(--sheet); color: var(--ink-2); }
.togglePassword:active { background: var(--sheet-2); }

/* Celebrated switch */
.switch { display: flex; align-items: center; gap: .75rem; min-height: 48px; font-weight: 600; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; flex: none; width: 48px; height: 28px; border-radius: 14px; background: var(--rule-2); transition: background .15s; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--sheet); transition: transform .15s; }
.switch input:checked + .switch-track { background: var(--done); }
.switch input:checked + .switch-track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Status chips */
.chip { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .625rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.chip--done { background: var(--done-bg); color: var(--done); }
.chip--wait { background: var(--wait-bg); color: var(--wait); }

/* ---------- toast ---------- */
#toast { position: fixed; z-index: 120; left: 50%; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px); width: max-content; max-width: min(420px, calc(100vw - 24px)); padding: .75rem 1rem; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: .9375rem; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity .18s, transform .18s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.error { background: var(--danger); color: var(--on-wine); }
:root[data-theme="dark"] #toast.error { color: #2A0C13; }
#toast.warning { background: var(--wait-bg); color: var(--wait); border: 1px solid var(--wait); }
body:not(.app) #toast { bottom: calc(24px + var(--safe-bottom)); }

/* ---------- in-app dialogs (utils.js) ---------- */
.app-dialog { width: min(420px, calc(100vw - 24px)); padding: 1.5rem; border: 1px solid var(--rule); border-radius: 14px; background: var(--sheet); color: var(--ink); box-shadow: var(--shadow); }
.app-dialog::backdrop { background: var(--scrim); }
.app-dialog h2 { margin-bottom: .375rem; font-size: 1.25rem; }
.app-dialog p { color: var(--ink-2); }
.app-dialog form { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.25rem; }
.app-dialog input { flex: 1 1 100%; }
.app-dialog button { flex: 1; min-height: 48px; padding: 0 1rem; border: 1px solid var(--rule-2); border-radius: 10px; background: transparent; font-weight: 600; }
.app-dialog button[value="cancel"] { order: -1; }
.app-dialog button[value="save"] { border-color: transparent; background: var(--wine); color: var(--on-wine); }
.app-dialog button[value="confirm"] { border-color: transparent; background: var(--danger); color: var(--on-wine); }
:root[data-theme="dark"] .app-dialog button[value="confirm"] { color: #2A0C13; }

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

html.no-scroll { overflow: hidden; }