/* ===========================================================================
   production.css — rendering parity for production markup.
   ---------------------------------------------------------------------------
   The approved mockup navigates client-side, so its navigation controls are
   <button> elements. The production application is server-rendered with
   progressive interactivity, which makes an <a href> the correct element for
   navigation: it works without scripting, it is what a screen reader announces
   as a link, and it supports open-in-new-tab.

   Changing the element changes the user-agent default styling, which would
   alter the approved rendering. These rules restore it exactly, so the
   delivered design is preserved while the markup is semantically right.

   This is not a design change. The fidelity gate compares the rendered result
   against the approved reference and fails if any of it drifts.
   =========================================================================== */

/* Controls the approved design renders as buttons, implemented as links. */
a.ghost,
a.primary,
a.secondary,
a.danger,
a.text-button,
a.nav-item,
a.screen-card,
a.safety-card {
  text-decoration: none;
}

/* The approved buttons are inline-block boxes; an anchor is inline by default,
   which would collapse the padding the design relies on. */
a.ghost,
a.primary,
a.secondary,
a.danger {
  display: inline-block;
}

/* Sidebar navigation items are flex rows in the approved design. */
a.nav-item {
  box-sizing: border-box;
}

/* A form used only to carry a CSRF token must not introduce block spacing
   where the approved design has none. */
.sidebar-foot form,
.list-item form {
  display: contents;
}

/* ---------------------------------------------------------------------------
   Navigation the approved design drew as buttons.

   The mockup navigated with <button data-go="…"> handled by its own
   JavaScript. In the product those destinations are real routes, so they are
   anchors — which means the approved rules written for `button` no longer
   apply and the grid they establish collapses. These rules restore exactly the
   approved presentation for the anchor, and change nothing about it.
   --------------------------------------------------------------------------- */
.doc-grid a {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  padding: 12px;
  text-align: left;
  display: grid;
  grid-template-columns: 35px 1fr auto;
  gap: 8px;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  font-weight: 650;
  font-size: .85rem;
}
.doc-grid a > span { color: var(--muted); }
a.screen-card { text-decoration: none; }

/* ---------------------------------------------------------------------------
   Components the product adds beyond the approved screens.

   Three screens now report generated data the mockup illustrated statically:
   specification coverage, the screen index and the scanner release pipeline.
   Their rows follow the approved table grid rather than inventing a second
   visual language, and the status pills reuse the approved pill palette.
   --------------------------------------------------------------------------- */
.coverage-row { grid-template-columns: 1.2fr .8fr .8fr 1fr; }
.section-row  { grid-template-columns: 60px 2fr .8fr 1.1fr 1.4fr 1.4fr; }
.gate-row     { grid-template-columns: 1.4fr 2fr 1.6fr .9fr; }
.release-row  { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; }
.settings-row { grid-template-columns: 1.4fr 1fr 1fr 1.2fr .8fr; }
.review-row   { grid-template-columns: 1.6fr 1.6fr .9fr 1.2fr .9fr; }

/* Status pills for the traceability ladder. They borrow the approved
   severity palette rather than introducing new colours: verified reads as the
   settled green, implemented as the informational blue, specified and mapped
   as neutral, and deferred as the amber that means "not yet" everywhere else
   in this product. */
.verified    { color: var(--green); background: var(--green-soft); }
.implemented { color: #2262a2; background: #edf6ff; }
.specified   { color: #687586; background: #eef2f5; }
.mapped      { color: #687586; background: #eef2f5; }
.deferred    { color: #9b610a; background: var(--amber-soft); }

/* The capability register on the safety centre. It follows the approved table
   grid rather than introducing a second visual language. */
.capability-row { grid-template-columns: 1.1fr 2.6fr .9fr; }
.policy-picker label.unavailable { opacity: .62; cursor: not-allowed; }