/* Web Audit dashboard - small additions the pt- portal library doesn't ship,
   because in production a full site header/footer/global stylesheet supplies
   them. This standalone app has neither, so the handful of things it still
   needs (base body rules, buttons, form fields, a few status colors, the
   inline SVG trend chart, the live-log terminal) live here. Loaded last,
   after pt-tokens.css / brand-tokens.css / portal.css. Every value below
   traces to a token already defined in one of those three files. */

*{box-sizing:border-box}
body{margin:0;background:var(--portal-canvas);color:var(--text);font-family:var(--font-sans);line-height:1.5}
a{color:var(--accent-lit);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- Buttons: portal.css assumes the site header/footer already defined
   these (its own comment says so); this app has no site header, so define
   them once, token-based, and let --ac (set by whatever pillar/severity
   context wraps the button) recolor the primary variant. ---- */
.am-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:var(--radius);
  font-size:var(--fs-sm);font-weight:700;text-decoration:none;line-height:1.3;border:1px solid transparent;
  cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),filter var(--dur) var(--ease)}
.am-btn:hover{text-decoration:none}
.am-btn-primary{background:var(--ac,var(--accent));border-color:var(--ac,var(--accent));color:#fff}
.am-btn-primary:hover{filter:brightness(1.08)}
.am-btn-ghost{background:transparent;border-color:var(--portal-border);color:#fff}
.am-btn-ghost:hover{background:rgba(255,255,255,.06)}
.am-btn-sm{padding:7px 13px;font-size:var(--fs-xs)}

/* ---- Score / delta / status utilities, reused across domain cards, KPI
   tiles and the run-history table. Colors match the hexes portal.css already
   uses internally for is-low/is-bad/gate states, so nothing new is invented. ---- */
/* ---- Rail domain picker (partials/rail.php): the recent-25 <select> replacing the
   old unbounded per-domain <a> list, sized to fill the rail's own padding. ---- */
.pt-rail-domainpick{padding:0 var(--sp-3) var(--sp-4)}
.pt-rail-domainsel{width:100%}

.pt-score{font-weight:800;font-variant-numeric:tabular-nums}
.pt-score.good{color:var(--gate-open)}
.pt-score.ok{color:#e0a14f}
.pt-score.bad{color:#e06054}
.pt-score-big{font-size:var(--fs-3xl);font-weight:800;color:#fff;line-height:1}
.pt-grade-tag{font-size:var(--fs-sm);color:var(--text-mute);text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
.pt-delta.up{color:var(--gate-open)}
.pt-delta.down{color:#e06054}
.pt-delta.flat{color:var(--text-mute)}
.pt-chip-bad{background:rgba(224,96,84,.16);color:#e06054}
.pt-nav-empty{display:block;padding:9px 12px;color:var(--text-mute);font-size:var(--fs-sm)}

/* Partial audit (reality finding #1): a bot-blocked/unreachable homepage means the grade
   is not representative. Mute the headline score to a neutral tone (never a confident
   good/ok/bad color) and print an amber caveat line alongside it. */
.pt-score.partial,.pt-score-big.partial{color:var(--text-mute)}
.pt-partial-note{display:block;color:#e0a14f;font-size:var(--fs-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;margin-top:4px}

/* ---- Public (unauthenticated) pages: landing + login. No rail, centered
   canvas, single card. ---- */
.pt-public{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-6);background:var(--portal-canvas);padding:var(--sp-8)}
.pt-public-logo img{height:44px;display:block}
.pt-public-tag{color:var(--text-mute);font-size:var(--fs-sm);margin:-8px 0 0}
.pt-public .pt-card{width:100%;max-width:420px}

/* ---- Staff sign-in (login.php): the two-column portal login, Google-only.
   Mirrors the arisingmedia.us .lg-* login layout, every value token-based. ---- */
.lg-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}
@media(max-width:880px){.lg-wrap{grid-template-columns:1fr}.lg-brand{display:none}}
.lg-brand{position:relative;padding:var(--sp-16) var(--sp-12);overflow:hidden;
  background:radial-gradient(1200px 500px at 20% -10%,rgba(27,108,179,.25),transparent 60%),var(--portal-rail);
  display:flex;flex-direction:column;justify-content:center;gap:var(--sp-6)}
.lg-brand::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ribbon)}
.lg-brand img{height:38px;align-self:flex-start}
.lg-brand h2{font-size:var(--fs-3xl);font-weight:800;color:#fff;line-height:1.1;letter-spacing:-.01em}
.lg-brand p{color:var(--text-mute);font-size:var(--fs-md);max-width:42ch;line-height:1.6}
.lg-points{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-2)}
.lg-points span{display:flex;align-items:center;gap:10px;color:var(--text);font-size:var(--fs-sm)}
.lg-tick{width:9px;height:9px;border-radius:50%;background:var(--gate-open);flex:0 0 auto}
.lg-panel{display:flex;align-items:center;justify-content:center;padding:var(--sp-12);background:var(--portal-canvas)}
.lg-card{width:100%;max-width:380px}
.lg-card .eyebrow{font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-lit)}
.lg-card h1{font-size:var(--fs-2xl);font-weight:800;color:#fff;margin:6px 0 4px}
.lg-card h1 .nm{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lg-card .lede{color:var(--text-mute);font-size:var(--fs-sm);margin-bottom:var(--sp-6)}
.lg-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px;
  border-radius:var(--radius);border:1px solid var(--portal-border);background:#fff;color:#1f2328;
  font-weight:600;font-size:var(--fs-sm);text-decoration:none;margin-bottom:var(--sp-4);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.lg-google:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.25);text-decoration:none}
.lg-alert{background:rgba(224,96,84,.16);color:#e06054;border-radius:var(--radius);
  padding:10px 12px;font-size:var(--fs-xs);margin-bottom:var(--sp-4)}
.lg-note{color:var(--text-mute);font-size:var(--fs-sm);background:var(--portal-rail);
  border:1px solid var(--portal-border);border-radius:var(--radius);padding:12px 14px}
.lg-note code{color:var(--accent-lit);font-family:ui-monospace,monospace}
.lg-foot{margin-top:var(--sp-6);font-size:var(--fs-xs);color:var(--text-mute);text-align:center}

/* status banner on the public landing (landing.php), reference status.html cadence */
.pt-statusbar{display:flex;align-items:center;gap:14px;padding:var(--sp-4) var(--sp-5);border-radius:var(--radius-lg);
  border:1px solid var(--portal-border);margin-bottom:var(--sp-5)}
.pt-statusbar.ok{background:linear-gradient(120deg,rgba(34,166,79,.16),transparent);border-left:4px solid var(--gate-open)}
.pt-statusbar.warn{background:linear-gradient(120deg,rgba(224,96,84,.16),transparent);border-left:4px solid #e06054}
.pt-statusbar .big{width:14px;height:14px;border-radius:50%;flex:0 0 auto}
.pt-statusbar.ok .big{background:var(--gate-open);box-shadow:0 0 0 5px rgba(34,166,79,.18)}
.pt-statusbar.warn .big{background:#e06054;box-shadow:0 0 0 5px rgba(224,96,84,.18)}
.pt-statusbar b{display:block;color:#fff;font-size:var(--fs-sm)}
.pt-statusbar span.sub{color:var(--text-mute);font-size:var(--fs-xs)}

/* health-check dots on the landing page */
.pt-health-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pt-health-list li{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--text)}
.pt-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.pt-dot.good{background:var(--gate-open)}
.pt-dot.bad{background:#e06054}

/* ---- Form fields: run/re-run URL box, staff login. portal.css never styles
   inputs (the real site's global form CSS does that in production). ---- */
.pt-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-4)}
.pt-field label{font-size:var(--fs-xs);color:var(--text-mute);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.pt-field input{background:var(--portal-canvas);border:1px solid var(--portal-border);color:#fff;
  border-radius:var(--radius);padding:10px 14px;font:inherit;font-size:var(--fs-sm)}
.pt-field input:focus{outline:2px solid var(--accent-lit);outline-offset:1px}
.pt-runbar{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:flex-end}
.pt-runbar .pt-field{flex:1;min-width:240px;margin-bottom:0}

/* ---- Staff run form: URL + audit-type segmented control + crawl-depth + an
   archive picker. Segmented radios render as a pill row; --ac accents the active
   segment. Every value token-based (pt-tokens.css / portal.css). ---- */
.pt-runform{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:flex-end}
.pt-runform .pt-field{margin-bottom:0}
.pt-field-url{flex:1 1 260px;min-width:220px}
.pt-field-depth input{width:96px}
.pt-segbar{display:inline-flex;background:var(--portal-canvas);border:1px solid var(--portal-border);
  border-radius:var(--radius);padding:3px;gap:2px}
.pt-seg{position:relative;display:inline-flex}
.pt-seg input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.pt-seg span{display:inline-flex;align-items:center;padding:7px 13px;border-radius:calc(var(--radius) - 3px);
  font-size:var(--fs-xs);font-weight:700;color:var(--text-mute);white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.pt-seg input:hover + span{color:#fff}
.pt-seg input:checked + span{background:var(--ac,var(--accent));color:#fff}
.pt-seg input:focus-visible + span{outline:2px solid var(--accent-lit);outline-offset:1px}
.pt-select{background:var(--portal-canvas);border:1px solid var(--portal-border);color:#fff;
  border-radius:var(--radius);padding:8px 12px;font:inherit;font-size:var(--fs-sm);cursor:pointer}
.pt-select:focus{outline:2px solid var(--accent-lit);outline-offset:1px}
.pt-runmeta{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);
  flex-wrap:wrap;margin-top:var(--sp-3)}
.pt-archive{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);
  color:var(--text-mute);font-weight:600;text-transform:uppercase;letter-spacing:.04em}

/* ---- Collapsible category sections: <details>/<summary> standing in for an
   accordion, since portal.css has no accordion component. ---- */
.pt-acc > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--sp-3)}
.pt-acc > summary::-webkit-details-marker{display:none}
.pt-acc > summary::after{content:'\25BE';margin-left:auto;color:var(--text-mute);transition:transform var(--dur) var(--ease)}
.pt-acc[open] > summary::after{transform:rotate(180deg)}

/* raw check JSON tucked inside an insight card */
.pt-raw{margin-top:var(--sp-2)}
.pt-raw summary{cursor:pointer;font-size:var(--fs-xs);color:var(--text-mute)}
.pt-raw pre{background:var(--portal-rail);border:1px solid var(--portal-border);border-radius:var(--radius-sm);
  padding:var(--sp-3);font-size:11px;color:var(--text);overflow-x:auto;margin-top:6px}

/* ---- Inline SVG score-trend chart (domain.php). No chart library. ---- */
.pt-trend-title{margin:0 0 2px;font-size:var(--fs-md);font-weight:700;color:#fff}
.pt-trend-caption{margin:0 0 var(--sp-3);font-size:var(--fs-xs);color:var(--text-mute)}
.pt-trend{width:100%;height:auto;display:block}
.pt-trend .grid{stroke:var(--portal-border);stroke-width:1}
.pt-trend .axis-label{fill:var(--text-mute);font-size:10px;font-family:var(--font-sans)}
.pt-trend .line{fill:none;stroke:var(--ac,var(--accent-lit));stroke-width:2.5}
.pt-trend circle.good{fill:var(--gate-open)}
.pt-trend circle.ok{fill:#e0a14f}
.pt-trend circle.bad{fill:#e06054}
/* Arising Media standard reference line - the same GaugeRenderer::STANDARD benchmark
   the gauge target ring uses, so the gauge and the trend never disagree. Painted last
   in the SVG (see domain.php) and drawn bolder/brighter than the data line so it never
   gets lost behind the score history, even right around the 90 benchmark itself. */
.pt-trend .standard-line{stroke:#ffcb66;stroke-width:2;stroke-dasharray:5 4;opacity:.95}
.pt-trend .standard-label{fill:#ffcb66;font-size:10px;font-weight:700;font-family:var(--font-sans)}

/* ---- Live-log terminal (logs.php). ---- */
.pt-logbox{font-family:ui-monospace,monospace;font-size:12.5px;background:var(--portal-rail);color:#cdd6e4;
  border:1px solid var(--portal-border);border-radius:var(--radius-lg);padding:var(--sp-4);height:62vh;overflow-y:auto}
.pt-logbox .l{white-space:pre-wrap;padding:1px 0}
.pt-logbox .l-info{color:#9fe0b8}
.pt-logbox .l-warn{color:#f8c112}
.pt-logbox .l-error{color:#f0685c}
.pt-logbox .ts{color:#6b7688}
.pt-logbox .ph{color:#6d83b3}

/* ---- Domain cards (index.php): readability. The domain is the thing you scan for,
   so promote it to a legible white title (was a dim 11px cobalt chip); enlarge the
   numeric score for at-a-glance scanning; and render the run date as plain AA-muted
   text instead of a dimmed monospace pill. All scoped to .pt-audit so the shared
   .pt-domain-pill used elsewhere (rail, run form) is untouched. ---- */
.pt-audit>.pt-domain-pill{
  align-self:flex-start;
  font-size:var(--fs-sm);
  color:var(--text-strong);
  background:transparent;
  border-color:transparent;
  padding:0;
}
.pt-audit h4{
  font-size:var(--fs-lg);
  color:var(--text-strong);
  display:flex;
  align-items:baseline;
  gap:.35em;
}
.pt-audit h4 .pt-score.good,
.pt-audit h4 .pt-score.ok,
.pt-audit h4 .pt-score.bad{font-size:var(--fs-2xl);line-height:1}
.pt-audit-time{
  font-size:var(--fs-xs);
  color:var(--text-mute);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ---- Domain page (domain.php): last-run metric widgets rendered inline from the
   persisted per-run data (category_scores) + export + previous-run dropdown. ---- */
.dm-runsel{margin-left:var(--sp-3);font-size:var(--fs-sm);vertical-align:middle}
.dm-runhead{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.dm-grade{display:flex;flex-direction:column;gap:2px}
.dm-grade b{font-size:var(--fs-lg);color:var(--text-strong)}
.dm-exports{display:flex;gap:var(--sp-2);flex-wrap:wrap}

/* ---- Homepage capture (top-right of the domain page): the auth-gated
   /audit/{id}/home.png route (never public, mirrors report.{html,pdf}). ---- */
.dm-headrow{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-5);flex-wrap:wrap}
.dm-shot{display:block;flex:0 0 auto;width:200px;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--portal-border);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.dm-shot img{display:block;width:100%;height:auto}
.dm-head-actions{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-3)}
.dm-remove-form{margin:0}
.dm-remove-btn{color:#e06054;border-color:rgba(224,96,84,.35)}
.dm-remove-btn:hover{background:rgba(224,96,84,.12)}

/* ---- Report-grade radial gauges (GaugeRenderer - shared with ReportBuilder, so the
   report and the dashboard can never draw two different-looking gauges). Each gauge
   is a button: click reveals the matching .dm-drill panel below. Replaces the old
   flat .dm-metric tiles. ---- */
.dm-gauges{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-3)}
@media(max-width:720px){.dm-gauges{grid-template-columns:repeat(2,1fr)}}
.dm-gauge{background:var(--portal-card);border:1px solid var(--portal-border);border-top:3px solid var(--portal-border);
  border-radius:var(--radius-lg);padding:var(--sp-4) var(--sp-3);display:flex;flex-direction:column;align-items:center;gap:2px;
  cursor:pointer;font:inherit;color:inherit;width:100%;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.dm-gauge:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.3)}
.dm-gauge:focus-visible{outline:2px solid var(--accent-lit);outline-offset:2px}
.dm-gauge[aria-expanded="true"]{box-shadow:0 0 0 2px var(--accent-lit) inset}
.dm-gauge .gauge{display:block;margin:4px auto 2px}
.dm-gauge-band{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.dm-gauge-cat{font-size:var(--fs-sm);font-weight:700;color:var(--text-strong);margin-top:2px}
.dm-gauge-target{font-size:var(--fs-xs);color:var(--text-mute)}

/* No completed run yet - never a prefilled/placeholder gauge, an explicit message instead. */
.dm-empty{background:var(--portal-card);border:1px dashed var(--portal-border);border-radius:var(--radius-lg);
  padding:var(--sp-6);text-align:center;margin-top:var(--sp-4)}

/* ---- Category drill-down (revealed on gauge click): LIGHT surface on purpose - report
   parity + readability against the dark portal shell - with a per-check <select> that
   swaps which check's detail is visible (dashboard.js), and the same PDF/HTML export
   links the run header already has. One panel per category, pre-rendered server-side. ---- */
.dm-drill{background:#fff;color:#0f172a;border-radius:var(--radius-lg);padding:var(--sp-5) var(--sp-6);
  margin-top:var(--sp-4);box-shadow:0 20px 44px rgba(0,0,0,.35)}
.dm-drill-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.dm-drill-head h3{margin:0;font-family:var(--font-sans);font-size:var(--fs-lg);color:#0E1726}
.dm-check-select{background:#fff;color:#0f172a;border:1px solid #d7dce3;border-radius:var(--radius);
  padding:8px 12px;font:inherit;font-size:var(--fs-sm);cursor:pointer;max-width:100%}
.dm-check-select:focus{outline:2px solid var(--accent-lit);outline-offset:1px}
.pt-sub-light{color:#64748b;font-size:var(--fs-sm);margin:0}

/* Performance "what to fix": LH13 opportunities (WebP/AVIF, compression, render-
   blocking, payload) + the resource inventory's image counts - persisted per audit,
   the 35-point gap the dashboard used to throw away. */
.dm-fix{background:#f4f8f6;border:1px solid #d9e6e0;border-left:3px solid #1F9249;border-radius:12px;
  padding:14px 16px;margin-bottom:var(--sp-4)}
.dm-fix h4{margin:0 0 6px;color:#0E1726;font-size:var(--fs-md)}
.dm-fix-sub{color:#475569;font-size:13px;margin:0 0 8px}
.dm-opp-list{margin:0;padding-left:18px;color:#0f172a;font-size:13px}
.dm-opp-list li{margin-bottom:8px}
.dm-opp-save{display:inline-block;margin-left:8px;font-weight:700;color:#1F9249;font-size:12px}
.dm-opp-list p{margin:2px 0 0;color:#475569;font-size:12.5px}

/* Deep-tier payload breakdown (issue #12): total-site + per-page transferred KB by
   kind (html/image/script/style), plus the heaviest individual assets. Absent on
   Free/Full - resources.json only carries `payload` when the deep per-asset pass ran. */
.dm-payload{background:#fff;border:1px solid #d9e6e0;border-radius:12px;padding:14px 16px;margin:0 0 var(--sp-4)}
.dm-payload h4{margin:0 0 6px;color:#0E1726;font-size:var(--fs-md)}
.dm-payload-bars{margin-top:8px}
.dm-payload-row{display:grid;grid-template-columns:90px 1fr 76px;align-items:center;gap:10px;margin-bottom:7px;font-size:12.5px;color:#334155}
.dm-payload-bar{height:9px;border-radius:99px;background:#eef1f4;overflow:hidden}
.dm-payload-bar-fill{height:100%;border-radius:99px}
.dm-payload-html{background:#94a3b8}.dm-payload-image{background:#1F9249}.dm-payload-script{background:#2563eb}.dm-payload-style{background:#f59e0b}
.dm-payload-val{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.dm-payload-largest{margin-top:10px;border-top:1px solid #eef1f4;padding-top:8px}
.dm-payload-largest ul{list-style:none;margin:6px 0 0;padding:0}
.dm-payload-largest li{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:4px 0;border-bottom:1px dashed #eef1f4}
.dm-payload-asset-url{color:#334155;word-break:break-all}
.dm-payload-asset-bytes{color:#1F9249;font-weight:700;white-space:nowrap}

.dm-chk-detail{border-top:1px solid #eef1f4;padding-top:var(--sp-3)}
.dm-chk-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;gap:var(--sp-3)}
.dm-chk-name{font-weight:700;font-size:14px;color:#0E1726}
.dm-chk-score{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.dm-chk-skip{font-size:11px;font-weight:700;color:#64748b;background:#eef1f4;border-radius:99px;padding:3px 9px;white-space:nowrap}
.dm-chk-why{font-size:12.5px;color:#475569;margin:0 0 5px;line-height:1.45}
.dm-chk-cost{font-size:12.5px;color:#7a2f27;background:#fdf1ef;border-radius:8px;padding:8px 10px;margin:0 0 6px}
.dm-chk-rec{margin:6px 0 0;padding-left:18px;font-size:12.5px;color:#0f172a}
.dm-chk-rec li{margin-bottom:3px}
.dm-chk-ok{font-size:12px;color:#1F9249;font-weight:600;margin:4px 0 0}
.dm-drill-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-4)}
/* .am-btn-ghost is styled for the dark portal shell (white text, transparent bg) -
   invisible on the drill-down's light surface. Override just inside .dm-drill. */
.dm-drill .am-btn-ghost{background:transparent;border-color:#d7dce3;color:#0f172a}
.dm-drill .am-btn-ghost:hover{background:#f1f5f4}