/* Irrigation Trigger Tool – look A, the field sheet (PLAN.md D-08): a quiet workspace whose one memorable
   element is the horizontal soil-water bar. One colour per quantity (--q-*), everywhere. */
/* Public Sans, self-hosted (SIL Open Font License, fonts/OFL.txt): one variable file, latin subset, weights 100-900 */
@font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/public-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --page: #edf1f0;
    --sheet: #ffffff;
    --ink: #1b2a31;
    --muted: #5b6b70;
    --line: #d3dbda;
    --action: #2f6b3a;
    --alert: #8a1c1c;
    --q-fc: #0072b2;
    --q-awc: #56b4e9;
    --q-trig: #d55e00;
    --q-wp: #7a5230;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font: 400 16px/1.5 "Public Sans", system-ui, sans-serif;
    color: var(--ink);
    background: var(--page);
}
h1, h2, p { margin: 0; }
.d-none { display: none !important; }

.masthead {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    padding: 1rem 2rem;
    background: var(--sheet);
    border-bottom: 1px solid var(--line);
}
.masthead h1 { font-size: 1.25rem; font-weight: 700; }
.masthead p { color: var(--muted); }

/* The page reads map, steps, result (its order on a phone and for the keyboard); on wide screens the steps
   sit in the left column beside the map and the result */
.workspace {
    display: grid;
    grid-template-columns: 360px 1fr;
    align-items: start;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 1.5rem auto;
    padding: 0 2rem;
}

/* Steps */
.steps {
    grid-column: 1;
    grid-row: 1 / span 2;
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.step { padding: 1.25rem 1.5rem; }
.step + .step { border-top: 1px solid var(--line); }
.step h2 {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .75rem;
}
.step-n {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-size: .85rem;
}
.hint { color: var(--muted); font-size: .9rem; margin-bottom: .75rem; }
#cropDescription:empty { display: none; }
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .9rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
input[type=number], select {
    display: block;
    width: 100%;
    margin-top: .3rem;
    padding: .6rem .7rem;
    font: inherit;
    font-weight: 400;
    color: var(--ink);
    background: #fff;
    border: 1px solid #a9b6b4;
    border-radius: 6px;
}
.slider-head { display: flex; justify-content: space-between; }
.slider-head output { font-variant-numeric: tabular-nums; color: var(--action); }
input[type=range] { width: 100%; margin: .5rem 0 0; accent-color: var(--action); }
.slider-ends { display: flex; justify-content: space-between; font-weight: 400; font-size: .8rem; color: var(--muted); }

.btn-primary, .btn-secondary {
    display: block;
    width: 100%;
    padding: .8rem 1rem;
    font: inherit;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
}
.btn-primary { color: #fff; background: var(--action); border: 1px solid var(--action); }
.btn-secondary { margin-top: .6rem; color: var(--action); background: #fff; border: 1px solid var(--action); }
.btn-primary[aria-disabled="true"], .btn-secondary[aria-disabled="true"] { opacity: .65; cursor: progress; }  /* busy, still focusable */
:focus-visible { outline: 3px solid var(--q-fc); outline-offset: 2px; }

/* Typed-coordinate and download errors, at the control they belong to */
.coord-hint { margin: -.3rem 0 0; }
.field-error, .action-error { margin: -.5rem 0 .9rem; font-size: .9rem; color: var(--alert); }
.action-error { margin: .6rem 0 0; }
.field-error:empty, .action-error:empty { display: none; }
input[aria-invalid="true"] { border-color: var(--alert); }

/* Map and result */
.field { grid-column: 2; grid-row: 1; min-width: 0; }
#map { height: 440px; border: 1px solid var(--line); border-radius: 8px 8px 0 0; }
.map-hint {  /* touch: one finger scrolls the page, so a one-finger drag on the map says how to move it */
    position: absolute;
    z-index: 1000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: .5rem .8rem;
    font-size: .9rem;
    font-weight: 600;
    color: #fff;
    background: rgba(27, 42, 49, .85);
    border-radius: 6px;
    pointer-events: none;
}
.map-hint[hidden] { display: none; }
.location {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .5rem 1rem;
    font-size: .85rem;
    color: var(--muted);
    background: var(--sheet);
    border: 1px solid var(--line);
    border-top: 0;
}
.map-status { color: var(--ink); }
.map-status:empty { display: none; }
.map-actions { display: flex; gap: .5rem; margin-left: auto; }
.map-actions button {
    padding: .35rem .7rem;
    font: inherit;
    font-weight: 600;
    color: var(--action);
    background: #fff;
    border: 1px solid var(--action);
    border-radius: 6px;
    cursor: pointer;
}
.result {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    scroll-margin-top: 1rem;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem 2rem;
    padding: 1.5rem;
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.empty { color: var(--muted); }

/* A result belongs to the inputs it was computed from: named above it, faded once they change */
.result-for { grid-column: 1 / -1; font-size: .85rem; color: var(--muted); }
.result-for:empty { display: none; }
.stale-notice {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}
.stale-notice[hidden] { display: none; }
.stale-notice p { font-weight: 600; }
.btn-inline {
    padding: .35rem .8rem;
    font: inherit;
    font-weight: 700;
    color: var(--action);
    background: #fff;
    border: 1px solid var(--action);
    border-radius: 6px;
    cursor: pointer;
}
.result-actions { grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid var(--line); }
.result-actions .btn-secondary { display: inline-block; width: auto; margin: 0; padding-inline: 1.5rem; }
.result.is-stale .trigger, .result.is-stale #soilInfo, .result.is-stale .soil-head h2,
.result.is-stale .result-for { opacity: .4; }  /* the units selector stays clear: it still works */
.survey-note { margin-top: .6rem; font-size: .85rem; color: var(--muted); }
.coverage-note { margin-top: .9rem; font-size: .9rem; color: var(--q-wp); }

.readout-label { font-weight: 600; }
.readout-value {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--q-trig);
    font-variant-numeric: tabular-nums;
}
.readout-unit { font-size: .45em; margin-left: .2em; }
.readout-note { color: var(--muted); font-size: .9rem; }

/* Horizontal soil-water bar */
.gauge { margin-top: 2.5rem; padding-bottom: 2.6rem; }
.gauge-track { position: relative; height: 18px; background: #e3e0da; border-radius: 3px; }
.gauge-band { position: absolute; top: 0; bottom: 0; left: var(--from); right: calc(100% - var(--to)); background: var(--q-awc); opacity: .45; }
.gauge-fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--to); background: var(--q-awc); border-radius: 3px 0 0 3px; }
.gauge-mark { position: absolute; top: -8px; bottom: -8px; left: var(--at); width: 3px; margin-left: -1.5px; }
.gauge-mark span { position: absolute; white-space: nowrap; font-size: .8rem; transform: translateX(-50%); }
.mark-fc { background: var(--q-fc); }
.mark-fc span { bottom: calc(100% + .2rem); color: var(--q-fc); transform: translateX(calc(-100% + 3px)); }  /* ends at its mark: FC sits near the bar's right end */
.mark-trig { background: var(--q-trig); width: 4px; }
.mark-trig span { top: calc(100% + .2rem); color: var(--q-trig); }
.mark-wp { background: var(--q-wp); }
.mark-wp span { bottom: calc(100% + .2rem); color: var(--q-wp); }

.soil-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.soil-head h2 { font-size: 1.05rem; }
.soil-head select { width: auto; margin: 0; padding: .3rem .5rem; }
.values { margin: 0; }
.values div { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.values dt { color: var(--muted); }
.values dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.v-fc dd { color: var(--q-fc); }
.v-wp dd { color: var(--q-wp); }
.v-awc dd { color: #1f6f9b; }

.alert { color: var(--alert); }
.loading { display: flex; align-items: center; gap: .6rem; color: var(--muted); }
.spinner-border { display: inline-block; width: 1.4rem; height: 1.4rem; border: 3px solid var(--line); border-top-color: var(--action); border-radius: 50%; animation: spin .8s linear infinite; }
.visually-hidden { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; overflow: hidden; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner-border { animation: none; } }

/* Map-unit overlay control (Leaflet) */
.map-unit-controls { width: 10rem; padding: .5rem; background: #fff; border-radius: 6px; font-size: .85rem; }  /* fixed: the toggle must not move when its controls open */
.map-units-toggle { width: 100%; padding: .35rem .6rem; font: inherit; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--ink); border-radius: 4px; cursor: pointer; }
.map-units-toggle[aria-pressed="true"] { color: #fff; background: var(--ink); }
.map-units-opacity { display: flex; align-items: center; gap: .4rem; margin: .5rem 0 0; font-size: inherit; font-weight: 400; color: var(--muted); }
.map-units-opacity input { flex: 1; min-width: 0; margin: 0; }
.map-units-message { margin-top: .4rem; color: var(--muted); }
.map-units-message:empty { display: none; }
.map-unit-tooltip { background: transparent; border: 0; box-shadow: none; font-weight: 700; color: #fff; text-shadow: 0 0 3px #000; }

.foot { padding: 1.5rem 2rem 2.5rem; color: var(--muted); font-size: .85rem; text-align: center; }

@media (max-width: 900px) {
    .masthead { flex-direction: column; gap: .2rem; padding: 1rem; }
    .workspace { grid-template-columns: 1fr; gap: 1rem; padding: 0 1rem; margin-top: 1rem; }
    .field, .steps, .result { grid-column: auto; grid-row: auto; }  /* the page's own order: map, steps, result */
    #map { height: 320px; }
    .result { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.25rem; }
    .result-actions .btn-secondary { display: block; width: 100%; }
    .gauge-mark span { font-size: 0; }  /* values only on phones; the names are in Soil Information below */
    .gauge-mark span b { font-size: .85rem; }
}

/* Touch: every control at least 44px tall (Leaflet's own touch size is 30px) */
@media (pointer: coarse) {
    .map-actions button, .map-units-toggle, .btn-inline, .soil-head select { min-height: 44px; }
    .leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
    input[type=range] { height: 44px; margin-top: 0; }
}