/* tool-dashboard v0.1 — minimal, readable, system fonts.
   No CSS framework. Bump to Tailwind/etc. when there's a real design pass. */

:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --border: #e3e6ec;
  --text: #1a1a1a;
  --text-muted: #6b7280;
  --accent: #3b82f6;
  --pos: #0F9A57;                   /* functional positive — light-mode variant */
  --neg: #CE2F48;                   /* functional negative — light-mode variant */
  --spark: #0F9A57;
  --pos-tint: rgba(15, 154, 87, 0.14);   /* pill tint behind an up change */
  --neg-tint: rgba(206, 47, 72, 0.14);   /* pill tint behind a down change */
  --spark-line: #64748b;                 /* neutral sparkline line (visible on white) */
  --spark-fill: rgba(100, 116, 139, 0.16); /* neutral grey shading */
  --error-bg: #fef2f2;
  --error-border: #fca5a5;
  color-scheme: light;
}

* { box-sizing: border-box; }

/* Anything clickable shows the hand (Tom, 24 Sep 2026). Keyed on the signals that
   actually mean "this does something when clicked" rather than on each component,
   so new controls get it for free. Sits early in the file on purpose: a component
   that needs a different cursor (e.g. .rb-btn:disabled { cursor: progress }) still
   wins on source order. Disabled things are excluded — they must not look live. */
button:not(:disabled):not([aria-disabled="true"]),
[role="button"]:not([aria-disabled="true"]),
[role="tab"]:not([aria-disabled="true"]),
[role="menuitem"],
[onclick],
summary,
label[for],
a[href] {
  cursor: pointer;
}
button:disabled, [aria-disabled="true"] { cursor: default; }

/* ===========================================================================
   The house floating-panel system (Tom, 24 Sep 2026: "make the whole site
   consistent"). Everything that floats over the page — a modal, a popover, a
   menu — is the same solid panel on the same scrim, so the site reads as one
   thing rather than five. Before this the site had five: #16171b (report
   dialog, KB, layout editor, query editor), #17171d (confirm), #1d1e23 (engine
   menu), #1e1f24 (routine modal, nav menus) and var(--bg) (sign modal), on four
   different scrims at three different radii.

   Dark is the default skin, as everywhere else in this file, and body.light
   restates it — NOT :root light + a dark override, which would flip every page
   that has no theme set.

   NOT the right-hand .drawer (its dark glass is deliberate, Tom 11 Sep 2026),
   NOT the Astra sheet (its rim and glow are her identity), and NOT the report
   canvas or an artifact's chart surface (#16171b there is a PAGE, matched to
   the printed report, not chrome).
   =========================================================================== */
:root {
  --panel: #1e1f24;                              /* a solid floating panel */
  --panel-border: rgba(220, 227, 228, 0.16);
  --panel-inset: rgba(127, 127, 127, 0.10);      /* the quiet band fields sit on inside a modal */
  --panel-radius: 16px;                          /* modals */
  --panel-radius-sm: 12px;                       /* popovers and menus */
  --panel-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --panel-shadow-sm: 0 12px 32px rgba(0, 0, 0, 0.32);
  --scrim: rgba(6, 8, 12, 0.55);
}
body.light {
  --panel: #ffffff;
  --panel-border: var(--border);
  --panel-inset: #f4f5f7;
  --panel-shadow: 0 24px 60px rgba(10, 18, 26, 0.20);
  --panel-shadow-sm: 0 12px 32px rgba(10, 18, 26, 0.14);
  --scrim: rgba(14, 20, 26, 0.36);
}

/* Each panel below points at these tokens in its own rule rather than being
   overridden from here, so a component still reads as one block of CSS. */

body {
  margin: 0;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
}

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.topbar-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 10px 20px;
  display: flex; align-items: center; gap: 16px;
}
.brand { font-weight: 600; text-decoration: none; color: var(--text); font-size: 15px; }
.topbar-nav { flex: 1; display: flex; gap: 12px; }
.crumb { color: var(--text-muted); text-decoration: none; font-size: 13px; }
.crumb:hover { color: var(--text); }
.logout { margin: 0; }
.btn-link { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 13px; }
.btn-link:hover { color: var(--text); }

.container { max-width: 1400px; margin: 0 auto; padding: 24px 20px; }
.dash-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 18px; }
.dash-head h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.muted { color: var(--text-muted); font-size: 13px; }

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 12), 1fr);
  grid-auto-rows: var(--row-h, 80px);
  gap: 14px;
}
.cell { min-width: 0; scroll-margin-top: 24px; }  /* keep anchored sections clear of the top edge */

/* Section tabs (single-column stacks) flow with content-height rows, so cards are
   evenly spaced by the grid gap rather than left-over space in fixed-height cells. */
.grid-flow { grid-auto-rows: min-content; }
.grid-flow .cell { grid-column: 1 / -1 !important; grid-row: auto !important; }

.widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px 24px;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.widget-error {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: #7f1d1d;
}
.widget-error-title { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.widget-error-detail { font-size: 12px; white-space: pre-wrap; margin: 0; font-family: "SF Mono", Menlo, monospace; }

.metric-title { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.metric-value { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; }

/* Change-vs-comparison indicator: a rounded pill with a slight tinted background
   (green up / red down). Text is BODY style: 14 / 350 / 1.6. */
.metric-compare {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 350;
  line-height: 1.6;
}
/* The tinted pill wraps ONLY the arrow + change amount; the caption sits outside. */
.metric-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
}
.metric-arrow { font-size: 11px; line-height: 1; align-self: center; }
.metric-change { font-weight: 350; }
.metric-compare.pos .metric-chip { background: var(--pos-tint); color: var(--spark); }
.metric-compare.neg .metric-chip { background: var(--neg-tint); color: var(--neg); }
.metric-compare-label { color: var(--text-muted); }

/* 12-month area sparkline under the change row: neutral white line + grey shading. */
.metric-spark { display: block; width: 100%; height: 36px; margin-top: 10px; overflow: visible; }
.metric-spark .spark-line {
  fill: none;
  stroke: var(--spark-line);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.metric-spark .spark-area { stroke: none; fill: var(--spark-fill); }

/* Full-width chart card (e.g. cashflow forecast). */
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.chart-end { display: flex; flex-direction: column; text-align: right; }
.chart-end-label { font-size: 12px; color: var(--text-muted); }
.chart-end-value { font-size: 24px; font-weight: 300; letter-spacing: -0.01em; }
.chart-svg { display: block; width: 100%; height: 200px; overflow: visible; }
.chart-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-divider { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: 0.7; }
.chart-area { stroke: none; }
.chart-area.actual { fill: var(--spark-fill); }
.chart-area.forecast { fill: var(--spark-fill); opacity: 0.5; }
.chart-line { fill: none; stroke: var(--spark-line); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-line.forecast { stroke-dasharray: 4 3; opacity: 0.85; }
.chart-months { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--text-muted); }

/* Info items read as cards with the same chrome as the board-meeting rows:
   surface fill, hairline border, and a mauve accent bar (tying to the
   section-title colour) so multiple bits of information read as separate blocks. */
.info-card {
  height: auto;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid #9A8C98;
  border-radius: 10px;
  padding: 18px 20px 18px 17px;
}
.info-card .metric-title { margin-bottom: 5px; }
.info-body { font-size: 14px; line-height: 1.6; color: var(--text-muted); }   /* menu/body size */
.info-body p { margin: 0 0 6px; }
.info-body p:last-child { margin-bottom: 0; }
.info-body a { color: var(--accent); text-decoration: none; }
.info-body a:hover { text-decoration: underline; }
.info-body ul { margin: 0; padding-left: 18px; }
.info-body li { margin: 3px 0; }

/* Editable Useful Information — registered-office field. */
.info-field-form { margin: 0; }
.info-field-input {
  font: inherit; font-size: 14px; width: 100%; line-height: 1.5; resize: vertical;
  color: var(--text); background: rgba(244, 247, 247, 0.05);
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px;
}
.info-field-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Custom Useful-Information cards — each is its own card (title + text + Save inside);
   the edit fields use the same font as the saved display. The widget is a plain
   wrapper; each .uinfo-card is the framed box (mauve bar like the other cards). */
.info-cards { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0; height: auto; overflow: visible; }
.uinfo-list { display: flex; flex-direction: column; gap: 14px; }
.uinfo-card { padding-top: 6px; padding-bottom: 6px; }
.uinfo-card-icons { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; margin-left: auto; }
.uinfo-card-icons .attendees-edit-toggle,
.uinfo-card-icons .uinfo-delete {
  width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
}
.uinfo-card-icons svg { width: 15px; height: 15px; }
/* Each card shows read-only (eyebrow title + text + pencil) until you edit it. */
.uinfo-form { display: none; margin: 6px 0 0; flex-direction: column; gap: 6px; }
.uinfo-card.editing .uinfo-form { display: flex; }
.uinfo-card.editing .uinfo-readonly { display: none; }
.uinfo-card.editing .cc-title-row .metric-title { display: none; }
/* Title input matches the eyebrow it displays as when saved. */
.uinfo-title {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text); line-height: 1.5;
}
.uinfo-body { font-size: 14px; font-weight: 350; line-height: 1.6; color: var(--text-muted); resize: vertical; }
.uinfo-title, .uinfo-body {
  width: 100%; min-width: 0; font-family: inherit;
  background: rgba(244, 247, 247, 0.05); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 8px;
}
.uinfo-title:focus, .uinfo-body:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.uinfo-title:focus, .uinfo-body:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.uinfo-title-display { margin-bottom: 4px; }
.uinfo-delete {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; background: transparent; border: 0;
  color: var(--text-muted); cursor: pointer; border-radius: 5px;
}
.uinfo-delete svg { width: 15px; height: 15px; }
.uinfo-delete:hover { color: #e5687a; background: rgba(127, 127, 127, 0.12); }
.uinfo-actions { display: flex; }
.uinfo-add {
  margin-top: 14px; font: inherit; font-size: 13px; padding: 5px 12px;
  color: var(--accent); background: transparent; border: 1px dashed var(--border);
  border-radius: 6px; cursor: pointer;
}
.uinfo-add:hover { border-color: var(--accent); background: rgba(31, 185, 167, 0.08); }

/* Next board meeting — headline date + inline edit. */
.next-meeting { text-align: left; height: auto; background: transparent; border: 0; border-left: 3px solid #9A8C98; border-radius: 0; box-shadow: none; padding: 18px 20px 18px 17px; }
.next-meeting .metric-title { margin-bottom: 5px; }
.next-meeting-row { display: flex; align-items: center; gap: 8px; position: relative; }
.next-meeting-date { font-size: 24px; font-weight: 350; color: var(--text); }
.nm-edit { line-height: 0; }
.nm-edit-toggle { list-style: none; display: inline-flex; cursor: pointer; color: var(--text-muted); padding: 3px; border-radius: 6px; }
.nm-edit-toggle::-webkit-details-marker { display: none; }
.nm-edit-toggle:hover { color: var(--text); background: rgba(127, 127, 127, 0.14); }
.nm-edit-toggle svg { width: 15px; height: 15px; }
.nm-edit-form { position: absolute; top: 100%; left: 0; margin-top: 8px; z-index: 20; }
.nm-input, .agenda-date-input {
  font: inherit; font-size: 14px;
  padding: 6px 8px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color-scheme: dark;
}
.agenda-date-form { margin: 0; }

/* Date + 15-min time picker (native datetime-local ignores step in its minute list). */
.date-edit { position: relative; display: inline-flex; align-items: center; }
.dt-form, .date-edit-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; flex-wrap: wrap; }
.date-edit-form { display: none; margin-left: 6px; }
.date-edit.open .date-edit-form { display: inline-flex; }
.dt-date, .dt-time, .dt-duration {
  font: inherit; font-size: 13px; padding: 4px 6px;
  color: var(--text); background: rgba(244, 247, 247, 0.05);
  border: 1px solid var(--border); border-radius: 6px; color-scheme: dark;
}
/* Selects get a clean custom caret (matching status/type tags) instead of the
   native arrow, which otherwise overlaps the longer "1.5 hours" duration text. */
select.dt-time, select.dt-duration {
  -webkit-appearance: none; appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239aa7ab' stroke-width='3' 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 8px center;
}
.dt-date:focus, .dt-time:focus, .dt-duration:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
/* Board meeting date picker (.dtp): a compact box ("Select date" / "Wed 14 Oct
   2026, 10:00 · 1 hour") opening a pop-up with a month calendar and Time /
   Length at the bottom (Tom, 11 Sep 2026). */
.dtp { position: relative; display: inline-block; }
.date-field { display: inline-flex; align-items: center; gap: 6px; min-width: 9.5em; padding-right: 10px; cursor: pointer; text-align: left; }
.date-field-icon { width: 14px; height: 14px; flex: none; opacity: 0.7; }
.date-field-text { white-space: nowrap; }
.date-field.is-empty .date-field-text { color: var(--text-muted); }
.dtp-pop {
  position: fixed; z-index: 90; width: 272px; padding: 12px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
}
.dtp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dtp-title { font-weight: 600; font-size: 14px; }
.dtp-nav {
  width: 28px; height: 28px; border-radius: 6px; border: 0; background: none;
  color: var(--text); font-size: 18px; line-height: 1; cursor: pointer;
}
.dtp-nav:hover { background: rgba(127, 127, 127, 0.14); }
.dtp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dtp-dow { text-align: center; font-size: 11px; color: var(--text-muted); padding: 4px 0; }
.dtp-day {
  height: 32px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--text);
}
.dtp-day:hover { background: rgba(127, 127, 127, 0.14); }
.dtp-day.is-other { color: var(--text-muted); opacity: 0.55; }
.dtp-day.is-today { box-shadow: inset 0 0 0 1px #17998a; }
.dtp-day.is-chosen, .dtp-day.is-chosen:hover { background: #17998a; color: #fff; font-weight: 600; }
.dtp-foot {
  display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}
.dtp-field { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--text-muted); }
.dtp-done { margin-left: auto; }

/* Next-meeting row: date + time + length picker, with a Send-to-Ellie button. */
.next-meeting-controls { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.send-form { margin: 0; }
/* Action buttons (Send invite / Generate Minutes / Circulate Minutes): solid
   accent while the action is still to do (same look as Join Meeting), dropping
   to the outline style once clicked/done. */
.send-btn {
  font: inherit; font-size: 13px; font-weight: 500; padding: 5px 14px;
  color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 6px;
  cursor: pointer; white-space: nowrap;
}
.send-btn:hover { filter: brightness(1.06); }
.send-btn:disabled { background: transparent; color: var(--accent); cursor: default; filter: none; }
/* The "no one to invite yet" disabled state (carries a title) reads as inactive grey,
   distinct from the outlined "Invite Sent ✓" disabled state. */
.send-btn:disabled[title] { background: rgba(127, 127, 127, 0.14); color: var(--text-muted); border-color: var(--border); cursor: not-allowed; }
.send-hint { font-size: 12px; color: var(--text-muted); }
body.theme-slate .next-meeting { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Board-meeting agenda — a document rendered on the background (no card box). */
.agenda { text-align: left; height: auto; background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0; }
.agenda .metric-title { margin-bottom: 12px; }
.agenda-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; margin: 0 0 16px; }
.agenda-meta > div { display: flex; gap: 8px; font-size: 14px; line-height: 1.5; }
.agenda-meta dt { flex: 0 0 88px; color: var(--text-muted); }
.agenda-meta dd { margin: 0; color: var(--text); }
/* The rounded outer border lives on the WRAPPER, not the table, so the table can
   use border-collapse: collapse. Collapsed borders are painted on the table's
   grid lines (full row height) instead of around each cell's own box — a short
   cell like the # column no longer has to stretch for its right-hand border to
   show, which is what dropped the vertical rule beside the numbering in WebKit. */
.agenda-table-wrap { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.agenda-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.agenda-table th, .agenda-table td { border: 0; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: middle; }
.agenda-table th:last-child, .agenda-table td:last-child { border-right: 0; }
.agenda-table tbody tr:last-child td { border-bottom: 0; }
.agenda-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 600; }
.agenda-table td { color: var(--text-muted); }
/* Min row height lives on the tr, NOT the td: with a td height, Chrome sizes a
   short cell (the # column) to its own height instead of the row's, so its
   bottom border floats mid-row / vanishes on rows with tall content. */
/* Every agenda row the same height, content centred (Tom, 11 Sep 2026): enough
   for a two-line notes box, the tallest thing an ordinary row holds. */
.agenda-table tbody tr { height: 70px; }
.agenda-table td:first-child { width: 30px; text-align: center; }
/* The "#" heading centred over the numbers (no tracking, which would nudge it left). */
.agenda-table th:first-child { text-align: center; letter-spacing: 0; }
.agenda-table td.agenda-item-name { color: var(--text); }
/* Item name with its description underneath in smaller text (no separate
   Description column, Tom 11 Sep 2026). */
.agenda-item-title { color: var(--text); font-weight: 350; overflow-wrap: anywhere; }   /* wraps: the full name always shows (Tom, 14 Sep 2026) */
.agenda-item-desc { margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }
/* Item column only as wide as the longest item name (Tom, 11 Sep 2026): the cell
   asks for 1% and the name never wraps, while the description takes no width of
   its own (width 0, stretched back to the cell) and wraps underneath. Notes gets
   the rest of the table. */
/* Item and Notes equal width (Tom, 14 Sep 2026): fixed layout, # and Done
   keep their set widths and the two auto columns share the rest evenly. */
.agenda-table { table-layout: fixed; }
.agenda-table th:first-child { width: 30px; }
.agenda-item-textarea { display: block; box-sizing: border-box; resize: none; overflow: hidden; line-height: 1.4; min-height: 0; }
/* Company agenda items: one sub-row per item, indented under its parent row,
   each with its own notes (Tom, 11 Sep 2026). */
.agenda-table tbody tr.agenda-subrow { height: 70px; }
/* Row 8 (Company agenda items): one cell across Item and Notes, with
   "+ Add agenda item" right beside the name (Tom, 11 Sep 2026). */
.agenda-merged-inner { display: flex; align-items: center; gap: 14px; }
/* The items' (empty) save form takes no room, so the name and the button share
   one centre line; inputs still post through it via form="…". */
.agenda-merged form.agenda-items-form { display: none; }
.agenda-merged .agenda-item-add { margin: 0; }
.agenda-merged-text { flex: none; }
.agenda-merged-action { flex: none; }
.agenda-table tr.agenda-item-row { display: table-row; }   /* not the flex row the old list used */
.agenda-subitem { padding-left: 22px !important; }
.agenda-subitem-line { display: flex; align-items: center; gap: 6px; }
.agenda-subitem-line .agenda-item-input { flex: 1; min-width: 0; }
.agenda-subitem .agenda-item-marker { color: var(--text-muted); }
.agenda-subitem-text { color: var(--text); }
/* Done column: tick a row to mark the agenda item complete; the row turns light green. */
.agenda-table th.agenda-done-col { width: 56px; text-align: center; }
.agenda-table td.agenda-done-cell { width: 56px; text-align: center; }
.agenda-done-form { margin: 0; display: inline-flex; }
.agenda-done-box { width: 18px; height: 18px; accent-color: #17998a; cursor: pointer; margin: 0; }
.agenda-done-tick { color: #17998a; font-weight: 700; }
.agenda-table tbody tr.is-done > td,
body.theme-slate.light .agenda-table tbody tr.is-done > td { background-color: #e7f6ef; }
body.theme-slate:not(.light) .agenda-table tbody tr.is-done > td { background-color: rgba(32, 193, 122, 0.14); }   /* a little room beyond the longest name */
.agenda-table td.agenda-item-name .agenda-item-desc { width: 0; min-width: 100%; }
.agenda-item-desc .agenda-items-form { margin-top: 4px; }
.agenda-note-item { display: block; }
.note-form { margin: 0; }
.note-input {
  font: inherit; font-size: 14px; padding: 5px 7px; width: 100%;
  color: var(--text); background: rgba(244, 247, 247, 0.05);
  border: 1px solid var(--border); border-radius: 6px;
}
.note-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
/* Multi-line agenda notes (declarations of interest, matters for board approval). */
.note-textarea { display: block; resize: vertical; min-height: 2.6em; line-height: 1.45; }
.note-yesno { width: auto; min-width: 7.5em; }
.note-text { white-space: pre-wrap; }
/* A No / Yes switch with its notes box to the right, shown only at Yes. */
.yesno-cell { display: flex; align-items: center; gap: 16px; }
.yesno-cell .rec-toggle-form { flex: none; }
.yesno-cell .yesno-notes { flex: 1; min-width: 0; }
.yesno-notes-text { display: block; margin-top: 4px; }
/* Agenda item 1 (recording confirmed) and item 2 (chairman). */
.rec-confirmed { color: #17998a; font-weight: 600; }
/* No / Yes switch: grey at No, teal green at Yes. */
.rec-toggle-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.rec-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rec-toggle-track {
  position: relative; width: 42px; height: 24px; border-radius: 999px;
  background: rgba(127, 127, 127, 0.35); transition: background 0.15s ease;
}
.rec-toggle-knob {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.15s ease;
}
.rec-toggle input:checked ~ .rec-toggle-track { background: #17998a; }
.rec-toggle input:checked ~ .rec-toggle-track .rec-toggle-knob { transform: translateX(18px); }
.rec-toggle input:focus-visible ~ .rec-toggle-track { outline: 2px solid #17998a; outline-offset: 2px; }
.rec-toggle input:disabled ~ .rec-toggle-track { opacity: 0.6; }
/* "No" to the left, "Yes" to the right; the current side is bold, the other faint. */
.rec-opt { font-size: 13px; color: var(--text-muted); opacity: 0.55; transition: color 0.15s ease, opacity 0.15s ease; }
.rec-toggle input:not(:checked) ~ .rec-opt-no { color: var(--text); opacity: 1; font-weight: 600; }
.rec-toggle input:checked ~ .rec-opt-yes { color: #17998a; opacity: 1; font-weight: 600; }
.rec-toggle-when { font-size: 12px; color: var(--text-muted); }
.note-chair { width: auto; min-width: 12em; }
.agenda-note-item + .agenda-note-item { margin-top: 3px; }

/* Company agenda items — editable add/remove-rows editor. */
.agenda-items-form { margin: 0; }
.agenda-desc-placeholder { margin-bottom: 6px; }
.agenda-items-rows { display: flex; flex-direction: column; gap: 5px; }
.agenda-item-row { display: flex; align-items: center; gap: 7px; }
.agenda-item-drag, .subtask-drag {
  flex: 0 0 auto; color: var(--text-muted); cursor: grab;
  font-size: 12px; line-height: 1; letter-spacing: -2px; padding: 3px 2px;
  border-radius: 4px; user-select: none; -webkit-user-select: none;
}
.agenda-item-drag:hover, .subtask-drag:hover { color: var(--text); background: rgba(127, 127, 127, 0.12); }
.agenda-item-drag:active, .subtask-drag:active { cursor: grabbing; }
.agenda-item-row.dragging, .subtask-row.dragging { opacity: 0.45; }
.agenda-item-marker { flex: 0 0 auto; color: var(--text-muted); font-size: 14px; width: 20px; }
.agenda-item-input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 14px; padding: 5px 7px;
  color: var(--text); background: rgba(244, 247, 247, 0.05);
  border: 1px solid var(--border); border-radius: 6px;
}
.agenda-item-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.agenda-item-remove {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; font-size: 16px; line-height: 1;
  background: transparent; border: 0; color: var(--text-muted); cursor: pointer; border-radius: 5px;
}
.agenda-item-remove:hover { color: #e5687a; background: rgba(127, 127, 127, 0.12); }
.agenda-item-add {
  margin-top: 7px; font: inherit; font-size: 13px; padding: 4px 10px;
  color: var(--accent); background: transparent; border: 1px dashed var(--border);
  border-radius: 6px; cursor: pointer;
}
.agenda-item-add:hover { border-color: var(--accent); background: rgba(31, 185, 167, 0.08); }

/* Post-meeting action items editor. */
.post-actions-form { margin: 0; }
.post-actions-hint { margin: 0 0 8px; }
/* The rows editor is a table now (see .actions-table) — these rows are <tr>,
   so they must NOT be given a display of their own. Ticked rows grey out. */
.action-row.is-done .post-action-input,
.action-row.is-done .assignee-trigger { color: var(--text-muted); opacity: 0.6; }
.post-row-tick { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
.post-row-tick:disabled { cursor: default; opacity: 0.4; }
.post-action-input {
  flex: 0 1 clamp(180px, 52%, 440px); min-width: 0; font: inherit; font-size: 14px; padding: 6px 8px;
  color: var(--text); background: rgba(244, 247, 247, 0.05);
  border: 1px solid var(--border); border-radius: 6px;
}
.post-action-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
/* Custom assignee dropdown — a trigger box with a menu anchored directly beneath it. */
.assignee-field { position: relative; flex: 0 0 190px; min-width: 0; }
.assignee-trigger {
  width: 100%; display: inline-flex; align-items: center; justify-content: space-between; gap: 6px;
  font: inherit; font-size: 14px; padding: 6px 8px; text-align: left; cursor: pointer;
  color: var(--text); background: rgba(244, 247, 247, 0.05);
  border: 1px solid var(--border); border-radius: 6px;
}
.assignee-trigger .assignee-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignee-trigger.is-empty .assignee-label { color: var(--text-muted); }
.assignee-caret {
  flex: 0 0 auto; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--text-muted);
}
.assignee-menu {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0;
  min-width: 100%; width: max-content; max-width: 260px; padding: 4px;
  background: #171d1d; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.assignee-options { list-style: none; margin: 0; padding: 0; max-height: 200px; overflow-y: auto; }
.assignee-option {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 14px;
  padding: 6px 8px; background: transparent; border: 0; color: var(--text); cursor: pointer; border-radius: 5px;
}
.assignee-option:hover { background: rgba(127, 127, 127, 0.16); }
.assignee-add { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
.assignee-add-toggle {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 13px;
  padding: 6px 8px; background: transparent; border: 0; color: var(--accent); cursor: pointer; border-radius: 5px;
}
.assignee-add-toggle:hover { background: rgba(31, 185, 167, 0.10); }
.assignee-add-form { display: flex; flex-direction: column; gap: 5px; padding: 6px 8px 4px; }
.assignee-add-form[hidden] { display: none; }   /* [hidden] alone loses to the display:flex above */
.assignee-add-form input {
  font: inherit; font-size: 14px; padding: 5px 7px; color: var(--text);
  background: rgba(244, 247, 247, 0.05); border: 1px solid var(--border); border-radius: 5px;
}
.assignee-add-form input::placeholder { color: var(--text-muted); }
.assignee-add-save {
  align-self: flex-start; font: inherit; font-size: 13px; padding: 4px 12px; cursor: pointer;
  color: #06231f; background: var(--accent); border: 0; border-radius: 5px;
}
@media (max-width: 620px) { .assignee-field { flex-basis: 150px; } }
.post-action-remove {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; font-size: 16px; line-height: 1;
  background: transparent; border: 0; color: var(--text-muted); cursor: pointer; border-radius: 5px;
}
.post-action-remove:hover { color: #e5687a; background: rgba(127, 127, 127, 0.12); }
/* The house "new" button: solid teal since 28 Sep 2026 (was outlined, 24 Sep).
   One style for every add/new action — + New role, + New playbook, + Add issue,
   + Create routine, + Create board meeting, + New workflow, + Add person. */
.post-action-add {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 7px;
  height: 34px; box-sizing: border-box; padding: 0 12px;
  font: inherit; font-size: 14px; font-weight: 500;
  color: #fff; background: var(--accent); border: 1px solid var(--accent);
  border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.post-action-add:hover { border-color: var(--accent); background: var(--accent); filter: brightness(0.93); }
.agenda-actions-title { margin: 18px 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 600; }
.agenda-actions { margin: 0; padding-left: 18px; color: var(--text-muted); font-size: 14px; }
.action-done-tick { color: var(--spark); }

/* Checkable previous-meeting action items. */
.actions-form { margin: 0; }
.action-check { display: flex; align-items: flex-start; gap: 9px; padding: 4px 0; font-size: 14px; color: var(--text-muted); cursor: pointer; }
.action-check input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex: 0 0 auto; }
/* Rows someone else owns, shown to a company-side viewer: visible tick state,
   but not theirs to change (the /actions endpoint enforces the same rule). */
.action-check.is-locked { cursor: default; }
.action-check.is-locked input { cursor: default; opacity: 0.45; }
.action-delete {
  flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; font-size: 14px; line-height: 1;
  background: transparent; border: 0; color: var(--text-muted); cursor: pointer; border-radius: 5px;
  opacity: 0; transition: opacity 0.12s;
}
.action-check:hover .action-delete, .action-delete:focus-visible { opacity: 1; }
.action-delete:hover { color: #e5687a; background: rgba(127, 127, 127, 0.12); }
/* Reassign picker — the owner is already named by the group heading, so this
   stays out of the way until the row is hovered or focused (like the × above). */
.action-assign {
  flex: 0 0 auto; margin-left: auto; max-width: 170px;
  font: inherit; font-size: 12.5px; padding: 1px 6px;
  color: var(--text-muted); background: transparent;
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
  opacity: 0; transition: opacity 0.12s;
}
.action-check:hover .action-assign, .action-assign:focus-visible, .action-assign:focus { opacity: 1; }
.action-assign:hover { color: var(--text); border-color: var(--accent); }
.action-assign:disabled { cursor: progress; opacity: 0.5; }
.action-assign option { color: var(--text); background: var(--card); }
/* In the read-only closed-meeting lists the rows are <li>, not flex labels. */
.agenda-actions li .action-assign { margin-left: 8px; vertical-align: middle; }
.agenda-actions li:hover .action-assign { opacity: 1; }
/* Action items as a table — same shape as the Issues List table, so the two
   tabs of the agenda read alike. One row per item; the assignee column replaces
   the old per-owner group headings. */
.actions-wrap { overflow-x: auto; }
.actions-table {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  /* Reads as a solid sheet rather than the page showing through — white in the
     light themes, the dark skin's card surface in dark (same token the agenda
     table and the cards use). */
  background: var(--surface);
}
.actions-table th, .actions-table td {
  border: 0; border-bottom: 1px solid var(--border);
  padding: 7px 12px; text-align: left; vertical-align: middle;
}
.actions-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 600; }
.actions-table td { color: var(--text); }
/* Action item rows about 20% shorter (Tom, 11 Sep 2026): tighter cell padding
   and line spacing; a two-line item went from 59px to about 47px. */
.actions-table td { padding-block: 3px; }
.actions-table tbody tr:last-child td { border-bottom: 0; }
.action-row:hover td { background: rgba(127, 127, 127, 0.05); }
.at-tick { width: 34px; }
.at-tick input { width: 16px; height: 16px; margin: 0; display: block; accent-color: var(--accent); cursor: pointer; }
.at-tick input:disabled { cursor: default; opacity: 0.45; }
/* Reference number ("A-12" / "I-4") — a quiet monospace tag, narrow enough to
   read as a margin label rather than a column of its own. */
.ref-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  color: var(--text-muted); white-space: nowrap;
}
.at-ref { width: 86px; }
.at-assignee { width: 190px; }
.at-comments { width: 104px; }
.at-del { width: 40px; }
.at-empty { color: var(--text-muted); }
.actions-table .at-action { line-height: 1.3; }
.action-row.is-done .at-text, .action-row.is-done .agenda-due { color: var(--text-muted); opacity: 0.6; text-decoration: line-through; }
/* Editable rows read as text until you reach for them (Notion-style), so a
   carried item and a hand-added one sit in the same column without a seam. */
.actions-table .post-action-input {
  display: block; width: calc(100% + 12px); font: inherit; font-size: 14.5px; line-height: 1.3;
  padding: 3px 6px; margin: -3px -6px; resize: none; overflow: hidden;
  color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 6px;
}
.action-row:hover .post-action-input { border-color: var(--border); }
.actions-table .post-action-input:focus { border-color: var(--accent); background: rgba(127, 127, 127, 0.06); outline: none; }
.actions-table .assignee-field { display: block; }
.actions-table .assignee-trigger { max-width: 100%; }
/* The row's controls belong to the column, not to a hover state (the table has
   room for them, unlike the inline lists elsewhere). */
.actions-table .action-assign, .actions-table .action-comment-btn { opacity: 1; margin-left: 0; }
.actions-table .action-assign { max-width: 100%; border-color: transparent; }
.action-row:hover .action-assign, .actions-table .action-assign:focus { border-color: var(--border); }
.actions-table .action-delete, .actions-table .post-action-remove { opacity: 0.55; margin-left: 0; }
.action-row:hover .action-delete, .action-row:hover .post-action-remove { opacity: 1; }
/* Light mode fills every editable control white (see the theme: afm block); in
   the table that would draw a box around each row's text, so the fill is held
   back until the control is actually being used. */
body.theme-slate.light .actions-table .post-action-input,
body.theme-slate.light .actions-table .assignee-trigger,
body.theme-slate.light .actions-table .action-assign { background-color: transparent; }
body.theme-slate.light .actions-table .post-action-input:focus,
body.theme-slate.light .action-row:hover .assignee-trigger,
body.theme-slate.light .action-row:hover .action-assign { background-color: #ffffff; }
/* Pull each control back by its own left padding so the name it shows starts on
   the column's text edge — level with the ASSIGNEE heading, not indented from it
   (the chip starts with an avatar, so it's nudged the same way). */
/* A native select insets its own text a few px beyond the CSS padding, so the
   pull-back is measured from the rendered glyphs (header ink vs name ink), not
   computed from the box — otherwise the column reads as indented. */
.actions-table .action-assign { margin-left: -11.5px; }
.actions-table .assignee-trigger { margin-left: -10px; }
.actions-table .achip { margin-left: -3px; }
.actions-table .assignee-trigger { border-color: transparent; background: transparent; font-size: 14.5px; padding: 4px 8px; }
.action-row:hover .assignee-trigger, .actions-table .assignee-field.open .assignee-trigger {
  border-color: var(--border); background: rgba(244, 247, 247, 0.05);
}
.actions-empty-row td { color: var(--text-muted); }
/* The comment thread rides in a full-width row beneath its item — invisible
   (and zero-height) until the bubble opens it. */
.action-thread-row > td { padding: 0; border-bottom: 0; }
.actions-table + .post-action-add { margin-top: 10px; }
/* Screen-reader-only column heading (the tick column shows no label). */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The board agenda's section menu (Action items / Documents / Issues List /
   Meeting summary / Board Minutes). A rounded pill menu with the chosen section
   filled teal (Tom, 11 Sep 2026: it replaced a full-width white band with
   underlined tabs, which read as an odd box on the grey agenda). It floats at
   the top of the drawer while a long list scrolls under it: only the pill is
   opaque (--bg, never the glass --surface), so there is no band to match. */
.mtabs-wrap { margin-top: 10px; }
/* Full-bleed sticky bar. top: -20px + the 20px padding cover the drawer body's
   top padding, which content would otherwise scroll through above the menu.
   Transparent at rest; once stuck (JS adds .is-stuck) it takes the drawer's
   own ground so the rows scroll away under a clean band, not a white box. */
.mtabs-bar {
  position: sticky; top: -20px; z-index: 3;
  margin: 0 calc(-1 * var(--dpx, 20px)) 12px; padding: 20px var(--dpx, 20px) 10px;
  border-bottom: 1px solid transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.mtabs-bar.is-stuck { background: var(--drawer-ground, var(--bg)); border-bottom-color: var(--border); }
body.theme-slate .drawer { --drawer-ground: rgb(17, 17, 20); }          /* sampled: the dark glass drawer */
body.theme-slate.light .drawer { --drawer-ground: #ffffff; }            /* the solid white light drawer */
.mtabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  width: fit-content; max-width: 100%;
  margin: 0; padding: 4px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 14px rgba(0, 0, 0, 0.06);
}
.mtab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px;
  font: inherit; font-size: 14px; font-weight: 350; line-height: 1.5; white-space: nowrap;
  color: var(--text-muted); background: transparent;
  border: 0; border-radius: 8px; cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
/* Every tab the same width (Tom, 11 Sep 2026): equal grid columns, each as wide
   as the widest label. Narrow screens fall back to wrapping. */
@media (min-width: 720px) {
  .mtabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .mtab { justify-content: center; }
}
.mtab:hover { color: var(--text); background: rgba(127, 127, 127, 0.12); }
.mtab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* The chosen section in plain grey (Tom, 25 Sep 2026; it was a mauve #9A8C98
   tint with plum text from 11 Sep). Grey carries no meaning of its own, so the
   tint alone no longer says "chosen" as loudly — the label takes the segment
   weight the report dialog's switcher uses (.rb-dseg button.on) to make up for
   it. The chip greys are that switcher's too, so every selected-one-of-several
   control on the site now reads the same. */
.mtab.is-active { color: var(--text); background: rgba(255, 255, 255, 0.14); font-weight: 500; }
body.light .mtab.is-active { color: var(--text); background: #e9ebec; }
.mtab-n {
  min-width: 19px; padding: 0 6px; border-radius: 999px;
  font-size: 11.5px; line-height: 18px; text-align: center;
  color: var(--text-muted); background: rgba(127, 127, 127, 0.16);
}
.mtab.is-active .mtab-n { color: inherit; background: rgba(127, 127, 127, 0.24); }
.mtab-panel[hidden] { display: none; }
/* Minutes progress under the meeting tabs (Tom, 14 Sep 2026): numbered steps on a
   horizontal line, ticked teal once done; the next step outlined teal. */
.mprogress {
  list-style: none; margin: 0 0 18px; padding: 16px 12px 14px; display: flex; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.mp-step { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 0 6px; }
.mp-step + .mp-step::before {   /* the line from the previous step's dot to this one */
  content: ""; position: absolute; top: 13px; left: calc(-50% + 18px); right: calc(50% + 18px);
  height: 2px; border-radius: 2px; background: var(--border);
}
.mp-step.is-done + .mp-step::before { background: var(--accent); }
.mp-dot {
  position: relative; z-index: 1; box-sizing: border-box; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  background: var(--surface); border: 2px solid var(--border);
}
.mp-dot svg { width: 15px; height: 15px; }
.mp-step.is-current .mp-dot { color: var(--accent); border-color: var(--accent); }
.mp-step.is-done .mp-dot { color: #fff; background: var(--accent); border-color: var(--accent); }
.mp-label { font-size: 13px; line-height: 1.3; color: var(--text-muted); }
.mp-step.is-done .mp-label, .mp-step.is-current .mp-label { color: var(--text); }
.mp-step.is-current .mp-label { font-weight: 500; }
.mp-when { font-size: 11.5px; color: var(--text-muted); }
/* Who does the step: Ellie in the same tag as the Activity tab's (.act-ellie),
   manual steps in a quiet grey tag with a person icon. */
.mp-actor {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: 6px;
  font-size: 11.5px; font-weight: 500; line-height: 1.7; cursor: help;
}
.mp-actor svg { width: 11px; height: 11px; }
.mp-actor-ellie { background: #FDECC8; color: #402C1B; }
.mp-actor-manual { background: rgba(127, 127, 127, 0.14); color: var(--text-muted); }
/* A short panel (Documents, often two lines) must still leave the strip room to
   stay stuck where the reader left it — without this the scroller collapses and
   the agenda slides up under them when they switch tabs. */
.mtab-panel { min-height: calc(100vh - 170px); }
/* The panels carry their own headings, so the first block sits flush. */
.mtab-panel > .agenda-actions-title:first-child { margin-top: 0; }

/* The live Issues List embedded at the foot of the board agenda. It is the same
   widget as the Issues List tab, so it only needs to sit flush in the agenda:
   no card of its own, and the toolbar tucked up under the section heading. */
.agenda-issues { margin-top: 2px; }
.agenda-issues-note { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); }
.agenda-issues .issues-list { padding: 0; background: transparent; box-shadow: none;
  border: 0; border-radius: 0; }   /* no second frame: the table is the only box, as on the Agenda tab */
.agenda-issues .issues-toolbar { margin-top: 0; }

/* Comment thread on an action item. The bubble hugs the item's text (it carries
   the count, so unlike the × / reassign controls it stays legible without a
   hover) and opens the thread directly beneath the row. Anyone with access to
   the dashboard can comment — ticking is what stays with the assignee. */
/* The item's text takes the slack so the row's controls — comments, reassign,
   delete — line up down the right of the list instead of trailing each item. */
.action-check > span { flex: 1 1 auto; }
.action-comment-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  margin-left: 7px; padding: 1px 7px; font: inherit; font-size: 12px; line-height: 1.7;
  color: var(--text-muted); background: transparent; border: 1px solid transparent;
  border-radius: 999px; cursor: pointer; opacity: 0.4; transition: opacity 0.12s, color 0.12s;
}
.action-comment-btn svg { width: 13px; height: 13px; flex: 0 0 auto; }
.action-comment-btn.has-comments, .action-comment-btn.open {
  opacity: 1; color: var(--accent); border-color: var(--border);
}
.action-check:hover .action-comment-btn, .action-row:hover .action-comment-btn,
.agenda-actions li:hover .action-comment-btn,
.action-comment-btn:hover, .action-comment-btn:focus-visible { opacity: 1; }
.action-comment-btn:hover { color: var(--accent); }
/* Keep the count crisp on ticked (greyed) rows, and out of the way when empty. */
.action-check .action-comment-btn .acb-n { opacity: 1; color: inherit; }
.acb-n:empty { display: none; }
.action-thread {
  /* Sits on the same sheet as the table it hangs under; the accent bar is what
     marks it out. Equal margin above and below, so it reads as centred under
     its item rather than stuck to it. */
  margin: 11px 0 11px 12px; padding: 10px 12px; max-width: 720px;
  background: var(--surface);
  border-left: 2px solid var(--accent); border-radius: 0 8px 8px 0;
}
.action-comment-empty { margin: 0; font-size: 13px; color: var(--text-muted); }
.action-comment-box { display: flex; gap: 8px; margin-top: 10px; }
.action-comment-list:empty { display: none; }
.actions-save { margin-top: 10px; }
.agenda-actions li { margin: 4px 0; }
.agenda-owner { color: var(--text); }
.agenda-due { color: var(--text-muted); }
.agenda-empty { margin: 0; color: var(--text-muted); font-size: 14px; }

/* Pinned "Actions from last board meeting" tracker card, above the meeting rows.
   Accent (teal) left bar distinguishes it from the mauve-barred meeting rows. */
.actions-summary {
  /* Sits directly on the page background — no card/frosting. */
  padding: 0;
  margin-bottom: 22px;
}
.actions-summary-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.actions-summary-divider { flex: 1 1 auto; margin: 0; }
.actions-summary-count { flex: 0 0 auto; font-size: 11.5px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; }
.actions-summary-count.all-done { color: var(--accent); border-color: var(--accent); }
.actions-summary-list { margin-top: 4px; }
/* The Outstanding action items table is a white sheet in BOTH modes. The
   light-mode tokens are re-declared on the table itself, so on the dark skin
   every child (headers, refs, assignee, comment bubble + thread) takes its
   light-mode colour, and color-scheme flips the native tick boxes. The one
   dark hard-code inside it, the assignee dropdown, is restated to match. */
body.theme-slate .actions-summary .actions-table {
  --surface: #ffffff;
  --border: #c3ced1;
  --text: #0e0e12;
  --text-muted: #5e6e74;
  --accent: #17998a;
  color-scheme: light;
  color: var(--text);
  background: #ffffff;
}
body.theme-slate .actions-summary .assignee-menu { background: #ffffff; box-shadow: 0 10px 28px rgba(15, 30, 30, 0.16); }
body.theme-slate .actions-summary .assignee-add-save { color: #ffffff; }
.actions-summary .action-check.is-done span,
.actions-summary-list li.is-done { color: var(--text-muted); opacity: 0.6; }
.action-check.is-done span { color: var(--text-muted); opacity: 0.6; }

/* Agenda sits on the page background, not a glass card. */
body.theme-slate .agenda { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Board meetings — an accordion. Each meeting is an accent-bar row titled by its
   date; the dropdown reveals the full agenda + documents. */
/* Horizontal padding matches the section title (.cell[data-section-title] .text-block,
   16px) so the action checkboxes + meeting accent bars line up under "Board Meetings". */
.board-meetings { display: block; text-align: left; height: auto; background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0 16px 18px; overflow: visible; }
.meeting {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid #9A8C98;
  border-radius: 10px;
  padding: 0 24px;
  margin-bottom: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.meeting:last-child { margin-bottom: 0; }
.meeting:hover { border-color: var(--accent); border-left-color: #9A8C98; }
.meeting:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

/* The upcoming meeting sits taller than the past rows; past rows read in grey. */
.meeting.is-upcoming .meeting-head { padding-top: 30px; padding-bottom: 30px; }
.meeting.is-upcoming, .meeting.is-upcoming:hover { border-left-color: var(--accent); }
.meeting.is-closed .meeting-date { color: var(--text-muted); }
.meeting.is-closed .meeting-month-end { color: var(--text-muted); }

/* Labelled divider separating the upcoming meeting from past ones. */
.meetings-divider { display: flex; align-items: center; gap: 14px; margin: 10px 2px 20px; }
.meetings-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }
.meetings-divider span { flex: 0 0 auto; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; font-weight: 600; }
.meeting-head { display: flex; align-items: center; gap: 10px; padding: 14px 0; }
.meeting-head::-webkit-details-marker { display: none; }
.meeting-date { font-size: 12.5px; font-weight: 400; color: var(--text-muted); }
.meeting-date-form { margin: 0; display: inline-flex; align-items: center; position: relative; }
.meeting-date-edit { background: none; border: 0; cursor: pointer; color: var(--text-muted); padding: 3px; border-radius: 6px; display: inline-flex; }
.meeting-date-edit:hover { color: var(--text); background: rgba(127, 127, 127, 0.14); }
.meeting-date-edit svg { width: 15px; height: 15px; }
.meeting-date-input { position: absolute; left: 0; bottom: -4px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.meeting-type, .meeting-tag { font-size: 11.5px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.type-form { margin: 0; display: inline-flex; }
select.meeting-type {
  -webkit-appearance: none; appearance: none;
  font-family: inherit; cursor: pointer; line-height: 1.5;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239aa7ab' stroke-width='3' 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 9px center;
}
select.meeting-type:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.meeting-tag { color: var(--accent); border-color: var(--accent); }
.meeting-tag.closed { color: var(--text-muted); border-color: var(--border); }
/* Month-end chip on the row + editable field in the detail head. */
.meeting-month-end { font-size: 14px; font-weight: 500; color: var(--text); }
.mdetail-month-end { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); margin-top: 4px; }
.mdetail-month-end label { color: var(--text-muted); }
.month-end-input {
  font: inherit; font-size: 14px; padding: 3px 8px;
  color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  color-scheme: dark;
}
.month-end-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Close-meeting control (in the panel). */
.meeting-close { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.btn-close-meeting {
  background: var(--accent); color: #fff; border: 0;
  padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer;
}
.btn-close-meeting:hover:not(:disabled) { filter: brightness(1.06); }
/* Close meeting as agenda item 12 (Tom, 14 Sep 2026): button + one-line note in the Notes cell. */
.meeting-close.meeting-close-inrow { margin: 0; padding: 0; border: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.meeting-close-inrow form { margin: 0; }
.meeting-close-inrow .meeting-close-note { margin: 0; }
.btn-close-meeting:disabled { background: rgba(127, 127, 127, 0.2); color: var(--text-muted); cursor: not-allowed; }
/* Reopen is a corrective action — subtler ghost/outline style, not the primary green. */
.btn-reopen-meeting {
  background: transparent; color: var(--text); border: 1px solid var(--border);
  padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer;
}
.btn-reopen-meeting:hover { border-color: var(--accent); color: var(--accent); }
/* Close/reopen + delete sit side by side in the panel footer. */
.meeting-close-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Delete is destructive and Tom-only — red outline, never the primary fill. */
.btn-delete-meeting {
  background: transparent; color: #e5687a; border: 1px solid rgba(229, 104, 122, 0.45);
  padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer;
}
.btn-delete-meeting:hover { background: rgba(229, 104, 122, 0.12); border-color: #e5687a; }
/* In-button hourglass shown while a queued task (minutes generation, invite
   send, circulation) is running — flips over, pauses, flips again. */
.btn-hourglass {
  width: 13px; height: 13px; display: inline-block; vertical-align: -2px; margin-right: 6px;
  animation: hourglass-flip 2s ease-in-out infinite;
}
@keyframes hourglass-flip {
  0%, 35% { transform: rotate(0deg); }
  50%, 85% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}
/* Shown in place of the upcoming meeting row when the open meeting was deleted. */
.meeting-create {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px; border: 1px dashed var(--border); border-radius: 12px;
}
.btn-create-meeting {
  background: var(--accent); color: #fff; border: 0;
  padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer;
  white-space: nowrap;
}
.btn-create-meeting:hover { filter: brightness(1.06); }
.meeting-create-note { margin: 0; font-size: 13px; color: var(--text-muted); }
/* "Are you sure" dialog for destructive actions (delete meeting). */
.confirm-modal-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: var(--scrim); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
/* display:flex above outranks the [hidden] UA default — restate it or the dialog shows on load. */
.confirm-modal-overlay[hidden] { display: none; }
.confirm-modal {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--panel-border); border-radius: var(--panel-radius); padding: 22px 24px;
  width: min(420px, calc(100vw - 40px)); box-shadow: var(--panel-shadow);
}
.confirm-modal h3 { margin: 0 0 10px; font-size: 16px; font-weight: 600; }   /* the house modal heading */
.confirm-modal-msg { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.confirm-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.confirm-modal-cancel {
  display: inline-flex; align-items: center; height: 38px; box-sizing: border-box;
  background: transparent; color: var(--text); border: 1px solid var(--border);
  padding: 0 18px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer;
}
.confirm-modal-cancel:hover { border-color: var(--accent); color: var(--accent); }
.confirm-modal-delete {
  display: inline-flex; align-items: center; height: 38px; box-sizing: border-box;
  background: #e5687a; color: #fff; border: 0;
  padding: 0 18px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer;
}
.confirm-modal-delete:hover { filter: brightness(1.06); }
/* Board-meeting "1 hour in" reminder — reuses .confirm-modal, adds a snooze row. */
.board-reminder-snooze { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.board-reminder-snooze-label { font-size: 13px; color: var(--text-muted); margin-right: 2px; }
.board-reminder-snooze-btn {
  background: transparent; color: var(--text); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 20px; font-size: 13px; font-weight: 500; cursor: pointer;
}
.board-reminder-snooze-btn:hover { border-color: var(--accent); color: var(--accent); }
.meeting-close-note { margin: 8px 0 0; font-size: 13px; color: var(--text-muted); }
.meeting-badges { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.meeting-chevron { width: 18px; height: 18px; margin-left: 10px; color: var(--text-muted); flex: 0 0 auto; }

/* "Board Agenda" title (mauve) above the panel header line — board meetings only.
   Matches the dashboard section titles: 30 / 200. */
.drawer.agenda .drawer-title { color: #9A8C98; }
/* The agenda's title is the company name + number (Tom, 11 Sep 2026), not the
   small mauve "Board Agenda" label. */
.drawer.agenda .drawer-title,
body.theme-slate.light .drawer.agenda .drawer-title {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; line-height: 1.2;
  color: var(--text);
}
.drawer.agenda .drawer-title-sub { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--text-muted); }
/* Board agenda: roomier side margins than the side panel's 20px (Tom, 11 Sep
   2026), easing back to 20px on narrow screens. Header lines up with the body. */
.drawer.agenda.maximized .drawer-head { padding-inline: clamp(18px, 3vw, 44px); }
.drawer.agenda.maximized .drawer-body { --dpx: clamp(20px, 3vw, 44px); padding-inline: var(--dpx); }

/* Board-meeting panel header + attendees. */
.mdetail-head { margin-bottom: 16px; }
.mdetail-head-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.mdetail-head-top .mdetail-date-row { margin-top: 0; }
.mdetail-tags { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex: 0 0 auto; }
.mdetail-company { font-size: 30px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--text); }
.mdetail-number { font-size: 13px; color: var(--text-muted); margin-top: 2px; margin-bottom: 18px; }
.mdetail-date { font-size: 14px; color: var(--text); margin-top: 6px; }
.mdetail-date-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* Join Meeting — enabled (an <a>) once Ellie records the Zoom link; a disabled
   <button> placeholder until then. */
.btn-join-meeting {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13px; font-weight: 500; padding: 6px 14px;
  color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 7px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn-join-meeting svg { width: 15px; height: 15px; flex: 0 0 auto; }
a.btn-join-meeting:hover { filter: brightness(1.06); text-decoration: none; }
.btn-join-meeting:disabled {
  background: rgba(127, 127, 127, 0.14); color: var(--text-muted);
  border-color: var(--border); cursor: not-allowed;
}
/* Join Meeting and Send invite as teal OUTLINE buttons (Tom, 11 Sep 2026),
   filling with a faint teal on hover. The inert states above/below still win. */
a.btn-join-meeting, .send-form .send-btn:not(:disabled) {
  color: var(--accent); background: transparent; border-color: var(--accent);
}
a.btn-join-meeting:hover, .send-form .send-btn:not(:disabled):hover {
  filter: none; background: color-mix(in srgb, var(--accent) 10%, transparent);
}
/* With the live button now outlined, "Invite Sent ✓" / "Sending invite…" drop
   the border and read as a status, so done never looks like still to do. */
.send-form .send-btn:disabled:not([title]) { border-color: transparent; padding-inline: 4px; }
.mdetail-attendees-section { margin-bottom: 18px; }
.mdetail-attendees { margin-top: 6px; }
.mdetail-sub-head { display: flex; align-items: center; gap: 8px; }
.mdetail-sub-head .agenda-actions-title { margin: 0; }
/* Detailed board view — section titles in white with a trailing divider line. */
.meeting-detail .agenda-actions-title { display: flex; align-items: center; gap: 14px; color: #fff; }
.meeting-detail .agenda-actions-title::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }
.mdetail-sub-head .agenda-actions-title { flex: 1 1 auto; }
/* Roomier spacing between the sections in the detail view. */
.meeting-detail > .agenda-actions-title { margin-top: 34px; }
.mdetail-attendees-section { margin-top: 30px; }
/* Collapsed by default — the header row is the toggle. */
.attendees-head { cursor: pointer; }
.attendees-head:hover .agenda-actions-title { color: var(--accent); }
.attendees-chevron { width: 15px; height: 15px; flex: 0 0 auto; color: var(--text-muted); transition: transform 0.14s; }
.mdetail-attendees-section:not(.is-collapsed) .attendees-chevron { transform: rotate(90deg); }
/* The chevron sits just after the title and avatars (Tom, 11 Sep 2026), so
   "Attendees" starts on the same left edge as "Agenda". */
.agenda-actions-title .attendees-chevron { margin-left: -6px; }
/* One avatar per attendee beside the title, collapsed or open (replaced the count). */
.attendees-avatars { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.attendee-av {
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(127, 127, 127, 0.3); color: var(--text);
  font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: uppercase;
}
.attendee-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attendees-count {
  min-width: 19px; padding: 0 6px; border-radius: 999px;
  font-size: 11.5px; font-weight: 400; line-height: 18px; text-align: center;
  color: var(--text-muted); background: rgba(127, 127, 127, 0.16);
}
.mdetail-attendees-section.is-collapsed .mdetail-attendees { display: none; }
.attendees-list { list-style: none; margin: 6px 0 0; padding: 0; }
.attendees-list li { display: flex; align-items: center; gap: 9px; color: var(--text-muted); font-size: 14px; line-height: 1.9; }
.attendee-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--text-muted); }

/* Board attendees list (Useful Information). */
.ba-row { line-height: 1.6; }
.ba-row + .ba-row { margin-top: 8px; }
.ba-name { display: block; color: var(--text); }   /* name above, email below — same shape as the company-contact card */
.ba-email { color: var(--accent); text-decoration: none; font-size: 14px; }
.ba-email:hover { text-decoration: underline; }
.ba-note { margin-top: 8px; font-size: 12.5px; color: var(--text-muted); }
.ba-hint { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }

/* Inline attendees editor (pencil toggles editing; no popover). */
.attendees-edit-toggle { background: none; border: 0; cursor: pointer; color: var(--text-muted); padding: 3px; border-radius: 6px; display: inline-flex; }
.attendees-edit-toggle:hover { color: var(--text); background: rgba(127, 127, 127, 0.14); }
.attendees-edit-toggle svg { width: 15px; height: 15px; }
.attendees-edit-form, .cc-inline-form { display: none; margin-top: 8px; }
.attendees-edit-hint { display: none; }
.mdetail-attendees-section.editing .attendees-list,
.board-attendees.editing .attendees-readonly,
.info-card-editable.editing .cc-readonly,
.company-contact.editing .cc-readonly { display: none; }
.mdetail-attendees-section.editing .attendees-edit-form,
.mdetail-attendees-section.editing .attendees-edit-hint,
.board-attendees.editing .attendees-edit-form,
.info-card-editable.editing .cc-inline-form,
.company-contact.editing .cc-inline-form { display: block; }
.cc-inline-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.cc-inline-form input {
  font: inherit; font-size: 14px; padding: 6px 8px;
  color: var(--text); background: rgba(244, 247, 247, 0.05);
  border: 1px solid var(--border); border-radius: 6px;
}
.cc-inline-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.attendee-rows { display: flex; flex-direction: column; gap: 6px; }
.attendee-row { display: flex; align-items: center; gap: 6px; }
.attendee-row input {
  font: inherit; font-size: 14px; padding: 6px 8px; min-width: 0;
  color: var(--text); background: rgba(244, 247, 247, 0.05);
  border: 1px solid var(--border); border-radius: 6px;
}
.attendee-row input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.attendee-name { flex: 1 1 30%; }
.attendee-role { flex: 1 1 28%; }
.attendee-email { flex: 1 1 42%; }
/* A board person with no role yet (compulsory since 11 Sep 2026: the minutes
   print "Name (Role)"): flagged to operator staff until it's filled in. */
.role-missing { color: #c0392b; font-size: 12px; font-weight: 500; }
.ba-role { color: var(--text-muted); }
.attendee-remove {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-muted); font-size: 17px; line-height: 1; cursor: pointer;
}
.attendee-remove:hover { color: var(--neg); border-color: var(--neg); }
.attendees-edit-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.attendee-add { background: none; border: 1px dashed var(--border); color: var(--text-muted); border-radius: 6px; padding: 6px 10px; font-size: 13px; cursor: pointer; }
.attendee-add:hover { color: var(--text); border-color: var(--text-muted); }

/* Notion-style yellow status tag (single-select). */
.status-form { margin: 0; display: inline-flex; }
.status-tag {
  background: #FDECC8; color: #402C1B;
  border: 0; border-radius: 999px;
  padding: 3px 10px; font-size: 12px; font-weight: 500; line-height: 1.5;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
select.status-tag {
  -webkit-appearance: none; appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23402C1B' stroke-width='3' 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 9px center;
}
select.status-tag:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.meeting-docs { margin: 0; padding-left: 0; list-style: none; }
.meeting-docs li { margin: 4px 0; }
.meeting-docs a { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); text-decoration: none; }
.meeting-docs a:hover { text-decoration: underline; }
.doc-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--text-muted); }
/* Uploaded/updated timestamp to the right of each document name. */
.doc-ts { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
/* Manual document upload (operator editors) — a single upload icon under the list. */
.doc-upload { margin-top: 8px; }
.doc-upload-icon { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-muted); font-size: 13px; }
.doc-upload-icon input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.doc-upload-icon svg { width: 18px; height: 18px; flex: 0 0 auto; }
.doc-upload-icon:hover { color: var(--accent); }
.doc-upload-icon.is-busy { opacity: 0.5; pointer-events: none; }
/* Per-document delete cross. */
.meeting-docs li { display: flex; align-items: center; gap: 8px; }
.doc-del { display: inline-flex; padding: 2px; background: transparent; border: 0; cursor: pointer; color: var(--text-muted); opacity: 0; transition: opacity 0.12s, color 0.12s; }
.meeting-docs li:hover .doc-del, .doc-del:focus-visible { opacity: 1; }
.doc-del svg { width: 14px; height: 14px; }
.doc-del:hover { color: #e5687a; }
/* AI meeting summary (Granola transcript) — filed by Ellie into the drawer. */
.meeting-summary { margin: 0; }
.summary-form { margin: 0; }
/* Paste box for the meeting transcript: 5 lines tall, scrolls inside, holds
   arbitrarily long pasted text. */
.summary-input {
  font: inherit; font-size: 14px; line-height: 1.5; padding: 8px 10px; width: 100%;
  color: var(--text); background: rgba(244, 247, 247, 0.05);
  border: 1px solid var(--border); border-radius: 6px;
  resize: vertical; overflow-y: auto; display: block;
}
.summary-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.minutes-actions { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; flex-wrap: wrap; }
.minutes-actions .minutes-form { margin: 0; }
/* Agenda item 11, Generate board minutes: the button with any hint beside it. */
.minutes-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.minutes-row .minutes-actions { margin: 0; }
.minutes-hint { font-size: 12.5px; color: var(--text-muted); }
/* Grey while the prerequisite is missing (like the Close button); the teal
   .send-btn:disabled look stays for the "requested ✓" done states. */
.btn-generate-minutes:disabled:not([data-requested]),
.btn-circulate-minutes:disabled:not([data-requested]) {
  background: rgba(127, 127, 127, 0.2); color: var(--text-muted);
  border-color: var(--border); cursor: not-allowed;
}
/* Outline once the action has completed at least once, kept while the button is
   enabled for re-runs (Regenerate Minutes / re-Circulate) — "solid = still to do,
   outline = done". The grey missing-prerequisite rule above is more specific and
   still wins when the button is inert. */
.btn-generate-minutes[data-done], .btn-circulate-minutes[data-done] {
  background: transparent; color: var(--accent); filter: none;
}
.btn-generate-minutes[data-done]:hover:not(:disabled),
.btn-circulate-minutes[data-done]:hover:not(:disabled) { background: rgba(31, 185, 167, 0.12); }
.meeting-summary-text { white-space: pre-wrap; font-size: 14px; line-height: 1.55; }
.meeting-summary-meta { margin-top: 8px; display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--text-muted); }
.meeting-summary-meta a { color: var(--accent); text-decoration: none; }
.meeting-summary-meta a:hover { text-decoration: underline; }

/* ---- Board minutes: MD review + e-sign (top of the Meeting summary tab) ---- */
.minutes-flow {
  border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 0 0 16px;
  background: var(--surface);
}
.minutes-flow-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.minutes-flow-title { font-weight: 600; font-size: 14px; }
.minutes-flow-line { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.status-tag.minutes-tag { background: #DBEDDB; color: #1C3829; cursor: default; }
.btn-send-md:disabled[title] { background: rgba(127, 127, 127, 0.2); color: var(--text-muted); border-color: var(--border); cursor: not-allowed; }
.minutes-regen {
  font: inherit; font-size: 13px; padding: 5px 4px; background: none; border: 0;
  color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.minutes-regen:disabled { color: var(--text-muted); cursor: not-allowed; text-decoration: none; }
.minutes-replace.is-busy { color: var(--text-muted); pointer-events: none; text-decoration: none; }
.minutes-sign { margin-top: 12px; }
.minutes-sign-intro { margin: 0 0 12px; font-size: 14px; line-height: 1.55; }
.minutes-pages {
  max-height: 70vh; overflow-y: auto; padding: 12px; border-radius: 8px;
  background: rgba(127, 127, 127, 0.12); display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.minutes-pages img { width: 100%; max-width: 760px; height: auto; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); }
.minutes-sign-links { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0 0; font-size: 13px; }
.minutes-sign-links a { color: var(--accent); text-decoration: none; }
.minutes-sign-links a:hover { text-decoration: underline; }
.minutes-sign-form { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.minutes-sign-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); }
.minutes-sign-field input[type="text"] {
  font: inherit; font-size: 14px; padding: 8px 10px; color: var(--text);
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
}
.sig-modes { display: flex; gap: 6px; }
.sig-mode {
  font: inherit; font-size: 13px; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--text-muted); border: 1px solid var(--border);
}
.sig-mode.is-active { color: var(--accent); border-color: var(--accent); }
.sig-pad {
  width: 100%; height: auto; aspect-ratio: 600 / 170; background: #fff;
  border: 1px dashed var(--border); border-radius: 8px; touch-action: none;
}
.sig-pad.is-drawing { cursor: crosshair; border-style: solid; }
.sig-pad-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.sig-clear { font: inherit; font-size: 12px; background: none; border: 0; color: var(--accent); cursor: pointer; }
.minutes-sign-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.minutes-sign-agree input { margin-top: 4px; }
.minutes-sign-btn { align-self: flex-start; font-size: 14px; padding: 8px 20px; }
.minutes-sign-error { margin: 0; color: var(--neg); font-size: 14px; }
.minutes-sign-note { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.minutes-preview, .minutes-history { margin-top: 12px; font-size: 13px; }
.minutes-preview summary, .minutes-history summary { cursor: pointer; color: var(--accent); }
.minutes-preview .minutes-pages { margin-top: 10px; }
.minutes-history ol { margin: 8px 0 0; padding-left: 18px; color: var(--text-muted); line-height: 1.6; }
.minutes-history .mh-ts { font-variant-numeric: tabular-nums; margin-right: 6px; }
/* Activity tab (Tom, 11 Sep 2026): a timeline, newest at the top; a dot per
   event joined by a vertical line, the description to the right. */
.activity-timeline { list-style: none; margin: 4px 0 0; padding: 0 0 0 4px; max-width: 760px; }
.act-item { position: relative; padding: 0 0 18px 26px; }
.act-item::before {
  content: ""; position: absolute; left: 5px; top: 14px; bottom: -4px;
  width: 2px; background: var(--border);
}
.act-item:last-child::before { display: none; }
.act-dot {
  position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent); box-sizing: border-box;
}
.act-item:first-child .act-dot { background: var(--accent); }
.act-text { font-size: 14px; font-weight: 350; line-height: 1.45; color: var(--text); }
/* Ellie's automated steps: her name in the light yellow of her status tag. */
.act-ellie {
  display: inline-block; margin-right: 2px; padding: 0 8px; border-radius: 6px;
  background: #FDECC8; color: #402C1B; font-size: 12.5px; font-weight: 500; line-height: 1.6;
  vertical-align: 1px;
}
.act-ts { margin-top: 2px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Final minutes at the top of Documents, a line beneath (Tom, 11 Sep 2026). */
.docs-final { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.docs-final-title { margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--text); }
.docs-previous { margin-top: 10px; font-size: 13px; }
.docs-previous summary { cursor: pointer; color: var(--text-muted); }
.docs-previous .meeting-docs { margin-top: 6px; opacity: 0.8; }
.cc-md-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  background: #DBEDDB; color: #1C3829; vertical-align: 1px;
}
.cc-md-pick { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-muted); white-space: nowrap; }
/* .widget.board-meetings (two classes) outranks the generic `body.theme-slate .widget`
   glass rule below, so the board widget container stays fully flat — no frosting
   shows through above the meeting cards / behind the action-items summary. */
body.theme-slate .widget.board-meetings { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Each meeting is its own glass card. */
body.theme-slate .meeting {
  backdrop-filter: saturate(130%) blur(10px);
  -webkit-backdrop-filter: saturate(130%) blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 28px rgba(0, 0, 0, 0.28);
}

/* Company contact — info card with an edit popover. */
.company-contact { overflow: visible; }   /* let the edit popover escape the card */
.cc-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cc-name { color: var(--text); }
.cc-email { font-size: 14px; }   /* match .ba-email */
.cc-email a { color: var(--accent); text-decoration: none; }
.cc-email a:hover { text-decoration: underline; }
.cc-empty { color: var(--text-muted); }
.cc-edit { line-height: 0; position: relative; }
.cc-edit-toggle { list-style: none; display: inline-flex; cursor: pointer; color: var(--text-muted); padding: 3px; border-radius: 6px; }
.cc-edit-toggle::-webkit-details-marker { display: none; }
.cc-edit-toggle:hover { color: var(--text); background: rgba(127, 127, 127, 0.14); }
.cc-edit-toggle svg { width: 15px; height: 15px; }
.cc-edit-form {
  position: absolute; top: 100%; right: 0; margin-top: 8px; z-index: 20;
  display: flex; flex-direction: column; gap: 8px;
  width: 260px; max-width: 80vw; padding: 12px;
  background: #16161d; border: 1px solid var(--border); border-radius: 9px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}
.cc-edit-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.cc-edit-form input {
  font: inherit; font-size: 14px; padding: 6px 8px;
  color: var(--text); background: rgba(244, 247, 247, 0.05);
  border: 1px solid var(--border); border-radius: 6px;
}
.cc-edit-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.cc-save { align-self: flex-start; background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: 7px 14px; font-size: 13px; font-weight: 500; cursor: pointer; }
/* Multi-contact rows (name / role / email + remove), same shape as .attendee-row. */
.cc-contact + .cc-contact { margin-top: 10px; }
.cc-contact-rows { display: flex; flex-direction: column; gap: 8px; }
.cc-contact-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cc-contact-row input {
  font: inherit; font-size: 14px; padding: 6px 8px; min-width: 0;
  color: var(--text); background: rgba(244, 247, 247, 0.05);
  border: 1px solid var(--border); border-radius: 6px;
}
.cc-contact-row input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.cc-contact-row input[name="contact_name"] { flex: 1 1 30%; }
.cc-contact-row input[name="contact_role"] { flex: 1 1 25%; }
.cc-contact-row input[name="contact_email"] { flex: 1 1 35%; }
.cc-contact-remove {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-muted); font-size: 17px; line-height: 1; cursor: pointer;
}
.cc-contact-remove:hover { color: var(--neg); border-color: var(--neg); }
.cc-form-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

.text-block { background: transparent; border: 0; padding: 6px 0; box-shadow: none; }
/* Section titles: the house uppercase label treatment (same as table headers and
   .agenda-actions-title), left aligned but vertically centred in the box, in
   brand mauve. Applies to any widget flagged as a section (data-section-title). */
/* The .text-block is a full-height flex column (from .widget); centre its
   contents vertically so the title sits in the middle of the box. */
.cell[data-section-title] .text-block { justify-content: center; padding-left: 16px; padding-right: 16px; }   /* same inset both ends: the Virtual dropdown sat on the right edge */
.cell[data-section-title] .text-block h2 {
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: #9A8C98;
  margin: 0;                /* drop the default heading bottom-margin so centring is exact */
  display: flex; align-items: center;  /* keeps the ⓘ info icon vertically centred on the title at any size */
}
.text-block h1, .text-block h2, .text-block h3 { margin: 0 0 4px; }
.text-block h2 { font-size: 16px; font-weight: 600; }
.text-block p { margin: 4px 0; color: var(--text-muted); font-size: 13.5px; }

.reference-wrap { position: relative; }
.reference-source {
  position: absolute; bottom: 6px; right: 10px;
  font-size: 11px; color: var(--text-muted); text-decoration: none;
}
.reference-source:hover { color: var(--text); }

.dashboard-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.dashboard-list a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none; color: var(--text);
}
.dashboard-list a:hover { border-color: var(--accent); }

/* Login */
.login-page { display: grid; place-items: center; min-height: 100vh; }
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 28px 24px;
  width: 320px;
  display: grid; gap: 14px;
}
.login-card h1 { margin: 0; font-size: 20px; font-weight: 600; }
.login-card label { display: grid; gap: 6px; font-size: 13px; }
.login-card input {
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
}
.login-card input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.btn-primary {
  background: var(--accent); color: white; border: 0;
  padding: 10px 14px; border-radius: 6px; font-weight: 500; cursor: pointer;
}
.btn-primary:hover { filter: brightness(0.95); }
.error { background: var(--error-bg); border: 1px solid var(--error-border); color: #7f1d1d; padding: 8px 10px; border-radius: 6px; font-size: 13px; }

/* ===========================================================================
   theme: afm  — the operator theme (opt-in via `theme: afm` in a dashboard
   YAML). Plain dark #0E0E12 page (no background effects), a branded left rail
   carrying the teal/plum glows + soft diamond, glass cards, Geist typography.
   Palette: ink #0e0e12 · navy #144267 · teal #1fb9a7 · slate #5e6e74 ·
            plum #5c2e49 · mist #f4f7f7 · line #dce3e4
   Overrides the base CSS custom properties so existing components re-skin.
   =========================================================================== */
body.theme-slate {
  /* re-point the shared tokens — components inherit these automatically */
  --bg: #0e0e12;
  --surface: rgba(244, 247, 247, 0.045);   /* glass */
  --border: rgba(220, 227, 228, 0.14);
  --text: #f4f7f7;
  --text-muted: #9aa7ab;                    /* lightened slate */
  --accent: #1fb9a7;                        /* teal */
  --pos: #20C17A;                          /* functional positive (on dark) */
  --neg: #F0506E;                          /* functional negative (on dark) */
  --spark: #20C17A;
  --pos-tint: rgba(32, 193, 122, 0.16);    /* pill tint behind an up change */
  --neg-tint: rgba(240, 80, 110, 0.16);    /* pill tint behind a down change */
  --spark-line: #ffffff;                   /* white sparkline line on dark */
  --spark-fill: rgba(255, 255, 255, 0.10); /* grey shading on dark */

  color-scheme: dark;
  background: #0e0e12;
  color: var(--text);
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}

/* Content stacking layer (originally lifted it above the page hero layers,
   which are gone; kept so existing z-index stacking is unchanged). */
body.theme-slate .topbar,
body.theme-slate .container { position: relative; z-index: 1; }

/* Glassy topbar */
body.theme-slate .topbar {
  background: rgba(14, 14, 18, 0.72);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--border);
}

/* Glass widget cards */
body.theme-slate .widget {
  backdrop-filter: saturate(130%) blur(10px);
  -webkit-backdrop-filter: saturate(130%) blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 28px rgba(0, 0, 0, 0.28);
}
/* The custom-cards wrapper stays flat; each info card / editable card row gets
   the same glass treatment as the board-meeting rows. */
body.theme-slate .info-cards { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.theme-slate .info-card-row {
  backdrop-filter: saturate(130%) blur(10px);
  -webkit-backdrop-filter: saturate(130%) blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 28px rgba(0, 0, 0, 0.28);
}
body.theme-slate .metric-value { color: #ffffff; }
body.theme-slate .dash-head h1 { font-weight: 400; letter-spacing: -0.02em; }

/* Keep error widgets legible on dark */
body.theme-slate .widget-error {
  background: rgba(127, 29, 29, 0.22);
  border-color: rgba(252, 165, 165, 0.4);
  color: #fecaca;
}

/* --- brand type scale (Geist) — per brand guidelines -------------------
   Display 56–72/600 · Heading 30/600 · Subhead 18–20/600 ·
   Eyebrow 11.5/600 +0.2em uppercase teal · Body 16/400 1.6 · Caption 13/400 */
body.theme-slate { font-size: 14px; line-height: 1.6; font-weight: 350; }   /* BODY — 14px portfolio-wide (Tom 09-14), slightly lighter than 400 */

body.theme-slate .dash-head h1 {                                   /* HEADING — Geist Regular, matches the Analytics greeting (Tom 09-15) */
  font-size: 30px; font-weight: 400; line-height: 1.15; letter-spacing: -0.02em;
}
body.theme-slate .muted { font-size: 13px; font-weight: 400; }     /* CAPTION */

body.theme-slate .metric-title {                                   /* EYEBROW */
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: #ffffff;
}
body.theme-slate .metric-value {                                   /* card figure (heading scale) */
  font-size: 30px; font-weight: 200; letter-spacing: -0.01em;
}
/* Currency symbol: matches the section-title size/weight, kept white. */
body.theme-slate .metric-unit { font-size: 30px; font-weight: 200; color: #ffffff; }
/* Centre all metric-card content (title, number, change row, sparkline). */
body.theme-slate .metric-card { text-align: center; }
body.theme-slate .metric-compare { justify-content: center; }

body.theme-slate .text-block h2 { font-size: 19px; font-weight: 600; }  /* SUBHEAD */
/* Section titles match the afm company-name size (30px), kept light + centred. */
body.theme-slate .cell[data-section-title] .text-block h2 { font-size: 11.5px; font-weight: 600; }
body.theme-slate .text-block p { font-size: 14px; font-weight: 350; line-height: 1.6; color: var(--text-muted); }  /* BODY */

/* ===========================================================================
   Sidebar shell — dashboard view. A left rail (avatar + nav) with the tiles
   area on the right, replacing the top bar. Structural styles work on any
   theme; theme: afm adds the glass/teal treatment further down.
   =========================================================================== */
.app-shell {
  display: flex;
  align-items: flex-start;
  /* No max-width: the content column tracks the viewport, so widget rows and
     meeting cards keep expanding on wide screens — matching the maximised
     drawer (100vw - sidebar), which never honoured a shell cap anyway. */
  margin: 0;                 /* anchor the sidebar to the left edge */
  min-height: 100vh;
}

/* Rail width lives in a variable so the collapsed (icons-only) state and the
   maximised drawer both track the same number. */
body { --rail-w: 248px; }
body.sidebar-mini { --rail-w: 76px; }   /* 52px avatar + 12px each side */

.sidebar {
  flex: 0 0 var(--rail-w);
  width: var(--rail-w);
  align-self: stretch;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 26px 16px 18px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  transition: flex-basis 0.2s ease, width 0.2s ease, padding 0.2s ease;
}

/* Avatar + identity, stacked at the top of the rail. */
.side-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 4px 8px 22px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #5c2e49);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.side-user-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;          /* caps need a little tracking, not negative */
}
.side-user-sub { font-size: 12px; color: var(--text-muted); }

/* Editable display name — a pencil beside the name toggles a JS-free
   <details> popover with a rename field. */
.side-user-name-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
}
.side-user-name-row .side-user-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.name-edit { line-height: 0; }
.name-edit-toggle {
  list-style: none;
  display: inline-flex;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px;
  border-radius: 5px;
}
.name-edit-toggle::-webkit-details-marker { display: none; }
.name-edit-toggle:hover { color: var(--text); background: rgba(127, 127, 127, 0.12); }
.name-edit-toggle svg { width: 14px; height: 14px; }
.name-edit-form {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  z-index: 20;
  display: flex;
  gap: 6px;
  padding: 8px;
  width: 210px;
  max-width: 78vw;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}
.name-edit-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.name-edit-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.name-edit-save {
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  background: var(--accent);
  color: #fff;
}

/* Editable avatar: the circle is a <label> wrapping a hidden file input.
   Clicking it opens the picker; onchange auto-submits the form. */
.avatar-form { margin: 0; display: flex; justify-content: center; }
.avatar { position: relative; cursor: pointer; overflow: hidden; padding: 0; }
.avatar-input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
  font-size: 0;            /* hide the native "no file chosen" text */
}
.avatar-img {
  /* Fill the whole box as a square; the round .avatar clips it (overflow:hidden
     + border-radius). A border-radius here would inscribe a second, slightly
     smaller circle and let the gradient background bleed through at the edge. */
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-edit {
  position: absolute; inset: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.46);
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;    /* let clicks fall through to the file input */
}
.avatar:hover .avatar-edit,
.avatar:focus-within .avatar-edit { opacity: 1; }
.avatar-edit svg { width: 22px; height: 22px; }

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  margin-top: 6px;
  overflow-y: auto;
}
.side-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 14px;                 /* BODY size — matches card/body text */
  font-weight: 350;                /* BODY weight — matches body text */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-link:hover { background: rgba(127, 127, 127, 0.10); color: var(--text); }
.side-link.active { background: var(--accent); color: #fff; }
.side-link.disabled { opacity: 0.4; pointer-events: none; cursor: default; }
.side-link.disabled:hover { background: none; color: var(--text-muted); }

/* Inline join-link editor (pencil next to the Join Meeting button). */
.ml-edit { position: relative; display: inline-flex; line-height: 0; }
.ml-edit-toggle {
  list-style: none;
  display: inline-flex;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  border-radius: 5px;
}
.ml-edit-toggle::-webkit-details-marker { display: none; }
.ml-edit-toggle:hover { color: var(--text); background: rgba(127, 127, 127, 0.12); }
.ml-edit-toggle svg { width: 14px; height: 14px; }
.ml-edit-form {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  z-index: 20;
  display: flex;
  gap: 6px;
  padding: 8px;
  width: 320px;
  max-width: 82vw;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}
.ml-edit-input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}
.ml-edit-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.ml-edit-save {
  border: none;
  border-radius: 7px;
  padding: 6px 10px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.side-ico { display: inline-flex; flex: 0 0 21px; }   /* same size expanded and collapsed */
/* Company code under the icon — only shown when the rail is collapsed. */
.side-abbr { display: none; }
.side-ico svg { width: 21px; height: 21px; display: block; }

/* Sub-menu of the active dashboard's sections — indented with a guide line so
   it reads as nested under its parent nav item. */
.side-subnav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 3px 0 6px 22px;
  padding-left: 11px;
  border-left: 1px solid var(--border);
}
.side-sublink {
  display: block;
  padding: 6px 9px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-sublink:hover { background: rgba(127, 127, 127, 0.10); color: var(--text); }
/* Clicked (focused) sub-item takes the same green as the main-menu selection. */
.side-sublink:focus, .side-sublink:active { color: var(--accent); outline: none; }

.side-foot {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.side-foot .btn-link { padding: 6px 4px; }
.side-foot-logout { margin: 0; }

/* Light/dark mode toggle — sun shown in dark mode ("switch to light"), moon in
   light mode. The light skin only exists for theme: afm, so hide it elsewhere. */
.theme-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  padding: 6px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.theme-toggle:hover { color: var(--text); background: rgba(127, 127, 127, 0.14); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .ico-moon { display: none; }
body.light .theme-toggle .ico-sun { display: none; }
body.light .theme-toggle .ico-moon { display: inline-flex; }
body:not(.theme-slate) .theme-toggle { display: none; }

.content {
  flex: 1;
  min-width: 0;
  padding: 26px 28px 40px;
}
.content .dash-head {
  justify-content: space-between;
  align-items: flex-start;
}
.dash-head-titles { display: flex; flex-direction: column; gap: 4px; }
.dash-head-titles .crumb { font-size: 13px; }
.dash-head-sub { font-size: 14px; font-weight: 350; line-height: 1.6; color: var(--text-muted); letter-spacing: 0; }   /* BODY */
/* Trading address | company number: one line, same type; wraps on narrow screens. */
.dash-head-sub { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.dash-head-sub > span { font: inherit; }
.dash-head-sep { opacity: 0.55; }
@media (max-width: 760px) {
  .dash-head-sub { flex-direction: column; }   /* address wraps; number on its own line */
  .dash-head-sep { display: none; }
}
/* Company name + Settings gear (opens the Settings side panel). */
.dash-head-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.settings-link {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 8px; padding: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--text-muted); text-decoration: none;
}
.settings-link svg { width: 20px; height: 20px; }
.settings-link:hover { background: rgba(127, 127, 127, 0.12); color: var(--text); }
.settings-link.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* Section tabs across the top — one page per section, plus a Dashboard overview. */
.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--border);
}
.tab {
  padding: 9px 14px;
  margin-bottom: -1px;                 /* sit the active underline on the bar's border */
  text-decoration: none;
  color: var(--text-muted);
  font-size: 14px;                     /* BODY style — matches card/body text */
  font-weight: 350;
  line-height: 1.6;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Sub-tabs inside a tab page (Agents → Agent map / Folk). Same underlined-active
   shape as .tab-bar, a size down so the two strips read as a hierarchy. It is
   emitted inside the grid (under the section heading), so it spans every column. */
.subtab-bar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 2px 0 4px;
  border-bottom: 1px solid var(--border);
}
.subtab {
  padding: 7px 12px;
  margin-bottom: -1px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 350;
  line-height: 1.6;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.subtab:hover { color: var(--text); }
.subtab.active { color: var(--accent); border-bottom-color: var(--accent); }
/* The office fills the viewport below the header; the sub-tab strip takes a band
   of that, so give it back or the floor's bottom edge falls off screen. */
.content.has-subtabs .widget.agent-office { height: calc(100vh - 344px); }
@media (max-width: 820px) {
  .subtab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: 2px; }
}

/* Company tab header on the operator's hub — company name + link to its full page. */
.company-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 18px; }
.company-head-name { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.btn-open {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 7px 13px;
  white-space: nowrap;
}
.btn-open:hover { background: var(--accent); color: #fff; }

/* --- Right-hand slide-out detail panel (drawer) --------------------------- */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.24s ease;
  z-index: 40;
}
.drawer-backdrop.show { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(580px, 94vw);   /* was 480px; the CRM panel's width, now every side panel's (Tom, 2 Oct 2026) */
  display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: none;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s ease, box-shadow 0.28s ease;
  z-index: 50;
  overflow: hidden;
}
.drawer.open { transform: translateX(0); box-shadow: -24px 0 60px rgba(0, 0, 0, 0.28); }
/* Re-opening the same panel after a save-and-reload: appear in place, no slide. */
.drawer.no-anim, .drawer-backdrop.no-anim { transition: none !important; }
.drawer.maximized { width: calc(100vw - var(--rail-w)); }   /* leave the left sidebar uncovered */
.drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
/* Drawer headers use the same uppercase label treatment as the section titles
   (.cell[data-section-title] .text-block h2), in brand mauve. */
.drawer-title {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9A8C98;
}
.drawer-actions { display: flex; gap: 4px; }
.drawer-btn {
  background: none; border: 0; cursor: pointer;
  color: var(--text-muted);
  padding: 7px; border-radius: 8px;
  display: inline-flex; align-items: center;
}
.drawer-btn:hover { background: rgba(127, 127, 127, 0.14); color: var(--text); }
.drawer-btn svg { width: 18px; height: 18px; display: block; }
.ico-min { display: none; }
.drawer.maximized .ico-max { display: none; }
.drawer.maximized .ico-min { display: inline-flex; }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px 20px 28px; }
.drawer-metric-value { font-size: 36px; font-weight: 200; letter-spacing: -0.01em; margin-bottom: 10px; }
.drawer-note { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin: 0; }

/* Clickable metric cards */
.cell.is-clickable { cursor: pointer; }
.cell.is-clickable .widget { transition: border-color 0.15s ease; }
.cell.is-clickable:hover .widget { border-color: var(--accent); }
.cell.is-clickable:focus-visible { outline: none; }
.cell.is-clickable:focus-visible .widget { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

/* afm: match the left sidebar's glass background so the panel reads as the same surface. */
body.theme-slate .drawer {
  background: rgba(244, 247, 247, 0.045);
  backdrop-filter: saturate(130%) blur(12px);
  -webkit-backdrop-filter: saturate(130%) blur(12px);
}
/* Narrow screens: the sidebar collapses to a top strip, so a maximised panel
   can safely use the full width again. */
@media (max-width: 820px) {
  .drawer.maximized { width: 100vw; }
}

/* Narrow screens: collapse the rail to a top strip. */
@media (max-width: 820px) {
  .app-shell { flex-direction: column; }
  .sidebar {
    flex: none;
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 16px 18px;
  }
  .side-user {
    flex-direction: row;
    border-bottom: 0;
    padding: 0;
    margin: 0;
    gap: 10px;
  }
  .avatar { width: 40px; height: 40px; font-size: 17px; }
  .side-nav { flex-direction: row; flex-wrap: wrap; flex: 1; margin: 0; }
  .side-foot { border-top: 0; padding: 0; }
  .content { padding: 20px 18px 32px; width: 100%; }
}

/* --- theme: afm — glass rail + branded active state ----------------------- */
body.theme-slate .app-shell { position: relative; z-index: 1; }
/* The page behind the rail is plain, so the rail paints its own brand stack
   (light mode reuses it, see below): glass tint on top, the soft teal→plum
   diamond bleeding off the rail's top-right corner (an SVG layer rather than a
   pseudo-element, so the rail needs no overflow clip and its popovers still
   hang free), the teal/plum glows (fixed attachment = sized against the
   viewport, as the old page layer was), all on the ink base. */
body.theme-slate .sidebar {
  background:
    linear-gradient(rgba(244, 247, 247, 0.045), rgba(244, 247, 247, 0.045)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 424 424'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%231fb9a7'/%3E%3Cstop offset='1' stop-color='%235c2e49'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='1'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='62' y='62' width='300' height='300' rx='36' fill='url(%23g)' opacity='.16' filter='url(%23b)' transform='rotate(45 212 212)'/%3E%3C/svg%3E") right -176px top -122px / 424px 424px no-repeat,
    radial-gradient(120% 80% at 86% -12%, rgba(34, 188, 173, 0.18), transparent 58%),
    radial-gradient(95% 75% at -8% 112%, rgba(122, 61, 96, 0.62), transparent 60%),
    radial-gradient(70% 60% at 6% 96%, rgba(92, 46, 73, 0.55), transparent 55%)
    #0e0e12;
  background-attachment: scroll, scroll, fixed, fixed, fixed;
  backdrop-filter: saturate(130%) blur(12px);
  -webkit-backdrop-filter: saturate(130%) blur(12px);
  border-right-color: var(--border);
}
body.theme-slate .avatar {
  background: linear-gradient(135deg, #1fb9a7 0%, #5c2e49 100%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
body.theme-slate .side-link:hover { background: rgba(244, 247, 247, 0.06); color: var(--text); }
body.theme-slate .side-sublink:hover { background: rgba(244, 247, 247, 0.06); color: var(--text); }
/* Clicked (focused/selected) sub-item goes green — must sit AFTER :hover and match
   its specificity, or hover masks the colour while the cursor is still over it. */
body.theme-slate .side-sublink:focus,
body.theme-slate .side-sublink:active,
body.theme-slate .side-sublink.selected { color: var(--accent); }
/* The shared --surface is translucent glass; a floating rename popover needs a
   solid panel to stay readable over the tiles behind it. */
body.theme-slate .name-edit-form { background: #16161d; border-color: rgba(220, 227, 228, 0.18); }
body.theme-slate .ml-edit-form { background: #16161d; border-color: rgba(220, 227, 228, 0.18); }
body.theme-slate .name-edit-input { background: rgba(244, 247, 247, 0.05); }
/* Full-bleed active highlight: let the nav column spill into the rail's 16px
   side padding so a selected item's background can reach both edges. */
body.theme-slate .side-nav {
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px;
  padding-right: 16px;
}
body.theme-slate .side-link.active {
  background: var(--accent);              /* solid teal-green, not a gradient */
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  /* Bleed to the rail edges; add the 16px back as padding so the icon/label
     stay aligned with the inactive links above/below. */
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 28px;
  padding-right: 28px;
  border-radius: 0;
}

/* On the collapsed top-strip layout the rail is a horizontal row, so the
   vertical full-bleed treatment doesn't apply — revert to the inset pill. */
@media (max-width: 820px) {
  body.theme-slate .side-nav { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  body.theme-slate .side-link.active {
    margin-left: 0; margin-right: 0;
    padding-left: 12px; padding-right: 12px;
    border-radius: 9px;
  }
}

/* ===========================================================================
   theme: afm — LIGHT MODE (body.theme-slate.light, toggled from the sidebar
   footer). Same brand system on a plain white background (no effects):
   white cards, ink #0e0e12 text, slate #5e6e74 muted.
   Every hard-coded white/dark value from the dark skin is re-stated here so
   all text and icons stay legible on white.
   =========================================================================== */
body.theme-slate.light {
  --bg: #ffffff;                            /* plain white */
  --surface: #ffffff;
  --border: #c3ced1;                        /* brand line #dce3e4, darkened a step so dividers read on white */
  --text: #0e0e12;                          /* ink */
  --text-muted: #5e6e74;                    /* slate */
  --accent: #17998a;                        /* teal, darkened a step for contrast on white */
  --pos: #0F9A57;
  --neg: #CE2F48;
  --spark: #0F9A57;
  --pos-tint: rgba(15, 154, 87, 0.14);
  --neg-tint: rgba(206, 47, 72, 0.14);
  --spark-line: #5e6e74;                    /* slate sparkline on white */
  --spark-fill: rgba(94, 110, 116, 0.14);

  color-scheme: light;
  background: #ffffff;
  color: var(--text);
}

/* Chrome: white glass instead of ink glass, soft light shadows. */
body.theme-slate.light .topbar {
  background: rgba(244, 247, 247, 0.78);
}
body.theme-slate.light .widget {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 24px rgba(14, 14, 18, 0.07);
}
body.theme-slate.light .meeting,
body.theme-slate.light .info-card-row {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 24px rgba(14, 14, 18, 0.07);
}
/* The left rail is IDENTICAL in light and dark mode: it paints its own brand
   stack (see the dark .sidebar rule), which applies here unchanged. Dark-mode
   tokens are re-declared locally so every child (links, name, borders, log
   out, the toggle) keeps its dark-mode colour. */
body.theme-slate.light .sidebar {
  --surface: rgba(244, 247, 247, 0.045);
  --border: rgba(220, 227, 228, 0.14);
  --text: #f4f7f7;
  --text-muted: #9aa7ab;
  --accent: #1fb9a7;                       /* full-brightness teal reads best on ink */
  /* Re-declaring --text isn't enough for children that just inherit `color`
     (the display name): the light body's ink color wins by inheritance,
     making the name invisible on the dark rail. Pin color here too. */
  color: var(--text);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.theme-slate.light .side-link:hover,
body.theme-slate.light .side-sublink:hover { background: rgba(244, 247, 247, 0.06); color: var(--text); }
/* Light mode: a plain solid white panel, no frosted glass and no dimming of the
   page behind it (Tom, 11 Sep 2026). Dark mode keeps the glass. The backdrop
   stays (transparent) so a click beside the panel still closes it. */
body.theme-slate.light .drawer {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.theme-slate.light .drawer.open { box-shadow: -12px 0 32px rgba(14, 14, 18, 0.10); }
body.theme-slate.light .drawer-backdrop {
  background: transparent;
}
body.theme-slate.light .avatar {
  box-shadow: 0 8px 22px rgba(14, 14, 18, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Text that the dark skin pins to white → ink/slate on white. */
body.theme-slate.light .metric-title { color: #5e6e74; }
body.theme-slate.light .metric-value { color: #0e0e12; }
body.theme-slate.light .metric-unit { color: #0e0e12; }
body.theme-slate.light .meetings-divider span { color: #0e0e12; }
body.theme-slate.light .meeting-detail .agenda-actions-title { color: #0e0e12; }

/* Brand mauve headings: darkened so 200-weight type stays readable on white. */
body.theme-slate.light .cell[data-section-title] .text-block h2 { color: #7c6674; }
body.theme-slate.light .drawer-title { color: #7c6674; }
body.theme-slate.light .info-card,
body.theme-slate.light .info-card-row,
body.theme-slate.light .next-meeting { border-left-color: #7c6674; }
body.theme-slate.light .meeting { border-left-color: #7c6674; }
body.theme-slate.light .meeting:hover { border-left-color: #7c6674; }
body.theme-slate.light .meeting.is-upcoming,
body.theme-slate.light .meeting.is-upcoming:hover { border-left-color: var(--accent); }

/* Error widgets back to the light treatment. */
body.theme-slate.light .widget-error {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #7f1d1d;
}

/* Popovers that the dark skin paints as solid ink panels. The rename popover
   (.name-edit-form) is NOT restyled: it hangs off the dark sidebar, where the
   dark-skin treatment is exactly right. */
body.theme-slate.light .cc-edit-form {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: 0 10px 26px rgba(14, 14, 18, 0.14);
}

/* Form fields: the dark skin's faint white-on-dark fills are invisible on
   white — use solid white fields, and flip the native picker chrome to light. */
body.theme-slate.light .note-input,
body.theme-slate.light .summary-input,
body.theme-slate.light .dt-date,
body.theme-slate.light .dt-time,
body.theme-slate.light .dt-duration,
body.theme-slate.light .cc-inline-form input,
body.theme-slate.light .cc-edit-form input,
body.theme-slate.light .attendee-row input,
body.theme-slate.light .month-end-input,
body.theme-slate.light .nm-input,
body.theme-slate.light .agenda-item-input,
body.theme-slate.light .post-action-input,
body.theme-slate.light .assignee-trigger,
body.theme-slate.light .assignee-add-form input,
body.theme-slate.light .info-field-input,
body.theme-slate.light .uinfo-title,
body.theme-slate.light .uinfo-body,
body.theme-slate.light .agenda-date-input {
  /* background-color, not the shorthand: the shorthand resets background-repeat
     to `repeat`, which tiles the select caret SVG across the whole control. */
  background-color: #ffffff;
  color-scheme: light;
}
/* Dropdown menu reads as a solid white card in light mode. */
body.theme-slate.light .assignee-menu { background: #ffffff; box-shadow: 0 10px 28px rgba(15, 30, 30, 0.16); }
body.theme-slate.light .assignee-add-save { color: #ffffff; }
/* Agenda table reads as a clean white sheet; its editable inputs are grey so they
   stand out against the white cells (overrides the white-fill rule above by scope). */
body.theme-slate.light .agenda-table th,
body.theme-slate.light .agenda-table td { background-color: #ffffff; }
body.theme-slate.light .agenda-table .note-input,
body.theme-slate.light .agenda-table .agenda-item-input,
body.theme-slate.light .agenda-table .dt-date,
body.theme-slate.light .agenda-table .dt-time,
body.theme-slate.light .agenda-table .dt-duration { background-color: #edeff2; }
/* Select carets: the dark skin's light-grey stroke washes out on white. */
body.theme-slate.light select.dt-time,
body.theme-slate.light select.dt-duration,
body.theme-slate.light select.meeting-type {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235e6e74' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

body.theme-slate.light .side-link.active { color: #ffffff; }

/* ===========================================================================
   Mobile — phone-size (≤640px): hamburger nav + single-column grid.
   The 820px block (above) handles tablets by collapsing the sidebar to a
   horizontal strip with links always visible. This block goes further:
   links hide behind a hamburger toggle and the grid becomes a single column.
   =========================================================================== */

/* Ham button: hidden on desktop/tablet, visible only at ≤640px. */
.side-ham {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 18px;
  cursor: pointer;
  color: var(--text);
  line-height: 1;
  flex-shrink: 0;
  align-self: center;
}

/* Table horizontal scroll wrapper (injected by JS into widget tables). */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 640px) {
  .app-shell { flex-direction: column; }
  .sidebar {
    flex: none;
    width: 100%;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 10px 14px;
  }
  .side-user {
    flex-direction: row;
    border-bottom: 0;
    padding: 0;
    margin: 0;
    gap: 10px;
    flex: 1;
    min-width: 0;
  }
  .side-user-sub,
  .name-edit { display: none; }
  .avatar { width: 34px; height: 34px; font-size: 14px; }
  .side-ham { display: flex; }
  .side-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
    z-index: 200;
    gap: 0;
    padding: 4px 0;
    margin: 0;
    overflow-y: auto;
    max-height: 60vh;
  }
  .side-nav.open { display: flex; }
  .side-link {
    border-radius: 0;
    border-left: 3px solid transparent;
    padding: 12px 16px;
    font-size: 14px;
    width: 100%;
  }
  .side-link.active {
    border-left: 3px solid var(--accent);
    border-radius: 0;
    margin: 0;
    padding: 12px 16px;
  }
  .side-foot { display: none; }
  .content { padding: 16px 12px 40px; width: 100%; }
  .grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: min-content !important;
  }
  .cell { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .widget { overflow: visible; height: auto; min-height: 0; }
  .tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: 2px; }
  .drawer.maximized { width: 100vw; }

  /* Board meeting cards: stack title → date → badges instead of one squashed row */
  .meeting { padding: 0 14px; }
  .meeting.is-upcoming .meeting-head { padding-top: 18px; padding-bottom: 18px; }
  .meeting-head { flex-wrap: wrap; gap: 4px 8px; }
  /* Title gets its own full-width row */
  .meeting-month-end { flex: 1 1 100%; }
  /* Date gets its own full-width row */
  .meeting-date { flex: 1 1 100%; }
  /* Remaining items (edit btn, tags, type, status, chevron) flow to a third row.
     .meeting-badges already has margin-left:auto so status+chevron sit right-aligned. */
}

/* the operator theme: the sidebar is always dark (even in light mode), so the dropdown
   needs a dark solid background rather than inheriting the translucent --surface. */
@media (max-width: 640px) {
  body.theme-slate .side-nav,
  body.theme-slate.light .side-nav {
    background: #0e0e12;
    border-color: rgba(220, 227, 228, 0.14);
  }
  body.theme-slate .side-ham,
  body.theme-slate.light .side-ham {
    border-color: rgba(220, 227, 228, 0.25);
    color: #f4f7f7;
  }
  body.theme-slate .side-link.active,
  body.theme-slate.light .side-link.active {
    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 0;
    border-left: 3px solid var(--accent);
  }
  body.theme-slate .side-nav { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  body.theme-slate.light .side-nav { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
}

/* ===========================================================================
   Collapsible sidebar — the rail shrinks to an icons-only strip. The toggle
   sits at the top of the rail; state is kept in localStorage ('dash-sidebar')
   and applied as body.sidebar-mini before first paint (see base.html).
   Only applies to the desktop rail layout — below 820px the sidebar is already
   a horizontal strip / hamburger menu, so collapsing has nothing to do.
   =========================================================================== */
.side-foot-tools { display: flex; align-items: center; gap: 2px; }
.side-collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  background: none;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 0;
}
.side-collapse:hover { color: var(--text); background: rgba(127, 127, 127, 0.14); }
.side-collapse svg { width: 17px; height: 17px; display: block; }

@media (max-width: 820px) {
  .side-collapse { display: none; }
}

@media (min-width: 821px) {
  /* Collapsing must not move anything vertically — the icons stay on exactly
     the rows they occupied when expanded. So every vertical measurement is left
     alone: same rail padding, same avatar size, same nav margins, same link
     padding. Only horizontal space is taken away, and the name / sub-label are
     hidden with `visibility` (which keeps their boxes) rather than `display`. */
  body.sidebar-mini .sidebar { padding-left: 6px; padding-right: 6px; }

  /* Identity block: see "The rail's identity block" below, which sizes it to the
     header in both states (the name and sub-label are dropped when collapsed). */
  body.sidebar-mini .side-user { padding-left: 0; padding-right: 0; }

  /* Nav: centred icons, labels hidden (a title tooltip is added by JS).
     Vertical padding is unchanged, so row heights and positions hold. */
  /* The label keeps its line box (width 0, clipped) so each row stays exactly
     as tall as it was expanded — a `display: none` label would collapse the row
     to the icon's 18px and slide every icon up the rail. */
  body.sidebar-mini .side-label {
    width: 0;
    overflow: hidden;
    visibility: hidden;
  }
  body.sidebar-mini .side-link {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    border-radius: 9px;
  }
  /* Code under the icon (GE, PPP…), at the menu's own 14px / 350 size, with
     the 21px icon (same as expanded) and a 5px gap between them. That
     no longer fits the 42.4px expanded row, so collapsed rows are taller
     (6px + 21 + 5 + 16 + 6px = 54px) and the icons sit lower than expanded. */
  body.sidebar-mini .side-link {
    flex-direction: column;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  body.sidebar-mini .side-link .side-label { display: none; }
  body.sidebar-mini .side-nav { gap: 14px; }   /* more air between companies (expanded: 4px) */
  body.sidebar-mini .side-abbr {
    display: block;
    margin-top: 5px;
    font-size: 14px;                 /* menu size */
    line-height: 16px;
    font-weight: 350;                /* menu weight */
  }
  body.sidebar-mini .side-subnav { display: none; }

  /* afm's full-bleed active row bleeds to the narrower rail's 6px padding. */
  body.sidebar-mini.theme-slate .side-nav,
  body.sidebar-mini.theme-slate.light .side-nav {
    margin-left: -6px;
    margin-right: -6px;
    padding-left: 6px;
    padding-right: 6px;
  }
  body.sidebar-mini.theme-slate .side-link.active,
  body.sidebar-mini.theme-slate.light .side-link.active {
    margin-left: -6px;
    margin-right: -6px;
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 0;
  }

  /* Footer, collapsed: only the expand chevron and the theme toggle. "Log out"
     is deliberately NOT reduced to an icon here — an unlabelled door icon sat
     right where the expand control is, and got clicked by mistake. Expand the
     rail (one click) and the labelled button is back. */
  body.sidebar-mini .side-foot { justify-content: center; }
  body.sidebar-mini .side-foot-logout { display: none; }
}

/* The rail's identity block is exactly as tall as the header beside it (Tom, 4 Oct 2026),
   so the companies start where the page starts: no line under the avatar, and the first
   company's box (teal when chosen) has its top on the header's bottom edge. --head-h is measured by topnav.js (the header's rows are not fixed
   heights); 102px is what it measures today. To fit, the avatar is 52px in both states
   and, expanded, the name and label sit beside it instead of under it. */
@media (min-width: 821px) {
  .sidebar { padding-top: 0; }
  .side-user {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    align-items: center;
    column-gap: 10px;
    row-gap: 3px;
    box-sizing: border-box;
    height: var(--head-h, 102px);
    padding: 0;
    margin-bottom: 0;
    border-bottom: 0;
    text-align: left;
  }
  .side-nav { margin-top: 0; }
  .side-user .avatar-form { grid-row: 1 / span 2; }
  .sidebar .avatar { width: 52px; height: 52px; font-size: 20px; }
  .side-user-name-row { position: static; justify-content: flex-start; align-self: end; }
  .side-user-sub { align-self: start; }
  /* the rename box hangs under the whole block, inside the rail */
  .side-user .name-edit-form { left: 0; transform: none; margin-top: 6px; }
  body.sidebar-mini .side-user { grid-template-columns: auto; justify-content: center; }
  body.sidebar-mini .side-user-name-row,
  body.sidebar-mini .side-user-sub { display: none; }
}

/* Board-meeting "how it works" explainer — an info icon in the section title
   that drops down the lifecycle steps. The markup is rendered inside the
   board_meetings widget and moved into the heading by dashboard.js. */
.bm-process { position: relative; display: inline-block; margin-left: 12px; line-height: 0; }
.bm-info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-muted); cursor: pointer;
}
.bm-info-btn:hover, .bm-info-btn[aria-expanded="true"] { color: var(--accent); }
.bm-info-btn svg { width: 19px; height: 19px; }
.bm-process-panel {
  position: absolute; top: calc(100% + 12px); left: -8px;
  width: min(640px, 86vw); padding: 16px 22px 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22); z-index: 120;
  text-align: left; font-size: 13.5px; font-weight: 400; line-height: 1.55;
  letter-spacing: normal; text-transform: none; color: var(--text-muted);
}
body.theme-slate .bm-process-panel { background: #15151b; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5); }
body.theme-slate.light .bm-process-panel { background: #ffffff; }
.bm-process-head {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.bm-process-steps { margin: 0; padding: 2px 0 0; list-style: none; counter-reset: bm-step; display: grid; gap: 14px; }
.bm-process-steps li { position: relative; padding-left: 38px; counter-increment: bm-step; }
/* Circled step number */
.bm-process-steps li::before {
  content: counter(bm-step);
  position: absolute; left: 0; top: -1px;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
/* Vertical line joining the circles (skipped after the last step) */
.bm-process-steps li::after {
  content: ""; position: absolute; left: 11.5px; top: 27px; bottom: -13px; width: 1.5px;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}
.bm-process-steps li:last-child::after { display: none; }
.bm-process-steps strong { font-weight: 600; color: var(--text); }
/* Fallback placement (no section-title cell found): show inline above the list. */
.bm-process-src:not([hidden]) { margin: 0 2px 14px; }
.bm-process-src:not([hidden]) .bm-process-panel { position: static; width: auto; margin-top: 10px; }
/* Let the explainer panel escape the title box (.widget clips by default) and
   paint above the glass cells below while it is open. */
.cell[data-section-title] .text-block { overflow: visible; }
.cell.bm-info-open { position: relative; z-index: 60; }

/* Board overview — per-company next-meeting cards on the operator's hub Dashboard. */
.board-overview-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.board-overview-card {
  display: flex; flex-direction: column; gap: 7px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); background: transparent;
  transition: border-color 0.12s;
}
.board-overview-card:hover { border-color: var(--accent); }
/* Company name inherits the metric-card title (eyebrow) style via .metric-title. */
.bo-company { text-decoration: none; margin-bottom: 0; }
.bo-company:hover { color: var(--accent); }
.bo-row { font-size: 13.5px; color: var(--text); }
.bo-label { color: var(--text-muted); }
.bo-date { font-weight: 600; letter-spacing: -0.01em; }
.bo-none { color: var(--text-muted); }
/* Same Notion-style yellow tag as the board agenda view's .status-tag. */
.bo-status {
  display: inline-block; background: #FDECC8; color: #402C1B;
  border: 0; border-radius: 999px; padding: 3px 10px;
  font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap;
}
.bo-docs { display: inline; }
.bo-doc { color: var(--accent); text-decoration: none; }
.bo-doc:hover { text-decoration: underline; }
.bo-doc + .bo-doc::before { content: " · "; color: var(--text-muted); }
body.theme-slate .bo-date { font-weight: 400; color: #ffffff; }
body.theme-slate.light .bo-date { color: #0e0e12; }
/* The company cards are white sheets in BOTH modes, like the Outstanding action
   items table above them: light tokens re-declared on the card, and the two
   dark-skin hard-codes inside it (eyebrow + date pinned white) restated in ink. */
body.theme-slate .board-overview-card {
  --border: #c3ced1;
  --text: #0e0e12;
  --text-muted: #5e6e74;
  --accent: #17998a;
  color: var(--text);
  background: #ffffff;
  border-color: var(--border);
}
body.theme-slate .board-overview-card:hover { border-color: var(--accent); }
body.theme-slate .board-overview-card .metric-title { color: #5e6e74; }
body.theme-slate .board-overview-card .bo-company:hover { color: var(--accent); }
body.theme-slate .board-overview-card .bo-date { color: #0e0e12; }
/* Hub Dashboard: the overview carries a table of variable length, so its grid
   rows grow with their content instead of clipping it (the fixed row height
   still sets the minimum, so the metric cards below keep their size). */
.grid:has(.board-overview) { grid-auto-rows: minmax(var(--row-h, 80px), auto); }
.board-overview .bo-actions { margin-bottom: 18px; }
/* One heading row per company inside the cross-company actions table. */
.bo-group-row td {
  padding: 9px 12px 7px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted); background: rgba(94, 110, 116, 0.07);
  border-bottom: 1px solid var(--border);
}
.bo-group-row a { color: inherit; text-decoration: none; }
.bo-group-row a:hover { color: var(--accent); }

/* Issues List tab — table of issue records. */
.issues-wrap { overflow-x: auto; }
.issues-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.issues-table th, .issues-table td { border: 0; border-bottom: 1px solid var(--border); padding: 9px 12px; text-align: left; vertical-align: middle; }
.issues-table tbody tr:last-child td { border-bottom: 0; }
.issues-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 600; }
.issues-table td { color: var(--text); }
.issue-ref-cell { width: 90px; }
.issue-name-cell { min-width: 180px; position: relative; }
.issue-name { font-size: 14px; font-weight: 500; color: var(--text); }   /* same as the board cards' titles (Tom, 14 Sep 2026) */
.issues-table .issue-name { display: inline-block; vertical-align: middle; }
/* Chevron revealing the issue's sub-tasks row. It hangs in the gap LEFT of the
   name, so every name lines up with the Name heading whether or not it has sub
   tasks (Tom, 14 Sep 2026). */
.issue-expand {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; vertical-align: middle;
  border: 0; background: transparent; cursor: pointer; color: var(--text-muted);
  position: absolute; left: -9px; top: 50%; transform: translateY(-50%);
}
.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); }

.issue-subtasks-row[hidden] { display: none; }
/* Sub-task rows sit in the main table's columns (Tom, 11 Sep 2026): the tick box
   hangs where the chevron does, so the 16px tick centres under the chevron and
   the title starts where the issue names (and the Name heading) do. */
.issues-table .issue-subtasks-row > td { padding-top: 6px; padding-bottom: 6px; }
/* Dividers run from the Name column on, bar the last sub task's full-width one. */
.issues-table .issue-subtasks-row:not(.is-last) > td.ist-lead { border-bottom-color: transparent; }
.issues-table td.ist-title { position: relative; }
.ist-tickbox { display: inline-flex; align-items: center; justify-content: center; width: 18px; vertical-align: middle;
  position: absolute; left: -9px; top: 50%; transform: translateY(-50%); }
.ist-tickbox .subtask-tick { display: block; }
.issues-table .issue-subtask-title { display: inline-block; vertical-align: middle; }
.issue-subtask-line.is-done .issue-subtask-title { color: var(--text-muted); opacity: 0.6; }
.subtask-row.is-done .subtask-title { color: var(--text-muted); opacity: 0.6; }
.subtask-list li.is-done { color: var(--text-muted); opacity: 0.7; }
.issue-name-input, .issue-due {
  font: inherit; font-size: 14px; padding: 5px 7px; width: 100%;
  color: var(--text); background: rgba(244, 247, 247, 0.05);
  border: 1px solid var(--border); border-radius: 6px;
}
.issue-name-input:focus, .issue-due:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.issue-due { width: auto; }
/* Notion-style status tags. */
.issue-status {
  display: inline-block; border: 0; border-radius: 999px; padding: 3px 10px;
  font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap; font-family: inherit;
}
select.issue-status { -webkit-appearance: none; appearance: none; cursor: pointer; text-align: center; }
.issue-status.s-open { background: #FDECC8; color: #402C1B; }
.issue-status.s-in-progress { background: #D3E5EF; color: #183347; }
.issue-status.s-resolved { background: #DBEDDB; color: #1C3829; }
.issue-status.s-closed { background: #E3E2E0; color: #32302C; }
/* Assignee multiselect dropdown. */
.issue-assignees { position: relative; min-width: 140px; }
.issue-assignees-summary { list-style: none; cursor: pointer; padding: 5px 7px; border: 1px solid transparent; border-radius: 6px; }
.issue-assignees-summary::-webkit-details-marker { display: none; }
.issue-assignees[open] .issue-assignees-summary, .issue-assignees-summary:hover { border-color: var(--border); background: rgba(244, 247, 247, 0.05); }
.issue-assignees-menu {
  position: absolute; left: 0; top: 100%; z-index: 30;
  min-width: 220px;  /* auto-height: fits the full roster + add form, no inner scroll */
  margin-top: 4px; padding: 8px 10px;
  /* Solid — theme-slate's glass var(--surface) is see-through over drawer content. */
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 8px;
  box-shadow: var(--panel-shadow-sm); display: flex; flex-direction: column; gap: 5px;
}
.issue-assignee-opt { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; color: var(--text); }
.issue-assignee-opt input { accent-color: var(--accent); }
/* Comments / detail */
.issue-comments-toggle {
  display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 13px;
  color: var(--text-muted); background: transparent; border: 0; cursor: pointer; padding: 3px 4px; border-radius: 5px;
}
.issue-comments-toggle:hover { color: var(--accent); }
.issue-chevron { width: 13px; height: 13px; transition: transform 0.12s; }
.issue-comments-toggle.open .issue-chevron { transform: rotate(90deg); }
.issue-detail td { background: rgba(127, 127, 127, 0.04); }
.issue-section-label { margin: 8px 0 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 600; }
.issue-desc-input {
  font: inherit; font-size: 14px; width: 100%; padding: 7px 9px; resize: vertical;
  color: var(--text); background: rgba(244, 247, 247, 0.05);
  border: 1px solid var(--border); border-radius: 6px;
}
.issue-desc { font-size: 14.5px; color: var(--text); }
.issue-desc p { margin: 0 0 6px; }
.issue-comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.issue-comment-author { font-weight: 600; font-size: 13.5px; }
.issue-comment-ts { font-size: 12px; color: var(--text-muted); margin-left: 6px; }
.issue-comment-text { font-size: 14px; color: var(--text); white-space: pre-wrap; }
.issue-comment-form { display: flex; gap: 8px; margin-top: 10px; }
.issue-comment-input {
  flex: 1; font: inherit; font-size: 14px; padding: 6px 9px;
  color: var(--text); background: rgba(244, 247, 247, 0.05);
  border: 1px solid var(--border); border-radius: 6px;
}
.issue-comment-send, .issue-add-form .post-action-add { white-space: nowrap; }
.issue-comment-send {
  font: inherit; font-size: 13px; padding: 4px 12px; color: var(--accent);
  background: transparent; border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.issue-comment-send:hover { border-color: var(--accent); background: rgba(31, 185, 167, 0.08); }
.issue-add-form { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.issue-add-form .post-action-add { margin-top: 0; }
.issue-add-input {
  flex: 0 1 320px; font: inherit; font-size: 14px; padding: 6px 9px;
  color: var(--text); background: rgba(244, 247, 247, 0.05);
  border: 1px solid var(--border); border-radius: 6px;
}
.issue-del-cell { width: 34px; }

/* Issues List v2 — Notion-style tags, clickable rows, side-panel detail. */
.issue-row { cursor: pointer; }
.issue-row:hover td { background: rgba(127, 127, 127, 0.05); }
.issue-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Notion tag palette (shared by Topic tags; colours match Notion's). */
.ntag {
  display: inline-block; border-radius: 999px; padding: 3px 10px;
  font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap;
  background: #E3E2E0; color: #32302C;
}
.ntag.t-grey, .kind-tag.t-grey   { background: #E3E2E0; color: #32302C; }
.ntag.t-brown, .kind-tag.t-brown  { background: #EEE0DA; color: #442A1E; }
.ntag.t-orange, .kind-tag.t-orange { background: #FADEC9; color: #49290E; }
.ntag.t-yellow, .kind-tag.t-yellow { background: #FDECC8; color: #402C1B; }
.ntag.t-green, .kind-tag.t-green  { background: #DBEDDB; color: #1C3829; }
.ntag.t-blue, .kind-tag.t-blue   { background: #D3E5EF; color: #183347; }
.ntag.t-purple, .kind-tag.t-purple { background: #E8DEEE; color: #412454; }
.ntag.t-pink, .kind-tag.t-pink   { background: #F5E0E9; color: #4C2337; }
.ntag.t-red, .kind-tag.t-red    { background: #FFE2DD; color: #5D1715; }
.issue-comment-count { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: 13px; }
.issue-comment-count svg { width: 14px; height: 14px; }
/* Side panel (rendered hidden in the row, moved into the global drawer). */
.issue-panel { text-align: left; cursor: auto; }
.issue-title { margin: 0 0 14px; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.issue-title-input {
  width: 100%; margin: 0 0 14px; padding: 2px 0; font-family: inherit;
  font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--text);
  background: transparent; border: 0; outline: 0;
}
.issue-title-input:focus { border-bottom: 1px solid var(--border); }
.issue-props { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.issue-prop { display: flex; align-items: center; gap: 12px; min-height: 32px; }
.issue-prop-label {
  flex: 0 0 132px; white-space: nowrap; display: inline-flex;   /* fits "Board meeting" */ align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--text-muted);
}
.issue-prop-label svg { width: 15px; height: 15px; flex: 0 0 auto; }
.issue-prop-value { flex: 1; font-size: 14px; color: var(--text); }
.issue-empty { color: var(--text-muted); opacity: 0.75; }
.issue-topic-input {
  font: inherit; font-size: 14px; padding: 4px 7px; width: 100%; max-width: 240px;
  color: var(--text); background: transparent;
  border: 1px solid transparent; border-radius: 6px;
}
.issue-topic-input:hover, .issue-topic-input:focus { border-color: var(--border); background: rgba(244, 247, 247, 0.05); outline: 0; }

/* Issue comments — avatar + name, Notion-style. Assignees render as ntag chips. */
.issue-comment { display: flex; gap: 10px; align-items: flex-start; }
.issue-comment-avatar {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(127, 127, 127, 0.22); color: var(--text);
  font-size: 13px; font-weight: 600; margin-top: 1px;
}
.issue-comment-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.issue-comment-main { flex: 1; min-width: 0; }
.issue-assignees-summary .ntag, .issue-assignees-cell .ntag { margin: 1px 4px 1px 0; }
.issue-assignee-opt .ntag { margin: 0; }

/* Notion-style date fields (JS-enhanced native inputs — see dashboard.html). */
.ndate { position: relative; display: inline-block; }
.ndate input.ndate-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; border: 0; padding: 0; margin: 0;
}
.ndate-display {
  font: inherit; font-size: 14px; color: var(--text); white-space: nowrap;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 4px 8px; cursor: pointer;
}
.ndate-display:hover { background: rgba(127, 127, 127, 0.1); }
.ndate-display:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.ndate-display.is-empty { color: var(--text-muted); opacity: 0.8; }

/* Issues — Notion-style assignee menu (click a name to toggle; no checkboxes),
   quick-add, panel delete, compact top-aligned property block. */
.issue-assignee-opt { padding: 4px 6px; border-radius: 6px; }
.issue-assignee-opt:hover { background: rgba(127, 127, 127, 0.1); }
.issue-assignee-opt input { position: absolute; opacity: 0; pointer-events: none; }
.issue-assignee-opt::after { content: ""; margin-left: auto; color: var(--accent); font-size: 13px; }
.issue-assignee-opt:has(input:checked)::after { content: "✓"; }
.issue-assignee-add { border-top: 1px solid var(--border); padding-top: 7px; margin-top: 3px; }
.issue-assignee-add-toggle {
  font: inherit; font-size: 13px; padding: 3px 6px; color: var(--text-muted);
  background: transparent; border: 0; border-radius: 6px; cursor: pointer; width: 100%; text-align: left;
}
.issue-assignee-add-toggle:hover { background: rgba(127, 127, 127, 0.1); color: var(--text); }
/* Name and email stack on their own rows; [hidden] must beat the flex display. */
.issue-assignee-add-form { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 6px 2px 2px; }
.issue-assignee-add-form[hidden] { display: none; }
.issue-assignee-add-form input {
  width: 100%; font: inherit; font-size: 13px; padding: 5px 7px; min-width: 0;
  color: var(--text); background: rgba(244, 247, 247, 0.05);
  border: 1px solid var(--border); border-radius: 6px;
}
.ia-save {
  font: inherit; font-size: 13px; padding: 4px 10px; color: var(--accent);
  background: transparent; border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.ia-save:hover { border-color: var(--accent); background: rgba(31, 185, 167, 0.08); }
.ia-err { flex-basis: 100%; font-size: 12px; color: #e5687a; }
.issue-panel-delete { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
.issue-delete-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13px; padding: 5px 11px; color: #e5687a;
  background: transparent; border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.issue-delete-btn svg { width: 14px; height: 14px; }
.issue-delete-btn:hover { border-color: #e5687a; background: rgba(229, 104, 122, 0.08); }
/* Compact, strictly left-aligned property block at the top of the panel. */
.issue-panel, .issue-panel * { text-align: left; }
.issue-title, .issue-title-input { margin-bottom: 10px; }
.issue-props { gap: 2px; margin-bottom: 10px; }
.issue-prop { align-items: center; min-height: 30px; }
.issue-prop-value { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; justify-content: flex-start; }
.issue-prop-value .ndate-display, .issue-prop-value .issue-topic-input { margin-left: -8px; }
.issue-assignees-summary { margin-left: -7px; }
select.issue-status { text-align: left; }
.issue-add-form { justify-content: flex-start; }

/* Grey assignee chips (avatar + name) — replaces the coloured name tags. */
.achip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px 2px 3px; border-radius: 999px;
  background: rgba(127, 127, 127, 0.18); color: var(--text);
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
.achip-av {
  width: 20px; height: 20px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(127, 127, 127, 0.35); color: var(--text);
  font-size: 10.5px; font-weight: 600;
}
.achip-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Following column (Tom, 14 Sep 2026): overlapping avatars, name on hover. */
.fstack { display: inline-flex; align-items: center; flex-wrap: wrap; row-gap: 3px; padding-left: 6px; vertical-align: middle; }
.fstack .achip-av { width: 24px; height: 24px; margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); font-size: 11px; }
.issue-followers-cell { white-space: nowrap; }
.issue-assignees-summary .achip, .issue-assignees-cell .achip { margin: 1px 4px 1px 0; }
.issue-assignee-opt .achip { margin: 0; }

/* Chips flow in a tidy wrap grid — consistent left edge and spacing. */
.issue-assignees-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.issue-assignees-summary .achip { margin: 0; }
.issue-assignees-cell .achip { margin: 2px 5px 2px 0; }
.achip { vertical-align: middle; }

/* Roomier issue panel: more air between the property rows and sections. */
.issue-props { gap: 6px; margin-bottom: 13px; }
.issue-prop { min-height: 31px; }
.issue-title, .issue-title-input { margin-bottom: 13px; }
.issue-section-label { margin: 13px 0 5px; }
/* Each panel section (Description, Sub tasks, Documents, Comments) starts under
   a full-width hairline with room either side, so they read as separate blocks
   (Tom, 14 Sep 2026). */
.issue-panel .issue-section-label,
.drawer .issue-section-label,
.hiring-role-detail .issue-section-label {   /* the role page is neither, and wants the same hairlines */
  margin: 24px 0 12px; padding-top: 18px; border-top: 1px solid var(--border);
  border-top-color: color-mix(in srgb, var(--border) 55%, transparent);   /* a touch lighter than other rules */
  font-size: 12px;
}

/* Flat inline fields — no hover boxes on dates, topic, or assign (click still opens). */
.ndate-display:hover { background: transparent; }
.issue-topic-input:hover { border-color: transparent; background: transparent; }
.issue-topic-input:focus { border-color: var(--border); background: transparent; }
.issue-assignees-summary:hover,
.issue-assignees[open] .issue-assignees-summary { border-color: transparent; background: transparent; }

/* Status picker — same custom menu as Assign, options shown as the real tags. */
.issue-status-select { position: relative; display: inline-block; }
.issue-status-summary { list-style: none; cursor: pointer; display: inline-flex; }
.issue-status-summary::-webkit-details-marker { display: none; }
.issue-status-menu {
  position: absolute; left: 0; top: 100%; z-index: 30; min-width: 160px;
  margin-top: 4px; padding: 8px 10px;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 8px;
  box-shadow: var(--panel-shadow-sm); display: flex; flex-direction: column; gap: 5px;
}
.issue-status-opt {
  display: flex; align-items: center; padding: 4px 6px; border-radius: 6px;
  font: inherit; text-align: left; background: transparent; border: 0; cursor: pointer;
}
.issue-status-opt:hover { background: rgba(127, 127, 127, 0.1); }
.issue-status-opt.is-current::after { content: "✓"; margin-left: auto; padding-left: 14px; color: var(--accent); font-size: 13px; }

/* Status menu: pills each on a full-width row, no disclosure arrows anywhere. */
.issue-status-opt { width: 100%; }
.issue-status-summary::marker, .issue-assignees-summary::marker { content: none; }
.issue-status-summary, .issue-assignees-summary { list-style-type: none; }

/* Table | Board view toggle. */
.issues-view-toggle { display: flex; gap: 6px; margin-bottom: 12px; }
.iv-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13px; padding: 4px 11px; color: var(--text-muted);
  background: transparent; border: 1px solid transparent; border-radius: 999px; cursor: pointer;
}
.iv-btn svg { width: 14px; height: 14px; }
.iv-btn:hover { color: var(--text); }
.iv-btn.is-active { color: var(--text); background: rgba(127, 127, 127, 0.14); }

/* Kanban board — one column per status. */
.issues-kanban { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.kanban-col {
  flex: 1 1 0; min-width: 210px;
  background: rgba(127, 127, 127, 0.06); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px;
}
.kanban-col-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.kanban-count {
  min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px;
  font-size: 12px; line-height: 20px; text-align: center; color: var(--text);
  background: rgba(127, 127, 127, 0.24);   /* darker than the column + status chip greys */
}
.kanban-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 8px; }
.issue-card {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: border-color 0.12s;
}
.issue-card:hover { border-color: var(--accent); }
.issue-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.issue-card-name { font-size: 14px; font-weight: 500; color: var(--text); }
.issue-card-name .ref-tag { font-weight: 400; margin-right: 6px; }
.issue-panel-ref { margin-bottom: 4px; }
.issue-card-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.issue-card-meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--text-muted); }
.issue-card-due { display: inline-flex; align-items: center; gap: 5px; }
.issue-card-due svg { width: 13px; height: 13px; }

/* Kanban fixes: [hidden] must beat display:flex; new status palette; drag states. */
.issues-kanban[hidden] { display: none; }
.issue-status.s-icebox  { background: #E3E2E0; color: #32302C; }
.issue-status.s-backlog { background: #FDECC8; color: #402C1B; }
.issue-status.s-done    { background: #DBEDDB; color: #1C3829; }
.issue-status.s-cancelled { background: #FFE2DD; color: #5D1715; }   /* Notion red (Tom, 14 Sep 2026) */
.issue-card[draggable="true"] { cursor: grab; }
.issue-card.dragging { opacity: 0.5; cursor: grabbing; }
.kanban-col.drag-over { border-color: var(--accent); background: rgba(31, 185, 167, 0.06); }

/* Card chips/due toggle via [hidden] — must beat their flex display. */
.issue-card-chips[hidden], .issue-card-due[hidden] { display: none; }

/* Past its due date and not Done — flagged in red on the card and in the table. */
.issue-card-due.is-overdue, .issue-card-due.is-overdue .icd-t,
.issue-due-cell.is-overdue { color: var(--neg); font-weight: 500; }
/* Every kanban card stands the same height (the tallest card's), so the columns
   read as an even grid. The height is measured and applied by sizeIssueCards —
   content decides it, nothing is clipped; the meta line settles to the bottom. */
.issue-card-meta { margin-top: auto; }

/* Issues list type matches the board agenda body size (15px). */
.issues-table { font-size: 14px; }
.issue-prop-value, .issue-desc, .issue-desc-input, .issue-comment-text,
.issue-comment-input, .issue-topic-input, .issue-add-input, .issue-card-name,
.ndate-display { font-size: 14px; }
.issue-prop-label { font-size: 14px; }
.issue-comment-author { font-size: 14px; }
.issue-assignee-opt { font-size: 14px; }

/* Description auto-sizes to its content (JS sets height; no manual resize handle). */
.issue-desc-input { resize: none; overflow: hidden; min-height: 74px; }

/* Issue title lives in the drawer header while the panel is open. */
.drawer-title { flex: 1; min-width: 0; }
.drawer-head .issue-title-input { margin: 0; font-size: 18px; font-weight: 600; width: 100%; }

/* Description formatting toolbar. */
.issue-desc-toolbar { display: flex; gap: 2px; margin-bottom: 5px; }
.idt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 24px; padding: 0 5px;
  font: inherit; font-size: 13px; color: var(--text-muted);
  background: transparent; border: 0; border-radius: 5px; cursor: pointer;
}
.idt-btn svg { width: 14px; height: 14px; }
.idt-btn:hover { background: rgba(127, 127, 127, 0.12); color: var(--text); }
.idt-btn.idt-i em { font-family: Georgia, serif; }

/* Topics as add/delete tags. */
.issue-topics { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.topic-tag { display: inline-flex; align-items: center; gap: 4px; }
.topic-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; padding: 0; margin-left: 2px;
  font-size: 13px; line-height: 1; color: inherit; opacity: 0.55;
  background: transparent; border: 0; border-radius: 50%; cursor: pointer;
}
.topic-del:hover { opacity: 1; background: rgba(0, 0, 0, 0.12); }
.issue-topic-add {
  font: inherit; font-size: 14px; padding: 3px 6px; width: 90px;
  color: var(--text); background: transparent; border: 0; outline: 0;
}
.issue-topic-add::placeholder { color: var(--text-muted); opacity: 0.8; }

/* WYSIWYG description editor (contenteditable). */
.issue-desc-edit { min-height: 74px; height: auto !important; outline: 0; cursor: text; }
.issue-desc-edit:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-radius: 6px; }
.issue-desc-edit:empty::before { content: attr(data-placeholder); color: var(--text-muted); opacity: 0.8; }
.issue-desc-edit p { margin: 0 0 6px; }
.issue-desc-edit ul, .issue-desc-edit ol { margin: 0 0 6px; padding-left: 22px; }
.issue-desc-edit a, .issue-desc a { color: var(--accent); cursor: pointer; }

/* Tags and chips at body text size. */
.ntag, .issue-status, .achip { font-size: 14px; font-weight: 350; }
.achip-av { width: 22px; height: 22px; font-size: 11.5px; }

/* Revert tags/chips to their compact sizes (undo the body-size experiment). */
.ntag, .issue-status { font-size: 12px; }
.achip { font-size: 12.5px; }
.achip-av { width: 20px; height: 20px; font-size: 10.5px; }
/* Topic picker mirrors the Assign field (summary shows the tags, menu to pick). */
.issue-topics-select { position: relative; }
.issue-topics-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; cursor: pointer; }
.issue-topics-summary::-webkit-details-marker { display: none; }
.issue-topics-summary::marker { content: none; }

/* Sub tasks — title + single-assignee rows in the issue panel. */
.subtask-rows { display: flex; flex-direction: column; gap: 6px; }
.subtask-row { display: flex; align-items: center; gap: 8px; }
.subtask-title {
  flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 5px 7px;
  color: var(--text); background: rgba(244, 247, 247, 0.05);
  border: 1px solid var(--border); border-radius: 6px;
}
.subtask-title:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.subtask-assignee { position: relative; flex: 0 0 auto; }
.subtask-assignee-summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-width: 90px; }
.subtask-assignee-summary::-webkit-details-marker { display: none; }
.subtask-assignee-summary::marker { content: none; }
.subtask-opt { width: 100%; font: inherit; background: transparent; border: 0; cursor: pointer; }
.subtask-add { margin-top: 8px; }
.subtask-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }

/* Placeholder metric cards carry a TEST watermark until wired to real data. */
.metric-card.is-placeholder { position: relative; overflow: hidden; }
.test-watermark {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(127, 127, 127, 0.16); transform: rotate(-18deg);
  pointer-events: none; z-index: 1; user-select: none;
}

/* Kanban card due date carries an explicit label. */
.icd-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 600; }

/* Sub task rows: shorter title box; assignee column left-aligned with room
   for long names (grows further when the panel is maximised). */
.subtask-title { flex: 1 1 52%; min-width: 0; }
.subtask-assignee { flex: 1 1 48%; min-width: 150px; }
.subtask-assignee-summary { width: 100%; min-width: 0; justify-content: flex-start; }

/* Issues toolbar: + Add issue on the left of the view toggle; sortable headers. */
.issues-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.issues-toolbar .issue-add-form { margin-top: 0; }
.issues-toolbar .post-action-add { margin-top: 0; }
/* "+ Add issue": a solid teal outline, not the dashed add-row style (Tom, 14 Sep 2026). */
.issues-toolbar .issue-add-form .post-action-add { border: 1px solid var(--accent); }
.issues-toolbar .issues-view-toggle { margin-bottom: 0; }
.th-sort {
  display: inline-flex; align-items: center; gap: 5px; padding: 0;
  font: inherit; font-size: inherit; text-transform: inherit; letter-spacing: inherit;
  color: inherit; font-weight: inherit; background: transparent; border: 0; cursor: pointer;
}
.th-sort:hover { color: var(--text); }
.sort-arrow { font-size: 9px; min-width: 10px; }

/* Kanban card due date matches the topic tag size. */
.issue-card-due { font-size: 12px; }
.icd-label { font-size: 12px; letter-spacing: 0.04em; }
/* Due date on a card in the card's own type (Tom, 14 Sep 2026): "Due date:" in
   plain sentence case like every other line, not a bold small-caps label. */
.issue-card .icd-label { font-size: 12px; font-weight: 350; letter-spacing: 0; text-transform: none; }
/* Issue panel: every value starts on one left edge, the pills' (Tom, 14 Sep
   2026). The Type / Board meeting selects and the date button keep their hover
   padding but shift left by it, so their text lines up with a pill's edge. */
.issue-prop-value select.issue-kind, .issue-prop-value select.issue-meeting { margin-left: -7px; }
.issue-prop-value .ndate-display { margin-left: -9px; }
.issue-prop-value .issue-assignees-summary { margin-left: -8px; }   /* its 1px hover border + 7px padding */

/* Sub task title gets more room in the normal (non-maximised) panel width;
   the maximised view keeps the generous assignee column. */
.drawer:not(.maximized) .subtask-title { flex: 1 1 64%; }
.drawer:not(.maximized) .subtask-assignee { flex: 1 1 36%; min-width: 128px; }

/* Empty description invites writing at 3x height; once there's content it
   auto-sizes to the text as before. */
.issue-desc-edit:empty { min-height: 222px; }

/* ...and 3x is the standing minimum — content grows it beyond that. */
.issue-desc-edit { min-height: 222px; }

/* Topic delete × sits at the right edge of each menu option (after the ✓). */
.issue-assignee-opt::after { order: 5; }
.topic-x {
  order: 6; flex: 0 0 auto; margin-left: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; font-size: 14px; line-height: 1;
  color: var(--text-muted); background: transparent; border: 0; border-radius: 5px; cursor: pointer;
}
.topic-x:hover { color: #e5687a; background: rgba(127, 127, 127, 0.12); }

/* Empty Assign field shows an outline button (same style as + Add issue). */
.assign-btn {
  display: inline-block; font-size: 13px; padding: 4px 10px;
  color: var(--accent); background: transparent;
  border: 1px dashed var(--border); border-radius: 6px; cursor: pointer;
}
.issue-assignees-summary:hover .assign-btn { border-color: var(--accent); background: rgba(31, 185, 167, 0.08); }

/* Placeholder charts share the TEST watermark treatment. */
.chart-card.is-placeholder { position: relative; overflow: hidden; }

/* Action items grouped by assignee — avatar-chip header, indented rows. */
.action-group { margin: 10px 0 4px; }
.action-group-head { margin-bottom: 4px; }
.action-group .action-check { padding-left: 28px; }
.action-group .agenda-actions { padding-left: 46px; }

/* Useful Information card bodies read in full text colour (was muted). */
.info-body { color: var(--text); }

/* ---- Deal Memos table (hub tab; the memo tool is an operator extra) ---- */
.dm-table .dm-name { font-weight: 600; color: var(--text); text-decoration: none; }
.dm-table a.dm-name:hover { text-decoration: underline; }
.dm-site { font-size: 12px; margin-top: 2px; }
.dm-site a { color: var(--text-muted); text-decoration: none; }
.dm-site a:hover { text-decoration: underline; }
.dm-rec { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.dm-rec-buy   { background: rgba(34, 160, 82, 0.18);  color: #1d8a47; }
.dm-rec-wait  { background: rgba(224, 158, 32, 0.18); color: #b07b12; }
.dm-rec-run   { background: rgba(214, 69, 69, 0.18);  color: #c23434; }
.dm-rec-other { background: rgba(128, 128, 128, 0.18); color: var(--text-muted); }
body:not(.light) .dm-rec-buy  { color: #4cc57e; }
body:not(.light) .dm-rec-wait { color: #e0b45a; }
body:not(.light) .dm-rec-run  { color: #e07070; }
.dm-files a { color: var(--text); text-decoration: none; margin-right: 8px; }
.dm-files a:hover { text-decoration: underline; }
.dm-share { white-space: nowrap; }
.dm-share-form { display: inline-block; margin: 0; }
.dm-share-copy, .dm-share-make, .dm-share-revoke {
  font: inherit; font-size: 12.5px; padding: 3px 10px; border-radius: 6px;
  border: 1px solid var(--border); background: transparent; color: var(--text);
  cursor: pointer;
}
.dm-share-copy:hover, .dm-share-make:hover { border-color: var(--accent); color: var(--accent); }
.dm-share-revoke { color: var(--text-muted); border: 0; text-decoration: underline; padding: 3px 4px; }
.dm-share-revoke:hover { color: #c23434; }
.dm-note { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; }
.dm-empty { color: var(--text-muted); }

/* Deal Memos: fixed equal-height rows; long text truncates with ellipsis. */
.dm-table td { height: 58px; padding-top: 6px; padding-bottom: 6px; }
.dm-ref { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dm-table .dm-name { display: block; max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-site { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.dm-imref, .dm-broker { display: block; max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-date, .dm-date-col { white-space: nowrap; }
.dm-table td.dm-rec-cell, .dm-table th.dm-rec-col { text-align: center; }
.dm-folk { color: var(--text); text-decoration: none; white-space: nowrap; }
.dm-folk:hover { text-decoration: underline; }

/* Broker pills — Folk Broker Tag colours (--pill set inline per option). */
.dm-broker-pill {
  display: inline-block; max-width: 170px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; padding: 2px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  background: color-mix(in srgb, var(--pill) 18%, transparent);
  color: var(--pill);
}
body.light .dm-broker-pill { color: color-mix(in srgb, var(--pill) 78%, black); }
/* People with access, under the memo table */
.dm-people { margin-top: 28px; }
.dm-people-hd { font-size: 13px; font-weight: 600; margin: 0 0 10px; }
.dm-people-hd span { font-weight: 400; color: var(--muted, #64748b); margin-left: 6px; font-size: 12.5px; }
.dm-guest-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #8a5a00; border: 1px solid #f0c36d; background: #fff8e6; vertical-align: 1px;
}
.dm-p-acts { white-space: nowrap; text-align: right; }
.dm-p-acts button + button { margin-left: 6px; }
tr.dm-p-expired td { color: var(--muted, #94a3b8); }
/* a live (editable, recalculating) memo, next to its name */
.dm-live-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #0f766e; border: 1px solid #9fd9d1; background: #f0fbf9; vertical-align: 1px;
}

/* Deal-memo viewer inside the drawer: edge-to-edge iframe. */
.drawer.memo .drawer-body { padding: 0; overflow: hidden; }
.drawer-memo-frame { display: block; width: 100%; height: 100%; border: 0; background: #f1f5f9; }
.dm-table tr.is-clickable { cursor: pointer; }
.dm-table tr.is-clickable:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* Recording reminder — pinned above the OPEN meeting's agenda until a staff
   member confirms the transcription service is running (per meeting; a new
   meeting date brings it back). Amber: a must-do, not an error. */
.rec-reminder {
  --rec: #b45309;
  --rec-on: #ffffff;
  display: flex; align-items: center; gap: 14px;
  margin: 30px 0 4px; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--rec) 45%, transparent);
  border-left: 4px solid var(--rec);
  border-radius: 10px;
  background: color-mix(in srgb, var(--rec) 12%, transparent);
}
body.theme-slate:not(.light) .rec-reminder { --rec: #f0a92e; --rec-on: #21190a; }
.rec-reminder-icon { width: 22px; height: 22px; flex: 0 0 auto; color: var(--rec); }
.rec-reminder-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; line-height: 1.45; }
.rec-reminder-text strong { color: var(--rec); font-size: 14.5px; font-weight: 600; }
.rec-reminder-text span { color: var(--text); font-size: 14px; }
.rec-reminder form { margin: 0; }
.rec-reminder-btn {
  font: inherit; font-size: 13px; font-weight: 600; padding: 7px 16px;
  color: var(--rec-on); background: var(--rec); border: 1px solid var(--rec);
  border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.rec-reminder-btn:hover { filter: brightness(1.06); }
.rec-reminder-btn:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 620px) {
  .rec-reminder { flex-wrap: wrap; }
  .rec-reminder-text { flex: 1 1 100%; }
}
.minutes-flow-note { margin: 6px 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* ---- Board Minutes tab: MD call to action + side-by-side signing modal ---- */
.mtab-n.mtab-sign { background: var(--accent); color: #fff; }
.mtab.is-active .mtab-n.mtab-sign { background: var(--accent); color: #fff; }
.meeting-minutes { margin: 0; }
.minutes-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; padding: 14px 16px; border-radius: 10px;
  background: rgba(23, 153, 138, 0.10); border: 1px solid var(--accent);
}
.minutes-cta-text { flex: 1 1 320px; font-size: 14px; line-height: 1.5; }
.minutes-cta-text strong { display: block; margin-bottom: 2px; }
.minutes-cta-btn { font-size: 14px; padding: 9px 22px; }
dialog.sign-modal {
  padding: 0; border: 1px solid var(--panel-border); border-radius: var(--panel-radius); overflow: hidden;
  width: min(1240px, 96vw); height: min(900px, 94vh); max-width: none; max-height: none;
  background: var(--panel); color: var(--text); box-shadow: var(--panel-shadow);
}
dialog.sign-modal::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
/* The one-off confirmation after the MD signs: what happens next. */
dialog.signed-modal {
  padding: 0; border: 1px solid var(--panel-border); border-radius: var(--panel-radius); width: min(520px, 92vw);
  background: var(--panel); color: var(--text); box-shadow: var(--panel-shadow);
}
dialog.signed-modal::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sd-frame { padding: 28px 28px 24px; text-align: left; }
.sd-tick {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-size: 24px; font-weight: 700; color: #fff; background: var(--pos); margin-bottom: 14px;
}
.sd-title { margin: 0 0 8px; font-size: 19px; font-weight: 600; }
.sd-lead { margin: 0 0 8px; color: var(--text-muted); font-size: 14px; }
.sd-steps { margin: 0 0 20px; padding-left: 20px; font-size: 14px; line-height: 1.55; }
.sd-steps li + li { margin-top: 6px; }
.sd-done { font-size: 14px; padding: 8px 22px; }
.sm-frame { display: flex; flex-direction: column; height: 100%; }
.sm-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
}
.sm-title { font-weight: 600; font-size: 16px; }   /* the house modal heading */
.sm-sub { font-weight: 400; font-size: 13px; color: var(--text-muted); margin-left: 10px; }
.sm-close { font-size: 26px; line-height: 1; padding: 0 4px; background: none; border: 0; color: var(--text-muted); cursor: pointer; }
.sm-close:hover { color: var(--text); }
.sm-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
.sm-doc { min-height: 0; overflow-y: auto; padding: 16px; background: rgba(127, 127, 127, 0.12); }
.minutes-pages.sm-pages { max-height: none; overflow: visible; padding: 0; background: none; }
.sm-links { justify-content: center; margin-top: 12px; }
.sm-sign { min-height: 0; overflow-y: auto; padding: 16px 18px; border-left: 1px solid var(--border); }
.sm-sign-title { font-weight: 600; font-size: 14px; }
.sm-sign-help { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); }
.sm-sign .minutes-sign-form { margin-top: 12px; gap: 12px; max-width: none; }
.sm-sign .minutes-sign-btn { align-self: stretch; }
/* Narrow screens: minutes on top, signing pinned to the bottom, always visible. */
@media (max-width: 860px) {
  dialog.sign-modal { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .sm-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .sm-sign { border-left: 0; border-top: 1px solid var(--border); max-height: 60dvh; box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.15); }
  .sm-sub { display: block; margin-left: 0; }
}

/* Issues List: Rock / Pebble (Tom, 11 Sep 2026). Rocks are the larger things
   the board discusses (brand plum tint); pebbles are to-dos (quiet grey). */
.kind-tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 500; line-height: 18px; white-space: nowrap;
}
.kind-tag.k-rock { color: #5c2e49; background: rgba(92, 46, 73, 0.14); }
.kind-tag.k-pebble { color: var(--text-muted); background: rgba(127, 127, 127, 0.16); }
body.theme-slate:not(.light) .kind-tag.k-rock { color: #e4cfdc; background: rgba(154, 140, 152, 0.3); }
.issue-card-kind { margin-top: 4px; }
.issue-kind, .issue-meeting {
  font: inherit; font-size: 14px; padding: 3px 6px; border-radius: 6px;
  color: var(--text); background: transparent; border: 1px solid transparent; cursor: pointer;
}
.issue-kind:hover, .issue-meeting:hover, .issue-kind:focus, .issue-meeting:focus { border-color: var(--border); outline: none; }
.ref-tag.ref-legacy { opacity: 0.7; }
.issue-meeting-cell, .issues-table .issue-due-cell, .issues-table th { white-space: nowrap; }

/* Outline button in the brand teal (same look as Send invite / Join Meeting). */
.btn-outline {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13px; font-weight: 500; padding: 5px 14px; line-height: 1.45;
  color: var(--accent); background: transparent; border: 1px solid var(--accent); border-radius: 6px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn-outline:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); text-decoration: none; }

/* Issues List filters: a wrap-around row beside Table / Board. A filter in use
   turns dark grey (Tom, 11 Sep 2026). The arrow is drawn here (not the
   browser's) so it stays visible on the dark fill. */
.issues-toolbar { flex-wrap: wrap; }
/* The filters group's controls sit straight in the toolbar row (Tom, 15 Sep 2026):
   search on the left beside Table / Board, then Show completed issues and Filters
   pushed to the right with room between them. The group element stays (the filter
   script reads its search box and remembers state on it); it just draws no box. */
.issues-filters { display: contents; }
.issues-filters > .if-done-toggle { margin-left: auto; }
.issues-filters > .if-menu-wrap { margin-left: 8px; }   /* + the toolbar's 14px gap = 22px */
.if-search, .if-select {
  font: inherit; font-size: 13px; color: var(--text); height: 30px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
}
.if-search { width: 170px; padding: 0 12px; }
/* Show completed issues (Tom, 11 Sep 2026): a small on/off switch. */
.if-done-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); cursor: pointer; white-space: nowrap; user-select: none; }
.if-done-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.if-switch { position: relative; width: 28px; height: 16px; border-radius: 999px; background: #c9ced3; transition: background 0.15s ease; flex: none; }
.if-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 0.15s ease; }
.if-done-toggle input:checked + .if-switch { background: var(--accent); }
.if-done-toggle input:checked + .if-switch::after { transform: translateX(12px); }
.if-done-toggle input:focus-visible + .if-switch { outline: 2px solid var(--accent); outline-offset: 2px; }
.if-done-toggle:has(input:checked) { color: var(--text); }
.kanban-col[hidden] { display: none; }
.if-select {
  padding: 0 26px 0 12px; cursor: pointer; width: 140px; text-overflow: ellipsis;
  -webkit-appearance: none; appearance: none;
  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 9px center; background-size: 13px;
}
.if-search:focus, .if-select:focus { outline: 2px solid #5e6e74; outline-offset: -1px; }
.if-select.is-active {
  color: #fff; background-color: #3f4649; border-color: #3f4649;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.if-select option { color: var(--text); background: var(--surface); }
body.theme-slate:not(.light) .if-select.is-active { background-color: #5e6669; border-color: #5e6669; }
/* The Filters dropdown (Tom, 14 Sep 2026): Type / Status / Assignee / Topic /
   Board meeting behind one button; the button turns dark grey with a count
   while any of them is in use. */
.if-menu-wrap { position: relative; }
.if-menu-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  font: inherit; font-size: 13px; color: var(--text); cursor: pointer; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
}
.if-menu-btn svg { width: 13px; height: 13px; }
.if-menu-btn:hover { border-color: #b9c0c6; }
.if-menu-btn:focus-visible { outline: 2px solid #5e6e74; outline-offset: -1px; }
.if-menu-btn.is-active { color: #fff; background: #3f4649; border-color: #3f4649; }
body.theme-slate:not(.light) .if-menu-btn.is-active { background: #5e6669; border-color: #5e6669; }
.if-menu-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; box-sizing: border-box;
  font-size: 11px; line-height: 18px; text-align: center; color: #3f4649; background: #fff;
}
.if-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;   /* opens leftwards: the group sits at the right edge */
  width: 250px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 10px; padding: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.if-menu[hidden] { display: none; }
/* The Issues List box must not clip its dropdowns (Tom, 14 Sep 2026): .widget's
   overflow: hidden cut the Filters panel off below its first field whenever the
   list under it was short. The table and board scroll sideways on their own. */
.widget.issues-list { overflow: visible; }
.if-field { display: flex; flex-direction: column; gap: 4px; }
.if-field-label { font-size: 11.5px; font-weight: 500; color: var(--text-muted); }
.if-menu .if-select { width: 100%; }
/* Due date custom range (Tom, 16 Sep 2026): From / To side by side under the select. */
.if-due-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: -4px; }
.if-due-range[hidden] { display: none; }
.if-due-range .ndate { display: block; }   /* the site's date picker wraps each input (ndateEnhance) */
.if-due-range .ndate-display {
  display: block; width: 100%; height: 30px; padding: 0 10px; text-align: left; font-size: 13px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
}
.if-due-range .ndate-display:hover { background: var(--surface); border-color: #b9c0c6; }
/* Saved views as tabs (Tom, 16 Sep 2026, Motion style): All issues + each view
   along a hairline; the active tab is ink with a 2px underline, * in teal when
   its filters have changed, and a ⋮ menu; + after a divider makes a new view. */
/* (The views bar, .ivt-*, is the ui-views component in ui.css.) */
.ivm-err[hidden] { display: none; }
.ivm-err { margin: 0; font-size: 12.5px; color: var(--neg); }
.ivm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ivm-cancel, .ivm-submit { font: inherit; font-size: 13px; height: 30px; padding: 0 14px; border-radius: 999px; cursor: pointer; }
.ivm-cancel { color: var(--text); background: none; border: 1px solid var(--border); }
.ivm-submit { color: #fff; background: #3f4649; border: 1px solid #3f4649; }
/* The summary line: always its own height, so the table never jumps. */
.if-summary { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; min-height: 24px; margin: 8px 0 14px; }   /* right-justified under the filters (Tom, 14 Sep 2026) */
.if-count { font-size: 12.5px; color: var(--text-muted); }
.if-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.if-tag { font-size: 12px; line-height: 20px; padding: 0 9px; border-radius: 999px; color: #fff; background: #3f4649; }
body.theme-slate:not(.light) .if-tag { background: #5e6669; }
.if-clear { font: inherit; font-size: 12.5px; color: var(--text-muted); background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 0 2px; }
.if-clear:hover { color: var(--text); }
.issues-list .issues-toolbar { margin-bottom: 0; }
.issues-list .if-hidden { display: none !important; }

/* The Issues List sits flat on the page, in a board agenda and on its own tab
   alike (Tom, 11 Sep 2026): toolbar and filters on the page, the table the only
   box. No glass card, border or shadow around the widget. */
body.theme-slate.light .widget.issues-list,   /* outranks the theme's glass .widget rules */
body.theme-slate .widget.issues-list,
.widget.issues-list.issues-list {
  background: transparent; box-shadow: none; border: 0; border-radius: 0; padding: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.issues-table { background: var(--surface); }   /* a solid sheet, like the agenda table */

/* A board meeting as its own page inside the Board Meetings tab (Tom, 11 Sep
   2026; it used to open as a full-screen overlay). While one is showing, the
   meetings list is hidden and only .meeting-page remains. */
.board-meetings.showing-meeting > :not(.meeting-page) { display: none !important; }
.meeting-page-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.meeting-back {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13.5px; color: var(--text-muted); text-decoration: none;
}
.meeting-back svg { width: 16px; height: 16px; }
.meeting-back:hover { color: var(--text); text-decoration: none; }
.meeting-page .meeting-detail { padding: 0; }

/* One meeting header box (Tom, 11 Sep 2026): the card in the list IS the top of
   the meeting page (the same element, moved on open). White, bordered, with a
   left bar: teal for the upcoming meeting, mauve for closed ones. The <article>
   around it is only a wrapper now, so it draws nothing itself. */
.board-meetings .meeting,
body.theme-slate .board-meetings .meeting,
body.theme-slate.light .board-meetings .meeting {
  background: none; border: 0; border-radius: 0; padding: 0; margin-bottom: 14px;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible;
}
.board-meetings .meeting:focus-visible { outline: none; }
.board-meetings .meeting-head.mdetail-head {
  display: block; margin: 0; padding: 18px 22px;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid #7c6674;
  border-radius: 10px; transition: border-color 0.15s ease;
}
body.theme-slate.light .board-meetings .meeting-head.mdetail-head { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 24px rgba(14, 14, 18, 0.07); }
body.theme-slate:not(.light) .board-meetings .meeting-head.mdetail-head { border-left-color: #9a8c98; }
.board-meetings .meeting-head.mdetail-head.is-open { border-left-color: var(--accent); }
/* In the list the box is the way in: pointer, hover border, chevron. */
.board-meetings .meeting .meeting-head { cursor: pointer; }
.board-meetings .meeting:hover .meeting-head { border-top-color: var(--accent); border-right-color: var(--accent); border-bottom-color: var(--accent); }
.board-meetings .meeting:focus-visible .meeting-head { box-shadow: 0 0 0 2px var(--accent); }
.meeting-head .meeting-chevron { margin-left: 4px; }
.meeting-page .meeting-chevron { display: none; }
.meeting-page .meeting-head.mdetail-head { margin-bottom: 26px; }
.meeting-page .mdetail-attendees-section { margin-top: 0; }
.meeting-page { padding-top: 22px; }   /* breathing room under the title, inside the panel */

/* The back link in the Board Meetings title, after the (i): ordinary link
   text, not the title's small-caps label style. */
.text-block h2 .meeting-back {
  margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--border);
  font-size: 13.5px; font-weight: 400; letter-spacing: 0; text-transform: none;
  line-height: 1.2; vertical-align: middle;
}
.meeting-back[hidden] { display: none; }

/* Past meetings: one slim line (Tom, 11 Sep 2026) — date, month end, then the
   tags and chevron on the right. The same box on the meeting page. */
.board-meetings .meeting-head.mdetail-head.is-closed {
  display: flex; align-items: center; gap: 16px; padding: 9px 22px;
}
.meeting-head.is-closed .mdetail-head-top { display: contents; }
.meeting-head.is-closed .mdetail-date-row { order: 1; }
.meeting-head.is-closed .mdetail-month-end { order: 2; margin: 0; font-size: 14px; color: var(--text-muted); }
.meeting-head.is-closed .mdetail-tags { order: 3; margin-left: auto; }
.meeting-head.is-closed .mdetail-date { font-size: 14px; margin-top: 0; }

/* Board Meetings list (Tom, 28 Sep 2026): the upcoming meeting is a large
   centred card; past meetings are rows of one table. */
body .widget.board-meetings > article.meeting.is-upcoming { max-width: 980px; margin: 18px auto 40px; }
body .board-meetings .meeting.is-upcoming .meeting-head.mdetail-head {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 44px 64px 40px; text-align: center; border-radius: 14px;
}
.board-meetings .meeting.is-upcoming .mdetail-head-top { display: contents; }
.board-meetings .meeting.is-upcoming .mdetail-date-row { order: 1; justify-content: center; }
.board-meetings .meeting.is-upcoming .mdetail-date { font-size: 26px; font-weight: 500; letter-spacing: -0.01em; margin-top: 0; }
.board-meetings .meeting.is-upcoming .mdetail-month-end { order: 2; justify-content: center; margin-top: 0; font-size: 15px; }
.board-meetings .meeting.is-upcoming .mdetail-tags { order: 3; justify-content: center; }
.board-meetings .meeting.is-upcoming .meeting-chevron { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; margin: 0; }

.meetings-table {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
body.theme-slate.light .meetings-table { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 24px rgba(14, 14, 18, 0.07); }
.meetings-table-head,
body .board-meetings .meetings-table .meeting .meeting-head.mdetail-head.is-closed {
  display: grid; align-items: center; column-gap: 16px;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr) 20px;
  padding: 0 22px;
}
.meetings-table-head {
  height: 38px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 1px solid var(--border);
}
body .widget.board-meetings .meetings-table > article.meeting { margin: 0; }
body .board-meetings .meetings-table .meeting .meeting-head.mdetail-head.is-closed {
  min-height: 48px; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none;
  transition: background-color 0.12s ease;
}
.meetings-table-head + .meeting .meeting-head.mdetail-head.is-closed { border-top: 0 !important; }
.board-meetings .meetings-table .meeting:hover .meeting-head { background: rgba(128, 128, 140, 0.07); }
.board-meetings .meetings-table .meeting:focus-visible .meeting-head { box-shadow: inset 0 0 0 2px var(--accent) !important; }
.meetings-table .meeting-head.is-closed .mdetail-tags { display: contents; }
.meetings-table .meeting-head.is-closed .mdetail-date-row { grid-column: 1; grid-row: 1; }
.meetings-table .meeting-head.is-closed .mdetail-month-end { grid-column: 2; grid-row: 1; }
.meetings-table .meeting-head.is-closed .minutes-tag { grid-column: 3; grid-row: 1; justify-self: start; }
.meetings-table .meeting-head.is-closed .meeting-type { grid-column: 4; grid-row: 1; justify-self: start; }
.meetings-table .meeting-head.is-closed .meeting-chevron { grid-column: 5; grid-row: 1; margin: 0; color: var(--text-muted); }
.meetings-table .meeting-head.is-closed .mdetail-date { color: var(--text); }
.meetings-table .meeting-head.is-closed .me-label { display: none; }

@media (max-width: 720px) {
  body .widget.board-meetings > article.meeting.is-upcoming { margin: 8px auto 28px; }
  body .board-meetings .meeting.is-upcoming .meeting-head.mdetail-head { padding: 28px 40px 26px 20px; gap: 12px; }
  .board-meetings .meeting.is-upcoming .mdetail-date { font-size: 20px; }
  .board-meetings .meeting.is-upcoming .meeting-chevron { right: 12px; }
  .meetings-table-head { display: none; }
  .meetings-table .meeting-head.is-closed .me-label { display: inline; }
  .meetings-table-head + .meeting .meeting-head.mdetail-head.is-closed { border-top: 0 !important; }
  body .board-meetings .meetings-table .meeting .meeting-head.mdetail-head.is-closed {
    grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; padding: 10px 16px;
  }
  .meetings-table .meeting-head.is-closed .mdetail-date-row { grid-column: 1; grid-row: 1; }
  .meetings-table .meeting-head.is-closed .mdetail-month-end { grid-column: 1; grid-row: 2; }
  .meetings-table .meeting-head.is-closed .minutes-tag { grid-column: 1; grid-row: 3; }
  .meetings-table .meeting-head.is-closed .meeting-type { grid-column: 2; grid-row: 2; justify-self: end; }
  .meetings-table .meeting-head.is-closed .meeting-chevron { grid-column: 2; grid-row: 1; justify-self: end; }
}

/* Meeting page: no header box, its date / month end / Join Meeting in the
   Board Meetings title after the back link (Tom, 11 Sep 2026). */
.text-block h2 .meeting-crumb, .meeting-page-bar .meeting-crumb {
  display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; vertical-align: middle;
  margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--border);
  font-size: 13.5px; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.2;
  color: var(--text);
}
.meeting-crumb[hidden] { display: none !important; }
.meeting-crumb .mc-me { color: var(--text-muted); }
/* Same height as Send invite (Tom, 11 Sep 2026): its size, padding and line height,
   with the title band made taller while a meeting is open so the button has room. */
.cell[data-section-title] .text-block:has(.meeting-crumb:not([hidden])) { padding-block: 11px; }
/* The Board Meetings overview has no title bar (Tom, 11 Sep 2026); it shows
   once a meeting is open, carrying the meeting's date and the ⓘ explainer. */
.cell[data-section-title]:has(.bm-process):not(:has(.meeting-crumb:not([hidden]))) { display: none; }
/* No title box on a company's Financials, Issues List and Useful Information tabs
   (Tom, 14 Sep 2026): the tab above already names the page. The widgets stay in
   the config because they ARE the tab keys; only the box is hidden. */
.cell[data-widget-id="financials-title"],
.cell[data-widget-id="issues-list-title"],
.cell[data-widget-id="useful-information-title"],
.cell[data-widget-id="key-information-title"],
.cell[data-widget-id="knowledge-base-title"] { display: none; }
/* Board Meetings (and the hub's board overview): hide the band by id from first
   paint (Tom, 15 Sep 2026). The :has(.bm-process) rule above only matches once the
   page script has moved the (i) explainer into the band, so the band flashed on
   load. It still shows as the meeting header card once a meeting is open. */
.cell[data-widget-id="board-meetings-title"]:not(:has(.meeting-crumb:not([hidden]))),
.cell[data-widget-id="board-overview-title"]:not(:has(.meeting-crumb:not([hidden]))) { display: none; }
.meeting-crumb .btn-join-meeting { padding: 5px 14px; font-size: 13px; line-height: 1.6; border-radius: 6px; }
/* The meeting page's header card (Tom, 14 Sep 2026). The title band becomes the
   page's clear title: a small "(i) < Board meetings" line, the date large on
   its own line, a smaller line of Month End / Virtual / Join Meeting, then the
   attendees, all in one white box. Supersedes the single-line crumb above. */
.cell[data-section-title] .text-block:has(> .meeting-crumb:not([hidden])) { padding: 16px 22px 18px; justify-content: flex-start; }
.cell[data-section-title] .text-block > .meeting-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin: 12px 0 0; padding: 0; border: 0;
  font-size: 13.5px; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.3; color: var(--text);
}
.text-block > .meeting-crumb .mc-date {
  flex: 0 0 100%; order: 0;
  font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1.6; color: var(--text);   /* body size, issue-name weight (Tom, 15 Sep 2026; was 24px) */
}
.text-block > .meeting-crumb .mc-me { order: 1; color: var(--text-muted); }
.text-block > .meeting-crumb .mc-type { order: 2; margin-left: 0; }
.text-block > .meeting-crumb .btn-join-meeting { order: 3; }
.text-block > .meeting-crumb .ml-edit { order: 4; margin-left: -8px; }
/* Attendees: the card's last line, under a hairline. The pencil sits beside
   the avatars, not at the far right on the end of a rule. */
.cell[data-section-title] .text-block > .mdetail-attendees-section {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border);
}
.text-block > .mdetail-attendees-section .mdetail-sub-head { justify-content: flex-start; }
.text-block > .mdetail-attendees-section .agenda-actions-title {
  flex: 0 0 auto; margin: 0; display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}
.text-block > .mdetail-attendees-section .agenda-actions-title::after { content: none; }
.text-block > .mdetail-attendees-section .attendees-head:hover .agenda-actions-title { color: var(--accent); }
.text-block > .mdetail-attendees-section .attendees-list li { line-height: 1.8; }
/* The meeting's section menu runs the full width under the card. */
.meeting-page .mtabs { width: 100%; box-sizing: border-box; }
.meeting-page { padding-top: 0; }
.meeting-page .mtabs-wrap { margin-top: 0; }
.meeting-page .mtabs-bar { padding-top: 12px; top: -12px; }

/* Board Meetings band without its label: the (i) leads, then (in a meeting)
   the back link and date line, so no separator before the first of them. */
.text-block h2.title-text-hidden .bm-process { margin-left: 0; }
.text-block h2.title-text-hidden .bm-info-btn { margin-left: 0; }

/* The title line fills the band so Virtual / In person sits at its right end. */
.text-block h2 .meeting-crumb { flex: 1 1 auto; }
.meeting-crumb .mc-type { margin-left: auto; display: inline-flex; align-items: center; }
.meeting-crumb .type-form { margin: 0; }

/* Light mode: a soft grey page with the content in white boxes (Tom, 11 Sep
   2026, "a bit like Hostinger"): section title bands, cards, the meeting menu
   and the tables are white; toolbars, filters and headings sit on the grey.
   (The old overlay panel gave this look; the meeting page had lost it.) */
body.theme-slate.light { --page-ground: #f3f3f4; background: var(--page-ground); }
body.theme-slate.light .cell[data-section-title] .widget.text-block {
  background: #ffffff; border: 1px solid #e6e8ea;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(14, 14, 18, 0.04);
}
/* The Board Meetings list and an open meeting's page sit straight on the grey;
   their cards, menu and tables are the white boxes. */
body.theme-slate.light .widget.board-meetings { box-shadow: none; }
body.theme-slate.light .mtabs-bar.is-stuck { background: var(--page-ground); }

/* Avatars on Useful Information (company contacts, board attendees, additional
   team members): each person's own left-hand-menu photo, which operator staff can
   add or change for them by clicking it (Tom, 11 Sep 2026). */
.cc-contact.has-pa, .ba-row.has-pa { display: flex; align-items: center; gap: 12px; }
.cc-contact.has-pa + .cc-contact.has-pa { margin-top: 10px; }
.cc-contact-text, .ba-text { min-width: 0; }
.pa { position: relative; flex: 0 0 auto; display: inline-flex; }
.pa-form { margin: 0; }
.pa-av {
  position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; flex: 0 0 auto;
  font-size: 15px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--accent), #5c2e49);
}
.pa-av.has-img { background: rgba(127, 127, 127, 0.14); }
.pa-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pa-av.is-editable { cursor: pointer; }
.pa-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pa-cam {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(14, 14, 18, 0.45); color: #fff; opacity: 0; transition: opacity 0.12s ease;
}
.pa-cam svg { width: 16px; height: 16px; }
.pa-av.is-editable:hover .pa-cam, .pa-av.is-editable:focus-within .pa-cam { opacity: 1; }
.pa-remove-form { position: absolute; top: -4px; right: -4px; margin: 0; }
.pa-remove {
  width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted); font-size: 13px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; opacity: 0; transition: opacity 0.12s ease;
}
.pa:hover .pa-remove, .pa-remove:focus-visible { opacity: 1; }
.pa-remove:hover { color: var(--neg); border-color: var(--neg); }
/* The same avatar at the start of each editor row (pencil mode), Tom 17 Sep 2026.
   Contact rows are a grid: photo | name + role over email | MD | remove, so the
   remove button no longer wraps onto a line of its own in the narrow panel. */
.pa-edit .pa-av { width: 36px; height: 36px; }
.cc-inline-form label.pa-av { display: grid; flex-direction: initial; gap: 0; margin: 0; font-size: 14px; color: inherit; }
.pa-av.pa-new { border-style: dashed !important; opacity: 0.45 !important; }
.cc-contact-row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr) auto auto;
  column-gap: 8px; row-gap: 6px; align-items: center;
}
.cc-contact-row > .pa-edit { grid-column: 1; grid-row: 1 / span 2; }
.cc-contact-row > input[name="contact_name"] { grid-column: 2; grid-row: 1; }
.cc-contact-row > input[name="contact_role"] { grid-column: 3; grid-row: 1; }
.cc-contact-row > input[name="contact_email"] { grid-column: 2 / span 2; grid-row: 2; }
.cc-contact-row > .cc-md-pick { grid-column: 4; grid-row: 1 / span 2; margin: 0; }
.cc-contact-row > .cc-contact-remove { grid-column: 5; grid-row: 1 / span 2; }
.cc-contact-row > input { width: 100%; box-sizing: border-box; }
.cc-contact-rows { gap: 14px; }

/* Agenda item 11: link to the minutes document itself (Tom, 11 Sep 2026). */
.minutes-doc-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accent); text-decoration: none; }
.minutes-doc-link:hover { text-decoration: underline; }
.minutes-doc-link .doc-icon { width: 15px; height: 15px; flex: 0 0 auto; }

/* Label colours (Tom, 14 Sep 2026): the palette button beside a Topic / Type
   tag and the swatch row it opens. Status colours are fixed (no button). */
.label-colour-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; margin-left: 4px; vertical-align: middle;
  border: 0; border-radius: 5px; background: transparent; color: var(--text-muted);
  cursor: pointer; opacity: 0.55;
}
.label-colour-btn svg { width: 14px; height: 14px; }
.label-colour-btn:hover, .label-colour-btn:focus-visible { opacity: 1; background: rgba(127, 127, 127, 0.14); outline: none; }
.issue-assignee-opt .label-colour-btn { margin-left: auto; }
.issue-assignee-opt .label-colour-btn + .topic-x { margin-left: 2px; }
.issue-kind-colour[hidden] { display: none; }
.label-colour-pop {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 10px; margin: 2px 0 4px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg, #fff);
}
.issue-prop-value .label-colour-pop { flex-basis: 100%; }
.lcp-swatch {
  width: 20px; height: 20px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12); cursor: pointer;
}
.lcp-swatch.is-current { box-shadow: 0 0 0 2px var(--accent); }
.lcp-swatch.lcp-default {
  width: auto; height: 22px; padding: 0 8px; border-radius: 999px;
  font: inherit; font-size: 12px; color: var(--text-muted); background: transparent;
}

/* A closed board meeting's Issues List (Tom, 14 Sep 2026): the list as it
   stood at close, read only. */
.issues-frozen-note {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 10px; font-size: 13px; color: var(--text-muted);
}
.issues-frozen-note svg { width: 14px; height: 14px; flex: none; }
.issue-topics-menu .label-colour-btn { order: 4; margin-left: auto; }
.issue-topics-menu .issue-assignee-opt::after { margin-left: 6px; }
.drawer-head .issue-title-static {
  display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  text-transform: none; color: var(--text); line-height: 1.3;
}
.issue-topics-menu .issue-assignee-opt::after { width: 12px; text-align: center; }

/* ===========================================================================
   Astra — floating launcher (bottom-right avatar) + chat window. Markup and
   open/minimise/close in dashboard.html; the avatar SVG is
   widgets/_astra_avatar.html and its eye animation lives in analytics_chat.html.
   Launcher z 35 and modal z 38 both sit under the side drawer (z 40/50).
   =========================================================================== */
.astra-fab {
  position: fixed; right: 24px; bottom: 22px; z-index: 35;
  width: 66px; height: 68px; padding: 0; border: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 8px 14px rgba(14, 14, 18, 0.3));   /* was her pink, while she was pink */
  transition: transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.4);
}
/* Room under the last row of a page so it can scroll clear of the launcher. */
body:has(.astra-fab) .content { padding-bottom: 110px; }
.astra-fab:hover { transform: translateY(-3px) scale(1.05); }
.astra-fab:active { transform: scale(0.96); }
.astra-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 50%; }
.astra-fab .ax-av { width: 100%; height: auto; transform-origin: 50% 90%; }
/* Sitting bottom-right, the launcher's eyes rest looking up-left towards the middle of
   the screen (Tom, 16 Sep 2026), not the chat avatar's up-right. */
.astra-fab .ax-av-look { transform: translate(-15px, -9px); }
/* Squish plays when the pointer arrives, not forever: a never-ending animation kept every
   portfolio page redrawing and made them slow on Tom's machine (16 Sep 2026). It pauses
   while someone types (is-quiet, set in analytics_chat.html). */
.astra-fab:hover .ax-av { animation: astra-squish-hover 0.9s ease-in-out; }
@keyframes astra-squish-hover { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.06, 0.94); } 60% { transform: scale(0.98, 1.02); } }
.astra-fab.is-quiet .ax-av, .astra-fab.is-quiet .ax-av * { animation-play-state: paused; }
@keyframes astra-fab-in { from { opacity: 0; transform: translateY(14px) scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes astra-squish { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, 0.975); } }

/* Modal (Tom, 2026-09-15): fills the page area under the tab bar, so the sidebar,
   company name and tabs stay in view. The outer layer is a liquid-glass frame about
   an inch thick (the page shows through it); the chat sits on a white sheet inside.
   --astra-top / --astra-left come from the tab bar + content column (dashboard.html). */
.astra-window {
  --astra-gap: min(1in, 8vw, 8vh);
  position: fixed; z-index: 38;
  top: calc(var(--astra-top, 150px) + 8px); left: calc(var(--astra-left, 248px) + 16px); right: 16px; bottom: 16px;
  display: flex; padding: var(--astra-gap); box-sizing: border-box;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.06) 34%, rgba(255, 255, 255, 0.02) 62%, rgba(255, 255, 255, 0.18) 100%);
  -webkit-backdrop-filter: blur(3.5px) saturate(190%) contrast(1.04);
  backdrop-filter: blur(3.5px) saturate(190%) contrast(1.04);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.3),
    inset 1px 0 0 rgba(255, 255, 255, 0.35),
    inset 0 22px 44px -30px rgba(255, 255, 255, 0.8),
    inset 0 -18px 40px -32px rgba(255, 105, 180, 0.18),
    0 30px 80px rgba(14, 14, 18, 0.16),
    0 2px 10px rgba(14, 14, 18, 0.06);
  color: var(--text);
  opacity: 0; transform: translateY(10px) scale(0.985); transform-origin: bottom right;
  transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.astra-window.open { opacity: 1; transform: none; }
.astra-window[hidden], .astra-fab[hidden] { display: none; }   /* display:flex above would otherwise beat [hidden] */
html.astra-open, html.astra-open body { overflow: hidden; }
.astra-sheet {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: #ffffff; border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(14, 14, 18, 0.06), 0 14px 40px rgba(14, 14, 18, 0.16);
}
body.theme-slate:not(.light) .astra-window {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.03) 65%, rgba(255, 255, 255, 0.12) 100%);
  border-color: rgba(255, 255, 255, 0.22);
}
body.theme-slate:not(.light) .astra-sheet { background: rgb(17, 17, 20); }
.astra-window-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--border); flex: none;
}
.astra-window-title { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; color: var(--text); }
.astra-window-av { display: inline-block; width: 24px; }
.astra-window-av .ax-av { width: 100%; height: auto; }
.astra-window-body { flex: 1; min-height: 0; display: flex; }
/* Connection pill beside the title: company VPS + Claude account, green/red health dot. */
.astra-head-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.astra-conn { position: relative; min-width: 0; }
.astra-conn[hidden] { display: none; }
.astra-conn-btn {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 4px 11px 4px 9px; border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; line-height: 1.3; cursor: pointer;
}
.astra-conn-btn:hover, .astra-conn-btn[aria-expanded="true"] { color: var(--text); border-color: var(--text-muted); }
.astra-conn-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.astra-conn-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-muted); }
.astra-conn.ok > .astra-conn-btn .astra-conn-dot, .astra-conn-row.ok .astra-conn-dot { background: var(--pos); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pos) 22%, transparent); }
.astra-conn.bad > .astra-conn-btn .astra-conn-dot, .astra-conn-row.bad .astra-conn-dot { background: var(--neg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--neg) 22%, transparent); }
.astra-conn-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; width: max-content; max-width: min(360px, 80vw);
  padding: 6px; border: 1px solid var(--border); border-radius: 12px;
  background: #ffffff; box-shadow: 0 12px 32px rgba(14, 14, 18, 0.16);
}
body.theme-slate:not(.light) .astra-conn-pop { background: rgb(26, 26, 30); }
.astra-conn-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; }
.astra-conn-row .astra-conn-dot { margin-top: 5px; }
.astra-conn-name { font-size: 14px; color: var(--text); }
.astra-conn-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.astra-window .widget.ax { flex: 1; height: auto; min-height: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
/* Astra's glow (Tom, 18 Sep 2026): like Apple Intelligence's edge light, a violet, pink and peach rim with a soft
   glow outside it (none inside), around the chat wherever it shows (this window, docked or not, and the
   Financials tab's panel), to set it apart from the rest of the page. Still: no motion (16 Sep: motion was removed). */
body {
  /* One set of colours for the rim and the glow, side by side: violet along the top, pink down the right, peach
     along the bottom, blue violet down the left (Tom, 18 Sep 2026). */
  --astra-rim: conic-gradient(from 0deg, #9b7bff, #f27ac8 25%, #ff9f7a 50%, #8f8cff 75%, #9b7bff);
  --astra-glow-out: 0 -8px 24px -11px rgba(155, 123, 255, 0.6), 9px 0 24px -11px rgba(242, 122, 200, 0.5),
                    0 9px 24px -11px rgba(255, 159, 122, 0.55), -9px 0 24px -11px rgba(143, 140, 255, 0.55);
  --astra-glow-in: 0 0 0 0 transparent;  /* the glow is outside only: the chat inside stays plain (Tom, 18 Sep 2026) */
}
.astra-glow-rim, .astra-sheet::before {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  border-radius: inherit; padding: 1.5px; background: var(--astra-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.astra-sheet { position: relative; box-shadow: var(--astra-glow-out), var(--astra-glow-in); }
/* Docked along the bottom (Tom, 18 Sep 2026): just the sheet, across the content column, the page in use above it
   and room under the page to scroll clear of it. Its top edge drags to set the height. */
.astra-grip { display: none; }
.astra-window.docked {
  top: auto; height: var(--astra-dock-h, 42vh); bottom: 0; left: var(--astra-in-left, 276px); right: var(--astra-in-right, 16px);
  padding: 0; border: 0; border-radius: 18px 18px 0 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Short: the welcome picture and greeting give way to the chat. */
.astra-window.docked .ax-hero, .astra-window.docked .ax-avatar, .astra-window.docked .ax-greeting { display: none; }
.astra-window.docked .astra-sheet { position: relative; border-radius: 18px 18px 0 0; box-shadow: var(--astra-glow-out), var(--astra-glow-in), 0 -10px 40px rgba(14, 14, 18, 0.14); }
body.theme-slate:not(.light) .astra-window.docked .astra-sheet { box-shadow: var(--astra-glow-out), var(--astra-glow-in), 0 -10px 40px rgba(0, 0, 0, 0.4); }
.astra-window.docked .astra-grip { display: block; position: absolute; top: 0; left: 0; right: 0; height: 8px; z-index: 2; cursor: row-resize; touch-action: none; outline: none; }
.astra-window.docked .astra-grip::after { content: ''; position: absolute; left: 50%; top: 3px; transform: translateX(-50%); width: 44px; height: 4px; border-radius: 4px; background: transparent; }  /* shown only on hover (Tom, 18 Sep 2026) */
.astra-window.docked .astra-grip:hover::after, .astra-window.docked .astra-grip:focus-visible::after, html.astra-resizing .astra-window.docked .astra-grip::after { background: var(--accent); }
html.astra-docked main.content { padding-bottom: calc(var(--astra-dock-h, 42vh) + 20px); }
html.astra-resizing, html.astra-resizing * { cursor: row-resize !important; user-select: none; -webkit-user-select: none; }
.astra-dock-btn .to-window, .astra-window.docked .astra-dock-btn .to-bottom { display: none; }
.astra-window.docked .astra-dock-btn .to-window { display: inline; }

/* Astra's entry in the menu carries a bright pink dot at its icon while she waits for an approval
   (Tom, 5 Oct 2026): static/routine_attention.js sets .needs-you. It pulses very slightly, at Tom's
   request the same day, and is the one thing here that moves. The 16 Sep slowness came from an
   animation that made pages repaint; this one changes only transform and opacity on two 9px dots
   with layers of their own, so nothing else is redrawn. It stops for people who ask for less motion. */
.sec-link.needs-you .side-ico, .side-link.needs-you .side-ico { position: relative; overflow: visible; }
.sec-link.needs-you .side-ico::before, .side-link.needs-you .side-ico::before,
.sec-link.needs-you .side-ico::after, .side-link.needs-you .side-ico::after {
  content: ""; position: absolute; top: -4px; right: -5px; width: 9px; height: 9px; border-radius: 50%;
  background: #FF69B4; will-change: transform, opacity;
}
/* the dot, breathing a little */
.sec-link.needs-you .side-ico::after, .side-link.needs-you .side-ico::after {
  box-shadow: 0 0 0 2px #17181c; animation: astra-dot 2.6s ease-in-out infinite;
}
/* a soft ring that drifts out from it and fades */
.sec-link.needs-you .side-ico::before, .side-link.needs-you .side-ico::before {
  opacity: 0; animation: astra-dot-ring 2.6s ease-out infinite;
}
@keyframes astra-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes astra-dot-ring { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(2.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sec-link.needs-you .side-ico::before, .sec-link.needs-you .side-ico::after,
  .side-link.needs-you .side-ico::before, .side-link.needs-you .side-ico::after { animation: none; }
}

/* Beside the page (Tom, 4 Oct 2026; a dashboard's `home` option): no window over the page and no
   glass, just her sheet docked on the right under the header, the full height of the page. The
   page gives up that width and stays in use; the header keeps its full width over both. A panel
   a page docks on the right itself (the CRM's record) moves over rather than sitting under her. */
body { --astra-side-w: 424px; }
.astra-window.side {
  top: var(--astra-top, 102px); left: auto; right: 0; bottom: 0; width: min(var(--astra-side-w), 100vw);
  padding: 10px 10px 10px 4px; border: 0; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; transform: none; transition: none;
}
.astra-window.side .astra-sheet { border-radius: 14px; }
.astra-window.side .astra-window-head { padding: 6px 6px 6px 8px; gap: 6px; }
.astra-window.side .astra-head-left { gap: 8px; }
.astra-window.side .astra-conn-text { display: none; }   /* the dot alone; click it for the detail */
.astra-window.side .astra-conn-btn { padding: 6px; border-color: transparent; }
/* (the dot alone has no ring round it, nor one under the mouse or while its details are open: Tom, 9 Oct 2026. The keyboard's
   focus ring is the browser's own, and stays.) */
.astra-window.side .astra-conn-btn:hover, .astra-window.side .astra-conn-btn[aria-expanded="true"] { border-color: transparent; }
.astra-window.side .drawer-actions { gap: 0; }
.astra-ctx { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; padding: 3px 9px; border-radius: var(--ui-r-pill, 999px); background: var(--ui-fill-strong, rgba(127, 127, 127, .14)); font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.astra-ctx-v { min-width: 0; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.astra-expand-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
html.astra-side main.content { padding-right: calc(var(--astra-side-w) + var(--content-pad-x, 28px)); }
html.astra-side .content .dash-head .topnav { margin-right: calc(0px - var(--astra-side-w) - var(--content-pad-x, 28px)); }
html.astra-side .ui-panel { right: var(--astra-side-w); }

@media (max-width: 760px) {
  .astra-fab { right: 14px; bottom: 14px; width: 56px; height: 58px; }
  /* Phones: no room for the frame, so the sheet fills the screen. */
  .astra-window { inset: 0; z-index: 150; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .astra-window.side { inset: 0; width: auto; padding: 0; }   /* phones: the whole screen, as before */
  .astra-window.side .astra-sheet { border-radius: 0; }
  .astra-window.docked { inset: 0; height: auto; }  /* phones: always the whole screen */
  .astra-dock-btn, .astra-window.docked .astra-grip { display: none; }
  html.astra-docked main.content { padding-bottom: 0; }
  .astra-sheet { border-radius: 0; box-shadow: none; }
  .astra-conn-text { display: none; }   /* phones: just the dot; tap for details */
  .astra-conn-btn { padding: 7px; }
  .astra-window .widget.ax { height: auto; }
  .astra-window .ax-main { flex: 1; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .astra-fab, .astra-fab *, .astra-window { animation: none !important; transition: none !important; }
}

/* ---- People without a photo: outline circle + initials (Tom, 2026-09-15) -----
   Near-white outline and initials on the dark theme, black on light. The left
   rail stays dark in both themes, so the menu avatar always uses the light ink.
   Agent identity badges (coloured) are deliberately untouched. */
.pa-av:not(.has-img),
.achip-av:not(:has(img)),
.issue-comment-avatar:not(:has(img)),
.ba-pick-av.no-img,
.pd-av-fallback,
.pd-fa-fallback {
  background: transparent !important;
  border: 1.5px solid #f4f7f7;
  border-radius: 50%;
  box-sizing: border-box;
  color: #f4f7f7;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 1 !important;
}
body.light .pa-av:not(.has-img),
body.light .achip-av:not(:has(img)),
body.light .issue-comment-avatar:not(:has(img)),
body.light .ba-pick-av.no-img,
body.light .pd-av-fallback,
body.light .pd-fa-fallback { border-color: #0e0e12; color: #0e0e12; }
.pd-avatar:has(.pd-av-fallback), .pd-form-avatar:has(.pd-fa-fallback) { background: transparent !important; }
.pa-av:not(.has-img) { font-size: 14px; }
.achip-av:not(:has(img)) { font-size: 8.5px; border-width: 1px; }
.fstack .achip-av:not(:has(img)) { font-size: 9.5px; }
.issue-comment-avatar:not(:has(img)) { font-size: 11px; }
.ba-pick-av.no-img { font-size: 9.5px; }
.pd-av-fallback { font-size: 22px; border-width: 2px; }
.avatar:not(:has(.avatar-img)) { background: transparent !important; border: 2px solid #f4f7f7; color: #f4f7f7; box-sizing: border-box; }


/* Top bar (Tom, 15 Sep 2026, modelled on Xero's): a dark strip across the top of
   the content column in BOTH modes (the dark-mode ground), holding the company
   name, the section menu in white with a teal line under the chosen item, and
   Settings at the right. It bleeds over .content's padding to the edges. */
.content { --content-pad-x: 28px; --content-pad-top: 26px; }
/* The top bar stays pinned while the page scrolls (Tom, 17 Sep 2026). The header
   box is dissolved (display: contents) so the sticky bar's scroll range is the
   whole content column, not just the header; its bleed margins move onto the
   bar and the breadcrumbs, which scroll away as normal. On phones the rail is
   itself a sticky strip, so the bar pins under it (--rail-h, set by JS). */
.content .dash-head { display: contents; }
.content .dash-head .topnav {
  position: sticky; top: var(--rail-h, 0px); z-index: 30;   /* over page content; under Astra (35+), drawers (40+), modals */
  margin: calc(-1 * var(--content-pad-top)) calc(-1 * var(--content-pad-x)) 0;
}
.content .dash-head .crumbs { margin: 0 calc(-1 * var(--content-pad-x)) 20px; }
.topnav {
  display: flex; align-items: stretch; gap: 20px;
  min-height: 60px; padding: 0 16px 0 var(--content-pad-x);
  color: #ffffff;
  /* The left rail's brand stack laid out for a wide strip (Tom, 15 Sep 2026): the
     rail's glass tint on ink, a faint teal glow from the top left and plum glows
     rising from the bottom right (mirrored at Tom's request the same day). */
  background:
    linear-gradient(rgba(244, 247, 247, 0.045), rgba(244, 247, 247, 0.045)),
    radial-gradient(45% 260% at 0% -40%, rgba(34, 188, 173, 0.20), transparent 62%),
    radial-gradient(55% 300% at 106% 130%, rgba(122, 61, 96, 0.62), transparent 62%),
    radial-gradient(35% 220% at 96% 110%, rgba(92, 46, 73, 0.55), transparent 58%)
    #0e0e12;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
html body .dash-head h1.topnav-name {
  align-self: center; flex: none; max-width: 34%;
  margin: 0; color: #ffffff;
  font-size: 18px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body .dash-head .tab-bar {
  position: relative;   /* offsetParent for the tabs, so the scroll-into-view maths is local */
  flex: 0 1 auto; min-width: 0; align-self: stretch;
  display: flex; flex-wrap: nowrap; gap: 0;
  margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  overflow-x: auto; scrollbar-width: none;
}
/* Too many sections for the width (small laptops, the 7-tab hub): the menu scrolls
   sideways and fades out at its right edge instead of clipping a label. */
html body .dash-head .tab-bar.is-overflowing {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
html body .dash-head .tab-bar::-webkit-scrollbar { display: none; }
html body .dash-head .tab {
  position: relative; display: flex; align-items: center; justify-content: center;
  flex: 0 0 150px; width: 150px; max-width: none; box-sizing: border-box;   /* every item the same fixed width; fits a two-word company name */
  padding: 0 8px; margin: 0;
  color: rgba(255, 255, 255, 0.78); background: none;
  font-size: 14px; font-weight: 350; line-height: 1.2; white-space: nowrap;   /* size + weight = left menu (14px / 350) */
  border: 0; border-radius: 0;
  transition: color 0.12s ease, background 0.12s ease;
}
html body .dash-head .tab:hover { color: #ffffff; background: rgba(255, 255, 255, 0.06); }
html body .dash-head .tab:focus-visible { outline: 2px solid #1fb9a7; outline-offset: -4px; border-radius: 6px; }
html body .dash-head .tab.active { color: #ffffff; background: none; }
html body .dash-head .tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0; background: #1fb9a7;
}

/* Grouped sections (Tom, Sep 2026, the Stripe pattern): a parent in the bar is a
   menu, not a page. The menu is a child of .topnav and NOT of .tab-bar — the bar
   is overflow-x:auto, which computes overflow-y to auto too and would clip it.
   .topnav is sticky (a positioned value), so it is already the containing block
   and the menu rides with the bar on scroll, needing no scroll maths.
   z-index is deliberately small: .topnav has z-index 30, which makes it a
   stacking context, so every descendant paints inside that layer whatever its
   own value. A bigger number would buy nothing against Astra (35/38) or the
   drawers (40/50) and would only order the menu against its siblings; raising
   .topnav itself would put the bar over the Astra window. A docked Astra window
   can therefore overlap an open menu, which is accepted.
   No open animation, by design (Tom, 16 Sep 2026): the only motion left on the
   portfolio is the teal underline drawing in after a navigation. */
html body .dash-head .tabmenu-btn { font-family: inherit; cursor: pointer; gap: 5px; }
html body .dash-head .tabmenu-caret { width: 14px; height: 14px; flex: none; opacity: 0.85; }
html body .dash-head .tabmenu-btn[aria-expanded="true"] { color: #ffffff; background: rgba(255, 255, 255, 0.06); }
html body .dash-head .tabmenu-btn[aria-expanded="true"] .tabmenu-caret { transform: rotate(180deg); }
html body .dash-head .tabmenu {
  position: absolute; z-index: 5; box-sizing: border-box;
  width: 244px; padding: 6px; margin: 0; list-style: none;
  /* Opaque on purpose, NOT var(--surface): in dark mode that token is a 4% glass
     tint, which would leave the menu see-through over the page. The Astra and
     Knowledge Base pop-ups opt out the same way. */
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 0 0 10px 10px;
  box-shadow: var(--panel-shadow-sm);
}
body.light html body .dash-head .tabmenu,
html body.light .dash-head .tabmenu {
  background: #ffffff; border-color: var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
html body .dash-head .tabmenu[hidden] { display: none; }
html body .dash-head .tabmenu li { margin: 0; }
html body .dash-head .tabmenu a {
  display: block; padding: 8px 10px; border-radius: 6px; text-decoration: none;
  color: #f4f7f7; font-size: 14px; font-weight: 350; line-height: 1.3;
}
html body.light .dash-head .tabmenu a { color: #0e0e12; }
html body .dash-head .tabmenu a:hover { background: rgba(127, 127, 127, 0.1); text-decoration: none; }
html body .dash-head .tabmenu a:focus-visible { outline: 2px solid #1fb9a7; outline-offset: -2px; }
html body .dash-head .tabmenu a[aria-current="page"] { font-weight: 500; }
html body .dash-head .tabmenu .tabmenu-note {
  display: block; margin-top: 2px; font-size: 12.5px; font-weight: 350;
  color: rgba(244, 247, 247, 0.62); line-height: 1.35;
}
html body.light .dash-head .tabmenu .tabmenu-note { color: #5a6569; }
html body .dash-head .settings-link {
  align-self: center; flex: none; margin-left: auto;
  color: rgba(255, 255, 255, 0.8);
}
html body .dash-head .settings-link:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); }
html body .dash-head .settings-link.active { color: #1fb9a7; background: rgba(31, 185, 167, 0.16); }
.content .dash-head .dash-head-sub { padding: 14px var(--content-pad-x) 0; }
@media (max-width: 1400px) {
  .topnav { gap: 16px; }
  html body .dash-head .tab { flex-basis: 136px; width: 136px; font-size: 14px; }
}
@media (max-width: 820px) {
  .content { --content-pad-x: 18px; --content-pad-top: 20px; }
}
@media (max-width: 640px) {
  .content { --content-pad-x: 12px; --content-pad-top: 16px; }
  html body .dash-head .tabmenu { width: auto; min-width: 200px; max-width: calc(100vw - 24px); }
  /* Grouped, the bar is ~4 items, so they fit a phone: let them share the width
     rather than keep the fixed cell and scroll. Stops the active tab (and its
     teal underline) being scrolled out of sight when a menu is opened. */
  html body .dash-head .tab { flex: 1 1 auto; width: auto; min-width: 0; padding: 0 6px; }
  /* Phones: name + Settings on one row, the menu scrolling sideways under them. */
  .topnav { flex-wrap: wrap; gap: 0 12px; padding-right: 8px; }
  html body .dash-head h1.topnav-name { flex: 1 1 0; max-width: none; padding: 14px 0; font-size: 17px; }
  html body .dash-head .settings-link { order: 2; }
  html body .dash-head .tab-bar { order: 3; flex: 1 0 100%; height: 46px; margin-left: calc(-1 * var(--content-pad-x)); margin-right: -8px; padding: 0 4px; }
  html body .dash-head .tab { flex-basis: 136px; width: 136px; font-size: 14px; }
}
/* The meeting menu: items the section menu's width, the box hugging them on the left. */
body.theme-slate .meeting-page .mtabs { width: fit-content; }
@media (min-width: 720px) {
  body.theme-slate .mtabs { grid-auto-columns: minmax(160px, max-content); }
}

body.theme-slate .subtab-bar {
  gap: 4px; width: fit-content; max-width: 100%; box-sizing: border-box;
  margin: 2px 0 6px; padding: 4px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 14px rgba(0, 0, 0, 0.06);
}
body.theme-slate .subtab {
  padding: 7px 15px; margin: 0;
  font-size: 14px; line-height: 1.5; border: 0; border-radius: 8px;
  transition: background 0.12s ease, color 0.12s ease;
}
body.theme-slate .subtab:hover { color: var(--text); background: rgba(127, 127, 127, 0.12); }
body.theme-slate .subtab.active { color: var(--text); background: rgba(255, 255, 255, 0.14); font-weight: 500; }
body.theme-slate.light .subtab.active { color: var(--text); background: #e9ebec; }
/* Every sub-menu item the meeting menu's width (Tom, 17 Sep 2026: "the sub-menu
   style we have in board meetings", first used for Information → Key Dates / Key
   Information): equal 160px-min columns on wider screens, wrapping on phones. */
@media (min-width: 720px) {
  body.theme-slate .subtab-bar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, max-content); }
  body.theme-slate .subtab { text-align: center; }
}

/* ---- Motion ----------------------------------------------------------------------
   15 Sep 2026 Tom asked for playful animations throughout; 16 Sep he cut it back to
   the top menu only (the page motion was part of what made portfolio pages feel slow).
   What's left: the teal line under the active tab draws in after a menu tab is clicked
   (dashboard.html sets .tab-anim on the bar for that page load). The keyframes stay:
   the Customise editor (layout_editor.html) still uses them. Skipped for people who
   ask their system for reduced motion. */
@keyframes afm-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes afm-pop { 0% { opacity: 0; transform: translateY(6px) scale(0.92); } 100% { opacity: 1; transform: none; } }
@keyframes afm-drop { from { opacity: 0; transform: translateY(-6px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes afm-lift { from { opacity: 0; transform: translateY(6px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes afm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes afm-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes afm-spin-in { from { opacity: 0; transform: rotate(-90deg) scale(0.6); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  html body .dash-head .tab-bar.tab-anim .tab.active::after { animation: afm-draw 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s backwards; }
}

/* Breadcrumbs (Tom, 15 Sep 2026) under the top bar on every page: a home icon,
   then chevron-separated links, the current page last in ink and a touch bolder.
   On a board meeting page "Board Meetings" is the way back to the list, so the
   old "< Board meetings" link in the meeting's header card is gone. */
.crumbs { padding: 16px var(--content-pad-x) 0; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.4; }
.crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.crumbs li + li::before {
  content: ""; flex: none; width: 6px; height: 6px; margin: 0 12px 0 9px;
  border-top: 1.6px solid var(--text-muted); border-right: 1.6px solid var(--text-muted);
  transform: rotate(45deg); opacity: 0.8;
}
.crumbs a { color: var(--text-muted); text-decoration: none; white-space: nowrap; border-radius: 4px; transition: color 0.15s ease; }
.crumbs a:hover { color: var(--text); text-decoration: none; }
.crumbs .crumb-group { color: var(--text-muted); white-space: nowrap; }
.crumbs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.crumbs [aria-current="page"] { color: var(--text); font-weight: 500; pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs .crumb-home { display: inline-flex; padding: 2px; margin-left: -2px; }
.crumbs .crumb-home svg { width: 18px; height: 18px; display: block; }
.text-block h2 .meeting-back, .meeting-page-bar .meeting-back { display: none !important; }

/* Jev (TypeSafe's System One model), Astra's black twin (Tom, 18 Sep 2026). Since 6 Oct 2026 Astra is
   the faded grey of Tars and the other agents' avatars (analytics_chat.html), and Jev keeps the full black. widgets/_jev_avatar.html draws the
   face, widgets/_engine_faces.html says who did a piece of work: Jev, Astra, or both (the faces overlap). */
.ax-av.jev-av .ax-av-ball { fill: #111214; }
.ax-av.jev-av .ax-av-eye { fill: #ffffff; }
body:not(.light) .ax-av.jev-av .ax-av-ball { stroke: rgba(255, 255, 255, 0.6); stroke-width: 3.5; }
.eng-faces { display: inline-flex; align-items: center; vertical-align: middle; flex: none; }
.eng-faces .eng-face { display: inline-block; width: var(--eng-size, 22px); }
.eng-faces .eng-face + .eng-face { margin-left: calc(var(--eng-size, 22px) * -0.38); }
.eng-faces .eng-face .ax-av { display: block; width: 100%; height: auto; overflow: visible; }

/* ---- Hiring (Agents > Hiring) --------------------------------------------
   The table, its rows and the drawer panel are the Issues List's own classes,
   so only what is new to Hiring is styled here. The filter bar is a `display:
   contents` passthrough for the same reason the Issues List's is: its controls
   sit directly in the toolbar's flex row. */
.hiring-filters { display: contents; }
.hiring-filters > .if-done-toggle { margin-left: auto; }
.hiring-filters > .if-menu-wrap { margin-left: 8px; }
.hiring-list .issues-toolbar { margin-bottom: 0; }

/* Hiring reads like the Issues List (Tom, 24 Sep 2026): the toolbar, the filters
   and + New role sit on the page itself, with only the table as a white sheet
   (.issues-table already provides that, and hiring's tables reuse it).
   The card comes back while a role is open, because .hiring-page has no surface
   of its own and would otherwise float on the page ground.
   overflow:visible so the filter menu isn't clipped by the card box, as on Issues. */
.widget.hiring-list { overflow: visible; }
body.theme-slate.light .widget.hiring-list:not(.showing-role),
body.theme-slate .widget.hiring-list:not(.showing-role),
.widget.hiring-list.hiring-list:not(.showing-role) {
  background: transparent; box-shadow: none; border: 0; border-radius: 0; padding: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hiring-wrap.is-empty .issues-table { display: none; }
.hiring-empty, .hiring-apps-empty { padding: 14px 2px; }

/* Role statuses. s-open and s-closed already exist (the Issues List's); these
   are the two Hiring adds. */
.issue-status.s-on-hold { background: #FADEC9; color: #5D1715; }
.issue-status.s-filled  { background: #DBEDDB; color: #1C3829; }

/* A screening score, and the row of them down the panel. */
.hiring-score {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 24px; padding: 0 7px; border-radius: 6px;   /* fits "10/10" */
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: #D3E5EF; color: #183347;
}
.hiring-score.is-none { background: rgba(127, 127, 127, 0.14); color: var(--text-muted); font-weight: 400; }
.hiring-score.is-error { background: #FFE2DD; color: #5D1715; }
.hiring-top-cell .hiring-score { min-width: 40px; height: 22px; font-size: 12.5px; }

/* The panel's own bits: hints, the two big text boxes, upload buttons. */
.hiring-hint { margin: 2px 0 8px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
/* The job description and criteria boxes: the site's own text-input look
   (.issue-comment-input), grown to a multi-line box. */
.hiring-textarea {
  box-sizing: border-box; width: 100%; min-height: 96px; resize: vertical;
  font: inherit; font-size: 14px; line-height: 1.55; padding: 6px 9px;
  color: var(--text); background: rgba(244, 247, 247, 0.05);
  border: 1px solid var(--border); border-radius: 6px;
}
.hiring-textarea:focus { outline: 2px solid #5e6e74; outline-offset: -1px; }
.hiring-field.is-saving { opacity: 0.6; }

/* The uploads, the Screen button and the file list are the site's own controls
   (.doc-upload-icon, .meeting-docs, .doc-del, .doc-ts); only the row that holds
   them and the Screen button's accent are Hiring's. */
.hiring-upload-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 10px 0; }

/* No band above a tab that the loader adds (Tom, 21 Sep 2026 for HIRING, 24 Sep
   for PLAYBOOKS and from now on by default). The heading widget is what declares
   the tab — every tab is made by one — so it stays in the layout and is hidden
   here rather than removed, which would take the tab with it.

   `-tabhead` is the convention for any injected tab heading added from here on,
   so a new one is hidden without another rule. The two ids below pre-date it and
   are kept because saved layouts refer to them. */
.cell[data-widget-id="hiring-title"],
.cell[data-widget-id="playbooks-title"],
.cell[data-widget-id="sops-title"],
.cell[data-widget-id="agents-title"],           /* Tom, 4 Oct 2026: no "Agents" title */
.cell[data-widget-id="knowledge-base-title"],   /* nor "Knowledge Base", on every dashboard */
.cell[data-widget-id$="-tabhead"] { display: none; }

/* A role opens as a full page inside the widget, the same as a board meeting:
   everything else in the widget goes, the page takes its place. */
.hiring-list.showing-role > :not(.hiring-page) { display: none !important; }
.hiring-page-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.hiring-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--text-muted); text-decoration: none;
}
.hiring-back:hover { color: var(--accent); }
.hiring-back svg { width: 15px; height: 15px; }
.hiring-role-head { margin-bottom: 22px; }
/* The role's title is an issue's title. Measured, not guessed: an issue always
   opens in the drawer, whose head restyles .issue-title-input to 18px/600 — the
   24px/700 in the panel body is never what anyone sees. Same numbers here so a
   role page and an open issue read alike. */
.hiring-role-title, .hiring-role-title-static {
  display: block; width: 100%; box-sizing: border-box;
  margin: 0 0 14px; padding: 2px 0; font-family: inherit;
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text); background: transparent; border: 0; outline: 0;
}
.hiring-role-title:focus { border-bottom: 1px solid var(--border); }
.hiring-role-props { max-width: 640px; }
.hiring-panel-role { font-size: 12.5px; color: var(--text-muted); }
.hiring-candidates-wrap.is-empty .issues-table { display: none; }
.hiring-verdict-body { font-size: 13.5px; line-height: 1.55; }
.hiring-comments { margin-top: 6px; }

/* A candidate's own status, alongside the role statuses above. Notion tag
   colours, running from just-arrived grey to hired green. */
.issue-status.a-new          { background: #E3E2E0; color: #32302C; }
.issue-status.a-shortlisted  { background: #D3E5EF; color: #183347; }
.issue-status.a-interviewing { background: #FDECC8; color: #402C1B; }
.issue-status.a-offer        { background: #E8DEEE; color: #412454; }
.issue-status.a-hired        { background: #DBEDDB; color: #1C3829; }
.issue-status.a-rejected     { background: #FFE2DD; color: #5D1715; }

/* The role page's section tabs (Tom, 25 Sep 2026): Role / Applications /
   Routines, in the site's own .mtabs strip, laid out as on a board meeting page
   — the head above is the header card, the strip runs under it and sticks to
   the top as the panel scrolls away beneath it.

   Superseded here: .hiring-setup, the <details> that held the job description
   and the criteria. They are the Role tab now, so there is nothing left to
   collapse. setup_summary() in _hiring_macros.html is unused with it.

   --dpx is the drawer's side padding, which .mtabs-bar bleeds into so the
   sticky band runs edge to edge. The role page is not in a drawer and has no
   such padding, so the bleed is nil. */
.hiring-page .mtabs-wrap { --dpx: 0px; margin-top: 0; }
.hiring-page .mtabs-bar { top: -12px; padding: 12px 0 10px; }
/* Stuck, the band takes the page's own ground, not the drawer's. */
.hiring-page .mtabs-bar.is-stuck { background: var(--page-ground, var(--bg)); }
.hiring-rpanel { padding-top: 4px; }
/* The panels carry their own headings, so the first block sits flush — the same
   rule the board agenda's panels get. */
.hiring-rpanel > .issue-section-label:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* The Applications tab's count is a tab badge now rather than a heading's, so it
   takes .mtab-n's shape and drops .hiring-count's own box. */
.hiring-role-tabs .mtab-n.hiring-apps-n {
  display: inline-flex; min-width: 19px; height: auto; padding: 0 6px;
  border-radius: 999px; font-size: 11.5px; font-weight: 400; line-height: 18px;
}
/* The Role tab's "Set up" badge: only there while the role has no job
   description or no criteria, so it is amber, and a set-up role shows nothing. */
.hiring-role-tabs .mtab-n.hiring-setup-summary { background: #FDECC8; color: #402C1B; }
.hiring-role-tabs .mtab-n.hiring-setup-summary:empty { display: none; }
.mtab.is-active .mtab-n.hiring-setup-summary { background: #FDECC8; color: #402C1B; }

/* "What the agent reads" under an uploaded job description. */
.hiring-disclose { margin: 8px 0 0; font-size: 13px; }
.hiring-disclose > summary {
  cursor: pointer; color: var(--text-muted); list-style: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.hiring-disclose > summary::-webkit-details-marker { display: none; }
.hiring-disclose > summary::before { content: "▸"; font-size: 11px; }
.hiring-disclose[open] > summary::before { content: "▾"; }
.hiring-disclose > summary:hover { color: var(--accent); }
.hiring-jd-empty { padding: 8px 2px; }

/* Documents a batch upload could not place: an amber block, because leaving
   them unassigned means a candidate is being screened without them. */
.hiring-unmatched {
  margin: 0 0 14px; padding: 12px 14px; border-radius: 8px;
  background: rgba(253, 236, 200, 0.35); border: 1px solid #e8d3a8;
}
body:not(.light) .hiring-unmatched { background: rgba(253, 236, 200, 0.10); border-color: rgba(232, 211, 168, 0.35); }
.hiring-unmatched-head {
  display: flex; align-items: flex-start; gap: 9px; margin: 0 0 8px;
  font-size: 13.5px; line-height: 1.5;
}
.hiring-unmatched-head svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #b8860b; }
.hiring-unmatched-list .hiring-file { flex-wrap: wrap; }
.hiring-assign { height: 28px; padding: 0 8px; font-size: 12.5px; margin-left: auto; }
.hiring-candidate-docs { margin-bottom: 6px; }
.hiring-candidate-docs .hiring-file, .hiring-unmatched-list .hiring-file { gap: 8px; }
/* While the criteria are being written from the job description. */
.hiring-writing { display: flex; align-items: center; gap: 9px; }
.hiring-writing .hiring-spinner { margin: 0; }
.hiring-criteria-actions { margin: 0 0 10px; }
.hiring-generate-btn { display: inline-flex; align-items: center; gap: 8px; }
.hiring-generate-btn svg { width: 15px; height: 15px; flex: none; }
.hiring-generate-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }

/* Screened / Unscreened, in the site's own panel tabs. */
.hiring-apps-tabs { margin: 12px 0; }
/* Inside the Applications panel they sit under the Role / Applications / Routines
   strip, which is the same pill menu — so they step down a size and lose the
   shadow, and read as a filter on the table rather than a second set of sections
   (Tom, 25 Sep 2026). */
.hiring-role-tabs .hiring-apps-tabs {
  display: flex; width: fit-content; gap: 2px; padding: 2px;
  border-color: transparent; background: transparent; box-shadow: none;
}
.hiring-role-tabs .hiring-apps-tabs .mtab { padding: 5px 12px; font-size: 13px; }
.hiring-role-tabs .hiring-apps-tabs .mtab-n { font-size: 11px; min-width: 17px; line-height: 16px; }
.hiring-role-tabs .hiring-apps-tabs .mtab-icon { width: 15px; height: 15px; }
.hiring-tab-empty { padding: 14px 2px; }
.hiring-apps-tabs .mtab-icon { width: 16px; height: 16px; flex: none; }
/* Until the drawer is maximised it is 480px wide, and above a 720px viewport
   .mtabs lays its tabs out as equal columns that will not wrap — three words
   plus a count overflow. So the label collapses to its icon, which carries the
   label on hover (title) and to a screen reader (aria-label), the same way the
   left rail collapses to icons. Maximise the drawer and the words come back. */
.drawer:not(.maximized) .hiring-apps-tabs .mtab-label { display: none; }
.hiring-score-cell { width: 1%; white-space: nowrap; }
.drawer:not(.maximized) .hiring-apps-tabs .mtab { justify-content: center; gap: 6px; padding: 7px 10px; }
/* The meeting menu's 160px columns (above) would keep three icon tabs 480px
   wide in a 480px drawer, which is what pushed Screened off the edge. Collapsed
   to icons they need no minimum, so the bar fits the drawer instead. */
body.theme-slate .drawer:not(.maximized) .hiring-apps-tabs,
.drawer:not(.maximized) .hiring-apps-tabs { grid-auto-columns: 1fr; width: 100%; box-sizing: border-box; }

/* Screen unscreened: the section's action, so it sits under the list it acts
   on, and it is a solid teal .btn-primary — on this site teal is for buttons
   (the sub-tab tint is mauve). */
.hiring-screen-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.hiring-screen-btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; }
.hiring-screen-btn svg { width: 16px; height: 16px; flex: none; }
.hiring-screen-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.hiring-screen-n {
  min-width: 19px; padding: 0 6px; border-radius: 999px;
  font-size: 11.5px; line-height: 18px; text-align: center;
  background: rgba(255, 255, 255, 0.25);
}
.hiring-upload-status { font-size: 13px; color: var(--text-muted); }
.hiring-upload-status.is-error { color: #e5687a; }

/* One application. */
.hiring-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 19px; padding: 0 6px; border-radius: 10px;
  background: rgba(127, 127, 127, 0.16); color: var(--text-muted);
  font-size: 11.5px; font-weight: 500;
}
.hiring-app { padding: 12px 0; border-top: 1px solid var(--border); }
.hiring-app:first-child { border-top: 0; }
.hiring-app-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.hiring-app-name, .hiring-app-name-static { font-size: 14px; font-weight: 500; }
.hiring-app-name {
  border: 1px solid transparent; border-radius: 6px; padding: 3px 6px;
  background: none; color: var(--text); font-family: inherit; min-width: 160px;
}
.hiring-app-name:hover { border-color: var(--border); }
.hiring-app-name:focus { border-color: var(--border); outline: 2px solid #5e6e74; outline-offset: -1px; }
.hiring-app-meta { font-size: 12.5px; color: var(--text-muted); }
.hiring-warn { color: #e5687a; }
.hiring-app-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
/* Screen / Re-screen on one application: the .issue-delete-btn shape (the
   panel's own small button) in the ordinary text colour rather than red. */
.hiring-mini {
  display: inline-flex; align-items: center; font: inherit; font-size: 13px;
  padding: 5px 11px; color: var(--text-muted); background: transparent;
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.hiring-mini:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.hiring-mini:disabled { opacity: 0.5; cursor: not-allowed; }

.hiring-app-verdict { margin: 8px 0 0 43px; font-size: 13.5px; line-height: 1.55; }
.hiring-app-summary { margin-bottom: 7px; }
.hiring-app-points { margin-top: 5px; }
.hiring-points-label {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--text-muted);
}
.hiring-app-points ul { margin: 3px 0 0; padding-left: 18px; }
.hiring-app-points.is-concerns ul { color: var(--text); }
.hiring-app-when { margin: 7px 0 0; font-size: 12px; color: var(--text-muted); }
.hiring-app-error { margin: 7px 0 0 43px; font-size: 13px; color: #e5687a; }

/* Screening in progress. The spinner is the only motion on the page: it says
   work is still happening, which the "menu only" motion rule is about not
   decorating, not about hiding progress. */
.hiring-spinner {
  display: inline-block; width: 15px; height: 15px; margin: 4px 9px;
  border: 2px solid rgba(127, 127, 127, 0.3); border-top-color: var(--accent);
  border-radius: 50%; animation: hiring-spin 0.8s linear infinite;
}
@keyframes hiring-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hiring-spinner { animation-duration: 3s; } }

@media (max-width: 820px) {
  .hiring-app-verdict, .hiring-app-error { margin-left: 0; }
  .hiring-app-actions { margin-left: 0; }
}

/* ---- The browser icon and its window (Tom, 21 Sep 2026) ---------------------------
   A second launcher above Astra's, same size and shape as the drawer buttons elsewhere
   so the corner reads as one set of controls rather than two competing ones. The window
   borrows Astra's glass frame (.astra-window) unchanged; only the stage inside is new. */
.tool-fab {
  position: fixed; right: 33px; bottom: 100px; z-index: 35;
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  cursor: pointer; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
  transition: transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.4);
}
.tool-fab svg { width: 22px; height: 22px; }
.tool-fab:hover { transform: translateY(-3px); }
.tool-fab:active { transform: scale(0.96); }
.tool-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.browser-window .astra-window-body { padding: 0; }
/* The remote screen is a fixed size, so a wide window leaves a margin either side. It is a
   soft mount in the page's own colours rather than black (Tom, 23 Sep 2026: "grey box and
   font looks a bit rubbish"), and the viewer inside draws no chrome of its own. */
.browser-stage {
  flex: 1; min-height: 0; display: flex; position: relative; overflow: hidden;
  background: var(--panel-2, #eceef0); border: 1px solid var(--line); border-radius: 12px;
}
.browser-frame { flex: 1; width: 100%; height: 100%; border: 0; display: block; background: transparent; }
.browser-msg { margin: auto; padding: 24px; font-size: 14px; color: var(--muted); text-align: center; }

/* Who has the mouse. Grey while you are watching, teal once it is yours, so the answer to
   "can I type into this?" is readable without moving the eye off the page. */
.browser-pill {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  background: var(--chip-bg, rgba(0, 0, 0, 0.05)); color: var(--muted); border: 1px solid var(--line);
}
.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-control { margin-right: 4px; }
.browser-end { width: auto; padding: 0 10px; font-size: 13px; }

@media (max-width: 640px) {
  .tool-fab { right: 20px; bottom: 92px; width: 42px; height: 42px; }
}

/* ---- Playbooks (Tom, 21 Sep 2026; tidied to the house pattern 22 Sep) -------------
   Almost nothing of its own: a playbook opens as a full page like a role, and its
   fields are the Hiring tab's own (.hiring-role-title, .hiring-textarea, .hiring-hint,
   .issue-section-label, .issue-panel-delete), so it reads as one system. Only the
   scope checkboxes and the recording stage are new. */
.playbooks-widget.showing-page > :not(.playbook-page) { display: none !important; }

/* Playbooks reads like the Issues List and Hiring (Tom, 24 Sep 2026): the toolbar
   and + New playbook sit on the page ground, and only the table is a white sheet
   (.playbooks-table is an .issues-table, which already provides that).
   :not(.showing-page) because .playbook-page has no surface of its own and would
   otherwise float on the grey once the card is gone — same as .hiring-page. */
.widget.playbooks-widget { overflow: visible; }
body.theme-slate.light .widget.playbooks-widget:not(.showing-page),
body.theme-slate .widget.playbooks-widget:not(.showing-page),
.widget.playbooks-widget.playbooks-widget:not(.showing-page) {
  background: transparent; box-shadow: none; border: 0; border-radius: 0; padding: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.playbook-row { cursor: pointer; }
.playbook-name { font-weight: 500; }
.playbook-when { color: var(--text-muted); }
.playbook-draft {
  margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 500;
  background: rgba(244, 247, 247, 0.06); color: var(--text-muted); border: 1px solid var(--border);
}
/* The "use it when" box borrows the textarea's look but is one line. */
input.hiring-textarea { min-height: 0; }

/* Applies to: a dropdown in the report builder's style (Tom, 26 Sep 2026) — the New report
   dialog's 44px bordered box and caret, opening a panel like its month picker. */
.playbook-scope { position: relative; display: inline-block; margin-bottom: 4px; }
.playbook-scope-btn { position: relative; display: flex; align-items: center; min-width: 260px; max-width: 100%; height: 44px; box-sizing: border-box; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 500; padding: 0 40px 0 14px; cursor: pointer; text-align: left; }
body.light .playbook-scope-btn { background: #fff; border-color: #e6e8e9; }
.playbook-scope-btn:hover { border-color: var(--text-muted); }
.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::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(45deg); transition: transform .15s; }
.playbook-scope-btn[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -2px; }
.playbook-scope-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playbook-scope-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 100%; box-sizing: border-box; padding: 6px; border: 1px solid var(--panel-border); border-radius: var(--panel-radius-sm, 12px); background: var(--panel); box-shadow: var(--panel-shadow-sm, 0 12px 32px rgba(0,0,0,.18)); }
.playbook-scope-menu[hidden] { display: none; }
.playbook-scope-menu .playbook-companies { display: flex; flex-direction: column; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
.playbook-scope-menu .playbook-companies[hidden] { display: none; }
.playbook-check { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 8px; font-size: 14px; font-weight: 350; color: var(--text); cursor: pointer; white-space: nowrap; }
.playbook-check:hover { background: rgba(127, 127, 127, 0.12); }
.playbook-check input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: #17998a; cursor: pointer; }
.playbook-check-all { font-weight: 500; }

/* Teach a Task panel (Tom, 26 Sep 2026): the one obvious thing to press. The modal's inset
   band, controls on one row that wraps, the status line under them rather than off the edge. */
.playbook-teach { margin: 10px 0 14px; padding: 18px 20px; border-radius: 12px; background: var(--panel-inset); border: 1.5px solid transparent; transition: border-color .3s, box-shadow .3s; }
.playbook-teach.is-ready { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.playbook-teach-title { font-size: 16px; font-weight: 500; color: var(--text); margin: 0 0 12px; }
.playbook-record { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.playbook-record-btn { height: 40px; padding: 0 20px; font-size: 14px; }
.playbook-record-note { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.playbook-record-note:empty { display: none; }
.playbook-laptop-hint { margin-top: 14px; padding: 14px 16px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); }
.playbook-laptop-hint[hidden] { display: none; }
.playbook-laptop-hint-title { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 6px; }
.playbook-laptop-hint ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.7; color: var(--text); }
.playbook-laptop-hint li[hidden] { display: none; }
.playbook-laptop-hint a { color: var(--accent); }
.playbook-record-where-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
.playbook-record-where-label[hidden] { display: none; }
.playbook-record-btn.is-recording { background: #e5687a; border-color: #e5687a; }
.playbook-record-btn.is-writing { display: inline-flex; align-items: center; gap: 9px; background: var(--surface); border: 1.5px solid var(--border); color: var(--text-muted); cursor: default; filter: none; }
.playbook-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: playbook-spin .8s linear infinite; }
@keyframes playbook-spin { to { transform: rotate(360deg); } }
.playbook-stage {
  height: min(60vh, 620px); margin: 10px 0 12px; border-radius: 8px; overflow: hidden;
  background: var(--panel-2, #eceef0); border: 1px solid var(--border);
}
.playbook-frame { width: 100%; height: 100%; border: 0; display: block; background: transparent; }

/* ---- Routines on a role (Tom, 22 Sep 2026) ---------------------------------------
   A scheduled job for one role. The panel is the site's drawer and its fields are the
   Hiring tab's, so only the three-across schedule row is new here. */
.routine-row { cursor: pointer; }
.routine-name { font-weight: 500; }
.routine-role { color: var(--text-muted); }
.routine-runs { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.routine-last { color: var(--text-muted); }
.routine-last-error { color: #e5687a; }
.routine-last-ok { color: var(--text); }
.hiring-routines-label { margin-top: 26px; }

.routine-panel .routine-for { margin-top: -4px; }
.routine-when { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.routine-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px;
  font-weight: 500; color: var(--text-muted); }
.routine-field input, .routine-field select { font-size: 14px; }
.routine-next { margin-top: 8px; }
.routine-enable { margin-bottom: 4px; }
/* The docked Astra in the panel: tall enough to hold a conversation, not so tall the
   schedule above it is pushed off the screen. */
.routine-astra { display: flex; margin-top: 4px; }
.routine-astra > .ax { flex: 1; min-height: 0; }
.routine-panel-host { display: none; }

/* Routines and the browser now live in Astra's header (Tom, 23 Sep 2026), not as floating
   buttons up the corner of the page. .tool-fab is kept only for a page that shows the
   browser without Astra; nothing uses it today. */
.astra-head-slot { display: inline-flex; }
.browser-head-btn[hidden] { display: none !important; }
.routine-all-panel .hiring-hint { margin-bottom: 12px; }

/* Delete a routine from its row as well as from inside it (Tom, 23 Sep 2026). The bin only
   shows on hover or keyboard focus, so a list of routines is not a row of bins. */
.routine-row-actions { width: 34px; text-align: right; }
.routine-del { opacity: 0; transition: opacity 0.12s ease; }
.routine-row:hover .routine-del, .routine-del:focus-visible { opacity: 1; }
@media (hover: none) { .routine-del { opacity: 1; } }

/* Astra docked at the top of a routine, compact and FLUSH, as on the Financials tab
   (Tom, 23 Sep 2026). Two things made the white surround: .widget.ax carries its own
   background, border and radius, and a min-height of 560px that fought this box and left
   the chat standing inside it. The mount is this element; the chat fills it exactly. */
.routine-astra {
  height: min(34vh, 320px); overflow: hidden;   /* no box of its own (Tom, 23 Sep 2026) */
}
body .routine-astra .widget.ax,
body.theme-slate .routine-astra .widget.ax,
body.theme-slate.light .routine-astra .widget.ax {
  flex: 1; min-width: 0;
  height: 100%; min-height: 0; padding: 0; margin: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* A routines TABLE is unreadable in a 480px drawer (Tom, 23 Sep 2026: "too cramped"), so the
   list opens full screen and, when narrowed to the right, becomes cards instead: name and
   badges on one line, then what it does and when, each labelled. The same rows, read down
   rather than across. */
/* Private / Shared, the same badge a chat uses for Recents vs Pinned. Defined here as well
   as in analytics_chat.html's own styles, because a routines list is shown where the chat
   is not (Tom, 23 Sep 2026: "same design as for chats, templates etc"). */
.ax-vis { font-size: 10.5px; font-weight: 600; letter-spacing: .03em; padding: 1px 6px; border-radius: 999px; line-height: 1.5; }
.ax-vis.shared { color: #0f7a4e; background: rgba(15, 154, 87, .14); }
.ax-vis.private { color: var(--text-muted); background: rgba(127, 127, 127, .14); }
body:not(.light) .ax-vis.shared { color: #34d399; background: rgba(52, 211, 153, .16); }

/* Is it actually going to run? Green when it is on, grey when it is off, red when the last
   run failed — the one thing you want to see without reading the row. */
.routine-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.routine-dot-on { background: #2fae7e; }
.routine-dot-off { background: rgba(127, 127, 127, 0.45); }
.routine-dot-error { background: #e5687a; }

/* New routine: the words when there is room, the icon alone once narrowed to the right. */
.routine-all-head { display: flex; justify-content: flex-start; margin: 0 0 10px; }
.routine-new-btn { display: inline-flex; align-items: center; gap: 7px; }
.routine-new-btn svg { width: 15px; height: 15px; }
.drawer:not(.maximized) .routine-new-label { display: none; }
.drawer:not(.maximized) .routine-new-btn { padding: 7px; }

.drawer:not(.maximized) .routines-table thead { display: none; }
.drawer:not(.maximized) .routines-table,
.drawer:not(.maximized) .routines-table tbody { display: block; }
.drawer:not(.maximized) .routines-table .routine-row {
  display: grid; grid-template-columns: 1fr auto; gap: 3px 10px;
  padding: 13px 12px 14px 16px; margin-bottom: 8px;
  border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 10px;
  background: var(--panel-2, rgba(127, 127, 127, 0.035));
}
/* The left edge carries the same colour as the dot, so a card's state reads at a glance. */
.drawer:not(.maximized) .routine-row:has(.routine-dot-on) { border-left-color: #2fae7e; }
.drawer:not(.maximized) .routine-row:has(.routine-dot-error) { border-left-color: #e5687a; }
.drawer:not(.maximized) .routine-row:hover { border-color: var(--accent); }
.drawer:not(.maximized) .routine-row:hover { border-left-color: var(--accent); }
.drawer:not(.maximized) .routine-all-panel { padding-left: 4px; }
.drawer:not(.maximized) .routines-table td { display: block; border: 0; padding: 0; }
.drawer:not(.maximized) .routines-table td:first-child { grid-column: 1; font-size: 14px; }
.drawer:not(.maximized) .routine-row-actions { grid-column: 2; grid-row: 1; width: auto; }
.drawer:not(.maximized) .routines-table td:not(:first-child):not(.routine-row-actions) {
  grid-column: 1 / -1; font-size: 12.5px; color: var(--text-muted);
}
.drawer:not(.maximized) .routine-runs { display: none !important; }
/* Say which is which, since the header row has gone. */
.drawer:not(.maximized) .routine-role::before { content: "About: "; }
.drawer:not(.maximized) .routine-last::before { content: "Last run: "; }

/* A routine's own header is its title (Tom, 23 Sep 2026): the drawer is opened with no
   title of its own, the name is edited in place, and the two switches that decide whether
   it runs and who sees it sit top right rather than as sections down the page. */
/* The routine's head sits IN the drawer bar, so the page has one header rather than an
   empty bar above a second one. The bar is a flex row already; this takes all of it. */
.drawer-title.has-routine-head {
  flex: 1; min-width: 0; display: block;
  /* The bar is normally an 11.5px uppercase mauve label; carrying a real header it must
     stop shouting, or the name field inherits uppercase and the tracking. */
  font-size: 14px; font-weight: 400; letter-spacing: normal; text-transform: none;
  color: var(--text);
}
.routine-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
  width: 100%; min-width: 0;
}
.routine-title { flex: 1; min-width: 120px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.routine-head-switches { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.routine-switch { font-size: 13px; white-space: nowrap; }
.routine-switch input:disabled + .if-switch { opacity: 0.5; cursor: not-allowed; }
.routine-for { margin: 0 0 10px; }
@media (max-width: 720px) {
  .routine-head-switches { margin-left: 0; }
}

/* The hint is only worth saying where there is no chat on the page. */
.routine-panel:has(.routine-page-chat:not([hidden])) .routine-drawer-hint { display: none; }

/* Astra, borrowed onto a routine page: she sits across the top, the routine below her.
   Only on the full-screen page, where there is room for both (Tom, 23 Sep 2026). */
.routine-page-chat {
  height: auto; max-height: min(42vh, 420px); margin: 0 0 14px; overflow: hidden;
  border-bottom: 1px solid var(--line); padding-bottom: 12px;
}
.routine-page-chat[hidden] { display: none; }
body .routine-page-chat .widget.ax,
body.theme-slate .routine-page-chat .widget.ax,
body.theme-slate.light .routine-page-chat .widget.ax {
  height: auto; min-height: 0; padding: 0; margin: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* The routine editor: a modal in the middle of the page, over the routines table it came
   from (Tom, 23 Sep 2026). Astra is borrowed into the top of it; the fields sit below. */
.routine-modal-overlay {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.routine-modal-overlay[hidden] { display: none; }
.routine-modal {
  position: relative; width: min(920px, 100%); max-height: min(88vh, 900px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
}
.routine-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 26px 20px; }
.routine-modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; }
.routine-modal-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.routine-modal .routine-page-chat { max-height: min(36vh, 340px); }
.routine-playbook { margin: 2px 0 12px; }
@media (max-width: 720px) {
  .routine-modal-overlay { padding: 10px; }
  .routine-modal { max-height: 94vh; }
  .routine-modal-body { padding: 18px 16px 20px; }
}

/* ---- The routine editor, laid out like the Create report dialog (Tom, 23 Sep 2026) ------ */
/* One row: the name on the left, the switches on the right, clear of the close button
   (Tom, 23 Sep 2026). No eyebrow above it — the modal says what it is. */
.routine-dhead {
  position: relative; padding: 2px 44px 16px 2px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
}
.routine-dname {
  flex: 1 1 12ch; max-width: 100%; margin-top: 0; padding: 0 2px 4px;
  border: 0; border-bottom: 1.5px dashed var(--border); border-radius: 0; background: transparent;
  color: var(--text); font: inherit; font-size: 26px; font-weight: 400; letter-spacing: -0.01em;
  line-height: 1.3; field-sizing: content; min-width: 10ch;
}
.routine-dname:focus { outline: none; border-bottom-color: var(--accent); }
.routine-dname::placeholder { color: var(--text-muted); opacity: 0.6; }
.routine-dhead .routine-head-switches { margin-left: auto; flex: none; }

.routine-dbody { background: var(--panel-inset); border-radius: 12px; padding: 18px 20px 20px; margin-bottom: 18px; }
/* Section titles read like the report dialog's (Type, Orientation, Download): sentence
   case, normal weight, ink text — not the green uppercase label used elsewhere
   (Tom, 23 Sep 2026). */
.routine-dlabel { font-size: 14px; font-weight: 350; color: var(--text); margin: 0 0 10px; }
.routine-fields .routine-dlabel { margin-top: 20px; }
.routine-dlabel .routine-dopt { color: var(--text-muted); font-weight: 350; }
.routine-dlabel-gap { margin-top: 20px; }

/* Every field is the same pill: a grey label, then the value (the report dialog's
   "Ending  Not set"). */
.routine-pill {
  position: relative; display: flex; align-items: center; height: 44px; box-sizing: border-box;
  border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer;
}
body.light .routine-pill { background: #fff; border-color: #e6e8e9; }
.routine-pill:hover { border-color: var(--text-muted); }
.routine-pill:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.routine-pill-l { padding-left: 14px; font-size: 14px; font-weight: 350; color: var(--text-muted); white-space: nowrap; }
.routine-pill-in {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 14px; font-weight: 500; padding: 0 12px 0 8px; cursor: pointer;
}
.routine-pill-in:focus { outline: none; }
.routine-pill-sel .routine-pill-in { appearance: none; -webkit-appearance: none; padding-right: 34px; }
.routine-pill-sel::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg); pointer-events: none;
}
.routine-pill-wide { width: 100%; }
.routine-pill-in:disabled { cursor: default; opacity: 0.7; }

/* Ask her: her own rim round the box, so it reads as her rather than as another field. */
.routine-ask { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; }
.routine-ask[hidden] { display: none; }
.routine-ask-av { width: 38px; flex: none; }
.routine-ask-av .ax-av { width: 100%; height: auto; }
.routine-ask-box {
  position: relative; flex: 1; min-width: 0; border-radius: 14px; padding: 12px 14px;
  background: var(--surface); box-shadow: var(--astra-glow-out), var(--astra-glow-in);
}
.routine-ask-box::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; padding: 1.5px; background: var(--astra-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.routine-ask-input { width: 100%; box-sizing: border-box; border: 0; background: none; resize: vertical; color: var(--text); font: inherit; font-size: 14px; line-height: 1.5; }
.routine-ask-input:focus { outline: none; }
.routine-ask-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.routine-ask-status { font-size: 12.5px; color: var(--text-muted); margin-right: auto; }

/* The fields are always there (Tom, 23 Sep 2026): Astra fills them in, she does not gate
   them. */
.routine-when { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; align-items: stretch; }

/* The playbook picker and its "+ New playbook" on one row: the picker only as wide as it
   needs to be (Tom, 23 Sep 2026), the button beside it. */
.routine-playbook-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.routine-pill-book { flex: 0 1 340px; min-width: 200px; }

/* The routine modal's pickers are pills whose LABEL draws the caret (::after) and
   whose <select> was the flex child filling them. The field-select wrapper has to
   take that role, or the value strands at the left of a wide pill and the pill
   shows two carets — its own and the control's (Tom, 24 Sep 2026). */
.routine-pill-sel .fsel { flex: 1; min-width: 0; height: 100%; }
.routine-pill-sel .fsel-btn { width: 100%; height: 100%; }
.routine-pill-sel .fsel-caret { display: none; }
/* The pill reserves 34px on the right for its caret, so centring inside that
   box lands ~13px left of the pill's true centre: mirror the padding. */
.routine-pill-book .fsel-btn { justify-content: center; text-align: center;
                               padding-left: 34px; padding-right: 34px; }
.routine-newbook { white-space: nowrap; }

/* Recording a playbook from inside a routine: this company's own remote browser, full
   screen over everything, with one control that ends it. */
.pbrec-overlay {
  position: fixed; inset: 0; z-index: 70; display: flex; padding: 20px;
  background: rgba(14, 20, 26, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.pbrec-overlay[hidden] { display: none; }
.pbrec {
  flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(10, 18, 26, 0.3);
}
.pbrec-head { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.pbrec-title { font-size: 14px; font-weight: 600; }
.pbrec-note { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-muted); }
.pbrec-stop { background: #e5687a; border-color: #e5687a; }
.pbrec-frame { flex: 1; min-height: 0; width: 100%; border: 0; display: block; background: var(--panel-2, #eceef0); }

/* Teach a Task: the button in the browser window, and what Astra shows afterwards. */
.browser-teach { white-space: nowrap; }
.browser-teach.is-recording { border-color: #e5687a; color: #e5687a; }
.browser-pill.is-recording { background: color-mix(in srgb, #e5687a 14%, transparent); color: #e5687a; border-color: color-mix(in srgb, #e5687a 35%, transparent); }

.astra-taught {
  position: absolute; inset: 0; z-index: 5; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px 26px 24px; background: var(--surface); border-radius: inherit;
}
.astra-taught[hidden] { display: none; }
.astra-taught-say { display: flex; align-items: flex-start; gap: 12px; }
.astra-taught-av { width: 38px; flex: none; }
.astra-taught-av .ax-av { width: 100%; height: auto; }
.astra-taught-line { margin: 6px 0 0; font-size: 14px; color: var(--text); }
.astra-taught-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.astra-taught-name { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.astra-taught-when { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); }
.astra-taught-body { font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.astra-taught-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.astra-taught-open { text-decoration: none; }

/* Designed dropdowns in place of the OS <select> popup (Tom, 24 Sep 2026): the
   native list is drawn by the operating system, so it ignores the dark theme and
   floats away from the field. static/fieldselect.js keeps the real <select> for
   the form value and its change handlers, and paints this over it.
   The menu is appended to <body> and positioned fixed, because these fields sit
   in table cells and drawers whose overflow would clip it. Backgrounds are
   opaque in BOTH themes on purpose: var(--surface) is a ~4% glass tint in dark
   and would leave the list see-through, as the nav dropdown did. */
.fsel { position: relative; display: inline-flex; max-width: 100%; }
.fsel > select {                       /* kept for the form; never shown */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: 0;
  opacity: 0; pointer-events: none; clip: rect(0 0 0 0); overflow: hidden;
}
.fsel-btn {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  font: inherit; cursor: pointer; text-align: left;
  /* The trigger copies the select's classes so its styling still applies, but
     some of those classes paint their own caret as a background image (.if-select
     does). That plus .fsel-caret showed two arrows on one control (Tom, 25 Sep
     2026). The control draws exactly one caret: this one. */
  background-image: none;
}
.fsel-btn:disabled { cursor: default; opacity: 0.6; }
.fsel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsel-caret { width: 13px; height: 13px; flex: none; opacity: 0.7; }
.fsel-btn[aria-expanded="true"] .fsel-caret { transform: rotate(180deg); }

.fsel-menu {
  position: fixed; z-index: 90; margin: 0; padding: 6px; list-style: none;
  min-width: 180px; max-width: min(340px, calc(100vw - 16px));
  max-height: min(320px, 60vh); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 10px; box-shadow: var(--panel-shadow-sm);
}
.fsel-menu[hidden] { display: none; }
.fsel-opt {
  display: block; padding: 7px 10px 7px 26px; border-radius: 6px; position: relative;
  font-size: 14px; font-weight: 350; line-height: 1.35; color: #f4f7f7;
  cursor: pointer; white-space: normal;
}
body.light .fsel-opt { color: #0e0e12; }
.fsel-opt:hover, .fsel-opt:focus { background: rgba(127, 127, 127, 0.16); outline: none; }
.fsel-opt:focus-visible { outline: 2px solid #1fb9a7; outline-offset: -2px; }
.fsel-opt[aria-selected="true"] { font-weight: 500; }
.fsel-opt[aria-selected="true"]::before {
  content: ""; position: absolute; left: 9px; top: 50%; width: 5px; height: 9px;
  margin-top: -6px; border: solid #1fb9a7; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.fsel-opt[aria-disabled="true"] { opacity: 0.45; cursor: default; }

/* Floating panels must be OPAQUE in dark (Tom, 24 Sep 2026: "the transparency
   means it's not readable"). They were painted with var(--surface), which is a
   solid white in light but a ~4% glass tint in dark, so the page showed straight
   through the routine modal and these menus. Same fix, and same reason, as the
   nav dropdown and .fsel-menu. Appended so it outranks each panel's own rule.
   The two skins now come from --panel / --panel-border at the top of this file,
   so there is no light-mode twin of this rule to keep in step.
   NOT the right-side .drawer: its dark glass is deliberate (Tom, 11 Sep 2026). */
.routine-modal,
.if-menu,
.ivt-menu, .ivt-pop,
.bm-process-panel {
  background: var(--panel); border-color: var(--panel-border);
}

/* The new-role dialog (Tom, 25 Sep 2026): the same shape as "+ New" on
   Financials, built on the shared panel tokens so the two stay in step —
   --panel is opaque, which is what keeps a modal readable in dark mode. */
.hiring-dialog {
  border: 1px solid var(--panel-border); border-radius: var(--panel-radius);
  padding: 0; width: min(520px, calc(100vw - 32px));
  background: var(--panel); color: var(--text); box-shadow: var(--panel-shadow);
}
.hiring-dialog::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.hiring-dialog[open] { margin-top: min(12vh, 110px); margin-bottom: auto; }
.hiring-dhead { display: flex; align-items: center; gap: 12px; padding: 18px 20px 0; }
.hiring-deyebrow { flex: 1; font-size: 15px; font-weight: 500; }
.hiring-dclose {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: none; color: var(--text-muted); cursor: pointer;
}
.hiring-dclose:hover { background: rgba(127, 127, 127, 0.14); color: var(--text); }
.hiring-dclose svg { width: 17px; height: 17px; }
.hiring-dbody { padding: 14px 20px 4px; }
.hiring-dlabel { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-muted); }
.hiring-dname {
  width: 100%; box-sizing: border-box; height: 38px; padding: 0 12px;
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.hiring-dname:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.hiring-dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.hiring-dfield { min-width: 0; }
.hiring-dsel {
  width: 100%; box-sizing: border-box; height: 38px; padding: 0 10px;
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.hiring-dfield .fsel { width: 100%; }
.hiring-dupload { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
/* The house button shape, as .post-action-add — the file input behind it is
   hidden and this drives it, so the control is focusable and keyboard-operable
   in a way a styled <label> never was (Tom, 25 Sep 2026). */
.hiring-dupbtn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; box-sizing: border-box; padding: 0 12px;
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--accent); background: transparent; border: 1px solid var(--accent);
  border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.hiring-dupbtn:hover { background: rgba(31, 185, 167, 0.08); }
.hiring-dupbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hiring-dupbtn svg { width: 15px; height: 15px; flex: none; }
.hiring-dfilename {
  min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; color: var(--text-muted);
}
.hiring-dfileclear {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--text-muted); cursor: pointer;
}
.hiring-dfileclear:hover { background: rgba(127, 127, 127, 0.16); color: var(--text); }
.hiring-dfileclear svg { width: 13px; height: 13px; }
.hiring-derr { margin: 12px 0 0; font-size: 13px; color: var(--neg); }
.hiring-dfoot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px 18px; }
.hiring-dcancel, .hiring-dsave {
  height: 34px; padding: 0 14px; border-radius: 8px; font: inherit; font-size: 14px;
  font-weight: 500; cursor: pointer;
}
.hiring-dcancel { border: 1px solid var(--border); background: transparent; color: var(--text); }
.hiring-dcancel:hover { border-color: var(--text-muted); }
.hiring-dsave { border: 1px solid var(--accent); background: var(--accent); color: #fff; }
.hiring-dsave:hover { filter: brightness(1.06); }
.hiring-dsave:disabled { opacity: 0.6; cursor: default; }

/* New playbook modal (Tom, 26 Sep 2026: "same design as new report"). The house modal:
   the values are the report builder's .rb-dialog ones (widgets/report_builder.html),
   repeated here because that stylesheet only loads on the Financials tab. */
.pb-dialog { border: 1px solid var(--panel-border); border-radius: var(--panel-radius); padding: 0; width: min(760px, calc(100vw - 32px)); overflow: visible; background: var(--panel); color: var(--text); box-shadow: var(--panel-shadow); }
.pb-dialog::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.pb-dialog[open] { margin-top: min(10vh, 96px); margin-bottom: auto; }
.pb-dform { margin: 0; padding: 0 24px 20px; }
.pb-dhead { position: relative; padding: 24px 46px 16px 2px; }
.pb-deyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.pb-dname { display: inline-block; max-width: 100%; margin-top: 8px; border: 0; border-bottom: 1.5px dashed var(--border); border-radius: 0; background: transparent; color: var(--text); font: inherit; font-size: 28px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.3; padding: 0 2px 4px; field-sizing: content; min-width: 8ch; }
.pb-dname:focus { outline: none; border-bottom-color: var(--accent); }
.pb-dname::placeholder { color: var(--text-muted); opacity: 0.6; }
.pb-dclose { position: absolute; top: 12px; right: -8px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--text-muted); cursor: pointer; padding: 0; }
.pb-dclose:hover { color: var(--text); background: rgba(127, 127, 127, 0.12); }
.pb-dclose svg { width: 20px; height: 20px; }
.pb-dbody { background: var(--panel-inset); border-radius: 12px; padding: 20px 22px 22px; }
.pb-dlabel { font-size: 14px; font-weight: 350; color: var(--text); margin: 0 0 10px; }
.pb-dgap { margin-top: 24px; }
.pb-dnote { margin: 8px 0 0; font-size: 13px; font-weight: 350; line-height: 1.45; color: var(--text-muted); }
.pb-dinput { width: 100%; height: 44px; box-sizing: border-box; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; padding: 0 14px; }
.pb-dinput:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
body.light .pb-dinput, body.light .pb-dselect, body.light .pb-dcard { background: #fff; border-color: #e6e8e9; }
.pb-dstart { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.pb-dcard { position: relative; display: flex; align-items: center; gap: 18px; min-height: 96px; box-sizing: border-box; padding: 14px 18px 14px 22px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; font-size: 14px; font-weight: 350; color: var(--text); line-height: 1.35; }
.pb-dcard:hover { border-color: var(--text-muted); }
.pb-dcard:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pb-dcard:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-dcard input { position: absolute; opacity: 0; pointer-events: none; }
.pb-dpage { width: 52px; height: 52px; flex: none; }
.pb-dpage rect { fill: #fff; stroke: #b9c2c5; stroke-width: 1.2; }
.pb-dcard:has(input:checked) .pb-dpage rect { stroke: var(--accent); }
.pb-dpage .l { stroke: #c7cfd1; stroke-width: 1.2; fill: none; }
.pb-dpage .c { fill: #e5687a; }
.pb-dselect { position: relative; display: flex; align-items: center; height: 44px; max-width: 320px; box-sizing: border-box; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface); }
.pb-dselect:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pb-dselect::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(45deg); pointer-events: none; }
.pb-dselect select { appearance: none; -webkit-appearance: none; flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 500; padding: 0 36px 0 14px; cursor: pointer; }
.pb-dselect select:focus { outline: none; }
.pb-dselect option { color: #0e0e12; }
.pb-dsteps { margin: 0; padding-left: 20px; font-size: 14px; font-weight: 350; line-height: 1.7; color: var(--text); }
.pb-dsteps a { color: var(--accent); }
.pb-dsteps code { font-size: 13px; }
.pb-dwhere[hidden], .pb-dinstall[hidden] { display: none; }
.pb-derr { min-height: 0; font-size: 13px; color: var(--neg, #d03b3b); }
.pb-derr:not(:empty) { margin-top: 12px; }
.pb-dactions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 18px 0 2px; }
.pb-btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; box-sizing: border-box; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; padding: 0 18px; font: inherit; font-size: 14px; font-weight: 350; cursor: pointer; white-space: nowrap; }
.pb-btn:hover { border-color: var(--text-muted); }
.pb-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; }
.pb-btn-primary:hover { border-color: var(--accent); filter: brightness(1.05); }
.pb-btn:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 560px) {
  .pb-dform { padding: 0 16px 16px; }
  .pb-dhead { padding: 20px 42px 14px 2px; }
  .pb-dbody { padding: 16px; }
  .pb-dname { font-size: 22px; }
}

/* ---- SOPs (Tom, 26 Sep 2026) --------------------------------------------------------
   Company ▾ SOPs: procedures holding videos and documents. Built from the Playbooks
   furniture (full page, .hiring-* fields, .issue-section-label, .issue-panel-delete);
   only the video list, document list and upload zone are new. app/widgets/sops.py */
.sops-widget.showing-page > :not(.sop-page) { display: none !important; }
.widget.sops-widget { overflow: visible; }
body.theme-slate.light .widget.sops-widget:not(.showing-page),
body.theme-slate .widget.sops-widget:not(.showing-page),
.widget.sops-widget.sops-widget:not(.showing-page) {
  background: transparent; box-shadow: none; border: 0; border-radius: 0; padding: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.sops-widget .sop-search { flex: 0 1 280px; }
.sops-widget .sop-cat-filter { width: auto; min-width: 180px; }
.sop-row { cursor: pointer; }
.sop-name { font-weight: 500; }
.sop-cat {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap;
}
.sop-contents { white-space: nowrap; }
.sop-count { display: inline-flex; align-items: center; gap: 5px; margin-right: 14px; color: var(--text-muted); font-size: 13px; }
.sop-count svg { width: 13px; height: 13px; }
.sop-none { color: var(--text-muted); opacity: 0.75; font-size: 13px; }

.sop-fields { max-width: 360px; }
.sop-field { display: block; }
.sop-static, .sop-summary-static { color: var(--text); font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.sop-summary { max-width: 960px; }

.sop-drop {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0 6px;
  padding: 16px 18px; max-width: 960px; box-sizing: border-box;
  border: 1.5px dashed var(--border); border-radius: 10px;
}
.sop-drop.is-over { border-color: var(--accent); background: rgba(31, 185, 167, 0.06); }
.sop-drop .post-action-add { margin-top: 0; }
.sop-drop-hint { font-size: 13px; color: var(--text-muted); }
.sop-progress { flex: 1 0 100%; }
.sop-progress-label { font-size: 13px; color: var(--text); margin-bottom: 6px; }
.sop-progress-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.sop-progress-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s; }
.sop-err { flex: 1 0 100%; font-size: 13px; color: var(--neg, #d03b3b); }

.sop-videos { display: grid; gap: 26px; max-width: 960px; margin-bottom: 8px; }
.sop-video { margin: 0; }
.sop-video video {
  display: block; width: 100%; aspect-ratio: 16 / 9; background: #000;
  border-radius: 10px; border: 1px solid var(--border);
}
.sop-video figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.sop-file-title, .sop-file-title-static {
  font: inherit; font-size: 15px; font-weight: 500; color: var(--text);
  border: 0; border-bottom: 1px solid transparent; background: transparent; padding: 2px 0; max-width: 100%;
}
.sop-file-title:hover, .sop-file-title:focus { border-bottom-color: var(--border); outline: none; }
.sop-file-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.sop-file-meta { font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.sop-file-link { font-size: 12.5px; color: var(--accent); text-decoration: none; }
.sop-file-link:hover { text-decoration: underline; }
.sop-file-del {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--text-muted); cursor: pointer;
}
.sop-file-del:hover { color: var(--neg, #d03b3b); background: rgba(208, 59, 59, 0.08); }
.sop-file-del svg { width: 15px; height: 15px; }

.sop-docs { list-style: none; margin: 0 0 8px; padding: 0; max-width: 960px; }
.sop-doc { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.sop-doc:last-child { border-bottom: 0; }
.sop-doc-icon { width: 20px; height: 20px; flex: none; color: var(--text-muted); }
.sop-doc-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sop-doc-name { font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.sop-doc-name:hover { color: var(--accent); }

/* ---- Hiring: tick candidates, delete one or many (26 Sep 2026) ------------
   The tick is the site's .post-row-tick; the row bin is the routines table's
   hover .doc-del; the bulk button is the drawer's .issue-delete-btn. */
.hiring-candidates-table .hiring-tick-cell { width: 34px; padding-right: 0; }
.hiring-candidates-table .hiring-tick-cell .post-row-tick { display: block; }
.hiring-candidates-table .hiring-row-actions { width: 34px; text-align: right; }
.hiring-row-del { opacity: 0; transition: opacity 0.12s ease; }
.hiring-app:hover .hiring-row-del, .hiring-row-del:focus-visible { opacity: 1; }
@media (hover: none) { .hiring-row-del { opacity: 1; } }
.hiring-app.is-ticked td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.hiring-bulk-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.hiring-bulk-bar[hidden] { display: none; }
.hiring-bulk-n { font-size: 13px; font-weight: 600; }
.hiring-bulk-bar .issue-delete-btn { margin: 0; }

/* (The table header is the ui-table component in ui.css.) */

/* Page add buttons sit at the right-hand end of the list toolbar on every page
   (Tom, 28 Sep 2026): Issues List, Key Information, SOPs, Playbooks, Hiring. The
   Knowledge Base's Upload is already there. */
.issues-toolbar > .post-action-add,
.issues-toolbar > .issue-add-form,
.kd-toolbar > .kd-add { order: 99; margin-left: auto; }
.kd-toolbar > .kd-add { margin-left: 0; }   /* .kd-toolbar-end already takes the free space */
.issues-toolbar:has(.if-done-toggle) > .issue-add-form { margin-left: 0; }   /* the done toggle takes it */
/* Same for a plain add button (Hiring's + New role): otherwise the free space is split between
   it and the toggle, and "Show closed roles" + Filters sat mid-row (Tom, 29 Sep 2026). */
.issues-toolbar:has(.if-done-toggle) > .post-action-add { margin-left: 0; }
/* No open board meeting: the note on the left, Create on the right. */
.meeting-create { justify-content: space-between; }
.meeting-create form { order: 2; }
.btn-create-meeting { height: 34px; padding: 0 14px; }

/* ---- Run now: the play button on a routine (Tom, 28 Sep 2026) ---------------------------
   In the table beside the bin, always showing (unlike the bin) because it is the thing you
   come to the list for; and in the routine's own head beside its switches. While a run it
   asked for is going, the triangle becomes a still hourglass: no spinner, since the portfolio
   keeps no running animation. */
.routine-row-actions { width: 64px; white-space: nowrap; }
.routine-play {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 3px; border: 0; background: transparent; cursor: pointer;
  color: var(--text-muted); vertical-align: middle; transition: color 0.12s;
}
.routine-play svg { width: 14px; height: 14px; flex: none; }
.routine-play:hover:not(:disabled) { color: var(--accent); }
.routine-play:disabled { cursor: default; opacity: 0.45; }
.routine-play .routine-play-wait { display: none; }
.routine-play.is-running { color: var(--accent); opacity: 1; }
.routine-play.is-running .routine-play-icon { display: none; }
.routine-play.is-running .routine-play-wait { display: inline-block; }
.routine-row-actions .routine-del + .routine-play { margin-left: 4px; }
.routine-play-head {
  padding: 6px 12px 6px 10px; border: 1px solid var(--accent); border-radius: 999px;
  color: var(--accent); font: inherit; font-size: 13px; font-weight: 500;
}
.routine-play-head svg { width: 12px; height: 12px; }
.routine-play-head:hover:not(:disabled) { background: var(--accent); color: #fff; }
.routine-last-running { color: var(--accent); }

/* ---- The role page scrolls like any page (Tom, 30 Sep 2026) --------------------------------
   From 28 Sep it was fitted to the window with nothing scrolling but boxes inside it; on a
   smaller screen that left the board and table squeezed into little scrollers. Now the page
   grows with its content and the table pages at a fixed 25 rows (hiring.js PAGE_SIZE). */
.hiring-list.showing-role [data-rtab-panel="apps"] > .hiring-screen-row { margin-top: 12px; }

.hiring-pager { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 10px 2px 0; }
.hiring-pager[hidden] { display: none; }
.hiring-pager-info { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; margin-right: 6px; }
.hiring-pager-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  padding: 0; border: 1px solid var(--border); border-radius: 6px; background: transparent;
  color: var(--text); cursor: pointer;
}
.hiring-pager-btn svg { width: 15px; height: 15px; }
.hiring-pager-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.hiring-pager-btn:disabled { opacity: 0.35; cursor: default; }
/* Candidate tabs and Upload applications share one row (Tom, 28 Sep 2026). */
.hiring-apps-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 4px 0 12px; }
.hiring-apps-bar .hiring-apps-tabs { margin: 0; }
.hiring-apps-bar .hiring-apps-upload { margin: 0; gap: 12px; }
/* Filters and the Screening picker on the left; Table/Board and Upload on the right
   (Tom, 30 Sep 2026). */

/* Private / Shared in its own column (Tom, 28 Sep 2026), sized to the badge. */
.routine-vis { width: 1%; white-space: nowrap; }
/* Run now and Save together at the bottom right of a routine (Tom, 28 Sep 2026). */
.routine-modal-go { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* Beside Save it takes Save's shape (6px corners, same height) as its outlined partner. */
.routine-modal-go .routine-play-head { padding: 9px 14px 9px 12px; border-radius: 6px; font-size: inherit; }
/* Routines table columns (Tom, 28 Sep 2026). Fixed layout so the widths hold, and a long
   cell ends in an ellipsis (Last run carries its full text as a tooltip). */
.drawer.maximized .routines-table, .routine-list .routines-table { table-layout: fixed; width: 100%; }
.routines-table th, .routines-table td { padding-left: 16px; padding-right: 16px; }
/* Every data column the same width (Tom, 28 Sep 2026): with a fixed layout, columns given
   no width share what is left equally. Only the run count and the buttons are narrow. */
.routines-table .rt-c-runs { width: 44px; }
.routines-table .rt-c-act { width: 76px; }
.routines-table td { overflow: hidden; text-overflow: ellipsis; }
.routines-table .routine-last { white-space: nowrap; }
.routines-table td:first-child { white-space: nowrap; }
/* Run now and Save the same height whatever their paddings and fonts: the row stretches
   both to the taller one (Tom, 28 Sep 2026). */
.routine-modal-go { align-items: stretch; }
.routine-modal-go > button { box-sizing: border-box; margin: 0; line-height: 1.2; }
.routine-modal-go .routine-play-head { padding-top: 0; padding-bottom: 0; }

/* Dialog titles: no dashed underline, and the size of the company name in the top bar
   (Tom, 28 Sep 2026). Covers the routine editor, Create report / forecast (.rb-dname, whose
   rules live in report_builder.html's own style block, hence html body to outrank them and
   their phone-size overrides) and New playbook. */
html body .routine-dname, html body .rb-dname, html body .pb-dname {
  border-bottom: 0; padding-bottom: 0;
  font-size: 18px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em;
}
/* No box on focus either (Tom, 28 Sep 2026): the caret is enough. */
html body .routine-dname:focus, html body .rb-dname:focus, html body .pb-dname:focus,
html body .routine-dname:focus-visible, html body .rb-dname:focus-visible, html body .pb-dname:focus-visible {
  outline: none; box-shadow: none; border: 0;
}

/* + New playbook and Astra's Create in a routine: teal OUTLINE, like Run now, so Save stays
   the one solid button in the window (Tom, 28 Sep 2026). */
html body .routine-panel .routine-newbook,
html body .routine-panel .routine-ask-btn {
  background: transparent; color: var(--accent); border: 1px solid var(--accent);
  filter: none; box-shadow: none;
}
html body .routine-panel .routine-newbook:hover:not(:disabled),
html body .routine-panel .routine-ask-btn:hover:not(:disabled) {
  background: var(--accent); color: #fff; border-color: var(--accent); filter: none;
}
html body .routine-panel .routine-ask-btn:disabled { opacity: 0.5; cursor: default; }
/* The buttons cell never clips: the bin and play (plus the gap between them) were a few
   px wider than 76px less padding, so the ellipsis rule cut play off as "…" (Tom, 28 Sep). */
.routines-table .rt-c-act { width: 92px; }
.routines-table td.routine-row-actions { overflow: visible; text-overflow: clip; padding-left: 8px; text-align: right; }
/* Bin and play: the same 22px box, centred on the same line (Tom, 28 Sep 2026). The bin
   sat on the text baseline while play was middle-aligned, so they looked staggered. */
.routines-table .routine-row-actions > .routine-del,
.routines-table .routine-row-actions > .routine-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; vertical-align: middle; line-height: 0;
}
.routines-table .routine-row-actions svg { width: 14px; height: 14px; }
/* Only one of play / hourglass at a time: the hourglass shows while a run is going. */
.routines-table .routine-play .routine-play-wait,
.routines-table .routine-play.is-running .routine-play-icon { display: none; }
.routines-table .routine-play.is-running .routine-play-wait { display: block; }

/* ---- Routine run log (Tom, 28 Sep 2026) --------------------------------------------------
   Opens over the routine, the same panel look as the routine window. */
.routine-modal-left { display: flex; align-items: stretch; gap: 10px; }   /* View log matches Delete routine's height */
.routine-log-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 6px; background: transparent;
  color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
}
.routine-log-btn svg { width: 14px; height: 14px; }
.routine-log-btn:hover { border-color: var(--accent); color: var(--accent); }

.routine-log-overlay {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--scrim);
}
.routine-log-overlay[hidden] { display: none; }
.routine-log-box {
  width: min(860px, 100%); max-height: min(86vh, 880px); overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 26px 26px;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
}
.routine-log-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.routine-log-eyebrow { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.routine-log-title { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.routine-log-close { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; padding: 4px; }
.routine-log-close svg { width: 18px; height: 18px; display: block; }
.routine-log-close:hover { color: var(--text); }

.routine-run { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; background: var(--panel-inset, transparent); }
.routine-run > summary {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none;
  font-size: 13.5px;
}
.routine-run > summary::-webkit-details-marker { display: none; }
.routine-run > summary .routine-dot { margin-right: 0; }
.routine-run-when { font-weight: 500; }
.routine-run-status { font-weight: 500; }
.routine-run-error .routine-run-status, .routine-run-stale .routine-run-status { color: #e5687a; }
.routine-run-handover .routine-run-status { color: #d99a2b; }
.routine-run-running .routine-run-status { color: var(--accent); }
.routine-run-meta { margin-left: auto; color: var(--text-muted); font-size: 12.5px; }
.routine-dot-handover { background: #d99a2b; }
.routine-dot-running { background: var(--accent); }
.routine-dot-stale { background: #e5687a; }
.drawer:not(.maximized) .routine-row:has(.routine-dot-handover) { border-left-color: #d99a2b; }
.routine-last-handover { color: #d99a2b; }

.routine-steps { list-style: none; margin: 0; padding: 4px 14px 14px; border-top: 1px solid var(--border); }
.routine-step { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 7px 0; font-size: 13.5px; line-height: 1.5; }
.routine-step + .routine-step { border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.routine-step-time { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 12px; padding-top: 1px; }
.routine-step-body { min-width: 0; }
.routine-step-text { overflow-wrap: anywhere; white-space: pre-wrap; }
.routine-step-result { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; overflow-wrap: anywhere; }
.routine-step-result.is-error, .routine-step-error .routine-step-text { color: #e5687a; }
/* What Astra SAID between steps reads as her voice, set off from the actions. */
.routine-step-said .routine-step-text { padding-left: 10px; border-left: 2px solid #f27ac8; color: var(--text); }   /* Astra pink, from her rim */
.routine-step-status .routine-step-text, .routine-step-live .routine-step-text { color: var(--text-muted); font-style: italic; }
@media (max-width: 720px) {
  .routine-log-overlay { padding: 10px; }
  .routine-step { grid-template-columns: 1fr; gap: 0; }
}

/* ---- "Astra needs you" (Tom, 29 Sep 2026) ------------------------------------------------
   A routine of yours stopped for a person. Bottom right, above Astra's launcher, still (no
   entrance animation, per the menu-only motion rule), amber like the "Needs you" status. */
.ra-toast {
  position: fixed; right: 24px; bottom: 96px; z-index: 80; width: min(380px, calc(100vw - 32px));
  padding: 14px 16px 12px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--panel-border); border-left: 3px solid #d99a2b;
  box-shadow: var(--panel-shadow); color: var(--text); font-size: 13.5px; line-height: 1.45;
}
.ra-toast[hidden] { display: none; }
.ra-head { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 4px; }
.ra-dot { width: 8px; height: 8px; border-radius: 50%; background: #d99a2b; flex: none; }
.ra-what { margin-bottom: 4px; }
.ra-why { color: var(--text-muted); font-size: 13px; }
.ra-more { color: var(--text-muted); font-size: 12.5px; margin-top: 4px; }
.ra-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.ra-actions button {
  font: inherit; font-size: 13px; padding: 7px 12px; border-radius: 6px; cursor: pointer;
}
.ra-dismiss { background: transparent; border: 1px solid var(--border); color: var(--text); }
.ra-dismiss:hover { border-color: var(--text-muted); }
.ra-open { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.ra-open:hover { filter: brightness(0.95); }
.ra-alerts {
  display: block; margin: 8px 0 0 auto; padding: 0; border: 0; background: none;
  color: var(--accent); font: inherit; font-size: 12.5px; cursor: pointer;
}
.ra-alerts:hover { text-decoration: underline; }
@media (max-width: 720px) { .ra-toast { right: 16px; bottom: 84px; } }

/* In the browser window, after control is handed back: carry on with the routine. */
.browser-rerun {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 10px 12px; border-radius: 8px;
  background: color-mix(in srgb, #d99a2b 12%, transparent); border: 1px solid color-mix(in srgb, #d99a2b 40%, transparent);
  font-size: 13.5px;
}
.browser-rerun[hidden] { display: none; }
.browser-rerun-text { flex: 1 1 240px; }
.browser-rerun-no { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.browser-rerun-go { padding: 7px 12px; font-size: 13px; }
/* The bar above the browser stacks ABOVE it (Tom, 29 Sep 2026): the window body lays out in
   a row, which squeezed the "Astra stopped at" bar into the left half. */
.browser-window .astra-window-body { flex-direction: column; }
.browser-window .browser-rerun { flex: none; margin: 10px 12px 0; }

/* ---- The bell: "Needs you" in the top bar, beside Settings (Tom, 29 Sep 2026) ------------
   Takes the margin-left:auto that pushed the gear to the right, so the two sit together. */
.notify-wrap { position: relative; align-self: center; flex: none; margin-left: auto; }
html body .dash-head .notify-wrap + .settings-link { margin-left: 4px; }
.notify-bell {
  position: relative; display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px; padding: 0; border: 0; background: none;
  cursor: pointer; color: rgba(255, 255, 255, 0.8);
}
.notify-bell svg { width: 20px; height: 20px; }
.notify-bell:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.notify-bell.has-items { color: #f0b54a; }
.notify-count {
  position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: #d99a2b; color: #1a1206;
  font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center;
}
.notify-count[hidden] { display: none; }
.notify-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 90; width: min(380px, calc(100vw - 24px));
  max-height: min(70vh, 560px); overflow-y: auto; padding: 8px;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px;
  box-shadow: var(--panel-shadow); color: var(--text); font-size: 13.5px; line-height: 1.45; text-align: left;
}
.notify-menu[hidden] { display: none; }
.notify-menu-head { padding: 6px 8px 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.notify-item { padding: 10px 10px 10px 12px; border-radius: 8px; border-left: 3px solid #d99a2b; background: var(--panel-inset, rgba(127,127,127,.05)); }
.notify-item + .notify-item { margin-top: 8px; }
.notify-item-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notify-item-co { color: var(--text-muted); font-size: 12.5px; }
.notify-item-why { color: var(--text-muted); font-size: 13px; margin-top: 3px; }
.notify-item-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.notify-item-actions button { font: inherit; font-size: 13px; padding: 6px 11px; border-radius: 6px; cursor: pointer; }
.notify-empty { margin: 4px 8px 10px; color: var(--text-muted); }
html body.light .notify-bell { color: rgba(255, 255, 255, 0.8); }
@media (max-width: 640px) {
  .notify-wrap { order: 2; }
  html body .dash-head .settings-link { order: 2; }
}

/* Red exclamation: a run stopped waiting for a person (Tom, 29 Sep 2026). Exactly one of
   play / hourglass / exclamation shows; the table's own rules are matched for specificity. */
.routine-play .routine-play-block,
.routines-table .routine-play .routine-play-block { display: none; }
.routine-play.is-blocked:not(.is-running) .routine-play-icon,
.routines-table .routine-play.is-blocked:not(.is-running) .routine-play-icon { display: none; }
.routine-play.is-blocked:not(.is-running) .routine-play-block,
.routines-table .routine-play.is-blocked:not(.is-running) .routine-play-block { display: block; }
.routine-play.is-blocked:not(.is-running) { color: #e5534b; opacity: 1; }
.routine-play.is-blocked:not(.is-running):hover { color: #ff6b62; }
.routine-play-head.is-blocked:not(.is-running) { border-color: #e5534b; }
.routine-play-head.is-blocked:not(.is-running):hover { background: #e5534b; color: #fff; }
.routine-play-head .routine-play-block { width: 14px; height: 14px; }
/* Phones: the list is pinned to the screen's edges, not hung off the bell, which sits too
   far left for a 380px list to fit (it ran off the left edge at 390px). */
@media (max-width: 640px) {
  .notify-menu { position: fixed; left: 12px; right: 12px; top: 104px; width: auto; }
}
/* "Runs in: My Chrome" status line (Tom, 29 Sep 2026). */
.routine-chrome-state { margin-top: 8px; }
.routine-chrome-state[hidden] { display: none; }
.routine-chrome-ok { color: var(--accent); font-weight: 500; }
.routine-chrome-no { color: #d99a2b; font-weight: 500; }

/* Stop (Tom, 29 Sep 2026): hover a running routine's hourglass and it becomes a red stop
   square; while a stop is on its way the hourglass stays, greyed. */
.routine-play .routine-play-stop,
.routines-table .routine-play .routine-play-stop { display: none; }
.routine-play.is-running:not(:disabled):hover .routine-play-wait,
.routines-table .routine-play.is-running:not(:disabled):hover .routine-play-wait { display: none; }
.routine-play.is-running:not(:disabled):hover .routine-play-stop,
.routines-table .routine-play.is-running:not(:disabled):hover .routine-play-stop { display: block; }
.routine-play.is-running:not(:disabled) { cursor: pointer; }
.routine-play.is-running:not(:disabled):hover { color: #e5534b; }
.routine-play-head.is-running:not(:disabled):hover { border-color: #e5534b; background: transparent; color: #e5534b; }
.routine-play.is-running:disabled { opacity: 0.55; }
.routine-last-stopped, .routine-run-stopped .routine-run-status { color: var(--text-muted); }
.routine-dot-stopped { background: rgba(127, 127, 127, 0.6); }

/* Astra's question and the answer box (Tom, 29 Sep 2026): in the corner card, the bell and the
   routine. Her words kept as written (line breaks), scrolling if long. */
.ra-question { white-space: pre-wrap; max-height: 220px; overflow-y: auto; color: var(--text); }
.ra-answer, .routine-answer-input {
  display: block; box-sizing: border-box; width: 100%; margin-top: 10px; padding: 8px 10px;
  font: inherit; font-size: 13.5px; color: var(--text); background: var(--panel-inset, rgba(127,127,127,.06));
  border: 1px solid var(--border); border-radius: 8px; resize: vertical;
}
.ra-answer:focus, .routine-answer-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.routine-answer {
  margin: 0 0 18px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, #d99a2b 45%, transparent); background: color-mix(in srgb, #d99a2b 8%, transparent);
}
.routine-answer-head { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; }
.routine-answer-q { white-space: pre-wrap; max-height: 260px; overflow-y: auto; font-size: 13.5px; line-height: 1.5; }
.routine-answer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; }
.routine-answer-status { color: var(--text-muted); font-size: 13px; margin-right: auto; }
/* The dot says what is happening NOW (Tom, 29 Sep 2026): teal running, amber only while she
   actually waits on a person, red if the last run failed, else on / off. */
.drawer:not(.maximized) .routine-row:has(.routine-dot-running) { border-left-color: var(--accent); }

/* The CV column is a document icon that opens the CV (Tom, 29 Sep 2026). */
.hiring-cv-cell { width: 1%; white-space: nowrap; }
.hiring-cv-link {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px;
  color: var(--text-muted); vertical-align: middle;
}
.hiring-cv-link svg { width: 17px; height: 17px; }
.hiring-cv-link:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ---- The corner: live Astra card above any "needs you" card (Tom, 29 Sep 2026) ----------
   One stack, bottom right above Astra's launcher. Still: no animation (menu-only motion rule). */
.ra-stack {
  position: fixed; right: 24px; bottom: 96px; z-index: 80; width: min(400px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.ra-stack > * { pointer-events: auto; }
.ra-stack .ra-toast { position: static; right: auto; bottom: auto; width: auto; }
.ra-live[hidden] { display: none; }
.ra-live { display: flex; flex-direction: column; gap: 10px; }
.ra-live-card {
  padding: 14px 16px 12px; border-radius: 12px; background: var(--panel); color: var(--text);
  border: 1px solid var(--panel-border); border-left: 3px solid var(--accent); box-shadow: var(--panel-shadow);
  font-size: 13.5px; line-height: 1.45;
}
.ra-live-card.ra-live-error { border-left-color: #e5534b; }
.ra-live-card.ra-live-handover, .ra-live-card.ra-live-question { border-left-color: #d99a2b; }
.ra-live-card.ra-live-stopped, .ra-live-card.ra-live-ok { border-left-color: var(--border); }
.ra-dot-running, .ra-dot-queued { background: var(--accent); }
.ra-dot-ok { background: #2fae7e; }
.ra-dot-error { background: #e5534b; }
.ra-dot-stopped { background: rgba(127, 127, 127, 0.6); }
.ra-live-batch { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--text-muted); }
.ra-live-where { color: var(--text-muted); font-size: 12.5px; }
.ra-steps { list-style: none; margin: 8px 0 0; padding: 0; max-height: 190px; overflow-y: auto; }
.ra-step { display: grid; grid-template-columns: 58px 1fr; gap: 8px; padding: 4px 0; font-size: 12.5px; }
.ra-step + .ra-step { border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.ra-step-at { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ra-step-text { overflow-wrap: anywhere; }
.ra-step-said .ra-step-text { padding-left: 8px; border-left: 2px solid #f27ac8; }
.ra-step-error .ra-step-text { color: #e5534b; }
.ra-step-res { display: block; color: var(--text-muted); font-size: 12px; }
.ra-live-end { margin-top: 8px; color: var(--text-muted); font-size: 13px; overflow-wrap: anywhere; }
.ra-live-end:empty { display: none; }
.ra-live-stop, .ra-live-close {
  font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--text); border: 1px solid var(--border);
}
.ra-live-stop:hover { border-color: #e5534b; color: #e5534b; }
@media (max-width: 720px) { .ra-stack { right: 16px; bottom: 84px; } }

/* Typing dots on the live card while Astra works (Tom, 29 Sep 2026: asked for this motion,
   an exception to the menu-only rule; only while a run is going, and off for reduced motion). */
.ra-typing { display: inline-flex; gap: 3px; margin-left: 6px; align-items: center; }
.ra-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0.3;
  animation: ra-typing 1.2s infinite ease-in-out; }
.ra-typing i:nth-child(2) { animation-delay: 0.2s; }
.ra-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes ra-typing { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ra-typing i { animation: none; opacity: 0.8; } }
/* Screen unscreened while screening runs (Tom, 29 Sep 2026): typing dots in the button's own
   white, and it stays solid rather than greyed, since it is busy, not unavailable. */
.hiring-screen-btn.is-screening:disabled { opacity: 1; cursor: progress; }
.hiring-screen-dots i { background: #fff; }
.hiring-screen-dots[hidden] { display: none; }

/* ---- Applications: Table / Board (Tom, 29 Sep 2026) ---------------------------------------
   The switch is the Key Information list's (.kd-view-btn); the board a column per screening
   recommendation, scrolling inside the fitted role page. */
.hiring-views { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; margin-left: 12px; }
.hiring-view-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 0; border-radius: 6px;
  background: none; color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer; }
.hiring-view-btn svg { width: 14px; height: 14px; }
.hiring-view-btn:hover { color: var(--text); }
.hiring-view-btn.is-active { color: var(--text); background: rgba(127, 127, 127, 0.14); }
.hiring-candidates-wrap.is-board, .hiring-pager.is-board { display: none !important; }
.hiring-board { display: flex; align-items: stretch; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.hiring-board[hidden] { display: none; }
.hiring-bcol {
  flex: 1 0 220px; display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--line, var(--border)); border-radius: 10px; background: var(--panel-2, rgba(127,127,127,0.04));
}
.hiring-bcol-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 8px; }
.hiring-bcol-n { color: var(--text-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.hiring-bcol-cards { flex: 1; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 8px; }
.hiring-bcol-empty { margin: 4px 4px 8px; color: var(--text-muted); font-size: 13px; }
.hiring-card {
  padding: 10px 11px; border-radius: 8px; background: var(--panel); border: 1px solid var(--border);
  cursor: pointer; font-size: 13.5px;
}
.hiring-card:hover, .hiring-card:focus-visible { border-color: var(--accent); outline: none; }
.hiring-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.hiring-card-name { font-weight: 500; overflow-wrap: anywhere; }
.hiring-card-top .hiring-score { min-width: 40px; height: 22px; font-size: 12.5px; flex: none; }
.hiring-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.hiring-card-foot .hiring-cv-link { margin-left: auto; width: 24px; height: 24px; }
.hiring-card-busy { color: var(--accent); font-size: 12px; }
/* Bulk bar (Tom, 29 Sep 2026): Re-screen selected sized like Delete selected, in teal; and a
   "Select all N" link when only some are ticked. */
.hiring-bulk-bar .hiring-bulk-rescreen { gap: 7px; color: var(--accent); }
.hiring-bulk-bar .hiring-bulk-rescreen svg { width: 14px; height: 14px; flex: none; }
.hiring-bulk-bar .hiring-bulk-rescreen:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.hiring-bulk-all { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; }
.hiring-bulk-all:hover { text-decoration: underline; }
.hiring-bulk-all[hidden] { display: none; }

/* ---- Hiring as a guided process (Tom, 30 Sep 2026) ---------------------------------------
   "It feels confusing as to what to do." The criteria must be confirmed before anything is
   screened; "+ New role" walks through setting the role up step by step; and the roles table
   has a Stage column. (The role page briefly had numbered steps and a "Next" banner; Tom
   wanted the tabs back and the banner gone.) */

/* Confirming the criteria. */
.hiring-confirm {
  margin: 12px 0 0; padding: 12px 14px; border-radius: 8px;
  border: 1px solid #e8d3a8; background: rgba(253, 236, 200, 0.35);
}
body:not(.light) .hiring-confirm { background: rgba(253, 236, 200, 0.08); border-color: rgba(232, 211, 168, 0.35); }
.hiring-confirm.is-confirmed { border-color: rgba(31, 185, 167, 0.45); background: rgba(31, 185, 167, 0.08); }
.hiring-confirm-state { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; }
.hiring-confirm-state svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #b8860b; }
.hiring-confirm.is-confirmed .hiring-confirm-state svg { color: var(--accent); }
.hiring-confirm-actions { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.hiring-confirm-btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 14px; padding: 7px 14px; }
.hiring-confirm-btn svg { width: 15px; height: 15px; flex: none; }
.hiring-confirm-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.hiring-auto-toggle { font-size: 13.5px; }


/* The roles table's Stage column. */
.hiring-stage-cell { width: 1%; white-space: nowrap; }

/* "+ New role" as four steps. */
.hiring-wizard { width: min(620px, calc(100vw - 32px)); }
.hw-steps { list-style: none; display: flex; align-items: center; gap: 6px; margin: 14px 20px 0; padding: 0; }
.hw-step { display: inline-flex; align-items: center; gap: 7px; flex: none; min-width: 0; font-size: 12.5px; color: var(--text-muted); }
/* Each later step carries the line leading to it, and the lines share the spare width. */
.hw-step + .hw-step { flex: 1 1 0; }
.hw-step + .hw-step::before { content: ""; flex: 1 1 12px; min-width: 12px; height: 2px; border-radius: 2px; background: var(--border); margin-right: 3px; }
.hw-step.is-done + .hw-step::before { background: var(--accent); }
.hw-dot {
  flex: none; box-sizing: border-box; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600; border: 2px solid var(--border);
}
.hw-step.is-current { color: var(--text); font-weight: 500; }
.hw-step.is-current .hw-dot { color: var(--accent); border-color: var(--accent); }
.hw-step.is-done .hw-dot { color: #fff; background: var(--accent); border-color: var(--accent); }
.hw-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .hw-step:not(.is-current) .hw-label { display: none; } }
.hw-pane[hidden] { display: none; }
.hw-intro { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
.hw-intro:empty { display: none; }
.hw-criteria { width: 100%; box-sizing: border-box; min-height: 200px; max-height: 46vh; }
.hw-criteria[hidden], .hw-auto[hidden], .hw-writing[hidden] { display: none; }
.hw-auto { margin-top: 12px; }
.hw-note { margin: 12px 0 0; font-size: 13px; color: var(--text-muted); }
.hiring-wizard .hiring-dfoot .hw-skip { margin-right: auto; }

/* "+ New role" step 4, Collect applications (Tom, 30 Sep 2026): a playbook, a schedule and
   where it runs, made into the role's routine. Five steps need a little more width. */
.hiring-wizard { width: min(680px, calc(100vw - 32px)); }
.hw-book-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hw-book-row .hw-book, .hw-book-row .fsel { flex: 1 1 240px; min-width: 0; width: auto; }
.hw-book-when { margin: 8px 0 0; }
.hw-book-when[hidden], .hw-chrome[hidden] { display: none; }
.hw-chrome { margin: 10px 0 0; }
.hw-runnow-wrap { margin-top: 14px; }
input.hiring-dsel[type="time"] { padding: 0 10px; }

/* ---- Screenings: several named sets of criteria per role (Tom, 30 Sep 2026) ------------
   A row of them above the criteria on the Role tab (the one shown is highlighted, with how
   many candidates it has screened; an amber dot = criteria not confirmed), and a picker on
   the Applications bar to flip every score and recommendation between them. */
/* Role tab: the screenings as the Issues List's saved-view tabs (Tom, 30 Sep 2026). The bar
   is .ivt-bar's look under Hiring's own class (dashboard.html binds every .ivt-bar to the
   Issues List's views); tabs, ⋮ menu and popover are the shared .ivt-* pieces. */
.hiring-ivt-bar { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; }   /* divider: ::before, with .ivt-bar's */
.hiring-sc-bar { margin: 0 0 6px; }
.hiring-sc-bar .ivt-tab-btn { gap: 7px; }
.hiring-sc-meta { margin: 0 0 12px; }
.hiring-sc-ok { color: var(--accent); }
.hiring-sc-todo { color: #b8860b; }
.hiring-screening-pick-body { display: flex; align-items: center; }
.hiring-sc-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.hiring-sc-pick .hiring-sc-select, .hiring-sc-pick .fsel { max-width: 240px; }

.hiring-sc-start { display: flex; flex-direction: column; gap: 6px; }
.hiring-sc-start[hidden] { display: none; }
.hiring-sc-opt { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); cursor: pointer; }
.hiring-sc-opt[hidden] { display: none; }

/* ---- Marked by hand (Tom, 15 Oct 2026) -------------------------------------------------
   A screening a person marks themselves instead of Astra: a hand on its tab, the two boxes
   that set a candidate's score and outcome in their drawer, and the bar's "Mark selected". */
.hiring-sc-hand { width: 14px; height: 14px; flex: none; color: var(--text-muted); }
.hiring-sc-bar .ivt-tab.is-active .hiring-sc-hand { color: var(--accent); }
/* The two grey tabs, as the Email page's label picker has them: each takes half the width,
   so the pair reads as one switch rather than two buttons that happen to sit together. */
.ui-seg.hiring-sc-mode { display: flex; gap: 4px; margin: 0 0 8px; }
.ui-seg.hiring-sc-mode[hidden] { display: none; }
.hiring-sc-mode .ui-seg-btn { flex: 1 1 0; justify-content: center; }
.hiring-sc-modenote { margin: 0 0 12px; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.hiring-sc-modenote[hidden] { display: none; }

.hiring-mark { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hiring-mark .hiring-mark-score { max-width: 110px; }
.hiring-mark .hiring-mark-rec { max-width: 210px; }
.hiring-mark-status { font-size: 12.5px; }
.hiring-mark-notes { width: 100%; box-sizing: border-box; }

.hiring-manual-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; }
.hiring-manual-note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.hiring-manual-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text-muted); }
.hiring-manual-row svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent); }
.hiring-manual-row strong { color: var(--text); font-weight: 500; }

/* Dragging a card to another column is marking it (Tom, 15 Oct 2026). Only a screening
   marked by hand has draggable cards, so the grab cursor is the sign that it is one. */
.hiring-card.is-draggable { cursor: grab; }
.hiring-card.is-draggable:active { cursor: grabbing; }
.hiring-card.is-dragging { opacity: 0.45; }
.hiring-bcol.is-drop { border-color: var(--accent); background: var(--ui-fill, rgba(127, 127, 127, 0.08)); }
.hiring-bcol.is-drop .hiring-bcol-empty { color: var(--accent); }
.hiring-board-note { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.hiring-board-note[hidden] { display: none; }

.hiring-bulk-mark { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.hiring-bulk-mark .hiring-bulk-rec { max-width: 210px; }

.hiring-other-results { margin-top: 14px; font-size: 13.5px; }
.hiring-other-results ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hiring-other-results li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hiring-other-name { color: var(--text); }

/* ---- Applications laid out like the Issues List (Tom, 30 Sep 2026) ---------------------
   The view tabs (.ivt-bar / .ivt-tab, the Issues List's own) over a hairline, then the
   toolbar: Table/Board, search, the Screening picker, Upload at the right end. */
.hiring-apps-viewbar { margin: 0 0 20px; }
.hiring-apps-viewbar .ivt-tab-btn { gap: 7px; }
.hiring-apps-vtabs .ivt-tab-btn { display: inline-flex; align-items: center; gap: 7px; }
.hiring-tab-n {
  min-width: 18px; padding: 0 6px; border-radius: 999px; font-size: 11px; line-height: 17px; font-weight: 400;
  text-align: center; background: rgba(127, 127, 127, 0.16); color: var(--text-muted);
}
.hiring-apps-toolbar { flex-wrap: wrap; gap: 10px 16px; margin: 0 0 22px; }
.hiring-apps-toolbar .hiring-views { margin-left: 0; }
.hiring-apps-toolbar .hiring-apps-upload { margin: 0 0 0 auto; gap: 12px; }

/* ---- The role page laid out like a board meeting page (Tom, 30 Sep 2026) ----------------
   No card round the whole page: the role's details are their own white card, the section
   tabs their white pill, and what each tab holds sits below on the page ground, as a meeting
   page does. Tables and boards bring their own white sheets. */
body.theme-slate.light .widget.hiring-list.showing-role,
body.theme-slate .widget.hiring-list.showing-role,
.widget.hiring-list.hiring-list.showing-role {
  background: transparent; box-shadow: none; border: 0; border-radius: 0; padding: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hiring-list.showing-role .hiring-role-head {
  margin: 0 0 26px; padding: 18px 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
body.theme-slate.light .hiring-list.showing-role .hiring-role-head {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 24px rgba(14, 14, 18, 0.07);
}
.hiring-list.showing-role .hiring-page-bar { margin-bottom: 14px; }
/* On the page ground, text boxes keep a white surface so they still read as boxes. */
.hiring-list.showing-role .hiring-textarea { background: var(--surface); }

/* Spacing (Tom, 30 Sep 2026). The toolbar's own margin lost to `.hiring-list .issues-toolbar
   { margin-bottom: 0 }`, which is why the table sat hard under it; this outranks that. And
   the section menu gets the board meeting page's spacing: measured there as 27px from the
   header card to the menu and 24px from the menu to what is under it. */
.hiring-list .hiring-apps-toolbar { margin-bottom: 26px; }
.hiring-list.showing-role .hiring-role-head { margin-bottom: 14px; }
.hiring-list.showing-role .hiring-rpanel { padding-top: 1px; }

/* The CRM's styles, and the shared design components, are in ui.css (4 Oct 2026). */

/* ===========================================================================
   The section menus are left rails (Tom, 4 Oct 2026), not a dropdown in the header.

   the operator's staff (body.has-secrail): the dark rail keeps the companies; a second dark
   rail beside it, under the header, lists the sections of the company on screen;
   a section's own menu (the CRM's light rail) moves one place to the right.
   A company's own people (body.rail-sections): they only ever see one company, so
   the dark rail itself lists the sections (_side_rail.html decides which).
   Phones have no rails: the header's dropdown is still the menu there.
   =========================================================================== */
body { --sec-w: 0px; }
.sec-rail { display: none; }
.side-head { display: none; }
html body.rail-sections .dash-head .secmenu-btn { display: none; }   /* the rail (or its hamburger) is the menu */

@media (min-width: 821px) {
  body.has-secrail { --sec-w: 204px; }
  body.has-secrail.secrail-mini { --sec-w: 56px; }
  html body.has-secrail .dash-head .secmenu-btn { display: none; }

  .sec-rail {
    position: fixed; z-index: 21; left: var(--rail-w); top: var(--head-h, 102px); bottom: 0; width: var(--sec-w);
    display: flex; flex-direction: column; box-sizing: border-box; padding: 14px 10px 12px;
    /* dark in both modes, a shade up from the companies rail so the two read as two */
    background: #17181d; border-right: 1px solid rgba(255, 255, 255, 0.08); color: #f4f7f7;
    transition: left 0.2s ease, width 0.2s ease;
  }
  .sec-rail-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden auto; scrollbar-width: none; }
  .sec-rail-list::-webkit-scrollbar { display: none; }
  .sec-head {
    flex: none; margin: 0; padding: 6px 12px 4px; font-size: 11.5px; font-weight: 600; line-height: 16px;
    text-transform: uppercase; letter-spacing: .08em; color: rgba(244, 247, 247, 0.46); white-space: nowrap; overflow: hidden;
  }
  .sec-head.ruled { margin-top: 8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.10); }
  .sec-head.is-rule { padding-bottom: 0; }
  .sec-link {
    flex: none; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: 8px;
    color: rgba(244, 247, 247, 0.74); text-decoration: none; font-size: 14px; font-weight: 350; white-space: nowrap; overflow: hidden;
  }
  .sec-link .side-ico { flex: 0 0 18px; color: rgba(244, 247, 247, 0.56); }
  .sec-link .side-ico svg { width: 18px; height: 18px; }
  /* (the companies rail hides .side-label when IT is collapsed: not these) */
  html body .sec-rail .sec-link .side-label { display: block; width: auto; visibility: visible; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .sec-link:hover { background: rgba(244, 247, 247, 0.07); color: #fff; }
  .sec-link.active { background: rgba(31, 185, 167, 0.20); color: #fff; font-weight: 500; }
  .sec-link.active .side-ico { color: #1fb9a7; }
  .sec-link:focus-visible { outline: 2px solid #1fb9a7; outline-offset: -2px; }
  .sec-rail-toggle {
    flex: none; align-self: flex-start; margin-top: 8px; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; color: rgba(244, 247, 247, 0.56);
  }
  .sec-rail-toggle:hover { background: rgba(244, 247, 247, 0.07); color: #fff; }
  .sec-rail-toggle svg { width: 18px; height: 18px; }
  /* collapsed: icons only, the label left to the tooltip; a group is just its rule */
  body.secrail-mini .sec-link { justify-content: center; padding: 0; }
  html body.secrail-mini .sec-rail .sec-link .side-label { display: none; }
  body.secrail-mini .sec-head { height: 0; padding: 0; margin: 6px 8px; }
  body.secrail-mini .sec-head span { display: none; }
  body.secrail-mini .sec-head:not(.ruled) { display: none; }
  body.secrail-mini .sec-rail-toggle { align-self: center; }

  /* The page, the header and the CRM's rail make room. */
  body.has-secrail .content { padding-left: calc(var(--content-pad-x) + var(--sec-w)); transition: padding-left 0.2s ease; }
  body.has-secrail .content .dash-head .topnav { margin-left: calc(-1 * (var(--content-pad-x) + var(--sec-w))); }
  body.has-secrail.has-subrail .content { padding-left: calc(var(--content-pad-x) + var(--sec-w) + var(--crm-rail-w)); }
  body.has-secrail.has-subrail .content .dash-head .topnav { margin-left: calc(-1 * (var(--content-pad-x) + var(--sec-w) + var(--crm-rail-w))); }
  body.has-secrail .crm-subrail { left: calc(var(--rail-w) + var(--sec-w)); }
  body.has-secrail .drawer.maximized { width: calc(100vw - var(--rail-w) - var(--sec-w)); }

  /* A company's own people: the sections in the dark rail, under group headings. */
  .side-head {
    display: block; flex: none; padding: 6px 12px 3px; font-size: 11.5px; font-weight: 600; line-height: 16px;
    text-transform: uppercase; letter-spacing: .08em; color: rgba(244, 247, 247, 0.46); white-space: nowrap; overflow: hidden;
  }
  .side-head.ruled { margin-top: 8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.10); }
  .side-head.is-rule { padding-bottom: 0; }
  .side-sections { gap: 2px; scrollbar-width: none; }   /* no top gap: the first section starts on the header's bottom edge */
  .side-sections::-webkit-scrollbar { display: none; }
  .side-sections .side-link { flex: none; }
  /* collapsed: an icon each (no code under it: a section has none), groups as rules */
  body.sidebar-mini .side-sections { gap: 4px; }
  body.sidebar-mini .side-sections .side-link { padding-top: 11px; padding-bottom: 11px; }
  body.sidebar-mini .side-head { height: 0; padding: 0; margin: 6px 14px; }
  body.sidebar-mini .side-head span { display: none; }
  body.sidebar-mini .side-head:not(.ruled) { display: none; }
}
/* One set of rows for the three rails (Tom, 4 Oct 2026). Collapsed, the sections rail
   and the CRM's rail keep their own small look (56px wide, a 38px rounded box per item)
   but sit on the companies rail's rows: the first row starts on the header's bottom
   edge, and each row is --rail-row tall with --rail-gap under it, the companies rail's
   own measure (pinned here so the other two can follow it, expanded or collapsed). The
   small box is centred in its row. The CRM's half is in ui.css. */
body { --rail-row: 42px; --rail-gap: 4px; }
@media (min-width: 821px) {
  body.sidebar-mini { --rail-row: 52px; --rail-gap: 14px; }
  .side-nav:not(.side-sections) { gap: var(--rail-gap); }
  .side-nav:not(.side-sections) .side-link { flex: none; box-sizing: border-box; height: var(--rail-row); }
  body.secrail-mini .sec-rail { padding: 0 10px 15px; }
  body.secrail-mini .sec-rail-list { gap: var(--rail-gap); }
  body.secrail-mini .sec-link { margin: calc((var(--rail-row) - 38px) / 2) 0; }
  /* a group's rule sits in the gap between two rows and takes no room of its own */
  body.secrail-mini .sec-head.ruled { margin: calc((var(--rail-gap) + 1px) / -2) 8px; }
}
/* The dark rail's icons are the size of the other rails' (Tom, 4 Oct 2026): 18px, was 21px. */
.sidebar .side-ico { flex-basis: 18px; }
.sidebar .side-ico svg { width: 18px; height: 18px; }
/* Hover tip for a collapsed left menu (Tom, 4 Oct 2026): the item's name, beside its icon,
   on all three rails. Drawn by topnav.js; fixed to the window so no rail clips it. */
.rail-tip {
  position: fixed; z-index: 60; pointer-events: none; transform: translateY(-50%);
  padding: 6px 10px; border-radius: 7px; background: #0e0e12; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  font-size: 13px; font-weight: 400; line-height: 1.2; white-space: nowrap;
}
body.theme-slate:not(.light) .rail-tip { background: #2a2b31; }