/* ============================================================
   LifeOS — design tokens borrowed from alexvolok.com
   Light, editorial, refined. Dark mode added for evening journaling.
   ============================================================ */

:root {
  --bg:            #f4f6f9;
  --bg-card:       #ffffff;
  --bg-hover:      #e8edf4;
  --bg-input:      #f8f9fb;
  --border:        rgba(0,0,0,0.07);
  --border-strong: rgba(0,0,0,0.13);

  --text-primary:  #17202b;
  --text-secondary:#4c5a6b;
  --text-muted:    #5f6b7d;

  --accent:        #2456a5;
  --accent-warm:   #16386f;
  --accent-subtle: rgba(36,86,165,0.08);
  --accent-glow:   rgba(36,86,165,0.08);

  --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;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #0f141b;
    --bg-card:       #171e28;
    --bg-hover:      #1f2835;
    --bg-input:      #121820;
    --border:        rgba(255,255,255,0.07);
    --border-strong: rgba(255,255,255,0.14);

    --text-primary:  #e8edf4;
    --text-secondary:#a9b4c3;
    --text-muted:    #8894a5;

    --accent:        #7aa5e8;
    --accent-warm:   #a3c1f0;
    --accent-subtle: rgba(122,165,232,0.12);
    --accent-glow:   rgba(122,165,232,0.07);

    --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;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: rgba(36,86,165,0.18); }

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; }
.nav__logo:hover { color: var(--accent); }
.nav__links { display: flex; gap: 2.5rem; align-items: center; margin-left: auto; margin-right: 2.5rem; }
.nav__links a, .nav__button {
  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::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:hover, .nav__button:hover { color: var(--text-primary); }
.nav__links a.active { color: var(--accent); }
.nav__links a.active::after, .nav__links a:hover::after { transform: scaleX(1); }

/* Bottom tab bar: replaces the top links on phones */
.tabbar { display: none; }
@media (max-width: 600px) {
  :root { --nav-h: 52px; }
  .nav__links { display: none; }
  body:has(.tabbar) { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .tabbar {
    display: grid;
    grid-template-columns: repeat(4, 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 { color: var(--accent); }
  .tabbar__item:active { opacity: 0.6; }
}

/* ---- Hero ---- */
.page-hero {
  padding: calc(var(--nav-h) + env(safe-area-inset-top) + 3.5rem) 0 2rem;
  background:
    radial-gradient(ellipse 60% 50% at 75% 30%, var(--accent-glow) 0%, transparent 100%),
    var(--bg);
}
.page-hero--center { min-height: 100vh; padding-top: 18vh; }
.page-hero__sub {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.day-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-top: 1.75rem;
}

/* ---- 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 rgba(36,86,165,0.25);
}
.btn-primary:hover { background: var(--accent-warm); transform: translateY(-1px); }
@media (prefers-color-scheme: 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; }

.login-card { margin-top: 2rem; }

.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); }

.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;
}
/* 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 { display: none; }
.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; margin-bottom: 1.25rem; }

/* Weekly review: the week's evening answers as reference */
.digest { margin-bottom: 1.25rem; }
.digest > summary { list-style: none; width: fit-content; }
.digest > summary::-webkit-details-marker { display: none; }
.digest > summary::before { content: "▸ "; }
.digest[open] > summary::before { content: "▾ "; }
.digest__block { margin-top: 0.9rem; }
.digest__block ul { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.35rem; }
.digest__block li { font-size: 0.92rem; font-weight: 400; color: var(--text-secondary); overflow-wrap: anywhere; }
.digest__date {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); margin-right: 0.35rem;
}
.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__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; } }

.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; }

/* ---- 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) + 2rem); }
  .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::-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); }
@media (prefers-color-scheme: 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 legend { padding: 0; margin-bottom: 0.4rem; }
.scale__opts {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.scale__opt {
  --tone: var(--text-muted);
  position: relative;
  display: grid;
  place-items: center;
  height: 2.6rem;
  border-radius: 9px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  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(--accent); }
.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 stays 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: var(--text-muted); }
@media (prefers-color-scheme: dark) { .scale__opt:has(input:checked) { color: #0f141b; } }
.scale__caption {
  font-size: 0.8rem;
  color: var(--text-muted);
  min-height: 1.2em;
}

/* ---- 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__stop { margin-right: 0.35rem; }
.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(--accent); }
.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; }
.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__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); }

.week-strip--quarter { grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); }
.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:hover .task__delete { opacity: 1; }
.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; }
.goal-edit__row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.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); }

@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));
    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; }
  .qgoal { grid-template-columns: auto 1fr auto; }
  .qgoal:not(:has(.task__check)) { grid-template-columns: 1fr auto; }
  .qgoal__meter, .qgoal__metric { grid-column: 1 / -1; justify-self: start; }
}

/* ---- Charts (colours validated with the dataviz palette checker) ---- */
:root {
  --chart-pos: #2456a5;
  --chart-neg: #b04a5a;
  --chart-mid: #9aa3b0;
  --chart-grid: #e6eaf0;
  --chart-raw: #9fb3d3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --chart-pos: #5f8bd3;
    --chart-neg: #cc6f7f;
    --chart-mid: #6b7584;
    --chart-grid: #26303d;
    --chart-raw: #3f5780;
  }
}

.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; }

/* Year in pixels: diverging blue <-> red with a neutral grey midpoint */
.pixel { stroke: none; }
.pixel--pos2 { fill: var(--chart-pos); }
.pixel--pos1 { fill: color-mix(in srgb, var(--chart-pos) 45%, var(--bg-card)); }
.pixel--zero { fill: var(--chart-mid); }
.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-pos); }
.pixel-swatch.pixel--pos1 { background: color-mix(in srgb, var(--chart-pos) 45%, var(--bg-card)); }
.pixel-swatch.pixel--zero { background: var(--chart-mid); }
.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); }

.insights { display: flex; flex-direction: column; }
.insight { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.insight:last-child { border-bottom: none; }
.insight__text { font-weight: 400; color: var(--text-secondary); }
.insight__text b { font-weight: 500; color: var(--text-primary); }
.insight__meta { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; }

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