/* ==========================================================================
   PLATYPUSS — TWENTY DESIGN LANGUAGE
   --------------------------------------------------------------------------
   A token-only layer that blends the visual system of twentyhq/twenty into
   the Command Office without touching its structure, its data, or a single
   existing element.

   Loaded AFTER the inline <style> block, so it wins on equal specificity.

   What is borrowed from Twenty:
     - a neutral 12-step gray ramp instead of a blue-tinted one
     - hairline borders (alpha .09) instead of heavy shadows
     - compact density: 32px rows, 24px chips, 48px header
     - ONE focus rule: a 2px accent outline at 1px offset, no glow
     - hover paint gated behind @media (hover: hover) so touch never sticks
     - a small, deliberate motion set
     - hierarchy from size and colour rather than from bold weights

   What is NOT borrowed: Twenty's blue accent. Africa is Watching green is
   the brand and the status colours carry meaning (emerald = live, gold =
   pending, crimson = failure), so the accent stays green and only the
   neutrals, the density and the borders change.

   NOTE ON THE 13px ROOT: Twenty sets html{font-size:13px} and calibrates
   its own rem scale to it. Platypuss's existing type scale is authored in
   rem against a 16px root, so switching the root would silently shrink
   every label by 19%. The same compact result is reached by tuning the
   pixel values below instead. The root font size is left alone.
   ========================================================================== */

:root {
  /* --- Twenty's scale, expressed in the units this codebase uses ------- */
  --tw-row-h: 32px;          /* record table row height */
  --tw-cell-pad: 8px;        /* record table cell padding */
  --tw-chip-h: 24px;         /* filter chip height */
  --tw-header-h: 48px;       /* application header height */
  --tw-viewbar-h: 39px;      /* view bar height */
  --tw-min-col: 104px;       /* minimum record column width */
  --tw-checkbox-w: 28px;     /* row-select column width */
  --tw-panel-w: 500px;       /* record side panel width */
  --tw-panel-min: 320px;
  --tw-panel-max: 600px;

  /* --- Twenty's radii --------------------------------------------------- */
  --tw-radius-xs: 2px;
  --tw-radius-sm: 4px;
  --tw-radius-md: 8px;
  --tw-radius-lg: 16px;
  --tw-radius-xl: 20px;
  --tw-radius-pill: 999px;

  /* --- Twenty's motion set ---------------------------------------------- */
  --tw-motion-instant: 0.075s;
  --tw-motion-fast: 0.15s;
  --tw-motion-normal: 0.3s;
  --tw-motion-slow: 1.5s;
  --tw-ease: ease;
}

/* ==========================================================================
   1. SURFACES — Twenty's gray ramp
   --------------------------------------------------------------------------
   Dark: gray4 .114 / gray5 .133 for the two card levels, gray6 .282 for a
   raised control, gray9 .506 for a pressed control.
   Light: gray1 #fff / gray3 .976 / gray4 .945 / gray5 .922.
   ========================================================================== */

html[data-theme="dark"], body.dark {
  --bg: #131314;
  --bg-card: #1d1d1f;
  --surface: #1d1d1f;
  --surface-2: #222224;
  --surface-3: #2a2a2c;
  --surface-4: #3a3a3e;

  --border: rgba(255, 255, 255, 0.09);
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-focus: rgba(255, 255, 255, 0.22);

  --fg: #ebebec;
  --text: #ebebec;
  --text-muted: #a1a1a4;
  --text-dim: #7c7c80;

  --header-glass: color-mix(in srgb, #131314 96%, transparent);
  --card-glass: rgba(29, 29, 31, 0.88);
  --triage-bg: #1d1d1f;
  --input-bg: #222224;
  --overlay-bg: rgba(19, 19, 20, 0.82);

  /* Hairline, not shadow. Twenty keeps elevation under .08 alpha. */
  --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.039), 0 0 4px 0 rgba(0, 0, 0, 0.078);
  --shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 0 4px 0 rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px 0 rgba(0, 0, 0, 0.28);
}

html[data-theme="light"] {
  --bg: #f4f4f4;
  --bg-card: #ffffff;
  --surface: #ffffff;
  --surface-2: #f9f9f9;
  --surface-3: #f1f1f1;
  --surface-4: #ebebeb;

  --border: rgba(0, 0, 0, 0.09);
  --border-subtle: rgba(0, 0, 0, 0.05);
  --border-focus: rgba(0, 0, 0, 0.22);

  --fg: #1a1a1a;
  --text: #1a1a1a;
  --text-muted: #5f6b76;
  --text-dim: #8899a6;

  --header-glass: color-mix(in srgb, #f4f4f4 96%, transparent);
  --card-glass: rgba(255, 255, 255, 0.88);
  --triage-bg: #ffffff;
  --input-bg: #f9f9f9;
  --overlay-bg: rgba(15, 20, 25, 0.6);

  --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.039), 0 0 4px 0 rgba(0, 0, 0, 0.078);
  --shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 0 4px 0 rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px 0 rgba(0, 0, 0, 0.12);
}

/* Radii follow Twenty's scale. 2xl stays at 28px rather than Twenty's
   40px: it is applied to the modals, and 40px reads as a lozenge on the
   wide dialogs this app already has. */
:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;
}

/* ==========================================================================
   2. FOCUS — one rule, exactly as Twenty does it
   --------------------------------------------------------------------------
   The old treatment was a 3px coloured glow on :focus, which fires on mouse
   clicks and reads as an error state. A 2px outline at 1px offset, only on
   :focus-visible, is the keyboard affordance and nothing else.
   ========================================================================== */

:where(button, a, input, select, textarea, [tabindex], .btn, .admin-nav-item):focus-visible {
  outline: 2px solid var(--emerald-bright);
  outline-offset: 1px;
  border-radius: var(--tw-radius-sm);
}

/* The glow is replaced, not stacked with the outline. */
:where(input, select, textarea, button):focus {
  box-shadow: none;
}
:where(input, select, textarea):focus-visible {
  border-color: var(--border-focus);
}

/* ==========================================================================
   3. HOVER — only where a real pointer exists
   --------------------------------------------------------------------------
   Without this, a tap on a touch device leaves the hover paint stuck, which
   is the single most common complaint about a dense admin table on a phone.
   ========================================================================== */

@media (hover: none) {
  .btn:hover,
  .admin-nav-item:hover,
  .nav-item:hover,
  .table-row:hover,
  .triage-card:hover,
  .preset-chip:hover,
  .grants-sector-pill:hover {
    transform: none;
  }
  .btn:hover { background: var(--surface-2); }
  .btn-primary:hover { background: var(--emerald); }
  .triage-card:hover { border-color: var(--border); }
}

/* ==========================================================================
   4. DENSITY
   --------------------------------------------------------------------------
   Twenty reads "compact" because everything is smaller: 32px rows, 8px
   cell padding, a 48px header. The same numbers here.
   ========================================================================== */

.admin-header { min-height: var(--tw-header-h); }

/* The record tables: the CRM contact list, the grants radar, the outbox,
   the goals board, the org chart. All of them use .admin-table-scroll. */
.admin-table-scroll table { width: 100%; }

.admin-table-scroll thead th {
  height: var(--tw-row-h);
  padding: 0 var(--tw-cell-pad);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.admin-table-scroll tbody td {
  height: var(--tw-row-h);
  padding: 0 var(--tw-cell-pad);
  font-size: 0.8rem;
  vertical-align: middle;
}

/* Hierarchy from colour, not from weight. The table body stops shouting. */
.admin-table-scroll tbody td { font-weight: 400; }
.admin-table-scroll tbody td strong,
.admin-table-scroll tbody td b { font-weight: 600; }

/* A cell that is mostly whitespace is wasted horizontal space. */
.admin-table-scroll tbody td:first-child,
.admin-table-scroll tbody th:first-child { padding-left: var(--tw-cell-pad); }

/* ==========================================================================
   5. MOTION
   --------------------------------------------------------------------------
   Four durations and one easing curve. Anything slower than .3s on a
   data surface is a response-time problem, not a flourish.
   ========================================================================== */

.btn,
.admin-nav-item,
.nav-item,
.pill-score,
.preset-chip,
.grants-sector-pill,
.triage-card,
.table-row {
  transition-duration: var(--tw-motion-fast);
  transition-timing-function: var(--tw-ease);
}

.table-row { transition-property: background-color, border-color; }
.triage-card { transition-property: background-color, border-color, transform; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   6. HAIRLINE BORDERS
   --------------------------------------------------------------------------
   Twenty separates surfaces with a one-pixel line at low alpha rather than
   with a shadow. Cards keep a shadow; the borders do the work.
   ========================================================================== */

.triage-card,
.admin-card,
.stat-card {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   7. CONTINUOUS CORNERS
   --------------------------------------------------------------------------
   Twenty sets corner-shape: round on chips, buttons and skeletons. It is a
   progressive enhancement: browsers that do not support it fall back to the
   ordinary border-radius above, so this block is safe to ship.
   ========================================================================== */

@supports (corner-shape: round) {
  .pill-score,
  .btn,
  .brand-badge-pill,
  .preset-chip,
  .grants-sector-pill,
  .nav-item {
    corner-shape: round;
  }
}

/* ==========================================================================
   8. THE VIEW BAR (Twenty)
   --------------------------------------------------------------------------
   Twenty's ViewBar is a 39px row holding a view picker, editable filter
   chips and an options dropdown. The chips are 24px pills on a blue tint;
   here the tint is the brand green, because the status colours already own
   red, amber and blue in this app.
   ========================================================================== */

.tw-viewbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-height: var(--tw-viewbar-h);
  padding: 0.4rem 0 0.6rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}

.tw-viewbar-picker { position: relative; }

.tw-viewbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: var(--tw-chip-h);
  padding: 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--tw-radius-sm);
  cursor: pointer;
}

.tw-viewbtn:hover { background: var(--surface-3); border-color: var(--border-focus); }
.tw-viewbtn-icon { color: var(--emerald-bright); }
.tw-caret { color: var(--text-dim); font-size: 0.65rem; }

/* The dropdown. */
.tw-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  min-width: 260px;
  max-height: 320px;
  overflow-y: auto;
  padding: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--tw-radius-md);
  box-shadow: var(--shadow-lg);
}

.tw-menu-label {
  padding: 0.3rem 0.5rem;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.tw-menu-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.35rem 0.5rem;
  font-size: 0.75rem;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: var(--tw-radius-sm);
  cursor: pointer;
}

.tw-menu-item:hover { background: var(--surface-2); }
.tw-menu-item.is-active { color: var(--emerald-bright); }
.tw-menu-item-icon { color: var(--text-dim); }
.tw-menu-item.is-active .tw-menu-item-icon { color: var(--emerald-bright); }
.tw-menu-item-label { flex: 1; }
.tw-menu-item-hint {
  font-size: 0.68rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.tw-menu-item-del {
  padding: 0 0.2rem;
  color: var(--text-dim);
  border-radius: var(--tw-radius-xs);
}
.tw-menu-item-del:hover { color: var(--crimson); }
.tw-menu-empty {
  padding: 0.6rem 0.5rem;
  font-size: 0.72rem;
  color: var(--text-dim);
}
.tw-menu-sep {
  height: 1px;
  margin: 0.3rem 0;
  background: var(--border);
}

/* The filter chips. */
.tw-chips { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; flex: 1; }

.tw-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: var(--tw-chip-h);
  padding: 0 0.3rem 0 0.55rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--emerald-bright);
  background: var(--emerald-glow);
  border: 1px solid var(--emerald);
  border-radius: var(--tw-radius-sm);
}

.tw-chip-label { white-space: nowrap; }

.tw-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 0.62rem;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--tw-radius-xs);
  cursor: pointer;
}

.tw-chip-x:hover { background: rgba(255, 255, 255, 0.1); }

.tw-viewbar-actions { display: flex; align-items: center; gap: 0.35rem; }

/* ==========================================================================
   9. THE FUNDING BOARD (Twenty)
   --------------------------------------------------------------------------
   Twenty's Kanban: columns are record groups, 200px wide by default, with a
   per-column aggregate and cards you drag between columns. The width here
   is a little wider because a card carries a title, a funder, an amount and
   a score, and a 200px column would wrap all four.
   ========================================================================== */

.tw-segmented {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--tw-radius-sm);
  overflow: hidden;
}

.tw-seg {
  height: var(--tw-chip-h);
  padding: 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.tw-seg:hover { color: var(--text); }
.tw-seg.is-active { color: var(--text); background: var(--surface-3); }

.tw-board-summary {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.tw-board-summary strong { color: var(--text); font-weight: 600; }
.tw-board-summary-note { color: var(--text-dim); }

.tw-kanban {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;
}

.tw-kanban-column {
  flex: 0 0 260px;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--tw-radius-md);
  min-height: 140px;
}

.tw-kanban-column.is-drop-target {
  border-color: var(--emerald-bright);
  background: var(--surface-3);
}

.tw-kanban-col-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.tw-kanban-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.tw-kanban-col-label { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.tw-kanban-col-prob {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-dim);
  padding: 0 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--tw-radius-xs);
}
.tw-kanban-col-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}

.tw-kanban-col-total {
  font-size: 0.62rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.tw-kanban-col-partial { color: var(--gold-bright); }

.tw-kanban-cards { display: flex; flex-direction: column; gap: 0.4rem; }

.tw-kanban-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.5rem 0.55rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--tw-radius-sm);
  cursor: grab;
}

.tw-kanban-card:hover { border-color: var(--border-focus); }
.tw-kanban-card:active { cursor: grabbing; }

.tw-kanban-card-title {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tw-kanban-card-funder {
  font-size: 0.66rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-kanban-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.tw-kanban-card-amount { color: var(--emerald-bright); font-weight: 600; }
.tw-kanban-card-score { color: var(--text-muted); }
.tw-kanban-card-score--none { color: var(--text-dim); }

.tw-kanban-card-flag {
  align-self: flex-start;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  padding: 0.05rem 0.3rem;
  color: var(--gold-bright);
  border: 1px solid var(--gold);
  border-radius: var(--tw-radius-xs);
}

/* The keyboard path. A board that can only be used with a mouse is a board
   a keyboard operator cannot use. */
.tw-kanban-move {
  margin-top: 0.2rem;
  width: 100%;
  height: 22px;
  padding: 0 0.25rem;
  font-size: 0.64rem;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--tw-radius-xs);
  cursor: pointer;
}

.tw-kanban-move:hover { color: var(--text); border-color: var(--border-focus); }

.tw-kanban-empty,
.tw-empty {
  font-size: 0.7rem;
  color: var(--text-dim);
  padding: 0.5rem 0.2rem;
}

.tw-stage-pill { color: var(--emerald-bright); border: 1px solid var(--emerald); }

/* ==========================================================================
   10. ROW ACTIONS AND THE HEADER
   --------------------------------------------------------------------------
   Twenty renders a record row's actions as 28px controls so the row fits in
   32px. In this app the row actions carry labels rather than icons, so the
   label stays and the control is made compact instead of the row being
   allowed to grow. The scope is table cells on purpose: the tier filters
   are .btn too, and those are chips, not buttons.
   ========================================================================== */
.admin-table-scroll tbody td .btn {
  border-radius: var(--tw-radius-sm);
  padding: 0.16rem 0.38rem;
  font-size: 0.64rem;
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
}

.admin-table-scroll tbody td .btn:hover { transform: none; }

/* Twenty truncates a long cell rather than widening the table, and keeps
   the full value in a tooltip. Scoped to the contact table because the
   other tables in the app have a different column order. The email is the
   widest cell there; the full address stays in the title attribute. */
#crm-table-body td:nth-child(2) code {
  display: inline-block;
  max-width: 215px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* The header is Twenty's 48px. Its own controls are the tallest thing in
   it, so they are compacted rather than the bar being clipped. */
.admin-header .btn {
  padding: 0.3rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 500;
}

.admin-header { min-height: var(--tw-header-h); }

/* ==========================================================================
   11. THE RECORD SEARCH IN THE COMMAND PALETTE
   --------------------------------------------------------------------------
   Twenty's palette searches records as well as destinations, and a record
   result is marked so the operator can tell the two apart before pressing
   Enter. The flash is how the app says which row the palette jumped to.
   ========================================================================== */

.cmd-item--record .cmd-item-label { color: var(--emerald-bright); }

@keyframes tw-row-flash {
  0%   { background-color: var(--emerald-glow); }
  100% { background-color: transparent; }
}

.tw-row-flash { animation: tw-row-flash 1.8s ease-out; }

/* ==========================================================================
   12. THE TWENTY SURFACE
   --------------------------------------------------------------------------
   Twenty's shell is a left drawer, a 39px top bar inside the content
   column, and the content. No hero, no description block, no card stack
   above the fold, and the type is quiet: hierarchy comes from size and
   colour, never from weight.

   This section makes the Command Office read that way. It is a restyle of
   the chrome, not a redesign of the product: every control, every table
   and every number stays exactly where it was.

   The measurements are Twenty's, in the units this codebase uses. Twenty
   calibrates its own rem scale to a 13px root; this app's scale is
   authored against the browser default, which has to stay at the default
   so that rem-based measurements keep following the operating system's
   text-size preference. The density is therefore reached in pixels.
   ========================================================================== */

/* --- The top bar: 39px, a hairline, medium on the left, regular on the right */
.admin-header {
  height: var(--tw-viewbar-h);
  min-height: var(--tw-viewbar-h);
  padding: 0 0.6rem;
  gap: 0.5rem;
}

.admin-header-left { font-weight: 500; color: var(--text-muted); }
.admin-header-right { font-weight: 400; color: var(--text-muted); }

/* --- The breadcrumb: a quiet rule under the bar, not a second bar */
.admin-breadcrumb-bar {
  padding: 0.2rem 0.6rem;
  gap: 0.35rem;
}

.admin-breadcrumb-trail { font-size: 0.7rem; }
.crumb-category { font-size: 0.7rem; }
.crumb-current { font-size: 0.7rem; font-weight: 600; }

/* --- The drawer: a 48px header row with a rule under it */
.admin-sidebar-header {
  height: 48px;
  min-height: 48px;
  padding: 0 0.75rem;
  border-bottom: 1px solid var(--border);
}

.admin-brand-title { font-size: 0.88rem; font-weight: 600; }
.admin-brand-sub { font-size: 0.58rem; letter-spacing: 0.06em; }

.admin-nav-group-label {
  padding: 0.35rem 0.65rem;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.07em;
}

.admin-nav-item {
  gap: 0.55rem;
  padding: 0.3rem 0.5rem;
  min-height: 28px;
  border-radius: var(--tw-radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
}

.admin-sidebar.collapsed .admin-nav-item {
  padding: 0.3rem 0;
  gap: 0;
  min-height: 28px;
}

.admin-nav-icon { font-size: 0.95rem; }

/* --- The tab bar: the object name and the actions, on one 39px row */
.tw-tabbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: var(--tw-viewbar-h);
  padding: 0 0 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.tw-tabbar-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.tw-tabbar-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 1px;
}

.tw-tabbar-sub--row { display: flex; align-items: center; gap: 8px; }

/* --- The triage strip: four compact lanes, hairline and quiet */
.triage-card {
  padding: 0.55rem 0.65rem;
  border-radius: var(--tw-radius-md);
  box-shadow: none;
}

.triage-header-row { font-size: 0.7rem; }
.triage-title { font-family: var(--font-sans); font-size: 0.76rem; font-weight: 600; }
.triage-badge { font-weight: 600; font-size: 0.78rem; }
.triage-desc { font-size: 0.68rem; line-height: 1.3; }

.triage-card:hover { transform: none; }

/* --- Header chips: Twenty's 24px chip, a flat tint and a 4px radius */
.pill-quota,
.admin-status-pill,
.admin-btn-pill-action,
.admin-clock-badge {
  height: var(--tw-chip-h);
  padding: 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: var(--tw-radius-sm);
}

/* --- Stat scale */
.stat-label { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.04em; }
.stat-val { font-size: 0.95rem; font-weight: 600; }

/* --- The agent cards: hairline, no heavy shadow */
.gemini-surface {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   13. BUTTONS AND CARDS
   --------------------------------------------------------------------------
   Twenty's buttons are 4-8px rounded, not pills, and its record cards are
   flat: a hairline border, a tight padding, and no lift on hover. The chips
   stay pills, because a chip is a chip.
   ========================================================================== */

/* Buttons: 8px, not a pill. */
.btn { border-radius: var(--tw-radius-md); }

/* The smallest buttons and the chips stay rounded. */
.btn-xs { border-radius: var(--tw-radius-full); }
#crm-tier-filters .btn { border-radius: var(--tw-radius-full); }

/* Cards: flat, tight, and they do not lift. */
.card-explorer {
  padding: 0.85rem;
  gap: 0.6rem;
  border-radius: var(--tw-radius-lg);
}

.card-explorer:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

/* The metric row is a hairline-separated strip, not a box in a box. */
.agent-stats-grid {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 0.5rem 0 0;
  gap: 0.4rem;
}

.stat-label {
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.stat-val {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 1px;
}

.card-explorer-footer { gap: 0.35rem; }

/* ==========================================================================
   14. THE PRIMARY ACTION
   --------------------------------------------------------------------------
   In dark mode the primary button was a white block, which made it the
   loudest thing on any screen and left the accent with no job. Twenty
   paints the primary action in the accent and keeps everything else in
   neutrals, so the accent means "this is the action" rather than "this
   button happens to be big".

   Africa is Watching's accent is green, not Twenty's blue. The status
   colours keep their own meanings, so the green is used only for the
   action itself.
   ========================================================================== */

html[data-theme="dark"] .btn-primary,
body.dark .btn-primary {
  background: var(--emerald);
  border-color: var(--emerald);
  color: #ffffff;
  box-shadow: none;
}

html[data-theme="dark"] .btn-primary:hover,
body.dark .btn-primary:hover {
  background: var(--emerald-bright);
  border-color: var(--emerald-bright);
  color: #ffffff;
}

html[data-theme="light"] .btn-primary {
  background: var(--emerald);
  border-color: var(--emerald);
  color: #ffffff;
  box-shadow: none;
}

html[data-theme="light"] .btn-primary:hover {
  background: var(--emerald-bright);
  border-color: var(--emerald-bright);
  color: #ffffff;
}

/* The outline action keeps the accent as a border and the text, which is how
   Twenty shows a secondary action that belongs to the same subject. */
.btn-outline-emerald {
  color: var(--emerald-bright);
  background: transparent;
}

.btn-outline-emerald:hover {
  background: var(--emerald-glow);
  color: var(--emerald-bright);
}

/* ==========================================================================
   15. QUIET ROW ACTIONS
   --------------------------------------------------------------------------
   Twenty's record rows carry icon actions that are almost invisible until
   the row is hovered, so a table of a hundred rows is not a wall of
   buttons. Here the actions carry labels, which is more useful than an
   icon, so they are quieted the same way: a plain border and muted text
   that takes the accent when the row is hovered.

   Scoped to table cells. The same button classes are used for the panel
   actions, where they should stay loud.
   ========================================================================== */

.admin-table-scroll tbody td .btn-outline-emerald {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}

.admin-table-scroll tbody td .btn-primary {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}

.admin-table-scroll tbody tr:hover td .btn-outline-emerald,
.admin-table-scroll tbody tr:hover td .btn-primary {
  border-color: var(--emerald);
  color: var(--emerald-bright);
  background: transparent;
}

.admin-table-scroll tbody td .btn-outline-emerald:hover {
  border-color: var(--emerald-bright);
  color: var(--emerald-bright);
  background: var(--emerald-glow);
}

/* The delete action keeps its danger colour but loses its weight until the
   row is hovered. */
.admin-table-scroll tbody td .btn-danger {
  background: transparent;
  border-color: var(--border);
  color: var(--text-dim);
}

.admin-table-scroll tbody tr:hover td .btn-danger {
  border-color: var(--crimson);
  color: var(--crimson);
}
/* ==========================================================================
   16. THE RECORD PANEL
   --------------------------------------------------------------------------
   Twenty opens a record in a right-hand panel rather than navigating to a
   page, so the list you came from stays on screen. The panel is 500px,
   constrained between 320 and 600, and it slides in from the right.
   ========================================================================== */

.tw-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(var(--tw-panel-w), 100vw);
  min-width: var(--tw-panel-min);
  max-width: var(--tw-panel-max);
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--tw-motion-normal) var(--tw-ease);
}

.tw-panel.is-open { transform: translateX(0); }

/* On a phone the panel takes the whole screen, which is what Twenty does. */
@media (max-width: 640px) {
  .tw-panel {
    width: 100vw;
    min-width: 0;
    max-width: none;
  }
}

.tw-panel-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 0.75rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.tw-panel-back,
.tw-panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 0.9rem;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--tw-radius-sm);
  cursor: pointer;
}

.tw-panel-back:hover,
.tw-panel-close:hover {
  color: var(--text);
  background: var(--surface-3);
  border-color: var(--border);
}

.tw-panel-title { flex: 1; min-width: 0; }
.tw-panel-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tw-panel-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tw-panel-section { display: flex; flex-direction: column; gap: 0.4rem; }

.tw-panel-section-title {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* A detail row: a label on the left, a value on the right. */
.tw-detail-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0.5rem;
  align-items: center;
  min-height: 26px;
  font-size: 0.78rem;
}

.tw-detail-label { color: var(--text-dim); }
.tw-detail-value { color: var(--text); min-width: 0; }
.tw-detail-value--none { color: var(--text-dim); }

/* An editable value: it looks like text until you point at it. */
.tw-edit-value {
  display: block;
  width: 100%;
  min-height: 24px;
  padding: 2px 4px;
  font: inherit;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--tw-radius-sm);
  cursor: text;
}

.tw-edit-value:hover { border-color: var(--border); background: var(--surface); }
.tw-edit-value:focus { border-color: var(--emerald); background: var(--surface); }

/* --- Custom fields --- */
.tw-field {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0.5rem;
  align-items: center;
}

.tw-field input {
  width: 100%;
  min-height: 26px;
  padding: 2px 6px;
  font: inherit;
  font-size: 0.78rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--tw-radius-sm);
}

.tw-field input:focus { border-color: var(--emerald); }

/* --- The timeline --- */
.tw-timeline { display: flex; flex-direction: column; gap: 0.4rem; }

.tw-timeline-row {
  display: flex;
  gap: 0.5rem;
  padding: 0.45rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--tw-radius-sm);
}

.tw-timeline-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--text-dim);
}

.tw-timeline-row--task .tw-timeline-dot { background: var(--gold-bright); }
.tw-timeline-row--done .tw-timeline-dot { background: var(--emerald-bright); }
.tw-timeline-row--done .tw-timeline-body { text-decoration: line-through; color: var(--text-dim); }

.tw-timeline-body { flex: 1; min-width: 0; font-size: 0.78rem; color: var(--text); word-break: break-word; }
.tw-timeline-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
  font-size: 0.64rem;
  color: var(--text-dim);
}

.tw-timeline-check {
  width: 14px;
  height: 14px;
  accent-color: var(--emerald);
  cursor: pointer;
}

.tw-timeline-del {
  color: var(--text-dim);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 0.75rem;
}

.tw-timeline-del:hover { color: var(--crimson); }

/* --- The composer --- */
.tw-composer {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--tw-radius-sm);
}

.tw-composer textarea {
  width: 100%;
  min-height: 56px;
  padding: 4px 6px;
  font: inherit;
  font-size: 0.78rem;
  color: var(--text);
  background: transparent;
  border: 0;
  resize: vertical;
}

.tw-composer-actions { display: flex; align-items: center; gap: 0.4rem; }

.tw-composer-hint { font-size: 0.64rem; color: var(--text-dim); flex: 1; }

/* --- The panel's backdrop on a phone --- */
.tw-panel-scrim {
  position: fixed;
  inset: 0;
  z-index: 79;
  background: rgba(0, 0, 0, 0.5);
}

@media (min-width: 641px) {
  .tw-panel-scrim { display: none; }
}

/* --- The favourites group in the drawer --- */
.admin-nav-group--favourites { border-bottom: 1px solid var(--border-subtle); }

/* --- A value that opens something ---
   It has to read as a value, not as a button, until it is pointed at. */
.tw-link-button {
  display: inline;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--tw-radius-xs);
  cursor: pointer;
}

.tw-link-button:hover { color: var(--emerald-bright); text-decoration: underline; }

/* ==========================================================================
   17. THE LAST TWO SURFACES
   --------------------------------------------------------------------------
   The Goals board and the Agent Chat were built before the Twenty pass and
   kept their own visual language: 16px card radii, large padding, and a
   mono uppercase eyebrow. On the CRM the app reads as Twenty; on these two
   it read as something else. These rules bring them into the same system:
   the same radii, the same padding rhythm, the same type scale, the same
   hairline separation.
   ========================================================================== */

/* --- The Goals board --- */
.goal-card {
  border-radius: var(--tw-radius-md);
  padding: 0.85rem 0.95rem;
  gap: 0.5rem;
  box-shadow: var(--shadow-sm);
}

.goal-card:hover {
  transform: none;
  border-color: var(--border-focus);
}

.kanban-column {
  border-radius: var(--tw-radius-md) !important;
}

#kanban-board-grid { gap: 0.6rem; }

/* --- The Agent Chat --- */
.chat-console-header {
  padding: 0.5rem 0.85rem;
  gap: 0.6rem;
}

.chat-roster-pane .admin-nav-icon,
.chat-roster-item .chat-avatar {
  border-radius: var(--tw-radius-md) !important;
}

.chat-message-bubble,
.chat-bubble {
  border-radius: var(--tw-radius-md) !important;
}

.chat-chips-bar { padding: 0.45rem 0.85rem; }

/* ==========================================================================
   18. THE WEB INTERFACE GUIDELINES PASS
   --------------------------------------------------------------------------
   The findings from the guidelines review, fixed.

   A skip link, so a keyboard operator is not tabbing through fourteen
   destinations on every screen. A theme colour for the browser chrome.
   `color-scheme` so the native scrollbar and the native controls follow the
   app's theme instead of the operating system's. `touch-action:
   manipulation` so a tap is a tap, not a 300ms wait for the double-tap
   zoom to be ruled out. `overscroll-behavior: contain` on the overlays, so
   a scroll inside a drawer does not scroll the page behind it. And
   `tabular-nums` on the number columns, so a column of scores and counts
   does not shimmer as the values change.
   ========================================================================== */

html[data-theme="dark"],
body.dark {
  color-scheme: dark;
}

html[data-theme="light"],
body.light {
  color-scheme: light;
}

/* --- The skip link --- */
.tw-skip-link {
  position: absolute;
  top: -100px;
  left: 0.5rem;
  z-index: 200;
  padding: 0.55rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--emerald);
  border-radius: var(--tw-radius-sm);
  text-decoration: none;
  transition: top var(--tw-motion-fast) var(--tw-ease);
}

.tw-skip-link:focus-visible {
  top: 0.5rem;
  outline: 2px solid var(--emerald-bright);
  outline-offset: 1px;
}

.main-content:focus { outline: none; }

/* --- Touch --- */
button,
a,
input,
select,
textarea,
[role="button"],
[role="tab"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(16, 185, 129, 0.18);
}

/* --- Overlays do not scroll the page behind them --- */
.tw-panel,
.drawer-overlay,
.modal-overlay,
.chat-messages-stream,
.admin-table-scroll {
  overscroll-behavior: contain;
}

/* --- Numbers line up --- */
.pill-score,
.stat-val,
.tw-kanban-card-amount,
.tw-kanban-col-count,
.tw-detail-value,
.crm-pager-range,
.tw-board-summary,
td,
th {
  font-variant-numeric: tabular-nums;
}

/* --- A card that is a button still reads as a card --- */
button.triage-card,
button.pill-quota,
button.floating-chip {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

button.pill-quota {
  display: inline-flex;
  width: auto;
}

button.floating-chip {
  display: inline-flex;
  width: auto;
}

/* A dropzone cannot be a button: it contains a file input. It gets the
   button semantics and the keyboard path instead. */
[role="button"][tabindex]:focus-visible {
  outline: 2px solid var(--emerald-bright);
  outline-offset: 1px;
}

/* ==========================================================================
   19. ONE FILLED GREEN BUTTON PER SURFACE
   --------------------------------------------------------------------------
   Six agent cards side by side, each with a filled green button, is a wall
   of green. The filled accent belongs to the page's primary action - the
   one thing the operator is meant to reach for. A card's own action is an
   outline, so the eye lands on the page, not on six identical blocks.
   ========================================================================== */

.card-explorer-footer .btn-primary {
  background: transparent;
  border-color: var(--emerald);
  color: var(--emerald-bright);
}

.card-explorer-footer .btn-primary:hover {
  background: var(--emerald-glow);
  border-color: var(--emerald-bright);
  color: var(--emerald-bright);
}

/* The theme-scoped primary rule is more specific than the plain one, so it
   has to be matched here too. */
html[data-theme="dark"] .card-explorer-footer .btn-primary,
body.dark .card-explorer-footer .btn-primary,
html[data-theme="light"] .card-explorer-footer .btn-primary {
  background: transparent;
  border-color: var(--emerald);
  color: var(--emerald-bright);
}

html[data-theme="dark"] .card-explorer-footer .btn-primary:hover,
body.dark .card-explorer-footer .btn-primary:hover,
html[data-theme="light"] .card-explorer-footer .btn-primary:hover {
  background: var(--emerald-glow);
  border-color: var(--emerald-bright);
  color: var(--emerald-bright);
}