/* =====================================================================
   Phase 37 - "Ledger" design system (loaded LAST, after app.css and ui.css).
   Identity: a school notebook / ledger. Warm paper, ink text, ruled lines, serif headings,
   figures in tabular type, one accent colour per theme. Frontend only: no markup logic,
   no PHP, no database. Every colour comes from the tokens below, so themes (accent colour),
   light / dark / system and font pairs are switched with three attributes on <html>:
     data-theme="light|dark"   data-accent="indigo|forest|clay|teal|plum"   data-font="ledger|clean|reading"
   Printed forms and reports keep their own light paper styles (report.css, final-print.css, weekly-print.css).
   ===================================================================== */

/* ---------- tokens: light ---------- */
:root{
  color-scheme:light;
  --paper:#f6f8fc; --surface:#ffffff; --surface-2:#eef3fa; --line:#e7edf5; --line-2:#eef2f8;
  --text:#172b4d; --muted:#64748b; --ink:#172b4d; --ink-2:#2b4268;
  --accent:#2563eb; --accent-d:#174f85; --accent-soft:#e8f0ff; --accent-ink:#ffffff;
  --blue:var(--accent); --blue-d:var(--accent-d); --soft:var(--accent-soft); --saffron:#f59e0b; --muted-2:#94a3b8;
  --ok:#16a34a; --ok-bg:#e7f6ec; --warn:#b45309; --warn-bg:#fef3c7; --danger:#ef4444; --err-bg:#fdecec; --info:#0ea5e9; --info-bg:#e6f5fd;
  --side-bg:#ffffff; --side-text:#172b4d; --side-muted:#64748b; --side-hover:#eef3fa; --side-active:#e8f0ff;
  --panel:var(--surface); --radius:16px; --radius-s:12px; --shadow:0 1px 2px rgba(23,43,77,.04),0 6px 18px rgba(23,43,77,.06);
  --font-body:Inter,"Segoe UI","Nirmala UI","Noto Sans","Noto Sans Devanagari",system-ui,-apple-system,Arial,sans-serif;
  --font-head:Inter,"Segoe UI","Nirmala UI","Noto Sans","Noto Sans Devanagari",system-ui,-apple-system,Arial,sans-serif;
}

/* ---------- tokens: dark ---------- */
:root[data-theme="dark"]{
  color-scheme:dark; --shadow:none; --radius:16px; --radius-s:12px;
  --paper:#15171d; --surface:#1d2029; --surface-2:#232733; --line:#343947; --line-2:#2b303c;
  --text:#ece9e1; --muted:#a39f93; --ink:#ece9e1; --ink-2:#cfcabd;
  --accent:#8fb0ee; --accent-d:#b4cbf5; --accent-soft:#252d44; --accent-ink:#0f1522;
  --ok:#6fc293; --ok-bg:#1d2f26; --warn:#e5b95b; --warn-bg:#352c16; --danger:#ff8b80; --err-bg:#3a2220;
  --side-bg:#12141a; --side-text:#d4d0c4; --side-muted:#8d897d; --side-hover:#1d2029; --side-active:#252a38;
  --shadow:none;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){color-scheme:dark;
    --paper:#15171d; --surface:#1d2029; --surface-2:#232733; --line:#343947; --line-2:#2b303c;
    --text:#ece9e1; --muted:#a39f93; --ink:#ece9e1; --ink-2:#cfcabd;
    --accent:#8fb0ee; --accent-d:#b4cbf5; --accent-soft:#252d44; --accent-ink:#0f1522;
    --ok:#6fc293; --ok-bg:#1d2f26; --warn:#e5b95b; --warn-bg:#352c16; --danger:#ff8b80; --err-bg:#3a2220;
    --side-bg:#12141a; --side-text:#d4d0c4; --side-muted:#8d897d; --side-hover:#1d2029; --side-active:#252a38; --shadow:none}
}
/* ---------- accent themes (light, then dark) ---------- */
:root[data-accent="forest"]{--accent:#2f6b4f;--accent-d:#22513c;--accent-soft:#e2f0e8}
:root[data-accent="clay"]{--accent:#a4492c;--accent-d:#7f3720;--accent-soft:#f6e6df}
:root[data-accent="teal"]{--accent:#17707a;--accent-d:#0f565e;--accent-soft:#dff0f1}
:root[data-accent="plum"]{--accent:#7a3b7e;--accent-d:#5d2b60;--accent-soft:#f1e3f2}
:root[data-theme="dark"][data-accent="indigo"]{--accent:#8fb0ee;--accent-d:#b4cbf5;--accent-soft:#252d44}
:root[data-theme="dark"][data-accent="forest"]{--accent:#7fcaa0;--accent-d:#a6dcbd;--accent-soft:#1f3329}
:root[data-theme="dark"][data-accent="clay"]{--accent:#eb9a7e;--accent-d:#f3b9a3;--accent-soft:#3a2721}
:root[data-theme="dark"][data-accent="teal"]{--accent:#74c9d1;--accent-d:#9adce2;--accent-soft:#1c3336}
:root[data-theme="dark"][data-accent="plum"]{--accent:#d49bd8;--accent-d:#e4b9e7;--accent-soft:#33233a}
/* ---------- font pairs ---------- */
:root[data-font="clean"]{--font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Nirmala UI","Noto Sans","Noto Sans Devanagari",Arial,sans-serif;--font-head:system-ui,-apple-system,"Segoe UI",Roboto,"Nirmala UI","Noto Sans","Noto Sans Devanagari",Arial,sans-serif}
/* Ledger: serif headings. "serif" at the end makes a phone without Georgia use its own serif font, so the change is always visible. */
:root[data-font="ledger"]{--font-head:Georgia,"Noto Serif","Droid Serif","Times New Roman","Iowan Old Style","Nirmala UI",serif}
/* Easy reading: wider, roomier letters and bigger text. Verdana is not on most phones, so size and spacing do the work. */
:root[data-font="reading"]{--font-body:Verdana,"DejaVu Sans","Noto Sans","Nirmala UI","Noto Sans Devanagari",Tahoma,sans-serif;--font-head:Verdana,"DejaVu Sans","Noto Sans","Nirmala UI","Noto Sans Devanagari",Tahoma,sans-serif;font-size:17.5px}
:root[data-font="reading"] body{letter-spacing:.012em;word-spacing:.06em;line-height:1.65}

/* ---------- base ---------- */
html{font-size:15.5px}
body{background:var(--paper);color:var(--text);font-family:var(--font-body)}
h1,h2,h3,.page-head h1,.auth h1,.auth h2{font-family:var(--font-head);letter-spacing:0}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent-soft);color:var(--text)}
@media (prefers-reduced-motion:no-preference){
  .btn,a,input,select,textarea,.side nav a,.tabbar a,.hub-card,.task-card{transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
}

/* ---------- app shell: a ruled index down the left ---------- */
.side{background:var(--side-bg);color:var(--side-text);border-right:1px solid var(--line);box-shadow:none}
.brand{border-bottom:1px solid var(--line)}
.brand-mark{background:var(--accent);color:var(--accent-ink);border-radius:50%;font-family:var(--font-head);letter-spacing:.02em}
.brand strong{color:var(--text);font-family:var(--font-head);font-size:14.5px}
.brand small{color:var(--side-muted)}
.side nav a{color:var(--side-text);border-left:0;border-radius:var(--radius-s);padding:9px 12px;position:relative}
.side nav a:hover{background:var(--side-hover);color:var(--text)}
.side nav a[aria-current="page"]{background:var(--side-active);color:var(--text);font-weight:650;box-shadow:inset 0 0 0 1px var(--line)}
.side nav a[aria-current="page"]::before{content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:4px;border-radius:0 3px 3px 0;background:var(--accent)}
.nav-label,.nav-group{color:var(--side-muted);text-transform:uppercase;letter-spacing:.08em;font-size:11.5px}
.side-foot{border-top:1px solid var(--line);color:var(--side-text)}
.side-foot .who{color:var(--text)}
.side-foot .role{color:var(--side-muted)}
.side-foot a,.side-foot button{color:var(--side-text)}
.side-foot a:hover,.side-foot button:hover{color:var(--accent)}
.side-search input{background:var(--surface);border-color:var(--line);color:var(--text)}
main{max-width:1180px}
.page-head{border-bottom:2px solid var(--text);padding-bottom:14px;margin-bottom:26px}
.page-head h1{font-size:1.8rem;font-weight:700}
.crumb a{color:var(--muted)}

/* ---------- surfaces: sheets of paper with a ruled head ---------- */
.panel,.figure,.task-card,.guide,.guide-full,.hub-card,.tile,.figures{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important;box-shadow:var(--shadow)!important}
.panel>h2{font-family:var(--font-head);font-size:1.05rem;border-bottom:1px solid var(--line);background:var(--surface-2);border-radius:var(--radius) var(--radius) 0 0}
.figures{overflow:hidden}
.figure{border-radius:0!important;border:0!important;border-right:1px solid var(--line)!important;box-shadow:none!important}
.figure b{font-family:var(--font-head);color:var(--accent);font-weight:700}
a.hub-card:hover,a.hub-card:focus-visible,.task-card:hover{border-color:var(--accent)!important;background:var(--surface-2)!important}
.empty{color:var(--muted)}

/* ---------- tables: ledger rows ---------- */
table.data th,.rec-table th,.comp-table th,.matrix th{background:var(--surface-2);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:12px;border-bottom:2px solid var(--line)}
table.data td,.rec-table td,.comp-table td,.matrix td{border-top:1px solid var(--line-2);color:var(--text)}
table.data tbody tr:hover{background:var(--surface-2)}
table.data{background:var(--surface)}

/* ---------- forms ---------- */
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=search],input[type=number],input[type=date],input[type=time],input[type=url],input:not([type]),select,textarea{background:var(--surface);color:var(--text);border:1.5px solid var(--line);border-radius:var(--radius-s)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}
input:focus-visible,select:focus-visible,textarea:focus-visible,input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:3px solid var(--accent-soft);outline-offset:0}
input:disabled,select:disabled,textarea:disabled,input[readonly]{background:var(--surface-2);color:var(--muted)}
label{color:var(--text)}
.field-error,.invalid,.err{color:var(--danger)}
.pw-toggle{color:var(--accent);background:transparent}

/* ---------- buttons ---------- */
.btn{background:var(--surface);color:var(--text);border:1.5px solid var(--line);border-radius:var(--radius-s);box-shadow:0 2px 0 var(--line)}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn:active{box-shadow:none;transform:translateY(1px)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 2px 0 var(--accent-d)}
.btn-primary:hover{background:var(--accent-d);border-color:var(--accent-d);color:var(--accent-ink)}
.btn-danger{background:var(--surface);color:var(--danger);border-color:var(--danger);box-shadow:0 2px 0 var(--err-bg)}
.btn-danger:hover{background:var(--danger);color:var(--surface)}

/* ---------- messages, badges, chips, tabs ---------- */
.flash,.alert-card,.notice,.notice-ok{border-radius:var(--radius-s)}
.flash-success,.notice-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
.flash-warning{background:var(--warn-bg);color:var(--warn);border-color:var(--warn)}
.flash-error{background:var(--err-bg);color:var(--danger);border-color:var(--danger)}
.flash-info{background:var(--accent-soft);color:var(--text);border-color:var(--accent)}
.badge,.chip,.pill{background:var(--accent-soft);color:var(--accent-d);border-radius:999px}
.tabs a,.rp-tabs a{color:var(--muted)}
.tabs a[aria-current="page"],.tabs a.on,.rp-tabs a.on{color:var(--accent);border-color:var(--accent)}
.seg-btn{background:var(--surface);color:var(--text);border-color:var(--line)}
.guide,.help-box,.what-next,.how,.how-to{background:var(--surface-2)!important;color:var(--text)}
.pager a,.pager span{border-color:var(--line);color:var(--text);background:var(--surface)}

/* ---------- phone: top bar and bottom tab bar ---------- */
.topbar{background:var(--surface);color:var(--text);border-bottom:1px solid var(--line)}
.tabbar{background:var(--surface);border-top:1px solid var(--line)}
.tabbar a{color:var(--muted)}
.tabbar a[aria-current="page"]{color:var(--accent)}

/* ---------- login and password screens: split page with a ruled-paper panel ---------- */
.auth-side{background:repeating-linear-gradient(0deg,transparent 0,transparent 31px,rgba(255,255,255,.07) 31px,rgba(255,255,255,.07) 32px),#1d2433!important;color:#f3efe4;border-right:6px double rgba(255,255,255,.25)}
:root[data-theme="dark"] .auth-side{background:repeating-linear-gradient(0deg,transparent 0,transparent 31px,rgba(255,255,255,.05) 31px,rgba(255,255,255,.05) 32px),#101319!important;color:#ece9e1}
.auth-side h1{font-family:var(--font-head);font-size:2.2rem;line-height:1.15;font-weight:700;color:inherit}
.auth-side .tag,.auth-points li,.auth-foot{color:inherit;opacity:.88}
.auth-brand .brand-mark{background:#f3efe4;color:#1d2433}
.auth-main{background:var(--paper)}
.auth-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px 28px 22px;box-shadow:var(--shadow)}
.auth-box h2{font-size:1.5rem}
.auth-box .lead{color:var(--muted)}
.powered,.alt{color:var(--muted)}

/* ---------- paper previews stay white in dark mode (they are printed forms) ---------- */
:root[data-theme="dark"] .paper,:root[data-theme="dark"] .sheet.paper,:root[data-theme="dark"] .tform,:root[data-theme="dark"] .report-sheet{background:#fff;color:#111;color-scheme:light}
:root[data-theme="dark"] .paper *{border-color:revert-layer}
@media print{
  :root{--paper:#fff;--surface:#fff;--text:#000}
  .side,.topbar,.tabbar,.appearance-btn,.appearance-dialog{display:none!important}
}

/* ---------- appearance picker (button in the menu, dialog with choices) ---------- */
.appearance-btn{display:flex;align-items:center;gap:8px;width:100%;margin:2px 0 8px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;cursor:pointer;text-decoration:none}
.appearance-btn:hover{border-color:var(--accent);color:var(--accent)}
.appearance-btn .sw{width:14px;height:14px;border-radius:50%;background:var(--accent);flex:none;box-shadow:inset 0 0 0 2px var(--surface),0 0 0 1px var(--line)}
dialog.appearance-dialog{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--text);padding:0;max-width:440px;width:calc(100% - 32px);box-shadow:0 20px 60px rgba(0,0,0,.28)}
dialog.appearance-dialog::backdrop{background:rgba(15,18,28,.5)}
.appearance-dialog .ap-form{padding:20px 22px 18px}
.appearance-dialog h2{font-size:1.2rem;margin-bottom:4px}
.appearance-dialog .sub{color:var(--muted);font-size:13.5px;margin:0 0 14px}
.appearance-dialog fieldset{border:0;padding:0;margin:0 0 14px}
.appearance-dialog legend{font-weight:650;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:0;margin-bottom:8px}
.ap-row{display:flex;flex-wrap:wrap;gap:8px}
.ap-opt{position:relative}
.ap-opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.ap-opt span{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1.5px solid var(--line);border-radius:var(--radius-s);background:var(--surface);font-size:14px;min-height:42px}
.ap-opt input:checked+span{border-color:var(--accent);background:var(--accent-soft);font-weight:650}
.ap-opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.ap-dot{width:16px;height:16px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.ap-actions{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:6px}
.ap-note{font-size:12.5px;color:var(--muted);margin:10px 0 0}

/* ---------- dark mode: surfaces that app.css colours by hand ---------- */
:root[data-theme="dark"] .panel-body,:root[data-theme="dark"] .empty,:root[data-theme="dark"] .plain-box,:root[data-theme="dark"] .secret-box{background:transparent;color:var(--text)}
:root[data-theme="dark"] .secret-box{background:var(--surface-2);border-color:var(--line)}
:root[data-theme="dark"] .tag,:root[data-theme="dark"] .sub{color:var(--muted)}
:root[data-theme="dark"] code,:root[data-theme="dark"] pre,:root[data-theme="dark"] .mono{background:var(--surface-2);color:var(--text)}
:root[data-theme="dark"] hr{border-color:var(--line)}
:root[data-theme="dark"] .rubric-table td,:root[data-theme="dark"] .rubric-table th{border-color:var(--line)}
:root[data-theme="dark"] img{opacity:.92}

:root[data-theme="dark"] kbd,:root[data-theme="dark"] .fastbar kbd{background:var(--surface-2);color:var(--text);border-color:var(--line)}
:root[data-theme="dark"] .save-state{background:var(--surface-2);color:var(--muted)}
:root[data-theme="dark"] .save-ok{background:var(--ok-bg);color:var(--ok)}
:root[data-theme="dark"] .save-saving,:root[data-theme="dark"] .save-dirty{background:var(--warn-bg);color:var(--warn)}
:root[data-theme="dark"] .save-fail{background:var(--err-bg);color:var(--danger)}

.pl-level.is-on{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink)!important}
.btn-sm{background:var(--surface)}
.btn-primary.btn-sm{background:var(--accent)}

/* ---------- Phase 38: warm notice blocks and tags now follow the theme tokens ---------- */
.next-step,.notice,.alert-card{background:var(--warn-bg);border-color:var(--line)}
.next-step{border-left-color:var(--saffron)}
.pl-tag-before{background:var(--accent-soft);color:var(--accent-d)}
.suggest li.on,.suggest li:hover{background:var(--accent-soft)}
tr.has-missing{background:var(--warn-bg)}

/* ---------- Phase 39: fingerprint sign-in ---------- */
.passkey-box{margin-top:14px}
.passkey-or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin-bottom:10px}
.passkey-or:before,.passkey-or:after{content:"";flex:1;border-top:1px solid var(--line)}
.passkey-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px}
.passkey-btn .i{width:20px;height:20px}
.pk-list{list-style:none;margin:0 0 6px;padding:0}
.pk-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}
.pk-list form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pk-list input{max-width:170px}
[hidden]{display:none!important}