/* Live-tool / Extract → results catalog patterns (shared).
 * Used by Asset Extractor and Tiny Shop UI demos (#component-live-tools).
 * Spec: site/docs/tool-systems.md · design.md Live Tool Archetypes.
 */
.hidden { display: none !important; }

.keep-free { margin: 0; height: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); display: flex; flex-direction: column; gap: 10px; }

.keep-free-head { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }

.keep-free-title { color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }

.keep-free-head strong { color: var(--ink); font-weight: 650; }

.keep-free-sub { color: var(--ink-4); font-size: 11px; line-height: 1.35; }

.keep-free-tip-label { margin: 0; color: var(--ink-4); font-size: 11px; }

.keep-free-tip-label[hidden] { display: none !important; }

.meter-bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }

.meter-fill { height: 100%; border-radius: inherit; background: var(--accent); transition: width .3s ease; }

.meter-fill.is-hot { background: var(--destructive); }

.keep-free-tip { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; font-size: 12px; color: var(--ink-3); }

.asset-card.is-pending {
      pointer-events: none;
      border-style: dashed;
      background: #fafafa;
    }

.asset-card.is-pending .asset-preview {
      background: var(--surface-soft);
    }

.ghost-block,
    .ghost-line {
      display: block;
      border-radius: 6px;
      background: linear-gradient(90deg, #ececec 0%, #f5f5f5 45%, #ececec 90%);
      background-size: 200% 100%;
      animation: ghost-shimmer 1.2s ease-in-out infinite;
    }

.ghost-preview {
      width: 48%;
      height: 48%;
      min-width: 40px;
      min-height: 40px;
      border-radius: 8px;
    }

.asset-card.is-extracting-count .asset-preview {
      display: grid;
      place-items: center;
      gap: 10px;
    }

.ghost-count {
      position: relative;
      z-index: 1;
      margin: 0;
      color: var(--ink-3);
      font-size: 13px;
      font-weight: 650;
      text-align: center;
      line-height: 1.3;
    }

@keyframes ghost-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ghost-block,
  .ghost-line {
    animation: none;
    background: #ececec;
  }
}

/* Keep status + breakdown visible while scrolling the asset grid. */
.results-sticky {
  position: sticky;
  top: var(--site-nav-page-offset);
  z-index: 20;
  background: var(--bg);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 10px 20px rgba(20, 20, 20, 0.06);
}

.results-chrome { display: none; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 12px 16px; border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--surface-soft); }

.results-chrome.is-visible { display: flex; }

.status-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; min-width: 0; color: var(--ink-3); font-size: 13px; line-height: 1.4; }

.status-line:empty { display: none; }

.status-line svg { width: 16px; height: 16px; flex: 0 0 auto; }

.status-line.is-ok { color: #1f6b2e; }

.status-line.error { color: var(--destructive); }

.status-line.is-loading { color: var(--ink-3); }

.status-line .status-spinner {
      transform-origin: center;
      animation: status-spin 0.85s linear infinite;
    }

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

@media (prefers-reduced-motion: reduce) {
  .status-line .status-spinner { animation: none; }
}

.status-line .status-fail {
      color: var(--destructive);
      font: inherit;
      font-weight: 650;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: none;
      box-shadow: none;
      transform: none;
      text-decoration: underline;
      text-underline-offset: 2px;
      cursor: pointer;
    }

.status-line .status-fail:hover,
    .status-line .status-fail:focus-visible {
      color: #8f2f36;
      outline: 0;
      box-shadow: none;
    }

.status-line .status-muted { color: var(--ink-4); font-weight: 400; }

.status-line .status-paused {
      color: #7a5c00;
      font: inherit;
      font-weight: 650;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: none;
      box-shadow: none;
      transform: none;
      text-decoration: underline;
      text-underline-offset: 2px;
      cursor: pointer;
    }

.status-line .status-paused:hover,
    .status-line .status-paused:focus-visible {
      color: #5c4500;
      outline: 0;
      box-shadow: none;
    }

[id^="results-failed"],
    [id^="results-type-"] {
      /* Clear sticky chrome + breakdown + float nav when jumping to a section */
      scroll-margin-top: calc(var(--site-nav-page-offset) + 200px);
    }

.extract-breakdown {
      display: none;
      padding: 12px 16px 14px;
      border: 1px solid var(--border);
      border-top: 0;
      background: var(--surface);
      gap: 10px;
      flex-direction: column;
    }

.extract-breakdown.is-visible { display: flex; }

.extract-breakdown-head {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 12px;
      align-items: baseline;
      justify-content: space-between;
      font-size: 13px;
      color: var(--ink-2);
    }

.extract-breakdown-title {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 650;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--ink-3);
    }

.extract-breakdown-count { color: var(--ink-2); }

.extract-breakdown-count strong { color: var(--ink); font-weight: 650; }

.extract-breakdown-batch { color: var(--ink-4); font-weight: 400; }

.extract-breakdown-bar {
      display: flex;
      height: 22px;
      border-radius: 8px;
      overflow: hidden;
      background: var(--border);
      gap: 2px;
    }

.extract-breakdown-seg {
      min-width: 4px;
      height: 100%;
      border: 0;
      padding: 0;
      cursor: default;
    }

.extract-breakdown-seg.is-clickable { cursor: pointer; }

.extract-breakdown-seg.is-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.extract-breakdown-seg[data-bucket="loaded"] { background: #236832; }

.extract-breakdown-seg[data-bucket="type-svg"] { background: #236832; }

.extract-breakdown-seg[data-bucket="type-png"] { background: #1d6b8a; }

.extract-breakdown-seg[data-bucket="type-jpg"] { background: #8a6a1d; }

.extract-breakdown-seg[data-bucket="type-webp"] { background: #5b4d9a; }

.extract-breakdown-seg[data-bucket="type-gif"] { background: #8a4d6b; }

.extract-breakdown-seg[data-bucket="type-ico"] { background: #4d6b5b; }

.extract-breakdown-seg[data-bucket="type-other"] { background: #6b7280; }

.extract-breakdown-seg[data-bucket="missing"] { background: var(--destructive); }

.extract-breakdown-seg[data-bucket="blocked"] { background: #b8860b; }

.extract-breakdown-seg[data-bucket="pace"] { background: #b8860b; }

.extract-breakdown-seg[data-bucket="other"] { background: #c45c5c; }

.extract-breakdown-seg[data-bucket="skipped"] { background: #c4c4c4; }

.extract-breakdown-seg[data-bucket="remaining"] { background: #e8e8e8; }

.extract-breakdown-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 14px;
      margin: 0;
      padding: 0;
      list-style: none;
      font-size: 12px;
      color: var(--ink-3);
    }

.extract-breakdown-legend button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0;
      padding: 0;
      border: 0;
      background: none;
      color: inherit;
      font: inherit;
      cursor: pointer;
      border-radius: 4px;
    }

.extract-breakdown-legend button:hover { color: var(--ink); }

.extract-breakdown-legend button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.extract-breakdown-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      flex: 0 0 auto;
    }

.extract-breakdown-dot[data-bucket="loaded"] { background: #236832; }

.extract-breakdown-dot[data-bucket="type-svg"] { background: #236832; }

.extract-breakdown-dot[data-bucket="type-png"] { background: #1d6b8a; }

.extract-breakdown-dot[data-bucket="type-jpg"] { background: #8a6a1d; }

.extract-breakdown-dot[data-bucket="type-webp"] { background: #5b4d9a; }

.extract-breakdown-dot[data-bucket="type-gif"] { background: #8a4d6b; }

.extract-breakdown-dot[data-bucket="type-ico"] { background: #4d6b5b; }

.extract-breakdown-dot[data-bucket="type-other"] { background: #6b7280; }

.extract-breakdown-dot[data-bucket="missing"] { background: var(--destructive); }

.extract-breakdown-dot[data-bucket="blocked"] { background: #b8860b; }

.extract-breakdown-dot[data-bucket="pace"] { background: #b8860b; }

.extract-breakdown-dot[data-bucket="other"] { background: #c45c5c; }

.extract-breakdown-dot[data-bucket="skipped"] { background: #c4c4c4; }

.extract-breakdown-dot[data-bucket="remaining"] { background: #e8e8e8; border: 1px solid var(--border); }

.section-head { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); background: var(--surface-soft); font-family: var(--font-mono); font-size: 11px; font-weight: 650; text-transform: uppercase; color: var(--ink-3); letter-spacing: .04em; }

.section-head-label { min-width: 0; }

.section-head.is-failed { color: var(--destructive); background: #fff5f5; border-bottom-color: #e8c4c4; }

.section-head.is-paused { color: #7a5c00; background: #fffbeb; border-bottom-color: #e6d9a8; }

.section-head .button { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-weight: 650; }

.section-head-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }

.pace-countdown {
      color: #7a5c00;
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 650;
      text-transform: none;
      letter-spacing: 0;
      white-space: nowrap;
    }

/* Sticky in-progress strip — always above the grid when pace leftovers exist */
    .pace-sticky {
      display: none;
      flex-wrap: wrap;
      gap: 10px 14px;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      border: 1px solid #e6d9a8;
      border-top: 0;
      background: #fffbeb;
      color: #7a5c00;
    }

.pace-sticky.is-visible { display: flex; }

.pace-sticky.is-progress {
      background: #fff4d6;
      border-color: #d4b45a;
      box-shadow: inset 0 0 0 1px rgba(184, 134, 11, 0.12);
    }

.pace-sticky-main {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 10px;
      align-items: baseline;
      min-width: 0;
    }

.pace-sticky-title {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 650;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

.pace-sticky-status {
      font-size: 13px;
      font-weight: 650;
    }

.pace-sticky-status[data-pace-countdown] {
      font-variant-numeric: tabular-nums;
    }

.pace-sticky.is-progress .pace-sticky-status {
      animation: pace-pulse 1.2s ease-in-out infinite;
    }

@keyframes pace-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .pace-sticky.is-progress .pace-sticky-status { animation: none; }
}

.pace-sticky-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.result-section.is-paused {
      border: 1px solid #e6d9a8;
      border-radius: var(--radius);
      margin-bottom: 12px;
      overflow: hidden;
    }

#results-root {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; padding: 16px; }

.result-section.is-failed .asset-grid { background: #fffafa; }

.result-section.is-paused .asset-grid { background: #fffdf5; }

.asset-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; background: #fff; overflow: visible; min-width: 0; }

.asset-card.is-failed { border-color: #e8c4c4; background: #fff8f8; }

.asset-card.is-paused { border-color: #e6d9a8; background: #fffdf8; }

.badge-fail { position: absolute; top: 8px; left: 8px; z-index: 2; min-height: 22px; padding: 2px 7px; border-radius: var(--radius-chip); background: var(--destructive); color: #fff; font-size: 10px; font-weight: 650; }

.badge-paused { position: absolute; top: 8px; left: 8px; z-index: 2; min-height: 22px; padding: 2px 7px; border-radius: var(--radius-chip); background: #b8860b; color: #fff; font-size: 10px; font-weight: 650; }

.asset-preview-fail { display: grid; place-items: center; gap: 6px; color: var(--destructive); font-size: 12px; font-weight: 650; text-align: center; }

.asset-preview-fail.is-paused { color: #7a5c00; }

.asset-preview-fail svg { width: 22px; height: 22px; }

.asset-preview {
      position: relative;
      display: grid;
      place-items: center;
      height: 120px;
      padding: 14px;
      background: repeating-conic-gradient(#f4f4f4 0% 25%, #fafafa 0% 50%) 50% / 16px 16px;
      border-bottom: 1px solid var(--border);
      overflow: hidden;
      border-radius: 8px 8px 0 0;
    }

.asset-preview > img {
      display: block;
      width: 100%;
      height: 100%;
      max-width: none;
      max-height: none;
      margin: 0;
      border: 0;
      pointer-events: none;
      object-fit: contain;
      object-position: center;
    }

.badge-dup { position: absolute; top: 8px; right: 8px; z-index: 2; min-height: 22px; padding: 2px 7px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 650; }

.asset-meta { padding: 10px; min-width: 0; }

.asset-meta-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; color: var(--ink-3); font-size: 11px; line-height: 1.35; }

.asset-meta-name { min-width: 0; flex: 1 1 auto; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.asset-meta-size { flex: 0 0 auto; color: var(--ink-4); white-space: nowrap; }

.asset-meta-size.is-failed { color: var(--destructive); font-weight: 650; }

.asset-meta-size.is-paused { color: #7a5c00; font-weight: 650; }

.asset-error.is-paused { color: #7a5c00; }

.swatch-row { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 10px; }

.swatch { width: 18px; height: 18px; border: 1px solid var(--border-strong); border-radius: 4px; cursor: pointer; padding: 0; background: transparent; }

.swatch-label { width: 100%; margin: 0 0 4px; padding: 0 10px; color: var(--ink-4); font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; }

.asset-note { margin: 0; padding: 0 10px 10px; color: var(--ink-4); font-size: 10px; line-height: 1.35; }

.asset-error { margin: 0; padding: 0 10px 10px; color: var(--destructive); font-size: 11px; }

/* Pinned over preview — keeps cards shorter; same click handlers via data-copy / data-download */
    .asset-actions {
      position: absolute;
      right: 8px;
      bottom: 8px;
      z-index: 3;
      display: inline-flex;
      flex-wrap: nowrap;
      gap: 6px;
      padding: 0;
      margin: 0;
      pointer-events: auto;
    }

.asset-actions .button.icon-btn {
      width: 30px;
      min-width: 30px;
      min-height: 30px;
      padding: 0;
      display: inline-grid;
      place-items: center;
      background: #fff;
      border-color: var(--border-strong);
      box-shadow: 0 1px 3px rgba(20, 20, 20, 0.12);
    }

.asset-actions .button.icon-btn:hover:not(:disabled) {
      background: var(--surface-soft);
    }

.asset-actions .button.icon-btn svg { width: 16px; height: 16px; }

.asset-actions .ghost-btn {
      box-shadow: none;
    }

.asset-card:focus-within { z-index: 2; }

@media (max-width: 720px) {
  .results-chrome { flex-direction: column; align-items: stretch; }
}