/* The boot screen and the shell are toggled with the "hidden" attribute, but
   both carry a class that sets "display". An author rule beats the UA's
   "[hidden] { display: none }", so without this the boot screen stayed on the
   page after loading and the dashboard appeared below it — you had to scroll
   past a spinner to reach your own data. */
[hidden] { display: none !important; }

/**
 * Styling for the signed-in half of the site: the login page and the host
 * dashboard.
 *
 * Loaded AFTER styles.css and reuses its custom properties (--bg, --primary,
 * --surface …), so the dashboard can never drift from the marketing site's
 * palette — there is one definition of brand blue, in styles.css.
 */

/* ------------------------------------------------------------------- shared */

.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 8px 14px; font-size: 0.86rem; }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary-2); }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field > span { font-size: 0.82rem; color: var(--text-muted); font-weight: 500; }
.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(46 144 250 / 0.18);
}
.field input:disabled,
.field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.field textarea { resize: vertical; }

.field-with-button { position: relative; display: block; }
.field-with-button input { padding-right: 68px; }
.reveal-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 6px 8px;
}
.reveal-toggle:hover { color: var(--primary-2); }

.form-error {
  background: rgb(220 60 70 / 0.12);
  border: 1px solid rgb(220 60 70 / 0.35);
  color: #ff9ca4;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.88rem;
  margin: 0 0 16px;
}

/* A button that can be busy. The spinner sits inside so the width doesn't jump
   between states — a resizing submit button under the cursor is how you get a
   double submit. */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgb(255 255 255 / 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  display: none;
  animation: spin 0.7s linear infinite;
}
.spinner-lg { width: 28px; height: 28px; border-width: 3px; display: block; }
.is-busy .spinner { display: inline-block; }
.is-busy .btn-label { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------------- login */

.auth-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 50% -10%, rgb(46 144 250 / 0.16), transparent 70%),
    var(--bg);
}
.auth-shell { width: 100%; max-width: 420px; }
.auth-back {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.88rem;
}
.auth-back:hover { color: var(--primary-2); }

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px 26px;
  animation: rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* The bare mark, no tile. A gradient square behind it made it look like an app
   icon pasted onto the page rather than the brand itself, and the cuts had to
   be painted in the tile's colour to survive — which only worked while the tile
   was there. */
.auth-mark {
  display: grid;
  place-items: center;
  justify-content: start;
  margin-bottom: 18px;
}
.auth-card h1 { font-family: var(--font-head); font-size: 1.6rem; margin: 0 0 4px; }
.auth-sub { color: var(--text-muted); margin: 0 0 24px; font-size: 0.94rem; }
.auth-note { font-size: 0.86rem; color: var(--text-muted); margin: 18px 0 0; line-height: 1.6; }
.auth-note a { color: var(--primary-2); }
.auth-note-faint { color: var(--text-faint); margin-top: 8px; }
.auth-footnote {
  text-align: center;
  color: var(--text-faint);
  font-size: 0.82rem;
  margin: 20px 0 0;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- dashboard */

.dash-body { background: var(--bg); min-height: 100vh; }

.dash-boot {
  min-height: 100vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  color: var(--text-muted);
}

.dash-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 24px;
  background: rgb(10 14 26 / 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.dash-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 700;
}
.dash-brand b { color: var(--primary); font-weight: 700; }

.dash-nav { display: flex; gap: 4px; margin-left: 12px; }
.dash-nav-item {
  background: none;
  border: 0;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}
.dash-nav-item:hover { color: var(--text); }
.dash-nav-item.is-active { color: var(--primary-2); background: rgb(46 144 250 / 0.12); }

.dash-user { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.dash-email { color: var(--text-faint); font-size: 0.84rem; }

.dash-main { max-width: 900px; margin: 0 auto; padding: 32px 24px 80px; }
.view { animation: rise 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.view h1 { font-family: var(--font-head); font-size: 1.7rem; margin: 0 0 4px; }
.view-sub { color: var(--text-muted); margin: 0 0 24px; }
.view-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.view-loading { display: grid; place-items: center; padding: 60px 0; }
.view-loading .spinner { display: block; width: 24px; height: 24px; }

.back-link {
  background: none;
  border: 0;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.86rem;
  padding: 0 0 14px;
  cursor: pointer;
}
.back-link:hover { color: var(--primary-2); }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat span:last-child { color: var(--text-muted); font-size: 0.82rem; }
.stat-n { font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-head h2 { font-family: var(--font-head); font-size: 1rem; margin: 0; }
.card-head:empty { display: none; }

.row-list { list-style: none; margin: 0; padding: 0; }
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease;
}
.row:hover { background: var(--surface-alt); transform: translateX(2px); }
.row + .row { border-top: 1px solid var(--border); border-radius: 0; }
.row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.row-title { font-weight: 600; }
.row-sub { color: var(--text-muted); font-size: 0.84rem; }

.pill {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pill-ok { background: rgb(31 174 110 / 0.16); color: #58d6a0; }
.pill-warn { background: rgb(232 163 61 / 0.16); color: #e8a33d; }
.pill-danger { background: rgb(220 60 70 / 0.16); color: #ff8f98; }
.pill-muted { background: var(--surface-alt); color: var(--text-muted); }

.empty { padding: 26px 4px; text-align: center; color: var(--text-muted); }
.empty-hint { color: var(--text-faint); font-size: 0.86rem; margin-top: 4px; }
.note { color: var(--text-faint); font-size: 0.84rem; line-height: 1.6; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.field-wide { grid-column: 1 / -1; }
.form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.table th {
  text-align: left;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.table td { padding: 10px; border-bottom: 1px solid var(--border); }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.82rem; color: var(--text-muted); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 0.88rem;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 60;
}
.toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.toast-danger { border-color: rgb(220 60 70 / 0.5); color: #ff9ca4; }

@media (max-width: 720px) {
  .dash-top { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .dash-nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .dash-email { display: none; }
  .dash-main { padding: 24px 16px 60px; }
  .stat-row { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}

/* Everything that moves here is decoration. Someone who asked the OS to stop
   animations gets the same dashboard, still. */
@media (prefers-reduced-motion: reduce) {
  .view, .auth-card { animation: none; }
  .row:hover { transform: none; }
  .toast { transition: opacity 0.01s; }
  .spinner { animation-duration: 2s; }
}


.boot-error { max-width: 380px; text-align: center; }
.boot-error h1 { font-family: var(--font-head); font-size: 1.2rem; margin: 0 0 8px; color: var(--text); }
.boot-error p { color: var(--text-muted); margin: 0 0 18px; }
.boot-actions { display: flex; gap: 10px; justify-content: center; }

/* ── charts ───────────────────────────────────────────────────────────── */
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.chart-wide { grid-column: 1 / -1; }
.chart-block h3 { font-size: 0.9rem; margin: 0 0 2px; font-family: var(--font-head); }
.chart-note { color: var(--text-faint); font-size: 0.8rem; margin: 0 0 10px; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-axis { fill: var(--text-faint); font-size: 10px; }
.chart-value { fill: var(--text); font-size: 12px; font-weight: 700; }
.chart-centre { fill: var(--text); font-size: 22px; font-weight: 700; }
.chart-empty { fill: var(--text-faint); font-size: 12px; }
.chart-line { stroke: var(--primary); stroke-width: 2.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { fill: rgb(46 144 250 / 0.14); stroke: none; }
.chart-dot { fill: var(--primary); stroke: var(--surface); stroke-width: 2; }

.donut-row { display: flex; align-items: center; gap: 16px; }
.chart-donut { max-width: 160px; flex: none; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 0.82rem; min-width: 0; }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.legend-label { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-value { margin-left: auto; font-weight: 700; }

/* ── interact ─────────────────────────────────────────────────────────── */
.interact { display: grid; gap: 26px; }
.interact h3 { font-size: 0.9rem; margin: 0 0 10px; font-family: var(--font-head); }
.interact-form { display: grid; gap: 10px; margin-bottom: 16px; }
.interact-form textarea,
.answer-row input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  resize: vertical;
}
.interact-form textarea:focus,
.answer-row input:focus { outline: none; border-color: var(--primary); }
.interact-form .btn { justify-self: start; }
.check { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 0.85rem; }
.check input { width: 15px; height: 15px; accent-color: var(--primary); }

.feed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.feed-list li { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; }
.feed-list p { margin: 0; font-size: 0.9rem; line-height: 1.55; }
.feed-list .meta { display: block; margin-top: 6px; color: var(--text-faint); font-size: 0.78rem; }
.answer { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); display: grid; gap: 6px; justify-items: start; }
.answer-row { display: flex; gap: 8px; margin-top: 10px; }
.answer-row input { flex: 1; }

.polls { display: grid; gap: 18px; }
.poll { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.poll-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.poll .meta { color: var(--text-faint); font-size: 0.78rem; }
.poll-options { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.poll-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.86rem; margin-bottom: 5px; }
.poll-n { color: var(--text-muted); white-space: nowrap; }
.poll-bar { height: 7px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.poll-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--cyan)); transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

@media (max-width: 720px) {
  .charts { grid-template-columns: 1fr; }
  .donut-row { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .poll-bar i { transition: none; }
}

/* ── chart scrubbing ──────────────────────────────────────────────────── */
.chart-surface { cursor: crosshair; touch-action: none; }
.chart-crosshair { stroke: var(--primary); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.8; }
.chart-scrub-dot { fill: var(--primary); stroke: var(--surface); stroke-width: 2; }
.chart-scrub-box { fill: var(--surface-alt); stroke: var(--border); }
.chart-scrub-label { fill: var(--text); font-size: 11px; font-weight: 600; }
.chart-scrub { transition: opacity 0.15s ease; pointer-events: none; }

/* ── expandable lists ─────────────────────────────────────────────────── */
.list-toggle { margin-top: 12px; width: 100%; justify-content: center; }

/* ── new poll ─────────────────────────────────────────────────────────── */
.poll-new { margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.poll-new summary { padding: 11px 14px; cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--primary-2); }
.poll-new[open] summary { border-bottom: 1px solid var(--border); }
.poll-form { padding: 14px; }
.poll-form input[type='text'] {
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
}
.poll-form input[type='text']:focus { outline: none; border-color: var(--primary); }
.poll-inputs { display: grid; gap: 8px; }
.poll-form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) { .chart-scrub { transition: none; } }

/* ── donut selection ──────────────────────────────────────────────────── */
.chart-donut { max-width: 240px; }
.donut-slice { cursor: pointer; transition: opacity 0.2s ease, transform 0.2s ease; transform-origin: center; }
.donut-slice.is-dim { opacity: 0.28; }
.donut-slice.is-on { transform: scale(1.035); }
.legend li { transition: opacity 0.2s ease; }
.legend li.is-dim { opacity: 0.35; }
.legend li.is-on .legend-label { color: var(--text); font-weight: 600; }

/* The check-in bars carried the same font sizes as a full-width chart and read
   as oversized next to the other two. Constrained and scaled down instead. */
.chart-bars { max-width: 420px; }
.chart-bars .chart-value { font-size: 11px; }
.chart-bars .chart-axis { font-size: 9px; }

/* ── expandable lists ─────────────────────────────────────────────────── */
/* Once expanded the toggle sticks to the bottom of the viewport, so collapsing
   a 300-row table doesn't mean scrolling to the end to find the button. */
.list-toggle.is-expanded {
  position: sticky;
  bottom: 12px;
  z-index: 3;
  background: var(--surface-alt);
  border-color: var(--primary);
  box-shadow: 0 10px 26px -12px rgb(0 0 0 / 0.9);
}

/* Both chart cells stretch to the taller of the two, so the shorter one can
   push its own filler to the bottom instead of leaving a hole under itself. */
.chart-block { display: flex; flex-direction: column; }
.mini-stats {
  list-style: none;
  margin: auto 0 0;
  padding: 12px 0 0;
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}
.mini-stats li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mini-stats span { color: var(--text-muted); }
.mini-stats b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.mini-stats .is-good { color: #1FAE6E; }

/* A second question under the check-in bars, so the cell is not a quarter
   empty. White like every other heading — grey read as a caption belonging to
   the chart above it rather than as the title of the one below.
   
   Written as `.chart-block h3.chart-sub`, not `.chart-sub`: `.chart-block h3`
   above sets `margin: 0 0 2px`, and a class-plus-element selector outranks a
   bare class, so every margin set here was silently discarded. */
.chart-block h3.chart-sub {
  font-size: 0.9rem;
  margin: 23px 0 2px;
  font-family: var(--font-head);
  color: var(--text);
}