/* ============================================================================
   Cerebro — one stylesheet.

   Flattened from the nine layered files that used to load in this order:
     app → executive → knowledge → ai → ux → workspace → polish → shortcuts → brand

   Every duplicated selector has been resolved property-by-property to the value
   that already won under that load order, so the rendered result is unchanged.

   Contents
     1  Tokens
     2  Base & reset
     3  Layout
     4  Navigation (rail)
     5  Components
        5.1 Buttons          5.5 Forms & inputs
        5.2 Panels & cards   5.6 Empty & error states
        5.3 Chips & status   5.7 Lists, records, boards
        5.4 Tables           5.8 Disclosure, toggle, spinner
     6  Page-specific (today, signals, knowledge, ask, executive, ops, public)
     7  Command palette, quick capture, keyboard affordances
     8  Responsive
     9  Utilities

   Breakpoint scale — four steps, largest first in §8:
     1050px  narrow laptop  (full-width rail still showing, grids destack)
      960px  compact desktop (rail auto-collapses to icons)
      720px  mobile         (desktop rail off, mobile nav on)
      390px  small phone    (two-up mobile menu grids go one-up)
   ============================================================================ */


/* ============================================================================
   1. Tokens
   ============================================================================ */

:root {
  /* Persistent mobile chrome: every offset derives from these two. */
  --mobile-top-h: 52px;
  --mobile-nav-h: 64px;

  /* Surfaces — three of them, and only three: the page, what sits on it, and
     what sits on that. Every one of the pairs below clears 4.5:1 with both
     text colours and both accents (the worst case is violet on the raised
     surface at 4.74), so nothing here needed adjusting for contrast. */
  --bg:                 #080d17;  /* page */
  --bg-deep:            #050911;
  --surface:            #101827;  /* primary surface */
  --bg-raised:          #172235;  /* raised surface */
  --surface-hover:      #1c2942;
  --surface-soft:       rgba(55, 111, 255, .035);
  --surface-soft-hover: rgba(55, 111, 255, .065);

  --border:        rgba(126, 159, 218, .115);
  --border-strong: rgba(137, 172, 235, .20);
  --hairline:      rgba(157, 184, 235, .09);

  /* Type */
  --text:      #f3f6fc;  /* primary */
  --text-dim:  #a9b6ca;  /* secondary */
  --text-mute: #7c8AA0;
  --nav-muted: #8a97ac;

  /* Spacing — one scale, and nothing between its steps. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Type scale */
  --text-body:      16px;
  --text-secondary: 14px;
  --title-desktop:  28px;
  --title-mobile:   22px;

  /* Motion — three durations, each for one kind of thing. Nothing
     decorative, nothing continuous, and every one of them off under
     prefers-reduced-motion. */
  --motion-control: 120ms;
  --motion-panel:   200ms;
  --motion-result:  180ms;

  /* The smallest a control people use often may be, in both dimensions. */
  --touch-min: 44px;

  /* Accent — subtle purple/blue core. */
  --accent-cyan:   #2bc8ff;
  --accent-blue:   #6c9fff;
  --accent:        #4d63ff;
  --accent-dim:    #6842ed;
  --accent-purple: #8c78ff;
  --accent-text:   #b9caff;
  --accent-bright: #67a2ff;
  --accent-wash:   rgba(77, 99, 255, .14);
  --accent-border: rgba(79, 116, 255, .30);
  --accent-glow:   rgba(72, 97, 255, .20);
  --focus-ring:    rgba(62, 125, 255, .20);

  --brand-gradient:      linear-gradient(135deg, #2bc8ff 0%, #3787ff 38%, #5550ff 68%, #7c3cff 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(43,200,255,.18), rgba(55,135,255,.11) 46%, rgba(124,60,255,.14));

  /* Status */
  --green:  #3fb950;
  --yellow: #d6a017;
  --red:    #f0603c;
  --blue:   #4b93f5;
  --slate:  #6f767f;

  /* Shape & depth: one radius for a control, one for a major surface. */
  --radius:      12px;
  --radius-sm:   8px;
  --radius-lg:   20px;
  --shadow:      0 1px 2px rgba(0,0,0,.45), 0 14px 36px -20px rgba(0,0,0,.84);
  --shadow-brand: 0 14px 38px -20px rgba(60, 104, 255, .72);

  /* Typography: Inter for UI, JetBrains Mono for anything numeric. */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}


/* ============================================================================
   2. Base & reset
   ============================================================================ */

* {
  box-sizing: border-box;
  scrollbar-color: #343842 transparent;
}
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--bg-deep);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(900px 520px at 94% -10%, rgba(42, 121, 255, .115), transparent 64%),
    radial-gradient(760px 540px at 52% -18%, rgba(112, 54, 255, .075), transparent 66%),
    radial-gradient(620px 420px at -12% 78%, rgba(31, 183, 255, .035), transparent 70%),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: 1.5;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
}

input,
textarea,
select,
button { font-feature-settings: "cv02", "cv03", "cv04", "cv11"; }

::selection {
  background: rgba(63, 111, 255, .34);
  color: #fff;
}

:focus-visible {
  outline: 2px solid rgba(83, 153, 255, .82);
  outline-offset: 2px;
}

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

h1, h2, h3 {
  margin: 0;
  color: #f5f8ff;
  font-weight: 600;
  letter-spacing: -0.015em;
}
h1 {
  font-size: var(--title-desktop);
  line-height: 1.2;
  letter-spacing: -.025em;
  text-shadow: 0 1px 18px rgba(68, 114, 255, .055);
}
h2 {
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -.018em;
}
h3 { font-size: 13px; }

/* Scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 10px;
  background: #343842;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: #444955; }


/* ============================================================================
   3. Layout
   ============================================================================ */

.shell {
  display: flex;
  min-height: 100vh;
  --rail-current: 224px;
}
.shell.is-rail-collapsed { --rail-current: 68px; }

.main {
  flex: 1;
  min-width: 0;
  margin-left: var(--rail-current);
  padding: 30px 32px 64px;
  transition: margin-left .16s ease;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.page-head .sub {
  max-width: 760px;
  margin-top: 5px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.55;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.columns { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.executive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.executive-span-2 { grid-column: 1 / -1; }
.executive-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.form-grid-2,
.form-grid-3,

.form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid-4 {
  /* merged from 2 rules that both set this */
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.detail-grid { display: grid; grid-template-columns: 150px 1fr; gap: 10px 18px; align-items: start; }
.detail-grid dt { color: var(--text-mute); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding-top: 3px; }
.detail-grid dd { margin: 0; }

.relation-block + .relation-block { margin-top: 16px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }


/* ============================================================================
   4. Navigation (rail)
   ============================================================================ */

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: var(--rail-current);
  padding: 14px 10px;
  border-right: 1px solid rgba(118, 151, 211, .10);
  background:
    radial-gradient(380px 260px at 30% -6%, rgba(59, 119, 255, .095), transparent 72%),
    linear-gradient(180deg, rgba(10,16,28,.99), rgba(7,11,19,.995));
  box-shadow: inset -1px 0 0 rgba(108, 142, 209, .025), 18px 0 50px -46px rgba(54, 103, 255, .45);
  transition: width .16s ease;
}

.rail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin-bottom: 14px;
}

.rail-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: auto;
  height: 36px;
  min-width: 0;
  margin: 0;
  padding: 0 8px;
  border-radius: 9px;
  background: transparent;
  color: #f6f8ff;
  font-weight: 600;
  font-size: 15px;
}

.rail-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(112, 153, 255, .16);
  border-radius: 10px;
  background: #09101d;
  box-shadow: 0 8px 24px -15px rgba(61, 116, 255, .9), inset 0 1px 0 rgba(255,255,255,.04);
  color: #fff;
  font-weight: 600;
}
.rail-mark img {
  display: block;
  width: 100%;
  height: 100%;
}

.rail-brand-name {
  overflow: hidden;
  color: #f5f7ff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rail-button { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }

.rail-collapse {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  margin-left: auto;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text-mute);
}
.rail-collapse:hover {
  border-color: var(--hairline);
  background: var(--surface-hover);
  color: var(--text);
}
.rail-collapse svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .16s ease;
}

.rail-nav,

.rail-foot {
  /* merged from 2 rules that both set this */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  width: 100%;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(126, 159, 218, .09);
}
.rail-foot form { width: 100%; }

.rail-section + .rail-section { margin-top: 13px; }
.rail-section-label {
  padding: 0 10px 5px;
  color: var(--nav-muted);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rail-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-mute);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.rail-link:hover {
  border-color: rgba(121, 160, 230, .085);
  background: rgba(75, 117, 193, .07);
  color: var(--text);
}
.rail-link.is-active {
  border-color: rgba(83, 129, 255, .22);
  background: linear-gradient(90deg, rgba(43, 176, 255, .105), rgba(76, 91, 255, .135) 55%, rgba(123, 57, 255, .07));
  color: #a9c7ff;
  box-shadow: inset 0 1px 0 rgba(154, 202, 255, .03);
}
.rail-link.is-active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--accent-cyan), var(--accent-purple));
  box-shadow: 0 0 16px rgba(70, 123, 255, .48);
}

.rail-link svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail-link.is-active svg { stroke-width: 2; }

.rail-label {
  position: static;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-size: 12px;
  white-space: nowrap;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: opacity .1s ease;
}
.rail-link:hover .rail-label { opacity: 1; transform: none; }

.rail-shortcut {
  margin-left: auto;
  color: var(--nav-muted);
  font-family: var(--mono);
  font-size: 9px;
}

.rail-divider { width: 24px; height: 1px; margin: 5px 0; background: var(--border); }

/* "More" overflow menu */
.rail-more { position: relative; }
.rail-more summary { list-style: none; cursor: pointer; }
.rail-more summary::-webkit-details-marker { display: none; }

.rail-more-menu {
  position: absolute;
  left: calc(100% + 10px);
  bottom: 0;
  z-index: 40;
  width: 226px;
  max-height: min(620px, calc(100vh - 32px));
  overflow-y: auto;
  padding: 8px;
  border: 1px solid rgba(126, 159, 218, .16);
  border-radius: 10px;
  background:
    radial-gradient(360px 240px at 12% 0%, rgba(58, 119, 255, .07), transparent 66%),
    rgba(10,16,28,.985);
  box-shadow: 0 24px 74px rgba(0,0,0,.58), 0 0 0 1px rgba(75, 112, 255, .04);
  backdrop-filter: blur(14px);
}

/* Base link styling, then the group variant that wins inside .rail-menu-group. */
.rail-more-menu a {
  display: block;
  padding: 8px 9px;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 12px;
}
.rail-more-menu a:hover { background: var(--surface-hover); color: var(--text); }

.rail-menu-group { padding: 5px; }
.rail-menu-group + .rail-menu-group { border-top: 1px solid var(--border); }
.rail-menu-group a {
  display: block;
  padding: 7px 8px;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 12px;
}
.rail-menu-group a:hover { background: var(--surface-hover); color: var(--text); }

.rail-menu-label {
  padding: 4px 6px 5px;
  color: #7a818c;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Shown only in the mobile sheet; the rail's own copy stays hidden. */
.rail-menu-mobile { display: none; }

/* Collapsed rail */
.shell.is-rail-collapsed .rail-brand {
  justify-content: center;
  padding: 0;
}
.shell.is-rail-collapsed .rail-brand-name,
.shell.is-rail-collapsed .rail-section-label,
.shell.is-rail-collapsed .rail-label,
.shell.is-rail-collapsed .rail-shortcut {
  display: none;
}
.shell.is-rail-collapsed .rail-head { justify-content: center; }
.shell.is-rail-collapsed .rail-collapse {
  position: absolute;
  top: 54px;
  left: 19px;
  margin: 0;
}
.shell.is-rail-collapsed .rail-collapse svg { transform: rotate(180deg); }
.shell.is-rail-collapsed .rail-nav { margin-top: 34px; }
.shell.is-rail-collapsed .rail-link {
  justify-content: center;
  width: 40px;
  margin-inline: auto;
  padding: 0;
}
.shell.is-rail-collapsed .rail-link.is-active::before { left: -5px; }
.shell.is-rail-collapsed .rail-more-menu { left: calc(100% + 12px); }

/* Shown only below 720px — see §8. */
.mobile-brandbar { display: none; }
.mobile-nav,
.mobile-menu-backdrop { display: none; }


/* ============================================================================
   5. Components
   ============================================================================ */

/* ---------- 5.1 Buttons ---------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid rgba(126, 159, 218, .16);
  border-radius: var(--radius-sm);
  background: rgba(92, 126, 184, .055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.btn-sm { padding: 4px 9px; font-size: 12px; }
.btn-danger { color: var(--red); }
/* .btn-ghost's transparent background and border were already being overridden
   by the later .btn rules in polish/brand; only the colour ever took effect. */
.btn-ghost { color: var(--text-dim); }
.btn-primary {
  border-color: rgba(108, 151, 255, .62);
  background: linear-gradient(120deg, #268ee9 0%, #456bff 52%, #7046ef 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 12px 28px -16px rgba(58, 112, 255, .88);
  color: #fff;
}

.btn:hover {
  border-color: rgba(133, 174, 247, .24);
  background: rgba(92, 137, 215, .095);
}
/* Likewise .btn-danger:hover lost its background/border to the later .btn:hover;
   only .btn-ghost:hover's colour survived. */
.btn-ghost:hover { color: var(--text); }
.btn-primary:hover {
  border-color: rgba(132, 177, 255, .76);
  background: linear-gradient(120deg, #31a2f4 0%, #5278ff 52%, #7c50fa 100%);
  color: #fff;
}

/* ---------- 5.2 Panels & cards --------------------------------------------- */

.panel,
.card,
.board-column,


.panel {
  border-radius: 11px;
  margin-bottom: 16px;
}
.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(123, 156, 216, .085);
}
.panel-head .muted { line-height: 1.4; }
.panel-head-main {
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel-body { padding: 16px; }
.panel-body.flush { padding: 0; }

.panel-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 21px;
  padding: 0 7px;
  border: 1px solid rgba(126, 159, 218, .12);
  border-radius: 999px;
  background: rgba(85, 121, 184, .045);
  color: #7f8792;
  font-family: var(--mono);
  font-size: 9px;
}

.card {
  display: block;
  padding: 16px;
  border-radius: var(--radius);
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.card:hover,
.signal-card:hover {
  border-color: rgba(115, 156, 234, .17);
  background: linear-gradient(180deg, rgba(18,30,51,.985), rgba(12,20,34,.99));
}
.card.is-blocked { border-left: 2px solid var(--red); }
.card.is-at_risk { border-left: 2px solid var(--yellow); }

.card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.card-name { font-weight: 600; font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-step { color: var(--text-dim); font-size: 13px; min-height: 38px; }
.card-metrics {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: var(--text-mute);
  font-size: 12px;
}
.card-metrics .spacer { margin-left: auto; }

.card-metric {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 10px;
}
.card-metric-value { font-size: 19px; font-weight: 500; color: var(--text); }
.card-metric-label { color: var(--text-mute); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.card-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid rgba(123, 156, 216, .085);
  color: var(--text-mute); font-size: 12px;
}
.card-foot .spacer { margin-left: auto; }

.sparkline { width: 96px; height: 24px; flex: none; overflow: visible; }
.sparkline polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Holds the row height steady before a project has any snapshot history. */
.sparkline-empty {
  display: block;
  width: 96px;
  height: 24px;
  flex: none;
  border-bottom: 1px dashed var(--border-strong);
}

/* Fleet strip */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin-bottom: 24px;
  overflow: hidden;
  border: 1px solid rgba(124, 158, 220, .105);
  border-radius: 11px;
  background: rgba(119, 154, 220, .085);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.012);
}
.strip-cell {
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(14,23,39,.985), rgba(10,17,29,.99));
}
a.strip-cell { color: inherit; transition: background .12s ease; }
a.strip-cell:hover { background: var(--surface); }
.strip-label { color: #7c8aa1; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.strip-value {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.035em;
}
.strip-value.is-alert { color: var(--red); }
.strip-value.is-warn  { color: var(--yellow); }

/* ---------- 5.3 Chips, dots, flags ----------------------------------------- */

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border: 1px solid rgba(126, 159, 218, .12);
  border-radius: 999px;
  background: rgba(85, 121, 184, .045);
  color: var(--text-dim);
  font-size: 11px; font-weight: 500;
  white-space: nowrap;
}
.chip[data-stage="live"]        { color: var(--green);  border-color: rgba(63,185,80,.35); }
.chip[data-stage="building"]    { color: var(--blue);   border-color: rgba(75,147,245,.35); }
.chip[data-stage="testing"]     { color: #b9aeff;       border-color: rgba(124,108,255,.4); }
.chip[data-stage="maintenance"] { color: var(--text-dim); }
.chip[data-stage="sunset"]      { color: var(--text-mute); }
.chip[data-stage="idea"]        { color: var(--text-mute); }

.chip[data-idea-state="next_up"]  { color: var(--green);  border-color: rgba(63,185,80,.35); }
.chip[data-idea-state="building"] { color: var(--blue);   border-color: rgba(75,147,245,.35); }
.chip[data-idea-state="parked"]   { color: var(--text-dim); }
.chip[data-idea-state="done"]     { color: #b9aeff;       border-color: rgba(124,108,255,.4); }
.chip[data-idea-state="dropped"]  { color: var(--text-mute); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--slate); }
.dot[data-status="on_track"] { background: var(--green);  box-shadow: 0 0 0 3px rgba(63,185,80,.14); }
.dot[data-status="at_risk"]  { background: var(--yellow); box-shadow: 0 0 0 3px rgba(214,160,23,.14); }
.dot[data-status="blocked"]  { background: var(--red);    box-shadow: 0 0 0 3px rgba(240,96,60,.14); }
.dot[data-status="done"]     { background: var(--blue);   box-shadow: 0 0 0 3px rgba(75,147,245,.14); }
.dot[data-check="ok"]        { background: var(--green);  box-shadow: 0 0 0 3px rgba(63,185,80,.14); }
.dot[data-check="down"]      { background: var(--red);    box-shadow: 0 0 0 3px rgba(240,96,60,.14); }
.dot[data-check="unknown"]   { background: var(--slate); }

.flag {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  background: rgba(240,96,60,.12); color: var(--red);
  font-size: 11px; font-weight: 500;
}

.score-pill {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 25px;
  padding: 0 7px;
  flex: none;
  border: 1px solid rgba(76, 126, 255, .28);
  border-radius: 7px;
  background: linear-gradient(120deg, rgba(40, 160, 255, .10), rgba(90, 73, 255, .14));
  color: #b4c9ff;
  font-size: 10px;
}

/* ---------- 5.4 Tables ----------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; }
.table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .085em;
  color: #7c8aa1;
  border-bottom: 1px solid rgba(123, 156, 216, .085);
  white-space: nowrap;
}
.table td { padding: 12px 16px; border-bottom: 1px solid rgba(123, 156, 216, .085); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .1s ease; }
.table tbody tr:hover { background: rgba(74, 118, 197, .055); }
.table .num { font-family: var(--mono); text-align: right; }
.table .entity-link { font-weight: 500; }


/* The <td> stays a table cell — width:1% collapses it to its content — and the
   flexbox lives on an inner wrapper. Putting display:flex on the td itself
   drops it out of the table layout and the columns overlap. */
.table td.row-actions { width: 1%; white-space: nowrap; text-align: right; }
.row-actions-inner { display: inline-flex; gap: 6px; }
tr.is-editing { background: var(--surface); }
tr.is-editing td { vertical-align: middle; }

/* ---------- 5.5 Forms & inputs --------------------------------------------- */

/* Three selector lists are kept deliberately distinct: the box-model list has
   never covered search or datetime-local, and widening it would restyle the
   command palette input and the meeting date field. */
input[type="text"],
input[type="date"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid rgba(126, 159, 218, .16);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}

input[type="text"],
input[type="date"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="datetime-local"],
textarea,
select {
  min-height: 36px;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

input[type="text"],
input[type="search"],
input[type="date"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="datetime-local"],
textarea,
select {
  /* Colour only — search and datetime-local keep their UA border box, which is
     what the layered files did and what the command palette input relies on. */
  border-color: rgba(126, 159, 218, .16);
  background: rgba(4, 9, 17, .75);
}

input[type="text"]:hover,
input[type="search"]:hover,
input[type="date"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="url"]:hover,
input[type="datetime-local"]:hover,
textarea:hover,
select:hover {
  border-color: rgba(126, 169, 244, .24);
  background: rgba(7, 13, 24, .88);
}

/* An <input> with no type attribute is a text box, and email, tel and time
   fields are too — none of them match the three lists above, so they were
   drawn in the browser's own light chrome on a dark page. One rule catches
   them all, kept separate so those lists stay exactly as they are, and
   deliberately setting no width: every one of these sits in a container that
   already decides how wide it is. */
input:not([type]),
input[type="email"],
input[type="tel"],
input[type="time"] {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid rgba(126, 159, 218, .16);
  border-radius: var(--radius-sm);
  background: rgba(4, 9, 17, .75);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
input:not([type]):hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="time"]:hover {
  border-color: rgba(126, 169, 244, .24);
  background: rgba(7, 13, 24, .88);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
  border-color: rgba(70, 146, 255, .66);
  background: rgba(7, 13, 24, .94);
  box-shadow: 0 0 0 3px var(--focus-ring), 0 9px 24px -20px rgba(60, 112, 255, .7);
}

select { cursor: pointer; }
textarea { resize: vertical; }

.field { display: block; }
.field-label {
  display: block; margin-bottom: 5px;
  color: #aab0ba; font-size: 12px; font-weight: 500;
}
.field-hint { display: block; margin-top: 4px; color: var(--text-mute); font-size: 11px; line-height: 1.45; }

.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.check input { width: auto; }
.check-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-size: 12px;
}
.check-line input { width: auto; }

.control-group { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.select-stage, .select-status {
  width: auto;
  padding: 4px 26px 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%236f767f' d='M3 4.5L6 8l3-3.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
}
.select-stage[data-stage="live"]     { color: var(--green);  border-color: rgba(63,185,80,.4); }
.select-stage[data-stage="building"] { color: var(--blue);   border-color: rgba(75,147,245,.4); }
.select-stage[data-stage="testing"]  { color: #b9aeff;       border-color: rgba(124,108,255,.45); }
.select-status[data-status="on_track"] { color: var(--green); border-color: rgba(63,185,80,.4); }
.select-status[data-status="at_risk"]  { color: var(--yellow); border-color: rgba(214,160,23,.4); }
.select-status[data-status="blocked"]  { color: var(--red);   border-color: rgba(240,96,60,.4); }
.select-status[data-status="done"]     { color: var(--blue);  border-color: rgba(75,147,245,.4); }

.select-state {
  width: auto;
  padding: 3px 22px 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%236f767f' d='M3 4.5L6 8l3-3.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 11px;
}

/* Inline edit */
.editable {
  display: inline-block;
  min-width: 120px;
  padding: 3px 7px;
  margin: -3px -7px;
  border-radius: 6px;
  border: 1px dashed transparent;
  cursor: text;
  transition: background .1s ease, border-color .1s ease;
}
.editable:hover { background: var(--surface); border-color: var(--border-strong); }
.editable.is-empty { color: var(--text-mute); font-style: italic; }

.inline-edit { display: flex; gap: 6px; align-items: flex-start; }
.inline-edit input, .inline-edit textarea { flex: 1; min-width: 0; }
.inline-edit textarea { min-height: 88px; resize: vertical; }

/* Forms in panels */
.row-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.row-form .field { flex: 1 1 150px; min-width: 0; }
.row-form .field-wide { flex: 2 1 240px; }
.row-form .field-narrow { flex: 0 1 130px; }
.row-form .btn { flex: none; height: 33px; }

.stack-form { display: flex; flex-direction: column; gap: 10px; }

.compact-form {
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.month-picker { display: flex; align-items: center; gap: 6px; }
.month-picker input { width: auto; }

.form-grid .span-2 { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 8px; align-items: center; margin-top: 18px; }
.form-actions .spacer { margin-left: auto; }

/* ---------- 5.6 Empty & error states --------------------------------------- */

.empty {
  padding: 30px 20px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: var(--radius);
  background: rgba(255,255,255,.012);
  color: var(--text-mute);
}
.empty strong { display: block; color: #aab0ba; font-weight: 500; margin-bottom: 5px; }

.mini-empty { padding: 11px 0; color: var(--text-mute); font-size: 11px; }
.board-empty { margin: 0; padding: 12px 0; color: var(--text-mute); font-size: 12px; text-align: center; }

.form-error {
  padding: 8px 11px;
  border: 1px solid rgba(240,96,60,.4);
  border-radius: var(--radius-sm);
  background: rgba(240,96,60,.1);
  color: #ff9276;
  font-size: 13px;
  margin: 0;
}

/* ---------- 5.7 Lists, records, boards -------------------------------------- */

.entity-list { display: flex; flex-direction: column; gap: 1px; }
.entity-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}
/* Rows should feel stable, not jump sideways on hover. */
.entity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-inline: -8px;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(123, 156, 216, .085);
  border-radius: 7px;
  transition: background .12s ease, color .12s ease;
}
.entity-row:last-child { border-bottom: 0; }
.entity-row:hover {
  padding-left: 8px;
  background: rgba(74, 118, 197, .055);
}
.entity-row > div { min-width: 0; }
.entity-row strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.008em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entity-row span:not(.entity-arrow) {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--text-mute);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entity-arrow {
  margin-left: auto;
  color: var(--text-mute);
  transition: color .12s ease, transform .12s ease;
}
.entity-row:hover .entity-arrow {
  color: #91b5ff;
  transform: translateX(2px);
}
.entity-link { color: var(--text); font-weight: 500; }
.entity-link:hover { color: #b9aeff; }
.entity-sub {
  max-width: 420px;
  overflow: hidden;
  margin-top: 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-value {
  overflow: hidden;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Record lists (decisions, time, project ideas) */
.records { list-style: none; margin: 16px 0 0; padding: 0; }
.record { padding: 10px 0; border-top: 1px solid var(--border); }
.record:first-child { border-top: 0; }
.record-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.record-when { margin-left: auto; color: var(--text-mute); font-size: 12px; }
.record-detail { margin: 5px 0 0; color: var(--text-dim); font-size: 13px; }

/* Ideas board */
.board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: start;
}
.board-column {
  padding: 12px;
  border-radius: var(--radius);
}
.board-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

.idea {
  padding: 10px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.idea:last-child { margin-bottom: 0; }
.idea-title { font-size: 13px; font-weight: 500; }
.idea-detail { margin: 5px 0 0; color: var(--text-dim); font-size: 12px; }
/* Two fixed rows rather than one wrapping row: a long project name would
   otherwise push the controls out of the card. */
.idea-meta { margin-top: 9px; }
.idea-meta .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.idea-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 8px; }

/* ---------- 5.8 Disclosure, toggle, spinner --------------------------------- */

/* Creation and configuration stay out of the reading flow until requested. */
.creation-disclosure {
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid rgba(126, 159, 218, .105);
  border-radius: 9px;
  background: rgba(68, 102, 163, .025);
}
.creation-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 11px;
  list-style: none;
  color: #9aa1ac;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}
.creation-disclosure > summary::-webkit-details-marker { display: none; }
.creation-disclosure > summary:hover {
  background: rgba(255,255,255,.022);
  color: var(--text);
}
.creation-disclosure > summary::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(43, 200, 255, .12), rgba(103, 61, 255, .16));
  color: #a8c6ff;
  font-size: 15px;
  font-weight: 400;
}
.creation-disclosure[open] > summary {
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(124,108,255,.025);
  color: var(--text);
}
.creation-disclosure[open] > summary::before { content: "−"; }
.creation-disclosure .creation-body { padding: 12px; }
.creation-disclosure .compact-form { margin: 0; padding: 0; border: 0; }

.secondary-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.secondary-links a {
  padding: 4px 8px;
  border: 1px solid rgba(126, 159, 218, .12);
  border-radius: 999px;
  background: rgba(85, 121, 184, .045);
  color: #858c97;
  font-size: 10px;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.secondary-links a:hover {
  border-color: rgba(81, 137, 255, .27);
  background: rgba(64, 107, 255, .075);
  color: #a9c7ff;
}

/* Range toggle + loading spinner */
.toggle {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.toggle-option + .toggle-option { border-left: 1px solid var(--border-strong); }
.toggle-option:hover { color: var(--text); background: var(--surface-hover); }
.toggle-option.is-active { background: var(--accent-wash); color: #b9aeff; cursor: default; }

.spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  opacity: 0;
}
.spinner.htmx-request { opacity: 1; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }


/* ============================================================================
   6. Page-specific
   ============================================================================ */

/* ---------- Today ---------------------------------------------------------- */


.today-head .sub { margin: 3px 0 0; color: var(--text-dim); font-size: 13px; }

.today-capture {
  position: relative;
  margin-bottom: 30px;
  padding: 1px;
  border-radius: 13px;
  background: linear-gradient(120deg, rgba(42, 192, 255, .48), rgba(64, 105, 255, .28) 45%, rgba(116, 57, 255, .22) 76%, rgba(255,255,255,.06));
  box-shadow: 0 18px 48px -28px rgba(55, 110, 255, .78);
}
.today-capture form {
  padding: 12px;
  border-radius: 12px;
  background: rgba(8, 14, 25, .985);
}
.capture-line { display: block; }
/* Send, voice and the mode overrides. One row, always in the same order. */
.capture-controls { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.capture-controls-gap { flex: 1 1 auto; }
.capture-options { position: relative; flex: none; }
.capture-options > summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
.capture-options > summary::-webkit-details-marker { display: none; }
.capture-options > summary::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.capture-options[open] > summary { color: var(--text); border-color: var(--border-strong); }
.capture-options[open] > summary::after { transform: translateY(1px) rotate(225deg); }
.capture-plus {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  background: var(--accent-wash);
  color: #b9aeff;
  font-size: 20px;
  line-height: 1;
}
/* Full width, growing downwards. Safari does not count a placeholder in
   scrollHeight, so the auto-grow in cerebro2.js cannot see one that wraps —
   the floor has to fit two lines at the 16px the phone forces (2 x 22.4 plus
   padding), or a wrapped placeholder is sliced in half, as it was at 36px. */
.capture-line textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 62px;
  max-height: 160px;
  overflow-y: auto;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
  resize: none;
  font-size: 15px;
  line-height: 1.4;
}
.capture-line textarea:focus { border: 0; box-shadow: none; }
.capture-confirm {
  margin: 7px 0 0 38px;
  color: var(--green);
  font-size: 11px;
}

.today-section { margin-bottom: 28px; }
.today-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 11px;
}

.today-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.today-panel { margin: 0; min-width: 0; }
.today-list { display: flex; flex-direction: column; }
.today-row {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid rgba(123, 156, 216, .085);
}
.today-row:first-child { padding-top: 0; }
.today-row:last-child { padding-bottom: 0; border-bottom: 0; }
.today-row-main { min-width: 0; flex: 1; }
.today-row-main strong {
  display: block;
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.today-row-main span {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--text-mute);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.today-check {
  width: 14px;
  height: 14px;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
}
.today-date { flex: none; color: var(--text-mute); font-family: var(--mono); font-size: 10px; }
.today-date.is-overdue { color: var(--red); }

.status-orb {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--slate);
}
.status-orb[data-status="blocked"] { background: var(--red); box-shadow: 0 0 0 4px rgba(240,96,60,.08); }
.status-orb[data-status="at_risk"] { background: var(--yellow); box-shadow: 0 0 0 4px rgba(214,160,23,.08); }

.connection-placeholder {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 5px 0;
}
.connection-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  color: var(--text-mute);
}
.connection-placeholder strong { display: block; font-size: 12px; font-weight: 500; }
.connection-placeholder span { display: block; margin-top: 4px; color: var(--text-mute); font-size: 10px; line-height: 1.5; }

.pulse-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--border);
  gap: 1px;
}
.pulse-strip a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-raised);
  transition: background .12s ease;
}
.pulse-strip a:hover { background: var(--surface); }
.pulse-strip span { color: var(--text-mute); font-size: 10px; }
.pulse-strip strong { font-size: 15px; font-weight: 500; }
.pulse-strip strong.is-alert { color: var(--red); }
.pulse-strip strong.is-warn { color: var(--yellow); }

/* ---------- What Cerebro is watching --------------------------------------- */

/* Responsibilities, not knowledge: a card each, tone by whether it needs
   the user. Deliberately unlike a note row — what Cerebro is doing should
   never look like what Cerebro knows. */
.watch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.watch-card {
  display: block;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
  text-decoration: none;
  color: inherit;
}
.watch-card:hover { background: var(--surface-soft-hover); }
.watch-card[data-tone="warn"] { border-left-color: var(--yellow); }
.watch-card[data-tone="paused"] { border-left-color: var(--text-mute); }
.watch-card[data-tone="ok"] { border-left-color: var(--green); }
.watch-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.watch-card-top strong { font-size: 13px; font-weight: 600; min-width: 0; }
.watch-card-state { margin-top: 4px; color: var(--text-dim); }
.watch-card-what { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Signals -------------------------------------------------------- */

.signal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}
.signal-card {
  /* merged from 2 rules that both set this */
  border: 1px solid rgba(124, 158, 220, .105);
  background: linear-gradient(180deg, rgba(15,24,40,.97), rgba(10,17,29,.985));
  box-shadow: inset 0 1px 0 rgba(167, 198, 255, .022),
    0 14px 34px -30px rgba(0,0,0,.94);
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 104px;
  padding: 14px;
  border-radius: 11px;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.signal-card:hover { transform: translateY(-1px); }
.signal-card > div { min-width: 0; }
.signal-card strong { display: block; font-size: 13px; font-weight: 600; }
.signal-card p { margin: 5px 0 0; color: var(--text-mute); font-size: 11px; line-height: 1.45; }
.signal-card .entity-arrow { margin-top: 1px; }
.signal-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(75,147,245,.1);
}
.signal-card[data-severity="critical"] .signal-dot {
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(240,96,60,.1);
}
.signal-card[data-severity="warning"] .signal-dot {
  background: var(--yellow);
  box-shadow: 0 0 0 4px rgba(214,160,23,.1);
}

.mobile-menu-aside {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 12px 4px 4px;
  border-top: 1px solid var(--border);
  margin-top: 10px;
}
.mobile-menu-aside a { color: var(--text-mute); text-decoration: none; }
.mobile-menu-aside a:hover { color: var(--text); }

.work-also { display: grid; gap: 22px; margin-top: 30px; }
@media (min-width: 900px) { .work-also { grid-template-columns: 1fr 1fr; } }
.work-also-group { min-width: 0; }

/* ---------- Work: state of play -------------------------------------------- */

.ws-play {
  display: grid;
  gap: 2px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-soft);
}
.ws-play-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 10px;
  padding: 5px 0;
}
.ws-play-label {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding-top: 2px;
}
.ws-play-row p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.ws-play-row strong[data-owner="You"] { color: var(--yellow); }
.ws-play-row strong[data-owner="Cerebro"] { color: var(--blue); }
@media (max-width: 640px) {
  .ws-play-row { grid-template-columns: 1fr; gap: 1px; }
  .ws-play-label { padding-top: 4px; }
}

/* ---------- Notes: scratchpad and Knowledge -------------------------------- */

.notes-shelves { margin-bottom: 8px; }
.notes-shelves > summary { cursor: pointer; padding: 5px 0; }

/* Drop targets. They stay quiet until something is actually being dragged. */
.notes-drops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
  opacity: .35;
  transition: opacity .14s ease;
}
.notes-drops.is-armed { opacity: 1; }
.notes-drop {
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 9px;
  text-align: center;
  background: var(--surface-soft);
}
.notes-drop strong { display: block; font-size: 12px; font-weight: 600; }
.notes-drops.is-armed .notes-drop { border-color: rgba(115, 156, 234, .35); }
.notes-drop.is-over { border-color: var(--blue); background: rgba(75,147,245,.08); }
.notes-drop-receipt { margin-bottom: 10px; }
.note-move-receipt { margin-bottom: 12px; }

.notes-row-wrap { position: relative; }
.notes-row-moves {
  display: flex;
  gap: 6px;
  padding: 0 12px 9px;
  margin-top: -4px;
}
.notes-row-moves .btn { font-size: 11px; padding: 3px 8px; }
@media (hover: hover) and (pointer: fine) {
  /* On a desktop the moves stay out of the way until the row is reached for;
     on a phone they are always visible, because there is no hover to reveal
     them and no drag to replace them. */
  .notes-row-moves { opacity: 0; transition: opacity .12s ease; }
  .notes-row-wrap:hover .notes-row-moves,
  .notes-row-wrap:focus-within .notes-row-moves { opacity: 1; }
}

/* ---------- Edit sheet ----------------------------------------------------- */

/* One field at a time, with somewhere to put Save. Also the named-choice
   picker: "Focus is full" lists the three initiatives instead of asking for a
   number. Same dialog primitive as Search and Quick capture. */
.edit-sheet { padding: 24px; max-width: 520px; }
.edit-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; }
.edit-sheet h2 { font-size: 20px; }
.edit-sheet form { display: grid; gap: 16px; }
.edit-sheet [hidden] { display: none !important; }
.edit-sheet textarea { width: 100%; min-height: 120px; max-height: 40dvh; font: inherit; font-size: 16px; line-height: 1.65; }
.edit-sheet [data-edit-error] { color: var(--text-dim); font-size: 14px; }
.edit-choices { display: grid; gap: 10px; }
.edit-choices p { margin: 0 0 8px; color: var(--text-dim); }
.edit-choice { min-height: 56px; padding: 14px; text-align: left; border: 1px solid var(--border-strong); border-radius: 10px; color: var(--text); background: var(--surface); font: inherit; cursor: pointer; }
.edit-choice:hover { background: var(--surface-hover); }

/* ---------- Attention cards ------------------------------------------------ */

/* One queue, stacked full width. Side by side, a grid row is as tall as its
   longest title and the action button gets squeezed against the text of the
   other two; a decision the user has to make should not be laid out to suit
   the two next to it. */
.needs-queue { display: flex; flex-direction: column; gap: 10px; }
.needs-queue > * { min-width: 0; }

/* A "Needs you" card answers three questions and nothing else: what do I need
   to do, why now, and what does Cerebro suggest. Same surfaces and the same
   dark palette as every other card; what changes is what is on it. */
.attention-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 15px;
  border-radius: 11px;
  border: 1px solid rgba(124, 158, 220, .105);
  border-left: 3px solid var(--blue);
  background: linear-gradient(180deg, rgba(15,24,40,.97), rgba(10,17,29,.985));
  box-shadow:
    inset 0 1px 0 rgba(167, 198, 255, .022),
    0 14px 34px -30px rgba(0,0,0,.94);
  transition: border-color .14s ease, background .14s ease;
}
.attention-card:hover { border-color: rgba(115, 156, 234, .17); }
.attention-card[data-severity="critical"] { border-left-color: var(--red); }
.attention-card[data-severity="warning"] { border-left-color: var(--yellow); }
.attention-main { min-width: 0; flex: 1; }
.attention-title { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.attention-why { margin: 5px 0 0; color: var(--text-dim); font-size: 12px; line-height: 1.5; }
.attention-recommends { margin: 6px 0 0; color: var(--text-mute); line-height: 1.5; }
.attention-actions { flex: none; display: flex; align-items: flex-start; gap: 6px; }

/* ---------- Cerebro is handling -------------------------------------------- */

/* One line for everything Cerebro is doing on its own. It expands into
   outcomes; run internals stay on the run's page. */
.handling {
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-soft);
}
.handling-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.handling-summary::-webkit-details-marker { display: none; }
.handling-summary::after {
  content: "›";
  margin-left: auto;
  color: var(--text-mute);
  transition: transform .14s ease;
}
.handling[open] .handling-summary::after { transform: rotate(90deg); }
.handling-title { font-size: 13px; font-weight: 600; }
.handling-counts { min-width: 0; }
.handling-body { padding: 0 14px 13px; }
.handling-list { margin: 0; padding: 0; list-style: none; }
.handling-list li {
  padding: 6px 0 6px 14px;
  position: relative;
  font-size: 12.5px;
  line-height: 1.5;
  border-top: 1px solid var(--border-soft, rgba(124,158,220,.07));
}
.handling-list li:first-child { border-top: 0; }
.handling-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-mute);
}
.handling-list li[data-state="working"]::before { background: var(--blue); }
.handling-list li[data-state="watching"]::before { background: var(--green); }
.handling-list li[data-state="waiting"]::before { background: var(--yellow); }
.handling-list li a { color: inherit; text-decoration: none; }
.handling-list li a:hover { text-decoration: underline; }

/* ---------- Receipts -------------------------------------------------------- */

/* What Cerebro understood, what it did, where it lives, whether it needs you.
   The same shape wherever Cerebro has just done something. */
.receipt {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: 10px;
  background: var(--surface-soft);
}
.receipt[data-tone="warn"] { border-left-color: var(--yellow); }
.receipt[data-tone="error"] { border-left-color: var(--red); }
.receipt p { margin: 0; }
.receipt-understood { color: var(--text-mute); font-size: 12px; line-height: 1.5; }
.receipt-did { margin-top: 2px !important; font-size: 13.5px; line-height: 1.45; }
.receipt-where { margin-top: 4px !important; font-size: 12.5px; }
.receipt-where a { color: var(--blue); text-decoration: none; }
.receipt-where a:hover { text-decoration: underline; }
.receipt-next { margin-top: 5px !important; color: var(--text-dim); line-height: 1.5; }
.receipt-closing { margin-top: 6px !important; }
.receipt-closing.is-needed { color: var(--yellow); }
.receipt-actions { margin-top: 9px; }
.receipt-details { margin-top: 9px; }
.receipt-detail-list { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 6px 0 0; }
.receipt-detail-list dt { color: var(--text-mute); }
.receipt-detail-list dd { margin: 0; }

.calm-state {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 17px;
  border: 1px solid rgba(63,185,80,.16);
  border-radius: 11px;
  background: rgba(63,185,80,.035);
}
.calm-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: rgba(63,185,80,.12);
  color: var(--green);
}
.calm-state strong { display: block; font-size: 13px; font-weight: 500; }
.calm-state span { display: block; margin-top: 2px; color: var(--text-mute); font-size: 11px; }

/* ---------- Knowledge ------------------------------------------------------ */

.knowledge-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr);
  gap: 16px;
  margin-bottom: 20px;
}
.knowledge-list { display: flex; flex-direction: column; }
.knowledge-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 13px 2px;
  border-bottom: 1px solid rgba(123, 156, 216, .085);
}
.knowledge-row:last-child { border-bottom: 0; }
.knowledge-row strong { display: block; font-size: 13px; }
.knowledge-row span { display: block; margin-top: 3px; color: var(--text-mute); font-size: 11px; }

.meeting-time { font-family: var(--mono); font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.meeting-source { display: inline-flex; align-items: center; gap: 5px; }
.meeting-source::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-mute);
}
.meeting-source[data-source="outlook"]::before { background: var(--blue); }
.meeting-note { white-space: pre-wrap; line-height: 1.65; color: var(--text-dim); }

.context-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* ---------- Ask Cerebro / AI ----------------------------------------------- */

.ai-off { margin-bottom: 20px; }
.ask-hero {
  margin-bottom: 24px; padding: 1px; border-radius: 14px;
  background: linear-gradient(115deg, rgba(124,108,255,.65), rgba(75,147,245,.22), var(--border));
  box-shadow: 0 20px 60px -40px rgba(124,108,255,.85);
}
.ask-hero form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 14px; border-radius: 13px; background: #101116; }
/* The box grows with the draft (see home.js autoGrow) and then scrolls, so a
   third line never vanishes upward while it is being typed. `resize: none` on a
   phone because the drag handle is both untappable and pointless there. */
.ask-hero textarea { flex: 1; min-height: 56px; max-height: 180px; border: 0; background: transparent; box-shadow: none; font-size: 15px; line-height: 1.45; resize: vertical; overflow-y: hidden; }
.ask-hero textarea:focus { border: 0; box-shadow: none; }
.ask-hero > .small { padding: 7px 14px 10px; background: #101116; color: var(--text-mute); }

/* Attached files: above the box, never instead of it. Each chip carries its own
   state, because "uploaded" and "Cerebro has read this" are different claims
   and a file that needs OCR has done neither. */
.composer-files { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.turn-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.file-chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; padding: 4px 6px 4px 9px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font-size: 12px; color: var(--text-dim);
}
.file-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; color: var(--text); }
.file-chip a { color: var(--text); text-decoration: none; }
.file-chip a:hover { text-decoration: underline; }
.file-chip-state { color: var(--text-mute); }
.file-chip.is-ready { border-color: var(--accent-border); }
.file-chip.is-ready .file-chip-state { color: var(--green); }
.file-chip.is-failed { border-color: rgba(240, 96, 60, .45); }
.file-chip.is-failed .file-chip-state { color: var(--red); }
.file-chip.is-needs_ocr .file-chip-state { color: var(--yellow); }
.file-chip-btn {
  /* 34px: comfortable to hit without the remove control swallowing the name
     beside it. The chip's own padding carries the rest of the target. */
  min-width: 34px; min-height: 34px; padding: 0 6px;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--text-mute); font: inherit; cursor: pointer;
}
.file-chip-btn:hover { background: var(--surface-hover); color: var(--text); }

.ai-answer { border-color: rgba(124,108,255,.3); }
.ai-answer-text { white-space: pre-wrap; font-size: 14px; line-height: 1.6; }
/* A citation is a small superscript link, never a list of every source. */
.cite { font-size: 10px; line-height: 0; vertical-align: super; margin-left: 1px; font-weight: 400; }
.cite a { color: var(--text-mute); text-decoration: none; }
.cite a:hover { color: var(--accent-text); }
/* Sources fold to one quiet line under an answer or the brief. */
.sources-fold { margin-top: 10px; }
.sources-fold > summary {
  display: inline-flex; align-items: center; min-height: 32px;
  list-style: none; cursor: pointer; user-select: none;
  color: var(--text-mute); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
}
.sources-fold > summary::-webkit-details-marker { display: none; }
.sources-fold > summary::before { content: '▸'; margin-right: 6px; }
.sources-fold[open] > summary::before { content: '▾'; }
.sources-fold > summary:hover { color: var(--text-dim); }
.sources-fold .chip-row { margin-top: 4px; }
.sources-fold .ai-sources { margin-top: 2px; padding-top: 0; border-top: 0; }
.ai-sources { display: grid; gap: 5px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.ai-sources > a { display: grid; grid-template-columns: 110px 1fr; gap: 8px; padding: 7px 0; }
.ai-sources strong { display: block; font-size: 11px; font-weight: 500; }
.ai-sources span:not(.search-kind) { display: block; margin-top: 2px; color: var(--text-mute); font-size: 10px; }

.proposal-list { display: grid; gap: 9px; }
.proposal-card { padding: 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.proposal-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.proposal-card > strong { display: block; color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.proposal-card > p { margin: 6px 0 0; color: var(--text-dim); font-size: 12.5px; line-height: 1.45; }
.proposal-meta { margin-top: 6px; color: var(--text-mute); font-size: 11.5px; }
.proposal-meta a { color: var(--accent-text); }
.proposal-reason { padding-top: 7px; margin-top: 8px; border-top: 1px solid var(--border); color: var(--text-mute); font-size: 11.5px; }
.proposal-actions { display: flex; gap: 6px; margin-top: 10px; }
.proposal-actions form { margin: 0; }

/* ---------- Timeline ------------------------------------------------------- */

.month { margin-bottom: 26px; }
.month-label {
  position: sticky; top: 0;
  padding: 6px 0 10px;
  background: var(--bg);
  color: var(--text-mute);
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em;
  z-index: 5;
}
.events { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 1px solid var(--border); }
.event { position: relative; padding: 9px 0 9px 18px; }
.event::before {
  content: ""; position: absolute; left: -21px; top: 15px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border-strong); outline: 3px solid var(--bg);
}
.event.is-win::before { background: var(--green); }
.event-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.event-project { font-weight: 500; }
.event-when { color: var(--text-mute); font-size: 12px; margin-left: auto; font-family: var(--mono); }
.transition { color: var(--text-dim); font-size: 13px; }
.transition .arrow { color: var(--text-mute); margin: 0 4px; }

/* ---------- Integrations grid ---------------------------------------------- */

.grid-table th.grid-cells, .grid-table td.grid-cells { width: 1%; }
.grid-strip { display: flex; gap: 2px; align-items: center; }
.grid-cell {
  width: 9px;
  height: 22px;
  border-radius: 2px;
  background: var(--border);
  flex: none;
  transition: transform .1s ease;
}
.grid-cell:hover { transform: scaleY(1.15); }
.grid-cell[data-state="ok"]   { background: var(--green); }
.grid-cell[data-state="down"] { background: var(--red); }
.grid-cell[data-state="none"] { background: var(--border); }

/* ---------- Workspace create ------------------------------------------------ */

.workspace-create {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.workspace-create-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.workspace-create-head h2 { font-size: 14px; }
.workspace-create .creation-disclosure { margin-bottom: 0; }

/* ---------- Login ---------------------------------------------------------- */

body.centered { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.login-card {
  display: flex; flex-direction: column; gap: 12px;
  width: 100%; max-width: 330px;
  padding: 28px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  text-align: center;
}
.login-mark {
  width: 40px; height: 40px; margin: 0 auto 4px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: linear-gradient(150deg, var(--accent), var(--accent-dim));
  color: #fff; font-weight: 600;
}
.login-card p { margin: 0; }
.login-card .field { text-align: left; }

/* ---------- Public team view ------------------------------------------------ */

.public { max-width: 1080px; margin: 0 auto; padding: 44px 24px 72px; }
.public-head { margin-bottom: 26px; }
.public-head h1 { font-size: 26px; }
.wins { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.win {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px;
  border: 1px solid rgba(63,185,80,.28);
  border-radius: 999px;
  background: rgba(63,185,80,.07);
  font-size: 12px;
}
.win .when { color: var(--text-mute); font-family: var(--mono); }


/* ============================================================================
   7. Command palette, quick capture, keyboard affordances
   ============================================================================ */

.command-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: start center;
  padding-top: min(16vh, 140px);
  background: rgba(4, 5, 7, .72);
  backdrop-filter: blur(5px);
}
.command-backdrop.is-open { display: grid; }

.command {
  width: min(680px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid rgba(132, 169, 235, .17);
  border-radius: 14px;
  background:
    radial-gradient(520px 280px at 10% -10%, rgba(52, 127, 255, .09), transparent 65%),
    rgba(10,16,28,.988);
  box-shadow: 0 30px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(74, 116, 255, .05);
  backdrop-filter: blur(18px);
}
.command-input {
  width: 100%;
  padding: 17px 18px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: 500 15px var(--sans);
  font-size: 15px;
  outline: none;
}
.command-results { max-height: 430px; overflow: auto; padding: 7px; }
.command-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 11px;
  border-radius: 8px;
}
.command-result:hover,
.command-result.is-selected { background: var(--surface-hover); }
.command-result.is-selected {
  background: linear-gradient(90deg, rgba(43, 174, 255, .08), rgba(77, 89, 255, .12), rgba(122, 58, 255, .06));
}
.command-kind {
  width: 78px;
  color: #9d92ff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.command-result-main { min-width: 0; }
.command-result-main strong,
.command-result-main span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.command-result-main strong { font-size: 13px; }
.command-result-main span { margin-top: 2px; color: var(--text-mute); font-size: 11px; }
.command-empty { padding: 20px; color: var(--text-mute); font-size: 12px; text-align: center; }

/* Quick capture reuses .command, so it must come after it. */
.quick-capture-dialog {
  width: min(620px, calc(100vw - 28px));
  padding: 16px;
}
.quick-capture-dialog textarea {
  min-height: 118px;
  max-height: 42vh;
  resize: vertical;
  font-size: 14px;
  line-height: 1.55;
}
.quick-capture-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.quick-capture-head h2 {
  margin-top: 2px;
  font-size: 16px;
}

.quick-capture-close:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.quick-capture-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.rail-menu-shortcuts {
  display: block;
  padding: 5px 6px 7px;
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.55;
}

body.mobile-menu-open { overflow: hidden; }


/* ============================================================================
   8. Responsive

   Four steps, widest first. Old breakpoints folded in:
     680px, 760px → 720px      900px → 960px
   390px and 1050px are kept as their own steps: 480px would restyle common
   phones (390–430px) and 960/1200px would restack the executive grids at
   ordinary laptop widths, both of which would change the current layout.
   ============================================================================ */

/* ---------- ≤ 1050px — narrow laptop, rail still full width ----------------- */

@media (max-width: 1050px) {
  .executive-grid,
  .executive-columns,
  .today-grid { grid-template-columns: minmax(0, 1fr); }
  .executive-span-2 { grid-column: auto; }
  .form-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entity-list-grid { grid-template-columns: 1fr; }
  .pulse-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- ≤ 960px — compact desktop --------------------------------------- */

@media (max-width: 960px) {
  .knowledge-hero,
  .context-columns { grid-template-columns: 1fr; }
}

/* The rail auto-collapses to icons, but only while it is still the desktop
   rail — below 720px it is replaced by the mobile nav entirely. */
@media (max-width: 960px) and (min-width: 721px) {
  .shell { --rail-current: 68px; }
  .rail-brand { justify-content: center; padding: 0; }
  .rail-brand-name,
  .rail-section-label,
  .rail-label,
  .rail-shortcut,
  .rail-collapse { display: none; }
  .rail-nav { margin-top: 10px; }
  .rail-link { justify-content: center; width: 40px; margin-inline: auto; padding: 0; }
}

/* ---------- ≤ 720px — mobile ------------------------------------------------ */

@media (max-width: 720px) {
  body {
    background:
      radial-gradient(620px 360px at 92% -2%, rgba(42, 121, 255, .13), transparent 64%),
      radial-gradient(540px 360px at 28% -14%, rgba(112, 54, 255, .08), transparent 70%),
      var(--bg);
  }

  h1 { font-size: 22px; }

  /* The desktop rail is not repurposed as a scrolling mobile bar — fixed
     children inside overflow containers are unreliable on iOS. Mobile gets its
     own nav, so every rail-internal override below 720px was dead weight. */
  .rail { display: none; }
  .shell,
  .shell.is-rail-collapsed { --rail-current: 0px; }
  /* Kept for the desktop/mobile split of the "More" menu: the secondary rail
     links belong in the sheet, not the bar. Inert while .rail is hidden, so the
     !important these carried in workspace.css is no longer needed. */
  .rail-mobile-secondary { display: none; }
  .rail-menu-mobile { display: block; }

  .main {
    margin-left: 0;
    padding:
      calc(var(--mobile-top-h) + 10px + env(safe-area-inset-top))
      16px
      calc(var(--mobile-nav-h) + 20px + env(safe-area-inset-bottom));
  }

  .mobile-brandbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    margin: 0 -4px 16px;
    padding: 2px 4px 10px;
    border-bottom: 1px solid rgba(126, 159, 218, .08);
  }
  .mobile-brandbar a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
  }
  .mobile-brandbar img {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(112, 153, 255, .16);
    border-radius: 9px;
    box-shadow: 0 8px 20px -13px rgba(60, 116, 255, .9);
  }
  .mobile-brandbar span {
    color: #f5f7ff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .19em;
    text-transform: uppercase;
  }

  /* Layout */
  .page-head { flex-direction: column; align-items: stretch; }
  .page-actions { justify-content: flex-start; }
  .panel { border-radius: 10px; }
  /* minmax(0, …): a wide table inside a column scrolls in its own box rather
     than stretching the track and the page. */
  .columns { grid-template-columns: minmax(0, 1fr); }
  .detail-grid { grid-template-columns: 1fr; gap: 4px 0; }
  .detail-grid dd { margin-bottom: 10px; }
  .form-grid-2,
  .form-grid-3,
  .form-grid-4 { grid-template-columns: 1fr; }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .strip-value { font-size: 20px; }
  .card-metric-value { font-size: 17px; }
  .compact-value { font-size: 14px; }
  .month-label { position: static; }
  .record-when { margin-left: 0; }
  .grid-cell { width: 7px; height: 18px; }
  .public { padding: 28px 16px 60px; }
  .workspace-create-head {
    align-items: flex-start;
    flex-direction: column;
  }

  /* Today / signals */
  .today-head { align-items: center; }
  .today-section-head { align-items: flex-start; flex-direction: column; }
  .capture-line { align-items: flex-end; }
  .capture-line .btn { padding-inline: 10px; }
  .signal-grid { grid-template-columns: 1fr; }
  .pulse-strip { grid-template-columns: 1fr 1fr; }

  /* A "Needs you" card on a phone: the words first, the action under them at
     full width. Squeezing a button beside a two-line title is how a card
     ends up wider than the screen. */
  .attention-card { flex-direction: column; gap: 10px; }
  .attention-actions { width: 100%; }
  .attention-actions .btn { flex: 1; justify-content: center; }

  /* The drag handle is both untappable and pointless on a phone, and the box
     grows itself. */
  .ask-hero textarea { resize: none; }

  /* The mode popover spans the composer instead of hanging off its trigger.
     A popover anchored to a control in a wrapping row can end up anywhere on
     the line, and at 320px "anywhere" includes off the screen. Rendering at
     390 / 375 / 320 is what found it; this makes overflow impossible rather
     than unlikely. */
  .today-capture form { position: relative; }
  .capture-options { position: static; }
  .capture-modes {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }

  /* Cerebro is handling: one line, wrapping, never a horizontal scroll. */
  .handling-summary { flex-direction: column; align-items: flex-start; gap: 3px; }
  .handling-summary::after { position: absolute; right: 14px; margin: 0; }
  .handling { position: relative; }

  /* Notes: the moves are always visible (there is no hover and no drag), and
     the drop targets are hidden because a phone cannot use them. */
  .notes-drops { display: none; }
  .notes-row-moves { opacity: 1; }
  .notes-row-moves .btn { flex: 1; justify-content: center; min-height: 36px; }

  /* Ask */
  .ask-hero form { align-items: stretch; flex-direction: column; }
  .ask-hero .btn { align-self: flex-end; }
  .ai-sources > a { grid-template-columns: 80px 1fr; }

  /* Tables & forms */
  .table th, .table td { padding: 9px 12px; }
  .table-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .row-form .field, .row-form .field-wide, .row-form .field-narrow { flex: 1 1 100%; }
  .row-form .btn { width: 100%; justify-content: center; }
  .btn { min-height: 44px; }

  /* iOS Safari zooms the viewport when focusing any control below 16px. The
     !important is load-bearing: several component rules (.capture-line
     textarea, .quick-capture-dialog textarea, .ask-hero textarea) are more
     specific than these element selectors. */
  input[type="text"],
  input[type="search"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="number"],
  input[type="tel"],
  input:not([type]),
  textarea,
  select,
  .command-input {
    font-size: 16px !important;
  }

  /* Mobile bottom navigation */
  .mobile-nav {
    position: fixed;
    z-index: 70;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    min-height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(126, 159, 218, .14);
    background: linear-gradient(180deg, rgba(12,19,32,.94), rgba(7,12,21,.985));
    box-shadow: 0 -16px 42px rgba(0,0,0,.42), 0 -1px 24px rgba(55, 105, 255, .025);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 52px;
    padding: 4px 2px 2px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #6f7c92;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  button.mobile-nav-item { cursor: pointer; }
  .mobile-nav-item.is-active {
    border: 1px solid rgba(75, 123, 255, .11);
    background: linear-gradient(180deg, rgba(42, 161, 255, .075), rgba(90, 69, 255, .10));
    color: #a9c7ff;
  }
  .mobile-nav-item > svg,
  .mobile-capture-mark svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mobile-nav-item > span:last-child {
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-capture { color: var(--text-dim); }
  .mobile-capture-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-top: -8px;
    border: 1px solid rgba(104, 163, 255, .54);
    border-radius: 12px;
    background: var(--brand-gradient);
    color: #fff;
    box-shadow: 0 10px 26px -10px rgba(61, 112, 255, .72), inset 0 1px 0 rgba(255,255,255,.21);
  }
  .mobile-capture-mark svg {
    width: 19px;
    height: 19px;
  }

  /* Mobile menu sheet */
  .mobile-menu-backdrop {
    position: fixed;
    z-index: 90;
    inset: 0;
    display: block;
    background: rgba(1, 5, 12, .70);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-menu-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-menu-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    max-height: min(82vh, 720px);
    max-height: min(82dvh, 720px);
    padding: 8px 14px calc(14px + env(safe-area-inset-bottom));
    border: 1px solid rgba(126, 159, 218, .16);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background:
      radial-gradient(520px 300px at 12% -8%, rgba(49, 119, 255, .10), transparent 66%),
      linear-gradient(180deg, #0b1321, #080e18);
    box-shadow: 0 -28px 72px rgba(0,0,0,.64), 0 0 0 1px rgba(70, 111, 255, .025);
    transform: translateY(104%);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
    overscroll-behavior: contain;
  }
  .mobile-menu-backdrop.is-open .mobile-menu-sheet { transform: translateY(0); }

  .mobile-menu-handle {
    width: 38px;
    height: 4px;
    margin: 1px auto 9px;
    border-radius: 999px;
    background: rgba(137, 168, 225, .22);
  }

  .mobile-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 12px;
  }
  .mobile-menu-head h2 {
    margin-top: 1px;
    font-size: 18px;
  }
  .mobile-menu-brand {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .mobile-menu-brand img {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(112, 153, 255, .16);
    border-radius: 10px;
    box-shadow: 0 9px 24px -14px rgba(60, 116, 255, .9);
  }
  .mobile-menu-brand h2 {
    color: #f6f8ff;
    font-size: 13px;
    letter-spacing: .17em;
    text-transform: uppercase;
  }
  .mobile-menu-close {
    min-width: 48px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid rgba(126, 159, 218, .13);
    border-radius: 9px;
    background: rgba(77, 111, 172, .055);
    color: var(--text-dim);
    font: inherit;
    font-size: 12px;
    touch-action: manipulation;
  }

  .mobile-menu-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-bottom: 13px;
  }
  .mobile-menu-actions button {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 56px;
    padding: 9px 10px;
    border: 1px solid rgba(126, 159, 218, .13);
    border-radius: 11px;
    background: rgba(77, 111, 172, .055);
    color: var(--text);
    font: inherit;
    text-align: left;
    touch-action: manipulation;
  }
  .mobile-menu-actions button:hover,
  .mobile-menu-actions button:active {
    border-color: rgba(101, 154, 255, .22);
    background: rgba(69, 117, 209, .09);
  }
  .mobile-menu-actions svg {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: #8bb5ff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mobile-menu-actions span { min-width: 0; }
  .mobile-menu-actions strong,
  .mobile-menu-actions small { display: block; }
  .mobile-menu-actions strong {
    font-size: 12px;
    font-weight: 600;
  }
  .mobile-menu-actions small {
    margin-top: 1px;
    overflow: hidden;
    color: var(--text-mute);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-menu-scroll {
    min-height: 0;
    overflow-y: auto;
    padding: 0 2px 4px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .mobile-menu-group {
    padding: 12px 0;
    border-top: 1px solid rgba(126, 159, 218, .09);
  }
  .mobile-menu-group:first-child { border-top: 0; }
  .mobile-menu-label {
    margin-bottom: 7px;
    color: var(--text-mute);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .mobile-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .mobile-menu-grid a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: rgba(83, 119, 180, .045);
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 500;
    touch-action: manipulation;
  }
  .mobile-menu-grid a.is-active {
    border-color: rgba(72, 128, 255, .28);
    background: linear-gradient(120deg, rgba(42, 168, 255, .09), rgba(85, 74, 255, .13), rgba(120, 55, 255, .07));
    color: #b7cdff;
  }

  .mobile-menu-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0 2px;
    border-top: 1px solid rgba(126, 159, 218, .09);
  }
  .mobile-menu-footer a,
  .mobile-menu-footer button {
    min-height: 42px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-mute);
    font: inherit;
    font-size: 11px;
    touch-action: manipulation;
  }
  .mobile-menu-footer button { color: var(--red); }

  /* Quick capture */
  .quick-capture-dialog {
    width: calc(100vw - 20px);
    padding: 14px;
  }
  .quick-capture-dialog textarea { min-height: 150px; }
  .quick-capture-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .quick-capture-actions .btn {
    justify-content: center;
    width: 100%;
    min-height: 44px;
  }
}

/* ---------- ≤ 390px — small phone ------------------------------------------- */

@media (max-width: 390px) {
  .mobile-brandbar { margin-bottom: 13px; }
  .mobile-menu-grid { grid-template-columns: 1fr; }
  .mobile-menu-actions { grid-template-columns: 1fr; }
  /* 375 and 320 are real devices. Nothing here may set a width that cannot
     shrink, and every row of controls wraps rather than overflowing. */
  .attention-card { padding: 12px; }
  .attention-title { font-size: 13.5px; }
  .notes-row-moves { flex-wrap: wrap; }
  .capture-controls { flex-wrap: wrap; row-gap: 8px; }
  .receipt { padding: 11px 12px; }
  .receipt-detail-list { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
  .mobile-menu-backdrop,
  .mobile-menu-sheet { transition: none; }
}


/* ============================================================================
   9. Utilities
   ============================================================================ */

.muted { color: var(--text-dim); }
.small { font-size: var(--text-secondary); }
.mono  { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.eyebrow {
  margin-bottom: 5px;
  color: #89a9ff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .115em;
  text-transform: uppercase;
}

.htmx-request { opacity: .55; transition: opacity .1s ease; }

/* ==========================================================================
   Section navigation, status chips and assistant surfaces
   Added with the six-section navigation and the tool-using Ask Cerebro.
   ========================================================================== */

/* Section subnav — a section's children live under the section, not in a
   seventeen-link overflow drawer. */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.subnav-link {
  /* 44px: the figure Apple's HIG and WCAG 2.5.8 use. A 40px row is a miss
     often enough to be annoying on the controls people use most. */
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 6px 12px;
  border-radius: 7px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background .14s ease, color .14s ease;
}
.subnav-link:hover { background: var(--surface-hover); color: var(--text); }
.subnav-link.is-active { background: var(--surface-hover); color: var(--text); border: 1px solid var(--border); }

/* Semantic status chips. Used by /system, query history and connector state. */
.chip.is-good { color: var(--green); border-color: rgba(63, 185, 80, .35); }
.chip.is-bad  { color: var(--red);   border-color: rgba(240, 96, 60, .38); }
.chip.is-warn { color: var(--yellow); border-color: rgba(214, 160, 23, .38); }
.strip-value.is-warn { color: var(--yellow); }
.strip-value.is-bad  { color: var(--red); }

.table-scroll {
  /* merged from 2 rules that both set this */
  overflow-x: auto;
}
.table-scroll > .table { min-width: 560px; }

.head-actions { display: flex; align-items: center; gap: 10px; }

/* Ask Cerebro conversation */
.ask-thread { display: flex; flex-direction: column; gap: 16px; margin-bottom: 22px; }
.ask-turn {
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}
.ask-turn-user { background: var(--surface-soft); }
.ask-turn-body { white-space: pre-wrap; line-height: 1.62; margin-top: 6px; }
.ask-turn-assistant .ai-sources { margin-top: 14px; }

.tool-trace { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.tool-trace li { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tool-trace code {
  font-family: var(--mono);
  font-size: 12px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--surface-hover);
}

/* Today: one compact row for everything that is not the day's focus. */
.elsewhere { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.elsewhere-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 13px;
  text-decoration: none;
  transition: border-color .14s ease, color .14s ease;
}
.elsewhere-item:hover { border-color: var(--border-strong); color: var(--text); }
.elsewhere-count { font-family: var(--mono); font-weight: 500; color: var(--text); }
.elsewhere-item.is-critical .elsewhere-count { color: var(--red); }
.elsewhere-item.is-warning .elsewhere-count { color: var(--yellow); }

@media (max-width: 720px) {
  .subnav { gap: 2px; margin-bottom: 16px; }
  .subnav-link { padding: 6px 10px; font-size: 12px; }
}


/* ---------- Assistant home: questions, replies, suggestions ---------------- */

/* The question Cerebro asks, sitting above the capture box. */
.today-prompt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}
.today-prompt-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  background: var(--accent-wash);
  color: var(--accent-text);
  font-family: var(--mono);
  font-size: 15px;
}
.today-prompt-mark.is-quiet { color: var(--text-mute); background: var(--surface); }
.today-prompt-body { min-width: 0; flex: 1; }
.today-prompt-question { margin-top: 2px; font-size: 14px; font-weight: 600; }
.today-prompt-hint { margin-top: 3px; color: var(--text-mute); font-size: 11px; line-height: 1.45; }
.today-prompt-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.today-prompt-actions .btn { white-space: nowrap; }

.capture-answering {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px 38px;
  color: var(--text-dim);
  font-size: 11px;
}
.capture-answering[hidden] { display: none; }
.btn[hidden] { display: none; }
.capture-answering em { color: var(--accent-text); font-style: normal; }

/* What Cerebro says after a capture. */
.capture-reply { margin: 9px 0 0 38px; font-size: 12px; line-height: 1.5; }
.capture-reply.is-empty { display: none; }
.quick-capture-reply .capture-reply { margin-left: 0; }
.reply-line { color: var(--green); font-size: 11px; }
.reply-line a { color: var(--accent-text); }
.reply-mark { margin-right: 4px; }
.reply-thinking { display: flex; align-items: center; gap: 7px; margin-top: 7px; color: var(--text-dim); font-size: 11px; }
.reply-thinking.is-muted { color: var(--text-mute); }
.reply-thinking a { color: var(--accent-text); }
.reply-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-bright);
  animation: reply-pulse 1.1s ease-in-out infinite;
}
@keyframes reply-pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.reply-suggestion {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--accent-border);
  border-radius: 9px;
  background: var(--accent-wash);
}
.reply-suggestion-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.reply-suggestion-head strong { font-size: 12px; }
.reply-suggestion-reason { margin-top: 5px; color: var(--text-dim); font-size: 11px; }
.reply-suggestion-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.reply-context { display: grid; gap: 5px; margin-top: 8px; }
.reply-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.reply-label { min-width: 62px; color: var(--text-mute); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.reply-link { color: var(--text-dim); font-size: 11px; text-decoration: none; }
.reply-link:hover { color: var(--text); }
.reply-link strong { color: var(--text); font-weight: 500; }

/* Inbox: the suggestion on each waiting card, and the summary line. */
.inbox-summary { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; color: var(--text-dim); font-size: 12px; }
.inbox-summary strong { color: var(--text); font-family: var(--mono); font-weight: 500; }
.inbox-summary .is-warn strong { color: var(--yellow); }
.inbox-flash {
  margin-bottom: 12px;
  padding: 9px 12px;
  border: 1px solid rgba(63, 185, 80, .35);
  border-radius: 9px;
  color: var(--green);
  font-size: 12px;
}
.inbox-flash a { color: var(--accent-text); }
.inbox-flash.is-error { color: var(--red); border-color: rgba(240, 96, 60, .38); }
.capture-card:target { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--focus-ring); }
.capture-suggestion {
  margin-top: 9px;
  padding: 9px 10px;
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  background: var(--accent-wash);
  font-size: 12px;
}
.capture-suggestion.is-pending {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-style: dashed; border-color: var(--border); background: transparent;
}
.capture-suggestion-head { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.capture-suggestion > strong { display: block; font-size: 12px; font-weight: 600; }
.capture-suggestion-reason { margin-top: 4px; color: var(--text-dim); font-size: 11px; line-height: 1.45; }
.capture-suggestion-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Today: data deliveries with the window they cover. */
.delivery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 26px; }
.delivery {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  transition: opacity .14s ease;
}
.delivery.htmx-request { opacity: .55; }
.delivery-main {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 14px 9px;
  color: var(--text-dim);
  text-decoration: none;
}
.delivery-main:hover strong { color: var(--accent-text); }
.delivery-count { font-family: var(--mono); font-size: 22px; font-weight: 500; color: var(--text); }
.delivery-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.delivery-text strong { color: var(--text); font-size: 12px; font-weight: 500; }
.delivery-window { color: var(--text-mute); font-size: 11px; }
.delivery-periods { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 10px; }
.delivery-period {
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-mute);
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
}
.delivery-period:hover { color: var(--text); border-color: var(--border-strong); }
.delivery-period.is-active { color: var(--accent-text); border-color: var(--accent-border); background: var(--accent-wash); }
.delivery-error { padding: 0 14px 10px; color: var(--red); font-size: 11px; }

@media (max-width: 720px) {
  .today-prompt { flex-wrap: wrap; }
  .today-prompt-actions { width: 100%; padding-left: 40px; }
  .capture-reply, .capture-answering { margin-left: 0; }
}


/* ---------- Delegated runs and the four-verb box --------------------------- */

.capture-modes {
  position: absolute;
  /* Anchored to the *right* of the trigger, not the left: Options sits at the
     start of a flex row whose other end is Send, so a left-anchored popover
     ran off the screen on a phone once it held more than three chips. A
     rendered sweep at 390 / 375 / 320 is what found it. */
  left: 0;
  right: auto;
  top: calc(100% + 6px);
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  margin: 0;
  padding: 9px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.capture-mode {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-mute);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.capture-mode:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); }
.capture-mode.is-active { color: var(--accent-text); border-color: var(--accent-border); background: var(--accent-wash); }
.capture-mode:disabled { opacity: .45; cursor: not-allowed; }
.capture-modes-hint { margin-left: 4px; }
.reply-line.is-error { color: var(--red); }
.ask-inline-answer { margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--text); }
.ask-hero-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.run-list { display: grid; gap: 10px; }
.run-card {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.run-card[data-status="running"] { border-color: var(--accent-border); }
.run-card[data-status="failed"] { border-color: rgba(240, 96, 60, .38); }
.run-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; }
.run-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.run-title a { color: var(--text); text-decoration: none; }
.run-title a:hover { color: var(--accent-text); }
.run-title strong { font-size: 13px; font-weight: 500; }
.run-status { display: inline-flex; align-items: center; gap: 5px; }
.run-status.is-running { color: var(--accent-text); border-color: var(--accent-border); }
.run-status.is-done { color: var(--green); border-color: rgba(63, 185, 80, .35); }
.run-status.is-failed { color: var(--red); border-color: rgba(240, 96, 60, .38); }
.run-status.is-stopped, .run-status.is-stopping { color: var(--yellow); border-color: rgba(214, 160, 23, .38); }
.run-meter { color: var(--text-mute); white-space: nowrap; }
.run-finding { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 4px; font-size: 12px; }
.run-finding strong { font-weight: 600; }
.run-bar { height: 3px; margin: 8px 0; border-radius: 2px; background: var(--surface-hover); overflow: hidden; }
.run-bar span { display: block; height: 100%; background: var(--brand-gradient); transition: width .3s ease; }
.run-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.run-receipt { margin-top: 2px; }
.run-receipt .is-bad { color: var(--red); }
.run-result { margin-top: 10px; font-size: 13px; }
.run-brief { margin: 10px 0 0; }

@media (max-width: 720px) {
}


/* ---------- Triage agent ---------------------------------------------------- */
.chip.triage-code { color: var(--red); border-color: rgba(240, 96, 60, .38); }
.chip.triage-data { color: var(--yellow); border-color: rgba(214, 160, 23, .38); }
.chip.triage-infra { color: var(--accent-text); border-color: var(--accent-border); }
.chip.triage-config { color: var(--accent-bright); border-color: var(--accent-border); }
.chip.triage-external { color: var(--text-dim); border-color: var(--border-strong); }
.chip.triage-unknown { color: var(--text-mute); }


/* ==========================================================================
   Consolidated navigation: seven sections plus Settings
   ========================================================================== */

/* A section's subnav can carry one right-aligned aside (the public team view
   from Settings) without pretending to be a sibling tab. */
.subnav-aside { margin-left: auto; color: var(--text-mute); }

/* Settings hub */
.settings-attention { display: grid; gap: 6px; margin-bottom: 20px; }
.settings-attention-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(214, 160, 23, .28);
  border-radius: 10px;
  background: rgba(214, 160, 23, .06);
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
}
.settings-attention-row:hover { border-color: rgba(214, 160, 23, .5); }
.settings-attention-row > span:nth-child(2) { flex: 1; min-width: 0; }
.settings-attention-row em { color: var(--text-dim); font-style: normal; }
.settings-attention-row .status-orb { flex: none; }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.settings-card {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color .14s ease, background .14s ease;
}
.settings-card:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.settings-card[data-state="warn"] { border-color: rgba(214, 160, 23, .3); }
.settings-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.settings-card-head strong { font-size: 14px; font-weight: 600; }
.settings-card p { margin: 8px 0 0; color: var(--text-dim); font-size: 13px; line-height: 1.5; }
.settings-lines { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.settings-lines li { color: var(--text-mute); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.settings-fix { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--yellow); font-size: 12px; line-height: 1.45; }

/* Today: the brief reads as text, not a boxed widget */
.brief { padding: 2px 0 0; }
.brief-body { white-space: pre-wrap; color: var(--text); font-size: 13px; line-height: 1.65; }
.brief-list { margin: 0; padding-left: 18px; color: var(--text); font-size: 13px; line-height: 1.55; display: flex; flex-direction: column; gap: 6px; }
.brief-list li::marker { color: var(--muted); }
.brief-list li:first-child { font-weight: 600; }
.brief .chip-row { margin-top: 10px; }

/* Triage: two ways to hand the agent something, side by side */
.triage-forms { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; }
.triage-forms > form > .field-label { margin-bottom: 8px; }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.toggle-option {
  /* merged from 2 rules that both set this */
  padding: 3px 10px;
  border: 0;
  background: transparent;
  color: var(--text-mute);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
}

@media (max-width: 960px) {
  .triage-forms { grid-template-columns: 1fr; }
}
.today-prompt[hidden] { display: none; }

/* Ask Cerebro while it works: the steps so far and a bar that says "busy". */
.ask-working { border-color: var(--accent-border); }
.ask-activity { margin-top: 10px; }
.ask-activity > summary {
  cursor: pointer;
  color: var(--text-dim);
  font-size: 12px;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ask-activity > summary::before { content: '▸'; }
.ask-activity[open] > summary::before { content: '▾'; }
.ask-activity > summary::-webkit-details-marker { display: none; }
.ask-activity > .ask-steps { margin-top: 6px; }
.ask-activity-history { margin: 0 0 12px; padding-left: 18px; font-size: 13px; }
.ask-activity-history > li { margin-bottom: 6px; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .ask-activity > summary { min-height: 44px; }
}
.ask-progress-bar { position: relative; height: 4px; margin: 10px 0 12px; border-radius: 999px; background: var(--accent-wash); overflow: hidden; }
.ask-progress-bar span {
  position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
  animation: ask-progress 1.4s ease-in-out infinite;
}
@keyframes ask-progress { to { left: 100%; } }
.ask-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.ask-steps li { display: flex; align-items: center; gap: 8px; color: var(--text-dim); }
.ask-steps li::before { content: "✓"; flex: none; width: 11px; color: var(--green); font-size: 11px; }
.ask-steps li.is-running { color: var(--text); }
.ask-steps li.is-running::before {
  content: ""; width: 7px; height: 7px; margin: 0 2px;
  border-radius: 50%; background: var(--accent-bright);
  animation: reply-pulse 1.1s ease-in-out infinite;
}
.capture-reply .ask-progress-bar { margin: 8px 0 0; max-width: 320px; }
@media (prefers-reduced-motion: reduce) {
  .ask-progress-bar span { animation: none; left: 0; width: 100%; opacity: .5; }
}


/* ============================================================================
   10. Initiatives board
   Three tiers, one next action each. Borders, colour and weight encode three
   things only: which tier (column), stale (muted left edge), missing next
   action (yellow left edge). Nothing else is decorated.
   ============================================================================ */

.init { position: relative; }
/* Panels below set display:flex/grid, which would outrank the hidden attribute. */
.init [hidden] { display: none !important; }
.init .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.init .mono { font-family: var(--mono); font-size: 12px; }
.init-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.init-help-btn { min-width: 34px; justify-content: center; }

.init-notice {
  margin: 0 0 14px;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--yellow);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}

/* Sunday review panel */
.init-review {
  margin: 0 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.init-review summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 12px 14px; cursor: pointer; list-style: none; }
.init-review summary::-webkit-details-marker { display: none; }
.init-review summary .eyebrow { margin: 0; }

.init-review-body { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: 0 14px 14px; font-size: 13px; }
.init-review-body ul { margin: 6px 0 0; padding-left: 18px; }
.init-review-body li[data-review-jump] { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }

/* Segmented control: phone only */
.init-segments { display: none; }

/* The board */
.init-board {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, .8fr);
  gap: 18px;
  align-items: start;
}
.init-column { min-width: 0; }
.init-column-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 10px; padding: 0 2px; }
.init-column-head h2 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.init-column-count { color: var(--text-mute); }
.init-column-head.is-over .init-column-count { color: var(--yellow); }
.init-column-body { display: flex; flex-direction: column; gap: 10px; min-height: 120px; border-radius: var(--radius); }
.init-column.is-drop-target .init-column-body { outline: 2px dashed var(--accent-border); outline-offset: 4px; }
.init-column-empty { padding: 14px 4px; color: var(--text-mute); font-size: 13px; }

/* Focus column is the one bold choice: raised, brand rule on top, bigger type. */
.init-column-focus {
  padding: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  position: relative;
}
.init-column-focus::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: 12px 12px 0 0;
  background: var(--brand-gradient);
}
.init-column-focus .init-column-head h2 { color: var(--text); }
.init-column-focus .init-column-count { color: var(--accent-text); }

/* Cards */
.init-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  background: var(--bg-raised);
  cursor: pointer;
  transition: border-color .12s ease;
}
.init-card:focus-visible, .init-card.is-selected { border-color: var(--accent-border); box-shadow: 0 0 0 2px var(--focus-ring); }
.init-card.is-stale { border-left-color: var(--slate); }
.init-card.needs-next { border-left-color: var(--yellow); }
.init-card.is-pending { opacity: .6; }
.init-card.is-dragging { opacity: .4; }
.init-card-main { flex: 1; min-width: 0; }
.init-card-head { display: flex; align-items: flex-start; gap: 8px; }
.init-card-head .init-card-title { flex: 1; }
.init-card-title { font-weight: 600; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.init-card-focus .init-card-title { font-size: 17px; }
.init-card-someday { padding: 9px 10px 9px 12px; background: transparent; border-color: transparent; }
.init-card-someday:hover, .init-card-someday.is-selected { background: var(--bg-raised); }
.init-card-someday .init-card-title { font-weight: 500; font-size: 13px; }
.init-card-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 5px; align-items: center; }
.init-stale { color: var(--text-mute); }
.init-card-outcome { margin-top: 6px; color: var(--text-dim); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.init-card-outcome.is-empty { color: var(--text-mute); font-style: italic; }
.init-card.is-expanded { cursor: default; }
.init-card.is-expanded .init-card-title { cursor: text; }

/* Next action */
.init-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 8px; font-size: 13px; }
.init-next-mark { color: var(--accent-text); font-size: 10px; flex: none; }
.init-next-text { flex: 1; min-width: 0; overflow-wrap: anywhere; cursor: text; }
.init-next.is-prominent { margin-top: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--accent-wash); font-size: 14px; font-weight: 500; }
.init-next.is-missing { background: rgba(214, 160, 23, .10); }
.init-next.is-missing .init-next-text { color: var(--yellow); font-weight: 600; }
.init-next.is-missing .init-next-mark { color: var(--yellow); }
.init-next-done {
  flex: none;
  margin-left: auto;
  padding: 2px 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-mute);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  min-height: 24px;
}
.init-next-done:hover, .init-next-done:focus-visible { color: var(--text); background: var(--surface-soft-hover); }

/* Item progress ticks — the one memorable glyph */
.init-ticks { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.init-ticks > span:first-child { display: flex; gap: 3px; flex-wrap: wrap; }
.init-ticks i { display: block; width: 9px; height: 12px; border-radius: 2px; background: rgba(126, 159, 218, .18); }
.init-ticks i.is-done { background: var(--accent-bright); }
.init-ticks .mono { color: var(--text-mute); }

/* Items */
.init-items { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.init-items.is-drop-target { outline: 1px dashed var(--accent-border); outline-offset: 3px; border-radius: var(--radius-sm); }
.init-item { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 4px 4px 2px; border-radius: var(--radius-sm); font-size: 13px; }
.init-item:hover { background: var(--surface-soft); }
.init-item.is-done .init-item-body { color: var(--text-mute); text-decoration: line-through; }
.init-item.is-dragging { opacity: .4; }
.init-item input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--accent-blue); cursor: pointer; }
.init-item-body { flex: 1; min-width: 0; overflow-wrap: anywhere; cursor: text; }
.init-item-delete { flex: none; width: 28px; height: 28px; border: 0; border-radius: 999px; background: transparent; color: var(--text-mute); font: inherit; font-size: 16px; cursor: pointer; }
.init-item-delete:hover, .init-item-delete:focus-visible { color: var(--red); background: var(--surface-soft-hover); }
.init-item-handle { flex: none; color: var(--text-mute); font-size: 11px; letter-spacing: -2px; cursor: grab; padding: 0 4px; }
.init-item-add {
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.init-item-add:focus { border-style: solid; outline: none; border-color: var(--accent-border); }
.init-card-app { margin-top: 10px; }
.init-card-app label { display: inline-flex; align-items: center; gap: 8px; }
.init-card-app select {
  padding: 5px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}
.init-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.init-card-foot-actions { display: flex; gap: 6px; }

/* Card controls */
.init-more, .init-collapse {
  flex: none;
  width: 34px;
  height: 34px;
  margin: -6px -6px -6px 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-mute);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
.init-collapse { margin: 0; font-size: 13px; }
.init-more:hover, .init-more:focus-visible, .init-collapse:hover, .init-collapse:focus-visible { color: var(--text); background: var(--surface-soft-hover); }
.init-menu {
  position: absolute;
  top: 40px;
  right: 8px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.init-menu button { min-height: 36px; padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.init-menu button:hover, .init-menu button:focus-visible { background: var(--surface-hover); }

.init-next-text.init-inline-editor { flex: 1; }

/* Empty focus slot: a quiet invitation */

.init-slot:hover, .init-slot:focus-visible { color: var(--text-dim); border-color: var(--accent-border); }

/* Swap picker: inline in the Focus column, no dialog */
.init-swap { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--accent-border); border-radius: var(--radius); background: var(--accent-wash); }
.init-swap-head { font-size: 13px; margin-bottom: 4px; }
.init-swap-choice { display: flex; justify-content: space-between; gap: 8px; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-raised); color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.init-swap-choice:hover, .init-swap-choice:focus-visible { border-color: var(--accent-border); background: var(--surface-hover); }

.init-empty-all { margin-top: 18px; padding: 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--text-dim); font-size: 13px; }
.init-quick-add { display: flex; gap: 8px; margin-top: 8px; }
.init-quick-add input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-raised); color: var(--text); font: inherit; }

/* Keyboard help */
.init-help { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 16px; background: rgba(4, 5, 7, .6); }
.init-help-sheet { width: min(420px, 100%); padding: 16px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.init-help-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.init-help-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: 13px; }
.init-help-list dt { text-align: right; }
.init-help-list dd { margin: 0; color: var(--text-dim); }
.init-help-list kbd { display: inline-block; min-width: 20px; padding: 1px 5px; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--bg-raised); font-family: var(--mono); font-size: 11px; text-align: center; }

@media (max-width: 1050px) {
  .init-board { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .init-column-someday { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .init-segments { display: flex; gap: 4px; margin: 0 0 12px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
  .init-segment { flex: 1; min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--text-dim); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
  .init-segment.is-active { background: var(--accent-wash); color: var(--text); }
  .init-segment .mono { margin-left: 4px; color: var(--text-mute); }
  .init-board { display: block; }
  .init-column { display: none; }
  .init-board[data-mobile-tier="focus"] .init-column-focus,
  .init-board[data-mobile-tier="next"] .init-column-next,
  .init-board[data-mobile-tier="someday"] .init-column-someday { display: block; }
  .init-column-head { display: none; }
  .init-column-focus { padding: 12px; }
  .init-card { padding: 12px 10px 12px 12px; }
  .init-card-someday { min-height: 44px; }
  .init-card-focus .init-card-title { font-size: 16px; }
  .init-head-actions .init-help-btn { display: none; }
  .init-help-list { grid-template-columns: auto 1fr; }
}

@media (max-width: 390px) {
  .init-head-actions { width: 100%; }
  .init-head-actions .btn { flex: 1; justify-content: center; }
  .init-card-foot-actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .init-card, .init-next-done { transition: none; }
}

/* Rendered model output: escaped first, a small Markdown subset after. */
.rich { white-space: normal; }
.rich p { margin: 0 0 10px; }
.rich p:last-child { margin-bottom: 0; }
.rich ul, .rich ol { margin: 0 0 10px 18px; padding: 0; }
.rich li { margin: 4px 0; }
.rich li::marker { color: var(--text-mute); }
.rich h3, .rich h4, .rich h5 { margin: 12px 0 6px; font-size: 14px; }
.rich code { font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; }
.rich pre { margin: 0 0 10px; padding: 10px; background: var(--surface-2, rgba(255,255,255,.04)); border-radius: 8px; overflow-x: auto; }
.rich .table-scroll { margin: 0 0 10px; overflow-x: auto; }
.rich table.rich-table { font-size: 13px; }
.rich table.rich-table th, .rich table.rich-table td { padding: 4px 10px; text-align: left; vertical-align: top; }

/* Conversation controls remain usable while background work progresses. */
.voice-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.voice-controls button, .voice-listen { min-height: 36px; }
.voice-controls:has(.voice-status:empty):not(:has(button)) { display: none; }
.voice-status:empty { display: none; }
.voice-slot { display: contents; }
.voice-listen { margin-top: 8px; }
.ask-composer { position: sticky; bottom: 0; background: var(--bg, #101116); z-index: 3; padding: 12px; }
@media (max-width: 720px) { .ask-composer { bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)); } }


/* ============================================================================
   10. Notes — a writing surface, not a database page
   ============================================================================ */

.notes { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; min-height: calc(100vh - 40px); }
.notes-side { border-right: 1px solid var(--border); padding-right: 16px; min-width: 0; }
.notes-side-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.notes-search { flex: 1; min-width: 0; }
.notes-search input { width: 100%; }
.notes-filters { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 10px; color: var(--text-mute); }
.notes-filters a { color: var(--text-mute); text-decoration: none; }
.notes-filters a:hover { color: var(--text); }
.notes-filters .is-active { color: var(--accent-text); }
.notes-filters .mono { font-size: 10px; opacity: .8; }
.notes-list { display: flex; flex-direction: column; max-height: calc(100vh - 150px); overflow-y: auto; }
.notes-row { display: block; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: inherit; border: 1px solid transparent; }
.notes-row:hover { background: var(--surface-soft-hover); }
.notes-row.is-current { background: var(--accent-wash); border-color: var(--accent-border); }
.notes-row.is-superseded strong { color: var(--text-mute); }
.notes-row-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.notes-row-top strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.notes-row-top .mono { font-size: 10px; flex-shrink: 0; }
.notes-row-sub { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-pin { color: var(--yellow); margin-right: 4px; font-size: 11px; }
.notes-kind { display: inline-block; margin-right: 6px; padding: 0 5px; border: 1px solid var(--border); border-radius: 999px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); }
.notes-kind[data-kind="wiki"] { color: var(--accent-text); border-color: var(--accent-border); }
.notes-kind[data-kind="superseded"] { color: var(--yellow); }
.notes-kind[data-kind="archived"] { color: var(--text-mute); border-style: dashed; }
.notes-kind[data-kind="excluded"] { color: var(--red); border-color: rgba(240, 96, 60, .38); }
/* What it is · where it came from · when — one quiet line under the title. */
.notes-row-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin-top: 3px; }
.notes-row-meta > span:not(.notes-kind)::after { content: "·"; margin-left: 8px; opacity: .5; }
.notes-row-meta > span:last-child::after { content: none; }
.notes-row.is-archived strong { color: var(--text-dim); }
.notes-subfilters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.notes-subfilters .chip { text-decoration: none; }
.notes-subfilters .chip.is-on { color: var(--accent-text); border-color: var(--accent-border); }
.notes-list-empty { padding: 14px 10px; }
/* Import status, above the library on every width. The list scrolls (and on a
   phone does not even stop), so anything placed after it is a status the user
   has to go looking for — which is the opposite of a status. */
.notes-imports { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); }
.notes-import-row { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; text-decoration: none; color: inherit; }
.notes-import-main { display: flex; flex-direction: column; min-width: 0; }
.notes-import-main strong { font-size: 12px; font-weight: 600; }
.notes-main { min-width: 0; padding-left: 24px; }
.notes-empty { max-width: 620px; padding: 32px 0; }
.notes-empty h1 { font-size: 22px; margin: 6px 0 10px; }
.notes-empty kbd { font-family: var(--mono); padding: 1px 5px; border: 1px solid var(--border); border-radius: 4px; font-size: 11px; }
.notes-empty-recent { margin-top: 24px; }
.notes-empty-row { display: block; padding: 8px 0; border-bottom: 1px solid var(--hairline); text-decoration: none; color: inherit; }
.notes-empty-row strong { display: block; font-size: 13px; }


.note-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.note-bar-right { display: flex; align-items: center; gap: 4px; }
.note-back { display: none; }
@media (max-width: 720px) { .note-back { display: none !important; } }
.note-status[data-tone="error"] { color: var(--red); }
.note-status[data-tone="ok"] { color: var(--text-mute); }
.note-pin.is-on { color: var(--yellow); }
.note-menu { position: relative; }
.note-menu summary { list-style: none; cursor: pointer; }
.note-menu summary::-webkit-details-marker { display: none; }
.note-menu-sheet { position: absolute; right: 0; top: 34px; z-index: 20; display: grid; gap: 8px; min-width: 200px; padding: 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
.note-menu-sheet .btn { justify-content: flex-start; }
.note-notice { margin: 4px 0 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; color: var(--text-dim); }
.note-title { width: 100%; border: 0; background: transparent; color: var(--text); font-family: var(--sans); font-size: 26px; font-weight: 600; letter-spacing: -.01em; padding: 6px 0; outline: none; }
.note-title::placeholder { color: var(--text-mute); }
.note-body-wrap { position: relative; }
.note-body { width: 100%; min-height: 280px; border: 0; background: transparent; color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.7; padding: 6px 0; resize: none; outline: none; overflow: hidden; }
.note-body::placeholder { color: var(--text-mute); }
.note-preview { font-size: 15px; line-height: 1.7; padding: 6px 0; min-height: 200px; }
.note-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 0; border-top: 1px solid var(--hairline); }
.note-meta [data-status="failed"] { color: var(--red); }
.note-meta [data-status="pending"] { color: var(--text-mute); font-style: italic; }
.note-section { padding: 12px 0; border-top: 1px solid var(--hairline); }
.note-section > summary { cursor: pointer; }
.note-related { display: grid; gap: 14px; }
.note-related-group .field-label { margin-bottom: 6px; }
.note-edge { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.note-edge a { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-edge.is-inferred { border-style: dashed; }
.note-edge-kind { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: #9d92ff; margin-right: 2px; }
.note-edge-rel { color: var(--text-mute); font-size: 10px; }
.note-edge-x { border: 0; background: transparent; color: var(--text-mute); cursor: pointer; padding: 0 2px; font-size: 12px; line-height: 1; }
.note-edge-x:hover { color: var(--red); }
.note-suggestions { display: grid; gap: 6px; }
.note-suggestion { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: 8px; }
.note-suggestion-main { min-width: 0; }
.note-suggestion-main a { color: inherit; text-decoration: none; }
.note-suggestion-actions { display: flex; gap: 4px; flex-shrink: 0; }
.notes-similar { display: flex; flex-direction: column; }
.notes-similar-row { display: flex; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--hairline); color: inherit; text-decoration: none; }
.notes-similar-row:last-child { border-bottom: 0; }
.notes-similar-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.note-chip-add { cursor: pointer; font: inherit; }
.note-versions summary { cursor: pointer; }
.note-version { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.note-version-body { margin-top: 8px; max-height: 320px; overflow: auto; }

/* Imports */

.imports-drop.is-over { border-color: var(--accent-bright); background: var(--accent-wash); }
.imports-drop input[type="file"] { display: none; }
.imports-paste textarea { width: 100%; min-height: 120px; }
.imports-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.imports-table th, .imports-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.imports-table th { color: var(--text-mute); font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.imports-status[data-status="failed"] { color: var(--red); }
.imports-status[data-status="queued"] { color: var(--yellow); }
.imports-status[data-status="indexed"] { color: var(--green); }
.imports-status[data-status="duplicate"] { color: var(--text-mute); }
.imports-progress { height: 4px; border-radius: 2px; background: var(--surface-hover); overflow: hidden; }
.imports-progress > span { display: block; height: 100%; background: var(--brand-gradient); }

/* Global search page */

.search-hit-top { display: flex; gap: 10px; align-items: baseline; }
.search-hit-top strong { font-size: 14px; }
.search-hit-why { margin-top: 4px; color: var(--text-mute); font-size: 11px; }
.search-hit-snippet { margin-top: 4px; color: var(--text-dim); font-size: 12px; line-height: 1.5; }
.search-hit .is-warn { color: var(--yellow); }

@media (max-width: 960px) {
  .notes { grid-template-columns: 240px minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .notes { display: block; }
  .notes-side { border-right: 0; padding-right: 0; }
  .notes.has-note .notes-side { display: none; }
  .notes-main { padding-left: 0; }
  .notes:not(.has-note) .notes-main { display: none; }
  /* Knowledge is the exception: its main pane carries the things Cerebro
     noticed, so on a phone it sits below the list rather than disappearing.
     Import status is not down here — it is above the list, where somebody
     checking on an import can actually see it. */
  .notes.is-knowledge:not(.has-note) .notes-main { display: block; }
  .notes.is-knowledge .notes-empty { padding-top: 20px; border-top: 1px solid var(--border); }
  .notes-list { max-height: none; }
  /* iOS moves the visual viewport, not the layout viewport, so the bottom bar
     and any fixed composer have to be told where the keyboard actually is.
     daily.js sets --keyboard-inset and --visible-height. */
  .edit-sheet { width: 100%; max-width: none; border-radius: 20px 20px 0 0; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); max-height: var(--visible-height, 90dvh); overflow-y: auto; }
  body.keyboard-open .mobile-nav { display: none; }
  body.keyboard-open .ask-composer { bottom: var(--keyboard-inset, 0px); }
  body.keyboard-open .edit-backdrop.is-open { align-items: flex-start; padding-top: env(safe-area-inset-top); }
  body.keyboard-open .command { max-height: calc(var(--visible-height, 100dvh) - 24px); overflow-y: auto; }
  /* Moving a note is the point of the scratchpad, so on a phone the two
     moves get a row of their own rather than fighting the save state and the
     overflow menu for what is left of a 320px bar. */
  .note-bar-right { flex-wrap: wrap; row-gap: 8px; }
  .note-moves { order: 2; display: flex; gap: 8px; width: 100%; }
  .note-moves .btn { flex: 1; justify-content: center; }
  .note-back { display: inline-flex; }
  .note-title { font-size: 22px; }
  .note-body, .note-preview { font-size: 16px; }
  .note-suggestion { flex-direction: column; align-items: stretch; }
}

/* Initiative workspace */
.ws { max-width: 1180px; }
.ws-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.ws-head-main { min-width: 0; }
.ws-title { margin: 6px 0 6px; font-size: 24px; letter-spacing: -.01em; }
.ws-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.ws-meta .chip[data-tier="focus"] { color: var(--accent-text); border-color: var(--accent-border); }
.ws-head-actions { display: flex; gap: 6px; flex-shrink: 0; }

.ws-col { min-width: 0; }
.ws-section { padding: 14px 0 18px; border-top: 1px solid var(--hairline); }
.ws-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.ws-section-head h2 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.ws-facts { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; margin: 0; }
.ws-facts dt { color: var(--text-mute); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
.ws-facts dd { margin: 0; font-size: 14px; line-height: 1.55; }
.ws-next { font-weight: 500; }
.ws-next.is-missing { color: var(--yellow); }
.ws-items, .ws-list, .ws-activity { list-style: none; margin: 0; padding: 0; }
.ws-items li, .ws-list li { padding: 6px 0; border-bottom: 1px solid var(--hairline); font-size: 13px; line-height: 1.5; }
.ws-items li.is-done, .ws-list li.is-done { color: var(--text-mute); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
.ws-list li.is-inferred a { border-bottom: 1px dashed var(--border-strong); }
.ws-list a { color: inherit; text-decoration: none; }
.ws-tick { display: inline-block; width: 18px; color: var(--text-mute); }
.ws-items li.is-done .ws-tick { color: var(--green); }
.ws-group { margin-top: 12px; }
.ws-group .field-label { margin-bottom: 4px; }
.ws-activity li { padding: 5px 0; font-size: 12px; border-bottom: 1px solid var(--hairline); line-height: 1.5; }
.ws-activity-kind { display: inline-block; margin: 0 6px; padding: 0 5px; border: 1px solid var(--border); border-radius: 999px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); }
.ws-link-form input[type="search"] { width: 100%; }
.init-open { margin-left: auto; }
@media (max-width: 960px) {
  .ws-grid { grid-template-columns: 1fr; }
  .ws-head { flex-direction: column; }
}


/* ============================================================================
   11. Redesign shell — one top bar, five bottom destinations, one dialog
   primitive, shared page furniture. Later in the cascade on purpose: these
   are the rules that win.
   ============================================================================ */

/* Rail: global actions above the destinations. */
.rail-actions { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px; }
.rail-actions .rail-link { color: var(--text-dim); }
.shell.is-rail-collapsed .rail-actions .rail-link { justify-content: center; }

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 120;
  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 18px 48px rgba(0,0,0,.5);
  transform: translateX(-50%);
}
.toast[data-tone="error"] { border-color: rgba(240, 96, 60, .45); }
.toast[data-tone="ok"] { border-color: rgba(63, 185, 80, .4); }

/* Dialogs: the page behind is inert and does not scroll. */
body.dialog-open { overflow: hidden; }
.command-bar { display: flex; align-items: center; gap: 8px; }
.command-bar .command-input { flex: 1; min-width: 0; }
.command-close {
  flex: none;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.command-close:hover { border-color: var(--border-strong); color: var(--text); }
.quick-capture-close {
  /* merged from 2 rules that both set this */
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-mute);
  font: inherit;
  cursor: pointer;
  font-size: 12px;
  min-height: 36px;
}
.quick-capture-reply .capture-reply { margin-top: 12px; }

/* Screen-reader-only text, available everywhere (was scoped to the board). */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hidden until focused, then a real control in the top-left corner: it moves
   into the page rather than staying screen-reader-only, because somebody
   tabbing needs to see where the focus went. */
.skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
  transition: top .12s ease;
}
.skip-link:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
/* The skip link's target takes focus so the next Tab continues in the page;
   a ring around the whole content area would read as a rendering fault. */
.main:focus { outline: none; }

/* Focus: never removed, only restyled. */
.note-title:focus-visible, .note-body:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 4px; border-radius: 4px; }

/* Shared page furniture */
.page-head h1 { margin: 0; }
.page-head .sub { margin-top: 4px; }
.view-tabs { display: flex; gap: 4px; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.view-tabs::-webkit-scrollbar { display: none; }
.view-tabs a, .view-tabs button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.view-tabs a:hover, .view-tabs button:hover { background: var(--surface-hover); color: var(--text); }
.view-tabs .is-active { background: var(--surface-hover); color: var(--text); border-color: var(--border); }
.view-tabs .mono { font-size: 11px; color: var(--text-mute); }
.view-pane[hidden] { display: none; }

.row-list { display: flex; flex-direction: column; }
.row-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
  color: inherit;
  text-decoration: none;
}
.row-item:last-child { border-bottom: 0; }
.row-item-main { flex: 1; min-width: 0; }
.row-item-main strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; }
.row-item-main > span { display: block; margin-top: 2px; color: var(--text-dim); font-size: 12px; line-height: 1.45; }
.row-item-main .chip-row { display: flex; }
.row-item-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--text-mute); font-size: 12px; }
.row-item-actions { flex: none; display: flex; gap: 6px; align-items: center; }
a.row-item:hover .row-item-main strong { color: var(--accent-text); }

.state-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.state-chip[data-tone="ok"] { color: var(--green); border-color: rgba(63, 185, 80, .35); }
.state-chip[data-tone="warn"] { color: var(--yellow); border-color: rgba(214, 160, 23, .38); }
.state-chip[data-tone="bad"] { color: var(--red); border-color: rgba(240, 96, 60, .38); }
.state-chip[data-tone="active"] { color: var(--accent-text); border-color: var(--accent-border); }

.more-menu { position: relative; }
.more-menu > summary { list-style: none; cursor: pointer; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu-sheet { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; gap: 4px; min-width: 200px; padding: 8px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
.more-menu-sheet .btn, .more-menu-sheet form { display: flex; width: 100%; }
.more-menu-sheet .btn { justify-content: flex-start; width: 100%; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.table-wrap > table { min-width: 560px; }

.section-count { margin-left: 6px; color: var(--text-mute); font-family: var(--mono); font-size: 11px; }
/* "Work →", "All meetings →": a link that ends a section is a control people
   tap, not prose. 44px tall so a thumb finds it, with the padding pulled back
   on the sides so it still reads as a quiet link rather than a button. */
.view-all {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 2px;
  color: var(--text-dim); font-size: 12px; text-decoration: none;
}
.view-all:hover { color: var(--text); }

/* Run outcome: one vocabulary everywhere */
.run-outcome { display: inline-flex; align-items: center; gap: 6px; }
.run-budget { display: flex; align-items: center; gap: 8px; margin: 8px 0; color: var(--text-mute); font-size: 11px; }
.run-budget .run-bar { flex: 1; margin: 0; }

/* Mobile top bar and the rest of the phone shell */
.mobile-top { display: none; }
.mobile-back { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-left: -8px; border-radius: 8px; color: var(--text-dim); font-size: 18px; text-decoration: none; }
.mobile-back:hover { color: var(--text); }

@media (max-width: 720px) {
  .mobile-brandbar { display: none; }
  .mobile-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: calc(var(--mobile-top-h) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 8px 0 16px;
    border-bottom: 1px solid rgba(126, 159, 218, .12);
    background: linear-gradient(180deg, rgba(9, 14, 25, .96), rgba(7, 12, 21, .92));
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .mobile-top-main { display: flex; align-items: center; gap: 4px; min-width: 0; }
  .mobile-top-title { overflow: hidden; color: var(--text); font-size: var(--title-mobile); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-top-actions { display: flex; flex: none; gap: 2px; }
  .mobile-top-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-dim);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-top-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-top-btn:active { background: var(--surface-hover); color: var(--text); }
  body.dialog-open .mobile-top { z-index: 10; }

  /* Five controls, one row, 44pt targets. */
  .mobile-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mobile-nav-item { min-height: 50px; }
  .mobile-nav-item > span:last-child { font-size: 11px; }

  /* Section views: a short tab row that scrolls, never wraps above the title. */
  .subnav { flex-wrap: nowrap; gap: 2px; margin: -2px -16px 14px; padding: 0 12px 8px; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav-link { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 14px; white-space: nowrap; }
  .subnav-aside { margin-left: auto; }

  /* The More sheet is a list of destinations. */
  .mobile-menu-head h2 { font-size: 17px; }
  .mobile-menu-list { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; }
  .mobile-menu-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: rgba(83, 119, 180, .045);
    color: var(--text);
    text-decoration: none;
    touch-action: manipulation;
  }
  .mobile-menu-row svg { width: 22px; height: 22px; flex: none; fill: none; stroke: #8bb5ff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-menu-row span { min-width: 0; }
  .mobile-menu-row strong, .mobile-menu-row small { display: block; }
  .mobile-menu-row strong { font-size: 15px; font-weight: 600; }
  .mobile-menu-row small { margin-top: 1px; color: var(--text-mute); font-size: 12px; }
  .mobile-menu-row.is-active { border-color: rgba(72, 128, 255, .28); background: linear-gradient(120deg, rgba(42, 168, 255, .09), rgba(85, 74, 255, .13)); }
  .mobile-menu-footer a, .mobile-menu-footer button { min-height: 44px; font-size: 13px; }

  /* Search and capture sheets fill the phone width and sit under the keyboard-safe top. */
  .command-backdrop.is-open { align-items: flex-start; padding-top: calc(12px + env(safe-area-inset-top)); }
  .command { width: calc(100vw - 20px); }

  /* Touch targets that the .btn rule did not cover. */
  .notes-filters a, .notes-filters span, .view-tabs a { min-height: 40px; display: inline-flex; align-items: center; }
  .note-edge-x { min-width: 32px; min-height: 32px; }
  .capture-mode, .init-segment, .select-state, .chip.note-chip-add { min-height: 40px; }
  .row-item { padding: 12px 0; }
  .row-item-actions .btn { min-height: 40px; }

  /* Reading and editing text is 16px; labels can be smaller, never essentials. */
  .signal-card p, .row-item-main span { font-size: 13px; }
  /* The title stays the largest thing in the card at every width. */
  .proposal-card > strong { font-size: 15px; }
  .proposal-card > p { font-size: 13.5px; }
  .proposal-meta, .proposal-reason { font-size: 12px; }
  /* The top bar already names this page; the h1 and its strapline repeated it. */
  .today-title, .today-strapline { display: none; }
  .today-head { margin-bottom: 14px; }
  .ask-turn-body, .meeting-note, .rich, .note-body, .note-preview { font-size: 16px; }

  /* The note title keeps its hierarchy above the 16px no-zoom floor: this rule
     is more specific than the input[type="text"] one and carries the same
     priority, so the intended size wins while zoom stays off. */
  .note .note-title[type="text"] { font-size: 22px !important; }

  .page-head { gap: 8px; margin-bottom: 16px; }
  .page-head .sub { font-size: 13px; }
  h1 { font-size: 21px; }
}

/* Note editor: writing first, context beside it on a wide screen. */
.note {
  /* merged from 2 rules that both set this */
  max-width: none;
}
.note-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.note-main { min-width: 0; max-width: 780px; }
.note-side { min-width: 0; }
.note-tools { display: flex; align-items: center; gap: 4px; margin: 2px 0 4px; }
.note-tool { min-width: 32px; min-height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text-dim); font: inherit; font-size: 12px; cursor: pointer; }
.note-tool:hover { color: var(--text); border-color: var(--border-strong); }
.note-tools-hint { margin-left: 6px; }
.note-details > summary { cursor: pointer; }
.note-subsection { margin-top: 10px; }
.note-related-group > summary { list-style: none; }
.note-related-group > summary::-webkit-details-marker { display: none; }
@media (min-width: 1051px) {
  .note-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .note-side .note-section { border-top: 0; padding-top: 4px; }
}
@media (max-width: 720px) {
  .note-tool { min-width: 40px; min-height: 40px; }
  .note-tools-hint { display: none; }
}

/* Today: composer options fold away; the head carries the two small links. */
.today-head {
  /* merged from 2 rules that both set this */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.today-head-links { display: flex; gap: 14px; align-items: center; }
.today-head-links .mono { margin-left: 3px; color: var(--accent-text); }
.reply-change { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.reply-change-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.reply-change .chip { cursor: pointer; font: inherit; font-size: 11px; }
.reply-change .chip:disabled { opacity: .5; cursor: not-allowed; }
.reply-changed { color: var(--text); }
.calm-state.is-unknown .calm-mark { color: var(--yellow); }
@media (max-width: 720px) {
  .today-head-links { width: 100%; }
}

/* Inbox queue rows */
.capture-row .row-item-main > strong { white-space: pre-wrap; font-weight: 500; }
.capture-row .capture-suggestion { margin-top: 8px; }
.capture-row .row-item-actions { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px) {
  .capture-row { flex-direction: column; }
  .capture-row .row-item-actions { justify-content: flex-start; width: 100%; }
}

/* Initiatives: creation is a panel, not a hidden state */
.init-new { margin: 0 0 16px; padding: 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.init-new-form { display: grid; gap: 10px; }
.init-new-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.init-new-actions .field-narrow { min-width: 140px; }
.init-review-line {
  /* merged from 2 rules that both set this */
  color: var(--text-dim);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 14px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.init-slot {
  /* merged from 2 rules that both set this */
  display: flex;
  place-items: center;
  min-height: 64px;
  padding: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-mute);
  font-size: 13px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.init-slot-picker .init-quick-add { margin-top: 8px; }
a.init-card-title { color: inherit; text-decoration: none; }
a.init-card-title:hover { color: var(--accent-text); }
@media (max-width: 720px) {
  .init-new-actions .btn { flex: 1; justify-content: center; }
}

/* Workspace: editable in place */
.ws-title[data-ws-edit] { cursor: text; border-radius: 6px; }
.ws-title[data-ws-edit]:hover { background: var(--surface-soft-hover); }
.note-moves { display: inline-flex; gap: 8px; }
.ws-outcome { max-width: 720px; line-height: 1.55; cursor: text; border-radius: 6px; }
.ws-outcome:hover { background: var(--surface-soft-hover); }
.ws-tier select { padding: 2px 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; }
.ws-next-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ws-next[data-ws-edit] { flex: 1; min-width: 0; font-size: 16px; padding: 6px 8px; margin-left: -8px; border-radius: 6px; cursor: text; }
.ws-next[data-ws-edit]:hover { background: var(--surface-soft-hover); }
.ws-item-label { display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.ws-item-label input { margin-top: 3px; width: 16px; height: 16px; }
.ws-item-body { cursor: text; }
.ws-items li { display: flex; align-items: flex-start; gap: 8px; }
.ws-items li .note-edge-x { margin-left: auto; opacity: .5; }
.ws-items li:hover .note-edge-x { opacity: 1; }
.ws-item-add { display: flex; gap: 6px; margin-top: 8px; }
.ws-item-add input { flex: 1; min-width: 0; }
.ws-tabs { display: none; }
.ws-grid {
  /* merged from 2 rules that both set this */
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
}
.ws-grid [data-ws-pane="activity"] { grid-column: 1 / -1; }
.init-inline-editor {
  /* merged from 2 rules that both set this */
  display: block;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  resize: vertical;
}
@media (max-width: 960px) {
  .ws-tabs { display: flex; }
  .ws-grid { grid-template-columns: 1fr; }
  .ws-grid [data-ws-pane="activity"] { grid-column: auto; }
}
@media (max-width: 720px) {
  .ws-head-actions { width: 100%; }
  .ws-items li { padding: 10px 0; }
  .ws-item-label input { width: 20px; height: 20px; }
}

/* Search page and link picker */
.search-form { display: flex; gap: 8px; max-width: 760px; }
.search-results { max-width: 760px; margin-top: 8px; }
.search-hit {
  /* merged from 2 rules that both set this */
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
  gap: 12px;
}
.search-hit-main { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.search-hit-link { flex: none; padding-top: 12px; }
.check-list { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; max-height: 260px; overflow: auto; }
.check-list legend { padding: 0 4px; }
.check-row { display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
.check-row input { width: 18px; height: 18px; }
.notes-list-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border-top: 1px solid var(--hairline); }
.notes-folders { margin: 0 0 10px; }
.notes-folders > summary { cursor: pointer; }
.link-button { border: 0; padding: 0; background: none; color: var(--accent-text); font: inherit; cursor: pointer; text-decoration: underline; }

/* Imports: rows, not tables */
.imports-drop {
  /* merged from 2 rules that both set this */
  display: grid;
  gap: 10px;
  padding: 26px;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  text-align: center;
  color: var(--text-dim);
  transition: border-color .12s, background .12s;
  cursor: default;
}
.imports-run { display: block; padding: 0; }
.imports-run-summary { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; cursor: pointer; list-style: none; }
.imports-run-summary::-webkit-details-marker { display: none; }
.imports-run-files { padding: 0 0 12px 8px; }
.imports-file { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; padding: 6px 0; border-top: 1px solid var(--hairline); font-size: 13px; }
.imports-file .imports-status { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.imports-file .small { grid-column: 2; }
.imports-file-name { overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .imports-run-summary { flex-direction: column; gap: 6px; }
}
@media (max-width: 720px) {
  .view-tabs a, .view-tabs button { min-height: 44px; }
}

.command-keys { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 12px 10px; border-top: 1px solid var(--hairline); }
@media (max-width: 720px) { .command-keys { display: none; } }
.triage-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.triage-feedback-note { flex: 1; min-width: 160px; }
.record-lead { margin: 0 0 12px; font-size: 15px; line-height: 1.55; }

/* Checks: rows with tap-to-expand history on a phone; the table on a desktop */
.checks-rows { display: none; }
.checks-row { display: block; padding: 0; }
.checks-row-summary { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; list-style: none; cursor: pointer; }
.checks-row-summary::-webkit-details-marker { display: none; }
.checks-row-summary .dot { margin-top: 6px; }
.checks-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; padding: 0 0 12px 22px; }
.checks-day { display: flex; align-items: center; gap: 6px; }
.checks-day .grid-cell { width: 10px; height: 10px; }
@media (max-width: 720px) {
  .checks-rows { display: block; }
  .checks-table { display: none; }
  .usage-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
}


/* ==========================================================================
   Polish pass: Settings on a phone, the calm Today, Portfolio rows, app cards
   ========================================================================== */

/* Settings pages: the compact section nav is a desktop convenience. On a
   phone the Overview's cards are the categories and Back to Settings is the
   way out, so the strip is not rendered as a control at all. */
@media (max-width: 720px) {
  .subnav-settings { display: none; }
}

/* Today's secondary region: everything informational, in one calm block
   below the decisions. Folded categories carry a count; empty ones vanish. */
.today-awareness { padding-top: 18px; border-top: 1px solid var(--border); }
.today-awareness .today-section-head h2 { color: var(--text-dim); font-size: 14px; }
.awareness-list { display: flex; flex-direction: column; gap: 6px; }
.awareness-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.awareness-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
  list-style: none;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.awareness-item > summary::-webkit-details-marker { display: none; }
.awareness-item > summary .awareness-title { display: inline-flex; align-items: center; gap: 8px; color: var(--text); white-space: nowrap; }
.awareness-item > summary .awareness-title::before { content: '▸'; color: var(--text-mute); font-size: 11px; }
.awareness-item[open] > summary .awareness-title::before { content: '▾'; }
.awareness-item > summary .section-count { margin-left: 0; }
.awareness-item > summary .awareness-aside { color: var(--text-mute); font-size: 12px; font-weight: 400; text-align: right; }
.awareness-body { padding: 0 14px 12px; }
.awareness-body .brief-list { margin: 0; }
.awareness-body .today-row {
  min-height: 44px; padding: 8px 0; }
.awareness-counts { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 14px 12px; }
.awareness-counts .elsewhere-item { min-height: 32px; }

/* Portfolio on a phone: the essential fields, vertically. The table remains
   the desktop record. */
.portfolio-rows { display: none; }
@media (max-width: 720px) {
  .portfolio-table { display: none; }
  .portfolio-rows { display: block; }
  .portfolio-rows .row-item-main strong { white-space: normal; }
  .portfolio-rows select { max-width: 100%; }
}

/* App cards on a phone: name and status, what needs attention, the current
   step and the business number. Telemetry waits for the app page. */
@media (max-width: 720px) {
  .card .card-secondary { display: none; }
}

/* A responsibility's advanced controls fold away in the creation form. */
.creation-disclosure.is-advanced { margin-top: 4px; }

/* Workspace header: the meaningful state on one line, passive metadata on a
   quieter second one. */
.ws-meta-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; color: var(--text-mute); font-size: 12px; }
.ws-meta-secondary .chip { min-height: 24px; font-size: 11px; }

/* Imports: preflight summary, cost choice, run detail; approval page. */
.imports-preflight { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-hover); font-size: 13px; display: grid; gap: 4px; }
.imports-cost { border: 1px solid var(--hairline); border-radius: 10px; padding: 8px 12px 10px; display: grid; gap: 4px; }
.imports-cost legend { padding: 0 4px; }
.imports-run-detail { padding: 6px 0 4px; }
.imports-issues { margin: 6px 0; padding-left: 18px; }
.imports-status[data-status="waiting_ocr"], .imports-status[data-status="retryable_error"] { color: var(--yellow); }
.imports-status[data-status="superseded"] { color: var(--text-mute); }
.kv-list { display: grid; gap: 6px; margin: 0; }
.kv-list > div { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 10px; }
.kv-list dt { color: var(--text-mute); font-size: 12px; }
.kv-list dd { margin: 0; font-size: 13px; }
.kv-list.compact dd { font-size: 12.5px; }
.approval-actions { display: grid; gap: 10px; }
.approval-actions .btn-block { width: 100%; }
.approval-actions .is-preselected { box-shadow: 0 0 0 3px var(--accent-wash); }
.approval-custom { display: grid; gap: 6px; }
.stat-strip { display: flex; flex-wrap: wrap; gap: 14px; }
.stat-strip .stat { display: grid; gap: 2px; }
.stat-strip .stat-label { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: .06em; }
.is-warn { color: var(--yellow); }
.connection-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.connection-watches { margin-top: 10px; display: grid; gap: 6px; }
@media (max-width: 640px) { .kv-list > div { grid-template-columns: 1fr; gap: 2px; } }


/* ============================================================================
   10. The assistant redesign — Cerebro, Work, Memory, Tools

   One shared vocabulary of surfaces so the three destinations and every
   detail page look like the same product: a hairline border, a raised
   surface, 10px radius, and no glow. Motion is 150–250ms and only ever
   communicates a real state change; `prefers-reduced-motion` removes it.
   ============================================================================ */

/* -- Cerebro: the conversation surface ------------------------------------ */

.cerebro-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  /* One reading column, whatever the window: the eye should not travel
     further for the box than for the answer. */
  max-width: 760px;
  margin-inline: auto;
  width: 100%;
}

.cerebro-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cerebro-head-main { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.cerebro-title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.cerebro-head-link { font-size: 12.5px; color: var(--text-dim); text-decoration: none; }
.cerebro-head-link:hover { color: var(--accent-text); }
.cerebro-head-actions { display: flex; align-items: center; gap: 6px; }

/* The compact updates entry: a count and a line, opening on demand. */
.updates-entry {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.updates-entry > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  min-height: 44px;
}
.updates-entry > summary::-webkit-details-marker { display: none; }
.updates-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-mute);
  flex: none;
}
.updates-dot[data-needs="1"] { background: var(--yellow); }
.updates-label { font-weight: 550; }
.updates-count {
  font-family: var(--mono);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--surface-hover);
  color: var(--text-dim);
}
.updates-line { margin-left: auto; text-align: right; }
.updates-body { padding: 0 12px 12px; display: grid; gap: 8px; }
.updates-list { display: grid; gap: 14px; }
.update-item { display: grid; gap: 5px; }
.update-row {
  display: grid; gap: 2px;
  padding: 9px 11px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  background: var(--surface-soft);
}
.update-row:hover { background: var(--surface-soft-hover); }
.update-row span { font-size: 12.5px; color: var(--text-dim); }

/* An update the user has seen stays listed and recedes. It is not hidden:
   "dealt with" and "gone" are different, and hiding it is how something comes
   back as a surprise. */
.update-item.is-read { opacity: .62; }
.update-item.is-read:hover,
.update-item.is-read:focus-within { opacity: 1; }
.updates-count.is-quiet { background: transparent; color: var(--text-mute); }
.updates-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.update-history > summary { cursor: pointer; padding: 2px 0; }
.update-history ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 2px; }

/* Starters: a few things worth knowing you can say. Empty history only. */
.starters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.starter {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.starter:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }
.starter-kind {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-mute);
}
.starter-dismiss {
  border: 0; background: none; color: var(--text-mute); font: inherit; font-size: 12px;
  cursor: pointer; padding: 6px 10px; min-height: 40px; min-width: 44px;
}

.cerebro-threads { margin-top: 6px; }
.cerebro-page .ask-hero { position: sticky; bottom: 0; }

/* -- Result cards: one component, every surface ---------------------------- */

.result-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  padding: 11px 13px;
  display: grid;
  gap: 6px;
}
.result-card[data-tone="warn"] { border-color: rgba(214, 160, 23, .34); }
.result-card[data-tone="done"] { background: var(--surface-soft); }
.result-top { display: flex; align-items: center; gap: 8px; }
.result-status {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--surface-hover);
  color: var(--text-dim);
  white-space: nowrap;
}
.result-status[data-tone="warn"] { background: rgba(214, 160, 23, .16); color: #f0c95a; }
.result-status[data-tone="done"] { background: rgba(63, 185, 80, .14); color: #77d487; }
.result-kind { margin-left: auto; }
.result-title {
  /* A row's title is the row's main control on a phone, so it gets a real
     target rather than a bare 21px line of text. */
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-weight: 550;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.result-title:hover { color: var(--accent-text); }
.result-meta { font-size: 12px; }
.result-detail { margin: 0; color: var(--text-dim); font-size: 12.5px; }
.result-flash {
  color: #77d487;
  animation: result-flash 220ms ease-out;
}
@keyframes result-flash { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
.result-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.result-details { margin-top: 2px; }
/* A Details disclosure on a card was an 18px line. It is a control. */
.result-details > summary,
.update-history > summary,
.sources-fold > summary {
  display: flex; align-items: center;
  min-height: 36px; padding: 4px 0;
  cursor: pointer;
}

/* -- Work ------------------------------------------------------------------ */

.work-views {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: 12px;
  scrollbar-width: none;
}
.work-views::-webkit-scrollbar { display: none; }
.work-view {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  min-height: 44px;
  border-radius: 18px;
  border: 1px solid transparent;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}
.work-view:hover { background: var(--surface-hover); color: var(--text); }
.work-view.is-active { background: var(--accent-wash); border-color: var(--accent-border); color: var(--text); }
.work-list { display: grid; gap: 8px; }

.notice {
  border: 1px solid rgba(214, 160, 23, .3);
  background: rgba(214, 160, 23, .07);
  border-radius: var(--radius);
  padding: 9px 12px;
  margin-bottom: 12px;
}

/* -- Memory ---------------------------------------------------------------- */

.memory-search { display: flex; gap: 6px; margin-bottom: 10px; }
.memory-search input[type="search"] { flex: 1; min-width: 0; }
.memory-types {
  display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; margin-bottom: 12px;
  scrollbar-width: none;
}
.memory-types::-webkit-scrollbar { display: none; }
.memory-type {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; min-height: 44px; border-radius: 18px;
  border: 1px solid transparent; color: var(--text-dim);
  text-decoration: none; font-size: 12.5px; white-space: nowrap;
}
.memory-type:hover { background: var(--surface-hover); color: var(--text); }
.memory-type.is-active { background: var(--accent-wash); border-color: var(--accent-border); color: var(--text); }

.memory-list { display: grid; gap: 2px; }
.memory-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-decoration: none; color: inherit;
}
.memory-row:hover { background: var(--surface-hover); border-color: var(--hairline); }
.memory-row-main { display: grid; gap: 3px; min-width: 0; flex: 1; }
.memory-row-sub { overflow-wrap: anywhere; }
.memory-snippet { color: var(--text-dim); overflow-wrap: anywhere; }
.memory-why { font-size: 11.5px; }
.memory-origin {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  padding: 1px 6px; border-radius: 4px; background: var(--surface-hover); color: var(--text-dim);
}
.memory-origin[data-origin="assistant"] { background: rgba(124, 60, 255, .16); color: #c3aaff; }
.memory-origin[data-origin="user"] { background: rgba(55, 135, 255, .14); color: var(--accent-text); }
.memory-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.chip-sm { font-size: 10.5px; min-height: 20px; padding: 1px 7px; }

/* -- Tools ----------------------------------------------------------------- */

.tool-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tool-card {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  text-decoration: none; color: inherit;
  transition: border-color 160ms ease, background 160ms ease;
}
.tool-card:hover { border-color: var(--border-strong); background: var(--surface); }
.tool-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--accent-bright); stroke-width: 1.5; }
.tool-body { display: grid; gap: 3px; min-width: 0; }
.tool-views { color: var(--text-mute); font-size: 11.5px; }
.tool-aside { margin-top: 22px; }
.tool-links { display: grid; gap: 2px; margin-top: 6px; }
.tool-links a {
  /* A row in a list of links is a control, not prose: 44px. */
  display: flex; align-items: center; min-height: 44px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text-dim); font-size: 13px;
}
.tool-links a:hover { background: var(--surface-hover); color: var(--text); }

/* -- Clarify: the one place the box asks -------------------------------- */

.clarify-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* -- Mobile ---------------------------------------------------------------- */

@media (max-width: 720px) {
  .cerebro-head { align-items: center; }
  .cerebro-title { font-size: 17px; }
  /* The composer is pinned above the bottom bar and clear of the home
     indicator. `sticky` cannot do this job here: its containing block is the
     thread region, so it could only ever rise to the top of that block and
     still ended up under the nav. Fixed is the honest answer, and the thread
     reserves exactly the composer's measured height below it (--composer-h,
     set by home.js) so nothing is ever hidden behind it. */
  .cerebro-page .ask-hero {
    position: fixed;
    left: 0;
    right: 0;
    /* The desktop card's 24px bottom margin, left on a fixed element, floated
       the composer 24px above the bottom bar with the thread scrolling through
       the gap. Pinned means pinned. */
    margin-bottom: 0;
    bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px));
    z-index: 4;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px) * 0);
    border-top: 1px solid var(--border);
    background: var(--bg-raised);
  }
  .cerebro-page { padding-bottom: calc(var(--composer-h, 132px) + 12px); }
  /* When the keyboard is up the bottom bar is out of the way, so the composer
     rides the keyboard instead of the nav. daily.js sets --keyboard-inset. */
  body.keyboard-open .cerebro-page .ask-hero {
    bottom: var(--keyboard-inset, 0px);
  }
  .updates-line { display: none; }
  .work-views, .memory-types { margin-inline: -4px; padding-inline: 4px; }
  /* Controls grow to a comfortable size but a single action does not
     become a full-width banner. Done / Tomorrow / Edit on a card are the
     controls a phone gets used for, so they take the full 44px. */
  .result-actions .btn { flex: 0 1 auto; min-width: 92px; min-height: 44px; }
  /* The title is the row's other control: tapping it opens the record. */
  .result-title { min-height: 44px; }
  /* A disclosure is a control too. Details, Sources and Lookups are opened
     with a thumb, and 36px of it was a line of text you had to aim at. */
  .result-details > summary,
  .update-history > summary,
  .sources-fold > summary,
  .creation-disclosure > summary { min-height: 44px; }
  .cerebro-head-link { display: inline-flex; align-items: center; min-height: 44px; }
  .voice-controls button, .voice-listen { min-height: 44px; }
  /* The starters only show on a fresh install, which is exactly when somebody
     is tapping them for the first time. */
  .starter, .starter-dismiss { min-height: 44px; }
  .tool-grid { grid-template-columns: 1fr; }
  /* One row: the box takes the space, the button takes what it needs. */
  .memory-search { flex-wrap: nowrap; }
  .memory-search .btn { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .starter, .tool-card, .result-flash { transition: none; animation: none; }
}


/* Every row in the More sheet's aside is a destination, so it is a target and
   not a line of text. */
.mobile-menu-aside a { display: flex; align-items: center; min-height: 40px; }
/* The memory row's title is inside a whole-row link, which is already large;
   the chips beside it are not, so they get a floor of their own. */
.memory-flags .chip { min-height: 24px; }


/* A chip you can tap is a control, so it gets a control's target. Chips that
   are only labels keep their compact height. */
a.chip, button.chip { min-height: 30px; }

/* The phone's top bar already names the page; a second identical heading is
   noise. A record's own name is never a repeat, so this is opt-in per page. */
@media (max-width: 720px) { .hide-on-phone { display: none; } }

/* An empty conversation.
   The line used to sit wherever the flow left it — after the updates entry,
   above a large dead gap, with the composer far below — so an empty home read
   as a page that had failed to load rather than one waiting for you. It is a
   deliberate block now: it takes the space between the header and the
   composer, centres in it, and carries the product's own mark, so the emptiness
   is composed rather than left over. Nothing here is a capability grid. */
.thread-empty {
  display: grid;
  gap: 10px;
  justify-items: center;
  align-content: end;
  text-align: center;
  /* Grows into the space above the composer and sits at the bottom of it, so
     the identity and the line are the last thing before the box rather than
     floating in the middle of a gap. */
  flex: 1 1 auto;
  padding: 18px 0 24px;
  color: var(--text-dim);
}
.thread-empty::before {
  content: "";
  width: 34px; height: 34px;
  border-radius: 11px;
  background: var(--brand-gradient);
  opacity: .8;
  box-shadow: var(--shadow-brand);
}
.thread-empty p { margin: 0; font-size: 15px; max-width: 30ch; }

/* The composer is the page's main control on a phone; it earns its space but
   does not take more than it needs. */
.cerebro-page .ask-hero form { padding: 10px; gap: 8px; }
/* `flex: 1` and a growing height are in direct conflict once the form wraps to
   a column: flex-basis 0 with shrink 1 squashes the box back to one line while
   its own height says three, so the draft renders clipped even though the
   height was set correctly. The height is the authority here. */
.cerebro-page .ask-hero textarea { min-height: 44px; flex: 1 1 auto; flex-shrink: 0; }
@media (max-width: 720px) {
  /* 160px is about five lines: enough that a real paragraph is visible while
     being typed, and short enough that the thread above it is not squeezed off
     the screen. Past it the box scrolls (see home.js autoGrow). */
  .cerebro-page .ask-hero textarea { min-height: 44px; max-height: 160px; }
  .cerebro-page .ask-hero form { padding: 8px; }
}

/* A conversation is read in a column, not across a 1600px monitor. The
   composer and the thread share the same measure so the eye does not travel
   further for the input than for the answer. */
@media (min-width: 721px) {
  .cerebro-page .ask-hero { max-width: 760px; }
}


/* A one-column form where each field owns its own row: label, control, then
   the sentence that explains it. The auto-fit grid packs two fields into one
   row on a wide screen, which reads as a form; a settings form that explains
   itself needs the explanation under the control, not beside it. */
.form-stack { display: grid; gap: 16px; }
.form-stack .field { display: grid; gap: 4px; }
.form-stack .form-actions { margin-top: 2px; }

/* Add task: a form, not a conversation. Somebody who knows exactly what they
   want should not have to phrase it as a request. */
.add-task { margin-bottom: 14px; }
.add-task > summary { display: inline-flex; align-items: center; cursor: pointer; list-style: none; }
.add-task > summary::-webkit-details-marker { display: none; }
.add-task[open] > summary { margin-bottom: 10px; }
.add-task form {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

/* A memory row that carries its own controls. The link stays a link; the
   buttons sit outside it, because a Forget button inside an anchor is a trap. */
.memory-entry { display: grid; gap: 6px; }
.memory-entry.has-problem { border-left: 2px solid var(--yellow); padding-left: 9px; }
.memory-problem { margin: 0; color: var(--yellow); }
.memory-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.memory-actions form { margin: 0; }
.memory-filename { overflow-wrap: anywhere; }

/* The current stage, in place of an indeterminate bar. A bar that slides for as
   long as the work takes is a picture of progress nobody is measuring; the step
   Cerebro is on is both more informative and true. The dot is the only thing
   that moves, it means "still going", and reduced motion stops it. */
.ask-stage { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); }
.ask-stage-dot {
  width: 7px; height: 7px; flex: none;
  border-radius: 50%; background: var(--accent-bright);
  animation: stage-pulse 1.6s ease-in-out infinite;
}
@keyframes stage-pulse {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1); }
}
.ask-working-stop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
  .ask-stage-dot { animation: none; opacity: 1; }
}

/* The thread region owns the space between the header and the composer, so an
   empty conversation can centre in it instead of leaving a gap below itself. */
.cerebro-page #ask-thread-region {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.cerebro-page #ask-thread-region > .ask-thread { flex: 0 0 auto; }

/* Capability inventory — one row per thing Cerebro can reach, with the
   evidence beside the claim. Whitespace and weight carry the hierarchy; the
   only border is the hairline between rows. */
.capability-inventory { margin: 0 0 24px; }
.capability-list {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.capability-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--hairline);
}
.capability-row:first-child { border-top: 0; }
.capability-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.capability-main strong { font-weight: 600; }
.capability-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.capability-row[data-state="failed"] .capability-main span:nth-of-type(2) { color: var(--red); }

/* Load more sits under the list, quiet, with the count beside it. */
.memory-more {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 0;
  flex-wrap: wrap;
}

/* Work: the lenses on Mine, and the three date groups. Quiet type, no boxes —
   the rows below them are the content. */
.work-lenses {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
@media (max-width: 720px) {
  /* One line that scrolls, like the view strip above it. Wrapping put a
     fourth lens on its own row and pushed the first task below the fold. */
  .work-lenses { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .work-lenses::-webkit-scrollbar { display: none; }
  .work-lens { white-space: nowrap; }
  /* The filter is one compact row, not a stacked label, field and button. */
  .work-initiative-filter { flex-direction: row; align-items: center; gap: 8px; }
  .work-initiative-filter .field { flex: 1 1 auto; min-width: 0; }
  .work-initiative-filter .field-label { display: none; }
}
.work-lens {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 13px;
  text-decoration: none;
}
.work-lens.is-active {
  background: var(--surface);
  color: var(--text);
}
.work-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.memory-elsewhere { margin: 24px 0 0; }

/* A note's assistant actions: one primary, three quiet. Filing is in ⋯. */
.note-assist {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.note-related-fold > summary {
  cursor: pointer;
  padding: 8px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ============================================================================
   The assistant emblem
   ==========================================================================*/
.emblem {
  display: inline-flex;
  width: 64px;
  height: 64px;
  flex: none;
}
.emblem svg { width: 100%; height: 100%; }
.emblem-core {
  transform-origin: 60px 60px;
  /* Listening sets --emblem-level from the real microphone level; with no
     level it stays exactly where it is rather than miming one. */
  transform: scale(calc(1 + (var(--emblem-level, 0) * .35)));
  transition: transform 90ms linear;
}
.emblem-orbit { transform-origin: 60px 60px; }
.emblem[data-state="working"] .emblem-orbit {
  animation: emblem-turn 5.2s linear infinite;
}
.emblem[data-state="working"] .emblem-core {
  animation: emblem-breathe 2.6s ease-in-out infinite;
}
.emblem[data-state="finished"] .emblem-core {
  animation: emblem-settle 180ms ease-out 1;
}
.emblem[data-state="failed"] .emblem-orbit,
.emblem[data-state="failed"] .emblem-core { animation: none; }
.emblem[data-state="failed"] .emblem-core { fill: var(--slate); opacity: .5; }
.emblem-sm { width: 28px; height: 28px; }

@keyframes emblem-turn { to { transform: rotate(360deg); } }
@keyframes emblem-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
@keyframes emblem-settle {
  0%   { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .emblem[data-state] .emblem-orbit,
  .emblem[data-state] .emblem-core { animation: none !important; }
  .emblem-core { transition: none; }
}

/* The empty home: the emblem, one question, and the composer under it. */
.cerebro-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 0 8px;
  text-align: center;
}
.cerebro-empty h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.01em;
}
@media (max-width: 720px) {
  .cerebro-empty { padding: 16px 0 4px; }
  .cerebro-empty h2 { font-size: 22px; }
}

/* History: a drawer over the thread, searchable, never a column that pushes
   the conversation sideways. */
.thread-search {
  width: 100%;
  margin: 8px 0 4px;
  min-height: 44px;
}
.thread-group-head {
  padding: 10px 2px 4px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11px;
}
.ask-threads-foot {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding-top: 8px;
}

/* Jump to latest: only while the reader has scrolled away. */
.jump-latest {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--composer-h, 96px) + 16px);
  z-index: 6;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
  box-shadow: var(--shadow);
  cursor: pointer;
}
@media (max-width: 720px) {
  .jump-latest { bottom: calc(var(--composer-h, 96px) + var(--mobile-nav-h) + 12px); }
}

/* A date change on a card: the field and its Save, inline with the buttons. */
.result-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.result-date input[type="date"] {
  min-height: 36px;
  padding: 4px 8px;
  font-size: 13px;
}

/* An editable draft: the text is the control, not a preview beside one. */
.draft-body {
  width: 100%;
  min-height: 140px;
  font-size: 13px;
  line-height: 1.55;
}
.draft-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* The working card leads with the emblem: the same mark, moving, at the size
   of a line of text. */
.ask-working-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Setup: five rows, the next one emphasised, nothing shouting about the rest. */
.setup-steps {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.setup-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--hairline);
}
.setup-step:first-child { border-top: 0; }
.setup-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text-dim);
  font-size: 13px;
}
.setup-step.is-done .setup-mark { background: var(--accent-wash); color: var(--accent-text); }
.setup-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.setup-side { flex: none; display: flex; align-items: center; }


/* ============================================================================
   Phone floors for the controls added since §8
   ----------------------------------------------------------------------------
   The 44px rule belongs in a phone media query, never on the desktop rule it
   would otherwise inflate — and it has to come *after* the component's own
   rule or the cascade quietly keeps the smaller number. Each was measured
   under the floor by tests/mobile.mjs: 32, 36, 34, 32 and 40 pixels.

   Two of them the walk had been stepping over. Attach is a label wrapping a
   hidden input, so the label *is* the target and one glyph of padding made it
   32 wide beside a 44-tall Send; the override chips sit inside a closed
   disclosure, which is not on screen until somebody opens it.
   ==========================================================================*/
@media (max-width: 720px) {
  .work-lens { min-height: 44px; }
  .result-date input[type="date"] { min-height: 44px; }
  .file-chip-btn { min-width: 44px; min-height: 44px; }
  .composer-attach { min-width: 44px; min-height: 44px; }
  .capture-mode { min-width: 44px; min-height: 44px; }
  .ask-options .more-menu-sheet input { min-height: 44px; }
  /* A step's action is as wide as its own words ("Set your name and time
     zone"), and flex: none let it take the row — squeezing the step's title
     into a column one word wide. On a phone the action goes under the text. */
  .setup-step { flex-wrap: wrap; }
  .setup-side { width: 100%; padding-left: 38px; }
  /* Same fault, same fix: a state chip plus Test plus Open is wider than the
     room a phone leaves beside a name, and a row that will not wrap spends
     its width on the controls and wraps the name one word per line. */
  .capability-row { flex-wrap: wrap; }
  .capability-side { width: 100%; justify-content: flex-start; }
  /* Opening History scrolls the drawer to the top of the viewport; the phone
     bar sits over that, so keep its own height clear of the drawer's head. */
  .cerebro-threads { scroll-margin-top: calc(var(--mobile-top-h) + 8px + env(safe-area-inset-top)); }
  /* An overflow sheet is anchored to its trigger's right edge, which is
     correct when the trigger is on the right and puts the sheet off the left
     of a phone when it is not — the note editor's "…" sits in a left-aligned
     toolbar, and the sheet landed 1px from the screen edge. Give the sheet
     the page's own gutter instead of the trigger's edge. */
  .more-menu:not(.ask-options) > .more-menu-sheet {
    position: fixed; left: 12px; right: 12px; top: auto; min-width: 0;
    /* Fixed does not scroll, so cap it and let the sheet itself scroll
       rather than putting anything out of reach. */
    max-height: calc(100vh - 180px); overflow-y: auto;
  }
  /* The composer is pinned to the bottom bar, so its own sheet opened
     downward into the part of the page a phone cannot reach: Research, Plan
     and the budget field were below the fold with nothing to scroll. It stays
     anchored to the composer — it just opens upward, and caps itself. */
  .ask-options > .more-menu-sheet { top: auto; bottom: calc(100% + 6px); }
}

/* -- Tasks ------------------------------------------------------------------

   A task row is compact by default: a tick, a title, and the two controls that
   are separate decisions (Important, My Day). Everything conditional — a
   deadline, a step count, the initiative it belongs to, what Cerebro is doing —
   appears only when it applies, because a row that always prints "no date · 0
   steps" is four words of noise on every line.

   The expansion is the same markup wherever the row is shown, so a task cannot
   look like one thing on My Day and another inside its initiative. */

.task-add {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
input.task-add-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 15px;
}
input.task-add-input:focus { outline: none; }
.task-add:focus-within { border-color: var(--accent-border); }
.task-add-state { font-size: 12px; color: var(--text-dim); }
.task-added-flash { margin: 0 0 8px; font-size: 12px; color: #77d487; }

.task-list { display: grid; gap: 2px; }
.task-group { display: grid; gap: 8px; margin-bottom: 18px; }

.task {
  border: 1px solid transparent;
  border-bottom-color: var(--border);
  border-radius: 8px;
  background: transparent;
  padding: 6px 4px;
}
.task[data-state="done"] { background: var(--surface-soft); }
.task[data-expanded="true"] { background: var(--accent-wash); }
.task:hover { background: var(--surface-soft); }
.task-main { display: flex; align-items: flex-start; gap: 6px; }

/* The label is the target, not the box inside it: a 14px checkbox is not
   something a thumb can hit. */
.task-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  flex: 0 0 auto;
}
.task-tick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.task-box {
  width: 18px; height: 18px;
  border: 1.5px solid var(--border-strong, var(--border));
  border-radius: 5px;
  display: inline-block;
  position: relative;
}
.task-tick input:checked + .task-box {
  background: var(--accent-wash);
  border-color: var(--accent-border);
}
.task-tick input:checked + .task-box::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  color: var(--accent-text);
}
.task-tick input:focus-visible + .task-box { outline: 2px solid var(--accent-border); outline-offset: 2px; }
.task-tick-sm { min-width: 36px; min-height: 36px; }

.task-body { flex: 1 1 auto; min-width: 0; padding: 4px 0; }
.task-title-form { margin: 0; }
input.task-title {
  width: 100%;
  min-height: 36px;
  padding: 4px 2px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 500;
}
input.task-title:hover { border-bottom-color: var(--border); }
input.task-title:focus { outline: none; border-bottom-color: var(--accent-border); }
.task[data-state="done"] input.task-title { text-decoration: line-through; color: var(--text-dim); }
.task-title-static { font-size: 14.5px; font-weight: 550; }
.task-error { margin: 2px 0 0; font-size: 12px; color: #f0c95a; }
.task-flash { margin: 2px 0 0; font-size: 12px; color: #77d487; }

.task-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.task-chip {
  font-size: 11.5px;
  padding: 2px 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
}
.task-initiative:hover { color: var(--accent-text); }
.task-cerebro[data-tone="warn"] { background: rgba(214, 160, 23, .16); color: #f0c95a; }
.task-cerebro[data-tone="done"] { background: rgba(63, 185, 80, .14); color: #77d487; }

.task-controls { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.task-flag, .task-day, .task-open {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent;
  color: var(--text-faint, var(--text-dim));
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
}
.task-flag:hover, .task-day:hover, .task-open:hover { background: var(--surface-hover); color: var(--text); }
.task-flag.is-on { color: #f0c95a; }
.task-day.is-on { color: var(--accent-text); }

.task-detail {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(500px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  box-sizing: border-box;
  margin: 0;
  padding: 24px;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
  box-shadow: -20px 0 80px rgba(0, 0, 0, .3);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: none;
  align-content: start;
  gap: 18px;
}
.task-detail[open] { display: grid; }
.task-detail::backdrop { background: rgba(3, 8, 18, .42); backdrop-filter: blur(2px); }
body.task-panel-open { overflow: hidden; }
.task-panel-head { display: flex; align-items: center; justify-content: space-between; }
.task-panel-close, .task-menu-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--text-dim);
  cursor: pointer; font-size: 22px; list-style: none;
}
.task-menu-trigger::-webkit-details-marker { display: none; }
.task-panel-close:hover, .task-menu-trigger:hover { color: var(--text); background: var(--surface-hover); }
input.task-panel-title { font-size: 20px; font-weight: 600; }
.task-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.task-controls .more-menu-sheet, .task-panel-actions .more-menu-sheet { min-width: 190px; }
.task-row-menu .more-menu-sheet > button, .task-panel-actions .more-menu-sheet > button {
  justify-content: flex-start; width: 100%; gap: 8px; padding: 8px 12px; font-size: 13px;
}
.task-options { border-top: 1px solid var(--border); padding-top: 8px; }
.task-options > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--text-dim); font-size: 13px; }
.task-options > summary::after { content: '+'; margin-left: auto; padding-left: 12px; }
.task-options[open] > summary::after { content: '−'; }
.task-options > summary::-webkit-details-marker { display: none; }
.task-options:not([open]) > :not(summary) { display: none; }
.task-ai-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.work-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.work-toolbar .work-views { margin: 0; min-width: 0; }
.work-filters { position: relative; flex: 0 0 auto; }
.work-filter-body { position: absolute; right: 0; top: 100%; z-index: 30; width: min(380px, calc(100vw - 40px)); padding: 16px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .25); }
.work-identity { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; color: var(--text-dim); }
.work-filter-body .field { width: 100%; }
.task-detail .task-links, .task-detail .task-belongs, .task-detail .task-ai { display: block; }
.task-detail .task-link-add { margin-top: 8px; }
.task-step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.task-step { display: flex; align-items: center; gap: 4px; }
.task-step.is-done input.task-step-body { text-decoration: line-through; color: var(--text-dim); }
.task-step-form { flex: 1 1 auto; min-width: 0; margin: 0; }
input.task-step-body {
  width: 100%;
  min-height: 36px;
  padding: 4px 2px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 13.5px;
}
input.task-step-body:hover { border-bottom-color: var(--border); }
input.task-step-body:focus { outline: none; border-bottom-color: var(--accent-border); }
.task-step-controls { flex: 0 0 auto; }
.task-step-controls .more-menu-sheet > button { width: 100%; text-align: left; justify-content: flex-start; padding: 8px 12px; }
.task-mini {
  min-width: 36px; min-height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent;
  color: var(--text-dim);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}
.task-mini:hover { background: var(--surface-hover); color: var(--text); }
.task-mini-danger:hover { color: #f08a8a; }
.task-step-add { display: flex; gap: 6px; margin-top: 6px; }
.task-step-add input {
  flex: 1 1 auto; min-width: 0; min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 13.5px;
}

.task-fields { display: grid; gap: 10px; margin: 0; }
/* The grid stretched the button to the full width, where it read as another
   field rather than as the control that saves them. */
.task-fields > button { justify-self: start; }
.task-field-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.task-reminds {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  cursor: pointer;
}
.task-reminds input { min-width: 20px; min-height: 20px; grid-row: 1; }
.task-reminds > span:last-child { grid-column: 2; font-size: 11.5px; }
.task-belongs { display: grid; gap: 4px; }
.task-belongs p { margin: 0; }

.task-ai { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.task-working { font-size: 12px; color: var(--text-dim); }

.task-breakdown { display: grid; gap: 10px; padding: 10px 4px; }
.task-breakdown-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.task-breakdown-list li { display: flex; align-items: center; gap: 4px; }
.task-breakdown-list input[type="text"],
.task-breakdown-list input:not([type]) {
  flex: 1 1 auto; min-width: 0; min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 13.5px;
}
.task-breakdown-actions { display: flex; gap: 6px; }

.task-confirm-why { margin: 4px 0 0; font-size: 13px; color: #f0c95a; }
.task-confirm-list { margin: 4px 0 0; padding-left: 20px; font-size: 13px; color: var(--text-dim); }
.task-confirm-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 4px 4px; }

.task-delegations, .task-assists { display: grid; gap: 8px; }
.task-delegation, .task-assist {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}
.task-delegation[data-tone="warn"] { border-color: rgba(214, 160, 23, .34); }
.task-delegation-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-delegation p { margin: 0; }
.task-drift { color: #f0c95a; }
.task-result { font-size: 13.5px; }
.task-delegation-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.work-initiative-filter {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ws-done-tasks { margin-top: 14px; }
.ws-done-tasks > summary { min-height: 36px; display: flex; align-items: center; cursor: pointer; }

@media (max-width: 720px) {
  /* The phone's floors live here, on a phone, rather than on the desktop rule
     they would otherwise override. */
  .task-add { padding: 4px; }
  input.task-add-input { font-size: 16px; } /* 16px stops iOS zooming the field */
  /* Three 44px controls beside a title leave the title about 40% of the row,
     so it truncates after four words — the row's own buttons squeezing its
     text column is the fault the walk measures. On a phone the controls get
     their own line under the title instead. */
  .task-main {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 90px;
    align-items: start;
    column-gap: 4px;
    row-gap: 0;
  }
  .task-body { grid-column: 2; padding: 0; }
  .task-controls { grid-column: 3; grid-row: 1; }
  .task-controls > .task-flag, .task-controls > .task-row-menu { display: none; }
  .task-detail { width: 100vw; padding: max(12px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
  .work-toolbar { flex-wrap: wrap; gap: 4px; }
  .work-toolbar .work-views { flex: 1 1 100%; }
  .work-filters { margin-left: auto; }
  .task-panel-actions .more-menu-sheet > button { min-width: 44px; min-height: 44px; }
  .task-mini { min-width: 44px; min-height: 44px; }
  .task-step-add input { min-height: 44px; font-size: 16px; }
  input.task-title { font-size: 16px; }
  input.task-step-body { font-size: 15px; }
  .task-field-row { flex-direction: column; gap: 10px; }
  .task-breakdown-list input[type="text"],
  .task-breakdown-list input:not([type]) { min-height: 44px; font-size: 16px; }
  .work-initiative-filter { flex-direction: column; align-items: stretch; }
  /* Both dimensions, not only height: the phone walk measured the step form's
     Add button at 43px wide, which is a target a thumb misses. A short word in
     a small button is exactly where this goes wrong. */
  .task-detail .btn,
  .task-add .btn,
  .task-breakdown .btn { min-width: 44px; min-height: 44px; }
}

.task-conflict {
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(214, 160, 23, .34);
  border-radius: var(--radius-sm);
  background: rgba(214, 160, 23, .08);
  font-size: 12.5px;
}
.task-conflict p { margin: 0 0 4px; }
.task-conflict-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.task-links { display: grid; gap: 6px; }
.task-link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.task-link-list li { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.task-link-list a { overflow-wrap: anywhere; }
.task-link-add { display: flex; flex-wrap: wrap; gap: 6px; }
.task-link-add input {
  flex: 1 1 140px; min-width: 0; min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 13.5px;
}
@media (max-width: 720px) {
  .task-link-add input { min-height: 44px; font-size: 16px; flex-basis: 100%; }
}


.ws-context-fold > summary, .ws-activity-fold > summary { min-height: 44px; cursor: pointer; }
.ws-context-fold > summary::after, .ws-activity-fold > summary::after { content: '+'; color: var(--text-dim); }
.ws-context-fold[open] > summary::after, .ws-activity-fold[open] > summary::after { content: '−'; }


/* Task handoff stays part of the existing task row: one compact preview,
   no second task system and no hidden start-on-drop behavior. */
.task-give {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.task-give:hover, .task-give:focus-visible { border-color: var(--accent); }
.task-give-short { display: none; }
.task.is-dragging { opacity: .62; }
.work-view[data-cerebro-drop].is-drop-ready {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.task-handoff-slot:empty { display: none; }
.task-handoff {
  margin: 0 12px 10px 48px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 10px;
}
.task-handoff-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.task-handoff-head > div { display: grid; gap: 2px; min-width: 0; }
.task-handoff-head strong { overflow-wrap: anywhere; }
.task-handoff-read { margin: 0; display: grid; gap: 8px; }
.task-handoff-read > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
}
.task-handoff-read dt {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.task-handoff-read dd { margin: 0; font-size: 13px; line-height: 1.45; }
.task-handoff-form { display: grid; gap: 8px; }
.task-handoff-form input { width: 100%; min-height: 40px; }
.task-handoff-question { display: block; margin: 2px 0 5px; font-size: 13px; }
.task-handoff-actions { display: flex; gap: 6px; }
.task-handoff-existing { display: grid; gap: 3px; }

@media (max-width: 720px) {
  .task-controls { justify-content: flex-end; }
  .task-give {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    font-size: 10px;
  }
  .task-give-wide { display: none; }
  .task-give-short { display: inline; }
  .task-handoff {
    margin: 4px 8px 10px;
    padding: 12px;
  }
  .task-handoff-read > div { grid-template-columns: 1fr; gap: 2px; }
  .task-handoff-form input { min-height: 44px; font-size: 16px; }
}