/* ============================================================
   Irrigation Scheduling — visual system
   Palette taken from the project slide: the olive header band
   and its chart series colours.
   ============================================================ */

:root {
  --forest:       #3E5B1E;
  --forest-deep:  #2B4014;
  --forest-mid:   #4F7327;
  --forest-light: #6B8E3D;

  /* Series colours — carried over from the slide unchanged */
  --s-et0:    #5B9BD5;
  --s-kc:     #ED7D31;
  --s-kt:     #FFC000;
  --s-ke:     #A5A5A5;
  --s-etc:    #70AD47;
  --s-canopy: #264478;

  /* Neutrals, biased green so they sit with the olive */
  --bg:        #F4F6EE;
  --surface:   #FFFFFF;
  --surface-2: #EDF1E3;
  --line:      #D8DECA;
  --line-soft: #E6EBDA;
  --ink:       #1B2113;
  --ink-2:     #4A5340;
  --ink-3:     #6E7862;

  --good: #4F7327;
  --warn: #C7860E;
  --crit: #B4471F;

  --radius: 4px;
  --shadow: 0 1px 2px rgba(27,33,19,.06), 0 8px 24px -12px rgba(27,33,19,.18);
  --tip-bg: #232B1C;
  --tip-ink: #EDF1E3;

  --step--2: .68rem;
  --step--1: clamp(.75rem, .72rem + .12vw, .8rem);
  --step-0:  clamp(.9rem, .87rem + .14vw, .96rem);
  --step-1:  clamp(1.05rem, .99rem + .3vw, 1.2rem);
  --step-2:  clamp(1.3rem, 1.18rem + .6vw, 1.65rem);
  --step-3:  clamp(1.7rem, 1.44rem + 1.2vw, 2.4rem);

  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --sans: Archivo, "Segoe UI", system-ui, sans-serif;
  --serif: Newsreader, Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #12160E;
    --surface:   #1B2116;
    --surface-2: #232B1C;
    --line:      #333D28;
    --line-soft: #2A331F;
    --ink:       #EDF1E3;
    --ink-2:     #B4BDA6;
    --ink-3:     #8A9479;
    --forest:      #6B8E3D;
    --forest-deep: #24350F;
    --forest-mid:  #7CA249;
    --good: #8ABF4D;
    --warn: #E5A93C;
    --crit: #E0703F;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --tip-bg: #E9EEDF;
    --tip-ink: #1B2113;
  }
}
:root[data-theme="dark"] {
  --bg:        #12160E;
  --surface:   #1B2116;
  --surface-2: #232B1C;
  --line:      #333D28;
  --line-soft: #2A331F;
  --ink:       #EDF1E3;
  --ink-2:     #B4BDA6;
  --ink-3:     #8A9479;
  --forest:      #6B8E3D;
  --forest-deep: #24350F;
  --forest-mid:  #7CA249;
  --good: #8ABF4D;
  --warn: #E5A93C;
  --crit: #E0703F;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --tip-bg: #E9EEDF;
  --tip-ink: #1B2113;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 700; letter-spacing: -.015em; }
p { margin: 0; }
button, input { font: inherit; color: inherit; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.wrap { width: min(1220px, 100% - 3rem); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: min(1220px, 100% - 1.6rem); } }

/* ---------------- Masthead ---------------- */
.masthead {
  background: var(--forest-deep);
  border-bottom: 3px solid var(--forest);
  padding-block: 1.6rem 1.5rem;
}
.masthead__inner { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: flex-end; justify-content: space-between; }
.masthead h1 { font-size: var(--step-3); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; color: #fff; }
.masthead__sub {
  margin-top: .3rem; color: #C2D0A8; font-size: var(--step--1);
  letter-spacing: .09em; text-transform: uppercase; font-weight: 600;
}
.masthead__meta { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.meta { display: flex; flex-direction: column; gap: .1rem; }
.meta__k { font-size: var(--step--2); letter-spacing: .13em; text-transform: uppercase; color: #9FB382; font-weight: 600; }
.meta__v { font-size: var(--step-0); color: #EDF1E3; font-family: var(--mono); }

/* ---------------- Status strip ---------------- */
.status {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .55rem 0; border-bottom: 1px solid var(--line);
  font-size: var(--step--1); color: var(--ink-2);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.dot--live { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); }
.dot--err  { background: var(--crit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--crit) 22%, transparent); }
.dot--wait { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .dot--wait { animation: none; } }
.spacer { margin-left: auto; }

.btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: .38rem .8rem; border-radius: var(--radius); cursor: pointer;
  font-size: var(--step--1); font-weight: 600;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--surface-2); border-color: var(--forest-light); }
.btn:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.btn--primary { background: var(--forest); border-color: var(--forest); color: #fff; }
.btn--primary:hover { background: var(--forest-mid); border-color: var(--forest-mid); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------------- Sections ---------------- */
.section { padding-block: 2.4rem; border-bottom: 1px solid var(--line-soft); }
.section:last-of-type { border-bottom: 0; }
.section__head { display: flex; align-items: baseline; gap: .85rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.section__head h2 { font-size: var(--step-2); }
.eyebrow {
  font-size: var(--step--2); letter-spacing: .15em; text-transform: uppercase;
  font-weight: 700; color: var(--forest); padding: .2rem .45rem;
  border: 1px solid color-mix(in srgb, var(--forest) 35%, transparent);
  border-radius: 2px; flex: none;
}
.note { font-size: var(--step--1); color: var(--ink-3); margin-left: auto; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel__head { padding: .8rem 1.05rem; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.panel__head h3 { font-size: var(--step-1); }
.panel__body { padding: 1.05rem; }

/* ---------------- Season inputs (changed often) ---------------- */
.season { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.1rem 1.4rem; }
.field { display: grid; gap: .35rem; align-content: start; }
.field__top { display: flex; align-items: baseline; gap: .4rem; }
.field__label { font-size: var(--step--1); font-weight: 600; color: var(--ink-2); }
.field__val { font-family: var(--mono); font-size: var(--step--1); font-weight: 500; margin-left: auto; font-variant-numeric: tabular-nums; }

input[type="date"] {
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--radius); padding: .4rem .55rem; font-family: var(--mono);
  font-size: var(--step--1); width: 100%;
}
input[type="date"]:focus-visible { outline: 2px solid var(--forest); outline-offset: 1px; }

/* Season values are typed, not dragged — they come off a measurement */
.field__hint { font-size: var(--step--2); color: var(--ink-3); font-family: var(--mono); }
.field__entry { display: flex; align-items: baseline; gap: .4rem; }
.field__entry input {
  flex: 1; min-width: 0; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .42rem .55rem; font-family: var(--mono); font-size: 1.05rem;
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.field__entry input:hover { border-color: var(--forest-light); }
.field__entry input:focus-visible { outline: 2px solid var(--forest); outline-offset: 1px; border-color: var(--forest); }
.field__unit { font-size: var(--step--1); color: var(--ink-3); flex: none; }

/* Out-of-bounds message. Hidden until a value is actually rejected. */
.field__err, .pcard__err {
  display: none; align-items: flex-start; gap: .35rem;
  font-size: var(--step--2); line-height: 1.4; color: var(--crit); font-weight: 600;
}
.field--err .field__err, .pcard--err .pcard__err { display: flex; }
.field--err .field__entry input { border-color: var(--crit); background: color-mix(in srgb, var(--crit) 7%, var(--surface)); }
.pcard--err { border-color: var(--crit); }
.pcard--err .pcard__val input { border-bottom-color: var(--crit); border-bottom-style: solid; }
.err-mark { flex: none; font-weight: 700; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: transparent; cursor: pointer; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: var(--line); border-radius: 2px; }
input[type="range"]::-moz-range-track { height: 3px; background: var(--line); border-radius: 2px; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--forest); border: 2px solid var(--surface); margin-top: -5.5px;
  box-shadow: 0 0 0 1px var(--forest);
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--forest);
  border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--forest);
}
input[type="range"]:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }

/* ---------------- Site parameter cards (hover for detail) ---------------- */
.paramgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: .8rem; }
.pcard {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .7rem .8rem .75rem;
  display: grid; gap: .3rem; align-content: start;
}
.pcard--changed { border-color: var(--forest-light); box-shadow: inset 3px 0 0 var(--forest); }
.pcard__top { display: flex; align-items: center; gap: .35rem; }
.pcard__label { font-size: var(--step--1); font-weight: 600; color: var(--ink-2); line-height: 1.25; }
.info {
  margin-left: auto; flex: none; width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--line); background: none; color: var(--ink-3);
  font-size: 9px; font-weight: 700; line-height: 1; cursor: help; padding: 0;
  display: grid; place-items: center;
}
.info:hover, .info:focus-visible { border-color: var(--forest); color: var(--forest); }
.info:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }

.pcard__val { display: flex; align-items: baseline; gap: .3rem; }
.pcard__val input {
  width: 100%; background: transparent; border: 0; border-bottom: 1px dashed var(--line);
  font-family: var(--mono); font-size: 1.12rem; font-weight: 600; letter-spacing: -.02em;
  padding: .1rem 0; font-variant-numeric: tabular-nums; min-width: 0;
}
.pcard__val input:hover { border-bottom-color: var(--forest-light); }
.pcard__val input:focus { outline: none; border-bottom-color: var(--forest); border-bottom-style: solid; }
.pcard__unit { font-size: var(--step--1); color: var(--ink-3); flex: none; }
.pcard__base { font-size: var(--step--2); color: var(--ink-3); font-family: var(--mono); }

/* Tooltip — shown on hover and on keyboard focus */
.tip {
  /* Matched to the card width so a right-column tooltip can never push the
     page into a horizontal scroll. */
  position: absolute; bottom: calc(100% + 8px); left: 0; width: 100%;
  background: var(--tip-bg); color: var(--tip-ink); border-radius: var(--radius);
  padding: .65rem .75rem; font-size: var(--step--1); line-height: 1.45;
  box-shadow: 0 10px 28px -10px rgba(0,0,0,.5); z-index: 30;
  opacity: 0; visibility: hidden; transform: translateY(3px);
  transition: opacity .13s ease, transform .13s ease, visibility .13s;
  pointer-events: none;
}
.pcard:hover .tip, .pcard:focus-within .tip { opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .tip { transition: none; } }
.tip__affects {
  display: block; margin-top: .45rem; padding-top: .4rem;
  border-top: 1px solid color-mix(in srgb, var(--tip-ink) 20%, transparent);
  font-family: var(--mono); font-size: var(--step--2); opacity: .82;
}

/* ---------------- Day cards ---------------- */
.call { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 1rem; }
.daycard {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--forest); border-radius: var(--radius);
  padding: 1rem 1.05rem 1.1rem; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.daycard--today { border-top-color: var(--s-etc); }
.daycard__day { font-size: var(--step--1); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.daycard__date { font-size: var(--step--2); letter-spacing: .1em; font-weight: 700; color: var(--ink-3); font-family: var(--mono); }
.daycard__hours { display: flex; align-items: baseline; gap: .35rem; margin-top: .55rem; }
.daycard__hours b { font-family: var(--mono); font-size: 2.4rem; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.daycard__hours span { font-size: var(--step--1); color: var(--ink-3); font-weight: 600; }
.chip {
  font-size: var(--step--2); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .12rem .4rem; border-radius: 2px; align-self: flex-start; margin-top: .5rem;
}
.chip--low  { background: color-mix(in srgb, var(--s-et0) 18%, transparent); color: var(--s-et0); }
.chip--mod  { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.chip--high { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.chip--peak { background: color-mix(in srgb, var(--crit) 18%, transparent); color: var(--crit); }
.daycard__rows { margin-top: .85rem; padding-top: .7rem; border-top: 1px solid var(--line-soft); display: grid; gap: .28rem; }
.drow { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: var(--step--1); }
.drow span { color: var(--ink-3); }
.drow b { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------------- Chart ---------------- */
.chartbox { position: relative; width: 100%; height: 380px; }
.chartbox canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 640px) { .chartbox { height: 290px; } }
.legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: .8rem 1.05rem 0; }
.lg { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--step--1); color: var(--ink-2); cursor: pointer; user-select: none; padding: .15rem .1rem; background: none; border: 0; }
.lg:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.lg__sw { width: 15px; height: 3px; border-radius: 2px; flex: none; }
.lg[aria-pressed="false"] { opacity: .38; }
.lg[aria-pressed="false"] .lg__sw { background: var(--ink-3) !important; }

/* ---------------- Cascade ---------------- */
.cascade { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; }
.stage {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .9rem .95rem; display: flex; flex-direction: column; gap: .4rem;
  border-left: 3px solid var(--stage-c, var(--forest));
}
.stage__sym { font-family: var(--mono); font-size: var(--step-1); font-weight: 600; color: var(--stage-c, var(--forest)); }
.stage__name { font-size: var(--step--1); font-weight: 700; }
.stage__val { font-family: var(--mono); font-size: 1.45rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stage__desc { font-size: .72rem; color: var(--ink-3); line-height: 1.45; }
.stage__eq { font-family: var(--mono); font-size: var(--step--2); color: var(--ink-3); padding-top: .4rem; border-top: 1px dashed var(--line); word-break: break-word; }

/* ---------------- Table ---------------- */
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
th, td { padding: .48rem .65rem; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line-soft); }
th:first-child, td:first-child { text-align: left; }
thead th { font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; border-bottom: 1px solid var(--line); }
tbody td { font-family: var(--mono); font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--surface-2); }

/* ---------------- Prose ---------------- */
.prose { font-family: var(--serif); font-size: 1.02rem; line-height: 1.68; color: var(--ink-2); max-width: 66ch; display: grid; gap: .85rem; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose code { font-family: var(--mono); font-size: .86em; background: var(--surface-2); padding: .08rem .28rem; border-radius: 2px; color: var(--ink); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.6rem 2.4rem; }

.banner {
  padding: .8rem 1rem; border-radius: var(--radius); font-size: var(--step--1);
  border: 1px solid var(--crit); background: color-mix(in srgb, var(--crit) 8%, var(--surface));
  color: var(--ink); margin-top: 1.2rem; display: none;
}
.banner--on { display: block; }
.banner code { font-family: var(--mono); }

.skeleton { color: var(--ink-3); font-size: var(--step--1); padding: 1.5rem 0; }
footer { padding-block: 2rem 3rem; color: var(--ink-3); font-size: var(--step--1); }