/* EAL MERLIN - shared brand skin for the standalone documents: guide.html, training.html, workboard.html.
   Loaded AFTER each page's own <style>, so it only remaps their CSS variables and adds the brand chrome.
   Light is the default; dark applies when <html data-theme="dark"> (same localStorage key 'merlin_theme' as the app).
   Palette: brand pack tokens (ADOPTED): navy #0B1F35, midnight #071422, red #C63D32, blue #168BC5, silver #B8C6D1, cloud #F4F7FA.
   Derived AA tones (PROPOSED 15/10/2026): blue #0F76AB, muted #52667B, success #16856B, warning #B3701A, dark-mode link #5FBCE8. */

@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/barlow-condensed-500.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/barlow-condensed-600.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/barlow-condensed-700.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/fonts/inter-400-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/ibm-plex-mono-400.woff2) format("woff2")}

:root{--d-red:#C63D32;--d-navy:#0B1F35;--d-mid:#071422;--d-silver:#B8C6D1;--d-blue:#168BC5;--d-link:#0F76AB;--d-head:"Barlow Condensed","Arial Narrow",sans-serif;--d-ui:Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--d-mono:"IBM Plex Mono",ui-monospace,monospace}

/* ---------- Guide: variable remap ---------- */
html[data-doc="guide"]{
  --navy:#F4F7FA;--navy-mid:#fff;--navy-card:#fff;--eal-blue:#0F76AB;--eal-blue2:#168BC5;--blue-dim:#E3F0F8;
  --white:#0B1F35;--off-white:#253B52;--text:#253B52;--text-mid:#52667B;--text-dim:#61758A;
  --border:#D5DEE6;--border2:#E3EAF0;--green:#16856B;--green-dim:#E2F4EF;--amber:#B3701A;--amber-dim:#FBF0DE;
  --red:#C63D32;--red-dim:#FBE7E5;--purple:#6D4FC2;--surface:#EEF3F8;--sans:var(--d-ui);--cond:var(--d-head)}
html[data-doc="guide"][data-theme="dark"]{
  --navy:#071422;--navy-mid:#0B1F35;--navy-card:#0F2740;--eal-blue:#168BC5;--eal-blue2:#5FBCE8;--blue-dim:#0B3458;
  --white:#fff;--off-white:#F4F7FA;--text:#DCE5EE;--text-mid:#9FB1C1;--text-dim:#7F93A6;
  --border:rgba(184,198,209,.2);--border2:rgba(184,198,209,.12);--green:#4CC9A6;--green-dim:rgba(76,201,166,.14);
  --amber:#F0B45A;--amber-dim:rgba(240,180,90,.14);--red:#FF7B72;--red-dim:rgba(255,123,114,.14);--purple:#B9A2FF;--surface:#0B1F35}

/* ---------- Training: variable remap ---------- */
html[data-doc="training"]{
  --navy:#F4F7FA;--card:#fff;--blue:#0F76AB;--text:#253B52;--mid:#52667B;--border:#D5DEE6;
  --green:#16856B;--amber:#B3701A;--red:#C63D32;--link:#0F76AB}
html[data-doc="training"][data-theme="dark"]{
  --navy:#071422;--card:#0F2740;--blue:#168BC5;--text:#DCE5EE;--mid:#9FB1C1;--border:rgba(184,198,209,.2);
  --green:#4CC9A6;--amber:#F0B45A;--red:#FF7B72;--link:#5FBCE8}

/* ---------- Workboard: variable remap ---------- */
html[data-doc="workboard"]{
  --bg:#F4F7FA;--surface:#fff;--surface2:#F0F4F8;--surface3:#E8EEF4;--border:#D5DEE6;--border-light:#E3EAF0;
  --text:#253B52;--text-mid:#52667B;--text-dim:#61758A;--blue:#0F76AB;--blue-dim:#E3F0F8;
  --green:#16856B;--green-dim:#E2F4EF;--amber:#B3701A;--amber-dim:#FBF0DE;--red:#C63D32;--red-dim:#FBE7E5;
  --purple:#6D4FC2;--purple-dim:#EEE9FB;--teal:#16856B;--mono:var(--d-mono);--sans:var(--d-ui)}
html[data-doc="workboard"][data-theme="dark"]{
  --bg:#071422;--surface:#0B1F35;--surface2:#0F2740;--surface3:#0B3458;--border:rgba(184,198,209,.2);--border-light:rgba(184,198,209,.12);
  --text:#DCE5EE;--text-mid:#9FB1C1;--text-dim:#7F93A6;--blue:#168BC5;--blue-dim:rgba(22,139,197,.16);
  --green:#4CC9A6;--green-dim:rgba(76,201,166,.14);--amber:#F0B45A;--amber-dim:rgba(240,180,90,.14);--red:#FF7B72;--red-dim:rgba(255,123,114,.14);
  --purple:#B9A2FF;--purple-dim:rgba(185,162,255,.14);--teal:#4CC9A6}

html{color-scheme:light}html[data-theme="dark"]{color-scheme:dark}
html[data-doc="training"] body{font-family:var(--d-ui)}
html[data-doc="training"] a,html[data-doc="guide"] .main a{color:var(--link,var(--eal-blue))}

/* Hard-coded colours inside the pages */
html[data-doc="guide"] .t-impact,html[data-doc="workboard"] .pill-impact-high{color:#B3302A}
html[data-doc="guide"][data-theme="dark"] .t-impact,html[data-doc="workboard"][data-theme="dark"] .pill-impact-high{color:#FF8A80}
html[data-doc="workboard"] .code-block{color:#0F5E86}
html[data-doc="workboard"][data-theme="dark"] .code-block{color:#A9D6EF}
html[data-doc="guide"] span[style*="#ef4444"]{color:var(--red)!important}
html[data-doc="guide"] span[style*="#f59e0b"]{color:var(--amber)!important}
html[data-doc="guide"] span[style*="#22c55e"]{color:var(--green)!important}

/* ---------- Brand bar (guide + training) ---------- */
.doc-bar{display:flex;align-items:center;gap:1rem;padding:.55rem 1.4rem;background:var(--d-mid) url(/static/brand/bg/navy_gradient.svg) center/cover;border-bottom:4px solid var(--d-red);position:relative;z-index:50}
.doc-bar img.logo{height:38px;width:auto;mix-blend-mode:screen;filter:brightness(1.1)}
.doc-bar .doc-title{font-family:var(--d-head);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.85rem;color:var(--d-silver)}
.doc-bar .doc-links{margin-left:auto;display:flex;align-items:center;gap:.9rem;font-family:var(--d-ui);font-size:.78rem}
.doc-bar .doc-links a{color:#fff;text-decoration:none;opacity:.85}
.doc-bar .doc-links a:hover{opacity:1;text-decoration:underline}
.doc-toggle{font:600 .72rem var(--d-ui);color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:.3rem .8rem;cursor:pointer}
.doc-toggle:hover{background:rgba(255,255,255,.18)}
.doc-toggle:focus-visible{outline:3px solid var(--d-blue);outline-offset:2px}

/* ---------- Guide hero: brand navy, red tag, section art ---------- */
html[data-doc="guide"] .hero{background:var(--d-mid) url(/static/brand/bg/navy_gradient.svg) center/cover no-repeat;border-bottom:0}
html[data-doc="guide"] .hero::after{content:"";position:absolute;top:0;right:0;bottom:0;width:min(55%,640px);background:url(/static/brand/banners/svg/engines.svg) right center/auto 100% no-repeat;opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%);pointer-events:none}
html[data-doc="guide"] .hero-stripe{background:var(--d-red);height:6px}
html[data-doc="guide"] .hero-eyebrow{display:inline-block;background:var(--d-red);color:#fff;padding:.2rem .7rem;border-radius:3px}
html[data-doc="guide"] .hero h1,html[data-doc="guide"] .hero-stat-val{color:#fff}
html[data-doc="guide"] .hero h1 .eal{color:#fff}
html[data-doc="guide"] .hero-sub{color:var(--d-silver)}
html[data-doc="guide"] .hero-stat-label{color:#9FB1C1}
html[data-doc="guide"] .hero-divider{background:rgba(184,198,209,.3)}
html[data-doc="guide"] .commit-pill{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
html[data-doc="guide"] .hero-right{position:relative;z-index:2}
html[data-doc="guide"] #progress{background:var(--d-red)}
html[data-doc="guide"] .sidebar{background:var(--navy-mid)}
html[data-doc="guide"] .sidebar a.active{border-left-color:var(--d-red);color:var(--eal-blue)}
html[data-doc="guide"] .section-label{color:var(--d-red)}
html[data-theme="dark"][data-doc="guide"] .section-label{color:#FF8A80}
html[data-doc="guide"] h2,html[data-doc="guide"] .section-title{font-family:var(--d-head);letter-spacing:.03em}

/* ---------- Training: hero band + headings ---------- */
html[data-doc="training"] .doc-hero{margin:-28px -20px 22px;padding:1.6rem 20px 1.4rem;position:relative;overflow:hidden;background:var(--d-mid) url(/static/brand/bg/blueprint_grid.svg) center/cover;border-bottom:4px solid var(--d-red)}
html[data-doc="training"] .doc-hero::after{content:"";position:absolute;top:0;right:0;bottom:0;width:55%;background:url(/static/brand/banners/svg/airline.svg) right center/auto 100% no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%);pointer-events:none}
html[data-doc="training"] .doc-hero>*{position:relative;z-index:1}
html[data-doc="training"] .doc-hero .tag{display:inline-block;font:600 .72rem var(--d-head);letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--d-red);padding:.12rem .55rem;border-radius:3px}
html[data-doc="training"] .doc-hero h1{margin:.4rem 0 .2rem;color:#fff;font-family:var(--d-head);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:2.2rem}
html[data-doc="training"] .doc-hero .sub{color:var(--d-silver);max-width:62%;margin:0;font-size:.9rem}
html[data-doc="training"] .doc-hero .sub a{color:#fff}
html[data-doc="training"] .doc-hero .doc-hero-wrap{max-width:900px;margin:0 auto}
html[data-doc="training"] h2{font-family:var(--d-head);letter-spacing:.04em;text-transform:uppercase;border-bottom:2px solid var(--border);position:relative}
html[data-doc="training"] h2::after{content:"";position:absolute;left:0;bottom:-2px;width:70px;height:2px;background:var(--d-red)}
html[data-doc="training"] h3{font-family:var(--d-head);letter-spacing:.04em}
html[data-doc="training"] .box{border-left:4px solid var(--d-red)}
html[data-doc="training"] .box.warn{border-left-color:var(--amber)}
html[data-doc="training"] .box.ok{border-left-color:var(--green)}
html[data-doc="training"] th{background:var(--d-navy);color:#fff;border-bottom:3px solid var(--d-red)}
html[data-doc="training"] .nav{position:sticky;top:0;z-index:20;background:var(--navy);padding:.5rem 0;margin-bottom:.6rem;border-bottom:1px solid var(--border)}

/* ---------- Workboard: topbar to brand navy ---------- */
html[data-doc="workboard"] .topbar{background:var(--d-mid) url(/static/brand/bg/navy_gradient.svg) center/cover;border-bottom:4px solid var(--d-red);backdrop-filter:none}
html[data-doc="workboard"] .topbar-logo{color:#fff;font-style:normal;letter-spacing:.06em;text-transform:uppercase;font-family:var(--d-head)}
html[data-doc="workboard"] .topbar-logo span{color:#fff}
html[data-doc="workboard"] .topbar-meta{color:var(--d-silver)}
html[data-doc="workboard"] .commit{color:#fff}

/* ---------- Footer ribbon (all three) ---------- */
body::after{content:"EAL MERLIN  \00b7  Inventory Intelligence System  \00b7  European Aviation Group";display:block;margin-top:3rem;padding:1.4rem 1rem;text-align:center;font-family:var(--d-head);font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--d-silver);background:var(--d-mid) url(/static/brand/bg/runway_lines.svg) center 70%/cover no-repeat;border-top:4px solid var(--d-red)}

@media(max-width:700px){html[data-doc="training"] .doc-hero .sub{max-width:100%}.doc-bar .doc-title{display:none}html[data-doc="training"] .doc-hero h1{font-size:1.6rem}html[data-doc="training"] .doc-hero::after,html[data-doc="guide"] .hero::after{opacity:.35}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}

/* ---------- Print: clean, ink-light, no chrome ---------- */
@media print{
  .doc-bar,body::after,.doc-toggle,html[data-doc="training"] .doc-hero::after,html[data-doc="guide"] .hero::after{display:none!important}
  html[data-doc="training"]{--navy:#fff;--card:#fff;--text:#000;--mid:#444;--border:#999;--blue:#0B1F35;--link:#0B1F35;--green:#0b6b52;--amber:#8a5410;--red:#a52a20}
  html[data-doc="training"] .doc-hero{margin:0 0 12px;padding:0 0 8px;background:none;border-bottom:3px solid #C63D32}
  html[data-doc="training"] .doc-hero h1{color:#000}html[data-doc="training"] .doc-hero .sub,html[data-doc="training"] .doc-hero .sub a{color:#444}
  html[data-doc="training"] .doc-hero .tag{background:none;color:#C63D32;padding:0}
  html[data-doc="training"] th{background:#fff;color:#000;border-bottom:2px solid #000}
  html[data-doc="training"] .nav{position:static}
}