/* =====================================================================
   HUD — the instrument theme, applied to every module page.

   The map already read as an instrument: dark ground, cyan and gold, live
   counters, corner brackets, scan lines. Every other page around it was a white
   government form. Moving between them felt like leaving the system and coming
   back, so this makes the shell speak the map's language everywhere.

   HOW IT IS DONE, AND WHY THAT WAY

   app.css defines its surfaces through tokens - --paper, --card, --line, --ink
   and their relatives - so most of this file is a token flip on html.hud rather
   than a pile of overrides. Flip the ground and the ink, and several hundred
   rules follow without being touched.

   What is deliberately NOT flipped is --pri and its family. Those are used both
   as dark-green text on a light card (15 places) and as a dark-green background
   for the header, footer and active chips (14 places). Redefine them and one of
   those two groups breaks: either the headings go invisible or the header turns
   pale. So the greens stay exactly as they are, the backgrounds keep working
   untouched, and the fifteen text cases are named individually below and given a
   colour that can be read on a dark card.

   That is the whole trick. Everything after it is detail.

   CONTRAST IS THE ACCEPTANCE TEST

   A dark theme that cannot be read is worse than the light one it replaced, and
   this system carries figures that authorise school construction. Every colour
   pair here was measured against its actual background rather than chosen by
   eye, and the audit that checks them runs over all ten pages.
   ===================================================================== */

/* ---------- the ground and the ink -------------------------------------- */
html.hud {
  --paper: #06120E;
  --card: #0C1F18;
  --line: rgba(126, 205, 176, .17);
  --ink: #EAF4F2;
  --ink-70: #B8CDC4;
  --ink-45: #8CA79D;
  --mint: rgba(16, 185, 129, .10);
  --glass: rgba(9, 26, 20, .88);
  --glass-border: rgba(110, 231, 183, .22);
  --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 10px 34px rgba(0, 0, 0, .45);

  /* the accent used wherever a dark green would have been unreadable */
  --hud-key: #6EE7B7;
  --hud-key-2: #7FD4EC;
  --hud-gold: #E7B667;

  background: var(--paper);
  color: var(--ink);
}

/* the page ground carries a faint technical grid, the way the map does */
html.hud body::before {
  content: "";
  position: fixed;
  inset: 0;
  /* behind the content, above the body background - and without giving any
     element a position it did not ask for */
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(110, 231, 183, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 231, 183, .045) 1px, transparent 1px);
  background-size: 54px 54px;
}

/* ---------- the fifteen places a dark green was the text ---------------- */
/* Named one by one rather than blanket-overridden: each of these is a link or a
   control that has to stay legible, and a wildcard would also catch the chips
   and headers where the same token is correctly a background. */
html.hud a:hover,
html.hud .nav-tabs a.on,
html.hud .rail-item:hover,
html.hud .dock-sec > summary:hover,
html.hud .dock-sec[open] > summary,
html.hud .dock-sec .dcaret,
html.hud .dock-body .clearbtn,
html.hud .d-link.on,
html.hud .sec-caret,
html.hud .hbar .nm a:hover,
html.hud table.dz th .dir,
html.hud table.dz a:hover,
html.hud .ch-max:hover,
html.hud .dock-tab:hover,
html.hud .rnk-t { color: var(--hud-key); }

/* ---------- the shell --------------------------------------------------- */
html.hud .app-bar {
  background: linear-gradient(115deg, #04150E 0%, #072A1C 45%, #063823 100%);
  border-bottom: 1px solid rgba(110, 231, 183, .22);
  box-shadow: 0 2px 18px rgba(0, 0, 0, .5);
}
html.hud .app-foot {
  background: linear-gradient(90deg, #04150E, #072A1C 55%, #063823);
  border-top: 1px solid rgba(110, 231, 183, .18);
  color: var(--ink-70);
}
html.hud .app-title { color: #EAF4F2; }
html.hud .app-sub, html.hud .gov { color: #93B8A8; }

html.hud .nav-tabs {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(110, 231, 183, .18);
}
html.hud .nav-tabs a { color: #A9C7BB; }
html.hud .nav-tabs a:hover { background: rgba(110, 231, 183, .12); color: #EAF4F2; }
html.hud .nav-tabs a.on {
  background: linear-gradient(150deg, #10352A, #0A2A1F);
  box-shadow: inset 0 0 0 1px rgba(110, 231, 183, .38);
}

/* ---------- cards ------------------------------------------------------- */
html.hud .dcard,
html.hud .sec,
html.hud .kpi,
html.hud .panel {
  background: linear-gradient(168deg, rgba(13, 34, 26, .92), rgba(8, 22, 17, .95));
  border-color: var(--line);
  color: var(--ink);
}
/* the corner bracket that marks a surface as an instrument panel rather than a
   sheet of paper - one corner only, so a page of cards does not turn into a
   page of frames */
html.hud .dcard { position: relative; }
html.hud .dcard::after {
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  width: 16px; height: 16px;
  border: 1.5px solid rgba(110, 231, 183, .30);
  border-left: 0; border-bottom: 0;
  border-radius: 0 6px 0 0;
  pointer-events: none;
}
html.hud .dcard h3,
html.hud .sec > summary,
html.hud .dash h2 { color: #EAF4F2; }
html.hud .dash h2::before { background: var(--hud-key); }

/* section headers get the small-caps instrument label treatment */
html.hud .sub,
html.hud .sec-lbl,
html.hud .hdr-stats span {
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: 9.5px;
  color: #7FD4EC;
}

/* ---------- numbers ----------------------------------------------------- */
/* Figures are what these pages are for, so they are given the instrument
   treatment: tabular so columns line up, and bright enough to be the first
   thing the eye lands on. */
html.hud .kpi b,
html.hud .kpi-grid b,
html.hud .hdr-stats b,
html.hud .big,
html.hud .num {
  color: #EAF4F2;
  font-variant-numeric: tabular-nums;
}
html.hud .kpi { box-shadow: inset 0 0 0 1px rgba(110, 231, 183, .10); }

/* ---------- tables ------------------------------------------------------ */
html.hud table.dz { color: var(--ink-70); }
html.hud table.dz th {
  background: rgba(110, 231, 183, .07);
  color: #7FD4EC;
  border-bottom-color: rgba(110, 231, 183, .22);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 10.5px;
}
html.hud table.dz td { border-bottom-color: rgba(126, 205, 176, .12); }
html.hud table.dz tbody tr:hover { background: rgba(110, 231, 183, .06); }
html.hud table.dz b, html.hud table.dz strong { color: #EAF4F2; }

/* ---------- controls ---------------------------------------------------- */
html.hud input:not([type="checkbox"]):not([type="radio"]),
html.hud select,
html.hud textarea {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(126, 205, 176, .24);
  color: var(--ink);
}
html.hud input::placeholder, html.hud textarea::placeholder { color: #5E7A70; }
html.hud input:not([type="checkbox"]):not([type="radio"]):focus,
html.hud select:focus,
html.hud textarea:focus {
  border-color: rgba(110, 231, 183, .7);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .15);
  outline: 0;
}
html.hud select option { background: #0C1F18; color: var(--ink); }
html.hud .tbl-tools .ts-clear {
  background: rgba(255, 255, 255, .05); border-color: rgba(126, 205, 176, .24); color: var(--ink-70);
}
html.hud .tbl-tools .ts-clear:hover { border-color: rgba(110, 231, 183, .7); color: var(--ink); }
html.hud .ts-why {
  background: linear-gradient(180deg, rgba(110,231,183,.13), rgba(110,231,183,.07));
  border-color: rgba(110, 231, 183, .42); color: #6EE7B7; box-shadow: none;
}
html.hud .ts-why::before { background: #6EE7B7; color: #06231A; }
html.hud .ts-why:hover { background: rgba(110, 231, 183, .22); box-shadow: 0 2px 8px rgba(0,0,0,.28); }
html.hud .ts-why:focus-visible { box-shadow: 0 0 0 3px rgba(52,211,153,.28); }
html.hud .ts-why.on { background: #6EE7B7; color: #06231A; border-color: #6EE7B7; }
html.hud .ts-why.on::before { background: #06231A; color: #6EE7B7; }
html.hud .why-box { border-top-color: rgba(126, 205, 176, .22); }
html.hud .why-list li span { color: #A9C7BB; }
html.hud input[type="checkbox"], html.hud input[type="radio"] { accent-color: #34D399; }

html.hud .btn,
html.hud button.primary,
html.hud .about-btn {
  background: linear-gradient(135deg, #0D6A3E, #0A5230);
  color: #EAF4F2;
  border-color: rgba(110, 231, 183, .28);
}
html.hud .btn:hover, html.hud .about-btn:hover { filter: brightness(1.15); }

/* ---------- scrollbars, so even the furniture matches ------------------- */
html.hud *::-webkit-scrollbar { width: 10px; height: 10px; }
html.hud *::-webkit-scrollbar-track { background: rgba(255, 255, 255, .03); }
html.hud *::-webkit-scrollbar-thumb {
  background: rgba(110, 231, 183, .22);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
html.hud *::-webkit-scrollbar-thumb:hover { background: rgba(110, 231, 183, .38); background-clip: content-box; }
html.hud { scrollbar-color: rgba(110, 231, 183, .3) rgba(255, 255, 255, .03); }

/* ---------- the light-background stragglers ----------------------------- */
/* Eight inline styles across the pages hardcode a pale panel. They cannot be
   reached by a token, and left alone they would show near-white text on a
   near-white block - the exact failure that made the census card unreadable in
   the map popups. Their text is forced dark so they stay legible as light
   islands, which is honest: they are printed-report blocks. */
html.hud [style*="background:#fff"],
html.hud [style*="background: #fff"],
html.hud [style*="background-color:#fff"],
html.hud [style*="background:#ECF2ED"],
html.hud [style*="background: #ECF2ED"],
html.hud [style*="background:#F1F7F2"],
html.hud [style*="background:#EAF6EF"],
html.hud [style*="background:#F4F7F4"] { color: #10241A; }
html.hud [style*="background:#fff"] a,
html.hud [style*="background:#ECF2ED"] a,
html.hud [style*="background:#F1F7F2"] a { color: #0A5230; }

/* ---------- print: back to paper ---------------------------------------- */
/* A report printed on a dark ground wastes a cartridge and reads badly. The
   theme is a screen theme. */
@media print {
  html.hud { background: #fff; color: #10241A; }
  html.hud body::before { display: none; }
  html.hud .dcard, html.hud .sec { background: #fff; color: #10241A; }
}

/* ---------- stillness on request ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.hud *, html.hud *::before, html.hud *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* =====================================================================
   Contrast repairs, from the audit over all ten pages.
   Each block below closes a measured failure, not a suspected one.
   ===================================================================== */

/* ---- surfaces that paint themselves white instead of using --card ------ */
html.hud span.tr,
html.hud .bar-track,
html.hud .track {
  background: rgba(255, 255, 255, .09) !important;
}
html.hud .ch-panel,
html.hud .ch-max,
html.hud .ch-close,
html.hud div.s,
html.hud .d-link.on {
  background: #0C1F18;
  color: var(--ink);
  border-color: var(--line);
}
html.hud .ch-max, html.hud .ch-close { color: var(--hud-key); }
html.hud .rail, html.hud .rail-item { color: var(--ink-70); }
html.hud .rail-item.on { color: #EAF4F2; }

/* ---- SVG text was coloured for white paper ----------------------------- */
/* Inline fills cannot be reached any other way. Seven colours, seventeen
   occurrences - enumerated rather than blanket-forced, so a chart that already
   chose a light fill keeps it. */
html.hud svg text[style*="fill:#6E8093"],
html.hud svg text[style*="fill:#6E8478"],
html.hud svg text[style*="fill:#3D5468"] { fill: #9CB6AB !important; }
html.hud svg text[style*="fill:#10241A"],
html.hud svg text[style*="fill:#1B2440"],
html.hud svg text[style*="fill:#23557E"] { fill: #DCE9E4 !important; }
html.hud svg text[style*="fill:#E0559B"] { fill: #F9A8D4 !important; }

/* ---- the printed report stays paper ------------------------------------ */
/* It is a sheet meant for a printer and a signature. Darkening it would make
   the screen match and the print wrong. */
html.hud .report {
  background: #FFFFFF;
  color: #10241A;
}
html.hud .report *:not(svg):not(path):not(rect):not(circle):not(line) { color: inherit; }
html.hud .report b, html.hud .report strong, html.hud .report h1,
html.hud .report h2, html.hud .report h3 { color: #10241A; }
html.hud .report a { color: #0A5230; }
html.hud .report .muted, html.hud .report small { color: #55705F; }

/* ---- semantic colours, lifted for a dark ground ------------------------ */
/* The meanings do not change - red is still the alarm - only the lightness,
   so the alarm can actually be read. */
html.hud .bad, html.hud .neg, html.hud td.num.bad,
html.hud [style*="color:#B91C1C"]:not([style*="background"]),
html.hud [style*="color:#DC2626"]:not([style*="background"]) { color: #FCA5A5 !important; }
html.hud .good, html.hud .pos,
html.hud [style*="color:#0D6A3E"]:not([style*="background"]),
html.hud [style*="color:#16A34A"]:not([style*="background"]) { color: #6EE7B7 !important; }
html.hud [style*="color:#B45309"]:not([style*="background"]),
html.hud [style*="color:#C2802B"]:not([style*="background"]) { color: #E7B667 !important; }

/* ---- the priority pills ------------------------------------------------ */
/* Pre-existing: white on amber measured 3.27 and white on grey-green 4.01,
   both short of the 4.5 an 11px label needs. */
html.hud [style*="background:#C2802B"] { color: #241703 !important; }
html.hud [style*="background:#6E8478"] { background: #46584E !important; }


/* =====================================================================
   The surfaces the audit named. Six containers and the plain tables
   accounted for 380 of the 497 failures left after the first repair.
   ===================================================================== */

/* the map dock, the report builder, the rail, the sub-header, the cards */
html.hud .dock-sec,
html.hud .dock-body,
html.hud .rb-group,
html.hud .rb-preset,
html.hud .lock-card,
html.hud nav.rail,
html.hud .app-sub,
html.hud .cmp-find,
html.hud .cmp-card,
html.hud .sub-ctl {
  background: linear-gradient(168deg, rgba(13, 34, 26, .94), rgba(8, 22, 17, .96));
  color: var(--ink);
  border-color: var(--line);
}
html.hud .dock-sec > summary,
html.hud .rb-group label,
html.hud .rb-preset b,
html.hud .lock-card,
html.hud .lock-note,
html.hud .cmp-find b { color: var(--ink); }
html.hud .rail-item { color: var(--ink-70); }
html.hud .rail-item:hover { background: rgba(110, 231, 183, .10); }
html.hud .app-sub { color: var(--ink-70); border-bottom: 1px solid var(--line); }
html.hud .sub-grp { color: #7FD4EC; }
html.hud .muted, html.hud .small2, html.hud small { color: var(--ink-45); }

/* a warning card keeps its warning colour, deepened so text sits on it */
html.hud .cmp-find.warn {
  background: linear-gradient(168deg, rgba(70, 40, 20, .92), rgba(45, 26, 12, .95));
  border-color: rgba(231, 182, 103, .35);
}
html.hud .cmp-find.warn b { color: #E7B667; }

/* ---- every table, not only table.dz ------------------------------------ */
html.hud table { color: var(--ink-70); }
html.hud table th { color: #7FD4EC; }
html.hud table td { border-bottom-color: rgba(126, 205, 176, .12); }
html.hud table b, html.hud table strong, html.hud table td.num { color: #EAF4F2; }
html.hud table tbody tr:hover { background: rgba(110, 231, 183, .05); }

/* ---- the on-map HUD chips carry their own ground ----------------------- */
/* They used to borrow the map's pale basemap behind them. Giving them a ground
   of their own means they read the same whether the map is in light or dark
   mode, which is the point of an overlay. */
html.hud .hud-console,
html.hud .hud-stack,
html.hud .hud-frame,
html.hud .legend-chip,
html.hud .anl {
  background: rgba(7, 22, 16, .90) !important;
  color: var(--ink);
  border-color: rgba(110, 231, 183, .22);
}
html.hud .hud-lvl, html.hud .hud-bar span { color: #B8CDC4; }
html.hud .hud-console b, html.hud .anl b { color: #EAF4F2; }
html.hud span.k { color: #9CB6AB; }


/* ---- the last containers the audit named ------------------------------- */
html.hud .vs-card,
html.hud .kpi-card,
html.hud .stat-card {
  background: linear-gradient(168deg, rgba(13, 34, 26, .94), rgba(8, 22, 17, .96));
  color: var(--ink);
  border-color: var(--line);
}
html.hud .vs-card b, html.hud .kpi-card b { color: #EAF4F2; }
/* the map's mode buttons sat on white of their own */
html.hud .mode-row button,
html.hud .bmp button,
html.hud .pn button {
  background: rgba(255, 255, 255, .05);
  color: var(--ink-70);
  border-color: var(--line);
}
html.hud .mode-row button.on,
html.hud .bmp button.on,
html.hud .pn button.on { color: #6EE7B7; }
html.hud .fresh-chip { background: rgba(110, 231, 183, .12); color: #B8CDC4; }
/* an amber pill needs dark text, not white */
html.hud .pill.hi, html.hud .pill.med { color: #241703; }


/* =====================================================================
   On-map chrome. Thirty-one controls were near-white ink on near-white
   ground after the ink flip; these are the grounds they needed.
   ===================================================================== */

/* the round map buttons - the disc belongs to the control, not the anchor */
html.hud .leaflet-control.fs-control {
  background: rgba(7, 22, 16, .92);
  border: 1px solid rgba(110, 231, 183, .28);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
}
html.hud .leaflet-control.fs-control a,
html.hud .leaflet-control.fs-control a svg { color: #B8CDC4; }
html.hud .leaflet-control.fs-control a:hover,
html.hud .leaflet-control.fs-control a:hover svg { color: #6EE7B7; }

/* leaflet's own zoom buttons, same treatment */
html.hud .leaflet-bar a,
html.hud .leaflet-control-zoom a {
  background: rgba(7, 22, 16, .92);
  color: #B8CDC4;
  border-color: rgba(110, 231, 183, .22);
}
html.hud .leaflet-bar a:hover,
html.hud .leaflet-control-zoom a:hover {
  background: rgba(16, 45, 34, .95);
  color: #6EE7B7;
}

/* the control bars across the top of the map, and the fold tab */
html.hud .map-top,
html.hud .map-top > div,
html.hud .bmp,
html.hud .pn,
html.hud .bmp-one {
  background: rgba(7, 22, 16, .90);
  border-color: rgba(110, 231, 183, .22);
  color: var(--ink-70);
}
html.hud .dock-tab {
  background: rgba(7, 22, 16, .95) !important;
  border-color: rgba(110, 231, 183, .25);
  color: #B8CDC4;
}
html.hud .dock-tab:hover { color: #6EE7B7; }
html.hud .map-top button,
html.hud .bmp button,
html.hud .pn button { color: #B8CDC4; }
html.hud .map-top button.on,
html.hud .bmp button.on,
html.hud .pn button.on {
  color: #6EE7B7;
  background: linear-gradient(150deg, #10352A, #0A2A1F);
  box-shadow: inset 0 0 0 1px rgba(110, 231, 183, .35);
}
html.hud .map-top .lbl,
html.hud .bmp .lbl { color: #7FD4EC; }

/* the school cluster badges keep their colour scale; the count goes dark on it,
   which is what it was before the ink was flipped */
html.hud .leaflet-marker-icon.marker-cluster,
html.hud .leaflet-marker-icon.marker-cluster span,
html.hud .leaflet-marker-icon.marker-cluster div {
  color: #10241A;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
/* the settlement and village badges paint their own dark grounds and keep
   light counts - they are not part of the pale scale */
html.hud .leaflet-marker-icon.gap-cluster,
html.hud .leaflet-marker-icon.gap-cluster span,
html.hud .leaflet-marker-icon.vil-cluster,
html.hud .leaflet-marker-icon.vil-cluster span {
  color: #FFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

/* ---------- compare.html: the four reference points --------------------- */
html.hud .cf-card { background: rgba(255,255,255,.03); border-color: rgba(126,205,176,.20); }
html.hud .cf-card p { color: #A9C7BB; }
html.hud .cf-matrix tr.cf-grp td { background: rgba(110,231,183,.10); color: #6EE7B7; }
html.hud .cf-matrix th, html.hud .cf-matrix td,
html.hud .cf-ladder th, html.hud .cf-ladder td { border-bottom-color: rgba(126,205,176,.16); }
html.hud .cf-bar { background: rgba(255,255,255,.10); }
html.hud .cf-thread .cf-y { background: rgba(110,231,183,.14); color: #6EE7B7; }
html.hud .cf-thread li span { color: #A9C7BB; }
html.hud .cf-stage { border-top-color: rgba(126,205,176,.20); }
html.hud .cf-srow span { color: #A9C7BB; }
html.hud .cf-srow.cf-foot { border-top-color: rgba(126,205,176,.28); }
html.hud .cf-stage.cf-empty { color: #8FAFA3; }
html.hud .why-list li.why-warn b { color: #FBBF24; }
html.hud .why-list li.why-warn { border-left-color: #F59E0B; }
html.hud .why-list li.why-ok b { color: #6EE7B7; }
html.hud #cfKey { border-top-color: rgba(126,205,176,.20); }
html.hud .cf-keywarn { background: rgba(245,158,11,.09); }
html.hud .qd-dot { stroke: #06231A; }
html.hud .qd-halo { stroke: #6EE7B7; }
html.hud .qd-med { stroke: #6EE7B7; }
html.hud .qd-lab { fill: var(--ink); }
html.hud .qd-pt:hover .qd-lab, html.hud .qd-pt.is-sel .qd-lab { fill: #6EE7B7; }
html.hud .qd-card { background: rgba(255,255,255,.03); border-color: rgba(126,205,176,.20); }
html.hud .qd-card { border-left-color: #6EE7B7; }
html.hud .qd-foot { color: #A9C7BB; }
html.hud .qd-zonelab { fill: #F87171; }
html.hud .qd-past { border-block-color: rgba(126,205,176,.20); }
html.hud .qd-past-i.is-proj b { color: #93B4FF; }
html.hud .sl-track::before { background: rgba(255,255,255,.12); }
html.hud .sl-track i.sl-a, html.hud .sl-track i.sl-b { border-color: #0B1F18; }
html.hud .sl-track i.sl-b, html.hud .sl-key i.sl-b { background: #6EE7B7; }
html.hud .sl-line { background: #6EE7B7; }
html.hud .sl-d { color: #6EE7B7; }
html.hud .fd { border-top-color: rgba(126,205,176,.18); }
html.hud .fd-stat b { color: #6EE7B7; }
html.hud .fd.is-warn .fd-stat b { color: #F87171; }
html.hud .fd-body p { color: #A9C7BB; }
html.hud .sl-row.is-sel { background: rgba(110,231,183,.10); box-shadow: inset 3px 0 0 #6EE7B7; }
html.hud .in-tbl th, html.hud .in-tbl td { border-bottom-color: rgba(126,205,176,.16); }
html.hud .in-bar { background: rgba(255,255,255,.10); }
html.hud .in-blind { background: rgba(245,158,11,.09); border-color: rgba(126,205,176,.20);
  border-left-color: #F59E0B; }
html.hud .in-blind-n b { color: #FBBF24; }
html.hud .in-blind p { color: #A9C7BB; }
html.hud .in-key-b, html.hud .in-key-note { color: #A9C7BB; }
html.hud .handoff-t p { color: #A9C7BB; }
html.hud .handoff-go { background: #6EE7B7; color: #06231A; box-shadow: none; }
html.hud .handoff-go:hover { background: #34D399; }
html.hud .prof-pdf { background: #6EE7B7; color: #06231A; box-shadow: none; }
html.hud .prof-pdf:hover { background: #34D399; }

/* the module rail when it sits in the header */
html.hud .app-bar .rail { background: rgba(255, 255, 255, .04); border-color: rgba(110, 231, 183, .18); }
html.hud .app-bar .rail .rail-item { color: #A9C7BB; }
html.hud .app-bar .rail .rail-item:hover,
html.hud .app-bar .rail .rail-item:focus-visible { background: rgba(110, 231, 183, .14); color: #EAF4F2; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
html.hud .app-bar .rail .rail-item.on:hover { background: linear-gradient(150deg, #10352A, #0A2A1F); color: #6EE7B7; }
html.hud .app-bar .rail .rail-item.on { background: linear-gradient(150deg, #10352A, #0A2A1F); color: #6EE7B7; box-shadow: inset 0 0 0 1px rgba(110, 231, 183, .38); }