/* ===========================================================================
   The house look: Rivolk (Tom, 21 Oct 2026; Rivolk Design System v1.0).
   Every hub and tool wears it unless the install brings its own brand.
   Text face Urbanist Light, per the design system PDF (Tom, 27 Oct 2026).

   Loaded after dashboard.css and ui.css, before an install's theme.css. It sits
   on top of the full designed frame (body.theme-slate) and re-points that
   frame's colours at one set of brand tokens. base.html adds both classes to
   any page whose hub names no theme of its own.

   A CLIENT'S BRAND restates the --brand-* tokens below, and nothing else, in
   two blocks of its theme.css:
       body       { --brand-accent: ...; ... }    the dark theme, and the chrome
       body.light { --brand-accent: ...; ... }    the light theme
   The --brand-chrome-* set (the left menus and the header, dark in both themes)
   goes in the first block only.
   Same selectors, loaded later, so they win. A token the client leaves out
   keeps the Rivolk value. Logos and app icons come from its theme folder.
   =========================================================================== */

/* ===== 1. BRAND TOKENS ================================================================ */
body {
  --brand-scheme: dark;
  /* surfaces */
  --brand-bg: #0F0A0B;                 /* the page */
  --brand-surface: #1A1214;            /* cards, panels, the rail */
  --brand-surface-raised: #241A1D;     /* menus, popovers, a hovered row */
  --brand-line: #2F2226;               /* dividers and card edges */
  --brand-line-strong: #6E5A61;        /* field outlines, checkboxes */
  /* text */
  --brand-ink: #F5EEEF;
  --brand-ink-muted: #B6A8AF;
  --brand-ink-subtle: #A0919A;
  /* the accent: the one main action, the selected item, links */
  --brand-accent: #FF3D5A;
  --brand-accent-hover: #FF6F85;
  --brand-on-accent: #0F0A0B;          /* text on a filled accent button */
  --brand-accent-soft: #3A1219;        /* a quiet accent fill: selected rows, tags */
  --brand-focus: #FFC2CC;              /* the keyboard focus ring */
  --brand-blush: #FFC2CC;              /* the second accent: chart series, fills, highlights; never text */
  /* the chrome: the left menus and the header strip. Dark in BOTH themes, as on the operator's
     own hub (Tom, 22 Oct 2026), so body.light does not restate these. */
  --brand-chrome: #0F0A0B;             /* the companies menu and the header */
  --brand-chrome-raised: #1A1214;      /* the sections menu beside it, a shade up */
  --brand-chrome-line: #2F2226;
  --brand-chrome-ink: #F5EEEF;
  --brand-chrome-ink-muted: #B6A8AF;
  --brand-chrome-ink-subtle: #A0919A;
  --brand-chrome-accent: #FF3D5A;
  --brand-chrome-accent-hover: #FF6F85;
  --brand-chrome-accent-soft: #3A1219;
  --brand-chrome-focus: #FFC2CC;
  /* status */
  --brand-danger: #FF3D5A;      --brand-danger-soft: #3A1219;
  --brand-success: #4ADE80;     --brand-success-soft: #0F2A1A;
  --brand-warning: #FBBF24;     --brand-warning-soft: #33260A;
  --brand-info: #60A5FA;        --brand-info-soft: #0F1F38;
  /* type */
  --brand-font-display: "Michroma", "Urbanist", sans-serif;   /* 20px and up only */
  --brand-font-body: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --brand-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* shape */
  --brand-r-sm: 6px; --brand-r: 10px; --brand-r-lg: 16px;
}
body.light {
  --brand-scheme: light;
  --brand-bg: #FAF7F7;
  --brand-surface: #FFFFFF;
  --brand-surface-raised: #F3EDEE;
  --brand-line: #E6DCDE;
  --brand-line-strong: #8C7C80;
  --brand-ink: #1A1214;
  --brand-ink-muted: #5E4E54;
  --brand-ink-subtle: #76666C;
  --brand-accent: #C8102E;
  --brand-accent-hover: #A50D26;
  --brand-on-accent: #FFFFFF;
  --brand-accent-soft: #FFE4E8;
  --brand-focus: #C8102E;
  --brand-danger: #C8102E;      --brand-danger-soft: #FFE4E8;
  --brand-success: #166534;     --brand-success-soft: #DCFCE7;
  --brand-warning: #92400E;     --brand-warning-soft: #FEF3C7;
  --brand-info: #1D4ED8;        --brand-info-soft: #DBEAFE;
}

/* ===== 2. THE FRAME'S TOKENS, RE-POINTED ============================================== */
/* One rule for both themes: the brand tokens already differ by theme. The selector is
   as strong as body.theme-slate.light, and later, so it wins over both slate sets. */
body.theme-slate.theme-rivolk {
  --bg: var(--brand-bg);
  --surface: var(--brand-surface);
  --border: var(--brand-line);
  --text: var(--brand-ink);
  --text-muted: var(--brand-ink-muted);
  --accent: var(--brand-accent);
  --pos: var(--brand-success);
  --neg: var(--brand-danger);
  --spark: var(--brand-success);
  --pos-tint: var(--brand-success-soft);
  --neg-tint: var(--brand-danger-soft);
  --spark-line: var(--brand-ink-muted);
  --spark-fill: color-mix(in srgb, var(--brand-ink-muted) 14%, transparent);
  --danger: var(--brand-danger);
  --error-bg: var(--brand-danger-soft);
  --error-border: var(--brand-danger);
  --page-ground: var(--brand-bg);
  /* floating panels: a raised surface edged with a line, no drop shadow */
  --panel: var(--brand-surface);
  --panel-border: var(--brand-line);
  --panel-inset: var(--brand-surface-raised);
  --panel-radius: var(--brand-r-lg);
  --panel-radius-sm: var(--brand-r);
  --panel-shadow: none;
  --panel-shadow-sm: none;
  --scrim: color-mix(in srgb, #0F0A0B 60%, transparent);
  --drawer-ground: var(--brand-surface);
  /* ui.css */
  --ui-line: var(--brand-line);
  --ui-line-head: var(--brand-line);
  --ui-line-on-fill: var(--brand-bg);
  --ui-row-hover: color-mix(in srgb, var(--brand-ink) 4%, transparent);
  --ui-selected: var(--brand-accent-soft);
  --ui-hover: color-mix(in srgb, var(--brand-ink) 7%, transparent);
  --ui-fill: color-mix(in srgb, var(--brand-ink) 8%, transparent);
  --ui-fill-strong: color-mix(in srgb, var(--brand-ink) 10%, transparent);
  --ui-teal-tint: var(--brand-accent-soft);
  --ui-danger: var(--brand-danger);
  --ui-check-line: var(--brand-line-strong);
  --ui-panel: var(--brand-surface);
  --ui-r-sm: var(--brand-r-sm);
  --ui-r: var(--brand-r);
  --thead-bg: transparent;
  --thead-text: var(--brand-ink-subtle);
  /* type and status by general names, for tools that draw their own screens (the ledger's
     hub/shadowCss.ts): the display face and its weight, the mono face, the weight of labels,
     buttons and tabs, the size of UI text, the large radius, and the two status colours the
     frame has no name for. */
  --font-display: var(--brand-font-display);
  --display-weight: 400;
  --font-mono: var(--brand-font-mono);
  --font-figures: var(--brand-font-body);   /* numbers in tables: the body face at Regular, never mono */
  --figures-weight: 400;
  --menu-weight: 300;                       /* menus and tabs until selected; selected is --label-weight */
  --label-weight: 500;
  --ui-text-size: 14px;
  --font-overline: var(--brand-font-mono);  /* small capitals above a title; tracked .12em by the tool */
  --font-tag: var(--brand-font-mono);       /* badges and tags, as .ui-tag below */
  --tag-size: 10.5px;
  --tag-case: uppercase;
  --tag-tracking: .06em;
  --icon-stroke: 1.5;   /* outline icons, 1.5px on a 24px grid */
  --ui-r-lg: var(--brand-r-lg);
  --on-accent: var(--brand-on-accent);
  --warn: var(--brand-warning);
  --warn-tint: var(--brand-warning-soft);
  --info: var(--brand-info);
  --info-tint: var(--brand-info-soft);

  color-scheme: var(--brand-scheme);
  background: var(--bg);
  color: var(--text);
  font-family: var(--brand-font-body);
  font-weight: 300;
}

/* ===== 3. TYPE ======================================================================== */
/* Michroma only at 20px and up (headings, large stat values); labels and buttons at 500, menus at 300
   until selected; tags, badges, overlines and code in mono, never numbers or table headings. */
body.theme-rivolk :is(b, strong, th, label, .ui-btn, .ui-btn-plain, .ui-btn-outline) { font-weight: 500; }
/* Menus, the side navigation and every row of tabs (design system, 27 Oct 2026): Light until selected,
   then Medium, with a red marker (the pale red fill and red icon of the rails, the red line under a tab). */
body.theme-rivolk :is(.side-link, .sec-link, .crm-subrail-link, .ui-tab, .ivt-tab-btn, .subtab, .dash-head .tab, .pagetabs > .tab, .mtab) { font-weight: 300; }
body.theme-rivolk :is(.side-link.active, .sec-link.active, .crm-subrail-link.active, .ui-tab.is-active, .ivt-tab.is-active .ivt-tab-btn,
                      .subtab.active, .dash-head .tab.active, .pagetabs > .tab.active, .mtab.is-active) { font-weight: 500; }
/* One tab size: the record panel's tabs (.ui-tab, 13px in ui.css) match the views along a list (.ivt-tab-btn). */
body.theme-rivolk :is(.ui-tab, .ivt-tab-btn) { font-size: 14px; }
body.theme-slate.theme-rivolk .dash-head h1:not(.topnav-name) {
  font-family: var(--brand-font-display); font-size: 28px; font-weight: 400; letter-spacing: 0; line-height: 36px;
}
body.theme-slate.theme-rivolk .metric-title,
body.theme-slate.theme-rivolk.light .metric-title,
body.theme-slate.theme-rivolk .cell[data-section-title] .text-block h2,
body.theme-slate.theme-rivolk.light .cell[data-section-title] .text-block h2,
body.theme-rivolk .side-head, body.theme-rivolk .sec-head {
  font-family: var(--brand-font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-ink-subtle);
}
body.theme-slate.theme-rivolk .metric-value,
body.theme-slate.theme-rivolk.light .metric-value,
body.theme-slate.theme-rivolk .metric-unit,
body.theme-slate.theme-rivolk.light .metric-unit {
  font-family: var(--brand-font-display); font-weight: 400; letter-spacing: 0; color: var(--brand-ink);
}
body.theme-rivolk :is(.ui-tag, .ui-tab-n, .kind-tag, .badge) {
  font-family: var(--brand-font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
}
/* Table headings keep the body face: ui.css sets their size and case for every table, and mono
   at that size widens the columns until a table scrolls sideways (Tom, 27 Oct 2026). */
/* Numbers in the body face at Regular, right-aligned (design system, 27 Oct 2026); big stat values are Michroma above. */
body.theme-rivolk :is(.num, .ui-num, td.is-num, .fig) { font-family: var(--brand-font-body); font-weight: 400; font-variant-numeric: tabular-nums; text-align: right; }

/* ===== 4. THE FRAME =================================================================== */
/* The chrome (the two left menus and the header strip) is dark in both themes. Each re-declares
   the brand tokens, and the frame tokens built from them, from the --brand-chrome-* set, so
   everything inside it (links, icons, menus that drop from it) reads as on a dark page. */
body.theme-slate.theme-rivolk :is(.sidebar, .sec-rail, .topnav),
body.theme-slate.theme-rivolk.light :is(.sidebar, .sec-rail, .topnav) {
  --brand-scheme: dark;
  --brand-bg: var(--brand-chrome);
  --brand-surface: var(--brand-chrome-raised);
  --brand-surface-raised: var(--brand-chrome-raised);
  --brand-line: var(--brand-chrome-line);
  --brand-line-strong: var(--brand-chrome-ink-subtle);
  --brand-ink: var(--brand-chrome-ink);
  --brand-ink-muted: var(--brand-chrome-ink-muted);
  --brand-ink-subtle: var(--brand-chrome-ink-subtle);
  --brand-accent: var(--brand-chrome-accent);
  --brand-accent-hover: var(--brand-chrome-accent-hover);
  --brand-accent-soft: var(--brand-chrome-accent-soft);
  --brand-on-accent: var(--brand-chrome);
  --brand-focus: var(--brand-chrome-focus);
  --surface: var(--brand-chrome-raised);
  --border: var(--brand-chrome-line);
  --text: var(--brand-chrome-ink);
  --text-muted: var(--brand-chrome-ink-muted);
  --accent: var(--brand-chrome-accent);
  --panel: var(--brand-chrome-raised);
  --panel-border: var(--brand-chrome-line);
  --ui-hover: color-mix(in srgb, var(--brand-chrome-ink) 7%, transparent);
  --ui-fill: color-mix(in srgb, var(--brand-chrome-ink) 8%, transparent);
  color-scheme: dark;
  color: var(--brand-chrome-ink);
}
/* The rail: a flat surface with a line on its right, the same in both themes' terms. */
body.theme-slate.theme-rivolk .sidebar,
body.theme-slate.theme-rivolk.light .sidebar {
  background: var(--brand-chrome);
  border-right: 1px solid var(--brand-chrome-line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.theme-rivolk .sec-rail {
  background: var(--brand-chrome-raised); border-right: 1px solid var(--brand-chrome-line);
}
body.theme-rivolk :is(.side-head, .sec-head).ruled { border-top-color: var(--brand-line); }
body.theme-rivolk .sec-link { color: var(--brand-chrome-ink-muted); }
body.theme-rivolk .sec-link .side-ico { color: var(--brand-chrome-ink-muted); }
body.theme-slate.theme-rivolk :is(.side-link, .side-sublink):hover,
body.theme-slate.theme-rivolk.light :is(.side-link, .side-sublink):hover,
body.theme-rivolk .sec-link:hover,
body.theme-rivolk .sec-rail-toggle:hover {
  background: color-mix(in srgb, var(--brand-chrome-ink) 7%, transparent); color: var(--brand-chrome-ink);
}
/* The page on screen: the operator's shapes (a band across the companies rail, a rounded box in the
   sections rail, no bar at the edge; Tom, 25 Oct 2026), in a soft accent fill. */
body.theme-slate.theme-rivolk .side-link.active,
body.theme-slate.theme-rivolk.light .side-link.active,
body.theme-rivolk .sec-link.active {
  background: var(--brand-accent-soft); color: var(--brand-chrome-ink);
}
body.theme-rivolk :is(.side-link, .sec-link).active .side-ico { color: var(--brand-accent); }
body.theme-rivolk .sec-link:focus-visible { outline-color: var(--brand-focus); }
body.theme-rivolk .ui-cocode { border-color: var(--brand-line-strong); color: var(--brand-chrome-ink-muted); font-family: var(--brand-font-mono); font-size: 11.5px; }
body.theme-rivolk .side-link:hover .ui-cocode { color: var(--brand-chrome-ink); }
body.theme-rivolk .side-link.active .ui-cocode { color: var(--brand-accent); border-color: var(--brand-accent); }
body.theme-rivolk .sec-rail-toggle { color: var(--brand-chrome-ink-muted); }
body.theme-rivolk .avatar:not(:has(.avatar-img)) { border-color: var(--brand-accent); color: var(--brand-accent); }
body.theme-slate.theme-rivolk .avatar,
body.theme-slate.theme-rivolk.light .avatar {
  background: var(--brand-accent-soft); color: var(--brand-accent); box-shadow: none;
}
body.theme-slate.theme-rivolk :is(.name-edit-form, .ml-edit-form) { background: var(--brand-surface-raised); border-color: var(--brand-line); }
body.theme-slate.theme-rivolk .name-edit-input { background: var(--brand-bg); }
body.theme-slate.theme-rivolk:not(.light) .rail-tip { background: var(--brand-surface-raised); }
@media (max-width: 640px) {
  body.theme-slate.theme-rivolk .side-nav,
  body.theme-slate.theme-rivolk.light .side-nav { background: var(--brand-chrome); border-color: var(--brand-line); }
  body.theme-slate.theme-rivolk .side-ham,
  body.theme-slate.theme-rivolk.light .side-ham { border-color: var(--brand-line-strong); color: var(--brand-chrome-ink); }
}

/* The brand's mark at the foot of the rail (templates/_side_rail.html). The rail is dark in both
   themes, so it is always the on-dark file; the folded rail shows the square mark. */
.side-brand { display: flex; align-items: center; height: 28px; margin: 12px 0 14px; padding: 0 4px; text-decoration: none; }
.side-brand img { display: block; height: 16px; width: auto; max-width: 100%; }
.side-brand :is(.on-light, .mark) { display: none; }
body.sidebar-mini .side-brand { justify-content: center; padding: 0; }
body.sidebar-mini .side-brand .on-dark { display: none; }
body.sidebar-mini .side-brand .on-dark-mark { display: block; height: 28px; }
@media (max-width: 820px) { .side-brand { display: none; } }

/* The header strip over the content: the page's own ground in each theme, a line beneath,
   the open section underlined in the accent. */
body.theme-rivolk .topnav { background: var(--brand-chrome); border-bottom: 1px solid var(--brand-chrome-line); }
html body.theme-rivolk .dash-head h1.topnav-name { color: var(--brand-ink); font-family: var(--brand-font-display); font-size: 20px; font-weight: 400; letter-spacing: 0; }
html body.theme-rivolk .dash-head .tab { color: var(--brand-ink-muted); }
html body.theme-rivolk .dash-head .tab:hover,
html body.theme-rivolk .dash-head .tabmenu-btn[aria-expanded="true"] { color: var(--brand-ink); background: var(--ui-hover); }
html body.theme-rivolk .dash-head .tab.active { color: var(--brand-ink); font-weight: 500; }
html body.theme-rivolk .dash-head .tab.active::after { height: 2px; border-radius: 0; background: var(--brand-accent); }
html body.theme-rivolk .dash-head .tabmenu { background: var(--brand-surface-raised); border-color: var(--brand-line); box-shadow: none; }
html body.theme-rivolk .dash-head .tabmenu a { color: var(--brand-ink); }
html body.theme-rivolk .dash-head .tabmenu .tabmenu-note { color: var(--brand-ink-muted); }
html body.theme-rivolk .dash-head .settings-link { color: var(--brand-ink-muted); }
html body.theme-rivolk .dash-head .settings-link:hover { color: var(--brand-ink); background: var(--ui-hover); }
html body.theme-rivolk .dash-head .settings-link.active { color: var(--brand-accent); background: var(--brand-accent-soft); }
body.theme-rivolk .topnav > .crumbs :is(a, .crumb-group, .if-done-toggle) { color: var(--brand-ink-muted); }
body.theme-rivolk .topnav > .crumbs :is(a:hover, [aria-current="page"], .if-done-toggle:has(input:checked)) { color: var(--brand-ink); }
body.theme-rivolk .topnav > .crumbs .if-done-toggle .if-switch { background: var(--brand-line-strong); }
body.theme-rivolk .topnav > .crumbs li + li::before { border-color: var(--brand-ink-subtle); }
html body.theme-rivolk .topnav :is(.ui-iconbtn, .notify-bell) { color: var(--brand-ink-muted); }
html body.theme-rivolk .topnav :is(.ui-iconbtn, .notify-bell):hover { color: var(--brand-ink); }
html body.theme-rivolk .topnav .notify-bell.has-items { color: var(--brand-warning); }

/* Links in what a page says: the accent, underlined. */
body.theme-rivolk :is(.text-block, .widget, .ui-panel-body) a:not([class]) { color: var(--brand-accent); text-underline-offset: 2px; }
body.theme-rivolk :is(.text-block, .widget, .ui-panel-body) a:not([class]):hover { color: var(--brand-accent-hover); }

/* Header, cards and panels: flat surfaces edged with lines, no glass, no shadows. */
body.theme-slate.theme-rivolk .topbar,
body.theme-slate.theme-rivolk.light .topbar {
  background: var(--brand-chrome); color: var(--brand-chrome-ink); border-bottom-color: var(--brand-chrome-line); backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.theme-slate.theme-rivolk :is(.widget, .meeting, .info-card-row, .meetings-table, .board-meetings .meeting-head.mdetail-head, .hiring-list.showing-role .hiring-role-head),
body.theme-slate.theme-rivolk.light :is(.widget, .meeting, .info-card-row, .meetings-table, .board-meetings .meeting-head.mdetail-head, .hiring-list.showing-role .hiring-role-head) {
  background-color: var(--brand-surface); border-color: var(--brand-line);
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.theme-slate.theme-rivolk .widget { border-radius: var(--brand-r); }
/* Widgets that are a whole page (the CRM, the issues list, the full-page tools, board meetings)
   sit on the page ground with no card, as in ui.css. The card rule above weighs as much as its
   heaviest entry (three classes), so each name here is doubled to weigh the same, and comes later. */
body.theme-slate.theme-rivolk :is(.widget.crm-widget.crm-widget, .widget.issues-list.issues-list, .widget.ui-page.ui-page, .widget.board-meetings.board-meetings),
body.theme-slate.theme-rivolk.light :is(.widget.crm-widget.crm-widget, .widget.issues-list.issues-list, .widget.ui-page.ui-page, .widget.board-meetings.board-meetings) {
  background-color: transparent;
}
body.theme-slate.theme-rivolk .info-cards { background: transparent; }
body.theme-slate.theme-rivolk.light .cell[data-section-title] .widget.text-block { background: transparent; border: 0; box-shadow: none; }
body.theme-slate.theme-rivolk:not(.light) .cell[data-section-title] .widget.text-block { background: transparent; border: 0; }
body.theme-slate.theme-rivolk.light :is(.info-card, .info-card-row, .next-meeting, .meeting, .meeting:hover) { border-left-color: var(--brand-line); }
body.theme-slate.theme-rivolk.light .drawer-title { color: var(--brand-ink); }
body.theme-slate.theme-rivolk .drawer,
body.theme-slate.theme-rivolk.light .drawer {
  background: var(--brand-surface); border-left: 1px solid var(--brand-line); backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.theme-slate.theme-rivolk.light .drawer.open { box-shadow: none; }
body.theme-slate.theme-rivolk .widget-error,
body.theme-slate.theme-rivolk.light .widget-error {
  background: var(--brand-danger-soft); border-color: var(--brand-danger); color: var(--brand-ink);
}
body.theme-slate.theme-rivolk .bm-process-panel,
body.theme-slate.theme-rivolk.light .bm-process-panel { background: var(--brand-surface); box-shadow: none; border: 1px solid var(--brand-line); }
body.theme-slate.theme-rivolk :is(.bo-date, .meetings-divider span, .meeting-detail .agenda-actions-title),
body.theme-slate.theme-rivolk.light :is(.bo-date, .meetings-divider span, .meeting-detail .agenda-actions-title) { color: var(--brand-ink); }
body.theme-slate.theme-rivolk .board-overview-card {
  --border: var(--brand-line); --text: var(--brand-ink); --text-muted: var(--brand-ink-muted); --accent: var(--brand-accent);
  background: var(--brand-surface);
}
body.theme-slate.theme-rivolk .board-overview-card :is(.metric-title, .bo-date) { color: inherit; }
body.theme-slate.theme-rivolk .actions-summary .actions-table {
  --surface: var(--brand-surface); --border: var(--brand-line); --text: var(--brand-ink); --text-muted: var(--brand-ink-muted); --accent: var(--brand-accent);
  color-scheme: var(--brand-scheme); background: var(--brand-surface);
}
body.theme-slate.theme-rivolk :is(.assignee-menu, .actions-summary .assignee-menu),
body.theme-slate.theme-rivolk.light .assignee-menu { background: var(--brand-surface-raised); box-shadow: none; border: 1px solid var(--brand-line); }
body.theme-slate.theme-rivolk.light :is(.uinfo-title, .uinfo-body, .agenda-date-input, .agenda-table th, .agenda-table td) { background-color: var(--brand-surface); }

/* A record's own sections (.ui-tabs: a deal memo's Deal Sheet, Competitor Analysis, Notes; a contact's
   Details, Companies, Deals): one outlined box of equal segments, the open one a grey fill (Tom, 27 Oct
   2026). Light until open, Medium when open (section 3); no red: the red marker is the tabs
   along a line below, which a record's sub-tabs (.pagetabs) and the other tab rows keep. */
body.theme-rivolk .ui-tabs,
body.theme-slate.theme-rivolk:not(.light) .ui-tabs {
  padding: 4px; gap: 4px; border: 1px solid var(--brand-line); border-radius: var(--brand-r); background: var(--brand-surface);
}
body.theme-rivolk .ui-tab { height: 36px; border-radius: var(--brand-r-sm); color: var(--brand-ink-muted); }
body.theme-rivolk .ui-tab:hover { background: var(--ui-hover); color: var(--brand-ink); }
body.theme-rivolk .ui-tab.is-active { background: var(--brand-surface-raised); color: var(--brand-ink); box-shadow: none; }

/* Tabs along a line, the open one underlined in the accent. */
html body.theme-rivolk .mtabs:not(.meeting-page .mtabs):not(.hiring-apps-tabs),
html body.theme-slate.theme-rivolk:not(.light) .mtabs:not(.meeting-page .mtabs):not(.hiring-apps-tabs) {
  padding: 0; gap: 4px; border: 0; border-bottom: 1px solid var(--brand-line); border-radius: 0; background: transparent;
}
html body.theme-rivolk .mtabs:not(.meeting-page .mtabs):not(.hiring-apps-tabs) > .mtab { height: 36px; border-radius: 0; }
html body.theme-rivolk .mtabs:not(.meeting-page .mtabs):not(.hiring-apps-tabs) > .mtab:hover { background: none; color: var(--brand-ink); }
html body.theme-rivolk .mtabs:not(.meeting-page .mtabs):not(.hiring-apps-tabs) > .mtab.is-active {
  background: none; color: var(--brand-ink); box-shadow: inset 0 -2px 0 var(--brand-accent);
}
body.theme-slate.theme-rivolk .subtab-bar { background: transparent; box-shadow: none; border: 0; border-bottom: 1px solid var(--brand-line); border-radius: 0; padding: 0; }
body.theme-slate.theme-rivolk .subtab { border-radius: 0; }
body.theme-slate.theme-rivolk .subtab:hover { background: none; }
body.theme-slate.theme-rivolk .subtab.active,
body.theme-slate.theme-rivolk.light .subtab.active { background: none; box-shadow: inset 0 -2px 0 var(--brand-accent); }

/* Buttons: the main action filled with the accent; 36px is the house height. */
body.theme-rivolk :is(.ui-btn, .send-btn, .btn-primary, .pb-btn-primary, .btn-create-meeting, .btn-close-meeting) {
  background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-on-accent);
}
body.theme-rivolk :is(.ui-btn, .send-btn, .btn-primary, .pb-btn-primary, .btn-create-meeting, .btn-close-meeting):hover:not(:disabled) {
  background: var(--brand-accent-hover); border-color: var(--brand-accent-hover); filter: none;
}
body.theme-rivolk :is(.ui-btn, .ui-btn-plain, .ui-btn-outline, .btn-outline) { height: 36px; }
body.theme-rivolk .ui-btn-plain { border-color: var(--brand-line-strong); }
body.theme-rivolk .ui-iconbtn-n { color: var(--brand-on-accent); }
body.theme-slate.theme-rivolk .assignee-add-save,
body.theme-slate.theme-rivolk.light .assignee-add-save { color: var(--brand-on-accent); }

/* Keyboard focus: one ring everywhere, in the brand's focus colour. */
body.theme-rivolk :is(a, button, input, select, textarea, [tabindex], summary):focus-visible {
  outline: 2px solid var(--brand-focus); outline-offset: 2px;
}

/* ===== 5. SIGN-IN ===================================================================== */
body.theme-rivolk.login-page { background: var(--brand-bg); }
body.theme-rivolk .login-card {
  background: var(--brand-surface); border: 1px solid var(--brand-line); border-radius: var(--brand-r-lg); box-shadow: none;
}
body.theme-rivolk .login-logo { display: block; height: 20px; width: auto; margin: 0 0 6px; }
body.theme-rivolk .login-logo.on-light, body.theme-rivolk.light .login-logo.on-dark { display: none; }
body.theme-rivolk.light .login-logo.on-light { display: block; }
body.theme-rivolk .login-card h1 { font-family: var(--brand-font-display); font-size: 20px; font-weight: 400; }
body.theme-rivolk .login-card input { background: var(--brand-bg); border-color: var(--brand-line-strong); color: var(--brand-ink); border-radius: var(--brand-r-sm); }
body.theme-rivolk .login-card input:focus { outline-color: var(--brand-focus); border-color: var(--brand-focus); }
body.theme-rivolk .login-card .btn-primary { height: 44px; border-radius: var(--brand-r-sm); }
body.theme-rivolk .error { color: var(--brand-ink); border-radius: var(--brand-r-sm); }