/* pagewise-scan.css — Pagewise Scan sub-tab (Optimize panel).
   Translated from the approved mockup (pagewise-scan-v3.html). Everything is scoped under `.pw` and
   every class is `pw-`-prefixed so it cannot collide with or leak into the rest of the app. The
   mockup's palette lives here as component tokens (--pw-*) on `.pw` — one token block, no scattered
   literals. Light theme, Upranke violet. No inline styles ship: dynamic widths/colours are set on
   elements from JS (the documented dynamic-value exception). */

.pw {
  --pw-bg:        #f7f7fb;
  --pw-panel:     #ffffff;
  --pw-panel-2:   #f4f3fa;
  --pw-line:      #e9e8f1;
  --pw-line-2:    #dcdae8;
  --pw-text:      #1c1b2e;
  --pw-text-mid:  #605d78;
  --pw-text-dim:  #939099;
  --pw-violet:      #6D28D9;   /* = global --accent (matches the app-wide UI) */
  --pw-violet-dark: #5B21B6;   /* = global --accent-hover */
  --pw-violet-soft: #EDE9FE;   /* = global --accent-light */
  --pw-violet-glow: rgba(109, 40, 217, .18);
  --pw-green:     #10a969;
  --pw-green-soft:#e5f6ef;
  --pw-amber:     #d98a0b;
  --pw-amber-soft:#fcf2df;
  --pw-coral:     #e0455e;
  --pw-coral-soft:#fbe9ec;
  --pw-pass:      #10a969;
  --pw-warn:      #d98a0b;
  --pw-fail:      #e0455e;
  --pw-nm:        #8b8a97;
  --pw-nm-soft:   #eeeef2;
  --pw-mono:      'SF Mono', 'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace;
  --pw-r:         16px;
  --pw-shadow:    0 1px 3px rgba(28, 27, 46, .04), 0 6px 20px rgba(28, 27, 46, .05);
  --pw-shadow-lg: 0 2px 6px rgba(28, 27, 46, .06), 0 14px 40px rgba(109, 75, 216, .10);

  color: var(--pw-text);
  line-height: 1.5;
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 2px 40px;
}
.pw * { box-sizing: border-box; }

/* ── scan bar ─────────────────────────────────────────────────────────── */
.pw-scanbar { background: var(--pw-panel); border: 1px solid var(--pw-line); border-radius: var(--pw-r); padding: 24px; margin-bottom: 22px; box-shadow: var(--pw-shadow); }
.pw-scanbar-title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }
.pw-scanbar-sub { color: var(--pw-text-mid); font-size: 13.5px; margin-bottom: 18px; max-width: 66ch; }
.pw-scanbar-sub b { color: var(--pw-text); font-weight: 600; }

.pw-mode-toggle { display: inline-flex; background: var(--pw-panel-2); border: 1px solid var(--pw-line-2); border-radius: 11px; padding: 4px; margin-bottom: 16px; gap: 2px; }
.pw-mode-opt { font-size: 13px; font-weight: 600; color: var(--pw-text-mid); padding: 9px 18px; border-radius: 8px; cursor: pointer; border: none; background: none; transition: all .18s; display: flex; align-items: center; gap: 8px; }
.pw-mode-opt.active { background: var(--pw-panel); color: var(--pw-violet); box-shadow: 0 1px 4px rgba(28, 27, 46, .08); }
.pw-mode-opt:disabled { opacity: .6; cursor: default; }
.pw-mo-ico { width: 15px; height: 15px; }
.pw-coming { font-family: var(--pw-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; background: var(--pw-nm-soft); color: var(--pw-nm); padding: 2px 6px; border-radius: 5px; margin-left: 6px; }

.pw-input-row { display: flex; gap: 11px; }
.pw-url-input { flex: 1; font-family: var(--pw-mono); font-size: 13.5px; padding: 13px 15px; border: 1px solid var(--pw-line-2); border-radius: 11px; color: var(--pw-text); background: var(--pw-bg); outline: none; transition: border-color .15s, box-shadow .15s; }
.pw-url-input:focus { border-color: var(--pw-violet); box-shadow: 0 0 0 3px var(--pw-violet-glow); background: #fff; }
.pw-scan-btn { font-weight: 600; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--pw-violet), var(--pw-violet-dark)); border: none; border-radius: 11px; padding: 0 24px; cursor: pointer; transition: filter .15s, transform .05s; white-space: nowrap; box-shadow: 0 6px 18px var(--pw-violet-glow); }
.pw-scan-btn:hover { filter: brightness(1.06); }
.pw-scan-btn:active { transform: translateY(1px); }
.pw-scan-btn:disabled { opacity: .5; cursor: default; box-shadow: none; }
.pw-mode-hint { font-size: 12.5px; color: var(--pw-text-mid); margin-top: 10px; }

/* ── error ────────────────────────────────────────────────────────────── */
.pw-error { display: none; background: var(--pw-coral-soft); border: 1px solid var(--pw-coral); color: var(--pw-coral); border-radius: 12px; padding: 14px 16px; margin-bottom: 20px; font-size: 13.5px; }
.pw-error.show { display: block; }

/* ── scanning state ───────────────────────────────────────────────────── */
.pw-scanning { display: none; background: var(--pw-panel); border: 1px solid var(--pw-line); border-radius: var(--pw-r); padding: 44px; text-align: center; margin-bottom: 22px; box-shadow: var(--pw-shadow); }
.pw-scanning.show { display: block; }
.pw-radar { width: 50px; height: 50px; margin: 0 auto 18px; border: 3px solid var(--pw-line-2); border-top-color: var(--pw-violet); border-radius: 50%; animation: pw-spin .8s linear infinite; }
@keyframes pw-spin { to { transform: rotate(360deg); } }
.pw-scan-log { font-family: var(--pw-mono); font-size: 12.5px; color: var(--pw-text-mid); min-height: 20px; transition: opacity .2s; }

/* ── results shell ────────────────────────────────────────────────────── */
.pw-results { display: none; }
.pw-results.show { display: block; }
.pw-results.show > * { animation: pw-rise .5s ease backwards; }
.pw-results.show > *:nth-child(2) { animation-delay: .05s; }
.pw-results.show > *:nth-child(3) { animation-delay: .1s; }
.pw-results.show > *:nth-child(4) { animation-delay: .15s; }
@keyframes pw-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.pw-panel { background: var(--pw-panel); border: 1px solid var(--pw-line); border-radius: var(--pw-r); box-shadow: var(--pw-shadow); }
.pw-panel-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--pw-text-dim); margin-bottom: 4px; }
.pw-panel-sub { font-size: 12px; color: var(--pw-text-dim); }

.pw-hero { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.pw-hero-card { padding: 22px; }
.pw-score-card { background: linear-gradient(160deg, #fff, var(--pw-violet-soft)); position: relative; overflow: hidden; }
.pw-score-top { display: flex; align-items: baseline; gap: 10px; }
.pw-score-num { font-size: 62px; font-weight: 750; letter-spacing: -.04em; line-height: 1; color: var(--pw-violet); }
.pw-score-den { font-family: var(--pw-mono); font-size: 14px; color: var(--pw-text-mid); }
.pw-score-grade { display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--pw-green); background: var(--pw-green-soft); padding: 5px 12px; border-radius: 20px; }
.pw-score-grade--mid { color: var(--pw-amber); background: var(--pw-amber-soft); }
.pw-score-grade--bad { color: var(--pw-coral); background: var(--pw-coral-soft); }
.pw-score-grade--nm  { color: var(--pw-nm); background: var(--pw-nm-soft); }
.pw-score-bar { height: 7px; background: rgba(28, 27, 46, .06); border-radius: 4px; margin-top: 16px; overflow: hidden; }
.pw-score-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--pw-violet), var(--pw-green)); border-radius: 4px; transition: width 1.1s ease; }
.pw-score-meta { font-family: var(--pw-mono); font-size: 11px; color: var(--pw-text-dim); margin-top: 12px; display: flex; align-items: center; gap: 7px; }
.pw-score-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pw-nm); }

.pw-chart-card { padding: 20px 18px; display: flex; flex-direction: column; }
.pw-chart-head { margin-bottom: 10px; }
.pw-chart-box { flex: 1; position: relative; min-height: 168px; }

/* honest empty-state (benchmark / trend — backend does not provide these yet) */
.pw-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; min-height: 168px; color: var(--pw-text-mid); }
.pw-empty-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--pw-panel-2); border: 1px dashed var(--pw-line-2); }
.pw-empty-text { font-size: 12.5px; max-width: 32ch; }

/* ── counts strip ─────────────────────────────────────────────────────── */
.pw-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.pw-count { background: var(--pw-panel); border: 1px solid var(--pw-line); border-radius: 13px; padding: 15px 17px; cursor: pointer; transition: border-color .15s, transform .08s, box-shadow .15s; text-align: left; box-shadow: var(--pw-shadow); }
.pw-count:hover { transform: translateY(-2px); box-shadow: var(--pw-shadow-lg); }
.pw-count.active { border-color: var(--pw-violet); box-shadow: 0 0 0 1px var(--pw-violet), var(--pw-shadow-lg); }
.pw-count-n { font-size: 30px; font-weight: 750; letter-spacing: -.03em; line-height: 1; }
.pw-count-l { font-size: 12px; color: var(--pw-text-mid); margin-top: 6px; font-weight: 500; display: flex; align-items: center; gap: 7px; }
.pw-count-sw { width: 9px; height: 9px; border-radius: 3px; }
.pw-count--pass .pw-count-n { color: var(--pw-pass); } .pw-count--pass .pw-count-sw { background: var(--pw-pass); }
.pw-count--warn .pw-count-n { color: var(--pw-warn); } .pw-count--warn .pw-count-sw { background: var(--pw-warn); }
.pw-count--fail .pw-count-n { color: var(--pw-fail); } .pw-count--fail .pw-count-sw { background: var(--pw-fail); }
.pw-count--nm   .pw-count-n { color: var(--pw-nm); }   .pw-count--nm   .pw-count-sw { background: var(--pw-nm); }

.pw-mid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }

/* ── AI engine access grid ────────────────────────────────────────────── */
.pw-engines { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; margin-top: 14px; }
.pw-engine { display: flex; align-items: center; gap: 11px; padding: 13px 14px; background: var(--pw-bg); border: 1px solid var(--pw-line); border-radius: 12px; }
.pw-engine-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 12px; font-family: var(--pw-mono); flex-shrink: 0; }
.pw-engine-info { flex: 1; min-width: 0; }
.pw-engine-name { font-size: 13.5px; font-weight: 600; }
.pw-engine-state { font-family: var(--pw-mono); font-size: 11px; margin-top: 2px; }
.pw-engine-badge { font-size: 10px; font-family: var(--pw-mono); text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 6px; }
.pw-engine--ok .pw-engine-ico { background: var(--pw-green-soft); color: var(--pw-green); }
.pw-engine--ok .pw-engine-state { color: var(--pw-green); }
.pw-engine--ok .pw-engine-badge { background: var(--pw-green-soft); color: var(--pw-green); }
.pw-engine--blocked .pw-engine-ico { background: var(--pw-coral-soft); color: var(--pw-coral); }
.pw-engine--blocked .pw-engine-state { color: var(--pw-coral); }
.pw-engine--blocked .pw-engine-badge { background: var(--pw-coral-soft); color: var(--pw-coral); }
.pw-engine--nm .pw-engine-ico { background: var(--pw-nm-soft); color: var(--pw-nm); }
.pw-engine--nm .pw-engine-state { color: var(--pw-nm); }
.pw-engine--nm .pw-engine-badge { background: var(--pw-nm-soft); color: var(--pw-nm); }

/* ── check cards ──────────────────────────────────────────────────────── */
.pw-filter-row { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 14px; flex-wrap: wrap; gap: 8px; }
.pw-filter-title { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.pw-filter-clear { font-family: var(--pw-mono); font-size: 11.5px; color: var(--pw-violet); background: none; border: none; cursor: pointer; display: none; }
.pw-filter-clear.show { display: inline; }
.pw-cards { display: flex; flex-direction: column; gap: 11px; }
.pw-card { background: var(--pw-panel); border: 1px solid var(--pw-line); border-radius: 13px; overflow: hidden; transition: border-color .15s, box-shadow .15s; box-shadow: var(--pw-shadow); }
.pw-card:hover { box-shadow: var(--pw-shadow-lg); }
.pw-card-head { display: flex; align-items: center; gap: 13px; padding: 15px 17px; cursor: pointer; }
.pw-chip { font-family: var(--pw-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 4px 9px; border-radius: 6px; white-space: nowrap; }
.pw-chip--pass { color: var(--pw-pass); background: var(--pw-green-soft); }
.pw-chip--warn { color: var(--pw-warn); background: var(--pw-amber-soft); }
.pw-chip--fail { color: var(--pw-fail); background: var(--pw-coral-soft); }
.pw-chip--nm   { color: var(--pw-nm); background: var(--pw-nm-soft); }
.pw-card-label { flex: 1; font-size: 14.5px; font-weight: 550; letter-spacing: -.01em; }
.pw-card-metric { min-width: 120px; }
.pw-card-found { font-family: var(--pw-mono); font-size: 12px; color: var(--pw-text-mid); text-align: right; display: block; }
.pw-metric-bar { height: 5px; background: var(--pw-panel-2); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.pw-metric-bar-fill { height: 100%; width: 0; border-radius: 3px; }
.pw-fill--pass { background: var(--pw-pass); }
.pw-fill--warn { background: var(--pw-warn); }
.pw-fill--fail { background: var(--pw-fail); }
.pw-fill--nm   { background: var(--pw-nm); }
.pw-card-toggle { color: var(--pw-text-dim); font-size: 19px; transition: transform .2s; user-select: none; }
.pw-card.open .pw-card-toggle { transform: rotate(45deg); }
.pw-card-body { display: none; padding: 0 17px 17px; border-top: 1px solid var(--pw-line); }
.pw-card.open .pw-card-body { display: block; animation: pw-fade .25s ease; }
@keyframes pw-fade { from { opacity: 0; } to { opacity: 1; } }
.pw-field { padding-top: 14px; }
.pw-field-k { font-family: var(--pw-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--pw-text-dim); margin-bottom: 5px; }
.pw-field-v { font-size: 13.5px; color: var(--pw-text); line-height: 1.55; }
.pw-field-v--ev { font-family: var(--pw-mono); font-size: 12.5px; color: var(--pw-text-mid); background: var(--pw-panel-2); border: 1px solid var(--pw-line); border-radius: 8px; padding: 9px 12px; word-break: break-word; }
.pw-nm-note { font-size: 12.5px; color: var(--pw-text-mid); background: var(--pw-panel-2); border: 1px dashed var(--pw-line-2); border-radius: 8px; padding: 11px 13px; margin-top: 14px; font-style: italic; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 980px) { .pw-hero { grid-template-columns: 1fr; } .pw-counts { grid-template-columns: repeat(2, 1fr); } .pw-mid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pw-input-row { flex-direction: column; } .pw-engines { grid-template-columns: 1fr; } .pw-card-metric { display: none; } }
@media (prefers-reduced-motion: reduce) { .pw *, .pw *::before, .pw *::after { animation: none !important; transition: none !important; } }