:root {
  --font-sans: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif;
  --font-serif: "Iowan Old Style", "Georgia", serif;

  --bg: #f3f2ee;
  --bg-start: #faf9f5;
  --bg-mobile-start: #fbfaf7;
  --bg-mobile-end: #f1f0ec;
  --panel: rgba(255, 255, 252, 0.92);
  --panel-solid: #fffefa;
  --surface: #f8f5ef;
  --surface-card: rgba(255, 255, 255, 0.58);
  --surface-card-soft: rgba(255, 255, 255, 0.55);
  --surface-control: rgba(255, 255, 255, 0.62);
  --surface-control-hover: rgba(255, 255, 255, 0.95);
  --surface-control-active: rgba(239, 236, 229, 0.95);
  --surface-input: rgba(255, 255, 255, 0.86);
  --surface-input-soft: rgba(255, 255, 255, 0.82);
  --surface-chart: rgba(255, 255, 255, 0.42);
  --surface-overlay: rgba(255, 250, 243, 0.9);
  --surface-result: rgba(255, 255, 255, 0.9);
  --ink: #18211d;
  --muted: #64716a;
  --edge: rgba(24, 33, 29, 0.12);
  --edge-strong: rgba(24, 33, 29, 0.18);
  --edge-soft: rgba(24, 33, 29, 0.08);
  --edge-faint: rgba(24, 33, 29, 0.09);
  --edge-line: rgba(24, 33, 29, 0.14);
  --edge-scrollbar: rgba(24, 33, 29, 0.28);
  --edge-control: rgba(31, 42, 36, 0.08);
  --edge-control-strong: rgba(31, 42, 36, 0.1);
  --edge-input: rgba(31, 42, 36, 0.14);
  --accent: #d96f1f;
  --accent-deep: #954613;
  --calorie: #e8751f;
  --calorie-over: #ff1a1a;
  --calorie-under: color-mix(in srgb, var(--calorie) 55%, #ffffff);
  --weight: #1f7774;
  --danger: #8a2f18;
  --danger-surface: rgba(161, 39, 20, 0.12);
  --danger-error-surface: rgba(180, 58, 31, 0.1);
  --white: #fff;
  --accent-gradient: linear-gradient(135deg, #ea8426, #c95b17);
  --toggle-gradient: linear-gradient(135deg, #e9892b, #c25b18);
  --shadow: 0 18px 42px rgba(24, 33, 29, 0.1);
  --shadow-inset: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  --shadow-control: 0 1px 3px rgba(24, 33, 29, 0.16);
  --shadow-pressed: 0 2px 6px rgba(0, 0, 0, 0.1);
  --shadow-duplicate: 0 18px 44px rgba(77, 53, 35, 0.08);

  --radius-pill: 999px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-panel: 18px;
  --radius-card: 20px;
  --radius-modal: 24px;

  --text-kicker: 0.72rem;
  --text-small: 0.88rem;
  --text-control: 0.92rem;
  --section-pad: 1rem;
  --modal-bottom-offset: 0px;
}

/* Base */

* {
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans);
  color: var(--ink);
  background: linear-gradient(180deg, var(--bg-start) 0%, var(--bg) 100%);
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100svh;
  background: transparent;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

h1,
h2 {
  font-family: var(--font-serif);
  line-height: 1.02;
  margin: 0;
}

h2 {
  font-size: 1.45rem;
}

h1 {
  font-size: 1.8rem;
}

/* Shared utilities */

.panel-kicker {
  font-weight: bold;
}

.panel-kicker,
.stat-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--text-kicker);
  color: var(--muted);
  margin: 0 0 0.45rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.subtle-link,
.empty-state,
.journal-subtitle,
.journal-notes {
  color: var(--muted);
}

.subtle-link {
  text-decoration: none;
  white-space: nowrap;
}

.plain-button {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--muted);
}

.button {
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0.9rem 1rem;
  font-weight: 700;
  font-size: var(--text-control);
}

.primary-button {
  background: var(--accent-gradient);
  color: var(--white);
}

.secondary-button {
  background: var(--edge-control);
  color: var(--ink);
}

.danger-button {
  background: var(--danger-surface);
  color: var(--danger);
}

.action-button {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  background: var(--surface-control);
  border: 1px solid var(--edge);
  border-radius: var(--radius-pill);
  text-decoration: none;
  line-height: 1;
}

.action-button:hover,
.action-button:focus-visible {
  background: var(--surface-control-hover);
  outline: none;
}

.action-button:active {
  background: var(--surface-control-active);
}

.text-icon-button {
  gap: 0.35rem;
  padding: 0.46rem 0.62rem;
  font-size: 0.77rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}

.text-icon-button span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  transform: translateY(0.05em);
}

.icon-button {
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
}

.surface-card {
  background: var(--surface-card);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius-md);
}

/* Login */

.login-shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.login-card {
  width: min(100%, 28rem);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 1.25rem;
}

.login-copy {
  margin: 0.5rem 0 1rem;
  color: var(--muted);
}

.login-form {
  margin-top: 0.25rem;
}

/* App frame */

.app-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 100svh;
  padding: 0;
  gap: 0;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  box-shadow: var(--shadow-inset);
  backdrop-filter: blur(16px);
}

.panel-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Chart */

.chart-panel {
  position: relative;
  top: auto;
  padding: var(--section-pad);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chart-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.chart-axis {
  fill: var(--muted);
  font-size: 11px;
}

.chart-stats strong {
  display: block;
  font-size: 1rem;
}

.metric-card {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 0.34rem;
  padding: 0.68rem 0.72rem;
  background: var(--surface-card);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius-md);
}

.chart-stats .stat-label {
  margin: 0;
  line-height: 1;
}

.chart-stats strong {
  line-height: 1.1;
}

.metric-no-plan {
  color: color-mix(in srgb, var(--muted) 55%, transparent);
  font-weight: 500;
}

.mode-switch {
  display: inline-flex;
  padding: 0.18rem;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius-pill);
}

.chart-header-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.mode-pill {
  text-decoration: none;
  border-radius: var(--radius-pill);
  min-width: 2.1rem;
  text-align: center;
  padding: 0.42rem 0.58rem;
  font-size: 0.88rem;
  line-height: 1;
}

.mode-pill.is-active {
  background: var(--ink);
  color: var(--panel-solid);
  box-shadow: var(--shadow-control);
}

.chart-canvas {
  overflow: hidden;
  min-height: 0;
  padding: 0.25rem 0.2rem 0;
}

.chart-canvas svg {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
}

.stats-panel {
  display: grid;
  gap: 0.8rem;
  padding: 0.2rem 0 0;
}

.stats-section {
  padding: 0.85rem 0.9rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.45rem;
}

.stats-grid > div {
  display: flex;
  flex-direction: column;
}

.stats-grid strong {
  font-size: 1rem;
}

.stats-footnote {
  margin: 0.55rem 0 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.confidence-high {
  color: var(--weight);
}

.confidence-medium {
  color: var(--calorie);
}

.confidence-low,
.confidence-insufficient {
  color: var(--muted);
}

.chart-grid {
  stroke: var(--edge);
  stroke-width: 1;
}

.chart-day-boundary {
  opacity: 0.85;
}

.chart-now {
  stroke: var(--weight);
  stroke-width: 1.25;
  opacity: 0.9;
}

.chart-target {
  fill: none;
  stroke: color-mix(in srgb, var(--calorie) 70%, #ffffff 30%);
  stroke-width: 2;
  stroke-dasharray: 4 6;
}

.chart-week-relative-target {
  fill: none;
  stroke: color-mix(in srgb, var(--weight) 78%, #ffffff 22%);
  stroke-width: 2;
  stroke-dasharray: 3 5;
}

.chart-week-maintenance {
  fill: none;
  stroke: #a0a8a5;
  stroke-width: 1.5;
  stroke-dasharray: 2 5;
  opacity: 0.5;
}

.chart-actual,
.chart-weight {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-actual {
  stroke: var(--calorie);
  stroke-width: 3;
}

.chart-area {
  fill: url(#calorie-fill);
}

.chart-weight {
  stroke: var(--weight);
  stroke-width: 2.5;
}

.chart-weight-target {
  fill: none;
  stroke: color-mix(in srgb, var(--weight) 70%, #ffffff 30%);
  stroke-width: 2;
  stroke-dasharray: 5 5;
}

.chart-weight-trend {
  fill: none;
  stroke: color-mix(in srgb, var(--weight) 52%, #7a8784 48%);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

.chart-weight-target-past {
  stroke: color-mix(in srgb, var(--weight) 40%, #8d9895 60%);
  opacity: 0.55;
}

.chart-weight-target-leadin {
  fill: none;
  stroke: color-mix(in srgb, var(--weight) 45%, #8d9895 55%);
  stroke-width: 2;
  stroke-dasharray: 2 4;
  opacity: 0.6;
}

.chart-segment-boundary {
  stroke: color-mix(in srgb, var(--weight) 58%, #ffffff 42%);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
}

.chart-plan-end {
  opacity: 0.5;
}

.chart-weight-point {
  fill: var(--white);
  stroke: var(--weight);
  stroke-width: 2;
}

.chart-axis-left {
  text-anchor: start;
}

.chart-axis-right {
  text-anchor: end;
}

/* Journal */

.journal-panel {
  padding: var(--section-pad);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.journal-header {
  margin-bottom: 0.75rem;
}

.journal-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
}

.header-action-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}

.header-action-icon path,
.header-action-icon circle {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.journal-list {
  display: grid;
  overflow: auto;
  padding-right: 0.25rem;
  position: relative;
  gap: 0.7rem;
  scrollbar-width: thin;
  scrollbar-color: var(--edge-scrollbar) transparent;
}

.journal-list::before {
  content: "";
  position: absolute;
  left: 0.34rem;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 1px;
  background: var(--edge-line);
  pointer-events: none;
}

.journal-group {
  display: grid;
  gap: 0.35rem;
}

.journal-date-separator {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 88%, var(--ink) 12%);
  font-weight: 700;
  padding: 0.65rem 0.35rem 0.4rem 2rem;
}

.journal-day-delta {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.14rem 0.5rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--muted);
}

.journal-day-delta.is-over {
  background: color-mix(in srgb, var(--calorie) 14%, transparent);
  color: color-mix(in srgb, var(--calorie) 72%, var(--ink) 28%);
}

.journal-day-delta.is-under {
  background: color-mix(in srgb, var(--weight) 12%, transparent);
  color: color-mix(in srgb, var(--weight) 75%, var(--ink) 25%);
}

.journal-group-items {
  position: relative;
}

.journal-item {
  display: grid;
  grid-template-columns: 0.7rem 3.1rem minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  min-height: 2.8rem;
  padding: 0.5rem 0.35rem 0.5rem 0;
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.journal-group-items > .journal-item + .journal-item {
  border-top: 0;
}

.journal-group-items > .journal-item + .journal-item::before {
  content: "";
  position: absolute;
  left: 4.3rem;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--edge-faint);
}

.journal-item:hover,
.journal-item:focus-visible {
  background: color-mix(in srgb, var(--white) 70%, transparent);
  outline: none;
}

.journal-item:active {
  background: color-mix(in srgb, var(--surface-control-active) 95%, transparent);
}

.journal-timeline-dot {
  display: flex;
  align-items: center;
  justify-content: center;
}

.journal-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--muted);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--panel-solid) 78%, transparent 22%);
  position: relative;
  z-index: 1;
}

.journal-time {
  width: 3.1rem;
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

.journal-title {
  min-width: 0;
  font-weight: 600;
  line-height: 1.2;
}

.journal-subtitle,
.journal-notes {
  margin: 0.35rem 0 0;
  line-height: 1.45;
}

.journal-value {
  color: var(--accent-deep);
  font-weight: 700;
  white-space: nowrap;
}

.journal-item-meal .journal-dot {
  background: var(--calorie);
}

.journal-item-weight .journal-dot {
  background: var(--weight);
}

.journal-item-meal .journal-title,
.journal-item-meal .journal-time {
  color: color-mix(in srgb, var(--ink) 90%, var(--calorie) 10%);
}

.journal-item-weight .journal-title,
.journal-item-weight .journal-time {
  color: color-mix(in srgb, var(--ink) 86%, var(--weight) 14%);
}

.journal-item-weight .journal-value {
  color: color-mix(in srgb, var(--ink) 35%, var(--weight) 65%);
}

.empty-state {
  margin: 0;
  padding: 1rem 0.2rem 0.4rem;
}

/* Modal and forms */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  min-height: 100lvh;
  background: color-mix(in srgb, var(--ink) 48%, transparent);
  backdrop-filter: blur(4px);
}

.modal-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  height: calc(100dvh - var(--modal-bottom-offset));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  overflow: hidden;
  padding: 0.75rem 0.75rem max(0.75rem, env(safe-area-inset-bottom));
}

.modal-card {
  position: relative;
  width: 100%;
  background: var(--panel-solid);
  border: 1px solid var(--edge);
  border-radius: var(--radius-modal) var(--radius-modal) var(--radius-panel) var(--radius-panel);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  max-height: calc(100dvh - var(--modal-bottom-offset) - 1.5rem - env(safe-area-inset-bottom));
  overflow: auto;
}

.stack-form {
  display: grid;
  margin-block: 1rem;
  gap: 1rem;
}

.stack-form label {
  display: grid;
  gap: 0.35rem;
}

.stack-form span {
  font-size: var(--text-small);
  font-weight: 600;
}

.stack-form input,
.stack-form select,
.stack-form textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--edge);
  border-radius: var(--radius-md);
  padding: 0.85rem 0.95rem;
  background: var(--surface-input);
}

.stack-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5' fill='none' stroke='%2364716a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1rem;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.8rem;
}

.settings-row > span {
  font-size: var(--text-control);
  font-weight: 600;
  flex-shrink: 0;
}

.settings-row input[type="number"] {
  width: 5.5rem;
  flex-shrink: 0;
  text-align: right;
  border: 1px solid var(--edge-input);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  background: var(--surface-input-soft);
  font: inherit;
  font-size: var(--text-control);
}

.segmented-control {
  display: flex;
  flex: 1;
  min-width: 0;
  padding: 0.1rem;
  background: color-mix(in srgb, var(--ink) 5%, var(--white) 95%);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-inset);
}

.segment {
  display: flex;
  flex: 1;
  cursor: pointer;
  position: relative;
}

.segment input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.segment span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 0.58rem 0.7rem;
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
  white-space: nowrap;
  letter-spacing: 0;
}

.segment input[type="radio"]:checked + span {
  background: color-mix(in srgb, var(--accent) 7%, var(--white) 93%);
  border-color: color-mix(in srgb, var(--accent) 52%, var(--white) 48%);
  color: var(--accent);
  box-shadow: 0 1px 2px rgba(149, 70, 19, 0.06);
}

.stack-form input[type="date"] {
  min-width: 0;
  max-width: 100%;
  -webkit-appearance: none;
}

.time-row,
.measurement-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.time-row > label,
.measurement-row > label {
  min-width: 0;
}

/* Settings */

.settings-section {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 2rem;
}

.settings-section:last-child {
  margin-bottom: 0;
}

.settings-section-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--text-kicker);
  color: var(--muted);
  margin: 0 0 0.15rem;
  font-weight: 600;
}

.settings-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.settings-card {
  border: 1px solid var(--edge-control-strong);
  border-radius: var(--radius-panel);
  background: var(--surface-card-soft);
  padding: 1rem;
  display: grid;
  gap: 1rem;
}

.plan-list {
  gap: 0.5rem;
}

.plan-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "dates badge"
    "title badge";
  align-items: center;
  gap: 0.1rem 0.6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--edge-control-strong);
  border-radius: calc(var(--radius-panel) - 4px);
  background: var(--white);
  text-decoration: none;
  color: inherit;
}

.plan-row:hover,
.plan-row:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--edge-control-strong) 55%);
}

.plan-row.is-active {
  border-color: color-mix(in srgb, var(--weight) 45%, var(--edge-control-strong) 55%);
}

.plan-row-dates {
  grid-area: dates;
  font-size: 0.72rem;
  color: var(--muted);
}

.plan-row-title {
  grid-area: title;
  font-weight: 600;
  font-size: 0.9rem;
}

.plan-row-title em {
  font-style: normal;
  font-weight: 500;
  color: var(--muted);
}

.plan-row-badge {
  grid-area: badge;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--weight) 45%, transparent 55%);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--weight);
}

.plan-goal-row > span {
  font-size: 0.85rem;
  color: var(--muted);
}

.plan-goal-weight {
  display: grid;
  gap: 0.35rem;
}

.plan-setting-row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) minmax(7rem, 10rem);
  align-items: center;
  gap: 0.75rem;
}

.plan-setting-row-stacked {
  grid-template-columns: 3rem minmax(0, 1fr);
  border-top: 1px solid var(--edge-control-strong);
  padding-top: 1rem;
}

.settings-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, var(--white) 90%);
  position: relative;
}

.settings-icon::before,
.settings-icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

.settings-icon-goal::before {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--accent);
  border-radius: 50%;
}

.settings-icon-goal::after {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--accent);
}

.settings-icon-rate svg {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1.35rem;
  height: 1.35rem;
  transform: translate(-50%, -50%);
}

.settings-icon-rate path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plan-setting-copy {
  display: grid;
  gap: 0.25rem;
}

.plan-setting-copy strong {
  font-size: 1rem;
}

.plan-setting-copy span,
.goal-weight-input span,
.plan-preview span,
.rate-help,
.settings-autosave {
  color: var(--muted);
  font-weight: 400;
}

.stack-form label.goal-weight-input {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--edge-input);
  border-radius: var(--radius-md);
  background: var(--surface-input-soft);
  padding: 0 0.8rem 0 0;
}

.goal-weight-input input[name="target_weight"] {
  width: auto;
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.8rem 0.3rem 0.8rem 0.8rem;
  text-align: right;
  font-size: 1.35rem;
}

.goal-weight-input span {
  flex-shrink: 0;
  font-weight: 700;
}

.rate-control-wrap {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.55rem;
  --rate-thumb: 1.25rem;
  --rate-track-h: 0.5rem;
  /* Horizontal breathing room so the end notches (0.0% / 1.0%) don't hug the edges. */
  --rate-edge: 1.2rem;
}

.rate-slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.rate-slider-caption {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.rate-slider-value {
  color: var(--accent);
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/*
 * The slider is composed of three stacked layers that share one coordinate
 * system: a drawn track + fill, a transparent native <input> on top for
 * interaction, and the notch labels below. The track and ticks are inset by
 * half a thumb on each side so the fill end, the thumb center, and the notch
 * marks all line up at the same x for any value.
 */
.rate-slider {
  position: relative;
  height: var(--rate-row, 1.5rem);
  margin-bottom: 2.4rem;
}

.rate-slider-track {
  position: absolute;
  left: calc(var(--rate-edge) + var(--rate-thumb) / 2);
  right: calc(var(--rate-edge) + var(--rate-thumb) / 2);
  top: 50%;
  transform: translateY(-50%);
  height: var(--rate-track-h);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 9%, var(--white) 91%);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow: var(--shadow-inset);
  overflow: hidden;
}

.rate-slider-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--rate-fill, 0%);
  background: var(--accent);
  border-radius: inherit;
}

.rate-slider .rate-slider-input {
  position: absolute;
  left: var(--rate-edge);
  right: var(--rate-edge);
  top: 0;
  width: auto;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.rate-slider-input:focus {
  outline: none;
}

/* Track is drawn by .rate-slider-track, so the native track is invisible. */
.rate-slider-input::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
  border: none;
}

.rate-slider-input::-moz-range-track {
  height: 100%;
  background: transparent;
  border: none;
}

.rate-slider-input::-moz-range-progress {
  background: transparent;
}

/* Thumb */
.rate-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--rate-thumb);
  height: var(--rate-thumb);
  margin-top: calc((var(--rate-row, 1.5rem) - var(--rate-thumb)) / 2);
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--accent);
  box-shadow: 0 1px 3px rgba(149, 70, 19, 0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.rate-slider-input::-moz-range-thumb {
  width: var(--rate-thumb);
  height: var(--rate-thumb);
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--accent);
  box-shadow: 0 1px 3px rgba(149, 70, 19, 0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.rate-slider-input:hover::-webkit-slider-thumb {
  border-color: color-mix(in srgb, var(--accent) 80%, var(--ink) 20%);
}

.rate-slider-input:hover::-moz-range-thumb {
  border-color: color-mix(in srgb, var(--accent) 80%, var(--ink) 20%);
}

.rate-slider-input:active::-webkit-slider-thumb {
  transform: scale(1.12);
  box-shadow: 0 2px 6px rgba(149, 70, 19, 0.3);
}

.rate-slider-input:active::-moz-range-thumb {
  transform: scale(1.12);
  box-shadow: 0 2px 6px rgba(149, 70, 19, 0.3);
}

.rate-slider-input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

.rate-slider-input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Notches sit below the track, inset to match the thumb travel. */
.rate-ticks {
  position: absolute;
  left: calc(var(--rate-edge) + var(--rate-thumb) / 2);
  right: calc(var(--rate-edge) + var(--rate-thumb) / 2);
  top: calc(100% + 0.35rem);
}

.rate-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.rate-tick-mark {
  width: 2px;
  height: 0.3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 20%, var(--white) 80%);
}

.rate-tick-label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rate-tick.is-active .rate-tick-mark {
  background: var(--accent);
}

.rate-tick.is-active .rate-tick-label {
  color: var(--accent);
}

.rate-slider-message {
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--weight) 65%, var(--ink) 35%);
}

.rate-help {
  margin: 0;
  text-align: center;
  font-size: 0.84rem;
}

.plan-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 8%, var(--white) 92%);
  padding: 1rem;
}

.plan-preview > div {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.plan-preview > div + div:not(.plan-preview-status) {
  border-left: 1px solid var(--edge-control-strong);
  padding-left: 0.9rem;
  margin-left: 0.9rem;
}

.plan-preview-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.plan-preview strong {
  font-size: 1.25rem;
}

.plan-preview-status {
  grid-column: 1 / -1;
  border-top: 1px solid var(--edge-control-strong);
  margin-top: 0.9rem;
  padding-top: 0.9rem;
}

.plan-preview-status strong {
  color: color-mix(in srgb, var(--weight) 65%, var(--ink) 35%);
  font-size: 0.95rem;
}

.settings-units-card {
  gap: 0;
}

.settings-units-card .settings-row + .settings-row {
  border-top: 1px solid var(--edge-control-strong);
}

.settings-units-card .segmented-control {
  flex: 0 1 14rem;
  min-width: 9rem;
  max-width: 14rem;
}

.settings-autosave {
  margin: -0.5rem 0 1.5rem;
  text-align: center;
  font-size: 0.88rem;
}

.form-actions {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.meal-duplicate-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 1.25rem;
  background: var(--surface-overlay);
  backdrop-filter: blur(12px);
}

.meal-duplicate-panel {
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0.9rem;
  border: 1px solid var(--edge-control);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--white) 72%, transparent);
  box-shadow: var(--shadow-duplicate);
  padding: 1rem;
}

.meal-duplicate-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.meal-duplicate-header h3 {
  margin: 0;
  font-size: 1.1rem;
}

.meal-duplicate-search input {
  width: 100%;
}

.meal-duplicate-results {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 0.6rem;
}

.meal-duplicate-result {
  border: 1px solid var(--edge-control);
  border-radius: var(--radius-lg);
  background: var(--surface-result);
  padding: 0.85rem 0.95rem;
  display: grid;
  gap: 0.2rem;
  text-align: left;
}

.meal-duplicate-result-date {
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.meal-duplicate-result-title {
  font-weight: 700;
}

.meal-duplicate-result-value {
  color: var(--accent-deep);
  font-weight: 700;
}

.form-error {
  margin: 0 0 1rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--radius-md);
  background: var(--danger-error-surface);
  color: var(--danger);
}

/* Responsive */

@media (min-width: 768px) {
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(color-mix(in srgb, var(--ink) 3.5%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--ink) 2.8%, transparent) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
    opacity: 0.55;
  }

  .app-shell {
    --desktop-pad: 1rem;
    --desktop-gap: 1.125rem;
    --desktop-content-width: min(1120px, 100vw);
    --desktop-inner-width: calc(var(--desktop-content-width) - (2 * var(--desktop-pad)));
    --journal-width: clamp(340px, calc(var(--desktop-inner-width) - 530px - var(--desktop-gap)), 430px);
    --chart-width: calc(var(--desktop-inner-width) - var(--journal-width) - var(--desktop-gap));
    max-width: 1120px;
    min-height: 100svh;
    height: 100svh;
    margin: 0 auto;
    padding: var(--desktop-pad);
    gap: var(--desktop-gap);
    grid-template-columns: minmax(0, var(--chart-width)) minmax(0, var(--journal-width));
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }

  .panel {
    border-left: 1px solid var(--edge);
    border-right: 1px solid var(--edge);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow);
  }

  .chart-panel,
  .journal-panel {
    padding: 1.25rem;
  }

  #chart-panel,
  #journal-panel {
    min-width: 0;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
  }

  #chart-panel {
    align-self: center;
    max-height: calc(100svh - (2 * var(--desktop-pad)));
    width: var(--chart-width);
  }

  #journal-panel {
    grid-column: 2;
    width: 100%;
    max-width: var(--journal-width);
    max-height: calc(100svh - (2 * var(--desktop-pad)));
  }

  .journal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: -1.25rem -1.25rem 0.7rem;
    padding: 0rem 1.25rem 0.9rem;
    background: linear-gradient(180deg, var(--panel-solid) 72%, color-mix(in srgb, var(--panel-solid) 0%, transparent));
  }

  .chart-canvas {
    border: 1px solid var(--edge-soft);
    border-radius: var(--radius-lg);
    background: var(--surface-chart);
    padding: 0.65rem 0.55rem 0.35rem;
  }

  .modal-sheet {
    top: 2rem;
    left: 50%;
    right: auto;
    bottom: 2rem;
    height: calc(100dvh - 4rem);
    width: min(720px, calc(100vw - 2rem));
    transform: translateX(-50%);
    padding: 0;
    justify-content: center;
  }

  .modal-card {
    border-radius: var(--radius-modal);
    padding: 1.35rem;
    max-height: 100%;
  }

  .modal-card .stack-form {
    margin-block: 0.75rem;
  }

  .settings-section {
    margin-bottom: 1.2rem;
  }

  .settings-card {
    gap: 0.85rem;
  }

  .plan-preview {
    padding: 0.85rem;
  }
}

@media (max-width: 520px) {
  :root {
    --section-pad: 0.95rem;
  }

  html {
    background: linear-gradient(180deg, var(--bg-mobile-start) 0%, var(--bg-mobile-end) 100%);
  }

  h2 {
    font-size: 1.38rem;
  }

  .chart-header h2 {
    font-size: 1.18rem;
  }

  .chart-header {
    align-items: flex-start;
  }

  .panel-header {
    gap: 0.75rem;
  }

  .chart-panel {
    border-bottom: 1px solid var(--edge-strong);
    box-shadow: var(--shadow-inset);
  }

  .chart-stats {
    gap: 0.45rem;
  }

  .chart-stats > div {
    padding: 0.58rem 0.55rem;
    border-radius: var(--radius-sm);
  }

  .stat-label {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
  }

  .chart-canvas {
    padding-top: 0.15rem;
  }

  .journal-panel {
    background: color-mix(in srgb, var(--panel-solid) 84%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--white) 82%, transparent);
  }

  .journal-header {
    align-items: center;
  }

  .journal-header-actions {
    padding-top: 0;
  }

  .journal-header-action {
    padding: 0.48rem 0.62rem;
  }

  .journal-list {
    gap: 0.45rem;
  }

  .journal-item {
    grid-template-columns: 0.7rem 3rem minmax(0, 1fr) auto;
    min-height: 2.65rem;
    gap: 0.45rem;
    padding-block: 0.46rem;
  }

  .journal-group-items > .journal-item + .journal-item::before {
    left: 4.15rem;
  }

  .journal-title {
    font-size: 0.96rem;
  }

  .journal-value {
    font-size: 0.94rem;
  }

  .time-row {
    gap: 0.5rem;
  }

  .plan-setting-row,
  .plan-setting-row-stacked {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .goal-weight-input {
    grid-column: 1 / -1;
  }

  .plan-preview {
    grid-template-columns: minmax(0, 1fr);
  }

  .plan-preview > div + div:not(.plan-preview-status) {
    border-left: 0;
    border-top: 1px solid var(--edge-control-strong);
    padding-left: 0;
    padding-top: 0.8rem;
    margin-left: 0;
    margin-top: 0.8rem;
  }
}