@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/Poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/Poppins-600-latin.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/Poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/Poppins-700-latin.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------------------------------------------------------------------
   Design tokens
--------------------------------------------------------------------- */
:root {
  color-scheme: light dark;
  --bg: #F2F6FC;
  --surface: #ffffff;
  --surface-2: #F7FAFE;
  --fg: #333333;
  --muted: #526174;
  --muted-2: #7A8797;
  --border: #D8E2EE;
  --border-strong: #C3D0DF;
  --accent: #075AAE;
  --accent-hover: #064B91;
  --accent-soft: #E3EEF9;
  --danger: #c0392b;
  --danger-soft: #fbe9e7;
  --success-fg: #167347;
  --success-soft: #E3F4EA;
  --warning-fg: #8A4B00;
  --warning-soft: #FFF4DF;
  --info-fg: #075AAE;
  --info-soft: #E3EEF9;
  --sidebar-bg: #12304A;
  --sidebar-fg: #E6EEF6;
  --sidebar-muted: #9DB3C8;
  --sidebar-active-bg: rgba(255, 255, 255, 0.08);
  --sidebar-border: rgba(255, 255, 255, 0.08);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

  --sidebar-width: 236px;
  --content-max: 1600px;
  --on-accent: #ffffff;
  --font-display: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0f14;
    --surface: #171a21;
    --surface-2: #1c1f28;
    --fg: #e8eaef;
    --muted: #9aa1ac;
    --muted-2: #6f7684;
    --border: #262a35;
    --border-strong: #333947;
    --accent: #60B5FF;
    --on-accent: #0B2238;
    --accent-hover: #8AC8FF;
    --accent-soft: #12304A;
    --danger: #e5766a;
    --danger-soft: #3a1f1c;
    --success-fg: #7fdc9c;
    --success-soft: #123122;
    --warning-fg: #f0c46a;
    --warning-soft: #332608;
    --info-fg: #60B5FF;
    --info-soft: #12304A;
    --sidebar-bg: #0C2236;
    --sidebar-fg: #E6EEF6;
    --sidebar-muted: #8CA3B9;
    --sidebar-active-bg: rgba(255, 255, 255, 0.06);
    --sidebar-border: rgba(255, 255, 255, 0.06);
  }
}
:root[data-theme="dark"] {
  --bg: #0d0f14; --surface: #171a21; --surface-2: #1c1f28; --fg: #e8eaef;
  --muted: #9aa1ac; --muted-2: #6f7684; --border: #262a35; --border-strong: #333947;
  --accent: #60B5FF; --on-accent: #0B2238; --accent-hover: #8AC8FF; --accent-soft: #12304A;
  --danger: #e5766a; --danger-soft: #3a1f1c; --success-fg: #7fdc9c; --success-soft: #123122;
  --warning-fg: #f0c46a; --warning-soft: #332608; --info-fg: #60B5FF; --info-soft: #12304A;
  --sidebar-bg: #0C2236; --sidebar-fg: #E6EEF6; --sidebar-muted: #8CA3B9;
  --sidebar-active-bg: rgba(255, 255, 255, 0.06); --sidebar-border: rgba(255, 255, 255, 0.06);
}
:root[data-theme="light"] {
  --bg: #F2F6FC; --surface: #ffffff; --surface-2: #F7FAFE; --fg: #333333;
  --muted: #526174; --muted-2: #7A8797; --border: #D8E2EE; --border-strong: #C3D0DF;
  --accent: #075AAE; --on-accent: #ffffff; --accent-hover: #064B91; --accent-soft: #E3EEF9;
  --danger: #c0392b; --danger-soft: #fbe9e7; --success-fg: #167347; --success-soft: #E3F4EA;
  --warning-fg: #8A4B00; --warning-soft: #FFF4DF; --info-fg: #075AAE; --info-soft: #E3EEF9;
  --sidebar-bg: #12304A; --sidebar-fg: #E6EEF6; --sidebar-muted: #9DB3C8;
  --sidebar-active-bg: rgba(255, 255, 255, 0.08); --sidebar-border: rgba(255, 255, 255, 0.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------
   App shell: fixed sidebar + fluid content
--------------------------------------------------------------------- */
.nav-toggle-checkbox { display: none; }

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 20;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.35rem 1.35rem 1rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  letter-spacing: -0.01em;
}
.sidebar-brand .brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #075AAE;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.sidebar-brand a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 0.6rem; }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.75rem;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--sidebar-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-nav a svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.9; }
.sidebar-nav a:hover { background: var(--sidebar-active-bg); color: #fff; }
.sidebar-nav a.active { background: var(--sidebar-active-bg); color: #fff; }
.sidebar-nav a.active svg { color: #85a5ff; }

.sidebar-footer {
  margin-top: auto;
  padding: 1rem 1.35rem 1.25rem;
  font-size: 0.75rem;
  color: var(--sidebar-muted);
  border-top: 1px solid var(--sidebar-border);
}

.sidebar-scrim {
  display: none;
}

.main-col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 15;
}
.hamburger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--fg);
}
.hamburger-btn:hover { background: var(--surface-2); }
.topbar-title { font-weight: 700; }

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.theme-toggle-btn:hover { background: var(--surface-2); color: var(--fg); }

/* Per-page "Guide me" topbar button (12/08/2026) — a plain "?" icon, same
   size/shape as the theme toggle right next to it, rather than a labeled
   button floating separately over the page content. margin-left:auto here
   (moved off .theme-toggle-btn) pushes this AND everything after it
   (the theme toggle) to the right edge as one group. */
.topbar-guide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  transition: background 0.12s ease, color 0.12s ease;
}
.topbar-guide-btn:hover { background: var(--surface-2); color: var(--fg); }
.theme-toggle-btn .icon-sun, .theme-toggle-btn .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle-btn .icon-moon { display: inline-flex; }
:root[data-theme="dark"] .theme-toggle-btn .icon-sun { display: inline-flex; }

/* Hamburger/off-canvas drawer are mobile-only affordances — desktop always
   shows the full sidebar, so there's nothing for the hamburger to toggle. */
@media (min-width: 901px) {
  .hamburger-btn { display: none; }
}

.content {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2rem 2.5rem 4rem;
}

/* Mobile: sidebar becomes an off-canvas drawer toggled by a checkbox hack */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-lg);
  }
  .nav-toggle-checkbox:checked ~ .app-shell .sidebar {
    transform: translateX(0);
  }
  .sidebar-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 19;
  }
  .nav-toggle-checkbox:checked ~ .app-shell .sidebar-scrim {
    display: block;
  }
  .content { padding: 1.25rem 1.25rem 3rem; }
}

/* ---------------------------------------------------------------------
   Typography
--------------------------------------------------------------------- */
h1 { font-family: var(--font-display); overflow-wrap: anywhere; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0.35rem; }
h2 { font-family: var(--font-display); overflow-wrap: anywhere; font-size: 1.1rem; font-weight: 600; margin-top: 2.25rem; margin-bottom: 0.75rem; }
h3 { font-family: var(--font-display); overflow-wrap: anywhere; font-size: 0.98rem; font-weight: 600; margin: 0 0 0.35rem; }
p { margin: 0.5rem 0; }
a { color: var(--accent); }
code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.85em;
}

.page-header { margin-bottom: 1.5rem; }
.page-subtitle { color: var(--muted); font-size: 0.9rem; margin-top: 0.25rem; }
.text-muted { color: var(--muted); }
.text-sm { font-size: 0.85rem; }

/* ---------------------------------------------------------------------
   Flash messages
--------------------------------------------------------------------- */
.flash-stack { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.flash {
  padding: 0.65rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  border: 1px solid transparent;
}
.flash-success { background: var(--success-soft); color: var(--success-fg); }
.flash-danger { background: var(--danger-soft); color: var(--danger); }
.flash-warning { background: var(--warning-soft); color: var(--warning-fg); }
.flash-info { background: var(--info-soft); color: var(--info-fg); }

/* ---------------------------------------------------------------------
   Cards / panels
--------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------------
   Form layout helpers — 2-column grid for compact field pairs, section
   headers to break a long form into scannable groups.
---------------------------------------------------------------------- */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
}
@media (max-width: 700px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}
.form-section-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 1.75rem 0 0.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.form-section-hint { color: var(--muted); font-size: 0.82rem; margin: 0 0 0.5rem; }

.selected-tags-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 2.1rem;
  padding: 0.5rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  margin: 0.4rem 0 0.75rem;
}
.selected-tags-bar .tag-chip { cursor: default; }
.selected-tags-bar .tag-chip button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-weight: 700;
  padding: 0 0 0 0.35rem;
  font-size: 0.95em;
  line-height: 1;
}

.filter-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.4rem 1.3rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 0.9rem;
}
.filter-bar .filter-row { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; }
.filter-bar .filter-group { min-width: 200px; flex: 1 1 auto; }
.filter-bar .filter-group.grow { flex: 2 1 320px; }
.filter-bar label { margin-top: 0; }
.filter-bar .filter-actions { display: flex; gap: 0.6rem; align-items: center; }

/* ---------------------------------------------------------------------
   Tables
--------------------------------------------------------------------- */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.table-wrap table { margin-top: 0; }
th, td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-2);
  white-space: nowrap;
}
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }
td .row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* Clickable column-header sort links, replacing the old "Sort by" dropdown */
a.col-sort {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
}
a.col-sort:hover { color: var(--accent); }
a.col-sort.active { color: var(--accent); }

.btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* Real bug fixed 26/08/2026: `class="inline"` is used on 36+ small single-
   control <form> elements across this app (delete-confirm buttons, the
   flag/workflow-status forms, etc.) to make them sit alongside other inline
   content instead of on their own line — but this class was never actually
   DEFINED anywhere, so a <form> (block-level by default) fell back to full
   container width every time. Most callers never noticed because the form
   was already the only thing in its cell/container; it became visibly
   obvious once a workflow-status <select> inside one of these forms was
   sitting in a <p> next to other inline text (the "In progress" pill
   rendering as a full-width banner instead of a compact inline control). */
.inline {
  display: inline-block;
}

/* Standalone tables not wrapped in .table-wrap (kept for pages not yet updated) */
table:not(.table-wrap table) {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------------
   Forms
--------------------------------------------------------------------- */
form.inline { display: inline; }

label { display: block; margin-top: 0.85rem; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
input[type=text], input[type=url], input[type=number], input[type=password], input[type=email], #tag-search, select, textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  margin-top: 0.3rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg);
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { min-height: 5rem; }

.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.4rem;
}
.checkbox-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: 0.83rem;
  color: var(--fg);
  cursor: pointer;
  margin: 0;
  background: var(--surface);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.checkbox-pill:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.checkbox-pill input[type=checkbox] { width: auto; margin: 0; accent-color: var(--accent); }

/* ---------------------------------------------------------------------
   Taxonomy chip pickers (domain/technology/expertise) — each chip's color comes
   from a --chip-hue custom property set inline per item, not a fixed palette, so
   the same rule works for however many categories/tags exist.
---------------------------------------------------------------------- */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  cursor: pointer;
  margin: 0;
  border: 1px solid hsl(var(--chip-hue) 55% 45% / 0.45);
  background: hsl(var(--chip-hue) 70% 96%);
  color: hsl(var(--chip-hue) 55% 28%);
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.tag-chip:has(input:checked) {
  background: hsl(var(--chip-hue) 65% 50%);
  border-color: hsl(var(--chip-hue) 65% 38%);
  color: #fff;
  font-weight: 600;
}
.tag-chip input[type=checkbox] { width: auto; margin: 0; accent-color: hsl(var(--chip-hue) 65% 40%); }
.tag-chip--category { font-weight: 600; padding: 0.4rem 0.8rem; }

.tag-group-list { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.4rem; }
.tag-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.6rem;
  background: var(--surface);
}
.tag-group summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.tag-group summary::-webkit-details-marker { display: none; }
.tag-group summary::before {
  content: "▸";
  color: var(--muted);
  margin-right: 0.4rem;
  font-size: 0.75rem;
}
.tag-group[open] summary::before { content: "▾"; }

@media (prefers-color-scheme: dark) {
  .tag-chip { background: hsl(var(--chip-hue) 35% 18%); color: hsl(var(--chip-hue) 60% 78%); border-color: hsl(var(--chip-hue) 45% 40% / 0.5); }
  .tag-chip:has(input:checked) { background: hsl(var(--chip-hue) 55% 42%); border-color: hsl(var(--chip-hue) 55% 55%); color: #fff; }
}
:root[data-theme="dark"] .tag-chip { background: hsl(var(--chip-hue) 35% 18%); color: hsl(var(--chip-hue) 60% 78%); border-color: hsl(var(--chip-hue) 45% 40% / 0.5); }
:root[data-theme="dark"] .tag-chip:has(input:checked) { background: hsl(var(--chip-hue) 55% 42%); border-color: hsl(var(--chip-hue) 55% 55%); color: #fff; }

.star-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted-2);
}
.star-btn:hover { color: var(--warning-fg); }
/* Star-count flag (replaced color-coded flags 12/08/2026 — see CLAUDE.md): a
   count is easier to read at a glance than a color whose meaning every org
   had to invent for itself. attention is deliberately its own color, not
   part of the 1-3 star gradient — it's an urgency marker, not a 4th rating
   level. */
.star-btn.flag-star1, .star-btn.flag-star2, .star-btn.flag-star3 { color: var(--warning-fg); }
.star-btn.flag-attention { color: var(--danger); }

/* Star flag popover — click-to-open (native <details>, no JS needed) list of
   every flag option, to the RIGHT of the star (04/08/2026 follow-up: this
   replaced an earlier click-to-cycle interaction — picking directly from a
   short list is faster than stepping through one-by-one). */
.flag-details { position: relative; display: inline-block; }
.flag-details summary { list-style: none; }
.flag-details summary::-webkit-details-marker { display: none; }
.flag-popover {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 100%;
  margin-left: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
  white-space: nowrap;
}
.flag-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.5rem;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--fg);
  cursor: pointer;
  text-align: left;
  justify-content: flex-start;
}
.flag-option:hover { background: var(--surface-2); }
.flag-option.active { background: var(--surface-2); border-color: var(--border); font-weight: 700; }
.flag-option.flag-star1, .flag-option.flag-star2, .flag-option.flag-star3 { color: var(--warning-fg); }
.flag-option.flag-attention { color: var(--danger); }

/* Per-row quick-action controls (flag, workflow dropdown, note pencil) — sit
   together in the Opportunities table's leftmost column. */
.quick-actions { display: flex; flex-wrap: nowrap; gap: 0.3rem; align-items: center; white-space: nowrap; }
.icon-btn {
  background: none;
  border: 1px solid transparent;
  padding: 0.1rem 0.25rem;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted-2);
  border-radius: var(--radius-sm);
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--border); }
.icon-btn.has-note { background: var(--success-soft); color: var(--success-fg); }

/* Doubles as both the workflow-status BADGE and its own edit control — one
   rounded pill instead of a static badge sitting above a separate plain
   dropdown (the two used to duplicate the same information; clicking the
   pill itself now changes the status). Color pairing matches the old
   .badge.workflow-viewed/.badge.workflow-in_progress exactly, so this reads
   as "the same badge, now editable" rather than a new element. */
.workflow-select {
  /* The REAL width bug (26/08/2026, user report): a generic
     `select { width: 100%; }` base rule (further down this file, meant for
     real form fields) applies to every <select> site-wide, and this class
     never overrode `width` itself — only `min-width` below, which can't win
     against an explicit `width: 100%` on the same element. That's what
     stretched this into a full-width banner instead of a compact pill. */
  width: auto;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.12rem 0.55rem;
  margin: 0;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  /* Fixed min-width (26/08/2026, user report) — without it the pill visibly
     resized as its content changed ("Not Viewed" vs "In progress" vs
     "Viewed by AB, CD"), which read as janky. Wide enough for the longest
     real label ("Viewed by AB, CD") without letting the pill balloon further. */
  min-width: 110px;
  text-align: center;
}
.workflow-select:hover { filter: brightness(0.96); }
.workflow-select.workflow-select-viewed { background: var(--info-soft); color: var(--info-fg); }
.workflow-select.workflow-select-in_progress { background: var(--warning-soft); color: var(--warning-fg); }

/* Same pill-as-editable-control pattern as .workflow-select, for the
   Improve Matching page's override review status (10/08/2026). */
.workflow-select.workflow-select-learned { background: var(--success-soft); color: var(--success-fg); }
.workflow-select.workflow-select-needs_more_info { background: var(--warning-soft); color: var(--warning-fg); }

/* Inline auto-save Override/Notes fields on the opportunity detail page
   (10/08/2026) — see detail.html's initInlineEditGroup(). */
.autosave-status { font-size: 0.72rem; margin-left: 0.4rem; }

/* Opportunities list filter panel — gear icon (⚙️) toggles a hidden-by-default
   tabbed panel (07/08/2026) grouping Status&Timing/Matching level/Workflow/
   Source/Domain&Technology, replacing the previous always-visible accordion
   stack. Open/close and tab-switching are plain inline JS in list.html (same
   convention as this app's other pages); these rules just style the result. */
#gear-toggle:hover { background: var(--surface-2) !important; }
.filter-tab:hover { color: var(--fg) !important; }
.filter-tab.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

/* Note pencil popover — a native <details> disclosure (no JS needed to open/
   close) whose textarea/button are associated with an OUTSIDE hidden <form>
   via the `form=` attribute (see opportunities/list.html) rather than nesting
   a <form> inside the bulk-select table's own <form>. */
.note-details { position: relative; display: inline-block; }
.note-details summary { list-style: none; }
.note-details summary::-webkit-details-marker { display: none; }
.note-details .note-popover {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  /* Widened 240px -> 320px (27/08/2026, user report: "too narrow") — this is
     the ONE place to change it, since every note popover on the Opportunities
     list (per-org Best-match notes, and the in-progress status note) shares
     this same class. */
  width: 320px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
}
/* resize: both (not the browser's vertical-only textarea default) so a user
   who still finds 320px too narrow for a specific long note can drag it
   wider themselves, on top of the larger default above. */
.note-popover textarea { width: 100%; font-size: 0.8rem; resize: both; min-height: 4.5em; }

/* ---------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------- */
button, .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  font-size: 0.87rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: 0.75rem;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
  font-family: inherit;
}
button:hover, .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button:active, .btn:active { transform: translateY(1px); }
button.secondary, .btn.secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--border-strong);
}
button.secondary:hover, .btn.secondary:hover { background: var(--accent-soft); border-color: var(--accent); }
button.danger, .btn.danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--border-strong);
}
button.danger:hover, .btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); }

/* ---------------------------------------------------------------------
   Badges
--------------------------------------------------------------------- */
.pct-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.8rem;
}
.pct-high { background: var(--success-soft); color: var(--success-fg); }
.pct-mid { background: var(--warning-soft); color: var(--warning-fg); }
.pct-low { background: var(--danger-soft); color: var(--danger); }

.tier-badge {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.tier-expired { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.tier-act_now { background: var(--danger-soft); color: var(--danger); }
.tier-prepare_now { background: var(--warning-soft); color: var(--warning-fg); }
.tier-future { background: var(--info-soft); color: var(--info-fg); }

.badge {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  margin-right: 0.25rem;
}
.badge.workflow-viewed { background: var(--info-soft); color: var(--info-fg); border-color: transparent; }
.badge.workflow-in_progress { background: var(--warning-soft); color: var(--warning-fg); border-color: transparent; }
/* NEW badge — now a time-based signal (Opportunity.is_recently_added(), added
   within roughly the last week), independent of per-org workflow_status, so it
   can appear alongside a Viewed/In progress badge rather than instead of one
   (see routes/opportunities.py, 04/08/2026). Explicitly yellow — a distinct,
   more saturated color from --warning-soft/--warning-fg (also amber-ish,
   already used for In progress) so the two badges stay visually distinguishable
   when both show on the same row. A brief, FINITE pulse (2 iterations, then
   settles) draws the eye without becoming an infinite blink — WCAG flags
   anything that flashes more than 3x/second as a seizure risk, and endless
   blinking is just annoying regardless. prefers-reduced-motion disables the
   animation entirely, same as everywhere else motion appears in this app. */
.badge.workflow-new {
  background: #fde047; color: #713f12; border-color: transparent;
  font-weight: 700; animation: badge-new-pulse 1.1s ease-in-out 2;
}
@media (prefers-color-scheme: dark) {
  .badge.workflow-new { background: #4d3a02; color: #fde047; }
}
:root[data-theme="dark"] .badge.workflow-new { background: #4d3a02; color: #fde047; }
:root[data-theme="light"] .badge.workflow-new { background: #fde047; color: #713f12; }
@keyframes badge-new-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(253 224 71 / 0.5); }
  50% { box-shadow: 0 0 0 4px rgb(253 224 71 / 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .badge.workflow-new { animation: none; }
}

/* ---------------------------------------------------------------------
   Misc
--------------------------------------------------------------------- */
.roadmap-version {
  margin-top: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.roadmap-version:last-child { border-bottom: none; }
.roadmap-version h3 { margin-bottom: 0.35rem; }
.status-current { color: var(--accent); font-weight: 700; }
.status-shipped { color: var(--success-fg); font-weight: 700; }
.status-planned { color: var(--muted); font-weight: 600; }

.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 2.5rem 1rem;
}

progress { width: 100%; height: 10px; border-radius: var(--radius-pill); overflow: hidden; border: none; }
progress::-webkit-progress-bar { background: var(--surface-2); border-radius: var(--radius-pill); }
progress::-webkit-progress-value { background: var(--accent); border-radius: var(--radius-pill); }

/* ---------------------------------------------------------------------
   Guided tour (12/08/2026) — dependency-free spotlight walkthrough of the
   sidebar nav, see base.html's tour script.
--------------------------------------------------------------------- */
.tour-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgb(10 12 18 / 0.55);
}
.tour-spotlight {
  position: fixed; z-index: 201;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 4px var(--accent), 0 0 0 9999px rgb(10 12 18 / 0.55);
  pointer-events: none;
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}
.tour-tooltip {
  position: fixed; z-index: 202;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
  padding: 1rem 1.1rem;
  width: 300px;
  max-width: calc(100vw - 2rem);
  transition: top 0.2s ease, left 0.2s ease;
}
.tour-tooltip h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.tour-tooltip p { margin: 0 0 0.8rem; font-size: 0.88rem; color: var(--muted); }
.tour-tooltip-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tour-tooltip-step { font-size: 0.78rem; color: var(--muted); }
.tour-tooltip-buttons { display: flex; gap: 0.4rem; }
.tour-tooltip-buttons button { padding: 0.35rem 0.7rem; font-size: 0.82rem; }
.tour-skip-btn {
  position: fixed; z-index: 202; top: 1rem; right: 1rem;
  background: var(--surface); color: var(--fg); border: 1px solid var(--border-strong);
  padding: 0.4rem 0.8rem; font-size: 0.82rem; border-radius: var(--radius-pill);
}


/* Notes log (21/10/2026) — append-only timeline per organization per call. */
.note-log { max-height: 22rem; overflow-y: auto; }
.note-entry { border-left: 3px solid var(--border); padding: 0.2rem 0 0.2rem 0.6rem; margin-bottom: 0.6rem; font-size: 0.85rem; }
.note-entry-head { margin-bottom: 0.15rem; }
.note-entry-compact { font-size: 0.78rem; margin-bottom: 0.4rem; }
.note-history, .note-edit { font-size: 0.78rem; margin-top: 0.2rem; }
.note-version { border-left: 2px dashed var(--border); padding-left: 0.5rem; margin: 0.25rem 0; }

/* Opportunities row tools / call toolbar / improve popover (22/10/2026) */
.sel-only { display: none; }
body.select-mode .sel-only { display: inline-block; }
body.select-mode select.sel-only { display: inline-block; }
.row-tools { display: flex; align-items: center; gap: 0.15rem; white-space: nowrap; }
.row-tools .star-btn, .row-tools .icon-btn { font-size: 1.05rem; }
.call-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: 0.5rem 0 1rem;
}
.call-toolbar form { margin: 0; }
.call-toolbar-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 0.25rem; }
.improve-details summary { font-size: 0.72rem; color: var(--muted-2); }
.improve-popover { min-width: 240px; }
.improve-popover textarea { margin-top: 0.3rem; }

.app-footer { padding: 0.9rem 1.5rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.8rem; text-align: center; }
.app-footer a { color: inherit; }

/* =====================================================================
   v0.9.0 UI/UX redesign: app shell (01/11/2026, spec v1.2)
   Sticky header with global search, collapsible navigation (icon rail),
   utility links at the bottom, account menu, quiet footer.
   ===================================================================== */
:root { --topbar-h: 60px; --rail-width: 64px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 0.75rem; top: -3rem; z-index: 300;
  background: var(--accent); color: var(--on-accent); padding: 0.5rem 0.9rem; border-radius: var(--radius-sm);
}
.skip-link:focus { top: 0.75rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.content:focus { outline: none; }
.icon { flex-shrink: 0; vertical-align: middle; }

/* Sidebar: main nav on top, utility nav pinned to the bottom */
.sidebar { overflow-x: hidden; transition: width 0.18s ease, flex-basis 0.18s ease; }
.sidebar-brand { justify-content: space-between; padding: 1rem 0.75rem 0.75rem 1.1rem; min-height: var(--topbar-h); }
.sidebar-brand a { min-width: 0; }
.nav-collapse-btn {
  margin: 0; padding: 0; width: 28px; height: 28px; justify-content: center;
  background: transparent; border: 1px solid transparent; color: var(--sidebar-muted); border-radius: var(--radius-sm);
}
.nav-collapse-btn:hover { background: var(--sidebar-active-bg); border-color: var(--sidebar-border); color: #fff; }
.nav-collapse-btn .when-collapsed { display: none; }
.nav-section-label {
  margin: 0.9rem 0.75rem 0.25rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--sidebar-muted); opacity: 0.8; white-space: nowrap;
}
.sidebar-nav a, .sidebar-utility a { white-space: nowrap; min-height: 40px; }
.sidebar-nav a:focus-visible, .sidebar-utility a:focus-visible { outline-color: #85a5ff; }
.sidebar-utility {
  margin-top: auto; display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.75rem 0.75rem 1rem; border-top: 1px solid var(--sidebar-border);
}
.sidebar-utility a {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm);
  color: var(--sidebar-muted); text-decoration: none; font-size: 0.86rem; font-weight: 500;
}
.sidebar-utility a:hover, .sidebar-utility a.active { background: var(--sidebar-active-bg); color: #fff; }

@media (min-width: 901px) {
  :root[data-nav="collapsed"] { --sidebar-width: var(--rail-width); }
  :root[data-nav="collapsed"] .nav-label { display: none; }
  :root[data-nav="collapsed"] .sidebar-brand { flex-direction: column; gap: 0.6rem; padding: 0.9rem 0 0.5rem; }
  :root[data-nav="collapsed"] .sidebar-nav a,
  :root[data-nav="collapsed"] .sidebar-utility a { justify-content: center; padding: 0.55rem 0; }
  :root[data-nav="collapsed"] .nav-section-label { margin: 0.6rem 0.9rem; height: 1px; background: var(--sidebar-border); }
  :root[data-nav="collapsed"] .nav-collapse-btn .when-expanded { display: none; }
  :root[data-nav="collapsed"] .nav-collapse-btn .when-collapsed { display: inline; }
}
@media (max-width: 900px) {
  .nav-collapse-btn { display: none; }
}

/* Header */
.topbar { min-height: var(--topbar-h); padding: 0.6rem 1.25rem; gap: 1rem; }
.topbar-search { position: relative; flex: 1 1 auto; max-width: 560px; margin: 0; }
.topbar-search input {
  width: 100%; margin: 0; height: 40px; padding: 0 2.5rem 0 2.3rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-2);
  color: var(--fg); font-size: 0.9rem;
}
.topbar-search input:focus { background: var(--surface); }
.topbar-search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.topbar-search-kbd {
  position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
  font: 600 0.72rem var(--font-sans); color: var(--muted); border: 1px solid var(--border-strong);
  border-radius: 4px; padding: 0 0.35rem; background: var(--surface);
}
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; }
.topbar-actions .topbar-guide-btn { margin-left: 0; }
.topbar-icon-btn, .topbar-guide-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0; padding: 0; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent; color: var(--muted); text-decoration: none; cursor: pointer;
}
.topbar-icon-btn:hover, .topbar-guide-btn:hover { background: var(--surface-2); border-color: var(--border); color: var(--fg); }
.theme-toggle-btn.topbar-icon-btn { border-color: transparent; }
.topbar-badge {
  position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent);
  font-size: 0.68rem; font-weight: 700; line-height: 18px; text-align: center;
}
.account-menu { position: relative; }
.account-menu summary { list-style: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-btn {
  display: flex; align-items: center; gap: 0.5rem; height: 40px; padding: 0 0.5rem 0 0.25rem;
  border-radius: var(--radius-pill); cursor: pointer; color: var(--fg); border: 1px solid transparent;
}
.account-btn:hover { background: var(--surface-2); border-color: var(--border); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent); font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
}
.account-name { font-size: 0.86rem; font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 250px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 0.4rem; display: flex; flex-direction: column;
}
.account-dropdown-head { display: flex; flex-direction: column; padding: 0.5rem 0.6rem 0.6rem; border-bottom: 1px solid var(--border); margin-bottom: 0.3rem; font-size: 0.85rem; }
.account-dropdown-head .muted { color: var(--muted); font-size: 0.78rem; }
.account-dropdown a, .account-logout {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.6rem; border-radius: var(--radius-sm);
  color: var(--fg); text-decoration: none; font-size: 0.87rem; font-weight: 500;
}
.account-logout { width: 100%; margin: 0; background: transparent; border: none; cursor: pointer; }
.account-dropdown a:hover, .account-logout:hover { background: var(--surface-2); color: var(--fg); border: none; }
.account-dropdown form { margin: 0.3rem 0 0; border-top: 1px solid var(--border); padding-top: 0.3rem; }

@media (max-width: 900px) {
  .topbar { padding: 0.5rem 0.75rem; gap: 0.5rem; }
  .account-name, .account-btn > .icon-chevron-down { display: none; }
  .topbar-search-kbd { display: none; }
}
@media (max-width: 520px) {
  .topbar { flex-wrap: wrap; }
  .topbar-search { order: 3; flex-basis: 100%; max-width: none; }
  .topbar-actions { gap: 0.15rem; }
}

/* Footer: quiet, not sticky */
.app-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.35rem 0.9rem; }
.app-footer a { text-decoration: none; }
.app-footer a:hover { text-decoration: underline; }
.env-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.05rem 0.45rem; border-radius: var(--radius-pill); }
.env-tag.env-live { background: var(--success-soft); color: var(--success-fg); }
.env-tag.env-dev { background: var(--warning-soft); color: var(--warning-fg); }

/* =====================================================================
   v0.9.0 Opportunities page: filter sidebar + results (spec v1.2)
   ===================================================================== */
.muted { color: var(--muted); }
.small { font-size: 0.8rem; }
.center { text-align: center; }
.no-scroll { overflow: hidden; }
.link-btn {
  display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; padding: 0.2rem 0.3rem;
  background: none; border: none; color: var(--accent); font-size: 0.82rem; font-weight: 600;
  text-decoration: none; cursor: pointer; border-radius: var(--radius-sm);
}
.link-btn:hover { background: var(--accent-soft); border: none; }
.icon-only {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  margin: 0; padding: 0; background: transparent; border: 1px solid transparent; color: var(--muted);
  border-radius: var(--radius-sm); cursor: pointer;
}
.icon-only:hover { background: var(--surface-2); border-color: var(--border); color: var(--fg); }

.content:has(.opps-layout) { max-width: none; padding: 1.25rem 1.5rem 3rem; }
.opps-layout { position: relative; }

/* --- Filter panel (v0.18.2): a dropdown under the Filters button, closed until
   asked for; a full-width sheet on phones (see the 760px block below).
   Without JavaScript it is a plain block above the list. --- */
.filter-sidebar {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; overflow: hidden; margin-bottom: 1rem;
}
.js-filters .filter-sidebar {
  position: absolute; z-index: 45; top: var(--fp-top, 4rem); left: var(--fp-left, auto); right: var(--fp-right, 0);
  width: min(400px, calc(100vw - 1.5rem)); max-height: var(--fp-maxh, 70vh); margin: 0;
  border-color: var(--border-strong); box-shadow: var(--shadow-lg);
}
.js-filters .filter-sidebar:not(.is-open) { display: none; }
.filters-anchor { display: inline-flex; align-items: center; gap: 0.4rem; }
.filters-toggle .filters-chev { transition: transform 0.15s ease; }
.filters-toggle[aria-expanded="true"] .filters-chev { transform: rotate(180deg); }
.filters-toggle.is-active, .filters-toggle.is-active:hover {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700;
}
.filters-draft { width: 8px; height: 8px; border-radius: 50%; background: var(--warning-fg); display: none; }
.filters-toggle.has-draft .filters-draft { display: inline-block; }
.filters-toggle.is-active.has-draft .filters-draft { background: #fff; }
.filter-form { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.filter-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 0.9rem 0.6rem 1rem; border-bottom: 1px solid var(--border); }
.filter-head h2 { margin: 0; font-size: 0.98rem; display: flex; align-items: center; gap: 0.4rem; flex: 1; }
.filter-close { display: none; }
.js-filters .filter-close { display: inline-flex; }
.filter-sections { overflow-y: auto; flex: 1 1 auto; padding: 0.3rem 0; overscroll-behavior: contain; }
.fsec { border-bottom: 1px solid var(--border); }
.fsec:last-child { border-bottom: none; }
.fsec-head {
  list-style: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem;
  cursor: pointer; font-weight: 600; font-size: 0.88rem; min-height: 44px;
}
.fsec-head::-webkit-details-marker { display: none; }
.fsec-head:hover { background: var(--surface-2); }
.fsec-chev { color: var(--muted); transition: transform 0.15s ease; }
.fsec[open] > .fsec-head .fsec-chev { transform: rotate(90deg); }
.fsec-title { flex: 1; }
.fsec-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--on-accent); font-size: 0.72rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.fsec-draft { width: 8px; height: 8px; border-radius: 50%; background: var(--warning-fg); display: none; }
.fsec.has-draft .fsec-draft { display: inline-block; }
.fsec-body { padding: 0.1rem 1rem 0.9rem; }
.fsec-body fieldset { border: none; margin: 0 0 0.75rem; padding: 0; min-width: 0; }
.fsec-body legend { font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3rem; padding: 0; }
.fsec-body .field { display: block; margin: 0 0 0.75rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.fsec-body .field select, .fsec-body .field input { text-transform: none; letter-spacing: 0; margin-top: 0.3rem; }
.fsec-clear { margin-top: 0.2rem; font-size: 0.78rem; }
.hint { font-size: 0.78rem; color: var(--muted); margin: 0.2rem 0 0.5rem; }
.opt-list { display: flex; flex-direction: column; gap: 0.05rem; }
.opt-list-scroll { max-height: 220px; overflow-y: auto; padding-right: 0.25rem; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.25rem; }
.opt {
  display: flex; align-items: flex-start; gap: 0.55rem; margin: 0; padding: 0.35rem 0.4rem;
  font-size: 0.86rem; font-weight: 400; color: var(--fg); border-radius: var(--radius-sm); cursor: pointer; min-height: 32px;
}
.opt:hover { background: var(--surface-2); }
.opt input { width: 16px; height: 16px; margin: 0.15rem 0 0; flex-shrink: 0; accent-color: var(--accent); }
.opt[hidden] { display: none; }
.opt-search { margin: 0 0 0.4rem !important; padding: 0.4rem 0.6rem !important; font-size: 0.84rem !important; }
.date-range { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.date-range input { width: auto; flex: 1 1 110px; margin: 0; font-size: 0.82rem; padding: 0.4rem 0.5rem; }

.filter-actions {
  border-top: 1px solid var(--border); padding: 0.75rem 1rem 0.9rem; background: var(--surface);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}
.pending-note { flex-basis: 100%; margin: 0; font-size: 0.78rem; color: var(--warning-fg); }
.pending-note:empty { display: none; }
.btn-apply { margin: 0; flex: 1 1 auto; justify-content: center; min-height: 40px; }
.filter-form:not(.is-dirty) .btn-apply { background: var(--surface); color: var(--accent); border-color: var(--border-strong); }
.filter-form:not(.is-dirty) .btn-apply:hover { background: var(--accent-soft); }
.when-narrow { display: none; }

/* --- Results --- */
.results { min-width: 0; }
.results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.results-head h1 { margin: 0; }
.results-count { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.88rem; }
.results-tools { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.results-tools .btn, .results-tools button { margin: 0; min-height: 38px; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.75rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.25rem 0.2rem 0.65rem;
  background: var(--accent-soft); color: var(--accent); border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 600;
}
.chip-x { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; color: inherit; }
.chip-x:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.bulk-bar { display: none; }
body.select-mode .bulk-bar.sel-only {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.55rem 0.8rem; margin-bottom: 0.75rem;
  background: var(--accent-soft); border-radius: var(--radius-md); font-size: 0.86rem; font-weight: 600;
}
.bulk-bar select { width: auto; margin: 0; }
.bulk-bar button { margin: 0; }
.results-body { position: relative; }
.loading-veil {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: center; gap: 0.6rem;
  padding-top: 4rem; background: color-mix(in srgb, var(--bg) 70%, transparent); font-weight: 600; color: var(--fg);
}
.loading-veil[hidden] { display: none; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
.empty-state .empty-title { font-size: 1.05rem; font-weight: 700; color: var(--fg); margin: 0.6rem 0 0.2rem; }

/* --- Table --- */
.opps-table-wrap { overflow-x: auto; }
.opps-table { font-size: 0.86rem; }
.opps-table th, .opps-table td { padding: 0.6rem 0.7rem; }
.opps-table th:first-child, .opps-table td:first-child { padding-left: 0.9rem; }
.opps-table tbody tr.row-hidden { opacity: 0.6; }
.col-sel { width: 36px; }
.col-sel input { width: 18px; height: 18px; margin: 0.1rem 0 0; }
.col-priority { width: 72px; }
.col-title { min-width: 240px; }
.col-deadline { width: 128px; white-space: nowrap; }
.col-budget { width: 80px; white-space: nowrap; }
.col-workflow { width: 140px; }
.col-match { width: 230px; }
.col-actions { width: 48px; text-align: right; }
.opp-title { font-weight: 600; color: var(--fg); text-decoration: none; line-height: 1.35; }
.opp-title:hover { color: var(--accent); text-decoration: underline; }
.opp-title:visited { color: color-mix(in srgb, var(--fg) 75%, var(--accent)); }
.opp-meta { color: var(--muted); font-size: 0.8rem; margin-top: 0.15rem; }
.opp-meta .dot { margin: 0 0.3rem; }
.opp-badges { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.3rem; }
.badge-new { background: #fef3c7; color: #78350f; border-color: transparent; font-weight: 700; }
:root[data-theme="dark"] .badge-new { background: #4d3a02; color: #fde047; }
.badge-portal { background: var(--info-soft); color: var(--info-fg); border-color: transparent; }
.col-deadline .date { display: block; font-weight: 600; }
.col-deadline .days { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 0.25rem; }
.col-deadline .tier-badge { font-size: 0.68rem; text-transform: none; letter-spacing: 0; }

.prio {
  list-style: none; display: inline-flex; align-items: center; gap: 1px; min-width: 36px; height: 32px; padding: 0 0.3rem;
  border-radius: var(--radius-sm); cursor: pointer; color: var(--muted-2);
}
.prio::-webkit-details-marker { display: none; }
.prio:hover { background: var(--surface-2); }
.prio-star1, .prio-star2, .prio-star3 { color: #b7791f; }
.prio-attention { color: var(--danger); }
:root[data-theme="dark"] .prio-star1, :root[data-theme="dark"] .prio-star2, :root[data-theme="dark"] .prio-star3 { color: #f0c46a; }
.flag-popover { left: 0; top: 100%; margin: 0.25rem 0 0; }
.flag-option { min-height: 34px; width: 100%; }
.flag-option.prio-star1, .flag-option.prio-star2, .flag-option.prio-star3 { color: #b7791f; }
.flag-glyph { display: inline-block; min-width: 2.6em; }

.col-workflow .workflow-select { min-width: 0; width: 100%; max-width: 130px; font-size: 0.75rem; }
.people { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.35rem; flex-wrap: wrap; }
.avatar-sm { width: 24px; height: 24px; font-size: 0.62rem; }
.person.lead .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--accent); }
.take-btn {
  margin: 0; padding: 0.15rem 0.5rem; font-size: 0.74rem; font-weight: 600; min-height: 26px;
  background: transparent; color: var(--accent); border: 1px dashed var(--border-strong); border-radius: var(--radius-pill);
}
.take-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.viewed-by { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.72rem; color: var(--muted); }

.bm { position: relative; }
.bm > summary {
  list-style: none; display: flex; align-items: center; gap: 0.4rem; cursor: pointer; padding: 0.2rem 0.3rem;
  border-radius: var(--radius-sm); min-height: 32px;
}
.bm > summary::-webkit-details-marker { display: none; }
.bm > summary:hover { background: var(--surface-2); }
.bm-org { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.bm-more { font-size: 0.72rem; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0 0.4rem; }
.bm-chev { color: var(--muted); margin-left: auto; transition: transform 0.15s ease; }
.bm[open] .bm-chev { transform: rotate(180deg); }
.bm-panel { padding: 0.4rem 0.2rem 0.1rem; }
.bm-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; padding: 0.3rem 0; border-top: 1px solid var(--border); }
.bm-row-org { flex: 1 1 100px; min-width: 0; }
.bm-tools { display: inline-flex; align-items: center; gap: 0.15rem; }
.bm-tools .icon-btn { display: inline-flex; align-items: center; gap: 0.15rem; min-height: 28px; padding: 0.15rem 0.35rem; }
.bm-tools .n { font-size: 0.7rem; font-weight: 700; }
.bm .note-popover { right: 0; left: auto; }
.improve-details summary { font-size: 0.75rem; }

.pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.pager-pages, .pager-size { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.pager .btn { margin: 0; padding: 0.4rem 0.8rem; }

/* --- Tablet / narrow: filters become a drawer --- */
@media (max-width: 1099px) {
  .col-budget { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sidebar, .filters-toggle .filters-chev { transition: none; } }

/* --- Phones: table rows become stacked cards (full card design is P2) --- */
@media (max-width: 760px) {
  .content:has(.opps-layout) { padding: 1rem 0.75rem 2.5rem; }
  /* Filters: a full-width sheet over the page. */
  .js-filters .filter-sidebar {
    position: fixed; inset: 0; z-index: 70; width: auto; max-height: none; border: none; border-radius: 0;
  }
  .when-wide { display: none; }
  .when-narrow { display: inline; }
  .opps-table-wrap { background: none; border: none; box-shadow: none; overflow: visible; }
  .opps-table, .opps-table tbody, .opps-table tr, .opps-table td { display: block; width: auto; }
  .opps-table thead { display: none; }
  .opps-table tr {
    position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
    margin-bottom: 0.75rem; padding: 0.7rem 0.8rem 0.6rem; box-shadow: var(--shadow-sm);
  }
  .opps-table td { border: none; padding: 0.2rem 0 !important; }
  .opps-table td.col-title { padding-right: 5.5rem !important; }
  .opps-table td.col-priority { position: absolute; top: 0.45rem; right: 2.6rem; padding: 0 !important; }
  .opps-table td.col-actions { position: absolute; top: 0.45rem; right: 0.3rem; padding: 0 !important; width: auto; }
  .opps-table td.col-sel { position: absolute; top: 0.8rem; left: -0.2rem; }
  body.select-mode .opps-table tr { padding-left: 2rem; }
  .opps-table td.col-deadline { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; white-space: normal; }
  .col-deadline .date, .col-deadline .days { display: inline; margin: 0; }
  .opps-table td.col-workflow { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
  .people { margin-top: 0; }
  .col-match .bm-org { max-width: 60vw; }
  .col-match, .col-workflow, .col-priority, .col-deadline { width: auto; }
  .opps-table tbody tr:hover { background: var(--surface); }
  .pager { justify-content: center; }
}

/* v0.9.0 fixes after first real-browser captures (01/11/2026) */
[hidden] { display: none !important; }
body:not(.select-mode) .sel-only { display: none !important; }
.sidebar-brand a { white-space: nowrap; font-size: 0.98rem; }
.opps-table { table-layout: auto; }
.col-priority { width: 56px; }
.col-title { min-width: 200px; }
.col-deadline { width: 112px; }
.col-workflow { width: 136px; min-width: 136px; }
.col-workflow .workflow-select { max-width: none; }
.col-match { width: 200px; min-width: 180px; }
.bm-org { max-width: 110px; }
.col-actions { width: 44px; padding-left: 0 !important; padding-right: 0.5rem !important; }
.opp-budget { display: none; }
@media (max-width: 1599px) {
  .col-budget { display: none; }
  .opp-budget { display: inline; }
}
.topbar-guide-btn { font-size: 0; }

/* Fixed column widths: the Opportunity column takes what's left (measured 01/11/2026) */
@media (min-width: 761px) {
  .opps-table { table-layout: fixed; }
  .opps-table th.col-sel, .opps-table td.col-sel { width: 40px; }
  .opps-table .col-priority { width: 60px; }
  .opps-table .col-title { width: auto; min-width: 0; }
  .opps-table .col-deadline { width: 116px; white-space: normal; }
  .opps-table .col-budget { width: 76px; }
  .opps-table .col-workflow { width: 132px; min-width: 0; }
  .opps-table .col-match { width: 196px; min-width: 0; }
  .opps-table .col-actions { width: 48px; }
  .opps-table th { white-space: normal; }
}
.bm > summary { min-width: 0; }
.bm-org { flex: 1 1 auto; min-width: 0; max-width: none; }
.opp-title { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .opps-table td.col-budget { display: none; }
  .opps-table td.col-workflow .workflow-select { width: auto; flex: 0 0 auto; }
}


/* v0.9.0 detail page: back link + "Who's working on this" panel */
.back-link { margin: 0 0 0.5rem; font-size: 0.86rem; }
.back-link a { text-decoration: none; font-weight: 600; }
.assign-title { margin: 0 0 0.75rem; display: flex; align-items: center; gap: 0.45rem; font-size: 1.02rem; }
.assign-org + .assign-org { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem; }
.assign-org-name { margin: 0 0 0.5rem; font-size: 0.92rem; }
.assign-people { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-bottom: 0.6rem; }
.assign-role { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.assign-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0.25rem 0 0; }
.person-pill {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.3rem 0.15rem 0.2rem;
  border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 0.86rem; background: var(--surface-2);
}
.person-pill.lead { border-color: var(--accent); background: var(--accent-soft); }
.pill-x {
  margin: 0; padding: 0; width: 22px; height: 22px; justify-content: center; border-radius: 50%;
  background: transparent; border: none; color: var(--muted);
}
.pill-x:hover { background: var(--danger-soft); color: var(--danger); border: none; }
.assign-self { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.assign-self button { margin: 0; }
.assign-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0.75rem; }
.assign-admin label { margin: 0; }
.assign-admin select { width: auto; margin: 0; min-width: 160px; }
.assign-admin button { margin: 0; }
.assign-admin .hint { flex-basis: 100%; margin: 0; }
.assign-instructions label { margin-top: 0.2rem; }
.instr-row { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; }
.instr-row label { margin: 0.5rem 0 0; }
.instr-row input[type=date] { width: auto; }
.instr-row button { margin: 0; }
.instr-text { white-space: pre-line; background: var(--surface-2); border-left: 3px solid var(--accent); padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); }
.due-line { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; font-size: 0.88rem; }

.help-toc ul { columns: 2; margin: 0.4rem 0 0.8rem; padding-left: 1.1rem; }
.help-toc button { margin: 0; }
@media (max-width: 600px) { .help-toc ul { columns: 1; } }
kbd { border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 0.3rem; font-size: 0.8em; background: var(--surface-2); }

/* Keep focused/scrolled-to elements clear of the sticky header (WCAG 2.4.11) */
html { scroll-padding-top: calc(var(--topbar-h) + 0.75rem); }
@media (max-width: 520px) { html { scroll-padding-top: 7.5rem; } }

/* Contrast fixes from the axe scan (01/11/2026) */
.icon-btn { color: var(--muted); }
.improve-details summary { color: var(--muted); }
.avatar { background: #2f5fdd; color: #fff; }
:root[data-theme="dark"] button:not(.secondary):not(.danger):not(.link-btn):not(.icon-only):not(.pill-x):not(.nav-collapse-btn):not(.account-logout):not(.flag-option):not(.take-btn):not(.topbar-icon-btn):not(.topbar-guide-btn):not(.tour-skip-btn),
:root[data-theme="dark"] .btn:not(.secondary):not(.danger) { color: #0b1226; }
:root[data-theme="dark"] .topbar-badge, :root[data-theme="dark"] .fsec-count { color: #0b1226; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn:not(.secondary):not(.danger) { color: #0b1226; }
}

:root[data-theme="dark"] .filter-form:not(.is-dirty) .btn-apply { color: var(--accent) !important; }

/* =====================================================================
   v0.10.0 (spec v1.2 P2): table options, density, column visibility,
   contextual help tips, phone cards, methodology page
   ===================================================================== */
.when-wide-inline { display: inline; }
@media (max-width: 520px) { .when-wide-inline { display: none; } }

/* Table options popover */
.table-options { position: relative; }
.table-options > summary { list-style: none; margin: 0; min-height: 38px; }
.table-options > summary::-webkit-details-marker { display: none; }
.table-options-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 230px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 0.75rem 0.85rem 0.5rem;
}
.table-options-pop fieldset { border: none; margin: 0 0 0.6rem; padding: 0; }
.table-options-pop legend { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.2rem; }
.table-options-pop .hint { margin: 0; }

/* Density */
.density-compact .opps-table td, .density-compact .opps-table th { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.density-compact .opp-badges { margin-top: 0.15rem; }
.density-compact .people { margin-top: 0.2rem; }
.density-dense .opps-table { font-size: 0.8rem; }
.density-dense .opps-table td, .density-dense .opps-table th { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.density-dense .opp-meta, .density-dense .viewed-by { display: none; }
.density-dense .opp-badges { display: inline-flex; margin: 0 0 0 0.35rem; vertical-align: middle; }
.density-dense .col-deadline .days { display: inline; margin-left: 0.3rem; }
.density-dense .col-deadline .tier-badge { display: none; }
.density-dense .people { display: inline-flex; margin: 0 0 0 0.3rem; }
.density-dense .prio, .density-dense .bm > summary { min-height: 26px; height: 26px; }

/* Column visibility (hidden only above phone width: cards always show everything useful) */
@media (min-width: 761px) {
  .hide-priority .col-priority, .hide-deadline .col-deadline, .hide-budget .col-budget,
  .hide-workflow .col-workflow, .hide-match .col-match { display: none; }
}
.hide-budget .opp-budget { display: none !important; }

/* Contextual help tips */
.tip { display: inline-block; position: relative; vertical-align: middle; margin-left: 0.15rem; }
.tip > summary {
  list-style: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700; color: var(--muted); border: 1px solid var(--border-strong); cursor: pointer;
  text-transform: none; letter-spacing: 0; background: var(--surface);
}
.tip > summary::-webkit-details-marker { display: none; }
.tip > summary::after { content: ""; position: absolute; inset: -8px; } /* 34px pointer target */
.tip[open] > summary { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.tip-pop {
  position: absolute; z-index: 45; top: calc(100% + 6px); left: -8px; width: 250px;
  background: var(--surface); color: var(--fg); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 0.6rem 0.75rem; font-size: 0.8rem; font-weight: 400; line-height: 1.45;
  text-transform: none; letter-spacing: 0; white-space: normal; text-align: left;
}
th .tip-pop { left: auto; right: -8px; }

/* Phone cards (polish) */
@media (max-width: 760px) {
  .opps-table tr { padding: 0.75rem 0.85rem 0.65rem; }
  .opps-table td.col-title .opp-title { font-size: 0.98rem; }
  .opps-table td.col-deadline { padding-top: 0.4rem !important; }
  .opps-table td.col-workflow, .opps-table td.col-match { border-top: 1px solid var(--border) !important; margin-top: 0.4rem; padding-top: 0.45rem !important; }
  .opps-table td.col-workflow + td.col-match { border-top: none !important; margin-top: 0; padding-top: 0.15rem !important; }
  .opps-table td.col-priority .prio, .opps-table td.col-actions .icon-only { min-width: 40px; height: 40px; justify-content: center; }
  .tip-pop { width: min(250px, 80vw); }
}

/* Methodology page */
.callout-warning { border-left: 4px solid var(--warning-fg); background: var(--warning-soft); }
.steps { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.steps li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.85rem 1.1rem; }
.steps h3 { margin-bottom: 0.2rem; }
.formula { font-size: 1.05rem; text-align: center; padding: 1rem; }
.legend-table { max-width: 640px; }

.tip > summary { width: 24px; height: 24px; font-size: 0.72rem; }
.tip > summary::after { content: none; }
.opps-table .col-priority { width: 76px; }

a.col-sort { min-height: 24px; padding: 2px 0; }
.opps-table th { vertical-align: middle; }
.opps-table th .tip { margin-left: 0.25rem; }

/* Call page: matching table stacks on phones (reflow, v0.10.0) */
.matches-table td.mt-notes { min-width: 280px; }
@media (max-width: 760px) {
  .matches-table, .matches-table tbody, .matches-table tr, .matches-table td { display: block; width: auto !important; min-width: 0 !important; }
  .matches-table thead { display: none; }
  .matches-table tr { border-bottom: 1px solid var(--border); padding: 0.6rem 0.2rem; }
  .matches-table td { border: none; padding: 0.25rem 0.6rem; }
  .matches-table td::before { content: attr(data-label); display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
  .matches-table td.mt-org { font-weight: 700; font-size: 1rem; }
  .matches-table td.mt-org::before { content: none; }
  .call-toolbar { gap: 0.4rem; }
  .card p, .card li { overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------------------
   v0.11.0: hide safety (confirm, undo, hidden count) + organisation team
--------------------------------------------------------------------- */
.flash-undo, .hidden-banner { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.flash-undo > span, .hidden-banner > span { flex: 1 1 18rem; }
.flash-undo a { color: inherit; font-weight: 600; }
.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.85rem; min-height: 24px; }
.hidden-note { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--muted); display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.hidden-note a { font-weight: 600; }
.confirm-dialog {
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); color: var(--fg);
  padding: 1.25rem 1.4rem; max-width: min(30rem, calc(100vw - 2rem)); box-shadow: var(--shadow-lg);
}
.confirm-dialog::backdrop { background: rgba(16, 24, 40, 0.45); }
.confirm-dialog h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.confirm-dialog p { margin: 0 0 1.1rem; color: var(--muted); line-height: 1.45; }
.confirm-dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }
.team-members td, .team-members th { vertical-align: middle; }
.team-members .member-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: flex-end; }
.team-add { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem; align-items: end; }
.setup-link-box { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.5rem; }
.setup-link-box input { flex: 1 1 22rem; font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; }
.status-pill { white-space: nowrap; display: inline-block; padding: 0.1rem 0.55rem; border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 600; }
.status-active { background: var(--success-soft); color: var(--success-fg); }
.status-disabled { background: var(--danger-soft); color: var(--danger); }
.status-pending { background: var(--warning-soft); color: var(--warning-fg); }
@media (max-width: 760px) {
  .team-members thead { display: none; }
  .team-members, .team-members tbody, .team-members tr, .team-members td { display: block; width: 100%; }
  .team-members tr { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.6rem 0.75rem; margin-bottom: 0.6rem; }
  .team-members td { border: 0; padding: 0.2rem 0; }
  .team-members td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 0.8rem; }
  .team-members .member-actions { justify-content: flex-start; }
}
/* Organisation profile form (v0.11.0): tag pickers folded away. */
.card-inset { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.75rem 1rem; margin-top: 1rem; background: var(--surface-2); }
.tag-picker-summary { cursor: pointer; font-weight: 600; color: var(--accent); min-height: 24px; }
.card-inset[open] > .tag-picker-summary { margin-bottom: 0.75rem; }
.tag-picker-h { font-size: 0.95rem; margin: 1.1rem 0 0.35rem; }
#tag-search { width: 100%; max-width: 28rem; }
.tag-chip[hidden], .tag-group[hidden] { display: none !important; }
/* Domain group (v0.11.0): category checkbox sits beside, not inside, the subcategory toggle. */
.tag-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; }
.tag-group .tag-subs { flex: 1 1 100%; }
.tag-group .tag-subs > summary { font-size: 0.82rem; color: var(--muted); min-height: 24px; width: max-content; }
.tag-group .tag-subs[open] > summary::before { content: "▾"; }
.tag-group .tag-subs > .checkbox-row { margin-top: 0.35rem; }
@media (min-width: 761px) { .tag-group .tag-subs:not([open]) { flex: 0 1 auto; } }
/* v0.12.0: organisation profile page */
.profile-head h1 { margin-bottom: 0.15rem; }
.profile-head .page-subtitle { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.matching-status { border: 1px solid var(--border); border-left: 4px solid var(--muted); border-radius: var(--radius-md);
  padding: 0.75rem 1rem; margin: 1rem 0 1.25rem; background: var(--surface); display: flex; flex-wrap: wrap;
  gap: 0.5rem 1rem; align-items: center; }
.matching-status > p { margin: 0; flex: 1 1 26rem; }
.matching-status > progress { flex: 1 1 100%; }
.matching-status form { margin: 0; }
.matching-done { border-left-color: var(--success-fg); }
.matching-running { border-left-color: var(--accent); background: var(--accent-soft); }
.matching-failed { border-left-color: var(--danger); }
.matching-never { border-left-color: var(--warning-fg); background: var(--warning-soft); }
.key-callout { border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem; margin: 0.25rem 0 0.9rem; font-size: 0.92rem; }
.key-callout strong { display: block; margin-bottom: 0.15rem; }
.desc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1rem; align-items: start; }
.desc-layout textarea { min-height: 22rem; }
.desc-questions { margin-top: 1.6rem; font-size: 0.88rem; }
.desc-questions h3 { font-size: 0.95rem; margin: 0 0 0.4rem; }
.desc-questions ol { padding-left: 1.2rem; margin: 0 0 0.6rem; }
.desc-questions li { margin-bottom: 0.35rem; }
@media (max-width: 900px) { .desc-layout { grid-template-columns: 1fr; } .desc-questions { margin-top: 0; } }
.form-grid-span { grid-column: 1 / -1; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 1.5rem;
  padding-top: 1rem; border-top: 1px solid var(--border); }
.profile-actions button { margin: 0; }
/* v0.12.0: two-step login */
.tf-steps { padding-left: 1.3rem; }
.tf-steps > li { margin-bottom: 1.25rem; }
.tf-steps h2 { font-size: 1.05rem; margin: 0 0 0.35rem; }
.tf-qr { background: #fff; display: inline-block; padding: 0.4rem; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.tf-qr svg { display: block; width: 205px; height: auto; }
.tf-secret { font-size: 1rem; letter-spacing: 0.06em; word-break: break-all; }
.tf-confirm { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; }
.tf-confirm label { flex: 1 1 100%; margin: 0; }
.tf-confirm input { max-width: 10rem; font-size: 1.1rem; letter-spacing: 0.15em; }
.tf-codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.4rem 1rem; }
.tf-codes code { font-size: 1rem; }
.tf-code-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.75rem 0 1rem; }
.tf-manage { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.tf-manage h3 { margin: 0 0 0.2rem; font-size: 0.95rem; }
.tf-manage input { width: 100%; }
@media print { .sidebar, .topbar, .tf-code-actions, .site-footer { display: none !important; } }
/* v0.12.0: ChatGPT helper + add-organisation options */
.chatgpt-helper { margin: 0 0 1rem; }
.chatgpt-steps { padding-left: 1.3rem; margin: 0 0 0.6rem; }
.chatgpt-steps > li { margin-bottom: 0.7rem; }
.chatgpt-prompt-box { margin-top: 0.4rem; }
.chatgpt-prompt-box textarea { width: 100%; font-size: 0.82rem; font-family: ui-monospace, Consolas, monospace; background: var(--surface); }
.chatgpt-prompt-box button { margin-top: 0.35rem; }
.keyword-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.add-org-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; align-items: start; }
.add-org-options h2 { font-size: 1.1rem; margin-top: 0; }
.tag-group .tag-subs > summary { padding: 0.2rem 0; line-height: 1.4; min-height: 28px; box-sizing: border-box; }
/* ===== v0.13.0: call page redesign ===== */
.breadcrumb { display: flex; gap: 0.4rem; align-items: center; font-size: 0.88rem; margin-bottom: 0.6rem; }
.call-head { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: flex-start; justify-content: space-between; }
.call-head-main { flex: 1 1 32rem; min-width: 0; }
.call-head h1 { margin: 0 0 0.45rem; line-height: 1.25; }
.call-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0 0 0.4rem; }
.badge-programme { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
.badge-soon { background: #efe6ff; color: #5b3aa6; border-color: transparent; font-size: 0.72rem; }
:root[data-theme="dark"] .badge-soon { background: #2a2140; color: #c9b5ff; }
.badge-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.call-leads { font-size: 0.86rem; color: var(--muted); margin: 0; }
.call-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.call-actions form { margin: 0; }
.call-actions .workflow-select { min-height: 38px; }
.more-menu { position: relative; }
.more-menu > summary { list-style: none; cursor: pointer; min-height: 38px; display: inline-flex; align-items: center; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(19rem, 86vw); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 0.75rem; display: grid; gap: 0.5rem; }
.more-menu-panel form { display: grid; gap: 0.3rem; margin: 0; }
.more-menu-panel button { width: 100%; justify-content: flex-start; text-align: left; }
.more-menu-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0.2rem 0 0; }
.metric-row { list-style: none; padding: 0.5rem; margin: 1rem 0 0.75rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.metric { display: grid; grid-template-columns: auto 1fr; column-gap: 0.6rem; align-items: center; padding: 0.55rem 0.75rem; border-radius: var(--radius-md); }
.metric > .icon { grid-row: 1 / span 3; color: var(--muted); }
.metric-label { font-size: 0.78rem; color: var(--muted); }
.metric-value { font-size: 1.08rem; font-weight: 700; color: inherit; text-decoration: none; }
a.metric-value:hover { text-decoration: underline; }
.metric-chip { justify-self: start; font-size: 0.75rem; padding: 0.05rem 0.45rem; border-radius: var(--radius-pill); background: var(--success-soft); color: var(--success-fg); }
.metric-chip.chip-soon { background: var(--warning-soft); color: var(--warning-fg); }
.metric-chip.chip-closed { background: var(--danger-soft); color: var(--danger); }
.metric-match.pct-high, .metric-match.pct-mid, .metric-match.pct-low { color: inherit; }
.metric-match.pct-high { background: var(--success-soft); }
.metric-match.pct-mid { background: var(--warning-soft); }
.metric-match .metric-value { font-size: 1.4rem; }
.tab-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem;
  border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.tabs { display: flex; gap: 0.15rem; overflow-x: auto; scrollbar-width: thin; max-width: 100%; }
.tabs [role="tab"] { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.65rem 0.85rem; white-space: nowrap; color: var(--muted);
  text-decoration: none; border-bottom: 3px solid transparent; font-weight: 600; min-height: 44px; }
.tabs [role="tab"]:hover { color: var(--accent); }
.tabs [role="tab"][aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.call-page:not(.js) .tab-panel { margin-bottom: 2rem; }
.ws-customise { position: relative; margin-bottom: 0.4rem; }
.ws-customise > summary { list-style: none; cursor: pointer; }
.ws-customise > summary::-webkit-details-marker { display: none; }
.ws-customise-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(25rem, 92vw); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 0.8rem; }
.ws-list { list-style: none; padding: 0; margin: 0.4rem 0 0.75rem; }
.ws-list-head { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0.5rem 0 0.2rem; }
.ws-list-item { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; align-items: center; justify-content: space-between; padding: 0.3rem 0;
  border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.ws-list-item label { display: flex; align-items: center; gap: 0.35rem; margin: 0; font-weight: 500; }
.ws-tools { display: flex; gap: 0.25rem; }
.ws-tools .btn-sm { min-width: 32px; min-height: 30px; padding: 0.15rem 0.45rem; }
.ws-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: 1rem; align-items: start; }
.ws-col { display: grid; gap: 1rem; min-width: 0; }
@media (max-width: 1000px) { .ws-grid { grid-template-columns: 1fr; } }
.ws-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 0.9rem 1.1rem; }
.ws-panel[hidden] { display: none; }
.ws-panel-head { display: flex; align-items: center; gap: 0.5rem; }
.ws-panel-head h2 { font-size: 1.02rem; margin: 0; display: flex; align-items: center; gap: 0.45rem; flex: 0 0 auto; }
.ws-panel-head h2 .icon { color: var(--accent); }
.ws-panel-hint { flex: 1 1 auto; font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; visibility: hidden; }
.ws-panel.is-collapsed .ws-panel-hint { visibility: visible; }
.ws-collapse { margin-left: auto; min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.ws-collapse[aria-expanded="false"] .icon { transform: rotate(-90deg); }
.ws-panel-body { margin-top: 0.6rem; }
.ws-panel-body > :last-child { margin-bottom: 0; }
.ws-summary { background: var(--accent-soft); border-color: transparent; }
.ws-summary .ws-panel-body { font-size: 0.98rem; line-height: 1.6; }
.ws-sub { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0.9rem 0 0.3rem; }
.ai-summary { font-size: 1rem; line-height: 1.6; margin: 0 0 0.2rem; }
.ai-summary-pending { color: var(--muted); font-style: italic; }
.ai-note { font-size: 0.76rem; color: var(--muted); margin: 0 0 0.5rem; }
.clamp p { margin: 0 0 0.6rem; }
.clamp.clamped { max-height: 11.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.read-more { margin-top: 0.2rem; font-weight: 600; }
.outcome-list { padding-left: 1.2rem; margin: 0; }
.outcome-list li { margin-bottom: 0.45rem; }
.elig-note { font-size: 0.82rem; color: var(--muted); margin: 0 0 0.4rem; }
.elig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.25rem 1.5rem; }
.elig-grid p { margin: 0; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.6rem 1.2rem; margin: 0; }
.info-grid dt { font-size: 0.76rem; color: var(--muted); }
.info-grid dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.doc-list { list-style: none; padding: 0; margin: 0 0 0.4rem; display: grid; gap: 0.45rem; }
.doc-list li { display: flex; gap: 0.4rem; align-items: flex-start; overflow-wrap: anywhere; }
.doc-list .icon { flex: 0 0 auto; margin-top: 0.2rem; color: var(--muted); }
.tab-intro { color: var(--muted); font-size: 0.88rem; margin-top: 0; }
.match-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 0.9rem 1.1rem; margin-bottom: 0.8rem; }
.match-card-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.match-card-head h2 { font-size: 1.05rem; margin: 0 0.25rem 0 0; }
.match-card-improve { margin-left: auto; }
.match-rationale { margin: 0.6rem 0 0.3rem; line-height: 1.55; }
.match-more > summary { cursor: pointer; color: var(--accent); font-weight: 600; min-height: 24px; }
.danger-text { color: var(--danger); }
.notes-org + .notes-org { border-top: 1px solid var(--border); margin-top: 0.8rem; padding-top: 0.8rem; }
.docs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; align-items: start; }
.soon-card { max-width: 44rem; }
.soon-card h2 { display: flex; align-items: center; gap: 0.5rem; margin-top: 0; }
@media (max-width: 640px) {
  .metric-row { grid-template-columns: 1fr 1fr; }
  .call-actions { width: 100%; }
  .call-actions > .btn:first-child { flex: 1 1 100%; justify-content: center; }
  .ws-panel-hint { display: none; }
}
/* v0.13.0 review: built-in Read more, How it fits, documents section, team cards */
.desc-block p { margin: 0 0 0.6rem; }
.desc-block:has(> .read-more-block[open]) > .desc-preview { display: none; }
.read-more-block > summary { list-style: none; cursor: pointer; color: var(--accent); font-weight: 600; display: inline-flex;
  align-items: center; min-height: 28px; margin: 0.1rem 0 0.3rem; }
.read-more-block > summary::-webkit-details-marker { display: none; }
.read-more-block > summary::after { content: "▾"; margin-left: 0.3rem; font-size: 0.8em; }
.read-more-block[open] > summary::after { content: "▴"; }
.read-more-block .rm-close, .read-more-block[open] .rm-open { display: none; }
.read-more-block[open] .rm-close { display: inline; }
.read-more-block[open] > summary { order: 2; }
.orig-link { margin: 0.4rem 0 0; font-weight: 600; }
.fit-row { padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.fit-row:first-child { padding-top: 0; }
.fit-row:last-of-type { border-bottom: 0; }
.fit-head { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.fit-org { font-size: 0.92rem; }
.fit-why { margin: 0.3rem 0 0.2rem; font-size: 0.86rem; color: var(--muted); line-height: 1.45; }
.flash-target { outline: 3px solid var(--accent); outline-offset: 3px; transition: outline-color 1.2s; }
.docs-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.25rem 1.5rem; }
.docs-cols .ws-sub:first-child { margin-top: 0; }
.team-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 1rem 1.15rem; margin-bottom: 1rem; }
.team-card-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border); margin-bottom: 0.8rem; }
.team-card-head h2 { font-size: 1.08rem; margin: 0 0.3rem 0 0; }
.due-chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; padding: 0.1rem 0.55rem; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--muted); }
.due-chip.due-soon { background: var(--warning-soft); color: var(--warning-fg); }
.due-chip.due-late { background: var(--danger-soft); color: var(--danger); }
.team-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr; } }
.team-people { display: grid; gap: 0.45rem; }
.team-role { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.team-role .assign-label { min-width: 4.2rem; }
.team-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0.2rem; }
.team-actions form { margin: 0; }
.team-fold { margin-top: 0.5rem; }
.team-fold > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 0.88rem; display: inline-flex; gap: 0.3rem;
  align-items: center; min-height: 28px; }
.team-fold[open] > summary { margin-bottom: 0.5rem; }
.team-fold form { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.7rem 0.8rem; }
.team-assign-form { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 0.6rem; align-items: center; }
.team-assign-form label { margin: 0; font-size: 0.85rem; }
.team-assign-form button, .team-assign-form .hint { grid-column: 1 / -1; justify-self: start; margin: 0; }
.team-fold textarea { width: 100%; }
.team-fold .instr-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.4rem; }
.team-fold .instr-row label { margin: 0; font-size: 0.85rem; }
.team-who .instr-text { white-space: pre-line; background: var(--surface-2); border-radius: var(--radius-sm); padding: 0.55rem 0.7rem; }
.team-notes .note-log { max-height: 26rem; overflow-y: auto; }
.team-notes .note-entry { border-left: 3px solid var(--border); padding: 0.2rem 0 0.5rem 0.7rem; margin-bottom: 0.4rem; }
.team-notes textarea { width: 100%; }
/* v0.13.0 review: Load more details visible under the call description */
.desc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-top: 0.6rem;
  padding-top: 0.6rem; border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.desc-actions .orig-link { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; font-weight: 600; }
.desc-actions form { margin: 0; }
.desc-actions #load-more-hint { flex: 1 1 18rem; }

/* v0.14.0: My work menu count + read-only automatic status */
.nav-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--on-accent); font-size: 0.7rem; font-weight: 700; line-height: 20px; text-align: center; }
:root[data-theme="dark"] .nav-count { color: #0b1226; }
@media (min-width: 901px) {
  :root[data-nav="collapsed"] .sidebar-nav a { position: relative; }
  :root[data-nav="collapsed"] .nav-count { position: absolute; top: 2px; right: 6px; min-width: 16px; height: 16px;
    line-height: 16px; padding: 0 4px; font-size: 0.62rem; }
}
.status-auto { align-self: center; cursor: help; }
/* v0.14.0: section labels readable (axe contrast) */
.nav-section-label { opacity: 1; }

/* v0.15.0: role-based guided tour */
.nav-group { display: flex; flex-direction: column; gap: 0.15rem; }
.role-tour-tip { width: 340px; }
.role-tour-tip.tour-centered { width: 420px; }
.role-tour-tip p { color: var(--fg); }
.role-tour-links { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.7rem; padding-top: 0.55rem;
  border-top: 1px solid var(--border); }
.role-tour-links .link-btn { font-size: 0.8rem; min-height: 24px; }
.tour-tooltip-buttons { flex-wrap: wrap; justify-content: flex-end; }
.role-tour-paused { position: fixed; z-index: 190; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: 0.6rem;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.18); padding: 0.45rem 0.55rem 0.45rem 1rem; font-size: 0.86rem; }
.role-tour-paused button { margin: 0; }
.help-start { border-left: 4px solid var(--accent); }
.help-start h2 { margin-top: 0; }
.help-steps { margin: 0 0 0.8rem; padding-left: 1.3rem; display: grid; gap: 0.45rem; }
.help-start-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: 0; }
.help-start-actions .btn { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.role-tour-tip .tour-tooltip-footer { flex-wrap: wrap; }
.role-tour-tip .tour-tooltip-step { white-space: nowrap; }

/* Listing clean-up (v0.16.0) */
.listings-help { display: grid; gap: 0.6rem; }
.listings-help p { margin: 0; }
.listings-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 1rem 0 0.6rem; }
.listings-tabs .tab { padding: 0.4rem 0.75rem; border-radius: 6px; text-decoration: none; }
.listings-tabs .tab.active { background: var(--accent-soft, rgba(37, 99, 235, 0.12)); font-weight: 600; }
.listings-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.listings-bar select { width: auto; margin: 0; }
.listings-bar button { margin: 0; }
.listings-table td:first-child { width: 2rem; }
.more-menu-remove select { width: 100%; margin: 0 0 0.4rem; }

/* Customer feedback (v0.16.0) */
.feedback-dialog { width: min(34rem, calc(100vw - 2rem)); max-width: none; }
.feedback-dialog .fb-where { margin: 0 0 0.8rem; }
.feedback-dialog fieldset { border: 0; padding: 0; margin: 0 0 0.8rem; }
.feedback-dialog .fb-kinds { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.feedback-dialog .fb-kinds label { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem;
  border: 1px solid var(--border-strong); border-radius: 999px; cursor: pointer; margin: 0; font-weight: 500; }
.feedback-dialog .fb-kinds label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft, rgba(37, 99, 235, 0.1)); }
.feedback-dialog .fb-kinds input { margin: 0; }
.feedback-dialog .fb-field { margin-bottom: 0.8rem; }
.feedback-dialog .fb-field[hidden], .feedback-dialog .fb-kinds label[hidden] { display: none; }
.feedback-dialog textarea, .feedback-dialog select { width: 100%; margin: 0.25rem 0 0; }
.feedback-dialog .fb-severity { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.feedback-dialog .fb-severity legend { width: 100%; margin-bottom: 0.2rem; font-weight: 600; }
.feedback-dialog .fb-severity label, .feedback-dialog .fb-contact { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; font-weight: 400; }
.feedback-dialog .fb-privacy { margin: 0.6rem 0 0.9rem; }
.feedback-dialog .fb-error { color: var(--danger-fg, #b42318); margin: 0 0 0.6rem; }
.feedback-dialog .fb-thanks h2 { display: flex; align-items: center; gap: 0.4rem; }
.more-menu-panel #report-call { width: 100%; justify-content: flex-start; }
.feedback-filters { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.feedback-filters label { display: grid; gap: 0.2rem; }
.feedback-filters select { width: auto; margin: 0; }
.feedback-table tr.fb-new td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.feedback-item { display: grid; gap: 1rem; max-width: 52rem; }
.feedback-message { white-space: pre-wrap; }
.feedback-context { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; margin: 0; }
.feedback-context dt { font-weight: 600; }
.feedback-context dd { margin: 0; overflow-wrap: anywhere; }
.badge.fb-status-new { background: var(--warning-soft); color: var(--warning-fg); }
.badge.fb-status-fixed { background: var(--success-soft, #dcfce7); color: var(--success-fg, #166534); }

/* What's new spotlights (v0.16.0) */
.wn-tip .wn-pill { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  background: #fde047; color: #713f12; border-radius: 999px; padding: 0.1rem 0.55rem; margin-bottom: 0.35rem; }
.wn-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #eab308; margin-left: 0.4rem;
  vertical-align: middle; box-shadow: 0 0 0 2px var(--surface, #fff); flex: none; }
.whats-new-list { display: grid; gap: 0.6rem; padding: 0; list-style: none; }
.whats-new-list li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.8rem; align-items: baseline; }
.whats-new-list .wn-when { min-width: 6.5rem; }
.feedback-item .card > h2:first-child { margin-top: 0; }

/* Page tours (v0.16.1): Skip sits at the bottom so it never covers the top bar it explains. */
.page-tour-skip { top: auto; bottom: 1rem; right: 1rem; }

/* Weekly "Open EU calls" posts (v0.17, /admin/digest) */
.digest-week { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }
.digest-order { width: 4.5rem; }
.digest-text { width: 100%; font-family: inherit; font-size: 0.95rem; line-height: 1.45; }
.digest-output { margin-top: 1.5rem; }
.digest-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.digest-email-preview { margin: 0.75rem 0 1.5rem; }
/* ---------- CallMatch plan states (v0.17, templates/_plan_macros.html) ----------
   Locked = solid border, lock mark, the plan that unlocks it and an Upgrade link.
   Coming soon = dashed, purple badge, no link: nobody can use it yet. */
.plan-gate { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
.plan-locked-btn {
  display: inline-flex; align-items: center; gap: 0.35rem; cursor: not-allowed;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border-strong, var(--border));
  border-radius: 6px; padding: 0.3rem 0.65rem; font: inherit; font-size: 0.85rem;
}
.plan-locked-btn:hover { background: var(--surface-2); color: var(--muted); }
.plan-locked-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-gate-why { font-size: 0.8rem; color: var(--muted); }
.plan-gate-why a { font-weight: 600; }
.plan-gate-panel { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px;
  padding: 0.75rem 0.9rem; background: var(--surface-2); }
.plan-gate-title { margin: 0 0 0.3rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.plan-gate-text { margin: 0.2rem 0 0; font-size: 0.88rem; color: var(--muted); }
.plan-lock-icon { flex: none; }
.plan-badge { display: inline-block; font-size: 0.72rem; font-weight: 600; border-radius: 999px; padding: 0.1rem 0.5rem; border: 1px solid transparent; }
.plan-badge-locked { background: var(--accent-soft); color: var(--accent); }
.plan-badge-on { background: var(--success-soft, #e7f6ec); color: var(--success-fg, #1d6b37); }
.plan-badge-soon { background: #efe6ff; color: #5b3aa6; border: 1px dashed #5b3aa6; }
:root[data-theme="dark"] .plan-badge-soon { background: #2a2140; color: #c9b5ff; border-color: #c9b5ff; }
.plan-gate-soon .plan-gate-soon-label { font-weight: 600; }
.plan-summary { padding: 0.8rem 1rem; }
.plan-summary-title { font-size: 1.05rem; margin: 0 0 0.25rem; }
.plan-summary-line, .plan-summary-links { margin: 0.2rem 0; font-size: 0.9rem; }
.plan-feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.plan-trial-offer { border: 1px dashed var(--border); border-radius: 8px; padding: 0.5rem 0.75rem; margin: 0.5rem 0; }
.plan-trial-offer p { margin: 0 0 0.35rem; }
.plan-admin { padding: 0.6rem 1rem; }
.plan-admin-form { display: grid; grid-template-columns: max-content minmax(0, 18rem); gap: 0.45rem 0.8rem; align-items: center; margin-top: 0.6rem; }
@media (max-width: 600px) { .plan-admin-form { grid-template-columns: 1fr; } }

/* v0.18 match reasoning: layer A "Why it matches" + checklist, layer C AI explanation */
.why-match, .ai-explain { margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.why-match .ws-sub, .ai-explain .ws-sub { margin: 0.2rem 0 0.35rem; font-size: 0.95rem; }
.why-list { margin: 0 0 0.4rem; padding-left: 1.2rem; line-height: 1.5; }
.why-locked { margin: 0.2rem 0 0.5rem; }
.match-checklist { list-style: none; margin: 0 0 0.4rem; padding: 0; display: grid; gap: 0.3rem; }
.match-checklist .chk { display: block; padding: 0.3rem 0.55rem; border-radius: var(--radius-sm); line-height: 1.45; font-size: 0.9rem; }
.match-checklist .chk-icon { display: inline-block; min-width: 1.2em; font-weight: 700; }
.match-checklist .chk-label { font-weight: 600; }
.chk-ok { background: var(--success-soft); color: var(--success-fg); }
.chk-warn { background: var(--warning-soft); color: var(--warning-fg); }
.chk-unknown { background: var(--info-soft); color: var(--info-fg); }
.ai-explain-text { margin: 0.2rem 0 0.3rem; line-height: 1.55; }
.ai-explain-wait { color: var(--muted); font-style: italic; }
.earlier-ai-note { margin-top: 0.6rem; }
.bm-why { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 0.1rem; }
/* AI call brief (v0.18): Free sees the start, then a locked line. */
.call-brief { margin: 0 0 0.5rem; }
.brief-locked { margin: 0.25rem 0 0.35rem; }
.brief-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0.5rem; }
.brief-admin p { margin: 0; }


/* =====================================================================
   Readability (v0.18, George 06/11/2026)
   1. Text grows with the screen: 16px up to ~1440px wide, then smoothly to
      18px at 2560px+. rem-based, so browser zoom and the browser's own font
      setting still work (WCAG 1.4.4); the vw part only adds on wide screens.
   2. Account menu > Text size (Small / Normal / Large), per user, on <html>.
   3. Opportunities table: balanced default column widths, resizable columns
      (ui_prefs.py), no truncated organisation names.
   ===================================================================== */
html { --ts: 1; font-size: calc(clamp(1rem, 0.839rem + 0.1786vw, 1.125rem) * var(--ts)); }
html[data-text-size="small"] { --ts: 0.9375; }
html[data-text-size="large"] { --ts: 1.125; }

/* Account menu: text size */
.account-dropdown form.text-size-form { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.5rem 0.6rem 0.4rem; }
.text-size-label { font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.text-size-options { display: flex; gap: 0.25rem; }
.text-size-btn {
  flex: 1 1 0; margin: 0; min-height: 32px; padding: 0.2rem 0.4rem; border-radius: var(--radius-sm);
  background: transparent; color: var(--fg); border: 1px solid var(--border-strong); cursor: pointer; font-weight: 600; line-height: 1.2;
}
.text-size-btn.ts-small { font-size: 0.8rem; }
.text-size-btn.ts-normal { font-size: 0.9rem; }
.text-size-btn.ts-large { font-size: 1.02rem; }
.text-size-btn:hover { background: var(--surface-2); }
.text-size-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
:root[data-theme="dark"] .text-size-btn:not([aria-pressed="true"]) { background: transparent; color: var(--fg) !important; }
:root[data-theme="dark"] .text-size-btn[aria-pressed="true"] { color: #0b1226 !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .text-size-btn[aria-pressed="true"] { color: #0b1226; }
}

/* Opportunities table: bigger text */
.opps-table { font-size: 0.9375rem; }
.opps-table th { font-size: 0.78rem; }
.opp-meta { font-size: 0.86rem; }
.col-deadline .days { font-size: 0.84rem; }
.col-deadline .tier-badge { font-size: 0.75rem; }
.take-btn { font-size: 0.8rem; }
.viewed-by { font-size: 0.8rem; }
.bm-more { font-size: 0.78rem; }
.density-dense .opps-table { font-size: 0.875rem; }

/* Title: up to 2 lines; the full title shows on hover (tooltip) and when the
   link has keyboard focus. Programme · source stay on one line. */
.opps-table .opp-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.opps-table .opp-title:focus-visible { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.opps-table .opp-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opps-table .col-title:focus-within .opp-meta { white-space: normal; }
/* Budget per project (shown here while the Budget column is hidden) gets its own line, never cut. */
.opps-table .opp-meta .opp-budget { display: none; }
.opp-budget-line { display: none; color: var(--muted); font-size: 0.86rem; }
@media (max-width: 1599px) { .opp-budget-line { display: block; } }
.hide-budget .opp-budget-line { display: block; }

/* Workflow: status on top, people / Take lead under it */
.opps-table td.col-workflow .badge { white-space: nowrap; }
.opps-table td.col-workflow .people { margin-top: 0.4rem; gap: 0.3rem 0.4rem; }

/* Best match: score, "+N" chip and chevron on one line, the full organisation
   name under them (wraps, never cut off); one line when the column is wide. */
.opps-table .bm { container-type: inline-size; }
.opps-table .bm > summary {
  display: grid; grid-template-columns: auto auto auto; grid-template-areas: "pct more chev" "org org org";
  justify-content: start; align-items: center; gap: 0.25rem 0.4rem; height: auto;
}
.opps-table .bm .pct-badge { grid-area: pct; }
.opps-table .bm-more { grid-area: more; justify-self: start; white-space: nowrap; }
.opps-table .bm-chev { grid-area: chev; margin-left: 0; }
.opps-table .bm-org { grid-area: org; white-space: normal; overflow: visible; text-overflow: clip; max-width: none; overflow-wrap: anywhere; line-height: 1.3; font-weight: 500; }
@container (min-width: 17rem) {
  .opps-table .bm > summary { grid-template-columns: auto minmax(0, max-content) auto auto; grid-template-areas: "pct org more chev"; }
}
.density-dense .opps-table .bm > summary { height: auto; }

/* Column widths. Opportunity takes what is left; the others have a default
   share (overridable per user: --w-* set on the table from ui_prefs.py). */
@media (min-width: 761px) {
  .opps-table { --d-deadline: 6.75rem; --d-budget: 6rem; --d-workflow: 7.75rem; --d-match: 22%; }
  .opps-table .col-priority { width: 5.5rem; }
  .opps-table:not(.has-workflow) { --d-deadline: 12%; --d-match: 30%; }
}
@media (min-width: 1800px) {
  .opps-table { --d-deadline: 8rem; --d-workflow: 9rem; --d-match: 26%; }
  .opps-table:not(.has-workflow) { --d-deadline: 12%; --d-match: 32%; }
}
@media (min-width: 761px) {
  .opps-table th.col-title { width: auto; }
  .opps-table th.col-deadline { width: var(--w-deadline, var(--d-deadline)); }
  .opps-table th.col-budget { width: var(--w-budget, var(--d-budget)); }
  .opps-table th.col-workflow { width: var(--w-workflow, var(--d-workflow)); }
  .opps-table th.col-match { width: var(--w-match, var(--d-match)); }
  .opps-table th[data-col] { position: relative; }
}

/* Column resize handle (added by opportunities_list.js above phone width) */
.col-resize {
  position: absolute; top: 0; bottom: 0; right: -10px; width: 20px; z-index: 3;
  cursor: col-resize; touch-action: none; display: flex; justify-content: center;
}
.col-resize::before { content: ""; width: 2px; height: 100%; background: transparent; transition: background 0.1s; }
.col-resize:hover::before, .col-resize.is-dragging::before { background: var(--accent); }
.col-resize:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 3px; }
.col-resize:focus-visible::before { background: var(--accent); }
.opps-table.is-resizing, .opps-table.is-resizing * { cursor: col-resize !important; user-select: none; }
@media (max-width: 760px) { .col-resize { display: none; } }

/* Table options: column width buttons */
.col-width-rows { display: grid; gap: 0.2rem; }
.col-width-row { display: flex; align-items: center; gap: 0.3rem; }
.col-width-row > span { flex: 1 1 auto; font-size: 0.86rem; }
.col-width-row button { margin: 0; min-width: 32px; min-height: 28px; padding: 0 0.4rem; line-height: 1; }
.table-options-pop { width: 260px; }
.table-options-pop .reset-widths { margin: 0.35rem 0 0; }
@media (max-width: 760px) { .table-options-pop .col-widths { display: none; } }
/* Phone cards: full title and meta, budget on its own line. */
@media (max-width: 760px) {
  .opps-table .opp-title { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
  .opps-table .opp-meta { white-space: normal; }
}

/* System settings: ECECT membership prices (v0.18.3) */
.member-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; max-width: 760px; }
.member-price-set { border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem 1rem 0.5rem; margin: 0; min-width: 0; }
.member-price-set legend { font-weight: 600; padding: 0 0.35rem; }
.member-price-set input { max-width: 100%; }
.member-price-state { font-size: 0.9rem; color: var(--muted); margin: 0.6rem 0 0.25rem; }
.member-price-state[data-state="active"] { color: inherit; font-weight: 600; }

/* Branding (v0.19.1) */
.sidebar-brand .brand-logo { height: 30px; width: auto; max-width: 150px; object-fit: contain; display: block; flex: none; }
.brand-logo-preview { display: flex; align-items: center; gap: 0.75rem; margin: 0.25rem 0 0.5rem; }
.brand-logo-preview img { height: 48px; width: auto; max-width: 240px; background: #14181F; padding: 6px 10px; border-radius: 6px; }
.inline-check { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 400; }
.inline-check input { width: auto; margin-top: 0.2rem; }

/* Calls365 (v0.19.2): long section buttons wrap on narrow phones */
.ws-collapse { max-width: 100%; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.ws-panel-head { flex-wrap: wrap; }
.ws-panel-head > h2 { min-width: 0; flex: 1 1 auto; }
.ws-panel-head .ws-collapse { flex: none; }

/* Page text editor (v0.20.0) */
.pt-toolbar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 8px; margin: 0.75rem 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.pt-toolbar .btn { margin-top: 0; padding: 0.35rem 0.7rem; }
.pt-rich-only { display: inline-flex; gap: 4px; opacity: 0.45; }
.pt-toolbar.is-rich .pt-rich-only { opacity: 1; }
.pt-toolbar-hint { margin-left: 0.5rem; }
.pt-block { margin-bottom: 0.75rem; }
.pt-block-head { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 0.4rem; }
.pt-label { font-weight: 600; }
.pt-surface { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0.6rem 0.75rem; background: var(--surface); line-height: 1.55; min-height: 2.6rem; overflow-wrap: anywhere; }
.pt-surface:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pt-surface.pt-rich { min-height: 9rem; }
.pt-surface h2, .pt-surface h3 { margin-top: 0.6rem; }
.pt-reset { margin-top: 0.5rem; }
.pt-original { margin-top: 0.4rem; font-size: 0.88rem; color: var(--muted); }
.pt-original-body { padding: 0.5rem 0.75rem; border-left: 3px solid var(--border-strong); margin-top: 0.3rem; }
.pt-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; position: sticky; bottom: 0; background: var(--bg); padding: 0.5rem 0; }
.pt-actions .btn { margin-top: 0; }
.page-note { margin: 1rem 0; }