:root {
  color-scheme: light;
  --ink: #2f2536;
  /* #5c4f6a lifts muted body text to ~7:1 on the paper surface (was #6b5d76,
     ~6:1) so it clears WCAG AA with margin in both themes. */
  --muted: #5c4f6a;
  --line: #dacde8;
  --soft: #f5effb;
  --paper: #fffaff;
  --rose: #b879b8;
  --rose-dark: #7f4d90;
  /* Fill for solid accent controls (white text sits on it). Split from --rose-dark
     because that token doubles as accent *text*, which must lighten in dark mode
     while a filled button must stay saturated enough for white text. */
  --accent-solid: #7f4d90;
  --teal: #78aeb1;
  --gold: #c69c65;
  --leaf: #8bab7c;
  --blue: #a9c7ee;
  --mint: #c8e7cf;
  --lilac: #d8b9ed;
  --shadow: 0 16px 36px rgba(120, 82, 74, 0.14);
  --shadow-soft: 0 9px 20px rgba(120, 82, 74, 0.12);
  /* Surface tints. The *-rgb tokens hold only the channels, so every rule keeps
     its own alpha while the base colour follows the theme (see tokenize note in
     the dark block below). Semantic callout tints (warm/danger/success) stay
     light in dark mode so the accent text painted on them stays legible. */
  --page-bg: #fbf1de;
  --page-grad-1: #f9f2e4;
  --page-grad-2: #f5ecdb;
  --surface-rgb: 255, 255, 255;
  --surface-warm-rgb: 255, 247, 229;
  --tint-danger-rgb: 255, 235, 239;
  --tint-success-rgb: 247, 252, 244;
  --surface: rgba(var(--surface-rgb), 0.9);
  --surface-strong: rgba(var(--surface-rgb), 0.96);
  --surface-soft: rgba(var(--surface-rgb), 0.78);
  --card-line: rgba(151, 93, 165, 0.18);
  --warm-line: rgba(219, 151, 179, 0.2);
  --input-bg: var(--input-bg);
  --chart-cell: var(--chart-cell);
  --chart-cell-line: var(--chart-cell-line);
  --code-bg: var(--code-bg);
}

/* Dark theme. `--surface-rgb` and the page tokens flip to a deep warm-plum set
   that keeps the brand's purple character; text tokens flip to light so contrast
   stays AA. Applied two ways: the media query is the no-flash default for a dark
   OS (CSP forbids an inline theme script), and [data-theme] is the manual toggle
   overriding it. The token list is intentionally duplicated across the two
   selectors — they can't share a rule across the media boundary. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f1e9f4;
  --muted: #b9abc6;
  --line: #382c46;
  --soft: #241c2e;
  --paper: #221a2b;
  --rose: #cf93cf;
  --rose-dark: #d9a8e0;
  --accent-solid: #9257a8;
  --teal: #8fc7ca;
  --gold: #d8b483;
  --leaf: #a4c495;
  --blue: #a9c7ee;
  --mint: #bfe0c8;
  --lilac: #d8b9ed;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.42);
  --page-bg: #17121d;
  --page-grad-1: #1a1420;
  --page-grad-2: #14101a;
  --surface-rgb: 45, 37, 55;
  --card-line: rgba(216, 185, 237, 0.16);
  --warm-line: rgba(216, 168, 140, 0.22);
  --input-bg: #251d31;
  --chart-cell: #241d30;
  --chart-cell-line: #453a52;
  --code-bg: #2e2440;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #f1e9f4;
    --muted: #b9abc6;
    --line: #382c46;
    --soft: #241c2e;
    --paper: #221a2b;
    --rose: #cf93cf;
    --rose-dark: #d9a8e0;
  --accent-solid: #9257a8;
    --teal: #8fc7ca;
    --gold: #d8b483;
    --leaf: #a4c495;
    --blue: #a9c7ee;
    --mint: #bfe0c8;
    --lilac: #d8b9ed;
    --shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.42);
    --page-bg: #17121d;
    --page-grad-1: #1a1420;
    --page-grad-2: #14101a;
    --surface-rgb: 45, 37, 55;
    --card-line: rgba(216, 185, 237, 0.16);
    --warm-line: rgba(216, 168, 140, 0.22);
    --input-bg: #251d31;
    --chart-cell: #241d30;
    --chart-cell-line: #453a52;
    --code-bg: #2e2440;
  }
}

* {
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  /* clip, not hidden: iOS Safari still lets wide content pan the page (and lets
     scripts set scrollLeft) under overflow-x: hidden. */
  overflow-x: clip;
  color: var(--ink);
  background: var(--page-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
  overflow-x: clip;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 16% 12%, rgba(216, 185, 237, 0.16), transparent 40%),
    radial-gradient(circle at 86% 8%, rgba(169, 199, 238, 0.14), transparent 42%),
    radial-gradient(circle at 82% 90%, rgba(200, 231, 207, 0.16), transparent 44%),
    radial-gradient(circle at 8% 84%, rgba(198, 156, 101, 0.1), transparent 40%),
    linear-gradient(180deg, var(--page-grad-1), var(--page-grad-2));
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  /* fine woven-fabric texture, very low contrast */
  background:
    repeating-linear-gradient(45deg, rgba(127, 77, 144, 0.035) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(-45deg, rgba(127, 77, 144, 0.03) 0 1px, transparent 1px 11px),
    linear-gradient(180deg, rgba(var(--surface-rgb), 0.12), rgba(var(--surface-rgb), 0.05));
  pointer-events: none;
}

.crochet-motif {
  position: fixed;
  z-index: -1;
  width: 168px;
  aspect-ratio: 1;
  opacity: 0.16;
  border: 1px solid rgba(127, 77, 144, 0.24);
  background:
    linear-gradient(90deg, transparent 47%, rgba(127, 77, 144, 0.36) 47% 53%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(127, 77, 144, 0.28) 47% 53%, transparent 53%),
    repeating-linear-gradient(45deg, rgba(127, 77, 144, 0.12) 0 2px, transparent 2px 18px),
    rgba(var(--surface-rgb), 0.38);
  box-shadow: inset 0 0 0 14px rgba(var(--surface-rgb), 0.5), inset 0 0 0 28px rgba(120, 174, 177, 0.08);
  transform: rotate(8deg);
  pointer-events: none;
}

.motif-one {
  top: 86px;
  right: -44px;
}

.motif-two {
  left: -36px;
  bottom: 24px;
  width: 128px;
  transform: rotate(-13deg);
}

.yarn-strand {
  position: fixed;
  top: 104px;
  left: 24px;
  z-index: -1;
  width: min(620px, 72vw);
  height: 122px;
  border-top: 2px solid rgba(127, 77, 144, 0.16);
  border-radius: 50%;
  transform: rotate(-3deg);
  pointer-events: none;
}

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

button,
select,
input,
textarea {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--paper);
  color: var(--ink);
}

/* Warm the editable fields toward the cream family (yarn-forward polish). */
select,
input,
textarea {
  background: var(--input-bg);
}

button {
  min-height: 38px;
  padding: 0 14px;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

button:hover {
  border-color: var(--rose);
  transform: translateY(-1px);
}

button:disabled,
button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}

button:disabled:hover,
button[aria-disabled="true"]:hover {
  border-color: var(--line);
  transform: none;
}

button.primary {
  color: #fff;
  background: var(--accent-solid);
  border-color: var(--accent-solid);
}

button.primary:disabled,
button.primary[aria-disabled="true"] {
  color: #716678;
  background: #d9d1de;
  border-color: #c8bdcf;
  box-shadow: none;
}

button.primary:disabled:hover,
button.primary[aria-disabled="true"]:hover {
  background: #d9d1de;
  border-color: #c8bdcf;
}

button.active,
.tab.active {
  color: #fff;
  background: #8d66a4;
  border-color: #8d66a4;
}

input,
select,
textarea {
  width: 100%;
  padding: 10px 11px;
}

textarea {
  resize: vertical;
}

.topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px clamp(16px, 4vw, 38px);
  text-shadow: 0 1px 0 rgba(var(--surface-rgb), 0.72);
  min-height: 60px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.topbar-utilities {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 12px;
  min-width: 0;
  margin-left: auto;
}

.brand-logo {
  display: block;
  width: clamp(100px, 12vw, 160px);
  height: auto;
  margin: 0;
  object-fit: contain;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(0.82rem, 1.1vw, 1rem);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--ink);
}

.brand-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.72rem, 0.85vw, 0.82rem);
  line-height: 1.2;
  font-weight: 700;
}

h2 {
  margin-bottom: 0;
  font-size: 1rem;
}

.project-actions,
.tabs,
.zoom-controls,
.written-actions,
.comfort-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.comfort-controls {
  justify-content: flex-end;
  min-width: 0;
}

.comfort-select-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.comfort-select-label select {
  width: auto;
  min-width: 98px;
  max-width: 128px;
  min-height: 34px;
  padding: 5px 26px 5px 9px;
  font-size: 0.82rem;
}

.keep-awake-toggle {
  white-space: nowrap;
}

.keep-awake-toggle[aria-pressed="true"] {
  color: #fff;
  background: #8d66a4;
  border-color: #8d66a4;
}

.comfort-status {
  min-width: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 18px;
  padding: 0 clamp(16px, 4vw, 38px) 30px;
}

.mobile-app-nav {
  display: none;
}

.mobile-app-nav-button {
  min-width: 0;
}

body[data-focus-mode="written"] .app-shell,
body[data-focus-mode="diagram"] .app-shell {
  grid-template-columns: minmax(0, 1fr);
}

body[data-focus-mode="written"] .sidebar,
body[data-focus-mode="diagram"] .sidebar {
  display: none;
}

.sidebar,
.workspace {
  min-width: 0;
}

.sidebar {
  display: grid;
  gap: 14px;
  align-content: start;
}

.panel {
  position: relative;
  /* clip, not hidden: hidden boxes are still programmatically scrollable, so a
     scrollIntoView/focus inside the card silently shifts its content up and the
     heading gets cut off at the card edge. clip cannot scroll. */
  overflow: clip;
  /* Required by the line above, not optional tidying. `hidden` made this card a
     scroll container, which collapses its min-content contribution to zero;
     `clip` does not, so as a grid item its automatic minimum became the widest
     thing inside it — a 880px chart pushed the card to 936px in a 390px
     viewport, carrying "Edit text" and the text-size select off screen. The
     html/body overflow-x: clip then swallowed the overflow, so there was no
     scrollbar to notice and no way to reach them. The chart still scrolls
     inside .chart-host. */
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 16px;
  backdrop-filter: blur(10px) saturate(1.04);
}

.panel::before {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 90px;
  aspect-ratio: 1;
  opacity: 0.07;
  border: 1px solid rgba(184, 121, 184, 0.52);
  border-radius: 36% 0 0 0;
  background:
    radial-gradient(circle at 100% 100%, rgba(255, 120, 158, 0.24), transparent 46%),
    repeating-linear-gradient(45deg, rgba(127, 77, 144, 0.5) 0 1px, transparent 1px 10px),
    rgba(var(--surface-rgb), 0.5);
  box-shadow: inset 0 0 0 12px rgba(var(--surface-rgb), 0.58);
  pointer-events: none;
}

.panel > * {
  position: relative;
}

.reader.panel {
  overflow: visible;
}

.reader.panel::before,
.diagram.panel::before,
.import-review.panel::before,
.website-import.panel::before,
.saved-library-dialog.panel::before {
  opacity: 0.08;
}

.panel-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px dashed rgba(184, 121, 184, 0.35);
}

.panel-heading > div {
  min-width: 0;
}

.panel-heading h2 {
  margin-right: auto;
}

.panel-heading-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.chart-heading-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.status {
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

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

#importStatus.is-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rose-dark);
}

#importStatus.is-loading::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: rowline-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  #importStatus.is-loading::before {
    animation-duration: 2.4s;
  }
}

.zoom-field {
  display: grid;
  grid-template-columns: auto 74px;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.zoom-field input {
  min-height: 38px;
  padding: 6px 8px;
  text-align: center;
}

.field-label {
  display: block;
  margin: 14px 0 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.details-header {
  margin-top: 18px;
  display: flex;
  align-items: center;
}

.details-body {
  display: grid;
  gap: 0;
}

.details-body[hidden] {
  display: none;
}

.details-grid {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.details-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.details-cleanup-tools {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  border: 1px dashed rgba(127, 77, 144, 0.2);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.54);
}

.details-cleanup-help,
.details-cleanup-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.details-cleanup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.details-cleanup-actions .compact-button {
  min-height: 34px;
  padding: 6px 10px;
  white-space: nowrap;
}

.diagnostics-panel {
  padding: 0;
}

.diagnostics-panel details {
  padding: 14px 16px;
}

.diagnostics-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 850;
  list-style: none;
}

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

.diagnostics-panel summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(127, 77, 144, 0.22);
  border-radius: 999px;
  color: var(--accent);
  font-weight: 900;
}

.diagnostics-panel details[open] summary::after {
  content: "-";
}

.diagnostics-content {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  max-height: 62vh;
  overflow: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.diagnostic-section {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(127, 77, 144, 0.16);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.74);
}

.diagnostic-section h3,
.row-preview h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.2;
}

.diagnostic-list {
  display: grid;
  gap: 7px;
  margin: 0;
}

.diagnostic-list div {
  display: grid;
  gap: 2px;
}

.diagnostic-list dt,
.page-classification small,
.diagnostic-muted {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.lazy-placeholder {
  margin: 8px 0;
}

.diagnostic-list dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.page-classification-list,
.row-preview {
  display: grid;
  gap: 7px;
}

.page-classification,
.row-preview article {
  display: grid;
  gap: 3px;
  padding: 8px;
  border-radius: 7px;
  background: rgba(var(--surface-rgb), 0.82);
}

.page-classification strong,
.row-preview strong {
  color: var(--accent);
  font-size: 0.76rem;
}

.page-classification span,
.row-preview p {
  margin: 0;
  color: var(--ink);
  font-size: 0.76rem;
  line-height: 1.35;
}

.diagnostic-pill-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.diagnostic-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
}

.diagnostic-pill.found {
  color: #315f3b;
  background: rgba(158, 197, 143, 0.2);
  border: 1px solid rgba(76, 131, 86, 0.24);
}

.diagnostic-pill.missing {
  color: #7d4e13;
  background: rgba(217, 176, 92, 0.18);
  border: 1px solid rgba(183, 126, 27, 0.22);
}

.diagnostic-bullets {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 16px;
  color: var(--ink);
  font-size: 0.76rem;
  line-height: 1.35;
}

.raw-diagnostics summary {
  justify-content: flex-start;
  color: var(--muted);
  font-size: 0.76rem;
}

.raw-diagnostics summary::after {
  display: none;
}

.raw-diagnostics pre {
  max-height: 280px;
  overflow: auto;
  margin: 8px 0 0;
  padding: 10px;
  border-radius: 7px;
  background: rgba(46, 35, 55, 0.06);
  color: var(--ink);
  font-size: 0.68rem;
  line-height: 1.35;
  white-space: pre-wrap;
}

.import-review-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(44, 34, 54, 0.72);
  backdrop-filter: blur(10px);
}

.import-review-overlay[hidden] {
  display: none;
}

.import-review {
  box-sizing: border-box;
  width: min(1120px, 100%);
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  min-width: 0;
  min-height: 300px;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  overflow: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 18px;
  resize: both;
}

.import-review * {
  min-width: 0;
}

.import-review input,
.import-review select,
.import-review textarea,
.import-review button {
  box-sizing: border-box;
}

.review-summary {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.review-status-card {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 14px;
  border: 1px solid rgba(184, 123, 31, 0.28);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(var(--surface-warm-rgb), 0.96), rgba(var(--surface-rgb), 0.88));
  box-shadow: 0 10px 24px rgba(83, 50, 94, 0.1);
}

.review-status-card[hidden] {
  display: none;
}

.review-status-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.review-status-card-heading > div {
  min-width: 0;
}

.review-status-card-heading span {
  display: block;
  color: var(--ink);
  font-size: 1.04rem;
  font-weight: 900;
}

.review-status-heading-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.review-status-card-heading strong {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(184, 123, 31, 0.16);
  color: #7a4a00;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.review-status-compact {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
}

.review-status-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.42;
}

.review-status-details {
  display: grid;
  gap: 10px;
}

.review-status-details[hidden] {
  display: none;
}

.review-status-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.review-status-facts div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(127, 77, 144, 0.14);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.72);
}

.review-status-facts dt {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.review-status-facts dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.review-next-steps {
  display: grid;
  gap: 6px;
  padding-top: 2px;
}

.review-next-steps strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.review-next-steps ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 16px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.review-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  width: fit-content;
  margin-bottom: 12px;
  padding: 5px;
  border: 1px solid rgba(127, 77, 144, 0.18);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.8);
}

.review-tab {
  min-height: 34px;
  padding: 7px 12px;
}

.review-source-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.review-source-details {
  border: 1px solid rgba(127, 77, 144, 0.16);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.72);
}

.review-source-details > summary {
  cursor: pointer;
  padding: 8px 10px;
  color: var(--purple-700);
  font-size: 0.78rem;
  font-weight: 800;
}

.review-source-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 8px;
  padding: 0 8px 8px;
}

.review-source-quick {
  display: grid;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid rgba(127, 77, 144, 0.14);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.72);
}

.review-source-quick strong {
  color: var(--ink);
  font-size: 0.8rem;
}

.review-source-quick ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.review-source-quick li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.review-source-quick span,
.review-source-quick em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.review-source-quick span {
  font-weight: 800;
}

.review-source-quick em {
  color: var(--purple-700);
  font-style: normal;
}

.review-chart-source-cta {
  border-color: rgba(127, 77, 144, 0.32);
  background: linear-gradient(135deg, rgba(var(--surface-rgb), 0.96), rgba(var(--surface-rgb), 0.82));
}

.review-chart-source-cta.selectable {
  border-color: rgba(127, 77, 144, 0.46);
  box-shadow: 0 12px 28px rgba(83, 50, 94, 0.08);
}

.review-chart-source-cta.selected {
  border-color: rgba(96, 139, 71, 0.38);
  background: rgba(var(--tint-success-rgb), 0.92);
}

.review-chart-source-cta.blocked {
  border-color: rgba(184, 123, 31, 0.36);
  background: rgba(var(--surface-warm-rgb), 0.78);
}

.review-chart-source-cta.nudge {
  border-color: rgba(127, 77, 144, 0.6);
  border-width: 2px;
  box-shadow: 0 14px 32px rgba(83, 50, 94, 0.14);
  background: linear-gradient(135deg, rgba(var(--surface-rgb), 0.98), rgba(var(--surface-rgb), 0.85));
}

.review-chart-source-cta-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.review-chart-source-cta-heading > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.review-chart-source-cta-heading span {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.review-chart-source-cta-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.review-chart-source-cta-actions .compact-button {
  white-space: nowrap;
}

.review-chart-source-blocker {
  grid-column: 1 / -1;
}

.source-card {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(127, 77, 144, 0.16);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.82);
}

.source-card strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink);
  font-size: 0.78rem;
}

.source-badge {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(127, 77, 144, 0.16);
  color: var(--purple-700);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.source-badge.caution {
  background: rgba(184, 123, 31, 0.18);
  color: #7a4a00;
}

.source-card .source-choice {
  color: var(--purple-700);
  font-weight: 800;
  font-size: 0.76rem;
}

.source-card .source-note,
.source-card .source-feeds {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.3;
}

.source-card .source-feeds {
  color: rgba(47, 36, 55, 0.76);
  font-weight: 700;
}

.source-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.source-card-actions .compact-button {
  width: fit-content;
  max-width: 100%;
  white-space: normal;
}

.source-card.selected {
  border-color: rgba(127, 77, 144, 0.34);
  background: rgba(var(--surface-rgb), 0.84);
}

.source-card[data-source-kind="recommendation"] {
  border-color: rgba(127, 77, 144, 0.42);
  background: linear-gradient(135deg, rgba(var(--surface-rgb), 0.96), rgba(var(--surface-rgb), 0.76));
}

.source-card.supporting {
  background: rgba(var(--surface-rgb), 0.7);
}

.source-card.warning {
  border-color: rgba(184, 123, 31, 0.36);
  background: rgba(var(--surface-warm-rgb), 0.78);
}

.chart-source-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(44, 34, 54, 0.52);
  backdrop-filter: blur(8px);
}

.chart-source-confirm-dialog {
  box-sizing: border-box;
  width: min(620px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 18px;
}

.chart-source-confirm-facts {
  display: grid;
  gap: 6px;
  margin: 14px 0;
  padding-left: 20px;
  color: var(--ink);
}

.review-website-cleanup {
  margin: 0 0 12px;
}

.review-website-cleanup[hidden] {
  display: none;
}

.website-cleanup-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(127, 77, 144, 0.18);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.78);
}

.website-cleanup-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.website-cleanup-heading strong {
  color: var(--ink);
  font-size: 0.86rem;
}

.website-cleanup-heading p,
.website-cleanup-review-grid p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.website-cleanup-heading span {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(127, 77, 144, 0.14);
  color: var(--purple-700);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.website-cleanup-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
  margin: 0;
}

.website-cleanup-facts div,
.website-cleanup-review-grid details {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(127, 77, 144, 0.13);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.72);
}

.website-cleanup-facts dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.website-cleanup-facts dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 0.76rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.website-cleanup-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.website-cleanup-review-grid summary {
  cursor: pointer;
  color: var(--purple-700);
  font-size: 0.76rem;
  font-weight: 800;
}

.website-cleanup-review-grid pre {
  max-height: 180px;
  margin: 8px 0 0;
  padding: 8px;
  overflow: auto;
  border-radius: 6px;
  background: rgba(var(--surface-rgb), 0.9);
  color: var(--ink);
  font-size: 0.72rem;
  white-space: pre-wrap;
}

.website-cleanup-review-grid ul {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.website-cleanup-review-grid li {
  display: grid;
  gap: 5px;
  color: var(--ink);
  font-size: 0.73rem;
}

.website-cleanup-review-grid li span {
  color: var(--purple-700);
  font-weight: 800;
}

.website-cleanup-review-grid li em {
  color: var(--muted);
  font-style: normal;
  overflow-wrap: anywhere;
}

.website-cleanup-empty {
  padding: 8px;
  border-radius: 6px;
  background: rgba(var(--surface-rgb), 0.74);
}

.manual-row-lazy-placeholder {
  margin: 8px 0 0;
  padding: 8px;
  border-radius: 6px;
  background: rgba(var(--surface-rgb), 0.78);
  color: var(--muted);
  font-size: 0.74rem;
}

.website-quarantine-state {
  width: fit-content;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(127, 77, 144, 0.12);
  color: var(--purple-700);
  font-size: 0.64rem;
  font-weight: 800;
}

.website-quarantine-state[data-quarantine-state="notes"],
.website-quarantine-state[data-quarantine-state="editor"] {
  background: rgba(74, 132, 90, 0.16);
  color: #32613d;
}

.website-quarantine-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.website-quarantine-actions .compact-button {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 0.7rem;
}

.review-pane {
  min-height: 0;
  min-width: 0;
  display: none;
  overflow: auto;
  position: relative;
}

.review-pane:not(.active) {
  display: none !important;
}

.review-pane.active {
  display: block;
  min-height: min(320px, 42vh);
}

.review-row-warnings {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #ead5a8;
  border-radius: 8px;
  background: rgba(var(--surface-warm-rgb), 0.96);
  color: #503915;
}

.review-row-warnings[hidden] {
  display: none;
}

.review-row-warnings-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.review-row-warnings h4,
.review-row-warnings p {
  margin: 0;
}

.review-row-warnings-heading span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(138, 90, 24, 0.14);
  color: #6f4813;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.review-row-warning-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.review-row-warning {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(138, 90, 24, 0.22);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.72);
  overflow-wrap: anywhere;
}

.review-row-warning strong {
  color: #7a4f15;
}

.review-row-warning small {
  color: var(--muted);
  line-height: 1.35;
}

.review-row-warning-evidence {
  display: grid;
  gap: 3px;
  margin-top: 4px;
  padding: 7px 8px;
  border: 1px solid rgba(122, 79, 21, 0.16);
  border-radius: 6px;
  background: rgba(var(--surface-rgb), 0.86);
}

.review-row-warning-evidence span {
  color: #6f4813;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.review-row-warning-evidence em {
  color: #503915;
  font-size: 0.78rem;
  font-style: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.review-row-warning-evidence[data-warning-evidence-status="unavailable"] {
  border-style: dashed;
  background: rgba(var(--surface-rgb), 0.58);
}

.review-row-warning-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.review-row-warning-actions .compact-button {
  min-height: 30px;
  padding: 5px 9px;
  border-color: rgba(122, 79, 21, 0.22);
  background: rgba(var(--surface-rgb), 0.78);
  color: #503915;
  font-size: 0.72rem;
}

.review-row-warning-actions .compact-button:hover,
.review-row-warning-actions .compact-button:focus-visible {
  border-color: rgba(122, 79, 21, 0.42);
  background: rgba(var(--surface-warm-rgb), 0.9);
}

.website-import-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(44, 34, 54, 0.42);
  backdrop-filter: blur(6px);
}

.website-import-overlay[hidden] {
  display: none;
}

.insert-row-overlay,
.supporting-section-overlay,
.delete-row-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(44, 34, 54, 0.42);
  backdrop-filter: blur(6px);
}

.insert-row-overlay[hidden],
.supporting-section-overlay[hidden],
.delete-row-overlay[hidden] {
  display: none;
}

.insert-row-dialog,
.supporting-section-dialog,
.delete-row-dialog {
  width: min(620px, 100%);
  max-height: min(720px, calc(100vh - 40px));
  overflow: auto;
  padding: 18px;
}

.insert-row-fields,
.supporting-section-fields,
.delete-row-fields {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.insert-row-placement,
.supporting-section-type {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(151, 93, 165, 0.18);
  border-radius: 7px;
  background: rgba(var(--surface-rgb), 0.76);
}

.insert-row-placement legend,
.supporting-section-type legend {
  padding: 0 4px;
  font-weight: 800;
}

.insert-row-placement label,
.supporting-section-type label {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--text);
}

.insert-row-textarea,
.supporting-section-textarea {
  min-height: 112px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  line-height: 1.5;
}

.delete-row-preview {
  min-height: 96px;
  max-height: 220px;
  overflow: auto;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(151, 93, 165, 0.18);
  border-radius: 7px;
  background: rgba(var(--surface-rgb), 0.88);
  color: var(--text);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  line-height: 1.5;
  white-space: pre-wrap;
}

button.danger {
  color: #fff;
  background: #8a3450;
  border-color: #8a3450;
}

button.danger:disabled,
button.danger[aria-disabled="true"] {
  color: #716678;
  background: #d9d1de;
  border-color: #c8bdcf;
  box-shadow: none;
}

.website-import {
  width: min(900px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  padding: 18px;
}

.dialog-close-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  margin-left: auto;
}

.dialog-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
}

.website-import-fields {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.field-help {
  margin: -2px 0 4px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.35;
}

.review-beta-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.website-url-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.clean-export-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(44, 34, 54, 0.42);
  backdrop-filter: blur(6px);
}

.clean-export-overlay[hidden] {
  display: none;
}

.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(44, 34, 54, 0.42);
  backdrop-filter: blur(6px);
}

.welcome-overlay[hidden] {
  display: none;
}

.welcome-card {
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
}

.welcome-steps {
  display: grid;
  gap: 10px;
  margin: 14px 0 12px;
  padding-left: 22px;
}

.welcome-steps li {
  line-height: 1.45;
}

.welcome-steps strong {
  color: var(--ink);
}

.welcome-note {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* The welcome card deliberately avoids .review-actions: mobile styles pin that
   bar fixed to the viewport for the full-screen import review, which is wrong
   inside this small centered dialog. */
.welcome-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(127, 77, 144, 0.14);
}

.welcome-card .panel-heading {
  flex-wrap: nowrap;
  align-items: flex-start;
}

/* Sits above the import review overlay (z-index 30), which is where the "Add a
   note" path opens this dialog from. */
.feedback-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(44, 34, 54, 0.42);
  backdrop-filter: blur(6px);
}

.feedback-overlay[hidden] {
  display: none;
}

.feedback-dialog {
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
}

.feedback-dialog .panel-heading {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.feedback-address {
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.feedback-body {
  max-height: 220px;
  margin: 0 0 12px;
  padding: 10px 12px;
  overflow: auto;
  border: 1px solid rgba(127, 77, 144, 0.16);
  border-radius: 10px;
  background: rgba(var(--surface-rgb), 0.7);
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* See the note in index.html: this intentionally does not reuse .review-actions. */
.feedback-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(127, 77, 144, 0.14);
}

.feedback-status {
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.feedback-action-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

/* This is an <a>, not a <button>: the base button chrome and `button.primary`
   are both element-scoped selectors, so it restates them to sit level with the
   copy buttons beside it. */
.feedback-mail-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--accent-solid);
  border-radius: 11px;
  background: var(--accent-solid);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.feedback-mail-link:hover {
  transform: translateY(-1px);
}

.feedback-link {
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex: 0 0 auto;
  border: 1px solid rgba(127, 77, 144, 0.24);
  border-radius: 999px;
  background: rgba(var(--surface-rgb), 0.88);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.feedback-link:hover {
  border-color: rgba(127, 77, 144, 0.44);
}

.import-box.import-box-welcome-pulse {
  animation: import-box-welcome-pulse 1.4s ease-out 2;
}

@keyframes import-box-welcome-pulse {
  0% { box-shadow: 0 0 0 0 rgba(151, 93, 165, 0.55); }
  100% { box-shadow: 0 0 0 14px rgba(151, 93, 165, 0); }
}

.clean-export {
  width: min(900px, 100%);
  max-height: min(820px, calc(100vh - 40px));
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 12px;
  overflow: hidden;
  padding: 18px;
}

.clean-export-heading {
  align-items: start;
}

.clean-export-warning {
  padding: 10px 12px;
  border: 1px solid rgba(170, 105, 48, 0.28);
  border-radius: 8px;
  background: rgba(var(--surface-warm-rgb), 0.86);
  color: #6f4b1f;
  font-size: 0.88rem;
  line-height: 1.35;
}

.clean-export-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
  cursor: pointer;
}

.clean-export-option input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
  min-width: 18px;
  height: 18px;
  margin: 1px 0 0;
}

.clean-export-option span {
  min-width: 0;
}

.clean-export-print-area {
  min-height: 0;
  overflow: auto;
  border: 1px solid rgba(127, 77, 144, 0.16);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.78);
}

.clean-export-print-warning {
  display: none;
}

.clean-export-output {
  min-height: 360px;
  margin: 0;
  padding: 16px;
  color: var(--ink);
  font: 0.92rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.clean-export-actions {
  margin-top: 0;
}

.website-import-fields input,
.website-source-textarea {
  width: 100%;
  border: 1px solid rgba(141, 99, 163, 0.35);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--ink);
  font: inherit;
  padding: 10px;
}

.website-source-textarea {
  min-height: 300px;
  resize: vertical;
  line-height: 1.38;
}

.website-import .status {
  display: block;
  max-width: 100%;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

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

.review-source-textarea,
.review-grid-preview {
  width: 100%;
  min-height: 118px;
  max-height: 190px;
  overflow: auto;
  border: 1px solid rgba(127, 77, 144, 0.22);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--ink);
  font: inherit;
  line-height: 1.38;
  padding: 10px;
}

.review-source-textarea {
  resize: vertical;
}

.review-grid-preview {
  white-space: pre;
  font-size: 0.74rem;
}

.review-grid-preview-visual {
  display: block;
  margin-bottom: 8px;
}

.review-grid-preview-visual svg {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  image-rendering: pixelated;
  border: 1px solid rgba(127, 77, 144, 0.22);
  border-radius: 4px;
  background: var(--surface-strong);
}

.review-grid-preview-values {
  display: block;
  white-space: pre;
}

.review-final-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.review-guardrail {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(184, 123, 31, 0.36);
  border-radius: 8px;
  background: rgba(var(--surface-warm-rgb), 0.88);
  color: #65420a;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.review-guardrail[hidden] {
  display: none;
}

.review-chart-provenance {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(123, 79, 168, 0.3);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.9);
  color: #4a2f63;
}

.review-chart-provenance[hidden] {
  display: none;
}

.review-chart-provenance-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.review-chart-provenance-head strong {
  font-size: 0.86rem;
}

.review-chart-provenance-note {
  margin: 6px 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #5a4272;
}

.review-chart-provenance-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.review-chart-provenance-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(123, 79, 168, 0.14);
  color: #4a2f63;
  font-size: 0.72rem;
  font-weight: 700;
}

.review-chart-provenance-preview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 10px;
}

.review-chart-preview-svg {
  max-width: 100%;
  height: auto;
  max-height: 240px;
  border: 1px solid rgba(123, 79, 168, 0.28);
  border-radius: 4px;
  background: var(--chart-cell);
  image-rendering: pixelated;
}

.review-chart-provenance-preview-cap {
  font-size: 0.7rem;
  color: #5a4272;
  font-weight: 600;
}

.review-ocr-prompt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(127, 77, 144, 0.28);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.9);
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.35;
}

.review-ocr-prompt[hidden] {
  display: none;
}

.review-ocr-prompt strong {
  color: var(--purple);
}

.review-ocr-prompt p {
  margin: 4px 0 0;
}

.review-ocr-pages {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(127, 77, 144, 0.16);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.64);
}

.review-ocr-pages[hidden] {
  display: none;
}

.review-ocr-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 800;
}

.review-ocr-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inline-button {
  padding: 4px 8px;
  min-height: 0;
  font-size: 0.74rem;
}

.review-ocr-page-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.review-ocr-page-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid rgba(127, 77, 144, 0.22);
  border-radius: 999px;
  background: rgba(var(--surface-rgb), 0.86);
  font-size: 0.76rem;
  white-space: nowrap;
}

/* Global `input { width: 100% }` (see ~line 177) otherwise stretches the
   checkbox to fill its flex share, starving the label and clipping the text. */
.review-ocr-page-option input {
  flex: 0 0 auto;
  width: auto;
}

.review-ocr-page-option.suggested {
  border-color: rgba(184, 123, 31, 0.42);
  background: rgba(var(--surface-warm-rgb), 0.88);
}

.review-ocr-result-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 8px;
  padding: 8px 10px;
  color: var(--muted);
  background: rgba(var(--surface-rgb), 0.82);
  border: 1px solid rgba(151, 93, 165, 0.16);
  border-radius: 8px;
}

.review-ocr-result-summary span {
  flex: 1 1 240px;
  min-width: 0;
}

.review-ocr-result-details {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  padding: 8px 10px;
  color: var(--muted);
  background: rgba(var(--surface-rgb), 0.68);
  border: 1px dashed rgba(151, 93, 165, 0.24);
  border-radius: 8px;
}

.review-ocr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.review-ocr-actions .compact-button {
  width: auto;
  flex: 0 1 auto;
  text-align: center;
  white-space: normal;
  line-height: 1.3;
  padding: 8px 14px;
}

/* Stack the OCR actions full-width on narrow/mobile widths. */
@media (max-width: 640px) {
  .review-ocr-actions .compact-button {
    width: 100%;
    flex: 1 1 100%;
  }
}

.review-setup-context {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(127, 77, 144, 0.2);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.86);
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.35;
}

.review-setup-context[hidden] {
  display: none;
}

.review-setup-context h4 {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.78rem;
}

.review-setup-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.review-setup-heading h4 {
  margin: 0;
}

.review-setup-heading span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(127, 77, 144, 0.12);
  color: var(--purple);
  font-size: 0.72rem;
  font-weight: 900;
}

.review-setup-context p {
  margin: 4px 0;
}

.review-setup-context .review-setup-note {
  color: var(--muted);
}

.review-setup-context strong {
  color: var(--purple);
  font-weight: 800;
}

.review-setup-item {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding: 9px;
  border: 1px solid rgba(127, 77, 144, 0.16);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.72);
}

.review-setup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.review-setup-actions .compact-button {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 0.72rem;
}

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

.compact-button {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 0.78rem;
}

/* Review cards — prototype, only rendered under ?reviewCards=1. The textarea
   below is still the source of truth; these are a view onto its lines. */
.review-cards {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
}

/* display: grid above beats the UA stylesheet's [hidden] { display: none }, so
   without this the prototype shows for everyone rather than only under the
   flag. */
.review-cards[hidden] {
  display: none;
}

.review-cards-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.review-cards-summary {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.review-cards-list {
  display: grid;
  gap: 8px;
}

.review-card {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--card-line);
  border-radius: 10px;
  background: var(--surface-strong);
}

.review-card.flagged {
  border-color: var(--gold);
  background: rgba(198, 156, 101, 0.09);
}

.review-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.review-card-flag {
  min-height: 32px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.review-card.flagged .review-card-flag {
  border-color: var(--gold);
  color: var(--rose-dark);
}

.review-card-editor {
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
  overflow-wrap: anywhere;
  line-height: 1.45;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.7);
  color: var(--ink);
  font: inherit;
}

/* Text that carries no row label. Shown, not hidden: it is part of the import
   and the cards simply have nothing to say about it. */
.review-card-other {
  background: rgba(var(--surface-rgb), 0.5);
}

.review-card-kind {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.review-card-text {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-size: 0.82rem;
  line-height: 1.45;
}

.review-textarea[data-cards-hidden="true"] {
  display: none;
}

.review-textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: min(100%, 1120px);
  min-height: 520px;
  resize: vertical;
  overflow: auto;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  line-height: 1.45;
  font-family: inherit;
}

.review-visual-summary {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(184, 123, 31, 0.28);
  border-radius: 8px;
  background: rgba(var(--surface-warm-rgb), 0.86);
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.35;
  min-width: 0;
}

.review-visual-summary[hidden] {
  display: none;
}

.review-visual-summary p {
  margin: 0;
  color: var(--muted);
}

.review-visual-summary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin: 0;
}

.review-visual-summary dl div {
  min-width: 0;
}

.review-visual-summary dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.review-visual-summary dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.review-visual-disabled-note {
  color: #6b4210 !important;
  font-weight: 800;
}

.review-manual-completion {
  display: grid;
  gap: 10px;
  margin: 0 0 10px;
  padding: 12px;
  border: 1px solid rgba(127, 77, 144, 0.18);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.82);
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(83, 50, 94, 0.08);
}

.review-manual-completion[hidden] {
  display: none;
}

.manual-completion-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.manual-completion-heading strong {
  display: block;
  margin-bottom: 3px;
  font-size: 0.94rem;
}

.manual-completion-heading p,
.manual-completion-help {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.38;
}

.manual-completion-heading > span {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(127, 77, 144, 0.12);
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 900;
}

.manual-completion-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  margin: 0;
}

.manual-completion-facts div {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(127, 77, 144, 0.12);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.76);
}

.manual-completion-facts dt {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
}

.manual-completion-facts dd {
  margin: 2px 0 0;
  font-size: 0.82rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.manual-row-status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 106px;
  overflow: auto;
  padding-right: 2px;
}

.manual-row-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid rgba(127, 77, 144, 0.14);
  border-radius: 999px;
  background: rgba(var(--surface-rgb), 0.9);
  color: var(--muted);
  font-size: 0.72rem;
  white-space: normal;
}

.manual-row-status b {
  color: var(--ink);
}

.manual-row-status em {
  font-style: normal;
  font-weight: 800;
}

.manual-row-status small {
  display: block;
  max-width: 260px;
  color: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.manual-row-status.extracted {
  border-color: rgba(80, 133, 95, 0.24);
  background: rgba(var(--tint-success-rgb), 0.88);
}

.manual-row-status.manual {
  border-color: rgba(95, 121, 200, 0.28);
  background: rgba(var(--surface-rgb), 0.9);
}

.manual-row-status.missing,
.manual-row-status.needs-review {
  border-color: rgba(184, 123, 31, 0.28);
  background: rgba(var(--surface-warm-rgb), 0.92);
}

.manual-row-status.invalid {
  border-color: rgba(179, 58, 74, 0.36);
  background: rgba(var(--tint-danger-rgb), 0.94);
  color: #8b2635;
}

.manual-row-status.omitted {
  font-weight: 800;
}

.manual-completion-help code {
  color: var(--accent-strong);
  font-size: 0.75rem;
}

.manual-completion-large,
.manual-completion-categories {
  display: grid;
  gap: 10px;
}

.manual-completion-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
}

.manual-completion-nav label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.manual-jump-input {
  width: 104px;
  min-height: 34px;
  border: 1px solid rgba(127, 77, 144, 0.22);
  border-radius: 8px;
  padding: 6px 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.manual-row-category {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(127, 77, 144, 0.13);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.74);
}

.manual-row-category > strong {
  font-size: 0.84rem;
}

.manual-row-category > p,
.manual-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.38;
}

.manual-row-range-list,
.manual-row-entry-list {
  display: grid;
  gap: 8px;
}

.manual-row-range {
  border: 1px solid rgba(127, 77, 144, 0.15);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.86);
  overflow: hidden;
}

.manual-row-range summary {
  cursor: pointer;
  padding: 9px 10px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 900;
}

.manual-row-entry-list {
  padding: 0 10px 10px;
}

.manual-row-entry {
  display: grid;
  gap: 6px;
  padding: 9px;
  border: 1px solid rgba(127, 77, 144, 0.12);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.9);
}

.manual-row-entry label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 900;
}

.manual-row-entry label em {
  color: var(--muted);
  font-style: normal;
  font-size: 0.72rem;
}

.manual-row-entry textarea {
  width: 100%;
  min-height: 58px;
  resize: vertical;
  border: 1px solid rgba(127, 77, 144, 0.18);
  border-radius: 8px;
  padding: 8px;
  color: var(--ink);
  font: inherit;
  line-height: 1.35;
}

.manual-row-source-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.35;
}

.manual-row-feedback {
  margin: 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.86);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.35;
}

.manual-row-feedback.valid,
.manual-row-feedback.calculated {
  background: rgba(var(--tint-success-rgb), 0.9);
  color: #3f744a;
}

.manual-row-feedback.under,
.manual-row-feedback.over {
  background: rgba(var(--surface-warm-rgb), 0.95);
  color: #8a5a12;
}

.manual-row-feedback.unknown,
.manual-row-feedback.mismatch {
  background: rgba(var(--tint-danger-rgb), 0.94);
  color: #8b2635;
}

.manual-row-entry-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.manual-row-entry-actions small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
}

.review-source-reference {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(127, 77, 144, 0.16);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.82);
}

.source-reference-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.source-reference-heading > div {
  min-width: min(260px, 100%);
  flex: 1 1 260px;
}

.source-reference-heading strong {
  display: block;
  color: var(--ink);
  font-size: 0.9rem;
}

.source-reference-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.source-reference-open {
  flex: 0 0 auto;
  text-decoration: none;
  white-space: nowrap;
}

.source-reference-unavailable {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.source-reference-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 8px;
  margin: 0;
}

.source-reference-facts div {
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.74);
  min-width: 0;
}

.source-reference-facts dt {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.source-reference-facts dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.review-reference-stack {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.review-source-before-editor {
  margin: 0 0 10px;
}

.review-reference {
  border: 1px solid rgba(127, 77, 144, 0.18);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.76);
  overflow: hidden;
}

.review-reference summary {
  cursor: pointer;
  padding: 9px 10px;
  color: var(--muted);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.review-reference[open] summary {
  border-bottom: 1px solid rgba(127, 77, 144, 0.14);
}

.review-reference .review-source-textarea,
.review-reference .review-grid-preview {
  border: 0;
  border-radius: 0;
  background: rgba(var(--surface-rgb), 0.7);
}

.review-details {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  padding-right: 4px;
}

.review-details-empty {
  grid-column: 1 / -1;
  padding: 14px;
  border: 1px dashed rgba(127, 77, 144, 0.24);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.68);
  color: var(--muted);
}

.review-details-empty strong {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
}

.review-details-empty p {
  margin: 4px 0 0;
  line-height: 1.4;
}

.review-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(127, 77, 144, 0.14);
  min-width: 0;
}

.review-actions > *:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.review-action-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.review-actions-lead {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.review-report-ack {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(74, 45, 82, 0.82);
}

.review-report-ack a,
.review-report-ack .link-button {
  color: #7f4d90;
  font-weight: 600;
}

/* Reads as a link mid-sentence but is a real button: it opens the feedback
   dialog rather than navigating. Resets the base button chrome, including the
   :hover lift, which needs the doubled class to outrank `button:hover`. */
.link-button {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover,
.link-button:focus-visible {
  border: 0;
  background: none;
  transform: none;
}

body.review-open {
  overflow: hidden;
}

/* The document scrolls on <html> (body overflow alone doesn't lock it), so lock
   the root too while the review overlay is open to stop the page bleeding
   behind the modal. */
html:has(body.review-open) {
  overflow: hidden;
}

.detail-field {
  display: grid;
  gap: 5px;
}

.detail-field label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.detail-field textarea {
  min-height: 58px;
  line-height: 1.28;
}

.detail-field.compact textarea,
.detail-field.compact select {
  min-height: 38px;
}

.import-box {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  min-width: 0;
}

.import-box button {
  min-width: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-box #importBtn {
  background: #7b4f96;
  color: #fff;
  border-color: #7b4f96;
  font-weight: 800;
}

.import-box #importBtn:hover {
  background: #6a4283;
  border-color: #6a4283;
}

.import-box .secondary {
  background: transparent;
  color: var(--muted);
  border-color: rgba(127, 77, 144, 0.2);
  font-size: 0.82rem;
}

.import-box .status {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin-top: 1px;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.beta-limitations-note {
  border: 1px solid rgba(127, 77, 144, 0.16);
  border-radius: 7px;
  background: rgba(var(--surface-rgb), 0.72);
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.beta-limitations-note summary {
  cursor: pointer;
  padding: 8px 10px;
  color: var(--ink);
  font-weight: 800;
}

.beta-limitations-note ul {
  margin: 0;
  padding: 0 10px 10px 24px;
}

.beta-limitations-note li + li {
  margin-top: 4px;
}

.project-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid rgba(151, 93, 165, 0.16);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.7);
  box-shadow: var(--shadow-soft);
}

.project-actions-label {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.project-actions button {
  min-width: 0;
  padding-inline: 11px;
}

.project-actions #saveBtn {
  grid-column: 1 / -1;
}

.project-actions #exportBtn,
.project-actions #resetBtn {
  background: rgba(var(--surface-rgb), 0.74);
  border-color: rgba(127, 77, 144, 0.18);
  color: var(--ink);
}

.saved-library {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(127, 77, 144, 0.14);
}

.saved-library-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.saved-library-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 800;
  text-align: left;
}

.saved-library-toggle:hover {
  color: var(--rose-dark);
  background: transparent;
  border-color: transparent;
}

.saved-library-chevron {
  display: inline-flex;
  width: 1em;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.9em;
}

.saved-library-body {
  display: grid;
  gap: 8px;
}

.saved-library-body[hidden] {
  display: none;
}

.saved-library-collapsed-hint {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.saved-library-open {
  justify-self: start;
}

.saved-library-compact {
  display: grid;
  margin-top: 8px;
}

.saved-library-compact .saved-library-open {
  justify-self: stretch;
  width: 100%;
}

.saved-library-note,
.saved-project-empty,
.saved-project-card p,
.account-summary p,
.account-message {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.saved-library-note {
  max-width: 28ch;
  font-size: 0.72rem;
}

.saved-library-backup-note {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.saved-library-backup-note.modal {
  grid-column: 1 / -1;
}

.saved-library-recent {
  display: grid;
  gap: 8px;
}

.saved-library-recent[hidden] {
  display: none;
}

.saved-continue-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(127, 77, 144, 0.2);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.76);
  box-shadow: 0 8px 18px rgba(83, 50, 94, 0.06);
}

.saved-continue-card strong {
  display: block;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.saved-continue-card p,
.saved-recent-heading {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.3;
}

.saved-continue-eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.saved-continue-action {
  min-width: 86px;
}

.saved-recent-list {
  display: grid;
  gap: 5px;
}

.saved-recent-project {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 42px;
  padding: 7px 8px;
  border: 1px solid rgba(127, 77, 144, 0.14);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.56);
  color: inherit;
  text-align: left;
}

.saved-recent-project:hover {
  border-color: rgba(127, 77, 144, 0.3);
  background: rgba(var(--surface-rgb), 0.82);
}

.saved-recent-project[aria-current="true"] {
  box-shadow: inset 3px 0 0 rgba(127, 77, 144, 0.5);
}

.saved-recent-project strong {
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.saved-recent-project span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
}

.field-label.compact {
  margin-top: 2px;
  font-size: 0.75rem;
}

.saved-library-search,
.saved-library-select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(127, 77, 144, 0.22);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.82);
  color: var(--ink);
}

.saved-library-filter-field,
.saved-library-sort-field {
  display: grid;
  gap: 4px;
}

.saved-library-filter-field .field-label,
.saved-library-sort-field .field-label {
  margin: 0;
}

.saved-library-select {
  min-height: 36px;
  font-size: 0.78rem;
}

.saved-library-result-summary {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.3;
}

.saved-library-result-summary[hidden] {
  display: none;
}

.saved-library-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.account-panel {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(127, 77, 144, 0.18);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.74);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px) saturate(1.04);
}

.account-panel-topbar {
  width: min(330px, 32vw);
  min-height: 42px;
  align-self: flex-start;
  padding: 5px 6px 5px 12px;
  background: rgba(var(--surface-rgb), 0.88);
  border-color: rgba(127, 77, 144, 0.2);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(83, 50, 94, 0.1);
}

.account-panel-topbar:has(.account-login-form:not([hidden])),
.account-panel-topbar:has(.account-message:not(:empty)) {
  width: min(390px, 38vw);
  padding: 8px;
  border-radius: 12px;
}

.account-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
}

.account-panel-topbar .account-summary > div:first-child {
  display: flex;
  min-width: 0;
  align-items: center;
  flex: 1 1 auto;
  max-width: 100%;
}

.account-summary strong {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin-bottom: 0;
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-panel-topbar .account-summary p {
  display: none;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-actions {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
}

.account-panel-topbar .compact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
}

.account-panel-topbar .compact-button[hidden] {
  display: none;
}

.account-login-form {
  display: grid;
  gap: 6px;
}

.account-panel-topbar .account-login-form {
  margin: 7px 2px 2px;
  padding: 8px;
  border: 1px solid rgba(127, 77, 144, 0.14);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.72);
}

.account-login-form[hidden] {
  display: none;
}

.account-login-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.account-login-row input {
  width: 100%;
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid rgba(127, 77, 144, 0.18);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.76);
  color: var(--ink);
  font-size: 0.84rem;
}

.account-message {
  min-height: 1em;
}

.account-message:empty {
  display: none;
}

.account-panel-topbar .account-message:not(:empty) {
  margin: 6px 6px 2px;
  font-size: 0.74rem;
  line-height: 1.3;
}

.account-migration {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(147, 106, 35, 0.22);
  border-radius: 8px;
  background: rgba(var(--surface-warm-rgb), 0.74);
}

.account-migration[hidden] {
  display: none;
}

.backup-reminder {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 9px 11px;
  border: 1px solid rgba(151, 93, 165, 0.28);
  border-left: 3px solid rgba(151, 93, 165, 0.66);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.82);
}

.backup-reminder[hidden] {
  display: none;
}

.legacy-origin-notice {
  display: grid;
  gap: 8px;
  margin: 0 auto 12px;
  max-width: min(1600px, calc(100% - 32px));
  padding: 12px 14px;
  border: 1px solid rgba(151, 93, 165, 0.34);
  border-left: 4px solid rgba(151, 93, 165, 0.8);
  border-radius: 10px;
  background: rgba(var(--surface-rgb), 0.94);
}

.legacy-origin-notice[hidden] {
  display: none;
}

.legacy-origin-notice p {
  margin: 0;
}

.legacy-origin-notice-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* Anchors miss the border/background/color the button,select,input,textarea rule
   gives real controls, so restate it here to keep the link looking like a peer
   of the buttons beside it. */
.legacy-origin-notice-actions a.compact-button {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}

.legacy-origin-notice-actions a.compact-button:hover {
  border-color: var(--rose);
}

.backup-reminder strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.backup-reminder p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.backup-reminder-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.backup-reminder-actions .compact-button {
  min-width: 0;
}

.account-migration strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.account-migration p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.account-migration-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.account-migration-actions .compact-button,
.account-migration-chooser > .compact-button {
  min-width: 0;
}

.account-migration-chooser {
  display: grid;
  gap: 7px;
}

.account-migration-chooser[hidden] {
  display: none;
}

.account-migration-list {
  display: grid;
  gap: 6px;
}

.account-migration-preview {
  display: grid;
  gap: 4px;
  padding: 7px;
  border: 1px solid rgba(127, 77, 144, 0.14);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.62);
}

.account-migration-preview strong {
  font-size: inherit;
}

.account-migration-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 7px;
  border: 1px solid rgba(127, 77, 144, 0.12);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.5);
}

.account-migration-option-already-synced,
.account-migration-option-likely-duplicate,
.account-migration-option-possible-duplicate {
  opacity: 0.76;
}

.account-migration-option input {
  margin-top: 3px;
}

.account-migration-option span {
  min-width: 0;
}

.account-migration-option small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.saved-project-list {
  display: grid;
  gap: 8px;
}

.saved-project-card {
  display: grid;
  gap: 6px;
  padding: 9px;
  background: rgba(var(--surface-rgb), 0.68);
  border: 1px solid rgba(127, 77, 144, 0.16);
  border-radius: 8px;
}

.saved-project-card.active {
  border-color: rgba(127, 77, 144, 0.38);
  box-shadow: inset 3px 0 0 rgba(127, 77, 144, 0.58), 0 8px 20px rgba(83, 50, 94, 0.08);
}

.saved-project-summary {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.saved-project-title-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.saved-project-summary:hover strong {
  color: var(--accent);
}

.saved-project-card strong,
.saved-project-summary strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 0.9rem;
}

.saved-project-state {
  align-self: start;
  max-width: 11rem;
  padding: 3px 7px;
  border: 1px solid rgba(127, 77, 144, 0.18);
  border-radius: 999px;
  background: rgba(var(--surface-rgb), 0.7);
  color: var(--muted);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.15;
  text-align: right;
}

.saved-project-state.unsaved {
  border-color: rgba(147, 106, 35, 0.3);
  background: rgba(var(--surface-warm-rgb), 0.82);
  color: #7c5a19;
}

.saved-project-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 5px;
}

.saved-project-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 6px;
  border: 1px solid rgba(127, 77, 144, 0.14);
  border-radius: 999px;
  background: rgba(var(--surface-rgb), 0.72);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.15;
}

.saved-project-progress {
  display: block;
  margin: 0 0 3px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
}

.saved-project-progress em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
}

.saved-project-date {
  opacity: 0.84;
}

.saved-project-rename {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(127, 77, 144, 0.14);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.58);
}

.saved-project-rename label {
  display: grid;
  gap: 4px;
}

.saved-project-rename span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.saved-project-rename input {
  width: 100%;
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid rgba(127, 77, 144, 0.18);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.76);
  color: var(--ink);
  font-size: 0.84rem;
}

.saved-project-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.saved-project-actions .compact-button {
  min-height: 34px;
  padding: 5px 9px;
  font-size: 0.82rem;
}

.saved-project-actions .subtle {
  background: rgba(var(--surface-rgb), 0.5);
  color: var(--muted);
}

.saved-library-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(42, 34, 48, 0.32);
  backdrop-filter: blur(4px);
}

.saved-library-overlay[hidden] {
  display: none;
}

.saved-library-dialog {
  width: min(980px, 100%);
  max-height: min(820px, calc(100vh - 44px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
}

.saved-library-dialog-heading {
  align-items: start;
}

.saved-library-dialog-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(128px, 0.55fr) minmax(128px, 0.55fr) auto;
  gap: 8px 12px;
  align-items: end;
}

.saved-library-dialog-controls .field-label {
  margin: 0;
}

.saved-library-dialog-controls .saved-library-result-summary {
  grid-column: 1 / 4;
}

.saved-project-list-large {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.saved-project-card-large {
  min-height: 154px;
  padding: 12px;
  background: rgba(var(--surface-rgb), 0.78);
}

.saved-project-card-large .saved-project-summary strong {
  font-size: 1rem;
}

.saved-project-list-large .saved-project-empty {
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px dashed rgba(127, 77, 144, 0.22);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.56);
}

.saved-project-actions.rename-actions {
  justify-content: flex-end;
}

.saved-project-actions .danger {
  color: #8a3450;
  border-color: rgba(138, 52, 80, 0.28);
}

.project-notes {
  min-height: 86px;
  margin-top: 4px;
}

.progress-track {
  height: 10px;
  overflow: hidden;
  background: rgba(var(--surface-rgb), 0.88);
  border-radius: 99px;
}

.progress-track span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--leaf));
  transition: width 180ms ease;
}

.counter-grid {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.counter-grid.small {
  grid-template-columns: minmax(88px, max-content) minmax(92px, 1fr) minmax(88px, max-content);
}

.progress-widget .counter-grid {
  grid-template-columns: 44px minmax(92px, 1fr) 44px;
}

.progress-widget .counter-grid.small {
  grid-template-columns: minmax(86px, max-content) minmax(92px, 1fr) minmax(86px, max-content);
}

.progress-widget .counter-grid.small button,
.progress-widget .counter-grid.small output {
  min-width: 0;
  white-space: nowrap;
}

.progress-widget .counter-grid.small button {
  padding-inline: 10px;
}

output {
  display: grid;
  min-height: 38px;
  place-items: center;
  padding: 0 8px;
  color: var(--rose-dark);
  background: var(--chart-cell);
  border: 1px solid var(--chart-cell-line);
  border-radius: 7px;
  font-weight: 800;
  text-align: center;
}

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

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.legend-symbol {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--rose-dark);
  background: var(--chart-cell);
  border: 1px solid var(--chart-cell-line);
  border-radius: 50%;
  font-weight: 900;
}

.pattern-key-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  color: var(--ink);
  background: rgba(var(--surface-rgb), 0.76);
  border: 1px solid rgba(185, 132, 203, 0.28);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(83, 48, 112, 0.08);
}

.legend > .pattern-key-panel {
  grid-column: 1 / -1;
}

.review-pattern-key {
  margin: 12px 0;
}

.pattern-key-collapsed {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  color: var(--ink);
  background: rgba(var(--surface-rgb), 0.74);
  border: 1px solid rgba(185, 132, 203, 0.28);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(83, 48, 112, 0.07);
}

.pattern-key-collapsed > summary {
  cursor: pointer;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.pattern-key-collapsed > summary strong {
  color: var(--ink);
  font-size: 0.96rem;
}

.pattern-key-collapsed[open] > summary {
  padding-bottom: 8px;
}

.pattern-key-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pattern-key-heading h3 {
  margin: 0;
  font-size: 1rem;
}

.pattern-key-heading span,
.pattern-key-item em {
  flex: 0 0 auto;
  color: var(--purple);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.pattern-key-reference-note,
.pattern-key-warning,
.pattern-key-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.pattern-key-warning {
  color: #704410;
  background: rgba(255, 241, 199, 0.82);
  border: 1px solid rgba(202, 158, 66, 0.38);
  border-radius: 7px;
  padding: 8px 10px;
}

.pattern-key-reference-note {
  background: rgba(var(--surface-rgb), 0.78);
  border-left: 3px solid rgba(142, 84, 176, 0.5);
  border-radius: 7px;
  padding: 8px 10px;
}

.pattern-key-group {
  display: grid;
  gap: 8px;
}

.pattern-key-group h4 {
  margin: 0;
  color: var(--rose-dark);
  font-size: 0.82rem;
  letter-spacing: 0;
}

.pattern-key-items {
  display: grid;
  gap: 8px;
}

.pattern-key-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  background: rgba(var(--surface-rgb), 0.7);
  border: 1px solid rgba(215, 190, 226, 0.7);
  border-radius: 7px;
}

.pattern-key-item div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.pattern-key-item strong,
.pattern-key-item span,
.pattern-key-item small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pattern-key-item strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.pattern-key-item span,
.pattern-key-item small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.pattern-key-swatch,
.pattern-key-symbol {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  font-weight: 900;
}

.pattern-key-swatch {
  background: var(--key-color, var(--chart-cell));
  border: 2px solid rgba(62, 44, 74, 0.16);
  box-shadow: inset 0 0 0 2px rgba(var(--surface-rgb), 0.45);
}

.pattern-key-symbol {
  color: var(--purple);
  background: var(--chart-cell);
  border: 1px solid var(--chart-cell-line);
}

.pattern-key-chart-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  background: var(--chart-cell);
  border: 1px solid var(--chart-cell-line);
  border-radius: 50%;
}

.pattern-key-chart-icon svg {
  display: block;
}

.tabs {
  margin-bottom: 12px;
}

.tab {
  min-width: 104px;
}

.small-action {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.84rem;
}

.workspace-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
}

.focus-controls {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  background: rgba(var(--surface-rgb), 0.9);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.focus-controls button {
  min-height: 32px;
  padding: 0 12px;
}

.progress-toggle-btn {
  border-radius: 999px;
  padding: 4px 16px;
  white-space: nowrap;
  font-weight: 800;
  font-size: 0.85rem;
  background: rgba(141, 102, 164, 0.10);
  border-color: rgba(141, 102, 164, 0.25);
}

.progress-toggle-btn[aria-pressed="true"] {
  color: #fff;
  background: #8d66a4;
  border-color: #8d66a4;
}

.progress-widget.floating-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  width: min(336px, calc(100vw - 48px));
  padding: 18px 24px 22px;
  overflow: visible;
  background: var(--surface-strong);
  border: 1px solid var(--card-line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(1.06);
  display: grid;
  gap: 10px;
}

.progress-widget[hidden] {
  display: none;
}

.progress-widget-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: grab;
}

.progress-widget-header:active {
  cursor: grabbing;
}

.progress-widget-title {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--ink);
  flex: 1 1 auto;
}

.progress-widget-close {
  min-height: 32px;
  min-width: 32px;
  padding: 0;
  font-size: 1.1rem;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(127, 77, 144, 0.06);
  border-color: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.progress-widget-close:hover {
  background: rgba(127, 77, 144, 0.08);
  border-color: transparent;
  transform: none;
}

.chart-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-toggle-btn {
  border-radius: 999px;
  padding: 0 10px;
  font-size: 0.78rem;
}

.floating-widget {
  position: fixed;
  z-index: 60;
  padding: 0;
  background: var(--surface-strong);
  border: 1px solid var(--card-line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(1.06);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.floating-widget[data-floating-active="true"] {
  z-index: 75;
}

.floating-widget[hidden] {
  display: none;
}

.floating-widget-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 14px;
  cursor: grab;
  border-bottom: 1px solid var(--card-line);
  user-select: none;
}

.floating-widget-header:active {
  cursor: grabbing;
}

.floating-widget-title {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--ink);
  flex: 1 1 auto;
}

.floating-widget-close {
  min-height: 32px;
  min-width: 32px;
  padding: 0;
  font-size: 1.1rem;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(127, 77, 144, 0.06);
  border-color: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.floating-widget-close:hover {
  background: rgba(127, 77, 144, 0.08);
  border-color: transparent;
  transform: none;
}

.floating-widget-body {
  overflow: auto;
  padding: 14px;
}

.legend-widget {
  top: 100px;
  right: 24px;
  width: 360px;
  min-width: 260px;
  min-height: 160px;
  max-height: calc(100vh - 120px);
  resize: both;
  overflow: hidden;
}

.legend-widget .legend {
  grid-template-columns: 1fr;
}

.legend-widget .pattern-key-heading {
  display: none;
}

.legend-widget .pattern-key-group {
  gap: 6px;
}

.legend-widget .pattern-key-item {
  grid-template-columns: auto minmax(0, 1fr);
  padding: 8px 10px;
}

@media (max-width: 640px) {
  .legend-widget {
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: 60vh;
  }
}

@media (max-width: 640px) {
  .progress-widget.floating-widget {
    bottom: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    padding: 16px;
  }

  .progress-widget .counter-grid {
    gap: 6px;
  }

  .progress-widget .counter-grid.small {
    grid-template-columns: minmax(76px, max-content) minmax(82px, 1fr) minmax(76px, max-content);
  }

  .progress-widget .counter-grid.small button {
    padding-inline: 8px;
  }
}

.view {
  display: none;
}

.view.active {
  display: block;
}

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

.editor-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(320px, 1.1fr);
  gap: 16px;
  align-items: start;
}

.split[data-focus-mode="written"] {
  grid-template-columns: minmax(0, 1fr);
}

.split[data-focus-mode="diagram"] {
  grid-template-columns: minmax(0, 1fr);
}

.split[data-focus-mode="written"] .diagram,
.split[data-focus-mode="diagram"] .reader {
  display: none;
}

.split[data-focus-mode="diagram"] .diagram {
  min-height: calc(100vh - 178px);
}

.current-row-bar {
  position: sticky;
  top: 10px;
  z-index: 6;
  display: grid;
  grid-template-areas:
    "summary controls"
    "progress controls";
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: 10px;
  margin: -2px 0 10px;
  padding: 11px 12px;
  background: rgba(var(--surface-rgb), 0.92);
  border: 1px solid rgba(151, 93, 165, 0.22);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(83, 50, 94, 0.12);
  backdrop-filter: blur(12px) saturate(1.04);
}

.current-row-bar[data-current-done="true"] {
  background: rgba(var(--tint-success-rgb), 0.94);
  border-color: rgba(127, 162, 112, 0.32);
}

.current-row-bar[data-all-done="true"] {
  background: rgba(var(--tint-success-rgb), 0.96);
  border-color: rgba(127, 162, 112, 0.42);
  box-shadow: 0 12px 28px rgba(86, 126, 73, 0.14);
}

.current-row-summary {
  grid-area: summary;
  min-width: 0;
}

.current-row-kicker {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

#currentRowBarLabel {
  display: block;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.current-row-hint {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.2;
}

.current-row-progress {
  grid-area: progress;
  justify-self: start;
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
  white-space: normal;
}

.current-row-controls {
  grid-area: controls;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

/* Navigation (Previous/Jump/Next) share the top row; Mark row done spans
   full width beneath them for a clearer primary action. */
.current-row-controls #stickyMarkDoneBtn {
  grid-column: 1 / -1;
}

.current-row-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
}

.current-row-bar .small-action {
  border-radius: 999px;
  white-space: nowrap;
}

.current-row-bar .small-action:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.follow-display-policy,
.chart-policy-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 9px 11px;
  color: var(--muted);
  background: rgba(var(--surface-rgb), 0.82);
  border: 1px solid rgba(151, 93, 165, 0.18);
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(83, 50, 94, 0.08);
  font-size: 0.82rem;
  line-height: 1.35;
}

.follow-display-policy[hidden],
.chart-policy-status[hidden] {
  display: none;
}

.chart-representation-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 8px 10px;
  background: rgba(var(--surface-rgb), 0.82);
  border: 1px solid rgba(151, 93, 165, 0.18);
  border-radius: 8px;
}

.chart-representation-switcher[hidden] {
  display: none;
}

.chart-display-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: -2px 0 10px;
  padding: 7px 10px;
  background: rgba(var(--surface-rgb), 0.86);
  border: 1px solid rgba(40, 157, 164, 0.18);
  border-radius: 8px;
}

.chart-display-controls[hidden] {
  display: none;
}

.chart-flip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.chart-flip-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.chart-direction-status {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.chart-representation-switcher label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.chart-representation-switcher select {
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 360px;
  margin: 0;
  min-height: 34px;
  padding: 6px 34px 6px 10px;
  font-size: 0.86rem;
}

.chart-representation-help {
  flex: 1 0 100%;
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.follow-reference-notes {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px;
  background: rgba(var(--surface-rgb), 0.84);
  border: 1px solid rgba(151, 93, 165, 0.2);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(83, 50, 94, 0.08);
}

.follow-reference-notes[hidden] {
  display: none;
}

.follow-reference-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.follow-reference-heading {
  min-width: 0;
}

.follow-reference-heading h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  color: var(--purple);
  font-size: 0.98rem;
  font-weight: 900;
}

.follow-reference-heading h3 span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid rgba(151, 93, 165, 0.22);
  border-radius: 999px;
  background: rgba(var(--surface-rgb), 0.7);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.follow-reference-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.follow-reference-toggle {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 12px;
  white-space: nowrap;
}

.follow-reference-list {
  display: grid;
  gap: 8px;
}

.follow-reference-list[hidden] {
  display: none;
}

.follow-reference-list .section-note-card {
  margin: 0;
}

.follow-display-policy-label,
.chart-policy-status strong {
  flex: 0 0 auto;
  color: var(--purple);
  font-weight: 900;
}

.follow-display-policy-copy,
.chart-policy-status span {
  min-width: 0;
}

.follow-display-policy[data-policy-mode="unsupportedChart"],
.chart-policy-status[data-policy-mode="unsupportedChart"] {
  background: rgba(var(--surface-warm-rgb), 0.9);
  border-color: rgba(178, 112, 41, 0.32);
}

.chart-reference-message {
  max-width: 520px;
  margin: 42px auto;
  padding: 18px 20px;
  color: var(--muted);
  background: rgba(var(--surface-rgb), 0.92);
  border: 1px solid rgba(151, 93, 165, 0.2);
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(83, 50, 94, 0.1);
  line-height: 1.48;
}

.chart-reference-message strong {
  display: block;
  margin-bottom: 6px;
  color: var(--purple);
  font-size: 1rem;
}

.chart-reference-message p {
  margin: 6px 0 0;
}

.chart-reference-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.chart-reference-heading strong {
  margin-bottom: 0;
}

.representation-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.representation-badge.reference {
  color: #6a4c21;
  background: rgba(246, 214, 142, 0.42);
  border: 1px solid rgba(178, 112, 41, 0.24);
}

.representation-badge.experimental {
  color: #7a5420;
  background: rgba(255, 231, 177, 0.55);
  border: 1px solid rgba(188, 128, 34, 0.28);
}

.chart-reference-facts {
  display: grid;
  gap: 3px;
  margin: 10px 0 0;
  padding-left: 18px;
}

/* Shown in place of the pages when a reopened project has the import's record
   of them but not the images themselves. It is the panel saying what it does
   not have, so it should read as a plain statement, not an error. */
.chart-reference-missing {
  margin: 10px 0 0;
  padding: 9px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.7);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.chart-reference-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.chart-reference-page {
  margin: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(151, 93, 165, 0.18);
  border-radius: 8px;
}

.chart-reference-page img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 5px;
  background: rgba(var(--surface-rgb), 0.72);
}

.chart-reference-page figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.row-list {
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 10px;
  height: auto;
  max-height: calc(100vh - 168px);
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  resize: vertical;
}

.split[data-focus-mode="written"] .row-list {
  height: auto;
  max-height: calc(100vh - 232px);
  min-height: 0;
}

.split[data-focus-mode="diagram"] .chart-host {
  min-height: calc(100vh - 238px);
  max-height: max(470px, calc(100vh - 238px));
}

.pattern-section-title {
  margin: 12px 2px 2px;
  color: var(--purple);
  font-size: 1.05rem;
  font-weight: 900;
}

.setup-instructions-card {
  padding: 14px 16px;
  background: rgba(var(--surface-rgb), 0.9);
  border: 1px solid rgba(151, 93, 165, 0.2);
  border-radius: 7px;
  box-shadow: var(--shadow-soft);
  color: var(--ink);
}

.setup-instructions-title {
  margin: 0 0 6px;
  color: var(--purple);
  font-size: 0.98rem;
  font-weight: 900;
}

.setup-instructions-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.section-note-card {
  position: relative;
  margin: 12px 0;
  padding: 14px 16px;
  background: rgba(var(--surface-rgb), 0.94);
  border: 1px solid rgba(151, 93, 165, 0.22);
  border-left: 4px solid rgba(127, 162, 112, 0.58);
  border-radius: 7px;
  box-shadow: 0 10px 24px rgba(83, 50, 94, 0.09);
}

.section-note-card + .row-item {
  margin-top: 6px;
}

.section-note-card .pattern-section-title {
  margin: 4px 0 8px;
}

.section-note-eyebrow {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 8px;
  padding: 3px 8px;
  color: #4c6f42;
  background: rgba(var(--tint-success-rgb), 0.92);
  border: 1px solid rgba(127, 162, 112, 0.28);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.section-note-card[data-section-note-role="special-stitch"] {
  border-left-color: rgba(141, 102, 164, 0.72);
  background: rgba(var(--surface-rgb), 0.72);
}

.section-note-card[data-section-note-role="special-stitch"] .section-note-eyebrow {
  color: var(--purple);
  background: rgba(var(--surface-rgb), 0.92);
  border-color: rgba(151, 93, 165, 0.28);
}

.section-note-card[data-section-note-role="finishing"],
.section-note-card[data-section-note-role="assembly"] {
  border-left-color: rgba(223, 126, 144, 0.62);
}

.section-instruction-card {
  background: rgba(var(--surface-rgb), 0.96);
}

.section-instruction-copy {
  margin: 0;
  color: var(--ink);
  line-height: 1.45;
}

.section-instruction-copy strong {
  color: var(--purple);
}

.setup-instructions-divider {
  height: 1px;
  margin: 12px 0;
  background: var(--line);
}

.row-item {
  position: relative;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  column-gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  height: auto !important;
  padding: 14px 14px 18px;
  text-align: left;
  background: rgba(var(--surface-rgb), 0.9);
  border: 1px solid rgba(151, 93, 165, 0.2);
  border-radius: 7px;
  box-shadow: 0 8px 20px rgba(83, 50, 94, 0.08);
  overflow: visible;
  white-space: normal;
  cursor: pointer;
}

.row-item:hover {
  border-color: var(--rose);
}

.row-item.current {
  border-color: #8d66a4;
  background: rgba(var(--surface-rgb), 0.96);
  box-shadow: 0 10px 26px rgba(127, 77, 144, 0.16);
}

.row-item.current::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: var(--rose);
}

.row-item.current::after {
  content: "Current";
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 3px 7px;
  color: #6d467d;
  background: rgba(var(--surface-rgb), 0.96);
  border: 1px solid rgba(141, 102, 164, 0.28);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.row-item.current .row-copy {
  padding-right: 76px;
}

.row-item.done {
  background: rgba(var(--tint-success-rgb), 0.92);
  border-color: rgba(127, 162, 112, 0.3);
}

.row-item.done .row-check {
  background: var(--leaf);
}

.row-item.done .row-check::after {
  content: "✓";
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
}

.row-item.done .row-copy {
  opacity: 0.62;
  text-decoration: line-through;
}

.row-check {
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  margin-top: 1px;
  background: transparent;
  border: 2px solid var(--leaf);
  border-radius: 50%;
  cursor: pointer;
}

.row-copy {
  display: block;
  min-width: 0;
  max-width: 100%;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  overflow: visible;
}

body[data-written-text-size="large"] .row-copy {
  font-size: 1.08rem;
}

body[data-written-text-size="extra-large"] .row-copy {
  font-size: 1.18rem;
}

body[data-written-text-size="large"] .follow-row-context,
body[data-written-text-size="large"] .follow-row-full-text {
  font-size: 1rem;
}

body[data-written-text-size="extra-large"] .follow-row-context,
body[data-written-text-size="extra-large"] .follow-row-full-text {
  font-size: 1.08rem;
}

body[data-written-text-size="large"] .follow-row-label {
  font-size: 1.08rem;
}

body[data-written-text-size="extra-large"] .follow-row-label {
  font-size: 1.16rem;
}

.row-copy strong {
  color: var(--rose-dark);
}

.row-item.done .row-copy .follow-row-compact,
.row-item.done .row-copy .follow-row-context,
.row-item.done .row-copy .follow-row-chip,
.row-item.done .row-copy .follow-row-full-toggle,
.row-item.done .row-copy .follow-row-full-text {
  text-decoration: none;
}

.follow-row-compact {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.follow-row-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px 10px;
  min-width: 0;
}

.follow-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.25;
}

.follow-row-label {
  color: var(--rose-dark);
  font-size: 1rem;
}

.follow-row-meta-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.follow-row-meta-item::before {
  content: "·";
  margin-right: 8px;
  color: rgba(110, 92, 126, 0.72);
  font-weight: 900;
}

.follow-row-context {
  min-width: 0;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.follow-row-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.follow-row-chip {
  --follow-chip-color: rgba(141, 102, 164, 0.5);
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 26px;
  padding: 4px 8px 4px 6px;
  color: var(--ink);
  background: rgba(var(--surface-rgb), 0.76);
  border: 1px solid rgba(151, 93, 165, 0.18);
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(83, 50, 94, 0.06);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.follow-row-chip-swatch {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  background: var(--follow-chip-color);
  border: 1px solid rgba(83, 50, 94, 0.34);
  border-radius: 50%;
}

.follow-row-full-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  justify-self: end;
  min-height: 24px;
  padding: 1px 2px;
  color: var(--purple);
  background: transparent;
  border: 0;
  border-radius: 5px;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.follow-row-full-toggle:hover,
.follow-row-full-toggle:focus-visible {
  color: var(--rose-dark);
  background: rgba(var(--surface-rgb), 0.7);
  outline: none;
}

.follow-row-full-toggle:focus-visible {
  box-shadow: 0 0 0 2px rgba(141, 102, 164, 0.22);
}

.follow-row-full-text {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 8px 9px;
  color: var(--ink);
  background: rgba(var(--surface-rgb), 0.72);
  border: 1px solid rgba(151, 93, 165, 0.16);
  border-radius: 7px;
  font-size: 0.9rem;
  line-height: 1.38;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.follow-row-full-label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
}

.follow-row-full-copy {
  min-width: 0;
}

.follow-row-full-text[hidden] {
  display: none;
}

.chart-row-label,
.chart-row-done-indicator,
.chart-row-done-check {
  cursor: pointer;
}

.row-note-controls {
  grid-column: 2;
  width: 100%;
  min-width: 0;
  margin-top: 12px;
  text-decoration: none;
}

.row-note-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.row-note-toggle {
  min-height: 30px;
  padding: 5px 10px;
  color: var(--purple);
  background: rgba(var(--surface-rgb), 0.76);
  border: 1px solid rgba(151, 93, 165, 0.24);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

.row-note-toggle:hover {
  border-color: var(--rose);
}

.row-item:has([data-follow-compact-row]) .row-note-controls {
  margin-top: 8px;
}

.row-item:has([data-follow-compact-row]) .row-note-toggle {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 0.78rem;
  background: rgba(var(--surface-rgb), 0.58);
}

.row-note-status {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.row-note-preview {
  margin: 9px 0 0;
  padding: 10px 12px;
  color: var(--ink);
  background: rgba(var(--surface-rgb), 0.72);
  border: 1px solid rgba(151, 93, 165, 0.18);
  border-radius: 7px;
  line-height: 1.42;
  white-space: pre-wrap;
}

.row-note-editor {
  margin-top: 10px;
  padding: 10px;
  background: rgba(var(--surface-rgb), 0.86);
  border: 1px solid rgba(151, 93, 165, 0.18);
  border-radius: 7px;
}

.row-note-label {
  display: block;
  margin-bottom: 6px;
  color: var(--purple);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.row-note-input {
  width: 100%;
  min-height: 74px;
  resize: vertical;
  color: var(--ink);
  background: rgba(var(--surface-rgb), 0.94);
}

.row-note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.row-type-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin: 0 8px 4px 0;
  padding: 2px 7px;
  border: 1px solid rgba(151, 93, 165, 0.22);
  border-radius: 999px;
  background: rgba(var(--surface-rgb), 0.76);
  color: var(--purple);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  vertical-align: 1px;
}

.row-type-badge.non-row {
  background: rgba(var(--tint-success-rgb), 0.9);
  border-color: rgba(127, 162, 112, 0.28);
  color: #4c6f42;
}

.row-item[data-instruction-kind="repeat"],
.row-item[data-instruction-kind="setup"],
.row-item[data-instruction-kind="finishing"] {
  border-style: dashed;
}

.repeat-instruction-helper {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(var(--surface-rgb), 0.72);
  border: 1px solid rgba(151, 93, 165, 0.18);
  border-radius: 7px;
  color: var(--ink);
  text-decoration: none;
}

.repeat-instruction-title {
  display: block;
  margin-bottom: 3px;
  color: var(--purple);
  font-size: 0.82rem;
  font-weight: 900;
}

.repeat-instruction-copy {
  display: block;
  color: var(--muted);
  line-height: 1.42;
}

.repeat-card-counter {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 10px;
  background: rgba(var(--tint-success-rgb), 0.86);
  border: 1px solid rgba(127, 162, 112, 0.26);
  border-radius: 7px;
}

.repeat-card-counter.complete {
  background: rgba(var(--tint-success-rgb), 0.96);
}

.repeat-card-counter-label {
  color: #4c6f42;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.repeat-card-counter-output {
  min-height: 32px;
  min-width: 78px;
  padding: 0 8px;
  background: #fff;
  border-color: rgba(127, 162, 112, 0.28);
  color: #4c6f42;
  font-size: 0.86rem;
}

.repeat-card-counter-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.repeat-card-counter-button,
.repeat-card-counter-reset {
  min-height: 34px;
  border-radius: 7px;
  white-space: nowrap;
}

.repeat-card-counter-button {
  min-width: 36px;
  padding: 0;
}

.repeat-card-counter-reset {
  min-width: max-content;
  padding: 0 10px;
}

.written-color {
  font-weight: 900;
}

.written-color.color-a {
  color: #111111;
}

.written-color.color-b {
  color: #b98516;
}

.follow-color-token {
  color: var(--follow-color, #8a5cb4);
  font-weight: 800;
  text-decoration: inherit;
}

.follow-color-token-light {
  text-decoration-line: underline;
  text-decoration-color: var(--follow-color-accent, #ffffff);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
  text-shadow: 0 1px 0 rgba(var(--surface-rgb), 0.75);
}

.chart-host {
  position: relative;
  box-sizing: border-box;
  min-height: 470px;
  max-height: max(470px, calc(100vh - 300px));
  overflow: auto;
  contain: layout;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  padding: 12px;
  background: rgba(var(--surface-rgb), 0.96);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.chart-host[data-scrollable-x="true"] {
  box-shadow:
    inset -18px 0 18px -18px rgba(84, 53, 104, 0.38),
    inset 18px 0 18px -18px rgba(84, 53, 104, 0.18);
}

.chart-host[data-scrollable-y="true"] {
  background:
    linear-gradient(rgba(var(--surface-rgb), 0.96), rgba(var(--surface-rgb), 0.96)) padding-box,
    linear-gradient(to bottom, rgba(84, 53, 104, 0.12), rgba(84, 53, 104, 0)) border-box;
}

.chart-host[data-chart-scroll-affordance="true"]::after {
  content: attr(data-scroll-hint);
  position: sticky;
  left: 12px;
  bottom: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: calc(100% - 24px);
  margin-top: 8px;
  padding: 5px 9px;
  border: 1px solid rgba(151, 93, 165, 0.24);
  border-radius: 999px;
  background: rgba(var(--surface-rgb), 0.94);
  box-shadow: 0 8px 20px rgba(42, 32, 47, 0.12);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  pointer-events: none;
}

.chart-host svg {
  display: block;
  width: max-content;
  height: auto;
  max-width: none;
  min-width: min-content;
  margin-inline: auto;
}

.pattern-editor {
  min-height: calc(100vh - 260px);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  line-height: 1.5;
}

.pattern-edit-help {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.pattern-edit-guidance {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 12px 13px;
  border: 1px solid rgba(151, 93, 165, 0.18);
  border-radius: 7px;
  background: rgba(var(--surface-rgb), 0.82);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.pattern-edit-guidance p {
  margin: 0;
}

.pattern-edit-guidance[data-level="warning"] {
  border-color: rgba(184, 101, 93, 0.42);
  background: rgba(var(--surface-rgb), 0.92);
  color: #7d423b;
}

.pattern-edit-guidance[data-level="ready"] {
  border-color: rgba(127, 162, 112, 0.3);
}

.help-panel p {
  color: var(--muted);
  line-height: 1.55;
}

code {
  padding: 2px 5px;
  background: var(--code-bg);
  border-radius: 4px;
}

.stitch {
  cursor: pointer;
}

.chart-row {
  cursor: pointer;
}

.chart-row:hover,
.chart-row:focus {
  outline: none;
  filter: drop-shadow(0 0 8px rgba(151, 93, 165, 0.28));
}

.stitch-row-current {
  filter: drop-shadow(0 0 10px rgba(27, 159, 163, 0.36));
}

.stitch-row-done {
  opacity: 0.82;
}

.stitch-row-has-note .chart-row-band {
  stroke-dasharray: 4 3;
}

.stitch-row-current.stitch-row-done {
  opacity: 1;
}

.chart-row-band {
  pointer-events: all;
}

.chart-row-current-band {
  vector-effect: non-scaling-stroke;
}

.chart-row-done-indicator,
.chart-row-done-check,
.chart-direction-cue {
  pointer-events: none;
}

.chart-row-done-indicator {
  filter: drop-shadow(0 1px 2px rgba(74, 116, 62, 0.2));
}

.chart-direction-cue {
  opacity: 0.82;
}

.chart-direction-summary {
  letter-spacing: 0.01em;
}

.getting-started-card {
  display: grid;
  gap: 12px;
  padding: 28px 26px;
  margin: 8px 0;
  background: rgba(var(--surface-rgb), 0.9);
  border: 1px dashed rgba(151, 93, 165, 0.32);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.getting-started-icon {
  font-size: 2rem;
  line-height: 1;
}

.getting-started-title {
  margin: 0;
  color: var(--rose-dark);
  font-size: 1.05rem;
}

.getting-started-body {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  max-width: 42ch;
  justify-self: center;
}

.getting-started-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  text-align: left;
  justify-self: center;
  width: fit-content;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.45;
}

.getting-started-steps li {
  padding: 8px 12px;
  background: rgba(var(--surface-rgb), 0.72);
  border: 1px solid rgba(151, 93, 165, 0.16);
  border-radius: 7px;
}

@media (max-width: 980px) {
  .app-shell,
  .split,
  .editor-grid {
    grid-template-columns: 1fr;
  }

  .topbar {
    flex-wrap: wrap;
    min-height: auto;
  }

  .account-panel-topbar {
    width: min(100%, 420px);
    border-radius: 8px;
  }

  .account-panel-topbar .account-summary > div:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .account-panel-topbar .account-summary p {
    display: block;
  }

  .row-list {
    max-height: none;
  }

  .current-row-bar {
    grid-template-areas:
      "summary"
      "progress"
      "controls";
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .current-row-progress {
    justify-self: start;
    white-space: nowrap;
  }

  .current-row-controls {
    justify-content: flex-start;
  }

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

  .website-cleanup-facts,
  .website-cleanup-review-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  :root {
    --mobile-bottom-nav-space: calc(72px + env(safe-area-inset-bottom));
    --mobile-follow-card-space: 250px;
    --mobile-follow-bar-space: calc(var(--mobile-follow-card-space) + var(--mobile-bottom-nav-space));
  }

  body {
    padding-bottom: var(--mobile-bottom-nav-space);
  }

  .app-shell,
  .topbar {
    max-width: 100vw;
    width: 100vw;
  }

  .topbar {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: hidden;
    padding: 8px 16px;
  }

  .brand-logo {
    width: min(110px, 36vw);
  }

  .topbar-utilities {
    width: 100%;
  }

  .account-panel-topbar {
    width: 100%;
  }

  .sidebar,
  .workspace,
  .panel {
    max-width: 100%;
  }

  .source-reference-heading {
    display: grid;
  }

  .source-reference-facts {
    grid-template-columns: 1fr;
  }

  .focus-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .focus-controls button {
    min-width: 0;
    min-height: 40px;
    padding: 0 8px;
  }

  .comfort-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
  }

  .comfort-select-label {
    justify-content: space-between;
  }

  .comfort-select-label select {
    max-width: min(44vw, 150px);
  }

  .comfort-status {
    grid-column: 1 / -1;
  }

  .mobile-app-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: rgba(var(--surface-rgb), 0.96);
    border-top: 1px solid rgba(151, 93, 165, 0.22);
    box-shadow: 0 -14px 30px rgba(83, 50, 94, 0.16);
    backdrop-filter: blur(14px) saturate(1.08);
  }

  .mobile-app-nav-button {
    min-height: 44px;
    padding: 4px 3px;
    color: var(--muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.74rem;
    font-weight: 900;
    line-height: 1.05;
    white-space: nowrap;
  }

  .mobile-app-nav-button.active,
  .mobile-app-nav-button[aria-current="page"] {
    color: #fff;
    background: #8d66a4;
    border-color: #8d66a4;
    box-shadow: 0 8px 16px rgba(83, 50, 94, 0.16);
  }

  .mobile-app-nav-button:focus-visible {
    outline: 3px solid rgba(141, 102, 164, 0.42);
    outline-offset: 2px;
  }

  .mobile-app-nav-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .current-row-bar {
    position: fixed;
    top: auto;
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(var(--mobile-bottom-nav-space) + 10px);
    left: max(12px, env(safe-area-inset-left));
    z-index: 46;
    /* Large accessibility text sizes can grow the expanded card past the
       viewport; cap it and scroll inside so Mark row done stays reachable. */
    max-height: calc(100dvh - var(--mobile-bottom-nav-space) - 84px);
    overflow: auto;
    grid-template-areas:
      "summary toggle"
      "progress toggle"
      "controls controls";
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 8px 10px;
    margin: 0;
    padding: 10px;
  }

  .current-row-toggle {
    grid-area: toggle;
    display: inline-flex;
    align-self: center;
  }

  .current-row-bar[data-collapsed="true"] {
    grid-template-areas:
      "summary toggle"
      "progress toggle";
    align-items: center;
    padding: 9px 10px;
  }

  .current-row-bar[data-collapsed="true"] .current-row-hint,
  .current-row-bar[data-collapsed="true"] .current-row-controls {
    display: none;
  }

  .current-row-bar[data-collapsed="true"] .current-row-progress {
    font-size: 0.76rem;
  }

  .current-row-progress {
    justify-self: start;
    max-width: 100%;
    text-align: left;
    white-space: nowrap;
  }

  .current-row-controls {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 7px;
  }

  .current-row-controls .small-action {
    min-width: 0;
    min-height: 42px;
    padding: 0 8px;
  }

  #stickyMarkDoneBtn {
    grid-column: 1 / -1;
  }

  .row-item.current::after {
    top: 6px;
    right: 8px;
  }

  .row-item.current .row-copy {
    padding-right: 62px;
  }

  .row-item {
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 10px;
    padding: 13px 12px 16px;
    scroll-margin-top: 180px;
    scroll-margin-bottom: var(--mobile-follow-bar-space);
  }

  .follow-row-header {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .follow-row-full-toggle {
    justify-self: start;
    min-height: 34px;
    padding: 4px 7px;
    margin-left: -7px;
  }

  .row-list,
  .split[data-focus-mode="written"] .row-list {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-right: 0;
    resize: none;
    scroll-padding-bottom: var(--mobile-follow-bar-space);
  }

  .reader.panel,
  .diagram.panel {
    backdrop-filter: none;
    overflow-x: clip;
  }

  /* The current-row card is a child of the reader, so display:none-ing the
     reader for chart focus took the card with it and left the chart with no
     current row, no Previous/Next, and no Mark row done — the one place a
     phone user following the chart needs them. The card is fixed to the
     viewport here, so keep the reader as an empty shell: its own content and
     card chrome go, the card stays. Jump already scrolls the chart's current
     row as well as the written one, so every control still acts on something.
     Desktop keeps display:none — there the card is sticky inside the reader,
     and both panels are on screen together anyway. */
  .split[data-focus-mode="diagram"] .reader {
    display: block;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .split[data-focus-mode="diagram"] .reader::before,
  .split[data-focus-mode="diagram"] .reader > *:not(.current-row-bar) {
    display: none;
  }

  /* Clearance for the fixed current-row card + bottom nav goes after the last
     card as page background, not as padding inside the cards, which read as
     broken empty space. */
  .split {
    margin-bottom: var(--mobile-follow-card-space);
  }

  .row-check {
    width: 26px;
    height: 26px;
    min-height: 26px;
  }

  .row-note-controls {
    grid-column: 1 / -1;
    margin-top: 12px;
  }

  .row-note-toggle,
  .row-note-actions button {
    min-height: 40px;
  }

  .row-item:has([data-follow-compact-row]) .row-note-toggle {
    min-height: 36px;
    padding: 4px 9px;
  }

  .row-note-editor {
    padding: 9px;
  }

  .row-note-preview,
  .repeat-instruction-helper,
  .repeat-card-counter,
  .section-instruction-card,
  .follow-reference-notes,
  .setup-instructions-card {
    max-width: 100%;
  }

  .follow-reference-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .follow-reference-toggle {
    width: 100%;
  }

  .repeat-card-counter {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .repeat-card-counter-output {
    width: 100%;
  }

  .repeat-card-counter-actions {
    display: grid;
    grid-template-columns: minmax(40px, 1fr) minmax(40px, 1fr) minmax(max-content, 1.2fr);
  }

  /* Both selectors so the diagram-focus desktop rules lose on mobile: the card
     and host hug their content instead of reserving 62-100vh of blank card, and
     the fixed-bar clearance lives on .split (below), not inside the card. */
  .split[data-focus-mode="diagram"] .diagram {
    min-height: 0;
  }

  /* The zoom controls live in this heading, and the card is now as tall as the
     chart, so following a row partway down left zoom hundreds of pixels above
     the screen — the one control the chart needs most, only reachable by
     scrolling away from what you were looking at. Sticking the heading keeps it
     for as long as its chart is on screen. */
  .diagram .panel-heading {
    position: sticky;
    top: 0;
    z-index: 7;
    margin: -10px -10px 0;
    padding: 10px;
    /* Same treatment as the import review's pinned heading: the chart scrolls
       under this, so it needs to read as a surface rather than let stitches
       show through the middle of the zoom controls. */
    background: rgba(var(--surface-rgb), 0.96);
    backdrop-filter: blur(10px);
    border-radius: 8px;
  }

  .chart-host,
  .split[data-focus-mode="diagram"] .chart-host {
    max-width: 100%;
    min-height: 0;
    /* No nested vertical scroller on a phone. The base max-height left a tall
       chart scrolling inside a box that covered ~72% of the screen, and
       overscroll-behavior: contain stopped that scroll passing to the page —
       so a thumb anywhere over the chart moved the chart and never the page,
       and hitting the chart's end stopped dead. The card grows to the chart
       instead and the page scrolls through it, the way the row list already
       does. Wide charts still pan sideways inside the card. */
    max-height: none;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    padding: 10px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  /* Set while two fingers are down: the pinch is handling the gesture, so the
     browser must not also pan the chart under it. */
  .chart-host[data-pinching="true"],
  .split[data-focus-mode="diagram"] .chart-host[data-pinching="true"] {
    touch-action: none;
  }

  .website-import .panel-heading {
    align-items: flex-start;
    flex-wrap: nowrap;
  }

  .website-import .panel-heading > div {
    min-width: 0;
  }

  /* Above the current row card, not on top of it. Both are fixed to the bottom
     of the viewport and both were anchored to the nav, so opening Progress put
     "Mark row done" underneath it — the two halves of the same moment, and only
     one of them usable. --current-row-bar-height is kept in sync by
     syncFloatingWidgetOffset because the card folds to its row on the sidebar
     screens; 0px is the fallback for the contexts that have no card at all. */
  .progress-widget.floating-widget,
  .legend-widget {
    bottom: calc(var(--mobile-bottom-nav-space) + var(--current-row-bar-height, 0px) + 20px);
    /* Both stacked plus the nav can outgrow a short screen at large text sizes;
       cap it and scroll inside rather than push the counters off the top. */
    max-height: calc(100dvh - var(--mobile-bottom-nav-space) - var(--current-row-bar-height, 0px) - 40px);
    overflow: auto;
  }

  .project-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .project-actions-label,
  .project-actions #saveBtn {
    grid-column: 1 / -1;
  }

  .project-actions button {
    min-width: 0;
    padding: 0 8px;
  }

  .account-summary,
  .account-login-row {
    grid-template-columns: 1fr;
  }

  .account-summary {
    display: grid;
    align-items: stretch;
  }

  .account-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .account-panel-topbar .compact-button {
    flex: 1 1 8rem;
    white-space: normal;
  }

  .account-migration-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .saved-library-overlay {
    padding: 10px;
  }

  .saved-library-dialog {
    max-height: calc(100vh - 20px);
  }

  .saved-library-dialog-heading {
    position: relative;
    flex-wrap: nowrap;
    align-items: flex-start;
    padding-right: 54px;
  }

  .saved-library-dialog-heading > div {
    min-width: 0;
  }

  .saved-library-dialog-heading .dialog-close-button {
    position: absolute;
    top: 0;
    right: 0;
  }

  .saved-library-dialog-controls {
    grid-template-columns: 1fr;
  }

  /* The desktop grid pins this summary across columns 1-3; left in place it
     forces implicit columns back into the single-column mobile grid, which
     shreds the controls into skinny tracks and paints the backup tools under
     the project list. */
  .saved-library-dialog-controls .saved-library-result-summary {
    grid-column: auto;
  }

  .saved-project-list-large {
    grid-template-columns: 1fr;
  }

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

  .tabs .tab {
    min-width: 0;
  }

  .counter-grid.small {
    grid-template-columns: 1fr;
  }

  .progress-widget .counter-grid.small {
    grid-template-columns: minmax(76px, max-content) minmax(82px, 1fr) minmax(76px, max-content);
  }

  .legend {
    grid-template-columns: 1fr;
  }

  .import-review-overlay {
    padding: 10px;
  }

  .import-review {
    max-height: calc(100vh - 20px);
    padding: 12px 12px 132px;
    resize: none;
  }

  .review-tabs {
    display: flex;
    width: 100%;
  }

  .review-tab {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
  }

  .review-details {
    grid-template-columns: 1fr;
  }

  .review-source-summary {
    grid-template-columns: 1fr;
  }

  .review-status-card-heading,
  .review-status-heading-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .review-status-heading-actions {
    gap: 6px;
  }

  .review-status-heading-actions .review-status-toggle {
    width: 100%;
  }

  .review-status-facts,
  .review-next-steps ul,
  .review-source-quick ul {
    grid-template-columns: 1fr;
  }

  .review-source-quick li {
    flex-direction: column;
    gap: 2px;
  }

  .review-chart-source-cta-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .review-chart-source-cta-actions {
    justify-content: stretch;
  }

  .review-chart-source-cta-actions .compact-button {
    flex: 1 1 auto;
    white-space: normal;
  }

  .review-final-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .review-inline-actions {
    justify-content: stretch;
  }

  .review-inline-actions button {
    flex: 1 1 auto;
  }

  .review-visual-summary dl {
    grid-template-columns: 1fr;
  }

  .manual-completion-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .manual-completion-heading > span {
    align-self: flex-start;
  }

  .manual-completion-facts {
    grid-template-columns: 1fr;
  }

  .review-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .review-action-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .review-action-buttons button {
    flex: 1 1 auto;
    min-height: 44px;
  }

  .review-row-warnings {
    padding: 10px;
  }

  .review-row-warnings-heading span {
    max-width: 100%;
    white-space: normal;
  }

  .review-row-warning-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  }

  .review-row-warning-actions .compact-button {
    min-height: 40px;
    white-space: normal;
  }

  .diagnostics-content {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .diagnostic-section,
  .review-reference,
  .review-source-textarea,
  .review-grid-preview,
  .raw-diagnostics pre {
    max-width: 100%;
  }
}

/* Phase 8.4O — mobile modal polish: keep the fixed bottom bars (follow
   current-row bar + app nav) from overlapping any open modal, pin the Review
   Import close button to the top-right, and stack the footer cleanly. */
@media (max-width: 700px) {
  body.review-open .current-row-bar,
  body.review-open .mobile-app-nav {
    display: none;
  }

  .import-review .panel-heading {
    position: relative;
    z-index: 5;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin: -12px -12px 12px;
    padding: 12px;
    border-bottom: 1px solid rgba(127, 77, 144, 0.12);
    background: rgba(var(--surface-rgb), 0.96);
    box-shadow: 0 8px 20px rgba(83, 50, 94, 0.08);
    backdrop-filter: blur(10px);
  }

  .import-review #cancelImportReview {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 32;
  }

  .review-actions {
    position: fixed;
    right: 10px;
    bottom: 10px;
    left: 10px;
    z-index: 31;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(127, 77, 144, 0.18);
    border: 1px solid rgba(127, 77, 144, 0.16);
    border-radius: 10px;
    background: rgba(var(--surface-rgb), 0.96);
    box-shadow: 0 -10px 24px rgba(83, 50, 94, 0.12);
    backdrop-filter: blur(10px);
  }

  .review-actions > *:first-child {
    white-space: normal;
  }

  /* The status span inherits .status { white-space: nowrap }, which clips its
     longer strings (e.g. OCR imports) in the stacked footer at 340-390px. Let
     it wrap so it stays fully readable above the buttons. */
  .review-actions .status {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .review-action-buttons {
    justify-content: stretch;
  }

  .review-action-buttons button {
    flex: 1 1 auto;
  }
}

@media (max-width: 360px) {
  .row-item.current .row-copy {
    padding-right: 0;
    padding-top: 18px;
  }
}

@media print {
  @page {
    margin: 0.68in 0.62in;
  }

  body.print-clean-export * {
    visibility: hidden !important;
  }

  body.print-clean-export,
  body.print-clean-export .clean-export-overlay,
  body.print-clean-export .clean-export,
  body.print-clean-export #cleanExportPrintArea,
  body.print-clean-export #cleanExportPrintArea * {
    visibility: visible !important;
  }

  body.print-clean-export {
    background: #fff !important;
    color: #111 !important;
    margin: 0 !important;
  }

  body.print-clean-export .clean-export-overlay {
    position: static;
    display: block;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
  }

  body.print-clean-export .clean-export {
    display: block;
    width: auto;
    max-height: none;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  body.print-clean-export .clean-export-heading,
  body.print-clean-export .clean-export-option,
  body.print-clean-export .clean-export-actions {
    display: none !important;
  }

  body.print-clean-export .clean-export-warning {
    display: none !important;
  }

  body.print-clean-export .clean-export-print-area {
    overflow: visible;
    border: 0;
    background: transparent;
    color: #111;
    max-width: 7.25in;
    margin: 0 auto;
  }

  body.print-clean-export .clean-export-print-warning {
    display: block !important;
    margin: 0 0 18pt;
    padding: 10pt 12pt;
    border: 1.5pt solid #9a5b1d;
    border-radius: 4pt;
    background: #fff4df !important;
    color: #5d3510 !important;
    font: 700 11pt/1.4 Georgia, "Times New Roman", serif;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.print-clean-export .clean-export-output {
    min-height: 0;
    padding: 0;
    color: #111;
    font: 11.5pt/1.55 Georgia, "Times New Roman", serif;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: normal;
    orphans: 3;
    widows: 3;
  }

  body.print-clean-export .clean-export-output::first-line {
    font-size: 19pt;
    font-weight: 700;
    line-height: 1.2;
  }
}