/* Hallmark · shape: app screen · genre: modern-minimal · theme: Console (by request, the DeviceTrust site's own)
 * nav: top bar, three tabs · signature: the device ledger, each row vouched until a stated time · states: full, selected, needs a decision, not connected · console: graphite
 * axes: dark/grotesk-sans/chromatic-amber · posture: restrained · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a mock-up draws the full state only, so loading, empty and error are named in the handoff */
@import url("./tokens.css");
@import url("./base.css");

/* Shell */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }
.bar { border-bottom: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-3); }
.bar__row { display: flex; align-items: center; gap: var(--space-xl); min-height: 56px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); text-decoration: none; font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.02em; }
.brand__mark { width: 22px; height: 22px; flex-shrink: 0; }
.tabs { display: flex; gap: var(--space-2xs); overflow-x: auto; }
.tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.tabs a:hover { color: var(--color-ink); }
.bar__who { margin-left: auto; font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.bar__who .person { margin-left: var(--space-sm); }
.person { color: var(--color-accent); }

/* One section shows at a time; the address picks it, and Devices is the default */
.screen { display: none; padding-block: var(--space-lg) var(--space-xl); }
.screen:target, body:not(:has(.screen:target)) #devices { display: block; }
body:has(#enrollment:target) .tabs a[href="#enrollment"], body:has(#servers:target) .tabs a[href="#servers"],
body:not(:has(#enrollment:target, #servers:target)) .tabs a[href="#devices"] { background: var(--color-paper-2); color: var(--color-ink); }

.head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-lg); }
h1 { max-width: none; font-size: var(--text-display); line-height: 1.15; }
.head__sum { margin-top: var(--space-2xs); max-width: 70ch; color: var(--color-ink-2); }
.sub { max-width: none; margin-bottom: var(--space-sm); font-size: var(--text-section); line-height: 1.3; letter-spacing: -0.01em; }
.sub--gap { margin-top: var(--space-xl); }
.note { max-width: 62ch; font-size: var(--text-sm); color: var(--color-muted); }
.label { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.m, code { font-family: var(--font-outlier); font-size: 0.9375em; font-variant-numeric: tabular-nums slashed-zero; }
small { display: block; font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
.foot { padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }

/* Controls: the Console pair, at app height */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-rule); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-ink); border-color: var(--color-ink); }
.btn--quiet { background: transparent; color: var(--color-ink-2); }
.btn--sm { position: relative; min-height: 32px; padding: 0 var(--space-sm); }
.btn--sm::before { content: ""; position: absolute; inset: -6px 0; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear; } .btn:active { transform: none; } }

.seg { display: flex; margin: 0; padding: 0; border: 0; min-width: 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 40px; padding: 0 var(--space-sm); margin-left: -1px; border: var(--rule-hair) solid var(--color-rule-2); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; cursor: pointer; }
.seg label:first-of-type { margin-left: 0; border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.seg label:last-of-type { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.seg label:hover { background: var(--color-paper-2); }
.seg label .num { color: var(--color-muted); }
.seg input:checked + label { background: var(--color-rule); color: var(--color-ink); }
.seg input:focus-visible + label { position: relative; outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg--block { margin-bottom: var(--space-md); }

.input { flex: 1; min-width: 12rem; min-height: 40px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink); font-size: var(--text-sm); outline: 2px solid transparent; outline-offset: -3px; }
.input::placeholder { color: var(--color-muted); }
.input:hover { background: var(--color-paper-2); }
.input:focus-visible { outline-color: var(--color-focus); }

/* Chips carry state only: amber asks a person, cool is a tool reporting */
.chip { display: inline-block; padding: 1px var(--space-xs); border: var(--rule-hair) solid var(--color-rule-2); border-radius: 4px; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.chip--ask { background: var(--color-accent-soft); border-color: var(--color-accent-soft); color: var(--color-accent); }
.chip--ok { background: var(--color-ok-soft); border-color: var(--color-ok-soft); color: var(--color-ok); }
.chip--off { background: var(--color-bad-soft); border-color: var(--color-bad-soft); color: var(--color-bad); }
.chip--tool { background: var(--color-cool-soft); border-color: var(--color-cool-soft); color: var(--color-cool); }

/* The ledger */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: var(--gap-columns); align-items: start; }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { padding: var(--space-xs) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; vertical-align: middle; white-space: nowrap; }
.table thead th { padding-block: var(--space-sm); font-weight: 500; color: var(--color-muted); }
.table tbody th { font-weight: 500; }
.table tbody th a { text-decoration: none; }
.table tbody th a:hover { text-decoration: underline; text-decoration-color: var(--color-rule-2); }
.table tbody tr:hover { background: var(--color-paper-2); }
.table tbody tr[aria-selected="true"] { background: var(--color-paper-2); box-shadow: inset 2px 0 0 var(--color-rule-2); }
.table .off { color: var(--color-muted); text-decoration: line-through; }
.acts { text-align: right; }
.acts .btn + .btn { margin-left: var(--space-xs); }

/* One device: a panel cut into parts by hairlines */
.detail { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.detail__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md); }
.detail__head h2 { font-size: var(--text-xl); line-height: 1.2; letter-spacing: -0.02em; }
.detail__part { margin: 0; padding: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.detail__part .note { margin-top: var(--space-xs); }
.diff { margin-top: var(--space-sm); border-radius: var(--radius-pill); overflow: hidden; }
.diff__row { display: flex; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); }
.diff__row--minus { background: var(--color-bad-soft); } .diff__row--minus > .m:first-child { color: var(--color-bad); }
.diff__row--plus { background: var(--color-ok-soft); } .diff__row--plus > .m:first-child { color: var(--color-ok); }
.reading { font-family: var(--font-outlier); font-size: var(--text-3xl); font-variant-numeric: tabular-nums slashed-zero; letter-spacing: -0.04em; line-height: 1.2; }
.reading--key { max-width: none; font-size: var(--text-lg); letter-spacing: 0; overflow-wrap: anywhere; color: var(--color-cool); }
.facts { display: grid; gap: var(--space-xs); }
.facts > div { display: flex; justify-content: space-between; gap: var(--space-md); }
.facts dt { font-weight: 500; color: var(--color-muted); }
.facts dd { margin: 0; }

/* Enrollment and Servers */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin-top: var(--space-xl); align-items: start; }
#servers .pair { margin-top: 0; }
.code { margin: var(--space-sm) 0 0; padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.6; overflow-x: auto; }
.code:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.rows { margin: var(--space-sm) 0 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.rows li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.rows b { font-weight: 500; }
.rows--plain { margin-top: 0; }

@media (max-width: 60rem) {
  .bar__who { display: none; }
  .split, .pair { grid-template-columns: minmax(0, 1fr); }
  .head { flex-direction: column; align-items: start; }
  .btn, .seg label, .input { min-height: 44px; }
  .input { font-size: var(--text-md); }
  /* the name and the status stay in view; the rest scrolls sideways */
  .table tbody th { position: sticky; left: 0; background: var(--color-paper); }
}
@media (max-width: 40rem) {
  .seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 100%; }
  .seg label, .seg label:first-of-type, .seg label:last-of-type { margin: 0 -1px -1px 0; border-radius: 0; }
  /* a phone keeps the name, its status and its actions; the rest is in the device's panel */
  #devices .table :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(5)), #enrollment .table :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5)) { display: none; }
}
.reading--key + .note { margin-top: var(--space-sm); }

/* The working panel: what the mock-up did not need */
.gate { max-width: 34rem; padding-block: var(--space-2xl); }
.notice { margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-pill); background: var(--color-bad-soft); color: var(--color-ink); font-size: var(--text-sm); }
.empty { padding: var(--space-lg) var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.pair--top { margin-top: 0; }
form .label { display: block; margin: var(--space-md) 0 var(--space-2xs); }
form .input { display: block; width: 100%; max-width: 28rem; }
form .note:last-child { min-height: 1lh; margin-top: var(--space-xs); }
.detail .m { overflow-wrap: anywhere; }
.facts dd { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.table tbody tr { cursor: pointer; }
#enrollment .table tbody tr { cursor: default; }
.bar__who .btn { margin-left: var(--space-sm); }