/* ==========================================================================
   Console screens: Cases · Packages · Devices · SIMs
   One master/detail shell shared by the four screens that model the physical
   world of the service (a case, a package of two tablets, a tablet, a SIM).
   Tokens extend the fapc-* palette in responsive.css; DevExtreme widgets are
   used for inputs, buttons and dialogs only, and are re-skinned below so they
   read as part of the console (Plex, sentence case, 8px radii).

   Type scale: xs 11 · sm 12 · md 13 · lg 14 · xl 16 · h1 18 · h2 22
   Spacing:    4 · 8 · 12 · 16 · 24
   Badge tones: good / warn / bad = health · info = workflow stage · brand = case
   relationship (out with a family, needs a kit, family / patient side) · app = platform.
   ========================================================================== */

:root {
    --cx-ground: #f4f3f8;
    --cx-panel: #ffffff;
    --cx-ink: #221d2b;
    --cx-muted: #6f6a7a;
    --cx-faint: #7b7588;          /* the lightest text colour: 4.4:1 on white */
    --cx-line-faint: #a39db0;     /* decoration only: dashed borders, rail track, big glyphs */
    --cx-rule: #e2dfe9;
    --cx-rule-strong: #cfcadb;
    --cx-brand: #5b2d8e;
    --cx-brand-soft: #efe8f7;
    --cx-brand-ink: #3f1e66;
    --cx-brand-line: rgba(91, 45, 142, 0.35);
    --cx-good: #1f7a3f;
    --cx-good-soft: #e3f3e8;
    --cx-warn: #b45309;
    --cx-warn-soft: #fbeed9;
    --cx-bad: #b91c1c;
    --cx-bad-soft: #fde4e4;
    --cx-info: #086f83;
    --cx-info-soft: #dff4f8;
    --cx-grey-soft: #eceaf1;
    --cx-shadow: 0 1px 2px rgba(34, 29, 43, 0.06), 0 8px 24px -18px rgba(34, 29, 43, 0.25);
    --cx-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    --cx-sans: "IBM Plex Sans", "Segoe UI", Roboto, system-ui, sans-serif;

    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-md: 13px;
    --fs-lg: 14px;
    --fs-xl: 16px;
    --fs-h1: 18px;
    --fs-h2: 22px;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --cx-radius: 10px;
    --cx-radius-sm: 8px;
    --cx-topbar: 52px;            /* #topbar height (responsive.css) */
}

/* the welltab-v3 build strip is retired (it read as a warning bar); neutralise it on a build that still has it */
#branch-strip { display: none !important; }
body { padding-top: 0 !important; }
#topbar { top: 0 !important; }

/* ---- shell ---- */
.cx {
    font-family: var(--cx-sans);
    color: var(--cx-ink);
    display: grid;
    grid-template-columns: minmax(340px, 400px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    max-width: 1440px;
    margin: 0 auto;
    font-size: var(--fs-md);
}

.cx .spacer { flex: 1; }
.cx .dim { color: var(--cx-faint); }

.cx-list-pane {
    position: sticky;
    top: calc(var(--cx-topbar) + 12px);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--cx-topbar) - 24px);
    background: var(--cx-panel);
    border: 1px solid var(--cx-rule);
    border-radius: var(--cx-radius);
    box-shadow: var(--cx-shadow);
    overflow: hidden;
}

.cx-detail-pane { min-width: 0; }

.cx-list-head {
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    border-bottom: 1px solid var(--cx-rule);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    position: relative;
}

/* quiet reload: a thin brand bar sweeps the list head instead of the full-screen loader */
.cx-list-head::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cx-brand), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.2s;
}
.cx--busy .cx-list-head::after { opacity: 1; animation: cx-sweep 1s linear infinite; }
@keyframes cx-sweep { from { background-position: -40% 0; } to { background-position: 140% 0; } }

.cx-list-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
}

.cx-list-title h1 {
    font-size: var(--fs-h1);
    font-weight: 600;
    margin: 0;
    line-height: 1;
    letter-spacing: -0.01em;
}

.cx-list-title .cx-count {
    font-size: var(--fs-sm);
    color: var(--cx-muted);
    font-variant-numeric: tabular-nums;
    margin-left: -4px;
    align-self: end;
    padding-bottom: 1px;
}

.cx-list-tools {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    margin-left: auto;
}

.cx-list-tools > .cx-search { flex: 1; }
.cx-list-tools #cx-refresh .dx-button { width: 36px; min-width: 36px; }

.cx-list-body {
    overflow-y: auto;
    flex: 1;
    padding: 6px;
}

.cx-list-foot {
    padding: var(--sp-2) var(--sp-4);
    border-top: 1px solid var(--cx-rule);
    font-size: var(--fs-sm);
    color: var(--cx-muted);
    background: var(--cx-panel);
    border-radius: 0 0 var(--cx-radius) var(--cx-radius);
}

/* ---- chips (stage / status filters) ---- */
.cx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cx-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--cx-rule);
    background: var(--cx-panel);
    color: var(--cx-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    line-height: 1.5;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.cx-chip:hover { border-color: var(--cx-brand); color: var(--cx-brand); }
.cx-chip--on { background: var(--cx-brand); border-color: var(--cx-brand); color: #fff; }
.cx-chip .n { font-variant-numeric: tabular-nums; opacity: 0.8; font-weight: 500; }
.cx-chip--on .n { opacity: 0.9; }
.cx-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* active filter pill: shown beside a record, where the tiles and chips are hidden */
.cx-filterbar { display: none; }
.cx-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px 2px 10px;
    border-radius: 999px;
    background: var(--cx-brand);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.6;
}
.cx-pill .dx-icon-filter { font-size: 13px; opacity: 0.85; }
.cx-pill .x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    background: rgba(255, 255, 255, 0.18);
}
.cx-pill .x:hover { background: rgba(255, 255, 255, 0.35); }

/* ---- list rows (compact list beside a record) ---- */
.cx-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 3px var(--sp-3);
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--cx-radius-sm);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.12s, border-color 0.12s;
}

.cx-row:hover { background: var(--cx-ground); }
.cx-row--on { background: var(--cx-brand-soft); border-color: var(--cx-brand-line); }
.cx-row--on:hover { background: var(--cx-brand-soft); }

.cx-row .id {
    font-family: var(--cx-mono);
    font-weight: 600;
    font-size: var(--fs-lg);
    color: var(--cx-ink);
    white-space: nowrap;
}

.cx-row .who {
    font-size: var(--fs-lg);
    color: var(--cx-ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cx-row .sub {
    grid-column: 1 / 3;
    grid-row: 2;
    font-size: var(--fs-sm);
    color: var(--cx-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cx-row .end {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cx-row .age {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    font-size: var(--fs-sm);
    color: var(--cx-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cx-row .age--hot, .cx-table .age--hot { color: var(--cx-warn); font-weight: 600; }

.cx-empty {
    padding: 36px 16px;
    text-align: center;
    color: var(--cx-muted);
    font-size: var(--fs-lg);
}

/* ---- badges ---- */
.cx-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.6;
    background: var(--cx-grey-soft);
    color: var(--cx-muted);
    vertical-align: middle;
}

.cx-badge--brand { background: var(--cx-brand-soft); color: var(--cx-brand); }
.cx-badge--good { background: var(--cx-good-soft); color: var(--cx-good); }
.cx-badge--warn { background: var(--cx-warn-soft); color: var(--cx-warn); }
.cx-badge--bad { background: var(--cx-bad-soft); color: var(--cx-bad); }
.cx-badge--info { background: var(--cx-info-soft); color: var(--cx-info); }
.cx-badge--outline { background: transparent; border: 1px solid var(--cx-rule-strong); color: var(--cx-muted); }
/* platform: neutral, mono, so it never competes with health or stage */
.cx-badge--app { background: var(--cx-panel); border: 1px solid var(--cx-rule-strong); color: var(--cx-ink); font-family: var(--cx-mono); letter-spacing: 0; font-weight: 600; }
/* the two sides of one case: family filled, patient outlined, both in the brand purple */
.cx-badge--family { background: var(--cx-brand-soft); color: var(--cx-brand); }
.cx-badge--patient { background: var(--cx-panel); border: 1px solid var(--cx-brand-line); color: var(--cx-brand); }
.cx-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.cx-initials {
    display: inline-block;
    font-family: var(--cx-mono);
    font-weight: 700;
    letter-spacing: 1px;
    padding: 0 6px;
    border-radius: 6px;
    border: 1px dashed var(--cx-rule-strong);
    background: var(--cx-ground);
    color: var(--cx-ink);
    font-size: var(--fs-md);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.cx-initials:hover { border-color: var(--cx-brand); color: var(--cx-brand); background: var(--cx-brand-soft); }

.cx-mono { font-family: var(--cx-mono); font-size: 0.95em; }

/* ---- detail ---- */
.cx-detail-empty {
    background: var(--cx-panel);
    border: 1px dashed var(--cx-rule-strong);
    border-radius: var(--cx-radius);
    padding: 60px 24px;
    text-align: center;
    color: var(--cx-muted);
    font-size: var(--fs-lg);
}

.cx-detail-empty .big {
    font-size: 40px;
    color: var(--cx-line-faint);
    margin-bottom: 8px;
}

.cx-head {
    background: var(--cx-panel);
    border: 1px solid var(--cx-rule);
    border-radius: var(--cx-radius);
    box-shadow: var(--cx-shadow);
    padding: var(--sp-4) 20px;
    margin-bottom: 14px;
}

.cx-head-top {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.cx-head-top h2 {
    font-size: var(--fs-h2);
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.cx-head-top .name { font-size: var(--fs-xl); color: var(--cx-ink); }
.cx-head-top .spacer { flex: 1; }

.cx-head-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin-top: var(--sp-3);
}

.cx-kv {
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
    font-size: var(--fs-lg);
}

.cx-kv .k {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cx-faint);
}

.cx-kv .v { color: var(--cx-ink); font-weight: 500; }

/* one link style everywhere: brand, bold, a soft underline that firms up on hover */
.cx-link, .cx-kv .v a, .cx-field .v a, .cx-note a, .cx-empty a {
    color: var(--cx-brand);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px solid var(--cx-brand-line);
    transition: border-color 0.12s;
}
.cx-link:hover, .cx-kv .v a:hover, .cx-field .v a:hover, .cx-note a:hover, .cx-empty a:hover { border-bottom-color: var(--cx-brand); text-decoration: none; }
.cx-card h3 .cx-link { font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; }

/* stage rail */
.cx-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    margin-top: 18px;
    position: relative;
}

.cx-rail .step {
    position: relative;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--cx-faint);
    padding-top: 18px;
}

.cx-rail .step::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--cx-rule);
}

.cx-rail .step::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 50%;
    background: var(--cx-panel);
    border: 2px solid var(--cx-rule-strong);
    box-sizing: border-box;
}

.cx-rail .step:first-child::before { left: 50%; }
.cx-rail .step:last-child::before { right: 50%; }
.cx-rail .step--done { color: var(--cx-good); }
.cx-rail .step--done::before { background: var(--cx-good); }
.cx-rail .step--done::after { background: var(--cx-good); border-color: var(--cx-good); }
.cx-rail .step--now { color: var(--cx-warn); font-weight: 700; }
.cx-rail .step--now::before { background: linear-gradient(90deg, var(--cx-good) 0 50%, var(--cx-rule) 50%); }
.cx-rail .step--now::after { background: var(--cx-warn); border-color: var(--cx-warn); box-shadow: 0 0 0 4px var(--cx-warn-soft); }
.cx-rail .step--off { color: var(--cx-bad); font-weight: 600; }
.cx-rail .step--off::after { background: var(--cx-bad); border-color: var(--cx-bad); }
.cx-rail .step .when { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--cx-faint); margin-top: 2px; }

/* action bar */
.cx-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
    margin-top: var(--sp-4);
    padding-top: 14px;
    border-top: 1px solid var(--cx-rule);
}

.cx-actions .spacer { flex: 1; }
.cx-actions .hint { font-size: var(--fs-sm); color: var(--cx-muted); flex-basis: 100%; }
.cx-actions:empty { display: none; }

/* next-step card */
.cx-next {
    background: var(--cx-warn-soft);
    border: 1px solid rgba(180, 83, 9, 0.35);
    border-radius: var(--cx-radius);
    padding: var(--sp-4) 18px;
    margin-bottom: 14px;
}

.cx-next h3 {
    margin: 0 0 4px;
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--cx-warn);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cx-next p { margin: 0 0 12px; font-size: var(--fs-lg); color: var(--cx-ink); line-height: 1.5; }
.cx-next p:last-child { margin-bottom: 0; }

/* tones: brand = the normal "ready for you" step · warn = waited 3+ days · good = live · bad = denied · grey / muted = parked */
.cx-next--brand { background: var(--cx-brand-soft); border-color: var(--cx-brand-line); }
.cx-next--brand h3 { color: var(--cx-brand); }
.cx-next--warn { background: var(--cx-warn-soft); border-color: rgba(180, 83, 9, 0.35); }
.cx-next--warn h3 { color: var(--cx-warn); }
.cx-next--good { background: var(--cx-good-soft); border-color: rgba(31, 122, 63, 0.35); }
.cx-next--good h3 { color: var(--cx-good); }
.cx-next--bad { background: var(--cx-bad-soft); border-color: rgba(185, 28, 28, 0.35); }
.cx-next--bad h3 { color: var(--cx-bad); }
.cx-next--muted, .cx-next--grey { background: var(--cx-panel); border-color: var(--cx-rule); }
.cx-next--muted h3, .cx-next--grey h3 { color: var(--cx-muted); }

/* the button row under a next-step card: primary button, secondary text button, a hint that says what happens */
.cx-next .go { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: var(--sp-1); }
.cx-next .hint { font-size: var(--fs-sm); color: var(--cx-muted); line-height: 1.4; }
.cx-next .hint--warn { color: var(--cx-warn); }
.cx-next .hint:empty { display: none; }

.cx-next .fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.cx-next .fields label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cx-muted);
    margin-bottom: 4px;
}

.cx-next .kit-preview {
    font-size: var(--fs-md);
    color: var(--cx-muted);
    margin-top: 4px;
    line-height: 1.5;
}

/* cards / sections */
.cx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
    align-items: start;
}

.cx-card {
    background: var(--cx-panel);
    border: 1px solid var(--cx-rule);
    border-radius: var(--cx-radius);
    box-shadow: var(--cx-shadow);
    padding: var(--sp-4) 18px;
    min-width: 0;
}

.cx-card--wide { grid-column: 1 / -1; }

.cx-card h3 {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cx-muted);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.cx-card h3 .spacer { flex: 1; }

.cx-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px 18px;
}

.cx-field .k {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cx-faint);
    margin-bottom: 2px;
}

.cx-field .v {
    font-size: var(--fs-lg);
    color: var(--cx-ink);
    font-weight: 500;
    word-break: break-word;
    line-height: 1.45;
}

.cx-field .v.dim { color: var(--cx-faint); font-weight: 400; }

/* a note under a card body */
.cx-note { margin-top: 10px; font-size: var(--fs-md); color: var(--cx-muted); line-height: 1.5; }
.cx-note--warn { color: var(--cx-warn); }
.cx-note--bad { color: var(--cx-bad); }
.cx-note--good { color: var(--cx-good); }
.cx-note:first-child { margin-top: 0; }

/* the physical package: two tablet tiles */
.cx-tablets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-3);
}

.cx-tablet {
    border: 1px solid var(--cx-rule);
    border-radius: var(--cx-radius);
    padding: 12px 14px;
    background: var(--cx-ground);
    position: relative;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

.cx-tablet:hover { border-color: var(--cx-brand); background: var(--cx-panel); }

.cx-tablet .role {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cx-muted);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: 6px;
}

.cx-tablet .role .spacer { flex: 1; }

.cx-tablet .devid {
    font-family: var(--cx-mono);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--cx-ink);
}

.cx-tablet .devid::after {
    content: "→";
    margin-left: 6px;
    color: var(--cx-brand);
    font-weight: 400;
    opacity: 0;
    transition: opacity 0.12s;
}
.cx-tablet:hover .devid::after, .cx-tablet:focus-visible .devid::after { opacity: 1; }
.cx-tablet--empty .devid::after { content: none; }

.cx-tablet .line {
    font-size: var(--fs-md);
    color: var(--cx-muted);
    margin-top: 4px;
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    align-items: center;
}

/* the tablet this record is about, inside its package */
.cx-tablet--me { border-color: var(--cx-brand); box-shadow: inset 0 0 0 1px var(--cx-brand); background: var(--cx-panel); }
.cx-tablet--me .role { color: var(--cx-brand); }

.cx-tablet--empty {
    border-style: dashed;
    border-color: var(--cx-rule-strong);
    background: transparent;
    cursor: default;
    color: var(--cx-faint);
}

.cx-tablet--empty:hover { border-color: var(--cx-rule-strong); background: transparent; }

/* a kit's open slot (a dv_ placeholder, not a tablet): shown, not clickable */
.cx-tablet--slot { border-style: dashed; border-color: var(--cx-rule-strong); cursor: default; opacity: 0.85; }
.cx-tablet--slot:hover { border-color: var(--cx-rule-strong); background: var(--cx-ground); }
.cx-tablet--slot .devid::after { content: none; }

/* SIM chip */
.cx-sim {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 2px 4px;
    border-radius: 6px;
    border: 1px solid var(--cx-rule-strong);
    background: var(--cx-panel);
    font-family: var(--cx-mono);
    font-size: var(--fs-sm);
    color: var(--cx-ink);
    cursor: pointer;
    transition: border-color 0.12s;
}

.cx-sim:hover { border-color: var(--cx-brand); color: var(--cx-brand); }

.cx-sim .chip {
    width: 14px;
    height: 10px;
    border-radius: 2px;
    background: linear-gradient(135deg, #d9b45c, #b58a2a);
    display: inline-block;
}

.cx-sim.off { color: var(--cx-faint); }
.cx-sim.off .chip { filter: grayscale(1); opacity: 0.6; }

/* timeline */
.cx-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-2);
}

.cx-timeline li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    font-size: var(--fs-md);
    align-items: baseline;
}

.cx-timeline .mark {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cx-good);
    margin-top: 3px;
    justify-self: center;
}

.cx-timeline .mark.off { background: var(--cx-bad); }
.cx-timeline .mark.todo { background: var(--cx-panel); border: 2px solid var(--cx-rule-strong); box-sizing: border-box; }
.cx-timeline .what { color: var(--cx-ink); }
.cx-timeline .when { color: var(--cx-faint); font-size: var(--fs-sm); margin-left: 6px; }
.cx-timeline .todo-text { color: var(--cx-faint); }

/* audit / views list */
.cx-log {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--fs-md);
    display: grid;
    gap: 6px;
}

.cx-log li { display: flex; gap: 10px; align-items: baseline; }
.cx-log .t { color: var(--cx-faint); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 120px; }
.cx-log .u { font-weight: 600; white-space: nowrap; }
.cx-log .i { color: var(--cx-muted); overflow: hidden; text-overflow: ellipsis; }

/* link buttons inside cards */
.cx-link { font-size: var(--fs-md); }

/* ---- PHI banner: sits above the shell, styled with the console tokens ---- */
.cx-phi { max-width: 1440px; margin: 0 auto var(--sp-3); font-family: var(--cx-sans); }

.cx-phi .fapc-phi-banner {
    font-family: var(--cx-sans);
    background: var(--cx-panel);
    border: 1px solid var(--cx-rule);
    border-radius: var(--cx-radius);
    box-shadow: var(--cx-shadow);
    color: var(--cx-muted);
    font-size: var(--fs-md);
    padding: 10px var(--sp-4);
    margin: 0;
    gap: var(--sp-3);
}

.cx-phi .fapc-phi-banner--open {
    background: var(--cx-warn-soft);
    border-color: rgba(180, 83, 9, 0.35);
    color: var(--cx-warn);
}

.cx-phi .fapc-phi-banner .dx-icon-lock,
.cx-phi .fapc-phi-banner .dx-icon-unlock { color: var(--cx-brand); font-size: 18px; }
.cx-phi .fapc-phi-banner--open .dx-icon-unlock { color: var(--cx-warn); }
.cx-phi .fapc-phi-reason { font-family: var(--cx-mono); font-size: 0.95em; font-weight: 600; }

/* ---- DevExtreme widgets inside the console and its overlays: Plex, sentence case, console radii ---- */
.cx .dx-widget,
.cx-phi .dx-widget,
.cx-dialog .dx-widget,
.cx-toast .dx-widget,
.dx-overlay-wrapper .dx-widget { font-family: var(--cx-sans); }

.cx .dx-button, .cx-phi .dx-button, .dx-overlay-wrapper .dx-button { border-radius: var(--cx-radius-sm); min-height: 34px; }
.cx .dx-button .dx-button-text,
.cx-phi .dx-button .dx-button-text,
.dx-overlay-wrapper .dx-button .dx-button-text { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: var(--fs-md); }
.cx .dx-button .dx-button-content, .cx-phi .dx-button .dx-button-content, .dx-overlay-wrapper .dx-button .dx-button-content { padding-left: 14px; padding-right: 14px; }
.cx .dx-button.dx-button-has-icon:not(.dx-button-has-text) .dx-button-content { padding-left: 8px; padding-right: 8px; }
.cx .dx-button-mode-outlined, .cx-phi .dx-button-mode-outlined { border-color: var(--cx-rule-strong); color: var(--cx-ink); background: var(--cx-panel); }
.cx .dx-button-mode-outlined.dx-state-hover, .cx-phi .dx-button-mode-outlined.dx-state-hover { border-color: var(--cx-brand); background: var(--cx-brand-soft); color: var(--cx-brand); }
.cx .dx-button-mode-outlined .dx-icon, .cx-phi .dx-button-mode-outlined .dx-icon { color: var(--cx-muted); }
.cx .dx-button-mode-outlined.dx-state-hover .dx-icon { color: var(--cx-brand); }
.cx .dx-button-mode-text { color: var(--cx-brand); }
.cx .dx-button-mode-text .dx-button-text { color: var(--cx-brand); }
.cx .dx-button-mode-text.dx-state-hover { background: var(--cx-brand-soft); }
.cx .dx-button.dx-state-disabled { opacity: 0.55; }
/* Filled buttons (default / danger / success) keep a white label when disabled: DevExtreme fades the
   label to near-black, which disappears on the fill (SIMs "Activate service" with the carrier off). */
.cx .dx-button-default.dx-state-disabled .dx-button-text, .cx .dx-button-default.dx-state-disabled .dx-icon,
.cx .dx-button-danger.dx-state-disabled .dx-button-text, .cx .dx-button-danger.dx-state-disabled .dx-icon,
.cx .dx-button-success.dx-state-disabled .dx-button-text, .cx .dx-button-success.dx-state-disabled .dx-icon,
.dx-overlay-wrapper .dx-button-default.dx-state-disabled .dx-button-text, .dx-overlay-wrapper .dx-button-default.dx-state-disabled .dx-icon,
.dx-overlay-wrapper .dx-button-danger.dx-state-disabled .dx-button-text, .dx-overlay-wrapper .dx-button-danger.dx-state-disabled .dx-icon { color: #fff; }
.cx .dx-button .dx-icon { font-size: 16px; }
.cx .dx-texteditor.dx-editor-outlined, .dx-overlay-wrapper .dx-texteditor.dx-editor-outlined { border-radius: var(--cx-radius-sm); }
.cx .dx-texteditor.dx-editor-outlined.dx-state-focused, .dx-overlay-wrapper .dx-texteditor.dx-editor-outlined.dx-state-focused { border-color: var(--cx-brand); }
.cx .dx-texteditor-input, .dx-overlay-wrapper .dx-texteditor-input { font-family: var(--cx-sans); font-size: var(--fs-md); }
.cx .cx-search .dx-texteditor-input { font-size: var(--fs-md); }
.cx .dx-placeholder { font-family: var(--cx-sans); }
.cx .dx-checkbox-text, .cx .dx-switch, .cx .dx-selectbox { font-family: var(--cx-sans); }

/* dialogs (confirm, form, error) */
.dx-overlay-wrapper.cx-dialog .dx-overlay-content,
.dx-dialog-wrapper .dx-overlay-content { border-radius: 12px; }
.dx-overlay-wrapper .dx-popup-title { font-family: var(--cx-sans); font-weight: 600; color: var(--cx-ink); }
.dx-dialog .dx-popup-title,
.cx-dialog .dx-popup-title { font-size: var(--fs-xl); padding: 18px 22px 8px; min-height: 0; }
.dx-dialog .dx-popup-title.dx-empty { display: none; }
.dx-dialog .dx-dialog-message { font-family: var(--cx-sans); font-size: var(--fs-lg); color: var(--cx-ink); line-height: 1.5; padding: 4px 22px 8px; }
.dx-dialog .dx-dialog-buttons { padding: 4px 16px 14px; }
.dx-dialog .dx-dialog-button + .dx-dialog-button { margin-left: 6px; }
.cx-dialog-msg { max-width: 520px; }
.cx-dialog-msg--error { white-space: normal; word-break: break-word; }
.cx-dialog-msg--error::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cx-bad); margin-right: 8px; vertical-align: middle; }
.cx-dialog-msg small { color: var(--cx-muted); }

/* form dialog */
.cx-form { min-width: 340px; display: grid; gap: var(--sp-3); }
.cx-form-label { display: block; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cx-muted); margin-bottom: 4px; }
.cx-form-hint { font-size: var(--fs-sm); color: var(--cx-faint); margin-top: 4px; line-height: 1.4; }

/* result toasts */
.dx-toast-wrapper.cx-toast .dx-toast-content,
.dx-toast-content {
    font-family: var(--cx-sans);
    font-size: var(--fs-lg);
    border-radius: var(--cx-radius-sm);
    box-shadow: 0 8px 24px -8px rgba(34, 29, 43, 0.45);
    padding: 12px 16px;
}
.dx-toast-success .dx-toast-content { background: var(--cx-good); color: #fff; }
.dx-toast-error .dx-toast-content { background: var(--cx-bad); color: #fff; }
.dx-toast-warning .dx-toast-content { background: var(--cx-warn); color: #fff; }
.dx-toast-info .dx-toast-content { background: var(--cx-ink); color: #fff; }
.dx-toast-content .dx-toast-message { font-weight: 500; }

/* ---- keyboard focus ---- */
.cx [tabindex="0"]:focus-visible,
.cx a:focus-visible,
.cx-phi [tabindex="0"]:focus-visible { outline: 2px solid var(--cx-brand); outline-offset: 2px; border-radius: var(--cx-radius-sm); }
.cx-table tbody tr:focus-visible { outline-offset: -2px; border-radius: 0; }
.cx-table th.sortable:focus-visible { outline-offset: -2px; border-radius: 0; }
.cx-initials:focus-visible { outline-offset: 1px; border-radius: 6px; }
.cx-pill .x:focus-visible { outline: 2px solid #fff; outline-offset: 0; border-radius: 50%; }

/* summary strip (top of list) */
.cx-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 180px));
    justify-content: start;
    gap: var(--sp-2);
}

.cx-summary .s {
    border: 1px solid var(--cx-rule);
    border-radius: var(--cx-radius-sm);
    padding: 6px 10px;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}

.cx-summary .s:hover { border-color: var(--cx-brand); }
.cx-summary .s--on { background: var(--cx-brand-soft); border-color: var(--cx-brand); box-shadow: inset 0 0 0 1px var(--cx-brand); }
.cx-summary .s .n { font-size: var(--fs-h1); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cx-summary .s .l { font-size: var(--fs-xs); color: var(--cx-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; white-space: normal; line-height: 1.2; }
.cx-summary .s--warn .n { color: var(--cx-warn); }
.cx-summary .s--good .n { color: var(--cx-good); }
.cx-summary .s--bad .n { color: var(--cx-bad); }
.cx-summary .s--info .n { color: var(--cx-info); }
.cx-summary .s--brand .n { color: var(--cx-brand); }

/* ---- responsive ---- */
@media (max-width: 960px) {
    .cx { grid-template-columns: 1fr; }
    .cx-list-pane { position: static; max-height: none; }
    .cx--detail .cx-list-pane { display: none; }
    .cx:not(.cx--detail) .cx-detail-pane { display: none; }
    .cx-back { display: inline-flex !important; }
    .cx-summary { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
}

.cx-back {
    display: none;
    align-items: center;
    gap: 6px;
    color: var(--cx-brand);
    font-weight: 600;
    font-size: var(--fs-md);
    margin-bottom: 10px;
    cursor: pointer;
}
.cx-back:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .cx * { transition: none !important; animation: none !important; }
}

/* ---- table mode: nothing selected → the list is the whole page ---- */
.cx--table { grid-template-columns: 1fr; }
.cx--table .cx-list-pane { position: static; max-height: none; overflow: visible; }
.cx--table .cx-detail-pane { display: none; }
.cx--table .cx-list-body { padding: 0; overflow: visible; }
.cx--table .cx-list-head { border-radius: var(--cx-radius) var(--cx-radius) 0 0; background: var(--cx-panel); }
.cx-list-title .cx-list-tools { display: flex; gap: var(--sp-2); align-items: center; }

/* ---- detail mode: compact list on the left; the search stays, full width, so the next record can be found ---- */
.cx--detail .cx-list-title #cx-toolbar { display: none; }
.cx--detail .cx-list-head .cx-summary { display: none !important; }
.cx--detail .cx-list-head .cx-chips { display: none !important; }
.cx--detail .cx-list-tools { flex-basis: 100%; margin-left: 0; }
.cx--detail .cx-list-tools .cx-search .dx-textbox { width: 100% !important; }
.cx--detail .cx-filterbar { display: flex; flex-wrap: wrap; gap: 6px; }
.cx--detail .cx-list-head { padding-bottom: var(--sp-3); }

/* the table: the page scrolls, the header sticks under the top bar */
.cx-table-wrap { overflow: visible; }
.cx-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
.cx-table th {
    text-align: left;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cx-muted);
    padding: 10px 12px;
    border-bottom: 1px solid var(--cx-rule);
    background: var(--cx-ground);
    white-space: nowrap;
    position: sticky;
    top: var(--cx-topbar);
    z-index: 2;
    box-shadow: inset 0 -1px 0 var(--cx-rule);
}
.cx-table th.sortable { cursor: pointer; user-select: none; }
.cx-table th.sortable:hover, .cx-table th.on { color: var(--cx-brand); }
.cx-table th.sortable::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    border: 4px solid transparent;
    border-top-color: currentColor;
    border-bottom: 0;
    opacity: 0.35;
    vertical-align: middle;
    transition: transform 0.12s, opacity 0.12s;
}
.cx-table th.on::after { opacity: 1; }
.cx-table th.on.asc::after { transform: rotate(180deg); }
.cx-table th.right, .cx-table td.right { text-align: right; }
.cx-table td { padding: 9px 12px; border-bottom: 1px solid var(--cx-rule); vertical-align: middle; color: var(--cx-ink); }
.cx-table td.nowrap { white-space: nowrap; }
.cx-table tbody tr { cursor: pointer; transition: background 0.1s; }
.cx-table tbody tr:hover { background: var(--cx-ground); }
.cx-table tbody tr:last-child td { border-bottom: 0; }
.cx-table td .cx-mono { font-weight: 600; }
.cx-table td .dim { color: var(--cx-faint); }
.cx-table td .sub { display: block; font-size: var(--fs-sm); color: var(--cx-muted); margin-top: 1px; }

@media (max-width: 960px) {
    .cx-table-wrap { overflow-x: auto; }
    .cx-table th { position: static; }
    .cx--table .cx-list-pane { overflow: hidden; }
}

.cx-detail-bar { margin-bottom: 10px; }
.cx--detail .cx-back { display: inline-flex; }

/* live status tiles on a device */
.cx-live { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.cx-live .t { border: 1px solid var(--cx-rule); border-radius: var(--cx-radius-sm); padding: 8px 10px; background: var(--cx-ground); }
.cx-live .t .k { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cx-faint); }
.cx-live .t .v { font-size: var(--fs-lg); font-weight: 600; margin-top: 2px; }
.cx-battery { display: inline-flex; align-items: center; gap: 6px; }
.cx-battery .bar { width: 40px; height: 8px; border-radius: 4px; background: var(--cx-rule); overflow: hidden; }
.cx-battery .fill { height: 100%; display: block; }

/* remote action tiles */
.cx-action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.cx-action { border: 1px solid var(--cx-rule); border-radius: var(--cx-radius-sm); padding: 10px 12px; background: var(--cx-panel); cursor: pointer; font-size: var(--fs-md); font-weight: 600; display: flex; align-items: center; gap: var(--sp-2); color: var(--cx-ink); transition: border-color 0.12s, background 0.12s; user-select: none; }
.cx-action:hover { border-color: var(--cx-brand); background: var(--cx-brand-soft); }
.cx-action--danger { color: var(--cx-bad); }
.cx-action--danger:hover { border-color: var(--cx-bad); background: var(--cx-bad-soft); }
.cx-action .dx-icon { font-size: 16px; color: var(--cx-muted); }
.cx-action:hover .dx-icon { color: inherit; }
.cx-action .lbl { display: block; min-width: 0; flex: 1; }
/* an action that cannot run for this tablet: visible, explained by its reason line and title, not clickable */
.cx-action--off, .cx-action[aria-disabled="true"] { opacity: 0.62; cursor: not-allowed; pointer-events: auto; background: var(--cx-ground); border-style: dashed; color: var(--cx-muted); }
.cx-action--off:hover, .cx-action[aria-disabled="true"]:hover { border-color: var(--cx-rule); background: var(--cx-ground); }
.cx-action[aria-disabled="true"] .dx-icon { color: var(--cx-faint); }
.cx-action .why { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--cx-muted); margin: 2px 0 0; line-height: 1.3; white-space: normal; }

/* ==========================================================================
   Record page (CX.rec): head · attention · main + side, shared by the four details.
   ========================================================================== */
.cx--detail { grid-template-columns: minmax(290px, 330px) minmax(0, 1fr); }
.cx-detail-pane { container-type: inline-size; container-name: detail; }

.rec { display: flex; flex-direction: column; gap: 14px; }

/* ---- head ---- */
.rec-head {
    background: var(--cx-panel);
    border: 1px solid var(--cx-rule);
    border-radius: var(--cx-radius);
    box-shadow: var(--cx-shadow);
    padding: 18px 20px 0;
}
.rec-head-top { display: flex; align-items: flex-start; gap: var(--sp-4); }
.rec-id { min-width: 0; flex: 1; }
.rec-eyebrow {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cx-muted);
    margin-bottom: 4px;
    display: flex;
    gap: 6px;
    align-items: center;
}
.rec-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-title { font-size: 24px; font-weight: 600; margin: 0; letter-spacing: -0.015em; line-height: 1.15; color: var(--cx-ink); font-variant-numeric: tabular-nums; }
.rec-title--mono { font-family: var(--cx-mono); font-size: 22px; letter-spacing: -0.02em; }
.rec-status .cx-badge { font-size: var(--fs-md); padding: 4px 11px; }
.rec-status .cx-badge .dot { width: 7px; height: 7px; }
.rec-sub { margin-top: 4px; font-size: var(--fs-xl); color: var(--cx-muted); }
.rec-head-right { text-align: right; font-size: var(--fs-sm); color: var(--cx-muted); white-space: nowrap; padding-top: 2px; }
.rec-head-right b { display: block; font-size: var(--fs-xl); color: var(--cx-ink); font-weight: 600; }
.rec-head-right .hot { color: var(--cx-warn); }

/* the "where it is" trail: linked records in order, physical → case */
.rec-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--cx-rule);
    font-size: var(--fs-md);
}
.rec-crumb { display: inline-flex; align-items: center; gap: 6px; }
.rec-crumb .k { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cx-faint); }
.rec-crumb .v { display: inline-flex; align-items: center; gap: 6px; color: var(--cx-ink); font-weight: 500; }
.rec-sep { color: var(--cx-line-faint); font-size: 16px; line-height: 1; padding: 0 2px; }

/* ---- action bar ---- */
.rec-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 14px -20px 0;
    padding: 12px 20px;
    border-top: 1px solid var(--cx-rule);
    background: var(--cx-ground);
    border-radius: 0 0 var(--cx-radius) var(--cx-radius);
}
.rec-head > .rec-bar:last-child { margin-bottom: 0; }
.rec-head:not(:has(.rec-bar:not(:empty))) { padding-bottom: 18px; }
.rec-bar:empty { display: none; }
.rec-btn {
    font: 600 var(--fs-md)/1 var(--cx-sans);
    height: 34px;
    padding: 0 13px;
    border-radius: var(--cx-radius-sm);
    border: 1px solid var(--cx-rule-strong);
    background: var(--cx-panel);
    color: var(--cx-ink);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
    white-space: nowrap;
}
.rec-btn .dx-icon { font-size: 16px; color: var(--cx-muted); }
.rec-btn:hover { border-color: var(--cx-brand); color: var(--cx-brand); background: var(--cx-brand-soft); }
.rec-btn:hover .dx-icon { color: inherit; }
.rec-btn:focus-visible, .rec-menu-item:focus-visible, .rec-tab:focus-visible, .rec-rel-item:focus-visible, .rec-tablet:focus-visible { outline: 2px solid var(--cx-brand); outline-offset: 2px; }
.rec-btn--primary { background: var(--cx-brand); border-color: var(--cx-brand); color: #fff; }
.rec-btn--primary .dx-icon { color: #fff; }
.rec-btn--primary:hover { background: var(--cx-brand-ink); border-color: var(--cx-brand-ink); color: #fff; }
.rec-btn--danger { color: var(--cx-bad); }
.rec-btn--danger .dx-icon { color: var(--cx-bad); }
.rec-btn--danger:hover { border-color: var(--cx-bad); background: var(--cx-bad-soft); color: var(--cx-bad); }
.rec-btn--primary.rec-btn--danger { background: var(--cx-bad); border-color: var(--cx-bad); color: #fff; }
.rec-btn--primary.rec-btn--danger .dx-icon { color: #fff; }
.rec-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; border-style: dashed; background: transparent; color: var(--cx-muted); }
.rec-btn[aria-disabled="true"]:hover { border-color: var(--cx-rule-strong); background: transparent; color: var(--cx-muted); }
.rec-btn[aria-disabled="true"] .dx-icon { color: var(--cx-faint); }
.rec-btn--sm { height: 28px; padding: 0 10px; font-size: var(--fs-sm); }

.rec-more-wrap { position: relative; }
.rec-more .dx-icon { font-size: 14px; margin-right: -3px; }
.rec-menu {
    display: none;
    position: absolute;
    z-index: 1500;
    top: calc(100% + 6px);
    left: 0;
    width: 300px;
    max-height: 70vh;
    overflow: auto;
    background: var(--cx-panel);
    border: 1px solid var(--cx-rule);
    border-radius: var(--cx-radius);
    box-shadow: 0 12px 32px -12px rgba(34, 29, 43, 0.35), 0 2px 6px rgba(34, 29, 43, 0.08);
    padding: 6px;
}
.rec-menu.open { display: block; }
.rec-menu--left { left: auto; right: 0; }
.rec-menu-group { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cx-faint); padding: 10px 10px 4px; }
.rec-menu-group:first-child { padding-top: 4px; }
.rec-menu-item {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    text-align: left;
    border: 0;
    background: transparent;
    border-radius: var(--cx-radius-sm);
    padding: 8px 10px;
    font: 500 var(--fs-md)/1.3 var(--cx-sans);
    color: var(--cx-ink);
    cursor: pointer;
}
.rec-menu-item .dx-icon { font-size: 16px; color: var(--cx-muted); margin-top: 1px; }
.rec-menu-item .lbl { display: flex; flex-direction: column; min-width: 0; }
.rec-menu-item .why { font-size: var(--fs-xs); color: var(--cx-muted); font-weight: 400; margin-top: 2px; }
.rec-menu-item:hover { background: var(--cx-brand-soft); color: var(--cx-brand); }
.rec-menu-item:hover .dx-icon { color: var(--cx-brand); }
.rec-menu-item--danger, .rec-menu-item--danger .dx-icon { color: var(--cx-bad); }
.rec-menu-item--danger:hover { background: var(--cx-bad-soft); color: var(--cx-bad); }
.rec-menu-item--danger:hover .dx-icon { color: var(--cx-bad); }
.rec-menu-item[aria-disabled="true"], .rec-menu-item[aria-disabled="true"] .dx-icon { color: var(--cx-faint); cursor: not-allowed; }
.rec-menu-item[aria-disabled="true"]:hover { background: transparent; color: var(--cx-faint); }

/* ---- attention ---- */
.rec-attn-host:empty { display: none; }
.rec-attn { display: flex; flex-direction: column; gap: 6px; }
.rec-attn-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--cx-radius);
    border: 1px solid;
    font-size: var(--fs-md);
    line-height: 1.4;
}
.rec-attn-row > .dx-icon { font-size: 18px; flex: none; }
.rec-attn-row .txt { flex: 1; min-width: 0; color: var(--cx-ink); }
.rec-attn-row .txt b { font-weight: 600; margin-right: 6px; }
.rec-attn-row .txt span { color: var(--cx-muted); }
.rec-attn-row--bad { background: var(--cx-bad-soft); border-color: rgba(185, 28, 28, 0.28); }
.rec-attn-row--bad > .dx-icon, .rec-attn-row--bad .txt b { color: var(--cx-bad); }
.rec-attn-row--warn { background: var(--cx-warn-soft); border-color: rgba(180, 83, 9, 0.28); }
.rec-attn-row--warn > .dx-icon, .rec-attn-row--warn .txt b { color: var(--cx-warn); }
.rec-attn-row--info { background: var(--cx-info-soft); border-color: rgba(8, 111, 131, 0.25); }
.rec-attn-row--info > .dx-icon, .rec-attn-row--info .txt b { color: var(--cx-info); }
.rec-attn-row--good { background: var(--cx-good-soft); border-color: rgba(31, 122, 63, 0.25); }
.rec-attn-row--good > .dx-icon, .rec-attn-row--good .txt b { color: var(--cx-good); }
.rec-attn-row .rec-btn { flex: none; }

/* ---- body: main + side ---- */
.rec-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.rec-main, .rec-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@container detail (max-width: 860px) {
    .rec-body { grid-template-columns: minmax(0, 1fr); }
}

.rec-sec {
    background: var(--cx-panel);
    border: 1px solid var(--cx-rule);
    border-radius: var(--cx-radius);
    box-shadow: var(--cx-shadow);
    min-width: 0;
}
.rec-sec-head { display: flex; align-items: center; gap: 8px; padding: 14px 18px 0; }
.rec-sec-head h3 { margin: 0; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cx-muted); }
.rec-sec-head .spacer { flex: 1; }
.rec-sec-head .meta { font-size: var(--fs-sm); color: var(--cx-faint); }
.rec-sec-body { padding: 12px 18px 16px; }
.rec-sec--flush .rec-sec-body { padding: 8px 0 0; }
.rec-side-title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cx-faint); margin: 2px 2px -6px; }

/* ---- vitals ---- */
.rec-vitals { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; }
.rec-vital { border: 1px solid var(--cx-rule); border-radius: var(--cx-radius-sm); padding: 10px 12px; background: var(--cx-ground); min-width: 0; }
.rec-vital .k { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cx-faint); }
.rec-vital .v { margin-top: 4px; font-size: 17px; font-weight: 600; color: var(--cx-ink); line-height: 1.25; overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rec-vital .v.dim { color: var(--cx-faint); font-weight: 500; }
.rec-vital .s { margin-top: 3px; font-size: var(--fs-sm); color: var(--cx-muted); overflow-wrap: anywhere; }
.rec-vital--good { border-color: rgba(31, 122, 63, 0.3); background: var(--cx-good-soft); }
.rec-vital--good .v { color: var(--cx-good); }
.rec-vital--warn { border-color: rgba(180, 83, 9, 0.3); background: var(--cx-warn-soft); }
.rec-vital--warn .v { color: var(--cx-warn); }
.rec-vital--bad { border-color: rgba(185, 28, 28, 0.3); background: var(--cx-bad-soft); }
.rec-vital--bad .v { color: var(--cx-bad); }

/* small facts under the vitals: "Video on · Mic off · …" */
.rec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rec-chip { display: inline-flex; gap: 5px; align-items: baseline; font-size: var(--fs-sm); padding: 3px 9px; border-radius: 999px; background: var(--cx-ground); border: 1px solid var(--cx-rule); color: var(--cx-ink); }
.rec-chip .k { color: var(--cx-faint); }

/* ---- related records ---- */
.rec-rel { display: flex; flex-direction: column; gap: 8px; }
.rec-rel-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--cx-rule);
    border-radius: var(--cx-radius);
    background: var(--cx-panel);
    text-decoration: none !important;
    color: var(--cx-ink);
    box-shadow: var(--cx-shadow);
    transition: border-color 0.12s, background 0.12s;
    min-width: 0;
}
a.rec-rel-item:hover { border-color: var(--cx-brand); background: var(--cx-brand-soft); }
.rec-rel-item .ic { width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--cx-brand-soft); color: var(--cx-brand); display: grid; place-items: center; }
.rec-rel-item .ic .dx-icon { font-size: 18px; }
.rec-rel-item .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rec-rel-item .kind { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cx-faint); display: flex; align-items: center; gap: 6px; }
.rec-rel-item .kind .spacer { flex: 1; }
.rec-rel-item .kind .cx-badge { text-transform: none; letter-spacing: 0; }
.rec-rel-item .title { font-size: var(--fs-lg); font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
.rec-rel-item .sub { font-size: var(--fs-sm); color: var(--cx-muted); overflow-wrap: anywhere; }
.rec-rel-item .go { color: var(--cx-line-faint); font-size: 16px; flex: none; }
a.rec-rel-item:hover .go { color: var(--cx-brand); }
.rec-rel-item--me { border-color: var(--cx-brand); box-shadow: inset 0 0 0 1px var(--cx-brand); }
.rec-rel-item--empty { border-style: dashed; box-shadow: none; background: transparent; }
.rec-rel-item--empty .ic { background: var(--cx-ground); color: var(--cx-faint); }
.rec-rel-item--static { cursor: default; }

/* ---- all details ---- */
.rec-details { background: var(--cx-panel); border: 1px solid var(--cx-rule); border-radius: var(--cx-radius); box-shadow: var(--cx-shadow); }
.rec-details > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cx-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.rec-details > summary::-webkit-details-marker { display: none; }
.rec-details > summary .dx-icon { font-size: 14px; transition: transform 0.15s; }
.rec-details[open] > summary .dx-icon { transform: rotate(90deg); }
.rec-details > summary:hover { color: var(--cx-brand); }
.rec-dl-group { padding: 0 16px 14px; }
.rec-dl-title { font-size: var(--fs-sm); font-weight: 600; color: var(--cx-ink); margin: 2px 0 6px; }
.rec-dl { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: 5px 12px; margin: 0; font-size: var(--fs-md); }
.rec-dl dt { color: var(--cx-muted); }
.rec-dl dd { margin: 0; color: var(--cx-ink); font-weight: 500; overflow-wrap: anywhere; }
.rec-dl dd.dim { color: var(--cx-faint); font-weight: 400; }

/* ---- tabs ---- */
.rec-tabs { background: var(--cx-panel); border: 1px solid var(--cx-rule); border-radius: var(--cx-radius); box-shadow: var(--cx-shadow); min-width: 0; }
.rec-tabbar { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--cx-rule); overflow-x: auto; overflow-y: hidden; }
.rec-tab {
    border: 0;
    background: transparent;
    padding: 13px 10px 11px;
    font: 600 var(--fs-md)/1 var(--cx-sans);
    color: var(--cx-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    white-space: nowrap;
}
.rec-tab:hover { color: var(--cx-ink); }
.rec-tab.on { color: var(--cx-brand); border-bottom-color: var(--cx-brand); }
.rec-tab .n { display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 4px; border-radius: 999px; background: var(--cx-grey-soft); color: var(--cx-muted); font-size: var(--fs-xs); text-align: center; }
.rec-tab.on .n { background: var(--cx-brand-soft); color: var(--cx-brand); }
.rec-tabpane { padding: 14px 18px 16px; }
.rec-tabpane .cx-card { box-shadow: none; border: 0; padding: 0; }
.rec-tabpane .cx-card + .cx-card { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--cx-rule); border-radius: 0; }
.rec-empty { color: var(--cx-faint); font-size: var(--fs-md); padding: 6px 0; }

/* the tablets of a package, as the main object of the page */
.rec-tablets { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.rec-tablet { border: 1px solid var(--cx-rule); border-radius: var(--cx-radius); padding: 14px; background: var(--cx-ground); display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: border-color 0.12s, background 0.12s; text-decoration: none !important; color: var(--cx-ink); min-width: 0; }
a.rec-tablet:hover { border-color: var(--cx-brand); background: var(--cx-panel); }
.rec-tablet .top { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cx-muted); }
.rec-tablet .top .spacer { flex: 1; }
.rec-tablet .top .cx-badge { text-transform: none; letter-spacing: 0; }
.rec-tablet .id { font-family: var(--cx-mono); font-size: var(--fs-xl); font-weight: 700; overflow-wrap: anywhere; }
.rec-tablet .facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-sm); color: var(--cx-muted); align-items: center; }
.rec-tablet .facts b { color: var(--cx-ink); font-weight: 600; }
.rec-tablet--me { border-color: var(--cx-brand); background: var(--cx-panel); box-shadow: inset 0 0 0 1px var(--cx-brand); }
.rec-tablet--empty { border-style: dashed; background: transparent; cursor: default; color: var(--cx-muted); }

.rec-copy { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; border-bottom: 1px dashed transparent; }
.rec-copy .dx-icon { font-size: 12px; color: var(--cx-faint); opacity: 0; transition: opacity 0.12s; }
.rec-copy:hover { border-bottom-color: var(--cx-rule-strong); }
.rec-copy:hover .dx-icon { opacity: 1; }

/* the case: patient + family side by side */
.rec-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 24px; }
.rec-people > div + div { border-left: 1px solid var(--cx-rule); padding-left: 24px; }
@container detail (max-width: 620px) { .rec-people > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--cx-rule); padding-top: 14px; margin-top: 14px; } }
/* Case contacts (cases.js contactsSection): name + Default pill, phone, row actions */
.cx-contacts { width: 100%; border-collapse: collapse; }
.cx-contacts td { padding: 8px 10px 8px 0; border-top: 1px solid var(--cx-rule); vertical-align: top; }
.cx-contacts tr:first-child td { border-top: 0; }
.cx-contacts td .sub { display: block; font-size: var(--fs-sm); color: var(--cx-muted); }
.cx-contacts td.ph { white-space: nowrap; }
.cx-contacts td.acts { text-align: right; white-space: nowrap; }
.cx-contacts td.acts .rec-btn + .rec-btn { margin-left: 6px; }
@container detail (max-width: 620px) { .cx-contacts td.acts { white-space: normal; } .cx-contacts td.acts .rec-btn { margin: 4px 0 0 6px; } }
.rec-person h4 { margin: 0 0 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cx-faint); }
.rec-person .name { font-size: var(--fs-xl); font-weight: 600; margin-bottom: 8px; }
.rec-person .name small { font-size: var(--fs-md); font-weight: 400; color: var(--cx-muted); margin-left: 6px; }

/* the case rail and next step inside the record */
.rec-head .cx-rail { margin: 16px 0 2px; }
.rec .cx-next { margin: 0; }

@media (max-width: 960px) {
    .rec-head-top { flex-direction: column; }
    .rec-head-right { text-align: left; }
}

/* a tablet's packages and cases, newest first */
.rec-hist { list-style: none; margin: 0; padding: 0; position: relative; }
.rec-hist li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; position: relative; }
.rec-hist li + li { border-top: 1px solid var(--cx-rule); }
.rec-hist .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cx-rule-strong); margin-top: 5px; flex: none; }
.rec-hist li.now .dot { background: var(--cx-brand); box-shadow: 0 0 0 4px var(--cx-brand-soft); }
.rec-hist .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rec-hist .line1, .rec-hist .line2 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--fs-md); }
.rec-hist .line2 { color: var(--cx-muted); }
.rec-hist .when { font-size: var(--fs-sm); color: var(--cx-muted); white-space: nowrap; padding-top: 2px; font-variant-numeric: tabular-nums; }

/* a closed (returned) package: history, not a live record */
.rec--closed .rec-head { background: var(--cx-ground); }
.rec--closed .rec-title { color: var(--cx-muted); }

/* the branch filter beside the search; under it while a record is open */
.cx-list-tools .cx-branch .dx-texteditor-input { font-size: var(--fs-md); }
.cx--detail .cx-list-tools { flex-wrap: wrap; }
.cx--detail .cx-list-tools .cx-branch { order: 3; flex-basis: 100%; }
.cx--detail .cx-list-tools .cx-branch .dx-selectbox { width: 100% !important; }
.cx-pill--branch .dx-icon-home { font-size: 13px; }

/* ==========================================================================
   Phones and small tablets. Kept last so it wins over the desktop rules above.
   ≤ 960px: one column; a record takes the whole width (the list is hidden, "All ..." goes back).
   ≤ 760px: phone. The list is the compact rows (console.js isPhone), tools stack, filters scroll
   sideways, buttons and rows are thumb-sized, inputs are 16px so iOS does not zoom on focus.
   ========================================================================== */
@media (max-width: 960px) {
    .cx--detail { grid-template-columns: minmax(0, 1fr); }
    .cx--detail .cx-detail-pane { display: block; }
}

@media (max-width: 760px) {
    .cx { gap: 10px; }
    .cx-phi { margin-bottom: var(--sp-2); }

    /* privacy bar: one compact strip instead of a tall card */
    .cx-phi .fapc-phi-banner { flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px; font-size: var(--fs-sm); line-height: 1.4; }
    .cx-phi .fapc-phi-banner > span:not(.dx-icon-lock):not(.dx-icon-unlock):not(.fapc-phi-spacer) { flex: 1 1 200px; min-width: 0; }
    .cx-phi .fapc-phi-spacer { display: none; }
    .cx-phi .fapc-phi-btn { flex: 1 1 100%; }
    .cx-phi .fapc-phi-btn .dx-button { width: 100%; }

    /* list head: title row, then a full-width search, then branch + refresh + page button */
    .cx-list-head { padding: var(--sp-3); gap: 10px; }
    .cx-list-title .spacer { display: none; }
    .cx-list-tools { flex-basis: 100%; flex-wrap: wrap; margin-left: 0; }
    .cx-list-tools > .cx-search { flex: 1 1 100%; }
    .cx-list-tools .cx-search .dx-textbox { width: 100% !important; }
    .cx-list-tools .cx-branch { flex: 1 1 140px; min-width: 0; order: 0; flex-basis: auto; }
    .cx-list-tools .cx-branch .dx-selectbox { width: 100% !important; }
    .cx-list-tools #cx-refresh .dx-button { width: 42px; min-width: 42px; }
    .cx--detail .cx-list-tools .cx-branch { order: 0; flex-basis: auto; }

    /* summary tiles: three across, tight */
    .cx-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .cx-summary .s { padding: 8px 10px; }
    .cx-summary .s .l { font-size: 10px; letter-spacing: 0.03em; }

    /* chips: one row that scrolls sideways instead of many wrapped lines */
    .cx-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--sp-3)); padding: 2px var(--sp-3) 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .cx-chips::-webkit-scrollbar { display: none; }
    .cx-chip { flex: none; padding: 6px 12px; }

    /* compact rows as the phone list */
    .cx-list-body { padding: 4px 6px; }
    .cx--table .cx-list-body { padding: 4px 6px; }
    .cx-row { min-height: 56px; padding: 10px; }
    .cx-row + .cx-row { border-top-color: var(--cx-rule); border-radius: 0; }
    .cx-row--on, .cx-row--on + .cx-row { border-radius: var(--cx-radius-sm); }
    .cx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* record: tighter head, wrapping action bar, bigger touch targets */
    .cx-detail-bar { margin-bottom: 6px; }
    .cx-back { padding: 8px 0; margin-bottom: 0; font-size: var(--fs-lg); }
    .rec { gap: 10px; }
    .rec-head { padding: 14px 14px 0; }
    .rec-head-top { flex-direction: column; gap: 6px; }
    .rec-head-right { text-align: left; white-space: normal; }
    .rec-title { font-size: 20px; }
    .rec-title--mono { font-size: 19px; overflow-wrap: anywhere; }
    .rec-sub { font-size: var(--fs-lg); }
    .rec-trail { font-size: var(--fs-sm); }
    .rec-bar { margin: 12px -14px 0; padding: 10px 14px; gap: 6px; }
    .rec-btn { height: 40px; padding: 0 12px; }
    .rec-bar > .rec-btn, .rec-bar > .rec-more-wrap { flex: 1 1 auto; }
    .rec-bar > .rec-btn, .rec-bar .rec-more { justify-content: center; }
    .rec-bar .rec-more { width: 100%; }
    .rec-btn--sm { height: 34px; }

    /* "More" opens as a sheet along the bottom of the screen */
    .rec-menu, .rec-menu--left { position: fixed; top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 75vh; padding: 8px; box-shadow: 0 -8px 40px rgba(34, 29, 43, 0.35); }
    .rec-menu-item { padding: 12px 10px; font-size: var(--fs-lg); }

    /* attention: the fix button drops under the text */
    .rec-attn-row { flex-wrap: wrap; padding: 10px 12px; }
    .rec-attn-row .txt { flex: 1 1 200px; }
    .rec-attn-row .rec-btn { margin-left: 30px; }

    .rec-sec-head { padding: 12px 14px 0; }
    .rec-sec-body { padding: 10px 14px 14px; }
    .rec-vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .rec-vital .v { font-size: 15px; }
    .rec-tablets { grid-template-columns: minmax(0, 1fr); }
    .rec-people { grid-template-columns: minmax(0, 1fr); }
    .rec-dl { grid-template-columns: minmax(88px, 40%) minmax(0, 1fr); }
    .rec-dl dd { overflow-wrap: anywhere; }
    .rec-tab { flex: none; }
    .cx-live, .cx-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* dialogs use the width of the phone */
    .cx-dialog .dx-overlay-content, .fapc-phi-ask .dx-overlay-content { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; }
    .cx-form { min-width: 0; }

    /* iOS zooms into any input under 16px: keep text inputs at 16px on phones */
    .cx .dx-texteditor-input, .cx-dialog .dx-texteditor-input, .fapc-phi-ask .dx-texteditor-input { font-size: 16px; }
}

/* Tables: more air between rows and columns, with the first and last column off the card edge */
.cx-table th { padding: 12px 16px; }
.cx-table td { padding: 13px 16px; }
.cx-table th:first-child, .cx-table td:first-child { padding-left: 20px; }
.cx-table th:last-child, .cx-table td:last-child { padding-right: 20px; }
.cx-filters-toggle { display: none; }

/* Phones, part 2: less on screen at once. Filters behind a button, slim privacy bar, list rows as spaced
   cards, and a record folded to its head + first section (console.js foldRecord). */
@media (max-width: 760px) {
    .cx-list-tools .cx-filters-toggle { display: block; flex: none; }
    .cx:not(.cx--filters-open) .cx-list-head .cx-summary,
    .cx:not(.cx--filters-open) .cx-list-head .cx-chips { display: none !important; }
    .cx-filters-toggle .dx-button[aria-expanded="true"] { border-color: var(--cx-brand); background: var(--cx-brand-soft); color: var(--cx-brand); }
    .cx--table .cx-filterbar { display: flex; flex-wrap: wrap; gap: 6px; }

    /* privacy bar: one line of text (tap to read it all) beside a small button */
    .cx-phi .fapc-phi-banner { flex-wrap: nowrap; align-items: center; padding: 8px 10px; }
    .cx-phi .fapc-phi-banner > span:not([class]) { flex: 1 1 auto; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; cursor: pointer; }
    .cx-phi .fapc-phi-banner--full { flex-wrap: wrap; }
    .cx-phi .fapc-phi-banner--full > span:not([class]) { display: block; -webkit-line-clamp: unset; }
    .cx-phi .fapc-phi-btn { flex: none; }
    .cx-phi .fapc-phi-btn .dx-button { width: auto; min-height: 32px; }
    .cx-phi .fapc-phi-btn .dx-button .dx-button-content { padding: 0 10px; }
    .cx-phi .fapc-phi-btn .dx-button-text { font-size: var(--fs-sm); }

    /* list rows as separate cards with room between them */
    .cx-list-body, .cx--table .cx-list-body { padding: 10px; background: var(--cx-ground); }
    .cx-row { border: 1px solid var(--cx-rule); border-radius: var(--cx-radius-sm); background: var(--cx-panel); padding: 12px 14px; gap: 6px var(--sp-3); }
    .cx-row + .cx-row { margin-top: 8px; border-top-color: var(--cx-rule); border-radius: var(--cx-radius-sm); }
    .cx-row--on { border-color: var(--cx-brand-line); background: var(--cx-brand-soft); }

    /* folded record parts: title with a chevron; tap to open */
    .rec-sec-head[data-fold], .rec-side-title[data-fold] { cursor: pointer; user-select: none; }
    .rec-sec-head[data-fold]::after, .rec-side-title[data-fold]::after {
        content: ""; width: 8px; height: 8px; margin-left: auto; flex: none;
        border-right: 2px solid var(--cx-muted); border-bottom: 2px solid var(--cx-muted);
        transform: rotate(45deg); transition: transform 0.15s;
    }
    .rec-sec-head[data-fold] .spacer { display: none; }
    .rec-sec-head[data-fold] .meta { margin-left: auto; }
    .rec-sec--shut .rec-sec-head::after, .rec-side--shut .rec-side-title::after { transform: rotate(-45deg); }
    .rec-sec--shut .rec-sec-head { padding-bottom: 12px; }
    .rec-sec--shut .rec-sec-head .meta { display: none; }
    .rec-sec--shut .rec-sec-body { display: none; }
    .rec-side-title[data-fold] { display: flex; align-items: center; margin: 0; padding: 12px 14px; background: var(--cx-panel); border: 1px solid var(--cx-rule); border-radius: var(--cx-radius); font-size: var(--fs-sm); color: var(--cx-muted); }
    .rec-side--shut .rec-rel { display: none; }
    .rec-tabs--shut .rec-tabpane { display: none !important; }
    .rec-tabs--shut .rec-tabbar { border-bottom: 0; }
    .rec-tabs--shut .rec-tab.on { color: inherit; box-shadow: none; border-bottom-color: transparent; }

    /* connected cards: smaller */
    .rec-rel-item { padding: 10px 12px; gap: 10px; }
    .rec-rel-item .ic { width: 30px; height: 30px; }
}
@media (max-width: 760px) {
    .cx-list-tools .cx-filters-toggle .dx-button { height: 40px; }
    .cx-list-tools .cx-filters-toggle .dx-button-content { display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 0 12px; }
    .cx-list-tools .cx-filters-toggle .dx-icon { margin: 0 !important; }
}
@media (max-width: 760px) {
    /* renderSummary/renderChips call .show(), which would turn the grid into a block while the CSS hides it */
    .cx--filters-open .cx-list-head .cx-summary:not([style*="none"]) { display: grid !important; }
    .cx--filters-open .cx-list-head .cx-chips:not([style*="none"]) { display: flex !important; }
}
@media (max-width: 760px) {
    /* dialog forms: thumb-sized Cancel / Save side by side across the bottom, tighter rows */
    .cx-dialog .dx-popup-content { padding: 12px 16px; }
    .cx-dialog .dx-dialog-message { padding: 0; }
    .cx-dialog .dx-popup-title { padding: 14px 16px 6px; }
    .cx-form { gap: 12px; }
    .cx-dialog .dx-popup-bottom { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--cx-rule); }
    .cx-dialog .dx-popup-bottom .dx-toolbar-items-container { display: flex; height: auto; }
    .cx-dialog .dx-popup-bottom .dx-toolbar-before:empty, .cx-dialog .dx-popup-bottom .dx-toolbar-after:empty { display: none; }
    .cx-dialog .dx-popup-bottom .dx-toolbar-center, .cx-dialog .dx-popup-bottom .dx-toolbar-after { position: static; display: flex; gap: 8px; flex: 1 1 auto; float: none !important; margin: 0 !important; padding: 0; }
    .cx-dialog .dx-popup-bottom .dx-toolbar-item { display: block; flex: 1 1 0; padding: 0 !important; }
    .cx-dialog .dx-popup-bottom .dx-toolbar-item .dx-button { width: 100%; height: 44px; margin: 0; }
    /* Cancel is a text button, but responsive.css paints every "default" button purple: keep it light here so Save stands out */
    .cx-dialog .dx-popup-bottom .dx-toolbar-item:first-child:not(:last-child) .dx-button.dx-button-mode-text { background: var(--cx-panel) !important; color: var(--cx-brand) !important; border: 1px solid var(--cx-rule-strong) !important; }
    .cx-dialog .dx-popup-bottom .dx-toolbar-item:first-child:not(:last-child) .dx-button.dx-button-mode-text .dx-button-text { color: var(--cx-brand); }
}