/* ---------------------------------------------------------------------------
   Patch Tuesday tracker

   Type: the previous version set almost everything in the mono face, which read
   as noisy at this density. Mono is now reserved for things that are genuinely
   tabular or machine-ish: numbers, CVE identifiers, KB numbers, dates. Prose,
   headings and labels are sans. That alone is most of the "cleaner".

   Order is countdown, cadence, totals, breakdowns, vulnerabilities. The
   countdown used to be absolutely positioned over the chart and collided with
   the bars on a busy month. It now owns the top of the page.
--------------------------------------------------------------------------- */

:root {
  --bg:      #0e1622;
  --panel:   #16202f;
  --panel-2: #1c2739;
  --rule:    #2a3849;
  --rule-soft: rgba(42, 56, 73, 0.5);

  --ink:   #e6ecf5;
  --dim:   #93a1b7;
  --faint: #64738b;

  --peri:  #7b8fe0;
  --amber: #f2b33d;
  --orange:#ff7a45;
  --teal:  #34c0b0;

  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
          "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas,
          "DejaVu Sans Mono", monospace;

  --gut: 16px;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 14.5px/1.6 var(--sans);
}

a { color: var(--peri); }

.shell { max-width: 1180px; margin: 0 auto; padding: 30px 22px 80px; }

/* --- masthead ------------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--gut);
}

.eyebrow {
  margin: 0 0 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
}

.masthead h1 {
  margin: 0;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sync {
  margin-left: auto;
  text-align: right;
  font-size: 12px;
  line-height: 1.5;
  color: var(--faint);
}
.sync b { font-family: var(--mono); font-weight: 500; color: var(--teal); }
.sync.stale b { color: var(--amber); }

/* --- hero countdown ------------------------------------------------------- */

.hero {
  background: linear-gradient(180deg, var(--panel) 0%, #141d2b 100%);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 26px 28px 24px;
  margin-bottom: var(--gut);
}

.hero-label {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal);
}

.hero-clock { display: flex; gap: 34px; flex-wrap: wrap; }

.hero-clock .u b {
  display: block;
  font-family: var(--mono);
  font-size: 52px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.hero-clock .u span {
  display: block;
  margin-top: 9px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.hero-when {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--dim);
}

/* --- panels --------------------------------------------------------------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: var(--gut);
}

.panel > h2 {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

.panel > h2 .hint {
  float: right;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
  color: var(--faint);
}

.spaced { margin-top: var(--gut); }

.banner {
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--amber);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: var(--gut);
  color: var(--dim);
}

/* --- cadence chart -------------------------------------------------------- */

.plot { position: relative; height: 210px; }
.plot svg { display: block; width: 100%; height: 100%; overflow: visible; }

.plot rect.bar { fill: var(--peri); opacity: 0.75; cursor: pointer; }
.plot rect.bar:hover { opacity: 1; }
.plot rect.crit { fill: var(--amber); opacity: 0.92; }
.plot rect.expl { fill: var(--orange); opacity: 1; }
.plot rect.hit  { stroke: var(--ink); stroke-width: 1.5; }
.plot line.mean { stroke: var(--teal); stroke-width: 1; stroke-dasharray: 2 5; opacity: 0.65; }
.plot text.tick { font: 400 10px var(--mono); fill: var(--faint); }
.plot text.meanlabel { font: 400 10px var(--mono); fill: var(--teal); }

.tip {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 9px 12px;
  font: 400 12px/1.55 var(--mono);
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.keys {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
  font-size: 12px;
  color: var(--dim);
}
.keys i {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 2px;
  margin-right: 7px;
  vertical-align: baseline;
}
.keys .k-all { background: var(--peri); }
.keys .k-crit { background: var(--amber); }
.keys .k-expl { background: var(--orange); }
.keys .k-mean { background: var(--teal); height: 2px; border-radius: 0; }
.keys .note { margin-left: auto; color: var(--faint); font-family: var(--mono); font-size: 11.5px; }

/* --- stats ---------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--gut);
}
.stats .cell { background: var(--panel); padding: 17px 19px; }
.stats .cell b {
  display: block;
  font-family: var(--mono);
  font-size: 29px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.stats .cell span {
  display: block;
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.stats .cell.is-crit b { color: var(--amber); }
.stats .cell.is-expl b { color: var(--orange); }
.stats .cell.is-good b { color: var(--teal); }

/* --- breakdowns ----------------------------------------------------------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); }
.split .panel { margin-bottom: 0; }

.bars { display: flex; flex-direction: column; gap: 9px; }
.bars .row {
  display: grid;
  grid-template-columns: 168px 1fr 46px;
  align-items: center;
  gap: 12px;
}
.bars .label {
  font-size: 13px;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bars .track { height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.bars .fill { height: 100%; width: 0; background: var(--peri); border-radius: 4px; }
.bars .n {
  font-family: var(--mono);
  font-size: 12.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- counting rules ------------------------------------------------------- */

.rules {
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 15px 17px;
  margin-bottom: 16px;
}
.rules-title {
  margin: 0 0 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.rules label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--dim);
  cursor: pointer;
}
.rules label:hover { color: var(--ink); }
.rules input { accent-color: var(--peri); width: 15px; height: 15px; flex: none; }
.rules .why {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--faint);
}

/* --- filters -------------------------------------------------------------- */

.filters { margin-bottom: 16px; }

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.filter-row:last-child { margin-bottom: 0; }

.filter-label {
  flex: none;
  width: 62px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.chip {
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: 99px;
  color: var(--dim);
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  padding: 6px 14px;
  transition: background 0.12s, color 0.12s;
}
.chip:hover { color: var(--ink); border-color: var(--faint); }
.chip[aria-pressed="true"] { background: var(--peri); border-color: var(--peri); color: #0d1119; font-weight: 600; }
.chip.danger[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); }
.chip .c { opacity: 0.6; font-family: var(--mono); font-size: 11px; margin-left: 6px; }

input[type="search"] {
  flex: 1 1 260px;
  max-width: 340px;
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  padding: 9px 12px;
}
input[type="search"]::placeholder { color: var(--faint); }

.tally {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
}

:focus-visible { outline: 2px solid var(--peri); outline-offset: 2px; }

/* --- tables --------------------------------------------------------------- */

.scroll { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }

thead th {
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 2;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--ink); }
thead th.num, tbody td.num { text-align: right; }

tbody td { padding: 11px 10px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
tbody tr:hover { background: var(--panel-2); }
tbody tr.clickable { cursor: pointer; }

td.id { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
td.id a { text-decoration: none; }
td.id a:hover { text-decoration: underline; }
td.num { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.kb { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
td.kb a { color: var(--faint); text-decoration: none; }
td.kb a:hover { color: var(--peri); text-decoration: underline; }

.title-line { display: block; line-height: 1.45; }
.tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; }

.tag {
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid;
  white-space: nowrap;
}
.tag.sev-Critical { color: var(--amber); border-color: rgba(242, 179, 61, 0.42); }
.tag.sev-Important { color: var(--dim); border-color: var(--rule); }
.tag.sev-Moderate, .tag.sev-Low, .tag.sev-Unrated { color: var(--faint); border-color: var(--rule); }
.tag.is-expl { color: var(--orange); border-color: rgba(255, 122, 69, 0.5); }
.tag.is-disc { color: var(--teal); border-color: rgba(52, 192, 176, 0.45); }
.tag.is-ch, .tag.is-tp, .tag.is-os { color: var(--faint); border-color: var(--rule); }

.empty { padding: 28px 10px; color: var(--faint); }

/* --- footer --------------------------------------------------------------- */

.colophon {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  line-height: 1.7;
  color: var(--faint);
}
.colophon a { color: var(--dim); }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split .panel { margin-bottom: var(--gut); }
  .bars .row { grid-template-columns: 116px 1fr 42px; }
  .hero-clock { gap: 22px; }
  .hero-clock .u b { font-size: 38px; }
  .filter-label { width: 100%; }
}

@media (max-width: 560px) {
  .shell { padding: 22px 14px 56px; }
  .hero-clock .u b { font-size: 31px; }
  .plot { height: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- time zone picker ----------------------------------------------------- */

.hero-top {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.hero-top .hero-label { margin: 0; }

.tz-picker {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.tz-picker select {
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--ink);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding: 7px 10px;
  max-width: 260px;
  cursor: pointer;
}
.tz-picker select:hover { border-color: var(--faint); }

.when-sub { display: block; margin-top: 5px; font-size: 12px; color: var(--faint); }

@media (max-width: 640px) {
  .tz-picker { margin-left: 0; width: 100%; }
  .tz-picker select { flex: 1; max-width: none; }
}

/* --- scope statement ------------------------------------------------------ */
/* Sits directly above the headline number. An unqualified count is the thing
   most likely to be screenshotted and quoted back out of context, so the
   definition travels with it. */

.scope {
  margin: 0 0 10px;
  padding: 12px 16px;
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--peri);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--faint);
}
.scope b { color: var(--ink); font-weight: 600; }

.tag.is-kev { color: var(--orange); border-color: rgba(255, 122, 69, 0.5); }