/* ====================================================================
   FLEET SCENE — the "one console, five machines" animation section.

   Every rule is scoped under .fleet-scene. The source was a standalone
   full-viewport demo that styled :root, html and body and claimed .btn —
   which is this theme's primary call to action. Unscoped, it would have
   restyled the page around it, so the custom properties hang off the
   section class rather than :root and the scene's own controls are
   .fs-btn.

   Neutrals below are style.css's tokens, so the section sits in the page.
   The three TIER colours are the scene's own and are load-bearing: the
   legend names them, and they are the only way to tell a read from a
   destructive call. Do not remap them onto --accent.

   The matching palette literal is the `C` object in js/fleet-scene.js —
   canvas cannot read CSS custom properties. Change one, change both.
   ==================================================================== */

.fleet-scene {
  /* neutrals — from style.css section 1 */
  --fs-ink:       var(--bg-primary, #0a0a0f);
  --fs-chalk:     var(--text-primary, #e2e8f0);
  --fs-graphite:  var(--text-tertiary, #64748b);
  --fs-line:      var(--border, #2d2d44);

  /* tier colours — semantic, deliberately not the theme's accent */
  --fs-brass:     #C6A15B;   /* write tier, and the voice stream */
  --fs-signal:    #C9553B;   /* destructive tier — used sparingly on purpose */
  --fs-read:      #6FA598;   /* read-only tier */

  position: relative;
  width: 100%;
  height: min(78vh, 760px);
  min-height: 460px;
  background: var(--fs-ink);
  color: var(--fs-chalk);
  font-family: var(--font-sans);
  overflow: hidden;
  border-block: 1px solid var(--fs-line);
  -webkit-font-smoothing: antialiased;
}

/* The canvas fills the section. Everything 3D happens here. */
.fleet-scene .fs-stage {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.fleet-scene .fs-mono {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fs-graphite);
}
.fleet-scene .fs-dot { opacity: 0.45; padding-inline: 0.5em; }

/* --------------------------------------------------------------------
   DOM OVERLAY
   Title, legend, readout and caption are real DOM layered above the
   canvas with pointer-events:none, so they never eat clicks. Two
   reasons: the text stays selectable and screen-reader visible, and it
   does not tilt with the scene — which gives the composition a stable
   frame to move inside.
   -------------------------------------------------------------------- */
.fleet-scene .fs-hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.fleet-scene .fs-hud > * { position: absolute; }

.fleet-scene .fs-topbar {
  top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem;
  padding: 1.1rem clamp(16px, 3.5vw, 40px);
  border-bottom: 1px solid var(--fs-line);
  background: linear-gradient(to bottom, rgba(10,10,15,0.85), transparent);
}
/* h2, not h1 — the page already has one and the section is not the
   document's subject. */
.fleet-scene .fs-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.05rem, 2.1vw, 1.4rem);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--fs-chalk);
}
.fleet-scene .fs-title em { font-style: normal; color: var(--fs-brass); }

.fleet-scene .fs-legend {
  left: clamp(16px, 3.5vw, 40px);
  bottom: clamp(16px, 3vw, 34px);
  display: grid; gap: 0.55rem;
}
.fleet-scene .fs-legend b {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--fs-graphite); font-weight: 400;
}
.fleet-scene .fs-key {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.06em; color: var(--fs-chalk);
}
.fleet-scene .fs-key i { width: 16px; height: 2px; flex: none; }

.fleet-scene .fs-readout {
  right: clamp(16px, 3.5vw, 40px);
  bottom: clamp(16px, 3vw, 34px);
  text-align: right; display: grid; gap: 0.5rem;
}
.fleet-scene .fs-readout dl {
  margin: 0; display: flex; justify-content: flex-end;
  gap: 0.8rem; align-items: baseline;
}
.fleet-scene .fs-readout dt {
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--fs-graphite);
}
.fleet-scene .fs-readout dd {
  margin: 0; font-family: var(--font-mono); font-size: 0.82rem;
  color: var(--fs-chalk); font-variant-numeric: tabular-nums;
  min-width: 7ch; text-align: right;
}

.fleet-scene .fs-caption {
  left: 50%; transform: translateX(-50%);
  bottom: clamp(74px, 11vh, 104px);
  width: min(560px, 86vw); text-align: center;
}
.fleet-scene .fs-said {
  font-family: var(--font-mono);
  font-size: clamp(0.76rem, 1.5vw, 0.92rem);
  letter-spacing: 0.02em; color: var(--fs-chalk);
  min-height: 2.6em; line-height: 1.5; margin: 0;
}
.fleet-scene .fs-said::after {
  content: "\258C"; color: var(--fs-brass);
  animation: fs-caret 0.9s steps(1) infinite;
}
@keyframes fs-caret { 50% { opacity: 0; } }

.fleet-scene .fs-controls {
  right: clamp(16px, 3.5vw, 40px);
  top: clamp(64px, 9vh, 86px);
  display: grid; gap: 0.5rem; justify-items: end;
  pointer-events: auto;
}
/* .fs-btn, not .btn — the theme's .btn is the primary call to action. */
.fleet-scene .fs-btn {
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: none; border: 1px solid var(--border-light, #3d3d54);
  color: var(--fs-chalk);
  padding: 0.5rem 0.9rem; cursor: pointer;
  transition: var(--transition-fast, 150ms ease-in-out);
}
.fleet-scene .fs-btn:hover,
.fleet-scene .fs-btn[aria-pressed="true"] {
  background: var(--fs-brass); border-color: var(--fs-brass); color: var(--fs-ink);
}
.fleet-scene :focus-visible { outline: 1px solid var(--fs-brass); outline-offset: 3px; }

/* --------------------------------------------------------------------
   NARROW VIEWPORTS

   The scene was designed as a full viewport, where the four HUD corners
   never meet. Inside a ~660px-tall section on a phone they do: the
   caption ran straight through the readout, and the topbar wrapped onto
   two lines over the title.

   So on a phone the HUD is reduced to what still reads at that size —
   the title, the caption and the controls. The legend and readout are
   hidden rather than shrunk, because a 2px colour key and a tabular
   readout are illegible long before they are small enough to fit.

   They are hidden with display:none and NOT removed from the markup:
   fleet-scene.js writes the pending and held counts into them every
   frame, and would throw on a null element.
   -------------------------------------------------------------------- */
@media (max-width: 720px) {
  .fleet-scene {
    /* A phone should not give most of its screen to one decorative band. */
    height: min(70vh, 520px);
    min-height: 380px;
  }
  .fleet-scene .fs-legend,
  .fleet-scene .fs-readout { display: none; }

  /* The strap is the topbar's second line on a phone; the title says it. */
  .fleet-scene .fs-topbar .fs-mono { display: none; }
  .fleet-scene .fs-topbar { padding: 0.85rem 1rem; }
  .fleet-scene .fs-title { font-size: 1rem; }

  .fleet-scene .fs-controls {
    top: auto;
    bottom: clamp(10px, 2.5vw, 16px);
    right: clamp(10px, 2.5vw, 16px);
    grid-auto-flow: column;
    gap: 0.4rem;
  }
  .fleet-scene .fs-btn { font-size: 0.55rem; padding: 0.4rem 0.6rem; letter-spacing: 0.1em; }

  /* With the readout gone the caption can have the full width. */
  .fleet-scene .fs-caption { width: min(94vw, 560px); bottom: clamp(58px, 9vh, 76px); }
}

/* Deliberately NO prefers-reduced-motion rule here. The scene animates for
   every visitor by default (see the MOTION note in js/fleet-scene.js), and a
   stylesheet that quietly stopped just the caret would leave the page in two
   minds: the 3D scene tilting while its cursor sits still. One behaviour,
   changed in one place. The Motion control stops the caret with the rest of
   it, via .fleet-scene[data-still] below. */
.fleet-scene[data-still] .fs-said::after { animation: none; }