/* ============================================================================
   Sennight — "FunFax" theme (early-90s kids' Filofax: graph paper, bubble fonts,
   bright sticker blocks, thick ink outlines, hard shadows). Colour-blind-safe:
   IN/OUT/UNSURE always carry a ✓/✕/? glyph, never colour alone.
   Theme = the selected prototype tweak set: green action, colour-safe status,
   Baloo 2 headings, radius 15, hard shadows, graph paper.
   ============================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap");

:root {
  --ink: #23203a;
  --paper: #fbf7ea;
  --card: #ffffff;
  --soft: #6f6878;
  --faint: #a89fb2;
  --grid-lines: rgba(64,120,206,0.26);
  --border-subtle: #e7dfcd;
  --locked-fill: #f1ecdd;

  /* sticker palette (classic) */
  --c1: #ef4136; --c2: #ffc20e; --c3: #2e74d6; --c4: #36a64f; --c5: #ec4d9b; --c6: #f7941e;

  --accent: #36a64f;              /* primary action (green) */

  /* status — colour-safe scheme; ALWAYS paired with a glyph */
  --in: #2e74d6;     --in-soft: #dfeafa;
  --out: #f07a2e;    --out-soft: #fce4d4;
  --unsure: #9356c9; --unsure-soft: #ecdef7;

  /* results heat ramp (0 → all in) */
  --heat-0: #fbf7ea; --heat-1: #dbe7f7; --heat-2: #b5d0ef;
  --heat-3: #85b0e3; --heat-4: #5a8fd6; --heat-5: #2e74d6;

  --font-head: "Baloo 2", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;

  --radius: 15px;
  --r-card: var(--radius);
  --r-btn: calc(var(--radius) * 0.85);
  --r-sticker: calc(var(--radius) * 0.7);
  --r-day: calc(var(--radius) * 0.5);
  --border: 2.5px solid var(--ink);
  --shadow-card: 3px 3px 0 var(--ink);
  --shadow-day: 1.5px 1.5px 0 var(--ink);
  --shadow-tab: 2px 2px 0 var(--ink);
  --tilt: 1.5deg;
  --danger: var(--out);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink);
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-lines) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-lines) 1px, transparent 1px);
  background-size: 22px 22px; background-position: -1px -1px;
  min-height: 100vh;
}

/* press feedback — the "sticker pressed down" feel */
.ff-press { transition: transform .1s, box-shadow .1s, filter .12s; }
.ff-press:hover { filter: brightness(1.04); }
.ff-press:active { transform: translate(1.5px, 1.5px); box-shadow: none !important; }

/* — phone-width app shell — */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .7rem;
  width: 100%; padding: .7rem 1.25rem;
  background: var(--card); border-bottom: 3px solid var(--ink);
}
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); }
.brand .logo {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: var(--c2); color: var(--ink); border: var(--border); border-radius: var(--r-day);
  font-family: var(--font-head); font-weight: 800; font-size: 18px; box-shadow: var(--shadow-day);
}
.brand .name { font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; }
.tagline { margin-left: auto; color: var(--soft); font-size: .72rem; font-weight: 700; text-align: right; line-height: 1.15; }

.container { max-width: 460px; margin: 0 auto; padding: 1rem 1rem 6rem; }

h1 { margin: .2rem 0 .5rem; }
h2 { font-family: var(--font-head); font-size: 1.05rem; margin: 1.3rem 0 .5rem; }
.lede { color: var(--soft); margin: .1rem 0 .8rem; }
.muted { color: var(--soft); }
a { color: var(--accent); font-weight: 700; }

/* — title sticker (bubble heading with highlight block) — */
.title { font-family: var(--font-head); font-size: 28px; line-height: 1.5; margin: .2rem 0 .5rem; letter-spacing: -.3px; }
.title span {
  background: var(--accent); color: #fff;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 2px 9px; border-radius: var(--r-day); border: var(--border); box-shadow: var(--shadow-card);
}
.title.c1 span { background: var(--c1); } .title.c2 span { background: var(--c2); color: var(--ink); }
.title.c3 span { background: var(--c3); } .title.c4 span { background: var(--c4); }
.title.c5 span { background: var(--c5); } .title.c6 span { background: var(--c6); }

/* — sticker label / badge — */
.sticker {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: var(--c1); color: #fff; font-family: var(--font-head); font-size: 13px; line-height: 1.05;
  letter-spacing: .3px; padding: 4px 11px; border: var(--border); border-radius: var(--r-sticker);
  box-shadow: var(--shadow-card); transform: rotate(calc(-1 * var(--tilt)));
}
.sticker.c2 { background: var(--c2); color: var(--ink); } .sticker.c3 { background: var(--c3); }
.sticker.c4 { background: var(--c4); } .sticker.c5 { background: var(--c5); } .sticker.c6 { background: var(--c6); }
.sticker.tr { transform: rotate(var(--tilt)); }
.sticker.win { background: var(--c2); color: var(--ink); font-size: 12px; }

/* — cards — */
.card { background: var(--card); border: var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 14px; margin: 1rem 0; }

/* — buttons — */
button, .button {
  font-family: var(--font-head); font-size: 17px; letter-spacing: .3px; cursor: pointer;
  color: #fff; background: var(--accent); border: var(--border); border-radius: var(--r-btn);
  padding: 13px 18px; text-decoration: none; display: inline-block; text-align: center;
  box-shadow: var(--shadow-card);
}
button.primary, .button.primary, button[type=submit] { background: var(--accent); color: #fff; width: 100%; }
button.secondary, .button.secondary { background: var(--card); color: var(--ink); }
.btn-c2 { background: var(--c2); color: var(--ink); }
.link-btn { background: none; border: none; box-shadow: none; color: var(--accent); padding: 0; font-family: var(--font-body); font-size: .9rem; font-weight: 700; }
.link-btn.danger { color: var(--danger); }
.full { width: 100%; }
.inline { display: inline; }
.site-footer { margin-top: 2rem; padding-top: 1rem; border-top: 2px dashed var(--ink);
  text-align: center; font-size: 11.5px; color: var(--soft); font-family: var(--font-body); }
.site-footer a { color: var(--accent); font-weight: 700; text-decoration: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* — forms — */
.form label, .field { display: block; margin: .7rem 0; }
.form label, .field-label { font-family: var(--font-head); font-size: 13px; letter-spacing: .2px; }
.form label small, .hint { display: block; font-weight: 400; color: var(--soft); margin-top: 6px; font-size: 11.5px; line-height: 1.45; font-family: var(--font-body); }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=date] {
  width: 100%; font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--ink);
  padding: 10px 13px; background: #fff; border: var(--border); border-radius: var(--r-sticker); margin-top: 5px;
}
.row { display: flex; gap: .8rem; flex-wrap: wrap; }
.row > label, .row > .field { flex: 1 1 130px; }
fieldset { border: none; padding: 0; margin: .7rem 0; }
legend { font-family: var(--font-head); font-size: 13px; padding: 0; margin-bottom: 5px; }

/* steppers (min/max days) */
.stepper { display: flex; align-items: center; gap: .5rem; }
.stepper button { background: var(--c2); color: var(--ink); font-size: 20px; line-height: 1; width: 46px; height: 46px; padding: 0; border-radius: var(--r-sticker); box-shadow: var(--shadow-day); }
.stepper .val { font-family: var(--font-head); font-size: 20px; min-width: 1.6rem; text-align: center; }

/* weekday chips */
.weekday-pick { display: flex; gap: 7px; }
.weekday-pick .chip { flex: 1; position: relative; }
.weekday-pick .chip input { position: absolute; opacity: 0; pointer-events: none; }
.weekday-pick .chip span {
  display: flex; align-items: center; justify-content: center; height: 44px;
  border: var(--border); border-radius: var(--r-sticker); background: #fff; color: var(--faint);
  font-family: var(--font-head); font-size: 15px; box-shadow: var(--shadow-day);
}
.weekday-pick .chip input:checked + span { background: var(--accent); color: #fff; }

/* — errors / banners — */
.errors { background: var(--out-soft); border: var(--border); border-radius: var(--r-sticker); padding: .7rem 1rem; box-shadow: var(--shadow-card); }
.errors ul { margin: .4rem 0 0; }
.banner { padding: .6rem .9rem; border: var(--border); border-radius: var(--r-sticker); box-shadow: var(--shadow-card); margin: .8rem 0; font-weight: 600; }
.banner.ok { background: var(--in-soft); } .banner.warn { background: var(--unsure-soft); }
.pill { font-family: var(--font-head); font-size: 12px; padding: 2px 9px; border: var(--border); border-radius: 999px; box-shadow: var(--shadow-day); }
.pill.ok { background: var(--c3); color: #fff; } .pill.warn { background: var(--c6); color: #fff; }

.copyrow { display: flex; gap: .5rem; align-items: stretch; }
.copyrow input { font-family: ui-monospace, monospace; font-size: 13px; }
.copyrow button { font-size: 14px; padding: 8px 12px; }
.warn-card { border-color: var(--c2); }
.subnav { display: flex; gap: .8rem; flex-wrap: wrap; margin: .6rem 0; }
.subnav a { font-family: var(--font-head); font-size: 13px; }
.legend-row { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; margin: .6rem 0; }
.grid-help { color: var(--soft); margin: .5rem 0; }

/* — legend (Free / Can't / Maybe) — */
.legend { display: flex; gap: 10px; flex-wrap: wrap; margin: .5rem 0; }
.legend .key { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px; }
.legend .sw { width: 21px; height: 21px; border-radius: calc(var(--radius) * 0.45); border: var(--border); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 11px; }
.legend .sw.in { background: var(--in); } .legend .sw.out { background: var(--out); } .legend .sw.unsure { background: var(--unsure); }

/* ============================ calendar ============================ */
.calendar .month { background: var(--card); border: var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 12px; margin: 0 0 1rem; }
.calendar .month h3 { font-family: var(--font-head); font-size: .95rem; margin: 0 0 .5rem; }
.dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
.dow span { text-align: center; font-family: var(--font-head); font-size: 10px; color: var(--faint); }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }

.day { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-day); font-family: var(--font-body); font-weight: 800; font-size: 14.5px; }
.day.blank { background: transparent; }
.day.disabled { color: var(--faint); background: var(--locked-fill); }

/* tri-state day buttons (mark screen) */
.day.tri { background: #fff; color: var(--ink); border: var(--border); cursor: pointer; padding: 0; font-size: 14.5px;
  touch-action: none; /* a drag across days paints, instead of scrolling the page */ }
.day.tri.state-in { background: var(--in); color: #fff; box-shadow: var(--shadow-day); }
.day.tri.state-out { background: var(--out); color: #fff; box-shadow: var(--shadow-day); }
.day.tri.state-unsure { background: var(--unsure); color: #fff; box-shadow: var(--shadow-day); }
.day.tri:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.day.tri .chip { display: none; position: absolute; top: -7px; right: -7px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; border: 2px solid var(--ink); align-items: center; justify-content: center; font-size: 9px; font-weight: 800; line-height: 1; }
.day.tri.state-in .chip,
.day.tri.state-out .chip,
.day.tri.state-unsure .chip { display: flex; }
.day.tri.state-in .chip::after { content: "✓"; color: var(--in); }
.day.tri.state-out .chip::after { content: "✕"; color: var(--out); }
.day.tri.state-unsure .chip::after { content: "?"; color: var(--unsure); }

/* heat calendar (results) */
.day.heat { color: var(--ink); border: 2px solid var(--border-subtle); }
.day.heat.h0 { background: var(--heat-0); } .day.heat.h1 { background: var(--heat-1); border-color: var(--ink); }
.day.heat.h2 { background: var(--heat-2); border-color: var(--ink); } .day.heat.h3 { background: var(--heat-3); border-color: var(--ink); }
.day.heat.h4 { background: var(--heat-4); border-color: var(--ink); color: #fff; } .day.heat.h5 { background: var(--heat-5); border-color: var(--ink); color: #fff; }
.day.heat.in-best { box-shadow: inset 0 0 0 3px var(--accent); }

.heat-legend { display: flex; align-items: center; gap: 4px; margin: .2rem 0 .6rem; font-size: 11px; color: var(--soft); }
.heat-legend .ramp { display: flex; gap: 3px; }
.heat-legend .ramp i { width: 26px; height: 12px; border: 1.5px solid var(--ink); border-radius: 3px; }

/* ============================ window cards ============================ */
.windows { list-style: none; padding: 0; margin: .4rem 0 0; }
.window { position: relative; background: var(--card); border: var(--border); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); padding: 12px 14px; margin: 0 0 .9rem; }
.window.top { background: var(--accent); color: #fff; }
.window.finalized { outline: 3px dashed var(--accent); }
.window .w-head { display: flex; align-items: center; gap: 10px; }
.rank { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--ink); border: var(--border); border-radius: var(--r-day); font-family: var(--font-head); font-size: 15px; }
.window:not(.top) .rank { background: var(--c3); color: #fff; }
.window.top .rank { background: #fff; color: var(--ink); }
.w-range { font-family: var(--font-head); font-size: 17px; }
.w-sub { font-size: 12.5px; margin-top: 3px; opacity: .92; }
.window.top .w-sub { color: #fff; }
.win-flag { position: absolute; top: -12px; right: 10px; transform: rotate(var(--tilt)); }
.count-chips { display: flex; gap: 7px; margin-top: 9px; }
.cchip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-head); font-size: 12px;
  padding: 3px 9px; border: var(--border); border-radius: 999px; background: #fff; color: var(--ink); }
.cchip.in { background: var(--in-soft); } .cchip.out { background: var(--out-soft); } .cchip.unsure { background: var(--unsure-soft); }
.window.top .cchip { background: rgba(255,255,255,.22); color: #fff; border-color: #fff; }
.window form { margin-top: 11px; }
.window form button { width: 100%; }

/* ===================== "dates you can make" preview ===================== */
.block-preview { margin: 1rem 0; }
.bp-head { display: flex; align-items: center; gap: 10px; margin-bottom: .5rem; }
.bp-count { font-family: var(--font-head); color: var(--accent); font-size: 18px; }
.block-preview ul { list-style: none; padding: 0; margin: 0; background: var(--card); border: var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.block-preview li { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-bottom: 1.5px solid var(--border-subtle); }
.block-preview li:last-child { border-bottom: none; }
.bp-chip { flex: none; width: 24px; height: 24px; border-radius: 6px; border: var(--border); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 12px; }
.bp-chip.in { background: var(--in); } .bp-chip.out { background: var(--out); } .bp-chip.unsure { background: var(--unsure); }
.bp-range { font-family: var(--font-head); font-size: 14.5px; }
.bp-len { color: var(--soft); font-size: 12px; margin-left: 4px; }
.bp-why { color: var(--soft); font-size: 12px; margin-left: auto; }
.bp-hint { color: var(--soft); padding: 0 2px; }

/* participants table */
.ptable { width: 100%; border-collapse: collapse; }
.ptable th { text-align: left; font-family: var(--font-head); font-size: 12px; padding: .4rem; border-bottom: 2px solid var(--ink); }
.ptable td { padding: .5rem .4rem; border-bottom: 1.5px solid var(--border-subtle); }
.avatar { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; border: var(--border); align-items: center; justify-content: center; color: #fff; font-family: var(--font-head); font-size: 13px; }

/* danger zone */
.danger-zone { border: var(--border); border-color: var(--out); background: var(--out-soft); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 12px 14px; margin-top: 1.6rem; }
.danger-zone h2 { color: var(--out); margin-top: .2rem; }
.danger-btn { background: var(--out); color: #fff; width: 100%; }

.manage-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }
.best-banner { margin: .3rem 0 .6rem; }

/* big tilted lock sticker (gate) */
.lock-sticker { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  background: var(--c2); border: var(--border); border-radius: var(--r-sticker); box-shadow: var(--shadow-card);
  transform: rotate(calc(-1 * var(--tilt))); font-size: 26px; margin-bottom: .6rem; }
.centered { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; }

/* ============================ bottom tab bar ============================ */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--card); border-top: 3px solid var(--ink); }
.tabbar .inner { max-width: 460px; margin: 0 auto; display: flex; gap: 8px; padding: 10px 12px; }
.tabbar a { flex: 1; text-decoration: none; text-align: center; background: #fff; color: var(--ink);
  border: var(--border); border-radius: var(--r-sticker); padding: 9px 4px 7px; font-family: var(--font-head); font-size: 12.5px; box-shadow: none; }
.tabbar a .dot { display: block; width: 8px; height: 8px; border-radius: 50%; margin: 0 auto 4px; border: 1.5px solid var(--ink); }
.tabbar a.t-mark .dot { background: var(--c3); } .tabbar a.t-results .dot { background: var(--c4); } .tabbar a.t-manage .dot { background: var(--c5); }
.tabbar a.active { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-tab); }
.tabbar a.t-mark.active { background: var(--c3); } .tabbar a.t-results.active { background: var(--c4); } .tabbar a.t-manage.active { background: var(--c5); }
.tabbar a.active .dot { background: #fff; }

@media (max-width: 380px) { .container { padding-left: .7rem; padding-right: .7rem; } }

/* ============================ desktop mode ============================ */
@media (min-width: 880px) {
  .container { max-width: 1000px; padding: 1.4rem 1.5rem 6rem; }

  /* months sit side-by-side and STRETCH to fill the content column (auto-fit) so the
     calendar block is the same width as everything else on the page. */
  .calendar { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.1rem; align-items: start; }
  .calendar .month { margin: 0; }

  /* best-window cards two-up */
  .windows { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }
  .windows .window { margin: 0; }

  /* everything else (forms, name/email fields, buttons, preview, danger zone) flows at the
     full content-column width — i.e. the same width as the calendar. No narrow caps. */
  .tabbar .inner { max-width: 1000px; }
}