/* ==========================================================================
   JP MovementLab HTML Kit — design tokens and shared components  (v1.0, Oct 2026)
   Authoritative standard: docs/JP_MOVEMENTLAB_HTML_DESIGN_STANDARD.md
   Brand reference: tools/IFC_Interactive_Learning_Suite.html (repository copy: top bar + palette, synced with src/app/globals.css)
   Dark theme is the default. Light theme is opt-in via the theme toggle.
   Rule: components use ONLY the tokens below — never raw colours.
   ========================================================================== */

/* ---------- 1. Tokens: dark (default) — repository IFC palette, synchronised with the website brand ---------- */
:root,:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#070e18; --bg-2:#04070f;
  --surface:#0d1624; --surface-2:#142030; --surface-3:#0a121e;
  --line:#242e3d; --line-2:#384352;
  --ink:#eef2f7; --ink-2:#b6c1cd; --muted:#8d9aa8; --heading:#f5f8fb;
  --accent:#5eb8e8; --accent-2:#4999c3; --accent-strong:#5eb8e8; --on-accent:#04121f; --accent-bg:rgba(94,184,232,.10); --accent-line:rgba(94,184,232,.40);
  --sky:#8fd0f2; --gold:#e8c170; --link:#7cc6ee;
  --warn:#ffb347; --warn-bg:rgba(255,179,71,.10); --warn-line:rgba(255,179,71,.48);
  --ok:#7cdf8a; --ok-bg:rgba(124,223,138,.10); --ok-line:rgba(124,223,138,.45);
  --danger:#ff8a8a; --danger-bg:rgba(255,107,107,.10); --danger-line:rgba(255,107,107,.48);
  --info:#c4b5fd; --info-bg:rgba(192,132,252,.09); --info-line:rgba(192,132,252,.42);
  --t1:#5eb8e8; --t2:#c4b5fd; --t3:#7cdf8a; --t4:#ffb347;
  --focus:#ffb347;
  --bar-bg:rgba(10,14,20,.85); --bar-ink:#eef2f7; --bar-dim:#8d9aa8; --bar-org:#5eb8e8; --bar-line:#242e3d; --bar-btn:rgba(255,255,255,.05);
  --rail-bg:#04070f; --rail-ink:#b6c1cd; --rail-cur-bg:#5eb8e8; --rail-cur-ink:#04121f; --rail-dot:#5eb8e8;
  --hero-bg:radial-gradient(circle at 85% 15%,rgba(94,184,232,.16),transparent 45%),linear-gradient(135deg,#0d1624 0%,#0b1d30 60%,#0a2740 100%);
  --hero-ink:#f5f8fb; --hero-dim:#b6c1cd; --hero-line:rgba(255,255,255,.2); --hero-kicker:#5eb8e8; --hero-btn-ink:#04121f;
  --overlay:rgba(2,5,10,.74); --shadow:0 10px 30px rgba(0,0,0,.5); --shadow-sm:0 2px 8px rgba(0,0,0,.4);
  --viewer-bg:#04070f; --logo-plate:#fbf6e9;
  --page-glow:radial-gradient(circle at 15% 10%,rgba(94,184,232,.08),transparent 40%),radial-gradient(circle at 85% 80%,rgba(73,153,195,.06),transparent 40%),linear-gradient(180deg,#080b10 0%,#070e18 100%);
}
/* ---------- 1b. Tokens: light — website light theme (src/app/globals.css) ---------- */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f5f9fc; --bg-2:#e7f0f8;
  --surface:#ffffff; --surface-2:#f8fbfd; --surface-3:#e7f0f8;
  --line:#d7dfe8; --line-2:#b9c6d4;
  --ink:#101b2b; --ink-2:#34445a; --muted:#576574; --heading:#132b4d;
  --accent:#005d84; --accent-2:#00304c; --accent-strong:#132b4d; --on-accent:#f5f9fc; --accent-bg:#e3f1fa; --accent-line:#a9d3ee;
  --sky:#00557a; --gold:#7a5c12; --link:#005d84;
  --warn:#9a5a0a; --warn-bg:#fbefdc; --warn-line:#e3b98a;
  --ok:#23683f; --ok-bg:#e6f3ea; --ok-line:#bcdcc6;
  --danger:#a3352a; --danger-bg:#fbe9e6; --danger-line:#efc4bd;
  --info:#5b3fa8; --info-bg:#f1edfb; --info-line:#d3c8f1;
  --t1:#005d84; --t2:#5b3fa8; --t3:#23683f; --t4:#9a5a0a;
  --focus:#b4690e;
  --bar-bg:#132b4d; --bar-ink:#f5f9fc; --bar-dim:#b9c6d4; --bar-org:#5eb8e8; --bar-line:#0c1d35; --bar-btn:rgba(255,255,255,.08);
  --rail-bg:#0f2342; --rail-ink:#d7dfe8; --rail-cur-bg:#ffffff; --rail-cur-ink:#132b4d; --rail-dot:#5eb8e8;
  --hero-bg:linear-gradient(135deg,#132b4d 0%,#1d4470 65%,#00557a 100%);
  --hero-ink:#ffffff; --hero-dim:#d7e6f3; --hero-line:rgba(255,255,255,.35); --hero-kicker:#9fd6f5; --hero-btn-ink:#132b4d;
  --overlay:rgba(19,43,77,.55); --shadow:0 20px 50px rgba(19,43,77,.22); --shadow-sm:0 2px 8px rgba(19,43,77,.12);
  --viewer-bg:#0d1624; --logo-plate:#fbf6e9;
  --page-glow:none;
}
:root{
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"IBM Plex Sans","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --r:10px; --r-lg:14px;
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);background-image:var(--page-glow);background-attachment:fixed;color:var(--ink);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.jp-skip{position:absolute;left:-9999px}.jp-skip:focus{left:8px;top:8px;z-index:300;background:var(--focus);color:#111;padding:.5rem 1rem;border-radius:8px}

/* ---------- 3. Brand top bar (IFC lockup: logo plate · title · sub · org tagline) ---------- */
.jp-topbar{position:sticky;top:0;z-index:60;background:var(--bar-bg);color:var(--bar-ink);border-bottom:1px solid var(--bar-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.jp-topbar .jp-row{display:flex;align-items:center;gap:.8rem;max-width:1360px;margin:0 auto;padding:.6rem clamp(.8rem,2.4vw,2rem)}
.jp-brand{display:flex;align-items:center;gap:14px;min-width:0;color:inherit;text-decoration:none}
.jp-brand-logo{width:54px;height:54px;flex:none;border-radius:10px;object-fit:contain;padding:2px;background:var(--logo-plate);box-shadow:0 0 0 1px var(--line-2),0 4px 14px rgba(0,0,0,.35)}
.jp-brand-text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.jp-brand-title{font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jp-brand-sub{font-size:11px;color:var(--bar-dim);text-transform:uppercase;letter-spacing:1.6px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jp-brand-org{font-family:var(--mono);font-size:9.5px;letter-spacing:1.6px;color:var(--bar-org);text-transform:uppercase;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jp-grow{flex:1}
.jp-topbar button,.jp-topbar .jp-chip{font:inherit;font-size:.85rem;cursor:pointer;background:var(--bar-btn);color:var(--bar-ink);border:1px solid var(--bar-line);border-color:color-mix(in srgb,var(--bar-ink) 28%,transparent);padding:.38rem .7rem;border-radius:8px;white-space:nowrap}
.jp-topbar button:hover{background:color-mix(in srgb,var(--bar-ink) 16%,transparent)}
.jp-chip{font:600 .76rem var(--mono)!important;border-radius:99px!important;cursor:default!important}
.jp-tbtn{display:inline-flex;align-items:center;gap:.4rem}
.jp-tbtn svg{width:16px;height:16px;flex:none}
.jp-tbtn[aria-pressed="false"] .jp-onoff::after{content:"Off"}.jp-tbtn[aria-pressed="true"] .jp-onoff::after{content:"On"}
@media (max-width:760px){.jp-brand-sub,.jp-hide-sm{display:none!important}.jp-brand-logo{width:44px;height:44px}.jp-brand-title{font-size:15px}.jp-brand-org{font-size:8.5px;letter-spacing:1.1px}.jp-tlabel{display:none}}
@media (max-width:420px){.jp-brand-org{white-space:normal;line-height:1.35}}

/* ---------- 4. Footer / attribution ---------- */
.jp-footer{max-width:1360px;margin:0 auto;padding:1.2rem clamp(.9rem,3vw,2rem) 2rem;font-size:.8rem;color:var(--muted);border-top:1px solid var(--line);display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.jp-footer img{width:40px;height:40px;object-fit:contain;border-radius:8px;background:var(--logo-plate);padding:2px;flex:none}
.jp-footer .jp-org{font:600 .7rem var(--mono);letter-spacing:1.4px;color:var(--accent);text-transform:uppercase}
.jp-footer p{margin:.15rem 0}

/* ---------- 5. Evidence labels ---------- */
.tier{display:inline-block;font:700 .68rem var(--mono);padding:0 .38rem;border-radius:4px;border:1.5px solid;vertical-align:.1em;margin:0 .12rem;white-space:nowrap;background:var(--surface)}
.tier.T1{color:var(--t1)}.tier.T2{color:var(--t2)}.tier.T3{color:var(--t3)}.tier.T4{color:var(--t4)}
.pill{display:inline-block;font-size:.72rem;font-weight:600;padding:.05rem .5rem;border-radius:99px;white-space:nowrap;border:1px solid transparent}
.pill.verified{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.pill.abstract{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
.pill.pending{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.pill.unverifiable{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.pill.teaching{background:var(--warn-bg);color:var(--warn);border:1px dashed var(--warn-line)}
.pill.excluded{background:var(--surface-3);color:var(--muted);text-decoration:line-through}

/* ---------- 6. Caution / note panels ---------- */
.note{border-left:4px solid var(--warn);background:var(--warn-bg);padding:.55rem .85rem;border-radius:0 8px 8px 0;margin:.7rem 0;font-size:.93rem}
.note.teal{border-color:var(--accent);background:var(--accent-bg)} .note.red{border-color:var(--danger);background:var(--danger-bg)} .note.green{border-color:var(--ok);background:var(--ok-bg)}

/* ---------- 7. Concept Explainer (self-learning mode) ---------- */
.jp-explainer{border:1px solid var(--info-line);border-left:4px solid var(--info);background:var(--info-bg);border-radius:0 10px 10px 0;margin:.7rem 0;font-size:.92rem}
.jp-explainer>summary{cursor:pointer;list-style:none;display:flex;gap:.55rem;align-items:baseline;padding:.5rem .8rem;flex-wrap:wrap}
.jp-explainer>summary::-webkit-details-marker{display:none}
.jp-explainer>summary::before{content:"i";flex:none;display:inline-grid;place-items:center;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--info);color:var(--surface);font:700 .72rem/1 Georgia,serif;font-style:italic;transform:translateY(.15rem)}
.jp-explainer .jp-x-kicker{font:700 .66rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--info)}
.jp-explainer .jp-x-term{font-weight:700;color:var(--heading)}
.jp-explainer .jp-x-short{color:var(--ink-2);flex-basis:100%;padding-left:1.7rem;margin-top:-.15rem}
.jp-explainer[open] .jp-x-short{display:none}
.jp-explainer .jp-x-toggle{margin-left:auto;font-size:.76rem;color:var(--info);white-space:nowrap}
.jp-explainer .jp-x-toggle::after{content:"Explain ▾"}.jp-explainer[open] .jp-x-toggle::after{content:"Close ▴"}
.jp-x-body{padding:.1rem .9rem .8rem 2.5rem}
.jp-x-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.35rem 1.2rem}
.jp-x-sec{margin:.25rem 0}
.jp-x-sec>b{display:block;font:700 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.05rem}
.jp-x-sec p{margin:0}
.jp-x-sec.caution{grid-column:1/-1;border-left:3px solid var(--warn);background:var(--warn-bg);padding:.35rem .6rem;border-radius:0 6px 6px 0}
.jp-x-sec.caution>b{color:var(--warn)}
.jp-x-fig{grid-column:1/-1;margin:.3rem 0;max-width:520px}
.jp-x-fig svg{width:100%;height:auto;display:block}
.jp-x-fig figcaption{font-size:.76rem;color:var(--muted)}
.jp-x-more{margin-top:.45rem;border-top:1px dashed var(--info-line);padding-top:.35rem}
.jp-x-more>summary{cursor:pointer;font-size:.82rem;font-weight:600;color:var(--info)}
.jp-x-foot{margin-top:.45rem;font-size:.74rem;color:var(--muted)}
body.jp-learn-off .jp-explainer{display:none}
/* concept term trigger (works in either learning mode) */
.jp-term{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:help;text-decoration:underline dotted var(--info);text-underline-offset:3px;text-decoration-thickness:1.5px;border-radius:3px}
.jp-term:hover{color:var(--info);background:none}
.jp-concepts{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin:.55rem 0 .1rem;font-size:.78rem;color:var(--muted)}
.jp-concepts button{font-size:.76rem;padding:.12rem .55rem;border-radius:99px;border:1px solid var(--info-line);background:var(--info-bg);color:var(--info);cursor:help}
.jp-concepts button:hover{border-color:var(--info)}
/* concept dialog */
dialog.jp-pop{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);padding:0;max-width:min(720px,calc(100vw - 2rem));width:100%;box-shadow:var(--shadow);max-height:86vh}
dialog.jp-pop::backdrop{background:var(--overlay)}
dialog.jp-pop .jp-pop-head{display:flex;gap:.6rem;align-items:center;justify-content:space-between;padding:.7rem 1rem;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface)}
dialog.jp-pop .jp-pop-head h2{margin:0;font-size:1.1rem;color:var(--heading)}
dialog.jp-pop .jp-pop-body{padding:.4rem 1rem 1rem;overflow:auto}
dialog.jp-pop .jp-x-body{padding:.2rem 0 0}
dialog.jp-pop .jp-x-short{display:block;padding:0;margin:.5rem 0;color:var(--ink-2);font-size:1rem}

/* ---------- 8. Glossary grid ---------- */
.jp-gloss{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.45rem}
.jp-gloss button{text-align:left;display:block;width:100%;padding:.5rem .65rem;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);cursor:help;font:inherit;font-size:.86rem}
.jp-gloss button b{display:block;color:var(--heading)}
.jp-gloss button span{font-size:.78rem;color:var(--muted)}
.jp-gloss button:hover{border-color:var(--info)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{
  :root,:root[data-theme]{--bg:#fff;--surface:#fff;--surface-2:#fff;--surface-3:#f3f3f3;--ink:#000;--ink-2:#222;--muted:#444;--heading:#000;--line:#999;--line-2:#999;--page-glow:none}
  body{background:#fff;color:#000}
  .jp-topbar,.jp-noprint,dialog.jp-pop{display:none!important}
  .jp-explainer{break-inside:avoid}
}