/* ==========================================================================
   pages/site-crawler.css — Site Crawler view (Phase 4C)
   --------------------------------------------------------------------------
   BEM: .crawler-card / .crawler-card--{idle,running,failed}
        .crawler-card__title / .crawler-card__sub / .crawler-card__list /
        .crawler-card__hint / .crawler-card__cta
        .crawler-progress / .crawler-progress__bar / .crawler-progress__label
        .crawler-summary / .crawler-summary-card / --accent --green --amber --red
        .crawler-section-label
        .crawler-top-issues / .crawler-top-issue / --critical --high --medium
        .crawler-top-issue__count / __msg / __fix
        .crawler-table-card / .crawler-table
        .crawler-url / .crawler-words / .crawler-pill
        .crawler-issues-zero / .crawler-issues-some
        .crawler-h1 / .crawler-sub
   ========================================================================== */

.crawler-h1 {
  font-family: var(--fh);
  font-size: 21px;
  font-weight: 800;
  color: var(--text);
}

.crawler-sub {
  font-size: 13px;
  color: var(--text-m);
  margin-top: 2px;
}

.crawler-sub strong {
  color: var(--text);
  font-family: var(--fm);
  font-weight: 600;
}

/* === State cards ======================================================= */

.crawler-card {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 16px;
}

.crawler-card--idle    { border-left: 3px solid #7c3aed; }
.crawler-card--running { border-left: 3px solid var(--accent2); }
.crawler-card--failed  { border-left: 3px solid var(--red); }

.crawler-card__title {
  font-family: var(--fh);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.crawler-card__sub {
  font-size: 13px;
  color: var(--text-m);
  line-height: 1.5;
  margin-bottom: 12px;
}

.crawler-card__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.crawler-list-item {
  font-size: 13px;
  color: var(--text);
}

.crawler-card__hint {
  font-size: 12px;
  color: var(--text-d);
  margin-top: 10px;
}

.crawler-card__cta {
  font-size: 13px;
  padding: 9px 18px;
}

/* === Progress bar (running state) ===================================== */

.crawler-progress {
  background: var(--surface2);
  border-radius: 6px;
  overflow: hidden;
  height: 10px;
  margin-bottom: 8px;
}

.crawler-progress__bar {
  height: 100%;
  width: var(--bar-width, 0%);
  background: linear-gradient(90deg, #7c3aed, var(--accent2));
  transition: width 0.3s ease;
}

.crawler-progress__label {
  font-family: var(--fm);
  font-size: 12px;
  color: var(--text-m);
}

/* === Summary cards (result state) ===================================== */

.crawler-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

@media (max-width: 900px) {
  .crawler-summary { grid-template-columns: repeat(2, 1fr); }
}

.crawler-summary-card {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px 18px;
}

.crawler-summary-card__value {
  font-family: var(--fh);
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
}

.crawler-summary-card__label {
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-d);
  margin-top: 8px;
}

.crawler-summary--accent .crawler-summary-card__value { color: var(--accent); }
.crawler-summary--green  .crawler-summary-card__value { color: var(--green); }
.crawler-summary--amber  .crawler-summary-card__value { color: var(--amber); }
.crawler-summary--red    .crawler-summary-card__value { color: var(--red); }

/* === Section label (shared) ============================================ */

.crawler-section-label {
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-d);
  margin-bottom: 10px;
}

/* === Top issues list =================================================== */

.crawler-top-issues {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.crawler-top-issue {
  display: grid;
  grid-template-columns: 48px 1fr 2fr;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--border);
  font-size: 12px;
}

.crawler-top-issue:last-child { border-bottom: 0; }

.crawler-top-issue__count {
  font-family: var(--fm);
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  padding: 3px 0;
  border-radius: 6px;
}

.crawler-top-issue--critical .crawler-top-issue__count { background: rgba(239,68,68,0.18); color: #ef4444; }
.crawler-top-issue--high     .crawler-top-issue__count { background: rgba(245,158,11,0.18); color: #f59e0b; }
.crawler-top-issue--medium   .crawler-top-issue__count { background: rgba(234,179,8,0.18); color: #eab308; }
.crawler-top-issue--low      .crawler-top-issue__count { background: var(--surface3); color: var(--text-d); }

.crawler-top-issue__msg {
  color: var(--text);
  font-weight: 500;
}

.crawler-top-issue__fix {
  color: var(--text-d);
  font-size: 11px;
}

/* === Per-page table ==================================================== */

.crawler-table-card {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px 18px;
  overflow-x: auto;
}

.crawler-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.crawler-table th {
  text-align: left;
  padding: 8px 10px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-d);
  border-bottom: 0.5px solid var(--border);
  white-space: nowrap;
}

.crawler-table th:nth-child(1) { width: auto; }
.crawler-table th:nth-child(2),
.crawler-table th:nth-child(3),
.crawler-table th:nth-child(4) { width: 90px; }
.crawler-table th:nth-child(5),
.crawler-table th:nth-child(6) { width: 70px; text-align: right; }

.crawler-table td {
  padding: 8px 10px;
  border-bottom: 0.5px solid var(--border);
  vertical-align: middle;
}

.crawler-table tbody tr:last-child td { border-bottom: 0; }

.crawler-url {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--fm);
  font-size: 11px;
}

.crawler-words {
  text-align: right;
  font-family: var(--fm);
  font-weight: 600;
  color: var(--text);
}

.crawler-pill {
  font-family: var(--fm);
  font-size: 10px;
  padding: 2px 7px;
}

.crawler-issues-zero {
  color: var(--green);
  font-family: var(--fm);
  font-weight: 700;
}

.crawler-issues-some {
  color: var(--red);
  font-family: var(--fm);
  font-weight: 700;
}

/* === Spider empty state (Site Crawler: no client selected) ===
   Load-in: spider crawls down (spiderCrawl) on a short thread.
   Hover: spider rappels down a long thread, pauses, climbs back up,
   then the thread retracts (spiderDrop + threadExtend via .dropping). */
@keyframes spiderCrawl {
  0%   { transform: translateY(-60px) rotate(-10deg); opacity: 0; }
  20%  { opacity: 1; }
  40%  { transform: translateY(0px) rotate(8deg); }
  55%  { transform: translateY(-12px) rotate(-5deg); }
  70%  { transform: translateY(0px) rotate(4deg); }
  85%  { transform: translateY(-6px) rotate(-2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes spiderDrop {
  0%   { transform: translateY(0px) rotate(0deg); }
  30%  { transform: translateY(80px) rotate(15deg); }
  50%  { transform: translateY(100px) rotate(-8deg); }
  60%  { transform: translateY(100px) rotate(0deg); }
  80%  { transform: translateY(20px) rotate(-10deg); }
  90%  { transform: translateY(5px) rotate(5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes threadExtend {
  0%   { height: 0px; opacity: 0.4; }
  50%  { height: 110px; opacity: 0.4; }
  60%  { height: 110px; opacity: 0.4; }
  100% { height: 0px; opacity: 0; }
}

@keyframes threadDrop {
  0%   { height: 0; opacity: 0; }
  100% { height: 60px; opacity: 0.3; }
}

.spider-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem;
}

.spider-emoji-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.spider-thread {
  width: 1px;
  background: var(--text-muted);
  animation: threadDrop 0.4s ease-out forwards;
}

.spider-thread.dropping {
  animation: threadExtend 2s ease-in-out forwards;
}

.spider-emoji {
  font-size: 3rem;
  animation: spiderCrawl 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
  display: inline-block;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.spider-emoji.dropping {
  animation: spiderDrop 2s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

.spider-label {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* ==========================================================================
   v2.18 — Site Crawler loading state, summary line, flattened issues
   table, and "no issues" empty state. Added so the click flow has
   immediate visual feedback (loading) and the result view matches the
   spec layout (summary row + ALL ISSUES table with severity badges).
   ========================================================================== */

/* Immediate-feedback loading block shown between click and API response.
   Indeterminate CSS-only bar — no JS shimmer driver. */
.crawler-loading-state {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 24px;
  margin-top: 16px;
}
.crawler-loading-bar {
  position: relative;
  overflow: hidden;
  height: 4px;
  border-radius: 2px;
  background: #f3f4f6;
  margin-bottom: 12px;
}
.crawler-loading-bar__fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 40%;
  background: #6D28D9;
  border-radius: 2px;
  animation: crawlerLoadingSlide 1.4s ease-in-out infinite;
}
.crawler-loading-text {
  font-size: 13px;
  color: #525252;
  line-height: 1.5;
}
@keyframes crawlerLoadingSlide {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* Summary line above the cards — one-liner per spec. */
.crawler-summary-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: #374151;
  margin-bottom: 16px;
}
.crawler-summary-line__item strong { font-weight: 600; color: #111111; }
.crawler-summary-line__sep        { color: #d1d5db; }

/* Flattened "ALL ISSUES" table. Mirrors the per-page table card visual
   but with the spec's four columns: Page URL · Issue Type · Severity ·
   Recommendation. */
.crawler-issues-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.crawler-issues-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.crawler-issues-table th,
.crawler-issues-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: top;
}
.crawler-issues-table thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
}
.crawler-issues-table tbody tr:last-child td { border-bottom: none; }
.crawler-issues-table__url {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--fm);
  color: #374151;
}

/* Severity badges — spec colour palette. */
.crawler-sev {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.crawler-sev--critical { background: #fef2f2; color: #b91c1c; }
.crawler-sev--warning  { background: #fffbeb; color: #92400e; }
.crawler-sev--info     { background: #f0fdf4; color: #166534; }

/* "No issues found" empty state inside the complete view. */
.crawler-no-issues {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  border-radius: 12px;
  padding: 18px 20px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
  text-align: center;
}