:root {
  --ink: #0f172a;
  --ink-dim: #475569;
  --ink-5: #94a3b8;
  --bg: #f8fafc;
  --panel: #ffffff;
  --line: #e2e8f0;
  --accent: #7c3aed;
  --accent-dark: #6d28d9;
  --good: #16a34a;
  --bad: #dc2626;
  --highlight: #eff6ff;
  --highlight-line: #93c5fd;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar h1 { margin: 0; font-size: 18px; font-weight: 700; }
.wrap {
  max-width: 720px;
  margin: 24px auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px 24px;
}
.card.highlight {
  background: var(--highlight);
  border-color: var(--highlight-line);
}
.card h2 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.card-head h2 { margin: 0; }
.section-help {
  color: var(--ink-dim);
  font-size: 13px;
  margin: 4px 0 16px;
}
.field {
  display: block;
  margin-bottom: 12px;
}
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-dim);
  margin-bottom: 4px;
}
.field input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font: inherit;
}
.row { display: flex; align-items: center; gap: 12px; }
button {
  font: inherit;
  cursor: pointer;
  border-radius: 5px;
  padding: 8px 14px;
  border: 1px solid transparent;
}
button.primary {
  background: var(--accent);
  color: white;
}
button.primary:hover { background: var(--accent-dark); }
button.secondary {
  background: white;
  color: var(--ink);
  border-color: var(--line);
}
button.secondary:hover { background: var(--bg); }
button.link {
  background: transparent;
  color: var(--accent);
  padding: 4px 8px;
}
button:disabled { opacity: 0.5; cursor: not-allowed; }
.err { color: var(--bad); font-size: 13px; }
.ok { color: var(--good); font-size: 13px; }

.create-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.create-row input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font: inherit;
}

.businesses-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.empty { color: var(--ink-dim); font-style: italic; }
.co-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.co-name { font-weight: 600; flex: 1; }
.co-meta { color: var(--ink-dim); font-size: 12px; }
.co-key code {
  background: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  border: 1px solid var(--line);
}
.co-actions { display: flex; gap: 4px; }
.co-actions button {
  padding: 4px 8px;
  font-size: 12px;
}
.co-del {
  color: var(--bad);
  border-color: transparent;
  background: transparent;
}
.co-del:hover {
  background: #fee2e2;
}

.kv {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--highlight-line);
}
.kv:first-of-type { border-top: none; }
.k { color: var(--ink-dim); font-size: 12px; font-weight: 600; }
.v { display: flex; align-items: center; gap: 8px; word-break: break-all; }
.v code {
  background: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  border: 1px solid var(--highlight-line);
  flex: 1;
}
.copy-btn {
  padding: 4px 10px;
  background: white;
  border: 1px solid var(--highlight-line);
  color: var(--ink);
  font-size: 12px;
}
.copy-btn:hover { background: var(--highlight); }
.warn {
  color: var(--bad);
  font-size: 12px;
  background: #fee2e2;
  padding: 8px 12px;
  border-radius: 5px;
  margin: 16px 0;
}
.foot {
  text-align: center;
  padding: 24px;
  color: var(--ink-5);
  font-size: 12px;
}

/* --------------------------------------------------------------------
 * v0.37 — Start of day editor
 * -------------------------------------------------------------------- */

.sod-adm-list {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 14px;
  background: #f9fafb;
}
.sod-adm-list-head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.sod-adm-list-name {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  background: #fff;
}
.sod-adm-list-name:focus {
  outline: none;
  border-color: #059669;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.15);
}

.sod-adm-section-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  font-weight: 700;
  margin-top: 8px;
  margin-bottom: 4px;
}

.sod-adm-aud {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.sod-adm-aud-field {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.sod-adm-aud-label {
  font-size: 12px;
  color: #374151;
  font-weight: 500;
}
.sod-adm-aud-field input {
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font: inherit;
  font-size: 12.5px;
}
.sod-adm-aud-field input:focus {
  outline: none;
  border-color: #059669;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.15);
}

.sod-adm-entries {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 10px 12px;
}
.sod-adm-entry-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sod-adm-entry {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 6px;
  align-items: stretch;
}
.sod-adm-entry input {
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font: inherit;
  font-size: 12.5px;
  min-width: 0;
}
.sod-adm-entry input[data-role="entry-url"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}
.sod-adm-entry input:focus {
  outline: none;
  border-color: #059669;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.15);
}
.sod-adm-entry .co-del {
  width: 30px;
  font-size: 16px;
  line-height: 1;
}

/* ==========================================================================
   v0.40.0 — Per-business detail view + tabs + skill editor + taxonomy
   ========================================================================== */

.wrap {
  /* Bump the max-width so the skill editor and skills list breathe. */
  max-width: 900px;
}

.detail-subtle {
  color: var(--ink-5);
  font-weight: 400;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  margin-left: 8px;
}

.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin: 0 -24px 20px;
  padding: 0 24px;
}
.tab {
  background: transparent;
  border: 0;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  color: var(--ink-dim);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-panel { display: block; }
.tab-panel[hidden] { display: none; }

/* Skills list -------------------------------------------------------------- */
#skills-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skill-row {
  display: grid;
  /* v0.55.0 — three columns: checkbox / body / actions. The checkbox
   * column is fixed-width so all rows align vertically. */
  grid-template-columns: 24px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.skill-row:hover { border-color: var(--accent); cursor: pointer; }
/* v0.55.0 — Bulk-select checkbox column. Wrapping label expands the
 * click target to the full cell so hitting the checkbox is easier. */
.skill-row-select-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
}
.skill-row-select {
  cursor: pointer;
  width: 16px;
  height: 16px;
}
.skill-row-body { min-width: 0; }
.skill-row-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.skill-row-desc {
  color: var(--ink-dim);
  font-size: 12.5px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skill-row-meta {
  color: var(--ink-5);
  font-size: 11.5px;
  margin-top: 4px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.skill-row-meta .chip {
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 11px;
  color: var(--ink-dim);
}
.skill-row-meta .chip.pack {
  background: #ede9fe;
  color: var(--accent-dark);
}

/* Taxonomy grid ------------------------------------------------------------ */
.taxonomy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.taxonomy-grid textarea,
.taxonomy-grid input {
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
  width: 100%;
  resize: vertical;
}
.taxonomy-grid textarea:focus,
.taxonomy-grid input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}

/* Skill editor ------------------------------------------------------------- */
.skill-editor .field {
  margin-bottom: 14px;
}
.skill-editor input[type="text"],
.skill-editor textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
  resize: vertical;
}
.skill-editor input[type="text"]:focus,
.skill-editor textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}
.se-section {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 16px;
}
.se-section h3 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.se-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.se-section-head h3 { margin: 0; }

.se-item {
  background: #fafbfc;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.se-item-head {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 6px;
}
.se-item-head input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}
.se-item textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font: inherit;
  font-size: 12.5px;
  min-height: 60px;
}
.se-item .del-mini {
  padding: 4px 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--bad);
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.se-item .del-mini:hover {
  background: #fef2f2;
  border-color: #fecaca;
}
.warn-box {
  background: #fefce8;
  border: 1px solid #fde68a;
  color: #78350f;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 12.5px;
}
.warn-box strong { display: block; margin-bottom: 4px; }

button.danger {
  background: var(--bad);
  color: #fff;
  border: 1px solid var(--bad);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
button.danger:hover { background: #b91c1c; border-color: #b91c1c; }

/* Starter packs ------------------------------------------------------------ */
.pack-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.pack-card h3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.pack-card .pack-desc {
  color: var(--ink-dim);
  font-size: 12.5px;
  margin: 0 0 8px;
}
.pack-card .pack-meta {
  color: var(--ink-5);
  font-size: 11.5px;
  margin-bottom: 10px;
}
.pack-card .row { gap: 8px; align-items: center; }

/* co-row actions: "Manage" replaces SOD button now that everything lives
   under one detail view. Space out for both. */
.co-row .co-actions .primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  padding: 4px 10px;
  border-radius: 4px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.co-row .co-actions .primary:hover { background: var(--accent-dark); }

/* ==========================================================================
   v0.40.2 — Voice enrichment (record → transcribe → AI suggestions → accept)
   ========================================================================== */

.voice-enrichment {
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 6px;
  padding: 14px 16px;
  margin-top: 4px;
}
.voice-enrichment h3 { color: var(--accent-dark); }
.voice-beta {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
}
.voice-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}
.voice-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  margin-right: 6px;
  vertical-align: middle;
}
#voice-record-btn.recording {
  background: var(--bad);
  border-color: var(--bad);
}
#voice-record-btn.recording .voice-dot {
  animation: voicePulse 1s infinite ease-in-out;
}
@keyframes voicePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.voice-timer {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  color: var(--ink-dim);
  min-width: 40px;
}

#voice-transcript {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
  resize: vertical;
  background: #fff;
}
#voice-transcript:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}

#voice-suggestions {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #ddd6fe;
}
.vs-group {
  margin-bottom: 14px;
}
.vs-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.vs-group-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vs-group-actions {
  display: flex;
  gap: 6px;
}
.vs-group-actions button {
  padding: 3px 8px;
  font-size: 11px;
}
.vs-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 6px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}
.vs-item input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.vs-item-body { min-width: 0; }
.vs-item-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.vs-item-detail {
  color: var(--ink-dim);
  font-size: 12.5px;
  margin-top: 3px;
  white-space: pre-wrap;
  word-break: break-word;
}
.vs-item-field {
  margin-top: 4px;
}
.vs-item-field-label {
  color: var(--ink-5);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.vs-item-field-value {
  color: var(--ink-dim);
  font-size: 12.5px;
  margin-top: 1px;
}
.vs-importance-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 4px;
}
.vs-importance-critical { background: #fee2e2; color: #991b1b; }
.vs-importance-high     { background: #fef3c7; color: #92400e; }
.vs-importance-normal   { background: #e0e7ff; color: #3730a3; }
.vs-importance-low      { background: #f1f5f9; color: #475569; }
.vs-arrow { color: var(--ink-5); margin: 0 4px; }

.vs-apply-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #ddd6fe;
}

/* ==========================================================================
   v0.40.3 — Collapsible folds for Resources + Audience (skill editor)
   ========================================================================== */
.se-section-fold {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 16px;
}
.se-section-fold > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
}
.se-section-fold > summary::-webkit-details-marker { display: none; }
.se-section-fold > summary::before {
  content: "▸";
  display: inline-block;
  color: var(--ink-5);
  font-size: 11px;
  transition: transform 0.15s;
}
.se-section-fold[open] > summary::before {
  transform: rotate(90deg);
}
.se-fold-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.se-fold-hint {
  color: var(--ink-5);
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
}
.se-section-fold-body {
  padding-top: 10px;
}

/* ==========================================================================
   v0.40.4 — Onboarding card + invite-link button
   ========================================================================== */

.onboarding-card {
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.ob-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ob-title {
  font-size: 13px;
  font-weight: 700;
  color: #0e7490;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ob-dismiss {
  background: transparent;
  border: none;
  color: #0e7490;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.ob-dismiss:hover { color: #164e63; }

.ob-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ob-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
}
.ob-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid #a5f3fc;
  color: #0e7490;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.ob-step.done .ob-step-num {
  background: #0e7490;
  border-color: #0e7490;
  color: #fff;
}
.ob-step-title {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
}
.ob-step.done .ob-step-title {
  color: var(--ink-dim);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-5);
}
.ob-step-desc {
  color: var(--ink-dim);
  font-size: 12.5px;
  margin-top: 2px;
}
.ob-step-btn {
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 12px;
}

/* Invite-link button on business rows uses the same visual as other
   secondaries; nothing extra needed there beyond the shared button
   styles. But bump the co-row grid a touch so we don't wrap on
   normal-sized screens with 4 buttons instead of 3. */
.co-row .co-actions {
  flex-wrap: wrap;
  gap: 4px;
}

/* ===========================================================================
   v0.41.0 — Cue Library tab
   ===========================================================================
   Per-cue toggle cards grouped by stage. Two delivery styles ("tip" vs
   "notice") get their own visual treatment so the practice sees at a glance
   which cues will land soft and which will land loud. Tip = lavender, matches
   the accent; Notice = amber, matches the on-page banner's attention state.
   ========================================================================== */

.cue-lib-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.cue-lib-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.cue-lib-picker {
  min-width: 220px;
  margin: 0;
}
.cue-lib-picker select {
  width: 100%;
}

.cue-lib-summary {
  background: var(--highlight);
  border: 1px solid var(--highlight-line);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.5;
}
.cue-lib-summary strong { color: var(--ink); font-weight: 600; }

.cue-lib-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.cue-lib-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.cue-lib-search-field { display: inline-block; }
.cue-lib-search-field input[type="search"] {
  min-width: 240px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  color: var(--ink);
  background: var(--panel);
}
.cue-lib-filters select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  color: var(--ink);
  background: var(--panel);
}
.cue-lib-bulk {
  display: flex;
  gap: 6px;
  align-items: center;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.cue-lib-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.cue-stage-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cue-stage-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.cue-stage-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.cue-stage-count {
  font-size: 12px;
  color: var(--ink-5);
}

.cue-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cue-card.enabled { border-color: #c7d2fe; background: #fafbff; }
.cue-card.enabled.style-notice { border-color: #fcd34d; background: #fffbeb; }

.cue-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
}
.cue-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--accent);
}
.cue-card.enabled.style-notice .cue-toggle input[type="checkbox"] {
  accent-color: #d97706;
}

.cue-body { min-width: 0; }
.cue-body-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.cue-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.cue-chip {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: #f1f5f9;
  border: 1px solid var(--line);
}
.cue-chip.type-Revenue      { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.cue-chip.type-Booking      { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.cue-chip.type-Relationship { background: #fdf2f8; color: #be185d; border-color: #fbcfe8; }
.cue-chip.type-Ops          { background: #f5f3ff; color: #5b21b6; border-color: #ddd6fe; }
.cue-chip.type-Clinical     { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

.cue-revenue {
  font-size: 11.5px;
  color: var(--ink-dim);
}

.cue-trigger {
  font-size: 12.5px;
  color: var(--ink-dim);
  margin: 4px 0 6px 0;
}
.cue-trigger strong { color: var(--ink); font-weight: 600; }

.cue-script {
  font-size: 13px;
  color: var(--ink);
  padding: 8px 10px;
  background: #f8fafc;
  border-left: 3px solid var(--ink-5);
  border-radius: 4px;
  margin: 6px 0;
  font-style: italic;
  line-height: 1.45;
}
.cue-card.enabled .cue-script { border-left-color: var(--accent); }
.cue-card.enabled.style-notice .cue-script { border-left-color: #d97706; }

.cue-why {
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.5;
}
.cue-why summary {
  cursor: pointer;
  font-size: 11.5px;
  color: var(--ink-dim);
  padding: 2px 0;
  user-select: none;
}
.cue-why summary:hover { color: var(--ink); }
.cue-why[open] summary { color: var(--ink); }
.cue-why-body { padding: 6px 0 2px 0; }

.cue-style {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  min-width: 130px;
}
.cue-style-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cue-style-seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel);
}
.cue-style-seg button {
  border: 0;
  background: transparent;
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  color: var(--ink-dim);
  cursor: pointer;
  transition: background 0.15s ease;
}
.cue-style-seg button:hover:not(:disabled) { background: var(--bg); }
.cue-style-seg button.active[data-style="tip"] {
  background: var(--accent);
  color: #fff;
}
.cue-style-seg button.active[data-style="notice"] {
  background: #d97706;
  color: #fff;
}
.cue-style-seg button:disabled { cursor: not-allowed; opacity: 0.5; }

.cue-empty-filter {
  text-align: center;
  padding: 24px;
  color: var(--ink-dim);
  font-size: 13px;
}

/* v0.41.1 — Per-cue script customization.
   "Customized" chip signals which cards have practice-specific rewrites.
   The fold sits between the script quote and the "Why it works" fold. */
.cue-customized-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.cue-script-fold {
  margin: 4px 0 2px 0;
}
.cue-script-fold summary {
  cursor: pointer;
  font-size: 11.5px;
  color: var(--ink-dim);
  padding: 2px 0;
  user-select: none;
}
.cue-script-fold summary:hover { color: var(--ink); }
.cue-script-fold[open] summary { color: var(--ink); font-weight: 600; }
.cue-script-fold-body { padding: 6px 0 2px 0; }
.cue-script-hint {
  font-size: 11.5px;
  color: var(--ink-dim);
  margin: 0 0 6px 0;
  line-height: 1.5;
}
.cue-script-hint em {
  font-style: italic;
  color: var(--ink);
}
.cue-script-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--panel);
  resize: vertical;
  min-height: 60px;
}
.cue-script-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
  flex-wrap: wrap;
}
.cue-script-actions button {
  font-size: 11.5px;
  padding: 4px 10px;
}

.co-cue-count {
  color: var(--ink-5);
  font-size: 12.5px;
  font-weight: 500;
}

/* ==========================================================================
   v0.42.0 — Scan a URL from admin (server-side fetch → AI importance picks)
   Sits above the voice-enrichment card in the skill editor. Uses a
   distinct blue tint so the two AI-assist surfaces are visually
   separable — scan-url is "get the fields", voice is "explain them".
   ========================================================================== */

.scan-url-panel {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 14px 16px;
  margin-top: 4px;
}
.scan-url-panel h3 { color: #1d4ed8; }

.scan-url-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.scan-url-row input[type="url"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  color: var(--ink);
}
.scan-url-row input[type="url"]:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}
.scan-url-row button.primary {
  background: #2563eb;
  border-color: #2563eb;
}
.scan-url-row button.primary:hover:not(:disabled) {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.scan-url-ctx {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin-top: 4px;
}
@media (max-width: 640px) {
  .scan-url-ctx { grid-template-columns: 1fr; }
}
.scan-url-ctx .field input {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12.5px;
  background: #fff;
  color: var(--ink);
}
.scan-url-ctx .field input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}

#scan-url-result {
  margin-top: 12px;
  border-top: 1px solid #bfdbfe;
  padding-top: 12px;
}

.scan-summary {
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--ink);
  margin-bottom: 10px;
}
.scan-summary strong { color: #1d4ed8; }
.scan-summary .scan-summary-meta {
  color: var(--ink-5);
  font-size: 11.5px;
  margin-top: 2px;
}

.scan-warnings {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 12px;
  color: #78350f;
  margin-bottom: 10px;
}
.scan-warnings ul { margin: 4px 0 0 18px; padding: 0; }
.scan-warnings li { margin: 2px 0; }

.scan-fields-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.scan-fields-table th,
.scan-fields-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid #e0e7ff;
  vertical-align: top;
}
.scan-fields-table th {
  font-weight: 600;
  color: var(--ink-5);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.scan-fields-table td.scan-fld-why {
  color: var(--ink-5);
  font-size: 12px;
  font-style: italic;
}

.scan-imp-chip {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.scan-imp-chip.scan-imp-critical { background: #fee2e2; color: #991b1b; }
.scan-imp-chip.scan-imp-high     { background: #ffedd5; color: #9a3412; }
.scan-imp-chip.scan-imp-normal   { background: #e0e7ff; color: #3730a3; }
.scan-imp-chip.scan-imp-low      { background: #f1f5f9; color: #64748b; }

.scan-apply-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}
.scan-apply-row .apply-note {
  color: var(--ink-5);
  font-size: 12px;
  font-style: italic;
}

/* v0.42.2 — Paste-HTML escape hatch in the Scan URL panel */
.scan-url-paste-fold {
  margin-top: 10px;
  border-top: 1px solid #bfdbfe;
  padding-top: 8px;
}
.scan-url-paste-fold > summary {
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
  font-size: 12.5px;
  color: #1d4ed8;
  font-weight: 500;
}
.scan-url-paste-fold > summary::-webkit-details-marker { display: none; }
.scan-url-paste-fold > summary::before {
  content: "▸ ";
  color: #64748b;
  font-weight: 400;
  display: inline-block;
  width: 1em;
}
.scan-url-paste-fold[open] > summary::before { content: "▾ "; }
.scan-url-paste-title { text-decoration: underline; text-decoration-style: dotted; }

.scan-url-paste-body { margin-top: 8px; }
.scan-url-paste-steps {
  margin: 4px 0 8px 20px;
  padding: 0;
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.55;
}
.scan-url-paste-steps li { margin: 4px 0; }
.scan-url-paste-steps kbd {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: var(--ink);
}
.scan-url-paste-steps code {
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  color: var(--ink);
}
#scan-url-html {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.4;
  background: #fff;
  color: var(--ink);
  min-height: 100px;
  resize: vertical;
}
#scan-url-html:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}
.scan-url-paste-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* ==========================================================================
   v0.42.5 — Reshape: Capture-in-extension is the primary "add fields"
   answer; URL-scan is tucked behind an Advanced fold. Both live at the
   top of the skill editor (above voice enrichment) because "get the
   fields" is the natural first step of authoring a skill.
   ========================================================================== */

.capture-explainer {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-left: 4px solid #059669;
  border-radius: 6px;
  padding: 14px 18px;
  margin-top: 4px;
}
.capture-explainer-head h3 {
  margin: 0 0 8px 0;
  font-size: 14.5px;
  color: #065f46;
  font-weight: 700;
}
.capture-explainer-head h3 em {
  font-style: italic;
  color: #047857;
}
.capture-explainer-steps {
  margin: 0 0 0 22px;
  padding: 0;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.55;
}
.capture-explainer-steps li {
  margin: 6px 0;
}
.capture-explainer-steps code {
  background: #d1fae5;
  color: #065f46;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}
.capture-explainer-steps strong { color: #047857; }
.capture-explainer .section-help { color: #065f46; }

/* The Advanced (URL-scan / paste-HTML) fold. Sits below the Capture
 * explainer, muted styling, closed by default. Opens on click to
 * reveal the existing URL input + paste flow. */
.scan-url-panel-fold {
  border: 1px solid var(--line);
  background: var(--bg);
}
.scan-url-panel-fold > .scan-url-panel-summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.scan-url-panel-fold > .scan-url-panel-summary::-webkit-details-marker { display: none; }
.scan-url-panel-fold > .scan-url-panel-summary::before {
  content: "▸ ";
  color: var(--ink-5);
  font-weight: 400;
  display: inline-block;
  width: 1em;
  align-self: baseline;
}
.scan-url-panel-fold[open] > .scan-url-panel-summary::before { content: "▾ "; }
.scan-url-panel-summary-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.scan-url-panel-summary-hint {
  font-size: 11.5px;
  color: var(--ink-5);
  font-style: italic;
}
.scan-url-panel-body {
  padding: 4px 18px 16px 18px;
  border-top: 1px solid var(--line);
  background: #eff6ff;
  margin: 0 -1px -1px -1px;
  border-radius: 0 0 6px 6px;
}
/* The URL scan section inside the fold body — undo the outer panel
 * styling since the fold body already provides its own visual container. */
.scan-url-panel-fold[open] > .scan-url-panel-summary {
  border-bottom: 1px solid var(--line);
}

/* v0.42.6 — Deep-link banner on sign-in card. Fires when admin.html
 * loads with ?business=&skill= (extension Capture drops the operator
 * here). Green accent to signal success + confidence about what
 * happens next. */
.deeplink-banner {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-left: 4px solid #059669;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 0 0 14px 0;
  font-size: 13px;
  line-height: 1.5;
  color: #065f46;
}
.deeplink-banner strong {
  color: #047857;
  font-weight: 700;
}

/* v0.42.8 — "just captured" badge on skills captured via extension
 * in the last 24h. Green fill to match Capture button color, so
 * fresh work is impossible to miss in a Skills list mixed with
 * starter-pack + admin-authored skills. */
.chip.fresh {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
  font-weight: 600;
}

/* ==========================================================================
   v0.42.9 — Field checks list in the skill editor. Read-only for now:
   author sees WHAT Cue captured, ranked by importance, with any
   why/spotter-tip text voice enrichment produced. The extension is the
   only path that creates the field set itself; admin can only tune
   importance/why/tip via voice enrichment above the list.
   ========================================================================== */

.se-checks-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px; /* room for the scrollbar */
}
.check-row {
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  background: #fff;
  border-radius: 4px;
  padding: 8px 12px;
}
.check-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.check-row-title {
  font-size: 13px;
  color: var(--ink);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.check-row-note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-dim);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}
.check-row-note strong {
  color: var(--ink);
  font-weight: 600;
}

.check-imp-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.check-imp-pill-critical { background: #fee2e2; color: #991b1b; }
.check-imp-pill-high     { background: #fef3c7; color: #92400e; }
.check-imp-pill-normal   { background: #e5e7eb; color: #4b5563; }
.check-imp-pill-low      { background: #f3f4f6; color: #9ca3af; }

/* Left border accent matches the pill for at-a-glance scanning. */
.check-row.check-imp-critical { border-left-color: #dc2626; }
.check-row.check-imp-high     { border-left-color: #f59e0b; }
.check-row.check-imp-normal   { border-left-color: #d1d5db; }
.check-row.check-imp-low      { border-left-color: #e5e7eb; }

/* ==========================================================================
   v0.43.0 — Editable field checks. Importance is now a <select> that
   replaces the read-only pill; row gets a "×" delete button; why-note
   line has a click-to-edit affordance (or "+ Add note" when empty).
   Select mimics the pill's color palette so at-a-glance scanning still
   works — the row's left-border accent is the primary signal.
   ========================================================================== */
.check-imp-select {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 20px 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'><path d='M0 0l4 6 4-6z' fill='%234b5563'/></svg>");
}
.check-imp-select:focus {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: 1px;
}
.check-imp-select-critical { background-color: #fee2e2; color: #991b1b; }
.check-imp-select-high     { background-color: #fef3c7; color: #92400e; }
.check-imp-select-normal   { background-color: #e5e7eb; color: #4b5563; }
.check-imp-select-low      { background-color: #f3f4f6; color: #9ca3af; }

.check-delete-btn {
  border: 1px solid transparent;
  background: transparent;
  color: #9ca3af;
  font-size: 18px;
  line-height: 1;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  padding: 0;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.check-delete-btn:hover,
.check-delete-btn:focus {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
  outline: none;
}

/* Why-line edit affordance. "Edit" sits at the end of the existing
   why prose so it doesn't take a full row; "+ Add why-note" is a
   dimmer link-styled button that only shows when there's no why yet. */
.check-row-why { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.check-row-why > strong { flex-shrink: 0; }
.check-row-why [data-check-why-text] { flex: 1; }
.check-why-edit-btn {
  font-size: 11px;
  font-weight: 500;
  color: var(--accent, #6366f1);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  flex-shrink: 0;
}
.check-why-edit-btn:hover { text-decoration: none; }

.check-row-add-why {
  border-top-style: dotted;
  color: var(--ink-dim, #6b7280);
}
.check-why-add-btn {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--accent, #6366f1);
  background: transparent;
  border: 1px dashed transparent;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 3px;
  cursor: pointer;
}
.check-why-add-btn:hover {
  border-color: #c7d2fe;
  background: #eef2ff;
}

.check-row-why-edit {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.check-why-textarea {
  width: 100%;
  font: inherit;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--line, #d1d5db);
  border-radius: 3px;
  resize: vertical;
  min-height: 44px;
  box-sizing: border-box;
}
.check-why-textarea:focus {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: -1px;
  border-color: transparent;
}
.check-why-edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.check-why-char {
  font-size: 11px;
  color: var(--ink-dim, #9ca3af);
  margin-left: auto;
}
.check-why-char-warn { color: #b45309; font-weight: 600; }

/* v0.43.4 — Business profile tab. Textarea takes most of the width;
   char counter sits alongside the Save button and turns amber
   near the cap. */
#biz-profile-input {
  width: 100%;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
  border: 1px solid var(--line, #d1d5db);
  border-radius: 6px;
  resize: vertical;
  min-height: 220px;
  box-sizing: border-box;
}
#biz-profile-input:focus {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: -1px;
  border-color: transparent;
}
.biz-profile-count {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ink-dim, #9ca3af);
}
.biz-profile-count-warn { color: #b45309; font-weight: 600; }

/* v0.44.0 — Fix Cue Library head layout truncating the Refresh button.
   Screenshot showed "Re[fresh]" cut off because .cue-lib-picker held
   a 220px min-width that shoved the button past the container edge on
   the typical admin viewport. Let the picker shrink instead, and pin
   the button so it never truncates. Wrap the row on very narrow
   viewports (mobile / narrow side windows). */
.cue-lib-actions {
  flex-wrap: wrap;
  align-items: center;
}
.cue-lib-picker {
  min-width: 0;
  flex: 1 1 200px;
  max-width: 320px;
}
#cue-lib-refresh-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ==========================================================================
   v0.44.1 — Skill editor form tighten-up. Instructional prose moved to
   `?` hover tooltips (.help-tip). Big Capture explainer collapsed to a
   one-line strip (.se-strip). Inline mini-help lines use .se-inline-help
   for a compact single-line grey note. All section-help paragraphs in
   the skill editor deleted; long-form guidance is one hover away.
   ========================================================================== */

/* The `?` circle. Sized to sit inline with h3/label text without
   pushing the baseline. Hover reveals a floating tooltip built from
   the data-tip attribute via ::after; ::before is the little arrow. */
.help-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #4b5563;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  cursor: help;
  margin-left: 6px;
  vertical-align: middle;
  position: relative;
  user-select: none;
  transition: background 120ms, color 120ms;
  flex-shrink: 0;
}
.help-tip:hover,
.help-tip:focus {
  background: #6366f1;
  color: #fff;
  outline: none;
}
/* Tooltip bubble — appears on hover/focus, positioned below the icon.
   Uses attr(data-tip) so the text is authored inline in the markup,
   no separate elements to keep in sync. Wide enough to hold a
   paragraph, but stays within the viewport via max-width and
   right-side anchoring at the far edge. */
.help-tip::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  max-width: 380px;
  padding: 10px 12px;
  background: #1f2937;
  color: #f9fafb;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
  text-align: left;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.help-tip::before {
  content: "";
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #1f2937;
  z-index: 101;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms;
}
.help-tip:hover::after,
.help-tip:focus::after,
.help-tip:hover::before,
.help-tip:focus::before {
  opacity: 1;
}

/* One-line strip — replaces multi-paragraph explainer cards.
   Icon + one sentence + trailing help tip. Uses the same green
   accent the Capture-explainer had (it's still an affordance to
   nudge Capture as the primary flow), just at 1/8 the vertical
   footprint. */
.se-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-left: 4px solid #22c55e;
  border-radius: 6px;
  font-size: 13px;
  color: #14532d;
  margin-bottom: 12px;
}
.se-strip-icon {
  color: #16a34a;
  font-weight: 700;
  flex-shrink: 0;
  font-size: 15px;
}
.se-strip-body { flex: 1; line-height: 1.4; }
.se-strip .help-tip { background: rgba(22, 163, 74, 0.14); color: #14532d; }
.se-strip .help-tip:hover,
.se-strip .help-tip:focus { background: #16a34a; color: #fff; }

/* Compact single-line inline help. Used where a section really does
   need a one-liner (URL-scan modes, audience matching rule) that
   would be over-tucked as a pure tooltip but doesn't deserve a
   paragraph. */
.se-inline-help {
  font-size: 12px;
  color: var(--ink-dim, #6b7280);
  line-height: 1.5;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Retire the old .capture-explainer big-card styles by neutralizing —
   the .se-strip layout above supersedes. Kept declaration for any
   legacy references but overridden. */
.se-section.capture-explainer { padding: 0; border: none; background: transparent; }
.capture-explainer-head,
.capture-explainer-steps { display: none; }

/* Section headings that now hold a help-tip: keep the h3 baseline aligned. */
.se-section-head h3 { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
 * v0.44.2 — AI-helpers group + folded Voice enrichment.
 *
 * Groups the three AI-adjacent surfaces at the top of the skill editor
 * (Capture explainer, Scan-URL fold, Voice-enrichment fold) into a
 * single visually-consistent stack, and folds the Voice card that was
 * previously always-open. The three now read as: primary path
 * (Capture) + two folded alternates that each say what they DO on the
 * summary line so the user doesn't have to click to figure out which
 * one they want.
 *
 * Voice-enrichment-fold mirrors scan-url-panel-fold structurally so the
 * two look like sibling controls. Body keeps the lavender voice palette
 * so it still reads as "voice thing" once opened.
 * ------------------------------------------------------------------- */

.se-ai-helpers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}
.se-ai-helpers .se-strip { margin-bottom: 0; }

/* Voice-enrichment fold — same shape as .scan-url-panel-fold but with
 * the voice/lavender palette so the two folds are visually distinct
 * from each other while sharing structure. */
.voice-enrichment-fold {
  border: 1px solid #ddd6fe;
  background: #faf5ff;
  border-radius: 6px;
}
.voice-enrichment-fold > .voice-enrichment-summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.voice-enrichment-fold > .voice-enrichment-summary::-webkit-details-marker { display: none; }
.voice-enrichment-fold > .voice-enrichment-summary::before {
  content: "▸ ";
  color: var(--accent-dark, #6d28d9);
  font-weight: 400;
  display: inline-block;
  width: 1em;
  align-self: baseline;
}
.voice-enrichment-fold[open] > .voice-enrichment-summary::before { content: "▾ "; }
.voice-enrichment-summary-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-dark, #6d28d9);
}
.voice-enrichment-summary-hint {
  font-size: 11.5px;
  color: var(--ink-5, #6b7280);
  font-style: italic;
}
.voice-enrichment-fold[open] > .voice-enrichment-summary {
  border-bottom: 1px solid #ddd6fe;
}
.voice-enrichment-body {
  padding: 12px 18px 16px 18px;
  background: #f5f3ff;
  border-radius: 0 0 6px 6px;
}
.voice-enrichment-body .voice-controls { margin-bottom: 8px; }

/* Neutralize the old always-open .voice-enrichment card styling — the
 * fold above now provides its own container. Kept the class declaration
 * so any lingering reference still parses, but no visual effect. */
.se-section.voice-enrichment { background: transparent; border: none; padding: 0; margin-top: 0; }

/* Help-tip inside a summary — visually match the surrounding accent
 * so it doesn't scream in a folded state. Existing .se-strip .help-tip
 * override for the green Capture strip stays as-is above. */
.voice-enrichment-summary .help-tip {
  background: rgba(109, 40, 217, 0.14);
  color: var(--accent-dark, #6d28d9);
}
.voice-enrichment-summary .help-tip:hover,
.voice-enrichment-summary .help-tip:focus {
  background: var(--accent-dark, #6d28d9);
  color: #fff;
}
.scan-url-panel-summary .help-tip {
  background: rgba(29, 78, 216, 0.14);
  color: #1d4ed8;
}
.scan-url-panel-summary .help-tip:hover,
.scan-url-panel-summary .help-tip:focus {
  background: #1d4ed8;
  color: #fff;
}

/* ---------------------------------------------------------------------
 * v0.45.0 — Unified skill builder panel.
 *
 * Replaces the v0.44.2 se-ai-helpers group. One accent-tinted card at
 * the top of the skill editor with three ordered inputs (URL/HTML,
 * voice, optional industry/software) and one big primary button.
 * ------------------------------------------------------------------- */

.builder-panel {
  background: linear-gradient(180deg, #faf5ff 0%, #f0f4ff 100%);
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.builder-panel .se-section-head {
  margin-bottom: 4px;
}
.builder-panel h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-dark, #6d28d9);
  margin: 0;
  font-size: 15px;
}
.builder-icon {
  font-size: 18px;
  filter: drop-shadow(0 1px 2px rgba(109, 40, 217, 0.25));
}
.builder-tagline {
  font-size: 12.5px;
  color: var(--ink-5, #6b7280);
  margin: 0 0 12px 0;
  line-height: 1.45;
}
.builder-panel .field {
  margin-bottom: 10px;
}
.builder-panel .field-label {
  color: var(--accent-dark, #6d28d9);
  font-weight: 600;
}

/* Voice row inside the panel — record button + timer on one line. */
.builder-voice-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.voice-record-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Optional industry/software — folded by default so the panel stays
 * compact when the businessProfile already covers it. */
.builder-optional-fold {
  border: 1px dashed #ddd6fe;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
  margin: 4px 0 12px 0;
}
.builder-optional-fold > summary {
  cursor: pointer;
  list-style: none;
  padding: 8px 12px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink, #0f172a);
}
.builder-optional-fold > summary::-webkit-details-marker { display: none; }
.builder-optional-fold > summary::before {
  content: "▸ ";
  color: var(--accent-dark, #6d28d9);
  width: 1em;
}
.builder-optional-fold[open] > summary::before { content: "▾ "; }
.builder-optional-title { font-weight: 600; }
.builder-optional-hint {
  color: var(--ink-5, #6b7280);
  font-style: italic;
  font-size: 11.5px;
}
.builder-optional-body {
  padding: 4px 12px 12px 12px;
}

/* Actions row — big primary button + inline status. */
.builder-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(109, 40, 217, 0.15);
}
.builder-run-btn {
  font-size: 14px;
  padding: 10px 18px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.builder-run-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}
#builder-msg {
  flex: 1;
  font-size: 12.5px;
  line-height: 1.4;
}

/* Palette-matched help-tips inside the builder panel. */
.builder-panel .help-tip {
  background: rgba(109, 40, 217, 0.14);
  color: var(--accent-dark, #6d28d9);
}
.builder-panel .help-tip:hover,
.builder-panel .help-tip:focus {
  background: var(--accent-dark, #6d28d9);
  color: #fff;
}

/* Retire the v0.44.2 .se-ai-helpers group + .voice-enrichment-fold —
 * no elements use them anymore. Kept the declarations so any lingering
 * reference in cached CSS parses cleanly, but no visual footprint. */
.se-ai-helpers { all: unset; display: block; }
.voice-enrichment-fold { display: none; }

/* ---------------------------------------------------------------------
 * v0.45.1 — Business tab, three-field layout.
 * Business profile + Products & upsell paths + Retention playbook, each
 * with its own char counter. Footer holds the counter under the
 * textarea; save-row stays as the single primary action at the bottom.
 * ------------------------------------------------------------------- */
.biz-field-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}
.biz-field-footer .biz-profile-count { font-size: 11px; }

/* When any of the three business textareas render, give them a bit of
 * breathing room between labels. */
.tab-panel[data-panel="business"] .field { margin-bottom: 18px; }

/* ---------------------------------------------------------------------
 * v0.46.0 — Knowledge base file uploader on the Business tab.
 * v0.45.1's three-textarea layout was retired (Joe: "lets not have copy
 * paste boxes we wll never use those"). This section styles the new
 * one-line description field + drag-drop uploader + file list.
 * ------------------------------------------------------------------- */

.tab-panel[data-panel="business"] .field { margin-bottom: 22px; }

.biz-field-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.biz-field-footer .biz-profile-count {
  font-size: 11px;
  color: var(--ink-5, #6b7280);
}
.biz-field-footer .biz-profile-count-warn { color: #b91c1c; }
.biz-field-footer button { margin-left: auto; }
.biz-field-footer .save-status { font-size: 12px; }

/* Knowledge-base section container. */
.kb-section {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--line, #e5e7eb);
}
.kb-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.kb-title {
  margin: 0;
  font-size: 15px;
  color: var(--ink, #0f172a);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kb-total {
  font-size: 12px;
  color: var(--ink-5, #6b7280);
}
.kb-total.kb-total-over { color: #b91c1c; font-weight: 600; }

/* Dropzone — <label> wrapping the hidden file input. Click + drag both land. */
.kb-dropzone {
  display: block;
  border: 2px dashed #c7d2fe;
  border-radius: 10px;
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  background: #f5f3ff;
  transition: background 0.12s, border-color 0.12s;
}
.kb-dropzone:hover,
.kb-dropzone.kb-dropzone-hover {
  background: #ede9fe;
  border-color: var(--accent, #6366f1);
}
.kb-dropzone-body { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.kb-dropzone-icon { font-size: 28px; line-height: 1; }
.kb-dropzone-primary { font-size: 14px; color: var(--ink, #0f172a); }
.kb-dropzone-hint {
  font-size: 12px;
  color: var(--ink-5, #6b7280);
}

/* Upload progress area — appears above the file list while uploads run. */
.kb-upload-progress {
  margin-top: 12px;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kb-upload-line {
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  padding: 4px 6px;
  border-radius: 3px;
}
.kb-upload-line-pending { color: var(--ink-5, #6b7280); }
.kb-upload-line-ok { color: #15803d; background: #f0fdf4; }
.kb-upload-line-fail { color: #b91c1c; background: #fef2f2; }

/* File list — rows with name, meta, chips, delete button. */
.kb-file-list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kb-file-list .empty {
  padding: 12px;
  color: var(--ink-5, #6b7280);
  font-size: 13px;
  text-align: center;
  margin: 0;
}
.kb-file-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  background: #fff;
}
.kb-file-main { min-width: 0; }
.kb-file-name {
  font-size: 13.5px;
  color: var(--ink, #0f172a);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kb-file-meta {
  font-size: 11.5px;
  color: var(--ink-5, #6b7280);
  margin-top: 3px;
}
.kb-file-note {
  font-size: 11.5px;
  color: #b45309;
  margin-top: 4px;
  padding: 4px 8px;
  background: #fef3c7;
  border-radius: 4px;
}
.kb-file-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.kb-file-actions .secondary.danger { font-size: 12px; padding: 5px 10px; }

.kb-kind-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  background: #e5e7eb;
  color: #374151;
  letter-spacing: 0.03em;
}
.kb-kind-badge.kb-kind-pdf  { background: #fee2e2; color: #991b1b; }
.kb-kind-badge.kb-kind-docx { background: #dbeafe; color: #1e40af; }
.kb-kind-badge.kb-kind-xlsx { background: #d1fae5; color: #065f46; }
.kb-kind-badge.kb-kind-txt  { background: #f3f4f6; color: #4b5563; }

.kb-chip {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  letter-spacing: 0.02em;
}
.kb-chip-ok   { background: #d1fae5; color: #065f46; }
.kb-chip-warn { background: #fef3c7; color: #92400e; }
.kb-chip-fail { background: #fee2e2; color: #991b1b; }

/* v0.49.0 — AI suggestion: importance change chips (used by voice enrichment; was also used by the removed vision panel). Rendered in
 * the checkImportance row as: [CURRENT] → [PROPOSED] {why}. Uses the
 * same color family as check-imp-select-* for consistency, so the
 * operator recognizes at a glance what shift is being proposed. */
.vs-imp-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.4;
  vertical-align: middle;
}
.vs-imp-high   { background-color: #fef3c7; color: #92400e; }
.vs-imp-normal { background-color: #e5e7eb; color: #374151; }
.vs-imp-low    { background-color: #f3f4f6; color: #6b7280; }
.vs-imp-critical { background-color: #fee2e2; color: #991b1b; }
.vs-imp-arrow {
  display: inline-block;
  margin: 0 6px;
  color: #6b7280;
  font-weight: 700;
}
.vs-imp-why {
  display: block;
  margin-top: 4px;
  color: #6b7280;
  font-size: 12px;
  font-style: italic;
  line-height: 1.4;
}

/* ---------------------------------------------------------------------
 * v0.50.0 — AI suggestion additions (shared with voice enrichment)
 *
 * Gotchas group: orange left border + subtle amber tint background,
 * matching the extension side panel's Gotchas category (fifth surface).
 * Distinct from the red Critical Importance group (which is an urgent
 * verification prompt, not a content category).
 * ------------------------------------------------------------------- */
.vs-group-gotcha {
  border-left: 4px solid #f97316;
  background: #fff7ed;
  padding-left: 10px;
  border-radius: 0 6px 6px 0;
}
.vs-group-gotcha .vs-group-title {
  color: #9a3412;
}

/* Critical-importance group — the "AI escalated to CRITICAL, verify"
 * treatment. Red border + soft red tint background; every row starts
 * UNticked so a critical escalation never applies without the operator
 * ticking it explicitly. The subtitle sits below the title to make
 * the "verify before applying" instruction impossible to miss. */
.vs-group-critical {
  border-left: 4px solid #dc2626;
  background: #fef2f2;
  padding-left: 10px;
  border-radius: 0 6px 6px 0;
  margin-top: 8px;
}
.vs-group-critical .vs-group-title {
  color: #991b1b;
  font-weight: 700;
}
.vs-group-subtitle {
  font-size: 12px;
  color: #7f1d1d;
  font-style: italic;
  margin-top: 2px;
}
.vs-item-critical {
  background: rgba(220, 38, 38, 0.03);
}

/* Confidence chip — small pill next to each AI-generated suggestion's
 * title, reflecting the model's self-reported confidence. Three tints:
 *   high   = teal (well-grounded, take at face value)
 *   medium = slate (visible in evidence but inferable, worth a glance)
 *   low    = amber (pattern-match, verify before accepting)
 */
.vs-conf-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.vs-conf-high   { background: #ccfbf1; color: #115e59; }
.vs-conf-medium { background: #e2e8f0; color: #334155; }
.vs-conf-low    { background: #fef3c7; color: #92400e; }

/* Vote chip — shown next to tips/money/gotchas in the skill editor
 * when employees have thumbs-up/down'd the item. Small triangular
 * up/down glyphs with counts; grey by default, gains color only when
 * the delta is meaningful (net-positive green, net-negative red). */
.vs-vote-chip {
  display: inline-block;
  margin: 0 6px 0 0;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
  white-space: nowrap;
  cursor: help;
}

/* v0.50.0 — Orange variant of the .voice-beta pill used to badge
 * the Gotchas section header. Same shape, orange palette. */
.voice-beta-orange {
  background: #ffedd5;
  color: #9a3412;
  border-color: #fdba74;
}

/* v0.60.0 — Yellow variant used to badge the Signals section
 * header. Yellow palette mirrors the extension side panel's
 * Signals category color. */
.voice-beta-yellow {
  background: #fef9c3;
  color: #713f12;
  border-color: #fde047;
}

/* ---------------------------------------------------------------------------
 * v0.51.0 — Outcomes panel
 *
 * Rendered inside #se-outcomes-fold (a details/summary fold on the
 * skill editor). Four blocks max:
 *   .oc-block  -> Wand runs
 *   .oc-block  -> AI suggestions (with apply-rate bars + confidence chips)
 *   .oc-block  -> Checks that fired (per-check failed→corrected list)
 *   .oc-block  -> What staff are seeing (per-item impressions × votes)
 *
 * Read-only surface — no editing controls, no save state.
 * ------------------------------------------------------------------------- */

.oc-block {
  margin-top: 14px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.oc-block:first-child { margin-top: 0; }

.oc-block-title {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
}

.oc-block-help {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 10px;
  line-height: 1.45;
}

.oc-subhead {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 12px 0 6px;
}

/* Metric row — three big numbers side by side (runs, avg frames, narration %). */
.oc-metric-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.oc-metric {
  flex: 1 1 auto;
  min-width: 100px;
}
.oc-metric-value {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
}
.oc-metric-label {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

/* Apply-rate rows: label | fill bar | count/pct. */
.oc-apply-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.oc-apply-row {
  display: grid;
  grid-template-columns: 140px 1fr 120px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.oc-apply-label {
  color: #334155;
  font-weight: 500;
}
.oc-apply-bar-outer {
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}
.oc-apply-bar-fill {
  height: 100%;
  background: #0d9488; /* teal */
  transition: width 200ms ease;
}
.oc-apply-count {
  text-align: right;
  color: #475569;
  font-variant-numeric: tabular-nums;
}
.oc-apply-pct {
  color: #0f172a;
  font-weight: 600;
  margin-left: 4px;
}
/* CRITICAL row picks up a red fill so operators can see escalation
 * apply-rate at a glance. Low % here is the "AI is over-escalating"
 * signal. */
.oc-apply-critical .oc-apply-label { color: #b91c1c; font-weight: 600; }
.oc-apply-critical .oc-apply-bar-fill { background: #dc2626; }

/* Per-confidence chips: high/medium/low buckets with apply-rate. */
.oc-conf-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.oc-conf-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: #334155;
  background: #fff;
  border: 1px solid #cbd5e1;
}
.oc-conf-chip b { font-weight: 700; }
.oc-conf-chip-high { background: #ccfbf1; color: #115e59; border-color: #5eead4; }
.oc-conf-chip-medium { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }
.oc-conf-chip-low { background: #fef3c7; color: #92400e; border-color: #fcd34d; }

/* Per-check rows */
.oc-check-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.oc-check-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed #e2e8f0;
  font-size: 12px;
}
.oc-check-row:last-child { border-bottom: none; }
.oc-check-name {
  color: #0f172a;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oc-check-stats {
  color: #475569;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.oc-check-num { color: #0f172a; font-weight: 600; }
.oc-check-pct { color: #0d9488; font-weight: 600; margin-left: 4px; }
.oc-check-age {
  margin-left: 10px;
  color: #94a3b8;
  font-size: 11px;
}

/* Per-item impressions × votes */
.oc-imp-section { margin-bottom: 10px; }
.oc-imp-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.oc-imp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  font-size: 12px;
}
.oc-imp-title {
  color: #0f172a;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oc-imp-stats {
  color: #64748b;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.oc-imp-shown { color: #475569; font-weight: 500; }
.oc-imp-vote {
  margin-left: 8px;
  padding: 2px 6px;
  background: #f1f5f9;
  border-radius: 8px;
  font-size: 11px;
  color: #475569;
  font-weight: 500;
}

.oc-empty {
  color: #64748b;
  font-size: 12px;
  font-style: italic;
  margin: 8px 0 0;
}

/* ---------------------------------------------------------------------------
 * v0.55.0 — Bulk selection bar for the Skills tab.
 *
 * Renders above the skills list when ≥1 row is ticked. Sits between
 * the "+ New skill" row and the list itself. Hidden by default via
 * the `hidden` HTML attribute; JavaScript flips it based on the
 * selection count.
 * ------------------------------------------------------------------------- */
.skills-bulk-bar {
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #fef3c7;   /* amber to signal "action pending" */
  border: 1px solid #fcd34d;
  border-radius: 6px;
}
.skills-bulk-selectall {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #78350f;
  font-weight: 500;
}
.skills-bulk-selectall input {
  cursor: pointer;
  width: 16px;
  height: 16px;
}
.skills-bulk-count {
  font-size: 13px;
  font-weight: 600;
  color: #78350f;
  margin-right: auto; /* pushes buttons to the right end of the bar */
}

/* ---------------------------------------------------------------------------
 * v0.56.0 — Regenerate / Drop actions on outcomes rows.
 *
 * Each impression row gets a two-column layout: the main text
 * (title + stats) on the left, action buttons on the right. Rows
 * with meaningful downvote signal get a subtle red tint so they
 * surface visually as candidates. When Regenerate is clicked, an
 * inline proposal card renders below the row for [Keep new] /
 * [Keep old] review.
 * ------------------------------------------------------------------------- */

/* Impression row — now split so actions live in a right column
 * without collapsing the main text row on narrow admin panels. */
.oc-imp-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 5px 0;
  font-size: 12px;
}
.oc-imp-row-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}
/* Downvote-tinted row — subtle red background to surface as a
 * regenerate/drop candidate without shouting. Uses the same
 * palette family as the CRITICAL apply-rate row on the AI block
 * so the visual grammar stays consistent. */
.oc-imp-row-downvoted {
  background: #fef2f2;
  border-left: 3px solid #fca5a5;
  padding-left: 8px;
  border-radius: 3px;
}
.oc-imp-row-downvoted .oc-imp-title {
  color: #991b1b;
  font-weight: 500;
}

.oc-imp-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.oc-imp-btn {
  padding: 3px 10px;
  font-size: 11px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-dim);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.oc-imp-btn:hover {
  border-color: var(--accent);
  color: var(--ink);
}
.oc-imp-btn-regen:hover {
  background: #eff6ff;
  border-color: #60a5fa;
  color: #1e40af;
}
.oc-imp-btn-drop:hover {
  background: #fef2f2;
  border-color: #f87171;
  color: #991b1b;
}

/* Inline proposal card — inserted after the row on Regenerate click.
 * Uses the same slate/teal palette as the outcomes panel so it
 * doesn't feel foreign, with a left border in the AI-suggestion
 * teal to signal "AI-generated content, review before applying." */
.oc-regen-proposal {
  margin: 8px 0 12px;
  padding: 12px 14px;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-left: 3px solid #0d9488;
  border-radius: 6px;
  font-size: 12px;
}
.oc-regen-loading {
  color: #0f766e;
  font-style: italic;
}
.oc-regen-err {
  color: #991b1b;
  margin-right: 12px;
}
.oc-regen-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  color: #115e59;
}
.oc-regen-title {
  font-weight: 600;
  font-size: 13px;
  color: #0f172a;
  margin-bottom: 4px;
}
.oc-regen-body {
  color: var(--ink);
  line-height: 1.45;
  margin-bottom: 8px;
}
.oc-regen-why {
  color: #475569;
  padding: 6px 10px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  margin-bottom: 10px;
  font-size: 11.5px;
  line-height: 1.5;
}
.oc-regen-actions {
  display: flex;
  gap: 8px;
}

/* ==============================================================
 * v0.61.0 — Panel-emulator skill editor.
 *
 * The editor mirrors the extension's employee-facing side panel:
 * essentials strip at the top, six colored category cards in canonical
 * order, everything else in an Advanced fold below. This block styles
 * the panel structure (.pp-*), the essentials strip, the advanced
 * fold, and the shared .fmt-* body formatter output.
 *
 * Colors mirror extension/src/popup/cue-panel.css exactly so the
 * admin's rendered content matches the panel pixel-close. If those
 * change, sync here.
 * ============================================================== */

/* Essentials strip — name / description / URLs */
.se-essentials {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: #f9fafb;
  border: 0.5px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 16px;
}
.se-essentials .field { margin: 0; }
.se-essentials .field-label {
  font-size: 12px;
  color: #4b5563;
  font-weight: 500;
}

/* Preview header — the "this is what staff see" strip */
.se-preview-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px;
  margin-bottom: 8px;
}
.se-preview-title {
  font-size: 13px;
  font-weight: 500;
  color: #111827;
}
.se-preview-hint {
  font-size: 11.5px;
  color: #6b7280;
  font-style: italic;
}

/* Panel wrapper */
.pp-panel {
  background: #ffffff;
  border: 0.5px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}
.pp-crd { border-top: 0.5px solid #eef1f4; }
.pp-crd:first-child { border-top: 0; }

/* Card header */
.pp-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease;
}
.pp-hdr:hover { background: #fafbfc; }
.pp-ic {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  flex-shrink: 0;
}
.pp-tt { flex: 1; min-width: 0; }
.pp-title {
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  line-height: 1.2;
}
.pp-sub {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.3;
  margin-top: 1px;
}
.pp-bdg {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 8px;
  font-weight: 500;
  background: #f3f4f6;
  color: #4b5563;
}
.pp-crd.pp-empty .pp-bdg { opacity: 0.4; }
.pp-chv {
  color: #9ca3af;
  font-size: 14px;
  transition: transform 150ms ease;
}
.pp-crd.pp-open .pp-chv { transform: rotate(90deg); }

/* Card body */
.pp-body {
  padding: 4px 14px 14px;
  background: #fbfcfd;
  border-top: 0.5px solid #eef1f4;
}
.pp-addwrap {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 0.5px dashed #e5e7eb;
}
.pp-addwrap button {
  font-size: 12px;
  padding: 6px 12px;
}

/* Category color palettes — mirror extension/cue-panel.css */
.pp-notices  .pp-ic { background: #fef2f2; color: #b91c1c; }
.pp-notices  .pp-bdg { background: #fee2e2; color: #991b1b; }
.pp-tips     .pp-ic { background: #eff6ff; color: #1d4ed8; }
.pp-tips     .pp-bdg { background: #dbeafe; color: #1e40af; }
.pp-gotchas  .pp-ic { background: #fff7ed; color: #c2410c; }
.pp-gotchas  .pp-bdg { background: #fed7aa; color: #9a3412; }
.pp-money    .pp-ic { background: #fef3c7; color: #a16207; }
.pp-money    .pp-bdg { background: #fde68a; color: #78350f; }
.pp-signals  .pp-ic { background: #fefce8; color: #a16207; }
.pp-signals  .pp-bdg { background: #fef08a; color: #713f12; }
.pp-resources .pp-ic { background: #f0fdf4; color: #166534; }
.pp-resources .pp-bdg { background: #dcfce7; color: #14532d; }

/* Row list */
.pp-rowlist {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.pp-row {
  background: #ffffff;
  border: 0.5px solid #eef1f4;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.pp-row:hover { border-color: #cbd5e1; background: #fafbfc; }
.pp-row:last-child { margin-bottom: 0; }
.pp-r-body { flex: 1; min-width: 0; }
.pp-r-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pp-r-title {
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  line-height: 1.3;
}
.pp-r-sub {
  font-size: 12px;
  color: #4b5563;
  line-height: 1.5;
  margin-top: 4px;
}
.pp-r-sub-empty {
  color: #9ca3af;
  font-style: italic;
}
.pp-r-sub-thin { font-size: 11px; color: #6b7280; }
.pp-r-url {
  font-size: 11.5px;
  color: #1d4ed8;
  margin-top: 3px;
  word-break: break-all;
}
.pp-r-edit {
  color: #93a2ad;
  font-size: 13px;
  flex-shrink: 0;
  padding-top: 2px;
}
.pp-row:hover .pp-r-edit { color: #4b5563; }

/* Editing row */
.pp-row-editing {
  background: #ffffff;
  border: 1.5px solid #6366f1;
  padding: 12px;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
  cursor: default;
}
.pp-row-editing:hover { border-color: #6366f1; background: #ffffff; }
.pp-e-lbl {
  font-size: 10.5px;
  color: #6366f1;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.pp-e-lbl-hint {
  color: #9ca3af;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
  font-size: 10.5px;
}
.pp-e-in {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13px;
  padding: 7px 9px;
  border: 0.5px solid #d1d5db;
  border-radius: 6px;
  color: #111827;
  background: #ffffff;
  transition: border-color 100ms ease, box-shadow 100ms ease;
}
.pp-e-in:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}
.pp-e-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}
.pp-e-hint {
  font-size: 10.5px;
  color: #9ca3af;
  margin-top: 5px;
  font-style: italic;
}
.pp-e-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  background: #f3f4f6;
  padding: 1px 4px;
  border-radius: 3px;
  font-style: normal;
  color: #4b5563;
}

/* Live preview inside edit mode */
.pp-e-preview {
  margin-top: 10px;
  padding: 9px 11px;
  background: #eff6ff;
  border-left: 2px solid #93c5fd;
  border-radius: 0 6px 6px 0;
  font-size: 12px;
}
.pp-e-preview-lbl {
  font-size: 10px;
  color: #3b82f6;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 5px;
  font-weight: 500;
}
.pp-e-preview-body {
  color: #1e3a8a;
  line-height: 1.5;
}

/* Two-column mini-controls (signal reconcile + importance) */
.pp-e-row2 {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}
.pp-e-mini { flex: 1; }
.pp-e-mini-lbl {
  display: block;
  font-size: 10.5px;
  color: #6366f1;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.pp-e-mini select {
  width: 100%;
  font-family: inherit;
  font-size: 12.5px;
  padding: 6px 8px;
  border: 0.5px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
}

/* Edit-mode action bar */
.pp-e-acts {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 0.5px dashed #e5e7eb;
  align-items: center;
}
.pp-btn {
  font-family: inherit;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  border: 0.5px solid #d1d5db;
  background: #ffffff;
  color: #374151;
  transition: background 100ms ease, border-color 100ms ease;
}
.pp-btn:hover { background: #f9fafb; border-color: #9ca3af; }
.pp-btn-primary {
  background: #4f46e5;
  color: #ffffff;
  border-color: #4f46e5;
  font-weight: 500;
}
.pp-btn-primary:hover { background: #4338ca; border-color: #4338ca; }
.pp-btn-danger {
  color: #b91c1c;
  border-color: #fecaca;
}
.pp-btn-danger:hover { background: #fef2f2; border-color: #f87171; }

/* Notice / check summary rows in the Notices card */
.pp-notice-row .pp-r-body { padding-left: 2px; }
.pp-imp {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 7px;
}
.pp-imp-critical { background: #dc2626; }
.pp-imp-high     { background: #ea580c; }
.pp-imp-normal   { background: #9ca3af; }
.pp-imp-low      { background: #d1d5db; }
.pp-notice-sub {
  font-size: 11px;
  color: #6b7280;
  text-transform: capitalize;
}
.pp-notice-linkout {
  font-size: 11px;
  color: #6366f1;
  font-style: italic;
  padding: 6px 4px 2px;
}

/* Signal row */
.pp-signal-row { border-color: #fef08a; }
.pp-signal-row:hover { border-color: #eab308; background: #fefce8; }
.pp-signal-critical {
  border-left: 3px solid #dc2626;
  padding-left: 10px;
}
.pp-signal-chip-preview {
  margin-top: 4px;
  padding: 6px 9px;
  background: #fefce8;
  border: 0.5px dashed #eab308;
  border-radius: 5px;
  font-size: 12px;
  color: #713f12;
  line-height: 1.35;
}
.pp-signal-crit-chip {
  font-size: 10px;
  padding: 1px 6px;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Empty-state note inside a card body */
.pp-empty-note {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.55;
  padding: 8px 10px;
  background: #f9fafb;
  border: 0.5px dashed #d1d5db;
  border-radius: 6px;
  margin-top: 6px;
}

/* ==============================================================
 * Advanced fold (bottom of the editor).
 *
 * Contains the AI builder, vision panel, raw checks editor,
 * audience filter, outcomes dashboard, and delete. Collapsed by
 * default; expanded when the operator needs power features.
 * ============================================================== */
/* v0.64.0 — Advanced fold KILLED. Owner's directive: "we really
   should not have an advanced mode... nothing should be buried".
   Old .se-advanced-fold / .se-advanced-title / .se-advanced-hint /
   .se-advanced-body rules removed. Sections that used to live
   inside now render top-level; the section-spacing rule that
   .se-advanced-body once provided is preserved by targeting the
   sections directly at editor scope. */
#skill-editor > .se-section,
#skill-editor > .se-section-fold,
#skill-editor > .se-strip {
  margin-bottom: 14px;
}

/* v0.64.0 — Auto-enrichment status strip. Shown at the top of the
   editor during any admin-side auto-fire (open-of-unenriched,
   URL blur, vision drop). Small, unobtrusive, but obviously alive
   (pulsing dot) so the operator knows AI work is happening in
   the background without being blocked by a modal. Auto-hides
   when the auto-enrich completes. */
.auto-enrich-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(90deg, #f0f9ff 0%, #ecfeff 100%);
  border: 0.5px solid #a5f3fc;
  border-left: 3px solid #0891b2;
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: #155e75;
}
.auto-enrich-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #06b6d4;
  animation: autoEnrichPulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes autoEnrichPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* v0.66.0 — Draft banner.
   Sits above everything in the skill editor when the open skill is a
   draft. Amber, because it's a state that wants resolving — but not
   red: nothing is wrong, the skill just hasn't been released yet.
   The Publish button is the only primary-weight control in the strip,
   because ending the review is the one thing this banner is for. */
.draft-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 14px;
  background: linear-gradient(90deg, #fffbeb 0%, #fefce8 100%);
  border: 0.5px solid #fde68a;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #78350f;
}
.draft-banner-badge {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  padding: 3px 7px;
  border-radius: 4px;
  background: #f59e0b;
  color: #ffffff;
}
.draft-banner-text {
  flex: 1;
  min-width: 180px;
  line-height: 1.45;
}
.draft-banner-publish {
  flex-shrink: 0;
  padding: 7px 14px;
  border: none;
  border-radius: 6px;
  background: #0f766e;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms;
}
.draft-banner-publish:hover:not(:disabled) { background: #115e59; }
.draft-banner-publish:disabled { opacity: 0.6; cursor: default; }

/* v0.65.0 — Vision telemetry strip.
   Subtle indigo variant of the auto-enrich strip, above the panel
   cards on saved skills that were touched by the extension's unified
   ➕ Add-skill / 🔁 Improve-skill flow. Non-pulsing dot (this is
   informational, not "AI is running now"). Rendered by
   renderVisionTelemetryStrip() in admin.js. */
.vision-telemetry-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 12px;
  background: linear-gradient(90deg, #eef2ff 0%, #f5f3ff 100%);
  border: 0.5px solid #c7d2fe;
  border-left: 3px solid #6366f1;
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: #3730a3;
}
.vt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6366f1;
  flex-shrink: 0;
}
.vt-text {
  flex: 1;
  min-width: 0;
}
.vt-text strong {
  color: #1e1b4b;
  font-weight: 600;
}
.vt-history-toggle {
  border: none;
  background: transparent;
  color: #4338ca;
  font-size: 11.5px;
  padding: 2px 6px;
  cursor: pointer;
  text-decoration: underline;
  border-radius: 4px;
}
.vt-history-toggle:hover {
  background: #e0e7ff;
}
.vt-history-list {
  flex-basis: 100%;
  margin: 4px 0 0 18px;
  padding: 0 0 0 12px;
  list-style: disc;
  font-size: 11.5px;
  color: #4338ca;
  line-height: 1.7;
}

/* Delete row (was inside Advanced, now top-level) */
.se-delete-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: #fef2f2;
  border: 0.5px solid #fecaca;
  border-radius: 6px;
  margin-top: 14px;
}
.se-delete-warn {
  font-size: 12px;
  color: #7f1d1d;
  flex: 1;
}

/* ==============================================================
 * v0.61.0 — Body formatter output (.fmt-*).
 *
 * Duplicates extension/src/popup/cue-panel.css so tip / money /
 * gotcha body text renders identically in the admin preview and
 * the employee panel. If either changes, sync the other.
 * ============================================================== */
.fmt-body > :first-child { margin-top: 0; }
.fmt-body > :last-child { margin-bottom: 0; }
.fmt-body .fmt-p { margin: 0 0 6px 0; color: inherit; }
.fmt-body .fmt-p:last-child { margin-bottom: 0; }
.fmt-body .fmt-list {
  margin: 0 0 6px 0;
  padding-left: 20px;
  color: inherit;
}
.fmt-body .fmt-list:last-child { margin-bottom: 0; }
.fmt-body .fmt-list li {
  margin: 0 0 3px 0;
  padding: 0;
  line-height: 1.45;
}
.fmt-body .fmt-list li:last-child { margin-bottom: 0; }
.fmt-body .fmt-ul { list-style: disc outside; }
.fmt-body .fmt-ul li::marker { color: currentColor; opacity: 0.7; }
.fmt-body .fmt-ol { list-style: decimal outside; }
.fmt-body .fmt-ol li::marker { color: currentColor; font-weight: 700; }
.fmt-body .fmt-callout {
  margin: 4px 0 6px 0;
  padding: 6px 8px 6px 10px;
  border-left: 3px solid currentColor;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 0 4px 4px 0;
  opacity: 0.95;
  font-style: italic;
  color: inherit;
}
.fmt-body .fmt-callout:last-child { margin-bottom: 0; }
.fmt-body strong { font-weight: 600; color: #111827; }
.fmt-body .fmt-label {
  font-weight: 700;
  color: #111827;
  margin-right: 2px;
}
/* Category tinting inside admin preview: money bolds → brown,
 * gotcha bolds → orange, matches the extension panel exactly. */
.pp-money .fmt-body strong,
.pp-money .fmt-body .fmt-label { color: #78350f; }
.pp-gotchas .fmt-body strong,
.pp-gotchas .fmt-body .fmt-label { color: #9a3412; }

/* ==============================================================
 * v0.62.0 — Skills catalog (industry → software → detail).
 * ============================================================== */

.cat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -4px 0 12px;
}
.cat-crumbs {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6b7280;
}
.cat-crumb {
  background: none;
  border: none;
  color: #4b5563;
  font-family: inherit;
  font-size: 13px;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 100ms ease;
}
.cat-crumb:hover { background: #f3f4f6; color: #111827; }
.cat-crumb-active {
  color: #111827;
  font-weight: 500;
  cursor: default;
}
.cat-crumb-active:hover { background: transparent; }
.cat-crumb-sep {
  color: #9ca3af;
  font-size: 12px;
}
.cat-search {
  min-width: 220px;
  font-family: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 0.5px solid #d1d5db;
  border-radius: 6px;
  color: #111827;
  background: #ffffff;
  transition: border-color 100ms ease, box-shadow 100ms ease;
}
.cat-search:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.cat-screen {
  margin-top: 8px;
}
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.cat-card {
  position: relative;
  text-align: left;
  padding: 14px 16px 12px;
  background: #ffffff;
  border: 0.5px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cat-card:hover:not(:disabled) {
  border-color: #6366f1;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08);
}
.cat-card:active:not(:disabled) { transform: translateY(1px); }
.cat-card:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.cat-card-title {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  line-height: 1.3;
}
.cat-card-vendor {
  font-size: 11.5px;
  color: #6b7280;
}
.cat-card-desc {
  font-size: 12.5px;
  color: #4b5563;
  line-height: 1.5;
  margin-top: 4px;
  flex: 1;
}
.cat-card-meta {
  margin-top: 6px;
}
.cat-count {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 8px;
  background: #eef2ff;
  color: #4338ca;
  font-weight: 500;
}
.cat-count-empty {
  background: #f3f4f6;
  color: #6b7280;
}
/* v0.63.2 — Green variant for the "N installed" chip on the
   industries grid. Matches the .cat-badge-installed palette used
   on the software-card badge so operators register "green === my
   installs" consistently across the two screens. Placed next to
   the neutral "M packages" chip on the industry card; both
   .cat-count spans render inline in .cat-card-meta with a small
   gap set below. */
.cat-count-installed {
  background: #dcfce7;
  color: #14532d;
  margin-right: 6px;
}
.cat-card-chips {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cat-chip {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 8px;
  background: #f3f4f6;
  color: #4b5563;
}
.cat-chip-tag {
  background: #fef3c7;
  color: #78350f;
}

/* Installed badge on software cards */
.cat-badge-installed {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  background: #dcfce7;
  color: #14532d;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cat-badge-installed.cat-badge-lg {
  position: static;
  font-size: 11.5px;
  padding: 4px 12px;
}
.cat-card.cat-installed {
  border-color: #86efac;
  background: #f0fdf4;
}

/* Detail screen */
.cat-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid #e5e7eb;
}
.cat-detail-title {
  font-size: 20px;
  font-weight: 500;
  color: #111827;
  margin: 0 0 4px;
}
.cat-detail-vendor {
  font-size: 13px;
  color: #6b7280;
}
.cat-detail-vendor a {
  color: #4338ca;
  text-decoration: none;
}
.cat-detail-vendor a:hover { text-decoration: underline; }
.cat-detail-install {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.cat-detail-desc {
  margin: 12px 0;
  font-size: 13.5px;
  color: #374151;
  line-height: 1.6;
}

.cat-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.cat-total-chip {
  font-size: 11.5px;
  padding: 3px 10px;
  border-radius: 8px;
  font-weight: 500;
}
.cat-total-checks    { background: #fef2f2; color: #991b1b; }
.cat-total-tips      { background: #eff6ff; color: #1e40af; }
.cat-total-gotchas   { background: #fff7ed; color: #9a3412; }
.cat-total-money     { background: #fef3c7; color: #78350f; }
.cat-total-signals   { background: #fefce8; color: #713f12; }
.cat-total-resources { background: #f0fdf4; color: #14532d; }

.cat-sources {
  margin-bottom: 14px;
  padding: 8px 12px;
  background: #f9fafb;
  border: 0.5px solid #e5e7eb;
  border-radius: 6px;
  font-size: 12px;
}
.cat-sources > summary {
  cursor: pointer;
  color: #4b5563;
  font-weight: 500;
}
.cat-sources ul {
  margin: 8px 0 4px;
  padding-left: 20px;
}
.cat-sources li { margin-bottom: 3px; }
.cat-sources a {
  color: #4338ca;
  text-decoration: none;
  word-break: break-all;
}
.cat-sources-verified {
  color: #6b7280;
  font-size: 11.5px;
  font-style: italic;
  margin-top: 6px;
}

.cat-skills-header {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin: 12px 0 6px;
}
.cat-skills-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cat-skill-row {
  padding: 10px 12px;
  background: #ffffff;
  border: 0.5px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 6px;
}
.cat-skill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cat-skill-name {
  font-size: 13px;
  font-weight: 500;
  color: #111827;
}
.cat-aud-chip {
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 8px;
  background: #f3e8ff;
  color: #6b21a8;
}
.cat-skill-desc {
  font-size: 12px;
  color: #4b5563;
  line-height: 1.5;
  margin: 4px 0;
}
.cat-skill-meta {
  font-size: 11px;
  color: #6b7280;
}

/* v0.63.0 — Catalog v2 detail-screen additions. */
.cat-v2-banner {
  background: #eff6ff;
  border-left: 3px solid #3b82f6;
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  margin: 12px 0;
}
.cat-v2-banner-title {
  font-size: 12.5px;
  font-weight: 600;
  color: #1e3a8a;
  margin-bottom: 3px;
}
.cat-v2-banner-body {
  font-size: 12px;
  color: #1e40af;
  line-height: 1.55;
}
.cat-page-hint {
  margin: 8px 0 6px;
  padding: 7px 10px;
  background: #f5f3ff;
  border-left: 2px solid #a78bfa;
  border-radius: 0 5px 5px 0;
}
.cat-page-hint-lbl {
  font-size: 10.5px;
  color: #6d28d9;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cat-page-hint-body {
  font-size: 12px;
  color: #5b21b6;
  line-height: 1.55;
  margin-top: 3px;
}

/* v0.63.1 — Regenerate-from-catalog-hints panel. Visually distinct
   from the vision panel (blue) so operators immediately register it
   as a different action: teal/cyan family, matching the
   "re-run / refresh" metaphor rather than the "add new via AI"
   metaphor of the builder / vision panels. Hint box inside uses
   the same purple as the catalog install detail's cat-page-hint
   so operators recognize it as "the same hint the catalog carries." */
.regen-panel {
  background: linear-gradient(180deg, #ecfeff 0%, #f0f9ff 100%);
  border: 1px solid #a5f3fc;
  border-left: 3px solid #0891b2;
  border-radius: 8px;
  padding: 14px 14px 12px;
  margin: 14px 0;
}
.regen-panel-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: #155e75;
  display: flex;
  align-items: center;
  gap: 6px;
}
.regen-panel-help {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: #4b5563;
  line-height: 1.4;
}
.regen-hints-box {
  margin: 0 0 12px;
  padding: 8px 11px;
  background: #f5f3ff;
  border-left: 2px solid #a78bfa;
  border-radius: 0 5px 5px 0;
}
.regen-hints-lbl {
  font-size: 10.5px;
  color: #6d28d9;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.regen-hints-body {
  font-size: 12px;
  color: #5b21b6;
  line-height: 1.55;
  margin-top: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}
.regen-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* v0.66.0 — Draft chip in the skills list.
   Extension-created skills land as drafts pending review; without a
   list-level marker a manager who captured five pages has no way to
   tell which ones staff can actually see. Left border tints the whole
   row so a list with several drafts reads as "these need you." */
.skill-row-draft {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  margin-right: 7px;
  border-radius: 3px;
  background: #f59e0b;
  color: #ffffff;
  vertical-align: 1px;
}
.skill-row-is-draft {
  border-left: 3px solid #fbbf24;
}

/* ============================================================
 * v0.67.0 — Walkthroughs (admin editor)
 *
 * The walkthrough row embeds a nested step list, so it needs
 * more vertical structure than the plain title+body rows for
 * tips/gotchas/money. Colors match the extension side panel's
 * teal walkthrough family (see cue-panel.css).
 * ============================================================ */
.pp-wt-row .pp-r-title-row { align-items: center; }
.pp-wt-exp-chip {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: 3px;
  background: #0d9488;
  color: #ffffff;
  margin-left: 8px;
  vertical-align: 1px;
}

.pp-wt-editing { border-left: 3px solid #0d9488; }

.pp-wt-steplist {
  list-style: none;
  padding: 0;
  margin: 6px 0 8px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pp-wt-empty {
  padding: 8px 10px;
  background: #f0fdfa;
  border-radius: 6px;
  color: #64748b;
  font-size: 12.5px;
  font-style: italic;
}
.pp-wt-step {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 8px 8px 6px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}
.pp-wt-step-num {
  flex-shrink: 0;
  width: 24px;
  padding-top: 6px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: #0f766e;
  font-variant-numeric: tabular-nums;
}
.pp-wt-step-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pp-wt-step-text { font-weight: 500; }
.pp-wt-step-optionals {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pp-wt-step-label,
.pp-wt-step-note {
  font-size: 12px;
  padding: 5px 8px;
  background: #ffffff;
}
.pp-wt-step-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 2px;
}
.pp-wt-step-btn {
  width: 26px;
  height: 24px;
  padding: 0;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background: #ffffff;
  color: #475569;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  font-weight: 700;
}
.pp-wt-step-btn:hover:not(:disabled) {
  background: #f0fdfa;
  border-color: #14b8a6;
  color: #0f766e;
}
.pp-wt-step-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.pp-wt-step-btn-danger:hover:not(:disabled) {
  background: #fee2e2;
  border-color: #ef4444;
  color: #b91c1c;
}
.pp-wt-add-step-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

/* ==========================================================================
   v0.1.1 — CueMePro additions
   Appended rather than merged into the ported sheet above so the port and
   the new work stay reviewable (and revertable) independently.
   ========================================================================== */

/* --- Auth pages ---------------------------------------------------------- */

.auth-page { background: var(--bg, #f6f7f9); }
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card { width: 100%; max-width: 420px; }
.auth-logo {
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--accent, #0f766e);
}
.auth-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line, #e2e8f0); }
.auth-sent-box { text-align: center; padding: 12px 0; }
.auth-sent-icon { font-size: 34px; margin-bottom: 8px; }

.signin-sent {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 6px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  font-size: 13px;
  line-height: 1.5;
}
.signin-newbiz { margin-top: 16px; }

/* --- Impersonation banner -------------------------------------------------
   Loud on purpose. Acting inside a customer's business without realising it
   is this feature's worst failure mode, so the banner is fixed, full-width,
   and pushes the page down rather than overlaying it. */

.impersonation-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #7c2d12;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.impersonation-banner .imp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fbbf24;
  flex: none;
  animation: imp-pulse 2s ease-in-out infinite;
}
@keyframes imp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.impersonation-banner .imp-text { flex: 1; }
.impersonation-banner .imp-exit {
  background: #fff;
  color: #7c2d12;
  border: 0;
  border-radius: 4px;
  padding: 5px 12px;
  font-weight: 600;
  cursor: pointer;
}
body.has-impersonation-banner { padding-top: 40px; }

@media (prefers-reduced-motion: reduce) {
  .impersonation-banner .imp-dot { animation: none; }
}

/* --- Plan / upgrade ------------------------------------------------------- */

.plan-upgrade-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 6px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #78350f;
  font-size: 13px;
}
.plan-upgrade-banner .pu-text { flex: 1; }

.billing-box {
  padding: 16px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 8px;
  background: #fff;
}
.billing-plan-name { font-size: 18px; font-weight: 600; }
.billing-plan-blurb { color: var(--muted, #64748b); font-size: 13px; margin-top: 2px; }
.billing-usage { margin-top: 10px; font-size: 13px; }
.billing-status { margin-top: 10px; font-size: 13px; padding: 8px 10px; border-radius: 4px; }
.billing-status-past_due { background: #fffbeb; color: #92400e; }
.billing-status-canceled { background: #fef2f2; color: #991b1b; }

.billing-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.plan-card {
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plan-card.plan-current { border-color: var(--accent, #0f766e); box-shadow: 0 0 0 1px var(--accent, #0f766e); }
.plan-name { font-weight: 600; }
.plan-blurb { font-size: 12.5px; color: var(--muted, #64748b); flex: 1; }
.plan-current-tag { font-size: 12px; color: var(--accent, #0f766e); font-weight: 600; }

.seat-note {
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--muted, #64748b);
}
.seat-note-full { color: #92400e; }

/* --- Entity lists (departments / software / employees / installs) --------- */

.entity-list { display: flex; flex-direction: column; gap: 8px; }
.entity-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 6px;
  background: #fff;
}
.entity-main { flex: 1; min-width: 0; }
.entity-name { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.entity-sub { font-size: 12.5px; color: var(--muted, #64748b); margin-top: 2px; }
.entity-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.entity-chips { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.entity-actions { display: flex; gap: 6px; flex: none; }

.chip-warn { background: #fef3c7; color: #92400e; border-color: #fcd34d; }

.role-badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
}
.role-owner { background: #ecfdf5; color: #065f46; }
.role-admin { background: #eff6ff; color: #1e40af; }

.master-list { display: flex; flex-direction: column; gap: 8px; }
.inline-search {
  padding: 6px 10px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 4px;
  font-size: 13px;
  min-width: 200px;
}

/* --- Skills toolbar ------------------------------------------------------- */

.skills-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.skills-search {
  flex: 1;
  min-width: 180px;
  padding: 7px 11px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 4px;
  font-size: 13px;
}
.skills-sort {
  padding: 7px 9px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
}
.skills-filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips .chip {
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--line, #e2e8f0);
  background: #fff;
  padding: 4px 11px;
  border-radius: 12px;
  font-size: 12px;
}
.chips .chip.active {
  background: var(--accent, #0f766e);
  border-color: var(--accent, #0f766e);
  color: #fff;
}
.skills-counts { font-size: 12.5px; color: var(--muted, #64748b); white-space: nowrap; }

.overflow-wrap { position: relative; }
.overflow-btn { padding: 7px 11px; font-weight: 700; line-height: 1; }
.overflow-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 50;
  min-width: 210px;
  background: #fff;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
  padding: 4px;
}
.overflow-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  background: none;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
}
.overflow-menu button:hover { background: #f1f5f9; }

/* --- Modal ---------------------------------------------------------------- */

.cue-modal { position: fixed; inset: 0; z-index: 10000; display: flex;
             align-items: center; justify-content: center; padding: 24px; }
.cue-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); }
.cue-modal-box {
  position: relative;
  background: #fff;
  border-radius: 10px;
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}
.cue-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line, #e2e8f0);
}
.cue-modal-head h3 { margin: 0; font-size: 15px; }
.cue-modal-x { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted, #64748b); }
.cue-modal-body { padding: 16px 18px; overflow-y: auto; }
.cue-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--line, #e2e8f0);
}
body.modal-open { overflow: hidden; }

.grant-list { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.grant-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 5px; cursor: pointer;
}
.grant-row:hover { background: #f8fafc; }
.grant-name { flex: 1; font-size: 13.5px; }
.grant-count { font-size: 12px; color: var(--muted, #64748b); }

.save-status.busy { color: var(--muted, #64748b); }

/* Dev-build label next to the JoeAdmin title. Remove with the rename —
   see docs/DEV-LABELS.md. */
.dev-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 10px;
  background: #fef3c7;
  color: #92400e;
  font-weight: 700;
}

/* ==========================================================================
   v0.1.4 — Setup tab (the onboarding checklist).

   The visual job here is one distinction: a page Cue GUESSED must never look
   like a page someone CONFIRMED. Everything guessed carries the amber
   "suggested" badge and a Confirm action; everything else does not. If a
   future edit makes those two states look alike, it has removed the point
   of the screen.
   ========================================================================== */

/* `.link-btn` was already used by admin.js's check editor and never styled,
   so it rendered as a default grey browser button in the middle of a row of
   text actions. Styling it here fixes that surface too. */
.link-btn {
  background: transparent;
  border: none;
  color: var(--accent, #7c3aed);
  padding: 2px 6px;
  font-size: 12.5px;
  cursor: pointer;
  border-radius: 4px;
}
.link-btn:hover { background: #f5f3ff; text-decoration: underline; }
.link-btn.ob-danger { color: var(--bad, #dc2626); }
.link-btn.ob-danger:hover { background: #fef2f2; }

.ob-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ob-progress-wrap { flex: 1; min-width: 220px; }
.ob-progress {
  height: 8px;
  background: var(--line, #e2e8f0);
  border-radius: 99px;
  overflow: hidden;
}
.ob-progress-bar {
  height: 100%;
  width: 0;
  background: var(--accent, #7c3aed);
  border-radius: 99px;
  transition: width 0.25s ease;
}
.ob-progress-label {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-dim, #475569);
}
.ob-head-actions { display: flex; align-items: center; gap: 8px; }

.ob-industry-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.ob-industry-row label { font-weight: 600; font-size: 13px; }
.ob-industry-row select { max-width: 340px; }
.ob-industry-help { margin-top: 4px; }

.ob-h3 {
  margin: 26px 0 8px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-dim, #475569);
}

.ob-software-list { display: flex; flex-direction: column; gap: 12px; }

.ob-software {
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.ob-software-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: var(--bg, #f8fafc);
  border-bottom: 1px solid var(--line, #e2e8f0);
}
.ob-software-name { font-weight: 650; }
.ob-software-count {
  margin-left: 8px;
  font-size: 12px;
  color: var(--ink-dim, #475569);
}
.ob-software-actions { display: flex; gap: 6px; }

.ob-pages { display: flex; flex-direction: column; }
.ob-empty-pages { padding: 14px; margin: 0; font-size: 13px; }

.ob-page {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
}
.ob-page:last-child { border-bottom: none; }
.ob-page-check { padding-top: 2px; }
.ob-page-main { flex: 1; min-width: 0; }
.ob-page-name {
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ob-page-desc { font-size: 12.5px; color: var(--ink-dim, #475569); margin-top: 2px; }
.ob-page-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--ink-5, #94a3b8);
  margin-top: 3px;
  overflow-wrap: anywhere;
}
.ob-page-actions { display: flex; gap: 2px; align-items: center; }

.ob-page-done .ob-page-name { text-decoration: line-through; color: var(--ink-dim, #475569); }
/* Skipped is dimmed but NOT struck through — it was decided, not completed,
   and the two should not read the same at a glance. */
.ob-page-skipped { opacity: 0.55; }

.ob-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 700;
}
.ob-badge-guess { background: #fef3c7; color: #92400e; }
.ob-badge-captured { background: #d1fae5; color: #065f46; }

.ob-add-page {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  background: var(--highlight, #eff6ff);
  border-top: 1px solid var(--line, #e2e8f0);
  align-items: center;
  flex-wrap: wrap;
}
.ob-add-page input { flex: 1; min-width: 160px; }

.ob-url-row { align-items: center; }
.ob-url-check { padding-top: 0; }
.ob-url-address {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   v0.2.1 — Skills browser. Software → Page → What Employees See.

   The layout follows the brief's UI principles literally: white space, short
   labels, single-row page lists, stacked cards. The thing to preserve if this
   is ever restyled is that a CARD LOOKS LIKE WHAT AN EMPLOYEE WILL SEE —
   category colour, heading, bullets. The admin is a preview, not a form.
   ========================================================================== */

.br-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.br-pick label { font-weight: 600; font-size: 13px; }
.br-pick select { min-width: 240px; }

/* Two columns on a normal screen, stacked on a narrow one. Pages are a
   navigation aid, so they get the smaller share. */
.br-cols {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 860px) {
  .br-cols { grid-template-columns: 1fr; }
}

.br-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.br-col-head h3 {
  margin: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-dim, #475569);
}

/* ----- Pages ------------------------------------------------------------ */

.br-page-list { display: flex; flex-direction: column; gap: 2px; }

.br-page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 9px 10px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink, #0f172a);
}
.br-page:hover { background: var(--bg, #f8fafc); }
.br-page-on {
  background: var(--highlight, #eff6ff);
  border-color: var(--highlight-line, #93c5fd);
  font-weight: 600;
}
.br-page-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.br-page-count {
  font-size: 11px;
  color: var(--ink-dim, #475569);
  background: #f1f5f9;
  border-radius: 10px;
  padding: 1px 7px;
  flex: none;
}

.br-add-page {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding: 10px;
  background: var(--bg, #f8fafc);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 6px;
}

/* ----- Skills ----------------------------------------------------------- */

.br-page-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--ink-5, #94a3b8);
  margin: -2px 0 10px;
  overflow-wrap: anywhere;
}

.br-skill-list { display: flex; flex-direction: column; gap: 10px; }

/* The left border is the category colour. It is the only always-visible
   signal of what kind of card this is, so it must survive a restyle. */
.br-skill {
  border: 1px solid var(--line, #e2e8f0);
  border-left: 4px solid var(--line, #e2e8f0);
  border-radius: 7px;
  background: #fff;
  padding: 12px 14px;
}
.br-tone-info { border-left-color: #3b82f6; }
.br-tone-warn { border-left-color: #f97316; }
.br-tone-money { border-left-color: #f59e0b; }

.br-skill-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.br-skill-name { font-weight: 650; font-size: 14px; flex: 1; min-width: 120px; }
.br-skill-actions { display: flex; gap: 2px; }

.br-cat {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  flex: none;
}
.br-cat-info { background: #dbeafe; color: #1e40af; }
/*
 * v0.5.0 — warn chips moved from orange to navy.
 *
 * REQUIRED INFORMATION rendered orange here, close enough to the amber of
 * "Worth doing" in the employee panel to read as the same signal. They are
 * unrelated: one is a category label in the authoring tool, the other is a
 * priority band in the delivered card. It was the only place in the product
 * where two things looked similar without being related, which is exactly the
 * kind of resemblance that teaches people to distrust colour everywhere else.
 *
 * Navy is the brand's neutral. The chip states its category in words; the
 * colour is there to separate it from the card name beside it, not to carry
 * urgency of its own — the border-left on .br-tone-warn already does that.
 */
.br-cat-warn { background: #e2e8f0; color: #012047; }
.br-cat-money { background: #fef3c7; color: #92400e; }

.br-draft {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #475569;
}

/* Audience reads as a quiet label, not a control — the brief says visibility
   must not be visually dominant. It is still a button, because it opens the
   picker, but it should not compete with Edit or the card's content. */
.br-aud {
  background: transparent;
  border: 1px dashed var(--line, #e2e8f0);
  border-radius: 10px;
  padding: 2px 9px;
  font-size: 11.5px;
  color: var(--ink-dim, #475569);
  cursor: pointer;
}
.br-aud:hover { background: var(--bg, #f8fafc); border-style: solid; }

.br-bullets { margin: 8px 0 0; padding-left: 20px; }
.br-bullets li {
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 3px;
  overflow-wrap: anywhere;
}
.br-empty-bullets {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--ink-dim, #475569);
  font-style: italic;
}

/* ----- Editor ----------------------------------------------------------- */

.br-editing { background: var(--highlight, #eff6ff); border-left-color: var(--accent, #7c3aed); }
.br-edit-row { display: flex; gap: 8px; flex-wrap: wrap; }
.br-edit-row select { flex: none; min-width: 170px; }
.br-edit-row input[data-f="name"] { flex: 1; min-width: 200px; }
.br-cat-hint {
  margin: 5px 0 8px;
  font-size: 12px;
  color: var(--ink-dim, #475569);
}
.br-editing textarea {
  width: 100%;
  font-size: 13.5px;
  line-height: 1.5;
  resize: vertical;
}
.br-bullet-help { margin-top: 4px; }
.br-edit-actions { flex-wrap: wrap; gap: 10px; align-items: center; }
.br-publish {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-dim, #475569);
}

.br-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.7;
}
.sec-loading { font-size: 12.5px; color: var(--ink-dim, #475569); }

/* ----- Sections ---------------------------------------------------------
 *
 * Own classes throughout. The ported editor borrowed `.se-strip`,
 * `.capture-explainer` and `.taxonomy-grid` from unrelated screens, which is
 * how a help sentence ended up in a 56px column next to a 240px delete row.
 * Nothing here is shared with another tab, so restyling a section cannot
 * reach anything else, and nothing else can reach in.
 *
 * Base input styling comes from cue-brand.css. There are deliberately no
 * per-field border/radius/padding rules below.
 * ----------------------------------------------------------------------- */

.sec-list {
  margin: 14px 0 0;
  border-top: 1px solid var(--line, #e2e8f0);
}

.sec { border-bottom: 1px solid var(--line, #e2e8f0); }

.sec-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The whole header line is the hit target, not just the caret. */
.sec-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 9px 2px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink, #0f172a);
}
.sec-toggle:hover .sec-label { color: var(--cue-blue, #0197c4); }

.sec-caret { font-size: 10px; color: var(--ink-dim, #475569); width: 10px; }
.sec-label { font-weight: 620; font-size: 13px; }

.sec-count {
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--cue-blue-tint, #e6f5fa);
  color: var(--cue-navy-mid, #01436d);
}
/* An empty section says so quietly rather than showing a loud zero. */
.sec-count-0 { background: transparent; color: var(--ink-5, #94a3b8); font-weight: 500; }

.sec-add { flex: none; font-size: 12px; }

.sec-body { padding: 0 0 12px 18px; }
.sec-help {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-dim, #475569);
}
.sec-empty {
  margin: 0;
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-dim, #475569);
}

.sec-items { display: flex; flex-direction: column; gap: 8px; }

.sec-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 7px;
  padding: 9px 10px;
}
.sec-item-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sec-item-fields input,
.sec-item-fields textarea { width: 100%; font-size: 13px; }
.sec-item-fields textarea { resize: vertical; line-height: 1.5; }

.sec-item-ctl {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Same reason as `.sec-wt-head`: `width: auto` so the select sizes to its
   content instead of trying to fill the row it shares. */
.sec-exp { flex: 0 0 auto; width: auto; font-size: 11.5px; padding: 4px 26px 4px 8px; }

.sec-x {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--ink-5, #94a3b8);
}
.sec-x:hover { background: #fef2f2; color: #b91c1c; }

/* ----- Walkthroughs ----------------------------------------------------- */

.sec-wt { flex-direction: column; gap: 8px; }
.sec-wt-head { display: flex; gap: 8px; align-items: center; width: 100%; }
/* The base layer gives every control `width: 100%`. In a flex row that makes
   the select claim a full row's width and squeeze the title beside it down to
   a ~20px stub — which is exactly what happened here: the walkthrough's title
   was present, editable, and invisible. Both children size to the row instead. */
.sec-wt-head input[data-fld="title"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
}
.sec-wt-head .sec-exp { flex: 0 0 auto; width: auto; }
.sec-wt > textarea { width: 100%; font-size: 13px; resize: vertical; min-height: 52px; }
.sec-wt-done { width: 100%; font-size: 12.5px; }

.sec-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  border-left: 2px solid var(--cue-teal, #0ab795);
  padding-left: 10px;
}
.sec-step { display: flex; gap: 8px; align-items: flex-start; }
.sec-step-n {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--cue-teal-tint, #e6f8f4);
  color: var(--cue-navy, #012047);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sec-step-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sec-step-fields input { width: 100%; font-size: 13px; }
.sec-step-extra { display: flex; gap: 6px; }
.sec-step-extra input { font-size: 11.5px; }

.sec-step-ctl { flex: none; display: flex; gap: 1px; align-items: center; }
.sec-step-ctl button {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 10px;
  padding: 4px 5px;
  border-radius: 5px;
  color: var(--ink-dim, #475569);
}
.sec-step-ctl button:hover:not(:disabled) { background: var(--bg, #f8fafc); }
.sec-step-ctl button:disabled { opacity: 0.25; cursor: default; }

.sec-add-step { font-size: 12px; align-self: flex-start; }

/* ----- Handoff to the old editor, and the delete zone -------------------- */

.sec-advanced {
  margin: 12px 0 0;
  padding: 9px 11px;
  border-radius: 7px;
  background: var(--cue-navy-tint, #eef2f8);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-dim, #475569);
}

/* Delete gets its own line below the save row, with clear air around it.
   In the ported editor it sat in the SAME row as Save — a destructive action
   one slip away from the primary one. */
.sec-danger {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid var(--line, #e2e8f0);
}
.sec-danger-note { font-size: 12px; color: var(--ink-dim, #475569); }

@media (max-width: 620px) {
  .sec-item { flex-direction: column; }
  .sec-item-ctl { align-self: flex-end; }
  .sec-step-extra { flex-direction: column; }
}

/* ----- Department picker ------------------------------------------------ */

.br-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 20px;
}
.br-modal[hidden] { display: none; }
.br-modal-card {
  background: #fff;
  border-radius: 10px;
  padding: 20px 22px;
  width: min(420px, 100%);
  max-height: 80vh;
  overflow: auto;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}
.br-modal-card h3 { margin: 0 0 6px; font-size: 16px; }
.br-dept-list { display: flex; flex-direction: column; gap: 2px; margin: 12px 0; }
.br-dept-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13.5px;
}
.br-dept-row:hover { background: var(--bg, #f8fafc); }

/* ==========================================================================
   v0.2.2 — Setup flow. Four approval steps, then the page checklist.

   The thing to preserve: every row here is a TICK, not a field. The brief's
   whole premise for this screen is that the manager approves what Cue already
   worked out. If a future edit turns a step into a form, it has replaced the
   product's best first impression with data entry.
   ========================================================================== */

.su-steps {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  flex-wrap: wrap;
}
.su-step {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 7px;
  border-radius: 99px;
  font-size: 12.5px;
  color: var(--ink-dim, #475569);
  background: var(--bg, #f8fafc);
  border: 1px solid var(--line, #e2e8f0);
  cursor: pointer;
}
.su-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line, #e2e8f0);
  font-size: 11px;
  font-weight: 700;
}
.su-step:hover { background: #fff; }
.su-on {
  background: var(--accent, #7c3aed);
  border-color: var(--accent, #7c3aed);
  color: #fff;
  font-weight: 600;
}
.su-on span { background: rgba(255, 255, 255, 0.22); border-color: transparent; color: #fff; }
.su-done { color: var(--good, #16a34a); border-color: #bbf7d0; background: #f0fdf4; }
.su-done span { border-color: #bbf7d0; color: var(--good, #16a34a); }

.su-panel { max-width: 720px; }
.su-panel[hidden] { display: none; }
.su-panel h3 { margin: 0 0 4px; font-size: 17px; }
.su-panel .row { margin: 12px 0; gap: 8px; flex-wrap: wrap; }
.su-panel .row input[type="text"],
.su-panel .row input[type="search"],
.su-panel .row input[type="email"] { flex: 1; min-width: 180px; }

/* ----- Tick lists ------------------------------------------------------- */

.su-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 14px 0;
  max-height: 380px;
  overflow-y: auto;
}
.su-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 6px;
  cursor: pointer;
  background: #fff;
}
.su-row:hover { background: var(--bg, #f8fafc); }
.su-row input { margin-top: 2px; flex: none; }
.su-row-main { flex: 1; min-width: 0; }
.su-row-name { display: block; font-weight: 600; font-size: 13.5px; }
.su-row-sub {
  display: block;
  font-size: 12.5px;
  color: var(--ink-dim, #475569);
  margin-top: 1px;
}
/* Already in the business: ticked, locked, and visibly settled rather than
   looking like a choice the manager still has to make. */
.su-have { background: #f0fdf4; border-color: #bbf7d0; cursor: default; }
.su-have-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #065f46;
  background: #d1fae5;
  border-radius: 10px;
  padding: 2px 7px;
  flex: none;
  align-self: center;
}

/* ----- Company fields --------------------------------------------------- */

.su-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin: 14px 0;
}
@media (max-width: 640px) { .su-fields { grid-template-columns: 1fr; } }
.su-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-dim, #475569);
}
.su-fields label input { font-weight: 400; }
.su-wide { grid-column: 1 / -1; }

.su-rule { border: none; border-top: 1px solid var(--line, #e2e8f0); margin: 28px 0 20px; }

.sec-advanced-note { color: var(--ink-5, #94a3b8); }