/* compassion — pre-dawn calm. No external assets: system fonts only, no network at runtime. */

:root{
  --night:#0a1216;
  --night-2:#0e1a20;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.10);
  --text:#e9f0ee;
  --soft:#8fa5a3;
  --faint:#5f7573;

  --rdo:#5fbfa0;        /* Recovery Dharma — jade */
  --rdo-glow:rgba(95,191,160,.22);
  --paa:#6fa8dc;        /* PAA — blue */
  --paa-glow:rgba(111,168,220,.22);
  --lamp:#f2b25c;

  --font-display: Optima, "Optima nova", Candara, "Gill Sans", ui-sans-serif, sans-serif;
  --font-ui: "Avenir Next", Avenir, ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: light){
  :root{
    --night:#f2ede4;
    --night-2:#e9e2d6;
    --surface:rgba(20,30,28,.04);
    --surface-2:rgba(20,30,28,.07);
    --line:rgba(20,30,28,.12);
    --text:#1b2422;
    --soft:#5c6b68;
    --faint:#8b9895;
    --rdo:#2e8f74;
    --rdo-glow:rgba(46,143,116,.22);
    --paa:#2f6fb0;
    --paa-glow:rgba(47,111,176,.22);
    --lamp:#c98a2e;
  }
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; }
body{
  font-family:var(--font-ui);
  color:var(--text);
  background:
    radial-gradient(120% 70% at 50% 118%, rgba(242,178,92,.20), transparent 62%),
    radial-gradient(90% 60% at 12% -10%, rgba(95,191,160,.10), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  background-attachment:fixed;
  overscroll-behavior:none;
  -webkit-user-select:none; user-select:none;
}
body::after{ /* grain for depth */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:99; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.app{
  min-height:100svh;
  display:flex; flex-direction:column;
  padding:calc(var(--safe-t) + 26px) 22px calc(var(--safe-b) + 26px);
  max-width:520px; margin:0 auto;
}

/* ---------- masthead ---------- */
.mast{ text-align:center; margin-bottom:6px; animation:rise .7s ease both; }
.mast h1{
  font-family:var(--font-display); font-weight:400; font-size:27px; letter-spacing:.14em;
  margin:0; text-transform:lowercase; color:var(--text);
}
.mast p{ margin:7px 0 0; color:var(--faint); font-size:13px; letter-spacing:.03em; }

/* ---------- states ---------- */
.body{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:16px; padding:16px 0; }
.lede{
  font-family:var(--font-display); font-size:19px; letter-spacing:.02em; color:var(--soft);
  text-align:center; margin:0 0 2px; animation:rise .7s .08s ease both;
}

/* ---------- meeting box: one per group, always present ---------- */
.card{
  border-radius:22px; border:1px solid var(--line); background:var(--surface);
  padding:20px; display:flex; flex-direction:column; gap:15px;
  animation:rise .7s ease both;
}
.card.rdo{ --accent:var(--rdo); --glow:var(--rdo-glow); }
.card.paa{ --accent:var(--paa); --glow:var(--paa-glow); }
.card:nth-of-type(2){ animation-delay:.09s; }

.org{
  display:flex; align-items:center; gap:9px;
  font-size:11.5px; letter-spacing:.17em; text-transform:uppercase; font-weight:600; color:var(--soft);
}
.dot{ width:8px; height:8px; border-radius:50%; flex:none; background:var(--accent); box-shadow:0 0 12px var(--accent); }

/* Colour carries the meaning: accent = joinable this second, neutral grey = not started yet. */
.slot{ display:flex; flex-direction:column; gap:9px; }
.slot + .slot{ border-top:1px solid var(--line); padding-top:15px; }
.slot.none{ padding:2px 0 4px; }
/* a dashed rule marks the break between what's running and what isn't */
.slot + .slot.next{ border-top-style:dashed; margin-top:5px; padding-top:17px; }
.slot.next{ opacity:.75; transition:opacity .25s ease; }
.slot.next:hover, .slot.next:focus-within, .slot.next:active{ opacity:1; }
.slot.next .title, .slot.next .tag, .slot.next .desc{ color:var(--faint); }
/* alternatives that are also running keep the accent, so they read as live */
.slot.alt .tag{ color:var(--accent); }

.tag{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--faint); }
.tag.open{ color:var(--accent); }
.title{ font-family:var(--font-display); font-size:24px; line-height:1.2; margin:0; letter-spacing:.01em; }
.title.sm{ font-size:17px; }
/* linked title: reads as a heading, but signals it goes somewhere */
.title a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.14); }
.title a:hover{ border-bottom-color:currentColor; }
.title a::after{ content:'↗'; font-size:.52em; margin-left:.32em; vertical-align:super; opacity:.5; }
.desc{ font-size:13px; line-height:1.5; color:var(--soft); margin:-2px 0 0; }
.when{ font-family:var(--font-mono); font-size:11.5px; color:var(--faint); letter-spacing:.01em; }
/* the passcode is meant to be read off the screen and typed, so it gets mono and full contrast */
.pass{ font-family:var(--font-mono); font-size:11.5px; color:var(--faint); letter-spacing:.01em; margin-top:-3px; }
.pass span{ color:var(--soft); user-select:all; -webkit-user-select:all; letter-spacing:.04em; }
.fallback{ color:var(--soft); font-size:13.5px; text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; align-self:flex-start; }

/* ---------- the button (an anchor, so the destination is inspectable) ---------- */
.join{
  font-family:var(--font-ui); font-weight:600; font-size:17px; letter-spacing:.03em;
  border:none; border-radius:16px; padding:18px; cursor:pointer; width:100%;
  color:#08120f; background:var(--accent);
  display:block; text-align:center; text-decoration:none; box-sizing:border-box;
  transition:transform .16s ease, filter .2s;
  animation:breathe 5.5s ease-in-out infinite;
}
.join:active{ transform:scale(.975); filter:brightness(1.06); }
/* also open: tinted with the group's accent, so it belongs to the "running now" family */
.join.ghost{
  background:var(--glow); border:1px solid var(--accent); color:var(--accent);
  padding:12px; font-size:14.5px; font-weight:600; animation:none;
}
/* next: hasn't started, so it drops the accent entirely and reads as neutral */
.slot.next .join{ background:transparent; border:1px solid var(--line); color:var(--soft); }
@keyframes breathe{
  0%,100%{ box-shadow:0 0 0 0 transparent, 0 10px 30px -12px rgba(0,0,0,.55); }
  50%    { box-shadow:0 0 34px 3px var(--glow), 0 10px 30px -12px rgba(0,0,0,.55); }
}

/* ---------- quiet state ---------- */
.quiet{ text-align:center; animation:rise .7s .06s ease both; }
.lamp{
  width:78px; height:78px; margin:0 auto 20px; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(242,178,92,.5), rgba(242,178,92,.05) 70%);
  border:1px solid rgba(242,178,92,.22);
  animation:breathe-soft 6s ease-in-out infinite;
}
@keyframes breathe-soft{ 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:1; transform:scale(1.05); } }
.quiet h2{ font-family:var(--font-display); font-weight:400; font-size:22px; margin:0 0 8px; }
.quiet p{ color:var(--soft); font-size:14.5px; line-height:1.6; margin:0 auto; max-width:30ch; }

.links{ display:flex; flex-direction:column; gap:9px; margin-top:24px; }
.link{
  display:block; text-align:center; text-decoration:none; padding:14px; border-radius:14px;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  font-size:14.5px; font-family:var(--font-ui);
}
.link:active{ background:var(--surface-2); }
.link small{ display:block; color:var(--faint); font-size:11.5px; margin-top:3px; letter-spacing:.03em; }

.foot{ text-align:center; color:var(--faint); font-size:11px; letter-spacing:.04em; padding-top:10px; }
/* diagnostics: reachable when someone reports a wrong time, invisible enough to ignore otherwise */
.dbg{
  display:block; margin:9px auto 0; padding:6px 10px; background:none; cursor:pointer;
  border:1px solid var(--line); border-radius:9px; color:var(--faint);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; opacity:.55;
  transition:opacity .2s, color .2s;
}
.dbg:hover, .dbg:focus-visible{ opacity:1; color:var(--soft); }

@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.06s !important; }
}