/* V3: readable presentation, responsive navigation and measured models. */
:root { --content-scale: 1; --container-max: 1380px; }
body { font-size: calc(1rem * var(--content-scale)); }
button, input, select, textarea { font-family: inherit; }
button { touch-action: manipulation; }
:focus-visible { outline: 3px solid #b83a60; outline-offset: 4px; }
[hidden] { display: none !important; }
.site-nav { --content-scale: 1; }
.nav-inner { max-width: 1600px; padding: 0 24px; gap: 18px; }
.nav-logo, .nav-actions { flex-shrink: 0; }
.nav-institution strong { white-space: nowrap; font-size: 13px; }
.nav-sub { font-size: 11px; }
.nav-link { display: block; white-space: nowrap; padding: 10px 11px; font-size: 13px; }
.nav-links { gap: 2px; min-width: 0; }
.text-size-toggle { display: flex; align-items: center; gap: 7px; min-height: 42px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #8a1538; padding: 8px 12px; font-weight: 700; font-size: 13px; white-space: nowrap; cursor: pointer; }
.nav-burger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.nav-mobile { max-height: calc(100dvh - 70px); overflow-y: auto; }
.container > *, .ssos-workspace > *, .builder-layout-modern > *, .activity1-grid > * { min-width: 0; }
.section-header { max-width: 950px; }
.section-title { overflow-wrap: anywhere; }
.section-desc { max-width: 850px; margin-inline: auto; }
.ssos-workspace { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.ssos-figure-container { padding: 24px; }
.ssos-detail-column { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.level-detail-card { position: static; overflow-wrap: anywhere; }
.ssos-detail-column > * { min-width: 0; }
.discussion-q-header h4 { min-width: 0; overflow-wrap: anywhere; }
.accordion-toggle { flex-shrink: 0; min-width: 32px; min-height: 44px; }
.ssos-svg-wrapper { border: none; padding: 0; max-width: 1040px; margin-inline: auto; }
#ssosSvg, #builderSvg { display: block; overflow: visible; }
.model-layer { cursor: pointer; }
.model-layer:hover > ellipse, .model-layer:focus > ellipse { stroke: #8a1538; stroke-width: 3; }
.model-layer:focus { outline: none; }
.model-layer:focus > ellipse { stroke-width: 4; }
.meso-toggle { display: flex; align-items: center; gap: 12px; margin: 10px 0 16px; padding: 14px 16px; background: #faf3f5; border-radius: 10px; font-weight: 650; cursor: pointer; }
.meso-toggle input { width: 22px; height: 22px; flex-shrink: 0; accent-color: #8a1538; }
.model-level-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 16px; }
.model-level-buttons button { border: 1px solid #d1d5db; background: #fff; color: #374151; border-radius: 8px; padding: 10px 14px; min-height: 44px; font-weight: 650; font-size: calc(.85rem * var(--content-scale)); cursor: pointer; }
.model-level-buttons button[aria-pressed=true] { color: #fff; background: #8a1538; border-color: #8a1538; }
.figure-legend-bar { gap: 16px; flex-wrap: wrap; }
.builder-layout-modern { grid-template-columns: minmax(300px, .8fr) minmax(0, 1.5fr); gap: 24px; }
.builder-editor-card { padding: 24px; }
.builder-preview-card { padding: 20px; position: static; }
.builder-canvas-wrapper { padding: 0; border: none; box-shadow: none; }
.preview-card-header { gap: 12px; flex-wrap: wrap; }
.preview-caption-footer { overflow-wrap: anywhere; }
.clean-badge { white-space: nowrap; }
.level-tab-switch { flex-wrap: wrap; gap: 4px; }
.level-tab-btn { padding: 12px 10px; }
.item-input-group input, .custom-actor-row input { min-width: 0; width: 100%; font-size: max(16px, calc(.9rem * var(--content-scale))); }
.btn-add-item { min-width: 44px; min-height: 44px; font-size: 24px; }
.current-items-chips { flex-direction: column; align-items: stretch; }
.item-chip { border-radius: 8px; gap: 8px; padding: 8px 10px; flex-wrap: wrap; overflow-wrap: anywhere; }
.item-chip > span { flex: 1; min-width: 90px; }
.item-chip select, .meso-destination select { max-width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 6px; background: white; font-size: max(16px, calc(.85rem * var(--content-scale))); }
.remove-item { border: 0; color: #8a1538; background: transparent; min-width: 40px; min-height: 40px; font-size: 24px; cursor: pointer; }
.meso-destination { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.quick-tag { min-height: 40px; text-align: left; }
.builder-status { font-size: calc(.85rem * var(--content-scale)); color: #374151; overflow-wrap: anywhere; }
#summaryFallback { min-height: 240px; width: 100%; padding: 12px; font-size: 16px; }
.detail-items-list li { padding-left: 0; }
.data-card, .activity-box, .reference-entry-card, .ergo-tier-card { overflow-wrap: anywhere; }
.ref-meta-row, .column-header, .zone-title, .activity-step-badge { flex-wrap: wrap; }
.table-scroll-wrapper { overflow-x: auto; }
html[data-content-scale="1.5"] .builder-layout-modern { grid-template-columns: 1fr; }
html[data-content-scale="1.5"] .ergo-tiers-grid { grid-template-columns: 1fr; }
@media(min-width: 1280px) { .nav-links { display: flex; } .nav-burger { display: none; } .nav-mobile.open { display: none; } }
@media(max-width: 1279px) { .nav-links { display: none; } .nav-burger { display: flex; } }
@media(max-width: 1000px) {
  .builder-layout-modern, .ssos-detail-column { grid-template-columns: 1fr; }
  .builder-editor-card { position: static; }
}
@media(max-width: 640px) {
  .nav-inner { padding-inline: 12px; gap: 8px; }
  .nav-logo { gap: 0; }
  .nav-logo img { max-width: 108px; height: auto; max-height: 38px; object-fit: contain; }
  .nav-institution { display: none; }
  .nav-actions { gap: 6px; }
  .text-size-toggle { padding-inline: 9px; }
  .container { padding-inline: 16px; }
  .section { padding-block: 48px; }
  .section-header { margin-bottom: 26px; }
  .hero-title { font-size: calc(2.1rem * var(--content-scale)); overflow-wrap: anywhere; }
  .ssos-figure-container, .builder-preview-card { padding: 12px; }
  .builder-editor-card, .activity-box { padding: 18px; }
  .custom-actor-row { flex-direction: column; }
  .actor-options-grid { grid-template-columns: 1fr; }
  .hero-actions, .export-btns-group { flex-direction: column; align-items: stretch; }
  .hero-actions a, .export-btns-group button { justify-content: center; white-space: normal; }
  .meso-toggle { padding: 12px; }
  .review-nav-tabs { flex-wrap: wrap; }
  .review-tab-btn { flex: 1 1 100%; text-align: left; }
  .data-card { padding: 22px 16px; }
  .ergo-tiers-grid, .glossary-columns-grid { grid-template-columns: 1fr; }
  .footer-content, .footer-left { flex-direction: column; align-items: flex-start; }
  .section-title { font-size: calc(1.7rem * var(--content-scale)); }
  .figure-caption-top, .legend-hint { font-size: calc(.9rem * var(--content-scale)); }
  .model-level-buttons button { flex: 1 1 40%; }
}
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
.model-layer:hover > rect, .model-layer:focus > rect { stroke: #8a1538; stroke-width: 3; }

#exportResult { margin-top: 16px; font-size: calc(.9rem * var(--content-scale)); }
#exportResult summary { cursor: pointer; color: #8a1538; padding-block: 12px; }
#exportResult img { display: block; max-width: 100%; height: auto; margin-block: 12px; }
#exportResult a { white-space: normal; }

/* V4: fixed-proportion ellipse scenes; details sit alongside on wide screens. */
.ssos-workspace { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); align-items: start; }
.ssos-detail-column { display: block; position: sticky; top: 92px; }
.ssos-svg-wrapper, .builder-canvas-wrapper { width: 100%; min-width: 0; }
#ssosSvg, #builderSvg { width: 100%; height: auto; max-width: 100%; }
@media(max-width: 1000px) {
  .ssos-workspace { grid-template-columns: minmax(0, 1fr); }
  .ssos-detail-column { position: static; }
}
.measure-chip { flex-wrap: wrap; }
.measure-chip .chip-text { flex: 1; min-width: 0; }
.measure-chip.placed { opacity: 1; pointer-events: auto; cursor: pointer; background: #faf3f5; border-style: solid; }
.measure-membership { width: 100%; padding-left: 44px; color: #8a1538; font-size: calc(.75rem * var(--content-scale)); font-weight: 700; }
.measure-membership:empty { display: none; }
.dropped-chip .remove-chip { border: 0; background: transparent; color: #8a1538; min-width: 32px; min-height: 36px; font-size: 22px; cursor: pointer; }
.zone-picker-modal { margin: auto; inset: 0; width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow: auto; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px; color: #253343; background: white; box-shadow: 0 16px 60px #0003; }
.zone-picker-modal::backdrop { background: #16233380; }
.zone-picker-modal h3 { font-size: calc(1.2rem * var(--content-scale)); line-height: 1.3; margin-bottom: 12px; overflow-wrap: anywhere; }
.zone-picker-modal p { font-size: calc(.95rem * var(--content-scale)); overflow-wrap: anywhere; }
.zone-picker-modal fieldset { border: 0; margin: 20px 0; display: grid; gap: 8px; }
.zone-picker-modal legend { margin-bottom: 8px; font-size: calc(.85rem * var(--content-scale)); }
.zone-picker-modal label { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px; background: #faf3f5; border-radius: 8px; cursor: pointer; }
.zone-picker-modal input { width: 22px; height: 22px; accent-color: #8a1538; }
.picker-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.discussion-item:not(:has(.discussion-a-body)) .discussion-q-header { cursor: default; }
.source-text { color: var(--text-secondary); }
.ergo-tier-card { border-color: var(--border-light); box-shadow: var(--shadow-sm); }
.tier-accent-line { background: var(--brand-bordeaux); }

/* Three entry actions wrap naturally on intermediate screen widths. */
.hero-actions { flex-wrap: wrap; }
.hero-actions a { max-width: 100%; white-space: normal; text-align: center; }

/* Compact footer: institution, authorship and navigation share the width. */
.site-footer { padding: 36px 0 20px; }
.footer-content { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(160px,.65fr); gap:28px 40px; align-items:start; }
.footer-left { max-width:none; min-width:0; gap:18px; flex-direction:row; align-items:center; }
.footer-brand-logo { width:100px; height:auto; max-height:48px; object-fit:contain; flex-shrink:0; }
.footer-text { min-width:0; }
.footer-text p, .footer-author p { margin:0; }
.footer-text p + p { margin-top:5px; }
.footer-author { min-width:0; font-size:calc(.85rem * var(--content-scale)); line-height:1.6; color:var(--text-secondary); font-weight:400; }
.footer-author .footer-label { font-size:calc(.75rem * var(--content-scale)); color:var(--text-muted); margin-bottom:6px; }
.footer-author a { display:inline-block; color:var(--text-secondary); text-underline-offset:3px; overflow-wrap:anywhere; }
.footer-author a:hover { color:var(--brand-bordeaux); text-decoration:underline; }
.footer-right { min-width:0; justify-self:end; }
.footer-links-col { gap:6px; }
.footer-links-col .col-title { margin-bottom:4px; }
.footer-copyright { grid-column:1 / -1; border-top:1px solid var(--border-light); padding-top:16px; margin:0; color:var(--text-muted); font-size:calc(.74rem * var(--content-scale)); line-height:1.5; }
@media(max-width:1000px) {
 .footer-content { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px 32px; }
 .footer-left { grid-column:1 / -1; }
 .footer-right { justify-self:start; }
}
@media(max-width:560px) {
 .site-footer { padding-top:28px; }
 .footer-content { grid-template-columns:minmax(0,1fr); gap:22px; }
 .footer-left { gap:14px; }
 .footer-brand-logo { width:82px; }
 .footer-links-col { flex-direction:row; flex-wrap:wrap; gap:10px 20px; }
 .footer-links-col .col-title { flex-basis:100%; }
}
html[data-content-scale="1.5"] .footer-content { grid-template-columns:minmax(0,1fr); }
html[data-content-scale="1.5"] .footer-right { justify-self:start; }
