/* Skylift. The design language here is lab equipment: engraved label plates in tracked capitals, tabular monospaced
   readouts, hairlines, lamps that mean something, a segmented level bar. Main Camera brand guidelines, Vignelli Canon:
   a grid, a small fixed set of sizes and weights, colour only where it means something, no ornament.
   Change a token, never an instance. */

:root {
  color-scheme: dark;

  /* faces */
  --font-ui: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-name: 'Barlow', system-ui, sans-serif;
  --font-num: 'SF Mono', 'Menlo', 'Consolas', 'Roboto Mono', monospace;

  /* the type scale: four sizes inside the tool (13, 15, 18) plus the bar and the door. Weights: 400 and 700 (900 only in the mark). */
  --type-s: 13px;     /* label plates, buttons, readout labels (Bold, tracked capitals) */
  --type-m: 15px;     /* body and numbers */
  --type-l: 18px;     /* the key readout of a row, the phone top bar */
  --type-xxl: 28px;   /* the desktop top bar mark */
  --track-caps: .12em;

  /* surfaces, R = G = B (a tool is never tinted) */
  --bg-stage: #0d0d0d;     /* the door */
  --bg-void: #1c1c1c;      /* the page */
  --bg-panel: #262626;
  --bg-panel-2: #323232;   /* a raised control */
  --bg-raised: #424242;    /* a control under the pointer */
  --bg-inset: #141414;     /* wells, fields, plates, the unlit segments */
  --divider: #303030;

  /* ink: the Mac app's legibility pair, measured by tests/contrast.mjs */
  --text-primary: #f0f0f0;
  --text-secondary: #d0d0d0;   /* 82 percent */
  --text-tertiary: #b0b0b0;    /* 69 percent */
  --accent: #d4d4d4;
  --on-accent: #1c1c1c;
  --pipe: rgba(240, 240, 240, .45);
  --door-ink: #e8e3d8;
  --door-error: #d99a92;

  /* the only colours, each with one meaning */
  --motion: #c8924a;                  /* it is rolling: progress */
  --flag: #e2574a;                    /* a problem */
  --in-step: hsl(146 82% 62%);        /* the Mac is online and in step */

  /* shape and space (a 4px grid) */
  --radius: 16px; --radius-sm: 12px; --radius-xs: 8px;
  --gutter: 18px;
  --maxw: 1440px;
  --gap: 16px;
  --target: 44px;                     /* a phone; 36px from 960px */
  --brand-size: var(--type-l);

  /* motion: the brand's ease-out, tools answer at once */
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 960px) {
  :root { --gutter: clamp(12px, 3vw, 28px); --target: 36px; --brand-size: var(--type-xxl); }
}

* { box-sizing: border-box; }
html { background: var(--bg-stage); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--bg-void); color: var(--text-primary);
  font: 400 var(--type-m)/1.35 var(--font-ui);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overflow-wrap: anywhere;
}
body.loading { background: var(--bg-stage); }
body.loading > * { visibility: hidden; }
body.on-stage { background: var(--bg-stage); }
[hidden] { display: none !important; }
h1, h2, p, dl, dd { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button { touch-action: manipulation; }
a { color: inherit; }
.mono { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* focus is a lighter grey ring, never a colour */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ================================================================ the mark and the lockup (product-title-guidelines.md, section 2) */
.w-light { font-weight: 400; } .w-normal { font-weight: 400; } .w-bold { font-weight: 900; }
.topbar {
  position: relative; display: flex; align-items: center; gap: 0;
  height: 58px; padding: 0 var(--gutter); padding-top: env(safe-area-inset-top); box-sizing: content-box;
  background: var(--bg-void);
}
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--divider); }
.brand-wrap { display: flex; align-items: baseline; min-width: 0; height: var(--brand-size); font-size: var(--brand-size); flex: none; }
.brand-text { font-family: var(--font-ui); font-size: var(--brand-size); line-height: 1; letter-spacing: 0; color: var(--text-primary); white-space: nowrap; text-decoration: none; }
.brand-pipe { flex: none; width: .0605em; height: .7233em; margin: 0 .974em 0 .9815em; background: var(--pipe); position: relative; top: .0516em; }
.product { font-family: var(--font-name); text-decoration: none; text-transform: uppercase; font-weight: 600; font-size: .85327em; line-height: 1; letter-spacing: .1em; margin-right: -.1em; color: var(--text-primary); white-space: nowrap; }
/* the clear space after the name is its own item, so on a phone it can give way (down to 14px) when the account needs the room */
.brand-clear { flex: 0 100 calc(var(--brand-size) * 2.0889); min-width: 14px; }
.account { margin-left: auto; display: flex; align-items: center; gap: 8px; }
@media (min-width: 960px) {
  .topbar { height: 61px; padding-left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); padding-right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); }
}
.avatar {
  flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-panel-2); color: var(--text-primary); font: 700 var(--type-s)/1 var(--font-ui); text-transform: uppercase;
}
.avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* on a phone a task's buttons share one full-width line */
@media (max-width: 559px) {
  .row-head > .actions { margin-left: 0; flex: 1 1 100%; }   /* the badge is one line, the buttons the next, each as wide as the screen allows */
  .row-head > .actions .btn { flex: 1 1 0; }
}
/* a phone is 390px wide: the lockup, the one action, and no circle (the address is in the foot) */
@media (max-width: 479px) {
  .avatar { display: none; }
  .account .btn { padding: 0 4px; }
  .account .btn .ico-slot { display: none; }
}

/* ================================================================ the door and the refusal */
.stage {
  position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px var(--gutter) calc(28px + 24px + env(safe-area-inset-bottom)); background: var(--bg-stage); color: var(--door-ink); overflow: hidden;
}
.stage::before { /* one faint warm gradient at an angle chosen at load (a job: the stage is not a flat slab) */
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: linear-gradient(var(--door-angle, 205deg), rgba(232, 214, 186, .075) 0%, rgba(232, 214, 186, 0) 55%), radial-gradient(60% 50% at 80% 100%, rgba(232, 214, 186, .045), rgba(232, 214, 186, 0));
}
.stage-centre { position: relative; display: flex; flex-direction: column; align-items: center; gap: 44px; text-align: center; max-width: 560px; }
.word { font-family: var(--font-name); font-weight: 600; text-transform: uppercase; font-size: 56px; line-height: 1; letter-spacing: .1em; padding-left: .1em; color: var(--door-ink); }
@media (min-width: 960px) { .word { font-size: 64px; } }
.capsule {
  height: 46px; padding: 0 28px; border-radius: 999px; background: transparent; cursor: pointer;
  border: 1px solid rgba(232, 227, 216, .22); color: var(--door-ink);
  font: 400 var(--type-s)/1 var(--font-ui); letter-spacing: .02em;
  transition: background .12s var(--ease), transform .14s var(--ease);
}
.capsule:active { transform: scale(.97); }
@media (hover: hover) { .capsule:hover { background: rgba(232, 227, 216, .08); } }
.stage-error { color: var(--door-error); font-size: var(--type-m); max-width: 36ch; margin-top: -20px; }
.refusal { font: 700 var(--type-l)/1.35 var(--font-ui); letter-spacing: 0; color: var(--door-ink); max-width: 24ch; }
.stage-who { font: 400 var(--type-m)/1.35 var(--font-num); color: rgba(232, 227, 216, .82); margin-top: -24px; }
.stage-mark { position: absolute; left: 0; right: 0; bottom: calc(28px + env(safe-area-inset-bottom)); text-align: center; font-size: 24px; line-height: 1; color: rgba(232, 227, 216, .9); text-decoration: none; }
@media (min-width: 960px) { .stage-mark { font-size: 30px; } }

/* ================================================================ buttons: tracked capitals, a picture beside the word, never a bare picture */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--target); padding: 0 16px; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--bg-panel-2); color: var(--text-primary); cursor: pointer; white-space: nowrap;
  font: 700 var(--type-s)/1 var(--font-ui); letter-spacing: var(--track-caps); text-transform: uppercase;
  transition: background .12s var(--ease), transform .14s var(--ease);
}
.btn:active:not([aria-disabled="true"]) { transform: scale(.97); }
@media (hover: hover) { .btn:hover:not([aria-disabled="true"]) { background: var(--bg-raised); } }
.btn.primary { background: var(--accent); color: var(--on-accent); }
@media (hover: hover) { .btn.primary:hover:not([aria-disabled="true"]) { background: #ececec; } }
.btn.bare { background: transparent; }
@media (hover: hover) { .btn.bare:hover:not([aria-disabled="true"]) { background: var(--bg-raised); } }
.btn[aria-disabled="true"] { background: transparent; color: var(--text-tertiary); border: 1px dashed var(--text-tertiary); cursor: not-allowed; }
.btn .t { padding-top: 1px; }
.ico-slot { display: inline-flex; flex: none; width: 16px; height: 16px; }
.ico-slot svg, .ico svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }

/* ================================================================ the page */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: var(--gap) var(--gutter) calc(var(--gap) * 2 + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--gap); }

/* label plates, lamps, readouts */
.plate {
  display: inline-block; padding: 7px 10px; border: 1px solid var(--divider); border-radius: var(--radius-xs); background: var(--bg-inset);
  font: 700 var(--type-s)/1 var(--font-ui); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-secondary);
}
.plate-word { font: 700 var(--type-s)/1 var(--font-ui); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-primary); }
.lamp { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--text-tertiary); background: transparent; }
.lamp.on { background: var(--in-step); border-color: var(--in-step); }
.lamp.amber { background: var(--motion); border-color: var(--motion); }
.lamp.red { background: var(--flag); border-color: var(--flag); }
.lamp.off { background: transparent; border-color: var(--text-tertiary); }
.flag-tri { flex: none; color: var(--flag); }
.flag-tri { display: inline-flex; width: 16px; height: 16px; }
.flag-tri svg { width: 16px; height: 16px; display: block; }
.flag-tri svg path:first-child { fill: var(--flag); stroke: none; }
.flag-tri svg path:last-child { fill: none; stroke: var(--bg-void); stroke-width: 2.4; stroke-linecap: round; }
.state { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 10px; border-radius: var(--radius-xs); background: var(--bg-inset); }
.state .plate-word { color: var(--text-primary); }
.state.amber .plate-word { color: var(--motion); }
.field-label, .k { font: 700 var(--type-s)/1 var(--font-ui); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-tertiary); }
.count { font: 700 var(--type-m)/1 var(--font-num); font-variant-numeric: tabular-nums; color: var(--text-secondary); }

/* the Mac */
.macbar { display: flex; flex-direction: column; gap: 12px; padding-bottom: 4px; }
.switcher { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: var(--target); padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--bg-panel-2); font: 700 var(--type-s)/1 var(--font-ui); letter-spacing: var(--track-caps); text-transform: uppercase; cursor: pointer; max-width: 100%;
  transition: background .12s var(--ease), transform .14s var(--ease); }
.chip:active { transform: scale(.97); }
.chip[aria-selected="true"] { border-color: var(--accent); background: var(--bg-raised); }
@media (hover: hover) { .chip:hover { background: var(--bg-raised); } }
.chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24ch; }
.macrow { display: grid; grid-template-columns: 1fr; gap: 12px 24px; align-items: start; }
.macname-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.macname { font: 700 var(--type-l)/1.2 var(--font-ui); overflow-wrap: anywhere; }
.macstate { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.state.big { min-height: 36px; padding: 0 14px; gap: 10px; }
.state.big .lamp { width: 14px; height: 14px; }
.state.big .plate-word { font-size: var(--type-m); }
.macnote { font: 400 var(--type-m)/1.3 var(--font-ui); color: var(--text-primary); }
.facts { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.facts > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.facts dt { font: 700 var(--type-s)/1 var(--font-ui); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-tertiary); }
.facts dd { font: 400 var(--type-m)/1.2 var(--font-num); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.macactions { display: flex; flex-wrap: wrap; gap: 8px; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; }
.slot { display: contents; }
@media (min-width: 960px) {
  .macrow { grid-template-columns: minmax(220px, auto) 1fr; align-items: center; }
}

/* panels */
.panel { background: var(--bg-panel); border-radius: var(--radius); overflow: hidden; }
.plate-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--gutter); min-height: 56px; }
.panel-body { padding: 0 var(--gutter) var(--gutter); }
.grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); align-items: start; }
.col { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
@media (min-width: 960px) { .grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); } .col { gap: var(--gutter); } }
.macbar, .panel, .foot { min-width: 0; }
.rows { display: flex; flex-direction: column; }
.row { padding: 16px var(--gutter); border-top: 1px solid var(--divider); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.row.stale { color: var(--text-secondary); }
.empty { padding: 16px var(--gutter) 20px; border-top: 1px solid var(--divider); font: 700 var(--type-s)/1.3 var(--font-ui); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-tertiary); }
.row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.row-name { font: 700 var(--type-m)/1.3 var(--font-ui); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.row-path { display: flex; align-items: flex-start; gap: 8px; color: var(--text-secondary); overflow-wrap: anywhere; }
.row-path .ico-slot { margin-top: 2px; color: var(--text-tertiary); }
.row-path .p { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.row-msg { display: flex; align-items: flex-start; gap: 8px; color: var(--text-primary); overflow-wrap: anywhere; }
.row-msg .flag-tri { margin-top: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row-head > .actions { margin-left: auto; }
.badges { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.readouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px 16px; }
.ro { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ro .v { font: 400 var(--type-m)/22px var(--font-num); font-variant-numeric: tabular-nums; color: var(--text-primary); overflow-wrap: anywhere; }   /* one 22px line for 15 and 18 alike, so neighbours sit level */
.ro.big .v { font-size: var(--type-l); font-weight: 700; line-height: 22px; }
.input.num { -moz-appearance: textfield; appearance: textfield; }
.input.num::-webkit-inner-spin-button, .input.num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.again { display: flex; flex-direction: column; gap: 12px; }
.readout-well { display: flex; gap: 12px 24px; flex-wrap: wrap; padding: 12px; border-radius: var(--radius-sm); background: var(--bg-inset); }
.readout-well .ro { flex: 1 1 96px; }

/* the level bar: one smooth bar with round ends, ticks at a quarter, a half and three quarters */
.level { display: flex; align-items: center; gap: 14px; }
.level .pct { flex: none; width: 5ch; text-align: right; font: 700 var(--type-l)/1 var(--font-num); font-variant-numeric: tabular-nums; }
.seg { position: relative; flex: 1; min-width: 0; height: 8px; border-radius: 999px; background: var(--bg-inset); --seg-color: var(--motion); }
.seg i { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--seg-color); transition: width .5s linear; }
.seg .ticks { position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; pointer-events: none; }
.seg .ticks b { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--text-secondary); }
.seg .ticks b:nth-child(1) { left: calc(25% - .5px); } .seg .ticks b:nth-child(2) { left: calc(50% - .5px); } .seg .ticks b:nth-child(3) { left: calc(75% - .5px); }
.stale .seg { --seg-color: var(--text-tertiary); }
.seg.red { --seg-color: var(--flag); }
.seg.grey { --seg-color: var(--accent); }
.scale { display: flex; justify-content: space-between; margin-top: 8px; font: 400 var(--type-s)/1 var(--font-num); color: var(--text-secondary); }

/* the meter: drawn on an inset well so its red words measure 5:1 */
.meter { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--radius-sm); background: var(--bg-inset); }
.meter-acct { font: 700 var(--type-m)/1.3 var(--font-ui); overflow-wrap: anywhere; }
.meter-plate { display: flex; justify-content: space-between; gap: 12px; font: 700 var(--type-s)/1 var(--font-ui); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-primary); }
.meter-read { display: flex; justify-content: space-between; gap: 12px; font: 700 var(--type-m)/1.2 var(--font-num); font-variant-numeric: tabular-nums; }
.meter-two { display: flex; justify-content: space-between; gap: 12px; }
.meter-two .ro { flex: 0 1 auto; }
.meter-two .ro .v { white-space: nowrap; }
.meter-two .ro:last-child { text-align: right; }
.meter-line { font: 400 var(--type-m)/1.3 var(--font-ui); color: var(--text-primary); }
.meter-state { display: flex; align-items: center; gap: 8px; font: 700 var(--type-m)/1.3 var(--font-ui); }
.meter-state.red { color: var(--flag); }   /* flag red on the inset well: 5.0:1 (tests/contrast.mjs) */
.meters-rows { display: flex; flex-direction: column; gap: 12px; padding: 0 var(--gutter) var(--gutter); }

/* activity */
.act { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: baseline; padding: 12px var(--gutter); border-top: 1px solid var(--divider); }
.act .when { font: 400 var(--type-s)/1.3 var(--font-num); font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.act .what { font: 700 var(--type-s)/1.3 var(--font-ui); letter-spacing: var(--track-caps); text-transform: uppercase; }
.act .who { grid-column: 1 / -1; color: var(--text-secondary); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.act .res { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; }
.act .res .flag-tri, .act .res .lamp { margin-top: 2px; }
.act .res .m { color: var(--text-primary); overflow-wrap: anywhere; }

/* forms */
.sched { display: flex; flex-direction: column; gap: 16px; padding: 0 var(--gutter) var(--gutter); }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.input {
  width: 100%; min-height: var(--target); padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: var(--bg-inset); color: var(--text-primary); font: 400 var(--type-m)/1.2 var(--font-ui); appearance: none; -webkit-appearance: none; min-width: 0;
}
.input::placeholder { color: var(--text-tertiary); opacity: 1; }
.input:focus-visible { outline: none; border-color: var(--accent); }
.input.bad { border-color: var(--flag); }
.input.code { font-family: var(--font-num); font-size: var(--type-l); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.input.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; text-align: right; }
@media (pointer: coarse) { .input { font-size: 16px; } .input.code { font-size: 20px; } }   /* 16px or more, or iOS zooms the page on focus */
.select { position: relative; }
.select select { padding-right: 40px; text-overflow: ellipsis; cursor: pointer; }
.select .chev { position: absolute; right: 12px; top: 50%; margin-top: -8px; pointer-events: none; color: var(--text-secondary); }
.delay { display: grid; grid-template-columns: 96px auto 96px auto; justify-content: start; align-items: center; gap: 8px; }
.unit { font: 700 var(--type-s)/1 var(--font-ui); letter-spacing: var(--track-caps); color: var(--text-secondary); }
.sched-foot { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
@media (min-width: 560px) { .sched-foot { flex-direction: row; align-items: center; } }
.pair-form { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.pair-line { display: flex; gap: 8px; flex-wrap: wrap; }
.pair-line .input { flex: 1 1 200px; }
.pairing { max-width: 560px; width: 100%; margin: 0 auto; }
.pair-confirm { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.pair-q { font: 700 var(--type-s)/1.3 var(--font-ui); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-secondary); }
.pair-name { font: 700 var(--type-l)/1.3 var(--font-ui); padding: 14px; border-radius: var(--radius-sm); background: var(--bg-inset); overflow-wrap: anywhere; }
.pair-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.msg { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; color: var(--text-primary); overflow-wrap: anywhere; }
.sched-foot .msg { margin-top: 0; }
.msg .lamp, .msg .flag-tri { margin-top: 3px; }

.foot { padding-top: 16px; border-top: 1px solid var(--divider); }
.about { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }
.about > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.about dt { font: 700 var(--type-s)/1 var(--font-ui); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-tertiary); }
.about dd { margin: 0; font: 400 var(--type-s)/1.4 var(--font-num); color: var(--text-secondary); overflow-wrap: anywhere; user-select: all; }
.noscript { padding: 24px; color: var(--text-primary); }

/* the hover tip: desktop only, one short sentence */
.tip { position: fixed; z-index: 50; max-width: 280px; padding: 8px 10px; border-radius: var(--radius-xs); background: var(--bg-raised); border: 1px solid var(--divider); color: var(--text-primary); font: 400 var(--type-s)/1.35 var(--font-ui); pointer-events: none; overflow-wrap: normal; }
@media (hover: none) { .tip { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  /* nothing moves; colour and opacity changes still fade */
  *, *::before, *::after { transition-property: background-color, border-color, color, opacity !important; animation: none !important; }
}