/* Security report (/security/). brand.css holds the palette (Day / Nite), fonts and shared devices.
   One data colour: ink. The bar under the pointer turns signal (a person acts). */
/* --cx: the one inline inset for every tile, cell, bar row and fact, so text starts and numbers end on the
   same two lines in every section. Number columns share one width (col.c-num). */
.rep { --cx: 14px; max-width: 1000px; padding-top: 120px; padding-bottom: 56px; display: grid; gap: 40px; }
.rep-head { display: grid; gap: 14px; }
.lede { margin: 0; max-width: 68ch; font-size: 18px; color: rgb(var(--ink-2)); }
.rep-sec { display: grid; gap: 14px; min-width: 0; }
.rep-sec h2 { font-size: clamp(17px, 2vw, 22px); }
.rep-note { margin: 0; max-width: 72ch; color: rgb(var(--ink-2)); font-size: 15.5px; }
.rep-msg { margin: 0; padding: 11px 13px; border-left: 2px solid rgb(var(--hot)); background: rgb(var(--hot) / .08); font: 500 13px/1.5 var(--f-data); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* tiles: one hero number, two supporting */
.tiles { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1px; background: rgb(var(--ink) / .16); border: 1px solid rgb(var(--ink) / .16); }
.tile { background: rgb(var(--bg)); padding: 18px var(--cx) 16px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.tile-v { font: 600 clamp(30px, 4vw, 44px)/1.05 var(--f-body); letter-spacing: -.01em; }
.tile-hero .tile-v { font-size: clamp(42px, 6vw, 64px); }
.tile-l { font: 500 10.5px/1.5 var(--f-data); letter-spacing: .12em; text-transform: uppercase; }
.tile-s { color: rgb(var(--ink-2)); font-size: 14px; }
@media (max-width: 720px) { .tiles { grid-template-columns: minmax(0, 1fr); } }

/* daily chart */
.chart { position: relative; margin: 0; padding: 14px var(--cx) 8px; }
.chart-plot { width: 100%; min-height: 180px; }
.chart-plot svg { display: block; width: 100%; height: auto; }
.chart .grid { stroke: rgb(var(--ink) / .12); stroke-width: 1; }
.chart .axis { stroke: rgb(var(--ink) / .45); stroke-width: 1; }
.chart .tick { font: 400 10.5px var(--f-data); fill: rgb(var(--ink-2)); }
.chart .bar { fill: rgb(var(--ink) / .78); }
.chart .hit { fill: transparent; }
.chart .col { outline: none; cursor: default; }
.chart .col.on .bar, .chart .col:focus-visible .bar { fill: rgb(var(--signal)); }
.chart .col:focus-visible .hit { stroke: rgb(var(--signal)); stroke-width: 1; }
.tip { position: absolute; z-index: 2; transform: translate(-50%, -100%); margin-top: 6px; padding: 8px 10px; display: grid; gap: 2px;
  background: rgb(var(--panel)); border: 1px solid rgb(var(--ink) / .3); font: 400 12px/1.4 var(--f-data); white-space: nowrap; pointer-events: none; }
.tip strong { font: 600 15px/1.2 var(--f-body); }
.tip-dim { color: rgb(var(--ink-2)); }
.tip.tip-left { transform: translate(-100%, -100%); }

/* tables */
.rep-table summary { cursor: pointer; font: 500 11px/1.4 var(--f-data); letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--ink-2)); padding-block: 6px; }
.rep-table summary:hover { color: rgb(var(--ink)); }
.scroll { overflow-x: auto; border: 1px solid rgb(var(--ink) / .16); margin-top: 8px; }
.rep table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 15px; }
.rep col.c-num { width: 8.5rem; }
.rep th, .rep td { padding: 8px var(--cx); text-align: left; border-bottom: 1px solid rgb(var(--ink) / .08); }
.rep th.num, .rep td.num { text-align: right; }
.rep thead th { font: 500 10px/1.4 var(--f-data); letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--ink-2)); border-bottom-color: rgb(var(--ink) / .2); }
.rep tbody th { font-weight: 500; }
.rep td.num { font-family: var(--f-data); font-size: 13px; font-variant-numeric: tabular-nums; }
.rep tbody tr:last-child th, .rep tbody tr:last-child td { border-bottom: 0; }

/* horizontal bars: label and value above a thin track, in the same box and inset as the tables */
.hbars { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid rgb(var(--ink) / .16); }
.hbar { display: grid; gap: 6px; padding: 10px var(--cx) 11px; border-bottom: 1px solid rgb(var(--ink) / .08); }
.hbar:last-child { border-bottom: 0; }
.hbar-top { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.hbar-label { min-width: 0; }
.hbar-value { font: 500 13px var(--f-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hbar-track { height: 10px; background: rgb(var(--ink) / .08); }
.hbar-fill { height: 100%; width: 0; background: rgb(var(--ink) / .78); border-radius: 0 4px 4px 0; transition: width .5s ease-out; }

.rep-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; max-width: 72ch; color: rgb(var(--ink-2)); }
.rep-list li::marker { color: rgb(var(--signal)); }
.facts { margin: 0; display: grid; gap: 1px; background: rgb(var(--ink) / .16); border: 1px solid rgb(var(--ink) / .16); }
.facts div { background: rgb(var(--bg)); padding: 12px var(--cx); display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 18px; }
.facts dt { font: 500 10.5px/1.6 var(--f-data); letter-spacing: .12em; text-transform: uppercase; }
.facts dd { margin: 0; font-size: 15.5px; color: rgb(var(--ink-2)); }
@media (max-width: 560px) { .facts div { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 560px) { .rep { --cx: 10px; } .rep col.c-num { width: 5.6rem; } .rep table { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .hbar-fill { transition: none; } }