/* Ligandra companion theme (2026-10, "with cheerful accents"). Every colour below the theme blocks comes from these
   variables. A calm warm base (about 80%) and cheerful accents (about 20%): coral for the main call to action (its text
   is --on-coral, dark ink, never white), sun for XP, stars and streak, mint for a correct answer, and one soft tint per
   module (cardiovascular cardio, cns lavender, endocrine sun, antimicrobials mint, gi peach, respiratory sky, autonomic
   primary). Light is the default; dark follows the system (prefers-color-scheme) unless the page sets
   <html data-theme="light">, and <html data-theme="dark"> forces dark. tools/contrast.py checks every text pair used
   (>= 4.5:1) and every UI-icon pair (>= 3:1) in both themes; the build stops below those ratios. */
:root{
  color-scheme:light;
  /* base */
  --bg:#FBF7F2;--card:#FFFFFF;--soft:#F3EEE7;--line:#E6DFD5;--panel:#FCFAF7;
  --ink:#033E57;--ink-2:#4A6572;--label:#55666E;
  --page:var(--bg);--surface:var(--card);--muted:var(--ink-2);
  --primary:#277891;--primary-ink:#1C6780;--primary-line:#A9CCD8;--primary-soft:#E3EFF3;
  --on-primary:#FFFFFF;  /* text on a filled primary button: 5.0:1 */
  /* the main call to action: coral fill, dark ink text (4.7:1) */
  --coral:#F18877;--coral-soft:#FCE9E2;--coral-line:#F3B5A9;--on-coral:#033E57;
  /* rewards and categories */
  --sun:#FFC94D;--sun-soft:#FFF3D6;--mint:#3CC9A0;--mint-soft:#DDF5EE;--on-sun:#033E57;--on-mint:#033E57;
  --lavender:#9B8CF2;--sky:#6CB8F0;--peach:#F4A261;--cardio:#F07167;
  /* a wrong pick, an inhibition mark */
  --accent:#B9473A;--accent-text:#9E3B2A;
  --warn-bg:#FBF6EF;--warn-label:#96601F;--warn-ink:#5F3D13;
  /* games: right / variable / wrong (Coverage Sort, Anticoagulant Match, True or False) */
  --good:#1F7A4D;--good-soft:#E6F3EC;--good-line:#9CCDB3;--mid:#8A5A10;--mid-soft:#FBF3E4;--mid-line:#E3C38E;--bad:#B23A3A;--bad-soft:#FBEAEA;--bad-line:#E4A9A9;
  --shadow-color:rgba(3,62,87,.08);--scrim:rgba(3,62,87,.45);
  /* navigation (desktop rail and the phone tab bar): the card colour, the active item on --primary-soft */
  --nav-bg:#FFFFFF;--nav-bg-2:#FFFFFF;--nav-line:#E6DFD5;--nav-ink:#033E57;--nav-muted:#4A6572;
  --nav-hover:#F3EEE7;--nav-active:#E3EFF3;--nav-active-ink:#033E57;--nav-rail:#277891;
  /* module colours: tiles are a soft tint of these (--tile-*) with --ink text and icon */
  --mod-autonomic:#277891;--mod-cardiovascular:#F07167;--mod-cns:#9B8CF2;
  --mod-endocrine:#FFC94D;--mod-respiratory:#6CB8F0;--mod-antimicrobials:#3CC9A0;--mod-gi:#F4A261;
  --modnav-autonomic:#277891;--modnav-cardiovascular:#F07167;--modnav-cns:#9B8CF2;
  --modnav-endocrine:#FFC94D;--modnav-respiratory:#6CB8F0;--modnav-antimicrobials:#3CC9A0;--modnav-gi:#F4A261;
  /* 2D structures are black-on-white drawings: multiply drops the white in light mode */
  --structure-filter:none;--structure-blend:multiply;
  /* image mechanism templates: the illustrations have white backgrounds, so the figure is a white card with dark ink
     in BOTH themes. Deliberately not overridden in the dark blocks. */
  --fig-card:#FFFFFF;--fig-ink:#033E57;--fig-badge:#277891;--fig-badge-ink:#FFFFFF;--fig-line:#E6DFD5;
  /* visual cases: clinical images sit on a fixed neutral frame in BOTH themes and are never filtered or tinted */
  --case-frame:#E7E6E1;
  /* schematic ECG (js/ecg.js): ECG paper, its 1 mm and 5 mm lines, the trace */
  --ecg-paper:#FFF7F5;--ecg-minor:#F6D3CC;--ecg-major:#E9A99C;--ecg-trace:#1B1B1B;
  /* ECG strips (js/visuals.js): the blue of their interval brackets; the other --v-* follow the tokens below */
  --v-blue:#1A74D6;
  /* Challenge a friend: the other player (amber), and the WhatsApp button (white text >= 5.3:1, same in both themes) */
  --rival:#8A4B14;--rival-soft:#F8EEE3;--rival-line:#E2C3A3;--wa:#187A47;--on-wa:#FFFFFF;
  /* shape */
  --r:20px;--r-btn:14px;--btn-h:48px;
  --tap:44px; /* minimum touch target */
  /* motion (js/celebrate.js, js/mascot.js): transform and opacity only */
  --motion-fast:150ms;--motion-base:320ms;--motion-slow:700ms;--ease-out:cubic-bezier(.2,.9,.3,1);--ease-pop:cubic-bezier(.2,.9,.3,1.2);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0B2230;--card:#123241;--soft:#0F2A38;--line:#22495A;--panel:#15394A;
    --ink:#EAF4F7;--ink-2:#A8C1CB;--label:#9FB9C4;
    --primary:#6BC0D8;--primary-ink:#6BC0D8;--primary-line:#2F6577;--primary-soft:#17404F;
    --on-primary:#0B2230;
    --coral:#F59A8A;--coral-soft:#3B2A2A;--coral-line:#7A4A44;--on-coral:#0B2230;
    --sun:#FFD166;--sun-soft:#3A3220;--mint:#5DD8B2;--mint-soft:#163D36;--on-sun:#0B2230;--on-mint:#0B2230;
    --lavender:#B3A8F7;--sky:#8CC9F4;--peach:#F7B888;--cardio:#F48A80;
    --accent:#F08A72;--accent-text:#F5A592;
    --warn-bg:#2A2118;--warn-label:#D6A25E;--warn-ink:#E8D2B4;
    --good:#5CC48E;--good-soft:#16302A;--good-line:#2F6B50;--mid:#E2B060;--mid-soft:#2E2617;--mid-line:#6E5527;--bad:#EE8A8A;--bad-soft:#341D20;--bad-line:#7A3A3E;
    --shadow-color:rgba(0,0,0,.35);--scrim:rgba(0,0,0,.6);
    --nav-bg:#0E2A38;--nav-bg-2:#0E2A38;--nav-line:#22495A;--nav-ink:#EAF4F7;--nav-muted:#A8C1CB;
    --nav-hover:#15394A;--nav-active:#17404F;--nav-active-ink:#FFFFFF;--nav-rail:#6BC0D8;
    --mod-autonomic:#6BC0D8;--mod-cardiovascular:#F48A80;--mod-cns:#B3A8F7;
    --mod-endocrine:#FFD166;--mod-respiratory:#8CC9F4;--mod-antimicrobials:#5DD8B2;--mod-gi:#F7B888;
    --modnav-autonomic:#6BC0D8;--modnav-cardiovascular:#F48A80;--modnav-cns:#B3A8F7;
    --modnav-endocrine:#FFD166;--modnav-respiratory:#8CC9F4;--modnav-antimicrobials:#5DD8B2;--modnav-gi:#F7B888;
    --structure-filter:invert(1) hue-rotate(180deg);--structure-blend:screen;
    --ecg-paper:#1E1A1C;--ecg-minor:#3A2A2C;--ecg-major:#5C3A3C;--ecg-trace:#F2ECE6;--v-blue:#7DB8F2;
    --rival:#E3A468;--rival-soft:#33261A;--rival-line:#6E4E30;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B2230;--card:#123241;--soft:#0F2A38;--line:#22495A;--panel:#15394A;
  --ink:#EAF4F7;--ink-2:#A8C1CB;--label:#9FB9C4;
  --primary:#6BC0D8;--primary-ink:#6BC0D8;--primary-line:#2F6577;--primary-soft:#17404F;
  --on-primary:#0B2230;
  --coral:#F59A8A;--coral-soft:#3B2A2A;--coral-line:#7A4A44;--on-coral:#0B2230;
  --sun:#FFD166;--sun-soft:#3A3220;--mint:#5DD8B2;--mint-soft:#163D36;--on-sun:#0B2230;--on-mint:#0B2230;
  --lavender:#B3A8F7;--sky:#8CC9F4;--peach:#F7B888;--cardio:#F48A80;
  --accent:#F08A72;--accent-text:#F5A592;
  --warn-bg:#2A2118;--warn-label:#D6A25E;--warn-ink:#E8D2B4;
  --good:#5CC48E;--good-soft:#16302A;--good-line:#2F6B50;--mid:#E2B060;--mid-soft:#2E2617;--mid-line:#6E5527;--bad:#EE8A8A;--bad-soft:#341D20;--bad-line:#7A3A3E;
  --shadow-color:rgba(0,0,0,.35);--scrim:rgba(0,0,0,.6);
  --nav-bg:#0E2A38;--nav-bg-2:#0E2A38;--nav-line:#22495A;--nav-ink:#EAF4F7;--nav-muted:#A8C1CB;
  --nav-hover:#15394A;--nav-active:#17404F;--nav-active-ink:#FFFFFF;--nav-rail:#6BC0D8;
  --mod-autonomic:#6BC0D8;--mod-cardiovascular:#F48A80;--mod-cns:#B3A8F7;
  --mod-endocrine:#FFD166;--mod-respiratory:#8CC9F4;--mod-antimicrobials:#5DD8B2;--mod-gi:#F7B888;
  --modnav-autonomic:#6BC0D8;--modnav-cardiovascular:#F48A80;--modnav-cns:#B3A8F7;
  --modnav-endocrine:#FFD166;--modnav-respiratory:#8CC9F4;--modnav-antimicrobials:#5DD8B2;--modnav-gi:#F7B888;
  --structure-filter:invert(1) hue-rotate(180deg);--structure-blend:screen;
  --ecg-paper:#1E1A1C;--ecg-minor:#3A2A2C;--ecg-major:#5C3A3C;--ecg-trace:#F2ECE6;--v-blue:#7DB8F2;
  --rival:#E3A468;--rival-soft:#33261A;--rival-line:#6E4E30;
}
/* derived tints (follow the theme automatically) */
:root{
  --shadow:0 1px 3px var(--shadow-color),0 8px 22px var(--shadow-color);
  --shadow-soft:0 1px 2px var(--shadow-color),0 4px 12px var(--shadow-color);
  --focus:color-mix(in srgb,var(--primary) 45%,transparent);
  --accent-soft:color-mix(in srgb,var(--accent) 10%,var(--surface));
  --accent-line:color-mix(in srgb,var(--accent) 40%,var(--surface));
  --warn-line:color-mix(in srgb,var(--warn-label) 30%,var(--surface));
  /* module tiles: a soft tint of the module colour on the card (light and dark) */
  --tile-autonomic:color-mix(in srgb,var(--mod-autonomic) 18%,var(--card));
  --tile-cardiovascular:color-mix(in srgb,var(--mod-cardiovascular) 22%,var(--card));
  --tile-cns:color-mix(in srgb,var(--mod-cns) 22%,var(--card));
  --tile-endocrine:color-mix(in srgb,var(--mod-endocrine) 30%,var(--card));
  --tile-antimicrobials:color-mix(in srgb,var(--mod-antimicrobials) 22%,var(--card));
  --tile-gi:color-mix(in srgb,var(--mod-gi) 24%,var(--card));
  --tile-respiratory:color-mix(in srgb,var(--mod-respiratory) 24%,var(--card));
  /* Practice & Research subjects (js/topics.js): one tint for both, from the primary */
  --mod-subj:var(--primary);--tile-subj:color-mix(in srgb,var(--primary) 16%,var(--card));
  /* games that are about no one module ("General & special populations") */
  --tile-general:color-mix(in srgb,var(--primary) 16%,var(--card));
}
/* Fonts (vendored in vendor/fonts, SIL OFL; tools/build.py inlines them into the dist file): Nunito for Latin (one
   variable woff2, used at 500 and 800) and Tajawal for Arabic (500 and 800, Arabic letters only, so English inside
   Arabic text stays in Nunito). Anything neither covers (Greek letters, sub- and superscripts) uses the system font. */
@font-face{font-family:Nunito;font-style:normal;font-weight:500;font-display:swap;src:url("vendor/fonts/nunito-latin.ba344451ea.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Nunito;font-style:normal;font-weight:800;font-display:swap;src:url("vendor/fonts/nunito-latin.ba344451ea.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Tajawal;font-style:normal;font-weight:500;font-display:swap;src:url("vendor/fonts/tajawal-arabic-500.4255019c1c.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Tajawal;font-style:normal;font-weight:800;font-display:swap;src:url("vendor/fonts/tajawal-arabic-800.5fa525682b.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
/* Line icons (js/icons.js): one sprite, currentColor, stroke 1.75 (1.5 from 32 px); chevrons, arrows and route mirror in RTL */
.ic{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.25em}
.ic-lg{stroke-width:1.5}
[dir=rtl] .ic-dir{transform:scaleX(-1)}
/* Breakpoints: phone <600 · tablet portrait 600–1023 · landscape/desktop >=1024 (3 panels per row from 1200) */
*{box-sizing:border-box}
html,body{margin:0;background:var(--page);font-family:Nunito,Tajawal,"Segoe UI",Tahoma,Arial,sans-serif;color:var(--ink);font-size:14px}
body{min-height:100vh}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
img{max-width:100%}
[hidden]{display:none!important}
.app{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}
.sidebar{background-color:var(--nav-bg);background-image:linear-gradient(180deg,var(--nav-bg),var(--nav-bg-2));color:var(--nav-ink);border-inline-end:1px solid var(--nav-line);position:sticky;top:0;height:100vh;overflow:auto;z-index:50}
.brand{height:68px;display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--nav-line)}
.logo{width:38px;height:38px;border-radius:11px;background:var(--nav-rail);color:var(--nav-bg);display:grid;place-items:center;font-weight:900;font-size:18px}
.brand h1{font-size:18px;margin:0}.brand p{font-size:12px;margin:2px 0 0;color:var(--nav-muted)}
.nav{padding:12px 8px}.navItem{width:100%;min-height:var(--tap);border:0;background:transparent;color:var(--nav-ink);padding:10px 11px;border-radius:9px;margin:2px 0;text-align:start;font-size:12px;display:flex;align-items:center;gap:8px}
.navItem:hover{background:var(--nav-hover)}.navItem.active{background:var(--nav-active);box-shadow:inset 3px 0 0 var(--nav-rail);color:var(--nav-active-ink)}
/* module colour where the module itself is the subject: the sidebar icon, the case filter chips */
/* module icon in a soft tile of the module colour (--mt = --tile-<module>), ink line icon */
.modIc{flex:none;width:40px;height:40px;border-radius:12px;background:var(--mt,var(--primary-soft));color:var(--ink);display:grid;place-items:center}.modIc .ic{width:22px;height:22px}
.sidebar :focus-visible{outline-color:var(--nav-rail)}
.navTitle{font-size:12px;color:var(--nav-muted);padding:16px 11px 6px;letter-spacing:.08em;text-transform:uppercase}
.drawerBackdrop{display:none}
.main{min-width:0}
.topbar{height:68px;background:var(--soft);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px;padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right));position:sticky;top:0;z-index:30}
.searchWrap{position:relative;width:min(570px,56vw)}
.search{width:100%;height:var(--tap);border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);padding:0 14px;font-size:12px}
.search::placeholder{color:var(--muted)}
.searchResults{position:absolute;top:50px;left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:11px;box-shadow:0 15px 35px var(--shadow-color);max-height:320px;overflow:auto;z-index:80;padding:6px}
.searchResult{width:100%;min-height:var(--tap);border:0;background:var(--surface);border-radius:8px;padding:9px 10px;text-align:start;display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--ink);font-size:12px}
.searchResult:hover,.searchResult:focus-visible{background:var(--primary-soft)}.searchResult small{font-size:12px;color:var(--muted)}
.topActions{display:flex;gap:8px;align-items:center}.menuBtn{min-height:var(--tap);min-width:var(--tap);border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 13px;font-size:12px;font-weight:800;color:var(--ink)}
.menuBtn{display:none;border-radius:9px;font-size:17px;padding:6px 10px}
.canvas{max-width:1380px;margin:0 auto;padding:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.stateCard{min-height:58vh;display:grid;place-items:center;text-align:center;padding:30px}.stateIcon{width:64px;height:64px;border-radius:18px;background:var(--primary-soft);color:var(--primary-ink);display:grid;place-items:center;font-size:28px;margin:0 auto 12px}.stateCard h2{font-size:24px;margin:0 0 6px}.stateCard p{font-size:13px;color:var(--muted);margin:0}
.lesson{}
.drugHeader{display:block;overflow:hidden;position:relative}
.accent{position:absolute;inset-block:0;inset-inline-start:0;width:8px;background:var(--primary)}
.identity{padding:12px 16px 12px 24px;display:flex;flex-direction:column;justify-content:center;min-width:0}.kicker{font-size:12px;letter-spacing:.05em;font-weight:900;color:var(--label)}.nameLine{display:flex;align-items:center;gap:10px;margin-top:5px}.drugIcon{width:44px;height:44px;border-radius:11px;background:var(--primary-soft);display:grid;place-items:center;font-size:23px;flex:none}.drugName{font-size:27px;font-weight:850;line-height:1.05}.nameRow{display:flex;align-items:center;gap:4px}.sayBtn{flex:none;width:var(--tap);height:var(--tap);margin-block:-11px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--primary-ink);padding:0}.sayBtn:hover{background:var(--primary-soft)}.drugSub{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.4}.tags{display:flex;gap:5px;flex-wrap:wrap}.tag{font-size:12px;font-weight:750;padding:5px 7px;border-radius:8px;background:var(--primary-soft);border:1px solid var(--primary-line);color:var(--primary-ink)}

/* Overview section: tags, indications, interactions, and the structure as a small item beside the formula */
.overviewPanel{display:grid;gap:10px;margin-top:10px}
.overviewFacts{display:grid;grid-template-columns:1fr 1fr;gap:9px}.fact{border:1px solid var(--line);border-radius:11px;padding:11px;background:var(--panel);min-width:0}.fact.ind{background:var(--primary-soft);border-color:var(--primary-line)}.fact.int{background:var(--warn-bg);border-color:var(--warn-line)}.fact h4{font-size:12px;margin:0 0 6px}.fact p{font-size:12px;line-height:1.45;margin:0;color:var(--ink)}.fact.int h4{color:var(--warn-label)}.fact.int p{color:var(--warn-ink)}
.chem{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.chemLabel{font-size:12px;font-weight:800;color:var(--label);letter-spacing:.04em}.chem img{width:96px;height:44px;object-fit:contain;filter:var(--structure-filter);mix-blend-mode:var(--structure-blend)}.formula{font-size:12px;color:var(--muted);font-weight:800;white-space:nowrap}
.drugSelectorWrap{margin-top:10px;display:flex;align-items:center;gap:8px}.drugSelectorLabel{font-size:12px;font-weight:850;color:var(--ink);flex:none}.drugCount{font-weight:700;color:var(--muted);margin-inline-start:4px}.drugSelector{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 5px;scrollbar-width:thin;min-width:0;scroll-snap-type:x proximity;scroll-padding-inline:2px}.drugBtn{height:var(--tap);min-width:142px;flex:0 0 auto;scroll-snap-align:start;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:0 10px;display:flex;align-items:center;gap:8px;text-align:start;color:var(--ink)}.drugBtn[aria-pressed="true"]{border:2px solid color-mix(in srgb,var(--dot) 58%,var(--surface));background:color-mix(in srgb,var(--dot) 8%,var(--surface))}.dot{width:8px;height:25px;border-radius:6px;background:var(--dot);flex:none}.drugBtn strong{font-size:12px;display:block}.drugBtn small{font-size:12px;color:var(--muted);display:block;margin-top:1px}
/* the selector fades on the side that still has drugs to scroll to (mask colours only set opacity) */
.drugSelector.fadeEnd{-webkit-mask-image:linear-gradient(to right,var(--ink) calc(100% - 48px),transparent);mask-image:linear-gradient(to right,var(--ink) calc(100% - 48px),transparent)}
.drugSelector.fadeStart{-webkit-mask-image:linear-gradient(to left,var(--ink) calc(100% - 48px),transparent);mask-image:linear-gradient(to left,var(--ink) calc(100% - 48px),transparent)}
.drugSelector.fadeStart.fadeEnd{-webkit-mask-image:linear-gradient(to right,transparent,var(--ink) 48px,var(--ink) calc(100% - 48px),transparent);mask-image:linear-gradient(to right,transparent,var(--ink) 48px,var(--ink) calc(100% - 48px),transparent)}
[dir="rtl"] .drugSelector.fadeEnd{-webkit-mask-image:linear-gradient(to left,var(--ink) calc(100% - 48px),transparent);mask-image:linear-gradient(to left,var(--ink) calc(100% - 48px),transparent)}
[dir="rtl"] .drugSelector.fadeStart{-webkit-mask-image:linear-gradient(to right,var(--ink) calc(100% - 48px),transparent);mask-image:linear-gradient(to right,var(--ink) calc(100% - 48px),transparent)}
[dir="rtl"] .drugSelector.fadeStart.fadeEnd{-webkit-mask-image:linear-gradient(to right,transparent,var(--ink) 48px,var(--ink) calc(100% - 48px),transparent);mask-image:linear-gradient(to right,transparent,var(--ink) 48px,var(--ink) calc(100% - 48px),transparent)}
.emptyModule{margin-top:10px;padding:22px;text-align:center}.emptyModule h3{font-size:18px;margin:0 0 5px}.emptyModule p{font-size:12px;color:var(--muted);margin:0}
.scienceGrid{display:grid;grid-template-columns:1.25fr .9fr 1fr;gap:10px;margin-top:10px}.panel{padding:12px;overflow:hidden}.panel h3{font-size:14px;margin:0 0 9px}.mech{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(180px,.75fr);gap:10px;align-items:center;min-height:330px}.mechArt{width:100%;height:280px;border:1px solid var(--line);border-radius:10px;background:var(--surface);display:grid;place-items:center;overflow:hidden}.mechArt svg{width:100%;height:100%;display:block}.pathway{display:grid;gap:6px}.step{font-size:12px;font-weight:700;padding:8px;border:1px solid var(--line);background:var(--panel);border-radius:8px;text-align:center;line-height:1.35}.arrow{text-align:center;color:var(--label);font-size:14px}
.panelHead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 9px}.panelHead h3{margin:0}
.expandBtn{min-height:var(--tap);min-width:var(--tap);flex:none;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:0 10px;font-size:12px;font-weight:800;color:var(--primary-ink)}
.acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.actCard{border:1px solid var(--line);border-radius:10px;background:var(--panel);display:grid;grid-template-columns:68px minmax(0,1fr);align-items:center;min-width:0;overflow:hidden}.actCard.noIcon{grid-template-columns:minmax(0,1fr)}.actCard.major{background:var(--accent-soft);border-color:var(--accent-line)}.actIc{display:grid;place-items:center;padding:6px 0 6px 6px}.actIc .clay{width:56px;height:56px}[dir="rtl"] .actIc{padding:6px 6px 6px 0}.actIc.two{grid-auto-flow:column;gap:0}.actIc.two .clay{width:30px;height:30px}.actCopy{min-width:0;padding:8px 10px;overflow-wrap:anywhere}.actCopy h4{font-size:13px;margin:0 0 2px}.actCard.major .actCopy h4{font-size:14px}.strength{font-size:12px;color:var(--primary-ink);font-weight:850}.actCard.major .strength{color:var(--accent-text)}.actCopy p{font-size:12px;line-height:1.4;color:var(--muted);margin:4px 0 0}
.spectrumGrid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.spectrumCard{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:9px;min-height:105px}.spectrumCard h4{font-size:12px;margin:0 0 4px}.spectrumBadge{font-size:12px;display:inline-block;padding:3px 6px;border-radius:999px;background:var(--primary-soft);color:var(--primary-ink);font-weight:850}.spectrumCard p{font-size:12px;line-height:1.4;color:var(--muted);margin:6px 0 0}
.lowerGrid{display:grid;grid-template-columns:.8fr 1.2fr .85fr;gap:10px;margin-top:10px}.caseText{font-size:12px;line-height:1.5;color:var(--ink);margin-bottom:8px}.opts{display:grid;gap:8px}.opt{min-height:var(--tap);font-size:12px;line-height:1.4;padding:8px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface);text-align:start;color:var(--ink)}.opt.correct{background:var(--primary-soft);border-color:var(--primary)}.opt.wrong{background:var(--accent-soft);border-color:var(--accent)}.feedback{display:none;font-size:12px;line-height:1.45;margin-top:8px;padding:9px;border-radius:9px}.feedback.show{display:block}.feedback.good{background:var(--primary-soft);color:var(--ink)}.feedback.good>strong{color:var(--primary-ink)}.feedback.bad{background:var(--accent-soft);color:var(--ink)}.feedback.bad>strong{color:var(--accent-text)}.why{margin-top:8px;border-top:1px solid var(--line);padding-top:7px}.why strong{display:block;margin-bottom:5px}.why div{margin:4px 0}.why .pearl{margin-top:8px;padding-top:6px;border-top:1px dashed var(--line)}.why .pearl strong{display:inline;margin:0}.take{font-size:12px;line-height:1.55;color:var(--ink);margin:0;padding-inline-start:18px}.take li{margin-bottom:3px}.refs{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}.refsTitle{font-size:12px;font-weight:850;margin-bottom:4px}.refsText{font-size:12px;color:var(--muted);line-height:1.45}.reviewed{font-size:12px;color:var(--muted);margin-top:4px}.footer{text-align:center;color:var(--muted);font-size:12px;margin:12px 0 2px}

/* v17 — mechanism panel: full-width diagram + step chips */
.mech{grid-template-columns:1fr!important;min-height:0!important;gap:10px!important;align-items:start!important}
.mechArt{height:auto!important}
.mechArt svg{height:auto}
.pathway{display:flex!important;flex-wrap:wrap;align-items:center;gap:6px}
.pathway .step{padding:7px 9px;font-size:12px}
.pathway .arrow{font-size:14px;color:var(--label)}

/* Generated mechanism diagrams (js/app.js): shapes and text take their colours from the theme */
.dg-bg{fill:var(--surface)}.dg-band{fill:var(--panel)}.dg-cap{fill:var(--label)}
.dg-mem{fill:var(--primary-line)}.dg-tail{stroke:var(--line)}
.dg-helix{fill:var(--primary);stroke:var(--surface)}.dg-rec{fill:var(--primary-ink)}
.dg-drug{fill:var(--primary);stroke:var(--surface)}.dg-ring{fill:none;stroke:var(--primary)}.dg-ontxt{fill:var(--on-primary)}
.dg-name{fill:var(--ink);stroke:var(--surface);paint-order:stroke}
.dg-act{stroke:var(--primary)}.dg-act-head{fill:var(--primary)}
.dg-inhib{stroke:var(--accent)}.dg-x{fill:var(--accent)}.dg-xline{stroke:var(--accent);fill:none}
.dg-endo{fill:var(--muted)}.dg-endotxt{fill:var(--surface)}.dg-endoline{stroke:var(--muted)}
.dg-conn{stroke:var(--muted)}.dg-conn-head{fill:var(--muted)}
.dg-gp{fill:var(--primary-soft);stroke:var(--primary-line)}.dg-gptxt{fill:var(--ink)}
.dg-msg,.dg-target{fill:var(--primary-soft);stroke:var(--primary-line)}.dg-msgtxt,.dg-targettxt{fill:var(--primary-ink)}
.dg-blocks{fill:var(--warn-bg);stroke:var(--warn-line)}.dg-blockstxt{fill:var(--warn-ink)}
.dg-out,.dg-result{fill:var(--accent-soft);stroke:var(--accent)}.dg-outtxt,.dg-resulttxt{fill:var(--accent-text)}
.dg-note{fill:var(--surface);stroke:var(--line)}.dg-notetxt{fill:var(--muted)}
.dg-tbox{fill:var(--primary-soft);stroke:var(--primary)}.dg-chip{fill:var(--primary)}.dg-chiptxt{fill:var(--on-primary)}
.dg-xbadge{fill:var(--surface);stroke:var(--accent)}.dg-xmark{stroke:var(--accent)}
.dg-pmbadge{fill:var(--surface);stroke:var(--primary)}.dg-pmmark{stroke:var(--primary)}
/* Image mechanism templates (js/app.js templateFigure): the illustrations have white backgrounds, so the figure is
   a white card in both themes and its text uses fixed dark ink (--fig-*: the same in light and dark). The image never mirrors: slots
   are placed with left/top, and only the text inside them follows the language direction. */
.mechArt.tpl{display:block;place-items:normal;background:var(--fig-card)}   /* place-items also centres (shrink-wraps) block children in current browsers */
.mtFig{width:100%;margin:0;background:var(--fig-card);border-radius:10px;color:var(--fig-ink);overflow:hidden}
.mtStage{position:relative;width:100%;direction:ltr}
.mtImg{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-select:none}
.mtSlot{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:1.2% 1.8%;border-radius:8px}
.mtTxt{width:100%;min-width:0;text-align:center;font-weight:700;line-height:1.2;color:var(--fig-ink);overflow-wrap:normal}
.mtTxt .nw,.mtList .nw{white-space:nowrap}
.mtTxt b,.mtList b{font-weight:900}
.mtNum{display:none;min-width:30px;height:30px;border-radius:50%;background:var(--fig-badge);color:var(--fig-badge-ink);font-size:16px;font-weight:800;line-height:30px;text-align:center}
.mtList{display:none;margin:0;padding:10px 14px 12px;padding-inline-start:34px;font-size:14px;line-height:1.45;font-weight:600;color:var(--fig-ink);border-top:1px solid var(--fig-line)}
.mtList li+li{margin-top:4px}
.mtFig.numbered .mtTxt{display:none}.mtFig.numbered .mtNum{display:block}.mtFig.numbered .mtList{display:block}
/* Phase 4 hook: a wrong answer highlights the slot (and list item) at the question's anchorStep with class "hl" */
.mtSlot.hl,.mtList li.hl{outline:3px solid var(--primary);outline-offset:1px}
.dfCanvas .mtFig{flex:none;margin:0 auto}

/* v18 — boxes never clipped; header without icon */
.drugIcon{display:none!important}
.panel{overflow:visible}
.scienceGrid>*,.lowerGrid>*{min-width:0}
.spectrumGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.spectrumCard{min-width:0;overflow-wrap:anywhere}
.fact{overflow-wrap:anywhere}

/* v20 — from 1200px: the mechanism diagram gets its own full-width row (a third of the row left its
   560-wide SVG ~340px wide, text < 11px), where it acts below; case 1 | case 2 | takeaways */
@media (min-width:1200px){
 .scienceGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .mechanismPanel{grid-column:1/-1!important}
 .mechanismPanel .mechArt{max-width:760px;margin-inline:auto}
 .lowerGrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.85fr)!important}
 .takePanel{grid-column:auto!important}
}
.effectPanel,.actsPanel{container-type:inline-size}
@container (max-width:430px){.acts{grid-template-columns:1fr}}
@container (max-width:250px){.spectrumGrid{grid-template-columns:1fr!important}}

/* v21 — Clinical Cases page */
.casesPage{display:grid;gap:12px}
.casesHead{padding:18px 20px;display:flex;justify-content:space-between;gap:16px;align-items:flex-end;flex-wrap:wrap}
.casesHead h2{margin:0 0 6px;font-size:22px}.casesHead p{margin:0;color:var(--muted);font-size:13px;max-width:620px;line-height:1.5}
.caseFilters{display:flex;gap:8px;flex-wrap:wrap}
.caseChip{min-height:var(--tap);min-width:var(--tap);border:1px solid var(--primary-line);background:var(--surface);border-radius:999px;padding:7px 13px;font-size:12px;font-weight:750;color:var(--ink)}
.caseChip.active{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-ink)}
.caseChip[style*="--mc"]::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mc);margin-inline-end:6px;vertical-align:middle}
.caseGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.caseCard{position:relative;text-align:start;padding:16px 16px 14px 20px;display:flex;flex-direction:column;gap:8px;color:var(--ink);overflow:hidden;transition:transform .12s,box-shadow .12s}
.caseCard:hover{transform:translateY(-2px);box-shadow:0 10px 24px var(--shadow-color)}
.caseBar{position:absolute;inset-block:0;inset-inline-start:0;width:6px;background:var(--cc)}
.caseCard strong{font-size:15px;line-height:1.35}
.casePreview{font-size:12px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.caseMeta{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);flex-wrap:wrap}
.lvl{font-size:12px;font-weight:800;padding:3px 8px;border-radius:999px}
.lvl1{background:var(--primary-soft);color:var(--primary-ink)}.lvl2{background:var(--warn-bg);color:var(--warn-label)}.lvl3{background:var(--accent-soft);color:var(--accent-text)}
.doneBadge{background:var(--primary-soft);color:var(--primary-ink);font-weight:800;padding:3px 8px;border-radius:999px}
.caseDrugs{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}
.caseDrugs span{font-size:12px;font-weight:700;padding:3px 7px;border-radius:7px;background:color-mix(in srgb,var(--d) 12%,var(--surface));color:color-mix(in srgb,var(--d) 55%,var(--ink));border:1px solid color-mix(in srgb,var(--d) 30%,var(--surface))}
.backBtn{justify-self:start;min-height:var(--tap);border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:8px 13px;font-size:12px;font-weight:800;color:var(--ink)}
.caseDetail{padding:20px 22px;border-inline-start:6px solid var(--cc);max-width:980px;width:100%}
.caseTop{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.modTag{font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--soft);color:var(--muted)}
.caseDetail h2{font-size:21px;margin:10px 0 8px}
.stem{font-size:13.5px;line-height:1.65;color:var(--ink);margin:0 0 14px}
.findings{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:14px}
.findings h4,.caseQ h4,.pearls h4,.related h4{margin:0 0 8px;font-size:13px}
.vitals{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.vital{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.vital small{display:block;font-size:12px;color:var(--muted);margin-bottom:2px}.vital bdi{font-size:13px;font-weight:800}
.caseQ{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.caseQ .caseText{font-size:13px;font-weight:650;color:var(--ink)}
.caseQ .opt{font-size:12.5px;padding:10px 12px}
.caseQ .feedback{font-size:12px}
.caseResult{margin-top:16px;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--primary-soft);border:1px solid var(--primary-line);border-radius:11px;padding:10px 14px;font-size:13px}
.resetBtn{min-height:var(--tap);border:1px solid var(--primary-line);background:var(--surface);border-radius:8px;padding:6px 11px;font-size:12px;font-weight:800;color:var(--primary-ink)}
.pearls{margin-top:14px;background:var(--primary-soft);border:1px solid var(--primary-line);border-radius:12px;padding:12px 14px}
.pearls ul{margin:0;padding-inline-start:18px;font-size:12.5px;line-height:1.6;color:var(--ink)}
.related{margin-top:14px}.related>div{display:flex;gap:8px;flex-wrap:wrap}
.relDrug{display:flex;align-items:center;gap:7px;min-height:var(--tap);border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:7px 11px;font-size:12px;font-weight:800;color:var(--ink)}
.relDrug .dot{background:var(--d);height:18px}

/* Section tabs (phones only): a tab strip on --soft, the active tab underlined in petrol */
.drugTabs{display:none;position:sticky;top:var(--tbh,0px);z-index:25;gap:6px;margin-top:8px;padding:6px 0;padding-top:max(6px,env(safe-area-inset-top));background:var(--soft)}
.drugTab{flex:1 1 0;min-width:0;min-height:var(--tap);border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:0 4px;font-size:13px;font-weight:800;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the section shown and the tab underlined both come from #lesson[data-tab] (set by applyTabs) */
@media (max-width:599px){
 #lesson[data-tab="overview"] [data-sec]:not([data-sec="overview"]),#lesson[data-tab="mechanism"] [data-sec]:not([data-sec="mechanism"]),
 #lesson[data-tab="effects"] [data-sec]:not([data-sec="effects"]),#lesson[data-tab="questions"] [data-sec]:not([data-sec="questions"]){display:none!important}
}
#lesson[data-tab="overview"] .drugTab[data-tab="overview"],#lesson[data-tab="mechanism"] .drugTab[data-tab="mechanism"],
#lesson[data-tab="effects"] .drugTab[data-tab="effects"],#lesson[data-tab="questions"] .drugTab[data-tab="questions"]{color:var(--primary-ink);border-color:var(--primary-line);box-shadow:inset 0 -3px 0 var(--primary)}

/* Full-screen mechanism diagram */
.diagramFull{position:fixed;inset:0;z-index:200;background:var(--surface);display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.dfBar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--soft)}
.dfBar h3{margin:0;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dfTools{display:flex;gap:8px;flex:none}
.dfTools button{min-width:var(--tap);min-height:var(--tap);border:1px solid var(--line);background:var(--surface);border-radius:10px;font-size:18px;font-weight:800;color:var(--ink);padding:0 8px}
.dfTools .dfFit{font-size:13px}
.dfScroll{flex:1;overflow:auto;padding:12px;overscroll-behavior:contain;direction:ltr} /* the diagram is drawn left to right in both languages, so panning starts at the drug */
.dfCanvas{min-height:100%;display:flex;align-items:center}
.dfCanvas svg{display:block;flex:none;margin:0 auto;height:auto;max-width:none}
body.noScroll{overflow:hidden}

/* ---------- landscape tablet / small laptop, 1024–1199: the diagram gets its own full-width row ---------- */
@media (min-width:1024px) and (max-width:1199px){
 .app{grid-template-columns:180px minmax(0,1fr)}.brand{padding:0 11px}.brand h1{font-size:16px}.navItem{padding:9px 8px}
 .canvas{padding:10px}.topbar{height:62px;padding:0 10px}.searchWrap{width:56vw}
 
 .scienceGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}.panel{padding:10px}
 .mechanismPanel{grid-column:1/-1!important}
 .mechanismPanel .mechArt{max-width:760px;margin-inline:auto}
 .lowerGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}.takePanel{grid-column:1/-1}
}

/* ---------- below 1024: the sidebar becomes a drawer ---------- */
@media (max-width:1023px){
 .app{display:block}
 .sidebar{position:fixed;inset-block:0;inset-inline-start:0;width:min(82vw,310px);height:auto;visibility:hidden;transform:translateX(-105%);transition:transform .22s ease,visibility .22s;box-shadow:12px 0 30px var(--shadow-color);z-index:100;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left)}
 [dir="rtl"] .sidebar{transform:translateX(105%);box-shadow:-12px 0 30px var(--shadow-color);padding-left:0;padding-right:env(safe-area-inset-right)}
 .sidebar.open,[dir="rtl"] .sidebar.open{transform:translateX(0);visibility:visible}
 .drawerBackdrop{display:block;position:fixed;inset:0;background:var(--scrim);z-index:90;opacity:0;pointer-events:none;transition:opacity .2s}
 .drawerBackdrop.show{opacity:1;pointer-events:auto}
 body.drawerOpen{overflow:hidden}
 .menuBtn{display:inline-flex;align-items:center;justify-content:center}
}

/* ---------- tablet portrait, 600–1023 ---------- */
@media (min-width:600px) and (max-width:1023px){
 .canvas{padding:12px}
 .searchWrap{width:auto;flex:1;min-width:0}
 
 .scienceGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .mechanismPanel{grid-column:1/-1!important}
 .mechanismPanel .mechArt{max-width:760px;margin-inline:auto}
 .lowerGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.takePanel{grid-column:1/-1}
 .caseGrid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}

/* ---------- phone, below 600 ---------- */
@media (max-width:599px){
 html,body{font-size:15px}
 .topbar{position:static;height:auto;min-height:58px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));gap:8px;flex-wrap:nowrap}
 .searchWrap{flex:1;min-width:0;width:auto}.search{font-size:16px}   /* one row: search + menu (theme and language moved to Settings) */
 .canvas{padding:9px;padding-left:max(9px,env(safe-area-inset-left));padding-right:max(9px,env(safe-area-inset-right));padding-bottom:max(9px,env(safe-area-inset-bottom))}
 .identity{padding:10px 12px 10px 18px}.drugName{font-size:22px}.drugSub{font-size:15px}
 .overviewFacts{grid-template-columns:1fr}.fact p{font-size:15px}.overviewPanel{margin-top:8px}
 .drugSelectorWrap{display:block}.drugSelectorLabel{display:block;margin-bottom:5px}.drugBtn{min-width:128px}
 .drugTabs{display:flex}
 .scienceGrid{display:flex;flex-direction:column;gap:8px;margin-top:8px}.mechanismPanel{order:1}.effectPanel{order:2}.actsPanel{order:3}
 .panel{padding:10px}.panel h3{font-size:15px}
 .acts,.spectrumGrid{grid-template-columns:1fr!important}
 .actCopy h4,.actCard.major .actCopy h4,.spectrumCard h4{font-size:15px}
 .actCopy p,.spectrumCard p,.take,.feedback,.caseQ .feedback,.stem,.casePreview,.casesHead p,.pearls ul,.emptyModule p,.stateCard p{font-size:15px}
 .caseText,.opt,.caseQ .caseText,.caseQ .opt{font-size:16px}
 .step,.pathway .step{font-size:13px}
 .lowerGrid{grid-template-columns:1fr!important;margin-top:8px}
 .casesHead{padding:14px}.caseDetail{padding:14px}.caseGrid{grid-template-columns:1fr}
}
@media (max-width:420px){
 .drugName{font-size:20px}
}
/* Phone density: every box as tall as its content (no min-heights), organ cards as one compact row (icon 44 px, name and
   strength on one line). Font sizes stay at the agreed minimums; images are scaled, never cropped. */
@media (max-width:599px){
 .acts{gap:6px}.actIc{padding:4px 0 4px 6px}.actIc .clay{width:44px;height:44px}.actIc.two .clay{width:24px;height:24px}.actCard{grid-template-columns:54px minmax(0,1fr)}.actCard.noIcon{grid-template-columns:minmax(0,1fr)}
 .actCopy{padding:6px 10px}.actCopy h4,.actCard.major .actCopy h4{display:inline;margin:0}.strength{display:inline;margin-inline-start:6px}.actCopy p{margin:2px 0 0}
 .spectrumCard{min-height:0;padding:8px 10px}.spectrumCard h4{display:inline;margin:0}.spectrumBadge{margin-inline-start:6px}.spectrumCard p{margin:3px 0 0}
}

/* Navigation pages: module > group > class (js/app.js renderTax), mobile first. Touch targets 44px; tables scroll
   inside their own box (.tblWrap) so the page never scrolls sideways; the first column stays in view. */
.taxPage{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}   /* minmax(0,…): a wide table must scroll in its box, not widen the page */
.taxPage>*,.classCard{min-width:0}
.lblP,.lblS{display:block}.lblS{margin-top:1px;font-size:12px;font-weight:600;line-height:1.35;color:var(--muted)}   /* the other language, secondary */
.taxHead{padding:14px 16px}.taxHead h2{margin:2px 0 0;font-size:20px;line-height:1.25;color:var(--ink)}
.taxKicker{font-size:12px;letter-spacing:.05em;font-weight:900;color:var(--label)}
.taxSub{margin:4px 0 0;font-size:13px;color:var(--muted)}
.taxH{font-size:15px;margin:6px 2px 0;color:var(--ink)}
.crumbs ol{display:flex;align-items:center;gap:0;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.crumbs ol::-webkit-scrollbar{display:none}
.crumbs li{display:flex;align-items:center;flex:none}
.crumb{min-height:var(--tap);min-width:var(--tap);padding:0 8px;border:0;border-radius:8px;background:none;color:var(--primary-ink);font-size:13px;font-weight:800;white-space:nowrap}
.crumb[aria-current]{color:var(--ink)}
.crumbs .sep{color:var(--label);font-size:14px;display:inline-flex}
.drugCrumbs{margin-bottom:4px}
.accList{display:grid;gap:8px}
.acc{padding:0;overflow:hidden}
.accH{margin:0}
.accBtn{width:100%;min-height:52px;display:flex;align-items:center;gap:10px;padding:10px 14px;border:0;background:none;color:var(--ink);font-size:15px;font-weight:800;text-align:start}
.accCount{margin-inline-start:auto;font-size:12px;font-weight:800;color:var(--muted)}
.chev{font-size:14px;color:var(--label);transition:transform .2s}
.accBtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.accBody{display:grid;gap:12px;padding:0 14px 14px}
.groupOpen{justify-self:start;min-height:var(--tap);padding:0 14px;border:1px solid var(--primary-line);border-radius:10px;background:var(--primary-soft);color:var(--primary-ink);font-size:13px;font-weight:800}
.taxClass{border-top:1px solid var(--line);padding-top:8px;display:grid;gap:6px}
.taxClassHead{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
.classLink{min-height:var(--tap);padding:0;border:0;background:none;color:var(--primary-ink);font-size:14px;font-weight:800;text-align:start}
.alsoIn{font-size:12px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.taxChip{min-height:var(--tap);display:inline-flex;align-items:center;gap:6px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:700}
.tcDot{width:9px;height:9px;border-radius:50%;background:var(--dot);flex:none}
.taxChip.soon{border-style:dashed;border-color:var(--label);background:transparent;color:var(--muted);font-weight:600}
.taxChip.soon small{font-size:12px;color:var(--label);font-weight:700}
.classCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:10px}
.classCard{padding:12px;display:grid;gap:8px;align-content:start}
.classCardBtn{display:flex;align-items:center;gap:12px;min-height:var(--tap);padding:0;border:0;background:none;color:var(--ink);text-align:start;width:100%}
.ccThumb{width:64px;height:80px;flex:none;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:var(--fig-card)}
.ccText{display:grid;gap:2px}.ccName{font-size:15px;font-weight:800;color:var(--primary-ink)}.ccCount{font-size:12px;color:var(--muted)}
.taxSection{padding:12px 14px}.taxSection h3{font-size:15px;margin:0 0 10px;color:var(--ink)}
.taxFigure .mechArt{max-width:520px;margin-inline:auto}
.tblWrap{max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:10px;-webkit-overflow-scrolling:touch}
.tblWrap:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
table.cmp{border-collapse:separate;border-spacing:0;min-width:100%;font-size:13px;line-height:1.4;color:var(--ink)}
.cmp th,.cmp td{padding:8px 8px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top;min-width:88px;overflow-wrap:normal;word-break:normal}
/* a cell is never narrower than its longest word (table layout: min-content), so a long English word in an Arabic table is
   never cut; the box scrolls when the columns together are wider than the screen, and 3 columns fit a 360 px phone */
.cmp tr:last-child>*{border-bottom:0}
.cmp thead th{background:var(--soft);font-weight:800}
.cmp th[scope="row"]{position:sticky;inset-inline-start:0;background:var(--panel);font-weight:800;min-width:92px;max-width:140px;border-inline-end:1px solid var(--line)}
.cmp thead th:first-child{position:sticky;inset-inline-start:0;z-index:1;border-inline-end:1px solid var(--line)}
/* Visual cases (js/app.js renderVC): list, case screen, Questions-tab modes, "Try a visual case", Case of the Day.
   Clinical images keep their own colours (no filter, blend or opacity) on the fixed --case-frame in both themes. */
.vcPage,.homePage{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.vcHead{padding:14px 16px}.vcHead h2{margin:0;font-size:20px;color:var(--ink)}.vcHead p{margin:4px 0 6px;font-size:14px;color:var(--muted)}
.vcFilters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}.vcFLabel{font-size:12px;font-weight:800;color:var(--label);min-width:64px}
.vcGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:10px}
.vcCard,.cotd{display:flex;align-items:center;gap:12px;min-height:var(--tap);width:100%;padding:10px;text-align:start;color:var(--ink)}
.vcThumb{flex:none;width:88px;height:66px;border-radius:8px;background:var(--case-frame);padding:3px;display:grid;place-items:center;overflow:hidden}
.vcThumb img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.vcCardText{display:grid;gap:4px;min-width:0}.vcCardTitle{font-size:14px;font-weight:800;color:var(--ink);text-align:start}
.vcMeta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12px;color:var(--muted)}
.vcBadge{font-size:12px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--primary-soft);color:var(--primary-ink);border:1px solid var(--primary-line)}
.vcNone{padding:12px 14px;margin:0;font-size:14px;color:var(--muted)}
.vcCase{padding:12px;display:grid;gap:10px;min-width:0}.vcTitle{margin:0;font-size:18px;line-height:1.3;color:var(--ink)}
.vcImgBtn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;text-align:center}
.vcFrame{display:block;background:var(--case-frame);padding:8px;border-radius:10px}
.vcImg{display:block;width:100%;max-height:58vh;object-fit:contain;margin:0 auto}
.vcZoom{display:inline-block;margin-top:4px;font-size:12px;font-weight:700;color:var(--muted)}
.vcStem{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.vcSolution{margin:0;display:grid;gap:4px}.vcSolution figcaption{font-size:12px;color:var(--muted);text-align:center}
.vcExpl h3{font-size:15px;margin:0 0 6px;color:var(--ink)}.vcExplEn{margin:0;font-size:14px;line-height:1.55;color:var(--ink)}
.arExpl{margin-top:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.arExpl summary{min-height:var(--tap);display:flex;align-items:center;padding:0 12px;font-size:14px;font-weight:800;color:var(--primary-ink);cursor:pointer}
.arExplBody{padding:0 12px 12px;font-size:15px;line-height:1.7;color:var(--ink)}
.vcNext{justify-self:end;min-height:var(--btn-h);padding:0 18px;border:0;border-radius:var(--r-btn);background:var(--coral);color:var(--on-coral);font-size:15px;font-weight:800}
.qModes{grid-column:1/-1;justify-self:start;display:flex;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:3px}
.qMode{min-height:var(--tap);padding:0 16px;border:0;border-radius:9px;background:none;color:var(--ink);font-size:14px;font-weight:800}
.qMode[aria-pressed="true"]{background:var(--primary);color:var(--on-primary)}
.vcDrugPanel{display:grid;gap:10px;align-content:start}.vcDrugPanel h3{margin:0}.vcDrugPanel .backBtn{justify-self:start}
@media (min-width:600px){.lowerGrid .vcDrugPanel{grid-column:span 2}}
.vcTry{margin-top:10px}.vcTry:empty{display:none}
.vcTryBtn{min-height:var(--tap);padding:0 14px;border:1px solid var(--primary-line);border-radius:10px;background:var(--primary-soft);color:var(--primary-ink);font-size:13px;font-weight:800}
.cotd{max-width:520px}.cotdLabel{font-size:12px;font-weight:900;letter-spacing:.04em;color:var(--label)}
/* Home (js/app.js renderHome): hero, Continue, module grid (2 / 3 / 4 columns), Case of the Day, stats */
.homeSec{display:grid;gap:8px;min-width:0}.homeH{margin:4px 2px 0;font-size:15px;color:var(--ink)}
.homeHero{padding:16px;display:grid;gap:12px}.hhBrand{display:flex;align-items:center;gap:12px}
.hhLogo{flex:none;width:44px;height:44px;border-radius:12px;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-weight:900;font-size:20px}
.homeHero h2{margin:0;font-size:24px;line-height:1.2;color:var(--ink)}.hhTag{margin:2px 0 0;font-size:14px;color:var(--muted)}
.homeSearch{display:none;width:100%}   /* phones only; wider screens keep the top-bar search */
.homeSearch .search{height:48px;font-size:16px;border-color:var(--primary-line)}.homeSearch .searchResults{top:54px}
.homeCont{display:flex;align-items:center;gap:12px;width:100%;max-width:520px;min-height:var(--tap);padding:12px 14px;text-align:start;color:var(--ink)}
.hcDot{flex:none;width:10px;height:40px;border-radius:5px;background:var(--dot)}
.hcText{display:grid;gap:2px;min-width:0;flex:1}.hcName{font-size:17px;font-weight:800}.hcSub{font-size:13px;color:var(--muted)}
.homeLabel{font-size:12px;font-weight:900;letter-spacing:.04em;color:var(--label)}.hcGo{flex:none;font-size:20px;font-weight:800;color:var(--primary-ink)}
.modGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.modCard{display:grid;align-content:start;gap:6px;width:100%;min-height:var(--tap);padding:12px;text-align:start;color:var(--ink);border-top:4px solid var(--mc)}
.mcIcon{font-size:22px;line-height:1;color:var(--mc)}.mcName{font-size:15px;font-weight:800;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.mcCount{font-size:12px;font-weight:700;color:var(--muted)}
.mcBar{display:block;height:6px;border-radius:3px;background:var(--soft);overflow:hidden}.mcBar span{display:block;height:100%;border-radius:inherit;background:var(--mc)}
.homeStats{list-style:none;margin:0;padding:10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center}
.homeStats li{display:grid;gap:2px}.homeStats strong{font-size:22px;color:var(--primary-ink)}.homeStats span{font-size:12px;color:var(--muted)}
@media (max-width:599px){body.onHome .topbar .searchWrap{display:none}body.onHome .topActions{margin-inline-start:auto}.homeSearch{display:block}}
@media (min-width:600px){.modGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.modGrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dfCanvas .dfImg{display:block;flex:none;margin:0 auto;height:auto;max-width:none;background:var(--case-frame);padding:6px;border-radius:8px}
/* Settings page: radio groups and one switch, 44px rows */
.settingsPage{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;max-width:640px}
.setGroup{padding:12px 14px}.setGroup h3{font-size:15px;margin:0 0 10px;color:var(--ink)}
.setOpts{display:flex;flex-wrap:wrap;gap:8px}
.setOpt{min-height:var(--tap);padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font-size:14px;font-weight:700}
.setOpt[aria-checked="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.setNote{margin:8px 0 0;font-size:12px;color:var(--muted)}
.setSwitch{width:100%;min-height:var(--tap);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0;border:0;background:none;color:var(--ink);font-size:14px;font-weight:700;text-align:start}
.swTrack{flex:none;width:46px;height:28px;border-radius:14px;background:var(--line);position:relative;transition:background .2s}
.swKnob{position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px var(--shadow-color);transition:inset-inline-start .2s}
.setSwitch[aria-checked="true"] .swTrack{background:var(--primary)}
.setSwitch[aria-checked="true"] .swKnob{inset-inline-start:21px}
.settingsNav{margin-top:10px;border-top:1px solid var(--nav-line);border-radius:0 0 9px 9px;padding-top:12px}
/* sidebar: the active module's groups, desktop only (on phones the module page lists them) */
.navGroups{display:none}
.groupBtn{padding-inline-start:30px;color:var(--nav-muted)}
.groupBtn.current{color:var(--nav-ink);background:var(--nav-hover)}
@media (min-width:1024px){.navGroups{display:block;margin:0 0 4px}}
@media (min-width:600px){.taxHead h2{font-size:22px}.accBody .taxClass{padding-top:10px}}
@media (prefers-reduced-motion:reduce){
 .chev,.swTrack,.swKnob{transition:none}
 .sidebar,.drawerBackdrop,.caseCard{transition:none}
 .caseCard:hover{transform:none}
}

/* ---------- Games (js/games.js): zone-sort and true-false, as in the approved prototypes, on the app's tokens ----------
   Every control is at least 44px and every text at least 12px (the app's phone rules; the prototypes used less). */
.gamesPage{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;max-width:820px}
.gameCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:8px}
.gameCard{display:flex;align-items:center;gap:12px;width:100%;min-height:var(--tap);padding:12px 14px;text-align:start;color:var(--ink)}
.gcIcon{flex:none;width:44px;height:44px;border-radius:12px;background:var(--primary-soft);color:var(--primary-ink);display:grid;place-items:center;font-weight:900;font-size:16px}
.gcText{display:grid;gap:2px;min-width:0;flex:1}.gcTitle{font-size:16px;font-weight:800}.gcSub{font-size:13px;color:var(--muted)}
.gcMod{font-size:12px;font-weight:800;color:var(--label)}.gcGo{flex:none;font-size:18px;font-weight:800;color:var(--primary-ink)}
.gHead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gBrand{display:flex;flex-direction:column;gap:2px;min-width:0}.gBrand h2{margin:0;font-size:22px;line-height:1.2;color:var(--ink)}
.gKicker{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--label);font-weight:700}
.gSeg{display:inline-flex;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.gSeg button{min-height:var(--tap);border:0;background:transparent;padding:0 14px;border-radius:999px;font-size:14px;font-weight:700;color:var(--muted)}
.gSeg button[aria-pressed="true"]{background:var(--surface);color:var(--primary-ink);box-shadow:var(--shadow)}
.gSeg.big{display:grid;grid-template-columns:1fr 1fr;border-radius:14px;padding:4px;gap:4px}
.gSeg.big button{border-radius:10px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:8px 12px;text-align:start;color:var(--ink)}
.gSeg.big button small{font-size:12px;font-weight:500;color:var(--muted)}.gSeg.big button[aria-pressed="true"] b{color:var(--primary-ink)}
.gScore{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}.gScore b{color:var(--ink);font-size:15px}
/* sticky back bar: under the top bar where that is sticky (--tbh), at the top on phones */
.gBar{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:calc(var(--tbh,0px) + env(safe-area-inset-top,0px));z-index:20;background:var(--page);padding-block:6px;border-bottom:1px solid transparent}
.gBar.stuck{border-bottom-color:var(--line)}
.gBack{min-height:var(--tap);border:1px solid var(--line);background:var(--surface);color:var(--primary-ink);font-weight:700;padding:0 14px;border-radius:999px;font-size:14px}
.gPos{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}.gPos b{font-size:18px;color:var(--ink)}
.gPick{display:flex;flex-direction:column;gap:16px}.gLead{margin:0;color:var(--muted);font-size:14px}
.gPkBar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.gProg{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;margin-inline-start:auto}.gProg b{color:var(--ink)}
.gGrp{display:flex;flex-direction:column;gap:8px}.gGrp h3{margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--label);font-weight:800}
.gTiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}
.gTile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:var(--tap);text-align:start;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);min-width:0}
.gTile:hover{border-color:var(--primary-line);background:var(--primary-soft)}
.gTile.wide{grid-column:1/-1;border-color:var(--primary-line);background:var(--primary-soft)}
.gTile.focus{border:2px solid var(--primary)}
.gTile .tn{font-weight:700;font-size:15px;line-height:1.25}.gTile .ts{font-size:12px;color:var(--muted);line-height:1.35}
.gSt{margin-top:4px;font-size:12px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--soft);color:var(--muted);font-variant-numeric:tabular-nums}
.gSt.done{background:var(--good-soft);color:var(--good)}.gSt.part{background:var(--mid-soft);color:var(--mid)}
.gBtn{min-height:var(--btn-h);border-radius:var(--r-btn);padding:0 18px;font-size:15px;font-weight:800;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:8px}
/* the main call to action: coral with dark ink (never white text on coral) */
.gBtn.pri{background:var(--coral);color:var(--on-coral);border-color:var(--coral)}
.gBtn:disabled{opacity:.45;cursor:not-allowed}
.gCard{padding:14px 16px;display:flex;gap:14px;align-items:center}
.gPill{width:10px;align-self:stretch;border-radius:6px;background:var(--primary);flex:none}
.gMeta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.gName{font-size:21px;font-weight:800;line-height:1.25;color:var(--ink)}.gSub{color:var(--muted);font-size:13px}.gAsk{font-size:14px;color:var(--ink)}
.gTrayHead{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.gTools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gMini,.gRest{min-height:var(--tap);font-size:13px;font-weight:700;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--primary-ink);white-space:nowrap}
.gRest{background:var(--page);margin-inline-end:6px;flex:none}
.gTray{background:var(--soft);border:1px dashed var(--line);border-radius:14px;padding:10px;min-height:64px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.gEmpty{color:var(--muted);font-size:13px;padding:6px}
.gChip{touch-action:none;user-select:none;-webkit-user-select:none;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);min-width:var(--tap);padding:6px 12px;border-radius:999px;background:var(--surface);border:1.5px solid var(--primary-line);color:var(--ink);font-weight:700;font-size:14px;cursor:grab;line-height:1.2}
.gChip.sel{border-color:var(--primary);background:var(--primary);color:var(--on-primary)}.gChip.sel::before{content:"\2713";font-size:12px;font-weight:800}
.gChip.ok{border-color:var(--good-line);background:var(--good-soft)}.gChip.no{border-color:var(--bad-line);background:var(--bad-soft)}
.gChip .mk{font-size:13px;font-weight:800}.gChip.ok .mk{color:var(--good)}.gChip.no .mk{color:var(--bad)}
.gChip .fix{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:800;color:var(--muted)}
.gChip .fix i{font-style:normal;min-width:20px;height:20px;padding:0 5px;border-radius:999px;display:grid;place-items:center;font-size:12px}
.gY{background:var(--good-soft);color:var(--good);box-shadow:inset 0 0 0 1px var(--good-line)}
.gV{background:var(--mid-soft);color:var(--mid);box-shadow:inset 0 0 0 1px var(--mid-line)}
.gN{background:var(--bad-soft);color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad-line)}
.gP{background:var(--primary-soft);color:var(--primary-ink);box-shadow:inset 0 0 0 1px var(--primary-line)}
.gGhost{position:fixed;z-index:200;pointer-events:none;box-shadow:0 8px 24px var(--shadow-color);transform:translate(-50%,-50%) scale(1.06);cursor:grabbing}
.gGhost .cnt{font-size:12px;font-weight:800;background:var(--primary);color:var(--on-primary);border-radius:999px;padding:1px 7px}
.gChip.lifted{opacity:.35}
.gZone .gChip{max-width:100%;text-align:start}
.gZones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.gZones.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gZones.n4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.gZone{border-radius:14px;border:1.5px solid var(--line);background:var(--surface);display:flex;flex-direction:column;min-height:180px;min-width:0;transition:border-color .15s,background .15s}
.gZone .zh{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--line)}
.gZone .zbtn{flex:1;min-width:0;min-height:var(--tap);display:flex;align-items:center;gap:8px;padding:8px 12px;background:transparent;border:0;text-align:start;color:var(--ink);border-radius:14px 14px 0 0}
.gZone .sym{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.gZone .sym.txt{width:auto;min-width:26px;padding:0 7px;border-radius:999px;font-size:12px}
.gZone .zt{display:flex;flex-direction:column;min-width:0}.gZone .zt b{font-size:14px;line-height:1.2}.gZone .zt small{font-size:12px;color:var(--muted);line-height:1.3}
.gZone .drop{flex:1;padding:10px;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.gZone[data-tone="g"] .sym{background:var(--good-soft);color:var(--good)}.gZone[data-tone="m"] .sym{background:var(--mid-soft);color:var(--mid)}
.gZone[data-tone="b"] .sym{background:var(--bad-soft);color:var(--bad)}.gZone[data-tone="p"] .sym{background:var(--primary-soft);color:var(--primary-ink)}
.gZone.hot{border-color:var(--primary);background:var(--primary-soft)}.gZone.armed .zbtn{background:var(--primary-soft)}.gZone.armed .zt small{color:var(--primary-ink);font-weight:700}
.gActions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.gHint{font-size:13px;color:var(--muted)}
.gResult{padding:14px 16px;display:flex;flex-direction:column;gap:10px}.gResult .big{font-size:18px;font-weight:800;color:var(--ink)}
.gNote{border-radius:10px;padding:12px 14px;background:var(--soft);display:flex;flex-direction:column;gap:4px}
.gNote .h{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-weight:700;color:var(--ink)}.gNote p{margin:0;font-size:14px;color:var(--ink)}
.gTag{font-size:12px;font-weight:800;padding:2px 8px;border-radius:999px;box-shadow:none}
.gHintBox{padding:10px 12px;border-radius:10px;background:var(--primary-soft);color:var(--ink);font-size:14px;line-height:1.55}
.gListH{margin:4px 0 0;font-size:15px;color:var(--ink)}
.gList{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.gList li{display:flex;gap:8px;align-items:flex-start;font-size:14px;padding:8px 10px;border-radius:10px;background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.gLi{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.gLiHead{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.gWhy{color:var(--muted);font-size:13px}.gTag{max-width:100%}
.gMark{flex:none;font-weight:900;width:18px;text-align:center}.gList li.ok .gMark{color:var(--good)}.gList li.no .gMark{color:var(--bad)}
.gFoot{font-size:12px;color:var(--muted);margin:0}
/* the anticoagulant site-of-action map */
.gMap{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--page)}
.gMap h3{margin:0;font-size:15px;color:var(--ink)}.gMap .legend{font-size:12px;color:var(--muted)}
.mgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:8px;align-items:stretch}
.mgrid .full{grid-column:1/-1}.mgrid .stack{display:flex;flex-direction:column;gap:8px;min-width:0}
.mgrid .pair{display:flex;flex-wrap:wrap;gap:8px}.mgrid .pair>.mbox{flex:1 1 150px}
.mbox{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:9px 10px;display:flex;flex-direction:column;gap:5px;min-width:0;color:var(--ink)}
.mbox b{font-size:14px;line-height:1.25}.mbox small{font-size:12px;color:var(--muted);line-height:1.35}
.mbox.node{text-align:center;align-items:center;border:1.5px solid var(--primary-line);background:var(--primary-soft)}.mbox.node b{color:var(--primary-ink)}
.mbox.at,.mbox.side{border-style:dashed}.mbox.at{justify-content:center}
.mbox .lab{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--label)}
.mgrid .arr{text-align:center;color:var(--muted);font-size:16px;line-height:1}
.mchips{display:flex;flex-wrap:wrap;gap:4px}
.mchip{font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface);max-width:100%;overflow-wrap:anywhere;color:var(--ink)}
.mchip.ok{border-color:var(--good-line);background:var(--good-soft)}.mchip.no{border-color:var(--bad-line);background:var(--bad-soft)}
.blk{color:var(--bad);font-weight:800}.mline{font-size:12px;line-height:1.4}
/* true-false */
.tfGame{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.tfTimer{position:relative;height:28px;border-radius:999px;background:var(--soft);border:1px solid var(--line);overflow:hidden}
.tfTimer i{position:absolute;inset-block:0;inset-inline-start:0;background:var(--primary);opacity:.85;transition:background .3s}
.tfTimer span{position:relative;display:block;text-align:center;font-weight:800;font-size:13px;line-height:26px;font-variant-numeric:tabular-nums;color:var(--ink)}
.tfTimer.low i{background:var(--bad)}
.tfDeck{font-size:12px;color:var(--label);font-weight:700;letter-spacing:.04em;text-align:center}
.tfStage{display:flex;justify-content:center;padding-block:4px}
.tfCard{--r:0;--l:0;position:relative;width:100%;max-width:520px;min-height:220px;border-radius:20px;background:var(--surface);border:1.5px solid var(--line);box-shadow:var(--shadow);padding:28px 22px;display:flex;flex-direction:column;justify-content:center;gap:12px;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;transition:transform .22s ease,border-color .2s,background .2s}
.tfCard.drag{transition:none;cursor:grabbing}
.tfCard p{margin:0;font-size:19px;line-height:1.5;font-weight:700;text-align:center;color:var(--ink)}
.tfCard .hintL,.tfCard .hintR{position:absolute;top:12px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:900}
.tfCard .hintL{left:12px;background:var(--bad-soft);color:var(--bad);opacity:calc(.25 + var(--l))}
.tfCard .hintR{right:12px;background:var(--good-soft);color:var(--good);opacity:calc(.25 + var(--r))}
.tfCard.good{border-color:var(--good-line);background:var(--good-soft)}.tfCard.bad{border-color:var(--bad-line);background:var(--bad-soft)}
.tfFb{font-size:15px;line-height:1.55;text-align:center;color:var(--ink)}
.tfAnswer{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:520px;width:100%;margin-inline:auto}
.tfBtn{min-height:56px;border-radius:14px;padding:12px;font-size:17px;font-weight:800;border:1.5px solid}
.tfBtn.f{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line)}.tfBtn.t{background:var(--good-soft);color:var(--good);border-color:var(--good-line)}
.tfBtn:disabled{opacity:.5;cursor:default}
.tfNav{justify-content:center}.tfSwipe{text-align:center;margin:0}
.tfEnd{display:flex;flex-direction:column;gap:14px}
.tfEndCard{padding:20px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.tfEndCard h3{margin:0;font-size:20px;color:var(--ink)}.tfEndCard p{margin:0;color:var(--muted)}
.tfBig{font-size:56px;font-weight:900;color:var(--primary-ink);line-height:1;font-variant-numeric:tabular-nums}
.nb{color:var(--good)}
.tfRev{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tfRev li{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;color:var(--ink)}
.tfRev .gTag{flex:none;margin-top:2px}.tfRev p{margin:0}.tfRev .rs{font-weight:700;font-size:14px}.tfRev .rw{font-size:13px;color:var(--muted);margin-top:4px}
.tfAll summary{min-height:var(--tap);display:flex;align-items:center;font-size:14px;font-weight:800;color:var(--primary-ink);cursor:pointer}
.modGames{padding:12px 14px;display:grid;gap:8px}.modGames h3{margin:0;font-size:15px;color:var(--ink)}
@media (max-width:599px){
 .gTiles{grid-template-columns:repeat(2,minmax(0,1fr))}.gProg{margin-inline-start:0;width:100%}
 .gBrand h2{font-size:19px}.gName{font-size:19px}
 .gZones,.gZones.n2,.gZones.n4{grid-template-columns:1fr;gap:8px}
 .gZones.n3 .gZone,.gZones.n2 .gZone{min-height:0;flex-direction:row;align-items:stretch}
 .gZones.n3 .gZone .zh,.gZones.n2 .gZone .zh{flex:none;flex-direction:column;justify-content:center;gap:6px;width:104px;border-bottom:0;border-inline-end:1px solid var(--line);padding-block:6px}
 .gZones.n3 .gZone .zbtn,.gZones.n2 .gZone .zbtn{flex:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;text-align:center;border-radius:10px;width:100%}
 .gZones.n3 .gZone .zt,.gZones.n2 .gZone .zt{align-items:center}.gZones.n3 .gZone .zt small,.gZones.n2 .gZone .zt small{display:none}
 .gZones.n3 .gZone.armed .zt small,.gZones.n2 .gZone.armed .zt small{display:block}
 .gZones.n3 .gRest,.gZones.n2 .gRest{margin:0 6px}
 .gZone{min-height:0}.gZone .drop{min-height:60px;padding:8px;gap:6px;align-content:center}
 .tfCard p{font-size:17px}.tfCard{min-height:200px;padding:26px 16px}.gSeg.big button{padding:8px 10px}
 .mgrid{grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr)}.gMap{padding:10px}.mbox{padding:7px}.mchip{padding:2px 6px;overflow-wrap:normal}
}
@media (prefers-reduced-motion:reduce){.gZone,.tfCard,.tfTimer i{transition:none}}
/* schematic ECG (js/ecg.js), drawn on ECG paper from the theme tokens; wider than a phone: it scrolls sideways */
.ecgFig{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--ecg-paper)}
.ecgFig .ecgScroll{overflow-x:auto}
.ecgSvg{display:block;width:100%;min-width:320px;height:auto}
.ecgSvg .ecgPaper{fill:var(--ecg-paper)}.ecgSvg .ecgMi{stroke:var(--ecg-minor);stroke-width:.5}.ecgSvg .ecgMa{stroke:var(--ecg-major);stroke-width:.9}
.ecgSvg .ecgCal{fill:none;stroke:var(--ecg-trace);stroke-width:1.2}.ecgSvg .ecgTrace{fill:none;stroke:var(--ecg-trace);stroke-width:1.6;stroke-linejoin:round}
.ecgFig figcaption{font-size:12px;color:var(--muted);padding:6px 10px;border-top:1px solid var(--line);background:var(--surface)}
/* Report a mistake (js/report.js): the flag under a reviewed question, the sheet, the toast */
.rpFlag{min-height:var(--tap);display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;padding:0 2px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.rpFlag:hover{color:var(--ink)}
.rpScrim{position:fixed;inset:0;z-index:300;background:var(--scrim);display:grid;place-items:center;padding:16px}
.rpCard{width:100%;max-width:400px;max-height:calc(100dvh - 32px);overflow:auto;padding:18px;display:flex;flex-direction:column;gap:12px;color:var(--ink)}
.rpCard h2{margin:0;font-size:18px}.rpId{margin:0;font-size:13px;color:var(--muted)}
.rpReasons{display:flex;flex-direction:column;gap:6px}.rpWhy{font-weight:700;font-size:14px;margin-bottom:2px}
.rpReason{min-height:var(--tap);display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:14px;text-align:start;background:var(--surface);color:var(--ink)}
.rpReason[aria-checked="true"]{border-color:var(--primary);background:var(--primary-soft)}
.rpDot{width:18px;height:18px;border-radius:50%;border:2px solid var(--muted);flex:none;display:grid;place-items:center}
.rpReason[aria-checked="true"] .rpDot{border-color:var(--primary)}.rpReason[aria-checked="true"] .rpDot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary)}
.rpNote{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:14px}
.rpNote textarea{font:inherit;font-weight:400;font-size:14px;min-height:72px;resize:vertical;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface);color:var(--ink)}
.rpOut{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;background:var(--soft);border-radius:10px;padding:10px 12px;user-select:all}
.rpActions{display:flex;gap:8px;flex-wrap:wrap}.rpActions .gBtn{flex:1 1 140px}
.plToast{position:fixed;inset-inline:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));margin-inline:auto;max-width:440px;z-index:310;background:var(--ink);color:var(--page);border-radius:12px;padding:10px 14px;text-align:center;font-weight:600;font-size:14px;box-shadow:var(--shadow)}
.tfRev .rpFlag{margin-top:2px}
/* Challenge a friend (js/challenge.js): one column, the head-to-head card is the one bold moment */
.chWrap{display:flex;flex-direction:column;gap:12px;max-width:600px;width:100%}
.chCard{padding:16px;display:flex;flex-direction:column;gap:12px;color:var(--ink)}
.chCard h3{margin:0;font-size:17px;line-height:1.3}
.chH1{font-size:21px!important;line-height:1.3;text-wrap:balance}
.chSmall{margin:0;font-size:13px;color:var(--muted);line-height:1.5}.chCenter{text-align:center;margin-top:-6px}
.chRules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.chRule{background:var(--soft);border-radius:12px;padding:10px;text-align:center}
.chRule b{display:block;font-size:18px;font-variant-numeric:tabular-nums}.chRule span{font-size:12px;color:var(--muted)}
.chRule.g b{color:var(--good)}.chRule.r b{color:var(--bad)}
.chField{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:14px}
.chField input,.chPaste{font:inherit;font-weight:400;font-size:16px;min-height:var(--tap);width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface);color:var(--ink)}
.chPaste{font-size:14px;resize:vertical;min-height:84px}
.chField input:focus-visible,.chPaste:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.chGroup{display:flex;flex-direction:column;gap:6px}.chLabel{font-weight:700;font-size:14px}
.chTopics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.chTopic{min-height:var(--tap);border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:9px 12px;text-align:start;font-weight:700;font-size:14px;color:var(--ink)}
.chTopic[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-ink)}
.chNote{margin:0;font-size:13px;color:var(--muted);border-inline-start:3px solid var(--line);padding-inline-start:10px;line-height:1.5}
.chAlert{padding:12px 14px;background:var(--bad-soft);border-color:var(--bad-line);color:var(--ink);font-size:14px;font-weight:600;line-height:1.5}
.chGo{min-height:50px;font-size:15px}
/* play */
.chPlay{gap:10px}
.chHud{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}.chHud b{color:var(--ink)}
.chTimer{height:6px;border-radius:999px;background:var(--soft);overflow:hidden}
.chTimer i{display:block;height:100%;background:var(--primary);transform-origin:left center;transition:transform .1s linear}
[dir="rtl"] .chTimer i{transform-origin:right center}
.chVs{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.chStmt{margin:0;font-size:18px;font-weight:700;line-height:1.6;min-height:5.5em;display:flex;align-items:center}
.chAns{display:grid;grid-template-columns:1fr auto 1fr;gap:8px}
.chZName{margin:2px 0 0;font-size:22px;color:var(--ink)}.chZones{display:grid;gap:8px}
.chZ{min-height:var(--tap);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 13px;text-align:start;line-height:1.35;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.chZ b{font-size:15px;font-weight:800}.chZ small{font-size:12px;font-weight:500;color:var(--muted)}
.chZ:disabled{cursor:default}.chZ.right{border-color:var(--good);background:var(--good-soft)}.chZ.wrongpick{border-color:var(--bad);background:var(--bad-soft)}
.chZ.s{border-style:dashed;color:var(--muted);align-items:center;font-size:14px;font-weight:700}
.chWhy{margin:0;padding:10px 12px;border-radius:12px;background:var(--soft);font-size:14px;line-height:1.5;color:var(--ink)}
.chFmt3{grid-column:1/-1}
.chA{min-height:56px;border-radius:14px;padding:12px 10px;font-weight:800;font-size:16px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink)}
.chA.t{border-color:var(--good-line);background:var(--good-soft);color:var(--good)}.chA.f{border-color:var(--bad-line);background:var(--bad-soft);color:var(--bad)}
.chA.s{font-size:13px;font-weight:700;color:var(--muted);border-style:dashed;padding-inline:14px}
.chA:disabled{opacity:.55;cursor:default}
.chFlash{border-radius:12px;padding:10px 12px;font-weight:700;font-size:14px;text-align:center}
.chFlash.c{background:var(--good-soft);color:var(--good)}.chFlash.w{background:var(--bad-soft);color:var(--bad)}.chFlash.s{background:var(--soft);color:var(--muted)}
.chCaseTag{align-self:flex-start;font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--rival-soft);color:var(--rival)}
.chStem{margin:0;font-size:15px;line-height:1.6}
.chLabs{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.chLabs table{width:100%;border-collapse:collapse;font-size:14px}
.chLabs td{padding:7px 12px;border-top:1px solid var(--line);color:var(--ink)}.chLabs tr:first-child td{border-top:0}
.chLabs td:last-child{text-align:end;font-weight:700;font-variant-numeric:tabular-nums}.chLabs tr:nth-child(even) td{background:var(--soft)}
.chQ{margin:0;font-weight:800;font-size:15.5px;line-height:1.5}
.chOpts{display:flex;flex-direction:column;gap:8px}
.chOpt{min-height:var(--tap);border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 13px;text-align:start;line-height:1.45;font-size:15px;color:var(--ink)}
.chOpt:disabled{cursor:default}
.chOpt.right{border-color:var(--good);background:var(--good-soft)}.chOpt.wrongpick{border-color:var(--bad);background:var(--bad-soft)}
.chOpt.s{border-style:dashed;color:var(--muted);text-align:center;font-weight:700}
/* result, share, review */
.chScoreCard{align-items:center;text-align:center;gap:6px}
.chBig{font-size:52px;font-weight:900;line-height:1;color:var(--primary-ink);font-variant-numeric:tabular-nums}
.chShare{border:1.5px dashed var(--primary-line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--primary-soft);color:var(--ink)}
.chShare h3{margin:0;font-size:17px}
.chMsg{white-space:pre-wrap;font-size:14px;line-height:1.55;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;overflow-wrap:anywhere}
.chRow{display:flex;gap:8px;flex-wrap:wrap}.chRow>.gBtn{flex:1 1 160px}
.gBtn.wa{background:var(--wa);color:var(--on-wa);border-color:var(--wa);display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.chGrid{display:flex;flex-direction:column;gap:6px}
.chRowQ,.chColHead{display:grid;grid-template-columns:24px minmax(0,1fr) 28px 28px;gap:8px;align-items:start}
.chRowQ{border:1px solid var(--line);border-radius:12px;padding:4px 10px;background:var(--surface)}
.chRowQ.solo{grid-template-columns:24px minmax(0,1fr) 28px}
.chRowQ .n{font-size:12px;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums;padding-top:13px}
.chRowQ summary{cursor:pointer;min-height:var(--tap);display:flex;align-items:center;font-size:14px;line-height:1.45;list-style:none;padding-block:6px}
.chRowQ summary::-webkit-details-marker{display:none}
.chRowQ summary b{margin-inline-end:4px}
.chRowQ details p{margin:2px 0 0;font-size:13px;color:var(--muted);line-height:1.5}.chRowQ details p b{color:var(--ink)}
.chMk{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:13px;margin-top:8px}
.chMk.c{background:var(--good-soft);color:var(--good)}.chMk.w{background:var(--bad-soft);color:var(--bad)}.chMk.s{background:var(--soft);color:var(--muted)}
.chColHead{padding:0 11px;font-size:12px;font-weight:800}
.chColHead .hd{width:28px;height:22px;border-radius:7px;display:grid;place-items:center}
.chColHead .hd.me{background:var(--primary-soft);color:var(--primary-ink)}.chColHead .hd.op{background:var(--rival-soft);color:var(--rival)}
/* invite, head-to-head, leaderboard */
.chInvite{background:var(--rival-soft);border-color:var(--rival-line)}
.chBeatRow{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.chBeat{font-size:34px;font-weight:900;color:var(--rival);font-variant-numeric:tabular-nums;line-height:1}
.chVerdict{margin:0;font-size:20px;font-weight:800;text-align:center;text-wrap:balance;color:var(--ink)}
.chVersus{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.chSide{padding:18px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-width:0}
.chSide.me{background:var(--primary-soft)}.chSide.op{background:var(--rival-soft)}
.chSide .who{font-weight:800;font-size:14px;overflow-wrap:anywhere}.chSide.me .who{color:var(--primary-ink)}.chSide.op .who{color:var(--rival)}
.chSide .pts{font-size:46px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.chSide .meta{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.chSide .crown{font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--surface);color:var(--rival);min-height:22px}
.chMid{display:grid;place-items:center;background:var(--surface);padding:0 10px;font-weight:800;color:var(--label);font-size:13px;letter-spacing:.08em}
.chBoard{display:flex;flex-direction:column;gap:6px}
.chBrow{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-variant-numeric:tabular-nums;color:var(--ink)}
.chBrow .rk{font-weight:800;color:var(--label);text-align:center}.chBrow.first .rk{color:var(--rival)}
.chBrow .nm{font-weight:700;overflow-wrap:anywhere}.chBrow .p{font-weight:900;font-size:17px}.chBrow .tm{font-size:12px;color:var(--muted)}
.chBrow.me{border-color:var(--primary);background:var(--primary-soft)}.chBrow.me .nm{color:var(--primary-ink)}
.chRowQ .rpFlag{margin-bottom:2px}
@media (max-width:420px){.chSide .pts{font-size:38px}.chStmt{font-size:17px}.chA{font-size:15px}}
@media (prefers-reduced-motion:reduce){.chTimer i{transition:none}}
/* Translations (js/suggest.js): the "Auto-translated" note, "Suggest a better translation" and its sheet */
.i18nBox:empty,.mechI18n:empty{display:none}
.i18nFoot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0}
.autoNote{font-size:12px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.sugBtn{min-height:var(--tap);display:inline-flex;align-items:center;border:0;background:transparent;padding:0 2px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.sugBtn:hover{color:var(--ink)}
.sugCard{max-width:560px}
.sugList{display:flex;flex-direction:column;gap:12px}
.sugItem{display:flex;flex-direction:column;gap:4px}
.sugEn{font-size:12.5px;line-height:1.4;color:var(--muted);text-align:start}
.sugItem textarea{font:inherit;font-size:14px;line-height:1.45;width:100%;box-sizing:border-box;min-height:var(--tap);resize:vertical;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface);color:var(--ink)}
.rpActions a.gBtn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

/* ---- Adverse-effect cards (js/adverse.js): a text-free picture on a white stage in BOTH themes (like the mechanism
   figures). The app draws the effect name as a banner (theme tokens) and a lab card's analyte inside its white panel
   (fixed dark ink: --fig-ink). The stage never mirrors (positions are fractions of the image); only text follows the
   language direction. ---- */
.aeCard{display:block;width:100%;min-width:0}
.aeStage{position:relative;display:block;width:100%;background:var(--fig-card);border-radius:12px;overflow:hidden;container-type:inline-size;direction:ltr}
.aeImg{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;user-select:none;-webkit-user-select:none}
.aeBanner{position:absolute;left:5%;right:5%;bottom:4%;display:flex;justify-content:center;pointer-events:none}
.aeBannerTxt{max-width:100%;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:4px 10px;font-weight:800;font-size:clamp(12px,5.4cqi,17px);line-height:1.25;text-align:center;box-shadow:0 2px 8px var(--shadow-color);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.aePanel{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:none;color:var(--fig-ink)}
.aePanelTxt{display:inline-block;white-space:nowrap;font-weight:800;line-height:1.1;color:var(--fig-ink)}
.aePanel.pill{background:var(--fig-card);border:1px solid var(--fig-line);border-radius:999px;padding:2px 8px;box-shadow:0 1px 4px var(--shadow-color)}
.aeBoxed{position:absolute;top:4%;left:4%;z-index:1;background:var(--bad-soft);color:var(--bad);border:1px solid var(--bad-line);border-radius:999px;padding:2px 8px;font-size:12px;font-weight:800;line-height:1.3}
[dir="rtl"] .aeBoxed{left:auto;right:4%}
.aeGrid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:600px){.aeGridS{grid-template-columns:repeat(4,minmax(0,1fr))}.aeGridL{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.aeGridS{grid-template-columns:repeat(6,minmax(0,1fr))}.aeGridL{grid-template-columns:repeat(4,minmax(0,1fr))}}

#aePanel{margin-top:10px}
#aePanel .panelHead h3{margin:0}
.aeLib{min-height:var(--tap);border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:0 10px;font-size:12px;font-weight:800;color:var(--primary-ink)}
.aeSubH{font-size:13px;margin:14px 0 8px;color:var(--ink)}
.aeChip{display:flex;flex-direction:column;gap:4px;min-width:0;padding:5px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);text-align:start}
.aeChip:hover,.aeTile:hover{border-color:var(--primary-line)}
.aeAlso{align-self:center;font-size:12px;font-weight:700;color:var(--muted)}
.aeHead .aeCount{margin:8px 0 0;font-size:12px;color:var(--muted)}
.aeFilters{margin-top:8px}
.aeTile{display:flex;flex-direction:column;gap:6px;min-width:0;padding:6px;text-align:start;color:var(--ink)}
.aeTileMeta{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;font-weight:700;color:var(--muted);padding:0 2px 2px}
.aeSev{display:inline-block;font-size:12px;font-weight:800;line-height:1.3;border-radius:999px;padding:2px 8px;border:1px solid}
.aeSev.s-common{background:var(--primary-soft);color:var(--primary-ink);border-color:var(--primary-line)}
.aeSev.s-serious{background:var(--mid-soft);color:var(--mid);border-color:var(--mid-line)}
.aeSev.s-rare-serious{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line)}
.aeOrganTag{display:inline-block;font-size:12px;font-weight:800;line-height:1.3;border-radius:999px;padding:2px 8px;background:var(--soft);border:1px solid var(--line);color:var(--ink)}
/* the bottom sheet (a centred dialog from 600px): card sheet, image-question feedback */
.sheetScrim{position:fixed;inset:0;z-index:300;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:560px;max-height:92dvh;display:flex;flex-direction:column;border-radius:20px 20px 0 0;overflow:hidden;color:var(--ink);box-shadow:0 -8px 30px var(--shadow-color)}
@media (min-width:600px){.sheetScrim{align-items:center;padding:16px}.sheet{border-radius:var(--r);max-height:calc(100dvh - 32px)}}
.sheetBar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-block:6px;padding-inline:16px 6px;border-bottom:1px solid var(--line);background:var(--soft)}
.sheetBar h2{margin:0;font-size:17px;line-height:1.3;min-width:0}
.sheetClose{flex:none;min-width:var(--tap);min-height:var(--tap);border:0;border-radius:10px;background:transparent;color:var(--ink);font-size:18px}
.sheetClose:hover{background:var(--surface)}
.sheetBody{flex:1 1 auto;min-height:0;overflow:auto;padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.sheetActions{display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--surface)}
.sheetActions .gBtn{flex:1 1 140px}
.aeSheetCard{width:100%;max-width:380px;margin:0 auto}
.aeCaption{margin:0;text-align:center;font-size:14px;color:var(--muted)}
.aeMeta{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
.aeSec h3{margin:0 0 4px;font-size:13px;letter-spacing:.02em;color:var(--label)}
.aeSec p,.aeSec li{margin:0;font-size:15px;line-height:1.5}
.aeSec ul{margin:0;padding-inline-start:20px}.aeSec li+li{margin-top:3px}
.aeDrugs{display:flex;flex-wrap:wrap;gap:6px}
.aeDrug{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:6px 12px;border:1px solid var(--primary-line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:700}
.aeDrug.off{border-style:dashed;border-color:var(--line);color:var(--muted)}
.aeTier,.aeBoxedS{font-size:12px;font-weight:800;border-radius:999px;padding:1px 6px;background:var(--soft);color:var(--muted)}
.aeBoxedS{background:var(--bad-soft);color:var(--bad)}
.sheet .feedback{margin:0;font-size:15px}
.iqWhyNot{font-size:15px;line-height:1.45;background:var(--warn-bg);color:var(--warn-ink);border-radius:10px;padding:8px 10px}
.iqWhyNot strong{color:var(--warn-ink)}
/* image questions (js/imageq.js) */
.iqCard{padding:12px;display:grid;gap:10px;margin-top:10px}
.iqCard .aeQ{width:100%;max-width:420px;margin:0 auto}
.iqStem{margin:0;font-size:16px;font-weight:700;line-height:1.45}
.iqImgOpts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:1024px){.iqImgOpts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.iqImgOpt{position:relative;display:block;min-width:0;min-height:var(--tap);padding:4px;border:2px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink)}
.iqImgOpt.correct{border-color:var(--good);box-shadow:0 0 0 2px var(--good)}
.iqImgOpt.wrong{border-color:var(--bad);box-shadow:0 0 0 2px var(--bad)}
.iqImgOpt:disabled{cursor:default}
.iqLet{position:absolute;top:10px;left:10px;z-index:2;width:28px;height:28px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-size:14px;font-weight:800;display:grid;place-items:center}
[dir="rtl"] .iqLet{left:auto;right:10px}
.iqTile:disabled{opacity:.6;cursor:not-allowed}
.iqReview .gMini{margin-top:4px;align-self:flex-start}

/* ---- ECG strips (js/visuals.js): drawn inline; the SVG uses these variables (light and dark from the theme) ---- */
:root{--v-ink:var(--ink);--v-muted:var(--muted);--v-accent:var(--primary);--v-bad:var(--bad);--v-fill:var(--surface)}   /* --v-blue: in the theme blocks */
.ecgCard{margin:0;display:grid;gap:8px;min-width:0}
.ecgHead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ecgTitle{margin:0;font-size:16px;line-height:1.3}
.ecgChips{display:flex;flex-wrap:wrap;gap:6px}
.ecgChip{display:inline-block;font-size:12px;font-weight:800;line-height:1.3;padding:2px 8px;border-radius:999px;background:var(--soft);border:1px solid var(--line);color:var(--ink)}
.ecgChip.bad{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad)}
.ecgScroll{overflow-x:auto;overflow-y:hidden;border:1px solid var(--line);border-radius:12px;background:var(--v-fill);overscroll-behavior-x:contain;scrollbar-width:thin}
.ecgStrip{display:block;min-width:720px;cursor:zoom-in}
@media (min-width:600px){.ecgStrip{min-width:0}}
.ecgSvg{display:block;width:100%;height:auto}
.ecgSvg [data-role="meta"]{display:none}
.ecgStrip text.ecgTiny{display:none}   /* too small to read inline: the zoom view shows it */
.ecgLabelsNote{margin:0;font-size:12px;color:var(--muted)}
.ecgFoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ecgHint{display:none;margin:0;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
@media (max-width:599px){.ecgHint{display:flex}}
.ecgHintArrow{display:inline-block;font-size:16px;color:var(--primary-ink);animation:ecgNudge 1.4s ease-in-out infinite}
@keyframes ecgNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.ecgHintArrow{animation:none}}
.ecgZoomBtn{min-height:var(--tap);margin-inline-start:auto;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:0 12px;font-size:12px;font-weight:800;color:var(--primary-ink)}
.visChips{display:flex;flex-wrap:wrap;gap:6px}
.visChip{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:6px 12px;border:1px solid var(--primary-line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:700}
.visChip>span:first-child{color:var(--primary-ink);font-size:16px}
.ecgGrid{display:grid;gap:10px;grid-template-columns:minmax(0,1fr);margin-top:10px}
@media (min-width:600px){.ecgGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.ecgGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ecgTile{display:grid;gap:8px;padding:10px;text-align:start;color:var(--ink);min-width:0}
.ecgTileTitle{font-size:14px;font-weight:800}
.ecgPrev{display:block;border-radius:10px;border:1px solid var(--line);background:var(--v-fill);overflow:hidden;pointer-events:none}
.ecgPrev svg{display:block;width:100%;height:auto}
.ecgPrev text{display:none}   /* a thumbnail: the labels are on the strip itself */
.ecgDetail{padding:12px;display:grid;gap:14px;margin-top:10px}
.ecgQ h3{margin:0 0 6px;font-size:14px}
.ecgFacts li{font-size:15px}
.visSheet .ecgCard{margin:0}
/* full screen: above a sheet; on a portrait phone the view is turned to landscape and a drag pans it */
.diagramFull.ecgFull{z-index:400}
.dfCanvas .ecgZoom{flex:none;margin:0 auto;background:var(--v-fill);border-radius:8px}
.dfCanvas .ecgZoom [data-role="meta"]{display:none}
.diagramFull.land{inset:auto;top:0;left:100vw;width:100vh;width:100dvh;height:100vw;transform:rotate(90deg);transform-origin:top left}
.diagramFull.land .dfScroll{touch-action:none}

/* ======================= Companion (2026-10): navigation, Today, the question screen, Learn, Play, Library, Me,
   onboarding, the mascot and celebrations. Cards 20 px radius, buttons 14 px and at least 48 px tall, soft shadows. */
.srOnly{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.card{border-radius:var(--r);box-shadow:var(--shadow-soft)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px;border-radius:999px;font-size:14px;font-weight:800;color:var(--ink);background:var(--soft);border:0}
.chip .clay,.chip img{width:22px;height:22px}
.clay{display:block;object-fit:contain;user-select:none;-webkit-user-select:none}
.chevGo{flex:none;display:inline-flex;color:var(--ink-2);margin-inline-start:auto}
.linkBtn{min-height:var(--tap);min-width:var(--tap);justify-content:center;display:inline-flex;align-items:center;gap:6px;padding:0 4px;border:0;background:none;color:var(--primary-ink);font-size:14px;font-weight:800}
.pageHead{padding:4px 2px 2px}.pageHead h2{margin:0;font-size:26px;line-height:1.2;color:var(--ink);display:flex;align-items:center;gap:8px}.pageHead p{margin:4px 0 0;font-size:15px;color:var(--ink-2)}
.secH{display:flex;align-items:center;gap:8px;margin:10px 2px 0;font-size:17px;color:var(--ink)}
.ring{--p:0;position:relative;flex:none;width:72px;height:72px;border-radius:50%;background:conic-gradient(var(--coral) calc(var(--p)*1%),var(--soft) 0);display:grid;place-items:center}
.ring>span{width:56px;height:56px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:18px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
/* desktop rail: the five tabs, then the modules */
.sidebar{background:var(--nav-bg);border-inline-end:1px solid var(--nav-line)}
.brand{border-bottom:1px solid var(--nav-line)}.brand h1{color:var(--nav-ink)}
.logo{width:40px;height:40px;border-radius:12px;object-fit:cover;background:var(--primary-soft)}
.navItem{font-size:14px;font-weight:800;border-radius:12px;gap:10px}
.navItem.active{box-shadow:none;background:var(--nav-active);color:var(--nav-active-ink)}
.tabNav .ic{width:22px;height:22px}
.moduleBtn{font-weight:700}
/* the tab bar: phones and tablets */
.tabBar{display:none}
@media (max-width:1023px){
 .sidebar{display:none}.topbar{display:none}
 .tabBar{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:60;gap:4px;padding:6px max(6px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));background:var(--nav-bg);border-top:1px solid var(--nav-line);box-shadow:0 -4px 16px var(--shadow-color)}
 .tab{flex:1 1 0;min-width:0;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;border-radius:16px;background:transparent;color:var(--nav-muted);font-size:12px;font-weight:800;padding:4px 2px}
 .tab .ic{width:24px;height:24px}.tab .tabLbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .tab.active{background:var(--nav-active);color:var(--nav-active-ink)}
 .canvas{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
 body.inQuiz .tabBar,body.inOnboard .tabBar,body.inGame .tabBar{display:none}
 body.inQuiz .canvas,body.inOnboard .canvas,body.inGame .canvas{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
}
body.inQuiz .footer,body.inOnboard .footer{display:none}
/* the mascot: one entrance (scale and fade), never a loop; peek and point mirror in right-to-left */
.mascot{position:relative;display:inline-flex;flex:none;width:var(--ms);height:var(--ms)}
.mascotImg{width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-select:none;animation:mascotIn var(--motion-base) var(--ease-pop) both}
.mascot.mirror .mascotImg{scale:-1 1}
.mascotBubble{position:absolute;bottom:100%;inset-inline-start:50%;min-width:140px;max-width:220px;padding:8px 12px;border-radius:14px;background:var(--card);color:var(--ink);font-size:14px;font-weight:700;box-shadow:var(--shadow-soft)}
@keyframes mascotIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
/* ---- Today ---- */
.todayPage,.learnPage,.libraryPage,.mePage,.mechPage,.quizSetupPage{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;max-width:720px;margin-inline:auto}
.tdHello{display:flex;align-items:center;gap:12px;padding:2px}
.tdHelloTxt{min-width:0;flex:1}.tdHelloTxt h2{margin:0;font-size:24px;line-height:1.2;color:var(--ink)}
.tdChips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.streakChip{background:var(--sun-soft)}
.streakChip.pending{background:var(--soft);color:var(--ink-2)}.streakChip.pending .clay,.streakChip.pending svg,.meStat.pending .clay{filter:grayscale(1);opacity:.55}.streakKeep{margin-top:6px}
.focusChip{min-height:var(--tap);padding:0 14px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:14px}
.tdMission{padding:18px;display:grid;gap:14px}
.tdMissionTop{display:flex;align-items:center;justify-content:space-between;gap:12px}.tdMission h3{margin:0;font-size:21px;color:var(--ink)}
.tdSub{display:block;margin:2px 0 0;font-size:14px;color:var(--ink-2)}
.tdGo{width:100%}
.tdDone{margin:0;display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;color:var(--good)}
.tdMission.done .ring{background:var(--mint)}
.tdCard{display:flex;align-items:center;gap:12px;width:100%;min-height:76px;padding:14px 16px;text-align:start;color:var(--ink)}
.tdTitle,.tdCaseTitle{display:block;font-size:18px;font-weight:800;line-height:1.3;color:var(--ink)}
.tdLabel{display:block;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--label)}
.tdReviewTxt,.tdCaseTxt{min-width:0;flex:1}
.tdReview.quiet{box-shadow:none;background:var(--panel)}
.tdThink{margin-block:-10px}
.tdCaseImg{flex:none;width:96px;height:68px;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:var(--primary-soft)}
.tdCaseImg .clay{width:56px;height:56px}.tdCaseImg.photo{background:var(--case-frame)}.tdCaseImg.photo img{width:100%;height:100%;object-fit:contain}
.modTiles{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;scrollbar-width:thin}
.modTile{flex:0 0 auto;scroll-snap-align:start;width:108px;min-height:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px 6px;border:0;border-radius:18px;background:var(--mt);color:var(--ink);font-size:13px;font-weight:800;text-align:center;line-height:1.2}
.modTile .clay{width:48px;height:48px}.modTile .modIc{background:transparent}
.tdLevel{padding:14px 16px}
.tdLevelTop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:16px;color:var(--ink)}.tdLevelTop span{color:var(--ink-2);font-size:14px}.tdLevelTop .clay{width:24px;height:24px}
.xpBar{display:block;height:12px;margin-top:10px;border-radius:999px;background:var(--soft);overflow:hidden}.xpBar i{display:block;height:100%;border-radius:inherit;background:var(--sun)}
/* ---- the question screen ---- */
.quizPage{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;max-width:680px;margin-inline:auto}
.qzTop{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:6px 0;background:var(--page)}
.qzClose{flex:none;width:var(--tap);height:var(--tap);display:grid;place-items:center;border:0;border-radius:50%;background:var(--card);color:var(--ink);box-shadow:var(--shadow-soft)}
.qzProg{flex:1;min-width:0;display:grid;gap:6px}.qzCount{font-size:14px;font-weight:800;text-align:center;color:var(--ink)}
.qzBar{display:block;height:10px;border-radius:999px;background:var(--soft);overflow:hidden}.qzBar i{display:block;height:100%;border-radius:inherit;background:var(--coral)}
.qzRun{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 10px;border-radius:999px;background:var(--sun-soft);color:var(--ink);font-size:14px;font-weight:800}
.qzRun.off{background:var(--soft)}
.qzMod{flex:none;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--primary-soft);color:var(--primary-ink)}
.qzCard{position:relative;overflow:hidden;display:grid;gap:12px;padding:14px}
.qzMedia{display:grid;justify-items:center;min-width:0}.qzMedia>*{max-width:100%}
.qzMedia .aeCard{width:min(100%,380px,46vh)}.qzMedia .ecgCard{width:100%}
.qzMech{margin-top:12px;border-top:1px solid var(--line);padding-top:8px}.qzMech summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:800;font-size:15px;color:var(--primary-ink)}.qzMech[open] summary{margin-bottom:8px}
.qzVc{width:100%}.qzVc img{max-height:44vh}
.qzCase{width:100%;display:grid;gap:10px;padding:12px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.qzCaseStem{margin:0;font-size:15px;line-height:1.55;color:var(--ink)}.qzEcg{margin:0;overflow-x:auto}
.qzKicker{margin:0;font-size:13px;font-weight:800;color:var(--label)}
.qzStemRow{display:flex;align-items:flex-start;gap:6px}
.qzStem{flex:1;min-width:0;margin:0;font-size:18px;line-height:1.4;color:var(--ink)}
.qzPeek{margin-inline-end:-24px;margin-top:-4px}
.qzOpts{display:grid;gap:10px}
.qzOpt{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-btn);background:var(--card);color:var(--ink);font-size:16px;font-weight:700;line-height:1.35;text-align:start}
.qzOpt:not(:disabled):hover{border-color:var(--primary-line);background:var(--panel)}
.qzOptTxt{min-width:0;flex:1}
.qzRadio{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--ink-2)}
.qzOpt .ic{width:24px;height:24px}
.qzOpt.sel{border-color:var(--primary);background:var(--primary-soft)}.qzOpt.sel .qzRadio{border-color:var(--primary);background:var(--primary);box-shadow:inset 0 0 0 4px var(--primary-soft)}
.qzOpt.right{border-color:var(--mint);background:var(--mint-soft)}.qzOpt.right .ic{color:var(--good)}
.qzOpt.wrong{border-color:var(--accent);background:var(--accent-soft)}.qzOpt.wrong .ic{color:var(--accent-text)}
.qzOpt.dim{color:var(--ink-2)}
.qzOpt:disabled{cursor:default}
.qzOpt.idk{border-style:dashed;color:var(--ink-2)}
.qzImgOpt.right{outline:3px solid var(--mint)}.qzImgOpt.wrong{outline:3px solid var(--accent)}.qzImgOpt.sel{outline:3px solid var(--primary)}
.qzPlaceNav{display:flex;gap:10px}.qzPlaceNav .gBtn{flex:1}
/* the feedback sheet: in the page under the options (never an overlay), rising once */
.qzSheet{display:grid;gap:12px;padding:16px;border-radius:24px 24px var(--r) var(--r);background:var(--card);border:1px solid var(--line);box-shadow:0 -6px 24px var(--shadow-color);animation:qzUp var(--motion-base) var(--ease-out) both}
.qzSheet.good{border-top:5px solid var(--mint)}.qzSheet.bad{border-top:5px solid var(--coral);animation-name:qzFade;animation-duration:var(--motion-fast)}
@keyframes qzUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes qzFade{from{opacity:0}to{opacity:1}}
.qzSheetHead{display:flex;align-items:center;gap:12px}.qzSheetTxt{min-width:0;flex:1}
.qzSheetHead h3{margin:0;font-size:20px;line-height:1.25;color:var(--ink)}
.qzChips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.xpChip{background:var(--sun-soft)}.runChip{background:var(--coral-soft)}
.qzRight{margin:0;padding:10px 12px;border-radius:12px;background:var(--mint-soft);font-size:15px;line-height:1.45;color:var(--ink)}
.qzWhy{font-size:15px;line-height:1.55;color:var(--ink)}.qzWhy p{margin:0 0 6px}.qzWhy p:last-child{margin:0}
.qzWhyNot{color:var(--ink-2)}
.qzWhy.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.qzWhy.clamp p{display:inline}.qzWhy.clamp p+p::before{content:" "}
.qzMoreWhy{justify-self:start;margin-top:-6px}
.qzActs{display:flex;flex-wrap:wrap;gap:8px}.qzNext{flex:1 1 200px}.qzActs .gBtn{flex:1 1 160px}
.qzEnd{position:relative;overflow:hidden;display:grid;justify-items:center;gap:12px;padding:20px 16px;text-align:center}
.qzEnd h2{margin:0;font-size:24px;color:var(--ink)}.qzEndLine{margin:0;font-size:16px;color:var(--ink-2)}
.qzEndStats{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}.qzEndChips{display:flex;flex-wrap:wrap;gap:8px}
.qzPerfect{margin:0;font-size:16px;font-weight:800;color:var(--good)}
.qzEnd .qzActs{width:100%}
.qzReview{width:100%;text-align:start}.qzReview summary{min-height:var(--tap);display:flex;align-items:center;font-weight:800;color:var(--primary-ink);cursor:pointer}
.qzReview ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.qzReview li{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:12px;background:var(--panel);font-size:14px}
.qzReview li>span{display:grid;gap:4px;min-width:0}.qzReview li small{font-size:13px;color:var(--ink-2)}.qzReview li small.ok{color:var(--good)}
.qzReview li.ok>.ic{color:var(--good)}.qzReview li.no>.ic{color:var(--accent-text)}
.plReview{padding:4px 14px 12px}
/* ---- focus cards (onboarding, the picker, Me): a selected state, not chevrons ---- */
.focusCards{display:grid;gap:10px;width:100%}
.focusCard{display:flex;align-items:center;gap:14px;width:100%;min-height:76px;padding:12px 16px;border:2px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);text-align:start}
.focusCard[aria-checked="true"]{border-color:var(--primary);background:var(--primary-soft)}
.fcIc{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary-ink)}.fcIc .ic{width:28px;height:28px}
.focusCard[aria-checked="true"] .fcIc{background:var(--card)}
.fcTxt{min-width:0;flex:1}.fcTxt b{display:block;font-size:17px}.fcTxt small{display:block;font-size:14px;color:var(--ink-2)}
.fcCheck{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;color:transparent}
.focusCard[aria-checked="true"] .fcCheck{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.focusTag{justify-self:start;display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:800;color:var(--ink)}
.focusTag.f-mech{background:var(--primary-soft);color:var(--primary-ink)}.focusTag.f-bridge{background:var(--sun-soft)}.focusTag.f-clinical{background:var(--coral-soft)}
/* ---- Learn ---- */
.lnHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lnRetake{min-height:var(--tap);font-size:14px}
.lnLevel{margin:0 2px;font-size:14px;font-weight:800;color:var(--ink-2)}
.lnChips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
.lnChip{flex:none;min-height:var(--tap);display:inline-flex;align-items:center;gap:6px;padding:0 14px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-size:14px;font-weight:800}
.lnChip small{font-size:12px;font-weight:700;color:var(--ink-2)}
.lnChip.active{background:var(--mt);border-color:transparent}
.lnDot{width:12px;height:12px;border-radius:50%;background:var(--mc)}
.lnRec{font-size:12px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--coral);color:var(--on-coral)}
.lnMap{padding:16px;display:grid;gap:8px}
.lnMapHead{display:flex;align-items:center;gap:12px}.lnMapHead .clay{width:52px;height:52px}.lnMapHead h3{margin:0;font-size:20px;color:var(--ink)}.lnMapHead p{margin:2px 0 0;font-size:14px;color:var(--ink-2)}
.lnEarned{margin-inline-start:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}.lnEarned .clay{width:36px;height:36px}
.lnMapHead>div{min-width:0}
.lnPath{position:relative;padding:8px 0 4px}
.lnRoad{position:absolute;inset:0;pointer-events:none;overflow:visible}
.lnRoadAll{fill:none;stroke:var(--primary-soft);stroke-width:14;stroke-linecap:round}
.lnRows{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:14px}
.lnGroup{text-align:center}.lnGroup>span:first-child{display:inline-block;max-width:90%;padding:3px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:12px;font-weight:800;color:var(--ink-2)}
.lnNode{position:relative;min-height:72px;display:flex;align-items:center;--step:15%}
.lnBtn{flex:none;position:relative;width:64px;height:64px;margin-inline-start:calc(50% - 32px + var(--x) * var(--step));display:grid;place-items:center;border:0;border-radius:50%;color:var(--ink);box-shadow:0 4px 0 var(--shadow-color)}
.lnNode.done .lnBtn{background:var(--mint);color:var(--on-mint)}
.lnNode.current .lnBtn{background:var(--coral);color:var(--on-coral);box-shadow:0 0 0 6px var(--coral-soft),0 4px 0 var(--shadow-color)}
.lnNode.open .lnBtn{background:var(--card);color:var(--primary-ink);border:2px solid var(--primary-line);box-shadow:0 3px 0 var(--shadow-color)}
.lnLbl{position:absolute;top:50%;transform:translateY(-50%);display:grid;gap:4px;inset-inline-start:calc(50% + 40px + var(--x) * var(--step));max-width:calc(50% - 48px - var(--x) * var(--step))}
.lnNode[style*="--x:1"] .lnLbl,.lnNode[style*="--x:2"] .lnLbl{inset-inline-start:auto;inset-inline-end:calc(50% + 40px - var(--x) * var(--step));max-width:calc(50% - 48px + var(--x) * var(--step));text-align:end;justify-items:end}
.lnName{font-size:14px;font-weight:800;line-height:1.25;color:var(--ink)}
.lnHere{display:grid;gap:2px;padding:8px 10px;border-radius:14px;background:var(--coral-soft);color:var(--ink)}.lnHere b{font-size:15px}.lnHere small{font-size:12px}
/* the current node's row is tall enough for its bubble (up to 5 lines at 360px), so the bubble never reaches the next
   row's node or label */
.lnNode.current{min-height:132px;padding-block:6px}.lnNode.current .lnName{font-size:15px}
.lnNode.current .lnLbl{position:static;transform:none;flex:1;min-width:0;max-width:none;margin-inline-start:12px;text-align:start;justify-items:start}   /* in the flow: the row grows with the bubble and the name, in any language */
.lnStars{display:flex;gap:3px}.lnStars i{width:12px;height:12px;border-radius:50%;background:var(--sun)}
.lnPoint{position:absolute;top:50%;transform:translateY(-50%);inset-inline-end:calc(50% + 38px)}
.lnEnd{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;font-size:13px;font-weight:800;color:var(--ink-2)}
.lnEnd.got{color:var(--ink)}
.lnTrophy{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--ink-2)}.lnEnd.got .lnTrophy{background:var(--sun);color:var(--on-sun)}
/* ---- Library ---- */
.libSearch{width:100%}.libSearch .search{height:48px;font-size:16px;border-radius:var(--r-btn);border-color:var(--primary-line)}.libSearch .searchResults{top:54px}
.libMods,.libRows{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:10px}
.libMod,.libRow{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;padding:12px 14px;text-align:start;color:var(--ink)}
.libModIc{flex:none;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--mt)}.libModIc .clay{width:42px;height:42px}.libModIc .modIc{background:transparent}
.libModTxt,.libRowTxt{min-width:0;flex:1;display:grid;gap:2px}.libModTxt b,.libRowTxt b{font-size:16px}.libModTxt small,.libRowTxt small{font-size:13px;color:var(--ink-2)}
.libIc{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary-ink)}
.mechSec{display:grid;gap:8px}.mechCard{padding:10px 12px;align-items:center}
.qsCount{margin:0 2px;font-size:14px;font-weight:800;color:var(--ink-2)}.qsStart{width:100%}
/* ---- Play ---- */
.playVs{display:grid;justify-items:center;gap:8px;padding:16px;text-align:center}
.playVs h3{margin:0;font-size:22px;color:var(--ink)}
.vsScene{display:flex;align-items:center;justify-content:center;gap:2px}
.vsWord{font-size:30px;font-weight:900;color:var(--primary-ink);font-style:italic}
.rival{width:116px;height:116px;object-fit:contain;animation:mascotIn var(--motion-base) var(--ease-pop) both}
.playVsSub{margin:0;font-size:15px;color:var(--ink-2)}.playVsGo{width:100%;max-width:420px}
.playCat{margin:14px 2px 0;font-size:15px;font-weight:800;color:var(--ink-2)}
.playGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:10px}
.playTile,.playBoard{display:flex;align-items:center;gap:12px;width:100%;min-height:80px;padding:12px 14px;text-align:start;color:var(--ink)}
.ptIc{flex:none;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--mt,var(--primary-soft));color:var(--ink)}.ptIc .clay{width:42px;height:42px}.ptIc .ic{width:26px;height:26px}
.ptTxt{min-width:0;flex:1;display:grid;gap:2px}.ptTxt b{font-size:16px;line-height:1.25}.ptTxt small{font-size:13px;color:var(--ink-2)}
/* ---- Me ---- */
.meHead{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px}
.meWho{min-width:0;flex:1}.meWho h2{margin:0;font-size:22px;color:var(--ink)}
.meNudge{flex-basis:100%;display:grid;gap:10px;padding:12px 14px;border-radius:16px;background:var(--sun-soft);color:var(--ink)}.meNudge p{margin:0;font-size:15px;font-weight:700}
.meNudgeActs{display:flex;flex-wrap:wrap;gap:8px}.meNudgeActs .gBtn{flex:1 1 140px}
.meStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:14px;text-align:center}
.meStat{display:grid;justify-items:center;gap:2px}.meStat b{font-size:22px;color:var(--ink)}.meStat span{font-size:12px;font-weight:700;color:var(--ink-2)}.meStat .clay{width:28px;height:28px}
.meBar{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) 48px;align-items:center;gap:10px;margin:10px 0;font-size:14px;color:var(--ink)}
.meBar b{text-align:end;font-variant-numeric:tabular-nums}
.meTrack{display:block;height:10px;border-radius:999px;background:var(--soft);overflow:hidden}.meTrack i{display:block;height:100%;border-radius:inherit;background:var(--primary)}
.meBar.mod i{background:var(--mt)}.meBar.f-bridge i{background:var(--sun)}.meBar.f-clinical i{background:var(--coral)}
.meBar.g i{background:var(--mint)}.meBar.m i{background:var(--sun)}.meBar.b i{background:var(--coral)}
.meRow{margin-top:12px}
.meSettings{display:grid;gap:12px}
/* ---- onboarding ---- */
.onboardPage{max-width:520px;width:100%;margin-inline:auto;display:flex;flex-direction:column;gap:8px}
.obTop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.obDots{display:flex;gap:6px}.obDots span{width:28px;height:6px;border-radius:3px;background:var(--line)}.obDots span.on{background:var(--coral)}
.obBody{display:grid;justify-items:center;gap:14px;padding:8px 0;text-align:center}
.obBody h2{margin:0;font-size:24px;line-height:1.25;color:var(--ink)}.obLead,.obNote{margin:0;font-size:16px;color:var(--ink-2)}
.obField{display:grid;gap:6px;width:100%;text-align:start;font-size:15px;font-weight:800;color:var(--ink)}.obField .search{height:48px;font-size:16px;font-weight:500;border-radius:var(--r-btn)}
.obNext,.obLater{width:100%}
/* ---- the placement result ---- */
.plResult{display:grid;gap:10px;padding:16px}
.plLevel{display:flex;align-items:center;gap:14px}.plLevel h2{margin:2px 0;font-size:24px;color:var(--ink)}.plLevel p{margin:0;font-size:15px;color:var(--ink-2)}
.plMods{display:grid}.plRow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.plName{font-size:15px;font-weight:700}.plDots{display:flex;gap:6px}
.plDot{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:800}.plDot.ok{background:var(--good-soft);color:var(--good)}.plDot.no{background:var(--bad-soft);color:var(--bad)}
.plSt{font-size:12px;font-weight:800;padding:3px 8px;border-radius:999px}.plSt.g{background:var(--good-soft);color:var(--good)}.plSt.m{background:var(--mid-soft);color:var(--mid)}.plSt.b{background:var(--bad-soft);color:var(--bad)}
.plActs{display:grid;gap:8px}
/* ---- celebrations (js/celebrate.js): transform and opacity only, nothing loops ---- */
.cele{display:flex;align-items:center;gap:8px;min-height:0}
.cele:empty{display:none}
.celBadge{position:relative;flex:none;display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:4px 10px;border-radius:999px;font-weight:800;color:var(--ink)}
.celFirst{background:var(--primary-soft);color:var(--primary-ink)}.celStreak{background:var(--sun-soft)}.celFast{background:var(--mid-soft);color:var(--mid);overflow:hidden}.celPerfect{background:var(--good-soft);color:var(--good)}
.celStar{display:inline-grid;width:26px;height:26px;animation:celPop var(--motion-base) var(--ease-pop) both}.celStar img{width:100%;height:100%}
.celCheck{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.celCheck path{stroke-dasharray:24;stroke-dashoffset:24;animation:celDraw 380ms var(--ease-out) forwards}
.celParts{position:absolute;inset:0;pointer-events:none}
.celParts i{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:var(--sun);opacity:0;animation:celSpark 600ms var(--ease-out) forwards;--a:calc(var(--i) * 60deg)}
.celParts.emb i{background:var(--coral);animation-name:celEmber;animation-duration:700ms;left:calc(20% + var(--i) * 12%)}
.celFast::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--card),transparent);transform:translateX(-100%);animation:celSweep 700ms var(--ease-out) 1 forwards;opacity:.7}
.qzRun.pulse{animation:celPulse 600ms var(--ease-pop) 1}
.celText{font-size:15px;font-weight:800;color:var(--ink)}
.celToast{position:fixed;inset-inline:16px;margin-inline:auto;max-width:440px;z-index:320;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);animation:celIn var(--motion-base) var(--ease-pop) both;cursor:pointer}
.celToast.inline{position:relative;inset:auto;margin:8px 0;max-width:none}
.celToast.out{opacity:0;transform:translateY(-6px);transition:opacity var(--motion-fast),transform var(--motion-fast)}
.celConfetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.celConfetti i{position:absolute;top:-12px;left:var(--x);width:8px;height:12px;border-radius:2px;background:var(--sun);opacity:0;animation:celFall 1100ms var(--ease-out) var(--d) 1 forwards}
.celConfetti i:nth-child(3n){background:var(--coral)}.celConfetti i:nth-child(3n+1){background:var(--mint)}.celConfetti i:nth-child(4n){background:var(--lavender)}
.celModule{position:relative;overflow:hidden;display:grid;justify-items:center;gap:12px;padding:8px 0;text-align:center}
.celRing{position:relative;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;background:var(--sun-soft)}
.celRing .crHalf{position:absolute;inset:0;border-radius:50%}
.celRing .crHalf i{position:absolute;inset:0;border-radius:50%;border:10px solid var(--sun);transform:rotate(180deg)}
.celRing .crR{clip-path:inset(0 0 0 50%)}.celRing .crR i{clip-path:inset(0 50% 0 0);animation:celHalf 550ms linear both}
.celRing .crL{clip-path:inset(0 50% 0 0)}.celRing .crL i{clip-path:inset(0 0 0 50%);animation:celHalf 550ms linear 550ms both}
.celRing>.mascot{position:relative;width:108px;height:108px;border-radius:50%;background:var(--card)}
.celModText{margin:0;font-size:17px;font-weight:800;color:var(--ink)}
.celStats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}.celStats li{display:grid;gap:2px}.celStats b{font-size:22px;color:var(--ink)}.celStats span{font-size:12px;color:var(--ink-2)}
@keyframes celPop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:none;opacity:1}}
@keyframes celHalf{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}
@keyframes celDraw{to{stroke-dashoffset:0}}
@keyframes celSpark{0%{opacity:1;transform:translate(-50%,-50%) rotate(var(--a)) translateY(0)}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-26px)}}
@keyframes celEmber{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-34px)}}
@keyframes celSweep{to{transform:translateX(100%)}}
@keyframes celPulse{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes celIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes celFall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(260px) rotate(320deg)}}
/* reduced motion: the system setting or Settings > Animations (html.rm): nothing moves at all, the ring is drawn full */
html.rm .mascotImg,html.rm .rival,html.rm .qzSheet,html.rm .celStar,html.rm .celRing .crHalf i,html.rm .celToast,html.rm .qzRun.pulse{animation:none}
html.rm .celCheck path{animation:none;stroke-dashoffset:0}
html.rm .celParts,html.rm .celConfetti,html.rm .celFast::after{display:none}
html.rm .celToast.out{transition:none}
@media (prefers-reduced-motion:reduce){.mascotImg,.rival,.qzSheet,.celStar,.celRing .crHalf i,.celToast,.qzRun.pulse{animation:none}.celCheck path{animation:none;stroke-dashoffset:0}.celParts,.celConfetti,.celFast::after{display:none}.celToast.out{transition:none}}
@media (min-width:600px){.tdHelloTxt h2{font-size:28px}.qzStem{font-size:19px}}
.gResult,.tfEndCard{position:relative;overflow:hidden}
/* adverse-effect organs: the clay organ on the filter chips and the sheet's organ tag; empty states */
.aeFilter{display:inline-flex;align-items:center;gap:6px}.aeOrgIc{width:24px;height:24px}
.aeOrganTag{display:inline-flex;align-items:center;gap:6px}
.emptyState{display:flex;align-items:center;gap:12px}.emptyState .clay{width:64px;height:64px;flex:none}
.lnAdvice{display:flex;align-items:center;gap:12px}.lnAdvice p{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}
/* Path: the node sheet ("Start the questions" / "Study it first", with the recommended-order note when it applies) */
.lnNodeSheet{display:grid;gap:8px}.lnNodeMeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px!important;color:var(--muted)!important}
.lnAdviceNote{font-size:15px!important}
/* Library first: a module page's games come after its groups, compact; a class page ends with "Test yourself" */
.modGames.compact{margin-top:12px;padding:10px 12px}.modGames.compact h3{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
.modGames.compact .gameCard{padding:8px 12px}.modGames.compact .gcIcon .ic{width:20px;height:20px}
.classTest{display:grid;gap:8px}.classTest h3{display:flex;align-items:center;gap:8px}.classTest .taxSub{margin:0}.classTest .gBtn{justify-self:start}
.classTestDone{display:flex;align-items:center;gap:6px;margin:0;font-weight:700;color:var(--good,var(--ink))}
/* a drug chip in a game's feedback or result: it opens the drug, the round waits (js/activity.js) */
.gDrugs{margin-top:8px;align-items:center}.gDrugsLbl{font-size:12px;font-weight:700;color:var(--muted)}.gDrugs .aeDrug{padding:4px 12px}
.gLi .gDrug{margin-top:4px;align-self:flex-start}
/* "Back to question": a parked question run (js/quiz.js), above the bottom nav, never over the page's own buttons (the
   page gets room below while it shows) */
.qzPill{position:fixed;inset-inline:0;margin-inline:auto;width:max-content;max-width:calc(100vw - 32px);bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:stretch;background:var(--ink);color:var(--page);border-radius:999px;box-shadow:0 6px 20px var(--shadow-color);overflow:hidden}
.qzPill[hidden]{display:none}
.qzPill button{display:inline-flex;align-items:center;gap:8px;min-height:44px;border:0;background:transparent;color:inherit;font:inherit;font-weight:800;font-size:14px;cursor:pointer}
.qzPillGo{padding:0 8px 0 16px;min-width:0}.qzPillGo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qzPillX{padding:0 14px 0 8px;opacity:.8}
.qzPill .ic{width:18px;height:18px;flex:none}
[dir="rtl"] .qzPillGo .ic{transform:scaleX(-1)}
@media (max-width:1023px){.qzPill{bottom:calc(84px + env(safe-area-inset-bottom,0px))}body.hasQzPill .canvas{padding-bottom:calc(144px + env(safe-area-inset-bottom))}}
@media (min-width:1024px){body.hasQzPill .canvas{padding-bottom:calc(72px + env(safe-area-inset-bottom))}}
@media (max-width:1023px){body.inGame .qzPill,body.inOnboard .qzPill{bottom:calc(12px + env(safe-area-inset-bottom,0px))}}

/* ---- Practice & Research (js/topics.js): subjects > areas > topics, the topic page ---- */
.prNavIc{background:var(--tile-subj);color:var(--ink)}
.prHead{margin-bottom:4px}
.prSubjs{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));align-items:start}
.prSubj{padding:14px}
.prSubjHead{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.prSubjHead h3{margin:0;font-size:18px;line-height:1.3;color:var(--ink)}
.prSubjHead p{margin:2px 0 0;font-size:14px;color:var(--ink-2)}
.prSubjIc{flex:none;width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:var(--tile-subj)}
.prSubjIc .clay{width:46px;height:46px}
.prAreas{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.prArea{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-align:start;font:inherit}
button.prArea:hover{background:var(--soft)}
.prArea.soon{background:var(--soft);border-style:dashed}
.prArea.soon .prAreaIc{opacity:.75}
.prAreaIc{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--tile-subj)}
.prAreaIc .clay{width:36px;height:36px}
.prAreaIc.big{width:64px;height:64px;border-radius:18px}.prAreaIc.big .clay{width:52px;height:52px}
.prAreaTxt{min-width:0;flex:1;display:grid;gap:3px}
.prAreaTxt b{font-size:15px;line-height:1.3}
.prAreaTxt small{font-size:13px;color:var(--ink-2)}
.prSoon{flex:none;font-size:12px;font-weight:800;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.prBar{display:block;height:6px;border-radius:999px;background:var(--soft);overflow:hidden;max-width:220px}
.prBar i{display:block;height:100%;background:var(--mint);border-radius:inherit}
.prAreaHead{display:flex;align-items:center;gap:14px}
.prAreaHead>div{min-width:0;flex:1;display:grid;gap:4px}
.prAreaHead .taxSub{margin:0}
.prTopics{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr))}
.prTopic{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;padding:12px 14px;text-align:start;color:var(--ink);font:inherit}
.prNum{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--tile-subj);font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.prTopicTxt{min-width:0;flex:1;display:grid;gap:3px;justify-items:start}
.prTopicTxt b{font-size:16px;line-height:1.3}
.prTopicTxt small{font-size:13px;line-height:1.4;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prMini{flex:none;font-size:13px;font-weight:800;color:var(--ink-2);font-variant-numeric:tabular-nums}
.prLock{flex:none;color:var(--ink-2);display:inline-flex}
.prTopic.locked .prNum{background:var(--soft)}
.prEmpty,.prNote{padding:14px 16px;margin:10px 0 0;font-size:15px;color:var(--ink-2)}
.prNote{padding:4px 2px}
.tpCountry{min-height:28px;font-size:13px;background:var(--sun-soft)}
/* the topic page */
.topicPage{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-content:start}
.tpCard{padding:0;overflow:hidden}
.tpFig{margin:0;background:var(--fig-card);border-bottom:1px solid var(--line)}
.tpFig img{display:block;width:auto;max-width:100%;height:auto;max-height:min(42vh,300px);margin:0 auto}
.tpHead{padding:14px 16px 4px}
.tpHead h2{margin:8px 0 0;font-size:24px;line-height:1.25;color:var(--ink)}
.tpChips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tpArea{min-height:44px;cursor:pointer;background:var(--tile-subj)}
.tpCard section{padding:10px 16px 14px;border-top:1px solid var(--line)}
.tpCard section:first-of-type{border-top:0}
.tpCard h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:16px;color:var(--ink)}
.tpCard h3 .ic{color:var(--primary-ink)}
.tpKey p{margin:0;font-size:17px;line-height:1.55;font-weight:700;color:var(--ink)}
.tpKey{background:var(--primary-soft)}
.tpMust ul,.tpTraps ul{margin:0;padding-inline-start:20px;display:grid;gap:6px;font-size:15px;line-height:1.55;color:var(--ink)}
.tpTraps{background:var(--warn-bg)}
.tpTraps h3 .ic{color:var(--warn-label)}
.tpExQ{margin:0 0 10px;font-size:15px;line-height:1.55;color:var(--ink)}
.tpSteps{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:none}
.tpSteps li{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:10px;background:var(--soft);font-size:15px;line-height:1.5;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.tpStepN{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--on-primary);font-weight:800;font-size:13px}
.tpStepTxt{min-width:0;flex:1;overflow-wrap:anywhere}
.tpAns{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:var(--good-soft);border:1px solid var(--good-line);font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.tpAns b{color:var(--good);margin-inline-end:6px}
.tpLtr{unicode-bidi:isolate;direction:ltr;font-variant-numeric:tabular-nums lining-nums}
.tpQs{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.tpQ{padding:14px}
.tpQ h3{margin:0 0 8px;font-size:15px;color:var(--ink-2)}
.tpQ .caseText{font-size:15px}
.tpQ .opt{font-size:14px}
.tpMoreRow{display:flex;justify-content:center}
.tpMore{min-width:min(100%,320px)}
.tpRefs{padding:12px 16px}
.tpRefs h3{margin:0 0 6px;font-size:15px;color:var(--ink)}
.tpRefs ul{margin:0;padding-inline-start:18px;display:grid;gap:4px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.tpReviewed{margin:8px 0 0;font-size:13px;color:var(--ink-2)}
.tpLock{display:flex;align-items:flex-start;gap:12px;padding:16px;background:var(--soft)}
.tpLock>.ic{flex:none;color:var(--primary-ink)}
.tpLock h3{margin:0 0 4px;font-size:17px;color:var(--ink)}
.tpLock p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.qzPearl{margin:8px 0 0}
/* Today: the Practice & Research card and the one-time country question */
.tdPR .tdPRIc{flex:none;display:flex;gap:4px}
.tdPR .tdPRIc .clay{width:44px;height:44px}
.tdAsk{position:relative;padding:14px 16px;display:grid;gap:8px}
.tdAskTop{display:flex;align-items:center;gap:12px;padding-inline-end:40px}
.tdAskTop .clay{flex:none;width:56px;height:56px}
.tdAskTop h3{margin:0;font-size:17px;color:var(--ink)}
.tdAskTop .tdSub{margin:2px 0 0}
.tdAskX{position:absolute;top:6px;inset-inline-end:6px;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--ink-2);display:grid;place-items:center}
.tdAskX:hover{background:var(--soft)}
.tdAskLbl{margin:4px 0 0;font-size:14px;font-weight:800;color:var(--ink)}
.tdAskActs{display:flex;justify-content:flex-end}
/* the onboarding country step */
.obClay{display:grid;place-items:center}.obClay .clay{width:112px;height:112px}
.obCountries{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
@media (max-width:599px){
 .tpHead h2{font-size:22px}
 .tpKey p{font-size:16px}
 .tpQ .opt{font-size:16px}
 .tpQ .caseText{font-size:16px}
 .prSubj{padding:12px}
}

/* ---- Medals: stamps, tiers, achievements and My collection (js/medals.js) ----
   A stamp is its clay icon inside assets/ui/ach-stamp-frame (the frame's window is the middle ~60%); without the frame
   the icon sits on a rounded tile. A locked one is a grey silhouette (--sil), never hidden: it says how to unlock it. */
:root{--sil:brightness(0) opacity(.2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sil:brightness(0) invert(1) opacity(.24)}}
:root[data-theme="dark"]{--sil:brightness(0) invert(1) opacity(.24)}
.stamp{position:relative;display:inline-block;flex:none;width:72px;height:72px;line-height:0}
.stamp>.clay,.stamp>.stampIn{position:absolute}
.stamp>.clay{inset:0;width:100%;height:100%}
.stampIn{inset:19%;display:grid;place-items:center;overflow:hidden}
.stampIn .clay,.stampIn .ic{width:100%;height:100%;object-fit:contain}
.stamp.tile{border-radius:18px;background:var(--sun-soft);border:2px dashed var(--line)}
.stamp.tile .stampIn{inset:12%}
.stamp.mini{width:30px;height:30px}
.stamp.locked,.colArt.sil .clay{filter:var(--sil)}
.lnStampLine{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:800;color:var(--ink)}
.lnStamps{display:inline-flex;flex-wrap:wrap;gap:2px}
.lnNext{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ink)}
.lnNext .clay{width:28px;height:28px;flex:none}
.lnNext.done{color:var(--ink-2)}
.lnGroup{display:flex;justify-content:center;align-items:center;gap:6px}
.lnGroupStamp{display:inline-flex;line-height:0}
.medalChip{background:var(--sun-soft)}
.medalChip .clay,.medalChip .ic,.medalChip .stamp{width:22px;height:22px}
.medalChip .stamp.mini{width:26px;height:26px}
.celMedal{padding:0;min-height:0}
.celMedal .clay,.celMedal .ic,.celMedal .stamp{width:36px;height:36px}
.colHead .colSummary{display:flex;align-items:center;gap:10px;margin:8px 0 0;font-size:16px;font-weight:800;color:var(--ink)}
.colHead .colSummary .clay{width:36px;height:36px}
.colGrid{display:grid;gap:12px;margin-top:8px}
.colModule{padding:14px;display:grid;gap:10px}
.colModHead{display:flex;align-items:center;gap:10px}
.colModHead .clay{width:40px;height:40px;flex:none}.colModHead .modIc{flex:none}
.colModHead h3{margin:0;font-size:17px;color:var(--ink);flex:1;min-width:0}
.colCount{font-size:13px;font-weight:800;color:var(--ink-2)}
.colFold>summary{list-style:none;cursor:pointer;min-height:var(--tap)}.colFold>summary::-webkit-details-marker{display:none}.colFold .chev{display:inline-flex;transition:transform var(--motion-fast)}.colFold[open] .chev{transform:rotate(180deg)}.colFold[open]>summary{margin-bottom:10px}html.rm .colFold .chev{transition:none}
.colCells{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.colCells.colTiers{grid-template-columns:repeat(3,minmax(0,1fr))}
.colCell{display:grid;justify-items:center;align-content:start;gap:4px;text-align:center;padding:10px 6px;border-radius:14px;background:var(--soft)}
.colCell.got{background:var(--sun-soft)}
.colCell b{font-size:14px;line-height:1.25;color:var(--ink)}
.colCell small{font-size:12px;line-height:1.3;color:var(--ink-2)}
.colArt{display:grid;place-items:center;min-height:64px}
.colArt .clay{width:64px;height:64px}
.colArt .stamp{width:84px;height:84px}
.meCollection .libIc .clay{width:36px;height:36px}
@media (max-width:420px){.colTiers .colCell{padding:8px 4px}.colTiers .colArt .clay{width:48px;height:48px}.colCells:not(.colTiers){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- Drug stories (js/stories.js) ---- */
.stCard{display:grid;gap:12px}
.stFig{position:relative;margin:0;border-radius:16px;overflow:hidden;background:var(--primary-soft);aspect-ratio:4/3;max-height:min(30vh,240px);width:100%;display:grid;place-items:center}
/* the square picture fills the card, cropped around its centre (the box can be wider than 4:3 under max-height) */
.stFig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.stFig.ph{aspect-ratio:2/1;color:var(--primary-ink)}
.stFig.ph[data-type="serendipity"]{background:var(--sun-soft)}
.stFig.ph[data-type="guideline"]{background:var(--soft)}
.stMeta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stType{background:var(--soft)}
.stYearTag{font-weight:800;color:var(--ink-2)}
.stTitle{margin:0;font-size:20px;line-height:1.25;color:var(--ink)}
.stHook{margin:0;font-size:16px;font-weight:800;color:var(--ink)}
.stBody{margin:0;font-size:16px;line-height:1.55;color:var(--ink)}
.stThenNow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stThen,.stNow{padding:12px;border-radius:14px;background:var(--soft);display:grid;gap:4px;align-content:start}
.stNow{background:var(--sun-soft)}
.stWhen{font-size:12px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--label)}
.stThen p,.stNow p{margin:0;font-size:15px;line-height:1.45;color:var(--ink)}
.stTake{padding:12px 14px;border-radius:14px;background:var(--primary-soft);border:1px solid var(--primary-line)}
.stTake h4{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:15px;color:var(--primary-ink)}
.stTake p{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}
.stDrugs{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.stDrugsLbl{font-size:13px;font-weight:800;color:var(--ink-2)}
.stFoot{display:grid;gap:10px}
.stRefs{font-size:12px;color:var(--ink-2)}
.stRefs b{display:block;margin-bottom:2px}
.stRefs ul{margin:0;padding-inline-start:18px}
.stRefs li{overflow-wrap:anywhere}
.stReviewed{margin:6px 0 0}
.stShare{justify-self:start}
.stLock{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--soft)}
.stLock p{margin:2px 0 0;font-size:14px;color:var(--ink-2)}
.storySheet .sheetBody{padding-top:4px}
.storyChip{background:var(--sun-soft);cursor:pointer;border:0;position:relative;min-height:var(--tap)}
.storyChip .ic{width:18px;height:18px}
.drugStory{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.drugStory[hidden]{display:none}
.stDot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--coral);flex:none}
.tdStory{position:relative;padding:0;align-items:stretch}
.tdStoryOpen{flex:1;display:flex;align-items:center;gap:12px;min-width:0;padding:14px 16px;padding-inline-end:52px;border:0;background:transparent;color:var(--ink);text-align:start;font:inherit}
.tdStoryImg{flex:none;width:76px}
.tdStoryImg .stFig{max-height:none;aspect-ratio:1/1;border-radius:14px}
.tdStoryImg .stFig.ph{aspect-ratio:1/1}
.tdStory .tdTitle{font-size:16px}
.tdStoryX{position:absolute;top:6px;inset-inline-end:6px;width:var(--tap);height:var(--tap);display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--ink-2)}
.tdStory .chevGo{display:none}
.stAlbum .setNote b{color:var(--ink)}
.stList{list-style:none;margin:8px 0 0;padding:6px;display:grid;gap:2px}
.stRow{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 10px;border:0;border-radius:12px;background:transparent;color:var(--ink);text-align:start;font:inherit}
button.stRow{cursor:pointer}
.stRow.seen:hover,.stRow.locked:hover{background:var(--soft)}
.stRowTxt{display:grid;gap:2px;flex:1;min-width:0}
.stRowTxt b{font-size:15px;line-height:1.3}
.stRowMeta{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.stRowMeta .ic{width:14px;height:14px}
.stNew{font-size:12px;font-weight:800;color:var(--ink-2)}
.stRow.new b{color:var(--ink-2)}
@media (max-width:420px){.stThenNow{grid-template-columns:1fr}.tdStoryImg{width:60px}}
@media (min-width:600px){.storySheet .stFig{max-height:300px}}
/* ---- the web build: the Beta badge, Send feedback, Report this question (js/feedback.js), the update toast (js/web.js) ---- */
.betaBar{display:flex;align-items:center;gap:8px;min-height:32px;padding:2px max(10px,env(safe-area-inset-right)) 2px max(14px,env(safe-area-inset-left));background:var(--sun-soft);border-bottom:1px solid var(--line);color:var(--ink);font-size:13px}
.betaTag{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;background:var(--sun);color:var(--on-sun);font-weight:800;font-size:12px;letter-spacing:.02em}
.betaVer{flex:1;min-width:0;color:var(--ink-2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.betaX{flex:none;width:var(--tap);height:var(--tap);margin-block:-6px;display:grid;place-items:center;border:0;background:none;color:var(--ink-2);border-radius:8px}
.betaX .ic{width:18px;height:18px}
.fbRow{display:flex}.fbRow .gBtn{flex:1}
.fbSheet .fbQ{margin:0 0 10px;font-size:14px;color:var(--ink-2)}
.fbCats{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.fbLbl{display:block;width:100%;font-size:14px;font-weight:800;color:var(--ink);margin-bottom:2px}
.fbCat[aria-checked="true"]{background:var(--primary-soft);border-color:var(--primary);color:var(--ink)}
.fbField{display:block;margin-bottom:12px}
.fbField textarea{width:100%;box-sizing:border-box;min-height:110px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:15px;resize:vertical}
.fbInc{display:flex;gap:10px;align-items:flex-start;min-height:var(--tap);cursor:pointer}
.fbInc input{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--primary)}
.fbInc span{display:grid;gap:2px}.fbInc b{font-size:14px;color:var(--ink)}.fbInc small{font-size:13px;color:var(--ink-2);line-height:1.4}
.fbErr{margin:8px 0 0;color:var(--accent-text);font-weight:700;font-size:14px}
.fbAsk{font-size:13px;color:var(--muted);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.plUpdate{position:fixed;inset-inline:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));margin-inline:auto;max-width:440px;min-height:var(--tap);z-index:320;display:flex;align-items:center;justify-content:center;gap:8px;border:0;background:var(--ink);color:var(--page);border-radius:12px;padding:10px 14px;font-weight:700;font-size:14px;box-shadow:var(--shadow)}
.plUpdate .ic{width:18px;height:18px}
@media (max-width:1023px){.plUpdate{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
/* ---- the back arrow (js/nav.js): at the top of every screen that is not one of the five tabs; Back, exactly ---- */
.navBar{display:flex;align-items:center;margin:0 0 10px}
.navBar[hidden]{display:none}
.navBack{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);min-width:var(--tap);padding:6px 14px 6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:inherit;font-size:14px;font-weight:800;box-shadow:var(--shadow-soft);cursor:pointer}
[dir=rtl] .navBack{padding:6px 10px 6px 14px}
.navBack .ic{width:20px;height:20px}
.obBack{flex:none;width:var(--tap);height:var(--tap);display:grid;place-items:center;border:0;border-radius:50%;background:var(--card);color:var(--ink);box-shadow:var(--shadow-soft)}
.navLeave .sheetActions{flex-wrap:wrap}
/* ---- Learn as the start screen: the compact mission card and "Continue where you left off" ---- */
.lnMission{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;padding:12px 14px}
.lnMission h3{margin:0;font-size:17px;color:var(--ink)}.lnMission .tdSub{margin:2px 0 0}
.lnMisRing{width:52px;height:52px}.lnMisRing>span{width:40px;height:40px;font-size:14px}
.lnMission.done .ring{background:var(--mint)}
.lnMisTxt{flex:1 1 150px;min-width:0}
.lnMisReview{min-height:36px;padding:0;font-size:14px}
.lnMisGo{flex:none;min-height:var(--tap)}
.lnMisDone{flex:none;display:inline-flex;color:var(--good)}
.lnContinue{display:flex;align-items:center;gap:12px;width:100%;padding:14px;text-align:start;border:2px solid var(--coral);background:var(--card);color:var(--ink);font:inherit;cursor:pointer}
.lnContIc{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--mt,var(--coral-soft));color:var(--ink)}
.lnContTxt{display:grid;gap:2px;min-width:0}.lnContTxt b{font-size:18px;line-height:1.25;color:var(--ink)}.lnContTxt small{font-size:13px;color:var(--ink-2)}
/* ---- question types (M Pharmacology, MC Applied pharmacology, CD Clinical decision; a case: "Case") ---- */
.qtChip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:800;line-height:1.4;white-space:nowrap;vertical-align:middle;color:var(--ink);background:var(--soft)}
.qtChip.qt-M{background:var(--primary-soft);color:var(--primary-ink)}.qtChip.qt-MC{background:var(--sun-soft);color:var(--ink)}.qtChip.qt-CD{background:var(--coral-soft);color:var(--ink)}
.qtChip.qt-case{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.caseHeadRow{display:flex;align-items:center;justify-content:space-between;gap:6px 8px;flex-wrap:wrap;margin:0 0 9px}.caseHeadRow h3{margin:0}
.caseQ h4{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.qzKicker{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.qzRvChips{display:flex;flex-wrap:wrap;gap:6px}
.meBar.qt-MC i{background:var(--sun)}.meBar.qt-CD i{background:var(--coral)}
.meSubH{margin:14px 0 6px;font-size:15px;color:var(--ink)}
.meTypeMods{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.meTypeMod{display:grid;gap:4px;padding:8px 10px;border-radius:12px;background:var(--panel)}.meTypeMod b{font-size:14px;color:var(--ink)}
.meTypeVals{display:flex;flex-wrap:wrap;gap:6px}
.revSheet .setOpt[disabled]{opacity:.5}
/* a sheet over one thing on the screen (Learn's "Recommended order"): no tinted backdrop, the sheet stands out on its own */
.sheetScrim.clearScrim{background:transparent}
.sheetScrim.clearScrim .sheet{box-shadow:0 -6px 28px var(--shadow-color),0 -2px 8px var(--shadow-color),0 0 0 1px var(--line)}
/* the tapped Learn node while its sheet is open: a ring on the node only */
.lnNode.sel .lnBtn{box-shadow:0 0 0 4px var(--card),0 0 0 7px var(--primary),0 3px 0 var(--shadow-color)}
/* ---- the study track: the card for existing learners, "More" in a Practice & Research area ---- */
.tdTrackIc{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary-ink)}
.prMore{margin-top:4px}.prMore>summary{min-height:var(--tap);display:flex;align-items:center;padding:0 4px;font-weight:800;color:var(--primary-ink);cursor:pointer}
.prMore .prTopics{margin-top:6px}
/* ---- keep-English terms inside Arabic (js/terms.js): an English island, tappable, with its Arabic gloss where there is room ---- */
.term{cursor:pointer;text-decoration:underline dotted color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:3px}
button .term,a .term,summary .term,.opt .term{cursor:inherit;text-decoration:none}
.term:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:3px}
.termGloss{font-size:1em;color:var(--ink-2);font-weight:inherit}
.termCard{display:grid;gap:6px}.termKind{margin:0;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--label)}
.termEn{margin:0;font-size:22px;font-weight:800;color:var(--ink)}.termEn small{display:block;font-size:13px;font-weight:700;color:var(--ink-2)}
.termAr{margin:0;font-size:17px;color:var(--ink)}
/* ---- the mixed language mode: an English question inside the Arabic page (js/app.js qEn) ---- */
.qEn{unicode-bidi:isolate;text-align:left}
.qzStem .qEn,.caseText .qEn,.caseDetail .stem .qEn,.qzCaseStem .qEn,.chStmt .qEn,.tfCard .qEn{display:block}
.opt .qEn,.qzOptTxt .qEn{display:inline-block;max-width:100%}