/* Components. Every interactive box inside a page is 44px tall or taller; the
   60px top chrome is the one exception. Every Departure element here is 11px,
   weight 400, unsmoothed; bold is the 1px text shadow. */

/* == chrome == */

.topbar {
  height: var(--chrome-h);
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--page-pad);
  border-bottom: var(--line) solid var(--ph-l3);
  background: var(--ink);
  position: sticky;
  top: 0;
  z-index: 20;
}
/* The wordmark is one of the two amber things. */
.topbar__mark {
  display: flex;
  align-items: center;
  gap: 9px;
  font: var(--dm11);
  letter-spacing: var(--track-button);
  color: var(--ph-brand);
  flex: none;
  -webkit-font-smoothing: none;
}
.topbar__mark:hover { color: var(--ph-brand); }
.topbar__nav {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  overflow-x: auto;
}
.topbar__link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--s2);
  font: var(--dm11);
  letter-spacing: var(--track-button);
  color: var(--ph-dim);
  white-space: nowrap;
  flex: none;
  -webkit-font-smoothing: none;
}
.topbar__link:hover { background: var(--ph-wash); color: var(--ph); }
.topbar__link[aria-current="page"] { color: var(--ph-bright); text-shadow: var(--px-bold); }

.footer {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  padding: var(--s7) 0 var(--s9);
  border-top: var(--line) solid var(--ph-l1);
  font: var(--t-caption);
  color: var(--ph-mute2);
}

/* == the app shell: a 212px rail beside a content column with a 60px bar over it == */
.app {
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr);
  grid-template-rows: var(--chrome-h) minmax(0, 1fr);
  min-height: 100vh;
}
.rail {
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 10px;
  border-right: var(--line) solid var(--ph-l3);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.rail__mark { display: flex; align-items: center; gap: 9px; padding: 0 12px 16px; flex: none; }
.rail__mark span { font: var(--dm11); color: var(--ph-brand); -webkit-font-smoothing: none; }
.rail__org {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 12px 12px;
  margin-bottom: 10px;
  border-bottom: var(--line) solid var(--ph-l2);
}
.rail__orgname { font: 400 11px/1.4 var(--face-pixel); color: var(--ph-text); -webkit-font-smoothing: none; }
.rail__group { padding: 14px 12px 6px; }
.rail__link {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 12px;
  font: var(--dm11);
  letter-spacing: 0;
  color: var(--ph-dim);
  white-space: nowrap;
  text-transform: uppercase;
  flex: none;
  -webkit-font-smoothing: none;
}
.rail__link:hover { background: var(--ph-wash2); color: var(--ph); }
.rail__link.on, .rail__link.on:hover { background: var(--ph); color: var(--ink); }
/* The sign-out button wears .rail__link; this only undoes the button element's defaults. */
.rail__out { width: 100%; margin-top: 6px; }
.rail__out__btn {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.rail__me {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding: 12px;
  border-top: var(--line) solid var(--ph-l2);
}
.rail__who { font: var(--t-caption); color: var(--ph-text2); }

.crumbbar {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 var(--page-pad);
  border-bottom: var(--line) solid var(--ph-l3);
}
/* The chrome bar is 60px tall, so its buttons are not the 44px page ones. */
.btn--chrome { min-height: 30px; height: 30px; padding: 0 14px; }

.app > main { grid-column: 2; min-width: 0; }

/* Below the breakpoint the rail lies down above the content and stops being sticky, so the page keeps one scroll. */
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .rail {
    grid-row: auto;
    position: static;
    height: auto;
    overflow-y: visible;
    border-right: 0;
    border-bottom: var(--line) solid var(--ph-l3);
  }
  .rail__me { margin-top: 12px; }
  .crumbbar, .app > main { grid-column: 1; }
}

/* == buttons: 44px minimum, never wrapping == */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--hit);
  padding: 16px 22px;
  border: 0;
  background: none;
  color: var(--ph);
  font: var(--dm11);
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  text-shadow: var(--px-bold);
  white-space: nowrap;
  flex: none;
  cursor: pointer;
  border-radius: 0;
  -webkit-font-smoothing: none;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--focus-ring) var(--ph-l1);
}

/* Filled --ph, ink text. One per view. */
.btn--primary { background: var(--ph); color: var(--ink); }
.btn--primary:hover { background: var(--ph-hot); color: var(--ink); }

.btn--secondary { border: var(--line) solid var(--ph-l5); color: var(--ph); }
.btn--secondary:hover { background: var(--ph-wash); color: var(--ph); }

/* Dismissals, tertiary nav. */
.btn--ghost { padding: 16px 14px; color: var(--ph-dim); }
.btn--ghost:hover { background: rgba(var(--ph-rgb), .07); color: var(--ph); }

/* Alert outline, never filled: filled red reads as a live failure. */
.btn--danger { border: var(--line) solid rgba(var(--alert-rgb), .5); color: var(--alert); }
.btn--danger:hover { background: var(--alert-wash); color: var(--alert); }

.btn[disabled], .btn--disabled {
  background: var(--ph-l1);
  color: var(--ph-slot);
  border: 0;
  cursor: not-allowed;
  pointer-events: none;
}

/* == tabs: text on a rule, never boxes. Tabs change the page == */

.tabs {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  border-bottom: var(--line) solid var(--ph-l2);
}
.tab {
  height: 33px;
  display: flex;
  align-items: center;
  padding: 0;
  font: var(--dm11);
  letter-spacing: var(--track-button);
  color: var(--ph-dim);
  white-space: nowrap;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  -webkit-font-smoothing: none;
}
.tab:hover { color: var(--ph-text); }
.tab.on, .tab[aria-current] {
  color: var(--ph-bright);
  border-bottom-color: var(--ph);
  text-shadow: var(--px-bold);
}

/* == chips: filters and 2 to 4 way pickers, one always on. Chips change what is on the page == */

.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  min-height: var(--hit);
}
.chip {
  height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  font: var(--dm11);
  letter-spacing: 0;
  color: var(--ph-dim);
  border: var(--line) solid var(--ph-l4);
  background: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-font-smoothing: none;
}
.chip:hover { color: var(--ph-text); border-color: var(--ph-l5); }
.chip.on, .chip[aria-pressed="true"] {
  background: var(--ph);
  border-color: var(--ph);
  color: var(--ink);
  text-shadow: var(--px-bold);
}

/* == panels == */

.panel {
  background: var(--surface);
  border: var(--line) solid var(--ph-l3);
  padding: var(--panel-pad);
}
.panel--em { background: var(--em); }

.note {
  background: var(--em);
  border-left: 2px solid var(--ph);
  padding: 14px 16px;
  font: 400 13px/1.7 var(--face-mono);
  color: var(--ph-text2);
}
.note--bad {
  border-left-color: var(--alert);
  background: var(--em-bad);
}

/* == tables == */

.table { border-collapse: collapse; width: 100%; }
.table th {
  text-align: left;
  font: var(--dm11);
  letter-spacing: var(--track-micro);
  color: var(--ph-dim);
  text-transform: uppercase;
  padding: 0 14px 10px 0;
  border-bottom: var(--line) solid var(--ph-l2);
  white-space: nowrap;
  -webkit-font-smoothing: none;
}
.table td {
  font: var(--t-data);
  color: var(--ph-text2);
  padding: 9px 14px 9px 0;
  border-bottom: var(--line) solid var(--ph-wash);
  vertical-align: top;
}
.table__id { color: var(--ph); }
.table-scroll { overflow-x: auto; }

/* Filters belong to the table, inside its panel. */
.tfilter {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 0 0 16px;
  margin-bottom: 6px;
  border-bottom: var(--line) solid var(--ph-l2);
}
.tfilter .input { height: 32px; min-height: 32px; font-size: 12px; width: 200px; padding: 0 10px; }

/* == badges (status pills) == */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  font: var(--dm11);
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  text-shadow: var(--px-bold);
  white-space: nowrap;
  flex: none;
  border: var(--line) solid var(--ph-l5);
  color: var(--ph);
  -webkit-font-smoothing: none;
}
.pill--go { color: var(--go); border-color: var(--go-l); }
.pill--alert { color: var(--alert); border-color: var(--alert-l); }
.pill--info { color: var(--info); border-color: var(--info-l); }
.pill--teal { color: var(--teal); border-color: var(--teal-l); }
.pill--wait { color: var(--ph-dim); border-color: var(--ph-l3); }
.pill--off { color: var(--ph-mute2); border-color: var(--ph-l3); }
/* Compact, for table rows and cards. */
.pill--sm { padding: 3px 6px; letter-spacing: 0; text-shadow: none; }

/* == forms: micro label above the field, never inside == */

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
  font: var(--dm11);
  letter-spacing: var(--track-micro);
  color: var(--ph-dim);
  text-transform: uppercase;
  -webkit-font-smoothing: none;
}
.field__help {
  font: var(--t-caption);
  color: var(--ph-mute2);
  margin: 0;
}
/* Says what to do, not "invalid input". */
.field__error {
  font: var(--t-caption);
  color: var(--alert);
  margin: 0;
}

.input {
  width: 100%;
  min-height: var(--hit);
  background: var(--ink);
  border: var(--line) solid var(--ph-l4);
  color: var(--ph-text);
  font: 400 14px/1.4 var(--face-mono);
  padding: 12px 13px;
  outline: none;
  border-radius: 0;
}
.input::placeholder { color: var(--ph-dim); }
.input:focus {
  border-color: var(--ph);
  box-shadow: 0 0 0 var(--focus-ring) var(--ph-l1);
}
.input--error { border-color: var(--alert); }
.input[disabled] { color: var(--ph-slot); cursor: not-allowed; }

textarea.input { min-height: 96px; resize: vertical; }

/* Segmented for 2-4 options. A dropdown only past five. */
.segmented {
  display: flex;
  border: var(--line) solid var(--ph-l4);
}
.segmented__opt {
  flex: 1;
  height: var(--hit);
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--dm11);
  letter-spacing: 0;
  color: var(--ph-dim);
  background: none;
  border: 0;
  border-left: var(--line) solid var(--ph-l4);
  cursor: pointer;
  white-space: nowrap;
  -webkit-font-smoothing: none;
}
.segmented__opt:first-child { border-left: 0; }
.segmented__opt[aria-pressed="true"] { background: var(--ph); color: var(--ink); }

/* The switch paints 22px; its hit box is 44px, and the label is part of it. */
.toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--hit);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
}
.toggle__track {
  width: 44px;
  height: 22px;
  flex: none;
  background: var(--ph-slot);
  display: inline-flex;
  align-items: center;
  padding: 3px;
  justify-content: flex-start;
}
.toggle[aria-pressed="true"] .toggle__track { background: var(--ph); justify-content: flex-end; }
.toggle__knob { width: 16px; height: 16px; background: var(--ink); }
.toggle__label { font: 400 13px/1 var(--face-mono); color: var(--ph-text); }

/* Dashed border marks "you will not see this again". Never in a list view. */
.secret {
  display: flex;
  align-items: center;
  gap: var(--s2);
  background: var(--ink);
  border: var(--line) dashed var(--ph-l5);
  padding: 12px 13px;
}
.secret__code {
  font: var(--dm22-num);
  color: var(--ph);
  letter-spacing: var(--track-code);
  -webkit-font-smoothing: none;
}
/* A long value (a base32 TOTP secret) wraps and drops to mono; a six-character claim code keeps the 22px numeral. */
.secret--long { align-items: center; }
.secret--long .secret__code {
  font: 400 13px/1.5 var(--face-mono);
  letter-spacing: 0.06em;
  word-break: break-all;
  min-width: 0;
  -webkit-font-smoothing: antialiased;
}

/* The QR leads and the base32 is the fallback. The plate is the phosphor and
   the modules are the ink; the quiet zone is the rect, so no padding of its own. */
.qr-plate {
  display: flex;
  justify-content: center;
  padding: var(--s3) 0 var(--s2);
}
.qr-plate .qr { width: 176px; height: 176px; }
.qr__bg { fill: var(--ph); }
.qr__fg { fill: var(--ink); }

.qr-actions {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--s3);
}

.secret__expiry {
  margin-left: auto;
  font: var(--dm11);
  color: var(--alert);
  -webkit-font-smoothing: none;
}

/* == absence: empty, loading, error. Cy, one line, one action. == */

.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: var(--s6) 20px;
}
.state__title { font: var(--dm11-title); color: var(--ph-bright); -webkit-font-smoothing: none; }
.state--error .state__title { color: var(--alert); }
.state__note {
  margin: 0;
  font: 400 12.5px/1.6 var(--face-mono);
  color: var(--ph-mute2);
  max-width: 34em;
}

/* Loading is Cy's blink or a row of slot blocks. No spinners, no shimmer. */
.slots { display: flex; gap: var(--s1); }
.slot {
  width: var(--s5);
  height: var(--s2);
  background: var(--ph-slot);
}

/* == Cy: 1bpp art, sizes are whole multiples of 24 (or 16 for the cy16 glyphs);
   at any other size whole rows round away. He reads from --ph-brand, not --ph == */

.cy-sheet { position: absolute; width: 0; height: 0; overflow: hidden; }

.cy, .cy16 {
  display: inline-block;
  flex: none;
  color: var(--ph-brand);
}
.cy svg, .cy16 svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  shape-rendering: crispEdges;
}

.cy { width: 24px; height: 24px; vertical-align: -5px; }
.cy--48 { width: 48px; height: 48px; }
.cy--72 { width: 72px; height: 72px; }
.cy--96 { width: 96px; height: 96px; }

/* On a filled band the head IS the band: only his features are drawn, in ink. */
.cy--ink { color: var(--ink); }

.cy16 { width: 16px; height: 16px; vertical-align: -3px; }
.cy16--32 { width: 32px; height: 32px; }
.cy16--48 { width: 48px; height: 48px; }

/* == tube picker == */

.tubes { display: flex; gap: var(--s1); flex-wrap: wrap; }
.tube-swatch {
  min-height: var(--hit);
  padding: 0 var(--s2);
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  border: var(--line) solid var(--ph-l4);
  background: none;
  color: var(--ph-dim);
  font: var(--dm11);
  letter-spacing: var(--track-micro);
  cursor: pointer;
  white-space: nowrap;
  -webkit-font-smoothing: none;
}
.tube-swatch[aria-pressed="true"] { color: var(--ph); border-color: var(--ph); }
.tube-swatch__dot { width: 10px; height: 10px; flex: none; }