:root {
  color-scheme: light dark;

  --ground: #f6f8fa;
  --ground-edge: #ffffff;
  --surface: #ffffff;
  --surface-sunken: #eff2f5;
  --surface-raised: #ffffff;
  --line: #e2e7ec;
  --line-strong: #c6cfd8;
  --board-edge: #14181d;

  --ink: #14181d;
  --ink-soft: #566069;
  --ink-faint: #8593a0;
  --ink-inverse: #ffffff;

  --accent: #1747c9;
  --accent-strong: #123aa8;
  --accent-tint: #e8edfb;
  --accent-ink: #1740ad;

  --ok: #17804b;
  --ok-tint: #e2f3e9;
  --warn: #91660a;
  --warn-tint: #faf0d6;
  --danger: #bf2b33;
  --danger-strong: #a3242b;
  --danger-tint: #fbe7e8;
  --info: #1740ad;
  --info-tint: #e8edfb;
  --neutral-tint: #eceff3;

  --lamp-ok: #1a7f4b;
  --lamp-wait: #d99a12;
  --lamp-off: #c4cad0;

  --focus: #1747c9;

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --gap-1: .25rem;
  --gap-2: .5rem;
  --gap-3: .75rem;
  --gap-4: 1rem;
  --gap-5: 1.5rem;
  --gap-6: 2rem;
  --gap-7: 3rem;

  --font-sans: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-cond: 'Barlow Semi Condensed', 'Arial Narrow', var(--font-sans);
  --font-mono: 'B612 Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --sidebar-width: 14.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0f1216;
    --ground-edge: #12161b;
    --surface: #161b21;
    --surface-sunken: #1b2129;
    --surface-raised: #1b2129;
    --line: #232b34;
    --line-strong: #364250;
    --board-edge: #e9edf1;

    --ink: #e9edf1;
    --ink-soft: #9aa4ae;
    --ink-faint: #6c7885;
    --ink-inverse: #0f1216;

    --accent: #7da2ff;
    --accent-strong: #9cb8ff;
    --accent-tint: rgba(125, 162, 255, .14);
    --accent-ink: #93b0fb;

    --ok: #3cb97c;
    --ok-tint: rgba(60, 185, 124, .14);
    --warn: #d9a53c;
    --warn-tint: rgba(217, 165, 60, .13);
    --danger: #e8797f;
    --danger-strong: #f09298;
    --danger-tint: rgba(232, 121, 127, .13);
    --info: #93b0fb;
    --info-tint: rgba(125, 162, 255, .14);
    --neutral-tint: rgba(154, 164, 174, .12);

    --lamp-ok: #2ea86a;
    --lamp-wait: #d9a53c;
    --lamp-off: #4a545f;

    --focus: #9cb8ff;
  }
}


@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/assets/fonts/barlow-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/assets/fonts/barlow-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/assets/fonts/barlow-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/assets/fonts/barlow-semi-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'B612 Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/assets/fonts/b612-mono-400.woff2') format('woff2');
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: .96875rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-ink); text-underline-offset: .2em; }
a:hover { color: var(--accent-strong); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

code, .mono, kbd { font-family: var(--font-mono); font-size: .85em; }

/* Every machine literal — a secret name, a cron line, a key prefix, an id —
   is set in mono, and everything a person writes for another person is not.
   The typeface is the tell for which of the two you are looking at. */
.literal {
  font-family: var(--font-mono);
  font-size: .78125rem;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .1rem .35rem;
  word-break: break-word;
}

.eyebrow {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.012em; }
h1 { font-size: 1.875rem; letter-spacing: -.022em; line-height: 1.15; }
h2 { font-size: 1.125rem; }
h3 { font-size: .96875rem; }
p { margin: 0; }

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

/* ---- the directory board ---- */
.sidebar {
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  background: var(--ground-edge);
  border-right: 3px solid var(--board-edge);
  padding: var(--gap-5) var(--gap-4);
  display: flex;
  flex-direction: column;
  gap: var(--gap-5);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}

.brand { display: flex; align-items: center; gap: .625rem; }
.brand-mark {
  width: 1.875rem; height: 1.875rem; flex: none;
  border-radius: var(--radius-sm);
  object-fit: cover;
  display: block;
  background: var(--surface-sunken);
}
.brand-name { font-weight: 600; letter-spacing: -.01em; font-size: 1.0625rem; }
.brand-name span { display: block; }
.brand-name .eyebrow { letter-spacing: .14em; }

/* The board reads like signage: big labels, a lamp on the room you are in. */
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-group + .nav-group { margin-top: var(--gap-4); }
.nav-group > .eyebrow { padding: 0 .25rem var(--gap-2); display: block; }
.nav a {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem .25rem;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.008em;
}
.nav a::before {
  content: '';
  width: 8px; height: 8px; flex: none;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--line);
}
.nav a:hover::before { border-color: var(--line-strong); }
.nav a:hover { color: var(--ink); }
.nav a[aria-current='page'] { color: var(--accent-ink); }
.nav a[aria-current='page']::before { background: var(--accent); border-color: var(--accent); }

.sidebar-foot { margin-top: auto; font-size: .8125rem; color: var(--ink-faint); }
.sidebar-foot strong { display: block; color: var(--ink-soft); font-weight: 500; word-break: break-all; }

.main { flex: 1 1 auto; min-width: 0; padding: var(--gap-6) var(--gap-6) var(--gap-7); }
.main-inner { max-width: 62rem; margin: 0 auto; animation: rise .2s ease both; }

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

.page-head {
  display: flex; flex-wrap: wrap; gap: var(--gap-4);
  align-items: flex-start; justify-content: space-between;
  padding-bottom: var(--gap-5);
  margin-bottom: var(--gap-6);
  border-bottom: 2px solid var(--board-edge);
}
.page-head .lede { color: var(--ink-soft); margin-top: .35rem; max-width: 46rem; }
.page-head-actions { display: flex; gap: var(--gap-2); flex-wrap: wrap; }

.topbar { display: none; }

@media (max-width: 60rem) {
  .shell { flex-direction: column; }
  .sidebar { display: none; }
  .topbar {
    display: block;
    position: sticky; top: 0; z-index: 10;
    background: var(--ground-edge);
    border-bottom: 3px solid var(--board-edge);
    padding: var(--gap-3) var(--gap-4);
  }
  .topbar summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--gap-3); }
  .topbar summary::-webkit-details-marker { display: none; }
  .topbar .nav { margin-top: var(--gap-4); }
  .main { padding: var(--gap-5) var(--gap-4) var(--gap-6); }
  h1 { font-size: 1.5rem; }
}

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


.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--gap-5);
}
.card + .card, .doors + .card, .card + .doors { margin-top: var(--gap-5); }
.card-head { margin-bottom: var(--gap-4); display: flex; gap: var(--gap-4); align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.card-head p { color: var(--ink-soft); font-size: .875rem; margin-top: .2rem; }
.card-flush { padding: 0; overflow: hidden; }
.card-flush > .card-head { padding: var(--gap-5) var(--gap-5) 0; margin-bottom: var(--gap-4); }

/* A shelf heading between runs of cards, as on the guide. */
.section-head { margin: var(--gap-6) 0 var(--gap-4); }
.section-head:first-child { margin-top: 0; }
h2.section-head { font-size: .6875rem; }
.section-head + .card { margin-top: 0; }

.stack { display: grid; gap: var(--gap-4); }
.stack-tight { display: grid; gap: var(--gap-2); }
.row { display: flex; gap: var(--gap-3); flex-wrap: wrap; align-items: center; }
.row-end { justify-content: flex-end; }
.spread { display: flex; gap: var(--gap-4); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); font-size: .8125rem; }

/* ---- the door lamp ---- */
.lamp {
  width: 10px; height: 10px; flex: none;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--line-strong);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
[data-reach='shared'] > .lamp { background: var(--lamp-ok); border-color: var(--lamp-ok); }
[data-reach='attention'] > .lamp { background: var(--lamp-wait); border-color: var(--lamp-wait); }
[data-reach='off'] > .lamp { background: var(--lamp-off); border-color: var(--lamp-off); }

.entries { display: grid; }
.entry {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: var(--gap-4);
  align-items: center;
  padding: 1.25rem var(--gap-5);
  border-top: 1px solid var(--line);
}
.entry:first-child { border-top: 0; }
.entry > .lamp { margin-top: .1rem; }
.entry-title { display: flex; align-items: center; gap: var(--gap-2); flex-wrap: wrap; font-weight: 600; font-size: 1rem; }
.entry-meta { color: var(--ink-soft); font-size: .8125rem; margin-top: .2rem; }
.entry-meta > * + *::before { content: '·'; margin: 0 .45rem; color: var(--ink-faint); }
.entry-actions { display: flex; gap: var(--gap-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 44rem) {
  .entry { grid-template-columns: 10px minmax(0, 1fr); }
  .entry-actions { grid-column: 2; justify-content: flex-start; }
}

/* ---- badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-cond);
  font-weight: 600; font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase;
  padding: .2rem .45rem;
  border-radius: var(--radius-sm);
  background: var(--neutral-tint); color: var(--ink-soft);
  white-space: nowrap;
}
.badge[data-tone='good'] { background: var(--ok-tint); color: var(--ok); }
.badge[data-tone='warn'] { background: var(--warn-tint); color: var(--warn); }
.badge[data-tone='bad'] { background: var(--danger-tint); color: var(--danger); }
.badge[data-tone='info'] { background: var(--info-tint); color: var(--info); }

/* ---- tables ---- */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .875rem; }
thead th {
  font-family: var(--font-cond);
  font-weight: 600; font-size: .6875rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  padding: .55rem var(--gap-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-sunken);
  white-space: nowrap;
}
tbody td { padding: .7rem var(--gap-4); border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-size: .875rem; font-weight: 600;
  padding: .45rem .85rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--surface); color: var(--ink);
  border-color: var(--line-strong);
  cursor: pointer;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { background: var(--surface-sunken); color: var(--ink); }
.btn[data-variant='primary'] { background: var(--accent); border-color: var(--accent); color: var(--ink-inverse); }
.btn[data-variant='primary']:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--ink-inverse); }
.btn[data-variant='danger'] { background: transparent; border-color: var(--line-strong); color: var(--danger); }
.btn[data-variant='danger']:hover { background: var(--danger-tint); border-color: var(--danger); }
.btn[data-variant='quiet'] { background: transparent; border-color: transparent; color: var(--ink-soft); padding-inline: .5rem; }
.btn[data-variant='quiet']:hover { background: var(--surface-sunken); color: var(--ink); }
.btn[data-size='sm'] { font-size: .8125rem; padding: .3rem .6rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- the verb doors on the front page ---- */
.doors { display: grid; gap: var(--gap-4); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.door {
  display: grid; gap: .35rem; align-content: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--gap-5);
  text-decoration: none;
  color: inherit;
  transition: border-color .12s ease, background .12s ease;
}
.door:hover { border-color: var(--accent); color: inherit; }
.door-title { font-weight: 600; font-size: 1.0625rem; color: var(--accent-ink); display: flex; align-items: center; gap: .5rem; }
.door-title::after { content: '\2192'; font-weight: 400; opacity: 0; transition: opacity .12s ease, transform .12s ease; transform: translateX(-3px); }
.door:hover .door-title::after { opacity: 1; transform: none; }
.door-sub { color: var(--ink-soft); font-size: .875rem; }

/* ---- forms ---- */
.form { display: grid; gap: var(--gap-4); }
.form-grid { display: grid; gap: var(--gap-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.field { display: grid; gap: .3rem; min-width: 0; }
.field > label { font-weight: 600; font-size: .875rem; }
.field .hint { color: var(--ink-soft); font-size: .8125rem; line-height: 1.5; }
.field .hint code { background: var(--surface-sunken); border-radius: 4px; padding: .05em .3em; }
input[type='text'], input[type='password'], input[type='number'], input[type='datetime-local'], select, textarea {
  font: inherit; font-size: .875rem;
  width: 100%;
  padding: .45rem .6rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
/* One chevron for every select, drawn in, so it sits a comfortable step from
   the edge instead of wherever the platform happens to put it. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%237c8993' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right .8rem center;
}
input.mono, textarea.mono { font-family: var(--font-mono); font-size: .78125rem; }
textarea { resize: vertical; min-height: 5rem; line-height: 1.55; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-tint); }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
.check { display: flex; gap: .55rem; align-items: flex-start; font-size: .875rem; }
.check input { width: auto; margin-top: .25rem; }
.check span { display: block; }
.check .hint { display: block; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--gap-4); }
fieldset > legend { padding: 0; font-weight: 600; font-size: .96875rem; margin-bottom: .2rem; }
.form-actions { display: flex; gap: var(--gap-3); align-items: center; flex-wrap: wrap; }
.inline-form { display: contents; }

/* The fold where the power controls live. Closed, a form asks four things;
   open, it asks everything. It opens itself when a task already uses one. */
details.more {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: var(--gap-3) var(--gap-4);
}
details.more > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .875rem;
  color: var(--ink-soft);
  list-style: none;
  display: flex; align-items: center; gap: .5rem;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before {
  content: '';
  width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(-45deg);
  transition: transform .12s ease;
}
details.more[open] > summary::before { transform: rotate(45deg); }
details.more[open] > summary { margin-bottom: var(--gap-4); }
details.more > .stack { display: grid; gap: var(--gap-5); }

/* ---- notices ---- */
.notice {
  display: grid; gap: .25rem;
  padding: var(--gap-3) var(--gap-4);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-sunken);
  font-size: .875rem;
  margin-bottom: var(--gap-4);
}
.notice strong { font-weight: 600; }
.notice[data-tone='good'] { background: var(--ok-tint); border-color: transparent; color: var(--ok); }
.notice[data-tone='warn'] { background: var(--warn-tint); border-color: transparent; color: var(--warn); }
.notice[data-tone='bad'] { background: var(--danger-tint); border-color: transparent; color: var(--danger); }
.notice[data-tone='info'] { background: var(--info-tint); border-color: transparent; color: var(--info); }

/* ---- empty states: an invitation, never a dead end ---- */
.empty {
  display: grid; gap: var(--gap-3); justify-items: start;
  padding: var(--gap-6) var(--gap-5);
  color: var(--ink-soft);
}
.empty h3 { color: var(--ink); }
.empty p { max-width: 34rem; }

/* ---- holdings: the directory of what Smith holds ---- */
.holdings { display: grid; }
.holding {
  display: grid;
  grid-template-columns: 10px 2.5rem minmax(0, 1fr) auto;
  gap: var(--gap-4);
  align-items: center;
  padding: 1.25rem var(--gap-5);
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background .12s ease;
}
.holding:first-child { border-top: 0; }
.holding:hover { background: var(--surface-sunken); color: inherit; }
.holding-count {
  font-family: var(--font-mono);
  font-size: 1.375rem;
  letter-spacing: -.03em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.holding-label { font-weight: 600; font-size: 1rem; }
.holding-state { color: var(--ink-soft); font-size: .8125rem; text-align: right; }
@media (max-width: 40rem) {
  .holding { grid-template-columns: 10px 2.5rem minmax(0, 1fr); }
  .holding-state { grid-column: 3; text-align: left; }
}

/* ---- the key to the lamps ---- */
.legend {
  display: flex; flex-wrap: wrap; gap: var(--gap-4);
  padding: var(--gap-3) var(--gap-5);
  border-top: 1px solid var(--line);
  background: var(--surface-sunken);
}
.legend-item {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-cond);
  font-weight: 600; font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint);
}
.legend-item > .lamp { width: 9px; height: 9px; }

/* ---- facts: a run of totals under a hairline ---- */
.facts {
  display: flex; flex-wrap: wrap;
  border-top: 1px solid var(--line);
}
/* At the head of a flush card it is a band across it, not a note beside it. */
.card-flush > .facts:first-child {
  border-top: 0;
  border-bottom: 1px solid var(--line);
  padding-inline: var(--gap-5);
  background: var(--surface-sunken);
}
.card-flush > .facts:first-child .fact:last-child { padding-right: var(--gap-5); }
.fact {
  display: grid; gap: .15rem; align-content: start;
  padding: var(--gap-4) var(--gap-5) var(--gap-4) 0;
  margin-right: var(--gap-5);
  border-right: 1px solid var(--line);
  min-width: 8rem;
}
.fact:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.fact-value {
  font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.fact-note { color: var(--ink-soft); font-size: .8125rem; }

/* ---- the reveal-once panel for a new key ---- */
.reveal {
  display: grid; gap: var(--gap-3);
  padding: var(--gap-4);
  border: 1px solid var(--accent);
  background: var(--accent-tint);
  border-radius: var(--radius);
  margin-bottom: var(--gap-4);
}
.reveal code {
  display: block;
  font-size: .78125rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .5rem .6rem;
  word-break: break-all;
  color: var(--ink);
}

/* ---- a disclosure for the explanation nobody needs twice ---- */
details.explain {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--gap-3) var(--gap-4);
  margin-bottom: var(--gap-4);
  font-size: .875rem;
}
details.explain > summary { cursor: pointer; font-weight: 600; }
details.explain > summary::marker { color: var(--ink-faint); }
details.explain .stack { margin-top: var(--gap-3); color: var(--ink-soft); }

.steps { display: grid; gap: var(--gap-3); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--gap-3); align-items: start; }
.steps li::before {
  counter-increment: step; content: counter(step);
  font-family: var(--font-cond); font-weight: 600; font-size: .75rem;
  width: 1.5rem; height: 1.5rem; border-radius: var(--radius-pill);
  display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent-ink);
}

.frame { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }

.sign-in {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: var(--gap-5);
}
.sign-in-card {
  width: min(24rem, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--board-edge);
  border-radius: var(--radius-lg);
  padding: var(--gap-6);
  display: grid; gap: var(--gap-4); justify-items: center; text-align: center;
}
.sign-in-card .btn { width: 100%; }
.sign-in-card .brand-mark { width: 2.75rem; height: 2.75rem; border-radius: var(--radius); }