/* ============================================================================
   HR Letter Request System — visual system

   The product issues official letters, so the interface borrows from that
   world: filing references set in monospace, headings and letter content set
   in a serif, ruled paper, folded corners and a brass stamp for anything that
   has been issued. Sans-serif is reserved for application chrome, serif for
   anything that represents the document itself.
   ========================================================================= */

:root {
  /* Height the sticky topbar is pinned to. The console drawer and its scrim
     start below it so the menu button stays reachable while the menu is open. */
  --topbar-h: 58px;

  /* ink */
  --ink: #131a26;
  --ink-2: #48546b;
  --ink-3: #7d8899;

  /* surfaces */
  --paper: #ffffff;
  --paper-2: #fbfcfe;
  --canvas: #eef1f7;
  --edge: #d9e0ea;
  --edge-soft: #e9edf4;

  /* brand — sampled from the NSML mark */
  --navy: #123184;          /* the NSML wordmark */
  --navy-2: #1c48b4;
  --navy-3: #2f63d8;
  --navy-wash: #e8edfa;

  --green: #00600C;         /* the deep crescent green */
  --green-2: #0a7a1c;
  --lime: #86C33F;          /* the lime highlight */
  --lime-wash: #eef7e2;
  --sky: #6BBFF9;           /* the blue swoosh */
  --sky-wash: #e7f4fe;

  /* accent used for anything issued, selected or stamped */
  --stampink: #00600C;
  --stampline: #86C33F;
  --stampwash: #f2f9e9;

  /* status */
  --go: #00600C;
  --go-wash: #e8f4de;
  --wait: #8a5410;
  --wait-wash: #fbefda;
  --stop: #99332b;
  --stop-wash: #f9e9e7;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;

  --lift-1: 0 1px 2px rgba(18, 49, 132, .06);
  --lift-2: 0 1px 2px rgba(18, 49, 132, .06), 0 10px 28px -12px rgba(18, 49, 132, .2);
  --lift-3: 0 2px 4px rgba(18, 49, 132, .08), 0 24px 56px -20px rgba(18, 49, 132, .3);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--canvas);
  background-image:
    radial-gradient(1100px 460px at 78% -12%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(760px 380px at 4% 0%, #e4ebf6 0%, rgba(228, 235, 246, 0) 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 640; letter-spacing: -.014em; line-height: 1.22; }
h1 { font-size: 1.55rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .96rem; }
p { margin: 0 0 .8rem; }
a { color: var(--navy-2); text-underline-offset: 2px; }
a:hover { color: var(--navy-3); }

.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); font-size: .85rem; }
.mono { font-family: var(--mono); font-size: .92em; }
.hidden { display: none !important; }
.right { text-align: right; }
.stack > * + * { margin-top: 1.1rem; }
.row { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* Small uppercase label, set in mono — the filing-reference voice used for
   eyebrows, table headers and field labels. */
.eyebrow, th, .field label, .sidebar__label, .pairs div span, .tile span, .choice__key {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* ==========================================================================
   Sign in
   ========================================================================= */

.signin { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }

.signin__brand {
  position: relative;
  overflow: hidden;
  padding: 3.4rem 3.2rem;
  color: #d7e2f6;
  background:
    radial-gradient(760px 480px at 12% 96%, rgba(0, 96, 12, .55) 0%, rgba(0, 96, 12, 0) 62%),
    radial-gradient(820px 460px at 92% 6%, rgba(107, 191, 249, .28) 0%, rgba(107, 191, 249, 0) 60%),
    linear-gradient(165deg, #0b1f5c 0%, #123184 55%, #14357f 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}

/* The crescent from the mark, sitting behind the copy. */
.signin__brand::after {
  content: "";
  position: absolute;
  right: -14%;
  top: -12%;
  width: 78%;
  aspect-ratio: 1;
  background: url("nsml-mark.png") no-repeat center / contain;
  opacity: .1;
  transform: rotate(-12deg);
  pointer-events: none;
}

/* faint ruled paper texture behind the panel */
.signin__brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom, rgba(255, 255, 255, .05) 0 1px, rgba(255, 255, 255, 0) 1px 34px);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  pointer-events: none;
}

.signin__brand > * { position: relative; }
.signin__mark { font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lime); margin-bottom: 1.1rem; }
.signin__brand h1 { font-family: var(--serif); font-weight: 600; font-size: 2.5rem; line-height: 1.12; letter-spacing: -.02em; color: #fff; max-width: 14ch; }
.signin__brand p { max-width: 40ch; color: #b6c7ea; margin-top: .9rem; }

.signin__steps { list-style: none; padding: 0; margin: 2.2rem 0 0; max-width: 34ch; }
.signin__steps li {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  align-items: baseline;
  gap: .4rem;
  padding: .5rem 0;
  border-top: 1px solid rgba(255, 255, 255, .09);
  color: #c3d2ee;
  font-size: .9rem;
}
.signin__steps li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .09); }
.signin__steps span { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--lime); }

/* The hero: a letter, rendered in CSS, stamped as issued. */
.proof {
  position: absolute;
  right: -3.5rem;
  bottom: -4.5rem;
  width: 310px;
  padding: 1.5rem 1.4rem 2.4rem;
  background: #fdfdfb;
  border-radius: 3px 3px 3px 3px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .55);
  transform: rotate(-6deg);
  pointer-events: none;
}
.proof::after { /* folded corner */
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border-width: 0 0 30px 30px;
  border-style: solid;
  border-color: transparent transparent #dfe3e8 transparent;
  filter: drop-shadow(-2px -2px 2px rgba(0, 0, 0, .12));
}
.proof__org { font-family: var(--serif); font-size: .95rem; font-weight: 700; color: #0c3090; letter-spacing: .02em; }
.proof__meta { font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; color: #9aa4b2; margin: .15rem 0 .9rem; }
.proof__rule { height: 1px; background: #d7dce3; margin: .7rem 0 1rem; }
.proof__line { height: 6px; border-radius: 3px; background: #e4e8ee; margin-bottom: .55rem; }
.proof__line--dark { background: #ccd4de; }
.proof__seal {
  position: absolute;
  right: 1.1rem;
  bottom: 3.1rem;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .18em;
  color: rgba(0, 113, 74, .8);
  border: 2px solid rgba(0, 113, 74, .5);
  border-radius: 4px;
  padding: .3rem .55rem;
  transform: rotate(-11deg);
}

.signin__panel {
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
}
.signin__form { width: 100%; max-width: 355px; }
.signin__form h2 { font-size: 1.35rem; }

/* ==========================================================================
   Shell
   ========================================================================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .8rem 1.6rem;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--edge);
}
.topbar__title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.topbar__title small, .topbar__title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__title small {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.topbar__title span { font-weight: 620; }
.topbar__right { flex: none; }

/* The console menu button. Only ever visible once the sidebar becomes a
   drawer, so it is hidden here and switched on at the drawer breakpoint. */
.iconbtn {
  display: none;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  background: var(--paper);
  box-shadow: var(--lift-1);
  cursor: pointer;
}
.iconbtn span { display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--ink-2); }
.iconbtn:active { background: #f4f7fb; }

.scrim { display: none; }

.shell { max-width: 1060px; margin: 0 auto; padding: 2rem 1.5rem 5rem; }
.shell--wide { max-width: 1320px; }

.console { display: grid; grid-template-columns: 236px 1fr; min-height: calc(100vh - 57px); }

.sidebar {
  padding: 1.1rem .8rem;
  border-right: 1px solid var(--edge);
  background: linear-gradient(to bottom, #fbfcfe, #f2f5fc);
}
.sidebar nav { display: flex; flex-direction: column; gap: 1px; position: sticky; top: 74px; }
.sidebar button {
  position: relative;
  text-align: left;
  border: 0;
  background: none;
  font: inherit;
  font-size: .92rem;
  color: var(--ink-2);
  padding: .5rem .7rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.sidebar button:hover { background: #e8edf8; color: var(--ink); }
.sidebar button[aria-current="true"] { background: var(--paper); color: var(--navy); font-weight: 620; box-shadow: var(--lift-1); }
.sidebar button[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: -0.8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 2px 2px 0;
  background: var(--stampline);
}
.sidebar__label { color: var(--ink-3); padding: 1.1rem .7rem .35rem; margin: 0; }

.console__main { padding: 2rem 2.2rem 5rem; overflow-x: auto; }

/* ==========================================================================
   Cards and tiles
   ========================================================================= */

.card {
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  box-shadow: var(--lift-2);
  overflow: hidden;
}
.card__head { padding: 1.05rem 1.3rem; border-bottom: 1px solid var(--edge-soft); background: linear-gradient(to bottom, #fdfefe, #fafbfd); }
.card__head p { margin: .2rem 0 0; font-size: .87rem; color: var(--ink-2); }
.card__body { padding: 1.3rem; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }
.tile {
  position: relative;
  padding: 1rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  box-shadow: var(--lift-1);
  overflow: hidden;
}
.tile::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--lime), var(--green));
}
.tile b { display: block; font-size: 1.85rem; font-weight: 620; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tile span { display: block; color: var(--ink-3); margin-top: .1rem; }

/* ==========================================================================
   Letter type chooser — each option is a miniature letter
   ========================================================================= */

.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: .85rem; }

.choice {
  position: relative;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 1.05rem 1.1rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  box-shadow: var(--lift-1);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.choice::after { /* folded corner, lifts on hover */
  content: "";
  position: absolute;
  right: 0; top: 0;
  border-width: 0 22px 22px 0;
  border-style: solid;
  border-color: var(--edge-soft) var(--canvas) transparent transparent;
  transition: border-width .16s ease;
}
.choice:hover { transform: translateY(-2px); box-shadow: var(--lift-2); border-color: #bfcde0; }
.choice:hover::after { border-width: 0 28px 28px 0; }
.choice__key { display: block; color: var(--ink-3); margin-bottom: .55rem; }
.choice b { display: block; font-family: var(--serif); font-size: 1.06rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: .2rem; }
.choice span { font-size: .87rem; color: var(--ink-2); }

/* ruled lines standing in for the letter body */
.choice__lines { display: block; margin-top: .95rem; }
.choice__lines i { display: block; height: 5px; border-radius: 3px; background: var(--edge-soft); margin-bottom: .35rem; }
.choice__lines i:nth-child(2) { width: 88%; }
.choice__lines i:nth-child(3) { width: 62%; }

.choice[aria-pressed="true"] {
  border-color: var(--stampline);
  background: linear-gradient(to bottom, #fbfef7, #fdfffb);
  box-shadow: 0 0 0 1px var(--stampline) inset, var(--lift-2);
}
.choice[aria-pressed="true"]::after { border-color: var(--stampwash) var(--canvas) transparent transparent; }
.choice[aria-pressed="true"] .choice__lines i { background: #dceac6; }
.choice[aria-pressed="true"]::before { /* stamped */
  content: "SELECTED";
  position: absolute;
  right: .85rem;
  bottom: .8rem;
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .18em;
  color: var(--stampink);
  border: 1.5px solid rgba(0, 96, 12, .45);
  border-radius: 3px;
  padding: .18rem .4rem;
  transform: rotate(-8deg);
}

/* ==========================================================================
   Forms
   ========================================================================= */

.field { margin-bottom: 1.05rem; }
.field label { display: block; color: var(--ink-2); margin-bottom: .4rem; }
.field .hint { font-size: .8rem; color: var(--ink-3); margin: .35rem 0 0; }
.req { color: var(--stop); }

input, select, textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  padding: .58rem .7rem;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
input::placeholder, textarea::placeholder { color: #a8b2c0; }
input:hover, select:hover, textarea:hover { border-color: #c3cdda; }
textarea { min-height: 98px; resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--navy-3);
  box-shadow: 0 0 0 3px rgba(47, 111, 184, .16);
}
button:focus-visible, .choice:focus-visible, a:focus-visible {
  outline: 2px solid var(--navy-3);
  outline-offset: 2px;
}
input[type="file"] { padding: .45rem; background: var(--paper); }

/* A field that cannot be typed in has to look that way, or people try anyway.
   -webkit-text-fill-color is needed because Safari and iOS ignore `color` on a
   disabled control and grey the text to their own value. */
input:disabled, select:disabled, textarea:disabled {
  background: #f3f5f9;
  border-color: var(--edge-soft);
  border-style: dashed;
  color: var(--ink-2);
  -webkit-text-fill-color: var(--ink-2);
  opacity: 1;
  cursor: default;
}
input:disabled:hover, select:disabled:hover, textarea:disabled:hover { border-color: var(--edge-soft); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }

.btn {
  font: inherit;
  font-size: .93rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: .55rem 1.1rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #fff;
  background: linear-gradient(to bottom, #1a3f9c, #123184);
  box-shadow: var(--lift-1);
  transition: transform .12s ease, box-shadow .14s ease, background .14s ease;
}
.btn:hover { background: linear-gradient(to bottom, #2049b0, #16388f); box-shadow: var(--lift-2); color: #fff; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--ghost { background: var(--paper); border-color: var(--edge); color: var(--ink); }
.btn--ghost:hover { background: #f4f7fb; border-color: #c3cdda; color: var(--ink); }
.btn--stop { background: linear-gradient(to bottom, #ac3b32, #8d2e26); }
.btn--stop:hover { background: linear-gradient(to bottom, #bb433a, #99332b); }
.btn--sm { padding: .34rem .7rem; font-size: .84rem; }
.btn--link { background: none; border: 0; box-shadow: none; color: var(--navy-2); padding: 0; font-weight: 500; }
.btn--link:hover { background: none; box-shadow: none; color: var(--navy-3); text-decoration: underline; }

/* ==========================================================================
   Tables
   ========================================================================= */

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  color: var(--ink-3);
  font-weight: 500;
  padding: .65rem 1.1rem;
  background: #f7f9fc;
  border-bottom: 1px solid var(--edge);
  white-space: nowrap;
}
td { padding: .72rem 1.1rem; font-size: .92rem; border-bottom: 1px solid var(--edge-soft); vertical-align: middle; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: #f8fafd; }
tbody tr:last-child td { border-bottom: 0; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .74rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: 999px;
  white-space: nowrap;
  background: #eef1f6;
  color: var(--ink-2);
  border: 1px solid rgba(19, 26, 38, .06);
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .65; }
.pill--wait { background: var(--wait-wash); color: var(--wait); }
.pill--go { background: var(--go-wash); color: var(--go); }
.pill--stop { background: var(--stop-wash); color: var(--stop); }
.pill--live { background: var(--navy-wash); color: var(--navy-2); }

/* The reference is what people quote to HR, so it reads as a filing stamp. */
.stamp {
  display: inline-block;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .05em;
  color: var(--stampink);
  background: var(--stampwash);
  border: 1px dashed rgba(0, 96, 12, .35);
  border-radius: var(--r-sm);
  padding: .12rem .45rem;
}

/* ==========================================================================
   Timeline, detail pairs, notices
   ========================================================================= */

.rail { list-style: none; margin: 0; padding: 0 0 0 1.5rem; border-left: 2px solid var(--edge-soft); }
.rail li { position: relative; padding: 0 0 1.15rem; }
.rail li::before {
  content: "";
  position: absolute;
  left: -1.95rem;
  top: .42rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--edge);
}
.rail li:first-child::before { background: var(--stampline); border-color: var(--stampline); box-shadow: 0 0 0 3px var(--stampwash); }
.rail b { font-size: .93rem; }
.rail span { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; color: var(--ink-3); margin-top: .1rem; }
.rail p { margin: .3rem 0 0; font-size: .88rem; color: var(--ink-2); }

.pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem 1.6rem; }
.pairs div { border-top: 1px solid var(--edge-soft); padding-top: .45rem; }
.pairs div span { display: block; color: var(--ink-3); margin-bottom: .12rem; }
.pairs div b { font-weight: 600; font-size: .95rem; }

.note {
  border: 1px solid var(--edge);
  border-left: 3px solid var(--navy-3);
  background: #f7fafd;
  border-radius: var(--r-sm);
  padding: .8rem 1rem;
  font-size: .9rem;
}
.note--warn { border-color: #eddcb9; border-left-color: var(--wait); background: var(--wait-wash); color: #6b4409; }
.note--stop { border-color: #eecfcb; border-left-color: var(--stop); background: var(--stop-wash); color: #7d2921; }
.note--go { border-color: #c9e3d7; border-left-color: var(--go); background: var(--go-wash); color: #0f4e3c; }

/* Step-by-step result of a connection check: a tick or a cross, then what it
   found. Used by the Microsoft Graph check on System settings. */
.checklist { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .55rem; }
.checklist li { align-items: flex-start; gap: .5rem; }
.checklist strong:first-child { font-size: 1rem; line-height: 1.35; }

.empty { padding: 3rem 1rem; text-align: center; color: var(--ink-3); }
.empty b { display: block; font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--ink-2); margin-bottom: .3rem; }

/* ==========================================================================
   Report bars
   ========================================================================= */

.bars { display: grid; gap: .55rem; }
.bars div { display: grid; grid-template-columns: 180px 1fr 44px; align-items: center; gap: .8rem; font-size: .88rem; }
.bars div span:first-child { color: var(--ink-2); }
.bar {
  height: 9px;
  border-radius: 5px;
  min-width: 4px;
  background: linear-gradient(to right, var(--navy), var(--navy-3) 65%, var(--sky));
}

/* ==========================================================================
   Dialog
   ========================================================================= */

dialog {
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  padding: 0;
  max-width: 560px;
  width: calc(100% - 2rem);
  max-height: 86vh;
  color: var(--ink);
  box-shadow: var(--lift-3);
}
dialog::backdrop { background: rgba(19, 26, 38, .5); backdrop-filter: blur(2px); }
dialog .card__body { padding: 1.4rem; max-height: 86vh; overflow-y: auto; }
dialog h2 { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; margin-bottom: .2rem; }
dialog table { font-size: .86rem; }
dialog th, dialog td { padding: .45rem .55rem; }

/* ==========================================================================
   Motion
   ========================================================================= */

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.shell > .stack > *, .console__main > .stack > *, .signin__form { animation: rise .34s ease both; }
.console__main > .stack > *:nth-child(2) { animation-delay: .05s; }
.console__main > .stack > *:nth-child(3) { animation-delay: .1s; }
.shell > .stack > *:nth-child(2) { animation-delay: .05s; }
.choice { animation: rise .3s ease both; }
.choices .choice:nth-child(2) { animation-delay: .05s; }
.choices .choice:nth-child(3) { animation-delay: .1s; }
.choices .choice:nth-child(4) { animation-delay: .15s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================= */

/* Nothing may push the page sideways on a phone. */
img, table { max-width: 100%; }

/* --- tablet -------------------------------------------------------------- */

@media (max-width: 1100px) {
  .console { grid-template-columns: 206px 1fr; }
  .console__main { padding: 1.6rem 1.4rem 4rem; }
  .bars div { grid-template-columns: 140px 1fr 40px; }
}

/* --- sign-in stacks, form first ----------------------------------------- */

@media (max-width: 980px) {
  .signin { grid-template-columns: 1fr; min-height: 0; }
  /* The form is what someone came for; the brand panel reads underneath it. */
  .signin__panel { order: -1; padding: 2.2rem 1.25rem 2.6rem; }
  .signin__brand { padding: 2.2rem 1.25rem 2.6rem; }
  .signin__brand h1 { font-size: 1.9rem; max-width: none; }
  .signin__brand p { max-width: none; }
  .signin__logo { width: 64px; height: 64px; margin-bottom: 1.1rem; }
  .signin__steps, .proof { display: none; }
  .grid2 { grid-template-columns: 1fr; }
  .shell { padding: 1.5rem 1rem 3.5rem; }
}

/* --- the console sidebar becomes a drawer ------------------------------- */

@media (max-width: 900px) {
  .topbar { min-height: var(--topbar-h); padding: .65rem 1rem; gap: .6rem; }
  .topbar .brandmark { flex: 1; }
  .iconbtn { display: inline-flex; }
  #whoami { display: none; }

  .console { grid-template-columns: 1fr; min-height: 0; }
  .console__main { padding: 1.3rem 1rem 3.5rem; }

  .sidebar {
    position: fixed;
    z-index: 25;                     /* under the topbar, over the page */
    top: var(--topbar-h);
    bottom: 0;
    left: 0;
    width: 258px;
    max-width: 80vw;
    padding: 1rem .7rem 2rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-right: 1px solid var(--edge);
    box-shadow: var(--lift-3);
    transform: translateX(-100%);
    transition: transform .22s ease;
  }
  body.menu-open .sidebar { transform: none; }
  .sidebar nav { position: static; }
  .sidebar button { padding: .62rem .7rem; font-size: .95rem; }

  .scrim {
    display: block;
    position: fixed;
    z-index: 20;
    top: var(--topbar-h);
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(19, 26, 38, .45);
  }
  .scrim[hidden] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* --- narrow: every table becomes a stack of records ---------------------- */

/* A nine-column table cannot be read on a phone and cannot be scrolled inside
   a card without clipping, so below the drawer breakpoint each row is laid out
   as one small record: the column heading, then the value. The headings are
   copied from the thead onto each cell as data-label when the page renders. */
@media (max-width: 900px) {
  /* 16px stops iOS zooming the page when a field takes focus. */
  input, select, textarea { font-size: 16px; }
  .btn--sm { padding: .45rem .8rem; }

  table, thead, tbody, tr, td { display: block; }
  thead { display: none; }
  tbody tr {
    margin: .55rem;
    padding: .5rem .75rem;
    background: var(--paper);
    border: 1px solid var(--edge);
    border-radius: var(--r-sm);
  }
  tbody tr:hover { background: var(--paper); }

  /* Flex, not grid, so several pills in one cell sit side by side and wrap
     together rather than stacking one per line. */
  td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .5rem;
    padding: .38rem 0;
    font-size: .9rem;
    text-align: left;
    border-bottom: 1px dashed var(--edge-soft);
  }
  td::before {
    content: attr(data-label);
    flex: 0 0 8.5rem;
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  /* An action cell carries no heading of its own. */
  td:not([data-label])::before, td[data-label=""]::before { display: none; }
  td.right { text-align: left; }
  tbody tr td:last-child { border-bottom: 0; }

  .pairs { grid-template-columns: 1fr 1fr; gap: .7rem 1.2rem; }
  .rail { padding-left: 1.2rem; }
  .spread { align-items: flex-start; }
  /* The active marker sits outside the sidebar once it is a drawer. */
  .sidebar button[aria-current="true"]::before { left: 0; }
}

/* --- phone --------------------------------------------------------------- */

@media (max-width: 620px) {
  h1 { font-size: 1.35rem; }
  .choices, .pairs { grid-template-columns: 1fr; }
  .card__head, .card__body { padding: 1rem; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile { padding: .8rem .9rem; }
  .tile b { font-size: 1.45rem; }

  .brandmark img { width: 32px; height: 32px; }
  .topbar__title small { font-size: .58rem; }
  .topbar__title span { font-size: .92rem; }
  /* A floor under the logo and title, so a topbar carrying three buttons sends
     them to a second line instead of crushing the brand off the page. */
  .topbar .brandmark { min-width: 140px; }

  /* When the buttons no longer fit beside the logo they take their own line
     rather than pushing the page sideways. The drawer reads the resulting
     height back from the DOM, so a two-line topbar still lines up. */
  .topbar { flex-wrap: wrap; }
  .topbar__right { margin-left: auto; justify-content: flex-end; }

  .bars div { grid-template-columns: 1fr 2.2rem; grid-template-areas: "label count" "bar bar"; gap: .2rem .6rem; }
  .bars div span:first-child { grid-area: label; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bars div .bar { grid-area: bar; }
  .bars div span:last-child { grid-area: count; }

  /* Near full screen, with enough backdrop left to tap the dialog closed. */
  dialog { width: calc(100% - .8rem); max-height: 92dvh; border-radius: var(--r); }
  dialog .card__body { padding: 1.05rem; max-height: 92dvh; }
  td::before { flex-basis: 7rem; }
}

@media (max-width: 400px) {
  td { gap: .1rem; }
  td::before { flex-basis: 100%; }
}

/* ==========================================================================
   Logo lockup
   ========================================================================= */

.brandmark { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.brandmark img { width: 38px; height: 38px; object-fit: contain; flex: none; }

.signin__logo {
  width: 84px;
  height: 84px;
  object-fit: contain;
  background: #fff;
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 8px 28px -8px rgba(0, 0, 0, .45);
  margin-bottom: 1.6rem;
}