@import url("/assets/fonts/fonts.css");

/* ===========================================================================
   Registration Portal — "warm paper, clinical signal"

   A calm off-white ground so the only saturated things on screen are
   statuses. Serif for headings keeps it human; mono for dates and counts
   keeps it checkable.

   The five status colours are the vocabulary of the whole product and they
   mean the same thing on every screen, every time:

     cleared   green   nothing to do
     expiring  amber   valid now, invalid before they finish
     missing   rust    nothing on file, or sent back
     review    blue    waiting on Katherine
     neutral   stone   not required here

   Deliberately light-only. This is a specific art direction — a warm paper
   ground is the point — and a dark inversion would be a different product.
   =========================================================================== */

:root {
  --paper:      #EFEAE1;
  --surface:    #F7F4EF;
  --card:       #FFFFFF;
  --card-soft:  #FCFBF8;
  --ink:        #191714;
  --ink-2:      #3D3830;
  --ink-3:      #544D43;
  --muted:      #6B6459;
  --muted-2:    #8A8377;
  --muted-3:    #9A9284;
  --faint:      #A8A093;

  --cleared:    #1F6F5C;
  --cleared-bg: #E6F0EC;
  --expiring:   #B8791F;
  --expiring-fg:#8A5A12;
  --expiring-bg:#FBF0DC;
  --missing:    #A8412B;
  --missing-fg: #8E3320;
  --missing-bg: #F7E4DF;
  --review:     #2A5C8A;
  --review-fg:  #1B3E5E;
  --review-bg:  #E8EDF5;
  --neutral-bg: #F2EFE9;

  --line:       rgba(25, 23, 20, .10);
  --line-soft:  rgba(25, 23, 20, .06);
  --line-firm:  rgba(25, 23, 20, .16);
  --swatch:     #EAE4D9;

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-sm: 6px;  --r:  9px;  --r-lg: 11px;  --r-pill: 999px;
  --sidebar: 208px;
  --shadow: 0 1px 3px rgba(25, 23, 20, .07);
  --shadow-lift: 0 6px 20px rgba(25, 23, 20, .10);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--review); text-decoration: none; }
a:hover { color: var(--review-fg); text-decoration: underline; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; margin: 0; }
h1 { font-size: 34px; line-height: 1.08; }
h2 { font-size: 26px; line-height: 1.12; }
h3 { font-size: 20px; line-height: 1.2; }

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }
.muted { color: var(--muted); }
.muted-2 { color: var(--muted-2); }
.small { font-size: 12px; }
.xs { font-size: 11px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.grow { flex: 1; min-width: 0; }
.pretty { text-wrap: pretty; }

.eyebrow {
  font: 400 11px/1 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.eyebrow--tight { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; }

/* --- Layout --------------------------------------------------------------- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar);
  flex: none;
  background: var(--ink);
  color: var(--paper);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar__brand {
  padding: 0 20px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
}
.sidebar__brand:hover { text-decoration: none; }
.mark {
  width: 26px; height: 26px; flex: none;
  border-radius: var(--r-sm);
  background: var(--cleared);
  display: flex; align-items: center; justify-content: center;
  font: 600 12px var(--mono); color: #fff;
}
.sidebar__name { font: 500 13px var(--sans); color: var(--paper); }
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }
.sidebar__link {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font: 400 13px var(--sans);
  color: rgba(239, 234, 225, .72);
  display: flex; align-items: center; gap: 8px;
}
.sidebar__link:hover { background: rgba(255, 255, 255, .06); color: var(--paper); text-decoration: none; }
.sidebar__link.is-on { background: rgba(255, 255, 255, .11); color: var(--paper); font-weight: 500; }
.sidebar__count { margin-left: auto; font: 500 10.5px var(--mono); color: #E8A88C; }
.sidebar__foot {
  margin-top: auto;
  padding: 16px 20px 0;
  margin-inline: 8px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}
.sidebar__stat { font: 500 19px var(--mono); color: var(--paper); }
.sidebar__sub { font: 400 11px var(--sans); color: rgba(239, 234, 225, .55); margin-top: 2px; }

.main { flex: 1; background: var(--surface); min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 56px; flex: none;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  display: flex; align-items: center; gap: 14px;
  padding: 0 24px;
  position: sticky; top: 0; z-index: 20;
}
.search {
  flex: 1; max-width: 340px;
}
.search input {
  width: 100%; height: 33px;
  border: 1px solid rgba(25, 23, 20, .14);
  border-radius: 7px;
  padding: 0 12px;
  font: 400 12.5px var(--sans);
  background: var(--card);
  color: var(--ink);
}
.search input::placeholder { color: var(--muted-3); }
.search input:focus { outline: 2px solid rgba(42, 92, 138, .35); outline-offset: -1px; border-color: var(--review); }

.avatar {
  width: 29px; height: 29px; flex: none;
  border-radius: 50%;
  background: #DCD5C8;
  display: flex; align-items: center; justify-content: center;
  font: 600 11px var(--sans); color: var(--ink-3);
}
.avatar:hover { text-decoration: none; color: var(--ink-3); }

.page { flex: 1; padding: 24px; min-width: 0; }
.page--wide { padding: 24px 26px; }
.page__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.page__lede { font: 400 13px/1.5 var(--sans); color: var(--muted); margin: 0 0 18px; max-width: 78ch; }

/* --- Cards ---------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.card--pad { padding: 16px 18px; }
.card__head {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.card__title { font: 600 12px var(--sans); }
.card__foot {
  padding: 11px 18px;
  background: var(--card-soft);
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font: 400 11.5px var(--sans); color: var(--muted-2);
}

.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: center; gap: 10px; }
.row--baseline { align-items: baseline; }
.wrap { flex-wrap: wrap; }
.split { display: flex; gap: 18px; align-items: flex-start; }
.split__aside { width: 300px; flex: none; }
@media (max-width: 1180px) {
  .split { flex-direction: column; }
  .split__aside { width: 100%; }
}

/* --- Stat tiles ----------------------------------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px 14px;
  display: block;
}
.tile:hover { text-decoration: none; border-color: var(--line-firm); }
.tile__n { font: 500 24px/1 var(--mono); color: var(--ink); }
.tile__l { font: 400 11px/1.3 var(--sans); color: var(--muted); margin-top: 4px; }
.tile--missing  .tile__n { color: var(--missing); }
.tile--expiring .tile__n { color: var(--expiring); }
.tile--cleared  .tile__n { color: var(--cleared); }
.tile--review   .tile__n { color: var(--review); }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 32px; padding: 0 13px;
  border-radius: 7px;
  border: 1px solid var(--line-firm);
  background: var(--card);
  color: var(--ink);
  font: 500 12.5px var(--sans);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { text-decoration: none; color: var(--ink); background: var(--surface); }
.btn--primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--primary:hover { background: #2B2723; color: #fff; }
.btn--go { background: var(--cleared); border-color: var(--cleared); color: #fff; }
.btn--go:hover { background: #1A5E4E; color: #fff; }
.btn--danger { border-color: rgba(168, 65, 43, .4); color: var(--missing); background: var(--card); }
.btn--danger:hover { background: var(--missing-bg); color: var(--missing-fg); }
.btn--lg { height: 38px; padding: 0 16px; font-size: 13px; }
.btn--sm { height: 26px; padding: 0 10px; font-size: 11.5px; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }

.link-action { font: 500 11.5px var(--sans); color: var(--review); white-space: nowrap; }

/* --- Chips, pills, filters ------------------------------------------------ */

.chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 11px;
  border-radius: var(--r-pill);
  background: var(--neutral-bg);
  color: var(--ink-3);
  font: 500 11.5px var(--sans);
  white-space: nowrap;
  border: 1px solid transparent;
}
.chip:hover { text-decoration: none; border-color: var(--line-firm); }
.chip.is-on { background: var(--ink); color: #fff; }
.chip--dashed { background: transparent; border: 1px dashed rgba(25, 23, 20, .22); color: var(--muted); }
.chip__n { font-family: var(--mono); font-size: 11px; opacity: .8; }

.pill {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 9px;
  border-radius: var(--r-pill);
  font: 500 10.5px var(--sans);
  white-space: nowrap;
  background: var(--neutral-bg); color: var(--ink-3);
}
.pill--lg { height: 24px; font-size: 11px; padding: 0 10px; }

.is-cleared  { background: var(--cleared-bg);  color: var(--cleared); }
.is-expiring { background: var(--expiring-bg); color: var(--expiring-fg); }
.is-missing  { background: var(--missing-bg);  color: var(--missing-fg); }
.is-review   { background: var(--review-bg);   color: var(--review); }
.is-neutral  { background: var(--neutral-bg);  color: var(--muted-2); }

.t-cleared  { color: var(--cleared); }
.t-expiring { color: var(--expiring-fg); }
.t-missing  { color: var(--missing-fg); }
.t-review   { color: var(--review); }

/* --- Tables --------------------------------------------------------------- */

.tbl { width: 100%; }
.tbl__head {
  display: flex; align-items: center;
  padding: 9px 18px;
  border-bottom: 1px solid var(--line);
  font: 600 10.5px var(--mono);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted-2);
}
.tbl__row {
  display: flex; align-items: center;
  padding: 11px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.tbl__row:last-child { border-bottom: 0; }
.tbl__row:hover { background: var(--card-soft); }
.tbl__row--sub { padding-block: 9px; }
.cell-name { font: 500 13px/1.3 var(--sans); }
.cell-sub  { font: 400 11px/1.35 var(--sans); color: var(--muted-2); margin-top: 2px; }

/* Spine rows — a rounded row with a coloured left bar carrying the state. */
.spine {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.spine:last-child { border-bottom: 0; }
.spine:hover { background: var(--card-soft); }
.spine__bar { width: 5px; height: 34px; border-radius: 3px; flex: none; background: var(--swatch); }
.spine__bar.is-cleared  { background: var(--cleared); }
.spine__bar.is-expiring { background: var(--expiring); }
.spine__bar.is-missing  { background: var(--missing); }
.spine__bar.is-review   { background: var(--review); }

/* --- Progress ------------------------------------------------------------- */

.meter { height: 5px; border-radius: 3px; background: var(--swatch); overflow: hidden; display: flex; }
.meter--lg { height: 10px; border-radius: 5px; }
.meter__seg { height: 100%; }
.meter__seg.is-cleared  { background: var(--cleared); }
.meter__seg.is-expiring { background: var(--expiring); }
.meter__seg.is-missing  { background: var(--missing); }
.meter__seg.is-review   { background: var(--review); }

.ring {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.ring__in {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--card);
  display: flex; align-items: center; justify-content: center;
  font: 500 11px var(--mono);
}

/* --- The credential pip strip -------------------------------------------- */
/* One pip per required credential, in a stable order, so the shape of a
   person's compliance is recognisable at a glance across screens. */

.pips { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.pip {
  width: 14px; height: 20px;
  border-radius: 3px;
  background: var(--swatch);
  display: block;
}
.pip.is-cleared  { background: var(--cleared); }
.pip.is-expiring { background: var(--expiring); }
.pip.is-missing  { background: var(--missing); }
.pip.is-review   { background: var(--review); }
.pip.is-na       { background: var(--neutral-bg); }
.pips__ratio { margin-left: 8px; font: 400 11px var(--mono); color: var(--muted-2); }

/* Matrix cells */
.mcell {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font: 500 10px var(--mono);
  margin: 0 auto;
}

/* --- Forms ---------------------------------------------------------------- */

.field { display: block; margin-bottom: 12px; }
.field__label {
  display: block;
  font: 600 10px var(--mono);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 5px;
}
.field__label--warn { color: var(--expiring); }
.input, select.input, textarea.input {
  width: 100%;
  height: 36px;
  border: 1px solid rgba(25, 23, 20, .14);
  border-radius: 7px;
  padding: 0 10px;
  font: 400 12.5px var(--sans);
  background: var(--card);
  color: var(--ink);
}
textarea.input { height: auto; padding: 9px 10px; line-height: 1.5; resize: vertical; }
.input.mono { font-family: var(--mono); }
.input:focus { outline: 2px solid rgba(42, 92, 138, .3); outline-offset: -1px; border-color: var(--review); }
.input--warn { border: 1.5px solid var(--expiring); background: #FEFAF2; }
.field__hint { font: 400 11px/1.45 var(--sans); color: var(--muted-2); margin-top: 6px; }

.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: var(--cleared); }

.toggle {
  width: 38px; height: 22px; flex: none;
  border-radius: var(--r-pill);
  background: rgba(25, 23, 20, .18);
  position: relative;
  border: 0; padding: 0; cursor: pointer;
  transition: background .12s ease;
}
.toggle__dot {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  transition: left .12s ease;
}
.toggle.is-on { background: var(--cleared); }
.toggle.is-on .toggle__dot { left: 19px; }
.toggle--sm { width: 34px; height: 20px; }
.toggle--sm .toggle__dot { width: 14px; height: 14px; }
.toggle--sm.is-on .toggle__dot { left: 17px; }

.dropzone {
  border: 1.5px dashed rgba(31, 111, 92, .4);
  border-radius: var(--r);
  background: #F6FAF8;
  padding: 26px;
  text-align: center;
}
.dropzone__t { font: 500 13px var(--sans); color: var(--cleared); }
.dropzone__s { font: 400 11.5px var(--sans); color: #6B8B80; margin-top: 4px; }

/* --- Notes and banners ---------------------------------------------------- */

.note {
  padding: 12px 14px;
  border-radius: var(--r);
  font: 400 12px/1.6 var(--sans);
}
.note--info   { background: var(--review-bg);   color: #3D5570; border: 1px solid rgba(42, 92, 138, .18); }
.note--warn   { background: var(--expiring-bg); color: var(--expiring-fg); border: 1px solid rgba(184, 121, 31, .25); }
.note--stop   { background: var(--missing-bg);  color: var(--missing-fg); border: 1px solid rgba(168, 65, 43, .25); }
.note--ok     { background: var(--cleared-bg);  color: var(--cleared); border: 1px solid rgba(31, 111, 92, .2); }
.note--plain  { background: var(--surface);     color: var(--ink-3); border: 1px solid var(--line); }

.demo-bar {
  background: var(--ink);
  color: rgba(239, 234, 225, .82);
  font: 400 11.5px/1.45 var(--sans);
  padding: 7px 24px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.demo-bar strong { color: #fff; font-weight: 600; }
.demo-bar a { color: #E8A88C; }

.flashes { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.flash {
  padding: 11px 14px;
  border-radius: var(--r);
  box-shadow: var(--shadow-lift);
  font: 400 12.5px/1.5 var(--sans);
  background: var(--ink); color: #fff;
}
.flash.is-warn { background: var(--expiring-bg); color: var(--expiring-fg); border: 1px solid rgba(184,121,31,.3); }
.flash.is-stop { background: var(--missing-bg);  color: var(--missing-fg); border: 1px solid rgba(168,65,43,.3); }

/* --- Horizon (the rolling-days home screen) ------------------------------- */

.bucket { margin-bottom: 18px; }
.bucket__head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 7px; }
.bucket__label {
  font: 600 11px var(--mono);
  letter-spacing: .06em; text-transform: uppercase;
}
.bucket__rule { flex: 1; height: 1px; background: var(--line); }
.bucket__sum { font: 400 11px var(--mono); color: var(--muted-2); white-space: nowrap; }

.days { width: 54px; flex: none; text-align: center; }
.days__n { font: 500 17px/1 var(--mono); }
.days__l { font: 400 9px var(--sans); color: var(--faint); margin-top: 2px; }

/* --- Triage deck ---------------------------------------------------------- */

.deck { position: relative; max-width: 520px; }
.deck__shadow {
  position: absolute; left: 8px; right: 8px; top: 16px; bottom: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); opacity: .5;
}
.deck__shadow--2 { left: 4px; right: 4px; top: 8px; opacity: .75; }
.deck__card {
  position: relative;
  background: var(--card);
  border: 1px solid rgba(25, 23, 20, .14);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.deck__body { padding: 18px; }
.deck__statement { font: 400 15px/1.5 var(--sans); color: var(--ink); margin-bottom: 16px; }
.deck__statement strong { font-weight: 600; }
.choice {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  min-height: 38px; padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--line-firm);
  background: var(--card);
  font: 500 12.5px/1.35 var(--sans);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.choice:hover { background: var(--surface); text-decoration: none; color: var(--ink); }
.choice--primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.choice--primary:hover { background: #2B2723; color: #fff; }
.choice__key {
  font: 500 10px var(--mono);
  background: rgba(25, 23, 20, .08);
  padding: 2px 5px; border-radius: 3px;
  flex: none;
}
.choice--primary .choice__key { background: rgba(255, 255, 255, .16); }

/* --- Document review (read and confirm) ----------------------------------- */

.reader { display: flex; min-height: 560px; }
@media (max-width: 1000px) { .reader { flex-direction: column; } }
.reader__doc {
  flex: 1; min-width: 0;
  background: #2A2724;
  display: flex; flex-direction: column;
}
.reader__bar {
  flex: none; padding: 11px 16px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  font: 500 12px var(--sans); color: var(--paper);
}
.reader__bar .muted { color: rgba(239, 234, 225, .5); }
.reader__stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.reader__side {
  width: 360px; flex: none;
  background: var(--card);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--line);
}
@media (max-width: 1000px) { .reader__side { width: 100%; border-left: 0; border-top: 1px solid var(--line); } }

/* A stand-in for the scanned page: enough to read the layout, never
   pretending to be a real document. */
.scan {
  width: 100%; max-width: 340px;
  aspect-ratio: 8.5 / 11;
  background: #F4F1EA;
  border-radius: 3px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
  padding: 26px;
  display: flex; flex-direction: column; gap: 9px;
}
.scan__line { height: 6px; background: #E2DDD2; border-radius: 2px; }
.scan__line--head { height: 9px; background: #D6D0C4; }
.scan__hl {
  margin: 12px 0; padding: 10px;
  border: 2px solid var(--expiring);
  border-radius: 4px;
  background: rgba(184, 121, 31, .09);
  display: flex; flex-direction: column; gap: 6px;
}
.scan__hl .scan__line { background: #C9B48C; }
.scan__sig { margin-top: auto; height: 22px; width: 44%; background: #DCD5C8; border-radius: 2px; }

/* --- Badge proof ---------------------------------------------------------- */

.badge-proof { border: 1px solid rgba(25, 23, 20, .12); border-radius: 8px; overflow: hidden; background: var(--card); }
.badge-proof__stripe { height: 7px; background: var(--cleared); }
.badge-proof__body { padding: 12px; display: flex; gap: 11px; }
.badge-proof__photo {
  width: 60px; height: 74px; flex: none;
  border-radius: 4px; background: var(--swatch);
  display: flex; align-items: center; justify-content: center;
  font: 400 9px var(--sans); color: var(--muted-3); text-align: center;
}
.badge-proof__name { font: 600 13px/1.2 var(--sans); }
.badge-proof__line { font: 400 10.5px var(--sans); color: var(--muted); margin-top: 2px; }
.badge-proof__code {
  height: 22px; margin: 0 12px 12px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 9px);
}
.badge-proof--void { opacity: .5; }
.badge-proof--void .badge-proof__stripe { background: var(--missing); }

/* --- Email preview -------------------------------------------------------- */

.mail { background: var(--card); border: 1px solid rgba(25, 23, 20, .12); border-radius: var(--r); overflow: hidden; }
.mail__head { padding: 11px 16px; border-bottom: 1px solid var(--line-soft); background: var(--card-soft); }
.mail__subject { font: 500 12px var(--sans); }
.mail__from { font: 400 11px var(--sans); color: var(--muted-2); margin-top: 2px; }
.mail__body { padding: 22px 24px; font: 400 14.5px/1.65 var(--sans); color: var(--ink); white-space: pre-wrap; }
.mail__foot {
  padding: 12px 24px; background: var(--card-soft);
  border-top: 1px solid var(--line-soft);
  font: 400 10.5px/1.5 var(--sans); color: var(--muted-3);
}

/* --- Timeline ------------------------------------------------------------- */

.tl { display: flex; gap: 12px; }
.tl__rail { width: 14px; flex: none; display: flex; flex-direction: column; align-items: center; }
.tl__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--swatch); margin-top: 5px; flex: none; }
.tl__line { flex: 1; width: 1px; background: rgba(25, 23, 20, .12); }
.tl__body { flex: 1; min-width: 0; padding-bottom: 14px; }
.tl__t { font: 500 12px var(--sans); }
.tl__s { font: 400 11px/1.5 var(--sans); color: var(--muted-2); margin-top: 2px; }
.tl__w { font: 400 10px var(--mono); color: var(--faint); margin-top: 3px; }

/* --- Sign in -------------------------------------------------------------- */

.signin { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.signin__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1100px; width: 100%; align-items: start; }
@media (max-width: 940px) { .signin__grid { grid-template-columns: 1fr; } }
.signin__flag {
  padding: 9px 16px; background: var(--ink); color: #fff;
  font: 500 11px var(--mono); letter-spacing: .04em;
}
.persona {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.persona:hover { border-color: var(--line-firm); background: var(--surface); text-decoration: none; color: var(--ink); }
.persona__avatar {
  width: 34px; height: 34px; flex: none; border-radius: 8px;
  background: var(--swatch);
  display: flex; align-items: center; justify-content: center;
  font: 500 12px var(--sans); color: var(--muted-2);
}

/* --- Utility -------------------------------------------------------------- */

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1200px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.scroll-x { overflow-x: auto; }
.hr { height: 1px; background: var(--line); border: 0; margin: 16px 0; }

.empty {
  padding: 40px 24px; text-align: center;
  color: var(--muted-2);
  font: 400 13px/1.6 var(--sans);
}
.empty__t { font-family: var(--serif); font-size: 22px; color: var(--ink); margin-bottom: 6px; }

.steps { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.step {
  flex: 1; min-width: 140px;
  padding: 10px 12px; border-radius: 8px;
  background: var(--card); border: 1px solid rgba(25, 23, 20, .12);
}
.step__n { font: 500 10px var(--mono); color: var(--muted-3); }
.step__t { font: 500 12px var(--sans); color: var(--muted-3); margin-top: 3px; }
.step.is-done { background: var(--cleared-bg); border-color: rgba(31, 111, 92, .2); }
.step.is-done .step__n, .step.is-done .step__t { color: var(--cleared); }
.step.is-now { background: var(--ink); border-color: var(--ink); }
.step.is-now .step__n { color: rgba(255, 255, 255, .6); }
.step.is-now .step__t { color: #fff; }

@media print {
  .sidebar, .topbar, .demo-bar, .flashes, .btn { display: none !important; }
  body { background: #fff; }
  .page { padding: 0; }
}