/* ui.css — the portfolio pages' design system (Tom, 4 Oct 2026).

   One place for the look the CRM settled on, so that a change made here shows on every page
   that uses it. Loaded straight after dashboard.css (base.html).

   1. TOKENS      the named colours, lines, sizes. Change a value here, it changes everywhere.
   2. COMPONENTS  context-free building blocks, each one class (.ui-...): table, tabs, buttons,
                  rows, panel... A page uses a component by carrying its class.
   3. CRM         what is still particular to the CRM (moved here from dashboard.css, same
                  order); it shrinks as its pieces become components.

   Rule for anyone editing: a look that two pages share belongs in COMPONENTS, written once. */

/* ===== 1. TOKENS ===================================================================== */
/* Change a value here and it changes on every page. Light mode is body.light; anything else is dark. */
body {
  /* lines */
  --ui-line: rgba(255, 255, 255, .07);        /* table rows and columns, list dividers */
  --ui-line-head: rgba(255, 255, 255, .12);   /* the line under a table's headings: a touch heavier */
  --ui-line-on-fill: rgba(255, 255, 255, .12);   /* a divider on a grey band (--ui-fill): lighter than the band, so it shows */
  --ui-line-main: var(--text-muted);          /* the double line above and below a figures table's main line: dark enough to rule the line off */
  /* fills */
  --ui-row-hover: rgba(127, 127, 127, .05);   /* a table row under the mouse */
  --ui-selected: rgba(127, 127, 127, .18);    /* the row whose record is open */
  --ui-hover: rgba(127, 127, 127, .10);       /* a field, button or menu item under the mouse */
  --ui-fill: rgba(127, 127, 127, .12);        /* chips, icon squares, quiet buttons */
  --ui-fill-strong: rgba(127, 127, 127, .14); /* grey tags */
  --ui-edited: #f0a93b;                       /* a figure changed by hand since it was last synced: an amber mark */
  --ui-disabled: rgba(127, 127, 127, .04);    /* a cell that cannot be used yet: a very light grey, well short of the page behind it */
  --ui-typed: rgba(253, 216, 120, .20);       /* a cell of a figures table that is typed into: the house light yellow, as a tint on the dark page */
  --ui-teal-tint: rgba(31, 185, 167, .10);    /* an outline button under the mouse */
  --ui-danger: #b42318;                       /* delete, errors */
  --ui-check-line: rgba(255, 255, 255, .30);  /* a checkbox's outline */
  --ui-panel: #17181c;                        /* the side panel's surface */
  /* shapes and sizes */
  --ui-r-sm: 6px; --ui-r: 8px; --ui-r-pill: 999px;   /* corners: buttons and tags, cards and tabs, pills */
  --ui-panel-w: 640px;                        /* every side panel's width */
  --ui-row-h: 40px;                           /* a table row */
  --ui-field-h: 36px; --ui-field-gap: 12px;   /* a record's field row, and the space between rows */
  --ui-field-label-w: 168px;                  /* the width kept for a field's name */
  --ui-inset: 16px;                           /* how far a panel's content sits in from its edge lines */
  --ui-tip-delay: .1s;                        /* how long the mouse rests on something before its hover tip shows */
}
body.light { --ui-edited: #d98a00; --ui-typed: #FDECC8; --ui-line: #eceef1; --ui-line-head: #dde1e6; --ui-line-on-fill: #fff; --ui-panel: #fff; --ui-check-line: #c4cad0; }

/* ===== 2. COMPONENTS ================================================================= */

/* ---- ui-tabs: the grey pill sub-menu -------------------------------------------------
   <div class="ui-tabs" role="tablist"><button class="ui-tab [is-active]" role="tab">
     <svg/> Label <span class="ui-tab-n">3</span></button> ...</div>
   The tabs share the width equally; .is-natural (set by UI.fitTabs when one would be cut off)
   lets each take the width of its text. With six or more, the icons are dropped.
   The older tab strip (.mtabs / .mtab / .mtab-n: Hiring's role tabs, tabs inside a side
   panel) is the same component: it shares the LOOK rules below and keeps its own layout
   (as wide as its tabs). A board meeting's page tabs are the underlined views bar instead. */
/* look (shared) */
.ui-tabs, html body .mtabs:not(.meeting-page .mtabs):not(.hiring-apps-tabs) {
  box-sizing: border-box; max-width: 100%; gap: 2px; padding: 4px 3px;
  border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: none;
}
body.theme-slate:not(.light) .ui-tabs, html body.theme-slate:not(.light) .mtabs:not(.meeting-page .mtabs):not(.hiring-apps-tabs) { background: rgba(255, 255, 255, .04); }
.ui-tab, html body .mtabs:not(.meeting-page .mtabs):not(.hiring-apps-tabs) > .mtab {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; height: 32px;
  border: 0; border-radius: var(--ui-r); background: none; color: var(--text-muted);
  font: inherit; font-size: 13px; font-weight: 400; line-height: 1.5; white-space: nowrap; cursor: pointer;
}
.ui-tab:hover, html body .mtabs:not(.meeting-page .mtabs):not(.hiring-apps-tabs) > .mtab:hover { color: var(--text); background: var(--ui-hover); }
.ui-tab.is-active, html body .mtabs:not(.meeting-page .mtabs):not(.hiring-apps-tabs) > .mtab.is-active { color: var(--text); background: rgba(127, 127, 127, .16); font-weight: 500; }
.ui-tab-n, html body .mtabs:not(.meeting-page .mtabs):not(.hiring-apps-tabs) > .mtab > .mtab-n:not(.mtab-sign):not(.hiring-setup-summary) { min-width: 16px; padding: 0 5px; border-radius: var(--ui-r-pill); background: rgba(127, 127, 127, .22); color: inherit; font-size: 11.5px; line-height: 17px; text-align: center; font-weight: 400; }
/* layout: ui-tabs fill their container in equal columns */
.ui-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; margin: 0 0 12px; }
.ui-tabs.is-natural { display: flex; }
.ui-tabs.is-natural > .ui-tab { flex: 1 1 auto; overflow: visible; }
.ui-tab { padding: 0 2px; overflow: hidden; text-overflow: ellipsis; }
html body .mtabs:not(.meeting-page .mtabs):not(.hiring-apps-tabs) > .mtab { padding: 0 14px; }
.ui-tab[hidden] { display: none; }
.ui-tab svg { width: 15px; height: 15px; flex: none; }
.ui-tabs:has(> .ui-tab:nth-child(6)) .ui-tab svg { display: none; }

/* ---- ui-btn-outline: the teal outline button ------------------------------------------
   <button class="ui-btn-outline"><svg/>Add note</button> */
.ui-btn-outline {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; flex: none;
  border: 1px solid var(--accent); border-radius: var(--ui-r-sm); background: transparent; color: var(--accent);
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.ui-btn-outline svg { width: 14px; height: 14px; }
.ui-btn-outline:hover, .ui-btn-outline:focus-visible { background: var(--ui-teal-tint); outline: none; }
.ui-btn-outline:focus-visible { box-shadow: 0 0 0 2px rgba(31, 185, 167, .35); }

/* ---- ui-iconbtn: a button that is only an icon ---------------------------------------
   <button class="ui-iconbtn [is-sm] [is-danger]" title="..." aria-label="..."><svg/></button>
   .ui-iconbtn-n inside it is a small count. */
.ui-iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--ui-r-sm); background: none; color: var(--text-muted); cursor: pointer; }
.ui-iconbtn svg { width: 18px; height: 18px; }
.ui-iconbtn.is-sm { width: 28px; height: 28px; }
.ui-iconbtn.is-sm svg { width: 15px; height: 15px; }
.ui-iconbtn:hover, .ui-iconbtn:focus-visible, .ui-iconbtn[aria-expanded="true"] { background: var(--ui-fill); color: var(--text); outline: none; }
.ui-iconbtn:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.ui-iconbtn.is-danger:hover, .ui-iconbtn.is-danger:focus-visible { color: var(--ui-danger); background: rgba(229, 104, 122, .10); }
.ui-iconbtn-n { position: absolute; top: 2px; right: 1px; min-width: 14px; padding: 0 3px; border-radius: var(--ui-r-pill); background: var(--accent); color: #fff; font-size: 10px; line-height: 14px; text-align: center; }

/* ---- ui-tag: a small grey tag beside a name (Broker, Deal); .is-accent is the teal one (Primary) */
.ui-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--ui-r-pill); background: var(--ui-fill-strong); color: var(--text-muted); font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; vertical-align: 1px; }
.ui-tag.is-accent { margin-left: 0; background: rgba(31, 185, 167, .14); color: var(--accent); vertical-align: baseline; }

/* ---- ui-table: the house table ------------------------------------------------------
   Every table on the portfolio pages: white bold headings with a slightly heavier line
   under them, a faint grid of row and column lines, a grey row under the mouse and a darker
   grey for the row whose record is open (tr.is-open).
   <div class="ui-table-wrap"><table class="ui-table [is-compact]"> ... </table></div>
   .is-compact   every row one line, 40px, long values cut with an ellipsis (the CRM lists)
   .ui-th        a heading that sorts: <th><button class="ui-th"><svg/><span>Name</span>
                 <span class="ui-th-arrow">↑</span></button></th>
   .ui-num       a right-aligned figure (td or th);  .ui-rowicon  the small icon before a name
   sub rows      a row's chevron (.issue-expand) opens the rows beneath it (.issue-subtasks-row)
   The older table classes are listed beside .ui-table so they share every rule here. */
/* Headings are told apart by colour, not weight (Tom, 4 Oct 2026): regular weight in a quiet
   grey, and the line under them is the same line as between the rows. */
body { --thead-bg: transparent; --thead-text: var(--text-muted); }
body.light { --thead-bg: #ffffff; --thead-text: var(--text-muted); }
:is(.ui-table, .issues-table, .agenda-table, .actions-table, .kb-table, .fa-table, .fw-table, .fap-table, .am-table, .ax-body table) > thead > tr > th,
.meetings-table-head {
  background: var(--thead-bg) !important; color: var(--thead-text) !important;
  font-size: 13.5px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important;
  border-bottom: 1px solid var(--ui-line) !important;
}
:is(.ui-table, .issues-table, .agenda-table, .actions-table, .kb-table, .fa-table, .fw-table, .fap-table, .am-table) > thead > tr > th .th-sort:hover { color: var(--thead-text); opacity: 0.7; }
:is(.ui-table, .issues-table) { border-color: var(--ui-line); border-radius: var(--ui-r-sm); }
:is(.ui-table, .issues-table) > tbody > tr > td { border-bottom-color: var(--ui-line); border-right: 1px solid var(--ui-line); }
:is(.ui-table, .issues-table) > thead > tr > th { border-right: 1px solid var(--ui-line); }
:is(.ui-table, .issues-table) > tbody > tr > td:last-child, :is(.ui-table, .issues-table) > thead > tr > th:last-child { border-right: 0; }
:is(.agenda-table, .actions-table, .kb-table, .fa-table, .fw-table, .fap-table, .am-table) > tbody > tr > td { border-color: var(--ui-line) !important; }
:is(.agenda-table, .actions-table, .kb-table, .fa-table, .fw-table, .fap-table, .am-table) { border-color: var(--ui-line) !important; }
/* rows */
.issue-row, .ui-table > tbody > tr.ui-row { cursor: pointer; }
.issue-row:hover td, .ui-table > tbody > tr.ui-row:hover td { background: var(--ui-row-hover); }
.issue-row.is-open td, .issue-row.is-open:hover td, .ui-table > tbody > tr.is-open td { background: var(--ui-selected); }
/* compact: one line per row */
.ui-table-wrap { overflow-x: auto; }
.ui-table.is-compact { font-size: 14px; }
.ui-table.is-compact th, .ui-table.is-compact td {
  box-sizing: border-box; height: var(--ui-row-h); max-width: 280px; padding: 0 12px; vertical-align: middle;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid var(--ui-line) !important; border-right: 1px solid var(--ui-line);
}
.ui-table.is-compact th:last-child, .ui-table.is-compact td:last-child { border-right: 0; }
.ui-table.is-compact tbody tr:last-child td { border-bottom: 0 !important; }
.ui-table.is-compact th { padding: 0; }
.ui-table .ui-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* a heading that sorts */
.ui-th {
  display: flex; align-items: center; gap: 7px; width: 100%; height: 100%; min-height: 38px; padding: 0 12px;
  border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer;
}
.ui-th > span:first-of-type { overflow: hidden; text-overflow: ellipsis; }
.ui-th svg { flex: none; width: 14px; height: 14px; opacity: .6; }
.ui-th:hover > span:first-of-type { text-decoration: underline; text-underline-offset: 3px; }
.ui-th:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.ui-th-arrow { margin-left: auto; font-size: 13px; }
/* the Board Meetings past-meetings header carries the same icons */
.meetings-table-head > span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.meetings-table-head svg { flex: none; width: 14px; height: 14px; opacity: .6; }
th.ui-num .ui-th { justify-content: flex-end; }
th.ui-num .ui-th-arrow { margin-left: 0; }
/* The deal memo table's tag columns (Recommendation, Status, Version): each tag sits at the centre
   of its column. The column's heading stays at the left, as every heading does (Tom, 6 Oct 2026). */
.crm-table-memos td:has(> :is(.ntag, .ui-tag)) { text-align: center; }
.crm-table-memos td > .ntag { margin-right: 0; }
.ui-rowicon { display: inline-flex; margin-right: 8px; vertical-align: -2px; color: var(--text-muted); }
.ui-rowicon svg { width: 13px; height: 13px; }
/* sub rows: a row that opens the rows beneath it (the Issues List's sub tasks). The Name cell
   keeps a gutter as wide as its heading's icon. The chevron, and each sub row's tick, sit in
   that gutter under the icon: inside the cell, clear of the column line. Every name starts
   under the heading's word, whether or not its row has sub rows.
   12px cell padding + 14px icon + 7px gap = 33px; the 18px chevron centres on the icon. */
.issues-list .issues-table :is(.issue-name-cell, td.ist-title) { position: relative; padding-left: 33px; }
.issue-expand, .ist-tickbox {
  display: inline-flex; align-items: center; justify-content: center; width: 18px;
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
}
.issue-expand { height: 18px; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--text-muted); }
.issue-expand svg { width: 14px; height: 14px; transition: transform 0.12s; }
.issue-expand.is-open svg { transform: rotate(90deg); }
.issue-expand:hover { color: var(--accent); }
.ist-tickbox .subtask-tick { display: block; }
/* A sub row is a little shorter than its issue's row. The blank cells of the first column
   carry no line between sub rows, so the sub rows read as one group under their issue; the
   last sub row closes the group with a full-width line. */
.issues-table .issue-subtasks-row > td { padding-top: 6px; padding-bottom: 6px; }
.issues-table .issue-subtasks-row:not(.is-last) > td.ist-lead:not(.ist-title, .ist-assignee) { border-bottom-color: transparent !important; }
.issues-table .issue-subtask-title { display: inline-block; vertical-align: middle; }

/* ---- ui-field: a record's field row (icon, name, value) ---------------------------------
   The CRM's rows (.ui-form > .ui-field, further down) and the house panel's (.issue-props >
   .issue-prop, the Issues List and Key Information) keep their own markup but take their
   size, spacing and hover from here. */
.drawer .issue-panel { padding: 0 var(--ui-inset); }
.drawer .issue-props { gap: var(--ui-field-gap); }
.drawer .issue-prop { min-height: var(--ui-field-h); gap: 16px; }
.drawer .issue-prop-label { flex: 0 0 var(--ui-field-label-w); width: auto; font-size: 13.5px; gap: 5px; }
.drawer .issue-prop-label svg { width: 14px; height: 14px; }
.drawer .issue-prop-value :is(.ndate-display, .issue-assignees-summary, .issue-topic-input, .fsel-btn, select, input:not([type="checkbox"])):hover { border-color: transparent; background: var(--ui-hover); }

/* ---- ui-board: a pipeline / kanban board -------------------------------------------------
   Columns of cards. The CRM's pipeline (.ui-board > .ui-col > .ui-col-body > .ui-cardrow),
   the Issues List's board (.kanban-col, .issue-card) and Hiring's (.hiring-bcol, .hiring-card)
   share the column and card look below; each keeps its own layout and contents. */
.ui-col, .kanban-col, .hiring-bcol { background: rgba(127, 127, 127, .06); border: 1px solid var(--border); border-radius: 10px; }
.ui-cardrow, .issue-card, .hiring-card { background: #fff; border: 1px solid var(--border); border-radius: var(--ui-r); cursor: pointer; transition: border-color .12s; }
body.theme-slate:not(.light) :is(.ui-cardrow, .issue-card, .hiring-card) { background: rgba(255, 255, 255, .05); }
:is(.ui-cardrow, .issue-card, .hiring-card):hover { border-color: var(--accent); }
:is(.ui-cardrow, .issue-card, .hiring-card):focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
:is(.ui-col, .kanban-col, .hiring-bcol).drag-over { border-color: var(--accent); background: rgba(31, 185, 167, .06); }
:is(.ui-cardrow, .issue-card).is-open, .issue-card.is-open { background: var(--ui-selected); }

/* ---- the outline button's older name (.btn-outline, Board Meetings) is the same button */
.btn-outline { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border: 1px solid var(--accent); border-radius: var(--ui-r-sm); background: transparent; color: var(--accent); font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn-outline:hover, .btn-outline:focus-visible { background: var(--ui-teal-tint); outline: none; text-decoration: none; }

/* ---- ui-btn: the buttons ---------------------------------------------------------------
   Three weights, one shape (--ui-r-sm corners, 500 weight):
     <button class="ui-btn">Save</button>              filled teal: the one main action
     <button class="ui-btn-outline">Add note</button>  teal outline: a secondary action (above)
     <button class="ui-btn-plain">Cancel</button>      grey outline: neutral
   The older names are listed beside each so every page's buttons follow a change made here.
   Their padding stays their own (a toolbar button and a dialog button are different sizes). */
.ui-btn, .ui-btn-plain { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; box-sizing: border-box; padding: 0 14px; border: 1px solid; font: inherit; font-size: 13.5px; line-height: 1; white-space: nowrap; }
.ui-btn, .send-btn, .btn-primary, .pb-btn-primary, .btn-create-meeting, .btn-close-meeting {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; border-radius: var(--ui-r-sm); cursor: pointer;
}
:is(.ui-btn, .send-btn, .btn-primary, .pb-btn-primary, .btn-create-meeting, .btn-close-meeting):hover:not(:disabled) { filter: brightness(1.06); }
.ui-btn:disabled { opacity: .45; cursor: not-allowed; }
.ui-btn-plain, .pb-btn, .routine-log-btn, .btn-reopen-meeting, .hiring-pager-btn {
  border-color: var(--border); border-radius: var(--ui-r-sm); cursor: pointer;
}
.ui-btn-plain { background: transparent; color: var(--text); }
.ui-btn-plain:hover { border-color: var(--text-muted); }

/* ---- ui-seg: the view switch (Table | Board | Calendar) -------------------------------
   <div class="ui-seg"><button class="ui-seg-btn is-active"><svg/>Table</button>…</div>
   Older names: .iv-btn (Issues List, CRM), .kd-view-btn and .kd-seg-btn (Key Information),
   .hiring-view-btn. */
.ui-seg, .hiring-views { display: inline-flex; gap: 6px; padding: 0; border: 0; }
.ui-seg-btn, .iv-btn, .kd-view-btn, .hiring-view-btn, .kd-seg-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
  border: 1px solid transparent; border-radius: var(--ui-r-pill); background: transparent;
  color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer;
}
:is(.ui-seg-btn, .iv-btn, .kd-view-btn, .hiring-view-btn, .kd-seg-btn) svg { width: 14px; height: 14px; }
:is(.ui-seg-btn, .iv-btn, .kd-view-btn, .hiring-view-btn, .kd-seg-btn):hover { color: var(--text); }
:is(.ui-seg-btn, .iv-btn, .kd-view-btn, .hiring-view-btn, .kd-seg-btn).is-active { color: var(--text); background: var(--ui-fill-strong); }

/* ---- ui-check: the checkbox (Tom, 4 Oct 2026) ---------------------------------------------
   <input type="checkbox">   Every checkbox on the site is this one: 14px, a light outline,
   teal with a white tick once checked. Nothing to add to the markup. A switch (role="switch",
   or an input inside .rec-toggle / .if-done-toggle) is a different control and is left alone. */
input[type="checkbox"]:not([role="switch"]):not(:is(.rec-toggle, .if-done-toggle) *) {
  -webkit-appearance: none; appearance: none; flex: none; box-sizing: border-box; width: 14px; height: 14px; margin: 0;
  border: 1px solid var(--ui-check-line); border-radius: 4px; background: transparent center / 10px 10px no-repeat;
  vertical-align: middle; cursor: pointer; transition: border-color .12s, background-color .12s;
}
input[type="checkbox"]:not([role="switch"]):not(:is(.rec-toggle, .if-done-toggle) *):hover { border-color: var(--text-muted); }
input[type="checkbox"]:not([role="switch"]):not(:is(.rec-toggle, .if-done-toggle) *):focus-visible { outline: 2px solid rgba(31, 185, 167, .45); outline-offset: 1px; }
input[type="checkbox"]:not([role="switch"]):not(:is(.rec-toggle, .if-done-toggle) *):checked,
input[type="checkbox"]:not([role="switch"]):not(:is(.rec-toggle, .if-done-toggle) *):indeterminate { border-color: var(--accent); background-color: var(--accent); }
input[type="checkbox"]:not([role="switch"]):not(:is(.rec-toggle, .if-done-toggle) *):checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5'/%3E%3C/svg%3E");
}
input[type="checkbox"]:not([role="switch"]):not(:is(.rec-toggle, .if-done-toggle) *):indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h6'/%3E%3C/svg%3E");
}
input[type="checkbox"]:not([role="switch"]):not(:is(.rec-toggle, .if-done-toggle) *):disabled { opacity: .4; cursor: default; }

/* ---- ui-page-add: a page's New / Add button always sits at the RIGHT end of its top row ----
   (Tom, 4 Oct 2026.) Give the button .ui-page-add inside a flex row and it goes to the right.
   The older rows are listed so every main page follows: Reports and forecasts (+ New), the
   Issues List / Hiring / SOPs / Playbooks / Key Information toolbars, Board Meetings. */
.ui-page-add, .issues-toolbar > .post-action-add, .rb-bar-left > .rb-new, .btn-create-meeting { margin-left: auto; }
.rb-bar-left { flex: 1 1 auto; }
.rb-bar-left > .rb-new { order: 9; }

/* ---- ui-pagebar: the grey bar across the top of a list page ---------------------------------
   (Tom, 5 Oct 2026, for Weekly Forecast.) The page's icon tile and name on the left, its New
   button (.ui-page-add) at the right. The same bar as Reports and forecasts (.rb-bar) and
   Charts of accounts (.coa-bar), whose own rules sit in their templates.
     <div class="widget ui-page">
       <div class="ui-pagebar"><span class="ui-pagebar-ic"><svg/></span>
         <span class="ui-pagebar-title">Weekly forecasts</span>
         <button class="ui-pagebar-new">+ New</button></div> ... </div>
   A <select> in the bar becomes the site's dropdown as a grey pill; .ui-pagebar-meta is a quiet line of detail.
   .ui-page          a widget that is a whole page of its own: no card around it
   .ui-pagebar-new   the bar's main button: solid teal, at the bar's right end. "+ New" on a list page;
                     "Close Weekly Forecast" on an open weekly forecast (Tom, 8 Oct 2026).
                     ONE button for every such bar (Tom, 5 Oct 2026): Reports, Weekly Forecast
                     and Charts of accounts all carry this class and no look of their own. */
body.theme-slate .widget.ui-page, body.theme-slate.light .widget.ui-page, .widget.ui-page.ui-page {
  background: transparent; box-shadow: none; border: 0; border-radius: 0; padding: 0; overflow: visible;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.ui-pagebar {
  display: flex; align-items: center; gap: 9px; min-height: 50px; box-sizing: border-box; margin: 0 8px 12px 2px; padding: 6px 8px 6px 10px;
  border-radius: var(--ui-r); background: rgba(127, 127, 127, .14); color: #f4f7f7;
}
body.light .ui-pagebar { background: #e9ebec; color: #0e0e12; }
.ui-pagebar-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #b9c2c6; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
body.light .ui-pagebar-ic { color: #5e6e74; background: rgba(94, 110, 116, .12); box-shadow: inset 0 0 0 1px rgba(94, 110, 116, .38); }
.ui-pagebar-ic svg { width: 15px; height: 15px; }
.ui-pagebar-title { min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the title typed over where it stands (an open weekly forecast): text until the mouse or the cursor is on it */
input.ui-pagebar-title { field-sizing: content; min-width: 6ch; max-width: 100%; height: 30px; box-sizing: border-box; margin: 0 -4px 0 -6px; padding: 0 6px; border: 0; border-radius: var(--ui-r-sm); background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 600; text-overflow: ellipsis; cursor: text; }
input.ui-pagebar-title:hover { background: var(--ui-hover); }
input.ui-pagebar-title:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: transparent; }
.ui-pagebar-new {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; height: 30px; min-width: 0; box-sizing: border-box;
  margin-left: auto; padding: 0 11px; border: 1px solid var(--accent); border-radius: var(--ui-r-sm); background: var(--accent); color: #fff;
  font: inherit; font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer;
}
.ui-pagebar-new:hover:not(:disabled) { filter: brightness(.93); }
.ui-pagebar-new:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ui-pagebar-new:disabled { opacity: .45; cursor: default; }
/* a dropdown in the bar (Week ending 9 Oct 2026): the grey pill of a tag, with an arrow; and a quiet line of
   detail beside it (Last edited ... by ...) */
.ui-pagebar .fsel-btn { height: 26px; padding: 0 8px 0 10px; border: 0; border-radius: var(--ui-r-pill); background: var(--ui-fill-strong); color: var(--text-muted); font-size: 12px; font-weight: 500; }
.ui-pagebar .fsel-btn:hover, .ui-pagebar .fsel-btn[aria-expanded="true"] { background: var(--ui-selected); color: var(--text); }
.ui-pagebar-meta { min-width: 0; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a second, quiet action in the bar (All weekly forecasts): the grey outline button at the bar's size; a link takes no underline */
.ui-pagebar .ui-btn-plain { height: 30px; padding: 0 11px; font-size: 13px; }
a.ui-btn, a.ui-btn-plain { text-decoration: none; }

/* ---- ui-btn-size: button sizes and states the pages add ---------------------------------
   .is-lg is the larger main button on a page of its own (Sign minutes, Screen applications).
   A button that cannot be pressed is faded; one whose job is done turns to an outline. */
.ui-btn.is-lg, .minutes-cta-btn, .minutes-sign-btn, .hiring-confirm-btn, .hiring-screen-btn, .playbook-record-btn { font-size: 14px; }
.ui-btn svg, .hiring-confirm-btn svg, .hiring-generate-btn svg, .hiring-screen-btn svg { flex: none; }
:is(.hiring-confirm-btn, .hiring-generate-btn, .hiring-screen-btn):disabled { opacity: .45; cursor: not-allowed; filter: none; }
.hiring-screen-btn.is-screening:disabled { opacity: 1; cursor: progress; }
:is(.btn-generate-minutes, .btn-circulate-minutes):disabled:not([data-requested]), .btn-send-md:disabled[title], button.btn-join-meeting:disabled {
  background: var(--ui-fill-strong); color: var(--text-muted); border-color: var(--border); cursor: not-allowed;
}
:is(.btn-generate-minutes, .btn-circulate-minutes)[data-done] { background: transparent; color: var(--accent); filter: none; }
:is(.btn-generate-minutes, .btn-circulate-minutes)[data-done]:hover:not(:disabled) { background: var(--ui-teal-tint); }
.playbook-record-btn.is-recording { background: #e5687a; border-color: #e5687a; }
.playbook-record-btn.is-writing { background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); cursor: default; filter: none; }
/* main buttons under older names: Join meeting (a button), the recorder's reminder (its own red) */
button.btn-join-meeting, .rec-reminder-btn { border-radius: var(--ui-r-sm); font-size: 13px; font-weight: 500; }
button.btn-join-meeting { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.rec-reminder-btn { background: var(--rec); border: 1px solid var(--rec); color: var(--rec-on); }
/* outline buttons under older names: Open, Join meeting (a link), a routine's Ask / New playbook */
.btn-open, a.btn-join-meeting, html body .routine-panel .routine-newbook, html body .routine-panel .routine-ask-btn {
  border: 1px solid var(--accent); border-radius: var(--ui-r-sm); background: transparent; color: var(--accent);
  font-size: 13.5px; font-weight: 500; filter: none; box-shadow: none;
}
.btn-open:hover, a.btn-join-meeting:hover, html body .routine-panel .routine-newbook:hover:not(:disabled), html body .routine-panel .routine-ask-btn:hover:not(:disabled) {
  background: var(--ui-teal-tint); color: var(--accent); border-color: var(--accent); filter: none; text-decoration: none;
}
/* plain buttons under older names */
.board-reminder-snooze-btn { background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: var(--ui-r-sm); font-size: 13px; font-weight: 500; }
.board-reminder-snooze-btn:hover { border-color: var(--text-muted); color: var(--text); }

/* ---- ui-btn-danger: delete, as a button with words ----------------------------------------
   <button class="ui-btn-danger"><svg/>Delete</button>   (an icon alone is .ui-iconbtn.is-danger) */
.ui-btn-danger, .btn-delete-meeting, .issue-delete-btn {
  background: transparent; color: #e5687a; border: 1px solid rgba(229, 104, 122, .45); border-radius: var(--ui-r-sm);
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.ui-btn-danger { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; font-family: inherit; }
:is(.ui-btn-danger, .btn-delete-meeting, .issue-delete-btn):hover { background: rgba(229, 104, 122, .10); border-color: #e5687a; }

/* ---- ui-btn-link: a button that reads as quiet text (Sign out, Cancel in a footer) ---------- */
.ui-btn-link, .btn-link { background: none; border: 0; color: var(--text-muted); font-size: 13px; cursor: pointer; }
:is(.ui-btn-link, .btn-link):hover { color: var(--text); }

/* ---- ui-toolbtn: a toolbar's pill button (Filters, Fields, Today) -------------------------
   <button class="ui-toolbtn"><svg/>Filters</button>   .is-active when it is holding something. */
.ui-toolbtn, .if-menu-btn, .cf-fields-btn, .kd-today-btn, .cf-mini-btn {
  color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--ui-r-pill);
  font: inherit; font-size: 13px; cursor: pointer;
}
.ui-toolbtn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; white-space: nowrap; }
.cf-mini-btn { background: transparent; font-size: 12.5px; }
:is(.ui-toolbtn, .if-menu-btn, .cf-fields-btn, .kd-today-btn, .cf-mini-btn):hover, :is(.ui-toolbtn, .cf-fields-btn)[aria-expanded="true"] { border-color: var(--text-muted); }
.if-menu-btn:focus-visible { outline: 2px solid #5e6e74; outline-offset: -1px; }
:is(.ui-toolbtn, .if-menu-btn).is-active, .if-tag { color: #fff; background: #3f4649; border-color: #3f4649; }
body.theme-slate:not(.light) :is(.ui-toolbtn, .if-menu-btn).is-active, body.theme-slate:not(.light) .if-tag { background: #5e6669; border-color: #5e6669; }
.if-tag { font-size: 12px; line-height: 20px; padding: 0 9px; border-radius: var(--ui-r-pill); }   /* an applied filter, beside the count */

/* ---- ui-iconbtn under older names: the panel's buttons, the editor's toolbar, field tools ---- */
.drawer-btn, .cf-icon-btn, .label-colour-btn, .idt-btn, .bm-info-btn {
  border: 0; border-radius: var(--ui-r-sm); background: transparent; color: var(--text-muted); cursor: pointer;
}
.idt-btn { font-size: 13px; }
:is(.drawer-btn, .label-colour-btn, .idt-btn, .bm-info-btn):hover, .cf-icon-btn:hover:not(:disabled), .label-colour-btn:focus-visible, .bm-info-btn[aria-expanded="true"] {
  background: var(--ui-fill); color: var(--text); outline: none;
}
.cf-icon-btn.cf-danger:hover { color: var(--neg); }
.cf-icon-btn:disabled { cursor: default; }
/* a comment count on a row: quiet until the row is under the mouse, teal once it has comments */
.action-comment-btn { color: var(--text-muted); background: transparent; border: 1px solid transparent; border-radius: var(--ui-r-pill); font-size: 12px; }
.action-comment-btn:hover, .action-comment-btn.has-comments, .action-comment-btn.open { color: var(--accent); }
.action-comment-btn.has-comments, .action-comment-btn.open { border-color: var(--border); }
/* an empty person field's prompt */
.assign-btn { font-size: 13px; color: var(--accent); background: transparent; border: 1px dashed var(--border); border-radius: var(--ui-r-sm); }
.issue-assignees-summary:hover .assign-btn { border-color: var(--accent); background: var(--ui-teal-tint); }

/* ---- ui-tag under older names: every small label is one shape --------------------------------
   A pill, 12px, weight 500. The colour says what it is: grey by default, the Notion palette for
   a choice (.ntag .t-*), teal outline for a live meeting, amber for a guest. */
.status-tag, .kind-tag, .meeting-tag, span.meeting-type:not(.fsel-btn), .dm-guest-tag, .dm-live-tag, .dm-broker-pill, .browser-pill, .hiring-tab-n, .kd-chip-field {
  border-radius: var(--ui-r-pill); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none;
}
.status-tag { background: #FDECC8; color: #402C1B; border: 0; font-family: inherit; }
.status-tag.minutes-tag { background: #DBEDDB; color: #1C3829; }
.kind-tag.k-rock { color: #5c2e49; background: rgba(92, 46, 73, .14); }
.kind-tag.k-pebble, .hiring-tab-n { color: var(--text-muted); background: var(--ui-fill-strong); }
body.theme-slate:not(.light) .kind-tag.k-rock { color: #e4cfdc; background: rgba(154, 140, 152, .3); }
.meeting-type, .meeting-tag.closed { color: var(--text-muted); border: 1px solid var(--border); }
.meeting-tag { color: var(--accent); border: 1px solid var(--accent); }
.dm-live-tag { color: var(--accent); border: 0; background: rgba(31, 185, 167, .14); }
.dm-guest-tag { color: #8a5a00; border: 0; background: #FDECC8; }
.dm-broker-pill { font-weight: 500; }
.browser-pill.is-yours { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.browser-pill.is-recording { background: color-mix(in srgb, #e5687a 14%, transparent); color: #e5687a; border-color: color-mix(in srgb, #e5687a 35%, transparent); }
.day-item .kd-chip-field, .kd-day-item-name .kd-chip-field { background: var(--ui-fill-strong); }
/* a figure's change on a metric card: green up, red down */
.metric-chip { border-radius: var(--ui-r-pill); }
.metric-compare.pos .metric-chip { background: var(--pos-tint); color: var(--spark); }
.metric-compare.neg .metric-chip { background: var(--neg-tint); color: var(--neg); }
/* a reference number (I-GE-4): fixed-width, quiet */
.ui-ref, .ref-tag { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: .02em; color: var(--text-muted); }

/* ---- ui-select-lg: the large labelled dropdown (Routines, Playbooks) -----------------------
   <label class="routine-pill routine-pill-sel"><span class="routine-pill-l">Runs</span><select class="routine-pill-in">…</select></label> */
.ui-select-lg, .routine-pill, .playbook-scope-btn { border: 1.5px solid var(--border); border-radius: var(--ui-r); background: var(--surface); }
body.light :is(.ui-select-lg, .routine-pill, .playbook-scope-btn) { background: #fff; border-color: #e6e8e9; }
:is(.ui-select-lg, .routine-pill, .playbook-scope-btn):hover { border-color: var(--text-muted); }
.routine-pill:focus-within, .playbook-scope-btn[aria-expanded="true"], .playbook-scope-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.playbook-scope-btn, .routine-pill-in { color: var(--text); font-size: 14px; font-weight: 500; }
.routine-pill-in { border: 0; background: transparent; }
.routine-pill-l { font-size: 14px; font-weight: 350; color: var(--text-muted); }
.routine-pill-sel::after { border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); }

/* ---- the house modal's fields (.pb-dialog: New playbook, New SOP, New weekly forecast) -------
   A dropdown and a date inside the modal are the site's own controls (.fsel, .ndate), drawn as
   the modal's 44px field box (Tom, 5 Oct 2026):
     <div class="pb-dselect"><select>…</select></div>     <input type="date" class="pb-dinput"> */
.pb-dselect .fsel { flex: 1; min-width: 0; height: 100%; }
.pb-dselect .fsel-btn { flex: 1; min-width: 0; height: 100%; border: 0; border-radius: inherit; background: transparent; color: var(--text); font-size: 14px; font-weight: 500; padding: 0 36px 0 14px; }
.pb-dselect .fsel-btn:focus-visible { outline: none; }
.pb-dselect .fsel-caret { display: none; }   /* the box draws its own arrow */
.pb-dbody .ndate { display: block; max-width: 320px; }
.pb-dbody .ndate-display { display: block; width: 100%; height: 44px; box-sizing: border-box; padding: 0 14px; border: 1.5px solid var(--border); border-radius: var(--ui-r); background: var(--surface); font-size: 14px; font-weight: 500; text-align: left; }
body.light .pb-dbody .ndate-display { background: #fff; border-color: #e6e8e9; }
.pb-dbody .ndate-display:hover { border-color: var(--text-muted); }
.pb-dbody .ndate-display:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* ---- ui-figs: a table of figures typed in period by period (Weekly Forecast) ------------------
   The house table with the line names down the left and a column per month (Tom, 5 Oct 2026):
     <table class="issues-table ui-table ui-figs"> <td class="ui-figs-name">Backlog</td>
       <td class="ui-num ui-figs-cell"><input class="ui-figs-in"></td> …
   tr.ui-figs-head   a title over the lines beneath it        tr.ui-figs-gap   an empty line, as tall as any other (.is-shaded: a grey band between two blocks)
   tr.ui-figs-head.is-light   a title that is not bold (Tom, 5 Oct 2026)
   tr.is-calc        a line worked out from others: it cannot be typed into, and is white like the rest
                     (no grey on totals or headings, Tom, 5 Oct 2026)
   tr.is-subtotal / tr.is-total   a worked-out line that adds up: the same weight as any other line
   tr.is-strong      a line in bold
   tr.is-main        the line that matters most: ruled off with a double line above it and below it, right across
                     (--ui-line-main). No fill: a green row was tried and taken off (Tom, 8 Oct 2026)
   tr.is-indent      a line set in under its heading (Tom, 5 Oct 2026)
   tr.is-assumption  a typed line the rest is worked out from: its figures sit on the house light yellow
                     (--ui-typed; green until 8 Oct 2026)
   th/td.is-now      the month the page is for, the only one typed into: its name in the text colour, and
                     an assumption line's cell on yellow there and nowhere else
   td.is-past        a month before it: grey figures, nothing to type
   td.is-future      a month after it: the cell greyed out (--ui-disabled), nothing to type
   th/td.is-collapsed  a month folded away so twelve columns show at once (Tom, 15 Oct 2026): the earliest
                     months of the year give way to the three months ahead, which are never folded. The
                     .ui-figs-more button beside the year opens them (table.is-open shows them again)
   th/td.ui-figs-ytd the Year to date column at the right end (Tom, 15 Oct 2026): the months of the year so
                     far added up, for the lines the template marks `ytd` (Total Invoice Value and the same
                     months last year). Ruled off from the months by a heavier line
   .ui-figs-more     that button: a chevron pointing LEFT (that is the way they open) and the months' names,
                     at the right end of the year cell, hard against the first month showing
   tr.is-calc        (below) also carries a line read from somewhere else, never typed: Total Invoice Value
                     last year, what the same month invoiced a year earlier, from Xero (Tom, 15 Oct 2026)
   tr.ui-figs-toolrow  a slim grey row above the month names: each month's tools (.ui-figs-tools) over its
                     name, so the names stay clean (Tom, 5 Oct 2026)
   .ui-figs-tool     a small button in that row: .ui-figs-sync (that month's figures, from their source) and
                     .ui-figs-lock (a padlock: shut = aria-pressed, the month cannot be typed into)
   th/td.is-locked   a month whose padlock is shut: grey figures, boxes disabled, no yellow
   td.is-edited      a figure typed over since its month was last synced: an amber corner (--ui-edited)
   td.is-up / .is-down  a figure read against the line under it (Total Invoice Value against the same month a
                     year earlier, Tom 15 Oct 2026): a small solid arrow at the left of the cell, green and up
                     where this year is the greater, red and down where it is the lesser. Nothing where either
                     month is blank or the two are the same
   .ui-figs-synced   a small sync mark left of the letter of a line its source fills, set in the indent so
                     the letters stay in one column; the line's tip says where the figure comes from (Tom, 8 Oct 2026)
   .ui-figs-notes    notes under the grid, a set for each month (Tom, 8 Oct 2026): the house rich text box, full
                     width of the months (it starts at January, not under the line names), on white like the
                     grid (.ui-figs-notes-box), close under the sub-menu that picks the month. No title of its
                     own: the underlined item says which month is being read
   tr.ui-figs-foot   a sub-menu under the grid, in the page sub-menu's look (.pagetabs): on the page's own
                     background, along a hairline, an item under each month's column (.ui-figs-tab, "Jan Notes")
                     that shows that month's notes in the box; .is-active is the month being read (in ink, a
                     teal underline on the hairline, the full width of its column), with a lighter line between the
                     months that carries the grid's columns down (--ui-line-on-fill). Nothing marks a month that has notes (a dot was tried and
                     taken off, Tom, 8 Oct 2026)
   Every line carries a letter in a coloured tile (.ui-tile), and a worked-out line shows its sum in those
   letters as a tip beside its name, only while the mouse is on the name, so every row is one height,
   every name one line and the first column one width (Tom, 5 Oct 2026):
     <td class="ui-figs-name"><span class="ui-figs-line"><span class="ui-tile t-green">C</span>
       <span class="ui-figs-label">Total</span><span class="ui-figs-calc"><span class="ui-tile t-blue">A</span>
       <span class="ui-figs-op">+</span><span class="ui-tile t-orange">B</span></span></span></td> */
.ui-figs { table-layout: fixed; min-width: 1060px; font-size: 13.5px; }
/* The Weekly Forecast's grid fills the page and keeps every month the same width, folded months and
   last-year columns included (Tom, 15 Oct 2026). `--wf-cols` is how many columns are showing: the page
   sets it and changes it as columns are folded or opened, so the months stay legible and the grid
   scrolls sideways only once there are too many for the screen. */
.ui-wfigs { --wf-col-w: 68px; width: 100%; min-width: calc(286px + (var(--wf-cols, 12) + 1) * var(--wf-col-w)); }
/* Every month the same, narrow width, and the Year to date column the same again (Tom, 15 Oct 2026); the
   line names take whatever room is left over. A year's total is wider than a month's, so that column's
   figures are set a little tighter to fit the width the months have. */
.ui-wfigs > colgroup > col[data-monthcol], .ui-wfigs > colgroup > col.ui-figs-ytdcol { width: var(--wf-col-w); }
.ui-wfigs > tbody > tr > td.ui-figs-ytd { padding: 0 4px; letter-spacing: -.1px; }
.ui-wfigs .ui-figs-name { width: auto; min-width: 286px; }
/* The year so far: ruled off from the months, and its totals in the text colour. */
.ui-figs .ui-figs-ytd { border-left: 2px solid var(--ui-line-head); }
.ui-figs > thead > tr > th.ui-figs-ytd { white-space: normal; line-height: 1.15; }
/* A folded column takes no width at all: its cells are not shown, but a table laid out to a fixed grid
   still holds its column open and the months showing would be squeezed by the ones that are not. */
.ui-wfigs > colgroup > col.ui-figs-namecol { width: 286px; }
.ui-wfigs:not(.is-open) > colgroup > col.is-fold { width: 0; }
/* The year, and hard against the first month showing, the button that opens the months folded away. */
.ui-wfigs > thead .ui-figs-year { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ui-figs > thead > tr > th, .ui-figs > tbody > tr > td { height: 38px; padding: 0 6px; }
.ui-figs .ui-figs-name { width: 286px; padding-left: 12px; text-align: left; line-height: 1.25; }   /* the longest name on one line */
.ui-figs-line { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ui-figs-line > .ui-tile { width: 18px; height: 18px; margin: 0; top: 0; font-size: 10.5px; }
.ui-figs-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The sum is a tip (.ui-figs-tip, one for the page, filled from the row's hidden .ui-figs-calc): it shows to the
   right of the line's name while the mouse is on the name. It is the page turned inside out so it stands out:
   dark on the light theme, white on the dark one (Tom, 5 Oct 2026). */
.ui-figs-calc { display: none; }
.ui-figs-tip {
  position: fixed; z-index: 60; display: none; align-items: center; gap: 4px; padding: 6px 9px; border-radius: var(--ui-r-sm);
  background: #ffffff; color: #5e6e74; box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  font-size: 12px; font-weight: 400; line-height: 1; white-space: nowrap; pointer-events: none;
}
body.light .ui-figs-tip { background: #23262b; color: #c9d0d4; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); }
.ui-figs-tip.is-on { display: flex; }
.ui-figs-tip .ui-tile { width: 16px; height: 16px; margin: 0; top: 0; font-size: 10px; }
.ui-figs-synced { position: absolute; left: -17px; top: 50%; display: grid; place-items: center; width: 12px; height: 12px; margin-top: -6px; color: var(--text-muted); }
.ui-figs > tbody > tr:not(.is-indent) .ui-figs-synced { position: static; flex: none; margin: 0; }   /* no indent to sit in: in the line, before the letter */
.ui-figs-synced svg { width: 11px; height: 11px; }
.ui-figs-notes { margin: 8px 0 0 289px; }   /* set in by the name column (286px) and the grid's own edge: it starts at January (Tom, 8 Oct 2026) */
.ui-figs-notes-box { background: rgba(255, 255, 255, .04); }
body.light .ui-figs-notes-box { background: #fff; }
/* a month's notes as comments (Tom, 9 Oct 2026): one white panel under the grid, a line for each comment in the
   house comment's look (face, name, how long ago, the words), and the box to write the next one at its foot,
   with the house rich text toolbar over it so a long update keeps its bold and lists */
.ui-figs-comments { padding: 4px 16px 14px; border: 1px solid var(--border); border-radius: 6px; }
.ui-figs-comments > .ui-list { margin-top: 0; }
.ui-figs-comments > .ui-list[hidden] { display: none; }
.ui-figs-comments > .ui-list > .ui-item:first-child { padding-top: 14px; }
.ui-figs-comments .ui-note-body.ui-rich p { margin-bottom: 10px; }
.ui-figs-comments .ui-note-body.ui-rich li { margin-bottom: 4px; }
.ui-figs-comments-none { margin: 14px 2px; }
.ui-figs-comments-none[hidden] { display: none; }
.ui-figs-comment-form { display: flex; align-items: flex-start; gap: 12px; padding: 14px 2px 0; border-top: 1px solid var(--ui-line); }
.ui-figs-comments > .ui-list[hidden] + .ui-figs-comments-none[hidden] + .ui-figs-comment-form { border-top: 0; }
.ui-figs-comment-form .issue-desc-edit { min-height: 62px; }
.ui-figs-notes-box.issue-desc { min-height: 74px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; }   /* read only: the same box, nothing to type */
.ui-figs > tfoot > tr.ui-figs-foot > td { height: 40px; padding: 0; border: 0; border-bottom: 1px solid var(--border); background: var(--ui-fill) !important; }   /* on the page, not in the grid: no column lines */
/* A line between the months brings the grid's columns down through the band: lighter than the grey, so it shows
   (Tom, 8 Oct 2026). Painted as a background, not a border, so the hairline under the items is not broken. */
.ui-figs > tfoot > tr.ui-figs-foot > td:not(.ui-figs-name):not(:last-child) { background: linear-gradient(var(--ui-line-on-fill), var(--ui-line-on-fill)) right top / 1px 100% no-repeat, var(--ui-fill) !important; }
.ui-figs > tfoot > tr.ui-figs-foot > td.ui-figs-name { border-bottom: 0; }   /* the hairline runs under the months only, not left of January (Tom, 8 Oct 2026) */
.ui-figs-tab { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 100%; box-sizing: border-box; height: 40px; margin: 0; padding: 0 4px 0 0; border: 0; border-radius: 0; background: none; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 350; white-space: nowrap; cursor: pointer; }
.ui-figs-tab:hover { color: var(--text); }
.ui-figs-tab.is-active { color: var(--text); font-weight: 500; }
.ui-figs-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }   /* the full width of the month's column, not of the words (Tom, 8 Oct 2026) */
.ui-figs-tab:focus-visible { outline: 2px solid #5e6e74; outline-offset: -2px; border-radius: 6px; }
.ui-figs > tbody > tr > td.ui-figs-cell { padding: 0; }
.ui-figs-in { display: block; width: 100%; height: 37px; box-sizing: border-box; margin: 0; padding: 0 6px; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; font-variant-numeric: tabular-nums; text-align: right; }
.ui-figs-in:hover { background: var(--ui-hover); }
.ui-figs-in:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: transparent; }
.ui-figs-in[aria-invalid="true"] { outline: 2px solid var(--ui-danger); outline-offset: -2px; }
.ui-figs > tbody > tr.ui-figs-head > td { height: 34px; padding-left: 12px; color: var(--text-muted); font-size: 12.5px; font-weight: 600; }   /* on the table's own white, not a grey band (Tom, 5 Oct 2026) */
.ui-figs > tbody > tr.ui-figs-gap.is-shaded > td { background: var(--ui-fill); }
.ui-figs > tbody > tr.is-indent > .ui-figs-name { padding-left: 30px; }
.ui-figs > tbody > tr.ui-figs-head.is-light > td { font-weight: 400; }
.ui-figs > tbody > tr.is-assumption > td:is(.is-now, .is-past):not(.is-locked) { background: var(--ui-typed); }   /* the house light yellow, where it can be typed */
.ui-figs > tbody > tr.is-assumption > td.is-past:not(.is-locked):not(.ui-figs-cell) { background: transparent; }   /* someone who cannot edit sees no yellow on a month that is over */
.ui-figs > tbody > tr > td.is-past, .ui-figs > tbody > tr > td.is-locked { color: var(--text-muted); }
.ui-figs > tbody > tr > td.ui-figs-cell.is-past:not(.is-locked) { color: var(--text); }   /* unlocked: its figures read as the open month's do */
.ui-figs > tbody > tr > td.is-future { background: var(--ui-disabled); color: var(--text-muted); font-style: italic; }
/* The arrow against last year: solid, small, at the left of the cell so it never crowds the figure. */
.ui-figs > tbody > tr > td.is-up, .ui-figs > tbody > tr > td.is-down { position: relative; }
.ui-figs > tbody > tr > td.is-up::after, .ui-figs > tbody > tr > td.is-down::after {
  content: ""; position: absolute; left: 9px; top: 50%; width: 0; height: 0; margin-top: -4px;
  border-left: 4.5px solid transparent; border-right: 4.5px solid transparent;
}
.ui-figs > tbody > tr > td.is-up::after { border-bottom: 7px solid var(--spark); }
.ui-figs > tbody > tr > td.is-down::after { border-top: 7px solid var(--neg); margin-top: -3px; }
.ui-figs > thead > tr > th.is-future { font-style: italic; }
/* Twelve columns at a time: a folded month is squeezed to nothing until its button opens it (Tom, 15 Oct
   2026). Its cells stay in the table and its column is given no width (the colgroup above), because a cell
   that is not rendered at all still holds its column open and squeezes the months that ARE showing. */
.ui-wfigs:not(.is-open) > * > tr > .is-collapsed {
  width: 0; padding: 0; border-right-width: 0; overflow: hidden; visibility: hidden;
}
.ui-figs-more {
  flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px 1px 3px;
  border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); background: none;
  color: var(--text-muted); font-size: 11px; font-weight: 500; line-height: 1.5; cursor: pointer;
}
.ui-figs-more:hover { color: var(--text); border-color: var(--text-muted); }
.ui-figs-more svg { width: 11px; height: 11px; transition: transform .12s ease; }
.ui-figs-more[aria-expanded="true"] svg { transform: rotate(180deg); }   /* open: the chevron turns back the way they fold */
/* The main line's double lines. The line above it is its own, so the row before it gives up its line. The lines add
   to the row's height, so its figures keep the room every other line has. */
.ui-figs > tbody > tr:has(+ tr.is-main) > td { border-bottom: 0; }
.ui-figs > tbody > tr.is-main > td { border-top: 3px double; border-bottom: 3px double; border-top-color: var(--ui-line-main) !important; border-bottom-color: var(--ui-line-main) !important; }   /* !important: every table line is forced to --ui-line further down */
.ui-figs > thead > tr > th.is-now { color: var(--text) !important; font-weight: 600 !important; }
.ui-figs > thead > tr.ui-figs-toolrow > th { height: 24px; padding: 0 3px; background: var(--ui-fill) !important; border-right-color: transparent; }   /* a plain grey band, no column lines */
.ui-figs-tools { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.ui-figs-tool { display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--text-muted); font-weight: 400; cursor: pointer; }
.ui-figs-tool:hover { background: var(--ui-hover); color: var(--accent); }
.ui-figs-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ui-figs-tool:disabled { opacity: .4; cursor: progress; }
.ui-figs-tool svg { width: 11px; height: 11px; }
.ui-figs-lock[aria-pressed="true"] .ui-figs-lock-open, .ui-figs-lock:not([aria-pressed="true"]) .ui-figs-lock-shut { display: none; }
.ui-figs-lock:not([aria-pressed="true"]) { color: var(--accent); }   /* open: this month can be typed into */
.ui-figs-in:disabled { color: inherit; -webkit-text-fill-color: currentColor; opacity: 1; cursor: default; }
.ui-figs-in:disabled:hover { background: transparent; }
.ui-figs > tbody > tr > td.is-edited { position: relative; }
.ui-figs > tbody > tr > td.is-edited::after { content: ""; position: absolute; top: 0; right: 0; border-top: 8px solid var(--ui-edited); border-left: 8px solid transparent; pointer-events: none; }
.ui-figs > tbody > tr.is-strong > td, .ui-figs tr.is-strong .ui-figs-in { font-weight: 600; }   /* the only bold line: totals are plain (Tom, 5 Oct 2026) */

/* ---- ui-table under older names: a list's frame --------------------------------------------- */
.agenda-table-wrap { border: 1px solid var(--border); border-radius: var(--ui-r); }
.kd-table { background: var(--surface); }
.meetings-table { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }   /* Board Meetings: rows that open, not a <table> */

/* ---- ui-views: the views bar (underlined tabs along a hairline, then + for a new view) ----
   <div class="ivt-bar"><div class="ivt-tabs">(.ivt-tab > .ivt-tab-btn + .ivt-more)…</div>
     <span class="ivt-sep"></span><button class="ivt-add">+</button>
     <div class="ivt-menu" hidden>…</div><div class="ivt-pop" hidden>…</div></div>
   One set of rules for the Issues List (.ivt-bar), the CRM (.crm-views-bar) and Hiring
   (.hiring-ivt-bar): the containers differ only because each page's script binds its own. A
   page's plain sub-menu (.pagetabs, a board meeting's tabs) uses the same underline, below. */
.ivt-bar, .crm-views-bar, .hiring-ivt-bar { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; }
.ivt-bar, .crm-views-bar { margin-bottom: 14px; }
.ivt-add { margin: 6px 0; }   /* never sits on the divider, even with no tabs drawn (Tom, 28 Sep 2026) */
.ivt-tabs:empty + .ivt-sep { display: none; }
.ivt-tabs { display: flex; align-items: stretch; gap: 22px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ivt-tabs::-webkit-scrollbar { display: none; }
.ivt-tab { position: relative; display: flex; align-items: center; gap: 2px; flex: none; }
.ivt-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }
/* The underline sits ON the divider, in teal, like the page tabs (Tom, 30 Sep 2026). The
   tabs strip scrolls sideways, which clips anything drawn below it, so the divider is drawn
   inside the bar (::before, under the tabs) instead of as its border, and the tabs stretch to
   the bar's full height: the 2px underline then covers the 1px line exactly. */
.ivt-bar::before, .crm-views-bar::before, .hiring-ivt-bar::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--border); pointer-events: none;
}
.ivt-bar > .ivt-tabs, .crm-views-bar > .ivt-tabs, .hiring-ivt-bar > .ivt-tabs { align-self: stretch; position: relative; z-index: 1; }
.ivt-tab-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 2px;
  font: inherit; font-size: 14px; color: var(--text-muted); white-space: nowrap;
  background: none; border: 0; cursor: pointer;
}
.ivt-tab-btn:hover { color: var(--text); }
.ivt-tab.is-active .ivt-tab-btn { color: var(--text); font-weight: 500; }
.ivt-tab-btn:focus-visible, .ivt-more:focus-visible, .ivt-add:focus-visible { outline: 2px solid #5e6e74; outline-offset: -2px; border-radius: 6px; }
.ivt-shared { width: 14px; height: 14px; flex: none; opacity: 0.7; }
.ivt-star { color: var(--accent); font-weight: 600; margin-left: -2px; }
/* A tab is dragged along the bar to its place in the order, which is each person's own (Tom, 7 Oct
   2026; UI.viewDrag in ui.js). The one in the hand is lifted on a grey ground and follows the mouse. */
.ivt-tab.is-dragging { z-index: 2; border-radius: var(--ui-r-sm); background: var(--ui-hover); box-shadow: 0 0 0 4px var(--ui-hover); }
.ivt-tab.is-dragging .ivt-tab-btn { color: var(--text); }
.ivt-tabs.is-dragging, .ivt-tabs.is-dragging .ivt-tab-btn { cursor: grabbing; user-select: none; -webkit-user-select: none; }
/* how many a view holds: the count pill of a tab (.ui-tab-n), after the view's name */
.ivt-tab-btn > .ui-tab-n[hidden] { display: none; }
.ivt-more {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 26px;
  color: var(--text); background: none; border: 0; border-radius: 6px; cursor: pointer;
}
.ivt-more svg { width: 18px; height: 18px; }
.ivt-more:hover { background: rgba(127, 127, 127, 0.12); }
/* Same width selected or not (Tom, 16 Sep 2026): the ⋮ keeps its space on every
   tab, and each name reserves the width of its bold (active) self. */
.ivt-tab:not(.is-active) .ivt-more { visibility: hidden; pointer-events: none; }
.ivt-name-t { display: inline-flex; flex-direction: column; }
.ivt-name-t::after { content: attr(data-text); height: 0; overflow: hidden; visibility: hidden; font-weight: 500; user-select: none; pointer-events: none; }
.ivt-sep { flex: none; width: 1px; height: 22px; background: var(--border); }
.ivt-add {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.ivt-add svg { width: 16px; height: 16px; }
.ivt-add:hover { color: var(--text); border-color: #b9c0c6; }
.ivt-menu, .ivt-pop {
  position: absolute; z-index: 70; box-sizing: border-box; max-width: calc(100vw - 32px);
  background: var(--panel, var(--surface)); border: 1px solid var(--panel-border, var(--border)); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.ivt-menu[hidden], .ivt-pop[hidden], .ivt-scope-field[hidden] { display: none; }
/* ---- ui-agent-face: an agent's avatar (Tom, 6 Oct 2026) -------------------------------------
   Every agent's picture is Astra's face in the agent's own colour: static/avatars/<key>.svg, drawn
   by bin/make_agent_faces.py from the registry in app/agents.py. The picture is the whole avatar,
   so its holder has no ring, no disc behind it and no round clip: the hand-drawn edge must show.
   A holder that also takes a person's photo (.achip-av) is matched by where its picture comes from.
   (Kept here, above ui-menu, on purpose: the Email page's installs rewrite the stretch from
   ui-railpick to the head of section 3, and twice removed this block when it sat there.) */
.ui-agent-face, .achip-av:has(> img[src^="/static/avatars/"]) { border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; }
/* An inbox that belongs to a person, not an agent (Thomas's), has the same shape in the grey label's
   colours with the person's initials where the eyes would be (Tom, 6 Oct 2026). The shape is
   static/avatars/_initials.svg, drawn by the same script; the ink is the grey label's. It is drawn 8%
   larger than an agent's face: at the same size (both measure 20 by 19px in a 22px holder) the pale
   shape with letters in it looked smaller to Tom than the faces beside it. */
.achip-av.ui-mailbox-av:not(:has(img)) { border: 0 !important; border-radius: 0 !important; background: url("/static/avatars/_initials.svg?v=1") center / 108% 108% no-repeat !important; box-shadow: none !important; overflow: visible !important; color: #32302C !important; font-weight: 700; letter-spacing: 0; }
/* ---- ui-menu: a small menu that drops from a button (a pipeline column's "...", its hidden
   columns). The views bar's menu (.ivt-menu) by another name: fixed to the window, placed by
   the script that opens it.
     <div class="ui-menu" role="menu"><button class="ui-menu-item" role="menuitem"><svg/>Hide column</button></div> */
.ui-menu {
  position: fixed; z-index: 70; box-sizing: border-box; min-width: 190px; max-width: min(320px, calc(100vw - 32px)); max-height: min(60vh, 420px); overflow-y: auto;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--panel, var(--surface)); border: 1px solid var(--panel-border, var(--border)); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.ui-menu[hidden] { display: none; }
.ui-menu-label { padding: 6px 10px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ui-menu-rule { height: 1px; margin: 4px 0; background: var(--border); }
.ui-menu-n { margin-left: auto; padding-left: 12px; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ivt-menu { width: 230px; padding: 6px; display: flex; flex-direction: column; }
.ivt-menu-vis { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.ivt-menu-vis[hidden] { display: none; }
.ivt-vis { align-self: flex-start; }
.ivt-vis input:disabled ~ .rec-opt { cursor: default; }
.ivt-menu [data-act], .ui-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; text-align: left;
  font: inherit; font-size: 14px; color: var(--text); background: none; border: 0; border-radius: 6px; cursor: pointer;
}
.ivt-menu [data-act] svg, .ui-menu-item svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
.ivt-menu [data-act]:hover:not(:disabled), .ui-menu-item:hover, .ui-menu-item:focus-visible { background: rgba(127, 127, 127, 0.1); outline: none; }
.ivt-menu [data-act].is-danger:not(:disabled), .ivt-menu [data-act].is-danger:not(:disabled) svg { color: var(--neg); }
.ivt-menu [data-act]:disabled { opacity: 0.45; cursor: default; }
.ivt-pop { width: 280px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ivt-pop-title { margin: 0; font-size: 14px; font-weight: 500; color: var(--text); }
.ivt-name { font: inherit; font-size: 14px; color: var(--text); height: 32px; padding: 0 12px; box-sizing: border-box; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; }
.ivt-name:focus { outline: 2px solid #5e6e74; outline-offset: -1px; }

/* ---- ui-railpick: the picker at the head of a page's own rail (Tom, 6 Oct 2026) -----------
   Whose mail the Email page is showing: a button with a picture, a name and a quiet second
   line, which drops a .ui-menu of the same rows (.ui-railpick-menu). Collapsed, only the
   picture is left.
     <button class="ui-railpick"><span class="ui-railpick-av"><img></span>
       <span class="ui-railpick-text"><span class="ui-railpick-name">Cleo</span>
         <span class="ui-railpick-sub">agent@mail.example.com</span></span>
       <svg class="ui-railpick-caret"/></button>
   .ui-railpick-av.is-all   the grey tile that stands for "all of them" */
.ui-railpick {
  flex: none; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; box-sizing: border-box; margin: 0 0 12px; padding: 7px 8px;
  border: 1px solid var(--border); border-radius: var(--ui-r); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.ui-railpick:hover, .ui-railpick[aria-expanded="true"] { background: var(--ui-hover); }
.ui-railpick:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ui-railpick-av, .achip-av.ui-railpick-av { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; font-size: 11.5px; }
.ui-railpick-av.is-all { background: var(--ui-fill-strong); color: var(--text-muted); }
.ui-railpick-av svg { width: 16px; height: 16px; }
.ui-railpick-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ui-railpick-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-railpick-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-railpick-caret { flex: none; width: 14px; height: 14px; color: var(--text-muted); }
.ui-railpick-menu .ui-menu-item { padding: 7px 8px; }
/* its two sections (your own mailboxes, then the agents'), each under a small heading; and the row that connects another mailbox */
.ui-railpick.is-address .ui-railpick-name { white-space: normal; font-size: 13px; line-height: 1.25; }          /* a person's mailbox: its address, over two lines */
.ui-railpick.is-address .ui-railpick-sub { display: none; }
.ui-railpick-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }          /* the name on one line, the domain on the next: never broken inside either */
.ui-railpick-title { padding: 6px 10px 3px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.ui-railpick-note { margin: 0; padding: 4px 10px 6px; font-size: 12.5px; color: var(--text-muted); }
.ui-railpick-connect { display: flex; align-items: center; gap: 12px; padding: 6px 10px 4px; font-size: 12.5px; color: var(--text-muted); }
.ui-railpick-connect-label { margin-right: auto; }
.ui-railpick-connect .ui-linkbtn { margin-left: 0; }
.ui-mailbox-rail [hidden] { display: none !important; }
.ui-railpick-menu .ui-menu-item[aria-checked="true"] { background: var(--ui-selected); }
/* collapsed, the picture is one of the rail's 38px boxes on the rails' shared rows ("One set of
   rows for the three rails" in dashboard.css), so the folders under it are level with the sections */
body.crm-rail-mini .ui-railpick { justify-content: center; min-height: 38px; margin: calc((var(--rail-row) - 38px) / 2) 0; padding: 3px; border-color: transparent; }
body.crm-rail-mini .ui-railpick .ui-railpick-text, body.crm-rail-mini .ui-railpick .ui-railpick-caret { display: none; }

/* ---- ui-mailbox: a mailbox as a page (Email; Tom, 6 Oct 2026) -------------------------------
   The agents' AgentMail inboxes: templates/widgets/agent_email.html, static/agent_email.js.
   Its own menu is the CRM's rail (.crm-subrail) with a .ui-railpick at its head; the list is
   the house table, one conversation a row, an unread one in bold (tr.is-unread); an open
   conversation is the CRM's email rows (.ui-mailrow) with each email's own HTML in a frame
   (.ui-mailbox-frame: white in the light theme; in the dark one it has no page of its own and lies on the card, as in the CRM), each email a white card, and the CRM's composer.
     <div class="widget ui-page ui-mailbox"> <div class="ui-pagebar">…</div>
       <div class="ui-mailbox-rows"><table class="ui-table is-compact ui-mailbox-table">…</table></div>
       <div class="ui-mailbox-open"> a conversation </div> </div> */
.ui-mailbox .crm-subrail, .ui-mailbox .ui-railpick-menu, .ui-mailbox .ui-panel, .ui-mailbox .ui-mailbox-labelpop { display: none; }
/* A person's CRM record, at the right: the CRM's own record panel in a frame that fills this one. The
   frame is see-through at its name row, as that panel is in the CRM, so the page's dark header shows
   behind the name; this panel's two buttons (Open in the CRM, Close) lie over that row's right end.
   While it is open the email beside it gives it the room (body.has-crmpanel). */
.ui-panel.ui-mailbox-crmpanel { z-index: 32; background: transparent; }
.ui-panel.ui-mailbox-crmpanel .ui-panel-body, body.light .ui-panel.ui-mailbox-crmpanel .ui-panel-body { padding: 0; overflow: hidden; background: transparent; }
.ui-mailbox-crmframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.ui-mailbox-crmpanel > .ui-panel-bar { position: absolute; z-index: 2; top: 0; right: 0; height: var(--name-h, 40px); padding: 0 12px; border: 0; background: none; }
.ui-mailbox-crmpanel > .ui-panel-bar .drawer-btn { width: 28px; height: 28px; color: rgba(255, 255, 255, .7); }
.ui-mailbox-crmpanel > .ui-panel-bar .drawer-btn:is(:hover, :focus-visible) { color: #fff; background: rgba(255, 255, 255, .10); }
.ui-mailbox-crmpanel > .ui-panel-bar .ui-jump { display: inline-flex; align-items: center; gap: 2px; width: auto; padding: 0 6px; text-decoration: none; }
.ui-mailbox-crmpanel .ui-jump svg { width: 15px; height: 15px; }
.ui-mailbox-crmpanel .ui-jump svg + svg { width: 12px; height: 12px; }
body.has-crmpanel :is(.ui-mailbox-open, .ui-mailbox-listview) { margin-right: calc(min(var(--ui-panel-w), 100vw) + 4px); }
body.has-crmpanel .ui-mailbox-crumbacts { right: calc(min(var(--ui-panel-w), 100vw) + 14px); }
.ui-mailbox [hidden] { display: none !important; }
.ui-mailbox-phone { display: none; flex-direction: column; gap: 8px; margin: 0 0 12px; }
@media (max-width: 820px) { .ui-mailbox-phone { display: flex; } }
/* the bar: the folder, whose it is, then search, check again and + New at the right end */
.ui-mailbox .ui-mailbox-filterwrap { margin-left: auto; }
/* Search stands in the same place at the bar's right end whichever mailbox or folder is on show (Tom, 7 Oct 2026):
   where there is no Filters button before it (Drafts, Snoozed, a search), Search takes the free room itself. */
.ui-mailbox .ui-mailbox-filterwrap[hidden] + .ui-mailbox-search { margin-left: auto; }
/* (and none of what stands at the right gives way where the bar is short: the name of the place does, the inbox's name before it) */
.ui-mailbox .ui-pagebar > :is(.ui-mailbox-filterwrap, .ui-mailbox-search, .ui-mailbox-searchall, .ui-mailbox-refresh, .ui-pagebar-new) { flex: none; }
.ui-mailbox .ui-pagebar > .ui-pagebar-meta { flex: 0 1000 auto; }
/* ---- a side panel is open: the page's own bar keeps clear of it (Tom, 15 Oct 2026)
   "when I open an email in the right-side panel, move the search functionality and the new email to the
   left so that I can still access it with that right panel open." Search, the search-everywhere tick,
   Refresh and + New sit at the bar's right end, which is exactly where the panel comes over.
   The LIST is left full width on purpose: the rows behind the panel are how the next email is picked
   (which is why the panel was made to overlay it in the first place). A composer opened while the panel
   is there moves with the bar, so what the + New button opens is in view too.
   Any page that opens a .ui-panel gets this by putting `has-sidepanel` on the body.
   (Not while the CRM's record panel is open: that one already moves the whole list view, bar and all.)
   The composer meant here is the one the LIST has, a child of .ui-mailbox-listview. NOT the reply composer,
   which is inside the open conversation and so inside the panel itself: giving that one the panel's width as
   a margin left Tom with a reply box one character wide. */
body.has-sidepanel:not(.has-crmpanel) :is(.ui-pagebar, .ui-mailbox-listview > .ui-mailbox-composer) { margin-right: calc(min(var(--ui-panel-w), 100vw) + 10px); }
/* (a bar made short by the menus beside it, or by an email open at the right: Search is narrower, then the tick box loses its words; its title still says them) */
.ui-mailbox .ui-pagebar { container: mailbar / inline-size; }
@container mailbar (max-width: 680px) { .ui-mailbox .ui-pagebar > .ui-mailbox-search { width: 160px; } }
@container mailbar (max-width: 620px) { .ui-mailbox-searchall span { display: none; } }
@container mailbar (max-width: 470px) { .ui-mailbox .ui-pagebar > .ui-mailbox-search { width: 120px; } }
.ui-mailbox .ui-mailbox-filterwrap > .ui-filter-menu { right: 0; left: auto; }      /* the builder opens leftwards from its button, which is near the bar's right end */
.ui-mailbox .ui-mailbox-search { width: 220px; height: 30px; }
/* The box under Search (Tom, 7 Oct 2026): who from, who to, with or without an attachment, between which days.
   <div class="ui-menu ui-mailbox-searchpop"> of .ui-field rows, a .ui-seg of two choices, and a foot of Clear / Search. */
.ui-menu.ui-mailbox-searchpop { width: 340px; max-width: calc(100vw - 16px); max-height: none; overflow: visible; padding: 14px; gap: 12px; color: var(--text); }
.ui-mailbox-searchpop .ui-in { min-height: 32px; height: 32px; font-size: 13.5px; }
.ui-mailbox-searchpop .ui-seg { gap: 6px; }
.ui-mailbox-searchpop .ui-seg-btn { border-color: var(--border); }
.ui-mailbox-searchpop .ui-seg-btn.is-active { border-color: transparent; }
.ui-mailbox-searchdays { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ui-mailbox-searchfoot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
/* The tick box at Search's right, in the bar: <label class="ui-mailbox-searchall"><input type="checkbox"><span>Search everywhere</span></label> */
.ui-mailbox-searchall { display: inline-flex; align-items: center; gap: 7px; flex: none; font-size: 13px; white-space: nowrap; color: inherit; cursor: pointer; }
/* the views bar: the same bar as the Issues List's and the CRM's (ui-views), under a name of its own
   because each page's script binds its own */
.ui-mailbox-views { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0 8px 14px 2px; }
.ui-mailbox-views::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border); pointer-events: none; }
.ui-mailbox-views > .ivt-tabs { align-self: stretch; position: relative; z-index: 1; }
/* the tabs closer together (Tom, 9 Oct 2026: "Reduce the spacing in the views"): a 4px gap for the shared bar's 22px, and a 16px
   ⋮ for its 22px (every tab keeps the ⋮'s room, so no tab moves when another is chosen); the spark of a view Astra keeps
   stands at the button's own 6px from the name */
.ui-mailbox-views > .ivt-tabs { gap: 4px; }
.ui-mailbox-views .ivt-tab { gap: 0; }
.ui-mailbox-views .ivt-tab > .ivt-more { width: 16px; padding: 0 3px; }          /* (its three dots as large as they were) */
.ui-mailbox-views .ivt-tabs .ivt-tab-btn > .ui-mailbox-smartmark { margin-right: 0; }
/* one centre line down the list's left edge (Tom, 6 Oct 2026): with no view saved the + stands alone at the
   bar's start, and it, the page bar's icon under it and the tick boxes under that share a centre, 24px in
   from the bar's edge (the page bar's 10px inset + half its 28px icon) */
.ui-mailbox-views > .ivt-tabs:empty { display: none; }
.ui-mailbox-views > .ivt-tabs:empty ~ .ivt-add { margin-left: 9px; }
.ui-mailbox-views .ivt-menu { top: calc(100% + 4px); }
.ui-mailbox-views .ivt-pop { top: calc(100% + 4px); }
.ui-mailbox .ui-pagebar-new { margin-left: 0; }
@media (max-width: 640px) { .ui-mailbox-searchall span { display: none; } .ui-mailbox .ui-pagebar-meta { display: none; } .ui-mailbox .ui-mailbox-search { width: 120px; } }
/* the list */
.ui-mailbox-rows { margin: 0 8px 0 2px; }
.ui-mailbox-table { width: 100%; table-layout: fixed; }
.ui-mailbox-table .ui-mailbox-c-agent { width: 124px; }
.ui-mailbox-table .ui-mailbox-c-who { width: 21%; }                                    /* narrower From, more room for the description (Tom, 12 Oct 2026) */
.ui-mailbox-table .ui-mailbox-c-when { width: 82px; }                                   /* narrower date too (Tom, 12 Oct 2026) */
.ui-mailbox-table .ui-mailbox-c-linear { width: 158px; }          /* the agents' Drafts: each draft's Linear ticket, "OPS-1057 · Canceled" (Tom, 7 Oct 2026) */
.ui-mailbox-table td.ui-mailbox-c-linear { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-mailbox-c-linear a.ui-mailbox-ticket { margin: 0; }
.ui-mailbox-table:has(.ui-mailbox-c-linear) .ui-mailbox-c-who { width: 18%; }          /* (room given back to the description) */
.ui-mailbox-table.is-compact th { padding: 0 12px; text-align: left; }
.ui-table.ui-mailbox-table.is-compact .ui-tick-cell { width: 47px; min-width: 47px; max-width: 47px; }      /* (the tick boxes on that centre line; .ui-table added so it wins over the shared 36px further down) */
.ui-mailbox-table.is-compact th.ui-num { text-align: right; }
.ui-mailbox-table td.ui-mailbox-c-when { color: var(--text-muted); font-size: 13px; }
.ui-mailbox-table .ui-mailbox-who, .ui-mailbox-table .ui-mailbox-subject { color: var(--text); }
.ui-mailbox-table tr.is-unread :is(.ui-mailbox-who, .ui-mailbox-subject) { font-weight: 600; }
.ui-mailbox-table tr.is-unread td.ui-mailbox-c-when { color: var(--text); font-weight: 600; }
/* the Today line (Tom, 12 Oct 2026): a thin rule with the word in the middle, between today's emails and the earlier ones */
.ui-mailbox-daysplit td { padding: 4px 12px; }
.ui-mailbox-daysplit-line { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ui-mailbox-daysplit-line::before, .ui-mailbox-daysplit-line::after { content: ""; flex: 1; border-top: 1px solid var(--ui-line-head); }
.ui-mailbox-table tr.ui-row:focus-visible td { background: var(--ui-row-hover); }
.ui-mailbox-table tr.ui-row:focus-visible { outline: none; }
.ui-mailbox-preview { margin-left: 10px; color: var(--text-muted); }
/* A row with an attachment (Tom, 9 Oct 2026): a paperclip just to the right of its description, inside the Description column.
   The words give way (three dots) and the clip is always in sight; a short description has it straight after its last word. */
.ui-mailbox-table .ui-mailbox-desc { display: flex; align-items: center; min-width: 0; }
.ui-mailbox-table .ui-mailbox-desctext { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-mailbox-table .ui-mailbox-desc > .ui-mail-clip { flex: none; margin-left: 8px; }
.ui-mailbox-table .ui-mailbox-desc > .ui-mail-clip svg { width: 14px; height: 14px; }
/* Expanded rows (Tom, 9 Oct 2026; the person's choice, Compact being what a list always was): the subject on the first line of
   the description, bold while unread as ever, and how the email starts on a line of its own under it. The row is as tall as
   its two lines; a row with nothing under its subject stays one line. */
.ui-mailbox.is-expanded .ui-mailbox-table td { padding-top: 8px; padding-bottom: 8px; }
.ui-mailbox.is-expanded .ui-mailbox-table .ui-mailbox-preview { display: block; margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ui-mailbox.is-expanded .ui-mailbox-table .ui-mailbox-desc { align-items: flex-start; }
.ui-mailbox.is-expanded .ui-mailbox-table .ui-mailbox-desc > .ui-mail-clip { margin-top: 3px; }
/* the two, under their button beside "Check for new mail": the name, and under it what it is; the one in force is marked */
.ui-menu.ui-mailbox-rowspop { width: 270px; }
.ui-mailbox-rowspop .ui-menu-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 7px 10px; text-align: left; }
.ui-mailbox-rowspop .ui-menu-item[aria-checked="true"] { background: var(--ui-selected); }
.ui-mailbox-rowspop .ui-mailbox-rowsname { font-weight: 500; color: var(--text); }
.ui-mailbox-rowspop .ui-mailbox-rowsnote { font-size: 12.5px; color: var(--text-muted); white-space: normal; }
/* From / To in the Expanded list (Tom, 9 Oct 2026): the From column is two lines, who the email is from (bold while unread, with
   how many emails the conversation has) and under it who it is to, in the muted text of the description's second line. A
   row carries both forms; Compact shows the one name it always did. */
.ui-mailbox-fromto, .ui-mailbox-h-expanded { display: none; }
.ui-mailbox.is-expanded .ui-mailbox-h-compact, .ui-mailbox.is-expanded .ui-mailbox-table .ui-mailbox-c-who > :is(.ui-mailbox-who, .ui-mailbox-n) { display: none; }
.ui-mailbox.is-expanded .ui-mailbox-h-expanded { display: inline; }
.ui-mailbox.is-expanded .ui-mailbox-table .ui-mailbox-fromto { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; max-width: calc(100% - 36px); vertical-align: middle; }
.ui-mailbox.is-expanded .ui-mailbox-table .ui-mailbox-from { display: flex; align-items: baseline; min-width: 0; }
.ui-mailbox.is-expanded .ui-mailbox-table .ui-mailbox-fromname { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.ui-mailbox.is-expanded .ui-mailbox-table tr.is-unread .ui-mailbox-fromname { font-weight: 600; }
.ui-mailbox.is-expanded .ui-mailbox-table .ui-mailbox-from > .ui-mailbox-n { flex: none; }
.ui-mailbox.is-expanded .ui-mailbox-table .ui-mailbox-to { overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--text-muted); }
/* ... and the lettered tile is level with the From line, not half way down the two (Tom, 9 Oct 2026): both start at the top of
   the cell's line, and the From line is as tall as the tile, so the name sits at the tile's middle. The To line has no tile. */
.ui-mailbox.is-expanded .ui-mailbox-table .ui-mailbox-c-who > .ui-tile, .ui-mailbox.is-expanded .ui-mailbox-table .ui-mailbox-fromto { vertical-align: top; }
.ui-mailbox.is-expanded .ui-mailbox-table .ui-mailbox-c-who > .ui-tile { margin-top: 2px; }
.ui-mailbox.is-expanded .ui-mailbox-table .ui-mailbox-from { align-items: center; min-height: 20px; }
/* Compact: how the email starts (the body text after the subject, in the Description column) is in the smaller size it has in
   Expanded, 13px (Tom, 9 Oct 2026). Only that: the name, the subject and the rest are the table's own size. (For an hour every
   cell of a Compact row was 13px; he had that undone: "The smaller font should only apply to the body text in the description column".) */
.ui-mailbox:not(.is-expanded) .ui-mailbox-table .ui-mailbox-preview { font-size: 13px; }
.ui-mailbox-n { margin-left: 6px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.achip-av.ui-mailbox-av { width: 22px; height: 22px; margin-right: 8px; vertical-align: -6px; }
.ui-mailbox-c-agent .achip-av.ui-mailbox-av { vertical-align: middle; }      /* a picture or initials: level with the name either way (initials have a text baseline, a picture has none) */
.ui-mailbox-agent { color: var(--text-muted); font-size: 13px; }
/* ticking rows: the tick column, and the bar that shows while anything is ticked (the CRM's) */
/* ---- the bar of what to do with the ticked rows: it follows the page (Tom, 15 Oct 2026)
   "If I select an email in the table view, the options for doing things like marking it as done or adding a
   label should be in a floating bar that always appears at the top of the page. If I scroll down a long
   list, it still shows the top of the current view." It sits above the table, so it used to scroll away and
   leave a long list with nothing to act with. Sticky under the site's header (--head-h, which topnav.js
   measures), and it carries its own background and edge now that rows pass behind it. */
.ui-mailbox-bulk { min-height: 34px; margin: 0 0 8px; gap: 2px; }
.ui-mailbox .ui-mailbox-bulk:not([hidden]) {
  position: sticky; top: calc(var(--head-h, 102px) + 6px); z-index: 7;
  margin: 0 2px 8px; padding: 6px 10px; border-radius: var(--ui-r);
  background: var(--ui-panel, #fff); box-shadow: 0 0 0 1px var(--ui-line-head), 0 2px 8px rgba(14, 14, 18, .10);
}
.ui-mailbox-bulk .ui-mailbox-bulk-n { margin-right: 10px; }
/* Labels: the page's own, each a name and one of the house's tag colours (.ntag.t-*), kept in
   AgentMail on the conversations that carry them. In the rail a heading with a + and one line per
   label; in a list tags before the subject; on an open conversation tags that can be taken off; and the
   picker (.ui-mailbox-labelpop: the CRM's .ui-pick, floating) that puts them on and looks after them. */
.crm-subrail-title.ui-mailbox-labelhead { display: flex; align-items: center; justify-content: space-between; margin: 16px 2px 2px 12px; }
.ui-mailbox-labellist { flex: none; display: flex; flex-direction: column; gap: 2px; }
/* Automations (Tom, 7 Oct 2026): the menu's last entry, under the labels, a little apart from them; and the page's
   workflows, which take the list's place (the table is the CRM's Automations table, drawn by its own rules) */
.ui-mailbox-autolink { flex: none; margin-top: 14px; }
body.crm-rail-mini .ui-mailbox-autolink { margin-top: var(--rail-gap); }
.ui-mailbox-auto { min-width: 0; }
.ui-mailbox-labellist:empty::after { content: "None yet."; padding: 4px 12px; font-size: 13px; color: var(--text-muted); }
.ui-mailbox-labellist .crm-subrail-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ntag.ui-mailbox-labeldot { flex: 0 0 12px; width: 12px; height: 12px; margin: 0 3px; padding: 0; border-radius: 50%; cursor: pointer; }
.ntag.ui-mailbox-labeldot:hover { box-shadow: 0 0 0 3px var(--ui-fill-strong); }      /* a click on the dot opens its colours */
/* making a label: its colour is chosen under "Create", before it is made */
.ui-pick-edit.ui-mailbox-newcolour { flex-direction: row; align-items: center; gap: 10px; margin: 0 6px 6px; padding: 4px 8px 6px; border: 0; }
.ui-mailbox-newcolour-label { flex: none; font-size: 12.5px; color: var(--text-muted); }
/* A label's row has three dots as the mouse (or the keyboard) comes to it: rename, colour, delete. They take
   their place in the row, before the count, and the name gives them the room. */
.ui-mailbox-labelmore { flex: none; display: none; place-items: center; width: 24px; height: 22px; margin: 0 3px 0 2px; padding: 0; border: 0; border-radius: var(--ui-r-sm); background: var(--ui-fill-strong); color: var(--text-muted); cursor: pointer; }
.ui-mailbox-labelmore svg { width: 17px; height: 17px; }          /* (a little air between the three dots, and round the button: Tom, 6 Oct 2026) */
.crm-subrail-link:is(:hover, :focus-within) > .ui-mailbox-labelmore { display: inline-grid; }
.ui-mailbox-labelmore:is(:hover, :focus-visible) { color: var(--text); }
.ui-mailbox-labellist .ui-mailbox-labelmore { margin-left: auto; }          /* (a row with no count: at the row's end) */
@media (hover: none) { .ui-mailbox-labelmore { display: inline-grid; opacity: .7; } }          /* nothing hovers on a touch screen: always there */
body.crm-rail-mini .ui-mailbox-labelmore { display: none; }
.ui-menu.ui-mailbox-colourpop { min-width: 0; padding: 10px; }
body.crm-rail-mini .ui-mailbox-labelhead { display: none; }
body.crm-rail-mini .ui-mailbox-labellist { gap: var(--rail-gap); }      /* the labels' dots keep to the rails' rows too */
body.crm-rail-mini .ui-mailbox-labellist:empty::after { content: none; }
/* Done, beside the star and the same size (Tom, 15 Oct 2026): a circle with a tick, teal and filled when
   the conversation is done, a grey outline when it is not. Clicking it marks it done or puts it back. */
.ui-mailbox-donemark { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin: 0 6px 0 -2px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--ui-line-head); cursor: pointer; vertical-align: -4px; }
.ui-mailbox-donemark svg { width: 15px; height: 15px; }
.ui-mailbox-donemark:is(:hover, :focus-visible):not(:disabled) { color: var(--text-muted); background: var(--ui-hover); }
.ui-mailbox-donemark.is-on { color: var(--accent); }
.ui-mailbox-donemark.is-on .ui-donemark-ring { fill: currentColor; }
.ui-mailbox-donemark.is-on .ui-donemark-tick { stroke: #fff; }
.ui-mailbox-donemark:disabled { cursor: default; }
/* Where a conversation is, beside the tick (Tom, 16 Oct 2026): a bin (or Spam's sign) on a row a search
   of everywhere found in the Bin or in Spam. A click puts it back; Blocked only says so. */
.ui-mailbox-binmark { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin: 0 6px 0 -2px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--danger, #c0392b); cursor: pointer; vertical-align: -4px; }
.ui-mailbox-binmark svg { width: 14px; height: 14px; }
.ui-mailbox-binmark:is(:hover, :focus-visible):not(:disabled) { background: var(--ui-hover); }
.ui-mailbox-binmark:disabled { cursor: default; }
.ui-mailbox-rowlabels .ntag { margin-right: 6px; vertical-align: 1px; }      /* a row's labels lead its Description, before the subject */
.ui-mailbox-labelchips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ui-mailbox-labelchips .ntag { display: inline-flex; align-items: center; gap: 5px; }
/* System labels (Tom, 6 Oct 2026): the page's own labels for a person's own mailboxes, above the labels each mailbox
   has of its own. One of them carries a small diamond (before its name in a tag, and as its dot in the menu), so it
   is told from a mailbox's own label at a glance. On the page they are called System labels. In "All personal inboxes" they are the menu's labels
   (.ui-mailbox-afm); in one mailbox they sit in its own menu, over its labels; the picker there has a switch
   (.ui-mailbox-labelkind, a .ui-seg) saying which of the two it is for. */
.ui-mailbox-afm { flex: none; display: flex; flex-direction: column; gap: 2px; }
.ui-mailbox-afm[hidden] { display: none; }
.ui-mailbox-afm .crm-subrail-link .crm-subrail-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-mailbox-afm .ui-mailbox-labelmore { margin-left: auto; }          /* (a row with no count: at the row's end) */
.ntag.ui-mailbox-labeldot.is-afm { border-radius: 2px; transform: rotate(45deg) scale(.8); }
/* (the diamond is on a System label wherever it is shown: a row, a picker, the Filters builder, an automation's
   step; a little lighter than it was: Tom, 7 Oct 2026) */
.ntag.ui-mailbox-afmtag::before { content: ""; flex: none; display: inline-block; width: 6px; height: 6px; margin-right: 5px; background: currentColor; opacity: .45; transform: rotate(45deg); vertical-align: 1px; }
.ui-mailbox-labelchips .ntag.ui-mailbox-afmtag::before { margin-right: 0; }
.ui-mailbox-rowafm .ntag { margin-right: 6px; vertical-align: 1px; }
.ui-mailbox-afmchips:empty { display: none; }
.ui-seg.ui-mailbox-labelkind { display: flex; gap: 4px; margin: 0; padding: 0; }
.ui-seg.ui-mailbox-labelkind[hidden] { display: none; }
.ui-mailbox-labelkind .ui-seg-btn { flex: 1 1 0; justify-content: center; }
body.crm-rail-mini .ui-mailbox-afm { gap: var(--rail-gap); }
body.crm-rail-mini .ui-mailbox-afm :is(.ui-mailbox-labelhead, .ui-mailbox-gnote) { display: none; }
/* The picker is ONE box with its own ground, edge and shadow (Tom, 6 Oct 2026), as a .ui-menu is, in the light
   theme and the dark: the switch, the place to type and the list are inside it, in a column, and none of them
   floats by itself with the page showing between. */
.ui-mailbox-labelpop.ui-pick {
  position: fixed; z-index: 70; flex: none; box-sizing: border-box; width: 316px; display: flex; flex-direction: column; gap: 8px; padding: 8px;
  background: var(--panel, var(--surface)); border: 1px solid var(--panel-border, var(--border)); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(14, 14, 18, .16), 0 2px 6px rgba(14, 14, 18, .08);
}      /* (.ui-pick alone is position: relative, further down this file) */
.ui-mailbox-labelpop.ui-pick[hidden] { display: none; }
.ui-mailbox-labelpop.ui-pick.is-open .ui-pick-box { background: var(--surface); }
.ui-mailbox-labelpop .ui-pick-menu { position: static; width: auto; max-height: min(46vh, 320px); margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
/* An open email's From, To and Cc: the same tags, one line each under the sender's name. A teal one is
   a button (it opens the person's CRM record); one of our own inboxes is plain. */
/* From, To, Cc, Bcc of an open email: the labels are one column, so the names start in one line down the
   page (Tom, 6 Oct 2026), with a little air between the lines. */
.ui-mailbox-whoto { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ui-mailbox-msg .ui-mailbox-full > .ui-mailbox-whoto { margin-left: -44px; margin-top: 6px; }          /* from the avatar's left edge, as the email under it is (Tom, 6 Oct 2026) */
.ui-mailbox-wholine { display: flex; align-items: flex-start; gap: 8px; }
.ui-mailbox-wholabel { flex: 0 0 36px; padding-top: 4px; font-size: 12.5px; color: var(--text-muted); }
.ui-mailbox-whotags { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.ui-mailchip.ui-mailbox-readchip { height: 24px; font-size: 12.5px; }
.ui-mailchip.ui-mailbox-readchip.is-new { background: var(--ui-fill); color: var(--text); }
.ui-mailchip.ui-mailbox-readchip.is-own, .ui-mailbox-chips .ui-mailchip.is-own { background: transparent; box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }          /* one of ours (an agent's inbox, one's own mailbox): a teal outline, not grey (Tom, 8 Oct 2026), its name in line with the others */
.ui-mailbox-agentmark { flex: none; width: 13px; height: 13px; }          /* an agent's tag: the Agents menu's robot before the name (Tom, 8 Oct 2026) */
.ui-mailchip[data-act="person"] { cursor: pointer; }
.ui-mailchip[data-act="person"]:hover, .ui-mailchip[data-act="person"]:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); outline: none; }
/* To, Cc, Bcc: every address a tag (the CRM composer's .ui-mailchip). Teal with the person's name when
   the CRM holds them; grey with the address itself (.is-new) when it does not, with a small button
   that adds them to the CRM; .is-warn for someone marked Do not contact. */
.ui-mailbox-chipline { align-items: flex-start; }
.ui-mailbox-chipline > .ui-mail-label { padding-top: 9px; }
.ui-mailbox-chipline > .ui-mailbox-cclink { padding-top: 9px; }
.ui-mailbox-chips { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 0; cursor: text; }
.ui-mail-line .ui-mailbox-chips .ui-in.ui-mailbox-chipin { flex: 1 1 140px; min-width: 120px; width: auto; min-height: 26px; height: 26px; padding: 0; }
.ui-mailbox-chips .ui-mailchip { max-width: 100%; }
.ui-mailbox-chips .ui-mailchip.is-new { background: var(--ui-fill); color: var(--text); }      /* not in the CRM: grey, the address in plain lettering */
.ui-mailbox-chipadd { flex: none; display: inline-flex; align-items: center; margin: 0 0 0 2px; padding: 2px; border: 0; border-radius: 4px; background: none; color: var(--accent); cursor: pointer; }
.ui-mailbox-chipadd:hover, .ui-mailbox-chipadd:focus-visible { background: var(--ui-teal-tint); outline: none; }
.ui-mailbox-chipadd svg { width: 14px; height: 14px; }
.ui-menu.ui-mailbox-addpop { width: 320px; padding: 12px; gap: 10px; }
/* their company, under the name: the one chosen as a tag (with a cross), or a place to type with the CRM's companies listed under it */
.ui-mailbox-addpop-co { display: flex; flex-direction: column; gap: 6px; }
.ui-mailbox-addpop [hidden] { display: none !important; }          /* (the box is outside .ui-mailbox, so its own rule for this) */
.ui-mailbox-addpop-chosen { display: flex; min-height: 32px; align-items: center; }
.ui-mailbox-addpop-list { display: flex; flex-direction: column; max-height: 190px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--ui-r-sm); padding: 3px; }
.ui-mailbox-addpop-list .ui-menu-item { display: flex; align-items: baseline; gap: 8px; padding: 6px 8px; text-align: left; }
.ui-mailbox-addpop-list .ui-menu-item.is-active { background: var(--ui-selected); }
.ui-mailbox-addpop-opt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ui-mailbox-addpop-sub { flex: none; font-size: 12px; color: var(--text-muted); }
.ui-tag.ui-mailbox-addpop-kind { flex: none; margin-left: 0; font-size: 11px; }          /* says a choice is a broker, not a company */
.ui-mailbox-addpop-note { margin: 0; font-size: 12px; line-height: 1.35; color: var(--text-muted); }
.ui-mailbox-addpop .ui-in { width: 100%; box-sizing: border-box; height: 32px; }
.ui-mailbox-addpop-mail { font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
/* who is offered under a To, Cc or Bcc line as a name is typed: name, then address and company, and at the
   right what they are when not someone in the CRM ("Written to before", "Team", "Agent", "Your mailbox") */
.ui-menu.ui-mailbox-people { min-width: 0; max-width: calc(100vw - 16px); max-height: 320px; }
.ui-mailbox-people .ui-menu-item { align-items: baseline; gap: 8px; padding: 7px 10px; }
.ui-mailbox-people .ui-menu-item.is-at { background: rgba(127, 127, 127, 0.1); }
.ui-mailbox-person-name { flex: none; max-width: 50%; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-mailbox-person-mail { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-mailbox-person-dnc { flex: none; margin-left: 0; color: var(--ui-danger); background: rgba(229, 104, 122, .12); }
.ui-mailbox-person-why { flex: none; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
/* a draft's approval ticket: a tag that is a link (teal, .is-accent, while it still waits) */
a.ui-mailbox-ticket { margin: 0 8px 0 0; text-decoration: none; vertical-align: 1px; }
a.ui-mailbox-ticket:hover { text-decoration: underline; }
/* a ticket's tag is in its status's own colour in Linear, whatever that is at the time (Tom, 7 Oct 2026): the
   colour itself comes with the tag (--tk), a faint ground of it and lettering of it brought towards the text */
a.ui-mailbox-ticket.is-linear { background: color-mix(in srgb, var(--tk) 16%, transparent); color: color-mix(in srgb, var(--tk) 74%, var(--text)); }
.ui-mailbox-owner a.ui-mailbox-ticket { margin: 0 0 0 6px; }
.ui-mailbox-note a { color: var(--accent); }
.ui-mailbox-foot { display: flex; justify-content: center; padding: 14px 0 4px; }
.ui-mailbox-empty { margin: 18px 2px; }
.ui-mailbox-warn { margin: 0 0 10px; padding: 8px 12px; border-radius: var(--ui-r-sm); background: rgba(229, 104, 122, .10); color: var(--ui-danger); font-size: 13px; }
.ui-mailbox-warn.is-quiet { background: var(--ui-fill); color: var(--text-muted); }          /* a plain notice, not a fault */
.ui-mailbox-warn .ui-linkbtn { margin-left: 0; font-size: inherit; color: inherit; }
/* a draft: "Edit draft" in its corner, in place of the reply icons; and in the composer, Discard at the far left and Save draft beside Send */
.ui-mailbox-msg .ui-mail-acts.is-draft { opacity: 1; }
.ui-btn-outline.ui-mailbox-draftedit { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; font-size: 13px; }
.ui-mailbox-draftedit svg { width: 14px; height: 14px; }
.ui-mailbox-composer .ui-nc-actions .ui-mailbox-draftdrop { margin: 0 12px 0 0; font-size: 13px; }
/* What is written is kept as a draft as it is written (Tom, 9 Oct 2026): the line that says so, at the left of the composer's
   buttons (after Discard, once there is a draft); the buttons keep to the right */
.ui-mailbox-composer .ui-nc-actions .ui-mailbox-draftnote { flex: 1 1 auto; min-width: 0; margin-right: auto; font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }
.ui-mailbox-composer .ui-nc-actions .ui-mailbox-draftnote.is-bad { color: var(--ui-danger); }
.ui-mailbox-composer .ui-nc-actions [hidden] { display: none; }
/* an address tag on the To, Cc or Bcc line can be dragged to another of the three (Tom, 6 Oct 2026) */
.ui-mailbox-chips .ui-mailchip[draggable="true"] { cursor: grab; }
.ui-mailbox-chips .ui-mailchip.is-dragging { opacity: .45; }
.ui-mailbox-chips.is-over { border-radius: var(--ui-r-sm); box-shadow: inset 0 0 0 2px var(--accent); background: var(--ui-teal-tint); }
/* Snoozing (Tom, 6 Oct 2026). Its colour is orange: the clock by the date of a conversation that has come back,
   or that waits in the Snoozed list; the button on a snoozed conversation; and the icons of the menu of times. */
:root { --mailbox-snooze: #e8833a; }
.ui-mailbox-table td.ui-mailbox-c-when.is-snooze, .ui-mailbox-table tr.is-unread td.ui-mailbox-c-when.is-snooze { color: var(--mailbox-snooze); white-space: nowrap; }
.ui-mailbox-table:has(.is-snooze) .ui-mailbox-c-when { width: 118px; }          /* (room for the clock beside the time) */
.ui-mailbox-table.is-snoozed .ui-mailbox-c-when { width: 190px; }          /* the Snoozed list says when each comes back: "Mon 12 Oct, 09:00" */
.ui-mailbox-c-when.is-snooze svg { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; }
.ui-iconbtn.ui-mailbox-snoozebtn.is-on { color: var(--mailbox-snooze); }
/* Where the conversation is (the Bin, Spam, Done, snoozed until a time): its own item in the head row, so
   it wraps to the next line rather than running under the buttons at the right (Tom, 15 Oct 2026). */
.ui-mailbox-states { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
/* ... and all of it on one line of its own under the address, labels beside the place (Tom, 15 Oct 2026).
   A line of the head's own could only hold what the floated buttons left it, which split them in two. */
.ui-mailbox-chiprow { flex: 1 0 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ui-mailbox-chiprow:empty { display: none; }
.ui-mailbox-chiprow > :is(.ui-mailbox-labelchips, .ui-mailbox-afmchips):empty { display: none; }
.ui-tag.ui-mailbox-snoozetag { display: inline-flex; align-items: center; gap: 4px; color: var(--mailbox-snooze); background: color-mix(in srgb, var(--mailbox-snooze) 13%, transparent); }
.ui-mailbox-snoozetag svg { width: 12px; height: 12px; }
/* "Back from snooze" is a button once the snooze is over (Tom, 16 Oct 2026: "I don't need to keep being
   reminded"): the same chip, with a cross after the words, and a click takes the mark off for good. */
button.ui-tag.ui-mailbox-snoozeoff { padding-right: 5px; border: 0; font: inherit; font-size: 12px; line-height: inherit; cursor: pointer; }
button.ui-tag.ui-mailbox-snoozeoff:is(:hover, :focus-visible) { color: var(--mailbox-snooze); background: color-mix(in srgb, var(--mailbox-snooze) 26%, transparent); }
.ui-mailbox-snoozex { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 1px; border-radius: 50%; font-size: 13px; line-height: 1; opacity: .75; }
button.ui-tag.ui-mailbox-snoozeoff:is(:hover, :focus-visible) .ui-mailbox-snoozex { opacity: 1; }
/* Notifications (Tom, 9 Oct 2026; app/email_quiet.py): the tag that says a conversation is in it. On an open email it leads
   the labels, with the bell and a cross that takes it off; a row of any list but Notifications' own carries it before its subject. */
.ntag.ui-mailbox-quiettag { display: inline-flex; align-items: center; gap: 5px; }
.ui-mailbox-quiettag svg { flex: none; width: 12px; height: 12px; }
.ui-mailbox-quietchips { display: inline-flex; margin-left: 8px; }          /* (not a .ui-mailbox-labelchips: the script empties those to draw the labels) */
.ui-mailbox-rowquiet .ntag { margin-right: 6px; vertical-align: -3px; }
.ui-menu.ui-mailbox-snoozepop { width: 288px; max-height: none; padding: 8px; }
.ui-mailbox-snoozehead { padding: 4px 10px 6px; font-size: 12.5px; color: var(--text-muted); }
.ui-mailbox-snoozepop .ui-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.ui-mailbox-snoozepop .ui-menu-item svg { flex: none; width: 18px; height: 18px; color: var(--mailbox-snooze); }
.ui-mailbox-snoozename { flex: 1 1 auto; text-align: left; }
.ui-mailbox-snoozetime { flex: none; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* "Pick a Date": the row is marked while its calendar is open beside the menu. The calendar is a month,
   Monday first; the day chosen is filled in the accent, today is ringed, days gone by are faint and dead.
   Under it a time, and Clear and Snooze. */
.ui-mailbox-snoozepop .ui-menu-item.ui-mailbox-snoozepickrow.is-open { background: var(--accent); color: #fff; }
.ui-mailbox-snoozepop .ui-menu-item.ui-mailbox-snoozepickrow.is-open .ui-mailbox-snoozetime { color: #fff; }
/* Send Later (Tom, 9 Oct 2026; app/email_later.py). The composer's second button, beside Send. Its menu is the snooze menu
   (.ui-mailbox-snoozepop.ui-mailbox-laterpop) in the accent, not the snooze's orange: the time chosen is marked, and the button
   under the list is dead until one is. In the list a held email says when it goes (red when it could not be sent); opened, it
   has its four buttons over the email. */
.ui-mailbox-composer .ui-nc-actions .ui-mailbox-latergo:disabled { opacity: .5; cursor: default; }
.ui-mailbox-snoozepop.ui-mailbox-laterpop .ui-menu-item svg { color: var(--accent); }
.ui-mailbox-snoozepop.ui-mailbox-laterpop .ui-menu-item.is-on { background: var(--ui-teal-tint); }
.ui-mailbox-snoozepop.ui-mailbox-laterpop .ui-menu-item.is-on .ui-mailbox-snoozename { font-weight: 600; color: var(--accent); }
.ui-mailbox-snoozepop.ui-mailbox-laterpop .ui-menu-item.is-on .ui-mailbox-snoozetime { color: var(--accent); }
.ui-mailbox-snoozepop.ui-mailbox-laterpop .ui-menu-item.ui-mailbox-snoozepickrow.is-open .ui-mailbox-snoozename,
.ui-mailbox-snoozepop.ui-mailbox-laterpop .ui-menu-item.ui-mailbox-snoozepickrow.is-open .ui-mailbox-snoozetime,
.ui-mailbox-snoozepop.ui-mailbox-laterpop .ui-menu-item.ui-mailbox-snoozepickrow.is-open svg { color: #fff; }
.ui-mailbox-snoozepop .ivm-submit.ui-mailbox-laterconfirm { display: block; width: calc(100% - 8px); height: 34px; margin: 8px 4px 2px; border-radius: var(--ui-r-sm); font: inherit; font-weight: 600; color: #fff; background: var(--accent); border: 1px solid var(--accent); cursor: pointer; }
.ui-mailbox-snoozepop .ivm-submit.ui-mailbox-laterconfirm:disabled { opacity: .4; cursor: not-allowed; }
.ui-mailbox-table.is-later .ui-mailbox-c-when { width: 190px; }
.ui-mailbox-table td.ui-mailbox-c-when.is-later { white-space: nowrap; }
.ui-mailbox-c-when.is-later svg { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; color: var(--accent); }
.ui-mailbox-table td.ui-mailbox-c-when.is-later.is-failed, .ui-mailbox-table tr.is-unread td.ui-mailbox-c-when.is-later.is-failed, .ui-mailbox-c-when.is-later.is-failed svg { color: var(--ui-danger); }
.ui-tag.ui-mailbox-latertag { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); background: var(--ui-teal-tint); }
.ui-tag.ui-mailbox-latertag.is-failed { color: var(--ui-danger); background: rgba(229, 104, 122, .10); }
.ui-mailbox-latertag svg { width: 12px; height: 12px; }
.ui-mailbox-lateracts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 14px; }
.ui-mailbox-lateracts .ui-btn-outline, .ui-mailbox-lateracts .ui-btn-danger { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; font-size: 13px; }
.ui-mailbox-lateracts .ui-btn-danger { margin-left: auto; }
.ui-mailbox-lateracts svg { width: 14px; height: 14px; }
.ui-mailbox-conv.is-later .ui-mailbox-warn { margin: 10px 0 0; }
/* Send Later's number in the left menu: how many are waiting, then a red mark if any could not be sent (Tom, 9 Oct 2026). The number
   and the mark sit on one line; in a mailbox's own menu the count's fixed column gives way to them. */
.crm-subrail-link .crm-count.ui-mailbox-latercount.is-failed { display: inline-flex; align-items: center; gap: 5px; }
.ui-mailbox-gmenu .crm-subrail-link .crm-count.ui-mailbox-latercount.is-failed { flex: 0 0 auto; }
.ui-mailbox-latererr { display: inline-flex; color: var(--ui-danger); }
/* (a menu link sizes and colours every icon in it, teal on the entry one is in: the mark is its own size, and red there too) */
.crm-subrail-link .crm-count .ui-mailbox-latererr svg { flex: none; width: 14px; height: 14px; color: var(--ui-danger); }
body.crm-rail-mini .crm-subrail .crm-count.ui-mailbox-latercount.is-failed { display: none; }
.ui-menu.ui-mailbox-snoozecal { width: 312px; max-width: calc(100vw - 16px); max-height: none; padding: 14px 14px 12px; gap: 10px; }
.ui-mailbox-snoozecal[hidden], .ui-mailbox-snoozecal .ivm-err[hidden] { display: none; }
.ui-mailbox-snoozecal-head { display: flex; align-items: center; gap: 2px; padding: 0 2px 0 6px; }
.ui-mailbox-snoozecal-title { flex: 1 1 auto; font-size: 15px; font-weight: 600; }
.ui-mailbox-snoozecal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ui-mailbox-snoozecal-dow { height: 28px; display: grid; place-items: center; font-size: 12px; color: var(--text-muted); }
.ui-mailbox-snoozecal-day { height: 36px; padding: 0; border: 0; border-radius: var(--ui-r-sm); background: none; font: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--text); cursor: pointer; }
.ui-mailbox-snoozecal-day:is(:hover, :focus-visible):not(:disabled):not(.is-on) { background: var(--ui-hover); outline: none; }
.ui-mailbox-snoozecal-day.is-other { color: var(--text-muted); }
.ui-mailbox-snoozecal-day.is-today { box-shadow: inset 0 0 0 1px var(--ui-line-head); }
.ui-mailbox-snoozecal-day.is-on { background: var(--accent); color: #fff; font-weight: 600; box-shadow: none; }
.ui-mailbox-snoozecal-day:disabled { color: var(--text-muted); opacity: .45; cursor: default; }
.ui-mailbox-snoozecal-time { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 0 6px; }
.ui-mailbox-snoozecal-label { font-size: 14px; }
.ui-mailbox-snoozecal-timebox { display: inline-flex; align-items: center; gap: 8px; width: 150px; height: 34px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--ui-line-head); border-radius: var(--ui-r); color: var(--text-muted); }
.ui-mailbox-snoozecal-timebox:focus-within { border-color: var(--accent); }
.ui-mailbox-snoozecal-timebox svg { flex: none; width: 16px; height: 16px; }
.ui-mailbox-snoozecal-input { flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text); }
.ui-mailbox-snoozecal .ivm-err { margin: 0 6px; }
.ui-mailbox-snoozecal .ivm-actions { padding-top: 10px; border-top: 1px solid var(--border); }
/* A Google mailbox's own menu in the rail, as Gmail has it: its folders, its labels (one inside another, set in a
   step for each level), "More" for what Gmail keeps out of sight; and a conversation's star. */
.ui-mailbox-gmenu { flex: none; display: flex; flex-direction: column; gap: 2px; }          /* (as long as it is: the rail scrolls) */
/* Its rows: the name takes what room there is and is cut short with three dots; the count is always there,
   in one column at the row's end, whatever the name's length (Tom, 6 Oct 2026). */
.ui-mailbox-gmenu .crm-subrail-link .crm-subrail-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-mailbox-gmenu .crm-subrail-link .crm-count { flex: 0 0 26px; margin-left: 0; text-align: right; }
body.crm-rail-mini .ui-mailbox-gmenu .crm-subrail-link .crm-count { display: none; }
.ui-mailbox-gmenu .crm-subrail-link.is-d1 { padding-left: 26px; }
.ui-mailbox-gmenu .crm-subrail-link.is-d2 { padding-left: 40px; }
.ui-mailbox-gmenu .crm-subrail-link.is-d3 { padding-left: 54px; }
.ui-mailbox-gmenu .ui-mailbox-gmore { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--text-muted); }
.ui-mailbox-gmenu .ui-mailbox-gmore.is-open svg { transform: rotate(180deg); }
.ui-mailbox-gnote { margin: 0; padding: 4px 12px 6px; font-size: 12.5px; color: var(--text-muted); }
body.crm-rail-mini .ui-mailbox-gmenu :is(.ui-mailbox-labelhead, .ui-mailbox-gnote) { display: none; }
body.crm-rail-mini .ui-mailbox-gmenu .crm-subrail-link { padding-left: 0; }
.ui-mailbox-star { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin: 0 6px 0 -2px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--ui-line-head); cursor: pointer; vertical-align: -4px; }
.ui-mailbox-star svg { width: 14px; height: 14px; }
.ui-mailbox-star:is(:hover, :focus-visible):not(:disabled) { color: var(--text-muted); background: var(--ui-hover); }
/* Starred is the theme's teal, not a gold star (Tom, 15 Oct 2026). --accent is the theme's own teal, so it
   darkens a step on white and brightens on ink without a second value being written here. */
.ui-mailbox-star.is-on, .ui-iconbtn.ui-mailbox-star.is-on { color: var(--accent); }
.ui-mailbox-star.is-on svg { fill: currentColor; }
.ui-mailbox-star:disabled { cursor: default; }
.ui-iconbtn.ui-mailbox-star { width: 34px; height: 34px; margin: 0; vertical-align: 0; color: var(--text-muted); }
.ui-iconbtn.ui-mailbox-star svg { width: 18px; height: 18px; }
.ui-mailbox-sent.is-bad { background: rgba(229, 104, 122, .12); color: var(--ui-danger); }
/* Undo, at the end of what is said after Done (Tom, 9 Oct 2026) */
.ui-mailbox-sent .ui-mailbox-undo { margin-left: 10px; font-size: inherit; font-weight: 600; color: inherit; text-decoration: underline; }
/* What Astra proposes to be done to emails (Tom, 9 Oct 2026; static/email_smart.js): her card in the panel says what, how many
   conversations it is and a few of them, and waits for "Do it". (The card itself is .ui-mailbox-smartcard, the rule card's.) */
.ui-mailbox-actcard .ui-mailbox-actmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ui-mailbox-actcard .ui-mailbox-actmore { color: var(--text-muted); }
.ui-mailbox-actcard .ui-mailbox-actmore:empty, .ui-mailbox-actcard .ui-mailbox-actbtns:empty { display: none; }
.ui-mailbox-actcard .ui-mailbox-actsample { margin: 6px 0 0; padding: 0 0 0 16px; }
.ui-mailbox-actcard .ui-mailbox-actsample li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-mailbox-actcard .ui-mailbox-actsample li.is-more { list-style: none; margin-left: -16px; }
.ui-mailbox-actcard .ui-mailbox-actbtns { display: flex; gap: 8px; }
.ui-mailbox-actcard.is-bad .ui-mailbox-actmore { color: var(--ui-danger); }
/* The AI filter of a view Astra keeps, in the Filters menu (Tom, 9 Oct 2026; static/email_smart.js aiRow): a row over the ordinary
   ones, her mark, "AI filter", what the view holds and, smaller, its conditions; a pencil at its end opens her panel to change it. */
.ui-mailbox-airow { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0 12px 6px; margin-bottom: 10px; border-bottom: 1px solid var(--ui-line); }
.ui-mailbox-airow > .ui-mailbox-smartmark { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
.ui-mailbox-airow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; white-space: normal; }
.ui-mailbox-airow-k { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ui-mailbox-airow-v { font-size: 14px; line-height: 1.4; color: var(--text); }
.ui-mailbox-airow-brief { font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }
.ui-mailbox-airow > .ui-mailbox-airow-edit { flex: none; }
.ui-mailbox-airow > .ui-mailbox-airow-del { flex: none; margin-left: -6px; }          /* (the bin sits by the pencil, as two icons of one row) */
/* The strip over Astra's chat on an AI filter is a dropdown, "Query" (Tom, 9 Oct 2026): one row with a caret at its end, and
   under it, when it is open, a box over the chat with the query in full: each step under its small heading (the AI row's
   lettering), each condition on a line of its own. (The strip's first look, the rule said shortly and clipped at three
   lines, is in the ui-smartview block further down: these say more, so they hold.) */
#astra-window.is-mailsmart .widget.ax .ax-top { padding: 0; }
#astra-window.is-mailsmart .ax-top > .ui-mailbox-smarttop { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; margin: 0; padding: 10px 14px 10px 18px;
  border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--text); text-align: left; cursor: pointer; overflow: visible; -webkit-line-clamp: none; }
#astra-window.is-mailsmart .ax-top > .ui-mailbox-smarttop:hover, #astra-window.is-mailsmart .ax-top > .ui-mailbox-smarttop.is-open { background: var(--ui-hover); }
.ui-mailbox-smarttop svg { flex: none; width: 16px; height: 16px; color: var(--text-muted); transition: transform .15s ease; }
.ui-mailbox-smarttop.is-open svg { transform: rotate(180deg); }
.ui-mailbox-smartq { position: absolute; left: 10px; right: 10px; z-index: 6; box-sizing: border-box; padding: 12px 14px 13px; overflow-y: auto;
  background: var(--panel, var(--surface)); border: 1px solid var(--panel-border, var(--border)); border-radius: 0 0 10px 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .14); }
.ui-mailbox-smartq-k { margin: 12px 0 3px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ui-mailbox-smartq-k:first-child { margin-top: 0; }
.ui-mailbox-smartq-line { display: flex; gap: 6px; padding: 2px 0; font-size: 13px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.ui-mailbox-smartq-join { flex: none; width: 26px; color: var(--text-muted); }
/* the query as SQL (Tom, 9 Oct 2026): fixed-width lettering on the page's ground, long lines turned at the box's edge with the
   lines under them kept in; keywords in the accent, strings in a warm brown, comments muted */
.ui-mailbox-smartq-sql { margin: 0; padding: 10px 12px; border-radius: var(--ui-r-sm); background: var(--ui-fill); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px; line-height: 1.65; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.ui-mailbox-smartq-sql .is-key { font-weight: 600; color: var(--accent); }
.ui-mailbox-smartq-sql .is-str { color: color-mix(in srgb, #b4532a 80%, var(--text)); }
.ui-mailbox-smartq-sql .is-note { color: var(--text-muted); font-style: italic; }
/* the query edited by hand (Tom, 9 Oct 2026): "Edit" under it; then the same lettering in a box to type in, what it can ask
   about in a line under it, what was refused in red, Save and Cancel at the right */
.ui-mailbox-smartq-foot { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.ui-mailbox-smartq-foot > .ui-linkbtn { align-self: flex-start; margin: 0; font-size: 12.5px; }
textarea.ui-mailbox-smartq-edit { display: block; width: 100%; box-sizing: border-box; min-height: 150px; resize: vertical; border: 1px solid var(--border); background: var(--surface); outline: none; }
textarea.ui-mailbox-smartq-edit:focus { border-color: var(--accent); }
.ui-mailbox-smartq-help { font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.ui-mailbox-smartq-bad { font-size: 12.5px; line-height: 1.45; color: var(--ui-danger); }
.ui-mailbox-smartq-bad[hidden] { display: none; }
.ui-mailbox-smartq-btns { display: flex; justify-content: flex-end; gap: 8px; }
/* an instruction Astra has written down for another agent (Tom, 9 Oct 2026): its words on the card, as they will be handed
   over, set off by a rule down the left; a long one scrolls in its own height */
.ui-mailbox-taskwords { margin: 7px 0 4px; padding: 7px 10px; max-height: 220px; overflow-y: auto; border-left: 2px solid var(--accent); border-radius: 0 var(--ui-r-sm) var(--ui-r-sm) 0;
  background: var(--surface); font-size: 13px; line-height: 1.5; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-mailbox-taskcard.is-done .ui-mailbox-taskwords { color: var(--text-muted); }
/* (with no ordinary filter under it, it has no rule under it either: the menu's foot has its own) */
.ui-mailbox-airow:not(:has(~ .ui-filter-row)) { margin-bottom: 0; padding-bottom: 4px; border-bottom: 0; }
.ui-mailbox-sent { margin: 0 8px 10px 2px; padding: 8px 12px; border-radius: var(--ui-r-sm); background: var(--ui-teal-tint); color: var(--accent); font-size: 13px; }
/* an open conversation */
/* on the full page the conversation has the page's whole width (Tom, 6 Oct 2026): its buttons end at the page's right edge */
.ui-mailbox-open { margin: 0 8px 40px 2px; }
.ui-mailbox-acts { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.ui-mailbox-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 4px; }
.ui-mailbox-title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.ui-mailbox-owner { display: inline-flex; align-items: center; font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.ui-mailbox-owner .achip-av.ui-mailbox-av { vertical-align: 0; }
.ui-mailbox-note { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.ui-mailbox-msg .ui-note-ago { margin-left: auto; white-space: nowrap; }
.ui-mailbox-msg.ui-mailrow > .ui-item-main { cursor: default; }
/* each open email's Reply / Reply all / Forward are icons in the bottom right corner of its card (Tom, 6 Oct 2026) */
.ui-mailbox-msg { position: relative; }
.ui-mailbox-msg .ui-mail-acts { position: absolute; right: 10px; bottom: 8px; height: 34px; gap: 2px; }
.ui-mailbox-msg .ui-mail-acts .ui-iconbtn svg { width: 22px; height: 22px; }
/* drawn lightly, so they sit back until the mouse is on them */
.ui-mailbox-msg .ui-mail-acts .ui-iconbtn { color: color-mix(in srgb, var(--text-muted) 50%, transparent); }
.ui-mailbox-msg .ui-mail-acts .ui-iconbtn:is(:hover, :focus-visible) { color: var(--text-muted); }
/* The same three at the head of an open email, after its date (Tom, 9 Oct 2026: a long email had to be scrolled to its foot to
   answer it): a little smaller than the ones at the foot, as faint, and taking no more height than the row has. */
.ui-mailbox-msg .ui-mailbox-topacts { display: inline-flex; flex: none; align-self: center; gap: 2px; margin: -2px -6px -2px 0; }
.ui-mailbox-msg .ui-mailbox-topacts .ui-iconbtn { width: 30px; height: 30px; color: color-mix(in srgb, var(--text-muted) 50%, transparent); }
.ui-mailbox-msg .ui-mailbox-topacts .ui-iconbtn svg { width: 20px; height: 20px; }
.ui-mailbox-msg .ui-mailbox-topacts .ui-iconbtn:is(:hover, :focus-visible) { color: var(--text-muted); }
.ui-mailbox-conv .ui-list.ui-mailbox-msgs > .ui-mailbox-msg:not(.is-closed):has(.ui-mail-acts) { padding-bottom: 48px; }
.ui-mailbox-msg .ui-note-head { min-height: 34px; align-items: center; }          /* the name sits level with the middle of the avatar beside it (Tom, 6 Oct 2026) */
/* an email's own text starts at the card's left edge, under the avatar, not in from it (Tom, 6 Oct 2026):
   44px is the avatar and the gap beside it */
/* An email sent from an inbox of ours that has no picture (the AgentMail inbox in a person's name): the site's grey
   blob with their initials, as that inbox has in the lists (ui-agent-face's rule for .ui-mailbox-av). */
.ui-mailbox-msg .achip-av.is-ours:not(:has(img)) { border: 0 !important; border-radius: 0 !important; background: url("/static/avatars/_initials.svg?v=1") center / 108% 108% no-repeat !important; box-shadow: none !important; overflow: visible !important; color: #32302C !important; font-weight: 700; }
/* a line parts who an email is from and to (and its files) from what it says (Tom, 6 Oct 2026) */
.ui-mailbox-body { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--ui-line); }
.ui-mailbox-msg .ui-mailbox-full > .ui-mailbox-body { margin-left: -44px; }
.ui-mailbox-body .ui-mailbox-pics { margin-left: 0; }
/* A conversation's emails, newest first, each a white card on the grey ground, in the side panel
   as on the full page (Tom, 6 Oct 2026). All but the newest are folded to one line (who, how it
   starts, when): a folded email opens wherever it is clicked, an open one folds at its name row. */
.ui-mailbox-conv .ui-list.ui-mailbox-msgs { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ui-mailbox-conv .ui-list.ui-mailbox-msgs > .ui-mailbox-msg, .ui-panel.ui-mailbox-panel .ui-list.ui-mailbox-msgs > .ui-mailbox-msg {
  margin: 0; padding: 14px 16px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--panel, #fff);
}
.ui-mailbox-conv .ui-list.ui-mailbox-msgs > .ui-mailbox-msg.is-closed { padding-top: 11px; padding-bottom: 11px; }
.ui-panel.ui-mailbox-panel .ui-panel-body, body.light .ui-panel.ui-mailbox-panel .ui-panel-body { background: var(--page-ground, #121317); }
.ui-mailbox-fold { display: none; align-items: baseline; gap: 10px; min-width: 0; }
.ui-mailbox-fold-who { flex: none; max-width: 40%; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-mailbox-fold-text { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-mailbox-fold-when { flex: none; font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.ui-mailbox-fold .ui-mail-clip { flex: none; margin-left: 0; }
.ui-mailbox-msg.is-closed { align-items: center; cursor: pointer; }
.ui-mailbox-conv .ui-list.ui-mailbox-msgs > .ui-mailbox-msg.is-closed:hover { border-color: var(--ui-line-head); box-shadow: 0 1px 3px rgba(14, 14, 18, .06); }
.ui-mailbox-msg.is-closed .ui-mailbox-fold { display: flex; }
.ui-mailbox-msg.is-closed :is(.ui-note-head, .ui-mailbox-full, .ui-mail-acts) { display: none; }
.ui-mailbox-msg.is-closed > .ui-note-av { width: 24px; height: 24px; margin: 0 4px; font-size: 10px; }
/* someone else's email: their lettered tile, as in the list, at the size of the avatar it stands in for */
.ui-mailbox-msg > .ui-tile.ui-mailbox-msgtile { width: 32px; height: 32px; margin: 1px 0 0; top: 0; border-radius: 8px; font-size: 15px; }
.ui-mailbox-msg.is-closed > .ui-tile.ui-mailbox-msgtile { width: 24px; height: 24px; margin: 0 4px; border-radius: 6px; font-size: 12px; }
.ui-mailbox-msg.is-closed.is-unread .ui-mailbox-fold-text { color: var(--text); }
.ui-mailbox-msg:not(.is-closed) .ui-note-head { cursor: pointer; }
.ui-mailbox-body .ui-mail-body { margin-top: 0; font-size: 14px; }
/* the dark theme: no white page under an email (Tom, 7 Oct 2026); it lies on the card as the CRM's emails do, in the page's text colour (agent_email.js, darkStyle) */
.ui-mailbox-frame { display: block; width: 100%; height: 48px; border: 0; border-radius: var(--ui-r-sm); background: transparent; color-scheme: dark; }
body.light .ui-mailbox-frame { background: #fff; color-scheme: light; }
.ui-mailbox-pics { display: block; margin: 0 0 8px; }
/* the composer: under a conversation it lines up with the emails' text; a new email is a card above the list */
.ui-mailbox-conv .ui-mailbox-composer { margin: 0; padding: 4px 16px 14px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--panel, #fff); }
.ui-mailbox-listview > .ui-mailbox-composer { margin: 0 8px 16px 2px; padding: 4px 16px 14px; border: 1px solid var(--border); border-radius: var(--ui-r); background: var(--surface); }
.ui-mailbox-composer .ui-mailbox-cclink { flex: none; margin: 0 4px 0 8px; text-decoration: none; white-space: nowrap; }
.ui-mailbox-composer.ui-mail-composer .issue-desc-toolbar { margin-top: 8px; }
.ui-mailbox-sig { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--ui-line-head); font-size: 13px; line-height: 1.5; color: var(--text-muted); white-space: pre-wrap; }
@media (max-width: 640px) { .ui-mailbox-table .ui-mailbox-c-linear { display: none; } .ui-mailbox-table .ui-mailbox-c-agent { width: 40px; } .ui-mailbox-agent { display: none; } .ui-mailbox-table .ui-mailbox-c-who { width: 34%; } }
/* On the full page the subject is where the side panel has it, in the header's dark row and in the
   same lettering, starting at the email's left edge (Tom, 6 Oct 2026); the conversation's buttons
   and a Close are at the right end of that row. The script places both (.ui-mailbox-pagetitle,
   .ui-mailbox-crumbacts). The page's own bar and heading are put away. */
body.has-mailpage .topnav > .crumbs { position: relative; }
.ui-mailbox-pagetitle { position: absolute; transform: translateY(-50%); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-mailbox-crumbacts { display: flex; align-items: center; gap: 4px; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
.ui-mailbox-crumbacts :is(.ui-iconbtn, .drawer-btn) { width: 28px; height: 28px; margin: 0; padding: 0; justify-content: center; color: rgba(255, 255, 255, .7); }
.ui-mailbox-crumbacts :is(.ui-iconbtn, .drawer-btn) svg { width: 16px; height: 16px; }
.ui-mailbox-crumbacts :is(.ui-iconbtn, .drawer-btn):is(:hover, :focus-visible, [aria-expanded="true"]) { color: #fff; background: rgba(255, 255, 255, .10); }
body.has-mailpage .ui-mailbox-open :is(.hiring-page-bar, .ui-mailbox-title) { display: none; }
/* An open email is first a side panel (.ui-panel, the CRM's), its subject in the name row over the
   header; Maximise takes it to the full page. What the page's own bar holds (Back, Restore, the
   subject as a heading) the panel does not need. */
.ui-mailbox-paneltitle { flex: 1 1 auto; min-width: 0; height: var(--name-h, 40px); line-height: var(--name-h, 40px); padding-right: 138px; color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Pinned emails, as tabs (Tom, 9 Oct 2026: "pin that so that when I click on another email, that opens up in the right pane as
   a separate tab (a bit like Cursor does)"). The pin is the first of the panel's buttons, teal while the open email is pinned. The
   tabs are a row between the panel's top row and the email, there only while something is pinned: one for each pinned email, and
   one more, in italics, for an open email that is not. The tab on show has the email's own ground and a teal line over it; a
   tab's cross shows on the tab on show and under the mouse. */
.ui-panel.ui-mailbox-panel .ui-panel-bar.is-aligned .drawer-actions .ui-mailbox-pinbtn.is-on { color: var(--accent); }
.ui-mailbox-pinbtn svg { width: 16px; height: 16px; }
.ui-mailbox-tabs { flex: none; display: flex; align-items: stretch; height: 34px; overflow-x: auto; scrollbar-width: none; background: var(--ui-panel); border-bottom: 1px solid var(--border); }
.ui-mailbox-tabs[hidden] { display: none; }
.ui-mailbox-tabs::-webkit-scrollbar { display: none; }
.ui-mailbox-tab { position: relative; flex: 0 1 210px; min-width: 96px; display: flex; align-items: center; gap: 6px; box-sizing: border-box; padding: 0 6px 0 12px; border-right: 1px solid var(--border); font-size: 13px; color: var(--text-muted); cursor: pointer; user-select: none; -webkit-user-select: none; }
.ui-mailbox-tab:hover { color: var(--text); background: var(--ui-hover); }
.ui-mailbox-tab:focus-visible { outline: 2px solid #5e6e74; outline-offset: -2px; }
.ui-mailbox-tab.is-active { color: var(--text); background: var(--page-ground, #121317); box-shadow: inset 0 2px 0 var(--accent); }
.ui-mailbox-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--page-ground, #121317); }      /* (it runs on into its email) */
.ui-mailbox-tabname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-mailbox-tab:not(.is-pinned) .ui-mailbox-tabname { font-style: italic; }
.ui-mailbox-tabpin { flex: none; display: inline-flex; color: var(--text-muted); }
.ui-mailbox-tabpin svg { width: 12px; height: 12px; }
.ui-mailbox-tab.is-active .ui-mailbox-tabpin { color: var(--accent); }
.ui-mailbox-tabx { flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--ui-r-sm); background: none; font: inherit; font-size: 16px; line-height: 1; color: var(--text-muted); cursor: pointer; visibility: hidden; }
.ui-mailbox-tab:is(:hover, .is-active, :focus-within) .ui-mailbox-tabx { visibility: visible; }
.ui-mailbox-tabx:hover, .ui-mailbox-tabx:focus-visible { color: var(--text); background: var(--ui-selected); }
/* ---- the emails minimised to the foot of the window (Tom, 16 Oct 2026) ----
   "When I pin an email I should be able to minimise it which then show as minimised tab on right below screen."
   Each minimised email is a chip along the bottom right, as a window put down to a taskbar, and a click on one
   opens it again in the panel. While the panel is open they stand clear of it, to its left, so a chip is never
   under the email on show. The row scrolls sideways rather than climb the window if many are down there. */
.ui-maildock { position: fixed; z-index: 33; right: 16px; bottom: 0; display: flex; align-items: flex-end; gap: 8px; max-width: calc(100vw - 32px); overflow-x: auto; scrollbar-width: none; }
.ui-maildock[hidden] { display: none; }
.ui-maildock::-webkit-scrollbar { display: none; }
body.has-sidepanel:not(.has-crmpanel) .ui-maildock { right: calc(min(var(--ui-panel-w), 100vw) + 16px); }
.ui-maildock-item { flex: none; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 230px; height: 34px; padding: 0 6px 0 12px; border: 1px solid var(--border); border-bottom: 0; border-radius: var(--ui-r) var(--ui-r) 0 0; background: var(--ui-panel); color: var(--text); font-size: 13px; cursor: pointer; box-shadow: 0 -4px 16px rgba(14, 14, 18, .14); }
.ui-maildock-item:hover { background: var(--ui-hover); }
.ui-maildock-item:focus-visible { outline: 2px solid #5e6e74; outline-offset: -2px; }
.ui-maildock-icon { flex: none; display: inline-flex; color: var(--text-muted); }
.ui-maildock-icon svg { width: 15px; height: 15px; }
.ui-maildock-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-maildock-x { flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--ui-r-sm); background: none; font: inherit; font-size: 16px; line-height: 1; color: var(--text-muted); cursor: pointer; }
.ui-maildock-x:hover, .ui-maildock-x:focus-visible { color: var(--text); background: var(--ui-selected); }
@media (max-width: 640px) { .ui-maildock-item { width: 160px; } }
.ui-mailbox-panel :is(.hiring-back, .ui-mailbox-restore, .ui-mailbox-title) { display: none; }
.ui-mailbox-panel .ui-panel-body { padding-bottom: 28px; }
.ui-mailbox-panel .hiring-page-bar { float: right; margin: -6px -6px 0 8px; }
/* In the panel the buttons are floated at the right, and a flex line can only use what a float leaves it,
   which split the chips across two lines (Tom, 15 Oct 2026: "keep the labels in the snoozed view all on
   one line"). Block flow here instead, so the chip row can simply clear the buttons and have the width. */
.ui-mailbox-panel .ui-mailbox-head { display: block; min-height: 28px; }
.ui-mailbox-panel .ui-mailbox-chiprow { clear: right; margin-top: 6px; }
.ui-mailbox-msg .ui-note-head { flex-wrap: wrap; row-gap: 2px; }
.ui-mailbox-msg .ui-note-head .ui-tag { margin-left: 0; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .ui-mailbox-panel.is-entering { animation: ui-slide-in var(--ui-slide-in) both; }
  .ui-mailbox-panel.is-leaving { animation: ui-slide-out var(--ui-slide-out) both; }
}

/* ---- ui-account: a person's own settings, at the foot of the left panel (Tom, 6 Oct 2026) ----
   "My settings" is the last row of the left panel, over the rule the dark-mode switch sits under,
   on every page. It opens a side panel with the person's mailboxes and each mailbox's signature
   (the CRM's .ui-set-* inside it): one place for both the CRM and the Email page. The panel is the
   house side panel (.ui-panel) on the LEFT of the window (Tom, 6 Oct 2026): against the right edge
   of the left panel it is opened from, under the header, over the menus beside it.
   It slides out from behind that edge and back, at the side panels' pace. Only its transform
   moves, so the browser slides one ready-drawn layer and nothing is drawn again on the way (it
   first moved with a shrinking cut-out, which was redrawn every frame: "slightly clunky", Tom).
   What hides it on the way is .ui-account-wrap: a still window the panel's width that starts at
   the left panel's edge and cuts off whatever of the panel is not yet inside it.
     <div class="side-nav side-account"><button class="side-link" id="my-settings-btn">
         <span class="side-ico"><svg/></span><span class="side-label">My settings</span></button></div>     (folded: the cog alone)
     <div class="ui-account-wrap"><aside class="ui-panel ui-account-panel ui-setpane [is-in]">
       <div class="ui-panel-bar"><span class="ui-account-title">My settings</span><div class="drawer-actions">…</div></div>
       <div class="ui-panel-body ui-setpane-body">…</div></aside></div>
   templates/_my_settings.html, static/my_settings.js. */
.side-nav.side-account { flex: none; margin: 8px 0 10px; overflow: visible; }
.side-account .side-link { width: 100%; box-sizing: border-box; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 350; text-align: left; cursor: pointer; }
.side-account .side-link:hover { background: rgba(127, 127, 127, .10); color: var(--text); }
.side-account .side-link.is-open, .side-account .side-link.is-open:hover { background: rgba(127, 127, 127, .16); color: var(--text); }          /* its panel is open: marked, but it is not a page (so not .active, the teal bar of the page one is on) */
.ui-account-wrap {          /* 44px wider than the panel: room for its shadow. It takes no clicks itself. */
  --account-shadow: 44px;
  position: fixed; z-index: 34; left: var(--rail-w); top: var(--head-h, 102px); bottom: 0;
  width: calc(min(var(--ui-panel-w), 100vw - var(--rail-w)) + var(--account-shadow)); overflow: hidden; pointer-events: none;
}
.ui-panel.ui-account-panel {
  position: absolute; z-index: auto; left: 0; right: auto; top: 0; bottom: 0; width: calc(100% - var(--account-shadow)); pointer-events: auto;
  background: var(--ui-panel); border-left: 0; border-right: 1px solid var(--ui-line-head); box-shadow: 12px 0 32px rgba(14, 14, 18, .10);
  transform: translateX(calc(-100% - var(--account-shadow))); will-change: transform;
}
.ui-panel.ui-account-panel.is-in { transform: none; }
.ui-account-title { flex: 1 1 auto; min-width: 0; color: var(--text); font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-account-panel .ui-panel-body { padding: 14px 22px 28px; }
@media (max-width: 820px) {          /* the left panel is a strip across the top here: the settings take the window under it */
  .ui-account-wrap { --account-shadow: 0px; left: 0; top: var(--rail-h, 0px); width: 100vw; }
  .ui-panel.ui-account-panel { border-right: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .ui-panel.ui-account-panel { transition: transform var(--ui-slide-out); }
  .ui-panel.ui-account-panel.is-in { transition: transform var(--ui-slide-in); }
}

/* ---- ui-cocode: a company's short code in a thin grey outline box (Tom, 6 Oct 2026) ----
   The companies in the dark left panel carry no sector icon. Each is its code (HG, LF, PC…) in
   an outline box: before the company's name while the panel is open, alone when it is folded.
   The boxes are one width, so they line up down the panel whatever the length of the code.
   The line is the grey of the menus' icons and the letters the grey of their labels, at the
   menu's own weight (first drawn white and bold; Tom: thinner, grey, not thick). On the teal row
   of the company on screen, and under the mouse, the letters are white as that row's name is.
     <a class="side-link"><span class="ui-cocode">LF</span><span class="side-label">Latimer Fabrication</span></a>
   templates/_side_rail.html. */
.ui-cocode {
  flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 44px; height: 28px; border: 1px solid rgba(244, 247, 247, .56); border-radius: var(--ui-r-sm);
  color: rgba(244, 247, 247, .74); font-size: 12.5px; font-weight: 350; letter-spacing: .02em; line-height: 1;
}
.side-link:hover .ui-cocode { color: #fff; }
.side-link.active .ui-cocode { color: #fff; border-color: rgba(255, 255, 255, .7); }

/* ---- ui-smartview: a view of the Email page that Astra keeps (Tom, 7 Oct 2026) ----
   Astra's face in the mailbox's Filters menu, just right of "+ New filter" (Tom, 8 Oct 2026; it was
   in the bar): .ui-mailbox-smartbtn, a ring round it when she keeps the view on show. A kept view's tab is led by
   a small spark (.ui-mailbox-smartmark). Under the bar, one line while she is reading the mail
   or when she could not (.ui-mailbox-smartline). An email opened from such a view says why it is
   there, above its first email (.ui-mailbox-why, on the draft note's lettering). In Astra's panel
   a heading above the chat says which view she is being asked about (.ui-mailbox-smarthead), and
   the rule she wrote shows as a card, not as its JSON (.ui-mailbox-smartcard). An AI filter saved as a
   template is chosen from the menu her face opens (.ui-mailbox-smartmenu) and saved from that heading.
   static/email_smart.js draws all of it. */
.ui-mailbox .ui-pagebar > .ui-mailbox-smartbtn { display: none; }          /* (as the page is sent it is in the bar: the script takes it into the Filters menu) */
.ui-filter-foot > .ui-mailbox-smartbtn { flex: none; margin-right: auto; border-radius: 50%; }          /* the foot's left group: "+ New filter", then her face */
.ui-filter-foot > .ui-mailbox-smartbtn[hidden] { display: none; }
.ui-filter-foot > .ui-filter-add:has(+ .ui-mailbox-smartbtn:not([hidden])) { margin-right: 0; }
.ui-filter-foot > .ui-mailbox-smartbtn .ax-av { width: 24px; height: auto; }          /* (her face fills the button: .ui-iconbtn.is-sm would draw it at 15px) */
.ui-mailbox-smartbtn .ax-av-ball { fill: #B3B1AC; }
.ui-mailbox-smartbtn .ax-av-eye { fill: #32302C; }
.ui-mailbox-smartbtn.is-on { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ui-mailbox-smartmark { flex: none; width: 12px; height: 12px; color: var(--accent); }
.ui-mailbox-views .ivt-tab-btn > .ui-mailbox-smartmark { margin-right: 5px; vertical-align: -1px; }
.ui-mailbox-smartline { display: flex; align-items: center; gap: 7px; margin: -4px 8px 10px 12px; font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }
.ui-mailbox-smartline.is-bad { color: var(--ui-danger); }
.ui-mailbox-smartline.is-busy > .ui-mailbox-smartmark { animation: ui-smartview-pulse 1.4s ease-in-out infinite; }
@keyframes ui-smartview-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ui-mailbox-smartline.is-busy > .ui-mailbox-smartmark { animation: none; } }
.ui-mailbox-note.ui-mailbox-why { display: flex; align-items: flex-start; gap: 7px; margin: 6px 0 12px; }
.ui-mailbox-why > .ui-mailbox-smartmark { margin-top: 4px; }
.ui-mailbox-why-text { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ui-mailbox-note.ui-mailbox-why > .ui-linkbtn.ui-mailbox-whyno { flex: none; margin-left: auto; padding-left: 12px; font-size: 12.5px; white-space: nowrap; }
.ui-mailbox-smarthead { flex: none; display: flex; align-items: flex-start; gap: 9px; padding: 12px 16px 12px 18px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ui-mailbox-smarthead > .ui-mailbox-smartmark { width: 15px; height: 15px; margin-top: 3px; }
.ui-mailbox-smarthead-text { min-width: 0; }
.ui-mailbox-smarthead-t { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text); }
.ui-mailbox-smarthead-s { margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
#astra-window .ax-greeting[data-mail-smart] { text-align: center; }          /* "Tell Astra what ... should hold", where her greeting is: centred under the logo when it runs to two lines */
/* templates: the menu her face opens when any are saved, and "Save as template" in the heading of her panel */
.ui-menu.ui-mailbox-smartmenu { min-width: 250px; max-width: min(340px, calc(100vw - 16px)); }
.ui-menu-item.ui-mailbox-smarttpl { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ui-menu-item.ui-mailbox-smarttpl > .ui-mailbox-smartmark { width: 13px; height: 13px; color: var(--accent); }
.ui-mailbox-smarttpl-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.ui-menu-item.ui-mailbox-smarttpl > .ui-menu-n { padding-left: 4px; font-size: 11.5px; }
.ui-menu-item.ui-mailbox-smarttpl > .ui-iconbtn { flex: none; width: 24px; height: 24px; margin: -3px -4px -3px 0; }
.ui-menu-item.ui-mailbox-smarttpl > .ui-iconbtn svg { width: 14px; height: 14px; }
.ui-menu-item.ui-mailbox-smartnew { font-weight: 500; }
.ui-mailbox-smarthead { position: relative; }
.ui-mailbox-smarthead-text > .ui-linkbtn.ui-mailbox-smartsave { display: block; margin: 7px 0 0; font-size: 12.5px; white-space: nowrap; }          /* under the heading's words */
.ui-mailbox-smarthead-text > .ui-linkbtn.ui-mailbox-smartsave:disabled { text-decoration: none; cursor: default; }
.ui-mailbox-smartpop {          /* the views' naming pop-up (.ivt-pop), drawn under the heading */
  position: absolute; z-index: 70; top: calc(100% + 4px); left: 42px; box-sizing: border-box; width: 280px; max-width: calc(100% - 20px); padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--panel, var(--surface)); border: 1px solid var(--panel-border, var(--border)); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.ui-mailbox-smartcard { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; padding: 9px 11px; border-radius: var(--ui-r); background: var(--ui-fill); font-size: 13px; line-height: 1.45; color: var(--text); }
.ui-mailbox-smartcard > .ui-mailbox-smartmark { margin-top: 3px; }
.ui-mailbox-smartcard-note { min-width: 0; flex: 1; }
.ui-mailbox-smartcard.is-bad { color: var(--ui-danger); }
.ui-mailbox-smartcard > .ui-btn { flex: none; }
#astra-window pre[data-mail-smart] { display: none; }
/* On a view's chat the strip over the chat says the filter in force, shortly (.ui-mailbox-smarttop), in place of the chat's
   name, "Private" and "Share with team" (Tom, 8 Oct 2026: an AI filter is shared by saving it as a template for everyone). */
#astra-window.is-mailsmart .ax-top > :not(.ui-mailbox-smarttop) { display: none; }
#astra-window.is-mailsmart.is-mailsmart-none .ax-top { display: none; }
#astra-window.is-mailsmart .ax-top { min-height: 0; padding-top: 9px; padding-bottom: 9px; }
.ui-mailbox-smarttop { min-width: 0; font-size: 13px; line-height: 1.45; color: var(--text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

/* ---- ui-tip: the hover tip (Tom, 9 Oct 2026) -------------------------------------------------
   The one hover tip of every page. UI.tip (ui.js) shows an element's title in it, in place of the
   browser's own slow box, once the mouse has rested on the element for --ui-tip-delay. It is fixed
   to the window, in the top layer (a popover), so nothing clips it and it is over an open dialog:
   under the element, or by the pointer when the element is large. The page turned inside out so
   that it stands out: dark on the light theme, light on the dark one. */
.ui-tip {
  position: fixed; inset: 0 auto auto 0; z-index: 10000; box-sizing: border-box; width: max-content; max-width: min(360px, calc(100vw - 16px));
  margin: 0; padding: 5px 9px; border: 0; border-radius: var(--ui-r-sm); overflow: visible;
  background: #f4f7f7; color: #0e0e12; box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  font-size: 12px; font-weight: 400; line-height: 1.35; letter-spacing: 0; text-align: left; text-transform: none;
  white-space: pre-line; overflow-wrap: anywhere; pointer-events: none;
}
.ui-tip[hidden] { display: none; }
body.light .ui-tip { background: #2a2d33; color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); }

/* ---- ui-lock: the padlock on a page someone may not open (Tom, 12 Oct 2026) -------------
   A guest sees the whole menu, not a cut-down one, so the shape of the place is plain. The
   pages they were not invited to carry a padlock and lead to ui-locked-page, which says so.
   The padlock is appearance only: an uninvited page's contents are never sent. */
.ui-locked { opacity: .45; }
.ui-locked:hover, .ui-locked:focus-visible { opacity: .62; }
.ui-lock { display: inline-flex; align-items: center; flex: 0 0 auto; margin-left: auto; padding-left: 6px; }
.ui-lock svg { width: 13px; height: 13px; display: block; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }

/* ---- ui-locked-page: what stands in for a page a guest may not open ---------------------- */
.ui-locked-page { display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 64px 24px; text-align: center; color: var(--text-muted); }
.ui-locked-page svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.ui-locked-page h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); }
.ui-locked-page p { margin: 0; font-size: 13.5px; max-width: 46ch; }

/* ===== 3. CRM (and the site-wide rules written alongside it, Oct 2026) ================ */
/* ==== CRM (Oct 2026) ====================================================
   Contacts, companies, brokers and deals, read from the company's own Supabase
   project. Built from the SOPs furniture (full page inside the widget, .issues-table,
   .issues-toolbar, .subtab-bar, .issue-section-label). app/widgets/crm.py */
.crm-widget.showing-page > :not(.ui-fullpage):not(dialog) { display: none !important; }   /* a dialog opened from a record page must still show */
.widget.crm-widget { overflow: visible; }
body.theme-slate.light .widget.crm-widget,
body.theme-slate .widget.crm-widget,
.widget.crm-widget.crm-widget {
  background: transparent; box-shadow: none; border: 0; border-radius: 0; padding: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* The CRM's own menu: a second rail beside the main one and UNDER the header, which
   still runs the full width (Tom, 2 Oct 2026). It is fixed to the window and the
   content column makes room for it; it collapses to icons like the main rail.
   crm.js lifts it out of the widget; until then, and on phones where there are no
   rails, it is not shown and the row of sub-tabs is. */
body { --crm-rail-w: 212px; }
body.crm-rail-mini { --crm-rail-w: 56px; }
.crm-widget .crm-subrail { display: none; }
.crm-subrail {
  position: fixed; z-index: 20; left: var(--rail-w); top: var(--head-h, 60px); bottom: 0; width: var(--crm-rail-w);
  display: flex; flex-direction: column; gap: 2px; padding: 18px 10px 12px; box-sizing: border-box;
  background: #fff; border-right: 1px solid var(--border); overflow: hidden auto;
  transition: left 0.2s ease, width 0.2s ease;
}
body.theme-slate:not(.light) .crm-subrail { background: #17181c; }
body.has-subrail .content { padding-left: calc(var(--content-pad-x) + var(--crm-rail-w)); transition: padding-left 0.2s ease; }
body.has-subrail .content .dash-head .topnav { margin-left: calc(-1 * (var(--content-pad-x) + var(--crm-rail-w))); }
.crm-subrail-title {
  margin: 0 12px 12px; font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted); white-space: nowrap;
}
.crm-subrail-link {
  display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: var(--ui-r);
  color: var(--text); text-decoration: none; font-size: 14px; white-space: nowrap; flex: none;
}
.crm-subrail-link svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--text-muted); }
.crm-subrail-link:hover { background: var(--ui-hover); }
.crm-subrail-link.active { background: rgba(31, 185, 167, .12); font-weight: 500; }
.crm-subrail-link.active svg { color: var(--accent); }
.crm-subrail-link .crm-count { margin-left: auto; }
.crm-subrail-toggle {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none; border: 0; border-radius: var(--ui-r); background: none; color: var(--text-muted);
}
.crm-subrail-toggle:hover { background: var(--ui-hover); color: var(--text); }
.crm-subrail-toggle svg { width: 18px; height: 18px; }
/* collapsed: icons only, the label left to the tooltip */
body.crm-rail-mini .crm-subrail-title { visibility: hidden; }
body.crm-rail-mini .crm-subrail-label, body.crm-rail-mini .crm-subrail .crm-count { display: none; }
body.crm-rail-mini .crm-subrail-link { justify-content: center; padding: 0; }
body.crm-rail-mini .crm-subrail-toggle { align-self: center; }
/* collapsed, its small boxes sit on the same rows as the two dark rails beside it
   (Tom, 4 Oct 2026; "One set of rows for the three rails" in dashboard.css) */
body.crm-rail-mini .crm-subrail { padding: 0 10px 15px; gap: var(--rail-gap); }
body.crm-rail-mini .crm-subrail-link { margin: calc((var(--rail-row) - 38px) / 2) 0; }
/* Favourites (Tom, 9 Oct 2026): under a line beneath the menu's last entry, the views this person has
   marked from a view's dots menu. A row is a menu row with the icon of the list its view shows; a star
   comes to the row's end with the mouse (or the keyboard) and takes the view off again. Collapsed, the
   rows keep to the rails' rows and the line sits in the gap above them. */
.crm-subrail-favs { flex: none; display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--border); }
.crm-subrail-favs .crm-subrail-title { margin-bottom: 6px; }
.crm-subrail-favlist { display: flex; flex-direction: column; gap: 2px; }
.crm-subrail-fav .crm-subrail-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crm-subrail-none { margin: 0; padding: 0 12px; font-size: 13px; line-height: 1.45; color: var(--text-muted); white-space: normal; }
.crm-subrail-unfav { flex: none; display: none; place-items: center; width: 24px; height: 22px; margin: 0 -5px 0 2px; padding: 0; border: 0; border-radius: var(--ui-r-sm); background: none; color: var(--text-muted); cursor: pointer; }
.crm-subrail-fav > .crm-subrail-unfav svg { flex: none; width: 15px; height: 15px; color: inherit; fill: currentColor; }
.crm-subrail-fav:is(:hover, :focus-within) > .crm-subrail-unfav { display: inline-grid; }
.crm-subrail-unfav:is(:hover, :focus-visible) { background: var(--ui-fill-strong); color: var(--text); }
@media (hover: none) { .crm-subrail-unfav { display: inline-grid; opacity: .7; } }          /* nothing hovers on a touch screen: always there */
body.crm-rail-mini .crm-subrail-favs .crm-subrail-title, body.crm-rail-mini .crm-subrail-none, body.crm-rail-mini .crm-subrail-unfav { display: none; }
body.crm-rail-mini .crm-subrail-favs { position: relative; gap: var(--rail-gap); margin-top: 0; padding-top: 0; border-top: 0; }
body.crm-rail-mini .crm-subrail-favlist { gap: var(--rail-gap); }
body.crm-rail-mini .crm-subrail-favs::before { content: ""; position: absolute; left: 2px; right: 2px; top: calc(var(--rail-gap) / -2); border-top: 1px solid var(--border); }
body.crm-rail-mini .crm-subrail-favs:has(.crm-subrail-none) { display: none; }
.ivt-menu [data-act="fav"].is-on svg { fill: currentColor; }          /* the star is filled while the view is a favourite */
.crm-kinds .crm-subrail-favtab svg { width: 13px; height: 13px; margin-right: 5px; vertical-align: -1.5px; fill: currentColor; }
/* A favourite is a group of views (Tom, 9 Oct 2026): a group has its own icon and, with several views, how many
   after its name. The button at the row's end is its dots (rename, remove), and the name is rewritten in the row. */
.crm-subrail-fav.is-renaming > :is(.crm-subrail-unfav, .crm-count) { display: none; }
.crm-subrail-fav > .ivt-name { flex: 1 1 auto; min-width: 0; width: auto; height: 28px; margin-right: -4px; padding: 0 10px; }
body.has-subrail .crm-kinds { display: none; }
@media (max-width: 820px) {
  .crm-subrail { display: none; }
  body.has-subrail .crm-kinds { display: flex; }
  body.has-subrail .content { padding-left: var(--content-pad-x); }
  body.has-subrail .content .dash-head .topnav { margin-left: calc(-1 * var(--content-pad-x)); }
}
/* The header (Tom, 2 Oct 2026): the sections are one dropdown named after the section
   you are in, and the rest of the bar is that section's own menu (#tool-menu) — for
   the CRM, the views of the current list. */
html body .dash-head .secmenu-btn {
  flex: 0 0 auto; width: auto; align-self: center; height: 34px; padding: 0 10px 0 14px; gap: 6px;
  border: 1px solid rgba(255, 255, 255, .24); border-radius: var(--ui-r); color: #fff; font-weight: 500;
}
html body .dash-head .secmenu-btn:hover,
html body .dash-head .secmenu-btn[aria-expanded="true"] { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .06); }
html body .dash-head .secmenu { margin-top: 6px; border-radius: 10px; max-height: calc(100vh - 90px); overflow-y: auto; }
html body .dash-head .tabmenu .tabmenu-head {
  margin: 8px 10px 2px; font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted);
}
html body .dash-head .tabmenu .tabmenu-head:first-child { margin-top: 4px; }
/* A rule between sections (Tom, 2 Oct 2026): above each group's heading, and above a
   section that stands alone after a group (the CRM after Operations). */
html body .dash-head .secmenu .tabmenu-head:not(:first-child),
html body .dash-head .secmenu li:not(.tabmenu-solo) + .tabmenu-solo {
  margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12);
}
html body.light .dash-head .secmenu .tabmenu-head:not(:first-child),
html body.light .dash-head .secmenu li:not(.tabmenu-solo) + .tabmenu-solo { border-top-color: rgba(14, 14, 18, .12); }
html body .dash-head .secmenu .tabmenu-head:not(:first-child) { margin-left: 0; margin-right: 0; padding-left: 10px; padding-right: 10px; }
html body .dash-head .secmenu li:not(.tabmenu-solo) + .tabmenu-solo { padding-top: 6px; }
/* The header (Tom, 2 Oct 2026, after trying the breadcrumbs beside the dropdown and a
   sub-menu row beneath): row one is the company name, the section dropdown, the bell
   and Settings; under a hairline, row two is the breadcrumbs. Nothing else lives
   here: a page's sub-menu sits on the page (.pagetabs, below). The page starts under
   the header with its own top gap. */
.content .dash-head .topnav { flex-wrap: wrap; align-content: flex-start; row-gap: 0; margin-bottom: 22px; }
.content .dash-head .topnav > .topnav-name { order: 1; min-height: 60px; display: flex; align-items: center; }
html body .dash-head .secmenu-btn { order: 2; }
html body .dash-head .tool-menu { order: 3; flex: 1 1 0; min-width: 0; min-height: 60px; }   /* empty: it only pushes the bell and gear to the right */
.content .dash-head .topnav > .notify-wrap { order: 4; }
.content .dash-head .topnav > .settings-link { order: 5; }
/* Email, left of the bell (Tom, 9 Oct 2026): the gear's look, the bell's place in the row. */
.content .dash-head .topnav > .settings-link.mail-link { order: 4; }
html body .dash-head .mail-link + .notify-wrap { margin-left: 4px; }
.content .dash-head .topnav > .crumbs {
  order: 20; flex: 0 0 100%; min-width: 0; margin: 0; padding: 9px 0 11px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}
.topnav > .crumbs ol { font-size: 13px; }
.topnav > .crumbs a, .topnav > .crumbs .crumb-group { color: rgba(255, 255, 255, .66); }
.topnav > .crumbs a:hover { color: #fff; }
.topnav > .crumbs [aria-current="page"] { color: #fff; }
/* a switch on the bar (Reports' Split) reads as the trail does: soft white, white once on */
.topnav > .crumbs .if-done-toggle { color: rgba(255, 255, 255, .66); }
.topnav > .crumbs .if-done-toggle:has(input:checked) { color: #fff; }
.topnav > .crumbs .if-done-toggle .if-switch { background: rgba(255, 255, 255, .28); }
.topnav > .crumbs .if-done-toggle input:checked + .if-switch { background: var(--accent); }
.topnav > .crumbs li + li::before { border-color: rgba(255, 255, 255, .5); }
.topnav > .crumbs .crumb-home svg { width: 16px; height: 16px; }
html body .dash-head .tool-menu .tab { flex: 0 0 auto; width: auto; padding: 0 14px; gap: 7px; font-size: 14px; }
/* a count beside a header tab, as on the page's own tabs */
.tool-menu .tab-n {
  min-width: 18px; padding: 1px 6px; border-radius: var(--ui-r-pill); background: rgba(255, 255, 255, .16);
  font-size: 11.5px; line-height: 1.5; text-align: center; font-variant-numeric: tabular-nums;
}
.tool-menu .tab-n-accent { background: var(--accent); color: #fff; }
/* Sub-menus sit ON THE PAGE, in the Issues List's view-tab style (Tom, 2 Oct 2026):
   plain labels on a hairline, the current one in ink with a teal underline on the
   line. That anchors a sub-menu to the content it switches; the header keeps only
   what is permanent. `.pagetabs` is the shared look (the CRM's views); the board
   meeting's own tab strip is restyled to match rather than rebuilt. */
.pagetabs, html body .meeting-page .mtabs {
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: 22px; width: 100%; box-sizing: border-box;
  min-height: 44px; margin: 0 0 14px; padding: 0; border: 0; border-radius: 0; background: none;
  box-shadow: inset 0 -1px 0 var(--border);          /* the hairline, under the tabs' own underline */
  overflow-x: auto; scrollbar-width: none;
}
.pagetabs::-webkit-scrollbar, .meeting-page .mtabs::-webkit-scrollbar { display: none; }
html body .meeting-page .mtabs { width: 100% !important; max-width: none; }   /* an older rule sizes it to its tabs; the hairline must run the page's width */
.pagetabs > .tab, html body .meeting-page .mtab {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 2px;
  border: 0; border-radius: 0; background: none; color: var(--text-muted);
  font: inherit; font-size: 14px; font-weight: 350; white-space: nowrap; text-decoration: none; cursor: pointer;
}
.pagetabs > .tab:hover, html body .meeting-page .mtab:hover { color: var(--text); background: none; }
.pagetabs > .tab.active, html body .meeting-page .mtab.is-active { color: var(--text); font-weight: 500; background: none; }
.pagetabs > .tab.active::after, html body .meeting-page .mtab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent);
}
.pagetabs > .tab:focus-visible { outline: 2px solid #5e6e74; outline-offset: -2px; border-radius: var(--ui-r-sm); }
/* A sub-menu that leads the page sits a little closer to the header (Tom, 2 Oct 2026):
   its labels are centred in a 44px row, so with the page's usual 22px top gap they
   looked further from the header than they are from the left rail. 8px less evens
   the two. Only a bar that is the first thing on the page, not one inside a tab. */
.grid > .cell > .widget > .ivt-bar, .grid > .cell > .widget > .hiring-ivt-bar,
.grid > .cell > .widget > .pagetabs, .grid > .cell > .widget > .crm-views-bar { margin-top: -8px; }
/* The meeting's tabs lead the page too, in the same place as the Issues List's views:
   flush with the content column's edges, not inset with the agenda below. */
html body .meeting-page .mtabs-bar { position: static; margin: -8px 0 0; padding: 0; background: none; border: 0; }
/* ...and everything under the tabs lines up with them, full width (Tom, 2 Oct 2026):
   an open meeting's widget drops its side padding instead of the tabs bleeding out. */
html body .widget.board-meetings.showing-meeting { padding-left: 0; padding-right: 0; }
/* The meeting's header card, once moved into the Agenda tab (static/meeting_card.js):
   an ordinary block above the agenda, not a grid cell. */
.cell.in-agenda { display: block; width: auto; margin: 0 0 16px; }
@media (max-width: 640px) {
  html body .dash-head .tool-menu { min-height: 0; }
  html body .dash-head .tool-menu:empty { display: none; }
  html body .dash-head .tool-menu .tab { padding: 0 10px; }
}
.crm-kinds { margin-bottom: 14px; }
.crm-count { margin-left: 6px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ui-filter-menu { width: 270px; max-height: min(70vh, 560px); overflow-y: auto; }   /* many fields: the panel scrolls */
.ui-filter-menu .if-field { display: flex; flex-direction: column; gap: 4px; }
.crm-filter-clear {
  align-self: flex-start; margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px;
  color: var(--text-muted); text-decoration: underline; cursor: pointer;
}
.crm-filter-clear:hover { color: var(--text); }
/* The views bar: the Issues List's .ivt-bar look under a class of its own (see crm.html). */
.crm-views-bar > .ivt-tabs:empty + .ivt-sep { display: none; }
.crm-filters { display: contents; }
/* Filters at the far right, then the New button, as the Issues List has Filters then + Add issue */
.crm-filters > .crm-fields-btn { margin-left: auto; }          /* Fields, then Filters, at the far right */
.crm-filters > .crm-fields-btn + .if-menu-wrap { margin-left: 0; }
.crm-filters > .if-menu-wrap { margin-left: auto; }
.crm-toolbar:has(.if-menu-wrap) > .post-action-add { margin-left: 0; }
.crm-readonly { margin-left: auto; font-size: 12.5px; color: var(--text-muted); }
.ui-name { font-weight: 500; }
.ui-sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-muted); }
.ui-email { overflow-wrap: anywhere; }
.ui-pill {
  display: inline-block; margin: 0 4px 3px 0; padding: 2px 9px; border-radius: var(--ui-r-pill);
  background: var(--ui-fill-strong); font-size: 12.5px; line-height: 1.5; white-space: nowrap;
}
.ui-stage.k-won { background: #DBEDDB; color: #1C3829; }
.ui-stage.k-lost { background: #E3E2E0; color: #32302C; }
.ui-stage.k-open { background: #D3E5EF; color: #183347; }
.ui-overdue { color: var(--ui-danger); }
.ui-overdue-pill { background: #FBE4E1; color: #7A1D14; }
.ui-task-done .ui-name { color: var(--text-muted); text-decoration: line-through; }
/* A pipeline: the Issues List's board look, under classes of its own. */
.crm-layout { display: flex; align-items: center; gap: 6px; }
.crm-group-wrap { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
/* shown, it leads the right-hand group, so what follows it no longer pushes itself right */
.crm-filters > .crm-group-wrap:not([hidden]) + .crm-fields-btn,
.crm-filters > .crm-group-wrap:not([hidden]) + .if-menu-wrap { margin-left: 0; }
.crm-group-wrap[hidden] { display: none; }
.crm-group-wrap .crm-group { width: auto; min-width: 170px; }
/* The board fits what is left of the window (Tom, 5 Oct 2026): crm.js sets its height
   (.is-fit), so the bar that scrolls it sideways is always at the foot of the screen. A
   column longer than the screen scrolls its own cards, under its heading. Below 821px the
   board is as tall as its cards and the page scrolls, as before. */
.ui-board { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.ui-board.is-fit { overflow-y: hidden; }
body:has(.astra-fab):has(.crm-widget:not(.showing-page) .crm-results > .ui-board.is-fit) .content { padding-bottom: 20px; }
.ui-col { flex: 1 0 230px; max-width: 320px; background: rgba(127, 127, 127, .06); border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.ui-col[hidden] { display: none; }
.ui-board.is-fit > .ui-col:not([hidden]) { display: flex; flex-direction: column; box-sizing: border-box; max-height: 100%; }
.ui-board.is-fit .ui-col-body { flex: 1 1 auto; min-height: 8px; overflow-y: auto; margin-right: -8px; padding-right: 8px; scrollbar-width: thin; }   /* its scroll bar sits in the column's own padding */
.ui-board.is-fit :is(.ui-col-head, .ui-col-morebtn) { flex: none; }
.ui-col-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
/* a column's name reads as a table's heading does (Tom, 5 Oct 2026): regular weight, the headings' grey and size */
.ui-col-name { font-size: 13.5px; font-weight: 400; color: var(--thead-text); }
/* the column's own menu ("..."), at the right of its heading */
.ui-col-more {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: auto; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--text-muted); cursor: pointer;
}
.ui-col-more svg { width: 16px; height: 16px; }
.ui-col-more:hover, .ui-col-more[aria-expanded="true"] { background: var(--ui-fill-strong); color: var(--text); }
.ui-col-more:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
/* how many columns are hidden, beside the Columns choice: opens the list to show them again */
.crm-hidden-btn[hidden] { display: none; }
.ui-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 8px; }
.ui-cardrow { display: block; padding: 10px 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--ui-r); cursor: pointer; transition: border-color .12s; }
body.theme-slate:not(.light) .ui-cardrow { background: rgba(255, 255, 255, .05); }
.ui-cardrow:hover { border-color: var(--accent); }
.ui-cardrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ui-col-morebtn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; height: 34px;
  border: 1px dashed var(--border); border-radius: var(--ui-r); background: none; font: inherit; font-size: 13px; color: var(--text);
}
.ui-col-morebtn:hover { border-color: var(--accent); color: var(--accent); }
.ui-col-morebtn:disabled { opacity: .6; }
.ui-col-left { color: var(--text-muted); font-size: 12px; }
.crm-board-total { display: block; margin-top: 12px; }
/* the Views section before it has a view */
.crm-empty { max-width: 520px; padding: 28px 0; }
.crm-empty h3 { margin: 0 0 6px; font-size: 18px; font-weight: 500; }
.crm-empty p { margin: 0 0 16px; color: var(--text-muted); }
.ivt-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 400; margin-left: 2px; }
/* New view: what to manage, and table or pipeline, as pills */
.ui-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.crm-vd-manage[hidden] { display: none; }
.ui-choice { cursor: pointer; }
.ui-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ui-choice span { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--ui-r-pill); font-size: 14px; }
.ui-choice svg { width: 16px; height: 16px; color: var(--text-muted); }
.ui-choice input:checked + span { border-color: var(--text); background: var(--ui-fill); font-weight: 500; }
.ui-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.crm-pager { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.crm-range { margin-right: auto; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.crm-pager .pb-btn { height: 34px; padding: 0 14px; }

.ui-record-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 18px; }
.ui-record-head .hiring-role-title-static { width: auto; margin: 0; }
.ui-record-subtitle { flex-basis: 100%; color: var(--text-muted); }
.crm-main, .crm-side { display: grid; gap: 16px; min-width: 0; }
.ui-section { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; min-width: 0; }
body.theme-slate:not(.light) .ui-section { background: rgba(255, 255, 255, .04); }
.ui-section > .issue-section-label:first-child { margin-top: 0; }
.crm-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 20px; margin: 8px 0 0; }
.crm-fields dt { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.crm-fields dd { margin: 0; overflow-wrap: anywhere; }
.ui-desc { margin: 14px 0 0; color: var(--text-muted); }
.ui-note { padding: 10px 0; border-top: 1px solid var(--border); }
.ui-note:first-of-type { border-top: 0; padding-top: 4px; }
.ui-note-meta { font-size: 12.5px; color: var(--text-muted); }
.ui-note-body { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-task { display: flex; flex-wrap: wrap; gap: 2px 12px; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--border); }
.ui-task:first-of-type { border-top: 0; }
.ui-task.done .ui-task-title { text-decoration: line-through; color: var(--text-muted); }
/* Fields, at the foot of a record's Details (as Folk): New field, Visible fields. One
   dialog in two modes: the form alone, or the list of every field with its switch. */
/* Pinned to the bottom of the window while the Details card is on screen (as Folk pins
   them to the foot of its panel): on a record with 25 fields they were 1,300px down. */
.ui-field-actions {
  position: sticky; bottom: 0; z-index: 2; display: flex; gap: 10px;
  margin: 18px -18px -16px; padding: 12px 18px 14px; border-top: 1px solid var(--border);
  background: #fff; border-radius: 0 0 12px 12px;
}
body.theme-slate:not(.light) .ui-field-actions { background: #17181c; }
.ui-field-actions .crm-count { margin-left: 8px; }
.crm-fields-dialog { width: min(760px, calc(100vw - 32px)); }
.crm-fd-title { font-size: 20px; font-weight: 500; }
.crm-fields-dialog[data-mode="new"] .crm-fd-list,
.crm-fields-dialog[data-mode="visible"] .crm-fd-add,
.crm-fields-dialog[data-mode="visible"] .crm-fd-addlabel { display: none; }
.crm-fd-list { max-height: min(60vh, 560px); overflow-y: auto; }
.crm-fields-dialog[data-mode="all"] .crm-fd-list { max-height: min(50vh, 480px); margin-bottom: 20px; }
/* Quiet rows (Tom, 4 Oct 2026): a heading per group, each group one white card; a name reads
   as text until pointed at; icons move and delete; choices fold away behind a button. */
.crm-fd-head { margin: 16px 2px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.crm-fd-head:first-child { margin-top: 0; }
.crm-fd-group { border: 1px solid var(--ui-line); border-radius: 10px; background: var(--surface); }
body.light .crm-fd-group { background: #fff; }
.crm-fd-row { display: grid; grid-template-columns: 16px 32px minmax(0, 1fr) 112px 108px 98px 28px; align-items: center; gap: 0 12px; min-height: 44px; padding: 4px 8px 4px 10px; border-top: 1px solid var(--border); }
.crm-fd-row:first-child { border-top: 0; }
.crm-fd-cols { min-height: 30px; font-size: 11.5px; color: var(--text-muted); }
.crm-fd-grip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 28px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--text-muted); opacity: .55; cursor: grab; }
.crm-fd-grip:hover, .crm-fd-grip:focus-visible { opacity: 1; background: var(--ui-fill); outline: none; }
.crm-fd-grip:active { cursor: grabbing; }
.crm-fd-grip svg { width: 14px; height: 14px; }
.crm-fd-row.is-dragging { opacity: .4; }
.crm-fd-row.is-over-before { box-shadow: inset 0 2px 0 var(--accent); }
.crm-fd-row.is-over-after { box-shadow: inset 0 -2px 0 var(--accent); }
.crm-fd-row.is-hidden .crm-fd-fixedname, .crm-fd-row.is-hidden .crm-fd-name { color: var(--text-muted); }
.crm-fd-switch { display: inline-flex; align-items: center; cursor: pointer; }
.crm-fd-switch input { position: absolute; opacity: 0; pointer-events: none; }
.crm-fd-switch .if-switch { position: relative; display: inline-block; width: 32px; height: 18px; border-radius: var(--ui-r-pill); background: rgba(127, 127, 127, .35); transition: background .12s; }
.crm-fd-switch .if-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .12s; }
.crm-fd-switch input:checked + .if-switch { background: var(--accent); }
.crm-fd-switch input:checked + .if-switch::after { transform: translateX(14px); }
.crm-fd-switch input:focus-visible + .if-switch { outline: 2px solid var(--accent); outline-offset: 2px; }
.crm-fd-fixedname { grid-column: 3 / -1; font-size: 14px; font-weight: 500; }
/* opened from a pipeline, each field has a second switch: on the pipeline's cards or not (Tom, 5 Oct 2026) */
.crm-fields-dialog[data-card] .crm-fd-row { grid-template-columns: 16px 42px 42px minmax(0, 1fr) 112px 108px 98px 28px; }
.crm-fields-dialog[data-card] .crm-fd-fixedname, .crm-fields-dialog[data-card] .crm-fd-row .crm-fd-opts { grid-column: 4 / -1; }
.crm-fd-row .crm-fd-name { min-height: 32px; width: 100%; margin-left: -8px; padding: 4px 8px; border-color: transparent; background: transparent; font-weight: 500; text-overflow: ellipsis; }
.crm-fd-row .crm-fd-name:hover { border-color: var(--border); }
.crm-fd-row .crm-fd-name:focus { background: var(--surface); }
.crm-fd-kind, .crm-fd-used { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-fd-used { font-variant-numeric: tabular-nums; }
.crm-fd-choices { justify-self: start; }
.crm-fd-del:disabled { opacity: .3; cursor: default; background: none; color: var(--text-muted); }
.crm-fd-row:not(:hover):not(:focus-within) .crm-fd-del { opacity: .45; }
.crm-fd-row:not(:hover):not(:focus-within) .crm-fd-del:disabled { opacity: .2; }
.crm-fd-choices { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 6px 0 10px; border: 0; border-radius: var(--ui-r-pill); background: var(--ui-fill); color: var(--text); font: inherit; font-size: 12.5px; white-space: nowrap; cursor: pointer; }
.crm-fd-choices:hover, .crm-fd-choices[aria-expanded="true"] { background: var(--ui-fill-strong); }
.crm-fd-choices:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.crm-fd-choices svg { width: 13px; height: 13px; color: var(--text-muted); transition: transform .12s; }
.crm-fd-choices[aria-expanded="true"] svg { transform: rotate(180deg); }
.crm-fd-row .crm-fd-opts { grid-column: 3 / -1; margin: 2px 6px 8px 0; width: auto; }
.crm-fd-opts[hidden] { display: none; }
.crm-fd-addlabel { margin: 0 2px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.crm-fields-dialog[data-mode="new"] .crm-fd-addlabel { margin: 0 0 10px; font-size: 14px; font-weight: 350; letter-spacing: 0; text-transform: none; color: var(--text); }
.crm-fd-add { display: grid; grid-template-columns: minmax(0, 1fr) 190px auto; gap: 8px; align-items: start; }
.crm-fd-add .pb-btn { height: 36px; }
.crm-fd-add select.ui-in {
  height: 36px; width: 100%; padding: 0 30px 0 12px; border-radius: var(--ui-r); background-color: var(--surface); color: var(--text);
  -webkit-appearance: none; appearance: none; text-indent: 0; text-align: left; direction: ltr;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6E74' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 13px;
}
.crm-fd-options { grid-column: 1 / -1; }
.crm-fd-options[hidden] { display: none; }
@media (max-width: 640px) {
  .crm-fd-add { grid-template-columns: minmax(0, 1fr); }
  .crm-fd-row { grid-template-columns: 16px 32px minmax(0, 1fr) auto 28px; }
  .crm-fields-dialog[data-card] .crm-fd-row { grid-template-columns: 16px 32px 32px minmax(0, 1fr) auto 28px; }
  .crm-fd-kind, .crm-fd-used, .crm-fd-cols { display: none; }
}
/* Linked records: + Add opens a search under the heading; a linked row can be removed. */
.ui-rel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ui-rel-add { text-transform: none; letter-spacing: 0; font-weight: 400; text-decoration: none; color: var(--accent); }
.ui-rel-add:hover { color: var(--accent); text-decoration: underline; }
.ui-rel { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ui-rel-main { min-width: 0; }
.ui-rel-remove { flex: none; margin: 2px 0 0; visibility: hidden; }
.ui-rel:hover .ui-rel-remove, .ui-rel-remove:focus-visible { visibility: visible; }
@media (hover: none) { .ui-rel-remove { visibility: visible; } }
.ui-find { margin: 8px 0 4px; }
.ui-find[hidden] { display: none; }
.ui-find-results { display: flex; flex-direction: column; margin-top: 4px; border: 1px solid var(--border); border-radius: var(--ui-r); overflow: hidden; }
.ui-find-results:empty { display: none; }
.ui-find-row { display: block; width: 100%; padding: 8px 10px; border: 0; border-top: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ui-find-row:first-child { border-top: 0; }
.ui-find-row:hover, .ui-find-row:focus-visible { background: rgba(31, 185, 167, .08); outline: none; }
.ui-find-create .ui-name { color: var(--accent); }
/* The side panel a record opens in first (Tom, 2 Oct 2026): fixed to the right of the
   window, under the header, the list still usable behind it. crm.js sets its top to the
   header's height and lifts it out of the widget. It is drawn as the Issues List's
   panel is (Tom, same day): a solid white sheet, the record's name as its title beside
   the maximise and close icons, properties as rows (icon, name, value), sections
   parted by hairlines rather than boxed, a bordered red Delete at the foot. */
.crm-widget .ui-panel { display: none; }
.ui-panel {
  position: fixed; z-index: 25; right: 0; top: 102px; bottom: 0; width: min(580px, 100vw);
  display: flex; flex-direction: column; background: #fff;
  border-left: 1px solid var(--border); box-shadow: -12px 0 32px rgba(14, 14, 18, .10);
}
.ui-panel[hidden] { display: none; }
body.theme-slate:not(.light) .ui-panel { background: #17181c; }
/* Its height is set by crm.js so the line under the title meets the line under the list's
   view tabs (Tom, 2 Oct 2026); 58px is that height on a page that has not been scrolled. */
.ui-panel-bar { flex: none; display: flex; align-items: center; gap: 12px; height: 58px; box-sizing: border-box; padding: 0 18px; border-bottom: 1px solid var(--border); }
.ui-panel-bar .drawer-actions { margin-left: auto; flex: none; }
.ui-panel-bar .ui-record-head { flex: 1 1 auto; min-width: 0; margin: 0; }
.ui-panel-bar .ui-record-head .ui-pill { display: none; }        /* the stage is a property row below */
.ui-panel-bar .ui-record-title {
  width: 100%; min-height: 0; margin: 0; padding: 2px 0; border: 0; border-radius: 4px; background: transparent;
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
}
.ui-panel-bar .ui-record-title:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.ui-panel-bar .ui-saved { margin: 0; flex: none; }
.ui-fullpage-collapse { margin-left: auto; }
.ui-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 20px 0; }
.ui-cardrow.is-open { border-color: var(--accent); }
/* flat sections, not cards */
.ui-record.is-panel .ui-section { background: none; border: 0; border-radius: 0; padding: 0; }
.ui-record.is-panel .ui-tabpanel.is-active { gap: 0; }
.ui-record.is-panel .ui-tabpanel > .ui-section + .ui-section,
.ui-record.is-panel .ui-tabpanel > .ui-section + .ui-record-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.ui-record.is-panel .ui-record-main > .ui-section > .issue-section-label { display: none; }   /* the tab already says Details */
/* properties as rows: icon and name at the left, the value beside it, bare until touched */
.ui-record.is-panel .ui-form { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.ui-record.is-panel .ui-field { flex-direction: row; align-items: center; gap: 12px; min-height: 32px; }
.ui-record.is-panel .ui-field-wide { align-items: flex-start; }
.ui-record.is-panel .ui-field-label { flex: 0 0 168px; min-width: 0; font-size: 13.5px; padding-top: 0; }
.ui-record.is-panel .ui-field-wide .ui-field-label { padding-top: 7px; }
.ui-record.is-panel .ui-form .ui-in { flex: 1 1 auto; width: auto; min-width: 0; min-height: 30px; padding: 4px 7px; border-color: transparent; background: transparent; border-radius: var(--ui-r-sm); }
.ui-record.is-panel .ui-form .ui-in:hover { border-color: var(--border); }
.ui-record.is-panel .ui-form .ui-in:focus { border-color: transparent; background: var(--surface); }
.ui-record.is-panel .ui-form .ui-in::placeholder { color: var(--text-muted); opacity: .75; }
.ui-record.is-panel .ui-form .if-select.ui-in { flex: 0 1 auto; width: auto; max-width: 100%; min-height: 28px; padding: 2px 12px; border-radius: var(--ui-r-pill); background: var(--ui-fill-strong); }
.ui-record.is-panel .ui-multi { flex: 1 1 auto; padding: 3px 0; }
.ui-record.is-panel .ui-field-actions { margin: 10px -20px 0; padding: 10px 20px 12px; border-radius: 0; }
/* A record's own tabs (Timeline, Notes, Tasks, Linked; Details too in the side panel).
   Pills with an icon, deliberately unlike the underlined views above a list, so the two
   levels of menu read apart. */
.ui-tabpanel { display: none; }
.ui-tabpanel.is-active { display: grid; gap: 16px; align-content: start; }
.ui-record-foot { margin-top: 4px; }
/* the full page: fields at the left, always there; the tabs beside them */
.ui-record.is-page .ui-record-grid { display: grid; grid-template-columns: minmax(340px, 460px) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 16px; align-items: start; }
.ui-record.is-page .ui-record-main { display: grid; gap: 16px; align-content: start; grid-column: 1; grid-row: 1 / span 2; }
.ui-record.is-page .ui-tabpanel:not(.ui-record-main) { grid-column: 2; grid-row: 2; }
.ui-record.is-page .ui-form { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ui-record.is-panel .ui-record-head { margin-bottom: 12px; }
/* in the side panel the tabs run its full width, each an equal share (Tom, 2 Oct 2026) */
@media (max-width: 1100px) {
  .ui-record.is-page .ui-record-grid { display: block; }
  .ui-record.is-page .ui-record-main { margin-bottom: 16px; }
}
/* An editable record: fields in a grid, each saving as it is changed. */
.ui-record-head .ui-record-title { flex: 1 1 320px; width: auto; margin: 0; }
.ui-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 20px; margin-top: 8px; }
.ui-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ui-field-wide { grid-column: 1 / -1; }
.ui-field-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.ui-field-label svg { width: 15px; height: 15px; flex: none; }
.ui-record.is-page .ui-field-label svg { display: none; }   /* the icons are the side panel's, as on the Issues List */
.ui-in {
  box-sizing: border-box; width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--ui-r);
  background: var(--surface); color: var(--text); font: inherit; font-size: 14px;
}
.ui-in:hover { border-color: #b9c0c6; }
.ui-in:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.ui-in.is-bad, .ui-multi.is-bad { outline: 2px solid var(--ui-danger); outline-offset: -1px; }
.ui-in-text { resize: vertical; line-height: 1.5; }
.ui-in-inline { width: auto; min-height: 28px; padding: 2px 6px; font-size: 12.5px; margin-right: 8px; }
.ui-form select.ui-in, .ui-form .if-select.ui-in { width: 100%; }
.ui-multi { display: flex; flex-wrap: wrap; gap: 6px; border-radius: var(--ui-r); }
.ui-choice-sm span { height: 30px; padding: 0 12px; font-size: 13px; }
.ui-saved { margin-left: 8px; font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.ui-saved.is-bad { color: var(--ui-danger); }
.ui-add { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 6px; }
.ui-add .pb-btn { height: 36px; padding: 0 14px; flex: none; }
.ui-task-add .ui-task-due { flex: 0 0 150px; width: 150px; }
.ui-task-tick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ui-task-tick input { width: 16px; height: 16px; accent-color: var(--accent); }
.ui-note-edit { margin: 6px 0; }
.ui-linkbtn { margin-left: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--text-muted); text-decoration: underline; cursor: pointer; }
.ui-linkbtn:hover { color: var(--text); }
.ui-act { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.ui-act:first-of-type { border-top: 0; }
.ui-cardrow.is-dragging { opacity: .45; }
.ui-col.drag-over { border-color: var(--accent); background: rgba(31, 185, 167, .06); }
.ui-rel { padding: 8px 0; border-top: 1px solid var(--border); }
.ui-rel:first-of-type { border-top: 0; padding-top: 4px; }
.ui-rel .ui-pill { margin-left: 8px; }
.ui-link { color: inherit; font-weight: 500; text-decoration: none; }
.ui-link:hover { color: var(--accent); text-decoration: underline; }
.ui-sub .ui-link { font-weight: 400; }
.ui-record-created { margin: 0 2px; }
@media (max-width: 900px) {
  .crm-cols { grid-template-columns: minmax(0, 1fr); }
  .crm-readonly { flex-basis: 100%; margin-left: 0; }
  .crm-widget .crm-results { overflow-x: auto; }
}
@media (max-width: 640px) {
  /* four lists in one row: let each shrink to its label, and drop the counts */
  .crm-kinds { flex-wrap: nowrap; }
  .crm-kinds .subtab { flex: 1 1 auto; min-width: 0; width: auto; padding-left: 8px; padding-right: 8px; text-align: center; }
  .crm-kinds .crm-count { display: none; }
}

/* Choice fields (Tom, 2 Oct 2026): Folk's picker. The labels are the Issues List's own
   (.ntag and its nine colours), so a label looks the same in a list, on a record and here. */
.crm-table .ntag { margin: 0 4px 0 0; vertical-align: middle; }
.ui-record-head .ntag { flex: none; }
.ui-pick { position: relative; flex: 1 1 auto; min-width: 0; }
.ui-pick-box {
  box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 36px; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: var(--ui-r); background: var(--surface); cursor: pointer;
}
.ui-pick-box:hover { border-color: #b9c0c6; }
.ui-pick-box:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.ui-pick-box.is-bad { outline: 2px solid var(--ui-danger); outline-offset: -1px; }
.ui-pick.is-open .ui-pick-box { border-color: var(--text); background: var(--surface); cursor: text; }
.ui-pick-box .ntag { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ui-pick-empty { font-size: 14px; color: var(--text-muted); opacity: .75; }
.ui-pick-x { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 14px; line-height: 1; opacity: .6; cursor: pointer; }
.ui-pick-x:hover, .ui-pick-x:focus-visible { opacity: 1; outline: none; }
.ui-pick-input { flex: 1 1 60px; min-width: 60px; padding: 2px; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 14px; }
.ui-pick-menu {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; min-width: 240px; max-height: 340px; overflow-y: auto;
  padding: 6px; border: 1px solid var(--border); border-radius: var(--ui-r); background: var(--surface, #fff); box-shadow: 0 8px 24px rgba(14, 14, 18, .12);
}
.ui-pick-head { padding: 6px 8px; font-size: 12.5px; color: var(--text-muted); }
.ui-pick-row { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 6px; border-radius: var(--ui-r-sm); cursor: pointer; }
/* Grey is the row under the mouse, and not the first row of a list just opened (Tom, 7 Oct 2026). The row the
   keyboard is at is marked the same once the keys are used to find or to move (.is-keyed on the list: ui.js). */
.ui-pick-row:hover, .ui-pick-menu.is-keyed .ui-pick-row.is-at { background: var(--ui-hover); }
.ui-pick-row.is-over { box-shadow: inset 0 2px 0 var(--accent); }
.ui-pick-row .ntag { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-pick-grip { flex: none; display: inline-flex; width: 14px; height: 14px; color: var(--text-muted); opacity: .7; cursor: grab; }
.ui-pick-grip svg, .ui-pick-more svg { width: 14px; height: 14px; }
.ui-pick-tick { font-size: 12px; color: var(--text-muted); }
.ui-pick-create { font-size: 13px; color: var(--text-muted); }
.ui-pick-more {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: auto; padding: 0;
  border: 0; border-radius: 5px; background: none; color: var(--text-muted); cursor: pointer;
}
.ui-pick-more:hover, .ui-pick-more:focus-visible, .ui-pick-more[aria-expanded="true"] { background: rgba(127, 127, 127, .16); color: var(--text); outline: none; }
.ui-pick-edit { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 2px 6px 6px 28px; padding: 10px; border: 1px solid var(--border); border-radius: var(--ui-r); }
.ui-pick-edit .ui-pick-name { min-height: 32px; }
.ui-pick-sws { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-pick-sw.ntag { width: 20px; height: 20px; padding: 0; border: 1px solid rgba(0, 0, 0, .12); border-radius: 50%; cursor: pointer; }
.ui-pick-sw.is-current { box-shadow: 0 0 0 2px var(--accent); }
.ui-pick-sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* in the side panel a property is bare until touched, like the fields around it */
.ui-record.is-panel .ui-pick-box { min-height: 30px; padding: 3px 7px; border-color: transparent; background: transparent; border-radius: var(--ui-r-sm); }
.ui-record.is-panel .ui-pick-box:hover { border-color: var(--border); }
.ui-record.is-panel .ui-pick.is-open .ui-pick-box { border-color: var(--text); background: var(--surface); }

/* The CRM's tables are Folk's (Tom, 2 Oct 2026): a faint grid of horizontal and vertical
   lines, every row one line and the same height (a long value is cut with an ellipsis,
   nothing sits under the name), an icon on each title and beside each name, and each
   title sorts. The header band itself is the house one. */

/* A table cell being changed in place (Tom, 2 Oct 2026): the editor floats over the cell. */
.crm-table td[data-col] { cursor: cell; }
.crm-table td.is-editing { box-shadow: inset 0 0 0 2px var(--accent); }
.ui-cell-edit { position: fixed; z-index: 40; box-sizing: border-box; display: flex; }
.ui-cell-edit .ui-pick-box, .ui-cell-edit .ui-cell-input { min-height: 40px; border-radius: 4px; border-color: var(--text); background: var(--surface, #fff); box-shadow: 0 4px 14px rgba(14, 14, 18, .10); }
.ui-cell-edit .ui-cell-input { width: 100%; }

/* Linked records under a record's fields (Tom, 2 Oct 2026), as Folk has them: a heading
   with a pencil, and each linked record a chip. */
.ui-rel-head { align-items: center; }
.ui-rel-title { font-size: 14.5px; font-weight: 500; color: var(--text); }
.ui-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ui-rel.ui-chip { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; max-width: 100%; padding: 3px 9px; border: 0; border-radius: var(--ui-r-sm); background: var(--ui-fill); font-size: 14px; }
.ui-rel.ui-chip:first-of-type { padding-top: 3px; }
.ui-chip svg { flex: none; width: 13px; height: 13px; color: var(--text-muted); }
.ui-chip .ui-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; font-weight: 400; }
.ui-chip .ui-link:hover { text-decoration: underline; }
.ui-chip .ui-chip-x { display: none; visibility: visible; margin: 0; padding: 0 0 0 2px; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.ui-relgroup.is-editing .ui-chip-x { display: inline; }
.ui-chip .ui-chip-x:hover, .ui-chip .ui-chip-x:focus-visible { color: var(--ui-danger); outline: none; }
.ui-relgroup .ui-find { margin: 10px 0 0; }

/* More room between a record's fields, as Folk has (Tom, 2 Oct 2026). */
.ui-record.is-panel .ui-form { gap: var(--ui-field-gap); }
.ui-record.is-panel .ui-field { min-height: var(--ui-field-h); gap: 16px; }
.ui-record.is-panel .ui-record-main > .ui-section:first-child { padding-top: 8px; }
.ui-record.is-page .ui-form { row-gap: 20px; }
.ui-record.is-panel .ui-tabpanel > .ui-section + .ui-section, .ui-record.is-panel .ui-tabpanel > .ui-section + .ui-record-foot { margin-top: 24px; padding-top: 22px; }

/* Add a field / Visible fields: teal outline buttons (Tom, 2 Oct 2026). */

/* A field on hover: a grey fill, no outline, as Folk has it (Tom, 2 Oct 2026). */
.ui-record.is-panel .ui-form .ui-in:hover, .ui-record.is-panel .ui-pick-box:hover { border-color: transparent; background: var(--ui-hover); }
.ui-record.is-panel .ui-form .ui-in:focus { background: var(--surface); }
.ui-record.is-panel .ui-pick.is-open .ui-pick-box { border-color: var(--text); background: var(--surface); }

/* A long-text field (About) is one line and grows as more is typed (Tom, 2 Oct 2026). */
.ui-form textarea.ui-in-text { field-sizing: content; min-height: 30px; max-height: 320px; resize: none; overflow-y: auto; }
.ui-record.is-page .ui-form textarea.ui-in-text { min-height: 36px; }
.ui-record.is-panel .ui-field-wide { align-items: center; }
.ui-record.is-panel .ui-field-wide .ui-field-label { padding-top: 0; }
/* A field's name sits at the top of its row (Tom, 4 Oct 2026): on a value that runs to
   several lines the name lines up with the first line, not the middle. The name is one row
   high, so on a one-line value nothing moves. */
.ui-record.is-panel .ui-field-label, .drawer .issue-prop-label { align-self: flex-start; min-height: var(--ui-field-h); }

/* The record's bottom row (Tom, 2 Oct 2026): Add a field, Visible fields and Delete in one
   row that stays at the bottom of the panel while the record scrolls. */
.ui-record-foot .ui-field-actions { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-record-foot .ui-field-actions .ui-delete { margin: 0 0 0 auto; }
.ui-record.is-panel .ui-record-foot .ui-field-actions { margin-top: 12px; border-top: 1px solid var(--border); }
.ui-record-foot .ui-record-created { margin-bottom: 4px; }
/* (the row pins against the whole record, not just its own wrapper) */
.ui-record-foot { display: contents; }
.ui-record-foot .ui-record-created { margin: 22px 2px 0; }
.ui-record.is-panel .ui-record-foot .ui-field-actions { margin: 12px -20px 0; padding: 10px 20px 12px; }
/* Delete sits with the other two at the left: the Astra launcher floats over the right-hand corner. */
.ui-record-foot .ui-field-actions .ui-delete { margin: 0; }

/* A company's or broker's People tab: its people as a list (Tom, 2 Oct 2026). */
.ui-relrows .ui-rel-edit { margin-left: auto; }
.ui-rellist { margin-top: 8px; }
.ui-rel.ui-relrow { display: flex; align-items: center; justify-content: flex-start; gap: 4px; padding: 10px 0; border-top: 1px solid var(--ui-line); }
.ui-rel.ui-relrow:first-of-type { border-top: 0; padding-top: 10px; }
.ui-relrow .ui-rel-main { flex: 1 1 auto; }
.ui-relrow .ui-link { font-weight: 500; }
.ui-relrow .ui-chip-x { display: none; visibility: visible; margin: 0; padding: 0 4px; border: 0; background: none; color: var(--text-muted); font-size: 17px; line-height: 1; cursor: pointer; }
.ui-relgroup.is-editing .ui-relrow .ui-chip-x { display: inline; }
.ui-relrow .ui-chip-x:hover { color: var(--ui-danger); }
.ui-record.is-panel .ui-record-main > .ui-fields-card > .issue-section-label { display: none; }

/* A person's company, under their name (Tom, 2 Oct 2026). */
.ui-record-sub { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 2px 14px; min-width: 0; font-size: 13px; }
.ui-record-org { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.ui-record-org svg { flex: none; width: 13px; height: 13px; color: var(--text-muted); }
.ui-record-org .ui-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-weight: 400; text-decoration: none; }
.ui-record-org .ui-link:hover { color: var(--accent); text-decoration: underline; }
.ui-panel-bar .ui-record-head { row-gap: 0; }
.ui-panel-bar .ui-record-sub { flex-wrap: nowrap; overflow: hidden; padding-left: 1px; }

/* A person's primary company (Tom, 2 Oct 2026). */
.ui-chip .ui-make-primary { display: none; margin: 0; font-size: 12px; white-space: nowrap; }
.ui-relgroup.is-editing .ui-chip .ui-make-primary { display: inline; }
/* The Primary tag and Make primary sit to the right of the company's chip, outside it. */
.ui-chips { align-items: center; }
.ui-chips > .ui-tag-primary { margin: 0 8px 0 0; }
.ui-chips > .ui-make-primary { display: none; margin: 0 8px 0 0; font-size: 12px; white-space: nowrap; }
.ui-relgroup.is-editing .ui-chips > .ui-make-primary { display: inline; }
/* Each linked company on a row of its own, its Primary tag beside it (Tom, 2 Oct 2026). */
.ui-chipitem { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.ui-relgroup[data-rel="company"] .ui-chips { flex-direction: column; align-items: flex-start; }
.ui-chipitem > .ui-make-primary { display: none; margin: 0; font-size: 12px; white-space: nowrap; }
.ui-relgroup.is-editing .ui-chipitem > .ui-make-primary { display: inline; }
/* With a company under the name the title bar is taller, so the company has room beneath it
   (Tom, 2 Oct 2026); its line then sits below the view tabs' line rather than on it. */
.ui-panel-bar:has(.ui-record-sub) { height: auto !important; padding-top: 12px; padding-bottom: 14px; }

/* A record's Interactions tab, and room for six tabs in the side panel (Tom, 2 Oct 2026). */
.ui-int-row { display: flex; gap: 8px; margin: 8px 0 0; }
.ui-int-row .ui-in { width: auto; flex: 0 1 180px; }
.ui-form textarea.ui-in-text, .ui-int-add textarea { resize: none; }
.ui-relrow .ntag { margin-left: 8px; }
/* six tabs (a company or broker) have no room for icons in the side panel */

/* A record's tasks: one row each, and the Add task window (Tom, 2 Oct 2026). */
.ui-task-addbtn { height: 32px; padding: 0 14px; }
.ui-list { margin-top: 10px; }
.ui-task { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 10px; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--ui-line); }
.ui-task-box { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.ui-task-main { flex: 1 1 auto; min-width: 0; }
.ui-task-main .ui-task-title, .ui-task-main .ui-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-task .ui-task-date { flex: none; margin: 0; }
.ui-task-del { flex: none; padding: 0 4px; border: 0; background: none; color: var(--text-muted); font-size: 17px; line-height: 1; cursor: pointer; display: inline; visibility: visible; }
.ui-task-del:hover { color: var(--ui-danger); }
.ui-task-dialog { width: min(480px, 94vw); }
.ui-task-dialog .ui-td-body { resize: vertical; min-height: 90px; margin-bottom: 14px; field-sizing: fixed; }
.ui-task-dialog .ui-td-due { width: 180px; }
.ui-task-dialog .pb-dlabel { display: block; margin-bottom: 6px; }
.ui-task-dialog .ui-td-due { display: block; }

/* Tasks and notes share one row design (Tom, 2 Oct 2026): the tick lines up with the
   title, the description sits under it, the date is plain text until touched, and the
   Add buttons are teal outline buttons. */
.ui-list { margin-top: 14px; }
.ui-item, .ui-task.ui-item, .ui-note.ui-item {
  display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 12px;
  min-height: 0; padding: 14px 2px; border-top: 1px solid var(--ui-line);
}
.ui-list > .ui-item:first-child { border-top: 0; padding-top: 6px; }
.ui-item-main { flex: 1 1 auto; min-width: 0; }
.ui-item .ui-task-box { margin: 3px 0 0; }
.ui-item .ui-task-title { font-size: 14.5px; font-weight: 500; line-height: 22px; white-space: normal; overflow-wrap: anywhere; }
.ui-item .ui-task-main .ui-sub { margin-top: 2px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-item .ui-note-body { margin: 0; font-size: 14.5px; line-height: 22px; }
.ui-item .ui-note-meta { margin-top: 4px; }
.ui-item-acts { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 22px; }
.ui-item .ui-task-date {
  flex: none; width: auto; min-height: 0; height: 22px; margin: 0; padding: 0 2px; border: 0; border-radius: 4px; background: transparent;
  color: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; cursor: pointer;
}
.ui-item .ui-task-date:hover { background: var(--ui-hover); border: 0; }
.ui-item .ui-task-date:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ui-item .ui-task-del { height: 22px; line-height: 20px; opacity: 0; }
.ui-item:hover .ui-task-del, .ui-item .ui-task-del:focus-visible { opacity: 1; }
.ui-item .ui-item-acts .ui-linkbtn { opacity: 0; font-size: 12.5px; }
.ui-item:hover .ui-item-acts .ui-linkbtn, .ui-item-acts .ui-linkbtn:focus-visible { opacity: 1; }
@media (hover: none) { .ui-item .ui-task-del, .ui-item .ui-item-acts .ui-linkbtn { opacity: 1; } }
.ui-nd-on { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 32px; }
.ui-note-dialog .ui-td-body { min-height: 150px; margin-bottom: 4px; }

/* The full page (Tom, 2 Oct 2026): white all over, and the record drawn as the side panel
   draws it (crm.js gives the page .is-panel as well as .is-page): fields at the left, the
   other tabs beside them. */
body:has(.crm-widget.showing-page) .app-shell > .content { background: #fff; }
body.theme-slate:not(.light):has(.crm-widget.showing-page) .app-shell > .content { background: #17181c; }
.ui-record.is-page .ui-field-label svg { display: inline; }
.ui-record.is-page .ui-record-grid { grid-template-columns: minmax(380px, 520px) minmax(0, 1fr); gap: 0 48px; }
.ui-record.is-page .ui-record-main { display: block; padding-right: 48px; border-right: 1px solid var(--border); }
.ui-record.is-page .ui-record-foot .ui-field-actions { margin: 12px 0 0; padding: 10px 0 12px; }
.ui-record.is-page .ui-record-head { margin-bottom: 20px; }
@media (max-width: 900px) { .ui-record.is-page .ui-record-main { padding-right: 0; border-right: 0; } }

/* The house outline button (.btn-outline's shape), not a pill (Tom, 2 Oct 2026). */
.ui-record.is-page .ui-record-grid { grid-template-columns: minmax(340px, 480px) minmax(0, 1fr); gap: 0 32px; }
.ui-record.is-page .ui-record-main { padding-right: 32px; }
.ui-fullpage .ui-record-head .ui-record-title { padding-left: 0; border-color: transparent; background: transparent; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.ui-fullpage .ui-record-head .ui-record-title:hover { background: var(--ui-hover); }

/* Who a task is assigned to (Tom, 2 Oct 2026): plain text in the row until touched. */
.ui-item .ui-task-who {
  flex: 0 1 150px; min-width: 0; height: 22px; padding: 0 2px; border: 0; border-radius: 4px; background: transparent; appearance: none;
  color: var(--text-muted); font: inherit; font-size: 13px; text-align: right; text-overflow: ellipsis; cursor: pointer;
}
.ui-item .ui-task-who:hover { background: var(--ui-hover); }
.ui-item .ui-task-who:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ui-task-dialog .ui-td-who { display: block; width: 240px; margin-bottom: 14px; }

/* The person picker (Tom, 2 Oct 2026): photo and name, as the Issues List shows an assignee;
   a click drops down the team. On a task row, in the Add task window, and a deal's Owner. */
.ui-who { position: relative; flex: none; min-width: 0; }
.ui-who-btn { display: inline-flex; align-items: center; max-width: 100%; height: 28px; padding: 0 3px; border: 0; border-radius: var(--ui-r-pill); background: none; font: inherit; cursor: pointer; }
.ui-who-btn:hover, .ui-who-btn[aria-expanded="true"] { background: var(--ui-fill); }
.ui-who-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ui-who-btn.is-bad { outline: 2px solid var(--ui-danger); }
.ui-who .achip { background: none; padding-left: 0; font-weight: 400; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.ui-who .ui-pick-empty { padding: 0 6px; font-size: 13px; }
.ui-who-menu {
  position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; min-width: 210px; max-height: 280px; overflow-y: auto; padding: 6px;
  border: 1px solid var(--border); border-radius: var(--ui-r); background: var(--surface, #fff); box-shadow: 0 8px 24px rgba(14, 14, 18, .12);
}
.ui-who-row { display: flex; align-items: center; width: 100%; min-height: 34px; padding: 0 8px; border: 0; border-radius: var(--ui-r-sm); background: none; font: inherit; text-align: left; cursor: pointer; }
.ui-who-row:hover, .ui-who-row:focus-visible { background: var(--ui-hover); outline: none; }
.ui-who-row.is-on { background: var(--ui-teal-tint); }
.ui-item .ui-who { margin-top: -3px; }
.ui-form .ui-who, .ui-td-who.ui-who { flex: 1 1 auto; }
.ui-form .ui-who-menu, .ui-td-who .ui-who-menu { left: 0; right: auto; }
.ui-task-dialog .ui-td-who { display: block; width: auto; margin-bottom: 14px; }
.ui-task-dialog, .ui-task-dialog .pb-dform, .ui-task-dialog .pb-dbody { overflow: visible; }

/* The record's tabs stay in view while the side panel scrolls (Tom, 2 Oct 2026). */
.ui-panel-bar .ui-record-head .ntag { display: none; }   /* the stage is a property row below, as before */

/* Rich-text notes with attachments (Tom, 2 Oct 2026). */
.ui-rich > :first-child { margin-top: 0; }
.ui-rich > :last-child { margin-bottom: 0; }
.ui-rich p { margin: 0 0 6px; }
.ui-rich ul, .ui-rich ol { margin: 0 0 6px; padding-left: 22px; }
.ui-rich a { color: var(--accent); }
.ui-item .ui-note-body.ui-rich { white-space: normal; }
.ui-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ui-files:empty { display: none; }
.ui-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 9px; border-radius: var(--ui-r-sm); background: var(--ui-fill); color: var(--text); font-size: 13px; text-decoration: none; }
a.ui-file:hover { background: rgba(31, 185, 167, .14); }
.ui-file svg { flex: none; width: 13px; height: 13px; color: var(--text-muted); }
.ui-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-file-size { flex: none; color: var(--text-muted); font-size: 12px; }
.ui-file .ui-chip-x { padding: 0 0 0 2px; border: 0; background: none; color: var(--text-muted); font-size: 15px; line-height: 1; cursor: pointer; }
.ui-file .ui-chip-x:hover { color: var(--ui-danger); }
.ui-note-dialog { width: min(560px, 94vw); }
.ui-note-dialog .ui-note-editor { box-sizing: border-box; min-height: 170px !important; max-height: 46vh; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--ui-r); background: var(--surface, #fff); font-size: 14.5px; line-height: 1.5; }
.ui-note-dialog .ui-note-editor:empty { min-height: 170px; }
.ui-nd-attach { margin-top: 12px; cursor: pointer; }
.ui-nd-attach svg { width: 14px; height: 14px; }

/* The Filters builder (Tom, 2 Oct 2026): Folk's rows of field / condition / value, joined
   by And or Or. An Or row starts a new group, marked by a rule above it. */
.ui-filter-menu { width: min(760px, calc(100vw - 48px)); max-height: min(70vh, 560px); overflow: visible; padding: 12px; right: 0; left: auto; }
.ui-filter-rows { display: flex; flex-direction: column; gap: 8px; }
.ui-filter-row { display: grid; grid-template-columns: 84px minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, 1.3fr) 30px; gap: 8px; align-items: center; }
.ui-filter-row.is-or { margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--border); }
.ui-filter-where { padding-left: 6px; font-size: 13.5px; color: var(--text-muted); }
.ui-filter-sel { width: 100%; min-width: 0; height: 34px; }
.ui-filter-val { min-width: 0; }
.ui-filter-input { min-height: 34px; height: 34px; }
.ui-filter-choices { position: relative; }
.ui-filter-box { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; width: 100%; height: 34px; padding: 0 8px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--ui-r); background: var(--surface, #fff); font: inherit; text-align: left; cursor: pointer; }
.ui-filter-box:hover { border-color: #b9c0c6; }
.ui-filter-box .ntag { flex: none; }
.ui-filter-list { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 100%; max-height: 260px; overflow-y: auto; padding: 6px; border: 1px solid var(--border); border-radius: var(--ui-r); background: var(--surface, #fff); box-shadow: 0 8px 24px rgba(14, 14, 18, .12); }
.ui-filter-list[hidden] { display: none; }
.ui-filter-opt { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 6px; border-radius: var(--ui-r-sm); cursor: pointer; white-space: nowrap; }
.ui-filter-opt:hover { background: var(--ui-hover); }
.ui-filter-opt input { accent-color: var(--accent); }
.ui-filter-del { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--ui-r-sm); background: none; color: var(--text-muted); cursor: pointer; }
.ui-filter-del svg { width: 15px; height: 15px; }
.ui-filter-del:hover { background: var(--ui-fill); color: var(--ui-danger); }
.ui-filter-none { margin: 4px 6px; font-size: 13.5px; color: var(--text-muted); }
.ui-filter-hint { margin: 10px 6px 0; font-size: 12.5px; color: var(--text-muted); }
.ui-filter-hint[hidden] { display: none; }
.ui-filter-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.ui-filter-add { margin-right: auto; padding: 4px 6px; border: 0; border-radius: var(--ui-r-sm); background: none; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.ui-filter-add:hover { background: var(--ui-hover); }
.ui-filter-foot .pb-btn { height: 34px; padding: 0 16px; }
@media (max-width: 720px) { .ui-filter-row { grid-template-columns: 1fr 1fr; } }
.ui-filter-hint { white-space: normal; }

/* A note (Tom, 2 Oct 2026): the author's photo at the left, their name in capitals and how
   long ago, the text, then each file on its own row in an outlined box. */
.ui-noterow { gap: 12px; padding: 16px 2px; }
.ui-note-av { flex: none; width: 32px; height: 32px; margin-top: 1px; font-size: 12px; }
.ui-note-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.ui-note-who { font-size: 13px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; }
.ui-note-ago { font-size: 13px; color: var(--text-muted); }
.ui-note-files { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; }
.ui-note-files .ui-file { padding: 6px 12px; border: 1px solid var(--border); border-radius: 4px; background: transparent; font-size: 13.5px; }
.ui-note-files a.ui-file:hover { border-color: var(--accent); background: rgba(31, 185, 167, .06); }

/* People in the tables (Tom, 2 Oct 2026): a deal's owner, a task's assignees. */
.crm-table .ui-person { background: none; padding: 0; margin-right: 10px; font-size: 13.5px; font-weight: 400; vertical-align: middle; }
.ui-cell-edit .ui-cell-who { position: static; width: 100%; }

/* Fixed fields, a rule, then the rest (Tom, 3 Oct 2026); Tom drags them by a handle. */
.ui-fixed-rule { height: 0; margin: 14px 0; border-top: 1px solid var(--border); }
.ui-record.is-panel .ui-form-fixed:empty, .ui-form-fixed:empty { min-height: 36px; border: 1px dashed var(--border); border-radius: var(--ui-r-sm); }
.ui-form-fixed:empty::before { content: "Drag a field here to fix it at the top"; display: block; padding: 8px 10px; font-size: 13px; color: var(--text-muted); }
.ui-grip { display: inline-flex; width: 14px; height: 14px; margin-left: -18px; margin-right: 4px; color: var(--text-muted); opacity: 0; cursor: grab; flex: none; }
.ui-grip svg { width: 14px; height: 14px; }
.ui-arrange.can-arrange .ui-field:hover .ui-grip { opacity: .8; }
.ui-arrange.can-arrange { padding-left: 18px; margin-left: -18px; }
.ui-field.is-dragging { opacity: .4; }
.ui-arrange .ui-field.is-over { box-shadow: inset 0 2px 0 var(--accent); }
.ui-arrange .ui-form.is-over { outline: 2px dashed rgba(31, 185, 167, .5); outline-offset: 2px; border-radius: var(--ui-r-sm); }

/* Field groups (Tom, 3 Oct 2026), as Folk has them: a grey heading with a chevron that folds the group. */
.ui-fgroup + .ui-fgroup { margin-top: 18px; }
.ui-fgroup-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.ui-fgroup-toggle { display: flex; align-items: center; justify-content: space-between; flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 2px; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
.ui-fgroup-toggle:hover { color: var(--text); }
.ui-fgroup-toggle svg { flex: none; width: 17px; height: 17px; transition: none; }
.ui-fgroup.is-shut .ui-fgroup-toggle svg { transform: rotate(180deg); }
.ui-fgroup.is-shut > .ui-form { display: none; }
.ui-fgroup-act { font-size: 12.5px; opacity: 0; }
.ui-fgroup-head:hover .ui-fgroup-act, .ui-fgroup-act:focus-visible { opacity: 1; }
.ui-arrange .ui-form-custom:empty { min-height: 36px; border: 1px dashed var(--border); border-radius: var(--ui-r-sm); }
.ui-arrange.can-arrange .ui-form-custom:empty::before { content: "Drag fields here"; display: block; padding: 8px 10px; font-size: 13px; color: var(--text-muted); }
.ui-fgroup-add { margin: 16px 0 0; font-size: 13.5px; }

/* The Add a field / Visible fields / Delete row sits at the end of the record, not pinned (Tom, 3 Oct 2026). */
.ui-record-foot .ui-field-actions, .ui-record.is-panel .ui-record-foot .ui-field-actions { position: static; }
/* The record open in the panel: a grey a step darker than the hover grey, not teal (Tom, 3 Oct 2026). */
.ui-cardrow.is-open { background: var(--ui-fill); }
.ui-fgroup-head { position: relative; }
.ui-fgroup-acts { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); display: inline-flex; gap: 10px; background: var(--surface, #fff); }
/* The record's foot as icons (Tom, 3 Oct 2026). */
.ui-field-icons { gap: 4px; }
.ui-field-label { gap: 5px; }   /* icon closer to its name (Tom, 3 Oct 2026) */
/* The record's tabs are all one width (Tom, 3 Oct 2026), in the panel and on the full page. */

/* A note being written in place, at the top of the notes (Tom, 3 Oct 2026). */
.ui-note-composer { margin: 0 0 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--ui-r); background: var(--surface, #fff); }
.ui-note-composer[hidden] { display: none; }
.ui-note-composer .ui-note-editor { box-sizing: border-box; min-height: 110px !important; max-height: 50vh; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--ui-r); font-size: 14.5px; line-height: 1.5; }
.ui-note-composer .ui-note-editor:empty { min-height: 110px; }
.ui-nc-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.ui-nc-actions .pb-btn { height: 34px; padding: 0 16px; }
.ui-note-composer .ui-nd-attach { margin-top: 10px; }
.ui-note[hidden] { display: none; }
.ui-nc-actions { align-items: center; }
.ui-nc-actions .ui-nd-attach { margin: 0 auto 0 0; }
.ui-nc-actions .ui-btn-outline { height: 34px; }

/* A task being written in place, at the top of the tasks (Tom, 3 Oct 2026). */
.ui-task-composer form { display: flex; flex-direction: column; gap: 8px; }
.ui-tc-title { font-size: 14.5px; font-weight: 500; }
.ui-tc-body { min-height: 60px; resize: vertical; }
.ui-tc-row { margin-top: 2px; flex-wrap: wrap; }
.ui-tc-who { margin-right: auto; }
.ui-tc-who .ui-who-menu { left: 0; right: auto; }
.ui-tc-due { width: 150px; min-height: 34px; height: 34px; }
.ui-task-composer .pb-derr:empty { display: none; }

/* The side panel rises to the breadcrumbs (Tom, 3 Oct 2026); crm.js measures the heights. */
.ui-panel { z-index: 31; }
.ui-panel-bar.is-aligned { height: var(--bar-h) !important; padding-top: var(--bar-pt) !important; padding-bottom: 0 !important; align-items: flex-start; box-sizing: border-box; }
/* Inside a tab other than Details there is no heading: the tab already names it (Tom, 3 Oct 2026). Its buttons stay, at the right. */
.ui-tabpanel:not(.ui-record-main) .ui-rel-title,
.ui-tabpanel:not(.ui-record-main) > .ui-section > .issue-section-label { display: none; }
.ui-tabpanel:not(.ui-record-main) .ui-rel-head { justify-content: flex-end; }
/* The record's kind, as an icon before its name (Tom, 3 Oct 2026). */
.ui-record-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--ui-r); background: var(--ui-fill); color: var(--text-muted); }
.ui-record-icon svg { width: 17px; height: 17px; }
.ui-record-head { column-gap: 10px; }
.ui-record-head .ui-record-title { flex: 1 1 200px; min-width: 0; }
.ui-record-head .ui-record-sub { padding-left: 40px; }
/* The line under the name continues the header's bottom edge; a person's company sits just below it (Tom, 3 Oct 2026). */
.ui-panel-bar.is-aligned { position: relative; overflow: visible; }
.ui-panel-bar.is-aligned .ui-record-sub { position: absolute; top: calc(100% + 12px); left: 58px; right: 18px; padding-left: 0; }
/* The CRM's column titles: the header's heavier line, and no grey on hover (Tom, 3 Oct 2026). */
/* The panel's title bar in two rows (Tom, 3 Oct 2026): the name, then a line level with the
   header's bottom edge; a person's company centred in the band below, then a line level with
   the view tabs' line. */
.ui-panel-bar.is-aligned::before { content: ""; position: absolute; left: 0; right: 0; top: var(--name-h); border-top: 1px solid var(--border); }
.ui-panel-bar.is-aligned .ui-record-sub { top: var(--name-h); bottom: 0; display: flex; align-items: center; }
.ui-record-icon { width: 26px; height: 26px; border-radius: 7px; }
.ui-record-icon svg { width: 15px; height: 15px; }
.ui-record-head .ui-record-sub, .ui-panel-bar.is-aligned .ui-record-sub { left: 54px; }

/* The Issues List (and every list using the house side panel) as the CRM (Tom, 3 Oct 2026):
   the open row a darker grey than the hover grey; the panel's title row fills the breadcrumbs
   row (dashboard.html sets its top and height), so its line continues the header's edge. */
.drawer { z-index: 50; }
.drawer .drawer-head[style*="height"] { box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.drawer.open { box-shadow: -12px 0 32px rgba(14, 14, 18, .10); }
/* Dark mode: the record's sections are tinted boxes, so the fields keep a margin inside them (Tom, 3 Oct 2026). */
body:not(.light) .ui-record.is-panel .ui-section { padding: 12px 16px; border-radius: var(--ui-r); }
body:not(.light) .ui-record.is-panel .ui-tabpanel > .ui-section + .ui-section { margin-top: 16px; border-top: 0; }

/* One set of table lines across the platform (Tom, 3 Oct 2026): the CRM's faint grid, rows
   and columns, in every house table, the line under the headings included (4 Oct 2026). */
.crm-widget, body.light .crm-widget { --crm-grid: var(--ui-line); }
:is(.agenda-table, .actions-table, .kb-table, .fa-table, .fw-table, .fap-table, .am-table) > tbody > tr > td { border-color: var(--ui-line) !important; }
:is(.agenda-table, .actions-table, .kb-table, .fa-table, .fw-table, .fap-table, .am-table) { border-color: var(--ui-line) !important; }
/* Every line in a house table is the one under its headings (Tom, 4 Oct 2026): same weight,
   same light colour, for the heading cells' own column lines, Astra's chat tables and the
   Board Meetings past-meetings rows, which had kept the darker --border. */
:is(.ui-table, .issues-table, .agenda-table, .actions-table, .kb-table, .fa-table, .fw-table, .fap-table, .am-table, .ax-body table) > :is(thead, tbody) > tr > :is(th, td) { border-color: var(--ui-line) !important; }
.meetings-table { border-color: var(--ui-line); }
body .board-meetings .meetings-table .meeting .meeting-head.mdetail-head.is-closed { border-top-color: var(--ui-line) !important; }
/* The group's Rename / Remove: nothing at all until the heading is hovered (dark mode showed an empty box) (Tom, 3 Oct 2026). */
.ui-fgroup-acts { opacity: 0; background: none; }
.ui-fgroup-head:hover .ui-fgroup-acts, .ui-fgroup-acts:focus-within { opacity: 1; }
.ui-fgroup-acts .ui-fgroup-act { opacity: 1; }
/* the heading line only very slightly heavier than the rows' lines (Tom, 3 Oct 2026) */
/* the line sits on the header's last row of pixels, not the first one below it (Tom, 3 Oct 2026) */
.ui-panel-bar.is-aligned::before { top: calc(var(--name-h) - 1px); }

/* The side panel's name row is part of the dark header, in light and dark mode alike (Tom,
   3 Oct 2026): the panel is see-through there, so the header shows behind the name. Below it
   the panel is its usual surface. Same for the CRM's panel and the house side panel. */
.ui-panel { background: transparent; }
.ui-panel .ui-panel-bar.is-aligned { background: linear-gradient(to bottom, transparent var(--name-h), var(--surface, #fff) var(--name-h)); }
body.light .ui-panel .ui-panel-bar.is-aligned { background: linear-gradient(to bottom, transparent var(--name-h), #fff var(--name-h)); }
.ui-panel .ui-panel-body { background: var(--surface, #fff); }
body.light .ui-panel .ui-panel-body { background: #fff; }
body.theme-slate:not(.light) .ui-panel .ui-panel-body, body.theme-slate:not(.light) .ui-panel .ui-panel-bar.is-aligned { --surface: #17181c; }
.ui-panel .ui-panel-bar.is-aligned .ui-record-title { color: #fff; }
.ui-panel .ui-panel-bar.is-aligned .ui-record-title:hover { background: rgba(255, 255, 255, .08); }
.ui-panel .ui-panel-bar.is-aligned .ui-record-title::placeholder { color: rgba(255, 255, 255, .5); }
.ui-panel .ui-panel-bar.is-aligned .ui-record-icon { background: rgba(255, 255, 255, .10); color: rgba(255, 255, 255, .75); }
.ui-panel .ui-panel-bar.is-aligned .drawer-actions .drawer-btn { color: rgba(255, 255, 255, .7); }
.ui-panel .ui-panel-bar.is-aligned .drawer-actions .drawer-btn:hover { color: #fff; background: rgba(255, 255, 255, .10); }
.ui-panel .ui-panel-bar.is-aligned::before { border-top-color: rgba(255, 255, 255, .10); }
body.light .ui-panel .ui-panel-bar.is-aligned::before { border-top-color: transparent; }
.ui-panel { border-left-color: rgba(255, 255, 255, .10); }

.drawer:has(> .drawer-head[style*="height"]) { background: transparent; }
.drawer > .drawer-head[style*="height"] { background: transparent; border-bottom-color: rgba(255, 255, 255, .10); }
body.light .drawer > .drawer-head[style*="height"] { border-bottom-color: transparent; }
.drawer:has(> .drawer-head[style*="height"]) > .drawer-body { background: var(--surface); }
body.light .drawer:has(> .drawer-head[style*="height"]) > .drawer-body { background: #fff; }
.drawer > .drawer-head[style*="height"] .issue-title-input, .drawer > .drawer-head[style*="height"] .issue-title-static,
.drawer > .drawer-head[style*="height"] .drawer-title { color: #fff; }
.drawer > .drawer-head[style*="height"] .issue-title-input:hover { background: rgba(255, 255, 255, .08); }
.drawer > .drawer-head[style*="height"] .drawer-btn { color: rgba(255, 255, 255, .7); }
.drawer > .drawer-head[style*="height"] .drawer-btn:hover { color: #fff; background: rgba(255, 255, 255, .10); }
body:not(.light) .drawer:has(> .drawer-head[style*="height"]) > .drawer-body { background: #17181c; }   /* dark: an opaque panel, as the CRM's */
/* The lines inside a record run the panel's full width, in the tables' faint grey (Tom, 3 Oct 2026). */
.ui-record.is-panel .ui-tabpanel > .ui-section + .ui-section,
.ui-record.is-panel .ui-tabpanel > .ui-section + .ui-record-foot,
.ui-record.is-panel .ui-record-foot .ui-field-actions { border-top-color: var(--ui-line); }
.ui-panel .ui-record.is-panel .ui-tabpanel > .ui-section + .ui-section,
.ui-panel .ui-record.is-panel .ui-tabpanel > .ui-section + .ui-record-foot { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
.ui-panel .ui-panel-bar.is-aligned { border-bottom-color: var(--ui-line); }
.ui-item, .ui-task.ui-item, .ui-note.ui-item { border-top-color: var(--ui-line); }
.ui-panel .ui-list > .ui-item { margin-left: -20px; margin-right: -20px; padding-left: 22px; padding-right: 22px; }
/* Liquid glass on the side panel's name row (Tom, 3 Oct 2026): a frosted, slightly lit pane
   over the dark header, with a bright top edge and a soft sheen from the top left. */
.ui-panel .ui-panel-bar.is-aligned {
  --glass-band: #fff;
  background:
    linear-gradient(to bottom, transparent var(--name-h), var(--glass-band) var(--name-h)),
    radial-gradient(130% 160% at 0% 0%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 55%) top left / 100% var(--name-h) no-repeat,
    linear-gradient(to bottom, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03)) top left / 100% var(--name-h) no-repeat;
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 1px 0 0 rgba(255, 255, 255, .10);
}
body:not(.light) .ui-panel .ui-panel-bar.is-aligned { --glass-band: #17181c; }
.drawer > .drawer-head[style*="height"] {
  background:
    radial-gradient(130% 160% at 0% 0%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 55%),
    linear-gradient(to bottom, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03));
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 1px 0 0 rgba(255, 255, 255, .10);
}
/* the glass is its own layer the height of the name row, so its blur only takes in the header behind it */
.ui-panel .ui-panel-bar.is-aligned {
  isolation: isolate; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  background: linear-gradient(to bottom, transparent var(--name-h), var(--glass-band) var(--name-h));
}
.ui-panel .ui-panel-bar.is-aligned::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: calc(var(--name-h) - 1px);
  background:
    radial-gradient(130% 160% at 0% 0%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 55%),
    linear-gradient(to bottom, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03));
  -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 1px 0 0 rgba(255, 255, 255, .10);
}
/* the house panel slides in on a transform, which leaves a backdrop blur nothing to blur: its name row keeps the sheen without it */
.drawer > .drawer-head[style*="height"] { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* a person's company starts at the panel's left edge, under the icon (Tom, 3 Oct 2026) */
.ui-panel-bar.is-aligned .ui-record-sub, .ui-record-head .ui-record-sub { left: 18px; padding-left: 0; }
/* (the theme paints the house panel white with a stronger rule: this one must outrank it) */
body.theme-slate .drawer.drawer:has(> .drawer-head[style*="height"]), body .drawer.drawer:has(> .drawer-head[style*="height"]) { background: transparent; }
/* The house panel opened over a record's panel (Settings from the gear, with a CRM record open):
   its name row is glass, so the record's name, buttons and own glass showed through it. Light mode
   showed them plainly, as it has no blur or dimming behind the panel (Tom, 6 Oct 2026). They are put
   away from the moment the house panel opens until it has slid out again: its backdrop is unhidden
   for exactly that long. (::after cannot go inside :is(), so the glass has its own selector.) */
body:has(> .drawer-backdrop:not([hidden])) .ui-panel :is(.ui-panel-bar :is(.ui-record-head, .drawer-actions, .ui-saved), .ui-mailpane-bar > *),
body:has(> .drawer-backdrop:not([hidden])) .ui-panel .ui-panel-bar.is-aligned::after { visibility: hidden; }
/* a person's company at the size of the field values below it (Tom, 3 Oct 2026) */
.ui-record-head .ui-record-sub, .ui-panel-bar.is-aligned .ui-record-sub { font-size: 14px; }
.ui-record-org svg { width: 15px; height: 15px; }
/* The name in the panel's dark top row reads like the breadcrumb beside it: 13px, medium, as typed (Tom, 3 Oct 2026). */
.ui-panel .ui-panel-bar.is-aligned .ui-record-title,
.drawer > .drawer-head[style*="height"] .issue-title-input, .drawer > .drawer-head[style*="height"] .issue-title-static,
.drawer > .drawer-head[style*="height"] .drawer-title { font-size: 13px; font-weight: 500; letter-spacing: normal; text-transform: none; }
.ui-panel .ui-panel-bar.is-aligned .ui-record-icon { width: 22px; height: 22px; border-radius: var(--ui-r-sm); }
.ui-panel .ui-panel-bar.is-aligned .ui-record-icon svg { width: 13px; height: 13px; }
.ui-panel .ui-panel-bar.is-aligned .ui-record-head { align-items: center; }
/* expand and close sit centred in the name row too */
.ui-panel .ui-panel-bar.is-aligned .drawer-actions { position: absolute; top: 0; right: 14px; height: calc(var(--name-h) - 1px); display: flex; align-items: center; }
.ui-panel .ui-panel-bar.is-aligned .drawer-actions .drawer-btn { width: 28px; height: 28px; }
/* A field being edited in a side panel (the CRM's and the house panel: Issues List and the
   rest) gets a thin teal outline, 1px not 2px; the name in the panel's dark top row gets
   none at all (Tom, 3 Oct 2026). */
:is(.drawer, .ui-panel, .ui-fullpage) :is(input, textarea, select, [contenteditable="true"], .ui-pick-box, .fsel-btn):focus { outline-width: 1px !important; }
:is(.drawer, .ui-panel, .ui-fullpage) .ui-pick.is-open .ui-pick-box { border-width: 1px; }
.ui-panel .ui-panel-bar .ui-record-title:focus, .ui-fullpage .ui-record-head .ui-record-title:focus,
.drawer > .drawer-head .issue-title-input:focus { outline: none !important; box-shadow: none !important; border-color: transparent !important; }
.ui-panel .ui-panel-bar.is-aligned .ui-record-title:focus { background: rgba(255, 255, 255, .06); }
/* the line above the record's tabs continues the view tabs' line, so it has that line's weight; the record's other lines stay faint (Tom, 3 Oct 2026) */
.ui-panel .ui-panel-bar.is-aligned { border-bottom-color: var(--border); }
/* An empty date reads in the same grey as "Empty" (Tom, 3 Oct 2026): the CRM marks it .is-blank; the house panel's dates are blank when drawn with no value. */
input[type="date"].is-blank, .drawer input[type="date"][value=""]:not(:focus) { color: var(--text-muted); }
input[type="date"].is-blank::-webkit-datetime-edit, .drawer input[type="date"][value=""]:not(:focus)::-webkit-datetime-edit { color: var(--text-muted); opacity: .75; }
input[type="date"].is-blank:focus::-webkit-datetime-edit { opacity: 1; }
/* Every divider in the CRM in the tables' faint grey, and in a record running the panel's full
   width (Tom, 3 Oct 2026). Kept: the panel bar's line above the tabs (it continues the view tabs' line). */
:is(.ui-note, .ui-task, .ui-act, .ui-rel, .ui-relrow, .crm-fd-row, .ui-find-row, .ui-filter-foot, .ui-fixed-rule, .ui-item, .ui-field-actions) { border-color: var(--ui-line) !important; }
.ui-record.is-panel .ui-tabpanel > .ui-section + .ui-section, .ui-record.is-panel .ui-tabpanel > .ui-section + .ui-record-foot { border-top-color: var(--ui-line) !important; }
.ui-panel :is(.ui-rellist > .ui-relrow, .ui-list > .ui-item) { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
.ui-fullpage :is(.ui-rellist > .ui-relrow, .ui-list > .ui-item) { margin-left: -8px; margin-right: -8px; padding-left: 8px; padding-right: 8px; }
/* Side panels a little wider, so six record tabs fit (Tom, 3 Oct 2026): 640px, the CRM's and every house panel alike. */
.ui-panel { width: min(var(--ui-panel-w), 100vw); }
.drawer { width: min(var(--ui-panel-w), 94vw); }
.ui-relrow > .ui-tag-primary, .ui-relrow > .ui-make-primary { flex: none; margin: 0 6px 0 0; }
.ui-relrow > .ui-make-primary { display: none; font-size: 12px; }
.ui-relgroup.is-editing .ui-relrow > .ui-make-primary { display: inline; }
/* Fields and sections start at one inset in light and dark mode alike: dark mode's (Tom, 3 Oct 2026). */
.ui-record.is-panel .ui-section { padding-left: 16px; padding-right: 16px; }
.ui-panel .ui-record.is-panel .ui-tabpanel > .ui-section + .ui-section,
.ui-panel .ui-record.is-panel .ui-tabpanel > .ui-section + .ui-record-foot { padding-left: 36px; padding-right: 36px; }
.ui-field-icons .ui-record-created { margin: 0 0 0 8px; font-size: 12.5px; }

/* Inside a tab other than Details the content starts where the fields do in Details, and its
   add button is an icon at the top right (Tom, 3 Oct 2026). */
.ui-record.is-panel .ui-tabpanel:not(.ui-record-main) > .ui-section { position: relative; padding-top: 8px; }
.ui-tabpanel:not(.ui-record-main) > .ui-section > .ui-rel-head { position: absolute; top: 2px; right: 10px; z-index: 2; margin: 0; }
.ui-tabpanel:not(.ui-record-main) .ui-list > :first-child, .ui-tabpanel:not(.ui-record-main) .ui-rellist > :first-child { padding-right: 52px !important; }
.ui-tabpanel:not(.ui-record-main) .ui-list, .ui-tabpanel:not(.ui-record-main) .ui-rellist { margin-top: 0; }
.ui-tabpanel:not(.ui-record-main) .ui-list > .ui-item:first-child, .ui-tabpanel:not(.ui-record-main) .ui-rellist > .ui-relrow:first-child { padding-top: 0 !important; }
.ui-tabpanel:not(.ui-record-main) .ui-relgroup .ui-find { margin: 0 44px 10px 0; }
.ui-tabpanel:not(.ui-record-main) .ui-int-add[hidden] { display: none; }
.ui-tabpanel:not(.ui-record-main) .ui-int-add { margin-right: 44px; }
.ui-tabpanel:not(.ui-record-main) > .ui-section > .issue-empty:first-of-type, .ui-tabpanel:not(.ui-record-main) .ui-list > .issue-empty, .ui-tabpanel:not(.ui-record-main) .ui-rellist > .issue-empty { margin-top: 0; }
.ui-tab-add svg { width: 17px; height: 17px; }
/* Writing a note or task: no box around it, the full width of the tab; the + steps aside while it is open (Tom, 3 Oct 2026). */
.ui-note-composer, .ui-task-composer { border: 0; border-radius: 0; background: none; padding: 0 0 14px; }
.ui-tabpanel:not(.ui-record-main) .ui-list > .ui-note-composer:first-child { padding-right: 0 !important; }
.ui-tabpanel:has(.ui-note-composer:not([hidden])) .ui-tab-add { visibility: hidden; }
.ui-tabpanel:not(.ui-record-main) .ui-list > .ui-note-composer { padding-right: 0 !important; margin-right: 0; }
.ui-note-composer form { margin: 0; }
/* A tab's add / change icon lives at the right of the band under the record's name, not over
   the list, so the first task or note is not pushed in (Tom, 3 Oct 2026). Side panel only. */
.ui-panel .ui-tabpanel:not(.ui-record-main) > .ui-section > .ui-rel-head { position: fixed; top: calc(var(--band-mid) - 15px); right: 16px; z-index: 6; }
.ui-panel .ui-tabpanel:not(.ui-record-main) .ui-list > :first-child,
.ui-panel .ui-tabpanel:not(.ui-record-main) .ui-rellist > :first-child { padding-right: 20px !important; }
.ui-panel .ui-tabpanel:not(.ui-record-main) .ui-relgroup .ui-find, .ui-panel .ui-tabpanel:not(.ui-record-main) .ui-int-add { margin-right: 0; }
.ui-panel .ui-tabpanel:not(.ui-record-main) .ui-rel-head .ui-rel-edit { width: 30px; height: 30px; }
/* Notes and Tasks: the + back at the top right of the list, and the first note / task a little
   lower so it sits under the + rather than being pushed in by it (Tom, 3 Oct 2026). */
.ui-panel .ui-tabpanel:is([data-tab="notes"], [data-tab="tasks"]) > .ui-section > .ui-rel-head { position: absolute; top: 2px; right: 10px; }
.ui-tabpanel:is([data-tab="notes"], [data-tab="tasks"]) .ui-list { margin-top: 30px; }
.ui-tabpanel:is([data-tab="notes"], [data-tab="tasks"]) .ui-list > :first-child { padding-right: 20px !important; }
.ui-tabpanel:is([data-tab="notes"], [data-tab="tasks"]) .ui-list > .ui-note-composer:first-child { padding-right: 0 !important; }
/* "Broker" beside a company name in the lists: a grey tag shaped like the Primary label (Tom, 4 Oct 2026). */
.ui-list-tick { margin: 0 9px 0 0; vertical-align: -3px; }
.ui-task-done .ui-name { color: var(--text-muted); text-decoration: line-through; }
.crm-filters > .crm-done-toggle { margin-left: auto; }
.crm-filters > .crm-done-toggle + .if-menu-wrap { margin-left: 0; }

/* The older names for the same lines, kept so nothing that still uses them drifts. */
body.light, body:not(.light), body { --table-grid: var(--ui-line); --thead-rule: var(--ui-line); }
.crm-widget, body.light .crm-widget { --crm-grid: var(--ui-line); }

/* The record's tabs (ui-tabs) in the CRM: where they sit, and what the full page hides. */
.ui-record.is-page .ui-tabs { grid-column: 2; grid-row: 1; }
.ui-record.is-page .ui-tab[data-tab="details"] { display: none; }
.ui-record.is-page .ui-tab svg { display: none; }
.ui-panel .ui-record .ui-tabs { position: sticky; top: 0; z-index: 5; box-shadow: 0 -18px 0 0 #fff, 0 10px 0 0 #fff; }
body.theme-slate:not(.light) .ui-panel .ui-record .ui-tabs { background: #1d1e23; box-shadow: 0 -18px 0 0 #17181c, 0 10px 0 0 #17181c; }
.ui-cardrow.is-open { background: var(--ui-selected); }

/* The Issues List's Filters panel holds the shared builder (4 Oct 2026). */
.if-menu.has-builder { width: auto; max-width: none; padding: 0; overflow: visible; }
.if-menu.has-builder > .ui-filter-menu { position: static; }
.if-legacy[hidden] { display: none; }

/* The older sortable heading (.th-sort: Issues List, Hiring, Key Information) takes the ui-th look:
   a small icon before the name, and an underline rather than a grey fill under the mouse. */
.th-sort { gap: 7px; }
.th-sort .th-icon { flex: none; width: 14px; height: 14px; opacity: .6; }
.th-sort:hover { text-decoration: underline; text-underline-offset: 3px; }
.th-sort:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); border-radius: 4px; }

/* ---- email on a record, and the Mass email window (Tom, 4 Oct 2026) ----------------------
   An email is a row laid out as a note is (.ui-item .ui-note-head); clicking it opens the
   whole message. The composer is the note's, with From / To / Cc / Subject lines above it. */
.ui-mailrow > .ui-item-main { cursor: pointer; min-width: 0; }
.ui-mailrow.is-waiting > .ui-item-main { cursor: default; }
.ui-mail-subject { font-size: 13.5px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-mail-snippet { font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-mail-full { margin-top: 8px; }
.ui-mail-meta { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; overflow-wrap: anywhere; }
.ui-mail-body { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.ui-mail-error { margin-top: 2px; font-size: 12.5px; color: var(--ui-danger); white-space: normal; }
.ui-mailrow .ui-tag { margin-left: 0; }
.ui-mail-state.is-failed { color: var(--ui-danger); background: rgba(229, 104, 122, .12); }
.ui-mail-line { display: flex; align-items: center; gap: 10px; min-height: var(--ui-field-h); border-bottom: 1px solid var(--ui-line); }
.ui-mail-label { flex: 0 0 56px; font-size: 13px; color: var(--text-muted); }
.ui-mail-line .ui-in { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding-left: 0; }
.ui-mail-from { font-size: 13.5px; color: var(--text); }
.ui-mail-editor { min-height: 140px; }
.ui-mail-off { margin: 4px 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
.crm-md-preview { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--ui-line-head); border-radius: var(--ui-r); }
.crm-md-row { align-items: flex-start; }
.crm-md-row .ui-tag { margin-left: 0; }
.crm-md-row .ui-mail-snippet { white-space: normal; }
.ui-subsection { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--ui-line); }
.ui-sub-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ui-sub-title { font-size: 13px; font-weight: 500; color: var(--text-muted); }
/* a People tab's columns: name, Contact State, last interaction (Tom, 4 Oct 2026) */
.ui-rel.ui-relrow.ui-relcols, .ui-rel.ui-relrow.ui-relcols:first-of-type { padding: 0 0 6px; border-top: 0; border-bottom: 1px solid var(--ui-line); font-size: 12.5px; color: var(--text-muted); }
.ui-relcols .ui-rowicon { visibility: hidden; }
.ui-rel-col.is-tag { flex-basis: 96px; text-align: right; }
.ui-rel-col.is-tag .ui-linkbtn, .ui-rel-col.is-tag .ui-tag { margin-left: 0; }
.ui-rel-col { flex: 0 0 132px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-rel-col.is-date { flex-basis: 104px; font-size: 13px; color: var(--text-muted); }
.ui-relcols .ui-rel-col.is-date { font-size: 12.5px; }
.ui-relrow .ui-rel-col .ntag { margin-left: 0; }
.ui-rel-col:not(.is-tag) { text-align: center; }   /* a column's heading and its values share one centre line */
.ui-relrow .ui-rel-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ticking rows in a list (Tom, 4 Oct 2026): a narrow first column, and the bar of what can be done */
.ui-table.is-compact .ui-tick-cell { width: 36px; min-width: 36px; max-width: 36px; padding: 0; text-align: center; cursor: default; }
.ui-tick-cell .post-row-tick { display: inline-block; vertical-align: middle; }
.ui-table > tbody > tr.is-ticked td { background: var(--ui-row-hover); }
.crm-bulk { min-height: 32px; margin: 0 0 10px; }
.crm-bulk .ui-btn-outline, .crm-bulk .issue-delete-btn { height: 30px; padding: 0 12px; }
.crm-bulk .ui-linkbtn { margin-left: 0; }
/* ---- the email pane (Tom, 4 Oct 2026): an email is written in the side panel -----------------
   <div class="ui-mailpane"> covers the panel: a bar (back, New email, close), then To (the
   people as chips), From, Cc, Subject, the email, and Preview / Send at the foot. */
.ui-mailpane { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; background: var(--ui-panel); border-radius: inherit; }
.ui-mailpane[hidden] { display: none; }
.ui-mailpane-bar { flex: none; display: flex; align-items: center; gap: 6px; height: 58px; box-sizing: border-box; padding: 0 18px 0 10px; border-bottom: 1px solid var(--ui-line-head); }
.ui-mailpane-back[hidden] { display: none; }
.ui-mailpane-back[hidden] + .ui-mailpane-title { margin-left: 10px; }
.ui-mailpane-title { font-size: 15px; font-weight: 600; color: var(--text); }
.ui-mailpane-bar .drawer-actions { margin-left: auto; }
.ui-mailpane-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; margin: 0; padding: 4px var(--ui-inset) 96px; }   /* the foot stays clear of the Astra button in the corner */
.ui-mailpane-body .ui-mail-line { flex: none; padding: 4px 0; }
.ui-mailpane-body .ui-mail-line[hidden] { display: none; }
.ui-mailpane-toline { align-items: flex-start; }
.ui-mailpane-toline > .ui-mail-label { padding-top: 7px; }
.ui-mailpane-to { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; padding: 3px 0; max-height: 132px; overflow-y: auto; }
.ui-mailchip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 26px; box-sizing: border-box; padding: 0 9px; border-radius: var(--ui-r-sm); background: var(--ui-teal-tint); color: var(--accent); font-size: 13px; white-space: nowrap; }
.ui-mailchip > span { overflow: hidden; text-overflow: ellipsis; }
.ui-mailchip.is-more { background: var(--ui-fill); color: var(--text-muted); }
.ui-mailchip .ui-chip-x { margin: 0; padding: 0 0 0 2px; border: 0; background: none; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; opacity: .7; }
.ui-mailchip .ui-chip-x:hover { opacity: 1; }
.ui-mailpane-none { align-self: center; font-size: 13px; color: var(--text-muted); }
.ui-mailpane-body select.ui-in { height: 30px; }
.ui-mailpane-merge { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 8px 0 4px; }
.ui-mailpane-merge .ui-mail-label { flex: 0 0 56px; }
.ui-mailpane-merge .ui-linkbtn { margin: 0; }
.ui-mailpane-text { flex: 1 0 220px; width: 100%; box-sizing: border-box; margin: 4px 0 0; padding: 10px 12px; border: 1px solid var(--ui-line-head); border-radius: var(--ui-r); background: transparent; font: inherit; font-size: 14px; line-height: 1.55; resize: none; }
.ui-mailpane-text:focus { outline: none; border-color: var(--accent); }
.ui-mailpane-capline { flex: none; display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--text-muted); }
.ui-mailpane-capline[hidden] { display: none; }
.ui-mailpane-capline .ui-in { width: 84px; }
.ui-mailpane-note { flex: none; margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.ui-mailpane-body .ui-nc-actions { flex: none; margin-top: 12px; }
.ui-mailpane-body .pb-derr { flex: none; }
.ui-mailpane-body .crm-md-listlabel { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--ui-line); }
.ui-mailpane-body .crm-md-listlabel[hidden] { display: none; }
.ui-mailpane-body .crm-md-list, .ui-mailpane-body .crm-md-preview { flex: none; }
/* the pane's lines (From, Cc, Subject) are bare: no box or ring, focused or not (Tom, 4 Oct 2026) */
.ui-mail-line :is(.ui-in, select, input, .fsel-btn),
.ui-mail-line :is(.ui-in, select, input, .fsel-btn):is(:hover, :focus, :focus-visible, [aria-expanded="true"]) { border-color: transparent !important; outline: none !important; box-shadow: none !important; background-color: transparent; }
.ui-mail-line .fsel-btn { padding-left: 0; }
/* the Variable button and its menu, above the email (Tom, 4 Oct 2026) */
.ui-mailpane-merge { position: relative; }
.ui-var-menu { position: absolute; left: 0; top: calc(100% + 2px); z-index: 12; width: 280px; padding: 8px; border: 1px solid var(--panel-border, var(--border)); border-radius: 10px; background: var(--panel, var(--surface)); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.ui-var-menu[hidden] { display: none; }
.ui-var-q { width: 100%; box-sizing: border-box; height: 30px; margin-bottom: 6px; }
.ui-var-list { max-height: 260px; overflow-y: auto; }
.ui-var-group { padding: 8px 8px 4px; font-size: 12px; color: var(--text-muted); }
.ui-var-opt { display: block; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--ui-r-sm); background: none; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-var-opt:hover, .ui-var-opt:focus-visible { background: var(--ui-hover); outline: none; }
.ui-mailpane-cclink { flex: none; margin: 6px 0 0 8px; text-decoration: none; font-size: 13px; }
.ui-mailpane-cclink[hidden] { display: none; }
/* the email pane's title row sits where a record's name does: level with the breadcrumbs, over
   the header's dark band, white on dark in both modes (Tom, 4 Oct 2026) */
.ui-mailpane { background: linear-gradient(to bottom, transparent var(--name-h, 58px), var(--ui-panel) var(--name-h, 58px)); }
.ui-mailpane-bar { height: var(--name-h, 58px); padding: 0 14px 0 8px; border-bottom: 0; }
.ui-mailpane-title { color: #fff; font-size: 14px; font-weight: 600; }
.ui-mailpane-bar .drawer-btn { width: 28px; height: 28px; color: rgba(255, 255, 255, .7); }
.ui-mailpane-bar .drawer-btn:hover { color: #fff; background: rgba(255, 255, 255, .10); }
.ui-mailpane-back[hidden] + .ui-mailpane-title { margin-left: 10px; }
.ui-panel:has(.ui-mailpane:not([hidden])) .ui-panel-bar :is(.ui-record-head, .drawer-actions, .ui-saved) { visibility: hidden; }
.ui-mailpane-body { padding-top: 10px; }
/* the Emails tab's button says what it does */
.ui-tab-mail { height: 30px; padding: 0 12px; }
.ui-tab-mail svg { width: 14px; height: 14px; }
/* in the To line: someone flagged (marked Do not contact) stays in, with the warning in red; someone
   who cannot be sent to is shown greyed, with why (Tom, 4 Oct 2026) */
.ui-mailchip-warn { flex: none; margin-left: 4px; font-size: 12px; color: var(--ui-danger); }
body:not(.light) .ui-mailchip-warn { color: #f08a8a; }
.ui-mailchip.is-warn { background: rgba(229, 104, 122, .12); color: var(--text); }
.ui-mailchip.is-out { background: var(--ui-fill); color: var(--text-muted); }
.ui-mailchip.is-out > span:first-child { text-decoration: line-through; }
.ui-mailchip.is-out > span:only-child { text-decoration: none; }
/* Email, on every tab of a record (Tom, 4 Oct 2026): in the side panel it sits at the right of the
   band under the name; the tab's pencil moves to sit just right of the company named there. */
.ui-record-mailbtn { flex: none; height: 30px; padding: 0 12px; }
.ui-record-mailbtn svg { width: 14px; height: 14px; }
.ui-panel-bar.is-aligned .ui-record-mailbtn { position: absolute; right: 16px; top: calc(var(--name-h) + (var(--bar-h) - var(--name-h) - 30px) / 2); z-index: 7; }
.ui-panel .ui-tabpanel:not(.ui-record-main):not([data-tab="notes"]):not([data-tab="tasks"]) > .ui-section > .ui-rel-head { left: var(--edit-x, auto); right: auto; }
.ui-panel-bar.is-aligned .ui-record-sub { right: 110px; }        /* a long company name stops short of the button */
/* "Added … by …" at the foot of a record: very light grey, there if wanted (Tom, 4 Oct 2026) */
html body .ui-record .ui-record-created { color: #b4bac0; }
html body:not(.light) .ui-record .ui-record-created { color: rgba(255, 255, 255, .32); }
/* A linked-records tab (Companies, People, Deals): the pencil is at the tab's top right, under the
   sub-menu, as the + of Notes and Tasks is; with nothing linked there is no pencil and the search
   box is simply there (Tom, 4 Oct 2026). */
.ui-panel .ui-tabpanel:not(.ui-record-main):not([data-tab="notes"]):not([data-tab="tasks"]) > .ui-section > .ui-rel-head { position: absolute; top: 2px; right: 10px; left: auto; }
.ui-rel-edit[hidden] { display: none; }
.ui-tabpanel:not(.ui-record-main) .ui-relrows:not(.is-bare) .ui-rellist { margin-top: 32px; }
.ui-tabpanel:not(.ui-record-main) .ui-relrows.is-editing:not(.is-bare) .ui-rellist { margin-top: 0; }
.ui-tabpanel:not(.ui-record-main) .ui-relrows.is-bare .ui-find { margin-right: 0; }
.ui-tabpanel:not(.ui-record-main) .ui-relrows.is-bare .ui-rellist > .issue-empty { display: none; }
.ui-tabpanel:not(.ui-record-main) .ui-relrows .ui-rellist > :first-child { padding-right: 0 !important; }
/* ...but the first line of a list (its column headings) keeps the side padding every row under it has, or the
   headings sit to the right of their columns (Tom, 4 Oct 2026) */
.ui-panel .ui-tabpanel:not(.ui-record-main) .ui-relrows .ui-rellist > :first-child { padding-right: 20px !important; }
.ui-fullpage .ui-tabpanel:not(.ui-record-main) .ui-relrows .ui-rellist > :first-child { padding-right: 8px !important; }
.ui-tabpanel:not(.ui-record-main) .ui-relrows:not(.is-bare) .ui-find { margin-right: 44px !important; }   /* the box stops short of the pencil */
/* My settings: the cog at the end of the views row, and its pane in the side panel (Tom, 4 Oct 2026) */
.crm-views-bar > .crm-settings-btn { margin-left: auto; align-self: center; position: relative; z-index: 1; }
.crm-widget > .crm-settings-btn { display: none; }        /* until crm.js has moved it into the views row */
.ui-setpane-body { display: block; }
.ui-set-h { margin: 22px 0 4px; font-size: 14.5px; font-weight: 600; color: var(--text); }
.ui-set-h:first-of-type { margin-top: 8px; }
.ui-set-p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.ui-set-box { align-items: center; }
.ui-set-box .ui-tag { margin-left: 8px; }
.ui-set-connect { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.ui-set-connect .ui-btn-outline:disabled { opacity: .45; cursor: not-allowed; }
.ui-set-hint { flex: 1 1 100%; font-size: 12.5px; color: var(--text-muted); }
.ui-set-from { width: 100%; max-width: 420px; }
.ui-set-sig { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--ui-line-head); border-radius: var(--ui-r); background: transparent; font: inherit; font-size: 14px; line-height: 1.5; }
.ui-set-saved { margin-right: auto; font-size: 13px; color: var(--accent); }
.ui-set-msg { margin: 8px 0 4px; padding: 9px 12px; border-radius: var(--ui-r); background: var(--ui-teal-tint); color: var(--text); font-size: 13.5px; line-height: 1.45; }
.ui-set-msg.is-bad { background: rgba(229, 104, 122, .12); }
.ui-set-msg[hidden] { display: none; }
.ui-panel:has(.ui-mailpane:not([hidden])) .ui-panel-body { visibility: hidden; }   /* what is under a pane stays out of the way (and out of the tab order) */
/* ---- ui-tile: the small lettered tile before a record's name (Tom, 4 Oct 2026) ---------------
   <span class="ui-tile t-blue">B</span>   A rounded square for every kind of record (.is-round
   makes a circle, not used at present). The colours are the house's light tag colours (eight, and eight added
   for the Weekly Forecast's line letters); a logo (<img>) fills it. */
.ui-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 5px; overflow: hidden; font-size: 11px; font-weight: 600; line-height: 1; vertical-align: middle; position: relative; top: -1px; text-transform: uppercase; user-select: none; }
.ui-tile.is-round { border-radius: 50%; }
.ui-tile img { width: 100%; height: 100%; object-fit: cover; }
.ui-tile.t-brown { background: #EEE0DA; color: #442A1E; }
.ui-tile.t-orange { background: #FADEC9; color: #49290E; }
.ui-tile.t-yellow { background: #FDECC8; color: #402C1B; }
.ui-tile.t-green { background: #DBEDDB; color: #1C3829; }
.ui-tile.t-blue { background: #D3E5EF; color: #183347; }
.ui-tile.t-purple { background: #E8DEEE; color: #412454; }
.ui-tile.t-pink { background: #F5E0E9; color: #4C2337; }
.ui-tile.t-red { background: #FFE2DD; color: #5D1715; }
/* eight more, so a table can give sixteen lines a colour each (Weekly Forecast, Tom, 5 Oct 2026) */
.ui-tile.t-grey { background: #E3E2E0; color: #32302C; }
.ui-tile.t-teal { background: #CDEBE5; color: #0F3B36; }
.ui-tile.t-indigo { background: #DCE0F8; color: #252B66; }
.ui-tile.t-lime { background: #E4EFC2; color: #33400F; }
.ui-tile.t-cyan { background: #CDEEF6; color: #0E3A47; }
.ui-tile.t-magenta { background: #F1D5EF; color: #4F1B4B; }
.ui-tile.t-gold { background: #F1E3A8; color: #453A08; }
.ui-tile.t-slate { background: #D5DCE4; color: #26323F; }
.ui-rowicon .ui-tile { margin-right: 0; vertical-align: 0; }
.ui-relrow .ui-rowicon { margin-right: 8px; vertical-align: middle; }
.ui-record-tile { flex: none; display: inline-flex; }
.ui-record-tile .ui-tile { width: 22px; height: 22px; margin-right: 0; vertical-align: 0; font-size: 12px; }
.ui-cardrow .ui-tile { width: 18px; height: 18px; margin-right: 7px; font-size: 10.5px; }
.crm-more { margin-left: 12px; color: var(--text-muted); font-size: 13px; }
.crm-more[hidden] { display: none; }

/* ---- Deal memos (4 Oct 2026): a record headed by a logo, and a V1 memo shown whole ---- */
/* ui-record-logo: a deal memo's tile is its company logo; clicking it picks one */
.ui-record-logo { cursor: pointer; }
.ui-record-logo:hover .ui-tile { outline: 1px solid var(--accent); }
.ui-record-logo:focus-within .ui-tile { outline: 2px solid var(--accent); outline-offset: 2px; }
.ui-record-logo .ui-tile img { object-fit: contain; background: #fff; }
/* ui-memo-frame: a published memo page inside its record, filling what is left of the panel or page */
.ui-memo-frame { display: block; width: 100%; height: calc(100vh - 190px); min-height: 480px; border: 1px solid var(--ui-line); border-radius: var(--ui-r); background: #fff; }
.ui-record.is-panel .ui-memo-frame { height: calc(100vh - 150px); border-radius: 0; border-width: 1px 0 0; }
/* what sits under a list on its page gives way when a record takes the full page */
.crm-widget.showing-page ~ .crm-below { display: none; }
.crm-below { margin-top: 28px; }
/* a page that is one list of records needs no title band over it: the menu and the views say what it is */
.grid:has(.crm-widget[data-solo]) > .cell[data-section-title] { display: none; }
/* a deal memo is not a CRM record: its page has nobody to email */
.crm-solo .ui-record-mailbtn { display: none; }
.ui-panel-bar .ui-record-head .ui-record-sub .ntag { display: inline-flex; }   /* a memo's recommendation sits with its facts */
/* a memo's reference, beside its name (the name is as wide as what is typed in it) */
.ui-record-ref { flex: none; font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 2px 8px; border: 1px solid var(--ui-line-head); border-radius: var(--ui-r-pill); }
.ui-record-head:has(.ui-record-ref) .ui-record-title { flex: 0 1 auto; field-sizing: content; min-width: 8ch; max-width: 100%; }
.ui-panel-bar .ui-record-ref { font-size: 11.5px; padding: 1px 7px; color: rgba(255, 255, 255, .78); border-color: rgba(255, 255, 255, .28); }
/* a mailbox's signature in My settings: whose, the text, then the image and its options */
.ui-set-sigform { display: flex; flex-direction: column; gap: 10px; }
.ui-set-sigform[hidden] { display: none; }
.ui-set-sigbox { width: 100%; max-width: 420px; }
.ui-set-logo { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 10px 12px; border: 1px dashed var(--ui-line-head); border-radius: var(--ui-r); }
.ui-set-logoimg { max-width: 100%; height: auto; display: block; }   /* at its real width, so what is set here is what goes out */
.ui-set-logo { align-items: flex-end; }
.ui-set-logoimg[hidden], .ui-set-logonone[hidden], .ui-set-logooff[hidden] { display: none; }
.ui-set-logonone { font-size: 13px; color: var(--text-muted); }
.ui-set-logobtn { margin-left: auto; height: 30px; padding: 0 12px; cursor: pointer; }
.ui-set-logooff { margin-left: 0; }
.ui-set-logoopts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13px; color: var(--text-muted); }
.ui-set-logoopts .ui-set-logow { width: 76px; }
.ui-set-logolinkwrap { flex: 1 1 240px; display: flex; align-items: center; gap: 8px; }
.ui-set-logolinkwrap .ui-in { flex: 1 1 auto; min-width: 0; }
/* the email pane: the From mailbox's signature under the email, joined to the box it is written in */
.ui-mailpane-text.has-sig { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-style: dashed; }
.ui-mailpane-sig { flex: none; padding: 10px 12px 12px; border: 1px solid var(--ui-line-head); border-top: 0; border-radius: 0 0 var(--ui-r) var(--ui-r); font-size: 14px; line-height: 1.55; color: var(--text); }
.ui-mailpane-sig[hidden] { display: none; }
.ui-mailpane-sigtext { white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-mailpane-sig img { display: block; max-width: 100%; height: auto; margin-top: 10px; }
/* The panel's name row is centred on the breadcrumbs beside it by CSS (Tom, 4 Oct 2026),
   not by a measured padding (--bar-pt), which sat the name about 2px high: the row is
   the header band's height, less the 3px the breadcrumbs sit above the band's middle. */
.ui-panel .ui-panel-bar.is-aligned { padding-top: 0 !important; }
.ui-panel .ui-panel-bar.is-aligned > .ui-record-head { height: var(--name-h); box-sizing: border-box; padding-bottom: 3px; align-content: center; }
/* ---- a deal memo's company and people, from the CRM (4 Oct 2026) ---- */
.ui-memo-own { margin-top: 18px; }
/* a deal memo's fields: the name's column is only as wide as its few names need, so each value
   sits closer to its name (Tom, 5 Oct 2026). The CRM's own records keep the full width. */
.ui-record[data-kind="memo"] { --ui-field-label-w: 136px; }
.ui-record.is-panel[data-kind="memo"] .ui-field-label { flex-basis: var(--ui-field-label-w); }
/* a memo's People (Tom, 5 Oct 2026): a person's row is a toggle. A click drops their CRM fields open
   under their name, in line with it; another click puts them away. Several can be open at once. */
.ui-memo-personrow { cursor: pointer; }
.ui-memo-chev { flex: none; width: 16px; height: 20px; color: var(--text-muted); }      /* as tall as the row's tile, so it keeps its place when the row opens */
.ui-memo-personrow:hover > .ui-memo-chev { color: var(--text); }
.ui-memo-personrow.is-open { flex-wrap: wrap; }      /* their fields take a line of their own under the row, from its icon's left edge (Tom, 5 Oct 2026) */
.ui-memo-personrow.is-open > .ui-memo-chev { transform: rotate(90deg); }
.ui-memo-person { flex: 0 0 100%; min-width: 0; margin-top: 6px; cursor: auto; }
.ui-memo-person > .ui-section, .ui-record.is-panel .ui-memo-person > .ui-section { margin: 0; padding: 0; border: 0; }      /* no inset: the fields start under the name */
/* a memo's foot (Tom, 5 Oct 2026): its first icon (the bin) starts where the field icons above it start.
   An icon button's glyph sits 8px inside it ((34px - 18px) / 2), so the button is drawn that far back;
   in the side panel the foot is first set in as far as the fields are. */
.ui-panel .ui-record[data-kind="memo"] .ui-record-foot .ui-field-icons { padding-left: calc(20px + var(--ui-inset)); }
.ui-record[data-kind="memo"] .ui-record-foot .ui-field-icons > .ui-iconbtn:first-child { margin-left: -8px; }
/* ---- side panels slide (Tom, 5 Oct 2026) ------------------------------------------------
   Every right-hand panel comes in from the window's right edge and goes back out to it, at one
   pace (--ui-slide-in, --ui-slide-out). The dashboard's panel (.drawer) moves itself. A record's
   panel (.ui-panel) is filled and measured the moment it opens, so it is never moved: crm.js
   slides a copy of it (.is-ghost) in or out, and the panel itself is unseen (.is-arriving) until
   its copy has arrived. Nothing moves for a reader who has asked for less motion. */
:root { --ui-slide-in: .34s cubic-bezier(.22, 1, .36, 1); --ui-slide-out: .26s cubic-bezier(.4, 0, .2, 1); }
@keyframes ui-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes ui-slide-out { from { transform: translateX(0); } to { transform: translateX(100%); } }
.ui-panel.is-arriving { opacity: 0; }
.ui-panel.is-ghost { display: flex !important; transform: translateX(0); pointer-events: none; will-change: transform; }
.ui-panel.is-ghost.is-entering { animation: ui-slide-in var(--ui-slide-in) both; }
.ui-panel.is-ghost.is-leaving { animation: ui-slide-out var(--ui-slide-out) both; }
@media (prefers-reduced-motion: no-preference) {
  .drawer { transition: transform var(--ui-slide-out), width var(--ui-slide-in), box-shadow .28s ease; }
  .drawer.open { transition: transform var(--ui-slide-in), width var(--ui-slide-in), box-shadow .28s ease; }
}
/* Maximise and Restore move too (Tom, 5 Oct 2026). The sheet is a copy of the panel. Maximise: it grows
   leftwards over the list, the record's page is drawn under it, and it fades away. Restore: it covers the
   page, the list comes back under it, it draws back to where the panel is, and fades away over the panel.
   The panel's name row (the glass over the header, the name, the buttons) keeps the panel's width and sits
   at the sheet's moving edge: it goes left fading out, and comes back right fading in. crm.js gives the
   sheet its widths (--sheet-w the panel's, --sheet-full the page's). */
@keyframes ui-sheet-grow { to { width: var(--sheet-full); } }
@keyframes ui-sheet-shrink { from { width: var(--sheet-full); } }
@keyframes ui-sheet-fade { to { opacity: 0; } }
@keyframes ui-sheet-show { from { opacity: 0; } }
.ui-panel.is-ghost.is-sheet { z-index: 32; transform: none; will-change: auto; }      /* over the panel itself; not moved by a transform, so its glass still blurs the header */
.ui-panel.is-under { opacity: 0; }                                             /* the panel, while its copy stands in for it */
.ui-panel.is-sheet.is-blank { background: var(--ui-panel); }
.ui-panel.is-sheet .ui-panel-bar.is-aligned::after { right: auto; width: var(--sheet-w); }
.ui-panel.is-sheet .ui-panel-bar.is-aligned > .ui-record-head { flex: none; width: calc(var(--sheet-w) - 36px); }
.ui-panel.is-sheet .ui-panel-bar.is-aligned .drawer-actions { right: auto; left: 0; width: calc(var(--sheet-w) - 14px); justify-content: flex-end; }
.ui-panel.is-sheet.is-growing { animation: ui-sheet-grow var(--ui-slide-in) both; }
.ui-panel.is-sheet.is-growing > .ui-panel-body > * { animation: ui-sheet-fade .14s ease both; }
.ui-panel.is-sheet.is-growing > .ui-panel-bar > *, .ui-panel.is-sheet.is-growing > .ui-panel-bar::after { animation: ui-sheet-fade .3s ease both; }
.ui-panel.is-sheet.is-covering { width: var(--sheet-full); animation: ui-sheet-show .09s ease both; }
.ui-panel.is-sheet.is-covering > .ui-panel-bar > *, .ui-panel.is-sheet.is-covering > .ui-panel-bar::after { opacity: 0; }
.ui-panel.is-sheet.is-shrinking { animation: ui-sheet-shrink var(--ui-slide-out) both; }
.ui-panel.is-sheet.is-shrinking > .ui-panel-bar > *, .ui-panel.is-sheet.is-shrinking > .ui-panel-bar::after { animation: ui-sheet-show var(--ui-slide-out) both; }
.ui-panel.is-sheet.is-fading { animation: ui-sheet-fade .16s ease both; }
.ui-panel.is-sheet.is-max.is-fading > * > *, .ui-panel.is-sheet.is-max.is-fading > .ui-panel-bar::after { opacity: 0; }
/* a memo's line under its name (Tom, 5 Oct 2026): its reference, then "Recommendation: Buy", which is the
   field itself (the picker), set here. The same line sits in the band under the name in the side panel. */
.ui-record-head .ui-record-sub.ui-memo-headline { align-items: center; gap: 4px 12px; }
.ui-record-head .ui-record-sub.ui-memo-headline .ui-field { flex: none; flex-direction: row; align-items: center; gap: 4px; min-height: 0; }
.ui-record-head .ui-record-sub.ui-memo-headline .ui-field > .ui-field-label { flex: none; gap: 0; align-self: center; min-height: 0; font-size: 13px; color: var(--text-muted); }
.ui-record-head .ui-record-sub.ui-memo-headline .ui-field > .ui-field-label svg { display: none; }
.ui-record-head .ui-record-sub.ui-memo-headline .ui-field > .ui-field-label::after { content: ":"; }
.ui-panel-bar .ui-record-sub.ui-memo-headline { overflow: visible; }
.ui-panel-bar .ui-memo-headline .ui-record-ref { font-size: 12px; padding: 1px 8px; color: var(--text-muted); border-color: var(--ui-line-head); }      /* in the band, not over the dark name row */
.ui-panel .ui-panel-bar.is-aligned:has(.ui-memo-headline .ui-pick.is-open) { z-index: 6; }      /* its list of choices opens over the panel's tabs */
/* its picker is drawn as a field's is (in the side panel this line is in the bar, outside the record) */
.ui-memo-headline .ui-pick-box { min-height: 30px; padding: 3px 7px; border-color: transparent; background: transparent; border-radius: var(--ui-r-sm); }
.ui-memo-headline .ui-pick-box:hover { border-color: transparent; background: var(--ui-hover); }
.ui-memo-headline .ui-pick.is-open .ui-pick-box { border-color: var(--text); background: var(--surface); }
/* ---- ui-comments: a record's comments (Tom, 5 Oct 2026) -----------------------------------
   Every CRM record and deal memo has comments: the team talking to each other about it, apart from
   its Notes, and not one of its tabs. On the full page a small icon (.ui-comments-btn, with how many
   there are) sits to the right of the record's tabs and opens a pane of comments (.ui-comments) down
   the page's right edge; the page gives the pane its width where there is room, else the pane lies
   over the page. The side panel has no room for the pane, so there the icon is with Maximise and
   takes the record to the full page with comments open. A person is tagged with @ in a comment.
     <aside class="ui-comments"><div class="ui-comments-head">…</div><div class="ui-comments-list ui-list">…</div>
       <form class="ui-comments-form"><div class="ui-comment-editor" contenteditable>…</div>…</form></aside> */
:root { --ui-comments-w: 340px; }                                              /* the comments pane's width */
.ui-comments-btn { position: relative; }
.ui-comments-btn svg { width: 18px; height: 18px; }
.ui-comments-badge { position: absolute; top: 0; right: -2px; min-width: 15px; height: 15px; box-sizing: border-box; padding: 0 4px; border-radius: var(--ui-r-pill); background: var(--accent); color: #fff; font-size: 10px; font-weight: 600; line-height: 15px; text-align: center; }
.ui-comments-badge[hidden] { display: none; }
.ui-iconbtn.ui-comments-btn[aria-pressed="true"] { background: var(--ui-fill); color: var(--text); }
@media (min-width: 901px) {
  .ui-record.is-page .ui-record-grid > .ui-comments-btn { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; margin-right: var(--pg, 0px); }
  .ui-fullpage .ui-record.is-page.has-comments-btn .ui-record-grid > .ui-tabs { margin-right: calc(var(--pg, 0px) + 44px); }
}
.ui-comments { position: fixed; z-index: 24; right: 0; top: var(--head-h, 102px); bottom: 0; width: min(var(--ui-comments-w), 100vw); display: flex; flex-direction: column; background: var(--ui-panel); border-left: 1px solid var(--ui-line-head); }
.ui-comments[hidden] { display: none; }
html.astra-side .ui-comments { right: var(--astra-side-w); }
.ui-comments-head { flex: none; display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 10px 0 var(--ui-inset); border-bottom: 1px solid var(--ui-line); }
.ui-comments-title { font-size: 14.5px; font-weight: 500; color: var(--text); }
.ui-comments-n { margin-left: 0; }
.ui-comments-close { margin-left: auto; }
.ui-comments-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--ui-inset); }
.ui-comments-list .ui-noterow { margin: 0; padding: 14px 0; }
.ui-comments-none { margin: 16px 0; }
.ui-comments-form { flex: none; margin: 0; padding: 10px var(--ui-inset) 14px; border-top: 1px solid var(--ui-line); }
.ui-comment-editor { min-height: 120px; max-height: 360px; overflow-y: auto; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--ui-r); background: var(--surface); color: var(--text); font-size: 14px; line-height: 21px; white-space: pre-wrap; overflow-wrap: anywhere; outline: none; }
.ui-comment-editor:focus { border-color: var(--text); }
.ui-comment-editor:empty::before { content: attr(data-placeholder); color: var(--text-muted); pointer-events: none; }
.ui-comments-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ui-comments-foot .ui-comments-send { margin-left: auto; }
/* the page gives the pane its width where the record's tabs keep a workable width; where they would not
   (crm.js marks the page .is-over) the pane lies over the page's right side */
.crm-widget.showing-page > .ui-fullpage.has-comments:not(.is-over) { padding-right: var(--ui-comments-w); }
.ui-fullpage.has-comments.is-over > .ui-comments { box-shadow: -12px 0 32px rgba(14, 14, 18, .10); }
/* Astra's launcher steps to the pane's left rather than sitting on the box to write in */
@media (min-width: 901px) { body:has(.ui-comments:not([hidden])) .astra-fab { right: calc(var(--ui-comments-w) + 20px); } }
@media (max-width: 900px) { body:has(.astra-fab) .ui-comments-form { padding-bottom: 84px; } }
/* the jump sits just to the right of the record's name (Tom, 5 Oct 2026): the name is as wide as what is typed in it */
.ui-record-head:has(> .ui-jump) .ui-record-title { flex: 0 1 auto; field-sizing: content; min-width: 8ch; max-width: 100%; }
.ui-record-head > .drawer-btn.ui-jump { flex: none; height: 28px; margin-left: -4px; }
.ui-panel-bar .ui-record-head > .drawer-btn.ui-jump { color: rgba(255, 255, 255, .7); }
.ui-panel-bar .ui-record-head > .drawer-btn.ui-jump:hover, .ui-panel-bar .ui-record-head > .drawer-btn.ui-jump:focus-visible { color: #fff; background: rgba(255, 255, 255, .10); }
/* the comments icon a touch lower: with its count at the top right it looked higher than the tabs beside it */
.ui-comments-btn > svg { position: relative; top: 2px; }
/* the pane's title sits level with the record's tabs, and the line under it with the foot of the tabs' row (Tom, 5 Oct 2026):
   22px is the gap the page keeps between the header and its tabs, 42px the tabs' own height */
.ui-comments-head { height: 64px; box-sizing: border-box; padding-top: 22px; }
/* ---- ui-notice: a comment listed under the bell (Tom, 5 Oct 2026) --------------------------
   The bell at the top of every page lists other people's recent comments on records and deal memos
   (static/comment_notices.js draws them under whatever "needs you"); its number counts the unread
   ones too. A notice is a link to its record; an unread one carries a teal dot.
     <div class="ui-notices"><div class="notify-menu-head ui-notices-head">Comments <button class="ui-notices-all">…</button></div>
       <a class="ui-notice is-unread" href="…"><span class="achip-av ui-notice-av">TD</span>
         <span class="ui-notice-main"><span class="ui-notice-top">…</span><span class="ui-notice-text">…</span><span class="ui-notice-ago">…</span></span>
         <span class="ui-notice-dot"></span></a></div> */
.ui-notices { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--ui-line); }
.ui-notices-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ui-notices-all { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--accent); cursor: pointer; }
.ui-notices-all:hover, .ui-notices-all:focus-visible { text-decoration: underline; outline: none; }
.ui-notice { display: flex; align-items: flex-start; gap: 10px; padding: 9px 8px; border-radius: var(--ui-r); color: inherit; text-decoration: none; }
.ui-notice:hover, .ui-notice:focus-visible { background: var(--ui-hover); text-decoration: none; outline: none; }
.ui-notice-av { flex: none; width: 28px; height: 28px; margin-top: 1px; font-size: 11px; }
.ui-notice-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-notice-top { font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
.ui-notice-top b { font-weight: 600; color: var(--text); }
.ui-notice-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.ui-notice:not(.is-unread) .ui-notice-text { color: var(--text-muted); }
.ui-notice-ago { font-size: 12px; color: var(--text-muted); }
.ui-notice-dot { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--accent); }
/* the bell's number is teal when all it counts is unread comments (amber stays for what needs you) */
.notify-bell.has-unread:not(.has-items) .notify-count { background: var(--accent); color: #fff; }
/* Notification settings, at the foot of the bell's menu (Tom, 6 Oct 2026): when comments a person has not read are
   emailed to them. The choice in force is shown alone (.ui-notices-now) with a pencil at its right (Tom, 7 Oct 2026);
   the pencil shows the four choices, one ticked, over Cancel and Save (.ui-notices-setfoot), and Save shows the one
   picked alone again. static/comment_notices.js draws and saves them. */
.ui-notices-sethead { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--ui-line); }
.ui-notices-saved { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--accent); }
.ui-notices-set { padding: 0 8px 6px; }
.ui-notices-setnote { margin: 0 0 6px; font-size: 13px; color: var(--text-muted); }
.ui-notices-opt { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13.5px; color: var(--text); cursor: pointer; }
.ui-notices-opt input { flex: none; margin: 0; accent-color: var(--accent); }
.ui-notices-at { color: var(--text-muted); font-size: 12.5px; }
.ui-notices-now { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; font-size: 13.5px; color: var(--text); }
.ui-notices-nowtext { min-width: 0; }
.ui-notices-edit { flex: none; margin-right: -4px; }
.ui-notices-setfoot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; }
.ui-notices-setfoot :is(.ui-btn, .ui-btn-plain) { height: 28px; padding: 0 12px; font-size: 13px; }
/* the bell's comments in two parts (Tom, 6 Oct 2026): Unread, which can all be marked read, and Read, which can be cleared away */
.ui-notices-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 2px; font-size: 12.5px; font-weight: 500; color: var(--text-muted); }
.ui-notices-n { display: inline-block; min-width: 16px; padding: 0 5px; border-radius: var(--ui-r-pill); background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 600; line-height: 16px; text-align: center; }
.ui-notices-clear { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--accent); cursor: pointer; }
.ui-notices-clear:hover, .ui-notices-clear:focus-visible { text-decoration: underline; outline: none; }
.ui-notices-none { margin: 2px 8px 6px; font-size: 13px; }
/* ---- ui-fin: a deal memo's Financials (Tom, 6 Oct 2026). A sub-menu (.pagetabs: P&L, Balance sheet) over a table of
   figures (.ui-figs) with the line items down the left and a column a year:
     <div class="ui-fin"> <div class="pagetabs ui-fin-tabs"> … </div>
       <div class="ui-fin-pane"> <div class="ui-table-wrap ui-fin-wrap"> <table class="… ui-figs ui-fin-figs" style="--fin-years: 5">
   Five years fit the side panel; more make the table wider and it scrolls sideways. A typed line's name is a box too
   (.ui-fin-label), as is a year's (.ui-fin-yearin); the corner says what the figures are in (.ui-fin-unit) and adds a
   year. A line's small buttons (.ui-fin-acts > .ui-figs-tool: add a line under it, remove it) are at the end of its
   name while the mouse or the keyboard is on the line; a year's remove (.ui-fin-x) is at the left of its name. */
.ui-fin { min-width: 0; }
.ui-record.is-panel .ui-fin-tabs { margin-top: -8px; }
.ui-fin-pane[hidden] { display: none; }
.ui-fin-figs { min-width: calc(180px + var(--fin-years, 5) * 78px); }
.ui-fin-figs .ui-figs-name { width: 180px; }
.ui-fin-figs .ui-figs-in, .ui-fin-figs > tbody > tr > td.ui-num:not(.ui-figs-cell) { padding: 0 4px; }   /* eight figures and their commas fit a year's column in the side panel */
.ui-fin-figs > thead > tr > th.ui-fin-year { position: relative; padding: 0; }
.ui-fin-yearin { height: 100%; min-height: 36px; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; }
.ui-fin-label { flex: 1 1 auto; width: 0; min-width: 0; height: 28px; box-sizing: border-box; margin: 0 0 0 -6px; padding: 0 6px; border: 0; border-radius: var(--ui-r-sm); background: transparent; color: inherit; font: inherit; text-overflow: ellipsis; }
.ui-fin-label:hover { background: var(--ui-hover); }
.ui-fin-label:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: transparent; }
.ui-fin-label[aria-invalid="true"] { outline: 2px solid var(--ui-danger); outline-offset: -2px; }
.ui-fin-acts { flex: none; display: none; align-items: center; gap: 2px; margin-right: -2px; }
.ui-fin-figs > tbody > tr:hover .ui-fin-acts, .ui-fin-figs > tbody > tr:focus-within .ui-fin-acts { display: inline-flex; }
.ui-fin-figs > thead .ui-fin-add { margin-left: auto; }
.ui-fin-figs > thead .fsel { flex: none; margin-left: -6px; }   /* the unit is read whole, its text in line with the names under it */
.ui-fin-year > .ui-fin-x { position: absolute; left: 3px; top: 50%; z-index: 1; margin-top: -9px; opacity: 0; }
.ui-fin-year:hover > .ui-fin-x, .ui-fin-year:focus-within > .ui-fin-x { opacity: 1; }
.ui-fin-x:hover { color: var(--ui-danger); }
@media (hover: none) { .ui-fin-acts { display: inline-flex; } .ui-fin-year > .ui-fin-x { opacity: 1; } }
.ui-fin-unit { -webkit-appearance: none; appearance: none; width: auto; height: 26px; padding: 0 6px; border: 0; border-radius: var(--ui-r-sm); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.ui-fin-unit:hover, .ui-fin-unit:focus-visible, .ui-fin-unit[aria-expanded="true"] { color: var(--text); background: var(--ui-hover); outline: none; }
.ui-tabpanel[data-tab="financials"] { min-width: 0; }
/* on the full page it is set in from the column's edges as the record's tabs above it are */
.ui-fullpage .ui-record.is-page .ui-tabpanel:not(.ui-record-main) > .ui-fin { margin: 14px var(--pg, 0px) 0 var(--in, 0px); }
/* the balance sheet beside the P&L (Tom, 6 Oct 2026). Its sections have headings (tr.ui-figs-head). A worked-out line with a
   long name ("Total assets less current liabilities") takes two lines inside the row's one height. The last line, Balance
   check (tr.is-check), is quiet while it is nil and says so in red where it is not (td.is-off): the sheet does not balance. */
.ui-fin-figs > tbody > tr.is-calc .ui-figs-label { white-space: normal; line-height: 1.2; }
.ui-fin-figs > tbody > tr.is-check > td { color: var(--text-muted); }
.ui-fin-figs > tbody > tr.is-check > td.is-off { color: var(--ui-danger); font-weight: 500; }
/* a year's name is plain text, not a box (Tom, 6 Oct 2026): it sits over its figures, in from the edge as they are */
.ui-fin-figs > thead > tr > th.ui-fin-year { padding: 0 4px; }
/* the Financials' Uploads tab (Tom, 6 Oct 2026): a section each for the P&L and the balance sheet (.ui-fin-up: a .ui-sub-head
   with the section's name and its Add file button, the files as .ui-file chips, and a foot with the Create button and a
   note of what happened). The file box inside the Add file label is never seen. */
.ui-fin-up > .ui-sub-head { margin-bottom: 10px; }
.ui-fin-up .ui-sub-title { font-size: 14px; color: var(--text); }
.ui-fin-up-add { cursor: pointer; }
.ui-fin-up-add svg { width: 14px; height: 14px; }
.ui-fin-up-add input { display: none; }
.ui-fin-up-add.is-busy { opacity: .5; pointer-events: none; }
.ui-fin-up-files { margin-top: 0; }
.ui-fin-up-files .ui-file > a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: inherit; text-decoration: none; }
.ui-fin-up-files .ui-file > a:hover .ui-file-name { text-decoration: underline; }
.ui-fin-up-files .ui-chip-x:hover { color: var(--ui-danger); }
.ui-fin-up-none { margin: 0; }
.ui-fin-up-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.ui-fin-up-foot .ui-btn { flex: none; }
.ui-fin-up-note { min-width: 0; }
.ui-fin-up-note.is-failed { color: var(--ui-danger); }
/* a section's three ways in, under what it holds (Tom, 6 Oct 2026): Add P&L / Add Balance Sheet, Add IM, Companies House */
.ui-fin-up-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ui-fin-up-acts .ui-btn-outline svg { width: 14px; height: 14px; }
.ui-fin-up-acts .ui-btn-outline:disabled { opacity: .5; cursor: progress; }
.ui-fin-up > .ui-sub-head { min-height: 0; }
/* While Astra is creating a sheet (Tom, 6 Oct 2026), its tab cannot be typed in: the grid is dimmed under a frosted veil
   (.ui-fin-pane.is-busy > .ui-fin-wait) with a liquid glass card in the middle (.ui-fin-wait-card: Please wait…, Astra is
   creating the P&L). The glass is the side panel's: a sheen from the top left, a bright top edge, the page blurred through it. */
.ui-fin-pane { position: relative; }
.ui-fin-pane.is-busy { min-height: 240px; }
.ui-fin-pane.is-busy > .ui-fin-wrap { opacity: .6; pointer-events: none; -webkit-user-select: none; user-select: none; }
.ui-fin-wait {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-start; justify-content: center; padding-top: 96px; box-sizing: border-box;
  border-radius: var(--ui-r); background: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(2.5px) saturate(120%); backdrop-filter: blur(2.5px) saturate(120%);
}
body:not(.light) .ui-fin-wait { background: rgba(23, 24, 28, .26); }
.ui-fin-wait-card {
  display: flex; align-items: center; gap: 14px; max-width: min(380px, 88%); padding: 18px 24px 18px 20px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .7); color: var(--text);
  background:
    radial-gradient(130% 160% at 0% 0%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 55%),
    linear-gradient(to bottom, rgba(255, 255, 255, .58), rgba(255, 255, 255, .34));
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 1px 0 0 rgba(255, 255, 255, .4), 0 16px 44px rgba(16, 24, 32, .18), 0 2px 6px rgba(16, 24, 32, .06);
}
body:not(.light) .ui-fin-wait-card {
  border-color: rgba(255, 255, 255, .14);
  background:
    radial-gradient(130% 160% at 0% 0%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 55%),
    linear-gradient(to bottom, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 1px 0 0 rgba(255, 255, 255, .10), 0 16px 44px rgba(0, 0, 0, .5);
}
.ui-fin-wait-text { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; line-height: 1.3; color: var(--text-muted); }
.ui-fin-wait-text > b { font-size: 15px; font-weight: 600; color: var(--text); }
.ui-fin-wait-spin { flex: none; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; border: 2.5px solid rgba(31, 185, 167, .25); border-top-color: var(--accent); animation: ui-fin-spin .9s linear infinite; }
@keyframes ui-fin-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ui-fin-wait-spin { animation-duration: 2.6s; } }
/* a sheet's foot: Reset P&L / Reset Balance Sheet, in red (.ui-btn-danger), under the grid on the left (Tom, 6 Oct 2026) */
.ui-fin-foot { display: flex; margin-top: 18px; }
/* Uploads, as Tom set it on 6 Oct 2026: the three ways in have no outline (teal words with their icon, a tint under the
   mouse), set so the first one's icon starts at the section's left edge; and what happened is written UNDER the Create /
   Recreate button, not beside it. */
.ui-fin-up-acts { gap: 2px; margin-left: -10px; }
.ui-fin-up-acts .ui-btn-outline { border-color: transparent; padding: 0 10px; }
.ui-fin-up-acts .ui-btn-outline:focus-visible { border-color: var(--accent); }
.ui-fin-up-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
.ui-fin-up-note { display: block; line-height: 1.45; }
/* the Financials' sub-menu (P&L, Balance sheet, Uploads) is three equal, fixed-width items (Tom, 6 Oct 2026): each name
   centred in its own width, the underline that width, so nothing shifts from one to the next */
.ui-fin-tabs { gap: 6px; }
.ui-fin-tabs > .tab { flex: 0 0 118px; width: 118px; box-sizing: border-box; justify-content: center; padding: 0; }
/* the line items' column is as wide as its longest name (--fin-name, worked out with the sheet), so every name is on one
   line (Tom, 6 Oct 2026). Where that and the years are wider than the panel, the years slide under the names, which stay
   put (sticky), on the page's own colour. */
.ui-fin-figs { min-width: calc(var(--fin-name, 180px) + var(--fin-years, 5) * 78px); overflow: clip; }   /* (clip, not hidden: the table keeps its corners without becoming what the names stick to) */
.ui-fin-figs .ui-figs-name { width: var(--fin-name, 180px); }
.ui-fin-figs > tbody > tr.is-calc .ui-figs-label { white-space: nowrap; line-height: inherit; }
.ui-fin-figs > thead > tr > th.ui-figs-name, .ui-fin-figs > tbody > tr > td.ui-figs-name {
  position: sticky; left: 0; z-index: 2; background: linear-gradient(var(--surface, #fff), var(--surface, #fff)), var(--bg, #fff);
}
.ui-fin-figs > tbody > tr.ui-figs-head > td.ui-figs-name { border-right-color: transparent !important; white-space: nowrap; }   /* a section's heading: in the names' column, with no line after it */
/* Add: one button under what a section holds (its menu is the three ways in), sized to its word */
.ui-fin-up-acts { display: flex; }
.ui-fin-up-add[aria-expanded="true"] { background: var(--ui-teal-tint); }
/* ---- ui-deal: a deal memo's Deal Sheet (Tom, 6 Oct 2026): a sub-menu of four equal, fixed-width items (Overview,
   Adjustments, Financing sources, Financing inputs) over a pane each, set as the Financials' is: close under the record's
   tabs in the side panel, in from the column's edges on the full page. */
.ui-deal { min-width: 0; }
.ui-deal-tabs { gap: 6px; }
.ui-deal-tabs > .tab { flex: 0 0 132px; width: 132px; box-sizing: border-box; justify-content: center; padding: 0; }
.ui-deal-pane[hidden] { display: none; }
.ui-record.is-panel .ui-deal-tabs { margin-top: -8px; }
.ui-fullpage .ui-record.is-page .ui-tabpanel:not(.ui-record-main) > .ui-deal { margin: 14px var(--pg, 0px) 0 var(--in, 0px); }
.ui-tabpanel[data-tab="dealsheet"] { min-width: 0; }
/* Uploads moved under each sheet (Tom, 6 Oct 2026; it had a tab of its own): the section follows the grid after a rule, and
   the red Reset follows it. While Astra is creating the sheet the glass card stays in view as the tab is scrolled (the
   button that starts it is now at the foot of a long grid). */
.ui-fin-pane > .ui-fin-up { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--ui-line); }
.ui-fin-pane > .ui-fin-foot { margin-top: 22px; }
.ui-fin-wait-card { position: sticky; top: 110px; }
/* Add is on the sub-menu's row now, at the right, and what a sheet was made from is a reference under its table (Tom, 6 Oct
   2026; there was an Uploads section there with its own buttons). .ui-fin-src-k is the word before the document's name
   (Source once the sheet has been made from it, Document until then). */
.ui-fin-tabs > .ui-fin-up-add { flex: none; align-self: center; margin-left: auto; height: 30px; padding: 0 10px; border-color: transparent; }
.ui-fin-tabs > .ui-fin-up-add:focus-visible { border-color: var(--accent); }
.ui-fin-tabs > .ui-fin-up-add svg { width: 14px; height: 14px; }
.ui-fin-pane > .ui-fin-up { margin-top: 14px; padding-top: 0; border-top: 0; }
.ui-fin-pane > .ui-fin-up.is-empty { margin-top: 0; }
.ui-fin-up-files { align-items: center; }
.ui-fin-src-k { margin-right: 2px; font-size: 12.5px; color: var(--text-muted); }
p.ui-fin-up-note { margin: 8px 0 0; }
/* Adding a document fills the sheet at once (Tom, 6 Oct 2026). The warning before figures or a document are overwritten is
   the house dialog (.pb-dialog), small: Warning, a sentence, Cancel and Proceed. */
.pb-dialog.ui-fin-ask { width: min(440px, calc(100vw - 32px)); }
.ui-fin-ask .pb-dhead { padding-bottom: 12px; }
.ui-fin-ask-text { margin: 0; font-size: 14.5px; line-height: 1.5; }
.ui-fin-up-note .ui-linkbtn { color: var(--accent); }
/* The P&L and the balance sheet are two of the Deal Sheet's six sub-tabs now (Tom, 6 Oct 2026; the Financials tab is gone).
   Six names do not fit as equal fixed widths, so the Deal Sheet's row is set to each name's own width. The sheets' block
   keeps its own row of two names for crm.js but it is not seen; Add sits on a slim bar over the table, at the right. */
.ui-deal-tabs { gap: 15px; }
.ui-deal-tabs > .tab { flex: none; width: auto; padding: 0 2px; }
.ui-deal .ui-fin-tabs { display: none; }
.ui-fin-bar { display: flex; justify-content: flex-end; margin: -8px 0 6px; }
.ui-fin-bar > .ui-fin-up-add { height: 30px; padding: 0 10px; border-color: transparent; }
.ui-fin-bar > .ui-fin-up-add:focus-visible { border-color: var(--accent); }
.ui-fin-bar > .ui-fin-up-add svg { width: 14px; height: 14px; }
/* Reset P&L / Reset Balance Sheet is an icon over the grid, at the left (Tom, 9 Oct 2026; it was a red button at the foot): on
   Add's row when there is one (the slim bar is 30px and 6px over the pane), else on a slim row of its own. As wide as the icon
   and no wider, so it is never over Add. */
.ui-fin-pane > .ui-fin-foot.is-top { width: fit-content; height: 28px; margin: 0 0 6px; }
/* (lifted onto Add's row and taking no height of its own. Not a negative margin: that collapses through the pane, which then lies over Add) */
.ui-fin-bar ~ .ui-fin-pane > .ui-fin-foot.is-top { position: relative; top: -35px; height: 0; margin: 0; }
/* (not while a document is being read into the sheet, or the sheet is being drawn again: a reset then would be filled over) */
.ui-fin-pane:has(.ui-fin-up[data-working]) > .ui-fin-foot.is-top, .ui-fin-pane.is-busy > .ui-fin-foot.is-top { visibility: hidden; }
/* a little more room between the Deal Sheet's six names (Tom, 6 Oct 2026): the row shares out what width it has, from 15px
   up to 26px between names (they come to about 506px themselves, so in the side panel and a 1600px page that is 16 to 19px) */
.ui-deal-tabs { gap: clamp(15px, calc((100% - 506px) / 5), 26px); }
/* Several documents to a sheet (Tom, 6 Oct 2026). The question before a document goes into a sheet that has figures is three
   buttons (Cancel, Replace, Supplement) with a line on what each does; a document that has not gone into the sheet is
   shown paler than the sheet's sources. */
.ui-fin-ask-note { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.ui-fin-ask-note b { font-weight: 500; color: var(--text); }
.ui-fin-up-files .ui-file.is-waiting { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
/* A Change column (Tom, 6 Oct 2026): after a year, the figures a document added to the sheet would change, each with a tick
   (accept: it goes into the sheet) and a cross (reject). Tinted so it reads as not yet part of the sheet. */
.ui-fin-figs > thead > tr > th.ui-fin-chg, .ui-fin-figs > tbody > tr > td.ui-fin-chg { width: 117px; padding: 0 4px; background: var(--ui-teal-tint, rgba(31, 185, 167, .10)); white-space: nowrap; }
.ui-fin-chg-t { margin-right: 4px; }
.ui-fin-chg-v { margin-right: 4px; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text); }
.ui-fin-chg .ui-figs-tool { vertical-align: middle; }
.ui-fin-chg .ui-fin-ok { color: var(--accent); }
.ui-fin-chg .ui-fin-ok:hover { background: var(--accent); color: #fff; }
/* the Change column is on the house light orange (the orange tile's, softened), not the teal tint (Tom, 6 Oct 2026). Its
   heading too: every table heading's colour is --thead-bg (set with !important for the whole site), so that is what is
   given here, as the solid colour the tint comes to on the sheet. */
.ui-fin-figs { --ui-fin-chg: rgba(250, 222, 201, .62); --ui-fin-chg-solid: #fcebde; }
body:not(.light) .ui-fin-figs { --ui-fin-chg: rgba(240, 169, 59, .16); --ui-fin-chg-solid: #3a2f21; }
.ui-fin-figs > thead > tr > th.ui-fin-chg, .ui-fin-figs > tbody > tr > td.ui-fin-chg { background: var(--ui-fin-chg); }
.ui-fin-figs > thead > tr > th.ui-fin-chg { --thead-bg: var(--ui-fin-chg-solid); }
/* the new-figures column, as Tom settled it on 6 Oct 2026 (after a teal tint, then two oranges): headed with its year,
   "2025 (new)", so a little wider; LIGHT GREY (the house fill) inside an ORANGE BORDER that runs round the whole column:
   down both sides of every cell, over its heading and under its last row. */
.ui-fin-figs { --ui-fin-chg-line: #f0a35e; }
body:not(.light) .ui-fin-figs { --ui-fin-chg-line: #c98443; }
.ui-fin-figs > thead > tr > th.ui-fin-chg, .ui-fin-figs > tbody > tr > td.ui-fin-chg {
  width: 128px; background: var(--ui-fill);
  box-shadow: inset 1.5px 0 0 var(--ui-fin-chg-line), inset -1.5px 0 0 var(--ui-fin-chg-line);
}
.ui-fin-figs > thead > tr > th.ui-fin-chg { --thead-bg: var(--ui-fill); box-shadow: inset 1.5px 0 0 var(--ui-fin-chg-line), inset -1.5px 0 0 var(--ui-fin-chg-line), inset 0 1.5px 0 var(--ui-fin-chg-line); }
.ui-fin-figs > tbody > tr:last-child > td.ui-fin-chg { box-shadow: inset 1.5px 0 0 var(--ui-fin-chg-line), inset -1.5px 0 0 var(--ui-fin-chg-line), inset 0 -1.5px 0 var(--ui-fin-chg-line); }
/* the new-figures column has no fill of its own, only its orange border, a thin one (1px), and the "(new)" in its heading
   is orange too (Tom, 6 Oct 2026: "no grey but keep orange border", then "slightly thinner and (new) in orange") */
.ui-fin-figs { --ui-fin-chg-ink: #d97a2e; }
body:not(.light) .ui-fin-figs { --ui-fin-chg-ink: #e3a063; }
.ui-fin-figs > thead > tr > th.ui-fin-chg, .ui-fin-figs > tbody > tr > td.ui-fin-chg { background: transparent; box-shadow: inset 1px 0 0 var(--ui-fin-chg-line), inset -1px 0 0 var(--ui-fin-chg-line); }
.ui-fin-figs > thead > tr > th.ui-fin-chg { --thead-bg: inherit; box-shadow: inset 1px 0 0 var(--ui-fin-chg-line), inset -1px 0 0 var(--ui-fin-chg-line), inset 0 1px 0 var(--ui-fin-chg-line); }
.ui-fin-figs > tbody > tr:last-child > td.ui-fin-chg { box-shadow: inset 1px 0 0 var(--ui-fin-chg-line), inset -1px 0 0 var(--ui-fin-chg-line), inset 0 -1px 0 var(--ui-fin-chg-line); }
.ui-fin-chg-new { color: var(--ui-fin-chg-ink); }
/* the new-figures column, settled (Tom, 6 Oct 2026): light grey (the house fill), no border of its own, and its heading is
   the year with "new" in a small orange label (the orange tile's colours) */
.ui-fin-figs > thead > tr > th.ui-fin-chg, .ui-fin-figs > tbody > tr > td.ui-fin-chg,
.ui-fin-figs > tbody > tr:last-child > td.ui-fin-chg { background: var(--ui-fill); box-shadow: none; }
.ui-fin-figs > thead > tr > th.ui-fin-chg { --thead-bg: var(--ui-fill); box-shadow: none; }
.ui-fin-chg-new { display: inline-block; margin-left: 2px; padding: 1px 6px; border-radius: var(--ui-r-pill, 999px); background: #FADEC9; color: #49290E; font-size: 11px; font-weight: 500; line-height: 1.35; letter-spacing: 0; text-transform: none; vertical-align: 1px; }
body:not(.light) .ui-fin-chg-new { background: rgba(240, 163, 94, .22); color: #f3c296; }
/* ---- ui-share: sharing a deal memo (Tom, 6 Oct 2026) ---------------------------------------
   An owner's Share button sits at the right of the memo's Recommendation row, and in the bar that
   shows when rows of the Deal Memos list are ticked. Both open the same box (the house modal):
   who to invite, as Viewer or Editor, until when; and everyone already named, to change or remove.
   Several memos ticked are shared in one go. See app/memo_share.py. */
.ui-share-btn { margin-left: auto; height: 28px; padding: 0 10px; font-size: 13px; }
.ui-share-btn svg { width: 14px; height: 14px; }
.ui-panel-bar.is-aligned .ui-record-sub.ui-memo-headline { right: 18px; }      /* a memo has no Email button to stop short of */
.ui-share-dialog { width: min(760px, calc(100vw - 32px)); max-width: none; }
.ui-share-memos { margin: 0 0 14px; font-size: 13.5px; color: var(--text-muted); }
.ui-share-add { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 8px 10px; align-items: center; margin: 6px 0 4px; }
.ui-share-add .ui-in { width: 100%; box-sizing: border-box; }
.ui-share-ends, .ui-share-mail { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-muted); }
.ui-share-ends .ui-in { flex: 1 1 auto; width: auto; }
.ui-share-add .pb-btn-primary { justify-self: end; }
.ui-share-people { margin: 6px 0 12px; }
.ui-share-person { display: grid; grid-template-columns: minmax(0, 1fr) 118px 150px auto; gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid var(--ui-line); }
.ui-share-person:first-child { border-top: 0; }
.ui-share-who { min-width: 0; font-size: 14px; }
.ui-share-who b { font-weight: 500; }
.ui-share-who span { display: block; font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-share-person .ui-in { width: 100%; box-sizing: border-box; height: 32px; }
.ui-share-acts { display: flex; gap: 4px; justify-content: flex-end; }
.ui-share-fixed { grid-column: 2 / -1; font-size: 13.5px; color: var(--text-muted); }
.ui-share-problem { margin: 0 0 10px; font-size: 13px; color: var(--ui-danger); }
@media (max-width: 640px) { .ui-share-add, .ui-share-person { grid-template-columns: minmax(0, 1fr); } .ui-share-fixed { grid-column: auto; } }
/* ---- ui-guest: a deal memo as an invited outside person reads it (templates/deal_memo/v2_guest.html) ----
   The record's own design, with words where staff have boxes to type in: nothing on it can be changed. */
.ui-guest-page { max-width: 760px; margin: 0 auto; padding: 18px 24px 80px; }
.ui-guest-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; font-size: 13px; color: var(--text-muted); }
.ui-guest-bar .hiring-back { flex: none; }
.ui-guest-conf { flex: 1 1 auto; text-align: center; }
.ui-guest-out { flex: none; margin: 0; }
.ui-guest-record { padding: 22px 24px 26px; border: 1px solid var(--ui-line); border-radius: var(--ui-r); background: var(--ui-panel); }
.ui-guest-record .ui-record-head { margin-bottom: 14px; }
.ui-guest-title { flex: 0 1 auto; margin: 0; padding: 0; border: 0; background: none; font-size: 22px; font-weight: 600; line-height: 1.3; }
.ui-record.is-panel.ui-guest-record > .ui-section { padding-left: 0; padding-right: 0; }
.ui-record.is-panel.ui-guest-record > .ui-section + .ui-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ui-line); }
.ui-guest-value { flex: 1 1 auto; min-width: 0; padding: 7px 0; font-size: 14.5px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-guest-none { color: var(--text-muted); opacity: .75; }
.ui-guest-person { display: block; }
.ui-guest-person > summary { display: flex; align-items: center; gap: 4px; list-style: none; cursor: pointer; }
.ui-guest-person > summary::-webkit-details-marker { display: none; }
.ui-guest-person[open] > summary > .ui-memo-chev { transform: rotate(90deg); }
.ui-guest-pname { font-weight: 500; }
/* the role in the Share box is words and a chevron, no box round it (Tom, 6 Oct 2026): Read-only or Edit.
   (The site's own dropdown draws it: its button carries the select's class, and its own chevron.) */
.ui-share-role { -webkit-appearance: none; appearance: none; width: auto; height: 32px; padding: 0 6px; border: 0; border-radius: var(--ui-r-sm);
  background: transparent; color: var(--text-muted); font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; }
.ui-share-role:hover, .ui-share-role:focus-visible, .ui-share-role[aria-expanded="true"] { color: var(--text); background: var(--ui-hover); outline: none; }
.ui-share-add { grid-template-columns: minmax(0, 1fr) auto; }
.ui-share-add > .fsel, .ui-share-person > .fsel { justify-self: start; }
.ui-share-person { grid-template-columns: minmax(0, 1fr) auto 132px auto; }      /* the role is as wide as its words: the longest is "View and comment only" */
@media (max-width: 640px) { .ui-share-add, .ui-share-person { grid-template-columns: minmax(0, 1fr); } }
/* "Access ends" is a title with its date under it (Tom, 6 Oct 2026); the tick beside it sits level with the date */
.ui-share-ends { flex-direction: column; align-items: stretch; gap: 5px; }
.ui-share-ends .ui-in, .ui-share-ends .ndate { width: 100%; }
.ui-share-mail { align-self: end; min-height: 36px; }
/* the tick to email them sits just to the left of Invite, on the form's last line (Tom, 6 Oct 2026) */
.ui-share-go { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.ui-share-go .ui-share-mail { align-self: auto; min-height: 0; }
/* ---- dates: every date field reads as body text (Tom, 6 Oct 2026) --------------------------
   A date to pick or type (the browser's own field, or the site's .ndate button) is set in the body
   text: the same face, size and weight, on every page, whatever the field around it would give it.
   The browser also pads each part of its date (day / month / year) by a pixel, which made a date
   look set wider and so larger than the words beside it: those gaps are taken out. */
html body :is(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], .ndate-display) {
  font-family: inherit; font-size: 14px !important; font-weight: 350 !important; letter-spacing: normal !important; font-variant-numeric: normal !important; font-feature-settings: normal !important;
}
:is(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"])::-webkit-datetime-edit,
:is(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"])::-webkit-datetime-edit-fields-wrapper { padding: 0; }
:is(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"])::-webkit-datetime-edit-text { padding: 0; }
:is(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"])::-webkit-datetime-edit-day-field,
:is(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"])::-webkit-datetime-edit-month-field,
:is(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"])::-webkit-datetime-edit-year-field,
:is(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"])::-webkit-datetime-edit-hour-field,
:is(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"])::-webkit-datetime-edit-minute-field { padding: 0; }
/* once shared with the invitation ticked, the tick gives way to these words (Tom, 6 Oct 2026) */
.ui-share-mail[hidden] { display: none; }
.ui-share-sent { font-size: 13.5px; font-weight: 500; color: var(--accent); }
/* a person's end date in the Share box has no box of its own (Tom, 6 Oct 2026): it sits on the box's ground like their
   role beside it, shades under the pointer, and is typed in or picked as before */
.ui-share-dialog .ui-share-person input[type="date"].ui-in { border-color: transparent; background: transparent; box-shadow: none; padding-left: 6px; padding-right: 4px; }
.ui-share-dialog .ui-share-person input[type="date"].ui-in:hover, .ui-share-dialog .ui-share-person input[type="date"].ui-in:focus { border-color: transparent; background: var(--ui-hover); outline: none; }
/* "Access ends" runs the full width of the Share box's form, its right edge under the Share button's (Tom, 6 Oct 2026) */
.ui-share-add > .ui-share-ends { grid-column: 1 / -1; }
/* who sees a comment (Tom, 6 Oct 2026). A comment is the team's own unless shared with the people from outside who are
   named on the deal memo. Staff see each one marked (.ui-comment-vis: Team only, or Shared in teal), can change it
   (.ui-comment-flip), and choose when writing with a tick that is off unless set (.ui-comments-share); while it is on,
   the box says who will read the comment (.ui-comments-warn) and takes the Shared colour. */
.ui-comment-vis { margin-left: 2px; }
.ui-comment.is-shared .ui-comment-vis { background: var(--ui-teal-tint, rgba(31, 185, 167, .14)); color: var(--accent); }
.ui-comment-flip { display: block; margin-top: 4px; padding: 0; font-size: 12.5px; }
.ui-comments-share { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); cursor: pointer; }
.ui-comments-share[hidden] { display: none; }
.ui-comments-foot .pb-derr { flex: 1 1 auto; }
.ui-comments-warn { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--accent); }
.ui-comments-form.is-sharing .ui-comment-editor { border-color: var(--accent); }
/* a guest's bell holds only comments: no "Needs you" list over them, so no line between */
.ui-notices.is-alone { margin-top: 0; padding-top: 0; border-top: 0; }
/* ---- a guest's Deal Memos page (Tom, 6 Oct 2026) ------------------------------------------
   Someone from outside, named on deal memos, has the same page as everyone else (the list, the side
   panel, the full page), holding only their memos, to read. The server decides what they are sent
   (app/memo_share.py); these rules only put away the controls that make or change things, and show
   a field as words to read: no box to type in, nothing to pick. */
.crm-widget[data-guest] :is(.crm-settings-btn, .post-action-add, .crm-bulk, .ui-tick-cell, .crm-layout .iv-btn:not(.is-active), .ui-record-mailbtn, .ui-rel-edit, .ui-tab-add) { display: none !important; }
/* a guest saves views of their own list, theirs alone (Tom, 6 Oct 2026): there is no "who sees it" to choose, and no pipeline */
.crm-widget[data-guest] :is(.ivt-menu-vis, .ivt-scope-field, .crm-view-dialog .ivt-vis, .crm-view-dialog .pb-dlabel:has(+ .ivt-vis),
  .crm-view-dialog .ui-choices[aria-label="View type"], .crm-view-dialog .pb-dlabel:has(+ .ui-choices[aria-label="View type"])) { display: none !important; }
.crm-widget[data-guest] .ui-record :is(.ui-in, .ui-record-title), body:has(.crm-widget[data-guest]) .ui-panel .ui-record-head .ui-record-title { cursor: default; }
.crm-widget[data-guest] .ui-record .ui-form .ui-in:is(:hover, :focus), body:has(.crm-widget[data-guest]) .ui-panel .ui-record .ui-form .ui-in:is(:hover, :focus) { background: transparent; border-color: transparent; outline: none; }
body:has(.crm-widget[data-guest]) :is(.ui-record, .ui-record-head) :is(.ui-pick-box, .ui-record-logo) { pointer-events: none; }
body:has(.crm-widget[data-guest]) :is(.ui-record, .ui-record-head) input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
/* ---- a record's full page: no bar over it (Tom, 5 Oct 2026) -------------------------------
   The breadcrumbs lead back to the list, so there is no "All ..." link over the record, and the
   page's buttons (the jump, Restore) sit at the right end of the breadcrumbs row in the header:
   crm.js moves them into .ui-crumb-acts, shown only while a full page is open. The record's name
   and its tabs rise to where the bar was. A page with no breadcrumbs keeps the bar. */
.ui-crumb-acts { display: none; }
body:has(.crm-widget.showing-page) .topnav > .crumbs { position: relative; }
body:has(.crm-widget.showing-page) .topnav > .crumbs > .ui-crumb-acts { display: flex; align-items: center; gap: 4px; position: absolute; right: 0; top: calc(50% - 1px); transform: translateY(-50%); }
body:has(.crm-widget.showing-page) .topnav > .crumbs ol { padding-right: 96px; }      /* a long trail stops short of the buttons */
.ui-crumb-acts .drawer-btn { height: 28px; margin: 0; color: rgba(255, 255, 255, .7); }
.ui-crumb-acts .drawer-btn:not(.ui-jump) { width: 28px; padding: 0; justify-content: center; }
.ui-crumb-acts .drawer-btn:hover, .ui-crumb-acts .drawer-btn:focus-visible { color: #fff; background: rgba(255, 255, 255, .10); }
body:has(.ui-crumb-acts) .crm-widget .ui-fullpage > .hiring-page-bar { display: none; }
.ui-memo-find { margin-top: 10px; }
.ui-memo-find-results .ui-find-row { display: flex; gap: 10px; align-items: baseline; width: 100%; padding: 7px 8px; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: var(--ui-r-sm); }
.ui-memo-find-results .ui-find-row:hover, .ui-memo-find-results .ui-find-row:focus-visible { background: var(--ui-hover); }
/* the email pane once the email has gone: a plain confirmation in the middle (Tom, 4 Oct 2026) */
.ui-mailpane-body[hidden] { display: none; }
.ui-mailpane-done { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px 32px 96px; text-align: center; }
.ui-mailpane-done[hidden] { display: none; }
.ui-mailpane-donetick { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 50%; background: var(--ui-teal-tint); color: var(--accent); }
.ui-mailpane-donetick svg { width: 26px; height: 26px; }
.ui-mailpane-done.is-waiting .ui-mailpane-donetick { background: var(--ui-fill); color: var(--text-muted); }
.ui-mailpane-donetitle { font-size: 18px; font-weight: 600; color: var(--text); }
.ui-mailpane-donesub { max-width: 380px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); overflow-wrap: anywhere; }
.ui-mailpane-doneacts { display: flex; gap: 10px; margin-top: 14px; }
/* the email pane's editor is rich text, with attachments under it (Tom, 4 Oct 2026) */
.ui-mailpane-tools { flex: none; margin: 2px 0 0; }
.ui-mailpane-body div.ui-mailpane-text { overflow-y: auto; min-height: 220px; white-space: normal; cursor: text; }
.ui-mailpane-body div.ui-mailpane-text:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.ui-mailpane-body div.ui-mailpane-text:focus { outline: none; border-color: var(--accent); }
.ui-mailpane-files { flex: none; margin-top: 10px; }
.ui-mailpane-files:empty { display: none; }
.ui-mailpane-body .ui-nc-actions .ui-mailpane-attach { margin-right: auto; cursor: pointer; }
/* the Calls tab: the + at the top right, the form and what is logged under it */
.ui-tabpanel[data-tab="calls"] .ui-calls { margin-top: 30px; }
.ui-tabpanel[data-tab="calls"] .ui-int-add { margin: 0 0 12px; }
.ui-tabpanel[data-tab="calls"] .ui-note { padding: 10px 0; border-top: 1px solid var(--ui-line); }
.ui-tabpanel[data-tab="calls"] .ui-note:first-of-type { border-top: 0; }
/* ---- full page: name over the left column, tabs over the right, one line between (4 Oct 2026) ---- */
.ui-record.has-headcol .ui-record-head { margin-bottom: 18px; }
.ui-record.has-headcol .ui-record-main { border-right-color: var(--ui-line); }      /* the thin light line, from the top */
.ui-record.has-headcol .ui-record-grid > .ui-tabs { margin-top: 2px; }              /* level with the name */
/* the paperclip sits at the right of an email's formatting row (Tom, 4 Oct 2026) */
.issue-desc-toolbar .ui-attach { margin-left: auto; cursor: pointer; }
.issue-desc-toolbar .ui-attach svg { width: 15px; height: 15px; }
.ui-mail-files { margin-top: 8px; }
.ui-mail-files:empty { display: none; }
/* an email's files in the Emails tab: the name opens one, the arrow downloads it */
.ui-mail-clip { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-size: 12px; color: var(--text-muted); }
.ui-mail-clip svg { width: 12px; height: 12px; }
.ui-mail-atts { margin-top: 10px; }
.ui-mail-att { cursor: default; padding-right: 4px; }
.ui-mail-att a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.ui-mail-attopen:hover .ui-file-name { text-decoration: underline; }
.ui-mail-attdown { margin-left: 6px; padding: 3px; border-radius: var(--ui-r-sm); color: var(--text-muted) !important; }
.ui-mail-attdown:hover { background: var(--ui-hover); color: var(--text) !important; }
.ui-mail-attdown svg { width: 14px; height: 14px; }
/* the icon of the record's kind (person, company, broker, deal), before its lettered tile */
.ui-record-kind { flex: none; display: inline-flex; align-items: center; color: var(--text-muted); margin-right: -4px; }
.ui-record-kind svg { width: 16px; height: 16px; }
.ui-panel .ui-panel-bar.is-aligned .ui-record-kind { color: rgba(255, 255, 255, .7); }
/* replying on the Emails tab (Tom, 4 Oct 2026): air between the subject line and the formatting row, and a taller box to write in */
.ui-mail-composer .issue-desc-toolbar { margin-top: 14px; margin-bottom: 6px; }
.ui-note-composer.ui-mail-composer .ui-mail-editor, .ui-note-composer.ui-mail-composer .ui-mail-editor:empty { min-height: 200px !important; }   /* 80% taller than a note's box (110px), which it otherwise inherits */
/* a reply sits under the email it answers: that email is marked, and the reply is set in from it */
.ui-mailrow.is-replying { box-shadow: inset 2px 0 0 var(--accent); }
.ui-mailrow.is-replying + .ui-mail-composer { margin: 0 0 6px; padding: 10px 0 14px 14px; border-left: 2px solid var(--accent); border-bottom: 1px solid var(--ui-line); }
/* ---- the jump between a deal memo and the CRM: where it goes, then the arrow (4 Oct 2026) ---- */
.drawer-btn.ui-jump, .ui-panel .ui-panel-bar.is-aligned .drawer-actions .drawer-btn.ui-jump { width: auto; padding: 0 6px; gap: 3px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.drawer-btn.ui-jump svg { width: 16px; height: 16px; flex: none; }
.drawer-btn.ui-jump svg + svg { width: 13px; height: 13px; }
.hiring-page-bar .drawer-btn.ui-jump { margin-left: auto; height: 32px; }
.hiring-page-bar .ui-jump + .ui-fullpage-collapse { margin-left: 0; }
/* the three dots under an open email, and the thread history they show (Tom, 4 Oct 2026) */
.ui-mail-dots { display: inline-flex; align-items: center; gap: 3px; height: 18px; margin-top: 10px; padding: 0 8px; border: 0; border-radius: var(--ui-r-pill); background: var(--ui-fill); cursor: pointer; }
.ui-mail-dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); }
.ui-mail-dots:hover, .ui-mail-dots[aria-expanded="true"] { background: var(--ui-selected); }
.ui-mail-history { margin-top: 10px; cursor: text; }
.ui-mail-history[hidden] { display: none; }
.ui-mail-quoted { padding-left: 12px; border-left: 2px solid var(--ui-line-head); font-size: 13px; line-height: 1.55; color: var(--text-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-mail-earlier + .ui-mail-earlier, .ui-mail-quoted + .ui-mail-earlier { margin-top: 12px; }
.ui-mail-earlier .ui-mail-meta { margin-bottom: 4px; }
/* Reply, Reply all, Forward on an email's row */
.ui-mail-acts { display: inline-flex; gap: 2px; flex: none; }
.ui-mail-acts .ui-iconbtn.is-sm { width: 26px; height: 26px; }
/* ---- a record on its full page: every divider runs edge to edge (Tom, 4 Oct 2026) -----------
   The line between the fields and the tabs goes from the header to the foot of the window, and
   each row's line goes from that line to the window's edge (or, at the left, from the menu's
   edge to that line). The page takes the whole white area, and what is in it is set in. */
@media (min-width: 901px) {
  .crm-widget.showing-page > .ui-fullpage {
    --pg: var(--content-pad-x, 28px); --split: 480px; --in: 24px;
    position: relative; margin: 0 calc(-1 * var(--pg)) -110px; min-height: calc(100vh - var(--head-h, 98px) - 26px);   /* out to the white area's edges (the page's own padding stays, the header leans on it) */
  }
  .crm-widget.showing-page > .ui-fullpage::before {
    content: ""; position: absolute; top: -26px; bottom: 0; left: calc(var(--pg) + var(--split)); border-left: 1px solid var(--ui-line-head); pointer-events: none;
  }
  .ui-fullpage > .hiring-page-bar { padding: 0 var(--pg); }
  .ui-fullpage .ui-record.is-page .ui-record-grid { grid-template-columns: calc(var(--pg) + var(--split)) minmax(0, 1fr); gap: 0; }
  .ui-fullpage .ui-record.is-page .ui-record-main { border-right: 0; padding: 0; }
  /* the left column: each block spans it, set in from the menu's edge and from the line */
  .ui-fullpage .ui-record.is-page .ui-record-main > :is(.ui-record-head, .ui-section),
  .ui-fullpage .ui-record.is-page .ui-record-main .ui-record-foot .ui-field-actions { padding-left: var(--pg); padding-right: var(--in); margin-left: 0; margin-right: 0; }
  .ui-fullpage .ui-record.is-page .ui-record-main > .ui-section + .ui-section,
  .ui-fullpage .ui-record.is-page .ui-record-main .ui-record-foot .ui-field-actions { border-top: 1px solid var(--ui-line); }
  /* the right column: the tabs are set in; each row spans it, with its own inset */
  .ui-fullpage .ui-record.is-page .ui-tabs { margin: 0 var(--pg) 0 var(--in); width: auto; }
  .ui-fullpage .ui-record.is-page .ui-tabpanel:not(.ui-record-main) > .ui-section { padding-left: 0; padding-right: 0; }
  .ui-fullpage .ui-record.is-page .ui-tabpanel:not(.ui-record-main) :is(.ui-rellist > .ui-relrow, .ui-list > .ui-item) { margin-left: 0; margin-right: 0; padding-left: var(--in) !important; padding-right: var(--pg) !important; }
  .ui-fullpage .ui-record.is-page .ui-tabpanel:not(.ui-record-main) :is(.ui-find, .ui-int-add, .ui-calls, .ui-list > .issue-empty, .ui-rellist > .issue-empty, .ui-section > .issue-empty, .ui-list > .ui-note-composer) { margin-left: var(--in); margin-right: var(--pg); }
  .ui-fullpage .ui-record.is-page .ui-tabpanel:not(.ui-record-main) .ui-list > .ui-mail-composer { padding-left: 0; }
  .ui-fullpage .ui-record.is-page .ui-tabpanel:not(.ui-record-main) > .ui-section > .ui-rel-head { right: var(--pg); }
  .ui-fullpage .ui-record.is-page .ui-tabpanel:not(.ui-record-main) :is(.ui-list, .ui-rellist) > :last-child:not(.issue-empty) { border-bottom: 1px solid var(--ui-line); }
}
/* the Done box in the Tasks list keeps its gap before the task's name (the site-wide checkbox sets no margin) */
input[type="checkbox"].ui-list-tick:not([role="switch"]):not(:is(.rec-toggle, .if-done-toggle) *) { margin: 0 9px 0 0; vertical-align: -2px; }
/* ---- ui-mention: a person tagged in a note (Tom, 4 Oct 2026) --------------------------------
   <a class="ui-mention" href="mention:email">@Name</a>  drawn as a tag, never followed as a link.
   .ui-mention-menu is the list of people offered when @ is typed. */
.ui-mention, .ui-rich a.ui-mention { display: inline; padding: 1px 6px; border-radius: var(--ui-r-pill); background: var(--ui-teal-tint); color: var(--accent); font-weight: 500; text-decoration: none; white-space: nowrap; pointer-events: none; cursor: default; }
.ui-mention-menu { position: fixed; z-index: 400; min-width: 220px; max-width: 320px; padding: 4px; border: 1px solid var(--panel-border, var(--border)); border-radius: 10px; background: var(--panel, var(--surface)); box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.ui-mention-menu[hidden] { display: none; }
.ui-mention-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--ui-r-sm); background: none; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.ui-mention-opt:hover, .ui-mention-opt.is-on { background: var(--ui-hover); }
.ui-mention-opt .achip-av { flex: none; }

/* ui-btn-outline.is-sm: the outlined button at the size of a line of text, for an action that sits
   in a row beside what it acts on (Add to contacts on an email, Tom 5 Oct 2026) */
.ui-btn-outline.is-sm { height: 24px; padding: 0 9px; gap: 5px; font-size: 12.5px; align-self: center; }
.ui-btn-outline.is-sm svg { width: 13px; height: 13px; }
.ui-btn-outline:disabled { opacity: .5; cursor: default; }

/* ---- ui-tickmenu: a button that drops a tick list (Tom, 12 Oct 2026) -----------------------
   The agents picker's shape (ui-set-agent); the name keeps clear of ui-pick, which is the CRM's picker without the faces: the button reads what is
   ticked, the menu is a house .ui-menu of label + checkbox. The boxes are real form inputs,
   so the form around it saves them; the menu only hides them until they are wanted. */
.ui-tickmenu { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.ui-tickmenu-btn { display: inline-flex; align-items: center; gap: 8px; width: auto; min-width: 120px; max-width: 100%;
  cursor: pointer; text-align: left; }
.ui-tickmenu-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-tickmenu-none { color: var(--text-muted); }
.ui-tickmenu-caret { width: 14px; height: 14px; flex: none; margin-left: auto; }
.ui-tickmenu-menu { position: absolute; left: 0; top: calc(100% + 6px); min-width: 240px; max-height: 340px;
  overflow-y: auto; gap: 2px; z-index: 40; }
.ui-tickmenu-row { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 7px 8px; border-radius: 8px; }
.ui-tickmenu-row:hover { background: var(--hover, rgba(0, 0, 0, 0.05)); }
.ui-tickmenu-row input { margin-left: auto; }
.ui-tickmenu-name { font-size: 13.5px; flex: 1 1 auto; }   /* the tick sits at the right edge: the global checkbox rule pins its margins */
.ui-tickmenu-note { font-size: 11.5px; color: var(--text-muted); padding: 6px 8px 2px; }

/* ---- ui-set-agent: "Allow agents to access my emails" under a mailbox in My settings
   (Tom, 12 Oct 2026, style of the email page's agents picker). The summary line shows only
   the ticked agents' avatars; the button drops a house .ui-menu of avatar + name + tick. */
.ui-set-agent-access { margin-top: 6px; position: relative; display: flex; align-items: center; gap: 8px; }
.ui-set-agent-label { font-size: 13px; }
.ui-set-agent-btn { display: inline-flex; align-items: center; gap: 6px; width: auto; min-width: 64px; cursor: pointer; }
.ui-set-agent-none { color: var(--muted, var(--text-2)); }
.ui-set-agent-chip img, .ui-set-agent-av img { display: block; width: 100%; height: 100%; }
.ui-set-agent-chip { width: 20px; height: 20px; border-radius: 50%; overflow: hidden; display: inline-block; vertical-align: middle; }
.ui-set-agent-caret { width: 14px; height: 14px; }
.ui-set-agent-menu { position: absolute; left: 0; top: calc(100% + 6px); min-width: 230px; gap: 2px; }
.ui-set-agent-row { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 7px 8px; border-radius: 8px; }
.ui-set-agent-row:hover { background: var(--hover, rgba(0, 0, 0, 0.05)); }
.ui-set-agent-row input { margin-left: auto; }
.ui-set-agent-av { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex: none; }
.ui-set-agent-name { font-size: 13.5px; font-weight: 600; }
.ui-set-agent-note { font-size: 11.5px; color: var(--muted, var(--text-2)); padding: 6px 8px 2px; }