/* Expand-on-click figure image styles */
.expand-on-click .expandable-img {
  display: block;
  margin: 0 auto;
  max-width: 420px;
  width: 100%;
  height: auto;
  cursor: zoom-in;
  transition: max-width 0.3s cubic-bezier(.4,1.4,.6,1), box-shadow 0.3s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.expand-on-click.expanded .expandable-img {
  max-width: 96vw;
  width: auto;
  cursor: zoom-out;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  z-index: 10;
}
.expand-on-click {
  text-align: center;
  margin: var(--space-5) auto;
  cursor: pointer;
  position: relative;
}
.expand-on-click figcaption {
  font-size: .9rem;
  color: var(--text-secondary);
  margin-top: var(--space-2);
  line-height: 1.35;
}
:root {
  --bg-light:#FFFFFF; --bg-subtle:#F7F9FB; --bg-panel:#F4F6F8;
  --text-primary:#1E2430; --text-secondary:#4A5364;
  --accent-primary:#0A66C2; --accent-secondary:#FF7A18;
  --border:#D5D9E2; --figure-frame:#E3E8F0;
  --divergence-start:#2458B5; --divergence-mid:#DDDDDD; --divergence-end:#E66B2D;
  --font-heading:'Inter','Source Sans 3',sans-serif; --font-body:system-ui,'Segoe UI',Roboto,sans-serif; --font-mono:'JetBrains Mono',monospace;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px;
  --transition-fast:120ms; --transition-med:220ms;
  --max-width:72ch;
}
@media (prefers-color-scheme: dark){
  :root { 
    --bg-light:#12151A; 
    --bg-subtle:#1A1F26;
    --bg-panel:#1F242C; 
    --text-primary:#E6ECF3; 
    --text-secondary:#B4BCC8;
    --accent-primary:#4093E8; 
    --border:#2B313C; 
    --figure-frame:#2B313C;
  }
  .modal-content pre { background:var(--bg-subtle); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
}
html,body { margin:0; padding:0; font-family:var(--font-body); background:var(--bg-light); color:var(--text-primary); line-height:1.55; }
main { max-width:var(--max-width); margin:0 auto; padding:var(--space-6) var(--space-4); }
h1,h2,h3,h4 { font-family:var(--font-heading); line-height:1.2; }
a.logo-link, .logo-link { display:inline-flex; align-items:center; margin-right:var(--space-3); }
.trp-logo { display:block; height:32px; width:auto; aspect-ratio:auto; }
.site-nav { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-4); }
a.site-nav-link, .site-nav a { position:relative; }
.site-nav a.active { color:var(--accent-secondary); font-weight:600; }
.site-nav a.active::after { content:""; position:absolute; left:0; bottom:-4px; height:3px; width:100%; background:linear-gradient(90deg,var(--accent-secondary),var(--accent-primary)); border-radius:2px; }
a.wordmark, .wordmark { font-family:var(--font-heading); font-weight:600; font-size:1rem; line-height:1.05; display:inline-flex; flex-direction:column; margin-left:6px; }
.wordmark .principle { font-weight:500; }
.nav-sep { color:var(--text-secondary); opacity:.65; font-size:.85rem; }
@media (max-width:680px){ .wordmark { display:none; } }
a { color:var(--accent-primary); text-decoration:none; }
a:hover,a:focus { text-decoration:underline; }
.hero { padding:var(--space-6) 0 var(--space-5); }
.tagline { font-size:1.125rem; color:var(--text-secondary); }
.cta-group { display:flex; gap:var(--space-2); margin-top:var(--space-3); flex-wrap:wrap; }
.btn { display:inline-block; padding:.55rem 1rem; border-radius:var(--radius-md); font-weight:600; border:1px solid transparent; cursor:pointer; font-size:.95rem; }
.btn.primary { background:var(--accent-primary); color:#fff; }
.btn.secondary { background:var(--accent-secondary); color:#fff; }
.btn.ghost { background:transparent; border-color:var(--border); color:var(--text-primary); }
.figure-grid { display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.figure-card { background:var(--bg-panel); border:1px solid var(--figure-frame); padding:var(--space-3); border-radius:var(--radius-md); position:relative; }
.figure-card img { max-width:100%; height:auto; display:block; border-radius:var(--radius-sm); }
.figure-card.missing { outline:2px dashed #d9534f; }
.figure-card.missing .placeholder { background:#38201f; color:#f2d7d5; font-weight:600; }
.caption { font-size:.85rem; margin-top:var(--space-2); }
.caption .tech { display:none; }
.caption.show-tech .tech { display:inline; }
.caption.show-tech .lay { display:none; }
.audience-block { margin-bottom:var(--space-6); }
.gallery-toolbar { display:flex; gap:var(--space-2); margin:var(--space-3) 0 var(--space-4); }
.gallery-mode-btn { padding:.4rem .85rem; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-md); cursor:pointer; font-size:.8rem; }
.gallery-mode-btn.active { background:var(--accent-primary); color:#fff; border-color:var(--accent-primary); }
.figure-actions { display:flex; gap:var(--space-1); margin-top:var(--space-2); }
.figure-actions .caption-toggle { background:var(--bg-subtle); border:1px solid var(--border); padding:.25rem .6rem; font-size:.7rem; border-radius:var(--radius-sm); cursor:pointer; color:var(--text-primary); }
.figure-actions .caption-toggle.active { background:var(--accent-secondary); color:#fff; border-color:var(--accent-secondary); }
.figure-actions .caption-toggle:hover,
.figure-actions .caption-toggle:focus-visible { background:color-mix(in srgb, var(--bg-subtle) 88%, var(--text-primary)); outline:2px solid transparent; }
@media (prefers-color-scheme: dark){
  /* Improve contrast when unselected in dark mode */
  .figure-actions .caption-toggle { background:color-mix(in srgb, var(--bg-subtle) 70%, #000); border-color:color-mix(in srgb, var(--border) 80%, #fff 20%); color:#E8EEF7; }
  .figure-actions .caption-toggle:hover,
  .figure-actions .caption-toggle:focus-visible { background:color-mix(in srgb, var(--bg-subtle) 55%, #000); color:#FFFFFF; }
}
.figure-card .placeholder { display:flex; align-items:center; justify-content:center; min-height:160px; background:repeating-linear-gradient(45deg,var(--bg-subtle),var(--bg-subtle) 8px,var(--bg-panel) 8px,var(--bg-panel) 16px); color:var(--text-secondary); font-size:.8rem; font-style:italic; border:1px dashed var(--border); border-radius:var(--radius-sm); }
.controls-panel { display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-3); background:var(--bg-panel); border:1px solid var(--figure-frame); border-radius:var(--radius-md); max-width:340px; }
.dataset-checkboxes { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:var(--space-2); }
.charts { display:grid; gap:var(--space-5); margin-top:var(--space-5); }
.chart { min-height:300px; background:var(--bg-panel); border:1px solid var(--figure-frame); border-radius:var(--radius-md); padding:var(--space-2); }
@media (min-width:960px){ .interactive-layout { display:grid; grid-template-columns:360px 1fr; gap:var(--space-6); } }
.breadcrumbs { font-size:.8rem; margin-bottom:var(--space-3); color:var(--text-secondary); }
.breadcrumbs a { color:inherit; }
.hidden { display:none !important; }
/* Modal */
.modal { position:fixed; inset:0; display:none; z-index:1000; }
.modal.open { display:block; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.45); backdrop-filter:blur(2px); opacity:0; animation:fadeIn var(--transition-med) forwards; }
.modal.open .modal-backdrop { animation:fadeIn var(--transition-med) forwards; }
.modal-content { position:absolute; top:10%; left:50%; transform:translate(-50%, -8px) scale(.965); opacity:0; background:var(--bg-panel); color:var(--text-primary); border:1px solid var(--figure-frame); border-radius:var(--radius-md); width:min(640px,92%); max-height:70vh; display:flex; flex-direction:column; box-shadow:0 6px 18px rgba(0,0,0,0.25); animation:modalIn var(--transition-med) cubic-bezier(.16,.84,.44,1) forwards; }
.modal.closing .modal-content { animation:modalOut var(--transition-fast) ease forwards; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes modalIn { from { opacity:0; transform:translate(-50%, -12px) scale(.94); } to { opacity:1; transform:translate(-50%, 0) scale(1); } }
@keyframes modalOut { from { opacity:1; transform:translate(-50%, 0) scale(1); } to { opacity:0; transform:translate(-50%, -8px) scale(.965); } }
@media (prefers-reduced-motion: reduce){
  .modal-backdrop, .modal-content { animation:none !important; opacity:1 !important; transform:translate(-50%,0) scale(1) !important; }
}
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--figure-frame); }
.modal-header h3 { margin:0; font-size:1rem; }
#prov-close { background:transparent; border:0; font-size:1.25rem; line-height:1; cursor:pointer; color:var(--text-secondary); }
#prov-close:hover { color:var(--text-primary); }
.modal-content pre { margin:0; padding:var(--space-3) var(--space-4); background:var(--bg-subtle); color:var(--text-primary); border-top:1px solid var(--figure-frame); border-bottom:1px solid var(--figure-frame); overflow:auto; font-family:var(--font-mono); font-size:.7rem; line-height:1.25; }
.modal-footer { padding:var(--space-3) var(--space-4); display:flex; align-items:center; gap:var(--space-2); }
#prov-copy { background:var(--accent-primary); color:#fff; border:1px solid var(--accent-primary); padding:.4rem .8rem; border-radius:var(--radius-sm); cursor:pointer; font-size:.75rem; }
#prov-copy:hover { filter:brightness(1.05); }
#prov-copy-status { font-size:.65rem; text-transform:uppercase; letter-spacing:.5px; }
.lowconf-note { font-size:.7rem; max-width:640px; color:var(--text-secondary); margin-top:var(--space-2); margin-bottom:var(--space-3); }
.lowconf-note.hidden { display:none; }
.download-group { display:flex; flex-wrap:wrap; gap:4px; }
.download-group .small-btn { background:var(--bg-subtle); border:1px solid var(--border); padding:.35rem .6rem; border-radius:var(--radius-sm); font-size:.65rem; cursor:pointer; }
.download-group .small-btn:disabled { opacity:.45; cursor:not-allowed; }
.overlay-modes { display:flex; flex-direction:column; gap:4px; font-size:.7rem; }
.view-switch { display:inline-flex; gap:4px; margin-right:auto; }
.view-switch button { background:var(--bg-subtle); border:1px solid var(--border); padding:.3rem .6rem; font-size:.65rem; border-radius:var(--radius-sm); cursor:pointer; }
.view-switch button.active { background:var(--accent-primary); color:#fff; border-color:var(--accent-primary); }
.prov-table { width:100%; border-collapse:collapse; font-size:.65rem; margin-top:4px; }
.prov-table th, .prov-table td { border:1px solid var(--figure-frame); padding:2px 4px; text-align:left; vertical-align:top; }
.prov-table tbody tr:nth-child(odd){ background:var(--bg-subtle); }
.lowconf-inline-wrapper { display:flex; flex-direction:column; gap:4px; margin-top:4px; margin-bottom:12px; }
@media (min-width:720px){ .lowconf-inline-wrapper { flex-direction:row; align-items:flex-start; } .lowconf-inline-wrapper p { flex:1; margin:0; } }
.inline-lowconf-toggle { font-size:.7rem; display:inline-flex; align-items:center; gap:4px; background:var(--bg-panel); border:1px solid var(--border); padding:4px 8px; border-radius:var(--radius-sm); }
.inline-lowconf-toggle input { margin:0; }
/* Tooltips */
.has-term-tooltip { position:relative; cursor:help; border-bottom:1px dotted var(--accent-primary); }
.term-tooltip { position:absolute; left:0; top:100%; transform:translateY(4px); background:var(--bg-panel); color:var(--text-primary); border:1px solid var(--border); padding:4px 8px; font-size:.65rem; line-height:1.2; max-width:220px; border-radius:var(--radius-sm); box-shadow:0 4px 10px rgba(0,0,0,.15); opacity:0; pointer-events:none; transition:opacity var(--transition-fast); z-index:20; }
.term-tooltip[data-show='1'] { opacity:1; }
@media (prefers-color-scheme: dark){ .term-tooltip { background:var(--bg-subtle); } }
/* Analogy module */
.analogy-module { margin:var(--space-6) 0; padding:var(--space-5) var(--space-4); background:var(--bg-panel); border:1px solid var(--figure-frame); border-radius:var(--radius-lg); }
.analogy-module .clutch-diagram { min-height:120px; display:flex; align-items:center; justify-content:center; font-size:.75rem; color:var(--text-secondary); background:repeating-linear-gradient(45deg,var(--bg-subtle),var(--bg-subtle) 6px,var(--bg-panel) 6px,var(--bg-panel) 12px); border:1px dashed var(--border); border-radius:var(--radius-md); margin-bottom:var(--space-4); }
.analogy-module .analogy-steps { font-size:.85rem; line-height:1.45; }
.analogy-module .analogy-note { font-size:.7rem; color:var(--text-secondary); margin-top:var(--space-3); }
/* Accessibility utilities */
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; }
.no-js-warning { background:#222; color:#fff; padding:.5rem 1rem; font-size:.75rem; text-align:center; }
/* Events legend */
#events-legend { margin-top:8px; font-size:.75rem; display:flex; gap:12px; flex-wrap:wrap; }
#events-legend .legend-item { display:inline-flex; align-items:center; gap:4px; }
#events-legend .swatch { width:14px; height:6px; display:inline-block; border-radius:3px; }
#events-legend .swatch.reversal { background:#B22222; }
#events-legend .swatch.excursion { background:#8B5CF6; }
 .events-toggle { margin:8px 0; }
/* Reduced motion */
@media (prefers-reduced-motion: reduce){ * { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition:none !important; scroll-behavior:auto !important; } }

/* Hash anchor flash highlight */
.hash-target-flash { position:relative; }
.hash-target-flash::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--accent-secondary) 0%, var(--accent-primary) 100%); opacity:0.18; border-radius:4px; animation:hashFlash 2.4s ease-out forwards; pointer-events:none; }
@keyframes hashFlash { 0% { opacity:0; } 10% { opacity:0.35; } 55% { opacity:0.18; } 100% { opacity:0; } }

/* Figure centering utility */
.figure-center { margin:var(--space-5) auto; text-align:center; max-width:860px; }
.figure-wide { max-width:min(1200px, 95vw); }
.figure-center img { cursor: zoom-in; }
.zoomable img { transition: box-shadow var(--transition-fast); }
.zoomable img:hover { box-shadow:0 6px 16px rgba(0,0,0,.22); }
/* Responsive refinements for figure cards */
@media (max-width:640px){
  .figure-grid { grid-template-columns:1fr; gap:var(--space-3); }
  .figure-card { padding:var(--space-2) var(--space-2) var(--space-3); }
  .figure-card .figure-thumb { display:block; margin:-4px -4px 0; padding:0; background:transparent; border:0; }
}
/* Ensure button wrapper does not introduce inline gaps */
.figure-card .figure-thumb { padding:0; border:0; background:transparent; width:100%; text-align:left; }
.figure-card .figure-thumb img { width:100%; height:auto; aspect-ratio:auto; }
/* Guard against image narrower than container creating odd background reveal */
.figure-card { overflow:hidden; }
.figure-center img { display:block; margin:0 auto; max-width:100%; height:auto; }
.figure-center figcaption { font-size:.8rem; color:var(--text-secondary); margin-top:var(--space-2); line-height:1.35; }

/* Lightbox core styles */
.figure-lightbox { position:fixed; inset:0; display:none; z-index:2000; }
.figure-lightbox.open { display:block; }
.figure-lightbox .flb-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(2px); }
.figure-lightbox .flb-content { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--bg-panel); color:var(--text-primary); border:1px solid var(--figure-frame); border-radius:var(--radius-md); padding:var(--space-4); width:min(1000px,92%); max-height:82vh; overflow:auto; box-shadow:0 10px 28px rgba(0,0,0,.35); }
.figure-lightbox .flb-figure { margin:0; }
.figure-lightbox .flb-img { max-width:100%; height:auto; display:block; cursor:grab; transition:transform var(--transition-fast); }
.figure-lightbox .flb-img.panning { cursor:grabbing; }
.figure-lightbox .flb-caption { font-size:.75rem; color:var(--text-secondary); margin-top:var(--space-3); line-height:1.3; }
.figure-lightbox .flb-close { position:absolute; top:6px; right:6px; background:var(--bg-subtle); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:1.1rem; line-height:1; width:32px; height:32px; cursor:pointer; color:var(--text-secondary); }
.figure-lightbox .flb-close:hover { color:var(--text-primary); }
.flb-zoom-controls { position:absolute; top:6px; left:6px; display:flex; gap:4px; }
.flb-zoom-btn { background:var(--bg-subtle); border:1px solid var(--border); padding:4px 8px; font-size:.75rem; border-radius:var(--radius-sm); cursor:pointer; }
.flb-zoom-btn:hover { background:var(--accent-primary); color:#fff; border-color:var(--accent-primary); }

/* Improve readability of lightbox controls in dark mode */
@media (prefers-color-scheme: dark){
  .flb-zoom-btn { 
    background: color-mix(in srgb, var(--bg-subtle) 55%, #000 45%);
    color: #EAF1FF; 
    border-color: #3A485C;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset;
  }
  .flb-zoom-btn:hover, .flb-zoom-btn:focus-visible { 
    background: color-mix(in srgb, #1B2330 65%, var(--accent-primary) 35%);
    color:#FFFFFF; 
    border-color:#506382;
    outline:2px solid transparent;
  }
}

/* Playground (Laschamp) */
.playground-root{ margin: var(--space-5) 0; display:grid; gap: var(--space-4); }
.pg-controls fieldset{ border:1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); display:flex; flex-wrap:wrap; gap: var(--space-3); align-items:end; }
.pg-controls label{ display:flex; flex-direction:column; gap: .35rem; font-size:.95rem; }
.pg-controls label.inline{ flex-direction:row; align-items:center; gap:.5rem; }
.pg-actions{ display:flex; gap:.5rem; margin-left:auto; }
.pg-plot-wrap{ overflow:auto; background:var(--bg-subtle); border:1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem; }
.pg-metrics{ color: var(--text-secondary); font-size:.9rem; }