/* WikiMas design system.
   Extracted from the design preview. Tokens first, then components.
   Paired with docs/specification/brand-visual-identity.md, which explains the choices.
   Asset URLs are relative to this file. */

/* ============================================================
   WikiMas design tokens.
   Brand constants are identical in both themes. The bare :root
   block carries the complete light palette; the dark block
   redefines tokens only, on data-theme="dark", which the sun and
   moon button in the application bar sets. Everyone starts in
   the light theme, whatever Windows is set to (decision 0116).
   ============================================================ */
:root{
  /* VivaMas brand constants, the published values from the corporate brand guidelines.
     Source: the vivamas-brand skill. Never sample these off an image. */
  --vm-teal:#00A88B; --vm-yellow:#FECE0B; --vm-red:#F0493E; --vm-leaf:#58B948; --vm-ink:#000000;

  /* The light palette is the high-contrast one tried as Crisp (decision 0116): firm lines, near-black text and a deep
     teal, so nothing reads faint in a bright room or over a long session. */

  /* Navigation rail: light, with a teal selected state */
  --rail:#FFFFFF; --rail-line:#C3CCD5; --rail-word:#0B0F14;
  --rail-text:#1F2A35; --rail-text-hi:#05080B; --rail-dim:#55616D;
  --rail-hover:#EEF6F4; --rail-sel:#D3EEE8; --rail-sel-text:#004A3E;

  /* Surfaces: white panels on a cool ground a step darker than them, so a panel or a card stands
     out from the page rather than blending into it (decision 0090) */
  --bg:#E6EBF0; --surface:#FFFFFF; --surface-2:#F5F7F9; --surface-3:#DEE4EA;
  --border:#C3CCD5; --border-hi:#8F9BA7;

  /* Text */
  --text:#0B0F14; --text-2:#2C3844; --text-3:#4A5663;

  /* Training levels (decision 0085). Colour is otherwise status; these three hues are chosen to stay clear
     of it: violet for a Training Path, blue for a Course, teal for a Module, deepening as the level grows.
     `-band` is the deep tone that carries white text, `-soft` the pale one behind a card with no picture. */
  --lv-path:#5B45B0; --lv-course:#1F63B0; --lv-module:#00796B;
  /* A shade deeper than the glyph colours, for white text: a pressed level button, and the card's band, which
     takes this tone further toward black so that it can be translucent (see .icard__band). */
  --lv-path-band:#4E3A9E; --lv-course-band:#1A579E; --lv-module-band:#00675B;
  --lv-path-soft:#E7E2F7; --lv-course-soft:#DDEAF7; --lv-module-soft:#D9F0EA;
  /* A selected filter or toggle, which must not borrow a level's or a status's colour */
  --ink:#16222D; --on-ink:#FFFFFF;

  /* Interactive. The fill is a step deeper than the corporate teal, which reaches only 3.0 : 1 on white. */
  --accent:#005C4B; --accent-hi:#003F34; --accent-fill:#007F69; --accent-soft:#D6F0EA; --accent-line:#8FD3C5;

  /* Status: steps off the brand ramps in the vivamas-brand skill, text colours at AA */
  --ok:#39782F;  --ok-soft:#EBF7E9;  --ok-line:#D0EBCC;  --ok-fill:#58B948;
  --warn:#7A6305; --warn-soft:#FFF9E2; --warn-line:#FFE78A; --warn-fill:#FECE0B;
  --bad:#C53C33;  --bad-soft:#FDE9E8;  --bad-line:#FBCCC9;  --bad-fill:#F0493E;

  --focus:#005C4B;
  --hero:linear-gradient(115deg,#E0F5F1 0%,#F1F8FB 56%,#FFFFFF 100%);
  --h-harness:43px; --h-top:58px;
  --mark-url:url("assets/vivamas-symbol-512w.ccf2c87d8063.png");
  --hero-photo:url("assets/Hero page 1.007cf5ad4378.png");
  --shadow:0 8px 24px rgba(10,20,30,.16), 0 1px 3px rgba(10,20,30,.12);
  --r-xs:3px; --r-sm:6px; --r:8px; --r-lg:12px;
  --ff-sans:"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",Inter,system-ui,sans-serif;
  --ff-display:"Segoe UI Variable Display","Segoe UI Variable","Segoe UI",Inter,system-ui,sans-serif;
  --ff-label:"Segoe UI Variable Small","Segoe UI Variable","Segoe UI",Inter,system-ui,sans-serif;
  --ff-mono:"Cascadia Mono",Consolas,ui-monospace,monospace;
  --ff-serif:Georgia,"Times New Roman",serif;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --rail:#0D1722; --rail-line:#1E2A38; --rail-word:#FFFFFF;
  --rail-text:#9DAFBD; --rail-text-hi:#EDF3F8; --rail-dim:#6B7E8E;
  --rail-hover:#17222F; --rail-sel:#0E2C2C; --rail-sel-text:#47C0AB;
  --bg:#0D1520; --surface:#172331; --surface-2:#1B2A3A; --surface-3:#233448;
  --border:#2A3C50; --border-hi:#3E5369;
  --text:#E8EEF4; --text-2:#B4C3D0; --text-3:#8A9BAB;
  --accent:#47C0AB; --accent-hi:#85D5C7; --accent-fill:#00A88B; --accent-soft:#10302F; --accent-line:#1F5951;
  --ok:#87CD7B; --ok-soft:#18301C; --ok-line:#325C36; --ok-fill:#58B948;
  --warn:#FEDC4F; --warn-soft:#33290C; --warn-line:#6B5518; --warn-fill:#FECE0B;
  --bad:#F47C74; --bad-soft:#3A2220; --bad-line:#71382F; --bad-fill:#F0493E;
  --lv-path:#A193F0; --lv-course:#66A6EC; --lv-module:#43C1AD;
  --lv-path-soft:#272149; --lv-course-soft:#172A40; --lv-module-soft:#113532;
  --ink:#D6E2EC; --on-ink:#0F1722;
  --hero:linear-gradient(115deg,#123734 0%,#182735 58%,#172331 100%);
  --shadow:0 10px 34px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.38);
}

/* Which level an element belongs to, as three variables its component reads (decision 0085) */
.lv-path{--lv:var(--lv-path);--lv-band:var(--lv-path-band);--lv-soft:var(--lv-path-soft)}
.lv-course{--lv:var(--lv-course);--lv-band:var(--lv-course-band);--lv-soft:var(--lv-course-soft)}
.lv-module{--lv:var(--lv-module);--lv-band:var(--lv-module-band);--lv-soft:var(--lv-module-soft)}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--text);font-family:var(--ff-sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:600;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-xs)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- prototype harness ---------- */
.harness{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:9px 18px;background:#1B2430;color:#AEBBC8;border-bottom:1px solid #2B3746;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 6px,transparent 6px 12px)}
.harness__tag{font-family:var(--ff-label);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7E8D9C}
.harness__grp{display:flex;align-items:center;gap:7px}
.harness__lbl{font-family:var(--ff-label);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#798796}
.seg{display:flex;background:#131B25;border:1px solid #2B3746;border-radius:var(--r-sm);overflow:hidden}
.seg button{border:0;background:transparent;color:#9CAAB8;padding:4px 11px;font-size:12px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--vm-teal);color:#06231E;font-weight:600}
.tog{border:1px solid #2B3746;background:#131B25;color:#9CAAB8;padding:4px 11px;border-radius:999px;font-size:12px;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.tog[aria-pressed="true"]{background:#13332F;border-color:#215F55;color:#DFF5F0}
.tog i{width:6px;height:6px;border-radius:50%;background:#3B4A59;display:block;flex:none}
.tog[aria-pressed="true"] i{background:var(--vm-yellow)}
.harness__spacer{margin-left:auto}

/* ---------- shell ----------
   One application bar, full width: the logo at its left, then search and the profile at
   its right. It is a single band at every width, so nothing in the header reflows when the
   rail collapses beneath it. The page title is not in here; it belongs to the content
   column, where it has room and does not compete with the logo. */
.appbar{display:flex;align-items:center;gap:16px;padding:0 20px;background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;top:var(--h-harness);z-index:30;min-height:var(--h-top)}
.shell{display:grid;grid-template-columns:250px minmax(0,1fr)}
.rail{background:var(--rail);color:var(--rail-text);display:flex;flex-direction:column;padding:14px 0;
  border-right:1px solid var(--rail-line);position:sticky;top:calc(var(--h-harness) + var(--h-top));
  height:calc(100vh - var(--h-harness) - var(--h-top));overflow-y:auto}
.brand{display:flex;align-items:center;gap:11px}
.brand__word{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--rail-word);line-height:1}
.brand__word b{color:var(--accent)}
.brand__sub{font-family:var(--ff-label);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--rail-dim);margin-top:4px}
.nav{display:flex;flex-direction:column;padding:0 10px}
.nav__group{font-family:var(--ff-label);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--rail-dim);
  padding:16px 8px 6px;margin-top:8px;border-top:1px solid var(--rail-line)}
.nav__item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r-sm);color:var(--rail-text);
  background:none;border:0;width:100%;text-align:left;cursor:pointer;font-size:14.5px}
.nav__item:hover{background:var(--rail-hover);color:var(--rail-text-hi)}
.nav__item[aria-current="true"]{background:var(--rail-sel);color:var(--rail-sel-text);font-weight:600;
  box-shadow:inset 2.5px 0 0 var(--accent-fill)}
.nav__item svg{flex:none;opacity:.9}
.nav__count{margin-left:auto;font-family:var(--ff-label);font-size:11px;font-weight:600;background:var(--bad-soft);
  color:var(--bad);border:1px solid var(--bad-line);border-radius:999px;padding:0 6px;line-height:16px;height:18px}
.rail__foot{margin-top:auto;padding:14px 18px 0;border-top:1px solid var(--rail-line)}
.rail__foot button{background:none;border:0;color:var(--rail-dim);font-size:12px;cursor:pointer;padding:4px 0;display:block;text-align:left}
.rail__foot button:hover{color:var(--accent)}

/* ---------- page head, inside the content column ---------- */
.main{min-width:0;display:flex;flex-direction:column}
.pagehead{margin-bottom:18px}
.pagehead h1{font-size:26px;line-height:1.2;font-family:var(--ff-display);font-weight:650;letter-spacing:-.015em}
.crumb{font-family:var(--ff-label);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);margin-bottom:3px}
.search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r);padding:6px 10px;flex:0 1 320px;min-width:0;color:var(--text-3)}
.search input{border:0;background:none;font:inherit;font-size:13px;color:var(--text);width:100%;outline:none}
.who{display:flex;align-items:center;gap:9px;padding:2px 2px 2px 14px;border:0;border-left:1px solid var(--border);
  background:none;cursor:pointer}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;
  font-size:11.5px;font-weight:600;flex:none}
.who__n{font-size:13.5px;font-weight:600;line-height:1.25;text-align:left}
.who__r{font-size:12px;color:var(--text-3);line-height:1.25;text-align:left}

/* Decision 0108: wide enough to use a 1920-pixel screen, centred beyond that. Reading stays narrow where it matters,
   in .prose and .page--narrow. */
.page{padding:24px 28px 64px;max-width:1720px;width:100%;margin-inline:auto}
.screen{display:none}
.screen.is-on{display:block}

/* ---------- primitives ---------- */
.eyebrow{font-family:var(--ff-label);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.stack{display:flex;flex-direction:column;gap:22px}
.stack--tight{gap:14px}
.row{display:flex;align-items:center;gap:10px}
.row--wrap{flex-wrap:wrap}
.spread{margin-left:auto}
.muted{color:var(--text-2)}
.small{font-size:13.5px}
.tiny{font-size:12.5px}

.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:0 1px 3px rgba(24,44,60,.07)}
/* The corporate symbol, used as an image rather than redrawn. One data URI serves the
   logo lockups and the woven pattern on the welcome band. */
.markimg{display:block;flex:none;background-image:var(--mark-url);background-size:contain;
  background-repeat:no-repeat;background-position:center}

/* Welcome band: the supplied hero photograph, which already carries the mint field and
   the woven symbol, with the copy sitting in the space its composition leaves at left. */
.hero{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--hero);
  min-height:238px;display:flex;align-items:center;padding:24px 30px}
.hero__photo{position:absolute;inset:0;background-image:var(--hero-photo);
  background-size:cover;background-position:right 42%;background-repeat:no-repeat}
.hero__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.74) 0%,rgba(255,255,255,.44) 32%,rgba(255,255,255,0) 62%)}
:root[data-theme="dark"] .hero__photo{filter:brightness(.82) saturate(.92)}
:root[data-theme="dark"] .hero__scrim{
  background:linear-gradient(90deg,rgba(15,23,34,.95) 0%,rgba(15,23,34,.84) 36%,rgba(15,23,34,.18) 70%,rgba(15,23,34,.06) 100%)}
.hero__in{position:relative;display:flex;flex-direction:column;gap:20px;max-width:56%}
.hero h2{font-family:var(--ff-display);font-size:25px;letter-spacing:-.02em}
.hero__row{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.hero__nums{display:flex;gap:28px}
.hero__n b{display:block;font-size:23px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hero__n span{font-size:12.5px;color:var(--text-2)}
.ring{position:relative;flex:none}
@media (max-width:900px){
  .hero{min-height:200px}
  .hero__in{max-width:none}
  .hero__scrim{background:linear-gradient(90deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.7) 60%,rgba(255,255,255,.3) 100%)}
}
.panel__head{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border)}
.panel__head h2{font-size:17px;font-family:var(--ff-display)}
.panel__body{padding:20px}
.panel__foot{padding:12px 20px;border-top:1px solid var(--border);background:var(--surface-2);
  border-radius:0 0 var(--r-lg) var(--r-lg);display:flex;align-items:center;gap:10px}

.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border-hi);background:var(--surface);
  color:var(--text);padding:8px 14px;border-radius:var(--r-sm);cursor:pointer;font-size:14px;font-weight:500;white-space:nowrap}
.btn:hover{background:var(--surface-2)}
.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
:root[data-theme="dark"] .btn--primary{color:#052019}
.btn--quiet{border-color:transparent;background:transparent;color:var(--accent)}
.btn--quiet:hover{background:var(--accent-soft)}
.btn--sm{padding:5px 10px;font-size:13px}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:2px 10px;border-radius:999px;
  border:1px solid transparent;white-space:nowrap}
.chip--ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.chip--go{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.chip--warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.chip--bad{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line)}
.chip--flat{background:var(--surface-3);color:var(--text-2);border-color:var(--border)}
.chip--out{background:transparent;color:var(--text-2);border-color:var(--border-hi);font-weight:500}
.chip i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

.lvl{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-label);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-2)}
.lvl svg{color:var(--lv,var(--text-3));flex:none}

.bar{height:5px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.bar span{display:block;height:100%;border-radius:999px;background:var(--accent-fill)}
.bar--ok span{background:var(--ok-fill)}
.bar--bad span{background:var(--bad-fill)}

.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;font-family:var(--ff-label);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-3);font-weight:500;padding:9px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
.table td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--surface-2)}
.num{font-variant-numeric:tabular-nums;font-family:var(--ff-label);font-size:13.5px}
.wrap-x{overflow-x:auto}
.who-cell{display:flex;align-items:center;gap:9px}
.who-cell .avatar{width:26px;height:26px;font-size:10.5px}
/* ---------- training content cards (spec 12.5) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}
.tcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;--s:var(--border-hi);box-shadow:0 1px 2px rgba(24,44,60,.045)}
.tcard[data-assigned]{border-left:3px solid var(--s)}
.s-go{--s:var(--accent-fill)} .s-ok{--s:var(--ok-fill)} .s-warn{--s:var(--warn-fill)} .s-bad{--s:var(--bad-fill)}
/* Card media: a fixed 16:9 region that holds the Content Manager's uploaded splash
   image, or a video poster frame, or the generated brand tint when neither exists. */
.splash{aspect-ratio:16/9;position:relative;overflow:hidden;border-bottom:1px solid var(--border);
  background-image:linear-gradient(128deg,var(--sp1) 0%,var(--sp2) 100%)}
.splash--banner{aspect-ratio:auto;height:140px}
.splash__art{position:absolute;inset:0;width:100%;height:100%;display:block}
.splash::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(122deg,rgba(2,169,139,.08) 0 2px,transparent 2px 15px)}
.splash__badge{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.88);color:#2A3A44;border-radius:999px;padding:2px 8px;
  font-family:var(--ff-label);font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.splash__lang{position:absolute;right:10px;top:10px;background:rgba(255,255,255,.88);color:#2A3A44;
  border-radius:var(--r-xs);padding:1px 6px;font-family:var(--ff-label);font-size:9.5px;font-weight:600;letter-spacing:.06em}
.splash__time{position:absolute;right:10px;bottom:10px;background:rgba(12,20,26,.8);color:#fff;
  border-radius:var(--r-xs);padding:1px 7px;font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums}
.splash__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;
  border-radius:50%;background:rgba(255,255,255,.93);color:#12211D;display:grid;place-items:center;
  box-shadow:0 2px 12px rgba(10,25,35,.22)}
.sp-a{--sp1:#DFF2EE;--sp2:#EFF8F6} .sp-b{--sp1:#E6F3DF;--sp2:#F1F8ED}
.sp-c{--sp1:#FDF2D4;--sp2:#FEF8E9} .sp-d{--sp1:#FCE6E3;--sp2:#FEF2F1}
:root[data-theme="dark"] .splash{background-image:linear-gradient(128deg,var(--sp1d,#1D3038) 0%,var(--sp2d,#172331) 100%)}
:root[data-theme="dark"] .splash__badge,:root[data-theme="dark"] .splash__lang{background:rgba(10,18,26,.66);color:#D6E2EC}
.sp-a{--sp1d:#123833} .sp-b{--sp1d:#1B3524} .sp-c{--sp1d:#38301A} .sp-d{--sp1d:#38221F}
.tcard__body{padding:13px 15px 0;display:flex;flex-direction:column;gap:8px;flex:1}
/* Every text block is clamped and every control has a fixed slot, so the chips and
   buttons line up across a row however long the titles are. */
.tcard__title{font-family:var(--ff-display);font-size:15.5px;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.tcard__desc{font-size:12.5px;color:var(--text-2);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.tcard__prog{height:5px;margin-top:2px}
.tcard__foot{margin-top:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:10px;padding:11px 0;border-top:1px solid var(--border)}
.tcard__foot .btn{min-width:104px;justify-content:center}
.tcard__foot>.chip{justify-self:start}
/* The classes above draw the card the mockup still shows. The application draws the one below (decision 0086). */

/* ---------- the training card (decisions 0085 and 0086) ----------
   The whole card is the link: its title's link is stretched over it, and only the tags, which lead to Browse
   Training filtered by that tag, sit above it and stay separately clickable. The picture is the card's ground:
   tags and languages on its top corners, the level and the title on a band in the level's colour along its
   foot. Below it, a progress line and one strip for status: how far, and a pin with the due date when the
   training is assigned. The picture keeps its 4:3 slot and the title its two lines, so a row of cards lines up. */
.icard{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:0 1px 3px rgba(24,44,60,.07)}
.icard:hover{border-color:var(--lv);box-shadow:0 0 0 1px var(--lv)}
.icard:has(.icard__link:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
/* The link that makes every part of the card open it. A separate element rather than the title link stretched,
   because the title sits in the band, which is positioned over the picture and would hold a stretched link to
   itself. It is hidden from screen readers and the keyboard, which reach the card by its title link. */
.icard__cover{position:absolute;inset:0;z-index:1;border-radius:inherit}
/* 4:3, taller than the picture's usual 16:9, so the picture still shows above the band that covers its foot */
.icard__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--lv-soft)}
.icard__media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* The picture a card has when nobody uploaded one: the level's pale tint, the diagonal motif, and the level's glyph */
.art{position:absolute;inset:0;background:var(--lv-soft);color:var(--lv)}
.art::before{content:"";position:absolute;inset:0;opacity:.13;
  background-image:repeating-linear-gradient(122deg,currentColor 0 2px,transparent 2px 15px)}
.art svg{position:absolute;right:9%;top:14%;width:34%;height:auto;max-height:52%;opacity:.28}
/* The band lets the picture show through it, so the picture reads as the card's ground. Its colour is the level's
   band tone taken 30 per cent toward black, at 70 per cent: nearly a third of the picture shows through, and white
   text still keeps 4.5 : 1 where the picture is pure white. A light blur and a soft shadow keep a busy picture from
   fighting the title. */
.icard__band,.ihero__band{background:color-mix(in srgb,color-mix(in srgb,var(--lv-band) 70%,#000) 70%,transparent);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);text-shadow:0 1px 2px rgba(0,0,0,.28)}
.icard__band{position:absolute;left:0;right:0;bottom:0;padding:8px 13px 10px;color:#fff}
.icard__lvl{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;opacity:.92;margin-bottom:1px}
.icard__title{font-family:var(--ff-display);font-size:16px;font-weight:600;line-height:1.3;letter-spacing:-.005em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.icard__link{color:inherit;text-decoration:none}
.icard__link:focus-visible{outline:0}
/* Tags at the left and languages at the right, each a link to Browse Training filtered by it, above the cover */
.icard__chips,.ihero__chips{position:absolute;display:flex;flex-wrap:wrap;align-items:flex-start;z-index:2}
.icard__chips{left:10px;right:10px;top:10px;gap:5px;pointer-events:none}
.icard__chips>*{pointer-events:auto}
.ihero__chips{left:16px;right:16px;top:14px;gap:6px}
.chips__lang{margin-left:auto}
.chips__lang~.chips__lang{margin-left:0}
.onpic .flag{box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.onpic{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.93);
  color:#22313C;font-size:12px;font-weight:600;line-height:1.5;text-decoration:none;white-space:nowrap}
a.onpic:hover{background:#fff;box-shadow:0 0 0 1.5px var(--lv)}
.icard__prog{height:4px;background:var(--surface-3)}
.icard__prog span{display:block;height:100%;background:var(--accent-fill)}
.icard__prog.bar--ok span{background:var(--ok-fill)}
.icard__prog.bar--bad span{background:var(--bad-fill)}
.icard__foot{display:flex;align-items:center;gap:10px;min-height:42px;padding:9px 13px;font-size:13.5px;color:var(--text-2)}
:root[data-theme="dark"] .onpic{background:rgba(10,18,26,.78);color:#DCE6EE}

/* Status as text, and the pin that marks training assigned to the learner (decision 0085). The pin is a label
   beside the date rather than a control, so it is never mistaken for something to pin or unpin. */
.state{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.state--ok{color:var(--ok);font-weight:600}
.state--bad{color:var(--bad);font-weight:600}
.state--warn{color:var(--warn);font-weight:600}
.state--go{color:var(--accent);font-weight:600}
.pinned{margin-left:auto;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-weight:600;cursor:default}
a.pinned{color:var(--text-2);text-decoration:none;cursor:pointer}
a.pinned.state--bad{color:var(--bad)}
a.pinned.state--warn{color:var(--warn)}
/* Above the card's cover, so pointing at it shows why the training is assigned */
.icard .pinned{position:relative;z-index:2}
.pinned svg{flex:none}

/* ---------- the list card (decision 0086) ----------
   The narrow form of the same card, for lists: a band in the level's colour, a miniature of the picture, the
   title and one line about it. The title's link is stretched over the row; what sits in its end slot stays
   clickable on its own. */
.irows{display:flex;flex-direction:column;gap:8px}
.irow{position:relative;display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 12px 8px 0;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.irow::before{content:"";align-self:stretch;flex:none;width:5px;margin:-8px 0;background:var(--lv)}
.irow:has(.irow__link):hover{border-color:var(--border-hi);background:var(--surface-2)}
.irow:has(.irow__link:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.irow__thumb{position:relative;flex:none;width:68px;height:38px;border-radius:5px;overflow:hidden;background:var(--lv-soft)}
.irow__thumb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.irow__thumb .art svg{right:50%;top:50%;width:18px;transform:translate(50%,-50%);opacity:.6}
.irow__main{flex:1;min-width:0}
.irow__t{font-size:14.5px;font-weight:600;line-height:1.35;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.irow__m{font-size:12.5px;color:var(--text-2);line-height:1.4;margin-top:1px}
.irow__lvl{display:inline-flex;align-items:center;gap:4px;vertical-align:top}
.irow__lvl svg{flex:none;color:var(--lv)}
.irow__link{color:inherit;text-decoration:none}
.irow__link::after{content:"";position:absolute;inset:0}
.irow__link:focus-visible{outline:0}
.irow__end{position:relative;z-index:1;flex:none;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-2)}
/* Plain text at the end of a row lets a click through to the row's link; only what does something takes it */
.irow:has(.irow__link) .irow__end{pointer-events:none}
.irow__end :is(a,button,form,input,label,select,[title]){pointer-events:auto}
.irow__ico{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:6px;background:var(--lv-soft);color:var(--lv)}
/* The same miniature inside a table cell, for a table whose rows are about training */
.icell{display:flex;align-items:center;gap:11px;min-width:220px}
.icell__thumb{position:relative;flex:none;width:54px;height:30px;border-radius:4px;overflow:hidden;background:var(--lv-soft);
  box-shadow:inset 3px 0 0 var(--lv)}
.icell__thumb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.icell__thumb .art svg{right:50%;top:50%;width:16px;transform:translate(50%,-50%);opacity:.6}
.icell__t{font-weight:600}
.irow--slim{min-height:44px;padding-top:6px;padding-bottom:6px}
.irow--slim::before{margin:-6px 0}
/* A row inside another keeps its picture, smaller (decision 0147) */
.irow--slim .irow__thumb{width:54px;height:30px;border-radius:4px}
.irow--slim .irow__thumb .art svg{width:16px}
.irow--done{background:var(--surface-2)}

/* ---------- level buttons and filter pills (decision 0087) ----------
   The level choice works like navigation, so it is a row of large buttons carrying the level glyphs; the
   languages and tags are small pills in a row of their own. Neither carries a label: what they choose is
   what they show. Nothing chosen means everything, so there is no "All" button, and the chosen one is
   pressed again to clear it. */
.facets{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.lvbtns{display:flex;flex-wrap:wrap;gap:8px}
.lvbtn{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 16px;border:1px solid var(--border-hi);
  border-radius:var(--r);background:var(--surface);color:var(--text);font-size:14.5px;font-weight:600;text-decoration:none}
.lvbtn svg{flex:none;color:var(--lv)}
.lvbtn:hover{border-color:var(--lv);box-shadow:inset 0 0 0 1px var(--lv)}
.lvbtn[aria-current="true"],.lvbtn[aria-pressed="true"]{background:var(--lv-band);border-color:var(--lv-band);color:#fff}
.lvbtn[aria-current="true"] svg,.lvbtn[aria-pressed="true"] svg{color:#fff}
.lvbtn__x{opacity:.8;margin-left:1px}
/* A button that creates a Training Path, Course or Module: its level's glyph with a plus on it, so the three are
   alike and each says both what it makes and that it makes one. */
.newbtn{font-weight:600}
.newbtn:hover{border-color:var(--lv);box-shadow:inset 0 0 0 1px var(--lv);background:var(--surface)}
.newbtn__ico{position:relative;display:inline-flex;color:var(--lv);margin-right:3px}
.newbtn__plus{position:absolute;right:-6px;bottom:-5px;padding:1px;border-radius:50%;background:var(--lv);color:#fff;
  box-shadow:0 0 0 2px var(--surface)}
.pills{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border:1px solid var(--border-hi);border-radius:999px;
  background:var(--surface);color:var(--text);font-size:13px;line-height:1.45;text-decoration:none;cursor:pointer}
.pill:hover{border-color:var(--text-3)}
.pill[aria-current="true"],.pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.pill .flag{box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.pills__sep{width:1px;height:20px;background:var(--border-hi);margin:0 5px}
.pills__more{display:contents}
.pills__more>summary{list-style:none}
.pills__more>summary::-webkit-details-marker{display:none}
.pills__more[open]>summary{display:none}
.clear{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:4px 6px;border-radius:var(--r-sm);
  color:var(--text-2);font-size:13px;text-decoration:none}
.clear:hover{color:var(--accent);background:var(--surface)}

/* ---------- the breadcrumb (decision 0089) ----------
   Where a Module, Course or Training Path sits, and the list it was opened from, above its title. */
.trail{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin:0 0 6px -6px;font-size:13.5px;color:var(--text-2)}
.trail a{display:inline-flex;align-items:center;gap:6px;padding:3px 6px;border-radius:var(--r-sm);color:var(--text-2);
  font-weight:600;text-decoration:none}
.trail a:hover{background:var(--surface);color:var(--accent)}
.trail a svg{color:var(--lv,var(--text-3))}
.trail__sep{color:var(--text-3);display:inline-flex}
.also{font-size:13px;color:var(--text-2)}
.also a{font-weight:600}

/* ---------- a Module, Course or Training Path as its own page (decision 0089) ----------
   One column. The picture spans it, with the level and title on the same band as the card, so the page reads
   as the card grown large; below it, one line of facts, the progress, and the way to continue. */
.ihero{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 1px 3px rgba(24,44,60,.07)}
.ihero__media{position:relative;height:250px;overflow:hidden;background:var(--lv-soft)}
.ihero__media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ihero__media .art svg{right:6%;top:12%;width:20%;max-height:46%}
.ihero__band{position:absolute;left:0;right:0;bottom:0;padding:12px 24px 15px;color:#fff}
.ihero__band .icard__lvl{font-size:13px}
.ihero__band h1,.ihero__title{font-family:var(--ff-display);font-size:28px;line-height:1.2;font-weight:650;letter-spacing:-.015em}
.ihero__body{display:flex;flex-direction:column;gap:14px;padding:18px 24px 20px}
.ihero__desc{max-width:72ch;color:var(--text-2)}
.facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;font-size:14px;color:var(--text-2)}
.facts>span{display:inline-flex;align-items:center;gap:6px}
.facts svg{flex:none;color:var(--text-3)}
.ihero__go{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.ihero__go .bar{flex:1 1 220px;height:7px}
.ihero__go .btn{margin-left:auto}

/* A heading over a section of a page that is not in a panel, such as the rows of cards on the home page */
.section-title{font-family:var(--ff-display);font-size:19px;font-weight:650}

/* ---------- a list whose rows open what is inside them (decision 0088) ---------- */
.outline{display:flex;flex-direction:column;gap:10px}
.onode{display:flex;flex-direction:column;gap:6px}
.onode__toggle{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:34px;height:34px;margin-left:6px;
  border:0;border-radius:var(--r-sm);background:none;color:var(--text-2);cursor:pointer}
.onode__toggle:hover{background:var(--surface-3);color:var(--text)}
.onode__toggle svg{transition:transform .15s}
.onode__toggle[aria-expanded="true"] svg{transform:rotate(90deg)}
.onode__spacer{flex:none;width:40px}
.onode__kids{display:flex;flex-direction:column;gap:5px;margin-left:46px}

/* ---------- attention list ---------- */
.att{display:flex;flex-direction:column}
.att__row{display:flex;align-items:center;gap:13px;padding:13px 18px;border-bottom:1px solid var(--border)}
.att__row:last-child{border-bottom:0}
.att__row>svg{flex:none}
.att__t{font-weight:600;font-size:13.5px}
.att__m{font-size:12px;color:var(--text-3);margin-top:1px}
.att--bad{box-shadow:inset 3px 0 0 var(--bad-fill)}
.att--warn{box-shadow:inset 3px 0 0 var(--warn-fill)}
.att--go{box-shadow:inset 3px 0 0 var(--accent-fill)}

/* ---------- stat block (used sparingly) ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
.stat{background:var(--surface);padding:14px 16px}
.stat__n{font-family:var(--ff-label);font-size:23px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.stat__l{font-size:12.5px;color:var(--text-3);margin-top:2px}

/* ---------- module reading view ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:22px;align-items:start}
.prose{font-family:var(--ff-sans);font-size:16.5px;line-height:1.66;max-width:66ch;color:var(--text)}
.prose h3{font-family:var(--ff-display);font-size:19px;margin:26px 0 8px}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 14px;padding-left:22px}
.prose li{margin-bottom:6px}
.sec-head{display:flex;align-items:center;gap:12px;margin:20px 0 9px}
.sec-head:first-child{margin-top:0}
.sec-head span{font-family:var(--ff-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.sec-head hr{flex:1;border:0;border-top:1px solid var(--border);margin:0}
.mats{display:flex;flex-direction:column;gap:7px}
.mat{display:flex;gap:12px;align-items:center;padding:10px 13px;border:1px solid var(--border);
  border-radius:var(--r);background:var(--surface)}
.mat__ord{font-family:var(--ff-label);font-size:12.5px;color:var(--text-3);width:16px;flex:none;text-align:right}
.mat__ico{width:26px;height:26px;border-radius:var(--r-xs);background:var(--surface-3);color:var(--text-2);
  display:grid;place-items:center;flex:none}
.mat__t{font-size:14.5px;font-weight:600}
.mat__m{font-size:12.5px;color:var(--text-2)}
.mat--done{background:var(--surface-2)}
.mat--done .mat__ico{background:var(--ok-soft);color:var(--ok)}
.mat--now{border-color:var(--accent-line);box-shadow:0 0 0 1px var(--accent-line)}
.mat--now .mat__ico{background:var(--accent-soft);color:var(--accent)}
/* A row of a Module's list is the link to what it names (decision 0089). A locked row is not a link: it is drawn
   greyed with a lock, and says what opens it. */
a.mat{color:var(--text);text-decoration:none}
a.mat:hover{border-color:var(--border-hi);background:var(--surface-2)}
a.mat--now:hover{border-color:var(--accent)}
.mat--locked{background:var(--surface-2);border-style:dashed;color:var(--text-3)}
.mat--locked .mat__t,.mat--locked .mat__m{color:var(--text-3)}
.mat--locked .mat__ico{background:transparent;color:var(--text-3)}
.mat__end{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none;font-size:13.5px;color:var(--text-2)}
.mat__end .bar{width:96px}
.reqs{display:flex;flex-direction:column;gap:9px;font-size:12.5px}
.req{display:flex;gap:9px;align-items:flex-start}
.req svg{flex:none;margin-top:2px}

/* ---------- annotated screenshot pattern ---------- */
.shot{border:1px solid var(--border-hi);border-radius:var(--r);overflow:hidden;background:var(--surface-2);max-width:560px}
.shot__win{background:#F7F9F8;padding:0;position:relative;font-family:var(--ff-sans)}
.shot__bar{display:flex;align-items:center;gap:6px;background:#2A3A47;padding:6px 9px}
.shot__bar b{color:#CFE7E1;font-size:10.5px;font-weight:500;font-family:var(--ff-label);letter-spacing:.06em}
.shot__grid{padding:12px;display:grid;gap:8px}
.shot__field{background:#fff;border:1px solid #D7E0DC;border-radius:3px;height:22px;display:flex;align-items:center;
  padding:0 7px;font-size:10.5px;color:#5B6E68;position:relative}
.shot__redact{background:repeating-linear-gradient(45deg,#B6C6C0 0 4px,#98ABA5 4px 8px);color:transparent;
  border-radius:2px;height:11px;width:120px}
.callout{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--vm-red);color:#fff;
  font-family:var(--ff-label);font-size:10.5px;font-weight:600;display:grid;place-items:center;
  box-shadow:0 0 0 2px #fff;right:-9px;top:2px}
.shot__cap{display:flex;align-items:center;gap:8px;padding:8px 11px;border-top:1px solid var(--border);
  background:var(--warn-soft);color:var(--warn);font-size:11.5px;font-weight:500}

/* ---------- test ---------- */
.q{max-width:640px}
.q__stem{font-family:var(--ff-display);font-size:18px;line-height:1.45;margin-bottom:16px}
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border);
  border-radius:var(--r);background:var(--surface);cursor:pointer;font-size:13.5px;margin-bottom:8px;width:100%;text-align:left}
.opt:hover{border-color:var(--border-hi)}
.opt__k{font-family:var(--ff-label);font-size:11.5px;width:20px;height:20px;border-radius:50%;border:1px solid var(--border-hi);
  display:grid;place-items:center;flex:none;color:var(--text-3)}
.opt--pick{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.opt--pick .opt__k{background:var(--accent);border-color:var(--accent);color:#fff}
.opt--right{border-color:var(--ok-line);background:var(--ok-soft)}
.opt--right .opt__k{background:var(--ok-fill);border-color:var(--ok-fill);color:#123}
.opt--wrong{border-color:var(--bad-line);background:var(--bad-soft)}
.explain{border-left:3px solid var(--ok-fill);background:var(--surface-2);padding:13px 15px;border-radius:0 var(--r) var(--r) 0;font-size:13px}

/* ---------- certificate ---------- */
.cert{background:var(--surface);border:1px solid var(--border-hi);border-radius:var(--r);padding:0;overflow:hidden;max-width:560px}
.cert__ribbon{height:6px;background:linear-gradient(90deg,var(--vm-yellow) 0 25%,var(--vm-red) 25% 50%,var(--vm-leaf) 50% 75%,var(--vm-teal) 75% 100%)}
.cert__in{padding:30px 34px 26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:11px}
.cert__nm{font-family:var(--ff-serif);font-size:28px;font-weight:600;letter-spacing:-.01em}
.cert__it{font-family:var(--ff-serif);font-size:16px;font-style:italic;color:var(--text-2)}
.cert__meta{display:flex;gap:26px;font-family:var(--ff-label);font-size:11px;color:var(--text-3);margin-top:4px;flex-wrap:wrap;justify-content:center}
.cert__dis{font-size:11px;color:var(--text-3);max-width:46ch;line-height:1.5;border-top:1px solid var(--border);padding-top:11px;margin-top:4px}

/* ---------- suggestion + assignment review ---------- */
.two{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.sug{border:1px solid var(--border);border-radius:var(--r);padding:13px 15px;background:var(--surface-2)}
.sug h4{font-size:12.5px;margin-bottom:9px}
.sug ul{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.sug li{display:flex;align-items:center;gap:9px;font-size:13px}
.sug--avail{box-shadow:inset 3px 0 0 var(--border-hi)}
.sug--assign{box-shadow:inset 3px 0 0 var(--warn-fill)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px}
.kv dt{color:var(--text-3);font-size:13px}
.kv dd{margin:0;font-weight:500}
.note{display:flex;gap:9px;padding:11px 14px;border-radius:var(--r);background:var(--accent-soft);
  color:var(--accent);font-size:13.5px;line-height:1.45;border:1px solid var(--accent-line)}
.note svg{flex:none;margin-top:1px}
.note--warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
/* Neutral information: green is kept for what succeeded, so a hint or a rule is drawn in grey (decision 0105). */
.note--info{background:var(--surface-2);color:var(--text-2);border-color:var(--border)}

/* ---------- tabs & filters ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:18px}
.tab{border:0;background:none;padding:10px 14px;font-size:14.5px;color:var(--text-2);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tab[aria-selected="true"]{color:var(--text);font-weight:600;border-bottom-color:var(--accent-fill)}
.tab span{font-family:var(--ff-label);font-size:12px;color:var(--text-3);margin-left:5px}
.filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.sel{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border-hi);background:var(--surface);
  padding:6px 11px;border-radius:var(--r-sm);font-size:13.5px;cursor:pointer;color:var(--text-2)}

/* ---------- hierarchy tree ---------- */
.tree{display:flex;flex-direction:column}
.tnode{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--border)}
.tnode:last-child{border-bottom:0}
.tnode--l2{padding-left:44px;background:var(--surface-2)}
.tnode--l3{padding-left:74px;background:var(--surface-2)}
.tnode__t{font-size:14.5px;font-weight:500}
.tnode__t em{font-style:normal;color:var(--text-3);font-size:12.5px;font-family:var(--ff-label);margin-left:8px}
.rule-in{position:relative}
.rule-in::before{content:"";position:absolute;left:28px;top:0;bottom:0;width:1px;background:var(--border)}

/* ---------- design system screen ---------- */
.sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.swatch{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.swatch__c{height:62px}
.swatch__b{padding:9px 11px}
.swatch__n{font-size:12px;font-weight:600}
.swatch__h{font-family:var(--ff-label);font-size:11px;color:var(--text-3);text-transform:uppercase}
.swatch__u{font-size:11px;color:var(--text-2);margin-top:5px;line-height:1.4}
.specimen{display:flex;flex-direction:column;gap:14px}
.spec-row{display:grid;grid-template-columns:132px 1fr;gap:18px;align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--border)}
.spec-row:last-child{border-bottom:0;padding-bottom:0}
.spec-row>.eyebrow{padding-top:5px}
.dd{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dd__col{border:1px solid var(--border);border-radius:var(--r);padding:14px 16px}
.dd__col h4{font-size:12.5px;display:flex;align-items:center;gap:7px;margin-bottom:10px}
.dd--do h4{color:var(--ok)} .dd--no h4{color:var(--bad)}
.dd__col ul{margin:0;padding-left:18px;font-size:12.5px;color:var(--text-2);display:flex;flex-direction:column;gap:7px;line-height:1.45}

/* ---------- modal ---------- */
.scrim{position:fixed;inset:0;background:rgba(7,29,25,.55);display:none;place-items:center;z-index:80;padding:24px}
.scrim.is-on{display:grid}
.modal{background:var(--surface);border:1px solid var(--border-hi);border-radius:var(--r-lg);box-shadow:var(--shadow);
  width:min(520px,100%);overflow:hidden}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13px;font-weight:600;color:var(--text-2)}
.field textarea,.field input[type=text]{font:inherit;font-size:14px;color:var(--text);background:var(--surface-2);
  border:1px solid var(--border-hi);border-radius:var(--r-sm);padding:9px 11px;resize:vertical;outline:none;width:100%}
.field textarea:focus,.field input:focus{border-color:var(--accent)}
.ctx{font-family:var(--ff-mono);font-size:11.5px;color:var(--text-3);background:var(--surface-2);
  border:1px dashed var(--border-hi);border-radius:var(--r-sm);padding:9px 11px;line-height:1.6}

/* ---------- role matrix ---------- */
.mx td:not(:first-child),.mx th:not(:first-child){text-align:center}
.dot{width:15px;height:15px;border-radius:var(--r-xs);border:1px solid var(--border-hi);display:inline-block;background:var(--surface-2)}
.dot--on{background:var(--accent-fill);border-color:var(--accent-fill);position:relative}
.dot--on::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:2px solid #fff;
  border-top:0;border-left:0;transform:rotate(42deg)}

@media (max-width:1080px){
  .appbar{position:static;padding:0 14px;gap:12px}
  .shell{grid-template-columns:1fr}
  .rail{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:8px 12px;gap:6px}
  .rail .nav{flex-direction:row;flex-wrap:wrap;padding:0;gap:4px}
  .rail .nav__item{width:auto}
  .nav__count{margin-left:2px}
  .nav__group{display:none}
  .rail__foot{display:none}
  .split,.two{grid-template-columns:minmax(0,1fr)}
}

/* The band stays one row down to a phone: the wordmark's subtitle and the profile's
   name and role drop out before the bar is allowed to wrap. */
@media (max-width:720px){
  .brand__sub{display:none}
  .who__n,.who__r{display:none}
  .who{padding-left:10px}
  .search{flex:1 1 auto}
}