/* ==========================================================================
   AMIGA WORKBENCH DESIGN SYSTEM - dan.seg.br
   Flat Classic surface: solid fills, 2px bevels, square gadgets.
   Palette is Amiga 12-bit RGB444 only (every channel byte has equal nibbles).
   No glow, no glass, no backdrop-filter, no rounded tiles, no colour emoji.

   Sole project stylesheet. The legacy terminal-HUD `style.css` was deleted in
   Task 15; its still-live geometry was folded into the BASE SURFACE block below
   and re-expressed with palette tokens. The per-application blocks further down
   remain as specificity guards over that base — they re-assert the two-tone
   bevel against the shared hover rules and pin the flat treatment.
   ========================================================================== */

:root {
  --amiga-black:#000000; --amiga-white:#FFFFFF;
  --amiga-blue:#0055AA;  --amiga-blue-dp:#0000AA;
  --amiga-orange:#FF8800; --amiga-orange-d:#CC6600;
  --grey-55:#555555; --grey-88:#888888; --grey-aa:#AAAAAA; --grey-dd:#DDDDDD;

  --screen-bg:var(--amiga-blue);
  --menu-bg:var(--amiga-white);          --menu-fg:var(--amiga-black);
  --menu-highlight-bg:var(--amiga-orange); --menu-highlight-fg:var(--amiga-black);
  --win-frame:var(--grey-aa);            --win-frame-shadow:var(--grey-55);
  --win-body:var(--amiga-white);         --win-body-fg:var(--amiga-black);
  --win-title-bg:var(--amiga-orange);    --win-title-fg:var(--amiga-black);
  --bevel-lit:var(--amiga-white);        --bevel-shadow:var(--grey-55);
  --control-face:var(--grey-aa);         --text-on-face:var(--amiga-black);
  --link:var(--amiga-blue);              --link-on-blue:var(--amiga-white);
  --accent-rule:var(--amiga-orange);
  --guru-bg:#AA0000;                     --guru-fg:var(--amiga-white);

  --px:2px; --cell:calc(8 * var(--px));
  /* Content column, spec §4.4: 640 cells at the integer `--px` scale. */
  --max-width:calc(640 * var(--px));
  --font-mono:'Unscii','Terminus',ui-monospace,monospace;
  --transition-fast:0.15s cubic-bezier(0.2,0,0,1);

  --focus-inner:2px solid var(--amiga-white);
  --focus-outer:0 0 0 4px var(--amiga-black);
}

/* Self-hosted pixel font. Topaz ships inside the copyrighted Kickstart ROM and
   is not embedded; Unscii (public domain) is the primary face and Terminus
   (SIL OFL 1.1) the fallback, both subset-neutral same-origin woff2 so the
   `font-src 'self' data:` directive is untouched. `font-display: optional`, not
   `swap`: a swap repaint would shift a monospace grid on first paint.
   Provenance: unscii-8-thin.woff2 from viznut.fi/unscii (Unscii 2.x, public
   domain — the `-16-full` variant alone is GPL and is not used);
   terminus.woff2 from the Terminus TTF 4.49.3 build
   (github.com/Tblue/mkttf, SIL OFL 1.1). Both carry the full PT-BR accented
   set (Ã Õ Ç É Í Ó Ú Â Ê and the lowercase forms), verified by glyph raster. */
@font-face {
  font-family: 'Unscii';
  src: url('assets/fonts/unscii-8-thin.woff2') format('woff2');
  font-display: optional;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Terminus';
  src: url('assets/fonts/terminus.woff2') format('woff2');
  font-display: optional;
  font-weight: 400;
  font-style: normal;
}

/* Touch layouts step the typographic grid up one integer multiple (never a
   fractional scale). */
@media (max-width:767px) { :root { --px:3px; } }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms!important;
    /* `animation-iteration-count` and `scroll-behavior` clamp the reduced-motion
       case: without the iteration clamp the `infinite` `scanAvatar` keyframe
       keeps looping, and the auto scroll-behaviour stops any smooth scroll. */
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* The reduced-transparency fallback and the bevel re-assertion both live at the
   end of this file, after the chrome rules: at equal specificity a later source
   order wins, so keeping either here would let `.screen-bar`'s flat background
   override the fallback and the media feature would never apply. */

.bevel { border-top:2px solid var(--bevel-lit); border-left:2px solid var(--bevel-lit);
         border-bottom:2px solid var(--bevel-shadow); border-right:2px solid var(--bevel-shadow); }
.bevel-inset { border-top:2px solid var(--bevel-shadow); border-left:2px solid var(--bevel-shadow);
               border-bottom:2px solid var(--bevel-lit); border-right:2px solid var(--bevel-lit); }
.dither-title { background:repeating-linear-gradient(0deg,var(--amiga-orange) 0 2px,var(--amiga-orange-d) 2px 4px); }

/* Dual-tone ring: 2px white inner + 2px black outer (spec §19 / plan global
   constraint). Visible on all three grounds the system uses: Workbench blue,
   control grey and the orange title bar, because the white band separates the
   black band from every ground.
   `outline-offset:0` is load-bearing. The brief wrote `outline-offset:2px`,
   which pushes the white outline *outward* of a 2px transparent gap and paints
   black inner / white outer — pixel-verified — the inverse of both the token
   names (`--focus-inner` is white) and the locked decision. At offset 0 the
   outline hugs the control and the 4px box-shadow begins exactly beneath it, so
   the white band sits inside and the black band outside. */
:focus-visible { outline:var(--focus-inner); outline-offset:0; box-shadow:var(--focus-outer); }

/* ==========================================================================
   BASE SURFACE (ported from the retired style.css, Task 15)

   Everything below was geometry still in use by the page when style.css was
   deleted; the colour layer is re-expressed with palette tokens and the banned
   treatment (glass `backdrop-filter`, gradients, glow `text-shadow`/`box-shadow`,
   rounded corners, hover lifts) is dropped per spec §4.3. Order mirrors the old
   cascade: this base block comes first, then the chrome and the per-app scoped
   blocks below override it exactly as before.
   ========================================================================== */

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

html {
  font-family:var(--font-mono);
  background-color:var(--screen-bg);
  color:var(--win-body-fg);
  line-height:1.6;
  /* Pixel font: no antialiasing and no ligatures, per spec §4.4. */
  -webkit-font-smoothing:none;
  font-smoothing:never;
  font-variant-ligatures:none;
}

body {
  position:relative;
  min-height:100vh;
  background-color:var(--screen-bg);
  color:var(--win-body-fg);
  overflow-x:hidden;
  font-size:14.5px;
}

::selection { background-color:var(--amiga-orange); color:var(--amiga-black); text-shadow:none; }

a { color:var(--link); text-decoration:none; }
a:hover { color:var(--amiga-blue-dp); }

/* Helper utilities (the `!important` matches the legacy declarations so the
   scoped shell/connect overrides below can still flip them to black). */
.text-dim { color:var(--bevel-shadow) !important; }
.text-accent { color:var(--amiga-blue-dp) !important; }
.text-highlight { color:var(--win-body-fg) !important; }
.code-highlight {
  color:var(--win-body-fg);
  background-color:var(--win-body);
  padding:1px 5px;
  border:1px solid var(--bevel-shadow);
}

/* Accessibility: skip link */
.skip-link {
  position:absolute;
  top:-60px;
  left:20px;
  padding:10px 18px;
  background:var(--amiga-orange);
  color:var(--amiga-black);
  font-weight:700;
  z-index:9999;
  text-decoration:none;
  font-size:13px;
}
.skip-link:focus { top:15px; outline:2px solid var(--amiga-white); }

/* CRT scanline/vignette overlay: a flat repeating line, not a gradient. */
.crt-overlay {
  position:fixed; top:0; left:0;
  width:100vw; height:100vh;
  z-index:10; pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.30) 2px 3px);
  opacity:.7;
}
html[data-crt="off"] .crt-overlay { display:none; }

/* Main content column and section structure. */
.main-layout {
  position:relative;
  z-index:5;
  max-width:var(--max-width);
  margin:0 auto;
  padding:24px 20px 80px;
  display:flex;
  flex-direction:column;
  gap:60px;
  /* Unscii's 1:1 advance is ~1.7x wider than the legacy OS-monospace fallback,
     so a long unbroken token (a URL, a slug) can force a horizontal scrollbar
     the old sheet never produced. `min-width:0` lets the flex/grid children
     shrink below their intrinsic width and every long line wraps instead. */
  min-width:0;
}
.main-layout > * { min-width:0; }

.terminal-section { scroll-margin-top:calc(2 * var(--cell)); }

.section-tag-header { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:24px; }
.tag-index { color:var(--amiga-black); font-size:13px; font-weight:700; letter-spacing:1px; }
.section-title { color:var(--win-body-fg); font-size:18px; font-weight:700; letter-spacing:1.5px; }
.section-line { flex:1; height:2px; background:var(--accent-rule); }

/* Terminal-window components: flat white gadgets on the blue screen. */
.terminal-card {
  background-color:var(--win-body);
  border:1px solid var(--bevel-shadow);
  box-shadow:none;
  overflow:hidden;
  position:relative;
  min-width:0;
}

.terminal-card-header {
  background-color:var(--control-face);
  border-bottom:2px solid var(--amiga-black);
  padding:9px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  color:var(--text-on-face);
}

.terminal-dots { display:flex; gap:6px; }
.dot {
  width:calc(3 * var(--px)); height:calc(3 * var(--px));
  border-radius:0; opacity:1;
  background:var(--control-face);
  border-top:2px solid var(--bevel-lit);
  border-left:2px solid var(--bevel-lit);
  border-bottom:2px solid var(--bevel-shadow);
  border-right:2px solid var(--bevel-shadow);
}

.terminal-title {
  font-size:12px; color:var(--text-on-face);
  letter-spacing:.5px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.terminal-meta { font-size:11px; color:var(--text-on-face); }
.terminal-card-body { padding:24px; }

/* HUD tactical cards: raised white gadgets. */
.hud-card {
  background-color:var(--win-body);
  color:var(--win-body-fg);
  border:1px solid var(--bevel-shadow);
  padding:24px;
  position:relative;
  box-shadow:none;
  min-width:0;
}
.card-hud-label { color:var(--bevel-shadow); font-size:11px; letter-spacing:1px; margin-bottom:10px; font-weight:600; }
.card-title { font-size:17px; color:var(--win-body-fg); font-weight:700; margin-bottom:14px; letter-spacing:.5px; }

/* --- Workbench desktop: hero / identity block ---------------------------- */
.hero-section { margin-top:12px; }
.hero-card .terminal-card-body { padding:28px; }

.boot-sequence {
  background-color:var(--win-body);
  color:var(--win-body-fg);
  border:2px solid var(--bevel-shadow);
  padding:14px 18px;
  margin-bottom:28px;
  font-size:12.5px;
  line-height:1.7;
  min-height:140px;
  max-height:160px;
  overflow-y:auto;
}
.log-line { white-space:pre-wrap; word-break:break-all; }

.hero-identity-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:36px; align-items:center; }
.identity-badge-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }

.tag-badge {
  font-size:11px; font-weight:600; letter-spacing:.5px;
  padding:3px 8px; text-transform:uppercase;
}
.tag-security { background-color:var(--win-body); color:var(--win-body-fg); border:1px solid var(--bevel-shadow); }
.tag-cert { background-color:var(--win-body); color:var(--win-body-fg); border:1px solid var(--bevel-shadow); }
.tag-geo { background-color:var(--win-body); color:var(--win-body-fg); border:1px solid var(--bevel-shadow); }

.hero-glitch-title {
  /* Display heading, so it caps by viewport as well as the cell grid: Unscii's
     1:1 advance makes "GONÇALVES" 9 cells wide, and at the touch `--px:3px` a
     21-cell size (63px) would overflow a 390px screen. The clamp keeps the
     legacy desktop size on the grid (42px = 21 cells at --px:2) and steps down
     to 8 cells (24px) when narrow, both integer cell multiples per spec §4.4. */
  font-size:clamp(calc(8 * var(--px)),4.2vw,calc(21 * var(--px)));
  font-weight:800;
  color:var(--win-body-fg);
  letter-spacing:1.5px;
  line-height:1.15;
  margin-bottom:14px;
  text-shadow:none;
}
.hero-subline { font-size:15.5px; color:var(--win-body-fg); line-height:1.6; margin-bottom:24px; max-width:680px; }

.hero-pillars { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:28px; }
.pillar-chip {
  background-color:var(--win-body);
  color:var(--win-body-fg);
  border:1px solid var(--bevel-shadow);
  padding:10px 12px;
  display:flex; align-items:center; gap:10px;
}
.pillar-chip:hover { border-color:var(--amiga-orange); background-color:var(--win-body); }
.chip-icon { font-size:18px; flex-shrink:0; }
.chip-body { display:flex; flex-direction:column; }
.chip-body strong { font-size:12.5px; color:var(--win-body-fg); }
.chip-body small { font-size:11px; color:var(--bevel-shadow); }

.hero-actions { display:flex; flex-wrap:wrap; gap:14px; }
.action-btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.8px;
  padding:10px 20px;
  cursor:pointer;
  border:1px solid transparent;
  text-decoration:none;
}
.action-primary { background-color:var(--control-face); color:var(--text-on-face); box-shadow:none; }
.action-primary:hover { background-color:var(--grey-dd); color:var(--text-on-face); box-shadow:none; transform:none; }
.action-secondary { background-color:transparent; border-color:var(--bevel-shadow); color:var(--win-body-fg); }
.action-secondary:hover { background-color:var(--grey-dd); border-color:var(--bevel-shadow); color:var(--text-on-face); box-shadow:none; }
.action-ghost { background-color:transparent; border-color:var(--bevel-shadow); color:var(--win-body-fg); }
.action-ghost:hover { border-color:var(--bevel-shadow); color:var(--win-body-fg); background-color:var(--grey-dd); }
.btn-prefix { font-weight:700; }

.hero-avatar-pane { display:flex; justify-content:center; }
.hud-reticle {
  position:relative; width:240px;
  background-color:var(--win-body);
  border:1px solid var(--bevel-shadow);
  padding:16px;
}
.hud-corner { position:absolute; width:8px; height:8px; border-color:var(--amiga-orange); border-style:solid; }
.hud-corner.top-left { top:-1px; left:-1px; border-width:2px 0 0 2px; }
.hud-corner.top-right { top:-1px; right:-1px; border-width:2px 2px 0 0; }
.hud-corner.bottom-left { bottom:-1px; left:-1px; border-width:0 0 2px 2px; }
.hud-corner.bottom-right { bottom:-1px; right:-1px; border-width:0 2px 2px 0; }

.avatar-frame {
  position:relative; width:100%; aspect-ratio:1 / 1;
  background-color:var(--win-body);
  border:1px solid var(--bevel-shadow);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:12px;
}
.avatar-img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(1); opacity:.92; }
.avatar-frame:hover .avatar-img { filter:grayscale(0) contrast(1.05) brightness(1); opacity:1; }
.ascii-fallback { color:var(--win-body-fg); font-size:11px; line-height:1.2; text-align:center; }
.ascii-fallback[hidden] { display:none; }
/* The scan bar sweeps inside the avatar frame; the glow is dropped. */
.scan-bar {
  position:absolute; top:0; left:0; width:100%; height:3px;
  background:var(--amiga-orange); box-shadow:none; opacity:.6;
  will-change:transform; animation:scanAvatar 3.5s linear infinite;
}
@keyframes scanAvatar {
  0% { transform:translateY(0); opacity:0; }
  10% { opacity:.7; }
  90% { opacity:.7; }
  100% { transform:translateY(208px); opacity:0; }
}
.telemetry-hud-data { font-size:10.5px; color:var(--bevel-shadow); display:flex; flex-direction:column; gap:3px; }
.telemetry-item { display:flex; justify-content:space-between; }
.telemetry-item span { color:var(--win-body-fg); font-weight:600; }

/* --- SHELL content: interactive terminal (the `.term-*` chrome is scoped
   again under `[data-app="shell"]` below; these are the shared metrics). ----- */
.terminal-interactive { display:flex; flex-direction:column; gap:14px; }
.terminal-instructions { font-size:12.5px; }
.quick-cmd-bar { display:flex; flex-wrap:wrap; gap:8px; }
.cmd-chip {
  background-color:var(--control-face); color:var(--text-on-face);
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  padding:4px 10px; cursor:pointer;
}
.cmd-chip:hover { background-color:var(--grey-dd); color:var(--text-on-face); }
.cmd-chip:active { transform:none; }
.terminal-output {
  background-color:var(--win-body); color:var(--win-body-fg);
  border:2px solid var(--bevel-shadow);
  padding:16px; min-height:200px; max-height:420px;
  overflow-y:auto; font-size:13px; line-height:1.65;
  display:flex; flex-direction:column; gap:10px;
  scrollbar-width:thin; scrollbar-color:var(--grey-55) var(--win-body);
}
.term-cmd-echo { color:var(--win-body-fg); font-weight:600; }
.term-response { color:var(--win-body-fg); white-space:pre-wrap; word-break:break-word; }
.terminal-input-row {
  display:flex; align-items:center;
  background-color:var(--win-body); color:var(--win-body-fg);
  padding:8px 12px;
}
.term-prompt { font-size:13px; font-weight:600; user-select:none; display:inline-flex; white-space:nowrap; }
.term-user { color:var(--win-body-fg); }
.term-input {
  /* `min-width:0` is load-bearing: a flex item's `auto` minimum is its
     min-content width, and Unscii's wide 1:1 advance makes the placeholder
     wider than the row can spare, so the field refuses to shrink and pushes
     the submit gadget past `.terminal-card`'s `overflow:hidden` edge. */
  flex:1; min-width:0; background:transparent; border:none; outline:none;
  color:var(--win-body-fg); font-family:var(--font-mono); font-size:13px; letter-spacing:.5px;
}
.term-input::placeholder { color:var(--bevel-shadow); }
.term-submit-btn {
  background:var(--control-face); border:none; color:var(--text-on-face);
  font-family:var(--font-mono); font-size:14px; font-weight:700; cursor:pointer; padding:0 4px;
}
.term-submit-btn:hover { color:var(--text-on-face); }

/* --- INTEL: profile dossier and the defence triad ------------------------- */
.about-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.dossier-org { display:flex; flex-wrap:wrap; gap:8px; font-size:12.5px; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--bevel-shadow); }
.org-label { color:var(--bevel-shadow); font-weight:600; }
.org-name { color:var(--win-body-fg); font-weight:600; }
.dossier-body { font-size:14px; color:var(--win-body-fg); display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.dossier-body strong { color:var(--win-body-fg); }
.dossier-specs {
  display:flex; flex-direction:column; gap:8px;
  background-color:var(--win-body); color:var(--win-body-fg);
  padding:14px; border:2px solid var(--bevel-shadow);
}
.spec-row { display:flex; flex-wrap:wrap; justify-content:space-between; font-size:12px; gap:10px; }
.spec-key { color:var(--bevel-shadow); font-weight:600; }
.spec-val { color:var(--win-body-fg); text-align:right; font-weight:500; }

/* Prior security roles (spec §2 decision 15 / §14 item 3). A compact list under
   the spec rows: the role in black on the white body, the organisation and dates
   in the same grey the spec keys use, and orange only as the 2px rule that
   separates the block. No orange text (§12). */
.prior-roles {
  display:flex; flex-direction:column; gap:10px;
  margin-top:16px; padding-top:14px;
  border-top:2px solid var(--amiga-orange);
}
.prior-list { list-style:none; display:flex; flex-direction:column; gap:8px; }
.prior-row { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; font-size:12px; }
.prior-role { color:var(--win-body-fg); font-weight:600; }
.prior-meta { color:var(--bevel-shadow); text-align:right; }

.triad-list { display:flex; flex-direction:column; gap:16px; }
.triad-item {
  display:flex; gap:16px; padding:14px;
  background-color:var(--win-body); color:var(--win-body-fg);
  border:1px solid var(--bevel-shadow);
}
.triad-item:hover { border-color:var(--amiga-orange); transform:none; }
/* The numeral is text, so it is black: orange on white is 2.39:1 and orange is
   a rule/frame colour only (spec §12). The accent survives as a short orange
   rule under the glyph, which keeps "01/02/03" visually distinct without
   putting orange in a text role. */
.triad-num {
  font-size:18px; font-weight:800; color:var(--win-body-fg); opacity:1; line-height:1.2;
  padding-bottom:calc(1 * var(--px)); border-bottom:2px solid var(--amiga-orange);
  align-self:flex-start;
}
.triad-content h4 { font-size:13.5px; color:var(--win-body-fg); margin-bottom:6px; }
.triad-content p { font-size:12.5px; color:var(--win-body-fg); line-height:1.55; }

/* --- SKILLS / PROJECTS / ACADEMIC / CONNECT shared grids ------------------ */
.skills-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.skill-card { display:flex; flex-direction:column; }
.skill-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.skill-title { font-size:15.5px; color:var(--win-body-fg); font-weight:700; letter-spacing:.5px; }
.skill-desc { font-size:13px; color:var(--win-body-fg); margin-bottom:18px; line-height:1.5; }
.skill-pill-list { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.skill-pill {
  background-color:var(--win-body); color:var(--win-body-fg);
  border:1px solid var(--bevel-shadow);
  font-size:12px; padding:5px 10px;
}

.filter-bar { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.filter-btn {
  background:var(--control-face); border:1px solid var(--bevel-shadow); color:var(--text-on-face);
  font-family:var(--font-mono); font-size:12.5px; font-weight:600;
  padding:7px 14px; cursor:pointer;
}
.filter-btn:hover { border-color:var(--bevel-shadow); color:var(--text-on-face); background:var(--grey-dd); }
.filter-btn.active { background-color:var(--grey-dd); color:var(--link); border-color:var(--bevel-shadow); box-shadow:none; }

.projects-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:22px; }
.project-card {
  background-color:var(--win-body); color:var(--win-body-fg);
  border:1px solid var(--bevel-shadow);
  padding:22px;
  display:flex; flex-direction:column; position:relative;
  min-width:0;
}
.project-card:hover { border-color:var(--amiga-orange); box-shadow:none; transform:none; }
.project-card.is-hidden { display:none !important; }
.project-card-header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; margin-bottom:12px; }
.proj-telemetry { display:flex; align-items:center; gap:8px; font-size:11px; }
.proj-id { color:var(--bevel-shadow); font-weight:700; }
.proj-status {
  padding:2px 6px; font-size:10px; font-weight:700; letter-spacing:.5px;
  background:var(--win-body); color:var(--win-body-fg); border:1px solid var(--bevel-shadow);
}
.proj-category-tags { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.mini-tag {
  font-size:10.5px; color:var(--win-body-fg);
  background-color:var(--win-body); padding:2px 6px; border:1px solid var(--bevel-shadow);
}
.proj-title { font-size:16.5px; color:var(--win-body-fg); font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.proj-desc { font-size:13.5px; color:var(--win-body-fg); line-height:1.6; margin-bottom:16px; }
.proj-capabilities {
  background-color:var(--win-body); color:var(--win-body-fg);
  border:2px solid var(--bevel-shadow);
  padding:10px 12px;
  display:flex; flex-direction:column; gap:5px;
  margin-bottom:20px; margin-top:auto;
}
.cap-item { font-size:11.5px; color:var(--win-body-fg); line-height:1.4; }
.proj-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--bevel-shadow); }
.inspect-btn {
  background:var(--control-face); border:1px solid var(--bevel-shadow); color:var(--text-on-face);
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  padding:6px 12px; cursor:pointer;
}
.inspect-btn:hover { background:var(--grey-dd); color:var(--text-on-face); box-shadow:none; }
.repo-link { font-size:12px; font-weight:600; color:var(--win-body-fg); padding:6px 8px; }
.repo-link:hover { color:var(--win-body-fg); }

/* --- ACADEMIC: the credentials timeline ----------------------------------- */
.credentials-timeline { display:flex; flex-direction:column; gap:20px; position:relative; padding-left:36px; }
.credentials-timeline::before {
  content:''; position:absolute; top:15px; bottom:15px; left:11px; width:2px;
  background:var(--accent-rule);
}
.timeline-entry { position:relative; }
.timeline-marker { position:absolute; left:-36px; top:18px; display:flex; align-items:center; gap:6px; }
.marker-dot {
  width:10px; height:10px; border-radius:0;
  background-color:var(--amiga-orange); box-shadow:none;
  border:2px solid var(--amiga-black);
}
.marker-code { font-size:9.5px; font-weight:800; color:var(--win-body-fg); display:none; }
.timeline-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; }
.cred-badge { font-size:10.5px; font-weight:700; padding:2px 7px; letter-spacing:.5px; background:var(--win-body); color:var(--win-body-fg); border:1px solid var(--bevel-shadow); }
.cred-institution { font-size:12px; color:var(--bevel-shadow); font-weight:600; overflow-wrap:anywhere; }
.cred-title { font-size:16px; color:var(--win-body-fg); font-weight:700; margin-bottom:8px; }
.cred-detail { font-size:13.5px; color:var(--win-body-fg); line-height:1.6; }

/* Credential cards keep the legacy 20/24 rhythm rather than the shared
   `.hud-card { padding:24px }`: the timeline spine's marker column is sized to
   this inset at both breakpoints. */
.timeline-card { padding:20px 24px; }

/* --- CONNECT: coordinates and telemetry ----------------------------------- */
.contact-panel { padding:32px; }
.contact-headline { font-size:22px; color:var(--win-body-fg); font-weight:700; margin-bottom:10px; }
.contact-sub { font-size:14.5px; color:var(--win-body-fg); margin-bottom:28px; max-width:720px; }
.channels-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-bottom:28px; }
.channel-card {
  background-color:var(--win-body); color:var(--win-body-fg);
  border:1px solid var(--bevel-shadow);
  padding:18px 20px;
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  min-width:0;
}
.channel-card:hover { border-color:var(--amiga-orange); background-color:var(--win-body); box-shadow:none; transform:none; }
.channel-icon { color:var(--win-body-fg); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.channel-info { display:flex; flex-direction:column; flex:1; min-width:0; overflow-wrap:anywhere; }
.channel-label { font-size:11px; color:var(--bevel-shadow); font-weight:600; overflow-wrap:anywhere; }
.channel-value { font-size:14px; color:var(--win-body-fg); font-weight:700; overflow-wrap:anywhere; }
.channel-arrow { font-size:14px; color:var(--win-body-fg); font-weight:700; }
.channel-card:hover .channel-arrow { color:var(--win-body-fg); transform:none; }
.transmission-status { padding-top:18px; border-top:1px solid var(--bevel-shadow); display:flex; flex-direction:column; gap:6px; }
.status-line { display:flex; font-size:12px; gap:10px; }
.status-key { color:var(--bevel-shadow); font-weight:600; }
.status-val { color:var(--win-body-fg); }

/* --- Inspection modal (`<dialog>`) shared metrics ------------------------- */
.terminal-modal { margin:auto; padding:0; background:transparent; border:none; max-width:720px; width:90%; color:var(--win-body-fg); }
.terminal-modal::backdrop { background-color:var(--amiga-black); backdrop-filter:none; -webkit-backdrop-filter:none; }
.modal-card { background-color:var(--win-body); border:1px solid var(--amiga-black); box-shadow:none; overflow:hidden; }
.modal-close-btn { background:var(--control-face); border:none; color:var(--text-on-face); font-family:var(--font-mono); font-size:13px; font-weight:700; cursor:pointer; padding:2px 6px; }
.modal-close-btn:hover { color:var(--text-on-face); }
.modal-card-body { padding:24px; display:flex; flex-direction:column; gap:16px; max-height:80vh; overflow-y:auto; }
.modal-meta-row { display:flex; gap:8px; }
.modal-title { font-size:20px; color:var(--win-body-fg); font-weight:700; }
.modal-desc { font-size:14px; color:var(--win-body-fg); line-height:1.6; }
.modal-tech-block { background-color:var(--win-body); border:2px solid var(--bevel-shadow); padding:14px; display:flex; flex-direction:column; gap:10px; }
.modal-subheading { font-size:12px; color:var(--win-body-fg); letter-spacing:.8px; font-weight:700; }
.modal-details-content { font-size:13px; color:var(--win-body-fg); line-height:1.65; white-space:pre-wrap; }
.modal-stack-tags { display:flex; flex-wrap:wrap; gap:6px; }
/* `flex-wrap:wrap` is required under the pixel font: the two action buttons
   total wider than the 301px column at 390px, and without wrapping the row
   overflows `.modal-card`'s `overflow:hidden` edge and clips the ghost button. */
.modal-actions { display:flex; flex-wrap:wrap; gap:12px; padding-top:10px; }

/* --- Terminal system footer ----------------------------------------------- */
.hud-footer {
  position:relative; z-index:5;
  border-top:2px solid var(--amiga-black);
  background-color:var(--control-face); color:var(--text-on-face);
  padding:20px 0; font-size:12px;
}
.footer-container { max-width:var(--max-width); margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-left { display:flex; align-items:center; gap:8px; }
.prompt-symbol { color:var(--text-on-face); font-weight:700; }
.footer-sep { color:var(--bevel-shadow); }
.footer-spec { color:var(--text-on-face); font-size:11px; }
.footer-copy { color:var(--text-on-face); }
.footer-right { color:var(--text-on-face); }

/* --- Responsive breakpoints ------------------------------------------------ */
/* Every track override uses `minmax(0,1fr)` rather than bare `1fr`: the `auto`
   minimum of `1fr` is the item's min-content width, which with Unscii's wide
   1:1 advance can exceed the viewport. `minmax(0,1fr)` lets the track shrink
   and the text wrap instead of forcing a document scrollbar. */
@media (max-width:900px) {
  .hero-identity-grid { grid-template-columns:minmax(0,1fr); }
  .hero-avatar-pane { order:-1; margin-bottom:10px; }
  .hud-reticle { width:180px; }
  .about-grid { grid-template-columns:minmax(0,1fr); }
  .skills-grid { grid-template-columns:minmax(0,1fr); }
  .channels-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:767px) {
  .main-layout { padding-bottom:68px; }
  .hero-pillars { grid-template-columns:minmax(0,1fr); }
  .footer-container { flex-direction:column; align-items:flex-start; }
  .credentials-timeline { padding-left:24px; }
  .timeline-marker { left:-24px; }
}

/* ==========================================================================
   Workbench chrome (transitional shell, Phase 2)
   ========================================================================== */

/* Screen title bar: the top edge of the Workbench screen, and the page's only
   banner landmark (the legacy HUD header was removed in Task 13, which is what
   frees `top:0` for this bar). It stays in normal flow for now. */
.screen-bar {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--px));
  min-height: calc(7 * var(--px));
  padding: 0 calc(2 * var(--px));
  background: var(--menu-bg);
  color: var(--menu-fg);
}

/* Square depth gadget. Sized by the grid; the `.bevel` class draws the frame. */
.screen-gadget {
  display: inline-block;
  flex: none;
  width: calc(6 * var(--px));
  height: calc(5 * var(--px));
  background: var(--control-face);
}

.screen-title {
  font-size: calc(6 * var(--px));
  line-height: calc(8 * var(--px));
  letter-spacing: calc(1 * var(--px));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screen-pad { flex: 1; }

/* Menu bar: white ground, black text, orange highlight block. The bar currently
   carries no menu items (the dead Workbench disclosure button was removed per
   spec §12); the `.menu-item` rules below are kept so the real menu, when it
   lands, inherits the intended treatment. */
.menu-bar {
  display: flex;
  align-items: stretch;
  background: var(--menu-bg);
  color: var(--menu-fg);
  border-bottom: 1px solid var(--amiga-black);
}

.menu-item {
  font-family: inherit;
  font-size: calc(6 * var(--px));
  line-height: calc(8 * var(--px));
  min-width: calc(12 * var(--px));
  min-height: calc(12 * var(--px));
  padding: calc(2 * var(--px)) calc(3 * var(--px));
  background: transparent;
  color: var(--menu-fg);
  border: 0;
  text-align: left;
  cursor: pointer;
}

.menu-item:hover,
.menu-item[aria-expanded="true"] {
  background: var(--menu-highlight-bg);
  color: var(--menu-highlight-fg);
}

/* Window: hard black outer line, raised grey frame with a two-tone bevel, an
   orange dithered title bar and an inset white body. `outline` (not a shadow)
   draws the outer line without affecting layout. */
.window {
  display: flex;
  flex-direction: column;
  background: var(--win-frame);
  outline: 1px solid var(--amiga-black);
  padding: calc(2 * var(--px));
  min-height: calc(40 * var(--px));
}

/* Inset white content surface (same two-tone geometry as `.bevel-inset`).
   The 60px gap mirrors the legacy `.main-layout` rhythm so the sections keep
   their current spacing until Phase 3 converts them into separate windows. */
.window-body {
  display: flex;
  flex-direction: column;
  gap: 60px;
  min-height: calc(24 * var(--px));
  padding: calc(3 * var(--px));
  background: var(--win-body);
  color: var(--win-body-fg);
  border-top: 2px solid var(--win-frame-shadow);
  border-left: 2px solid var(--win-frame-shadow);
  border-bottom: 2px solid var(--bevel-lit);
  border-right: 2px solid var(--bevel-lit);
}

/* Application window. Exactly one `.app` is un-hidden at a time (Task 7);
   `hidden` is the whole visibility model, not a class. `display` is set here
   so the routed window lays out, which means the UA `[hidden] { display:none }`
   rule is outbid by this author rule — hence the explicit `!important` guard
   below. Without it every window would paint stacked. */
.app {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--px));
  margin: 0;
}

/* The window heading is the title bar of the application and the focus target
   on every switch (`tabindex="-1"`), so it carries the same 7-cell metrics as
   the title bar. It is intentionally not `aria-hidden`: it names its `<section
   aria-labelledby>` and must stay in the tree to receive focus. The orange
   dithered ground comes from `.dither-title` (added in the markup) rather than
   a second copy of the gradient. */
.window-heading {
  margin: 0;
  padding: 0 calc(2 * var(--px));
  min-height: calc(6 * var(--px));
  font-size: calc(7 * var(--px));
  line-height: calc(8 * var(--px));
  font-weight: 700;
  letter-spacing: calc(1 * var(--px));
  color: var(--win-title-fg);
}

/* Visually hidden but screen-reader available (clip-rect pattern). Used by the
   `#app-status` polite live region that announces each window switch. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The `hidden` attribute must always win, including over the `.app`/`.window-body`
   flex rules above. Scoped to the shell so it cannot fight a component that sets
   a display on an element it then reveals another way. */
[hidden] { display: none !important; }

/* Dock container: raised grey control strip along the bottom. Its seven
   launcher anchors are static markup; the list is never empty in the page. */
.dock {
  background: var(--control-face);
  color: var(--text-on-face);
  border-top: 2px solid var(--bevel-lit);
  border-bottom: 2px solid var(--bevel-shadow);
  padding: calc(2 * var(--px));
}

.dock-list {
  display: flex;
  align-items: center;
  /* Wrapping is the narrow-viewport guarantee: seven labelled launchers cannot
     fit one 390px row, and a wrap keeps every item on-screen with no horizontal
     overflow. The document's scrollWidth therefore stays equal to the viewport. */
  flex-wrap: wrap;
  gap: calc(1 * var(--px)) calc(2 * var(--px));
  min-height: calc(12 * var(--px));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Dock item: a real link (<a href="#/app">), not a button. Square gadget with
   the standard raised bevel; the focus ring comes from the shared
   :focus-visible rule above. 12 cells (24px at the desktop 2px scale, 36px on
   touch) is the accessibility floor: the WCAG 2.2 2.5.8 target minimum is
   24x24 CSS px and an 8px control at 2x would be 16px, which fails. */
.dock-item {
  display: flex;
  align-items: center;
  gap: calc(1 * var(--px));
  min-height: calc(12 * var(--px));
  padding: calc(1 * var(--px)) calc(2 * var(--px));
  background: var(--control-face);
  color: var(--text-on-face);
  border-top: 2px solid var(--bevel-lit);
  border-left: 2px solid var(--bevel-lit);
  border-bottom: 2px solid var(--bevel-shadow);
  border-right: 2px solid var(--bevel-shadow);
  font-family: inherit;
  font-size: calc(4 * var(--px));
  line-height: calc(6 * var(--px));
  letter-spacing: calc(1 * var(--px));
  text-decoration: none;
  white-space: nowrap;
}

.dock-item:hover { background: var(--grey-dd); }

/* The active app reads as a pressed gadget, and stays legible because the text
   token flips to the Workbench blue rather than relying on the bevel alone. */
.dock-item[aria-current="page"] {
  background: var(--grey-dd);
  color: var(--link);
  border-top-color: var(--bevel-shadow);
  border-left-color: var(--bevel-shadow);
  border-bottom-color: var(--bevel-lit);
  border-right-color: var(--bevel-lit);
}

/* Icon slot. The per-app SVG icon set is not painted yet (recorded as a
   follow-up): this reserves the space so a later art drop does not reflow the
   dock rows. */
.dock-icon {
  display: inline-block;
  flex: none;
  width: calc(6 * var(--px));
  height: calc(5 * var(--px));
  background: var(--grey-dd);
  border-top: 2px solid var(--bevel-shadow);
  border-left: 2px solid var(--bevel-shadow);
  border-bottom: 2px solid var(--bevel-lit);
  border-right: 2px solid var(--bevel-lit);
}

/* Touch layout: the dock becomes the fixed 48px bottom bar (ruling R15). The
   legacy SYS-CTRL side panel used to do this reflow; with it gone the dock is
   the one fixed edge and a mobile visitor no longer has to scroll a ~7900px
   document to reach the primary navigation. `overflow-x:auto` keeps the seven
   launchers on one row inside the bar: the overflowing width is scrollable
   within the dock, so it never contributes to the document's scrollWidth. */
@media (max-width: 767px) {
  .dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    height: 48px;
    padding: 0;
  }

  .dock-list {
    flex-wrap: nowrap;
    height: 100%;
    overflow-x: auto;
    gap: 0;
  }

  .dock-item {
    flex: 0 0 auto;
    height: 100%;
    border-top: 0;
    border-bottom: 0;
  }
}

/* ==========================================================================
   SKILLS application (Task 8) - Amiga flat surface

   Scoped to `[data-app="skills"]` so the legacy `.hud-card` chrome is only
   overridden where this task was asked to restyle. The four bevel borders and
   the white ground come from the shared primitives and tokens; the rules below
   only cancel the legacy glass: `border-radius`, `backdrop-filter` blur, the
   glow box-shadows, the hover `translateY` lift and the legacy text colours.

   The legacy `.hud-card:hover` and `.skill-pill:hover` flatten `border-color`
   to a single value at (0,2,0), which would erase the two-tone bevel drawn by
   `.bevel` / `.bevel-inset` on hover. The hover rules below re-assert the four
   bevel colours at (0,3,0) so the gadget stays raised while the pointer is on
   it. Colours are `var()` tokens only, so no new hex enters the stylesheet.
   ========================================================================== */

[data-app="skills"] .skill-card,
[data-app="skills"] .skill-card:hover {
  background: var(--win-body);
  color: var(--win-body-fg);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
}

/* A white card on the white `.window-body` has no top/left bevel contrast (both
   `.bevel` lit edges are white), so the hard black outer line mirrors the
   `.window` construction and keeps the card readable as a gadget. */
[data-app="skills"] .skill-card {
  outline: 1px solid var(--amiga-black);
}

[data-app="skills"] .skill-card:hover {
  border-top-color: var(--bevel-lit);
  border-left-color: var(--bevel-lit);
  border-bottom-color: var(--bevel-shadow);
  border-right-color: var(--bevel-shadow);
}

/* Orange is a rule/accent here, never body text: a 2px underline separates the
   domain title from its description. The label and both text nodes stay black. */
[data-app="skills"] .skill-header {
  border-bottom: 2px solid var(--amiga-orange);
  padding-bottom: calc(2 * var(--px));
}

[data-app="skills"] .card-hud-label,
[data-app="skills"] .skill-title,
[data-app="skills"] .skill-desc,
[data-app="skills"] .skill-pill {
  color: var(--win-body-fg);
}

/* Section header, flat: the legacy `.section-title` is the dark-theme
   `--text-white` (1.03:1 on the white body, effectively invisible) and
   `.tag-index` is `--green-core` (1.36:1 on white); `.section-line` is a
   green/transparent gradient. Same treatment as the ACADEMIC and CONNECT
   blocks: black text and a flat 2px orange rule, no gradient. */
[data-app="skills"] .tag-index,
[data-app="skills"] .section-title {
  color: var(--win-body-fg);
}

[data-app="skills"] .section-line {
  height: 2px;
  background: var(--amiga-orange);
}

[data-app="skills"] .skill-pill,
[data-app="skills"] .skill-pill:hover {
  background: var(--win-body);
  color: var(--win-body-fg);
  border-radius: 0;
  box-shadow: none;
}

[data-app="skills"] .skill-pill:hover {
  border-top-color: var(--bevel-shadow);
  border-left-color: var(--bevel-shadow);
  border-bottom-color: var(--bevel-lit);
  border-right-color: var(--bevel-lit);
}

/* ==========================================================================
   ACADEMIC application (Task 9) - Amiga flat surface

   Scoped to `[data-app="academic"]`. Same job as the SKILLS block above: the
   The base `.hud-card` / `.timeline-card` chrome lives above, so these rules
   only re-assert the flat treatment and cancel any glass (`border-radius`, `backdrop-filter` blur, glow
   box-shadows), the hover `translateY` lift and the legacy text colours, and
   re-assert the two-tone bevel at (0,2,0)/(0,3,0) so the legacy
   `.hud-card:hover` (0,2,0) cannot flatten it.

   The white card on the white `.window-body` has no top/left bevel contrast
   (both lit edges are white), so the hard black outline mirrors `.window` and
   the SKILLS `.skill-card` construction.

   The timeline spine and both section-header rules are rebuilt flat: the
   legacy versions are `linear-gradient()`s with a green/transparent fade, which
   the brief excludes. Orange appears only as those rules and the marker dot,
   never as body text. Colours are `var()` tokens only, so no new hex enters
   the stylesheet and the file stays RGB444-clean.
   ========================================================================== */

[data-app="academic"] .timeline-card,
[data-app="academic"] .timeline-card:hover {
  background: var(--win-body);
  color: var(--win-body-fg);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
}

[data-app="academic"] .timeline-card {
  outline: 1px solid var(--amiga-black);
}

[data-app="academic"] .timeline-card:hover {
  border-top-color: var(--bevel-lit);
  border-left-color: var(--bevel-lit);
  border-bottom-color: var(--bevel-shadow);
  border-right-color: var(--bevel-shadow);
}

/* Spine: a flat 2px orange rule in place of the legacy green gradient. Geometry
   (`top`/`bottom`/`left`) comes from the BASE SURFACE block. */
[data-app="academic"] .credentials-timeline::before {
  background: var(--amiga-orange);
}

[data-app="academic"] .cred-badge,
[data-app="academic"] .cred-title,
[data-app="academic"] .cred-detail,
[data-app="academic"] .cred-institution {
  color: var(--win-body-fg);
}

/* Badges are inset gadgets: white ground, black text, and the `bevel-inset`
   borders from the markup. Only the legacy rounded corner and translucent
   tints are cancelled here -- the rule deliberately sets no `border`, which
   would overwrite the two-tone bevel drawn by `.bevel-inset`. */
[data-app="academic"] .cred-badge {
  background: var(--win-body);
  border-radius: 0;
}

/* Marker: a square orange dot, no glow. The legacy dot carried a green
   box-shadow and a 50% radius. */
[data-app="academic"] .marker-dot {
  border-radius: 0;
  background: var(--amiga-orange);
  box-shadow: none;
  border: 2px solid var(--amiga-black);
}

/* Section header, flat: the legacy title is the dark-theme `--text-white`
   (invisible on the white body) and `.section-line` is a fading gradient. */
[data-app="academic"] .tag-index,
[data-app="academic"] .section-title {
  color: var(--win-body-fg);
}

[data-app="academic"] .section-line {
  height: 2px;
  background: var(--amiga-orange);
}

/* ==========================================================================
   CONNECT application (Task 10) - Amiga flat surface

   Scoped to `[data-app="connect"]`. Same job as the SKILLS/ACADEMIC blocks
   above: the `.hud-card` / `.channel-card` chrome is defined in the BASE
   SURFACE block, and these rules re-assert the flat treatment over it (`border-radius`, `backdrop-filter` blur, glow
   box-shadows), the hover `translateY` lift and the legacy text colours, and
   re-assert the two-tone bevel at (0,3,0) so `.hud-card:hover` (0,2,0) cannot
   flatten it.

   CONNECT publishes no email by design: LinkedIn and GitHub are the only
   channels. Orange appears only as flat rules (the header rule and the section
   line), never as body text. Colours are `var()` tokens only, so no new hex
   enters the stylesheet and the file stays RGB444-clean.
   ========================================================================== */

[data-app="connect"] .contact-panel,
[data-app="connect"] .contact-panel:hover,
[data-app="connect"] .channel-card,
[data-app="connect"] .channel-card:hover {
  background: var(--win-body);
  color: var(--win-body-fg);
  /* The panel/card can be an `<a>`, so the legacy `a:hover` (0,1,1) glow is a
     real candidate for the text nodes inside it. This block already out-sets it
     at (0,2,0), but `text-shadow: none` is repeated on the text/arrow nodes
     below as belt-and-braces, since a later selector could reintroduce the
     green glow banned by §4.3. */
  text-shadow: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
}

/* A white card on the white `.window-body` has no top/left bevel contrast (both
   lit edges are white), so a hard black outline mirrors `.window` and the SKILLS
   `.skill-card` construction. The transmission strip is an inset gadget instead
   (`bevel-inset`), so it needs no outline. */
[data-app="connect"] .contact-panel,
[data-app="connect"] .channel-card {
  outline: 1px solid var(--amiga-black);
}

[data-app="connect"] .contact-panel:hover,
[data-app="connect"] .channel-card:hover {
  border-top-color: var(--bevel-lit);
  border-left-color: var(--bevel-lit);
  border-bottom-color: var(--bevel-shadow);
  border-right-color: var(--bevel-shadow);
}

/* Black text on white for every label, value and status line; the SVG glyphs use
   `fill="currentColor"`, so they turn black with `.channel-icon` (never a colour
   emoji). The arrow's legacy green slide is flattened too. `text-shadow` is
   pinned to `none` here because `a` / `a:hover` (0,1,1) can out-set this
   (0,1,0) text group (this block's own selectors are (0,2,0), but the text
   nodes are matched separately) and would otherwise re-apply the green glow. */
[data-app="connect"] .card-hud-label,
[data-app="connect"] .contact-headline,
[data-app="connect"] .contact-sub,
[data-app="connect"] .channel-label,
[data-app="connect"] .channel-value,
[data-app="connect"] .channel-icon,
[data-app="connect"] .status-key,
[data-app="connect"] .status-val,
[data-app="connect"] .tag-index,
[data-app="connect"] .section-title {
  color: var(--win-body-fg);
  text-shadow: none;
}

[data-app="connect"] .channel-arrow,
[data-app="connect"] .channel-card:hover .channel-arrow {
  color: var(--win-body-fg);
  text-shadow: none;
  transform: none;
}

/* `.text-dim` carries `!important` in the BASE SURFACE block, so the policy
   value needs the flag too to leave the muted grey for black. */
[data-app="connect"] .transmission-status .text-dim {
  color: var(--win-body-fg) !important;
}

/* Orange as a rule, never text: a flat 2px rule under the header and a flat
   `.section-line`, replacing the legacy translucent/gradient rules. */
[data-app="connect"] .contact-header {
  border-bottom: 2px solid var(--amiga-orange);
  padding-bottom: calc(2 * var(--px));
}

[data-app="connect"] .section-line {
  height: 2px;
  background: var(--amiga-orange);
}

/* ==========================================================================
   PROJECTS application and inspection modal (Task 11) - Amiga flat surface

   Two scopes, because the `<dialog>` is a sibling of the workbench window and
   not a descendant of the PROJECTS section:
     - `[data-app="projects"]` covers the grid, the filter tabs and the cards.
     - `#project-modal` covers the dialog, which lives at body level.

   Same job as the SKILLS/ACADEMIC/CONNECT blocks above: the `.project-card` /
   `.modal-card` chrome lives in the BASE SURFACE block, so these rules cancel
   the glass (`border-radius`, `backdrop-filter` blur, glow box-shadows), the hover
   `translateY` lift and the legacy text colours, then re-assert the two-tone
   bevel at a specificity above the legacy hover rules so the gadget stays
   raised while the pointer is on it.

   A white card on the white `.window-body` has no top/left bevel contrast (both
   lit edges are white), so the hard black outline mirrors `.window` and the
   SKILLS `.skill-card` construction. Orange appears only as flat rules (a 2px
   underline under the section header and the title bar dither inherited from
   `.dither-title`), never as body text. Colours are `var()` tokens only, so no
   new hex enters the stylesheet and the file stays RGB444-clean.
   ========================================================================== */

[data-app="projects"] .project-card,
[data-app="projects"] .project-card:hover {
  background: var(--win-body);
  color: var(--win-body-fg);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
}

[data-app="projects"] .project-card {
  outline: 1px solid var(--amiga-black);
}

[data-app="projects"] .project-card:hover {
  border-top-color: var(--bevel-lit);
  border-left-color: var(--bevel-lit);
  border-bottom-color: var(--bevel-shadow);
  border-right-color: var(--bevel-shadow);
}

/* Black text on white for every label, title, description and capability line.
   `.proj-title` ships `--text-white` (1.03:1 on the white body, effectively
   invisible) and `.proj-desc` / `.cap-item` ship the dark-theme muted greys. */
[data-app="projects"] .proj-id,
[data-app="projects"] .proj-title,
[data-app="projects"] .proj-desc,
[data-app="projects"] .cap-item,
[data-app="projects"] .tag-index,
[data-app="projects"] .section-title {
  color: var(--win-body-fg);
}

/* Status and category badges are inset gadgets: white ground, black text. The
   legacy `.proj-status` colours are traffic-light tints and `.mini-tag` is a
   translucent grey; both carry a rounded corner this cancels. No `border` is
   set, so the two-tone `bevel-inset` from the markup survives. */
[data-app="projects"] .proj-status,
[data-app="projects"] .mini-tag {
  background: var(--win-body);
  color: var(--win-body-fg);
  border-radius: 0;
}

/* Capability list is a recessed panel; only the rounded corner and the legacy
   translucent tint are cancelled, the `bevel-inset` edges stay. */
[data-app="projects"] .proj-capabilities {
  background: var(--win-body);
  border-radius: 0;
}

/* The rule above the inspect row is the last legacy colour inside the surface:
   `.proj-actions` draws `border-top` from `--border-subtle`, which is the
   dark-theme green tint (or the light-theme orange one). Both are non-palette,
   so the divider takes the same grey as every other bevel shadow. The
   `display` / `align-items` / `justify-content` / `gap` / `padding-top` metrics
   in the BASE SURFACE block are left alone: only the border colour changes, and
   the 1px width is kept so the row does not reflow. */
[data-app="projects"] .proj-actions {
  border-top: 1px solid var(--bevel-shadow);
}

/* Filter tabs and inspect buttons are raised grey controls, matching the dock
   gadget. The legacy green text, green fill and glow are replaced; `.active`
   reads as a pressed gadget exactly like `.dock-item[aria-current="page"]`. */
[data-app="projects"] .filter-btn,
[data-app="projects"] .inspect-btn,
[data-app="projects"] .filter-btn:hover,
[data-app="projects"] .inspect-btn:hover {
  background: var(--control-face);
  color: var(--text-on-face);
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

[data-app="projects"] .filter-btn:hover,
[data-app="projects"] .inspect-btn:hover {
  background: var(--grey-dd);
  border-top-color: var(--bevel-lit);
  border-left-color: var(--bevel-lit);
  border-bottom-color: var(--bevel-shadow);
  border-right-color: var(--bevel-shadow);
}

[data-app="projects"] .filter-btn.active,
[data-app="projects"] .filter-btn.active:hover {
  background: var(--grey-dd);
  color: var(--link);
  border-top-color: var(--bevel-shadow);
  border-left-color: var(--bevel-shadow);
  border-bottom-color: var(--bevel-lit);
  border-right-color: var(--bevel-lit);
}

/* The repo link is an `<a>`, so the legacy `a` green and the `a:hover` green
   glow still land on it at (0,1,1); these (0,3,0) rules out-set both. */
[data-app="projects"] .repo-link,
[data-app="projects"] .repo-link:hover {
  color: var(--win-body-fg);
  text-shadow: none;
}

/* Orange as a flat 2px rule under the section header, never as text. */
[data-app="projects"] .section-line {
  height: 2px;
  background: var(--amiga-orange);
}

/* --- Inspection modal (`<dialog>`) ---------------------------------------- */

/* `.terminal-modal` (BASE SURFACE) sets `color` on the dialog itself. Every current child re-declares a palette colour, so nothing renders
   wrong today, but any future descendant added without its own `color` would
   inherit the legacy theme text instead of the Amiga token. Overriding it here
   costs one declaration and makes the dialog's own computed colour correct;
   `margin` / `padding` / `max-width` / `width` from the BASE SURFACE block are
   untouched. */
#project-modal {
  color: var(--win-body-fg);
}

/* A flat black backdrop with no blur. `backdrop-filter` is what the legacy
   `::backdrop` used for its frosted effect; a classic requester sits on an
   opaque ground instead. */
#project-modal::backdrop {
  background: var(--amiga-black);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#project-modal .modal-card {
  background: var(--win-body);
  color: var(--win-body-fg);
  border-radius: 0;
  box-shadow: none;
  outline: 1px solid var(--amiga-black);
}

/* Title bar: the orange dithered ground from the shared `.dither-title`, black
   text, with the trailing window gadget square. */
#project-modal .terminal-card-header {
  background: var(--amiga-orange);
  color: var(--win-title-fg);
  border-bottom: 2px solid var(--amiga-black);
}

/* The legacy header carries three coloured traffic-light dots. The Amiga
   convention is a square beveled gadget, so each becomes a small raised cell
   with no colour of its own. */
#project-modal .terminal-dots .dot {
  width: calc(3 * var(--px));
  height: calc(3 * var(--px));
  border-radius: 0;
  opacity: 1;
  background: var(--control-face);
  border-top: 2px solid var(--bevel-lit);
  border-left: 2px solid var(--bevel-lit);
  border-bottom: 2px solid var(--bevel-shadow);
  border-right: 2px solid var(--bevel-shadow);
}

#project-modal .terminal-title,
#project-modal .modal-title,
#project-modal .modal-desc,
#project-modal .modal-details-content {
  color: var(--win-body-fg);
}

/* Close gadget: a raised grey cell, black text, no legacy red hover. */
#project-modal .modal-close-btn,
#project-modal .modal-close-btn:hover {
  background: var(--control-face);
  color: var(--text-on-face);
  border-radius: 0;
  box-shadow: none;
}

#project-modal .modal-close-btn:hover {
  border-top-color: var(--bevel-lit);
  border-left-color: var(--bevel-lit);
  border-bottom-color: var(--bevel-shadow);
  border-right-color: var(--bevel-shadow);
}

/* Metadata badges and the two tech blocks are inset panels: white ground, black
   text, square corners. The four bevel colours are re-asserted rather than
   cleared, because the legacy `.tag-security` / `.tag-geo` / `.modal-tech-block`
   rules tint `border-color` at (0,1,0) and would otherwise paint over the
   `bevel-inset` edges the markup draws. */
#project-modal .tag-badge,
#project-modal .modal-tech-block {
  background: var(--win-body);
  color: var(--win-body-fg);
  border-radius: 0;
  border-top-color: var(--bevel-shadow);
  border-left-color: var(--bevel-shadow);
  border-bottom-color: var(--bevel-lit);
  border-right-color: var(--bevel-lit);
}

/* Subheadings were the dark-theme green; orange is a rule here, not text, so
   the label is black and the separating rule under it is orange. */
#project-modal .modal-subheading {
  color: var(--win-body-fg);
  border-bottom: 2px solid var(--amiga-orange);
  padding-bottom: calc(1 * var(--px));
}

/* Stack pills are inset gadgets. The legacy `.skill-pill` (and its light-theme
   override at (0,2,0)) declares a 1px `border` shorthand that out-sets the
   2px `.bevel-inset` (0,1,0) edges from the markup, so the four bevel colours
   and the 2px width are re-asserted at (1,1,0) here. */
#project-modal .skill-pill,
#project-modal .skill-pill:hover {
  background: var(--win-body);
  color: var(--win-body-fg);
  border-radius: 0;
  box-shadow: none;
  border-top: 2px solid var(--bevel-shadow);
  border-left: 2px solid var(--bevel-shadow);
  border-bottom: 2px solid var(--bevel-lit);
  border-right: 2px solid var(--bevel-lit);
}

/* Action buttons: the primary is a raised grey gadget rather than the legacy
   green fill, and the ghost loses its border-only treatment. Both keep the
   `.action-btn` metrics from the BASE SURFACE block so the labels do not
   reflow. */
#project-modal .action-btn {
  border-radius: 0;
}

#project-modal .action-primary,
#project-modal .action-primary:hover,
#project-modal .action-ghost,
#project-modal .action-ghost:hover {
  background: var(--control-face);
  color: var(--text-on-face);
  box-shadow: none;
  transform: none;
  text-shadow: none;
}

#project-modal .action-primary:hover,
#project-modal .action-ghost:hover {
  background: var(--grey-dd);
  border-top-color: var(--bevel-lit);
  border-left-color: var(--bevel-lit);
  border-bottom-color: var(--bevel-shadow);
  border-right-color: var(--bevel-shadow);
}

/* ==========================================================================
   SHELL application (Task 12) - Amiga flat surface

   Scoped to `[data-app="shell"]`. Same job as the SKILLS/ACADEMIC/CONNECT/
   PROJECTS blocks above: the `.terminal-card` / `.term-*` chrome still arrives
   from the BASE SURFACE block, so these rules cancel the glass (`border-radius`,
   `backdrop-filter` blur, glow box-shadows, hover transforms and the legacy
   `text-shadow` glow) and repaint every text node black on the white window
   body. The output log (`.terminal-output`) is a recessed `bevel-inset` panel;
   the input row, the quick-command chips and the submit gadget are raised
   `.bevel` controls.

   Orange is a rule/accent only (the flat `.section-line`), never body text.
   Colours are `var()` tokens only, so no new hex enters the stylesheet and the
   file stays RGB444-clean.
   ========================================================================== */

/* The card is a raised white gadget. On the white `.window-body` both lit bevel
   edges are white, so a hard black outline mirrors `.window` and the SKILLS
   `.skill-card` construction. The legacy `::before` is a translucent gradient
   hairline; it is removed rather than recoloured. */
[data-app="shell"] .terminal-card,
[data-app="shell"] .terminal-card:hover {
  background: var(--win-body);
  color: var(--win-body-fg);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
}

[data-app="shell"] .terminal-card {
  outline: 1px solid var(--amiga-black);
}

[data-app="shell"] .terminal-card::before { display: none; }

/* Header: a flat grey control strip with black text, reading as a toolbar inside
   the white window. The legacy bar is the translucent `--bg-card` on a 1px
   tinted border. (The orange dithered title bar belongs to the window heading,
   so a second one is not duplicated here.) */
[data-app="shell"] .terminal-card-header {
  background: var(--control-face);
  color: var(--text-on-face);
  border-bottom: 2px solid var(--amiga-black);
}

[data-app="shell"] .terminal-title,
[data-app="shell"] .terminal-meta {
  color: var(--text-on-face);
}

/* The three legacy traffic-light dots are coloured circles; the Amiga
   convention (identical to `#project-modal`) is a square raised cell. */
[data-app="shell"] .terminal-dots .dot {
  width: calc(3 * var(--px));
  height: calc(3 * var(--px));
  border-radius: 0;
  opacity: 1;
  background: var(--control-face);
  border-top: 2px solid var(--bevel-lit);
  border-left: 2px solid var(--bevel-lit);
  border-bottom: 2px solid var(--bevel-shadow);
  border-right: 2px solid var(--bevel-shadow);
}

/* Every text node in the shell surface: black on white, no legacy glow.
   `.text-dim` / `.text-accent` / `.text-highlight` carry `!important` in
   the BASE SURFACE block, so the override needs the flag too; `text-shadow` clears
   `.text-accent`'s green glow and the `.term-submit-btn:hover` glow. */
[data-app="shell"] .text-dim,
[data-app="shell"] .text-accent,
[data-app="shell"] .text-highlight,
[data-app="shell"] .term-response,
[data-app="shell"] .term-cmd-echo,
[data-app="shell"] .term-prompt,
[data-app="shell"] .term-user,
[data-app="shell"] .term-input {
  color: var(--win-body-fg);
  text-shadow: none;
}

[data-app="shell"] .text-dim,
[data-app="shell"] .text-accent,
[data-app="shell"] .text-highlight {
  color: var(--win-body-fg) !important;
}

/* The `help` key hint is a flat black-on-white token bounded by a grey rule; the
   legacy chip is green on dark green with a rounded corner. */
[data-app="shell"] .code-highlight {
  color: var(--win-body-fg);
  background: var(--win-body);
  border-color: var(--bevel-shadow);
  border-radius: 0;
}

/* Output log: a recessed white panel. Only the legacy dark ground, the rounded
   corner and the green scrollbar are cancelled; the `bevel-inset` edges plus the
   `display` / `gap` / `max-height` metrics from the BASE SURFACE block survive. */
[data-app="shell"] .terminal-output {
  background: var(--win-body);
  color: var(--win-body-fg);
  border-radius: 0;
  scrollbar-color: var(--grey-55) var(--win-body);
}

/* Input row: a raised white gadget. `:focus-within` re-asserts the four bevel
   colours, because the legacy rule sets a green `border-color` shorthand at
   (0,2,0) that would otherwise flatten the `bevel` edges while typing. */
[data-app="shell"] .terminal-input-row,
[data-app="shell"] .terminal-input-row:focus-within {
  background: var(--win-body);
  border-top-color: var(--bevel-lit);
  border-left-color: var(--bevel-lit);
  border-bottom-color: var(--bevel-shadow);
  border-right-color: var(--bevel-shadow);
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
}

[data-app="shell"] .term-input::placeholder {
  color: var(--grey-55);
}

/* Quick-command chips and the submit gadget are raised grey controls, matching
   the dock. Both meet the 24x24 CSS px target (12 cells) named in the spec's
   accessibility section; the legacy glow, rounded corner and active shrink are
   cleared. */
[data-app="shell"] .cmd-chip,
[data-app="shell"] .cmd-chip:active,
[data-app="shell"] .term-submit-btn {
  background: var(--control-face);
  color: var(--text-on-face);
  border-radius: 0;
  box-shadow: none;
  transform: none;
  min-width: calc(12 * var(--px));
  min-height: calc(12 * var(--px));
}

/* The `box-shadow:none` above is in the base state, so at equal (0,2,0)
   specificity it also cancels the design-system ring that the global
   `:focus-visible` rule (line 76) sets: the attribute selector out-ranks the
   bare `:focus-visible` and wins on source order. Re-assert the ring here for
   the two focusable controls only. This rule is (0,3,0), so it out-ranks the
   base block outright, and it restores exactly `--focus-outer` (the 4px black
   band) on top of the white `--focus-inner` outline. Every other scoped
   `[data-app=...]` block confines `box-shadow:none` to `:hover`; the input
   row's own `box-shadow:none` is on the form, not on `#cli-input`, so the
   text field already keeps the ring. */
[data-app="shell"] .cmd-chip:focus-visible,
[data-app="shell"] .term-submit-btn:focus-visible {
  box-shadow: var(--focus-outer);
}

[data-app="shell"] .cmd-chip:hover,
[data-app="shell"] .term-submit-btn:hover {
  background: var(--grey-dd);
  color: var(--text-on-face);
  text-shadow: none;
  border-top-color: var(--bevel-lit);
  border-left-color: var(--bevel-lit);
  border-bottom-color: var(--bevel-shadow);
  border-right-color: var(--bevel-shadow);
}

/* ==========================================================================
   Dual-tone focus ring re-assertion for the five scopes that clobbered it

   `box-shadow: none` in a base state at (0,1,0)+ out-ranks the global
   `:focus-visible` rule (0,1,0, declared at line 104) on source order, so those
   controls were byte-identical focused and unfocused. Same defect the SHELL
   block above fixes for `.cmd-chip` / `.term-submit-btn`. Each selector here is
   one class (or one id) above its offending rule, so the ring wins outright, and
   it restores exactly `--focus-outer` (the 4px black band) on top of the white
   `--focus-inner` outline. The scopes:

     .action-primary                      (0,1,0, base)  -> hero primary CTA
     .filter-btn.active                   (0,2,0)         -> pressed filter tab
     [data-app="projects"] .filter-btn     (0,2,0)         -> four filter tabs
     [data-app="projects"] .inspect-btn    (0,2,0)         -> four inspect buttons
     [data-app="connect"] .channel-card    (0,2,0)         -> two channel cards
     #project-modal .action-primary/-ghost (1,1,0)         -> modal repo link/dismiss

   The hero `.action-secondary` / `.action-ghost` carry no `box-shadow` in the
   base state, so they already keep the ring; they are re-asserted anyway to pin
   the pair against any later base-state change.
   ========================================================================== */
.action-primary:focus-visible,
.action-secondary:focus-visible,
.action-ghost:focus-visible,
.filter-btn.active:focus-visible,
[data-app="projects"] .filter-btn:focus-visible,
[data-app="projects"] .inspect-btn:focus-visible,
[data-app="connect"] .channel-card:focus-visible,
#project-modal .action-primary:focus-visible,
#project-modal .action-ghost:focus-visible {
  box-shadow: var(--focus-outer);
}

/* Section header, flat: the legacy `.section-title` is the dark-theme
   `--text-white` (invisible on the white body) and `.tag-index` is the green
   accent. Orange is the flat 2px rule only. */
[data-app="shell"] .tag-index,
[data-app="shell"] .section-title {
  color: var(--win-body-fg);
}

[data-app="shell"] .section-line {
  height: 2px;
  background: var(--amiga-orange);
}

/* ==========================================================================
   PREFS application (Task 13) - Amiga flat surface

   Scoped to `[data-app="prefs"]`. The panel and its rows are new markup, so
   there is no legacy glass to cancel here; the rules exist to give the surface
   the same flat classic treatment as every other application: a raised grey
   panel (`.bevel` from the markup), white rows, black labels and raised grey
   toggle gadgets. Orange appears only as the flat rule under each row label,
   never as body text. Colours are `var()` tokens only, so no new hex enters the
   stylesheet and the file stays RGB444-clean.
   ========================================================================== */

[data-app="prefs"] .prefs-panel {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
  padding: calc(2 * var(--px));
  background: var(--control-face);
  color: var(--text-on-face);
}

/* Each setting is one row: a label on the left, its gadget(s) on the right. The
   label's orange underline is a rule, not text. */
[data-app="prefs"] .prefs-row {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--px));
  padding: calc(2 * var(--px));
  background: var(--win-body);
  color: var(--win-body-fg);
}

[data-app="prefs"] .prefs-row > span {
  flex: 1;
  padding-bottom: calc(1 * var(--px));
  border-bottom: 2px solid var(--amiga-orange);
}

/* Toggle buttons are raised grey controls, matching the dock gadget. They meet
   the 24x24 CSS px target (12 cells). No `border-radius`, `box-shadow` or
   `transform` is declared, so the flat classic look holds. */
[data-app="prefs"] .prefs-row button {
  background: var(--control-face);
  color: var(--text-on-face);
  font-family: inherit;
  font-size: calc(4 * var(--px));
  line-height: calc(6 * var(--px));
  letter-spacing: calc(1 * var(--px));
  padding: calc(1 * var(--px)) calc(3 * var(--px));
  min-width: calc(12 * var(--px));
  min-height: calc(12 * var(--px));
  cursor: pointer;
}

[data-app="prefs"] .prefs-row button:hover {
  background: var(--grey-dd);
  border-top-color: var(--bevel-lit);
  border-left-color: var(--bevel-lit);
  border-bottom-color: var(--bevel-shadow);
  border-right-color: var(--bevel-shadow);
}

/* ==========================================================================
   Driver.js tour popover (vendored, load order: driver.css then this file)
   The library ships a modern rounded card on Helvetica; this restyles it onto
   the flat Workbench surface: square corners, 2px bevels, the system mono font
   and palette tokens only. The overlay fill is set inline by the library's own
   CSSOM code and is left as-is.
   ========================================================================== */

.driver-popover {
  font-family: var(--font-mono);
  color: var(--win-body-fg);
  background-color: var(--win-body);
  border-radius: 0;
  box-shadow: none;
  border-top: 2px solid var(--bevel-lit);
  border-left: 2px solid var(--bevel-lit);
  border-bottom: 2px solid var(--bevel-shadow);
  border-right: 2px solid var(--bevel-shadow);
}

.driver-popover-title {
  font-family: inherit;
  color: var(--win-title-fg);
  background: var(--win-title-bg);
  padding: calc(1 * var(--px)) calc(2 * var(--px));
}

/* The library's resting close-button colour is a very pale grey: 1.51:1 on the
   popover body and 1.58:1 on the orange title bar it sits over. That fails
   WCAG 2.2 SC 1.4.11 (3:1 for UI components), and this close button is the
   tour's primary visible skip affordance. The library's own :hover/:focus rule
   is more specific and still darkens it further. */
.driver-popover-close-btn {
  color: var(--grey-55);
}

.driver-popover-description {
  font-family: inherit;
  color: var(--win-body-fg);
}

.driver-popover-progress-text {
  font-family: inherit;
  color: var(--win-body-fg);
}

/* Buttons are raised grey gadgets, like the dock and Prefs controls. */
.driver-popover-footer-btn {
  font-family: inherit;
  color: var(--text-on-face);
  background-color: var(--control-face);
  border-radius: 0;
  border-top: 2px solid var(--bevel-lit);
  border-left: 2px solid var(--bevel-lit);
  border-bottom: 2px solid var(--bevel-shadow);
  border-right: 2px solid var(--bevel-shadow);
}

.driver-popover-footer-btn:hover,
.driver-popover-footer-btn:focus {
  background-color: var(--grey-dd);
}

/* The arrow is a 5px CSS triangle; it is hidden rather than restyled, because a
   square-cornered gadget has no rounded notch to point from. */
.driver-popover-arrow {
  display: none;
}

/* ==========================================================================
   Bevel re-assertion (last, and load-bearing)

   The `.bevel` / `.bevel-inset` primitives are declared once near the top (the
   documentation order), but the BASE SURFACE component rules further down set a
   `border` shorthand at the SAME (0,1,0) specificity. At equal specificity the
   later source order wins, so those shorthands were collapsing every gadget to
   a 1px single-colour border. In the legacy layout this could not happen: the
   primitives lived in a stylesheet that loaded last.

   Re-asserting the four longhands here restores the 2px two-tone frame for
   every element that carries the class. This is intentionally NOT done by
   converting the component rules to longhands: `.terminal-card` also serves the
   INTEL `.hero-card` and `.hud-card` also serves the dossier cards, none of
   which carry a bevel class — stripping the shorthand would leave those without
   a border at all. The class selector is what scopes the correction to the
   actual gadgets.

   Colour-only overrides in the per-app scoped blocks (`:hover` re-assertions,
   the pressed `.filter-btn.active`, the modal tag badges) sit at (0,2,0)+ and
   still out-rank this block, so the deliberate pressed and hover states are
   untouched; only the width and any un-overridden colour come from here.
   ========================================================================== */

.bevel { border-top:2px solid var(--bevel-lit); border-left:2px solid var(--bevel-lit);
         border-bottom:2px solid var(--bevel-shadow); border-right:2px solid var(--bevel-shadow); }
.bevel-inset { border-top:2px solid var(--bevel-shadow); border-left:2px solid var(--bevel-shadow);
               border-bottom:2px solid var(--bevel-lit); border-right:2px solid var(--bevel-lit); }

/* ==========================================================================
   Preference fallbacks (after the flat chrome so they out-order it)
   ========================================================================== */

/* No blur in the design, so this is a belt-and-braces guard: if a later phase
   reintroduces any translucency, a visitor who asked for less transparency gets
   an opaque grey bar instead. Touches `background` only, so it does not
   interact with the bevel re-assertion above. */
@media (prefers-reduced-transparency:reduce) {
  .dock, .screen-bar { backdrop-filter:none; background:var(--grey-aa); }
}