/* ITMedia Security - public surface (scan host). Loaded after base.css. */

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  height: 64px;
}
.brand { display: inline-flex; align-items: baseline; gap: var(--s-2); color: var(--ink); }
.brand__name { font-weight: 600; font-stretch: 90%; letter-spacing: -0.03em; font-size: 20px; line-height: 1; }
.brand__product { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted-3); display: inline-flex; align-items: center; gap: var(--s-2); }
.site-nav { display: flex; align-items: center; gap: var(--s-4); }
.site-nav__link {
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.site-nav__link .btn__dash { background: var(--ink); }
.site-nav__link:hover { color: var(--accent); }
.site-nav__link:hover .btn__dash { width: 26px; background: var(--accent); }
/* 6D P2: below the measured fit threshold the header's two flex items cannot share one 64px
   row (brand 155.45 + gap 22 + nav 186.03 + 2x20 padding = 403.48), so only the decorative
   brand suffix and the CTA's ornamental rule yield; the brand name, both language chips and
   the full login label stay on one row. The brand keeps its accessible name from aria-label. */
@media (max-width: 403.98px) { .site-header .brand__product { display: none; } .site-header .site-nav__link .btn__dash { display: none; } }
/* Login is the header's primary action: give it a >= 24px vertical tap target (WCAG 2.2 SC 2.5.8). */
.site-header .site-nav__link { padding-block: 6px; }

/* ---------- hero ---------- */
.hero { padding-top: var(--page-pad-top); padding-bottom: var(--section-pad); }
.hero .h-hero { margin-top: var(--s-4); }
.hero .h-hero span { display: block; }
.hero__lead { margin-top: var(--s-5); }

/* ---------- form ---------- */
.scan-form { margin-top: var(--s-6); }
.field { position: relative; }
.field + .field { margin-top: var(--s-4); }
.field__label { display: block; margin-bottom: var(--s-2); }
.field__input {
  display: block; width: 100%; padding: 14px 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--input-rule);
  color: var(--ink); font-family: var(--font-mono); font-size: 16px; line-height: 1.4;
  transition: border-color var(--hover);
}
.field__input--big { font-size: clamp(20px, 2.4vw, 34px); padding: 18px 0; letter-spacing: -0.01em; }
.field__input::placeholder { color: var(--muted-2); }
.field__input:focus { outline: none; border-bottom-color: var(--ink); }
.field.has-error .field__input { border-bottom-color: var(--accent); }
.field__hint { margin-top: var(--s-2); }
.field__error { margin-top: var(--s-2); color: var(--accent); font-size: var(--fs-small); display: flex; gap: var(--s-2); align-items: baseline; }
.check { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-small); color: var(--body); cursor: pointer; }
.check input { appearance: none; width: 14px; height: 14px; margin: 4px 0 0; padding: 3px; border: 1px solid var(--ink); background: transparent; background-clip: content-box; flex: none; cursor: pointer; }
.check input:checked { background-color: var(--ink); }
.check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.form__actions { margin-top: var(--s-5); display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.alert {
  border-top: 1px solid var(--accent); border-bottom: 1px solid var(--rule);
  padding: var(--s-3) 0; margin-bottom: var(--s-5); color: var(--ink);
}
.alert .label { color: var(--accent); margin-bottom: var(--s-1); }

/* ---------- list rows (findings) ---------- */
.rows { border-top: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); transition: background var(--hover); }
.row__tag { display: flex; align-self: start; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-3); padding-top: 6px; }
.row__tag .dot { width: 6px; height: 6px; }
.row__tag--CRITICAL, .row__tag--HIGH { color: var(--accent); }
.row__tag--MEDIUM { color: var(--ink); }
.row__title { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.row__desc { margin-top: var(--s-2); max-width: 70ch; }
.row__rec { margin-top: var(--s-3); display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); max-width: 70ch; }
.row__rec .label { padding-top: 4px; color: var(--ink); }
.row__meta { margin-top: var(--s-3); display: flex; gap: var(--s-3); flex-wrap: wrap; }
@media (max-width: 700px) { .row { grid-template-columns: 1fr; gap: var(--s-2); } .row__rec { grid-template-columns: 1fr; gap: var(--s-1); } }

/* ---------- result page ---------- */
.result-head { padding-top: var(--page-pad-top); padding-bottom: var(--s-6); }
/* 6D P1: the hero label in .result-head is a flex row (base.css .label) whose scanned
   hostname is an anonymous text flex item, so it contributes its full min-content width.
   Letting the row wrap and the hostname break anywhere keeps narrow viewports free of
   horizontal page overflow without hiding or truncating the host. */
.result-head .label { flex-wrap: wrap; overflow-wrap: anywhere; }
.result-target { margin-top: var(--s-3); font-family: var(--font-mono); font-size: clamp(14px, 1.4vw, 18px); color: var(--muted-3); word-break: break-all; }
.grade-block { display: flex; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; }
.grade { font-size: clamp(120px, 22vw, 340px); font-weight: 600; font-stretch: 78%; letter-spacing: -0.06em; line-height: 0.8; color: var(--ink); }
.grade--ok { color: var(--status-ok); }
.grade--progress { color: #b09532; }
.grade--risk { color: var(--accent); }
.score-num { font-size: clamp(40px, 5vw, 84px); font-weight: 600; font-stretch: 80%; letter-spacing: -0.04em; line-height: 0.9; color: var(--ink); }
.score-num span { font-size: 0.4em; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.verdict { margin-top: var(--s-4); }
.result-alert { border-top: 2px solid var(--accent); border-bottom: 1px solid var(--rule); padding: var(--s-3) 0 var(--s-4); margin-top: var(--s-4); }
.result-alert .label { display: flex; align-items: center; gap: 8px; color: var(--accent); }
.result-alert .label .dot { width: 6px; height: 6px; background: var(--accent); flex: none; }
.result-alert__title { margin-top: var(--s-3); font-size: var(--fs-h2); font-weight: 600; font-stretch: 80%; letter-spacing: -0.03em; line-height: 1.05; color: var(--accent); }
.result-alert__text { margin-top: var(--s-3); max-width: 70ch; color: var(--ink); }
.note { border-top: 1px solid var(--accent); padding-top: var(--s-3); max-width: 70ch; }
.note .label { color: var(--accent); margin-bottom: var(--s-2); }
.note--muted { border-top-color: var(--rule); }
.note--muted .label { color: var(--muted); }

/* ---------- hero: three labelled facts (round 6A P0) ---------- */
.grade-block { align-items: flex-end; gap: var(--s-5); }
.fact { display: flex; flex-direction: column; gap: var(--s-2); }
.fact__l { color: var(--muted); }
.fact--grade { gap: var(--s-1); }
.fact__v { font-size: clamp(28px, 3.4vw, 52px); font-weight: 600; font-stretch: 80%; letter-spacing: -0.03em; line-height: 0.95; color: var(--ink); }
.fact__v--partial { color: #b09532; }
.fact__v--full { color: var(--status-ok); }
.fact__note { margin-top: var(--s-1); font-size: var(--fs-small); color: var(--muted); max-width: 34ch; }
.fact__anchor { color: var(--ink); border-bottom: 1px solid var(--rule); }
.fact__anchor:hover, .fact__anchor:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 700px) { .grade-block { gap: var(--s-4); } }

/* ---------- finding card: applicability as primary state (round 6A P0) ---------- */
/* Applicability is a finding's primary attribute; severity is secondary beside it. State is
   carried by TEXT first - the label and the state word - with the colour and icon only
   reinforcing it, so it never depends on colour alone. */
.row__state { flex-direction: column; align-items: flex-start; gap: 6px; color: var(--ink); }
.row__state-k { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.row__state-v { display: inline-flex; align-items: center; gap: 8px; }
.state-icon { width: 9px; height: 9px; flex: none; display: inline-block; }
.row__state--confirmed { color: var(--ink); }
.row__state--confirmed .state-icon { background: var(--accent); }
/* Amber text reuses the exact value .grade--progress already uses for amber text: --status-progress
   (#e5c558) is the fill/dot token but is too light for AA text on paper, so the darker #b09532 is
   the established text shade. No new colour is introduced (6A review §11). */
.row__state--probable { color: #b09532; }
.row__state--probable .state-icon { background: var(--status-progress); }
.row__state--needs_verification { color: var(--muted-3); }
.row__state--needs_verification .state-icon { background: transparent; border: 1.5px solid var(--muted-3); border-radius: 50%; }
.row__state--not_affected { color: var(--muted); }
.row__state--not_affected .state-icon { background: var(--muted-2); }
.row__sev { margin-top: var(--s-2); display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; }
.row__sev .label { color: var(--muted); }
.row__sev-v { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.14em; }
.row__sev-v--strong { color: var(--accent); font-weight: 600; }
.row__sev-v--muted { color: var(--muted-3); }
.row__ver { margin-top: var(--s-2); display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; }
.row__ver .label { color: var(--muted); }

/* 6C P3: one component, several advisories. .row--group inherits the .row grid (and its
   one-column behaviour under 700px), so the component header occupies the same 150px/content
   structure as any other row. The left column carries only the version-confidence band, which is
   invariant across the component's advisories; it never carries a state or a severity, so no
   aggregate colour meaning is introduced. Children are always expanded and are separated by the
   same hairline rule used between rows. */
.row__group-meta { flex-direction: column; align-items: flex-start; gap: 6px; color: var(--ink); }
.row__group-k { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.row__count { margin-top: var(--s-2); color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.14em; }
.advisories { margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.advisory + .advisory { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.advisory__n { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.advisory .row__state { margin-top: var(--s-2); padding-top: 0; }

/* ---------- pending ---------- */
.pending { padding-top: var(--page-pad-top); padding-bottom: var(--section-pad); }
.pending .terminal { margin-top: var(--s-5); }

/* ---------- dark band ---------- */
.band { background: var(--dark); color: var(--dark-body); padding-block: var(--section-pad); border-top: 1px solid var(--dark-rule); }
.band .h2-display, .band .h2, .band .h3 { color: var(--dark-text); }
.band .label, .band .mono-tag { color: var(--dark-muted); }
.band .label__n { color: var(--accent); }
.band .lead { color: var(--dark-body); }
.band .kv { border-top-color: var(--dark-rule); }
.band .kv__row { border-bottom-color: var(--dark-rule); }
.band .kv__k { color: var(--dark-muted); }
.band .kv__v { color: var(--dark-text); }
.band .list li { padding: var(--s-2) 0; border-bottom: 1px solid var(--dark-rule); color: var(--dark-text); display: flex; gap: var(--s-3); align-items: baseline; }
.band .list li::before { content: counter(item, decimal-leading-zero); counter-increment: item; font-family: var(--font-mono); font-size: var(--fs-label); color: var(--accent); letter-spacing: 0.14em; }
.band .list { counter-reset: item; border-top: 1px solid var(--dark-rule); }

/* ---------- footer ---------- */
.site-footer { background: var(--dark); color: var(--dark-body); position: relative; overflow: hidden; border-top: 1px solid var(--dark-rule); }
.site-footer .container { position: relative; padding-top: var(--s-7); padding-bottom: var(--s-5); }
.watermark {
  position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: -0.12em;
  font-size: clamp(90px, 19vw, 330px); font-weight: 700; font-stretch: 75%; letter-spacing: -0.05em; line-height: 0.8;
  color: var(--dark-watermark); pointer-events: none; user-select: none; white-space: nowrap; overflow: hidden;
}
.footer-grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); }
.footer-grid > * { min-width: 0; }
.site-footer .brand { color: var(--dark-text); }
.site-footer .brand__product { color: var(--dark-muted); }
.site-footer .tagline { margin-top: var(--s-3); color: var(--dark-text); font-size: var(--fs-lead); letter-spacing: -0.01em; max-width: 30ch; }
.site-footer .meta { color: var(--dark-muted); }
.site-footer a:hover { color: var(--dark-text); }
.footer-meta { position: relative; margin-top: var(--s-7); padding-top: var(--s-3); border-top: 1px solid var(--dark-rule); display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.footer-meta .meta { display: flex; gap: var(--s-3); flex-wrap: wrap; }
@media (max-width: 900px) { .footer-grid > * { grid-column: span 12 !important; } }

/* ---------- reveal ---------- */
[data-reveal] { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), clip-path 0.8s var(--ease); }
[data-reveal="up"] { opacity: 0; transform: translateY(26px); }
[data-reveal="mask"] { clip-path: inset(100% 0 -20% 0); }
[data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(-20% 0 -20% 0); }
[data-delay="1"] { transition-delay: 80ms; }
[data-delay="2"] { transition-delay: 140ms; }
[data-delay="3"] { transition-delay: 200ms; }
.no-js [data-reveal] { opacity: 1; transform: none; clip-path: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .dot--live, .cursor::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- round 6B: incomplete subscore + findings summary (new selectors only) ---------- */
/* An incomplete bucket keeps its real number but in a neutral amber tone, never the strong red
   risk tone - a low number produced over a partial assessment is not a verdict (6B P0.1). Amber
   reuses the value .grade--progress already uses for amber text. */
.stat--incomplete .stat__n { color: #b09532; }
.stat__cov { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.08em; text-transform: uppercase; color: #b09532; }

/* Findings count broken down by presentation state (6B P0.2). */
.summary-row { margin-top: var(--s-4); display: flex; gap: var(--s-4); flex-wrap: wrap; }
.summary__item { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-3); }
.summary__n { font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.summary__item--confirmed .summary__n { color: var(--accent); }
.summary__item--probable .summary__n { color: #b09532; }
@media (max-width: 700px) { .summary-row { gap: var(--s-3); } }

/* ---------- round 6B P2: advisory line, version-confidence, coverage details (new selectors) ---------- */
/* Advisory line under the state-neutral subject; carries the provider's own escaped text. */
.row__advisory { margin-top: var(--s-2); max-width: 70ch; color: var(--ink); }
.row__advisory .label { color: var(--muted); margin-right: var(--s-2); }
/* Qualitative version-confidence band in the meta row (raw % stays in the evidence details). */
.version-confidence { color: var(--muted); }
/* The raw per-check terminal, collapsed by default into a native details panel. */
.coverage-details__summary { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-3); cursor: pointer; padding: var(--s-2) 0; }
.coverage-details__summary:hover, .coverage-details__summary:focus-visible { color: var(--accent); }
.coverage-details__body { margin-top: var(--s-3); }