/* ============================================================================
   MIWA — design system.

   The palette is the logo's own, sampled from the file rather than guessed:
   the Uruguayan sun and stripes rendered as a wine arc, a gold sun and cobalt
   bands. Cobalt carries the interface, wine marks what needs a decision, gold
   is a highlight only.

   GOLD IS NEVER TEXT. #F6CC18 on white is 1.6:1 and fails WCAG AA at any size.
   It appears as a fill, a rule or a marker, always with ink on top of it or
   beside it. This is the same mistake the XPRNZ cyan made and it is not being
   repeated here.

   Type: Fraunces for display, Karla for everything else. Both are variable,
   both are self-hosted as woff2. Nothing is loaded from a Google CDN, because
   a font request would hand every visitor's IP address to a third party, and
   the visitors here are looking at 39 women's home addresses.
   ========================================================================= */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-italic-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-latin-ext.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-italic-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* From the logo */
  --cobalt: #23409B;
  --cobalt-deep: #1A3079;
  --cobalt-tint: #EEF1FA;
  --gold: #F6CC18;
  --gold-tint: #FEF7DC;
  --wine: #9A2168;
  --wine-tint: #FAEFF5;

  --ink: #14192E;
  --ink-2: #454B63;
  --ink-3: #767C94;
  --paper: #FFFFFF;
  --paper-2: #F7F8FB;
  --line: #E3E6EF;
  --line-strong: #C9CEDE;

  --ok: #17694A;
  --ok-tint: #E9F5EF;
  --warn: #8A5B00;
  --warn-tint: #FDF3DF;
  --danger: #A4232B;
  --danger-tint: #FBECEC;

  --r: 10px;
  --r-lg: 16px;
  --tap: 48px;
  --shell: 720px;
  --pad: 20px;

  --shadow: 0 1px 2px rgba(20, 25, 46, .06), 0 6px 20px rgba(20, 25, 46, .06);
  --shadow-lift: 0 2px 6px rgba(20, 25, 46, .09), 0 16px 40px rgba(20, 25, 46, .10);

  --sans: 'Karla', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper-2);
  font-feature-settings: 'tnum' 0;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

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

.hidden { display: none !important; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Shell ────────────────────────────────────────────────────────────────── */

.app {
  max-width: var(--shell);
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  position: relative;
}
@media (min-width: 760px) {
  .app { box-shadow: var(--shadow); min-height: 100dvh; }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 10px var(--pad);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
}
.topbar__logo { width: 30px; height: 30px; flex: none; display: block; }
.topbar__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.01em;
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar__year {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--cobalt);
  background: var(--cobalt-tint);
  border: 1px solid #D3DAF0;
  border-radius: 100px;
  padding: 4px 10px;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.topbar__back {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 100px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  flex: none;
  color: var(--ink-2);
}
.topbar__back:hover { background: var(--paper-2); }

main { flex: 1; padding: 0 var(--pad) 96px; }

.view { display: none; }
.view.active { display: block; animation: rise .18s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .view.active { animation: none; }
  * { transition: none !important; }
}

/* ── Bottom nav ───────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--shell);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(140%) blur(12px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  z-index: 40;
  padding-bottom: env(safe-area-inset-bottom);
}
.nav a {
  min-height: var(--tap);
  padding: 8px 2px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  border-top: 2px solid transparent;
  margin-top: -1px;
}
.nav a svg { width: 21px; height: 21px; }
.nav a[aria-current='page'] { color: var(--cobalt); border-top-color: var(--cobalt); }

/* ── Type ─────────────────────────────────────────────────────────────────── */

.kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--wine);
  margin: 0 0 6px;
}
.display {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(28px, 8vw, 38px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 4px;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
}
.lede { color: var(--ink-2); margin: 0 0 20px; font-size: 15px; max-width: 52ch; }
h2.section {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 28px 0 10px;
}
h2.section:first-child { margin-top: 18px; }
.hair { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

.head { padding: 22px 0 14px; }

/* ── Search ───────────────────────────────────────────────────────────────── */

.search {
  position: sticky;
  top: 58px;
  z-index: 20;
  background: var(--paper);
  padding: 10px 0 12px;
  margin: 0 0 4px;
}
.search__box {
  display: flex; align-items: center; gap: 10px;
  background: var(--paper-2);
  border: 1.5px solid var(--line-strong);
  border-radius: 100px;
  padding: 0 14px;
  height: 52px;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.search__box:focus-within {
  border-color: var(--cobalt);
  background: var(--paper);
  box-shadow: 0 0 0 4px rgba(35, 64, 155, .12);
}
.search__box svg { width: 20px; height: 20px; color: var(--ink-3); flex: none; }
.search__box input {
  border: 0; background: transparent; outline: none;
  flex: 1; min-width: 0; height: 100%;
  font-size: 17px; /* 16px+ or iOS zooms the page on focus */
  font-weight: 500;
}
.search__box input::placeholder { color: var(--ink-3); font-weight: 400; }
/* WebKit draws its own clear "x" on type=search, beside ours. One is enough. */
.search__box input::-webkit-search-cancel-button,
.search__box input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search__clear {
  border: 0; background: var(--line); color: var(--ink-2);
  width: 26px; height: 26px; border-radius: 100px; flex: none;
  display: grid; place-items: center; font-size: 15px; line-height: 1;
}
.search__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 8px; font-size: 12.5px; color: var(--ink-3); font-weight: 600;
}

/* Filter chips */
.chips { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  border-radius: 100px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.chip[aria-pressed='true'] {
  background: var(--cobalt); border-color: var(--cobalt); color: #fff;
}
.chip mark { background: none; color: inherit; font-variant-numeric: tabular-nums; opacity: .75; }

/* ── Member rows ──────────────────────────────────────────────────────────── */

.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  min-height: var(--tap);
  width: 100%;
  text-align: left;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
}
.row:hover { background: var(--paper-2); }
.row__mono {
  width: 38px; height: 38px; flex: none;
  border-radius: 100px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800; letter-spacing: .01em;
  background: var(--cobalt-tint); color: var(--cobalt-deep);
}
.row--archived .row__mono { background: var(--paper-2); color: var(--ink-3); }
.row--leaving .row__mono { background: var(--wine-tint); color: var(--wine); }
.row__body { flex: 1; min-width: 0; }
/* Both are <span>s inside a <button>, so they must be forced to block or the
   subtitle runs on after the name ("Mariana TedinArgentina · joined…") and
   ellipsis never triggers. Seen in the first signed-in screenshot. */
.row__name, .row__sub { display: block; }
.row__name {
  font-size: 16px; font-weight: 600; letter-spacing: -.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row__name mark {
  background: var(--gold-tint);
  color: var(--ink);
  border-radius: 3px;
  padding: 0 1px;
  box-shadow: inset 0 -2px 0 var(--gold);
}
.row__sub {
  font-size: 12.5px; color: var(--ink-3); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row__end { flex: none; display: flex; align-items: center; gap: 8px; }

/* ── Tags ─────────────────────────────────────────────────────────────────── */

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 8px; border-radius: 100px;
  background: var(--paper-2); color: var(--ink-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.tag--paid { background: var(--ok-tint); color: var(--ok); border-color: #C6E4D6; }
.tag--unpaid { background: var(--paper-2); color: var(--ink-3); }
.tag--new { background: var(--gold-tint); color: var(--warn); border-color: #F0DFA8; }
.tag--leaving { background: var(--wine-tint); color: var(--wine); border-color: #EED3E2; }
.tag--archived { background: var(--paper-2); color: var(--ink-3); }
.tag--warn { background: var(--warn-tint); color: var(--warn); border-color: #F0DFA8; }
.tag--danger { background: var(--danger-tint); color: var(--danger); border-color: #F0CFCF; }

/* ── Cards, stats ─────────────────────────────────────────────────────────── */

.card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  background: var(--paper);
  margin-bottom: 12px;
}
.card--tint { background: var(--paper-2); }
.card--flag { border-color: #EED3E2; background: var(--wine-tint); }
.card--note { border-color: #F0DFA8; background: var(--gold-tint); }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px 14px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.stat::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--cobalt);
}
.stat--wine::before { background: var(--wine); }
.stat--gold::before { background: var(--gold); }
.stat--mute::before { background: var(--line-strong); }
.stat__n {
  font-family: var(--display);
  font-size: 30px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.stat__l { font-size: 12px; color: var(--ink-2); margin-top: 4px; font-weight: 600; }
.stat__basis { font-size: 11px; color: var(--ink-3); margin-top: 5px; line-height: 1.35; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap);
  padding: 0 18px;
  border-radius: 100px;
  border: 1.5px solid var(--cobalt);
  background: var(--cobalt);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: var(--cobalt-deep); border-color: var(--cobalt-deep); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn--ghost { background: var(--paper); color: var(--cobalt); }
.btn--ghost:hover { background: var(--cobalt-tint); }
.btn--quiet { background: var(--paper); color: var(--ink-2); border-color: var(--line-strong); }
.btn--quiet:hover { background: var(--paper-2); border-color: var(--ink-3); }
.btn--danger { background: var(--paper); color: var(--danger); border-color: #F0CFCF; }
.btn--danger:hover { background: var(--danger-tint); }
.btn--sm { min-height: 38px; padding: 0 13px; font-size: 13.5px; }
.btn--block { width: 100%; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }

.fab {
  position: fixed;
  right: max(calc(50% - var(--shell) / 2 + 18px), 18px);
  bottom: calc(78px + env(safe-area-inset-bottom));
  z-index: 35;
  width: 56px; height: 56px; border-radius: 100px;
  border: 0; background: var(--wine); color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--shadow-lift);
}
.fab svg { width: 24px; height: 24px; }

/* ── Forms ────────────────────────────────────────────────────────────────── */

.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 12.5px; font-weight: 700;
  letter-spacing: .02em; color: var(--ink-2); margin-bottom: 5px;
}
.field input, .field select, .field textarea {
  width: 100%;
  min-height: var(--tap);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r);
  padding: 11px 13px;
  background: var(--paper);
  font-size: 16px; /* 16px+ or iOS zooms on focus */
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.field textarea { min-height: 88px; resize: vertical; line-height: 1.45; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 4px rgba(35, 64, 155, .12);
}
.field__hint { font-size: 12px; color: var(--ink-3); margin-top: 5px; line-height: 1.4; }
.field__err { font-size: 12.5px; color: var(--danger); margin-top: 5px; font-weight: 600; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

/* ── Messages ─────────────────────────────────────────────────────────────── */

.note {
  border-radius: var(--r);
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.45;
  margin: 12px 0;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-2);
}
.note strong { color: var(--ink); }
.note--warn { background: var(--warn-tint); border-color: #F0DFA8; color: #6B4700; }
.note--danger { background: var(--danger-tint); border-color: #F0CFCF; color: #7E1A21; }
.note--ok { background: var(--ok-tint); border-color: #C6E4D6; color: #0F4E36; }
.note--info { background: var(--cobalt-tint); border-color: #D3DAF0; color: var(--cobalt-deep); }

.empty { text-align: center; padding: 44px 20px; color: var(--ink-3); }
.empty__t { font-family: var(--display); font-size: 19px; color: var(--ink-2); margin-bottom: 6px; }
.empty__d { font-size: 14px; max-width: 34ch; margin: 0 auto; line-height: 1.5; }

.toast {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(90px + env(safe-area-inset-bottom));
  z-index: 100;
  background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: 100px;
  font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-lift);
  max-width: calc(100% - 40px);
  text-align: center;
}
.toast--err { background: var(--danger); }

/* ── Detail lists ─────────────────────────────────────────────────────────── */

.dl { margin: 0; }
.dl div {
  display: flex; gap: 14px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.dl dt {
  flex: none; width: 104px;
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink-3);
}
.dl dd { margin: 0; flex: 1; min-width: 0; font-size: 15px; word-break: break-word; }
.dl dd a { color: var(--cobalt); }
.dl .muted { color: var(--ink-3); font-style: italic; }

/* ── Attendance ticking ───────────────────────────────────────────────────── */

.ticks { list-style: none; margin: 0; padding: 0; }
.tick {
  display: flex; align-items: center; gap: 12px;
  padding: 0; border-bottom: 1px solid var(--line);
  /* The visually-hidden checkbox inside is absolutely positioned. Without this
     it resolves against the initial containing block, so all 39 of them stack
     in one spot at the top of the document instead of staying with their row. */
  position: relative;
}
.tick label {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 54px; padding: 6px 4px;
  cursor: pointer;
}
.tick input { position: absolute; opacity: 0; pointer-events: none; }
.tick__box {
  width: 26px; height: 26px; flex: none;
  border: 2px solid var(--line-strong);
  border-radius: 7px;
  display: grid; place-items: center;
  transition: background .1s, border-color .1s;
}
.tick__box svg { width: 16px; height: 16px; color: #fff; opacity: 0; }
.tick input:checked + .tick__box { background: var(--cobalt); border-color: var(--cobalt); }
.tick input:checked + .tick__box svg { opacity: 1; }
.tick input:focus-visible + .tick__box { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.tick__name { font-size: 15.5px; font-weight: 500; flex: 1; }
.tick input:checked ~ .tick__name { font-weight: 700; }

.sticky-save {
  position: sticky;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 25;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-lift);
  margin: 16px 0 8px;
}
.sticky-save__n {
  padding-left: 12px; font-weight: 700; font-size: 14px;
  font-variant-numeric: tabular-nums; flex: 1;
}

/* ── Bylaws reader ────────────────────────────────────────────────────────── */

.doc { max-width: 62ch; }
.doc__masthead {
  border-bottom: 3px double var(--line-strong);
  padding-bottom: 16px; margin-bottom: 22px;
  display: flex; align-items: flex-start; gap: 14px;
}
.doc__masthead img { width: 46px; height: 46px; flex: none; }
.doc__org { font-family: var(--display); font-size: 19px; font-weight: 600; line-height: 1.15; }
.doc__sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; letter-spacing: .02em; }
.doc h3 {
  font-family: var(--display);
  font-size: 19px; font-weight: 600;
  margin: 30px 0 10px;
  display: flex; gap: 10px; align-items: baseline;
}
.doc h3 .n {
  font-family: var(--sans); font-size: 12px; font-weight: 800;
  letter-spacing: .06em; color: var(--cobalt);
  background: var(--cobalt-tint); border-radius: 5px;
  padding: 3px 7px; flex: none;
  font-variant-numeric: tabular-nums;
}
.doc .cl { display: flex; gap: 12px; margin: 0 0 12px; }
.doc .cl > .n {
  flex: none; width: 52px;
  font-size: 12.5px; font-weight: 800; color: var(--ink-3);
  font-variant-numeric: tabular-nums; padding-top: 3px;
  letter-spacing: .01em;
}
.doc .cl > .t { flex: 1; min-width: 0; font-size: 15px; line-height: 1.62; }
.doc .cl .lbl { font-weight: 700; }
.doc .cl--l2 { margin-left: 18px; }
.doc .cl--l3 { margin-left: 36px; }
.doc .cl--l2 > .n, .doc .cl--l3 > .n { width: 60px; }
.doc .flag {
  display: block; margin-top: 5px;
  font-size: 12px; color: var(--wine);
  border-left: 2px solid var(--wine); padding-left: 8px;
  font-style: italic; line-height: 1.4;
}

/* ── Tables ───────────────────────────────────────────────────────────────── */

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); }
table.data { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 420px; }
table.data th, table.data td { text-align: left; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); }
table.data th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 800;
}
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }
table.data tr.total td { font-weight: 800; border-top: 2px solid var(--ink); border-bottom: 0; }

/* ── Auth screens ─────────────────────────────────────────────────────────── */

.auth {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 24px var(--pad);
  background:
    radial-gradient(1000px 460px at 50% -8%, var(--cobalt-tint), transparent 65%),
    var(--paper);
}
.auth__card { width: 100%; max-width: 400px; }
.auth__logo { width: 68px; height: 68px; display: block; margin: 0 auto 18px; }
.auth h1 {
  font-family: var(--display); font-size: 27px; font-weight: 600;
  text-align: center; margin: 0 0 4px; letter-spacing: -.02em;
}
.auth__sub { text-align: center; color: var(--ink-2); font-size: 14.5px; margin: 0 0 26px; }
.auth__rule {
  height: 4px; width: 76px; margin: 0 auto 22px;
  background: linear-gradient(90deg, var(--wine) 0 33%, var(--gold) 33% 66%, var(--cobalt) 66% 100%);
  border-radius: 100px;
}

/* ── Misc ─────────────────────────────────────────────────────────────────── */

.copyline {
  display: flex; gap: 8px; align-items: center;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 10px 12px; margin: 10px 0;
  font-size: 12.5px; word-break: break-all; line-height: 1.45;
}
.copyline code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; flex: 1; min-width: 0; }

.msgbox {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper-2); padding: 13px;
  font-size: 14px; line-height: 1.55; white-space: pre-wrap;
  word-break: break-word; margin: 10px 0;
  max-height: 260px; overflow-y: auto;
}

.skeleton {
  background: linear-gradient(90deg, var(--paper-2) 25%, var(--line) 37%, var(--paper-2) 63%);
  background-size: 400% 100%;
  animation: sh 1.3s ease infinite;
  border-radius: 6px; height: 14px; margin: 12px 0;
}
@keyframes sh { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.offline-bar {
  background: var(--warn-tint);
  border-bottom: 1px solid #F0DFA8;
  color: #6B4700;
  font-size: 12.5px; font-weight: 600;
  padding: 7px var(--pad);
  text-align: center;
}

@media print {
  .topbar, .nav, .fab, .btn-row, .search { display: none !important; }
  main { padding: 0; }
  body { background: #fff; }
  .doc { max-width: none; }
}

/* ── Sign-in tier tabs ────────────────────────────────────────────────────── */

.tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 100px; padding: 4px; margin-bottom: 20px;
}
.tab {
  border: 0; background: none; border-radius: 100px;
  min-height: 40px; font-size: 14px; font-weight: 700;
  color: var(--ink-3);
}
.tab[aria-selected='true'] { background: var(--cobalt); color: #fff; }

.nav--2 { grid-template-columns: repeat(2, 1fr); }

/* `.nav { display: grid }` beats the UA stylesheet's `[hidden] { display: none }`
   on specificity, so the hidden nav stayed laid out — fixed to the bottom, on
   top of the visible one, swallowing every tap aimed at it. Found by a
   Playwright click that timed out on an element that was plainly there. */
.nav[hidden] { display: none; }

/* The logo PNG carries a white square (it is padded for the home-screen icon).
   Multiply blends the white away on any light ground, so the mark sits on the
   sign-in gradient without a visible box. Seen in the first live screenshot. */
.auth__logo, .topbar__logo, .doc__masthead img { mix-blend-mode: multiply; }