/*! Coreidon UI 0.1.0 | https://ui.coreidon.ai | built 2026-10-19T10:29Z */

/* ===== src/css/tokens.css ===== */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");

/* Coreidon app system, v3.1 (enterprise density).
   Three layers: Workspace rail, the app frame (one flat working surface), and floating panels.
   Density: 13px body, 30px controls, 16px icons, h1 22-24px. Hierarchy comes from weight and colour, not size jumps.
   Geometry: 3-4px on controls, 6px on containers. No pills except avatars and switches.
   Depth: light mode uses barely-there shadows; dark mode uses no shadows, only lightness steps and 1px translucent borders.
   Type: IBM Plex Sans for all reading and headings (full Romanian diacritics), Space Grotesk only for brand marks,
   IBM Plex Mono only for codes people compare (CTR-2026-009). */
:root {
  --font-brand: 'Space Grotesk', system-ui, sans-serif;
  --font-heading: 'IBM Plex Sans', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --text-xs: 0.8594rem; --text-sm: 0.9375rem; --text-base: 1.0156rem; --text-md: 1.0938rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.875rem;
  --radius-sm: 4px; --radius-md: 5px; --radius-lg: 7.5px;
  --h-ctl: 38px; --h-ctl-sm: 30px;
  --dur: 160ms; --ease: cubic-bezier(.2, 0, 0, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.34, 1.3, .64, 1);
  --rail-w: 80px; --nav-w: 275px; --tab-bar: 60px; /* the phone tab bar itself; --tab-h (frame.css) adds the gap under it */
  /* AI, the same in every app: violet into the system cyan (two hues, where every app tile is one). The gradient is for
     the AI tile and the one filled AI button on a screen; --ai / --ai-text / --ai-soft (per theme, below) for the rest. */
  --ai-1: #7445F2; --ai-2: #0A7DBE; --ai-grad: linear-gradient(135deg, var(--ai-1), var(--ai-2));
}
body[data-th="light"] {
  color-scheme: light;
  --canvas: #F6F7F9; --surface: #FFFFFF; --surface-2: #F2F4F7; --surface-3: #E6E9EE; --raised: #FFFFFF;
  --border: #E4E7EC; --border-strong: #CDD2DA;
  --text: #0B1427; --text-2: #3D4757; --text-muted: #626C7C;
  --primary: #0C1B44; --primary-hover: #1B2C5E; --text-on-accent: #FFFFFF;
  --accent: #0284C7; --accent-soft: #E6F3FB; --accent-text: #0369A1; --focus: #0284C7;
  --success: #15803D; --success-soft: #E8F5EC; --success-text: #166534;
  --warning: #B45309; --warning-soft: #FCF1E3; --warning-text: #92400E;
  --danger: #C02626; --danger-soft: #FCEBEB; --danger-text: #A11B1B;
  --violet: #6D28D9; --violet-soft: #F1EBFC; --violet-text: #5B21B6;
  --ai: #5B3FD6; --ai-soft: #EFECFD; --ai-text: #5B3FD6;
  --neutral-soft: #EEF0F3; --neutral-text: #475263;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .04); --shadow-2: 0 1px 4px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .03); --shadow-3: 0 7.5px 25px rgba(15, 23, 42, .08), 0 1px 4px rgba(15, 23, 42, .05);
  --ws-bg: #0C1B44; --ws-2: #1A2A57; --ws-line: rgba(255, 255, 255, .1); --ws-text: #B9C3DA; --ws-strong: #FFFFFF;
  --tt-bg: #0B1427; --tt-fg: #F3F6FA; --scrim: rgba(11, 20, 39, .32); --paper: #FFFFFF;
}
/* Dark: VS Code Dark Modern. Editor grey #1F1F1F for content, #181818 for the rail and sidebars,
   #2B2B2B hairlines, #CCCCCC text, VS Code blue #0078D4 for primary actions and #4DAAFC for links and active states.
   No shadows: depth comes from these lightness steps and 1px borders. */
body[data-th="dark"] {
  color-scheme: dark;
  --canvas: #181818; --surface: #1F1F1F; --surface-2: #2A2D2E; --surface-3: #37373D; --raised: #252526;
  --border: #2B2B2B; --border-strong: #3C3C3C;
  --text: #E4E4E4; --text-2: #CCCCCC; --text-muted: #9D9D9D;
  --primary: #0078D4; --primary-hover: #026EC1; --text-on-accent: #FFFFFF;
  --accent: #4DAAFC; --accent-soft: rgba(0, 120, 212, .22); --accent-text: #4DAAFC; --focus: #0078D4;
  --success: #3FB950; --success-soft: rgba(63, 185, 80, .14); --success-text: #56D364;
  --warning: #CCA700; --warning-soft: rgba(204, 167, 0, .15); --warning-text: #E2C08D;
  --danger: #F14C4C; --danger-soft: rgba(241, 76, 76, .14); --danger-text: #F48771;
  --violet: #B180D7; --violet-soft: rgba(177, 128, 215, .15); --violet-text: #C5A5E6;
  --ai: #A99BFF; --ai-soft: rgba(169, 155, 255, .16); --ai-text: #A99BFF;
  --neutral-soft: rgba(255, 255, 255, .07); --neutral-text: #CCCCCC;
  --shadow-1: none; --shadow-2: 0 0 0 1px #2B2B2B; --shadow-3: 0 0 0 1px #454545, 0 6px 18px rgba(0, 0, 0, .36);
  --ws-bg: #181818; --ws-2: #2A2D2E; --ws-line: #2B2B2B; --ws-text: #9D9D9D; --ws-strong: #FFFFFF;
  --tt-bg: #252526; --tt-fg: #CCCCCC; --scrim: rgba(0, 0, 0, .5); --paper: #FFFFFF;
}
/* Dark page content: accents tuned for grey surfaces (GitHub's dark-dimmed set), calmer than the chrome's.
   Fills stay clear instead of turning muddy on grey; sidebars, the rail and the app bar keep the chrome values above. */
body[data-th="dark"] :is(.af-main, .panel, .ws-view, .cmdk, .mdl-s, .as, .toaster, .chat, .lnch),
body[data-th="dark"] > :is(.pop, .cmenu, .mn-pop, .tt) {
  --accent: #539BF5; --accent-soft: rgba(65, 132, 228, .16); --accent-text: #6CB6FF; --focus: #539BF5;
  --success: #57AB5A; --success-soft: rgba(70, 149, 74, .16); --success-text: #6BC46D;
  --warning: #C69026; --warning-soft: rgba(174, 124, 20, .16); --warning-text: #DAAA3F;
  --danger: #E5534B; --danger-soft: rgba(229, 83, 75, .12); --danger-text: #F47067;
  --violet: #986EE2; --violet-soft: rgba(152, 110, 226, .16); --violet-text: #B083F0;
  --neutral-soft: rgba(205, 217, 229, .08); --neutral-text: #ADBAC7;
  --primary: #2F7BD8; --primary-hover: #3A88E6;
}
body[data-th="dark"] .note.err { box-shadow: inset 0 0 0 1px rgba(229, 83, 75, .3); } body[data-th="dark"] .note.warn { box-shadow: inset 0 0 0 1px rgba(198, 144, 38, .3); } body[data-th="dark"] .note.info { box-shadow: inset 0 0 0 1px rgba(83, 155, 245, .3); } body[data-th="dark"] .note.ok { box-shadow: inset 0 0 0 1px rgba(87, 171, 90, .3); }

/* Phones were already sized for touch: text there is 10% above the compact scale instead of 25%. */
@container device (max-width: 719px) { .ws, .af, .as, .mdl-s, .toaster { --text-xs: .756rem; --text-sm: .825rem; --text-base: .894rem; --text-md: .9625rem; --text-lg: 1.1rem; --text-xl: 1.375rem; --text-2xl: 1.65rem; } }
body[data-th="dark"] .tt { box-shadow: 0 0 0 1px #454545; }

/* ===== src/css/base.css ===== */
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--canvas); color: var(--text); font: 400 var(--text-base)/1.5 var(--font-body); -webkit-font-smoothing: antialiased; overflow: hidden; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; letter-spacing: -.01em; color: var(--text); }
h4, h5 { font-weight: 600; font-size: var(--text-base); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-text); text-decoration: none; text-underline-offset: 2px; } a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
input, textarea { caret-color: var(--accent); }
.ic { width: 20px; height: 20px; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--text-muted); }
.code { font: 500 .92em/1 var(--font-mono); letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack { display: grid; gap: 18px; }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
hr.sep { border: 0; border-top: 1px solid var(--border); margin: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }

/* ===== src/css/components.css ===== */
/* ---------- Buttons: 30px, 24px small; 14px icons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7.5px; height: var(--h-ctl); padding: 0 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font: 500 var(--text-base)/1 var(--font-body); cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-1); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform 120ms var(--ease); text-decoration: none !important; }
.btn:hover { background: var(--surface-2); border-color: var(--text-muted); }
.btn:active { transform: translateY(1px); }
.btn .ic { width: 18px; height: 18px; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
body[data-th="dark"] .btn-accent { color: #04131D; }
.btn-accent:hover { filter: brightness(1.06); background: var(--accent); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); border-color: transparent; color: var(--text); }
.btn-danger { color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-text); }
.btn-danger.solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-sm { height: var(--h-ctl-sm); padding: 0 10px; font-size: var(--text-sm); gap: 6.5px; }
.btn-sm .ic { width: 16px; height: 16px; }
.btn-lg { height: 45px; padding: 0 18px; font-size: var(--text-md); }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.ibtn { width: 35px; height: 35px; display: inline-grid; place-items: center; border: 0; border-radius: var(--radius-md); background: none; color: var(--text-2); cursor: pointer; flex: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.ibtn:hover { background: var(--surface-2); color: var(--text); }
/* ---------- AI: one look in every app (tokens --ai*, the mark ic('ai'), the tile aiMark()) ----------
   Three levels: one filled button per screen for the way in (.btn-ai.solid), inked buttons for AI actions (.btn-ai,
   .ibtn.ai), and a quiet mark on what AI wrote (.ai-sec, .ai-by). The AI colour is for AI only. */
.btn-ai { color: var(--ai-text); border-color: color-mix(in srgb, var(--ai) 40%, var(--border)); }
.btn-ai:hover { background: var(--ai-soft); border-color: var(--ai); color: var(--ai-text); }
.btn-ai.solid { background: var(--ai-grad) border-box; border-color: transparent; color: #fff; font-weight: 600; }
.btn-ai.solid:hover { background: var(--ai-grad) border-box; border-color: transparent; color: #fff; filter: brightness(1.1); }
/* Dark: no saturated fill behind text, so the filled button is a tinted fill with a coloured edge */
body[data-th="dark"] .btn-ai.solid, body[data-th="dark"] .btn-ai.solid:hover { background: var(--ai-soft); border-color: color-mix(in srgb, var(--ai) 55%, transparent); color: var(--ai-text); filter: none; }
body[data-th="dark"] .btn-ai.solid:hover { background: color-mix(in srgb, var(--ai) 26%, transparent); }
.ibtn.ai { color: var(--ai-text); background: var(--ai-soft); }
.ibtn.ai:hover { color: var(--ai-text); background: color-mix(in srgb, var(--ai) 22%, transparent); }
.ai-ink { color: var(--ai-text); }
.ai-sec { border: 0; border-left: 3px solid var(--ai); border-image: linear-gradient(180deg, var(--ai-1), var(--ai-2)) 1; padding: 4px 0 4px 16px; background: none; }
.ai-sec > h3 { display: flex; align-items: center; gap: 8px; } .ai-sec > h3 .ic { color: var(--ai); }
.ai-by { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-muted); } .ai-by .ic { width: 14px; height: 14px; color: var(--ai); }
.ai-busy { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--ai-text); }
.ai-busy .ic { width: 18px; height: 18px; animation: ai-pulse 1.6s ease-in-out infinite; }
@keyframes ai-pulse { 50% { opacity: .35; transform: scale(.86); } }
@media (prefers-reduced-motion: reduce) { .ai-busy .ic { animation: none; } }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent-text); font: 500 var(--text-sm)/1.3 var(--font-body); cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }

/* ---------- Form controls: 30px ---------- */
.field { display: grid; gap: 6.5px; }
.field > label, .lbl { font-weight: 500; font-size: var(--text-sm); color: var(--text-2); }
.field .hint { font-size: var(--text-xs); color: var(--text-muted); }
.input, .select, .textarea { width: 100%; height: var(--h-ctl); padding: 0 11.5px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-size: var(--text-base); box-shadow: var(--shadow-1); transition: border-color var(--dur), box-shadow var(--dur); }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.textarea { height: auto; min-height: 90px; padding: 9px 11.5px; resize: vertical; line-height: 1.5; }
.select { appearance: none; padding-right: 35px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%238E8E99' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 18px; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field.is-err .input, .field.is-err .textarea, .field.is-err .select { border-color: var(--danger); }
.msg { display: flex; gap: 7.5px; align-items: center; font-size: var(--text-xs); }
.msg.err { color: var(--danger-text); } .msg .ic { width: 16px; height: 16px; }
.searchf { position: relative; } .searchf .ic { position: absolute; left: 11.5px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; } .searchf .input { padding-left: 36px; }
.shake { animation: shake 420ms var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
/* Segmented control */
.seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border); position: relative; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg button { position: relative; flex: none; height: 30px; padding: 0 11.5px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-2); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; display: inline-flex; align-items: center; gap: 6.5px; transition: color var(--dur); white-space: nowrap; }
.seg button .ic { width: 16px; height: 16px; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); }
.seg.thumbed button[aria-pressed="true"] { background: transparent; box-shadow: none; }
.seg .thumb { border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-2), 0 0 0 1px var(--border); }
body[data-th="dark"] .seg .thumb { background: var(--surface-3); }
.seg.lg button { height: 38px; padding: 0 15px; font-size: var(--text-base); }
.seg.full { display: flex; } .seg.full button { flex: 1; justify-content: center; }
/* Filter chips: 26px, square-ish, never pills */
.chips { display: flex; gap: 5px; flex-wrap: wrap; position: relative; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
.chip { flex: none; height: 33px; padding: 0 11.5px; display: inline-flex; align-items: center; gap: 6.5px; border: 1px solid var(--border); border-radius: var(--radius-md); background: transparent; color: var(--text-2); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: color var(--dur), border-color var(--dur), background var(--dur); position: relative; }
.chip:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-2); }
.chip .n { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.chip[aria-pressed="true"] .n { color: var(--text-2); }
.chips.thumbed .chip[aria-pressed="true"] { background: transparent; border-color: transparent; }
.chips .thumb { border-radius: var(--radius-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong); }
.chip .ic { width: 16px; height: 16px; }
/* Toggle (Lab 4): rail, knob, shadow and label change together over 250ms. A toggle that saves to the server shows a spinner in the knob and rolls back if the save fails. A switch keeps its round form: it is a physical metaphor, not a pill. */
.tg { position: relative; width: 40px; height: 23px; flex: none; border: 0; padding: 0; border-radius: 1249px; background: var(--border-strong); cursor: pointer; transition: background 250ms var(--ease-out); }
.tg::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out); }
.tg[aria-checked="true"] { background: var(--accent); }
.tg[aria-checked="true"]::after { transform: translateX(18px); box-shadow: 0 1px 5px rgba(2, 132, 199, .4); }
.tg.busy { cursor: progress; }
.tg.busy::before { content: ''; position: absolute; z-index: 1; top: 6.5px; left: 6.5px; width: 10px; height: 10px; box-sizing: border-box; border: 1.5px solid var(--accent); border-right-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; transition: left 250ms var(--ease-out); }
.tg.busy[aria-checked="true"]::before { left: 24px; }
@keyframes spin { to { transform: rotate(360deg); } }
.tg-st { font: 500 var(--text-xs)/1 var(--font-body); color: var(--text-muted); min-width: 25px; text-align: right; transition: color 250ms var(--ease-out); }
.tg-st.on { color: var(--accent-text); }
.tg-w { display: inline-flex; align-items: center; gap: 10px; }
/* Checkbox */
.cbx { appearance: none; width: 20px; height: 20px; margin: 0; flex: none; border: 1.5px solid var(--border-strong); border-radius: 4px; background: var(--surface); cursor: pointer; display: inline-grid; place-items: center; transition: background var(--dur), border-color var(--dur); }
.cbx:checked { background: var(--accent); border-color: var(--accent); }
.cbx:checked::after { content: ''; width: 10px; height: 6.5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
/* Quantity stepper (field use, so it keeps a finger-sized target) */
.qty { display: inline-grid; grid-template-columns: 50px 70px 50px; height: 50px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.qty button { border: 0; background: none; color: var(--text); cursor: pointer; display: grid; place-items: center; transition: background var(--dur); }
.qty button:hover { background: var(--surface-2); } .qty button:disabled { color: var(--text-muted); opacity: .4; cursor: default; }
.qty input { width: 100%; border: 0; border-inline: 1px solid var(--border); text-align: center; font: 600 var(--text-lg)/1 var(--font-body); font-variant-numeric: tabular-nums; background: none; }
.qty input:focus { outline: none; background: var(--accent-soft); }

/* ---------- Status, people, progress ---------- */
/* Status and metadata are text with a coloured icon, never a tinted box (boxes are for things you can click or move). */
.sb { display: inline-flex; align-items: center; gap: 5px; font: 500 var(--text-sm)/1.2 var(--font-body); white-space: nowrap; color: var(--text-2); }
.sb .ic { width: 15px; height: 15px; }
.sb.draft, .sb.neutral, .sb.cancel { color: var(--text-2); } .sb.draft .ic, .sb.neutral .ic, .sb.cancel .ic { color: var(--text-muted); }
.sb.open, .sb.info, .sb.prog { color: var(--accent-text); }
.sb.wait, .sb.warn { color: var(--warning-text); }
.sb.block, .sb.err { color: var(--danger-text); }
.sb.done, .sb.ok { color: var(--success-text); }
.sb.vio { color: var(--violet-text); }
button.sb { background: none; border: 0; padding: 0; cursor: pointer; border-radius: var(--radius-sm); } button.sb:hover span, button.sb:hover { text-decoration: underline; text-underline-offset: 3px; }
.dot { width: 7.5px; height: 7.5px; border-radius: 50%; flex: none; display: inline-block; background: var(--text-muted); }
.prio { display: inline-flex; align-items: center; gap: 4px; font: 500 var(--text-xs)/1 var(--font-body); color: var(--text-muted); }
.prio .ic { width: 15px; height: 15px; }
.prio.high { color: var(--danger-text); } .prio.med { color: var(--warning-text); }
.av { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font: 600 12px/1 var(--font-body); flex: none; }
.av.sm { width: 23px; height: 23px; font-size: 10px; } .av.lg { width: 40px; height: 40px; font-size: 15px; }
.avs { display: inline-flex; } .avs .av { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); } .avs .av:first-child { margin-left: 0; }
.bar { height: 5px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width 500ms var(--ease-out); }
.bar.ok i { background: var(--success); } .bar.warn i { background: var(--warning); } .bar.err i { background: var(--danger); }
.mention { color: var(--accent-text); font-weight: 600; }

/* ---------- The handoff line: where a record is in its process, and who holds it ---------- */
.hl { display: grid; gap: 9px; }
.hl-t { display: flex; gap: 2px; }
.hl-t i { flex: 1; height: 5px; border-radius: 1px; background: var(--surface-3); position: relative; transition: background 400ms var(--ease); }
.hl-t i.d { background: var(--text-muted); }
.hl-t i.c { background: var(--accent); }
.hl-t i.c::after { content: ''; position: absolute; inset: -2px; border-radius: 2px; box-shadow: 0 0 0 2px var(--accent-soft); }
.hl-t i.c.bad { background: var(--danger); } .hl-t i.c.bad::after { box-shadow: 0 0 0 2px var(--danger-soft); }
.hl-t i.c.wait { background: var(--warning); } .hl-t i.c.wait::after { box-shadow: 0 0 0 2px var(--warning-soft); }
.hl-t i.c.ok { background: var(--success); } .hl-t i.c.ok::after { box-shadow: none; }
.hl-now { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hl-now .grow b { display: block; font-weight: 600; color: var(--text); }
.hl-now .grow span { font-size: var(--text-xs); color: var(--text-muted); }
.hl-sla { flex: none; font: 500 var(--text-xs)/1 var(--font-body); padding: 0; background: none; color: var(--text-2); font-variant-numeric: tabular-nums; }
.hl-sla.warn { color: var(--warning-text); font-weight: 600; } .hl-sla.err { color: var(--danger-text); font-weight: 600; }
.hl-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; }
.hl-steps span { font-size: var(--text-xs); line-height: 1.25; color: var(--text-muted); padding-right: 5px; }
.hl-steps span.d { color: var(--text-2); } .hl-steps span.c { color: var(--text); font-weight: 600; }
.hl.mini { gap: 5px; } .hl.mini .hl-t i { height: 4px; } .hl.mini .hl-t i.c::after { display: none; }
.hl.mini .hl-l { font-size: var(--text-xs); color: var(--text-2); display: flex; gap: 7.5px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Surfaces: de-boxed. Sections are separated by hairlines and space, not by containers. ---------- */
.card { background: transparent; border: 0; border-radius: 0; }
.card-h { display: flex; align-items: center; gap: 10px; padding: 0 0 10px; border-bottom: 1px solid var(--border); min-height: 0; }
.card-h h2, .card-h h3 { font: 600 var(--text-md)/1.3 var(--font-heading); }
.card-h .sub { font-size: var(--text-xs); color: var(--text-muted); }
.card-b { padding: 15px 0; }
.card-f { padding: 13px 0 0; border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: center; }
/* A box only for real objects that move or are acted on as a unit */
.card.boxed { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.card.boxed .card-h { padding: 13px 18px; } .card.boxed .card-b { padding: 15px 18px; } .card.boxed .card-f { padding: 13px 18px; }
.sec-h { display: flex; align-items: baseline; gap: 10px; margin: 7.5px 0 -7.5px; }
.sec-h h2 { font: 600 var(--text-md)/1.3 var(--font-heading); }
.sec-h .n { color: var(--text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.sec-h .sp { flex: 1; }
/* KPI strip: no box. One row of figures between two hairlines, split by thin dividers. */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-left: -19px; clip-path: inset(0 0 0 19px); } /* every cell has a left divider; the first column's divider and padding sit outside the clip, so wrapped rows line up too */
.kpi { display: grid; gap: 2px; align-content: start; padding: 13px 18px 14px; border: 0; border-left: 1px solid var(--border); margin: 0 0 -1px -1px; border-bottom: 1px solid var(--border); background: none; text-align: left; color: inherit; cursor: default; }
button.kpi[data-go] { cursor: pointer; transition: background var(--dur); } button.kpi[data-go]:hover { background: var(--surface-2); }
.kpi-l { font-size: var(--text-xs); color: var(--text-muted); font-weight: 500; }
.kpi-v { font: 600 1.5625rem/1.2 var(--font-body); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.kpi-v small { font: 400 var(--text-sm)/1 var(--font-body); color: var(--text-muted); margin-left: 4px; letter-spacing: 0; }
.kpi-d { font-size: var(--text-xs); color: var(--text-muted); }
.kpi-d.good b { color: var(--success-text); font-weight: 600; } .kpi-d.bad b { color: var(--danger-text); font-weight: 600; }
@container app (min-width: 720px) { .kpis { grid-template-columns: repeat(var(--k, 4), minmax(0, 1fr)); } }
/* Key-value list */
.kv { display: grid; grid-template-columns: minmax(138px, 36%) minmax(0, 1fr); gap: 9px 20px; margin: 0; font-size: var(--text-base); }
.kv dt { color: var(--text-muted); } .kv dd { margin: 0; color: var(--text); min-width: 0; }
/* Tables: flat, hairline rows, no outer frame */
.tblw { overflow-x: auto; border: 0; border-radius: 0; background: transparent; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.tbl th { position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 500; font-size: var(--text-xs); color: var(--text-muted); background: var(--surface); padding: 0 13px; height: 38px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 9px 13px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl th:first-child, .tbl td:first-child { padding-left: 5px; } .tbl th:last-child, .tbl td:last-child { padding-right: 5px; }
.tbl tbody tr { transition: background var(--dur); }
.tbl tbody tr[data-open] { cursor: pointer; } .tbl tbody tr[data-open]:hover { background: var(--surface-2); }
.tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl td b { font-weight: 600; }
.tbl .s2 { display: block; font-size: var(--text-xs); color: var(--text-muted); }
.tbl tr.sel td { background: var(--accent-soft); }
/* ---------- Tables on phones: one card per row, no sideways scroll ----------
   Under 720px a table's row becomes a card: the first cell is its title, every other cell a "label  value" line.
   The labels come from the column headers (tblCards() in frame.js stamps data-label), so apps change nothing.
   A header row that holds filters stays, as a wrapped row of labelled fields. data-cards="off" keeps a table a table
   (a matrix or a calendar), and it then scrolls sideways in its own box. */
@container app (max-width: 719px) {
  .tbl:not([data-cards="off"]), .tbl:not([data-cards="off"]) > tbody, .tbl:not([data-cards="off"]) > tfoot { display: block; width: 100%; }
  .tbl:not([data-cards="off"]) > thead { display: block; }
  .tbl:not([data-cards="off"]) > thead > tr:not(:has(input, select)) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tbl:not([data-cards="off"]) > thead > tr:has(input, select) { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 12px; }
  .tbl:not([data-cards="off"]) > thead > tr:has(input, select) > th { position: static; display: grid; gap: 3px; flex: 1 1 150px; height: auto; padding: 0; border: 0; background: none; }
  .tbl:not([data-cards="off"]) > thead > tr:has(input, select) > th:not(:has(input, select)) { display: none; }
  .tbl:not([data-cards="off"]) > thead > tr:has(input, select) > th[data-label]::before { content: attr(data-label); font-size: var(--text-xs); color: var(--text-muted); }
  .tbl:not([data-cards="off"]) > thead > tr > th :is(.input, .select) { width: 100%; }
  .tbl:not([data-cards="off"]) > tbody > tr, .tbl:not([data-cards="off"]) > tfoot > tr { display: grid; gap: 3px; padding: 11px 13px; margin: 0 0 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
  .tbl:not([data-cards="off"]) > tbody > tr.sel { background: var(--accent-soft); border-color: var(--accent); }
  .tbl:not([data-cards="off"]) > :is(tbody, tfoot) > tr > td { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; padding: 2px 0; border: 0; background: none; text-align: right; min-width: 0; overflow-wrap: anywhere;
    /* an app's column widths and one-line cells are for the wide table, not for a card */
    width: auto !important; max-width: none !important; white-space: normal !important; }
  .tbl:not([data-cards="off"]) > :is(tbody, tfoot) > tr > td[data-label]::before { content: attr(data-label); flex: 0 1 42%; text-align: left; font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: normal; }
  .tbl:not([data-cards="off"]) > :is(tbody, tfoot) > tr > td:not([data-label]) { justify-content: flex-start; text-align: left; }
  .tbl:not([data-cards="off"]) > :is(tbody, tfoot) > tr > td.cx-card-t { font-weight: 600; font-size: var(--text-md); padding-bottom: 4px; }
  .tbl:not([data-cards="off"]) > :is(tbody, tfoot) > tr > td.cx-card-a { justify-content: flex-end; padding-top: 6px; }
  .tbl:not([data-cards="off"]) > :is(tbody, tfoot) > tr > td:empty { display: none; }
  .tbl:not([data-cards="off"]) .s2 { text-align: inherit; }
  .tbl[data-cards="off"] { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* List rows: full-width, hairline dividers, no outer box */
.list { background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 10px 7.5px; border-bottom: 1px solid var(--border); background: transparent; color: inherit; text-decoration: none !important; width: 100%; border-left: 0; border-right: 0; border-top: 0; text-align: left; font: inherit; }
button.li, a.li, .li[data-open] { cursor: pointer; transition: background var(--dur); } button.li:hover, a.li:hover, .li[data-open]:hover { background: var(--surface-2); }
.li .t { font-weight: 500; color: var(--text); display: block; }
.li .s { font-size: var(--text-xs); color: var(--text-muted); display: flex; gap: 2px 13px; flex-wrap: wrap; align-items: center; margin-top: 1px; }
.li .e { display: grid; justify-items: end; gap: 4px; font-size: var(--text-xs); color: var(--text-muted); text-align: right; }
.li-ic { width: 33px; height: 33px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.li-ic .ic { width: 18px; height: 18px; }
.li-ic.err { background: var(--danger-soft); color: var(--danger-text); } .li-ic.warn { background: var(--warning-soft); color: var(--warning-text); } .li-ic.ok { background: var(--success-soft); color: var(--success-text); } .li-ic.acc { background: var(--accent-soft); color: var(--accent-text); } .li-ic.vio { background: var(--violet-soft); color: var(--violet-text); }
/* Empty state */
.empty { display: grid; justify-items: center; text-align: center; gap: 7.5px; padding: 35px 20px; color: var(--text-2); }
.empty > .ic { width: 30px; height: 30px; color: var(--text-muted); }
.empty h4 { font: 600 var(--text-md)/1.3 var(--font-heading); color: var(--text); }
.empty p { max-width: 42ch; font-size: var(--text-sm); }
/* Callout */
.note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 13px; border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-2); font-size: var(--text-sm); }
.note .ic { margin-top: 1px; width: 18px; height: 18px; }
.note.warn { background: var(--warning-soft); color: var(--warning-text); } .note.err { background: var(--danger-soft); color: var(--danger-text); } .note.info { background: var(--accent-soft); color: var(--accent-text); } .note.ok { background: var(--success-soft); color: var(--success-text); }
.note b { color: inherit; }

/* ---------- Popovers, menus, tooltips, toasts ---------- */
@keyframes popIn { from { opacity: 0; transform: translateY(-3.5px); } }
.pop { position: fixed; z-index: 160; background: var(--raised); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); animation: popIn 140ms var(--ease-out); width: min(425px, calc(100vw - 20px)); }
.pop-h { display: flex; align-items: center; gap: 10px; padding: 10px 15px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: var(--text-sm); }
.menu { display: grid; padding: 5px; }
.pop .menu { max-height: min(420px, calc(100vh - 160px)); overflow-y: auto; } /* a long list scrolls instead of running off the screen */
.menu > button > span, .menu > a > span, .menu > .m-split > [data-i] > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu > [aria-checked="true"], .menu > .m-split > [aria-checked="true"] { color: var(--accent-text); font-weight: 500; }
.menu > button, .menu > a, .menu > .m-split > button { display: flex; align-items: center; gap: 10px; height: 35px; padding: 0 10px; border: 0; background: none; color: var(--text); border-radius: var(--radius-sm); font: 400 var(--text-base)/1 var(--font-body); cursor: pointer; text-align: left; text-decoration: none; }
.menu > button:hover, .menu > button:focus-visible, .menu > .m-split > button:hover, .menu > .m-split > button:focus-visible { background: var(--surface-2); outline: none; }
.menu > * > .ic, .menu > .m-split > * > .ic { width: 18px; height: 18px; color: var(--text-muted); }
.menu small { margin-left: auto; color: var(--text-muted); font-size: var(--text-xs); }
/* An item with a second line (sub): what it is, under its name; the row grows instead of cutting either */
.menu > button:has(.m-sub), .menu > a:has(.m-sub), .menu > .m-split > [data-i]:has(.m-sub) { height: auto; min-height: 35px; padding: 8px 10px; align-items: flex-start; }
.menu > button:has(.m-sub) > span, .menu > a:has(.m-sub) > span, .menu > .m-split > [data-i]:has(.m-sub) > span { display: grid; gap: 2px; white-space: normal; overflow: visible; line-height: 1.3; }
.m-sub { font-style: normal; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.35; }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: 5px 2px; }
.menu .dng { color: var(--danger-text); } .menu .dng .ic { color: inherit; }
.menu > [aria-checked="true"]::after, .menu > .m-split > [aria-checked="true"]::after { content: ""; flex: none; margin: 0 4px 0 auto; width: 11.5px; height: 6.5px; border: 2px solid var(--accent); border-top: 0; border-right: 0; transform: translateY(-2px) rotate(-45deg); }
/* A row with an aside (menuRow): the row, then a square icon button at its end, for a second way in */
.menu > .m-split { display: flex; align-items: center; gap: 2px; }
.menu > .m-split > [data-i] { flex: 1; min-width: 0; }
.menu > .m-split > .m-aside { flex: none; width: 35px; padding: 0; justify-content: center; color: var(--text-muted); }
.menu > .m-split > .m-aside:hover { color: var(--text); }
/* a word, not an icon: an outlined pill, so it reads as its own button next to the row */
.menu > .m-split > .m-aside.txt { width: auto; height: 26px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text); font: 600 var(--text-xs)/1 var(--font-body); }
.menu > .m-split[hidden], .as .acts > .m-split[hidden] { display: none; }
.tt { position: fixed; z-index: 200; max-width: 350px; padding: 5px 9px; border-radius: var(--radius-sm); background: var(--tt-bg); color: var(--tt-fg); font: 500 var(--text-xs)/1.4 var(--font-body); pointer-events: none; opacity: 0; transition: opacity 120ms var(--ease); }
.tt.on { opacity: 1; }
/* Toasts (Lab 11): bottom right on desktop, top on phones, never the center. Duration by severity, at most three, hover pauses, colour always with an icon, swipe right to dismiss. */
.toaster { position: absolute; right: 20px; bottom: 20px; z-index: 150; display: grid; gap: 10px; width: min(425px, calc(100% - 40px)); pointer-events: none; transition: right 320ms var(--ease-out), bottom 320ms var(--ease-out); }
@container device (max-width: 719px) { .toaster { top: 12px; bottom: auto; right: 12px; left: 12px; width: auto; } .ws ~ .toaster { top: 50px; } }
.toast { position: relative; overflow: hidden; pointer-events: auto; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 11.5px; align-items: start; padding: 11.5px 10px 13px 14px; background: var(--raised); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); font-size: var(--text-base); animation: toastIn 340ms var(--spring); transition: transform 300ms var(--spring), opacity 200ms; touch-action: pan-y; }
@keyframes toastIn { from { transform: translateY(15px); opacity: 0; } }
@container device (max-width: 719px) { .toast { animation-name: toastInTop; } @keyframes toastInTop { from { transform: translateY(-12px); opacity: 0; } } }
.toast.out { opacity: 0; transform: translateX(40px); }
.toast .t-ic { color: var(--accent); padding-top: 1px; } .toast .t-ic .ic { width: 19px; height: 19px; }
.toast.success { border-left-color: var(--success); } .toast.success .t-ic { color: var(--success); }
.toast.warning { border-left-color: var(--warning); } .toast.warning .t-ic { color: var(--warning); }
.toast.error { border-left-color: var(--danger); } .toast.error .t-ic { color: var(--danger); }
.toast b { display: block; font-weight: 600; color: var(--text); } .toast .t-b { color: var(--text-2); font-size: var(--text-sm); }
.toast .t-acts { display: flex; gap: 2px; align-items: center; }
.toast .t-x { width: 30px; height: 30px; border: 0; background: none; color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; display: grid; place-items: center; } .toast .t-x:hover { background: var(--surface-2); color: var(--text); }
.toast .t-x .ic { width: 16px; height: 16px; }
.toast .t-undo { border: 0; background: none; color: var(--accent-text); font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer; padding: 7.5px 9px; border-radius: var(--radius-sm); } .toast .t-undo:hover { background: var(--accent-soft); }
.toast .t-count { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.toast .t-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; color: var(--accent); opacity: .3; transform-origin: left; }
.toast.success .t-bar { color: var(--success); } .toast.warning .t-bar { color: var(--warning); }
/* Rich menu rows (account menus): who you are, a choice, a switch. Using them keeps the menu open. */
.m-card { display: flex; gap: 12px; align-items: center; padding: 10px 10px 13px; margin: 0 0 5px; border-bottom: 1px solid var(--border); }
.m-card-n { display: grid; gap: 1px; min-width: 0; }
.m-card-n b { font-weight: 600; color: var(--text); }
.m-card-n span { font-size: var(--text-xs); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 0 4px 0 10px; }
.m-row-l { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); font-size: var(--text-base); }
.m-row-l .ic { width: 18px; height: 18px; color: var(--text-muted); }
.m-row .seg button { height: 26px; padding: 0 9px; font-size: var(--text-xs); }
.as .m-card { padding: 4px 18px 15px; margin: 0 0 6px; }
.as .m-row { min-height: 56px; padding: 0 12px 0 18px; }
.as .m-row-l { gap: 15px; font: 500 var(--text-md)/1.2 var(--font-body); }
.as .m-row-l .ic { width: 25px; height: 25px; color: var(--text-2); }
.as .m-row .seg button { height: 32px; padding: 0 12px; font-size: var(--text-sm); }

/* ===== src/css/frame.css ===== */
/* ---------- App frame ----------
   Standalone (opened in a browser tab): a 44px app bar on top with the account, bell, help and theme.
   Embedded (inside Workspace): no app bar. Workspace owns account, bell, theme and app switching;
   the app keeps its own sections and its search. The content area is one flat surface; the sidebar is a half-step darker. */
.af { position: absolute; inset: 0; transform: translateZ(0); overflow: hidden; overflow: clip; background: var(--surface); container: app / inline-size; }
/* The phone tab bar floats above the bottom edge, clear of the iPhone's home bar and rounded corners and of Android's
   gesture bar; both report their size as safe-area-inset-bottom once the page sets viewport-fit=cover. --tab-h is what
   pages and sticky bars clear: the bar and the gap under it, so calc(var(--tab-h) + 15px) sits 15px above the bar. */
.af { --safe-b: env(safe-area-inset-bottom, 0px); --tab-lift: max(18px, calc(var(--safe-b) - 10px)); --tab-h: calc(var(--tab-bar) + var(--tab-lift)); }
.af-g { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.af.embedded .af-g { grid-template-rows: minmax(0, 1fr); }
.af-bar { display: flex; align-items: center; gap: 7.5px; height: 55px; padding: 0 13px 0 15px; background: var(--canvas); border-bottom: 1px solid var(--border); }
.af-id { display: flex; align-items: center; gap: 10px; min-width: 0; border: 0; background: none; padding: 4px 7.5px 4px 4px; margin-left: -3.5px; border-radius: var(--radius-md); cursor: pointer; text-align: left; }
.af-id:hover { background: var(--surface-2); }
.af-id .ic { width: 18px; height: 18px; color: var(--text-muted); }
.af-id b { font: 600 var(--text-md)/1.1 var(--font-brand); display: block; color: var(--text); }
.af-id small { display: block; font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The identity block, the same in every app: the tile, the app's name on one line, COREIDON.AI underneath.
   A long name (Human Resources on a phone) is cut with an ellipsis instead of wrapping out of the bar. */
.af-idt { display: grid; min-width: 0; }
.af-id b, .af-nav .nv-app b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-id small, .af-nav .nv-app small { display: block; margin-top: 2px; font: 600 10.5px/1.2 var(--font-brand); letter-spacing: .09em; color: var(--text-muted); }
.mono { width: 33px; height: 33px; border-radius: 7.5px; display: grid; place-items: center; flex: none; background: var(--primary); color: var(--text-on-accent); font: 700 14px/1 var(--font-brand); letter-spacing: -.02em; }
.af-sp { flex: 1; }
.af-search { display: none; align-items: center; gap: 9px; width: 350px; height: 35px; padding: 0 7.5px 0 11.5px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text-muted); cursor: pointer; font-size: var(--text-sm); }
.af-search .ic { width: 18px; height: 18px; }
.af-search:hover { border-color: var(--border-strong); }
.af-search kbd { margin-left: auto; font: 500 13px/1 var(--font-body); padding: 4px 6.5px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); }
@container app (min-width: 900px) { .af-search { display: flex; } .af-search-i { display: none; } }
.af-badge { position: absolute; top: 1px; right: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--danger); color: #fff; font: 700 11.5px/19px var(--font-body); text-align: center; box-shadow: 0 0 0 2px var(--canvas); }
.af-me { width: 33px; height: 33px; border-radius: 50%; border: 0; background: #0284C7; color: #fff; font: 600 13px/1 var(--font-body); cursor: pointer; margin-left: 5px; }
.af-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.af-nav { display: none; }
.af-main { overflow-y: auto; overflow-x: hidden; min-height: 0; scroll-behavior: smooth; overscroll-behavior: contain; }
.page { grid-template-columns: minmax(0, 1fr); max-width: 1500px; margin: 0 auto; padding: 20px 20px calc(var(--tab-h) + 35px); display: grid; gap: 20px; }
.page.wide { max-width: none; }
@container app (min-width: 720px) {
  .af-body { grid-template-columns: 65px minmax(0, 1fr); }
  .af-nav { display: flex; flex-direction: column; gap: 1px; padding: 13px 10px; border-right: 1px solid var(--border); background: var(--canvas); overflow-y: auto; position: relative; }
  .page { padding: 25px 30px 50px; gap: 23px; }
  .af-tabs { display: none !important; }
}
@container app (min-width: 1100px) { .af-body { grid-template-columns: var(--nav-w) minmax(0, 1fr); } .page { padding: 28px 40px 60px; } }
.af-nav .nv-app { display: none; padding: 5px 10px 15px; }
.af-nav .nv-app b { font: 600 var(--text-md)/1.2 var(--font-brand); display: block; }
.af-nav .nv-app small { font-size: var(--text-xs); color: var(--text-muted); }
.af-nav .nv-search { display: none; margin: 0 0 10px; }
.af-nav .nv-g { font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); padding: 15px 10px 4px; display: none; }
.af-nav a { position: relative; display: flex; align-items: center; gap: 10px; height: 35px; padding: 0 10px; border-radius: var(--radius-md); color: var(--text-2); font-weight: 400; font-size: var(--text-base); text-decoration: none; transition: color var(--dur) var(--ease); justify-content: center; }
.af-nav a .ic { width: 19px; height: 19px; color: var(--text-muted); }
.af-nav a .lb { display: none; }
.af-nav a:hover { background: var(--surface-3); color: var(--text); }
.af-nav a[aria-current="page"] { color: var(--text); background: var(--surface-3); font-weight: 500; }
.af-nav a[aria-current="page"] .ic { color: var(--text); }
.af-nav.thumbed a[aria-current="page"], .af-nav.thumbed a:hover { background: transparent; }
.af-nav.thumbed a:hover:not([aria-current="page"]) { color: var(--text); }
.af-nav .thumb { border-radius: var(--radius-md); background: var(--surface-3); }
body[data-th="light"] .af-nav .thumb { background: #E7EAEF; }
.af-nav a .n { margin-left: auto; font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.af-nav a .n.hot { min-width: 23px; height: 20px; padding: 0 6.5px; border-radius: 10px; background: var(--danger); color: #fff; display: grid; place-items: center; font-weight: 600; }
.af-nav a .n { display: none; } .af-nav a .n.hot { display: grid; position: absolute; top: 1px; right: 1px; min-width: 18px; height: 18px; font-size: 11.5px; padding: 0 4px; }
.af-nav .nv-foot { margin-top: auto; padding-top: 15px; }
@container app (min-width: 1100px) {
  .af-nav { padding: 15px 13px; }
  .af-nav a { justify-content: flex-start; } .af-nav a .lb { display: inline; }
  .af-nav a .n { display: inline; } .af-nav a .n.hot { position: static; display: grid; min-width: 23px; height: 20px; font-size: 13px; }
  .af-nav .nv-g { display: block; }
  .af.embedded .af-nav .nv-app { display: block; } .af.embedded .af-nav .nv-search { display: flex !important; width: 100% !important; }
}
/* Bottom tabs on phones: a capsule floating over the page, the way iOS 26 draws its own tab bar, in the floating-panel
   material (raised surface, hairline, --shadow-3). Every tab keeps its name. The highlight slides between tabs like the
   side nav's, and the active icon takes the app's colour (brand.css). */
.af-tabs { position: absolute; left: clamp(8px, 3cqi, 16px); right: clamp(8px, 3cqi, 16px); bottom: var(--tab-lift); z-index: 40; max-width: 480px; margin-inline: auto; height: var(--tab-bar); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--raised) 84%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: var(--shadow-3); }
.af-tabs button { position: relative; border: 0; border-radius: 999px; background: none; color: var(--text-muted); display: grid; place-items: center; align-content: center; gap: 3px; font: 500 10.5px/1.2 var(--font-body); cursor: pointer; min-width: 0; padding: 0 3px; -webkit-tap-highlight-color: transparent; }
.af-tabs button > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-tabs button .ic { width: 22px; height: 22px; transition: transform 300ms var(--spring); }
.af-tabs button:active .ic { transform: scale(.88); }
@media (hover: hover) { .af-tabs button:hover:not([aria-current="page"]) { color: var(--text-2); } }
.af-tabs button[aria-current="page"] { color: var(--text); font-weight: 600; }
.af-tabs .thumb { border-radius: 999px; background: var(--surface-3); }
/* Under the bar the page fades out, the way iOS softens what scrolls behind its own: the home bar sits on a clean strip
   and the capsule reads as a layer above the page. Sticky save bars (z-index above 1) stay sharp over it. */
@container app (max-width: 719px) { .af-body::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: calc(var(--tab-h) + 14px); background: linear-gradient(to top, var(--surface) calc(var(--tab-lift) - 6px), transparent); pointer-events: none; } }
.af-tabs .bdg { position: absolute; top: 2px; left: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font: 700 11px/18px var(--font-body); box-shadow: 0 0 0 2px var(--raised); }
/* Page header: 22px title; weight and colour carry the hierarchy */
.ph { display: grid; gap: 10px; }
.crumbs { display: flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: var(--text-muted); flex-wrap: wrap; }
.crumbs a { color: var(--text-2); } .crumbs .ic { width: 16px; height: 16px; }
.ph-row { display: flex; align-items: flex-end; gap: 13px 20px; flex-wrap: wrap; }
.ph-row > :first-child { flex: 1 1 350px; min-width: 0; }
.ph h1 { font: 600 var(--text-xl)/1.25 var(--font-heading); letter-spacing: -.015em; }
.ph .sub { margin-top: 2px; color: var(--text-muted); font-size: var(--text-base); }
.ph .meta { display: flex; gap: 5px 18px; flex-wrap: wrap; align-items: center; font-size: var(--text-sm); color: var(--text-2); }
.ph .meta .ic { width: 16px; height: 16px; }
.ph-acts { display: flex; gap: 7.5px; flex-wrap: wrap; }
@container app (min-width: 720px) { .ph h1 { font-size: 1.7188rem; } }
@container app (max-width: 719px) { .ph-acts .btn:not(.keep) .lbl-x { display: none; } }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-weight: 500; font-size: var(--text-sm); border: 0; background: none; padding: 0; cursor: pointer; justify-self: start; }
.back:hover { color: var(--text); } .back .ic { width: 16px; height: 16px; }
/* Toolbar */
.tbar { display: flex; gap: 7.5px; align-items: center; flex-wrap: wrap; }
.tbar .searchf { flex: 1 1 250px; max-width: 375px; }
.only-wide { } .only-narrow { display: none !important; }
@container app (max-width: 719px) { .only-wide { display: none !important; } .only-narrow { display: revert !important; } }
/* Grids */
.g2, .g3, .g21 { display: grid; gap: 20px 35px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@container app (min-width: 900px) { .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g21 { grid-template-columns: minmax(0, 2fr) minmax(350px, 1fr); } }
/* Phones keep finger-sized targets: the compact sizes are for mouse and trackpad */
@container app (max-width: 719px) {
  .btn { height: 38px; padding: 0 12px; } .btn-sm { height: 32px; } .ibtn { width: 36px; height: 36px; }
  .input, .select { height: 40px; font-size: 16px; } .textarea { font-size: 16px; }
  .chip { height: 32px; } .seg button { height: 30px; } .li { padding: 10px 4px; }
}

/* ---------- Detail panel: sheet on phones, drawer from 720px ---------- */
.scrim { position: absolute; inset: 0; z-index: 80; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease); }
.scrim.on { opacity: 1; pointer-events: auto; }
.panel { position: absolute; z-index: 90; left: 0; right: 0; bottom: 0; height: 92%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: var(--raised); border-radius: 15px 15px 0 0; box-shadow: var(--shadow-3); transform: translateY(102%); transition: transform 320ms var(--ease-out), height 300ms var(--ease-out); visibility: hidden; }
.panel.on { transform: none; visibility: visible; }
.panel .grab { display: grid; place-items: center; height: 20px; cursor: grab; touch-action: none; } .panel .grab i { width: 45px; height: 5px; border-radius: 2px; background: var(--border-strong); }
.panel-h { display: flex; align-items: center; gap: 7.5px; padding: 2px 10px 10px 20px; border-bottom: 1px solid var(--border); min-height: 55px; }
.panel-h .t { flex: 1; min-width: 0; font: 600 var(--text-md)/1.3 var(--font-heading); }
.panel-b { overflow-y: auto; padding: 20px; display: grid; gap: 20px; align-content: start; overscroll-behavior: contain; }
.panel-f { display: flex; gap: 7.5px; padding: 13px 20px calc(13px + env(safe-area-inset-bottom, 0)); border-top: 1px solid var(--border); background: var(--raised); }
.panel-f:empty { display: none; }
@container app (min-width: 720px) {
  .panel { left: auto; top: 0; height: auto; width: min(600px, 100%); border-radius: 0; grid-template-rows: auto minmax(0, 1fr) auto; transform: translateX(102%); border-left: 1px solid var(--border); }
  .panel.wide { width: min(900px, 100%); }
  .panel .grab { display: none; }
  .panel-h { padding: 10px 13px 10px 25px; min-height: 60px; }
  .panel-b { padding: 23px 25px; } .panel-f { padding: 13px 25px; justify-content: flex-end; }
}
.psec { display: grid; gap: 10px; }
.psec > h3 { font: 600 var(--text-sm)/1.3 var(--font-body); color: var(--text-2); display: flex; align-items: center; gap: 10px; }
.psec > h3 .n { color: var(--text-muted); font-weight: 400; }
.psec > h3 .sp { flex: 1; }

/* ---------- Command search ---------- */
.cmdk { position: absolute; inset: 0; z-index: 120; display: none; background: var(--scrim); padding: 12vh 20px 20px; }
.cmdk.on { display: block; }
.cmdk-b { max-width: 700px; margin: 0 auto; background: var(--raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); overflow: hidden; animation: popIn 140ms var(--ease-out); }
.cmdk-in { display: flex; align-items: center; gap: 10px; padding: 0 15px; height: 55px; border-bottom: 1px solid var(--border); }
.cmdk-in input { flex: 1; border: 0; background: none; outline: none; font-size: var(--text-md); }
.cmdk-l { max-height: 54vh; overflow-y: auto; padding: 5px; }
.cmdk-l .g { padding: 10px 10px 4px; font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); }
.cmdk-l button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 5px 10px; border: 0; border-radius: var(--radius-md); background: none; text-align: left; cursor: pointer; font-size: var(--text-base); }
.cmdk-l button .ic { width: 18px; height: 18px; color: var(--text-muted); }
.cmdk-l button .s { color: var(--text-muted); font-size: var(--text-xs); margin-left: auto; }
.cmdk-l button.act { background: var(--surface-2); }
/* Panels without an app frame (Workspace, plain pages) open in this frameless layer over the page. */
.af.cx-ov { z-index: 140; background: transparent; pointer-events: none; }
.af.cx-ov .scrim.on, .af.cx-ov .panel { pointer-events: auto; }
body > .af.cx-ov { position: fixed; }

/* ===== src/css/kit.css ===== */
/* ---------- Kit: date picker, mentions, uploader, swipe rows, context menu, slider ---------- */
.dpk { padding: 15px; display: grid; gap: 13px; width: min(425px, calc(100vw - 20px)); }
.dpk-pre { display: flex; flex-wrap: wrap; gap: 7.5px; }
.dpk-pre button { height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text-2); font: 500 var(--text-xs)/1 var(--font-body); cursor: pointer; }
.dpk-pre button:hover { border-color: var(--accent); color: var(--accent-text); }
.dpk-nav { display: flex; align-items: center; justify-content: space-between; }
.dpk-nav b { font: 600 var(--text-md)/1 var(--font-heading); }
.dpk-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dpk-g .wd { text-align: center; font-size: 14px; color: var(--text-muted); padding: 5px 0; }
.dpk-d { height: 38px; border: 0; border-radius: var(--radius-md); background: none; color: var(--text); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; font-variant-numeric: tabular-nums; position: relative; }
.dpk-d:hover { background: var(--surface-2); }
.dpk-d.out { color: var(--text-muted); opacity: .5; }
.dpk-d.today::after { content: ''; position: absolute; bottom: 6.5px; left: 50%; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.dpk-d.sel { background: var(--primary); color: var(--text-on-accent); }
.dpk-d.mark::before { content: ''; position: absolute; top: 5px; right: 7.5px; width: 6.5px; height: 6.5px; border-radius: 50%; background: var(--danger); }
.dpk-d:disabled { opacity: .3; cursor: not-allowed; }
.dpk-type { display: flex; gap: 10px; align-items: center; }
.dpk-type .input { height: 45px; font-variant-numeric: tabular-nums; }
.mn-pop { position: fixed; z-index: 98; width: 325px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-3); padding: 5px; display: grid; animation: popIn 120ms var(--ease-out); }
.mn-pop button { display: flex; gap: 10px; align-items: center; height: 38px; padding: 0 10px; border: 0; background: none; color: var(--text); border-radius: var(--radius-sm); cursor: pointer; font: 500 var(--text-sm)/1 var(--font-body); text-align: left; }
.mn-pop button.act { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.mn-pop small { margin-left: auto; color: var(--text-muted); font-size: 14px; }
.upz { display: grid; place-items: center; gap: 5px; text-align: center; padding: 23px 18px; border: 2px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; transition: border-color var(--dur), background var(--dur), box-shadow var(--dur); }
.upz .ic { width: 33px; height: 33px; color: var(--accent); }
.upz b { font-weight: 600; font-size: var(--text-sm); }
.upz small { font-size: var(--text-xs); color: var(--text-muted); }
.upz.over { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 6.5px var(--accent-soft); }
.upz:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.upz.sm { padding: 13px; grid-auto-flow: column; justify-content: center; gap: 10px; }
.upz.sm .ic { width: 23px; height: 23px; }
.upl { display: grid; gap: 7.5px; }
.upf { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 10px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.upf .th { width: 50px; height: 50px; border-radius: var(--radius-sm); background: var(--surface-2) center / cover; display: grid; place-items: center; font: 700 11.5px/1 var(--font-mono); color: var(--text-muted); }
.upf .nm { font-weight: 500; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upf .mt { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.upf .bar { height: 5px; margin-top: 6.5px; }
.upf.err { border-color: var(--danger); } .upf.err .mt { color: var(--danger-text); } .upf.err .bar i { background: var(--danger); }
.upf.done .bar { display: none; } .upf.done .mt { color: var(--success-text); }
.chipf { display: inline-flex; align-items: center; gap: 7.5px; height: 35px; padding: 0 5px 0 13px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--text-xs); max-width: 275px; }
.chipf span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chipf button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; display: grid; place-items: center; }
.chipf .ic { width: 15px; height: 15px; }
.att { display: inline-flex; align-items: center; gap: 10px; padding: 7.5px 13px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); font-size: var(--text-xs); margin-top: 7.5px; max-width: 100%; }
.att .ic { width: 19px; height: 19px; color: var(--accent); }
.swr { position: relative; overflow: hidden; --lx: 0px; --rx: 0px; }
.swr-l, .swr-r { position: absolute; top: 0; bottom: 0; display: flex; overflow: hidden; transition: width 260ms var(--ease-out); pointer-events: none; }
.swr-l { left: 0; width: var(--rx); background: #15803D; color: #fff; align-items: center; padding-left: 23px; gap: 10px; font: 600 var(--text-xs)/1 var(--font-body); white-space: nowrap; }
.swr-r { right: 0; width: var(--lx); }
.swr-r button { pointer-events: auto; flex: 1 1 100px; min-width: 0; border: 0; color: #fff; font: 600 var(--text-xs)/1.2 var(--font-body); display: grid; place-items: center; align-content: center; gap: 5px; cursor: pointer; overflow: hidden; white-space: nowrap; transition: flex 220ms var(--ease-out); }
.swr-r button .ic { width: 23px; height: 23px; }
.swr-r .neutral { background: #5A6170; } .swr-r .accent { background: #0369A1; } .swr-r .danger { background: #B91C1C; } .swr-r .danger.confirm { background: #7F1D1D; }
.swr.commit-l .swr-r button:first-child { flex: 1 1 100%; } .swr.commit-l .swr-r button:not(:first-child) { flex: 0 0 0; padding: 0; }
.swr-t { position: relative; background: var(--surface); transition: transform 260ms var(--ease-out); touch-action: pan-y; }
.swr.drag .swr-t, .swr.drag .swr-l, .swr.drag .swr-r { transition: none; }
.swr-hint { animation: swPeek 1.3s var(--ease-out) 700ms; }
@keyframes swPeek { 0%, 100% { transform: none; } 35%, 60% { transform: translateX(-57px); } }
.cmenu { position: fixed; z-index: 97; min-width: 275px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-3); padding: 7.5px; display: grid; animation: popIn 120ms var(--ease-out); }
.cmenu button { display: flex; align-items: center; gap: 13px; height: 45px; padding: 0 13px; border: 0; background: none; color: var(--text); border-radius: var(--radius-sm); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; text-align: left; }
.cmenu button:hover, .cmenu button:focus { background: var(--surface-2); outline: none; }
.cmenu button .k { margin-left: auto; color: var(--text-muted); font: 400 14px/1 var(--font-mono); }
.cmenu button small { margin-left: auto; padding-left: 13px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; }
.cmenu button.dng { color: var(--danger-text); } .cmenu button.dng:hover, .cmenu button.dng:focus { background: var(--danger-soft); }
.cmenu hr { border: 0; border-top: 1px solid var(--border); margin: 5px 2px; }
.cmenu .ic { width: 20px; height: 20px; }
.rng { -webkit-appearance: none; appearance: none; width: 100%; height: 50px; background: transparent; cursor: pointer; }
.rng::-webkit-slider-runnable-track { height: 7.5px; border-radius: 4px; background: linear-gradient(to right, var(--accent) 0 var(--a, 0%), var(--surface-3) var(--a, 0%) 100%); }
.rng::-moz-range-track { height: 7.5px; border-radius: 4px; background: linear-gradient(to right, var(--accent) 0 var(--a, 0%), var(--surface-3) var(--a, 0%) 100%); }
.rng::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: var(--shadow-2); }
.rng::-moz-range-thumb { width: 23px; height: 23px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); }
/* Tabs system (Lab 16): spring indicator, roving focus + arrows, edge fades + chevrons, content cross-fade */
.tabsx { position: relative; display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.tabsx-sc { overflow-x: auto; scrollbar-width: none; flex: 1; position: relative; scroll-behavior: smooth; }
.tabsx-sc::-webkit-scrollbar { display: none; }
.tabsx-l { display: flex; position: relative; width: max-content; }
.tabsx-l button { flex: none; height: 45px; padding: 0 13px; border: 0; background: none; color: var(--text-muted); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: color var(--dur) var(--ease); white-space: nowrap; }
.tabsx-l button:hover { color: var(--text); }
.tabsx-l button[aria-selected="true"] { color: var(--text); }
.tabsx-l button .ic { width: 18px; height: 18px; }
.tabsx-l button .n { font: 500 13px/1 var(--font-body); padding: 0; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tabsx-l button[aria-selected="true"] .n { color: var(--text-2); }
.tabsx-l button:focus-visible { outline: 2px dashed var(--warning); outline-offset: -8.5px; border-radius: 10px; }
.tabsx-ind { position: absolute; bottom: 0; left: 0; height: 2px; border-radius: 2px; background: var(--accent); transition: transform 380ms var(--spring), width 380ms var(--spring); pointer-events: none; }
.tabsx-f { position: absolute; top: 0; bottom: 1px; width: 65px; display: flex; align-items: center; pointer-events: none; opacity: 0; transition: opacity var(--dur) var(--ease); z-index: 2; }
.tabsx-f.l { left: 0; background: linear-gradient(to right, var(--canvas) 55%, transparent); }
.tabsx-f.r { right: 0; justify-content: flex-end; background: linear-gradient(to left, var(--canvas) 55%, transparent); }
.tabsx-f.on { opacity: 1; }
.tabsx-f button { pointer-events: auto; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text-2); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-1); }
.tabsx-f button .ic { width: 18px; height: 18px; }
@media (hover: none) { .tabsx-f button { display: none; } }
.card .tabsx-f.l { background: linear-gradient(to right, var(--surface) 55%, transparent); } .card .tabsx-f.r { background: linear-gradient(to left, var(--surface) 55%, transparent); }
.tabpanel { transition: opacity 140ms var(--ease); }
.tabpanel.out { opacity: 0; }
.tabpanel.in { animation: tabIn 200ms var(--ease-out); }
@keyframes tabIn { from { opacity: 0; } }
.sk { border-radius: 7.5px; background: linear-gradient(90deg, var(--surface-2) 0, var(--surface-3) 40%, var(--surface-2) 80%) 0 0 / 200% 100%; animation: skSh 1.4s linear infinite; }
@keyframes skSh { to { background-position: -200% 0; } }

/* Search on top of a long menu (Lab 32): menuPop and the phone sheet */
.m-find { position: relative; padding: 5px 5px 0; }
.m-find .ic { position: absolute; left: 15px; top: 50%; transform: translateY(calc(-50% + 2.5px)); width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
.m-find .input { padding-left: 34px; height: 38px; }
/* A menu row may show a tile (an app's logo) instead of a line icon: items with `mark` */
.m-mark { display: inline-grid; place-items: center; flex: none; }
.menu .m-mark .amk { width: 22px !important; height: 22px !important; border-radius: 5px !important; }
.m-none { padding: 10px 13px; font-size: var(--text-sm); }
.menu button[hidden], .acts button[hidden], .menu hr[hidden], .acts hr[hidden] { display: none; }

/* ===== src/css/motion.css ===== */
/* ---------- Motion: a selection travels to its new place instead of jumping ---------- */
.thumbed { isolation: isolate; }
.thumb { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; will-change: transform, width; transition: transform 420ms var(--spring), width 420ms var(--spring), height 300ms var(--ease-out); }
.thumb.still { transition: none; }
.just { animation: just 340ms var(--spring); }
@keyframes just { 0% { transform: scale(.92); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .thumb { transition: none; } .just { animation: none; } }

/* ===== src/css/patterns.css ===== */
/* ===================== Lab patterns shared by every app ===================== */

/* Modal hierarchy (Lab 13): the overlay's weight matches the intent.
   Modal: only critical or destructive decisions. Drawer: details and navigation. Popover: quick actions. Sheet: choices on phones. */
.mdl-s { position: absolute; inset: 0; z-index: 170; display: grid; place-items: center; padding: 20px; background: var(--scrim); animation: mdlFade 200ms var(--ease-out); }
@keyframes mdlFade { from { opacity: 0; } }
.mdl { width: min(550px, 100%); background: var(--raised); color: var(--text); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); animation: mdlIn 220ms var(--ease-out); overflow: hidden; }
@keyframes mdlIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.mdl.out { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity 160ms, transform 160ms; }
.mdl .mb { padding: 25px; display: grid; gap: 13px; }
.mdl .mb h3 { font: 600 var(--text-lg)/1.3 var(--font-heading); }
.mdl .mb p { color: var(--text-2); font-size: var(--text-sm); }
.mdl .mb .note { margin-top: 5px; }
.mdl .mdl-type { margin-top: 5px; }
.mdl .mf { display: flex; justify-content: flex-end; gap: 7.5px; padding: 13px 25px; border-top: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
@container device (max-width: 719px) { .mdl .mf { flex-direction: column-reverse; } .mdl .mf .btn { width: 100%; height: 44px; } }

/* Bottom sheet for choices on phones (Lab 12): thumb-reach rows, page visible behind, drag down to close */
.as-s { position: absolute; inset: 0; z-index: 110; background: var(--scrim); opacity: 0; transition: opacity 250ms var(--ease-out); }
.as-s.on { opacity: 1; }
/* A column, not a three-row grid: with a search field the sheet has four parts, and the grid gave the field's row
   no height, so its icon sat above the input and the list ran under it. */
.as { position: absolute; left: 0; right: 0; bottom: 0; z-index: 111; max-height: 88%; display: flex; flex-direction: column; background: var(--surface); border-radius: 15px 15px 0 0; box-shadow: var(--shadow-3); transform: translateY(102%); transition: transform 320ms var(--ease-out); padding-bottom: env(safe-area-inset-bottom, 0); }
.as.on { transform: none; }
.as.drag { transition: none; }
.as .grab { height: 30px; display: grid; place-items: center; cursor: grab; touch-action: none; } .as .grab i { width: 50px; height: 5px; border-radius: 2px; background: var(--border-strong); }
.as h4 { padding: 0 25px 10px; font: 600 var(--text-md)/1.3 var(--font-heading); touch-action: none; }
.as .acts { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 10px 18px; display: grid; align-content: start; }
.as > .grab, .as > h4, .as > .m-find, .as > .m-none { flex: none; }
/* The search field in a sheet: thumb-sized, 16px text (iOS zooms the page on anything smaller), the icon inside it */
.as .m-find { padding: 0 18px 10px; }
.as .m-find .ic { left: 31px; top: calc((100% - 10px) / 2); transform: translateY(-50%); width: 20px; height: 20px; }
.as .m-find .input { height: 46px; padding-left: 44px; font-size: 16px; }
.as .m-none { padding: 0 25px 14px; }
.as .acts > button .m-mark .amk, .as .acts > .m-split > button .m-mark .amk { width: 30px !important; height: 30px !important; border-radius: 7px !important; }
.as .acts > button, .as .acts > .m-split > button { display: flex; gap: 15px; align-items: center; min-height: 58px; padding: 0 18px; border: 0; background: none; color: var(--text); font: 500 var(--text-md)/1.2 var(--font-body); border-radius: var(--radius-md); cursor: pointer; text-align: left; }
.as .acts > button .ic, .as .acts > .m-split > button .ic { width: 25px; height: 25px; color: var(--text-2); }
.as .acts > button:active, .as .acts > button:hover, .as .acts > .m-split > button:active, .as .acts > .m-split > button:hover { background: var(--surface-2); }
.as .acts > button:has(.m-sub), .as .acts > .m-split > button:has(.m-sub) { padding-top: 10px; padding-bottom: 10px; } .as .acts > button:has(.m-sub) > span, .as .acts > .m-split > button:has(.m-sub) > span { display: grid; gap: 3px; text-align: left; } .as .acts .m-sub { font-weight: 400; font-size: var(--text-sm); }
.as .acts > button.dng, .as .acts button.dng .ic { color: var(--danger-text); }
.as .acts > button small, .as .acts > .m-split > button small { margin-left: auto; color: var(--text-muted); font-size: var(--text-xs); }
.as .acts > button[aria-checked="true"], .as .acts > .m-split > button[aria-checked="true"] { color: var(--accent-text); font-weight: 600; } .as .acts button[aria-checked="true"] .ic { color: var(--accent); }
.as .acts hr { border: 0; border-top: 1px solid var(--border); margin: 7.5px 7.5px; }
/* A row with an aside: the thumb-sized row, then the icon button at its end, as tall as the row */
.as .acts > .m-split { display: flex; align-items: stretch; gap: 4px; }
.as .acts > .m-split > [data-i] { flex: 1; min-width: 0; }
.as .acts > .m-split > .m-aside { flex: none; width: 58px; padding: 0; justify-content: center; }
.as .acts > .m-split > .m-aside.txt { width: auto; min-height: 38px; align-self: center; margin-right: 8px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text); font: 600 var(--text-sm)/1 var(--font-body); }

/* Card hover anatomy (Lab 21): lift about 8px while the shadow grows, scale the picture inside its frame,
   reveal the actions one after another, never scale the card. Touch screens always show the actions. */
.hc { position: relative; display: grid; align-content: start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1); color: inherit; text-align: left; font: inherit; transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out); }
.hc-art { position: relative; height: 80px; overflow: hidden; }
.hc-art > i { position: absolute; inset: 0; display: grid; place-items: center; transition: transform 300ms var(--ease-out); }
.hc-art > i .ic { width: 28px; height: 28px; color: rgba(255, 255, 255, .92); }
.hc-art > i b { font: 700 25px/1 var(--font-brand); color: rgba(255, 255, 255, .95); letter-spacing: -.02em; }
.hc-bd { padding: 15px 18px 18px; display: grid; gap: 7.5px; align-content: start; }
.hc-acts { display: flex; gap: 7.5px; flex-wrap: wrap; margin-top: 5px; }
.hc-acts .btn { height: 33px; padding: 0 11.5px; font-size: var(--text-sm); }
@media (hover: hover) {
  .hc-acts .btn { opacity: 0; transform: translateY(7.5px); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), background var(--dur), border-color var(--dur); }
  .hc:hover, .hc:focus-within { transform: translateY(-5px); box-shadow: var(--shadow-3); border-color: var(--accent); }
  .hc:hover .hc-art > i, .hc:focus-within .hc-art > i { transform: scale(1.05); }
  .hc:hover .hc-acts .btn, .hc:focus-within .hc-acts .btn { opacity: 1; transform: none; }
  .hc:hover .hc-acts .btn:nth-child(2), .hc:focus-within .hc-acts .btn:nth-child(2) { transition-delay: 60ms; }
  .hc:hover .hc-acts .btn:nth-child(3), .hc:focus-within .hc-acts .btn:nth-child(3) { transition-delay: 120ms; }
}

/* Bulk actions (Lab 23): three-state select-all, exact counts, "all N matching", undo instead of a confirm */
.blk-h { display: flex; align-items: center; gap: 10px 13px; padding: 6.5px 10px; min-height: 48px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: var(--text-sm); flex-wrap: wrap; transition: background var(--dur) var(--ease); }
.blk-h.sel { background: var(--accent-soft); }
.blk-h .cnt { font-weight: 600; font-variant-numeric: tabular-nums; }
.blk-h .acts { display: flex; gap: 7.5px; flex-wrap: wrap; margin-left: auto; }
.blk-h .acts .btn { height: 33px; flex: none; }
@container app (max-width: 719px) { .blk-h .acts { order: 3; flex: 1 0 100%; margin-left: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } }
.blk-ban { padding: 11.5px 18px; font-size: var(--text-sm); text-align: center; background: var(--accent-soft); color: var(--text-2); border-bottom: 1px solid var(--border); }
.blk-ban button { border: 0; background: none; padding: 0; color: var(--accent-text); font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer; text-decoration: underline; }
.cbx:indeterminate { background: var(--accent); border-color: var(--accent); }
.cbx:indeterminate::after { content: ''; width: 13px; height: 2px; border: 0; background: #fff; transform: none; }
.blk-row { transition: background var(--dur) var(--ease), opacity 250ms, transform 250ms; }
.blk-row.on, .blk-row.on td { background: var(--accent-soft); }
.blk-row.gone { opacity: 0; transform: translateX(-20px); }

/* ===== src/css/brand.css ===== */
/* ---------- App identity: every app has its own logo and colour (the Microsoft 365 model) ----------
   The logo tile appears wherever an app is named: Workspace rail, tiles, notifications, the app's own header.
   Inside an app the colour stays quiet: the header tile and the active nav icon. Buttons and states keep the shared system colours. */
.amk { display: inline-grid; place-items: center; flex: none; background: linear-gradient(135deg, var(--c1), var(--c2)); color: var(--c2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 1px 2px rgba(0, 0, 0, .12); }
.amk svg { width: 64%; height: 64%; display: block; overflow: visible; }
.amk.flat { box-shadow: none; }
/* Dark theme: a black tile with the logo in the app's light ink (inkD). Cut-outs (currentColor) take the
   tile colour, so they still read as holes. A hairline keeps the tile off the #181818 canvas; no shadow. */
body[data-th="dark"] .amk { --amk-tile: #0B0B0C; background: var(--amk-tile); color: var(--amk-tile); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
body[data-th="dark"] .amk svg [fill="#fff"] { fill: var(--ink-d, #fff); }
/* The AI tile is the exception: it keeps its gradient and white mark in the dark theme, so AI stands out among the apps. */
body[data-th="dark"] .amk.ai { background: var(--ai-grad); color: var(--ai-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ws-it .ws-amk { opacity: .82; transition: opacity var(--dur), box-shadow var(--dur); }
.ws-it:hover .ws-amk { opacity: 1; }
.ws-it[aria-current="page"] .ws-amk { opacity: 1; box-shadow: 0 0 0 2px var(--ws-bg), 0 0 0 3.5px #fff; }
.ws-strip .tabs-o button { padding: 0 5px; }
.ws-strip .tabs-o button[aria-current="page"] { background: rgba(255, 255, 255, .16); color: #fff; }
body[data-th="light"] .af { --app-ink: var(--ink-l); } body[data-th="dark"] .af { --app-ink: var(--ink-d); }
.af-nav a[aria-current="page"] .ic, .af-tabs button[aria-current="page"] .ic { color: var(--app-ink, var(--text)); }
.af-nav .nv-app .nv-id { display: flex; align-items: center; gap: 10px; }


/* Rail overflow and the All apps launcher */
.ws-it[hidden] { display: none; }
.ws-it.more::after { content: ''; position: absolute; top: 6px; right: 14px; width: 7px; height: 7px; border-radius: 50%; background: #7DD3FC; box-shadow: 0 0 0 2px var(--ws-bg); }
.lnch { position: absolute; z-index: 140; left: 8px; right: 8px; top: 48px; bottom: 8px; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--raised); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); opacity: 0; transform: translateX(-8px); transition: opacity 160ms var(--ease-out), transform 200ms var(--ease-out); }
@container device (min-width: 720px) { .lnch { top: auto; right: auto; width: 440px; max-height: min(640px, calc(100% - 24px)); } }
.lnch.on { opacity: 1; transform: none; }
.lnch-h { display: flex; gap: 6px; align-items: center; padding: 10px; border-bottom: 1px solid var(--border); } .lnch-h .searchf { flex: 1; }
.lnch-b { overflow-y: auto; padding: 6px 10px 12px; overscroll-behavior: contain; }
.lnch-sec h3 { font: 600 var(--text-sm)/1.3 var(--font-body); color: var(--text-muted); padding: 10px 4px 6px; }
.lnch-rec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.lnch-r { display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; border: 0; border-radius: var(--radius-md); background: none; color: var(--text); font: 500 var(--text-sm)/1.2 var(--font-body); cursor: pointer; text-align: center; }
.lnch-r span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lnch-r:hover, .lnch-a:hover { background: var(--surface-2); }
.lnch-l { display: grid; }
.lnch-a { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border: 0; border-radius: var(--radius-md); background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.lnch-a[hidden] { display: none; }
.lnch-a b { display: block; font-weight: 500; } .lnch-a small { display: block; font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lnch-a.off .amk { filter: saturate(.55); opacity: .75; }
.lnch-open { font-size: var(--text-xs); color: var(--accent-text); }
.lnch-none { padding: 12px 6px; font-size: var(--text-sm); }

/* ===== src/css/elements.css ===== */
/* ===================== Web components (src/js/components.js) =====================
   Light DOM: the markup inside each element uses the classes above; this only sets how the elements themselves sit. */
cx-tabs, cx-handoff, cx-bulk-bar, cx-uploader, cx-mentions { display: block; min-width: 0; }
cx-app-mark { display: inline-flex; flex: none; line-height: 0; }
cx-menu, cx-confirm { display: contents; }
cx-item, cx-sep, cx-tab, cx-panel, cx-toast { display: none; }
cx-toggle { display: inline-flex; align-items: center; gap: 13px; }
cx-toggle .cx-tg-l { color: var(--text); }
cx-date-picker { display: inline-flex; }
cx-date-picker .btn .ic { width: 18px; height: 18px; color: var(--text-muted); }
cx-date-picker .cx-dp-empty { color: var(--text-muted); }
/* An app frame fills its box; give the box a height (on a full page: html, body and the element at 100%). */
cx-app-frame { display: block; position: relative; height: 100%; min-height: 0; }
/* cx-panel: a footer slot lays its buttons out like the panel footer itself */
.panel-f > [slot="foot"] { display: flex; flex-wrap: wrap; gap: 7.5px; justify-content: inherit; flex: 1; }

/* ===== src/css/widgets.css ===== */
/* ===================== Shared widgets: account, notifications, help (src/js/widgets.js) ===================== */
.cxw-form { display: grid; gap: 16px; }
.cxw-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cxw-pw { position: relative; }
.cxw-pw .input { padding-right: 44px; }
.cxw-pw .ibtn { position: absolute; right: 2px; top: 50%; translate: 0 -50%; width: 34px; height: 34px; }
.cxw-pw .ibtn .ic { width: 18px; height: 18px; }
.cxw-fine { font-size: var(--text-xs); }

/* Bell: a popover on wide screens, a sheet on phones */
.pop.cxw-np { display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: min(560px, calc(100vh - 80px)); }
.cxw-nh { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 15px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: var(--text-sm); }
.cxw-nh > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.cxw-nh .n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--danger); color: #fff; font: 700 11.5px/20px var(--font-body); text-align: center; }
.cxw-nh .sp { flex: 1; }
.cxw-nh .linkbtn { font-size: var(--text-xs); }
.cxw-nb { overflow-y: auto; overscroll-behavior: contain; }
.cxw-nb .empty { padding: 26px 18px; }
.cxw-nl { border-top: 0; }
.cxw-nl .li { padding: 10px 15px; align-items: start; }
.cxw-nl .li .s { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cxw-nl .li .e { white-space: nowrap; padding-top: 2px; }
.cxw-more { display: flex; justify-content: center; padding: 10px; }
.cxw-push { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 15px; border-bottom: 1px solid var(--border); }
.cxw-push b { display: block; font-weight: 600; font-size: var(--text-sm); }
.cxw-push small { display: block; font-size: var(--text-xs); color: var(--text-muted); }
.panel .cxw-push { padding: 0 0 14px; }
.tg[disabled] { opacity: .45; cursor: not-allowed; }

/* Notification settings: one row per category, a switch per channel */
.cxw-grid { border-top: 1px solid var(--border); }
.cxw-g { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 84px); gap: 10px; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.cxw-g > span:first-child { min-width: 0; }
.cxw-g b { display: block; font-weight: 600; font-size: var(--text-sm); }
.cxw-g small { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 1px; }
.cxw-g .cell { display: flex; justify-content: center; }
.cxw-g .off, .cxw-gh .off { opacity: .45; }
.cxw-gh { padding: 8px 2px; border-top: 0; }
.cxw-gh span { font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); text-align: center; }
.cxw-gh [data-tip] { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.cxw-prov { color: var(--text-2) !important; margin-top: 4px !important; }
.cxw-prov .linkbtn { font-size: inherit; margin-left: 6px; }
.tg[aria-checked="mixed"] { background: linear-gradient(90deg, var(--accent) 50%, var(--border-strong) 50%); }
.tg[aria-checked="mixed"]::after { transform: translateX(9px); }
.cxw-lock { display: inline-flex; align-items: center; gap: 5px; font: 500 var(--text-xs)/1 var(--font-body); color: var(--text-muted); cursor: default; }
.cxw-lock .ic { width: 14px; height: 14px; }
.cxw-adv { margin-top: 14px; }
.cxw-adv > summary { cursor: pointer; font-weight: 500; font-size: var(--text-sm); color: var(--accent-text); padding: 6px 0; }
@container app (max-width: 719px) { .cxw-g { grid-template-columns: minmax(0, 1fr) repeat(3, 52px); gap: 6px; } }

/* The elements, for pages without the app frame */
cx-account, cx-bell, cx-help { display: inline-flex; position: relative; }
cx-bell .af-badge { box-shadow: 0 0 0 2px var(--surface); }

/* Your apps: the switcher behind the app's name (widgets.js appSwitcher) */
.pop.asw { padding: 0; display: grid; max-height: min(560px, calc(100vh - 80px)); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.asw-h { padding: 12px 14px 6px; font-size: var(--text-sm); }
.asw-b { overflow-y: auto; padding: 4px 8px 10px; overscroll-behavior: contain; }
.asw-find { margin: 2px 4px 8px; }
.asw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.asw-t { display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; border-radius: var(--radius-md); color: var(--text); text-decoration: none; font: 500 var(--text-xs)/1.25 var(--font-body); text-align: center; }
/* names are "CI <product>": up to two lines, so the product is never cut off */
.asw-t { align-content: start; }
.asw-t > span:not(.amk) { max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.asw-t:hover { background: var(--surface-2); }
.asw-t:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.asw-t[hidden] { display: none; }
.asw-t.cur { background: var(--accent-soft); }
.asw-t.cur span { font-weight: 700; }
.asw-t.off .amk { filter: saturate(.5); opacity: .7; }
.asw-img { color: #fff; font: 700 var(--text-sm)/1 var(--font-brand); overflow: hidden; }
body[data-th="dark"] .asw-img { color: var(--text-2); } /* the dark tile is black: the initials take the light ink */
.asw-img img { width: 70%; height: 70%; object-fit: contain; display: block; }
.asw-f { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border); }
.asw-f .btn { text-decoration: none; }
.asw-none { padding: 14px 8px; margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.asw-load { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 8px; }
.asw-sk { height: 64px; border-radius: var(--radius-md); background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: aswSk 1.2s linear infinite; }
@keyframes aswSk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .asw-sk { animation: none; } }

/* ---------- Viewing as someone else: a strip above every page, with Exit (widgets.js) ---------- */
html.cx-imp-on { --cx-imp-h: 32px; }
.cx-imp { position: fixed; top: 0; left: 0; right: 0; height: var(--cx-imp-h, 32px); z-index: 1000; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; font: 500 var(--text-sm)/1 var(--font-body); color: #3B2A06; background: repeating-linear-gradient(-45deg, #FBBF24 0 14px, #F7B21B 14px 28px); }
.cx-imp .ic { flex: none; width: 16px; height: 16px; }
.cx-imp-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.3; }
.cx-imp b { font-weight: 700; }
.cx-imp button { flex: none; height: 22px; padding: 0 10px; border: 1px solid #3B2A06; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .6); color: #3B2A06; font: 600 var(--text-xs)/1 var(--font-body); cursor: pointer; }
.cx-imp button:hover { background: rgba(255, 255, 255, .85); }
.cx-imp button:focus-visible { outline: 2px solid #3B2A06; outline-offset: 1px; }
.cx-imp button[disabled] { opacity: .6; cursor: default; }
/* The page's app frame starts below it (unless its host was already moved); so does the full-page overlay frame */
html.cx-imp-on :not([data-cx-imp]) > .af:not(.embedded):not(.cx-ov), html.cx-imp-on body > .af.cx-ov { top: var(--cx-imp-h); }
@media (max-width: 480px) { .cx-imp { justify-content: flex-start; } .cx-imp button { margin-left: auto; } .cx-imp-ro { display: none; } }
/* Client's own strip from before the package had one: hidden, so there are never two */
html.cx-imp-on .cl-imp { display: none; } html.cx-imp-on body.cl-has-imp #app { bottom: 0; }

/* ===== src/css/permissions.css ===== */
/* ===================== Permissions editor (src/js/permissions.js) =====================
   Its own size container: two panes from 720 px of its own width, one column with a back step below that. */
cx-permissions { display: block; min-width: 0; }
.cxp { container: cxp / inline-size; display: grid; gap: 12px; min-width: 0; color: var(--text); }
.cxp [hidden] { display: none !important; }
.cxp-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* modules the company has not bought: named, so a missing right is explained */
.cxp-locked { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: var(--text-sm); color: var(--text-2); }
.cxp-locked .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--text-muted); }
.cxp-appb { gap: 8px; max-width: 100%; }
.cxp-appb > .ic:last-child { width: 16px; height: 16px; color: var(--text-muted); }
.cxp-state { border-top: 1px solid var(--border); }

.cxp-body { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); min-height: 0; }
.cxp-list { display: flex; flex-direction: column; min-width: 0; }
.cxp-det { min-width: 0; padding-bottom: 16px; outline: none; }
@container cxp (min-width: 720px) {
  .cxp-body { grid-template-columns: minmax(290px, 36%) minmax(0, 1fr); height: var(--cxp-h, min(70vh, 760px)); }
  .cxp-list { border-right: 1px solid var(--border); }
  .cxp-list, .cxp-det { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
  .cxp-det { padding: 0 6px 20px 24px; }
  .cxp-only-narrow { display: none !important; }
}
@container cxp (max-width: 719px) {
  .cxp[data-step="detail"] .cxp-list, .cxp[data-step="list"] .cxp-det { display: none; }
  .cxp-body { border-bottom: 0; }
}

/* The list: search and role on top, then units and people (or groups and rights) as flat rows */
.cxp-lh { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; padding: 10px 10px 10px 0; background: var(--surface); }
.cxp-lh .searchf { flex: 1; min-width: 0; }
.cxp-lh .input { width: 100%; }
.cxp-role { max-width: 45%; min-width: 0; }
.cxp-role.on { border-color: var(--accent); color: var(--accent-text); }
.cxp-list .blk-h { min-height: 44px; padding: 6px 10px 6px 8px; }
.cxp-unit { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px 0 calc(var(--d, 0) * 16px); border-bottom: 1px solid var(--border); font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.cxp-fold { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border: 0; background: none; color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; }
.cxp-fold:hover { background: var(--surface-2); color: var(--text); }
.cxp-fold .ic { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.cxp-fold[aria-expanded="false"] .ic { transform: rotate(-90deg); }
.cxp-un { flex: 1; min-width: 0; }
.cxp-cnt { font-weight: 400; font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cxp-row { display: flex; align-items: center; gap: 2px; padding-left: calc(var(--d, 0) * 16px + 34px); border-bottom: 1px solid var(--border); transition: background var(--dur) var(--ease); }
.cxp-row:hover { background: var(--surface-2); }
.cxp-row.on { background: var(--accent-soft); }
.cxp-row:has([aria-current="true"]) { box-shadow: inset 2px 0 0 var(--accent); }
.cxp-rr { padding-left: 0; }
.cxp-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 12px 7px 8px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
.cxp-rr .cxp-pick { padding-left: 12px; }
.cxp-pick:focus-visible { outline-offset: -2px; }
.cxp-who { flex: 1; min-width: 0; display: grid; }
.cxp-who .t { font-weight: 500; font-size: var(--text-sm); color: var(--text); }
.cxp-who .s { font-size: var(--text-xs); color: var(--text-muted); }
.cxp-pick[aria-current="true"] .t { color: var(--accent-text); }
.cxp-sum { display: grid; justify-items: end; gap: 1px; max-width: 42%; font-size: var(--text-xs); color: var(--text-2); text-align: right; }
.cxp-sum > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cxp-sum .m { color: var(--text-muted); }
.cxp-chg { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-text); font-weight: 600; }
.cxp-chg::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.cxp-lg { padding: 16px 12px 6px; font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.cxp-foot { padding: 12px 12px 14px; font-size: var(--text-xs); color: var(--text-muted); }
.cxp-list .empty { padding: 30px 16px; }

/* The detail: who (or which right), the preset row, the rights by module */
.cxp-hint { display: grid; place-items: center; min-height: 100%; }
.cxp-dh { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 16px 0 14px; }
.cxp-dh .av.lg { margin-top: 2px; }
.cxp-dh .avs { margin-top: 4px; }
.cxp-dh h2 { font: 600 var(--text-lg)/1.3 var(--font-heading); outline: none; overflow-wrap: anywhere; }
.cxp-sub { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 2px; font-size: var(--text-sm); color: var(--text-muted); }
.cxp-desc { margin-top: 3px; font-size: var(--text-sm); color: var(--text-2); max-width: 70ch; }
.cxp-back { flex-basis: 100%; justify-content: flex-start; width: fit-content; margin: -6px 0 2px -10px; }
.cxp-dh > .btn:last-child { flex: none; }
.cxp-pre { display: grid; gap: 8px; padding: 12px 0 14px; border-top: 1px solid var(--border); }
.cxp-pre .lbl { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.cxp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cxp-chips .chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-text); background: transparent; }
.cxp-chips .chip .ic { color: var(--accent); }
.cxp-custom { font-size: var(--text-sm); color: var(--text-muted); padding: 0 4px; }
.cxp-pre-d { font-size: var(--text-xs); color: var(--text-muted); }
.cxp-rf { display: block; margin: 2px 0 6px; max-width: 380px; }
.cxp-rf .input { width: 100%; }
.cxp-gh { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: 10px; padding: 18px 0 8px; background: var(--surface); border-bottom: 1px solid var(--border); }
.cxp-gh h3 { font: 600 var(--text-sm)/1.3 var(--font-heading); }
.cxp-gh .n { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cxp-gh .sp { flex: 1; }
.cxp-gh .linkbtn { font-size: var(--text-xs); padding: 2px 0; }
.cxp-gh .linkbtn + .linkbtn { margin-left: 4px; }
.cxp .linkbtn[disabled] { color: var(--text-muted); opacity: .55; cursor: default; text-decoration: none; }
.cxp-perm { display: flex; align-items: flex-start; gap: 16px; padding: 11px 2px 11px 0; border-bottom: 1px solid var(--border); }
.cxp-prow { align-items: center; gap: 12px; }
.cxp-pt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cxp-pt b { font-weight: 500; font-size: var(--text-sm); color: var(--text); }
.cxp-pt small { font-size: var(--text-xs); color: var(--text-muted); }
.cxp-notes { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 3px; font-size: var(--text-xs); font-weight: 500; }
.cxp-add { color: var(--success-text); }
.cxp-rem { color: var(--danger-text); }
.cxp-some { color: var(--text-2); }
.cxp-lock { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); cursor: help; }
.cxp-lock .ic { width: 13px; height: 13px; }
.cxp-perm .tg { margin-top: 1px; }
.cxp-prow .tg { margin-top: 0; }
.cxp-lockd { flex: none; min-width: 40px; text-align: center; font-size: var(--text-xs); color: var(--text-muted); padding-top: 3px; }
.cxp-none { padding: 12px 0; font-size: var(--text-sm); color: var(--text-muted); }

/* The staged changes: a quiet line when there are none, an action bar when there are */
.cxp-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-muted); }
.cxp-bar .ic { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.cxp-bar-t { flex: 1; min-width: 0; }
.cxp-bar.on { position: sticky; bottom: 0; z-index: 3; padding: 9px 10px 9px 14px; color: var(--text-2); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--radius-lg); background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface); }
.cxp-bar.on b { color: var(--text); font-weight: 600; }
.cxp-bar-s { margin-left: 12px; color: var(--text-muted); font-size: var(--text-xs); }
@container cxp (max-width: 719px) { .cxp-bar.on .cxp-bar-t { flex-basis: 100%; } .cxp-bar.on .btn { flex: 1; height: 40px; } }

/* Review (in a panel, outside .cxp) */
.cxp-rv-i { font-size: var(--text-sm); color: var(--text-2); margin-bottom: 6px; }
.cxp-rv { padding: 12px 0 8px; border-bottom: 1px solid var(--border); }
.cxp-rvh { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.cxp-rvh b { font-weight: 600; }
.cxp-rvh .muted { margin-left: auto; font-size: var(--text-xs); }
.cxp-rvl { display: flex; align-items: center; gap: 10px; min-height: 34px; padding-left: 33px; font-size: var(--text-sm); }
.cxp-op { width: 52px; flex: none; font-size: var(--text-xs); font-weight: 600; }
.cxp-rvl.add .cxp-op { color: var(--success-text); }
.cxp-rvl.rem .cxp-op { color: var(--danger-text); }
.cxp-rvl .ibtn { width: 30px; height: 30px; }
.cxp-rvl .ibtn .ic { width: 16px; height: 16px; }

/* Copy from a person */
.pop.cxp-cpp { padding: 8px; }
.cxp-cp { display: grid; gap: 6px; }
.cxp-cp .input { width: 100%; }
.cxp-cp-d { font-size: var(--text-xs); color: var(--text-muted); padding: 0 4px; }
.cxp-cpl { max-height: 300px; overflow-y: auto; padding: 0; }
.cxp-cpl > button { gap: 10px; }
.cxp-cpl > button small { max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cxp-cpl > button > .av { flex: none; }
.cxp-cpl > button > span:not(.av) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cxp-dh .avs .av { margin-left: -4px; }
.cxp-dh .avs .av:first-child { margin-left: 0; }
@container cxp (max-width: 719px) { .cxp-dh .grow { flex: 1 1 calc(100% - 60px); } .cxp-dh > [data-act="copy"] { margin-left: 52px; } }

/* ===== src/css/integrations.css ===== */
/* ===================== Integrations editor (src/js/integrations.js) =====================
   Its own size container, like the permissions editor: two panes from 720 px of its own width, one column with a
   back step below that. Status is coloured text with a small dot, never a tinted box. */
cx-integrations { display: block; min-width: 0; }
.cxi { container: cxi / inline-size; display: grid; gap: 10px; min-width: 0; color: var(--text); }
.cxi [hidden] { display: none !important; }
.cxi-top { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.cxi-sp { flex: 1; }
.cxi-appb { gap: 8px; max-width: 100%; }
.cxi-appb > .ic:last-child { width: 16px; height: 16px; color: var(--text-muted); }
.cxi-n { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cxi-n:empty { display: none; }
.cxi-state { border-top: 1px solid var(--border); }
@container cxi (max-width: 559px) { .cxi-top .seg { order: -1; flex: 1 1 100%; } .cxi-top .seg button { flex: 1; justify-content: center; } .cxi-top .cxi-sp { display: none; } .cxi-top > .btn { flex: 1; justify-content: center; } }

/* Health: one line of coloured counts */
.cxi-health { display: grid; gap: 4px; min-height: 22px; }
.cxi-hl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; font-size: var(--text-sm); color: var(--text-2); }
.cxi-hn { font-weight: 600; color: var(--text); }
.cxi-warn { display: flex; align-items: flex-start; gap: 7px; font-size: var(--text-sm); color: var(--warning-text); }
.cxi-warn .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }

/* Status as coloured text with a dot */
.cxi-st { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 500; color: var(--text-2); white-space: nowrap; }
.cxi-st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--text-muted); }
.cxi-st.ok { color: var(--success-text); } .cxi-st.ok::before { background: var(--success); }
.cxi-st.err { color: var(--danger-text); } .cxi-st.err::before { background: var(--danger); }
.cxi-st.warn { color: var(--warning-text); } .cxi-st.warn::before { background: var(--warning); }
.cxi-st.busy { color: var(--accent-text); } .cxi-st.busy::before { background: var(--accent); animation: cxiPulse 1s ease-in-out infinite; }
.cxi-st.off { color: var(--text-muted); }
.cxi-st.plain { font-weight: 400; } .cxi-st.plain::before { display: none; }
small.cxi-st { font-size: var(--text-xs); }
@keyframes cxiPulse { 50% { opacity: .3; } }
.cxi-spin { animation: cxiSpin 900ms linear infinite; }
@keyframes cxiSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cxi-spin, .cxi-st.busy::before { animation: none; } }
.cxi-okl { color: var(--success-text); } .cxi-errl { color: var(--danger-text); } .cxi-acc { color: var(--accent-text); } .cxi-rem { color: var(--danger-text); font-weight: 500; }

/* Two panes */
.cxi-body { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); min-height: 0; }
.cxi-list { display: flex; flex-direction: column; min-width: 0; }
.cxi-det { position: relative; min-width: 0; padding-bottom: 16px; outline: none; }
@container cxi (min-width: 720px) {
  .cxi-body { grid-template-columns: minmax(300px, 38%) minmax(0, 1fr); height: var(--cxi-h, min(72vh, 780px)); }
  .cxi-list { border-right: 1px solid var(--border); }
  .cxi-list, .cxi-det { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
  .cxi-det { padding: 0 6px 0 24px; }
  .cxi-only-narrow { display: none !important; }
}
@container cxi (max-width: 719px) {
  .cxi[data-step="detail"] .cxi-list, .cxi[data-step="list"] .cxi-det { display: none; }
  .cxi[data-step="detail"] .cxi-health { display: none; }
  .cxi-body { border-bottom: 0; }
}

/* The list: groups (an app's feeds) and systems as flat rows */
.cxi-lh { position: sticky; top: 0; z-index: 2; padding: 10px 10px 10px 0; background: var(--surface); }
.cxi-lh .input { width: 100%; }
.cxi-lg { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 14px 10px 6px 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.cxi-lg b { font-weight: 600; color: var(--text); }
.cxi-lg .linkbtn { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); white-space: nowrap; }
.cxi-lg .linkbtn .ic { width: 14px; height: 14px; }
.cxi-row { display: flex; align-items: center; border-bottom: 1px solid var(--border); transition: background var(--dur) var(--ease); }
.cxi-row:hover { background: var(--surface-2); }
.cxi-row.on { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.cxi-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 7px 6px 7px 12px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
.cxi-pick:focus-visible { outline-offset: -2px; }
.cxi-who { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cxi-who .t { font-weight: 500; font-size: var(--text-sm); color: var(--text); }
.cxi-who .s, .cxi-sub { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: var(--text-xs); color: var(--text-muted); min-width: 0; }
.cxi-who .s span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cxi-pick[aria-current="true"] .t { color: var(--accent-text); }
.cxi-sum { display: grid; justify-items: end; gap: 1px; max-width: 46%; text-align: right; }
.cxi-sum .cxi-st { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-xs); }
.cxi-when { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.cxi-tb { width: 34px; height: 34px; margin-right: 4px; flex: none; }
.cxi-tb .ic { width: 16px; height: 16px; }
.cxi-tb[aria-disabled="true"] { cursor: progress; }
@container cxi (max-width: 459px) { .cxi-pick { flex-wrap: wrap; row-gap: 3px; } .cxi-sum { flex-basis: 100%; max-width: none; display: flex; align-items: baseline; gap: 10px; text-align: left; } }
.cxi-none { padding: 10px 12px 12px; font-size: var(--text-sm); color: var(--text-muted); border-bottom: 1px solid var(--border); }
.cxi-none span { display: block; margin-top: 2px; font-size: var(--text-xs); }
.cxi-list .empty { padding: 30px 16px; }

/* The detail */
.cxi-hint { display: grid; place-items: center; min-height: 100%; }
.cxi-dh { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 16px 0 10px; }
.cxi-dh h2 { font: 600 var(--text-lg)/1.3 var(--font-heading); outline: none; overflow-wrap: anywhere; }
.cxi-sub { font-size: var(--text-sm); margin-top: 2px; gap: 2px 14px; }
.cxi-back { flex-basis: 100%; justify-content: flex-start; width: fit-content; margin: -6px 0 2px -10px; }
.cxi-dh > .ibtn { margin-top: -2px; }
.cxi-stat { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 0 14px; border-top: 1px solid var(--border); }
.cxi-stat .btn { flex: none; }
.cxi-big { display: flex; align-items: center; gap: 8px; font: 600 var(--text-md)/1.3 var(--font-heading); color: var(--text-2); }
.cxi-big .ic { width: 20px; height: 20px; flex: none; }
.cxi-big.ok { color: var(--success-text); } .cxi-big.err { color: var(--danger-text); } .cxi-big.busy { color: var(--accent-text); } .cxi-big.off { color: var(--text-2); } .cxi-big.off .ic { color: var(--text-muted); }
.cxi-big.busy .ic { animation: cxiSpin 900ms linear infinite; }
.cxi-stl { margin-top: 3px; font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.cxi-stl .cxi-errl { color: var(--danger-text); }

/* What a test brought back: flat lines, examples folded away */
.cxi-res { display: grid; gap: 4px; padding: 0 0 14px 28px; margin-top: -4px; }
.cxi-rn { font-size: var(--text-xs); font-weight: 600; color: var(--accent-text); }
.cxi-rr { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: var(--text-sm); }
.cxi-rr b { font-weight: 600; color: var(--text); }
.cxi-rd { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: var(--text-xs); color: var(--text-2); overflow-wrap: anywhere; }
.cxi-smp summary { cursor: pointer; font-size: var(--text-xs); color: var(--accent-text); width: fit-content; }
.cxi-smp pre { margin: 6px 0 0; padding: 8px 10px; max-height: 180px; overflow: auto; font: 12px/1.45 var(--font-mono, ui-monospace, monospace); color: var(--text-2); background: var(--surface-2); border-radius: var(--radius-sm); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Sections of the detail */
.cxi-g { padding-bottom: 6px; }
.cxi-gh { display: flex; align-items: baseline; gap: 10px; padding: 16px 0 8px; border-bottom: 1px solid var(--border); }
.cxi-gh h3 { font: 600 var(--text-sm)/1.3 var(--font-heading); }
.cxi-gh .n { font-size: var(--text-xs); color: var(--text-muted); }
.cxi-gh .sp { flex: 1; }
.cxi-gh .linkbtn { font-size: var(--text-xs); }
.cxi-gd { font-size: var(--text-sm); color: var(--text-2); margin: 8px 0 0; max-width: 72ch; }
.cxi-wt { display: flex; gap: 7px; align-items: flex-start; } .cxi-wt .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent); }
.cxi-li { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; min-height: 46px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.cxi-li > .grow, .cxi-lnk { display: grid; gap: 1px; min-width: 0; }
.cxi-li b { font-weight: 500; font-size: var(--text-sm); color: var(--text); }
.cxi-li small { font-size: var(--text-xs); color: var(--text-muted); }
.cxi-li .linkbtn { font-size: var(--text-xs); }
.cxi-lnk { flex: 1; border: 0; background: none; padding: 4px 0; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
.cxi-lnk:hover b { color: var(--accent-text); text-decoration: underline; }
.cxi .linkbtn.cxi-dng, .cxi .btn.cxi-dng { color: var(--danger-text); }
.cxi .btn.cxi-dng:hover { background: var(--danger-soft); }
.cxi-also { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 0 4px; font-size: var(--text-sm); }
.cxi-also .chip .ic { width: 14px; height: 14px; }
.cxi-end { padding: 18px 0 8px; display: grid; justify-items: start; gap: 8px; }
.cxi-end .btn[disabled] { opacity: .5; }

/* Forms built from what a connector declares */
.cxi-fw { container: cxif / inline-size; padding-top: 6px; }
.cxi-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@container cxif (min-width: 560px) { .cxi-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 18px; } .cxi-form > .wide { grid-column: 1 / -1; } }
.cxi-f { align-content: start; }
.cxi-f .hint { overflow-wrap: anywhere; }
.cxi-f .hint .linkbtn { font-size: inherit; }
.cxi-req { color: var(--danger-text); }
.cxi-fh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--border); font: 600 var(--text-sm)/1.3 var(--font-heading); color: var(--text); }
.cxi-fh .muted { font: 400 var(--text-xs)/1.3 var(--font-body); }
.cxi-rads { display: grid; border-top: 1px solid var(--border); }
.cxi-rad { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 8px; border-bottom: 1px solid var(--border); cursor: pointer; }
.cxi-rad:hover { background: var(--surface-2); }
.cxi-rad.on { box-shadow: inset 2px 0 0 var(--accent); }
.cxi-rad input { width: 17px; height: 17px; accent-color: var(--accent); flex: none; margin: 0; }
.cxi-rad .grow { display: grid; gap: 1px; }
.cxi-rad b { font-weight: 500; font-size: var(--text-sm); }
.cxi-rad small { font-size: var(--text-xs); color: var(--text-muted); overflow-wrap: anywhere; }
.cxi-pw { display: flex; gap: 8px; align-items: flex-start; margin-top: 4px; padding: 2px 0 2px 10px; border-left: 2px solid var(--warning); font-size: var(--text-xs); color: var(--text-2); }
.cxi-pw .ic { width: 16px; height: 16px; flex: none; color: var(--warning-text); }
.cxi-pw p + p { margin-top: 4px; }
.cxi-pw b { color: var(--warning-text); }

/* Unsaved changes: an action bar at the bottom of the detail */
.cxi-bar { display: none; }
.cxi-bar.on { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding: 9px 10px 9px 14px; font-size: var(--text-sm); color: var(--text-2); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--radius-lg); background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface); }
.cxi-bar-t { flex: 1; min-width: 0; display: grid; }
.cxi-bar-t b { color: var(--text); font-weight: 600; }
.cxi-bar-s { color: var(--text-muted); font-size: var(--text-xs); }
@container cxi (max-width: 719px) { .cxi-bar.on .cxi-bar-t { flex-basis: 100%; } .cxi-bar.on .btn { flex: 1; height: 40px; } }

/* Connect (in a panel, outside .cxi) */
.cxi-pb { display: grid; gap: 4px; }
.cxi-pi { font-size: var(--text-sm); color: var(--text-2); margin-bottom: 4px; }
.cxi-wback { justify-self: start; margin: -4px 0 4px -10px; }
.cxi-wh { padding: 16px 0 0; font: 600 var(--text-sm)/1.3 var(--font-heading); color: var(--text); }
.cxi-wq { display: block; margin: 8px 0 2px; }
.cxi-wq .input { width: 100%; }
.cxi-wl { display: grid; margin-top: 8px; border-top: 1px solid var(--border); }
.cxi-wo { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 9px 8px 9px 4px; border: 0; border-bottom: 1px solid var(--border); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cxi-wo:hover { background: var(--surface-2); }
.cxi-wo:focus-visible { outline-offset: -2px; }
.cxi-wo .grow { display: grid; gap: 1px; }
.cxi-wo b { font-weight: 500; font-size: var(--text-sm); color: var(--text); }
.cxi-wo small { font-size: var(--text-xs); color: var(--text-muted); }
.cxi-wo small.cxi-acc { color: var(--accent-text); }
.cxi-wo > .ic { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
.cxi-vd { font-size: var(--text-xs); font-weight: 600; color: var(--accent-text); }
.cxi-use { font-size: var(--text-sm); font-weight: 500; color: var(--accent-text); }
.cxi-wres .cxi-res { padding: 14px 0 0; margin: 14px 0 0; border-top: 1px solid var(--border); }
.panel-f .grow { flex: 1; }
.panel .cxi-gd { margin-top: 2px; }
.panel .cxi-fw { padding-top: 10px; }

/* Matching people (in a panel) */
.cxi-mtop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.cxi-mtop .searchf { flex: 1 1 240px; }
.cxi-mtop .input { width: 100%; }
.cxi-mtop .muted { font-size: var(--text-sm); }
.cxi-mhead, .cxi-mrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: center; }
.cxi-mhead { padding: 14px 0 6px; font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.cxi-mrow { min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.cxi-mwho { display: grid; gap: 1px; min-width: 0; }
.cxi-mwho b { font-weight: 500; font-size: var(--text-sm); }
.cxi-mwho small { font-size: var(--text-xs); }
.cxi-combo { width: 100%; justify-content: space-between; font-weight: 400; }
.cxi-combo.empty { color: var(--text-muted); }
.cxi-combo .ic { width: 15px; height: 15px; flex: none; color: var(--text-muted); }
.cxi-mrow.set .cxi-combo { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.cxi-cb { display: grid; gap: 4px; min-width: 0; }
.cxi-cb .input { width: 100%; }
.cxi-copts { max-height: 220px; overflow-y: auto; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.cxi-copts > button { display: flex; align-items: baseline; gap: 10px; }
.cxi-copts > button > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cxi-copts > button[aria-selected="true"] { color: var(--accent-text); font-weight: 500; }
@media (max-width: 559px) { .cxi-mhead, .cxi-mrow { grid-template-columns: minmax(0, 1fr); gap: 4px; } .cxi-mhead span + span { display: none; } }

/* Confirm: what goes and what stays */
.cxi-cf { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: var(--text-sm); color: var(--text-2); }