/* ============================================================
   Ownsight — design tokens borrowed from alexvolok.com
   Light, editorial, refined. Dark mode added for evening journaling.
   Dark tokens apply under <html data-theme="dark">; base.html sets it from the
   saved preference, or from the OS setting when the preference is "system".
   The colour palette (--bg, --bg-hover, --bg-input, --text-*, --accent,
   --accent-warm, --chart-pos/mid/grid/raw, and --bg-card in dark) comes from
   PALETTES in lifeos/services/preferences.py: base.html writes the chosen one into
   an inline <style>. Everything here is shared by all palettes, except that a
   palette may also override --chart-neg.
   ============================================================ */

:root {
  --bg-card:       #ffffff;
  --border:        rgba(0,0,0,0.07);
  --border-strong: rgba(0,0,0,0.13);

  --accent-subtle: color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-glow:   color-mix(in srgb, var(--accent) 8%, transparent);

  --ok:            #3d7a3d;
  --ok-subtle:     rgba(120,180,120,0.14);
  --danger:        #b04a5a;

  --font-display:  'DM Serif Display', Georgia, serif;
  --font-body:     'DM Sans', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  --radius:        6px;
  --radius-lg:     14px;
  --transition:    0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  --max-w:         1100px;
  --nav-h:         64px;
  --tabbar-h:      58px;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --border:        rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.18);

  --accent-subtle: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-glow:   color-mix(in srgb, var(--accent) 7%, transparent);

  --ok:            #8cc98c;
  --ok-subtle:     rgba(120,180,120,0.16);
  --danger:        #e08a98;

  color-scheme: dark;
}

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
/* Light-on-dark text looks thinner; bump the weight so it stays legible. */
[data-theme="dark"] body { font-weight: 400; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--accent) 18%, transparent); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; }
.container--narrow { max-width: 440px; }
.section { padding: 1.5rem 0 5rem; }

.eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--accent);
}

/* ---- Navigation ---- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: calc(var(--nav-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
}
.nav__logo {
  font-family: var(--font-display);
  font-size: 1.29rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.nav__mark {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}
.nav__logo:hover { color: var(--accent); }
.nav__links { display: flex; gap: 2.5rem; align-items: center; margin-left: auto; margin-right: 2.5rem; }
.nav__actions { display: flex; align-items: center; }
.nav__links a:not(.nav__popup-item) {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-secondary);
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition);
}
.nav__links a:not(.nav__popup-item) { display: inline-flex; align-items: center; gap: 0.45rem; }
.nav__links a:not(.nav__popup-item) .icon { font-size: 1rem; }
/* Tablets: tighter spacing, then icons only (the labels stay for screen readers) */
@media (max-width: 1080px) {
  .nav__links { gap: 1.75rem; margin-right: 1.75rem; }
}
@media (min-width: 601px) and (max-width: 860px) {
  .nav__links { gap: 1.5rem; margin-right: 1.5rem; }
  .nav__links a:not(.nav__popup-item) > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .nav__links a:not(.nav__popup-item) .icon { font-size: 1.15rem; }
}
.nav__links a:not(.nav__popup-item)::after {
  content: '';
  position: absolute;
  bottom: -7px; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav__links a:not(.nav__popup-item):hover { color: var(--text-primary); }

/* The avatar and name lead to /me, on every screen size; a long name is cut short. */
.nav__me {
  display: inline-flex; align-items: center; gap: 0.55rem; max-width: 14rem;
  font-size: 0.88rem; color: var(--text-secondary); transition: color var(--transition);
}
.nav__me-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__me .person-avatar { transition: box-shadow var(--transition); }
.nav__me:hover, .nav__me.active { color: var(--text-primary); }
.nav__me:hover .person-avatar, .nav__me.active .person-avatar { box-shadow: 0 0 0 2px var(--accent); }
.nav__me:focus { outline: none; }
.nav__me:focus-visible .person-avatar { outline: 2px solid var(--accent); outline-offset: 3px; }
/* On a phone the name takes what the history buttons and the logo leave */
@media (max-width: 600px) {
  .nav__actions { min-width: 0; margin-left: 0.75rem; }
  .nav__me { min-width: 0; max-width: 100%; }
}

.icon {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Nav popups (the journal menu): the trigger toggles .is-open (app.js) */
.nav__menu { position: relative; display: flex; align-items: center; }
.nav__popup {
  position: absolute;
  top: calc(100% + 1rem);
  right: -0.75rem;
  width: min(21rem, calc(100vw - 2rem));
  max-height: calc(100dvh - var(--nav-h) - env(safe-area-inset-top) - 2rem);
  overflow-y: auto;
  padding: 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 18px 48px rgba(15,25,40,0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.nav__menu.is-open .nav__popup { opacity: 1; visibility: visible; transform: none; }

/* Selected option (settings, the journal's scale switch, the day's morning/evening switch):
   a soft accent tint with an accent ring, so the choice reads at a glance. The tints are
   checked for contrast in test_palettes.py. */
.segmented.settings__options input:checked + span,
.segmented.scale-switch a.is-active span,
.segmented.day-sections__switch input:checked + span {
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
  color: var(--accent);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
/* On dark, plain accent text on the tint falls just under 4.5:1; the lighter one passes. */
[data-theme="dark"] .segmented.settings__options input:checked + span,
[data-theme="dark"] .segmented.scale-switch a.is-active span,
[data-theme="dark"] .segmented.day-sections__switch input:checked + span { color: var(--accent-warm); }
.segmented.settings__options input:focus-visible + span { box-shadow: 0 0 0 2px var(--accent); }
.nav__popup-links { display: flex; flex-direction: column; margin: 0.1rem 0 0; padding: 0.4rem 0 0.3rem; border-top: 1px solid var(--border); }
.nav__popup-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: none;
  border-radius: var(--radius);
  background: none;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.nav__popup-item { text-decoration: none; }
.nav__popup-item:hover, .nav__popup-item:focus-visible { background: var(--bg-input); color: var(--text); outline: none; }
.nav__popup-item[aria-current="page"] { color: var(--accent); }
.nav__popup-links .icon { font-size: 1.05rem; }
.nav__links a.active { color: var(--accent); }
.nav__links a.active::after, .nav__links a:not(.nav__popup-item):hover::after { transform: scaleX(1); }
/* Inside the section but not on the current period: grey underline */
.nav__links a.in-section::after { transform: scaleX(1); background: color-mix(in srgb, var(--text-muted) 45%, transparent); }

/* Journal menu: opened by tapping the journal tab again; centred under (or above) the tab */
.nav__popup--journal {
  left: 50%;
  right: auto;
  width: 14rem;
  translate: -50% 0;
  transform-origin: top center;
}
.nav__popup--journal .nav__popup-links { margin: 0; padding: 0; border-top: 0; }
.nav__menu--journal.is-open > a { color: var(--accent); }

/* Back / forward after the logo, set off from it by a hairline; the history popup opens
   under them, left-aligned. Only in the installed PWA: a browser has its own. */
.nav__start { position: relative; display: flex; align-items: center; min-width: 0; }
.nav__history {
  display: none;
  gap: 0.1rem;
  margin-left: 1rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--border-strong);
}
:root[data-standalone] .nav__history { display: flex; }
.nav__history-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-secondary);
  font-size: 1.15rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  transition: background var(--transition), color var(--transition), opacity var(--transition);
}
.nav__history-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
.nav__history-btn:focus { outline: none; }
.nav__history-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nav__history-btn:disabled { opacity: 0.35; cursor: default; }
.nav__popup--history { left: -0.25rem; right: auto; width: min(18rem, calc(100vw - 2rem)); transform-origin: top left; }
.nav__popup--history .nav__popup-links { margin: 0; padding: 0; border-top: 0; }
.nav__popup--history .nav__popup-item { text-align: left; }
.nav__popup--history .nav__popup-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bottom tab bar: replaces the top links on phones */
.tabbar { display: none; }
@media (max-width: 600px) {
  :root { --nav-h: 52px; }
  .nav__links { display: none; }
  /* Taller touch targets, whose own width spaces them from the hairline. The popup hangs
     from the left of the bar (.nav__start), since under the pair it would run off the screen. */
  .nav__history { position: static; gap: 0; margin-left: 0.6rem; padding-left: 0.1rem; }
  .nav__popup--history { left: 0; }
  .nav__history-btn { width: 2.6rem; height: 2.75rem; font-size: 1.35rem; }
  .nav__history-btn:hover:not(:disabled) { background: none; }
  body:has(.tabbar) { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .tabbar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 100;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding: 0 max(0.25rem, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(0.25rem, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
  }
  .tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--transition);
  }
  .tabbar__item svg {
    width: 24px; height: 24px;
    fill: none; stroke: currentColor; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .tabbar__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar__item.active, .tabbar__item.in-section { color: var(--accent); }
  .tabbar .nav__menu { align-items: stretch; min-width: 0; }
  .tabbar .nav__menu > .tabbar__item { flex: 1; }
  /* The bar's backdrop-filter makes it the containing block, so stay absolute above the tab */
  .tabbar .nav__popup--journal {
    position: absolute;
    top: auto;
    bottom: calc(100% + 0.6rem);
    left: 50%;
    right: auto;
    width: 14rem;
    max-height: none;
    transform: translateY(6px) scale(0.98);
    transform-origin: bottom center;
  }
  .tabbar .nav__menu.is-open .nav__popup--journal { transform: none; }
  .tabbar__item:active { opacity: 0.6; }
}

/* ---- Hero ----
   A compact page header: a small eyebrow, the title and a sub line. */
.page-hero {
  padding: calc(var(--nav-h) + env(safe-area-inset-top) + 2.3rem) 0 2.25rem;
  background:
    radial-gradient(ellipse 60% 50% at 75% 30%, var(--accent-glow) 0%, transparent 100%),
    var(--bg);
}
.page-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.15; }
.page-hero .eyebrow { margin-bottom: 0.4rem; }
.page-hero__sub {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Journal pages (day, week, quarter): the title and its meta with the period nav pushed
   right, then a toolbar row with the morning/evening switch on the left and the scale
   switch on the right. Both rows wrap on phones and keep their right-hand parts right. */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}
.page-head__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1rem;
  min-width: 0;
}
.page-head__meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.page-head .day-nav { margin-left: auto; }
.page-head .datepick__panel { left: auto; right: 0; }
.page-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 3.1rem;
}
.page-toolbar .scale-switch { margin: 0 0 0 auto; }
/* The cards follow the toolbar closely */
.page-hero:has(.page-toolbar) { padding-bottom: 0; }
.page-hero:has(.page-toolbar) ~ .section:not(.section--tight) { padding-top: 1rem; }

.day-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.6rem;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 400;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  letter-spacing: 0.01em;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 25%, transparent);
}
.btn-primary:hover { background: var(--accent-warm); transform: translateY(-1px); }
[data-theme="dark"] .btn-primary { color: #0f141b; }
.btn-outline {
  background: color-mix(in srgb, var(--bg-card) 50%, transparent);
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}
.btn-outline:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.btn-icon { width: 2.6rem; height: 2.6rem; padding: 0; font-size: 1rem; flex-shrink: 0; }

.link-button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent);
  font-size: 0.85rem;
  text-align: left;
}
.link-button:hover { text-decoration: underline; }

/* Hidden "add" forms: a link that expands into the form. */
.add-toggle > summary { list-style: none; width: fit-content; padding: 0; }
.add-toggle > summary::-webkit-details-marker { display: none; }
.add-toggle[open] > summary { margin-bottom: 0.6rem; }
.add-toggle__body { display: flex; flex-direction: column; gap: 0.8rem; }

/* ---- Inputs ---- */
.input {
  width: 100%;
  font: inherit;
  font-weight: 400;
  font-size: 1rem; /* ≥16px avoids iOS zoom-on-focus */
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.input::placeholder { color: var(--text-muted); opacity: 0.7; }
.input:focus {
  outline: none;
  background: var(--bg-card);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}
.input--date { width: auto; border-radius: 100px; padding: 0.55rem 1rem; }
.textarea { resize: vertical; min-height: 7rem; line-height: 1.6; field-sizing: content; }

.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.form-error { color: var(--danger); font-size: 0.85rem; margin-top: 0.5rem; }

/* ---- Cards ---- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.5rem 1.6rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-warm));
  opacity: 0;
  transition: opacity var(--transition);
}
.card:focus-within { border-color: var(--border-strong); box-shadow: 0 10px 30px rgba(0,0,0,0.06); }
.card:focus-within::before { opacity: 1; }

.card__head { display: flex; align-items: baseline; gap: 0.8rem; }
.card__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-subtle);
  border-radius: 8px;
  padding: 0.2rem 0.5rem;
  flex-shrink: 0;
  align-self: center;
}
.card__title { font-size: 1.35rem; flex: 1; }

.pill {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.65rem;
  border-radius: 100px;
  background: var(--accent-subtle);
  color: var(--accent);
  align-self: center;
}
.pill--done { background: var(--ok-subtle); color: var(--ok); }

/* ---- Day layout ---- */
.day-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.day-grid__main, .day-grid__side { display: flex; flex-direction: column; gap: 1.25rem; }
.day-grid__side { position: sticky; top: calc(var(--nav-h) + 1.25rem); }
/* Overview: the right column holds most of the content, so it scrolls instead of sticking. */
.day-grid--home .day-grid__side { position: static; }

/* ---- AI advice ---- */
/* One card, a tab per kind of advice; a dot marks a tab with advice not opened yet. */
.advice__head { align-items: center; flex-wrap: wrap; row-gap: 0.4rem; }
.advice__ai { font-weight: 600; letter-spacing: 0.06em; cursor: help; }
.advice__tabs {
  display: inline-flex; gap: 3px; padding: 3px; margin-right: auto; min-width: 0;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 100px;
}
.advice__tab {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.9rem; border: 0; border-radius: 100px; background: none;
  font: inherit; font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap;
  cursor: pointer; transition: all var(--transition);
}
.advice__tab:hover { color: var(--text-primary); }
.advice__tab[aria-selected="true"] { background: var(--bg-card); color: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.advice__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.advice__tab-new { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent); }
.advice__tab-busy { display: inline-block; font-size: 0.8rem; line-height: 1; animation: advice-spin 1.2s linear infinite; }
.person-tabs__count { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.advice__stamp { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }
.advice__findings { font-size: 0.85rem; color: var(--accent); text-decoration: none; white-space: nowrap; }
.advice__findings:hover { text-decoration: underline; }
.advice__findings-count {
  display: inline-block; min-width: 1.3rem; padding: 0 0.35rem; border-radius: 100px;
  background: var(--accent-subtle); font-size: 0.75rem; text-align: center;
}
.advice__refresh { font-size: 1.1rem; line-height: 1; text-decoration: none; }
.advice__refresh:disabled { opacity: 0.4; cursor: default; }
.advice--busy .advice__refresh { animation: advice-spin 1.2s linear infinite; }
@keyframes advice-spin { to { transform: rotate(360deg); } }
.advice__headline { font-weight: 500; margin-top: 0.8rem; }
.advice__block { margin-top: 0.9rem; }
.advice__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.advice__list { margin: 0.35rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; font-size: 0.92rem; }
.advice__watch {
  margin-top: 0.9rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  color: var(--danger);
  font-size: 0.9rem;
}
.advice__meta { margin-top: 0.9rem; font-size: 0.78rem; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .advice--busy .advice__refresh, .advice__tab-busy { animation: none; } }

/* Deep review: numbered findings, each stacked top to bottom. */
.findings { list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: finding; }
.finding { counter-increment: finding; padding: 1rem 0; border-top: 1px solid var(--border); }
.finding:last-child { padding-bottom: 0; }
.finding__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.finding__title { font-weight: 500; line-height: 1.35; }
.finding__title::before {
  content: counter(finding) ".";
  margin-right: 0.4rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.finding__conf, .finding__verdict {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
  background: var(--accent-subtle);
  color: var(--accent);
}
.finding__conf--hypothesis, .finding__verdict--unclear { background: none; border: 1px dashed var(--border-strong); color: var(--text-muted); }
.finding__verdict--confirmed { background: var(--ok-subtle); color: var(--ok); }
.finding__verdict--refuted { background: color-mix(in srgb, var(--danger) 9%, transparent); color: var(--danger); }
.finding__text { margin-top: 0.4rem; font-size: 0.92rem; color: var(--text-secondary); }
.finding__try {
  margin-top: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-lg);
  background: var(--accent-subtle);
  font-size: 0.9rem;
}
.finding__try-label { display: block; margin-bottom: 0.15rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.finding__foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 0.65rem; }
.finding__evidence { flex: 1 1 12rem; font-size: 0.82rem; color: var(--text-secondary); }
.finding__evidence summary { cursor: pointer; color: var(--text-muted); padding: 0.2rem 0; }
.finding__evidence p { margin-top: 0.3rem; }
.finding__rate { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chip--rate { padding: 0.2rem 0.6rem; font-size: 0.75rem; white-space: nowrap; }
.findings-rated { margin-top: 0.75rem; font-size: 0.82rem; color: var(--text-secondary); }
.findings-rated summary { cursor: pointer; color: var(--text-muted); padding: 0.2rem 0; }
.findings-rated__list { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.findings-rated__item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }

/* Findings page: the ledger of deep-review findings (findings.html). */
.findings-page { display: flex; flex-direction: column; gap: 1.25rem; }
.findings--ledger { margin-top: 0.25rem; }
.findings--ledger .finding__title::before { content: none; }
.finding__chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem; }
.finding__meta { margin-top: 0.55rem; font-size: 0.78rem; color: var(--text-muted); }
.finding__history { list-style: none; margin: 0.4rem 0 0; padding: 0 0 0 0.75rem; border-left: 2px solid var(--border); display: grid; gap: 0.6rem; }
.finding__history-day { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }
.finding__history-evidence { color: var(--text-muted); }
.chip--rate[aria-pressed="true"] { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }

/* ---- Photo of the day ---- */
.photo-card .card__head .link-button { font-size: 0.85rem; }
.photo-card__delete { color: var(--text-muted); }
.photo-card__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1.4rem 1rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  transition: all var(--transition);
}
.photo-card__empty:hover,
.photo-card__empty:focus-within { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
.photo-card__empty svg { width: 28px; height: 28px; }
.photo-card__empty span { font-weight: 400; }
.photo-card__empty small { font-size: 0.78rem; color: var(--text-muted); }
.photo-card__busy { display: none; }
.photo-card__upload.htmx-request .photo-card__cta { display: none; }
.photo-card__upload.htmx-request .photo-card__busy { display: inline; }
/* With a photo the upload form only serves "Заменить"; it shows up again while uploading. */
.photo-card.has-photo .photo-card__upload:not(.htmx-request) { display: none; }
.photo-card__figure { display: flex; flex-direction: column; gap: 0.7rem; }
.photo-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: calc(var(--radius-lg) - 4px);
  cursor: zoom-in;
}
.photo-card__caption { width: 100%; font-style: italic; }
@media (max-width: 600px) {
  /* Edge to edge on phones, a little taller. */
  .photo-card__img { width: calc(100% + 2.5rem); margin: 0 -1.25rem; border-radius: 0; aspect-ratio: 4 / 3; }
}

.list-inputs { display: flex; flex-direction: column; gap: 0.6rem; }
.list-inputs li { display: flex; align-items: center; gap: 0.75rem; }
.list-inputs__num {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--text-muted);
  width: 1rem;
  flex-shrink: 0;
  text-align: center;
  align-self: flex-start;
  line-height: 1.65rem;
}
/* Free-text answers work the same way: saved text reads as-is, click to edit. */
.text-answer__view {
  font-weight: 400; color: var(--text-primary);
  line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
  margin: -0.4rem -0.6rem; padding: 0.4rem 0.6rem; border-radius: 8px;
  cursor: text; transition: background 0.15s;
}
.text-answer__view:hover { background: var(--accent-subtle); }
.text-answer__view:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.text-answer:not(.is-editing) .text-answer__input,
.text-answer.is-editing .text-answer__view { display: none; }

/* @[Name] in saved answers links to that person; "@" in a field opens the suggestions. */
.mention { color: var(--accent); text-decoration: none; cursor: pointer; }
.mention:hover { text-decoration: underline; text-underline-offset: 3px; }
.mention-menu {
  position: absolute; z-index: 60;
  max-width: min(20rem, calc(100vw - 2rem));
  margin: 0; padding: 0.3rem; list-style: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 32px rgba(15,25,40,0.16);
}
.mention-menu__item {
  padding: 0.45rem 0.7rem; border-radius: 8px;
  cursor: pointer; overflow-wrap: anywhere;
}
.mention-menu__item.is-active, .mention-menu__item:hover { background: var(--accent-subtle); }
.mention-menu__item--add { color: var(--accent); }
.mention-menu__meta { margin-left: 0.5rem; font-size: 0.75rem; color: var(--text-muted); }

/* A saved item reads as text; clicking it swaps in the textarea. */
.list-item { padding: 0.15rem 0; }
.list-item__text {
  flex: 1; min-width: 0;
  font-weight: 400; color: var(--text-primary);
  line-height: 1.65; overflow-wrap: anywhere;
}
.list-item__input {
  flex: 1; min-width: 0;
  resize: none; overflow: hidden;
  line-height: 1.5; field-sizing: content;
}
.list-item__delete { align-self: flex-start; }
.list-item:hover .list-item__delete, .list-item__delete:focus-visible { opacity: 1; }
.list-item:not(.is-editing) .list-item__input,
.list-item.is-editing .list-item__text,
.list-item.is-editing .list-item__delete,
.list-item.is-editing .list-item__totask,
.list-item.is-editing .list-item__note-btn,
.list-item.is-editing .item-menu,
.list-item__note-btn[hidden] { display: none; }
.list-item__note-btn { align-self: flex-start; margin-top: 0.3rem; }
.list-item .item-menu { align-self: flex-start; margin-top: -0.1rem; }
.list-item__totask {
  align-self: flex-start; flex-shrink: 0; margin-top: 0.2rem;
  font-size: 0.78rem; white-space: nowrap;
}
.list-item__totask.is-sent { color: var(--ok); cursor: default; text-decoration: none; }

/* Morning / evening: one part of the day at a time (switch rule is inline in day.html) */
.day-section { display: flex; flex-direction: column; gap: 1.25rem; }
.day-sections__switch { display: grid; width: fit-content; }

/* Weekly review: the week's daily answers as reference, one toggle per prompt
   (the per-prompt show rules are inline in partials/week_digest.html) */
.digest { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.digest__toggles { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.digest__toggle { position: relative; border-style: solid; }
.digest__toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.digest__toggle:has(input:checked) { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
.digest__toggle:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--accent); }
.digest__panel { display: none; margin-top: 1.25rem; }
.digest__title { font-size: 0.95rem; font-weight: 500; margin-bottom: 0.5rem; }
.digest__days { display: flex; flex-direction: column; }
.digest__day {
  display: grid; grid-template-columns: 4.25rem 1fr; gap: 0.75rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--border);
}
.digest__day:last-child { border-bottom: none; }
.digest__items { display: flex; flex-direction: column; gap: 0.3rem; }
.digest__items li {
  font-size: 0.92rem; font-weight: 400; color: var(--text-secondary);
  white-space: pre-line; overflow-wrap: anywhere;
}
.digest__date {
  padding-top: 0.2rem;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}
.digest__date:hover { color: var(--accent); }
.list-item.is-editing .list-inputs__num { align-self: center; }

/* ---- Tasks ---- */
.tasks { display: flex; flex-direction: column; }
.task {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}
.task:last-child { border-bottom: none; }
.task__check {
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
  border-radius: 7px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-input);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: transparent;
  transition: all var(--transition);
}
.task__check svg { width: 0.9rem; height: 0.9rem; }
.task__check:hover { border-color: var(--accent); }
.task--done .task__check { background: var(--accent); border-color: var(--accent); color: #fff; }
.task__text { flex: 1; font-weight: 400; color: var(--text-primary); word-break: break-word; }
.task--done .task__text { color: var(--text-muted); text-decoration: line-through; }
.task__carried { color: var(--text-muted); font-size: 0.8rem; }
.task__note {
  display: inline-flex; vertical-align: -0.15em; padding: 0.1rem; margin: -0.1rem 0;
  border: none; border-radius: var(--radius); background: none;
  color: var(--text-muted); cursor: pointer;
}
.task__note .icon { width: 1rem; height: 1rem; }
.task__note:hover, .task__note:focus-visible { color: var(--accent); }
.task__delete {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  opacity: 0.4;
  transition: opacity var(--transition), color var(--transition);
}
.task:hover .task__delete, .task__delete:focus-visible { opacity: 1; }
.task__delete:hover { color: var(--danger); }
@media (hover: none) { .task__delete { opacity: 0.6; } }

.tasks__moved { margin: -0.4rem 0 0; font-size: 0.85rem; color: var(--text-muted); }
.tasks__moved a { color: var(--accent); }

/* ---- Item menu (⋯ on list items; partials/item_menu.html, placed by app.js) ---- */
.item-menu { flex-shrink: 0; }
.item-menu__toggle {
  list-style: none;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--transition), color var(--transition), background var(--transition);
}
.item-menu__toggle::-webkit-details-marker { display: none; }
.item-menu__toggle .icon { width: 1.15rem; height: 1.15rem; }
.task:hover .item-menu__toggle, .list-item:hover .item-menu__toggle, .goal:hover .item-menu__toggle, .home-goal:hover .item-menu__toggle, .qgoal:hover .item-menu__toggle, .item-menu__toggle:focus-visible, .item-menu[open] .item-menu__toggle { opacity: 1; }
.item-menu__toggle:hover, .item-menu[open] .item-menu__toggle { color: var(--text-primary); background: var(--bg-hover); }
.item-menu__toggle:focus { outline: none; }
.item-menu__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: none) { .item-menu__toggle { opacity: 0.75; } }

.item-menu__panel {
  position: fixed;
  z-index: 110; /* above the nav and the tab bar */
  width: min(21rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 1rem);
  overflow-y: auto;
  padding: 0.35rem;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 18px 48px rgba(15,25,40,0.16);
}
.item-menu:not([data-placed]) .item-menu__panel { visibility: hidden; }
.item-menu__label {
  margin: 0;
  padding: 0.55rem 0.65rem 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.item-menu__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: none;
  border-radius: var(--radius);
  background: none;
  font: inherit;
  font-size: 0.92rem;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.item-menu__item .icon { width: 1.05rem; height: 1.05rem; flex-shrink: 0; color: var(--text-muted); }
.item-menu__item:hover, .item-menu__item:focus-visible { background: var(--bg-hover); outline: none; }
.item-menu__item--static { cursor: default; }
.item-menu__item--static:hover { background: none; }
.item-menu__item--danger, .item-menu__item--danger .icon { color: var(--danger); }
.item-menu__text { flex: 1; }
.item-menu__hint { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.item-menu__divider { margin: 0.3rem 0.4rem; border: 0; border-top: 1px solid var(--border); }
.item-menu__form-row { display: flex; gap: 0.4rem; padding: 0 0.4rem 0.4rem; }
.item-menu__form-row .input { flex: 1; min-width: 0; padding-top: 0.4rem; padding-bottom: 0.4rem; }
.item-menu__form-row .btn { padding: 0.4rem 0.75rem; font-size: 0.85rem; }

.task-add { display: flex; gap: 0.5rem; }
.task-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; width: 100%; }
.task-edit .input { flex: 1 1 12rem; }

/* ---- Metrics ---- */
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.metric { display: flex; flex-direction: column; gap: 0.4rem; }
.metric__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.metric__src { color: var(--danger); letter-spacing: 0; }
.metric__field { position: relative; display: block; }
.metric__input {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 500;
  padding-right: 3.6rem;
}
.metric__unit {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  pointer-events: none;
}

/* ---- Save bar ---- */
/* Entries autosave; the bar only reports status. "Сохранено" fades, errors stay. */
.save-bar { display: flex; align-items: center; justify-content: flex-end; min-height: 1.2rem; }
.save-status {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.save-status__ok { color: var(--ok); animation: save-fade 0.4s ease 2s forwards; }
@keyframes save-fade { to { opacity: 0; } }
.save-status__error { color: var(--danger); text-transform: none; letter-spacing: 0; }

/* Unsaved drafts (app.js): pending, waiting for the network, or in conflict with another device. */
/* The admin page's message to everyone and read-only mode (base.html), under the fixed nav;
   the page hero after it needn't leave room for the nav again. */
.site-banner {
  margin-top: calc(var(--nav-h) + env(safe-area-inset-top));
  background: var(--accent-subtle);
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text-primary);
}
.site-banner--bare { margin-top: env(safe-area-inset-top); }  /* logged out: no nav */
.site-banner--warn { background: color-mix(in srgb, var(--danger) 12%, var(--bg)); }
.site-banner[hidden] { display: none; }
.site-banner__inner { display: flex; align-items: center; gap: 1rem; padding-block: 0.7rem; }
.site-banner__text { flex: 1; margin: 0; overflow-wrap: anywhere; }
.site-banner__close {
  flex: none; padding: 0.15rem 0.5rem; border: 0; border-radius: 8px; background: none;
  font-size: 1.25rem; line-height: 1; color: var(--text-muted); cursor: pointer;
}
.site-banner__close:hover { color: var(--text-primary); background: var(--bg-hover); }
.site-banner:not([hidden]):not(.site-banner--bare) ~ .page-hero { padding-top: 2rem; }

.draft-banner {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 100;
  transform: translateX(-50%);
  width: min(30rem, calc(100vw - 2rem));
  padding: 1rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 18px 48px rgba(15,25,40,0.16);
  font-size: 0.9rem;
}
.draft-banner p { margin: 0; }
.draft-banner a { color: var(--accent); }
.draft-banner__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; }
.draft-banner__actions .btn { padding: 0.5rem 1.1rem; }
main[inert] { opacity: 0.6; }
@media (max-width: 600px) {
  body:has(.tabbar) .draft-banner { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 0.75rem); }
}

/* ---- Login and password pages (auth.html) ----
   The accent panel with today in the year (partials/year_rings.html) beside the form. On
   narrower screens the panel is a band on top and the form a sheet pulled up over its foot.
   In the dark theme the panel is a card with the rings in the accent. The language switch
   sits at the top right of the page, over the band on a phone. */
.auth {
  --panel: var(--accent);
  --panel-fg: #fff;
  --panel-dim: rgba(255,255,255,0.8);
  --panel-mid: rgba(255,255,255,0.55);
  --panel-faint: rgba(255,255,255,0.2);
  --panel-ghost: rgba(255,255,255,0.08);
  --panel-arc: #fff;
  --auth-top: env(safe-area-inset-top);
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}
[data-theme="dark"] .auth {
  --panel: var(--bg-card);
  --panel-fg: var(--text-primary);
  --panel-dim: var(--text-muted);
  --panel-mid: color-mix(in srgb, var(--accent) 60%, transparent);
  --panel-faint: var(--border-strong);
  --panel-ghost: var(--border);
  --panel-arc: var(--accent);
}
/* The banner above already keeps clear of the status bar. */
.site-banner:not([hidden]) ~ .auth { --auth-top: 0px; }

.auth__panel {
  flex: 1 1 55%;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.75rem;
  padding: calc(var(--auth-top) + 2.25rem) 3rem 2.5rem;
  background: var(--panel);
  color: var(--panel-fg);
}
.auth__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1;
}
.auth__mark {
  width: 1.75rem; height: 1.75rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round;
}
.auth__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 3.25rem; }
.auth__stats div { display: flex; flex-direction: column; gap: 0.5rem; }
.auth__stats dt {
  font-family: var(--font-mono);
  font-size: 0.69rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--panel-dim);
}
.auth__stats dd { font-size: 0.875rem; color: var(--panel-dim); }
.auth__stats b {
  margin-right: 0.15em;
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1;
  color: var(--panel-fg);
}

.rings { display: block; width: min(100%, 470px); height: auto; margin: 0 auto; overflow: visible; }
.rings__ghost, .rings__track, .rings__bound { fill: none; stroke-width: 1.5; }
.rings__ghost { stroke: var(--panel-ghost); }
.rings__track, .rings__bound { stroke: var(--panel-faint); }
.rings__week { fill: none; stroke: var(--panel-faint); stroke-width: 3.5; stroke-linecap: round; }
.rings__week--past { stroke: var(--panel-mid); }
.rings__week--now { stroke: var(--panel-arc); stroke-width: 5; }
.rings__arc {
  fill: none;
  stroke: var(--panel-arc);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 1;
  animation: rings-draw 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.rings__head { fill: var(--panel-arc); animation: rings-fade 0.5s 1.3s ease-out both; }
.rings__halo { fill: var(--panel-faint); animation: rings-fade 0.5s 1.3s ease-out both; }
@keyframes rings-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } }
@keyframes rings-fade { from { opacity: 0; } }
.rings text { text-anchor: middle; }
.rings__numeral {
  fill: var(--panel-dim);
  font-family: var(--font-display);
  font-size: 22px;
  dominant-baseline: central;
}
.rings__numeral--now { fill: var(--panel-fg); }
.rings__label, .rings__small {
  fill: var(--panel-dim);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
}
/* Over the hairline of its ring, knocked out of it */
.rings .rings__label {
  text-anchor: end;
  paint-order: stroke;
  stroke: var(--panel);
  stroke-width: 12px;
  stroke-linejoin: round;
}
.rings__day { fill: var(--panel-fg); font-family: var(--font-display); font-size: 136px; }

.auth__main {
  flex: 1 1 45%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: calc(var(--auth-top) + 2rem) 2.5rem 2rem;
}
.auth__body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2.5rem 0; }
.auth__form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 2rem; }
.auth__head h1 { font-size: clamp(2.25rem, 3.6vw, 3.1rem); line-height: 1.05; }
.auth__head p { margin-top: 0.75rem; font-size: 1.06rem; color: var(--text-secondary); }
.auth__fields { display: flex; flex-direction: column; gap: 1.1rem; }
.auth .input { height: 3.25rem; border-radius: 12px; border-color: color-mix(in srgb, var(--text-primary) 22%, transparent); }
.auth .input:hover { border-color: color-mix(in srgb, var(--text-primary) 40%, transparent); }
.auth .input:focus { border-color: var(--accent); }
.auth .input[readonly] { color: var(--text-secondary); background: var(--bg-hover); }
.auth__actions { display: flex; flex-direction: column; gap: 0.9rem; }
.auth__submit { width: 100%; height: 3.25rem; font-size: 1rem; font-weight: 500; }
.auth__submit .icon { font-size: 1.1rem; stroke-width: 2; }
.auth__alert {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.auth__alert .icon { font-size: 1.1rem; margin-top: 0.1rem; }
.auth__alert--wait { color: var(--text-secondary); background: var(--bg-hover); }
.auth__note { font-size: 0.875rem; color: var(--text-muted); }
.auth__privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.auth__lang {
  position: absolute;
  top: calc(var(--auth-top) + 1.5rem);
  right: 2rem;
  z-index: 2;
  display: flex;
  gap: 2px;
}
.auth__lang button {
  min-width: 2.5rem;
  height: 2.125rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 8px;
  background: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.auth__lang button:hover { color: var(--text-primary); background: var(--bg-hover); }
.auth__lang button[aria-current] { color: var(--accent); background: var(--accent-subtle); }
.auth__lang button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* A password input whose eye button shows what was typed (app.js) */
.password-input { position: relative; }
.password-input .input { padding-right: 3.5rem; }
.password-input__toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: none;
  font-size: 1.15rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.password-input__toggle[hidden] { display: none; }
.password-input__toggle:hover { color: var(--text-primary); background: var(--bg-hover); }
.password-input__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.password-input__toggle .icon + .icon,
.password-input__toggle[aria-pressed="true"] .icon:first-child { display: none; }
.password-input__toggle[aria-pressed="true"] .icon + .icon { display: block; }

@media (max-width: 860px) {
  .auth { flex-direction: column; }
  .auth__panel { flex: none; gap: 1rem; padding: calc(var(--auth-top) + 0.75rem) 1.25rem 2.75rem; }
  .auth__brand { min-height: 44px; font-size: 1.25rem; }
  .auth__mark { width: 1.5rem; height: 1.5rem; }
  .rings { width: 220px; }
  .rings__ghost, .rings__track, .rings__bound { stroke-width: 3; }
  .rings__week { stroke-width: 9; }
  .rings__week--now { stroke-width: 12; }
  .rings__arc { stroke-width: 24; }
  .rings__numeral, .rings__label, .rings__weekday { display: none; }
  .rings__day { font-size: 180px; }
  .rings__small { font-size: 36px; letter-spacing: 0.12em; }
  .auth__stats {
    width: 100%;
    max-width: 440px;  /* in line with the form */
    margin: 0 auto;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
  }
  .auth__stats div { gap: 0.3rem; }
  .auth__stats dt { font-size: 0.62rem; }
  .auth__stats dd { font-size: 0.8rem; }
  .auth__stats b { font-size: 1.4rem; }
  .auth__main {
    position: relative;  /* painted over the panel's foot */
    flex: 1 0 auto;
    margin-top: -1.75rem;
    padding: 1.75rem 1.5rem calc(env(safe-area-inset-bottom) + 1.25rem);
    border-radius: 28px 28px 0 0;
    background: var(--bg);
  }
  .auth__body { align-items: flex-start; padding: 0 0 1.75rem; }
  .auth__form { max-width: 440px; gap: 1.5rem; }
  .auth__head h1 { font-size: 2.125rem; }
  .auth__head p { margin-top: 0.4rem; font-size: 1rem; }
  .auth__lang { top: calc(var(--auth-top) + 0.75rem); right: 0.75rem; }
  .auth__lang button { min-width: 44px; height: 44px; color: var(--panel-dim); }
  .auth__lang button:hover { color: var(--panel-fg); background: var(--panel-ghost); }
  .auth__lang button[aria-current] { color: var(--panel-fg); background: var(--panel-faint); }
  .auth__lang button:focus-visible { outline-color: var(--panel-fg); }
}
@media (max-width: 600px) {
  .rings { width: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .rings__arc, .rings__head, .rings__halo { animation: none; }
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .day-grid { grid-template-columns: 1fr; }
  .day-grid__side { position: static; }
}
@media (max-width: 600px) {
  .container, .nav__inner { padding: 0 1rem; }
  .page-hero { padding-top: calc(var(--nav-h) + env(safe-area-inset-top) + 1.6rem); }
  /* The date and ← 📅 → share a row (the nav only drops below when a "today" button joins it),
     and both switches fit one row: text labels only, a little tighter. */
  .page-head__title { flex: 1 1 11rem; }
  .page-head h1 { font-size: 1.35rem; }
  .page-toolbar { gap: 0.5rem; }
  .page-toolbar .segmented span { padding: 0.35rem 0.55rem; }
  .page-toolbar .scale-switch .icon { display: none; }
  .card { padding: 1.25rem; }
  /* On phones the status floats above the tab bar as a small pill while it has text. */
  .save-bar:not(.save-bar--inline) {
    position: fixed;
    right: 1rem;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 0.75rem);
    z-index: 90;
    min-height: 0;
    pointer-events: none;
  }
  .save-bar:not(.save-bar--inline) .save-status:not(:empty) {
    padding: 0.35rem 0.75rem;
    border-radius: 100px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  }
  .save-bar:not(.save-bar--inline) .save-status:has(.save-status__ok) { animation: save-fade 0.4s ease 2s forwards; }
}

/* ---- Date picker (custom: native picker can't show entry dots) ---- */
.datepick { position: relative; }
.datepick__toggle { list-style: none; padding: 0.6rem 1.1rem; }
.datepick__toggle.btn-icon { padding: 0; }
.datepick__toggle::-webkit-details-marker { display: none; }
.datepick__toggle svg { width: 1rem; height: 1rem; }
.datepick[open] .datepick__toggle { border-color: var(--accent); color: var(--accent); }
.datepick__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 50;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
  padding: 1rem;
  width: 18.5rem;
}

.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.cal__title { font-family: var(--font-display); font-size: 1.15rem; }
.cal__nav {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--text-secondary);
}
.cal__nav:hover { background: var(--bg-hover); color: var(--text-primary); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__wd {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 0.3rem;
}
.cal__day {
  position: relative;
  display: grid;
  place-items: center;
  height: 2.3rem;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: background var(--transition);
}
.cal__day:hover { background: var(--bg-hover); }
.cal__day--out { color: var(--text-muted); opacity: 0.5; }
.cal__day--today { --cal-ring: 1.5px; box-shadow: inset 0 0 0 var(--cal-ring) var(--accent); }
.cal__day--selected { background: var(--accent); color: #fff; }
.cal__day--selected:hover { background: var(--accent-warm); }
[data-theme="dark"] .cal__day--selected { color: #0f141b; }
.cal__dot {
  position: absolute;
  /* 2px clear of the cell edge; on "today" 2px clear of the ring */
  left: calc(var(--cal-ring, 0px) + 2px);
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.cal__day--selected .cal__dot { background: currentColor; }

/* ---- Scale (segmented control, e.g. −2…+2) ---- */
.metric--wide { grid-column: 1 / -1; }
.scale { border: none; min-width: 0; }
.scale__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0;
  margin-bottom: 0.35rem;
}
.scale__opts {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  padding: 3px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.scale__opt {
  --tone: var(--text-muted);
  position: relative;
  display: grid;
  place-items: center;
  height: 2.1rem;
  border-radius: 7px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.scale__opt[data-tone="neg"] { --tone: var(--danger); }
.scale__opt[data-tone="pos"] { --tone: var(--ok); }
.scale__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.scale__opt:hover { background: var(--bg-hover); color: var(--text-primary); }
.scale__opt:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--accent); }
.scale__opt:has(input:checked) {
  /* ±1 lighter, ±2 full strength; 0 is a faint neutral grey */
  background: color-mix(in srgb, var(--tone) calc(45% + 55% * var(--strength)), var(--bg-card));
  color: #fff;
}
.scale__opt[data-tone="zero"]:has(input:checked) {
  background: color-mix(in srgb, var(--text-muted) 16%, var(--bg-card));
  box-shadow: inset 0 0 0 1px var(--border-strong);
  color: var(--text-primary);
}
[data-theme="dark"] .scale__opt:has(input:checked) { color: #0f141b; }
.scale__caption {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: color var(--transition);
}
.scale:has([data-tone="neg"] input:checked) .scale__caption { color: var(--danger); }
.scale:has([data-tone="pos"] input:checked) .scale__caption { color: var(--ok); }
.scale:has([data-tone="zero"] input:checked) .scale__caption { color: var(--text-secondary); }

/* ---- Shared bits for week features ---- */
.eyebrow__link { color: inherit; border-bottom: 1px solid currentColor; }
.eyebrow__link:hover { color: var(--accent-warm); }
.section--tight { padding: 0 0 0.5rem; }
.empty-hint { font-size: 0.9rem; color: var(--text-muted); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.8rem;
  border-radius: 100px;
  border: 1px dashed var(--border-strong);
  background: none;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-secondary);
  transition: all var(--transition);
}
.chip:hover { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
.chip__count { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }
.goal-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.goal-chips__label {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.task__goal { color: var(--accent); font-size: 0.85rem; }

/* ---- Notes ---- */
.notes { display: flex; flex-direction: column; }
.note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}
.note:last-child { border-bottom: none; }
.note .task__check { margin-top: 0.15rem; }
.note__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.note__date {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.note__text { font-weight: 400; word-break: break-word; }
.note--done .note__text { color: var(--text-muted); }
.note--done .task__check { background: var(--accent); border-color: var(--accent); color: #fff; }
.note:hover .task__delete { opacity: 1; }
.note--edit { display: block; }
.note--edit .task-edit .input { flex-basis: 100%; }
.note__input { resize: none; overflow: hidden; line-height: 1.5; field-sizing: content; }
.note-add { align-items: flex-start; }
.note-add .note__input { flex: 1; min-width: 0; }

/* ---- Goals ---- */
.goals { display: flex; flex-direction: column; }
.goal {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}
.goal:last-child { border-bottom: none; }
.goal__main { display: flex; flex-direction: column; min-width: 0; }
.goal__text { font-weight: 400; color: var(--text-primary); word-break: break-word; }
.goal--done .goal__text { color: var(--text-muted); text-decoration: line-through; }
.goal__tag { color: var(--text-muted); font-size: 0.8rem; margin-left: 0.2rem; }
.goal__days { font-size: 0.78rem; color: var(--text-muted); }
.goal__progress { display: inline-flex; align-items: center; gap: 4px; }
.goal__pip { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--accent); }
.goal__pip--on { background: var(--accent); }
.goal--done .goal__pip { border-color: var(--ok); }
.goal--done .goal__pip--on { background: var(--ok); }
.goal__count { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); margin-left: 0.3rem; }
.goal__actions { display: inline-flex; }
.goal:hover .task__delete { opacity: 1; }

.goal-add { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.goal-add__text { flex: 1 1 12rem; }
.goal-add__target { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text-muted); }
.goal-add__target .input { width: 4.2rem; text-align: center; font-family: var(--font-mono); }
.goal-add__recurring { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; }
.goal-add__recurring input { accent-color: var(--accent); width: 1rem; height: 1rem; }

/* ---- Week strip ---- */
.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.6rem; }
.day-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.9rem 0.4rem 0.8rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.day-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.06); border-color: var(--border-strong); }
.day-tile--today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.day-tile--future { opacity: 0.55; }
.day-tile__wd {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.day-tile__num { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.day-tile__fill { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--accent); }
.day-tile--partial .day-tile__fill { background: conic-gradient(var(--accent) 0 50%, transparent 0); }
.day-tile--full .day-tile__fill { background: var(--accent); }
.day-tile--empty .day-tile__fill { border-color: var(--border-strong); }
.day-tile__tasks { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-secondary); min-height: 1em; }
.day-tile__scales { display: flex; gap: 3px; }

.scale-bar {
  --tone: var(--text-muted);
  width: 14px;
  height: 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--tone) calc(45% + 55% * var(--strength, 0)), var(--bg-card));
}
.scale-bar[data-tone="neg"] { --tone: var(--danger); }
.scale-bar[data-tone="pos"] { --tone: var(--ok); }
.scale-bar[data-tone="zero"] { background: color-mix(in srgb, var(--text-muted) 22%, var(--bg-card)); }
.scale-bar--none { background: none; box-shadow: inset 0 0 0 1px var(--border-strong); }

/* ---- Weekly review & averages ---- */
.review-field { display: flex; flex-direction: column; }
.review-field .list-inputs__add { align-self: flex-start; margin-top: 0.8rem; }
.save-bar--inline { position: static; background: none; padding: 0; }
.averages { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.avg { display: flex; flex-direction: column; gap: 0.15rem; }
.avg__value { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 500; }
.avg__unit { font-size: 0.7rem; color: var(--text-muted); font-weight: 400; }
.avg__meta { display: flex; gap: 0.5rem; align-items: baseline; font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); }
.avg__delta--up { color: var(--ok); }
.avg__delta--down { color: var(--danger); }

@media (max-width: 600px) {
  /* All seven days in one row: compact tiles instead of a horizontal scroller. */
  .week-strip { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; }
  .day-tile { gap: 0.3rem; padding: 0.6rem 0.1rem 0.5rem; border-radius: 10px; }
  .day-tile__wd { letter-spacing: 0.04em; }
  .day-tile__num { font-size: 1.3rem; }
  .day-tile__fill { width: 12px; height: 12px; }
  .day-tile__tasks { font-size: 0.62rem; }
  .day-tile__scales { gap: 2px; }
  .day-tile .scale-bar { width: 12px; }
  .goal { grid-template-columns: 1fr auto; }
  .goal__actions { grid-column: 2; grid-row: 1; }
  .goal__progress { grid-column: 1 / -1; }
}

/* ---- Quarter ---- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.theme { display: block; margin-top: 1.25rem; max-width: 680px; }
.theme__input {
  width: 100%;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--text-primary);
  background: none;
  border: none;
  border-bottom: 1px dashed var(--border-strong);
  padding: 0.3rem 0;
}
.theme__view { font-family: var(--font-display); font-style: italic; font-size: 1.35rem; }
.theme__input::placeholder { color: var(--text-muted); opacity: 0.7; }
.theme__input:focus { outline: none; border-bottom: 1px solid var(--accent); }

.quarter-progress { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; max-width: 420px; }
.quarter-progress__bar { flex: 1; height: 4px; border-radius: 2px; background: var(--border-strong); overflow: hidden; }
.quarter-progress__bar span { display: block; height: 100%; background: var(--accent); }
.quarter-progress__label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }

/* Desktop: every week of the quarter (13 or 14, incl. W53) on one row. */
.week-strip--quarter { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
@media (min-width: 601px) and (max-width: 1000px) {
  .week-strip--quarter { gap: 0.35rem; }
  .week-strip--quarter .week-tile { padding: 0.65rem 0.1rem 0.5rem; }
  .week-strip--quarter .week-tile__days { gap: 1.5px; }
  .week-strip--quarter .week-tile__day { width: 4px; height: 4px; }
}
.week-tile {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  padding: 0.8rem 0.3rem 0.6rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.week-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.06); border-color: var(--border-strong); }
.week-tile__days { display: flex; gap: 2px; }
.week-tile__day { width: 5px; height: 5px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border-strong); }
.week-tile__day--on { background: var(--accent); box-shadow: none; }
.week-tile__review { font-size: 0.75rem; color: var(--ok); min-height: 1em; }

.qgroup { display: flex; flex-direction: column; gap: 0.2rem; }
.qgroup__title {
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
.qgoal {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.8rem;
  padding: 0.65rem 0; border-bottom: 1px solid var(--border);
}
.qgoal:last-child { border-bottom: none; }
.qgoal:not(:has(.task__check)) { grid-template-columns: 1fr auto auto; }
.qgoal .goal__days a { color: var(--accent); }
.task__check--on { background: var(--accent); border-color: var(--accent); color: #fff; }
.qgoal__behind { color: var(--danger); }
.qgoal__ok { color: var(--ok); }
.qgoal__meter { display: inline-flex; align-items: center; gap: 0.5rem; }
.qgoal__bar { position: relative; width: 6rem; height: 6px; border-radius: 3px; background: var(--accent-subtle); }
.qgoal__fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--accent); }
.goal--done .qgoal__fill { background: var(--ok); }
.qgoal__pace { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text-primary); opacity: 0.55; border-radius: 1px; }
.qgoal__metric { font-family: var(--font-mono); font-size: 1rem; font-weight: 500; padding: 0.15rem 0.6rem; border-radius: 100px; }
.qgoal__metric--ok { color: var(--ok); background: var(--ok-subtle); }
.qgoal__metric--bad { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.qgoal__metric--none { color: var(--text-muted); }
.goal__quarter { display: inline-block; font-size: 0.75rem; color: var(--accent); }
.goal__tag--quarter { color: var(--accent); text-decoration: none; }
.goal-add__quarter select { width: auto; max-width: 14rem; padding: 0.55rem 0.7rem; font-size: 0.9rem; }

.qgoal-add { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.qgoal-add__row, .qgoal-add__metric { display: flex; gap: 0.5rem; width: 100%; flex-wrap: wrap; }
.qgoal-add__metric select { flex: 1 1 9rem; width: auto; }
.qgoal-add__op { flex: 0 0 4.2rem !important; text-align: center; }
.qgoal-add__target { flex: 1 1 6rem; width: auto; font-family: var(--font-mono); }
.qgoal-add__count, .qgoal-add__metric { display: none; }
.qgoal-add:has(input[value="count"]:checked) .qgoal-add__count { display: inline-flex; }
.qgoal-add:has(input[value="metric"]:checked) .qgoal-add__metric { display: flex; }

/* Click-to-edit text. Inline (a span, not a button) so that when it wraps, trailing
   tags like ◎ / ↻ sit right after the last word instead of on a line of their own. */
.goal__edit {
  font: inherit; color: inherit; text-align: left; background: none; border: none;
  padding: 0; margin: 0; cursor: text; text-decoration: inherit;
}
.goal__edit:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.goal__edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.qgoal--edit { display: block; }
.qgoal-edit { display: flex; flex-direction: column; gap: 0.6rem; }
.qgoal-edit__metric { display: flex; gap: 0.5rem; width: 100%; flex-wrap: wrap; }
.qgoal-edit__metric select { flex: 1 1 9rem; width: auto; }
.goal--edit { display: block; }
.goal-edit { display: flex; flex-direction: column; gap: 0.6rem; }

.segmented {
  display: inline-grid; grid-auto-flow: column; gap: 3px; padding: 3px;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 100px;
}
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span {
  display: block; padding: 0.35rem 0.9rem; border-radius: 100px;
  font-size: 0.82rem; color: var(--text-secondary); transition: all var(--transition);
}
.segmented label:hover span { color: var(--text-primary); }
.segmented input:checked + span { background: var(--bg-card); color: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.segmented input:focus-visible + span { box-shadow: 0 0 0 2px var(--accent); }
.settings__options--theme span { display: flex; align-items: center; justify-content: center; gap: 0.4rem; }
.settings__options--theme .icon { font-size: 0.95rem; }
.settings__options--palette span { display: flex; align-items: center; justify-content: center; gap: 0.45rem; }
/* Each swatch shows its palette's accent for the current light/dark mode. */
.swatch {
  width: 0.8rem; height: 0.8rem; flex: none; border-radius: 50%;
  background: var(--swatch-light);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
[data-theme="dark"] .swatch { background: var(--swatch-dark); }
@media (max-width: 600px) {
  /* Six options don't fit one row on a phone: two rows of three. */
  .settings__options--palette { grid-auto-flow: row; grid-template-columns: repeat(3, auto); border-radius: 16px; }
  .settings__options--palette span { border-radius: 12px; }
}
/* While the weekday switch is on, the chosen palette only waits for it to be turned off. */
.settings__options--palette.is-overridden { opacity: 0.55; }
.settings__switch > span:has(.swatch) { display: flex; align-items: center; gap: 0.45rem; }

@media (max-width: 600px) {
  /* The whole quarter at a glance: two rows of 7 compact tiles instead of a scroller. */
  .week-strip--quarter {
    grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-flow: row;
    gap: 0.35rem; overflow: visible; margin: 0; padding: 0;
  }
  .week-strip--quarter .week-tile { gap: 0.3rem; padding: 0.55rem 0.1rem 0.45rem; border-radius: 10px; }
  .week-strip--quarter .day-tile__wd { letter-spacing: 0.02em; }
  .week-strip--quarter .week-tile__days { gap: 1.5px; }
  .week-strip--quarter .week-tile__day { width: 4px; height: 4px; }
  .week-strip--quarter .day-tile__tasks { font-size: 0.62rem; }
  /* Count/metric goals: title + delete on the first row, the meter full-width below. */
  .qgoal:not(:has(.task__check)) { grid-template-columns: 1fr auto; row-gap: 0.4rem; }
  .qgoal:not(:has(.task__check)) .task__delete { grid-row: 1; grid-column: 2; }
  .qgoal__meter, .qgoal__metric { grid-column: 1 / -1; justify-self: start; }
  .qgoal__meter { justify-self: stretch; }
  .qgoal__bar { flex: 1; width: auto; }
}

/* ---- Charts (colours validated with the dataviz palette checker) ----
   --chart-pos/mid/grid/raw follow the palette (see the top of this file);
   --chart-neg is a default a palette may override. */
:root {
  --chart-good: #3d7a3d;
  --chart-neg: #b04a5a;
}
:root[data-theme="dark"] {
  --chart-good: #6fae6f;
  --chart-neg: #cc6f7f;
}

.stats { display: flex; flex-direction: column; gap: 1.25rem; }
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.chart-grid--compact { gap: 1.5rem 1.25rem; }
.chart { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.chart__head { display: flex; flex-direction: column; gap: 0.15rem; }
.chart__title {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
.chart__stat { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.chart__value { font-family: var(--font-body); font-size: 1.6rem; font-weight: 500; color: var(--text-primary); }
.chart__sub { font-size: 0.78rem; color: var(--text-muted); }
.chart__empty { font-size: 0.9rem; color: var(--text-muted); padding: 2rem 0; text-align: center; }
.chart__plot { position: relative; }
.chart__plot--scroll { overflow-x: auto; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

.chart__grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart__zero { stroke: var(--chart-mid); stroke-width: 1; }
.chart__tick { font-family: var(--font-mono); font-size: 10px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.chart__dot { fill: var(--chart-raw); }
.chart__dot--pos { fill: var(--chart-pos); opacity: 0.55; }
.chart__dot--neg { fill: var(--chart-neg); opacity: 0.55; }
.chart__dot--zero { fill: var(--chart-mid); }
.chart__avg { fill: none; stroke: var(--chart-pos); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__end { fill: var(--chart-pos); stroke: var(--bg-card); stroke-width: 2; }
.chart__endlabel { font-family: var(--font-mono); font-size: 11px; font-weight: 500; fill: var(--text-primary); }
.chart__cross { stroke: var(--text-muted); stroke-width: 1; }
.chart__bar { fill: var(--chart-pos); }
.chart__nobar { stroke: var(--chart-grid); stroke-width: 2; stroke-linecap: round; }
.chart__barhit { cursor: default; outline: none; }
.chart__barhit:hover .chart__bar, .chart__barhit:focus-visible .chart__bar { fill: var(--accent-warm); }
a.chart__barhit { cursor: pointer; }

.chart__tip {
  position: absolute; z-index: 5; pointer-events: none;
  padding: 0.45rem 0.65rem; border-radius: 8px;
  background: var(--bg-card); border: 1px solid var(--border-strong);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  font-size: 0.8rem; white-space: nowrap; color: var(--text-secondary);
}
.chart__tip b { display: block; font-size: 0.95rem; font-weight: 500; color: var(--text-primary); }
.chart__tip .tip-key { display: inline-block; width: 10px; height: 2px; background: var(--chart-pos); vertical-align: middle; margin-right: 4px; }

.chart__table summary { font-size: 0.75rem; color: var(--text-muted); cursor: pointer; width: fit-content; }
.chart__table table { width: 100%; margin-top: 0.5rem; border-collapse: collapse; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.chart__table th, .chart__table td { text-align: left; padding: 0.25rem 0.4rem; border-bottom: 1px solid var(--border); }
.chart__table th { font-weight: 500; color: var(--text-muted); }
.chart__table tbody { display: block; max-height: 14rem; overflow-y: auto; }
.chart__table thead, .chart__table tbody tr { display: table; width: 100%; table-layout: fixed; }

.segmented--links { margin-top: 1.5rem; }
.segmented--links a { display: block; }
.segmented--links a span {
  display: block; padding: 0.35rem 0.9rem; border-radius: 100px;
  font-size: 0.82rem; color: var(--text-secondary); transition: all var(--transition);
}
.segmented--links a:hover span { color: var(--text-primary); }
.segmented--links a.is-active span { background: var(--bg-card); color: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.segmented--small { margin-top: 0; justify-self: start; width: fit-content; }
/* Journal scale switch in the day, week and quarter headers */
.scale-switch { display: grid; width: fit-content; }
/* It and the morning/evening switch take the settings options' shape and tint (see above) */
.segmented.scale-switch, .segmented.day-sections__switch { border-radius: 12px; }
.segmented.scale-switch span, .segmented.day-sections__switch span { border-radius: 9px; }
.segmented.scale-switch span { display: flex; align-items: center; gap: 0.4rem; }
.scale-switch .icon { font-size: 0.95rem; }

/* Year in pixels: diverging green <-> red with a neutral grey midpoint */
svg.pixels { min-width: var(--pixels-w); }
@media (max-width: 600px) {
  /* ~20% smaller cells on phones; labels bumped so they still render at ~10px */
  svg.pixels { min-width: calc(var(--pixels-w) * 0.8); }
  svg.pixels .chart__tick { font-size: 12px; }
}
.pixel { stroke: none; }
.pixel--pos2 { fill: var(--chart-good); }
.pixel--pos1 { fill: color-mix(in srgb, var(--chart-good) 45%, var(--bg-card)); }
.pixel--zero { fill: color-mix(in srgb, var(--chart-mid) 60%, var(--bg-card)); }
.pixel--neg1 { fill: color-mix(in srgb, var(--chart-neg) 45%, var(--bg-card)); }
.pixel--neg2 { fill: var(--chart-neg); }
.pixel--none { fill: none; stroke: var(--chart-grid); stroke-width: 1; }
.pixel--future { fill: var(--bg-input); }
a.chart__barhit:hover .pixel, a.chart__barhit:focus-visible .pixel { stroke: var(--text-primary); stroke-width: 1.5; }
.pixels__nav { display: inline-flex; gap: 0.4rem; }
.pixels__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.78rem; color: var(--text-secondary); }
.pixels__legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.pixel-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 2.5px; }
.pixel-swatch.pixel--pos2 { background: var(--chart-good); }
.pixel-swatch.pixel--pos1 { background: color-mix(in srgb, var(--chart-good) 45%, var(--bg-card)); }
.pixel-swatch.pixel--zero { background: color-mix(in srgb, var(--chart-mid) 60%, var(--bg-card)); }
.pixel-swatch.pixel--neg1 { background: color-mix(in srgb, var(--chart-neg) 45%, var(--bg-card)); }
.pixel-swatch.pixel--neg2 { background: var(--chart-neg); }
.pixel-swatch.pixel--none { box-shadow: inset 0 0 0 1px var(--chart-grid); }
.pixels__count { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }

@media (max-width: 860px) {
  .chart-grid { grid-template-columns: 1fr; }
}

/* ---- Settings ---- */
.settings__legend { display: flex; align-items: center; gap: 0.6rem; }
.settings__legend .icon { font-size: 1.1rem; color: var(--accent); }
.settings__form, .settings__panel { display: flex; flex-direction: column; gap: 1.25rem; }
.settings__form { max-width: 640px; }
.settings__group { min-width: 0; margin: 0; }
.settings__group legend { float: left; width: 100%; padding: 0; }
.settings__options { justify-self: start; width: fit-content; max-width: 100%; }
.settings__hint { font-size: 0.85rem; color: var(--text-muted); }
.settings__switch {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: 0.92rem; color: var(--text-primary); cursor: pointer;
}
.settings__switch input {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: none; margin: 0;
  width: 2.5rem; height: 1.45rem; border-radius: 100px;
  background: var(--border-strong); cursor: pointer;
  transition: background var(--transition);
}
.settings__switch input::before {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: calc(1.45rem - 6px); height: calc(1.45rem - 6px); border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform var(--transition);
}
.settings__switch input:checked { background: var(--accent); }
.settings__switch input:checked::before { transform: translateX(1.05rem); }
.settings__switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) {
  .settings__options--lang { grid-auto-flow: row; grid-template-columns: 1fr 1fr; border-radius: 18px; }
  .settings__options--lang span { text-align: center; }
}

/* ---- Pull-to-refresh indicator (installed PWA only; see app.js) ---- */
.ptr {
  position: fixed;
  top: calc(var(--nav-h) + env(safe-area-inset-top) + 0.75rem);
  left: 50%;
  z-index: 99;
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem; margin-left: -1.125rem;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  color: var(--text-muted);
  opacity: 0;
  pointer-events: none;
}
.ptr svg {
  width: 1.1rem; height: 1.1rem;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ptr.is-armed, .ptr.is-loading { color: var(--accent); border-color: var(--accent); }
.ptr.is-loading svg { animation: ptr-spin 0.8s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* ---- Wheel of life (week page) ---- */
.wheel { gap: 0.4rem; }
.wheel__chart { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.wheel__open {
  display: block; width: 100%; max-width: 480px;
  padding: 0; border: none; background: none; color: inherit;
  border-radius: var(--radius-lg); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wheel__open:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.wheel__open svg { display: block; width: 100%; height: auto; overflow: visible; }
.wheel__bg { fill: var(--bg-input); stroke: none; transition: fill var(--transition); }
.wheel__open:hover .wheel__bg { fill: var(--bg-hover); }
.wheel__fill { fill: var(--chart-pos); fill-opacity: 0.78; }
.wheel__ring { fill: none; stroke: var(--chart-grid); stroke-width: 1; }
.wheel__spoke { stroke: var(--bg-card); stroke-width: 2; }
.wheel__prev {
  fill: none; stroke: var(--text-primary); stroke-width: 1.6;
  stroke-dasharray: 4 3; stroke-linecap: round;
}
.wheel__hub { fill: var(--bg-card); stroke: var(--chart-grid); stroke-width: 1; }
.wheel__center { font-family: var(--font-body); font-size: 24px; font-weight: 500; fill: var(--text-primary); }
.wheel__label { font-family: var(--font-body); font-size: 11.5px; fill: var(--text-secondary); }
.wheel__score { font-family: var(--font-mono); font-weight: 600; fill: var(--text-primary); }
.wheel__caption {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1rem;
  margin: 0; font-size: 0.85rem; color: var(--text-secondary);
}
.wheel__hint { color: var(--text-muted); }
.wheel__meter {
  display: grid; grid-template-columns: auto minmax(3rem, 9.25rem) 1.5rem; align-items: center; gap: 0.75rem;
  max-width: 100%; padding: 0.35rem 0;
  border: none; background: none; color: inherit; font: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.wheel__meter:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }
.wheel__meter-label {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
}
.wheel__meter-value {
  font-family: var(--font-mono); font-size: 0.95rem; font-weight: 600; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.wheel__meter-bar {
  position: relative; height: 6px; border-radius: 3px;
  background: var(--bg-input); box-shadow: inset 0 0 0 1px var(--border);
  transition: background var(--transition);
}
.wheel__meter:hover .wheel__meter-bar { background: var(--bg-hover); }
.wheel__meter-fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 3px;
  background: var(--chart-pos); opacity: 0.78;
}
/* Last week's score: a short dashed tick, like the dashed outline on the wheel. */
.wheel__meter-prev {
  position: absolute; top: -4px; bottom: -4px; width: 1.6px; margin-left: -0.8px;
  background: repeating-linear-gradient(to bottom, var(--text-primary) 0 3px, transparent 3px 5px);
}
.wheel__legend { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-muted); }
.wheel__legend svg { width: 1.5rem; height: 0.4rem; overflow: visible; }

.wheel__dialog {
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto; /* the global reset zeroes the UA margin that centres a modal */
  padding: 0; /* clicks on the <dialog> itself are backdrop clicks (app.js) */
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 18px 50px rgba(0,0,0,0.25);
}
.wheel__dialog::backdrop { background: rgba(10,14,20,0.45); }
.wheel__dialog-body { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.25rem; }
.wheel__dialog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.wheel__hit { fill: transparent; }
.wheel__label { cursor: pointer; }
.wheel__row .scale__opt { --tone: var(--chart-pos); font-size: 0.8rem; }
.wheel__row .scale__caption,
.wheel__row.scale:has([data-tone="pos"] input:checked) .scale__caption {
  font-family: var(--font-mono); font-weight: 600; color: var(--chart-pos);
}

/* A priority's note: a long text edited in a modal */
.note-dialog {
  width: min(40rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto; /* the global reset zeroes the UA margin that centres a modal */
  padding: 0; /* clicks on the <dialog> itself are backdrop clicks (app.js) */
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 18px 50px rgba(0,0,0,0.25);
}
.note-dialog::backdrop { background: rgba(10,14,20,0.45); }
.note-dialog__body { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.25rem; }
.note-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.note-dialog__title {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; line-height: 1.3;
  word-break: break-word;
}
/* A list item's dialog folds a long item to three lines (app.js toggles .is-expanded). */
.note-dialog__subject { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.list-note-dialog:not(.is-expanded) .note-dialog__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden;
}
.note-dialog__fold { padding: 0; font-size: 0.85rem; }
.note-dialog__fold[hidden] { display: none; }
.note-dialog__close {
  flex-shrink: 0; width: 2rem; height: 2rem; margin: -0.35rem -0.5rem 0 0;
  border: none; border-radius: 999px; background: none;
  font-size: 1.5rem; line-height: 1; color: var(--text-muted); cursor: pointer;
}
.note-dialog__close:hover { background: var(--bg-hover); color: var(--text-primary); }
.note-dialog__text {
  min-height: 14rem; max-height: calc(100dvh - 14rem);
  resize: vertical; line-height: 1.6; field-sizing: fixed;
}
.note-dialog__foot { display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; }
/* Quiet and apart from Save, so it isn't hit instead of it; filled while asking to confirm. */
.note-dialog__delete {
  margin-right: auto; padding: 0.45rem 0.7rem;
  border: none; border-radius: var(--radius); background: none;
  font: inherit; font-size: 0.9rem; color: var(--danger); cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.note-dialog__delete:hover { background: color-mix(in srgb, var(--danger) 9%, transparent); }
.note-dialog__delete[data-armed] { background: var(--danger); color: #fff; }

@media (max-width: 600px) {
  .note-dialog__body { padding: 1rem; }
  .note-dialog__text { min-height: 12rem; }
}

/* Wizard: one area per step */
.wizard__pos { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.wizard__dots { display: flex; gap: 0.3rem; }
.wizard__dot {
  flex: 1; height: 0.5rem; padding: 0; border: none; border-radius: 999px;
  background: var(--bg-hover); cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition);
}
.wizard__dot.is-done { background: color-mix(in srgb, var(--chart-pos) 55%, var(--bg-card)); }
.wizard__dot.is-current { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3.5px var(--chart-pos); }
.wizard__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wizard__step { display: flex; flex-direction: column; gap: 1rem; min-height: 17rem; }
.wizard__step[hidden] { display: none; }
.wizard__title {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; line-height: 1.2;
  outline: none;
}
.wizard__questions {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 0.85rem 1rem; border-radius: var(--radius-lg);
  background: var(--accent-subtle);
}
.wizard__questions ul { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding-left: 1.1rem; }
.wizard__questions li { font-size: 0.95rem; line-height: 1.4; color: var(--text-secondary); }
.wizard__was { margin: -0.5rem 0 0; font-size: 0.8rem; color: var(--text-muted); }
.wheel__dialog-foot { display: flex; justify-content: space-between; gap: 0.75rem; }
.wheel__dialog-foot [data-wizard-prev]:disabled { visibility: hidden; }
.wheel__dialog-foot [hidden] { display: none; } /* .btn sets display */

@media (max-width: 600px) {
  .wheel__label { font-size: 13px; }
  .wheel__dialog-body { padding: 1rem; }
  .wizard__step { min-height: 19rem; }
  .wizard__title { font-size: 1.3rem; }
  .wheel__row .scale__opts { gap: 2px; padding: 2px; }
  .wheel__row .scale__opt { height: 2.5rem; font-size: 0.75rem; }
}

/* ---- Home ---- */
.pointer {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0;
  color: inherit;
  border-bottom: 1px solid var(--border);
}
.pointers__rest { display: flex; flex-direction: column; }
.pointers__rest li:last-child .pointer { border-bottom: none; }
.pointer__body { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pointer__title { font-weight: 500; }
.pointer__title .icon { vertical-align: -0.12em; color: var(--accent); }
.pointer__hint { font-size: 0.8rem; color: var(--text-muted); }
.pointer__hints { display: flex; flex-direction: column; gap: 0.1rem; }
.pointer__hints--list .pointer__hint::before { content: "·"; display: inline-block; width: 0.8em; }
.pointer__go { color: var(--accent); font-size: 1.1rem; transition: transform var(--transition); }
.pointer:hover .pointer__go { transform: translateX(3px); }
.pointer--primary {
  padding: 1rem 1.2rem;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--accent-subtle);
}
.pointer--primary .pointer__title { font-family: var(--font-display); font-size: 1.45rem; font-weight: 400; }
.pointer--primary .pointer__go { font-size: 1.4rem; }
.pointer--primary:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }

.backlog-task { align-items: flex-start; }
.backlog-task .task__check { margin-top: 0.1rem; }
.backlog-task__main { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.backlog-task__meta { font-size: 0.78rem; color: var(--text-muted); }
.backlog-task__meta a { color: inherit; border-bottom: 1px solid var(--border-strong); }
.backlog-task--stuck .backlog-task__meta { color: var(--danger); }
.backlog-task__today { flex-shrink: 0; padding: 0.3rem 0.7rem; font-size: 0.8rem; }

#home-week .card__title a { color: inherit; }
/* The week's days in a side card (overview, week page): smaller tiles without scale bars. */
.week-strip--compact { gap: 0.3rem; }
.week-strip--compact .day-tile { padding: 0.5rem 0.1rem; gap: 0.25rem; }
.week-strip--compact .day-tile__num { font-size: 1.15rem; }
.week-strip--compact .day-tile__scales { display: none; }
/* On one column the days card goes first, above the review, instead of after it. */
@media (max-width: 860px) {
  .day-grid--week .day-grid__side { display: contents; }
  .day-grid--week .week-days { order: -1; }
}
/* The overview's week goals, folded behind a line of totals. */
.home-week__toggle { display: flex; align-items: center; gap: 0.75rem; list-style: none; cursor: pointer; font-size: 0.92rem; }
.home-week__toggle::-webkit-details-marker { display: none; }
.home-week__status { color: var(--text-secondary); }
.home-week__status--done { color: var(--ok); }
.home-week__bar { min-width: 2.5rem; }
.home-week__toggle .goal__count { margin-left: 0; }
.home-week__chevron { margin-top: 0; }
.home-week__goals[open] .home-week__chevron { transform: rotate(90deg); }
.home-week__toggle:hover .home-week__chevron { color: var(--text-primary); }
.home-week__goals[open] .home-goals { margin-top: 0.5rem; border-top: 1px solid var(--border); }
.home-goals { display: flex; flex-direction: column; }
.home-goal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.home-goal:last-child { border-bottom: none; }
.home-goal__text { flex: 1; min-width: 0; word-break: break-word; }
.home-goal.goal--done .home-goal__text { color: var(--text-muted); }

.memories { display: flex; flex-direction: column; }
.memory {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.75rem 0;
  color: inherit;
  border-bottom: 1px solid var(--border);
}
.memories li:first-child .memory { padding-top: 0; }
.memories li:last-child .memory { border-bottom: none; padding-bottom: 0; }
.memory__when {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.memory__photo {
  width: 100%;
  height: auto;
  max-height: 14rem;
  object-fit: cover;
  border-radius: var(--radius);
}
.memory__prompt { font-size: 0.78rem; color: var(--text-muted); }
.memory__text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.92rem;
  word-break: break-word;
}
.memory:hover .memory__text { color: var(--accent-warm); }

/* ---- Supplements (day cards, list and edit pages) ---- */
.supps-card .card__num .icon, .supps-card--empty .card__num .icon { display: block; font-size: 1rem; }
.supps-card__manage { display: grid; place-items: center; color: var(--text-muted); align-self: center; font-size: 1.05rem; }
.supps-card__manage:hover { color: var(--accent); }
.supps__group + .supps__group { margin-top: -0.3rem; }
.supps__slot {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.15rem;
}
.supps { display: flex; flex-direction: column; }
.supp { padding: 0.45rem 0; border-bottom: 1px solid var(--border); }
.supp:last-child { border-bottom: none; }
.supp__row { display: flex; align-items: center; gap: 0.75rem; }
.supp--taken .task__check { background: var(--accent); border-color: var(--accent); color: #fff; }
.task__check:disabled { cursor: default; opacity: 0.5; }
.supp__name { flex: 1; min-width: 0; font-weight: 400; word-break: break-word; }
.supp--taken .supp__name { color: var(--text-muted); text-decoration: line-through; }
.supp__dose { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
/* A small chip ("2×"): borderless until hovered or focused. The font stays 16px so iOS
   doesn't zoom in on focus; the box around it is what's made compact. */
.supp__count { display: inline-flex; align-items: center; gap: 2px; color: var(--text-muted); font-size: 0.85rem; }
.supp__count .input {
  width: 2.5rem; height: 1.7rem; padding: 0 2px; text-align: center;
  font-size: 1rem; font-variant-numeric: tabular-nums; line-height: 1;
  background: var(--bg-input); border: 1px solid transparent; border-radius: 7px;
  -moz-appearance: textfield;
}
.supp__count .input:hover:not(:disabled) { border-color: var(--border-strong); }
.supp__count .input:focus { box-shadow: 0 0 0 2px var(--accent-subtle); }
.supp__count .input::-webkit-inner-spin-button, .supp__count .input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.supp--taken .supp__count .input { color: var(--text-secondary); }
.supp__count .input:disabled { opacity: 0.6; }
.supp__count .input:invalid, .supp__count .input[aria-invalid="true"] {
  color: var(--danger); border-color: var(--danger); box-shadow: none;
}
.supp__error { margin: 0.3rem 0 0 calc(1.4rem + 0.75rem); }
/* Comments on supplements and habits (day and week pages): saved text reads as-is and wraps,
   clicking it or the chat icon opens the field, leaving the field shows the text again;
   an empty comment shows nothing (see app.js). */
.supp__note-toggle {
  display: grid; place-items: center; background: none; border: none; cursor: pointer;
  padding: 0.2rem; color: var(--text-muted); font-size: 1.05rem; opacity: 0.6;
}
.supp__note-toggle:hover,
:is(.supp, .habit, .habit-review):has(.supp__comment-text:not(:empty)) .supp__note-toggle { opacity: 1; color: var(--accent); }
.supp__note-toggle:focus-visible { outline: 2px solid var(--accent); border-radius: 6px; }
.supp__comment { display: none; margin: 0.4rem 0 0.1rem calc(1.4rem + 0.75rem); }
.supp__comment:has(.supp__comment-text:not(:empty)), .supp__comment.is-editing { display: block; }
.supp__comment.is-editing .supp__comment-text, .supp__comment:not(.is-editing) .supp__comment-input { display: none; }
.supp__comment-input { display: block; resize: none; overflow: hidden; line-height: 1.5; field-sizing: content; }
/* What the user wrote reads as a quote (a rule at its side), apart from the app's tinted hints. */
.supp__comment-text {
  margin: 0.4rem 0 0 calc(1.4rem + 0.75rem); padding: 0.1rem 0 0.1rem 0.75rem;
  border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  font-size: 0.88rem; line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere;
}
.supp__comment .supp__comment-text {
  margin: 0; border-radius: 0 6px 6px 0;
  cursor: text; transition: background 0.15s, border-color 0.15s;
}
.supp__comment .supp__comment-text:hover { background: var(--accent-subtle); border-left-color: var(--accent); }
.supp__comment .supp__comment-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.supp-kind { display: inline-grid; place-items: center; flex-shrink: 0; color: var(--text-muted); font-size: 0.9rem; opacity: 0.7; }
.supp-kind--once { color: var(--accent); opacity: 1; }
.supp__row .supp-kind { margin-right: -0.4rem; }
.supp-list__name .supp-kind { display: inline-block; margin-right: 0.4rem; vertical-align: -0.1em; }
.supp__remove {
  display: grid; place-items: center; background: none; border: none; cursor: pointer;
  padding: 0.2rem; color: var(--text-muted); font-size: 1.05rem; opacity: 0.6;
}
.supp__remove:hover { opacity: 1; color: var(--danger); }
.supps-card__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.supps-once { width: 100%; }
.supps-once__form { display: flex; flex-direction: column; gap: 0.6rem; }
.supps-once__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.supps-once__name { flex: 2 1 9rem; }
.supps-once__dose { flex: 1 1 5.5rem; }
.supps-once__count { flex: 0 0 4.5rem; text-align: center; font-family: var(--font-mono); }
.supps-once__slots { width: fit-content; }
@media (max-width: 600px) {
  .supps-once__name { flex-basis: 100%; }  /* dose, count and + share the second line */
}
.supps-bare { padding: 0 0.25rem; }

.supp-list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.supp-list li { border-bottom: 1px solid var(--border); }
.supp-list li:last-child { border-bottom: none; }
.supp-list__item { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 0; color: inherit; text-decoration: none; }
.supp-list__name { color: var(--text-primary); }
.supp-list__item:hover .supp-list__name { color: var(--accent); }
.supp-list__meta { font-size: 0.8rem; color: var(--text-muted); }

.supp-form { display: flex; flex-direction: column; gap: 1rem; }
.supp-form__row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.supp-form__field { min-width: 0; margin: 0; padding: 0; border: none; }
.supp-form__field--name { flex: 2 1 10rem; }
.supp-form__field--dose { flex: 1 1 7rem; }
.supp-form__field--count { flex: 0 0 5rem; }
.supp-form__field--count .input { text-align: center; font-family: var(--font-mono); }
.supp-form__slots { display: flex; flex-wrap: wrap; border-radius: 18px; }
.supp-form__daily { padding-bottom: 0.7rem; }
.supp-form:not(:has(input[name="daily"]:checked)) .supp-form__end { display: none; }
.supp-form__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.supp-stat { display: flex; align-items: baseline; gap: 0.75rem; margin: 0; }
.supp-stat__num { font-family: var(--font-display); font-size: 2rem; color: var(--text-primary); }
.supp-stat__pct { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent); }
.supp-actions { display: flex; flex-direction: column; gap: 0.6rem; }
.supp-actions .btn { width: 100%; gap: 0.5rem; }
.supp-actions__delete:hover { color: var(--danger); border-color: var(--danger); }

/* Findings page actions (partials/findings_list.html). */
.findings--ledger .finding__head { align-items: center; }
.findings--ledger .finding__title { flex: 1; }
.finding__note { display: flex; gap: 0.45rem; margin-top: 0.5rem; font-size: 0.88rem; color: var(--text-secondary); white-space: pre-line; }
.finding__note .icon { flex-shrink: 0; width: 1rem; height: 1rem; margin-top: 0.15rem; color: var(--text-muted); }
.finding-form__field { display: flex; flex-direction: column; gap: 0.35rem; }
.finding-form__note { min-height: 8rem; }

/* Weekly recap card on the week page (partials/week_recap.html). */
.recap .card__head .advice__refresh { margin-left: auto; }
.recap__refresh--busy { animation: advice-spin 1.2s linear infinite; }
.recap__quote { margin: 0.35rem 0 0; padding: 0.1rem 0 0.1rem 0.75rem; border-left: 2px solid var(--accent); font-size: 0.92rem; font-style: italic; color: var(--text-secondary); }
.recap__hint { margin-top: 0.35rem; font-size: 0.75rem; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .recap__refresh--busy { animation: none; } }
.recap__wheel { margin-top: 0.35rem; font-size: 0.88rem; line-height: 1.7; color: var(--text-secondary); }
.recap__score { white-space: nowrap; }
.recap__score b { font-family: var(--font-mono); font-weight: 500; color: var(--text-primary); }
.recap__score .avg__delta { font-size: 0.75rem; }
.recap__wheel-missing { margin-top: 0.2rem; font-size: 0.8rem; color: var(--text-muted); }
.recap__toggle { display: flex; align-items: flex-start; gap: 0.5rem; list-style: none; cursor: pointer; }
.recap__toggle::-webkit-details-marker { display: none; }
.recap__teaser { flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.recap__body[open] .recap__teaser { display: block; }
.recap__chevron { margin-top: 0.8rem; color: var(--text-muted); transition: transform 0.15s ease; }
.recap__body[open] .recap__chevron { transform: rotate(90deg); }
.recap__toggle:hover .recap__chevron { color: var(--text-primary); }
@media (prefers-reduced-motion: reduce) { .recap__chevron { transition: none; } }

/* ---- Profile ---- */
/* A contents list of the parts on the left (sticky), one part at a time on the right. On a
   phone the list folds behind a button naming the open part (with the count beside it), and
   each part ends with a link to the next one. */
.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.profile-layout__main { min-width: 0; }
.profile-part[hidden] { display: none; }
.profile-toc { position: sticky; top: calc(var(--nav-h) + 1.25rem); gap: 0.6rem; padding: 0.9rem; }
.profile-toc__list { position: relative; display: flex; flex-direction: column; gap: 2px; }
.profile-toc__item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.7rem; border-radius: 10px;
  font-size: 0.9rem; color: var(--text-secondary); text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.profile-toc__item:hover { background: var(--bg-hover); color: var(--text-primary); }
.profile-toc__item[aria-selected="true"] { background: var(--accent-subtle); color: var(--accent); font-weight: 500; }
.profile-toc__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.profile-toc__dot { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1.5px solid var(--text-muted); }
.profile-toc__dot.is-filled { background: var(--ok); border-color: var(--ok); }
.profile-toc__item--ai .profile-toc__dot { border-radius: 2px; border-color: var(--accent); }
.profile-toc__sep { height: 1px; background: var(--border); margin: 0.4rem 0.7rem; }
.profile-toc__count { margin: 0; padding: 0.2rem 0.7rem 0; font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.profile-toc__toggle {
  display: none; align-items: center; gap: 0.45rem; min-width: 0; min-height: 2.75rem;
  padding: 0.5rem 0.7rem; border: 0; border-radius: 10px; background: none; cursor: pointer;
  font: inherit; font-size: 0.95rem; font-weight: 500; color: var(--text-primary); text-align: left;
}
.profile-toc__current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-toc__toggle .icon { color: var(--text-muted); transform: rotate(90deg); transition: transform var(--transition); }
.profile-toc__toggle[aria-expanded="true"] .icon { transform: rotate(-90deg); }
.profile-toc__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.profile-pager { display: none; gap: 1rem; margin-top: 0.75rem; }
.profile-pager a {
  display: flex; flex-direction: column; gap: 0.15rem; flex: 0 1 50%; min-width: 0; padding: 0.5rem 0.4rem;
  font-size: 0.9rem; line-height: 1.35; color: var(--accent); text-decoration: none;
}
.profile-pager__dir { display: flex; align-items: center; gap: 0.2rem; font-size: 0.75rem; color: var(--text-muted); }
.profile-pager .profile-pager__next { margin-left: auto; align-items: flex-end; text-align: right; }
.profile-text { min-height: 16rem; }
.profile-text--short { min-height: 3.5rem; }
.card__head .save-status { align-self: center; }
.person-avatar--me { --tint: var(--accent); }
.person-avatar--me .icon { width: 1.4rem; height: 1.4rem; }
.profile-days { display: flex; flex-wrap: wrap; width: fit-content; border-radius: 18px; }
.profile-days span { min-width: 2.6rem; text-align: center; }
.profile-preview__text {
  margin: 0; max-height: 32rem; overflow: auto;
  font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-secondary);
}
@media (max-width: 860px) {
  .profile-layout { grid-template-columns: minmax(0, 1fr); }
  .profile-toc {
    position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: 0 0.75rem; padding: 0.4rem 1rem 0.4rem 0.4rem; scroll-margin-top: calc(var(--nav-h) + 1rem);
  }
  .profile-toc__toggle { display: flex; }
  .profile-toc__count { grid-row: 1; grid-column: 2; padding: 0; }
  .profile-toc__list { grid-row: 2; grid-column: 1 / -1; padding: 0.3rem 0 0.4rem; }
  .profile-toc__toggle[aria-expanded="false"] ~ .profile-toc__list { display: none; }
  .profile-pager { display: flex; }
  .profile-text { min-height: 12rem; }
}

/* ---- Me (/me): grouped rows of links, iOS-settings style ---- */
.me { display: flex; flex-direction: column; gap: 1.25rem; max-width: 640px; }
.me-group { gap: 0; padding: 0.4rem 0.6rem; }
.me-group__title {
  padding: 0.7rem 0.75rem 0.3rem; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-muted);
}
.me-group form { margin: 0; }
.me-row {
  display: flex; align-items: center; gap: 0.9rem; width: 100%;
  padding: 0.75rem; border: 0; border-radius: var(--radius); background: none;
  font: inherit; text-align: left; color: inherit; text-decoration: none; cursor: pointer;
  transition: background var(--transition);
}
.me-row + .me-row, .me-row + form .me-row { box-shadow: 0 -1px 0 var(--border); }
.me-row:hover, .me-row:focus-visible { background: var(--bg-hover); box-shadow: none; outline: none; }
.me-row:hover + .me-row, .me-row:focus-visible + .me-row { box-shadow: none; }
.me-row__icon {
  flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
  border-radius: 10px; background: var(--accent-subtle); color: var(--accent); font-size: 1.1rem;
}
.me-row__body { display: flex; flex: 1; flex-direction: column; gap: 0.15rem; min-width: 0; }
.me-row__title { color: var(--text-primary); }
.me-row__meta {
  display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--text-muted);
}
.me-row__meta .icon { font-size: 0.9rem; }
.me-row__go { flex: none; color: var(--text-muted); font-size: 1rem; display: flex; }
.me-row--logout .me-row__icon { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.me-row--logout:hover .me-row__title, .me-row--logout:focus-visible .me-row__title { color: var(--danger); }

/* ---- People ---- */
.day-grid--people .day-grid__side { position: static; }
/* The side column runs the list's full height, so the add/edit card can stick in view. */
.day-grid--people { align-items: stretch; }
.people-hero__add { margin-top: 1.25rem; }
.people-toolbar { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.4rem; }
.people-filter, .person-form__options { display: flex; flex-wrap: wrap; width: fit-content; border-radius: 18px; }
.people-filter__count { font-family: var(--font-mono); font-size: 0.68rem; opacity: 0.6; margin-left: 0.15rem; }
/* --row-bleed: the card's side padding, which a highlighted row spreads into. */
.people-list { --row-bleed: 1.6rem; display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.people-list li { position: relative; display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--border); }
.people-list li[hidden] { display: none; }
.people-list li:last-child { border-bottom: none; }
/* The person being edited: tinted out to the card's edges, with an accent bar on the left. */
.people-list li.is-editing {
  background: var(--accent-subtle);
  box-shadow: calc(-1 * var(--row-bleed)) 0 0 var(--accent-subtle), var(--row-bleed) 0 0 var(--accent-subtle);
}
.people-list li.is-editing::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--row-bleed)); width: 3px; background: var(--accent);
}
.people-list li.is-editing .people-list__name { color: var(--accent); }
.people-list__item { display: flex; flex: 1; align-items: center; gap: 0.75rem; min-width: 0; padding: 0.6rem 0; color: inherit; text-decoration: none; }
.people-list__edit {
  display: inline-flex; flex: none; padding: 0.45rem; border-radius: var(--radius);
  color: var(--text-muted); font-size: 1rem; transition: color var(--transition), background var(--transition);
}
.people-list__edit:hover, .people-list__edit:focus-visible, .is-editing .people-list__edit { color: var(--accent); background: var(--accent-subtle); }

/* The add/edit card: hidden until opened, then kept in view next to the list. */
.person-panel {
  position: sticky; top: calc(var(--nav-h) + 1.25rem);
  max-height: calc(100vh - var(--nav-h) - 2.5rem); overflow-y: auto;
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}
.person-panel[hidden] { display: none; }
.person-panel__close {
  display: inline-flex; margin-left: auto; align-self: center; padding: 0.35rem; border-radius: var(--radius);
  color: var(--text-muted); font-size: 1.05rem;
}
.person-panel__close:hover { color: var(--text-primary); background: var(--accent-subtle); }
@media (max-width: 860px) {
  .person-panel { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 600px) {
  .people-list { --row-bleed: 1.25rem; }
}
.people-list__body { display: flex; flex: 1; flex-direction: column; gap: 0.1rem; min-width: 0; }
.people-list__name { color: var(--text-primary); overflow-wrap: anywhere; }
.people-list__item:hover .people-list__name { color: var(--accent); }
.people-list__meta { font-size: 0.8rem; color: var(--text-muted); }
.people-list__item .pill { flex: none; }

/* Initials, tinted by who the person is to me. */
.person-avatar {
  --tint: var(--text-muted);
  flex: none; display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; line-height: 1;
  color: var(--tint); background: color-mix(in srgb, var(--tint) 14%, transparent);
}
.person-avatar--family { --tint: var(--danger); }
.person-avatar--friend { --tint: var(--accent); }
.person-avatar--colleague { --tint: var(--ok); }
.person-avatar--small { width: 2rem; height: 2rem; font-size: 0.7rem; }
.person-avatar--large { width: 3.4rem; height: 3.4rem; font-family: var(--font-body); font-size: 1.15rem; }
.person-hero { display: flex; align-items: center; gap: 0.9rem; }
.person-facts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 0; }
.person-facts__item {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.25rem 0.75rem; border-radius: 100px;
  background: var(--accent-subtle); color: var(--text-secondary); font-size: 0.82rem;
}
.person-note { white-space: pre-line; }
/* Photos whose caption mentions the person: the latest three in the hero, all in a tab. */
.photo-thumb {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius); background: var(--bg-input); transition: opacity var(--transition);
}
a:hover > .photo-thumb { opacity: 0.85; }
.person-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 7rem)); gap: 0.5rem; margin-top: 1.1rem; }
.person-strip__more { grid-column: 1 / -1; font-size: 0.85rem; color: var(--accent); text-decoration: none; }
.person-strip__more:hover { text-decoration: underline; }
.person-photos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1.1rem 0.9rem;
  list-style: none; margin: 0; padding: 0;
}
.person-photo { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.person-photo .note__date { margin-top: 0.2rem; }
.person-photo__caption { font-size: 0.88rem; font-style: italic; overflow-wrap: anywhere; }
.note__thumb { flex-shrink: 0; width: 3rem; margin-top: 0.15rem; }
.note__thumb .photo-thumb { border-radius: 6px; }

/* Admin page (admin.html): the database facts and the audit of the AI requests. */
.admin { display: flex; flex-direction: column; gap: 1.25rem; }
.admin__tabs { align-self: flex-start; }
.admin__tabs .advice__tab { text-decoration: none; }
.admin__facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1.25rem; margin: 0; font-size: 0.92rem; }
.admin__facts dt { color: var(--text-muted); }
.admin__facts dd { margin: 0; min-width: 0; }
.admin__mono { font-family: var(--font-mono); font-size: 0.85em; }
.admin__path { overflow-wrap: anywhere; }
.admin__table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.admin__table th, .admin__table td { padding: 0.45rem 0.5rem; text-align: left; border-bottom: 1px solid var(--border); }
.admin__table thead th { font-weight: 500; font-size: 0.78rem; color: var(--text-muted); }
.admin__table tfoot th, .admin__table tfoot td { border-bottom: 0; font-weight: 600; }
.admin__table th:first-child, .admin__table td:first-child { padding-left: 0; }
.admin__table th:last-child, .admin__table td:last-child { padding-right: 0; }
.admin__num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin__calls-head { align-items: center; flex-wrap: wrap; }
.admin__filter .input { width: auto; padding-block: 0.35rem; }
.admin__pager { display: flex; justify-content: space-between; }

.ai-calls { display: flex; flex-direction: column; }
.ai-call__row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 10rem) 4.5rem 4.5rem 4.5rem 4rem;
  gap: 0.75rem; align-items: baseline; padding: 0.55rem 0; font-size: 0.88rem;
}
.ai-calls__head { font-size: 0.75rem; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.ai-call { border-bottom: 1px solid var(--border); }
.ai-call > summary { list-style: none; cursor: pointer; }
.ai-call > summary::-webkit-details-marker { display: none; }
.ai-call > summary:hover { background: var(--bg-hover); }
.ai-call[open] > summary { color: var(--accent); }
.ai-call__time { color: var(--text-secondary); white-space: nowrap; }
.ai-call__subject { color: var(--text-muted); }
.ai-call__model { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-call__badge { font-size: 0.72rem; color: var(--danger); }
.ai-call--error > summary .ai-call__time { color: var(--danger); }
.ai-call__body { display: flex; flex-direction: column; gap: 1rem; padding: 0.5rem 0 1.25rem; }
.ai-call__meta { font-size: 0.85rem; }
.ai-call__error { color: var(--danger); overflow-wrap: anywhere; }
.ai-call__section > summary { cursor: pointer; }
.ai-call__section .advice__label { margin-bottom: 0.4rem; }
.ai-call__text {
  margin: 0; padding: 0.8rem 1rem; max-height: 28rem; overflow: auto;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.ai-call__raw { margin-top: 0.6rem; font-size: 0.8rem; }
.ai-call__raw > summary { cursor: pointer; color: var(--text-muted); margin-bottom: 0.4rem; }
.ai-tree { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.ai-tree dt { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); margin-top: 0.55rem; }
.ai-tree dt:first-child { margin-top: 0; }
.ai-tree dd { margin: 0.1rem 0 0; }
.ai-tree .ai-tree { padding-left: 0.8rem; border-left: 2px solid var(--border); }
.ai-tree__list { margin: 0.15rem 0 0; padding-left: 1.3rem; }
.ai-tree__list > li + li { margin-top: 0.4rem; }
.ai-tree__value { white-space: pre-wrap; }
.ai-tree__empty { color: var(--text-muted); }

@media (max-width: 600px) {
  /* A call takes two lines: when and what, then the model and the numbers. */
  .ai-calls__head { display: none; }
  .ai-call__row { grid-template-columns: 1fr repeat(4, auto); gap: 0.2rem 0.75rem; }
  .ai-call__time { grid-column: 1 / -1; font-size: 0.78rem; }
  .ai-call__component { grid-column: 1 / -1; }
  .admin__table { font-size: 0.82rem; }
}
.admin__scroll { overflow-x: auto; }
.admin__toggle { list-style: none; cursor: pointer; }
.admin__collapse:not([open]) { gap: 0; }  /* the hidden table still takes the card's gap */
.admin__toggle::-webkit-details-marker { display: none; }
.admin__chevron { margin: 0 0 0 auto; align-self: center; }
.admin__collapse[open] .admin__chevron { transform: rotate(90deg); }
.admin__toggle:hover .admin__chevron { color: var(--text-primary); }

/* The admin dashboards: a total tile beside daily columns, stacked by AI component (the
   AI tab's spend) or by table (the database's size).
   The component colours are the dataviz reference hues, validated against the cards;
   ai_calls.COST_STACK orders the stack so the pairs colour-blind eyes confuse rarely touch. */
:root {
  --ai-advice: #2a78d6;
  --ai-deep: #eb6834;
  --ai-week_recap: #eda100;
  --ai-quarter_recap: #1baf7a;
  --ai-dossier: #e87ba4;
  --ai-habit: #6250d6;
}
:root[data-theme="dark"] {
  --ai-advice: #3987e5;
  --ai-deep: #d95926;
  --ai-week_recap: #c98500;
  --ai-quarter_recap: #199e70;
  --ai-dossier: #d55181;
  --ai-habit: #9085e9;
}
/* The database tab's tables, biggest at the bottom: the reference palette's eight hues in
   their validated order (adjacent pairs stay apart for colour-blind eyes), then a neutral
   "other" for the rest (db_sizes.CHART_TABLES). */
:root {
  --db-1: #2a78d6; --db-2: #eb6834; --db-3: #1baf7a; --db-4: #eda100;
  --db-5: #e87ba4; --db-6: #008300; --db-7: #6250d6; --db-8: #e34948;
  --db-other: #a8a7a1;
}
:root[data-theme="dark"] {
  --db-1: #3987e5; --db-2: #d95926; --db-3: #199e70; --db-4: #c98500;
  --db-5: #d55181; --db-6: #008300; --db-7: #9085e9; --db-8: #e66767;
  --db-other: #6b6a65;
}
.admin-dash { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.25rem; margin-bottom: 1.25rem; }
.admin-dash__tile {
  display: flex; flex-direction: column; justify-content: center; gap: 0.15rem;
  padding: 0.9rem 1rem; border-radius: var(--radius-lg);
  background: var(--bg); border: 1px solid var(--border);
}
.admin-dash__value { font-size: 2rem; font-weight: 500; line-height: 1.15; color: var(--text-primary); margin-bottom: 0.2rem; }
.admin-dash__chart { gap: 0.35rem; }
.admin-dash__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; flex-wrap: wrap; }
.admin-dash__legend { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; margin: 0; padding: 0; list-style: none; font-size: 0.75rem; color: var(--text-secondary); }
.admin-dash__legend li { display: flex; align-items: center; gap: 0.35rem; }
.admin-dash__swatch { width: 10px; height: 10px; border-radius: 3px; }
.admin-dash__hit { fill: transparent; }
/* Keeps a ten-line tooltip, set a little tighter, inside the plot when a narrow screen
   shrinks the chart. */
.admin-dash__plot--tall { min-height: 11rem; }
.admin-dash__plot--tall .chart__tip { font-size: 0.75rem; line-height: 1.3; padding: 0.4rem 0.6rem; }
.chart__barhit:hover .admin-dash__hit, .chart__barhit:focus-visible .admin-dash__hit { fill: var(--bg-hover); }
.chart__tip--lines { white-space: pre; line-height: 1.5; }
.chart__tip--lines::first-line { color: var(--text-primary); font-weight: 500; }
@media (max-width: 600px) {
  .admin-dash { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .admin-dash__tile { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; column-gap: 0.75rem; padding: 0.7rem 0.9rem; }
  .admin-dash__tile .chart__title { flex-basis: 100%; }
  .admin-dash__value { font-size: 1.6rem; margin: 0; }
}
.admin__alert {
  margin: 0; padding: 0.8rem 1rem; border-radius: var(--radius-lg); font-size: 0.9rem;
  color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}
.admin__pill--bad { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.admin__pill--off { background: var(--bg-input); color: var(--text-muted); }
/* Six tabs don't fit a phone: they scroll sideways. */
.admin__tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.admin__tabs::-webkit-scrollbar { display: none; }
.btn-danger { background: var(--danger); color: #fff; border: 1px solid var(--danger); }
.btn-danger:hover { filter: brightness(1.08); }
[data-theme="dark"] .btn-danger { color: #0f141b; }
/* Admin: the users tab (partials/admin_users.html, admin_user.html) */
.admin-invite { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; }
.admin-invite__email { flex: 1 1 16rem; }
.admin-invite__check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; padding-bottom: 0.7rem; cursor: pointer; }
.admin-user > summary { flex-wrap: wrap; row-gap: 0.4rem; }
/* A long email takes the row; the badges wrap under it rather than break it mid-word. */
.admin-user__email { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.admin-user__body { display: flex; flex-direction: column; gap: 1.1rem; }
.admin-user__badges { display: flex; flex-wrap: wrap; gap: 0.3rem; align-self: center; }
.admin-user__link { display: flex; flex-direction: column; gap: 0.4rem; }
.admin-user__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.admin-user__actions .btn { padding: 0.5rem 1.1rem; }
.admin-user__ai { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.admin-user__budget { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.92rem; }
.admin-user__budget .input { width: 8rem; text-align: right; }
.admin-user__danger > summary { width: fit-content; cursor: pointer; font-size: 0.85rem; color: var(--danger); }
.admin-user__delete { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; margin-top: 0.7rem; max-width: 30rem; }
/* Admin: the scheduler tab (partials/admin_jobs.html, admin_job.html) */
.admin-jobs__switch { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.admin-jobs { display: flex; flex-direction: column; }
.admin-job { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.admin-job:first-child { padding-top: 0; }
.admin-job:last-child { padding-bottom: 0; border-bottom: 0; }
.admin-job__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; }
.admin-job__email { font-weight: 500; overflow-wrap: anywhere; }
.admin-job__busy { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--accent); }
.admin-job__cost { margin-left: auto; }
.admin-job__last {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.4rem 1rem;
  margin: 0; padding: 0; list-style: none; font-size: 0.85rem;
}
.admin-job__last li { display: flex; flex-direction: column; }
.admin-job__label { font-size: 0.75rem; color: var(--text-muted); }
.admin-job__failed { color: var(--danger); }
.admin-job__run { white-space: normal; }
.admin-job__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.admin-job__actions .btn { padding: 0.5rem 1.1rem; }
@media (max-width: 600px) {
  .admin-user__email { font-size: 1.15rem; }
}
/* Admin: the health tab (partials/admin_health.html) */
.health-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.75rem; }
.health-tiles .admin-dash__tile { justify-content: flex-start; }
.health-tiles__value { font-size: 1.35rem; font-weight: 500; line-height: 1.2; color: var(--text-primary); overflow-wrap: anywhere; }
.health-tiles__link { color: inherit; text-decoration: none; transition: border-color var(--transition); }
.health-tiles__link:hover { border-color: var(--border-strong); }
.health-checks { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.health-check { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.health-check:first-child { padding-top: 0; }
.health-check:last-child { padding-bottom: 0; border-bottom: 0; }
.health-check__mark {
  flex: none; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  font-size: 0.75rem; font-weight: 600; background: var(--ok-subtle); color: var(--ok);
}
.health-check--warn .health-check__mark { background: color-mix(in srgb, var(--accent-warm) 16%, transparent); color: var(--accent-warm); }
.health-check--fail .health-check__mark { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.health-check__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; font-size: 0.92rem; }
.health-check__detail { font-size: 0.85rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.health-check__link { width: fit-content; font-size: 0.85rem; color: var(--accent); text-decoration: none; }
.health-check__link:hover { text-decoration: underline; }
.health-form { display: flex; flex-direction: column; gap: 0.6rem; }
.health-form + .health-form { padding-top: 1.1rem; border-top: 1px solid var(--border); }
.health-form textarea { resize: vertical; }
.health-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
/* Admin: the logins tab (partials/admin_logins.html) */
.logins__summary { margin: 0; }
.logins-locks { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.logins-lock { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.logins-lock:last-child { border-bottom: 0; }
.logins-lock__who { display: flex; flex-direction: column; flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.logins-lock__who .ai-call__subject { font-size: 0.85rem; }
.logins-lock .btn { padding: 0.45rem 1rem; }
.logins-table td { vertical-align: top; }
.logins-outcome { white-space: nowrap; }
.logins-row--wrong .logins-outcome, .logins-row--locked .logins-outcome { color: var(--danger); }
.logins-row--cleared .logins-outcome { color: var(--text-muted); }
/* Admin: the app's log (partials/admin_logs.html) */
.app-log { margin: 0; padding: 0; list-style: none; font-size: 0.85rem; }
.app-log__item { padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.app-log__item:last-child { border-bottom: 0; }
.app-log__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; }
.app-log__details > summary { cursor: pointer; }
.app-log__details[open] > summary { margin-bottom: 0.4rem; }
.app-log__time, .app-log__name { color: var(--text-muted); white-space: nowrap; }
.app-log__level { font-weight: 600; color: var(--text-secondary); }
.app-log__msg { flex: 1 1 20rem; min-width: 0; overflow-wrap: anywhere; }
.app-log__item--warning .app-log__level { color: var(--accent-warm); }
.app-log__item--error .app-log__level, .app-log__item--critical .app-log__level { color: var(--danger); }
.app-log__item--error .app-log__msg, .app-log__item--critical .app-log__msg { color: var(--danger); }

/* Habits: the day-page card (partials/habits_day.html), the list and the habit page. */
.habits-card .card__num .icon, .habits-card--empty .card__num .icon { display: block; font-size: 1rem; }
.habits { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.habit { padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.habit:last-child { border-bottom: none; }
.habit__row { display: flex; align-items: center; gap: 0.75rem; }
.habit__name { flex: 1; min-width: 0; color: var(--text-primary); text-decoration: none; word-break: break-word; }
.habit__name:hover { color: var(--accent); }
.habit--done .habit__name, .habit--tiny .habit__name { color: var(--text-muted); }
.habit__week { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.habit__cue { margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--text-muted); }
.habit__risk {
  margin: 0.5rem 0 0; padding: 0.5rem 0.75rem; border-radius: var(--radius);
  font-size: 0.85rem; color: var(--text-secondary);
  background: color-mix(in srgb, var(--danger) 7%, transparent);
}
.habit__risk p { margin: 0; }
.habit__risk .icon { color: var(--danger); vertical-align: -0.1em; }
.habit__plans { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; color: var(--text-secondary); }
.habit__states { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.habit__state {
  padding: 0.3rem 0.8rem; border-radius: 100px; border: 1px solid var(--border-strong);
  background: none; color: var(--text-secondary); font: inherit; font-size: 0.82rem; cursor: pointer;
  transition: all var(--transition);
}
.habit__state:hover:not(:disabled) { color: var(--text-primary); border-color: var(--accent); }
.habit__state:disabled { opacity: 0.5; cursor: default; }
.habit__state[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.habit__state--tiny[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 55%, var(--bg-card)); border-color: transparent; }
.habit__state--rest[aria-pressed="true"] { background: var(--bg-input); border-color: var(--border-strong); color: var(--text-primary); }
.habit__state--slip[aria-pressed="true"] { background: var(--danger); border-color: var(--danger); }
.habit .supp__comment { margin: 0.6rem 0 0; }
.habit > .supp__comment-text { margin-left: 0; }

.habit-list__item { gap: 0.25rem; }
.habit-list__item .supp-list__name .icon { color: var(--text-muted); vertical-align: -0.1em; }
.habit-strength { display: flex; align-items: center; gap: 0.6rem; }
.habit-strength__bar { flex: 1; max-width: 16rem; height: 4px; border-radius: 2px; background: var(--border-strong); overflow: hidden; }
.habit-strength__bar span { display: block; height: 100%; background: var(--accent); }
.habit-strength__pct { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); min-width: 2.5rem; }
.habit-warning { margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--text-secondary); }
.habit-progress { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem; }
.habit-progress .habit-strength__bar { max-width: none; height: 6px; }
.habit-progress .habit-strength__pct { display: none; }  /* the big number above says it */

/* 12 weeks, a row per week: 7 columns of days under weekday labels. */
.habit-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 14rem; }
.habit-cal__wd { font-size: 0.68rem; color: var(--text-muted); text-align: center; }
.habit-cal__cell { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--bg-input); }
a.habit-cal__cell:hover { outline: 1.5px solid var(--text-primary); }
.habit-cal__cell--done { background: var(--chart-good); }
.habit-cal__cell--tiny { background: color-mix(in srgb, var(--chart-good) 45%, var(--bg-card)); }
.habit-cal__cell--rest { background: color-mix(in srgb, var(--chart-mid) 45%, var(--bg-card)); }
.habit-cal__cell--slip { background: var(--chart-neg); }
.habit-cal__cell--miss { background: none; box-shadow: inset 0 0 0 1px var(--chart-neg); }
.habit-cal__cell--open { background: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.habit-cal__cell--off { background: color-mix(in srgb, var(--chart-grid) 40%, transparent); }
.habit-cal__cell--future { background: color-mix(in srgb, var(--chart-grid) 20%, transparent); }
.habit-cal__cell--before { background: none; }
.habit-cal__cell--target { box-shadow: inset 0 0 0 1.5px var(--text-muted); }
.habit-cal__legend { margin-top: 0.75rem; }
.habit-cal__legend .habit-cal__cell { width: 11px; height: 11px; }
.habit-design { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; margin: 0; font-size: 0.92rem; }
.habit-design dt { color: var(--text-muted); }
.habit-design dd { margin: 0; }
.habit-design .habit__plans { margin: 0; }

/* The form: fields that depend on the kind and the schedule. */
.habit-form__kind { width: fit-content; }
.habit-form__kind span { display: flex; align-items: center; gap: 0.4rem; }
.habit-form__plans { min-height: 4.5rem; resize: vertical; field-sizing: content; }
.habit-form:has(input[name="kind"][value="quit"]:checked) .habit-form--build,
.habit-form:not(:has(input[name="kind"][value="quit"]:checked)) .habit-form--quit { display: none; }
.habit-form__schedule { display: flex; flex-wrap: wrap; border-radius: 18px; width: fit-content; }
.habit-form__days, .habit-form__per-week { margin-top: 0.6rem; }
.habit-form__days { display: flex; flex-wrap: wrap; border-radius: 18px; width: fit-content; }
.habit-form__days span { padding: 0.35rem 0.6rem; }
.habit-form:not(:has(input[name="schedule"][value="weekdays"]:checked)) .habit-form__days,
.habit-form:not(:has(input[name="schedule"][value="weekly"]:checked)) .habit-form__per-week { display: none; }
.habit-form__per-week { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--text-secondary); }
.habit-form__per-week .input { width: 4.5rem; text-align: center; font-family: var(--font-mono); }

/* The habits page: the lists, and the add block in the right column (on top on a phone).
   The add block is a button that opens three ways to add a habit (tiles); the picked
   one's panel follows them: the wish and the form it fills in, the kept ideas, or the
   empty form. The column grows with the ideas and the form, so it doesn't stick. */
.day-grid--habits .day-grid__side { position: static; }
@media (max-width: 860px) { .day-grid--habits .day-grid__side { order: -1; } }
.habit-add > summary { list-style: none; width: 100%; gap: 0.45rem; }
.habit-add > summary::-webkit-details-marker { display: none; }
.habit-add[open] > summary { background: var(--bg-card); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.habit-add__panel { margin-top: 0.75rem; }
.habit-add__modes { display: flex; flex-direction: column; gap: 0.5rem; }
.habit-add__mode {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.6rem 0.8rem; border: 1px solid var(--border-strong); border-radius: var(--radius);
  color: inherit; text-decoration: none; transition: border-color var(--transition), background var(--transition);
}
.habit-add__mode:hover { border-color: var(--accent); }
.habit-add__mode:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.habit-add__mode.is-active { border-color: var(--accent); background: var(--accent-subtle); }
.habit-add__mode-title { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.habit-add__mode-hint { font-size: 0.8rem; color: var(--text-secondary); }
.habit-wish, .habit-ideas-block {
  display: flex; flex-direction: column; gap: 0.5rem;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border);
}
.habit-add__modes + .habit-form-slot > form { margin-top: 1rem; }
.habit-wish__status { margin: 0; }
.habit-wish__status:empty { display: none; }
.habit-form-slot > form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.habit-helper__ai {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 0.05rem 0.35rem; border-radius: 4px;
  color: var(--accent); border: 1px solid currentColor;
}
.habit-helper__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.habit-helper__busy { display: none; margin: 0; font-size: 0.85rem; color: var(--text-secondary); }
.habit-wish.htmx-request .habit-helper__busy, #habit-ideas-busy.htmx-request { display: inline; }
.habit-helper__cues { margin-top: -0.25rem; }
.habit-helper__cues .chip { white-space: normal; text-align: left; }
.habit-draft__basis {
  margin: 0; padding: 0.6rem 0.75rem; border-radius: var(--radius);
  font-size: 0.85rem; color: var(--text-secondary); background: var(--accent-subtle);
}
.habit-ideas { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.habit-idea {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 0.75rem; border: 1px solid var(--border-strong); border-radius: var(--radius);
}
.habit-idea__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.habit-idea__head .item-menu { margin-top: -0.2rem; }
.habit-idea__name { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-weight: 600; }
.habit-idea__meta { margin: 0; font-size: 0.75rem; color: var(--text-muted); }
.habit-idea__basis { margin: 0; font-size: 0.85rem; color: var(--text-secondary); flex: 1; }
.habit-idea__go { align-self: flex-start; margin-top: 0.25rem; }

/* ---- Habits: the weekly review and the history ---- */
.habit-reviews { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.habit-review { padding: 0.75rem 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; }
.habit-review__week { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
.habit-review__week .habit-strength { flex: 1; min-width: 8rem; }
.habit-review__week .avg__delta { font-size: 0.75rem; }
.habit-review__cells { display: grid; grid-template-columns: repeat(7, 12px); gap: 3px; }
.habit-review__form { display: flex; flex-direction: column; gap: 0.5rem; }
.habit-review .supp__comment { margin: 0; }
.habit-settled {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
  padding: 0.6rem 0.75rem; border-radius: 10px; font-size: 0.88rem;
  background: color-mix(in srgb, var(--ok) 10%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
}
.habit-settled p { margin: 0; }
.habit-settled .icon { color: var(--ok); vertical-align: -0.1em; }
.habit-history { display: block; width: 100%; height: auto; }
.habit-history__level { stroke: var(--chart-mid); stroke-width: 1; stroke-dasharray: 4 4; }
.habit-history__mark { fill: color-mix(in srgb, var(--ok) calc(20% * var(--lv, 1)), var(--bg-card)); stroke: color-mix(in srgb, var(--ok) 50%, transparent); }
.habit-history__mark[data-level="1"] { --lv: 1; }
.habit-history__mark[data-level="2"] { --lv: 2; }
.habit-history__mark[data-level="3"] { --lv: 3; }
.habit-history__mark[data-level="4"] { --lv: 4; }
.habit-history__mark[data-level="5"] { --lv: 5; }
.habit-history__num { font-family: var(--font-mono); font-size: 11px; font-weight: 500; fill: var(--text-primary); }
.habit-history__num--strong { fill: #fff; }
.habit-history__nomark { fill: var(--chart-grid); }