/*
 * HELLSDATA — tap-in logger stylesheet (PLAN W1.1).
 *
 * Deliberately commits to one dark panel look rather than following the
 * viewer's light/dark preference: this screen gets used mat-side, often
 * in a gym with bad overhead lighting, by someone who needs the biggest
 * possible contrast and tap targets, not a theme match. Palette borrowed
 * from the app-screen panels in public/readme.html, which make the same
 * commitment for the same reason.
 *
 * Tap targets are 44px+ everywhere (Apple/Google's own accessibility
 * floor) and the primary action is always the bottom-anchored button —
 * this is a one-handed, thumb-reach, sweaty-mat tool.
 */

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

:root {
  --panel:      #101216;
  --panel-2:    #191c22;
  --panel-3:    #22262e;
  --ink:        #eceae5;
  --mute:       #8d939c;
  --rule:       #2b3038;
  --accent:     #ff5a4d;
  --accent-ink: #1a0805;
  --good:       #3ecf8e;
  --warn:       #f5b942;
  --bad:        #ff5a4d;

  --display: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  color-scheme: dark;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--display);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* dvh wins where supported; vh is the fallback, not a typo */
}

button, input {
  font-family: inherit;
  color: inherit;
}

.num { font-variant-numeric: tabular-nums; }

/* ── status bar ───────────────────────────────────────────────────── */
.statusbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.statusbar .dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--mute);
}
.statusbar[data-mode="synced"] .dot { background: var(--good); }
.statusbar[data-mode="syncing"] .dot { background: var(--warn); animation: pulse 1.1s ease-in-out infinite; }
.statusbar[data-mode="pending"] .dot { background: var(--warn); }
.statusbar[data-mode="offline"] .dot { background: var(--mute); }
.statusbar[data-mode="error"] .dot { background: var(--bad); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.statusbar button.linklike {
  margin-left: auto;
  background: none; border: none; padding: 6px 4px;
  font: inherit; color: var(--ink); text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer;
}

/* ── layout shell ─────────────────────────────────────────────────── */
#view {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}
.screen {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
}
.screen.center { justify-content: center; }

.topline {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.back {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--rule); color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mute); margin: 0 0 4px;
}
h1.screen-title {
  font-family: var(--display); font-weight: 800; letter-spacing: -.02em;
  font-size: 26px; line-height: 1.1; margin: 0 0 4px;
}
.screen-note {
  color: var(--mute); font-size: 14px; line-height: 1.4; margin: 0 0 18px;
  max-width: 42ch;
}

.spacer { flex: 1 1 auto; }

/* ── buttons ──────────────────────────────────────────────────────── */
.cta {
  display: block; width: 100%;
  padding: 18px 20px;
  border-radius: 14px;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--display); font-weight: 800; font-size: 18px;
  letter-spacing: -.01em;
  text-align: center;
  cursor: pointer;
  min-height: 56px;
}
.cta:disabled { opacity: .4; }
.cta.ghost {
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--rule);
  font-weight: 700;
}
.cta.small { padding: 13px 16px; font-size: 15px; min-height: 44px; border-radius: 12px; }

.bottom-cta {
  position: sticky; bottom: 0; padding-top: 12px;
  background: linear-gradient(to top, var(--panel) 60%, transparent);
}

.chiprow { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 12px 16px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--rule); color: var(--ink);
  font-family: var(--mono); font-size: 13px; letter-spacing: .04em;
  min-height: 44px; cursor: pointer;
}
.chip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }

.field-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute); margin: 0 0 8px;
}

/* ── outcome grid (4 big buttons) ─────────────────────────────────── */
.outcomegrid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.outcomebtn {
  border-radius: 16px; border: 1px solid var(--rule); background: var(--panel-2);
  color: var(--ink); padding: 22px 14px; min-height: 92px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer;
}
.outcomebtn .lbl { font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
.outcomebtn .sub { font-family: var(--mono); font-size: 10.5px; color: var(--mute); text-align: center; }
.outcomebtn[data-value="success"] { border-color: #2e6b52; background: #12241c; }
.outcomebtn[data-value="failed"]  { border-color: #6b2e2e; background: #241414; }
.outcomebtn[data-value="reversed"]{ border-color: #6b552e; background: #241d12; }
.outcomebtn[data-value="stalled"] { border-color: var(--rule); }

/* ── search + lists ───────────────────────────────────────────────── */
.searchbox {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--rule); background: var(--panel-2); color: var(--ink);
  font-size: 16px; margin-bottom: 14px; min-height: 48px;
}
.searchbox::placeholder { color: var(--mute); }

.section-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute); margin: 14px 0 8px;
}
.section-label:first-child { margin-top: 0; }

.list { display: flex; flex-direction: column; gap: 8px; }
.rowbtn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 14px 16px; min-height: 52px;
  border-radius: 12px; border: 1px solid var(--rule); background: var(--panel-2);
  color: var(--ink); cursor: pointer;
}
.rowbtn .nm { font-family: var(--display); font-weight: 700; font-size: 15px; flex: 1; }
.rowbtn .tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mute); border: 1px solid var(--rule); border-radius: 6px; padding: 2px 6px; flex: none;
}
.rowbtn .arrow { color: var(--mute); flex: none; }

.empty-note {
  color: var(--mute); font-size: 14px; line-height: 1.5; padding: 24px 4px;
  text-align: center;
}

/* ── continuing-from card ─────────────────────────────────────────── */
.presetcard {
  border: 1px solid var(--accent); background: #241512; border-radius: 14px;
  padding: 16px; margin-bottom: 16px;
}
.presetcard .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.presetcard .v { font-family: var(--display); font-weight: 800; font-size: 19px; margin: 4px 0 12px; }

/* ── tally (exchanges logged this roll) ───────────────────────────── */
.tally { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 18px; }
.tally-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 12px; border-radius: 10px; background: var(--panel-2);
  font-size: 13.5px;
}
.tally-row .i { font-family: var(--mono); color: var(--mute); font-size: 11px; flex: none; }
.tally-row .t { flex: 1; }
.tally-row .o {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  flex: none; padding: 2px 7px; border-radius: 6px;
}
.tally-row[data-outcome="success"]  .o { color: var(--good); }
.tally-row[data-outcome="failed"]   .o { color: var(--bad); }
.tally-row[data-outcome="reversed"] .o { color: var(--warn); }
.tally-row[data-outcome="stalled"]  .o { color: var(--mute); }

.linklike {
  background: none; border: none; color: var(--mute); font-family: var(--mono);
  font-size: 12px; text-decoration: underline; text-underline-offset: 3px;
  padding: 8px 0; cursor: pointer; align-self: flex-start;
}

/* ── done screen ──────────────────────────────────────────────────── */
.donetime {
  font-family: var(--display); font-weight: 800; letter-spacing: -.03em;
  font-size: 52px; line-height: 1; margin: 6px 0 2px;
}
.donetime .u { font-size: 22px; color: var(--mute); font-weight: 700; }
.donecap { font-family: var(--mono); font-size: 12px; color: var(--mute); letter-spacing: .06em; margin-bottom: 26px; }
.syncpill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--rule);
  font-family: var(--mono); font-size: 12px; margin-bottom: 24px;
}

/* ── toggle / checkbox row ────────────────────────────────────────── */
.disclose > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 12px 0; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mute);
}
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary::before { content: "+"; font-size: 15px; color: var(--accent); width: 14px; }
.disclose[open] > summary::before { content: "\2212"; }

.textfield {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--rule); background: var(--panel-2); color: var(--ink);
  font-size: 16px; min-height: 48px;
}
.checkrow { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; color: var(--mute); }
.checkrow input { width: 20px; height: 20px; }

.errbanner {
  background: #241414; border: 1px solid #6b2e2e; color: #ff9d94;
  padding: 12px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 14px;
}

.queue-row {
  border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
}
.queue-row .meta { font-family: var(--mono); font-size: 11px; color: var(--mute); margin-bottom: 8px; }
.queue-row .err { color: var(--bad); font-size: 12.5px; margin-bottom: 10px; }
.queue-row .actions { display: flex; gap: 8px; }

/* ── dashboard ("your positions, your rates, your gaps", PLAN W1.4) ── */
.navbtn {
  flex: none; height: 40px; padding: 0 14px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--rule); color: var(--ink);
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  cursor: pointer; display: inline-flex; align-items: center;
}
.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.statcard {
  background: var(--panel-2); border: 1px solid var(--rule); border-radius: 12px;
  padding: 14px; text-align: center;
}
.statcard .big { font-family: var(--display); font-weight: 800; font-size: 26px; }
.statcard .lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mute); margin-top: 4px;
}
.statrow {
  display: flex; align-items: center; gap: 10px; padding: 13px 14px;
  border-radius: 12px; background: var(--panel-2); border: 1px solid var(--rule);
  margin-bottom: 8px;
}
.statrow .nm { font-family: var(--display); font-weight: 700; font-size: 15px; flex: 1; }
.statrow .n { font-family: var(--mono); font-size: 13px; color: var(--mute); }
.raterow {
  display: flex; flex-direction: column; gap: 6px; padding: 13px 14px;
  border-radius: 12px; background: var(--panel-2); border: 1px solid var(--rule);
  margin-bottom: 8px;
}
.raterow .top { display: flex; align-items: baseline; gap: 8px; }
.raterow .nm { font-family: var(--display); font-weight: 700; font-size: 15px; flex: 1; }
.raterow .pct { font-family: var(--mono); font-size: 15px; font-weight: 700; }
.raterow .pct.good { color: var(--good); }
.raterow .pct.bad { color: var(--bad); }
.raterow .pct.mid { color: var(--warn); }
.raterow .sub { font-family: var(--mono); font-size: 11px; color: var(--mute); }
.raterow .bar { height: 4px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.raterow .bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }