/* CVSS v4.0 calculator — page-local styles.
 *
 * Tokens, .container, .page-head, .btn and the footer all come from
 * ../styles.css. Only what the calculator adds lives here.
 *
 * Two things to know before editing:
 *
 * - There is no monospace anywhere, including on the vector string and the
 *   code chips, which is the one place on this site you would expect it.
 *   The site has no monospace token at all — --mono was declared and fetched
 *   for a while, went unreferenced, and was removed (see the root CLAUDE.md).
 *   Inter with tabular-nums and a little letter-spacing carries the "this is a
 *   literal" signal instead. Don't reintroduce a mono face without asking.
 *
 * - Severity is encoded as a monochrome ramp, not a red/amber/green one. The
 *   design system is B&W plus a single brat-green accent, and brat means
 *   "interactive" everywhere else on the site — using it for Critical would
 *   read as approval. Darker = worse is the whole scale.
 */

/* ---------- Score panel ---------- */

/* Sticks under the 64px navbar. z-index sits below the nav's 50 so the two
   don't fight when the panel scrolls up under it. */
.panel {
  position: sticky;
  top: 64px;
  z-index: 40;
  /* Near-opaque, unlike the nav's 0.86. Metric headings scrolling underneath
     stay faintly legible through a frosted panel, which reads as a rendering
     bug next to a score you are meant to trust. */
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 40px;
  padding: 14px 0;
}

.panel__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.panel__score {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.panel__score-label {
  font-size: 13px;
  color: var(--ink-mute);
  letter-spacing: -0.005em;
}
.panel__score-value {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Monochrome severity ramp — see the note at the top of this file. */
.panel__severity {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 4px 9px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule-strong);
  color: var(--ink-mute);
  background: var(--paper);
  white-space: nowrap;
}
.panel__severity[data-severity="low"]      { background: var(--paper-soft); color: var(--ink-soft); }
.panel__severity[data-severity="medium"]   { background: var(--rule); color: var(--ink); border-color: var(--rule-strong); }
.panel__severity[data-severity="high"]     { background: var(--ink-soft); color: var(--paper); border-color: var(--ink-soft); }
.panel__severity[data-severity="critical"] { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; }

.panel__vector {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.vector {
  font-family: var(--sans);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  cursor: pointer;
  text-align: left;
  /* Long vectors (all 32 metrics set) run past 200 characters. Wrapping is
     better than a scrollbar here — the string is the thing being read. */
  overflow-wrap: anywhere;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.vector:hover { border-color: var(--ink); background: var(--paper); }

.panel__status {
  font-size: 12px;
  color: var(--ink-mute);
  white-space: nowrap;
}

.panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.chip {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  padding: 6px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chip:hover { background: var(--brat); color: var(--ink); border-color: var(--brat); }
.chip--lang {
  color: var(--ink);
  border-color: var(--ink);
  min-width: 46px;
  text-align: center;
}

/* ---------- Macro vector detail ---------- */

.details {
  border-top: 1px dashed var(--rule);
  margin-top: 12px;
  padding-top: 12px;
}
.details__macro {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--ink-mute);
}
.details__label::after { content: ":"; margin-right: 6px; }
.details__code {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  color: var(--ink);
  font-weight: 500;
}
/* Three label/value pairs per row: each repeat is a max-content column for the
   dt and a flexible one for the dd that follows it. */
.details__rows {
  display: grid;
  grid-template-columns: repeat(3, max-content minmax(0, 1fr));
  gap: 2px 16px;
  margin: 0;
  font-size: 13px;
}
.details__rows dt { color: var(--ink-mute); }
.details__rows dt::after { content: ":"; }
.details__rows dd {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
}
@media (max-width: 860px) { .details__rows { grid-template-columns: repeat(2, max-content minmax(0, 1fr)); } }
@media (max-width: 560px) { .details__rows { grid-template-columns: max-content minmax(0, 1fr); } }

/* ---------- Metric groups ---------- */

.group { margin-bottom: 48px; }
.group__title {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(20px, 2.2vw, 26px);
  margin: 0 0 4px;
}
.group__fill {
  font-size: 13px;
  color: var(--ink-mute);
  margin: 0 0 20px;
}
.group__sub {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  margin: 26px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}
.group__sub:first-of-type { margin-top: 8px; }

.metric {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 8px 20px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}
.metric:last-child { border-bottom: 0; }

.metric__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 5px;
}
.metric__name {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  /* Dotted underline is the "there is a definition here" affordance. */
  border-bottom: 1px dotted var(--rule-strong);
  cursor: help;
}
.metric__name:hover { border-bottom-color: var(--ink); }
.metric__short {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}

.metric__options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.opt-cell { display: contents; }
/* Upstream keeps one blank option on MSC so its Negligible column lines up
   with the Safety column on MSI/MSA. Nothing to align against in a flex row,
   so it collapses to nothing here. */
.opt-cell--spacer { display: none; }

.opt {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  padding: 6px 11px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.opt:hover { border-color: var(--ink); color: var(--ink); }
/* brat as a fill behind ink — the sanctioned use. Never as foreground. */
.opt.is-on {
  background: var(--brat);
  border-color: var(--brat);
  color: var(--ink);
  font-weight: 600;
}
.opt__code {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.opt.is-on .opt__code { color: rgba(10, 10, 10, 0.62); }

/* ---------- Definitions ---------- */

/* Visually hidden, but present in the accessibility tree so the
   aria-describedby on each trigger resolves to real text. Not display:none —
   that would take it out of the tree and break the reference. */
.def {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* "展开释义" reveals the same nodes in place. */
.calc.is-expanded .def {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: pre-line;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 68ch;
}
.calc.is-expanded .def--opt { margin: 6px 0 0 2px; }
.calc.is-expanded .metric { grid-template-columns: minmax(0, 1fr); gap: 4px; }
/* The metric definition lives inside .metric__label, so the label stays a flex
   row (keeping the 8px between the name and its code) and the definition is
   pushed onto its own line instead. Switching the label to display:block would
   drop that gap and run 攻击途径 into AV. */
.calc.is-expanded .metric__label { flex-wrap: wrap; padding-top: 0; }
.calc.is-expanded .def--metric { flex: 0 0 100%; margin: 8px 0 0; }
.calc.is-expanded .metric__name { cursor: default; border-bottom: 0; }
.calc.is-expanded .metric__options { display: block; }
.calc.is-expanded .opt-cell { display: block; margin-top: 12px; }
.calc.is-expanded .opt-cell--spacer { display: none; }

/* Floating tooltip. Ink fill so it reads as a layer over the page rather than
   another card; the page has no other filled surface this dark. */
.tip {
  position: fixed;
  z-index: 60;
  max-width: min(44ch, calc(100vw - 24px));
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: -0.003em;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  white-space: pre-line;
  box-shadow: 0 6px 24px rgba(10, 10, 10, 0.18);
  pointer-events: none;
}

.calc__noscript {
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  padding: 16px;
  border-radius: var(--r-sm);
}

/* ---------- Translator's notes ---------- */

/* Two-column parallel text: 中文 left, English right. Same intent as the
   .commentary pattern in china/styles.css, but that one is a column-count
   flow — these two columns have to stay in step line-for-line, so it's a grid. */
.notes__title {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(24px, 3vw, 34px);
  margin: 0 0 28px;
}
.notes__title-en {
  font-weight: 400;
  color: var(--ink-mute);
  letter-spacing: -0.01em;
  font-size: 0.62em;
  margin-left: 6px;
}

.notes__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 40px;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
}
.notes__pair:last-child { border-bottom: 1px solid var(--rule); }

.notes h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.notes__en h3 { color: var(--ink-mute); font-weight: 500; }
.notes p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.notes p:last-child { margin-bottom: 0; }
.notes__en p { color: var(--ink-mute); }
.notes a {
  color: var(--ink);
  border-bottom: 1px solid var(--brat);
  transition: background var(--t-fast);
}
.notes a:hover { background: rgba(138, 206, 0, 0.18); }
.notes code {
  font-family: var(--sans);
  font-size: 0.92em;
  letter-spacing: 0.01em;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 0 4px;
}

/* ---------- Page head ---------- */

/* The shared .page-head__title caps at 22ch, which is tuned for Latin — a `ch`
   is the width of "0", roughly half of what a CJK glyph occupies. At 64px that
   cap breaks this title after its 13th character and orphans 器。 onto a line
   of its own. Dropping the cap and easing the clamp fits it on one line at
   desktop; text-wrap: balance keeps the split even when it can't. */
.page-head__title {
  max-width: none;
  font-size: clamp(30px, 4.4vw, 52px);
  text-wrap: balance;
}

/* The English lede under the Chinese one, in the page head. */
.page-head__lede--alt { color: var(--ink-mute); font-size: clamp(15px, 1.15vw, 17px); }

/* ---------- Narrow screens ---------- */

@media (max-width: 860px) {
  .metric { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .metric__label { padding-top: 0; }
  .panel__actions { margin-left: 0; }
}

@media (max-width: 700px) {
  .notes__pair { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .panel { top: 0; }
  .panel__score-value { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .opt, .chip, .vector { transition: none; }
}