/* DeskMate theme: the landing page design system applied across the website (see DESIGN.md).
   Loaded after each page's own styles. It remaps the shared colour tokens, then restyles the shared components.
   Screen only, so printed papers keep their exam look. */
:root{
  --paper:#F7F5F0;--sheet:#FFFFFF;--grid:#EFEBE3;--ink:#0F1A2E;--muted:#667085;--rule:#E4DFD5;
  --red:#C8392B;--red-soft:#FBE9E6;--blue:#2C4A86;--blue-soft:#EFEBE3;--ok:#1F7A4D;--ok-soft:#E3F2EA;--amber:#8A5A00;--amber-soft:#F7EBCB;
  --ink2:#38425A;--line:#E4DFD5;--sunk:#EFEBE3;--accent:#C8392B;--accent-ink:#FFFFFF;--hl:#F7E8A6;--band:#0F1A2E;--band-ink:#F7F5F0;
  --r-sm:10px;--r:12px;--r-lg:20px;
  --shadow:0 1px 2px rgba(15,26,46,.05),0 10px 30px rgba(15,26,46,.07);--shadow-lg:0 2px 4px rgba(15,26,46,.06),0 24px 60px rgba(15,26,46,.12);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0B111C;--sheet:#121A28;--grid:#0E1522;--ink:#EEF1F6;--muted:#8D97AA;--rule:#243047;
  --red:#FF6A57;--red-soft:#3A1915;--blue:#9DB4E8;--blue-soft:#1A2436;--ok:#4CC98A;--ok-soft:#12301F;--amber:#F0B44C;--amber-soft:#3A2C10;
  --ink2:#C3CAD7;--line:#243047;--sunk:#0E1522;--accent:#FF6A57;--accent-ink:#1A0603;--hl:#5B4E1A;--band:#050912;--band-ink:#EEF1F6;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);--shadow-lg:0 2px 4px rgba(0,0,0,.35),0 24px 60px rgba(0,0,0,.5);color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0B111C;--sheet:#121A28;--grid:#0E1522;--ink:#EEF1F6;--muted:#8D97AA;--rule:#243047;
  --red:#FF6A57;--red-soft:#3A1915;--blue:#9DB4E8;--blue-soft:#1A2436;--ok:#4CC98A;--ok-soft:#12301F;--amber:#F0B44C;--amber-soft:#3A2C10;
  --ink2:#C3CAD7;--line:#243047;--sunk:#0E1522;--accent:#FF6A57;--accent-ink:#1A0603;--hl:#5B4E1A;--band:#050912;--band-ink:#EEF1F6;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);--shadow-lg:0 2px 4px rgba(0,0,0,.35),0 24px 60px rgba(0,0,0,.5);color-scheme:dark}

@media screen{
/* ---------- base ---------- */
body{background:var(--paper)!important;background-image:none!important;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:1160px;padding-top:28px}
a{color:var(--ink);text-decoration-color:color-mix(in srgb,var(--accent) 50%,transparent);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{text-decoration-color:var(--accent)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent)!important;outline-offset:2px}
h1,h2,h3{letter-spacing:-.015em}
h1{font-weight:650;letter-spacing:-.025em;line-height:1.06}
.eyebrow{color:var(--accent);letter-spacing:.14em;font-size:12.5px}
.sub,.lead{color:var(--ink2)}

/* ---------- site header ---------- */
.mbnav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 84%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.mbnav{display:block!important}.mbnav .in{box-sizing:border-box;width:100%;justify-content:flex-start!important;max-width:1192px;margin:0 auto;display:flex;align-items:center;gap:22px;height:60px;padding:0 max(16px,env(safe-area-inset-left,0px))}
.mbnav .brand{display:flex;align-items:center;gap:10px;font:650 17px/1 "Literata",Georgia,serif;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.mbnav .dmlogo{width:32px;height:32px;flex:none}.mbnav .bname{display:flex;flex-direction:column;gap:3px}.mbnav .bname b{font:650 18px/1 "Literata",Georgia,serif;letter-spacing:-.015em}.mbnav .bname small{font:500 11px/1 "IBM Plex Sans",system-ui,sans-serif;color:var(--muted,#5b6475);letter-spacing:.01em}
@media (prefers-color-scheme:dark){.mbnav .dmlogo rect:first-child{fill:#EEF1F6}.mbnav .dmlogo rect:not(:first-child){fill:#0B111C}}
.mbnav nav{display:flex;gap:20px;margin-left:auto;font-size:14.5px}.mbnav nav a{text-decoration:none;color:var(--ink2)}.mbnav nav a:hover,.mbnav nav a[aria-current]{color:var(--ink)}
.mbnav .go{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:14px;text-decoration:none;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 28%,transparent)}
@media (max-width:560px){.mbnav .bname small{display:none}.mbnav nav{gap:14px;font-size:14px}.mbnav .go{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--sheet);color:var(--ink);font-weight:600;font-size:14.5px;line-height:1.2;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s,background .15s}
.btn:hover{background:var(--sheet);border-color:var(--ink2)}
.btn.solid{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--ink);opacity:1;transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.red{border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent);background:var(--sheet)}.btn.red:hover{background:var(--red-soft)}
.btn.msbtn,.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 28%,transparent)}
.btn.msbtn:hover,.btn.primary:hover{background:var(--accent);transform:translateY(-1px)}
.btn.sm{min-height:30px;padding:0 10px;font-size:13px;border-radius:8px}
.btn[disabled]{transform:none!important;box-shadow:none!important}
button{border-radius:var(--r-sm)}

/* ---------- cards and surfaces ---------- */
.panel,.setcard,.sheet,.ledger,.trow,details.week,.tlist,.glist,.spot,.ppyear,.lstep,.lhero,.cwcard,.fcard,.skilllist,.fslearn,.sum,.gdc,.formulas,.tryit,.ppnote,.fsheet,.curtab,.card,.tile,.prog,.course,.pcard,.stat,.box{border-radius:var(--r-lg);border-color:var(--line)}
.panel,.setcard,.sheet,.ledger,.lhero,.fcard,.lstep,.spot,.card,.tile,.pcard{box-shadow:var(--shadow)}
.panel{padding:24px}
.setcard{overflow:hidden;margin-bottom:18px}
.sheet{box-shadow:var(--shadow-lg)}
.model,.sketchbox,.fmbox,.notice,.focus,.preview{border-radius:var(--r)}
.ltile{border-radius:14px;border-color:var(--line);transition:transform .15s,box-shadow .15s}.ltile:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.lhero,.cwcard{border-top-color:var(--accent)}
.ppnote{border-left-color:var(--accent)}
.secband{background:var(--band);color:var(--band-ink);border-radius:var(--r);padding:12px 18px}
.pill,.chip,.cltag,.tg{border-radius:999px}

/* ---------- page header and tabs ---------- */
.masthead{border-bottom:1px solid var(--line);padding-bottom:20px}
.back{font-size:14px;color:var(--ink2);text-decoration:none}.back:hover{color:var(--ink)}
.tabsnav{gap:4px;margin-top:18px;padding:4px;border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:999px;background:var(--sunk)}
.tabsnav a{padding:8px 14px;border-radius:999px;border-bottom:0;margin-bottom:0;font-size:14px;color:var(--ink2)}
.tabsnav a:hover{color:var(--ink);background:color-mix(in srgb,var(--sheet) 60%,transparent)}
.tabsnav a[aria-current]{background:var(--sheet);color:var(--ink);box-shadow:0 1px 2px rgba(15,26,46,.08),0 2px 8px rgba(15,26,46,.06)}
.langbar{margin-bottom:10px}
.lsel,.zs,.dswitch{border-color:var(--line);background:var(--sheet)}
.lsel button[aria-pressed=true],.zs button[aria-pressed=true],.dswitch button[aria-pressed=true]{background:var(--ink);color:var(--paper)}

/* ---------- forms ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{border-radius:var(--r-sm)!important;border-color:var(--line)!important;background:var(--sheet);color:var(--ink)}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,select:focus,textarea:focus{border-color:var(--ink2)!important}
input[type=checkbox],input[type=radio]{accent-color:var(--ink)}

/* ---------- tables ---------- */
.cltable th,.curtab th,table th{color:var(--ink2);font-weight:600}

/* ---------- account bar and locks ---------- */
.acct{background:var(--sheet);border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 16px;box-shadow:var(--shadow);width:fit-content;margin-left:auto;max-width:100%}
.acct .btn{min-height:34px}
.lkcard{border-radius:var(--r-lg)}
.lkplan{border-radius:14px;border-color:var(--line)}.lkplan.best{border:2px solid var(--accent)}.lkplan b{font-family:"Literata",Georgia,serif;letter-spacing:-.02em}
.lkplan:hover{background:var(--sheet);box-shadow:var(--shadow);transform:translateY(-1px)}

/* ---------- topic tracker ---------- */
.tlist:has(> .trow){border:0;background:none;box-shadow:none;border-radius:0}
.trow{border-radius:16px}.trow:hover{border-color:var(--ink2)}

/* ---------- hub and IGCSE landing ---------- */
.mbnav ~ .wrap > .top{display:none}
.mbnav .in > a.brand{font:650 17px/1 "Literata",Georgia,serif;align-items:center}
.mbnav .brand .bname{font:inherit;color:inherit;text-transform:none}
.prog,.prog.live,.course,.year,.auth{border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.prog.live{border:2px solid var(--ink)}
.year{transition:transform .15s,box-shadow .15s}.year:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.crumb{font-size:14px;color:var(--ink2)}

.tiles{gap:16px;margin:16px 0}
.wrap{row-gap:16px}

/* ---------- footer ---------- */
footer{color:var(--muted)}
}