/* ==========================================================================
   ActionRouter portal — the only stylesheet written for the real application.

   tokens.css and app.css beside this file are byte-for-byte copies of
   docs/prototype/assets/, and a test fails the build if they drift. Anything the
   portal needs that the prototype never had goes here instead, so the comparison
   against the prototype's kitchen sink stays honest.
   ========================================================================== */

:root {
  /* The prototype reserves a strip at the top of every screen for its
     PROTOTYPE — NON-FUNCTIONAL banner, and app.css offsets the frame, the rail and
     the top bar by it. There is no banner here, so the offset is zero. */
  --ar-banner-height: 0px;
}

/* --- Server-side validation ---------------------------------------------
   Razor writes these classes; the prototype only ever had the hand-placed
   .field__error span. Mapped rather than restyled, so a validated field looks
   exactly like the prototype's error state. */

.input.input-validation-error,
.select.input-validation-error,
textarea.input.input-validation-error { border-color: var(--ar-danger); }

.field-validation-error { font-size: var(--ar-text-micro); color: var(--ar-danger-text); }
.field-validation-valid { display: none; }

.validation-summary-errors { margin: 0; }
.validation-summary-errors ul { margin: 0; padding-left: var(--ar-space-4); }
.validation-summary-valid { display: none; }

/* --- Sign-out sits in the top bar as a form, not a link ------------------
   A sign-out that a GET can trigger is a sign-out any image tag can trigger. */

.topbar form { display: flex; }

/* --- Skip link ------------------------------------------------------------
   Keyboard users reach the content without walking the rail (brand §9). */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--ar-surface); color: var(--ar-text);
  padding: var(--ar-space-2) var(--ar-space-4);
  border-radius: 0 0 var(--ar-radius-control) 0;
}
.skip-link:focus { left: 0; }

/* --- "Arrives in chunk N" placeholder ------------------------------------
   Every nav destination resolves to a real URL from chunk 2 onwards. Until the
   screen itself is built, that URL renders the empty state. */

.placeholder-chunk {
  font-family: var(--ar-font-mono);
  font-size: var(--ar-text-micro);
  color: var(--ar-text-muted);
}

/* --- Call trace -----------------------------------------------------------
   The call detail screen's "what happened" list. The prototype carried these
   rules inline on admin/call-detail.html rather than in app.css, so they are
   copied here verbatim rather than added to the shared stylesheet — which the
   parity test would refuse, and rightly.

   One column fewer than the prototype: it drew a per-stage elapsed time, and
   the usage ledger records one duration for the whole call. An invented figure
   on a screen an operator trusts is worse than a column that is not there. */

.trace { list-style: none; margin: 0; padding: 0; }
.trace li { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: start; padding: 10px 0; }
.trace li + li { border-top: 1px solid var(--ar-card-border); }
.trace .dot { width: 9px; height: 9px; border-radius: 50%; margin: 6px auto 0; background: var(--ar-grey-300); }
.trace .dot--ok { background: var(--ar-green-600); }
.trace .dot--warn { background: var(--ar-warning); }
.trace .dot--bad { background: var(--ar-danger); }
.trace .what { font-size: 13px; }
.trace .meta { font-size: 12px; color: var(--ar-text-muted); }
.trace .dur { font-size: 12px; color: var(--ar-text-muted); font-variant-numeric: tabular-nums; }

/* --- Refresh countdown ----------------------------------------------------
   The prototype coloured this with inline styles inside three separate <script>
   blocks — admin/tenants.html, admin/alerts.html and the dashboard — and they
   had already started to differ. Same two colours, named once, rendered by
   <ar-countdown> so the warning band is a server-side decision and not three
   copies of a magic number.

   Not in app.css: the stylesheet parity test compares that file against the
   prototype's byte for byte, and rightly refuses anything the prototype does
   not have. */

.countdown { font-variant-numeric: tabular-nums; }
.countdown--soon { color: var(--ar-warning-text); font-weight: 600; }
.countdown--lapsed { color: var(--ar-danger-text); font-weight: 600; }

/* --- Document transfer progress -------------------------------------------
   The prototype has no jobs screen, so there is nothing to copy and nothing
   to keep in parity with. A bar rather than a number because the question
   an operator has is "is it moving", which a 7/20 answers only if they
   remember what it said a minute ago.

   Parts, not bytes. Parts are what the job checkpoints and what Actionstep
   acknowledges; a byte counter would move more smoothly and mean less.

   Not in app.css, for the reason the countdown gives above. */

.parts { display: flex; align-items: center; gap: 8px; min-width: 140px; }
.parts__track { flex: 1; height: 6px; border-radius: 3px; background: var(--ar-grey-200); overflow: hidden; }
.parts__fill { height: 100%; background: var(--ar-green-600); border-radius: 3px; }
.parts__fill--stalled { background: var(--ar-warning); }
.parts__fill--stopped { background: var(--ar-danger); }
.parts__count { font-size: 12px; color: var(--ar-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Code blocks and method chips -----------------------------------------
   The prototype's api.html and errors.html carried these in a <style> block on
   the page itself rather than in app.css, so they belong here: app.css is a
   byte-for-byte copy and a test fails the build if it drifts. Values are the
   prototype's, unchanged. */

pre.code {
  background: var(--ar-ink); color: #E9EAEB;
  border-radius: var(--ar-radius-control);
  padding: 14px 16px; overflow-x: auto;
  font-family: var(--ar-font-mono); font-size: 12px; line-height: 1.6; margin: 0;
}
pre.code .k { color: var(--ar-green-400); }
pre.code .s { color: #FFD29B; }
pre.code .c { color: var(--ar-grey-500); }

.ep { display: flex; align-items: center; gap: 10px; }
.ep .m {
  font-family: var(--ar-font-mono); font-size: 11px; font-weight: 600;
  padding: 2px 7px; border-radius: 4px;
  background: var(--ar-success-tint); color: var(--ar-success-text);
}
.ep .m--get { background: var(--ar-info-tint); color: var(--ar-info-text); }
.ep code { font-family: var(--ar-font-mono); font-size: 13px; color: var(--ar-ink); }

/* --- Specification unavailable -------------------------------------------
   The API documentation screen renders the live OpenAPI or it renders nothing.
   There is no stale copy to fall back to, so the failure needs somewhere to sit
   that reads as an explanation rather than as an empty screen. */

.spec-missing { display: flex; flex-direction: column; gap: var(--ar-space-3); }
.spec-missing code { word-break: break-all; }

/* --- Numbered sequence ----------------------------------------------------
   The document transfer steps on the guides screen. The prototype carried this
   in a <style> block on guides.html rather than in app.css, so it lives here.
   Values are the prototype's, unchanged. */

.seq { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.seq li {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px;
  padding: 10px 0; counter-increment: s;
}
.seq li + li { border-top: 1px solid var(--ar-card-border); }
.seq li::before {
  content: counter(s); width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
  background: var(--ar-success-tint); color: var(--ar-success-text);
}