/* ══════════════════════════════════════════════════════════════════════
   UI — the shared component layer for the admin console and the portal.

   One grammar, taken from shadcn/ui and drawn in each app's own palette:
   a table where every cell in a column shares a width, one pager, one set of
   status pills, cards with a header, body and footer, fields with the label
   on the left, confirmations that open in the page, and an action bar that
   knows when there is something to save.

   The components never name a colour. They read --ui-* tokens, and the
   tokens below map them onto the palette of whichever app is drawing:
     :root                            site and client portal, light
     [data-theme="dark"]              site and client portal, dark navy
     [data-app="acp"]                 admin console, neutral light
     [data-app="acp"][data-theme=…]   admin console, neutral dark
   Both apps keep the palettes they have today; this file only adds the
   pieces that were missing and makes them the same everywhere.

   Classes are prefixed ui- (pill is the one exception, it is everywhere).
   ══════════════════════════════════════════════════════════════════════ */

/* ── Tokens: portal and site ── */
:root {
    --ui-bg: #F2F4F7;
    --ui-card: #FFFFFF;
    --ui-head: #F7F8FA;
    --ui-border: rgba(17, 34, 64, 0.12);
    --ui-border-2: rgba(17, 34, 64, 0.07);
    --ui-input: #FFFFFF;
    --ui-input-border: rgba(17, 34, 64, 0.18);
    --ui-text: #111827;
    --ui-muted: #5B6478;
    --ui-hover: rgba(17, 34, 64, 0.035);
    --ui-accent: var(--accent, #178ae8);
    --ui-accent-2: var(--accent-hover, #006cca);
    --ui-accent-ink: #FFFFFF;
    --ui-ring: color-mix(in oklab, var(--ui-accent) 38%, transparent);
    --ui-radius: 12px;
    --ui-radius-sm: 8px;
    --ui-shadow: 0 1px 1px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.07);
    --ui-mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;

    --p-ok: #15803D;    --p-ok-bg: #E7F5EC;
    --p-warn: #9A5B06;  --p-warn-bg: #FDF2D8;
    --p-bad: #B91C1C;   --p-bad-bg: #FDECEC;
    --p-info: #1D5FB8;  --p-info-bg: #E8F1FD;
    --p-neu: #4B5563;   --p-neu-bg: #EEF0F3;
    --p-bad-solid: #DC2626;
    --p-warn-solid: #D99A1E;
}

[data-theme="dark"] {
    --ui-bg: #022268;
    --ui-card: rgba(75, 120, 210, 0.14);
    --ui-head: rgba(179, 204, 255, 0.06);
    --ui-border: rgba(179, 204, 255, 0.14);
    --ui-border-2: rgba(179, 204, 255, 0.08);
    --ui-input: rgba(75, 120, 210, 0.12);
    --ui-input-border: rgba(179, 204, 255, 0.24);
    --ui-text: #EEF3FF;
    --ui-muted: hsla(220, 100%, 92%, 0.85);
    --ui-hover: rgba(179, 204, 255, 0.06);
    --ui-accent-ink: #FFFFFF;
    --ui-ring: rgba(46, 154, 255, 0.45);
    --ui-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3);

    --p-ok: #6EE0A4;    --p-ok-bg: rgba(34, 197, 94, 0.16);
    --p-warn: #F3CD6B;  --p-warn-bg: rgba(234, 179, 8, 0.16);
    --p-bad: #FF9B90;   --p-bad-bg: rgba(239, 68, 68, 0.18);
    --p-info: #8CC2FF;  --p-info-bg: rgba(46, 154, 255, 0.18);
    --p-neu: #D3DCEE;   --p-neu-bg: rgba(179, 204, 255, 0.10);
    color-scheme: dark;
}

/* ── Tokens: admin console ── */
[data-app="acp"] {
    --ui-bg: #F5F5F5;
    --ui-card: #FFFFFF;
    --ui-head: #FAFAFA;
    --ui-border: rgba(0, 0, 0, 0.10);
    --ui-border-2: rgba(0, 0, 0, 0.06);
    --ui-input: #FFFFFF;
    --ui-input-border: rgba(0, 0, 0, 0.16);
    --ui-text: #1A1A1A;
    --ui-muted: #5F5F5F;
    --ui-hover: rgba(0, 0, 0, 0.03);
    --ui-accent: var(--accent, #d4a24e);
    --ui-accent-2: var(--accent-hover, #c4922e);
    --ui-accent-ink: var(--accent-text, #FFFFFF);
    --ui-ring: color-mix(in oklab, var(--ui-accent) 38%, transparent);
    --ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);

    --p-ok: #15803D;    --p-ok-bg: #E7F5EC;
    --p-warn: #9A5B06;  --p-warn-bg: #FDF2D8;
    --p-bad: #B91C1C;   --p-bad-bg: #FDECEC;
    --p-info: #1D5FB8;  --p-info-bg: #E8F1FD;
    --p-neu: #4B5563;   --p-neu-bg: #EEF0F3;
    color-scheme: light;
}

[data-app="acp"][data-theme="dark"] {
    --ui-bg: #0D0D0D;
    --ui-card: #161616;
    --ui-head: #1A1A1A;
    --ui-border: rgba(255, 255, 255, 0.09);
    --ui-border-2: rgba(255, 255, 255, 0.06);
    --ui-input: #121212;
    --ui-input-border: rgba(255, 255, 255, 0.16);
    --ui-text: #F0F0F0;
    --ui-muted: #A3A3A3;
    --ui-hover: rgba(255, 255, 255, 0.05);
    --ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

    --p-ok: #4ADE80;    --p-ok-bg: rgba(34, 197, 94, 0.14);
    --p-warn: #FACC15;  --p-warn-bg: rgba(234, 179, 8, 0.14);
    --p-bad: #F87171;   --p-bad-bg: rgba(239, 68, 68, 0.14);
    --p-info: #93C5FD;  --p-info-bg: rgba(59, 130, 246, 0.16);
    --p-neu: #D4D4D4;   --p-neu-bg: rgba(255, 255, 255, 0.08);
    color-scheme: dark;
}

/* ── Small utilities ── */
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--ui-mono); font-size: 0.93em; }
.muted { color: var(--ui-muted); }
.ui-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ui-grow { flex: 1; }
[hidden] { display: none !important; }

/* ── Page header and breadcrumb ── */
.ui-crumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--ui-muted); margin-bottom: 6px; }
.ui-crumb a { color: var(--ui-muted); text-decoration: none; }
.ui-crumb a:hover { color: var(--ui-text); }
.ui-crumb b, .ui-crumb [aria-current] { color: var(--ui-text); font-weight: 500; }
.ui-crumb .sep { opacity: 0.6; }

.ui-ph { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.ui-ph h1 { font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; color: var(--ui-text); }
.ui-ph p { color: var(--ui-muted); margin: 4px 0 0; font-size: 14px; }
.ui-ph--sub { margin-bottom: 14px; }
.ui-ph--sub h2 { font-size: 17px; line-height: 1.3; font-weight: 650; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; color: var(--ui-text); }
.ui-ph p a { color: var(--ui-accent-2); text-decoration: none; font-weight: 500; }
.ui-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Buttons ── */
.ui-btn {
    font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1;
    height: 36px; padding: 0 14px; border-radius: var(--ui-radius-sm);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid transparent; cursor: pointer; white-space: nowrap;
    text-decoration: none; background: var(--ui-card); color: var(--ui-text);
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.ui-btn svg { width: 15px; height: 15px; flex: none; }
.ui-btn--sm { height: 30px; padding: 0 10px; font-size: 13px; }
.ui-btn.is-busy { cursor: progress; pointer-events: none; opacity: .75; }
.ui-btn.is-busy::after { content: ""; width: 12px; height: 12px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-spin .7s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ui-btn.is-busy::after { animation: none; border-right-color: currentColor; opacity: .5; } }
.ui-btn--lg { height: 42px; padding: 0 18px; font-size: 14.5px; }
.ui-btn--block { width: 100%; }
.ui-btn--icon { width: 36px; padding: 0; }
.ui-btn--sm.ui-btn--icon { width: 30px; }
.ui-btn--primary { background: var(--ui-accent); color: var(--ui-accent-ink); border-color: var(--ui-accent); }
.ui-btn--primary:hover { background: var(--ui-accent-2); border-color: var(--ui-accent-2); }
.ui-btn--outline { background: var(--ui-card); border-color: var(--ui-input-border); color: var(--ui-text); }
.ui-btn--outline:hover { background: var(--ui-hover); }
.ui-btn--ghost { background: transparent; color: var(--ui-muted); }
.ui-btn--ghost:hover { background: var(--ui-hover); color: var(--ui-text); }
.ui-btn--danger { background: var(--p-bad-solid); border-color: var(--p-bad-solid); color: #fff; }
.ui-btn--danger:hover { background: #B91C1C; border-color: #B91C1C; }
.ui-btn--danger-outline { background: var(--ui-card); border-color: color-mix(in oklab, var(--p-bad-solid) 45%, transparent); color: var(--p-bad); }
.ui-btn--danger-outline:hover { background: var(--p-bad-bg); }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.ui-btn:focus-visible, .ui-input:focus-visible, .ui-switch:focus-visible, .ui-tabs a:focus-visible,
.ui-seg > *:focus-visible, .ui-chipbtn:focus-visible, .ui-item:focus-visible, .ui-table a:focus-visible {
    outline: none; box-shadow: 0 0 0 3px var(--ui-ring);
}
.ui-kbd { font: 500 11px var(--ui-mono); border: 1px solid color-mix(in oklab, currentColor 35%, transparent); border-radius: 4px; padding: 0 4px; opacity: 0.85; }
.ui-link { color: var(--ui-accent-2); font-weight: 500; font-size: 13px; text-decoration: none; }
.ui-link:hover { text-decoration: underline; }

/* ── Status pills: five tones, sentence case, readable size ── */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; line-height: 1; padding: 4px 8px; border-radius: 99px; white-space: nowrap; letter-spacing: 0; text-transform: none; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill--plain::before { display: none; }
.pill--ok { color: var(--p-ok); background: var(--p-ok-bg); }
.pill--warn { color: var(--p-warn); background: var(--p-warn-bg); }
.pill--bad { color: var(--p-bad); background: var(--p-bad-bg); }
.pill--info { color: var(--p-info); background: var(--p-info-bg); }
.pill--neu { color: var(--p-neu); background: var(--p-neu-bg); }

/* ── Cards ── */
.ui-card { background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); min-width: 0; container-type: inline-size; font-size: 14px; line-height: 1.45; color: var(--ui-text); }
.ui-card--flat { box-shadow: none; }
.ui-card--danger { border-color: color-mix(in oklab, var(--p-bad-solid) 30%, var(--ui-border)); }
.ui-card--error { border-color: color-mix(in oklab, var(--p-bad-solid) 45%, var(--ui-border)); }
.ui-card__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; padding: 14px 16px; border-bottom: 1px solid var(--ui-border-2); }
.ui-card__h > div:first-child { flex: 1 1 220px; min-width: 0; }
.ui-card__h:last-child { border-bottom: 0; }
.ui-card__h h2, .ui-card__h h3 { font-size: 14.5px; font-weight: 600; margin: 0; color: var(--ui-text); letter-spacing: 0; text-transform: none; }
.ui-card__h p { font-size: 13px; color: var(--ui-muted); margin: 2px 0 0; }
.ui-card__b { padding: 16px; }
.ui-card__f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--ui-border-2); font-size: 13px; color: var(--ui-muted); }
.ui-card__f--start { justify-content: flex-start; }
.ui-card > .ui-tablewrap:first-child table { border-top-left-radius: var(--ui-radius); border-top-right-radius: var(--ui-radius); }
.ui-card--clip { overflow: hidden; }

/* ── Layout helpers ── */
.ui-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ui-stack--sm { gap: 10px; }
.ui-detail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.ui-detail--wide-rail { grid-template-columns: minmax(0, 1fr) 340px; }
.ui-cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ui-cols--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ui-sticky { position: sticky; top: 16px; }
[data-app="acp"] .ui-sticky { top: calc(var(--topbar-height, 56px) + 16px); }
.ui-narrow { max-width: 860px; }

/* ── Tabs: top level, and a second row of pages under a group ── */
.ui-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ui-border); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tabs a, .ui-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 10px; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ui-muted); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; background: none; cursor: pointer; }
.ui-tabs a:hover, .ui-tabs button:hover { color: var(--ui-text); }
.ui-tabs [aria-current="page"], .ui-tabs [aria-selected="true"] { color: var(--ui-text); border-bottom-color: var(--ui-accent); }
.ui-tabs b { font-size: 11.5px; font-weight: 600; background: var(--ui-head); border: 1px solid var(--ui-border); border-radius: 99px; padding: 0 6px; line-height: 16px; color: var(--ui-muted); }
.ui-tabs .err { width: 7px; height: 7px; border-radius: 50%; background: var(--p-bad-solid); flex: none; }
.ui-tabs [aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.ui-subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 16px; }
.ui-subtabs a { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 99px; font-size: 13px; font-weight: 500; color: var(--ui-muted); border: 1px solid transparent; text-decoration: none; }
.ui-subtabs a:hover { background: var(--ui-hover); color: var(--ui-text); }
.ui-subtabs a[aria-current="page"] { background: var(--ui-card); color: var(--ui-text); border-color: var(--ui-border); }
.ui-subtabs i { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-border); flex: none; }
.ui-subtabs i.ok { background: var(--p-ok); }
.ui-subtabs i.warn { background: var(--p-warn-solid); }
.ui-subtabs i.bad { background: var(--p-bad-solid); }
.ui-subtabs .off { font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 6px; border-radius: 99px; border: 1px dashed var(--ui-border); color: var(--ui-muted); }

/* ── Form controls ── */
.ui-input {
    font: inherit; font-size: 14px; height: 36px; width: 100%; padding: 0 10px;
    border-radius: var(--ui-radius-sm); border: 1px solid var(--ui-input-border);
    background: var(--ui-input); color: var(--ui-text); transition: border-color 0.15s, box-shadow 0.15s;
}
.ui-input::placeholder { color: color-mix(in oklab, var(--ui-muted) 80%, transparent); }
.ui-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-ring); }
textarea.ui-input { height: auto; min-height: 64px; padding: 8px 10px; resize: vertical; line-height: 1.5; }
select.ui-input {
    padding-right: 30px; appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
}
.ui-input--sm { height: 30px; font-size: 13px; }
.ui-input--auto { width: auto; }
.ui-input[aria-invalid="true"], .ui-igroup:has([aria-invalid="true"]) { border-color: color-mix(in oklab, var(--p-bad-solid) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-bad-solid) 15%, transparent); }
.ui-input:disabled, .ui-input[readonly] { background: var(--ui-head); }
input[type="checkbox"].ui-check, input[type="radio"].ui-check, .ui-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ui-accent); vertical-align: middle; margin: 0; }

.ui-err { font-size: 12.5px; color: var(--p-bad); margin-top: 6px; }
.ui-hint { font-size: 12.5px; color: var(--ui-muted); margin-top: 6px; }

.ui-searchin { position: relative; width: 260px; max-width: 100%; }
.ui-searchin svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ui-muted); pointer-events: none; }
.ui-searchin .ui-input { padding-left: 32px; }

.ui-igroup { display: flex; align-items: stretch; border: 1px solid var(--ui-input-border); border-radius: var(--ui-radius-sm); background: var(--ui-input); overflow: hidden; height: 36px; }
.ui-igroup:focus-within { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-ring); }
.ui-igroup .add { display: flex; align-items: center; padding: 0 10px; color: var(--ui-muted); font-size: 13px; background: var(--ui-head); white-space: nowrap; }
.ui-igroup input, .ui-igroup select { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; padding: 0 10px; color: var(--ui-text); }
.ui-igroup input:focus, .ui-igroup select:focus { outline: none; }
.ui-igroup .ui-btn { border-radius: 0; height: auto; border: 0; border-left: 1px solid var(--ui-border); }
.ui-igroup--sm { height: 32px; }
.ui-igroup--sm input { font-size: 13.5px; }
.ui-igroup input.r, .ui-input.r { text-align: right; }

/* Field row: label and explanation on the left, control on the right. It
   stacks when its card is narrow instead of squeezing the control. */
.ui-field { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 14px 16px; border-top: 1px solid var(--ui-border-2); align-items: start; }
.ui-field:first-child, .ui-card__h + .ui-field { border-top: 0; }
.ui-field > div:first-child > label, .ui-field .lbl { font-weight: 500; font-size: 14px; display: block; color: var(--ui-text); text-transform: none; letter-spacing: 0; margin: 0; }
.ui-field .d { font-size: 13px; color: var(--ui-muted); margin-top: 2px; }
@container (max-width: 600px) { .ui-field { grid-template-columns: 1fr; gap: 8px; } }

/* Stacked field: label over control. */
.ui-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui-f > label, .ui-f > .lbl { font-weight: 500; font-size: 13.5px; color: var(--ui-text); text-transform: none; letter-spacing: 0; margin: 0; }
.ui-f .d { font-size: 12.5px; color: var(--ui-muted); }
.ui-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container (max-width: 520px) { .ui-fgrid { grid-template-columns: 1fr; } }

.ui-legend { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ui-muted); padding: 14px 16px 0; }

/* Setting row: a sentence and a switch. */
.ui-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--ui-border-2); }
.ui-row:first-child, .ui-card__h + .ui-row { border-top: 0; }
.ui-row .t { font-weight: 500; color: var(--ui-text); }
.ui-row .d { font-size: 13px; color: var(--ui-muted); margin-top: 2px; }

.ui-switch { position: relative; width: 36px; height: 20px; border-radius: 99px; background: color-mix(in oklab, var(--ui-text) 22%, transparent); border: 0; cursor: pointer; flex: none; padding: 0; transition: background-color 0.15s; }
.ui-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.ui-switch[aria-checked="true"] { background: var(--ui-accent); }
.ui-switch[aria-checked="true"]::after { transform: translateX(16px); }
.ui-switch:disabled { opacity: 0.55; cursor: not-allowed; }

.ui-tg { display: inline-flex; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); overflow: hidden; flex-wrap: wrap; }
.ui-tg button, .ui-tg label { font: inherit; font-size: 13px; font-weight: 500; height: 32px; padding: 0 14px; border: 0; background: var(--ui-card); color: var(--ui-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ui-tg > * + * { border-left: 1px solid var(--ui-border) !important; }
.ui-tg [aria-pressed="true"], .ui-tg label:has(input:checked) { background: var(--ui-head); color: var(--ui-text); box-shadow: inset 0 -2px 0 var(--ui-accent); }
/* The input hides inside its label. Without a positioned label it is placed
   against the page, and in a scrolling panel it stretches the page itself. */
.ui-tg label { position: relative; }
.ui-tg label input { position: absolute; opacity: 0; pointer-events: none; }
.ui-tg--block { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }

.ui-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.ui-choice { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-card); cursor: pointer; font-size: 13.5px; }
.ui-choice > i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ui-input-border); margin-top: 2px; }
.ui-choice b { display: block; font-weight: 600; color: var(--ui-text); }
.ui-choice span { color: var(--ui-muted); font-size: 12.5px; }
.ui-choice[aria-checked="true"], .ui-choice:has(input:checked) { border-color: var(--ui-accent); background: color-mix(in oklab, var(--ui-accent) 6%, var(--ui-card)); }
.ui-choice[aria-checked="true"] > i, .ui-choice:has(input:checked) > i { border: 5px solid var(--ui-accent); }
.ui-choice { position: relative; }
.ui-choice input { position: absolute; opacity: 0; pointer-events: none; }

.ui-secret { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 36px; font-size: 13.5px; }
.ui-secret .set { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-text); }
.ui-secret .set svg { width: 14px; height: 14px; color: var(--p-ok); }
.ui-secret .unset { color: var(--ui-muted); }

.ui-tokens { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ui-tokens > span, .ui-token { font: 500 12px var(--ui-mono); background: var(--ui-head); border: 1px solid var(--ui-border); border-radius: 6px; padding: 3px 6px; color: var(--ui-text); }
.ui-token--btn { cursor: pointer; }
.ui-token--bad { color: var(--p-bad); background: var(--p-bad-bg); border-color: color-mix(in oklab, var(--p-bad-solid) 30%, transparent); }

.ui-keybox { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px; min-height: 40px; border-radius: var(--ui-radius-sm); border: 1px solid var(--ui-border); background: var(--ui-head); }
.ui-keybox .mono { flex: 1; letter-spacing: 0.04em; overflow-wrap: anywhere; }

.ui-code6 { display: grid; grid-template-columns: repeat(6, 44px); gap: 8px; }
.ui-code6 input { height: 50px; width: 44px; text-align: center; font: 600 20px var(--ui-mono); border-radius: var(--ui-radius-sm); border: 1px solid var(--ui-input-border); background: var(--ui-input); color: var(--ui-text); padding: 0; }
.ui-code6 input:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-ring); }
@media (max-width: 420px) { .ui-code6 { grid-template-columns: repeat(6, 1fr); gap: 6px; } .ui-code6 input { width: 100%; } }

.ui-rules { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ui-muted); margin-top: 4px; }
.ui-rules span { display: inline-flex; align-items: center; gap: 6px; }
.ui-rules svg { width: 13px; height: 13px; opacity: 0.45; }
.ui-rules .ok { color: var(--p-ok); }
.ui-rules .ok svg { opacity: 1; }

.ui-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.ui-codes span { font: 500 13px var(--ui-mono); padding: 6px 10px; border: 1px dashed var(--ui-border); border-radius: 6px; text-align: center; background: var(--ui-head); }

/* ── Toolbar, segmented filters, facets, bulk bar ── */
.ui-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px; border-bottom: 1px solid var(--ui-border-2); }
.ui-toolbar .grow { flex: 1; }
.ui-toolbar form { display: contents; }

.ui-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: var(--ui-head); border: 1px solid var(--ui-border); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ui-seg::-webkit-scrollbar { display: none; }
.ui-seg > a, .ui-seg > button { font: inherit; font-size: 13px; font-weight: 500; border: 0; background: transparent; color: var(--ui-muted); height: 28px; padding: 0 10px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; }
.ui-seg > a:hover, .ui-seg > button:hover { color: var(--ui-text); }
.ui-seg b { font-weight: 600; font-size: 11.5px; color: var(--ui-muted); background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 99px; padding: 0 6px; line-height: 16px; }
.ui-seg [aria-pressed="true"], .ui-seg [aria-current="page"] { background: var(--ui-card); color: var(--ui-text); box-shadow: 0 1px 2px rgba(17, 24, 39, 0.1); }
.ui-seg [aria-pressed="true"] b, .ui-seg [aria-current="page"] b { color: var(--ui-accent-2); border-color: color-mix(in oklab, var(--ui-accent) 35%, transparent); }

.ui-facet { font: inherit; font-size: 13px; font-weight: 500; height: 30px; padding: 0 10px; border-radius: var(--ui-radius-sm); border: 1px dashed color-mix(in oklab, var(--ui-text) 25%, transparent); background: transparent; color: var(--ui-text); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.ui-facet svg { width: 14px; height: 14px; color: var(--ui-muted); }
.ui-facet .sel { display: inline-flex; gap: 4px; border-left: 1px solid var(--ui-border); padding-left: 6px; margin-left: 2px; }
.ui-facet .sel span { font-size: 11.5px; background: var(--ui-head); border-radius: 4px; padding: 1px 5px; }
.ui-facet[aria-expanded="true"] { border-style: solid; border-color: var(--ui-accent); }
.ui-facetpanel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; background: var(--ui-head); border-bottom: 1px solid var(--ui-border-2); font-size: 13px; }
.ui-facetpanel label { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-card); cursor: pointer; color: var(--ui-text); font-weight: 400; text-transform: none; letter-spacing: 0; margin: 0; }
.ui-facetpanel label .tnum { color: var(--ui-muted); font-size: 12px; }
.ui-facetpanel input { accent-color: var(--ui-accent); width: auto; }
.ui-facetpanel .ui-input { width: auto; height: 30px; font-size: 13px; }
/* A list shown as cards or rows (list-toolbar.php $ltViews), and the columns a viewer hides */
.ui-view { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: var(--ui-head); border: 1px solid var(--ui-border); }
.ui-view a { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--ui-muted); text-decoration: none; }
.ui-view a svg { width: 14px; height: 14px; }
.ui-view a[aria-current="page"] { background: var(--ui-card); color: var(--ui-text); box-shadow: 0 1px 2px rgba(17, 24, 39, .1); }
.ui-table th[data-col][hidden], .ui-table td[data-col][hidden] { display: none !important; }

.ui-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--ui-border-2); background: color-mix(in oklab, var(--ui-accent) 8%, var(--ui-card)); }
.ui-bulk > b { font-weight: 600; margin-right: 6px; }

/* ── Data table ── */
.ui-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.ui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; color: var(--ui-text); }
.ui-table th { position: sticky; top: 0; z-index: 1; background: var(--ui-head); text-align: left; font-weight: 500; font-size: 12.5px; color: var(--ui-muted); height: 38px; padding: 0 12px; border-bottom: 1px solid var(--ui-border); white-space: nowrap; text-transform: none; letter-spacing: 0; }
.ui-table td { height: 56px; padding: 8px 12px; border-bottom: 1px solid var(--ui-border-2); vertical-align: middle; }
.ui-table--dense td { height: 44px; padding: 6px 12px; }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr { position: relative; }
.ui-table tbody tr:hover td { background: var(--ui-hover); }
.ui-table tfoot td { background: var(--ui-head); border-top: 1px solid var(--ui-border); border-bottom: 0; height: auto; padding: 10px 12px; font-size: 13px; color: var(--ui-muted); }
.ui-table tfoot b { color: var(--ui-text); font-weight: 600; }
.ui-table .r { text-align: right; }
.ui-table .c { text-align: center; }
.ui-table th.r { text-align: right; }
.ui-table .nw { white-space: nowrap; }
.ui-table .c-check { width: 40px; padding-right: 0; }
.ui-table .c-act { width: 1%; white-space: nowrap; text-align: right; }
.ui-table .c-act > * + * { margin-left: 4px; }
.ui-table .t1 { font-weight: 500; color: var(--ui-text); }
.ui-table .t2 { font-size: 12.5px; color: var(--ui-muted); margin-top: 1px; }
.ui-table a { color: inherit; text-decoration: none; }
.ui-table a.ui-link { color: var(--ui-accent-2); }
.ui-table a.ui-btn--primary { color: var(--ui-accent-ink); }
.ui-table a.ui-btn--danger { color: #fff; }
.ui-table a.rowlink::after { content: ""; position: absolute; inset: 0; }
.ui-table a.rowlink:hover { text-decoration: underline; text-underline-offset: 2px; }
.ui-table .lift, .ui-table button, .ui-table input, .ui-table select, .ui-table form { position: relative; z-index: 2; }
.ui-table tr.sel td { background: color-mix(in oklab, var(--ui-accent) 7%, transparent); }
.ui-table tr.is-muted td { color: var(--ui-muted); }
.ui-table tr.ui-confirmrow td { background: var(--p-bad-bg); height: auto; padding: 12px; }
.ui-confirmrow .inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ui-confirmrow .inner > svg { width: 18px; height: 18px; color: var(--p-bad); flex: none; }
.ui-confirmrow .inner > span { flex: 1; min-width: 220px; }
.ui-late { color: var(--p-bad); font-size: 12.5px; }
.ui-th-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit !important; text-decoration: none; }
.ui-th-sort svg { width: 13px; height: 13px; opacity: 0.7; }
.ui-table th[aria-sort] .ui-th-sort { color: var(--ui-text) !important; }
.ui-table th.r .ui-th-sort { flex-direction: row-reverse; }
.ui-prod { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ui-prod__ic { width: 32px; height: 32px; border-radius: var(--ui-radius-sm); display: grid; place-items: center; background: color-mix(in oklab, var(--ui-accent) 12%, var(--ui-card)); color: var(--ui-accent-2); flex: none; overflow: hidden; }
.ui-prod__ic svg, .ui-prod__ic img { width: 18px; height: 18px; }
.ui-prod__ic .dpn-icon, .ui-prod__ic .dpn-ic { width: 22px; height: 22px; }
.ui-chev { width: 16px; height: 16px; color: var(--ui-muted); vertical-align: middle; }
/* Working icons keep their size whatever an older stylesheet says about svg. */
.ui-ic { max-width: none; flex: none; }
.ui-table td.c-act { min-width: 40px; }

.ui-pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--ui-border-2); font-size: 13px; color: var(--ui-muted); }
.ui-pager__r { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-pager select { height: 30px; width: auto; font-size: 13px; }
.ui-pager .ui-btn { min-width: 30px; }

.ui-empty { border: 1px dashed var(--ui-border); border-radius: var(--ui-radius); padding: 28px 16px; text-align: center; margin: 14px; }
.ui-empty--bare { margin: 0; }
.ui-empty > svg { width: 28px; height: 28px; color: var(--ui-muted); margin-bottom: 6px; }
.ui-empty h4 { font-size: 15px; font-weight: 600; margin: 0; color: var(--ui-text); }
.ui-empty p { color: var(--ui-muted); font-size: 13.5px; margin: 4px auto 12px; max-width: 46ch; }

/* ── KPI cards ── */
.ui-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.ui-kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ui-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-kpi { padding: 14px 16px; display: block; color: inherit; text-decoration: none; }
a.ui-kpi:hover { border-color: color-mix(in oklab, var(--ui-accent) 40%, var(--ui-border)); }
.ui-kpi__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--ui-muted); font-size: 13px; }
.ui-kpi__lbl { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ui-kpi__ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: color-mix(in oklab, var(--ui-accent) 12%, var(--ui-card)); color: var(--ui-accent-2); flex: none; }
.ui-kpi__ic svg { width: 14px; height: 14px; }
.ui-kpi__v { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 4px; color: var(--ui-text); line-height: 1.2; }
.ui-kpi__f { font-size: 13px; margin-top: 6px; color: var(--ui-text); }
.ui-kpi__f .muted { display: block; font-size: 12.5px; margin-top: 1px; }
.ui-kpi__f.is-warn { color: var(--p-warn); }
.ui-kpi__f.is-bad { color: var(--p-bad); }
.ui-kpi__f.is-ok { color: var(--p-ok); }
.ui-delta { font-size: 12px; font-weight: 500; border: 1px solid var(--ui-border); border-radius: 6px; padding: 1px 6px; color: var(--ui-text); white-space: nowrap; }
.ui-delta--up { color: var(--p-ok); }
.ui-delta--down { color: var(--p-bad); }
.ui-spark { display: block; margin-top: 8px; }

.ui-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-card); margin-bottom: 16px; }
.ui-facts > div { padding: 12px 16px; border-left: 1px solid var(--ui-border-2); min-width: 0; }
.ui-facts > div:first-child { border-left: 0; }
.ui-facts .l { font-size: 12.5px; color: var(--ui-muted); }
.ui-facts .v { font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 2px; color: var(--ui-text); }

/* ── Item lists: one row per thing, one right edge ── */
.ui-items { display: flex; flex-direction: column; }
.ui-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 20px; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--ui-border-2); color: inherit; text-decoration: none; position: relative; }
.ui-item:first-child { border-top: 0; }
a.ui-item:hover, .ui-item--link:hover { background: var(--ui-hover); }
.ui-item--noicon { grid-template-columns: minmax(0, 1fr) auto 20px; }
.ui-item--plain { grid-template-columns: minmax(0, 1fr) auto; }
.ui-item--act { grid-template-columns: 32px minmax(0, 1fr) auto; }
.ui-item__ic { width: 32px; height: 32px; border-radius: var(--ui-radius-sm); display: grid; place-items: center; background: var(--ui-head); color: var(--ui-muted); flex: none; }
.ui-item__ic svg { width: 16px; height: 16px; }
.ui-item__ic .dpn-icon, .ui-item__ic .dpn-ic { width: 24px; height: 24px; }
.ui-item__ic.is-bad { color: var(--p-bad); }
.ui-item__ic.is-warn { color: var(--p-warn); }
.ui-item__ic.is-ok { color: var(--p-ok); }
.ui-item__t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-text); }
.ui-item__d { font-size: 12.5px; color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-item__d--wrap { white-space: normal; }
.ui-item__s { justify-self: end; display: flex; align-items: center; gap: 8px; }
.ui-item__v { font-weight: 600; font-variant-numeric: tabular-nums; }

.ui-avatar { width: 30px; height: 30px; border-radius: 50%; background: color-mix(in oklab, var(--ui-accent) 18%, var(--ui-card)); color: var(--ui-accent-2); display: inline-grid; place-items: center; font-weight: 600; font-size: 12.5px; flex: none; }
.ui-avatar--sm { width: 24px; height: 24px; font-size: 11px; }

/* ── Description list ── */
.ui-dl { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.ui-dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; font-size: 13.5px; }
.ui-dl dt { color: var(--ui-muted); margin: 0; font-weight: 400; }
.ui-dl dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; color: var(--ui-text); }
.ui-dl dd .muted { font-weight: 400; font-size: 12.5px; display: block; }
.ui-dl--wide > div { grid-template-columns: 150px minmax(0, 1fr); }

/* ── Timeline ── */
.ui-timeline { display: flex; flex-direction: column; }
.ui-tl { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; font-size: 13.5px; }
.ui-tl > i { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-border); margin: 6px auto 0; }
.ui-tl > i.ok { background: var(--p-ok); }
.ui-tl > i.info { background: var(--ui-accent); }
.ui-tl > i.warn { background: var(--p-warn-solid); }
.ui-tl > i.bad { background: var(--p-bad-solid); }
.ui-tl time { color: var(--ui-muted); font-size: 12.5px; white-space: nowrap; }

/* ── Alerts, confirmations and notes, all in the page flow ── */
.ui-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid color-mix(in oklab, var(--p-warn) 30%, transparent); background: var(--p-warn-bg); margin-bottom: 16px; font-size: 13.5px; color: var(--ui-text); }
.ui-alert > svg { width: 18px; height: 18px; color: var(--p-warn); flex: none; }
.ui-alert .grow { flex: 1; min-width: 200px; }
.ui-alert b { font-weight: 600; }
.ui-alert--bad { border-color: color-mix(in oklab, var(--p-bad) 35%, transparent); background: var(--p-bad-bg); }
.ui-alert--bad > svg { color: var(--p-bad); }
.ui-alert--ok { border-color: color-mix(in oklab, var(--p-ok) 30%, transparent); background: var(--p-ok-bg); }
.ui-alert--ok > svg { color: var(--p-ok); }
.ui-alert--info { border-color: color-mix(in oklab, var(--p-info) 30%, transparent); background: var(--p-info-bg); }
.ui-alert--info > svg { color: var(--p-info); }
.ui-alert--flush { margin-bottom: 0; }

.ui-confirm { margin-top: 12px; border: 1px solid color-mix(in oklab, var(--p-bad-solid) 40%, transparent); background: var(--p-bad-bg); border-radius: 10px; padding: 14px; }
.ui-confirm h4 { font-size: 14px; font-weight: 600; color: var(--p-bad); margin: 0; }
.ui-confirm p { font-size: 13.5px; margin: 4px 0 12px; color: var(--ui-text); }
.ui-confirm--neutral { border-color: var(--ui-border); background: var(--ui-head); }
.ui-confirm--neutral h4 { color: var(--ui-text); }
.ui-confirm--flush { margin-top: 0; }
.ui-ask { flex: 1 1 100%; text-align: left; }
.ui-ask p, .ui-askrow .ui-ask__msg { white-space: pre-line; }
.ui-askrow.is-neutral td { background: var(--ui-head); }
.ui-bulk + .ui-ask { margin: 10px 12px; }
.ui-table td.tnum, .ui-table th { white-space: nowrap; }
.ui-askrow.is-neutral .inner > svg { color: var(--ui-muted); }

.ui-warncard { margin-top: 10px; border: 1px solid color-mix(in oklab, var(--p-warn) 35%, transparent); background: var(--p-warn-bg); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; color: var(--ui-text); }
.ui-warncard b { display: block; margin-bottom: 2px; }
.ui-okline { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--p-ok); }
.ui-okline svg { width: 16px; height: 16px; flex: none; }
.ui-okline.is-bad { color: var(--p-bad); }
.ui-okline.is-muted { color: var(--ui-muted); }
.ui-okbox { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--p-ok-bg); color: var(--ui-text); font-size: 13.5px; }
.ui-okbox svg { width: 16px; height: 16px; color: var(--p-ok); flex: none; margin-top: 2px; }
.ui-morepanel { border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-card); padding: 12px 14px; font-size: 13.5px; }
.ui-inset { padding: 14px 16px; border-bottom: 1px solid var(--ui-border-2); background: var(--ui-head); }

/* ── Sticky action bar that tracks unsaved changes ── */
.ui-actionbar { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: color-mix(in oklab, var(--ui-card) 94%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 -6px 20px -14px rgba(0, 0, 0, 0.35); }
[data-theme="dark"] .ui-actionbar { background: color-mix(in oklab, var(--ui-bg) 88%, #000 12%); }
.ui-actionbar .state { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ui-muted); flex: 1; min-width: 180px; }
.ui-actionbar .state > i { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-border); flex: none; }
.ui-actionbar.is-dirty .state { color: var(--ui-text); }
.ui-actionbar.is-dirty .state > i { background: var(--p-warn-solid); }
.ui-actionbar.is-error .state { color: var(--p-bad); }
.ui-actionbar.is-error .state > i { background: var(--p-bad-solid); }
.ui-actionbar .leave { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; padding-top: 10px; border-top: 1px solid var(--ui-border-2); font-size: 13.5px; }
/* Focus and scrolling stop short of the bar, so it never covers the field being used. */
html:has(.ui-actionbar) { scroll-padding-bottom: 88px; }
/* A question asked from a button in the bar (data-ask) takes its own line at the end of the bar. */
.ui-actionbar > .ui-ask { flex-basis: 100%; order: 9; margin-top: 0; }

/* ── Chips, steps, progress ── */
.ui-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-chipbtn { font: inherit; font-size: 12.5px; font-weight: 500; height: 28px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--ui-border); background: var(--ui-card); color: var(--ui-text); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; }
.ui-chipbtn b { font-weight: 600; color: var(--ui-muted); }
.ui-chipbtn[aria-pressed="true"], .ui-chipbtn[aria-current="page"] { border-color: var(--ui-accent); color: var(--ui-accent-2); background: color-mix(in oklab, var(--ui-accent) 8%, var(--ui-card)); }

.ui-progress { height: 6px; border-radius: 99px; background: var(--ui-border-2); overflow: hidden; }
.ui-progress > i { display: block; height: 100%; background: var(--ui-accent); }

.ui-steps { display: flex; flex-direction: column; }
.ui-step { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--ui-border-2); }
.ui-step:first-child { border-top: 0; }
.ui-step__dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ui-input-border); display: grid; place-items: center; }
.ui-step__dot.done { background: var(--p-ok); border-color: var(--p-ok); color: #fff; }
.ui-step__dot svg { width: 11px; height: 11px; }
.ui-step .t { font-weight: 500; color: var(--ui-text); }
.ui-step .d { font-size: 12.5px; color: var(--ui-muted); }
.ui-step .done-t { color: var(--ui-muted); text-decoration: line-through; text-decoration-color: var(--ui-border); }
.ui-step .a { justify-self: end; }

.ui-stepdots { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ui-muted); }
.ui-stepdots i { width: 22px; height: 4px; border-radius: 99px; background: var(--ui-border); }
.ui-stepdots i.on { background: var(--ui-accent); }
.ui-stepdots span { margin-left: 6px; }

/* ── Sessions and devices ── */
.ui-session { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--ui-border-2); }
.ui-session:first-child { border-top: 0; }
.ui-session .t { font-weight: 500; color: var(--ui-text); }
.ui-session .d { font-size: 12.5px; color: var(--ui-muted); }

/* ── Charts ── */
.ui-chart { display: block; width: 100%; height: auto; }
.ui-chart text { fill: var(--ui-muted); font: 11px var(--font-body, Inter, system-ui, sans-serif); }
.ui-chart .grid { stroke: var(--ui-border-2); stroke-width: 1; }
.ui-legend-row { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12.5px; color: var(--ui-muted); }
.ui-legend-row i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ui-aging { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--ui-border-2); margin-bottom: 10px; }
.ui-aging i { display: block; height: 100%; }

/* ── Summary tiles and a grouped work queue ── */
.ui-sumtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.ui-sumtile { padding: 12px 14px; text-align: left; font: inherit; color: inherit; background: var(--ui-card); text-decoration: none; display: block; }
.ui-sumtile .l { font-size: 12.5px; color: var(--ui-muted); }
.ui-sumtile .v { font-size: 20px; font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums; color: var(--ui-text); }
.ui-sumtile .v.bad { color: var(--p-bad); }
.ui-sumtile .v.ok { color: var(--p-ok); }
.ui-qgroup { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ui-muted); padding: 10px 16px; background: var(--ui-head); border-top: 1px solid var(--ui-border-2); border-bottom: 1px solid var(--ui-border-2); display: flex; gap: 8px; align-items: center; }
.ui-qgroup:first-child { border-top: 0; }
.ui-qgroup > i { width: 8px; height: 8px; border-radius: 50%; }
.ui-q { display: grid; grid-template-columns: 32px minmax(0, 1fr) 150px auto; gap: 12px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--ui-border-2); }
.ui-qgroup + .ui-q { border-top: 0; }
.ui-q .who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ui-muted); }
.ui-q .acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ui-snooze { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 16px 12px 60px; background: var(--ui-head); border-top: 1px dashed var(--ui-border); font-size: 13px; }

/* ── Uploads, colour swatches and previews ── */
.ui-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 12px; border: 1px dashed var(--ui-input-border); border-radius: 10px; background: var(--ui-head); }
.ui-drop__thumb { width: 56px; height: 56px; border-radius: 10px; background: #fff; border: 1px solid var(--ui-border); display: grid; place-items: center; overflow: hidden; flex: none; }
.ui-drop__thumb.dark { background: #0D1830; }
.ui-drop__thumb img { max-width: 44px; max-height: 44px; object-fit: contain; }
.ui-drop__meta { flex: 1 1 200px; min-width: 0; font-size: 13px; }
.ui-drop__meta b { display: block; font-weight: 500; color: var(--ui-text); overflow-wrap: anywhere; }
.ui-drop__meta span { color: var(--ui-muted); }
.ui-drop.is-over { border-color: var(--ui-accent); background: color-mix(in oklab, var(--ui-accent) 6%, var(--ui-card)); }
.ui-swrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ui-sw { width: 36px; height: 36px; border-radius: var(--ui-radius-sm); border: 1px solid var(--ui-border); flex: none; padding: 0; cursor: pointer; }
.ui-sw input[type="color"] { opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.ui-prev { position: sticky; top: calc(var(--topbar-height, 0px) + 16px); }
.ui-prev__stage { padding: 14px; background: var(--ui-head); border-bottom-left-radius: var(--ui-radius); border-bottom-right-radius: var(--ui-radius); }

/* ── Sign-in pages (public, portal palette) ── */
.ui-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); max-width: 980px; width: 100%; margin: 0 auto; border-radius: 16px; overflow: hidden; background: var(--ui-card); border: 1px solid var(--ui-border); box-shadow: 0 20px 40px -28px rgba(17, 34, 64, 0.45); }
[data-theme="dark"] .ui-auth { background: color-mix(in oklab, #022268 70%, #0b2f7d); }
.ui-auth__aside { background: linear-gradient(150deg, #4A86F5, #2E6FF0 55%, #1B57CE); color: #fff; padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
.ui-auth__aside h2 { font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: #fff; }
.ui-auth__aside p { font-size: 13.5px; opacity: 0.92; margin: 0; }
.ui-auth__aside ul { list-style: none; padding: 0; margin: auto 0 0; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; font-weight: 600; }
.ui-auth__aside li { display: flex; gap: 10px; align-items: center; }
.ui-auth__aside li span { width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, 0.16); display: grid; place-items: center; flex: none; }
.ui-auth__aside li svg { width: 15px; height: 15px; }
.ui-auth__body { padding: 32px 34px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ui-auth__body h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--ui-text); }
.ui-auth__body .lede { color: var(--ui-muted); font-size: 14px; margin: 4px 0 0; }
.ui-auth__kick { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-accent-2); }
[data-theme="dark"] .ui-auth__kick { color: #8CC2FF; }
.ui-auth__note { font-size: 13px; color: var(--ui-muted); margin: 0; }
.ui-auth__note a { color: var(--ui-accent-2); font-weight: 500; text-decoration: none; }
[data-theme="dark"] .ui-auth__note a { color: #8CC2FF; }

/* ── Choice cards: one radio choice drawn as cards (Links' home page, New page) ── */
.ui-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ui-pick { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 38px 12px 14px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-card); cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; margin: 0; }
.ui-pick:hover { border-color: color-mix(in oklab, var(--ui-accent) 45%, var(--ui-border)); }
.ui-pick:has(input:checked) { border-color: var(--ui-accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--ui-accent) 25%, transparent); background: color-mix(in oklab, var(--ui-accent) 5%, var(--ui-card)); }
.ui-pick:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ui-accent) 40%, transparent); }
.ui-pick input { position: absolute; top: 14px; right: 14px; width: 16px; height: 16px; margin: 0; accent-color: var(--ui-accent); }
.ui-pick__ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--ui-head); color: var(--ui-muted); }
.ui-pick:has(input:checked) .ui-pick__ic { background: color-mix(in oklab, var(--ui-accent) 12%, var(--ui-card)); color: var(--ui-accent-2); }
.ui-pick__ic svg { width: 17px; height: 17px; }
.ui-pick__t { display: block; font-size: 14px; font-weight: 600; color: var(--ui-text); }
.ui-pick__d { display: block; font-size: 12.5px; color: var(--ui-muted); line-height: 1.45; margin-top: 2px; }

/* ── Phone widths ── */
@media (max-width: 1100px) {
    .ui-kpis--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .ui-detail, .ui-detail--wide-rail, .ui-cols, .ui-cols--even { grid-template-columns: minmax(0, 1fr); }
    .ui-sticky, .ui-prev { position: static; }
    .ui-kpis, .ui-kpis--5, .ui-kpis--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ui-sumtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-facts > div:nth-child(3) { border-left: 0; }
    .ui-facts > div:nth-child(n+3) { border-top: 1px solid var(--ui-border-2); }
    .ui-auth { grid-template-columns: 1fr; }
    .ui-auth__aside { display: none; }
}
@media (max-width: 760px) {
    .ui-ph h1 { font-size: 21px; }
    /* A row whose right side is a status line puts it under the label, so a
       long status never squeezes the label to a word a line. */
    .ui-row:has(> .ui-okline) { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .ui-kpi__v { font-size: 22px; }
    .ui-searchin { width: 100%; }
    .ui-toolbar .grow { display: none; }
    .ui-toolbar .ui-facet { flex: 1; }
    .ui-auth__body { padding: 24px 20px; }

    /* A table becomes aligned two-line rows on a phone: name and status on
       line one, meta and the action on line two, on the same edges. Cells
       opt in with m-first / m-pill / m-meta / m-end; m-hide drops out. */
    /* Filter tabs share the phone's width before they resort to scrolling. */
    .ui-toolbar .ui-seg { display: flex; width: 100%; }
    .ui-toolbar .ui-seg > a, .ui-toolbar .ui-seg > button { flex: 1 0 auto; justify-content: center; padding: 0 7px; gap: 4px; }

    .ui-table--stack thead { display: none; }
    .ui-table--stack, .ui-table--stack tbody, .ui-table--stack tfoot { display: block; }
    .ui-table--stack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense; gap: 4px 10px; padding: 12px 14px; border-bottom: 1px solid var(--ui-border-2); }
    .ui-table--stack tbody tr:last-child { border-bottom: 0; }
    .ui-table--stack td { display: block; height: auto; padding: 0; border: 0; background: none !important; width: auto !important; min-width: 0; }
    .ui-table--stack td.m-end, .ui-table--stack td.m-pill { white-space: nowrap; }
    .ui-table--stack td.m-hide { display: none; }
    .ui-table--stack td.m-first { grid-column: 1; }
    .ui-table--stack td.m-pill { grid-column: 2; grid-row: 1; justify-self: end; }
    .ui-table--stack td.m-meta { grid-column: 1; font-size: 12.5px; color: var(--ui-muted); text-align: left; }
    .ui-table--stack td.m-end { grid-column: 2; justify-self: end; text-align: right; }
    .ui-table--stack td.m-full { grid-column: 1 / -1; }
    .ui-table--stack td.m-go { grid-column: 1 / -1; justify-self: stretch; }
    .ui-table--stack td.m-go .ui-btn { width: 100%; justify-content: center; margin-top: 6px; }
    .ui-table--stack tr.ui-confirmrow { display: block; }
    .ui-table--stack tfoot tr { display: block; padding: 0; }
    .ui-table--stack tfoot td { padding: 12px 14px; }

    .ui-item { grid-template-columns: 32px minmax(0, 1fr) auto; padding: 11px 14px; }
    .ui-item--noicon, .ui-item--plain { grid-template-columns: minmax(0, 1fr) auto; }
    .ui-item--act { grid-template-columns: 32px minmax(0, 1fr); }
    .ui-item--act > :last-child { grid-column: 2; justify-self: start; }
    .ui-item > .ui-chev { display: none; }
    .ui-step { grid-template-columns: 22px minmax(0, 1fr); padding: 10px 14px; }
    .ui-step .a { grid-column: 2; justify-self: start; }
    .ui-q { grid-template-columns: 32px minmax(0, 1fr); row-gap: 6px; }
    .ui-q .who, .ui-q .acts { grid-column: 2; justify-content: flex-start; }
    .ui-snooze { padding-left: 16px; }
    .ui-actionbar .state span { display: none; }
    .ui-actionbar .state { min-width: 0; }
    .ui-dl > div, .ui-dl--wide > div { grid-template-columns: 120px minmax(0, 1fr); }
}
@media (max-width: 420px) {
    .ui-kpi__f .muted { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   The admin console's older classes, drawn in the same grammar.

   Ninety admin screens use .card, .table, .badge, .btn and .form-group.
   Rather than leave them looking like a different product until each one
   is rebuilt, their colours, borders and type follow the tokens above:
   sentence case labels at text colour, inputs with a visible border and a
   focus ring, table headers on a muted band, status badges that read like
   pills. :where() keeps the specificity of the original rule, so a page's
   own stylesheet still wins where it means to.
   ══════════════════════════════════════════════════════════════════════ */
:where([data-app="acp"]) .card { border-color: var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }
:where([data-app="acp"]) .card__header { border-bottom-color: var(--ui-border-2); }
:where([data-app="acp"]) .card__title { font-size: 14.5px; font-weight: 600; }
:where([data-app="acp"]) .page-title { font-size: 24px; letter-spacing: -0.02em; }

:where([data-app="acp"]) .table { font-size: 13.5px; }
:where([data-app="acp"]) .table th { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12.5px; color: var(--ui-muted); background: var(--ui-head); border-bottom: 1px solid var(--ui-border); white-space: nowrap; padding-top: 0.6rem; padding-bottom: 0.6rem; }
:where([data-app="acp"]) .table td { border-bottom-color: var(--ui-border-2); }
:where([data-app="acp"]) .table tbody tr:hover { background: var(--ui-hover); }
:where([data-app="acp"]) .table a:not(.btn):not(.action-icon) { color: var(--ui-text); text-decoration: none; font-weight: 500; }
:where([data-app="acp"]) .table a:not(.btn):not(.action-icon):hover { text-decoration: underline; text-underline-offset: 2px; }

:where([data-app="acp"]) .badge { display: inline-block; font-size: 12px; font-weight: 500; line-height: 1; padding: 4px 8px; border-radius: 99px; text-transform: none; letter-spacing: 0; white-space: nowrap; }
:where([data-app="acp"]) .badge::first-letter { text-transform: uppercase; }
:where([data-app="acp"]) .badge--success { color: var(--p-ok); background: var(--p-ok-bg); }
:where([data-app="acp"]) .badge--warning, :where([data-app="acp"]) .badge--expiring { color: var(--p-warn); background: var(--p-warn-bg); }
:where([data-app="acp"]) .badge--danger { color: var(--p-bad); background: var(--p-bad-bg); }
:where([data-app="acp"]) .badge--muted { color: var(--p-neu); background: var(--p-neu-bg); }
:where([data-app="acp"]) .badge--gold, :where([data-app="acp"]) .badge--purple { color: var(--p-info); background: var(--p-info-bg); }

:where([data-app="acp"]) .btn { font-size: 13.5px; font-weight: 500; border-radius: var(--ui-radius-sm); border-color: var(--ui-input-border); background: var(--ui-card); color: var(--ui-text); padding: 0.5rem 0.9rem; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
:where([data-app="acp"]) .btn:hover { background: var(--ui-hover); border-color: var(--ui-input-border); }
:where([data-app="acp"]) .btn--primary { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-accent-ink); }
:where([data-app="acp"]) .btn--primary:hover { background: var(--ui-accent-2); border-color: var(--ui-accent-2); }
:where([data-app="acp"]) .btn--danger { background: var(--ui-card); border-color: color-mix(in oklab, var(--p-bad-solid) 45%, transparent); color: var(--p-bad); }
:where([data-app="acp"]) .btn--danger:hover { background: var(--p-bad-bg); }
:where([data-app="acp"]) .btn--success { background: var(--ui-card); border-color: var(--ui-input-border); color: var(--p-ok); }
:where([data-app="acp"]) .btn--warning { background: var(--ui-card); border-color: var(--ui-input-border); color: var(--p-warn); }
:where([data-app="acp"]) .btn--sm { font-size: 13px; padding: 0.35rem 0.65rem; }
:where([data-app="acp"]) .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-ring); }

:where([data-app="acp"]) .form-group label { font-size: 13.5px; font-weight: 500; color: var(--ui-text); text-transform: none; letter-spacing: 0; }
:where([data-app="acp"]) .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
:where([data-app="acp"]) .form-group select,
:where([data-app="acp"]) .form-group textarea,
:where([data-app="acp"]) .sidebar-card select,
:where([data-app="acp"]) .editor-sidebar select { background-color: var(--ui-input); border: 1px solid var(--ui-input-border); border-radius: var(--ui-radius-sm); font-size: 14px; }
:where([data-app="acp"]) .form-group input:focus, :where([data-app="acp"]) .form-group select:focus, :where([data-app="acp"]) .form-group textarea:focus,
:where([data-app="acp"]) .sidebar-card select:focus, :where([data-app="acp"]) .editor-sidebar select:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-ring); outline: none; }
:where([data-app="acp"]) .form-group input[type="checkbox"], :where([data-app="acp"]) .form-group input[type="radio"] { accent-color: var(--ui-accent); }
:where([data-app="acp"]) .form-group [aria-invalid="true"], :where([data-app="acp"]) .form-group [aria-invalid="true"]:focus { border-color: color-mix(in oklab, var(--p-bad-solid) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-bad-solid) 15%, transparent); }
:where([data-app="acp"]) .form-hint { font-size: 12.5px; color: var(--ui-muted); }
:where([data-app="acp"]) .sidebar-card { border-color: var(--ui-border); border-radius: var(--ui-radius); }
:where([data-app="acp"]) .sidebar-card__header { font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ui-text); border-bottom-color: var(--ui-border-2); }

:where([data-app="acp"]) .alert { display: block; font-weight: 400; color: var(--ui-text); border-radius: 10px; border: 1px solid transparent; }
:where([data-app="acp"]) .alert--success { background: var(--p-ok-bg); border-color: color-mix(in oklab, var(--p-ok) 30%, transparent); color: var(--ui-text); }
:where([data-app="acp"]) .alert--error, :where([data-app="acp"]) .alert--danger { background: var(--p-bad-bg); border-color: color-mix(in oklab, var(--p-bad) 35%, transparent); color: var(--ui-text); }
:where([data-app="acp"]) .alert--warning { background: var(--p-warn-bg); border-color: color-mix(in oklab, var(--p-warn) 30%, transparent); color: var(--ui-text); }
:where([data-app="acp"]) .alert--info { background: var(--p-info-bg); border-color: color-mix(in oklab, var(--p-info) 30%, transparent); color: var(--ui-text); }

:where([data-app="acp"]) .acp-tabs { gap: 4px; border-bottom-color: var(--ui-border); margin-bottom: 16px; }
:where([data-app="acp"]) .acp-tab { padding: 9px 10px; font-size: 13.5px; font-weight: 500; color: var(--ui-muted); margin-bottom: -1px; }
:where([data-app="acp"]) .acp-tab:hover { color: var(--ui-text); }
:where([data-app="acp"]) .acp-tab--active { color: var(--ui-text); border-bottom-color: var(--ui-accent); }
:where([data-app="acp"]) .acp-tab__count, :where([data-app="acp"]) .acp-tab--active .acp-tab__count { font-size: 11.5px; font-weight: 600; background: var(--ui-head); border: 1px solid var(--ui-border); border-radius: 99px; padding: 0 6px; line-height: 16px; color: var(--ui-muted); }

:where([data-app="acp"]) .breadcrumbs { font-size: 13px; }
:where([data-app="acp"]) .breadcrumbs__current { font-weight: 500; }

/* A chart drawn wide and narrow; show the one that fits (see chartResponsive). */
.ui-chart--narrow { display: none; }
@media (max-width: 760px) {
    .ui-chart--wide { display: none; }
    .ui-chart--narrow { display: block; }
}

/* A table that starts or ends its card follows the card's rounded corners. */
.ui-card > .ui-tablewrap:first-child { border-top-left-radius: calc(var(--ui-radius) - 1px); border-top-right-radius: calc(var(--ui-radius) - 1px); }
.ui-card > .ui-tablewrap:last-child { border-bottom-left-radius: calc(var(--ui-radius) - 1px); border-bottom-right-radius: calc(var(--ui-radius) - 1px); }

/* ══════════════════════════════════════════════════════════════════════
   The portal's older panels, drawn as cards. Pages not yet rebuilt still
   use .panel; its header now reads as a card header (sentence case title
   at text colour on the card, not grey capitals on a tinted band). These
   carry .portal__main because the portal's page stylesheets load after
   this file and would otherwise win.
   ══════════════════════════════════════════════════════════════════════ */
.portal__main .panel { background: var(--ui-card); border-color: var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }
.portal__main .panel__header { background: transparent; border-bottom-color: var(--ui-border-2); padding: 14px 16px; }
.portal__main .panel__title { font-size: 14.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ui-text); }
.portal__main .panel__action { font-size: 13px; font-weight: 500; color: var(--ui-accent-2); }
.portal__main .panel__empty { color: var(--ui-muted); font-size: 13.5px; }