/* =============================================================================
   Privacy Enhancing Technologies — Interactive Guide
   styles.css

   All visual styles for the PETs simulation. Organised into:
     1.  Custom properties (design tokens)
     2.  Reset & base
     3.  Layout — app shell, header, nav, main
     4.  Module header & use-case callout
     5.  Panels
     6.  Tradeoff chips
     7.  Grid helpers
     8.  Buttons
     9.  Slider
     10. Badge pills
     11. Data table
     12. Keyframe animations
     13. Module-specific — DP
     14. Module-specific — PPRL
     15. Module-specific — MPC
     16. Module-specific — Federated Learning
     17. Module-specific — Synthetic Data
     18. Module-specific — TEE
     19. Module-specific — Comparison table
     20. Step walkthrough list
     21. Module transition
     22. Tooltip system
   ============================================================================= */


/* ─────────────────────────────────────────────────────────────────────────────
   1. Custom properties (design tokens)
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Background layers */
  --bg:       #060c1a;
  --panel:    #0c1428;
  --panel2:   #101c35;

  /* Border shades */
  --border:   #1e2f50;
  --border2:  #2a3f6a;

  /* Brand colours */
  --mint:      #00e5a0;   /* primary accent — used for "good" / "low risk" */
  --mint-dim:  #00a06e;
  --coral:     #ff3d5a;   /* warning accent — used for "high risk" / danger */
  --coral-dim: #9b1f31;
  --amber:     #ffc940;   /* caution accent — used for "medium" values */
  --blue:      #4d9fff;   /* informational accent */
  --blue-dim:  #2a5c99;
  --purple:    #b06fff;   /* emerging/advanced accent — matches trad-module nav colour */

  /* Text hierarchy */
  --text:        #c8d8f0;   /* body copy */
  --text-dim:    #6880a8;   /* secondary / labels */
  --text-bright: #eaf2ff;   /* headings / emphasis */

  /* Typography */
  --font-display: 'Open Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. Reset & base
   ───────────────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. Layout — app shell, header, nav, main
   ───────────────────────────────────────────────────────────────────────────── */
.app { display: flex; flex-direction: column; height: 100vh; }

header {
  border-bottom: 1px solid var(--border);
  padding: 18px 32px;
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(90deg, #0a1228 0%, #060c1a 100%);
}

/* Small branded square in the top-left corner */
.logo-mark {
  width: 38px; height: 38px;
  border: 2px solid var(--mint);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--mint); flex-shrink: 0;
}

/* Logo + title home button — resets button chrome, inherits flex layout */
.header-home {
  display: inline-flex; align-items: center; gap: 16px;
  appearance: none; -webkit-appearance: none;
  background: none; border: none; padding: 0; margin: 0;
  cursor: pointer; text-align: left; color: inherit;
  font: inherit; line-height: inherit;
  border-radius: 6px;
  transition: opacity 0.15s;
}
.header-home:hover { opacity: 0.8; }
.header-home:hover h1 { text-decoration: underline; text-underline-offset: 3px; }

header h1 {
  font-size: 1.1rem; font-weight: 700;
  color: var(--text-bright); letter-spacing: 0.01em;
}
header p {
  font-size: 0.75rem; color: var(--text-dim);
  font-family: var(--font-mono); margin-top: 1px;
}

/* ── About page ─────────────────────────────────────────────────────────────── */
.about-hero {
  padding: 32px 0 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.about-hero .about-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 10px;
}
.about-hero h2 {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--text-bright);
  line-height: 1.25;
  max-width: 720px;
  margin-bottom: 8px;
}
.about-hero .about-subtitle {
  font-size: 0.85rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
}
.about-body {
  max-width: 820px;
}
.about-body p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 20px;
}
.about-body p a {
  color: var(--mint);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.about-body p a:hover { opacity: 0.8; }
.about-disclaimer {
  margin-top: 8px;
  padding: 14px 18px;
  background: rgba(77,159,255,0.06);
  border-left: 3px solid var(--blue);
  border-radius: 0 6px 6px 0;
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.65;
}
.about-disclaimer strong { color: var(--blue); }
.about-explore {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--border);
}
.about-explore-label {
  width: 100%;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 2px;
}
.about-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  font-family: var(--font-display);
}
.about-chip:hover {
  border-color: var(--mint);
  color: var(--mint);
}

/* App body — flex row containing sidebar nav + main content */
.app-body {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

/* Module navigation — collapsible left sidebar */
nav {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--panel);
  overflow: hidden;
  transition: width 0.22s ease;
}
nav.nav-collapsed { width: 40px; }

/* Collapse / expand toggle button row at the top of the sidebar */
.nav-toggle-row {
  display: flex;
  justify-content: flex-end;
  padding: 8px 6px 4px;
  flex-shrink: 0;
}
#nav-toggle {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
#nav-toggle:hover { background: var(--panel2); color: var(--text); }

/* Visual section container for a group of related nav items */
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 6px 10px;
  transition: opacity 0.12s;
}
nav.nav-collapsed .nav-group { opacity: 0; pointer-events: none; }

/* Section heading above each nav group — more prominent than before */
.nav-group-label {
  display: block;
  font-size: 0.6rem; font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  white-space: nowrap;
  padding: 10px 6px 5px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

/* Nav item buttons — vertical, left-aligned, text wraps */
.nav-btn {
  display: block; width: 100%;
  padding: 7px 8px; border-radius: 6px; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: 0.76rem; font-weight: 600;
  color: var(--text-dim); background: transparent;
  white-space: normal; text-align: left; line-height: 1.3;
  transition: all 0.2s; letter-spacing: 0.02em;
}
.nav-btn:hover       { color: var(--text); background: var(--panel2); }
.nav-btn.active      { color: var(--bg); background: var(--mint); }

/* Special active colours for the two supplementary nav items */
.nav-btn.compare-btn.active { background: var(--amber); color: var(--bg); }
.nav-btn.trad-btn.active    { background: #b06fff; color: var(--bg); }

/* Centred, width-capped, independently scrolling content area */
main {
  flex: 1;
  min-width: 0;
  padding: 28px 32px;
  max-width: 1100px;
  margin: 0 auto;
  overflow-y: auto;
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. Module header & use-case callout
   ───────────────────────────────────────────────────────────────────────────── */
.module-header { margin-bottom: 24px; }

/* Coloured "Module N of 8" pill */
.module-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 0.65rem;
  padding: 3px 10px; border-radius: 4px; margin-bottom: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
}

.module-title {
  font-size: 2rem; font-weight: 800; /* Open Sans ExtraBold */
  color: var(--text-bright); line-height: 1.1;
}

.module-def {
  margin-top: 10px; font-size: 0.92rem;
  color: var(--text); line-height: 1.65;
}

/* Blue left-border callout showing a concrete education use case */
.use-case {
  margin-top: 12px; padding: 10px 14px;
  border-left: 3px solid var(--blue);
  background: rgba(77,159,255,0.06);
  border-radius: 0 6px 6px 0;
  font-size: 0.82rem; color: var(--text-dim);
  font-family: var(--font-mono);
}
.use-case strong { color: var(--blue); font-weight: 500; }


/* ─────────────────────────────────────────────────────────────────────────────
   5. Panels — generic card container
   ───────────────────────────────────────────────────────────────────────────── */
.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 20px;
}

/* Small all-caps label used as a panel heading */
.panel-title {
  font-size: 0.72rem; font-weight: 700;
  color: var(--text-dim); letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 14px;
  font-family: var(--font-mono);
}


/* ─────────────────────────────────────────────────────────────────────────────
   6. Tradeoff chips
   Each chip shows a single privacy/utility dimension. Colour indicates severity:
     val-low  = green  (favourable)
     val-med  = amber  (neutral / moderate)
     val-high = red    (unfavourable / costly)
   ───────────────────────────────────────────────────────────────────────────── */
.tradeoffs {
  display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap;
}
.tradeoff {
  flex: 1; min-width: 160px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
}
.tradeoff-label {
  font-size: 0.65rem; font-family: var(--font-mono);
  color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 4px;
}
.tradeoff-val { font-size: 0.88rem; font-weight: 600; }
.val-high { color: var(--coral); }   /* high complexity / high risk   */
.val-med  { color: var(--amber); }   /* medium                        */
.val-low  { color: var(--mint);  }   /* low complexity / low risk     */


/* ─────────────────────────────────────────────────────────────────────────────
   7. Grid helpers
   ───────────────────────────────────────────────────────────────────────────── */
.two-col   { display: grid; grid-template-columns: 1fr 1fr;       gap: 16px; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr;   gap: 14px; }


/* ─────────────────────────────────────────────────────────────────────────────
   8. Buttons
   ───────────────────────────────────────────────────────────────────────────── */
.btn {
  padding: 9px 20px; border-radius: 7px; border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.03em; transition: all 0.18s;
}
.btn-mint    { background: var(--mint); color: var(--bg); }
.btn-mint:hover { background: #00ffb0; }
.btn-coral   { background: var(--coral); color: white; }
.btn-outline {
  background: transparent; color: var(--text);
  border: 1px solid var(--border2);
}
.btn-outline:hover { border-color: var(--mint); color: var(--mint); }


/* ─────────────────────────────────────────────────────────────────────────────
   9. Slider (epsilon / probability controls)
   ───────────────────────────────────────────────────────────────────────────── */
.slider-wrap { display: flex; flex-direction: column; gap: 6px; }
.slider-wrap label {
  font-size: 0.75rem; color: var(--text-dim); font-family: var(--font-mono);
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%; height: 4px;
  background: var(--border2); border-radius: 2px; outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  background: var(--mint); border-radius: 50%; cursor: pointer;
}


/* ─────────────────────────────────────────────────────────────────────────────
   10. Badge pills — small status indicators
   ───────────────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 0.65rem; font-family: var(--font-mono); font-weight: 500;
  letter-spacing: 0.04em;
}
.badge-red   { background: rgba(255,61,90,0.15);   color: var(--coral); border: 1px solid rgba(255,61,90,0.3); }
.badge-green { background: rgba(0,229,160,0.12);   color: var(--mint);  border: 1px solid rgba(0,229,160,0.25); }
.badge-amber { background: rgba(255,201,64,0.12);  color: var(--amber); border: 1px solid rgba(255,201,64,0.25); }
.badge-blue  { background: rgba(77,159,255,0.12);  color: var(--blue);  border: 1px solid rgba(77,159,255,0.25); }


/* ─────────────────────────────────────────────────────────────────────────────
   11. Data table
   ───────────────────────────────────────────────────────────────────────────── */
.data-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-mono); font-size: 0.75rem;
}
.data-table th {
  padding: 7px 10px; text-align: left;
  color: var(--text-dim); border-bottom: 1px solid var(--border); font-weight: 500;
}
.data-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(30,47,80,0.5);
}
.data-table tr:hover td { background: rgba(255,255,255,0.02); }


/* ─────────────────────────────────────────────────────────────────────────────
   12. Keyframe animations
   ───────────────────────────────────────────────────────────────────────────── */

/* Gentle opacity pulse — used on TEE vault while processing */
@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* Slide up from slight offset — used on module entry */
@keyframes slideIn  { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

/* Horizontal shimmer sweep — available for loading states */
@keyframes shimmer  { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

/* Float up from below — available for secondary entrance */
@keyframes floatUp  { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }

/* Convenience class to trigger slideIn on any element */
.animate-in { animation: slideIn 0.35s ease forwards; }


/* ─────────────────────────────────────────────────────────────────────────────
   13. Module-specific — Differential Privacy
   ───────────────────────────────────────────────────────────────────────────── */

/* SVG bar chart rendered by D3 inside this element */
#dp-bars { width: 100%; height: 220px; }

/* Large ε value display in the control panel */
.epsilon-display {
  font-family: var(--font-mono); font-size: 1.4rem;
  font-weight: 600; color: var(--mint);
}

/* Rows in the DP stats panel (e.g. avg absolute error, privacy guarantee) */
.stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.stat-label { font-size: 0.75rem; color: var(--text-dim); font-family: var(--font-mono); }
.stat-val   { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500; }


/* ─────────────────────────────────────────────────────────────────────────────
   14. Module-specific — PPRL (Privacy-Preserving Record Linkage)
   ───────────────────────────────────────────────────────────────────────────── */

/* 3-column grid: Agency A | divider | Agency B */
.pprl-arena {
  display: grid; grid-template-columns: 1fr 60px 1fr;
  gap: 0; align-items: start; margin-top: 4px;
}

/* Vertical red divider between the two agencies */
.pprl-divider {
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; padding-top: 36px;
  color: var(--coral); font-size: 1.2rem;
}
.pprl-divider span {
  width: 2px; flex: 1;
  background: linear-gradient(to bottom, var(--coral-dim), transparent);
  margin-top: 6px;
}

/* Individual record row in either agency panel */
.record-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  padding: 6px 8px; border-radius: 6px; border: 1px solid transparent;
  transition: all 0.3s; font-size: 0.75rem; font-family: var(--font-mono);
}
/* Green highlight when a match is found across agencies */
.record-row.matched {
  border-color: var(--mint) !important;
  background: rgba(0,229,160,0.08) !important;
}

.record-name  { color: var(--coral); font-weight: 500; min-width: 90px; }
.record-dob   { color: var(--text-dim); font-size: 0.7rem; }

/* Bloom-filter hash — hidden until the encode step animates it visible */
.record-hash {
  color: var(--text-dim); font-size: 0.65rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 120px; opacity: 0; transition: opacity 0.4s;
}
.record-hash.visible { opacity: 1; color: var(--mint); }

/* Wrapper needed for absolutely-positioned SVG match-line overlay */
.pprl-outer  { position: relative; }
svg.pprl-svg {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────────────────────
   15. Module-specific — MPC (Secure Multi-Party Computation)
   ───────────────────────────────────────────────────────────────────────────── */

/* Three school cards side-by-side */
.mpc-schools {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-bottom: 14px;
}
.school-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px; text-align: center;
}
.school-card .school-name {
  font-size: 0.7rem; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-family: var(--font-mono); margin-bottom: 8px;
}

/* Score value: shown as ??? until the MPC reveal step */
.school-score {
  font-size: 2.2rem; font-weight: 800;
  font-family: var(--font-mono); color: var(--coral);
  transition: all 0.5s;
}
.school-score.revealed { color: var(--mint); }
.school-score.hidden-score::after { content: '???'; }

/* Central result box showing the computed aggregate */
.mpc-center {
  background: var(--panel2); border: 1px dashed var(--border2);
  border-radius: 10px; padding: 16px; text-align: center; margin-bottom: 14px;
}
.mpc-result {
  font-size: 2rem; font-weight: 800;
  color: var(--amber); font-family: var(--font-mono);
  min-height: 48px; transition: all 0.5s;
}

/* Secret-share chips that animate in during the MPC simulation */
.share-flow {
  display: flex; gap: 6px; justify-content: center;
  flex-wrap: wrap; margin: 8px 0; min-height: 28px;
}
.share-chip {
  padding: 3px 8px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 0.72rem;
  border: 1px solid; opacity: 0; transition: opacity 0.3s;
}
.share-chip.show { opacity: 1; }


/* ─────────────────────────────────────────────────────────────────────────────
   16. Module-specific — Federated Learning
   ───────────────────────────────────────────────────────────────────────────── */

/* D3 network diagram canvas */
#fl-canvas { width: 100%; height: 260px; }

/* Colour key beneath the network diagram */
.fl-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.fl-legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; color: var(--text-dim); font-family: var(--font-mono);
}
.fl-legend-dot { width: 10px; height: 10px; border-radius: 50%; }


/* ─────────────────────────────────────────────────────────────────────────────
   17. Module-specific — Synthetic Data
   ───────────────────────────────────────────────────────────────────────────── */

/* Real vs Synthetic toggle switch */
.synth-toggle {
  display: flex; background: var(--panel2); border-radius: 8px;
  border: 1px solid var(--border); overflow: hidden;
  margin-bottom: 12px; width: fit-content;
}
.toggle-opt {
  padding: 8px 18px; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s; color: var(--text-dim);
}
.toggle-opt.active { background: var(--mint); color: var(--bg); }

/* Tab / phase-stepper button — used in Synthetic Data module */
.btn-tab {
  padding: 7px 14px; border-radius: 6px; border: 1px solid var(--border2);
  cursor: pointer; font-family: var(--font-display); font-size: 0.78rem; font-weight: 600;
  color: var(--text-dim); background: transparent; white-space: nowrap;
  transition: all 0.2s;
}
.btn-tab:hover  { color: var(--text); border-color: var(--mint); }
.btn-tab.active { background: var(--mint); color: var(--bg); border-color: var(--mint); }

/* ── DP Synthetic panel ────────────────────────────────────────────────────────
   All backgrounds use rgba tints of existing palette tokens so they adapt to
   both dark and light mode without separate overrides.
   ─────────────────────────────────────────────────────────────────────────── */

/* Stage rows inside each pipeline column */
.dp-stage       { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: .78rem; line-height: 1.5; display: flex; flex-direction: column; gap: 4px; transition: background .3s; }
.dp-stage:last-child { border-bottom: none; }
.dp-stage-num   { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: .65rem; font-weight: 700; margin-right: 6px; flex-shrink: 0; }

/* Plain (unprotected) pipeline */
.dp-pipe-plain-wrap   { border: 1px solid var(--border2); border-radius: 8px; overflow: hidden; }
.dp-pipe-plain-header { background: var(--panel2); color: var(--text-dim); padding: 9px 13px; font-size: .78rem; font-weight: 700; }
.dp-stage-num-plain   { background: var(--border2); color: var(--text-dim); }

/* DP (protected) pipeline */
.dp-pipe-dp-wrap   { border: 2px solid var(--mint); border-radius: 8px; overflow: hidden; }
.dp-pipe-dp-header { background: rgba(0,229,160,0.07); color: var(--mint); padding: 9px 13px; font-size: .78rem; font-weight: 700; }
.dp-stage-num-dp   { background: rgba(0,229,160,0.12); color: var(--mint); }

/* Record tiles */
.dp-recs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.dp-rec  { width: 22px; height: 22px; border-radius: 4px; font-size: .6rem; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.dp-rec-real      { background: rgba(77,159,255,0.10);  border: 1px solid var(--blue);  color: var(--blue); }
.dp-rec-outlier   { background: rgba(255,61,90,0.14);   border: 2px solid var(--coral); color: var(--coral); }
.dp-rec-synth     { background: rgba(0,229,160,0.10);   border: 1px solid var(--mint);  color: var(--mint); }
.dp-rec-leaked    { background: rgba(255,61,90,0.20);   border: 2px solid var(--coral); color: var(--coral); transform: scale(1.1); }
.dp-rec-synth-dp  { background: rgba(0,229,160,0.07);   border: 1px dashed var(--mint); color: var(--mint); }
.dp-rec-protected { background: rgba(0,229,160,0.04);   border: 1px dashed var(--mint); color: var(--mint); opacity: .55; }

/* Attack result boxes */
.dp-attack-fail { background: rgba(255,61,90,0.10);  color: var(--coral); border: 1px solid var(--coral); border-radius: 6px; padding: 9px 12px; font-size: .76rem; font-weight: 600; margin-top: 8px; }
.dp-attack-pass { background: rgba(0,229,160,0.07);  color: var(--mint);  border: 1px solid var(--mint);  border-radius: 6px; padding: 9px 12px; font-size: .76rem; font-weight: 600; margin-top: 8px; }

/* Training badges */
.dp-badge       { display: inline-block; padding: 1px 7px; border-radius: 8px; font-size: .63rem; font-weight: 700; margin-left: 6px; }
.dp-badge-amber { background: rgba(255,201,64,0.12);  color: var(--amber); border: 1px solid var(--amber); }
.dp-badge-green { background: rgba(0,229,160,0.10);   color: var(--mint);  border: 1px solid var(--mint); }

/* Epsilon slider and value display */
.dp-eps-slider {
  -webkit-appearance: none; width: 100%; height: 6px; border-radius: 3px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, var(--mint), var(--amber), var(--coral));
}
.dp-eps-val { font-family: monospace; font-size: .85rem; color: var(--mint); font-weight: 700; }

/* Epsilon interpretation box — base + three state modifiers */
.dp-eps-interp          { margin-top: 6px; font-size: .71rem; padding: 7px 10px; border-radius: 6px; border-left: 2px solid var(--mint); background: rgba(0,229,160,0.05); }
.dp-eps-interp-strict   { border-color: var(--mint)  !important; background: rgba(0,229,160,0.05)  !important; }
.dp-eps-interp-moderate { border-color: var(--amber) !important; background: rgba(255,201,64,0.05) !important; }
.dp-eps-interp-loose    { border-color: var(--coral) !important; background: rgba(255,61,90,0.05)  !important; }

/* Advanced panel chrome */
.dp-panel-advanced { border-color: var(--purple) !important; margin-top: 20px; }
.dp-panel-advanced .panel-title { color: var(--purple); margin-bottom: 0; }
.dp-emerging-badge { background: rgba(176,111,255,0.12); color: var(--purple); border: 1px solid var(--purple); border-radius: 10px; padding: 1px 8px; font-size: .65rem; font-weight: 700; }
.dp-insight { background: var(--panel2); border-left: 3px solid var(--purple); border-radius: 0 6px 6px 0; padding: 12px 15px; font-size: .79rem; color: var(--text-dim); line-height: 1.6; }


/* ─────────────────────────────────────────────────────────────────────────────
   18. Module-specific — Trusted Execution Environments (TEE)
   ───────────────────────────────────────────────────────────────────────────── */

/* 3-column diagram: Outside (red) | Enclave (amber) | Outside (green) */
.tee-diagram {
  display: grid; grid-template-columns: 1fr 180px 1fr;
  gap: 0; align-items: stretch; min-height: 200px;
}

/* Left side — data source, untrusted zone */
.tee-outside {
  background: rgba(255,61,90,0.05); border: 1px solid rgba(255,61,90,0.2);
  border-radius: 10px 0 0 10px; padding: 16px;
}

/* Middle — the secure hardware enclave */
.tee-enclave {
  background: rgba(0,0,0,0.4);
  border-top: 1px solid var(--amber); border-bottom: 1px solid var(--amber);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 12px;
  position: relative; overflow: hidden;
}
/* Diagonal hatching pattern to visually indicate the enclave boundary */
.tee-enclave::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,201,64,0.03) 0px, rgba(255,201,64,0.03) 1px,
    transparent 1px, transparent 8px
  );
}

/* Right side — approved output zone */
.tee-outside-right {
  background: rgba(0,229,160,0.05); border: 1px solid rgba(0,229,160,0.2);
  border-radius: 0 10px 10px 0; padding: 16px;
}

/* Section label inside a TEE column */
.tee-label {
  font-size: 0.65rem; font-family: var(--font-mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px;
}

/* Individual data record items flowing through the diagram */
.data-packet {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  padding: 5px 8px; border-radius: 5px; font-size: 0.72rem;
  font-family: var(--font-mono); transition: all 0.4s;
}
/* Three packet states: plaintext → encrypted → result */
.packet-plain  { background: rgba(255,61,90,0.1);   border: 1px solid rgba(255,61,90,0.25);   color: var(--coral); }
.packet-enc    { background: rgba(255,201,64,0.1);  border: 1px solid rgba(255,201,64,0.25);  color: var(--amber); }
.packet-result { background: rgba(0,229,160,0.1);   border: 1px solid rgba(0,229,160,0.25);   color: var(--mint);  }

.lock-icon { font-size: 0.9rem; }

/* Hardware vault icon in the enclave */
.tee-vault {
  width: 70px; height: 70px; border: 2px solid var(--amber);
  border-radius: 12px; display: flex; align-items: center;
  justify-content: center; font-size: 2rem; position: relative;
  background: rgba(0,0,0,0.5);
}
/* Pulsing animation while the enclave is running a computation */
.tee-vault.processing { animation: pulse 0.8s ease infinite; border-color: var(--mint); }

/* Animated directional arrow between diagram columns */
.flow-arrow {
  display: flex; align-items: center; justify-content: center;
  padding: 6px 0; color: var(--text-dim); font-size: 1.2rem;
  opacity: 0; transition: opacity 0.4s;
}
.flow-arrow.show { opacity: 1; }


/* ─────────────────────────────────────────────────────────────────────────────
   19. Module-specific — Comparison table
   ───────────────────────────────────────────────────────────────────────────── */
.compare-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.compare-table th {
  padding: 10px 14px; font-size: 0.7rem; font-family: var(--font-mono);
  color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border); text-align: left;
}
/* Technique name column header — slightly larger than dimension headers */
.compare-table th:first-child { color: var(--text-bright); font-size: 0.78rem; }

.compare-table td {
  padding: 9px 14px; border-bottom: 1px solid rgba(30,47,80,0.4);
  font-size: 0.78rem; vertical-align: middle;
}
.compare-table tr:hover td { background: rgba(255,255,255,0.02); }
/* Technique name cell — bold, separated from dimension values */
.compare-table td:first-child {
  font-weight: 700; color: var(--text-bright); font-size: 0.8rem;
  border-right: 1px solid var(--border);
}

/* Colour-coded cell values in the comparison table */
.cell-yes     { color: var(--mint);  font-family: var(--font-mono); font-size: 0.75rem; }
.cell-no      { color: var(--coral); font-family: var(--font-mono); font-size: 0.75rem; }
.cell-partial { color: var(--amber); font-family: var(--font-mono); font-size: 0.75rem; }

/* Dot-bar visualisation for implementation complexity */
.complexity-bar { display: flex; gap: 3px; align-items: center; }
.complexity-dot       { width: 8px; height: 8px; border-radius: 50%; background: var(--border2); }
.complexity-dot.filled { background: var(--amber); }


/* ─────────────────────────────────────────────────────────────────────────────
   20. Step walkthrough list
   Animated numbered steps shown during each module's simulation.
   States: default (dim) → active (highlighted) → done (slightly dim)
   ───────────────────────────────────────────────────────────────────────────── */
.step-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

.step {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px;
  border-radius: 6px; border: 1px solid var(--border);
  font-size: 0.78rem; opacity: 0.4; transition: all 0.4s;
}
.step.active { opacity: 1; background: rgba(0,229,160,0.05); border-color: rgba(0,229,160,0.3); }
.step.done   { opacity: 0.7; }

/* Circular step number badge */
.step-num {
  width: 20px; height: 20px; border-radius: 50%; background: var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-family: var(--font-mono);
  flex-shrink: 0; color: var(--text-dim);
}
.step.active .step-num { background: var(--mint);     color: var(--bg);  }
.step.done   .step-num { background: var(--mint-dim); color: white;      }


/* ─────────────────────────────────────────────────────────────────────────────
   21. Module transition
   Wraps all module content; re-triggers slideIn when module changes.
   ───────────────────────────────────────────────────────────────────────────── */
#module-content { animation: slideIn 0.25s ease; }


/* ─────────────────────────────────────────────────────────────────────────────
   22. Tooltip system
   Floating definition panel that appears on hover or click of .tip-lbl elements.
   States: default (hidden) → .show (visible) → .pinned (click-locked, with ✕)
   ───────────────────────────────────────────────────────────────────────────── */
#tt {
  position: fixed; z-index: 9999; pointer-events: none;
  max-width: 300px; min-width: 200px;
  background: #0e1c38; border: 1px solid var(--border2);
  border-radius: 9px; padding: 11px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,229,160,0.08);
  opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease;
  transform: translateY(4px);
  font-family: var(--font-display); font-size: 0.76rem; line-height: 1.55;
  color: var(--text); will-change: transform, opacity;
}
#tt.show   { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Term label at top of tooltip (all-caps monospace) */
#tt-term {
  font-size: 0.65rem; font-family: var(--font-mono); font-weight: 600;
  color: var(--mint); text-transform: uppercase; letter-spacing: 0.07em;
  margin-bottom: 5px;
}

#tt-body { color: var(--text); }

/* Close button — hidden by default, shown only in pinned state */
#tt-close {
  display: none; position: absolute; top: 7px; right: 9px;
  font-size: 0.7rem; color: var(--text-dim); cursor: pointer;
  pointer-events: auto; background: none; border: none;
  padding: 2px 4px; font-family: var(--font-mono);
}

/* Pinned state: user clicked a tooltip to lock it open */
#tt.pinned #tt-close { display: block; }
#tt.pinned { pointer-events: auto; border-color: rgba(0,229,160,0.35); }

/* The inline trigger element that opens a tooltip on hover/click */
.tip-lbl {
  cursor: help; display: inline-flex; align-items: center; gap: 4px;
}
/* Small circular ⓘ icon next to the label text */
.tip-lbl .tip-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--border2); color: var(--text-dim);
  font-size: 0.55rem; font-family: var(--font-mono);
  flex-shrink: 0; font-style: normal;
  transition: border-color 0.15s, color 0.15s;
}
.tip-lbl:hover .tip-icon,
.tip-lbl.pinned .tip-icon { border-color: var(--mint); color: var(--mint); }


/* =============================================================================
   23. Module-specific tab active states
   These apply to the DP Global/Local tab switcher and the Traditional
   De-identification sub-technique tab switcher. Defined here rather than
   injected inline so the stylesheet stays the single source of truth.
   ============================================================================= */

/* DP tab switcher — mint accent when active */
.dp-tab-btn.active-dp  { border-color: var(--mint)   !important; color: var(--mint)   !important; }

/* Traditional De-id tab switcher — purple accent when active */
.active-trad           { border-color: #b06fff !important; color: #b06fff !important; }


/* =============================================================================
   24. Dark / Light mode theming
   The default is dark mode (the :root values above).
   When <body> has class "light-mode", these properties override the dark tokens
   with light-mode brand colours:
     Primary:   #01B8FC (blue), #231f23 (near-black), #59545b (dark grey)
     Secondary: #CCF1FE (light blue), #FFBD59 (gold), #7ED957 (green)
   ============================================================================= */

body.light-mode {
  /* Background layers */
  --bg:       #f4f9ff;
  --panel:    #ffffff;
  --panel2:   #e8f4fd;

  /* Border shades */
  --border:   #cce4f7;
  --border2:  #99cef0;

  /* Accent colours mapped to light-mode palette */
  --mint:      #01B8FC;   /* Primary Blue — replaces dark-mode mint */
  --mint-dim:  #0190c8;
  --coral:     #e03050;   /* kept warm-red for "risk" indicators */
  --coral-dim: #f7c5ce;
  --amber:     #FFBD59;   /* Secondary Gold */
  --blue:      #0080cc;   /* deeper blue for info callouts */
  --blue-dim:  #CCF1FE;   /* light blue — used as subtle bg tint */

  /* Text hierarchy */
  --text:        #231f23;   /* near-black */
  --text-dim:    #59545b;   /* dark grey */
  --text-bright: #06080c;   /* near-black for headings */

  /* Override hard-coded dark backgrounds */
  background: var(--bg);
  color: var(--text);
}

/* Header gradient in light mode */
body.light-mode header {
  background: linear-gradient(90deg, #e0f4fe 0%, #f4f9ff 100%);
  border-bottom-color: var(--border);
}

/* Nav panel in light mode */
body.light-mode nav { background: var(--panel); }

/* Active nav button in light mode uses primary blue */
body.light-mode .nav-btn.active { color: #ffffff; background: var(--mint); }

/* Trad module active button keeps its purple */
body.light-mode .nav-btn.trad-btn.active { background: #8b4fc8; color: #fff; }

/* Tooltip in light mode */
body.light-mode #tt {
  background: #fff;
  border-color: var(--border2);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 0 0 1px rgba(1,184,252,0.18);
}

/* Panels in light mode */
body.light-mode .panel {
  background: var(--panel);
  border-color: var(--border);
}

/* DP / FL canvas areas need explicit bg in light mode */
body.light-mode canvas,
body.light-mode svg { background: transparent; }


/* =============================================================================
   25. Theme toggle button — fixed in the upper-right corner
   Uses an industry-standard pill/switch pattern with a sun ☀ / moon ☾ icon.
   ============================================================================= */

#theme-toggle {
  position: fixed;
  top: 16px;
  right: 24px;
  z-index: 1000;

  display: flex;
  align-items: center;
  gap: 8px;

  background: var(--panel2);
  border: 1px solid var(--border2);
  border-radius: 999px;
  padding: 6px 12px 6px 10px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  user-select: none;
  white-space: nowrap;
}

#theme-toggle:hover {
  border-color: var(--mint);
  color: var(--mint);
}

/* The sliding pill track */
#theme-toggle .toggle-track {
  position: relative;
  width: 34px;
  height: 18px;
  background: var(--border);
  border-radius: 999px;
  transition: background 0.25s;
  flex-shrink: 0;
}
body.light-mode #theme-toggle .toggle-track {
  background: var(--mint);
}

/* The sliding knob */
#theme-toggle .toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--text-dim);
  border-radius: 50%;
  transition: transform 0.25s, background 0.25s;
}
body.light-mode #theme-toggle .toggle-knob {
  transform: translateX(16px);
  background: #ffffff;
}

/* Icon characters */
#theme-toggle .toggle-icon { font-size: 0.85rem; line-height: 1; }

/* ── ZKP Module ────────────────────────────────────────────────────────────── */

/* Marble analogy */
.zkp-marble-view { display:flex; justify-content:center; gap:24px; margin:16px 0; }
.zkp-marble { width:64px; height:64px; border-radius:50%; box-shadow:inset -10px -10px 20px rgba(0,0,0,.4),0 4px 10px rgba(0,0,0,.3); transition:background .4s,transform .3s; }
.zkp-marble.red    { background:radial-gradient(circle at 35% 35%,#ff6b6b,#c0392b); }
.zkp-marble.green  { background:radial-gradient(circle at 35% 35%,#55efc4,#00b894); }
.zkp-marble.hidden { background:radial-gradient(circle at 35% 35%,rgba(120,120,130,0.7),rgba(55,55,65,0.9)); }
.zkp-marble.swap-anim { transform:scale(1.15); }
.zkp-marble-label { text-align:center; font-size:.7rem; color:var(--text-dim); margin-top:6px; }

/* Confidence bar */
.zkp-conf-wrap { background:var(--panel2); border-radius:6px; height:12px; margin:10px 0; overflow:hidden; }
.zkp-conf-bar  { height:100%; background:linear-gradient(90deg,var(--blue),var(--mint)); border-radius:6px; transition:width .5s ease; width:0%; }
.zkp-conf-row  { display:flex; justify-content:space-between; font-size:.78rem; color:var(--text-dim); }

/* Three-principle grid — hidden until first principle is unlocked */
.zkp-principles { display:none; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:20px; }
.zkp-principles.active { display:grid; }
@media(max-width:600px){ .zkp-principles.active { grid-template-columns:1fr; } }
.zkp-principle { background:var(--panel2); border:1px solid var(--border); border-radius:8px; padding:14px; opacity:0; transform:translateY(12px); transition:all .5s; }
.zkp-principle.revealed { opacity:1; transform:translateY(0); }
.zkp-p-icon  { font-size:1.4rem; margin-bottom:6px; }
.zkp-p-label { font-weight:700; font-size:.82rem; margin-bottom:4px; }
.zkp-p-label.mint   { color:var(--mint); }
.zkp-p-label.blue   { color:var(--blue); }
.zkp-p-label.purple { color:var(--purple); }
.zkp-p-desc  { font-size:.75rem; color:var(--text-dim); line-height:1.4; }

/* Scenario selector */
.zkp-scenario-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:24px; }
@media(max-width:620px){ .zkp-scenario-grid { grid-template-columns:1fr; } }
.zkp-sc-card { background:var(--panel); border:2px solid var(--border); border-radius:10px; padding:18px; cursor:pointer; transition:all .2s; text-align:left; }
.zkp-sc-card:hover    { border-color:var(--blue); background:var(--panel2); }
.zkp-sc-card.selected { border-color:var(--mint); background:rgba(0,229,160,0.05); }
.zkp-sc-icon  { font-size:1.8rem; margin-bottom:8px; }
.zkp-sc-title { font-weight:700; font-size:.9rem; margin-bottom:4px; }
.zkp-sc-desc  { font-size:.75rem; color:var(--text-dim); line-height:1.4; }

/* Proof arena actors */
.zkp-proof-arena { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:24px; }
.zkp-actors { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; gap:12px; }
.zkp-actor  { text-align:center; flex:0 0 100px; }
.zkp-actor-icon { width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin:0 auto 8px; border:2px solid var(--border); }
.zkp-actor-icon.prover   { border-color:var(--mint); background:rgba(0,229,160,0.06); }
.zkp-actor-icon.verifier { border-color:var(--blue); background:rgba(77,159,255,0.06); }
.zkp-actor-label { font-size:.75rem; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; }
.zkp-actor-role  { font-size:.7rem; color:var(--text-dim); margin-top:2px; }

/* Proof channel */
.zkp-channel      { flex:1; position:relative; display:flex; align-items:center; justify-content:center; min-height:80px; }
.zkp-channel-line { position:absolute; top:50%; left:0; right:0; height:2px; background:var(--border); transform:translateY(-50%); }
.zkp-channel-msg  { background:var(--panel2); border:1px solid var(--border); border-radius:6px; padding:8px 12px; font-size:.75rem; text-align:center; max-width:180px; z-index:1; transition:all .4s; opacity:0; transform:scale(.9); }
.zkp-channel-msg.show  { opacity:1; transform:scale(1); }
.zkp-channel-msg.mint  { border-color:var(--mint);  color:var(--mint); }
.zkp-channel-msg.blue  { border-color:var(--blue);  color:var(--blue); }
.zkp-channel-msg.amber { border-color:var(--amber); color:var(--amber); }

/* Step log */
.zkp-step-log   { margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.zkp-step-entry { background:var(--panel2); border-left:3px solid var(--border); border-radius:0 6px 6px 0; padding:10px 14px; font-size:.78rem; line-height:1.5; opacity:0; transform:translateX(-8px); transition:all .4s; }
.zkp-step-entry.show   { opacity:1; transform:translateX(0); }
.zkp-step-entry.mint   { border-color:var(--mint); }
.zkp-step-entry.blue   { border-color:var(--blue); }
.zkp-step-entry.amber  { border-color:var(--amber); }
.zkp-step-entry.purple { border-color:var(--purple); }
.zkp-step-entry strong { color:var(--text); }

/* FERPA pipeline */
.zkp-pipeline { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:620px){ .zkp-pipeline { grid-template-columns:1fr; } }
.zkp-pipe         { border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.zkp-pipe-header  { padding:12px 16px; font-weight:700; font-size:.82rem; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--border); }
.zkp-pipe-header.legacy { background:rgba(255,99,88,0.1);  color:var(--coral); }
.zkp-pipe-header.zkp-ok { background:rgba(0,229,160,0.08); color:var(--mint); }
.zkp-pipe-steps   { padding:14px; }
.zkp-pipe-step    { display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:.78rem; line-height:1.4; }
.zkp-pipe-step:last-child { border-bottom:none; }
.zkp-pipe-step-icon { font-size:1rem; flex-shrink:0; margin-top:1px; }
.zkp-pipe-result  { padding:12px 16px; font-size:.78rem; font-weight:600; display:flex; align-items:center; gap:8px; }
.zkp-pipe-result.bad  { background:rgba(255,99,88,0.1);  color:var(--coral); }
.zkp-pipe-result.good { background:rgba(0,229,160,0.08); color:var(--mint); }

/* Tradeoff tiles */
.zkp-tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media(max-width:500px){ .zkp-tiles { grid-template-columns:1fr; } }
.zkp-tile       { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:18px; }
.zkp-tile-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.zkp-tile-label.mint   { color:var(--mint); }
.zkp-tile-label.blue   { color:var(--blue); }
.zkp-tile-label.amber  { color:var(--amber); }
.zkp-tile-label.purple { color:var(--purple); }
.zkp-rating { display:flex; gap:4px; margin-bottom:8px; }
.zkp-dot              { width:14px; height:14px; border-radius:50%; background:var(--border); }
.zkp-dot.filled.mint   { background:var(--mint); }
.zkp-dot.filled.blue   { background:var(--blue); }
.zkp-dot.filled.amber  { background:var(--amber); }
.zkp-dot.filled.purple { background:var(--purple); }
.zkp-tile-text { font-size:.78rem; color:var(--text-dim); line-height:1.5; }

/* NIZKP output area */
.zkp-nizkp { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:14px; font-size:.78rem; min-height:80px; color:var(--text-dim); font-family:var(--font-mono); line-height:1.8; }

/* Resource cards */
.zkp-resource-item  { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:14px 16px; display:flex; gap:12px; align-items:flex-start; }
.zkp-resource-icon  { font-size:1.2rem; flex-shrink:0; }
.zkp-resource-title { font-weight:600; font-size:.85rem; margin-bottom:2px; }
.zkp-resource-desc  { font-size:.75rem; color:var(--text-dim); line-height:1.4; }
.zkp-resource-tag   { display:inline-block; background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:1px 8px; font-size:.65rem; color:var(--text-dim); margin-top:4px; }