/* clear-pool.
 *
 * Pure owns the primitives -- pure-form, pure-input-1, pure-button, pure-button-primary -- and
 * this file owns only what Pure has no concept of: page layout, the status tones, the villa list,
 * the to-do rows, the completion sheet.
 *
 * One tone vocabulary runs through all of it: ok / warn / critical / idle. The engine's word
 * 'attention' is mapped to 'warn' in js/format.js so the dots, card edges, sub-lines and pills
 * cannot drift apart.
 */

:root {
        --bg: #f2f6f9;
        --surface: #fff;
        --ink: #12212b;
        --muted: #5d7280;
        --line: #dbe5ec;
        --brand: #0078e7;
        --ok: #1a7f4b;
        --warn: #b26a00;
        --crit: #c0392b;
      }
      * { box-sizing: border-box; }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font: 16px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
        -webkit-text-size-adjust: 100%;
      }
      .phone { max-width: 540px; margin: 0 auto; padding: 0 14px 56px; }

      /* ---- sticky head: the villa and Test the water, always reachable ---- */
      .sticky {
        position: sticky; top: 0; z-index: 5;
        background: var(--bg);
        margin: 0 -14px; padding: 0 14px;
        box-shadow: 0 1px 0 var(--line);
      }
      .bar { display: flex; align-items: center; gap: 10px; padding: 12px 0 8px; }
      .bar h1 { flex: 1; min-width: 0; margin: 0; font-size: 1.2rem; }
      .bar .sub {
        display: block; font-size: .8rem; font-weight: 400; color: var(--muted);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .bar .sub.tone-critical { color: var(--crit); font-weight: 600; }
      .bar .sub.tone-warn { color: var(--warn); font-weight: 600; }
      .bar button { margin: 0; }
      /* Back lives on the left; it keeps its space when hidden so the title never shifts. */
      .back { flex: none; visibility: hidden; padding: .4em .7em; }
      .back.on { visibility: visible; }

      /* Language is a flag, not a code. Inline SVG so it renders the same on every
         platform -- emoji flags silently fall back to letters on Windows. */
      .flag {
        flex: none; width: 42px; height: 30px; padding: 0;
        border: 1px solid var(--line); border-radius: 7px; background: #fff;
        display: grid; place-items: center; cursor: pointer; overflow: hidden;
      }
      .flag svg { width: 30px; height: 20px; display: block; border-radius: 2px; }
      .flag:hover { border-color: var(--brand); }

      /* ---- the action menu: top right, one entry per thing you can do to the pool ---- */
      .menu { position: relative; flex: none; }
      .menubtn { padding: .32em .62em; font-size: 1.15rem; line-height: 1; }
      .menu-list {
        position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
        margin: 0; padding: 5px; list-style: none; min-width: 214px;
        background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
        box-shadow: 0 10px 26px rgba(18, 33, 43, .18);
      }
      .menu-list[hidden] { display: none; }
      .menu-list button {
        display: block; width: 100%; margin: 0; padding: 10px 11px;
        border: 0; border-radius: 7px; background: none;
        font: inherit; font-size: .92rem; color: inherit; text-align: left; cursor: pointer;
      }
      .menu-list button:hover, .menu-list button:focus-visible { background: #eef4f8; }

      h2.sec {
        margin: 20px 0 6px; font-size: .72rem; font-weight: 800;
        letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
      }
      .card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
      ul.list { margin: 0; padding: 0; list-style: none; }
      ul.list > li { border-top: 1px solid var(--line); }
      ul.list > li:first-child { border-top: 0; }

      /* ---------------------------------------------------------- villa rows -- */
      .villa-btn {
        appearance: none; width: 100%; margin: 0; padding: 13px 12px;
        display: flex; align-items: center; gap: 11px;
        background: var(--surface); border: 0; font: inherit; color: inherit;
        text-align: left; cursor: pointer;
      }
      .villa-btn:hover { background: #f7fafc; }
      .villa-btn:active { background: #eef4f8; }
      .v-main { flex: 1; min-width: 0; }
      .v-name { display: block; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
      .v-next {
        display: block; font-size: .84rem; color: var(--muted);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .v-next.tone-critical { color: var(--crit); font-weight: 600; }
      .v-next.tone-warn { color: var(--warn); font-weight: 600; }
      .v-meta {
        flex: none; text-align: right; font-size: .74rem; color: var(--muted);
        font-variant-numeric: tabular-nums; line-height: 1.35;
      }
      .v-when { display: block; font-size: .78rem; font-weight: 600; }
      .v-when.overdue { color: var(--crit); }
      .chev { flex: none; color: #b8c8d4; font-size: 1.3rem; line-height: 1; }

      .dot { flex: none; width: 9px; height: 9px; border-radius: 999px; background: var(--muted); }
      .dot.ok { background: var(--ok); }
      .dot.warn { background: var(--warn); }
      .dot.critical { background: var(--crit); }
      .dot.idle { background: #c3d0d9; }

      /* ------------------------------------------------------------ now card -- */
      .now-card {
        padding: 16px 14px 14px;
        border: 1px solid var(--line); border-left: 4px solid var(--muted);
        border-radius: 12px; background: var(--surface);
      }
      .now-card.critical { border-left-color: var(--crit); }
      .now-card.warn { border-left-color: var(--warn); }
      .now-card.ok { border-left-color: var(--ok); }
      .kicker {
        margin: 0 0 4px; font-size: .7rem; font-weight: 800;
        letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
      }
      .now-card.critical .kicker { color: var(--crit); }
      .now-card.warn .kicker { color: var(--warn); }
      .now-title { margin: 0; font-size: 1.42rem; line-height: 1.2; letter-spacing: -.02em; }
      .now-dose {
        margin: 10px 0 0; padding: 9px 11px; border-radius: 9px;
        background: #f4f8fb; font-size: 1.02rem; font-weight: 700;
        font-variant-numeric: tabular-nums;
      }
      .now-body { margin: 10px 0 0; font-size: .89rem; color: var(--muted); }
      .now-note {
        margin: 10px 0 0; padding: 8px 10px; border-radius: 8px;
        background: #fdf0dd; color: #7a4a00; font-size: .83rem;
      }
      .commit {
        display: flex; align-items: center; gap: 7px;
        margin: 12px 0 0; font-size: .86rem; color: var(--brand); font-weight: 600;
      }
      .cta { display: flex; gap: 8px; margin-top: 14px; }
      .cta .big { flex: 1; padding: .75em 1em; font-size: 1rem; }
      .cta .pure-button { margin: 0; }

      /* Provenance strip: the point of the data model, made visible. */
      .prov {
        margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line);
        font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums;
      }
      .prov code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

      /* --------------------------------------------------------------- to-dos -- */
      .todo { position: relative; overflow: hidden; }
      .todo-actions { position: absolute; inset: 0; display: flex; justify-content: space-between; }
      .todo-actions span {
        display: flex; align-items: center; padding: 0 18px;
        color: #fff; font-weight: 700; font-size: .85rem;
      }
      .todo-actions .a-done { background: var(--ok); }
      .todo-actions .a-forgotten { background: var(--warn); }
      .todo-face {
        position: relative; display: flex; align-items: center; gap: 10px;
        padding: 12px; background: var(--surface);
        transition: transform .18s ease; touch-action: pan-y; cursor: grab;
      }
      .todo-face:active { cursor: grabbing; }
      .check {
        flex: none; width: 22px; height: 22px; padding: 0;
        border: 2px solid var(--line); border-radius: 6px; background: #fff;
        color: transparent; font-size: .8rem; line-height: 1;
      }
      .check.recheck { border-radius: 999px; border-color: var(--brand); color: var(--brand); }
      .check:hover { border-color: var(--brand); }
      .todo-label { flex: 1; min-width: 0; }
      .todo-label b { display: block; font-weight: 600; }
      .todo-label .sub { font-size: .78rem; color: var(--muted); }
      .todo-due {
        flex: none; font-size: .78rem; font-weight: 600; color: var(--muted);
        font-variant-numeric: tabular-nums;
      }
      .todo-due.overdue { color: var(--crit); }
      .todo-due.recheck { color: var(--brand); }
      .gated { display: flex; gap: 11px; padding: 11px 12px; opacity: .8; }
      .gated .lock { flex: none; width: 22px; text-align: center; color: var(--muted); }
      .gated .sub { font-size: .78rem; color: var(--muted); }

      /* -------------------------------------------------------------- history -- */
      .test { padding: 12px; }
      .test + .test { border-top: 1px solid var(--line); }
      .test-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
      .test-when { font-weight: 700; }
      .test-read { font-variant-numeric: tabular-nums; }
      /* Work logged by hand, with no reading behind it. Reads as part of the day, but is not a test. */
      .test.service-block .test-read { font-weight: 600; }

      /* Photos of the water, in the timeline. Square crops keep the row even and the tap huge. */
      .photos { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
      .photo { display: block; width: 96px; height: 96px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
      .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .pill {
        display: inline-block; padding: 1px 8px; border-radius: 999px;
        font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
      }
      .pill.ok { background: #e5f4ec; color: var(--ok); }
      .pill.warn { background: #fdf0dd; color: var(--warn); }
      .pill.critical { background: #fbe6e3; color: var(--crit); }
      .delta { margin: 6px 0 0; font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; }
      .diag { margin: 8px 0 0; font-size: .89rem; }
      .lines { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
      .lines li { display: flex; gap: 8px; font-size: .87rem; }
      .lines .mark { flex: none; width: 16px; text-align: center; color: var(--ok); font-weight: 700; }
      .lines li.forgotten { color: var(--warn); }
      .lines li.forgotten .mark { color: var(--warn); }
      .lines li.superseded { color: var(--muted); text-decoration: line-through; }
      .lines li.superseded .mark { color: var(--muted); text-decoration: none; }
      .extra { margin: 6px 0 0; font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }

      /* ----------------------------------------------------------------- form -- */
      .form { padding: 14px; }
      .field { display: grid; grid-template-columns: 1fr 50%; align-items: center; gap: 4px 10px; margin-bottom: 10px; }
      .field label { margin: 0; }
      .field .hint { grid-column: 1 / -1; font-size: .72rem; color: var(--muted); margin: 0; }
      .submit { width: 100%; margin: 14px 0 0; padding: .8em 1em; font-size: 1.05rem; }

      /* Photos are the one full-width field: a file control and a strip of thumbnails do not fit
         the label-beside-control grid the numbers use. */
      .media { margin-bottom: 10px; }
      .media > label { display: block; margin-bottom: 5px; }
      .media .hint { margin: 5px 0 0; font-size: .72rem; color: var(--muted); }
      .media input[type='file'] { font-size: .8rem; }
      .thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
      .thumb { position: relative; width: 74px; height: 74px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
      .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .thumb-rm {
        position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; padding: 0;
        border: 0; border-radius: 999px; background: rgba(18, 33, 43, .66); color: #fff;
        font-size: .95rem; line-height: 1; cursor: pointer;
      }

      .banner {
        margin: 0 0 14px; padding: 10px 12px; border-radius: 10px;
        background: #fbe6e3; color: #7c2318; font-size: .84rem;
      }
      .foot { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: .75rem; color: var(--muted); }
      .foot button { margin: 0; }
      /* The hint takes the slack, so the flag stays on the right. */
      .foot #hint { flex: 1; min-width: 0; }

      /* ------------------------------------------------------- the done sheet -- */
      /* Completing a step asks what actually went in. Bottom-anchored: it is reached with a
         thumb, one-handed, from the same place as everything else on this screen. */
      .sheet-back {
        position: fixed; inset: 0; z-index: 20; background: rgba(18, 33, 43, .45);
        display: grid; align-items: end;
      }
      .sheet {
        width: 100%; max-width: 540px; margin: 0 auto; background: var(--surface);
        border-radius: 14px 14px 0 0; padding: 16px 14px 20px;
        box-shadow: 0 -6px 24px rgba(18, 33, 43, .2);
      }
      .sheet h3 { margin: 0 0 3px; font-size: 1.08rem; }
      .sheet .adv { margin: 0 0 12px; font-size: .84rem; color: var(--muted); }
      .sheet .row { display: grid; grid-template-columns: 1fr 92px; gap: 8px; margin-bottom: 10px; }
      .sheet label { display: block; margin-bottom: 3px; font-size: .78rem; color: var(--muted); }
      .sheet .wide { grid-column: 1 / -1; }
      .sheet .actions { display: flex; gap: 8px; margin-top: 14px; }
      .sheet .actions .pure-button { flex: 1; margin: 0; padding: .75em 1em; }
      .sheet .hint { margin: 0 0 10px; font-size: .74rem; color: var(--muted); }

      /* a voided reading stays visible, struck through. Hiding it would make a correction
         look like it never happened. */
      .test.voided { background: #f8fafc; }
      .test.voided .test-when, .test.voided .test-read { color: var(--muted); text-decoration: line-through; }
      .void-note { margin: 7px 0 0; font-size: .78rem; color: var(--warn); }
      .test-actions { margin-top: 9px; }
      .test-actions .pure-button { margin: 0; padding: .28em .7em; font-size: .72rem; }
      .pool-meta { margin: 10px 0 0; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }

      /* ------------------------------------------------------- transient state -- */
      .loading { padding: 28px 4px; color: var(--muted); font-size: .88rem; }
      .pure-input-1.invalid { border-color: var(--crit); box-shadow: inset 0 0 0 1px var(--crit); }