/* Company 31 — Cyber Check tool styles
 * Built on top of base.css / layout.css / components.css.
 * Uses the same design tokens (--c31-*) so dark mode and scale come for free.
 */

/* ---------- Input form ---------- */

.cyber-form {
  margin-block-start: var(--c31-space-5);
  max-inline-size: 820px;
}
.cyber-form__label {
  display: block;
  font-size: var(--c31-fs-sm);
  font-weight: 500;
  color: var(--c31-text-soft);
  margin-block-end: var(--c31-space-2);
}
.cyber-form__row {
  display: flex;
  gap: var(--c31-space-3);
  align-items: stretch;
  flex-wrap: wrap;
}
.cyber-form__input {
  flex: 1 1 320px;
  min-inline-size: 220px;
  min-block-size: 52px;
  padding: 0 var(--c31-space-5);
  border-radius: var(--c31-radius-pill);
  border: 1px solid var(--c31-border-strong);
  background: var(--c31-surface);
  color: var(--c31-text);
  font-family: var(--c31-font-sans);
  font-size: var(--c31-fs-md);
  transition: border-color var(--c31-dur-fast) var(--c31-ease), box-shadow var(--c31-dur-fast) var(--c31-ease);
}
.cyber-form__input::placeholder { color: var(--c31-text-muted); }
.cyber-form__input:focus {
  outline: none;
  border-color: var(--c31-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c31-accent) 20%, transparent);
}
.cyber-form__submit {
  min-inline-size: 180px;
  position: relative;
}
.cyber-form__submit[aria-busy="true"] .cyber-form__submit-label { opacity: 0; }
.cyber-form__submit[aria-busy="true"] .cyber-form__spinner { display: block; }
.cyber-form__spinner {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-inline-start-color: transparent;
  animation: cyber-spin 0.9s linear infinite;
}
@keyframes cyber-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cyber-form__spinner { animation-duration: 4s; }
}
.cyber-form__hint {
  margin-block-start: var(--c31-space-4);
  font-size: var(--c31-fs-sm);
  color: var(--c31-text-muted);
  max-inline-size: 70ch;
}
.cyber-form__hint strong { color: var(--c31-text); font-weight: 600; }
.cyber-form__error {
  margin-block-start: var(--c31-space-4);
  padding: var(--c31-space-3) var(--c31-space-5);
  border-radius: var(--c31-radius-md);
  background: color-mix(in srgb, #dc2626 14%, transparent);
  border: 1px solid color-mix(in srgb, #dc2626 40%, transparent);
  color: var(--c31-text);
  font-size: var(--c31-fs-sm);
}

/* ---------- Results section ---------- */

.cyber-results { padding-block-start: var(--c31-space-7); }

.cyber-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--c31-space-7);
  align-items: center;
  padding: var(--c31-space-6);
  border: 1px solid var(--c31-border);
  border-radius: var(--c31-radius-xl);
  background: var(--c31-surface);
  box-shadow: var(--c31-shadow);
}
@media (max-width: 720px) {
  .cyber-summary { grid-template-columns: 1fr; gap: var(--c31-space-5); text-align: start; }
  .cyber-summary__grade { justify-self: start; }
}

.cyber-summary__body { min-inline-size: 0; }
.cyber-summary__stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--c31-space-3);
  margin-block: var(--c31-space-5) var(--c31-space-5);
}
@media (max-width: 540px) {
  .cyber-summary__stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.stat {
  padding: var(--c31-space-3) var(--c31-space-3);
  border-radius: var(--c31-radius-md);
  background: var(--c31-bg-subtle);
  border: 1px solid var(--c31-border);
  text-align: center;
}
.stat__num {
  display: block;
  font-size: var(--c31-fs-xl);
  font-weight: 700;
  color: var(--c31-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  margin-block-start: var(--c31-space-2);
  font-size: var(--c31-fs-xs);
  color: var(--c31-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.stat__num[data-sev="critical"] { color: #b91c1c; }
.stat__num[data-sev="high"]     { color: #c2410c; }
.stat__num[data-sev="medium"]   { color: #a16207; }
.stat__num[data-sev="low"]      { color: #1d4ed8; }
.stat__num[data-sev="info"]     { color: var(--c31-text-muted); }
:root[data-theme="dark"] .stat__num[data-sev="critical"] { color: #fca5a5; }
:root[data-theme="dark"] .stat__num[data-sev="high"]     { color: #fdba74; }
:root[data-theme="dark"] .stat__num[data-sev="medium"]   { color: #fde68a; }
:root[data-theme="dark"] .stat__num[data-sev="low"]      { color: #93c5fd; }

.cyber-summary__actions {
  display: flex;
  gap: var(--c31-space-3);
  flex-wrap: wrap;
}

/* Grade ring */
.grade-ring {
  --size: 148px;
  --grade-color: var(--c31-accent);
  inline-size: var(--size);
  block-size: var(--size);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background:
    conic-gradient(var(--grade-color) 0 var(--fill, 0%), color-mix(in srgb, var(--grade-color) 15%, transparent) var(--fill, 0%) 100%);
  position: relative;
  isolation: isolate;
}
.grade-ring::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--c31-surface);
  z-index: -1;
}
.grade-ring__letter {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--grade-color);
  line-height: 1;
}
.grade-ring__caption {
  font-size: var(--c31-fs-xs);
  color: var(--c31-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.grade-ring[data-grade="A"], .grade-ring[data-grade="A+"] { --grade-color: #059669; --fill: 95%; }
.grade-ring[data-grade="B"] { --grade-color: #0d9488; --fill: 80%; }
.grade-ring[data-grade="C"] { --grade-color: #ca8a04; --fill: 65%; }
.grade-ring[data-grade="D"] { --grade-color: #ea580c; --fill: 45%; }
.grade-ring[data-grade="F"] { --grade-color: #dc2626; --fill: 20%; }
:root[data-theme="dark"] .grade-ring[data-grade="A"],
:root[data-theme="dark"] .grade-ring[data-grade="A+"] { --grade-color: #34d399; }
:root[data-theme="dark"] .grade-ring[data-grade="B"] { --grade-color: #5eead4; }
:root[data-theme="dark"] .grade-ring[data-grade="C"] { --grade-color: #facc15; }
:root[data-theme="dark"] .grade-ring[data-grade="D"] { --grade-color: #fb923c; }
:root[data-theme="dark"] .grade-ring[data-grade="F"] { --grade-color: #f87171; }

/* ---------- Progress ---------- */

.cyber-progress {
  margin-block: var(--c31-space-5);
  padding: var(--c31-space-4) var(--c31-space-5);
  background: var(--c31-bg-subtle);
  border: 1px solid var(--c31-border);
  border-radius: var(--c31-radius-md);
}
.cyber-progress[hidden] { display: none; }
.cyber-progress__bar {
  block-size: 6px;
  background: var(--c31-bg-muted);
  border-radius: 999px;
  overflow: hidden;
  margin-block-end: var(--c31-space-3);
}
.cyber-progress__fill {
  block-size: 100%;
  inline-size: 0%;
  background: var(--c31-accent);
  transition: inline-size var(--c31-dur) var(--c31-ease);
}
.cyber-progress__log {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--c31-fs-xs);
  color: var(--c31-text-muted);
  max-block-size: 8em;
  overflow-y: auto;
  white-space: pre-wrap;
}
.cyber-progress__log p { margin: 0; color: inherit; }
.cyber-progress__log p + p { margin-block-start: 0.25em; }

/* ---------- Tabs ---------- */

.cyber-tabs {
  margin-block-start: var(--c31-space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--c31-space-2);
  border-block-end: 1px solid var(--c31-border);
  padding-block-end: var(--c31-space-3);
}
.cyber-tab {
  padding: var(--c31-space-2) var(--c31-space-4);
  border-radius: var(--c31-radius-pill);
  font-size: var(--c31-fs-sm);
  font-weight: 500;
  color: var(--c31-text-soft);
  border: 1px solid transparent;
  transition: color var(--c31-dur-fast) var(--c31-ease), background-color var(--c31-dur-fast) var(--c31-ease), border-color var(--c31-dur-fast) var(--c31-ease);
}
.cyber-tab:hover { color: var(--c31-text); background: var(--c31-bg-muted); }
.cyber-tab.is-active {
  color: var(--c31-palette-white);
  background: var(--c31-accent);
  border-color: var(--c31-accent);
}
:root[data-theme="dark"] .cyber-tab.is-active { color: var(--c31-palette-black); }

.cyber-panels { margin-block-start: var(--c31-space-5); }
.cyber-panel { display: none; }
.cyber-panel.is-active { display: block; }

.cyber-panel__toolbar {
  display: flex;
  justify-content: flex-end;
  margin-block-end: var(--c31-space-4);
}
.cyber-filter { display: flex; gap: var(--c31-space-2); flex-wrap: wrap; }
.cyber-filter__btn {
  padding: 0.35em 0.9em;
  border-radius: var(--c31-radius-pill);
  border: 1px solid var(--c31-border);
  font-size: var(--c31-fs-xs);
  color: var(--c31-text-soft);
  letter-spacing: 0.04em;
}
.cyber-filter__btn:hover { background: var(--c31-bg-muted); color: var(--c31-text); }
.cyber-filter__btn.is-active {
  background: var(--c31-text);
  color: var(--c31-bg);
  border-color: var(--c31-text);
}

/* ---------- Findings ---------- */

.findings { display: flex; flex-direction: column; gap: var(--c31-space-3); }
.finding {
  padding: var(--c31-space-5);
  border: 1px solid var(--c31-border);
  border-radius: var(--c31-radius-md);
  background: var(--c31-surface);
  transition: border-color var(--c31-dur-fast) var(--c31-ease), box-shadow var(--c31-dur-fast) var(--c31-ease);
}
.finding:hover { border-color: var(--c31-border-strong); box-shadow: var(--c31-shadow); }
.finding[hidden] { display: none; }

.finding__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--c31-space-4);
}
@media (max-width: 540px) {
  .finding__head { grid-template-columns: auto 1fr; }
  .finding__cat { grid-column: 1 / -1; justify-self: start; }
}
.finding__title { font-size: var(--c31-fs-md); color: var(--c31-text); margin: 0; }
.finding__body {
  margin-block-start: var(--c31-space-3);
  color: var(--c31-text-soft);
  font-size: var(--c31-fs-sm);
}
.finding__cat {
  font-size: var(--c31-fs-xs);
  color: var(--c31-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.finding__sev {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.7em;
  border-radius: var(--c31-radius-pill);
  font-size: var(--c31-fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.finding__sev::before {
  content: "";
  inline-size: 0.55em;
  block-size: 0.55em;
  border-radius: 50%;
  background: currentColor;
}
.finding[data-severity="critical"] .finding__sev { color: #b91c1c; }
.finding[data-severity="high"] .finding__sev     { color: #c2410c; }
.finding[data-severity="medium"] .finding__sev   { color: #a16207; }
.finding[data-severity="low"] .finding__sev      { color: #1d4ed8; }
.finding[data-severity="info"] .finding__sev     { color: var(--c31-text-muted); }
.finding[data-severity="pass"] .finding__sev     { color: #059669; }
:root[data-theme="dark"] .finding[data-severity="critical"] .finding__sev { color: #fca5a5; }
:root[data-theme="dark"] .finding[data-severity="high"] .finding__sev     { color: #fdba74; }
:root[data-theme="dark"] .finding[data-severity="medium"] .finding__sev   { color: #fde68a; }
:root[data-theme="dark"] .finding[data-severity="low"] .finding__sev      { color: #93c5fd; }
:root[data-theme="dark"] .finding[data-severity="pass"] .finding__sev     { color: #6ee7b7; }

.finding[data-severity="critical"] { border-inline-start: 3px solid #b91c1c; }
.finding[data-severity="high"]     { border-inline-start: 3px solid #c2410c; }
.finding[data-severity="medium"]   { border-inline-start: 3px solid #a16207; }
.finding[data-severity="low"]      { border-inline-start: 3px solid #1d4ed8; }
.finding[data-severity="pass"]     { border-inline-start: 3px solid #059669; }

.finding__detail {
  margin-block-start: var(--c31-space-4);
  border-block-start: 1px solid var(--c31-border);
  padding-block-start: var(--c31-space-3);
}
.finding__detail summary {
  cursor: pointer;
  color: var(--c31-accent);
  font-size: var(--c31-fs-sm);
  font-weight: 500;
  list-style: none;
}
.finding__detail summary::-webkit-details-marker { display: none; }
.finding__detail summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform var(--c31-dur-fast) var(--c31-ease);
}
.finding__detail[open] summary::before { transform: rotate(90deg); }
.finding__evidence { margin-block-start: var(--c31-space-3); }
.finding__evidence h4 {
  font-size: var(--c31-fs-sm);
  color: var(--c31-text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-block: var(--c31-space-3) var(--c31-space-2);
}
.finding__raw {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--c31-fs-xs);
  color: var(--c31-text-soft);
  background: var(--c31-bg-subtle);
  padding: var(--c31-space-3) var(--c31-space-4);
  border-radius: var(--c31-radius-sm);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.finding__fix {
  color: var(--c31-text-soft);
  font-size: var(--c31-fs-sm);
}
.finding__fix p + p { margin-block-start: var(--c31-space-3); }
.finding__fix ol, .finding__fix ul {
  list-style: decimal;
  padding-inline-start: var(--c31-space-5);
  margin-block-start: var(--c31-space-2);
}
.finding__fix ul { list-style: disc; }
.finding__fix li { margin-block-start: var(--c31-space-2); color: var(--c31-text-soft); }
.finding__fix code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  padding: 0.1em 0.4em;
  background: var(--c31-bg-muted);
  border-radius: var(--c31-radius-sm);
  color: var(--c31-text);
}

/* ---------- Panel grids ---------- */

.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--c31-space-4);
}
.data-card {
  padding: var(--c31-space-5);
  border: 1px solid var(--c31-border);
  border-radius: var(--c31-radius-md);
  background: var(--c31-surface);
  display: flex;
  flex-direction: column;
  gap: var(--c31-space-3);
}
.data-card__label {
  font-size: var(--c31-fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c31-text-muted);
}
.data-card__value {
  font-size: var(--c31-fs-md);
  font-weight: 600;
  color: var(--c31-text);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.data-card__value code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}
.data-card__value--stack { display: flex; flex-direction: column; gap: var(--c31-space-2); font-weight: 400; font-size: var(--c31-fs-sm); }
.data-card__note {
  font-size: var(--c31-fs-xs);
  color: var(--c31-text-muted);
  margin-block-start: auto;
}
.data-card__chip {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: var(--c31-radius-pill);
  font-size: var(--c31-fs-xs);
  font-weight: 600;
  background: var(--c31-accent-soft);
  color: var(--c31-accent);
}
.data-card__chip--ok   { background: color-mix(in srgb, #059669 14%, transparent); color: #047857; }
.data-card__chip--warn { background: color-mix(in srgb, #a16207 14%, transparent); color: #a16207; }
.data-card__chip--bad  { background: color-mix(in srgb, #b91c1c 14%, transparent); color: #b91c1c; }
:root[data-theme="dark"] .data-card__chip--ok   { color: #6ee7b7; }
:root[data-theme="dark"] .data-card__chip--warn { color: #fde68a; }
:root[data-theme="dark"] .data-card__chip--bad  { color: #fca5a5; }

/* Raw data panel */
.raw-data {
  padding: var(--c31-space-5);
  border: 1px solid var(--c31-border);
  border-radius: var(--c31-radius-md);
  background: var(--c31-bg-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--c31-fs-xs);
  color: var(--c31-text-soft);
  overflow-x: auto;
  max-block-size: 600px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- Verify / owner flow ---------- */

.cyber-verify {
  margin-block-start: var(--c31-space-7);
  padding: var(--c31-space-7);
  border: 1px solid var(--c31-border);
  border-radius: var(--c31-radius-xl);
  background: var(--c31-bg-subtle);
  background-image:
    radial-gradient(600px 180px at 100% -20%, color-mix(in srgb, var(--c31-accent) 10%, transparent), transparent 60%);
}
.verify-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--c31-space-5);
  margin-block-start: var(--c31-space-6);
}
@media (max-width: 900px) { .verify-steps { grid-template-columns: 1fr; } }

.verify-step {
  padding: var(--c31-space-5);
  background: var(--c31-surface);
  border: 1px solid var(--c31-border);
  border-radius: var(--c31-radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--c31-space-3);
}
.verify-step__num {
  color: var(--c31-accent);
  font-size: var(--c31-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.verify-step__title { font-size: var(--c31-fs-md); margin: 0; }
.verify-step__body { color: var(--c31-text-soft); font-size: var(--c31-fs-sm); }

.verify-record {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5em 1em;
  margin: var(--c31-space-3) 0 0 0;
  font-size: var(--c31-fs-sm);
}
.verify-record dt { color: var(--c31-text-muted); font-weight: 500; }
.verify-record dd {
  margin: 0;
  color: var(--c31-text);
  word-break: break-word;
  display: flex;
  align-items: center;
  gap: var(--c31-space-2);
  flex-wrap: wrap;
}
.verify-record code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--c31-bg-muted);
  padding: 0.15em 0.45em;
  border-radius: var(--c31-radius-sm);
  font-size: 0.92em;
  color: var(--c31-text);
}
.verify-copy {
  font-size: var(--c31-fs-xs);
  color: var(--c31-accent);
  padding: 0.15em 0.6em;
  border: 1px solid var(--c31-border);
  border-radius: var(--c31-radius-pill);
  background: var(--c31-surface);
}
.verify-copy:hover { background: var(--c31-accent); color: var(--c31-palette-white); border-color: var(--c31-accent); }
:root[data-theme="dark"] .verify-copy:hover { color: var(--c31-palette-black); }

.verify-status {
  margin-block-start: var(--c31-space-3);
  font-size: var(--c31-fs-sm);
  color: var(--c31-text-muted);
  min-block-size: 1.4em;
}
.verify-status.is-success { color: #059669; font-weight: 500; }
.verify-status.is-error   { color: #b91c1c; font-weight: 500; }
:root[data-theme="dark"] .verify-status.is-success { color: #6ee7b7; }
:root[data-theme="dark"] .verify-status.is-error   { color: #fca5a5; }

.cyber-verified-banner {
  margin-block-start: var(--c31-space-5);
  padding: var(--c31-space-4) var(--c31-space-5);
  border-radius: var(--c31-radius-md);
  background: color-mix(in srgb, #059669 14%, transparent);
  border: 1px solid color-mix(in srgb, #059669 40%, transparent);
  color: var(--c31-text);
  font-size: var(--c31-fs-sm);
}

/* ---------- Print / PDF layout ---------- */

@media print {
  .site-header, .site-footer, .consent,
  .hero__actions, .cyber-form, .cyber-progress,
  .cyber-tabs, .cyber-panel__toolbar,
  .cyber-verify, .cyber-verified-banner,
  .cyber-summary__actions,
  #how, .legal-notice-print-hide {
    display: none !important;
  }
  body { background: #fff; color: #000; }
  section { padding-block: 1rem; }
  .cyber-panel { display: block !important; page-break-before: always; }
  .cyber-panel[data-panel="raw"] { display: none !important; }
  .cyber-summary { box-shadow: none; break-inside: avoid; }
  .finding { break-inside: avoid; }
  .finding__detail[open] summary::before, .finding__detail summary::before { display: none; }
  .finding__detail { border-block-start: 1px dashed #999; }
  .finding__detail[open] { display: block; }
  .finding__detail { display: block; }
  .finding__detail summary { color: #000; font-weight: 600; }
  .grade-ring { box-shadow: inset 0 0 0 10px #fff; }
}