/* ════════════════════════════════════════════════════════════════════
   AUTH.BLACKMENTA.COM · DRAWING-SHEET DESIGN
   Stylesheet for: /, /verify, /me, /materials, /updates
   Token system + voice match the main blackmenta.com site.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* surface */
  --void:        #06060A;
  --void-rise:   #0A0A0E;
  --void-glass:  rgba(6, 6, 10, 0.78);

  /* paper (text) */
  --paper:       #DCDED2;
  --paper-soft:  rgba(220, 222, 210, 0.74);
  --paper-mid:   rgba(220, 222, 210, 0.50);
  --paper-faint: rgba(220, 222, 210, 0.42);
  --paper-ghost: rgba(220, 222, 210, 0.20);

  /* brand semantics */
  --mint:        #7FE3B8;
  --acid:        #00FF9F;
  --warrior:     #C9A574;
  --ansi-red:    #FF6B6B;

  /* hairlines */
  --line:        rgba(220, 222, 210, 0.085);
  --line-2:      rgba(220, 222, 210, 0.16);
  --line-mint:   rgba(127, 227, 184, 0.22);

  /* surfaces */
  --surf-deep:   rgba(6, 6, 10, 0.42);
  --surf-rise:   rgba(10, 10, 14, 0.55);
  --surf-mint:   rgba(127, 227, 184, 0.020);
  --mint-10:     rgba(127, 227, 184, 0.10);
  --mint-30:     rgba(127, 227, 184, 0.30);
  --mint-40:     rgba(127, 227, 184, 0.40);
  --mint-55:     rgba(127, 227, 184, 0.55);

  /* spatial rhythm */
  --shell-pad:   28px;
  --max-w:       1180px;
  --section-y:   clamp(64px, 8vw, 112px);
  --topnav-h:    64px;
  --tb-h:        32px;

  /* timing */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--void);
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.008em;
  min-height: 100vh;
  overflow-x: hidden;
  padding-top: calc(var(--tb-h) + var(--topnav-h));
}

/* ambient glow — subtle */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 800px 600px at 30% 20%, rgba(127,227,184,0.06), transparent 60%),
    radial-gradient(ellipse 600px 500px at 80% 70%, rgba(0,255,159,0.03), transparent 60%);
}

a { color: inherit; text-decoration: none; }

/* === TYPOGRAPHY HELPERS === */
.mono { font-family: 'Geist Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.sans { font-family: 'Geist Sans', ui-sans-serif, system-ui, sans-serif; }

/* ════════════════════════════════════════════════════════════════════
   TITLE BLOCK · top of every page
   ════════════════════════════════════════════════════════════════════ */
.title-block {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--tb-h);
  background: var(--void-glass);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
  border-bottom: 1px solid var(--line);
}

.tb-inner {
  max-width: var(--max-w);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--shell-pad);
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-soft);
}

.tb-cell {
  display: flex;
  gap: 8px;
  align-items: baseline;
  white-space: nowrap;
}

.tb-cell .tb-key { color: var(--paper-faint); }
.tb-cell .tb-val { color: var(--mint); font-weight: 500; }

.tb-spacer { flex: 1; }

/* ════════════════════════════════════════════════════════════════════
   TOP NAV · sticky below title-block
   ════════════════════════════════════════════════════════════════════ */
.topnav {
  position: fixed;
  top: var(--tb-h);
  left: 0; right: 0;
  z-index: 100;
  height: var(--topnav-h);
  background: rgba(6, 6, 10, 0.50);
  -webkit-backdrop-filter: blur(20px) saturate(110%);
  backdrop-filter: blur(20px) saturate(110%);
  border-bottom: 1px solid var(--line);
}

.topnav-inner {
  max-width: var(--max-w);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--shell-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.bm-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  font-weight: 500;
}

.bm-mark .glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--mint);
  color: var(--mint);
  font-family: 'Geist Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.bm-mark .domain {
  color: var(--paper-faint);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.topnav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topnav-actions a,
.topnav-actions button {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-soft);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color .18s ease;
}

.topnav-actions a:hover,
.topnav-actions button:hover { color: var(--mint); }

/* ════════════════════════════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--shell-pad);
}

main { position: relative; z-index: 2; }

.section {
  padding: var(--section-y) 0;
  position: relative;
}

.section + .section {
  border-top: 1px solid var(--line);
}

/* ════════════════════════════════════════════════════════════════════
   SHEET HEADER · drawing-sheet anchor
   ════════════════════════════════════════════════════════════════════ */
.sheet-header {
  margin-bottom: 44px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.sheet-num {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 14px;
  display: inline-block;
}

.sheet-title {
  font-family: 'Geist Sans', sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.08;
  color: var(--paper);
  max-width: 22ch;
}

.sheet-title .mint { color: var(--mint); }

.sheet-spec {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
  display: grid;
  gap: 4px;
  text-align: right;
}

.ss-row {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.ss-key { color: var(--paper-ghost); }
.ss-val { color: var(--paper-soft); }

/* ════════════════════════════════════════════════════════════════════
   FRAME · classic drawing-sheet boxed frame (with x corners)
   ════════════════════════════════════════════════════════════════════ */
.frame {
  position: relative;
  background: rgba(10, 10, 14, 0.50);
  border: 1px solid var(--line-2);
  padding: clamp(28px, 4vw, 56px);
}

.frame .x-tl,
.frame .x-tr,
.frame .x-bl,
.frame .x-br {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
}

.frame .x-tl { top: -1px; left: -1px;  border-top: 1px solid var(--mint); border-left: 1px solid var(--mint); }
.frame .x-tr { top: -1px; right: -1px; border-top: 1px solid var(--mint); border-right: 1px solid var(--mint); }
.frame .x-bl { bottom: -1px; left: -1px;  border-bottom: 1px solid var(--mint); border-left: 1px solid var(--mint); }
.frame .x-br { bottom: -1px; right: -1px; border-bottom: 1px solid var(--mint); border-right: 1px solid var(--mint); }

/* AS BUILT / HANDSHAKE / AUTHENTICATED — corner stamp */
.stamp {
  display: inline-block;
  padding: 5px 11px;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mint);
  border: 1px solid var(--mint);
  background: transparent;
  transform: rotate(-2deg);
}

.stamp-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}

/* ════════════════════════════════════════════════════════════════════
   EXHIBIT LABEL · in-frame title cell
   ════════════════════════════════════════════════════════════════════ */
.exhibit {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 18px;
  padding-bottom: 14px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

.exhibit-key {
  color: var(--paper-faint);
}

.exhibit-val {
  color: var(--paper);
}

.exhibit-sub {
  margin-top: 10px;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warrior);
  padding-left: 6px;
  border-left: 1px solid var(--warrior);
}

/* ════════════════════════════════════════════════════════════════════
   TERMINAL PROMPT · monospace lead-in
   ════════════════════════════════════════════════════════════════════ */
.term-prompt {
  font-family: 'Geist Mono', monospace;
  font-size: 12.5px;
  color: var(--paper-faint);
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}

.term-prompt .prompt {
  color: var(--mint);
  margin-right: 8px;
  font-weight: 500;
}

.term-prompt .cmd {
  color: var(--paper);
}

.term-prompt .cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--mint);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: cursor-blink 1.1s step-end infinite;
}

@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   HEADLINE BLOCK · h1 with mint-accent
   ════════════════════════════════════════════════════════════════════ */
h1.hl {
  font-family: 'Geist Sans', sans-serif;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--paper);
  margin: 12px 0 28px;
  max-width: 18ch;
  text-transform: none;
}

h1.hl .mint { color: var(--mint); }

p.lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--paper-soft);
  max-width: 60ch;
  margin-bottom: 28px;
}

p.lede em { color: var(--paper); font-style: normal; font-weight: 500; }

p.lede code {
  font-family: 'Geist Mono', monospace;
  font-size: 0.92em;
  color: var(--mint);
  background: var(--surf-mint);
  padding: 2px 7px;
  border: 1px solid var(--line-mint);
}

/* ════════════════════════════════════════════════════════════════════
   FORM · email input + submit
   ════════════════════════════════════════════════════════════════════ */
.bm-form {
  margin-top: 36px;
  padding: 0;
}

.bm-form-label {
  display: block;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 12px;
  padding-left: 22px;
  position: relative;
}

.bm-form-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 1px;
  background: var(--mint);
}

.bm-form-row {
  display: flex;
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--line-2);
  background: var(--surf-deep);
  transition: border-color .18s ease;
}

.bm-form-row:focus-within {
  border-color: var(--mint);
}

.bm-form-row input[type="email"] {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 18px 20px;
  font-family: 'Geist Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--paper);
  outline: none;
  text-transform: lowercase;
  min-width: 0;
}

.bm-form-row input[type="email"]::placeholder {
  color: var(--paper-ghost);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
}

.bm-form-row button {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line-2);
  padding: 0 26px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
  white-space: nowrap;
}

.bm-form-row button:hover:not(:disabled) {
  background: var(--mint);
  color: var(--void);
}

.bm-form-row button:disabled {
  color: var(--paper-ghost);
  cursor: not-allowed;
}

.bm-form-note {
  margin-top: 14px;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

.bm-form-note.error { color: var(--ansi-red); }
.bm-form-note.success { color: var(--mint); }

/* ════════════════════════════════════════════════════════════════════
   STATE MESSAGES · sent / error / waiting
   ════════════════════════════════════════════════════════════════════ */
.state-block {
  margin-top: 32px;
  padding: 22px 24px;
  border: 1px solid var(--line-2);
  background: var(--surf-rise);
}

.state-block.success {
  border-color: var(--mint);
  background: var(--surf-mint);
}

.state-block.error {
  border-color: var(--ansi-red);
  background: rgba(255, 107, 107, 0.04);
}

.state-block .state-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 8px;
}

.state-block.error .state-label { color: var(--ansi-red); }

.state-block .state-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--paper-soft);
}

.state-block .state-body strong { color: var(--paper); font-weight: 500; }

/* ════════════════════════════════════════════════════════════════════
   FOOTER LINKS
   ════════════════════════════════════════════════════════════════════ */
.foot-links {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

.foot-links a {
  color: var(--paper-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color .15s ease, border-color .15s ease;
}

.foot-links a:hover {
  color: var(--mint);
  border-bottom-color: var(--mint);
}

/* ════════════════════════════════════════════════════════════════════
   REVIEWER HUB · /me · split layout (sidebar + content)
   ════════════════════════════════════════════════════════════════════ */
.hub {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: start;
}

.hub-side {
  position: sticky;
  top: calc(var(--tb-h) + var(--topnav-h) + 32px);
  border-left: 1px solid var(--line);
  padding-left: 22px;
}

.hub-side-label {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 18px;
}

.hub-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hub-nav a {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-soft);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  transition: color .15s ease;
}

.hub-nav a:hover { color: var(--paper); }
.hub-nav a.active { color: var(--mint); }
.hub-nav a.active::after { content: '◀'; font-size: 8px; color: var(--mint); }
.hub-nav a .nn { color: var(--paper-faint); font-size: 9.5px; }

/* ════════════════════════════════════════════════════════════════════
   TIER PANEL · status card showing current tier
   ════════════════════════════════════════════════════════════════════ */
.tier-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 20px 24px;
  background: var(--surf-rise);
  border: 1px solid var(--line-mint);
  margin-bottom: 32px;
}

.tier-panel-key {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 6px;
}

.tier-panel-val {
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--paper);
}

.tier-panel-val .mint { color: var(--mint); }
.tier-panel-val .warrior { color: var(--warrior); }

.tier-panel-budget {
  text-align: right;
  font-family: 'Geist Mono', monospace;
}

.tier-panel-budget .num {
  font-size: 28px;
  color: var(--mint);
  letter-spacing: -0.02em;
  line-height: 1;
}

.tier-panel-budget .num-sub {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--paper-faint);
  text-transform: uppercase;
  margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════════════
   ROW LIST · materials, updates
   ════════════════════════════════════════════════════════════════════ */
.bm-row-list {
  border-top: 1px solid var(--line);
  margin-top: 14px;
}

.bm-row {
  display: grid;
  grid-template-columns: 88px 1fr minmax(140px, max-content) 110px;
  gap: 0 24px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  font-family: 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  align-items: center;
}

.bm-row:hover {
  background: var(--surf-mint);
}

.bm-row .row-num {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--mint);
}

.bm-row .row-title {
  color: var(--paper);
  font-weight: 500;
}

.bm-row .row-title small {
  display: block;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-top: 4px;
  font-weight: 400;
}

.bm-row .row-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

.bm-row .row-action {
  text-align: right;
}

.bm-row .row-action a {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint);
  border-bottom: 1px dashed var(--line-mint);
  padding-bottom: 1px;
}

.bm-row .row-action a:hover { border-bottom-color: var(--mint); }

.bm-row .row-action a.disabled {
  color: var(--paper-ghost);
  border-bottom-color: var(--paper-ghost);
  cursor: not-allowed;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════
   MATURITY BADGE · reused from main site
   ════════════════════════════════════════════════════════════════════ */
.bm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 7px;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid;
  vertical-align: middle;
}

.bm-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
}

.bm-badge[data-status="live"] {
  border-color: var(--mint);
  color: var(--mint);
}
.bm-badge[data-status="live"]::before {
  background: var(--mint);
  box-shadow: 0 0 4px var(--mint);
}

.bm-badge[data-status="preview"] {
  border-color: var(--mint-40);
  color: var(--mint-55);
}
.bm-badge[data-status="preview"]::before {
  background: transparent;
  border: 1px solid var(--mint);
}

.bm-badge[data-status="pending"] {
  border-color: rgba(201, 165, 116, 0.50);
  color: rgba(201, 165, 116, 0.95);
}
.bm-badge[data-status="pending"]::before {
  background: var(--warrior);
  transform: rotate(45deg);
  width: 5px;
  height: 5px;
}

.bm-badge[data-status="not-offered"] {
  border-color: rgba(220, 222, 210, 0.18);
  color: rgba(220, 222, 210, 0.45);
  text-decoration: line-through;
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE · mobile
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  :root {
    --shell-pad: 22px;
    --topnav-h: 56px;
  }

  body { font-size: 14px; }

  .tb-inner { gap: 14px; }
  .tb-cell:nth-child(n+4) { display: none; }

  .topnav-inner { padding: 0 var(--shell-pad); }
  .bm-mark .domain { display: none; }

  .sheet-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .sheet-spec { text-align: left; }
  .ss-row { justify-content: flex-start; }

  .hub {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hub-side {
    position: static;
    border-left: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding-left: 0;
    padding: 14px 0;
    order: -1;
  }

  .hub-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 24px;
    padding-bottom: 4px;
  }

  .hub-nav a {
    border-bottom: 0;
    padding: 6px 0;
    flex-shrink: 0;
  }

  .hub-nav a.active { border-bottom: 1px solid var(--mint); }
  .hub-nav a.active::after { display: none; }
  .hub-nav a .nn { display: none; }

  .bm-row {
    grid-template-columns: 50px 1fr;
    grid-template-rows: auto auto;
    gap: 4px 16px;
    padding: 14px 16px;
  }

  .bm-row .row-num { grid-column: 1; grid-row: 1 / span 2; }
  .bm-row .row-title { grid-column: 2; grid-row: 1; }
  .bm-row .row-meta { grid-column: 2; grid-row: 2; padding-top: 6px; }
  .bm-row .row-action { grid-column: 2; grid-row: 2; text-align: right; }

  .tier-panel {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .tier-panel-budget { text-align: left; }

  .stamp-row { justify-content: flex-start; }

  h1.hl {
    font-size: clamp(32px, 8vw, 48px);
    margin-top: 8px;
  }

  .frame { padding: 24px 22px; }

  .bm-form-row {
    flex-direction: column;
    align-items: stretch;
  }

  .bm-form-row input[type="email"] {
    padding: 16px 18px;
    border-bottom: 1px solid var(--line-2);
  }

  .bm-form-row button {
    border-left: 0;
    padding: 16px;
  }
}

/* ════════════════════════════════════════════════════════════
   PATCH 2026-04-29 · mobile bm-row layout fix + sticky sidebar
   Fixes Bug 1 (PENDING badge overlap) & Bug 2 (sidebar scrolls away)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  /* Bug 1: row-action and row-meta were both grid-column:2/grid-row:2 → overlap.
     Give row-action its own row below row-meta. */
  .bm-row {
    grid-template-rows: auto auto auto;
  }
  .bm-row .row-num    { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  .bm-row > div       { grid-column: 2; grid-row: 1; }
  .bm-row .row-meta   { grid-column: 2; grid-row: 2; padding-top: 4px; }
  .bm-row .row-action { grid-column: 2; grid-row: 3; padding-top: 8px; text-align: left; }

  /* Bug 2: sidebar should stay visible during scroll. */
  .hub-side {
    position: sticky;
    top: 0;
    background: var(--void);
    z-index: 50;
  }
}