/* Forecast mode card (web/forecast.js) */
.fc { --fc-asis: var(--red); --fc-save: var(--green); --fc-strat: var(--blue); }
.fc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.fc-head h2 { margin-bottom: 2px; }
.fc-head > div:first-child { max-width: 720px; }
.fc-ctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 4px; }
.fc-ctl label { font-weight: 600; color: var(--ink2); white-space: nowrap; }
.fc-ctl label b { font-size: 20px; color: var(--ink); margin-inline-start: 4px; }
.fc-ctl input[type="range"] { flex: 1 1 220px; min-width: 0; accent-color: var(--accent); height: 32px; }
.fc-legend { display: flex; gap: 16px; font-size: 13px; color: var(--ink2); margin-top: 6px; }
.fc-legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-inline-end: 6px; }
.fc-legend i.asis { background: var(--fc-asis); } .fc-legend i.save { background: var(--fc-save); }
.fc-svg { width: 100%; height: auto; display: block; margin: 4px 0 6px; }
.fc-grid { stroke: var(--line); stroke-width: 1; }
.fc-ax { fill: var(--ink3); font-size: 11px; font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.fc-band { stroke: none; opacity: .16; } .fc-band.asis { fill: var(--fc-asis); } .fc-band.save { fill: var(--fc-save); }
.fc-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; } .fc-line.asis { stroke: var(--fc-asis); } .fc-line.save { stroke: var(--fc-save); }
.fc-mark { stroke: var(--ink3); stroke-width: 1; stroke-dasharray: 3 3; }
.fc-dot { stroke: var(--surface); stroke-width: 2; } .fc-dot.asis { fill: var(--fc-asis); } .fc-dot.save { fill: var(--fc-save); }
.fc-sent { font-size: 16px; margin: 6px 0 10px; }
.fc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fc-stat { background: var(--soft); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; border-inline-start: 4px solid var(--c, var(--accent)); }
.fc-stat.asis { --c: var(--fc-asis); } .fc-stat.save { --c: var(--fc-save); } .fc-stat.kept { --c: var(--blue); }
.fc-l { font-size: 13px; color: var(--ink2); font-weight: 600; }
.fc-v { font-size: 24px; line-height: 1.2; }
.fc-r { font-size: 12px; color: var(--ink3); }
.fc-how { margin-top: 12px; font-size: 13px; color: var(--ink2); }
.fc-how summary { cursor: pointer; font-weight: 600; color: var(--accent-ink); }
.fc-how p { margin: 6px 0; }
@media (max-width: 640px) {
  .fc-stats { grid-template-columns: 1fr; }
  .fc-v { font-size: 20px; }
}
.fc-legend { flex-wrap: wrap; }
.fc-legend i.strat { background: var(--fc-strat); }
.fc-line.strat { stroke: var(--fc-strat); stroke-dasharray: 6 4; }
.fc-dot.strat { fill: var(--fc-strat); }
.fc-stat.strat { --c: var(--fc-strat); }
.fc-goal { stroke: var(--fc-strat); stroke-width: 1.5; opacity: .7; }
.fc-goal-t { fill: var(--blue-ink); font-size: 11px; font-weight: 600; font-family: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif; }
.fc-ctl .chips button.goal { border-color: var(--fc-strat); }

/* Aquifer countdown card (web/countdown.js) */
.cd { --cd-band: var(--blue); --cd-salt: var(--red); }
.cd-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; margin-top: 12px; }
.cd-area { background: var(--soft); border-radius: 10px; padding: 12px 16px; }
.cd-area h3 { margin: 0 0 6px; font-size: 16px; }
.cd-area p { margin: 6px 0; font-size: 14px; }
.cd-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.cd-big > span:first-child { flex-basis: 100%; color: var(--ink2); font-weight: 600; }
.cd-n { font-size: 44px; line-height: 1; color: var(--ink); }
.cd-u { font-size: 18px; font-weight: 600; }
.cd-big .fc-r { flex-basis: 100%; font-size: 13px; }
.cd-svg { width: 100%; height: auto; display: block; margin: 6px 0; }
.cd-axis { stroke: var(--ink3); stroke-width: 1; }
.cd-past { fill: var(--ink3); opacity: .35; }
.cd-band { fill: var(--cd-band); opacity: .35; }
.cd-mid { stroke: var(--cd-band); stroke-width: 3; }
.cd-salt { fill: var(--cd-salt); stroke: var(--surface); stroke-width: 2; }
.cd-ead { stroke: var(--amber, #E3A31A); stroke-width: 3; stroke-dasharray: 4 3; }
.cd-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0; }
.cd-row { background: var(--soft); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; border-inline-start: 4px solid var(--c, var(--accent)); }
.cd-row.strat { --c: var(--blue); } .cd-row.save { --c: var(--green); }
.cd-row b { font-size: 20px; }
.cd-salt-p { font-size: 14px; margin: 10px 0 6px; }
.cd-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--cd-salt); margin-inline-end: 6px; vertical-align: middle; }
.cd-miss { color: var(--ink2); border-inline-start: 3px solid var(--ink3); padding-inline-start: 8px; }
.cd-lens { border-inline-start: 3px solid var(--cd-salt); padding-inline-start: 8px; }
.cd-notes { margin: 6px 0 0; padding-inline-start: 18px; font-size: 13px; color: var(--ink2); }
.cd .fc-how ul { margin: 4px 0; padding-inline-start: 18px; }
@media (max-width: 640px) {
  .cd-grid, .cd-rows { grid-template-columns: 1fr; }
  .cd-n { font-size: 36px; }
}
.cd-legend { flex-wrap: wrap; gap: 6px 16px; }
.cd-legend i.band { background: var(--cd-band); opacity: .6; height: 8px; }
.cd-legend i.past { background: var(--ink3); opacity: .5; height: 8px; }
.cd-legend i.salt { background: var(--cd-salt); width: 10px; height: 10px; border-radius: 50%; }
.cd-legend i.ead { background: var(--amber); }

/* Emergency water reserve (web/reserve.js): log-scale day bars, shared layout with the countdown card */
.rv { --rv-stop: var(--blue); --rv-keep: var(--amber, #E3A31A); --rv-asr: var(--green); --rv-target: var(--ink3); }
.rv-of { flex-basis: 100%; font-size: 14px; color: var(--ink2); }
.rv-keep { margin: 6px 0; font-weight: 600; }
.rv-bars { margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.rv-bt { font-size: 12px; }
.rv-l { font-size: 13px; display: flex; flex-wrap: wrap; gap: 2px 8px; }
.rv-l span { color: var(--ink2); }
.rv-track { position: relative; height: 12px; background: var(--soft); border-radius: 6px; margin-top: 3px; }
.rv-fill { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--c); }
.rv-wh { position: absolute; top: 3px; bottom: 3px; background: var(--surface); opacity: .55; border-radius: 3px; }
.rv-tick2 { position: absolute; top: -3px; bottom: -3px; width: 3px; background: var(--rv-asr); border-radius: 2px; }
.rv-b.stop { --c: var(--rv-stop); } .rv-b.keep { --c: var(--rv-keep); } .rv-b.asr { --c: var(--rv-asr); } .rv-b.target { --c: var(--rv-target); }
.rv-axis { position: relative; height: 16px; font-size: 11px; color: var(--ink3); margin: 0 6px; }
.rv-axis span { position: absolute; transform: translateX(-50%); }
[dir="rtl"] .rv-axis span { transform: translateX(50%); }
.rv-farm { font-size: 14px; margin: 10px 0 6px; }
.rv-cav { font-size: 13px; }
.rv .fc-how ul { margin: 4px 0; padding-inline-start: 18px; }

/* Underground cross-section (web/section.js) */
.xs { --xs-sand: #E8D3A6; --xs-sat: #4F8FD0; --xs-fresh: #4F9FD8; --xs-brack: #7BA7A0; --xs-saline: #8C6A4F; --xs-rock: #B8B2A6; --xs-unk: #E4E8E6; --xs-hatchc: #B5BFBB; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .xs { --xs-sand: #5C4B2C; --xs-sat: #2D5F94; --xs-fresh: #2F77B0; --xs-brack: #3F6B64; --xs-saline: #5E4632; --xs-rock: #4B4740; --xs-unk: #1E2D2A; --xs-hatchc: #3A4F4A; } }
:root[data-theme="dark"] .xs { --xs-sand: #5C4B2C; --xs-sat: #2D5F94; --xs-fresh: #2F77B0; --xs-brack: #3F6B64; --xs-saline: #5E4632; --xs-rock: #4B4740; --xs-unk: #1E2D2A; --xs-hatchc: #3A4F4A; }
.xs-fig { margin: 10px 0 4px; }
.xs-svg { width: 100%; height: auto; display: block; font-family: inherit; }
.xs-t { font-size: 13px; font-weight: 600; fill: var(--ink2); }
.xs-l { font-size: 12.5px; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.xs-dim { fill: var(--ink2); }
.xs-n { font-size: 11px; fill: var(--ink2); }
.xs-zero, .xs-axis { stroke: var(--ink3); stroke-width: 1; }
.xs-sink { fill: var(--purple); } .xs-rise { fill: var(--green); opacity: .75; } .xs-nm { fill: var(--line); }
.xs-unsat { fill: var(--xs-sand); }
.xs-sat-stop { stop-color: var(--xs-sat); stop-opacity: .75; }
.xs-wtband { fill: var(--xs-sat); opacity: .25; }
.xs-wt { stroke: var(--blue); stroke-width: 3; }
.xs-unk-bg { fill: var(--xs-unk); } .xs-hatch { stroke: var(--xs-hatchc); stroke-width: 3; }
.xs-rock { fill: var(--xs-rock); opacity: .9; }
.xs-fresh { fill: var(--xs-fresh); } .xs-brack { fill: var(--xs-brack); } .xs-saline { fill: var(--xs-saline); }
.xs-ground { stroke: #6B5A3A; stroke-width: 3; }
.xs-pin { fill: var(--red); stroke: var(--surface); stroke-width: 1.5; }
.xs-break { fill: none; stroke: var(--ink2); stroke-width: 1.5; }
.xs-well { stroke: var(--ink); stroke-width: 2.5; } .xs-well.then { stroke-dasharray: 3 3; opacity: .7; }
.xs-wdot { fill: var(--ink); }
.xs-legend { flex-wrap: wrap; gap: 6px 14px; }
.xs-legend i { height: 10px !important; width: 14px !important; border-radius: 3px !important; }
.xs-k-sink { background: var(--purple); } .xs-k-rise { background: var(--green); } .xs-k-nm { background: var(--line); }
.xs-k-unsat { background: var(--xs-sand); } .xs-k-wt { background: var(--blue); height: 4px !important; }
.xs-k-fresh { background: var(--xs-fresh); } .xs-k-brack { background: var(--xs-brack); } .xs-k-saline { background: var(--xs-saline); }
.xs-k-rock { background: var(--xs-rock); }
.xs-k-unk { background: repeating-linear-gradient(45deg, var(--xs-unk) 0 3px, var(--xs-hatchc) 3px 5px); }
.xs-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; margin-top: 10px; }
.xs-grid h3 { margin: 0 0 6px; font-size: 16px; }
.xs-list { margin: 0; padding-inline-start: 18px; font-size: 14px; display: grid; gap: 4px; }
.xs-miss { background: var(--soft); border-radius: 10px; padding: 10px 14px; border-inline-start: 3px solid var(--ink3); }
.xs-falls { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 10px; font-size: 14px; }
.xs-fall { background: var(--blue-bg); color: var(--blue-ink); border-radius: 999px; padding: 3px 10px; }
.xs-cite { font-size: 12px; text-decoration: none; white-space: nowrap; }
.xs-grace { font-size: 14px; color: var(--ink2); margin: 10px 0 0; }
.xs .fc-how ul { margin: 4px 0; padding-inline-start: 18px; }
@media (max-width: 640px) { .xs-grid { grid-template-columns: 1fr; } .xs-l { font-size: 13px; } .xs-n { font-size: 11.5px; } }