/* ============================================================================
   fde-terminal.css — the "terminals running" element for for-employers.html
   ----------------------------------------------------------------------------
   ADDITIVE AND INERT. Every selector is scoped under .fde-term. Linking this
   file changes nothing until the .fde-term markup is used. It edits no existing
   rule, overrides no framework rule, and declares no bare-element selector.

   Deliberately namespaced `fde-term`, NOT `term`, so it cannot collide with a
   `.term` block another process may add to the page <style>.

   TYPE: transcript body = var(--t2) 16px. Chrome (bar, button) = var(--t-label)
   14px. Nothing here renders below 14px. --t1 (13px) is NEVER referenced — the
   page itself reserves it as "non-reading ornament only".

   LAYOUT: the transcript is `white-space:pre` inside a scroller, NOT pre-wrap.
   A real terminal scrolls; it does not reflow. This also makes the line count
   fixed and known, so the height reserved before typing is exact and the page
   cannot jitter. Only `opacity` is ever animated. No layout property, ever.
   ========================================================================== */

/* ── CONTRAST · COMPUTED, NOT ASSUMED ───────────────────────────────────────
   Terminal surface = rgba(255,255,255,.55) over the page cream --bg #FAF6EC,
   which composites to #FDFBF6 (253,251,246), relative luminance L = 0.9655.
   Ratios below are (L1+.05)/(L2+.05) against that composited surface.

     transcript body   rgba(26,20,16,.86) -> #3A3430   = 11.81 : 1   AA + AAA
     dim / comments    rgba(26,20,16,.70) -> #5E5955   =  6.66 : 1   AA
     command word      #1A1410 --ink                   = 17.63 : 1   AA + AAA
     prompt + accent   #6F5729 --gold-ink              =  6.61 : 1   AA
     pass green        #2F6B2F --fde-term-green        =  6.22 : 1   AA
     fail red          #8E2419 --red                   =  8.40 : 1   AA + AAA

   "Dim" is a tone here, not a licence. The dimmest text in this component is
   6.66:1 — 48% of headroom above the 4.5:1 AA floor. The page's own --mute
   (.62 alpha) would land at 5.04:1: passing, but thin. So this component
   darkens its own dim tone to .70 rather than inherit --mute.

   Bar chrome sits on rgba(139,111,58,.05) over the surface = #F7F4ED:
     bar label   #6F5729               = 6.22 : 1   AA
     bar meta    rgba(26,20,16,.70)    = 6.48 : 1   AA

   NOIR (if this component is ever placed inside [data-theme="noir"]), surface
   = rgba(245,240,235,.05) over #0A0806 = (22,20,17):
     body  rgba(245,240,235,.92) = 13.84 : 1     dim   rgba(245,240,235,.72) = 8.78 : 1
     key   #F5F0EB               = 16.28 : 1     green #7FB77F               = 7.88 : 1
     gold  #C8A96E --gold-warm   =  8.21 : 1     red   #E8836F               = 6.94 : 1

   LOWEST RATIO ANYWHERE IN THIS FILE, EITHER THEME = 6.22 : 1. Nothing here
   is close to failing AA. Verified by computation, not by eye.
   ------------------------------------------------------------------------- */

.fde-term{
  /* self-contained tokens; each falls back so the file is portable */
  --fde-term-surface: rgba(255,255,255,.55);
  --fde-term-bar:     rgba(139,111,58,.05);
  --fde-term-body:    rgba(26,20,16,.86);
  --fde-term-dim:     rgba(26,20,16,.70);
  --fde-term-key:     var(--ink, #1A1410);
  --fde-term-accent:  var(--gold-ink, #6F5729);
  --fde-term-green:   #2F6B2F;
  --fde-term-red:     var(--red, #8E2419);
  --fde-term-rule:    var(--line, rgba(139,111,58,.22));
  --fde-term-lh:      1.6;
  --fde-term-pad:     1rem;
  --fde-term-lines:   17;   /* overwritten by JS from the real line count */

  display: block;
  border: 1px solid var(--fde-term-rule);
  border-radius: 2px;
  background: var(--fde-term-surface);
  font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  /* no shadow, no window dots, no black box — the brand feathers, never shadows */
}

/* ── BAR ─────────────────────────────────────────────────────────────────── */
.fde-term__bar{
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .55rem .85rem;
  border-bottom: 1px solid var(--fde-term-rule);
  background: var(--fde-term-bar);
  font-size: var(--t-label, 14px);          /* 14px floor — never --t1 */
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fde-term-accent);            /* 6.22:1 */
}
.fde-term__path{ font-weight: 500 }
.fde-term__rule{
  flex: none;
  width: 1.5rem;
  height: 1px;
  background: var(--gold, #8B6F3A);
  opacity: .75;
}
.fde-term__meta{
  color: var(--fde-term-dim);               /* 6.48:1 on the bar */
  letter-spacing: .08em;
  text-transform: none;
}

/* the WCAG 2.2.2 pause control. Present only when JS is animating. */
.fde-term__ctl{
  margin-left: auto;
  font: inherit;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--line-ctl, #8B6F3A);
  border-radius: 2px;
  color: var(--fde-term-accent);
  padding: .25rem .7rem;
  cursor: pointer;
  transition: background .18s cubic-bezier(.16,1,.3,1);
}
.fde-term__ctl:hover{ background: rgba(139,111,58,.09) }
.fde-term__ctl:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px var(--bg, #FAF6EC), 0 0 0 3.5px var(--gold-ink, #6F5729);
}
/* no JS -> nothing is moving -> a pause button would be a lie. Hidden until
   the script proves it is animating by setting .is-live on the root. */
.fde-term:not(.fde-term--live) .fde-term__ctl{ display: none }

/* ── SCROLLER ────────────────────────────────────────────────────────────────
   Focusable + named: a horizontally scrollable region must be keyboard
   operable. Its accessible content is the REAL transcript (below), never the
   aria-hidden painted copy — so a partially typed line is never announced.
   `contain` isolates the typing so nothing outside this box can be relaid out.
   ------------------------------------------------------------------------- */
.fde-term__scroll{
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  contain: layout paint;
  scrollbar-width: thin;
}
.fde-term__scroll:focus-visible{
  outline: none;
  box-shadow: inset 0 0 0 2px var(--gold-ink, #6F5729);
}

/* ── TRANSCRIPT ──────────────────────────────────────────────────────────── */
.fde-term__out,
.fde-term__paint{
  margin: 0;
  padding: var(--fde-term-pad) 1.1rem calc(var(--fde-term-pad) + .3rem);
  font-family: inherit;
  font-size: var(--t2, 16px);               /* 16px floor */
  line-height: var(--fde-term-lh);
  white-space: pre;                         /* terminals scroll, they do not wrap */
  color: var(--fde-term-body);              /* 11.82:1 */
  font-variant-numeric: tabular-nums lining-nums slashed-zero;
  font-variant-ligatures: none;
  /* Height is reserved from the KNOWN line count before a single character is
     typed. The box therefore never grows, and the page never jitters. */
  min-height: calc(var(--fde-term-lines) * var(--fde-term-lh) * 1em
                   + (var(--fde-term-pad) * 2) + .3rem);
}

/* deterministic colouriser output — text is escaped before these are applied */
.fde-term__paint .p { color: var(--fde-term-accent) }               /* $ prompt   */
.fde-term__paint .k { color: var(--fde-term-key); font-weight: 500 }/* command    */
.fde-term__paint .ok{ color: var(--fde-term-green); font-weight: 500 }
.fde-term__paint .no{ color: var(--fde-term-red);   font-weight: 500 }
.fde-term__paint .c { color: var(--fde-term-dim) }                  /* # comment  */
.fde-term__paint .m { color: var(--fde-term-dim) }                  /* [ 28%]     */

/* the caret. opacity only — never a layout property. */
.fde-term--live .fde-term__paint::after{
  content: "\258D";
  color: var(--gold, #8B6F3A);
  animation: fdeTermCaret 1.05s steps(1) infinite;
}
.fde-term.is-paused .fde-term__paint::after,
.fde-term.is-done   .fde-term__paint::after{ animation: none; opacity: .3 }
@keyframes fdeTermCaret{ 0%,49%{ opacity:1 } 50%,100%{ opacity:0 } }

/* The real transcript, once JS is painting over it. Hidden from SIGHT ONLY —
   never from assistive tech, never from find-in-page's underlying DOM, never
   from print. With JS off this class is never added and the <pre> is the
   visible element. */
.fde-term__out--sr{
  position: absolute !important;
  width: 1px; height: 1px;
  min-height: 0 !important;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: pre;
}

/* ── REDUCED MOTION ──────────────────────────────────────────────────────────
   The full transcript, instantly, complete. No typing, no caret, no blink, and
   no pause control because there is nothing to pause. Content is never gated
   behind the animation in any state. Belt and braces: the JS also bails out.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .fde-term__paint::after,
  .fde-term--live .fde-term__paint::after{ content: none; animation: none }
  .fde-term__ctl{ display: none !important }
  .fde-term__ctl{ transition: none }
}

/* ── FORCED COLORS ───────────────────────────────────────────────────────── */
@media (forced-colors: active){
  .fde-term{ border: 1px solid CanvasText }
  .fde-term__bar{ border-bottom: 1px solid CanvasText }
  .fde-term__rule{ background: CanvasText }
  .fde-term__paint .p,
  .fde-term__paint .k,
  .fde-term__paint .ok,
  .fde-term__paint .no,
  .fde-term__paint .c,
  .fde-term__paint .m{ color: CanvasText }
}

/* ── NOIR ROOM (only if the component is ever placed in one) ─────────────── */
[data-theme="noir"] .fde-term,
.fde-term[data-theme="noir"]{
  --fde-term-surface: rgba(245,240,235,.05);
  --fde-term-bar:     rgba(200,169,110,.06);
  --fde-term-body:    rgba(245,240,235,.92);   /* 13.81:1 */
  --fde-term-dim:     rgba(245,240,235,.72);   /*  8.77:1 */
  --fde-term-key:     #F5F0EB;
  --fde-term-accent:  var(--gold-warm, #C8A96E); /* 8.19:1 */
  --fde-term-green:   #7FB77F;                 /*  7.86:1 */
  --fde-term-red:     #E8836F;
  --fde-term-rule:    rgba(200,169,110,.24);
}

/* ── PRINT ───────────────────────────────────────────────────────────────────
   A hiring manager will ⌘P this page. Print the REAL transcript, drop the
   painted copy and the control. ------------------------------------------- */
@media print{
  .fde-term{ background: none; border: 1px solid #999 }
  .fde-term__ctl{ display: none !important }
  .fde-term__paint{ display: none }
  .fde-term__scroll{ overflow: visible; contain: none }
  .fde-term__out--sr{
    position: static !important;
    width: auto; height: auto;
    clip: auto; clip-path: none;
    margin: 0; padding: .8rem 1rem;
    white-space: pre-wrap;
    color: #000;
  }
}