/* library/styles/blocks.css — shared component classes used across assets.
   Author assets from these so each asset.html stays thin (markup + data binding). */

* { box-sizing: border-box; margin: 0; }
html, body { background: #e9edf3; }

/* header */
.header { display: flex; align-items: center; gap: 20px; }
.badge { background: linear-gradient(var(--navy), var(--navy-dark)); color: #fff;
  font-weight: 900; font-size: 30px; padding: 12px 18px; border-radius: 8px; letter-spacing: .02em; }
.titles h1 { font-size: 46px; font-weight: 900; color: var(--navy); line-height: 1.05; text-transform: uppercase; }
.titles h2 { font-size: 24px; font-weight: 800; color: var(--muted); text-transform: uppercase; margin-top: 6px; }

/* panel + section header */
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; }
.panel > .ph { background: linear-gradient(var(--navy), var(--navy-dark)); color: #fff; font-weight: 900;
  font-size: 19px; padding: 11px 18px; letter-spacing: .04em; }
.panel > .body { flex: 1; min-height: 0; }

/* chart fills its panel body */
.chart { width: 100%; height: 100%; }

/* bulleted highlight list */
.list { list-style: none; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.list li { display: flex; gap: 12px; font-size: 16.5px; line-height: 1.32; font-weight: 600; }
.list li::before { content: ""; flex: 0 0 12px; height: 12px; margin-top: 6px; border-radius: 3px; background: var(--red); }

/* impact: ring + text */
.impact { display: grid; grid-template-columns: 188px 1fr; align-items: center; }
.impact .ring { width: 188px; height: 100%; }
.impact .txt { padding: 16px 18px 16px 4px; font-size: 16px; font-weight: 600; line-height: 1.36; }
.impact .txt .cap { color: var(--navy); font-weight: 900; font-size: 15px; letter-spacing: .04em; display: block; margin-bottom: 6px; }

/* stat / KPI cards */
.cards { display: grid; gap: 14px; padding: 14px; }
.card { border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
.card .num { font-size: 40px; font-weight: 900; color: var(--navy); line-height: 1; }
.card .lab { font-size: 14px; font-weight: 700; color: var(--muted); margin-top: 6px; }

/* ranked table */
.tbl { width: 100%; border-collapse: collapse; font-size: calc(15px * var(--ppa-scale, 1)); }
.tbl th { background: var(--navy); color: #fff; font-weight: 800; text-align: left; padding: 10px 14px; font-size: calc(13px * var(--ppa-scale, 1)); letter-spacing: .03em; }
.tbl td { padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 600; vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }

/* callout / alert */
.alert { background: var(--light-red); border: 1px solid #f4c4c4; border-radius: var(--radius);
  display: flex; align-items: center; gap: 18px; padding: 16px 22px; }
.alert .mark { flex: 0 0 52px; height: 52px; background: var(--red); color: #fff; font-weight: 900; font-size: 34px;
  border-radius: 10px; display: grid; place-items: center; }
.alert p { font-size: 17px; font-weight: 700; line-height: 1.34; }

/* footer */
.footer { color: var(--text); font-size: 13px; font-style: italic; align-self: end; }

/* KPI strip (horizontal) */
.kpi-strip { display: flex; gap: 14px; }
.kpi-strip .kpi { flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px;
  display: flex; flex-direction: column; justify-content: center; }
.kpi .num { font-size: calc(36px * var(--ppa-scale, 1)); font-weight: 900; color: var(--navy); line-height: 1; }
.kpi .lab { font-size: calc(12px * var(--ppa-scale, 1)); font-weight: 700; color: var(--muted); margin-top: 6px; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; }
.kpi--alert { background: var(--light-red); border-color: #f4c4c4; }
.kpi--alert .num { color: var(--alert); }
.kpi-ic { color: var(--navy); opacity: .8; margin-bottom: 7px; line-height: 0; }
.kpi--alert .kpi-ic { color: var(--alert); opacity: .9; }

/* escalation tracker rows */
.esc { display: flex; flex-direction: column; height: 100%; }
.esc-row { display: grid; grid-template-columns: 50px 1fr 128px 64px; align-items: center; gap: 14px;
  padding: 0 18px; border-bottom: 1px solid var(--border); flex: 1; }
.esc-row:last-child { border-bottom: none; }
.esc-ic { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: #eef2f8; color: var(--navy); }
.esc-main .nm { font-size: calc(17px * var(--ppa-scale, 1)); font-weight: 800; color: var(--text); }
.esc-main .tg { font-size: calc(13px * var(--ppa-scale, 1)); font-weight: 600; color: var(--muted); line-height: 1.26; margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sev { font-size: calc(12px * var(--ppa-scale, 1)); font-weight: 900; letter-spacing: .03em; padding: 6px 0; border-radius: 6px; text-align: center; color: #fff; }
.sev .g { margin-right: 5px; font-size: 11px; }
.sev--critical { background: var(--sev-critical); }
.sev--high { background: var(--sev-high); }
.sev--medium { background: var(--sev-medium); color: var(--sev-medium-ink); }
.sev--new { background: var(--muted); }
.trend { font-size: calc(24px * var(--ppa-scale, 1)); font-weight: 900; text-align: center; }
.trend--up2 { color: var(--red); }
.trend--up1 { color: var(--orange); }
.trend--flat { color: var(--muted); }

/* right rail (stacked panels) */
.rail { display: flex; flex-direction: column; gap: 22px; min-height: 0; }
.rail .panel { flex: 1; min-height: 0; }
.panel > .body.pad { padding: 14px 16px; overflow: hidden; }

/* department waffle (unit chart) */
.waffle { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }
.waffle .cell { aspect-ratio: 1 / 1; border-radius: 4px; background: var(--muted); }
.waffle .cell.sn { background: var(--red); }
.waffle .cell.n { background: var(--orange); }
.waffle .cell.ok { background: var(--green); }
.waffle-cap { font-size: 14px; font-weight: 800; color: var(--text); margin-top: 10px; }
.waffle-cap b { color: var(--red); font-size: 17px; }

/* 5-window heat strip */
.heatstrip { display: flex; gap: 6px; margin-top: 12px; }
.heatstrip .d { flex: 1; border-radius: 5px; padding: 9px 0 7px; text-align: center; color: #fff; font-weight: 800; font-size: 11px; line-height: 1.1; }
.heat-cap { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .05em; margin-top: 7px; }
.sev-critical { background: var(--red); } .sev-high { background: var(--orange); } .sev-medium { background: var(--amber); color: #3a2c00; }

/* sentiment summary (clear, compact — replaces the abstract square grid) */
.sent-sum { display: flex; align-items: center; gap: 14px; }
.sent-sum .big .bn { font-size: 54px; font-weight: 900; color: var(--sev-critical); line-height: 1; }
.sent-sum .big .bd { font-size: 30px; font-weight: 800; color: var(--muted); }
.sent-sum .bl { font-size: 15px; font-weight: 600; color: var(--muted); line-height: 1.25; }
.sent-sum .bl b { color: var(--text); font-weight: 900; }
.stackbar { display: flex; height: 28px; border-radius: 6px; overflow: hidden; margin-top: 16px; }
.stackbar .seg { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 800; }
.stackbar .seg.sn { background: var(--sev-critical); }
.stackbar .seg.other { background: var(--muted); }
.legend-inline { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 9px; }
.legend-inline .sq { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: middle; margin: 0 5px 0 12px; }
.legend-inline .sq:first-child { margin-left: 0; }
.trendline { font-size: 13.5px; font-weight: 600; color: var(--text); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.trendline b { color: var(--sev-critical); font-weight: 900; }

/* spotlight risk cards */
.risks { display: flex; flex-direction: column; gap: 12px; }
.risk { border: 1px solid var(--border); border-left: 5px solid var(--red); border-radius: 8px; padding: 11px 14px; }
.risk .rh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.risk .rt { font-weight: 800; font-size: 15.5px; color: var(--text); }
.risk .rk { background: var(--red); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .03em; padding: 3px 9px; border-radius: 5px; flex: 0 0 auto; }
.risk .rb { font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.3; margin-top: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* horizontal watch-date timeline */
.timeline { position: relative; display: flex; align-items: flex-start; padding: 18px 26px 8px; height: 100%; }
.timeline::before { content: ""; position: absolute; left: 56px; right: 56px; top: 28px; height: 3px; background: var(--border); }
.tl { flex: 1; text-align: center; position: relative; padding-top: 20px; }
.tl .dot { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 15px; height: 15px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--navy); }
.tl.warn .dot { background: var(--alert); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--alert); }
.tl .date { font-weight: 900; color: var(--navy); font-size: 16px; }
.tl .lab { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.25; padding: 0 8px; }
/* Vertical timeline — date-gutter + stacked rows + a vertical connector; labels get the full row width
   (no wrap-overflow), and rows flex to fill height (fewer events → taller rows → autofit-friendly). */
.timeline--v { flex-direction: column; align-items: stretch; padding: 18px 26px; }
.timeline--v::before { left: 37px; right: auto; top: 30px; bottom: 30px; width: 3px; height: auto; }
.timeline--v .tl { flex: 1 1 0; display: grid; grid-template-columns: 22px auto 1fr; align-items: center; column-gap: 16px; text-align: left; padding: 0 8px; }
.timeline--v .tl .dot { position: static; transform: none; justify-self: center; }
.timeline--v .tl .date { font-size: calc(15px * var(--ppa-scale, 1)); white-space: nowrap; }
.timeline--v .tl .lab { text-align: left; margin: 0; padding: 0; font-size: calc(13.5px * var(--ppa-scale, 1)); }
.timeline--v .tl.focal { background: var(--light-red); border-radius: 8px; }
.timeline--v .tl.focal .dot { width: 19px; height: 19px; }
.timeline--v .tl.focal .date { color: var(--alert); }

/* verdict / action band */
.verdict { background: linear-gradient(135deg, var(--navy), var(--navy-dark)); color: #fff;
  border-radius: 10px; padding: 0 22px; display: flex; align-items: center; gap: 18px; }
.verdict .vtag { background: var(--sev-critical); color: #fff; font-weight: 900; font-size: 12px;
  letter-spacing: .05em; padding: 6px 12px; border-radius: 6px; flex: 0 0 auto; }
.verdict .vtxt { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.verdict .vtxt b { color: #ffd24d; font-weight: 800; }

/* meta / footnote band (source + coverage + legend key) */
.meta { display: flex; align-items: center; gap: 22px; border-top: 2px solid var(--border); padding-top: 9px; font-size: 12px; color: var(--muted); }
.meta .src { font-style: italic; }
.meta .legend { display: flex; gap: 16px; margin-left: auto; align-items: center; }
.meta .legend .k { display: flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
.meta .legend .dot { width: 12px; height: 12px; border-radius: 3px; }