/* ──────────────────────────────────────────────────────────────────────────────
   Foyl Learn — IR Report Shared Stylesheet
   Used by /reports/*.html
   ────────────────────────────────────────────────────────────────────────────── */

:root {
  --blue:#00AEEF; --cyan:#00D4FF; --teal:#00897B; --ocean:#005F87;
  --grad:linear-gradient(135deg,#00D4FF 0%,#00AEEF 35%,#00897B 65%,#005F87 100%);
  --bg:#020403; --bg2:#080A09; --bg3:#0C0E0D; --surf:#0F1110; --surf2:#151817; --surf3:#1C1F1E;
  --border:rgba(100,168,255,.07); --border2:rgba(100,168,255,.13); --border3:rgba(100,168,255,.22);
  --tx:#EDE9E3; --tx2:#A8A29A; --tx3:#6E6860; --tx4:#484440;
  --danger:#C45A50; --warn:#C4942A; --ok:#00897B;
  --font:'Outfit',sans-serif; --mono:'DM Mono',monospace; --jakarta:'Plus Jakarta Sans',sans-serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  background:var(--bg); color:var(--tx);
  font-family:var(--font); font-weight:300; font-size:14px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar { width:6px; height:6px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--surf3); border-radius:3px }

/* ── NAV ───────────────────────────────────────────────────────────────────── */
.rpt-nav {
  position:sticky; top:0; z-index:200; height:56px;
  background:rgba(2,4,3,.92); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 32px; gap:0;
}
.rpt-nav-logo { display:flex; align-items:center; text-decoration:none; flex-shrink:0 }
.rpt-nav-logo img { height:18px; width:auto }
.rpt-nav-sep { width:1px; height:18px; background:var(--border2); margin:0 12px; flex-shrink:0 }
.rpt-nav-product {
  font-family:var(--mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--tx3)
}
.rpt-nav-right { margin-left:auto; display:flex; align-items:center; gap:8px }
.rpt-nav-back {
  font-size:12px; color:var(--tx3); text-decoration:none; padding:5px 10px; border-radius:5px;
  transition:color .15s,background .15s
}
.rpt-nav-back:hover { color:var(--tx2); background:var(--surf) }

/* ── CLASSIFICATION BANNER ──────────────────────────────────────────────────── */
.rpt-class-banner {
  width:100%; padding:5px 32px; text-align:center;
  font-family:var(--mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  border-bottom:1px solid;
}
.rpt-class-banner.confidential {
  background:rgba(196,90,80,.1); color:var(--danger); border-color:rgba(196,90,80,.25)
}
.rpt-class-banner.amber {
  background:rgba(196,148,42,.1); color:var(--warn); border-color:rgba(196,148,42,.25)
}

/* ── LAYOUT ─────────────────────────────────────────────────────────────────── */
.rpt-layout {
  display:grid;
  grid-template-columns:220px 1fr;
  min-height:calc(100vh - 56px - 27px);
}

/* ── TOC ────────────────────────────────────────────────────────────────────── */
.rpt-toc {
  position:sticky; top:83px;
  height:calc(100vh - 83px);
  overflow-y:auto;
  border-right:1px solid var(--border);
  padding:24px 0 24px;
  flex-shrink:0;
}
.rpt-toc::-webkit-scrollbar { width:3px }
.rpt-toc-hdr {
  font-family:var(--mono); font-size:8px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--tx4); padding:0 20px 12px; border-bottom:1px solid var(--border); margin-bottom:10px
}
.rpt-toc a {
  display:block; text-decoration:none;
  font-size:11.5px; color:var(--tx3); padding:5px 20px;
  border-left:2px solid transparent;
  transition:color .12s, background .12s, border-color .12s;
  line-height:1.35;
}
.rpt-toc a:hover { color:var(--tx2); background:var(--surf); }
.rpt-toc a.active { color:var(--blue); border-left-color:var(--blue); background:rgba(0,174,239,.05) }
.rpt-toc-section { margin-top:6px }
.rpt-toc-group-lbl {
  font-family:var(--mono); font-size:7.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tx4); padding:8px 20px 3px; opacity:.7
}
.rpt-toc a.sub { padding-left:28px; font-size:11px; }

/* ── BODY ───────────────────────────────────────────────────────────────────── */
.rpt-body {
  overflow-y:auto;
  padding:0 0 80px;
}

/* ── COVER ──────────────────────────────────────────────────────────────────── */
.rpt-cover {
  padding:48px 56px 40px;
  border-bottom:1px solid var(--border);
}
.rpt-cover-eyebrow {
  font-family:var(--mono); font-size:8.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--tx4); margin-bottom:16px; display:flex; align-items:center; gap:10px
}
.rpt-cover-eyebrow::before {
  content:''; display:block; width:16px; height:1px; background:var(--tx4); opacity:.4
}
.rpt-cover-title {
  font-family:var(--jakarta); font-size:clamp(24px,3vw,36px); font-weight:700;
  letter-spacing:-.03em; line-height:1.1; color:var(--tx); margin-bottom:10px
}
.rpt-cover-title span { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.rpt-cover-sub {
  font-size:14px; color:var(--tx3); line-height:1.6; max-width:680px; margin-bottom:28px
}
.rpt-cover-stripe {
  height:2px; width:60px; border-radius:2px; margin-bottom:28px
}
.rpt-meta-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px
}
.rpt-meta-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:8px;
  padding:12px 14px; display:flex; flex-direction:column; gap:3px
}
.rpt-meta-lbl {
  font-family:var(--mono); font-size:7.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--tx4)
}
.rpt-meta-val { font-size:12.5px; color:var(--tx2); font-weight:400; line-height:1.3 }
.rpt-meta-val.crit { color:var(--danger) }
.rpt-meta-val.high { color:var(--warn) }
.rpt-meta-val.ok  { color:var(--ok) }
.rpt-meta-val.blue { color:var(--blue) }

/* ── SECTIONS ───────────────────────────────────────────────────────────────── */
.rpt-section {
  padding:40px 56px;
  border-bottom:1px solid var(--border);
}
.rpt-section:last-child { border-bottom:none }
.rpt-section-num {
  font-family:var(--mono); font-size:8px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tx4); margin-bottom:6px
}
.rpt-section-title {
  font-family:var(--jakarta); font-size:20px; font-weight:700;
  letter-spacing:-.02em; color:var(--tx); margin-bottom:20px; line-height:1.2
}
.rpt-section-subtitle {
  font-family:var(--jakarta); font-size:14px; font-weight:600;
  color:var(--tx2); margin:24px 0 10px; letter-spacing:-.01em
}
.rpt-p {
  font-size:13.5px; color:var(--tx3); line-height:1.75; margin-bottom:14px
}
.rpt-p:last-child { margin-bottom:0 }
.rpt-p strong { color:var(--tx2); font-weight:500 }
.rpt-p code {
  font-family:var(--mono); font-size:11px; color:var(--tx2);
  background:var(--surf); padding:1px 5px; border-radius:3px
}

/* ── SUMMARY METRICS ────────────────────────────────────────────────────────── */
.rpt-kpi-row {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px;
  margin:20px 0
}
.rpt-kpi {
  background:var(--bg2); border:1px solid var(--border); border-radius:8px;
  padding:14px 16px; text-align:center
}
.rpt-kpi-val {
  font-family:var(--jakarta); font-size:22px; font-weight:700; letter-spacing:-.03em;
  color:var(--tx); margin-bottom:4px
}
.rpt-kpi-val.crit { color:var(--danger) }
.rpt-kpi-val.warn { color:var(--warn) }
.rpt-kpi-val.ok   { color:var(--ok) }
.rpt-kpi-val.blue { color:var(--blue) }
.rpt-kpi-lbl { font-size:11px; color:var(--tx4); line-height:1.3 }

/* ── TABLE ──────────────────────────────────────────────────────────────────── */
.rpt-table-wrap { overflow-x:auto; margin:16px 0 }
table.rpt-table {
  width:100%; border-collapse:collapse;
  font-size:12.5px; color:var(--tx3)
}
table.rpt-table th {
  background:var(--bg2); color:var(--tx4);
  font-family:var(--mono); font-size:8px; letter-spacing:.18em; text-transform:uppercase;
  padding:9px 12px; text-align:left; border-bottom:1px solid var(--border2);
  white-space:nowrap
}
table.rpt-table td {
  padding:9px 12px; border-bottom:1px solid var(--border);
  vertical-align:top; line-height:1.5
}
table.rpt-table td:first-child { color:var(--tx2); white-space:nowrap }
table.rpt-table tr:last-child td { border-bottom:none }
table.rpt-table code {
  font-family:var(--mono); font-size:10.5px; color:var(--tx2);
  background:var(--surf); padding:1px 5px; border-radius:3px
}

/* ── TIMELINE ───────────────────────────────────────────────────────────────── */
.rpt-timeline { display:flex; flex-direction:column; gap:0; margin:16px 0 }
.rpt-tl-item {
  display:grid; grid-template-columns:130px 1fr;
  gap:0; position:relative
}
.rpt-tl-item::before {
  content:''; position:absolute; left:129px; top:20px; bottom:-1px;
  width:1px; background:var(--border2)
}
.rpt-tl-item:last-child::before { display:none }
.rpt-tl-time {
  font-family:var(--mono); font-size:10px; color:var(--tx4); padding:14px 16px 14px 0;
  text-align:right; line-height:1.3; flex-shrink:0
}
.rpt-tl-time .date { font-size:9px; color:var(--tx4); opacity:.6; display:block }
.rpt-tl-content {
  padding:12px 0 12px 22px; border-left:1px solid transparent; position:relative
}
.rpt-tl-content::before {
  content:''; position:absolute; left:-5px; top:18px;
  width:9px; height:9px; border-radius:50%;
  background:var(--surf3); border:1px solid var(--border2); flex-shrink:0
}
.rpt-tl-item.crit .rpt-tl-content::before { background:var(--danger); border-color:rgba(196,90,80,.5) }
.rpt-tl-item.high .rpt-tl-content::before { background:var(--warn); border-color:rgba(196,148,42,.5) }
.rpt-tl-item.action .rpt-tl-content::before { background:var(--blue); border-color:rgba(0,174,239,.4) }
.rpt-tl-item.ok .rpt-tl-content::before { background:var(--ok); border-color:rgba(0,137,123,.4) }
.rpt-tl-tag {
  font-family:var(--mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase;
  padding:2px 7px; border-radius:3px; border:1px solid; display:inline-block; margin-bottom:5px
}
.rpt-tl-tag.crit { color:var(--danger); background:rgba(196,90,80,.08); border-color:rgba(196,90,80,.25) }
.rpt-tl-tag.high { color:var(--warn); background:rgba(196,148,42,.08); border-color:rgba(196,148,42,.25) }
.rpt-tl-tag.action { color:var(--blue); background:rgba(0,174,239,.06); border-color:rgba(0,174,239,.2) }
.rpt-tl-tag.ok { color:var(--ok); background:rgba(0,137,123,.07); border-color:rgba(0,137,123,.22) }
.rpt-tl-tag.recon { color:var(--tx3); background:rgba(100,168,255,.05); border-color:rgba(100,168,255,.15) }
.rpt-tl-body { font-size:12.5px; color:var(--tx3); line-height:1.6 }
.rpt-tl-body strong { color:var(--tx2); font-weight:500 }
.rpt-tl-body code {
  font-family:var(--mono); font-size:10.5px; color:var(--tx2);
  background:var(--surf); padding:1px 5px; border-radius:3px
}

/* ── IOC TABLE ──────────────────────────────────────────────────────────────── */
.ioc-conf {
  font-family:var(--mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 7px; border-radius:3px; border:1px solid; white-space:nowrap
}
.ioc-conf.confirmed { color:var(--danger); background:rgba(196,90,80,.08); border-color:rgba(196,90,80,.25) }
.ioc-conf.high      { color:var(--warn); background:rgba(196,148,42,.08); border-color:rgba(196,148,42,.25) }
.ioc-conf.medium    { color:var(--blue); background:rgba(0,174,239,.06); border-color:rgba(0,174,239,.2) }
.ioc-type {
  font-family:var(--mono); font-size:8.5px; color:var(--tx4); letter-spacing:.08em; white-space:nowrap
}
.ioc-val {
  font-family:var(--mono); font-size:11px; color:var(--tx2); word-break:break-all
}

/* ── MITRE TAGS ─────────────────────────────────────────────────────────────── */
.mitre-pills { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 }
.mitre-pill {
  font-family:var(--mono); font-size:9px; letter-spacing:.06em;
  color:var(--blue); border:1px solid rgba(0,174,239,.2);
  padding:3px 9px; border-radius:4px; background:rgba(0,174,239,.05);
  text-decoration:none
}
.mitre-tactic {
  font-family:var(--mono); font-size:8px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tx4); padding:3px 8px; border-radius:3px;
  background:var(--bg2); border:1px solid var(--border)
}

/* ── LOG BLOCK ──────────────────────────────────────────────────────────────── */
.rpt-log {
  background:var(--bg2); border:1px solid var(--border); border-radius:8px;
  padding:14px 16px; overflow-x:auto; margin:12px 0
}
.rpt-log pre {
  font-family:var(--mono); font-size:10.5px; color:var(--tx3); line-height:1.6;
  white-space:pre; margin:0
}
.rpt-log-lbl {
  font-family:var(--mono); font-size:8px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tx4); margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--border)
}

/* ── CALLOUT / FINDING ──────────────────────────────────────────────────────── */
.rpt-finding {
  border-left:3px solid var(--border2); padding:12px 16px;
  background:var(--bg2); border-radius:0 6px 6px 0; margin:14px 0
}
.rpt-finding.crit { border-left-color:var(--danger) }
.rpt-finding.warn { border-left-color:var(--warn) }
.rpt-finding.info { border-left-color:var(--blue) }
.rpt-finding.ok   { border-left-color:var(--ok) }
.rpt-finding-lbl {
  font-family:var(--mono); font-size:8px; letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:5px
}
.rpt-finding.crit .rpt-finding-lbl { color:var(--danger) }
.rpt-finding.warn .rpt-finding-lbl { color:var(--warn) }
.rpt-finding.info .rpt-finding-lbl { color:var(--blue) }
.rpt-finding.ok   .rpt-finding-lbl { color:var(--ok) }
.rpt-finding-body { font-size:12.5px; color:var(--tx3); line-height:1.6 }
.rpt-finding-body strong { color:var(--tx2); font-weight:500 }
.rpt-finding-body code {
  font-family:var(--mono); font-size:10.5px; color:var(--tx2);
  background:var(--surf); padding:1px 5px; border-radius:3px
}

/* ── RECOMMENDATION CARDS ───────────────────────────────────────────────────── */
.rpt-rec-list { display:flex; flex-direction:column; gap:10px; margin:14px 0 }
.rpt-rec {
  background:var(--bg2); border:1px solid var(--border); border-radius:8px;
  padding:14px 16px; display:flex; gap:14px
}
.rpt-rec-num {
  font-family:var(--mono); font-size:10px; color:var(--tx4);
  flex-shrink:0; width:20px; padding-top:1px
}
.rpt-rec-body { flex:1 }
.rpt-rec-title { font-size:13px; color:var(--tx2); font-weight:500; margin-bottom:4px }
.rpt-rec-desc { font-size:12px; color:var(--tx4); line-height:1.55 }
.rpt-rec-priority {
  font-family:var(--mono); font-size:7.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:2px 7px; border-radius:3px; border:1px solid; flex-shrink:0; align-self:flex-start
}
.rpt-rec-priority.crit { color:var(--danger); border-color:rgba(196,90,80,.3); background:rgba(196,90,80,.07) }
.rpt-rec-priority.high { color:var(--warn); border-color:rgba(196,148,42,.3); background:rgba(196,148,42,.07) }
.rpt-rec-priority.med  { color:var(--blue); border-color:rgba(0,174,239,.3); background:rgba(0,174,239,.06) }

/* ── ATTACK CHAIN ───────────────────────────────────────────────────────────── */
.rpt-chain { display:flex; overflow-x:auto; gap:0; margin:16px 0; padding-bottom:6px }
.rpt-chain::-webkit-scrollbar { height:3px }
.rpt-cs {
  flex-shrink:0; min-width:110px; max-width:145px;
  padding:11px 13px; background:var(--bg2); border:1px solid var(--border); border-right:none
}
.rpt-cs:first-child { border-radius:8px 0 0 8px }
.rpt-cs:last-child  { border-right:1px solid var(--border); border-radius:0 8px 8px 0 }
.rpt-cs-phase {
  font-family:var(--mono); font-size:7.5px; color:var(--tx4); letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:5px
}
.rpt-cs-tech { font-size:10.5px; font-weight:500; color:var(--tx2); margin-bottom:3px; line-height:1.25 }
.rpt-cs-tid {
  font-family:var(--mono); font-size:8px; color:var(--blue);
  border:1px solid rgba(0,174,239,.2); padding:2px 5px; border-radius:3px;
  display:inline-block; background:rgba(0,174,239,.04); margin-top:3px
}

/* ── SECTION DIVIDER (within section) ──────────────────────────────────────── */
.rpt-divider {
  height:1px; background:var(--border); margin:28px 0
}

/* ── APPENDIX CODE ──────────────────────────────────────────────────────────── */
.rpt-app-block {
  background:var(--bg2); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin:14px 0
}
.rpt-app-block-hdr {
  background:var(--surf); padding:8px 14px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between
}
.rpt-app-block-title {
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx3)
}
.rpt-app-block-tag {
  font-family:var(--mono); font-size:8px; color:var(--tx4)
}
.rpt-app-block pre {
  font-family:var(--mono); font-size:10.5px; color:var(--tx3); line-height:1.6;
  padding:14px 16px; overflow-x:auto; white-space:pre
}

/* ── PROJECTOR OVERRIDES for report-specific elements ───────────────────────── */
html[data-theme="projector"] .rpt-nav {
  background:#F2F4F3 !important; backdrop-filter:none !important;
  border-bottom-color:rgba(0,0,0,.12) !important
}
html[data-theme="projector"] .rpt-class-banner.confidential {
  background:rgba(196,90,80,.15); color:#A01B14; border-color:rgba(196,90,80,.40)
}
html[data-theme="projector"] .rpt-class-banner.amber {
  background:rgba(196,148,42,.15); color:#7A4400; border-color:rgba(196,148,42,.40)
}
html[data-theme="projector"] .rpt-log pre { color:var(--tx3) }
html[data-theme="projector"] table.rpt-table { border:1px solid var(--border2) }
html[data-theme="projector"] table.rpt-table th { border-bottom-color:var(--border3) }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────── */
@media (max-width:900px) {
  .rpt-layout { grid-template-columns:1fr }
  .rpt-toc { display:none }
  .rpt-cover { padding:32px 24px 28px }
  .rpt-section { padding:28px 24px }
}