/* ==========================================================================
   figures.css — shared styling for the hand-authored inline technical SVGs
   in assets/img/. Owned by the technical-illustration builder.

   Every figure is authored to be INLINED into the page (never <img src>), so
   that `currentColor` and the design tokens resolve against the surrounding
   band. Figures carry `fx-` classes only; all colour, type and stroke weight
   is decided here, from tokens.css.

   The drawing system
   ------------------
   * One canonical drawing width: viewBox `0 0 640 H`. Height varies.
   * Type is always --font-mono. Sizes in user units:
       fx-t-xl 64 · fx-t-lg 44 · fx-t-key 30 · fx-t 26 · fx-t-sm 24
     26 units renders at ~11.4 px when the figure is 280 px wide (a 320 px
     viewport), which is the smallest size any figure is ever shown at.
     Nothing is authored below 24 units.
   * Three stroke weights: hairline 1.8 (dimension / extension / leader /
     grid), line 2.6 (object outline), bold 4 (the subject of the figure).
   * One dimension-line style everywhere: hairline extension lines with a
     6-unit standoff, a hairline dimension line with the shared arrowhead
     marker at each end, and a mono label sitting clear of the line.
   * One leader-line style everywhere: hairline polyline ending in a 4-unit
     solid dot on the thing being named. Leaders never carry arrowheads —
     that is how you tell a leader from a dimension.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Figure furniture
   -------------------------------------------------------------------------- */

.fx {
  margin: 0;
  display: grid;
  gap: var(--s-4);
}

.fx__frame {
  position: relative;
  background: var(--bg-2);
  border: var(--hairline) solid var(--rule-c);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-4);
}

/* Figures that read better without a card behind them. */
.fx__frame--bare {
  background: none;
  border: 0;
  padding: 0;
}

.fx__frame > svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  /* Beyond this the hairlines start to look coarse; the drawing system is
     tuned for a 280–760 px render. */
  max-inline-size: 47.5rem;
  margin-inline: auto;
}

.fx__cap {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--fg-2);
  max-inline-size: var(--measure);
}

.fx__cap b,
.fx__cap strong {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--fg);
  font-size: 0.94em;
  letter-spacing: -0.01em;
}

.fx__note {
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: 0.06em;
  color: var(--fg-3);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Type inside the drawings
   -------------------------------------------------------------------------- */

.fx__frame svg text {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 26px; /* user units */
  fill: currentColor;
  letter-spacing: -0.01em;
}

.fx-t-xl { font-size: 64px; font-weight: 600; letter-spacing: -0.035em; }
.fx-t-lg { font-size: 44px; font-weight: 500; letter-spacing: -0.03em; }
.fx-t-key { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; }
.fx-t    { font-size: 26px; }
.fx-t-sm { font-size: 24px; }

/* Eyebrow / axis-caption treatment: uppercase mono, tracked out, tertiary. */
.fx-eyebrow {
  font-size: 24px;
  letter-spacing: 0.13em;
  fill: var(--fg-3);
}

.fx-dim { fill: var(--fg-2); }        /* dimension value labels */
.fx-mute { fill: var(--fg-2); }       /* secondary labels */
.fx-faint { fill: var(--fg-3); }      /* tertiary labels */
.fx-em { font-weight: 600; }

/* --------------------------------------------------------------------------
   Line work
   -------------------------------------------------------------------------- */

.fx-hair,
.fx-line,
.fx-bold {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fx-hair { stroke: var(--fg-3); stroke-width: 1.8; }
.fx-line { stroke-width: 2.6; }
.fx-bold { stroke-width: 4; }

/* Square-ended hairlines for extension lines and rules. */
.fx-hair--square { stroke-linecap: square; }
.fx-hair--dash { stroke-dasharray: 7 7; }

.fx-rule { stroke: var(--rule-c); stroke-width: 1.8; fill: none; }

/* Radiating "this is flashing" ticks, as Casio draws them in the guide. */
.fx-flash {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.fx-fill { fill: currentColor; stroke: none; }
.fx-fill-mute { fill: var(--fg-2); stroke: none; }
.fx-fill-faint { fill: var(--fg-3); stroke: none; }
.fx-fill-bg { fill: var(--bg); stroke: none; }
.fx-fill-bg2 { fill: var(--bg-2); stroke: none; }

/* Arrowheads for dimension lines. markerUnits is userSpaceOnUse in the
   markup so the head is a fixed 9 × 5.4 units regardless of stroke weight. */
.fx-arrowhead { fill: var(--fg-3); stroke: none; }

/* Leader terminator dot. */
.fx-leaderdot { fill: var(--fg-2); stroke: none; }

/* --------------------------------------------------------------------------
   The display accent. Used sparingly: only where the figure is literally
   depicting the LCD, or marking the single "live" element in a data graphic.
   The pale sage field is low-contrast on paper, so anything filled with
   --lcd also carries a currentColor outline to keep it legible on both
   grounds.
   -------------------------------------------------------------------------- */

.fx-lcd { fill: var(--lcd); stroke: none; }
.fx-lcd-edge { fill: var(--lcd); stroke: currentColor; stroke-width: 2.6; }
.fx-seg { fill: var(--lcd-seg); stroke: none; }
.fx-seg-off { fill: var(--lcd-seg-off-strong); stroke: none; }
.fx-seg-line { fill: none; stroke: var(--lcd-seg); stroke-width: 2.2; }

/* Casing tone — resin body of the watch in elevation drawings. */
.fx-body { fill: var(--bg-2); stroke: currentColor; stroke-width: 2.6; }
.fx-body-2 { fill: var(--bg-3); stroke: currentColor; stroke-width: 2.6; }
.fx-well { fill: var(--bg-3); stroke: none; }

/* Signal accent — used only for the "connected / synced" state. */
.fx-signal { fill: var(--signal-c); stroke: none; }
.fx-signal-line { fill: none; stroke: var(--signal-c); stroke-width: 2.6; }

/* Alert accent — used only for drift / unavailable states. */
.fx-alert { fill: var(--alert-c); stroke: none; }
.fx-alert-line { fill: none; stroke: var(--alert-c); stroke-width: 2.6; }

/* --------------------------------------------------------------------------
   Sprite icons (icons.svg)
   -------------------------------------------------------------------------- */

.fx-icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  display: block;
  color: inherit;
}

.fx-icon--lg { inline-size: 2.5rem; block-size: 2.5rem; }

/* The sprite is drawn on a 24 × 24 grid with a 1.6 unit stroke. */
.fx-ico-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fx-ico-thin {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fx-ico-fill { fill: currentColor; stroke: none; }

/* The sprite host element itself is never rendered. */
.fx-sprite {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   Motion. Nothing animates unless app.js has declared full motion. Every
   animated element is fully readable in its resting state — the blink only
   restates something the static drawing already says.
   -------------------------------------------------------------------------- */

.fx-blink { opacity: 1; }

html[data-motion='full'] .fx-blink {
  animation: fx-blink 1.4s steps(1, end) infinite;
}

@keyframes fx-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0.24; }
}

html[data-motion='full'] .fx-pulse {
  animation: fx-pulse 2.6s var(--ease-in-out) infinite;
}

@keyframes fx-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-blink,
  .fx-pulse { animation: none !important; opacity: 1 !important; }
}