/* Sleep Debt & Recovery Calculator — content styles.
   Prefix: --sd-  /  .sd-

   Reference point: a 7-row per-night breakdown table is the density
   centerpiece (not a single hero card) — the whole point is seeing which
   specific nights ran short, not just one aggregate number. A hero card
   still leads with the total debt, since that's the headline figure, but
   the table beneath it carries the real information.

   THIS FILE STYLES THE CONTENT AREA ONLY. Chrome is owned by chrome.css. */

:root {
  --sd-surface: #ffffff;
  --sd-panel:   #f5f6f7;
  --sd-line:    #dde1e4;
  --sd-text:    #14181c;
  --sd-muted:   #626a72;
  --sd-good:    #1c7a4c;
  --sd-bad:     #b3261e;
  --sd-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.sd-wrap {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
  font-family: var(--sd-font);
}

/* ── Input panels ────────────────────────────────────────────────────────── */

.sd-panel {
  padding: 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid var(--sd-line);
  border-radius: 2px;
  background: var(--sd-surface);
}

.sd-panel-title {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--sd-text);
}

.sd-field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.sd-night-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.875rem;
}

@media (max-width: 30rem) {
  .sd-field-grid { grid-template-columns: 1fr; }
  .sd-night-grid { grid-template-columns: repeat(2, 1fr); }
}

.sd-field {
  display: grid;
  gap: 0.375rem;
}

.sd-field label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sd-muted);
}

.sd-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.625rem 0.75rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--sd-text);
  background: var(--sd-surface);
  border: 1px solid var(--sd-line);
  border-radius: 2px;
}

.sd-field input:focus-visible {
  outline: 2px solid var(--tf-accent);
  outline-offset: -1px;
}

.sd-error {
  margin: 0.75rem 0 0;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--sd-bad);
  background: rgba(179, 38, 30, 0.06);
  border: 1px solid var(--sd-bad);
  border-radius: 2px;
}

.sd-presets {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--sd-line);
  padding-top: 0.875rem;
  margin-top: 0.25rem;
}

.sd-preset-lbl {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sd-muted);
}

.sd-chip {
  padding: 0.3125rem 0.75rem;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sd-text);
  background: var(--sd-panel);
  border: 1px solid var(--sd-line);
  border-radius: 2px;
  cursor: pointer;
}

.sd-chip:hover {
  border-color: var(--tf-accent);
  color: var(--tf-accent);
}

/* ── Primary action button ──────────────────────────────────────────────── */

.sd-btn {
  display: block;
  width: 100%;
  padding: 0.75rem 1.5rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--tf-accent-ink);
  background: var(--tf-accent);
  border: 1px solid var(--tf-accent);
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 1.5rem;
}

.sd-btn:hover  { background: var(--tf-accent-hover);  border-color: var(--tf-accent-hover); }
.sd-btn:active { background: var(--tf-accent-active); border-color: var(--tf-accent-active); }

.sd-btn:focus-visible {
  outline: 2px solid var(--tf-accent);
  outline-offset: 2px;
}

/* ── Hero + metrics ──────────────────────────────────────────────────────── */

.sd-hero {
  padding: 1.5rem;
  margin-bottom: 1rem;
  text-align: center;
  border: 1px solid var(--sd-line);
  border-radius: 2px;
  background: var(--sd-surface);
}

.sd-hero-label {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sd-muted);
}

.sd-hero-value {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--tf-accent);
}

.sd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

@media (max-width: 30rem) {
  .sd-grid { grid-template-columns: 1fr; }
}

.sd-metric {
  padding: 1rem 0.75rem;
  border: 1px solid var(--sd-line);
  border-radius: 2px;
  background: var(--sd-panel);
  text-align: center;
}

.sd-metric--good {
  background: rgba(28, 122, 76, 0.06);
  border-color: var(--sd-good);
}

.sd-metric-label {
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  color: var(--sd-muted);
}

.sd-metric-value {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sd-text);
}

.sd-metric--good .sd-metric-value {
  color: var(--sd-good);
}

/* ── Per-night breakdown table ───────────────────────────────────────────── */

.sd-breakdown {
  display: grid;
  border: 1px solid var(--sd-line);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.sd-breakdown-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--sd-line);
  background: var(--sd-surface);
}

.sd-breakdown-row:last-child { border-bottom: none; }

.sd-breakdown-head {
  background: var(--sd-panel);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sd-muted);
}

.sd-diff-short { color: var(--sd-bad); font-weight: 600; }
.sd-diff-over  { color: var(--sd-good); font-weight: 600; }
.sd-diff-met   { color: var(--sd-muted); }

.sd-note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--sd-muted);
}

/* ── Ad slots ───────────────────────────────────────────────────────────── */

.sd-ad {
  min-height: 280px;
  margin: 2rem auto 0;
  max-width: 40rem;
  padding-inline: 1.5rem;
}

@media (max-width: 26rem) {
  .sd-wrap,
  .sd-ad { padding-inline: 1rem; }
  .sd-panel { padding: 1.25rem; }
}

/* tf:dark-palette — generated by migrate_chrome.py */
/* Neutrals inherit the shared chrome tokens so all tools share one
   ground; brand hues are kept and lightened, never inverted. */
[data-theme="dark"] {
  --sd-surface: var(--tf-surface);
  --sd-panel: var(--tf-surface);
  --sd-line: var(--tf-surface);
  --sd-text: var(--tf-ink);
  --sd-muted: var(--tf-ink-soft);
  --sd-good: #5fd099;
  --sd-bad: #da8581;
}