/* The only three things this page uses from craft/system/components.css,
   lifted verbatim so the shared source stays the source.

   WHY THE SHARED FILE IS NOT LINKED: it is 64.6KB, this page uses about 40
   lines of it, and all of it sits on the critical path in front of an LCP that
   is a line of text. Measured 1952ms on Slow 4G with the full file, against the
   kit's 1.8s internal target, and LCP was equal to FCP throughout, so the
   bottleneck was never the 900KB of deferred script. It was stylesheet bytes.
   tokens.css still carries the whole design system, including .kicker and the
   base typography, so nothing about the visual language is forked here.

   This is a legitimate cut only because CREATIVE-DIRECTION already builds this
   page's skeleton from a storyboard rather than from section components. A
   schema-driven page uses the components and must link the real file. */

/* ---------------------------------------------------------------- specs -- */

.specs { display: grid; max-width: 44rem; }
/* Inside a <dl>, a wrapping <div> may contain only <dt> and <dd> — a leader
   element as a third child is invalid and axe flags it. The leader lives inside
   the <dt> instead, which keeps the markup valid and the look identical. */
.spec { display: grid; grid-template-columns: 1fr auto; align-items: baseline;
        gap: var(--space-2xs); padding-block: var(--space-xs);
        border-block-end: 1px solid var(--rule); }
.spec dt { display: flex; align-items: baseline; gap: var(--space-2xs);
           font-family: var(--font-mono); font-size: var(--step--1);
           letter-spacing: var(--tracking-meta); text-transform: uppercase;
           color: var(--ink-muted); min-width: 0; }
.spec__leader { flex: 1 1 auto; min-width: var(--space-m);
                border-block-end: 1px dotted var(--ink-subtle); transform: translateY(-.25em); }
.spec dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
           min-width: 0; color: var(--ink); }
.spec dt > span:first-child { min-width: 0; overflow-wrap: anywhere; }

/* Below ~520px a label and a value cannot share a row without forcing the
   document wider than the viewport, which fails WCAG 1.4.10 reflow at 400%
   zoom. Stack them and drop the leader, which has no meaning stacked. */
@media (max-width: 32.5rem) {
  .spec { grid-template-columns: 1fr; gap: var(--space-3xs); }
  .spec__leader { display: none; }
}

/* ---------------------------------------------------------------- table -- */

.table-wrap { overflow-x: auto; }
/* A horizontally scrollable region must be keyboard reachable, so it carries
   tabindex="0", which means it also needs a focus ring. The right edge mask is
   the only affordance that the table continues past the viewport. */
.table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 45rem) {
  .table-wrap { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
                mask-image: linear-gradient(to right, #000 88%, transparent); }
  .table-wrap:focus-within { -webkit-mask-image: none; mask-image: none; }
}

/* --------------------------------------------------- accent discipline -- */
/* Carried from the ops precedent in components.css. In this register the accent
   means HIGH EXPLOSIVE, and a tick on a kicker line is not high explosive.
   Left alone it put a second yellow mark in the fold beside the single primary
   action. The tick is furniture, so it takes a furniture colour.
   (.kicker and .kicker::before are defined in tokens.css, not in components.) */
[data-sector='ordnance'] .kicker::before { background: var(--ink-muted); }