/* The fleet console, in the brand's colour tokens and fonts (tokens.css, deployed beside it). The console has no build
   step, so the portal's scales, buttons, chips and segmented control are copied here from portal/src/styles.css (keep
   them in step). No colour of its own: every colour is a brand token. */
:root{
  --space-hair:.125rem; --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem;
  --space-8:2rem; --space-10:2.5rem; --space-12:3rem;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:.9375rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.25rem; --fs-2xl:1.5rem;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-sm)/1.55 var(--sans,system-ui,sans-serif);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:var(--sans,inherit)}
h1{font-size:var(--fs-2xl);font-weight:700;line-height:1.2}
h2{font-size:var(--fs-lg);font-weight:700}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
.note,.updated,#status{color:var(--muted);font-size:var(--fs-xs)}
#status:empty{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}

/* the header bar */
.top{background:var(--surface);border-bottom:1px solid var(--rule)}
.top-in{max-width:90rem;margin:0 auto;min-height:3.5rem;padding:var(--space-2) var(--space-8);display:flex;align-items:center;gap:var(--space-4)}
.wordmark{font:700 var(--fs-md)/1 var(--sans);display:inline-flex;align-items:baseline;gap:var(--space-3);margin-right:auto;white-space:nowrap}
.product{font:500 var(--fs-xs)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border-left:1px solid var(--rule);padding-left:var(--space-3)}
.who{color:var(--muted);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:20rem}
main{max-width:90rem;margin:0 auto;padding:var(--space-6) var(--space-8) var(--space-12)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-4)}
.head .updated{margin:var(--space-1) 0 0}

/* buttons: the portal's set. Primary (one per view), outline (everything else), danger (outline, for what can't be
   undone), quiet (links only, at least 32px tall) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font:700 var(--fs-sm) var(--sans);height:2.5rem;padding:0 var(--space-5);border-radius:var(--radius);border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-sm{height:2rem;padding:0 var(--space-3)}
.btn-primary,#new-form button[type=submit]{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover,#new-form button[type=submit]:hover{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--on-accent) 35%,transparent)}
/* light themes fill the primary with the accent's ink and write on the page colour: some brands' bright accent
   doesn't reach 4.5:1 with its on-accent text in light (the ink is at least 4.5:1 on the page by the brand contract) */
:root[data-theme="light"] .btn-primary,:root[data-theme="light"] #new-form button[type=submit]{background:var(--accent-ink);color:var(--bg)}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .btn-primary,:root:not([data-theme="dark"]) #new-form button[type=submit]{background:var(--accent-ink);color:var(--bg)}
}
.btn-outline{background:transparent;color:var(--ink);border-color:color-mix(in srgb,var(--ink) 25%,transparent)}
.btn-outline:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.btn-danger{background:transparent;color:var(--fail);border-color:color-mix(in srgb,var(--fail) 55%,transparent)}
.btn-danger:hover{background:var(--fail-bg);border-color:var(--fail)}
.btn-quiet{display:inline-flex;align-items:center;min-height:2rem;background:none;border:0;color:var(--accent-ink);padding:0;height:auto;font:700 var(--fs-sm) var(--sans);cursor:pointer;text-decoration:none}
.btn-quiet:hover{text-decoration:underline;text-underline-offset:3px}
.btn[disabled],.btn-quiet[disabled]{opacity:.45;cursor:not-allowed}
/* the open form's toggle steps back: its submit is the primary then */
#new-toggle[aria-expanded="true"]{background:transparent;color:var(--ink);border-color:color-mix(in srgb,var(--ink) 25%,transparent)}
.spin{display:inline-block;font-family:var(--mono)}
[aria-busy="true"] .spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){[aria-busy="true"] .spin{animation:none}}
/* the focus ring: the accent's ink, at least 3:1 on the page in every theme */
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}

/* chips: a dot and a word (the portal's status chips); hollow for "nothing yet" */
.chip{display:inline-flex;align-items:center;gap:var(--space-1);font:500 var(--fs-xs)/1 var(--mono);letter-spacing:.02em;padding:var(--space-1) var(--space-2);border-radius:var(--radius);white-space:nowrap}
.chip::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:currentColor;flex:none}
.chip.hollow::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.c-ok{color:var(--ok);background:var(--ok-bg)} .c-warn{color:var(--warn);background:var(--warn-bg)}
.c-fail{color:var(--fail);background:var(--fail-bg)} .c-note{color:var(--note);background:var(--note-bg)}
.c-pending{color:var(--pending);background:var(--pending-bg)}
/* each status word mixed 30% towards the ink: darker on a light theme's pale chip, lighter on a dark theme's, so every
   chip and the behind mark read at 4.5:1 or better on its own background in every theme (some brands' status tokens
   fall just short alone; test/fleet-console.test.ts measures them) */
.chip:is(.c-ok,.c-warn,.c-fail,.c-note,.c-pending){color:color-mix(in srgb,var(--chip-fg) 70%,var(--ink))}
.c-ok{--chip-fg:var(--ok)} .c-warn{--chip-fg:var(--warn)} .c-fail{--chip-fg:var(--fail)} .c-note{--chip-fg:var(--note)} .c-pending{--chip-fg:var(--pending)}
.col-version .chip{margin-left:var(--space-2)}
.plain{white-space:nowrap}

/* panels: the empty fleet, a load error */
.panel{border:1px solid var(--rule);background:var(--surface);padding:var(--space-6);margin:var(--space-4) 0;display:grid;gap:var(--space-4);justify-items:start}
.panel p{margin:0}
.panel-error{border-left:3px solid var(--fail)}
.panel details{font-size:var(--fs-xs);color:var(--muted)}
.panel code{font-family:var(--mono);overflow-wrap:anywhere}

/* Needs you: what waits on an operator, before everything else */
.needs{border:1px solid var(--rule);border-left:3px solid var(--warn);background:var(--surface);padding:var(--space-4);margin:var(--space-4) 0}
.needs h2{font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-2)}
.needs ul{list-style:none;margin:0;padding:0;display:grid}
.needs li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3);padding:var(--space-2) 0;border-top:1px solid var(--rule)}
.needs li:first-child{border-top:0}
.needs li::before{content:"";width:.5rem;height:.5rem;border-radius:50%;flex:none}
.needs li.tone-warn::before{background:var(--warn)} .needs li.tone-fail::before{background:var(--fail)}
.needs strong{font-weight:600}
.needs .why{color:var(--muted);flex:1 1 16rem}
.needs .acts{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}
.result{margin:0;font-size:var(--fs-sm)}
.result:empty{display:none}
.needs .result{margin-top:var(--space-2)}

/* the strip: the portal's segmented control, single-select; problems after a rule, each with its tone's dot */
.seg{display:flex;flex-wrap:wrap;align-items:center;padding:1px 0 0 1px;margin:var(--space-4) 0}
.seg button{font:600 var(--fs-sm) var(--sans);background:transparent;border:1px solid var(--rule);margin:-1px 0 0 -1px;color:var(--muted);min-height:2rem;padding:0 var(--space-3);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:var(--space-2)}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{position:relative;background:var(--ink);border-color:var(--ink);color:var(--bg)}
.seg button.problem::before{content:"";width:.42rem;height:.42rem;border-radius:50%}
.seg button.tone-fail::before{background:var(--fail)} .seg button.tone-warn::before{background:var(--warn)}
.seg-sep{width:1px;align-self:stretch;background:var(--rule);margin:0 var(--space-3)}

/* the table: compact rows, the bus cell two lines, detail in cards below its row */
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:var(--fs-sm)}
th{font:500 var(--fs-xs)/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;padding:var(--space-3) var(--space-4) var(--space-2);border-bottom:1px solid var(--rule);white-space:nowrap}
td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--rule);vertical-align:top}
tr.row{cursor:pointer}
tr.row:hover{background:var(--tint)}
tr.row>td:first-child{border-left:3px solid transparent}
tr.row.is-down>td:first-child{border-left-color:var(--fail)}
.bus-line{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.bus-toggle{display:inline-flex;align-items:center;gap:var(--space-2);min-height:1.5rem;background:none;border:0;padding:0;color:var(--ink);font:600 var(--fs-md) var(--sans);cursor:pointer;text-align:left;white-space:nowrap}
.bus-toggle:hover .bus-name{color:var(--accent-ink)}
.caret{display:inline-block;width:0;height:0;border-left:.35rem solid var(--muted);border-top:.3rem solid transparent;border-bottom:.3rem solid transparent;transition:transform .15s}
.bus-toggle[aria-expanded="true"] .caret{transform:rotate(90deg)}
/* the meta line: muted, mixed a fifth towards the ink so it reads at 4.5:1 or better on the page and on a row's tint */
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3);margin-top:var(--space-1);padding-left:var(--space-4);color:color-mix(in srgb,var(--muted) 80%,var(--ink));font-size:var(--fs-xs)}
.num{font-family:var(--mono);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;white-space:nowrap}
td.empty .muted{font-size:var(--fs-xs)}
.behind{color:color-mix(in srgb,var(--warn) 70%,var(--ink));font:500 var(--fs-xs) var(--mono);margin-left:var(--space-2);white-space:nowrap}
tr.details>td{background:var(--bg);padding:var(--space-4);border-left:3px solid var(--rule)}
/* dense: a wide card leaves no hole, the next narrow one takes it */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));grid-auto-flow:dense;gap:var(--space-4)}
.card{background:var(--surface);border:1px solid var(--rule);padding:var(--space-4);min-width:0;container-type:inline-size}
.card h3{font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-2)}
.card dl{display:grid;grid-template-columns:fit-content(40%) minmax(0,1fr);gap:var(--space-1) var(--space-3);margin:0}
.card dt{color:var(--muted);overflow-wrap:break-word}
.card dd{margin:0;overflow-wrap:break-word}
.card p.empty{margin:0;color:var(--muted)}
/* a narrow card (a phone, or three to a row on a tablet): each label above its value, the value the card's full width */
@container (max-width: 18rem){.card dl,.card.usage dl{grid-template-columns:minmax(0,1fr);gap:0}.card dd{margin-bottom:var(--space-2)}}
/* the usage card's values are short numbers: its labels get the room, its values enough for a date */
.card.usage dl{grid-template-columns:minmax(0,max-content) minmax(9.5rem,1fr)}
/* a date or a domain never breaks inside */
.tok{white-space:nowrap}
.tok.code{font-family:var(--mono);font-size:.92em}
/* a command to copy: one line, scrolling inside its block */
.card pre.cmd{margin:var(--space-2) 0 0;padding:var(--space-2) var(--space-3);background:var(--bg);border:1px solid var(--rule);border-radius:var(--radius);overflow-x:auto;white-space:pre;font:400 var(--fs-xs)/1.5 var(--mono)}
.cmd-bar{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-2)}
.cmd-bar .copied{font-size:var(--fs-xs);color:var(--muted)}
/* the limits card is wide where there's room: its lines are long */
@media (min-width: 72rem){.card.wide{grid-column:span 2}}
/* the nearest limit: one line */
td.col-limit .num{white-space:nowrap}
.panel p.note:empty{display:none}
.card.flag-notice{border-left:3px solid var(--warn)}
.card.flag-ended{border-left:3px solid var(--fail)}
.card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin-top:var(--space-4)}
.card-foot .result{flex:1 1 100%;order:-1}
.card-foot .push{margin-left:auto}
tr.skeleton td{cursor:default}
.sk{display:block;height:.9rem;background:color-mix(in srgb,var(--ink) 10%,transparent);border-radius:var(--radius)}
/* F7: a limit's share and state on a chip from 70% (warning) and 90% (alert), the status chips' tones */
.limit-warning,.limit-alert{font-weight:600;padding:0 var(--space-1);border-radius:var(--radius);white-space:nowrap;color:color-mix(in srgb,var(--chip-fg) 70%,var(--ink))}
.limit-warning{--chip-fg:var(--warn);background:var(--warn-bg)}
.limit-alert{--chip-fg:var(--fail);background:var(--fail-bg)}
.card p.note{margin:var(--space-2) 0;color:var(--muted);font-size:var(--fs-xs)}
td.no-match{color:var(--muted);padding:var(--space-6) var(--space-4)}
.sk-long{width:14rem;max-width:100%}
.sk-short{width:6rem}

/* the new customer form: its fields in two columns from 40rem, notes and buttons across both */
#new-customer{border:1px solid var(--rule);background:var(--surface);padding:var(--space-4);margin:var(--space-4) 0}
#new-customer h2{margin-bottom:var(--space-2)}
#new-form{display:grid;gap:var(--space-2) var(--space-6)}
#new-form>p{grid-column:1 / -1;margin:var(--space-1) 0}
#new-form>p:last-child{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-3)}
form label{display:block;font-size:var(--fs-sm);color:var(--muted)}
form input,form select{display:block;margin-top:var(--space-1);color:var(--ink)}
input,select{font:inherit;min-height:2.5rem;width:min(24rem,100%);padding:var(--space-1) var(--space-2);border:1px solid color-mix(in srgb,var(--ink) 45%,transparent);border-radius:var(--radius);background:var(--bg);color:inherit}
input[type=file]{padding:var(--space-1) var(--space-2);color:var(--muted)}
/* the file input's own button, as the outline buttons (the input stays the native, accessible one) */
input[type=file]::file-selector-button{font:700 var(--fs-sm) var(--sans);min-height:2rem;margin-right:var(--space-3);padding:0 var(--space-3);border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);border-radius:var(--radius);background:transparent;color:var(--ink);cursor:pointer}
input[type=file]::file-selector-button:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
@media (min-width: 40rem){#new-form{grid-template-columns:repeat(2,minmax(0,1fr))}}
#new-form button[type=submit]{display:inline-flex;align-items:center;font:700 var(--fs-sm) var(--sans);height:2.5rem;padding:0 var(--space-5);border-radius:var(--radius);border:1px solid transparent;cursor:pointer}
.foot-signout{display:none}

/* below 78rem the fleet table (only it: the Docs' tables keep their layout and scroll) doesn't fit its columns: no table. Each bus a list item (name and health, then its meta, then
   version, traffic and cost when there are any), its cards below it when open; nothing scrolls sideways */
@media (max-width: 78rem){
  #table-wrap.scroll{overflow:visible}
  :where(#fleet,#fleet thead,#fleet tbody,#fleet tr,#fleet td){display:block;width:100%}
  :where(#fleet thead){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  tr.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--rule)}
  tr.row>td{border:0;padding:0}
  tr.row>td:first-child{border-left:0}
  tr.row.is-down{box-shadow:-3px 0 0 var(--fail)}
  tr.row>td.col-bus{grid-column:1;grid-row:1 / span 2}
  tr.row>td.col-health{grid-column:2;grid-row:1;justify-self:end}
  tr.row>td.col-version,tr.row>td.col-traffic,tr.row>td.col-limit,tr.row>td.col-cost{grid-column:1 / -1;padding-left:var(--space-4);font-size:var(--fs-xs)}
  tr.row>td.empty{display:none}
  /* the nearest limit beside its label, as the other cells: its value wraps at its spaces, the share's chip whole */
  tr.row>td.col-limit .num{white-space:normal}
  tr.row>td[data-label]:not(.col-bus):not(.col-health)::before{content:attr(data-label) " ";color:var(--muted);font:500 var(--fs-xs) var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-right:var(--space-2)}
  .bus-toggle{white-space:normal;overflow-wrap:anywhere;min-height:2.75rem}
  tr.details>td{padding:var(--space-3) 0 var(--space-4);border-left:0;background:none}
  tr.skeleton{display:flex;justify-content:space-between;padding:var(--space-3) 0}
  tr.skeleton td{border:0;padding:0;width:auto}
}

/* phones: one-column cards, the strip scrolling inside itself, header controls 44px, Sign out at the bottom */
@media (max-width: 40rem){
  .top-in{padding:var(--space-2) var(--space-4);gap:var(--space-2)}
  .top-in .who,#sign-out{display:none!important}
  #refresh{width:2.75rem;height:2.75rem;padding:0}
  #refresh .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  main{padding:var(--space-4) var(--space-4) var(--space-8)}
  .btn,.btn-quiet{min-height:2.75rem}
  .seg button{min-height:2.75rem}
  .seg-sep{display:none}
  .cards{grid-template-columns:minmax(0,1fr)}
  .foot-signout{display:block;margin-top:var(--space-8)}
}

/* ------------------------------------------------------------------ areas and the Docs (the handbook) */
/* the skip link: first in the page, shown when it has the focus */
.skip{position:absolute;left:var(--space-4);top:-3rem;z-index:10;background:var(--surface);color:var(--accent-ink);padding:var(--space-2) var(--space-3);border:1px solid var(--rule);font-weight:700}
.skip:focus{top:var(--space-2)}
main:focus{outline:none}
/* the areas in the header: the current one in weight and a 3px underline, never colour alone */
.areas{display:flex;align-items:stretch;gap:var(--space-4);margin-right:auto}
.areas a,.area-menu nav a{display:inline-flex;align-items:center;gap:var(--space-2);min-height:2.5rem;color:var(--ink);font-weight:500;border-bottom:3px solid transparent;text-decoration:none}
.areas a:hover,.area-menu nav a:hover{color:var(--accent-ink)}
.areas a[aria-current="page"],.area-menu nav a[aria-current="page"]{font-weight:700;border-bottom-color:var(--accent-ink)}
.areas~.who{margin-left:0}
.top-in:has(.areas:not([hidden])) .wordmark{margin-right:var(--space-4)}
/* what needs you, counted on the Fleet link: a number on the status chip's colours, its words for screen readers */
.count{font:600 var(--fs-xs)/1 var(--mono);padding:var(--space-1) var(--space-2);border-radius:var(--radius)}
.count.c-warn{color:color-mix(in srgb,var(--warn) 70%,var(--ink));background:var(--warn-bg)}
.count.c-fail{color:color-mix(in srgb,var(--fail) 70%,var(--ink));background:var(--fail-bg)}
.menu-toggle{display:none}
.caret-down{font-size:var(--fs-xs)}
.area-menu{border-top:1px solid var(--rule);background:var(--surface);padding:var(--space-2) var(--space-4) var(--space-4);display:grid;gap:var(--space-2)}
.area-menu nav{display:grid}
.area-menu nav a{min-height:2.75rem;border-bottom:1px solid var(--rule)}
.area-menu nav a[aria-current="page"]{border-bottom:3px solid var(--accent-ink)}
.area-menu .who{max-width:none;margin:0}
.area-menu .btn-quiet{min-height:2.75rem}

/* the Docs: a rail (search, the handbook's groups) and the article, a reading column of about 70 characters */
.docs{display:grid;grid-template-columns:16rem minmax(0,1fr);gap:var(--space-8);align-items:start}
.docs-side{position:sticky;top:var(--space-4);max-height:calc(100vh - 2rem);overflow-y:auto;display:grid;gap:var(--space-4);align-content:start}
.docs-search{position:relative}
.docs-search input{width:100%}
.docs-results{list-style:none;margin:var(--space-1) 0 0;padding:0;border:1px solid var(--rule);background:var(--surface);position:absolute;left:0;right:0;z-index:5;max-height:24rem;overflow-y:auto}
.docs-results li{display:grid;gap:var(--space-hair);padding:var(--space-2) var(--space-3);border-top:1px solid var(--rule);cursor:pointer}
.docs-results li:first-child{border-top:0}
.docs-results li[aria-selected="true"],.docs-results li[role="option"]:hover{background:var(--tint)}
.docs-results .r-title{font-weight:600}
.docs-results .r-snippet{color:var(--muted);font-size:var(--fs-xs)}
.docs-results li.no-results{cursor:default;color:var(--muted)}
.docs-menu>summary{display:none}
.docs-rail{display:grid;gap:var(--space-4)}
.rail-title{margin:0 0 var(--space-1);font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
summary.rail-title{cursor:pointer}
.docs-rail ul{list-style:none;margin:0;padding:0;display:grid}
.docs-rail a{display:block;padding:var(--space-1) 0;color:var(--ink);border-left:3px solid transparent;padding-left:var(--space-2)}
.docs-rail a:hover{color:var(--accent-ink)}
.docs-rail a[aria-current="page"]{font-weight:700;border-left-color:var(--accent-ink)}
.docs-rail li.indent a{padding-left:var(--space-5)}
.docs-article{max-width:70ch;min-width:0}
.docs-article .eyebrow{margin:0 0 var(--space-1);font:500 var(--fs-xs)/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.docs-article h1{margin-bottom:var(--space-2)}
.docs-article h2{margin:var(--space-8) 0 var(--space-2)}
.docs-article h3,.docs-article h4,.docs-article h5,.docs-article h6{margin:var(--space-6) 0 var(--space-2);font-size:var(--fs-md)}
.docs-article h2:focus,.docs-article h3:focus,.docs-article h4:focus{outline:2px solid var(--accent-ink);outline-offset:2px}
.docs-article p,.docs-article ul,.docs-article ol,.docs-article blockquote{margin:var(--space-3) 0}
.docs-article li+li{margin-top:var(--space-1)}
.docs-article li>p{margin:var(--space-1) 0}
.docs-article a{text-decoration:underline;text-underline-offset:2px}
.docs-article code{font:400 .92em var(--mono);overflow-wrap:anywhere}
.docs-article p.note{margin:var(--space-1) 0}
.docs-article .facts{margin-bottom:var(--space-4)}
.docs-article blockquote{border-left:3px solid var(--rule);padding-left:var(--space-4);color:var(--muted)}
.docs-article hr{border:0;border-top:1px solid var(--rule);margin:var(--space-6) 0}
.docs-article .table-wrap{overflow-x:auto;margin:var(--space-3) 0}
.docs-article table{font-size:var(--fs-sm)}
.docs-article th{font:600 var(--fs-xs)/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);white-space:normal}
.docs-article td,.docs-article th{padding:var(--space-2) var(--space-3)}
.docs-article .al-center{text-align:center}
.docs-article .al-right{text-align:right}
/* commands: the console's command block, outside the cards too; Copy command under each */
.cmd-block{margin:var(--space-3) 0}
.docs-article pre.cmd{margin:0;padding:var(--space-2) var(--space-3);background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);overflow-x:auto;white-space:pre;font:400 var(--fs-xs)/1.5 var(--mono)}
.docs-article pre.cmd code{overflow-wrap:normal}
/* a filled placeholder: marked by a dotted underline, the placeholder in its title */
mark.fill{background:none;color:inherit;text-decoration:underline dotted;text-underline-offset:3px;font-weight:600}
/* callouts: a text label first and a 3px rule; the label carries the meaning */
.callout{border-left:3px solid var(--note);background:var(--surface);padding:var(--space-3) var(--space-4);margin:var(--space-4) 0}
.callout>p:first-of-type{margin-top:0}
.callout>:last-child{margin-bottom:0}
.callout-label{font:600 var(--fs-xs)/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;margin:0 0 var(--space-1)!important}
.callout-warning,.callout-caution,.callout-production{border-left-color:var(--warn)}
.callout-planned{border-left-color:var(--pending)}
/* the bus strip: which bus the placeholders are filled for */
.bus-strip{border-left:3px solid var(--warn);padding:var(--space-3) var(--space-4);gap:var(--space-2);grid-template-columns:minmax(0,1fr) auto;align-items:center;justify-items:stretch}
.bus-strip .acts{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}
.on-this-page{margin:var(--space-3) 0;font-size:var(--fs-sm)}
.print-page{margin-top:var(--space-8)}
.print-only{display:none}
.sk-lines{display:grid;gap:var(--space-3);padding:var(--space-4) 0}
/* the architecture maps: the article full width, the map in a frame as tall as its page, its tables after it */
.docs-article.wide{max-width:none}
.arch-controls{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;margin:var(--space-3) 0}
.skip-map{text-decoration:underline;text-underline-offset:2px}
.arch-frame{display:block;width:100%;min-height:24rem;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface)}
.arch-after:focus{outline:2px solid var(--accent-ink);outline-offset:2px}
.arch-tables{display:grid;gap:var(--space-6);margin-top:var(--space-4)}
.arch-tables caption{text-align:left;font-weight:700;padding:var(--space-2) var(--space-3)}
.arch-tables td{vertical-align:top}
.arch-tables ul{margin:0;padding-left:var(--space-4)}
.runbook{margin-left:var(--space-2);font-size:var(--fs-xs);min-height:auto}
td.col-limit a.limit-warning,td.col-limit a.limit-alert,.card a.limit-warning,.card a.limit-alert{text-decoration:underline;text-underline-offset:2px}

/* below 64rem: the areas in a menu (no bottom bar); the Docs one column, search on top, the rail folded */
@media (max-width: 63.98rem){
  .areas{display:none!important}
  .menu-toggle{display:inline-flex;min-height:2.75rem}
  .top-in:has(.menu-toggle:not([hidden])) :is(#who,#sign-out){display:none!important}
  .docs{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
  .docs-side{position:static;max-height:none;overflow:visible}
  .docs-menu>summary{display:list-item;cursor:pointer;min-height:2.75rem;padding:var(--space-2) 0;font-weight:600}
  .docs-rail a{min-height:2.75rem;display:flex;align-items:center}
  .bus-strip{grid-template-columns:minmax(0,1fr)}
}

/* print: the page and its facts, the bus filled in; no controls; link addresses written out */
@media print{
  .top,.skip,.docs-side,.cmd-bar,.print-page,.bus-strip .acts,#status,.foot-signout{display:none!important}
  .docs{display:block}
  .docs-article{max-width:none}
  .arch-controls,.arch-outline{display:none!important}
  .arch-frame{min-height:0;border:0}
  /* the map's content on paper: always its tables (whether a browser splits the frame or not) */
  .arch-tables{display:grid!important}
  .print-only{display:block;color:var(--muted);font-size:var(--fs-xs)}
  .scroll,.table-wrap,pre.cmd{overflow:visible!important;white-space:pre-wrap}
  .docs-article a[href^="http"]::after{content:" (" attr(href) ")"}
}
/* the areas name where you are: the wordmark's own label steps back then */
.top-in:has(.areas:not([hidden])) .product,.top-in:has(.menu-toggle:not([hidden])) .product{display:none}
.menu-toggle .count{margin-left:var(--space-2)}
/* a search result is a link (a middle click opens a tab); the whole option is its target */
.docs-results li[role="option"]>a{display:grid;gap:var(--space-hair);color:inherit;text-decoration:none}
.docs-results li[aria-disabled="true"]{cursor:default;color:var(--muted)}
/* phones: runbook links and linked limit chips are touch targets too */
@media (max-width: 40rem){
  .arch-controls .btn,.skip-map{display:inline-flex;align-items:center;min-height:2.75rem}
  .arch-frame{border:0;border-radius:0}
  .arch-outline a{display:inline-flex;align-items:center;min-height:2.75rem}
  a.runbook,a.runbook-kind,td.col-limit a.limit-warning,td.col-limit a.limit-alert,.card a.limit-warning,.card a.limit-alert{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem}
}

/* ------------------------------------------------------------------ Pipelines */
/* each pipeline a card in a list; from 40rem two or more to a row, below that stacked; nothing scrolls sideways */
.pipelines h2{margin:var(--space-6) 0 var(--space-3)}
.pipelines h3{margin:var(--space-4) 0 var(--space-2);font-size:var(--fs-md)}
.pipelines p.panel{display:block}
ul.pipes{list-style:none;margin:0;padding:0;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr))}
.pipe{display:grid;gap:var(--space-1);align-content:start}
.pipe p{margin:0;overflow-wrap:anywhere}
.pipe p:empty{display:none}
.pipe-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3)}
.pipe-target{font-family:var(--mono);font-size:var(--fs-xs)}
.pipe-title{font-weight:600}
.pipe-meta{color:color-mix(in srgb,var(--muted) 80%,var(--ink));font-size:var(--fs-xs)}
.pipe-link{justify-self:start;margin-top:var(--space-1)}
.pipe .sk{margin:var(--space-1) 0}
.count.c-pending{color:color-mix(in srgb,var(--pending) 70%,var(--ink));background:var(--pending-bg)}
@media (max-width: 40rem){
  ul.pipes{grid-template-columns:minmax(0,1fr)}
  a.pipe-link{display:inline-flex;align-items:center;min-height:2.75rem}
}

/* the Releases view: every core tag newest first, finals and candidates apart, and each bus's version */
.releases{display:block}
.releases .docs-article{max-width:none}
.rel-list{list-style:none;margin:0 0 var(--space-4);padding:0;display:grid;gap:var(--space-hair)}
.rel-list li{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);align-items:baseline;padding:var(--space-2) var(--space-3);border:1px solid var(--rule);background:var(--surface)}
.rel-list li.final strong{color:var(--ink)}
.rel-list li.rc{background:var(--tint)}
.rel-list li.rc strong{color:var(--muted)}
.rel-list .releases-text{color:var(--muted)}
.rel-list li.bus strong{font:500 var(--fs-sm)/1.4 var(--mono)}

/* ------------------------------------------------------------------ Infrastructure (AWS Org) */
/* each release a card in a list, like the pipelines' */
.org p.panel{display:block}
ul.org{grid-template-columns:repeat(auto-fill,minmax(20rem,1fr))}
.card.org{display:grid;gap:var(--space-1);align-content:start}
.card.org p{margin:0;overflow-wrap:anywhere}
.card.org p:empty{display:none}
.org-version{font-weight:600;font-family:var(--mono)}
a.org-version{color:var(--ink)}
.org .sk{margin:var(--space-1) 0}
@media (max-width: 40rem){
  ul.org{grid-template-columns:minmax(0,1fr)}
}