/*
 * malla_ui shell stylesheet.
 *
 * Every px, hex and radius here comes from ui/reference/*.html (the source of
 * truth for pixels) expressed through the variables in tokens.css. No rule may
 * carry a literal color: if a value is missing, add a token first.
 *
 * Order: reset · primitives · rail · column · main view · tabs · cards and
 * tables · menus · assistant · login · flash · responsive.
 */

/* ------------------------------------------------------------------ fonts */

/* Nunito Sans (text) and Nunito (titles), latin subset, variable weight. */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/fonts/nunito-sans.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/fonts/nunito.woff2") format("woff2");
}

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }

/* The UA's `[hidden] { display: none }` loses to any author `display` rule
 * (`.rail-app { display: flex }`, `.menu-anchor { display: inline-flex }`),
 * so `hidden` — the attribute the hooks and JS commands toggle — must win. */
[hidden] { display: none !important; }

html, body { height: 100%; }
/* The console is light only (G-20): a dark system theme must not darken the
   browser's own controls, scrollbars and form fields under it. */
:root { color-scheme: light; }
/* The shell fills the window and scrolls inside its own panes: the page
   itself never scrolls (a focused field far below must not move it). */
html:has(.shell), html:has(.shell) body { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--rcp-font);
  font-size: var(--rcp-text-md);
  color: var(--rcp-ink);
  background: var(--rcp-canvas);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

h1, h2, h3, p { margin: 0; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
button:disabled { cursor: default; opacity: 0.45; }

a { color: var(--rcp-accent); text-decoration: none; }
a:hover { color: var(--rcp-accent-hover); }

input {
  font: inherit;
  color: var(--rcp-ink);
  background: var(--rcp-surface);
  border: 1px solid var(--rcp-border);
  border-radius: var(--rcp-radius-md);
  padding: 0 10px;
  height: var(--rcp-control-h);
  outline: none;
}
input::placeholder { color: var(--rcp-ink-3); }
input:focus-visible { border-color: var(--rcp-accent); }

:focus-visible { outline: 2px solid var(--rcp-accent); outline-offset: 1px; }
.col-list :focus-visible,
.tabs :focus-visible { outline-offset: -2px; }

/* ------------------------------------------------------------- primitives */

.ic {
  width: var(--rcp-icon); height: var(--rcp-icon);
  stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.ic.sm { width: var(--rcp-icon-sm); height: var(--rcp-icon-sm); }
.ic.xs { width: 14px; height: 14px; }
.ic.accent { color: var(--rcp-accent); }
/* The host's own mark (brand.logo): fills its accent square, paints itself. */
.ic-mark { width: 100%; height: 100%; display: block; flex-shrink: 0; }

.av {
  display: flex; align-items: center; justify-content: center;
  color: var(--rcp-on-accent); font-weight: 700; flex-shrink: 0;
  border-radius: var(--rcp-radius-lg);
  position: relative; overflow: hidden;
}
/* A picture over the initials; removed by the browser if it fails to load. */
.av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.av-img-contain { object-fit: contain; background: var(--rcp-surface); padding: 2px; box-sizing: border-box; }
/* Until the picture arrives the initials show: a logo's white backing is drawn only once it
   has loaded (`loaded`, set by app.js and kept through patches), not as a blank square (G-54). */
.av-img-contain:not(.loaded) { background: transparent; }
.av-sm { width: 30px; height: 30px; font-size: var(--ty2-xs, 11px); border-radius: var(--rcp-radius-sm); }
.av-md { width: 34px; height: 34px; font-size: var(--rcp-text-base); }
.av-lg { width: 44px; height: 44px; font-size: var(--rcp-text-xl); border-radius: 13px; }

.av-c1 { background: var(--rcp-avatar-1); }
.av-c2 { background: var(--rcp-avatar-2); }
.av-c3 { background: var(--rcp-avatar-3); }
.av-c4 { background: var(--rcp-avatar-4); }
.av-c5 { background: var(--rcp-avatar-5); }
.av-c6 { background: var(--rcp-avatar-6); }
.av-c7 { background: var(--rcp-avatar-7); }
.av-c8 { background: var(--rcp-avatar-8); }

.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dot-none     { background: var(--rcp-ink-4); }
.dot-ok       { background: var(--rcp-ok); }
.dot-warn     { background: var(--rcp-warn); }
.dot-critical { background: var(--rcp-critical); }

.t-none     { color: var(--rcp-ink-2); }
.t-ok       { color: var(--rcp-ok); }
.t-warn     { color: var(--rcp-warn-text); }
.t-critical { color: var(--rcp-critical); }

.chip {
  white-space: nowrap;
  font-size: var(--rcp-text-base); font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--rcp-radius-pill);
  border: 1px solid var(--rcp-border);
  color: var(--rcp-ink-2);
  background: var(--rcp-surface);
}
.chip.on { background: var(--rcp-ink); border-color: var(--rcp-ink); color: var(--rcp-on-ink); }
.chip.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
/* Read-only chips (`chip_set`): a label, then the choices. */

.btn {
  position: relative;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--rcp-text-md); font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--rcp-radius-md);
  border: 1px solid var(--rcp-border);
  background: var(--rcp-surface);
  color: var(--rcp-ink);
}
.btn:hover:not(:disabled) { border-color: var(--rcp-border-menu); }
.btn.pri { background: var(--rcp-accent); border-color: var(--rcp-accent); color: var(--rcp-on-accent); }
.btn.pri:hover:not(:disabled) { background: var(--rcp-accent-hover); border-color: var(--rcp-accent-hover); }
.btn.ghost {
  border-color: transparent; background: transparent;
  padding: 8px; color: var(--rcp-ink-2);
}
.btn.ghost:hover:not(:disabled) { background: var(--rcp-canvas); color: var(--rcp-ink); }
.btn.ghost.on { background: var(--rcp-accent-soft); color: var(--rcp-accent); }

.tip {
  position: absolute; top: calc(100% + 6px); left: 50%; z-index: 20;
  transform: translateX(-50%);
  display: none; gap: 8px; align-items: center;
  background: var(--rcp-ink); color: var(--rcp-on-ink);
  font-size: var(--rcp-text-sm); font-weight: 500;
  padding: 5px 8px; border-radius: var(--rcp-radius-xs);
  white-space: nowrap;
}
.tip .k { color: var(--rcp-ink-3); }
.btn:hover .tip, .btn:focus-visible .tip { display: flex; }

/* -------------------------------------------------------------- structure */

/* `clip`, not only `hidden`: a hidden box can still be scrolled by the browser
   (focusing a field, scrollIntoView), which pushed the top bar out of the window. */
.shell { display: flex; flex-direction: column; height: 100vh; width: 100vw; overflow: hidden; overflow: clip; }
.shell-body { display: flex; flex: 1; min-height: 0; overflow: clip; }

/* ------------------------------------------------------------- top bar */

.topbar {
  height: var(--rcp-topbar-h); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px 0 16px;
  background: var(--rcp-canvas);
  border-bottom: 1px solid var(--rcp-border);
}
.topbar-brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--rcp-ink); text-decoration: none;
}
.topbar-logo {
  width: 28px; height: 28px; border-radius: var(--rcp-radius-sm); margin: 0;
  background: var(--rcp-mark-bg); color: var(--rcp-mark-fg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.topbar-logo .ic { width: 16px; height: 16px; }
.topbar-name { font-family: var(--rcp-font-display); font-size: var(--rcp-text-lg); font-weight: 800; letter-spacing: -0.01em; }
.topbar-r { display: flex; align-items: center; gap: 6px; }
.topbar-user {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 4px 4px; border-radius: var(--rcp-radius-md);
  color: var(--rcp-ink-2);
}
.topbar-user:hover { background: var(--rcp-surface-3); color: var(--rcp-ink); }
.topbar-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--rcp-avatar-8); color: var(--rcp-on-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--ty2-xs, 11px); font-weight: 700; flex-shrink: 0;
  position: relative; overflow: hidden;
}
.topbar-avatar.av-c1 { background: var(--rcp-avatar-1); } .topbar-avatar.av-c2 { background: var(--rcp-avatar-2); }
.topbar-avatar.av-c3 { background: var(--rcp-avatar-3); } .topbar-avatar.av-c4 { background: var(--rcp-avatar-4); }
.topbar-avatar.av-c5 { background: var(--rcp-avatar-5); } .topbar-avatar.av-c6 { background: var(--rcp-avatar-6); }
.topbar-avatar.av-c7 { background: var(--rcp-avatar-7); } .topbar-avatar.av-c8 { background: var(--rcp-avatar-8); }
/* Two lines when the host gives a headline: name over kind · centre. */
.topbar-user-b { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; max-width: 260px; }
.topbar-user-name {
  font-size: var(--rcp-text-md); font-weight: 500; color: var(--rcp-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.topbar-user-line {
  font-size: var(--rcp-text-sm); color: var(--rcp-ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* -------------------------------------------------------------------- rail */

.rail {
  width: var(--rcp-rail-w); flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 0; gap: 4px;
  background: var(--rcp-canvas);
  border-right: 1px solid var(--rcp-border);
  overflow: hidden;
}
.rail-apps {
  flex: 1; width: 100%;
  /* The ··· overflow button (no label), so it always has room: below that
   * the rail clips "+" and the avatar instead. */
  min-height: var(--rcp-rail-btn);
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
}
.rail-app, .rail-more {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none;
  flex-shrink: 0;
}
/* 12px between visible rows only: apps moved into Más are `hidden`, and Más
 * itself may be the first visible row. layoutRail assumes this gap. */
.rail-apps > :not([hidden]) ~ :not([hidden]) { margin-top: 12px; }
.rail-app-link {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none;
}
.rail-btn {
  position: relative;
  width: var(--rcp-rail-btn); height: var(--rcp-rail-btn);
  border-radius: var(--rcp-radius-xl);
  display: flex; align-items: center; justify-content: center;
  color: var(--rcp-ink-2);
}
/* Active app (Teams-style): a 3px accent bar on the rail edge, centred on
 * the 44px button (left: -12px from the button, matching the reference). */
.rail-btn.on::before {
  content: ""; position: absolute; left: -12px;
  top: calc((var(--rcp-rail-btn) - 28px) / 2);
  width: 3px; height: 28px;
  border-radius: 0 3px 3px 0;
  background: var(--rcp-highlight);
}
.rail-app { cursor: grab; }
.rail-app.is-dragging { opacity: .4; }
.rail-app:hover .rail-btn:not(.on) { background: var(--rcp-surface-3); }
.rail-btn .ic { width: 24px; height: 24px; }
.rail-btn.on { color: var(--rcp-accent); }
.rail-lbl {
  font-size: var(--rcp-text-sm); font-weight: 500;
  color: var(--rcp-ink-2); margin-top: 2px; letter-spacing: 0.01em;
}
.rail-lbl.on { color: var(--rcp-accent); font-weight: 600; }
.rail-dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rcp-critical);
  box-shadow: 0 0 0 2px var(--rcp-canvas);
}
.rail-count {
  position: absolute; top: 4px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--rcp-radius-pill);
  background: var(--rcp-critical); color: var(--rcp-on-ink);
  font-size: var(--rcp-text-xs); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--rcp-canvas);
}
.rail-add { border: 1px dashed var(--rcp-ink-4); flex-shrink: 0; }
.rail-overflow { width: 216px; padding: 10px; }
/* ---------------------------------------------------------- app column (2) */

.column {
  width: var(--rcp-column-w); flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--rcp-surface-2);
  border-right: 1px solid var(--rcp-border);
  overflow: hidden;
  position: relative;
}
/* The right edge of the column: drag to resize (Hooks.ColumnResize). */
.col-resize {
  position: absolute; top: 0; bottom: 0; right: 0; width: 6px; z-index: 3;
  cursor: col-resize; touch-action: none;
}
.col-resize::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px;
  background: transparent; transition: background 120ms ease;
}
.col-resize:hover::after,
.col-resize:focus-visible::after,
.is-col-resizing .col-resize::after { background: var(--rcp-accent); }
.col-resize:focus-visible { outline: none; }
.is-col-resizing, .is-col-resizing * { cursor: col-resize !important; user-select: none; }
.column-inner {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0; height: 100%;
  overflow: hidden;
}
/* The app's own column inside the column. */
.col-app { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }

/* ------------------------------------------------ Recent popup (MallaUi.Recents) */
.srch.rec-popup { width: 720px; height: 560px; }
/* The legend gives way before the "Vaciar" button does. */
.rec-popup .srch-keys { gap: 6px 12px; flex-wrap: wrap; min-width: 0; overflow: hidden; height: 100%; align-content: center; }
.rec-popup .srch-f > .btn { flex-shrink: 0; white-space: nowrap; }
.rec-top {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  height: 56px; padding: 0 12px 0 18px; border-bottom: 1px solid var(--rcp-border);
}
.rec-top-ic { color: var(--rcp-accent); flex-shrink: 0; }
.rec-filter { flex-grow: 1; min-width: 0; margin: 0; }
.rec-filter input {
  width: 100%; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: var(--ty2-xl, 16px); color: var(--rcp-ink);
}
.rec-filter input::placeholder { color: var(--rcp-ink-3); }
.rec-chips { padding: 10px 18px 2px 18px; flex-shrink: 0; }
.rec-chips .chip { display: inline-flex; align-items: center; gap: 5px; }
.rec-chips .chip svg { color: inherit; }
.rec-list { padding: 2px 8px 8px 8px; }
button.rec-tb, .rec-tb {
  width: 26px; height: 26px; border-radius: var(--rcp-radius-sm); padding: 0;
  display: inline-flex; align-items: center; justify-content: center; color: var(--rcp-ink-2);
}
button.rec-tb:hover { background: var(--rcp-surface-3); color: var(--rcp-ink); }
.rec-sect {
  font-size: var(--ty2-xs, 11px); font-weight: 700; color: var(--rcp-ink-3);
  letter-spacing: .05em; text-transform: uppercase; padding: 10px 12px 3px 12px;
}
.rec-wrap { position: relative; display: flex; align-items: center; border-radius: var(--rcp-radius-md); }
.rec-wrap:hover, .rec-wrap:focus-within, .rec-wrap.cur { background: var(--rcp-surface-3); }
.rec-wrap.on { background: var(--rcp-accent-soft); }
.rec-wrap.cur { box-shadow: inset 0 0 0 2px var(--rcp-accent); }
.rec-row { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 6px 10px 6px 8px; color: inherit; text-decoration: none; }
.rec-row:focus-visible { outline: 2px solid var(--rcp-accent); outline-offset: -2px; border-radius: var(--rcp-radius-md); }
.rec-av { position: relative; flex-shrink: 0; display: inline-flex; }
.rec-av .av-sm { width: 28px; height: 28px; border-radius: 9px; }
.rec-ic {
  width: 28px; height: 28px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rcp-surface-3); color: var(--rcp-accent);
}
.rec-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rec-n { font-size: var(--rcp-text-md); font-weight: 700; color: var(--rcp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-s { display: flex; align-items: center; gap: 4px; font-size: var(--rcp-text-xs); color: var(--rcp-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.rec-s svg { color: var(--rcp-ink-3); flex-shrink: 0; }
.rec-at { font-size: var(--ty2-xs, 11px); color: var(--rcp-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.rec-pin { color: var(--rcp-ink-3); display: inline-flex; flex-shrink: 0; }
/* Pin and remove take the time's place while the row is hovered or focused. */
.rec-acts { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: none; gap: 2px; }
.rec-wrap:hover .rec-acts, .rec-wrap:focus-within .rec-acts, .rec-wrap.cur .rec-acts { display: flex; }
.rec-wrap:hover .rec-at, .rec-wrap:hover .rec-pin,
.rec-wrap:focus-within .rec-at, .rec-wrap:focus-within .rec-pin,
.rec-wrap.cur .rec-at, .rec-wrap.cur .rec-pin { visibility: hidden; }
.rec-acts .rec-tb { background: var(--rcp-surface); box-shadow: 0 0 0 1px var(--rcp-border); }
.rec-empty { margin: 0; padding: 10px 12px; font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); }
.col-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  color: var(--rcp-ink-2);
  border-radius: var(--rcp-radius-md);
}
.col-toggle:hover { background: var(--rcp-surface-3); color: var(--rcp-ink); }
/* The buttons go under the title when they do not fit beside it: System has five. */
.col-h {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px 8px;
  padding: 18px 16px 10px 16px;
}
.col-t { font-family: var(--rcp-font-display); font-size: var(--rcp-text-2xl); font-weight: 800; letter-spacing: -0.01em; }
.col-hb { display: flex; gap: 4px; margin-left: auto; }
/* The recents, in the title, while the sections are in the column. */
.col-b {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px;
  font-size: var(--rcp-text-sm); font-weight: 700; color: var(--rcp-ink-2);
  border: 1px solid var(--rcp-border); border-radius: var(--rcp-radius-sm); background: var(--rcp-surface);
}
/* The column's main action (`primary?: true`): a wide filled button under the title. */
.col-new { margin: 0 16px 10px 16px; display: flex; }
.col-new .btn, .col-new button { flex: 1; justify-content: center; }
.col-search {
  margin: 0 16px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--rcp-surface);
  border: 1px solid var(--rcp-border);
  border-radius: var(--rcp-radius-md);
  color: var(--rcp-ink-3);
  font-size: var(--rcp-text-md);
}
.col-search input { border: none; padding: 0; height: auto; background: none; flex-grow: 1; }
/* The box is the control: no outline on the inner input, accent border on focus. */
.col-search input:focus-visible { outline: none; }
.col-search:focus-within { border-color: var(--rcp-accent); }
/* The same field as a button that opens the search popup (`popup_search: true`). */
.col-search-btn { cursor: pointer; text-align: left; color: var(--rcp-ink-3); }
.col-search-btn .kbd { margin-left: auto; flex-shrink: 0; }
.col-search-btn:hover { background: var(--rcp-surface-3); }
.col-search-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* One row that scrolls sideways, no bar (console G-45); the cut side fades (markOverflow). */
.col-chips {
  display: flex; gap: 6px; padding: 12px 16px 6px 16px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; flex-shrink: 0;
}
.col-chips::-webkit-scrollbar { display: none; }
.col-chips > * { flex-shrink: 0; }
/* The search box straight above the list (no chips between): room before the first row. */
.col-search + .col-list, .col-search-btn + .col-list,
.col-search + .col-rail, .col-search-btn + .col-rail { margin-top: 10px; }
.col-list {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 8px;
  overflow-y: auto; flex-grow: 1;
}

.prow {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--rcp-radius-lg);
  text-align: left; width: 100%;
}
.prow:hover { background: var(--rcp-surface-3); }
.prow.on { background: var(--rcp-accent-soft); }
.prow-b { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.pn {
  font-size: var(--rcp-text-lg); font-weight: 600; color: var(--rcp-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A row with `wrap?`: a long title (a manual's section) takes two lines before it is cut (G-38). */
.pn.wrap {
  white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; line-height: 1.3;
}
.ps {
  font-size: var(--rcp-text-base); color: var(--rcp-ink-2); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A row with a tick (`check:`): a calendar of the list, in its colour. */
.prow-check { gap: 10px; padding: 7px 12px; cursor: pointer; }
.prow-check .pn { flex: 1; min-width: 0; font-size: var(--rcp-text-base); }
.prow-check .prow-line { margin: 0; flex-shrink: 0; font-size: var(--ty2-xs, 11px); color: var(--rcp-ink-3); }
.prow-box {
  width: 16px; height: 16px; flex-shrink: 0; border-radius: 5px;
  border: 1.5px solid var(--c); background: var(--c); color: var(--rcp-on-accent);
  display: flex; align-items: center; justify-content: center;
}
.prow-box svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.prow-check.off .prow-box { background: transparent; border-color: var(--rcp-ink-4); }
.prow-check.off .pn { color: var(--rcp-ink-3); }
.prow-wrap { position: relative; display: flex; align-items: center; }
/* A row's `group` header (MallaUi.Column), above the first row of each group. */
.prow-wrap:has(> .col-group) { flex-wrap: wrap; }
/* The row and its ··· in one box, so the ··· centres on the row and not on the
 * group header above it. */
.prow-in { position: relative; display: flex; align-items: center; flex: 1 1 100%; min-width: 0; }
.col-group {
  flex: 0 0 100%;
  font-size: var(--ty2-xs, 11px); font-weight: 700; color: var(--rcp-ink-3);
  letter-spacing: .04em; text-transform: uppercase;
  padding: 14px 12px 6px 12px;
}
.prow-ic {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--rcp-radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--rcp-surface-3); color: var(--rcp-ink-2);
}
.prow-wrap .prow { flex-grow: 1; min-width: 0; }
/* The row ··· is centred on the status dot (8px, 12px from the row's right
 * edge: centre at 16px) and replaces it while the row is hovered or focused;
 * a trailing drill button (18px in flow) shifts it left by as much. */
.prow-wrap .row-menu { position: absolute; right: 1px; visibility: hidden; }
.prow-wrap:has(.drill) .row-menu { right: 19px; }
.prow-wrap .row-menu .menu-trigger { padding: 4px; }
.prow-wrap:hover .row-menu, .prow-wrap:focus-within .row-menu { visibility: visible; }
.prow-wrap:hover .prow .dot, .prow-wrap:focus-within .prow .dot { visibility: hidden; }
.prow-wrap:hover .prow-check .prow-line, .prow-wrap:focus-within .prow-check .prow-line { visibility: hidden; }

/* -------------------------------------------------------------- main view */

.view {
  flex-grow: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--rcp-surface);
  overflow: hidden;
}
/* The title and its facts keep their room: when the actions do not fit beside
   them, the actions wrap (among themselves, then under the title) instead of
   squeezing the title into a narrow column. */
.view-h {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 18px var(--rcp-view-pad-x) 0 var(--rcp-view-pad-x);
  gap: 12px 16px;
}
/* The title's own width is its basis: the acts drop to a second row only when the title and
   they do not fit side by side, never beside a short title with room to spare (G-30). */
.view-id { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; }
.view-tt { min-width: 0; }
/* The link back above the title (`c:MallaUi.App.back/2`). */
.view-back {
  display: inline-flex; align-items: center; gap: 2px; margin: 0 0 2px -4px; padding: 2px 6px 2px 2px;
  border-radius: var(--rcp-radius-xs); font-size: var(--rcp-text-sm); font-weight: 600; color: var(--rcp-ink-2); text-decoration: none;
}
.view-back:hover { background: var(--rcp-surface-2); color: var(--rcp-ink); }
.view-t {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  overflow: hidden;
  font-family: var(--rcp-font-display);
  font-size: var(--rcp-text-3xl); font-weight: 800;
  letter-spacing: -0.01em;
}
.view-t-name {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.view-t .pill-s {
  flex: none;
  font-family: var(--rcp-font); letter-spacing: 0;
}
.view-s {
  font-size: var(--ty2-base, 12.5px); color: var(--rcp-ink-2); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.view-s a { color: var(--rcp-accent); text-decoration: none; }
.view-s a:hover { color: var(--rcp-accent-hover); text-decoration: underline; }
/* The header's facts strip (MallaUi.App.facts/2; ui/reference/patients-*.html). */
/* The facts in even columns: they fold into whole rows, not a ragged last line with one fact
   alone (G-3). The avatar stays on the name's line above them. */
/* Folded on scroll (console U-1, `view-folded` in app.js): only the title row stays. */
html.view-folded .view-h .view-facts, html.view-folded .view-h .view-chips { display: none; }
.view-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 26px; margin-top: 12px; }
.view-id:has(.view-facts) { align-items: flex-start; flex-basis: 100%; }
.view-id:has(.view-facts) > .view-tt { flex: 1 1 auto; }
.view-fact { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* A fact with a `path`: a link to where it comes from (console audit C17). */
a.view-fact-a { text-decoration: none; color: inherit; border-radius: var(--rcp-radius-sm); }
a.view-fact-a:hover .view-fact-v, a.view-fact-a:focus-visible .view-fact-v { text-decoration: underline; }
.view-fact-k {
  font-size: var(--ty2-xs, 11px); font-weight: 700; color: var(--rcp-ink-3);
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.view-fact-v {
  font-size: var(--ty2-base, 12.5px); font-weight: 700; color: var(--rcp-ink);
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px;
  /* A value longer than its column wraps inside it instead of running over the next fact. */
  white-space: normal; overflow-wrap: anywhere; min-width: 0;
}
.view-fact-v.st-critical { color: var(--rcp-critical); }
.view-fact-v.st-warn { color: var(--rcp-warn-text); }
.view-fact-v.st-ok { color: var(--rcp-ok); }
.view-fact-n { font-weight: 600; color: var(--rcp-ink-3); }
/* Facts with `chip?: true`: one row under the strip, each a small label then
   its value and pills on the same line (the ACCESS facts of a patient). */
.view-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 8px; }
.view-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--ty2-base, 12.5px); font-weight: 700; color: var(--rcp-ink); white-space: nowrap;
}
.view-chip-k {
  font-size: var(--ty2-xs, 10.5px); font-weight: 700; color: var(--rcp-ink-3);
  letter-spacing: .04em; text-transform: uppercase;
}
.view-chip.st-critical .view-chip-v { color: var(--rcp-critical); }
.view-chip.st-warn .view-chip-v { color: var(--rcp-warn-text); }
.view-chip.st-ok .view-chip-v { color: var(--rcp-ok); }
.view-chip .fpill { font-weight: 700; }
.view-a {
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 8px;
  flex: 0 1 auto; min-width: 0; margin-left: auto;
}
.view-div { width: 1px; height: 22px; background: var(--rcp-border); margin: 0 4px; }
.view-icons { display: flex; gap: 2px; color: var(--rcp-ink-2); }

.tabs {
  display: flex; gap: 22px; align-items: flex-end;
  flex-shrink: 0;
  padding: 14px var(--rcp-view-pad-x) 0 var(--rcp-view-pad-x);
  border-bottom: 1px solid var(--rcp-border);
  overflow-x: auto; scrollbar-width: none;
}
/* A strip of tabs scrolls sideways with no bar at any width: a native bar (classic or
   overlay) is painted over the labels. The cut side fades and the strip ends in *More*
   (`markOverflow`, `syncMore` in app.js), so every tab stays reachable. */
.tabs::-webkit-scrollbar, .subtabs::-webkit-scrollbar { display: none; }
.tab {
  font-size: var(--rcp-text-lg); font-weight: 500;
  color: var(--rcp-ink-2);
  padding: 10px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  display: flex; align-items: center;
  flex-shrink: 0;
}
.tab:hover { color: var(--rcp-ink); }
.tab.on { color: var(--rcp-ink); border-bottom-color: var(--rcp-highlight); font-weight: 600; }
/* With the "+" the bar never scrolls (TabBar hides what does not fit), and its
   menu must not be cut off by the bar. */
.tabs.tabs-add { overflow: visible; overflow-x: clip; overflow-y: visible; }
.tab-add { margin-left: -6px; flex-shrink: 0; }
/* What does not fit sideways fades on the side that is cut (`markOverflow` in app.js): a
   listing wider than its card, a strip of tabs wider than the view (G-35, G-36). */
.ov-r { -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent); mask-image: linear-gradient(to right, black calc(100% - 40px), transparent); }
.ov-l { -webkit-mask-image: linear-gradient(to left, black calc(100% - 40px), transparent); mask-image: linear-gradient(to left, black calc(100% - 40px), transparent); }
.ov-l.ov-r { -webkit-mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent); }
/* A cut strip of tabs ends in *More* (G-36, `syncMore` in app.js): sticky at the right edge,
   over the tabs that pass under it, with its own fade instead of the strip's right one. */
.ov-more {
  position: sticky; right: 0; flex-shrink: 0; align-self: stretch; margin-left: auto;
  display: flex; align-items: center; padding: 0 2px 0 12px;
  /* The second shadow covers the strip's own right padding, past the sticky edge. */
  background: var(--rcp-surface); box-shadow: -16px 0 12px -6px var(--rcp-surface), 32px 0 0 0 var(--rcp-surface);
  font: inherit; font-size: var(--rcp-text-md); font-weight: 500; color: var(--rcp-ink-2);
  border: 0; cursor: pointer; white-space: nowrap; z-index: 1;
}
.ov-more:hover { color: var(--rcp-ink); }
.ov-r:has(> .ov-more) { -webkit-mask-image: none; mask-image: none; }
.ov-l.ov-r:has(> .ov-more) { -webkit-mask-image: linear-gradient(to right, transparent, black 40px); mask-image: linear-gradient(to right, transparent, black 40px); }
.tab-add .tab { color: var(--rcp-ink-3); cursor: pointer; padding: 10px 6px; }
.tab-add .menu { padding: 6px; }
/* Two levels of tabs (MallaUi.TabGroups; ui/reference/patients-tab-groups.html):
   the row of groups is the row above, the open group's tabs are a second row
   of soft-filled tabs that sit on the row's line. Tokens only, so a host's
   theme (MallaUi.Theme) recolors it with the rest. */
.tabs-grouped .tab { gap: 6px; }
.tabs .tab .cnt, .subtabs .st .cnt {
  font-size: var(--ty2-xs, 11px); font-weight: 700; line-height: 16px;
  color: var(--rcp-ink-2); background: var(--rcp-surface-3);
  padding: 0 6px; border-radius: var(--rcp-radius-pill);
}
.tabs .tab .tag, .subtabs .st .tag {
  font-size: var(--rcp-text-xs); font-weight: 700; line-height: 15px; white-space: nowrap;
  padding: 1px 6px; border-radius: var(--rcp-radius-xs);
  background: var(--rcp-surface-3); color: var(--rcp-ink-2);
}
.tabs .tab .tag.acc, .subtabs .st .tag.acc { background: var(--rcp-accent-soft); color: var(--rcp-accent); }
.subtabs {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
  padding: 8px var(--rcp-view-pad-x) 0 var(--rcp-view-pad-x);
  border-bottom: 1px solid var(--rcp-border);
  background: var(--rcp-surface);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.subtabs .st {
  font-size: var(--ty2-base, 12.5px); font-weight: 600; color: var(--rcp-ink-2);
  padding: 6px 12px; margin-bottom: -1px;
  border: 1px solid transparent; border-radius: 8px 8px 0 0;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; flex-shrink: 0;
}
.subtabs .st:hover { color: var(--rcp-ink); }
.subtabs .st.on {
  color: var(--rcp-accent); background: var(--rcp-accent-soft);
  border-color: var(--rcp-border); border-bottom-color: var(--rcp-accent-soft);
}
.subtabs :focus-visible { outline-offset: -2px; }
.subtabs .st-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--rcp-ink-4); }
.subtabs .st-dot-critical { background: var(--rcp-critical); }
.subtabs .st-dot-warn { background: var(--rcp-warn); }
.subtabs .st-dot-ok { background: var(--rcp-ok); }
.subtabs .st-hint {
  margin-left: auto; padding-left: 12px; padding-bottom: 6px;
  font-size: var(--rcp-text-base); color: var(--rcp-ink-3); white-space: nowrap;
}
.tbl.fixed { table-layout: fixed; }
.tbl.fixed td { overflow-wrap: anywhere; }
.role-grants summary {
  cursor: pointer; font-size: var(--rcp-text-sm); color: var(--rcp-ink-3);
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.tbl td .desc { display: block; font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); margin-top: 2px; }
.role-lock { display: inline-flex; padding: 6px; color: var(--rcp-ink-4); }
.role-legacy { padding: 4px 16px 12px 16px; }
.role-rules { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px 16px; }
.role-rule {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--rcp-text-sm);
  padding: 4px 10px; border-radius: var(--rcp-radius-sm);
  border: 1px solid var(--rcp-border); background: var(--rcp-surface-2);
}
.role-rule .arrow { color: var(--rcp-ink-4); }
.role-rule.off { color: var(--rcp-ink-3); }
.role-grants ul {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.role-grants li { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

.tab-body {
  display: flex; flex-direction: column; gap: var(--rcp-gap);
  padding: var(--rcp-view-pad-y) var(--rcp-view-pad-x);
  overflow-y: auto; flex-grow: 1; min-height: 0;
}
.tab-inner { display: flex; flex-direction: column; gap: var(--rcp-gap); }
/* A patch still waiting for its answer (app.js `is-loading`): the old content dims. */
.tab-inner { transition: opacity .15s; }
.is-loading .tab-inner { opacity: .45; pointer-events: none; }
/* Actions of a whole tab, above its cards, to the right. */
.tab-tools { display: flex; justify-content: flex-end; gap: 8px; }

/* --------------------------------------------------------- view fragments */

.kpi-row { display: flex; gap: var(--rcp-gap); }
/* A tile alone keeps a tile's width, as in a row of three, rather than stretching across the
   page (G-24). */
.kpi-row > .kpi:only-child { flex: 0 1 calc((100% - 2 * var(--rcp-gap)) / 3); }
/* A strip of label/value rows (`facts:` of a tab): ids small and copyable; a
   fact's note is a row of its own under the value. */
.facts {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center;
  gap: 3px 18px; padding: 10px 16px;
  border: 1px solid var(--rcp-border); border-radius: var(--rcp-radius-lg);
  background: var(--rcp-surface); font-size: var(--rcp-text-base);
}
.fact { display: contents; }
.fact .fl { color: var(--rcp-ink-3); }
.fact .fv { color: var(--rcp-ink); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.fact .fv.mono { font-family: var(--rcp-font-mono, ui-monospace, monospace); font-size: var(--rcp-text-sm); font-weight: 500; }
.fact .fn { grid-column: 2; color: var(--rcp-ink-3); font-size: var(--rcp-text-sm); }
.kpi {
  flex: 1;
  padding: 14px 16px;
  border-radius: var(--rcp-radius-xl);
  background: var(--rcp-surface-2);
  border: 1px solid var(--rcp-border-soft);
}
.kpi .l { font-size: var(--rcp-text-base); color: var(--rcp-ink-2); font-weight: 500; }
.kpi .v {
  font-family: var(--rcp-font-display);
  font-size: var(--rcp-text-kpi); font-weight: 700;
  margin-top: 6px; letter-spacing: -0.01em;
}
.kpi .u { font-size: var(--rcp-text-base); color: var(--rcp-ink-3); font-weight: 500; margin-left: 4px; }
.kpi .d { font-size: var(--rcp-text-sm); margin-top: 4px; font-weight: 500; }
/* A tile that opens what it counts (`browse:` of a KPI). */
.kpi-btn { font: inherit; text-align: left; cursor: pointer; }
.kpi-btn:hover { border-color: var(--rcp-accent); background: var(--rcp-surface); }
.kpi-btn:hover .l { color: var(--rcp-accent); }

.card {
  border: 1px solid var(--rcp-border);
  border-radius: var(--rcp-radius-xl);
  overflow: hidden;
  background: var(--rcp-surface);
  box-shadow: var(--rcp-shadow-card);
}
.card-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 14px 16px 6px 16px;
}
.card-t { font-size: var(--rcp-text-lg); font-weight: 600; flex-shrink: 0; }
/* What to know while typing, under the title of a form card. */
.card-n { font-size: var(--rcp-text-base); color: var(--rcp-ink-2); margin: 0; padding: 0 16px 4px 16px; line-height: 1.45; }
.card-s { font-size: var(--rcp-text-base); color: var(--rcp-ink-2); margin-left: auto; }
.card-a { display: flex; gap: 6px; }
.card-b { padding: 0 16px 10px 16px; }
/* Prose in a card body — what a pending action will do, and the like. */
.card-p { font-size: var(--rcp-text-md); color: var(--rcp-ink-2); margin: 4px 0 12px 0; line-height: 1.45; }
.card-b > .form-a { padding: 4px 0 6px 0; }
.card.flush .card-b { padding: 0; }
/* A table wider than its card scrolls sideways inside it (the card clips, for its corners);
   its row actions stay pinned to the card's right edge. */
.card-b:has(> .tbl) { overflow-x: auto; }
.card-f {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  padding: 8px 16px; border-top: 1px solid var(--rcp-border-soft);
  font-size: var(--rcp-text-sm); color: var(--rcp-ink-2);
  background: var(--rcp-surface-2);
}

/* Panels: cards side by side, each a list of lines (MallaUi.ContentTab,
   ui/reference/directory-home-*.html). */
.panel-row { display: flex; flex-wrap: wrap; gap: var(--rcp-gap); align-items: stretch; }
.panel-row > .card { min-width: min(280px, 100%); }
/* `panels_fold: true`: the empty panels, one line each under the others (console G-5). */
/* A panel with `line?`: its items as one line of links (the overview's outside sources, U-7). */
.panel-inline { margin: 0; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--rcp-ink-2); }
.panel-inline .pi-a { color: var(--rcp-ink-2); }
.panel-inline .pi-a:hover { color: var(--rcp-accent); }
.panel-inline b { color: var(--rcp-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.panel-inline .pi-sep { color: var(--rcp-ink-3); }
.panel-folded { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.panel-folded li { color: var(--rcp-ink-2); }
.panel-folded .pf-t { font-weight: 600; color: var(--rcp-ink); }
.ct-flow, .ct-flow > .ct-main { display: contents; }
.ct-bar .tbl-bar { padding: 0; }
.ct-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--rcp-gap); align-items: start; }
/* `charts:` of a content tab: small chart cards side by side (Devices' Overview) */
.ct-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--rcp-gap); align-items: start; }
.ct-cols > .ct-main { display: flex; flex-direction: column; gap: var(--rcp-gap); min-width: 0; }
.ct-side { display: flex; flex-direction: column; gap: var(--rcp-gap); min-width: 0; }
@media (max-width: 1100px) { .ct-cols { grid-template-columns: minmax(0, 1fr); } }
.pline {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-top: 1px solid var(--rcp-border-soft);
  color: var(--rcp-ink); text-decoration: none; font-size: var(--rcp-text-md);
}
.card-b > .pline:first-child { border-top: none; }
a.pline:hover { background: var(--rcp-surface-2); }
.pline-i {
  width: 30px; height: 30px; border-radius: var(--rcp-radius-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--rcp-surface-3); color: var(--rcp-ink-2);
}
.pline-i.t-warn { background: var(--rcp-warn-soft); color: var(--rcp-warn); }
.pline-i.t-critical { background: var(--rcp-critical-soft); color: var(--rcp-critical); }
.pline-i.t-ok { background: var(--rcp-ok-soft); color: var(--rcp-ok); }
.pline-b { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pline-t { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pline-n { font-size: var(--rcp-text-sm); color: var(--rcp-ink-2); margin-top: 1px; }
.pline-v {
  font-family: var(--rcp-font-display); font-size: var(--rcp-text-xl); font-weight: 800;
  font-variant-numeric: tabular-nums; min-width: 44px; text-align: right;
}
.pline-l {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: var(--rcp-text-base); font-weight: 700; color: var(--rcp-accent);
}
/* The dose grid (MallaUi.ContentTab `grid:`, ui/reference/meds-intake.html): status
   colors only because the cell *is* a status. */
.dgrid-wrap { padding: 12px 16px 16px; overflow-x: auto; }
.dgrid-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; font-size: var(--rcp-text-sm); color: var(--rcp-ink-2); }
.dg-key { display: inline-flex; align-items: center; gap: 6px; }
.dgrid { display: grid; gap: 4px; align-items: center; min-width: 560px; }
.dg-head { text-align: center; font-size: var(--rcp-text-xs); color: var(--rcp-ink-2); font-weight: 700; }
.dg-sub { display: block; font-weight: 400; color: var(--rcp-ink-2); font-size: var(--rcp-text-xs); }
.dg-label { display: flex; flex-direction: column; min-width: 0; padding-right: 8px; }
.dg-name { font-weight: 700; font-size: var(--rcp-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-cell { display: block; height: 24px; border-radius: var(--rcp-radius-xs); border: 1px solid var(--rcp-border-soft); background: var(--rcp-surface-2); }
.dg-key .dg-cell { width: 16px; height: 12px; border-radius: 4px; }
.dg-ok { background: var(--rcp-ok-soft); border-color: var(--rcp-ok); }
.dg-warn { background: var(--rcp-warn-soft); border-color: var(--rcp-warn-line); }
.dg-critical { background: var(--rcp-critical-soft); border-color: var(--rcp-critical); }
.dg-pending { background: var(--rcp-surface); border-color: var(--rcp-ink-mute); }
.dg-none { background: var(--rcp-surface-2); }

/* Thread: a conversation as bubbles, oldest first (MallaUi.ContentTab
   `thread:`). The other party on the left on surface-3, this side on the
   right in ink, as the assistant's own messages are. */
.thread { display: flex; flex-direction: column; gap: 12px; padding: 6px 0 6px 0; }
.thr { display: flex; flex-direction: column; gap: 4px; max-width: 72%; }
.thr-in { align-self: flex-start; align-items: flex-start; }
.thr-out { align-self: flex-end; align-items: flex-end; }
.thr-b {
  display: block; padding: 9px 12px;
  font-size: var(--rcp-text-md); line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--rcp-ink); background: var(--rcp-surface-3);
  border-radius: 14px 14px 14px 4px; text-decoration: none;
}
.thr-out .thr-b {
  color: var(--rcp-on-ink); background: var(--rcp-ink);
  border-radius: 14px 14px 4px 14px;
}
a.thr-b:hover { box-shadow: 0 0 0 2px var(--rcp-accent-soft); }
.thr.cur .thr-b { outline: 2px solid var(--rcp-ink-mute); outline-offset: 2px; }
.thr-att { display: flex; flex-wrap: wrap; gap: 6px; }
.thr-att a {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--rcp-text-sm); font-weight: 600;
  color: var(--rcp-accent); text-decoration: none;
}
.thr-img {
  display: block; width: 160px; height: 120px; overflow: hidden;
  border-radius: var(--rcp-radius-md); background: var(--rcp-surface-3);
}
.thr-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thr-m {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--rcp-text-sm); color: var(--rcp-ink-3);
}
.thr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rcp-ink-4); }
.thr-dot.t-ok { background: var(--rcp-ok); }
.thr-dot.t-warn { background: var(--rcp-warn); }
.thr-dot.t-critical { background: var(--rcp-critical); }
a.cell-link { color: var(--rcp-ink); font-weight: 600; text-decoration: none; }
a.cell-link:hover { color: var(--rcp-accent); }
/* The whole row opens what its link cell opens; the checkbox and the row menu stay clickable. */
.tbl tbody tr:has(a.cell-link) { position: relative; cursor: pointer; }
.tbl a.cell-link::after { content: ""; position: absolute; inset: 0; }
.tbl tbody tr:has(a.cell-link) .ck { position: relative; z-index: 1; }
/* Whatever box a browser stretches a row's link over, the card's own header (title and buttons) stays above it. */
.card-h { position: relative; z-index: 2; }
/* Pictures show a pulsing block until they load. */
@keyframes rcp-load { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.thr-img, .gal-p { animation: rcp-load 1.2s ease-in-out infinite; }
.thr-img:has(img.loaded), .gal-p:has(img.loaded) { animation: none; }
/* The file chooser: the native input is hidden, its label is the button. */
.file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.file-drop {
  display: flex; align-items: center; gap: 10px; padding: 14px;
  border: 1.5px dashed var(--rcp-border-menu); border-radius: var(--rcp-radius-md); background: var(--rcp-surface-2);
}
.file-drop.phx-drop-target-active, .file-drop[data-phx-drop-active] { border-color: var(--rcp-accent); background: var(--rcp-accent-soft); }
.inp-pick { display: flex; gap: 8px; align-items: center; }
.inp-pick .inp { flex: 1; min-width: 0; }
.file-pick { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.file-pick:focus-within { border-color: var(--rcp-accent); box-shadow: 0 0 0 3px var(--rcp-accent-soft); }
.cell-bar { display: flex; align-items: center; }
.cell-bar .bar { width: 120px; height: 8px; border-radius: 99px; background: var(--rcp-surface-3); overflow: hidden; }
.cell-bar .bar i { display: block; height: 100%; border-radius: 99px; background: var(--rcp-accent); }

.chart { width: 100%; height: 150px; display: block; margin-top: 6px; overflow: visible; }
.chart-trend .chart { height: auto; aspect-ratio: 900 / 240; }
.chart-legend { display: flex; justify-content: flex-end; gap: 16px; font-size: var(--rcp-text-sm); color: var(--rcp-ink-2); }
.chart-key::before { content: ""; display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: middle; background: var(--rcp-accent); }
.chart-key.chart-s1::before { background: var(--rcp-avatar-2); }
/* Counts per category (Chart.counts): label, a bar on a shared scale, the number. */
.chart-counts { margin: 6px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: center; }
.chart-count { display: contents; }
.chart-count dt { font-size: var(--rcp-text-sm); color: var(--rcp-ink-2); max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-count dd { margin: 0; display: flex; align-items: center; gap: 10px; min-width: 0; }
.chart-count .bar { flex: 1; min-width: 0; height: 12px; border-radius: 4px; background: var(--rcp-surface-3); overflow: hidden; }
.chart-count .bar i { display: block; height: 100%; min-width: 2px; border-radius: 4px; background: var(--rcp-accent); }
.chart-count .n { min-width: 3ch; text-align: right; font-size: var(--rcp-text-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--rcp-ink); }
.chart-count.is-zero .bar i { display: none; }
.chart-count.is-zero .n { color: var(--rcp-ink-3); font-weight: 500; }
.chart .band { fill: var(--rcp-ok-soft); }
.chart .span { fill: var(--rcp-surface-3); opacity: .6; }
.chart .goal { stroke: var(--rcp-ink-2); stroke-width: 1.2; stroke-dasharray: 6 4; }
.spark { display: block; width: 96px; height: 24px; }
.spark polyline { fill: none; stroke: var(--rcp-accent); stroke-width: 1.5; stroke-linejoin: round; }
.chart .bar { fill: var(--rcp-accent-soft); stroke: var(--rcp-accent); stroke-width: 1; }
.chart .bar-mean { stroke: var(--rcp-accent); stroke-width: 2; }
.chart .chart-s1 .series { stroke: var(--rcp-avatar-2); }
.chart .dot { fill: var(--rcp-accent); }
/* The unit over the scale of a trend (console audit C13). */
.chart .chart-unit { font-weight: 500; }
.chart .chart-s1 .dot { fill: var(--rcp-avatar-2); }
.chart .dot-alert, .chart .chart-s1 .dot-alert { fill: var(--rcp-critical); }
.chart .grid { stroke-width: 1; }
.chart .grid-soft { stroke: var(--rcp-surface-3); }
.chart .grid-base { stroke: var(--rcp-border); }
.chart .grid-warn { stroke: var(--rcp-warn); stroke-dasharray: 3 4; opacity: 0.7; }
.chart .axis { font-size: var(--ty2-xs, 10.5px); fill: var(--rcp-ink-3); }
.chart .axis-warn { fill: var(--rcp-warn); }
.chart .series { fill: none; stroke: var(--rcp-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .marker { fill: var(--rcp-accent); stroke: var(--rcp-surface); stroke-width: 2; }
.chart .marker-l { font-size: var(--ty2-xs, 11px); font-weight: 600; fill: var(--rcp-ink); }

/* Separate borders with no spacing draw as collapsed ones, but each rule stays its cell's:
   the sticky act column (`.row-a`, its own background) no longer hides the header and row
   lines, which reach the card's edge (G-37). */
.tbl { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--rcp-text-md); }
.tbl th {
  text-align: left; font-weight: 600;
  color: var(--rcp-ink-2); font-size: var(--rcp-text-base);
  padding: 8px 10px; border-bottom: 1px solid var(--rcp-border);
}
.tbl td { padding: 10px; border-bottom: 1px solid var(--rcp-border-soft); color: var(--rcp-ink); }
.tbl tr:last-child td { border-bottom: none; }
.tbl td.num, .tbl th.num { font-variant-numeric: tabular-nums; text-align: right; }
.tbl tbody tr:hover td { background: var(--rcp-surface-2); }
/* Row actions: the last column, pinned to the right edge so a wide table never scrolls them away;
   on the hovered row, or on every row with `actions_shown` (.acts-on). */
.tbl .row-a { padding: 4px 6px; position: sticky; right: 0; z-index: 1; background: var(--rcp-surface); }
/* The sticky cell is a stacking context, so its open ··· menu would be painted under the same
   cell of the rows below: the one with an open menu goes above them. */
.tbl .row-a:has(.menu-trigger[aria-expanded="true"]) { z-index: 2; }
.tbl .row-a-b { display: flex; gap: 2px; justify-content: flex-end; visibility: hidden; }
.tbl tbody tr:hover .row-a-b, .tbl tbody tr:focus-within .row-a-b, .tbl.acts-on .row-a-b { visibility: visible; }
/* Their tooltips open above the button, flush with its right edge: to the left they covered the
   row's other actions, below the last row's would be clipped by the card's sideways scroll, and
   centred the last button's would run past the card's edge. */
.tbl .row-a .tip { top: auto; bottom: calc(100% + 4px); left: auto; right: 0; transform: none; }
.tbl .mut { color: var(--rcp-ink-2); }
.tbl .strong { font-weight: 600; }
.tbl .cell-av { display: flex; align-items: center; gap: 10px; color: var(--rcp-ink); text-decoration: none; }
.tbl .cell-av .av { width: 28px; height: 28px; border-radius: var(--rcp-radius-sm); font-size: var(--ty2-xs, 11px); }
/* Selection column (`selectable` tables): native checkboxes in the accent. */
.tbl .ck { width: 16px; padding: 8px 4px 8px 12px; }
.tbl .ck input { width: 16px; height: 16px; margin: 0; display: block; accent-color: var(--rcp-accent); cursor: pointer; }
.tbl tbody tr.sel td { background: var(--rcp-accent-soft); }
/* A row the caller marks (`row_class`): this one is about you. */
.tbl tbody tr.mark td { background: var(--rcp-accent-soft); }
.tbl tbody tr.mark td:first-child { box-shadow: inset 3px 0 0 var(--rcp-accent); }

/* Status word: a 7px dot in the text colour, then the label. */
.st { font-size: var(--rcp-text-base); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st.ok { color: var(--rcp-ok); } .st.warn { color: var(--rcp-warn-text); }
.st.critical { color: var(--rcp-critical); } .st.none { color: var(--rcp-ink-3); }
/* A sub-tab is also `.st`: it takes no status dot from the rule above (G-15); its own
   `.st-dot` says a status when the tab has one. */
.subtabs .st::before { content: none; }

/* Table card toolbar (chips left; search, selects and buttons right) and
 * footer (`1–50 de 1.240`, pager). Pixels from directorio-personas.html. */
.tbl-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px 10px 16px;
}
.tbl-bar-l, .tbl-bar-r { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tbl-bar-l { flex-wrap: wrap; }
.tbl-bar-r { gap: 8px; }
.tbl-bar .col-search { margin: 0; width: 220px; height: var(--rcp-control-h); box-sizing: border-box; padding: 0 10px; }
/* Bulk toolbar, shown in place of the chips while rows are selected. */
.sel-bar { display: flex; align-items: center; gap: 6px; }
.sel-n { font-size: var(--rcp-text-md); font-weight: 600; margin-right: 6px; white-space: nowrap; }
.btn.danger { color: var(--rcp-danger-text); }
.tbl-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  font-size: var(--rcp-text-base); color: var(--rcp-ink-2);
  border-top: 1px solid var(--rcp-border-soft);
}
.tbl-foot .pager { display: flex; gap: 4px; align-items: center; }

.src {
  font-size: var(--rcp-text-sm); color: var(--rcp-ink-2);
  background: var(--rcp-canvas);
  padding: 2px 8px; border-radius: var(--rcp-radius-xs); font-weight: 500;
}
.flag {
  font-size: var(--rcp-text-sm); font-weight: 600;
  letter-spacing: .02em;
}

.empty {
  margin: auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--rcp-ink-3); padding: 40px;
  /* a paragraph of several lines is centred as the icon and title over it (G-39) */
  text-align: center;
}
/* *Loading…* of a record or a tab (shell `data-pending`): shown only when the
   answer takes a while, so a quick one never flashes the spinner. */
@keyframes malla-pending-in { from { opacity: 0; } to { opacity: 1; } }
.empty[data-pending] { animation: malla-pending-in .2s ease-out .4s both; }
.empty-t { font-size: var(--rcp-text-lg); font-weight: 600; color: var(--rcp-ink-2); }
.empty-n { font-size: var(--rcp-text-base); }
.empty-d { margin-top: 12px; font-family: var(--rcp-font-mono, ui-monospace, monospace); font-size: var(--rcp-text-sm); color: var(--rcp-ink-3, var(--rcp-ink-2)); user-select: all; }

/* ------------------------------------------------------------------ menus */

.menu-anchor { position: relative; display: inline-flex; }
button.menu-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px; color: var(--rcp-ink-2);
  border-radius: var(--rcp-radius-md);
}
button.menu-trigger:hover { background: var(--rcp-canvas); color: var(--rcp-ink); }
/* A header action that opens a menu (`kind: :menu`): an outlined button. */
button.menu-trigger.btn { padding: 8px 12px; color: var(--rcp-ink); }
button.menu-trigger.btn:hover {
  background: var(--rcp-surface); border-color: var(--rcp-border-menu); color: var(--rcp-ink);
}
.col-picker button.menu-trigger,
.topbar-r button.menu-trigger { padding: 0; }
.col-picker button.menu-trigger:hover,
.topbar-r button.menu-trigger:hover { background: transparent; }

.menu {
  position: absolute; top: calc(100% + 4px); z-index: 40;
  background: var(--rcp-surface);
  border: 1px solid var(--rcp-border-menu);
  border-radius: var(--rcp-radius-lg);
  box-shadow: var(--rcp-shadow-menu);
  padding: 6px;
  display: flex; flex-direction: column; gap: 1px;
}
/* A menu whose items are still on their way (`menu_anchor` `load`). */
.menu:not(:has(> *)) { display: none; }
.menu.is-fixed {
  z-index: 80;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
}
.menu-right { left: 0; }
.menu-left  { right: 0; }

.mi {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: var(--rcp-text-md);
  color: var(--rcp-ink);
  text-align: left; width: 100%;
}
.mi:hover:not(:disabled), .mi:focus-visible { background: var(--rcp-canvas); }
.mi .ic { color: var(--rcp-ink-2); }
.mi-l { flex-grow: 1; }
/* Why a disabled item is disabled (Menu.Item hint): a second, muted line. */
.mi-h { display: block; font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); }
.mi .k {
  margin-left: auto; font-size: var(--ty2-xs, 11px);
  color: var(--rcp-ink-3); font-variant-numeric: tabular-nums;
}
.mi .chev { margin-left: auto; color: var(--rcp-ink-3); display: inline-flex; }
.mi.red, .mi.red .ic { color: var(--rcp-danger-text); }
.mi.accent, .mi.accent .ic, .mi.accent .k { color: var(--rcp-accent); }
a.mi { text-decoration: none; }
a.mi.is-disabled { color: var(--rcp-ink-4); pointer-events: none; }

/* The identity card heading the user menu: 34px avatar, name, login, headline. */
.mcard { display: flex; align-items: center; gap: 10px; padding: 6px 8px 4px 8px; }
.mcard-b { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.mcard-t { font-size: var(--rcp-text-lg); font-weight: 600; color: var(--rcp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard-s { font-size: var(--rcp-text-base); color: var(--rcp-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard-n { font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.msep { height: 1px; background: var(--rcp-border-soft); margin: 5px 4px; }
.mlab {
  font-size: var(--ty2-xs, 10.5px); font-weight: 600;
  color: var(--rcp-ink-3); letter-spacing: 0.04em;
  padding: 6px 8px 2px 8px;
}

.mfoot {
  font-size: var(--ty2-xs, 10.5px); color: var(--rcp-ink-3);
  font-variant-numeric: tabular-nums;
  padding: 2px 8px 4px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.popover { padding: 10px; }
.pop-t { font-size: var(--rcp-text-md); font-weight: 700; padding: 2px 4px 8px 4px; }

.appi {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: var(--rcp-radius-sm);
  text-align: left; width: 100%;
}
.appi:hover { background: var(--rcp-canvas); }
/* The app on screen, when it is in the rail's ··· menu (console G-22). */
.appi.on { background: var(--rcp-surface-3); }
.appi.on .n { color: var(--rcp-accent); }
.appi .ico {
  width: 30px; height: 30px; border-radius: var(--rcp-radius-sm);
  background: var(--rcp-accent); color: var(--rcp-on-accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.appi .n { font-size: var(--rcp-text-md); font-weight: 600; display: block; }
.appi .s { font-size: var(--rcp-text-sm); color: var(--rcp-ink-2); display: block; }

/* -------------------------------------------------------- assistant panel */

.asst {
  width: var(--rcp-assistant-w); flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--rcp-surface-2);
  border-left: 1px solid var(--rcp-border);
  overflow: visible;
}
.asst-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px 16px;
  border-bottom: 1px solid var(--rcp-border);
}
.asst-ht { display: flex; align-items: center; gap: 8px; font-family: var(--rcp-font-display); font-size: var(--rcp-text-xl); font-weight: 800; }
.asst-hb { display: flex; gap: 2px; }
.asst-ctx {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 16px;
  font-size: var(--rcp-text-base); color: var(--rcp-ink-2);
}
.cite {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--rcp-text-sm); font-weight: 600;
  color: var(--rcp-accent); background: var(--rcp-accent-soft);
  padding: 3px 8px; border-radius: var(--rcp-radius-xs);
}
.cite.muted { color: var(--rcp-ink-2); background: var(--rcp-surface-3); }

.asst-msgs {
  flex-grow: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  padding: 6px 16px;
}
.msg { font-size: var(--rcp-text-md); line-height: 1.5; }
.msg p + p { margin-top: 8px; }
.msg-user {
  align-self: flex-end; max-width: 85%;
  background: var(--rcp-ink); color: var(--rcp-on-ink);
  line-height: 1.45; padding: 10px 12px;
  border-radius: 14px 14px 4px 14px;
}
.msg-assistant { color: var(--rcp-ink); }
.msg-assistant.pending { color: var(--rcp-ink-3); }
.cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.asst-sug { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.act {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--ty2-base, 12.5px); font-weight: 500;
  padding: 8px 10px;
  border-radius: var(--rcp-radius-sm);
  border: 1px solid var(--rcp-border);
  background: var(--rcp-surface);
  color: var(--rcp-ink);
  text-align: left;
}
.act:hover { border-color: var(--rcp-border-menu); }

.asst-composer {
  margin: 12px 16px 16px 16px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--rcp-surface);
  border: 1px solid var(--rcp-border);
  border-radius: var(--rcp-radius-xl);
  padding: 10px 12px;
  box-shadow: var(--rcp-shadow-composer);
}
.asst-composer input { border: none; padding: 0; height: auto; background: none; }
.asst-composer-b { display: flex; align-items: center; justify-content: space-between; }
.asst-composer-l { display: flex; gap: 4px; color: var(--rcp-ink-2); }
.asst-composer-l .btn { padding: 4px; }
.asst-send {
  width: 30px; height: 30px; border-radius: var(--rcp-radius-md);
  background: var(--rcp-accent); color: var(--rcp-on-accent);
  display: flex; align-items: center; justify-content: center;
}
.asst-send:hover { background: var(--rcp-accent-hover); }

/* ------------------------------------------------------------------ login */

.login {
  height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; background: var(--rcp-canvas);
}
.login-card {
  position: relative;
  width: 360px;
  background: var(--rcp-surface);
  border: 1px solid var(--rcp-border);
  border-radius: var(--rcp-radius-xl);
  box-shadow: var(--rcp-shadow-composer);
  padding: 26px 26px 24px 26px;
  display: flex; flex-direction: column; gap: 16px;
}

.login-lang { position: absolute; top: 12px; right: 12px; z-index: 2; }
.login-lang > summary {
  list-style: none;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--rcp-radius-sm);
  cursor: pointer;
}
.login-lang > summary::-webkit-details-marker { display: none; }
.login-lang > summary:hover { background: var(--rcp-surface-3); }
.login-lang[open] > summary { background: var(--rcp-accent-soft); }
.login-lang-menu {
  position: absolute; right: 0; top: calc(100% + 4px);
  min-width: 168px;
  background: var(--rcp-surface);
  border: 1px solid var(--rcp-border);
  border-radius: var(--rcp-radius-md);
  box-shadow: var(--rcp-shadow-menu);
  padding: 4px;
}
.login-lang-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: var(--rcp-radius-sm);
  color: var(--rcp-ink);
  font-size: var(--rcp-text-md);
}
.login-lang-opt:hover { background: var(--rcp-surface-3); color: var(--rcp-ink); }
.login-lang-opt.on { background: var(--rcp-accent-soft); font-weight: 600; }

.ic-flag {
  width: var(--rcp-icon); height: var(--rcp-icon);
  flex-shrink: 0; display: block;
  border-radius: 3px; overflow: hidden;
}
.ic-flag.sm { width: var(--rcp-icon-sm); height: var(--rcp-icon-sm); }
.ic-flag.xs { width: 14px; height: 14px; }
.login-brand { display: flex; align-items: center; gap: 12px; }
/* The mark on the login screen: the topbar's square, one size up. */
.rail-logo {
  width: 36px; height: 36px; border-radius: 11px;
  background: var(--rcp-mark-bg); color: var(--rcp-mark-fg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.login-name { font-family: var(--rcp-font-display); font-size: var(--rcp-text-2xl); font-weight: 800; letter-spacing: -0.01em; }
.login-tag { font-size: var(--rcp-text-base); color: var(--rcp-ink-2); margin-top: 1px; }

.login-error {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--ty2-base, 12.5px); font-weight: 500;
  color: var(--rcp-danger-text);
  background: var(--rcp-surface-3);
  border-radius: var(--rcp-radius-sm);
  padding: 8px 10px;
}

.login-sso { justify-content: center; height: var(--rcp-control-h); }
.login-card-pick {
  height: var(--rcp-control-h); padding: 0 10px; margin-bottom: 8px;
  background: var(--rcp-surface-3); color: var(--rcp-ink);
  border: 1px solid var(--rcp-border); border-radius: var(--rcp-radius-sm);
}
.login-or {
  display: flex; align-items: center; gap: 10px;
  color: var(--rcp-ink-3); font-size: var(--rcp-text-sm);
}
.login-or::before, .login-or::after {
  content: ""; flex: 1; height: 1px; background: var(--rcp-border);
}

.login-form { display: flex; flex-direction: column; gap: 6px; }
.login-l {
  font-size: var(--rcp-text-sm); font-weight: 600;
  color: var(--rcp-ink-2); letter-spacing: 0.03em; text-transform: uppercase;
  margin-top: 6px;
}
.login-submit { justify-content: center; margin-top: 14px; height: var(--rcp-control-h); }
.login-foot { font-size: var(--rcp-text-base); color: var(--rcp-ink-3); }

/* ------------------------------------------------------------------ flash */

.flash-tray {
  /* Over a dialog (90, 91) and the search layer (95): a trace id stays copyable
     while a dialog is open (console audit L11). */
  position: fixed; bottom: 16px; right: 16px; z-index: 96;
  display: flex; flex-direction: column; gap: 8px;
}
.flash {
  padding: 10px 14px;
  border-radius: var(--rcp-radius-md);
  box-shadow: var(--rcp-shadow-menu);
  font-size: var(--rcp-text-md); font-weight: 500;
  background: var(--rcp-ink); color: var(--rcp-on-ink);
  max-width: 380px;
}
.flash.error { background: var(--rcp-danger-text); }
/* The warning before the idle sign-out: where the flashes are, over them. */
.idle-warn { position: fixed; bottom: 16px; right: 16px; z-index: 97; display: flex; align-items: center; gap: 12px; }
.idle-warn[hidden] { display: none; }
.idle-warn .flash-link { margin-left: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; cursor: pointer; }

/* The trace id of a failed backend call, and its copy button: in an error
   flash, and under an error painted inside a column or a tab. */
.trace-id {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--rcp-text-sm); font-weight: 400; color: var(--rcp-ink-3);
}
.trace-id code { font-family: ui-monospace, "SF Mono", Menlo, monospace; user-select: all; }
.trace-copy {
  display: inline-flex; align-items: center; padding: 2px;
  border: 0; border-radius: var(--rcp-radius-sm);
  background: transparent; color: inherit; cursor: pointer;
}
.trace-copy:hover { background: var(--rcp-accent-soft); }
.trace-copy.copied { color: var(--rcp-accent); }
.flash .trace-id { display: flex; margin-top: 4px; color: inherit; opacity: 0.85; }
.flash .trace-copy:hover { background: transparent; opacity: 0.7; }
p > .trace-id { display: flex; margin-top: 4px; }

/* ------------------------------------------------------- column additions */

.col-note, .col-empty {
  padding: 12px 16px;
  font-size: var(--rcp-text-base); color: var(--rcp-ink-3);
}
.col-empty.col-error { color: var(--rcp-critical); }

/* A block of code in a card (the operations log: a GraphQL document, the
   variables, a result): monospace, wrapped, scrolls when long. */
.code {
  margin: 0; padding: 12px 14px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--rcp-text-base); line-height: 1.5;
  color: var(--rcp-ink);
  background: var(--rcp-surface-2);
  border: 1px solid var(--rcp-border); border-radius: var(--rcp-radius-sm);
  white-space: pre-wrap; word-break: break-word;
  max-height: 60vh; overflow: auto;
}
.code-err { color: var(--rcp-critical); }

/* ---------------------------------------------------------- view fragments */

/* Label/value list (MallaUi.Components.Core.field_list/1). */
.dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; }
.dl-r {
  display: flex; align-items: baseline; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--rcp-border-soft);
}
.dl-k {
  flex: 0 0 40%;
  font-size: var(--rcp-text-base); color: var(--rcp-ink-2); font-weight: 500;
}
.dl-v { font-size: var(--rcp-text-md); color: var(--rcp-ink); word-break: break-word; }
@media (max-width: 1100px) { .dl { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ forms */

.form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; padding-top: 4px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field input {
  height: var(--rcp-control-h);
  padding: 0 10px;
  font-size: var(--rcp-text-md); font-family: inherit;
  color: var(--rcp-ink);
  background: var(--rcp-surface);
  border: 1px solid var(--rcp-border);
  border-radius: var(--rcp-radius-md);
}
.field input:focus { outline: none; border-color: var(--rcp-accent); }
.form-a { display: flex; gap: 8px; }
.form-r { font-size: var(--rcp-text-md); font-weight: 500; }
.form-r.ok  { color: var(--rcp-ok); }
.form-r.bad { color: var(--rcp-critical); }
/* A flush card (a table to the edges) has no body padding: a result or an
   error above the table takes the same inset as `.col-note`. */
.card.flush .card-b > .form-r { margin: 0; padding: 12px 16px; }

/* Keycloak sync banner. */
.sync-h {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding: 12px 14px;
  border: 1px solid var(--rcp-border);
  border-radius: var(--rcp-radius-lg);
  background: var(--rcp-surface-2);
}
.sync-h-t { font-size: var(--rcp-text-lg); font-weight: 600; }
.sync-h-n { font-size: var(--rcp-text-base); color: var(--rcp-ink-2); flex-basis: 100%; }
.sync-h.ok   { border-color: var(--rcp-ok); }
.sync-h.ok .ic, .sync-h.ok .sync-h-t { color: var(--rcp-ok); }
.sync-h.warn { border-color: var(--rcp-warn); }
.sync-h.warn .ic { color: var(--rcp-warn); }
.sync-h.warn .sync-h-t { color: var(--rcp-warn-text); }
.sync-h.bad  { border-color: var(--rcp-critical); }
.sync-h.bad .ic, .sync-h.bad .sync-h-t { color: var(--rcp-critical); }

/* ------------------------------------------------------------- responsive */

/* Below 1280px the assistant overlays the main view; below 1024px the app
   column collapses. No mobile layout in v1. */
@media (max-width: 1280px) {
  .asst {
    position: fixed; top: var(--rcp-topbar-h); right: 0; bottom: 0; z-index: 30;
    box-shadow: var(--rcp-shadow-menu);
  }
}
@media (max-width: 1024px) {
  /* Teams list pane: hide the column, a chevron brings it back as an
     overlay over the main view; picking a row dismisses it. */
  .column {
    display: none;
    position: fixed;
    top: var(--rcp-topbar-h); bottom: 0;
    left: var(--rcp-rail-w); right: 0;
    width: auto;
    z-index: 25;
    box-shadow: var(--rcp-shadow-menu);
  }
  .shell.is-column-open .column { display: flex; }
  .col-resize { display: none; }
  .shell.is-column-open .col-h { padding-left: 48px; }

  .view { position: relative; }
  .col-toggle-open {
    display: flex;
    position: absolute; top: 14px; left: 8px; z-index: 2;
  }
  .col-toggle-close {
    display: flex;
    position: absolute; top: 14px; left: 8px; z-index: 2;
  }
  .view-h { padding-left: 52px; }
}

.scrim {
  display: none;
  position: fixed;
  inset: var(--rcp-topbar-h) 0 0 0;
  background: rgba(var(--rcp-shadow-color), 0.32);
  z-index: 20;
}
@media (max-width: 1280px) {
  .shell.is-assistant-open .scrim-asst { display: block; z-index: 29; }
}
@media (max-width: 1024px) {
  .shell.is-column-open .scrim-column { display: block; z-index: 24; }
}

@media (prefers-reduced-motion: no-preference) {
  .asst { transition: transform 160ms ease-out, opacity 160ms ease-out; }
  .column { transition: transform 160ms ease-out, opacity 160ms ease-out; }
  .menu { transition: opacity 100ms ease, transform 100ms ease; }
  .scrim { transition: opacity 160ms ease-out; }
}

/* LiveView connection states */
.phx-connected [phx-click] { cursor: pointer; }
.phx-loading, .phx-error { cursor: wait; }

/* ===================================================================
   Directory column — kind picker, breadcrumb, drill-down, footer.
   Pixels from ui/reference/directorio-lista.html and directorio-menus.html.
   =================================================================== */

/* The column title is a button: kind icon + label + caret (spec §2.1). */
.col-picker { min-width: 0; }
.col-picker .menu-trigger { display: flex; min-width: 0; }
.col-picker-btn {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 2px 6px; margin: -2px -6px;
  border-radius: var(--rcp-radius-sm);
  color: var(--rcp-ink-2);
  cursor: pointer;
}
.col-picker-btn:hover { background: var(--rcp-surface-3); }
.col-picker-btn .col-t { color: var(--rcp-ink); }
.col-picker-btn .ic { flex-shrink: 0; }

/* The same title row with an icon and no picker behind it. */
.col-title { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--rcp-ink-2); }
.col-title .col-t { color: var(--rcp-ink); }

/* Back one level, left of the title when inside a scope. */
.col-back { margin: -8px 0 -8px -8px; padding: 8px; }

/* Breadcrumb under the title row (spec §2.2): an outline, one line per
   level, each indented under its parent and ellipsised on its own. */
.crumb {
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--rcp-text-base); color: var(--rcp-ink-2);
  padding: 0 16px 16px 16px;
}
.crumb-i {
  display: flex; align-items: center; gap: 4px; min-width: 0;
  padding-left: calc((var(--crumb-depth, 0) - 1) * 14px);
}
.crumb-i:first-child { padding-left: 0; }
.crumb-i .ic { flex-shrink: 0; color: var(--rcp-ink-3); }
.crumb-i .crumb-l, .crumb-i .cur { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.crumb .crumb-l { color: var(--rcp-ink-2); text-decoration: none; }
.crumb .crumb-l:hover { color: var(--rcp-ink); }
.crumb .sep { color: var(--rcp-ink-4); }
.crumb .cur { color: var(--rcp-ink); font-weight: 600; }

/* Row drill-down button: enters the group as the column's scope. */
.drill {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--rcp-radius-sm);
  color: var(--rcp-ink-3);
  margin: -4px -6px -4px -4px;
}
.drill:hover { color: var(--rcp-ink-2); background: var(--rcp-surface-3); }

/* Profile (read mode): two-column card grid, definition lists and the
 * registro card. Pixels from ui/reference/directorio-lista.html. */
/* Cards in rows of two (MallaUi.Form.layout/1 keeps the order): the two of a row
 * are as tall as the taller one; a wide card spans both. Narrow, one column in
 * the card order (--o). */
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--rcp-gap); align-items: stretch; }
.pg-col { display: contents; }
.pg-col.wide > .pg-cell { grid-column: 1 / -1; }
.pg-cell { order: var(--o); min-width: 0; display: flex; flex-direction: column; }
.pg-cell > .card { flex: 1 1 auto; }
@media (max-width: 1100px) {
  .profile-grid { display: flex; flex-direction: column; }
}
.kv {
  display: grid; grid-template-columns: 150px 1fr;
  row-gap: 9px; column-gap: 12px;
  margin: 0; padding: 6px 0 6px 0;
  font-size: var(--rcp-text-md);
}
.kv .k { color: var(--rcp-ink-2); }
.kv .v { color: var(--rcp-ink); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.kv .v .mut { color: var(--rcp-ink-3); font-weight: 400; }
.kv .v .vbadge { margin-left: 8px; padding: 1px 8px; border-radius: var(--rcp-radius-pill); font-size: var(--ty2-xs, 11px); font-weight: 700; letter-spacing: 0.02em; background: var(--rcp-surface-3); color: var(--rcp-ink-3); }
.kv .v .vbadge.ok { background: var(--rcp-ok-soft); color: var(--rcp-ok); }
.kv .v .vbadge.warn { background: var(--rcp-warn-soft); color: var(--rcp-warn-text); }
.kv .v .vbadge.pending { background: var(--rcp-accent-soft); color: var(--rcp-accent); }
.kv .v .vaction { margin-left: 6px; padding: 1px 8px; border: 1px solid var(--rcp-border); border-radius: var(--rcp-radius-pill); background: var(--rcp-surface); color: var(--rcp-accent); font: inherit; font-size: var(--ty2-xs, 11px); font-weight: 600; cursor: pointer; }
.kv .v .vaction:hover { border-color: var(--rcp-accent); background: var(--rcp-accent-soft); }
.kv .v a { color: var(--rcp-accent); text-decoration: none; }
.kv .v a:hover { color: var(--rcp-accent-hover); }
.kv .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--rcp-text-base); font-weight: 400; }
.kv-2 { grid-template-columns: 150px 1fr 150px 1fr; }
.kv-flush { padding: 12px 0; }
@media (max-width: 1100px) { .kv-2 { grid-template-columns: 150px 1fr; } }
.mono-copy { display: inline-flex; align-items: center; gap: 6px; }
.copy { display: inline-flex; color: var(--rcp-ink-3); padding: 2px; border-radius: var(--rcp-radius-xs); }
.copy:hover { color: var(--rcp-ink); background: var(--rcp-surface-3); }
.copy.copied { color: var(--rcp-accent); }
/* The copy did not happen (no clipboard, or the browser refused): never "copied". */
.copy.copy-failed, .trace-copy.copy-failed { color: var(--rcp-danger-text); }
.card-a .card-s { margin-left: 0; }
.card-a .card-s a { color: var(--rcp-accent); text-decoration: none; }

/* Footer: <shown> de <total> + Cargar más. */
.col-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--rcp-text-sm); color: var(--rcp-ink-3);
  padding: 8px 16px 12px 16px;
  border-top: 1px solid var(--rcp-border-soft);
  margin-top: auto;
}
.col-foot a { color: var(--rcp-accent); text-decoration: none; cursor: pointer; }
.col-foot a:hover { color: var(--rcp-accent-hover); }

/* ------------------------------------------------------------- form kit */
/* Pixels from ui/reference/directorio-editar.html. Rendered by
 * MallaUi.Components.Form; MallaUi.FormTab lays a description out with it. */

.frm { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 8px 16px 16px 16px; }
.frm-one .frm { grid-template-columns: 1fr; }
.fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fld.wide { grid-column: 1 / -1; }
/* Beside the count of ticked rows: only the loaded ones were (console audit S10). */
.sel-note { font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); }
/* A password with its show and generate buttons (console audit S5). */
.inp-pw { display: flex; align-items: center; gap: 4px; }
.inp-pw .inp { flex: 1; min-width: 0; }
.inp-pw .pw-btn { flex-shrink: 0; }
.lbl { font-size: var(--rcp-text-base); font-weight: 500; color: var(--rcp-ink-2); }
.lbl .req { color: var(--rcp-critical); margin-left: 2px; }

.inp {
  height: var(--rcp-control-h); box-sizing: border-box; width: 100%;
  padding: 0 10px;
  border: 1px solid var(--rcp-border); border-radius: var(--rcp-radius-md);
  background: var(--rcp-surface);
  font: inherit; font-size: var(--rcp-text-md); color: var(--rcp-ink);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  outline: none;
}
.inp::placeholder { color: var(--rcp-ink-3); }
.inp:focus, .inp:focus-within { border-color: var(--rcp-accent); box-shadow: 0 0 0 3px var(--rcp-accent-soft); }
.inp.ro, .inp:read-only:not(.inp-sel) { background: var(--rcp-surface-2); color: var(--rcp-ink-2); }
.inp.ro:focus { border-color: var(--rcp-border); box-shadow: none; }
.inp.dirty { border-color: var(--rcp-accent); }
.inp.err { border-color: var(--rcp-critical); }
.inp .caret { color: var(--rcp-ink-3); display: inline-flex; pointer-events: none; }
.inp-ta { height: auto; min-height: 72px; padding: 8px 10px; resize: vertical; display: block; }
/* Select: the native control fills the styled box, its own arrow hidden. */
.inp-sel { padding-right: 8px; position: relative; }
.inp-sel select {
  appearance: none; -webkit-appearance: none;
  flex-grow: 1; min-width: 0; height: 100%;
  border: none; background: transparent; outline: none;
  font: inherit; font-size: var(--rcp-text-md); color: inherit;
  padding: 0; margin: 0;
}
.inp-sel select:disabled { color: var(--rcp-ink-2); }
/* A select of several (`multiple?:` in a dialog): a list box, no caret. */
.inp-sel.inp-multi { height: auto; padding: 4px 6px; }
.inp-sel.inp-multi select { height: auto; min-height: 132px; }
.inp-sel.inp-multi option { padding: 3px 4px; border-radius: var(--rcp-radius-sm); }
.hint { font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); }
.hint.err { color: var(--rcp-critical); font-weight: 500; }
/* The muted note under a form (`MallaUi.Components.Form.banner/1`). */
.banner { display: flex; align-items: flex-start; gap: 8px; font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); }
.banner .ic { flex-shrink: 0; margin-top: 1px; }

/* Toggle: the real checkbox is visually hidden, the switch mirrors it. */
/* `relative`: the hidden input inside is `absolute`; with no positioned ancestor it sits in
   the page, outside the pane that scrolls, and focusing it scrolled the whole page. */
.tgl { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: var(--rcp-text-md); height: var(--rcp-control-h); cursor: pointer; color: var(--rcp-ink); }
.tgl.ro { cursor: default; color: var(--rcp-ink-2); }
.tgl-in { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.tgl .sw { width: 34px; height: 20px; border-radius: var(--rcp-radius-pill); background: var(--rcp-ink-4); position: relative; flex-shrink: 0; transition: background 120ms ease-out; }
.tgl .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--rcp-surface); transition: left 120ms ease-out; }
.tgl .sw.on, .tgl .tgl-in:checked + .sw { background: var(--rcp-accent); }
.tgl .sw.on::after, .tgl .tgl-in:checked + .sw::after { left: 16px; }
.tgl .tgl-in:focus-visible + .sw { box-shadow: 0 0 0 3px var(--rcp-accent-soft); }
/* Read only: greyed, on or off, so it does not look like a control. */
.tgl.ro .sw { background: var(--rcp-surface-2); box-shadow: inset 0 0 0 1px var(--rcp-ink-4); }
.tgl.ro .sw.on, .tgl.ro .tgl-in:checked + .sw { background: var(--rcp-ink-4); box-shadow: none; }

/* Chips as a multiple choice: each chip wraps a hidden checkbox. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
/* Relative, so the checkbox stays inside its chip: positioned against a far
   ancestor, focusing it on click scrolls the view to wherever it landed. */
.chips .chip { cursor: pointer; position: relative; }
/* A ranked choice (`:ranked`): the chosen in order, then the ones to add. */
.rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rank-row { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border: 1px solid var(--rcp-border); border-radius: var(--rcp-radius-sm); background: var(--rcp-surface); }
.rank-n { width: 18px; text-align: center; font-weight: 600; color: var(--rcp-ink-3); }
.rank-l { flex: 1; min-width: 0; }
.rank-ops { display: inline-flex; gap: 2px; }
.rank-ops .btn:disabled { opacity: .35; cursor: default; }
.rank-empty { font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); padding: 2px 0; }
.chips .chip { position: relative; }
.chips button.chip { font: inherit; display: inline-flex; align-items: center; gap: 4px; }
.chip-in { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.chips .chip:has(.chip-in:focus-visible) { box-shadow: 0 0 0 3px var(--rcp-accent-soft); }
/* Read only: greyed, the selected ones still told apart. */
.chips .chip:has(.chip-in:disabled) { cursor: default; background: var(--rcp-surface-2); color: var(--rcp-ink-3); }
.chips .chip.on:has(.chip-in:disabled) { background: var(--rcp-ink-4); border-color: var(--rcp-ink-4); color: var(--rcp-ink-2); }

/* A form grid inside a card body keeps the card's own side padding. */
.card-b > .frm { padding-left: 0; padding-right: 0; }

/* Small labels: a kind, a session type, a count next to a value. */
.pill {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: var(--rcp-text-sm); font-weight: 600;
  padding: 2px 8px; border-radius: var(--rcp-radius-pill);
  background: var(--rcp-canvas); color: var(--rcp-ink-2);
}
.pill.acc { background: var(--rcp-accent-soft); color: var(--rcp-accent); }
.pill.warn { background: var(--rcp-warn-soft); color: var(--rcp-warn-text); }
.pill.ok { background: var(--rcp-ok-soft); color: var(--rcp-ok); }
.pill.critical { background: var(--rcp-critical-soft); color: var(--rcp-critical); }
/* A pill in the view header's subtitle (`%{pill: …}`): a link keeps its own colors. */
.view-s .pill-s { margin-left: 8px; vertical-align: 1px; }
.view-s a.pill-s { text-decoration: none; }
.view-s a.pill-s.acc { color: var(--rcp-accent); }
.view-s a.pill-s.warn { color: var(--rcp-warn-text); }
.view-s a.pill-s.ok { color: var(--rcp-ok); }
.view-s a.pill-s:hover { filter: brightness(0.95); text-decoration: none; }
.pill.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 500; }

/* A fact's program pills (`fact_extras/1`): track chips, the day of the
   period with its bar, and a clock counting down to a deadline. */
.fpill { font-size: var(--rcp-text-sm); padding: 1px 8px; line-height: 18px; }
.view-fact-v .fpill, .fact .fv .fpill { font-weight: 700; }
.fpill-day { gap: 6px; }
.fpill-bar { display: inline-block; width: 34px; height: 4px; border-radius: 2px; background: var(--rcp-border); overflow: hidden; }
.fpill-bar i { display: block; height: 100%; background: var(--rcp-accent); }
.fpill-clock { gap: 4px; }
.fpill-clock .fpill-k { color: var(--rcp-ink-3); font-weight: 600; }
.fpill-clock.due-ok { background: var(--rcp-canvas); color: var(--rcp-ink-2); }
.fpill-clock.due-warn { background: var(--rcp-warn-soft); color: var(--rcp-warn-text); }
.fpill-clock.due-critical { background: var(--rcp-critical-soft); color: var(--rcp-critical); }

/* The "unsaved changes" pill next to the view title. */
.pill-dirty {
  flex-shrink: 0; line-height: 1.3;
  font-size: var(--rcp-text-sm); font-weight: 500; white-space: nowrap;
  padding: 3px 8px; border-radius: var(--rcp-radius-pill);
  color: var(--rcp-warn-text); background: var(--rcp-warn-soft); border: 1px solid var(--rcp-warn-line);
}

/* Dialog: 380px card over a 28% ink scrim, under the top bar. */
.scrim-dialog { display: block; position: fixed; inset: 0; background: rgba(var(--rcp-shadow-color), 0.28); z-index: 90; }
.dlg {
  position: fixed; z-index: 91;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 380px; max-width: calc(100vw - 32px); box-sizing: border-box;
  background: var(--rcp-surface); border-radius: var(--rcp-radius-2xl);
  box-shadow: 0 20px 50px rgba(var(--rcp-shadow-color), 0.22);
  padding: 20px 22px 18px 22px;
  display: flex; flex-direction: column; gap: 12px;
  /* a form taller than the window scrolls instead of losing its buttons */
  max-height: calc(100vh - 48px); overflow-y: auto;
}
.dlg-t { font-family: var(--rcp-font-display); font-size: var(--rcp-text-xl); font-weight: 800; }
/* What the dialog writes about, fixed under its title (console U-4). */
.dlg-about {
  margin-top: -6px; font-size: var(--rcp-text-sm); font-weight: 600; color: var(--rcp-ink-2);
  padding-bottom: 8px; border-bottom: 1px solid var(--rcp-border-soft);
}
.dlg-b { font-size: var(--rcp-text-md); color: var(--rcp-ink-2); line-height: 1.5; }
.dlg-b strong { color: var(--rcp-ink); font-weight: 600; }
.dlg-b .danger { color: var(--rcp-danger-text); font-weight: 500; }
/* A short list under the body: label left, detail right; danger rows in red. */
.dlg-list {
  list-style: none; margin: 0; padding: 0;
  max-height: 260px; overflow-y: auto;
  border: 1px solid var(--rcp-border); border-radius: var(--rcp-radius-sm);
}
.dlg-list li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 10px; font-size: var(--rcp-text-md); color: var(--rcp-ink);
}
.dlg-list li + li { border-top: 1px solid var(--rcp-border); }
.dlg-list-l { flex: 1; min-width: 0; overflow-wrap: anywhere; color: inherit; text-decoration: none; }
a.dlg-list-l:hover { color: var(--rcp-accent); }
.dlg-list-d { color: var(--rcp-ink-3); font-size: var(--rcp-text-sm); flex: 0 1 58%; text-align: right; overflow-wrap: anywhere; }
.dlg-list li.danger, .dlg-list li.danger .dlg-list-d { color: var(--rcp-danger-text); }
.dlg-typed { display: flex; flex-direction: column; gap: 5px; }
/* Two columns; a field takes the whole row unless it is `half?`, then two share it (G-34). */
.dlg-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; align-content: start; }
.dlg-cell { grid-column: 1 / -1; min-width: 0; }
.dlg-cell.half { grid-column: auto; }
.dlg-cell:not(:has(*)) { display: none; }
/* A form taller than the window scrolls inside the dialog: the title and the buttons stay
   in sight (G-34). The side padding keeps the focus rings clear of the scroller's edge. */
.dlg:has(> .dlg-form) { overflow-y: hidden; }
.dlg > .dlg-form { flex: 0 1 auto; min-height: 0; overflow-y: auto; margin: -3px -22px; padding: 3px 22px; }
.dlg-err { margin: 0; }
/* "Discard what you typed?": Esc or the scrim met typed text (MallaUi.Dialog.changed?/1). */
.dlg-discard {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--rcp-warn-line); border-radius: var(--rcp-radius-xs);
  background: var(--rcp-warn-soft); color: var(--rcp-ink); font-size: var(--rcp-text-md);
}
.dlg-discard-t { flex: 1; min-width: 0; }
.dlg-f { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
/* A button that reads as a link, inside a cell or a line. */
.btn.link { border: none; background: none; padding: 0; height: auto; color: var(--rcp-accent); font-weight: 600; gap: 5px; }
.btn.link:hover { background: none; text-decoration: underline; }
.btn.link .mut { color: var(--rcp-ink-3); font-weight: 400; }

/* A wide dialog: a window to read (a table), its body scrolling. */
/* A wide dialog hangs from a fixed top, so changing what it shows (a
   filter, a scope) does not move its title; its body stacks its blocks
   with the dialog's own gap. */
/* A dialog with a list to edit in it (a :schedules field). */
.dlg.roomy { width: 640px; max-height: calc(100vh - 48px); overflow-y: auto; }

/* The :schedules editor: one block per schedule, the rule and the time on the
   first line, the weekdays under it, the label and the dates last. */
.sch .sch-row { flex-wrap: wrap; align-items: stretch; flex-direction: column; gap: 8px; padding: 10px; }
.sch-main, .sch-more { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.sch-main .fld, .sch-more .fld { flex: 0 1 150px; min-width: 120px; }
.sch-more .fld:first-child { flex: 1 1 180px; }
.sch-days { display: flex; flex-direction: column; gap: 4px; }
.sch-rm { margin-left: auto; }
.sch-row.err { border-color: var(--rcp-danger-text); }
.sch-err { margin: 0; }

.dlg.wide { width: 1000px; max-height: calc(100vh - 64px); top: 32px; transform: translateX(-50%); }
.dlg-b.scroll {
  flex: 1; min-height: 0; overflow-y: auto; margin: 0 -22px; padding: 0 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.dlg-b.scroll > .dlg-bar + .dlg-bar { margin-top: -4px; }
.dlg-note { margin: 0; font-size: var(--rcp-text-md); color: var(--rcp-ink-2); line-height: 1.5; }
.dlg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dlg-bar .inp { width: 200px; }
.dlg-bar .sep { flex: 1; }

/* Check matrix (`check_matrix/1`): grouped rows, one column of checks each,
   the rest as pills — ui/reference/roles-permissions.html. */
.tbl.mx { table-layout: fixed; font-size: var(--rcp-text-md); }
.tbl.mx th {
  position: sticky; top: 0; z-index: 2; font-size: var(--rcp-text-sm); line-height: 1.2; vertical-align: bottom;
  /* opaque, or the rows scroll through it; the border is a shadow because a collapsed border does not travel with a sticky cell */
  background: var(--rcp-surface); border-bottom: none; box-shadow: inset 0 -1px 0 var(--rcp-border);
}
.tbl.mx td { padding: 5px 4px; }
.tbl.mx .mx-r { width: 190px; padding-left: 12px; }
.tbl.mx .mx-c { width: 66px; text-align: center; }
.tbl.mx tr.mx-g td {
  background: var(--rcp-surface-2); padding: 6px 12px;
  font-size: var(--rcp-text-sm); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--rcp-ink-3);
}
.tbl.mx tbody tr.mx-g:hover td { background: var(--rcp-surface-2); }
.tbl.mx tbody tr:not(.mx-g):hover td { background: var(--rcp-accent-soft); }
.mx-ck {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: var(--rcp-radius-xs);
  background: var(--rcp-accent); color: var(--rcp-on-ink);
}
.mx-ck.sec { background: var(--rcp-surface-3); color: var(--rcp-ink-2); }
.mx-no { color: var(--rcp-ink-4); }
.mx-o { white-space: normal; }
.mx-op {
  display: inline-block; margin: 1px 3px 1px 0; padding: 0 6px; border-radius: 5px;
  font-size: var(--rcp-text-sm); font-weight: 600;
  background: var(--rcp-accent); color: var(--rcp-on-ink);
}
.mx-op.sec { background: var(--rcp-surface-3); color: var(--rcp-ink-2); }
.mx-legend { display: inline-flex; align-items: center; gap: 6px; font-size: var(--rcp-text-sm); color: var(--rcp-ink-2); white-space: nowrap; }

.btn.danger-fill { background: var(--rcp-danger-text); border-color: var(--rcp-danger-text); color: var(--rcp-on-ink); }
.btn.danger-fill:hover:not(:disabled) { filter: brightness(0.92); }
.btn:disabled { opacity: 0.5; cursor: default; }

/* Sortable table headers and the "load more" footer link. */
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover { color: var(--rcp-ink); }
.tbl th .sort-ic { display: inline-flex; vertical-align: middle; margin-left: 3px; color: var(--rcp-ink-3); }
.tbl th.sorted { color: var(--rcp-ink); }
.tbl th.sorted .sort-ic { color: var(--rcp-accent); }
.tbl-foot a, .tbl-foot button.link { color: var(--rcp-accent); text-decoration: none; cursor: pointer; font: inherit; }
/* "Load more" while the rows are being read: it waits for them. */
.tbl-foot button.link:disabled { cursor: default; }
.tbl-foot .mut { color: var(--rcp-ink-3); }
.tbl-foot .tbl-note { flex: 1; min-width: 0; padding: 0 12px; }

/* ---------------------------------------------------------------- search */
/* The search popup (MallaUi.Search, ui/reference/buscador-*.html): a 980px
   card under the top bar over a 28% ink scrim; picker mode is 820px. */

.topbar-sep { width: 1px; height: 22px; background: var(--rcp-border); margin: 0 4px; }
.topbar-r > .btn.ghost { width: 34px; height: 34px; padding: 0; justify-content: center; }
.topbar-r > .btn.ghost .tip { left: auto; right: 0; transform: none; }

/* ------------------------------------------------------------------ bell */
/* The notification bell (MallaUi.Components.Bell, ui/reference/notifications-centre.html):
   a ghost button with an unseen counter, and a 420px popover under it. */

.bell-wrap { position: relative; display: flex; align-items: center; }
.bell-wrap > .btn.ghost { width: 34px; height: 34px; padding: 0; justify-content: center; }
.bell-wrap > .btn.ghost .tip { left: auto; right: 0; transform: none; }
.bell-badge {
  position: absolute; top: 0; right: -2px;
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: var(--rcp-radius-pill);
  background: var(--rcp-critical); color: var(--rcp-on-ink);
  font-size: var(--rcp-text-xs); font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--rcp-canvas);
}
.bell-scrim {
  position: fixed; inset: var(--rcp-topbar-h) 0 0 0; z-index: 94;
  background: rgba(var(--rcp-shadow-color), 0.10);
}
.ntf-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 95;
  width: 420px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - var(--rcp-topbar-h) - 24px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--rcp-surface); color: var(--rcp-ink);
  border: 1px solid var(--rcp-border-menu); border-radius: var(--rcp-radius-xl);
  box-shadow: var(--rcp-shadow-menu);
}
.ntf-pop-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px 16px; flex-shrink: 0; }
.ntf-pop-t { font-family: var(--rcp-font-display); font-size: var(--ty2-xl, 16px); font-weight: 800; }
.ntf-pop-b { display: flex; gap: 4px; align-items: center; }
.ntf-pop .btn.sm { font-size: var(--rcp-text-base); padding: 5px 9px; border-radius: var(--rcp-radius-sm); }
.ntf-pop .btn.ghost.sm { color: var(--rcp-ink-2); }
.ntf-tabs { display: flex; gap: 18px; padding: 4px 16px 0 16px; border-bottom: 1px solid var(--rcp-border); flex-shrink: 0; }
.ntf-tab {
  display: flex; align-items: center; gap: 6px; padding: 10px 2px;
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font: inherit; font-size: var(--rcp-text-lg); font-weight: 500; color: var(--rcp-ink-2); cursor: pointer;
}
.ntf-tab:hover { color: var(--rcp-ink); }
.ntf-tab.on { color: var(--rcp-ink); font-weight: 700; border-bottom-color: var(--rcp-highlight); }
.ntf-cnt {
  font-size: var(--rcp-text-sm); font-weight: 700; color: var(--rcp-ink-2);
  background: var(--rcp-surface-3); padding: 0 6px; border-radius: var(--rcp-radius-pill);
}
.ntf-body { overflow-y: auto; min-height: 0; flex: 1; }
.ntf-empty { padding: 28px 16px; text-align: center; font-size: var(--rcp-text-md); color: var(--rcp-ink-3); }
.ntf-loading { display: block; margin: 24px auto; }
.ntf-grp-h {
  display: flex; justify-content: space-between; padding: 10px 16px 4px 16px;
  font-size: var(--rcp-text-sm); font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--rcp-ink-3); background: var(--rcp-surface-2); border-bottom: 1px solid var(--rcp-border-soft);
}
.ntf-more { padding: 8px 16px; font-size: var(--rcp-text-base); color: var(--rcp-ink-3); border-bottom: 1px solid var(--rcp-border-soft); }
.nrow { display: flex; gap: 10px; padding: 10px 16px; align-items: flex-start; border-bottom: 1px solid var(--rcp-border-soft); }
.nrow.new { background: color-mix(in srgb, var(--rcp-accent-soft) 35%, var(--rcp-surface)); }
.nrow .ni {
  width: 30px; height: 30px; border-radius: var(--rcp-radius-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--rcp-surface-3); color: var(--rcp-ink-2);
}
.nrow .ni.crit { background: var(--rcp-critical-soft); color: var(--rcp-critical); }
.nrow .ni.warn { background: var(--rcp-warn-soft); color: var(--rcp-warn); }
.nrow .ni.acc { background: var(--rcp-accent-soft); color: var(--rcp-accent); }
.nbody { flex: 1; min-width: 0; }
.nt { display: block; font-size: var(--rcp-text-md); font-weight: 700; line-height: 1.3; color: var(--rcp-ink); text-decoration: none; }
a.nt:hover { text-decoration: underline; }
.nsub { font-size: var(--rcp-text-base); color: var(--rcp-ink-2); margin-top: 2px; line-height: 1.35; }
.nmeta { font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); margin-top: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nact { display: flex; gap: 6px; margin-top: 7px; }
.unread { width: 7px; height: 7px; border-radius: 50%; background: var(--rcp-accent); flex-shrink: 0; margin-top: 6px; }
.ntf-pop-f {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0;
  padding: 10px 16px; border-top: 1px solid var(--rcp-border); background: var(--rcp-surface-2);
  font-size: var(--rcp-text-base); font-weight: 700;
}
.ntf-pop-f a { color: var(--rcp-accent); text-decoration: none; }
.ntf-pop-f a:hover { text-decoration: underline; }
.ntf-note { font-size: var(--rcp-text-sm); font-weight: 400; color: var(--rcp-ink-3); text-align: right; }
/* With a note, the note goes above and *Open Inbox* under it, on one line: side by side both
   wrapped (G-40). */
.ntf-pop-f:has(.ntf-note) { flex-direction: column-reverse; align-items: flex-start; gap: 4px; }
.ntf-pop-f:has(.ntf-note) .ntf-note { text-align: left; }
.ntf-pop-f a { white-space: nowrap; }

.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; box-sizing: border-box; padding: 0 5px;
  font-family: var(--rcp-font); font-size: var(--ty2-xs, 11px); font-weight: 600; line-height: 1;
  color: var(--rcp-ink-2); background: var(--rcp-surface);
  border: 1px solid var(--rcp-border); border-bottom-width: 2px; border-radius: 5px;
}

@keyframes malla-spin { to { transform: rotate(360deg); } }
.ic.spin { animation: malla-spin 0.9s linear infinite; color: var(--rcp-accent); }
@media (prefers-reduced-motion: reduce) { .ic.spin { animation-duration: 2.4s; } }

.srch-layer { position: fixed; inset: 0; z-index: 95; } /* over a dialog (90) that opened it */
.srch-scrim {
  position: fixed; inset: var(--rcp-topbar-h) 0 0 0;
  background: rgba(var(--rcp-shadow-color), 0.28);
}
.srch {
  position: fixed; left: 50%; top: calc(var(--rcp-topbar-h) + 16px);
  transform: translateX(-50%);
  width: 980px; max-width: calc(100vw - 32px);
  height: 756px; max-height: calc(100vh - var(--rcp-topbar-h) - 32px);
  background: var(--rcp-surface); border-radius: var(--rcp-radius-2xl);
  box-shadow: 0 20px 50px rgba(var(--rcp-shadow-color), 0.22), 0 2px 6px rgba(var(--rcp-shadow-color), 0.06);
  display: flex; flex-direction: column; overflow: hidden;
}
.srch.srch-pick { width: 820px; height: 640px; top: calc(var(--rcp-topbar-h) + 48px); }

.srch-title {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 16px 18px 12px 18px; border-bottom: 1px solid var(--rcp-border);
}
.srch-title-ic { color: var(--rcp-accent); }
.srch-title-b { flex-grow: 1; min-width: 0; }
.srch-title-t { font-family: var(--rcp-font-display); font-size: var(--rcp-text-xl); font-weight: 800; }
.srch-title-s { font-size: var(--ty2-base, 12.5px); color: var(--rcp-ink-2); }

.srch-in {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  height: 56px; padding: 0 18px; border-bottom: 1px solid var(--rcp-border);
}
.srch-in-ic { color: var(--rcp-accent); }
.srch-in input {
  flex-grow: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: var(--ty2-xl, 16px); color: var(--rcp-ink);
}
.srch-in input::placeholder { color: var(--rcp-ink-3); }
/* In a picker the search is the same flat row as the popup's (mbi-search.html):
   no box of its own, the hairline under it. */
.srch-in.srch-in-inner { height: 52px; }
.srch-in.srch-in-inner input { font-size: var(--rcp-text-xl); }
.srch-x {
  width: 26px; height: 26px; border-radius: 7px; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center; color: var(--rcp-ink-3); cursor: pointer;
}
.srch-x:hover { background: var(--rcp-canvas); color: var(--rcp-ink); }

.srch-kinds {
  display: flex; align-items: flex-end; gap: 20px; flex-shrink: 0;
  padding: 4px 18px 0 18px; border-bottom: 1px solid var(--rcp-border);
  overflow-x: auto; scrollbar-width: none;
}
.srch-kinds::-webkit-scrollbar { display: none; }
.srch-hit .srch-nm { gap: 10px; }
.srch-hit .srch-hit-ic { color: var(--rcp-accent); }
.srch-hit tr { background: var(--rcp-accent-soft); }
.srch-kinds .tab { gap: 6px; background: transparent; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; font-family: inherit; }
.srch-kinds .tab .ic { color: var(--rcp-ink-3); }
.srch-kinds .tab.on .ic { color: var(--rcp-accent); }
/* What another kind would find for the same query (console audit S4). */
.srch-kind-n {
  font-size: var(--rcp-text-sm); font-weight: 600; color: var(--rcp-ink-3);
  background: var(--rcp-surface-2); border-radius: var(--rcp-radius-pill); padding: 0 6px;
  font-variant-numeric: tabular-nums;
}
.srch-kinds .tab:disabled:not(.on) { color: var(--rcp-ink-4); cursor: default; }
.srch-kinds .tab:disabled:not(.on) .ic { color: var(--rcp-border); }
.srch-kinds .tab:disabled.on { cursor: default; }
.srch-kinds-sep { width: 1px; height: 18px; background: var(--rcp-border); align-self: center; margin: 0 -4px; flex-shrink: 0; }

.srch-bar {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap;
  padding: 8px 18px; background: var(--rcp-surface-2); border-bottom: 1px solid var(--rcp-border-soft);
  font-size: var(--rcp-text-base); color: var(--rcp-ink-2);
}
.srch-lab { font-size: var(--rcp-text-base); font-weight: 500; color: var(--rcp-ink-2); margin-right: 2px; }
/* Scope and filter pills: the reference's .chip (12px, 600, pill radius, hairline). */
.srch-scp {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; box-sizing: border-box;
  padding: 0 4px 0 10px; border: 1px solid var(--rcp-border); border-radius: var(--rcp-radius-pill);
  background: var(--rcp-surface); font-size: var(--rcp-text-base); font-weight: 600; white-space: nowrap; font-family: inherit; color: var(--rcp-ink);
}
.srch-scp .kd { color: var(--rcp-ink-3); font-weight: 500; }
.srch-scp .nm { font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.srch-scp .rm {
  width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; padding: 0;
  display: flex; align-items: center; justify-content: center; color: var(--rcp-ink-3); cursor: pointer;
}
.srch-scp .rm:hover { background: var(--rcp-canvas); color: var(--rcp-ink); }
.srch-scp.add { color: var(--rcp-ink-2); padding: 0 8px 0 10px; cursor: pointer; }
.srch-scp.add:hover, .srch-scp.add.on { border-color: var(--rcp-accent); color: var(--rcp-accent); }
.srch-scp.lock { background: var(--rcp-surface-3); padding-right: 10px; }
.srch-scp.lock .ic { color: var(--rcp-ink-3); }
.srch-scp.srch-scp-all { color: var(--rcp-ink-2); padding-right: 10px; }
.srch-scp-sep { color: var(--rcp-ink-4); font-size: var(--rcp-text-md); }
.srch-scp-anchor { position: relative; display: inline-flex; align-items: center; gap: 8px; }

.srch-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; width: 260px;
  max-height: 340px; overflow-y: auto;
  background: var(--rcp-surface); border: 1px solid var(--rcp-border-menu);
  border-radius: var(--rcp-radius-lg); box-shadow: var(--rcp-shadow-menu);
  padding: 6px; display: flex; flex-direction: column; gap: 1px;
}
.srch-menu .mi { border: 0; background: transparent; cursor: pointer; font-family: inherit; }
.srch-scope-q {
  display: flex; align-items: center; gap: 8px; margin: 2px 2px 6px 2px; height: 32px; padding: 0 10px;
  border: 1px solid var(--rcp-accent); box-shadow: 0 0 0 3px var(--rcp-accent-soft); border-radius: var(--rcp-radius-sm);
  color: var(--rcp-accent);
}
.srch-scope-q input { flex-grow: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--rcp-text-md); color: var(--rcp-ink); }
.srch-opt-t { display: block; }
.srch-opt-s { display: block; font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); }
.srch-opt-note { font-size: var(--rcp-text-base); color: var(--rcp-ink-3); padding: 8px; }

/* The filters row sits right under the scope row, as one band. */
.srch-bar:has(+ .srch-bar-flt) { border-bottom: 0; padding-bottom: 4px; }
.srch-bar + .srch-bar-flt { padding-top: 4px; }
.srch-flt { display: flex; flex-wrap: wrap; gap: 8px; }
/* *Filters* stays beside the selects when they wrap, on their first line (G-50). */
.srch-bar-flt { flex-wrap: nowrap; align-items: flex-start; }
.srch-bar-flt > .srch-lab { flex-shrink: 0; line-height: 26px; }
.srch-bar-flt > .srch-flt { flex: 1 1 0; min-width: 0; }
/* *Refresh* at the end of the filters row (`refresh: true`). */
.srch-bar-flt .srch-refresh { margin-left: auto; }
/* A table's grouped chips as selects (ContentTab toolbar). */
.tbl-flt label { height: var(--rcp-control-h); font-size: var(--rcp-text-md); }
.srch-flt label {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; box-sizing: border-box; position: relative;
  padding: 0 10px; border: 1px solid var(--rcp-border); border-radius: var(--rcp-radius-pill);
  background: var(--rcp-surface); font-size: var(--rcp-text-base); font-weight: 500; color: var(--rcp-ink-2); white-space: nowrap;
}
.srch-flt-multi { position: relative; display: inline-flex; }
.srch-flt-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; box-sizing: border-box;
  padding: 0 10px; border: 1px solid var(--rcp-border); border-radius: var(--rcp-radius-pill);
  background: var(--rcp-surface); font: inherit; font-size: var(--rcp-text-base); font-weight: 500; color: var(--rcp-ink-2); white-space: nowrap; cursor: pointer;
}
.srch-flt-btn b { font-weight: 700; color: var(--rcp-ink); }
.srch-flt-btn.on { border-color: var(--rcp-accent); }
.srch-flt-menu { width: 220px; }
.srch-check {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--rcp-radius-sm);
  font-size: var(--rcp-text-md); color: var(--rcp-ink); cursor: pointer;
}
.srch-check:hover { background: var(--rcp-canvas); }
.srch-check input { margin: 0; accent-color: var(--rcp-accent); }
/* The select loses the browser's arrows; the pill draws the reference's small chevron. */
.srch-flt select {
  /* not as wide as its longest option (G-50): the chosen one is cut with an ellipsis */
  max-width: 200px; text-overflow: ellipsis;
  appearance: none; -webkit-appearance: none; padding: 0 14px 0 0; margin: 0;
  border: 0; outline: 0; background: transparent; font: inherit; font-weight: 700; color: var(--rcp-ink); cursor: pointer;
}
.srch-flt label:has(select)::after {
  content: ""; position: absolute; right: 11px; top: 50%; width: 5px; height: 5px; margin-top: -4px;
  border-right: 1.5px solid var(--rcp-ink-3); border-bottom: 1.5px solid var(--rcp-ink-3);
  transform: rotate(45deg); pointer-events: none;
}
/* A date filter: the input sits inside the pill, without the global input's box. */
.srch-flt input[type="date"] {
  height: auto; padding: 0 4px 0 0; border: 0; border-radius: 0; outline: 0; background: transparent;
  font: inherit; font-weight: 600; color: var(--rcp-ink); cursor: pointer;
}
.srch-flt label:focus-within { border-color: var(--rcp-accent); }

.srch-body { flex-grow: 1; min-height: 0; overflow-y: auto; overflow-x: auto; position: relative; }
.srch-tbl { border-collapse: collapse; width: 100%; font-size: var(--rcp-text-md); table-layout: fixed; }
.srch-tbl th {
  position: sticky; top: 0; z-index: 1; background: var(--rcp-surface-2);
  text-align: left; font-weight: 700; color: var(--rcp-ink-2); font-size: var(--rcp-text-base);
  padding: 0 10px; height: 34px; border-bottom: 1px solid var(--rcp-border); white-space: nowrap;
}
.srch-tbl th:first-child, .srch-tbl td:first-child { padding-left: 18px; }
.srch-tbl th:last-child, .srch-tbl td:last-child { padding-right: 18px; }
.srch-tbl th.nosort { color: var(--rcp-ink-3); font-weight: 500; }
.srch-tbl th.sorted, .srch-tbl th.sorted .srch-sort { color: var(--rcp-ink); }
.srch-sort {
  display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
}
.srch-sort .ic { color: var(--rcp-ink-4); }
.srch-tbl th.sortable:hover { background: var(--rcp-surface-3); }
.srch-tbl th.sortable:hover .srch-sort .ic { color: var(--rcp-ink-2); }
.srch-tbl th.sorted .srch-sort .ic { color: var(--rcp-accent); }
.srch-tbl td {
  padding: 0 10px; height: 40px; border-bottom: 1px solid var(--rcp-border-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--rcp-ink);
}
.srch-tbl td.mut { color: var(--rcp-ink-2); }
.srch-tbl td.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--rcp-text-base); }
.srch-tbl td.num, .srch-tbl th.num { font-variant-numeric: tabular-nums; text-align: right; }
/* A chart in a detail (`chart:` of a detail, console U-9): the trend of one measure. */
.dtl-chart { padding: 4px 16px 8px 16px; border-bottom: 1px solid var(--rcp-border-soft); }
.srch-tbl tbody tr { cursor: pointer; }
/* A group of rows (`group:` of a row, console U-8): a header where it starts, folded in
   the browser; a level per class, so a folded panel stays folded inside a day reopened. */
.srch-tbl tbody tr.srch-grp { cursor: default; }
.srch-tbl tbody tr.srch-grp td { height: 34px; padding: 0; background: var(--rcp-surface-2); }
.srch-tbl tbody tr.srch-grp-1 td { background: var(--rcp-surface); }
.srch-tbl tbody tr.srch-grp:hover td { background: var(--rcp-surface-3); }
.srch-grp-b {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 100%;
  padding: 0 18px; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; color: var(--rcp-ink);
}
.srch-grp-1 .srch-grp-b { padding-left: 38px; }
.srch-grp-t { font-weight: 700; }
.srch-grp-1 .srch-grp-t { font-weight: 600; }
.srch-grp-n { color: var(--rcp-ink-2); }
.srch-grp-c {
  margin-left: auto; font-size: var(--rcp-text-sm); font-weight: 600; color: var(--rcp-ink-2);
  background: var(--rcp-surface-3); padding: 0 8px; border-radius: var(--rcp-radius-pill);
}
.srch-grp-ic { color: var(--rcp-ink-3); transition: transform .12s ease; }
.srch-grp.is-folded .srch-grp-ic { transform: rotate(-90deg); }
.srch-tbl tbody tr.fold-0, .srch-tbl tbody tr.fold-1, .srch-tbl tbody tr.fold-2 { display: none; }
/* A row inside groups starts where its innermost group's title does (above the first-cell
   padding of `.srch-tbl` and of `.srch-inline`). */
.srch-tbl tbody tr[data-row] td.srch-ind-1 { padding-left: 38px; }
.srch-tbl tbody tr[data-row] td.srch-ind-2 { padding-left: 58px; }
.srch-tbl tbody tr[data-row] td.srch-ind-3 { padding-left: 78px; }
.srch-tbl tbody tr:hover td { background: var(--rcp-surface-2); }
.srch-tbl tbody tr.cur td, .srch-tbl tbody tr.picked td { background: var(--rcp-accent-soft); }
.srch-nm { display: flex; align-items: center; gap: 10px; min-width: 0; }
.srch-nm .av { width: 28px; height: 28px; border-radius: var(--rcp-radius-sm); font-size: var(--ty2-xs, 11px); }
/* A type icon where a row is not a person (`avatar: :icon`, U-21). */
.srch-tic {
  width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--rcp-radius-sm); background: var(--rcp-surface-3); color: var(--rcp-ink-2);
}
/* The kind beside a uid hit's name: what the id turned out to be. */
.srch-hit-kind { flex-shrink: 0; font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); }
.srch-nm-t { font-weight: 600; color: var(--rcp-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.srch-nm-t mark { background: var(--rcp-find-mark); color: var(--rcp-ink); border-radius: 3px; padding: 0 1px; margin: 0 -1px; }
/* A link inside a listing's cell (`kind: :link`): goes where it says, not to the row. */
a.srch-lnk { font-weight: 600; color: var(--rcp-ink); text-decoration: none; }
a.srch-lnk:hover { color: var(--rcp-accent); text-decoration: underline; }
/* A timeline item with `path:`: its title opens that record. */
a.evt-lnk { display: block; color: var(--rcp-ink); text-decoration: none; }
a.evt-lnk:hover { color: var(--rcp-accent); text-decoration: underline; }
.srch-none { color: var(--rcp-ink-4); }
.srch-ra { text-align: right; }
.srch-ra .btn.ghost { width: 28px; height: 28px; padding: 0; justify-content: center; visibility: hidden; }
.srch-tbl tbody tr:hover .srch-ra .btn.ghost, .srch-tbl tbody tr.cur .srch-ra .btn.ghost { visibility: visible; }
/* The row's own buttons and its ··· (a listing's `row_actions`, `row_menu?`). */
.srch-ra-b { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
/* Tooltips as in `.tbl .row-a`: above and right-aligned, clear of the body's scroll edges. */
.srch-ra .btn.ghost .tip { top: auto; bottom: calc(100% + 4px); left: auto; right: 0; transform: none; }
.srch-ra .menu-trigger { padding: 6px; visibility: hidden; }
.srch-tbl tbody tr:hover .srch-ra .menu-trigger,
.srch-tbl tbody tr.cur .srch-ra .menu-trigger,
.srch-ra .menu-trigger[aria-expanded="true"] { visibility: visible; }
/* What of the row's menu is in sight (`row_buttons`). */
.srch-rb .btn { height: 28px; padding: 0 10px; font-size: var(--rcp-text-sm); white-space: nowrap; }
/* The ticks of a listing with bulk actions, as a table's (`.tbl .ck`). */
.srch-tbl .ck { padding: 8px 4px 8px 16px; }
.srch-tbl .ck input { width: 16px; height: 16px; margin: 0; display: block; accent-color: var(--rcp-accent); cursor: pointer; }
.srch-tbl tbody tr.sel td { background: var(--rcp-accent-soft); }
/* The listing's bar: its buttons on the right, or the bulk bar while rows are ticked. */
.srch-acts { justify-content: flex-end; min-height: 52px; box-sizing: border-box; padding-top: 8px; padding-bottom: 8px; }
.srch-acts .sel-bar { margin-right: auto; }
.srch-acts-r { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* The acts in the search row (console G-2): right of the input, the row's own height. */
.srch-in .srch-acts-r { flex-shrink: 0; }
/* An empty listing or table repeats its acts inside the message (console U-19). */
/* A chart card with too few points for a chart: one line instead (console G-4). */
.chart-text { margin: 0; color: var(--rcp-ink-2); }
.srch-empty-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.col-empty-acts { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: 12px; vertical-align: middle; }

/* A deadline as a countdown (`MallaUi.Due`): red once overdue, amber when soon. */
.due { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--rcp-ink-2); }
.due.due-warn { color: var(--rcp-warn-text); font-weight: 600; }
.due.due-critical { color: var(--rcp-critical); font-weight: 600; }
.srch-radio { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--rcp-ink-4); box-sizing: border-box; vertical-align: middle; }
.srch-radio.on { border: 5px solid var(--rcp-accent); }

.srch-note {
  display: flex; align-items: flex-start; gap: 8px; margin: 0;
  padding: 10px 18px; font-size: var(--rcp-text-sm); line-height: 1.45;
  color: var(--rcp-ink-2); background: var(--rcp-accent-soft);
  border-bottom: 1px solid var(--rcp-border-soft);
}
.srch-note .ic { color: var(--rcp-accent); margin-top: 1px; }

.srch-more {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; font-size: var(--ty2-base, 12.5px); color: var(--rcp-ink-2);
}
.srch-hint { font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); padding: 12px 18px; margin: 0; }
.srch-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 48px 24px; text-align: center;
}
.srch-empty .t { font-size: var(--rcp-text-lg); font-weight: 600; }
.srch-empty .d { font-size: var(--ty2-base, 12.5px); color: var(--rcp-ink-2); line-height: 1.5; max-width: 380px; }
.srch-empty-ic { width: 28px; height: 28px; color: var(--rcp-ink-4); }
.srch-empty-ic.err { color: var(--rcp-critical); }
.srch-empty .btn.sm { height: 30px; padding: 6px 10px; font-size: var(--ty2-base, 12.5px); margin-top: 4px; }

.srch-recents { padding-top: 6px; }
.srch-recents .mlab { padding: 12px 18px 4px 18px; }
.srch-rec {
  display: flex; align-items: center; gap: 10px; padding: 8px 18px;
  font-size: var(--rcp-text-md); color: var(--rcp-ink); text-decoration: none;
}
.srch-rec:hover, .srch-rec:focus-visible { background: var(--rcp-surface-2); outline: none; }
.srch-rec .av { width: 26px; height: 26px; border-radius: var(--rcp-radius-sm); font-size: var(--ty2-xs, 10.5px); color: var(--rcp-on-accent); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.srch-rec-t { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-rec-k { font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); }
/* Picker mode: a recent is a choice, a button as wide as the row. */
button.srch-rec { width: 100%; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.srch-rec.picked { background: var(--rcp-accent-soft); }

.srch-f {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0;
  height: 40px; padding: 0 18px; border-top: 1px solid var(--rcp-border-soft);
  background: var(--rcp-surface-2); font-size: var(--rcp-text-base); color: var(--rcp-ink-2);
}
.srch-f.act { height: 52px; }
.srch-f b { color: var(--rcp-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.srch-f-l { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srch-pending { display: inline-flex; align-items: center; gap: 5px; color: var(--rcp-ink-3); vertical-align: middle; }
.srch-mut { color: var(--rcp-ink-3); }
.srch-keys { display: flex; align-items: center; gap: 14px; color: var(--rcp-ink-3); white-space: nowrap; }
.srch-keys > span { display: inline-flex; align-items: center; gap: 4px; }
.srch-f-act { display: flex; gap: 8px; }
@media (max-width: 1100px) { .srch-keys { display: none; } }

/* The same screen inside a tab (`browse:`, MallaUi.ContentTab): a card in
   the page's flow, its kind tabs on top, no scrim and no inner scroll. */
.srch-layer.srch-inline { position: static; inset: auto; z-index: auto; }
/* A fixed window: the rows scroll inside it, so loading a page never moves
 * what comes after the listing. */
.srch-inline .srch {
  position: static; left: auto; top: auto; transform: none;
  width: auto; max-width: none; height: 560px; max-height: none;
  border: 1px solid var(--rcp-border); box-shadow: none; overflow: visible;
}
.srch-inline .srch-kinds { order: -1; padding: 6px 16px 0 16px; }
/* A folded listing (`limit:`): as tall as its few rows, no window to scroll. */
.srch-inline.srch-folded .srch { height: auto; }
/* A short window (`window: :short`, a block under another content): as tall as its rows up
   to a few of them, the rest scrolled and paged inside. */
.srch-inline.srch-short .srch { height: auto; max-height: 340px; }
.srch-inline .srch-in { height: 44px; padding: 0 16px; }
.srch-inline .srch-in input { font-size: var(--rcp-text-md); }
.srch-inline .srch-in-ic { color: var(--rcp-ink-3); }
.srch-inline .srch-tbl th:first-child, .srch-inline .srch-tbl td:first-child { padding-left: 16px; }
.srch-inline .srch-tbl th:last-child, .srch-inline .srch-tbl td:last-child { padding-right: 16px; }
.srch-inline .srch-f { border-radius: 0 0 var(--rcp-radius-xl) var(--rcp-radius-xl); }

/* ------------------------------------------------------------ tree column */
/* MallaUi.Tree, pixels from ui/reference/directory-tree.html: the column as
 * an expandable tree. 18px per level, 1px guides, a chevron slot that is a
 * lock when the node may not be listed. */
.column-tree { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
.tree-col .col-h { padding: 18px 12px 4px 16px; }
.tree-col .col-hb { gap: 0; }
.tree-col .col-search { margin: 8px 16px 0 16px; }
.col-search-x {
  width: 20px; height: 20px; border-radius: var(--rcp-radius-xs); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--rcp-surface-3); color: var(--rcp-ink-2);
}
/* `search_clear/1`: only while the box holds text. */
.search-x { border: none; padding: 0; cursor: pointer; }
input:placeholder-shown ~ .search-x { display: none; }
.col-meta {
  display: flex; justify-content: space-between;
  font-size: var(--rcp-text-sm); color: var(--rcp-ink-3);
  padding: 10px 20px 2px 20px;
}
.col-meta b { color: var(--rcp-ink-2); font-weight: 700; }
.tree-ctx {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--rcp-text-sm); color: var(--rcp-ink-3);
  padding: 12px 20px 0 20px;
  white-space: nowrap; overflow: hidden;
}
.tree-ctx .ic { color: var(--rcp-ink-mute); width: 12px; height: 12px; }
.tree-ctx .sep { color: var(--rcp-ink-4); }
.tree-ctx-n { overflow: hidden; text-overflow: ellipsis; }

.tree { display: flex; flex-direction: column; padding: 8px; flex: 1; min-height: 0; overflow-y: auto; }
.tn {
  position: relative; flex-shrink: 0;
  display: flex; align-items: center; gap: 6px;
  height: 32px; box-sizing: border-box;
  padding-right: 8px; padding-left: calc(6px + var(--d, 0) * 18px);
  border-radius: 9px;
  font-size: var(--rcp-text-md); color: var(--rcp-ink);
  cursor: default;
}
.tn[phx-click] { cursor: pointer; }
.tn.two { height: 44px; align-items: flex-start; padding-top: 6px; }
.tn:hover { background: var(--rcp-surface-3); }
.tn.on { background: var(--rcp-accent-soft); }
.tn.on .tl { color: var(--rcp-accent); font-weight: 800; }
.tn:focus-visible { outline: 2px solid var(--rcp-accent); outline-offset: -2px; }
.tn .g { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rcp-border); }
.tn .g.path { background: var(--rcp-ink-4); }
.tw {
  width: 18px; height: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--rcp-ink-3); border-radius: 5px;
}
.tw[phx-click] { cursor: pointer; }
.tw[phx-click]:hover { color: var(--rcp-ink); background: var(--rcp-surface); }
.tw.lock { color: var(--rcp-ink-mute); }
.tw.lock .ic { width: 12px; height: 12px; stroke-width: 2; }
.ti {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--rcp-surface-3); color: var(--rcp-accent);
}
.ti.grp { background: var(--rcp-surface); color: var(--rcp-ink-2); box-shadow: 0 0 0 1px var(--rcp-border); }
.ti.off { background: var(--rcp-canvas); color: var(--rcp-ink-mute); }
.tb { flex: 1; min-width: 0; }
.tl {
  display: block; font-weight: 600; line-height: 20px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl.anc { font-weight: 700; }
.tl.ctxn { color: var(--rcp-ink-2); font-weight: 500; }
.tl.off { color: var(--rcp-ink-2); font-weight: 500; }
.tl mark {
  background: var(--rcp-highlight-soft); color: var(--rcp-ink);
  border-radius: 3px; padding: 0 1px; font-weight: 800;
  box-shadow: inset 0 -1.5px 0 var(--rcp-highlight-line);
}
.ts {
  display: block; font-size: var(--rcp-text-sm); line-height: 15px; font-style: italic; color: var(--rcp-ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tc { font-size: var(--rcp-text-sm); font-weight: 700; color: var(--rcp-ink-3); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.tn.on .tc { color: var(--rcp-accent); }
.tn .tag { font-size: var(--rcp-text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rcp-ink-3); flex-shrink: 0; }
.tn.two .dot { margin-top: 6px; }
/* ··· takes the dot's place on hover and focus, as in a column row. */
.tn .tn-menu { position: absolute; right: 4px; visibility: hidden; }
.tn .tn-menu .menu-trigger {
  width: 24px; height: 24px; padding: 0; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: var(--rcp-ink-2); background: var(--rcp-surface); box-shadow: 0 0 0 1px var(--rcp-border);
}
.tn.has-menu:hover .tn-menu, .tn.has-menu:focus-within .tn-menu, .tn.has-menu:focus .tn-menu { visibility: visible; }
.tn.has-menu:hover > .dot, .tn.has-menu:focus-within > .dot, .tn.has-menu:focus > .dot { visibility: hidden; }
.tn-more .lnk, .tn-retry .lnk { font: inherit; font-size: var(--rcp-text-base); font-weight: 700; color: var(--rcp-accent); cursor: pointer; text-decoration: none; background: none; border: 0; padding: 0; }
.tn-retry .tl { color: var(--rcp-warn-text); font-weight: 700; font-size: var(--rcp-text-base); }
.tn-retry .tw { color: var(--rcp-warn-text); }
.ti-sk { background: var(--rcp-surface-3); }
.sk { display: block; height: 9px; border-radius: 5px; background: var(--rcp-surface-3); }
.tree-sk .tn:hover { background: none; }
.tree-foot { padding: 10px 16px; font-size: var(--rcp-text-base); color: var(--rcp-ink-2); }

/* ------------------------------------------------------------- markdown */
/* MallaUi.Markdown: text nobody on the platform wrote (an LLM's answer).
 * From ui/reference/llm-chat.html (.md). */

.md { font-size: var(--rcp-text-lg); line-height: 1.55; color: var(--rcp-ink); overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md p { margin: 0 0 8px 0; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {
  font-family: var(--rcp-font-display); font-weight: 800; margin: 10px 0 6px 0;
}
.md h1 { font-size: var(--rcp-text-2xl); }
.md h2 { font-size: var(--ty2-xl, 16px); }
.md h3 { font-size: var(--rcp-text-xl); }
.md h4, .md h5, .md h6 { font-size: var(--rcp-text-lg); }
.md ul, .md ol { margin: 0 0 8px 0; padding-left: 20px; }
.md li { margin: 2px 0; }
.md blockquote {
  margin: 0 0 8px 0; padding: 6px 12px;
  border-left: 3px solid var(--rcp-border-menu); color: var(--rcp-ink-2); font-size: var(--rcp-text-md);
}
.md hr { border: none; border-top: 1px solid var(--rcp-border-soft); margin: 10px 0; }
.md a { color: var(--rcp-accent); text-decoration: none; }
.md a:hover { color: var(--rcp-accent-hover); text-decoration: underline; }
.md .md-ic {
  font-family: var(--rcp-font-mono); font-size: var(--rcp-text-base);
  background: var(--rcp-surface-3); padding: 1px 5px; border-radius: var(--rcp-radius-xs);
}
.md .md-raw { color: var(--rcp-ink-2); font-family: var(--rcp-font-mono); font-size: var(--rcp-text-base); white-space: pre-wrap; }
.md .md-img {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--rcp-text-base); font-weight: 600; color: var(--rcp-ink-2);
  background: var(--rcp-surface-3); padding: 1px 8px; border-radius: var(--rcp-radius-xs);
}
.md .md-table { overflow-x: auto; margin: 4px 0 8px 0; }
.md table {
  font-size: var(--ty2-base, 12.5px); border: 1px solid var(--rcp-border); border-radius: var(--rcp-radius-md);
  border-collapse: separate; border-spacing: 0; overflow: hidden; min-width: 60%;
}
.md th, .md td { padding: 9px 16px; text-align: left; border-bottom: 1px solid var(--rcp-border-soft); }
.md th { font-weight: 600; color: var(--rcp-ink-2); background: var(--rcp-surface-2); }
.md tr:last-child td { border-bottom: none; }
.md .md-c { text-align: center; }
.md .md-r { text-align: right; }
.md-code { border-radius: var(--rcp-radius-md); overflow: hidden; border: 1px solid var(--rcp-border); margin: 4px 0 8px 0; }
.md-code-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 10px; background: var(--rcp-surface-3);
  font-size: var(--rcp-text-sm); font-weight: 700; color: var(--rcp-ink-2);
}
.md-copy { font-size: var(--rcp-text-sm); font-weight: 700; color: var(--rcp-ink-2); }
.md-copy:hover { color: var(--rcp-ink); }
.md-copy.copied { color: var(--rcp-ok); }
.md-code pre {
  margin: 0; padding: 10px 12px; background: var(--rcp-canvas);
  font-family: var(--rcp-font-mono); font-size: var(--rcp-text-sm); line-height: 1.5;
  overflow-x: auto;
}
.md-code .k, .md-code .kd, .md-code .kn, .md-code .kp, .md-code .kr, .md-code .kt { color: var(--rcp-code-keyword); }
.md-code .s, .md-code .s1, .md-code .s2, .md-code .sb, .md-code .sc, .md-code .sd,
.md-code .se, .md-code .sh, .md-code .si, .md-code .sx, .md-code .sr { color: var(--rcp-code-string); }
.md-code .ss, .md-code .nc, .md-code .no { color: var(--rcp-code-atom); }
.md-code .m, .md-code .mi, .md-code .mf, .md-code .mh, .md-code .mb { color: var(--rcp-code-number); }
.md-code .c, .md-code .c1, .md-code .cm, .md-code .cs, .md-code .ch { color: var(--rcp-code-comment); font-style: italic; }
.md-code .nf, .md-code .nb, .md-code .na { color: var(--rcp-code-function); }

/* ----------------------------------------------------------------- help */
/* The in-app Help (MallaUi.Help, the `article:` of MallaUi.ContentTab): a
 * section of the manual at reading width, its pictures framed like cards,
 * and a chapter's sections as links under it. */

.help-article { max-width: 860px; }
.help-article .md { font-size: var(--ty2-md, 14px); line-height: 1.6; }
.help-article .md table { min-width: 0; }
/* A measure of about 75 characters for the running text (G-38); tables and code keep the
   article's width. */
.help-article .md :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5) { max-width: 75ch; }
.md .md-fig { display: block; margin: 10px 0 14px 0; }
.md .md-fig img {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--rcp-border); border-radius: var(--rcp-radius-lg);
  box-shadow: var(--rcp-shadow-card); background: var(--rcp-surface);
}
.md .md-fig .md-cap { display: block; margin-top: 6px; font-size: var(--rcp-text-base); color: var(--rcp-ink-2); }
.help-links { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--rcp-border); }
.help-links h2 {
  font-family: var(--rcp-font-display); font-size: var(--rcp-text-xl); font-weight: 800; margin: 0 0 8px 0;
}
.help-links ul { margin: 0; padding-left: 20px; font-size: var(--rcp-text-lg); line-height: 1.7; }
.help-links a { color: var(--rcp-accent); text-decoration: none; }
.help-links a:hover { color: var(--rcp-accent-hover); text-decoration: underline; }

/* ----------------------------------------------------------------- chat */
/* MallaUi.ChatTab. From ui/reference/llm-chat*.html: the turns (.q / .a),
 * the composer and its chips, the model picker (.dd), attachments (.att). */

.tab-body:has(> .chat) { padding: 0; overflow: hidden; }
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-hero {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 0 24px 40px 24px; overflow-y: auto;
}
.chat-hero-t {
  font-family: var(--rcp-font-display); font-size: var(--ty2-kpi, 28px); font-weight: 800;
  letter-spacing: -0.015em; text-align: center;
}
.chat-hero .chat-composer { padding: 14px 14px 10px 16px; gap: 14px; border-radius: 22px; }
.chat-hero .chat-input { font-size: var(--rcp-text-xl); }
.chat-suggs { width: min(760px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chat-sugg {
  padding: 12px 14px; border-radius: 14px; border: 1px solid var(--rcp-border);
  background: var(--rcp-surface); text-align: left; display: flex; flex-direction: column;
}
.chat-sugg:hover { border-color: var(--rcp-border-menu); }
.chat-sugg-t { font-size: var(--rcp-text-md); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.chat-sugg-s { font-size: var(--ty2-base, 12.5px); color: var(--rcp-ink-2); margin-top: 3px; }
.chat-note { font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); text-align: center; }

.chat-conv { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 18px 24px 0 24px; }
.chat-conv-in { width: min(820px, 100%); display: flex; flex-direction: column; gap: 14px; padding-bottom: 12px; }
.chat-q-wrap { align-self: flex-end; display: flex; align-items: center; gap: 6px; max-width: 85%; }
.chat-q {
  background: var(--rcp-ink); color: var(--rcp-on-ink);
  font-size: var(--rcp-text-lg); line-height: 1.5; padding: 10px 14px;
  border-radius: 14px 14px 4px 14px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.chat-edit { padding: 4px; color: var(--rcp-ink-3); visibility: hidden; }
.chat-q-wrap:hover .chat-edit, .chat-edit:focus-visible { visibility: visible; }
.chat-a { font-size: var(--rcp-text-lg); line-height: 1.55; }
.chat-a-h { display: flex; align-items: center; gap: 8px; font-size: var(--rcp-text-base); font-weight: 700; color: var(--rcp-ink-2); margin-bottom: 6px; }
.chat-spark {
  width: 22px; height: 22px; border-radius: var(--rcp-radius-sm);
  background: var(--rcp-accent-soft); color: var(--rcp-accent);
  display: flex; align-items: center; justify-content: center;
}
.chat-sys { display: flex; align-items: center; gap: 10px; font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); }
.chat-sys::before, .chat-sys::after { content: ""; flex: 1; height: 1px; background: var(--rcp-border-soft); }
.chat-typing { display: inline-flex; gap: 4px; padding: 6px 0; }
.chat-pending { display: flex; align-items: center; gap: 12px; }

/* `@` suggestions and the typed-name warning, above the composer
 * (ui/reference/llm-data-chat.html). */
.chat-people {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px 0;
}
.chat-person {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px;
  border: 1px solid var(--rcp-border); border-radius: var(--rcp-radius-pill); background: var(--rcp-surface);
  font-size: var(--ty2-base, 12.5px); color: var(--rcp-ink-2);
}
.chat-person:hover { border-color: var(--rcp-border-menu); }
.chat-person b { color: var(--rcp-ink); font-weight: 700; }
.chat-person i, .chat-guard .btn i {
  width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--rcp-avatar-1); color: var(--rcp-on-accent); font-style: normal; font-size: var(--ty2-xs, 9px); font-weight: 800;
}
.chat-guard {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 8px 0; padding: 8px 12px;
  border-radius: var(--rcp-radius-lg); background: var(--rcp-warn-soft); font-size: var(--ty2-base, 12.5px); color: var(--rcp-ink-2);
}
.chat-guard-t { flex: 1; min-width: 200px; }
.chat-guard .btn { display: inline-flex; align-items: center; gap: 6px; }
.chat-stop { display: inline-flex; align-items: center; gap: 5px; }
.chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--rcp-ink-4); animation: chat-dot 1.2s infinite ease-in-out; }
.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.chat-failed {
  display: flex; align-items: center; gap: 8px; font-size: var(--ty2-base, 12.5px);
  color: var(--rcp-danger-text); background: var(--rcp-critical-soft);
  padding: 8px 12px; border-radius: var(--rcp-radius-sm);
}
.meta-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); }
.meta-row .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--rcp-ink-4); }
.meta-row .acts { margin-left: auto; display: flex; gap: 2px; }
.meta-row .acts .btn.ghost { padding: 4px; width: auto; height: auto; }

/* What the model looked up before answering (MallaUi.Chat `tools`), from
 * ui/reference/llm-data-chat.html (.tools / .tool / .tool-x). */
.chat-tools {
  border: 1px solid var(--rcp-border); border-radius: var(--rcp-radius-lg); background: var(--rcp-surface-2);
  font-size: var(--ty2-base, 12.5px); overflow: hidden; margin-bottom: 10px;
}
.chat-tool + .chat-tool { border-top: 1px solid var(--rcp-border-soft); }
.chat-tool summary {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  color: var(--rcp-ink-2); cursor: pointer; list-style: none;
}
.chat-tool summary::-webkit-details-marker { display: none; }
.chat-tool summary b { color: var(--rcp-ink); font-weight: 700; }
.chat-tool-i { display: inline-flex; color: var(--rcp-ok); }
.chat-tool-i.bad { color: var(--rcp-danger-text); }
.chat-tool-s { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-tool-r { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); white-space: nowrap; }
.chat-tool-r .mono { font-family: var(--rcp-font-mono); }
.chat-tool[open] .chat-tool-r svg { transform: rotate(180deg); }
.chat-tool-x { padding: 4px 12px 12px 34px; border-top: 1px solid var(--rcp-border-soft); background: var(--rcp-surface); }
.chat-tool-doc {
  margin: 8px 0 0 0; padding: 10px 12px; border-radius: var(--rcp-radius-md); background: var(--rcp-canvas);
  font-family: var(--rcp-font-mono); font-size: var(--rcp-text-sm); line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.chat-tool-full { max-height: 420px; overflow: auto; white-space: pre; }
.chat-tool-apply { background: var(--rcp-accent-soft); }
.chat-tool-apply .btn { margin-left: auto; white-space: nowrap; }
.chat-tool-note .btn { margin-left: auto; white-space: nowrap; }
.chat-alt {
  margin: 8px 0 0 0; padding: 6px 12px; border: 1px dashed var(--rcp-border); border-radius: var(--rcp-radius-lg);
  font-size: var(--ty2-base, 12.5px); color: var(--rcp-ink-2);
}
.chat-alt summary { cursor: pointer; font-weight: 700; }
.chat-alt .md { margin-top: 6px; color: var(--rcp-ink); }
.chat-tool-note {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 8px 12px;
  border-radius: var(--rcp-radius-md); background: var(--rcp-warn-soft); color: var(--rcp-ink-2); font-size: var(--rcp-text-base);
}

/* A person or a place named in an answer (MallaUi.Markdown.chip/1). */
.md .md-pc {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: baseline;
  padding: 0 7px 0 2px; border-radius: var(--rcp-radius-pill); background: var(--rcp-surface-3);
  font-weight: 700; color: var(--rcp-ink); text-decoration: none; white-space: nowrap;
}
.md a.md-pc:hover { color: var(--rcp-ink); background: var(--rcp-accent-soft); text-decoration: none; }
.md .md-pc i {
  width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--rcp-avatar-1); color: var(--rcp-on-accent); font-style: normal; font-size: var(--ty2-xs, 8.5px); font-weight: 800;
}
.md .md-pc.restricted { color: var(--rcp-ink-3); font-weight: 600; }
.md .md-pc.restricted i { background: var(--rcp-ink-4); }

.chat-atts { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-conv .chat-atts { align-self: flex-end; justify-content: flex-end; }
.chat-att {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 8px; border: 1px solid var(--rcp-border);
  border-radius: var(--rcp-radius-lg); background: var(--rcp-surface); min-width: 0; max-width: 280px;
}
.chat-att.bad { border-color: var(--rcp-critical-soft); background: var(--rcp-critical-soft); }
.chat-att-b { display: flex; flex-direction: column; min-width: 0; }
.chat-att-n { font-size: var(--ty2-base, 12.5px); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-att-s { font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); white-space: nowrap; }
.chat-att.bad .chat-att-s { color: var(--rcp-danger-text); }
.chat-att-x { color: var(--rcp-ink-3); margin-left: 4px; display: inline-flex; }
.chat-fi {
  width: 34px; height: 40px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px;
  font-size: var(--ty2-xs, 9.5px); font-weight: 800; color: var(--rcp-on-accent); background: var(--rcp-avatar-3);
}
.chat-fi-pdf { background: var(--rcp-avatar-7); }
.chat-fi-image { background: var(--rcp-avatar-6); }
.chat-thumb { width: 40px; height: 40px; border-radius: var(--rcp-radius-sm); object-fit: cover; flex-shrink: 0; }
.chat-prog { display: block; width: 110px; height: 5px; border-radius: 99px; background: var(--rcp-surface-3); margin-top: 6px; overflow: hidden; }
.chat-prog i { display: block; height: 100%; background: var(--rcp-accent); }

.chat-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 24px 12px 24px; }
.chat-composer {
  width: min(820px, 100%); display: flex; flex-direction: column; gap: 8px;
  background: var(--rcp-surface); border: 1px solid var(--rcp-border-menu);
  border-radius: var(--rcp-radius-2xl); padding: 10px 12px; box-shadow: var(--rcp-shadow-composer);
}
.chat-hero .chat-composer { width: min(760px, 100%); }
.chat-composer.phx-drop-target-active { border-color: var(--rcp-accent); box-shadow: 0 0 0 3px var(--rcp-accent-soft); }
.chat-input {
  border: none; outline: none; resize: none; background: none; padding: 0;
  font: inherit; font-size: var(--rcp-text-lg); line-height: 1.5; color: var(--rcp-ink); max-height: 240px;
}
.chat-input::placeholder { color: var(--rcp-ink-3); }
.chat-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chat-bar-r { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); }
.chat-clip { padding: 4px; width: auto; height: auto; cursor: pointer; color: var(--rcp-ink-2); }
.chat-file { display: none; }
.chat-send {
  width: 30px; height: 30px; border-radius: var(--rcp-radius-md);
  background: var(--rcp-accent); color: var(--rcp-on-accent);
  display: flex; align-items: center; justify-content: center;
}
.chat-send:disabled { opacity: .4; cursor: default; }
.chat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--rcp-text-base); font-weight: 700; padding: 3px 9px; border-radius: var(--rcp-radius-pill);
  border: 1px solid var(--rcp-border); color: var(--rcp-ink); background: var(--rcp-surface);
  white-space: nowrap; max-width: 320px;
}
.chat-chip .lbl { color: var(--rcp-ink-3); font-weight: 600; }
.chat-chip-v { overflow: hidden; text-overflow: ellipsis; }
.chat-chip:hover { border-color: var(--rcp-border-menu); }
.chat-reads {
  font-size: var(--ty2-xs, 10.5px); font-weight: 700; color: var(--rcp-ok);
  background: var(--rcp-ok-soft); padding: 1px 6px; border-radius: var(--rcp-radius-xs);
}
.chat-warn {
  display: flex; align-items: center; gap: 8px; font-size: var(--rcp-text-base);
  background: var(--rcp-warn-soft); color: var(--rcp-ink); padding: 7px 12px; border-radius: var(--rcp-radius-md);
}
.chat-warn .ic { color: var(--rcp-warn); }
.chat-editing { display: flex; align-items: center; gap: 6px; font-size: var(--rcp-text-sm); font-weight: 700; color: var(--rcp-accent); }
.chat-editing button { margin-left: auto; font-size: var(--rcp-text-sm); font-weight: 700; color: var(--rcp-ink-2); }
.chat-instr { width: min(820px, 100%); }
.chat-instr form {
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  border: 1px solid var(--rcp-border); border-radius: 14px; background: var(--rcp-surface-2);
}
.chat-instr-l { font-size: var(--rcp-text-base); font-weight: 700; color: var(--rcp-ink-2); }
.chat-instr-a { display: flex; justify-content: flex-end; gap: 8px; }

.chat-models { width: 400px; padding: 6px; left: 0; max-height: 420px; overflow-y: auto; }
.chat-models.up { top: auto; bottom: calc(100% + 4px); }
.chat-models-g {
  font-size: var(--ty2-xs, 10.5px); font-weight: 700; color: var(--rcp-ink-3);
  letter-spacing: .04em; text-transform: uppercase; padding: 8px 10px 4px 10px;
}
.chat-model { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--rcp-radius-sm); text-align: left; }
.chat-model:hover { background: var(--rcp-canvas); }
.chat-model.on { background: var(--rcp-accent-soft); }
.chat-model:disabled { opacity: .5; cursor: default; }
.chat-model-b { display: flex; flex-direction: column; min-width: 0; }
.chat-model-n { font-size: var(--rcp-text-md); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.chat-model-def { font-size: var(--ty2-xs, 11px); font-weight: 700; color: var(--rcp-accent); }
.chat-model-d { font-size: var(--rcp-text-sm); color: var(--rcp-ink-2); }
.chat-model-p { margin-left: auto; font-size: var(--rcp-text-sm); color: var(--rcp-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .chat-suggs { grid-template-columns: 1fr; }
  .chat-models { width: min(400px, calc(100vw - 32px)); }
  .chat-conv, .chat-foot { padding-left: 16px; padding-right: 16px; }
}

/* Gallery (ContentTab `gallery:`): files as tiles, a picture or a file icon. */
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.gal-i {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  color: var(--rcp-ink); text-decoration: none;
}
.gal-p {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--rcp-radius-md); background: var(--rcp-surface-3); color: var(--rcp-ink-3);
}
.gal-p img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-t {
  font-size: var(--rcp-text-sm); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gal-n { font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); overflow-wrap: anywhere; }

/* Calendar (ContentTab `calendar:`, MallaUi.Calendar): a day, week or month of events. */
.ag { display: flex; flex-direction: column; }
.ag-main { min-width: min(100%, 720px); flex: 1 1 720px; display: flex; flex-direction: column; }
.ag.ag-with-aside { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.ag-aside { width: 270px; flex: 1 1 270px; max-width: 100%; padding: 12px 16px 12px 0; display: flex; flex-direction: column; gap: 12px; }
.ag-tray { border: 1px solid var(--rcp-border); border-radius: 14px; background: var(--rcp-surface); padding: 12px 14px; }
.ag-tray-t { margin: 0 0 4px; font-size: var(--rcp-text-md); font-weight: 700; display: flex; gap: 8px; align-items: baseline; }
.ag-tray-n { font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); font-weight: 600; }
.ag-tray-s { margin: 0 0 8px; font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); }
.ag-tray-i {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; margin-top: 6px;
  border: 1px dashed var(--rcp-border-menu, var(--rcp-border)); border-radius: var(--rcp-radius-md); background: var(--rcp-surface-2);
  font-size: var(--rcp-text-sm);
}
.ag-tray-i b { font-weight: 700; color: var(--rcp-ink); }
.ag-tray-i span { color: var(--rcp-ink-3); }
.ag-tray-i:hover { background: var(--rcp-accent-soft); }
/* An event that can be moved (ui/reference/calendar-day-lanes.html): the
   original dimmed, its copy where it lands, a label saying where and when. */
.ag-ev[data-move="true"] { cursor: grab; touch-action: none; user-select: none; }
.ag-ev.dragging { opacity: .4; }
.ag-ev.ag-ghost {
  z-index: 5; pointer-events: none; cursor: grabbing; overflow: visible;
  box-shadow: 0 0 0 2px var(--rcp-accent), var(--rcp-shadow-menu);
}
.ag-ev.ag-ghost.pending { opacity: .75; box-shadow: 0 0 0 2px var(--rcp-accent); }
.ag-tip {
  position: absolute; left: 4px; bottom: calc(100% + 4px); white-space: nowrap;
  padding: 2px 8px; border-radius: var(--rcp-radius-xs); background: var(--rcp-ink); color: var(--rcp-on-ink);
  font-size: var(--rcp-text-xs); font-weight: 700;
}
.ag-ghost.pending .ag-tip { display: none; }
body.ag-moving, body.ag-moving * { cursor: grabbing !important; user-select: none; }
.ag-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.ag-nav { display: flex; align-items: center; gap: 6px; }
.ag-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; min-width: 30px; padding: 0 10px;
  border: 1px solid var(--rcp-border); border-radius: var(--rcp-radius-md); background: var(--rcp-surface);
  font-size: var(--rcp-text-md); font-weight: 700; color: var(--rcp-ink-2); cursor: pointer;
}
.ag-btn:hover { color: var(--rcp-ink); background: var(--rcp-surface-2); }
.ag-range { margin-left: 8px; font-family: var(--rcp-font-display); font-weight: 800; font-size: var(--rcp-text-lg); color: var(--rcp-ink); }
.ag-acts { display: flex; align-items: center; gap: 8px; }
.ag-seg { display: inline-flex; border: 1px solid var(--rcp-border); border-radius: var(--rcp-radius-md); overflow: hidden; background: var(--rcp-surface); }
.ag-seg-b {
  padding: 6px 12px; border: 0; border-left: 1px solid var(--rcp-border); background: none;
  font-size: var(--rcp-text-md); font-weight: 700; color: var(--rcp-ink-2); cursor: pointer;
}
.ag-seg-b:first-child { border-left: 0; }
.ag-seg-b.on { background: var(--rcp-accent-soft); color: var(--rcp-accent); }

.ag-cal { display: flex; flex-direction: column; border-top: 1px solid var(--rcp-border); overflow-x: auto; scrollbar-width: thin; }
.ag-h { display: flex; border-bottom: 1px solid var(--rcp-border); background: var(--rcp-surface-2); min-width: 640px; }
.ag-tz {
  width: 52px; flex-shrink: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px;
  font-size: var(--rcp-text-xs); font-weight: 700; color: var(--rcp-ink-3);
}
.ag-d { flex: 1; min-width: 0; padding: 8px 10px; border-left: 1px solid var(--rcp-border-soft); }
.ag-w { font-size: var(--rcp-text-sm); font-weight: 700; color: var(--rcp-ink-3); text-transform: uppercase; letter-spacing: .04em; }
.ag-dot { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 6px; vertical-align: 1px; }
.ag-n { display: flex; align-items: center; gap: 8px; font-family: var(--rcp-font-display); font-size: var(--rcp-text-xl); font-weight: 800; }
.ag-c { font-family: var(--rcp-font); font-size: var(--rcp-text-xs); font-weight: 700; color: var(--rcp-ink-3); }
button.ag-num {
  border: 0; background: none; margin: 0; padding: 0;
  font: inherit; color: inherit; line-height: inherit; cursor: pointer;
}
.ag-d.today .ag-num { background: var(--rcp-accent); color: var(--rcp-on-accent); border-radius: var(--rcp-radius-sm); padding: 0 6px; }
.ag-b { position: relative; display: flex; min-width: 640px; padding-top: 8px; }
.ag-hours { width: 52px; flex-shrink: 0; }
.ag-hours div {
  box-sizing: border-box; padding-right: 8px; text-align: right; transform: translateY(-6px);
  font-size: var(--rcp-text-xs); color: var(--rcp-ink-3); font-variant-numeric: tabular-nums;
}
.ag-day {
  position: relative; flex: 1; min-width: 0; border-left: 1px solid var(--rcp-border-soft);
  background-image: repeating-linear-gradient(to bottom, var(--rcp-border-soft) 0, var(--rcp-border-soft) 1px, transparent 1px, transparent var(--ag-hour));
}
.ag-day.today { background-color: var(--rcp-surface-2); }

/* An event: the fill says its state, the left bar who it is with. */
.ag-ev {
  position: absolute; box-sizing: border-box; overflow: hidden; z-index: 2;
  display: flex; flex-direction: column; border-radius: var(--rcp-radius-sm); padding: 4px 7px 4px 9px;
  font-size: var(--rcp-text-sm); line-height: 1.3; color: var(--rcp-ink); text-decoration: none;
  background: var(--rcp-accent-soft); border: 1px solid var(--rcp-border);
}
.ag-ev::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c, var(--rcp-accent)); }
.ag-ev:hover { box-shadow: 0 0 0 2px var(--rcp-accent); }
.ag-et { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-es { color: var(--rcp-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The moment (ui/reference/agenda-week.html): a line across today with a dot. */
.ag-now { position: absolute; left: 0; right: 0; height: 2px; margin-top: -1px; z-index: 3; pointer-events: none; background: var(--rcp-accent); }
.ag-now::before {
  content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--rcp-accent);
}
/* The card of an event (ui/reference/calendar-reminders.html, mark 2). */
div.ag-ev[role="button"] { cursor: pointer; }
div.ag-ev[role="button"]:focus-visible { outline: 2px solid var(--rcp-accent); outline-offset: 1px; }
.ag-peek {
  position: fixed; z-index: 60; visibility: hidden; width: 300px; max-width: calc(100vw - 16px);
  background: var(--rcp-surface); border: 1px solid var(--rcp-border); border-top: 3px solid var(--rcp-accent);
  border-radius: var(--rcp-radius-lg); box-shadow: var(--rcp-shadow-menu); font-size: var(--rcp-text-sm); color: var(--rcp-ink);
}
.ag-pk-h { display: flex; align-items: flex-start; gap: 8px; padding: 12px 12px 8px 14px; }
.ag-pk-hd { flex: 1; min-width: 0; }
.ag-pk-b {
  display: inline-block; margin-bottom: 4px; padding: 1px 8px; border-radius: var(--rcp-radius-pill);
  font-size: var(--rcp-text-xs); font-weight: 700; background: var(--rcp-accent-soft); color: var(--rcp-accent);
}
.ag-pk-b.t-prop { background: var(--rcp-surface-2); color: var(--rcp-ink-2); border: 1px dashed var(--rcp-ink-4); }
.ag-pk-b.t-done, .ag-pk-b.t-internal { background: var(--rcp-surface-3); color: var(--rcp-ink-2); }
.ag-pk-b.t-noshow { background: var(--rcp-critical-soft); color: var(--rcp-critical); }
.ag-pk-b.t-cancel { background: var(--rcp-surface-2); color: var(--rcp-ink-mute); }
.ag-pk-t { font-family: var(--rcp-font-display); font-size: var(--rcp-text-md); font-weight: 800; overflow-wrap: anywhere; }
.ag-pk-s { margin-top: 2px; color: var(--rcp-ink-2); }
.ag-pk-x { border: 0; background: none; padding: 2px; color: var(--rcp-ink-3); cursor: pointer; border-radius: var(--rcp-radius-xs); }
.ag-pk-x:hover { background: var(--rcp-surface-2); color: var(--rcp-ink); }
.ag-pk-rows { margin: 0; padding: 0 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.ag-pk-r { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; }
.ag-pk-r dt { color: var(--rcp-ink-3); }
.ag-pk-r dd { margin: 0; overflow-wrap: anywhere; }
.ag-pk-f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--rcp-border-soft); }
.ag-pk-open { margin-left: auto; }
/* A short event is one line: its time, then its title (ui/reference/calendar-week.html). */
.ag-ev.short { justify-content: center; padding-top: 0; padding-bottom: 0; }
.ag-tm { font-weight: 600; color: var(--rcp-ink-2); margin-right: 4px; font-variant-numeric: tabular-nums; }
.ag-ev.ext { outline: 1.5px dashed var(--c, var(--rcp-accent)); outline-offset: -2px; }
.ag-ev.t-done { background: var(--rcp-surface-2); }
.ag-ev.t-done .ag-et { color: var(--rcp-ink-2); }
.ag-ev.t-prop { background: var(--rcp-surface); border: 1.5px dashed var(--rcp-ink-4); }
.ag-ev.t-prop::before { display: none; }
.ag-ev.t-noshow { background: var(--rcp-critical-soft); }
.ag-ev.t-cancel { background: var(--rcp-surface); border-color: var(--rcp-border-soft); }
.ag-ev.t-cancel .ag-et, .ag-ev.t-cancel .ag-es { color: var(--rcp-ink-mute); text-decoration: line-through; }
.ag-ev.t-internal { background: var(--rcp-surface-3); }

.ag-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--rcp-border); font-size: var(--rcp-text-sm); color: var(--rcp-ink-2); }
.ag-sw { display: inline-block; width: 18px; height: 11px; margin-right: 5px; border-radius: 3px; box-sizing: border-box; vertical-align: -1px; background: var(--rcp-accent-soft); border: 1px solid var(--rcp-border); }
.ag-sw.t-done { background: var(--rcp-surface-2); }
.ag-sw.t-prop { background: var(--rcp-surface); border: 1.5px dashed var(--rcp-ink-4); }
.ag-sw.t-noshow { background: var(--rcp-critical-soft); }
.ag-sw.t-cancel { background: var(--rcp-surface); border-color: var(--rcp-border-soft); }
.ag-sw.t-internal { background: var(--rcp-surface-3); }
/* The swatch carries the event's left bar, as the cards it names: the fills alone are almost
   the page's colour (G-33). A proposal has no bar, as its card. */
.ag-sw:not(.t-prop) { border-left: 3px solid var(--rcp-accent); }

/* Month: a cell per day with its count and its first events. */
.ag-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--rcp-border); }
.ag-mw {
  padding: 8px 10px; background: var(--rcp-surface-2); border-bottom: 1px solid var(--rcp-border);
  font-size: var(--rcp-text-sm); font-weight: 700; color: var(--rcp-ink-3); text-transform: uppercase; letter-spacing: .04em;
}
.ag-mc {
  display: flex; flex-direction: column; gap: 3px; min-height: 92px; padding: 6px 8px; text-align: left;
  border: 0; border-right: 1px solid var(--rcp-border-soft); border-bottom: 1px solid var(--rcp-border-soft);
  background: var(--rcp-surface); color: var(--rcp-ink); cursor: pointer; font: inherit;
}
.ag-mc:hover { background: var(--rcp-surface-2); }
.ag-mc.out { color: var(--rcp-ink-mute); background: var(--rcp-surface-2); }
.ag-mc.today .ag-mn { background: var(--rcp-accent); color: var(--rcp-on-accent); border-radius: var(--rcp-radius-sm); padding: 0 6px; align-self: flex-start; }
.ag-mn { font-weight: 800; }
.ag-mcount { font-size: var(--rcp-text-xs); font-weight: 700; color: var(--rcp-ink-3); }
.ag-me {
  font-size: var(--rcp-text-xs); padding: 1px 6px; border-radius: var(--rcp-radius-xs); background: var(--rcp-accent-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ag-more { font-size: var(--rcp-text-xs); font-weight: 600; color: var(--rcp-ink-3); text-align: left; padding: 0 4px; }
.ag-day:focus-visible, .ag-ev:focus-visible { outline: 2px solid var(--rcp-accent); outline-offset: -2px; }
.ag-me.t-prop { background: var(--rcp-surface); border: 1px dashed var(--rcp-ink-4); }
.ag-me.t-noshow { background: var(--rcp-critical-soft); }
.ag-me.t-cancel { color: var(--rcp-ink-mute); text-decoration: line-through; }
.ag-me.t-done, .ag-me.t-internal { background: var(--rcp-surface-3); }

/* ---------------------------------------------------------- table detail */

/* A table whose rows open a detail (`detail?: true`): the table on the left,
   the detail of the picked row on the right (ui/reference/ext-patient.html). */
.tbl-wrap { min-width: 0; }
.tbl-scroll { overflow-x: auto; }
.tbl-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rcp-gap); align-items: start; }
.tbl-scroll.short { max-height: 34vh; overflow-y: auto; }
.srch-layer.srch-inline[data-detail="true"].has-detail .srch { height: 38vh; min-height: 260px; }
.tbl-scroll.short .tbl th { position: sticky; top: 0; z-index: 1; background: var(--rcp-surface); }
.tbl-detail { display: flex; flex-direction: column; gap: var(--rcp-gap); min-width: 0; }
/* A listing with `detail_side: true` (console U-11): the open row beside it, the listing
   down to its `side_cols`; narrower than 1100px the row takes the pane, with *Back*. */
.brw-wrap { display: contents; }
.brw-split.is-open {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--rcp-gap); align-items: start;
}
.brw-split.is-open .srch-layer.srch-inline[data-detail="true"].has-detail .srch { height: 560px; }
.brw-back { display: none; align-self: flex-start; }
@media (max-width: 1100px) {
  .brw-split.is-open { grid-template-columns: minmax(0, 1fr); }
  .brw-split.is-open > .srch-layer { display: none; }
  .brw-split.is-open .brw-back { display: inline-flex; }
}
.tbl tbody tr.pick { cursor: pointer; }
.tbl tbody tr.pick:hover td { background: var(--rcp-surface-2); }
.tbl tbody tr.pick.sel td { background: var(--rcp-accent-soft); }
.tbl tbody tr.pick:focus-visible { outline-offset: -2px; }
/* The title keeps its room (at least 220px): actions that do not fit beside
   it wrap among themselves, then under it, never squeeze it. */
.dtl-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px 6px 16px; }
.dtl-i {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--rcp-surface-3); color: var(--rcp-accent);
}
.dtl-hb { min-width: 0; flex: 1 1 220px; }
.dtl-a { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; flex: 0 1 auto; min-width: 0; }
.dtl-t { font-family: var(--rcp-font-display); font-size: var(--rcp-text-lg); font-weight: 800; }
.dtl-s { font-size: var(--rcp-text-base); color: var(--rcp-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtl-f { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 9px 12px; margin: 0; padding: 8px 16px 16px 16px; font-size: var(--rcp-text-md); }
.dtl-r { display: contents; }
.dtl-f dt { color: var(--rcp-ink-2); font-weight: 600; }
.dtl-f dd { margin: 0; color: var(--rcp-ink); min-width: 0; word-break: break-word; }
.dtl-f dd .mut { color: var(--rcp-ink-3); font-size: var(--rcp-text-base); }
.evts { display: flex; flex-direction: column; padding: 2px 0 8px 0; }
.evt { display: flex; gap: 10px; padding: 6px 0; font-size: var(--rcp-text-md); }
.evt-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--rcp-ink-4); }
.evt-dot.t-ok { background: var(--rcp-ok); }
.evt-dot.t-warn { background: var(--rcp-warn); }
.evt-dot.t-critical { background: var(--rcp-critical); }
.evt-b { min-width: 0; }
.evt-t { font-weight: 600; }
.evt-n { color: var(--rcp-ink-3); font-size: var(--rcp-text-base); }
.dtl-code { max-height: 260px; }
/* The JSON tree (`MallaUi.Components.JsonTree`): groups fold with <details>. */
.jt { border: 1px solid var(--rcp-border); border-radius: var(--rcp-radius-sm); background: var(--rcp-surface-2); }
.jt-bar { display: flex; gap: 4px; padding: 4px 8px; border-bottom: 1px solid var(--rcp-border-soft); }
.jt-b { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 0; background: none; font: inherit; font-size: var(--rcp-text-sm); color: var(--rcp-ink-2); border-radius: var(--rcp-radius-xs); cursor: pointer; }
.jt-b:hover { background: var(--rcp-surface-3); color: var(--rcp-ink); }
.jt-body { max-height: 420px; overflow: auto; padding: 8px 12px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--rcp-text-base); line-height: 1.55; }
.jt-g > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 6px; }
.jt-g > summary::-webkit-details-marker { display: none; }
.jt-g > summary::before { content: "▸"; color: var(--rcp-ink-3); width: 10px; flex: none; }
.jt-g[open] > summary::before { content: "▾"; }
.jt-c { margin-left: 14px; padding-left: 10px; border-left: 1px dashed var(--rcp-border); }
.jt-r { display: flex; gap: 6px; padding-left: 16px; }
.jt-k { color: var(--rcp-ink-2); }
.jt-sum { color: var(--rcp-ink-3); font-size: var(--rcp-text-sm); }
.jt-peek { color: var(--rcp-ink-3); font-size: var(--rcp-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jt-g[open] > summary .jt-peek { display: none; }
.jt-v { overflow-wrap: anywhere; }
.jt-str { color: var(--rcp-ink); }
.jt-num { color: var(--rcp-accent); }
.jt-bool, .jt-null { color: var(--rcp-ink-3); font-style: italic; }
.jt-cut { padding: 6px 0 0 16px; color: var(--rcp-ink-3); font-size: var(--rcp-text-sm); }
.dtl-v { margin: 0; padding: 4px 16px 12px 16px; font-size: var(--rcp-text-md); }
.dtl-vr { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--rcp-border-soft); }
.dtl-vr dt { color: var(--rcp-ink-2); font-weight: 600; }
.dtl-vr dd { margin: 0; min-width: 0; word-break: break-word; }
.dtl-vr dd button.link { color: var(--rcp-accent); background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; }
.dtl-vr dd button.link:hover { text-decoration: underline; }
.dtl-vh dt { color: var(--rcp-ink); }
.evt-c { margin-top: 4px; }
.evt-c summary { cursor: pointer; color: var(--rcp-accent); font-size: var(--rcp-text-base); }
.dtl-dl { display: inline-block; margin-top: 6px; color: var(--rcp-accent); font-size: var(--rcp-text-base); }
.tbl-bar-l .ag-seg { margin-right: 4px; }

/* the editor of a row's detail (ui/reference/notes-editor.html): sections as
   text areas that save while the user types */
.ed-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 16px; border-top: 1px solid var(--rcp-border-soft); }
.ed-notice { display: inline-flex; align-items: center; gap: 6px; font-size: var(--rcp-text-sm); font-weight: 600; color: var(--rcp-ink-2); }
.ed-save { margin-left: auto; font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); display: inline-flex; align-items: center; gap: 8px; }
.ed-save.ok { color: var(--rcp-ok); font-weight: 700; }
.ed-save.err { color: var(--rcp-critical); font-weight: 700; }
.ed-save button.link { color: var(--rcp-accent); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.ed-save button.link:hover { text-decoration: underline; }
.ed-secs { display: flex; flex-direction: column; gap: 8px; padding: 8px 16px 12px 16px; margin: 0; }
.ed-sec .sec-l { font-size: var(--rcp-text-sm); font-weight: 700; color: var(--rcp-ink-2); letter-spacing: .02em; margin-bottom: 3px; display: block; }
.ed-sec .sec-l .req { color: var(--rcp-critical); margin-left: 2px; }
.ed-sec .ta {
  display: block; width: 100%; min-height: 56px; box-sizing: border-box; resize: vertical;
  font: inherit; font-size: var(--rcp-text-md); line-height: 1.5; color: var(--rcp-ink);
  padding: 7px 10px; border: 1px solid var(--rcp-border); border-radius: var(--rcp-radius-md); background: var(--rcp-surface);
}
.ed-sec .ta:focus { outline: 2px solid var(--rcp-accent-soft); border-color: var(--rcp-accent); }
.ed-sec .ta.req { border-color: var(--rcp-ink-4); }
/* Read, a note is a document: headings and text on the page, no boxes (U-12); the boxes are
   for typing. Who signed it closes it (`signed:`). */
.ed-sec .ta.ro { white-space: pre-wrap; background: none; border: 0; border-radius: 0; padding: 0; min-height: 0; resize: none; }
.ed-secs:has(.ta.ro) { gap: 14px; padding-top: 12px; }
.ed-signed { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--rcp-border-soft); font-size: var(--rcp-text-sm); color: var(--rcp-ink-2); }
.ed-signed p { margin: 0 0 2px 0; }
.ed-sec .ta.ro.empty { color: var(--rcp-ink-mute); }
.ed-foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--rcp-border); background: var(--rcp-surface-2); font-size: var(--rcp-text-sm); color: var(--rcp-ink-2); }
.ed-foot .ed-hint { flex: 1; color: var(--rcp-ink-2); }

/* ----------------------------------------------------------- column nav */

/* Rows under the view's sections (`rail_rows:`): the sections take their height, the rows the rest. */
.col-rail:has(~ .col-list) { flex: 0 0 auto; padding-bottom: 4px; }
.col-rows-t { display: flex; align-items: center; justify-content: space-between; }
.col-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px 8px 8px; }
.col-nav-t {
  font-size: var(--rcp-text-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--rcp-ink-3); padding: 6px 12px 4px 12px;
}
.col-nav-i {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--rcp-radius-md);
  font-size: var(--rcp-text-lg); font-weight: 600; color: var(--rcp-ink); text-decoration: none;
}
.col-nav-i.on { background: var(--rcp-accent-soft); color: var(--rcp-accent); }
.col-nav-i.dis { color: var(--rcp-ink-4); }
.col-nav-h {
  margin-left: auto; font-size: var(--rcp-text-sm); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--rcp-ink-3);
}

/* The view's tabs in the column (`tab_rail`, `c:MallaUi.App.tabs_in_column?/3`). */
.col-rail { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 8px 12px 8px; }
.col-rail-g + .col-rail-g { margin-top: 6px; }
.col-rail-h {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px 3px 12px;
  font-size: var(--rcp-text-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--rcp-ink-3);
}
.col-rail-h .tag { text-transform: none; letter-spacing: 0; }
.col-rail-h .tag.acc { background: var(--rcp-accent-soft); color: var(--rcp-accent); }
.col-rail-i {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: var(--rcp-radius-md);
  font-size: var(--rcp-text-md); font-weight: 600; color: var(--rcp-ink); text-decoration: none;
}
.col-rail-i:hover { background: var(--rcp-surface-2); }
.col-rail-i.on { background: var(--rcp-accent-soft); color: var(--rcp-accent); }
.col-rail-l { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-rail-i .cnt { font-size: var(--rcp-text-sm); color: var(--rcp-ink-3); }
.col-rail-w {
  min-width: 20px; padding: 0 6px; border-radius: var(--rcp-radius-pill); text-align: center;
  font-size: var(--rcp-text-sm); font-weight: 700; color: var(--rcp-accent); background: var(--rcp-accent-soft);
}
.col-rail-i.on .col-rail-w { background: var(--rcp-surface); }
/* What waits behind a tab (`c:MallaUi.App.tabs_waiting/3`). */
.tab-w {
  margin-left: 6px; min-width: 18px; padding: 0 6px; border-radius: var(--rcp-radius-pill); text-align: center;
  font-size: var(--rcp-text-sm); font-weight: 700; color: var(--rcp-warn-text); background: var(--rcp-warn-soft);
}
/* A count that only says how many is there, not what waits (`{:tone, tab} => :neutral`). */
.tab-w.neutral { color: var(--rcp-ink-2); background: var(--rcp-canvas); }
/* A block of a tab of blocks (`blocks:`): a content of its own under its title. */
.ct-block + .ct-block { margin-top: 18px; }
.ct-block-h {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: var(--rcp-text-md); font-weight: 700; color: var(--rcp-ink);
}
.ct-block-tag { font-weight: 400; color: var(--rcp-ink-3); }
.ct-block-more { margin-left: auto; font-weight: 600; color: var(--rcp-accent); text-decoration: none; }
.ct-block-more:hover { text-decoration: underline; }
/* What outside sources hold, read only (`tone: :outside`): tinted apart from our record. */
.ct-block-outside { padding: 12px 14px 4px; border-radius: 14px; background: var(--rcp-warn-soft); }
.ct-block-outside .ct-block-h .ic { color: var(--rcp-ink-2); }
/* A sentence over a tab's content that says what the page is (`notice:`). */
.ct-notice {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin-bottom: 12px; border-radius: var(--rcp-radius-lg);
  font-size: var(--rcp-text-md); color: var(--rcp-ink); background: var(--rcp-warn-soft);
}
/* A line of a panel that opens a row at the side, and that side (`open:`). */
button.pline { width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; font: inherit; cursor: pointer; }
button.pline:hover { background: var(--rcp-surface-2); }
.ct-sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(460px, 100vw); overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--rcp-gap); padding: 12px 16px 24px;
  background: var(--rcp-surface); border-left: 1px solid var(--rcp-border); box-shadow: -12px 0 30px -14px rgba(var(--rcp-shadow-color), 0.3);
}
.ct-sheet-x { display: flex; justify-content: flex-end; }
/* A view of the section above it (`Tab.under`). */
.col-rail-v { padding: 4px 12px 4px 38px; font-size: var(--rcp-text-sm); font-weight: 500; color: var(--rcp-ink-2); }
/* Where the column is hidden the two rows of tabs stay. */
@media (min-width: 1025px) {
  .shell.is-tabs-in-column .tabs-grouped, .shell.is-tabs-in-column .subtabs { display: none; }
  .shell.is-tabs-in-column.is-groups-in-column .subtabs { display: flex; }
}

/* A cell with a second line (`sub:` of a column). */
.cell-main { display: block; font-weight: 600; }
.cell-sub { display: block; font-size: var(--rcp-text-base); color: var(--rcp-ink-3); margin-top: 1px; }
.tbl-split .tbl-bar { flex-wrap: wrap; row-gap: 8px; }
.tbl-split .tbl-bar-r { margin-left: auto; }

.flash .flash-link { margin-left: 8px; font-weight: 700; color: inherit; text-decoration: underline; }

/* What is on screen while its next answer is read off the LiveView (a table's
   rows, a row's detail, a calendar's window): dimmed, still usable. */
.is-busy { opacity: .55; transition: opacity .15s ease; }

/* A click the server has not answered yet (LiveView marks the element until
   it does): it shows at once, and a button is not clicked twice. A dialog's
   form being submitted marks its confirm button the same way. */
.phx-click-loading { cursor: progress; }
.btn.phx-click-loading,
[data-dialog-confirm].phx-click-loading,
.dlg:has(.dlg-form.phx-submit-loading) [data-dialog-confirm],
.dlg:has(.dlg-typed.phx-submit-loading) [data-dialog-confirm] {
  opacity: .6;
  cursor: progress;
  pointer-events: none;
}

/* ------------------------------------------------------------------ touch */

/* A screen with no hover (a tablet, a phone): the row actions that appear on
   hover are always in sight, and take the place of what they cover on hover
   (console audit C18). */
@media (hover: none) {
  .prow-wrap .row-menu, .tbl .row-a-b, .srch-ra .btn.ghost, .srch-ra .menu-trigger,
  .tn.has-menu .tn-menu, .chat-edit { visibility: visible; }
  .prow-wrap:has(.row-menu) .prow .dot, .tn.has-menu > .dot { visibility: hidden; }
  .rec-wrap .rec-acts { display: flex; }
  .rec-wrap .rec-at, .rec-wrap .rec-pin { visibility: hidden; }
}

/* ------------------------------------------------------------------ phone */

/* A phone (console G-18, owner's decision 2026-11-11): nothing broken at 375px.
   The rail is a bottom bar with four apps and Más (`layoutRailBar` in app.js),
   tiles stack, the top bar keeps the avatar without the name, and strips of
   tabs scroll sideways with no bar in sight. */
@media (max-width: 600px) {
  :root { --rcp-view-pad-x: 16px; --rcp-bar-h: 60px; }
  .shell-body { padding-bottom: var(--rcp-bar-h); }
  .dlg-cell.half { grid-column: 1 / -1; }
  .rail {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 26;
    width: auto; height: var(--rcp-bar-h);
    flex-direction: row; padding: 4px 8px;
    border-right: 0; border-top: 1px solid var(--rcp-border);
  }
  .rail-apps {
    flex-direction: row; justify-content: space-around; align-items: center;
    min-height: 0; height: 100%;
  }
  .rail-apps > :not([hidden]) ~ :not([hidden]) { margin-top: 0; }
  .rail-btn { width: 44px; height: 32px; }
  .rail-btn.on::before { display: none; }
  .rail-lbl { font-size: var(--rcp-text-xs); margin-top: 0; }
  .rail-add { display: none; }
  .column { left: 0; bottom: var(--rcp-bar-h); }
  .topbar-user-b { display: none; }
  .kpi-row { flex-direction: column; }
  .kpi-row > .kpi:only-child { flex: 1 1 auto; }
  .tabs, .subtabs { gap: 16px; }
  .profile-grid, .ct-cols, .dl { grid-template-columns: minmax(0, 1fr); }
}

/* Version 2 of the text (`.ty-2`, tokens.css): the initials in the smallest circles get the
   room 11px needs. */
.ty-2 .chat-person i, .ty-2 .chat-guard .btn i, .ty-2 .md .md-pc i { width: 20px; height: 20px; }