:root {
  --night:   #0E1330;  /* deep indigo ground        */
  --night-2: #141A3C;  /* raised panel              */
  --panel:   #1A2150;  /* card                      */
  --line:    #2A3270;  /* hairlines                 */
  --ink:     #ECEAF6;  /* primary text              */
  --muted:   #8B90BE;  /* secondary text            */
  --amber:   #F5B841;  /* lamp-glow accent          */
  --amber-d: #C88F1E;
  --mint:    #6FE0B8;  /* "checked in" success      */
  --radius:  24px;     /* softer than the original 20px — warmer, less clinical */

  --display: "Space Grotesk", system-ui, sans-serif;
  --body:    "Inter", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background:
    radial-gradient(1100px 520px at 50% -18%, #1B2255 0%, transparent 60%),
    var(--night);
  color: var(--ink);
  font-family: var(--body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.app {
  max-width: 460px;
  margin: 0 auto;
  padding: 20px 18px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Header --------------------------------------------------------------- */
.top { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; }
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 17px;
}
/* "by Kaat" — subordinate half of the lockup. */
.byk {
  font-family: var(--body);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--muted);
  margin-left: -4px;   /* .brand's gap is sized for the moon, not for this */
}
/* Dropping "by Kaat" buys header room on the narrowest phones, but only once
   you're inside the app. On the public homepage the full name has to stay
   visible at every viewport — Google's OAuth review matches the consent-screen
   app name against the homepage text. body.compact-brand is set by setLanding()
   in js/app.js, so the default (no class, no JS yet) is the safe one: shown. */
@media (max-width: 359px) { body.compact-brand .byk { display: none; } }
.moon {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--amber);
  box-shadow: inset -7px -2px 0 -1px var(--night);
  filter: drop-shadow(0 0 8px rgba(245,184,65,.45));
}
.streak {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 13px;
  color: var(--amber);
  background: rgba(245,184,65,.10);
  border: 1px solid rgba(245,184,65,.28);
  padding: 5px 11px; border-radius: 999px;
}
.flame { font-size: 11px; }
.link {
  background: none; border: 1px dashed var(--line);
  color: var(--muted); font-family: var(--mono); font-size: 12px;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
}

/* ---- Landing hero (public homepage) ---------------------------------------- */
/* Everything here is built from the existing nocturne tokens — amber on indigo,
   the display face, the same crescent trick as the header lockup at 2.8× — so
   the landing page reads as the app rather than as a separate marketing skin.
   Sized to clear the fold on a 375×667 phone with the builder starting just
   below; check that before growing anything. */
.landing-hero {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 14px; padding: 26px 6px 12px;
}
.landing-hero[hidden] { display: none; }

/* Stage for the moon: the glow and the star field are both pseudo-elements on
   this box, so the hero needs no decorative markup of its own. */
.moonrise {
  position: relative; width: 100%; height: 78px;
  display: grid; place-items: center;
}
/* Soft wash behind the moon. Bleeds past the 78px box on purpose — it should
   feel like light, not like a circle. */
.moonrise::before {
  content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(245,184,65,.20) 0%, rgba(245,184,65,.07) 38%, transparent 68%);
  pointer-events: none;
}
/* Six stars from one 2px dot plus five box-shadows. Offsets stay inside ±126px
   so nothing can push a horizontal scrollbar at 320px. */
.moonrise::after {
  content: ""; position: absolute; top: 10px; left: 50%;
  width: 2px; height: 2px; border-radius: 50%;
  background: rgba(236,234,246,.70);
  box-shadow:
    -86px  16px 0 rgba(236,234,246,.42),
    -52px  46px 0 rgba(236,234,246,.28),
     58px  -2px 0 rgba(236,234,246,.52),
     94px  38px 0 rgba(236,234,246,.32),
    -118px 54px 0 rgba(236,234,246,.20),
     124px 10px 0 rgba(236,234,246,.26);
  pointer-events: none;
}
/* Same crescent as .moon, scaled 20px → 56px (all three inset offsets ×2.8). */
.moon-lg {
  position: relative; width: 56px; height: 56px; border-radius: 50%;
  background: var(--amber);
  box-shadow: inset -20px -6px 0 -3px var(--night);
  animation: moon-glow 6s ease-in-out infinite;
}
@keyframes moon-glow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(245,184,65,.38)); }
  50%      { filter: drop-shadow(0 0 24px rgba(245,184,65,.62)); }
}
/* Still lit, just not breathing. The global reduce block kills the animation;
   this restores a static glow so the moon doesn't go flat. */
@media (prefers-reduced-motion: reduce) {
  .moon-lg { animation: none; filter: drop-shadow(0 0 14px rgba(245,184,65,.45)); }
}

/* .hero-title / .hero-sub carry their own margins for the in-app heroes; the
   landing hero spaces with flex gap instead, so zero them out here.

   Descendant-scoped deliberately. The base .hero-title / .hero-sub rules live
   further down this file, so a bare .landing-title would lose the cascade on
   equal specificity and these overrides would silently do nothing. */
.landing-hero .landing-title { font-size: clamp(30px, 8.6vw, 38px); margin-top: 0; }
.landing-hero .landing-sub { margin: 0; max-width: 21rem; font-size: 15px; }
.landing-kaat {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--muted); opacity: .75;
}

/* ---- Section heading (builder, under the landing hero) --------------------- */
/* Styled by class, not by tag: renderBuilder() emits h2 on the homepage (the
   hero owns the h1) and h1 on #new, and both must look identical. */
.build-head { text-align: center; padding: 6px 2px 16px; }
.section-title {
  font-family: var(--display); font-weight: 700; font-size: 21px;
  letter-spacing: -0.01em;
}
.section-sub { margin-top: 7px; color: var(--muted); font-size: 13.5px; }
.ethos {
  margin-top: 18px; text-align: center; color: var(--muted);
  font-size: 12.5px; line-height: 1.5; opacity: .85;
}

/* ---- Tonight card --------------------------------------------------------- */
.card {
  background: linear-gradient(180deg, var(--panel), var(--night-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px 26px;
}
.tonight { text-align: center; position: relative; overflow: hidden; }
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber);
}
.session-title {
  font-family: var(--display); font-weight: 700; font-size: 34px;
  letter-spacing: -0.02em; margin-top: 6px;
}
.done-title, .session-when { }
.session-when { color: var(--muted); font-size: 14px; margin-top: 4px; }
.done-title {
  font-family: var(--display); font-weight: 500; font-size: 24px;
  line-height: 1.25; margin-top: 10px;
}

/* ---- Night arc (signature) ------------------------------------------------ */
.arc { width: 100%; height: auto; margin: 14px 0 4px; overflow: visible; }
.arc-base  { fill: none; stroke: var(--line); stroke-width: 6; stroke-linecap: round; }
.arc-study { fill: none; stroke: var(--amber); stroke-width: 6; stroke-linecap: round;
             filter: drop-shadow(0 0 6px rgba(245,184,65,.5)); }
.arc-now   { fill: var(--ink); stroke: var(--amber); stroke-width: 3;
             filter: drop-shadow(0 0 6px rgba(236,234,246,.8)); }
.arc-tick  { fill: var(--muted); font-family: var(--mono); font-size: 11px; }

/* ---- Countdown ------------------------------------------------------------ */
.count { margin: 8px 0 20px; }
.count-label {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.count-val {
  font-family: var(--mono); font-weight: 500; font-size: 30px;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.count[data-live="true"] .count-val { color: var(--mint); }

/* ---- Check-in button ------------------------------------------------------ */
.checkin {
  width: 100%; border: none; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 17px;
  color: var(--night); background: var(--amber);
  padding: 16px; border-radius: 14px;
  transition: transform .12s ease, background .2s ease;
}
.checkin:hover { transform: translateY(-1px); }
.checkin:active { transform: translateY(0); }
.checkin.on {
  background: transparent; color: var(--mint);
  border: 1.5px solid var(--mint);
}
.who { color: var(--muted); font-size: 12.5px; margin-top: 12px; }

/* ---- Progress ------------------------------------------------------------- */
.progress { padding: 2px 4px; }
.prog-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--muted); margin-bottom: 8px;
}
.prog-head span:first-child { color: var(--ink); font-weight: 500; }
.mono { font-family: var(--mono); font-size: 12px; }
.bar { height: 8px; background: var(--night-2); border: 1px solid var(--line);
       border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--amber-d), var(--amber));
            border-radius: 999px; transition: width .5s ease; }

/* ---- Upcoming list -------------------------------------------------------- */
.section-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin: 4px 4px 10px;
}
.rows { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  background: var(--night-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 13px 15px;
}
.row.live { border-color: rgba(111,224,184,.5); box-shadow: 0 0 0 1px rgba(111,224,184,.25); }
.row-day { font-weight: 500; font-size: 14px; }
.row-time { color: var(--muted); }
.dot {
  width: 30px; height: 30px; border-radius: 50%;
  background: none; border: 1.5px solid var(--line); color: var(--muted);
  font-size: 14px; cursor: pointer; transition: all .15s ease;
}
.dot.on { border-color: var(--mint); color: var(--mint);
          background: rgba(111,224,184,.12); }

/* ---- Reminders ------------------------------------------------------------ */
.reminders { display: flex; justify-content: center; padding: 4px; }
.ghost {
  background: none; border: 1px solid var(--line); color: var(--ink);
  font-family: var(--body); font-size: 14px; padding: 12px 22px;
  border-radius: 12px; cursor: pointer; transition: border-color .2s ease;
}
.ghost:hover { border-color: var(--amber); }
.rem-on { font-family: var(--mono); font-size: 12px; color: var(--mint); }

/* ---- Footer / toast ------------------------------------------------------- */
.foot { text-align: center; color: var(--muted); font-size: 12px; margin-top: 6px; }
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  padding: 12px 18px; border-radius: 12px; font-size: 13.5px; max-width: 90%;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- A11y ----------------------------------------------------------------- */
button:focus-visible, .link:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 2px;
}
/* `animation` as well as `transition`: the landing moon breathes, and anything
   added later should honour the preference without having to remember to. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===== Multi-group additions ============================================== */
.brand { text-decoration: none; color: inherit; }
#headerRight { display: flex; gap: 8px; }
.iconbtn {
  background: rgba(245,184,65,.10); border: 1px solid rgba(245,184,65,.28);
  color: var(--amber); font-family: var(--mono); font-size: 12px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
}
.iconbtn:hover { background: rgba(245,184,65,.18); }

/* ---- Hero / landing ------------------------------------------------------- */
.hero { text-align: center; padding: 18px 6px 8px; }
.hero-title {
  font-family: var(--display); font-weight: 700; font-size: 34px;
  line-height: 1.08; letter-spacing: -0.02em; margin-top: 8px;
}
.hero-sub { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 14px auto 0; max-width: 30rem; }

/* ---- Builder form --------------------------------------------------------- */
.build { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
input[type="text"], input[type="time"], input[type="date"], select {
  width: 100%; background: var(--night-2); border: 1px solid var(--line);
  color: var(--ink); font-family: var(--body); font-size: 15px;
  padding: 12px 14px; border-radius: 12px; -webkit-appearance: none; appearance: none;
}
input:focus, select:focus { outline: none; border-color: var(--amber); }
select { background-image: none; }
.days { display: flex; gap: 6px; flex-wrap: wrap; }
.day {
  flex: 1; min-width: 42px; background: var(--night-2); border: 1px solid var(--line);
  color: var(--muted); font-family: var(--mono); font-size: 12px; font-weight: 500;
  padding: 11px 0; border-radius: 10px; cursor: pointer; transition: all .15s ease;
}
.day.on { background: rgba(245,184,65,.14); border-color: var(--amber); color: var(--amber); }
.hint { color: var(--muted); font-size: 12px; margin: -6px 2px 0; }
.preview {
  background: var(--night-2); border: 1px dashed var(--line); border-radius: 12px;
  padding: 14px 16px; font-size: 14px; color: var(--ink); text-align: center;
}
.preview strong { color: var(--amber); font-family: var(--mono); }
.preview .warn, .warn { color: #F5A0A0; }

/* ---- Share card ----------------------------------------------------------- */
.share-card { text-align: center; }
.linkbox { display: flex; gap: 8px; margin: 18px 0 8px; }
.linkbox input {
  flex: 1; font-family: var(--mono); font-size: 12px; color: var(--muted);
  padding: 12px 14px; overflow: hidden; text-overflow: ellipsis;
}
.copybtn {
  background: var(--amber); color: var(--night); border: none;
  font-family: var(--display); font-weight: 700; font-size: 14px;
  padding: 0 18px; border-radius: 12px; cursor: pointer;
}
.share-actions { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.streakline { font-family: var(--mono); font-size: 12px; color: var(--amber); margin-top: 10px; }
.streakline .flame { font-size: 10px; }

/* ===== Phase 3: accounts, header menu, home ================================ */

/* ---- Header: auth controls + dropdown ------------------------------------- */
#headerRight { position: relative; align-items: center; }
.iconbtn.primary {
  background: var(--amber); border-color: var(--amber); color: var(--night); font-weight: 700;
}
.iconbtn.primary:hover { background: var(--amber-d); }

/* Full labels on roomy screens, a single hamburger on narrow ones. */
.narrow-only { display: none; }
@media (max-width: 419px) {
  .wide-only { display: none; }
  .narrow-only { display: inline-flex; }
}

.avatarbtn {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--line); color: var(--ink);
  padding: 4px 10px 4px 4px; border-radius: 999px; cursor: pointer;
}
.avatarbtn:hover { border-color: var(--amber); }
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(245,184,65,.16); color: var(--amber);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
}
.acct-name { font-size: 13px; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
  min-width: 172px; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 6px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
/* MUST stay next to the rule above. `display: flex` there is an author style,
   so it beats the user-agent's `[hidden] { display: none }` no matter what the
   JS sets — which left the header menu painted open from first load and
   unclosable, because toggling the `hidden` property changed nothing visible.
   Any future `display` on .menu needs this companion rule. */
.menu[hidden] { display: none; }
.menu-item {
  background: none; border: none; color: var(--ink); text-decoration: none;
  font-family: var(--body); font-size: 14px; text-align: left;
  padding: 10px 12px; border-radius: 9px; cursor: pointer;
}
.menu-item:hover { background: var(--night-2); }
.menu-item.danger { color: #F5A0A0; }

/* ---- Auth screen ---------------------------------------------------------- */
.auth { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.auth .hero-title.small, .hero-title.small { font-size: 26px; line-height: 1.15; }
.providers { display: flex; flex-direction: column; gap: 10px; }
.provider { width: 100%; }
.or {
  display: flex; align-items: center; gap: 12px;
  color: var(--muted); font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.optin {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; color: var(--ink); line-height: 1.45;
  background: var(--night-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; cursor: pointer;
}
.optin input { margin-top: 2px; accent-color: var(--amber); width: 16px; height: 16px; flex: none; }
.legal { color: var(--muted); font-size: 12px; line-height: 1.5; }
.legal a, .foot-links a { color: var(--muted); text-decoration: underline; }
.legal a:hover, .foot-links a:hover { color: var(--amber); }

.name-field { text-align: left; margin: 4px 0 14px; }
.publish-gate { text-align: left; margin-bottom: 14px; }

/* ---- Multi-group home ----------------------------------------------------- */
.hero.tight { padding: 10px 6px 2px; }
.gcards { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.gcard { border-radius: 16px; }
.gcard-hit {
  width: 100%; display: flex; flex-direction: column; gap: 5px; text-align: left;
  background: linear-gradient(180deg, var(--panel), var(--night-2));
  border: 1px solid var(--line); border-radius: 16px;
  padding: 15px 17px; cursor: pointer; color: var(--ink);
  transition: border-color .15s ease, transform .12s ease;
}
.gcard-hit:hover { border-color: var(--amber); transform: translateY(-1px); }
.gcard.live .gcard-hit { border-color: rgba(111,224,184,.5); }
.gcard-top { display: flex; align-items: baseline; gap: 8px; }
.gcard-name { font-family: var(--display); font-weight: 700; font-size: 17px; }
.gcard-when { color: var(--muted); font-size: 13px; }
.gcard.live .gcard-when { color: var(--mint); }
.gcard-stats { color: var(--muted); }

.pill {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--amber); background: rgba(245,184,65,.12);
  border: 1px solid rgba(245,184,65,.3); border-radius: 999px; padding: 2px 7px;
}
.pill.sm { font-size: 9px; padding: 1px 5px; }

/* ---- Footer links --------------------------------------------------------- */
/* The footer is one line now, so no top margin against a line above it. */
.foot-links { font-size: 11.5px; color: var(--muted); }
.foot-brand { white-space: nowrap; }

/* ---- Accountability board ------------------------------------------------- */
.board { padding: 2px 4px; }
.ranks { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rank {
  display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 12px;
  background: var(--night-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 15px;
}
.rank.me { border-color: rgba(245,184,65,.45); background: rgba(245,184,65,.06); }
.rank-n { color: var(--muted); font-size: 13px; text-align: center; }
.rank.me .rank-n { color: var(--amber); }
.rank-name { font-weight: 500; font-size: 14px; }
.rank-stat { color: var(--muted); font-size: 12px; }
.rank.me .rank-stat { color: var(--amber); }
.board-hint { text-align: center; margin-top: 10px; }