/* Keel Mind — app-only components on the Keel UI kit (./keel/keel-ui.css).
   Everything here uses kit tokens (var(--k-*)): Archivo, square corners, 2px rules,
   flush-left labels, Mind vivid/deep/tint, Ocean primary actions. No inline styles
   anywhere: dynamic sizes come in through --k-w (data-k-w / setW()). */

#main { display: block; min-height: 60vh; }
#main:focus { outline: none; }
.m-view { display: block; }
/* The dock is fixed to the bottom; its real height (it wraps to two rows on phones)
   arrives as --m-dock-h from a ResizeObserver in app.js. */
body.has-dock #main { padding-bottom: calc(var(--m-dock-h, 72px) + var(--k-space-4)); }

.m-eyebrow {
  font-size: var(--k-fs-11); letter-spacing: var(--k-tracking-label); text-transform: uppercase; color: var(--k-muted);
}
.m-pad { display: block; padding: var(--k-space-3) var(--k-space-5); }
.m-pre { white-space: pre-line; }
.m-more { display: flex; padding-top: var(--k-space-2); }
.m-inline { display: flex; gap: var(--k-space-2); align-items: stretch; }
.m-inline > .k-select, .m-inline > .k-input { flex: 1; min-width: 0; }
.m-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.k-block.m-hidden-empty:empty { display: none; }
.m-row-actions { display: flex; flex-wrap: wrap; gap: var(--k-space-1); }
.m-table-link { font-weight: 800; color: var(--k-link-strong); }
.m-table-link:hover { color: var(--k-link-hover); }
.m-strip-link { font-size: var(--k-fs-13); color: var(--k-link-strong); }
.m-confirm { gap: var(--k-space-3); }
.m-confirm-title { margin: 0; font-size: var(--k-fs-20); font-weight: 800; letter-spacing: -0.015em; }
.m-note-text { white-space: pre-line; }

/* Optional scores: skipped = unknown, never zero */
.m-score .k-label output { font-weight: 800; color: var(--k-text); }
.m-score.is-skipped .k-label output { font-weight: 400; color: var(--k-muted); }
.m-score.is-skipped .k-range { --k-w: 0% !important; }
.m-scale { display: flex; justify-content: space-between; font-size: var(--k-fs-11); color: var(--k-muted); }
.m-skip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: var(--k-fs-13); color: var(--k-text-2); cursor: pointer; }
.m-skip input, .m-radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--k-app-deep); }

/* ── Today (Keel Apps A · 3a) ─────────────────────────────────────────── */
.m-hero { display: grid; grid-template-columns: 7fr 5fr; border-bottom: 2px solid var(--k-divider); }
.m-hero-main {
  display: flex; flex-direction: column; gap: var(--k-space-4); padding: var(--k-space-8);
  background: var(--k-app-tint); border-right: 2px solid var(--k-divider); min-width: 0;
}
.m-hero-main h1 { margin: 0; font-size: 34px; letter-spacing: var(--k-tracking-h1); line-height: 1.1; }
.m-moods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 2px solid var(--k-divider); }
.m-mood {
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; min-height: 72px;
  padding: var(--k-space-3); border: 0; border-right: 1px solid var(--k-divider); background: transparent;
  color: var(--k-text); font-family: var(--k-font); font-size: var(--k-fs-14); font-weight: 600; text-align: left; cursor: pointer;
  transition: background-color var(--k-ease);
}
.m-mood:last-child { border-right: 0; }
.m-mood:hover { background: var(--k-hover-wash); }
.m-mood:focus-visible { outline: 2px solid var(--k-focus); outline-offset: -2px; }
.m-mood[aria-checked="true"] { background: var(--k-app-deep); color: var(--k-on-app); }
.m-mood[aria-checked="true"]:focus-visible { outline-offset: 2px; box-shadow: inset 0 0 0 2px var(--k-on-app); }
.m-mood-n { font-size: var(--k-fs-11); font-weight: 400; }
.m-mood-reply { margin: 0; font-size: var(--k-fs-14); color: var(--k-text-2); }
.m-hero-side { display: flex; flex-direction: column; gap: var(--k-space-3); padding: var(--k-space-8); background: var(--k-raised); min-width: 0; }
.m-hero-side .k-state { padding: 0; }
.m-suggest-title { font-size: var(--k-fs-24); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.m-suggest-body { font-size: var(--k-fs-14); color: var(--k-text-2); }
.m-start { align-self: flex-start; min-width: 180px; }
.m-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 2px solid var(--k-divider); }
.m-strip:empty { display: none; }
.m-strip-cell {
  display: flex; flex-direction: column; gap: var(--k-space-2); min-width: 0;
  padding: var(--k-space-6) var(--k-space-8); border-right: 1px solid var(--k-divider);
}
.m-strip-cell:last-child { border-right: 0; }
.m-strip-title { font-size: var(--k-fs-17); font-weight: 800; line-height: 1.3; color: var(--k-text); text-decoration: none; }
a.m-strip-title:hover { color: var(--k-text); text-decoration: underline; }
.m-strip-cell .k-progress { margin-top: 4px; max-width: 340px; background: var(--k-surface); }
.m-strip-text { font-size: var(--k-fs-13); color: var(--k-text-2); }
.m-checkin-form .k-note { margin: 0; }
.m-checkin-row { flex-wrap: wrap; align-items: flex-start; }
#today-grid.is-offline > #today-checkin { grid-column: 1 / -1; }

@container k-page (max-width: 720px) {
  .m-hero { grid-template-columns: minmax(0, 1fr); }
  .m-hero-main { padding: var(--k-space-6) var(--k-space-4); border-right: 0; border-bottom: 2px solid var(--k-divider); }
  .m-hero-main h1 { font-size: var(--k-fs-28); }
  .m-mood { padding: 10px 8px; font-size: var(--k-fs-13); }
  .m-hero-side { padding: var(--k-space-6) var(--k-space-4); }
  .m-strip { grid-template-columns: minmax(0, 1fr); }
  .m-strip-cell { padding: 18px var(--k-space-4); border-right: 0; border-bottom: 1px solid var(--k-divider); }
  .m-strip-cell:last-child { border-bottom: 0; }
}

/* ── Breathing session (Mind Routes · 1c) ─────────────────────────────── */
.m-breath-player { display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: var(--k-space-3) var(--k-space-6); align-items: start; }
.m-breath-main { display: flex; flex-direction: column; gap: var(--k-space-3); min-width: 0; }
.m-breath-player > .k-player-progress, .m-breath-player > .k-player-times, .m-breath-player > .k-player-controls { grid-column: 1 / -1; }
.m-breath-player > .m-breath-stop { grid-column: 1 / -1; justify-self: start; min-height: 44px; }
.m-breath-cue { margin: 0; font-size: var(--k-fs-14); color: color-mix(in srgb, var(--k-on-app) 92%, var(--k-app-deep)); }
.m-pacer { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.m-pacer-svg { display: block; width: 100%; height: auto; }
.m-pacer-ring { fill: none; stroke: color-mix(in srgb, var(--k-on-app) 35%, transparent); stroke-width: 2; }
.m-pacer-circle { fill: color-mix(in srgb, var(--k-on-app) 20%, transparent); stroke: var(--k-on-app); stroke-width: 2; }
.m-pacer.is-idle .m-pacer-circle { stroke-dasharray: 4 6; }
.m-pacer-count { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--k-fs-28); font-weight: 800; }
@container k-page (max-width: 720px) {
  .m-breath-player { grid-template-columns: minmax(0, 1fr) 104px; gap: var(--k-space-3); }
  .m-pacer-count { font-size: var(--k-fs-20); }
}

/* Phone: the player row keeps the design's three controls on one line (−15s · Play · +15s);
   the play button gives up width first. The dialog player is outside .k-page, hence the media query. */
@container k-page (max-width: 720px) {
  .k-player-controls { flex-wrap: nowrap; }
  .k-player-controls .k-player-play { flex: 1 1 auto; min-width: 0; }
  .k-player-controls .k-player-skip { flex: 0 0 auto; }
}
@media (max-width: 720px) {
  .m-player-dlg .k-player-controls { flex-wrap: nowrap; }
  .m-player-dlg .k-player-play { flex: 1 1 auto; min-width: 0; }
  .m-player-dlg .k-player-skip { flex: 0 0 auto; }
}

/* ── Timer ────────────────────────────────────────────────────────────── */
.m-timer-clock { font-size: var(--k-fs-64); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }

/* ── In-the-moment tools ──────────────────────────────────────────────── */
.m-flow { display: flex; flex-direction: column; gap: var(--k-space-3); }
.m-flow-title { margin: 0; font-size: var(--k-fs-22); font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; }
.m-step-count { font-size: var(--k-fs-64); font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: var(--k-app-deep); }
.m-observations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k-space-2); }
.m-pause-count { font-variant-numeric: tabular-nums; }
.m-pause-cue { font-weight: 600; font-size: var(--k-fs-17); }
.m-radios { display: flex; flex-direction: column; }
.m-radio { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--k-fs-14); border-bottom: 1px solid var(--k-divider); cursor: pointer; }
@container k-page (max-width: 720px) { .m-observations { grid-template-columns: minmax(0, 1fr); } }

/* ── Mixer ────────────────────────────────────────────────────────────── */
.m-layers { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--k-space-3); }
.m-layer { display: flex; flex-direction: column; gap: var(--k-space-2); padding: var(--k-space-4); background: var(--k-raised); border-top: 2px solid var(--k-app); min-width: 0; }
.m-layer.is-silent { border-top-color: var(--k-divider); }
.m-layer-name { font-size: var(--k-fs-15); font-weight: 800; }
.m-layer.is-silent .m-layer-name::after { content: " · silent"; font-weight: 400; color: var(--k-muted); }

/* ── Program detail (1e) ─────────────────────────────────────────────── */
.m-days .k-step { align-items: center; }
.m-days .k-step-right { min-width: 56px; text-align: right; }

/* ── Progress (1f): axis labels are sparse (every 4th bar), so let each one run over its blank neighbours */
#view-progress .k-cols-labels span { overflow: visible; }

/* ── Journal list + detail (1g) ───────────────────────────────────────── */
.m-entry-list { border-top: 1px solid var(--k-divider); }
.m-entry-list > li { list-style: none; }
.m-entry-row { padding-inline: var(--k-space-2); border-left: 3px solid transparent; }
.m-entry-row[aria-current] { background: var(--k-raised); border-left-color: var(--k-text); }
.m-journal-search { margin-bottom: var(--k-space-2); }
.m-vault-link { display: inline-block; margin-top: var(--k-space-3); }
.m-entry-actions { margin-top: var(--k-space-2); }
.m-narrow-only { display: none; }
@container k-page (max-width: 720px) {
  /* Phone: an entry opened from the list shows first, with a way back to all entries. */
  .m-journal.has-entry #journal-detail { order: -1; }
  .m-journal.has-entry .m-narrow-only { display: inline-flex; }
}

/* ── Journal editor (Keel Apps A · 3b) ───────────────────────────────── */
.m-editor { display: grid; grid-template-columns: 300px minmax(0, 1fr) 280px; min-height: 520px; border-bottom: 2px solid var(--k-divider); }
.m-editor-nav { border-right: 2px solid var(--k-divider); min-width: 0; }
.m-editor-nav-head { display: flex; align-items: center; justify-content: space-between; gap: var(--k-space-2); padding: var(--k-space-4) var(--k-space-5); border-bottom: 2px solid var(--k-divider); }
.m-editor-nav .m-entry-list { border-top: 0; }
.m-editor-nav .m-entry-row { min-height: 0; padding: var(--k-space-3) var(--k-space-5); }
.m-editor-nav .k-list-title { font-size: var(--k-fs-13-5); font-weight: 800; }
.m-editor-nav .k-list-meta { font-size: var(--k-fs-12); }
.m-editor-nav .k-tag { display: none; }
.m-editor-nav .k-state { padding: var(--k-space-5); }
.m-editor-main { display: flex; flex-direction: column; gap: 14px; padding: var(--k-space-8) 40px; border-right: 2px solid var(--k-divider); min-width: 0; margin: 0; }
.m-editor-meta { margin: 0; font-size: var(--k-fs-12); color: var(--k-muted); }
.m-editor-meta .k-tag { padding: 1px 6px; }
.m-title-input {
  width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--k-text);
  font: 800 30px/1.1 var(--k-font); letter-spacing: -0.02em;
}
.m-title-input::placeholder { color: var(--k-muted); opacity: 1; }
.m-title-input:focus-visible { outline-offset: 4px; }
.m-prompt {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--k-space-2);
  padding: var(--k-space-3) 14px; background: var(--k-surface); font-size: var(--k-fs-13-5);
}
.m-entry-text { min-height: 220px; font-size: var(--k-fs-15); line-height: 1.6; background: var(--k-raised); }
.m-tags { display: flex; flex-direction: column; gap: var(--k-space-2); }
.m-editor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.m-saved { margin-left: auto; font-size: var(--k-fs-12); color: var(--k-muted); }
.m-privacy-line { margin: 0; }
.m-editor-aside { display: flex; flex-direction: column; gap: var(--k-space-3); padding: var(--k-space-6); min-width: 0; }
.m-aside-text { font-size: var(--k-fs-13-5); }
@container k-page (max-width: 900px) {
  .m-editor { grid-template-columns: minmax(0, 1fr); }
  .m-editor-main { order: 1; padding: var(--k-space-6) var(--k-space-4); border-right: 0; border-bottom: 2px solid var(--k-divider); }
  /* Phone: the crisis path stays one tap away, so the aside sits above the editor as one compact row. */
  .m-editor-aside {
    order: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--k-space-3);
    padding: var(--k-space-3) var(--k-space-4); border-bottom: 2px solid var(--k-divider); background: var(--k-app-tint);
  }
  .m-editor-aside > .k-btn { grid-column: 2; grid-row: 1 / span 2; }
  .m-editor-aside .m-aside-text { font-size: var(--k-fs-12-5); }
  .m-editor-nav { order: 3; border-right: 0; max-height: 360px; overflow-y: auto; }
  .m-title-input { font-size: 26px; }
}

/* ── Help now (1h desktop · 3c phone) ─────────────────────────────────── */
.m-help-mobile { display: none; }
.m-numbers { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-2); margin-top: var(--k-space-1); }
.m-numbers-note { flex-basis: 100%; font-size: var(--k-fs-13); }
.m-help-desktop .k-note .k-btn-group { margin-top: var(--k-space-1); }
.m-help-desktop .k-note .k-btn { margin-top: 0; }
/* The kit's note buttons inherit the note's text colour (.k-note .k-btn), which on a
   filled danger button gives ~2:1 contrast. Keep the 911 button filled and give it
   the kit's on-status text in every state. */
.k-note .m-numbers .k-btn-danger,
.k-note .m-numbers .k-btn-danger:hover { color: var(--k-on-status); border-color: var(--k-error); }
.k-note .m-numbers .k-btn-danger:hover { background: color-mix(in srgb, var(--k-error) 86%, #000); }
.k-note .m-numbers .k-btn-danger:active { background: color-mix(in srgb, var(--k-error) 74%, #000); }
.m-help-mobile {
  --k-focus: #f8f6f1;
  flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--k-ink); color: var(--k-shell);
}
.m-help-bar {
  display: flex; align-items: center; gap: 10px; padding: 14px var(--k-space-4);
  border-bottom: 2px solid color-mix(in srgb, var(--k-shell) 25%, transparent);
}
.m-help-mark { width: 28px; height: 28px; }
.m-help-word { font-weight: 800; font-size: 18px; line-height: 1; letter-spacing: -0.03em; }
.m-help-sep { width: 2px; height: 16px; background: color-mix(in srgb, var(--k-shell) 30%, transparent); }
.m-help-dot { width: 8px; height: 8px; border-radius: var(--k-round); background: var(--k-mind-light); }
.m-help-name { font-weight: 600; font-size: var(--k-fs-14); }
.m-help-close { margin-left: auto; min-height: 44px; }
.m-help-body { display: flex; flex: 1; flex-direction: column; gap: 14px; padding: var(--k-space-6) var(--k-space-4); }
.m-help-h1 { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: var(--k-tracking-h1); line-height: 1.08; color: var(--k-shell); }
.m-help-big { min-height: 56px; padding: 0 var(--k-space-4); font-size: 16px; }
.m-help-outline { border: 2px solid var(--k-shell); color: var(--k-shell); }
.m-help-outline:hover { color: var(--k-shell); background: color-mix(in srgb, var(--k-shell) 12%, transparent); }
.m-help-text-link { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; margin-top: -8px; color: var(--k-shell); font-size: var(--k-fs-14); }
.m-help-text-link:hover { color: var(--k-shell); }
.m-help-rule { height: 2px; margin: 6px 0; background: color-mix(in srgb, var(--k-shell) 25%, transparent); }
.m-help-label { font-size: var(--k-fs-11); letter-spacing: var(--k-tracking-label); text-transform: uppercase; color: color-mix(in srgb, var(--k-shell) 82%, var(--k-ink)); }
.m-help-tool { min-height: 52px; }
.m-help-foot { margin-top: auto; padding-top: var(--k-space-6); font-size: var(--k-fs-12-5); line-height: 1.55; color: color-mix(in srgb, var(--k-shell) 82%, var(--k-ink)); }
@media (max-width: 720px) {
  body[data-route="help-now"] #keel-bar,
  body[data-route="help-now"] .m-help-desktop,
  body[data-route="help-now"] .m-dock { display: none; }
  body[data-route="help-now"] .m-help-mobile { display: flex; }
  body[data-route="help-now"] { background: var(--k-ink); }
}

/* ── Now-playing dock ─────────────────────────────────────────────────── */
.m-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--k-bg); color: var(--k-text); border-top: 2px solid var(--k-divider);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.m-dock-progress { position: relative; display: block; height: 3px; background: var(--k-track); }
.m-dock-progress > span { position: absolute; left: 0; top: 0; bottom: 0; width: var(--k-w, 0%); background: var(--k-app-deep); }
.m-dock-row { display: flex; align-items: center; gap: 10px; padding: var(--k-space-2) var(--k-space-6); }
.m-dock-toggle { min-height: 44px; min-width: 88px; }
.m-dock-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.m-dock-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--k-fs-14); }
.m-dock-time { font-size: var(--k-fs-12); color: var(--k-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-dock-row .k-btn { min-height: 44px; }
@media (max-width: 720px) {
  .m-dock-row { padding: var(--k-space-2) var(--k-space-4); gap: 6px; }
  .m-dock-toggle { min-width: 72px; }
}
/* Phones: title + time on their own line (title ellipsizes across the full width),
   the four controls on a second row. */
@media (max-width: 480px) {
  .m-dock-row { flex-wrap: wrap; row-gap: var(--k-space-1); }
  .m-dock-info { order: -1; flex: 1 1 100%; flex-direction: row; align-items: baseline; gap: var(--k-space-2); }
  .m-dock-title { flex: 1 1 auto; min-width: 0; }
  .m-dock-time { flex: none; }
  .m-dock-row .k-btn { flex: 1 1 auto; justify-content: center; text-align: center; padding-left: var(--k-space-2); padding-right: var(--k-space-2); }
  .m-dock-toggle { min-width: 64px; }
}
@media (max-width: 360px) {
  .m-dock-row { column-gap: var(--k-space-1); }
  .m-dock-row .k-btn { padding-left: 6px; padding-right: 6px; }
  .m-dock-toggle { min-width: 0; }
}

/* ── Player dialog ────────────────────────────────────────────────────── */
.m-player-dlg { width: min(640px, calc(100% - 32px)); }
.m-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: var(--k-space-3); }
.m-dlg-head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--k-space-2); }
.m-dlg-head-actions .k-btn { min-height: 44px; }
.m-session-player { gap: var(--k-space-2); padding: var(--k-space-5); }
.m-session-instruction { font-size: var(--k-fs-20); font-weight: 600; line-height: 1.4; letter-spacing: 0; min-height: 2.8em; }
.m-session-instruction.is-silence { font-style: italic; }
.m-player-options { display: flex; flex-direction: column; gap: var(--k-space-1); }
.m-outline > summary { display: flex; align-items: center; min-height: 44px; font-size: var(--k-fs-13-5); font-weight: 600; cursor: pointer; }
.m-outline .k-steps { max-height: 240px; overflow-y: auto; }
.m-confirm-zone { display: flex; flex-direction: column; align-items: flex-start; gap: var(--k-space-3); }
.m-confirm-zone > div { align-self: stretch; }

/* ── Toasts ───────────────────────────────────────────────────────────── */
.m-toasts { pointer-events: none; position: fixed; left: var(--k-space-4); bottom: var(--k-space-4); z-index: 1100; display: flex; flex-direction: column; gap: var(--k-space-2); max-width: min(440px, calc(100vw - 32px)); }
body.has-dock .m-toasts { bottom: calc(var(--m-dock-h, 72px) + var(--k-space-3)); }
.m-toast {
  padding: var(--k-space-3) var(--k-space-4); font-size: var(--k-fs-14); line-height: 1.45;
  background: var(--k-tone-bg); color: var(--k-tone-fg); border-left: 4px solid var(--k-tone-edge); box-shadow: var(--k-shadow-md);
  transition: opacity 0.3s ease;
}
.m-toast.is-leaving { opacity: 0; }

@media (pointer: coarse) {
  .m-skip { min-height: 44px; }
  .m-table-link, .m-strip-link, .m-vault-link, a.m-strip-title { display: inline-flex; align-items: center; min-height: 44px; }
  .m-table-link { min-width: 44px; padding-right: var(--k-space-2); }
}
@media print {
  .m-dock, .m-toasts, .m-help-mobile { display: none !important; }
}

/* Programmatic focus on page headings (route changes) stays invisible; keyboard focus on controls is unchanged. */
h1[tabindex="-1"]:focus, [data-m-route-focus]:focus { outline: none; }
.m-explore-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--k-space-3) var(--k-space-6); }
.m-checkin-row .m-row-actions { margin-top: var(--k-space-1); }