:root {
  --bg: #0b1220; --panel: #121b2e; --panel2: #18233a; --border: #26334f;
  --text: #e6ecf7; --muted: #93a1bd; --accent: #38bdf8; --accent-ink: #04202e;
  --crit: #ef4444; --high: #f97316; --med: #eab308; --low: #22c55e; --kev: #d946ef; --warn: #f59e0b;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 10px;
}
:root[data-theme="light"] {
  --bg: #f3f6fb; --panel: #ffffff; --panel2: #f0f4fa; --border: #d5ddeb;
  --text: #12203a; --muted: #5b6b88; --accent: #0369a1; --accent-ink: #ffffff;
}
* { box-sizing: border-box; }
html { color-scheme: dark light; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; }
h1 { font-size: 1.4rem; } h2 { font-size: 1.05rem; } h3 { font-size: .95rem; }
h2.flat { margin: 0; }
.muted { color: var(--muted); } .small { font-size: .82rem; } .err { color: var(--crit); }
code, pre, textarea.mono, .mono { font-family: var(--mono); }
code { background: var(--panel2); padding: .05rem .35rem; border-radius: 5px; font-size: .85em; word-break: break-all; }

/* App chrome, laid out like Microsoft Defender: a slim header across the top, a vertical nav down the left that collapses to icons
   (desktop) or slides in as a drawer (narrow screens), and the page content to its right. */
:root { --topbar-h: 52px; --side-w: 220px; --side-w-min: 56px; }
.topbar { position: sticky; top: 0; z-index: 30; height: var(--topbar-h); display: flex; gap: 1rem; align-items: center; padding: 0 1rem 0 .5rem; background: var(--panel); border-bottom: 1px solid var(--border); }
.brand { font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.logo { color: var(--accent); }
.top-actions { display: flex; gap: .5rem; align-items: center; margin-left: auto; min-width: 0; }
.top-actions .btn { white-space: nowrap; }
#updated { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick { min-width: 240px; flex: 0 1 420px; }
.ico { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: none; border: 0; border-radius: 8px; color: var(--text); cursor: pointer; }
.nav-toggle:hover { background: var(--panel2); }

.shell { display: flex; align-items: flex-start; }
.sidebar { position: sticky; top: var(--topbar-h); z-index: 20; flex: 0 0 var(--side-w); width: var(--side-w); height: calc(100vh - var(--topbar-h)); overflow-y: auto; overflow-x: hidden; background: var(--panel); border-right: 1px solid var(--border); padding: .5rem 0; transition: width .15s ease, flex-basis .15s ease; }
.sidebar { display: flex; flex-direction: column; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1 0 auto; }
/* About sits at the very bottom of the menu, below a divider (it moves up under the other links if the menu is too short to fit). */
.sidebar nav a.nav-bottom { margin-top: auto; border-top: 1px solid var(--border); height: 48px; }
.sidebar nav a { position: relative; display: flex; align-items: center; gap: .85rem; height: 40px; padding: 0 1.1rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.sidebar nav a:hover { text-decoration: none; background: var(--panel2); color: var(--text); }
.sidebar nav a.active { background: var(--panel2); color: var(--text); }
.sidebar nav a.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.sidebar nav a.active .ico { color: var(--accent); }
body.nav-collapsed .sidebar { flex-basis: var(--side-w-min); width: var(--side-w-min); }
body.nav-collapsed .sidebar .lbl { display: none; }
.content { flex: 1; min-width: 0; }
.scrim { position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 15; background: rgb(0 0 0 / .45); }
.scrim[hidden] { display: none; }

main { max-width: 1240px; margin: 0 auto; padding: 1rem; outline: none; }
.foot { max-width: 1240px; margin: 0 auto; padding: 1rem 1rem 2rem; border-top: 1px solid var(--border); }
/* The ATT&CK matrix has 14+ columns, so its tab uses the whole width beside the sidebar instead of the 1240px reading column. */
body[data-wide="1"] main, body[data-wide="1"] .foot { max-width: none; padding-left: 1.5rem; padding-right: 1.5rem; }

.banner { padding: .55rem 1rem; background: #4a3205; color: #fde68a; border-bottom: 1px solid #7a5410; font-size: .9rem; }
:root[data-theme="light"] .banner { background: #fff3cd; color: #664d03; border-color: #ffe08a; }
.live { display: flex; gap: .6rem; align-items: center; padding: .5rem 1rem; background: var(--panel2); border-bottom: 1px solid var(--border); font-size: .9rem; }
.live[hidden] { display: none; }
.live #live-msg { flex: 1; }
.live.ok { border-left: 4px solid var(--low); } .live.err { border-left: 4px solid var(--crit); }
body[data-busy="1"] .js-task { opacity: .55; pointer-events: none; }

.btn { background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: .35rem .7rem; font: inherit; font-weight: 600; cursor: pointer; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.danger:hover { border-color: var(--crit); color: var(--crit); }
.btn.sm { padding: .15rem .5rem; font-size: .78rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* News topic buttons */
.topic-picker { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: .75rem 0 .25rem; }
.topic-label { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: .3rem .85rem; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.chip:hover { border-color: var(--accent); }
.chip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.stats { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1rem; }
.stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem 1rem; }
.stat .n { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.stat .l { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.stat.crit .n { color: var(--crit); } .stat.high .n { color: var(--high); } .stat.kev .n { color: var(--kev); }
a.stat { color: inherit; display: block; } a.stat:hover { text-decoration: none; border-color: var(--accent); }

.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; min-width: 0; margin-bottom: .75rem; }
.grid > .card { margin-bottom: 0; }
.card > h2 { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.card > h2 a { font-size: .8rem; font-weight: 500; }

.toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin-bottom: .75rem; }
.toolbar label { display: flex; flex-direction: column; gap: .15rem; font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
/* The small capitals are for the label text only: the search box and dropdowns inside it use the normal size, like every other field. */
.toolbar label > input, .toolbar label > select { font-size: 15px; text-transform: none; letter-spacing: normal; color: var(--text); }
label.check { display: flex; flex-direction: row; align-items: center; gap: .4rem; text-transform: none; font-size: .9rem; color: var(--text); }
input[type="text"], input[type="search"], select, textarea { background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: .4rem .6rem; font: inherit; }
input[type="search"], input[type="text"] { min-width: 220px; }
textarea { width: 100%; resize: vertical; }
/* A select is as wide as its longest option; on a phone that can be wider than the screen. Let it (and its label) shrink instead. */
select { max-width: 100%; }
.row > label, .toolbar > label { min-width: 0; max-width: 100%; } textarea.mono { font-size: .85rem; }

.list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }
details.item { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); content-visibility: auto; contain-intrinsic-size: auto 72px; }
details.item[open] { border-color: var(--accent); }
details.item > summary { list-style: none; cursor: pointer; padding: .6rem .8rem; }
details.item > summary::-webkit-details-marker { display: none; }
details.item > summary:focus-visible { outline-offset: -3px; }
.line { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.id { font-family: var(--mono); font-weight: 700; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); margin-top: .2rem; font-size: .9rem; }
details[open] .clamp { display: none; }
.body { padding: 0 .8rem .8rem; border-top: 1px dashed var(--border); }
.body p { margin: .6rem 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .9rem; font-size: .88rem; margin: .5rem 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; min-width: 0; word-break: break-word; }
.actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: .3rem 0; border-bottom: 1px solid var(--border); }
ul.plain li:last-child { border-bottom: 0; }

.badge { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; border: 1px solid transparent; letter-spacing: .02em; white-space: nowrap; }
.badge.critical { background: color-mix(in srgb, var(--crit) 22%, transparent); color: var(--crit); border-color: var(--crit); }
.badge.high { background: color-mix(in srgb, var(--high) 22%, transparent); color: var(--high); border-color: var(--high); }
.badge.medium { background: color-mix(in srgb, var(--med) 22%, transparent); color: var(--med); border-color: var(--med); }
.badge.low { background: color-mix(in srgb, var(--low) 22%, transparent); color: var(--low); border-color: var(--low); }
.badge.unrated, .badge.epss { color: var(--muted); border-color: var(--border); }
.badge.kev { background: color-mix(in srgb, var(--kev) 22%, transparent); color: var(--kev); border-color: var(--kev); }
.badge.epss-hi { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); border-color: var(--warn); }
.badge.watch { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); border-color: var(--accent); }
.badge.ransom { background: color-mix(in srgb, var(--crit) 22%, transparent); color: var(--crit); border-color: var(--crit); }

.news-item { padding: .55rem 0; border-bottom: 1px solid var(--border); }
.news-item:last-child { border-bottom: 0; }
.news-item .t { font-weight: 600; } .news-item .s { color: var(--muted); font-size: .88rem; margin-top: .15rem; }

.tpl-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; align-items: start; }
/* The Templates and Playbooks sidebars are <nav> elements; keep them a plain vertical list. */
.tpl-list { display: block; }
.tpl-list h3 { margin: .9rem 0 .3rem; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.tpl-list a { display: block; padding: .35rem .6rem; border-radius: 8px; color: var(--text); }
.tpl-list a:hover { background: var(--panel2); text-decoration: none; }
.tpl-list a.active { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.tpl-editor { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 1rem; }
.fields { display: flex; flex-direction: column; gap: .5rem; max-height: 75vh; overflow: auto; padding-right: .3rem; }
.fields label { font-size: .78rem; color: var(--muted); display: flex; flex-direction: column; gap: .15rem; }
pre.out { background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: .8rem; white-space: pre-wrap; word-break: break-word; font-size: .85rem; max-height: 75vh; overflow: auto; margin: 0; }

table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; }
.ioc-group { margin-top: .75rem; }
.ioc-group li { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
/* URL analyser: findings read as sentences (badge then text), unwrapping steps as plain lines, and a divider between links. */
.ioc-group li.url-flag, .url-result ol li { display: block; }
/* About page */
.about { max-width: 1000px; }
.about-lead { font-size: 1.02rem; color: var(--muted); margin: 0 0 1rem; max-width: 75ch; }
.about-highlight { border-color: var(--accent); }
ul.about-points { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .55rem; }
ul.about-points li { padding-left: 1.6rem; position: relative; }
ul.about-points li::before { content: "✓"; position: absolute; left: .2rem; color: var(--low); font-weight: 800; }
.about .card ul.small li { margin: .3rem 0; }
.about td a, .about th a { white-space: nowrap; }
.foot .credit { text-align: center; margin: 1.25rem 0 0; font-weight: 600; letter-spacing: .02em; }
/* Timeline table: scrolls inside the card on narrow screens instead of widening the page; times never wrap mid-value. */
.tl-wrap { overflow-x: auto; margin: .5rem 0; }
.tl-wrap td:first-child, .tl-wrap td:nth-child(2) { white-space: nowrap; }
.tl-wrap td:nth-child(3) { min-width: 14rem; }
.url-result + .url-result { border-top: 1px solid var(--border); padding-top: .75rem; margin-top: 1rem; }
.empty { padding: 1.2rem; text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: var(--radius); }
.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .5rem 0; }
.pre-wrap { white-space: pre-wrap; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }

.tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin: .5rem 0 1rem; border-bottom: 1px solid var(--border); }
.tab { padding: .4rem .8rem; border-radius: 8px 8px 0 0; color: var(--muted); font-weight: 600; }
.tab:hover { text-decoration: none; background: var(--panel2); color: var(--text); }
.tab.active { background: var(--panel); color: var(--accent); border: 1px solid var(--border); border-bottom-color: var(--panel); margin-bottom: -1px; }

/* ATT&CK matrix. The column width and gap are defined once (here) and used by the matrix AND by the scroll bar above it, so the two
   always scroll the same distance. The matrix's own bottom scroll bar is hidden: the bar above the tactic headings replaces it. */
.mx-wrap { --mx-col: 190px; --mx-gap: .5rem; }
.mx-top { display: flex; gap: var(--mx-gap); overflow-x: auto; overflow-y: hidden; margin-bottom: .35rem; }
.mx-top > span { flex: 1 0 var(--mx-col); min-width: var(--mx-col); height: 1px; }
/* The strip has no content of its own, so with macOS overlay scroll bars it was invisible until hovered (and stayed hidden after the
   matrix re-rendered, e.g. on ticking "Show sub-techniques"). A styled scroll bar is always drawn and takes up its own height. */
.mx-top::-webkit-scrollbar { height: 10px; }
.mx-top::-webkit-scrollbar-track { background: var(--panel2); border-radius: 999px; }
.mx-top::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.mx-top::-webkit-scrollbar-thumb:hover { background: var(--muted); }
@supports not selector(::-webkit-scrollbar) { .mx-top { scrollbar-width: thin; scrollbar-color: var(--muted) var(--panel2); } }
.matrix { display: flex; gap: var(--mx-gap); overflow-x: auto; padding-bottom: .75rem; align-items: flex-start; scrollbar-width: none; }
.matrix::-webkit-scrollbar { display: none; }
.mx-col { flex: 1 0 var(--mx-col); min-width: var(--mx-col); }
.mx-head { position: sticky; top: 0; background: var(--accent); color: var(--accent-ink); font-weight: 700; padding: .4rem .5rem; border-radius: 6px; margin-bottom: .35rem; font-size: .85rem; }
.mx-head .small { color: inherit; opacity: .8; font-weight: 500; }
.mx-cell { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: .3rem .4rem; margin-bottom: .3rem; font-size: .8rem; }
.mx-cell.marked, .mx-s.marked { border-color: var(--kev); box-shadow: inset 3px 0 0 var(--kev); }
.mx-t { color: var(--text); display: block; font-weight: 600; }
.mx-s { display: block; color: var(--muted); padding: .15rem 0 .15rem .5rem; border-left: 2px solid var(--border); margin-top: .2rem; }
.mx-id { font-family: var(--mono); font-size: .72rem; color: var(--accent); }
.attack-row { padding: .35rem 0; }
.pb-phase { margin-top: 1rem; }
.pb-step { display: flex; gap: .55rem; align-items: flex-start; padding: .3rem 0; cursor: pointer; }
.pb-step input { margin-top: .25rem; }
.pb-step:has(input:checked) span { color: var(--muted); text-decoration: line-through; }
.cmd { padding: .7rem 1rem; }
ol.plain { counter-reset: hop; }
ol.plain li::before { counter-increment: hop; content: counter(hop) ". "; color: var(--muted); }

@media (max-width: 900px) {
  /* Narrow screens: the nav is a drawer over the page, opened from the ☰ button. */
  .sidebar, body.nav-collapsed .sidebar { position: fixed; left: 0; top: var(--topbar-h); bottom: 0; height: auto; width: var(--side-w); transform: translateX(-100%); visibility: hidden; transition: transform .18s ease, visibility 0s .18s; }
  body.nav-collapsed .sidebar .lbl { display: inline; }
  body.nav-open .sidebar { transform: none; visibility: visible; transition: transform .18s ease; box-shadow: 4px 0 18px rgb(0 0 0 / .35); }
  .topbar { gap: .5rem; padding-right: .5rem; }
  #updated { display: none; }
  .top-actions { flex-shrink: 0; }                     /* the search box gives up the room, so the buttons never overflow */
  .tpl-layout, .tpl-editor { grid-template-columns: 1fr; }
  .grid.two { grid-template-columns: 1fr; }
  input[type="search"], input[type="text"], .quick { min-width: 0; width: 100%; }
  .quick { flex: 1 1 auto; }
}
@media (max-width: 560px) { .brand { display: none; } }
/* iPhone / iPad Safari zooms the whole page in when you tap a form field whose text is under 16px. Touch screens get 16px fields. */
/* (:root raises the specificity above the field rules earlier in the file, e.g. input[type="search"], .quick, textarea.mono.) */
@media (pointer: coarse) {
  :root input, :root select, :root textarea, .toolbar label > input, .toolbar label > select { font-size: 16px; }
}
@media print { .topbar, .sidebar, .scrim, .foot, .toolbar, .actions, .btn, .live { display: none !important; } body { background: #fff; color: #000; } }