:root {
    --px-navy-900: #102f49;
    --px-navy-800: #183a5a;
    --px-navy-700: #245071;
    --px-navy-100: #e8f0f5;
    --px-mist-100: #f1f4f6;
    --px-mist-200: #e3e9ed;
    --px-ink: #1e293b;
    --px-muted: #64748b;
    --px-line: #d8e0e6;
    --px-white: #ffffff;
    --px-danger: #b42318;
    --px-success: #177245;
    --px-warning: #9a6700;
    --px-control-radius: 8px;
    --px-card-radius: 14px;
    --px-focus-ring: 0 0 0 3px rgba(36, 80, 113, 0.24);
}

.px-btn {
    min-height: 44px; padding: .62rem 1rem; border: 1px solid transparent;
    border-radius: var(--px-control-radius); display: inline-flex;
    align-items: center; justify-content: center; gap: .45rem;
    font: inherit; font-size: .9rem; font-weight: 650; line-height: 1.15;
    text-decoration: none; cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease,
                color 140ms ease, box-shadow 140ms ease;
}
.px-btn--compact { min-height: 36px; padding: .42rem .75rem; font-size: .82rem; }
.px-btn--primary { background: var(--px-navy-800); color: var(--px-white); }
.px-btn--primary:hover { background: var(--px-navy-900); }
.px-btn--secondary { background: var(--px-white); color: var(--px-navy-800); border-color: #aebdc8; }
.px-btn--secondary:hover { background: #f7f9fa; border-color: #8ea2b0; }
.px-btn--quiet { background: transparent; color: var(--px-navy-700); }
.px-btn--quiet:hover { background: var(--px-mist-100); }
.px-btn--danger { background: var(--px-white); color: var(--px-danger); border-color: #e8b4ae; }
.px-btn:disabled, .px-btn[aria-disabled="true"] { opacity: .48; cursor: not-allowed; }
.px-btn:focus-visible, .px-choice:focus-visible, .px-chip:focus-visible,
.px-segment button:focus-visible, .px-field:focus-visible,
.px-icon-btn:focus-visible { outline: none; box-shadow: var(--px-focus-ring); }

/* The button owns the 44px hit target. Its visible surface is deliberately
   smaller, so selections look lighter without becoming difficult to tap. */
.px-choice {
    min-width: 0; max-width: 100%; min-height: 44px; padding: 4px 0;
    border: 0; background: transparent;
    color: var(--px-ink); font: inherit; cursor: pointer; text-align: left;
}
.px-choice__surface {
    min-height: 36px; max-width: 100%; padding: .45rem .75rem;
    border: 1px solid var(--px-line); border-radius: 999px;
    background: var(--px-white); display: inline-flex; align-items: center;
    line-height: 1.15; font-size: .86rem; font-weight: 560;
    white-space: normal; overflow-wrap: anywhere;
}
.px-choice[aria-pressed="true"] .px-choice__surface {
    background: var(--px-mist-100); border-color: #b9c7d0;
    color: var(--px-navy-700); font-weight: 650;
}
.px-choice:hover .px-choice__surface { border-color: #9dafba; }

.px-chip {
    min-height: 36px; padding: .4rem .72rem; border: 1px solid var(--px-line);
    border-radius: 999px; background: var(--px-white); color: var(--px-muted);
    font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.px-chip[aria-pressed="true"] { background: var(--px-mist-100); color: var(--px-navy-700); border-color: #b9c7d0; }

.px-segment { display: inline-grid; grid-auto-flow: column; padding: 3px; gap: 2px; border-radius: 10px; background: var(--px-mist-100); }
.px-segment button { min-height: 36px; padding: .4rem .8rem; border: 0; border-radius: 7px; background: transparent; color: var(--px-muted); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.px-segment button[aria-pressed="true"] { background: var(--px-white); color: var(--px-navy-800); box-shadow: 0 1px 3px rgba(16,47,73,.12); }

.px-field-wrap { display: grid; gap: .38rem; }
.px-field-label { color: var(--px-ink); font-size: .82rem; font-weight: 650; }
.px-field { width: 100%; min-height: 44px; padding: .62rem .75rem; border: 1px solid #b9c5ce; border-radius: var(--px-control-radius); background: var(--px-white); color: var(--px-ink); font: inherit; }
.px-field[aria-invalid="true"] { border-color: #d98077; }
.px-field-help { color: var(--px-muted); font-size: .76rem; line-height: 1.4; }
.px-field-error { color: var(--px-danger); }

/* Date fields, everywhere. iOS Safari lays the native date control out as its
   own widget: the declared width sizes the editor, and the author's padding
   and border are added OUTSIDE it, so `box-sizing: border-box` does not hold
   and a 100%-wide field runs past the card. Reproduced on wizard step 1 by
   forcing content-box layout: 26px past the field above it, which is that
   field's own 24px of side padding plus its border, and matches the overshoot
   in the iPad screenshot. Turning the native appearance off returns it to
   ordinary box layout, and hands back the author's white background so the
   field matches the text inputs above it instead of rendering as a grey
   system chip. The precached offline form carries the same safeguard in its
   own shell (`observation_offline.html`), which is where the shape was proved.
   `width` is deliberately not set here: the wizard declares it inline, and an
   inline declaration wins.

   On iOS the value also lives in a shadow element that does not exist until
   a date is picked, so the field stood about 21px empty and grew on
   selection, moving everything below it. Only a declared height makes the
   two states equal - padding cannot, because the empty state has no content
   to pad, and a floor alone still lets a tall value push past it. The height
   therefore belongs to the page, which already declares this field's width,
   padding and border (`.px-field` carries the system's 44px; the wizard's
   un-migrated field matches the 38px text fields beside it). What is shared
   is what the control does anywhere: the value carries the page's ink rather
   than the platform's blue, and is left-aligned for the same reason its
   background is white - iOS centres it, and it sits in a column of
   left-aligned fields. */
input[type="date"] {
    -webkit-appearance: none; appearance: none;
    box-sizing: border-box; min-width: 0; max-width: 100%;
    line-height: 1.2;
    background: var(--px-white);
    color: var(--px-ink); -webkit-text-fill-color: var(--px-ink);
}
/* iOS only - Chromium renders the value through ::-webkit-datetime-edit and
   ignores this, which is why the centring lives here rather than on the input:
   flex on the input itself pulls Chromium's calendar button in beside the text,
   because its editor and button share one shadow container. */
input[type="date"]::-webkit-date-and-time-value {
    margin: 0; line-height: 1.2; text-align: left;
    height: 100%; display: flex; align-items: center;
    color: var(--px-ink); -webkit-text-fill-color: var(--px-ink);
}
input[type="date"]::-webkit-datetime-edit { line-height: 1.2; }

.px-status { display: inline-flex; align-items: center; min-height: 26px; padding: .25rem .55rem; border-radius: 999px; background: var(--px-mist-100); color: var(--px-muted); font-size: .72rem; font-weight: 700; }
.px-status--success { background: #eaf5ef; color: var(--px-success); }
.px-status--warning { background: #fff5d9; color: var(--px-warning); }
.px-notice { padding: .9rem 1rem; border: 1px solid var(--px-line); border-left: 4px solid var(--px-navy-700); border-radius: 10px; background: var(--px-white); color: #334155; font-size: .88rem; line-height: 1.5; }
.px-banner { padding: .72rem 1rem; border-radius: 10px; background: var(--px-navy-800); color: var(--px-white); display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .86rem; }
.px-icon-btn { width: 44px; height: 44px; border: 1px solid var(--px-line); border-radius: var(--px-control-radius); background: var(--px-white); color: var(--px-navy-800); display: inline-grid; place-items: center; cursor: pointer; }

/* Production adapter: observation wizard controls. The existing labels remain
   the click targets, so input names, ordering and behaviour do not move. */
.wiz-card .pill-group { gap: .3rem .5rem; }
.wiz-card .pill-group input,
.wiz-card .seg-group input[type="radio"],
.wiz-card .sit-list input[type="radio"] {
    display: block; position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.wiz-card .pill {
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center;
    min-height: 44px; max-width: 100%; padding: 4px .75rem;
    border: 0; border-radius: 999px;
    background: transparent; color: var(--px-ink);
    font-size: .86rem; font-weight: 560; line-height: 1.15;
    white-space: normal; overflow-wrap: anywhere;
}
.wiz-card .pill::before {
    content: ""; position: absolute; z-index: -1;
    inset: 4px 0; border: 1px solid var(--px-line); border-radius: 999px;
    background: var(--px-white);
}
.wiz-card input:checked + .pill {
    background: transparent; color: var(--px-navy-700); font-weight: 650;
}
.wiz-card input:checked + .pill::before {
    background: var(--px-mist-100); border-color: #b9c7d0;
}
.wiz-card .pill:hover::before { border-color: #9dafba; }
.wiz-card input:focus-visible + .pill { outline: none; box-shadow: var(--px-focus-ring); }

.wiz-card .seg-group {
    padding: 3px; gap: 2px; border: 0; border-radius: 10px;
    background: var(--px-mist-100); overflow: visible;
}
.wiz-card .seg-opt {
    min-height: 44px; border: 0; border-radius: 7px;
    background: transparent; color: var(--px-muted);
}
.wiz-card .seg-opt:last-of-type { border: 0; }
.wiz-card .seg-group input[type="radio"]:checked + .seg-opt {
    background: var(--px-white); color: var(--px-navy-800);
    box-shadow: 0 1px 3px rgba(16,47,73,.12);
}
.wiz-card .seg-group input[type="radio"]:focus-visible + .seg-opt {
    outline: none; box-shadow: var(--px-focus-ring);
}

.wiz-card .iv-card {
    border: 1px solid var(--px-line); border-radius: var(--px-control-radius);
}
.wiz-card .iv-card.is-selected,
.wiz-card .iv-card.iv-no-intervention.is-selected {
    border-color: #b9c7d0; background: var(--px-mist-100);
}
.wiz-card .iv-card.iv-no-intervention {
    border-color: var(--px-line); background: var(--px-white);
}
.wiz-card .iv-card.iv-no-intervention .iv-main .iv-label {
    color: var(--px-ink); font-weight: 600;
}
.wiz-card .iv-info[aria-expanded="true"] {
    color: var(--px-navy-700); background: var(--px-mist-100);
}
.wiz-card .px-desc-toggle { color: var(--px-navy-700); }
.wiz-card .px-desc-toggle:hover { color: var(--px-navy-900); }

.wiz-card .sit-card { border: 1px solid var(--px-line); }
.wiz-card .sit-list input[type="radio"]:checked + .sit-card {
    border-color: #b9c7d0; background: var(--px-mist-100);
}
.wiz-card .sit-list input[type="radio"]:checked + .sit-card .sit-title {
    color: var(--px-navy-800);
}
/* A Performance Highlight remains a positive state; green keeps meaning here. */
.wiz-card .sit-card--positive { border-color: #bbf7d0; background: #f0fdf4; }
.wiz-card .sit-list input[type="radio"]:checked + .sit-card--positive {
    border-color: #15803d; background: #dcfce7;
}
.wiz-card .sit-list input[type="radio"]:focus-visible + .sit-card {
    outline: none; box-shadow: var(--px-focus-ring);
}

@media (prefers-reduced-motion: reduce) { .px-btn { transition: none; } }