/* Il Giardino — Design System v1 */

:root {
  /* Dark theme (default) — "notte del guardiano" */
  --ink-deep:   #0f1410;
  --ink-mid:    #1a2219;
  --ink-soft:   #242c22;
  --paper:      #e8e3d3;
  --paper-dim:  #b8b3a3;
  --paper-faint:rgba(232,227,211,0.12);
  --sage:       #8ba888;
  --sage-deep:  #556b52;
  --sage-faint: rgba(139,168,136,0.15);
  --sienna:     #c87860;
  --gold:       #b89b5e;
  --noise-opacity: 0.5;
  --atm-a: rgba(85,107,82,0.18);
  --atm-b: rgba(200,120,96,0.06);

  --f-display: 'Instrument Serif', 'Georgia', serif;
  --f-ui:      'Instrument Sans', 'Helvetica Neue', sans-serif;
  --f-mono:    'JetBrains Mono', 'Menlo', monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Light theme — "carta invecchiata al sole mattutino romano".
 * Non è un semplice swap: è il diario ripiegato sul tavolo di legno
 * alla luce del mattino. Peso body leggermente superiore per
 * compensare il minore contrasto su fondo chiaro. */
[data-theme="light"] {
  --ink-deep:   #f4efe0;   /* carta invecchiata warm */
  --ink-mid:    #ebe4d2;
  --ink-soft:   #ded4bc;
  --paper:      #1f2418;   /* oliva scuro quasi nero — testo */
  --paper-dim:  #6b6959;   /* seppia */
  --paper-faint:rgba(31,36,24,0.15);
  --sage:       #5d7958;   /* bosco maturo, più saturo */
  --sage-deep:  #3f5539;
  --sage-faint: rgba(93,121,88,0.14);
  --sienna:     #a84828;   /* terracotta densa */
  --gold:       #8c6d2a;   /* ambra antica */
  --noise-opacity: 0.7;
  --atm-a: rgba(93,121,88,0.14);
  --atm-b: rgba(168,72,40,0.07);
}
[data-theme="light"] body {
  font-weight: 450;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--ink-deep); }

body {
  font-family: var(--f-ui);
  font-weight: 400;
  color: var(--paper);
  background: var(--ink-deep);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  letter-spacing: -0.005em;
  position: relative;
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, var(--atm-a) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, var(--atm-b) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse at 85% 0%, var(--atm-a) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 100%, var(--atm-b) 0%, transparent 60%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.91  0 0 0 0 0.89  0 0 0 0 0.83  0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: var(--noise-opacity);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}
/* Dark-ink paper grain for light theme — ivory paper with fibers */
[data-theme="light"] body::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.14  0 0 0 0 0.09  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

.page {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 28px 120px;
}

/* ── Login ─────────────────────────────────────── */
.login-view {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
}
.login-view[hidden] { display: none; }
.login-card {
  max-width: 380px; width: 100%;
  padding: 48px 36px;
  border: 1px solid var(--paper-faint);
  background: var(--ink-mid);
  text-align: center;
  animation: reveal 700ms var(--ease);
}
.login-mark { color: var(--sage); margin-bottom: 24px; }
.login-title {
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: 32px; letter-spacing: -0.02em; line-height: 1.1;
}
.login-title em { color: var(--sage); }
.login-sub {
  margin-top: 8px; font-size: 13px; color: var(--paper-dim);
  font-family: var(--f-display); font-style: italic;
}
.login-form { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.login-label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--paper-dim);
}
.login-label input {
  background: transparent; border: 1px solid var(--paper-faint);
  color: var(--paper); padding: 11px 14px;
  font-family: var(--f-mono); font-size: 14px;
  outline: none; transition: border 300ms var(--ease);
}
.login-label input:focus { border-color: var(--sage); }
.login-error {
  padding: 8px 12px; border-left: 2px solid var(--sienna);
  font-size: 12px; color: var(--sienna); background: rgba(200,120,96,0.06);
}
.login-btn {
  margin-top: 8px;
  background: var(--sage); color: var(--ink-deep); border: 0;
  padding: 14px; font-family: var(--f-ui); font-size: 11px;
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em;
  cursor: pointer; transition: background 300ms var(--ease);
}
.login-btn:hover { background: #a6c0a3; }
.login-btn:disabled { opacity: 0.5; cursor: wait; }

/* ── Masthead ──────────────────────────────────── */
.masthead {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 20px; border-bottom: 1px solid var(--paper-faint);
  gap: 24px;
  animation: reveal 700ms var(--ease) 80ms both;
}
.masthead__title {
  font-family: var(--f-display); font-style: italic; font-size: 28px;
  font-weight: 400; letter-spacing: -0.015em;
  color: var(--paper); text-decoration: none;
}
.masthead__title em { color: var(--sage); }
.masthead__nav {
  display: flex; gap: 28px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--paper-dim);
  flex: 1; justify-content: center;
}
.masthead__nav a {
  color: var(--paper-dim); text-decoration: none;
  transition: color 300ms var(--ease);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.masthead__nav a:hover { color: var(--paper); }
.masthead__nav a.active { color: var(--paper); border-bottom-color: var(--sage); }

.masthead__meta {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.05em; color: var(--paper-dim);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.masthead__dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--sage);
  animation: breathe 2.8s ease-in-out infinite;
}
.masthead__dot.offline { background: var(--sienna); animation: none; }

/* Theme toggle */
.theme-toggle {
  background: transparent; border: 1px solid var(--paper-faint);
  color: var(--paper-dim); padding: 6px 8px;
  cursor: pointer; transition: color 300ms var(--ease), border-color 300ms var(--ease);
  display: inline-flex; align-items: center; margin-left: 8px;
}
.theme-toggle:hover { color: var(--paper); border-color: var(--paper-dim); }
.theme-toggle__icon { display: none; }
[data-theme="dark"]  .theme-toggle__icon--moon,
:root:not([data-theme="light"]) .theme-toggle__icon--moon { display: inline; }
[data-theme="light"] .theme-toggle__icon--sun { display: inline; }
@keyframes breathe {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

/* ── Mobile bottom nav ─────────────────────────── */
.mobile-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 20;
  display: flex; justify-content: space-around;
  background: var(--ink-deep);
  border-top: 1px solid var(--paper-faint);
  padding: 10px 4px calc(10px + env(safe-area-inset-bottom, 0));
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a {
  flex: 1; text-align: center;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--paper-dim); text-decoration: none;
  padding: 8px 4px;
  transition: color 300ms var(--ease);
  border-top: 2px solid transparent;
  margin-top: -10px; padding-top: 16px;
}
.mobile-nav a.active { color: var(--paper); border-top-color: var(--sage); }

/* ── Section labels ────────────────────────────── */
.section-label {
  display: flex; align-items: center; gap: 16px;
  margin: 64px 0 20px;
  font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--paper-dim);
}
.section-label__ornament { flex: 1; height: 1px; background: var(--paper-faint); }
.section-label__num {
  font-family: var(--f-mono); font-size: 10px; opacity: 0.6;
}

.pageheader {
  margin-top: 56px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--paper-faint);
  display: flex; justify-content: space-between; align-items: end; gap: 32px;
  animation: reveal 800ms var(--ease) 200ms both;
}
.pageheader__kicker {
  font-family: var(--f-ui); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--sage); margin-bottom: 8px;
}
.pageheader__title {
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(48px, 9vw, 88px);
  line-height: 0.95; letter-spacing: -0.03em;
}
.pageheader__title em { color: var(--sage); }
.pageheader__meta {
  font-family: var(--f-mono); font-size: 11px; color: var(--paper-dim);
  letter-spacing: 0.05em; text-align: right;
  display: flex; flex-direction: column; gap: 6px;
}
.pageheader__meta strong { color: var(--paper); font-weight: 500; font-size: 13px; }

/* ── Home: hero ────────────────────────────────── */
.hero {
  margin-top: 44px;
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end;
  animation: reveal 800ms var(--ease) 240ms both;
}
.hero__kicker {
  font-family: var(--f-ui); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--sage); margin-bottom: 10px;
}
.hero__number {
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: clamp(88px, 15vw, 164px); line-height: 0.88; letter-spacing: -0.035em;
  color: var(--paper);
  display: flex; align-items: baseline; gap: 8px;
}
.hero__unit {
  font-family: var(--f-ui); font-style: normal;
  font-size: 0.22em; font-weight: 500;
  color: var(--paper-dim); letter-spacing: 0.12em;
  text-transform: uppercase; transform: translateY(-0.4em);
}
.hero__caption {
  font-family: var(--f-display); font-style: italic;
  font-size: 22px; color: var(--paper-dim);
  margin-top: 14px; max-width: 36ch; line-height: 1.35;
}
.hero__caption em { color: var(--sage); font-style: italic; }
.hero__stats {
  display: flex; flex-direction: column; gap: 14px;
  padding-left: 28px; border-left: 1px solid var(--paper-faint);
  min-width: 190px;
}
.stat-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
}
.stat-row__label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--paper-dim);
}
.stat-row__value {
  font-family: var(--f-mono); font-size: 14px; color: var(--paper); font-weight: 500;
}
.stat-row__value--sage { color: var(--sage); }
.stat-row__value--sienna { color: var(--sienna); }

/* ── Cycles ────────────────────────────────────── */
.cycles {
  margin-top: 36px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  animation: reveal 800ms var(--ease) 380ms both;
}
.cycle { padding: 20px 0; border-top: 1px solid var(--paper-faint); }
.cycle__header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.cycle__name {
  font-family: var(--f-display); font-style: italic; font-size: 22px;
  color: var(--paper);
}
.cycle__name em { color: var(--sage); }
.cycle__time {
  font-family: var(--f-mono); font-size: 11px; color: var(--paper-dim); letter-spacing: 0.05em;
}
.cycle__list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.cycle__item {
  display: grid; grid-template-columns: 60px 1fr auto; gap: 16px;
  align-items: baseline; font-size: 14px;
  padding-bottom: 10px; border-bottom: 1px dashed rgba(232,227,211,0.06);
}
.cycle__start { font-family: var(--f-mono); font-size: 13px; color: var(--sage); }
.cycle__zone { color: var(--paper); letter-spacing: -0.01em; }
.cycle__zone-meta {
  font-size: 11px; color: var(--paper-dim); margin-top: 2px; letter-spacing: 0.02em;
}
.cycle__duration { font-family: var(--f-mono); font-size: 12px; color: var(--paper-dim); }
.cycle__empty {
  font-family: var(--f-display); font-style: italic; color: var(--paper-dim);
  font-size: 15px; padding: 8px 0;
}

/* ── Tank block ────────────────────────────────── */
.tank-block {
  display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: center;
  animation: reveal 800ms var(--ease) 500ms both;
}
.tank-wrap { display: flex; gap: 14px; max-width: 260px; }
.tank-scale {
  position: relative; width: 44px; flex-shrink: 0;
  font-family: var(--f-mono); font-size: 9.5px;
  color: var(--paper-dim); letter-spacing: 0.05em;
  aspect-ratio: 3/4; min-height: 100%;
}
.tank-scale span {
  position: absolute; right: 0; transform: translateY(-50%);
  display: flex; align-items: center; gap: 6px;
}
.tank-scale span::after {
  content: ''; display: block; width: 6px; height: 1px; background: var(--paper-faint);
}
.tank-visual {
  position: relative; aspect-ratio: 3/4; flex: 1; max-width: 220px;
  border: 1px solid var(--paper-faint); overflow: hidden; background: var(--ink-mid);
}
.tank-fill {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, var(--sage-deep) 0%, var(--sage) 100%);
  height: 0; transition: height 2s var(--ease);
}
.tank-fill::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 3px;
  background: linear-gradient(to bottom, rgba(232,227,211,0.35), transparent);
  animation: tank-ripple 3.4s ease-in-out infinite;
}
@keyframes tank-ripple {
  0%,100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(2px) scaleY(0.85); }
}
.tank-markers { position: absolute; inset: 0; pointer-events: none; }
.tank-marker {
  position: absolute; left: 0; right: 0; height: 1px;
  background: rgba(232,227,211,0.18);
}
.tank-caption { display: flex; flex-direction: column; gap: 12px; }
.tank-num {
  font-family: var(--f-display); font-style: italic;
  font-size: 72px; line-height: 0.9; color: var(--paper);
}
.tank-num__small {
  font-size: 0.4em; color: var(--paper-dim);
  font-style: normal; font-family: var(--f-ui); letter-spacing: 0.08em;
}
.tank-desc {
  font-family: var(--f-display); font-style: italic; font-size: 18px;
  color: var(--paper-dim); max-width: 32ch;
}
.tank-desc em { color: var(--sage); font-style: italic; }
.tank-bullets { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.tank-bullet {
  display: grid; grid-template-columns: 16px 1fr auto; gap: 10px;
  align-items: baseline; font-size: 13px;
}
.tank-bullet__dot {
  width: 4px; height: 4px; background: var(--sage);
  border-radius: 50%; transform: translateY(6px);
}
.tank-bullet__label { color: var(--paper-dim); }
.tank-bullet__value {
  font-family: var(--f-mono); font-size: 12px; color: var(--paper);
}

/* ── Sensors ───────────────────────────────────── */
.sensors {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px;
  animation: reveal 800ms var(--ease) 620ms both;
}
.sensor {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 18px; border-top: 1px solid var(--paper-faint);
}
.sensor__pct {
  font-family: var(--f-display); font-style: italic;
  font-size: 56px; line-height: 1; color: var(--paper);
  display: flex; align-items: baseline; gap: 4px;
}
.sensor__pct small {
  font-size: 0.35em; color: var(--paper-dim);
  font-style: normal; font-family: var(--f-ui);
}
.sensor__bar {
  position: relative; height: 2px;
  background: var(--paper-faint); margin: 12px 0 8px;
}
.sensor__bar span {
  position: absolute; top: -1px; height: 4px; background: var(--sage); left: 0;
  animation: sensor-breathe 3s ease-in-out infinite;
}
.sensor__bar::before,
.sensor__bar::after {
  content: ''; position: absolute; top: -3px;
  width: 1px; height: 8px; background: var(--paper-dim); opacity: 0.4;
}
.sensor__bar::before { left: var(--stress-pct, 34%); }
.sensor__bar::after  { left: var(--comfort-pct, 38%); }
@keyframes sensor-breathe {
  0%,100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.sensor__thresholds {
  display: flex; gap: 18px;
  font-family: var(--f-mono); font-size: 10px;
  color: var(--paper-dim); letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.sensor__thresholds em {
  font-style: normal; color: var(--paper); margin-left: 4px;
}
.sensor__name {
  font-family: var(--f-display); font-style: italic; font-size: 18px; color: var(--paper);
}
.sensor__loc {
  font-size: 12px; color: var(--paper-dim);
  letter-spacing: 0.02em; line-height: 1.5;
}
.sensor__note {
  font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase; margin-top: 6px;
}
.sensor__note--sage { color: var(--gold); }
.sensor__note--sienna { color: var(--sienna); }

/* ── Advisor quote ─────────────────────────────── */
.quote {
  margin-top: 44px;
  padding: 40px 0 48px;
  border-top: 1px solid var(--paper-faint);
  border-bottom: 1px solid var(--paper-faint);
  display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: start;
  animation: reveal 900ms var(--ease) 760ms both;
}
.quote__mark {
  font-family: var(--f-display); font-style: italic;
  font-size: 120px; line-height: 0.5;
  color: var(--sage); opacity: 0.55;
  transform: translateY(0.25em);
}
.quote__body {
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: 24px; line-height: 1.4; color: var(--paper);
  letter-spacing: -0.005em; max-width: 60ch;
}
.quote__body em { color: var(--sage); }
.quote__attr {
  font-family: var(--f-ui); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--paper-dim); margin-top: 20px;
}
.quote__attr strong { color: var(--paper); font-weight: 500; }
.quote__alerts { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.quote__alert {
  font-size: 13px; color: var(--paper-dim);
  padding-left: 22px; position: relative; line-height: 1.5;
}
.quote__alert::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 12px; height: 1px; background: var(--gold);
}

/* ── Journal ───────────────────────────────────── */
.journal { animation: reveal 800ms var(--ease) 900ms both; }
.journal__list { list-style: none; border-top: 1px solid var(--paper-faint); }
.journal__entry {
  display: grid; grid-template-columns: 90px 1fr auto auto; gap: 20px;
  padding: 14px 0; border-bottom: 1px solid rgba(232,227,211,0.06);
  align-items: baseline;
  transition: padding-left 400ms var(--ease), background 400ms var(--ease);
}
.journal__entry:hover {
  padding-left: 12px;
  background: linear-gradient(to right, var(--sage-faint), transparent 60%);
}
.journal__date {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--paper-dim); letter-spacing: 0.04em;
}
.journal__zone {
  font-family: var(--f-display); font-style: italic; font-size: 19px; color: var(--paper);
}
.journal__zone small {
  font-family: var(--f-ui); font-style: normal; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--paper-dim); margin-left: 10px;
}
.journal__dur, .journal__liters {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--paper); letter-spacing: 0.02em;
}
.journal__liters { color: var(--sage); }
.journal__liters--skip { color: var(--paper-dim); }
.journal__liters--alert { color: var(--sienna); }

.empty-state {
  padding: 40px 0; text-align: center;
  font-family: var(--f-display); font-style: italic;
  font-size: 18px; color: var(--paper-dim);
}

/* ── Zones view ────────────────────────────────── */
.station { margin-top: 56px; animation: reveal 800ms var(--ease) both; }
.station__header {
  display: flex; align-items: baseline; gap: 20px;
  padding-bottom: 18px; border-bottom: 1px solid var(--paper-faint);
}
.station__roman {
  font-family: var(--f-display); font-style: italic;
  font-size: 48px; line-height: 1; color: var(--sage);
}
.station__name {
  font-family: var(--f-display); font-style: italic; font-size: 28px;
}
.station__meta {
  margin-left: auto; font-family: var(--f-mono); font-size: 11px;
  color: var(--paper-dim); letter-spacing: 0.04em;
}
.station__badge {
  display: inline-block; padding: 3px 10px;
  border: 1px solid var(--paper-faint); border-radius: 999px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--sage); margin-left: 10px;
}
.station__badge--alert { color: var(--sienna); border-color: rgba(200,120,96,0.35); }

.zone-row {
  display: grid; grid-template-columns: 22px 1fr 140px 110px 90px 84px;
  gap: 24px; align-items: center;
  padding: 22px 0; border-bottom: 1px solid rgba(232,227,211,0.06);
  transition: padding-left 400ms var(--ease), background 400ms var(--ease);
}
.zone-row:hover {
  padding-left: 12px;
  background: linear-gradient(to right, var(--sage-faint), transparent 60%);
}
.zone-row__icon { width: 22px; height: 22px; color: var(--paper-dim); opacity: 0.75; }
.zone-row__main { display: flex; flex-direction: column; gap: 4px; }
.zone-row__name {
  font-family: var(--f-display); font-style: italic; font-size: 22px;
  letter-spacing: -0.01em; color: var(--paper);
}
.zone-row__id {
  font-family: var(--f-mono); font-size: 10px; color: var(--paper-dim);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.deficit-bar {
  margin-top: 4px; height: 1px; width: 100px; background: var(--paper-faint);
  position: relative;
}
.deficit-bar span {
  position: absolute; top: -1px; left: 0; height: 3px; background: var(--sage);
}
.deficit-bar--warn span { background: var(--gold); }
.deficit-bar--crit span { background: var(--sienna); }

.zone-row__status { display: flex; flex-direction: column; gap: 2px; }
.zone-row__status-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--paper-dim);
}
.zone-row__status-value {
  font-family: var(--f-display); font-style: italic; font-size: 16px; color: var(--paper);
}
.zone-row__status-value--sage { color: var(--sage); }
.zone-row__status-value--sienna { color: var(--sienna); }
.zone-row__metric {
  font-family: var(--f-mono); font-size: 13px; color: var(--paper); text-align: right;
}
.zone-row__metric small {
  display: block; font-size: 9px; color: var(--paper-dim);
  letter-spacing: 0.1em; text-transform: uppercase; margin-top: 3px;
}
.zone-row__action { text-align: right; }
.btn-ghost {
  background: transparent; border: 1px solid var(--paper-faint);
  color: var(--paper-dim); padding: 6px 12px; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.15em; font-family: var(--f-ui);
  cursor: pointer; transition: all 300ms var(--ease);
}
.btn-ghost:hover {
  border-color: var(--sage); color: var(--sage); background: var(--sage-faint);
}
.btn-ghost--sienna { color: var(--sienna); border-color: rgba(200,120,96,0.35); }
.btn-ghost--sienna:hover {
  border-color: var(--sienna); color: var(--sienna); background: rgba(200,120,96,0.08);
}

.skip-note {
  grid-column: 1 / -1;
  padding: 10px 0 0 46px;
  font-family: var(--f-display); font-style: italic;
  font-size: 14px; color: var(--paper-dim);
  border-top: 1px dashed rgba(232,227,211,0.06);
  margin-top: 6px;
}
.skip-note strong { color: var(--sage); font-weight: 400; }

/* ── Piano view ────────────────────────────────── */
.countdown {
  margin-top: 56px;
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px;
  animation: reveal 800ms var(--ease) 340ms both;
}
.countdown__label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--paper-dim); margin-bottom: 14px;
}
.countdown__time {
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(72px, 12vw, 120px); line-height: 0.9; letter-spacing: -0.03em;
}
.countdown__time small {
  font-size: 0.35em; font-family: var(--f-ui); font-style: normal;
  color: var(--paper-dim); letter-spacing: 0.08em;
}
.countdown__when {
  font-family: var(--f-display); font-style: italic; font-size: 22px;
  color: var(--paper-dim); margin-top: 10px;
}
.countdown__when em { color: var(--sage); }
.countdown__actions { display: flex; flex-direction: column; gap: 10px; }
.btn-card {
  background: transparent; border: 1px solid var(--paper-faint); color: var(--paper);
  padding: 14px 22px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
  font-family: var(--f-ui); cursor: pointer; transition: all 300ms var(--ease);
  text-align: left; min-width: 220px;
}
.btn-card:hover {
  border-color: var(--sage); color: var(--sage); background: var(--sage-faint);
}
.btn-card--alert { color: var(--sienna); border-color: rgba(200,120,96,0.35); }
.btn-card--alert:hover {
  background: rgba(200,120,96,0.1); color: var(--sienna); border-color: var(--sienna);
}
.btn-card small {
  display: block; font-family: var(--f-mono); font-size: 9px;
  color: var(--paper-dim); margin-top: 4px;
  letter-spacing: 0.05em; text-transform: none;
}

.reasoning {
  display: grid; grid-template-columns: 1fr 240px; gap: 48px; align-items: start;
  padding: 32px 0 40px;
  border-top: 1px solid var(--paper-faint);
  border-bottom: 1px solid var(--paper-faint);
  animation: reveal 800ms var(--ease) 500ms both;
}
.reasoning__body {
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: 22px; line-height: 1.45; color: var(--paper); letter-spacing: -0.005em;
}
.reasoning__body em { color: var(--sage); }
.reasoning__sidebar {
  display: flex; flex-direction: column; gap: 18px;
  padding-left: 24px; border-left: 1px solid var(--paper-faint);
}
.reasoning__stat { display: flex; flex-direction: column; gap: 2px; }
.reasoning__stat-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--paper-dim);
}
.reasoning__stat-value {
  font-family: var(--f-display); font-style: italic;
  font-size: 26px; line-height: 1; color: var(--paper);
}
.reasoning__stat-value--sage { color: var(--sage); }
.reasoning__stat-value--sienna { color: var(--sienna); }

.alerts { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.alert {
  padding: 16px 20px; border-left: 2px solid var(--gold);
  background: linear-gradient(to right, rgba(184,155,94,0.06), transparent 70%);
  font-size: 14px; color: var(--paper-dim); line-height: 1.55;
}
.alert strong {
  color: var(--gold); font-weight: 500; text-transform: uppercase;
  font-size: 10px; letter-spacing: 0.15em; display: block; margin-bottom: 6px;
}

.divergences {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px;
  animation: reveal 800ms var(--ease) 660ms both;
}
.divergence { padding-top: 18px; border-top: 1px solid var(--paper-faint); }
.divergence__zone {
  font-family: var(--f-display); font-style: italic; font-size: 22px; margin-bottom: 12px;
}
.divergence__row {
  display: grid; grid-template-columns: 80px 1fr auto; gap: 12px;
  padding: 8px 0; border-bottom: 1px dashed rgba(232,227,211,0.06);
  align-items: baseline; font-size: 13px;
}
.divergence__row-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--paper-dim);
}
.divergence__row-value {
  font-family: var(--f-mono); font-size: 13px;
}
.divergence__row-value--strike { color: var(--paper-dim); text-decoration: line-through; }
.divergence__row-value--sage { color: var(--sage); }
.divergence__diff {
  font-family: var(--f-mono); font-size: 11px; color: var(--paper-dim); letter-spacing: 0.05em;
}
.divergence__note {
  margin-top: 10px; font-family: var(--f-display); font-style: italic;
  font-size: 14px; color: var(--paper-dim); line-height: 1.5;
}

/* ── Diario view ───────────────────────────────── */
.filters {
  margin-top: 44px; display: flex; gap: 12px; flex-wrap: wrap;
  padding-bottom: 20px; border-bottom: 1px solid var(--paper-faint);
  animation: reveal 700ms var(--ease) 320ms both;
}
.filter {
  background: transparent; border: 1px solid var(--paper-faint); color: var(--paper-dim);
  padding: 8px 14px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em;
  font-family: var(--f-ui); cursor: pointer; transition: all 300ms var(--ease);
}
.filter:hover { color: var(--paper); border-color: var(--paper-dim); }
.filter.active {
  color: var(--ink-deep); background: var(--sage); border-color: var(--sage);
}

.stats-row {
  margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px;
  animation: reveal 700ms var(--ease) 400ms both;
}
.stat-card {
  padding-top: 18px; border-top: 1px solid var(--paper-faint);
  display: flex; flex-direction: column; gap: 4px;
}
.stat-card__label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--paper-dim);
}
.stat-card__value {
  font-family: var(--f-display); font-style: italic;
  font-size: 40px; line-height: 1; letter-spacing: -0.02em;
}
.stat-card__value small {
  font-size: 0.3em; font-family: var(--f-ui); font-style: normal;
  color: var(--paper-dim); margin-left: 4px; letter-spacing: 0.08em;
}
.stat-card__caption { font-size: 12px; color: var(--paper-dim); margin-top: 2px; }

.day { margin-top: 56px; animation: reveal 700ms var(--ease) both; }
.day__header {
  display: flex; align-items: baseline; gap: 20px;
  padding-bottom: 14px; border-bottom: 1px solid var(--paper-faint);
  margin-bottom: 6px;
}
.day__date {
  font-family: var(--f-display); font-style: italic; font-size: 36px;
  line-height: 1; color: var(--paper);
}
.day__weekday {
  font-family: var(--f-ui); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--paper-dim);
}
.day__summary {
  margin-left: auto; font-family: var(--f-mono); font-size: 11px;
  color: var(--paper-dim); letter-spacing: 0.04em;
}
.day__summary strong { color: var(--paper); font-weight: 500; }

.event {
  display: grid; grid-template-columns: 60px 20px 1fr 90px 70px;
  gap: 16px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid rgba(232,227,211,0.06);
  transition: padding-left 400ms var(--ease), background 400ms var(--ease);
}
.event:hover {
  padding-left: 12px;
  background: linear-gradient(to right, var(--sage-faint), transparent 60%);
}
.event__time {
  font-family: var(--f-mono); font-size: 11px; color: var(--paper-dim); letter-spacing: 0.04em;
}
.event__marker {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sage); margin-top: 4px;
}
.event__marker--skip { background: var(--gold); }
.event__marker--alert { background: var(--sienna); }
.event__marker--rain { background: var(--paper-dim); }
.event__body { display: flex; flex-direction: column; gap: 2px; }
.event__title {
  font-family: var(--f-display); font-style: italic; font-size: 19px;
  color: var(--paper); letter-spacing: -0.005em;
}
.event__title em { color: var(--sage); }
.event__meta { font-size: 12px; color: var(--paper-dim); letter-spacing: 0.02em; }
.event__dur, .event__liters {
  font-family: var(--f-mono); font-size: 12px; text-align: right;
}
.event__dur { color: var(--paper); }
.event__liters { color: var(--sage); }

/* ── Strumenti view ────────────────────────────── */
.manual-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
  animation: reveal 800ms var(--ease) 320ms both;
}
.manual-card {
  padding: 24px 0; border-top: 1px solid var(--paper-faint);
  display: flex; flex-direction: column; gap: 14px;
}
.manual-card__header { display: flex; justify-content: space-between; align-items: baseline; }
.manual-card__name { font-family: var(--f-display); font-style: italic; font-size: 22px; }
.manual-card__id {
  font-family: var(--f-mono); font-size: 10px;
  color: var(--paper-dim); letter-spacing: 0.08em;
}
.manual-card__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  padding: 10px 0;
  border-top: 1px dashed rgba(232,227,211,0.08);
  border-bottom: 1px dashed rgba(232,227,211,0.08);
}
.manual-card__stat-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--paper-dim);
}
.manual-card__stat-value {
  font-family: var(--f-mono); font-size: 13px; color: var(--paper); margin-top: 2px;
}
.manual-controls { display: flex; gap: 8px; align-items: center; }
.duration-input {
  flex: 1; background: transparent; border: 1px solid var(--paper-faint);
  color: var(--paper); padding: 10px 14px;
  font-family: var(--f-mono); font-size: 14px;
  outline: none; transition: border 300ms var(--ease);
}
.duration-input:focus { border-color: var(--sage); }
.duration-input::placeholder { color: var(--paper-dim); }
.btn-start {
  background: var(--sage); color: var(--ink-deep); border: 0;
  padding: 10px 18px; font-family: var(--f-ui); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.18em; font-weight: 500;
  cursor: pointer; transition: background 300ms var(--ease);
}
.btn-start:hover { background: #a6c0a3; }

.controllers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  animation: reveal 800ms var(--ease) 500ms both;
}
.controller {
  padding: 20px; border: 1px solid var(--paper-faint);
  background: var(--ink-mid);
  display: flex; flex-direction: column; gap: 14px;
}
.controller__name { font-family: var(--f-display); font-style: italic; font-size: 22px; }
.controller__state { display: flex; align-items: baseline; gap: 10px; }
.controller__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sage); animation: breathe 2.5s ease-in-out infinite;
}
.controller__dot--idle { background: var(--paper-dim); animation: none; }
.controller__dot--alert { background: var(--sienna); }
.controller__state-label {
  font-family: var(--f-ui); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.15em; color: var(--paper-dim);
}
.controller__state-value {
  font-family: var(--f-display); font-style: italic; font-size: 18px;
  color: var(--paper); margin-left: auto;
}

.config {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  animation: reveal 800ms var(--ease) 680ms both;
}
.config-group { padding-top: 18px; border-top: 1px solid var(--paper-faint); }
.config-group__title {
  font-family: var(--f-display); font-style: italic;
  font-size: 22px; margin-bottom: 14px;
}
.config-row {
  display: grid; grid-template-columns: 1fr auto; gap: 12px;
  padding: 8px 0; border-bottom: 1px dashed rgba(232,227,211,0.06);
  align-items: baseline;
}
.config-row__label { font-size: 13px; color: var(--paper-dim); }
.config-row__value {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--paper); letter-spacing: 0.03em;
}
.config-row__value em {
  color: var(--sage); font-style: italic; font-family: var(--f-display);
}

/* ── Loading / empty ───────────────────────────── */
.loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 50vh;
  font-family: var(--f-display); font-style: italic; font-size: 18px;
  color: var(--paper-dim);
}
.loading::before {
  content: '';
  display: inline-block; width: 8px; height: 8px;
  background: var(--sage); border-radius: 50%;
  margin-right: 14px;
  animation: breathe 1.2s ease-in-out infinite;
}

/* ── Colophon ──────────────────────────────────── */
.colophon {
  margin-top: 80px; text-align: center;
  font-family: var(--f-display); font-style: italic;
  font-size: 15px; color: var(--paper-dim); opacity: 0.7;
}
.colophon svg { display: block; margin: 0 auto 20px; color: var(--sage); opacity: 0.55; }

/* ── Toast ─────────────────────────────────────── */
.toast {
  position: fixed; top: 20px; right: 20px; z-index: 30;
  padding: 12px 20px; max-width: 320px;
  background: var(--ink-soft); border: 1px solid var(--paper-faint);
  color: var(--paper); font-size: 13px;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-color: rgba(200,120,96,0.45); color: var(--sienna); }
.toast.ok { border-color: rgba(139,168,136,0.45); color: var(--sage); }

@keyframes reveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ────────────────────────────────── */
@media (max-width: 860px) {
  .page { padding: 24px 18px 100px; }
  .masthead { flex-wrap: wrap; gap: 12px 16px; }
  .masthead__nav { display: none; }
  .masthead__meta { order: 2; font-size: 10px; }
  #mobileNav:not([hidden]) { display: flex; }

  .pageheader { flex-direction: column; align-items: start; gap: 14px; }
  .pageheader__meta { text-align: left; }

  .hero { grid-template-columns: 1fr; gap: 24px; }
  .hero__stats {
    padding-left: 0; border-left: 0;
    border-top: 1px solid var(--paper-faint); padding-top: 18px;
  }
  .cycles { grid-template-columns: 1fr; gap: 20px; }
  .tank-block { grid-template-columns: 1fr; gap: 28px; }
  .tank-wrap { max-width: 190px; }
  .tank-visual { max-width: 140px; }
  .sensors { grid-template-columns: 1fr; gap: 24px; }
  .quote { grid-template-columns: 1fr; gap: 18px; }
  .quote__mark { font-size: 80px; transform: none; }
  .quote__body { font-size: 20px; }
  .journal__entry { grid-template-columns: 70px 1fr auto; }
  .journal__liters { display: none; }
  .section-label { margin: 44px 0 14px; }

  .station__header { flex-wrap: wrap; gap: 12px; }
  .station__meta { margin-left: 0; width: 100%; }
  .zone-row {
    grid-template-columns: 22px 1fr;
    grid-template-areas: "icon main" "icon status" ". metrics" ". action";
    gap: 8px 16px; padding: 20px 0;
  }
  .zone-row__icon { grid-area: icon; align-self: start; margin-top: 6px; }
  .zone-row__main { grid-area: main; }
  .zone-row__status { grid-area: status; flex-direction: row; gap: 12px; align-items: baseline; }
  .zone-row__metrics {
    grid-area: metrics;
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px;
    padding-top: 10px; border-top: 1px dashed rgba(232,227,211,0.08);
  }
  .zone-row__metric { text-align: left; font-size: 12px; }
  .zone-row__action { grid-area: action; text-align: left; margin-top: 4px; }
  .skip-note { padding-left: 38px; font-size: 13px; }

  .countdown { grid-template-columns: 1fr; }
  .reasoning { grid-template-columns: 1fr; gap: 24px; }
  .reasoning__sidebar {
    padding-left: 0; border-left: 0;
    border-top: 1px solid var(--paper-faint); padding-top: 18px;
    flex-direction: row; flex-wrap: wrap; gap: 24px;
  }
  .reasoning__body { font-size: 18px; }
  .divergences { grid-template-columns: 1fr; gap: 24px; }

  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .day__header { flex-wrap: wrap; gap: 10px; }
  .day__summary { margin-left: 0; width: 100%; font-size: 10px; }
  .day__date { font-size: 28px; }
  .event { grid-template-columns: 54px 12px 1fr; gap: 10px 12px; }
  .event__dur, .event__liters { grid-column: 3; text-align: left; font-size: 11px; color: var(--paper-dim); }

  .manual-grid { grid-template-columns: 1fr; gap: 20px; }
  .controllers { grid-template-columns: 1fr; gap: 20px; }
  .config { grid-template-columns: 1fr; gap: 24px; }
  .manual-card__stats { grid-template-columns: 1fr 1fr; }
}

/* ── Compare tab ───────────────────────────────────────────────── */
.cmp-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 16px;
}
.cmp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cmp-field__label {
  font-family: Georgia, serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 4px 0;
}
.cmp-field__label--a { color: var(--sage); }
.cmp-field__label--b { color: var(--sienna); }
.cmp-field label {
  font-size: 0.7rem;
  color: var(--paper);
  opacity: 0.7;
  font-family: Georgia, serif;
}
.cmp-input {
  width: 100%;
  padding: 8px 10px;
  background: var(--ink-mid);
  border: 1px solid var(--sage-faint);
  border-radius: 6px;
  color: var(--paper);
  font-family: Georgia, serif;
  font-size: 0.875rem;
}
.cmp-input:focus {
  outline: none;
  border-color: var(--sage);
}
.cmp-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.cmp-btn-primary {
  margin-left: auto;
  background: var(--sage-faint);
  border-color: var(--sage);
  color: var(--sage);
}
.cmp-btn-primary:hover {
  background: var(--sage);
  color: var(--ink-deep);
}
.cmp-table {
  width: 100%;
  font-family: Georgia, serif;
  font-size: 0.875rem;
  margin-top: 12px;
  border-collapse: collapse;
}
.cmp-table thead tr {
  border-bottom: 1px solid var(--sage-faint);
}
.cmp-table th {
  text-align: right;
  padding: 8px 4px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: normal;
  opacity: 0.7;
}
.cmp-table__metric { text-align: left !important; }
.cmp-table__a { color: var(--sage); }
.cmp-table__b { color: var(--sienna); }
.cmp-table tbody td {
  padding: 8px 4px;
  text-align: right;
  border-bottom: 1px solid var(--sage-faint);
}
.cmp-table tbody td:first-child {
  text-align: left;
}
.cmp-delta--up   { color: var(--sienna); }
.cmp-delta--down { color: var(--sage); }
.cmp-delta--na   { opacity: 0.4; }
@media (max-width: 600px) {
  .cmp-fields { grid-template-columns: 1fr; gap: 12px; }
}

/* Sensor clamp badge — surfaces "deficit capped by live sensor" on zone rows */
.clamp-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 10px;
  vertical-align: middle;
  cursor: help;
  white-space: nowrap;
}
.clamp-badge--comfort {
  background: var(--sage-faint);
  color: var(--sage);
  border: 1px solid var(--sage);
}
.clamp-badge--mid_band {
  background: rgba(199, 138, 86, 0.12);
  color: var(--sienna);
  border: 1px solid var(--sienna);
}