/* The fleet console's own page rules, on top of the vendored kit (hz.css,
   hz-icons.css), which is never edited here. A mockup draws a screen as an
   artboard of a fixed size; a page is the same .ab filling the window. The
   rules from the sign-in mockup's own <style> live here, as the console's
   policy allows no inline style. Colours only from the kit's tokens. */
html, body { margin: 0; padding: 0; }
.ab.page-root { min-height: 100vh; min-height: 100dvh; overflow: auto; }

/* w-fleet-signin */
.ab .fs-bd { padding: 28px 20px 32px; display: flex; justify-content: center; }
.ab .fs-card { width: 100%; max-width: 360px; }
.ab .fs-logo { width: 40px; height: 40px; }
.ab .fs-card form { margin: 0; }

/* A real field has real focus: the same ring as the mockup's .input.focus. */
.ab input.input { font: inherit; color: inherit; }
.ab input.input:focus-visible, .ab input.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent); }
.ab button.btn { cursor: pointer; }

/* ---- The workspace pages (Today, Hosts, Host, T3 Code, Rollout) ----------
   A page is the mockup's artboard filling the window, as the mockups' own
   ?fluid view draws it: the sidebar stays, the page area scrolls. */
.ab.console { width: 100vw; height: 100vh; height: 100dvh; }

/* The console as an installed app on a phone (F56). The page covers the
   whole screen (viewport-fit=cover), so the strip by the home indicator and
   the sides by the notch are drawn in the console's own paper, light or
   dark, and never in the window's colour (the manifest's, white); its
   content keeps clear of them. On a computer every inset is 0. */
.ab.console { box-sizing: border-box; padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
.ab.console .page { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
@container ab (max-width: 1023px) {
  .ab.console .page { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
.ab.page-root { box-sizing: border-box; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

/* The menu on a narrow screen. The mockups open it with a script; the
   console has none, so the menu link targets the sidebar (#nav) and the
   scrim's link clears the target. The same look as hz.css's .nav-open.
   The scrim is a named nav landmark holding its one link, which fills it,
   so nothing on the page sits outside a landmark with the menu open (axe:
   region). */
@container ab (max-width: 1023px) {
  .ab .side:target { display: flex; position: absolute; z-index: 31; top: 0; bottom: 0; left: 0; width: 264px; max-width: 86%; background: var(--paper); box-shadow: var(--shadow-pop); }
  .ab .side:target ~ .nav-scrim { display: block; position: absolute; inset: 0; z-index: 30; background: var(--scrim); }
}
.ab .nav-scrim > a { display: block; width: 100%; height: 100%; }

/* A touch screen: the mockups mark it .touch with a script; here the
   pointer says so. The same rules as hz.css's .touch. */
@media (pointer: coarse) {
  .ab :is(.btn, .link, a.small, .search) { position: relative; }
  .ab :is(.btn, .tab, .link, a.small, .search)::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
  .ab .nv { padding-top: 16px; padding-bottom: 16px; }
}

/* Signing out sits in the sidebar's foot, where the mockup has Settings. */
.ab .fl-out { margin: 0; }
.ab button.nv { width: 100%; border: 0; background: none; cursor: pointer; text-align: left; }

/* A panel or a row that opens a page is a link: the mockups' data-go. */
.ab a.fl-panel-link { display: block; }
.ab a.fl-panel-link:hover { border-color: var(--ink-35); }
.ab a.row { color: inherit; }

/* The mockups' inline border between a panel's parts, and their spacing. */
.ab .fl-rule { border-top: 1px solid var(--ink-08); }
.ab .fl-note { margin-top: 8px; }

/* The power choice: real radio buttons, drawn as the kit's .radio. */
.ab .fl-choice { margin: 0; }
.ab input.radio { appearance: none; -webkit-appearance: none; margin: 0; background: var(--paper); cursor: pointer; }
.ab input.radio:checked { border-color: var(--ink); background: radial-gradient(circle, var(--ink) 0 4px, transparent 4.5px); }
.ab input.radio:disabled { opacity: 0.4; cursor: default; }
.ab input.radio:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink), 0 0 0 4px var(--accent), 0 0 0 7px var(--accent-soft); }
.ab label.fl-option { cursor: pointer; }
.ab label.fl-option:has(> input:checked) { background: var(--ink-08); }
.ab label.fl-option:has(> input:disabled) { cursor: default; }
.ab .fl-option .ttl, .ab .fl-option .meta { display: block; }

/* Each screen's own layout rules, from its mockup's style block, scoped
   the way the mockups' build scopes them (.ab[data-screen="..."]), so they
   win over hz.css exactly as they do in the mockups. */
/* w-fleet-today */
.ab[data-screen="w-fleet-today"] .ft-tag { width: 74px; flex: none; justify-content: center; }

/* w-fleet-hosts */
.ab[data-screen="w-fleet-hosts"] .hs-bar { width: 96px; margin-top: 7px; }
.ab[data-screen="w-fleet-hosts"] .hs-tbl td { vertical-align: top; }

/* w-fleet-host */
.ab[data-screen="w-fleet-host"] .hd-sub { padding-bottom: 0; }
.ab[data-screen="w-fleet-host"] .hd-log { margin-top: 8px; }
@container ab (max-width: 479px) {
  .ab[data-screen="w-fleet-host"] .proj .rowx { flex-wrap: wrap; row-gap: 6px; }
}

/* w-fleet-t3code */
.ab[data-screen="w-fleet-t3code"] .t3-tbl td { vertical-align: top; }
@container ab (max-width: 759px) {
  .ab[data-screen="w-fleet-t3code"] .t3-stage { grid-auto-columns: minmax(0, 1fr); overflow-x: visible; }
}

/* w-fleet-rollout */
@container ab (max-width: 759px) {
  .ab[data-screen="w-fleet-rollout"] .ro-pipe .p { flex-direction: column; align-items: stretch; }
}

/* The page's landmark: main holds the host header and the page, and takes
   no box of its own, so the workspace's column is the mockups'. */
.ab .fl-main { display: contents; }

/* The page scrolls, so a keyboard must reach it even when it holds no
   link (axe: scrollable-region-focusable, the gateway's Host page): it is
   a labelled region in the tab order, and its focus is the kit's inset
   ring, as a row's, since the page fills its column. */
.ab .page[tabindex]:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--ink), inset 0 0 0 2px var(--accent), inset 0 0 0 5px var(--accent-soft); }

/* A log's times: hz.css draws them in --ink-35, which on the log's ground
   is under WCAG's 4.5:1 for text (axe: color-contrast). The console draws
   them in --ink-62, about 6:1; to be proposed to the platform for the kit. */
.ab .log .t { color: var(--ink-62); }

/* A table on a narrow screen (hz.css): below the width it needs with every
   column its priority 2 columns go, then its priority 3 ones, then it
   becomes its phone list. The mockups' build writes these from data-fit;
   the widths here are the console's own tables', measured the same way. */
@container tblw (width < 900px) { .ab .fl-fit-hosts :is(th, td)[data-p="2"] { display: none; } }
@container tblw (width < 720px) { .ab .fl-fit-hosts :is(th, td):is([data-p="2"], [data-p="3"]) { display: none; } }
@container tblw (width < 560px) { .ab .fl-fit-hosts > .tbl { display: none; } .ab .fl-fit-hosts > .plist { display: flex; } }
@container tblw (width < 900px) { .ab .fl-fit-t3 :is(th, td)[data-p="2"] { display: none; } }
@container tblw (width < 720px) { .ab .fl-fit-t3 :is(th, td):is([data-p="2"], [data-p="3"]) { display: none; } }
@container tblw (width < 560px) { .ab .fl-fit-t3 > .tbl { display: none; } .ab .fl-fit-t3 > .plist { display: flex; } }

/* How full a .pbar is: the mockups write it as an inline width, which the
   console's content security policy does not allow. */
.ab .pbar > i.w0 { width: 0%; }
.ab .pbar > i.w1 { width: 1%; }
.ab .pbar > i.w2 { width: 2%; }
.ab .pbar > i.w3 { width: 3%; }
.ab .pbar > i.w4 { width: 4%; }
.ab .pbar > i.w5 { width: 5%; }
.ab .pbar > i.w6 { width: 6%; }
.ab .pbar > i.w7 { width: 7%; }
.ab .pbar > i.w8 { width: 8%; }
.ab .pbar > i.w9 { width: 9%; }
.ab .pbar > i.w10 { width: 10%; }
.ab .pbar > i.w11 { width: 11%; }
.ab .pbar > i.w12 { width: 12%; }
.ab .pbar > i.w13 { width: 13%; }
.ab .pbar > i.w14 { width: 14%; }
.ab .pbar > i.w15 { width: 15%; }
.ab .pbar > i.w16 { width: 16%; }
.ab .pbar > i.w17 { width: 17%; }
.ab .pbar > i.w18 { width: 18%; }
.ab .pbar > i.w19 { width: 19%; }
.ab .pbar > i.w20 { width: 20%; }
.ab .pbar > i.w21 { width: 21%; }
.ab .pbar > i.w22 { width: 22%; }
.ab .pbar > i.w23 { width: 23%; }
.ab .pbar > i.w24 { width: 24%; }
.ab .pbar > i.w25 { width: 25%; }
.ab .pbar > i.w26 { width: 26%; }
.ab .pbar > i.w27 { width: 27%; }
.ab .pbar > i.w28 { width: 28%; }
.ab .pbar > i.w29 { width: 29%; }
.ab .pbar > i.w30 { width: 30%; }
.ab .pbar > i.w31 { width: 31%; }
.ab .pbar > i.w32 { width: 32%; }
.ab .pbar > i.w33 { width: 33%; }
.ab .pbar > i.w34 { width: 34%; }
.ab .pbar > i.w35 { width: 35%; }
.ab .pbar > i.w36 { width: 36%; }
.ab .pbar > i.w37 { width: 37%; }
.ab .pbar > i.w38 { width: 38%; }
.ab .pbar > i.w39 { width: 39%; }
.ab .pbar > i.w40 { width: 40%; }
.ab .pbar > i.w41 { width: 41%; }
.ab .pbar > i.w42 { width: 42%; }
.ab .pbar > i.w43 { width: 43%; }
.ab .pbar > i.w44 { width: 44%; }
.ab .pbar > i.w45 { width: 45%; }
.ab .pbar > i.w46 { width: 46%; }
.ab .pbar > i.w47 { width: 47%; }
.ab .pbar > i.w48 { width: 48%; }
.ab .pbar > i.w49 { width: 49%; }
.ab .pbar > i.w50 { width: 50%; }
.ab .pbar > i.w51 { width: 51%; }
.ab .pbar > i.w52 { width: 52%; }
.ab .pbar > i.w53 { width: 53%; }
.ab .pbar > i.w54 { width: 54%; }
.ab .pbar > i.w55 { width: 55%; }
.ab .pbar > i.w56 { width: 56%; }
.ab .pbar > i.w57 { width: 57%; }
.ab .pbar > i.w58 { width: 58%; }
.ab .pbar > i.w59 { width: 59%; }
.ab .pbar > i.w60 { width: 60%; }
.ab .pbar > i.w61 { width: 61%; }
.ab .pbar > i.w62 { width: 62%; }
.ab .pbar > i.w63 { width: 63%; }
.ab .pbar > i.w64 { width: 64%; }
.ab .pbar > i.w65 { width: 65%; }
.ab .pbar > i.w66 { width: 66%; }
.ab .pbar > i.w67 { width: 67%; }
.ab .pbar > i.w68 { width: 68%; }
.ab .pbar > i.w69 { width: 69%; }
.ab .pbar > i.w70 { width: 70%; }
.ab .pbar > i.w71 { width: 71%; }
.ab .pbar > i.w72 { width: 72%; }
.ab .pbar > i.w73 { width: 73%; }
.ab .pbar > i.w74 { width: 74%; }
.ab .pbar > i.w75 { width: 75%; }
.ab .pbar > i.w76 { width: 76%; }
.ab .pbar > i.w77 { width: 77%; }
.ab .pbar > i.w78 { width: 78%; }
.ab .pbar > i.w79 { width: 79%; }
.ab .pbar > i.w80 { width: 80%; }
.ab .pbar > i.w81 { width: 81%; }
.ab .pbar > i.w82 { width: 82%; }
.ab .pbar > i.w83 { width: 83%; }
.ab .pbar > i.w84 { width: 84%; }
.ab .pbar > i.w85 { width: 85%; }
.ab .pbar > i.w86 { width: 86%; }
.ab .pbar > i.w87 { width: 87%; }
.ab .pbar > i.w88 { width: 88%; }
.ab .pbar > i.w89 { width: 89%; }
.ab .pbar > i.w90 { width: 90%; }
.ab .pbar > i.w91 { width: 91%; }
.ab .pbar > i.w92 { width: 92%; }
.ab .pbar > i.w93 { width: 93%; }
.ab .pbar > i.w94 { width: 94%; }
.ab .pbar > i.w95 { width: 95%; }
.ab .pbar > i.w96 { width: 96%; }
.ab .pbar > i.w97 { width: 97%; }
.ab .pbar > i.w98 { width: 98%; }
.ab .pbar > i.w99 { width: 99%; }
.ab .pbar > i.w100 { width: 100%; }

/* A reading kept from before a host stopped answering is greyed, its bar too. */
.ab .muted .pbar > i { background: var(--ink-35); }