/* ==========================================================================
   The foundation stylesheet. Shared by every application in this repository.

   Organisation, in this order and no other:
     1. Tokens          every colour, size, weight and length, as a custom property
     2. Typefaces       self-hosted IBM Plex Sans and IBM Plex Sans Condensed
     3. Elements        plain HTML, styled once
     4. Shell           the rail, the phone bar, the screen header
     5. Components      each built once, named with one class prefix

   Nothing below section 1 names a literal colour or size. A test refuses
   one appearing. See docs/interface.md for what each token and component
   is for and when to use it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour. Six values, then the age scale. */
  --color-ground: #EDEFEE;        /* the page: painted steel, cool off-white */
  --color-surface: #FFFFFF;       /* tables, panels, controls */
  --color-ink: #1C2429;           /* primary text */
  --color-muted: #5F6A66;         /* secondary text, borders of controls */
  --color-copper: #A8511F;        /* the primary action, the current place */
  --color-rule: #CFD4D2;          /* hairline rules between rows */
  --color-age-recent: #2F6B4F;    /* confirmed recently */
  --color-age-aging: #7F6014;     /* aging */
  --color-age-stale: #9A3412;     /* stale or overdue */
  --color-on-copper: #FFFFFF;     /* text on a copper action */
  --color-on-ink: #FFFFFF;        /* text on an ink surface */

  /* Type. One family, one scale with real steps. */
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-condensed: "IBM Plex Sans Condensed", "IBM Plex Sans", "Arial Narrow", Arial, system-ui, sans-serif;
  --text-1: 0.75rem;     /* 12: notes under a control */
  --text-2: 0.8125rem;   /* 13: dense table cells, rail counts */
  --text-3: 0.875rem;    /* 14: table cells, secondary lines, desktop controls */
  --text-4: 1rem;        /* 16: body, controls on a phone */
  --text-5: 1.125rem;    /* 18: a row's leading fact on a phone */
  --text-6: 1.375rem;    /* 22: the screen title */
  --text-7: 1.75rem;     /* 28: an identifier as printed on a label */
  --leading-tight: 1.25;
  --leading: 1.45;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Space. */
  --space-1: 0.125rem;   /* 2 */
  --space-2: 0.25rem;    /* 4 */
  --space-3: 0.5rem;     /* 8 */
  --space-4: 0.75rem;    /* 12 */
  --space-5: 1rem;       /* 16 */
  --space-6: 1.5rem;     /* 24 */
  --space-7: 2rem;       /* 32 */
  --space-8: 3rem;       /* 48 */

  /* Rules. */
  --rule-hair: 1px;
  --rule-strong: 2px;
  --rule-heavy: 3px;

  /* Shape. Controls are barely rounded; nothing else is rounded at all. */
  --radius-control: 2px;

  /* Layout. */
  --rail-width: 15rem;
  --bar-height: 3.5rem;
  --target: 3rem;            /* the smallest control a gloved hand presses: 48 */
  --measure: 40rem;          /* a form's or a paragraph's width */
  --age-bar-width: 4.5rem;

  /* Focus. */
  --focus-ring: var(--rule-strong) solid var(--color-ink);
  --focus-offset: var(--space-1);
}

/* --------------------------------------------------------------------------
   2. Typefaces. Self-hosted; swap so text is readable before they arrive.
   -------------------------------------------------------------------------- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSans-Italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/IBMPlexSans-Bold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSansCondensed-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexSansCondensed-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSansCondensed-SemiBold.woff2") format("woff2"); }

/* --------------------------------------------------------------------------
   3. Elements
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-sans);
  font-size: 100%;
  line-height: var(--leading);
  color: var(--color-ink);
  background: var(--color-ground);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  font-size: var(--text-4);
  overflow-x: clip;
}

h1, h2, h3 {
  margin: 0;
  line-height: var(--leading-tight);
  font-weight: var(--weight-semibold);
}
h1 { font-family: var(--font-condensed); font-size: var(--text-6); }
h2 { font-size: var(--text-5); margin-top: var(--space-6); margin-bottom: var(--space-3); }
h3 { font-size: var(--text-4); margin-top: var(--space-5); margin-bottom: var(--space-2); }

p { margin: 0 0 var(--space-4); max-width: var(--measure); }
ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
small, .note { font-size: var(--text-2); color: var(--color-muted); }
strong { font-weight: var(--weight-semibold); }
hr { border: 0; border-top: var(--rule-hair) solid var(--color-rule); margin: var(--space-6) 0; }
img, svg { max-width: 100%; height: auto; }

a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: var(--rule-hair); }
a:hover { text-decoration-thickness: var(--rule-strong); }

code, kbd { font-family: var(--font-sans); font-variant-numeric: tabular-nums lining-nums; }

table { border-collapse: collapse; border-spacing: 0; }

/* Numbers that are compared or aligned. */
.num, td.num, th.num, .count, time { font-variant-numeric: tabular-nums lining-nums; }
td.num, th.num { text-align: right; }

/* Every interactive element shows where the keyboard is. */
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Motion happens only in answer to a person, never on load; and not at all
   for someone who asked for less of it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. Shell: rail, phone bar, screen header
   -------------------------------------------------------------------------- */
.shell { display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); min-height: 100vh; }

.skip {
  position: absolute; left: var(--space-3); top: var(--space-3); z-index: 3;
  padding: var(--space-3) var(--space-4); background: var(--color-surface); color: var(--color-ink);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* The rail. */
.rail {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border-right: var(--rule-hair) solid var(--color-rule);
  overflow-y: auto;
}
.rail-brand { padding: var(--space-5) var(--space-5) var(--space-4); border-bottom: var(--rule-hair) solid var(--color-rule); }
.rail-product { display: block; font-family: var(--font-condensed); font-weight: var(--weight-semibold); font-size: var(--text-5); color: var(--color-ink); text-decoration: none; }
.rail-company { display: block; font-size: var(--text-2); color: var(--color-muted); }
.rail-search { display: flex; gap: var(--space-2); padding: var(--space-4) var(--space-5) 0; }
.rail-search .control { flex: 1 1 auto; min-width: 0; }
.rail-search .button { flex: 0 0 auto; padding-left: var(--space-4); padding-right: var(--space-4); }
.rail-list { list-style: none; margin: 0; padding: var(--space-3) 0; }
.rail-group { padding: var(--space-4) var(--space-5) var(--space-2); font-size: var(--text-2); color: var(--color-muted); }
.rail-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--target); padding: var(--space-3) var(--space-5);
  color: var(--color-ink); text-decoration: none; font-weight: var(--weight-medium);
  border-left: var(--rule-heavy) solid transparent;
}
a.rail-item:hover { background: var(--color-ground); }
.rail-item.is-current { border-left-color: var(--color-copper); color: var(--color-copper); }
.rail-item.is-unbuilt { color: var(--color-muted); font-weight: var(--weight-regular); }
.rail-count { font-size: var(--text-2); font-weight: var(--weight-semibold); min-width: 1.75rem; text-align: right; }
.rail-count.is-none { font-weight: var(--weight-regular); color: var(--color-muted); }
.rail-foot { margin-top: auto; padding: var(--space-4) var(--space-5) var(--space-5); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-3); }
.rail-person { font-weight: var(--weight-medium); }
.rail-tenant { color: var(--color-muted); }
.rail-apps { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.rail-apps li { min-height: var(--target); display: flex; align-items: center; }
.rail-apps .is-unavailable { color: var(--color-muted); }
.rail-signout { margin-top: var(--space-3); }

/* The content column. */
.content { min-width: 0; display: flex; flex-direction: column; }
.screen-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5);
  padding: var(--space-5) var(--space-6) var(--space-4);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.screen-title { flex: 1 1 auto; min-width: 0; }
.screen-asof { font-size: var(--text-2); color: var(--color-muted); }
.screen { padding: var(--space-5) var(--space-6) var(--space-8); }

/* The phone bar and the phone menu exist only on a phone. */
.bar, .menu { display: none; }

@media (max-width: 44.9375rem) {
  .shell { display: block; }
  .rail { display: none; }
  .content { padding-bottom: var(--bar-height); }
  .screen-head { padding: var(--space-4) var(--space-4) var(--space-3); }
  .screen { padding: var(--space-4) var(--space-4) var(--space-7); }
  .screen-title { font-size: var(--text-6); }
  .bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    height: var(--bar-height);
    background: var(--color-surface); border-top: var(--rule-hair) solid var(--color-rule);
  }
  .bar-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
    min-height: var(--target); padding: var(--space-2) var(--space-1);
    color: var(--color-ink); text-decoration: none; font-size: var(--text-1); line-height: var(--leading-tight); text-align: center;
    border-top: var(--rule-heavy) solid transparent;
  }
  .bar-item.is-current { border-top-color: var(--color-copper); color: var(--color-copper); }
  .bar-item.is-unbuilt { color: var(--color-muted); }
  .bar-count { font-size: var(--text-4); font-weight: var(--weight-semibold); }
  .bar-count.is-none { font-weight: var(--weight-regular); color: var(--color-muted); }
  .menu { display: block; flex: 0 0 100%; }
  .menu > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: var(--target);
    padding: 0 var(--space-3); margin-left: calc(-1 * var(--space-3)); font-weight: var(--weight-medium);
  }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu[open] > summary { color: var(--color-copper); }
  .menu .rail-search { background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); border-bottom: 0; margin-top: var(--space-2); padding-bottom: var(--space-4); }
  .menu .rail-search + .rail-list { margin-top: 0; }
  .menu .rail-list { background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); margin-top: var(--space-2); }
  .menu .rail-foot { background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); border-top: 0; }
}

/* --------------------------------------------------------------------------
   5. Components
   -------------------------------------------------------------------------- */

/* Age indicator: the signature. A short bar and the age in words, always both. */
.age { display: inline-flex; align-items: center; gap: var(--space-3); white-space: nowrap; font-size: var(--text-3); }
.age-bar { display: inline-block; width: var(--age-bar-width); height: var(--space-3); background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); }
.age-fill { display: block; height: 100%; width: var(--age-fill, 0%); }
.age-recent .age-fill { background: var(--color-age-recent); }
.age-aging .age-fill { background: var(--color-age-aging); }
.age-stale .age-fill { background: var(--color-age-stale); }
.age-never .age-fill { background: var(--color-age-stale); }
.age-words { font-variant-numeric: tabular-nums lining-nums; }
.age-recent .age-words { color: var(--color-age-recent); }
.age-aging .age-words { color: var(--color-age-aging); }
.age-stale .age-words, .age-never .age-words { color: var(--color-age-stale); }
.age-lead { font-size: var(--text-4); }
.age-lead .age-bar { width: calc(var(--age-bar-width) * 1.5); height: var(--space-4); }
td .age { font-size: var(--text-2); }

/* Data table: dense, ruled, aligned. Scrolls inside its own box, never the page. */
.table-wrap { position: relative; overflow-x: auto; background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); max-width: 100%; }
.data { width: 100%; font-size: var(--text-3); }
.data th, .data td { padding: var(--space-2) var(--space-4); text-align: left; vertical-align: top; border-bottom: var(--rule-hair) solid var(--color-rule); }
.data thead th { font-family: var(--font-condensed); font-weight: var(--weight-semibold); font-size: var(--text-3); color: var(--color-ink); border-bottom: var(--rule-strong) solid var(--color-ink); white-space: nowrap; }
.data tbody tr:last-child td { border-bottom: 0; }
.data td.num, .data th.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.data td.secondary { color: var(--color-muted); }
.data .sub { display: block; font-size: var(--text-2); color: var(--color-muted); }
.data .cell-actions { white-space: nowrap; }
.data .cell-actions form { display: inline-block; margin: 0; }
.data .cell-actions .button { min-height: 2.25rem; padding-top: var(--space-1); padding-bottom: var(--space-1); }
.data tr.is-empty td { color: var(--color-muted); }
.sort { color: var(--color-ink); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.sort:hover { text-decoration: underline; }
.sort-mark { font-size: var(--text-1); }
.sort.is-active { color: var(--color-copper); }
th.num .sort { justify-content: flex-end; width: 100%; }
@media (max-width: 44.9375rem) {
  .data { font-size: var(--text-4); }
  .data th, .data td { padding: var(--space-3) var(--space-4); }
  .data thead th { font-size: var(--text-3); }
  .data .cell-actions .button { min-height: var(--target); }
  /* Stacked: each row becomes a block a thumb can read top to bottom.
     Cells carry their column name in data-label. */
  .data-stack, .data-stack tbody, .data-stack tr, .data-stack td { display: block; }
  .data-stack thead { display: none; }
  .data-stack tr { padding: var(--space-3) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .data-stack tbody tr:last-child { border-bottom: 0; }
  .data-stack td, .data-stack td.num { text-align: left; border-bottom: 0; padding: var(--space-1) var(--space-4); }
  .data-stack td[data-label]::before { content: attr(data-label); display: block; font-size: var(--text-2); color: var(--color-muted); }
  .data-stack td.cell-lead { font-size: var(--text-5); }
  .data-stack td .age { font-size: var(--text-4); }
  .data-stack tr.is-empty td { padding: var(--space-3) var(--space-4); }
}

/* Row link: the leading cell of a row that opens a record. */
.row-link { font-weight: var(--weight-medium); text-decoration: none; }
.row-link:hover { text-decoration: underline; }
@media (max-width: 44.9375rem) {
  /* On a phone the row's link is the thing a thumb presses: give it the full target height. */
  .data-stack .row-link { display: inline-flex; align-items: center; min-height: var(--target); }
}

/* The trail: each ancestor of a record, root first, as a link. */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) 0; margin: 0 0 var(--space-4); padding: 0; font-size: var(--text-3); }
.crumbs li { display: inline-flex; align-items: center; min-height: var(--target); }
.crumbs li + li::before { content: "\203A"; padding: 0 var(--space-3); color: var(--color-muted); }
.crumbs li[aria-current] { font-weight: var(--weight-medium); }

/* Messages: what happened, what to do. */
.message { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-5); background: var(--color-surface); border-left: var(--rule-heavy) solid var(--color-ink); max-width: var(--measure); }
.message-confirmation { border-left-color: var(--color-age-recent); }
.message-error { border-left-color: var(--color-age-stale); }
.message-notice { border-left-color: var(--color-age-aging); }
.message-mark { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: var(--space-1); }
.message-confirmation .message-mark { color: var(--color-age-recent); }
.message-error .message-mark { color: var(--color-age-stale); }
.message-notice .message-mark { color: var(--color-age-aging); }
.message-body { min-width: 0; }
.message-title { display: block; font-weight: var(--weight-semibold); }
.message p:last-child { margin-bottom: 0; }

/* Empty state: names the next action. */
.empty { padding: var(--space-6) var(--space-5); background: var(--color-surface); border: var(--rule-hair) dashed var(--color-muted); max-width: var(--measure); }
.empty p { margin-bottom: var(--space-4); }
.empty .button { margin-top: var(--space-2); }

/* Forms. */
.form { max-width: var(--measure); }
.field { display: block; margin: 0 0 var(--space-5); }
.field-label { display: block; font-weight: var(--weight-medium); margin-bottom: var(--space-2); }
.field-label .optional { font-weight: var(--weight-regular); color: var(--color-muted); }
.field-help { display: block; font-size: var(--text-2); color: var(--color-muted); margin-top: var(--space-2); }
.field-error { display: block; font-size: var(--text-3); color: var(--color-age-stale); font-weight: var(--weight-medium); margin-top: var(--space-2); }
.field.has-error .control { border-color: var(--color-age-stale); border-width: var(--rule-strong); }
.control {
  display: block; width: 100%; min-height: var(--target);
  padding: var(--space-3) var(--space-4);
  font: inherit; font-size: var(--text-4); color: var(--color-ink);
  background: var(--color-surface); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-control);
}
.control:disabled { color: var(--color-muted); background: var(--color-ground); }
select.control { padding-right: var(--space-6); }
textarea.control { min-height: calc(var(--target) * 2); resize: vertical; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0 var(--space-4); }
.check { display: flex; align-items: center; gap: var(--space-3); min-height: var(--target); cursor: pointer; }
.check input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--color-copper); }
.check-group { margin: 0 0 var(--space-4); }
.disclosure { margin: 0 0 var(--space-5); border-top: var(--rule-hair) solid var(--color-rule); }
.disclosure > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-3); min-height: var(--target); font-weight: var(--weight-medium); }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before { content: "+"; display: inline-block; width: 1em; text-align: center; color: var(--color-muted); }
.disclosure[open] > summary::before { content: "\2212"; }
.disclosure-body { padding: var(--space-3) 0 var(--space-2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; margin: var(--space-6) 0 0; }
.actions form { margin: 0; }

/* Buttons. One copper action per screen; everything else is quiet. */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--target); padding: var(--space-3) var(--space-5);
  font: inherit; font-size: var(--text-4); font-weight: var(--weight-semibold); line-height: var(--leading-tight); text-decoration: none; text-align: center;
  color: var(--color-ink); background: var(--color-surface);
  border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-control);
  cursor: pointer;
}
.button-primary { color: var(--color-on-copper); background: var(--color-copper); border-color: var(--color-copper); }
.button-primary:hover { border-color: var(--color-ink); }
.button-secondary:hover { border-color: var(--color-ink); background: var(--color-ground); }
.button-danger { color: var(--color-age-stale); border-color: var(--color-age-stale); }
.button-danger:hover { background: var(--color-ground); }
.button:disabled, .button[aria-disabled="true"] { color: var(--color-muted); background: var(--color-ground); border-color: var(--color-rule); cursor: not-allowed; }
.button-block { display: flex; width: 100%; }
.button-small { min-height: 2.25rem; padding: var(--space-1) var(--space-4); font-size: var(--text-3); }
summary.button { list-style: none; }
summary.button::-webkit-details-marker { display: none; }

/* Confirmation for a destructive action: opens in place, asks in words, repeats the verb. */
.confirm { display: inline-block; }
.confirm-panel { margin-top: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--color-surface); border: var(--rule-strong) solid var(--color-age-stale); max-width: var(--measure); }
.confirm-panel p { margin-bottom: var(--space-4); }
.confirm-panel .actions { margin-top: 0; }
.confirm[open] > summary.button { border-color: var(--color-ink); }
.confirm-primary .confirm-panel { border-color: var(--color-copper); }
td .confirm-panel { min-width: 16rem; white-space: normal; }

/* Pagination. */
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin: var(--space-4) 0 0; font-size: var(--text-3); }
.pagination-range { color: var(--color-muted); font-variant-numeric: tabular-nums lining-nums; }
.pagination .button { min-height: 2.5rem; }

/* Filter bar. */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-5); background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); }
.filters .field { margin: 0; flex: 1 1 12rem; }
.filters .field-label { font-size: var(--text-3); }
.filters .control { min-height: var(--target); }
.filters .actions { margin: 0; }
.filters .button { min-height: var(--target); }

/* Detail panel: one record's full state, as a ruled list. */
.detail { margin: 0 0 var(--space-5); background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); }
.detail-title { padding: var(--space-3) var(--space-5); font-family: var(--font-condensed); font-weight: var(--weight-semibold); border-bottom: var(--rule-strong) solid var(--color-ink); }
.detail dl { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr); margin: 0; }
.detail dt { padding: var(--space-3) var(--space-5); color: var(--color-muted); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-3); }
.detail dd { margin: 0; padding: var(--space-3) var(--space-5); border-bottom: var(--rule-hair) solid var(--color-rule); min-width: 0; overflow-wrap: anywhere; }
.detail dt:nth-last-of-type(1), .detail dd:last-of-type { border-bottom: 0; }
.detail-lead { font-size: var(--text-5); font-weight: var(--weight-medium); }
@media (max-width: 44.9375rem) {
  .detail dl { grid-template-columns: 1fr; }
  .detail dt { padding-bottom: 0; border-bottom: 0; }
}

/* A state stated in words; the level only adds emphasis. */
.state { font-weight: var(--weight-medium); }
.state-good { color: var(--color-age-recent); }
.state-warn { color: var(--color-age-aging); }
.state-bad { color: var(--color-age-stale); }
.state-quiet { color: var(--color-muted); font-weight: var(--weight-regular); }

/* An identifier as it is printed on a label. */
.number-big { font-size: var(--text-7); font-weight: var(--weight-semibold); letter-spacing: 0.06em; font-variant-numeric: tabular-nums lining-nums; }
.code-block { padding: var(--space-6); text-align: center; background: var(--color-surface); border: var(--rule-strong) dashed var(--color-muted); }
.code-block .number-big { display: block; }
.qr { display: block; margin: var(--space-5) auto; max-width: 18rem; }

/* Panel: a bounded surface for a group of controls or a summary. */
.panel { padding: var(--space-5); margin: 0 0 var(--space-5); background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); }
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.panel-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-5); }

/* Sign-in: the one centred screen. */
.signin { max-width: 24rem; margin: var(--space-8) auto; padding: 0 var(--space-5); }
.signin-product { display: block; font-family: var(--font-condensed); font-weight: var(--weight-semibold); font-size: var(--text-5); margin-bottom: var(--space-5); }

/* Launcher: the applications a person can use. */
.launcher { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.launcher li { background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); border-bottom: 0; }
.launcher li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.launcher-app { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--target); padding: var(--space-4) var(--space-5); text-decoration: none; color: var(--color-ink); font-weight: var(--weight-medium); }
a.launcher-app:hover { background: var(--color-ground); }
.launcher-app.is-unavailable { color: var(--color-muted); font-weight: var(--weight-regular); }
.launcher-go { color: var(--color-copper); font-weight: var(--weight-semibold); }