:root {
  /* Native controls (date/time pickers, selects, checkboxes, scrollbars) follow the app's own
     theme toggle, not the operating system's setting, so they match the page. */
  color-scheme: light;
  /* The demo palette: teal-biased neutrals, a teal brand (#0f766e, ~5.6:1 under white text on
     buttons, the skip link and chat bubbles), and one colour per severity (crit/warn/watch/ok),
     each with a soft background for pills and banners. --primary-text/--link are for teal used as
     TEXT on the page background, a separate case from teal as a button background. */
  --bg: #f3f6f5;
  --surface: #ffffff;
  --bg-subtle: #eaf0ee;
  --text: #12211e;
  --ink-2: #40504c;
  --muted: #5a6a64;
  --border: #d5dfdc;
  --line-strong: #b3c4bf;
  --input-bg: #ffffff;
  --primary: #0f766e;
  --primary-text: #0b5c55;
  --link: #0b5c55;
  --brand-soft: #dcefeb;
  --crit: #b42318; --crit-soft: #fbe9e7;
  --warn: #9a5806; --warn-soft: #fbf0dc;
  --watch: #35648a; --watch-soft: #e5eef5;
  --ok: #1f7444; --ok-soft: #e3f2e8;
  --purple: #6b3fa0; --purple-soft: #f1eafa;
  --rail: #0c2f2c; --rail-ink: #d6ebe7; --rail-muted: #8fb3ad; --rail-hi: #17504a;
  --shadow: 0 1px 2px rgba(12, 47, 44, 0.06), 0 6px 20px rgba(12, 47, 44, 0.06);
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  /* Danger buttons' own red, as a background (with white text) and as text on the page. */
  --danger: #dc2626;
  --danger-text: var(--danger);
}

/* Explicit toggle only (webapp/routes/theme.py sets/clears a `theme` cookie) -- this app doesn't
   also follow prefers-color-scheme, since the user asked for a manual toggle, not system-following.
   --primary itself stays the same: white text on it keeps its contrast in both themes. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1614;
  --surface: #141f1d;
  --bg-subtle: #1a2926;
  --text: #e3eeeb;
  --ink-2: #b3c3bf;
  --muted: #8a9d98;
  --border: #263834;
  --line-strong: #3a524d;
  --input-bg: #141f1d;
  --primary-text: #6fd8c9;
  --link: #6fd8c9;
  --brand-soft: #123b36;
  --crit: #f28b80; --crit-soft: #3a1714;
  --warn: #e9ad55; --warn-soft: #33250e;
  --watch: #86b6dc; --watch-soft: #15263a;
  --ok: #6cc995; --ok-soft: #11301e;
  --purple: #cfa6f2; --purple-soft: #241831;
  --rail: #08110f; --rail-ink: #d6ebe7; --rail-muted: #7fa39d; --rail-hi: #153f3a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25);
  --danger-text: #fca5a5;
}

/* Accessibility (Phase 39): larger-text toggle (webapp/routes/text_size.py sets/clears a
   `text_size` cookie). Nearly every font-size declaration in this file already uses rem, so one
   root-level override scales the whole document together -- the only exception is .gantt-label
   (fixed px, SVG chart text rather than reflowing document text, and hidden from assistive tech
   via aria-hidden anyway -- see the .sr-only rules below). */
:root[data-text-size="large"] {
  font-size: 120%;
}

body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

/* Plain links, sitewide -- explicit color/visited so both themes use --link (see :root above)
   instead of the browser's own default link blue/purple. Anything more specific (.brand,
   buttons, badges) already sets its own color and wins on specificity. */
a, a:visited {
  color: var(--link);
}

/* Accessibility (Phase 39) */

.skip-link {
  position: absolute;
  top: -40px;
  left: 0.5rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
}

.skip-link:focus {
  top: 0;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.brand {
  font-weight: 700;
  text-decoration: none;
  color: var(--primary-text);
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

.brand::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.35em;
  border-radius: 3px;
  background: var(--primary);
  vertical-align: -0.05em;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem;
}

h1 {
  font-size: 1.4rem;
}

h2 {
  font-size: 1.05rem;
  margin-top: 2rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.25rem;
}

/* Collapsible page sections (Today/project detail): a native <details>/<summary> element, not
   custom JS -- gets a real disclosure control, keyboard support, and :focus-visible for free.
   Defaults to open everywhere it's used -- this is an OPTION to declutter, never information
   hidden by default. */
details.collapsible {
  margin-top: 2rem;
}

details.collapsible summary {
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.25rem;
}

details.collapsible summary::-webkit-details-marker {
  display: none;
}

details.collapsible summary h2 {
  display: inline;
  margin-top: 0;
  border-bottom: none;
  padding-bottom: 0;
}

details.collapsible summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 0.5rem;
  font-size: 0.75em;
  color: var(--muted);
  transition: transform 0.15s ease;
}

details.collapsible[open] summary::before {
  transform: rotate(90deg);
}

.muted {
  color: var(--muted);
}

.list {
  list-style: none;
  padding: 0;
}

.list li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th, .table td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  font-size: 0.85rem;
}

.breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin: 0 0.4rem;
  color: var(--border);
}

.breadcrumbs li[aria-current="page"] {
  color: var(--text);
}

/* A short line from an agent, rendered as a real comic-style speech bubble (a small robot icon
   plus a bordered bubble with a tail pointing at it) rather than a plain text chip -- see
   _macros.html::agent_quote and webapp/mascot_quotes.py for where the text comes from. */
.agent-quote-panel {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 1.25rem;
}

.agent-quote-icon {
  flex-shrink: 0;
  margin-top: 4px;
}

.agent-quote-bubble {
  position: relative;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text);
  margin: 0;
}

.agent-quote-bubble::before,
.agent-quote-bubble::after {
  content: "";
  position: absolute;
  top: 10px;
  border-style: solid;
  border-width: 6px 8px 6px 0;
}

.agent-quote-bubble::before {
  left: -9px;
  border-color: transparent var(--border) transparent transparent;
}

.agent-quote-bubble::after {
  left: -8px;
  border-color: transparent var(--bg-subtle) transparent transparent;
}

.filter-bar {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.filter-bar a {
  text-decoration: none;
  color: var(--muted);
  padding: 0.25rem 0;
}

.filter-bar a.active {
  color: var(--text);
  font-weight: 600;
  border-bottom: 2px solid var(--primary);
}

.badge {
  display: inline-block;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.badge-draft, .badge-new { background: #fef3c7; color: #92400e; }
.badge-approved, .badge-sent, .badge-reviewed, .badge-succeeded { background: #d1fae5; color: #065f46; }
.badge-rejected, .badge-failed { background: #fee2e2; color: #991b1b; }

/* portfolio_health / status_reports.overall_status buckets */
.badge-on_track { background: #d1fae5; color: #065f46; }
.badge-at_risk { background: #fef3c7; color: #92400e; }
.badge-off_track { background: #fee2e2; color: #991b1b; }
.badge-insufficient_data { background: #e5e7eb; color: #374151; }
.badge-stale_no_recent_data { background: #f3f4f6; color: #374151; } /* #6b7280 failed WCAG AA (~4.39:1); #374151 (reused from other badges on this bg) verified ~9.37:1 */

/* risk_register.severity */
.badge-low { background: #e5e7eb; color: #374151; }
.badge-medium { background: #fef3c7; color: #92400e; }
.badge-high { background: #fee2e2; color: #991b1b; }
.badge-critical { background: #7f1d1d; color: #fff; }

/* backlog_items.type */
.badge-epic { background: #ede9fe; color: #5b21b6; }
.badge-story { background: #dbeafe; color: #1e40af; }
.badge-task { background: #e5e7eb; color: #374151; }

/* backlog_items.scope_fit */
.badge-confirmed_in_scope { background: #d1fae5; color: #065f46; }
.badge-needs_stakeholder_decision { background: #fef3c7; color: #92400e; }
.badge-out_of_scope { background: #fee2e2; color: #991b1b; }

/* projects.status */
.badge-finalized { background: #dbeafe; color: #1e40af; }
.badge-closed { background: #e5e7eb; color: #374151; }

/* projects.operating_mode */
.badge-autonomous { background: #e5e7eb; color: #374151; }
.badge-coaching { background: #ede9fe; color: #5b21b6; }

/* user_orgs.is_owner -- org membership role */
.badge-owner { background: #ede9fe; color: #5b21b6; }
.badge-member { background: #e5e7eb; color: #374151; }

/* task_update_log.status -- pending/auto_applied only; approved/rejected reuse the
   comms_drafts.approval_status badges above (same words, same meaning) */
.badge-pending { background: #fef3c7; color: #92400e; }
.badge-auto_applied { background: #dbeafe; color: #1e40af; }

/* project_milestones.status -- at_risk reuses status_reports' own badge above */
.badge-planned { background: #e5e7eb; color: #374151; }
.badge-completed { background: #d1fae5; color: #065f46; }

/* notifications.status */
.badge-unread { background: #fef3c7; color: #92400e; }
.badge-read { background: #e5e7eb; color: #374151; }
.badge-dismissed { background: #f3f4f6; color: #374151; } /* same WCAG AA fix as badge-stale_no_recent_data above */

/* notifications.kind */
.badge-digest { background: #dbeafe; color: #1e40af; }
.badge-milestone_stress { background: #fee2e2; color: #991b1b; }
.badge-milestone_success { background: #d1fae5; color: #065f46; }
.badge-connection_reauth { background: #fef3c7; color: #92400e; }

/* milestone_change_requests.change_type */
.badge-new_item { background: #ede9fe; color: #5b21b6; }
.badge-update { background: #dbeafe; color: #1e40af; }

/* budget_rollup project status (compute_budget_rollup) */
.badge-under_budget { background: #d1fae5; color: #065f46; }
.badge-over_budget { background: #fee2e2; color: #991b1b; }
.badge-attention_alert { background: #fee2e2; color: #991b1b; }
.badge-no_target { background: #e5e7eb; color: #374151; }

/* merch_orders.fulfillment_status -- pending/failed reuse the shared badges above */
.badge-submitted { background: #dbeafe; color: #1e40af; }
.badge-shipped { background: #d1fae5; color: #065f46; }

.customer-facing-tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #dbeafe;
  color: #1e40af;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.75rem;
}

.inline-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.6rem;
}

.inline-form:last-child {
  margin-bottom: 0;
}

textarea, input[type="text"], input[type="date"], select {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--text);
}

textarea { width: 100%; box-sizing: border-box; }

label {
  display: block;
  margin: 0.5rem 0;
  font-size: 0.85rem;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

button {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.9rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  cursor: pointer;
}

button.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
button.danger { background: var(--input-bg); color: var(--danger-text); border-color: var(--danger-text); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.flash {
  padding: 0.6rem 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.flash-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.flash-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.flash-billing-warning { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

/* Unlike badges (small, self-contained pills that read fine on any background), a flash banner is
   a full-width block -- its light-mode colors read as a jarring bright cutout against the dark
   palette rather than an accent, so it needs its own explicit dark-mode treatment. */

.chat-log {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1rem 0;
}

.chat-message {
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  max-width: 75%;
  white-space: pre-wrap;
}

.chat-user {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
}

.chat-assistant {
  align-self: flex-start;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
}

/* Intake completion-progress estimate */
.intake-progress {
  margin: 0.75rem 0;
}

.intake-progress-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  overflow: hidden;
}

.intake-progress-fill {
  height: 100%;
  background: var(--primary);
  transition: width 0.3s ease;
}

/* Clickable suggestion chips */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.chip {
  background: transparent;
  color: var(--primary-text);
  border: 1px solid var(--primary-text);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.chip:hover {
  background: var(--primary);
  color: #fff;
}

.chip-secondary {
  color: var(--muted);
  border-color: var(--border);
}

.chip-secondary:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

.onboarding-checklist {
  list-style: none;
  padding: 0;
  max-width: 40rem;
}

.onboarding-checklist li {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}

.onboarding-checklist li:last-child {
  border-bottom: none;
}

.onboarding-checklist li.locked {
  opacity: 0.6;
}

/* "At a glance" metrics band -- project detail and portfolio pages. A small grid of stat cards
   so completion/budget/time read as headline numbers instead of buried plain-text links. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}

.stat-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
}

.stat-card .stat-label {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.25rem;
}

.stat-card .stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.stat-card .stat-sub {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

.stat-card.stat-warning .stat-value { color: #b91c1c; }
:root[data-theme="dark"] .stat-card.stat-warning .stat-value { color: #fca5a5; }

/* Quick-links row -- replaces a stack of plain <p><a> links with visible buttons so Resources/
   Metrics/Backlog/etc. read as real navigation, not an easy-to-miss footnote. */
.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.quick-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-subtle);
  text-decoration: none;
  color: var(--text);
  font-size: 0.9rem;
}

.quick-links a:hover { border-color: var(--primary); }

.charter-summary {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
}

.charter-summary pre {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.95rem;
  margin: 0;
}

.typing-dots {
  display: inline-flex;
  gap: 0.2rem;
  vertical-align: middle;
}

.typing-dots span {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: currentColor;
  animation: typing-bounce 1.2s infinite ease-in-out both;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

.voice-controls {
  display: flex;
  gap: 0.75rem;
  margin: 1rem 0;
}

.conflict-tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #fee2e2;
  color: #991b1b;
}

code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.85rem;
}

pre {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.75rem;
  overflow-x: auto;
  font-size: 0.8rem;
}

.site-footer {
  max-width: 900px;
  margin: 2rem auto 1.5rem;
  padding: 0 1.5rem;
  font-size: 0.8rem;
}

.site-footer a {
  color: var(--muted);
}

.theme-toggle-form {
  display: inline-block;
  margin-left: 1rem;
}

.send-mode-toggle {
  margin-left: 0;
  margin-top: 0.5rem;
}

.theme-toggle-form button {
  font-size: 0.8rem;
  /* WCAG 2.2 AA Target Size (Minimum): at least 24 CSS px. min-height/min-width make this a real
     floor rather than relying on label length. */
  padding: 0.35rem 0.5rem;
  min-height: 24px;
  min-width: 24px;
  color: var(--muted);
}

.feedback-form {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
}

.feedback-form label {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  color: var(--muted);
  flex: 1 1 260px;
}

.feedback-form textarea {
  font: inherit;
  font-size: 0.8rem;
  resize: vertical;
}

.feedback-form button {
  font-size: 0.8rem;
  /* WCAG 2.2 AA Target Size (Minimum): at least 24 CSS px. min-height/min-width make this a real
     floor rather than relying on label length. */
  padding: 0.35rem 0.5rem;
  min-height: 24px;
  min-width: 24px;
}

/* schedule/Gantt */
.gantt-svg {
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-subtle);
  margin-bottom: 1rem;
}

.gantt-bar { rx: 3; }
.gantt-bar-not_started { fill: #e5e7eb; }
.gantt-bar-in_progress { fill: #93c5fd; }
.gantt-bar-blocked { fill: #fca5a5; }
.gantt-bar-done { fill: #6ee7b7; }
.gantt-bar-cancelled { fill: #d1d5db; }

/* Portfolio-level project bars are colored by Status Agent bucket (not task status) -- same hues
   as the equivalent .badge-* classes, reused here as SVG fill instead of background/text. */
.gantt-bar-on_track { fill: #6ee7b7; }
.gantt-bar-at_risk { fill: #fde68a; }
.gantt-bar-off_track { fill: #fca5a5; }
.gantt-bar-insufficient_data { fill: #d1d5db; }
.gantt-bar-stale_no_recent_data { fill: #e5e7eb; }

.gantt-milestone { fill: #7c3aed; }

.gantt-dependency {
  vector-effect: non-scaling-stroke;  /* drawn inside the horizontally scaled timeline group */
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-dasharray: 4 2;
}

.gantt-label {
  font-size: 11px;
  fill: var(--text);
}

.gantt-gridline {
  stroke: var(--border);
  stroke-width: 1;
}

.gantt-gridline-label {
  font-size: 9px;
  fill: var(--muted);
}

.gantt-row-band {
  fill: var(--bg-subtle);
}

.terms-text {
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem;
  background: var(--bg-subtle);
}

/* Mobile layout. This app was built desktop-first with no responsive handling at all until now
   (confirmed: no viewport meta tag, no media query anywhere) -- a phone rendered it zoomed out at
   desktop width. Rather than a separate "mobile mode" the user has to switch into, this makes the
   same server-rendered markup reflow automatically at a narrow viewport, which is the lower-risk
   fix (one CSS block, zero template/route changes, nothing that can drift out of sync with the
   desktop layout) and is genuinely what "auto-detect and switch" means for a page that's just
   HTML+CSS with no client-side routing to switch between. */
@media (max-width: 640px) {
  .container {
    padding: 1rem;
  }

  
  
  .filter-bar, .org-nav {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }

  /* Scrolling the table itself (rather than requiring every template to wrap it in a container
     div) keeps this a pure CSS fix -- every page using .table gets it for free. */
  .table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .inline-form {
    flex-wrap: wrap;
  }

  .chat-message {
    max-width: 90%;
  }

  /* Long uppercase enum badges (e.g. NEEDS_STAKEHOLDER_DECISION) refuse to wrap by default,
     which is the single biggest contributor to how much horizontal scrolling a mobile .table
     needs. Confirmed live this needs THREE properties together, not just white-space: normal --
     the underscore-joined value has no space for the browser to treat as a break opportunity, so
     even with wrapping allowed and a max-width set, the "word" simply overflowed past it with
     nowhere to break. overflow-wrap: break-word is what actually lets it split mid-word once it
     doesn't fit. */
  .badge, .customer-facing-tag, .conflict-tag {
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
    max-width: 6.5rem;
  }}

/* The Atari-Adventure-style quest maze (webapp/static/quest.js) -- one shared game engine,
   re-skinned per gamification theme. */
#quest-canvas {
  display: block;
  border: 2px solid var(--border);
  border-radius: 6px;
  margin: 1rem 0;
  max-width: 100%;
  height: auto;
}

.quest-dpad {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 1rem;
}

.quest-dpad div {
  display: flex;
  gap: 0.3rem;
}

.quest-dpad button {
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.1rem;
}

/* Banana Duel (webapp/static/gorillas.js) -- a small Gorillas-style two-player artillery game. */
#gorillas-canvas {
  display: block;
  border: 2px solid var(--border);
  border-radius: 6px;
  margin: 1rem 0;
  max-width: 100%;
  height: auto;
}

/* Hidden text-adventure easter egg */
.secret-game-terminal {
  background: #0b1120;
  color: #d1fae5;
  font-family: "Courier New", monospace;
  padding: 1rem;
  border-radius: 6px;
  margin: 1rem 0;
  max-height: 60vh;
  overflow-y: auto;
  white-space: pre-wrap;
}

.secret-game-line {
  margin-bottom: 0.6rem;
}

.secret-game-command {
  color: #93c5fd;
  font-weight: 600;
}

.secret-game-response {
  color: #d1fae5;
}

/* =====================================================================================
   Demo look (2026-09): brings the app in line with the public interactive demo -- teal-
   biased neutrals, Bricolage Grotesque / IBM Plex type, a dark-green left rail, cards with
   a severity stripe and soft pill badges. Kept as one layer at the end of the file so it
   restyles the existing class names every template already uses, without rewriting them.
   Its colour and font tokens live in the :root blocks at the top of this file.
   ===================================================================================== */
/* Fonts are served from this app (webapp/static/fonts, SIL Open Font License 1.1) rather than
   Google Fonts, so a page view never sends the visitor's IP address to a third party. Latin subset only. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/bricolage-grotesque-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/bricolage-grotesque-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.55; }
:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }

/* ---------- shell: left rail + main column ---------- */
.app-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.app-shell-bare { grid-template-columns: minmax(0, 1fr); }
.main-col { min-width: 0; display: flex; flex-direction: column; }
.rail {
  background: var(--rail); color: var(--rail-ink);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; box-sizing: border-box;
}
.rail-brand {
  display: flex; align-items: center; gap: 10px; padding: 0 6px;
  font: 700 21px/1 var(--font-display); letter-spacing: -0.02em; color: #fff; text-decoration: none;
}
.rail-brand:visited { color: #fff; }
.rail-mark { width: 28px; height: 28px; flex: none; }
.rail-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* The menu wrapper only matters on phones; on wider screens the rail lays out as before. */
.rail-menu { display: contents; }
.rail-menu-toggle { display: none; }
.rail-nav { display: grid; gap: 2px; }
.rail-nav a, .rail-link {
  display: block; padding: 9px 10px; border-radius: 8px;
  color: var(--rail-ink); text-decoration: none; font-size: 0.92rem; font-weight: 500;
}
.rail-nav a:visited, .rail-link:visited { color: var(--rail-ink); }
.rail-nav a:hover, .rail-link:hover, .rail-nav a.active { background: var(--rail-hi); color: #fff; }
/* Pilot setup: the projects you run only matter if you manage projects (pilot_setup.html). */
form:has(input[name="work_role"][value="leader"]:checked) .pm-projects { display: none; }
/* Five destinations: an open group's own pages sit beneath it (base.html). */
.rail-nav a.open { color: #fff; font-weight: 600; }
.rail-nav a.rail-sub { padding-left: 24px; font-size: 0.92em; }
.rail-nav a:has(.rail-count) { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rail-count {
  min-width: 20px; padding: 1px 6px; border-radius: 99px; box-sizing: border-box; text-align: center;
  background: rgba(255, 255, 255, 0.14); color: #fff; font: 600 0.7rem/1.5 var(--font-mono);
}
.rail-nav-secondary { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.rail-label {
  padding: 0 10px 4px; font: 500 11px/1.3 var(--font-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--rail-muted);
}
.rail-foot { margin-top: auto; display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.rail-user { padding: 8px 10px; display: grid; gap: 2px; font-size: 0.82rem; }
.rail-email { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-role { justify-self: start; margin-top: 2px; }
.rail-logout { margin: 4px 10px 0; }
.rail-logout button {
  width: 100%; background: transparent; color: var(--rail-ink);
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 8px; min-height: 34px;
}
.rail-logout button:hover { background: var(--rail-hi); color: #fff; }

.container { max-width: 1100px; width: 100%; box-sizing: border-box; margin: 0 auto; padding: 28px clamp(16px, 3.5vw, 44px) 64px; flex: 1; }

/* ---------- type ---------- */
h1 { font: 700 clamp(1.7rem, 3vw, 2.2rem)/1.15 var(--font-display); letter-spacing: -0.02em; margin: 0 0 0.4rem; text-wrap: balance; }
h2 { font: 600 1.2rem/1.3 var(--font-display); letter-spacing: -0.01em; border-bottom: none; padding-bottom: 0; margin-top: 2.2rem; text-wrap: balance; }
h3 { font: 600 1.05rem/1.3 var(--font-display); }
.muted { color: var(--muted); }
a, a:visited { color: var(--link); }

/* ---------- cards ---------- */
.stat-card, .card, .panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow);
}
.stat-card { position: relative; padding: 18px 20px 16px 24px; }
.stat-card::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px;
  border-radius: 0 3px 3px 0; background: var(--line-strong);
}
.stat-card.stat-warning::before { background: var(--crit); }
.stat-card h3 { font-size: 1.1rem; margin: 0.5rem 0 0.35rem; }
.stat-card .stat-value { font-family: var(--font-display); }
.stat-grid { gap: 14px; }

/* Today's attention queue reads as one list, like the demo, with the stripe colored by severity. */
.attention-list { grid-template-columns: minmax(0, 1fr); }
.attention-list .stat-card h3 { font-size: 1.15rem; }
.stat-card.sev-low::before { background: var(--watch); }
.stat-card.sev-medium::before { background: var(--warn); }
.stat-card.sev-high::before, .stat-card.sev-critical::before { background: var(--crit); }

/* ---------- pills (badges) ---------- */
.badge {
  text-transform: none; letter-spacing: 0.01em; font-size: 0.75rem; font-weight: 600;
  padding: 0.25rem 0.6rem; background: var(--bg-subtle); color: var(--ink-2);
}
.badge-approved, .badge-sent, .badge-reviewed, .badge-succeeded, .badge-on_track,
.badge-confirmed_in_scope, .badge-completed, .badge-milestone_success, .badge-under_budget,
.badge-shipped { background: var(--ok-soft); color: var(--ok); }
.badge-draft, .badge-new, .badge-at_risk, .badge-medium, .badge-needs_stakeholder_decision,
.badge-pending, .badge-unread, .badge-connection_reauth { background: var(--warn-soft); color: var(--warn); }
.badge-rejected, .badge-failed, .badge-off_track, .badge-high, .badge-out_of_scope,
.badge-milestone_stress, .badge-over_budget, .badge-attention_alert { background: var(--crit-soft); color: var(--crit); }
.badge-critical { background: var(--crit); color: var(--surface); }
.badge-story, .badge-finalized, .badge-auto_applied, .badge-digest, .badge-update,
.badge-submitted { background: var(--watch-soft); color: var(--watch); }
.badge-epic, .badge-coaching, .badge-owner, .badge-new_item { background: var(--purple-soft); color: var(--purple); }
.badge-insufficient_data, .badge-stale_no_recent_data, .badge-low, .badge-task, .badge-closed,
.badge-autonomous, .badge-member, .badge-planned, .badge-read, .badge-dismissed,
.badge-no_target { background: var(--bg-subtle); color: var(--ink-2); }
.customer-facing-tag { background: var(--brand-soft); color: var(--primary-text); }
.badge-private { background: var(--brand-soft); color: var(--primary-text); }

/* ---------- controls ---------- */
button {
  border-radius: 8px; min-height: 38px; padding: 0.45rem 0.95rem; font-weight: 600;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
}
button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary-text); }
button.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
button.primary:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }
button.danger { background: var(--surface); color: var(--crit); border-color: var(--crit); }
textarea, input[type="text"], input[type="date"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"], select {
  border-radius: 8px; border: 1px solid var(--line-strong); background: var(--input-bg);
  color: var(--text); padding: 0.5rem 0.65rem;
}
textarea:focus, input:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--brand-soft); }
label { color: var(--ink-2); font-weight: 500; }

/* ---------- tables and lists ---------- */
/* No overflow:hidden here -- the mobile .table rule above relies on overflow-x:auto so wide tables
   scroll sideways on phones. The rounded header corners come from the first/last header cells. */
.table { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; border-collapse: separate; border-spacing: 0; }
.table thead th:first-child { border-top-left-radius: 11px; }
.table thead th:last-child { border-top-right-radius: 11px; }
.table th {
  font: 500 0.72rem/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); background: var(--bg-subtle);
}
.table th, .table td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); }
.table tr:last-child td { border-bottom: none; }
.list li { border-bottom-color: var(--border); }

/* ---------- tabs (filter-bar) and collapsibles ---------- */
.filter-bar {
  display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px;
  border-radius: 10px; background: var(--bg-subtle);
}
.filter-bar a { padding: 0.4rem 0.9rem; border-radius: 8px; color: var(--ink-2); font-weight: 600; font-size: 0.9rem; }
.filter-bar a.active { background: var(--surface); color: var(--text); border-bottom: none; box-shadow: var(--shadow); }
/* The same tabs as buttons, where switching saves a choice (Today's Portfolio / My projects). */
.filter-bar button { padding: 0.4rem 0.9rem; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.filter-bar button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.today-focus { margin-bottom: 1rem; }
.today-project-group { margin-bottom: 1.25rem; }
.today-project-group h3 { margin-bottom: 0.5rem; }
details.collapsible summary { border-bottom-color: var(--border); padding-bottom: 0.5rem; }

/* ---------- flash banners ---------- */
.flash { border-radius: 10px; }
.flash-error { background: var(--crit-soft); color: var(--crit); border-color: var(--crit); }
.flash-success { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.flash-billing-warning { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
:root[data-theme="dark"] .flash-error { background: var(--crit-soft); color: var(--crit); border-color: var(--crit); }
:root[data-theme="dark"] .flash-success { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
:root[data-theme="dark"] .flash-billing-warning { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }

/* ---------- chips, quotes, chat ---------- */
.chip { border-radius: 99px; }
blockquote { margin: 0.6rem 0; padding: 0.6rem 0.9rem; border-left: 3px solid var(--line-strong); background: var(--bg-subtle); border-radius: 0 8px 8px 0; }
.chat-assistant { background: var(--surface); border-color: var(--border); }
.agent-quote-bubble { background: var(--surface); }
.agent-quote-bubble::after { border-color: transparent var(--surface) transparent transparent; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--border); background: transparent; color: var(--muted); padding: 18px clamp(16px, 3.5vw, 44px); }
.feedback-form textarea { background: var(--surface); }

/* Inline forms (a label plus a control and a button) wrap instead of running off narrow screens. */
.inline-form { flex-wrap: wrap; }
select, input, textarea { max-width: 100%; }
label select { display: block; margin-top: 4px; }
.stat-card { min-width: 0; }
.stat-card .inline-form > label { flex: 1 1 100%; min-width: 0; }
.stat-card select { width: 100%; box-sizing: border-box; }

/* ---------- Today cards: title link and review button ---------- */
.card-title-link, .card-title-link:visited { color: var(--text); text-decoration: none; }
.card-title-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.card-review { margin: 0.9rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }
.button-link, .button-link:visited {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0.35rem 0.9rem;
  border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text); font-weight: 600; font-size: 0.9rem; text-decoration: none;
}
.button-link:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---------- Today item detail page (matches the demo's finding detail) ---------- */
.back-link { margin: 0 0 1rem; font-size: 0.92rem; }
.back-link a { text-decoration: none; }
.item-head { max-width: 860px; }
.item-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 0.6rem; }
.item-kind { font: 500 0.75rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.item-lede { font-size: 1.05rem; color: var(--ink-2); max-width: 72ch; margin: 0.4rem 0 0; }
.item-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 1rem 0 0; font-size: 0.88rem; }
.item-facts div { display: flex; gap: 6px; }
.item-facts dt { color: var(--muted); }
.item-facts dd { margin: 0; font-weight: 600; }
.item-section { margin-top: 2.2rem; }
.item-section h2 { margin: 0 0 0.3rem; }
.section-intro { color: var(--muted); font-size: 0.92rem; margin: 0 0 0.9rem; max-width: 72ch; }
.item-actions { padding: 18px 20px; }
.item-next { margin: 0 0 0.8rem; }
.change-table { margin: 0 0 1rem; box-shadow: none; width: 100%; table-layout: fixed; display: table !important; white-space: normal !important; }
.change-table th, .change-table td { overflow-wrap: anywhere; }
@media (max-width: 480px) { .change-table th, .change-table td { padding: 0.55rem 0.6rem; letter-spacing: 0; } }
.change-table del { color: var(--crit); }
.change-table ins { color: var(--ok); text-decoration: none; font-weight: 600; }

.timeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 12px; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 14px; bottom: 14px; width: 2px; background: var(--line-strong); }
.ev { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; position: relative; }
.ev-dot {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary); color: #fff; font: 600 0.8rem/1 var(--font-body);
  box-shadow: 0 0 0 4px var(--bg);
}
.ev-body { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.ev-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; font-size: 0.85rem; color: var(--muted); }
.ev-meta strong { color: var(--text); }
.ev-when { font: 400 0.8rem/1.4 var(--font-mono); }
.ev-context { margin: 0.35rem 0 0; font-weight: 600; font-size: 0.9rem; }
.ev-text { margin: 0.35rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ev-note { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--muted); }
.ev-locked { font-style: italic; }

.talks { display: grid; gap: 12px; }
.talk { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.talk-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 14px; background: var(--bg-subtle); font-size: 0.88rem; }
.talk .ev-context { padding: 0 14px; }
.talk blockquote { margin: 10px 14px 14px; white-space: pre-wrap; overflow-wrap: anywhere; }

.reason { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 10px; counter-reset: r; }
.reason li { counter-increment: r; display: grid; grid-template-columns: 28px 1fr; gap: 10px; }
.reason li::before {
  content: counter(r); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand-soft); color: var(--primary-text); font: 600 0.75rem/1 var(--font-mono);
}
.tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; border: 1px solid currentColor;
  font: 500 0.75rem/1.5 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 1px;
}
.tag-evidence { color: var(--ok); }
.tag-inference { color: var(--watch); }
.tag-policy { color: var(--warn); }
.assumptions { margin-top: 1rem; padding: 12px 14px; border-left: 3px solid var(--watch); background: var(--watch-soft); border-radius: 0 8px 8px 0; font-size: 0.92rem; }
.assumptions ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.related-link { margin-top: 1.6rem; }

/* ---------- page head: eyebrow, headline, lede (as on the demo's Today) ---------- */
.eyebrow { font: 500 0.75rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0; }
.eyebrow + h1 { margin-top: 6px; }
.lede { margin-top: 8px; color: var(--ink-2); max-width: 72ch; }

/* ---------- Today's findings: pill + eyebrow, headline, why, then a footer with projects and actions ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font: 600 0.75rem/1 var(--font-body); letter-spacing: 0.02em; padding: 5px 8px; border-radius: 99px;
}
.pill-crit { background: var(--crit-soft); color: var(--crit); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-watch { background: var(--watch-soft); color: var(--watch); }
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.attention-list { margin-top: 20px; gap: 12px; }
.stat-card.finding { display: grid; gap: 10px; }
.stat-card.finding > * { margin: 0; }
.finding-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.attention-list .stat-card.finding h3 { font: 600 1.12rem/1.3 var(--font-display); letter-spacing: -0.005em; margin: 0; }
.finding .why { color: var(--ink-2); font-size: 0.92rem; max-width: 78ch; }
.finding .next-step { font-size: 0.92rem; }
.finding details summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--primary-text); }
.finding details[open] { display: grid; gap: 8px; }
.finding details[open] > * { margin: 0; }
.finding-foot {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.finding-projects { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.finding-projects:empty { display: none; }
.finding-foot .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 0 auto; }
.foot-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; margin-left: auto; }
.foot-actions .actions { margin: 0; }
.finding-foot .actions form { margin: 0; }
.finding-foot .actions button { min-height: 32px; padding: 4px 10px; font-size: 0.82rem; }
.project-chip, .project-chip:visited {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 99px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font-size: 0.82rem; font-weight: 500; text-decoration: none;
}
.project-chip::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-soft);
  box-shadow: inset 0 0 0 5px var(--brand-soft), inset 0 0 0 9px var(--primary);
}
.project-chip:hover { border-color: var(--primary); color: var(--primary-text); }

/* ---------- collapsible sections read as cards, like the demo's "items checked and fine" ---------- */
details.collapsible {
  margin-top: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  padding: 0 18px 2px; min-width: 0;
}
details.collapsible > summary { margin: 0 -18px; padding: 14px 18px; border-bottom: none; }
details.collapsible[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: 14px; }
details.collapsible[open] { padding-bottom: 16px; }
details.collapsible > :not(summary) { max-width: 100%; box-sizing: border-box; }
/* The heading inside a summary sits on the marker's line, whatever its level. */
details.collapsible summary :is(h2, h3) { display: inline; margin: 0; font-size: 1.05rem; }

/* ---------- schedule chart in the demo palette ---------- */
.gantt-svg { box-sizing: border-box; border-radius: 10px; }
.gantt-bar-on_track, .gantt-bar-done { fill: var(--ok-soft); stroke: var(--ok); stroke-width: 1; }
.gantt-bar-at_risk, .gantt-bar-in_progress { fill: var(--warn-soft); stroke: var(--warn); stroke-width: 1; }
.gantt-bar-off_track, .gantt-bar-blocked { fill: var(--crit-soft); stroke: var(--crit); stroke-width: 1; }
.gantt-milestone { fill: var(--primary); }

/* ---------- detail page head: back link and a row of labelled facts ---------- */
.facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 0 20px; font-size: 0.82rem; color: var(--muted); }
.facts:empty { display: none; }
.facts > span { display: grid; gap: 3px; }
.facts b { color: var(--text); font-weight: 600; font-size: 0.92rem; }

/* Discovered-work cards read like the findings above them, with their three choices in the footer. */
.discovery-card .facts { margin: 0; }
.discovery-foot { justify-content: flex-start; gap: 8px 10px; }
.discovery-foot form { margin: 0; }
.discovery-foot .link-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.discovery-foot .link-form > label { flex: 0 1 auto; }
.discovery-foot .link-form label select { display: inline-block; margin: 0; width: auto; max-width: 220px; }
.discovery-foot form:last-child { margin-left: auto; }

/* ---------- Portfolio summary: headline tiles, one row per project, cross-project risks ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 20px 0; }
.kpi {
  display: grid; gap: 4px; padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
}
.kpi b { font: 700 1.75rem/1.1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--muted); font-size: 0.86rem; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.portfolio-table { width: 100%; }
.portfolio-table td { vertical-align: top; }
.portfolio-table .row-title, .portfolio-table .row-title:visited { font-weight: 700; color: var(--text); text-decoration: none; }
.portfolio-table .row-title:hover { color: var(--primary-text); text-decoration: underline; }
.small { font-size: 0.8rem; }
.meter { height: 6px; width: 120px; max-width: 100%; background: var(--bg-subtle); border-radius: 99px; margin: 6px 0 2px; overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 99px; background: var(--primary); }
.meter-over span { background: var(--crit); }
.page-tools { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-top: 24px; }
.page-tools .actions, .page-tools .quick-links { margin: 0; }
.risk-list { display: grid; gap: 10px; }
.risk-row { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.risk-row > * { margin: 0; }
.risk-theme { font-weight: 600; }

@media (max-width: 640px) {
  .portfolio-table thead { display: none; }
  .portfolio-table, .portfolio-table tbody, .portfolio-table tr, .portfolio-table td { display: block; width: 100%; box-sizing: border-box; }
  .portfolio-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 14px; border-bottom: 1px solid var(--border); }
  .portfolio-table tr:last-child { border-bottom: none; }
  .portfolio-table td { padding: 0; border: 0; }
  .portfolio-table td.cell-name { grid-column: 1 / -1; }
  .portfolio-table td[data-label]:not(.cell-name)::before {
    content: attr(data-label); display: block; margin-bottom: 3px;
    font: 500 0.66rem/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  }
  .portfolio-table .meter { width: 100%; }}

/* ---------- item detail: "Use this value" choices for a contradiction ---------- */
.choice {
  display: grid; gap: 8px; align-content: start; padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
}
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin: 12px 0; }
.choice > *, .choice form { margin: 0; }
.choice-value { font: 700 1.4rem/1.15 var(--font-display); letter-spacing: -0.01em; }

.finding-link, .finding-link:visited { color: inherit; text-decoration: none; }
.finding-link:hover { color: var(--primary-text); text-decoration: underline; }
.btn-link, .btn-link:visited {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--text);
  font-weight: 600; font-size: 0.82rem; text-decoration: none;
}
.btn-link:hover { border-color: var(--primary); color: var(--primary-text); }


/* ---------- project page: tool row ---------- */
.tool-row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-start; margin: 18px 0 8px; }
.tool { display: grid; gap: 4px; max-width: 260px; margin: 0; }
.tool button { justify-self: start; }
.tool-end { margin-left: auto; max-width: none; }
.tool-end .actions { margin: 0; }
.risk-row .finding-foot { padding-top: 8px; }
.risk-row .finding-foot form { margin: 0; }


/* ---------- Sources: one card per connection, like the demo's tool grid ---------- */
.source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; margin: 12px 0; }
.source-card {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
}
.source-card form { margin: 0; }
.manual-options { margin: 8px 0 16px; }
.tool-update { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; font-size: 0.9rem; }
.tool-note { margin: 6px 0 0; }
.source-card .source-more { grid-column: 1 / -1; margin: 4px 0 0; }
.gantt-scroll { overflow-x: auto; margin-bottom: 1rem; }
.gantt-scroll .gantt-svg { min-width: 720px; margin-bottom: 0; }
@media (pointer: coarse) {
  /* Fingers need 44px: link-buttons and the folded "Run it now" / "Add by hand" headers. */
  .btn-link { min-height: 44px; padding: 8px 14px; }
  .manual-options > summary { display: flex; align-items: center; min-height: 44px; }
}
.manual-options > summary { cursor: pointer; color: var(--muted, inherit); font-size: 0.9rem; }
.manual-options[open] > summary { margin-bottom: 8px; }
.scan-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 16px; }
.analysis-line, .analysis-cost { margin: -6px 0 8px; max-width: 72ch; }
.analysis-cost { color: var(--ink-2); margin-bottom: 16px; }
.history-link { margin: 1.5rem 0; }
.stack-form { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.stack-form label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.choice-list { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.stack-form .choice-list label, .stack-form .checkbox-row { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
.choice-list input[type="radio"], .checkbox-row input[type="checkbox"] { flex: none; width: auto; margin-top: 4px; }
.choice-list label > span, .checkbox-row > span { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.choice-list .small, .checkbox-row .small { flex-basis: 100%; }
.setup-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 10px; }
.setup-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.setup-list li span { flex: 1 1 320px; }
.setup-list .btn-link { white-space: nowrap; }
.source-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.source-actions .btn-link { white-space: nowrap; }
.source-card button { min-height: 32px; padding: 4px 10px; font-size: 0.82rem; }
.source-off { background: transparent; box-shadow: none; border-style: dashed; }
.source-off .source-dot { background: var(--line-strong); }
.source-dot { box-shadow: none; }
.source-body { display: grid; gap: 2px; min-width: 0; }
.source-body .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accounts-grid .source-body .small { white-space: normal; }  /* the services an account covers are the point */
.mail-choices { border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 1rem 0.8rem; }
.freshness { display: block; }
.freshness-bad { color: var(--warn); }
.item-age { margin-left: auto; }
.mail-choices legend { padding: 0 0.3rem; font-weight: 600; }
.paste-form { display: grid; gap: 10px; max-width: 720px; }
.paste-row { display: flex; flex-wrap: wrap; gap: 10px; }
.paste-form label { display: grid; gap: 4px; }
.paste-form textarea { width: 100%; box-sizing: border-box; }
.paste-form button { justify-self: start; }

.sources-summary {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
  margin-top: 18px; padding: 12px 18px; border-radius: 12px; background: var(--bg-subtle);
}
.sources-summary p { margin: 0; color: var(--ink-2); }

/* ---------- phones and tablets: rail becomes a top bar ---------- */
@media (max-width: 860px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; height: auto; padding: 12px 16px; gap: 10px; }
  .rail-nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .rail-nav a { padding: 7px 10px; }
  .rail-nav-secondary { padding-top: 0; border-top: none; }
  .rail-label { display: none; }
  .rail-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .rail-user { display: none; }
  .rail-logout { margin: 0; }
  .rail-logout button { width: auto; }
  /* Pages start with their content: the menu folds behind a Menu button (only when scripts run,
     so it can always be opened again). */
  .js .rail-menu-toggle {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
    background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px;
    font: 600 0.95rem/1 var(--font-body); cursor: pointer;
  }
  .js .rail-menu-toggle:hover { background: var(--rail-hi); }
  .js .rail-menu-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .rail-menu-chev { transition: transform 0.15s ease; }
  .js .rail.menu-open .rail-menu-chev { transform: rotate(180deg); }
  .js .rail-menu { display: none; }
  .js .rail.menu-open .rail-menu { display: grid; gap: 10px; }
  .rail-nav a, .rail-link { min-height: 44px; box-sizing: border-box; display: flex; align-items: center; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) { .rail-menu-chev { transition: none; } }

/* Layered schedule (phase > deliverable > task) with sources on every line. */
.sched-controls { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 0.5rem 0 0.75rem; }
.sched-controls .filter-bar { margin: 0; }
.sched-hint { font-size: 0.9rem; }
.gantt-bar-group { fill: var(--ink-2); height: 5px; transform: translateY(19px); }
.sched-scroll { overflow-x: auto; }
.sched-lines { min-width: 640px; }
.sched-lines td { vertical-align: top; }
.sched-lines tr.sched-lv0.sched-group td { background: var(--bg-subtle); font-weight: 600; }
.sched-lines tr.sched-lv1 .sched-work { padding-left: 1.75rem; }
.sched-lines tr.sched-lv2 .sched-work { padding-left: 3.25rem; }
.sched-name { display: flex; gap: 6px; align-items: flex-start; }
.sched-toggle { display: inline-block; width: 1.2rem; text-align: center; text-decoration: none; color: var(--ink-2); flex: none; }
.sched-toggle-sp { display: inline-block; width: 1.2rem; flex: none; }
.sched-sources { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 4px 0 0 1.6rem; font-size: 0.8rem; color: var(--ink-2); font-weight: 400; }
.sched-src b { font-weight: 600; }
.sched-src.restricted { color: var(--muted); }
.sched-flag { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--bg-subtle); color: var(--ink-2); }
.sched-flag-critical { background: var(--crit-soft); color: var(--crit); }
.sched-hidden-critical { margin: 0 0 0.75rem; padding: 0.6rem 0.8rem; border-left: 3px solid var(--warn); border-radius: 8px; background: var(--warn-soft); color: var(--text); }
.sched-flags-edit { margin-top: 0.25rem; font-size: 0.85rem; }
.task-flags { border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.8rem; margin: 0.75rem 0; display: flex; flex-direction: column; gap: 0.4rem; }
.task-flags legend { font-weight: 600; padding: 0 0.25rem; }
.task-flags label.checkbox { display: flex; gap: 0.4rem; align-items: baseline; font-weight: normal; }
.task-flags-people { display: flex; flex-direction: column; gap: 0.2rem; max-height: 10rem; overflow-y: auto; }
.task-flags-label { font-size: 0.9rem; }
.plan-home { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.sched-dates { white-space: nowrap; font-family: var(--font-mono); font-size: 0.82rem; }
.sched-disagree { color: var(--warn); font-family: var(--font-body); white-space: normal; }
.sched-state { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; background: var(--bg-subtle); color: var(--ink-2); }
.sched-state-done { background: var(--ok-soft); color: var(--ok); }
.sched-state-late, .sched-state-blocked { background: var(--crit-soft); color: var(--crit); }
.sched-state-in_progress { background: var(--watch-soft); color: var(--watch); }

/* ---------- coaching ---------- */
.badge-private { background: var(--brand-soft); color: var(--primary-text); }
.flash-info { background: var(--brand-soft); color: var(--text); border: 1px solid var(--line-strong); }
.coach-private { margin: 1rem 0; }
.coach-form { display: grid; gap: 0.6rem; max-width: 820px; }
.coach-form textarea, .coach-form input[type="text"] { width: 100%; max-width: 100%; font-family: inherit; }
.coach-form fieldset.coach-type { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.coach-type legend { font-weight: 600; margin-bottom: 0.3rem; }
.coach-type label, .coach-consent { display: inline-flex; gap: 0.45rem; align-items: center; font-weight: 400; }
.coach-hint { font-size: 0.85rem; margin: 0; }
.coach-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.coach-tile { display: grid; gap: 6px; align-content: start; min-width: 0; }
.coach-score { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-weight: 600; font-size: 0.9rem; }
.coach-pips { display: inline-flex; gap: 3px; }
.coach-pips .pip { width: 18px; height: 6px; border-radius: 3px; background: var(--line-strong); }
.coach-pips .pip.on { background: var(--primary); }
.coach-looks { font-size: 0.82rem; }
.coach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.coach-list li { display: grid; gap: 4px; }
.coach-focus { display: grid; gap: 4px; margin: 1rem 0; }
.coach-moments { display: grid; gap: 14px; }
.coach-moment { display: grid; gap: 10px; }
.coach-quote { margin: 0; padding: 4px 0 4px 12px; border-left: 3px solid var(--line-strong); }
.coach-mine { border-left-color: var(--primary); background: var(--brand-soft); border-radius: 0 6px 6px 0; padding: 6px 12px; }
.coach-try { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; background: var(--bg-subtle); }
.coach-try .muted { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
@media (max-width: 900px) { .coach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .coach-grid { grid-template-columns: 1fr; } }

/* ---------- guidance in the workflow: people side and coaching tips ---------- */
.people-line { font-size: 0.92rem; }
.tag-inference { display: inline-block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.05rem 0.4rem; border-radius: 999px; border: 1px solid currentColor; color: var(--watch, var(--muted)); vertical-align: 1px; }
.people-side { margin-top: 12px; }
.people-side h3 { margin: 0 0 4px; font-size: 1rem; }
.people-side ul { margin: 6px 0 0; padding-left: 1.1rem; display: grid; gap: 6px; }
.coach-tip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; margin-top: 10px; padding: 9px 12px; border: 1px dashed var(--primary); border-radius: 8px; background: var(--brand-soft); color: var(--text); text-decoration: none; font-size: 0.9rem; min-height: 44px; }
.coach-tip:hover { border-style: solid; }
.coach-tip .ct-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary-text); white-space: nowrap; }
.coach-tip .ct-go { color: var(--primary-text); font-weight: 600; white-space: nowrap; }
.coach-moment:target { box-shadow: 0 0 0 2px var(--primary); }
@media (max-width: 560px) { .coach-tip { grid-template-columns: 1fr; } }

/* ---------- industry watch ---------- */
.industry-today { margin-top: 1rem; }
.industry-tip { border-color: var(--watch); background: var(--watch-soft); }
.industry-tip .ct-label, .industry-tip .ct-go { color: var(--watch); }
.industry-list { display: grid; gap: 14px; }
.industry-item { display: grid; gap: 8px; }
.industry-item h3 { margin: 0; }
.industry-item:target { box-shadow: 0 0 0 2px var(--primary); }
.industry-note { font-size: 0.8rem; margin: 0; }

/* ---------- the brief (industry watch as a newspaper) ---------- */
.paper { --serif: Georgia, "Iowan Old Style", "Times New Roman", serif; max-width: 960px; }
.paper-eyebrow { margin: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
.masthead { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; justify-content: space-between; border-top: 3px double var(--text); border-bottom: 1px solid var(--line-strong); padding: 10px 0 8px; margin: 6px 0 12px; }
.paper-title { font: 700 2rem/1.1 var(--serif); }
.paper-issue { font-size: 0.8rem; font-weight: 500; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.06em; }
.paper-sections { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.paper-sections a { padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.85rem; text-decoration: none; color: var(--text); min-height: 36px; display: inline-flex; align-items: center; }
.paper-sections a[aria-current="page"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.story { display: grid; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--line-strong); }
.story:target { background: var(--brand-soft); box-shadow: 0 0 0 8px var(--brand-soft); }
.story .kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-text); }
.story .kicker.act { color: var(--warn, var(--primary-text)); }
.story-h { margin: 0; font: 700 1.35rem/1.25 var(--serif); }
.story.lead .story-h { font-size: 2rem; line-height: 1.15; }
.story-h a { color: inherit; text-decoration: none; }
.story-h a:hover { text-decoration: underline; }
.story .byline { font-size: 0.8rem; opacity: 0.75; }
.story .dek { margin: 0; font: 400 1.02rem/1.6 var(--serif); }
.story.lead .dek { font-size: 1.12rem; }
.story .for-us { margin: 0; padding-left: 12px; border-left: 3px solid var(--primary); font-size: 0.92rem; }
.story-next { margin: 0; font-size: 0.85rem; opacity: 0.85; }
.story-people { font-size: 0.85rem; }
.story-people summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; }
.story-people ul { margin: 6px 0 0; padding-left: 1.1rem; display: grid; gap: 4px; }
.story-actions { display: flex; gap: 8px; }
.story-actions button { min-height: 32px; padding: 0.2rem 0.7rem; font-size: 0.82rem; }
.paper-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.paper-empty { margin: 24px 0; }
.tune { margin-top: 24px; }
.tune > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; min-height: 44px;
  list-style: none; position: relative; padding-right: 44px; border-radius: 8px; }
/* The flex summary hides the browser's own arrow, so draw one: a down chevron that flips when open. */
.tune > summary::-webkit-details-marker { display: none; }
.tune > summary::after {
  content: "\25BE"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px;
  border: 1.5px solid currentColor; background: var(--brand-soft); color: var(--primary-text); font-size: 1.25rem; line-height: 1;
  transition: transform 0.15s ease, background 0.15s ease;
}
.tune[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
.tune > summary:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.tune > summary:hover::after { background: var(--primary); border-color: var(--primary); color: #fff; }
.tune > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tune > summary::after { transition: none; } }
.tune-body { display: grid; gap: 18px; margin-top: 14px; }
.tune-h { margin: 0 0 6px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; font-weight: 600; }
.tune-built { margin: 0; padding-left: 1.1rem; display: grid; gap: 4px; }
.tune-form { display: grid; gap: 0.5rem; max-width: 720px; }
.tune-form input[type="text"], .tune-form textarea, .tune-form select { width: 100%; max-width: 100%; }
.tune-focus { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tgl-label { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; }
.tchips { display: flex; flex-wrap: wrap; gap: 6px; }
.tchip { font-size: 0.85rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-subtle); }
.tchip small { opacity: 0.7; }
.tsugg { display: grid; gap: 6px; }
.tsugg button, .tsugg-link { display: block; width: 100%; text-align: left; border: 1px dashed var(--primary); background: transparent; border-radius: 8px; padding: 7px 10px; color: var(--text); text-decoration: none; font-weight: 400; min-height: 40px; }
.tsugg small { opacity: 0.75; }
.weight-row { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.weight-row legend { float: left; min-width: 9rem; font-weight: 600; }
.weight-row label { display: inline-flex; gap: 4px; align-items: center; font-weight: 400; }
.tune-hint { font-size: 0.82rem; margin: 0; }
.focus-badge { justify-self: start; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary-text); background: var(--brand-soft); border-radius: 999px; padding: 2px 8px; }
@media (max-width: 720px) { .paper-columns { grid-template-columns: 1fr; } .story.lead .story-h { font-size: 1.6rem; } }

/* ---------- guidance under a suggestion: pills that open their own panels ---------- */
.guide-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.gb-lead { font-size: 0.85rem; opacity: 0.75; }
.gb { --c: var(--primary); display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--c); background: transparent; color: var(--text); border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.85rem; font-weight: 600; min-height: 40px; cursor: pointer; }
.gb.ind { --c: var(--watch, var(--primary)); }
.gb.ppl { --c: var(--warn, var(--primary)); }
.gb:hover { background: color-mix(in srgb, var(--c) 12%, transparent); }
.gb .gb-act { font-weight: 500; font-size: 0.75rem; opacity: 0.75; display: inline-flex; align-items: center; gap: 4px; }
.gb .gb-act::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.gb[aria-expanded="true"] { background: var(--c); color: var(--bg); }
.gb[aria-expanded="true"] .gb-act { opacity: 0.9; }
.gb[aria-expanded="true"] .gb-act::after { transform: rotate(-135deg) translateY(-1px); }
.gb-panels { display: grid; gap: 12px; margin-top: 12px; }
.gb-panels:empty { display: none; }
.gb-panel { --c: var(--primary); border-left: 4px solid var(--c); background: var(--bg-subtle); border-radius: 0 10px 10px 0; padding: 12px 16px; display: grid; gap: 8px; }
.gb-panel.ind { --c: var(--watch, var(--primary)); }
.gb-panel.ppl { --c: var(--warn, var(--primary)); }
.gb-panel h4 { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c); }
.gb-panel p { margin: 0; }
.gb-panel ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 10px; }
.gb-link { font-weight: 600; font-size: 0.85rem; }
/* folded sections on a finding's page */
details.fold > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 52px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h2 { margin: 0; }
details.fold .fold-count { font-size: 0.85rem; opacity: 0.7; }
details.fold .fold-act { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--primary-text); border: 1.5px solid var(--primary); border-radius: 999px; padding: 0.2rem 0.8rem; min-height: 32px; }
details.fold .fold-act::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
details.fold .fa-hide { display: none; }
details.fold[open] .fa-hide { display: inline; }
details.fold[open] .fa-show { display: none; }
details.fold[open] .fold-act { background: var(--primary); color: var(--bg); }
details.fold[open] .fold-act::after { transform: rotate(-135deg) translateY(-1px); }
details.fold[open] > summary { margin-bottom: 12px; }
details.fold:hover > summary h2 { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Today detail switch ---------- */
.detail-toggle { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 4px; }
.detail-toggle button { min-height: 36px; padding: 0.3rem 0.8rem; font-size: 0.85rem; border-radius: 999px; }
.detail-toggle button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--bg); }
#today-cards[data-detail="high"] .card-body { display: none; }
#today-cards[data-detail="high"] .stat-card { gap: 6px; }
#today-cards[data-detail="more"] .card-extra { display: none; }

/* ---------- removed-from-Today notice ---------- */
.undo-note { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 12px 0; padding: 12px 16px; border-radius: 10px; background: var(--bg-subtle); border: 1px solid var(--line-strong); }
.undo-note button { margin-left: auto; }
.flash-info { background: var(--brand-soft); color: var(--text); border: 1px solid var(--line-strong); }

/* Touch targets (UX review 2026-09-29): fold-open headers inside content were 22px tall and
   checkboxes and radios 13px, too small to tap reliably on a phone. */
main details:not(.tune):not(.collapsible) > summary { cursor: pointer; padding: 11px 0; }
/* Drawn here rather than left to the browser, whose default radios rendered as solid dark dots
   in some themes. Same look in light and dark. */
main input[type="checkbox"], main input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none; box-sizing: border-box;
  width: 1.15rem; height: 1.15rem; margin: 0 0.4rem 0 0; vertical-align: -0.2rem; cursor: pointer;
  display: inline-grid; place-content: center;
  background: var(--surface); border: 2px solid var(--muted);
}
main input[type="radio"] { border-radius: 50%; }
main input[type="checkbox"] { border-radius: 4px; }
main input[type="radio"]::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--primary); transform: scale(0); transition: transform 0.1s ease; }
main input[type="radio"]:checked { border-color: var(--primary); }
main input[type="radio"]:checked::before { transform: scale(1); }
main input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); }
main input[type="checkbox"]::before { content: ""; width: 0.55rem; height: 0.3rem; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px) scale(0); }
main input[type="checkbox"]:checked::before { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
main input[type="checkbox"]:focus-visible, main input[type="radio"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
main input[type="checkbox"]:disabled, main input[type="radio"]:disabled { opacity: 0.5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { main input[type="radio"]::before { transition: none; } }
.tchip small, .tsugg small, .tsugg-link small { font-size: 0.75rem; }
.setup-key { display: inline-block; font-size: 1.1rem; letter-spacing: 0.06em; padding: 6px 10px; border-radius: 6px; background: var(--bg-subtle); user-select: all; }
.recovery-codes { columns: 2; list-style: none; padding: 0; font-size: 1.05rem; }
.recovery-codes li { padding: 3px 0; }
.report-problem summary { color: var(--ink-2); }
.report-reasons { border: 0; padding: 0; margin: 0 0 0.75rem; display: grid; gap: 4px; }

/* Screenshot review fixes (2026-09-30). */
.site-footer a + a { margin-left: 0.9rem; }
.stat-card > :first-child, .stat-card > h2:first-child { margin-top: 0; }
.stacked-form label { display: block; margin-bottom: 1rem; }
.stacked-form label > input:not([type="checkbox"]):not([type="radio"]), .stacked-form label > select,
.stacked-form label > textarea { display: block; width: 100%; max-width: 30rem; margin-top: 4px; box-sizing: border-box; }
.stacked-form label > textarea { max-width: none; }
.stacked-form label > .muted { display: block; font-size: 0.85rem; font-weight: 400; margin-top: 4px; }
.report-table td:first-child { min-width: 18rem; }
.report-table .report-note { margin: 4px 0 0; font-style: italic; color: var(--ink-2); }

/* Simulated AI banner (pmo_agents/llm_simulated.py): visible but calm, like other status notes. */
.flash-simulated { background: var(--warn-soft, #fef3c7); color: var(--warn, #92400e); border: 1px dashed var(--warn, #fcd34d); }

/* Logged-out pages: the Ondatrace mark and name above the page title. */
.public-brand { display: inline-flex; align-items: center; gap: 12px; margin: 8px 0 28px; color: var(--text);
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; }
.public-brand:visited { color: var(--text); }
.public-mark { width: 44px; height: 44px; flex: none; }

/* The one-time invitation link an Owner copies while email isn't set up (org_members.html). */
.invite-link-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.invite-link-row input { flex: 1 1 20rem; min-width: 0; font-family: var(--font-mono, monospace); }