/* Keel Sleep — app-specific styles on top of the Keel UI kit (keel/keel-ui.css).
   Every colour, font and size comes from kit tokens (--k-*); the app adds only
   what the kit has no component for: the shell status strip, mini-player,
   toasts, alarm overlay, the Today panels, the night timeline, charts, the
   Soundscape Studio mixer and the wind-down runner. Square corners, 2px rules,
   Archivo, flush-left labels throughout. No inline styles anywhere (CSP):
   dynamic values arrive as custom properties (--k-w, --k-h, --sl-x …). */

/* ─────────────────────────────────────────────── shell */
body { min-height: 100vh; background: var(--k-bg); }
.sl-main { display: block; min-height: 60vh; }
.sl-main:focus { outline: none; }
.sl-view { display: block; }
.sl-noscript { padding: 22px 28px; }
.sl-status { border-bottom: 2px solid var(--k-divider); }
.sl-status .k-banner-action { min-height: 40px; }
body.sl-has-mini .sl-main { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

/* Shared small label (Today panels, Studio): 11px caps, muted. */
.sl-label {
  font-size: var(--k-fs-11); letter-spacing: var(--k-tracking-label); text-transform: uppercase;
  color: var(--k-muted); font-weight: 400; line-height: 1.55;
}
.sl-label--strong { color: var(--k-link-strong); font-weight: 600; }
.sl-tabular { font-variant-numeric: tabular-nums; }
.sl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sl-row--between { justify-content: space-between; }
.sl-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sl-stack--sm { gap: 6px; }
.sl-grow { flex: 1 1 auto; min-width: 0; }
.sl-caution { color: var(--k-caution); }
.sl-lock { display: inline-flex; align-items: center; gap: 4px; }
.sl-lock svg { flex: none; }

/* ─────────────────────────────────────────────── toasts */
.sl-toasts {
  position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1200;
  display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
body.sl-has-mini .sl-toasts { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
.sl-toast {
  padding: 12px 14px; font-size: var(--k-fs-14); line-height: 1.5;
  background: var(--k-tone-bg); color: var(--k-tone-fg); border-left: 4px solid var(--k-tone-edge);
  box-shadow: var(--k-shadow-md); pointer-events: auto;
  opacity: 0; transform: translateY(8px); transition: opacity var(--k-ease), transform var(--k-ease);
}
.sl-toast--in { opacity: 1; transform: none; }

/* ─────────────────────────────────────────────── dialogs */
.sl-dialog-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sl-dialog-body form { display: flex; flex-direction: column; gap: 14px; }

/* ─────────────────────────────────────────────── mini-player (fixed, DEEP ground) */
.sl-mini {
  --k-focus: var(--k-on-app);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 800;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  /* viewport-fit=cover: keep Play/Stop and Timer out of the home-indicator zone. */
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--k-app-deep); color: var(--k-on-app);
  border-top: 2px solid var(--k-app);
}
.sl-mini[hidden] { display: none; }
.sl-mini button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; text-align: left; }
.sl-mini .sl-mini-toggle {
  min-width: 72px; min-height: 44px; padding: 0 14px; font-weight: 800;
  background: var(--k-on-app-btn-bg); color: var(--k-on-app-btn-fg);
}
.sl-mini-info { display: flex; flex-direction: column; min-width: 0; min-height: 44px; justify-content: center; }
.sl-mini-title { font-weight: 800; font-size: var(--k-fs-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-mini-sub { font-size: var(--k-fs-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--k-on-app) 92%, var(--k-app-deep)); }
.sl-mini .sl-mini-timer {
  min-height: 44px; padding: 0 12px; font-weight: 600; font-size: var(--k-fs-13);
  border: 1px solid color-mix(in srgb, var(--k-on-app) 40%, transparent); font-variant-numeric: tabular-nums;
}
.sl-mini-progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: color-mix(in srgb, var(--k-on-app) 25%, transparent); }
.sl-mini-progress span { position: absolute; left: 0; top: 0; bottom: 0; width: var(--k-w, 0%); background: var(--k-on-app); }

/* ─────────────────────────────────────────────── alarm overlay (full screen, dark tokens) */
.sl-alarm {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 24px;
  background: var(--k-bg); color: var(--k-text);
}
.sl-alarm-inner { display: flex; flex-direction: column; gap: 12px; width: min(440px, 100%); }
.sl-alarm-time { margin: 0; font-size: var(--k-fs-64); font-weight: 800; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.sl-alarm-label { margin: 0; font-size: var(--k-fs-17); color: var(--k-text-2); }
.sl-alarm-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.sl-alarm-actions .k-btn { width: 100%; }

/* ─────────────────────────────────────────────── dim overlay (player "Dim screen") */
.sl-dim {
  position: fixed; inset: 0; z-index: 1900; display: grid; place-items: end center; padding: 32px 16px;
  background: #000; color: color-mix(in srgb, #ffffff 45%, #000); font-size: var(--k-fs-13);
  border: 0; width: 100%; cursor: pointer; font-family: var(--k-font);
}

/* ─────────────────────────────────────────────── Today (Apps A 4a) */
.sl-today .k-block.sl-today-hero { padding: 32px; border-right-width: 2px; justify-content: flex-start; }
.sl-today .k-block.sl-today-timeline { padding: 32px; }
.sl-today .k-block.sl-today-cell { padding: 24px 32px; }
.sl-hero { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sl-hero-kicker { font-size: var(--k-fs-12); color: var(--k-muted); }
.sl-hero-value { font-size: 72px; font-weight: 800; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.sl-hero-facts { font-size: var(--k-fs-14); line-height: 1.55; color: var(--k-text-2); }
.sl-hero-tags { gap: 8px; }
.sl-timeline { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Night timeline band: segments positioned by --sl-x (left %) and --k-w (width %). */
.sl-band {
  position: relative; height: 56px; border: 2px solid var(--k-divider);
  background: var(--k-bg); overflow: hidden;
}
.sl-band--empty {
  background: repeating-linear-gradient(135deg, transparent 0 8px, var(--k-row-wash) 8px 16px);
  border-style: dashed;
}
.sl-band-seg { position: absolute; top: 0; bottom: 0; left: var(--sl-x, 0%); width: var(--k-w, 0%); }
.sl-band-seg--asleep { background: var(--k-app); }
.sl-band-seg--awake-in-bed { background: color-mix(in srgb, var(--k-app-light) 72%, var(--k-raised)); }
.sl-band-seg--woke { background: var(--k-bg); }
.sl-band-axis { position: relative; height: 18px; font-size: var(--k-fs-11); color: var(--k-muted); }
.sl-band-tick { position: absolute; left: var(--sl-x, 0%); transform: translateX(-50%); white-space: nowrap; }
.sl-band-tick--start { transform: none; }
.sl-band-tick--end { transform: translateX(-100%); }
.sl-band-tick--hidden { visibility: hidden; }
.sl-sw-asleep { background: var(--k-app); }
.sl-sw-inbed { background: color-mix(in srgb, var(--k-app-light) 72%, var(--k-raised)); }
.sl-sw-woke { background: transparent; border: 1px solid var(--k-muted); }
.sl-sw-stage-awake { background: var(--k-caution); }
.sl-sw-stage-rem { background: var(--k-app-light); }
.sl-sw-stage-light { background: var(--k-app); }
.sl-sw-stage-deep { background: var(--k-app-deep); }
.sl-canvas { display: block; width: 100%; height: 160px; }

.sl-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.sl-panel > * { max-width: 100%; }
.sl-panel-big { font-size: var(--k-fs-22); font-weight: 800; line-height: 1.35; letter-spacing: -0.01em; }
.sl-panel-q { font-size: 16px; font-weight: 800; }
.sl-panel-text { font-size: var(--k-fs-14); line-height: 1.55; color: var(--k-text); }
.sl-panel-link { font-size: var(--k-fs-13); color: var(--k-link-strong); }
.sl-panel .k-btn { margin-top: 6px; }
.sl-panel .k-field { margin: 0; }

.sl-today .k-block.sl-today-phase { padding-top: 18px; padding-bottom: 18px; }
.sl-phasebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.sl-phasebar .k-field { margin: 0; }

.sl-details summary { cursor: pointer; font-size: var(--k-fs-13-5); font-weight: 600; color: var(--k-link-strong); min-height: 32px; display: flex; align-items: center; }
.sl-details[open] summary { margin-bottom: 8px; }
.sl-details .k-text-list { font-size: var(--k-fs-13-5); color: var(--k-text-2); }
.sl-alarm-row { align-items: flex-end; }
.sl-alarm-set { font-size: var(--k-fs-28); font-weight: 800; letter-spacing: -0.03em; }
.sl-alarm-disclosure { margin: 0; }

/* Wind-down runner and builder */
.sl-ritual .k-steps .k-step-main .sl-ritual-timer { font-size: var(--k-fs-24); font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; }
.sl-ritual-row { gap: 10px; }
.sl-ritual-min { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.sl-minutes { width: 76px; }
.sl-check-hit { display: grid; place-items: center; width: 44px; height: 44px; flex: none; cursor: pointer; }
.sl-checkbox { width: 20px; height: 20px; margin: 0; accent-color: var(--k-primary); cursor: pointer; }

@container k-page (max-width: 720px) {
  .sl-today .k-block.sl-today-hero, .sl-today .k-block.sl-today-timeline { padding: 24px 16px; border-right-width: 0; }
  .sl-today .k-block.sl-today-cell { padding: 20px 16px; }
  .sl-hero-value { font-size: 56px; }
  .sl-ritual-row { flex-wrap: wrap; }
}

/* ─────────────────────────────────────────────── Diary (1a, 1b) */
.sl-table-link { color: var(--k-text); font-weight: 600; text-decoration: none; }
.sl-table-link:hover { color: var(--k-link-strong); text-decoration: underline; }
.sl-muted-strong { color: var(--k-muted); font-weight: 600; }
.sl-notes { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sl-private { font-size: var(--k-fs-11); color: var(--k-muted); border: 1px solid var(--k-divider); padding: 1px 6px; white-space: nowrap; }
.sl-diary-table .k-table td { padding-top: 10px; padding-bottom: 10px; }
.sl-diary-table .k-table td:nth-child(2) { white-space: nowrap; }
.sl-range-field { flex-direction: row; align-items: center; gap: 8px; }
.sl-range-field .k-label { white-space: nowrap; }
.sl-range-field .k-select { width: auto; }
.sl-diary-table .k-table td:last-child { white-space: nowrap; }
.sl-diary-table .sl-notes { flex-wrap: nowrap; }
.sl-table-link { display: inline-flex; align-items: center; min-width: 44px; }
.sl-diary-phone { display: none; }
.sl-diary-phone .k-list-meta { overflow-wrap: anywhere; }
@container k-page (max-width: 720px) {
  .sl-diary-table .k-table-wrap { display: none; }
  .sl-diary-phone { display: block; }
}
.sl-wakings { display: flex; flex-direction: column; gap: 10px; }
.sl-wakings:empty { display: none; }
.sl-waking { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 10px 12px; background: var(--k-app-tint); }
.sl-waking-fields { flex: 1 1 260px; min-width: 0; }
.sl-woke-field { gap: 10px; }
.sl-extra-count .k-input { width: 120px; }
.sl-entry-form .k-form-wrap { gap: 14px; }
.sl-entry-form .k-error:empty { display: none; }
.sl-details .k-chips { margin-top: 4px; }

/* ─────────────────────────────────────────────── Insights (Apps A 4b) */
.sl-insights .k-head { padding: 24px 32px; align-items: flex-start; }
.sl-range-seg { margin: 0; }
.sl-insights .k-block.sl-stat-cell { padding: 20px 32px; }
.sl-stat { display: flex; flex-direction: column; gap: 4px; }
.sl-stat-label, .sl-stat-sub { font-size: var(--k-fs-12); color: var(--k-muted); }
.sl-stat-value { font-size: var(--k-fs-30); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; }
.sl-insights .k-block.sl-chart-block { padding: 24px 32px; gap: 10px; }
.sl-chart-title { margin: 0 0 18px; font-size: var(--k-fs-13); font-weight: 600; letter-spacing: 0; line-height: 1.4; }
.sl-cols { gap: 4px; }
.sl-cols .k-cols-goal-label { bottom: calc(var(--k-goal, 0%) + 1px); }
.sl-cols--dense { gap: 1px; }
.sl-cols-labels { gap: 4px; }
.sl-cols-labels.sl-cols--dense { gap: 1px; }
.sl-cols-labels span { overflow: visible; }
/* The newest night's label ends at the last bar instead of running past the block. */
.sl-cols-labels span:last-child { display: flex; justify-content: flex-end; }
.k-col.sl-col--unknown { background: transparent; border: 1px dashed var(--k-muted); border-bottom: 0; height: 100%; }
.sl-cols--dense .k-col.sl-col--unknown { border-width: 0; background: repeating-linear-gradient(180deg, var(--k-divider) 0 4px, transparent 4px 8px); }
.sl-sw-unknown { background: transparent; border: 1px dashed var(--k-muted); }
.sl-hbar-unknown { background: repeating-linear-gradient(90deg, var(--k-track) 0 6px, transparent 6px 10px); }
.sl-positive { color: var(--k-success); }
.sl-caution.k-list-value, .sl-positive.k-list-value { font-variant-numeric: tabular-nums; }

/* Weekly consistency dot strips */
.sl-dotstrips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sl-dotstrip { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sl-dotstrip-title { margin: 0; font-size: var(--k-fs-13); font-weight: 600; letter-spacing: 0; }
.sl-dotstrip-axis, .sl-dotstrip-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 72px; align-items: center; gap: 8px; }
.sl-dotstrip-axis { font-size: var(--k-fs-10-5); color: var(--k-muted); }
.sl-dotstrip-scale { display: flex; justify-content: space-between; }
.sl-dotstrip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sl-dotstrip-day { font-size: var(--k-fs-12); color: var(--k-text-2); }
.sl-dotstrip-track { position: relative; height: 14px; border-bottom: 1px solid var(--k-divider); }
.sl-dot { position: absolute; top: 3px; left: var(--sl-x, 50%); width: 9px; height: 9px; margin-left: -4px; background: var(--k-app); border-radius: var(--k-round); }
.sl-dot--unknown { display: none; }
.sl-dotstrip-time { font-size: var(--k-fs-12); text-align: right; }

@container k-page (max-width: 720px) {
  .sl-insights .k-head { padding: 20px 16px; }
  .sl-insights .k-block.sl-stat-cell, .sl-insights .k-block.sl-chart-block { padding: 18px 16px; }
  .sl-dotstrips { grid-template-columns: minmax(0, 1fr); }
}

/* ─────────────────────────────────────────────── Library (1c), player (1d), Studio */
.sl-library-filters { gap: 14px; }
.sl-library-search .k-field { max-width: 560px; }
.sl-chips-sm .k-chip { min-height: 36px; padding: 6px 12px; font-size: var(--k-fs-13); }
.sl-library-cards .k-cards { gap: 12px; }
.sl-library-cards .k-card { min-height: 100%; }
.sl-library-cards .k-card .k-tag { margin-top: 2px; }
.sl-player-page .k-block.sl-player-block { padding: 22px 28px; }
@container k-page (max-width: 720px) {
  .sl-player-page .k-block.sl-player-block { padding: 18px 16px; }
}
.sl-player-played { font-size: var(--k-fs-12); color: color-mix(in srgb, var(--k-on-app) 92%, var(--k-app-deep)); }
.sl-player-played:empty { display: none; }
.sl-script { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.sl-row:empty { display: none; }
.sl-tag-on-deep { background: color-mix(in srgb, var(--k-on-app) 16%, transparent); color: var(--k-on-app); }
.sl-mixer { display: flex; flex-direction: column; border-top: 1px solid var(--k-divider); }
.sl-slot {
  display: grid; grid-template-columns: 28px minmax(0, 1.1fr) minmax(0, 1.4fr) auto; align-items: end; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--k-divider);
}
.sl-slot--quiet .sl-slot-n { background: transparent; color: var(--k-muted); }
.sl-slot-n {
  display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 8px; font-size: var(--k-fs-12); font-weight: 800;
  border: 2px solid var(--k-app-deep); background: var(--k-app-deep); color: var(--k-on-app); border-radius: var(--k-round);
}
.sl-slot .k-btn { min-height: 44px; }
.sl-range-row { flex-wrap: nowrap; min-height: 44px; }
.sl-range-row .k-range { flex: 1 1 auto; }
.sl-range-row .k-range-value { width: 44px; text-align: right; }
.sl-master { padding-top: 14px; }
@container k-page (max-width: 720px) {
  .sl-slot { grid-template-columns: 28px minmax(0, 1fr); }
  .sl-slot .sl-slot-volume, .sl-slot .k-btn { grid-column: 2; }
  .sl-slot .k-btn { justify-self: start; }
}

/* ─────────────────────────────────────────────── Schedule (1e) */
.sl-week .k-week-day { min-height: 0; padding-bottom: 10px; }
.sl-week .k-week-item { min-height: 52px; }
.sl-week .sl-week-locked { border-top-color: var(--k-app-deep); background: var(--k-app-tint); }
.sl-week .sl-week-conflict { border-top-color: var(--k-caution); }
.sl-week .sl-week-empty { background: transparent; border-top: 2px dashed var(--k-divider); color: var(--k-text-body); }
.sl-week .sl-week-empty .k-week-item-title { font-weight: 600; }
/* Heads name the night ("Wed → Thu  8"), so keep the pair on one line and,
   on the phone scroller, give each column room for it (kit default 640px). */
.sl-week .k-week-head b { white-space: nowrap; }
@container k-page (max-width: 720px) {
  .sl-week.k-week { min-width: 700px; }
}
.sl-debt-cols { gap: 3px; }
.sl-debt-cols .k-col { background: var(--k-c, var(--k-caution)); }
.sl-debt-cols .k-col.sl-col--unknown { background: transparent; }
.sl-sw-caution { background: var(--k-caution); }
.sl-subhead { font-size: var(--k-fs-17); font-weight: 800; }
.k-table tbody th {
  text-align: left; text-transform: none; letter-spacing: 0; font-size: inherit; font-weight: 600; white-space: normal;
  color: inherit; padding: var(--k-space-2); border-bottom: 1px solid var(--k-divider); vertical-align: middle;
}

/* ─────────────────────────────────────────────── Settings (1f) */
.sl-mono { font-family: var(--k-font-mono); }
.k-dialog .k-list { margin-top: 4px; }
/* Keep visually-hidden captions and labels inside scrolling tables from widening the page. */
.k-table-wrap, .k-scroll-x, .k-block { position: relative; }
.sl-diary-table .k-table td:first-child { white-space: nowrap; }
.sl-kpis-sm .k-kpi-value { font-size: var(--k-fs-20); }

/* Touch: app-built compact controls reach 44px. */
@media (pointer: coarse) {
  .sl-details summary { min-height: 44px; }
  .sl-panel-link, .sl-table-link, .k-block-meta a { display: inline-flex; align-items: center; min-height: 44px; }
  .sl-checkbox { width: 24px; height: 24px; }
}

/* Insights: on a phone the 3-month chart drops the dated tick just before
   the newest one, which would otherwise run into it ("Sep 17Oct 1"). */
@media (max-width: 600px) {
  .sl-cols-labels .sl-tick--near-end { visibility: hidden; }
}

/* Print (clinician summary from Insights): only the report content.
   The kit hides the bar, head actions and form actions; the app hides its
   own chrome, buttons, toasts, the status banner, mini-player and overlays. */
.sl-print-only { display: none; }
@media print {
  .no-print, .sl-toasts, .sl-mini, .sl-status, .sl-dim, .sl-alarm,
  .k-btn, .k-seg, .k-btn-group { display: none !important; }
  .sl-print-only { display: inline; }
}