/* Tokens first. The shell's slot is the one that must survive every redesign:
   inside an older Second Draft shell a 48px round button floats in the
   bottom-right corner, 16px in from each edge, above everything. This app draws
   its own note trigger instead, so second-draft-note.css sets --shell-slot to
   0 and puts it back only inside such a shell. Keep clear of the corner with
   var(--shell-slot), never a fixed 80px, and the space is there exactly when
   the button is. */
:root {
  --shell-switcher-size: 48px;
  --shell-switcher-inset: 16px;
  --shell-switcher-gap: 16px;
  --shell-slot: 80px; /* inset + size + gap: the corner the shell owns */

  --paper: #f4f0e6;
  --ink: #111111;
  --white: #ffffff;
  --cobalt: #1d3bd1;
  --orange: #f04a1e;
  --yellow: #ffc914;
  --gray: #55524c;
  --card: #f4f0e6;
  --line: #111111;
  --accent: #1d3bd1;
  --on-accent: #ffffff;
  --radius: 2px;
  --poster: "Anton", "Haettenschweiler", "Impact", "Arial Narrow Bold", sans-serif;
  --black: "Archivo Black", "Arial Black", "Impact", sans-serif;
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}
/* The same page in a phone set to dark. --paper here is the dark theme-color
   tag in index.html, as --paper above is the light one: change them together. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111111;
    --ink: #f4f0e6;
    --card: #111111;
    --line: #f4f0e6;
    --accent: #ffc914;
    --on-accent: #111111;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.45 var(--font); }
body { min-height: 100dvh; -webkit-font-smoothing: antialiased; }

/* The shell gives the page the whole window, behind the clock at the top and
   the gesture bar at the bottom: the background is ours to cover, the content
   ours to keep clear of both. */
.page {
  max-width: 1080px;
  margin: 0 auto;
  padding-right: calc(20px + max(var(--shell-safe-right, 0px), env(safe-area-inset-right, 0px)));
  padding-bottom: calc(max(var(--shell-safe-bottom, 0px), env(safe-area-inset-bottom, 0px)) + var(--shell-slot));
  padding-left: calc(20px + max(var(--shell-safe-left, 0px), env(safe-area-inset-left, 0px)));
}

/* The app's bar: the width of the window, in the flow of the page. */
.top-bar {
  position: sticky; top: 0; z-index: 1; background: var(--paper); color: var(--ink);
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0; padding-bottom: 10px; border-bottom: 6px solid #111111;
  padding-top: calc(16px + max(var(--shell-safe-top, 0px), env(safe-area-inset-top, 0px)));
  padding-right: calc(20px + max(var(--shell-safe-right, 0px), env(safe-area-inset-right, 0px)));
  padding-left: calc(20px + max(var(--shell-safe-left, 0px), env(safe-area-inset-left, 0px)));
}
.top-bar .page-heading { flex: 1; min-width: 0; margin: 0; }
@media (min-width: 760px) {
  .top-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1040px) minmax(0, 1fr); gap: 0; }
  .top-bar .page-heading { grid-column: 2; }
  .top-bar .top-actions { grid-column: 3; justify-self: end; }
}
.page-heading { font-family: var(--black); font-size: 1.4rem; letter-spacing: -0.015em; margin: 0 0 8px; text-transform: uppercase; }

/* The note trigger: the app's own control, in the app's own colours. 44px at
   least, mark keeps both shapes. second-draft-note.js fills in the mark. */
.note-trigger {
  appearance: none; flex: none;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 4px solid #111111; border-radius: var(--radius);
  background: var(--paper); color: #111111;
}
.top-actions { display: flex; flex: none; align-items: center; gap: 8px; }
.install-app {
  appearance: none; min-height: 44px; padding: 0 14px;
  border: 4px solid #111111; border-radius: var(--radius);
  background: var(--paper); color: #111111; font-family: var(--black); font-size: 0.85rem;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.install-app:focus-visible,
.note-trigger:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.quiet { color: var(--gray); margin: 12px 0; font-weight: 700; font-size: 0.9rem; }
@media (prefers-color-scheme: dark) { .quiet { color: var(--ink); opacity: 0.75; } }

button, input, select, textarea { font: inherit; }

/* ---------- masthead ---------- */
.mast { background: var(--yellow); color: #111111; border: 4px solid #111111; border-radius: var(--radius); margin-top: 16px; overflow: hidden; }
.mast-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 20px 10px; border-bottom: 6px solid #111111; }
.app-name { font-weight: 800; font-size: 0.95rem; letter-spacing: -0.01em; margin: 0; }
.issue { font-family: var(--black); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
.day { display: flex; align-items: flex-end; gap: 16px; padding: 8px 20px 16px; }
.day-num { font-family: var(--poster); font-size: clamp(90px, 22vw, 150px); line-height: 0.9; letter-spacing: -0.01em; }
.day-side { font-family: var(--poster); text-transform: uppercase; font-size: 2rem; line-height: 0.98; }
.day-side > span { display: block; }
.day-side .rule { display: block; width: 72px; height: 8px; background: #111111; margin: 0 0 12px; }

/* ---------- the question ---------- */
.question { background: #111111; color: #ffffff; padding: 24px 24px 28px; border: 4px solid #111111; border-radius: var(--radius); margin-top: 16px; }
.label { font-family: var(--black); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 10px; }
.label.yellow { color: var(--yellow); }
.label.dim { color: var(--gray); }
.question h2 { font-family: var(--black); font-weight: 400; font-size: 1.6rem; line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
.question h2 .vs { display: block; font-family: var(--poster); font-size: 1.3rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--yellow); margin: 8px 0 6px; line-height: 1; }
.question .versus { margin: 12px 0 0; font-weight: 800; }
.question .coda { margin-top: 16px; padding-top: 12px; border-top: 4px solid #ffffff; font-weight: 800; font-size: 1.05rem; }

/* ---------- tally ---------- */
.tally { display: grid; grid-template-columns: 1fr 1.4fr; border: 4px solid #111111; border-top: 0; border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
.side { padding: 16px 16px 18px 24px; min-width: 0; }
.side.expert { background: var(--cobalt); color: #ffffff; }
.side.empower { background: var(--orange); color: #111111; }
.side .num { font-family: var(--poster); font-size: clamp(72px, 18vw, 130px); line-height: 0.92; display: block; }
.side .name { display: block; margin-top: 8px; font-family: var(--black); font-size: 0.95rem; line-height: 1.1; text-transform: uppercase; }
.fence { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 20px; border: 4px solid #111111; border-top: 0; margin: 0; font-family: var(--black); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--card); color: var(--ink); border-radius: 0 0 var(--radius) var(--radius); }

/* ---------- action ---------- */
.act { padding: 24px 6px; }
.btn {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; padding: 18px 20px;
  background: var(--yellow); color: #111111;
  border: 4px solid #111111; border-radius: var(--radius);
  box-shadow: 6px 6px 0 #111111;
  font-family: var(--black); font-size: 1.15rem; letter-spacing: -0.01em;
  text-transform: uppercase; text-align: left; cursor: pointer;
}
.btn.small { font-size: 1rem; padding: 12px 16px; }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn:active { transform: translate(2px, 2px); box-shadow: 4px 4px 0 #111111; }
.sub { display: inline-block; margin-top: 18px; font-weight: 800; font-size: 0.95rem; border-bottom: 3px solid currentColor; padding-bottom: 2px; }
.linklike { appearance: none; background: none; border: 0; border-bottom: 3px solid currentColor; padding: 0 0 2px; cursor: pointer; color: inherit; font-weight: 800; }
.back { margin-top: 16px; }

/* ---------- forms ---------- */
.create, .vote { background: var(--card); color: var(--ink); border: 4px solid #111111; border-radius: var(--radius); box-shadow: 6px 6px 0 #111111; padding: 20px; margin-top: 16px; }
.create .label, .vote .label { color: var(--ink); }
.field { display: block; margin: 12px 0; }
.field > span { display: block; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.field input, .field textarea { width: 100%; border: 3px solid #111111; border-radius: var(--radius); padding: 10px 12px; background: var(--paper); color: var(--ink); }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 1px; }
.sides { display: grid; gap: 0 12px; }
@media (min-width: 600px) { .sides { grid-template-columns: 1fr 1fr; } }
.pick { display: grid; gap: 12px; margin: 12px 0; }
@media (min-width: 600px) { .pick { grid-template-columns: 1fr 1fr; } }
.pick-respect, .pick-empower { appearance: none; border: 4px solid #111111; border-radius: var(--radius); padding: 16px; font-family: var(--black); text-transform: uppercase; font-size: 1rem; cursor: pointer; min-height: 72px; }
.pick-respect { background: var(--cobalt); color: #ffffff; }
.pick-empower { background: var(--orange); color: #111111; }
.pick-respect[aria-checked="true"], .pick-empower[aria-checked="true"] { outline: 4px solid var(--yellow); outline-offset: 2px; box-shadow: 6px 6px 0 #111111; }
.vote-hint { font-weight: 800; margin: 4px 0 8px; }

/* ---------- board ---------- */
.list-head { display: flex; justify-content: space-between; align-items: baseline; margin: 28px 0 4px; padding: 12px 4px 10px; border-top: 8px solid var(--ink); }
.list-head h2 { font-family: var(--black); font-weight: 400; font-size: 1.3rem; letter-spacing: -0.015em; margin: 0; }
.qlist { display: grid; gap: 20px; }
.qcard { background: var(--card); color: var(--ink); border: 4px solid #111111; border-radius: var(--radius); box-shadow: 6px 6px 0 #111111; overflow: hidden; }
.qcard-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px 0; }
.qcard-top .label { margin: 0; }
.qcard-delete, .ghostbtn.danger { appearance: none; background: none; border: 2px solid currentColor; border-radius: var(--radius); padding: 8px 10px; min-height: 44px; font-weight: 800; font-size: 0.8rem; text-transform: uppercase; cursor: pointer; }
.qcard-q { font-family: var(--black); font-size: 1.25rem; letter-spacing: -0.015em; margin: 8px 16px 0; }
.qcard-coda { margin: 8px 16px 0; font-weight: 800; }
.qcard .tally, .qcard .fence { border-left: 0; border-right: 0; border-radius: 0; margin-top: 12px; }
.qcard .fence { border-bottom: 0; }
.qcard .tally + .fence { margin-top: 0; }
.qcard-actions { display: flex; gap: 12px; flex-wrap: wrap; padding: 16px; }
.qcard-actions .btn.small { flex: 1 1 180px; width: auto; }
.ghostbtn { appearance: none; border: 4px solid #111111; border-radius: var(--radius); background: var(--paper); color: var(--ink); font-family: var(--black); text-transform: uppercase; padding: 12px 16px; min-height: 56px; cursor: pointer; }
.qcard-comments { padding: 0 16px 16px; }

/* ---------- opinions ---------- */
.opinions { list-style: none; margin: 0; padding: 0; }
.opinions li { display: grid; grid-template-columns: 44px 1fr auto; column-gap: 8px; padding: 14px 4px 16px; border-top: 3px solid var(--ink); }
.opinions li:last-child { border-bottom: 3px solid var(--ink); }
.n { font-family: var(--poster); font-size: 2rem; line-height: 1; }
.who { font-family: var(--poster); font-size: 1.4rem; line-height: 1; text-transform: uppercase; margin: 0; }
.role { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); margin: 5px 0 0; }
.meta { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tag { font-family: var(--black); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 7px 4px; line-height: 1; border: 2px solid #111111; }
.tag.x { background: var(--cobalt); color: #ffffff; }
.tag.m { background: var(--orange); color: #111111; }
.when { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; color: var(--gray); max-width: 160px; }
.said { grid-column: 2 / 4; margin: 10px 0 0; font-size: 1rem; font-weight: 600; line-height: 1.32; }
.empty-opinions { border: 3px dashed var(--ink); border-radius: var(--radius); padding: 20px; margin: 12px 0; }
.empty-title { font-family: var(--black); text-transform: uppercase; margin: 0 0 6px; }
.empty-sub { margin: 0; }

/* ---------- layouts wider than a phone ---------- */
.home-grid, .q-grid { display: grid; gap: 0 28px; }
@media (min-width: 900px) {
  .home-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
  .q-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
  .home-aside .create, .q-side .vote { position: sticky; top: 96px; }
}

/* Messages that are not the page: keep out of the shell's 80×80 corner. */
#toast {
  position: fixed; left: 16px; right: var(--shell-slot);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--shell-switcher-inset));
  pointer-events: none; z-index: 5;
}
#toast:empty { display: none; }
#toast > * { background: #111111; color: #f4f0e6; border-radius: var(--radius); padding: 12px 16px; font-weight: 700; }