/* The calendar's stargazer ground, reused rather than re-decided: these two
   pages sit next to each other on his phone and a second visual language would
   read as a second product. The sky is painted once into a canvas, never a
   per-frame loop — this page is left open, and an animated background would
   cost battery for nothing.

   Layout is phone-first and then genuinely full width: on a wide screen the
   panes become columns rather than a 720px letterbox with grey either side. */

:root {
  color-scheme: dark;
  --ink: #e9edf5;
  --ink-dim: #97a1b4;
  --ink-faint: #626c80;
  --panel: rgba(19, 22, 32, .72);
  --panel-solid: #141826;
  --line: rgba(139, 156, 196, .14);
  --line-strong: rgba(139, 156, 196, .26);
  --accent: #5b8cff;
  --live: #4ad3a0;
  --danger: #ff6b6b;
  --pad: 16px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Every pane here is toggled with `hidden`, and a display rule on the element
   would silently beat it. The calendar learned this the hard way. */
[hidden] { display: none !important; }

html, body {
  min-height: 100%;
  margin: 0;
  background: #07080d;
  color: var(--ink);
  font: 400 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  overscroll-behavior-y: none;
}

#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---- header ----------------------------------------------------------- */

#head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: max(14px, env(safe-area-inset-top)) var(--pad) 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(7, 8, 13, .94), rgba(7, 8, 13, .78));
  backdrop-filter: blur(6px);
}

.titleline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#head h1 {
  margin: 0;
  font: 600 26px/1 var(--mono);
  letter-spacing: -.03em;
}
#refresh {
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: rgba(24, 29, 44, .7); color: var(--ink-dim);
  font-size: 19px; line-height: 1; cursor: pointer;
}
#refresh:active { color: var(--ink); }

.sub { margin: 4px 0 0; font: 400 12px/1.3 var(--mono); color: var(--ink-faint); }

.tabs {
  display: flex;
  gap: 2px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: 1 0 auto;
  padding: 9px 10px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-faint);
  font: 500 13px/1.2 system-ui;
  white-space: nowrap;
  cursor: pointer;
}
.tabs button[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ---- panes ------------------------------------------------------------- */

#body { flex: 1; padding: var(--pad) var(--pad) calc(28px + env(safe-area-inset-bottom)); }

.pane { display: grid; gap: 14px; align-content: start; }

/* Full width, in columns, once there is room for them. Never a narrow column
   floating in the middle of a monitor. */
@media (min-width: 900px) {
  .pane { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }
  .pane > .wide { grid-column: 1 / -1; }
}

.card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  padding: 14px var(--pad);
}
.card > h2 {
  margin: 0 0 10px;
  font: 600 12px/1 system-ui;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.empty { margin: 0; color: var(--ink-faint); font-size: 14px; }

/* ---- the counts strip -------------------------------------------------- */

.counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.count {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 10px 12px;
}
.count b { display: block; font: 600 22px/1.1 var(--mono); }
.count span { font: 400 11px/1.3 system-ui; color: var(--ink-faint); letter-spacing: .04em; }

/* ---- rows -------------------------------------------------------------- */

.row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.row:first-of-type { border-top: 0; padding-top: 0; }
.row .when {
  flex: none;
  min-width: 62px;
  font: 500 12px/1.5 var(--mono);
  color: var(--ink-faint);
}
.row .what { flex: 1; min-width: 0; }
.row .what b { font-weight: 500; }
.row .what small {
  display: block;
  margin-top: 2px;
  color: var(--ink-faint);
  font: 400 12px/1.4 system-ui;
  overflow-wrap: anywhere;
}

.tag {
  display: inline-block;
  padding: 1px 7px 2px;
  border-radius: 999px;
  font: 500 11px/1.5 system-ui;
  background: rgba(91, 140, 255, .16);
  color: #a8c0ff;
}
.tag.live { background: rgba(74, 211, 160, .16); color: var(--live); }
.tag.bad { background: rgba(255, 107, 107, .16); color: var(--danger); }

.fact { padding: 11px 0; border-top: 1px solid var(--line); }
.fact:first-child { border-top: 0; padding-top: 0; }
.fact b { display: block; font: 500 14px/1.3 system-ui; }
.fact p { margin: 3px 0 0; color: var(--ink-dim); font-size: 14px; overflow-wrap: anywhere; }
.fact time { display: block; margin-top: 4px; font: 400 11px/1 var(--mono); color: var(--ink-faint); }

.said { padding: 8px 0; border-top: 1px solid var(--line); }
.said:first-child { border-top: 0; padding-top: 0; }
.said span { font: 500 11px/1 var(--mono); color: var(--ink-faint); }
.said.roxy span { color: var(--accent); }
.said p { margin: 3px 0 0; font-size: 14px; overflow-wrap: anywhere; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li {
  list-style: none;
  padding: 5px 10px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
}
ul.chips { margin: 0; padding: 0; }

/* ---- search ------------------------------------------------------------ */

.search { display: block; }
.search input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--panel-solid);
  color: var(--ink);
  font: 400 16px/1.2 system-ui;   /* 16px or iOS zooms the page on focus */
}
.search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ---- trouble and pairing ----------------------------------------------- */

.trouble {
  margin: 0 var(--pad) 20px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 107, 107, .4);
  border-radius: 12px;
  color: #ffb3b3;
  font-size: 14px;
}

dialog {
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--panel-solid);
  color: var(--ink);
  padding: 20px;
  max-width: min(92vw, 360px);
}
dialog::backdrop { background: rgba(3, 4, 8, .72); }
dialog h2 { margin: 0 0 6px; font: 600 18px/1.2 system-ui; }
dialog p { margin: 0 0 12px; color: var(--ink-dim); font-size: 14px; }
dialog input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #0d1018;
  color: var(--ink);
  font: 500 20px/1 var(--mono);
  letter-spacing: .3em;
  text-align: center;
}
dialog menu { display: flex; gap: 8px; justify-content: flex-end; margin: 16px 0 0; padding: 0; }
dialog button {
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: none;
  color: var(--ink-dim);
  font: 500 14px/1 system-ui;
  cursor: pointer;
}
dialog button.primary { background: var(--accent); border-color: var(--accent); color: #071022; }

/* The vouch banner: one question, two answers, on every tab. It sits above
   the panes rather than inside Today because the tap has to be reachable
   whatever he had open when the push arrived. */
.vouch {
  margin: 0 0 12px;
  padding: 14px var(--pad);
  border: 1px solid var(--accent);
  border-radius: 14px;
  background: rgba(91, 140, 255, .12);
  font: 15px/1.4 system-ui;
}
.vouch b { display: block; font-size: 17px; }
.vouch menu { display: flex; gap: 8px; margin: 12px 0 0; padding: 0; }
.vouch button {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: none;
  color: var(--ink-dim);
  font: 600 15px/1 system-ui;
  cursor: pointer;
}
.vouch button.primary { background: var(--accent); border-color: var(--accent); color: #071022; }
.vouch button:disabled { opacity: .5; }

/* ---- ticking off ------------------------------------------------------- */
.tick {
  flex: none; width: 36px; height: 36px; margin-left: 8px;
  border: 1px solid var(--line, #444); border-radius: 50%;
  background: transparent; color: inherit; font: inherit; font-size: 18px;
  cursor: pointer;
}
.tick:disabled { opacity: 0.4; }
.chips li { display: inline-flex; align-items: center; gap: 4px; }
.chips li .tick { width: 24px; height: 24px; margin-left: 2px; font-size: 13px; }