/* =================================================================
   WORKSPACE · dashboard + scrape page styles
   Sits on top of app.css and re-uses its dark palette + Inter sans +
   teal primary so dashboard and scrape read the same as the marketing
   page and the site editor.

   Historic body class `page-scrape` is kept to scope these overrides
   without churning ~80 selectors across HTML + JS.
   ================================================================= */

body.page-scrape {
  background:
    radial-gradient(ellipse 80% 60% at 20% -10%, rgba(94, 234, 212, 0.14), transparent 60%),
    radial-gradient(ellipse 70% 50% at 90% 5%, rgba(125, 211, 252, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(99, 102, 241, 0.08), transparent 60%),
    linear-gradient(180deg, #0d1320 0%, var(--bg) 35%);
  background-attachment: fixed;
  font-family: var(--sans);
  color: var(--text);
}

/* ---- page frame --------------------------------------------- */
body.page-scrape main.container {
  max-width: 1180px; margin: 0 auto;
  padding: 48px 28px 96px;
}

/* ---- workspace hero (dashboard) ----------------------------- */
.workspace-hero {
  margin-bottom: 40px;
}
.workspace-hero .eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--primary);
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(94, 234, 212, 0.08);
  border: 1px solid rgba(94, 234, 212, 0.22);
  margin-bottom: 18px;
}
.workspace-hero h1 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 12px;
  color: var(--text);
}
.workspace-hero h1 .accent {
  background: linear-gradient(120deg, #5eead4, #7dd3fc 50%, #c4b5fd);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.workspace-hero p.muted {
  font-size: 1.02rem; line-height: 1.5; max-width: 56ch; margin: 0;
}

/* ---- masthead (scrape page) --------------------------------- */
.masthead { position: relative; margin-bottom: 36px; }
.masthead__crumb {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono);
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.masthead__crumb b {
  color: var(--primary); font-weight: 500; letter-spacing: 0.12em;
}
.masthead__crumb hr {
  flex: 1; height: 0; border: 0; border-top: 1px solid var(--border);
}
.masthead h1 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--text);
}
.masthead h1 .ital {
  font-style: normal; font-weight: 700;
  background: linear-gradient(120deg, #5eead4, #7dd3fc 50%, #c4b5fd);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.masthead__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px 32px;
  margin-top: 24px;
  padding-top: 18px; border-top: 1px solid var(--border);
}
.masthead__meta dl { margin: 0; }
.masthead__meta dt {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.masthead__meta dd {
  margin: 0; font-family: var(--mono);
  font-size: 0.92rem; color: var(--text);
}
.masthead__meta dd a { color: inherit; border-bottom: 1px dotted var(--muted); }

/* ---- two-column report grid (TOC + content) ---------------- */
.report {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 880px) {
  .report { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ---- TOC rail ------------------------------------------------ */
.toc {
  position: sticky; top: 92px;
  align-self: start;
  font-family: var(--mono);
  font-size: 0.86rem;
  max-height: calc(100vh - 110px); overflow-y: auto;
  padding-right: 12px;
}
.toc__title {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.toc__list { list-style: none; margin: 0; padding: 0; }
.toc__list li { line-height: 1.75; }
.toc__list a {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 8px;
  padding: 5px 0 5px 12px;
  margin-left: -12px;
  color: var(--muted);
  letter-spacing: 0.01em;
  border-left: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.toc__list a span { color: var(--muted); opacity: 0.7; }
.toc__list a:hover {
  color: var(--text); text-decoration: none;
  border-left-color: var(--primary);
}
.toc__list a:hover span { color: var(--primary); opacity: 1; }
@media (max-width: 880px) { .toc { display: none; } }

/* ---- numbered sections / generic section card -------------- */
.section {
  scroll-margin-top: 96px;
  margin-bottom: 24px;
  position: relative;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.section[hidden] { display: none; }
.section.is-toc-hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.35), 0 8px 28px rgba(94, 234, 212, 0.08);
}
/* When the section IS a .card (the common case on both pages), the
   global .card from app.css already gives us bg / border / padding. */
body.page-scrape .section.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 26px;
}
.section__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.section__num {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--primary);
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(94, 234, 212, 0.08);
  border: 1px solid rgba(94, 234, 212, 0.22);
}
.section__title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--text);
}
.section__sub {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
.section__body { color: var(--text); }
.section__body p { line-height: 1.6; color: var(--text); }

/* ---- editable field rows (overrides for JS-built rows) ----- */
body.page-scrape .editable-field {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border);
  margin: 0;
}
body.page-scrape .editable-field:last-of-type { border-bottom: none; }
body.page-scrape .editable-field .field-label {
  font-family: var(--mono); font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); min-width: 0;
}
body.page-scrape .editable-field .field-value {
  font-family: var(--sans); font-size: 1rem; color: var(--text);
  align-items: baseline; gap: 10px;
  line-height: 1.5;
}
body.page-scrape .editable-field .field-value .muted {
  color: var(--muted); font-style: italic;
}

body.page-scrape .editable-field input,
body.page-scrape .editable-field textarea {
  background: #0e1116;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 9px 12px;
  border-radius: 8px;
  font-family: var(--sans); font-size: 0.95rem;
  width: 100%;
}
body.page-scrape .editable-field input:focus,
body.page-scrape .editable-field textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.12);
}

/* ---- icon button (small secondary action) ------------------ */
.icon-btn {
  background: transparent; border: 1px solid transparent;
  padding: 4px 10px;
  cursor: pointer;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  border-radius: 6px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.icon-btn:hover {
  color: var(--text);
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.03);
}
.icon-btn--danger:hover {
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.06);
}

/* ---- loading state (scrape "scanning…") -------------------- */
.scan {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 28px 22px;
  overflow: hidden;
}
.scan::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(to bottom, transparent 0%, var(--primary) 50%, transparent 100%);
  background-size: 100% 50%;
  animation: scanline 2.6s ease-in-out infinite;
}
@keyframes scanline { 0% { background-position: 0 -100%; } 100% { background-position: 0 200%; } }
.scan__label {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px; font-weight: 500;
}
.scan__state {
  font-family: var(--sans); font-size: 1.35rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}
.scan__state::after {
  content: "▍"; color: var(--primary);
  animation: caret 1s steps(1) infinite;
  margin-left: 2px;
}
@keyframes caret { 50% { opacity: 0; } }

.progress-log {
  max-height: 240px; overflow: auto;
  background: #0a0c10;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  font-family: var(--mono); font-size: 0.84rem;
  line-height: 1.65;
  color: var(--muted);
  white-space: pre-wrap;
}
.progress-log::-webkit-scrollbar { width: 6px; }
.progress-log::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ---- failed state ------------------------------------------ */
.failed {
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 12px;
  padding: 28px;
  background:
    linear-gradient(to right, rgba(239, 68, 68, 0.08), transparent 70%),
    var(--card);
}
.failed__label {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--danger); font-weight: 600;
}
.failed h3 {
  font-family: var(--sans); font-weight: 700;
  font-size: 1.5rem; margin: 8px 0 10px; color: var(--text);
  letter-spacing: -0.015em;
}
.failed p { color: var(--muted); margin: 0 0 18px; line-height: 1.55; font-size: 1rem; }

/* ---- pages list (scrape page) ------------------------------ */
body.page-scrape .page-list { list-style: none; margin: 0; padding: 0; counter-reset: page-counter; }
body.page-scrape .page-row {
  display: grid;
  grid-template-columns: 48px 80px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
body.page-scrape .page-row::before {
  content: counter(page-counter, decimal-leading-zero);
  font-family: var(--mono); font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted); letter-spacing: 0.04em;
  counter-increment: page-counter;
  white-space: nowrap;
}
body.page-scrape details > summary.page-row { cursor: pointer; }
body.page-scrape details > summary.page-row::-webkit-details-marker { display: none; }
body.page-scrape details > summary.page-row::before {
  content: "▸  " counter(page-counter, decimal-leading-zero);
  color: var(--primary);
  transition: color 0.15s ease;
}
body.page-scrape details[open] > summary.page-row::before {
  content: "▾  " counter(page-counter, decimal-leading-zero);
}
body.page-scrape details > summary.page-row:hover::before { color: #7dd3fc; }
body.page-scrape details[open] > summary.page-row {
  border-bottom-color: rgba(94, 234, 212, 0.25);
}
.page-shots {
  display: grid;
  gap: 16px;
  padding: 18px 0 24px;
  border-bottom: 1px solid var(--border);
  grid-template-columns: var(--shots-cols, minmax(0, 1fr));
}
.page-shots__caption {
  font-family: var(--mono); font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.page-shots img {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  display: block;
}
.page-list li:last-child .page-shots,
.page-list li:last-child > .page-row,
.page-list li:last-child > details > summary.page-row {
  border-bottom: none;
}
body.page-scrape .page-row:last-child { border-bottom: none; }
body.page-scrape .page-row .page-hero {
  width: 72px; height: 54px;
  background: #0a0c10; border: 1px solid var(--border); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
body.page-scrape .page-row .page-hero img { width: 100%; height: 100%; object-fit: cover; }
body.page-scrape .page-row .page-hero--empty {
  color: var(--muted); font-family: var(--mono); font-size: 0.82rem;
}
body.page-scrape .page-row .page-info {
  display: flex; align-items: baseline; gap: 12px; min-width: 0;
  flex-wrap: wrap;
}
body.page-scrape .page-row code {
  font-family: var(--mono); font-size: 0.84rem;
  color: var(--primary);
  background: rgba(94, 234, 212, 0.08); padding: 2px 8px; border-radius: 4px;
}
body.page-scrape .page-row .page-name {
  font-family: var(--sans); font-size: 1.02rem; font-weight: 600;
  color: var(--text);
}
body.page-scrape .page-row .muted {
  color: var(--muted);
  font-family: var(--sans); font-size: 0.92rem;
}
body.page-scrape .page-row .page-actions {
  display: flex; gap: 4px;
}

/* ---- palette swatches -------------------------------------- */
body.page-scrape .palette-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
body.page-scrape .swatch {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 0;
  padding: 0;
  border: 1px solid var(--border);
  background: transparent;
  font-family: var(--mono);
  overflow: hidden;
  align-items: stretch;
  border-radius: 8px;
}
body.page-scrape .swatch::before {
  content: "";
  background: var(--c, #0e1116);
  border-right: 1px solid var(--border);
}
.swatch__role {
  grid-column: 2 / -1;
  align-self: end;
  padding: 8px 12px 2px;
  color: var(--muted);
  font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 500;
}
.swatch__hex {
  grid-column: 2 / -1;
  padding: 0 12px 9px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
}

/* ---- fonts row --------------------------------------------- */
body.page-scrape .fonts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
body.page-scrape .fonts-row .font-card {
  padding: 16px 18px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  min-width: 0;
}
body.page-scrape .fonts-row .font-card .font-role {
  color: var(--muted); font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 500;
  margin-bottom: 8px;
}
body.page-scrape .fonts-row .font-card .font-sample {
  font-size: 2rem; margin-top: 10px; color: var(--text);
  line-height: 1.1;
}

/* ---- logo + gallery ---------------------------------------- */
body.page-scrape .asset-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: start;
}
body.page-scrape .asset-card .asset-thumb {
  width: 100%; aspect-ratio: 4 / 3;
  background: #0a0c10;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
body.page-scrape .asset-card .asset-thumb img {
  max-width: 80%; max-height: 80%;
}
body.page-scrape .asset-card .asset-thumb--logo { background: #fff; }
body.page-scrape .asset-card .asset-thumb--empty {
  color: var(--muted); font-family: var(--mono); font-size: 0.78rem;
  text-align: center; padding: 12px;
}
body.page-scrape .asset-card .asset-body p {
  color: var(--text); line-height: 1.55; margin: 0 0 10px;
}
body.page-scrape .asset-card input[type="file"] {
  display: block; margin-top: 6px;
  font-family: var(--mono); font-size: 0.78rem;
  color: var(--muted);
}
body.page-scrape .asset-card label {
  font-family: var(--mono); font-size: 0.76rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}

body.page-scrape .gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
body.page-scrape .gallery-item {
  position: relative;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  display: flex; flex-direction: column;
  font-size: 0.86rem;
  font-family: var(--sans);
  overflow: hidden;
}
body.page-scrape .gallery-item .gallery-thumb {
  aspect-ratio: 4/3;
  background: #0a0c10;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
body.page-scrape .gallery-item .gallery-thumb img { max-width: 100%; max-height: 100%; }
body.page-scrape .gallery-toggle {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  padding: 0;
  margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(11, 13, 16, 0.78);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.92rem; line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(2px);
  z-index: 2;
}
body.page-scrape .gallery-toggle:hover {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}
body.page-scrape .gallery-toggle--excluded {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}
body.page-scrape .gallery-toggle--excluded:hover {
  background: rgba(11, 13, 16, 0.78);
  border-color: rgba(255, 255, 255, 0.16);
}
body.page-scrape .gallery-item--excluded {
  opacity: 0.45;
}
body.page-scrape .gallery-item--excluded .gallery-thumb {
  background: repeating-linear-gradient(45deg, #0a0c10, #0a0c10 8px, #11151b 8px, #11151b 16px);
}
body.page-scrape .gallery-meta {
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
body.page-scrape .gallery-alt {
  color: var(--text);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: var(--sans);
  font-size: 0.92rem;
}
body.page-scrape .gallery-alt--missing {
  color: var(--muted); font-style: italic;
}
body.page-scrape .gallery-source {
  color: var(--muted);
  font-size: 0.72rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.page-scrape .gallery-source a { color: inherit; border-bottom: 1px dotted var(--muted); }
body.page-scrape .gallery-pill {
  display: inline-block;
  background: rgba(94, 234, 212, 0.08);
  border: 1px solid rgba(94, 234, 212, 0.22);
  padding: 2px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600;
  color: var(--primary);
  border-radius: 4px;
  align-self: flex-start;
}
body.page-scrape .gallery-pill--remote {
  color: var(--accent);
  border-color: rgba(245, 158, 11, 0.32);
  background: rgba(245, 158, 11, 0.08);
}

/* ---- structured data --------------------------------------- */
body.page-scrape .structured-item {
  padding: 14px 0;
  border-top: 1px dashed var(--border);
  border-radius: 0;
  margin: 0;
}
body.page-scrape .structured-item:first-child { border-top: 0; padding-top: 0; }
body.page-scrape .structured-item .ld-type {
  font-family: var(--mono); background: rgba(94, 234, 212, 0.08);
  color: var(--primary); padding: 2px 8px; border-radius: 4px;
  letter-spacing: 0.04em; font-size: 0.78rem;
  text-transform: uppercase; font-weight: 500;
}
body.page-scrape .structured-item .ld-name {
  font-family: var(--sans); font-weight: 600; font-size: 1.05rem;
  color: var(--text);
}
body.page-scrape .structured-item dl {
  display: grid; grid-template-columns: 150px 1fr;
  gap: 6px 22px;
  margin-top: 10px;
}
body.page-scrape .structured-item dt {
  color: var(--muted);
  font-family: var(--mono); font-size: 0.76rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 500;
}
body.page-scrape .structured-item dd {
  margin: 0;
  color: var(--text); font-family: var(--sans);
  font-size: 0.95rem; line-height: 1.45;
}

/* ---- coverage list ----------------------------------------- */
body.page-scrape .coverage-list {
  list-style: none; padding: 0; margin: 8px 0 0;
}
body.page-scrape .coverage-list li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
  font-family: var(--mono); font-size: 0.88rem;
  color: var(--text);
  line-height: 1.5;
}
body.page-scrape .coverage-list code {
  background: rgba(94, 234, 212, 0.08); padding: 2px 6px; border-radius: 4px;
  color: var(--primary); font-family: var(--mono);
}

/* ---- warn pill --------------------------------------------- */
body.page-scrape .warn-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(245, 158, 11, 0.10);
  color: var(--accent);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 6px;
  padding: 3px 10px;
  font-family: var(--mono);
  font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600;
}
body.page-scrape .warn-pill::before {
  content: "△"; color: var(--accent);
}

/* ---- render preview iframes -------------------------------- */
.preview-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
@media (max-width: 880px) { .preview-split { grid-template-columns: 1fr; } }
.preview-split > div { display: flex; flex-direction: column; min-width: 0; }
.preview-split .preview-caption {
  font-family: var(--mono); font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.preview-split .preview-caption strong {
  color: var(--text); font-weight: 600;
}
.preview-split iframe {
  width: 100%; height: 520px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.preview-split .preview-caption a {
  color: var(--muted); border-bottom: 1px dotted var(--muted);
}
.preview-split .preview-caption a:hover { color: var(--primary); border-color: var(--primary); }

/* ---- raw data details -------------------------------------- */
body.page-scrape #raw-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
}
body.page-scrape #raw-card summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-family: var(--mono);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.15s ease;
}
body.page-scrape #raw-card summary::-webkit-details-marker { display: none; }
body.page-scrape #raw-card summary::before {
  content: "▸ "; color: var(--primary);
  display: inline-block; margin-right: 6px;
  transition: transform 0.2s ease;
}
body.page-scrape #raw-card[open] summary::before {
  transform: rotate(90deg);
}
body.page-scrape #raw-card summary:hover { color: var(--text); }
body.page-scrape #raw-card summary strong { font-weight: 600; color: var(--text); }
body.page-scrape #raw-card summary .muted { color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 0.9rem; }
body.page-scrape #raw-card .action-row { padding: 0 22px; }
body.page-scrape #raw-json {
  max-height: 460px; overflow: auto;
  margin: 16px 22px 22px;
  background: #0a0c10;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  font-family: var(--mono);
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.55;
  white-space: pre;
}

/* ---- decision footer (scrape page) ------------------------- */
.decide {
  margin-top: 56px;
  padding: 36px 0 0;
  border-top: 1px solid var(--border);
}
.decide__crumb {
  font-family: var(--mono);
  font-size: 0.8rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--primary);
  margin-bottom: 12px; font-weight: 600;
}
.decide h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  letter-spacing: -0.025em;
  margin: 0 0 8px;
  color: var(--text);
}
.decide h2 em {
  font-style: normal; font-weight: 700;
  background: linear-gradient(120deg, #5eead4, #7dd3fc 50%, #c4b5fd);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.decide__sub {
  font-family: var(--sans);
  color: var(--muted);
  font-size: 1.05rem; line-height: 1.55;
  max-width: 62ch;
  margin: 0 0 28px;
}

.decide__primary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 22px 26px;
  border: 1px solid rgba(94, 234, 212, 0.32);
  background:
    linear-gradient(to right, rgba(94, 234, 212, 0.08), rgba(99, 102, 241, 0.05) 70%),
    var(--card);
  border-radius: 12px;
  margin-bottom: 14px;
  box-shadow: 0 8px 28px rgba(94, 234, 212, 0.08);
}
@media (max-width: 720px) {
  .decide__primary { grid-template-columns: 1fr; }
  .decide__primary .btn { width: 100%; }
}
.decide__primary-text { min-width: 0; }
.decide__primary-text h3 {
  font-family: var(--sans); font-weight: 700;
  font-size: 1.3rem; margin: 0 0 4px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.decide__primary-text p {
  margin: 0; color: var(--muted);
  font-family: var(--sans); font-size: 1rem; line-height: 1.5;
}

.decide__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.decide__option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.decide__option:hover {
  border-color: var(--muted);
  transform: translateY(-1px);
}
.decide__option-text { min-width: 0; flex: 1; }
.decide__option-text h4 {
  margin: 0 0 4px;
  font-family: var(--sans); font-weight: 600;
  font-size: 1.05rem;
  color: var(--text);
}
.decide__option-text p {
  margin: 0; color: var(--muted);
  font-family: var(--sans); font-size: 0.9rem;
  line-height: 1.45;
}

.decide__footnote {
  margin-top: 22px;
  font-family: var(--sans); font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.5;
}
.decide__footnote label {
  display: inline-flex; align-items: flex-start; gap: 10px;
  cursor: pointer;
}
.decide__footnote input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--primary);
}

.decide__import {
  margin-top: 16px; padding: 22px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}
.decide__import label {
  display: grid; gap: 10px;
  font-family: var(--mono); font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.decide__import input[type="file"] {
  font-family: var(--sans); font-size: 0.92rem;
  color: var(--text);
  padding: 9px 11px;
  background: #0e1116;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-transform: none; letter-spacing: 0;
  font-weight: 400;
}
.decide__import .action-row { margin-top: 14px; }

.action-row {
  display: flex; flex-wrap: wrap; gap: 10px;
}

/* ---- stagger reveal on load --------------------------------- */
@keyframes reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .reveal > * {
    opacity: 0;
    animation: reveal 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  .reveal > *:nth-child(1) { animation-delay: 0.04s; }
  .reveal > *:nth-child(2) { animation-delay: 0.10s; }
  .reveal > *:nth-child(3) { animation-delay: 0.16s; }
  .reveal > *:nth-child(4) { animation-delay: 0.22s; }
  .reveal > *:nth-child(5) { animation-delay: 0.28s; }
  .reveal > *:nth-child(6) { animation-delay: 0.34s; }
  .reveal > *:nth-child(7) { animation-delay: 0.40s; }
  .reveal > *:nth-child(8) { animation-delay: 0.46s; }
  .reveal > *:nth-child(9) { animation-delay: 0.52s; }
}

/* =================================================================
   DASHBOARD · site list + plan card
   ================================================================= */

/* ---- site list (overrides app.css .site-list / .site-row) --- */
body.page-scrape .site-list {
  display: grid;
  gap: 14px;
}
body.page-scrape .site-list .site-row,
body.page-scrape .site-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 18px 20px;
  background:
    linear-gradient(180deg, rgba(94, 234, 212, 0.03) 0%, transparent 100%),
    var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
body.page-scrape .site-row:hover,
body.page-scrape .site-row:focus-within {
  border-color: rgba(94, 234, 212, 0.42);
  /* The whole row is a button now — on hover it sinks to a slightly darker
     gradient (vs the --card resting fill) and lifts a touch. */
  background: linear-gradient(180deg, #161b22 0%, #0e1217 100%);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42);
}
body.page-scrape .site-row h3 {
  font-family: var(--sans); font-weight: 700;
  font-size: 1.12rem; margin: 0;
  color: var(--text);
  letter-spacing: -0.015em;
}
body.page-scrape .site-row .muted {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--muted);
}
body.page-scrape .site-row .muted a {
  color: var(--primary);
}
body.page-scrape .site-row .muted a:hover {
  color: #7dd3fc;
  text-decoration: underline;
}
body.page-scrape .site-row .site-thumb {
  width: 180px; height: 112px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* ---- tag (state badge) ------------------------------------- */
/* app.css already styles .tag well for the dark palette — no
   overrides needed. We keep this empty stub for clarity. */

/* ---- plan card --------------------------------------------- */
body.page-scrape .plan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}
@media (max-width: 720px) {
  body.page-scrape .plan-grid { grid-template-columns: 1fr; align-items: stretch; }
}
body.page-scrape .plan-grid .plan-price {
  font-family: var(--sans);
  font-size: 2.4rem; font-weight: 700;
  color: var(--text);
  letter-spacing: -0.025em;
  line-height: 1;
}
body.page-scrape .plan-grid .plan-price small {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 8px;
  vertical-align: middle;
}
body.page-scrape .plan-grid form {
  margin: 0;
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-end;
}
@media (max-width: 720px) {
  body.page-scrape .plan-grid form { align-items: stretch; }
}
body.page-scrape .plan-grid form .muted {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

body.page-scrape .plan-coupon {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}
body.page-scrape .plan-coupon > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  transition: color 0.15s ease;
}
body.page-scrape .plan-coupon > summary::-webkit-details-marker { display: none; }
body.page-scrape .plan-coupon > summary::before {
  content: "▸ ";
  color: var(--primary);
  margin-right: 6px;
}
body.page-scrape .plan-coupon[open] > summary::before { content: "▾ "; }
body.page-scrape .plan-coupon > summary:hover { color: var(--text); }
body.page-scrape .plan-coupon form {
  display: flex; gap: 10px;
  margin: 12px 0 0;
}
body.page-scrape .plan-coupon input[type="text"] {
  background: #0e1116;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 0.92rem;
  border-radius: 8px;
  flex: 1;
  min-width: 0;
}
body.page-scrape .plan-coupon input[type="text"]:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.12);
}

/* ---- section header with a trailing action on one row (sites title +
        New-site CTA, cloud card title + Open-dashboard link) ---- */
.section__head--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.section__head--row .btn { flex: 0 0 auto; }

/* ---- empty state ------------------------------------------- */
body.page-scrape .empty-state {
  padding: 44px 22px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  text-align: center;
  font-family: var(--sans);
  color: var(--muted);
  font-size: 1rem;
}
body.page-scrape .empty-state p { margin: 0; }
body.page-scrape .empty-state__cta { margin-top: 16px; }
/* The empty-state CTA is a real button — don't let the generic link-color
   rule below tint it teal-on-teal. */
body.page-scrape .empty-state a:not(.btn) {
  color: var(--primary);
}
body.page-scrape .empty-state a:not(.btn):hover { color: #7dd3fc; text-decoration: underline; }

/* ---- mobile site-row collapse ------------------------------ */
@media (max-width: 640px) {
  body.page-scrape main.container { padding: 32px 16px 64px; }
  body.page-scrape .workspace-hero { margin-bottom: 28px; }
  body.page-scrape .section.card { padding: 18px; }
  /* app.css sets align-items: stretch for the stacked layout, but the
     non-media `body.page-scrape .site-list .site-row { align-items: center }`
     rule above outranks it on specificity — match that selector here so the
     meta and action row fill the card width instead of centering shrink-wrapped. */
  body.page-scrape .site-list .site-row { align-items: stretch; }
  body.page-scrape .site-row { padding: 14px; gap: 12px; }
  /* Stacked layout (app.css forces flex-direction: column here) leaves the
     fixed 180px thumbnail orphaned against the left edge. Promote it to a
     full-width preview banner so each card reads as a proper site card with
     a hero image up top, then title/status/actions below. */
  body.page-scrape .site-row .site-thumb {
    width: 100%; height: 168px; box-shadow: none;
  }
  /* The thumb iframe renders the site at 1280px and shrinks it with a fixed
     transform. Bump the scale so the banner is comfortably filled across the
     phone width range (over-fill crops cleanly from the top-left; under-fill
     would leak the dark backdrop, which reads as broken). */
  body.page-scrape .site-thumb iframe { transform: scale(0.42); }
  /* Open + delete share one row in the resting state: Open grows to fill
     (overriding the base .site-row .btn width:100%, which would otherwise
     shove the 44px delete square onto its own orphaned line) while the
     delete stays a compact square beside it. Wrap is kept on so the wide
     armed "Click again to delete" label can drop to its own line instead
     of overflowing the card on the narrowest phones. */
  body.page-scrape .site-row__actions { flex-wrap: wrap; gap: 8px; }
  body.page-scrape .site-row__actions .btn--primary {
    flex: 1 1 auto; width: auto;
  }
  /* Keep the icon-only delete a fixed-width square so Open keeps its
     full-width affordance and the trash icon doesn't stretch. */
  body.page-scrape .site-row__delete:not(.site-row__delete--text) {
    flex: 0 0 auto; width: 44px;
  }
  body.page-scrape .plan-grid form { width: 100%; }
  body.page-scrape main.container .masthead h1 {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }
}

/* =================================================================
   DASHBOARD · button micro-interactions
   The shared base — lift on hover + the darker-gradient fill — lives in
   app.css (so the chat page's Send / Clear / Attach behave identically).
   These are the workspace-only extras. Disabled under reduced-motion.
   ================================================================= */

/* Account trigger anchors the dropdown, so it gets a quiet press only (no
   lift, which would drift the menu's anchor point). */
body.page-scrape .account-menu__trigger {
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
body.page-scrape .account-menu__trigger:active { transform: scale(0.97); }
body.page-scrape .account-menu__trigger[aria-expanded="true"] { transform: none; }
/* "Sign out" item nudges inward on hover. */
body.page-scrape .account-menu__item {
  transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
}
body.page-scrape .account-menu__item:hover { transform: translateX(3px); }

/* Delete: keep the danger-red fill, add a soft red glow and a quick one-shot
   wiggle of the trash icon so the destructive control feels alive without
   ever shouting at rest. */
body.page-scrape .site-row__delete:hover:not(:disabled) {
  box-shadow: 0 10px 22px -10px rgba(185, 28, 28, 0.85);
}
body.page-scrape .site-row__delete svg { transition: transform 0.2s ease; }
body.page-scrape .site-row__delete:hover:not(:disabled) svg { animation: trash-wiggle 0.45s ease; }
@keyframes trash-wiggle {
  0%, 100% { transform: rotate(0); }
  28%      { transform: rotate(-9deg); }
  62%      { transform: rotate(7deg); }
}

/* Plain nav text links (Admin / Manage plan): a teal underline that wipes in
   from the left — modern, and consistent with the teal accent language. */
body.page-scrape .top nav a:not(.btn):not(#new-site-link) { position: relative; }
body.page-scrape .top nav a:not(.btn):not(#new-site-link)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1.5px; border-radius: 2px; background: var(--primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1);
}
body.page-scrape .top nav a:not(.btn):not(#new-site-link):hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  body.page-scrape .account-menu__trigger,
  body.page-scrape .account-menu__item {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  body.page-scrape .account-menu__trigger:active,
  body.page-scrape .account-menu__item:hover { transform: none; }
  body.page-scrape .site-row:hover,
  body.page-scrape .site-row:focus-within { transform: none; }
  body.page-scrape .site-row__delete:hover:not(:disabled) svg { animation: none; }
  body.page-scrape .top nav a:not(.btn):not(#new-site-link)::after { transition: none; }
}

/* =================================================================
   DASHBOARD · clickable site rows + inline stats
   The Open button is gone — the whole card is the click target, with a few
   live stats where the button used to sit.
   ================================================================= */

/* A stretched <a> overlays the entire card so a click anywhere opens the
   site. The genuinely-interactive bits (delete, the external site URL) ride
   above it on z-index so they keep their own behaviour. */
body.page-scrape .site-row { position: relative; cursor: pointer; }
.site-row__link {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  -webkit-tap-highlight-color: transparent;
}
.site-row__link:focus { outline: none; }
body.page-scrape .site-row__meta a,
body.page-scrape .site-row__actions,
body.page-scrape .site-row__delete { position: relative; z-index: 2; }

/* Inline stats occupy the slot the Open button used to. */
body.page-scrape .site-row__stats {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 26px;
}
.site-stat { display: flex; flex-direction: column; gap: 3px; }
.site-stat__value {
  font-family: var(--sans); font-weight: 700; font-size: 1.1rem;
  line-height: 1; color: var(--text); letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.site-stat--accent .site-stat__value { color: var(--primary); }
.site-stat__label {
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
/* Wizard sites show a review prompt here instead of stats. */
.site-row__review {
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
  color: var(--primary); white-space: nowrap;
}

@media (max-width: 640px) {
  /* Stacked card: stats sit in a tidy row above the (now lone) delete, which
     tucks to the right edge. */
  body.page-scrape .site-row__stats { gap: 22px; flex-wrap: wrap; }
  body.page-scrape .site-row__actions { justify-content: flex-end; }
}