/* Vending dashboard. One world: the lid map of a vial box on a lab bench.
   Bench white ground, marker ink, one cap blue; state is a strip of lab tape with a word on it. */
:root {
  --bench: #eef1f3; --sheet: #ffffff; --well: #f7f9fa;
  --ink: #0f1a22; --ink-2: #3c4a54; --ink-3: #5a6771;
  --rule: #d3dade; --rule-2: #7f8e9a; --yellow-edge: #a87c00;
  --blue: #1657c5; --blue-ink: #ffffff; --blue-wash: #e2ebfa;
  --green: #17794a; --green-wash: #dcf0e5;
  --yellow: #f2c230; --yellow-ink: #382b00; --yellow-wash: #fbf1c9;
  --red: #b3261e; --red-wash: #fadedb;
  --gray: #5a6771; --gray-wash: #e3e8eb;
  --r: 8px; --tap: 48px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --code: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Roboto Mono", monospace;
  --shadow: 0 1px 2px rgb(15 26 34 / 0.06), 0 6px 18px rgb(15 26 34 / 0.07);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bench: #0d1318; --sheet: #151e25; --well: #1a252d;
    --ink: #e9eef2; --ink-2: #b9c4cc; --ink-3: #93a0aa;
    --rule: #26333d; --rule-2: #5f7180; --yellow-edge: var(--yellow);
    --blue: #7aabff; --blue-ink: #06162e; --blue-wash: #16294a;
    --green: #56c98d; --green-wash: #123322;
    --yellow: #f2c230; --yellow-ink: #382b00; --yellow-wash: #3a3008;
    --red: #ff8a80; --red-wash: #42191a;
    --gray: #93a0aa; --gray-wash: #222d36;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 22px rgb(0 0 0 / 0.35);
  }
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bench); color: var(--ink); font: 400 1rem/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--blue); text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1 { font-size: 1.5rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: 1.0625rem; line-height: 1.3; font-weight: 700; }
h3 { font-size: 0.9375rem; font-weight: 700; }
.small { font-size: 0.875rem; } .dim { color: var(--ink-3); } .mid { color: var(--ink-2); }
.code { font-family: var(--code); font-size: 0.92em; letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--bench); padding: 0.6rem 1rem; z-index: 50; }
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- frame ---------- */
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 1rem; padding-top: max(0.6rem, env(safe-area-inset-top)); }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink); text-decoration: none; font-weight: 700; min-height: 40px; }
.who { font-size: 0.8125rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
main { flex: 1; width: 100%; max-width: 46rem; margin: 0 auto; padding: 0.25rem 1rem calc(6.5rem + env(safe-area-inset-bottom)); outline: none; }
.boot { padding: 3rem 0; text-align: center; color: var(--ink-3); }
.tabs { position: fixed; inset: auto 0 0 0; z-index: 20; display: flex; background: var(--sheet); border-top: 1px solid var(--rule); padding-bottom: env(safe-area-inset-bottom); }
.tabs a { flex: 1; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink-3); text-decoration: none; font-size: 0.75rem; font-weight: 600; position: relative; }
.tabs a[aria-current="page"] { color: var(--ink); }
.tabs a[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 3px; background: var(--blue); border-radius: 0 0 3px 3px; }
.tabs svg { width: 22px; height: 22px; }
.tabs .count { position: absolute; top: 7px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 0.6875rem; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) { .tabs .count { color: #2a0b09; } }
@media (min-width: 60rem) {
  .app { display: grid; grid-template-columns: 13rem minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .top { grid-column: 1 / -1; border-bottom: 1px solid var(--rule); background: var(--sheet); }
  .tabs { position: sticky; top: 0; align-self: start; inset: auto; grid-column: 1; grid-row: 2; flex-direction: column; border: 0; background: none; padding: 1rem 0.75rem; gap: 2px; }
  .tabs a { flex: none; flex-direction: row; justify-content: flex-start; gap: 0.7rem; min-height: 44px; padding: 0 0.75rem; border-radius: var(--r); font-size: 0.9375rem; }
  .tabs a[aria-current="page"] { background: var(--sheet); box-shadow: inset 3px 0 0 var(--blue); }
  .tabs a[aria-current="page"]::before { display: none; }
  .tabs .count { position: static; margin-left: auto; }
  main { grid-column: 2; grid-row: 2; max-width: 60rem; margin: 0; padding: 1.25rem 2rem 4rem; }
}

/* ---------- page furniture ---------- */
.head { padding: 0.75rem 0 1rem; display: grid; gap: 0.35rem; }
.head .back { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 40px; margin: -0.5rem 0 0 -0.35rem; padding: 0 0.35rem; color: var(--ink-2); text-decoration: none; font-size: 0.875rem; font-weight: 600; width: max-content; }
.head .back svg { width: 16px; height: 16px; }
.head .line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; }
.sentence { color: var(--ink-2); max-width: 62ch; }
.section { margin-top: 1.75rem; }
.section > h2 { margin-bottom: 0.6rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.section > h2 .aside { font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); }
.sheet { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); }
.pad { padding: 0.9rem 1rem; }
.rows > li + li { border-top: 1px solid var(--rule); }
.row { display: block; padding: 0.8rem 1rem; }
.empty { padding: 1.1rem 1rem; color: var(--ink-2); font-size: 0.9375rem; }

/* lab tape: the one way state is written anywhere */
.tape { display: inline-flex; align-items: center; height: 1.375rem; padding: 0 0.45rem; border-radius: 2px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; background: var(--gray-wash); color: var(--ink-2); }
.tape.ok { background: var(--green); color: #fff; } .tape.warn { background: var(--yellow); color: var(--yellow-ink); }
.tape.bad { background: var(--red); color: #fff; } .tape.blue { background: var(--blue); color: var(--blue-ink); }
.tape.line { background: none; box-shadow: inset 0 0 0 1.5px var(--rule-2); color: var(--ink-2); }
@media (prefers-color-scheme: dark) { .tape.ok { color: #062414; } .tape.bad { color: #2a0b09; } }

/* buttons and fields */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: var(--tap); padding: 0 1.1rem; border-radius: var(--r); border: 1.5px solid var(--rule-2); background: var(--sheet); color: var(--ink); font-weight: 650; font-size: 0.9375rem; text-decoration: none; cursor: pointer; transition: background-color 160ms var(--ease), border-color 160ms var(--ease), box-shadow 160ms var(--ease); -webkit-tap-highlight-color: transparent; }
.btn:hover { border-color: var(--ink-3); } .btn:active { transform: scale(0.98); }
.btn.primary { background: var(--blue); border-color: var(--blue); color: var(--blue-ink); }
.btn.primary:hover { box-shadow: 0 4px 14px rgb(22 87 197 / 0.28); }
.btn.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, var(--rule)); }
.btn.quiet { border-color: transparent; background: none; color: var(--blue); padding: 0 0.5rem; }
.btn.small { min-height: 40px; padding: 0 0.8rem; font-size: 0.875rem; }
.btn.wide { width: 100%; }
.btn[disabled]:not([aria-busy]), .btn.primary[disabled]:not([aria-busy]) { background: var(--well); border-color: var(--rule); color: var(--ink-3); cursor: default; box-shadow: none; }
.btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.btn[aria-expanded="true"] { background: var(--well); border-color: var(--ink); }
.btn.armed { background: var(--yellow-wash); border-color: var(--yellow-edge); color: var(--ink); }
.btn svg { width: 18px; height: 18px; flex: none; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.field { display: grid; gap: 0.3rem; min-width: 0; }
.field > span { font-size: 0.8125rem; font-weight: 650; color: var(--ink-2); }
.field > small { font-size: 0.8125rem; color: var(--ink-3); }
.input, select.input, textarea.input { width: 100%; min-width: 0; min-height: var(--tap); padding: 0.55rem 0.75rem; border: 1.5px solid var(--rule-2); border-radius: var(--r); background: var(--sheet); font-size: 1rem; }
.input:focus { outline: 3px solid color-mix(in srgb, var(--blue) 35%, transparent); border-color: var(--blue); }
.input::placeholder { color: var(--ink-3); }
textarea.input { min-height: 5rem; resize: vertical; }
.form { display: grid; gap: 0.85rem; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; align-items: start; }
.check { display: flex; gap: 0.7rem; align-items: flex-start; min-height: 44px; padding: 0.55rem 0; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--blue); flex: none; }
.msg { font-size: 0.9375rem; padding: 0.65rem 0.8rem; border-radius: var(--r); background: var(--red-wash); color: var(--ink); border: 1px solid color-mix(in srgb, var(--red) 40%, transparent); }
.msg.good { background: var(--green-wash); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.msg.note { background: var(--yellow-wash); border-color: color-mix(in srgb, var(--yellow) 60%, transparent); }
.stepper { display: grid; grid-template-columns: var(--tap) minmax(3.5rem, 1fr) var(--tap); align-items: stretch; border: 1.5px solid var(--rule-2); border-radius: var(--r); overflow: hidden; background: var(--sheet); }
.stepper button { border: 0; background: var(--well); min-height: var(--tap); cursor: pointer; display: grid; place-items: center; }
.stepper button:active { background: var(--blue-wash); }
.stepper button svg { width: 20px; height: 20px; }
.stepper input { border: 0; border-inline: 1.5px solid var(--rule-2); text-align: center; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; background: none; min-width: 0; width: 100%; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- fleet ---------- */
.alarm { display: grid; gap: 0.15rem; padding: 0.75rem 1rem; text-decoration: none; color: var(--ink); }
.alarm + .alarm { border-top: 1px solid var(--rule); }
.alarm .t { font-weight: 650; display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; align-items: baseline; }
.site { margin-top: 1.6rem; }
.site > h2 { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.2rem; }
.site > p { font-size: 0.875rem; color: var(--ink-3); margin-bottom: 0.6rem; max-width: 62ch; }
.unit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 1rem; align-items: center; padding: 0.9rem 1rem; color: var(--ink); text-decoration: none; transition: background-color 160ms var(--ease); }
.unit:hover { background: var(--well); }
.unit .name { font-weight: 700; font-size: 1.0625rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.55rem; }
.unit .facts { grid-column: 1; font-size: 0.875rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 0.1rem 0.9rem; }
.unit .mini { grid-row: 1 / span 2; grid-column: 2; }
.mini { display: grid; gap: 2px; grid-template-columns: repeat(var(--cols), 9px); }
.mini i { width: 9px; height: 9px; border-radius: 2px; background: var(--rule); }
.mini i.full { background: var(--ink-2); } .mini i.low { background: var(--yellow); }
.mini i.out { background: none; box-shadow: inset 0 0 0 1.5px var(--rule-2); } .mini i.hold { background: var(--red); }
.mini i.gap { background: none; }

/* ---------- the rack: a machine drawn as its own lid map ---------- */
.rack { --cols: 5; max-width: calc(var(--cols) * 5.25rem + 1.7rem); display: grid; grid-template-columns: 1.15rem repeat(var(--cols), minmax(40px, 1fr)); overflow-x: auto; gap: 5px; padding: 0.85rem 0.75rem 0.85rem 0.45rem; }
.rack .axis { font: 700 0.6875rem/1 var(--code); color: var(--ink-3); display: grid; place-items: center; }
.rack .axis.cols { padding-bottom: 2px; }
.lane { position: relative; aspect-ratio: 1 / 1.08; min-height: 46px; border: 1.5px solid var(--rule-2); border-radius: 7px; background: var(--sheet); display: grid; place-items: center; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease), background-color 140ms var(--ease); }
.lane b { font-size: 1.1875rem; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1; }
.lane small { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; }
.lane.out { border-style: dashed; color: var(--ink-3); background: none; }
.lane.none { border-style: dotted; border-color: var(--rule); background: none; color: var(--ink-3); }
.lane.none b { font-weight: 500; font-size: 0.9rem; }
.lane.low { background: var(--yellow-wash); border-color: var(--yellow-edge); }
.lane.soon::after, .lane.gone::after, .lane.hold::after { content: ""; position: absolute; top: -1.5px; right: -1.5px; width: 13px; height: 13px; border-radius: 0 7px 0 7px; background: var(--yellow); }
.lane.gone::after, .lane.hold::after { background: var(--red); }
.lane.gone, .lane.hold { border-color: var(--red); background: var(--red-wash); }
.lane.off { opacity: 0.4; }
.lane[aria-pressed="true"] { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 30%, transparent); }
.lane .plus { position: absolute; top: -7px; left: -7px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--blue); color: var(--blue-ink); font-size: 0.75rem; font-weight: 800; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.key { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; padding: 0 1rem 0.85rem; font-size: 0.75rem; color: var(--ink-3); }
.key span { display: inline-flex; align-items: center; gap: 0.35rem; }
.key i { width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid var(--rule-2); flex: none; }
.key i.low { background: var(--yellow-wash); border-color: var(--yellow); } .key i.out { border-style: dashed; } .key i.none { border-style: dotted; border-color: var(--rule-2); }
.key i.soon { background: var(--yellow); border-color: var(--yellow); } .key i.hold { background: var(--red); border-color: var(--red); }
.panel { border-top: 1px solid var(--rule); padding: 1rem; display: grid; gap: 0.85rem; }
.panel.fresh { animation: rise 220ms var(--ease, ease-out); }
@keyframes rise { from { opacity: 0.4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.panel .where { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.6rem; }
.panel .where .at { font: 800 1.375rem/1 var(--code); }
.lots li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; font-size: 0.9375rem; border-top: 1px dashed var(--rule); }
.lots li:first-child { border-top: 0; }
.lots li > .num { flex: none; }
.facts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; }
.facts-grid dt { font-size: 0.75rem; font-weight: 650; color: var(--ink-3); }
.facts-grid dd { font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (min-width: 40rem) { .facts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* The bar a thumb reaches. It carries its own strip of bench so nothing reads through it. */
.dock { position: sticky; bottom: calc(58px + env(safe-area-inset-bottom)); z-index: 10; margin: 0.5rem -1rem 0; padding: 0.9rem 1rem 0.6rem; display: grid; gap: 0.5rem; background: linear-gradient(to bottom, transparent, var(--bench) 0.9rem); }
.dock .btn { box-shadow: var(--shadow); }
@media (min-width: 60rem) { .dock { position: static; margin: 1rem 0 0; padding: 0; background: none; max-width: 24rem; } }
.sheet > details.more { padding: 0 1rem; }
.sheet > .rows + details.more { border-top: 1px solid var(--rule); }
.sheet > details.more > .rows { margin: 0 -1rem; border-top: 1px solid var(--rule); }
.log > li { padding: 0.7rem 1rem; display: grid; gap: 0.1rem; }
.log .t { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; font-weight: 650; }
.visit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; align-items: center; padding: 0.7rem 1rem; }
.visit .at { font: 800 1.0625rem/1 var(--code); }
.history { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.history th { text-align: left; font-weight: 650; color: var(--ink-3); font-size: 0.75rem; padding: 0.3rem 0.5rem 0.3rem 0; }
.history td { padding: 0.4rem 0.5rem 0.4rem 0; border-top: 1px dashed var(--rule); vertical-align: top; }
.history td.n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 650; color: var(--blue); list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: ""; width: 8px; height: 8px; margin-left: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 160ms var(--ease); }
details[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.enrol { font: 800 2rem/1.1 var(--code); letter-spacing: 0.06em; padding: 0.4rem 0; user-select: all; }
.linkbox { font-family: var(--code); font-size: 0.875rem; padding: 0.6rem 0.75rem; background: var(--well); border: 1px dashed var(--rule-2); border-radius: var(--r); overflow-wrap: anywhere; user-select: all; }

/* sign in */
.door { max-width: 24rem; margin: 0 auto; padding-top: 12vh; display: grid; gap: 1.25rem; }
.door .mark { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.125rem; }
.door .mark svg { width: 28px; height: 28px; flex: none; color: var(--blue); }

.toast { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40; max-width: min(92vw, 30rem); background: var(--ink); color: var(--bench); padding: 0.7rem 1rem; border-radius: var(--r); font-size: 0.9375rem; font-weight: 600; box-shadow: var(--shadow); animation: rise 220ms var(--ease); }
.skeleton { height: 4.25rem; border-radius: var(--r); background: linear-gradient(90deg, var(--rule) 0%, var(--well) 50%, var(--rule) 100%); background-size: 200% 100%; animation: sweep 1.2s linear infinite; opacity: 0.6; margin-top: 0.6rem; }
@keyframes sweep { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.lane small.dim { font-weight: 600; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.connect { margin-bottom: 0.75rem; }