/* lane v1.45.0 -- El Nino drinking-water calculator (water.html). Uses the main.css tokens only; names no typeface. */
.wc-hero{padding-bottom:48px}
.wc-wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:32px;align-items:start}
@media(max-width:880px){.wc-wrap{grid-template-columns:1fr}}
.wc-inputs{display:grid;gap:22px;min-width:0}
.wc-group{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:18px 18px 20px;margin:0;min-width:0}
.wc-group legend{padding:0 8px;margin-left:-8px;font-weight:600;color:var(--head);font-size:1rem}
.wc-presets{display:flex;flex-wrap:wrap;gap:8px}
.wc-presets .btn{min-height:44px;padding:8px 14px;font-size:.93rem}
/* Selected state (Ryan 2026-10-14: "buttons ... should be highlighted when selected"). Stronger than hover on purpose:
   a deeper sun tint, a 2 px sun ring, white text and a tick badge on the corner, so a selected control never reads like
   a hovered one. QA r1: nothing that changes size (no bold, the tick sits outside the text flow), so choosing a
   button never re-wraps the row under the visitor's finger; the tick is silent to screen readers. */
.wc-presets .btn,.wc-seg-opt span{position:relative}
.wc-presets .btn[aria-pressed="true"],.wc-presets .btn[aria-pressed="true"]:hover,
.wc-seg-opt input:checked+span,.wc-cook:has(input:checked){
  background:rgba(247,179,43,.22);border-color:var(--sun);box-shadow:inset 0 0 0 1px var(--sun);color:var(--head)}
.wc-presets .btn[aria-pressed="true"]::after,.wc-seg-opt input:checked+span::after{content:"\2713";content:"\2713" / "";position:absolute;top:-7px;right:-7px;
  width:18px;height:18px;border-radius:50%;background:var(--sun);color:var(--void);font-size:11px;font-weight:700;line-height:18px;
  text-align:center;pointer-events:none}
/* touch screens keep :hover after a tap; there the sun ring belongs to the selected state alone (QA r1 MINOR-2) */
/* Windows high-contrast: the fill disappears, so a thicker border carries the selected state (QA r2 NIT-4) */
@media (forced-colors:active){
  .wc-presets .btn[aria-pressed="true"],.wc-seg-opt input:checked+span,.wc-cook:has(input:checked){border:3px solid Highlight}
}
@media (hover:none){
  .wc-presets .btn.quiet:hover:not([aria-pressed="true"]){background:transparent;border-color:var(--line);color:var(--ink)}
}

.wc-people{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
@media(max-width:560px){.wc-people{grid-template-columns:1fr}}
.wc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;border-bottom:1px solid var(--line)}
.wc-row label{font-size:.95rem;color:var(--ink);line-height:1.25}
.wc-age{display:block;font-size:.8rem;color:var(--muted);font-weight:400}
.wc-step{display:flex;align-items:center;gap:4px;flex:none}
.wc-step input{width:56px;min-height:44px;padding:6px 4px;text-align:center;-moz-appearance:textfield;appearance:textfield}
.wc-step input::-webkit-outer-spin-button,.wc-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wc-btn{width:44px;height:44px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--inset);
  color:var(--ink);font-size:1.25rem;line-height:1;cursor:pointer;font-family:var(--font-body)}
@media (hover:hover){.wc-btn:hover{border-color:var(--sun);color:var(--sun)}}

.wc-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.wc-seg-opt{position:relative;display:block;cursor:pointer}
.wc-seg-opt input{position:absolute;opacity:0;width:1px;height:1px}
.wc-seg-opt span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:8px 10px;
  border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--inset);color:var(--ink);font-weight:500}
.wc-seg-opt input:focus-visible+span{outline:2.5px solid var(--sun);outline-offset:2px}
.wc-work input{max-width:140px}

.wc-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wc-two legend{grid-column:1/-1}
@media(max-width:560px){.wc-two{grid-template-columns:1fr}}
.wc-cook{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;min-height:44px;cursor:pointer;color:var(--ink);
  border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--inset);padding:11px 12px}
.wc-cook:has(input:focus-visible){outline:2.5px solid var(--sun);outline-offset:2px}
.wc-cook input{width:20px;height:20px;margin-top:3px;flex:none}

.wc-result{position:sticky;top:16px;background:var(--surface);border:1px solid var(--sun);border-radius:var(--radius);
  padding:22px;box-shadow:0 0 34px rgba(247,179,43,.12)}
@media(max-width:880px){.wc-result{position:static}}
.wc-result-h{margin:0 0 4px;font-size:1rem;font-family:var(--font-body);color:var(--ink-2);font-weight:500;letter-spacing:0}
.wc-big{margin:0;line-height:1.1;color:var(--head)}
#wc-big{font-family:var(--font-head);font-size:3.4rem;color:var(--sun);font-weight:600}
.wc-big-unit{font-size:1.15rem;font-weight:600}
.wc-big-days{margin:2px 0 14px;color:var(--ink-2)}
.wc-compare{margin-top:12px}

.wc-narrow{max-width:760px}
.wc-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.wc-table{border-collapse:collapse;width:100%;min-width:380px;font-size:.93rem;margin:14px 0}
.wc-table th,.wc-table td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.wc-table thead th{background:var(--inset);color:var(--head)}
.wc-table tbody th{font-weight:500;color:var(--ink)}
.wc-table tbody tr:nth-child(even){background:rgba(255,255,255,.018)}
.wc-table .wc-age{display:inline;margin-left:4px}
.wc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wc-work[hidden],.wc-empty[hidden]{display:none}
/* phone answer bar (hidden on wide screens, where the card is sticky beside the inputs) */
.wc-dock{display:none}
@media(max-width:880px){
  .wc-dock.on{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:50;align-items:center;gap:6px;flex-wrap:wrap;
    min-height:52px;padding:10px 16px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--sun);
    color:var(--head);text-decoration:none;box-shadow:0 8px 28px rgba(0,0,0,.55)}
  .wc-dock b{color:var(--sun);font-size:1.3rem}
  .wc-dock.on{flex-wrap:nowrap;white-space:nowrap;min-height:48px;padding:8px 14px;font-size:.95rem}
  .wc-dock-go{margin-left:auto;font-size:.82rem;color:var(--ink-2)}
  body.wc-docked{padding-bottom:76px}
  html:has(body.wc-docked){scroll-padding-bottom:80px}
}
@media(max-width:880px){
  .wc-dock.on{overflow:hidden}
  .wc-dock #wc-dock-u{overflow:hidden;text-overflow:ellipsis;min-width:0}
}
@media(max-width:480px){.wc-dock-go{display:none}}