/* The prototype's component CSS, extracted by scripts/extract_prototype_assets.py.
   Tokens live in tokens.css; motion lives in motion.css. */








* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 15px/1.45 var(--font-b); }
button, input, select { font-family: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible, select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
a { color: var(--blue); }

/* ── sidebar ─────────────────────────── */
.shell { display: flex; min-height: 100dvh; }
.shell.nosidebar .side { display: none; }
.side {
  width: 224px; flex: none; background: var(--fog); border-right: 1px solid var(--line);
  padding: 22px 14px 16px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100dvh;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; padding: 0 10px; }
.brand-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--grad); flex: none; }
.proto { font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin: 4px 10px 18px; }
.sidenav { display: flex; flex-direction: column; gap: 2px; }
.sidenav a {
  display: flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 8px;
  color: var(--mute); font-size: 13px; font-weight: 600; text-decoration: none;
}
.sidenav a:hover { color: var(--ink); }
.sidenav a.active { color: var(--ink); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.side-spacer { flex: 1; }
.epoch { font: 500 11px var(--font-m); color: var(--mute); padding: 0 10px 10px; }
.epoch b { color: var(--ink); font-weight: 500; }
.connect {
  height: 40px; margin: 0 6px; padding: 0 16px; border: 0; border-radius: 20px;
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.connect .dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; }
.connect .addr { font: 500 12px var(--font-m); }
.reset {
  border: 0; background: none; color: var(--mute); cursor: pointer;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; margin-top: 10px; padding: 4px;
}
.reset:hover { color: var(--ink); }
.maincol { flex: 1 1 auto; min-width: 0; }

/* ── console: masthead + band + board ── */
.view { max-width: 1120px; margin: 0 auto; padding: 4px 32px 56px; }
.mast {
  padding: 28px 0 6px; display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; align-items: end;
}
.mast-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mast-right { text-align: right; padding-bottom: 2px; }
.band {
  margin: 18px 0 20px; padding: 15px 2px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; justify-content: space-between;
}
.bstats { display: flex; flex-wrap: wrap; gap: 10px 40px; }
.bstat span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.bstat b { display: block; font-family: var(--font-d); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; margin-top: 2px; }
.bstat i { display: block; font-style: normal; font-size: 11px; color: var(--mute); margin-top: 1px; }
.band-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.board { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.board-kicker { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin: 12px 2px 0; }

h1 { margin: 2px 0 0; font-family: var(--font-d); font-size: clamp(30px, 3.4vw, 40px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.08; }
.kicker { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.why { margin: 0; color: var(--mute); font-size: 14px; }
.why strong { color: var(--ink); font-weight: 600; }
.addr-line { font: 500 12px var(--font-m); color: var(--mute); margin-top: 6px; }
.muted { color: var(--mute); }
.sm { font-size: 12px; }

.big { font-family: var(--font-m); font-size: clamp(30px, 3vw, 38px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.big .unit { font-size: 15px; letter-spacing: 0; color: var(--mute); font-family: var(--font-b); font-weight: 500; }
.pts { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.stats > div { padding-top: 10px; border-top: 1px solid var(--line); }
.stats span { display: block; font-size: 12px; color: var(--mute); }
.stats b { display: block; font-family: var(--font-d); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; margin-top: 2px; }
.stats i { display: block; font-style: normal; font-size: 11px; color: var(--mute); margin-top: 1px; }

.rules { margin: 0; padding-left: 18px; color: var(--mute); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.rules strong { color: var(--ink); font-weight: 600; }

/* onboarding steps, in the band */
.wsteps { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.wsteps li { display: flex; gap: 8px; align-items: center; padding: 4px 0; font-size: 13px; color: var(--mute); white-space: nowrap; }
.wsteps .n { width: 22px; height: 22px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font: 500 11px var(--font-m); box-shadow: inset 0 0 0 1px var(--line); background: var(--white); }
.wsteps li.done { color: var(--ink); }
.wsteps li.done .n { background: var(--ink); box-shadow: none; color: #fff; }
.wsteps li.now { color: var(--ink); font-weight: 600; }
.wsteps li.now .n { box-shadow: inset 0 0 0 1px var(--blue); color: var(--blue); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.note { margin: 0; font-size: 12.5px; color: var(--mute); line-height: 1.5;  }
.note strong { color: var(--ink); font-weight: 600; }
.note.accent { color: var(--mute); }

/* ── sheets and tables ─────────────────── */
.sheet { background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow: auto; flex: none; }
.sheet.pad { padding: 16px 20px; overflow: visible; }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.sheet-head h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.sheet-head .hint { font-size: 12px; color: var(--mute); }

table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mute); padding: 11px 16px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--white); z-index: 1;
}
table.data td { height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data td.num { font-family: var(--font-m); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tr.rowlink { cursor: pointer; }
table.data tr.rowlink:hover td { background: color-mix(in srgb, var(--blue) 3%, white); }
.mono { font-family: var(--font-m); font-size: .85em; }

/* leaderboard */
table.data tr.you td { background: color-mix(in srgb, var(--blue) 7%, white); }
table.data tr.you td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
.you-pill { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, white); border-radius: 6px; padding: 2px 6px; margin-left: 8px; }
.rank-badge { display: inline-flex; align-items: center; justify-content: center; height: 26px; min-width: 26px; padding: 0 8px; border-radius: 999px; font: 500 11px var(--font-m); font-variant-numeric: tabular-nums; background: #f3f3f4; color: var(--ink); }
table.data tr.you .rank-badge { background: color-mix(in srgb, var(--blue) 14%, white); color: var(--blue); }
table.data tr.out td { color: var(--mute); }
table.data tr.cutline-row td { height: 34px; border-bottom: 0; }
.cutline { display: flex; align-items: center; gap: 12px; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.cutline span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cutline::before, .cutline::after { content: ""; height: 2px; flex: 1; background: var(--grad); }

/* status: typographic chip (icon + text, no box) */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.pill svg { width: 11px; height: 11px; }
.pill.good { color: var(--green); }
.pill.warning { color: var(--warn); }
.pill.critical { color: var(--crit); }
.pill.neutral { color: var(--mute); }

/* ── controls ───────────────────────── */
.btn {
  height: 38px; padding: 0 18px; border: 0; border-radius: 19px; cursor: pointer;
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn:hover { background: #000; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; letter-spacing: 0; text-transform: none; }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--mute); background: transparent; }
.btn.danger { background: transparent; color: var(--crit); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; letter-spacing: 0; text-transform: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--ink); color: #fff; box-shadow: none; }

.field-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* An unread row in the notification inbox (templates/notifications/partials/_row.html). The
   prototype highlights an unread notification the same way (`.notif.unread`, prototype/index.html);
   this is that same tint on the class this partial actually renders, without redefining `.accent` as
   a bare selector everywhere else `.field-row` appears. Fix round 1 (task 10), Important 1. */
.field-row.accent { background: color-mix(in srgb, var(--blue) 4%, white); border-radius: 8px; padding: 4px 8px; margin: 0 -8px; }
.field {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  background: var(--fog); border: 1px solid var(--line); border-radius: 20px;
}
.field span { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.field input, .field select { width: 130px; border: 0; background: transparent; font: 500 14px var(--font-m); color: var(--ink); outline: none; }
.field select { width: auto; font-family: var(--font-b); font-size: 13px; }
.err { font-size: 12.5px; color: var(--crit); font-weight: 600; margin: 6px 0 0; }
.help { font-size: 12px; color: var(--mute); margin: 6px 0 0; }
.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--fog); border-radius: 999px; }
.seg button { border: 0; background: transparent; color: var(--mute); height: 32px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.seg button.on { background: var(--white); color: var(--ink); box-shadow: var(--shadow); }
.checkline { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; margin: 14px 0 0; }
.checkline input { margin-top: 3px; accent-color: var(--blue); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; font-size: 13px; margin: 14px 0 0; }
.kv dt { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding-top: 2px; }
.kv dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.kv dd.m { font-family: var(--font-m); font-size: 12.5px; }

.keycard { border-top: 1px solid var(--line); padding: 12px 0 2px; }
.keycard .kt { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
.keycard .kv2 { font: 400 12px var(--font-m); overflow-wrap: anywhere; margin-top: 5px; }
.keycard .note { border-left: 0; padding-left: 0; }

/* simulator instrument */
.sim-amt { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 20px; }
.sim-amt .lab { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.sim-amt .field { height: 52px; padding: 0 18px; }
.sim-amt .field input { font-size: 20px; width: 170px; }
.sim-amt input[type=range] { width: 100%; height: 24px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.sim-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 18px 0 8px; border-top: 1px solid var(--line-soft); }
.sim-out .so span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.sim-out .so b { display: block; font: 500 32px var(--font-m); letter-spacing: -0.03em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.sim-out .so.hero b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sim-out .so i { display: block; font-style: normal; font-size: 11.5px; color: var(--mute); margin-top: 5px; line-height: 1.45; }
@media (max-width: 720px) { .sim-out { grid-template-columns: 1fr; gap: 16px; } }

.wiz-nav { display: flex; justify-content: space-between; margin-top: 22px; }

/* activity */
.event { display: grid; grid-template-columns: 92px 16px 1fr; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 13px; align-items: start; }
.event:last-child { border-bottom: 0; }
.event .when { font: 500 11px var(--font-m); color: var(--mute); white-space: nowrap; padding-top: 2px; }
.event .eicon { width: 15px; height: 15px; margin-top: 2px; }
.event .eicon svg { width: 15px; height: 15px; display: block; }

/* charts */
.chart-box { position: relative; }
.chart-box svg { display: block; width: 100%; height: auto; }
.tooltip {
  position: absolute; pointer-events: none; display: none;
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow); padding: 6px 10px; font-size: 12px; z-index: 5; white-space: nowrap;
}
.tooltip .t-epoch { color: var(--mute); font-size: 10.5px; }
.tooltip .t-val { font-family: var(--font-m); font-weight: 500; font-variant-numeric: tabular-nums; }
.toggle-tbl { height: 30px; padding: 0 12px; font-size: 12px; letter-spacing: 0; text-transform: none; }

/* ── landing ─────────────────────────── */
.solo { min-height: 100dvh; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 40px 24px; }
.solo .wm { font-family: var(--font-d); font-size: clamp(44px, 6vw, 64px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.solo .tag { color: var(--mute); font-size: 16px; max-width: 34rem; text-align: center; margin: -14px 0 0; }
.persona-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; width: 100%; max-width: 680px; }
button.persona { text-align: left; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; cursor: pointer; box-shadow: var(--shadow); position: relative; overflow: hidden; }
button.persona::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad); opacity: 0; transition: opacity .15s; }
button.persona:hover::before { opacity: 1; }
button.persona .pt { font-family: var(--font-d); font-weight: 500; font-size: 18px; letter-spacing: -0.02em; margin-bottom: 6px; }
button.persona .pd { font-size: 13px; color: var(--mute); line-height: 1.5; }
.solo .foot { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }

/* empty state (new client) uses the same mast+board layout */

/* toast */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; border-radius: 20px; padding: 10px 20px; font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 20;
}
.toast.show { opacity: 1; }

.hidden { display: none !important; }

/* landing */
.landing { justify-content: flex-start; gap: 0; padding: 0; }
.l-wrap { width: min(1020px, 100%); margin: 0 auto; padding: 64px 24px 72px; display: flex; flex-direction: column; gap: 56px; }
.l-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.l-line { margin: 6px 0 0; font-family: var(--font-d); font-size: clamp(30px, 4.4vw, 52px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; }
.l-ctas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.l-sec-t { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-bottom: 12px; }
.l-how { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.l-how .col { border-top: 1px solid var(--line); padding-top: 14px; }
.l-how h3 { margin: 0 0 10px; font-family: var(--font-d); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.l-demo { display: block; text-align: center; font-size: 12.5px; color: var(--mute); }
.l-demo:hover { color: var(--blue); }
@media (max-width: 760px) { .l-how { grid-template-columns: 1fr; } }

/* cut chips */
.pill.cut-in { color: var(--green); }
.pill.cut-edge { color: var(--warn); }
.pill.cut-out { color: var(--mute); }

@media (max-width: 960px) {
  .shell { flex-direction: column; }
  .side { position: static; height: auto; width: auto; flex-direction: row; align-items: center; gap: 8px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .proto, .epoch, .side-spacer { display: none; }
  .reset { margin: 0; }
  .sidenav { flex-direction: row; overflow-x: auto; flex: 1; }
  .sidenav a { height: 32px; padding: 0 10px; white-space: nowrap; }
  .sidenav a.active { box-shadow: inset 0 -2px 0 var(--blue); }
  .connect { height: 32px; padding: 0 12px; }
  .view { padding: 0 14px 40px; }
  .mast { grid-template-columns: 1fr; gap: 12px; align-items: start; }
  .mast-right { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ── additions (v0.2) ─────────────────── */
.r { text-align: right; }
.vlink { color: inherit; text-decoration: none; }
.vlink:hover { color: var(--blue); }
.linkbtn { border: 0; background: none; padding: 0; margin-top: 4px; color: var(--blue); font: 600 11px var(--font-b); cursor: pointer; letter-spacing: .02em; }
.linkbtn:hover { text-decoration: underline; }
.connect.off { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.connect.off .dot { background: var(--mute); }
.connect { cursor: pointer; }
.chars { font: 500 11px var(--font-m); color: var(--mute); }
.chars.over { color: var(--crit); }
.field.wide input { width: 260px; font-family: var(--font-b); font-size: 14px; }
.field.grow { flex: 1; min-width: 260px; }
.field.grow input { width: 100%; }
textarea.ta { width: 100%; min-height: 84px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--fog); font: 400 14px/1.45 var(--font-b); color: var(--ink); resize: vertical; outline: none; }
textarea.ta:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sheet.confirm { border-color: var(--blue); }
.sheet.danger { border-color: var(--crit); }
.l-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.l-trust .t { border-top: 1px solid var(--line); padding-top: 12px; }
.l-trust .t b { display: block; font-family: var(--font-d); font-size: 17px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 4px; }
.l-trust .t span { font-size: 12.5px; color: var(--mute); line-height: 1.5; }
@media (max-width: 760px) { .l-trust { grid-template-columns: 1fr 1fr; } }
.l-foot { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; font-size: 12px; color: var(--mute); }
.l-foot a { color: var(--mute); }
.l-foot a:hover { color: var(--blue); }
.preview { border: 1px dashed var(--line); border-radius: 12px; padding: 18px 20px; background: var(--fog); }
.preview h2 { margin: 4px 0 8px; font-family: var(--font-d); font-size: 26px; font-weight: 500; letter-spacing: -0.03em; }
.demo-ctl { display: flex; flex-direction: column; gap: 2px; }
.tag-mini { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.tl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 13px; margin: 8px 0 0; }
.tl dt { font: 500 12px var(--font-m); color: var(--mute); white-space: nowrap; padding-top: 1px; }
.tl dd { margin: 0; }
.tl dd strong { font-weight: 600; }
.agree { font-size: 13px; color: var(--mute); line-height: 1.55; }
.agree h4 { margin: 12px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.agree p { margin: 0; }
.bar-row { display: grid; grid-template-columns: 120px 1fr 110px; gap: 12px; align-items: center; font-size: 12.5px; padding: 6px 0; }
.bar-row .track { height: 8px; border-radius: 4px; background: var(--fog); overflow: hidden; }
.bar-row .fill { height: 100%; border-radius: 4px; background: var(--blue); }
.bar-row .fill.d { background: var(--sky); }
.bar-row .n { font-family: var(--font-m); text-align: right; font-variant-numeric: tabular-nums; }
.persona-cards { margin: 0 auto; }
.detect { display: flex; flex-direction: column; gap: 10px; width: min(560px, 100%); }
.detect .row { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; background: var(--white); }
.detect .row .eicon { width: 16px; height: 16px; margin-top: 2px; }
.detect .row .eicon svg { width: 16px; height: 16px; display: block; }
.detect .row small { display: block; color: var(--mute); font-size: 12px; margin-top: 2px; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choice .c { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.choice .c h3 { margin: 0; font-family: var(--font-d); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.choice .c .big { font-size: 26px; }
.choice .c .rules { margin-top: 4px; }
.choice .c .btn { align-self: flex-start; margin-top: 8px; }
@media (max-width: 760px) { .choice { grid-template-columns: 1fr; } }
.badge { display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--blue); color: #fff; font: 600 10px var(--font-m); align-items: center; justify-content: center; margin-left: auto; }
.inc-panel { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.inc-panel[hidden] { display: none; }
.inc-panel select { font: 500 11px var(--font-m); padding: 5px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); max-width: 190px; }
.prog { height: 10px; border-radius: 5px; background: var(--fog); overflow: hidden; display: flex; }
.prog i { display: block; height: 100%; }
.tgl-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.tgl-row:last-child { border-bottom: 0; }
.tgl-row span small { display: block; font-size: 11.5px; color: var(--mute); }
.tgl-row input { accent-color: var(--blue); width: 16px; height: 16px; }
.notif { display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line-soft); font-size: 13px; align-items: start; }
.notif:last-child { border-bottom: 0; }
.notif.unread { background: color-mix(in srgb, var(--blue) 4%, white); }
.notif .when { font: 500 11px var(--font-m); color: var(--mute); padding-top: 2px; }
.notif .kind { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px; color: var(--mute); margin-top: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }


/* ── v2: clean shell ─────────────────────── */
.side { padding-top: 26px; }
.brand { margin-bottom: 22px; }
.bell { display: flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 8px; color: var(--mute); font-size: 13px; font-weight: 600; text-decoration: none; margin-bottom: 8px; }
.bell:hover, .bell.active { color: var(--ink); }
.bell .badge { margin-left: auto; }
.badge[hidden] { display: none; }
.attn { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 12px 16px; border: 1px solid var(--line); background: var(--fog); border-radius: 10px; font-size: 13.5px; margin-top: 4px; color: var(--mute); }
.attn strong { color: var(--ink); font-weight: 600; }
.attn.crit strong { color: var(--crit); }
.attn.good strong { color: var(--green); }
.attn .btn { flex: none; height: 32px; padding: 0 14px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 2px 0 6px; overflow-x: auto; }
.tabs a { padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--mute); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.tabs a.active { color: var(--ink); border-bottom-color: var(--ink); }
.tabs .dot-c { width: 7px; height: 7px; border-radius: 50%; background: var(--crit); }
.rules-d { margin-top: 10px; }
.rules-d summary { cursor: pointer; font-size: 12px; color: var(--mute); font-weight: 600; }
.rules-d p { margin-top: 6px; }
.l-trust.three { grid-template-columns: repeat(3, 1fr); }
.l-foot a { text-decoration: none; }
.flow { list-style: none; margin: 0; padding: 0; }
.flow li { border-bottom: 1px solid var(--line-soft); }
.flow li:last-child { border-bottom: 0; }
.flow-step { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 14px; align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: 11px 16px; font: 500 13px var(--font-b); color: var(--ink); cursor: pointer; }
.flow-step:hover { background: color-mix(in srgb, var(--demo) 6%, white); }
.flow-step .n { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 500 11px var(--font-m); box-shadow: inset 0 0 0 1px var(--demo); color: var(--demo); }

/* ── scenario drawer: the only demo control; orange means "not part of the product" ── */
:root { --demo: #ff6a00; }
.sc-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; background: var(--demo); color: #fff; border: 0; border-radius: 8px 0 0 8px; padding: 12px 6px; font: 600 10px var(--font-b); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; z-index: 30; opacity: .9; }
.sc-tab:hover { opacity: 1; }
.sc-tab[hidden] { display: none; }
.sc-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 304px; background: #fff; border-left: 2px solid var(--demo); box-shadow: -8px 0 24px rgba(0,0,0,.08); z-index: 31; overflow: auto; padding: 16px 18px 24px; font-size: 12.5px; }
.sc-drawer[hidden] { display: none; }
body.sc-open .shell { margin-right: 304px; }
@media (max-width: 960px) { body.sc-open .shell { margin-right: 0; } }
.sc-head { display: flex; justify-content: space-between; align-items: center; color: var(--demo); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
.sc-x { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--mute); }
.sc-note { color: var(--mute); font-size: 11.5px; margin: 6px 0 8px; line-height: 1.45; }
.sc-sec { border-top: 1px solid var(--line); padding: 10px 0; }
.sc-t { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin: 4px 0 6px; }
.sc-opt { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; cursor: pointer; flex-wrap: wrap; }
.sc-opt input { accent-color: var(--demo); margin: 0; position: relative; top: 1px; }
.sc-opt small { flex-basis: 100%; padding-left: 21px; color: var(--mute); font-size: 11px; margin-top: -2px; }
.sc-row { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-btn { border: 1px solid var(--demo); background: #fff; color: var(--demo); border-radius: 999px; padding: 4px 10px; font: 600 11px var(--font-b); cursor: pointer; }
.sc-btn:hover { background: var(--demo); color: #fff; }
.sc-link { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 4px 0; color: var(--ink); font: 500 12.5px var(--font-b); cursor: pointer; text-decoration: none; }
.sc-link:hover { color: var(--demo); }

@media (max-width: 960px) {
  .side { flex-wrap: wrap; }
  .brand { margin-bottom: 0; }
  .bell { margin: 0; height: 32px; padding: 0 8px; }
  .bell .badge { margin-left: 6px; }
  .sc-drawer { width: min(304px, 100vw); }
}

/* ── brand: the GenLayer Labs mark (genlayerlabs.com/assets/genlayer-mark.svg) ── */
.gl-mark { width: 22px; height: 21px; flex: none; color: var(--ink); }
.brand { flex-wrap: wrap; row-gap: 0; }
.brand .by { flex-basis: 100%; padding-left: 32px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.by-labs { display: inline-flex; align-items: center; gap: 8px; }
.by-labs .gl-mark { width: 16px; height: 15px; }
/* explore controls */
.ex-bar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 0 0 10px; }
.ex-bar .field { height: 36px; }
.ex-bar .field input { width: 220px; font-family: var(--font-b); font-size: 13px; }
.ex-bar .seg { margin-left: auto; }
.ex-bar .seg button { height: 28px; padding: 0 11px; font-size: 12px; }
.ex-empty { padding: 28px 20px; text-align: center; color: var(--mute); font-size: 13px; }
/* security */
.sec-code { display: inline-flex; gap: 6px; }
.sec-code .field input { width: 110px; letter-spacing: .3em; }
.qr { width: 132px; height: 132px; border: 1px solid var(--line); border-radius: 8px; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 12px), repeating-linear-gradient(0deg, var(--ink) 0 6px, transparent 6px 12px); background-blend-mode: multiply; opacity: .85; flex: none; }
.codes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 14px; font: 500 12.5px var(--font-m); margin: 10px 0; }
@media (max-width: 960px) { .brand .by { display: none; } .ex-bar .seg { margin-left: 0; } }

/* ── v3-polish: one header, one band, one control language ── */
.mast { padding: 26px 0 8px; align-items: end; }
.mast-left { gap: 8px; }
.mast-left .why { max-width: 60ch; }
.mast-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; padding-bottom: 4px; }
.mast-right .big { line-height: 1; }
.band { display: block; padding: 16px 0 14px; margin: 14px 0 18px; }
.bstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 24px; }
.bstat b { font-size: 21px; white-space: normal; overflow-wrap: anywhere; }
.bstat { min-width: 0; max-width: 100%; }
.bstat b .pill { font-size: 10px; }
.bstat i { white-space: normal; }
.band-actions { justify-content: flex-end; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); gap: 10px; }
.band-actions:empty { display: none; }
.band-actions .linkbtn { margin: 0 auto 0 0; }
.band .wsteps { margin: 0; }
.tabs { align-items: center; }
.tabs .tabs-r { margin: 0 4px 0 auto; font-size: 12.5px; color: var(--mute); }
.tabs .tabs-r:hover { color: var(--ink); text-decoration: none; }
.sheet { flex: none; }
.btn.ghost, .btn.danger { font-weight: 600; }
.toggle-tbl { height: 28px; padding: 0 11px; font-size: 12px; }
table.data td .linkbtn { margin: 0; font-size: 12px; }
table.data th { white-space: nowrap; }
table.data td.num { font-size: 12.5px; }
table.data td:last-child { padding-right: 14px; }
.ex-bar { gap: 8px; }
.ex-bar .field, .ex-bar .seg { height: 38px; box-sizing: border-box; }
.ex-bar .seg { padding: 3px; border: 1px solid var(--line); }
.ex-bar .seg button { height: 30px; padding: 0 12px; }
.ex-bar .field.sel { padding-right: 10px; }
.ex-bar .field.sel select { font-weight: 600; color: var(--ink); }
.ex-bar .field input { width: 200px; }
.keycard .field-row .muted.sm { font-size: 12px; }
.chart-box svg text { font-family: var(--font-m); }
.sheet.pad .sheet-head { margin-bottom: 10px; }
.kv dt { white-space: nowrap; }
@media (max-width: 960px) {
  .bstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band-actions { justify-content: flex-start; }
  .mast-right { align-items: flex-start; }
}
table.data td.nw { white-space: nowrap; }
table.data td { padding: 0 14px; }

/* ── v4-account ── */
.auth { width: min(520px, 100%); display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.auth .field.wide { width: 100%; }
.auth .field.wide input { width: 100%; }
.auth .l-ctas { margin-top: 6px; }
.auth .detect { width: 100%; }
.detect button.row { width: 100%; text-align: left; border: 1px solid var(--line); background: var(--white); cursor: pointer; font: inherit; color: inherit; }
.detect button.row:hover { border-color: var(--ink); }
.sw-note { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: 13px; color: var(--mute); }
.sw-note strong { color: var(--ink); }
.sw-note .btn { flex: none; }
.ro { opacity: .55; pointer-events: none; }
.ro input, .ro textarea, .ro select { pointer-events: none; }
.wl { display: inline-block; line-height: 1.6; }
.wl .pill { vertical-align: middle; }
.why .wl a { color: var(--blue); }
.band-actions .sw-note + .btn { display: none; }
.connect .addr.two { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.connect .addr.two b { font-weight: 600; }
.connect .addr.two small { font: 500 10.5px var(--font-m); opacity: .7; }
.mast-left .why .wl { display: block; white-space: normal; }
.mast-left .why .mono { overflow-wrap: anywhere; }
.mast-left .why:has(.wl) { max-width: none; }

/* ── v5-forms: friendly fields, label above the box, grids of equal columns, sections with a sentence ── */
.field:not(.ex-bar .field):not(.sim-amt .field) { display: flex; flex-direction: column; align-items: stretch; gap: 6px; height: auto; padding: 0; background: none; border: 0; border-radius: 0; min-width: 0; }
.field:not(.ex-bar .field):not(.sim-amt .field) > span { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.field > span em { font-style: normal; font-weight: 500; color: var(--mute); margin-left: 4px; }
.field:not(.ex-bar .field):not(.sim-amt .field) input, .field:not(.ex-bar .field):not(.sim-amt .field) select { width: 100%; height: 42px; padding: 0 13px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; background: var(--white); font: 400 14px var(--font-b); color: var(--ink); }
.field:not(.ex-bar .field) input::placeholder { color: color-mix(in srgb, var(--mute) 70%, white); }
.field:not(.ex-bar .field) input:focus-visible, .field:not(.ex-bar .field) select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.field:not(.ex-bar .field) input[type="password"], .field:not(.ex-bar .field) input[inputmode="numeric"], .field:not(.ex-bar .field) input#acAccount, .field:not(.ex-bar .field) input#bAccount, .field:not(.ex-bar .field) input#opKey, .field:not(.ex-bar .field) input#opProof { font-family: var(--font-m); font-size: 13.5px; }
.field:not(.ex-bar .field) select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='1.6'/></svg>"); background-repeat: no-repeat; background-position: right 13px center; }
.field-row:has(> .field:not(.ex-bar .field)) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; align-items: end; }
.field-row:has(> .field) > .field.span2, .field-row:has(> .field) > .field.wide, .field-row:has(> .field) > .field.grow { grid-column: span 2; }
.field-row:has(> .field) > .btn, .field-row:has(> .field) > .linkbtn, .field-row:has(> .field) > .sec-code { justify-self: start; align-self: end; }
.field-row:has(> .field) > .btn { height: 42px; }
.field-row:has(> .field) > .muted.sm, .field-row:has(> .field) > .help, .field-row:has(> .field) > span { grid-column: span 2; align-self: end; padding-bottom: 12px; }
.field-row:has(> .field) > .tgl-row { align-self: end; padding-bottom: 11px; }
.field.wide input, .field.grow input { width: 100%; }
.form-sec { border-top: 1px solid var(--line-soft); padding: 16px 0 6px; }
.form-sec:first-of-type { border-top: 0; padding-top: 4px; }
.fs-head { margin-bottom: 12px; }
.fs-head h3 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.fs-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--mute); max-width: 70ch; }
.form-sec .field-row + .help, .form-sec .mcard + .help { margin-top: 10px; }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.form-foot .sec-code .field { margin: 0; }
.mcard { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--fog); display: flex; flex-direction: column; gap: 8px; }
.mcard.ok { border-color: color-mix(in srgb, var(--green) 40%, var(--line)); background: color-mix(in srgb, var(--green) 4%, white); }
.mc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mc-line { font-size: 13.5px; }
.mcard .help { margin: 0; }
.mcard .field-row { margin-top: 4px; }
.auth .field-row, .auth { gap: 12px; }
.sec-code .field input { width: 140px; letter-spacing: .3em; }
.sim-amt .field { border-radius: 12px; }
@media (max-width: 960px) { .field-row:has(> .field:not(.ex-bar .field)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .field-row:has(> .field:not(.ex-bar .field)) { grid-template-columns: 1fr; } .field-row:has(> .field) > .field.span2 { grid-column: span 1; } }
.field-row:has(> .field) > .field.span3 { grid-column: span 3; }
.field-row:has(> .field) > .tgl-row { justify-content: flex-start; gap: 10px; justify-self: start; }
@media (max-width: 960px) { .field-row:has(> .field) > .field.span3 { grid-column: span 2; } }

/* ── account chip: who you are, then which wallet the extension exposes ── */
.acct { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 10px; border-radius: 14px; background: var(--ink); color: #fff; }
.acct .connect.off { margin: -10px -12px; width: calc(100% + 24px); }
.acct-name { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-size: 12.5px; font-weight: 600; min-width: 0; }
.acct-name .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-name .dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; flex: none; }
.acct-name .dot.off { background: rgba(255,255,255,.35); }
.acct-w { display: block; }
.acct-w .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.acct-w select { width: 100%; height: 30px; padding: 0 26px 0 9px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); font: 500 11.5px var(--font-m); appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.6'/></svg>"); background-repeat: no-repeat; background-position: right 9px center; }
.acct-w select:hover { background-color: rgba(255,255,255,.14); }
.acct-w select:focus-visible { outline: 2px solid #34d399; outline-offset: 1px; }
.acct-w select option { color: var(--ink); background: #fff; }
@media (max-width: 960px) { .acct { flex-direction: row; align-items: center; padding: 6px 10px; gap: 10px; } .acct-w select { width: 160px; } }
.acct.guest { background: transparent; padding: 0; color: var(--ink); }
.acct.guest .connect.off { margin: 0; width: 100%; }

/* ── v6-sidebar: three places, one action, an account card with two menus ── */
.side { padding-top: 22px; }
.brand { margin-bottom: 24px; }
.side .sidenav { gap: 0; }
.side .sidenav a { position: relative; height: 34px; padding: 0 12px 0 16px; border-radius: 0; background: none; box-shadow: none; font-size: 13.5px; font-weight: 500; color: var(--mute); }
.side .sidenav a:hover { color: var(--ink); }
.side .sidenav a.active { color: var(--ink); font-weight: 600; background: none; box-shadow: none; }
.side .sidenav a.active::before { content: ""; position: absolute; left: 2px; top: 9px; bottom: 9px; width: 2.5px; border-radius: 2px; background: var(--ink); }
.side .sidenav a .badge { margin-left: auto; }
.side-cta { margin: 14px 6px 0; height: 38px; justify-content: center; }
.side-cta.active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 15%, transparent); }
.bell { display: none; }
.acct { margin: 0 2px; padding: 0; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; position: relative; gap: 0; }
.acct.guest { border: 0; background: transparent; }
.acct-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: none; padding: 10px 12px; font: 600 13px var(--font-b); color: var(--ink); cursor: pointer; text-align: left; border-radius: 12px 12px 0 0; }
.acct-name:hover, .acct-w:hover { background: var(--fog); }
.acct-name svg, .acct-w svg { width: 12px; height: 12px; color: var(--mute); flex: none; }
.acct-name .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-w { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; border-top: 1px solid var(--line-soft); background: none; padding: 9px 12px 10px; cursor: pointer; text-align: left; color: var(--ink); font: inherit; border-radius: 0 0 12px 12px; }
.acct-w .wtxt { flex: 1; min-width: 0; line-height: 1.25; }
.acct-w b { display: block; font-size: 12.5px; font-weight: 600; }
.acct-w small { display: block; font: 500 10.5px var(--font-m); color: var(--mute); }
.acct .dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; flex: none; }
.acct .dot.off { background: var(--line); }
.pop { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.10); padding: 6px; z-index: 20; }
.pop[hidden] { display: none; }
.pop a, .pop button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: 500 13px var(--font-b); color: var(--ink); text-decoration: none; cursor: pointer; text-align: left; }
.pop a:hover, .pop button:hover { background: var(--fog); }
.pop .danger { color: var(--crit); }
.pop hr { border: 0; border-top: 1px solid var(--line-soft); margin: 4px 0; }
.pop button b { display: block; font-size: 12.5px; font-weight: 600; }
.pop button small { display: block; font: 500 10.5px var(--font-m); color: var(--mute); }
.pop button > span:nth-child(2) { flex: 1; min-width: 0; }
.pop .tick { color: var(--green); }
.pop .tick svg { width: 12px; height: 12px; }
@media (max-width: 960px) {
  .side-cta { margin: 0; height: 32px; padding: 0 12px; }
  .acct { margin: 0; }
  .acct-name { padding: 6px 10px; border-radius: 12px 0 0 12px; }
  .acct-w { border-top: 0; border-left: 1px solid var(--line-soft); padding: 5px 10px; border-radius: 0 12px 12px 0; }
  .acct { display: flex; flex-direction: row; align-items: stretch; }
  .acct-w small br { display: none; }
  .pop { bottom: auto; top: calc(100% + 6px); left: auto; right: 0; min-width: 220px; }
}

/* ── Plan 1's account pages, kept: the sign-in and wallet screens use these and the prototype's
   shell does not define them. Everything the prototype does define was dropped rather than
   duplicated, so there is one rule per class in this file. ─────────────────────────────────── */
.wm { font-weight: 700; text-decoration: none; color: var(--ink); }
.inline { display: inline; }
.form { display: grid; gap: 14px; max-width: 460px; }
.errorlist, .messages { color: var(--crit); list-style: none; padding: 0; }

/* Keep every section visible on narrow screens; the primary action has its own row. */
@media (max-width: 560px) {
  .side { flex-wrap: wrap; }
  .side .brand { margin: 0 auto 0 0; }
  .side .sidenav { order: 3; flex: 1 0 100%; flex-wrap: wrap; overflow: visible; }
  .side .sidenav a { padding: 0 10px; }
  .side .acct { order: 4; }
}

/* Account and allauth pages supply their own content rather than the dashboard's .view. */
.maincol:not(:has(> .view)) { padding: clamp(18px, 4vw, 44px); overflow-wrap: anywhere; }
.maincol:not(:has(> .view)) > table { display: block; max-width: 100%; overflow-x: auto; }
.maincol:not(:has(> .view)) form { max-width: 560px; }
.maincol:not(:has(> .view)) input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.maincol:not(:has(> .view)) select, .maincol:not(:has(> .view)) textarea {
  max-width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px;
  padding: 9px 10px; font: inherit; background: var(--white); color: var(--ink);
}
.maincol:not(:has(> .view)) button:not([class]) {
  border: 1px solid var(--line); border-radius: 6px; padding: 9px 14px;
  font: inherit; cursor: pointer; background: var(--ink); color: var(--white);
}

.table-scroll { max-width: 100%; overflow-x: auto; }
.table-scroll > table { min-width: 520px; }
.messages { margin: 16px; }
.messages .success { color: var(--green); }
.messages .info { color: var(--ink); }