/* Tokens: copied verbatim from design/README.md, "Design Tokens". Restyle here. */
:root {
  /* ——— paper & ink ——— */
  --paper: #FBF6EC;        /* page, warm cream — never pure white */
  --card: #F6EEDF;         /* day cards, summary panel */
  --field: #FDFAF3;        /* name input, empty grid cell */
  --bar: #F1E8D8;          /* summary bar ground = count 0 */
  --line: #E4D8C3;         /* 1px hairline, cards + dividers */
  --line-strong: #D6C6AB;  /* input + secondary button borders */
  --ink: #1C3527;          /* body text — 13.4:1 on --paper */
  --ink-soft: #4E6B57;     /* helper + inactive text — 5.4:1 on --paper */

  /* ——— greens ——— */
  --mint: #DCEFD6;         /* oklch(0.93 0.045 145) — 1 person, hover, chips */
  --leaf: #5C9A62;         /* oklch(0.66 0.095 148) — painted vote cell */
  --leaf-line: #4A8151;    /* painted cell border */
  --basil: #2E5B39;        /* oklch(0.42 0.105 150) — toggle on, tooltip, toast */
  --on-basil: #FBF6EC;     /* text on --basil — 7.2:1 */

  /* ——— warm accent: primary button + today pill ONLY ——— */
  --clay: #9E5334;              /* oklch(0.52 0.13 42) — --on-basil text = 5.0:1 */
  --clay-press: #8A4629;
  --clay-disabled: #E8DCCB;
  --clay-disabled-ink: #7B8C80; /* disabled label — 2.63:1 on --clay-disabled; exempt, WCAG 1.4.3 inactive control */

  /* ——— summary ramp: interpolate in OKLCH ——— */
  --ramp-pale: oklch(0.93 0.045 145);   /* count = 1 */
  --ramp-deep: oklch(0.42 0.105 150);   /* count = week max */
  /* per cell, t = (count - 1) / (max - 1):
     background: color-mix(in oklch, var(--ramp-deep) calc(t * 100%), var(--ramp-pale));
     count 0 uses --bar. The badge is always --paper on --line-strong, so the
     number stays readable at every step of the ramp. */

  /* ——— radii ——— */
  --r-card: 20px;  --r-frame: 24px;  --r-field: 16px;
  --r-cell: 9px;   --r-pill: 999px;

  /* ——— spacing scale (4px base) ——— */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 26px; --s-7: 32px; --s-8: 44px;

  /* ——— type ——— */
  --font-head: Fraunces, Georgia, "Times New Roman", serif;
  --font-body: Nunito, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-wordmark: 32px/1 600;    /* desktop 44px */
  --t-h2: 21px/1.25 500;       /* "Who's free this week?" / "5 people…" */
  --t-day: 19px/1.2 600;       /* day card title (head) */
  --t-body: 16px/1.5 400;
  --t-button: 19px/1 700;      /* primary; segmented toggle 16px/1 700 */
  --t-label: 12px/1.2 700;     /* mono, uppercase, .07em tracking */

  /* ——— controls ——— */
  --tap-min: 44px;   /* every interactive target */
  --cell-w: 36px;    /* vote grid cell */
  --cell-h: 44px;    /* 48px on desktop */
  --cell-gap: 4px;
  --field-h: 58px;   /* 64px on desktop */
  --btn-h: 60px;
  --shadow-primary: 0 6px 16px rgba(158, 83, 52, .26); /* the only shadow */

  /* ——— focus ——— */
  --focus-ring: 3px solid #5C9A62;
  --focus-offset: 3px;  /* 2px on grid cells and inputs */
  /* :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); } */
}

/* Self-hosted, variable weight; licences in fonts/OFL-*.txt. Google's latin and latin-ext
   subsets with their unicode-range verbatim: latin-ext carries the Italian schwa (ə, U+0259)
   and loads only on a page that shows one. */
@font-face {
  font-family: Fraunces;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Fraunces;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The --t-* tokens read size/line-height weight, which the `font` shorthand
   rejects, so each rule sets the three properties from the named token. */

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.5; font-weight: 400; /* --t-body */
  -webkit-font-smoothing: antialiased;
}

button, input { font-family: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
input:focus-visible, .cell:focus-visible { outline-offset: 2px; }
::selection { background: var(--mint); }

.page {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-5) var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* ——— header ——— */
.header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "titles lang";
  align-items: start;
  gap: var(--s-3);
}
.header:has(.btn-see) { grid-template-areas: "titles lang" "see see"; }
.titles {
  grid-area: titles;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-width: 0;
}
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.leaf {
  display: block; width: 18px; height: 18px;
  background: var(--basil);
  border-radius: 18px 3px 18px 3px;
  transform: rotate(-10deg);
}
.wordmark {
  margin: 0;
  font-family: var(--font-head);
  font-size: 32px; line-height: 1; font-weight: 600; /* --t-wordmark */
  letter-spacing: -.015em;
}
.chip {
  background: var(--mint);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3);
  font-size: 15px; font-weight: 600;
  overflow-wrap: anywhere;
}
.subtitle {
  margin: 0;
  font-family: var(--font-head);
  font-size: 21px; line-height: 1.25; font-weight: 500; /* --t-h2 */
}
.week, .label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px; line-height: 1.2; font-weight: 700; /* --t-label */
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.lang {
  grid-area: lang;
  justify-self: end; /* on desktop the column is as wide as "See who's free" */
  display: flex; flex: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 3px;
}
.lang button {
  min-height: var(--tap-min); min-width: var(--tap-min);
  padding: 0 13px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-soft);
  font-size: 14px; font-weight: 700;
}
.lang button[aria-pressed="true"] { background: var(--basil); color: var(--on-basil); }

/* ——— fields and buttons ——— */
.label { display: flex; flex-direction: column; gap: var(--s-2); }
.field {
  width: 100%;
  min-height: var(--field-h);
  padding: 0 18px;
  background: var(--field);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-field);
  font-size: 18px; font-weight: 600;
  letter-spacing: normal; text-transform: none;
  color: var(--ink);
}
.field::placeholder { color: var(--ink-soft); }
.field:focus-visible { border-color: var(--leaf); }

.btn-primary {
  min-height: var(--btn-h);
  padding: 0 var(--s-7);
  border: 0;
  border-radius: var(--r-field);
  background: var(--clay);
  color: var(--on-basil);
  font-size: 19px; line-height: 1; font-weight: 700; /* --t-button */
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover, .btn-primary:active { background: var(--clay-press); }
.btn-primary:disabled {
  background: var(--clay-disabled);
  color: var(--clay-disabled-ink);
  box-shadow: none;
  cursor: not-allowed;
}

.btn-secondary {
  min-height: var(--tap-min);
  padding: 0 var(--s-4);
  background: var(--field);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 15px; font-weight: 700;
  color: var(--basil);
}
.btn-secondary:hover { background: var(--mint); }
.btn-clear { color: var(--ink-soft); }
.btn-clear:hover { background: var(--bar); }

.helper { margin: 0; text-align: center; font-size: 15px; color: var(--ink-soft); }
.error { margin: 0; text-align: center; font-weight: 700; color: var(--ink); }
/* Empty, it takes no room but stays rendered: an alert hidden when its text arrives isn't announced. */
.error:empty { position: absolute; }

/* ——— landing ——— */
.create { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.create .label { flex: 1 1 14rem; }

/* ——— day cards ——— */
.days { display: flex; flex-direction: column; gap: 14px; }
.day {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-4) var(--s-4) 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.day-head { display: flex; flex-direction: column; gap: 14px; }
.day-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.day-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 19px; line-height: 1.2; font-weight: 600; /* --t-day */
}
.pill-today {
  background: var(--clay);
  color: var(--on-basil);
  border-radius: var(--r-pill);
  padding: var(--s-1) 10px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .04em;
}

.segmented {
  display: flex;
  gap: var(--s-1);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: var(--s-1);
}
.segmented button {
  flex: 1;
  min-height: 48px;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-soft);
  font-size: 16px; line-height: 1; font-weight: 700; /* --t-button, toggle size */
  transition: background .14s ease, color .14s ease;
}
.segmented button[aria-pressed="true"] { background: var(--basil); color: var(--on-basil); }

/* ——— painting grid ——— */
.painter { display: flex; flex-direction: column; gap: var(--s-3); }
.helpers { display: flex; gap: var(--s-2); }
.scroller {
  /* A focused cell's ring reaches 5px out (--focus-ring 3px + the cells' 2px offset): room above
     (the margin gives the space back); focus scrolls a cell to where the side padding rests it. */
  margin: -5px calc(-1 * var(--s-4)) 0;
  padding: 5px var(--s-4) 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-padding-inline: var(--s-4);
}
.cells, .ticks {
  display: grid;
  grid-template-columns: repeat(32, var(--cell-w));
  gap: var(--cell-gap);
  width: max-content;
}
.cells { touch-action: none; } /* a drag paints; only the hour labels below scroll the row */
.cell {
  height: var(--cell-h);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-cell);
  background: var(--field);
}
.cell.on { background: var(--leaf); border-color: var(--leaf-line); }
@media (hover: hover) {
  .cell:hover { background: var(--mint); border-color: var(--leaf); }
  .cell.on:hover { background: var(--leaf-line); border-color: var(--basil); }
}
.cell.on.dragged {
  background: var(--leaf-line);
  border-color: var(--basil);
  box-shadow: inset 0 0 0 2px var(--paper);
}
.tick {
  grid-column: span 2;
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
}
.readout { margin: 0; min-height: 1.5em; font-size: 16px; font-weight: 700; color: var(--basil); }

/* ——— send ——— */
.send { display: flex; flex-direction: column; gap: 14px; padding-top: var(--s-2); }

/* ——— "See who's free": a pill in the header, a text link under the send button ——— */
.btn-see {
  grid-area: see;
  justify-self: start;
  min-height: var(--tap-min);
  padding: 0 var(--s-4);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 15px; font-weight: 700;
  color: var(--basil);
}
.btn-see:hover { background: var(--mint); }
.link-see {
  align-self: center;
  min-height: var(--tap-min);
  padding: 0 var(--s-3);
  background: transparent;
  border: 0;
  font-size: 16px; font-weight: 700;
  color: var(--basil);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
}

/* ——— summary ——— */
.who { display: flex; flex-direction: column; gap: var(--s-3); }
.answered {
  margin: 0;
  font-family: var(--font-head);
  font-size: 21px; line-height: 1.25; font-weight: 500; /* --t-h2 */
}
.answered strong { font-weight: 700; }
.voters { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.voters .chip { padding: var(--s-2) 14px; }

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-4) 14px var(--s-3);
}
/* On a phone the bars are the vote grid's row (T4b, derived): 36px cells that scroll together. */
.bars {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  overflow-x: auto;
  overflow-y: hidden;
  /* A focused run's ring reaches 6px out (--focus-ring 3px + --focus-offset 3px): room above and
     below (the margin gives the space back) and after the last cell (the row's padding). */
  padding-block: 6px;
  margin-block: -6px;
  scroll-padding-inline: 72px 6px; /* label + gap: scrolled into view or focused, a run lands beside it */
}
.row { display: flex; align-items: center; gap: 10px; width: max-content; padding-right: 6px; }
.row-label {
  position: sticky;
  left: 0;
  z-index: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  width: 62px; flex: none; font-size: 14px; font-weight: 700;
  background: var(--card);
  box-shadow: 10px 0 var(--card); /* covers the row gap, so scrolled runs pass under both */
}
.row-label .long { display: none; }
.bar {
  flex: none;
  display: grid;
  grid-template-columns: repeat(32, var(--cell-w));
  gap: var(--cell-gap);
}
.bar .tick { padding-top: 0; font-size: 10px; }
.run {
  display: flex; align-items: center; justify-content: center;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: var(--bar);
}
.run:focus-visible { z-index: 2; } /* its ring paints over the pinned label's gap shadow */
/* t = c / max (SPEC §5.3), set per run by app.js; this replaces the (count - 1) / (max - 1)
   in the token comment above, which is the design's and stays verbatim. */
.run.painted {
  background: color-mix(in oklch, var(--ramp-deep) calc(var(--t) * 100%), var(--ramp-pale));
}
/* Centred, and sticky inside its run (T5, derived): a long run scrolled partly away on a phone
   keeps its count in sight, a cell gap clear of the pinned label (72px, as scroll-padding) and of
   the scroller's edge. Wide screens don't scroll the bars, so there it never moves. */
.badge {
  position: sticky;
  left: calc(72px + var(--cell-gap));
  right: var(--cell-gap);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: var(--s-1) 6px;
  font-size: 11px; line-height: 1; font-weight: 700;
  color: var(--ink);
  pointer-events: none;
}
.tip {
  position: absolute;
  z-index: 5;
  width: max-content;
  max-width: 240px;
  background: var(--basil);
  color: var(--on-basil);
  border-radius: 12px;
  padding: 10px 13px;
  font-size: 13px; line-height: 1.4; font-weight: 600;
  overflow-wrap: anywhere; /* a long name without spaces stays inside */
  pointer-events: none;
}
.tip span { display: block; }
.tip::after {
  content: "";
  position: absolute;
  left: var(--arrow);
  top: 100%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--basil);
  border-radius: 2px;
  transform: rotate(45deg);
}

.best { display: flex; flex-direction: column; gap: var(--s-2); }
.best-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 19px; line-height: 1.2; font-weight: 600; /* --t-day */
}
.best-line { margin: 0; font-size: 16px; }

.actions {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding-bottom: 72px; /* room for the toast under the button pair */
}
.btn-refresh {
  min-height: 52px;
  padding: 0 var(--s-7);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-field);
  font-size: 17px; line-height: 1; font-weight: 700;
  color: var(--basil);
}
.btn-refresh:hover { background: var(--mint); }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  background: var(--card);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
  padding: 40px 24px;
  text-align: center;
}
.empty .leaf {
  width: 28px; height: 28px;
  background: var(--mint);
  border: 1px solid var(--line);
  border-radius: 28px 4px 28px 4px;
}
.empty-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 24px; line-height: 1.25; font-weight: 600;
}
.empty .btn-primary { align-self: stretch; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  max-width: calc(100vw - 2 * var(--s-4));
  background: var(--basil);
  color: var(--on-basil);
  border-radius: var(--r-pill);
  padding: 14px var(--s-5);
  font-size: 15px; font-weight: 600;
  pointer-events: none; /* it can sit over the send button; taps go through */
  animation: toast-in .28s ease-out;
}
.toast strong { font-weight: 700; }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ——— desktop: same rhythm, more room ——— */
@media (min-width: 720px) {
  :root { --cell-h: 48px; --field-h: 64px; }
  .page { padding: var(--s-8) var(--s-7) 56px; gap: 24px; }
  .leaf { width: 24px; height: 24px; border-radius: 24px 4px 24px 4px; }
  .wordmark { font-size: 44px; letter-spacing: -.02em; }
  .subtitle { font-size: 26px; }
  .week { font-size: 13px; }
  .field { font-size: 20px; padding: 0 var(--s-5); }
  .day { padding: var(--s-5) 22px 22px; gap: var(--s-4); }
  .day-head { flex-direction: row; align-items: center; justify-content: space-between; }
  .day-title { font-size: 22px; }
  .day-head .segmented { flex: 0 1 360px; }

  .header:has(.btn-see) { grid-template-areas: "titles lang" "titles see"; }
  .btn-see { justify-self: end; padding: 0 18px; font-size: 16px; }
  .link-see { font-size: 17px; }
  .who { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-5); }
  .answered { font-size: 24px; }
  .panel { padding: 22px 24px var(--s-4); }
  .bars { gap: 10px; overflow: visible; }
  .row { gap: var(--s-4); width: auto; padding-right: 0; }
  .row-label { width: 150px; font-size: 17px; }
  .row-label .short { display: none; }
  .row-label .long { display: inline; }
  .bar { flex: 1; min-width: 0; grid-template-columns: repeat(32, minmax(0, 1fr)); gap: 3px; }
  .bar .tick { font-size: 12px; }
  .run { height: 48px; border-radius: 9px; }
  .badge { padding: 5px 9px; font-size: 13px; }
  .best { gap: 10px; }
  .best-title { font-size: 22px; }
  .best-line { font-size: 18px; }
  .actions { flex-direction: row; gap: 14px; }
  .actions .btn-primary { flex: 1; }
  .btn-refresh { flex: 0 0 220px; min-height: 60px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .segmented button { transition: none; }
}