/* Colors are Dialpad's Dialtone dp-light / dp-dark semantic tokens
   (@dialpad/dialtone 10.7.0); see design/README.md for the role mapping. */
:root {
  --bg: #f8f6f5;            /* surface/secondary */
  --surface: #ffffff;       /* surface/primary */
  --surface-2: #e7e6e4;     /* surface/moderate */
  --text: #252320;          /* foreground/primary */
  --text-2: #474542;        /* foreground/secondary */
  --muted: #5d5c58;         /* foreground/tertiary */
  --border: rgb(37 35 32 / 0.17);        /* border/default */
  --border-subtle: rgb(37 35 32 / 0.11); /* border/subtle */
  --border-bold: rgb(37 35 32 / 0.5);    /* border/bold */
  --brand: #7b51ff;         /* brand purple: header, primary actions */
  --brand-hover: #6b3fff;
  --brand-text: #ffffff;
  --brand-subtle: #f2ebff;  /* surface/brand-subtle */
  /* Marks on the purple header (unread dot, mention count): the header is
     purple in both themes, so these aren't redefined for dark. */
  --on-brand-mark: #ffe9c9;
  --on-brand-mark-text: #713e00;
  --link: #4723b3;          /* link/primary-hover: #7b51ff is 4.37:1 on --bg */
  --positive: #017c46;      /* foreground/positive: matches, wins */
  --positive-text: #ffffff;
  --positive-surface: #cfffea;
  --positive-strong: #006036;
  --warn-surface: #ffe9c9;
  --warn-subtle: #fff8ee;
  --warn-strong: #713e00;
  --warn-border: #b76500;
  --critical: #df003f;
  --critical-surface: #ffe2e0;
  --critical-strong: #ab0131;
  --focus: #237bff;
  --ball-bg: #ffffff;
  --radius: 12px;
  --tap: 44px;
  --tabbar-h: 0px;          /* room the phone tab bar takes; set where it shows */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1d1a;
    --surface: #161512;
    --surface-2: #312e2b;
    --text: #dbdad7;
    --text-2: #bcbbb7;
    --muted: #969592;
    --border: rgb(255 255 255 / 0.22);
    --border-subtle: rgb(255 255 255 / 0.14);
    --border-bold: rgb(255 255 255 / 0.5);
    --brand-hover: #8d68ff;
    --brand-subtle: #0f002c;
    --link: #b9a3ff;
    --positive: #84ee0b;
    --positive-text: #161512;
    --positive-surface: #254502;
    --positive-strong: #c0f782;
    --warn-surface: #4c2a00;
    --warn-subtle: #2b1700;
    --warn-strong: #ffc56f;
    --warn-border: #ffae36;
    --critical: #ff8e9a;
    --critical-surface: #420113;
    --critical-strong: #ffa9b2;
    --focus: #0a67f2;
    --ball-bg: #1e1d1a;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", system-ui, sans-serif;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}

a { color: var(--link); }
a:hover { color: var(--text); }

img { max-width: 100%; height: auto; display: block; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--brand);
  color: var(--brand-text);
  padding-top: env(safe-area-inset-top);
}

.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px;
}

.brand {
  color: inherit;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  gap: 6px;
}

.brand img { display: block; flex: none; }

.brand:hover { color: inherit; }

#nav { display: flex; gap: 0; flex-wrap: nowrap; white-space: nowrap; justify-content: flex-end; }

#nav a, #nav button {
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 0.9rem;
  padding: 0 7px;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
}

#nav a:hover, #nav button:hover, #nav a[aria-current="page"] { background: rgb(255 255 255 / 0.14); color: inherit; }

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px;
}

main.wide { max-width: 1200px; }

main:focus { outline: none; }

h1 { font-size: 1.4rem; margin: 4px 0 12px; }
h2 { font-size: 1.1rem; margin: 20px 0 8px; }
h3 { font-size: 1rem; margin: 0; }

.muted { color: var(--muted); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

label.btn { margin: 0; }
label.btn:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.center { text-align: center; }
.small { font-size: 0.875rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.card.warn-edge { border-color: var(--warn-border); }
.card.critical-edge { border-color: var(--critical); }

.stack > * + * { margin-top: 10px; }

.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }

.day-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.day-link:hover { color: inherit; }
.day-link:hover .card, .day-link:focus-visible .card { border-color: var(--brand); }

.day-note { margin-top: 6px; font-size: 0.875rem; }
.day-note.bad { color: var(--critical-strong); }
.day-note.warn { color: var(--warn-strong); }

.won { font-weight: 700; color: var(--positive); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover { color: var(--text); border-color: var(--border-bold); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-text); }
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--brand-text); }
.btn.danger { color: var(--critical); border-color: var(--critical); background: transparent; }
.btn.block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn:focus-visible, input:focus-visible, a:focus-visible, button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

input[type="text"], input[type="date"], input[type="number"], input[inputmode] {
  min-height: var(--tap);
  border-radius: 10px;
  border: 1px solid var(--border-bold);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  padding: 0 12px;
  width: 100%;
}

label { font-weight: 600; display: block; margin-bottom: 4px; }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-2);
  white-space: nowrap;
}

.chip.good { background: var(--positive-surface); color: var(--positive-strong); }
.chip.warn { background: var(--warn-surface); color: var(--warn-strong); }
.chip.bad { background: var(--critical-surface); color: var(--critical-strong); }
/* A chip holding a sentence (a scan's warning) wraps instead of overflowing. */
p.chip { display: flex; white-space: normal; border-radius: 10px; padding: 6px 10px; }

.stat { font-size: 1.6rem; font-weight: 700; }

.balls { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }

.ball {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  border: 1.5px solid var(--border-bold);
  background: var(--ball-bg);
  font-variant-numeric: tabular-nums;
}

.ball.special { background: var(--warn-surface); color: var(--warn-strong); border-color: transparent; }
.ball.hit { background: var(--positive); color: var(--positive-text); border-color: transparent; }
.ball.empty { color: var(--muted); border-style: dashed; }

.ticket-head { display: flex; gap: 12px; align-items: flex-start; }

.thumb {
  width: 72px;
  aspect-ratio: 3 / 4;
  flex: none;
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow: hidden;
  padding: 0;
  background: var(--surface-2);
  cursor: zoom-in;
}

.thumb img { width: 100%; height: 100%; object-fit: cover; }

.fix .thumb { aspect-ratio: auto; width: 100%; min-height: 72px; }
.fix .thumb img { height: auto; object-fit: contain; }

.photos-title { margin: 0 0 10px; font-size: 1rem; }

.photo-strip { display: flex; gap: 8px; overflow-x: auto; }

.photo {
  flex: none;
  width: 132px;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow: hidden;
  padding: 0;
  background: var(--surface-2);
  cursor: zoom-in;
}

.photo img { width: 100%; height: 100%; object-fit: cover; }

.lines { list-style: none; margin: 10px 0 0; padding: 0; }
.ticket-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }

.line {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border-subtle);
}

.line.flagged { background: var(--warn-subtle); margin: 0 -16px; padding: 8px 16px; }
.line.won .prize { color: var(--positive); }

.letter { font-weight: 700; color: var(--muted); }
.prize { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
/* The owner's Confirm winnings card, and the note once confirmed. */
.review-card { border-color: var(--brand); }
.review-title { margin: 0; font-size: 1rem; }
.review-done { margin: 0 0 12px; color: var(--muted); }
.line-edit { display: block; margin-left: auto; min-height: 28px; padding: 4px 0; border: 0; background: none; color: var(--link); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.line-edit:hover { text-decoration: underline; }
.flag-note { font-size: 0.875rem; color: var(--warn-strong); }

.fix {
  grid-column: 1 / -1;
  padding: 10px 0 4px;
}

.fix-title { margin: 0; font-size: 1rem; }
.fix fieldset { border: 0; margin: 0; padding: 0; }
.fix legend { font-weight: 600; padding: 0; margin-bottom: 6px; }
.fix-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.fix-grid input, .mega-input {
  min-height: 48px;
  padding: 0 4px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
}
.mega-row { display: flex; align-items: center; gap: 12px; }
.mega-row label { margin: 0; }
.mega-row .mega-input { width: 64px; flex: none; background: var(--warn-surface); color: var(--warn-strong); border-color: var(--warn-strong); }
.remove-line { border-top: 1px solid var(--border); padding-top: 12px; }

.error { color: var(--critical); font-weight: 600; }

.progress {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.progress > div { height: 100%; background: var(--brand); width: 0; transition: width 0.2s; }
.progress.failed > div { background: var(--critical); }

.attention-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: var(--tap);
  padding: 6px 0;
  border-top: 1px solid var(--border-subtle);
  color: inherit;
  text-decoration: none;
}

.attention-item:hover { color: inherit; }
.attention-item .chip { flex: none; }

.banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 0.875rem;
  background: var(--critical-surface);
  color: var(--critical-strong);
}

.banner svg { flex: none; margin-top: 1px; }

.drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 220px;
  border: 2px dashed var(--brand);
  border-radius: var(--radius);
  background: var(--brand-subtle);
  text-align: center;
  padding: 24px;
  cursor: pointer;
  font-weight: 400;
}

.drop-zone.dragging { border-style: solid; }
.drop-zone strong { font-size: 1.1rem; }
.drop-zone .pick { color: var(--link); font-weight: 600; text-decoration: underline; }

.pickers { display: grid; gap: 10px; }

/* Live scan. The preview shows the whole camera frame (what gets captured),
   so the wrapper hugs the video and the guide sits on the video itself. */
.camera {
  position: relative;
  width: fit-content;
  max-width: 100%;
  min-height: 200px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}

.camera-video { display: block; max-width: 100%; max-height: 70vh; }

/* Corner marks around the middle of the view: a hint, not a crop. */
.camera-guide {
  --mark: rgb(255 255 255 / 0.9);
  --len: 28px;
  --thick: 3px;
  position: absolute;
  inset: 10%;
  pointer-events: none;
  background:
    linear-gradient(var(--mark) 0 0) top left / var(--len) var(--thick),
    linear-gradient(var(--mark) 0 0) top left / var(--thick) var(--len),
    linear-gradient(var(--mark) 0 0) top right / var(--len) var(--thick),
    linear-gradient(var(--mark) 0 0) top right / var(--thick) var(--len),
    linear-gradient(var(--mark) 0 0) bottom left / var(--len) var(--thick),
    linear-gradient(var(--mark) 0 0) bottom left / var(--thick) var(--len),
    linear-gradient(var(--mark) 0 0) bottom right / var(--len) var(--thick),
    linear-gradient(var(--mark) 0 0) bottom right / var(--thick) var(--len);
  background-repeat: no-repeat;
}

.camera-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 10px 12px;
  background: rgb(0 0 0 / 0.7);
  color: #fff;
  font-weight: 600;
  text-align: center;
}

/* A good read: "Ticket N ✓" over the bottom of the preview until the next capture. */
.camera-hint.ok {
  padding: 14px 12px;
  background: var(--positive);
  color: var(--positive-text);
  animation: camera-ok 0.4s ease-out;
}
.camera-hint.ok strong { display: block; font-size: 1.6rem; line-height: 1.2; }
.camera-hint.ok span { display: block; font-weight: 600; }
@keyframes camera-ok { from { transform: scale(1.06); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .camera-hint.ok { animation: none; } }

.camera-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.camera-flash.on { animation: camera-flash 0.35s ease-out; }
@keyframes camera-flash { from { opacity: 0.7; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .camera-flash.on { animation: none; } }

.capture-list { list-style: none; margin: 0; padding: 0; }
.capture-list > li > .chip { margin: 4px 0 0; }

.code {
  font: 700 1.4rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
  word-break: break-all;
  padding: 12px;
  border-radius: 10px;
  background: var(--surface-2);
}

dialog {
  border: 0;
  padding: 0;
  max-width: min(96vw, 900px);
  background: transparent;
}

dialog::backdrop { background: rgb(0 0 0 / 0.75); }

dialog img { max-height: 88vh; width: auto; margin: 0 auto; border-radius: 8px; }

dialog form { text-align: right; }

#toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--tabbar-h));
  margin: 0 auto;
  max-width: 480px;
  background: var(--text);
  color: var(--bg);
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

#toast.show { opacity: 1; }

/* The drop zone is for pointer devices; phones get the two pickers. */
.drop-only { display: none; }

/* Between the phone tab bar and a computer the owner's eight header links
   need the room: the coin alone stands for the name, and the links stay
   compact until 760px. */
@media (min-width: 600px) and (max-width: 759px) {
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (min-width: 760px) {
  #nav a, #nav button { font-size: 0.95rem; padding: 0 10px; }
}

@media (min-width: 600px) {
  .ball { width: 38px; height: 38px; font-size: 1rem; }
  .thumb { width: 96px; }
}

/* Computer layouts (design/lottoscan-canvas/Desktop*.dc.html). */
@media (min-width: 900px) {
  .topbar-inner { padding: 8px 32px; }
  .brand { font-size: 1.25rem; }
  main.wide { padding: 32px; }
  h1 { font-size: 1.75rem; }

  .day-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
  .day-aside { flex: 1 1 280px; max-width: 360px; }
  .day-tickets {
    flex: 999 1 560px;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
    align-items: start;
  }
  .day-tickets .card { margin: 0; }
  .day-aside .photo-strip { flex-wrap: wrap; }
  .day-aside .photo { width: 100%; }

  .scan-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
  .scan-main { flex: 999 1 560px; min-width: 0; }
  .scan-side { flex: 1 1 300px; max-width: 380px; }
}

@media (min-width: 900px) and (pointer: fine) {
  .drop-only { display: flex; }
  .touch-only { display: none; }
}

.offline-wrap { max-width: 1200px; margin: 12px auto 0; padding: 0 16px; }
.offline-wrap .banner { margin: 0; }
@media (min-width: 900px) { .offline-wrap { padding: 0 32px; } }

.accuracy-note {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.875rem;
}

/* The card on top of Days, and the draws before it (Claude Design canvas
   "LottoScan next draw", option C). */
.draw-card { display: grid; gap: 16px; margin: 0 0 12px; padding: 16px; border: 2px solid var(--brand); border-radius: 16px; }
.draw-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.draw-steps li { display: grid; gap: 6px; font-size: 0.8rem; color: var(--muted); }
.draw-steps li::before { content: ""; height: 6px; border-radius: 3px; background: var(--surface-2); }
.draw-steps li.done { color: var(--text-2); }
.draw-steps li.done::before { background: var(--brand); opacity: 0.45; }
.draw-steps li.now { color: var(--link); font-weight: 700; }
.draw-steps li.now::before { background: var(--brand); }
.draw-body, .draw-main, .draw-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.draw-side { gap: 12px; }
.draw-eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--link); }
.draw-title { margin: 2px 0 0; font-size: 1.5rem; }
.draw-figure { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.draw-big { font-size: 3rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.draw-big-label { margin-top: 6px; color: var(--text-2); }
.draw-count { text-align: right; }
.draw-count-value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.draw-line { margin: 0; font-size: 0.875rem; color: var(--muted); }
.draw-note { display: flex; gap: 10px; align-items: center; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); font-size: 0.9rem; }
.draw-note svg { flex: none; width: 20px; height: 20px; }
.draw-card .day-note, .draw-card .error { margin: 0; }
.past-title { margin: 8px 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.past-grid { display: grid; gap: 8px; }
.past-grid .card { margin: 0; height: 100%; box-sizing: border-box; }
.past-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.past-main { min-width: 0; }
.past-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.past-side .won { font-size: 1.1rem; }
.past-draws .accuracy-note { margin: 12px 0 0; }
.past-toggle { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: var(--tap); margin: 8px auto 0; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--link); font: inherit; font-weight: 600; cursor: pointer; }
.past-toggle.open svg { transform: rotate(180deg); }

@media (min-width: 900px) {
  .draw-card { gap: 24px; padding: 24px 28px; }
  .draw-body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; align-items: end; }
  .draw-figure { justify-content: flex-start; gap: 40px; }
  .past-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
  .past-toggle { margin-left: 0; }
}

dialog { cursor: zoom-out; }
dialog img, dialog form { cursor: default; }

select {
  min-height: var(--tap);
  border-radius: 10px;
  border: 1px solid var(--border-bold);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  padding: 0 12px;
  width: 100%;
}

.ev-figure { font-size: 2.25rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ev-figure.gain { color: var(--positive); }
.ev-figure.loss { color: var(--critical-strong); }

.table-scroll { overflow-x: auto; }
.ev-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.ev-table th, .ev-table td { padding: 8px 6px; border-top: 1px solid var(--border-subtle); text-align: right; white-space: nowrap; }
.ev-table thead th { border-top: 0; color: var(--muted); font-weight: 600; }
.ev-table th[scope="row"] { text-align: left; font-weight: 600; white-space: normal; }
.ev-table thead th:first-child { text-align: left; }
.ev-table tfoot th, .ev-table tfoot td { border-top: 2px solid var(--border); font-weight: 700; }

@media (min-width: 900px) {
  .ev-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
  .ev-inputs { flex: 1 1 320px; max-width: 420px; }
  .ev-breakdown { flex: 999 1 520px; min-width: 0; }
}

/* Pool chat: a room that fills the screen below the header (60px tall) and
   above the phone tab bar, if any. The
   messages scroll inside it and the composer stays pinned to its bottom.
   The viewport's interactive-widget=resizes-content (index.html) makes 100dvh
   shrink when Android's keyboard opens, so the composer stays above it; the
   small min-height keeps a short screen from pushing it under. */
main.chat-page { box-sizing: border-box; height: calc(100dvh - 60px - var(--tabbar-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height: 200px; padding-top: 0; padding-bottom: 0; display: flex; }
.chat-window { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-head { position: relative; flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.chat-head-text { flex: 1; min-width: 0; }
.people-toggle { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 12px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); color: var(--text); font: inherit; font-size: 0.9rem; cursor: pointer; }
.people-toggle[aria-expanded="true"] { background: var(--surface-2); }
.people-toggle:focus-visible, .person:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* The notifications bell (brand-colored while on) and its panel, under the
   header's right edge. */
.bell-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bell-toggle.on { color: var(--brand); border-color: var(--brand); }
.bell-toggle[aria-expanded="true"] { background: var(--surface-2); }
.bell-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.chat-notify { position: absolute; top: calc(100% + 4px); right: 0; z-index: 7; width: min(340px, 100%); padding: 12px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border-bold); border-radius: var(--radius); }
.chat-notify[hidden] { display: none; }
.chat-notify p { margin: 0 0 12px; font-size: 0.9rem; }
.chat-notify p:last-child { margin: 0; }

/* Members: a panel over the messages on phones, a sidebar from 900px. */
main.chat-page { position: relative; }
.chat-people { display: none; position: absolute; top: 72px; right: 16px; left: 16px; z-index: 6; max-height: 60%; overflow-y: auto; padding: 12px; background: var(--surface); border: 1px solid var(--border-bold); border-radius: var(--radius); box-sizing: border-box; }
.chat-people.open { display: block; }
.people-title { margin: 0 0 8px; padding: 0 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.people-list { margin: 0; padding: 0; list-style: none; }
.person { display: flex; flex-direction: column; width: 100%; min-height: var(--tap); justify-content: center; padding: 6px 8px; box-sizing: border-box; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: left; }
button.person { cursor: pointer; }
button.person:hover { background: var(--surface-2); }
.person-name { font-weight: 700; font-size: 0.9rem; overflow-wrap: anywhere; }
.person-email { font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; }
@media (min-width: 900px) {
  main.chat-page { max-width: 1040px; gap: 24px; }
  .people-toggle { display: none; }
  .chat-people, .chat-people.open { display: block; position: static; flex: none; width: 240px; max-height: none; margin: 16px 0; border: 0; border-left: 1px solid var(--border-subtle); border-radius: 0; background: none; padding: 0 0 0 16px; }
}
.chat-head h1 { margin: 0; font-size: 1.1rem; }
.chat-sub { margin: 2px 0 0; font-size: 0.8rem; color: var(--muted); }
.chat-sub:empty { display: none; }
.chat-window > .banner { margin: 12px 0 0; }
/* The scroller reaches into main's right padding and adds it back inside, so
   its scrollbar runs along the page edge instead of against my bubbles. */
.chat-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: -16px; padding-right: 16px; scrollbar-width: thin; scrollbar-color: var(--border-bold) transparent; }
.msgs { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; padding: 8px 0 12px; box-sizing: border-box; }
.msgs-empty { margin: auto 0 0; padding: 16px 0; text-align: center; }
.msgs-more:not(:empty) { padding-top: 12px; }

.day-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; font-size: 0.75rem; color: var(--muted); }
.day-divider::before, .day-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }

/* Others' messages on the left in grey bubbles; mine on the right in brand
   purple. A grouped message (same author, minutes later) sits close under
   the one before and skips the name and time. */
.msg { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 14px; }
.msg.grouped { margin-top: 4px; }
.msg.mine { align-items: flex-end; }
.msg-head { display: flex; align-items: baseline; gap: 8px; padding: 0 4px; }
.msg-name { font-weight: 700; font-size: 0.85rem; }
.msg.mine .msg-name { font-weight: 400; color: var(--muted); }
.msg-time { font-size: 0.75rem; color: var(--muted); }
.msg-row { position: relative; display: flex; align-items: center; gap: 4px; max-width: min(75%, 560px); }
.msg.mine .msg-row { flex-direction: row-reverse; }
.bubble { min-width: 0; padding: 8px 14px; background: var(--surface-2); color: var(--text); border-radius: 4px 16px 16px 16px; }
.msg.grouped .bubble { border-radius: 16px; }
.msg.mine .bubble { background: var(--brand); color: var(--brand-text); border-radius: 16px 4px 16px 16px; }
.msg.mine.grouped .bubble { border-radius: 16px; }
.msg-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-text + .msg-text { margin-top: 4px; }
.msg-delete { flex: none; background: none; border: 0; color: var(--muted); font: inherit; font-size: 0.75rem; padding: 4px 6px; min-height: 28px; border-radius: 6px; cursor: pointer; }
.msg-delete:hover { color: var(--critical); }
/* A message of mine on its way to the server, and one that didn't make it. */
.msg.sending .bubble { opacity: 0.6; }
.msg-failed { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0 4px; font-size: 0.75rem; color: var(--critical-strong); }
.msg-action { background: none; border: 0; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; padding: 4px 6px; min-height: 28px; border-radius: 6px; cursor: pointer; }
/* With a mouse, Delete shows only beside the message being pointed at or focused. */
@media (hover: hover) {
  .msg-delete { opacity: 0; }
  .msg:hover .msg-delete, .msg-delete:focus-visible { opacity: 1; }
}
/* On a touch screen it's in the long-press menu instead; the button stays for
   screen readers and shows when a keyboard focuses it. A held bubble opens
   that menu rather than selecting its text. */
@media (hover: none) {
  .msg-delete:not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bubble { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}

/* The message menu (Copy text, Delete), opened by a long press or right click:
   under the bubble (or over it), lined up with its outer edge. */
.msg-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 10; display: flex; flex-direction: column; min-width: 160px; padding: 4px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border-bold); border-radius: 10px; }
.msg-menu[hidden] { display: none; }
.msg-menu.above { top: auto; bottom: calc(100% + 6px); }
.msg.mine .msg-menu { left: auto; right: 0; }
.msg-menu-item { min-height: var(--tap); padding: 0 12px; background: none; border: 0; border-radius: 6px; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.msg-menu-item:hover { background: var(--surface-2); }
.msg-menu-item:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.msg-menu-item.danger { color: var(--critical-strong); }
.msg.menu-open .bubble { outline: 2px solid var(--border-bold); outline-offset: 2px; }

.mention { font-weight: 700; background: rgb(0 0 0 / 0.08); border-radius: 4px; padding: 0 3px; }
.msg.mine .mention { background: rgb(255 255 255 / 0.22); }
.msg.mentions-me .bubble { background: var(--warn-subtle); box-shadow: inset 0 0 0 1px var(--warn-border); }
.msg.system .bubble { background: var(--brand-subtle); box-shadow: inset 0 0 0 1px var(--brand); }
.msg.system .msg-name { color: var(--link); }
.msg.system.jackpot .bubble { background: var(--positive-surface); box-shadow: inset 0 0 0 1px var(--positive); }
.msg.system.jackpot .msg-name { color: var(--positive-strong); }
.msg-link { font-weight: 700; color: var(--link); }
.msg.mine .msg-link { color: inherit; }

/* The composer: a rounded field with a round send button inside it. */
.composer { flex: none; display: flex; gap: 4px; align-items: flex-end; margin: 8px 0 16px; padding: 4px 4px 4px 6px; border: 1px solid var(--border-bold); border-radius: 24px; background: var(--surface); }
.composer:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.send { flex: none; width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand); color: var(--brand-text); cursor: pointer; }
.send:hover { background: var(--brand-hover); }
.send:disabled { opacity: 0.6; cursor: default; }

.compose-field { position: relative; flex: 1; min-width: 0; }
.suggest { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 5; margin: 0; padding: 4px; list-style: none; max-height: 240px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-bold); border-radius: 10px; }
.suggest[hidden] { display: none; }
.suggest-item { display: flex; flex-direction: column; padding: 8px 10px; min-height: var(--tap); justify-content: center; border-radius: 6px; cursor: pointer; }
.suggest-item.active { background: var(--surface-2); }
.suggest-name { font-weight: 700; overflow-wrap: anywhere; }
.suggest-email { font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; }
/* The field draws the focus ring, so the textarea itself has none. */
.composer textarea { display: block; box-sizing: border-box; width: 100%; min-height: var(--tap); max-height: 160px; resize: none; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; line-height: 22px; padding: 11px 10px; overflow-y: hidden; }
.msg-delete:focus-visible, .msg-action:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Unread marks on the Chat link (drawn on the purple header; on a tab, below). */
.unread-dot { display: inline-block; flex: none; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: var(--on-brand-mark); }
.mention-count { display: inline-block; flex: none; margin-left: 4px; min-width: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--on-brand-mark); color: var(--on-brand-mark-text); font-size: 0.75rem; font-weight: 700; line-height: 18px; text-align: center; }

@media (max-width: 430px) {
  .ev-table { font-size: 0.85rem; }
  .ev-table th, .ev-table td { padding: 8px 3px; }
}

/* Phones: members get a bottom tab bar (Days, Chat, Scan, Value, More) in
   place of the header links; app.js renderNav adds body.has-tabs. It hides
   while a text field has focus, so the keyboard and the chat composer get
   the room. */
.tabbar { display: none; }

@media (max-width: 599px) {
  body.has-tabs { --tabbar-h: 64px; }
  body.has-tabs:has(textarea:focus, input:not([type="checkbox"], [type="radio"], [type="file"], [type="button"], [type="submit"]):focus) { --tabbar-h: 0px; }
  .has-tabs #nav { display: none; }
  .has-tabs .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    box-sizing: border-box;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding: 0 4px env(safe-area-inset-bottom);
    background: var(--surface);
    border-top: 1px solid var(--border-subtle);
  }
  body.has-tabs:has(textarea:focus, input:not([type="checkbox"], [type="radio"], [type="file"], [type="button"], [type="submit"]):focus) .tabbar { display: none; }
}

.tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
@media (hover: hover) { .tab:hover { color: var(--text); } }
.tab[aria-current="page"] { color: var(--link); font-weight: 700; }
.tab-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 30px; border-radius: 15px; }
.tab[aria-current="page"] .tab-icon { background: rgb(123 81 255 / 0.2); }
.tab-icon svg { width: 22px; height: 22px; }
.tab-more svg { stroke-width: 3; }
.tab .mention-count, .tab .unread-dot { position: absolute; margin: 0; background: var(--link); color: var(--surface); }
.tab .mention-count { top: -3px; left: 32px; }
.tab .unread-dot { top: 2px; left: 36px; }

/* The More tab's sheet, up from the bottom of the screen. */
dialog.sheet { width: 100%; max-width: none; max-height: 85dvh; margin: auto 0 0; background: var(--surface); color: var(--text); border-radius: 16px 16px 0 0; cursor: default; }
dialog.sheet::backdrop { background: rgb(0 0 0 / 0.55); }
.sheet-body { padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); }
.sheet-account { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; padding: 12px 20px; border-bottom: 1px solid var(--border-subtle); }
.avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: var(--brand-text); font-size: 1.2rem; font-weight: 700; }
.sheet-who { min-width: 0; }
.sheet-email { font-weight: 600; overflow-wrap: anywhere; }
.sheet-row { display: flex; align-items: center; gap: 14px; box-sizing: border-box; width: 100%; min-height: 52px; padding: 0 20px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
@media (hover: hover) { .sheet-row:hover { background: var(--surface-2); color: var(--text); } }
.sheet-row[aria-current="page"] { font-weight: 700; }
.sheet-row svg { flex: none; width: 22px; height: 22px; color: var(--muted); }
.sheet-label { flex: 1; }
.sheet-row.danger, .sheet-row.danger svg { color: var(--critical); }

/* The pool: the Pot card on a day and on the Pot page, Needs you, Totals. */
.pot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pot-list { list-style: none; margin: 4px 0 0; padding: 0; }
.pot-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border-subtle); }
.pot-name { font-weight: 600; overflow-wrap: anywhere; }
.pot-row.carried .pot-name { font-weight: 500; color: var(--text-2); }
.pot-amount { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.pot-row .line-edit { grid-column: 2; }
.pot-fix { grid-column: 1 / -1; margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.pot-note { margin: 8px 0 0; font-size: 0.8rem; color: var(--muted); }
.pot-row.editing { background: var(--brand-subtle); margin: 0 -16px; padding: 8px 16px; }
.pot-foot { margin-top: 6px; }
.edit-payment { display: grid; gap: 10px; }
.edit-payment + .edit-payment { padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.odd-amount { color: var(--warn-strong); background: var(--warn-surface); border-radius: 6px; padding: 0 4px; }
.needs-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid var(--border-subtle); }
.needs-item:first-of-type { border-top: 0; padding-top: 4px; }
.needs-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.form-grid { display: grid; gap: 10px; }
.status-line { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.875rem; color: var(--muted); }
.status-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--positive); }
.status-line.bad { color: var(--critical-strong); }
.status-line.bad .status-dot { background: var(--critical); }
label.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; font-size: 0.9rem; }
label.check input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.totals-table th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 9.5rem; padding-right: 12px; border-right: 1px solid var(--border-subtle); }
@media (max-width: 599px) { .totals-table th[scope="row"] { min-width: 7.5rem; } }
.totals-table .total { position: sticky; right: 0; z-index: 1; background: var(--surface); font-weight: 700; border-left: 1px solid var(--border-subtle); padding-left: 12px; }
.totals-table td.zero { color: var(--muted); }
.totals-table tr.carried th, .totals-table tr.carried td { color: var(--text-2); font-weight: 500; }
@media (min-width: 900px) {
  .pot-layout { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 0 24px; align-items: start; }
  .pot-layout > * { grid-column: 1; }
  .pot-layout > #totals { grid-column: 2; grid-row: 1 / span 6; }
  .form-grid.cash { grid-template-columns: 1fr 7rem; }
  .form-grid.cash .full { grid-column: 1 / -1; }
}

/* How to play: notifications, paying in, and the rest of the guide. */
.guide { max-width: 1040px; }
.guide-intro { max-width: 640px; margin: 0 0 16px; color: var(--text-2); }
.guide-notify { display: grid; gap: 12px; margin-bottom: 16px; padding: 16px; border-radius: 16px; background: var(--surface-2); }
.guide-notify[hidden] { display: none; }
.guide-notify-head { display: flex; gap: 12px; align-items: flex-start; }
.guide-notify-head svg { flex: none; width: 24px; height: 24px; margin-top: 2px; color: var(--link); }
.guide-notify h2 { margin: 0; font-size: 1.1rem; }
.guide-notify p { margin: 4px 0 0; color: var(--text-2); }
.guide-notify > p { margin: 0; }
.guide-notify ol { display: grid; gap: 4px; margin: 0; padding-left: 22px; }
.guide-cols { display: grid; gap: 24px; align-items: start; }
.guide-pay { display: grid; gap: 14px; margin: 0; padding: 18px 16px; border: 2px solid var(--brand); border-radius: 16px; }
.guide-pay h2 { margin: 2px 0 4px; font-size: 1.3rem; }
.guide-pay p { margin: 0; }
.pay-list { display: grid; gap: 14px; }
.pay-list > p { margin: 0; }
.pay-method { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius); background: var(--bg); }
.pay-id { display: flex; align-items: center; gap: 12px; }
.pay-mark { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2); font-size: 1.1rem; font-weight: 800; }
.pay-who { min-width: 0; }
.pay-app { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.pay-handle { font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
.pay-note { color: var(--muted); font-size: 0.875rem; }
.pay-actions { display: flex; gap: 8px; }
.pay-actions .btn { flex: 1 1 auto; padding: 0 12px; white-space: nowrap; }
.guide-more { display: grid; gap: 24px; min-width: 0; }
.guide-more section p { margin: 0 0 10px; }
.guide-more > p { margin: 0; }
.guide-title { margin: 0 0 10px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.guide-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.guide-steps li { display: flex; gap: 12px; }
.guide-step-n { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); font-size: 0.875rem; font-weight: 700; }
.guide-pages { display: grid; gap: 8px; }
.guide-page { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
a.guide-page:hover { border-color: var(--brand); color: var(--text); }
.guide-page svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--link); }
.guide-page-text { color: var(--text-2); }
@media (min-width: 900px) {
  .guide-notify { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; padding: 18px 20px; }
  .guide-notify > :not(.guide-notify-head) { grid-column: 1 / -1; }
  .guide-notify > .btn { grid-column: 2; grid-row: 1; }
  .guide-cols { grid-template-columns: minmax(320px, 1fr) minmax(0, 1.6fr); }
  .guide-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}