/* Document-page furniture, shared.
 *
 * The platform's scrolling pages -- Partner apps, Site model, and whatever comes
 * next -- are the same document: an eyebrow, a title, one lead panel that owns the
 * eye, sections of rows and cards, a refusal panel, a footer. Partner apps grew all
 * of this inside its own <style> block, and the next page that wanted a button in
 * the same two roles would have copied it. That is how a build ends up with a tenth
 * palette and four subtly different primary buttons.
 *
 * NO COLOUR IS DEFINED HERE. Every value resolves to a --platform-* token from
 * platform.css; where a tint is needed it is mixed FROM a token rather than typed
 * as a new hex, so re-theming the platform still re-themes these pages.
 */

*{box-sizing:border-box}
body{margin:0;background:var(--platform-bg);color:var(--platform-ink);
  font:400 15px/1.6 var(--platform-ui)}
main{max-inline-size:72rem;margin:0 auto;padding:40px clamp(20px,4vw,48px) 88px}

.eyebrow{font-family:var(--platform-ui);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--platform-dim);margin:0 0 10px}
.page-title{margin:0 0 12px;font-size:clamp(28px,2.6vw,38px);line-height:1.15;
  letter-spacing:-.035em;font-weight:600;text-wrap:balance}
.prose{color:var(--platform-dim);max-inline-size:68ch;font-size:15px;line-height:1.6}
.prose b{color:var(--platform-ink)}
.lede{margin:0 0 32px}
.note-after{margin-top:12px}

h2{font-family:var(--platform-ui);font-size:18px;line-height:1.3;letter-spacing:-.02em;
  color:var(--platform-ink);font-weight:600;margin:40px 0 16px}
h3{margin:0 0 4px;font-size:15px;font-weight:600;letter-spacing:-.01em}

/* ONE THING LEADS. Body is 15px; the lead reading is clamped past 2.5x it, and it
   is the only thing on the page at that size. */
.lead{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(20px,4vw,48px);align-items:center;
  border:1px solid var(--platform-line);border-radius:var(--platform-radius);
  background:var(--platform-panel);padding:clamp(20px,3vw,32px)}
.lead-figure{min-inline-size:0}
.reading{display:block;font:600 clamp(44px,7vw,76px)/0.95 var(--platform-mono);
  letter-spacing:-.045em;margin:0;overflow-wrap:anywhere}
.reading.is-absent{font-size:clamp(26px,4vw,40px);letter-spacing:-.02em;
  font-family:var(--platform-ui);color:var(--platform-dim)}
.lead-label{display:block;margin-top:12px;font-family:var(--platform-mono);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--platform-dim)}
.lead-side{display:grid;gap:12px;min-inline-size:0;align-content:center}
.lead-note{margin:0;color:var(--platform-dim);font-size:14px;max-inline-size:52ch}
.lead-note b{color:var(--platform-ink);font-weight:600}

.badge{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;
  border:1px solid var(--platform-line);border-radius:999px;
  font-family:var(--platform-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap;
  max-inline-size:min(28rem,calc(100vw - 48px))}
.badge svg{inline-size:12px;block-size:12px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2}
/* HEALTHY IS QUIET. These three states used to wear --platform-accent, which is
   the interactive and identity colour: links, the primary fill, the focus ring.
   fc-api's published design note is explicit -- "accent is for interactive and
   identity only. ok/warn/alarm are state and must never be reused as decoration"
   -- and the principle under it is ISA-101's: a healthy site is neutral so an
   operator scans for the ABSENCE of colour rather than reading every tile.
   Colouring the normal case spends the signal before anything is wrong.
   The word and the icon still carry the state, so nothing is lost to colour. */
.badge.is-open{color:var(--platform-dim)}
.badge.is-closed{color:var(--platform-warn);border-color:var(--platform-warn)}
.badge.is-down{color:var(--platform-red);border-color:var(--platform-red)}
/* LIVENESS, WHICH badges.js EMITS AND NOTHING STYLED. `is-live` and `is-stale`
   were written by the shared badge module and defined nowhere, so a stale site
   announced itself in the neutral border of a resting pill -- the one state that
   most needed to look unlike the others. The icon and the word already carry the
   meaning; these only stop the colour contradicting them. */
.badge.is-live{color:var(--platform-dim)}
.badge.is-stale{color:var(--platform-warn);border-color:var(--platform-warn)}

/* ── buttons ────────────────────────────────────────────────────────────────
   TWO ROLES AND TWO ONLY across every page that loads this file: affirmative work
   is `is-go`, anything that removes, overwrites or dismisses is `is-danger`. One
   action role, one variant, product-wide.

   Danger is an outlined red rather than a red fill because --platform-red carries
   neither ink at 4.5:1; as a border and an icon it is a graphical object at 3:1,
   and the word and the icon carry the meaning so colour never does it alone. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-block-size:40px;padding:0 16px;cursor:pointer;
  font:500 13.5px var(--platform-ui);border-radius:var(--platform-radius);
  border:1px solid var(--platform-line);background:transparent;color:var(--platform-ink)}
.btn svg{inline-size:15px;block-size:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{background:var(--platform-bg)}
.btn:active{background:var(--platform-line)}
.btn:focus-visible{outline:2px solid var(--platform-accent);outline-offset:2px}
.btn[disabled]{opacity:.5;cursor:default;pointer-events:none}
.btn.is-go{background:var(--platform-accent);border-color:var(--platform-accent);
  color:var(--platform-bg);font-weight:600}
.btn.is-go:hover{background:color-mix(in srgb,var(--platform-accent) 84%,var(--platform-bg))}
.btn.is-go:active{background:color-mix(in srgb,var(--platform-accent) 70%,var(--platform-bg))}
.btn.is-danger{border-color:var(--platform-red);color:var(--platform-ink)}
.btn.is-danger svg{color:var(--platform-red)}
.btn.is-danger:hover{background:color-mix(in srgb,var(--platform-red) 16%,var(--platform-panel))}
.btn.is-danger:active{background:color-mix(in srgb,var(--platform-red) 26%,var(--platform-panel))}
/* SELECTED IS NOT AFFIRMATIVE. A picker's current choice wearing the primary fill
   says "press me to do the main thing" about the one control that would do
   nothing. Selection gets its own state: the accent as an outline, plus
   aria-pressed, so it is not carried by colour alone. */
.btn[aria-pressed="true"]{border-color:var(--platform-accent);color:var(--platform-accent);
  background:color-mix(in srgb,var(--platform-accent) 10%,var(--platform-panel))}
.btn[aria-pressed="true"]:hover{background:color-mix(in srgb,var(--platform-accent) 18%,var(--platform-panel))}
/* LOADING IS NOT DISABLED. The control keeps full strength and swaps its label for
   a spinner; dimming it reads as "you cannot do this" at the exact moment the
   answer is "this is happening". */
.btn[aria-busy="true"]{pointer-events:none}
.btn[aria-busy="true"] .btn-label{opacity:.75}
.spin{animation:spin 900ms linear infinite;transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.actions{display:flex;gap:10px;flex-wrap:wrap}

.rowlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.row{border:1px solid var(--platform-line);border-radius:var(--platform-radius);
  background:var(--platform-panel);padding:14px 16px;display:grid;gap:8px}
.row-head{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.row-head h3{flex:1 1 16rem;min-inline-size:0}
.num{font-family:var(--platform-mono);font-size:12px;color:var(--platform-dim);
  font-variant-numeric:tabular-nums;flex:none}
.route{font-family:var(--platform-mono);font-size:11.5px;color:var(--platform-dim);
  overflow-wrap:anywhere}
.row-detail{margin:0;font-size:13.5px;color:var(--platform-dim);max-inline-size:78ch}
.row-foot{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* The icon inside a pill needs its OWN size and fill. Without these it inherits the
   UA default of 300x150 and a black fill: the pill grows to fill the row, the label
   falls outside it, and every gate still passes because none of them sees a shape. */
.status{display:inline-flex;align-items:center;gap:5px;
  font-family:var(--platform-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 8px;border-radius:999px;
  border:1px solid currentColor;white-space:nowrap;flex:none}
.status svg{inline-size:11px;block-size:11px;flex:none;fill:none;
  stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* done and waiting are deliberately the SAME colour: neither is abnormal, and
   under ISA-101 only the abnormal earns one. They stay distinguishable by icon
   and by word, which is where the meaning belonged in the first place. Do not
   "fix" this into two tones. */
.status.done,.status.waiting{color:var(--platform-dim)}
.status.blocked{color:var(--platform-warn)}

.grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.card{border:1px solid var(--platform-line);border-radius:var(--platform-radius);
  background:var(--platform-panel);padding:20px;min-inline-size:0}
.card-figure{display:block;font:600 26px var(--platform-mono);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.card-cap{font-size:13px;margin-top:4px;color:var(--platform-dim)}

/* A DESTRUCTIVE CONFIRMATION IS NOT ONE MORE REFUSAL. Shared by Space and Watch:
   the panel that asks a second time wears red rather than the refusal's warn, so
   it does not read as one more line of the list it sits under. The words say so
   too -- colour never carries this alone. */
.refusal.confirm{border-color:var(--platform-red)}
.refusal.confirm code{color:var(--platform-red)}

/* Refusals are the product, so they are a section and not a footnote. */
.refusal{border:1px solid var(--platform-warn);
  border-radius:var(--platform-radius);background:var(--platform-panel);padding:16px 18px;
  display:grid;gap:8px}
.refusal code{font-family:var(--platform-mono);font-size:13px;color:var(--platform-warn)}
.refusal p{margin:0;color:var(--platform-dim);font-size:13.5px;max-inline-size:78ch}

.err{border:1px solid var(--platform-red);border-radius:var(--platform-radius);
  padding:18px;background:var(--platform-panel);display:grid;gap:6px}
.err h3{color:var(--platform-ink)}
.err p{margin:0;color:var(--platform-dim);font-size:13.5px}
.err.is-spaced{margin-top:14px}
.skeleton{color:var(--platform-dim)}
.empty{color:var(--platform-dim);font-size:13.5px;margin:0}

footer{margin-top:64px;padding-top:20px;border-top:1px solid var(--platform-line);
  color:var(--platform-dim);font-size:12px;display:flex;gap:18px;flex-wrap:wrap}
footer code{font-family:var(--platform-mono)}

.sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

@media (max-width:720px){
  main{padding-block-start:28px}
  .lead{grid-template-columns:minmax(0,1fr)}
  .lead-note{max-inline-size:none}
  .btn{inline-size:100%}
  .actions{display:grid}
}