/* /analyze/ and Example Reports. c.css tokens only, so both themes work. Rows, not cards:
   boxes stay only for the forms. */

.az-hero{padding:var(--space-8) 0 var(--space-7);display:flex;flex-direction:column;gap:var(--space-5)}
.az-hero h1,.az-report-head h1{margin:0;font-size:var(--text-h1);line-height:1.05;letter-spacing:-.035em;font-weight:600}
.az-lede{margin:0;max-width:62ch;font-size:var(--text-lg);line-height:1.5;color:var(--fg2)}
.az-off{margin:0;font-size:var(--text-base);color:var(--fg2)}
.az-off a{color:var(--acc)}

.az-form{display:flex;flex-direction:column;gap:var(--space-4);max-width:640px;padding:var(--space-5)}
.az-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.az-form .btn{align-self:flex-start}
.az-field{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--text-sm);font-weight:500;color:var(--fg2);min-width:0}
.az-field input,.az-field textarea{width:100%;min-height:44px;padding:10px 14px;border:1px solid var(--line3);border-radius:var(--r-sm);background:var(--bg);color:var(--fg);font:inherit;font-size:var(--text-base);font-weight:400}
.az-field input[readonly]{background:transparent;color:var(--fg3);border-style:dashed}
.az-row{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.az-row .az-field{flex:1 1 220px}
.az-check{display:flex;align-items:center;gap:var(--space-3);min-height:44px;font-size:var(--text-base);color:var(--fg2)}
.az-check input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--acc-fill)}
.az-error,#review-form .status{margin:0;font-size:var(--text-sm);color:var(--danger)}
.az-legal{margin:0;font-size:var(--text-sm);color:var(--fg3)}
.az-legal a{color:var(--acc)}

.az-about{padding:var(--space-7) 0;border-top:1px solid var(--line)}
.az-about h2,.az-layer h2{margin:0 0 var(--space-4);font-size:var(--text-h2);line-height:1.1;letter-spacing:-.025em;font-weight:600}
.az-rows,.az-checks{list-style:none;margin:0;padding:0}
.az-rows .row{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:var(--space-2) var(--space-5);padding:var(--space-4) 0;border-top:1px solid var(--line)}
.az-rows span{color:var(--fg3);line-height:1.5;max-width:70ch}
.az-rows a{color:var(--acc)}

.az-banner{margin:var(--space-5) 0;padding:var(--space-3) var(--space-4);border:1px solid var(--line3);border-radius:var(--r-sm);font-size:var(--text-sm);line-height:1.45;color:var(--fg2)}
.az-banner strong{color:var(--acc);font-weight:600;margin-left:var(--space-2)}
.az-banner--reviewed{color:var(--acc);font-weight:600;border-color:var(--acc)}

.az-report-head{padding:var(--space-5) 0 var(--space-4)}
.az-target{margin:var(--space-3) 0 var(--space-1);font-size:var(--text-lg);color:var(--fg);overflow-wrap:anywhere}
.az-date{margin:0;font-size:var(--text-sm);color:var(--fg3)}
.az-progress{padding:var(--space-6) 0 var(--space-7);border-top:1px solid var(--line)}
.az-progress h2{margin:0 0 var(--space-3);font-size:var(--text-h3);font-weight:600;font-variant-numeric:tabular-nums}
.az-progress p{margin:0 0 var(--space-3);color:var(--fg2);max-width:62ch;line-height:1.5}
.az-progress a{color:var(--acc)}

.az-jump{display:flex;flex-wrap:wrap;gap:0 var(--space-5)}
.az-jump a{display:inline-flex;align-items:center;min-height:44px;color:var(--acc);text-underline-offset:3px}

.az-shots{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:flex-start;padding:var(--space-5) 0}
.az-shot{margin:0;min-width:0}
.az-shot--desktop{flex:3 1 420px}
.az-shot--mobile{flex:1 1 180px;max-width:240px}
.az-shot img{width:100%;height:auto;border:1px solid var(--line3);border-radius:var(--r-sm);background:var(--card)}
.az-shot figcaption{margin-top:var(--space-2);font-size:var(--text-sm);color:var(--fg3)}

.az-layer{padding:var(--space-7) 0;border-top:1px solid var(--line)}
.az-layer-note{margin:0 0 var(--space-3);max-width:70ch;color:var(--fg3);line-height:1.5;font-variant-numeric:tabular-nums}
.az-layer-note a{color:var(--acc);overflow-wrap:anywhere}
.az-group{margin:var(--space-6) 0 var(--space-2);font-size:var(--text-h3);font-weight:600}
.az-check-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--space-2) var(--space-4);padding:var(--space-4) 0;border-top:1px solid var(--line)}
.az-check-body strong{font-weight:600;color:var(--fg)}
.az-evidence{margin:var(--space-1) 0 0;color:var(--fg2);line-height:1.5;overflow-wrap:anywhere;max-width:78ch;font-variant-numeric:tabular-nums}
.az-suggestion{margin:var(--space-1) 0 0;color:var(--fg3);line-height:1.5;max-width:78ch}
.az-links{margin:var(--space-2) 0 0;padding:0;list-style:none;font-size:var(--text-sm)}
.az-links a{color:var(--acc);overflow-wrap:anywhere}
.az-status,.az-rating{font-size:var(--text-sm);font-weight:600;line-height:1.5}
.az-status--pass{color:var(--fg3)}
.az-status--warn{color:var(--acc)}
.az-status--fail{color:var(--danger)}
.az-rating--good{color:var(--fg)}
.az-rating--ok{color:var(--fg2)}
.az-rating--weak{color:var(--acc)}
.az-rating--none{color:var(--fg3)}
.az-suggested{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:var(--space-2) var(--space-4);padding:var(--space-4) 0;border-top:1px solid var(--line)}
.az-suggested span{color:var(--fg2);line-height:1.5}

@media (max-width:640px){
  .az-hero{padding:var(--space-6) 0}
  .az-lede{font-size:var(--text-base)}
  .az-rows .row,.az-suggested{grid-template-columns:minmax(0,1fr)}
  .az-check-row{grid-template-columns:minmax(0,1fr)}
  .az-shot--mobile{max-width:none}
}

.az-all{margin-top:var(--space-6)}
.az-all summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--acc);text-decoration:underline;text-underline-offset:2px}

/* UX round 2026-11-02: start form, live progress, at a glance, areas, sticky actions. */
.az-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.az-offscreen{position:fixed;left:-9999px;top:0}
.az-link{display:inline-flex;align-items:center;min-height:44px;color:var(--acc);text-underline-offset:3px}

.az-start{display:flex;flex-direction:column;gap:var(--space-3);max-width:820px}
.az-start .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.az-start-label{font-size:var(--text-sm);font-weight:500;color:var(--fg2)}
.az-start-row{display:flex;gap:var(--space-3);align-items:stretch}
.az-start-row input{flex:1 1 auto;min-width:0;min-height:60px;padding:14px 18px;border:1px solid var(--line3);border-radius:var(--r-md);background:var(--card);color:var(--fg);font:inherit;font-size:var(--text-lg)}
.az-start-row input[aria-invalid="true"]{border-color:var(--danger)}
.az-start-row .btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:60px;white-space:nowrap}
.az-start-row .btn[disabled]{opacity:.8;cursor:progress}
.az-about-text{margin:0 0 var(--space-3);max-width:70ch;font-size:var(--text-lg);line-height:1.5;color:var(--fg2)}
.az-small{margin:var(--space-3) 0 0;max-width:70ch;font-size:var(--text-sm);line-height:1.5;color:var(--fg3)}
.az-small a{color:var(--acc)}

.az-spin{display:inline-block;animation:az-spin 1s linear infinite}
@keyframes az-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.az-spin{animation:none}}

.az-stages{list-style:none;margin:var(--space-4) 0;padding:0}
.az-stages li{display:flex;align-items:center;gap:var(--space-3);min-height:40px;font-size:var(--text-base);color:var(--fg3)}
.az-stages i{font-size:20px;line-height:1;color:var(--fg4)}
.az-stages li[data-state="done"]{color:var(--fg2)}
.az-stages li[data-state="done"] i{color:var(--acc)}
.az-stages li[data-state="current"]{color:var(--fg);font-weight:600}
.az-stages li[data-state="current"] i{color:var(--acc)}
.az-elapsed{font-variant-numeric:tabular-nums}
.az-slow{padding:var(--space-3) var(--space-4);border:1px solid var(--line3);border-radius:var(--r-sm)}
#az-live-shots:empty{display:none}

.az-actions{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--space-3);margin:var(--space-3) 0;padding:var(--space-2) 0;background:var(--bg);border-bottom:1px solid var(--line)}
.az-action-main,.az-action{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:8px 18px;font-size:var(--text-sm)}
#fixes,#measured,#opinions,#review,.az-area,.az-glance{scroll-margin-top:80px}

.az-glance{padding:var(--space-5) 0 var(--space-6)}
.az-glance h2{margin:0 0 var(--space-4);font-size:var(--text-h3);font-weight:600}
.az-glance-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--space-6);align-items:start}
.az-glance .az-shots{padding:0;flex-wrap:nowrap}
.az-glance .az-shot--desktop{flex:3 1 0}
.az-glance .az-shot--mobile{flex:1 1 0;max-width:none}
.az-glance .az-shot img{max-height:420px;object-fit:cover;object-position:top}
.az-areas{list-style:none;margin:0;padding:0}
.az-areas a{display:flex;justify-content:space-between;gap:var(--space-4);align-items:center;min-height:44px;padding:var(--space-2) 0;border-top:1px solid var(--line);text-decoration:none;color:var(--fg)}
.az-areas a:hover .az-area-name{color:var(--acc)}
.az-areas li:last-child a{border-bottom:1px solid var(--line)}
.az-area-name{font-weight:500}
.az-area-count{font-size:var(--text-sm);font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.az-area-count--pass{color:var(--fg3)}
.az-area-count--warn{color:var(--acc)}
.az-area-count--fail{color:var(--danger)}

.az-area{border-top:1px solid var(--line)}
.az-area:last-of-type{border-bottom:1px solid var(--line)}
.az-area summary{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);min-height:52px;padding:var(--space-2) 0;cursor:pointer;font-size:var(--text-lg)}
.az-area[open] summary{border-bottom:1px solid var(--line)}
.az-area .row:first-child{border-top:0}
.az-why{margin:var(--space-1) 0 0;color:var(--fg2);line-height:1.5;max-width:78ch}
.az-opinion-row{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:var(--space-2) var(--space-4);padding:var(--space-3) 0;border-top:1px solid var(--line)}
.az-opinion-row .az-evidence{margin-top:0}

@media (max-width:760px){
  .az-glance-grid{grid-template-columns:minmax(0,1fr)}
  .az-opinion-row{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .az-start-row{flex-direction:column}
  .az-start-row .btn{width:100%}
  .az-actions{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter)}
  .az-action-main{flex:1 1 auto;padding:8px 10px;font-size:13.5px}
  .az-action{flex:0 0 44px;width:44px;padding:0}
  .az-action .az-action-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}