/* The Security view.
 *
 * A separate sheet rather than another two hundred lines in styles.css, which is already 3,700
 * long and is the one file every page on this origin pays for. Nothing in here is used by the
 * share page, the office page or the login screen; the view it dresses is admin-only and most
 * accounts will never open it once.
 *
 * It deliberately adds no colours, no radii and no typefaces of its own. Every value below is
 * either one of the tokens declared at the top of styles.css or derived from one with
 * color-mix, so the whole view re-themes with the rest of the app and a theme that redefines
 * --panel does not leave this page sitting on the wrong ground. The page shell (.acc-page,
 * .acc-rows, .acc-rows-head, .acc-note, .acc-empty) is the accounts page's, unchanged — the
 * same shell API keys borrows.
 *
 * One exception is deliberate: the severity badges below name their own colours by mixing the
 * existing --danger / --sun / --ok / --dim into the surface. There is no token for "high" — the
 * app has never had a five-band scale — and inventing four new root-level tokens for one view
 * would put them in front of every other page for ever.
 */

/* ---- the freshness strip ---------------------------------------------------------------- */

.sec-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.sec-head-text { flex: 1; min-width: 260px; }

.sec-when {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-family: var(--font-meta);
  font-size: calc(var(--fs-sm) + var(--fs-half));
  color: var(--faint);
}

.sec-when .sec-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ok);
  flex: none;
}
.sec-when.stale .sec-dot { background: var(--sun); }
.sec-when.down .sec-dot { background: var(--danger); }
/* Off or never checked is not "fine": grey, never the green of a check that ran (judges 17.10.2026). */
.sec-when.off .sec-dot { background: var(--dim); }

/* The four sources and whether each of them answered. Facts, in a row, small — it is the thing
   you look at exactly once, when a number on this page looks wrong. */
.sec-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.sec-src {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  padding: calc(3 * var(--sp)) calc(11 * var(--sp)) calc(3 * var(--sp)) calc(8 * var(--sp));
  font-size: calc(var(--fs-sm) + var(--fs-half));
  color: var(--mut);
  background: var(--panel);
}
.sec-src i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ok);
  flex: none;
}
.sec-src.bad { border-color: var(--danger-ring); color: var(--danger); }
.sec-src.bad i { background: var(--danger); }
.sec-src.off i { background: var(--dimmer); }
.sec-src b { font-weight: var(--fw-semi); color: var(--text2); }
.sec-src.bad b { color: var(--danger); }

/* ---- severity ---------------------------------------------------------------------------- */

.sev {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: calc(var(--fs-xs) + var(--fs-half));
  font-weight: var(--fw-bold);
  letter-spacing: calc(.06em * var(--tracking));
  text-transform: var(--label-case);
  border-radius: var(--r-pill);
  padding: calc(2 * var(--sp)) calc(9 * var(--sp));
  flex: none;
  white-space: nowrap;
}
.sev-critical { color: var(--danger); background: var(--danger-tint); box-shadow: inset 0 0 0 1px var(--danger-ring); }
.sev-high     { color: var(--accent-text); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-ring); }
.sev-medium   { color: var(--sun); background: color-mix(in srgb, var(--sun) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sun) 30%, transparent); }
.sev-low      { color: var(--sky); background: color-mix(in srgb, var(--sky) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sky) 28%, transparent); }
.sev-none,
.sev-unrated  { color: var(--dimmer); box-shadow: inset 0 0 0 1px var(--line); }

/* The one badge that means somebody is doing this to somebody right now. Solid, not tinted:
   everything else on this page is a probability and this one is a fact. */
.sec-kev {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: calc(var(--fs-xs) + var(--fs-half));
  font-weight: var(--fw-bold);
  letter-spacing: calc(.06em * var(--tracking));
  text-transform: var(--label-case);
  border-radius: var(--r-pill);
  padding: calc(2 * var(--sp)) calc(9 * var(--sp));
  background: var(--danger);
  color: #1A0B0B;
  flex: none;
  white-space: nowrap;
}
.sec-kev svg { width: 11px; height: 11px; }

.sec-ransom {
  font-size: calc(var(--fs-xs) + var(--fs-half));
  font-weight: var(--fw-semi);
  color: var(--danger);
  border: 1px solid var(--danger-ring);
  border-radius: var(--r-pill);
  padding: calc(1 * var(--sp)) calc(8 * var(--sp));
  white-space: nowrap;
}

/* ---- "Affects us" ------------------------------------------------------------------------ */

.sec-find {
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--panel);
  padding: calc(14 * var(--sp)) calc(16 * var(--sp));
  transition: border-color .14s;
}
.sec-find:hover { border-color: var(--line2); }
/* A finding that is also on the KEV list gets an edge, not a different card: it belongs in the
   same list, read in the same order, and simply outranks what is under it. */
.sec-find.is-kev { border-color: var(--danger-ring); box-shadow: inset 3px 0 0 var(--danger); }

.sec-find-top {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.sec-find-top h4 {
  font-size: calc(var(--fs-lg) + var(--fs-half));
  font-weight: var(--fw-semi);
  flex: 1;
  min-width: 200px;
}
.sec-find-top .sec-id {
  font-family: var(--font-meta);
  font-size: calc(var(--fs-sm) + var(--fs-half));
  color: var(--faint);
}
.sec-find-top a.sec-id:hover { color: var(--accent-text); text-decoration: underline; }

.sec-sum {
  font-size: var(--fs-base);
  color: var(--mut);
  line-height: 1.55;
  margin-top: 7px;
  max-width: 78ch;
}

/* name → installed → fixed, on one line, because that IS the finding. */
.sec-hits { display: flex; flex-direction: column; gap: 6px; margin-top: 11px; }
.sec-hit {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-meta);
  font-size: var(--fs-md);
  color: var(--text2);
}
.sec-hit .sec-pkg { font-weight: var(--fw-semi); }
.sec-hit .sec-arrow { color: var(--dimmer); }
.sec-hit .sec-was { color: var(--danger); }
.sec-hit .sec-now { color: var(--ok); }
.sec-hit .sec-nofix { color: var(--sun); font-family: var(--font-b); font-size: calc(var(--fs-sm) + var(--fs-half)); }
.sec-hit .sec-tag {
  font-family: var(--font-b);
  font-size: calc(var(--fs-xs) + var(--fs-half));
  color: var(--dimmer);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0 calc(7 * var(--sp));
}

.sec-fix {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  padding-top: calc(11 * var(--sp));
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.sec-fix code {
  font-family: var(--mono);
  font-size: calc(var(--fs-sm) + var(--fs-half));
  color: var(--text2);
  background: var(--input);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: calc(5 * var(--sp)) calc(9 * var(--sp));
  flex: 1;
  min-width: 220px;
  overflow-x: auto;
  white-space: nowrap;
}
.sec-fix .btn { padding: calc(5 * var(--sp)) calc(11 * var(--sp)); font-size: var(--fs-md); flex: none; }

/* ---- the KEV list ------------------------------------------------------------------------ */

.sec-kev-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: calc(9 * var(--sp)) calc(12 * var(--sp));
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--panel);
}
.sec-kev-row.ours { border-color: var(--danger-ring); background: var(--danger-tint); }
.sec-kev-row .sec-cve {
  font-family: var(--font-meta);
  font-size: calc(var(--fs-sm) + var(--fs-half));
  color: var(--accent-text);
  flex: none;
}
.sec-kev-row .sec-what { flex: 1; min-width: 200px; font-size: calc(var(--fs-md) + var(--fs-half)); color: var(--text2); }
.sec-kev-row .sec-who { font-size: calc(var(--fs-sm) + var(--fs-half)); color: var(--faint); }
.sec-kev-row .sec-added { font-family: var(--font-meta); font-size: var(--fs-sm); color: var(--dimmer); flex: none; }
.sec-kev-row .sec-ours-tag { font-size: calc(var(--fs-xs) + var(--fs-half)); font-weight: var(--fw-bold); letter-spacing: calc(.06em * var(--tracking)); text-transform: var(--label-case); color: var(--danger); }

/* ---- the world stream -------------------------------------------------------------------- */

.sec-filters { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sec-filters input {
  height: 30px;
  min-width: 180px;
  padding: 0 calc(10 * var(--sp));
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--input);
  color: var(--text);
  font: inherit;
  font-size: calc(var(--fs-md) + var(--fs-half));
}
.sec-filters input:focus { outline: none; border-color: var(--accent); }

.sec-chip {
  height: 26px;
  padding: 0 calc(11 * var(--sp));
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--mut);
  font-size: calc(var(--fs-sm) + var(--fs-half));
  font-weight: var(--fw-semi);
  cursor: pointer;
}
.sec-chip:hover { border-color: var(--line2); color: var(--text2); }
.sec-chip.on { border-color: var(--accent-ring); background: var(--accent-tint); color: var(--accent-text); }

.sec-world { display: flex; flex-direction: column; gap: 6px; }
.sec-world-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: calc(8 * var(--sp)) calc(12 * var(--sp));
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--panel);
}
.sec-world-row .sec-id { font-family: var(--font-meta); font-size: calc(var(--fs-sm) + var(--fs-half)); color: var(--faint); flex: none; }
.sec-world-row a.sec-id:hover { color: var(--accent-text); text-decoration: underline; }
.sec-world-row .sec-what { flex: 1; min-width: 220px; font-size: calc(var(--fs-md) + var(--fs-half)); color: var(--text2); }
.sec-world-row .sec-eco {
  font-family: var(--font-meta);
  font-size: calc(var(--fs-xs) + var(--fs-half));
  color: var(--dimmer);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0 calc(7 * var(--sp));
  flex: none;
}
.sec-world-row .sec-added { font-family: var(--font-meta); font-size: var(--fs-sm); color: var(--dimmer); flex: none; }

.sec-more { align-self: flex-start; }

/* ---- the hand-maintained stack ----------------------------------------------------------- */

.sec-stack { display: flex; flex-direction: column; gap: 8px; }
.sec-stack-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: calc(10 * var(--sp)) calc(12 * var(--sp));
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--panel);
}
.sec-stack-row b { font-size: var(--fs-base); font-weight: var(--fw-semi); flex: none; }
.sec-stack-row .sec-ver { font-family: var(--font-meta); font-size: calc(var(--fs-sm) + var(--fs-half)); color: var(--accent-text); flex: none; }
.sec-stack-row .sec-note { flex: 1; min-width: 240px; font-size: var(--fs-md); color: var(--mut); line-height: 1.5; }
.sec-stack-row .sec-where { font-family: var(--font-meta); font-size: calc(var(--fs-xs) + var(--fs-half)); color: var(--dimmer); }
.sec-stack-row .sec-nm { color: var(--sun); font-size: calc(var(--fs-sm) + var(--fs-half)); font-weight: var(--fw-semi); }

/* The warning that sits above the fuzzy list. Not a toast and not a badge — it is a caveat that
   has to be read before the list under it, so it is a block with a rule down its left. */
.sec-caveat {
  border-left: 3px solid var(--sun);
  padding: calc(2 * var(--sp)) 0 calc(2 * var(--sp)) calc(12 * var(--sp));
  margin-bottom: 4px;
  font-size: calc(var(--fs-md) + var(--fs-half));
  color: var(--mut);
  line-height: 1.55;
  max-width: 78ch;
}

.sec-clear {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(14 * var(--sp)) calc(16 * var(--sp));
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
  background: color-mix(in srgb, var(--ok) 8%, transparent);
  border-radius: var(--r);
  color: var(--text2);
  font-size: var(--fs-base);
}
.sec-clear svg { width: 18px; height: 18px; color: var(--ok); flex: none; }
/* The same box when the check behind it did not run, is out of date or is switched off: never
   green, because an empty list from a feed that did not look is not "clean". */
.sec-clear.sec-doubt {
  border-color: color-mix(in srgb, var(--sun) 40%, transparent);
  background: color-mix(in srgb, var(--sun) 9%, transparent);
  color: var(--text);
}
.sec-clear.sec-doubt svg { color: var(--sun); }

@media (max-width: 720px) {
  .sec-find-top h4 { min-width: 100%; }
  .sec-fix code { min-width: 100%; }
  .sec-kev-row .sec-added,
  .sec-world-row .sec-added { display: none; }
}