/* ============================================================
   EARSHOT — design tokens
   Dark ground is deliberate: a white page reads as classroom.
   Nothing here is ever red. There is nothing in this app
   that can be failed.
   ============================================================ */

:root {
  color-scheme: dark;

  /* Palette — HOLO. Trading-card foil, not corporate cool.
     Three pops in rotation so screens don't read monochrome. */
  --ink:        #0A0712;  /* ground */
  --ink-raised: #171029;  /* cards, raised surfaces */
  --ink-line:   #35265C;  /* hairlines, borders */
  --signal:     #B14BFF;  /* primary */
  --teal:       #4BE3FF;  /* secondary / "him" */
  --pop-3:      #FF9FE5;  /* third accent, keeps it from going flat */
  --paper:      #F5F0FF;  /* primary text */
  --muted:      #A596C9;  /* secondary text */

  /* Type scale — 1.25 ratio, clamped for mobile */
  --t-display: clamp(2rem, 7vw, 2.75rem);
  --t-title:   clamp(1.35rem, 4.5vw, 1.6rem);
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;

  /* Reader comfort. --reader-scale is user-controlled. */
  --reader-scale: 1;
  --measure: 60ch;

  --radius: 14px;
  --gap: 1.25rem;
  --nav-h: 68px;

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

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

html { scroll-padding-top: env(safe-area-inset-top, 0px); }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Atkinson Hyperlegible', 'Verdana', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: calc(var(--t-body) * var(--reader-scale));
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Never justify. Ragged right is easier to track line to line. */
p, li { text-align: left; max-width: var(--measure); text-wrap: pretty; }

h1, h2, h3 {
  font-synthesis-weight: none;
  font-family: 'Archivo Black', 'Arial Black', Impact, 'Helvetica Neue', sans-serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

a { color: var(--signal); }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Layout
   ============================================================ */

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1;
  padding: 1.5rem 1.25rem calc(var(--nav-h) + 2.5rem);
  max-width: 44rem;
  width: 100%;
  margin: 0 auto;
}

.screen[hidden] { display: none; }

.screen-head {
  margin-bottom: 1.75rem;
}

.screen-head h1 {
  font-size: var(--t-display);
}

.screen-head .sub {
  color: var(--muted);
  font-size: var(--t-small);
  margin: 0.4rem 0 0;
}

/* ============================================================
   Now screen — the hero is the book, and one obvious action
   ============================================================ */

.now-card {
  background: var(--ink-raised);
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 1px solid var(--ink-line);
}

.now-cover {
  width: 100%;
  max-width: 190px;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  background: var(--ink-line);
  object-fit: cover;
  display: block;
  margin-bottom: 1.25rem;
}

.now-card h2 { font-size: var(--t-title); }

.now-author {
  color: var(--muted);
  font-size: var(--t-small);
  margin: 0.3rem 0 1rem;
}

.hook {
  font-size: calc(1.0625rem * var(--reader-scale));
  margin: 0 0 1.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--signal);
  color: var(--ink);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
}

.btn:active { transform: scale(0.985); }

.btn-quiet {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--ink-line);
  margin-top: 0.75rem;
}

/* Where each of you is. Social, not evaluative — no bar, no percent. */
.whereabouts {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-line);
  font-size: var(--t-small);
}

.whereabouts div { flex: 1; }

.whereabouts .who {
  color: var(--muted);
  display: block;
}

.whereabouts .spot { font-weight: 700; }
.whereabouts .spot.theirs { color: var(--teal); }

/* ============================================================
   Shelf
   ============================================================ */

.shelf {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.shelf-item {
  display: flex;
  gap: 1rem;
  align-items: center;
  width: 100%;
  text-align: left;
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 0.85rem;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.shelf-cover {
  width: 52px;
  aspect-ratio: 2 / 3;
  border-radius: 5px;
  background: var(--ink-line);
  object-fit: cover;
  flex-shrink: 0;
}

.shelf-item h3 { font-size: 1.0625rem; }

.shelf-item .meta {
  color: var(--muted);
  font-size: var(--t-small);
  margin: 0.15rem 0 0;
}

.shelf-group-label {
  font-family: 'Archivo Black', 'Arial Black', Impact, 'Helvetica Neue', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.75rem 0 0.75rem;
}

.shelf-group-label:first-child { margin-top: 0; }

/* ============================================================
   Talk — prompts for the call. Open questions only.
   ============================================================ */

.prompts { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }

.prompt {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}

.prompt p { margin: 0; }

/* ============================================================
   Marks — he taps, he doesn't type
   ============================================================ */

.mark-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.mark-btn {
  min-height: 72px;
  border-radius: var(--radius);
  border: 1px solid var(--ink-line);
  background: var(--ink-raised);
  color: var(--paper);
  font: inherit;
  font-size: var(--t-small);
  cursor: pointer;
  padding: 0.5rem;
}

.mark-btn .glyph { display: block; font-size: 1.5rem; margin-bottom: 0.2rem; }

.mark-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }

.mark {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.85rem 1rem;
  background: var(--ink-raised);
  border-radius: 10px;
  font-size: var(--t-small);
}

.mark time { color: var(--muted); margin-left: auto; flex-shrink: 0; }

/* Empty states are an invitation, not an apology. */
.empty {
  color: var(--muted);
  border: 1px dashed var(--ink-line);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 0;
}

/* ============================================================
   Reader size control
   ============================================================ */

.size-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-line);
}

.size-control span { color: var(--muted); font-size: var(--t-small); }

.size-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--ink-line);
  background: transparent;
  color: var(--paper);
  font: inherit;
  cursor: pointer;
}

.size-btn[aria-pressed='true'] {
  background: var(--signal);
  color: var(--ink);
  border-color: var(--signal);
  font-weight: 700;
}

/* ============================================================
   Bottom nav — thumb reach, big targets
   ============================================================ */

.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--ink-line);
  z-index: 10;
}

.nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
}

.nav a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.nav a[aria-current='page'] { color: var(--signal); }

/* Install hint */
.install {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  font-size: var(--t-small);
}

.install[hidden] { display: none; }

/* ============================================================
   TALLY — accrual
   Hard rule: everything here only ever goes up. No decay,
   no streaks, no reset. Once earned it is his permanently.
   Counts behaviour (time, books, marks) and never quality.
   ============================================================ */

.tally-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.tally-stat {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 1rem 0.75rem;
  text-align: center;
}

.tally-stat .n {
  display: block;
  font-family: 'Archivo Black', 'Arial Black', Impact, 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--signal);
}

.tally-stat .label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Picks — the actual reward. Spent on making Brett read something. */
.picks {
  background: var(--ink-raised);
  border: 1px solid var(--signal);
  border-radius: var(--radius);
  padding: 1.35rem;
  margin-bottom: 1.5rem;
}

.picks h2 { font-size: var(--t-title); }

.picks p { margin: 0.5rem 0 0; font-size: var(--t-small); color: var(--muted); }

.pick-tokens {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 1rem 0;
  min-height: 34px;
}

.token {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--signal);
  display: grid;
  place-items: center;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.9rem;
}

.token.spent { background: transparent; border: 1px dashed var(--ink-line); color: var(--muted); }

/* Progress toward the next pick. Framed as distance, never as a score. */
.toward {
  font-size: var(--t-small);
  color: var(--muted);
  margin-top: 0.75rem;
}

.toward b { color: var(--paper); font-weight: 700; }

/* Log time — big, cheatable on purpose */
.log-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.log-btn {
  min-height: 60px;
  border-radius: var(--radius);
  border: 1px solid var(--ink-line);
  background: var(--ink-raised);
  color: var(--paper);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Side by side tallies — you accrue too, visibly */
.both {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-line);
}

.both .col { font-size: var(--t-small); }
.both .who { color: var(--muted); display: block; }
.both .amt { font-weight: 700; font-size: 1.1rem; }
.both .col:last-child .amt { color: var(--teal); }

.section-label {
  font-family: 'Archivo Black', 'Arial Black', Impact, 'Helvetica Neue', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.75rem 0 0.75rem;
}

/* ============================================================
   TOGETHER — logged sessions
   Deliberately NOT currency. Earns no picks, unlocks nothing.
   Counts occasions, never elapsed time, and never shows a gap:
   a "days since" number turns this into a record of absence.
   ============================================================ */

.together {
  background: linear-gradient(170deg, var(--ink-raised), color-mix(in srgb, var(--teal) 10%, var(--ink-raised)));
  border: 1px solid color-mix(in srgb, var(--teal) 40%, var(--ink-line));
  border-radius: var(--radius);
  padding: 1.35rem;
  margin-top: 1.75rem;
}

.together h2 { font-size: var(--t-title); }

.together .count {
  font-family: 'Archivo Black', 'Arial Black', Impact, 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--teal);
  display: block;
  margin: 0.75rem 0 0.2rem;
}

.together .count-label { color: var(--muted); font-size: var(--t-small); }

.log-together {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin: 1.25rem 0 0;
}

.together-btn {
  min-height: 54px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--teal) 35%, transparent);
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-size: var(--t-small);
  font-weight: 700;
  cursor: pointer;
}

.session-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  gap: 0.5rem;
}

.session {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  font-size: var(--t-small);
  padding-top: 0.5rem;
  border-top: 1px solid color-mix(in srgb, var(--teal) 18%, transparent);
}

.session .kind { font-weight: 700; }
.session .about { color: var(--muted); }
.session time { color: var(--muted); margin-left: auto; flex-shrink: 0; }

/* ============================================================
   PICK MENU + OWED
   A spent pick becomes a debt, not a disappearance. It sits in
   "Owed" until Brett marks it done. That's what makes the
   currency real rather than a button that does nothing.
   ============================================================ */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  align-items: end;
  background: rgba(4, 10, 20, 0.72);
  backdrop-filter: blur(6px);
}

.sheet[hidden] { display: none; }

.sheet-panel {
  background: var(--ink-raised);
  border-top: 1px solid var(--ink-line);
  border-radius: 20px 20px 0 0;
  padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  max-height: 86dvh;
  overflow-y: auto;
  max-width: 44rem;
  width: 100%;
  margin: 0 auto;
}

.sheet-panel h2 { font-size: var(--t-title); }

.sheet-panel > p {
  color: var(--muted);
  font-size: var(--t-small);
  margin: 0.4rem 0 1.25rem;
}

.redeem-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }

.redeem {
  display: flex;
  gap: 1rem;
  align-items: center;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 0.95rem 1.1rem;
  color: var(--paper);
  font: inherit;
  cursor: pointer;
}

.redeem:disabled { opacity: 0.35; cursor: default; }

.redeem .cost {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--signal);
  color: var(--ink);
  font-weight: 700;
}

.redeem:disabled .cost { background: var(--ink-line); color: var(--muted); }

.redeem .label { font-weight: 700; display: block; }
.redeem .note { color: var(--muted); font-size: var(--t-small); display: block; }

.sheet-close {
  width: 100%;
  min-height: 50px;
  margin-top: 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--ink-line);
  background: transparent;
  color: var(--paper);
  font: inherit;
  cursor: pointer;
}

/* Owed — outstanding claims against Brett */
.owed-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.6rem; }

.owed {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  background: var(--ink);
  border: 1px solid var(--signal);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  font-size: var(--t-small);
}

.owed.done { border-color: var(--ink-line); opacity: 0.55; }

.owed .what { font-weight: 700; }
.owed .when { color: var(--muted); display: block; font-weight: 400; }

.owed-done-btn {
  margin-left: auto;
  flex-shrink: 0;
  min-height: 40px;
  padding: 0 0.9rem;
  border-radius: 999px;
  border: 0;
  background: var(--signal);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
}

.owed.done .owed-done-btn { display: none; }

.owed .stamp { margin-left: auto; color: var(--muted); flex-shrink: 0; }

/* ============================================================
   HOLO — foil surfaces, corrected glow, reward motion
   Notes on the two things that bite here:
   1. A gradient background under a transparent border paints into
      the border box. background-clip: padding-box or it fringes.
   2. A symmetric 0 0 Npx shadow smears a filled shape's silhouette.
      Crisp 1px ring + downward-biased bloom instead.
   ============================================================ */

@property --foil-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.foil { position: relative; isolation: isolate; overflow: hidden; }

.foil::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: conic-gradient(from var(--foil-a),
    #FF6EC7, #FFD86E, #6EFFC1, #6EC7FF, #C76EFF, #FF6EC7);
  mix-blend-mode: soft-light;   /* dodge blows out anything bright nearby */
  opacity: .7;
  animation: foil-spin 9s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.foil > * { position: relative; z-index: 1; }

@keyframes foil-spin { to { --foil-a: 360deg; } }

/* Primary action, foiled */
.btn {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 55%),
    linear-gradient(100deg, var(--signal), var(--teal));
  background-clip: padding-box;
  border: 2px solid color-mix(in srgb, var(--pop-3) 42%, transparent);
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(10, 6, 20, .5);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--teal) 50%, transparent),
    0 10px 28px -8px color-mix(in srgb, var(--signal) 70%, transparent);
  transition: transform .14s cubic-bezier(.34, 1.56, .64, 1);
}

.btn:active { transform: scale(.955); }

.btn-quiet {
  background: transparent;
  border: 1px solid var(--ink-line);
  color: var(--paper);
  text-shadow: none;
  box-shadow: none;
}

/* Stats rotate through all three accents so the screen isn't one hue */
.tally-stat:nth-child(2) .n { color: var(--teal); }
.tally-stat:nth-child(3) .n { color: var(--pop-3); }
.tally-stat:nth-child(4) .n { color: var(--signal); }

.tally-stat {
  transition: transform .16s cubic-bezier(.34, 1.56, .64, 1);
}
.tally-stat:active { transform: scale(.95); }

/* Pick tokens get the foil too — they're the collectible */
.token {
  background: linear-gradient(140deg, var(--signal), var(--teal));
  background-clip: padding-box;
  color: #fff;
  box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--signal) 80%, transparent);
}

.log-btn, .together-btn, .mark-btn {
  transition: transform .14s cubic-bezier(.34, 1.56, .64, 1);
}
.log-btn:active, .together-btn:active, .mark-btn:active { transform: scale(.94); }

/* Reward burst canvas */
#burst {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
}

@media (prefers-reduced-motion: reduce) {
  .foil::after { animation: none; }
}

/* Foil runs continuously, so park it whenever the app isn't on screen.
   app.js toggles .is-hidden on visibilitychange. */
body.is-hidden .foil::after { animation-play-state: paused; }


/* Chapter logging sits beside time logging. Same accrual, friendlier
   unit — "two chapters" is how he'd describe it, "30 minutes" isn't. */
.log-label {
  font-size: var(--t-small);
  color: var(--muted);
  margin: 0 0 0.45rem;
}

.log-row + .log-label { margin-top: 1.1rem; }

/* ============================================================
   OOPS — correcting a mistype
   Deliberately the quietest thing on the screen. It's a utility,
   not a feature, and it must never feel like a penalty box.
   No red, no warning icon, no confirmation dialog.
   ============================================================ */

.oops[hidden] { display: none; }

.oops-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.4rem;
}

.oops-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  background: color-mix(in srgb, var(--ink-raised) 60%, transparent);
  border: 1px solid var(--ink-line);
  border-radius: 10px;
  font-size: var(--t-small);
}

.oops-what { font-weight: 700; }

.oops-when {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: 0.8125rem;
}

.oops-btn {
  margin-left: auto;
  flex-shrink: 0;
  min-height: 38px;
  padding: 0 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--ink-line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: transform .14s cubic-bezier(.34, 1.56, .64, 1), color .2s ease;
}

.oops-btn:hover { color: var(--paper); }
.oops-btn:active { transform: scale(.94); }

/* ============================================================
   Inline undo on marks and sessions
   Same principle as Oops: remove the specific thing, never adjust
   a number. Low contrast at rest so the lists still read as a
   record rather than as a row of delete buttons.
   ============================================================ */

.undo-x {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-left: 0.5rem;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: .45;
  transition: opacity .2s ease, transform .14s cubic-bezier(.34, 1.56, .64, 1);
}

.undo-x:hover,
.undo-x:focus-visible { opacity: 1; border-color: var(--ink-line); }
.undo-x:active { transform: scale(.88); }

/* time pushes to the right; the x sits after it */
.mark time, .session time { margin-left: auto; }

/* ============================================================
   MARKS → TALK → TOGETHER
   A mark is an open question until a talk clears it. That loop is
   the only reason either section exists: tapping a button that
   makes a list longer is data entry, not a feature.
   ============================================================ */

.mark {
  display: block;        /* was a flex row; now head + optional note */
  padding: 0.75rem 0.9rem;
}

.mark-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.mark-kind { font-weight: 700; }

.mark-where {
  color: var(--muted);
  font-size: 0.8125rem;
}

.mark-head .undo-x { margin-left: auto; }

.mark.talked { opacity: .5; }

/* Optional note. No autofocus, no save button — the mark already
   landed, so ignoring this costs him nothing. */
.mark-note {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.35rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--ink-line);
  color: var(--paper);
  font: inherit;
  font-size: var(--t-small);
}

.mark-note::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.mark-note:focus { outline: 0; border-bottom-color: var(--signal); }

/* His marks vs Brett's marks on Talk */
.prompt-theirs { border-left-color: var(--pop-3); }

.mark-q { font-weight: 700; }

.mark-note-read {
  margin: 0.3rem 0 0 !important;
  color: var(--muted);
  font-size: var(--t-small);
}

.drain-note {
  color: var(--muted);
  font-size: var(--t-small);
  margin: 1rem 0 0;
}

.together-hint {
  margin: 0.5rem 0 0;
  font-size: var(--t-small);
  color: var(--teal);
}

.session .cleared {
  color: var(--teal);
  font-size: 0.8125rem;
}

/* ============================================================
   PIN latch
   Styled plainly on purpose. A lock icon or a red error would
   oversell what this is: a nudge against accidental taps.
   ============================================================ */

.pin-input {
  width: 100%;
  min-height: 56px;
  margin: 0.5rem 0 0;
  padding: 0 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--ink-line);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 1.5rem;
  letter-spacing: 0.3em;
  text-align: center;
}

.pin-input:focus { outline: 0; border-color: var(--signal); }

.pin-msg {
  min-height: 1.5rem;
  margin: 0.5rem 0 0.75rem !important;
  font-size: var(--t-small);
  color: var(--muted);
}

/* While Brett mode is live, the Tally header carries a quiet marker so
   nobody forgets which mode the phone is in. */
body.is-brett .screen-head h1::after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 0.5rem;
  border-radius: 50%;
  background: var(--pop-3);
  vertical-align: middle;
}

/* ============================================================
   SYNC, PRESENCE, VOICE, SHELF ADDITIONS
   ============================================================ */

/* Presence — the actual point of sync. Correctness is what it costs;
   "Brett was here 20 minutes ago" is what makes this feel like a place
   two people share rather than a form one person fills in. */
.presence {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem calc(0.6rem + env(safe-area-inset-top, 0px));
  font-size: 0.8125rem;
  color: var(--muted);
  border-bottom: 1px solid var(--ink-line);
  min-height: 2.4rem;
}

.presence .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
  flex-shrink: 0;
}

.presence[data-sync="syncing"] .dot { opacity: .4; }
.presence[data-sync="offline"] .dot { background: var(--muted); box-shadow: none; }

.link-btn {
  background: none; border: 0; padding: 0;
  color: var(--teal); font: inherit; font-size: 0.8125rem;
  text-decoration: underline; cursor: pointer;
}

/* Voice — primary input. He talks constantly and types never. */
.voice-btn {
  width: 100%;
  min-height: 72px;
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
  border-radius: var(--radius);
  border: 2px dashed color-mix(in srgb, var(--teal) 50%, transparent);
  background: color-mix(in srgb, var(--teal) 8%, transparent);
  color: var(--paper);
  font: inherit; font-weight: 700;
  cursor: pointer;
  touch-action: none;             /* hold-to-record must not scroll */
  user-select: none;
  transition: transform .14s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}

.voice-btn .glyph { font-size: 1.4rem; }

.voice-btn.recording,
.mic-btn.recording {
  background: var(--pop-3);
  color: var(--ink);
  border-style: solid;
  border-color: var(--pop-3);
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse { 50% { opacity: .65; } }

.voice-msg { min-height: 1.2rem; font-size: var(--t-small); color: var(--muted); margin: .4rem 0 1rem; }

.mark-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; }
.mark-row .mark-note { margin-top: 0; }

.mic-btn, .play-btn {
  flex-shrink: 0;
  min-height: 38px; min-width: 42px;
  padding: 0 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--ink-line);
  background: transparent;
  color: var(--paper);
  font: inherit; font-size: 0.9rem;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.play-btn { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 40%, transparent); }
.prompt .play-btn { margin-top: 0.5rem; }

/* Both people on every stat. A screen that measures one person and not
   the other is a monitoring tool with a nice palette. */
.tally-stat .n-them {
  display: block;
  font-family: 'Archivo Black', 'Arial Black', Impact, 'Helvetica Neue', sans-serif;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--muted);
  margin-top: 0.3rem;
}

.tally-legend {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.8125rem; color: var(--muted);
  margin: 0 0 0.7rem;
}

.tally-legend .key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.tally-legend .key.you { background: var(--signal); }
.tally-legend .key.them { background: var(--muted); margin-left: 0.75rem; }

.reliability {
  margin: 0.6rem 0 0;
  font-size: var(--t-small);
  color: var(--teal);
}

.reliability b { color: var(--paper); }

/* Shelf additions */
.type-badge {
  font-family: 'Atkinson Hyperlegible', 'Verdana', 'Segoe UI', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal);
  border: 1px solid color-mix(in srgb, var(--teal) 40%, transparent);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  vertical-align: middle;
}

.added-by { color: var(--teal); font-size: var(--t-small); margin: 0 0 0.75rem; }

.field {
  width: 100%;
  min-height: 50px;
  margin-bottom: 0.6rem;
  padding: 0 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--ink-line);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
}

.field:focus { outline: 0; border-color: var(--signal); }

#item-actions .btn, #item-actions .sheet-close { margin-bottom: 0.6rem; }

/* ============================================================
   LOOKUP RESULTS
   Tapping a cover beats filling in five fields. Typing always
   still works — a failed lookup must never block adding.
   ============================================================ */

.lookup-results { display: grid; gap: 0.4rem; margin-bottom: 0.6rem; }
.lookup-results:empty { display: none; }

.lookup-status { color: var(--muted); font-size: var(--t-small); margin: 0.2rem 0 0.6rem; }

.hit {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.5rem;
  border-radius: 10px;
  border: 1px solid var(--ink-line);
  background: transparent;
  color: var(--paper);
  font: inherit;
  cursor: pointer;
}

.hit:active { transform: scale(.98); }

.hit img, .hit-blank {
  width: 38px;
  height: 56px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 4px;
  background: var(--ink-line);
}

.hit-title { display: block; font-weight: 700; font-size: var(--t-small); line-height: 1.3; }
.hit-meta { display: block; color: var(--muted); font-size: 0.8125rem; }

/* ---------- shelf rotation ---------- */
.shelf-low {
  border: 1px dashed var(--ink-line);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  color: var(--teal);
  margin: 0 0 1rem;
}
.waiting { color: var(--muted); font-size: var(--t-small); margin: 0.4rem 0 0; }
.drawer { margin-top: 1.25rem; border-top: 1px solid var(--ink-line); padding-top: 0.75rem; }
.drawer summary {
  cursor: pointer;
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  color: var(--muted);
  min-height: 44px;
  display: flex; align-items: center; gap: 0.5rem;
}
.drawer[open] summary { color: var(--paper); }
.drawer-n { color: var(--teal); font-family: inherit; }
.pitch-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 0.75rem; }
.pitch-btn { width: auto; padding: 0 0.85rem; font-size: var(--t-small); }
.pitch-rec { margin: 0.25rem 0 0.75rem; }
.get-more { font-size: var(--t-small); margin: 0.5rem 0 0.75rem; }
.get-more a { color: var(--teal); }

/* ---------- talk + questions ---------- */
.play-big { width: 100%; min-height: 52px; margin-top: 0.75rem; font-size: var(--t-body); }
.q-one p { font-size: var(--t-body); }
.q-another { margin-top: 0.75rem; }
.q-block { margin-top: 1.25rem; border-top: 1px solid var(--ink-line); padding-top: 0.75rem; }
.q-list { list-style: none; padding: 0; margin: 0 0 0.75rem; display: grid; gap: 0.5rem; }
.q-list li {
  display: flex; gap: 0.5rem; align-items: flex-start;
  background: var(--ink-raised); border: 1px solid var(--ink-line);
  border-radius: var(--radius); padding: 0.75rem 0.9rem;
}
.q-list li span { flex: 1; }
.q-none { color: var(--muted); font-size: var(--t-small); }