/* WPSecureOps — five layouts over one alert engine. The light layouts declare
   their own palettes and the dark layouts carry explicit surfaces below. */
:root { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; }

/* The shell fills the viewport exactly and never grows with the table:
   the list and the dossier each scroll internally, so the toolbar, the
   dossier's action footer and the page footer all stay pinned. */
#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

/* `hidden` has to win over a skin's own display rule.
   The toolbar hides its alert-only controls by setting el.hidden, but every
   skin styles .seg (and the chips) with `display: flex`, which is a class
   selector and therefore beats the UA stylesheet's `[hidden] { display: none }`.
   The group-by segment was showing on the Incidents view in every skin. */
[hidden] { display: none !important; }

.spacer { flex: 1; }
.right { text-align: right; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
a:hover { text-decoration: underline; }

/* ============================ shared structure ============================ */

.chrome, .toolbar, .foot { flex: none; display: flex; align-items: center; }
.chrome { gap: 14px; }
.toolbar { gap: 8px; flex-wrap: wrap; }
.main { flex: 1; min-height: 0; display: flex; }
.main .scroll { flex: 1; min-width: 0; overflow: auto; }
.main.split #dossier { display: none; }
.main.split #dossier.show { display: flex; flex-direction: column; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; cursor: pointer; white-space: nowrap; }
th:nth-child(6), th.right { cursor: default; }
.alertrow { cursor: pointer; }
.grouprow td { padding: 0; }
.pill { display: inline-block; border: 1px solid; white-space: nowrap; }
.sitegrid { display: grid; }
.sitecard { cursor: pointer; position: relative; }
.sitetop { display: flex; align-items: center; gap: 8px; }
.stats { display: flex; }
/* Secondary line under a stat — the exact scan time under its age. Small on
   purpose: the age is what you scan the grid for, the timestamp is what you
   read once you have stopped on one card. */
.stats .sub { font-size: 11px; color: var(--soft); margin-top: 2px; white-space: nowrap; }
.stats .sub.warn { color: #7a5312; }
.meta4, .dgrid { display: grid; grid-template-columns: 1fr 1fr; }
.acts { display: flex; gap: 7px; }
.dbody { flex: 1; min-height: 0; overflow: auto; }
.drow { display: flex; align-items: center; gap: 10px; }
.prose { text-wrap: pretty; }
.ev { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }

/* corner "+" register marks (Industry only) */
.cross { position: relative; }
.cross > i {
  position: absolute; font-style: normal; font-size: 11px; line-height: 1;
  /* Follows the skin's accent rather than repeating a hex, which is why these
     marks stayed at 3.71:1 when the accent was darkened. */
  color: var(--accent); pointer-events: none;
}
.cross > .c1 { left: -5px; top: -6px; }
.cross > .c2 { right: -5px; top: -6px; }
.cross > .c3 { left: -5px; bottom: -6px; }
.cross > .c4 { right: -5px; bottom: -6px; }

.demobadge {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px; border: 1px solid currentColor; opacity: .7; white-space: nowrap;
}
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
a.btn:hover { text-decoration: none; }

.toast {
  position: fixed; opacity: 0; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease; pointer-events: none;
  max-width: min(560px, calc(100vw - 40px));
}
.toast.show { opacity: 1; transform: none; }

/* The one piece of good news the console has. Deliberately quiet — a green
   banner over a queue of critical findings would be the wrong emphasis. */
.resolved-strip { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--hair); background: #f2f8f4;
  font-size: 13px; color: var(--dim); }
.resolved-strip b { color: #12602f; font-weight: 700; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--accent);
  text-decoration: underline; cursor: pointer; }

/* Its counterpart, and the one line on the board that qualifies everything
   else on it: a queue no longer speaks for a site it cannot hear from. Sits in
   the same place as the resolved strip and reads the same way, because it is
   the same kind of statement about the queue rather than about a finding. */
.silence-strip { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--hair); background: #fdf3f1;
  font-size: 13px; color: var(--dim); }
.silence-strip b { color: #8c1c0b; font-weight: 700; }

/* The Not reporting view: one section per reason, because the reasons need
   different work from different people. */
.gapintro { display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--hair);
  font-size: 13px; color: var(--dim); }
.gapintro a { color: var(--accent); }
.gapgroup { padding: 16px 16px 8px; border-bottom: 1px solid var(--hair); }
.gapgroup h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px;
  font-size: 14px; font-weight: 700; }
.gapgroup h3 span:last-child { font-size: 12px; font-weight: 500; color: var(--soft); }
.gapgroup > p { margin: 0 0 10px; max-width: 78ch; font-size: 13px; color: var(--dim); }
.gapgroup .gapfix { margin: 10px 0 0; max-width: 78ch; font-size: 12.5px; color: var(--soft); }

/* Second lines inside a table cell. `.stats .sub` covers the site cards; this
   is the same idea everywhere else, and each skin restates the warn colour
   because #7a5312 disappears on the four dark grounds. */
.sub { font-size: 11px; color: var(--soft); margin-top: 2px; }
.sub.warn { color: #7a5312; }

/* Triage state that is not a button: why this finding is where it is. */
.triage { margin-top: 14px; }
.triage .snoozed { font-size: 13px; color: #7a5312; margin-bottom: 8px; }
.triage textarea.note { display: block; width: 100%; margin: 6px 0 8px; padding: 8px 10px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font: inherit; font-size: 13px; resize: vertical; }
.triage textarea.note:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Incident Mode. The red edge is reserved for the security claim; workflow
   state uses quieter blues/greens so "contained" never looks like severity. */
.incident-intro { display: flex; justify-content: space-between; gap: 18px; align-items: baseline;
  padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--line); background: transparent;
  color: var(--dim); font-size: 13px; }
.incident-intro b { color: var(--ink); }
.incident-intro span { color: var(--soft); }
.incident-list { display: grid; gap: 12px; }
.incident-card { border: 1px solid var(--line); border-left: 5px solid #ec3013; background: transparent;
  cursor: pointer; }
.incident-card:hover { border-color: var(--accent); border-left-color: #ec3013; }
.incident-card.expanded { box-shadow: none; }
.incident-card.resolved { border-left-color: #1e7a43; opacity: .78; }
.incident-card-main { padding: 17px 18px 15px; }
.incident-card-top, .incident-card-foot, .incident-section-head, .assign-row {
  display: flex; align-items: center; gap: 10px; }
.incident-id { color: var(--soft); font: 500 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.incident-card h2 { margin: 13px 0 2px; font-size: 22px; line-height: 1.15; }
.incident-site { color: var(--soft); font-size: 12px; }
.incident-summary { margin: 14px 0 6px; font-size: 16px; color: var(--ink); }
.incident-order { margin: 0; color: var(--dim); }
.incident-card-foot { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--hair);
  color: var(--soft); font-size: 12px; flex-wrap: wrap; }
.incident-card-foot .ghost { margin-left: auto; }
.incident-status { padding: 4px 8px; border: 1px solid var(--line); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; }
.incident-status.investigating { background: #eef6ff; border-color: #5980a6; color: #33556f; }
.incident-status.contained { background: #fff6e6; border-color: #e0a54a; color: #7a5312; }
.incident-status.resolved { background: #e8f5ec; border-color: #1e7a43; color: #12602f; }
.incident-detail { display: grid; grid-template-columns: 1.08fr .92fr; border-top: 1px solid var(--line);
  background: transparent; cursor: default; }
.incident-detail section { padding: 18px; min-width: 0; }
.incident-detail section + section { border-left: 1px solid var(--line); }
.incident-record { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--line); }
.incident-section-head { justify-content: space-between; align-items: end; }
.incident-progress { margin-top: 3px; color: var(--soft); font-size: 12px; }
.incident-progressbar { width: 120px; height: 5px; background: var(--hair); overflow: hidden; }
.incident-progressbar i { display: block; height: 100%; background: #1e7a43; }
.incident-checklist { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.incident-checklist label { display: grid; grid-template-columns: 18px 24px 1fr; gap: 8px;
  align-items: start; padding: 9px 10px; border: 1px solid var(--hair); background: transparent; cursor: pointer; }
.incident-checklist input { width: 15px !important; margin: 3px 0 0; }
.incident-checklist .checknum { color: var(--soft); font-size: 12px; padding-top: 2px; }
.incident-checklist b, .incident-findings b { display: block; font-size: 13px; }
.incident-checklist small, .incident-findings small { display: block; margin-top: 2px; color: var(--soft);
  font-size: 11px; line-height: 1.4; }
.incident-findings { display: grid; gap: 0; margin-top: 10px; border: 1px solid var(--hair); background: transparent; }
.incident-findings > div { display: grid; grid-template-columns: 62px 1fr; gap: 10px; padding: 9px 10px; }
.incident-findings > div + div { border-top: 1px solid var(--hair); }
.source-sev { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.source-sev.crit { color: #a7210d; }
.incident-form-grid { display: grid; grid-template-columns: 190px minmax(240px, 1fr); gap: 14px; }
.incident-form-grid label, .incident-field { display: grid; gap: 6px; }
.incident-record select, .incident-record input, .incident-record textarea { width: 100%; max-width: none;
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: inherit; }
.incident-record textarea { resize: vertical; }
.assign-row input { flex: 1; min-width: 0; }
.assign-row .ghost { flex: none; }
.incident-field { margin-top: 13px; }
.incident-record .acts { align-items: center; }
.incident-updated { color: var(--soft); font-size: 11px; }
.incident-dossier { padding: 12px; overflow: auto; }
.incident-dossier .incident-card { cursor: default; }
.incident-dossier .incident-card-main { padding: 15px; }
.incident-dossier .incident-card-foot button { display: none; }
.incident-dossier .incident-detail { grid-template-columns: 1fr; }
.incident-dossier .incident-detail section + section { border-left: 0; border-top: 1px solid var(--line); }
.incident-dossier .incident-record { grid-column: auto; }
.incident-dossier .incident-form-grid { grid-template-columns: 1fr; }

@media (max-width: 900px) {
  .incident-detail { grid-template-columns: 1fr; }
  .incident-detail section + section { border-left: 0; border-top: 1px solid var(--line); }
  .incident-record { grid-column: auto; }
}
@media (max-width: 620px) {
  .incident-intro { display: block; }
  .incident-intro span { display: block; margin-top: 4px; }
  .incident-form-grid { grid-template-columns: 1fr; }
  .incident-card-foot .ghost { width: 100%; margin-left: 0; }
}

/* Advisories joined from the Wordfence Intelligence feed. Framed as a quote
   from another source, because that is what it is — this product did not
   discover any of it. */
.advisory { margin-top: 6px; padding: 10px 12px; border-left: 3px solid var(--accent);
  background: rgba(0,0,0,.02); font-size: 13px; }
.advisory .adv-head { font-weight: 600; margin-bottom: 6px; }
.advisory ul { margin: 0; padding-left: 18px; }
.advisory li { margin: 3px 0; }
.advisory a { color: var(--accent); }
.advisory .adv-src { margin-top: 8px; font-size: 11px; color: var(--soft); }

/* Fleet health tiles. A tile with nothing in it is the good case and stays
   quiet; only a non-zero count earns emphasis. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px; background: var(--hair); border-bottom: 1px solid var(--hair); }
.tile { display: block; text-align: left; padding: 14px 16px; border: 0; background: #fff;
  cursor: pointer; }
.tile:hover { background: #fafafa; }
.tile.on { background: #eef6ff; box-shadow: inset 0 -2px 0 var(--accent); }
.tile-n { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--soft); }
.tile.hot .tile-n { color: #8c1c0b; }
.tile-l { display: block; font-size: 12px; color: var(--mid); margin-top: 3px; }
.bad { color: #8c1c0b; }

/* Contact badges, shared with Manage sites' vocabulary so one word means one
   thing across the product. */
.dot { display: inline-block; padding: 2px 7px; border: 1px solid; font-size: 10px;
  font-weight: 600; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.dot.live   { background: #e8f5ec; border-color: #1e7a43; color: #12602f; }
.dot.quiet  { background: #fff6e6; border-color: #e0a54a; color: #7a5312; }
.dot.silent { background: #fdecea; border-color: #ec3013; color: #8c1c0b; }
.dot.never  { background: #f0eef6; border-color: #7a6ea8; color: #4a3f78; }
.dot.legacy { background: #eef2f6; border-color: #5980a6; color: #33556f; }

/* ------------------------------- empty states ---------------------------- */
/* Written against the shared tokens rather than per skin: an empty screen is
   the same information in both, and the skins differ here only in the border
   weight and the register marks they already draw everywhere else. */
.empty { position: relative; max-width: 720px; margin: 26px auto; padding: 26px 28px;
  border: 1px solid var(--line); background: #fff; }
.empty h2, .empty h3 { margin: 0 0 10px; font-size: 20px; font-weight: 700; }
.empty h4 { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.empty p { margin: 0 0 12px; color: var(--dim); max-width: 62ch; }
.empty p.dim { color: var(--soft); font-size: 13px; }
.empty .acts { margin-top: 16px; align-items: center; }
.empty .ghostlink { font-size: 13px; color: var(--accent); text-decoration: underline; }

.empty .twoup { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 6px; }
.empty .twoup > div { padding-top: 14px; border-top: 1px solid var(--hair); }
@media (max-width: 720px) { .empty .twoup { grid-template-columns: 1fr; } }

.empty .enrol { display: grid; gap: 10px; }
.empty .enrol label { display: grid; gap: 4px; font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.empty .enrol input { padding: 8px 10px; border: 1px solid var(--line); background: #fff;
  color: var(--ink); font: 400 14px/1.2 inherit; }
.empty .enrol button { justify-self: start; }

/* The key and endpoint to paste. `word-break` matters: a key is 80 characters
   with no spaces and would otherwise push the panel wider than the viewport. */
.pastebox { margin: 4px 0 0; }
.pastebox dt { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--soft); margin-top: 12px; }
.pastebox dd { margin: 4px 0 0; display: flex; gap: 10px; align-items: flex-start; }
.pastebox code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: rgba(0,0,0,.04); padding: 7px 9px; word-break: break-all; flex: 1; }
.pastebox code.secret { background: #fff6e6; border: 1px solid #e0a54a; }

/* Setup progress. The current step is the one to look at, so it is the only
   one at full strength; finished steps recede rather than celebrate. */
.steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 7px; }
.steps li { display: flex; gap: 9px; align-items: baseline; font-size: 13px; color: var(--soft); }
.steps li .mark { width: 14px; text-align: center; font-weight: 700; }
.steps li.done { color: var(--dim); }
.steps li.done .mark { color: #1e7a43; }
.steps li.now { color: var(--ink); font-weight: 600; }
.steps li.now .mark { color: var(--accent); }

/* ============================== INDUSTRY (1B) ============================= */

/* Token blocks are pinned to :root deliberately. As a bare attribute selector
   they also matched the skin-picker's own buttons — which carry data-skin as
   their click target — so each button redefined the whole palette for itself
   and rendered in the skin it switches to, on the wrong ground. */
:root[data-skin="industry"] {
  --line: rgba(29,31,32,.16);
  --hair: rgba(29,31,32,.09);
  --ink: #1d1f20;
  --dim: #424244;
  /* Both were below 4.5:1 on this skin's own #f2f2f3 ground — --soft at 3.82
     across 55 places (row subtitles, counts, the footer) and --accent at 3.71
     for the register marks, links and the white-on-accent selected segment.
     Darkened by the least that clears it, hue unchanged. */
  --soft: #6e6e71;
  --mid: #5d5d60;
  --accent: #4f7294;
}
[data-skin="industry"] body { background: #f2f2f3; color: var(--ink); font: 400 14px/1.45 "Barlow", system-ui, sans-serif; }
[data-skin="industry"] .cond,
[data-skin="industry"] .brand,
[data-skin="industry"] .nav a,
[data-skin="industry"] .btn,
[data-skin="industry"] .seg button,
[data-skin="industry"] .skinpick button,
[data-skin="industry"] .grouplabel,
[data-skin="industry"] th,
[data-skin="industry"] .glabel,
[data-skin="industry"] .pill,
[data-skin="industry"] .ghost,
[data-skin="industry"] .lbl,
[data-skin="industry"] .domain,
[data-skin="industry"] .acts button,
[data-skin="industry"] .copy { font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif; }

[data-skin="industry"] .chrome { height: 54px; padding: 0 17px; border-bottom: 1px solid var(--line); }
[data-skin="industry"] .brand { font-weight: 600; font-size: 19px; letter-spacing: .06em; text-transform: uppercase; }
[data-skin="industry"] .rule { width: 1px; height: 18px; background: var(--line); }
[data-skin="industry"] .stat { font-size: 13px; color: var(--mid); letter-spacing: .04em; }
[data-skin="industry"] .nav { display: flex; gap: 16px; }
[data-skin="industry"] .nav a { font-weight: 600; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: #416180; }
[data-skin="industry"] .btn { font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; }
[data-skin="industry"] .avatar { width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font: 600 11px/1 "Barlow Condensed", system-ui; color: var(--mid); }

[data-skin="industry"] .toolbar { padding: 11px 17px; border-bottom: 1px solid var(--line); }
[data-skin="industry"] .seg, [data-skin="industry"] .skinpick { display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
[data-skin="industry"] .seg button, [data-skin="industry"] .skinpick button { font-weight: 600; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; border: 0; padding: 8px 14px; background: transparent; color: var(--ink); }
[data-skin="industry"] .skinpick button { padding: 7px 11px; }
[data-skin="industry"] .skinpick button.on { background: var(--accent); color: #f2f2f3; }
[data-skin="industry"] select, [data-skin="industry"] input {
  appearance: none; background: transparent; color: var(--ink);
  font: 400 13px/1 "Barlow", system-ui; border: 1px solid var(--line); border-radius: 4px;
}
[data-skin="industry"] select { padding: 8px 24px 8px 9px; }
[data-skin="industry"] input { padding: 8px 10px; width: 205px; }
[data-skin="industry"] .grouplabel { font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }

[data-skin="industry"] .scroll { padding: 17px; }
[data-skin="industry"] .tablebox { border: 1px solid var(--line); }
[data-skin="industry"] th { font-weight: 600; font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--mid); padding: 10px 13px; border-bottom: 1px solid var(--line); }
[data-skin="industry"] td { padding: 10px 13px; border-bottom: 1px solid var(--hair); vertical-align: top; }
[data-skin="industry"] .grouphead { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: #e9e9ea; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
[data-skin="industry"] .glabel { font-weight: 600; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; }
[data-skin="industry"] .gcount { font-size: 12px; color: var(--mid); }
[data-skin="industry"] .pill { font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 2px; }
[data-skin="industry"] .t { font-weight: 500; }
[data-skin="industry"] .s { font-size: 12px; color: var(--soft); margin-top: 2px; }
[data-skin="industry"] .dim { color: var(--dim); }
[data-skin="industry"] .ghost { font-weight: 600; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 2px; padding: 6px 9px; }
[data-skin="industry"] .count { padding: 12px 2px; color: var(--soft); font-size: 13px; }

[data-skin="industry"] .detailrow > td { padding: 0; border-bottom: 1px solid var(--line); }
[data-skin="industry"] .detail { margin: 13px; border: 1px solid var(--accent); padding: 17px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; }
[data-skin="industry"] .lbl { font-weight: 600; font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--soft); }
[data-skin="industry"] .lbl.mt { margin-top: 17px; }
[data-skin="industry"] .prose { margin-top: 8px; line-height: 1.6; color: #2b2b2d; }
[data-skin="industry"] .ev { margin-top: 8px; border: 1px solid var(--line); padding: 10px; font-size: 12px; color: #2c455d; }
[data-skin="industry"] .meta4 { gap: 13px; }
[data-skin="industry"] .meta4 .v, [data-skin="industry"] .dgrid .v { margin-top: 4px; }
[data-skin="industry"] .acts { margin-top: 20px; }
[data-skin="industry"] .acts button { font-weight: 600; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 10px 14px; }
[data-skin="industry"] .acts .primary { background: var(--accent); color: #f2f2f3; border-color: var(--accent); }
[data-skin="industry"] .acts .muted { color: var(--mid); }
[data-skin="industry"] .collapse { margin-top: 10px; font: 400 12px/1 "Barlow", system-ui; background: transparent; color: var(--soft); border: 0; padding: 0; text-decoration: underline; }

[data-skin="industry"] .sitegrid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
[data-skin="industry"] .sitecard { border: 1px solid var(--line); padding: 14px; }
[data-skin="industry"] .domain { font-weight: 600; font-size: 17px; letter-spacing: .03em; }
[data-skin="industry"] .sitecard .s { margin-top: 4px; }
[data-skin="industry"] .stats { gap: 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
[data-skin="industry"] .stats .lbl { letter-spacing: .1em; }
[data-skin="industry"] .stats .n { font-weight: 700; margin-top: 3px; }
[data-skin="industry"] .stats .n.hot { color: #2c455d; }

[data-skin="industry"] .foot { height: 38px; padding: 0 17px; border-top: 1px solid var(--line); font-size: 12px; color: var(--soft); gap: 18px; }
[data-skin="industry"] .copy { font-weight: 600; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; }
[data-skin="industry"] .toast { left: 17px; bottom: 17px; background: #1d2d3d; color: #eef6ff; border-radius: 4px; padding: 10px 14px; font-size: 13px; box-shadow: 0 12px 32px rgba(43,43,45,.22); }

/* Incident Mode follows the same ledger language as the alert table. */
/* The band is darker than the page, so --soft lands at 4.19:1 on it where it
   clears elsewhere. The one line of text on it takes the next step up. */
[data-skin="industry"] .incident-intro { background: #e9e9ea; }
[data-skin="industry"] .incident-intro span { color: var(--mid); }
[data-skin="industry"] .incident-list { gap: 0; border: 1px solid var(--line); }
[data-skin="industry"] .incident-card {
  border: 0; border-left: 4px solid #ec3013; border-bottom: 1px solid var(--hair);
}
[data-skin="industry"] .incident-card:last-child { border-bottom: 0; }
[data-skin="industry"] .incident-card:hover,
[data-skin="industry"] .incident-card.expanded { background: #eef6ff; }
[data-skin="industry"] .incident-card.resolved { border-left-color: #1e7a43; }
[data-skin="industry"] .incident-card h2 {
  font: 600 20px/1.2 "Barlow", system-ui, sans-serif; letter-spacing: 0;
}
[data-skin="industry"] .incident-status { font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif; }
[data-skin="industry"] .incident-detail {
  margin: 0 13px 13px; border: 1px solid var(--accent); background: transparent;
}
[data-skin="industry"] .incident-record select,
[data-skin="industry"] .incident-record input,
[data-skin="industry"] .incident-record textarea {
  width: 100%; background: #fff; border-radius: 4px; font: 400 13px/1.4 "Barlow", system-ui, sans-serif;
}

/* ============================= MODERNIST (1C) ============================= */

:root[data-skin="modernist"] {
  --line: rgba(32,30,29,.4);
  --hair: rgba(32,30,29,.18);
  --ink: #201e1d;
  --dim: #444141;
  /* 3.85:1 on this skin's #f3f2f2 ground, across every row subtitle, client
     name and timestamp — the same fault as Industry's, and fixed the same
     way: the least darkening that clears 4.5:1. */
  --soft: #726e6e;
  --mid: #605d5d;
  --accent: #ae1800;
}
[data-skin="modernist"] body { background: #f3f2f2; color: var(--ink); font: 400 15px/1.45 "Archivo", system-ui, sans-serif; }

[data-skin="modernist"] .chrome { height: 60px; padding: 0 20px; border-bottom: 2px solid var(--line); gap: 16px; }
[data-skin="modernist"] .brand { font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
[data-skin="modernist"] .rule { width: 2px; height: 20px; background: var(--line); }
[data-skin="modernist"] .stat { font-size: 13px; color: var(--mid); }
[data-skin="modernist"] .stat.crit { font-weight: 600; color: var(--accent); }
[data-skin="modernist"] .nav { display: flex; gap: 18px; font-size: 14px; font-weight: 600; }
[data-skin="modernist"] .btn { font: 600 14px/1.2 "Archivo", system-ui; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 0; padding: 9px 14px; }
[data-skin="modernist"] .avatar { width: 30px; height: 30px; background: #eae9e9; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--mid); }

[data-skin="modernist"] .toolbar { padding: 12px 20px; border-bottom: 2px solid var(--line); }
[data-skin="modernist"] .seg, [data-skin="modernist"] .skinpick { display: flex; }
[data-skin="modernist"] .seg button, [data-skin="modernist"] .skinpick button { font: 600 13px/1 "Archivo", system-ui; border: 1px solid var(--line); border-right: 0; padding: 9px 15px; background: transparent; color: var(--ink); border-radius: 0; }
[data-skin="modernist"] .seg button:last-child, [data-skin="modernist"] .skinpick button:last-child { border-right: 1px solid var(--line); }
[data-skin="modernist"] #groupSeg button { padding: 9px 13px; }
[data-skin="modernist"] .skinpick button { padding: 8px 12px; }
[data-skin="modernist"] .skinpick button.on { background: var(--ink); color: #f3f2f2; }
[data-skin="modernist"] select, [data-skin="modernist"] input {
  appearance: none; background: transparent; color: var(--ink);
  font: 400 14px/1 "Archivo", system-ui; border: 1px solid var(--line); border-radius: 0;
}
[data-skin="modernist"] select { padding: 9px 22px 9px 10px; }
[data-skin="modernist"] input { padding: 9px 10px; width: 150px; }

[data-skin="modernist"] th { font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mid); padding: 13px 16px; border-bottom: 2px solid var(--line); }
[data-skin="modernist"] td { padding: 14px 16px; border-bottom: 1px solid var(--hair); vertical-align: top; }
[data-skin="modernist"] .grouphead { display: flex; align-items: baseline; gap: 12px; padding: 16px 16px 8px; border-bottom: 2px solid var(--line); }
[data-skin="modernist"] .glabel { font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
[data-skin="modernist"] .gcount { font-size: 13px; color: var(--mid); }
[data-skin="modernist"] .pill { font-size: 12px; font-weight: 600; padding: 3px 7px; border-radius: 0; }
[data-skin="modernist"] .t { font-weight: 600; line-height: 1.35; }
[data-skin="modernist"] .s { font-size: 13px; color: var(--soft); margin-top: 3px; }
[data-skin="modernist"] .dim { color: var(--dim); }
[data-skin="modernist"] td:nth-child(6) { font-size: 13px; }
[data-skin="modernist"] .count { padding: 16px; color: var(--soft); font-size: 13px; }

[data-skin="modernist"] .sitegrid { grid-template-columns: 1fr 1fr; }
[data-skin="modernist"] .sitecard { padding: 16px; border-bottom: 2px solid var(--line); border-right: 2px solid var(--line); }
[data-skin="modernist"] .sitetop { align-items: baseline; gap: 10px; }
[data-skin="modernist"] .domain { font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
[data-skin="modernist"] .sitecard .s { margin-top: 4px; }
[data-skin="modernist"] .stats { gap: 24px; margin-top: 14px; }
[data-skin="modernist"] .stats .lbl { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
[data-skin="modernist"] .stats .n { font-weight: 800; font-size: 19px; margin-top: 2px; }
[data-skin="modernist"] .stats .n.hot { color: var(--accent); }

[data-skin="modernist"] #dossier { width: 452px; flex: none; border-left: 2px solid var(--line); background: #eae9e9; }
[data-skin="modernist"] .dhead { padding: 20px; border-bottom: 2px solid var(--line); }
[data-skin="modernist"] .did { font-size: 12px; letter-spacing: .08em; color: var(--soft); }
[data-skin="modernist"] .x { background: transparent; border: 1px solid var(--line); color: var(--ink); width: 28px; height: 28px; font-size: 14px; line-height: 1; }
[data-skin="modernist"] .dtitle { font-weight: 800; font-size: 25px; line-height: 1.14; letter-spacing: -.02em; margin-top: 12px; text-wrap: pretty; }
[data-skin="modernist"] .dsub { font-size: 13px; color: var(--mid); margin-top: 6px; }
[data-skin="modernist"] .dbody > section { padding: 20px; border-bottom: 1px solid var(--hair); }
[data-skin="modernist"] .lbl { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
[data-skin="modernist"] .prose { margin-top: 8px; line-height: 1.55; }
[data-skin="modernist"] .ev { margin-top: 8px; background: #f3f2f2; border: 1px solid var(--hair); padding: 11px; font-size: 13px; }
[data-skin="modernist"] .dgrid { border-bottom: 1px solid var(--hair); }
[data-skin="modernist"] .dgrid > div { padding: 16px 20px; }
[data-skin="modernist"] .dgrid > div:nth-child(odd) { border-right: 1px solid var(--hair); }
[data-skin="modernist"] .dgrid > div:nth-child(n+3) { border-top: 1px solid var(--hair); }
[data-skin="modernist"] .dgrid .v { margin-top: 4px; font-weight: 600; }
[data-skin="modernist"] .dfoot { display: flex; gap: 8px; padding: 20px; border-top: 2px solid var(--line); }
[data-skin="modernist"] .dfoot button { font: 600 14px/1.2 "Archivo", system-ui; background: transparent; color: var(--ink); border: 1px solid var(--line); padding: 11px 14px; text-align: left; }
[data-skin="modernist"] .dfoot .primary { flex: 1; background: #ec3013; color: #f3f2f2; border: 0; }
[data-skin="modernist"] .dfoot .muted { color: var(--mid); }

[data-skin="modernist"] .foot { height: 44px; padding: 0 20px; border-top: 2px solid var(--line); font-size: 13px; color: var(--mid); gap: 20px; }
[data-skin="modernist"] .copy { font-weight: 600; }
[data-skin="modernist"] .toast { left: 20px; bottom: 20px; background: #201e1d; color: #f3f2f2; padding: 11px 15px; font-size: 14px; }

/* Incident Mode uses the same edge-to-edge editorial rows and square controls. */
[data-skin="modernist"] .incident-intro {
  margin: 0; padding: 16px 20px; border: 0; border-bottom: 2px solid var(--line); background: transparent;
}
[data-skin="modernist"] .incident-list { gap: 0; }
[data-skin="modernist"] .incident-card {
  border: 0; border-left: 0; border-bottom: 2px solid var(--line); background: transparent;
}
[data-skin="modernist"] .incident-card:hover,
[data-skin="modernist"] .incident-card.expanded { background: rgba(32,30,29,.035); }
[data-skin="modernist"] .incident-card.resolved { border-left: 0; }
[data-skin="modernist"] .incident-card-main { padding: 16px 20px; }
[data-skin="modernist"] .incident-card h2 {
  font: 800 20px/1.2 "Archivo", system-ui, sans-serif; letter-spacing: -.02em;
}
[data-skin="modernist"] .incident-card-foot { border-top-color: var(--hair); }
[data-skin="modernist"] .incident-status { border-radius: 0; }
[data-skin="modernist"] .incident-card .ghost {
  font: 600 13px/1 "Archivo", system-ui, sans-serif; background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: 0; padding: 7px 10px;
}
[data-skin="modernist"] .incident-detail { background: #eae9e9; border-top: 2px solid var(--line); }
[data-skin="modernist"] .incident-checklist label,
[data-skin="modernist"] .incident-findings { background: #f3f2f2; }
[data-skin="modernist"] .incident-record select,
[data-skin="modernist"] .incident-record input,
[data-skin="modernist"] .incident-record textarea {
  width: 100%; background: #f3f2f2; border-radius: 0; font: 400 14px/1.4 "Archivo", system-ui, sans-serif;
}
[data-skin="modernist"] .incident-record .acts button {
  font: 600 14px/1.2 "Archivo", system-ui, sans-serif; padding: 10px 14px;
  color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 0;
}
[data-skin="modernist"] .incident-record .acts .primary {
  color: #f3f2f2; background: #ec3013; border-color: #ec3013;
}
[data-skin="modernist"] .incident-dossier { padding: 0; }
[data-skin="modernist"] .incident-dossier .incident-card { border-bottom: 0; }

/* ======================= LEDGER (Activity Log, 1a) ======================== */
/* The comp's "safe" direction: a wp-admin table sharpened. Every value below
   is the comp's own — ground #16181b, panel #1a1e21, rows #191b1c, rails at
   3px inset, and system UI type with monospace for anything machine-written.
   The one column that could not survive the port is the actor's IP: a scan
   finding has no actor, and inventing one would be the only untrue thing on
   the screen, so that column is Status. */

:root[data-skin="ledger"] {
  color-scheme: dark;
  --bg: #16181b;
  --panel: #1a1e21;
  --row: #191b1c;
  --line: #2a2f34;
  --hair: #22262a;
  --ink: #e9edf1;
  --dim: #b6bec5;
  --soft: #7f8992;
  --mid: #9aa4ad;
  --accent: #7fb3f0;
  --mono: ui-monospace, Menlo, "IBM Plex Mono", monospace;
}
:root[data-skin="ledger"] body {
  background: var(--bg); color: var(--ink);
  font: 400 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

[data-skin="ledger"] .chrome { height: 56px; padding: 0 22px; background: var(--bg); border-bottom: 1px solid var(--line); }
[data-skin="ledger"] .brand { font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
[data-skin="ledger"] .rule { width: 1px; height: 18px; background: var(--line); }
[data-skin="ledger"] .stat { font-size: 12px; color: var(--soft); }
[data-skin="ledger"] .stat.crit b { color: #f2949b; }
[data-skin="ledger"] .nav { display: flex; gap: 16px; font-size: 12.5px; color: var(--dim); }
[data-skin="ledger"] .nav a:hover { color: var(--accent); }
[data-skin="ledger"] .btn {
  font: 500 12px/1 inherit; color: var(--dim); background: #22272b;
  border: 1px solid #333a41; border-radius: 4px; padding: 8px 12px;
}
[data-skin="ledger"] .btn:hover { background: #2b3237; color: var(--ink); }
[data-skin="ledger"] .avatar {
  width: 28px; height: 28px; border-radius: 4px; background: #22272b; color: var(--mid);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;
}

[data-skin="ledger"] .toolbar { padding: 12px 22px; background: var(--bg); border-bottom: 1px solid var(--line); gap: 8px; }
[data-skin="ledger"] .seg { display: inline-flex; gap: 6px; }
[data-skin="ledger"] .seg button {
  font: 500 12px/1 inherit; border: 1px solid #333a41; background: #1d2226;
  color: var(--dim); border-radius: 4px; padding: 8px 12px;
}
[data-skin="ledger"] .seg button:hover { border-color: #3d464e; color: var(--ink); }
[data-skin="ledger"] .grouplabel { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--soft); }
[data-skin="ledger"] select, [data-skin="ledger"] input {
  appearance: none; font: 400 12px/1 inherit; color: var(--dim);
  background: #1d2226; border: 1px solid #333a41; border-radius: 4px; padding: 8px 10px;
}
[data-skin="ledger"] input { width: 200px; }
[data-skin="ledger"] input::placeholder { color: #6d7780; }
[data-skin="ledger"] select:focus-visible, [data-skin="ledger"] input:focus-visible {
  border-color: var(--accent); outline: none;
}

/* The table. A CSS grid rather than a <table>: the comp's is a grid, and the
   inline detail has to span the full width without a colspan. */
[data-skin="ledger"] .lg { --cols: 104px 132px minmax(0,1fr) 220px 170px 120px; }
[data-skin="ledger"] .lg-head,
[data-skin="ledger"] .lg-row { display: grid; grid-template-columns: var(--cols); align-items: start; }
[data-skin="ledger"] .lg-head {
  position: sticky; top: 0; z-index: 2; background: var(--panel);
  border-bottom: 1px solid var(--line);
}
[data-skin="ledger"] .lg-head > div {
  padding: 9px 14px; font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--soft); cursor: pointer; white-space: nowrap;
}
[data-skin="ledger"] .lg-head > div:nth-child(n+5) { cursor: default; }

[data-skin="ledger"] .lg-day {
  display: flex; align-items: center; gap: 10px; padding: 7px 16px;
  background: #15181a; border-bottom: 1px solid #24282c;
}
[data-skin="ledger"] .lg-day-l { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8d97a0; }
[data-skin="ledger"] .lg-day-s { font-size: 11px; color: var(--soft); }

[data-skin="ledger"] .lg-row {
  border-bottom: 1px solid var(--hair); background: var(--row); cursor: pointer;
}
[data-skin="ledger"] .lg-row:hover { background: #1c1f21; }
[data-skin="ledger"] .lg-row.isacked { opacity: .62; }
[data-skin="ledger"] .lg-row.isopen { background: #1b2024; }
[data-skin="ledger"] .lg-row > div { padding: 11px 14px; }
[data-skin="ledger"] .lg-time { font: 400 12.5px/1.4 var(--mono); color: #a8b1b9; }
[data-skin="ledger"] .lg-type { font: 600 12.5px/1.4 var(--mono); color: #f4f7fa; display: flex; align-items: center; gap: 9px; }
[data-skin="ledger"] .lg-title { margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--mid); }
[data-skin="ledger"] .lg-flag {
  font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); border: 1px solid rgba(127,179,240,.35); border-radius: 3px; padding: 3px 5px;
}
[data-skin="ledger"] .lg-obj, [data-skin="ledger"] .lg-user { font-size: 12.5px; color: var(--dim); word-break: break-word; }
[data-skin="ledger"] .lg-status { font-size: 12px; }

/* The rail. One rule per severity, drawn inside the row so it survives the
   row's own background — the comp's single most legible idea. */
[data-skin="ledger"] .lg-row.sev-crit { box-shadow: inset 3px 0 0 #e5484d; background: rgba(229,72,77,.055); }
[data-skin="ledger"] .lg-row.sev-high { box-shadow: inset 3px 0 0 #7fb3f0; }
[data-skin="ledger"] .lg-row.sev-med  { box-shadow: inset 3px 0 0 #c98a1e; }
[data-skin="ledger"] .lg-row.sev-low  { box-shadow: inset 3px 0 0 #2f3a34; }

[data-skin="ledger"] .lg-detail { padding: 4px 14px 18px 20px; border-bottom: 1px solid var(--hair); }
[data-skin="ledger"] .lg-detail.sev-crit { box-shadow: inset 3px 0 0 #e5484d; background: rgba(229,72,77,.075); }
[data-skin="ledger"] .lg-detail.sev-high { box-shadow: inset 3px 0 0 #7fb3f0; }
[data-skin="ledger"] .lg-detail.sev-med  { box-shadow: inset 3px 0 0 #c98a1e; }
[data-skin="ledger"] .lg-detail.sev-low  { box-shadow: inset 3px 0 0 #2f3a34; }
[data-skin="ledger"] .lg-detail-in {
  display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 28px;
  padding: 14px 16px; background: #15181a; border: 1px solid var(--line); border-radius: 5px;
}
@media (max-width: 1100px) { [data-skin="ledger"] .lg-detail-in { grid-template-columns: 1fr; } }
[data-skin="ledger"] .lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--soft); }
[data-skin="ledger"] .lbl.mt { margin-top: 16px; display: block; }
[data-skin="ledger"] .prose { margin-top: 8px; color: var(--dim); }
[data-skin="ledger"] .ev {
  margin-top: 8px; font: 400 12px/1.5 var(--mono); color: var(--mid);
  background: #101315; border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px;
}
[data-skin="ledger"] .lg-meta { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
[data-skin="ledger"] .lg-meta > div { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--dim); }
[data-skin="ledger"] .lg-actions { display: flex; flex-direction: column; gap: 8px; }
[data-skin="ledger"] .lg-actions button {
  font: 500 12px/1 inherit; text-align: left; color: var(--dim);
  background: #1d2226; border: 1px solid #333a41; border-radius: 4px; padding: 10px 12px;
}
[data-skin="ledger"] .lg-actions button:hover { border-color: #3d464e; color: var(--ink); }
[data-skin="ledger"] .lg-actions .primary { color: #f2949b; border-color: rgba(229,72,77,.42); }
[data-skin="ledger"] .lg-actions .muted { color: var(--soft); }
[data-skin="ledger"] .count { padding: 14px 22px; color: var(--soft); font-size: 12px; }
[data-skin="ledger"] .foot { height: 42px; padding: 0 22px; border-top: 1px solid var(--line); font-size: 12px; color: var(--soft); gap: 18px; }
[data-skin="ledger"] .toast { left: 22px; bottom: 22px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 5px; padding: 11px 14px; font-size: 13px; }
[data-skin="ledger"] .ghost {
  font: 500 12px/1 inherit; color: var(--dim); background: #1d2226;
  border: 1px solid #333a41; border-radius: 4px; padding: 7px 10px;
}

/* Everything the comp did not draw. The comp is one screen — the alert table —
   but this console also has a sites grid, a fleet table, a resolved list and
   the ignored list, all of which fall back to plain `table`, `.sitecard` and
   `.stats`. Without these they rendered as unstyled text on the dark ground:
   no card, no gaps, labels running into each other. */

[data-skin="ledger"] table { width: 100%; border-collapse: collapse; }
[data-skin="ledger"] th {
  padding: 9px 14px; font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--soft); background: var(--panel);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
[data-skin="ledger"] td { padding: 11px 14px; border-bottom: 1px solid var(--hair); vertical-align: top; }
[data-skin="ledger"] tbody tr:hover { background: #1c1f21; }
[data-skin="ledger"] .t { font-weight: 600; }
[data-skin="ledger"] .s { font-size: 12px; color: var(--soft); margin-top: 3px; }

[data-skin="ledger"] .sitegrid { grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px 22px; }
[data-skin="ledger"] .sitecard {
  padding: 15px 16px; background: var(--row); border: 1px solid var(--line); border-radius: 5px;
}
[data-skin="ledger"] .sitecard:hover { background: #1c1f21; }
[data-skin="ledger"] .domain { font-weight: 600; font-size: 15px; }
[data-skin="ledger"] .sitecard .s { margin-top: 4px; }
[data-skin="ledger"] .stats { gap: 18px; margin-top: 14px; flex-wrap: wrap; }
[data-skin="ledger"] .stats .lbl { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--soft); }
[data-skin="ledger"] .stats .n { font-weight: 600; font-size: 17px; margin-top: 3px; color: var(--ink); }
[data-skin="ledger"] .stats .n.hot { color: #f2949b; }
[data-skin="ledger"] .stats .sub { color: var(--soft); }

[data-skin="timeline"] table { width: 100%; border-collapse: collapse; }
[data-skin="timeline"] th {
  padding: 12px 16px; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--soft); border-bottom: 1px solid var(--line); white-space: nowrap;
}
[data-skin="timeline"] td { padding: 13px 16px; border-bottom: 1px solid var(--hair); vertical-align: top; }
[data-skin="timeline"] tbody tr:hover { background: #1b1917; }
[data-skin="timeline"] .t { font-weight: 600; }
[data-skin="timeline"] .s { font-size: 12.5px; color: var(--soft); margin-top: 3px; }

[data-skin="timeline"] .sitegrid { grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 18px 24px; }
[data-skin="timeline"] .sitecard {
  padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
[data-skin="timeline"] .sitecard:hover { background: #211f1d; }
[data-skin="timeline"] .domain { font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
[data-skin="timeline"] .sitecard .s { margin-top: 4px; }
[data-skin="timeline"] .stats { gap: 20px; margin-top: 14px; flex-wrap: wrap; }
[data-skin="timeline"] .stats .lbl { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
[data-skin="timeline"] .stats .n { font-weight: 600; font-size: 18px; margin-top: 3px; color: var(--ink); }
[data-skin="timeline"] .stats .n.hot { color: #f2949b; }
[data-skin="timeline"] .stats .sub { color: var(--soft); }

/* ====================== TIMELINE (Activity Log, 1b) ======================= */
/* The comp's "bold" direction: warm paper-dark, IBM Plex, events on a spine
   with the severity reading off it, and findings from one scan told as a
   burst rather than repeated rows. */

:root[data-skin="timeline"] {
  color-scheme: dark;
  --bg: #131211;
  --panel: #1a1817;
  --line: #262320;
  --hair: #201e1c;
  --ink: #f3efe9;
  --dim: #c9c0b4;
  --soft: #8a827a;
  --mid: #a49a8e;
  --accent: #e8dfd2;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
:root[data-skin="timeline"] body {
  background: var(--bg); color: var(--ink);
  font: 400 14px/1.55 "IBM Plex Sans", system-ui, sans-serif;
}

[data-skin="timeline"] .chrome { height: 58px; padding: 0 24px; border-bottom: 1px solid var(--line); }
[data-skin="timeline"] .brand { font-weight: 700; font-size: 19px; letter-spacing: -.015em; }
[data-skin="timeline"] .rule { width: 1px; height: 18px; background: var(--line); }
[data-skin="timeline"] .stat { font-size: 12.5px; color: var(--soft); }
[data-skin="timeline"] .stat.crit b { color: #f2949b; }
[data-skin="timeline"] .nav { display: flex; gap: 16px; font-size: 13px; color: var(--dim); }
[data-skin="timeline"] .btn {
  font: 500 12px/1 inherit; color: var(--ink); background: transparent;
  border: 1px solid #3a3532; border-radius: 999px; padding: 8px 14px;
}
[data-skin="timeline"] .btn:hover { background: #211f1d; }
[data-skin="timeline"] .avatar {
  width: 28px; height: 28px; border-radius: 999px; background: #2a2724; color: var(--mid);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;
}
[data-skin="timeline"] .toolbar { padding: 14px 24px; border-bottom: 1px solid var(--line); gap: 8px; }
[data-skin="timeline"] .seg { display: inline-flex; gap: 7px; }
[data-skin="timeline"] .seg button {
  font: 500 12px/1 inherit; border: 1px solid #3a3532; background: transparent;
  color: var(--dim); border-radius: 999px; padding: 8px 13px;
}
[data-skin="timeline"] .grouplabel { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--soft); }
[data-skin="timeline"] select, [data-skin="timeline"] input {
  appearance: none; font: 400 12px/1 inherit; color: var(--dim);
  background: #1b1917; border: 1px solid #322e2b; border-radius: 999px; padding: 8px 13px;
}
[data-skin="timeline"] input { width: 190px; }
[data-skin="timeline"] input::placeholder { color: var(--soft); }

[data-skin="timeline"] .tl { padding: 8px 24px 0; }
[data-skin="timeline"] .tl-day {
  display: flex; align-items: baseline; gap: 12px; padding: 20px 0 10px;
}
[data-skin="timeline"] .tl-day-l { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--mid); }
[data-skin="timeline"] .tl-day-s { font-size: 11.5px; color: var(--soft); }
[data-skin="timeline"] .tl-day::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* The spine: a rule down the gutter, with each item's severity mark sitting
   on it. The rail colour repeats on the item so a burst reads at a glance. */
[data-skin="timeline"] .tl-item {
  display: grid; grid-template-columns: 52px 22px minmax(0, 1fr); align-items: start;
  padding: 9px 0; cursor: pointer; position: relative;
}
[data-skin="timeline"] .tl-item::before {
  content: ""; position: absolute; left: 61px; top: 0; bottom: 0; width: 1px; background: var(--line);
}
[data-skin="timeline"] .tl-item.sev-crit::before { background: #e5484d; }
[data-skin="timeline"] .tl-item.sev-med::before { background: #c98a1e; }
[data-skin="timeline"] .tl-item.isacked { opacity: .6; }
[data-skin="timeline"] .tl-time { font: 400 12px/1.6 var(--mono); color: var(--soft); }
[data-skin="timeline"] .tl-dot { position: relative; z-index: 1; line-height: 1; padding-top: 2px; background: var(--bg); }
[data-skin="timeline"] .tl-item.sev-crit .tl-dot { color: #f2949b; }
[data-skin="timeline"] .tl-item.sev-high .tl-dot { color: #8fb8e8; }
[data-skin="timeline"] .tl-item.sev-med .tl-dot { color: #e0aa4f; }
[data-skin="timeline"] .tl-item.sev-low .tl-dot { color: #6cc79b; }
[data-skin="timeline"] .tl-body { padding-left: 6px; }
[data-skin="timeline"] .tl-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
[data-skin="timeline"] .tl-title { font-weight: 600; font-size: 14px; }
[data-skin="timeline"] .tl-type { font: 400 11.5px/1 var(--mono); color: var(--soft); }
[data-skin="timeline"] .tl-sub { margin-top: 2px; font-size: 12.5px; color: var(--mid); }
[data-skin="timeline"] .tl-item.isopen .tl-title { color: #fff; }

[data-skin="timeline"] .tl-burst {
  margin-left: 6px; padding: 13px 15px; border: 1px solid #3a2b2b; border-radius: 8px;
  background: rgba(229,72,77,.05);
}
[data-skin="timeline"] .tl-burst.sev-med { border-color: #3b3123; background: rgba(201,138,30,.05); }
[data-skin="timeline"] .tl-burst.sev-high { border-color: #2b3542; background: rgba(127,179,240,.05); }
[data-skin="timeline"] .tl-burst.sev-low { border-color: var(--line); background: rgba(232,223,210,.03); }
[data-skin="timeline"] .tl-burst-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
[data-skin="timeline"] .tl-burst-l { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #f2949b; }
[data-skin="timeline"] .tl-burst.sev-med .tl-burst-l { color: #e0aa4f; }
[data-skin="timeline"] .tl-burst.sev-high .tl-burst-l { color: #8fb8e8; }
[data-skin="timeline"] .tl-burst.sev-low .tl-burst-l { color: var(--mid); }
[data-skin="timeline"] .tl-burst-c { font-size: 12px; color: var(--mid); }
[data-skin="timeline"] .tl-burst-rows { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); display: grid; gap: 7px; }
[data-skin="timeline"] .tl-brow { display: flex; align-items: baseline; gap: 9px; cursor: pointer; }
[data-skin="timeline"] .tl-brow.sev-crit { color: #f2949b; }
[data-skin="timeline"] .tl-brow.sev-high { color: #8fb8e8; }
[data-skin="timeline"] .tl-brow.sev-med { color: #e0aa4f; }
[data-skin="timeline"] .tl-brow.sev-low { color: #6cc79b; }
[data-skin="timeline"] .tl-brow .sev-i { flex: none; align-self: center; }
[data-skin="timeline"] .tl-btype { font: 500 12.5px/1.4 var(--mono); }
[data-skin="timeline"] .tl-btitle { font-size: 12.5px; color: var(--dim); }
[data-skin="timeline"] .tl-brow.isopen .tl-btitle { color: var(--ink); }
[data-skin="timeline"] .count { padding: 18px 24px 24px; color: var(--soft); font-size: 12px; }

[data-skin="timeline"] #dossier { width: 420px; flex: none; background: var(--panel); border-left: 1px solid var(--line); }
[data-skin="timeline"] .dhead { padding: 20px 22px; border-bottom: 1px solid var(--line); }
[data-skin="timeline"] .did { font: 400 11.5px/1 var(--mono); color: var(--soft); }
[data-skin="timeline"] .x { background: transparent; border: 1px solid #3a3532; color: var(--dim); width: 28px; height: 28px; border-radius: 999px; }
[data-skin="timeline"] .dtitle { font-weight: 600; font-size: 20px; line-height: 1.25; margin-top: 12px; text-wrap: pretty; }
[data-skin="timeline"] .dsub { font: 400 12px/1.5 var(--mono); color: var(--soft); margin-top: 6px; }
[data-skin="timeline"] .dbody > section { padding: 18px 22px; border-bottom: 1px solid var(--line); }
[data-skin="timeline"] .lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
[data-skin="timeline"] .prose { margin-top: 8px; color: var(--dim); }
[data-skin="timeline"] .ev {
  margin-top: 8px; font: 400 12px/1.5 var(--mono); color: var(--mid);
  background: #0f0e0d; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px;
}
[data-skin="timeline"] .dgrid > div { padding: 14px 22px; }
[data-skin="timeline"] .dgrid .v { margin-top: 4px; font-weight: 600; }
[data-skin="timeline"] .dfoot { display: flex; gap: 8px; padding: 18px 22px; border-top: 1px solid var(--line); }
[data-skin="timeline"] .dfoot button {
  font: 500 13px/1.2 inherit; background: transparent; color: var(--dim);
  border: 1px solid #3a3532; border-radius: 999px; padding: 10px 14px;
}
[data-skin="timeline"] .dfoot .primary { background: #f2949b; color: #131211; border-color: #f2949b; flex: 1; }
[data-skin="timeline"] .foot { height: 44px; padding: 0 24px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--soft); gap: 20px; }
[data-skin="timeline"] .toast { left: 24px; bottom: 24px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 11px 15px; font-size: 13px; }

/* ---- shared by both Activity Log skins ---- */

.sevchips { display: flex; gap: 6px; flex-wrap: wrap; }
.sevchip {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 12px/1 inherit; padding: 8px 12px; border-radius: 4px;
  border: 1px solid transparent; background: transparent; color: inherit;
}
.sevchip .n { font: 600 11px/1 ui-monospace, Menlo, monospace; opacity: .85; }
.sevchip .sev-i { flex: none; display: block; }
[data-skin="timeline"] .sevchip { border-radius: 999px; }

[data-skin="ledger"] .sevchip { color: #c3cad1; border-color: #333a41; background: #1d2226; }
[data-skin="ledger"] .sevchip.on { background: #2b3237; border-color: #3d464e; color: var(--ink); }
[data-skin="timeline"] .sevchip { color: var(--dim); border-color: #3a3532; }
[data-skin="timeline"] .sevchip.on { background: var(--accent); border-color: var(--accent); color: #131211; }

.sevchip.sev-crit { color: #f2949b; background: rgba(229,72,77,.1); border-color: rgba(229,72,77,.3); }
.sevchip.sev-high { color: #8fb8e8; background: rgba(127,179,240,.1); border-color: rgba(127,179,240,.28); }
.sevchip.sev-med  { color: #e0aa4f; background: rgba(224,160,42,.1); border-color: rgba(224,160,42,.28); }
.sevchip.sev-low  { color: #6cc79b; background: rgba(63,178,127,.08); border-color: rgba(63,178,127,.22); }
.sevchip.sev-crit.on { background: rgba(229,72,77,.24); }
.sevchip.sev-high.on { background: rgba(127,179,240,.24); }
.sevchip.sev-med.on  { background: rgba(224,160,42,.24); }
.sevchip.sev-low.on  { background: rgba(63,178,127,.2); }

/* Incident Mode in each of the two Activity Log skins. Same shape as the
   others: a card with a severity edge, a status chip, and form controls that
   know they are on a dark ground. */
[data-skin="ledger"] .incident-intro { background: var(--panel); border: 1px solid var(--line); border-radius: 5px; }
[data-skin="ledger"] .incident-list { gap: 10px; }
[data-skin="ledger"] .incident-card {
  background: var(--row); border: 1px solid var(--line); border-left: 4px solid #e5484d; border-radius: 5px;
}
[data-skin="ledger"] .incident-card:hover { background: #1c1f21; border-left-color: #e5484d; }
[data-skin="ledger"] .incident-card.expanded { background: #1b2024; }
[data-skin="ledger"] .incident-card.resolved { border-left-color: #3fb27f; }
[data-skin="ledger"] .incident-card h2 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
[data-skin="ledger"] .incident-status { border-radius: 3px; }
[data-skin="ledger"] .incident-status.investigating { background: rgba(127,179,240,.12); border-color: rgba(127,179,240,.35); color: #8fb8e8; }
[data-skin="ledger"] .incident-status.contained { background: rgba(224,160,42,.12); border-color: rgba(224,160,42,.32); color: #e0aa4f; }
[data-skin="ledger"] .incident-status.resolved { background: rgba(63,178,127,.12); border-color: rgba(63,178,127,.3); color: #6cc79b; }
[data-skin="ledger"] .incident-detail { background: #15181a; }
[data-skin="ledger"] .incident-checklist label,
[data-skin="ledger"] .incident-findings { background: #101315; border-color: var(--line); border-radius: 4px; }
[data-skin="ledger"] .incident-progressbar { background: #2a2f34; }
[data-skin="ledger"] .incident-progressbar i { background: #6cc79b; }
[data-skin="ledger"] .incident-record select,
[data-skin="ledger"] .incident-record input,
[data-skin="ledger"] .incident-record textarea {
  width: 100%; background: #101315; border-color: #333a41; border-radius: 4px; color: var(--ink);
}
[data-skin="ledger"] .incident-record .acts button {
  color: var(--dim); background: #1d2226; border: 1px solid #333a41; border-radius: 4px; padding: 10px 12px;
}

[data-skin="timeline"] .incident-intro { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
[data-skin="timeline"] .incident-list { gap: 14px; }
[data-skin="timeline"] .incident-card {
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid #e5484d; border-radius: 10px;
}
[data-skin="timeline"] .incident-card:hover { background: #211f1d; border-left-color: #e5484d; }
[data-skin="timeline"] .incident-card.expanded { background: #1c1a18; }
[data-skin="timeline"] .incident-card.resolved { border-left-color: #3fb27f; }
[data-skin="timeline"] .incident-card h2 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
[data-skin="timeline"] .incident-status { border-radius: 999px; }
[data-skin="timeline"] .incident-status.investigating { background: rgba(127,179,240,.12); border-color: rgba(127,179,240,.32); color: #8fb8e8; }
[data-skin="timeline"] .incident-status.contained { background: rgba(201,138,30,.14); border-color: rgba(201,138,30,.34); color: #e0aa4f; }
[data-skin="timeline"] .incident-status.resolved { background: rgba(63,178,127,.12); border-color: rgba(63,178,127,.3); color: #6cc79b; }
[data-skin="timeline"] .incident-detail { background: var(--panel); }
[data-skin="timeline"] .incident-checklist label,
[data-skin="timeline"] .incident-findings { background: #0f0e0d; border-color: var(--line); border-radius: 8px; }
[data-skin="timeline"] .incident-progressbar { background: #2a2724; border-radius: 999px; }
[data-skin="timeline"] .incident-progressbar i { background: #6cc79b; }
[data-skin="timeline"] .incident-record select,
[data-skin="timeline"] .incident-record input,
[data-skin="timeline"] .incident-record textarea {
  width: 100%; background: #0f0e0d; border-color: var(--line); border-radius: 8px; color: var(--ink);
}
[data-skin="timeline"] .incident-record .acts button {
  color: var(--dim); background: transparent; border: 1px solid #3a3532; border-radius: 999px; padding: 10px 14px;
}

/* The severity pill in the dossier header. Without a radius and some padding
   the translucent fill reads as selected text rather than a badge. */
[data-skin="ledger"] .pill { border-radius: 4px; padding: 3px 8px; font-size: 11px; font-weight: 600; }
[data-skin="timeline"] .pill { border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 600; }

.sev-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.sev-chip .sev-i { flex: none; display: block; }
.sev-chip.sev-crit { color: #f2949b; }
.sev-chip.sev-high { color: #8fb8e8; }
.sev-chip.sev-med  { color: #e0aa4f; }
.sev-chip.sev-low  { color: #6cc79b; }

/* The risk score and its reasons. Presented as a working out rather than a
   verdict: the factors table is the feature, the number is its summary. */
.risk { margin-top: 8px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 4px; }
.risk-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.risk-n { font-size: 24px; font-weight: 700; line-height: 1; }
.risk-n.sev-crit { color: #ec3013; }
.risk-n.sev-high { color: #7fb3f0; }
.risk-n.sev-med  { color: #e0aa4f; }
.risk-n.sev-low  { color: #6cc79b; }
.risk-of { font-size: 12px; color: var(--soft); }
.risk-diff { font-size: 12px; color: var(--soft); margin-left: auto; }
.risk-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.risk-t td { padding: 4px 10px 4px 0; border: 0; vertical-align: top; }
.risk-l { color: var(--soft); white-space: nowrap; width: 1%; }
.risk-e { white-space: nowrap; width: 1%; font-family: ui-monospace, Menlo, monospace; color: var(--soft); }
.risk-e.up { color: #e0aa4f; }
.risk-e.down { color: #6cc79b; }
.risk-w { color: var(--dim); }

/* The score beside the band in a row. Small: the band is what you scan for,
   the number is what you check when two findings share a band. */
.risk-inline { margin-left: 7px; font-size: 11px; font-family: ui-monospace, Menlo, monospace; color: var(--soft); }

/* The mute offer, under a finding's detail. Quiet: it is an aside about how
   you want to work, not an action on the finding. */
.mutebar { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 12.5px; }
.mutebar span { color: var(--soft); }

/* Controls that default to a light ground have to be told about a dark one. */
[data-skin="ledger"] .triage textarea.note {
  background: #101315; border-color: #333a41; color: var(--ink);
}
[data-skin="timeline"] .triage textarea.note {
  background: #0f0e0d; border-color: var(--line); color: var(--ink); border-radius: 6px;
}
[data-skin="ledger"] .triage .snoozed, [data-skin="timeline"] .triage .snoozed { color: #e0aa4f; }
[data-skin="ledger"] .advisory { background: rgba(255,255,255,.03); border-left-color: var(--accent); }
[data-skin="timeline"] .advisory { background: rgba(232,223,210,.04); border-left-color: #f2949b; }
[data-skin="ledger"] .resolved-strip, [data-skin="timeline"] .resolved-strip {
  background: rgba(63,178,127,.07); border-bottom: 1px solid var(--line); color: var(--dim);
}
[data-skin="ledger"] .resolved-strip b, [data-skin="timeline"] .resolved-strip b { color: #6cc79b; }
[data-skin="ledger"] .silence-strip, [data-skin="timeline"] .silence-strip {
  background: rgba(229,72,77,.09); border-bottom: 1px solid var(--line); color: var(--dim);
}
[data-skin="ledger"] .silence-strip b, [data-skin="timeline"] .silence-strip b { color: #f2949b; }
[data-skin="ledger"] .sub.warn, [data-skin="timeline"] .sub.warn { color: #e0aa4f; }
[data-skin="ledger"] .gapintro, [data-skin="timeline"] .gapintro { padding: 14px 22px; }
[data-skin="ledger"] .gapgroup, [data-skin="timeline"] .gapgroup { padding: 18px 22px 10px; }
/* The contact badges were only ever styled for the light skins and for
   Nocturne; on these two dark grounds they were light chips with light text. */
[data-skin="ledger"] .dot.live, [data-skin="timeline"] .dot.live {
  background: #14301f; border-color: #2f7a4e; color: #6fd39b;
}
[data-skin="ledger"] .dot.quiet, [data-skin="timeline"] .dot.quiet {
  background: #33280f; border-color: #a07c2c; color: #e0b45a;
}
[data-skin="ledger"] .dot.silent, [data-skin="timeline"] .dot.silent {
  background: #3a1611; border-color: #a3341f; color: #ff8f78;
}
[data-skin="ledger"] .dot.never, [data-skin="timeline"] .dot.never {
  background: #241f38; border-color: #6357a0; color: #b5abfc;
}
[data-skin="ledger"] .dot.legacy, [data-skin="timeline"] .dot.legacy {
  background: #1b2735; border-color: #4a6b8c; color: #9dc3e6;
}
[data-skin="ledger"] .empty, [data-skin="timeline"] .empty {
  background: var(--panel); border-color: var(--line);
}
[data-skin="ledger"] .empty .enrol input, [data-skin="timeline"] .empty .enrol input { background: var(--bg); }
[data-skin="ledger"] .pastebox code, [data-skin="timeline"] .pastebox code { background: var(--bg); color: var(--ink); }
[data-skin="ledger"] .tiles, [data-skin="timeline"] .tiles { background: var(--line); }
[data-skin="ledger"] .tile, [data-skin="timeline"] .tile { background: var(--panel); }
[data-skin="ledger"] .tile.hot .tile-n, [data-skin="timeline"] .tile.hot .tile-n { color: #f2949b; }
[data-skin="ledger"] .bad, [data-skin="timeline"] .bad { color: #f2949b; }

/* ============================== NOCTURNE (1A) ============================= */
/* The comp's third direction, built from its own design-system tokens rather
   than from a dark palette invented here: ground #161826, surface #232532,
   text #e9e9ed, the blurple accent #9184d9, dividers as text at 16%, Inter,
   and radii 4/8/14 — the only skin here with rounded corners.
   Its signature is rules that fade out at both ends over 48px, so a table has
   no hard edges; box outlines and short marks stay solid. */

:root[data-skin="nocturne"] {
  color-scheme: dark;
  --bg: #161826;
  --surface: #232532;
  --line: rgba(233,233,237,.16);
  --hair: rgba(233,233,237,.08);
  --ink: #e9e9ed;
  --dim: #b2b6ca;
  --soft: #9397ab;
  --mid: #b2b6ca;
  --accent: #9184d9;
  --fade: linear-gradient(to right, transparent, var(--line) 48px,
    var(--line) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
[data-skin="nocturne"] body { background: var(--bg); color: var(--ink); font: 400 15px/1.55 "Inter", system-ui, sans-serif; }

[data-skin="nocturne"] .chrome { height: 58px; padding: 0 20px; background: var(--fade); }
[data-skin="nocturne"] .brand { font-weight: 600; font-size: 18px; letter-spacing: -.015em; }
[data-skin="nocturne"] .rule { width: 1px; height: 18px; background: var(--line); }
[data-skin="nocturne"] .stat { font-size: 13px; color: var(--soft); }
[data-skin="nocturne"] .stat.crit b { color: #ff6b52; }
[data-skin="nocturne"] .nav { display: flex; gap: 18px; font-size: 14px; }
[data-skin="nocturne"] .nav a:hover { color: var(--accent); }
[data-skin="nocturne"] .btn {
  font: 500 14px/1.2 "Inter", system-ui; color: var(--ink); background: transparent;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 13px;
}
[data-skin="nocturne"] .btn:hover { background: rgba(233,233,237,.07); }
[data-skin="nocturne"] .avatar {
  width: 30px; height: 30px; border-radius: 50%; background: #3f424d; color: var(--dim);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500;
}

[data-skin="nocturne"] .toolbar { padding: 12px 20px; background: var(--fade); }
[data-skin="nocturne"] .seg, [data-skin="nocturne"] .skinpick {
  display: inline-flex; overflow: hidden; border: 1px solid var(--line); border-radius: 8px;
}
[data-skin="nocturne"] .seg button, [data-skin="nocturne"] .skinpick button {
  font: 500 13px/1 "Inter", system-ui; border: 0; padding: 8px 13px;
  background: transparent; color: var(--ink); border-radius: 0;
}
[data-skin="nocturne"] .seg button + button,
[data-skin="nocturne"] .skinpick button + button { border-left: 1px solid var(--line); }
[data-skin="nocturne"] .seg button:hover, [data-skin="nocturne"] .skinpick button:hover { background: rgba(233,233,237,.07); }
[data-skin="nocturne"] .seg button.on, [data-skin="nocturne"] .skinpick button.on {
  color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
}
[data-skin="nocturne"] select, [data-skin="nocturne"] input {
  appearance: none; background: var(--surface); color: var(--ink);
  font: 400 14px/1 "Inter", system-ui; border: 1px solid var(--line); border-radius: 8px;
}
[data-skin="nocturne"] select { padding: 8px 22px 8px 10px; }
[data-skin="nocturne"] input { padding: 8px 10px; width: 170px; }
[data-skin="nocturne"] input::placeholder { color: var(--soft); }
[data-skin="nocturne"] select:focus-visible, [data-skin="nocturne"] input:focus-visible {
  border-color: var(--accent); outline: none;
}

/* Row rules are painted on the row, not the cell, so one fade spans the row. */
[data-skin="nocturne"] th {
  font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--soft); padding: 12px 16px; border: 0;
}
[data-skin="nocturne"] thead tr {
  background-image: linear-gradient(to right, transparent, var(--line) 48px,
    var(--line) calc(100% - 48px), transparent);
  background-repeat: no-repeat; background-position: bottom; background-size: 100% 1px;
}
[data-skin="nocturne"] td { padding: 13px 16px; border: 0; vertical-align: top; }
/* The row rule is a background-image so the engine's inline row colour
   (background-color) cannot wipe it. */
[data-skin="nocturne"] tbody tr.alertrow {
  background-image: linear-gradient(to right, transparent, var(--line) 48px,
    var(--line) calc(100% - 48px), transparent);
  background-repeat: no-repeat; background-position: bottom; background-size: 100% 1px;
}
[data-skin="nocturne"] tbody tr.alertrow:hover { background-color: rgba(233,233,237,.04); }
[data-skin="nocturne"] .grouphead { display: flex; align-items: baseline; gap: 12px; padding: 16px 16px 8px; }
[data-skin="nocturne"] .glabel { font-weight: 600; font-size: 18px; letter-spacing: -.015em; }
[data-skin="nocturne"] .gcount { font-size: 13px; color: var(--soft); }
[data-skin="nocturne"] .pill { font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 6px; }
[data-skin="nocturne"] .t { font-weight: 500; line-height: 1.35; }
[data-skin="nocturne"] .s { font-size: 13px; color: var(--soft); margin-top: 3px; }
[data-skin="nocturne"] .dim { color: var(--dim); }
[data-skin="nocturne"] .count { padding: 16px; color: var(--soft); font-size: 13px; }
[data-skin="nocturne"] .ghost {
  font: 500 12px/1 "Inter", system-ui; background: transparent; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 6px; padding: 6px 10px;
}
[data-skin="nocturne"] .ghost:hover { background: rgba(145,132,217,.12); }

[data-skin="nocturne"] .sitegrid { grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 18px 20px; }
[data-skin="nocturne"] .sitecard {
  padding: 16px; background: var(--surface); border-radius: 8px; box-shadow: 0 0 0 1px #3f424d;
}
[data-skin="nocturne"] .domain { font-weight: 600; font-size: 16px; }
[data-skin="nocturne"] .sitecard .s { margin-top: 4px; }
[data-skin="nocturne"] .stats { gap: 20px; margin-top: 14px; }
[data-skin="nocturne"] .stats .lbl { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
[data-skin="nocturne"] .stats .n { font-weight: 600; font-size: 18px; margin-top: 3px; }
[data-skin="nocturne"] .stats .n.hot { color: var(--accent); }

/* Nocturne takes the split pane, like Modernist: a dark ground reads better
   as a panel beside the list than as a row that swells open inside it. */
[data-skin="nocturne"] #dossier {
  width: 452px; flex: none; background: var(--surface); box-shadow: -1px 0 0 var(--line);
}
[data-skin="nocturne"] .dhead { padding: 20px; background: var(--fade); }
[data-skin="nocturne"] .did { font-size: 12px; letter-spacing: .06em; color: var(--soft); }
[data-skin="nocturne"] .x {
  background: transparent; border: 1px solid var(--line); color: var(--ink);
  width: 28px; height: 28px; border-radius: 8px; font-size: 14px; line-height: 1;
}
[data-skin="nocturne"] .dtitle { font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -.015em; margin-top: 12px; text-wrap: pretty; }
[data-skin="nocturne"] .dsub { font-size: 13px; color: var(--soft); margin-top: 6px; }
[data-skin="nocturne"] .dbody > section { padding: 20px; background: var(--fade); }
[data-skin="nocturne"] .lbl { font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--soft); }
[data-skin="nocturne"] .prose { margin-top: 8px; line-height: 1.55; color: var(--dim); }
[data-skin="nocturne"] .ev { margin-top: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 11px; font-size: 13px; }
[data-skin="nocturne"] .dgrid > div { padding: 16px 20px; }
[data-skin="nocturne"] .dgrid .v { margin-top: 4px; font-weight: 500; }
[data-skin="nocturne"] .dfoot { display: flex; gap: 8px; padding: 20px; box-shadow: 0 -1px 0 var(--line); }
[data-skin="nocturne"] .dfoot button {
  font: 500 14px/1.2 "Inter", system-ui; background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px;
}
[data-skin="nocturne"] .dfoot .primary { color: var(--accent); border-color: var(--accent); }
[data-skin="nocturne"] .dfoot .primary:hover { background: rgba(145,132,217,.12); }
[data-skin="nocturne"] .dfoot .muted { color: var(--soft); }

[data-skin="nocturne"] .foot { height: 44px; padding: 0 20px; box-shadow: 0 -1px 0 var(--line); font-size: 13px; color: var(--soft); gap: 20px; }
[data-skin="nocturne"] .toast { left: 20px; bottom: 20px; background: var(--surface); color: var(--ink); border-radius: 8px; box-shadow: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,.55); padding: 11px 15px; font-size: 14px; }

/* The panels added since the comp, in Nocturne's own terms. */
[data-skin="nocturne"] .empty { background: var(--surface); border: 0; box-shadow: 0 0 0 1px #3f424d; border-radius: 14px; }
[data-skin="nocturne"] .empty p { color: var(--dim); }
[data-skin="nocturne"] .empty .enrol input { background: var(--bg); }
[data-skin="nocturne"] .pastebox code { background: var(--bg); color: var(--ink); }
[data-skin="nocturne"] .pastebox code.secret { background: #2b2741; border-color: var(--accent); }
[data-skin="nocturne"] .tiles { background: var(--line); }
[data-skin="nocturne"] .tile { background: var(--surface); }
[data-skin="nocturne"] .tile:hover { background: #2b2d3c; }
[data-skin="nocturne"] .tile.on { background: #2b2741; box-shadow: inset 0 -2px 0 var(--accent); }
[data-skin="nocturne"] .tile.hot .tile-n { color: #ff6b52; }
[data-skin="nocturne"] .resolved-strip { background: #1b2a24; color: var(--dim); border-bottom: 0; }
[data-skin="nocturne"] .resolved-strip b { color: #6fd39b; }
[data-skin="nocturne"] .silence-strip { background: #2c1a18; color: var(--dim); border-bottom: 0; }
[data-skin="nocturne"] .silence-strip b { color: #ff8f78; }
[data-skin="nocturne"] .sub.warn { color: #e0b45a; }
[data-skin="nocturne"] .gapintro, [data-skin="nocturne"] .gapgroup { padding-left: 16px; padding-right: 16px; }
[data-skin="nocturne"] .advisory { background: rgba(233,233,237,.04); border-left-color: var(--accent); }
[data-skin="nocturne"] .triage textarea.note { background: var(--bg); }
[data-skin="nocturne"] .dot.live { background: #14301f; border-color: #2f7a4e; color: #6fd39b; }
[data-skin="nocturne"] .dot.quiet { background: #33280f; border-color: #a07c2c; color: #e0b45a; }
[data-skin="nocturne"] .dot.silent { background: #3a1611; border-color: #a3341f; color: #ff8f78; }
[data-skin="nocturne"] .dot.never { background: #241f38; border-color: #6357a0; color: #b5abfc; }
[data-skin="nocturne"] .dot.legacy { background: #1b2735; border-color: #4a6b8c; color: #9dc3e6; }
[data-skin="nocturne"] .bad { color: #ff8f78; }
[data-skin="nocturne"] .steps li.done .mark { color: #6fd39b; }

/* Incident Mode stays inside Nocturne's dark surfaces and rounded geometry. */
[data-skin="nocturne"] .incident-intro {
  background: var(--surface); border: 0; border-radius: 8px; box-shadow: 0 0 0 1px #3f424d;
}
[data-skin="nocturne"] .incident-list { gap: 14px; }
[data-skin="nocturne"] .incident-card {
  background: var(--surface); border: 0; border-left: 4px solid #ec3013;
  border-radius: 8px; box-shadow: 0 0 0 1px #3f424d;
}
[data-skin="nocturne"] .incident-card:hover { background: #2b2d3c; border-left-color: #ec3013; }
[data-skin="nocturne"] .incident-card.expanded {
  background: var(--surface); box-shadow: 0 0 0 1px var(--accent), 0 8px 28px rgba(0,0,0,.28);
}
[data-skin="nocturne"] .incident-card.resolved { border-left-color: #2f7a4e; }
[data-skin="nocturne"] .incident-card h2 {
  font: 600 19px/1.25 "Inter", system-ui, sans-serif; letter-spacing: -.015em;
}
[data-skin="nocturne"] .incident-status.investigating { background: #1b2735; border-color: #4a6b8c; color: #9dc3e6; }
[data-skin="nocturne"] .incident-status.contained { background: #33280f; border-color: #a07c2c; color: #e0b45a; }
[data-skin="nocturne"] .incident-status.resolved { background: #14301f; border-color: #2f7a4e; color: #6fd39b; }
[data-skin="nocturne"] .incident-detail { background: var(--surface); }
[data-skin="nocturne"] .incident-checklist label,
[data-skin="nocturne"] .incident-findings {
  background: var(--bg); border-color: var(--line); border-radius: 6px;
}
[data-skin="nocturne"] .incident-progressbar { background: #3f424d; border-radius: 4px; }
[data-skin="nocturne"] .incident-progressbar i { background: #6fd39b; }
[data-skin="nocturne"] .source-sev.crit { color: #ff8f78; }
[data-skin="nocturne"] .incident-record select,
[data-skin="nocturne"] .incident-record input,
[data-skin="nocturne"] .incident-record textarea {
  width: 100%; background: var(--bg); border-color: var(--line); border-radius: 8px;
  color: var(--ink); font: 400 14px/1.45 "Inter", system-ui, sans-serif;
}
[data-skin="nocturne"] .incident-record textarea::placeholder,
[data-skin="nocturne"] .incident-record input::placeholder { color: var(--soft); }
[data-skin="nocturne"] .incident-record .acts button {
  font: 500 14px/1.2 "Inter", system-ui, sans-serif; padding: 10px 14px;
  color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 8px;
}
[data-skin="nocturne"] .incident-record .acts .primary { color: var(--accent); border-color: var(--accent); }
[data-skin="nocturne"] .incident-record .acts .primary:hover { background: rgba(145,132,217,.12); }
[data-skin="nocturne"] .incident-dossier { padding: 0; }
[data-skin="nocturne"] .incident-dossier .incident-card {
  border-radius: 0; box-shadow: none; border-left-color: #ec3013;
}
[data-skin="nocturne"] .incident-dossier .incident-card.resolved { border-left-color: #2f7a4e; }

/* ================================ narrow ================================= */

/* The comp is a 1440px artboard; past that, add columns rather than
   stretching a handful of cards across the whole display. */
@media (min-width: 1700px) {
  [data-skin="ledger"] .sitegrid,
  [data-skin="timeline"] .sitegrid { grid-template-columns: repeat(4, 1fr); }
  [data-skin="industry"] .sitegrid { grid-template-columns: repeat(4, 1fr); }
  [data-skin="modernist"] .sitegrid { grid-template-columns: repeat(3, 1fr); }
  [data-skin="nocturne"] .sitegrid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 2300px) {
  [data-skin="industry"] .sitegrid { grid-template-columns: repeat(5, 1fr); }
  [data-skin="modernist"] .sitegrid { grid-template-columns: repeat(4, 1fr); }
  [data-skin="nocturne"] .sitegrid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 1180px) {
  [data-skin="modernist"] #dossier { width: 380px; }
  [data-skin="nocturne"] #dossier { width: 380px; }
  [data-skin="industry"] .sitegrid { grid-template-columns: repeat(2, 1fr); }
  [data-skin="industry"] .detail { grid-template-columns: 1fr; gap: 17px; }
}

@media (max-width: 900px) {
  .chrome { height: auto !important; flex-wrap: wrap; padding-top: 10px !important; padding-bottom: 10px !important; }
  .chrome .rule, .chrome .nav { display: none; }
  .main .scroll { overflow-x: auto; }
  table { min-width: 860px; }
  .sitegrid { grid-template-columns: 1fr !important; }
  [data-skin="modernist"] .sitecard { border-right: 0; }
  /* The split pane has nowhere to split — pin the dossier over the list. */
  [data-skin="modernist"] .main.split #dossier.show {
    position: fixed; inset: 0; width: auto; z-index: 20;
    border-left: 0; box-shadow: 0 0 0 100vmax rgba(32,30,29,.35);
  }
  [data-skin="nocturne"] .main.split #dossier.show {
    position: fixed; inset: 0; width: auto; z-index: 20;
    box-shadow: 0 0 0 100vmax rgba(10,11,18,.6);
  }
}

/* ============================ demo intro band ============================ */
/* Only on /demo: a crawlable, human-readable explanation above the console,
   and the console framed as a plate rather than filling the whole viewport. */

[data-page="demo"] body { overflow: auto; }
[data-page="demo"] #app {
  height: min(820px, calc(100dvh - 40px));
  margin: 0 auto 40px;
  max-width: 1400px;
  border: 1px solid var(--line, rgba(29,31,32,.16));
}

.demo-intro { border-bottom: 1px solid rgba(29,31,32,.16); background: #f2f2f3; color: #1d1f20; }
.demo-intro-wrap {
  max-width: 1400px; margin: 0 auto; padding: 22px 24px;
  display: flex; align-items: flex-start; gap: 24px;
}
.demo-brand {
  font: 600 20px/1 "Barlow Condensed", system-ui; letter-spacing: .07em;
  text-transform: uppercase; color: #1d1f20; text-decoration: none; flex: none; padding-top: 2px;
}
.demo-copy { flex: 1; min-width: 0; }
.demo-intro h1 {
  font: 600 clamp(30px, 3vw, 40px)/1 "Barlow Condensed", system-ui;
  letter-spacing: .01em; text-transform: none; margin: 0;
}
.demo-intro p {
  margin: 8px 0 0; font: 400 15px/1.55 "Barlow", system-ui;
  color: #2b2b2d; max-width: 82ch; text-wrap: pretty;
}
.demo-back {
  flex: none; font: 600 12px/1 "Barlow Condensed", system-ui; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; color: #1d1f20;
  border: 1px solid rgba(29,31,32,.16); border-radius: 2px; padding: 10px 14px;
}
.demo-back:hover { border-color: #1d1f20; text-decoration: none; }
.demo-primary { background: #2c455d; border-color: #2c455d; color: #f2f2f3; }
.demo-primary:hover { background: #1d2f40; border-color: #1d2f40; }

@media (max-width: 860px) {
  .demo-intro-wrap { flex-direction: column; gap: 12px; }
  [data-page="demo"] #app { height: min(720px, calc(100dvh - 20px)); margin-bottom: 20px; }
}
.demo-links { flex: none; display: flex; flex-wrap: wrap; gap: 8px; max-width: 290px; }
.rowerr { margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: #c0392b; max-width: 260px; }
/* the wordmark is a link now; keep it looking like the wordmark */
a.brand { text-decoration: none; color: inherit; }
a.brand:hover { text-decoration: underline; }

/* The ignored view is deliberately quieter than the queue: it is context,
   not outstanding work, so it never uses the alert palette. */
[data-skin="industry"] .ignored-note {
  margin: 13px 2px 0; padding: 12px 14px; border-left: 3px solid var(--soft);
  background: rgba(0,0,0,.03); color: var(--soft); font-size: 13px; line-height: 1.6;
}
[data-skin="industry"] .ignored-note strong { color: var(--ink); }
[data-skin="modernist"] .ignored-note {
  margin: 16px; padding: 13px 15px; border-left: 3px solid var(--soft);
  background: rgba(0,0,0,.03); color: var(--soft); font-size: 13px; line-height: 1.6;
}
[data-skin="modernist"] .ignored-note strong { color: var(--ink); }