/* Built by `manage.py build_css`. Edit core/static/core/css/*.css, not this file. */
/* ---- 00-tokens.css ---- */
/* DeCrawl design tokens (Blueprint palette). Fonts: IBM Plex Sans + IBM Plex Mono (Google Fonts). */
:root{--bg:#F3F6F9;--surface:#FFFFFF;--surface2:#EAF0F5;--sunken:#E3EAF1;--line:#E3E9EF;--border:#D8E0E8;--borderstrong:#B7C4D1;--text:#0F2742;--text2:#2A3F57;--muted:#4F6275;--faint:#8FA0B1;--primary:#12305C;--primaryhover:#0B2145;--onprimary:#FFFFFF;--link:#0E6E8C;--strong:#12305C;--onstrong:#FFFFFF;--onstrongmuted:#A9C3D9;--ink:#0F2742;--accent:#0097B8;--accentsoft:#E3F4F8;--accentline:#9FD6E4;--chart:#5B8DB0;--danger:#B8322C;--dangersoft:#FBE6E4;--ok:#16723F;--oksoft:#E4F3EA;--warn:#955005;--warnsoft:#FBEEDB;--skel:#D5DEE7;--skel2:#E3EAF1;--shotbg:#F7F9FB;--shotborder:#DDE4EB;--btnlight:#FFFFFF;--onbtnlight:#12305C}
[data-theme="dark"]{--bg:#0A1A2C;--surface:#10243A;--surface2:#142C45;--sunken:#17314D;--line:#1B3450;--border:#22405F;--borderstrong:#36597C;--text:#E3ECF4;--text2:#C3D2E0;--muted:#93A7BB;--faint:#4E6A86;--primary:#3BB8DA;--primaryhover:#62CAE6;--onprimary:#0A1A2C;--link:#6FD0EA;--strong:#1B4A73;--onstrong:#FFFFFF;--onstrongmuted:#A9C8E0;--ink:#1B3A5C;--accent:#3BB8DA;--accentsoft:#11384A;--accentline:#2A6C84;--chart:#5FA3CC;--danger:#F0746D;--dangersoft:#3A1C1E;--ok:#3FCB7E;--oksoft:#12301F;--warn:#E8A33D;--warnsoft:#33240D;--skel:#22405F;--skel2:#1B3450;--shotbg:#0E2034;--shotborder:#22405F;--btnlight:#FFFFFF;--onbtnlight:#12305C}

/* Base classes used in the mockups */
body{margin:0;background:var(--bg);color:var(--text);font-family:"IBM Plex Sans",system-ui,sans-serif;font-variant-numeric:tabular-nums}
h1,h2,h3,h4,p{margin:0}
.serif{font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:600;letter-spacing:-0.02em}
.lbl{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:"IBM Plex Mono",monospace}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:8px;font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;box-sizing:border-box;white-space:nowrap}
.btn-primary{background:var(--primary);color:var(--onprimary)}
.btn-primary:hover{background:var(--primaryhover);color:var(--onprimary)}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--borderstrong)}
.btn-light{background:var(--btnlight);color:var(--onbtnlight)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px}
a{color:var(--link)}a:hover{color:var(--primaryhover)}
.muted{color:var(--muted)}
.bad{color:var(--danger)}
.good{color:var(--ok)}
.nav a{color:var(--text);text-decoration:none;font-size:15px}


/* ---- 05-fonts.css ---- */
/* IBM Plex, self-hosted (spec section 2: no requests to Google). OFL licensed. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url("/static/core/fonts/ibm-plex-mono-latin-ext.216ee1a35b06.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url("/static/core/fonts/ibm-plex-mono-latin.6708425c446b.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url("/static/core/fonts/ibm-plex-sans-latin-ext.d313794bd9fd.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url("/static/core/fonts/ibm-plex-sans-latin.d28498895ed7.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---- 10-base.css ---- */
/* Base layout, headers, menus, forms and shared components.
   Colors only through the token variables in 00-tokens.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;display:flex;flex-direction:column;line-height:1.5}
main{flex:1 0 auto}
img,svg{display:block}
button{font:inherit;color:inherit}
input,select,textarea{font:inherit;color:var(--text)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Icons: Lucide style, colored by currentColor */
.icon{flex-shrink:0}
.icon-btn{width:40px;height:40px;border:1px solid var(--border);background:var(--surface);color:var(--text);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;border-radius:10px;padding:0;text-decoration:none}
.icon-btn.round{border-radius:20px}
.icon-btn:hover{border-color:var(--borderstrong)}
[data-theme-toggle] .icon-sun{display:none}
[data-theme="dark"] [data-theme-toggle] .icon-sun{display:block}
[data-theme="dark"] [data-theme-toggle] .icon-moon{display:none}

/* Logo */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.logo:hover{color:var(--text)}
.logo span{font-weight:700;font-size:18px;letter-spacing:-0.01em}

/* Public header (01, m01) */
/* Headers and footer span the screen, but their content stays in the same
   1440 px box as the page (.page, .lp-wrap), with their own side padding
   inside it (--edge-*). % is the body width, so no scrollbar drift. */
:root{--edge-public:max(clamp(16px,8vw,120px),calc((100% - 1440px) / 2 + 120px));--edge-app:max(40px,calc((100% - 1440px) / 2 + 40px))}
.site-header{height:72px;display:flex;align-items:center;gap:32px;padding:0 var(--edge-public);background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.site-header .spacer,.app-header .spacer{flex-grow:1}
.site-header .nav{display:flex;gap:32px;align-items:center}
.site-header .nav a{white-space:nowrap}

/* Logged-in header (09, m09) */
.app-header{height:64px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:36px;padding:0 var(--edge-app);position:relative;z-index:10}
.app-header .app-nav{display:flex;gap:28px;align-self:stretch}
.app-header .app-nav a{display:flex;align-items:center;text-decoration:none;font-size:15px;color:var(--muted)}
.app-header .app-nav a.active{color:var(--text)}
.app-header .app-nav a.active{font-weight:600;box-shadow:inset 0 -2px 0 var(--primary)}
.app-header .actions{display:flex;align-items:center;gap:12px}
.plan-badge{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:18px;background:var(--accentsoft);text-decoration:none;white-space:nowrap;font-size:13px;color:var(--link)}
.plan-badge:hover{color:var(--link)}
.plan-badge-short,.plan-badge-tiny{display:none}
.btn-sm{height:38px;padding:0 16px;font-size:14px}
.avatar-btn{width:36px;height:36px;border-radius:18px;background:var(--sunken);color:var(--muted);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}

/* Account dropdown (15) */
.account{position:relative}
.dropdown{position:absolute;right:0;top:48px;width:300px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 48px rgba(15,39,66,0.18);z-index:50;overflow:hidden}
.menu-head{padding:14px 16px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--line)}
.menu-head strong{font-size:14px;font-weight:600}
.menu-head span{font-size:13px}
.menu-group{padding:6px 0;display:flex;flex-direction:column}
.menu-group+.menu-group{border-top:1px solid var(--line)}
.menu-item{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;text-decoration:none;color:var(--text);font-size:15px;background:none;border:0;width:100%;text-align:left;cursor:pointer}
.menu-item:hover{background:var(--surface2);color:var(--text)}
.menu-item .muted{font-size:13px}

/* Full-screen mobile menus (m15, m17) */
.mobile-menu{position:fixed;inset:0;background:var(--bg);z-index:100;overflow-y:auto;display:flex;flex-direction:column}
.mobile-menu .menu-bar{height:60px;display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--line);flex-shrink:0}
.mobile-menu.app .menu-bar{background:var(--surface);border-color:var(--border)}
.site-menu-links{padding:12px 4px;display:flex;flex-direction:column}
.site-menu-links a{padding:16px;font-size:20px;font-weight:600;text-decoration:none;color:var(--text);border-bottom:1px solid var(--line)}
.site-menu-cta{padding:24px 16px;display:flex;flex-direction:column;gap:12px}
.site-menu-cta .btn{width:100%}
.site-menu-cta p{font-size:14px;text-align:center}
.app-menu-links{padding:8px 4px;display:flex;flex-direction:column;background:var(--surface);border-bottom:1px solid var(--border)}
.app-menu-links a{padding:16px;font-size:17px;font-weight:600;text-decoration:none;color:var(--text)}
.app-menu-card .menu-item{padding:14px 16px}
.app-menu-card{margin:16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
body.menu-open{overflow:hidden}

/* Footer (01) */
.site-footer{padding:28px var(--edge-public) 36px;display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line)}
.site-footer .row{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.site-footer a,.site-footer span,.site-footer p{font-size:13px}
.site-footer .spacer{flex-grow:1}
.site-footer p a{text-decoration:underline}

/* Page containers */
.page{padding:40px 120px 64px;display:flex;flex-direction:column;gap:24px;max-width:1440px;width:100%;margin:0 auto}
.page-title{font-size:36px}
.narrow{max-width:760px;margin:0 auto;width:100%}

/* Messages: aligned with the page content column, not the full viewport */
.messages{list-style:none;margin:0 auto;padding:12px 120px 0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:1440px;width:100%}
.link-btn{background:none;border:0;padding:0;color:var(--link);font:inherit;cursor:pointer;text-decoration:none}
.link-btn:hover{color:var(--primaryhover)}
.message{padding:10px 14px;border-radius:8px;font-size:14px;background:var(--accentsoft);color:var(--text);border:1px solid var(--accentline)}
.message.error{background:var(--dangersoft);border-color:var(--danger)}
.message.success{background:var(--oksoft);border-color:var(--ok)}
/* Review 18: failed payment. A thin bar under the app header, and a line on Plan and usage. */
.past-due-banner{padding:8px var(--edge-app);background:var(--dangersoft);color:var(--text);border-bottom:1px solid var(--danger);font-size:14px;line-height:1.45}
.past-due-form{display:inline}
.past-due-link{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--danger);text-decoration:underline;cursor:pointer}
.past-due-link:hover{color:var(--text)}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px;font-weight:600}
.input{height:44px;padding:0 14px;border:1px solid var(--borderstrong);border-radius:8px;background:var(--surface);font-size:15px;width:100%}
.input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.errorlist{list-style:none;margin:0;padding:0;color:var(--danger);font-size:13px}
.btn[disabled],.btn.disabled{opacity:.5;cursor:not-allowed}
.btn-danger{background:var(--surface);color:var(--danger);border-color:var(--danger)}

/* Toggle switch */
.switch{position:relative;display:inline-flex;width:44px;height:24px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch .track{position:absolute;inset:0;border-radius:12px;background:var(--borderstrong);transition:background .15s;cursor:pointer}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:9px;background:#fff;transition:transform .15s}
.switch input:checked+.track{background:var(--primary)}
.switch input:checked+.track::after{transform:translateX(20px)}
.switch input:focus-visible+.track{outline:2px solid var(--accent);outline-offset:2px}

/* Status pills (Reports, file page). Never color alone: always a word. */
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:12px;font-size:12px;font-weight:600;white-space:nowrap}
.pill .dot{width:7px;height:7px;border-radius:4px;background:currentColor}
.pill.running{background:var(--accentsoft);color:var(--link)}
.pill.done{background:var(--oksoft);color:var(--ok)}
.pill.warn{background:var(--warnsoft);color:var(--warn)}
.pill.failed{background:var(--dangersoft);color:var(--danger)}
.pill.idle{background:var(--sunken);color:var(--muted)}

/* Consent banner */
.consent-banner{position:fixed;left:16px;right:16px;bottom:16px;max-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 48px rgba(15,39,66,0.18);padding:18px;z-index:200;display:flex;flex-direction:column;gap:8px}
.consent-banner p{font-size:14px}
.consent-banner .consent-heading{font-weight:600}
.consent-actions{display:flex;gap:10px;margin-top:6px}
.consent-actions .btn{height:38px;font-size:14px}

/* Desktop only / mobile only, at the one breakpoint (900 px). They only
   hide: shown, an element keeps its own display. */
@media (min-width: 768px){.only-mobile{display:none!important}}
@media (max-width: 767px){.only-desktop{display:none!important}}

/* Report filters: a search box, a select with its label, an active filter
   chip (the link removes the filter). */
.search{display:flex;align-items:center;gap:8px;height:38px;width:220px;padding:0 12px;border:1px solid var(--borderstrong);border-radius:8px;background:var(--surface);color:var(--muted)}
.search .icon{width:16px;height:16px}
.search input{border:0;outline:0;background:transparent;font-size:14px;width:100%;min-width:0;height:100%}
.search input::-webkit-search-cancel-button{cursor:pointer}
.search:focus-within{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.select{position:relative;display:flex;align-items:center;gap:8px;height:38px;min-width:0;border:1px solid var(--borderstrong);border-radius:8px;padding:0 10px 0 12px;background:var(--surface);white-space:nowrap}
.select .muted{font-size:13px}
.select select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font-size:14px;font-weight:600;padding-right:18px;cursor:pointer;max-width:180px;min-width:0}
.select select:focus-visible{outline:none}
.select:focus-within{outline:2px solid var(--accent);outline-offset:0}
.select .icon{position:absolute;right:10px;width:14px;height:14px;color:var(--muted);pointer-events:none}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;max-width:100%;padding:0 10px;border-radius:15px;background:var(--accentsoft);color:var(--link);font-size:13px;font-weight:600;text-decoration:none}
.chip .icon{width:14px;height:14px}

/* Step 2 explainer: Screenshot → Compare → Fix (reports/_explainer.html).
   Horizontal; on mobile vertical, numbered, with a line between the steps. */
.xp-card{padding:20px 24px;display:flex;flex-direction:column;gap:14px}
.xp{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.xp-step{display:flex;align-items:center;gap:8px}
.xp-icon{width:32px;height:32px;border-radius:16px;background:var(--accentsoft);color:var(--link);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.xp-icon .icon{width:17px;height:17px}
.xp-text{display:flex;flex-direction:column;gap:4px}
.xp-name{font-size:14px;font-weight:600}
.xp-num,.xp-desc{display:none}
.xp-arrow{color:var(--muted);display:flex}
.xp-arrow .icon{width:20px;height:20px}
.xp.on-strong .xp-icon{background:color-mix(in srgb,var(--onstrong) 14%,transparent);color:var(--onstrong)}
.xp.on-strong .xp-name{color:var(--onstrong)}
.xp.on-strong .xp-desc,.xp.on-strong .xp-arrow{color:var(--onstrongmuted)}
@media (max-width: 767px){
  .xp-card{padding:20px;gap:16px}
  .xp{flex-direction:column;align-items:stretch;gap:0}
  .xp.is-compact{display:none}
  .xp-arrow{display:none}
  .xp-step{align-items:flex-start;gap:14px;padding-bottom:16px;position:relative}
  .xp-step:not(:last-child)::before{content:"";position:absolute;left:19px;top:44px;bottom:0;width:2px;background:var(--muted);opacity:.4}
  .xp-icon{width:40px;height:40px;border-radius:20px}
  .xp-icon .icon{width:19px;height:19px}
  .xp-name{font-size:16px}
  .xp-num{display:inline}
  .xp-desc{display:block;font-size:14px;line-height:1.45;color:var(--muted)}
}

/* Tablets (768-1099 px): desktop layout with less side padding, and the
   public header drops the plan badge (it is on the Plan page and in the menu). */
@media (min-width: 768px) and (max-width: 1099px){
  .page{padding:32px 40px 56px}
  .messages{padding:12px 40px 0}
  .site-header,.site-header .nav{gap:20px}
  .site-header .site-badge{display:none}
  .app-header{gap:24px}
}

/* HTMX loading */
.htmx-request .hide-while-loading{opacity:.5}

@media (max-width: 767px){
  .site-header{height:60px;gap:10px;padding:0 16px}
  .site-header .nav{display:none}
  .site-header .btn{height:38px;padding:0 12px;font-size:13px}
  .app-header{height:60px;gap:10px;padding:0 16px}
  .past-due-banner{padding:8px 16px}
  .app-header .app-nav{display:none}
  .app-header .actions{gap:10px}
  .plan-badge{height:30px;padding:0 10px;border-radius:15px;font-size:12px}
  .plan-badge-long{display:none}
  .plan-badge-short{display:inline}
  .page{padding:24px 16px 48px;gap:20px}
  .page-title{font-size:28px}
  .messages{padding:12px 16px 0}
  .site-footer .row{gap:16px}
}
@media (max-width: 400px){
  .app-header,.app-header .actions{gap:6px}
  .app-header{padding:0 12px}
  .plan-badge{padding:0 8px}
}
/* Under 360 px (WCAG 1.4.10 reflow at 320): the badge says "7,500 left" and
   the long sign-up button stays in the page and the menu only. */
@media (max-width: 359px){
  .plan-badge-short{display:none}
  .plan-badge-tiny{display:inline}
  .site-header .site-cta-long{display:none}
}

/* Footer "Cookie settings" is a button styled like the footer links */
.site-footer .link-btn{font-size:13px;color:var(--text)}

/* Error pages (400, 403, 404, 429) */
.error-page{align-items:center;justify-content:center;min-height:60vh}
.error-card{max-width:520px;width:100%;padding:40px;text-align:center;display:flex;flex-direction:column;gap:12px}
.error-title{font-size:28px}
.error-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:12px}

/* Legal pages: readable width, normal headings, no boxes */
.legal{max-width:760px;gap:16px}
.legal-updated{font-size:14px;margin-top:-8px}
.legal h2{font-size:20px;margin:16px 0 0;letter-spacing:-0.01em}
.legal p,.legal li{font-size:16px;color:var(--text2)}
.legal ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.legal a,.legal .link-btn{text-decoration:underline}
.legal .consent-status{padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);color:var(--text)}
.legal-table{overflow-x:auto}
.legal table{border-collapse:collapse;width:100%;font-size:15px}
.legal th,.legal td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.legal th{font-weight:600;color:var(--text)}

/* Reports list (09) additions: search once there are more than 20 files,
   and the Delete link. The list layout itself is in 40-upload.css. */
.rl-search .search{width:280px;max-width:100%}
.rl-delete-name{font-size:14px;overflow-wrap:anywhere}

/* HTMX loading indicator (HTMX's own injected style is off for the CSP) */
.htmx-indicator{opacity:0;transition:opacity .2s ease-in}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}

/* Skip link: first focusable element, visible on focus */
.skip-link{position:absolute;left:16px;top:-48px;z-index:300;padding:10px 16px;border-radius:8px;background:var(--primary);color:var(--onprimary);font-weight:600;text-decoration:none}
.skip-link:focus{top:12px;color:var(--onprimary)}
/* Review 28: a part of the page that didn't load ("This didn't load. Try again."). */
.load-error{margin:0;padding:12px 16px;font-size:14px;color:var(--text)}
.load-error a{color:var(--link);text-decoration:underline}

/* ---- 20-public.css ---- */
/* Public pages: landing (01, m01) and pricing (08, m08).
   lp-* classes are the landing page; pr-* the pricing page, which reuses a few lp-* pieces. */
/* Review 19: long headings on public pages split into even lines (no word left alone). */
.site-header~main h1,.site-header~main h2{text-wrap:balance}

.lp,.pr{line-height:normal}
.lp-wrap{max-width:1440px;width:100%;margin:0 auto;padding-left:clamp(20px,8.33vw,120px);padding-right:clamp(20px,8.33vw,120px)}
.lp h2.serif{font-size:40px;line-height:1.1}
.lp h3{font-weight:600}
.btn-lg{height:52px;padding:0 26px;font-size:16px}
.lp-link{color:var(--link)}
.lp-wrong{color:var(--danger)}
.lp-ok{display:inline-flex;color:var(--ok)}
.lp-head{display:flex;flex-direction:column;gap:14px}
.lp-body{font-size:18px;line-height:1.55;color:var(--text2)}
.lp-body-narrow{max-width:720px}
.lp-body-sm{font-size:17px;line-height:1.55;color:var(--text2)}
.lp-section{padding-bottom:112px;display:flex;flex-direction:column;gap:36px}
.lp-narrow{display:none}
#how-it-works,#report,#pricing,#faq{scroll-margin-top:24px}

/* Hero */
.lp-hero{position:relative;padding-top:80px;padding-bottom:64px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px;align-items:center}
.lp-hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.lp-grid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:48px 48px;background-position:right 1px top -1px;opacity:.75;-webkit-mask-image:radial-gradient(ellipse 60% 75% at 78% 45%,#000 35%,transparent 80%);mask-image:radial-gradient(ellipse 60% 75% at 78% 45%,#000 35%,transparent 80%)}
.lp-sq{position:absolute;width:38px;height:38px;border-radius:4px;background:var(--accentsoft);border:1px solid var(--accentline);opacity:.8}
.lp-hero-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:22px}
.lp-hero h1{font-size:54px;line-height:1.06}
.lp-sub{font-size:20px;line-height:1.5;color:var(--text2);max-width:560px}
.lp-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.lp-micro{font-size:14px;text-wrap:pretty}  /* review 23: "No card needed." wraps as a unit (nbsp in the template) */
.lp-hero-card{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}
.lp-fix{position:relative;padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 12px 32px rgba(15,39,66,0.10)}
.lp-fix-head{display:flex;justify-content:space-between;align-items:center}
.lp-fix-head .mono{font-size:12px}
.lp-fixed{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:12px;background:var(--oksoft);color:var(--ok);font-size:12px;font-weight:600}
.lp-fixed .icon{width:13px;height:13px}
.lp-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lp-val{display:flex;flex-direction:column;gap:4px}
.lp-val>.mono{align-self:flex-start}
.lp-big{position:relative;font-size:30px;font-weight:500}
.lp-mid{font-size:18px;font-weight:500}
del.lp-mid{font-weight:400}
.lp-strike{position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:currentColor;transform-origin:left center}
.lp-caption{font-size:13px;padding:0 4px}

/* Page crop: a small browser frame with a product page */
.lp-shot{background:var(--shotbg);border:1px solid var(--shotborder);border-radius:8px;overflow:hidden}
.lp-shot-bar{height:22px;background:var(--surface2);display:flex;align-items:center;gap:5px;padding:0 8px}
.lp-shot-bar>span:not(.mono){width:6px;height:6px;border-radius:3px;background:var(--borderstrong)}
.lp-shot-bar .mono{margin-left:6px;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-shot-body{position:relative;overflow:hidden;padding:12px;display:flex;gap:12px;align-items:flex-start}
.lp-thumb{width:64px;height:64px;border-radius:6px;background:var(--skel2);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--faint)}
.lp-thumb .icon{width:28px;height:28px;stroke-width:1.6}
.lp-thumb-lg{width:96px;height:96px}
.lp-thumb-lg .icon{width:34px;height:34px;stroke-width:2}
.lp-product{position:relative;display:flex;flex-direction:column;gap:6px;flex-grow:1;min-width:0}
.lp-title{font-size:13px;font-weight:600;color:var(--text)}
.lp-hero .lp-title{font-size:15px}
.lp-price-sm{font-size:14px;font-weight:600;color:var(--text2)}
.lp-boxed{align-self:flex-start;padding:2px 8px;border:2px solid var(--accent);border-radius:6px;font-weight:700;font-size:16px;background:var(--accentsoft)}
.lp-boxed-sm{font-size:13px}
.lp-boxed-live{position:relative;isolation:isolate;align-self:flex-start;padding:2px 8px;font-weight:700;font-size:20px}
.lp-box{position:absolute;inset:0;border:2px solid var(--accent);border-radius:6px;background:var(--accentsoft);z-index:-1}
.lp-cart{align-self:flex-start;font-size:11px;font-weight:600;padding:4px 10px;border-radius:12px;background:var(--skel);color:var(--muted)}
.lp-scan{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,var(--accentsoft) 96%,var(--accent) 96%,var(--accent) 100%);opacity:0;pointer-events:none}

/* Hero animation (messaging doc, visual direction 2): the scan sweeps the page crop,
   the value on the page gets boxed, the wrong value is struck, the right one and
   "Fixed" appear. Review 11: it loops. One 8 s cycle = the 4 s animation, then the
   fix held for 4 s, then a reset. It only runs while app.js marks the card
   .is-playing (on screen, tab visible); otherwise, without JS and with reduced
   motion the card shows its resting styles above, which ARE the final frame.
   Only opacity, transform and color change: no layout shift between loops. */
@media (prefers-reduced-motion: no-preference){
  @keyframes lpScan{0%,4%{transform:translateY(-100%);opacity:0}6%{opacity:1}24%{transform:translateY(0);opacity:1}28%,100%{transform:translateY(0);opacity:0}}
  @keyframes lpBox{0%,25%{opacity:0;transform:scale(1.35)}32%,100%{opacity:1;transform:scale(1)}}
  @keyframes lpStrike{0%,32%{transform:scaleX(0)}40%,100%{transform:scaleX(1)}}
  @keyframes lpRed{0%,32%{color:var(--text)}40%,100%{color:var(--danger)}}
  @keyframes lpIn{0%,38%{opacity:0;transform:translateY(8px)}45%,100%{opacity:1;transform:none}}
  @keyframes lpBadge{0%,45%{opacity:0;transform:scale(.8)}50%,100%{opacity:1;transform:none}}
  @keyframes lpSettle{0%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}30%{opacity:.8}100%{opacity:.8;transform:none}}
  .is-playing .lp-anim-scan{animation:lpScan 8s infinite}
  .is-playing .lp-anim-box{animation:lpBox 8s infinite}
  .is-playing .lp-anim-strike{animation:lpStrike 8s infinite}
  .is-playing .lp-anim-red{animation:lpRed 8s infinite}
  .is-playing .lp-anim-in{animation:lpIn 8s infinite}
  .is-playing .lp-anim-badge{animation:lpBadge 8s infinite}
  .lp-sq{animation:lpSettle 1.8s cubic-bezier(.2,.7,.2,1) .3s both}
}

/* Credibility line */
.lp-cred{margin-bottom:96px;padding:18px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center}
.lp-cred p{font-size:15px;color:var(--text2)}

/* Problem table */
.lp-problem{padding:24px 32px 8px}
.lp-prow{display:grid;grid-template-columns:220px 1fr 1fr;gap:12px;padding:16px 0;border-top:1px solid var(--border);align-items:center;font-size:18px;font-weight:600}
.lp-prow:last-child{border-bottom:1px solid var(--border)}
.lp-prow>.mono.muted{font-size:15px;font-weight:400}
.lp-prow-head{padding:0 0 10px;border-top:0}
.lp-stars{display:inline-flex;flex-wrap:wrap;gap:2px;min-width:0;color:var(--warn)}
.lp-stars .on{display:inline-flex;gap:2px}
.lp-stars .on .icon{fill:currentColor}

/* How it works */
.lp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.lp-steps li{border-top:1px solid var(--borderstrong);padding-top:22px;display:flex;flex-direction:column;gap:10px}
.lp-steps h3{font-size:21px}
.lp-steps p{font-size:15px;line-height:1.55;color:var(--text2)}
.lp-step-num{display:flex;align-items:center;gap:10px;color:var(--muted)}
.lp-step-num .icon{width:20px;height:20px}
.lp-step-num .mono{font-size:13px}
/* Review 21: what each step costs, on the number's line (the steps don't get taller). Never wraps. */
.lp-step-tag{margin-left:auto;white-space:nowrap;padding:3px 8px;border:1px solid var(--border);border-radius:999px}
.lp-step-key .lp-step-tag{border-color:var(--accentline)}
.lp-steps .lp-step-key{border-top:3px solid var(--link);padding-top:20px}
.lp-step-key .lp-step-num{color:var(--link)}
.lp-privacy{display:flex;align-items:center;gap:10px}
.lp-privacy p{font-size:15px;color:var(--text2)}

/* Why it's different */
.lp-why{gap:80px}
.lp-rule{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:72px;align-items:center}
.lp-rule .lp-head{gap:16px}
.lp-rule-card{padding:28px;display:flex;flex-direction:column;gap:16px}
.lp-rule-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px;align-items:start}
.lp-rule-data,.lp-rule-page{display:flex;flex-direction:column;gap:10px}
.lp-rule-value{font-size:24px;font-weight:500}
.lp-passed{display:flex;align-items:center;gap:8px;font-size:14px}
.lp-passed .icon{width:16px;height:16px}
.lp-wrong-bar{padding:10px 12px;border-radius:8px;background:var(--dangersoft);color:var(--danger);font-size:14px;font-weight:600}
.lp-pair-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.lp-pair-cell{padding:36px;display:flex;flex-direction:column;gap:14px}
.lp-pair-cell+.lp-pair-cell{border-left:1px solid var(--border)}
.lp-pair-cell h3{font-size:24px;line-height:1.25}
/* Review 18: a static copy of the step 2 pop-up choice (no real controls) */
.lp-choice{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.lp-choice-q{font-size:14px;font-weight:600}
.lp-choice-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lp-choice-num{display:inline-flex;align-items:center;height:34px;min-width:96px;padding:0 12px;border:1px solid var(--borderstrong);border-radius:8px;font-size:14px}
.lp-choice-pill{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:17px;border:1px solid var(--borderstrong);font-size:13px;font-weight:600}
.lp-choice-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px}
.lp-choice-list li{display:flex;align-items:center;gap:10px}
.lp-choice-radio{width:16px;height:16px;border-radius:8px;border:1.5px solid var(--borderstrong);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.lp-choice-list .is-on .lp-choice-radio{border:2px solid var(--primary)}
.lp-choice-list .is-on .lp-choice-radio::after{content:"";width:6px;height:6px;border-radius:3px;background:var(--primary)}
.lp-types-head{padding:0 0 6px;display:flex;justify-content:space-between}
.lp-types-row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:8px 0;border-top:1px solid var(--line);align-items:center;font-size:13px}

/* Example report */
.lp-report{background:var(--sunken)}
.lp-report-inner{padding-top:96px;padding-bottom:96px;display:flex;flex-direction:column;gap:32px;align-items:flex-start}
.lp-head-report{gap:12px;max-width:760px}
.lp-browser{width:100%;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:0 18px 48px rgba(15,39,66,0.12)}
.lp-browser-bar{height:34px;background:var(--surface2);display:flex;align-items:center;gap:7px;padding:0 14px}
.lp-browser-bar>span:not(.mono){width:10px;height:10px;border-radius:5px;background:var(--borderstrong)}
.lp-browser-bar .mono{margin-left:14px;font-size:12px;color:var(--muted)}
.lp-report-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px}
.lp-fixes{border-right:1px solid var(--line)}
.lp-fixes-title{padding:16px;display:flex;justify-content:space-between;align-items:baseline;font-size:17px;font-weight:600}
.lp-frow{display:grid;grid-template-columns:80px 110px 1fr 1fr 60px;gap:12px;padding:11px 16px;border-top:1px solid var(--line);font-size:13px}
.lp-frow-head{padding:9px 16px;background:var(--surface2);border-top:0}
.lp-frow.is-active{background:var(--accentsoft)}
.lp-view{color:var(--link);font-weight:600}
.lp-mrow{padding:11px 14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.lp-mrow .muted{font-size:11px}
.lp-mrow>span+span{font-size:13px}
.lp-detail{padding:16px;display:flex;flex-direction:column;gap:14px}
.lp-detail-head{display:flex;justify-content:space-between}
.lp-detail-head .mono{font-size:13px;font-weight:500}
.lp-detail-actions{display:flex;gap:10px}
.lp-detail-actions .btn{height:36px;font-size:13px;padding:0 14px;cursor:default}

/* Pricing preview (also used by the pricing page) */
.lp-pricing{padding-top:112px;gap:28px}
.lp-pricing .lp-head{gap:12px}
.lp-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}
.lp-plan{padding:24px;display:flex;flex-direction:column;gap:8px}
.lp-plan+.lp-plan{border-left:1px solid var(--border)}
.lp-plan-name{font-size:16px;font-weight:600;display:flex;align-items:center;gap:8px}
.lp-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;background:var(--accentsoft);color:var(--link)}
.lp-plan-price{font-size:30px;font-weight:600;line-height:1.1}
.lp-per{font-size:14px;font-weight:400;color:var(--muted)}
.lp-plan-checks{font-size:14px;color:var(--muted)}
.lp-extra{font-size:15px}
.lp-pricing-ctas{display:flex;align-items:center;gap:24px;margin-top:4px}
.lp-compare{font-size:15px;font-weight:600}

/* FAQ */
.lp-faq{display:grid;grid-template-columns:340px minmax(0,1fr);gap:64px}
.lp-faq-side{display:flex;flex-direction:column;gap:12px}
.lp-faq-side p{font-size:16px;line-height:1.5;color:var(--text2)}
.lp-faq-list{border-bottom:1px solid var(--border)}
.lp-faq details{border-top:1px solid var(--border);padding:18px 0}
.lp-faq summary{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:17px;font-weight:600;cursor:pointer;list-style:none}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary .icon{color:var(--muted)}
.lp-faq details[open] summary .icon{transform:rotate(180deg)}
.lp-faq details p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--text2)}

/* Final call to action */
.lp-final{position:relative;overflow:hidden;background:var(--strong);color:var(--onstrong);padding:80px 20px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.lp-final h2.serif{position:relative}
.lp-final .btn,.lp-final p{position:relative}
.lp-final p{font-size:14px;color:var(--onstrongmuted)}
.lp-motif{position:absolute;top:0;fill:var(--onstrong);opacity:.07}
.lp-motif-left{left:0}
.lp-motif-right{right:0}

/* Pricing page (08) */
.pr{padding-top:72px;padding-bottom:96px;display:flex;flex-direction:column;gap:40px}
.pr-head{display:flex;flex-direction:column;gap:14px;max-width:820px}
.pr-head h1{font-size:48px;line-height:1.08}
.pr-head p{font-size:18px;line-height:1.55;color:var(--text2)}
.pr-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}
.pr-plan{padding:28px;display:flex;flex-direction:column;gap:10px}
.pr-plan+.pr-plan{border-left:1px solid var(--border)}
.pr-plan.is-current,.lp-plan.is-current{background:var(--accentsoft)}
.is-current .lp-badge{background:var(--surface)}
.pr-plan-top{display:flex;flex-direction:column;gap:10px}
.pr .lp-plan-name{font-size:17px}
.pr-price{font-size:34px;font-weight:600;line-height:1.1}
.pr-checks{font-size:15px}
.pr-action{margin-top:12px}
.pr-extra{font-size:15px;margin-top:-24px}
.pr-includes{display:flex;flex-direction:column;gap:16px}
.pr-includes h2{font-size:20px;font-weight:600}
.pr-includes ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 32px}
.pr-includes li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45}
.pr-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 48px;border-top:1px solid var(--border);padding-top:28px}
.pr-faq>div{display:flex;flex-direction:column;gap:6px}
.pr-faq h3{font-size:16px;font-weight:600}
.pr-faq p{font-size:15px;line-height:1.5}

@media (min-width: 768px) and (max-width: 1099px){
  .lp-hero{gap:40px}
  .lp-hero h1{font-size:42px}
  .pr-head h1{font-size:40px}
}

@media (max-width: 1100px){
  .lp-plans,.pr-plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-plan:nth-child(3),.pr-plan:nth-child(3){border-left:0}
  .lp-plan:nth-child(n+3),.pr-plan:nth-child(n+3){border-top:1px solid var(--border)}
  .lp-rule{grid-template-columns:1fr;gap:28px}
}

@media (max-width: 767px){
  .lp-wrap{padding-left:20px;padding-right:20px}
  .lp-wide{display:none}
  .lp-narrow{display:block}
  .lp h2.serif{font-size:26px;line-height:1.15}
  .lp-body{font-size:16px}
  .lp-body-sm{font-size:15px}
  .lp-section{padding-bottom:56px;gap:16px}

  .lp-hero{display:flex;flex-direction:column;align-items:stretch;gap:16px;padding-top:36px;padding-bottom:28px}
  .lp-grid{background-position:-1px -1px;-webkit-mask-image:radial-gradient(ellipse 90% 45% at 50% 78%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 90% 45% at 50% 78%,#000 30%,transparent 80%)}
  .lp-sq{display:none}
  .lp-hero-text{gap:16px}
  .lp-hero h1{font-size:36px;line-height:1.08}
  .lp-sub{font-size:17px}
  .lp-ctas{flex-direction:column;gap:16px;margin-top:0}
  .lp-ctas .btn{width:100%}
  .lp-hero-card{gap:16px}
  .lp-fix{padding:16px}
  .lp-big{font-size:20px}
  .lp-thumb-lg{width:64px;height:64px}
  .lp-thumb-lg .icon{width:28px;height:28px}
  .lp-hero .lp-title{font-size:13px}
  .lp-boxed-live{font-size:16px}
  .lp-caption{padding:0}

  .lp-cred{margin-bottom:48px;padding:16px 0}
  .lp-cred p{font-size:14px;line-height:1.5}

  .lp-problem{padding:16px 18px 4px}
  .lp-prow{grid-template-columns:76px 1fr 1fr;padding:12px 0;font-size:15px}
  .lp-prow>.mono.muted{font-size:13px}
  .lp-prow-head{padding:0 0 10px}
  /* Five stars fit the narrow column down to 320 px (they were 98 px wide) */
  .lp-stars .icon{width:clamp(11px,3.6vw,18px);height:clamp(11px,3.6vw,18px)}

  #how-it-works{gap:22px}
  .lp-steps{grid-template-columns:1fr;gap:22px}
  .lp-steps li{padding-top:16px}
  .lp-steps .lp-step-key{padding-top:14px}
  .lp-steps h3{font-size:18px}
  .lp-privacy{align-items:flex-start}
  .lp-privacy p{font-size:14px;line-height:1.5}

  .lp-why{gap:48px}
  .lp-rule{gap:14px}
  .lp-rule .lp-head{gap:14px}
  .lp-rule-card{padding:18px}
  .lp-rule-grid{grid-template-columns:1fr}
  .lp-pair-card{grid-template-columns:1fr}
  .lp-pair-cell{padding:22px 20px;gap:12px}
  .lp-pair-cell+.lp-pair-cell{border-left:0;border-top:1px solid var(--border)}
  .lp-pair-cell h3{font-size:20px}
  /* Review 19: the number and "All · 500,000" stay on one line down to 320 px. */
  .lp-choice{padding:14px}
  .lp-choice-row{gap:8px}
  .lp-choice-num{min-width:0;padding:0 12px}
  .lp-choice-pill{padding:0 12px}

  .lp-report-inner{padding-top:48px;padding-bottom:48px;gap:16px;align-items:stretch}
  .lp-head-report{gap:16px}
  .lp-browser{border-radius:12px;box-shadow:0 12px 32px rgba(15,39,66,0.10)}
  .lp-browser-bar{height:28px;gap:6px;padding:0 12px}
  .lp-browser-bar>span:not(.mono){width:8px;height:8px;border-radius:4px}
  .lp-report-grid{grid-template-columns:1fr}
  .lp-fixes{border-right:0}
  .lp-fixes-title{padding:12px 14px;font-size:15px}
  .lp-fixes-title .lbl{font-size:10px}
  .lp-detail{padding:14px;border-top:1px solid var(--line)}

  .lp-pricing{padding-top:56px;gap:16px}
  .lp-pricing .lp-head{gap:16px}
  .lp-pricing .lp-body-sm{line-height:1.5}
  .lp-plans{grid-template-columns:1fr}
  .lp-plan{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px 16px}
  .lp-plan+.lp-plan,.lp-plan:nth-child(n+3){border-left:0;border-top:1px solid var(--border)}
  .lp-plan-price{font-size:18px;text-align:right;line-height:1.5}
  .lp-per{font-size:13px}
  .lp-plan-checks{font-size:13px;grid-column:1 / -1}
  .lp-extra{font-size:14px;line-height:1.45}
  .lp-pricing-ctas{flex-direction:column;align-items:stretch;gap:16px;margin-top:0}
  .lp-compare{align-self:center}

  .lp-faq{grid-template-columns:1fr;gap:14px}
  .lp-faq details{padding:14px 0}
  .lp-faq summary{font-size:15px}

  .lp-final{padding:48px 20px;align-items:stretch;gap:16px;text-align:left}
  .lp-final h2.serif{font-size:28px}
  .lp-motif{display:none}

  .pr{padding-top:36px;padding-bottom:48px;gap:24px}
  .pr-head{gap:12px}
  .pr-head h1{font-size:32px;line-height:1.1}
  .pr-head p{font-size:16px;line-height:1.5}
  .pr-plans{grid-template-columns:1fr}
  .pr-plan{padding:18px}
  .pr-plan+.pr-plan,.pr-plan:nth-child(n+3){border-left:0;border-top:1px solid var(--border)}
  .pr-plan-top{flex-direction:row;justify-content:space-between;align-items:baseline}
  .pr-price{font-size:20px;line-height:1.5}
  .pr-price .lp-per{font-size:13px}
  .pr-checks{font-size:14px}
  .pr-action{margin-top:0}
  .pr-action .btn{width:100%}
  .pr-extra{font-size:14px;line-height:1.45;margin-top:0}
  .pr-includes ul{grid-template-columns:1fr;gap:12px}
  .pr-faq{grid-template-columns:1fr;gap:18px}
}

/* ---- 30-account.css ---- */
/* Account area: Sign up, Log in, Check email (12-14), Settings (16),
   Plan and usage (11). Classes start with auth- or acct-. */

/* Minimal auth header (12-14): logo and theme toggle, no border */
.auth-header{height:72px;display:flex;align-items:center;padding:0 40px;flex-shrink:0}
.auth-header .spacer{flex-grow:1}
.auth-main{display:flex;justify-content:center;align-items:flex-start;padding:64px 40px}
.auth-card{width:100%;max-width:440px;padding:36px;display:flex;flex-direction:column;gap:18px}
.auth-card-tight{gap:16px}
.auth-card h1{font-size:30px}
.auth-head{display:flex;flex-direction:column;gap:8px}
.auth-head p{font-size:15px;line-height:1.5}
.auth-providers{display:flex;flex-direction:column;gap:10px}
.auth-btn{height:48px;width:100%}
.auth-or{display:flex;align-items:center;gap:12px}
.auth-or span:first-child,.auth-or span:last-child{flex-grow:1;height:1px;background:var(--border)}
.auth-or .muted{font-size:13px}
.auth-form{display:flex;flex-direction:column;gap:18px}
.auth-form .input[aria-invalid="true"]{border-color:var(--danger)}
.auth-terms{font-size:13px;line-height:1.5}
.auth-foot{font-size:14px;border-top:1px solid var(--line);padding-top:16px}
.auth-icon{width:48px;height:48px;border-radius:24px;background:var(--accentsoft);color:var(--link);display:flex;align-items:center;justify-content:center}
.auth-lead{font-size:15px;line-height:1.55;color:var(--text2);overflow-wrap:anywhere}
.auth-resend p{font-size:14px;line-height:1.5}
.auth-note{font-size:14px;padding:10px 14px;border-radius:8px;background:var(--oksoft);color:var(--text);border:1px solid var(--ok)}
.auth-note.error{background:var(--dangersoft);border-color:var(--danger)}
.acct-link-btn{background:none;border:0;padding:0;font:inherit;color:var(--link);text-decoration:underline;cursor:pointer}
.acct-link-btn:hover{color:var(--primaryhover)}

/* Shared cards */
.acct-section{padding:28px;display:flex;flex-direction:column;gap:18px}
.acct-section h2{font-size:18px;font-weight:600}
.acct-card-title{font-size:24px}
.acct-row{display:flex;justify-content:space-between;align-items:center;gap:16px}
.acct-row.wrap{flex-wrap:wrap}
.acct-row-text{display:flex;flex-direction:column;gap:4px}
.acct-row-text .muted{font-size:14px}
.acct-row-title{font-size:15px;font-weight:600}
.acct-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Settings (16) */
.acct-settings{gap:20px}
.acct-settings>*{max-width:960px;width:100%}
.acct-title-row{display:flex;justify-content:space-between;align-items:center;gap:16px}
.acct-profile{display:flex;flex-direction:column;gap:18px}
.acct-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.acct-readonly{background:var(--surface2)}
.acct-readonly:focus{outline:2px solid var(--accent)}
.acct-help{font-size:13px}
.acct-saved{font-size:13px;margin-left:auto}
.acct-save-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.acct-saved-inline{font-size:14px}
.acct-delete summary{list-style:none;cursor:pointer}
.acct-delete summary::-webkit-details-marker{display:none}
.acct-danger-btn{color:var(--danger)}
.acct-delete[open] .acct-danger-btn{display:none}
.acct-delete-form{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.acct-delete-form .field{flex:1 1 280px}

/* Plan and usage (11) */
.acct-plan{gap:28px}
.acct-head{display:flex;flex-direction:column;gap:8px}
.acct-sub{font-size:15px}
.acct-usage{padding:28px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;gap:40px}
.acct-usage-main{display:flex;flex-direction:column;gap:12px}
.acct-usage-count{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.acct-usage-num{font-size:40px}
.acct-usage-count .muted{font-size:16px}
.acct-usage-main p{font-size:14px}
.acct-bar{height:12px;border-radius:6px;background:var(--line);overflow:hidden}
.acct-bar div{height:12px;background:var(--accent)}
.acct-billing{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.acct-billing p{font-size:14px}
.acct-usage.solo{grid-template-columns:minmax(0,1fr)}
.acct-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}
.acct-plan-col{padding:28px;display:flex;flex-direction:column;gap:10px}
.acct-plan-col+.acct-plan-col{border-left:1px solid var(--border)}
.acct-plan-col.is-current{background:var(--accentsoft)}
.acct-plan-col.is-selected{box-shadow:inset 0 0 0 2px var(--accent)}
.acct-pending{font-size:14px;color:var(--text);font-weight:500}
.acct-extra-warn{font-size:14px;color:var(--text);margin-bottom:10px}  /* review 24 */
.acct-pending-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.acct-plan-top{display:flex;flex-direction:column;gap:10px}
.acct-plan-name{font-size:17px;font-weight:600;display:flex;align-items:center;gap:8px}
.acct-plan-tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;background:var(--accentsoft);color:var(--link)}
.acct-plan-price{font-size:34px;font-weight:600;line-height:1.1}
.acct-plan-price span{font-size:14px;font-weight:400;color:var(--muted)}
.acct-plan-checks{font-size:15px}
.acct-plan-action{margin-top:12px}
.acct-plan-from{font-size:13px;margin-top:12px}  /* review 28: "Your plan from 29 Oct" */
.acct-current{opacity:.6;cursor:default}
.acct-more{font-size:15px}
.acct-extra{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.acct-select{width:auto;min-width:260px;cursor:pointer}

@media (max-width: 767px){
  .auth-header{height:60px;padding:0 16px}
  .auth-main{display:block;padding:24px 20px 40px}
  .auth-card{padding:24px;margin:0 auto}
  .auth-card h1{font-size:26px}
  .acct-section{padding:20px}
  .acct-settings{gap:16px}
  .acct-grid{grid-template-columns:1fr;gap:16px}
  .acct-plan{gap:16px}
  .acct-sub{display:none}
  .acct-usage{padding:20px;grid-template-columns:1fr;gap:18px}
  .acct-usage-num{font-size:34px}
  .acct-plans{grid-template-columns:1fr}
  .acct-plan-col{padding:18px}
  .acct-plan-col+.acct-plan-col{border-left:0;border-top:1px solid var(--border)}
  .acct-plan-top{flex-direction:row;justify-content:space-between;align-items:baseline}
  .acct-plan-price{font-size:20px}
  .acct-plan-price span{font-size:13px}
  .acct-plan-checks{font-size:14px}
  .acct-plan-action{margin-top:0}
  .acct-plan-action .btn,.acct-plan-action form{width:100%}
  .acct-more{font-size:14px;line-height:1.45}
  .acct-select{min-width:0;flex:1 1 100%}
}

/* ---- 40-upload.css ---- */
/* Upload (02, m02), confirm fields (03, m03), failed file, Reports (09, m09). */

/* Upload */
.up-page{padding:64px 16px;display:flex;flex-direction:column;align-items:center;gap:28px}
.up-page>*{width:100%;max-width:760px}
.up-head{display:flex;flex-direction:column;gap:10px}
.up-title{font-size:40px}
.up-intro{font-size:16px}
.up-drop{min-height:340px;border:2px dashed var(--borderstrong);border-radius:16px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;transition:border-color .15s,background .15s}
.up-drop.is-over{border-color:var(--accent);background:var(--accentsoft)}
.up-idle{display:flex;flex-direction:column;align-items:center;gap:14px}
.up-drop-icon{width:64px;height:64px;border-radius:32px;background:var(--accentsoft);color:var(--link);display:flex;align-items:center;justify-content:center}
.up-drop-icon .icon{width:28px;height:28px}
.up-drop-title{font-size:20px;font-weight:600}
.up-drop-text{font-size:15px}
.up-choose{margin-top:6px}
/* Review 24: the daily limit is reached: the drop zone and "Choose file" are off. */
.up-drop[data-limit-reached]{opacity:.65;border-style:solid}
.up-drop[data-limit-reached] .up-choose{pointer-events:none;opacity:.5}
.up-choose:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.up-progress{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:12px}
.up-file{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.up-bar{width:100%;height:8px;border-radius:4px;background:var(--sunken);overflow:hidden}
.up-bar span{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.up-percent{font-size:14px}
.up-error{color:var(--danger);font-size:14px;font-weight:600}
.up-retry{display:flex;flex-direction:column;align-items:center;gap:12px}
.up-privacy{display:flex;gap:12px;align-items:flex-start}
.up-privacy .icon{color:var(--ok);margin-top:2px}
.up-privacy p{font-size:14px;color:var(--text2)}

/* Confirm fields */
.fd-page{padding:48px 120px 64px;display:flex;flex-direction:column;gap:24px;max-width:1440px;width:100%;margin:0 auto}
.fd-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.fd-head-text{display:flex;flex-direction:column;gap:10px;min-width:0}
.fd-title{font-size:40px}
.fd-intro{font-size:16px}
.fd-chip{font-size:12px;padding:8px 12px;border-radius:8px;background:var(--sunken);align-self:flex-start}
.fd-error{color:var(--danger);font-size:14px;font-weight:600}
.fd-reading{padding:28px 24px;display:flex;align-items:center;gap:12px;font-size:16px;font-weight:600}
.fd-spin{color:var(--accent);display:flex;animation:fd-spin 1s linear infinite}
.fd-spin .icon{width:20px;height:20px}
@keyframes fd-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.fd-spin{animation:none}}
.fd-table{overflow:hidden}
/* Sample value is one line (full text in the tooltip); What we check gets the most room. */
.fd-row{display:grid;grid-template-columns:minmax(110px,160px) minmax(0,1fr) minmax(150px,200px) minmax(0,1.4fr) 76px;align-items:center;gap:16px;padding:10px 20px;border-top:1px solid var(--line)}
.fd-row-head{padding:12px 20px;background:var(--surface2);border-top:0}
.fd-row.is-error{background:var(--dangersoft)}
.fd-row.is-error .fd-select select{border:2px solid var(--danger)}
/* Long names stop after 2 lines with "…"; the full name is a tooltip and,
   on tap or Enter, a panel (reports/_field_value.html, 2.5). */
.fd-name{font-size:14px;min-width:0}
.fd-sample{font-size:14px;min-width:0}
.fd-note{align-self:flex-start}
.fd-list{display:flex;flex-direction:column;gap:12px}
.fd-search{width:280px;max-width:100%}
.fd-req input:disabled:not(:checked)~.fd-box{opacity:.5}
.fd-select{position:relative}
.fd-select select{appearance:none;-webkit-appearance:none;width:100%;height:38px;border:1px solid var(--borderstrong);border-radius:8px;padding:0 34px 0 12px;background:var(--surface);font-size:14px;cursor:pointer}
.fd-select select:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.fd-select .icon{position:absolute;right:10px;top:10px;width:16px;height:16px;color:var(--muted);pointer-events:none}
.fd-check{font-size:13px;line-height:1.4;color:var(--text2)}
.fd-req{display:flex;align-items:center;gap:8px;cursor:pointer;position:relative}
.fd-req input{position:absolute;opacity:0;width:18px;height:18px;margin:0;cursor:pointer}
.fd-req-label{display:none}
.fd-box{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--borderstrong);position:relative;flex-shrink:0}
.fd-req input:checked~.fd-box{background:var(--strong);border-color:var(--strong)}
.fd-req input:checked~.fd-box::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;border:solid var(--onstrong);border-width:0 2px 2px 0;transform:rotate(45deg)}
.fd-req input:focus-visible~.fd-box{outline:2px solid var(--accent);outline-offset:2px}
.fd-req input:disabled,.fd-req input:disabled~*{cursor:default}
.fd-yes,.fd-no{font-size:14px}
.fd-no{color:var(--muted)}
.fd-req input:checked~.fd-no,.fd-req input:not(:checked)~.fd-yes{display:none}
/* Sticky bar: "Start data checks" stays in view while a long table scrolls
   (2.5); at the end of the page it sits in place. */
.fd-foot{display:flex;gap:12px;justify-content:flex-end;align-items:center;flex-wrap:wrap;position:sticky;bottom:0;z-index:5;padding:14px 0;margin:-14px 0;background:var(--bg);border-top:1px solid var(--line)}
.fd-foot-error{margin-right:auto}

/* Failed file */
.fl-card{padding:28px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.fl-title{font-size:28px}
.fl-title .mono,.rl-line .mono{white-space:nowrap}  /* review 26: a command in a message (-o items.jsonl) stays on one line */

/* Reports */
.rl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.rl-head-text{display:flex;flex-direction:column;gap:8px}
.rl-intro{font-size:15px}
.rl-body{display:flex;flex-direction:column;gap:16px}
.rl-table{overflow:hidden}
.rl-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.3fr) minmax(0,1.4fr) 150px 32px;grid-template-areas:"file s1 s2 act chev";gap:20px;align-items:center;padding:16px 20px;border-top:1px solid var(--line)}
.rl-row-head{padding:12px 20px;background:var(--surface2);border-top:0}
.rl-item{position:relative}
.rl-item:hover{background:var(--surface2)}
.rl-file{grid-area:file;display:flex;flex-direction:column;gap:3px;min-width:0}
.rl-name{font-size:14px;font-weight:600;color:var(--text);text-decoration:none;overflow-wrap:anywhere}
.rl-name:hover{color:var(--text)}
/* At most 2 lines, cut with "…" (review 5, 1.6); the full name is in the
   title and on the report page. The clamp is on the inner span so the
   link's full-row ::after isn't clipped. */
.rl-name-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.rl-name::after{content:"";position:absolute;inset:0}
.rl-name:focus-visible{outline:none}
.rl-name:focus-visible::after{outline:2px solid var(--accent);outline-offset:-2px;border-radius:4px}
.rl-meta{display:flex;flex-direction:column;gap:3px;font-size:12px}
.rl-step-lbl{display:none}
.rl-s1{grid-area:s1}
.rl-s2{grid-area:s2}
.rl-status{position:relative;z-index:1;display:inline-flex;flex-direction:column;gap:5px;align-items:flex-start;text-decoration:none;color:var(--text)}
.rl-status:hover .rl-line{text-decoration:underline}
.rl-line{font-size:12px}
.rl-plain{font-size:13px}
.rl-action{grid-area:act;justify-self:end;position:relative;z-index:1}
.rl-btn{height:36px;font-size:13px;padding:0 16px}
.rl-menu{grid-area:chev;position:relative;z-index:2;justify-self:end;align-self:start}
.rl-menu summary{list-style:none;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:var(--muted);font-size:20px;line-height:1}
.rl-menu summary::-webkit-details-marker{display:none}
.rl-menu summary:hover,.rl-menu[open] summary{background:var(--surface2);color:var(--text)}
.rl-menu-list{position:absolute;right:0;top:36px;min-width:120px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:6px;box-shadow:0 12px 32px rgba(15,39,66,0.14)}
.rl-menu-list a{display:block;padding:8px 12px;border-radius:6px;font-size:14px;color:var(--danger);text-decoration:none}
.rl-menu-list a:hover{background:var(--dangersoft)}
.rl-empty{padding:40px 20px;display:flex;flex-direction:column;align-items:center;gap:16px;font-size:15px}
.rl-pager{display:flex;align-items:center;justify-content:center;gap:12px;font-size:14px}
.rl-pager .icon-btn.is-disabled{opacity:.4;cursor:default}
.rl-privacy{padding:18px 22px;border-radius:12px;background:var(--sunken);display:flex;gap:16px;align-items:center}
.rl-privacy .icon{color:var(--ok);width:20px;height:20px}
.rl-privacy p{font-size:14px}

@media (max-width: 1200px){
  .fd-page{padding:40px 32px 56px}
  .fd-row{gap:12px;padding:10px 16px}
}

@media (max-width: 767px){
  .up-page{padding:28px 16px 40px;gap:20px;align-items:stretch}
  .up-head{gap:20px}
  .up-title{font-size:30px}
  .up-intro{font-size:15px;line-height:1.45}
  .up-drop{min-height:250px;gap:12px;padding:20px}
  .up-idle{gap:12px}
  .up-drop-icon{width:56px;height:56px}
  .up-drop-icon .icon{width:26px;height:26px}
  .up-drop-title{display:none}
  .up-drop-text{font-size:14px}
  .up-choose{margin-top:0}
  .up-privacy .icon{display:none}
  .fd-page{padding:28px 16px 40px;gap:14px}
  .fd-head{flex-direction:column;align-items:stretch;gap:14px}
  .fd-title{font-size:30px}
  .fd-intro{font-size:15px;line-height:1.45}
  .fd-chip{overflow-wrap:anywhere}
  .fd-start{height:52px;width:100%}
  .fd-table{background:none;border:0;border-radius:0;overflow:visible;display:flex;flex-direction:column;gap:14px}
  .fd-row-head{display:none}
  .fd-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name req" "sample sample" "type type" "check check";gap:10px;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
  .fd-name{grid-area:name;font-size:15px;font-weight:500}
  .fd-sample{grid-area:sample;font-size:13px}
  .fd-select{grid-area:type}
  .fd-check{grid-area:check}
  .fd-req{grid-area:req}
  .fd-req-label{display:inline;font-size:13px}
  .fd-req input:not(:checked)~.fd-req-label{color:var(--muted)}
  .fd-yes,.fd-no{display:none!important}
  .fd-req input{width:40px;height:24px;right:0}
  .fd-box{width:40px;height:24px;border-radius:12px;border:0;background:var(--skel)}
  .fd-box::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:9px;background:var(--surface);transition:transform .15s}
  .fd-req input:checked~.fd-box{background:var(--primary)}
  .fd-req input:checked~.fd-box::after{left:3px;top:3px;width:18px;height:18px;border:0;border-radius:9px;background:var(--onprimary);transform:translateX(16px)}
  .fd-search{width:100%}
  .fd-foot{gap:10px;padding:12px 0;margin:-6px 0 -12px}
  .fd-foot-error{order:-1;flex-basis:100%;margin-right:0}
  .fd-foot .btn{height:48px}
  .fd-foot .fd-start{flex:1;width:auto}

  .fl-card{padding:20px}
  .fl-title{font-size:24px}

  .rl-head{align-items:center}
  .rl-head .page-title{font-size:28px}
  .rl-upload{height:40px;font-size:14px}
  .rl-page{gap:14px}
  .rl-table{background:none;border:0;border-radius:0;overflow:visible;display:flex;flex-direction:column;gap:14px}
  .rl-row-head{display:none}
  .rl-row{grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"file file chev" "l1 s1 s1" "l2 s2 s2" "act act act";gap:10px 12px;align-items:start;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
  .rl-item:hover{background:var(--surface)}
  .rl-file{margin-bottom:2px}
  .rl-meta{display:block}
  .rl-kept::before{content:" · "}
  .rl-step-lbl{display:block;font-size:10px;padding-top:5px}
  .rl-l1{grid-area:l1}
  .rl-l2{grid-area:l2}
  .rl-action{justify-self:stretch}
  .rl-btn{width:100%;height:42px}
}

/* ---- 50-data.css ---- */
/* Step 1 · Data checks: file header (shared with step 2), progress (04, m04),
   report (05, m05). Prefixes: fh- file header, dr- data report. */

.dr-page{padding:36px 120px 64px;display:flex;flex-direction:column;gap:28px;max-width:1440px;width:100%;margin:0 auto}
.dr-h2{font-size:20px;font-weight:600}

/* File header */
.fh{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
/* No min-width:0: the steps never shrink under the page actions, the actions wrap instead. */
.fh-main{display:flex;flex-direction:column;gap:8px;max-width:100%}
.fh-crumbs{font-size:14px;display:flex;gap:4px;min-width:0;white-space:nowrap}
.fh-crumbs a{flex:none}
.fh-crumb-name{min-width:0;overflow:hidden;text-overflow:ellipsis}  /* review 29: one line, whatever the name */
.fh-main{min-width:0}
.fh-title{font-size:36px;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}  /* review 29: at most 2 lines; app.js keeps the end of the name */
.fh-meta{font-size:14px}
.fh-actions{display:flex;gap:10px;flex-wrap:wrap}
.fh-steps{display:flex;gap:10px;margin-top:12px;align-items:center}
.fh-step{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 18px 0 12px;border-radius:10px;text-decoration:none;color:var(--text);border:1px solid var(--border);background:var(--surface)}
.fh-step:hover{color:var(--text);border-color:var(--borderstrong)}
.fh-step.is-active{background:var(--ink);color:var(--onstrong);border-color:var(--ink)}
.fh-step.is-active:hover{color:var(--onstrong)}
.fh-step.is-disabled{color:var(--muted);border:1px dashed var(--borderstrong);background:transparent;cursor:default}
.fh-num{width:28px;height:28px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;background:var(--line);color:var(--muted);flex-shrink:0}
.fh-step.is-active .fh-num{background:var(--onstrong);color:var(--ink)}
.fh-text{display:flex;flex-direction:column;gap:1px}
.fh-name{font-size:15px;font-weight:600;white-space:nowrap}
.fh-num-inline{display:none}
.fh-status{font-size:12px;opacity:.8;white-space:nowrap}
.fh-arrow{color:var(--muted);display:flex}
.fh-arrow .icon{width:20px;height:20px}

/* Step 1 running */
.dr-running{display:flex;flex-direction:column;align-items:center;gap:28px;padding-bottom:36px}
.dr-running>.card{width:100%;max-width:640px}
.dr-progress{padding:40px;display:flex;flex-direction:column;gap:28px}
.dr-progress-title{font-size:26px}
.dr-bar-wrap{display:flex;flex-direction:column;gap:10px}
.dr-bar{height:10px;border-radius:5px;background:var(--line);overflow:hidden}
.dr-bar span{display:block;height:10px;background:var(--accent);transition:width .4s}
.dr-bar-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dr-bar-meta .mono{font-size:13px}
.dr-bar-meta .muted{font-size:14px}
.dr-stages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.dr-stages li{display:flex;gap:12px;align-items:center;font-size:15px}
.dr-stages li.is-current{font-weight:600}
.dr-stages li.is-todo{color:var(--muted)}
.dr-stage-icon{width:24px;height:24px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dr-stage-icon.done{background:var(--oksoft);color:var(--ok)}
.dr-stage-icon.done .icon{width:14px;height:14px}
.dr-stage-icon.todo{border:2px solid var(--borderstrong)}
.dr-arc-track{stroke:var(--line)}
.dr-arc-head{stroke:var(--accent)}
.dr-arc{animation:dr-spin 1.2s linear infinite}
@keyframes dr-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.dr-arc{animation:none}}
.dr-note{padding:16px;border-radius:10px;background:var(--surface2)}
.dr-note p{font-size:14px}
.dr-go{align-self:flex-start}
.dr-next{padding:28px 32px;display:flex;flex-direction:column;gap:16px;border-color:var(--accentline)}
.dr-next-lbl{color:var(--link)}
.dr-next-text{font-size:15px;line-height:1.5}

/* Verdict card (review 31): the answer first, in sentences, with the next step and its cost */
.dr-next{font-size:14px;line-height:1.5}
.dr-verdict{padding:28px 32px;display:flex;flex-direction:column;gap:16px}
.dr-vhead{font-size:30px;font-weight:600;line-height:1.2}
.dr-vhead.is-ok{color:var(--ok)}
.dr-vlines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.dr-vlines li{position:relative;padding-left:20px;font-size:17px;line-height:1.5;overflow-wrap:anywhere}
.dr-vlines li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:4px;background:var(--danger)}
.dr-vlines b{font-weight:600}
.dr-vlines .mono,.dr-voptional .mono{font-size:.92em}
.dr-vmore,.dr-voptional{font-size:14px;line-height:1.5}
.dr-vnext{font-size:15px;line-height:1.5;max-width:760px}
.dr-vbuttons{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.dr-vnote,.dr-gap{font-size:13px}
.dr-voffer-line{flex-basis:100%;margin:0;font-size:14px}
.dr-strip{list-style:none;margin:6px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.dr-strip-item a,.dr-strip-body{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--text);text-decoration:none;background:var(--surface)}
.dr-strip-item a:hover{border-color:var(--borderstrong);color:var(--text)}
.dr-strip-name{min-width:0;overflow-wrap:anywhere}
.dr-strip-count{font-size:15px;font-weight:600}
.dr-strip-item.ok .dr-strip-count{color:var(--ok)}
.dr-strip-item.bad .dr-strip-count{color:var(--danger)}
.dr-strip-item.bad a{border-color:var(--danger)}
/* Download menu */
.dr-menu{position:relative}
.dr-menu summary{list-style:none;cursor:pointer}
.dr-menu summary::-webkit-details-marker{display:none}
.dr-menu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:180px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:6px;box-shadow:0 12px 32px rgba(15,39,66,0.14);display:flex;flex-direction:column}
.dr-menu-list a{padding:9px 12px;border-radius:6px;font-size:14px;color:var(--text);text-decoration:none}
.dr-menu-list a:hover{background:var(--surface2)}

/* Fields table, in words (review 31): Field, Read as, Filled, Values, Issues */
.dr-fields{overflow:hidden}
.dr-fields-head{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.dr-fields-titles{display:flex;flex-direction:column;gap:2px}
.dr-fields-titles .muted{font-size:13px}
.dr-fields-head .search{width:240px}
.dr-frow{display:grid;grid-template-columns:minmax(0,1.1fr) 100px minmax(0,1.35fr) minmax(0,1.6fr) minmax(0,1.2fr);gap:16px;align-items:start;padding:13px 20px;border-top:1px solid var(--line);font-size:13px;line-height:1.45}
.dr-frow-head{padding:10px 20px;background:var(--surface2);border-top:0;align-items:center}
.dr-frow.is-selected{background:var(--accentsoft)}
.dr-fname{display:flex;flex-direction:column;gap:2px;min-width:0}
.dr-fname .mono{font-size:14px;font-weight:500;overflow-wrap:anywhere}
.dr-fsub{font-size:11px}
.dr-col-type,.dr-col-values,.dr-col-filled,.dr-col-issues{min-width:0;overflow-wrap:anywhere}
.dr-col-filled.bad,.dr-col-issues.bad{color:var(--danger)}
.dr-empty{padding:16px 20px;font-size:14px}
.dr-more{display:block;width:100%;padding:14px 20px;border:0;border-top:1px solid var(--line);background:none;color:var(--link);font-size:14px;font-weight:600;text-align:left;cursor:pointer}
/* The 10 fields with the most issues first, then "Show all N fields" (2.4); a
   search looks through every field. Phones fold after 5 (is-extra-m). */
.dr-frow.is-extra{display:none}
.dr-fields:is(.show-all,.is-searching) .dr-frow.is-extra{display:grid}
.dr-fields:is(.show-all,.is-searching) .dr-more{display:none}

/* Whole-file lines of the issues list, each with "Show rows" (review 31) */
.dr-wrow{display:grid;grid-template-columns:minmax(0,1fr) 120px 110px;gap:16px;padding:14px 0;border-top:1px solid var(--line);align-items:center}
.dr-wtext{display:flex;flex-direction:column;gap:3px}
.dr-wtitle{font-size:14px;font-weight:600}
.dr-wdetail{font-size:13px}
.dr-wcount{font-size:14px;text-align:right}
.dr-wlink{font-size:13px;text-align:right;color:var(--link);font-weight:600}
.dr-wrow-d>summary{list-style:none;cursor:pointer}
.dr-wrow-d>summary::-webkit-details-marker{display:none}
.dr-wrow-d .dr-hide,.dr-wrow-d[open] .dr-show{display:none}
.dr-wrow-d[open] .dr-hide{display:inline}
.dr-expand-body{padding:0 20px 14px;display:flex;flex-direction:column;gap:12px}
.dr-expand-wait{font-size:13px}
.dr-pair{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:8px;background:var(--surface2)}
.dr-pair-head{font-size:13px}
.dr-pair-grid{display:grid;grid-template-columns:140px minmax(0,1fr) minmax(0,1fr);gap:6px 14px;font-size:12px;align-items:baseline}
.dr-pair-val{min-width:0}
.dr-expand-rows{display:flex;flex-direction:column;gap:6px}
.dr-erow{display:grid;grid-template-columns:90px 120px minmax(0,1fr) minmax(0,1fr);gap:12px;font-size:13px;align-items:baseline}
.dr-expand-more{font-size:13px}

/* Field panel (review 31): the problem first, the chart on request */
.dr-details{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;scroll-margin-top:16px}
.dr-details:empty{display:none}
.dr-detail{padding:22px;display:flex;flex-direction:column;gap:16px;min-width:0}
.dr-detail-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.dr-detail-name{display:flex;gap:10px;align-items:baseline;min-width:0;flex-wrap:wrap}
.dr-detail-name .mono{font-size:17px;font-weight:500;overflow-wrap:anywhere}
.dr-detail-name .muted{font-size:13px}
.dr-lead{display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.dr-lead:empty{display:none}
.dr-lead .mono{font-size:.92em}
.dr-summary-line{font-size:14px}
.dr-chart{display:flex;flex-direction:column;gap:8px}
.dr-chart{container-type:inline-size}
.dr-dist>summary{cursor:pointer;color:var(--link);font-size:14px;font-weight:600;list-style:none}
.dr-dist>summary::-webkit-details-marker{display:none}
.dr-dist[open]>summary{margin-bottom:10px}
.dr-chart-bars{display:flex;gap:6px;align-items:flex-end;height:150px}
.dr-chart-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;flex:1;min-width:0}
.dr-chart-count{font-size:10px;color:var(--text2)}
.dr-chart-bar{display:block;width:100%;background:var(--chart);border-radius:3px 3px 0 0}
.dr-chart-col.bad .dr-chart-bar{background:var(--danger)}
.dr-chart-label{font-size:10px;color:var(--muted);white-space:nowrap}
.dr-chart-label.is-hidden{visibility:hidden}
@container (max-width: 520px){.dr-chart-label.is-thin{visibility:hidden}}
.dr-chart-col.bad .dr-chart-label{color:var(--danger)}
.dr-list-row{display:grid;grid-template-columns:minmax(0,1fr) 120px 60px;gap:12px;align-items:center;padding:6px 0}
.dr-list-label{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-list-bar{display:block;height:6px;border-radius:3px;background:var(--line)}
.dr-list-bar span{display:block;height:6px;border-radius:3px;background:var(--chart)}
.dr-list-pct{font-size:12px;text-align:right}
.dr-unique{font-size:22px;font-weight:600}
.dr-unique-text{font-size:15px}
.dr-table{display:flex;flex-direction:column}
.dr-trow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 60px minmax(0,1.6fr);gap:12px;padding:9px 8px;border-top:1px solid var(--line);align-items:baseline;font-size:13px}
.dr-trow .mono{font-size:12px}
.dr-trow-head{border-top:0;padding-top:0}
.dr-trow-ex{overflow-wrap:anywhere}
.dr-trow-num{text-align:right}
.dr-trow.is-main{background:var(--oksoft);border-radius:6px;border-top-color:transparent}

/* Issues */
.dr-issues{overflow:hidden;scroll-margin-top:16px}
.dr-ihead{display:flex;align-items:center;gap:8px;padding:16px 20px;flex-wrap:wrap}
.dr-ititle{margin-right:16px}
.dr-chips{display:flex;gap:8px;flex-wrap:wrap}
.dr-chip{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 14px;border-radius:8px;font-size:13px;font-weight:600;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--borderstrong);white-space:nowrap}
.dr-chip:hover{color:var(--text);border-color:var(--text2)}
.dr-chip.is-active{background:var(--ink);color:var(--onstrong);border-color:var(--ink)}
.dr-ifilters{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.dr-active{padding:0 20px 12px;display:flex;gap:8px}
.dr-irow{display:grid;grid-template-columns:100px 130px 120px minmax(0,1.4fr) minmax(0,1fr);gap:16px;padding:11px 20px;border-top:1px solid var(--line);align-items:center;font-size:13px}
.dr-irow-head{padding:10px 20px;background:var(--surface2)}
/* Review 24: whole-file findings inside "All issues" get the table rows' side padding. */
.dr-issues .dr-wrow{padding:14px 20px}
.dr-irow-field{overflow-wrap:anywhere}
.dr-irow-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-ifoot{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;font-size:13px}
.dr-pager{display:flex;gap:16px;font-size:14px}
.dr-results.htmx-request,.htmx-request>.dr-results{opacity:.6}

/* A value cut to fit its cell (reports/_field_value.html, 2.6), shared by
   the issues list, the fixes table and confirm fields. data.js marks it
   is-cut (a button that opens .valpop) or is-fit (plain text). */
.val{display:block;max-width:100%;min-width:0;padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;text-align:left;text-decoration:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;user-select:text;-webkit-user-select:text}
.val.is-clamp{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.val.is-cut:hover{text-decoration:underline dotted}
.val.is-fit{cursor:auto}
.val:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.valpop{position:absolute;z-index:140;width:min(420px,calc(100vw - 32px));padding:14px;display:flex;flex-direction:column;gap:12px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 48px rgba(15,39,66,0.18)}
.valpop-text{font-size:13px;line-height:1.5;max-height:min(50vh,320px);overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.valpop-text:focus{outline:0}
.valpop-actions{display:flex;align-items:center;gap:8px}
.valpop-actions .btn{height:34px;padding:0 14px;font-size:13px}
.valpop-status{font-size:13px;color:var(--ok);margin-right:auto}

@media (max-width: 1200px){
  .dr-page{padding:32px 40px 56px}
  .dr-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dr-frow{grid-template-columns:minmax(0,1fr) 90px minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1fr)}
}

/* Tablets (768 to 1023 px): a little tighter. */
@media (min-width: 768px) and (max-width: 1023px){
  .dr-frow{grid-template-columns:minmax(0,1fr) 80px minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,1fr);gap:10px;padding:12px 16px}
  .dr-fields-head{padding:16px}
  .dr-fields-head .search{width:200px}
  .dr-irow{grid-template-columns:70px 110px 96px minmax(0,1.3fr) minmax(0,1fr);gap:12px;padding:11px 16px}
  .dr-issues .dr-wrow{padding:14px 16px}
}

@media (max-width: 767px){
  .dr-page{padding:24px 16px 40px;gap:20px}
  .dr-h2{font-size:18px}
  .fh{gap:16px}
  .fh-main{gap:6px;width:100%}
  .fh-crumbs,.fh-meta{font-size:13px}
  /* Tap targets at least 24 px tall (WCAG 2.5.8) */
  .fh-crumbs a,.dr-fname a{display:inline-flex;align-items:center;min-height:24px}
  .search input,.select select{align-self:stretch}
  .fh-title{font-size:28px}
  .fh-actions{flex-direction:column;width:100%;gap:8px}
  .fh-actions .btn{height:40px;font-size:14px}
  .fh-steps{gap:4px;padding:4px;border-radius:10px;background:var(--surface2);margin-top:14px}
  .fh-step{flex:1;min-height:50px;height:auto;padding:6px;flex-direction:column;justify-content:center;gap:1px;border:0;border-radius:8px;background:transparent;text-align:center}
  .fh-step.is-disabled{border:0;color:var(--muted)}
  .fh-num,.fh-arrow{display:none}
  .fh-num-inline{display:inline}
  .fh-text{align-items:center}
  .fh-name{font-size:13px;white-space:normal}
  .fh-status{font-size:11px;white-space:normal}

  .dr-running{gap:16px;padding-bottom:0}
  .dr-progress{padding:24px;gap:22px}
  .dr-progress-title{font-size:22px}
  .dr-bar-meta{flex-direction:column;gap:6px}
  .dr-stages{gap:12px}
  .dr-note{padding:14px}
  .dr-go{display:none}
  .dr-next{padding:22px}

  .dr-verdict{padding:20px 18px;gap:14px}
  .dr-vhead{font-size:24px}
  .dr-vlines li{font-size:16px}
  .dr-vbuttons{flex-direction:column;align-items:stretch}
  .dr-vbuttons .btn{width:100%;white-space:normal;height:auto;min-height:44px;padding-top:8px;padding-bottom:8px;text-align:center}
  .dr-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .dr-strip>li:last-child:nth-child(odd){grid-column:1/-1}
  .dr-strip-item a,.dr-strip-body{flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;font-size:12px}
  .dr-menu{width:100%}
  .dr-menu summary{display:flex;justify-content:center;align-items:center;height:40px}
  .dr-menu-list{position:static;margin-top:6px;box-shadow:none}

  .dr-fields-head{padding:14px 16px}
  /* Stacked rows: the name, then the four values, each with its label. */
  .dr-frow{grid-template-columns:minmax(0,1fr);gap:4px;padding:13px 16px}
  .dr-frow-head{display:none}
  .dr-frow>[data-label]::before{content:attr(data-label) ": ";color:var(--muted)}
  .dr-frow.is-extra-m{display:none}
  .dr-fields:is(.show-all,.is-searching) .dr-frow.is-extra-m{display:grid}
  .dr-more{padding:14px 16px}
  .dr-fsub{font-size:12px}

  .dr-wrow{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px 0}
  .dr-wdetail{display:block}
  .dr-wlink{grid-column:1/-1;text-align:left}
  .dr-wcount{overflow-wrap:anywhere;max-width:45vw}
  .dr-expand-body{padding:0 16px 14px}
  .dr-pair-grid{grid-template-columns:90px minmax(0,1fr) minmax(0,1fr)}
  .dr-erow{grid-template-columns:70px minmax(0,1fr);gap:4px 10px}

  .dr-details{grid-template-columns:minmax(0,1fr)}
  .dr-detail{padding:18px}
  .dr-trow{grid-template-columns:minmax(0,1fr) 50px;gap:2px 10px}
  .dr-trow-head{display:none}
  .dr-trow>:nth-child(2){grid-column:1}
  .dr-trow>:nth-child(4){grid-column:1/-1}

  .dr-ihead{padding:14px 16px;flex-direction:column;align-items:stretch;gap:10px}
  .dr-chips{gap:6px}
  .dr-chip{height:auto;padding:6px 10px;border-radius:14px;font-size:12px}
  .dr-ifilters{margin-left:0}
  .dr-ifilters .search{width:100%}
  .dr-active{padding:0 16px 12px}
  .dr-irow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"row check" "text text" "value value";gap:4px;padding:14px 16px}
  .dr-issues .dr-wrow{padding:12px 16px}
  .dr-irow-head{display:none}
  .dr-irow-row{grid-area:row}
  .dr-irow-field{display:none}
  .dr-irow-check{grid-area:check;font-size:12px;font-weight:600;color:var(--muted)}
  .dr-irow-text{grid-area:text;font-size:14px}
  .dr-irow-value{grid-area:value;color:var(--danger)}
  .dr-ifoot{padding:14px 16px;flex-direction:column}
}

/* Print (2.9): both reports (the visual report adds its own part in
   60-visual.css). Landscape, so the desktop layout applies; no header,
   menus, buttons, pop-ups or filters; every field row; charts keep their
   colors. visual.js switches to the light theme while printing. */
@page report{size:landscape;margin:12mm}
@media print{
  .dr-page,.vc-page{page:report}
  body:has(.dr-page,.vc-page){background:var(--surface)}
  body:has(.dr-page,.vc-page) :is(.app-header,.mobile-menu,.skip-link,.consent-banner,.messages){display:none!important}
  .dr-page{padding:0;gap:18px;max-width:none}
  :is(.dr-page,.vc-page) :is(.fh-actions,.fh-steps,.btn,.search,.select,.valpop,#modal,.dr-wlink,.dr-more,.dr-vbuttons,.dr-chips,.dr-ifilters,.dr-active,.dr-pager,.dr-menu){display:none!important}
  .dr-strip{grid-template-columns:repeat(7,minmax(0,1fr))}
  .dr-dist:not([open])>*:not(summary){display:none}
  .dr-fields .dr-frow:is(.is-extra,.is-extra-m){display:grid}
  .dr-frow[hidden]{display:grid!important}
  .card{box-shadow:none}
  :is(.dr-frow,.dr-irow,.dr-wrow,.dr-detail,.dr-verdict){break-inside:avoid}
  :is(.dr-chart,.dr-list-bar,.dr-strip-item,.dr-trow){-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .val{white-space:normal;overflow:visible;display:block;-webkit-line-clamp:none}
}
/* Review 29: a file name with no spaces wraps wherever it shows, and never widens the page. */
.fh-main{max-width:100%}
.fd-intro,.fd-chip,.rl-delete-name,.fl-card .mono,.up-file{overflow-wrap:anywhere}

/* ---- 60-visual.css ---- */
/* Step 2 · Visual check & fix: pop-up (06), running (10), report (07).
   Prefix vc-. Colors only through tokens. Cyan (--accent) is the visual check. */
.vc-page{gap:24px}
.vc-m{display:none}
.vc-link{color:var(--link);font-weight:600;font-size:13px;text-decoration:none}
.vc-link-btn{background:none;border:0;padding:0;color:var(--link);font-size:13px;font-weight:600;cursor:pointer}
.vc-empty{padding:16px;font-size:14px}
.vc-error{padding:10px 14px;border-radius:8px;background:var(--dangersoft);border:1px solid var(--danger);font-size:14px}
.vc-error-inline{display:block;color:var(--danger);font-size:12px;margin-top:4px}
.vc-section-head{padding:16px 16px 12px;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.vc-section-head h2{font-size:20px;font-weight:600}
.vc-section-head h3{font-size:17px}

/* Header row: the shared file header (50-data.css .fh-*) plus our downloads */
/* Wraps below the header when both don't fit (900 to 1100 px), never overlaps the steps */
.vc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap}
.vc-head-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex-shrink:0;margin-left:auto}
.vc-downloads{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.vc-kept{font-size:12px}

/* Tiles */
.vc-tile{padding:22px;display:flex;flex-direction:column;gap:6px}
.vc-tile-num{font-size:34px;font-weight:600;line-height:1.1;color:var(--text)}
.vc-tile-num.good{color:var(--ok)}
.vc-tile-num.bad{color:var(--danger)}
.vc-tile-name{font-size:15px;font-weight:600}
.vc-tile-unit{font-size:13px}
.vc-tile-estimate .vc-tile-num{font-size:30px}
.vc-tile-sub{font-size:13px;font-weight:600;margin-top:4px}
/* Fewer than 50 random rows: no estimate, a button to check more (2.3) */
.vc-tile-few{justify-content:space-between;align-items:flex-start;gap:14px}

/* Running (10) */
.vc-progress{display:flex;flex-direction:column;gap:24px}
.vc-run{padding:28px;display:flex;flex-direction:column;gap:18px}
.vc-run-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.vc-run-head h2{font-size:20px;font-weight:600}
.vc-run-head .muted{font-size:14px}
.vc-bar{height:12px;border-radius:6px;background:var(--line);overflow:hidden}
.vc-bar div{height:100%;background:var(--accent);transition:width .4s}
.vc-latest{overflow:hidden}
.vc-latest .vc-section-head .muted{font-size:13px}
.vc-earlier,.vc-note{font-size:14px}

/* Fixes table rows (07, 10) */
.vc-fix-head,.vc-fix-row{display:grid;grid-template-columns:76px 110px 118px minmax(0,1fr) minmax(0,1fr) 124px;gap:14px;align-items:center;padding:11px 16px}
.vc-fix-head{padding:10px 16px;background:var(--surface2)}
.vc-fix-row{border-top:1px solid var(--line);text-decoration:none;color:var(--text);font-size:13px;position:relative}
.vc-fix-row.is-link:hover{background:var(--surface2)}
/* The row number links to the fix detail and covers the row (stretched
   link); a cut value is a button above it (2.6). */
.vc-fix-link{color:inherit;text-decoration:none}
.vc-fix-link::after{content:"";position:absolute;inset:0}
.vc-fix-link:focus-visible{outline:none}
.vc-fix-link:focus-visible::after{outline:2px solid var(--accent);outline-offset:-2px}
.vc-fix-row .val.is-cut{position:relative;z-index:1}
.vc-row-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vc-fix-row.is-selected{background:var(--accentsoft);box-shadow:inset 3px 0 0 var(--accent)}
.vc-fix-row .mono{font-size:13px;min-width:0}
.vc-c-field{overflow-wrap:anywhere}
.vc-c-your,.vc-c-page{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-c-your{color:var(--danger)}
.vc-c-page{font-weight:500;display:flex;align-items:baseline;gap:4px}
.vc-c-your.is-empty,.vc-c-page.is-empty{color:var(--muted);font-weight:400}
.vc-c-type{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-fix-row.is-kept .vc-c-your{color:var(--text)}
/* A page value a spreadsheet would run as a formula (1.4) */
.vc-formula{display:inline-block;flex-shrink:0;padding:1px 6px;border-radius:4px;background:var(--warnsoft);border:1px solid var(--warn);color:var(--text);font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:11px;font-weight:600;white-space:nowrap}
.vc-formula-note{padding:8px 10px;border-radius:8px;background:var(--warnsoft);border:1px solid var(--warn);font-size:13px}
.vc-c-arrow{display:none}

/* Fixes per field + pages checked */
.vc-fields{overflow:hidden;display:flex;flex-direction:column}
.vc-fields .vc-section-head{padding:16px 16px 4px;align-items:center}
.vc-hint{font-size:13px;padding:0 16px 12px}
.vc-field-head,.vc-field-row{display:grid;grid-template-columns:150px 60px minmax(0,1fr);gap:14px;align-items:center;padding:11px 16px}
.vc-field-head{padding:8px 16px;background:var(--surface2)}
.vc-field-row{border-top:1px solid var(--line);text-decoration:none;color:var(--text)}
.vc-field-row:hover{background:var(--surface2);color:var(--text)}
.vc-field-row.is-active{background:var(--accentsoft);box-shadow:inset 3px 0 0 var(--accent)}
.vc-field-row .mono{font-size:13px}
.vc-field-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-field-bar{height:8px;border-radius:4px;background:var(--surface2);overflow:hidden}
.vc-field-bar span{display:block;height:100%;border-radius:4px;background:var(--danger)}
.vc-field-row.is-extra{display:none}
.vc-fields.show-all .vc-field-row.is-extra,.vc-fields.is-searching .vc-field-row.is-extra{display:grid}
.vc-fields .vc-field-row[hidden]{display:none}
.vc-fields-foot{padding:12px 16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;font-size:13px}
.vc-stack{display:flex;gap:2px;height:28px;border-radius:6px;overflow:hidden;background:var(--line)}
.vc-stack span,.vc-swatch{background:var(--faint)}
.vc-stack .is-ok,.vc-swatch.is-ok{background:var(--strong)}
/* Dark: --strong is navy on navy (1.7:1); --chart has 5.7:1 on the card (3.14) */
[data-theme="dark"] .vc-stack .is-ok,[data-theme="dark"] .vc-swatch.is-ok{background:var(--chart)}
.vc-stack .is-wrong,.vc-swatch.is-wrong{background:var(--danger)}
.vc-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.vc-legend li{display:flex;gap:10px;align-items:center;font-size:14px}
.vc-legend li span:nth-child(2){flex-grow:1}
.vc-legend .mono{font-size:13px}
.vc-swatch{width:12px;height:12px;border-radius:3px;flex-shrink:0}

/* All fixes */
/* clip, not hidden: hidden would make this a scroll box and break the sticky panel */
.vc-fixes{overflow:clip;scroll-margin-top:16px}
.vc-fixes .vc-section-head{padding:18px 16px 12px}
/* One line from 901 px (5.2): the search box gives way first */
.vc-filters{padding:0 16px 12px;display:flex;gap:10px;align-items:center}
.vc-search-wide{width:auto;flex:1 1 320px;min-width:150px;max-width:320px}
.vc-row-input{width:120px;flex-shrink:0}
.vc-row-input input{-moz-appearance:textfield}
.vc-chips{padding:0 16px 14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vc-clear{font-size:13px}
.vc-fixes-layout{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
.vc-fixes-layout:has(.vc-detail:not(:empty)){grid-template-columns:minmax(0,1fr) 360px}
.vc-table{display:flex;flex-direction:column;min-width:0}
.vc-pager{padding:12px 16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.vc-pager>.muted{font-size:13px}
.vc-pages{display:flex;gap:6px;align-items:center}
.vc-page-btn{height:32px;padding:0 12px;font-size:13px}
.vc-page-btn:has(.icon){padding:0 8px}
.vc-page-btn .icon{width:16px;height:16px}
.vc-page-btn.is-current{background:var(--ink);color:var(--onstrong)}

/* Fix detail panel */
.vc-detail:empty{display:none}
.vc-detail{border-left:1px solid var(--line);background:var(--surface)}
/* Wide screens: the panel sits next to the table and stays in view (2.2).
   The screenshot column goes, so Your value and On the page keep room (2.1). */
.vc-detail:not(:empty){position:sticky;top:16px;align-self:start;max-height:calc(100vh - 32px);overflow-y:auto}
.vc-fixes-layout:has(.vc-detail:not(:empty)) :is(.vc-fix-head,.vc-fix-row){grid-template-columns:70px 100px 118px minmax(0,1fr) minmax(0,1fr)}
.vc-fixes-layout:has(.vc-detail:not(:empty)) .vc-c-shot{display:none}
.vc-detail-title{display:flex;flex-direction:column;gap:4px;min-width:0;margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}
.vc-detail-title:focus{outline:0}
.vc-detail-title:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.vc-type{font-size:12px;font-weight:600;color:var(--muted)}
.vc-kept-note{font-size:13px}
.vc-detail-inner{padding:18px;display:flex;flex-direction:column;gap:14px}
.vc-detail-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.vc-detail-head .mono{font-size:14px;font-weight:500;overflow-wrap:anywhere}
.vc-shot{background:var(--shotbg);border:1px solid var(--shotborder);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px;align-items:center}
.vc-shot .lbl{font-size:10px;align-self:flex-start}
.vc-shot-frame{width:320px;max-width:100%;height:160px;overflow:hidden;position:relative;border-radius:6px;background:var(--skel2)}
.vc-shot-inner{position:absolute;left:0;top:0;transform-origin:0 0}
.vc-shot-inner img{display:block;max-width:none}
.vc-shot-box{position:absolute;border:2px solid var(--accent);border-radius:4px}
.vc-crop{max-width:100%;height:auto;border-radius:6px}
.vc-shot-empty{width:100%;height:120px;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;color:var(--faint);font-size:13px}
.vc-shot-empty .icon{width:36px;height:36px}
.vc-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vc-values>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.vc-value{font-size:18px;font-weight:600;overflow-wrap:anywhere}
.vc-your{color:var(--danger);text-decoration:line-through}
.vc-value.is-empty{color:var(--muted);font-weight:400;text-decoration:none}
.vc-url{font-size:13px;overflow-wrap:anywhere}
.vc-detail-actions{display:flex;gap:8px}
.vc-detail-actions .btn{height:36px;font-size:13px;flex:1;padding:0 12px}
.vc-same-row{display:flex;flex-direction:column;gap:6px;padding-top:14px;border-top:1px solid var(--line)}
.vc-same-row .mono{font-size:13px;overflow-wrap:anywhere}

/* Bottom note */
.vc-more{padding:20px 24px;border-radius:12px;background:var(--sunken);display:flex;justify-content:space-between;align-items:center;gap:24px}
.vc-more p{font-size:15px}

/* Pop-up (06, m06) */
.vc-close{width:36px;height:36px;border:0;background:var(--surface2);border-radius:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);flex-shrink:0;padding:0}
.vc-close .icon{width:16px;height:16px}
.vc-close-sm{width:30px;height:30px}
.vc-modal{position:fixed;inset:0;z-index:120;display:flex;justify-content:center;align-items:flex-start;padding:48px 16px;overflow-y:auto}
.vc-backdrop{position:fixed;inset:0;background:rgba(5,14,24,0.6)}
.vc-dialog{position:relative;width:680px;max-width:100%;padding:30px;display:flex;flex-direction:column;gap:22px;box-shadow:0 20px 60px rgba(0,0,0,0.25)}
.vc-modal.is-page{position:static;padding:0;z-index:auto;overflow:visible}
.vc-modal.is-page .vc-dialog{box-shadow:none}
.vc-grab{display:none}
.vc-dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.vc-dialog-title{display:flex;flex-direction:column;gap:10px}
.vc-dialog-title h2{text-wrap:balance}  /* review 19: no "fix" alone on a line at 320 px */
.vc-dialog h2{font-size:26px}
.vc-form{display:flex;flex-direction:column;gap:22px}
.vc-group{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.vc-q{font-size:15px;font-weight:600;padding:0;margin-bottom:10px}
.vc-q-hint{font-weight:400;font-size:13px}
.vc-rows{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.vc-number{height:44px;width:160px;border:2px solid var(--primary);border-radius:8px;padding:0 14px;display:flex;align-items:center;gap:8px;background:var(--surface)}
.vc-number input{border:0;outline:0;background:transparent;font-size:17px;font-weight:500;width:100%;min-width:0;-moz-appearance:textfield}
.vc-number input::-webkit-outer-spin-button,.vc-number input::-webkit-inner-spin-button,.vc-row-input input::-webkit-outer-spin-button,.vc-row-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.vc-number .muted{font-size:13px}
.vc-number:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.vc-picks{display:flex;gap:10px;flex-wrap:wrap}
.vc-pick{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:18px;font-size:14px;font-weight:600;background:var(--surface);color:var(--text);border:1px solid var(--borderstrong);cursor:pointer}
.vc-pick.is-on{background:var(--ink);color:var(--onstrong);border-color:var(--ink)}
.vc-options{display:flex;gap:10px}
.vc-option{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);flex:1;cursor:pointer;position:relative}
.vc-option input{position:absolute;opacity:0;width:1px;height:1px}
.vc-radio{width:18px;height:18px;border-radius:9px;border:1.5px solid var(--borderstrong);flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px}
.vc-option:has(input:checked){border:2px solid var(--primary);background:var(--accentsoft);padding:13px}
.vc-option input:checked+.vc-radio{border:2px solid var(--primary)}
.vc-option input:checked+.vc-radio::after{content:"";width:8px;height:8px;border-radius:4px;background:var(--primary)}
.vc-option input:focus-visible+.vc-radio{outline:2px solid var(--accent);outline-offset:2px}
.vc-option-text{display:flex;flex-direction:column;gap:3px}
.vc-option-name{font-size:15px;font-weight:600}
.vc-option-text .muted{font-size:13px;line-height:1.4}
.vc-recommended{font-size:11px;color:var(--link)}
.vc-actions{display:flex;justify-content:flex-end}
.vc-limit-note{font-size:13px;text-align:right;margin-bottom:10px}
.vc-warn{padding:16px 18px;border-radius:10px;background:var(--warnsoft);border:1px solid var(--warn);display:flex;flex-direction:column;gap:12px}
.vc-warn-text{display:flex;gap:10px;align-items:flex-start}
.vc-warn-icon{color:var(--warn);display:flex;margin-top:1px}
.vc-warn-icon .icon{width:20px;height:20px}
.vc-warn-title{font-size:15px;font-weight:600}
.vc-warn-sub{font-size:14px;color:var(--text2)}
.vc-warn-actions{display:flex;gap:10px;justify-content:flex-end}
.vc-foot{font-size:13px;line-height:1.2}  /* review 26: no extra space above the letters, so the gap under the button looks like the one above it */
/* Review 25: with the note above the button (10px away), the line under it is as close (the dialog's gap is 22px). */
.vc-dialog:has(.vc-limit-note:not([hidden])) .vc-foot{margin-top:-12px}
/* Review 23: rows never sent (bad page URL), under the button; a URL-only file. */
.vc-gap{font-size:13px;margin-top:8px}  /* review 24: under the rows field */
.vc-left-out{font-size:13px;margin-top:10px}  /* review 24: "5 rows left out: no valid page URL." */
.vc-left-out+.vc-copies{margin-top:-12px}  /* review 25: "2 identical copies got the same result.", 6px under the other note (the card's gap is 18px) */
.vc-nothing{font-size:15px;line-height:1.5}

/* Small laptops and tablets: the table keeps the full width, the panel is
   a drawer on the right (2.1: columns never collapse). */
@media (min-width: 768px) and (max-width: 1279px){
  .vc-fixes-layout:has(.vc-detail:not(:empty)){grid-template-columns:minmax(0,1fr)}
  .vc-fixes-layout:has(.vc-detail:not(:empty)) :is(.vc-fix-head,.vc-fix-row){grid-template-columns:76px 110px 118px minmax(0,1fr) minmax(0,1fr) 124px}
  .vc-fixes-layout:has(.vc-detail:not(:empty)) .vc-c-shot{display:block}
  .vc-detail:not(:empty){position:fixed;top:0;right:0;bottom:0;width:380px;max-width:100%;max-height:none;align-self:stretch;z-index:130;border-left:1px solid var(--border);box-shadow:0 20px 60px rgba(0,0,0,0.25)}
}

/* Tablets (768 to 1023 px): narrower fixed columns so the values keep room;
   the filters wrap instead of cutting the selects. */
@media (min-width: 768px) and (max-width: 1023px){
  .vc-fix-head,.vc-fix-row,.vc-fixes-layout:has(.vc-detail:not(:empty)) :is(.vc-fix-head,.vc-fix-row){grid-template-columns:56px 96px 92px minmax(0,1fr) minmax(0,1fr) 84px;gap:10px;padding-left:14px;padding-right:14px}
  .vc-filters{flex-wrap:wrap}
  .vc-fields .search{width:160px}
  .vc-field-head,.vc-field-row{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr)}
}

@media (max-width: 767px){
  .vc-page{gap:18px}
  .vc-head{flex-direction:column;align-items:stretch;gap:18px}
  .vc-head-actions{align-items:stretch;margin-left:0}
  .vc-downloads{flex-direction:column-reverse}
  .vc-downloads .btn,.vc-fixed-file .btn{width:100%}
  .vc-download-fixes{height:50px}
  .vc-tile{padding:14px;gap:4px}
  /* The estimate gets the whole row so its range stays on one line (5.1) */
  .vc-tile-estimate{grid-column:1/-1}
  .vc-tile-estimate .vc-tile-num{white-space:nowrap}
  .vc-tile-num{font-size:24px}
  .vc-tile-name{font-size:13px}
  .vc-tile-unit{font-size:12px}
  .vc-run{padding:18px;gap:12px}
  .vc-run-head{flex-direction:column;gap:8px}
  .vc-run-head h2{font-size:17px}
  .vc-eta-mobile{font-size:13px}
  .vc-bar{height:10px}
  .vc-field-head{display:none}
  .vc-field-row{grid-template-columns:100px 36px minmax(0,1fr);gap:10px;padding:8px 18px}
  .vc-left-out+.vc-copies{margin-top:-6px}
  .vc-stack{height:22px}
  .vc-fix-head{display:none}
  .vc-m{display:inline}
  .vc-row-word{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .vc-fix-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 8px;padding:12px 14px}
  .vc-fix-row::before{content:"";order:4;flex-basis:100%;height:0}
  .vc-c-row{order:1;color:var(--muted);font-size:12px!important}
  .vc-c-field{order:2;color:var(--muted);font-size:12px!important;margin-left:-4px}
  .vc-c-type{order:3;font-size:12px;margin-left:-4px}
  .vc-fix-row.is-kept .vc-c-type{display:none}
  .vc-c-your{order:5;text-decoration:line-through;font-size:14px!important;max-width:100%}
  .vc-fix-row.is-kept .vc-c-your,.vc-c-your.is-empty{text-decoration:none}
  .vc-c-arrow{display:inline;order:6}
  .vc-c-page{order:7;font-weight:600!important;font-size:14px!important;max-width:100%}
  .vc-fix-row.is-kept .vc-c-page{font-weight:400!important}
  .vc-c-shot{order:8;flex-basis:100%}
  .vc-c-shot:empty{display:none}
  .vc-filters{flex-direction:column;align-items:stretch;padding:0 14px 12px}
  .vc-search-wide{width:100%;max-width:none;flex:none}
  /* Tap targets of at least 24 × 24 px (4.4) */
  .vc-link-btn,.vc-clear,a.vc-link{display:inline-flex;align-items:center;min-height:32px;min-width:24px}
  .vc-filters .select{align-self:flex-start}
  .vc-fixes .vc-section-head{padding:14px 14px 10px;flex-direction:column;gap:2px}
  .vc-fixes .vc-section-head .muted{font-size:13px}
  .vc-fixes .vc-section-head h2{font-size:17px}
  .vc-fixes-layout:has(.vc-detail:not(:empty)){grid-template-columns:minmax(0,1fr)}
  .vc-detail:not(:empty){position:fixed;inset:0;z-index:130;border:0;overflow-y:auto;background:var(--surface);max-height:none;align-self:stretch}
  .vc-detail-inner{padding:16px 16px 32px}
  .vc-shot-frame{width:100%}
  .vc-more{flex-direction:column;align-items:stretch;gap:12px;padding:18px}
  .vc-more p{font-size:14px;line-height:1.5}
  /* Pop-up as a bottom sheet (m06) */
  .vc-modal{padding:70px 0 0;align-items:stretch}
  .vc-dialog{width:100%;border-radius:20px 20px 0 0;border:0;padding:12px 18px 24px;gap:16px;min-height:100%}
  .vc-modal.is-page .vc-dialog{border-radius:12px;border:1px solid var(--border);min-height:0}
  .vc-grab{display:block;flex-shrink:0;width:40px;height:5px;border-radius:3px;background:var(--borderstrong);align-self:center}
  .vc-modal.is-page .vc-grab{display:none}
  .vc-dialog h2{font-size:21px}
  .vc-dialog-head{align-items:center}
  .vc-rows{flex-direction:column;align-items:flex-start;gap:8px}
  .vc-picks{gap:6px}
  .vc-pick-all{display:none}
  .vc-options{flex-direction:column}
  .vc-warn{padding:14px;gap:10px}
  .vc-warn-icon{display:none}
  .vc-warn-title{font-size:14px}
  .vc-warn-sub{font-size:13px}
  .vc-warn-actions{flex-direction:column-reverse}
  .vc-warn-actions .btn,.vc-actions .btn{width:100%}
  .vc-limit-note{text-align:left}
  .vc-dialog:has(.vc-limit-note:not([hidden])) .vc-foot{margin-top:-6px}  /* the gap is 16px here */
}

/* Print (2.9): ?print=1 lists every fix (fix_list.print_context); the rest
   is in 50-data.css. */
.vc-print-note{padding:12px 16px;border-top:1px solid var(--line);font-size:13px}
@media print{
  .vc-page{padding:0;gap:18px;max-width:none}
  .vc-page :is(.vc-head-actions,.vc-filters,.vc-chips,.vc-pager,.vc-detail,.vc-more,.vc-hint,.vc-fields-foot,.vc-c-shot){display:none!important}
  .vc-fixes-layout,.vc-fixes-layout:has(.vc-detail:not(:empty)){grid-template-columns:minmax(0,1fr)}
  .vc-fix-head,.vc-fix-row,.vc-fixes-layout:has(.vc-detail:not(:empty)) :is(.vc-fix-head,.vc-fix-row){grid-template-columns:76px 150px 118px minmax(0,1fr) minmax(0,1fr)}
  .vc-fields .vc-field-row.is-extra{display:grid}
  :is(.vc-fix-row,.vc-field-row,.vc-tile){break-inside:avoid}
  :is(.vc-stack,.vc-swatch,.vc-field-bar,.vc-formula){-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .vc-fixes{overflow:visible}
}

/* Review 28: a fix panel that didn't load shows its "Try again" line in the page, not as a full-screen sheet with no way out. */
@media (max-width: 767px){
  .vc-detail:not(:empty):has(> .load-error:only-child){position:static;z-index:auto;overflow:visible;border-top:1px solid var(--line)}
}
/* Review 29: one shade per reason a page wasn't counted, so the bar can be read. */
.vc-stack .is-http_404,.vc-swatch.is-http_404{background:var(--muted)}
.vc-stack .is-http_5xx,.vc-swatch.is-http_5xx{background:var(--faint)}
.vc-stack .is-blocked,.vc-swatch.is-blocked{background:var(--borderstrong)}
.vc-stack .is-timeout,.vc-swatch.is-timeout{background:var(--border)}

/* Review 30: "Pages we couldn't open". */
.vc-unopened-row{display:grid;grid-template-columns:70px minmax(0,1fr) 190px;gap:12px;padding:10px 16px;border-top:1px solid var(--line);align-items:baseline;font-size:14px}
.vc-unopened-url{overflow-wrap:anywhere;color:var(--link)}
.vc-unopened-foot{padding:12px 16px;border-top:1px solid var(--line)}
@media (max-width:720px){
  .vc-unopened-row{grid-template-columns:52px minmax(0,1fr)}
  .vc-unopened-head{display:none}
  .vc-unopened-reason{grid-column:2;color:var(--muted);font-size:13px}
}

/* Result card (review 31): the answer in sentences, then what to look at and the buttons */

.vc-row-link{font-family:"IBM Plex Mono",monospace;font-size:.92em}
.vc-rows-more{display:inline}
.vc-rows-more>summary{display:inline;cursor:pointer;color:var(--link)}
.vc-rows-more[open]>summary{display:block;margin:4px 0}
.vc-rowbox{margin-top:12px;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);display:flex;flex-direction:column;gap:12px}
.vc-rowbox .vc-detail-head{display:flex;justify-content:space-between;align-items:center}
.vc-rowbox .vc-detail-actions{display:flex;gap:10px;flex-wrap:wrap}
@media print{.vc-row-detail{display:none}}

/* Round 35: the result in four numbers, same look as the data checks strip */

/* ---- 65-story.css ---- */
/* Round 36: the visual check report as a story. One font, three sizes (headline 34, title 20, body 15), numbers
   large and labels small. Colour is status: green fixed or matched, amber couldn't confirm, grey not opened or
   not checked, red only the wrong value in a before and after. */
.vc-c-thumb{display:none}
.vs-page{display:flex;flex-direction:column;gap:44px}
.vs-answer{display:flex;flex-direction:column;gap:26px}
.vs-headline{font-size:34px;line-height:1.2;font-weight:600;max-width:900px;margin:0}
.vs-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.vs-tile>a,.vs-tile>span{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:14px;background:var(--surface);border:1px solid var(--border);color:var(--text);text-decoration:none;height:100%}
.vs-tile>a:hover{border-color:var(--borderstrong)}
.vs-num{font-family:"IBM Plex Mono",monospace;font-size:34px;line-height:1.1;font-weight:600}
.vs-label{font-size:13px;color:var(--muted)}
.vs-tile.is-ok .vs-num{color:var(--ok)}
.vs-tile.is-warn .vs-num{color:var(--warn)}
.vs-tile.is-grey .vs-num{color:var(--muted)}
.vs-tile.is-zero>span{background:var(--surface2);border-color:var(--line)}
.vs-tile.is-zero .vs-num,.vs-tile.is-zero .vs-label{color:var(--faint)}
.vs-chart{display:flex;flex-direction:column;gap:12px}
.vs-bar{display:flex;gap:2px;height:30px;border-radius:9px;overflow:hidden}
.vs-seg{display:block;min-width:3px;height:100%}
.vs-keys{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13px}
.vs-keys a,.vs-keys span{display:inline-flex;align-items:center;gap:7px;color:var(--text);text-decoration:none}
.vs-keys b{font-family:"IBM Plex Mono",monospace;font-weight:600}
.vs-dot{display:inline-block;width:11px;height:11px;border-radius:3px}
.seg-fixed{background:var(--ok)}
.seg-matched{background:var(--oksoft);box-shadow:inset 0 0 0 1px var(--ok)}
.seg-unconfirmed{background:var(--warn)}
.seg-s_http_404{background:var(--muted)}
.seg-s_nothing_found{background:var(--faint)}
.seg-s_blocked{background:var(--borderstrong)}
.seg-s_timeout,.seg-s_http_5xx,.seg-s_invalid_url{background:var(--skel)}
.seg-unchecked{background:var(--sunken);box-shadow:inset 0 0 0 1px var(--border)}
.vs-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.vs-actions .vc-fixed-file{display:contents}
.vs-quiet{font-size:13px;color:var(--muted)}
.vs-section{display:flex;flex-direction:column;gap:16px}
.vs-h2{font-size:20px;line-height:1.3;font-weight:600;margin:0}
.vs-more{margin:0;font-size:15px}
/* the proof */
.vs-proof{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.vs-proofcard{display:flex;flex-direction:column;gap:8px;height:100%;padding:0 0 16px;border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden;color:var(--text);text-decoration:none}
.vs-proofcard:hover{border-color:var(--accent)}
.vs-shot{display:flex;align-items:center;justify-content:center;height:200px;background:var(--shotbg);border-bottom:1px solid var(--shotborder)}
.vs-frame{width:360px;max-width:none;height:200px;flex:none;border-radius:0;background:var(--shotbg)}
.vs-shot{position:relative;overflow:hidden}
.vs-shot .vs-frame{position:absolute;left:50%;top:0;transform:translateX(-50%)}
.vs-shot .vc-shot-box{border-color:var(--accent)}
.vs-field,.vs-line,.vs-domain{padding:0 18px}
.vs-field{font-size:15px;font-weight:600;margin-top:6px}
.vs-line{display:flex;flex-direction:column;gap:1px;font-size:15px;overflow-wrap:anywhere}
.vs-wrong{color:var(--danger)}
.vs-right{color:var(--ok);font-weight:600}
.vs-domain{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--muted);margin-top:4px}
/* where the scraper goes wrong */
.vs-fieldbars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:760px}
.vs-fieldbars a{display:grid;grid-template-columns:minmax(120px,240px) minmax(0,1fr) 40px;gap:14px;align-items:center;color:var(--text);text-decoration:none;font-size:15px}
.vs-fieldbars a:hover .vs-fname{text-decoration:underline}
.vs-fbar{display:block;height:12px;border-radius:6px;background:var(--sunken);overflow:hidden}
.vs-fbar i{display:block;height:100%;background:var(--ok);border-radius:6px}
.vs-fcount{font-family:"IBM Plex Mono",monospace;text-align:right}
/* the fixes table: no card, a thumbnail first */
.vs-page .vc-fixes.is-story{padding:0;border:0;background:transparent;box-shadow:none}
.vs-page .vc-fixes.is-story .vc-section-head{padding:0 0 4px}
.is-story .vc-c-thumb{display:block}
.is-story .vc-thumb{display:block;width:72px;height:44px;object-fit:contain;border-radius:6px;border:1px solid var(--shotborder);background:var(--shotbg)}
.is-story .vc-c-shot{display:none}
.is-story .vc-fix-head,.is-story .vc-fix-row,.is-story .vc-fixes-layout:has(.vc-detail:not(:empty)) :is(.vc-fix-head,.vc-fix-row){grid-template-columns:76px 64px 110px 100px minmax(0,1fr) minmax(0,1fr)}
.is-story .vc-fixes-layout:has(.vc-detail:not(:empty)) :is(.vc-fix-head,.vc-fix-row){grid-template-columns:76px 56px 90px 86px minmax(0,1fr) minmax(0,1fr)}
.is-story .vc-fixes-layout{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
/* folds */
.vs-fold>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.vs-fold>summary::-webkit-details-marker{display:none}
.vs-toggle,.vs-list>summary span{color:var(--link);font-size:15px}
.vs-fold[open]>summary .vs-toggle{display:none}
.vs-fold#not-confirmed{padding:0}
.vs-fold#not-confirmed[open]{gap:16px}
.vs-never{margin:0;font-size:15px;line-height:1.5}
.vs-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.vs-lines li{position:relative;padding-left:20px}
.vs-lines li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:4px;background:var(--warn)}
.vs-groups{margin:0;font-size:15px}
.vs-groups b{font-family:"IBM Plex Mono",monospace}
.vs-list{border-top:1px solid var(--line);padding-top:12px}
.vs-note{margin:0;font-size:13px;max-width:760px}
.vs-next{flex-direction:row;align-items:center;flex-wrap:wrap;gap:16px;font-size:15px}
.vs-next p{margin:0}
@media (max-width:1023px){.vs-proof{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
  .vs-page{gap:36px}
  .vs-headline{font-size:26px}
  .vs-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .vs-tile>a,.vs-tile>span{padding:14px 16px}
  .vs-num{font-size:28px}
  .vs-proof{grid-template-columns:minmax(0,1fr)}
  .vs-fieldbars a{grid-template-columns:minmax(80px,130px) minmax(0,1fr) 32px;gap:10px}
  .is-story .vc-c-thumb{order:0;flex-basis:100%}
  .is-story .vc-fixes-layout{border-radius:12px}
}
@media print{.vs-actions,.vs-keys a{display:none!important}}

/* The data checks report in the same system: the answer is plain type (no card), the checks are tiles that
   say how many things we noticed (amber, grey at 0), sections are cards of the same radius, titles 20px. */
.dr-page{gap:44px}
.dr-page .card{border-radius:14px}
.dr-verdict.card{background:transparent;border:0;border-radius:0;padding:0;gap:22px}
.dr-vhead{font-size:34px;line-height:1.2;max-width:900px}
.dr-vlines li::before{background:var(--warn)}
.dr-vlines li{font-size:15px}
.dr-strip{border-top:0;padding-top:0;margin-top:4px;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dr-strip-item a,.dr-strip-body{flex-direction:column-reverse;align-items:flex-start;justify-content:flex-end;gap:4px;padding:18px 20px;border-radius:14px;font-size:13px;height:100%}
.dr-strip-item .dr-strip-name{color:var(--muted)}
.dr-strip-count{font-size:34px;line-height:1.1}
.dr-strip-item.bad .dr-strip-count{color:var(--warn)}
.dr-strip-item.bad a{border-color:var(--border)}
.dr-strip-item.bad a:hover{border-color:var(--borderstrong)}
.dr-strip-item.ok .dr-strip-body{background:var(--surface2);border-color:var(--line)}
.dr-strip-item.ok .dr-strip-count,.dr-strip-item.ok .dr-strip-name{color:var(--faint)}
@media (max-width:767px){
  .dr-page{gap:36px}
  .dr-vhead{font-size:26px}
  .dr-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dr-strip>li:last-child:nth-child(odd){grid-column:auto}
  .dr-strip-item a,.dr-strip-body{padding:14px 16px}
  .dr-strip-count{font-size:28px}
  .dr-h2{font-size:20px}
}

/* ---- 70-management.css ---- */
/* Management area (staff only) and the read-only banner. */
.mg-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px}
.mg-tabs{display:flex;gap:16px;font-size:15px}
.mg-tabs a{color:var(--muted);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.mg-tabs a.active{color:var(--text);border-bottom-color:var(--accent)}
.mg-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mg-tile{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.mg-tile-label{font-size:13px}
.mg-tile-value{font-size:24px;font-weight:600}
.mg-tile-note{font-size:12px}
.mg-search{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mg-search .search{width:280px;max-width:100%}
.mg-card{padding:20px 24px;display:flex;flex-direction:column;gap:12px;overflow-x:auto}
.mg-card h2{font-size:20px;margin:0}
.mg-dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 24px;margin:0;font-size:14px}
.mg-dl dt{color:var(--muted)}
.mg-dl dd{margin:0;overflow-wrap:anywhere}
.mg-table-wrap{overflow-x:auto}
.mg-table{border-collapse:collapse;width:100%;font-size:14px}
.mg-table th,.mg-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.mg-table th{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.mg-table tr:last-child td{border-bottom:0}
.mg-line{display:block;font-size:12px;margin-top:2px}
.mg-pager{display:flex;gap:12px;font-size:14px}
@media (max-width:900px){.mg-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.mg-tiles{grid-template-columns:minmax(0,1fr)}.mg-dl{grid-template-columns:1fr;gap:0}.mg-dl dd{margin-bottom:8px}}

/* Staff reading someone else's report: a banner, and nothing that starts a check. */
.ro-banner{padding:10px 24px;background:var(--warnsoft);color:var(--text);border-bottom:1px solid var(--border);font-size:14px;text-align:center}
body:has(.ro-banner) :is(a[href*="/visual-check/new/"],a[href$="?visual=1"],a[hx-get*="/visual-check/new/"],form#fixed-file,#modal){display:none}