/* ══════════════════════════════════════════════════════════════════════════
   Kenki v2 — Design System
   Based on Claude Design handoff (2026-04-23)
   "Signature ring · Precision stat cards · Editorial voice · Quiet copywriting"
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts (add JetBrains Mono for diagnostic/timestamp moments) ─────── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  /* Alias the existing Prism tokens under the v2 names used in the handoff */
  --k-copper:       #C45E3A;
  --k-copper-dark:  #A34A2C;
  --k-copper-light: #D4816A;
  --k-sage:         #7A8B6F;
  --k-teal:         #4A9B8E;
  --k-gold:         #C9A227;
  --k-ink:          #1A1614;
  --k-void:         #0F0D0B;
  --k-stone:        #2C2824;
  --k-deep-stone:   #231F1C;
  --k-parchment:    #F5F0E8;
  --k-cream:        #FAF7F2;
  --k-sand:         #E8E0D4;
  --k-sub:          #A89B8C;
  --k-muted:        #6B5E53;
  --k-border:       #3D3530;
  --k-status-warn:  #F59E0B;
  --k-status-danger: #EF4444;
  --k-status-ok:    #7A8B6F;

  --font-display:   'Cormorant Garamond', 'Iowan Old Style', Garamond, serif;
  --font-body:      'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}

/* Make these available as the legacy names already in use */
:root {
  --ink: var(--k-ink);
  --stone: var(--k-stone);
  --deep-stone: var(--k-deep-stone);
  --parchment: var(--k-parchment);
  --prism-text: var(--k-parchment);
  --sub: var(--k-sub);
  --muted: var(--k-muted);
  --border-color: var(--k-border);
  --accent: var(--k-copper);
  --accent-light: var(--k-copper-light);
  --accent-dark: var(--k-copper-dark);
  --sage: var(--k-sage);
  --teal: var(--k-teal);
}

/* ══════════════════════════════════════════
   MOTION — Round 4 03
   Four curves, four durations
   ══════════════════════════════════════════ */
:root {
  --ease-warm:    cubic-bezier(0.34, 0.04, 0.18, 1.00);   /* default  · 240ms */
  --ease-quick:   cubic-bezier(0.40, 0.00, 0.20, 1.00);   /* ui state · 140ms */
  --ease-settle:  cubic-bezier(0.22, 0.60, 0.28, 1.00);   /* page in  · 340ms */
  --ease-breathe: ease-in-out;                            /* always-on · 2000ms alternate */

  --dur-quick:   140ms;
  --dur-warm:    240ms;
  --dur-settle:  340ms;
  --dur-breathe: 2000ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-quick: 0ms;
    --dur-warm: 0ms;
    --dur-settle: 0ms;
  }
  .k-breathe, .k-prism-glow, .k-ring-spin,
  .k-barcode-scanline, .ai-typing span { animation: none !important; }
}

/* Breath for prisms + rings */
@keyframes kBreathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}
.k-breathe {
  animation: kBreathe var(--dur-breathe) var(--ease-breathe) infinite;
}

/* Page enter */
@keyframes kPageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.k-page-in { animation: kPageIn var(--dur-settle) var(--ease-settle) both; }

/* Toast slide */
@keyframes kToastIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kToastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(8px); }
}

/* Button press default */
.k-btn, button.k-btn-primary, button.k-btn-ghost {
  transition: background var(--dur-quick) var(--ease-quick),
              transform var(--dur-quick) var(--ease-quick),
              border-color var(--dur-quick) var(--ease-quick);
}
.k-btn:active, button.k-btn-primary:active, button.k-btn-ghost:active {
  transform: scale(0.97);
}

/* Toggle transitions */
.k-toggle, .toggle-slider { transition: background var(--dur-quick) var(--ease-quick), border-color var(--dur-quick) var(--ease-quick); }
.k-toggle::after, .toggle-slider::before { transition: left var(--dur-quick) var(--ease-quick), background var(--dur-quick) var(--ease-quick), transform var(--dur-quick) var(--ease-quick); }

/* ══════════════════════════════════════════
   TYPOGRAPHY PRIMITIVES
   ══════════════════════════════════════════ */

/* Kicker label — the letter-spaced caps above titles */
.k-kicker {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--k-muted);
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1;
}
.k-kicker-copper { color: var(--k-copper-light); }
.k-kicker-sage   { color: var(--k-sage); }
.k-kicker-teal   { color: var(--k-teal); }
.k-kicker-large  { font-size: 10px; letter-spacing: 0.28em; }

/* Section title — italic serif warmth */
.k-section-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--k-parchment);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}
.k-section-title-italic { font-style: italic; }

/* Display numeral — the big serif number */
.k-display-numeral {
  font-family: var(--font-display);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--k-parchment);
}

/* Editorial copy — italic serif, narrow */
.k-editorial {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--k-sub);
  font-size: 12px;
  line-height: 1.55;
}

/* Mono timestamp / chip text */
.k-mono {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--k-muted);
}
.k-mono-small { font-size: 9px; letter-spacing: 0.06em; }

/* ══════════════════════════════════════════
   SECTION HEADER (kicker + title + action)
   ══════════════════════════════════════════ */
.k-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  gap: 12px;
}
.k-section-head .k-kicker { margin-bottom: 4px; }
.k-section-head .k-action {
  font-size: 11px;
  color: var(--k-sub);
  font-family: var(--font-body);
  text-decoration: none;
  flex-shrink: 0;
}
.k-section-head .k-action:hover { color: var(--k-parchment); }

/* ══════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════ */
.k-card {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 14px;
  padding: 16px;
  position: relative;
}
.k-card-hero {
  background: linear-gradient(180deg, var(--k-stone) 0%, var(--k-deep-stone) 100%);
  border-radius: 20px;
  padding: 22px 20px 18px;
  overflow: hidden;
}

/* Corner crosshairs decoration (for hero cards) */
.k-card-crosshairs {
  position: relative;
}
.k-card-crosshairs::before,
.k-card-crosshairs::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--k-muted);
  border-style: solid;
  border-width: 0;
  opacity: 0.8;
}
.k-card-crosshairs::before {
  top: 10px; left: 10px;
  border-top-width: 1px; border-left-width: 1px;
}
.k-card-crosshairs::after {
  bottom: 10px; right: 10px;
  border-bottom-width: 1px; border-right-width: 1px;
}

/* ══════════════════════════════════════════
   PRECISION STAT CARD
   ══════════════════════════════════════════ */
.k-stat {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 14px;
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 118px;
}
.k-stat-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.k-stat-glyph {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--k-deep-stone);
  border: 1px solid var(--k-border);
  display: grid;
  place-items: center;
  color: var(--k-sub);
  font-size: 11px;
}
.k-stat-delta {
  font-size: 9px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 3px;
}
.k-stat-delta-up   { color: var(--k-sage); }
.k-stat-delta-down { color: var(--k-copper); }
.k-stat-value-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.k-stat-value {
  font-family: var(--font-display);
  color: var(--k-parchment);
  font-size: 34px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}
.k-stat-unit {
  font-size: 12px;
  color: var(--k-sub);
  font-style: italic;
  font-family: var(--font-display);
}
.k-stat-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
}
.k-stat-label-col { display: flex; flex-direction: column; gap: 2px; }
.k-stat-sub {
  font-size: 10px;
  color: var(--k-sub);
  font-style: italic;
  font-family: var(--font-display);
  line-height: 1.3;
}

/* ══════════════════════════════════════════
   ORNAMENTS (for stat card footers)
   ══════════════════════════════════════════ */
.k-pips {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 10px;
}
.k-pips-cell {
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: var(--k-border);
}
.k-pips-cell-active {
  height: 10px;
  background: var(--k-copper);
}

.k-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}
.k-dots-cell {
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background: var(--k-border);
}
.k-dots-cell-active { background: var(--k-copper); }
.k-dots-cell-active-sage { background: var(--k-sage); }
.k-dots-cell-active-teal { background: var(--k-teal); }

/* ══════════════════════════════════════════
   HAIRLINE DIVIDER
   ══════════════════════════════════════════ */
.k-hairline {
  height: 1px;
  background: var(--k-border);
  opacity: 0.6;
  margin: 24px 0;
  border: none;
}

/* ══════════════════════════════════════════
   EDITORIAL NEWS CARD
   ══════════════════════════════════════════ */

/* Inline "scan barcode" link used inside Add-medication and
   Add-supplement forms. Quiet — italic Cormorant + copper-light,
   no button chrome — so it sits right next to the field label
   without competing visually with the primary input. */
.k-scan-link {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 12px;
  color: var(--k-copper-light, #D4816A);
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.k-scan-link:hover,
.k-scan-link:focus-visible {
  color: var(--k-parchment, #F5F0E8);
  outline: none;
}
.k-scan-link:active { color: var(--k-copper, #C45E3A); }

/* Category filter chips for the dashboard "Reading" card. Horizontally
   scrolling row so 6 categories + a "More" link fit on mobile without
   wrapping. Copper-tinted active state to match dashboard tone.
   max-width clamps to the host card so the chips don't push the whole
   card past the viewport on narrow screens. */
.k-news-chips {
  display: flex;
  gap: 6px;
  margin: 6px 0 14px;
  padding-bottom: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
  min-width: 0;
}
.k-news-chips::-webkit-scrollbar { display: none; }
.k-news-chip {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid var(--k-border, rgba(245,240,232,0.08));
  background: transparent;
  color: var(--k-sub, #A89B8C);
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.k-news-chip:hover { border-color: var(--k-copper-light, #D4816A); color: var(--k-parchment, #F5F0E8); }
.k-news-chip.is-active {
  background: rgba(196, 94, 58, 0.12);
  border-color: var(--k-copper, #C45E3A);
  color: var(--k-parchment, #F5F0E8);
}

.k-news-featured {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}
.k-news-featured:hover { border-color: var(--k-copper); }
.k-news-featured-plate {
  height: 120px;
  background:
    repeating-linear-gradient(135deg, var(--k-deep-stone) 0 14px, var(--k-stone) 14px 28px),
    linear-gradient(180deg, rgba(196,94,58,0.18), rgba(122,139,111,0.10));
  position: relative;
  border-bottom: 1px solid var(--k-border);
}
.k-news-featured-plate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 40%, rgba(196,94,58,0.20), transparent 50%);
}
.k-news-featured-kicker {
  position: absolute;
  bottom: 12px;
  left: 14px;
  font-size: 9px;
  color: var(--k-parchment);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
  font-family: var(--font-mono);
  z-index: 1;
}
.k-news-featured-body { padding: 14px 16px 16px; }
.k-news-featured-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--k-parchment);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.k-news-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  font-size: 10px;
  color: var(--k-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.k-news-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 3px;
  background: var(--k-muted);
}

.k-news-row {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--k-border);
  text-decoration: none;
  color: inherit;
}
.k-news-row:last-child { border-bottom: none; }
.k-news-row-plate {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  flex-shrink: 0;
  background: repeating-linear-gradient(135deg, var(--k-deep-stone) 0 6px, var(--k-stone) 6px 12px);
  border: 1px solid var(--k-border);
}
.k-news-row-body { flex: 1; min-width: 0; }
.k-news-row-title {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--k-parchment);
  line-height: 1.3;
  font-weight: 400;
  margin-top: 3px;
}

/* ══════════════════════════════════════════
   NOTIFICATION ITEM
   ══════════════════════════════════════════ */
.k-notif {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--k-border);
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
}
.k-notif:last-child { border-bottom: none; }
.k-notif-glyph {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--k-deep-stone);
  border: 1px solid var(--k-border);
  display: grid;
  place-items: center;
  font-size: 12px;
  flex-shrink: 0;
}
.k-notif-glyph-copper { color: var(--k-copper); }
.k-notif-glyph-sage   { color: var(--k-sage); }
.k-notif-glyph-teal   { color: var(--k-teal); }
.k-notif-body { flex: 1; min-width: 0; }
.k-notif-title {
  font-size: 12.5px;
  color: var(--k-parchment);
  line-height: 1.45;
  font-weight: 400;
}
.k-notif-time {
  font-size: 10px;
  color: var(--k-muted);
  margin-top: 3px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.k-notif-dot {
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: var(--k-copper);
  margin-top: 10px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   "THREE QUIET THINGS" — today module
   ══════════════════════════════════════════ */
.k-today {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 14px;
  padding: 4px;
}
.k-today-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--k-border);
  text-decoration: none;
  color: inherit;
}
.k-today-row:last-child { border-bottom: none; }
.k-today-check {
  width: 18px;
  height: 18px;
  border-radius: 9px;
  border: 1px solid var(--k-border);
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--k-ink);
  font-size: 10px;
  flex-shrink: 0;
}
.k-today-check-done {
  border-color: var(--k-copper);
  background: var(--k-copper);
}
.k-today-text {
  font-size: 13px;
  color: var(--k-parchment);
  font-weight: 400;
}
.k-today-text-done {
  color: var(--k-sub);
  text-decoration: line-through;
}
.k-today-meta {
  font-size: 10px;
  color: var(--k-muted);
  font-style: italic;
  font-family: var(--font-display);
  margin-top: 2px;
}
.k-today-glyph {
  font-size: 12px;
  color: var(--k-muted);
}

/* ══════════════════════════════════════════
   ASSISTANT — quick prompts + message bubbles
   ══════════════════════════════════════════ */
.k-prompt {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: border-color 0.2s;
  width: 100%;
}
.k-prompt:hover { border-color: var(--k-copper-light); }
.k-prompt-kicker {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--k-copper-light);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 5px;
  display: block;
}
.k-prompt-text {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--k-parchment);
  font-style: italic;
  line-height: 1.3;
}

.k-msg {
  display: flex;
  flex-direction: column;
  max-width: 84%;
  margin-bottom: 14px;
}
.k-msg-user { align-self: flex-end; align-items: flex-end; }
.k-msg-kenki { align-self: flex-start; align-items: flex-start; }
.k-msg-kenki-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--k-muted);
}
.k-msg-kenki-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
}
.k-msg-bubble-user {
  background: var(--k-deep-stone);
  border: 1px solid var(--k-border);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--k-sub);
  line-height: 1.55;
  font-family: var(--font-body);
}
.k-msg-bubble-kenki {
  font-size: 13px;
  color: var(--k-parchment);
  line-height: 1.55;
  font-family: var(--font-display);
  font-style: italic;
  padding: 0;
  letter-spacing: 0.005em;
}
.k-msg-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.k-msg-tool-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  max-width: 100%;
  border: 1px solid rgba(124, 150, 122, 0.42);
  border-radius: 999px;
  background: rgba(124, 150, 122, 0.14);
  color: var(--k-sub);
  font-family: var(--font-mono);
  font-size: 10px;
  font-style: normal;
  line-height: 1.2;
  padding: 4px 8px;
}
.k-msg-tool-chip--err {
  border-color: rgba(173, 113, 80, 0.48);
  background: rgba(173, 113, 80, 0.16);
  color: var(--k-parchment);
}

.k-composer {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 18px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.k-composer-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--k-parchment);
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  padding: 4px 2px;
  resize: none;
  min-height: 20px;
}
.k-composer-input::placeholder {
  color: var(--k-sub);
  font-style: italic;
}
.k-composer-foot {
  display: flex;
  align-items: center;
  gap: 8px;
}
.k-composer-chip {
  display: flex;
  gap: 6px;
  align-items: center;
  background: var(--k-deep-stone);
  border: 1px solid var(--k-border);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 10px;
  color: var(--k-sub);
  font-family: var(--font-mono);
}
.k-composer-chip-dot {
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background: var(--k-sage);
}
.k-composer-send {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background: var(--k-copper);
  border: none;
  color: var(--k-parchment);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.k-composer-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* ══════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════ */
.k-btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
}
.k-btn-primary {
  background: var(--k-copper);
  color: var(--k-parchment);
}
.k-btn-primary:hover { background: var(--k-copper-dark); }
.k-btn-ghost {
  background: transparent;
  color: var(--k-sub);
  border-color: var(--k-border);
}
.k-btn-ghost:hover { color: var(--k-parchment); border-color: var(--k-copper); }

/* ══════════════════════════════════════════
   MONTHLY HEATMAP
   ══════════════════════════════════════════ */
.k-heatmap {
  display: grid;
  grid-template-columns: repeat(31, 1fr);
  gap: 2px;
  margin-bottom: 14px;
}
.k-heatmap-cell {
  height: 30px;
  border-radius: 2px;
}
.k-heatmap-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--k-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
.k-heatmap-stats {
  margin-top: 14px;
  display: flex;
  gap: 14px;
}
.k-heatmap-stat { flex: 1; }

/* ══════════════════════════════════════════
   REMINDERS — named groups, time chips
   ══════════════════════════════════════════ */
.k-group-head {
  margin: 28px 0 12px;
  padding-left: 0;
}
.k-group-head .k-kicker { margin-bottom: 4px; }
.k-group-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--k-sub);
  letter-spacing: 0.01em;
  margin-top: 2px;
}
.k-time-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--k-deep-stone);
  border: 1px solid var(--k-border);
  color: var(--k-parchment);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.k-time-chip-copper { border-color: rgba(196,94,58,0.4); color: var(--k-copper-light); }
.k-time-chip-sage   { border-color: rgba(122,139,111,0.4); color: var(--k-sage); }
.k-time-chip-teal   { border-color: rgba(74,155,142,0.4); color: var(--k-teal); }

/* 7-day pill row */
.k-week-pills {
  display: flex;
  gap: 3px;
}
.k-week-pill {
  width: 14px;
  height: 6px;
  border-radius: 3px;
  background: var(--k-border);
}
.k-week-pill-on { background: var(--k-copper); }

/* Toggle with ritual-tinted accent */
.k-toggle {
  width: 42px;
  height: 24px;
  border-radius: 12px;
  background: var(--k-deep-stone);
  border: 1px solid var(--k-border);
  position: relative;
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.k-toggle::after {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--k-sub);
  position: absolute;
  top: 3px;
  left: 3px;
  transition: all 0.25s ease;
}
.k-toggle-on { background: var(--k-copper); border-color: var(--k-copper); }
.k-toggle-on::after { left: 22px; background: var(--k-parchment); }
.k-toggle-on-sage { background: var(--k-sage); border-color: var(--k-sage); }
.k-toggle-on-teal { background: var(--k-teal); border-color: var(--k-teal); }

/* ══════════════════════════════════════════
   QUIET HOURS — hero card
   ══════════════════════════════════════════ */
.k-quiet-hours {
  background: linear-gradient(135deg, var(--k-stone) 0%, var(--k-deep-stone) 100%);
  border: 1px solid var(--k-border);
  border-left: 3px solid var(--k-teal);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
}

/* ══════════════════════════════════════════
   FOOD / NUTRITION — barcode hero
   ══════════════════════════════════════════ */
.k-barcode-hero {
  background: linear-gradient(180deg, var(--k-stone) 0%, var(--k-deep-stone) 100%);
  border: 1px solid var(--k-border);
  border-radius: 18px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.k-barcode-viewfinder {
  width: 100%;
  aspect-ratio: 4/3;
  border: 1px solid var(--k-border);
  border-radius: 12px;
  position: relative;
  background: var(--k-ink);
  overflow: hidden;
  margin-bottom: 16px;
}
.k-barcode-corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.k-barcode-corners::before,
.k-barcode-corners::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--k-copper);
  border-style: solid;
  border-width: 0;
}
.k-barcode-corners::before {
  top: 12px; left: 12px;
  border-top-width: 2px; border-left-width: 2px;
}
.k-barcode-corners::after {
  bottom: 12px; right: 12px;
  border-bottom-width: 2px; border-right-width: 2px;
}
.k-barcode-scanline {
  position: absolute;
  left: 12px; right: 12px;
  height: 1px;
  background: var(--k-copper);
  box-shadow: 0 0 8px var(--k-copper);
  top: 50%;
  animation: kScanline 2s ease-in-out infinite;
}
@keyframes kScanline {
  0%,100% { top: 20%; opacity: 0.5; }
  50% { top: 80%; opacity: 1; }
}

.k-food-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.k-food-shortcut {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  color: var(--k-parchment);
}
.k-food-shortcut-glyph { font-size: 14px; color: var(--k-sub); margin-bottom: 4px; }
.k-food-shortcut-label {
  font-size: 10px;
  color: var(--k-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════
   MACRO RING + BARS
   ══════════════════════════════════════════ */
.k-macro-ring {
  display: block;
}
.k-macro-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.k-macro-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.k-macro-bar-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--k-muted);
  text-transform: uppercase;
  width: 56px;
  flex-shrink: 0;
}
.k-macro-bar {
  height: 3px;
  background: var(--k-deep-stone);
  border-radius: 2px;
  flex: 1;
  overflow: hidden;
}
.k-macro-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}
.k-macro-bar-value {
  font-size: 11px;
  color: var(--k-parchment);
  font-family: var(--font-display);
  font-style: italic;
  flex-shrink: 0;
  width: 44px;
  text-align: right;
}

/* ══════════════════════════════════════════
   DIARY ENTRY (food/vitals log row)
   ══════════════════════════════════════════ */
.k-diary-entry {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--k-border);
}
.k-diary-entry:last-child { border-bottom: none; }
.k-diary-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--k-muted);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  width: 44px;
}
.k-diary-title {
  flex: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--k-parchment);
  line-height: 1.35;
}
.k-diary-value {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--k-sub);
  flex-shrink: 0;
  text-align: right;
}
.k-diary-empty {
  text-align: center;
  padding: 20px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--k-muted);
}

/* ══════════════════════════════════════════
   MODULE TEMPLATE — header with accent bar
   ══════════════════════════════════════════ */
.k-mod-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 8px 0 18px;
}
.k-mod-head-bar {
  width: 3px;
  min-height: 38px;
  border-radius: 2px;
  background: var(--k-copper);
  flex-shrink: 0;
  margin-top: 4px;
}
.k-mod-head-bar-sage { background: var(--k-sage); }
.k-mod-head-bar-teal { background: var(--k-teal); }
.k-mod-head-bar-copper-light { background: var(--k-copper-light); }
.k-mod-head-body { flex: 1; min-width: 0; }

/* ══════════════════════════════════════════
   MODULE HERO — big serif numeral card
   ══════════════════════════════════════════ */
.k-mod-hero {
  background: linear-gradient(145deg, var(--k-stone), var(--k-deep-stone));
  border: 1px solid var(--k-border);
  border-radius: 18px;
  padding: 22px 20px 20px;
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
}
.k-mod-hero-ornament {
  position: absolute;
  right: 14px;
  top: 14px;
  opacity: 0.4;
  pointer-events: none;
}
.k-mod-hero-numeral {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 12px 0 0;
  font-family: var(--font-display);
  color: var(--k-parchment);
  line-height: 1;
}
.k-mod-hero-numeral .num {
  font-size: 68px;
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.k-mod-hero-numeral .num-small {
  font-size: 48px;
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.k-mod-hero-numeral .unit {
  font-size: 22px;
  font-style: italic;
  color: var(--k-sub);
}
.k-mod-hero-chips {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.k-mod-hero-caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  color: var(--k-sub);
  margin-top: 14px;
  line-height: 1.55;
}

/* Quality/status chip with tinted border */
.k-status-chip {
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--k-deep-stone);
  border: 1px solid var(--k-border);
  color: var(--k-sub);
  display: inline-block;
}
.k-status-chip-sage { color: var(--k-sage); border-color: rgba(122,139,111,0.4); }
.k-status-chip-teal { color: var(--k-teal); border-color: rgba(74,155,142,0.4); }
.k-status-chip-copper { color: var(--k-copper); border-color: rgba(196,94,58,0.4); }
.k-status-chip-warn { color: #F59E0B; border-color: rgba(245,158,11,0.4); }
.k-status-chip-muted { color: var(--k-muted); border-color: var(--k-border); }
.k-status-chip-ember        { color: #B85C50;               border-color: rgba(184,92,80,0.4); }
.k-status-chip-copper-light { color: var(--k-copper-light); border-color: rgba(212,129,106,0.4); }

/* Tiny kicker that sits inline before a status chip — disambiguates
   labels like CLEAR (quality) from button-shaped UI. */
.k-quality-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--k-muted);
  text-transform: uppercase;
  margin-right: 2px;
  align-self: center;
}

/* ══════════════════════════════════════════
   14-DAY BAR CHART CARD
   ══════════════════════════════════════════ */
.k-chart-card {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 18px;
}
.k-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.k-chart-bars {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 80px;
}
.k-chart-bar {
  flex: 1;
  border-radius: 2px;
  background: rgba(122,139,111,0.6);
  min-height: 2px;
}
.k-chart-bar-current { background: var(--k-sage); }
.k-chart-bar-copper { background: var(--k-copper); }
.k-chart-bar-copper-light { background: rgba(196,94,58,0.6); }
.k-chart-bar-teal { background: var(--k-teal); }
.k-chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--k-muted);
  font-family: var(--font-mono);
  margin-top: 6px;
  letter-spacing: 0.04em;
}
.k-chart-goal {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--k-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.k-chart-goal-line {
  flex: 1;
  border-top: 1px dashed var(--k-border);
}

/* ══════════════════════════════════════════
   DIARY ENTRY (extended — with date block)
   ══════════════════════════════════════════ */
.k-diary-card {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 14px;
  overflow: hidden;
}
.k-diary-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--k-border);
}
.k-diary-row:last-child { border-bottom: none; }

/* Three columns: when/date · duration · note · chip
   The note column expands so the chip sits at a stable right edge
   instead of bouncing depending on duration width. */
.k-diary-row-date {
  flex: 0 0 auto;
  min-width: 110px;
  max-width: 140px;
}
.k-diary-row-when {
  font-size: 15px;
  color: var(--k-parchment);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.005em;
}
.k-diary-row-date-mono {
  font-size: 10.5px;
  color: var(--k-sub);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  margin-top: 3px;
}
.k-diary-row-value {
  flex: 0 0 auto;
  min-width: 86px;
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  color: var(--k-parchment);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0.005em;
}
.k-diary-row-note {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  color: var(--k-parchment);
  opacity: 0.78;
  font-style: italic;
  font-weight: 400;
  font-family: var(--font-display);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-diary-row .k-status-chip { flex: 0 0 auto; align-self: center; }

/* Edit + delete action buttons — sit at the right edge, fade in on
   row hover so the diary stays calm at rest. */
.k-diary-row-actions {
  flex: 0 0 auto;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  opacity: 0;
  transition: opacity 0.18s ease;
}
/* Chip pushes itself + actions to the right edge of the row, leaving
   the date/value group on the left. Without this the chip floats
   awkwardly mid-row when the note column is hidden. */
.k-diary-row .k-status-chip { margin-left: auto; }
.k-diary-row:hover .k-diary-row-actions,
.k-diary-row:focus-within .k-diary-row-actions { opacity: 1; }
.k-diary-row-action {
  background: transparent;
  border: 1px solid transparent;
  color: var(--k-sub);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  padding: 0;
}
.k-diary-row-action:hover {
  background: var(--k-deep-stone, #1f1c19);
  color: var(--k-parchment);
  border-color: var(--k-border);
}
.k-diary-row-action--danger:hover {
  color: var(--k-ember, #B85C50);
  border-color: rgba(184, 92, 80, 0.4);
}

@media (max-width: 540px) {
  .k-diary-row { gap: 10px; padding: 12px 14px; }
  .k-diary-row-date { min-width: 88px; }
  .k-diary-row-value { min-width: 0; font-size: 17px; }
  .k-diary-row-note { display: none; }
  /* On mobile the buttons are always visible — give them a subtle
     border + bigger icons so they read as taps, not floating glyphs. */
  .k-diary-row-actions { opacity: 1; gap: 6px; margin-left: 8px; }
  .k-diary-row-action {
    width: 32px;
    height: 32px;
    border-color: var(--k-border, #3D3530);
    background: var(--k-deep-stone, #1f1c19);
  }
  .k-diary-row-action svg { width: 16px; height: 16px; }
  .k-diary-row-action--danger { color: rgba(184, 92, 80, 0.85); }
}

/* ══════════════════════════════════════════
   THIS WEEK'S INVITATION — AI nudge card
   ══════════════════════════════════════════ */
.k-invitation {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 18px;
  padding: 20px 22px;
  margin-bottom: 20px;
}
.k-invitation-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  color: var(--k-parchment);
  margin-top: 8px;
  line-height: 1.3;
}
.k-invitation-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

/* ══════════════════════════════════════════
   SETTINGS — grouped rows
   ══════════════════════════════════════════ */
.k-sgroup {
  margin-bottom: 22px;
}
.k-sgroup-head { padding: 0 4px 10px; }
.k-sgroup-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  color: var(--k-parchment);
  margin-top: 2px;
}
.k-sgroup-caption {
  font-size: 11px;
  color: var(--k-sub);
  margin-top: 4px;
  font-style: italic;
  font-family: var(--font-display);
}
.k-sgroup-rows {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 14px;
  overflow: hidden;
}
.k-srow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--k-border);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.k-srow:last-child { border-bottom: none; }
.k-srow-glyph {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--k-deep-stone);
  border: 1px solid var(--k-border);
  display: grid;
  place-items: center;
  color: var(--k-sub);
  font-size: 11px;
  flex-shrink: 0;
}
.k-srow-title {
  flex: 1;
  font-size: 13px;
  color: var(--k-parchment);
}
.k-srow-title-danger { color: #F87171; }
.k-srow-value {
  font-size: 11px;
  color: var(--k-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.k-srow-chevron {
  color: var(--k-muted);
  font-size: 12px;
  flex-shrink: 0;
}

/* Settings account hero card */
.k-account-hero {
  background: linear-gradient(140deg, var(--k-stone), var(--k-deep-stone));
  border: 1px solid var(--k-border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 22px;
}
.k-account-avatar {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: var(--k-deep-stone);
  border: 1px solid var(--k-border);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--k-parchment);
  flex-shrink: 0;
}
.k-account-info { flex: 1; min-width: 0; }
.k-account-name {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--k-parchment);
  font-style: italic;
}
.k-account-meta {
  font-size: 11px;
  color: var(--k-muted);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.k-edit-chip {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--k-copper-light);
  background: var(--k-deep-stone);
  border: 1px solid var(--k-border);
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

/* ══════════════════════════════════════════
   LIGHT MODE — Round 4 04
   Warm parchment rebalance (not dark-inverted)
   ══════════════════════════════════════════ */
[data-theme="light"] {
  --ink:         #FAF7F2;   /* background */
  --stone:       #F5F0E8;   /* cards */
  --deep-stone:  #E8E0D4;   /* inputs, nested surfaces */
  --parchment:   #1A1614;   /* primary text */
  --prism-text:  #1A1614;
  --sub:         #6B5E53;   /* secondary text */
  --muted:       #A89B8C;   /* tertiary text */
  --border-color: #D4CDC0;
  --k-ink:         #FAF7F2;
  --k-stone:       #F5F0E8;
  --k-deep-stone:  #E8E0D4;
  --k-parchment:   #1A1614;
  --k-sub:         #6B5E53;
  --k-muted:       #A89B8C;
  --k-border:      #D4CDC0;
  /* accents stay the same — they work on warm light too */
}

/* ══════════════════════════════════════════
   TOASTS — Round 4 02
   ══════════════════════════════════════════ */
.k-toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.k-toast {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-left: 2px solid var(--k-sage);
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 220px;
  max-width: 340px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  pointer-events: auto;
  animation: kToastIn var(--dur-warm) var(--ease-warm);
}
.k-toast.k-toast-out { animation: kToastOut 220ms var(--ease-quick) forwards; }
.k-toast-kicker {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--k-sage);
  text-transform: uppercase;
  font-weight: 500;
}
.k-toast-message {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--k-parchment);
  margin-top: 3px;
  line-height: 1.4;
}
.k-toast-error       { border-left-color: #B85C50; }
.k-toast-error .k-toast-kicker { color: #B85C50; }
.k-toast-info        { border-left-color: var(--k-copper-light); }
.k-toast-info .k-toast-kicker  { color: var(--k-copper-light); }
.k-toast-warn        { border-left-color: #C9A77A; }
.k-toast-warn .k-toast-kicker  { color: #C9A77A; }

/* ══════════════════════════════════════════
   MODAL — Round 4 02
   ══════════════════════════════════════════ */
.k-modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 13, 11, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  animation: kToastIn var(--dur-settle) var(--ease-settle);
}
.k-modal-scrim.open { display: flex; }
.k-modal {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 16px;
  padding: 26px 28px;
  width: calc(100vw - 40px);
  max-width: 440px;
  animation: kModalIn var(--dur-settle) var(--ease-settle);
}
@keyframes kModalIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.k-modal-kicker {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--k-copper-light);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 6px;
}
.k-modal-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--k-parchment);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 10px;
}
.k-modal-body {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--k-sub);
  line-height: 1.6;
  margin-bottom: 20px;
}
.k-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ══════════════════════════════════════════
   BOTTOM SHEET (mobile)
   ══════════════════════════════════════════ */
.k-sheet-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 13, 11, 0.72);
  z-index: 9000;
  display: none;
  animation: kToastIn var(--dur-settle) var(--ease-settle);
}
.k-sheet-scrim.open { display: block; }
.k-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--k-stone);
  border-top: 1px solid var(--k-border);
  border-radius: 20px 20px 0 0;
  z-index: 9100;
  padding: 12px 20px 32px;
  transform: translateY(100%);
  transition: transform var(--dur-settle) var(--ease-settle);
  max-height: 85vh;
  overflow-y: auto;
}
.k-sheet.open { transform: translateY(0); }
.k-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--k-muted);
  border-radius: 2px;
  margin: 0 auto 16px;
  opacity: 0.5;
}

/* ══════════════════════════════════════════
   COMMAND PALETTE
   ══════════════════════════════════════════ */
.k-cmdk-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 13, 11, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9500;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.k-cmdk-scrim.open { display: flex; }
.k-cmdk {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 14px;
  width: calc(100vw - 40px);
  max-width: 580px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  animation: kModalIn var(--dur-warm) var(--ease-warm);
  overflow: hidden;
}
.k-cmdk-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--k-border);
  padding: 16px 20px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--k-parchment);
  outline: none;
}
.k-cmdk-input::placeholder { color: var(--k-sub); }
.k-cmdk-results {
  max-height: 50vh;
  overflow-y: auto;
}
.k-cmdk-item {
  display: flex;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--k-border);
  cursor: pointer;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.k-cmdk-item:last-child { border-bottom: none; }
.k-cmdk-item:hover, .k-cmdk-item.active { background: var(--k-deep-stone); }
.k-cmdk-item-kicker {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--k-muted);
  text-transform: uppercase;
  width: 60px;
  flex-shrink: 0;
}
.k-cmdk-item-text {
  flex: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--k-parchment);
}
.k-cmdk-item-shortcut {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--k-muted);
  letter-spacing: 0.06em;
}

/* ══════════════════════════════════════════
   EMPTY / ERROR / LOADING STATES
   ══════════════════════════════════════════ */
.k-state {
  text-align: center;
  padding: 48px 20px;
  max-width: 400px;
  margin: 0 auto;
}
.k-state-glyph {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  display: block;
  opacity: 0.6;
}
.k-state-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--k-parchment);
  line-height: 1.25;
  margin-bottom: 10px;
}
.k-state-body {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--k-sub);
  line-height: 1.55;
  margin-bottom: 18px;
}

/* ══════════════════════════════════════════
   MOVEMENT & RECOVERY — Round 4
   ══════════════════════════════════════════ */

/* Range pills (7d / 30d / 90d) */
.k-range-pill {
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--k-border);
  color: var(--k-sub);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: color 0.18s var(--ease-warm), border-color 0.18s var(--ease-warm), background 0.18s var(--ease-warm);
  user-select: none;
}
.k-range-pill:hover { color: var(--k-parchment); border-color: var(--k-parchment); }
.k-range-pill-active-teal {
  background: var(--k-stone);
  border-color: var(--k-teal);
  color: var(--k-parchment);
}
.k-range-pill-active-copper {
  background: var(--k-stone);
  border-color: var(--k-copper);
  color: var(--k-parchment);
}
.k-range-pill-active-sage {
  background: var(--k-stone);
  border-color: var(--k-sage);
  color: var(--k-parchment);
}

/* Log chip */
.k-log-chip {
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.16s var(--ease-warm), box-shadow 0.16s var(--ease-warm);
  user-select: none;
}
.k-log-chip:hover { transform: translateY(-1px); }
.k-log-chip-teal { background: var(--k-teal); color: var(--k-parchment); }
.k-log-chip-teal:hover { box-shadow: 0 6px 18px rgba(74,155,142,0.28); }
.k-log-chip-copper { background: var(--k-copper-light); color: var(--k-ink); }

/* Quick log popover — appears beneath the '+ Quick log' chip */
.quick-log-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  min-width: 220px;
  background: var(--k-stone);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.quick-log-menu[hidden] { display: none; }
.quick-log-kicker {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
  padding: 6px 10px 4px;
}
.quick-log-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--k-parchment);
  font-family: var(--font-sans);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}
.quick-log-item:hover { background: var(--k-deep-stone); }
.quick-log-item .quick-log-glyph {
  width: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.quick-log-item .quick-log-tag { display: none; } /* reserved for future colour cues */
.k-log-chip-copper:hover { box-shadow: 0 6px 18px rgba(212,129,106,0.28); }

/* Hero row: 1.4fr / 1fr / 1fr */
.k-mv-hero-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 22px;
}
@media (max-width: 960px) {
  .k-mv-hero-row { grid-template-columns: 1fr; }
}

/* Active minutes hero */
.k-mv-hero-active {
  background: linear-gradient(145deg, var(--k-stone), var(--k-deep-stone));
  border: 1px solid var(--k-border);
  border-radius: 18px;
  padding: 30px 36px;
  position: relative;
  overflow: hidden;
}
.k-mv-hero-active .k-mv-hero-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle at 70% 30%, rgba(74,155,142,0.13), transparent 60%);
  pointer-events: none;
}
.k-mv-hero-active-copper {
  background: linear-gradient(145deg, var(--k-stone), var(--k-deep-stone));
  border: 1px solid var(--k-border);
  border-radius: 18px;
  padding: 30px 36px;
  position: relative;
  overflow: hidden;
}
.k-mv-hero-active-copper .k-mv-hero-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle at 70% 30%, rgba(212,129,106,0.11), transparent 60%);
  pointer-events: none;
}

/* Big numerals */
.k-mv-big-num {
  font-family: var(--font-display);
  font-size: 116px;
  font-weight: 300;
  color: var(--k-parchment);
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.k-mv-big-of {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--k-sub);
  font-style: italic;
}
.k-mv-med-num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 300;
  color: var(--k-parchment);
  margin-top: 6px;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.k-mv-stat-delta {
  font-size: 11px;
  color: var(--k-teal);
  font-family: var(--font-mono);
  margin-top: 2px;
  letter-spacing: 0.04em;
}

/* Progress bar */
.k-mv-progress-track {
  height: 4px;
  background: var(--k-deep-stone);
  border-radius: 2px;
  overflow: hidden;
}
.k-mv-progress-fill {
  height: 100%;
  background: var(--k-teal);
  border-radius: 2px;
  transition: width 0.6s var(--ease-settle);
}
.k-mv-progress-fill-copper { background: var(--k-copper-light); }

/* Hero caption */
.k-mv-hero-caption {
  font-size: 13px;
  color: var(--k-sub);
  font-style: italic;
  font-family: var(--font-display);
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--k-border);
  line-height: 1.55;
  position: relative;
}

/* Stat cards (steps, this week) */
.k-mv-stat-card {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 18px;
  padding: 26px 28px;
}

/* Week pills */
.k-mv-week-pill {
  flex: 1;
  text-align: center;
}
.k-mv-week-pill-bar {
  height: 54px;
  border-radius: 3px;
  background: var(--k-deep-stone);
  opacity: 0.4;
  transition: background 0.3s var(--ease-warm), opacity 0.3s var(--ease-warm);
}
.k-mv-week-pill-bar-done { background: var(--k-teal); }
.k-mv-week-pill-bar-done-copper { background: var(--k-copper-light); }
.k-mv-week-pill-bar-today {
  background: transparent !important;
  border: 1.5px dashed var(--k-teal);
  opacity: 1 !important;
}
.k-mv-week-pill-bar-today-copper {
  background: transparent !important;
  border: 1.5px dashed var(--k-copper-light);
  opacity: 1 !important;
}
.k-mv-week-pill-label {
  font-size: 9px;
  color: var(--k-muted);
  font-family: var(--font-mono);
  margin-top: 5px;
}
.k-mv-week-pill-label-today { color: var(--k-teal); }
.k-mv-week-pill-label-today-copper { color: var(--k-copper-light); }

/* Chart + diary row */
.k-mv-chart-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 960px) {
  .k-mv-chart-row { grid-template-columns: 1fr; }
}

.k-mv-chart-card,
.k-mv-diary-card {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 18px;
  padding: 26px 28px;
}

/* Diary entries */
.k-mv-diary-entry {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--k-border);
}
.k-mv-diary-entry:last-child { border-bottom: none; }
/* "Show more / Show fewer" button below the diary list. */
.k-mv-diary-more {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--k-border, #3D3530);
  border-radius: 8px;
  color: var(--k-sub, #A89B8C);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.k-mv-diary-more:hover {
  color: var(--k-parchment);
  border-color: var(--k-teal, #4A9B8E);
  background: rgba(74, 155, 142, 0.05);
}
.k-mv-diary-time {
  width: 42px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--k-sub);
  letter-spacing: 0.06em;
}
.k-mv-diary-glyph {
  width: 26px;
  flex-shrink: 0;
  padding-top: 2px;
}
.k-mv-diary-body { flex: 1; min-width: 0; }
.k-mv-diary-label {
  font-family: var(--font-display);
  font-size: 15px;
  font-style: italic;
  color: var(--k-parchment);
  line-height: 1.2;
}
.k-mv-diary-meta {
  font-size: 10.5px;
  color: var(--k-muted);
  font-family: var(--font-mono);
  margin-top: 3px;
  letter-spacing: 0.04em;
}
.k-mv-diary-note {
  font-size: 11px;
  color: var(--k-sub);
  font-style: italic;
  font-family: var(--font-display);
  margin-top: 3px;
}

/* Recovery ratio plate */
.k-mv-ratio-row {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 120px;
  margin-top: 18px;
}
.k-mv-ratio-bar {
  border-radius: 4px;
  display: flex;
  align-items: flex-end;
  padding: 0 10px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.k-mv-ratio-bar-move { background: var(--k-teal); color: var(--k-parchment); height: 100%; }
.k-mv-ratio-bar-rest { background: var(--k-copper-light); color: var(--k-ink); }

/* Recovery quick-log grid */
.k-mv-rec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.k-mv-rec-tile {
  background: var(--k-deep-stone);
  border: 1px solid var(--k-border);
  border-radius: 12px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-warm), transform 0.16s var(--ease-warm);
}
.k-mv-rec-tile:hover {
  border-color: var(--k-copper-light);
  transform: translateY(-1px);
}
.k-mv-rec-tile-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  color: var(--k-parchment);
}

/* Recovery stat tokens */
.k-mv-rec-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.k-mv-rec-stat-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.k-mv-rec-stat-val {
  font-family: var(--font-display);
  font-size: 26px;
  font-style: italic;
  color: var(--k-parchment);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .k-mv-hero-active, .k-mv-hero-active-copper { padding: 22px 22px; }
  .k-mv-big-num { font-size: 82px; }
  .k-mv-big-of { font-size: 22px; }
  .k-mv-med-num { font-size: 40px; }
  .k-mv-stat-card, .k-mv-chart-card, .k-mv-diary-card { padding: 20px 18px; }
}

/* ══════════════════════════════════════════
   MODULE HEADER ROW — editorial header + range pills + log chip
   ══════════════════════════════════════════ */
.k-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.k-head-row-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.k-range-pill-active-sage {
  background: var(--k-stone);
  border-color: var(--k-sage);
  color: var(--k-parchment);
}
.k-log-chip-sage { background: var(--k-sage); color: var(--k-parchment); }
.k-log-chip-sage:hover { box-shadow: 0 6px 18px rgba(122,139,111,0.28); }

/* ══════════════════════════════════════════
   METRIC TILE ROW — for Vitals-style pages
   ══════════════════════════════════════════ */
.k-metric-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}
@media (max-width: 720px) { .k-metric-row { grid-template-columns: 1fr; } }
.k-metric-tile {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 14px;
  padding: 16px 18px;
  position: relative;
}
.k-metric-tile-k {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--k-muted);
  text-transform: uppercase;
  font-weight: 500;
  font-family: var(--font-mono);
}
.k-metric-tile-v {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 6px;
  font-family: var(--font-display);
  color: var(--k-parchment);
}
.k-metric-tile-v .num {
  font-size: 32px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.k-metric-tile-v .unit {
  font-size: 13px;
  color: var(--k-sub);
  font-style: italic;
}
.k-metric-tile-status {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.2;
  background: rgba(168,155,140,0.08);
  color: var(--k-muted);
  border: 1px solid rgba(168,155,140,0.25);
  white-space: nowrap;
}
.k-metric-tile-status-clear   { background: rgba(122,139,111,0.12); color: var(--k-sage); border-color: rgba(122,139,111,0.4); }
.k-metric-tile-status-watch   { background: rgba(245,158,11,0.14);  color: #F59E0B;       border-color: rgba(245,158,11,0.4); }
.k-metric-tile-status-alert   { background: rgba(196,94,58,0.14);   color: var(--k-copper-light); border-color: rgba(196,94,58,0.4); }
.k-metric-tile-status-neutral { background: rgba(168,155,140,0.08); color: var(--k-muted); border-color: rgba(168,155,140,0.25); }
.k-metric-tile-sparkline { margin-top: 8px; height: 28px; }

/* ══════════════════════════════════════════
   SCROLLABLE CHIP ROW
   ══════════════════════════════════════════ */
.k-chip-scroll {
  display: flex;
  gap: 6px;
  margin: 0 0 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.k-chip-scroll::-webkit-scrollbar { display: none; }
.k-chip {
  flex-shrink: 0;
  padding: 6px 11px;
  border-radius: 16px;
  font-size: 10.5px;
  background: transparent;
  color: var(--k-sub);
  border: 1px solid var(--k-border);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.18s var(--ease-warm);
  user-select: none;
  white-space: nowrap;
}
.k-chip:hover { border-color: var(--k-parchment); color: var(--k-parchment); }
.k-chip-active {
  background: var(--k-deep-stone);
  color: var(--k-parchment);
  border-color: var(--k-copper);
}

/* ══════════════════════════════════════════
   WATER RING — big hydration gauge
   ══════════════════════════════════════════ */
.k-water-hero {
  display: flex;
  gap: 20px;
  align-items: center;
  background: linear-gradient(145deg, var(--k-stone), var(--k-deep-stone));
  border: 1px solid var(--k-border);
  border-radius: 18px;
  padding: 24px 26px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.k-water-hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle at 70% 30%, rgba(74,155,142,0.13), transparent 60%);
  pointer-events: none;
}
.k-water-ring-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}
.k-water-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.k-water-ring-num {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--k-parchment);
  font-weight: 300;
  line-height: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  /* Inner text area width ≤ ring inner diameter so it never bleeds
     into the stroke on either side. */
  max-width: 100px;
  text-align: center;
}
.k-water-ring-of {
  font-size: 14px;
  color: var(--k-sub);
  font-style: italic;
}
.k-water-ring-label {
  font-size: 9px;
  color: var(--k-muted);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 4px;
}
.k-water-glasses {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.k-water-glass {
  width: 24px;
  height: 30px;
  border-radius: 3px;
  border: 1px solid var(--k-border);
  background: transparent;
  transition: border-color 0.2s var(--ease-warm), background 0.2s var(--ease-warm);
}
.k-water-glass-full {
  border-color: var(--k-teal);
  background: linear-gradient(180deg, transparent, rgba(74,155,142,0.6));
}
/* Universal continuous progress bar — replaces the 8-vessel icon row
   so the hero works for any vessel mix, not just glasses. */
.k-water-progress-track {
  width: 100%;
  height: 8px;
  background: var(--k-deep-stone, #231F1C);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.k-water-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--k-teal, #4A9B8E), rgba(74, 155, 142, 0.7));
  border-radius: 999px;
  transition: width 0.4s var(--ease-warm, ease);
}
.k-water-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 12px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--k-muted, #6B5E53);
  margin-top: 8px;
  text-transform: uppercase;
}
.k-water-progress-meta > span:first-child { color: var(--k-sub, #A89B8C); }
.k-water-caption {
  font-size: 12px;
  color: var(--k-sub);
  font-style: italic;
  font-family: var(--font-display);
  line-height: 1.5;
  position: relative;
}

/* Quick-add grid for water (and similar) */
.k-quickadd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
@media (max-width: 520px) { .k-quickadd-grid { grid-template-columns: repeat(2, 1fr); } }
.k-quickadd-tile {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s var(--ease-warm), transform 0.14s var(--ease-warm);
}
.k-quickadd-tile:hover {
  border-color: var(--k-teal);
  transform: translateY(-1px);
}
.k-quickadd-tile-dashed {
  background: transparent;
  border-style: dashed;
}
.k-quickadd-tile-glyph {
  font-size: 20px;
  color: var(--k-teal);
  margin-bottom: 4px;
}
.k-quickadd-tile-label {
  font-size: 12px;
  color: var(--k-parchment);
}
.k-quickadd-tile-sub {
  font-size: 9.5px;
  color: var(--k-muted);
  font-family: var(--font-mono);
  margin-top: 2px;
}

/* ══════════════════════════════════════════
   TIMELINE LIST — sleep/water/meds
   ══════════════════════════════════════════ */
.k-timeline {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 14px;
  padding: 8px 18px;
  margin-bottom: 22px;
}
.k-timeline-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--k-border);
}
.k-timeline-row:last-child { border-bottom: none; }
.k-timeline-time {
  font-size: 10px;
  color: var(--k-muted);
  font-family: var(--font-mono);
  width: 50px;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.k-timeline-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--k-teal);
  flex-shrink: 0;
}
.k-timeline-dot-copper { background: var(--k-copper); }
.k-timeline-dot-sage { background: var(--k-sage); }
.k-timeline-label {
  flex: 1;
  font-size: 13px;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--k-parchment);
}
.k-timeline-value {
  font-size: 12px;
  color: var(--k-sub);
  font-family: var(--font-mono);
}

/* ══════════════════════════════════════════
   WEEK BARS — simple vertical bar row
   ══════════════════════════════════════════ */
.k-weekbars {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 22px;
}
.k-weekbars-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  height: 90px;
}
.k-weekbars-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  height: 100%;
}
.k-weekbars-bar {
  width: 100%;
  border-radius: 3px;
  background: var(--k-teal);
  opacity: 0.7;
  min-height: 4px;
}
.k-weekbars-bar-today { opacity: 1; }
.k-weekbars-bar-copper { background: var(--k-copper); }
.k-weekbars-bar-sage { background: var(--k-sage); }
.k-weekbars-label {
  font-size: 9px;
  color: var(--k-muted);
  font-family: var(--font-mono);
}

/* ══════════════════════════════════════════
   NEXT-UP CARD — appointments hero
   ══════════════════════════════════════════ */
.k-nextup {
  background: linear-gradient(145deg, var(--k-stone), var(--k-deep-stone));
  border: 1px solid var(--k-border);
  border-radius: 18px;
  padding: 24px 28px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.k-nextup-tag {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 9px;
  color: var(--k-copper-light);
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
  font-weight: 500;
}
.k-nextup-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-style: italic;
  color: var(--k-parchment);
  margin-top: 8px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.k-nextup-meta {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--k-sub);
  flex-wrap: wrap;
}
.k-nextup-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.k-pill-btn {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--k-border);
  background: transparent;
  color: var(--k-sub);
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 0.18s var(--ease-warm);
}
.k-pill-btn:hover { border-color: var(--k-copper-light); color: var(--k-parchment); }
.k-pill-btn-primary {
  background: var(--k-copper);
  border-color: var(--k-copper);
  color: var(--k-parchment);
}
.k-pill-btn-primary:hover {
  background: var(--k-copper-dark);
  color: var(--k-parchment);
}

/* Appointment tile (upcoming list) */
.k-apt-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 8px;
  transition: border-color 0.18s var(--ease-warm);
}
.k-apt-tile:hover { border-color: var(--k-copper-light); }
.k-apt-date {
  width: 52px;
  height: 56px;
  border-radius: 8px;
  background: var(--k-deep-stone);
  border: 1px solid var(--k-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.k-apt-date-m {
  font-size: 9px;
  letter-spacing: 0.2em;
  font-family: var(--font-mono);
  font-weight: 600;
}
.k-apt-date-d {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--k-parchment);
  font-variant-numeric: tabular-nums;
}
.k-apt-body { flex: 1; min-width: 0; }
.k-apt-title {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--k-parchment);
  font-style: italic;
}
.k-apt-meta {
  font-size: 11px;
  color: var(--k-muted);
  font-family: var(--font-mono);
  margin-top: 2px;
}

/* Prep checklist */
.k-prep-list {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 14px;
  padding: 4px 18px;
  margin-bottom: 22px;
}
.k-prep-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--k-border);
}
.k-prep-row:last-child { border-bottom: none; }
.k-prep-check {
  width: 18px;
  height: 18px;
  border-radius: 9px;
  border: 1px solid var(--k-border);
  background: transparent;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  cursor: pointer;
}
.k-prep-check-done {
  background: var(--k-copper);
  border-color: var(--k-copper);
  color: var(--k-parchment);
  font-size: 10px;
}
.k-prep-label {
  font-size: 13.5px;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--k-parchment);
}
.k-prep-label-done {
  color: var(--k-sub);
  text-decoration: line-through;
}

/* ══════════════════════════════════════════
   TOOTH MAP — dental page
   ══════════════════════════════════════════ */
.k-tooth-map {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 14px;
  padding: 22px 18px;
  margin-bottom: 22px;
}
.k-tooth-row {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.k-tooth {
  aspect-ratio: 1 / 1.2;
  border-radius: 3px;
  background: var(--k-deep-stone);
  border: 1px solid var(--k-border);
}
.k-tooth-crown    { background: rgba(196,94,58,0.3);  border-color: var(--k-copper); }
.k-tooth-filling  { background: rgba(122,139,111,0.3); border-color: var(--k-sage); }
.k-tooth-watch    { background: rgba(245,158,11,0.3);  border-color: #F59E0B; }
.k-tooth-row-label {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: var(--k-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.k-tooth-legend {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.k-tooth-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--k-sub);
}
.k-tooth-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* ══════════════════════════════════════════
   BARCODE / FOOD HERO
   ══════════════════════════════════════════ */
.k-barcode-hero {
  background: linear-gradient(180deg, var(--k-stone), var(--k-deep-stone));
  border: 1px solid var(--k-border);
  border-radius: 18px;
  padding: 26px 22px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.k-barcode-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid transparent;
  border-color: var(--k-copper);
}
.k-barcode-corner-tl { top: 14px; left: 14px; border-right: none; border-bottom: none; }
.k-barcode-corner-tr { top: 14px; right: 14px; border-left: none; border-bottom: none; }
.k-barcode-corner-bl { bottom: 14px; left: 14px; border-right: none; border-top: none; }
.k-barcode-corner-br { bottom: 14px; right: 14px; border-left: none; border-top: none; }
.k-barcode-kicker {
  font-size: 9px;
  letter-spacing: 0.28em;
  color: var(--k-muted);
  text-transform: uppercase;
  text-align: center;
  font-weight: 500;
}
.k-barcode-title {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--k-parchment);
  font-style: italic;
  text-align: center;
  margin-top: 8px;
  line-height: 1.1;
}
.k-barcode-lines {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5px;
  margin: 22px auto 0;
  height: 56px;
  padding: 0 30px;
}
.k-barcode-bar {
  height: 100%;
  background: var(--k-parchment);
  opacity: 0.8;
}
.k-barcode-bar-faint {
  height: 100%;
  background: var(--k-muted);
  opacity: 0.3;
}
.k-barcode-scanline {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 1px;
  background: var(--k-copper);
  opacity: 0.7;
  box-shadow: 0 0 10px var(--k-copper);
}
.k-barcode-digits {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--k-muted);
  text-align: center;
  margin-top: 10px;
  letter-spacing: 0.15em;
}

/* Nutrition ring */
.k-nutri-ring-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}
.k-nutri-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.k-nutri-ring-num {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--k-parchment);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
}
.k-nutri-ring-of {
  font-size: 10px;
  color: var(--k-sub);
  font-style: italic;
  font-family: var(--font-display);
}

/* Macro bar */
.k-macro-row { margin-bottom: 8px; }
.k-macro-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.k-macro-label {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--k-muted);
  text-transform: uppercase;
}
.k-macro-value {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--k-parchment);
  font-variant-numeric: tabular-nums;
}
.k-macro-of {
  font-size: 10px;
  color: var(--k-sub);
}
.k-macro-track {
  height: 3px;
  background: var(--k-deep-stone);
  border-radius: 2px;
  overflow: hidden;
}
.k-macro-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s var(--ease-settle);
}

/* Food log item */
.k-food-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--k-border);
}
.k-food-row:last-child { border-bottom: none; }
.k-food-time {
  font-size: 10px;
  color: var(--k-muted);
  font-family: var(--font-mono);
  width: 42px;
  padding-top: 3px;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.k-food-thumb {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: repeating-linear-gradient(135deg, var(--k-deep-stone) 0 5px, var(--k-stone) 5px 10px);
  border: 1px solid var(--k-border);
  flex-shrink: 0;
}
.k-food-body { flex: 1; min-width: 0; }
.k-food-title {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--k-parchment);
  font-style: italic;
  line-height: 1.25;
}
.k-food-meta {
  font-size: 11px;
  color: var(--k-muted);
  margin-top: 2px;
}
.k-food-kcal {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--k-parchment);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.k-food-kcal-unit {
  font-size: 10px;
  color: var(--k-sub);
  font-style: italic;
  margin-left: 2px;
}

/* Treatment list / daily-rhythm */
.k-rec-list {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 14px;
  padding: 4px 18px;
  margin-bottom: 22px;
}
.k-rec-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--k-border);
}
.k-rec-row:last-child { border-bottom: none; }
.k-rec-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.k-rec-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-style: italic;
  color: var(--k-parchment);
}
.k-rec-date {
  font-size: 10px;
  color: var(--k-muted);
  font-family: var(--font-mono);
}
.k-rec-note {
  font-size: 11px;
  color: var(--k-sub);
  font-style: italic;
  font-family: var(--font-display);
  margin-top: 2px;
}

/* Habit squares (brush-and-floss rhythm) */
.k-habit-row {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  gap: 3px;
  margin-top: 10px;
}
.k-habit-sq {
  height: 16px;
  border-radius: 2px;
  background: rgba(122,139,111,0.6);
}
.k-habit-sq-off { background: var(--k-deep-stone); }

/* ══════════════════════════════════════════
   DASHBOARD — Priority 01 signature hero
   ══════════════════════════════════════════ */
.k-dash-greet {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.k-dash-greet-title {
  font-family: var(--font-display);
  font-size: 40px;
  color: var(--k-parchment);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1;
  margin: 6px 0 0;
}
.k-dash-greet-title em {
  font-style: italic;
  color: var(--k-copper-light);
}
.k-dash-greet-title span {
  font-style: italic;
  color: var(--k-copper-light);
}
.k-dash-greet-sub {
  font-size: 13px;
  color: var(--k-sub);
  margin-top: 8px;
  font-style: italic;
  font-family: var(--font-display);
  max-width: 540px;
  line-height: 1.5;
}
.k-dash-greet-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.k-dash-signature {
  position: relative;
  padding: 32px 20px 22px;
  background: linear-gradient(180deg, var(--k-stone) 0%, var(--k-deep-stone) 100%);
}
.k-dash-ring-legend {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
  padding: 0 8px;
}
.k-dash-ring-leg-item {
  flex: 1;
  text-align: center;
}
.k-dash-ring-leg-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
.k-dash-ring-leg-label {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--k-muted);
  text-transform: uppercase;
  vertical-align: middle;
}
.k-dash-ring-leg-val {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--k-parchment);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.k-dash-ring-leg-trend {
  font-size: 10px;
  color: var(--k-sub);
  font-family: var(--font-mono);
  margin-top: -2px;
}

/* Stat row adjustments */
@media (max-width: 960px) {
  .k-dash-stat-row { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Notifications + Health News row (originally 3 columns; the third
   "Body overview" card was a hardcoded facade and got removed) */
.k-dash-3col {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 960px) {
  .k-dash-3col { grid-template-columns: 1fr; }
}
.k-dash-card {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 16px;
  padding: 20px 22px;
  /* Grid items inherit min-width:auto = min-content. When a child has
     unshrinkable content (e.g. a chip row), that min-content can push
     the card past the viewport on mobile. Forcing min-width:0 lets the
     card shrink and its scrollable child take over instead. */
  min-width: 0;
}
.k-dash-body-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--k-border);
}
.k-dash-body-row:last-child { border-bottom: none; padding-bottom: 0; }
.k-dash-body-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.k-dash-body-label {
  flex: 1;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--k-muted);
  text-transform: uppercase;
}
.k-dash-body-tag {
  font-size: 9px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════
   AI ASSISTANT — Priority 02
   ══════════════════════════════════════════ */
.k-ai-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  height: calc(100vh - 140px);
}
@media (max-width: 960px) {
  .k-ai-wrap { grid-template-columns: 1fr; height: auto; }
  .k-ai-sidebar { display: none; }
}
.k-ai-sidebar {
  border-right: 1px solid var(--k-border);
  padding-right: 20px;
  overflow-y: auto;
}
.k-ai-sidebar-kicker {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--k-muted);
  text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: 500;
}
.k-ai-convo {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  margin-bottom: 4px;
  cursor: pointer;
  transition: background 0.2s var(--ease-warm);
}
.k-ai-convo:hover { background: var(--k-deep-stone); }
.k-ai-convo-active {
  background: var(--k-stone);
  border-color: var(--k-border);
}
.k-ai-convo-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.k-ai-convo-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-style: italic;
  color: var(--k-parchment);
}
.k-ai-convo-title-dim { color: var(--k-sub); }
.k-ai-convo-time {
  font-size: 9px;
  color: var(--k-muted);
  font-family: var(--font-mono);
}
.k-ai-convo-sub {
  font-size: 11px;
  color: var(--k-muted);
  margin-top: 2px;
}
.k-ai-mcp-card {
  margin-top: 18px;
  padding: 12px;
  border: 1px dashed var(--k-border);
  border-radius: 10px;
}
.k-ai-empty-title {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--k-parchment);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 10px;
  text-align: center;
}
.k-ai-empty-title em {
  font-style: italic;
  color: var(--k-copper-light);
}
.k-ai-empty-sub {
  font-size: 12px;
  color: var(--k-sub);
  font-family: var(--font-display);
  font-style: italic;
  line-height: 1.55;
  max-width: 420px;
  margin: 0 auto 24px;
  text-align: center;
}
.k-ai-prompts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-width: 560px;
  margin: 0 auto;
}
.k-ai-prompt {
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-warm);
  text-align: left;
  color: inherit;
}
.k-ai-prompt:hover { border-color: var(--k-copper-light); }
.k-ai-prompt-kicker {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--k-copper-light);
  text-transform: uppercase;
  margin-bottom: 5px;
  font-weight: 500;
}
.k-ai-prompt-text {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--k-parchment);
  font-style: italic;
  line-height: 1.3;
}

/* ══════════════════════════════════════════
   REMINDERS — Priority 03 "Daily rhythm"
   ══════════════════════════════════════════ */
.k-rhythm-hero {
  display: block;
  margin-bottom: 28px;
  max-width: 520px;
}
.k-rhythm-title {
  font-family: var(--font-display);
  font-size: 42px;
  color: var(--k-parchment);
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 8px 0 0;
}
.k-rhythm-title span {
  color: var(--k-copper-light);
}
.k-rhythm-sub {
  font-size: 13px;
  color: var(--k-sub);
  margin-top: 16px;
  font-family: var(--font-display);
  font-style: italic;
  line-height: 1.5;
  max-width: 320px;
}
.k-rhythm-timeline {
  margin-top: 28px;
  padding: 18px 20px;
  background: var(--k-stone);
  border: 1px solid var(--k-border);
  border-radius: 14px;
}
.k-rhythm-tl-head {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--k-muted);
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 500;
}
.k-rhythm-tl-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 5px 0;
}
.k-rhythm-tl-time {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--k-muted);
  width: 46px;
  letter-spacing: 0.04em;
}
.k-rhythm-tl-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.k-rhythm-tl-line {
  flex: 1;
  height: 1px;
  background: var(--k-border);
  opacity: 0.4;
}
.k-rhythm-tl-label {
  font-size: 12px;
  color: var(--k-parchment);
  font-style: italic;
  font-family: var(--font-display);
}

/* Quiet hours card */
.k-quiet-hours {
  background: linear-gradient(140deg, var(--k-stone), var(--k-deep-stone));
  border: 1px solid var(--k-border);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}

/* ══════════════════════════════════════════
   RESPONSIVE — sharpen mobile typography
   ══════════════════════════════════════════ */
@media (max-width: 480px) {
  .k-section-title { font-size: 20px; }
  .k-stat-value { font-size: 30px; }
  .k-nextup-title { font-size: 22px; }
  .k-water-hero { flex-direction: column; align-items: flex-start; }
  .k-water-ring-wrap { margin: 0 auto; }
  .k-dash-greet-title { font-size: 30px; }
  .k-rhythm-title { font-size: 32px; }
  .k-ai-empty-title { font-size: 24px; }
}

/* ──────────────────────────────────────────────────────────────────
   Kenki wordmark — copper-sage-teal gradient with a soft pulse.
   Covers every brand-text variant across the site:
     .kenki-logo span    (marketing pages — index, waitlist, etc.)
     .sidebar-logo span  (in-app sidebar, all module pages)
     #kenki-gradient-text (explicit id used in dashboard sidebar)
     .kenki-wordmark      (escape hatch class)
   The gradient is sized exactly to the text (background-size: 100%)
   so all three colors are visible simultaneously even on the short
   "Kenki" wordmark. The pulse is an opacity + saturation breathe
   so the motion is unmistakable without color flicker.
   ────────────────────────────────────────────────────────────── */
.kenki-logo span,
.sidebar-logo span,
#kenki-gradient-text,
.kenki-wordmark {
  background: linear-gradient(90deg, #C45E3A 0%, #7A8B6F 50%, #4A9B8E 100%) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: kenki-logo-pulse 2.8s ease-in-out infinite;
}
.kenki-logo:hover span,
.sidebar-logo:hover span,
.sidebar-logo:hover #kenki-gradient-text,
.kenki-logo:hover .kenki-wordmark {
  animation-duration: 1.4s;
}
@keyframes kenki-logo-pulse {
  0%, 100% { opacity: 0.7;  filter: saturate(0.9) brightness(0.95); }
  50%      { opacity: 1;    filter: saturate(1.25) brightness(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .kenki-logo span,
  .sidebar-logo span,
  #kenki-gradient-text,
  .kenki-wordmark { animation: none; }
}

/* ──────────────────────────────────────────────────────────────────
   Sleep · rhythm sidebar (Round 3 · Tier A)
   Bedtime window + 'This week's invitation' cards rendered alongside
   the diary on desktop, stacked beneath it on mobile.
   ────────────────────────────────────────────────────────────── */
.k-sleep-rhythm {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 24px;
  margin-top: 8px;
}
.k-sleep-rhythm-main { min-width: 0; }
.k-sleep-rhythm-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 900px) {
  .k-sleep-rhythm { grid-template-columns: 1fr; }
}

.k-sleep-side-card {
  background: var(--k-stone, #2C2824);
  border: 1px solid var(--border-color, #3D3530);
  border-radius: 18px;
  padding: 22px 24px;
}

/* ── Bedtime window ─────────────────────────────────────── */
.k-sleep-window-headline {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--k-parchment, #F5F0E8);
  margin-top: 6px;
}
.k-sleep-window-time { color: var(--k-sage, #7A8B6F); }

.k-sleep-window-bar {
  position: relative;
  margin-top: 16px;
}

/* Histogram of bedtime distribution across last 30 nights.
   Bars stack along an 18:00 → 02:00 axis (16 half-hour bins).
   Color tells you the role of each bar:
   · empty     — deep-stone tick
   · in-window — sage tinted, "your usual"
   · mode      — full sage, most common bin
   · last      — copper, last night's bedtime */
.k-sleep-histogram {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 36px;
}
.k-sleep-histo-bar {
  flex: 1;
  min-height: 2px;
  background: var(--k-deep-stone, #231F1C);
  border-radius: 2px 2px 0 0;
  transition: background 0.15s ease;
}
.k-sleep-histo-bar--empty {
  height: 3px !important;
  opacity: 0.6;
}
.k-sleep-histo-bar--in-window {
  background: rgba(74, 155, 142, 0.45);
}
.k-sleep-histo-bar--mode {
  background: var(--k-sage, #7A8B6F);
}
.k-sleep-histo-bar--last {
  background: var(--k-copper, #C45E3A);
}
.k-sleep-histo-bar--last.k-sleep-histo-bar--mode {
  background: var(--k-copper, #C45E3A);
}

.k-sleep-histo-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  color: var(--k-muted, #6B5E53);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.k-sleep-histo-legend > span:not(.k-sleep-histo-legend-dot):not(:last-child) {
  margin-right: 8px;
}
.k-sleep-histo-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}
.k-sleep-histo-legend-dot--window { background: rgba(74, 155, 142, 0.45); }
.k-sleep-histo-legend-dot--mode { background: var(--k-sage, #7A8B6F); }
.k-sleep-histo-legend-dot--last { background: var(--k-copper, #C45E3A); }

.k-sleep-window-track,
.k-sleep-window-range {
  position: absolute;
  top: 16px;
  height: 4px;
  border-radius: 4px;
}
.k-sleep-window-track {
  left: 0;
  right: 0;
  background: var(--k-deep-stone, #231F1C);
}
.k-sleep-window-range {
  background: var(--k-sage, #7A8B6F);
}
.k-sleep-window-pip {
  position: absolute;
  top: 10px;
  width: 8px;
  height: 16px;
  margin-left: -4px;
  border-radius: 4px;
  background: var(--k-copper-light, #D4816A);
  border: 2px solid var(--k-stone, #2C2824);
}
.k-sleep-window-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--k-muted, #6B5E53);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.k-sleep-window-foot {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 12px;
  color: var(--k-sub, #A89B8C);
  line-height: 1.55;
  margin: 22px 0 0;
}

/* ──────────────────────────────────────────────────────────────────
   Sleep · log form (Sleep Log Redesign — replaces the bedtime/wake-
   datetime + 5-star + textarea card).
   ────────────────────────────────────────────────────────────── */
.k-sleep-log-form {
  background: var(--k-stone, #2C2824);
  border: 1px solid var(--border-color, #3D3530);
  border-radius: 18px;
  padding: 32px 40px;
  margin-bottom: 24px;
}
@media (max-width: 700px) {
  .k-sleep-log-form { padding: 22px 22px; border-radius: 14px; }
}

/* Header row */
.k-sleep-log-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.k-sleep-log-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--k-parchment, #F5F0E8);
  margin: 4px 0 0;
}
.k-sleep-log-title em {
  color: var(--k-copper-light, #D4816A);
  font-style: italic;
}
@media (max-width: 700px) {
  .k-sleep-log-title { font-size: 26px; }
}
.k-sleep-log-altdate {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 13px;
  color: var(--k-muted, #6B5E53);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0 0 6px;
}
.k-sleep-log-altdate span {
  color: var(--k-copper-light, #D4816A);
  text-decoration: underline;
  text-decoration-color: rgba(212,129,106,0.4);
  text-underline-offset: 4px;
}
.k-sleep-log-altdate:hover span { text-decoration-color: var(--k-copper-light); }
.k-sleep-night-input {
  display: none;
  margin-top: 12px;
  background: var(--k-deep-stone, #231F1C);
  border: 1px solid var(--border-color, #3D3530);
  border-radius: 8px;
  color: var(--k-parchment, #F5F0E8);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  padding: 8px 12px;
  outline: none;
}
.k-sleep-night-input.show { display: inline-block; }

/* Time row: In bed · Time in bed · Up */
.k-sleep-time-row {
  display: flex;
  gap: 28px;
  align-items: stretch;
  margin-top: 28px;
}
@media (max-width: 700px) {
  .k-sleep-time-row { gap: 14px; flex-wrap: wrap; }
  .k-sleep-time-divider { display: none; }
}

.k-sleep-time-field {
  flex: 1;
  display: block;
  cursor: pointer;
  min-width: 0;
}
.k-sleep-time-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.k-sleep-time-glyph {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}
/* The selector below combines input[type="time"] + .k-sleep-time-input
   to outrank the global input[type="time"] { border: 1px solid teal-30
   !important } rule defined in prism-layout.css. Specificity (0,0,2,1)
   vs the global's (0,0,1,1). */
input[type="time"].k-sleep-time-input,
.k-sleep-time-input {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 400;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--k-parchment, #F5F0E8);
  font-variant-numeric: tabular-nums;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-color, #3D3530) !important;
  border-radius: 0 !important;
  padding: 8px 0 10px;
  margin-top: 10px;
  width: 100%;
  outline: none;
  cursor: pointer;
  position: relative;
  box-shadow: none !important;
}
input[type="time"].k-sleep-time-input:focus,
.k-sleep-time-input:focus {
  border-bottom-color: var(--k-muted, #6B5E53) !important;
}
.k-sleep-time-input::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  opacity: 0.55;
  cursor: pointer;
}
.k-sleep-time-input::-webkit-datetime-edit-ampm-field {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--k-sub, #A89B8C);
  text-transform: uppercase;
}
/* The colored under-accent comes from a 32px wide overlay positioned
   on the bottom border — done via a ::before on the field wrapper */
.k-sleep-time-field { position: relative; }
.k-sleep-time-field::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 25px;
  width: 32px;
  height: 1px;
  pointer-events: none;
}
.k-sleep-time-input--sage   ~ * { /* sibling marker — no-op */ }
.k-sleep-time-field:has(.k-sleep-time-input--sage)::after   { background: var(--k-sage,   #7A8B6F); }
.k-sleep-time-field:has(.k-sleep-time-input--copper)::after { background: var(--k-copper-light, #D4816A); }
@media (max-width: 700px) {
  .k-sleep-time-input { font-size: 30px; padding-bottom: 8px; }
  .k-sleep-time-field::after { bottom: 20px; }
}
.k-sleep-time-hint {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 12px;
  color: var(--k-muted, #6B5E53);
  margin-top: 6px;
}

/* Vertical divider between Bed / Duration / Up */
.k-sleep-time-divider {
  width: 1px;
  background: var(--border-color, #3D3530);
}

/* Computed duration block */
.k-sleep-duration {
  flex: 0 0 auto;
  min-width: 180px;
  padding: 0 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 700px) {
  .k-sleep-duration {
    flex: 1 1 100%;
    min-width: 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--border-color, #3D3530);
  }
}
.k-sleep-duration-value {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 400;
  font-size: 44px;
  line-height: 1;
  color: var(--k-parchment, #F5F0E8);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  margin-top: 8px;
}
.k-sleep-duration-delta {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 12px;
  color: var(--k-sage, #7A8B6F);
  margin-top: 6px;
  min-height: 1em;
}
@media (max-width: 700px) {
  .k-sleep-duration-value { font-size: 32px; }
}

/* Common block (kicker + content) */
.k-sleep-block {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color, #3D3530);
}
.k-kicker-aside {
  color: var(--k-muted, #6B5E53);
  opacity: 0.6;
}

/* Quality ladder — 4 words */
.k-quality-ladder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.k-quality-step {
  position: relative;
  background: transparent;
  border: 1px solid var(--border-color, #3D3530);
  border-radius: 10px;
  padding: 11px 10px 8px;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 14px;
  color: var(--k-sub, #A89B8C);
  cursor: pointer;
  transition: background 200ms, border-color 200ms, color 200ms;
  text-align: center;
  line-height: 1;
}
.k-quality-step::after {
  content: '';
  display: block;
  margin: 6px auto 0;
  height: 2px;
  width: 40%;
  background: var(--border-color, #3D3530);
  border-radius: 1px;
  opacity: 0.4;
  transition: width 200ms, background 200ms, opacity 200ms;
}
.k-quality-step:hover { color: var(--k-parchment, #F5F0E8); border-color: var(--k-muted, #6B5E53); }
.k-quality-step.active { color: var(--k-parchment, #F5F0E8); }
.k-quality-step.active::after { width: 100%; opacity: 1; }
.k-quality-step[data-tone="ember"].active        { border-color: #B85C50; background: rgba(184,92,80,0.10); }
.k-quality-step[data-tone="ember"].active::after { background: #B85C50; }
.k-quality-step[data-tone="copper-light"].active        { border-color: var(--k-copper-light, #D4816A); background: rgba(212,129,106,0.10); }
.k-quality-step[data-tone="copper-light"].active::after { background: var(--k-copper-light, #D4816A); }
.k-quality-step[data-tone="sage"].active         { border-color: var(--k-sage, #7A8B6F); background: rgba(122,139,111,0.10); }
.k-quality-step[data-tone="sage"].active::after  { background: var(--k-sage, #7A8B6F); }
.k-quality-step[data-tone="teal"].active         { border-color: var(--k-teal, #4A9B8E); background: rgba(74,155,142,0.10); }
.k-quality-step[data-tone="teal"].active::after  { background: var(--k-teal, #4A9B8E); }

/* Tag picker */
.k-tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.k-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border-color, #3D3530);
  cursor: pointer;
  transition: background 200ms, border-color 200ms, color 200ms;
}
.k-tag-chip-glyph {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--k-muted, #6B5E53);
}
.k-tag-chip > span:not(.k-tag-chip-glyph) {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 13px;
  color: var(--k-sub, #A89B8C);
  letter-spacing: 0.005em;
}
.k-tag-chip:hover { border-color: var(--k-muted, #6B5E53); }
.k-tag-chip:hover .k-tag-chip-glyph { color: var(--k-sub, #A89B8C); }
.k-tag-chip:hover > span:not(.k-tag-chip-glyph) { color: var(--k-parchment, #F5F0E8); }
.k-tag-chip.active {
  background: var(--k-deep-stone, #231F1C);
  border-color: var(--k-sage, #7A8B6F);
}
.k-tag-chip.active .k-tag-chip-glyph { color: var(--k-sage, #7A8B6F); }
.k-tag-chip.active > span:not(.k-tag-chip-glyph) { color: var(--k-parchment, #F5F0E8); }

/* Free note: single italic line.
   The element+class combo (input[type="text"].k-sleep-note-input)
   beats the global prism-layout teal-30 border (input[type="text"]
   alone, !important) on specificity. */
input[type="text"].k-sleep-note-input,
.k-sleep-note-input {
  margin-top: 10px;
  width: 100%;
  background: transparent;
  border: 0 !important;
  border-bottom: 1px solid var(--border-color, #3D3530) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 17px;
  color: var(--k-parchment, #F5F0E8);
  padding: 12px 0;
  outline: none;
  caret-color: var(--k-copper, #C45E3A);
}
.k-sleep-note-input::placeholder {
  color: var(--k-muted, #6B5E53);
  font-style: italic;
}
input[type="text"].k-sleep-note-input:focus,
.k-sleep-note-input:focus { border-bottom-color: var(--k-muted, #6B5E53) !important; }

/* Actions */
.k-sleep-form-actions {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.k-sleep-form-foot {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 13px;
  color: var(--k-muted, #6B5E53);
}
.k-sleep-form-buttons { display: flex; gap: 10px; }
.k-sleep-discard-btn,
.k-sleep-save-btn {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  padding: 12px 22px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 200ms, border-color 200ms, color 200ms;
  letter-spacing: 0.02em;
}
.k-sleep-discard-btn {
  background: transparent;
  color: var(--k-sub, #A89B8C);
  border-color: var(--border-color, #3D3530);
}
.k-sleep-discard-btn:hover { border-color: var(--k-muted, #6B5E53); color: var(--k-parchment, #F5F0E8); }
.k-sleep-save-btn {
  background: var(--k-copper, #C45E3A);
  color: var(--k-parchment, #F5F0E8);
  border-color: var(--k-copper, #C45E3A);
  font-weight: 500;
  padding: 12px 28px;
}
.k-sleep-save-btn:hover { background: #a84e30; border-color: #a84e30; }
@media (max-width: 700px) {
  .k-sleep-form-buttons { width: 100%; }
  .k-sleep-discard-btn { flex: 0 0 auto; }
  .k-sleep-save-btn { flex: 1; }
}

/* ══════════════════════════════════════════════════════════════════
   LOG FORMS — shared aesthetic across Food, Medication, Vitals,
   Supplements, Measurements, Cycle, etc.
   Pattern: italic question · primary input · optional chips · verb save
   Designed for the "All Log Forms" handoff — see Kenki design canvas.
   ══════════════════════════════════════════════════════════════════ */
.k-log-card {
  background: var(--k-stone, #2C2824);
  border: 1px solid var(--k-border, #3D3530);
  border-radius: 18px;
  padding: 32px 40px;
  margin-bottom: 24px;
}
@media (max-width: 700px) {
  .k-log-card { padding: 22px; border-radius: 14px; }
}

/* Header: kicker + italic question + optional right-side meta */
.k-log-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.k-log-q {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-top: 4px;
  color: var(--k-parchment, #F5F0E8);
}
.k-log-q em { font-style: italic; color: var(--k-copper-light, #D4816A); }
.k-log-meta {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 13px;
  color: var(--k-muted, #6B5E53);
  padding-bottom: 6px;
}
.k-log-meta strong { color: var(--k-parchment, #F5F0E8); font-weight: 400; }
@media (max-width: 700px) {
  .k-log-q { font-size: 26px; }
}

/* Big italic free-text "what just happened" line */
.k-log-line {
  margin-top: 26px;
  padding: 18px 0;
  border-bottom: 1px solid var(--k-border, #3D3530);
}
.k-log-line-input,
input.k-log-line-input {
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
  color: var(--k-parchment, #F5F0E8);
  caret-color: var(--k-copper, #C45E3A);
}
.k-log-line-input::placeholder { color: var(--k-muted, #6B5E53); font-style: italic; }
.k-log-line-hint {
  margin-top: 6px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--k-muted, #6B5E53);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.k-log-line-hint a, .k-log-line-hint button {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--k-copper-light, #D4816A); cursor: pointer;
}

/* Section kicker for sub-areas inside the log card */
.k-log-sub {
  margin-top: 22px;
}
.k-log-sub-head {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--k-muted, #6B5E53);
  font-weight: 500;
  margin-bottom: 10px;
}

/* Recents grid — 2 columns on desktop, 1 on mobile */
.k-log-recents {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 700px) { .k-log-recents { grid-template-columns: 1fr; } }
.k-log-recent {
  padding: 12px 16px;
  border: 1px solid var(--k-border, #3D3530);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  text-align: left;
  width: 100%;
}
.k-log-recent:hover { border-color: var(--k-copper-light, #D4816A); background: var(--k-deep-stone, #231F1C); }
.k-log-recent-name {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 15px;
  color: var(--k-parchment, #F5F0E8);
  line-height: 1.3;
}
.k-log-recent-when {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 12px;
  color: var(--k-muted, #6B5E53);
  margin-top: 2px;
}
.k-log-recent-meta {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--k-sub, #A89B8C);
  letter-spacing: 0.06em;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* Two-column row for chips ("When" + "How it sat") */
.k-log-pair {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 700px) { .k-log-pair { grid-template-columns: 1fr; gap: 18px; } }

/* Italic-serif chips — round, pill-shaped, optional glyph */
.k-log-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.k-log-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--k-border, #3D3530);
  background: transparent;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--k-sub, #A89B8C);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  user-select: none;
}
.k-log-chip:hover { color: var(--k-parchment, #F5F0E8); border-color: var(--k-muted, #6B5E53); }
.k-log-chip.active {
  background: var(--k-deep-stone, #231F1C);
  border-color: var(--k-copper-light, #D4816A);
  color: var(--k-parchment, #F5F0E8);
}
.k-log-chip-glyph {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--k-muted, #6B5E53);
}
.k-log-chip.active .k-log-chip-glyph { color: var(--k-copper-light, #D4816A); }

/* Save bar — italic left meta + verb-action button right */
.k-log-savebar {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.k-log-savebar-meta {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 13px;
  color: var(--k-muted, #6B5E53);
  flex: 1 1 auto;
  min-width: 0;
}
.k-log-save {
  background: var(--k-copper, #C45E3A);
  color: var(--k-parchment, #F5F0E8);
  border: 0;
  border-radius: 10px;
  padding: 12px 28px;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.k-log-save:hover { background: var(--k-copper-dark, #A34A2C); }
.k-log-save--teal { background: var(--k-teal, #4A9B8E); }
.k-log-save--teal:hover { background: #3d8378; }
.k-log-save--sage { background: var(--k-sage, #7A8B6F); color: var(--k-ink, #1A1614); }
.k-log-save--sage:hover { background: #677759; }
@media (max-width: 700px) {
  .k-log-savebar-meta { width: 100%; }
  .k-log-save { width: 100%; }
}

/* Collapsible "Edit details" toggle for hidden fields */
.k-log-toggle {
  margin-top: 20px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--k-sub, #A89B8C);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.k-log-toggle:hover { color: var(--k-copper-light, #D4816A); }
.k-log-details {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--k-border, #3D3530);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.k-log-details[hidden] { display: none; }
.k-log-details .form-group { margin-bottom: 0; }
.k-log-details .form-group label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--k-muted, #6B5E53);
}
.k-log-details .form-group input,
.k-log-details .form-group select {
  width: 100%;
  background: var(--k-deep-stone, #231F1C);
  border: 1px solid var(--k-border, #3D3530);
  border-radius: 8px;
  color: var(--k-parchment, #F5F0E8);
  padding: 10px 12px;
  font-size: 14px;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE-APP TUNING — common rules applied across module pages so
   the PWA behaves well in iOS / Android packaged builds. Per the
   "Kenki Mobile Only" design, mobile gets dedicated polish while
   desktop layouts stay untouched.

   Goals: iOS safe-area insets, 44px+ touch targets, dropped
   redundant cards on small screens, italic timeline pattern.
   ══════════════════════════════════════════════════════════════════ */

/* Safe-area insets for notch / home indicator on iOS PWAs.
   Applied to the .prism-content wrapper so every module page
   (and the dashboard tabs) get the same padding without per-page work. */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 900px) {
    .prism-content {
      padding-top: max(14px, env(safe-area-inset-top, 0));
      padding-left: max(14px, env(safe-area-inset-left, 0));
      padding-right: max(14px, env(safe-area-inset-right, 0));
      padding-bottom: max(20px, env(safe-area-inset-bottom, 0));
    }
  }
}

/* Touch targets — every actionable element on mobile gets a 44px
   minimum so users can hit it cleanly with a thumb. Not enforced
   universally because some chips are intentionally smaller on
   desktop; the .k-touch class opt-in marks elements that need it
   on mobile. */
@media (max-width: 700px) {
  .k-touch,
  .k-quickadd-tile,
  .k-log-chip,
  .btn,
  .toggle-btn { min-height: 44px; }
}

/* Inline edit + delete actions on log rows (Water + future modules).
   Same visual language as the diary actions on Sleep / Activity. */
.log-item-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}
.log-item-action {
  background: transparent;
  border: 1px solid transparent;
  color: var(--k-sub, #A89B8C);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.log-item-action:hover {
  background: var(--k-deep-stone, #1f1c19);
  color: var(--k-parchment, #F5F0E8);
  border-color: var(--k-border, #3D3530);
}
.log-item-action--danger { color: rgba(184, 92, 80, 0.85); }
.log-item-action--danger:hover {
  border-color: rgba(184, 92, 80, 0.4);
  color: var(--k-ember, #B85C50);
}
.log-item.editing {
  outline: 1px solid var(--k-copper-light, #D4816A);
  outline-offset: 2px;
}

/* ── Water mobile ──────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* The quick-add tile grid already covers the "Log Water" form
     for the common case (one tap to log a glass). Hide the
     glass/ml toggle + amount input card on phones to remove the
     scroll-eating duplicate. The user can still type a custom
     amount via the dashed "Custom" tile which focuses #water-amount. */
  body[data-page="water"] .card:has(#water-form),
  body:not([data-page]) main:has(#water-form) > .prism-content > .card:has(#water-form) {
    /* Use a JS-set page marker so we only hide on water — fall back
       to selector-based detection if the marker isn't present. */
  }
  /* Robust hide: target the form itself and walk up to the card.
     :has() is supported in modern WebKit + Chromium; older browsers
     just keep showing the form (graceful). */
  /* The 'Log Water' card is the form path used by the Custom tile and
     by edit-mode (the edit button on a row pre-fills the amount). Keep
     it visible on mobile but compact. */
  .card:has(form#water-form) { padding: 16px; margin-bottom: 14px; }
  .card:has(form#water-form) > h2 { font-size: 0.95rem; margin-bottom: 8px; }
  .card:has(form#water-form) .toggle-group { padding: 0.15rem; }
  .card:has(form#water-form) .toggle-btn { padding: 0.4rem 0.7rem; font-size: 0.74rem; }

  /* (Legacy "italic timeline" overrides for #today-log .log-item were
     removed May 2026 — water.html now ships its own design-matching
     row styles inline. Keeping that injected ::before dot + span:first/
     last-of-type sizing was overriding the new vessel/time/del layout.)
  */

  /* History (last 7 days) — render rows lighter on mobile to match
     the timeline aesthetic without redoing the JS. */
  #history-list .history-row {
    padding: 10px 14px;
    border-bottom: 1px solid var(--k-border);
    background: transparent;
    font-size: 12.5px;
  }
  #history-list .history-row:last-child { border-bottom: 0; }
  #history-list .history-row span:first-child {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--k-parchment);
  }
  #history-list .history-row span:last-child {
    font-family: var(--font-mono);
    color: var(--k-sub);
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  /* Quick-add tiles — bigger glyphs, tighter padding on phones. */
  .k-quickadd-grid { gap: 8px; }
  .k-quickadd-tile { padding: 14px 8px; min-height: 80px; }
  .k-quickadd-tile-glyph { font-size: 20px; }

  /* The trends card with Chart.js — scope down on mobile so it's not
     a wasted scroll target when the data is the same as the 7-day list. */
  .charts-section { margin-top: 1rem; }
  .charts-section h3 { font-size: 0.75rem; }
  .chart-card { padding: 0.9rem; }
}

/* ── Vitals mobile ─────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* Tighten the log form so it fits the screen */
  .log-form { padding: 16px; margin-bottom: 18px; border-radius: 14px; }
  .log-form h2 { font-size: 0.95rem; margin-bottom: 12px; }
  .log-form .form-row { grid-template-columns: 1fr; gap: 10px; }

  /* Vitals records — bigger touch targets on Edit / Del so they
     pass 44px on phones, and a calmer color treatment that matches
     the timeline aesthetic in the design canvas. */
  .record-card { padding: 12px 14px; margin-bottom: 8px; }
  .record-card .btn-edit,
  .record-card .btn-danger {
    font-size: 12px;
    padding: 8px 14px;
    border-radius: 8px;
    min-height: 36px;
    min-width: 56px;
  }
  .record-card .btn-edit {
    color: var(--k-sub, #A89B8C);
    border-color: var(--k-border, #3D3530);
    background: transparent;
  }
  .record-card .btn-edit:hover,
  .record-card .btn-edit:focus {
    color: var(--k-parchment, #F5F0E8);
    border-color: var(--k-copper-light, #D4816A);
    background: var(--k-deep-stone, #1f1c19);
  }
  .record-card .btn-danger {
    color: rgba(184, 92, 80, 0.85);
    border-color: rgba(184, 92, 80, 0.3);
    background: transparent;
  }
  .record-card .btn-danger:hover,
  .record-card .btn-danger:focus {
    color: var(--k-ember, #B85C50);
    border-color: rgba(184, 92, 80, 0.6);
    background: rgba(184, 92, 80, 0.08);
  }

  /* Metric tile row — let the three tiles stay in a row but compact */
  .k-metric-row { gap: 8px; }
  .k-metric-tile { padding: 12px 12px 10px; }
  .k-metric-tile-v .num { font-size: 22px; }

  /* 14-day chart card — keep it but tighter */
  .k-mv-chart-card { padding: 14px; margin-bottom: 16px; }

  /* Chip filter scroll — no wrap, scroll horizontally */
  .k-chip-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin-bottom: 16px; }
  .k-chip-scroll::-webkit-scrollbar { display: none; }
}

/* ── Medication mobile ─────────────────────────────────────────── */
@media (max-width: 700px) {
  /* Medication cards: tighter padding, bigger tap targets on actions */
  .medication-card { padding: 14px 16px; margin-bottom: 8px; border-radius: 12px; }
  .medication-header h3 { font-size: 0.95rem; }
  .medication-actions { gap: 8px; flex-wrap: wrap; }
  .btn-sm-edit,
  .btn-sm-danger {
    padding: 8px 14px;
    font-size: 12px;
    border-radius: 8px;
    min-height: 36px;
    min-width: 64px;
  }
  .btn-sm-edit:hover,
  .btn-sm-edit:focus { border-color: var(--k-copper-light, #D4816A); background: var(--k-deep-stone, #1f1c19); }
  .btn-sm-danger:hover,
  .btn-sm-danger:focus { background: rgba(184, 92, 80, 0.08); border-color: rgba(184, 92, 80, 0.6); }

  /* Add medication modal — single column, smaller padding */
  .form-modal { padding: 16px; border-radius: 14px; margin-bottom: 18px; }
  .form-modal h3 { font-size: 0.95rem; margin-bottom: 12px; }
  .form-modal .form-row { grid-template-columns: 1fr; gap: 10px; }

  /* Today's schedule — stack tighter */
  .schedule-section { margin-top: 1.5rem; }
  .schedule-item { padding: 12px 14px; gap: 12px; border-radius: 10px; margin-bottom: 6px; }
  .schedule-time { min-width: 64px; font-size: 0.9rem; }
  .schedule-name { font-size: 0.9rem; }

  /* Inline edit panel — compact form fields */
  .inline-edit { margin-top: 12px; }
  .inline-edit .form-row { grid-template-columns: 1fr; gap: 8px; }
  .inline-edit .form-actions { flex-direction: row; gap: 8px; flex-wrap: wrap; }

  /* Today's schedule cards — bump to 44px tap targets (Apple HIG).
     Selector targets the new k-med-sched-* classes the renderer uses,
     and stays specific enough to beat any inline styles. */
  #todayItems .k-med-sched-card { padding: 16px 16px !important; margin-bottom: 10px !important; border-radius: 14px !important; }
  #todayItems .k-med-sched-row { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  #todayItems .k-med-sched-toggle {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    align-self: flex-start !important;
  }
  #todayItems .k-med-sched-toggle input[type="checkbox"] { width: 22px !important; height: 22px !important; }
  #todayItems .k-med-sched-action {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 13.5px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    border-radius: 10px !important;
  }
}

/* ── Supplements mobile ────────────────────────────────────────── */
@media (max-width: 700px) {
  /* Each .supplement-card has tiny inline-styled action buttons.
     Override the inline font-size/padding on phones so they hit
     the 36px minimum. */
  .supplement-card { padding: 14px 16px; }
  .supplement-card .btn-sm,
  .supplement-card .btn-sm-edit,
  .supplement-card .btn-sm-ghost,
  .supplement-card .btn-sm-danger {
    font-size: 12px !important;
    padding: 8px 12px !important;
    min-height: 36px !important;
    min-width: 56px !important;
    border-radius: 8px !important;
  }
  .supplement-actions { gap: 8px; }
  .supplement-meta { grid-template-columns: 1fr; gap: 6px; }
  /* Add-supplement card form */
  .grid-3 { grid-template-columns: 1fr; gap: 10px; }
}

/* ── Measurements mobile ───────────────────────────────────────── */
@media (max-width: 700px) {
  /* The mobile measurements list renders inline-styled cards with
     a tiny Del button. Override sizing on phones. */
  #measurements-list .btn-sm,
  #measurements-list .btn-sm-ghost {
    font-size: 12px !important;
    padding: 8px 12px !important;
    min-height: 36px !important;
    min-width: 56px !important;
    border-radius: 8px !important;
    color: var(--k-sub, #A89B8C) !important;
  }
  #measurements-list .btn-sm-ghost:hover,
  #measurements-list .btn-sm-ghost:focus {
    border-color: rgba(184, 92, 80, 0.6) !important;
    color: var(--k-ember, #B85C50) !important;
    background: rgba(184, 92, 80, 0.08) !important;
  }
  /* Form rows: collapse to single column on phones */
  .form-row.three { grid-template-columns: 1fr; gap: 10px; }
  /* History table — kept on desktop, hidden in favour of the mobile card list. */
  .table-wrap table { font-size: 12px; }
}

/* ── Cycle (menstrual) mobile ──────────────────────────────────── */
@media (max-width: 700px) {
  /* Cycle list rows have inline-styled Edit/Del with 10px font / 3px
     padding. Bump them on phones the same way as Supplements. */
  #cycle-list .btn-sm,
  #cycle-list .btn-sm-edit,
  #cycle-list .btn-sm-ghost {
    font-size: 12px !important;
    padding: 8px 12px !important;
    min-height: 36px !important;
    min-width: 56px !important;
    border-radius: 8px !important;
  }
  #cycle-list .btn-sm-edit:hover,
  #cycle-list .btn-sm-edit:focus {
    border-color: var(--k-copper-light, #D4816A) !important;
    background: var(--k-deep-stone, #1f1c19) !important;
  }
  #cycle-list .btn-sm-ghost:hover,
  #cycle-list .btn-sm-ghost:focus {
    border-color: rgba(184, 92, 80, 0.6) !important;
    color: var(--k-ember, #B85C50) !important;
    background: rgba(184, 92, 80, 0.08) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   VITALS — Entries list redesign per the mobile design canvas.
   Single-row layout: time/date · label+value · status badge.
   Tap a row to open the inline edit panel.
   ══════════════════════════════════════════════════════════════════ */
.k-vitals-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 10px;
  padding: 0 2px;
}
.k-vitals-section-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--k-muted, #6B5E53);
}

/* Date-grouped timeline for the entries list. One italic Cormorant
   heading per day, cards stack tightly underneath. Same pattern as
   Movement / Recovery's recent-entries list. */
.k-vitals-day { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.k-vitals-day:last-child { margin-bottom: 0; }
.k-vitals-day-head {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 16px;
  color: var(--k-muted, #6B5E53);
  letter-spacing: 0.01em;
  padding-left: 2px;
}
.k-vitals-day .k-log-card { margin-bottom: 0; }
.k-vitals-section-actions {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
}
.k-vitals-section-log {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--k-copper-light, #D4816A);
  text-decoration: none;
  cursor: pointer;
}
.k-vitals-section-log:hover { color: var(--k-copper, #C45E3A); }
.k-vitals-section-export {
  background: transparent;
  border: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--k-sub, #A89B8C);
  cursor: pointer;
  padding: 0;
}
.k-vitals-section-export:hover { color: var(--k-parchment, #F5F0E8); }

/* The list itself becomes a single card with rows separated by
   borders — same architecture as the Sleep diary. */
#vitals-list {
  background: var(--k-stone, #2C2824);
  border: 1px solid var(--k-border, #3D3530);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
}
#vitals-list > .empty-state,
#vitals-list > .error-state { background: transparent; border: 0; }

/* The row container is a vertical flex so the inline edit panel can
   span full-width below the main row. The .k-vital-row-main holds
   the tap-area (time + body + status); .k-vital-row-actions sits
   inline next to it on the right with explicit Edit + Delete icons. */
.k-vital-row {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--k-border, #3D3530);
  position: relative;
  transition: background 0.15s ease;
}
.k-vital-row:last-child { border-bottom: 0; }
.k-vital-row:hover { background: var(--k-deep-stone, #1f1c19); }
.k-vital-row.editing { background: var(--k-deep-stone, #1f1c19); }
.k-vital-row.editing::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--k-copper-light, #D4816A);
}
.k-vital-row-main {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 8px 14px 14px;
  cursor: pointer;
  flex: 1;
}
.k-vital-row > .k-vital-row-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 2;
}
.k-vital-row:hover > .k-vital-row-actions,
.k-vital-row:focus-within > .k-vital-row-actions { opacity: 1; }
.k-vital-row-action {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--k-stone, #2C2824);
  border: 1px solid var(--k-border, #3D3530);
  color: var(--k-sub, #A89B8C);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.k-vital-row-action:hover {
  background: var(--k-deep-stone, #1f1c19);
  color: var(--k-parchment, #F5F0E8);
  border-color: var(--k-copper-light, #D4816A);
}
.k-vital-row-action--danger { color: rgba(184, 92, 80, 0.85); }
.k-vital-row-action--danger:hover {
  border-color: rgba(184, 92, 80, 0.6);
  color: var(--k-ember, #B85C50);
  background: rgba(184, 92, 80, 0.08);
}
@media (max-width: 700px) {
  /* On phones, always show the actions — no hover. Keep them absolutely
     positioned (matching desktop) instead of stacking below, which wasted
     ~50px of vertical space per row. The main content gets right-padding
     to keep text/status clear of the action buttons. */
  .k-vital-row > .k-vital-row-actions { opacity: 1; }
  .k-vital-row-action { width: 32px; height: 32px; }
  .k-vital-row-main { padding-right: 84px; }
}

.k-vital-row-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--k-muted, #6B5E53);
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  word-spacing: -0.05em;
}
.k-vital-row-body { min-width: 0; }
.k-vital-row-label {
  font-size: 11px;
  color: var(--k-sub, #A89B8C);
  letter-spacing: 0.04em;
}
.k-vital-row-value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--k-parchment, #F5F0E8);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-top: 2px;
}
.k-vital-row-unit {
  font-size: 11px;
  color: var(--k-sub, #A89B8C);
  font-style: italic;
  margin-left: 2px;
  font-variant-numeric: normal;
}
.k-vital-row-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11.5px;
  color: var(--k-muted, #6B5E53);
  margin-top: 4px;
  line-height: 1.4;
}

.k-vital-row-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.k-vital-row-status--sage    { color: var(--k-sage, #7A8B6F); }
.k-vital-row-status--copper  { color: var(--k-copper-light, #D4816A); }
.k-vital-row-status--amber   { color: #F59E0B; }
.k-vital-row-status--neutral { color: var(--k-muted, #6B5E53); }

/* Inline edit form, expands when row is tapped. Spans the full row. */
.k-vital-edit {
  grid-column: 1 / -1;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--k-border, #3D3530);
}
.k-vital-edit-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.k-vital-edit-row label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--k-muted, #6B5E53);
}
.k-vital-edit-row input {
  background: var(--k-deep-stone, #231F1C);
  border: 1px solid var(--k-border, #3D3530);
  border-radius: 8px;
  color: var(--k-parchment, #F5F0E8);
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  width: 100%;
  font-family: var(--font-sans, 'Inter', sans-serif);
}
.k-vital-edit-row input:focus { border-color: var(--k-copper-light, #D4816A); }

.k-vital-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.k-vital-edit-save,
.k-vital-edit-cancel,
.k-vital-edit-delete {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  min-height: 38px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  letter-spacing: 0.02em;
}
.k-vital-edit-save {
  background: var(--k-copper, #C45E3A);
  border: 0;
  color: var(--k-parchment, #F5F0E8);
}
.k-vital-edit-save:hover { background: var(--k-copper-dark, #A34A2C); }
.k-vital-edit-cancel {
  background: transparent;
  border: 1px solid var(--k-border, #3D3530);
  color: var(--k-sub, #A89B8C);
}
.k-vital-edit-cancel:hover { color: var(--k-parchment, #F5F0E8); border-color: var(--k-muted, #6B5E53); }
.k-vital-edit-delete {
  background: transparent;
  border: 1px solid rgba(184, 92, 80, 0.4);
  color: rgba(184, 92, 80, 0.9);
  margin-left: auto;
}
.k-vital-edit-delete:hover {
  border-color: rgba(184, 92, 80, 0.7);
  background: rgba(184, 92, 80, 0.08);
  color: var(--k-ember, #B85C50);
}

/* ── Appointments mobile ───────────────────────────────────────── */
@media (max-width: 700px) {
  /* Appointment cards have an action row with Edit / Complete /
     Cancel / Delete. Same tap-friendly bump as the other modules. */
  #appointmentsList .appt-card,
  #appointments-list .appt-card { padding: 14px 16px; }
  .appt-actions { gap: 8px; flex-wrap: wrap; margin-top: 12px; }
  .appt-actions .btn-sm,
  .appt-actions .btn-sm-edit,
  .appt-actions .btn-sm-success,
  .appt-actions .btn-sm-danger,
  .appt-actions .btn-sm-ghost {
    font-size: 12px !important;
    padding: 8px 12px !important;
    min-height: 36px !important;
    min-width: 64px !important;
    border-radius: 8px !important;
  }
  .appt-actions .btn-sm-edit:hover,
  .appt-actions .btn-sm-edit:focus { border-color: var(--k-copper-light, #D4816A) !important; background: var(--k-deep-stone, #1f1c19) !important; }
  .appt-actions .btn-sm-ghost:hover,
  .appt-actions .btn-sm-ghost:focus,
  .appt-actions .btn-sm-danger:hover,
  .appt-actions .btn-sm-danger:focus {
    border-color: rgba(184, 92, 80, 0.6) !important;
    color: var(--k-ember, #B85C50) !important;
    background: rgba(184, 92, 80, 0.08) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Vitals · Log a Reading — editorial redesign
   The form opens with an italic question, segmented type chips replace
   the dropdown, big serif italic numbers replace text inputs, position
   and context come forward as chips, and a single verb-first save
   button replaces the boxed primary/secondary pair.
   ════════════════════════════════════════════════════════════════════ */
.k-vlog-card {
  background: var(--k-stone, #2a2622);
  border: 1px solid var(--k-border, rgba(212, 199, 184, .12));
  border-radius: 16px;
  padding: 24px 22px 22px;
  margin-bottom: 28px;
}
.k-vlog-head { padding-bottom: 4px; }
.k-vlog-kick {
  display: block;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--k-muted, #807468);
  font-weight: 500;
  margin-bottom: 6px;
}
.k-vlog-q {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--k-parchment, #F5F0E8);
  margin: 0;
}
.k-vlog-q em { font-style: italic; color: var(--k-copper-light, #D4816A); }
.k-vlog-sub {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--k-muted, #807468);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  letter-spacing: .06em;
}

/* Segmented type selector — replaces the boxed <select> dropdown */
.k-vlog-segmented {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--k-border, rgba(212, 199, 184, .12));
  border-radius: 999px;
  padding: 3px;
  background: var(--k-deep-stone, #1f1c19);
  margin: 16px 0 18px;
  overflow: hidden;
}
.k-vlog-seg {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 9px 4px;
  font-size: 11.5px;
  letter-spacing: .04em;
  font-weight: 500;
  color: var(--k-sub, #A89B8C);
  cursor: pointer;
  font-family: var(--font-sans, 'Inter', sans-serif);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  text-align: center;
  white-space: nowrap;
}
.k-vlog-seg:hover { color: var(--k-parchment, #F5F0E8); }
.k-vlog-seg.is-active {
  background: var(--k-stone, #2a2622);
  color: var(--k-copper-light, #D4816A);
  border-color: rgba(212, 129, 106, .25);
}

/* Big editorial number block — Top / · / Bottom */
.k-vlog-numeric {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--k-border, rgba(212, 199, 184, .12));
  position: relative;
}
.k-vlog-numeric[hidden] { display: none !important; }
.k-vlog-card [hidden] { display: none !important; }
.k-vlog-numeric--single { gap: 0; }
.k-vlog-num { flex: 1; min-width: 0; }
.k-vlog-num--full { width: 100%; }
.k-vlog-numkick {
  display: block;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--k-muted, #807468);
  font-weight: 500;
  margin-bottom: 8px;
}
.k-vlog-numrow {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.k-vlog-numinput {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 400;
  font-size: 64px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--k-parchment, #F5F0E8);
  background: transparent;
  border: 0;
  outline: none;
  padding: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  -moz-appearance: textfield;
  appearance: textfield;
}
/* In single-value mode (Pulse / O₂ / Temp / Weight / Glucose) the input
   shouldn't stretch — it should sit snug to its unit suffix. Fixed
   width fits ~3 italic-serif digits at 64px (Cormorant glyphs are wide). */
.k-vlog-numeric--single .k-vlog-numrow { gap: 10px; align-items: baseline; }
.k-vlog-numeric--single .k-vlog-numinput {
  width: 160px !important;
  min-width: 0 !important;
  max-width: 60vw !important;
  flex: 0 0 auto !important;
  field-sizing: fixed !important;
}
.k-vlog-numeric--single .k-vlog-numunit { padding-bottom: 14px; }
.k-vlog-numinput::-webkit-outer-spin-button,
.k-vlog-numinput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.k-vlog-numinput::placeholder { color: rgba(168, 155, 140, .35); }
.k-vlog-numinput:focus { color: var(--k-copper-light, #D4816A); }
.k-vlog-numunit {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--k-muted, #807468);
  margin-left: 4px;
  align-self: flex-end;
  padding-bottom: 8px;
  white-space: nowrap;
}
.k-vlog-numslash {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 44px;
  color: var(--k-muted, #807468);
  padding-bottom: 6px;
  flex: 0 0 auto;
}

/* Italic narrative line — soft assessment based on last reading */
.k-vlog-narrative {
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--k-deep-stone, #1f1c19);
  border-radius: 10px;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--k-sub, #A89B8C);
}
.k-vlog-narrative em { font-style: italic; }
.k-vlog-narrative-num { color: var(--k-parchment, #F5F0E8); font-style: italic; }

/* Position + context chips */
.k-vlog-section { margin-top: 18px; }
.k-vlog-chips {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.k-vlog-chip {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--k-border, rgba(212, 199, 184, .12));
  background: transparent;
  color: var(--k-sub, #A89B8C);
  font-size: 12px;
  letter-spacing: .02em;
  font-family: var(--font-sans, 'Inter', sans-serif);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.k-vlog-chip:hover { color: var(--k-parchment, #F5F0E8); border-color: rgba(212, 199, 184, .22); }
.k-vlog-chip.is-sel {
  background: rgba(212, 129, 106, .1);
  border-color: var(--k-copper-light, #D4816A);
  color: var(--k-copper-light, #D4816A);
}
.k-vlog-chip--sage.is-sel {
  background: rgba(168, 187, 154, .1);
  border-color: var(--k-sage, #A8BB9A);
  color: var(--k-sage, #A8BB9A);
}
.k-vlog-chip--add { color: var(--k-muted, #807468); border-style: dashed; }

/* Inline themed input that replaces window.prompt() for the "+ note" chip.
 * Same pill shape and footprint as the surrounding .k-vlog-chip elements;
 * sage accent on focus to mirror the existing context-chip palette. */
.k-vlog-note-input {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--k-sage, #A8BB9A);
  background: rgba(168, 187, 154, .08);
  color: var(--k-parchment, #F5F0E8);
  font-size: 12px;
  letter-spacing: .02em;
  font-family: var(--font-sans, 'Inter', sans-serif);
  outline: none;
  caret-color: var(--k-sage, #A8BB9A);
  min-width: 140px;
  max-width: 220px;
  transition: background .18s ease, border-color .18s ease;
}
.k-vlog-note-input::placeholder {
  color: var(--k-muted, #807468);
  font-style: italic;
}
.k-vlog-note-input:focus {
  background: rgba(168, 187, 154, .14);
  border-color: var(--k-sage, #A8BB9A);
}

/* "Note the reading" — single verb-first save button */
.k-vlog-actions {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--k-border, rgba(212, 199, 184, .12));
}
.k-vlog-save {
  width: 100%;
  padding: 14px 0;
  border-radius: 12px;
  border: 0;
  background: var(--k-copper, #C45E3A);
  color: var(--k-parchment, #F5F0E8);
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .18s ease;
  min-height: 48px;
}
.k-vlog-save:hover { background: #a84e30; }
.k-vlog-save:active { transform: translateY(1px); }

/* Mobile tightening */
@media (max-width: 720px) {
  .k-vlog-card { padding: 20px 18px 18px; border-radius: 14px; }
  .k-vlog-q { font-size: 26px; }
  .k-vlog-segmented { grid-template-columns: repeat(4, 1fr); border-radius: 999px; }
  .k-vlog-seg { padding: 10px 4px; font-size: 11px; }
  .k-vlog-numinput { font-size: 52px; }
  .k-vlog-numslash { font-size: 36px; padding-bottom: 4px; }
  .k-vlog-narrative { font-size: 13px; }
  .k-vlog-chip { padding: 8px 13px; font-size: 12px; min-height: 36px; }
  .k-vlog-note-input { padding: 8px 13px; font-size: 12px; min-height: 36px; min-width: 130px; }
  .k-vlog-save { padding: 16px 0; font-size: 14px; min-height: 52px; }
}
@media (max-width: 380px) {
  .k-vlog-q { font-size: 23px; }
  .k-vlog-numinput { font-size: 44px; }
  .k-vlog-numslash { font-size: 30px; }
}

/* ════════════════════════════════════════════════════════════════════
   Medication · Today's Schedule — bumped tap targets (≥36px on
   desktop, 44px on phone). Replaces the inline-styled buttons that
   were ~30px and hard to hit on the packaged iOS / Android build.
   ════════════════════════════════════════════════════════════════════ */
.k-med-sched-card {
  background: var(--k-stone, #2C2824);
  border: 1px solid var(--k-border, #3D3530);
  border-left: 3px solid var(--k-copper, #C45E3A);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 12px;
}
.k-med-sched-card.is-taken { opacity: .6; }
.k-med-sched-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.k-med-sched-info { flex: 1; min-width: 0; }
.k-med-sched-name {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 20px;
  color: var(--k-parchment, #F5F0E8);
  font-weight: 500;
  line-height: 1.2;
}
.k-med-sched-meta {
  font-size: 13px;
  color: var(--k-muted, #8A7D70);
  margin-top: 4px;
}
.k-med-sched-time {
  font-size: 12.5px;
  color: var(--k-sage, #7A8B6F);
  margin-top: 4px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  letter-spacing: .04em;
}

/* "Mark taken" pill — ≥40px tap target with checkbox inline */
.k-med-sched-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--k-border, #3D3530);
  background: transparent;
  color: var(--k-sub, #A89B8C);
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 12.5px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.k-med-sched-toggle:hover,
.k-med-sched-toggle:focus-within {
  border-color: var(--k-copper-light, #D4816A);
  color: var(--k-parchment, #F5F0E8);
}
.k-med-sched-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--k-copper, #C45E3A);
  cursor: pointer;
}
.k-med-sched-toggle:has(input:checked) {
  background: rgba(168, 187, 154, .12);
  border-color: var(--k-sage, #A8BB9A);
  color: var(--k-sage, #A8BB9A);
}

/* Edit / Delete row — pill buttons with ≥40px hit area */
.k-med-sched-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.k-med-sched-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 88px;
  padding: 8px 16px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--k-border, #3D3530);
  color: var(--k-sub, #A89B8C);
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 13px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.k-med-sched-action:hover,
.k-med-sched-action:focus {
  border-color: var(--k-copper-light, #D4816A);
  color: var(--k-parchment, #F5F0E8);
  background: var(--k-deep-stone, #1f1c19);
}
.k-med-sched-action--del:hover,
.k-med-sched-action--del:focus {
  border-color: rgba(184, 92, 80, 0.6);
  color: var(--k-ember, #B85C50);
  background: rgba(184, 92, 80, 0.08);
}

/* Phone tightening — bump to 44px hit area, keep things readable */
@media (max-width: 720px) {
  .k-med-sched-card { padding: 16px 16px; border-radius: 14px; }
  .k-med-sched-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .k-med-sched-toggle { min-height: 44px; padding: 10px 16px; font-size: 13px; align-self: flex-start; }
  .k-med-sched-toggle input[type="checkbox"] { width: 22px; height: 22px; }
  .k-med-sched-action { min-height: 44px; padding: 10px 16px; font-size: 13.5px; flex: 1 1 auto; }
}

/* ════════════════════════════════════════════════════════════════════
   Supplements · row actions — Edit / Pause / Resume / Delete bumped
   to a real tap target (≥40px desktop, 44px mobile). Was previously
   inline-styled at 10px font / 3px padding which fails the iOS HIG.
   ════════════════════════════════════════════════════════════════════ */
.k-supp-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.k-supp-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 80px;
  padding: 8px 14px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--k-border, rgba(212, 199, 184, .12));
  color: var(--k-sub, #A89B8C);
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 13px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.k-supp-action:hover,
.k-supp-action:focus {
  border-color: var(--k-copper-light, #D4816A);
  color: var(--k-parchment, #F5F0E8);
  background: var(--k-deep-stone, #1f1c19);
}
.k-supp-action--edit:hover,
.k-supp-action--edit:focus {
  border-color: var(--k-copper, #C45E3A);
  color: var(--k-copper-light, #D4816A);
  background: rgba(196, 94, 58, .08);
}
.k-supp-action--resume:hover,
.k-supp-action--resume:focus {
  border-color: var(--k-sage, #A8BB9A);
  color: var(--k-sage, #A8BB9A);
  background: rgba(168, 187, 154, .08);
}
.k-supp-action--del:hover,
.k-supp-action--del:focus {
  border-color: rgba(184, 92, 80, .6);
  color: var(--k-ember, #B85C50);
  background: rgba(184, 92, 80, .08);
}
@media (max-width: 720px) {
  .k-supp-action {
    min-height: 44px;
    min-width: 0;
    padding: 10px 14px;
    font-size: 13.5px;
    flex: 1 1 auto;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Measurements · Delete button — was a 0.68rem / 0.2rem padding
   pseudo-link squeezed into a header row. Now a proper rectangular
   tap target sized to 40px desktop / 44px mobile.
   ════════════════════════════════════════════════════════════════════ */
.k-meas-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 80px;
  padding: 8px 14px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--k-border, rgba(212, 199, 184, .12));
  color: var(--k-sub, #A89B8C);
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 12.5px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.k-meas-del:hover,
.k-meas-del:focus {
  border-color: rgba(184, 92, 80, .6);
  color: var(--k-ember, #B85C50);
  background: rgba(184, 92, 80, .08);
}
@media (max-width: 720px) {
  .k-meas-del {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Cycle · row actions — Edit pre-fills the form, Delete confirms.
   Bumped from the 10px / 3px inline buttons to a real tap target.
   ════════════════════════════════════════════════════════════════════ */
.k-cycle-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}
.k-cycle-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 80px;
  padding: 8px 14px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--k-border, rgba(212, 199, 184, .12));
  color: var(--k-sub, #A89B8C);
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 12.5px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.k-cycle-action--edit:hover,
.k-cycle-action--edit:focus {
  border-color: var(--k-copper, #C45E3A);
  color: var(--k-copper-light, #D4816A);
  background: rgba(196, 94, 58, .08);
}
.k-cycle-action--del:hover,
.k-cycle-action--del:focus {
  border-color: rgba(184, 92, 80, .6);
  color: var(--k-ember, #B85C50);
  background: rgba(184, 92, 80, .08);
}
@media (max-width: 720px) {
  /* Stack the cycle-item content above the actions on phone, then
     let the action row sit full-width with two equal-flex pills. */
  .cycle-item { flex-direction: column; align-items: stretch !important; gap: 10px; }
  .k-cycle-actions { width: 100%; }
  .k-cycle-action { min-height: 44px; min-width: 0; padding: 10px 14px; font-size: 13.5px; flex: 1 1 auto; }
}

/* ════════════════════════════════════════════════════════════════════
   Medication · mobile-only redesign (Kenki Medication Mobile.html)
   Editorial header, adherence hero with weekly bars, next-dose tile,
   round-check Today's doses, active regimen list, and bottom-sheet
   add form. Desktop layout untouched and shown only ≥720px.
   ════════════════════════════════════════════════════════════════════ */

/* Mobile/desktop visibility helpers */
.k-medm-mob-only { display: none; }
.k-medm-desk-only { display: block; }
@media (max-width: 720px) {
  .k-medm-mob-only { display: block; }
  .k-medm-desk-only { display: none !important; }
}

/* ── Editorial header (replaces the page-header on mobile) ─── */
.k-medm-header { display: none; margin: 0 0 18px; }
@media (max-width: 720px) {
  .k-medm-header { display: block; }
}
.k-medm-head-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 0 4px;
}
.k-medm-head-bar {
  width: 3px;
  height: 38px;
  background: var(--k-copper, #C45E3A);
  border-radius: 2px;
  margin-top: 4px;
  flex-shrink: 0;
}
.k-medm-head-body { flex: 1; min-width: 0; }
.k-medm-kick {
  display: block;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--k-muted, #8A7D70);
  font-weight: 500;
}
.k-medm-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--k-parchment, #F5F0E8);
  margin: 4px 0 0;
}
.k-medm-accent { color: var(--k-copper-light, #D4816A); }
.k-medm-add-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 19px;
  background: var(--k-copper, #C45E3A);
  color: var(--k-parchment, #F5F0E8);
  border: 0;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition: background .2s ease, transform .15s ease;
}
.k-medm-add-btn:hover { background: #a84e30; }
.k-medm-add-btn:active { transform: scale(.95); }

/* ── Adherence hero ─────────────────────────────────────────── */
.k-medm-adherence {
  display: none;
  position: relative;
  margin-bottom: 18px;
  background: linear-gradient(145deg, var(--k-stone, #2C2824), var(--k-deep-stone, #1f1c19));
  border: 1px solid var(--k-border, #3D3530);
  border-radius: 18px;
  padding: 18px;
  overflow: hidden;
}
@media (max-width: 720px) {
  .k-medm-adherence { display: block; }
}
.k-medm-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: .4;
}
.k-medm-corner::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 6px;
  height: 1px;
  background: var(--k-muted, #8A7D70);
}
.k-medm-corner::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 6px;
  background: var(--k-muted, #8A7D70);
}
.k-medm-corner--tl { top: 8px; left: 8px; }
.k-medm-corner--tr { top: 8px; right: 8px; transform: rotate(90deg); }
.k-medm-corner--br { bottom: 8px; right: 8px; transform: rotate(180deg); }
.k-medm-corner--bl { bottom: 8px; left: 8px; transform: rotate(270deg); }
.k-medm-adh-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.k-medm-adh-frac {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  color: var(--k-muted, #8A7D70);
  letter-spacing: .16em;
}
.k-medm-adh-num {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 10px;
}
.k-medm-adh-pct {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 68px;
  font-weight: 300;
  color: var(--k-parchment, #F5F0E8);
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.k-medm-adh-suf {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 24px;
  color: var(--k-sub, #A89B8C);
  font-style: italic;
}
.k-medm-adh-delta {
  margin-left: auto;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 13px;
  font-style: italic;
  color: var(--k-muted, #8A7D70);
  align-self: flex-end;
}
.k-medm-adh-delta--up { color: var(--k-sage, #A8BB9A); }
.k-medm-adh-delta--down { color: var(--k-ember, #B85C50); }
.k-medm-adh-bars {
  display: flex;
  gap: 5px;
  margin-top: 14px;
  height: 28px;
}
.k-medm-adh-bar {
  flex: 1;
  height: 28px;
  border-radius: 3px;
  background: var(--k-deep-stone, #1f1c19);
}
.k-medm-adh-bar--full { background: var(--k-copper, #C45E3A); }
.k-medm-adh-bar--half { background: var(--k-copper-light, #D4816A); }
.k-medm-adh-bar--thin { background: var(--k-copper-light, #D4816A); }
.k-medm-adh-days {
  display: flex;
  margin-top: 6px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  color: var(--k-muted, #8A7D70);
  letter-spacing: .06em;
}
.k-medm-adh-days span {
  flex: 1;
  text-align: center;
}

/* ── Next-dose tile ─────────────────────────────────────────── */
.k-medm-next {
  display: none;
  background: var(--k-stone, #2C2824);
  border: 1px solid rgba(196, 94, 58, .33);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 22px;
  align-items: center;
  gap: 14px;
}
@media (max-width: 720px) {
  .k-medm-next:not([hidden]) { display: flex; }
}
.k-medm-next--due {
  border-color: var(--k-copper, #C45E3A);
  box-shadow: 0 0 0 1px rgba(196, 94, 58, .25);
}
.k-medm-next-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(212, 129, 106, .35);
  background: rgba(196, 94, 58, .08);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: var(--k-copper-light, #D4816A);
  letter-spacing: .04em;
  white-space: nowrap;
}
.k-medm-next-body {
  flex: 1;
  min-width: 0;
}
.k-medm-next-name {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 18px;
  font-style: italic;
  color: var(--k-parchment, #F5F0E8);
  margin-top: 2px;
  line-height: 1.1;
}
.k-medm-next-name .k-medm-next-dose {
  color: var(--k-sub, #A89B8C);
  font-style: italic;
}
.k-medm-next-with {
  font-size: 10.5px;
  color: var(--k-muted, #8A7D70);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  margin-top: 3px;
  letter-spacing: .04em;
}
.k-medm-next-with:empty { display: none; }
.k-medm-next-take {
  background: var(--k-copper, #C45E3A);
  color: var(--k-parchment, #F5F0E8);
  border: 0;
  padding: 12px 18px;
  border-radius: 10px;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  flex-shrink: 0;
  min-height: 44px;
  transition: background .18s ease;
}
.k-medm-next-take:hover { background: #a84e30; }

/* ── Today's doses · mobile section head + dose-row list ─── */
.k-medm-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 10px;
}
.k-medm-doses-count,
.k-medm-regimen-count {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--k-copper-light, #D4816A);
  letter-spacing: .12em;
  background: rgba(196, 94, 58, .12);
  padding: 3px 8px;
  border-radius: 999px;
}
.k-medm-regimen-count {
  background: transparent;
  color: var(--k-muted, #8A7D70);
  letter-spacing: .1em;
}


/* ── Today's doses · editorial mobile list with round checks ── */
.k-medm-doses-section { margin-bottom: 22px; }
.k-medm-doses-list {
  background: var(--k-stone, #2C2824);
  border: 1px solid var(--k-border, #3D3530);
  border-radius: 14px;
  overflow: hidden;
}
.k-medm-dose-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--k-border, #3D3530);
  transition: opacity .2s ease;
}
.k-medm-dose-row:last-child { border-bottom: 0; }
.k-medm-dose-row.is-taken { opacity: .55; }
.k-medm-dose-row.is-due {
  background: rgba(196, 94, 58, .06);
}
.k-medm-dose-check {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 14px;
  border: 1.5px solid var(--k-border, #3D3530);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  color: var(--k-ink, #0F0D0B);
  transition: background .18s ease, border-color .18s ease;
}
.k-medm-dose-check:hover { border-color: var(--k-copper-light, #D4816A); }
.k-medm-dose-row.is-due .k-medm-dose-check { border-color: var(--k-copper, #C45E3A); border-width: 2px; }
.k-medm-dose-row.is-taken .k-medm-dose-check {
  background: var(--k-sage, #A8BB9A);
  border-color: var(--k-sage, #A8BB9A);
}
.k-medm-dose-body { flex: 1; min-width: 0; }
.k-medm-dose-name {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 16px;
  font-style: italic;
  color: var(--k-parchment, #F5F0E8);
  line-height: 1.15;
  font-weight: 400;
}
.k-medm-dose-row.is-taken .k-medm-dose-name {
  text-decoration: line-through;
  text-decoration-color: var(--k-muted, #8A7D70);
}
.k-medm-dose-amt {
  color: var(--k-sub, #A89B8C);
  font-style: italic;
}
.k-medm-dose-purpose {
  font-size: 11.5px;
  color: var(--k-sub, #A89B8C);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  letter-spacing: .04em;
  margin-top: 2px;
}
.k-medm-dose-times {
  text-align: right;
  flex-shrink: 0;
}
.k-medm-dose-time {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  color: var(--k-parchment, #F5F0E8);
}
.k-medm-dose-row.is-taken .k-medm-dose-time { color: var(--k-sage, #A8BB9A); }
.k-medm-dose-row.is-due .k-medm-dose-time { color: var(--k-copper-light, #D4816A); }
.k-medm-dose-row.is-missed .k-medm-dose-time { color: var(--k-ember, #B85C50); }
.k-medm-dose-rel {
  font-size: 11px;
  color: var(--k-sub, #A89B8C);
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  margin-top: 1px;
}

/* ── Active regimen list ───────────────────────────────────── */
.k-medm-regimen-section { margin-bottom: 28px; }
.k-medm-regimen-list {
  background: var(--k-stone, #2C2824);
  border: 1px solid var(--k-border, #3D3530);
  border-radius: 14px;
  overflow: hidden;
}
.k-medm-regimen-row {
  padding: 14px;
  border-bottom: 1px solid var(--k-border, #3D3530);
}
.k-medm-regimen-row:last-child { border-bottom: 0; }
.k-medm-regimen-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.k-medm-regimen-name {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 16px;
  font-style: italic;
  color: var(--k-parchment, #F5F0E8);
}
.k-medm-regimen-adh {
  font-size: 10px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  letter-spacing: .08em;
}
.k-medm-regimen-adh--sage { color: var(--k-sage, #A8BB9A); }
.k-medm-regimen-adh--copper { color: var(--k-copper-light, #D4816A); }
.k-medm-regimen-adh--amber { color: #F59E0B; }
.k-medm-regimen-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.k-medm-regimen-dose {
  font-size: 12px;
  color: var(--k-sub, #A89B8C);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.k-medm-regimen-sep {
  color: var(--k-muted, #8A7D70);
  font-size: 11px;
}
.k-medm-regimen-purpose {
  font-size: 12.5px;
  color: var(--k-sub, #A89B8C);
  font-style: italic;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
}
.k-medm-regimen-row-bottom {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.k-medm-regimen-chip {
  font-size: 11.5px;
  color: var(--k-copper-light, #D4816A);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  border: 1px solid rgba(196, 94, 58, .33);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: .04em;
}
.k-medm-regimen-spacer { flex: 1; }
.k-medm-regimen-since {
  font-size: 12px;
  color: var(--k-sub, #A89B8C);
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
}

/* ── Regimen row actions (edit + delete icon buttons) ────────── */
.k-medm-regimen-actions {
  display: inline-flex;
  gap: 6px;
  margin-left: 10px;
}
.k-medm-regimen-act {
  width: 26px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--k-border, #3D3530);
  border-radius: 5px;
  color: var(--k-muted, #6B5E53);
  font-size: 10px; line-height: 1;
  cursor: pointer; padding: 0;
  transition: color .15s, border-color .15s, background .15s;
}
.k-medm-regimen-act-edit:hover {
  color: var(--k-copper-light, #D4816A);
  border-color: rgba(212,129,106,.45);
  background: rgba(196,94,58,.08);
}
.k-medm-regimen-act-del:hover {
  color: #f87171;
  border-color: rgba(248,113,113,.45);
  background: rgba(248,113,113,.1);
}

/* ── Bottom-sheet add form (mobile only) ───────────────────── */
@media (max-width: 720px) {
  .k-medm-sheet {
    position: fixed !important;
    inset: 0 !important;
    margin: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: var(--k-ink, #0F0D0B) !important;
    border: 0 !important;
    border-top: 1px solid var(--k-border, #3D3530) !important;
    padding: 14px 22px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    z-index: 9999;
    top: auto !important;
    bottom: 0 !important;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, .6);
    animation: kMedmSheetIn .22s ease;
  }
  .k-medm-sheet::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: -1;
    animation: kMedmFadeIn .2s ease;
  }
  .k-medm-sheet-grab {
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: var(--k-muted, #8A7D70);
    opacity: .5;
    margin: 0 auto 14px;
    display: block;
  }
  .k-medm-sheet-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
  }
  .k-medm-sheet-title {
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-size: 22px;
    font-style: italic;
    color: var(--k-parchment, #F5F0E8);
    margin: 2px 0 0;
    font-weight: 400;
  }
  .k-medm-sheet-cancel {
    background: transparent;
    border: 0;
    color: var(--k-sub, #A89B8C);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    letter-spacing: .1em;
    cursor: pointer;
    padding: 8px 4px;
    min-height: 36px;
  }
  /* Form rows stay readable at full width on the sheet */
  .k-medm-sheet .form-row,
  .k-medm-sheet .grid-2 { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Labels — mono uppercase kicker style across every sheet form */
  .k-medm-sheet .form-group label,
  .k-medm-sheet label {
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-size: 10px !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--k-muted, #8A7D70) !important;
    font-weight: 500 !important;
  }

  /* Inputs / selects / textareas — italic Cormorant feel.
     Targets bare elements (Supplements form) and .form-input
     (Medication form) so both render the same way. */
  .k-medm-sheet .form-input,
  .k-medm-sheet input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
  .k-medm-sheet select,
  .k-medm-sheet textarea {
    background: var(--k-deep-stone, #1f1c19) !important;
    border: 1px solid var(--k-border, #3D3530) !important;
    border-radius: 10px !important;
    padding: 11px 12px !important;
    font-family: var(--font-display, 'Cormorant Garamond', serif) !important;
    font-style: italic !important;
    font-size: 15px !important;
    color: var(--k-parchment, #F5F0E8) !important;
    width: 100%;
    box-sizing: border-box;
  }
  .k-medm-sheet input::placeholder,
  .k-medm-sheet textarea::placeholder {
    color: rgba(168, 155, 140, .5) !important;
    font-style: italic !important;
  }
  .k-medm-sheet textarea { min-height: 64px; resize: vertical; }

  /* ════════════════════════════════════════════════════════════════
     Universal editorial form styling — applies to every .form-group
     inside any module page on mobile so all log forms (Measurements,
     Cycle, Dental, Appointments, Profile, Settings, etc.) read with
     the same mono uppercase labels + italic Cormorant inputs as
     the Medication and Supplements sheets.
     The Vitals editorial form uses .k-vlog-* classes, not .form-group,
     so it's exempt by selector — no override needed.
     ════════════════════════════════════════════════════════════════ */
  .prism-content .form-group label,
  .prism-content form > label,
  .prism-content fieldset > label {
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-size: 10px !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--k-muted, #8A7D70) !important;
    font-weight: 500 !important;
  }
  .prism-content .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
  .prism-content .form-group select,
  .prism-content .form-group textarea,
  .prism-content form .form-input {
    background: var(--k-deep-stone, #1f1c19) !important;
    border: 1px solid var(--k-border, #3D3530) !important;
    border-radius: 10px !important;
    padding: 11px 12px !important;
    font-family: var(--font-display, 'Cormorant Garamond', serif) !important;
    font-style: italic !important;
    font-size: 15px !important;
    color: var(--k-parchment, #F5F0E8) !important;
    width: 100%;
    box-sizing: border-box;
  }
  .prism-content .form-group input::placeholder,
  .prism-content .form-group textarea::placeholder,
  .prism-content form .form-input::placeholder {
    color: rgba(168, 155, 140, .5) !important;
    font-style: italic !important;
  }
  .prism-content .form-group textarea { min-height: 64px; resize: vertical; }

  /* Primary save button — full-width pill */
  .k-medm-sheet .btn-primary {
    width: 100%;
    padding: 14px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    min-height: 50px;
  }
  .k-medm-sheet .btn-secondary { display: none; }
}
.k-medm-sheet .k-medm-sheet-grab,
.k-medm-sheet .k-medm-sheet-head { display: none; }
@media (max-width: 720px) {
  .k-medm-sheet .k-medm-sheet-grab,
  .k-medm-sheet .k-medm-sheet-head { display: block; }
  .k-medm-sheet .k-medm-sheet-head { display: flex; }
}
@keyframes kMedmSheetIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes kMedmFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════
   Supplements · mobile-only redesign per Kenki Supplements Mobile.html
   Mirrors the medication mobile pattern (round-check dose log, bottom
   sheet form) but swaps copper → sage as the module accent. Reuses
   .k-medm-* atoms for the dose-row list, with sage modifiers.
   ════════════════════════════════════════════════════════════════════ */

/* Tray hero — sage progress dots + italic status line */
.k-suppm-tray {
  display: none;
  position: relative;
  margin-bottom: 18px;
  background: linear-gradient(145deg, var(--k-stone, #2C2824), var(--k-deep-stone, #1f1c19));
  border: 1px solid var(--k-border, #3D3530);
  border-radius: 18px;
  padding: 18px;
  overflow: hidden;
}
@media (max-width: 720px) {
  .k-suppm-tray { display: block; }
}
.k-suppm-tray-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.k-suppm-tray-active {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  color: var(--k-muted, #8A7D70);
  letter-spacing: .16em;
}
.k-suppm-tray-num {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 10px;
}
.k-suppm-tray-taken {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 68px;
  font-weight: 300;
  color: var(--k-parchment, #F5F0E8);
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.k-suppm-tray-of {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 24px;
  color: var(--k-sub, #A89B8C);
  font-style: italic;
}
.k-suppm-tray-dots {
  display: flex;
  gap: 5px;
  margin-top: 14px;
  height: 6px;
}
.k-suppm-tray-dot {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--k-deep-stone, #1f1c19);
  opacity: .4;
}
.k-suppm-tray-dot.is-on {
  background: var(--k-sage, #7A8B6F);
  opacity: 1;
}
.k-suppm-tray-status {
  margin-top: 12px;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 13px;
  color: var(--k-sub, #A89B8C);
}

/* Sage variants of medication mobile atoms */
.k-medm-doses-count--sage {
  color: var(--k-sage, #A8BB9A) !important;
  background: rgba(168, 187, 154, .14) !important;
}
@media (max-width: 720px) {
  /* In sage mode (Supplements), the round check uses sage when taken
     and sage when due (instead of copper). Copper still marks the
     "due now" row outline per the design. */
  .k-medm-doses-section--sage .k-medm-dose-row.is-taken .k-medm-dose-check {
    background: var(--k-sage, #A8BB9A);
    border-color: var(--k-sage, #A8BB9A);
  }
  .k-medm-doses-section--sage .k-medm-dose-row.is-taken .k-medm-dose-time {
    color: var(--k-sage, #A8BB9A);
  }
}

/* Mobile shelf section — design-matching list of active supplements */
.k-suppm-shelf-section { margin-bottom: 22px; }
.k-suppm-shelf-list {
  background: var(--k-stone, #2C2824);
  border: 1px solid var(--k-border, #3D3530);
  border-radius: 14px;
  overflow: hidden;
}
.k-suppm-shelf-count {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--k-muted, #8A7D70);
  letter-spacing: .1em;
}

/* Inline "N paused — tap to resume" pill that surfaces under the
   Active shelf header when the user has paused supplements. Hidden
   when the count is 0. Click expands the Archived <details> and
   smooth-scrolls to it so resume is one tap closer than digging
   through the disclosure. */
.k-suppm-paused-pill {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 8px 0 6px;
  padding: 6px 12px;
  background: rgba(196,94,58,0.08);
  border: 1px solid rgba(196,94,58,0.25);
  border-radius: 999px;
  color: var(--k-copper-light, #D4816A);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.k-suppm-paused-pill:not([hidden]) { display: inline-flex; }
.k-suppm-paused-pill:hover,
.k-suppm-paused-pill:active {
  background: rgba(196,94,58,0.14);
  border-color: rgba(196,94,58,0.40);
}
.k-suppm-paused-pill-count {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .04em;
}
.k-suppm-paused-pill-label { letter-spacing: .12em; }
.k-suppm-shelf-row {
  padding: 14px;
  border-bottom: 1px solid var(--k-border, #3D3530);
  /* Cycling left-border accent (copper / sage / teal) — same pattern as
     the water page's day's-sips list, so the active shelf reads as a
     varied stack rather than a flat divider list. */
  border-left: 3px solid var(--k-teal, #4A9B8E);
  cursor: pointer;
  transition: background .15s ease, border-left-color .15s ease;
}
.k-suppm-shelf-row:nth-child(3n+1) { border-left-color: var(--k-copper, #C45E3A); }
.k-suppm-shelf-row:nth-child(3n+2) { border-left-color: var(--k-sage, #7A8B6F); }
.k-suppm-shelf-row:nth-child(3n+3) { border-left-color: var(--k-teal, #4A9B8E); }
.k-suppm-shelf-row:last-child { border-bottom: 0; }
.k-suppm-shelf-row:hover { background: var(--k-deep-stone, #1f1c19); }
.k-suppm-shelf-row.is-paused { opacity: .7; }
.k-suppm-shelf-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.k-suppm-shelf-name {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 16px;
  color: var(--k-parchment, #F5F0E8);
  font-weight: 400;
}
.k-suppm-shelf-row.is-paused .k-suppm-shelf-name { color: var(--k-sub, #A89B8C); }
.k-suppm-shelf-badge {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--k-sage, #A8BB9A);
  border: 1px solid rgba(168, 187, 154, .4);
  background: rgba(168, 187, 154, .08);
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.k-suppm-shelf-badge--paused {
  color: var(--k-muted, #8A7D70);
  border-color: var(--k-border, #3D3530);
  background: transparent;
}
.k-suppm-shelf-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.k-suppm-shelf-dose {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: var(--k-sub, #A89B8C);
}
.k-suppm-shelf-sep {
  color: var(--k-muted, #8A7D70);
  font-size: 11px;
}
.k-suppm-shelf-brand {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--k-sub, #A89B8C);
}
.k-suppm-shelf-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.k-suppm-shelf-freq {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11.5px;
  color: var(--k-copper-light, #D4816A);
  border: 1px solid rgba(196, 94, 58, .35);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: .04em;
}
.k-suppm-shelf-spacer { flex: 1; }
.k-suppm-shelf-since {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 12px;
  color: var(--k-sub, #A89B8C);
}

/* Edit / Pause / Delete row inside each shelf card — 40 / 44px tap targets */
.k-suppm-shelf-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(212, 199, 184, .08);
}
.k-suppm-shelf-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--k-border, rgba(212, 199, 184, .12));
  color: var(--k-sub, #A89B8C);
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 12.5px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.k-suppm-shelf-action:hover,
.k-suppm-shelf-action:focus {
  border-color: var(--k-copper-light, #D4816A);
  color: var(--k-parchment, #F5F0E8);
  background: var(--k-deep-stone, #1f1c19);
}
.k-suppm-shelf-action--edit:hover,
.k-suppm-shelf-action--edit:focus {
  border-color: var(--k-copper, #C45E3A);
  color: var(--k-copper-light, #D4816A);
  background: rgba(196, 94, 58, .08);
}
.k-suppm-shelf-action--resume:hover,
.k-suppm-shelf-action--resume:focus {
  border-color: var(--k-sage, #A8BB9A);
  color: var(--k-sage, #A8BB9A);
  background: rgba(168, 187, 154, .08);
}
.k-suppm-shelf-action--del:hover,
.k-suppm-shelf-action--del:focus {
  border-color: rgba(184, 92, 80, .6);
  color: var(--k-ember, #B85C50);
  background: rgba(184, 92, 80, .08);
}
@media (max-width: 720px) {
  .k-suppm-shelf-action { min-height: 44px; padding: 10px 12px; font-size: 13px; }
}

/* Archived collapsible — design-matching mono summary */
.k-suppm-archive-details { margin-top: 14px; }
.k-suppm-archive-summary {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--k-muted, #8A7D70);
  cursor: pointer;
  padding: 8px 0;
  list-style: none;
}
.k-suppm-archive-summary::-webkit-details-marker { display: none; }
.k-suppm-archive-details[open] .k-suppm-archive-summary { color: var(--k-sub, #A89B8C); }

/* Mobile-only frequency chip selector inside the add sheet */
.k-suppm-freq-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.k-suppm-freq-chip {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--k-border, #3D3530);
  background: transparent;
  color: var(--k-sub, #A89B8C);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  min-height: 36px;
  white-space: nowrap;
}
.k-suppm-freq-chip:hover {
  border-color: rgba(168, 187, 154, .4);
  color: var(--k-parchment, #F5F0E8);
}
.k-suppm-freq-chip.is-active {
  background: rgba(168, 187, 154, .12);
  border-color: var(--k-sage, #A8BB9A);
  color: var(--k-sage, #A8BB9A);
}

/* ════════════════════════════════════════════════════════════════════
   Universal round "+" add button — used in every module's k-mod-head
   to give users a consistent way to open the page's add form. On
   desktop appears as a circular pill in the header; on phone it
   becomes the same 38px round affordance shown in the medication
   redesign so iOS / Android packaged builds feel uniform.
   ════════════════════════════════════════════════════════════════════ */
.k-mod-add-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 22px;
  background: var(--k-copper, #C45E3A);
  color: var(--k-parchment, #F5F0E8);
  border: 0;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s ease, transform .15s ease;
  font-family: var(--font-sans, 'Inter', sans-serif);
  padding: 0;
}
.k-mod-add-btn:hover { background: #a84e30; }
.k-mod-add-btn:active { transform: scale(.95); }
.k-mod-add-btn:focus-visible {
  outline: 2px solid var(--k-copper-light, #D4816A);
  outline-offset: 2px;
}
/* Variant tinted for sage / teal accents — match the page's k-mod-head bar */
.k-mod-add-btn--sage { background: var(--k-sage, #7A8B6F); }
.k-mod-add-btn--sage:hover { background: #6a7960; }
.k-mod-add-btn--teal { background: var(--k-teal, #4A9B8E); }
.k-mod-add-btn--teal:hover { background: #3d8479; }
.k-mod-add-btn--copper-light { background: var(--k-copper-light, #D4816A); }
.k-mod-add-btn--copper-light:hover { background: #b86b54; }

/* ════════════════════════════════════════════════════════════════════
   Appointments mobile (Kenki Appointments Mobile.html)
   Filter pills + mini week calendar. The next-up hero, list, and
   bottom-sheet form already exist on the page; this just adds the
   two new pieces and a few mobile tweaks.
   ════════════════════════════════════════════════════════════════════ */
.k-apt-filter-pills {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.k-apt-filter-pill {
  flex: 1;
  padding: 10px 8px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--k-border, rgba(212, 199, 184, .12));
  color: var(--k-sub, #A89B8C);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: .06em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.k-apt-filter-pill:hover {
  border-color: rgba(212, 129, 106, .35);
  color: var(--k-parchment, #F5F0E8);
}
.k-apt-filter-pill.is-active {
  background: rgba(196, 94, 58, .1);
  border-color: var(--k-copper, #C45E3A);
  color: var(--k-copper-light, #D4816A);
}
.k-apt-filter-count {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  opacity: .8;
}

/* Mini week calendar */
.k-apt-week-card {
  background: var(--k-stone, #2C2824);
  border: 1px solid var(--k-border, #3D3530);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 16px;
}
.k-apt-week-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.k-apt-week-hint {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  color: var(--k-muted, #8A7D70);
  letter-spacing: .14em;
}
.k-apt-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.k-apt-week-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  position: relative;
  background: var(--k-deep-stone, #1f1c19);
  border: 1px solid var(--k-border, #3D3530);
  color: var(--k-sub, #A89B8C);
  min-width: 0;
  /* aspect-ratio:1 + 1fr columns keeps cells square at the viewport's
     fair share — no min-height that would force overflow on narrow phones */
}
.k-apt-week-day.has-appt { color: var(--k-parchment, #F5F0E8); }
.k-apt-week-day.is-today {
  background: rgba(196, 94, 58, .14);
  border-color: var(--k-copper, #C45E3A);
  color: var(--k-parchment, #F5F0E8);
}
.k-apt-week-dow {
  position: absolute;
  top: 4px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 7px;
  letter-spacing: .14em;
  color: var(--k-muted, #8A7D70);
}
.k-apt-week-day.is-today .k-apt-week-dow { color: var(--k-copper-light, #D4816A); }
.k-apt-week-num {
  margin-top: 4px;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.k-apt-week-dot {
  position: absolute;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: var(--k-copper, #C45E3A);
}

/* ════════════════════════════════════════════════════════════════════
   Cycle · mobile-only redesign per Kenki Mobile Only.html → MobileMenstrual
   Copper-light bar header, cycle phase ring SVG, today card + chips,
   compact previous-cycles list. Desktop layout (cycle-hero-grid +
   workspace) sits behind .k-medm-desk-only and is unaffected.
   ════════════════════════════════════════════════════════════════════ */
.k-cycm { padding: 0 0 22px; }
.k-cycm-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0 14px;
}
.k-cycm-head-bar {
  width: 3px;
  height: 38px;
  background: var(--k-copper-light, #D4816A);
  border-radius: 2px;
  margin-top: 4px;
  flex-shrink: 0;
}
.k-cycm-head-body { flex: 1; min-width: 0; }
.k-cycm-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--k-parchment, #F5F0E8);
  margin: 4px 0 0;
}
.k-cycm-phase-name { color: var(--k-copper-light, #D4816A); }
.k-cycm-week { color: var(--k-parchment, #F5F0E8); }

.k-cycm-ring-wrap {
  display: flex;
  justify-content: center;
  padding: 0 0 8px;
}
/* Force a perfect square. Some pages had global rules (kenki-fix.css
   catch-alls, parent flex stretching) that left the SVG rendering as a
   tall oval on phones — the today-dot ended up floating off the ring.
   width:100% with a max cap + aspect-ratio 1/1 + !important on height
   prevents any ancestor from squishing it. */
.k-cycm-ring-wrap svg {
  display: block;
  width: 100% !important;
  max-width: 248px !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  max-height: 248px !important;
}

.k-cycm-phase {
  text-align: center;
  padding: 0 8px 18px;
}
.k-cycm-phase .k-medm-kick { display: block; }
.k-cycm-phase-line {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 18px;
  color: var(--k-parchment, #F5F0E8);
  margin-top: 4px;
}
.k-cycm-phase-caption {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 12px;
  color: var(--k-sub, #A89B8C);
  margin-top: 4px;
  line-height: 1.5;
}

.k-cycm-today-card {
  background: var(--k-stone, #2C2824);
  border: 1px solid var(--k-border, #3D3530);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.k-cycm-today-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.k-cycm-today-log {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--k-copper-light, #D4816A);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 0;
  letter-spacing: .04em;
}
.k-cycm-today-note {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 16px;
  color: var(--k-parchment, #F5F0E8);
  margin-top: 6px;
}
.k-cycm-today-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.k-cycm-chip {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  color: var(--k-sub, #A89B8C);
  border: 1px solid var(--k-border, #3D3530);
  padding: 4px 9px;
  border-radius: 14px;
  letter-spacing: .04em;
}

/* ─── Cycle ring legend ──────────────────────────────────────────────
   First-pass orientation for a brand-new user: a 4-pill legend strip
   showing the phase colours, plus an expandable "How to read this
   ring" details element with marker descriptions. Sits between the
   phase caption and the today card so a user reads:
     [ring] → [phase title + caption] → [legend] → [today log]. */
.k-cycm-legend {
  margin: 18px 0 4px;
  padding: 14px;
  border-radius: 14px;
  background: var(--k-deep-stone, #1f1c19);
  border: 1px solid var(--k-border, #3D3530);
}
.k-cycm-legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  justify-content: center;
}
.k-cycm-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.k-cycm-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
}
.k-cycm-legend-dot--lg {
  width: 14px;
  height: 14px;
  box-shadow: 0 0 0 2px var(--k-deep-stone, #1f1c19), 0 0 0 3px rgba(245,240,232,.4);
}
.k-cycm-legend-label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--k-sub, #A89B8C);
}
.k-cycm-legend-more {
  margin-top: 12px;
  border-top: 1px solid var(--k-border, #3D3530);
  padding-top: 10px;
}
.k-cycm-legend-more > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--k-copper-light, #D4816A);
  text-align: center;
  user-select: none;
  transition: color .15s ease;
}
.k-cycm-legend-more > summary::-webkit-details-marker { display: none; }
.k-cycm-legend-more > summary:hover { color: var(--k-parchment, #F5F0E8); }
.k-cycm-legend-more > summary::after {
  content: ' ›';
  display: inline-block;
  transition: transform .2s ease;
  margin-left: 4px;
}
.k-cycm-legend-more[open] > summary::after { transform: rotate(90deg); }
.k-cycm-legend-detail {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.k-cycm-legend-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--k-sub, #A89B8C);
}
.k-cycm-legend-row strong {
  color: var(--k-parchment, #F5F0E8);
  font-style: normal;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-right: 4px;
}
.k-cycm-legend-row--full { padding-top: 6px; border-top: 1px dashed var(--k-border, #3D3530); }
.k-cycm-legend-marker {
  flex-shrink: 0;
  width: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4px;
}
/* Today-dot swatch — pixel-matches the SVG marker on the ring:
   parchment outer disc, copper inner core (Menstrual is the most
   common landing phase for first-time users so we use copper as a
   sensible representative phase colour). The user-visible ring
   updates to whichever phase they're actually in; this swatch is
   illustrative. */
.k-cycm-legend-today {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--k-parchment, #F5F0E8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.k-cycm-legend-today-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--k-copper, #C45E3A);
  box-shadow: 0 0 0 3px rgba(196,94,58,.25);
  animation: kCycmLegendPulse 2.4s ease-in-out infinite;
}
@keyframes kCycmLegendPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(196,94,58,.25); }
  50%     { box-shadow: 0 0 0 6px rgba(196,94,58,0); }
}
/* Plus-cross swatch — matches the SVG OVULATION marker (parchment
   "+" stroke) so the user can match it back to the ring. */
.k-cycm-legend-plus {
  width: 16px;
  height: 16px;
  position: relative;
  display: inline-block;
}
.k-cycm-legend-plus > span:first-child,
.k-cycm-legend-plus > span:last-child {
  position: absolute;
  background: var(--k-parchment, #F5F0E8);
  border-radius: 1px;
}
.k-cycm-legend-plus > span:first-child {
  left: 50%;
  top: 1px;
  bottom: 1px;
  width: 2px;
  margin-left: -1px;
}
.k-cycm-legend-plus > span:last-child {
  top: 50%;
  left: 1px;
  right: 1px;
  height: 2px;
  margin-top: -1px;
}
.k-cycm-legend-note {
  margin: 0;
  padding-left: 0;
}

.k-cycm-prev .k-medm-kick { display: block; }
.k-cycm-prev-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Each previous-cycle row is its own card with a cycling
   copper / sage / teal left-border (matches the water day's-sips list
   and the supplements active shelf). The row expands vertically as
   data richness grows: top stays the same, then optional symptom
   chips, then optional italic Cormorant note. */
.k-cycm-prev-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--k-stone, #2C2824);
  border: 1px solid var(--k-border, #3D3530);
  border-left: 3px solid var(--k-copper, #C45E3A);
  border-radius: 12px;
  transition: border-left-color .15s ease, background .15s ease;
}
.k-cycm-prev-row:nth-child(3n+1) { border-left-color: var(--k-copper, #C45E3A); }
.k-cycm-prev-row:nth-child(3n+2) { border-left-color: var(--k-sage, #7A8B6F); }
.k-cycm-prev-row:nth-child(3n+3) { border-left-color: var(--k-teal, #4A9B8E); }
.k-cycm-prev-top {
  display: flex;
  /* Baseline-align the three columns so MAY, the italic date range,
     and MEDIUM all sit on the same typographic line — even when the
     middle column has a meta sub-line below the dates. */
  align-items: baseline;
  gap: 14px;
}
.k-cycm-prev-month {
  width: 36px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--k-copper-light, #D4816A);
  letter-spacing: .12em;
  flex-shrink: 0;
}
.k-cycm-prev-mid { flex: 1; min-width: 0; }
.k-cycm-prev-dates {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 14px;
  color: var(--k-parchment, #F5F0E8);
}
.k-cycm-prev-len {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--k-muted, #8A7D70);
  margin-top: 1px;
  letter-spacing: .04em;
}
.k-cycm-prev-flow {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--k-sub, #A89B8C);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.k-cycm-prev-symptoms {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-left: 50px;
}
.k-cycm-prev-chip {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--k-sub, #A89B8C);
  background: var(--k-deep-stone, #1f1c19);
  border: 1px solid var(--k-border, #3D3530);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.k-cycm-prev-chip--more {
  color: var(--k-muted, #8A7D70);
  font-style: italic;
  background: transparent;
}
.k-cycm-prev-note {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--k-sub, #A89B8C);
  margin: 0;
  padding-left: 50px;
  line-height: 1.45;
}

/* ════════════════════════════════════════════════════════════════════
   Universal "Back to dashboard" link
   ─────────────────────────────────────────────────────────────────────
   Quiet, no-arrow, sub-tone label that sits above each module's hero.
   Replaces the older "← Dashboard" k-action style on individual pages
   so every module reads the same way coming from the dashboard.
   ════════════════════════════════════════════════════════════════════ */
.k-back-link {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--k-copper, #C45E3A);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  text-decoration: none;
  transition: color .16s ease;
}
.k-back-link:hover { color: var(--k-copper-light, #D4816A); }