/* =============================================================================
 * intake.css — OPSV4-INTAKE-V2 · section 1's briefing strip and the §3 controls
 * =============================================================================
 *
 * ⚠ TOKENS ONLY. This file is new, so tools/palette-guard/check-palette.mjs
 * freezes its colour set to NOTHING: one raw hex, rgb() or rgba() here fails the
 * whole web job. Every colour below is a var(--v3-*) from
 * web/css/lres-v3-tokens.css, which is the only place a colour may be born.
 * The guard strips block comments but NOT line comments, so there is no colour
 * value written anywhere in this file, including in prose.
 *
 * D9 names three of them specifically:
 *   the pin and the links   -> --v3-green
 *   the warning chip        -> --v3-amber
 *   the hospital tile       -> --v3-svc-rescue
 *
 * ── WHAT IS NOT HERE ────────────────────────────────────────────────────────
 * The `.ov4i-*` rules that existed before this build live in
 * web/css/ops-v4/steps-win.css and are NOT moved, re-declared or overridden.
 * This file only adds what the new markup needs, so nothing that works today
 * can be restyled by accident.
 *
 * ── CONTAINER QUERIES, NOT MEDIA QUERIES ────────────────────────────────────
 * The same intake form renders at three very different widths from ONE browser
 * window: a full page, a popout card (measured at ~1350px on a 1440px screen in
 * SPINE-002) and an in-page card (~1160px). A media query asks the WINDOW how
 * wide it is and gets the wrong answer twice out of three. So the strip sizes
 * itself against its own container, and the phone rule D3 asks for ("on phone
 * width the tiles stack into two columns") is a container rule.
 * ========================================================================== */

.ov4i-strip {
    display: flex;
    flex-direction: column;
    gap: var(--v3-gap-3);
    margin: var(--v3-gap-3) 0;
    padding: var(--v3-gap-3);
    border: 1px solid var(--v3-mist);
    border-radius: 10px;
    background: var(--v3-paper);
    container-type: inline-size;
    container-name: ov4istrip;
}

/* ── the wide map ───────────────────────────────────────────────────────── */

.ov4i-map { position: relative; }

.ov4i-mapimg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--v3-mist);
}

/* The "finding this site…" state. A shape where the map will be, so the strip
   does not jump when it arrives. */
.ov4i-mapskel {
    height: 140px;
    border-radius: 6px;
    background: var(--v3-paper);
    border: 1px solid var(--v3-mist);
}

.ov4i-mapnone {
    padding: var(--v3-gap-4);
    text-align: center;
    color: var(--v3-steel);
    font-size: var(--v3-s-sm, 13px);
    border: 1px dashed var(--v3-mist);
    border-radius: 6px;
}

/* ⚠ Not decoration. "Pin from the client record — not this site" is the whole
   difference between navigating to the right gate and the wrong one. */
.ov4i-maplabel {
    display: block;
    margin-top: var(--v3-gap-1);
    font-size: var(--v3-s-xs, 11px);
    color: var(--v3-steel);
}

.ov4i-maplinks {
    display: flex;
    align-items: center;
    gap: var(--v3-gap-3);
    margin-top: var(--v3-gap-2);
    flex-wrap: wrap;
}

/* D9 — the links use the green. */
.ov4i-link {
    color: var(--v3-green);
    font-weight: 600;
    text-decoration: none;
    font-size: var(--v3-s-sm, 13px);
    /* 44px of touch target without 44px of visible chrome. */
    padding: var(--v3-gap-2) 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}
.ov4i-link:hover,
.ov4i-link:focus-visible { text-decoration: underline; }

/* ── the six fact tiles ─────────────────────────────────────────────────── */

.ov4i-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--v3-gap-2);
}

/* D3: "On phone width the tiles stack into two columns." A CONTAINER width —
   the strip's own — because the same form is a popout and a page card.

   ⚠ THE NUMBERS ARE MEASURED, NOT GUESSED. A 390px phone viewport gives this
   container about 300px once the body padding, the section padding and the
   strip's own padding and border are taken off — so a 320px threshold put the
   phone in the ONE-column branch, which is not what D3 asks for.
   tools/proof/measure-intake2.mjs reads grid-template-columns off the live
   layout and fails on anything but 2 at 390px. */
@container ov4istrip (max-width: 700px) {
    .ov4i-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* One column only when two genuinely will not fit — a watch-sized container,
   not a phone. */
@container ov4istrip (max-width: 200px) {
    .ov4i-tiles { grid-template-columns: minmax(0, 1fr); }
}

.ov4i-tile {
    display: flex;
    flex-direction: column;
    gap: var(--v3-gap-1);
    padding: var(--v3-gap-3);
    border: 1px solid var(--v3-mist);
    border-radius: 6px;
    background: var(--v3-snow);
    min-width: 0;
}

.ov4i-tile.is-skel {
    min-height: 76px;
    background: var(--v3-paper);
    border-style: dashed;
}

.ov4i-tiletitle {
    font-size: var(--v3-s-xs, 11px);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--v3-steel);
}

.ov4i-tilefig {
    font-size: var(--v3-s-lg, 18px);
    line-height: 1.2;
    color: var(--v3-ink);
    /* A hotel or hospital name is long and must not push the grid wider than
       the cell it lives in — wrap it, never scroll the page sideways. */
    overflow-wrap: anywhere;
}

.ov4i-tilectx {
    font-size: var(--v3-s-xs, 11px);
    color: var(--v3-steel);
    overflow-wrap: anywhere;
}

/* D4: the green "→ …" line saying where the figure feeds. */
.ov4i-tilefeed {
    font-size: var(--v3-s-xs, 11px);
    color: var(--v3-green);
    font-weight: 600;
}

.ov4i-tilebtn {
    align-self: flex-start;
    border: 1px solid var(--v3-green);
    background: transparent;
    color: var(--v3-green);
    border-radius: 6px;
    padding: var(--v3-gap-1) var(--v3-gap-3);
    /* 40px, measured. 32 looked right and was not. */
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    font-size: var(--v3-s-xs, 11px);
    font-weight: 600;
    cursor: pointer;
}
.ov4i-tilebtn:hover { background: var(--v3-ov4-ok-bed); }

/* D9 — the hospital tile is the rescue colour, because that is what it is for.
   ⚠ Keyed on a modifier the renderer actually EMITS (`.ov4i-tile.is-hospital`).
   An earlier draft used a :has() selector over a class nothing wrote, which
   binds to nothing — a decision that looks shipped and is not. */
.ov4i-tile.is-hospital { border-color: var(--v3-svc-rescue); }
.ov4i-tile.is-hospital .ov4i-tiletitle { color: var(--v3-svc-rescue); }

/* ── the rule chips ─────────────────────────────────────────────────────── */

.ov4i-stripchips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v3-gap-2);
    align-items: center;
}

.ov4i-chipi,
.ov4i-chipw {
    display: inline-flex;
    align-items: baseline;
    gap: var(--v3-gap-1);
    padding: var(--v3-gap-1) var(--v3-gap-2);
    border-radius: 999px;
    font-size: var(--v3-s-xs, 11px);
    border: 1px solid var(--v3-mist);
    color: var(--v3-steel);
    background: var(--v3-snow);
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* D9 — the warning chip uses the amber. It quotes its evidence in the <small>,
   because there is no Cr(VI) flag in the schema and a chip that cannot say
   where it got that is an assertion rather than a warning. */
.ov4i-chipw {
    border-color: var(--v3-amber);
    color: var(--v3-amber);
    font-weight: 600;
}
.ov4i-chipw small { font-weight: 400; opacity: .85; }

/* ── D1 · the search result rows ────────────────────────────────────────── */

.ov4i-optrow {
    display: flex;
    align-items: center;
    gap: var(--v3-gap-3);
    width: 100%;
    text-align: left;
    /* 40px minimum target, and a row with a 80px thumbnail comfortably clears it. */
    min-height: 48px;
    padding: var(--v3-gap-2);
}

.ov4i-thumb {
    flex: 0 0 auto;
    width: 60px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--v3-mist);
    background: var(--v3-paper);
}

/* "No pin yet" — a tile that says what is missing, not a broken image and not a
   grey rectangle. Picking the site is what fixes it, which is worth knowing. */
.ov4i-thumb.is-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--v3-s-xs, 11px);
    line-height: 1.1;
    color: var(--v3-steel);
    border-style: dashed;
    padding: var(--v3-gap-1);
}

.ov4i-optrow .ov4i-optbody { min-width: 0; flex: 1 1 auto; }
.ov4i-optname { display: block; overflow-wrap: anywhere; }

.ov4i-fw {
    flex: 0 0 auto;
    padding: var(--v3-gap-1) var(--v3-gap-2);
    border-radius: 999px;
    font-size: var(--v3-s-xs, 11px);
    font-weight: 600;
    color: var(--v3-green);
    border: 1px solid var(--v3-green);
}

.ov4i-opt.is-active {
    outline: 2px solid var(--v3-green);
    outline-offset: -2px;
}

/* ── the §3 controls ────────────────────────────────────────────────────── */

.ov4i-select,
.ov4i-stepper,
.ov4i-search1,
.ov4i-otherbox,
.ov4i-madd {
    /* 40px, measured — SPINE-002 found a 38px input exactly this way. */
    min-height: 40px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.ov4i-otherbox { margin-top: var(--v3-gap-1); }

.ov4i-ticks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v3-gap-2) var(--v3-gap-3);
}

.ov4i-tickitem,
.ov4i-toggleopt {
    display: inline-flex;
    align-items: center;
    gap: var(--v3-gap-1);
    min-height: 40px;
    font-size: var(--v3-s-sm, 13px);
    cursor: pointer;
}

.ov4i-tickother { flex: 1 1 100%; gap: var(--v3-gap-2); }
.ov4i-othertext { white-space: nowrap; flex: 0 0 auto; }
.ov4i-tickother .ov4i-otherbox { margin-top: 0; flex: 1 1 auto; }

.ov4i-toggle {
    display: inline-flex;
    gap: var(--v3-gap-3);
    flex-wrap: wrap;
}

.ov4i-multi {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v3-gap-1);
    align-items: center;
}

.ov4i-mchip {
    display: inline-flex;
    align-items: center;
    gap: var(--v3-gap-1);
    /* The chip is as tall as the 40px remove button inside it. */
    min-height: 40px;
    padding: var(--v3-gap-1) 0 var(--v3-gap-1) var(--v3-gap-2);
    border-radius: 999px;
    border: 1px solid var(--v3-mist);
    font-size: var(--v3-s-xs, 11px);
    background: var(--v3-snow);
    max-width: 100%;
    overflow-wrap: anywhere;
}

.ov4i-mx {
    border: 0;
    background: transparent;
    color: var(--v3-steel);
    cursor: pointer;
    /* ⚠ 40px, measured, and the chip grows to match. A 24px × looked
       proportionate and measured as a target nobody with large fingers can hit;
       the × GLYPH is still small, which is what "proportionate" actually meant. */
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: var(--v3-s-sm, 13px);
}
.ov4i-mx:hover { color: var(--v3-ink); }

.ov4i-madd { flex: 1 1 10ch; min-width: 10ch; }

.ov4i-cellwrap { display: block; min-width: 0; }
.ov4i-cellblank { display: block; }

.ov4i-steppernote { display: block; }

/* The amber "overridden" tag on Days on site, and D7's Cr(VI) RPE prompt. Both
   are prompts: neither blocks anything, and neither is the only carrier of its
   meaning — each one also says its word in text. */
.ov4i-warn {
    display: block;
    margin-top: var(--v3-gap-1);
    font-size: var(--v3-s-xs, 11px);
    color: var(--v3-amber);
    font-weight: 600;
}

.ov4i-field.is-overridden .ov4i-stepper { border-color: var(--v3-amber); }

/* ── the quick-pick rows (hotels, contracts) ────────────────────────────── */

.ov4i-picks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--v3-gap-2);
    margin-top: var(--v3-gap-2);
}

.ov4i-pickslabel {
    font-size: var(--v3-s-xs, 11px);
    color: var(--v3-steel);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ov4i-pick {
    border: 1px solid var(--v3-mist);
    background: var(--v3-snow);
    color: var(--v3-ink);
    border-radius: 6px;
    padding: var(--v3-gap-1) var(--v3-gap-2);
    min-height: 40px;
    font-size: var(--v3-s-sm, 13px);
    cursor: pointer;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.ov4i-pick small { color: var(--v3-steel); margin-left: var(--v3-gap-1); }
.ov4i-pick:hover { border-color: var(--v3-green); }
.ov4i-pick.is-on {
    border-color: var(--v3-green);
    color: var(--v3-green);
    font-weight: 600;
}

/* ── the collapsible "Site details" group ───────────────────────────────── */

.ov4i-details { margin-top: var(--v3-gap-2); }

.ov4i-summary {
    cursor: pointer;
    min-height: 40px;
    display: flex;
    align-items: center;
    font-size: var(--v3-s-sm, 13px);
    font-weight: 600;
    color: var(--v3-ink);
}

/* ── wide content never scrolls the page sideways ───────────────────────── */

.ov4i-strip,
.ov4i-tiles,
.ov4i-stripchips { max-width: 100%; min-width: 0; }

/* ── the client row's second action ─────────────────────────────────────────
   "Show its N sites" — the narrow that clicking a client row used to do
   implicitly. It is a SEPARATE button, offered only when N is not zero, so a
   client with no sites never shows an action that does nothing. */

.ov4i-showsites {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--v3-gap-2) var(--v3-gap-2) var(--v3-gap-2) 76px;
    min-height: 40px;
    border: 0;
    border-bottom: 1px solid var(--v3-mist);
    background: transparent;
    color: var(--v3-green);
    font-size: var(--v3-s-xs, 11px);
    font-weight: 600;
    cursor: pointer;
}
.ov4i-showsites:hover { background: var(--v3-paper); }

/* ── the save confirmation ──────────────────────────────────────────────────
   A save that redrew an identical form read as a dead button. The form says so
   itself rather than depending on a caller passing an onSaved callback — two
   of the three callers do not. */

.ov4i-saved {
    font-size: var(--v3-s-sm, 13px);
    font-weight: 600;
    color: var(--v3-green);
}