:root {
  --bg: #fff6f4;
  --bg-alt: #ffe8e3;
  --panel: rgba(255, 252, 251, 0.9);
  --panel-strong: #fffdfd;
  --ink: #231c1d;
  --muted: #6f5d5e;
  --line: rgba(180, 35, 24, 0.12);
  --forest: #ff3b30;
  --forest-soft: #ff645c;
  --gold: #ff8a80;
  --rust: #d92d20;
  --red: #b42318;
  --sage: #ffd0cb;
  --green-bg: #ecfdf3;
  --amber-bg: #fff3e1;
  --red-bg: #ffe7e4;
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow: 0 22px 50px rgba(29, 41, 53, 0.08);
  --max-width: 1380px;
}

* {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: linear-gradient(180deg, #fff9f8 0%, #fff3f1 52%, #ffe9e6 100%);
  font-family: "Avenir Next", "Segoe UI", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at top left, rgba(255, 88, 79, 0.16), transparent 28%),
    radial-gradient(circle at top right, rgba(255, 135, 124, 0.14), transparent 24%);
  transform: translateZ(0);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 34px 24px 24px;
}

.hero__layer {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 124, 114, 0.2), transparent 24%),
    radial-gradient(circle at 88% 22%, rgba(255, 88, 79, 0.22), transparent 22%),
    linear-gradient(135deg, #140909 0%, #37100f 52%, #5c1611 100%);
}

.hero__content,
.hero-summary,
.shell {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
}

.hero__content {
  display: flex;
  justify-content: space-between;
  gap: 28px;
}

.hero__left {
  max-width: 820px;
}

.hero__logo {
  display: block;
  width: clamp(190px, 24vw, 270px);
  height: auto;
  margin-bottom: 22px;
  filter: drop-shadow(0 16px 30px rgba(255, 59, 48, 0.18));
}

.hero h1 {
  margin: 0;
  font-size: clamp(40px, 5vw, 62px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: #fffdfa;
}

.hero__copy {
  max-width: 760px;
  margin: 16px 0 0;
  color: rgba(255, 248, 242, 0.78);
  line-height: 1.65;
  font-size: 16px;
}

.hero__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.nav-pill,
.pill,
.tag,
.status-pill,
.signal-pill,
.mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 12px;
  font-weight: 700;
}

.nav-pill {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 107, 97, 0.22);
  color: rgba(255, 253, 249, 0.9);
}

.nav-pill--active {
  background: linear-gradient(135deg, var(--forest), var(--rust));
  border-color: rgba(255, 124, 114, 0.5);
  color: #fffdfd;
  box-shadow: 0 16px 32px rgba(180, 35, 24, 0.26);
}

.nav-pill--disabled {
  opacity: 0.58;
}

.hero__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.hero-role-card {
  display: grid;
  gap: 12px;
  min-width: 260px;
}

.hero-role-field {
  display: grid;
  gap: 8px;
}

.hero-role-label {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12px;
  color: rgba(255, 248, 242, 0.72);
}

.hero-role-select {
  min-width: 220px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 250, 249, 0.9);
  padding: 12px 14px;
  color: var(--ink);
}

.hero__hint {
  max-width: 270px;
  margin: 0;
  text-align: right;
  color: rgba(255, 248, 242, 0.66);
  line-height: 1.5;
  font-size: 13px;
}

.button,
.mini-button,
.icon-button,
.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease;
}

.button:hover,
.mini-button:hover,
.icon-button:hover,
.tab:hover {
  transform: translateY(-1px);
}

.button:disabled,
.mini-button:disabled,
.icon-button:disabled,
.tab:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
  box-shadow: none;
}

.button {
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.button--primary {
  background: linear-gradient(135deg, var(--forest), var(--rust));
  color: #fffdfd;
  box-shadow: 0 14px 30px rgba(180, 35, 24, 0.22);
}

.hero-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.hero-stat,
.surface-card,
.metric-card,
.summary-card,
.list-card,
.data-card,
.table-shell,
.modal-card,
.modal-section,
.fund-card,
.portfolio-card,
.feed-card {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.hero-stat {
  padding: 18px 20px;
  background: rgba(255, 250, 249, 0.1);
  border-color: rgba(255, 110, 101, 0.16);
}

.hero-stat__label,
.label {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12px;
  color: var(--muted);
}

.hero-stat__label {
  color: rgba(255, 248, 242, 0.6);
}

.hero-stat__value,
.value-lg {
  margin-top: 10px;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.hero-stat__value {
  color: #fffdfa;
}

.hero-stat__hint {
  margin-top: 8px;
  color: rgba(255, 248, 242, 0.72);
  font-size: 13px;
}

.shell {
  display: grid;
  gap: 24px;
  padding: 0 24px 40px;
}

.panel {
  padding: 24px;
}

.panel-header,
.section-heading,
.modal-section__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.panel-header h2,
.section-heading h3,
.modal-section h3 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.04em;
}

.panel-copy,
.muted,
.subtle {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.subtle {
  font-size: 13px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.toolbar input,
.toolbar select {
  min-width: 160px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.88);
  padding: 10px 14px;
  color: var(--ink);
}

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

.form-field {
  display: grid;
  gap: 8px;
}

.form-field__header,
.founder-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  padding: 12px 14px;
  color: var(--ink);
}

.form-field textarea {
  resize: vertical;
  min-height: 96px;
}

.form-field input[type="file"] {
  padding: 10px 12px;
}

.form-note {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.founder-stack {
  display: grid;
  gap: 12px;
}

.founder-card {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(29, 41, 53, 0.1);
  background: rgba(255, 255, 255, 0.72);
}

.grid-2,
.grid-3,
.grid-4,
.summary-grid,
.definition-strip,
.kpi-strip,
.portfolio-grid,
.fund-grid {
  display: grid;
  gap: 16px;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3,
.fund-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4,
.summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.definition-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kpi-strip {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

/* Three-tier badge system (P2-10 refactor):
 *
 *   1. .status-pill — semantic health (green/yellow/red/gray). Now
 *      carries a leading colored dot so the operator can scan a list
 *      of companies and spot reds without reading text.
 *   2. .signal-pill — escalation level (S/A/B). Saturated colors,
 *      rendered ONLY when an escalation is actually present.
 *   3. .pill / .tag — neutral metadata (sector, stage, "Fund IV",
 *      etc.). Now muted gray-on-near-white so they fade into the
 *      background and don't compete with status/signal.
 */
.pill,
.tag,
.mini-chip {
  background: #f3eded;
  color: var(--muted);
  border: 1px solid rgba(120, 60, 60, 0.08);
  font-weight: 600;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* Status pill: dot + text. The dot is the bit you scan; the text is
 * the label. Padding tightened so the pill itself doesn't dominate.
 */
.status-pill {
  padding: 4px 11px 4px 9px;
  font-weight: 700;
  font-size: 11.5px;
  border: 1px solid transparent;
}

.status-pill__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 6px;
  flex-shrink: 0;
}

.status-pill--green {
  background: var(--green-bg);
  color: #047857;
  border-color: rgba(4, 120, 87, 0.16);
}
.status-pill--green .status-pill__dot { background: #10b981; }

.status-pill--yellow {
  background: var(--amber-bg);
  color: #9a3412;
  border-color: rgba(176, 100, 12, 0.16);
}
.status-pill--yellow .status-pill__dot { background: #f59e0b; }

.status-pill--red {
  background: var(--red-bg);
  color: var(--red);
  border-color: rgba(180, 35, 24, 0.18);
}
.status-pill--red .status-pill__dot { background: var(--red); }

.status-pill--gray {
  background: #f3eded;
  color: var(--muted);
  border-color: rgba(120, 60, 60, 0.08);
}
.status-pill--gray .status-pill__dot { background: #b9adad; }

.signal-pill--S {
  background: rgba(173, 75, 69, 0.14);
  color: var(--red);
}

.signal-pill--A {
  background: rgba(255, 138, 128, 0.18);
  color: var(--gold);
}

.signal-pill--B {
  background: rgba(255, 100, 92, 0.14);
  color: var(--forest-soft);
}

.signal-pill--none {
  background: rgba(29, 41, 53, 0.08);
  color: var(--muted);
}

.fund-card,
.portfolio-card,
.feed-card,
.summary-card,
.metric-card,
.surface-card,
.modal-card,
.modal-section,
.data-card,
.list-card {
  padding: 18px;
}

.fund-card,
.portfolio-card {
  position: relative;
  overflow: hidden;
}

/* "+ Add Fund" placeholder card. Visually distinct from real funds
 * (dashed border, no metrics, neutral background) so admins can find
 * the entry point at a glance but non-admins / readers don't get
 * confused by it. Lives at the end of the fund-grid only when the
 * caller is an admin (the renderer gates it on canManageRecords).
 */
.fund-card--add {
  background: transparent;
  border: 2px dashed rgba(180, 35, 24, 0.32);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
  box-shadow: none;
  min-height: 180px;
}

.fund-card--add::after {
  display: none; /* skip the gradient circle from real fund cards */
}

.fund-card--add:hover {
  background: rgba(255, 232, 227, 0.5);
  border-color: var(--red);
  color: var(--red);
}

.fund-card--add:active {
  transform: scale(0.985);
}

.fund-card__add-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.fund-card__add-icon {
  font-size: 36px;
  line-height: 1;
  font-weight: 300;
}

.fund-card__add-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.fund-card__add-hint {
  font-size: 11px;
  opacity: 0.7;
}

/* Narrow modal shell — used by the Fund form so a 5-field form
 * doesn't stretch to the same width as the intake hub modal.
 */
.modal-shell--narrow {
  max-width: 640px;
}

.form-required {
  color: var(--red);
  font-weight: 700;
}

/* Side-by-side input + helper button (used for Generate Password). */
.form-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.form-input-row input {
  flex: 1 1 auto;
  min-width: 0;
}

.form-input-row .mini-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.form-label {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  display: block;
}

.form-input {
  font: inherit;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: var(--rust);
  box-shadow: var(--ring);
}

.form-hint {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
}

.form-field--wide {
  grid-column: 1 / -1;
}

.mini-button--danger {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid rgba(180, 35, 24, 0.24);
}

.mini-button--danger:hover {
  background: var(--red);
  color: #fff;
}

/* Danger zone — quarantine for destructive actions so they can't be
 * mis-clicked from the main toolbar. Visually separated by a dashed
 * red border + clear "you are about to break something" framing.
 */
.danger-zone {
  margin-top: 28px;
  padding: 14px 16px;
  border: 1px dashed rgba(180, 35, 24, 0.35);
  border-radius: var(--radius-md);
  background: rgba(255, 232, 227, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.danger-zone__header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.danger-zone__title {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--red);
}

.danger-zone__copy {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}

/* Metadata strip — replaces dummy pill rows on the Fund Dashboard
 * panel header. Looks like inline text instead of clickable buttons
 * so the operator doesn't try to click them looking for filtering.
 */
.meta-strip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink);
  flex-wrap: wrap;
}

.meta-strip__label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  margin-right: 4px;
}

.meta-strip__sep {
  color: rgba(180, 35, 24, 0.3);
}

/* Tone variants on summary-card: tint the background to match
 * semantic content (green health count, amber watch, red alert).
 * Keeps the label/value typography identical so the eye still
 * compares numbers, just with the affordance of "this is a red
 * counter, this is green".
 */
.summary-card--tone-green {
  background: var(--green-bg);
  border-color: rgba(16, 122, 60, 0.16);
}
.summary-card--tone-green .label,
.summary-card--tone-green .value-lg {
  color: #047857;
}

.summary-card--tone-amber {
  background: var(--amber-bg);
  border-color: rgba(176, 100, 12, 0.16);
}
.summary-card--tone-amber .label,
.summary-card--tone-amber .value-lg {
  color: #9a3412;
}

.summary-card--tone-red {
  background: var(--red-bg);
  border-color: rgba(180, 35, 24, 0.18);
}
.summary-card--tone-red .label,
.summary-card--tone-red .value-lg {
  color: var(--red);
}

/* Hover-reveal toolbar — secondary actions (Edit, Delete) hide until
 * the row is hovered, keeping the visual baseline of the feed clean
 * and reducing accidental clicks on destructive actions in long
 * scrolling lists.
 */
.toolbar--inline {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-shrink: 0;
}

.feed-card .toolbar__hover-action,
.list-card .toolbar__hover-action {
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
}

.feed-card:hover .toolbar__hover-action,
.feed-card:focus-within .toolbar__hover-action,
.list-card:hover .toolbar__hover-action,
.list-card:focus-within .toolbar__hover-action {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
 * Command palette (Cmd+K / Ctrl+K). Renders into modalRootEl as a
 * dialog overlay, but the visual treatment is distinct from form
 * modals — narrow column, monospace-ish input, list of items, no
 * header chrome. The pattern is borrowed from Linear / Slack / GH.
 * ============================================================ */

.palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  padding: 80px 20px 20px;
  background: rgba(12, 20, 28, 0.55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.palette-shell {
  width: 100%;
  max-width: 600px;
  background: #fffefd;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.palette-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.palette-input-icon {
  font-size: 11px;
  font-family: "SF Mono", "Menlo", monospace;
  color: var(--muted);
  letter-spacing: 0.04em;
  padding: 4px 8px;
  background: rgba(180, 35, 24, 0.08);
  border-radius: 6px;
  color: var(--red);
  font-weight: 700;
}

.palette-input {
  flex: 1 1 auto;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  color: var(--ink);
  padding: 4px 0;
}

.palette-close {
  background: rgba(180, 35, 24, 0.08);
  border: none;
  color: var(--muted);
  font-size: 10.5px;
  font-family: "SF Mono", "Menlo", monospace;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.palette-list {
  max-height: 420px;
  overflow-y: auto;
  padding: 6px;
}

.palette-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink);
  transition: background 0.1s;
}

.palette-item:hover,
.palette-item:focus-visible {
  background: var(--bg-alt);
  outline: none;
}

.palette-item__label {
  font-weight: 600;
}

.palette-item__hint {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.palette-empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.palette-footer {
  display: flex;
  gap: 18px;
  padding: 10px 18px;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-family: "SF Mono", "Menlo", monospace;
  letter-spacing: 0.04em;
}

/* Empty state inside a chart card — used by renderLineChart when
 * every series is all-zero / all-missing. Replaces the degenerate
 * "$-1 to $1" flat-line view that looked broken before.
 */
.chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 28px;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  color: var(--muted);
  min-height: 200px;
  gap: 8px;
}

.chart-empty__icon {
  font-size: 28px;
  color: rgba(180, 35, 24, 0.32);
  line-height: 1;
}

.chart-empty__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.chart-empty__copy {
  font-size: 12.5px;
  max-width: 360px;
  line-height: 1.5;
}

.workspace-shell {
  border-radius: 30px;
  overflow: hidden;
  background: #fff8f7;
  border: 1px solid rgba(255, 255, 255, 0.46);
  box-shadow: var(--shadow);
}

.fund-card::after,
.portfolio-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -44px;
  width: 170px;
  height: 170px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 59, 48, 0.1), transparent 70%);
}

.fund-card--selected,
.portfolio-card:hover,
.tab--active {
  border-color: rgba(255, 59, 48, 0.26);
  box-shadow: 0 20px 34px rgba(180, 35, 24, 0.12);
}

.portfolio-card--interactive {
  cursor: pointer;
}

.portfolio-card--interactive:focus-visible {
  outline: 3px solid rgba(255, 59, 48, 0.22);
  outline-offset: 4px;
}

.card-top,
.feed-card__top,
.portfolio-card__top,
.modal-header__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.logo-chip,
.fund-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  height: 50px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 59, 48, 0.88), rgba(217, 45, 32, 0.96));
  color: #fffdfd;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.fund-chip {
  min-width: 78px;
  height: 34px;
  border-radius: 999px;
  padding: 0 14px;
}

.value-lg {
  color: var(--ink);
}

.card-copy,
.feed-card__copy,
.modal-copy {
  margin-top: 12px;
  color: var(--muted);
  line-height: 1.62;
}

.meta-wrap,
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.metric-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 241, 239, 0.88));
}

.mini-button,
.icon-button,
.tab {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
}

.mini-button {
  padding: 8px 12px;
  border-radius: 999px;
}

.icon-button {
  width: 36px;
  height: 36px;
  border-radius: 999px;
}

.mini-button--danger,
.icon-button--danger {
  color: var(--red);
  border-color: rgba(173, 75, 69, 0.22);
  background: rgba(173, 75, 69, 0.04);
}

.fund-card__stats,
.portfolio-card__stats {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.fund-card__stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portfolio-card__stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.table-shell {
  overflow: auto;
}

table {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
}

thead {
  background: rgba(255, 59, 48, 0.06);
}

th,
td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(29, 41, 53, 0.08);
  vertical-align: top;
}

th {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--muted);
}

tbody tr:hover {
  background: rgba(255, 241, 239, 0.82);
}

.alert-stack,
.feed-stack,
.list-stack,
.timeline {
  display: grid;
  gap: 12px;
}

.alert-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.76);
}

.alert-dot {
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--forest);
}

.intake-layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 18px;
  margin-top: 20px;
}

.intake-composer {
  display: grid;
  gap: 18px;
}

.feed-card__footer,
.portfolio-card__footer,
.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.portfolio-card__cta {
  color: var(--rust);
  font-weight: 700;
  white-space: nowrap;
}

.portfolio-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 20px;
}

.chart {
  width: 100%;
  height: 240px;
  display: block;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.legend__swatch {
  width: 22px;
  height: 0;
  border-top: 4px solid var(--swatch-color);
  border-radius: 999px;
  flex-shrink: 0;
}

.legend__swatch--dashed {
  border-top-style: dashed;
}

.definition-card {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(29, 41, 53, 0.08);
  background: rgba(255, 255, 255, 0.72);
}

.definition-card__formula {
  margin-top: 8px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.55;
}

.definition-card__meaning {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.6;
}

.definition-card__flag {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.definition-card__flag--yes {
  background: rgba(15, 159, 143, 0.12);
  color: #0c6f64;
}

.definition-card__flag--no {
  background: rgba(217, 45, 32, 0.1);
  color: #9f261b;
}

.chart-note {
  margin-top: 14px;
  color: var(--muted);
  line-height: 1.65;
}

.bar-stack {
  display: grid;
  gap: 12px;
}

.bar-row,
.timeline-row {
  display: grid;
  gap: 12px;
  align-items: center;
}

.bar-row {
  grid-template-columns: 160px 1fr auto;
}

.timeline-row {
  grid-template-columns: 116px 1fr auto;
}

.timeline-row--cashflow {
  grid-template-columns: 92px minmax(0, 1fr) max-content;
  gap: 10px;
}

.progress {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: rgba(29, 41, 53, 0.08);
  overflow: hidden;
}

.progress > span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--forest), var(--gold));
}

.timeline-body {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 59, 48, 0.05);
  border: 1px solid rgba(255, 59, 48, 0.1);
}

.timeline-date {
  min-width: 0;
}

.timeline-amount {
  min-width: 88px;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}

/* Workspace tabs (Summary / Intake Timeline / Metrics / Returns on
 * the company page). Switched from pill style to underline tabs so
 * inactive tabs no longer look like clickable buttons of equal
 * weight — only the active one carries the visual emphasis, the rest
 * are subdued affordances that say "another section is available".
 */
.tab {
  padding: 10px 6px;
  border-radius: 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-right: 22px;
}

.tab:hover {
  color: var(--ink);
}

.tab--active {
  color: var(--ink);
  background: transparent;
  border-bottom-color: var(--red);
  font-weight: 700;
}

#modal-root:empty {
  display: none;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  padding: 28px;
  background: rgba(12, 20, 28, 0.55);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
}

.modal-overlay--locked {
  align-items: center;
}

.modal-shell {
  width: min(1260px, 100%);
  margin-top: 16px;
  border-radius: 30px;
  overflow: hidden;
  background: #fff8f7;
  box-shadow: 0 28px 60px rgba(12, 20, 28, 0.28);
}

.modal-shell--auth {
  width: min(980px, 100%);
}

.modal-header {
  padding: 24px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at top right, rgba(255, 124, 114, 0.2), transparent 28%),
    linear-gradient(180deg, rgba(255, 59, 48, 0.08), rgba(255, 255, 255, 0));
}

.modal-body {
  padding: 24px;
  display: grid;
  gap: 18px;
}

.modal-grid {
  display: grid;
  gap: 18px;
}

.modal-grid--two {
  grid-template-columns: 1.3fr 1fr;
}

.modal-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.empty-state {
  padding: 26px;
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(29, 41, 53, 0.18);
  background: rgba(255, 255, 255, 0.58);
  text-align: center;
  color: var(--muted);
}

@media (max-width: 1180px) {
  .hero-summary,
  .fund-grid,
  .portfolio-grid,
  .summary-grid,
  .kpi-strip,
  .modal-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intake-layout,
  .grid-2,
  .grid-3,
  .modal-grid--two,
  .form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .hero {
    padding-top: 26px;
  }

  .hero__content {
    flex-direction: column;
  }

  .hero__right {
    align-items: flex-start;
  }

  .hero__hint {
    text-align: left;
  }

  .hero-summary,
  .fund-grid,
  .portfolio-grid,
  .summary-grid,
  .kpi-strip,
  .fund-card__stats,
  .portfolio-card__stats,
  .modal-grid--three {
    grid-template-columns: 1fr;
  }

  .shell {
    padding: 0 18px 32px;
  }

  .panel,
  .modal-header,
  .modal-body {
    padding-left: 18px;
    padding-right: 18px;
  }

  .bar-row,
  .timeline-row {
    grid-template-columns: 1fr;
  }

  .timeline-row--cashflow {
    grid-template-columns: 84px minmax(0, 1fr) max-content;
    gap: 8px;
  }

  table {
    min-width: 720px;
  }

  .modal-overlay {
    padding: 12px;
  }
}

@media (max-width: 640px) {
  .timeline-row--cashflow {
    grid-template-columns: 1fr;
  }

  .timeline-amount {
    text-align: left;
  }
}

/* ==========================================================================
   Production polish — layered overrides that refine typography, shadows,
   buttons, and the login modal without touching existing class names or
   markup.
   ========================================================================== */

:root {
  /* A calmer, slightly warmer ink; easier on the eye at paragraph sizes. */
  --ink: #1f1516;
  --muted: #74636a;
  /* Tighter, more realistic layered shadows. */
  --shadow: 0 1px 2px rgba(24, 12, 15, 0.04), 0 8px 24px rgba(24, 12, 15, 0.06);
  --shadow-lg: 0 4px 10px rgba(24, 12, 15, 0.06), 0 24px 64px rgba(24, 12, 15, 0.12);
  --ring: 0 0 0 3px rgba(255, 88, 79, 0.2);
  --line: rgba(120, 40, 40, 0.1);
}

body {
  font-family:
    "Inter",
    "SF Pro Text",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.003em;
}

h1, h2, h3, h4 {
  letter-spacing: -0.02em;
}

h1 { font-weight: 700; }
h2, h3 { font-weight: 650; }

/* Softer card surfaces with layered shadow. */
.surface-card,
.panel,
.modal-shell {
  box-shadow: var(--shadow);
}

/* Buttons: crisp hover + focus ring. */
.button,
.mini-button {
  transition:
    transform 140ms ease,
    box-shadow 180ms ease,
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease;
  will-change: transform;
}

.button:hover:not(:disabled),
.mini-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.button:active:not(:disabled),
.mini-button:active:not(:disabled) {
  transform: translateY(0);
}

.button:focus-visible,
.mini-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.button--primary {
  box-shadow: 0 1px 1px rgba(180, 35, 24, 0.25), 0 6px 16px rgba(255, 88, 79, 0.28);
}

.button--primary:hover:not(:disabled) {
  box-shadow: 0 2px 2px rgba(180, 35, 24, 0.3), 0 10px 24px rgba(255, 88, 79, 0.35);
}

/* Form inputs: calmer border + focus ring. */
input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
  border: 1px solid var(--line);
  background: #fffefd;
  transition: border-color 140ms ease, box-shadow 180ms ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--forest-soft);
}

/* Pills: refined spacing + subtle border. */
.pill {
  letter-spacing: 0.01em;
  font-weight: 550;
}

/* ---- Sign-in modal: a compact, focused card ---- */

.modal-overlay--locked {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: radial-gradient(circle at center, rgba(55, 16, 15, 0.5), rgba(20, 9, 9, 0.75));
}

.modal-shell--auth {
  max-width: 440px;
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  padding: 0;
}

.modal-shell--auth .modal-header {
  padding: 32px 32px 16px;
  background: linear-gradient(180deg, #fff8f6 0%, #fffefd 100%);
  border-bottom: 1px solid var(--line);
}

.modal-shell--auth .modal-header h2 {
  font-size: 26px;
  letter-spacing: -0.02em;
}

.modal-shell--auth .modal-copy {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin-top: 6px;
}

.modal-shell--auth .modal-body {
  padding: 24px 32px 32px;
}

.modal-shell--auth .modal-section {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.modal-shell--auth .form-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}

.modal-shell--auth input[type="email"],
.modal-shell--auth input[type="password"] {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 15px;
}

.modal-shell--auth .form-actions {
  margin-top: 22px;
}

.modal-shell--auth .form-actions .button--primary {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
}

/* ---- Hero refinements ---- */

.hero__logo {
  filter: drop-shadow(0 8px 20px rgba(255, 88, 79, 0.35));
}

.hero h1 {
  font-weight: 700;
}

.nav-pill {
  transition: background-color 160ms ease, color 160ms ease, transform 140ms ease;
}

.nav-pill:hover {
  transform: translateY(-1px);
}

/* ---- Sign-in landing: constrain single-column layout width ---- */

.panel > .surface-card:only-child,
.panel > .panel-header + .surface-card:last-child {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Subtle density improvements ---- */

.section-heading h3 {
  font-size: 17px;
}

.list-card,
.data-card {
  transition: border-color 160ms ease, box-shadow 180ms ease;
}

.list-card:hover {
  border-color: rgba(255, 88, 79, 0.35);
}

/* ---- Tables: slightly more breathing room ---- */

table th {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 11.5px;
  color: var(--muted);
}

table td {
  font-size: 14px;
}

/* ---- Empty states ---- */

.empty-state {
  padding: 32px 24px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  background: #fffcfb;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
}

/* ---- Reduce visual weight of disabled buttons ---- */

.button:disabled,
.mini-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ---- High-DPI-friendly hairlines ---- */

@media (min-resolution: 2dppx) {
  .surface-card,
  .panel,
  .modal-shell {
    border-width: 0.5px;
  }
}

/* ==========================================================================
   Portfolio Summary redesign — dense KPI tiles, narrative hero, visual
   highlight chips, risk alert, founder chips, signal pills, sparklines.
   ========================================================================== */

/* ---- Narrative hero: the one-line summary gets to breathe ---- */
.narrative-card {
  padding: 22px 26px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 124, 114, 0.06) 0%, rgba(255, 135, 124, 0.02) 100%),
    #fffefd;
  border: 1px solid var(--line);
  margin-bottom: 18px;
  position: relative;
}

.narrative-card__kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 650;
  color: var(--muted);
  margin-bottom: 10px;
}

.narrative-card__quote {
  font-size: 18px;
  font-weight: 550;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.narrative-card__quote::before {
  content: "“";
  color: var(--forest);
  font-size: 28px;
  font-weight: 700;
  line-height: 0;
  position: relative;
  top: 8px;
  margin-right: 4px;
}

.narrative-card__meta {
  margin-top: 12px;
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--muted);
  align-items: center;
  flex-wrap: wrap;
}

/* ---- KPI tile grid (auto-fitting, 6 per row target) ---- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.kpi-tile {
  padding: 14px 16px 12px;
  border-radius: var(--radius-md);
  background: #fffefd;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.kpi-tile__label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 650;
  color: var(--muted);
}

.kpi-tile__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.kpi-tile__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
}

.kpi-tile__delta--positive { color: #087443; }
.kpi-tile__delta--negative { color: #b42318; }
.kpi-tile__delta--neutral  { color: var(--muted); }

.kpi-tile__meta {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}

.kpi-tile__sparkline {
  display: block;
  width: 100%;
  height: 22px;
  margin-top: 4px;
}

/* ---- Summary two-column layout (primary / side) ---- */
.summary-sections {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* Two-column summary needs ~700+ px to breathe. Below that, stack
   vertically so neither column gets squeezed (long filenames in the
   archive list and the 4-column positions table push the right column
   wide). */
@media (max-width: 1100px) {
  .summary-sections {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Defensive: any direct grid child should constrain its inner content
   to its track width. Long words / URLs / filenames break instead of
   forcing horizontal overflow. */
.summary-sections > * {
  min-width: 0;
}

.summary-sections > * .archive-list li,
.summary-sections > * .request-row__detail,
.summary-sections > * .request-row__type,
.summary-sections > * .team-overview {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Positions table: when squeezed, allow horizontal scroll instead of
   pushing the column wider than its grid track. */
.positions-mini-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.summary-subsection + .summary-subsection {
  margin-top: 18px;
}

.summary-subsection__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 650;
  color: var(--muted);
  margin: 0 0 10px;
}

.summary-subsection__title .count-badge {
  font-size: 10px;
  font-weight: 700;
  background: var(--forest);
  color: #fffefd;
  border-radius: 999px;
  padding: 2px 8px;
  letter-spacing: 0.04em;
}

/* ---- Highlight chips ---- */
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.highlight-item {
  padding: 12px 14px;
  background: #fffefd;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.highlight-item__icon {
  font-size: 16px;
  line-height: 1.3;
  flex-shrink: 0;
}

/* ---- Biggest-risk alert ---- */
.risk-alert {
  padding: 14px 16px;
  background: var(--red-bg);
  border-left: 3px solid var(--red);
  border-radius: var(--radius-md);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.risk-alert__icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1.2;
}

.risk-alert__body {
  flex: 1;
  min-width: 0;
}

.risk-alert__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 4px;
}

.risk-alert__text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}

/* ---- Founder chips ---- */
.founder-chip-list {
  display: grid;
  gap: 8px;
}

.founder-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #fffefd;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.founder-chip__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--forest) 0%, var(--gold) 100%);
  color: #fffefd;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(180, 35, 24, 0.2);
}

.founder-chip__info { flex: 1; min-width: 0; }
.founder-chip__name { font-size: 13.5px; font-weight: 600; }
.founder-chip__role { font-size: 11.5px; color: var(--muted); }

.founder-chip__link {
  font-size: 11px;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 88, 79, 0.1);
  transition: background-color 140ms ease;
}

.founder-chip__link:hover {
  background: rgba(255, 88, 79, 0.18);
}

/* ---- Signal chips ---- */
.signal-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.03em;
  margin-right: 6px;
}

.signal-chip--s { background: var(--red-bg); color: var(--red); }
.signal-chip--a { background: var(--amber-bg); color: #9a6006; }
.signal-chip--b { background: #eef3fc; color: #1d4ed8; }
.signal-chip--none { background: #f0eceb; color: var(--muted); }

/* ---- Compact positions table ---- */
.positions-mini {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.positions-mini th {
  text-align: left;
  font-weight: 650;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 8px 8px 8px 0;
  border-bottom: 1px solid var(--line);
}

.positions-mini td {
  padding: 10px 8px 10px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.positions-mini tr:last-child td { border-bottom: none; }
.positions-mini .num { font-variant-numeric: tabular-nums; text-align: right; }
.positions-mini .fund { font-weight: 600; }

/* ---- Request row ---- */
.request-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  gap: 12px;
  font-size: 13px;
  line-height: 1.45;
}

.request-row:last-child { border-bottom: none; }
.request-row__body { flex: 1; min-width: 0; }
.request-row__type { font-weight: 600; }
.request-row__detail { color: var(--muted); font-size: 12px; margin-top: 2px; }

.priority-pill {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.priority-pill--high { background: var(--red-bg); color: var(--red); }
.priority-pill--medium { background: var(--amber-bg); color: #9a6006; }
.priority-pill--low { background: #eef3fc; color: #1d4ed8; }

/* ---- Archive list ---- */
.archive-list {
  display: grid;
  gap: 4px;
  font-size: 12.5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.archive-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  color: var(--ink);
}

.archive-list__icon {
  color: var(--muted);
  flex-shrink: 0;
}

/* ---- Team overview: truncated with reveal ---- */
.team-overview {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  margin-top: 12px;
  padding: 12px 14px;
  background: #fffefd;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  white-space: pre-wrap;
}

/* ---- Empty state variant inside a subsection ---- */
.summary-subsection .empty-state {
  padding: 14px 16px;
  font-size: 12.5px;
}

/* ============================================================
 * Riceman: in-app analytics agent (admin-only Tab)
 * Two-column layout: conversation sidebar on the left, message
 * thread + composer on the right. Tight visual rhythm so the
 * operator can scan replies fast.
 * ============================================================ */

.riceman {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 18px;
  min-height: 600px;
  padding: 20px;
}

@media (max-width: 900px) {
  .riceman {
    grid-template-columns: 1fr;
  }
}

.riceman__sidebar {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.riceman__sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.riceman__sidebar-header h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
}

.riceman__new-btn {
  appearance: none;
  background: var(--red);
  color: #fff;
  border: none;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}

.riceman__new-btn:hover {
  background: var(--rust);
}

.riceman__byline {
  font-size: 11.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

.riceman__conv-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  max-height: 540px;
}

.riceman__empty {
  font-size: 12px;
  color: var(--muted);
  padding: 12px 8px;
  text-align: center;
}

.riceman__conv {
  display: flex;
  align-items: stretch;
  gap: 2px;
  border-radius: var(--radius-sm);
  position: relative;
}

.riceman__conv:hover {
  background: var(--bg-alt);
}

.riceman__conv--active {
  background: var(--sage);
}

.riceman__conv-pick {
  flex: 1;
  appearance: none;
  background: transparent;
  border: none;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: inherit;
  min-width: 0;
}

.riceman__conv-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.riceman__conv-when {
  font-size: 10.5px;
  color: var(--muted);
}

.riceman__conv-del {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  padding: 0 8px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.riceman__conv:hover .riceman__conv-del {
  opacity: 1;
}

.riceman__conv-del:hover {
  color: var(--red);
}

/* ---- Main pane ---- */

.riceman__main {
  display: flex;
  flex-direction: column;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 600px;
}

.riceman__error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--red-bg);
  color: var(--red);
  border-bottom: 1px solid rgba(180, 35, 24, 0.16);
  padding: 10px 14px;
  font-size: 13px;
}

.riceman__error-close {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--red);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.riceman__thread {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
}

.riceman__placeholder {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 40px 16px;
}

.riceman__bubble {
  max-width: 720px;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.55;
  border: 1px solid var(--line);
  background: #fff;
}

.riceman__bubble--user {
  align-self: flex-end;
  background: var(--sage);
  border-color: rgba(180, 35, 24, 0.14);
}

.riceman__bubble--assistant {
  align-self: flex-start;
  background: var(--bg);
}

.riceman__bubble-role {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
}

.riceman__bubble-body {
  color: var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.riceman__cursor {
  display: inline-block;
  color: var(--rust);
  margin-left: 2px;
  animation: riceman-cursor-blink 1s infinite;
}

@keyframes riceman-cursor-blink {
  50% { opacity: 0; }
}

.riceman__tool-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.riceman__tool-chip {
  font-size: 11px;
  font-family: "SF Mono", "Menlo", monospace;
  background: var(--green-bg);
  color: #047857;
  border-radius: 999px;
  padding: 2px 10px;
  border: 1px solid rgba(4, 120, 87, 0.18);
}

.riceman__tool-chip--err {
  background: var(--red-bg);
  color: var(--red);
  border-color: rgba(180, 35, 24, 0.2);
}

/* Running state: amber tone + tiny CSS spinner. Reassures the
 * operator that the model is doing something during the 5-30s gap
 * between tool start and tool result.
 */
.riceman__tool-chip--running {
  background: var(--amber-bg);
  color: #9a3412;
  border-color: rgba(176, 100, 12, 0.18);
  font-style: italic;
}

.riceman__tool-chip__sep {
  opacity: 0.5;
  margin: 0 2px;
}

.riceman__tool-spin {
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1.5px solid rgba(154, 52, 18, 0.3);
  border-top-color: #9a3412;
  border-radius: 999px;
  animation: riceman-tool-spin 0.85s linear infinite;
}

@keyframes riceman-tool-spin {
  to { transform: rotate(360deg); }
}

/* ---- Composer ---- */

.riceman__composer {
  border-top: 1px solid var(--line);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fffefd;
}

.riceman__input {
  resize: none;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 56px;
  max-height: 200px;
}

.riceman__input:focus {
  border-color: var(--rust);
  box-shadow: var(--ring);
}

.riceman__input:disabled {
  background: var(--bg-alt);
  cursor: not-allowed;
}

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

.riceman__send-btn,
.riceman__stop-btn {
  appearance: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}

.riceman__send-btn {
  background: var(--red);
  color: #fff;
}

.riceman__send-btn:hover:not(:disabled) {
  background: var(--rust);
}

.riceman__send-btn:disabled {
  background: var(--bg-alt);
  color: var(--muted);
  cursor: not-allowed;
}

.riceman__stop-btn {
  background: var(--bg-alt);
  color: var(--ink);
  border: 1px solid var(--line);
}

.riceman__stop-btn:hover {
  background: var(--red-bg);
  color: var(--red);
}

/* ============================================================
 * Riceman bubble body: markdown elements (headings, tables, lists,
 * code, etc.). Scoped to .riceman__bubble-body so the rest of the
 * app's typography is unaffected.
 * ============================================================ */

.riceman__bubble-body h3,
.riceman__bubble-body h4,
.riceman__bubble-body h5 {
  margin: 16px 0 8px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.riceman__bubble-body h3:first-child,
.riceman__bubble-body h4:first-child {
  margin-top: 0;
}
.riceman__bubble-body h3 { font-size: 15px; letter-spacing: -0.005em; }
.riceman__bubble-body h4 { font-size: 13.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.riceman__bubble-body h5 { font-size: 13px; }

.riceman__bubble-body p {
  margin: 8px 0;
  line-height: 1.55;
}
.riceman__bubble-body p:first-child { margin-top: 0; }
.riceman__bubble-body p:last-child { margin-bottom: 0; }

.riceman__bubble-body ul,
.riceman__bubble-body ol {
  margin: 8px 0;
  padding-left: 22px;
}
.riceman__bubble-body li {
  margin: 4px 0;
  line-height: 1.55;
}
.riceman__bubble-body ul li::marker { color: var(--rust); }
.riceman__bubble-body ol li::marker { color: var(--muted); font-weight: 600; }

.riceman__bubble-body strong { font-weight: 700; color: var(--ink); }
.riceman__bubble-body em { font-style: italic; color: var(--muted); }

.riceman__bubble-body code {
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 0.86em;
  background: rgba(180, 35, 24, 0.08);
  color: var(--red);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.riceman__bubble-body blockquote {
  margin: 12px 0;
  padding: 8px 14px;
  border-left: 3px solid var(--rust);
  background: rgba(255, 138, 128, 0.08);
  color: var(--ink);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13.5px;
  line-height: 1.55;
}

.riceman__bubble-body hr {
  margin: 18px 0;
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line), transparent);
}

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

.riceman__table-wrap {
  margin: 12px 0;
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #fff;
  /* Tame the visual weight: subtle shadow + bordered card. */
  box-shadow: 0 1px 2px rgba(24, 12, 15, 0.03);
}

.riceman__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  line-height: 1.45;
}

.riceman__table thead {
  background: var(--bg-alt);
}

.riceman__table thead th {
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10.5px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.riceman__table tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid rgba(180, 35, 24, 0.06);
  color: var(--ink);
  vertical-align: top;
}

.riceman__table tbody tr:last-child td {
  border-bottom: none;
}

.riceman__table tbody tr:nth-child(even) td {
  background: rgba(255, 248, 246, 0.5);
}

.riceman__table tbody tr:hover td {
  background: rgba(255, 232, 227, 0.4);
}

/* Numeric-looking cells (anything starting with $ / digits) get
 * tabular figures so columns align cleanly. The cleanest approach
 * is font-variant-numeric on td — it doesn't hurt non-numeric cells.
 */
.riceman__table tbody td {
  font-variant-numeric: tabular-nums;
}

/* ---- Charts ---- */

.riceman__chart {
  margin: 14px 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px 8px;
  box-shadow: 0 1px 3px rgba(24, 12, 15, 0.04);
}

.riceman__chart-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(180, 35, 24, 0.06);
}

.riceman__chart-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.riceman__chart-unit {
  font-size: 10.5px;
  font-family: "SF Mono", "Menlo", monospace;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.riceman__chart svg {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

/* Fallback for malformed chart specs — show the raw fence as code. */
.riceman__codeblock {
  background: #1a1413;
  color: #f3e8e6;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12px;
  font-family: "SF Mono", "Menlo", monospace;
  overflow-x: auto;
  white-space: pre;
  margin: 8px 0;
}