/* =============================================================================
 * live.css — Ops v4 Phase 3 · "On the day" and the Agency portal. A6 owns it.
 *
 * This file is deliberately SMALL. The kit (web/js/ops-v4/kit/) carries the
 * design and the four colours, and A6 does not restyle it — so what is left
 * here is only what inline styles cannot express: media queries, focus rings,
 * print, and reduced motion.
 *
 * NOTHING HERE MAY INTRODUCE A FIFTH STATUS COLOUR. The only colours below are
 * the kit's own four plus greys for structure.
 * ========================================================================== */

/* The four, repeated here ONLY so a reader of this file sees the same set the
   kit uses. Nothing below invents a colour outside them. */
.opsv4-live,
.opsv4-agency {
    --opsv4-done:    #009A42;
    --opsv4-needs:   #F59E0B;
    --opsv4-blocked: #DC2626;
    --opsv4-notyet:  #D1D5DB;
    font-family: Inter, Arial, sans-serif;
}

/* ── Touch targets ───────────────────────────────────────────────────────────
   The phone view is used one-handed, outdoors, in gloves. The kit's primary is
   56px; everything else on these two screens is at least 42px, and this is the
   backstop in case an inline style is ever lost. */
.opsv4-live button,
.opsv4-agency button {
    min-height: 42px;
    font-family: inherit;
}

/* ── Focus ───────────────────────────────────────────────────────────────────
   A visible ring on every control. Keyboard users on the agency portal are
   office staff at a desk, not an operative on a walkway, and they get nothing
   from a design that hides focus. */
.opsv4-live button:focus-visible,
.opsv4-agency button:focus-visible {
    outline: 3px solid var(--opsv4-done);
    outline-offset: 2px;
}

/* A blocked control still shows focus — in red, because the reason it cannot be
   pressed is the point. */
.opsv4-agency button[disabled]:focus-visible {
    outline-color: var(--opsv4-blocked);
}

/* ── The phone frame ─────────────────────────────────────────────────────────
   390px is the board's width. On anything narrower the frame simply fills the
   screen rather than scrolling sideways. */
.opsv4-live {
    max-width: 390px;
    margin: 0 auto;
}

@media (max-width: 420px) {
    .opsv4-live { max-width: 100%; }
    .opsv4-live > div:first-child { padding-left: 14px; padding-right: 14px; }
}

/* ── The agency board on a laptop, and on a phone ────────────────────────────
   The board is drawn at 1440px with a 520px right-hand column. Below 1000px the
   two panels stack, because an agency co-ordinator answering a 6am request is
   as likely to be on a phone as we are. */
@media (max-width: 1000px) {
    .opsv4-agency main { flex-direction: column; }
    .opsv4-agency main > section { width: 100%; flex-basis: auto; }
}

@media (max-width: 640px) {
    .opsv4-agency > div:first-child,
    .opsv4-agency main,
    .opsv4-agency h1 { padding-left: 16px; padding-right: 16px; }
    .opsv4-agency h1 { font-size: 26px; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────────
   The kit's sheet slides. Somebody who has asked their machine not to animate
   gets the same sheet with no transition — the surface is identical, only the
   movement goes. */
@media (prefers-reduced-motion: reduce) {
    .opsv4-live *,
    .opsv4-agency * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Print ───────────────────────────────────────────────────────────────────
   An agency co-ordinator printing the approved-hours panel to attach to an
   invoice should get the hours, not the buttons. */
@media print {
    .opsv4-live button,
    .opsv4-agency button { display: none; }
    .opsv4-live,
    .opsv4-agency { background: #FFFFFF; }
}

/* ── High contrast ───────────────────────────────────────────────────────────
   A dot is never the only carrier of meaning — every state dot in live.js also
   carries an aria-label and a title — but in forced-colours mode the dots lose
   their fill entirely, so they get a border to stay visible as shapes. */
@media (forced-colors: active) {
    .opsv4-live [aria-label] { border: 1px solid CanvasText; }
    .opsv4-agency button[disabled] { border: 2px dashed GrayText; }
}