/* Shared nav-button chrome: home link, lang-switcher toggle, theme toggle.
   All buttons are 4px radius per the Joram brand guideline — no circles. */
.nav-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.nav-btn:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}

.nav-btn i {
  font-size: 20px;
  line-height: 1;
}

/* Buttons (generic) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font: 600 var(--fs-sm) var(--font-body);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.btn:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}

/* .btn-primary is the primary (non-CTA) tier — Oxford Blue / Rose Quartz.
   Used for Retry, Export, and anything important but not THE one action. */
.btn-primary {
  background: var(--button-bg);
  border-color: var(--button-bg);
  color: var(--button-fg);
}

.btn-primary:hover {
  filter: brightness(var(--hover-brightness));
}

/* Status badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font: 700 var(--fs-xs) var(--font-body);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge-pass { color: var(--status-pass); background: var(--status-pass-bg); }
.badge-warn { color: var(--status-warn); background: var(--status-warn-bg); }
.badge-fail { color: var(--status-fail); background: var(--status-fail-bg); }
.badge-info { color: var(--status-info); background: var(--status-info-bg); }

/* Loading checklist */
.loading-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.loading-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 360px;
  margin: 0 auto;
}

.loading-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-faint);
  font-size: var(--fs-sm);
  transition: color var(--transition-base);
}

.loading-item[data-status="active"] {
  color: var(--text);
}

.loading-item[data-status="done"] {
  color: var(--status-pass);
}

.loading-item[data-status="failed"] {
  color: var(--status-warn);
}

.loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  flex-shrink: 0;
}

.loading-item[data-status="active"] .loading-dot {
  background: var(--accent);
  animation: pulse 1s ease-in-out infinite;
}

.loading-item[data-status="done"] .loading-dot {
  background: var(--status-pass);
}

.loading-item[data-status="failed"] .loading-dot {
  background: var(--status-warn);
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* Error panel */
.error-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--status-fail-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
}

.error-panel[data-tone="warn"] {
  border-color: var(--status-warn-bg);
}

.error-panel h3 {
  font: var(--h3);
  margin-bottom: var(--space-2);
}

.error-panel p {
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

/* Score gauge */
.score-panel {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}

.score-gauge {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}

.score-gauge svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.score-gauge circle.track {
  fill: none;
  stroke: var(--bg-subtle);
  stroke-width: 10;
}

.score-gauge circle.fill {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

.score-gauge-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.score-gauge-number {
  font: 700 var(--fs-xl) var(--font-heading);
  line-height: 1;
}

.score-gauge-grade {
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-top: 2px;
  letter-spacing: 0.05em;
}

/* Grade color, applied via class (js/ui/score-gauge.js) instead of an
   inline `style="color:..."` attribute, so the gauge stays CSP
   `style-src`-compliant. */
.score-gauge-grade.grade-a { color: var(--grade-a); }
.score-gauge-grade.grade-b { color: var(--grade-b); }
.score-gauge-grade.grade-c { color: var(--grade-c); }
.score-gauge-grade.grade-d { color: var(--grade-d); }
.score-gauge-grade.grade-f { color: var(--grade-f); }

/* Ring fill stroke-dashoffset (0-100, one per integer score) — precomputed
   from CIRCUMFERENCE = 2 * PI * 60 so the animated fill can be driven by
   classList instead of the `style` attribute. Applied by js/ui/score-gauge.js. */
.gauge-fill-0 { stroke-dashoffset: 376.991118; } .gauge-fill-1 { stroke-dashoffset: 373.221207; } .gauge-fill-2 { stroke-dashoffset: 369.451296; }
.gauge-fill-3 { stroke-dashoffset: 365.681385; } .gauge-fill-4 { stroke-dashoffset: 361.911474; } .gauge-fill-5 { stroke-dashoffset: 358.141563; }
.gauge-fill-6 { stroke-dashoffset: 354.371651; } .gauge-fill-7 { stroke-dashoffset: 350.601740; } .gauge-fill-8 { stroke-dashoffset: 346.831829; }
.gauge-fill-9 { stroke-dashoffset: 343.061918; } .gauge-fill-10 { stroke-dashoffset: 339.292007; } .gauge-fill-11 { stroke-dashoffset: 335.522095; }
.gauge-fill-12 { stroke-dashoffset: 331.752184; } .gauge-fill-13 { stroke-dashoffset: 327.982273; } .gauge-fill-14 { stroke-dashoffset: 324.212362; }
.gauge-fill-15 { stroke-dashoffset: 320.442451; } .gauge-fill-16 { stroke-dashoffset: 316.672539; } .gauge-fill-17 { stroke-dashoffset: 312.902628; }
.gauge-fill-18 { stroke-dashoffset: 309.132717; } .gauge-fill-19 { stroke-dashoffset: 305.362806; } .gauge-fill-20 { stroke-dashoffset: 301.592895; }
.gauge-fill-21 { stroke-dashoffset: 297.822984; } .gauge-fill-22 { stroke-dashoffset: 294.053072; } .gauge-fill-23 { stroke-dashoffset: 290.283161; }
.gauge-fill-24 { stroke-dashoffset: 286.513250; } .gauge-fill-25 { stroke-dashoffset: 282.743339; } .gauge-fill-26 { stroke-dashoffset: 278.973428; }
.gauge-fill-27 { stroke-dashoffset: 275.203516; } .gauge-fill-28 { stroke-dashoffset: 271.433605; } .gauge-fill-29 { stroke-dashoffset: 267.663694; }
.gauge-fill-30 { stroke-dashoffset: 263.893783; } .gauge-fill-31 { stroke-dashoffset: 260.123872; } .gauge-fill-32 { stroke-dashoffset: 256.353961; }
.gauge-fill-33 { stroke-dashoffset: 252.584049; } .gauge-fill-34 { stroke-dashoffset: 248.814138; } .gauge-fill-35 { stroke-dashoffset: 245.044227; }
.gauge-fill-36 { stroke-dashoffset: 241.274316; } .gauge-fill-37 { stroke-dashoffset: 237.504405; } .gauge-fill-38 { stroke-dashoffset: 233.734493; }
.gauge-fill-39 { stroke-dashoffset: 229.964582; } .gauge-fill-40 { stroke-dashoffset: 226.194671; } .gauge-fill-41 { stroke-dashoffset: 222.424760; }
.gauge-fill-42 { stroke-dashoffset: 218.654849; } .gauge-fill-43 { stroke-dashoffset: 214.884938; } .gauge-fill-44 { stroke-dashoffset: 211.115026; }
.gauge-fill-45 { stroke-dashoffset: 207.345115; } .gauge-fill-46 { stroke-dashoffset: 203.575204; } .gauge-fill-47 { stroke-dashoffset: 199.805293; }
.gauge-fill-48 { stroke-dashoffset: 196.035382; } .gauge-fill-49 { stroke-dashoffset: 192.265470; } .gauge-fill-50 { stroke-dashoffset: 188.495559; }
.gauge-fill-51 { stroke-dashoffset: 184.725648; } .gauge-fill-52 { stroke-dashoffset: 180.955737; } .gauge-fill-53 { stroke-dashoffset: 177.185826; }
.gauge-fill-54 { stroke-dashoffset: 173.415914; } .gauge-fill-55 { stroke-dashoffset: 169.646003; } .gauge-fill-56 { stroke-dashoffset: 165.876092; }
.gauge-fill-57 { stroke-dashoffset: 162.106181; } .gauge-fill-58 { stroke-dashoffset: 158.336270; } .gauge-fill-59 { stroke-dashoffset: 154.566359; }
.gauge-fill-60 { stroke-dashoffset: 150.796447; } .gauge-fill-61 { stroke-dashoffset: 147.026536; } .gauge-fill-62 { stroke-dashoffset: 143.256625; }
.gauge-fill-63 { stroke-dashoffset: 139.486714; } .gauge-fill-64 { stroke-dashoffset: 135.716803; } .gauge-fill-65 { stroke-dashoffset: 131.946891; }
.gauge-fill-66 { stroke-dashoffset: 128.176980; } .gauge-fill-67 { stroke-dashoffset: 124.407069; } .gauge-fill-68 { stroke-dashoffset: 120.637158; }
.gauge-fill-69 { stroke-dashoffset: 116.867247; } .gauge-fill-70 { stroke-dashoffset: 113.097336; } .gauge-fill-71 { stroke-dashoffset: 109.327424; }
.gauge-fill-72 { stroke-dashoffset: 105.557513; } .gauge-fill-73 { stroke-dashoffset: 101.787602; } .gauge-fill-74 { stroke-dashoffset: 98.017691; }
.gauge-fill-75 { stroke-dashoffset: 94.247780; } .gauge-fill-76 { stroke-dashoffset: 90.477868; } .gauge-fill-77 { stroke-dashoffset: 86.707957; }
.gauge-fill-78 { stroke-dashoffset: 82.938046; } .gauge-fill-79 { stroke-dashoffset: 79.168135; } .gauge-fill-80 { stroke-dashoffset: 75.398224; }
.gauge-fill-81 { stroke-dashoffset: 71.628313; } .gauge-fill-82 { stroke-dashoffset: 67.858401; } .gauge-fill-83 { stroke-dashoffset: 64.088490; }
.gauge-fill-84 { stroke-dashoffset: 60.318579; } .gauge-fill-85 { stroke-dashoffset: 56.548668; } .gauge-fill-86 { stroke-dashoffset: 52.778757; }
.gauge-fill-87 { stroke-dashoffset: 49.008845; } .gauge-fill-88 { stroke-dashoffset: 45.238934; } .gauge-fill-89 { stroke-dashoffset: 41.469023; }
.gauge-fill-90 { stroke-dashoffset: 37.699112; } .gauge-fill-91 { stroke-dashoffset: 33.929201; } .gauge-fill-92 { stroke-dashoffset: 30.159289; }
.gauge-fill-93 { stroke-dashoffset: 26.389378; } .gauge-fill-94 { stroke-dashoffset: 22.619467; } .gauge-fill-95 { stroke-dashoffset: 18.849556; }
.gauge-fill-96 { stroke-dashoffset: 15.079645; } .gauge-fill-97 { stroke-dashoffset: 11.309734; } .gauge-fill-98 { stroke-dashoffset: 7.539822; }
.gauge-fill-99 { stroke-dashoffset: 3.769911; } .gauge-fill-100 { stroke-dashoffset: 0.000000; }

.score-meta {
  flex: 1;
  min-width: 220px;
}

.score-meta h2 {
  font: var(--h3);
  margin-bottom: var(--space-1);
}

.score-meta .scanned-url {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  word-break: break-all;
  margin-bottom: var(--space-3);
}

.score-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Disclaimer */
.disclaimer {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-4);
}

.disclaimer i {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 14px;
  color: var(--status-info);
}

/* Category cards */
.category-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.category-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.category-card summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
  list-style: none;
}

.category-card summary::-webkit-details-marker {
  display: none;
}

.category-chevron {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--text-faint);
  font-size: 20px;
  transition: transform var(--transition-fast);
}

.category-card[open] .category-chevron {
  transform: rotate(180deg);
}

.category-title {
  flex: 1;
}

.category-score {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: 500;
}

.status-bar {
  display: flex;
  height: 6px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  width: 80px;
  flex-shrink: 0;
  background: var(--bg-subtle);
}

.status-bar span {
  height: 100%;
}

.status-bar .seg-pass { background: var(--status-pass); }
.status-bar .seg-warn { background: var(--status-warn); }
.status-bar .seg-fail { background: var(--status-fail); }

/* Width utility classes (0-100%, one per integer) — used instead of inline
   `style="width:..."` so status-bar segments stay CSP `style-src`-compliant.
   Apply via classList (see js/ui/category-card.js), never the style attribute. */
.w-0 { width: 0%; } .w-1 { width: 1%; } .w-2 { width: 2%; } .w-3 { width: 3%; } .w-4 { width: 4%; }
.w-5 { width: 5%; } .w-6 { width: 6%; } .w-7 { width: 7%; } .w-8 { width: 8%; } .w-9 { width: 9%; }
.w-10 { width: 10%; } .w-11 { width: 11%; } .w-12 { width: 12%; } .w-13 { width: 13%; } .w-14 { width: 14%; }
.w-15 { width: 15%; } .w-16 { width: 16%; } .w-17 { width: 17%; } .w-18 { width: 18%; } .w-19 { width: 19%; }
.w-20 { width: 20%; } .w-21 { width: 21%; } .w-22 { width: 22%; } .w-23 { width: 23%; } .w-24 { width: 24%; }
.w-25 { width: 25%; } .w-26 { width: 26%; } .w-27 { width: 27%; } .w-28 { width: 28%; } .w-29 { width: 29%; }
.w-30 { width: 30%; } .w-31 { width: 31%; } .w-32 { width: 32%; } .w-33 { width: 33%; } .w-34 { width: 34%; }
.w-35 { width: 35%; } .w-36 { width: 36%; } .w-37 { width: 37%; } .w-38 { width: 38%; } .w-39 { width: 39%; }
.w-40 { width: 40%; } .w-41 { width: 41%; } .w-42 { width: 42%; } .w-43 { width: 43%; } .w-44 { width: 44%; }
.w-45 { width: 45%; } .w-46 { width: 46%; } .w-47 { width: 47%; } .w-48 { width: 48%; } .w-49 { width: 49%; }
.w-50 { width: 50%; } .w-51 { width: 51%; } .w-52 { width: 52%; } .w-53 { width: 53%; } .w-54 { width: 54%; }
.w-55 { width: 55%; } .w-56 { width: 56%; } .w-57 { width: 57%; } .w-58 { width: 58%; } .w-59 { width: 59%; }
.w-60 { width: 60%; } .w-61 { width: 61%; } .w-62 { width: 62%; } .w-63 { width: 63%; } .w-64 { width: 64%; }
.w-65 { width: 65%; } .w-66 { width: 66%; } .w-67 { width: 67%; } .w-68 { width: 68%; } .w-69 { width: 69%; }
.w-70 { width: 70%; } .w-71 { width: 71%; } .w-72 { width: 72%; } .w-73 { width: 73%; } .w-74 { width: 74%; }
.w-75 { width: 75%; } .w-76 { width: 76%; } .w-77 { width: 77%; } .w-78 { width: 78%; } .w-79 { width: 79%; }
.w-80 { width: 80%; } .w-81 { width: 81%; } .w-82 { width: 82%; } .w-83 { width: 83%; } .w-84 { width: 84%; }
.w-85 { width: 85%; } .w-86 { width: 86%; } .w-87 { width: 87%; } .w-88 { width: 88%; } .w-89 { width: 89%; }
.w-90 { width: 90%; } .w-91 { width: 91%; } .w-92 { width: 92%; } .w-93 { width: 93%; } .w-94 { width: 94%; }
.w-95 { width: 95%; } .w-96 { width: 96%; } .w-97 { width: 97%; } .w-98 { width: 98%; } .w-99 { width: 99%; }
.w-100 { width: 100%; }

.check-list {
  border-top: 1px solid var(--border);
}

.check-row {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}

.check-row:last-child {
  border-bottom: none;
}

.check-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  margin-top: 1px;
}

.check-icon.status-pass { color: var(--status-pass); background: var(--status-pass-bg); }
.check-icon.status-warn { color: var(--status-warn); background: var(--status-warn-bg); }
.check-icon.status-fail { color: var(--status-fail); background: var(--status-fail-bg); }
.check-icon.status-info { color: var(--status-info); background: var(--status-info-bg); }

.check-body {
  flex: 1;
}

.check-label {
  font-weight: 600;
  font-size: var(--fs-sm);
}

.check-detail {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-top: 2px;
}

.check-evidence {
  margin-top: var(--space-2);
  background: var(--code-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Links — dotted at rest, dashed once visited, wavy on hover/focus/active */
.link,
.link:visited,
.link:focus,
.link:hover,
.link:active {
  color: var(--accent);
}

.link {
  text-decoration: underline dotted;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

.link:visited {
  text-decoration: underline dashed;
  text-decoration-thickness: 1.5px;
}

.link:focus,
.link:hover,
.link:active {
  text-decoration: underline wavy;
  text-underline-offset: 2px;
}

/* About & methodology section */
.about-section {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border);
  scroll-margin-top: var(--space-5);
}

.about-article h2 {
  font: var(--h3);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.about-article h2:first-child {
  margin-top: 0;
}

.about-article h3 {
  font: 600 var(--fs-md) var(--font-heading);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

.about-article p {
  color: var(--text-muted);
  max-width: 680px;
}

.about-table {
  width: 100%;
  margin: var(--space-5) 0;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.about-table caption {
  text-align: left;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.about-table th,
.about-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.about-table th {
  color: var(--text-faint);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
}

.about-updated {
  margin-top: var(--space-6);
  color: var(--text-faint);
  font-size: var(--fs-xs);
}