:root{
  --deep:#065A82;
  --teal:#1C7293;
  --midnight:#21295C;
  --gold:#E8A83A;
  --offwhite:#F4F7F9;
  --white:#FFFFFF;
  --darktext:#222B33;
  --muted:#5A6B78;
  --border:#E1E7EC;
  --live:#1E8F5F;
  --partial:#C98A1E;
  --stub:#9AA5AC;
  --azzurro:#4FB6E0;
  --radius:10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
  color:var(--darktext);
  background:var(--white);
  line-height:1.55;
}
a{color:var(--deep); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{color:var(--midnight); font-family: Cambria, "Times New Roman", serif; line-height:1.25;}
h1{font-size:2.1rem; margin:0 0 .5rem;}
h2{font-size:1.5rem; margin:2rem 0 .75rem; border-bottom:2px solid var(--border); padding-bottom:.35rem;}
h3{font-size:1.15rem; color:var(--teal); margin:1.4rem 0 .5rem;}
p{margin:.5rem 0 1rem;}
ul,ol{margin:.3rem 0 1rem 1.2rem; padding:0;}
li{margin-bottom:.4rem;}

/* Topbar */
.topbar{
  background:linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 14%, var(--deep) 58%, var(--teal) 100%);
  color:var(--midnight);
  position:sticky; top:0; z-index:50;
  border-bottom:3px solid var(--gold);
}
.topbar-bg{
  /* Full-bleed, edge-to-edge with .topbar itself -- so the map watermark's
     right:0 always hugs the TRUE right edge of the header at any window
     width (this must NOT be capped to the centered 1400px box, or the map
     stops short of the real edge on wide viewports). */
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.topbar-ship-wrap{
  /* The ship, unlike the map, must track the logo -- which lives inside the
     centered max-width:1400px .topbar-inner box, not the raw viewport edge.
     Giving the ship its own centered wrapper (matching .topbar-inner's own
     box exactly) keeps it aligned with the logo at every window width
     without affecting the map's independent right-edge anchor above. */
  position:absolute; inset:0; left:50%; width:100%; max-width:1400px;
  transform:translateX(-50%); overflow:hidden; pointer-events:none;
}
.topbar-ship, .topbar-map{
  position:absolute; top:0; bottom:0; background-repeat:no-repeat;
  opacity:.55;
}
.topbar-ship{
  left:18%; width:800px;
  background-image:url('logos/header-ship.png');
  background-size:100% auto;
  background-position:center 70%;
  opacity:.4;
  -webkit-mask-image:linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  mask-image:linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
.topbar-map{
  right:0; width:22%;
  background-image:url('logos/header-map.png');
  background-size:110% auto;
  background-position:right center;
  -webkit-mask-image:linear-gradient(to right, transparent, black 30%);
  mask-image:linear-gradient(to right, transparent, black 30%);
}
@media(max-width:899px){ .topbar-bg{ display:none; } }
.topbar-inner{
  position:relative; z-index:1;
  max-width:1400px; margin:0 auto; padding:1.1rem 1.5rem;
  display:flex; align-items:center; gap:1rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; color:var(--white); font-family:Cambria,serif;}
.brand:hover{ text-decoration:none; }
.brand-logo-img{ height:58px; width:auto; display:block; }
.beta-badge{ height:20px; width:auto; display:block; margin-top:.15rem; }
@media(max-width:480px){ .brand-logo-img{ height:44px; } .beta-badge{ height:17px; } }
.nav-toggle{
  background:none;border:none;color:var(--midnight);font-size:1.3rem;cursor:pointer;
  display:block;
}
@media(min-width:900px){ .nav-toggle{display:none;} }
.topbar-lang{ display:flex; align-items:center; gap:.45rem; margin-left:.5rem; }
.lang-globe{ width:22px; height:22px; color:var(--white); opacity:1; flex:none; }
.lang-switch{
  display:flex; align-items:center; gap:.4rem; font-size:1.05rem; font-weight:700;
  color:var(--white); white-space:nowrap;
}
.lang-switch a{ color:var(--white); opacity:.75; text-decoration:none; }
.lang-switch a:hover{ opacity:1; text-decoration:underline; }
.lang-switch .lang-active{ opacity:1; text-decoration:underline; }
.lang-switch .lang-sep{ opacity:.5; }
.search-wrap{ position:relative; margin-left:auto; margin-right:1.6rem; flex:0 1 420px; max-width:420px;}
.search-icon{
  position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:var(--muted); pointer-events:none;
}
.search-kbd{
  position:absolute; right:.55rem; top:50%; transform:translateY(-50%);
  font-family:"Segoe UI", Arial, sans-serif; font-size:.72rem; font-weight:600;
  color:var(--muted); background:var(--offwhite); border:1px solid var(--border);
  border-radius:6px; padding:.15rem .4rem; pointer-events:none; line-height:1.3;
}
@media(max-width:700px){ .search-kbd{ display:none; } }
#sk-search{
  width:100%; padding:.72rem 2.8rem .72rem 2.6rem; border-radius:24px; border:none;
  font-size:.92rem; box-shadow:0 2px 10px rgba(0,0,0,.15);
}
#sk-search:focus{ outline:2px solid var(--gold); outline-offset:1px; }
.search-results{
  position:absolute; top:110%; left:0; right:0; background:var(--white);
  color:var(--darktext); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.25);
  max-height:400px; overflow-y:auto; display:none; z-index:60;
}
.search-results.show{display:block;}
.search-results a{ display:block; padding:.6rem .8rem; border-bottom:1px solid var(--border); color:var(--darktext);}
.search-results a:hover{ background:var(--offwhite); text-decoration:none;}
.search-results .sr-title{font-weight:bold; color:var(--deep);}
.search-results .sr-snip{font-size:.8rem; color:var(--muted);}
.search-empty{padding:.7rem .9rem; color:var(--muted); font-size:.85rem;}

/* Feedback — prominent beta feedback button + modal (replaces the former
   static Login/Register placeholder, which had no real function). Stays
   visible at every breakpoint, since the whole point is high visibility. */
.topbar-actions{ display:flex; align-items:center; gap:.6rem; margin-left:.5rem; }
.feedback-btn{
  display:flex; align-items:center; gap:.4rem; white-space:nowrap;
  color:var(--midnight); font-size:.85rem; font-weight:700;
  background:var(--gold); border:1.5px solid var(--gold); border-radius:20px;
  padding:.45rem 1.1rem; cursor:pointer; user-select:none; font-family:inherit;
  transition:background .15s ease, transform .15s ease;
}
.feedback-btn:hover{ background:#F2B94F; transform:translateY(-1px); }
.feedback-btn svg{ width:16px; height:16px; flex:none; }
.download-btn{
  display:flex; align-items:center; gap:.4rem; white-space:nowrap;
  color:var(--deep); font-size:.85rem; font-weight:700;
  background:var(--white); border:1.5px solid var(--white); border-radius:20px;
  padding:.45rem 1.1rem; cursor:pointer; user-select:none; font-family:inherit;
  text-decoration:none; transition:background .15s ease, transform .15s ease;
}
.download-btn:hover{ background:#DCEEF5; transform:translateY(-1px); text-decoration:none; }
.download-btn svg{ width:16px; height:16px; flex:none; }
@media(max-width:760px){
  .feedback-btn span{ display:none; } .feedback-btn{ padding:.5rem .6rem; }
  .download-btn span{ display:none; } .download-btn{ padding:.5rem .6rem; }
}
@media(max-width:560px){ .topbar-actions{ margin-left:.2rem; gap:.4rem; } }

.feedback-overlay{
  position:fixed; inset:0; background:rgba(15,23,32,.55); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:1rem;
}
.feedback-overlay[hidden]{ display:none; }
.feedback-modal{
  background:var(--white); border-radius:var(--radius); max-width:440px; width:100%;
  padding:1.6rem 1.6rem 1.3rem; position:relative; box-shadow:0 20px 50px rgba(0,0,0,.3);
  max-height:90vh; overflow-y:auto;
}
.feedback-modal h3{ margin:0 0 .3rem; color:var(--midnight); }
.feedback-intro{ margin:0 0 1rem; color:var(--muted); font-size:.88rem; }
.feedback-close{
  position:absolute; top:.7rem; right:.9rem; background:none; border:none;
  font-size:1.4rem; line-height:1; color:var(--muted); cursor:pointer;
}
.feedback-close:hover{ color:var(--darktext); }
.feedback-field{ margin-bottom:.9rem; }
.feedback-field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:.35rem; color:var(--darktext); }
.feedback-field textarea, .feedback-field input[type=email], .feedback-field select{
  width:100%; padding:.55rem .7rem; border:1px solid var(--border); border-radius:8px;
  font-family:inherit; font-size:.9rem; color:var(--darktext);
}
.feedback-newsletter-toggle label{ display:flex; align-items:center; gap:.5rem; font-weight:500; font-size:.88rem; cursor:pointer; }
.feedback-newsletter-toggle input{ width:auto; }
.feedback-newsletter-fields{ border-left:3px solid var(--gold); padding-left:.8rem; margin-bottom:.9rem; }
.feedback-newsletter-fields[hidden]{ display:none; }
.feedback-score{ display:flex; gap:.4rem; }
.feedback-score-btn{
  flex:1; padding:.5rem 0; border:1.5px solid var(--border); border-radius:8px;
  background:var(--offwhite); cursor:pointer; font-weight:700; color:var(--muted);
  transition:all .15s ease; font-family:inherit;
}
.feedback-score-btn:hover{ border-color:var(--gold); }
.feedback-score-btn.active{ background:var(--gold); border-color:var(--gold); color:var(--midnight); }
.feedback-actions{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:1rem; }
.feedback-btn-secondary{
  background:none; border:1.5px solid var(--border); border-radius:20px; padding:.5rem 1.1rem;
  cursor:pointer; font-weight:600; color:var(--muted); font-family:inherit;
}
.feedback-btn-secondary:hover{ background:var(--offwhite); }
.feedback-btn-primary{
  background:var(--deep); border:1.5px solid var(--deep); border-radius:20px; padding:.5rem 1.3rem;
  cursor:pointer; font-weight:700; color:var(--white); font-family:inherit;
}
.feedback-btn-primary:hover{ background:var(--midnight); }
.feedback-btn-primary:disabled{ opacity:.6; cursor:default; }
.feedback-msg{ margin:.8rem 0 0; font-size:.85rem; text-align:center; }
.feedback-msg-ok{ color:var(--live); font-weight:600; }
.feedback-msg-err{ color:#B3261E; font-weight:600; }

/* Layout */
.layout{ display:flex; max-width:1400px; margin:0 auto; align-items:flex-start;}
.sidebar{
  width:280px; flex-shrink:0; background:var(--offwhite);
  border-right:1px solid var(--border);
  padding:1rem .8rem 3rem; position:sticky; top:96px;
  height:calc(100vh - 96px); overflow-y:auto;
}
@media(max-width:899px){
  .sidebar{ position:fixed; left:-300px; top:96px; z-index:80; width:270px; height:calc(100vh - 96px); transition:left .2s; box-shadow:4px 0 16px rgba(0,0,0,.15);}
  .sidebar.open{ left:0; }
}
.nav-block-title, .nav-fam-title{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  font-weight:bold; margin:1.1rem 0 .4rem;
}
.nav-block{margin-bottom:.2rem;}
.nav-fam{margin-bottom:.2rem;}
.nav-link{
  display:flex; align-items:center; justify-content:space-between; gap:.4rem;
  padding:.4rem .5rem; border-radius:6px; font-size:.88rem; color:var(--darktext);
}
.nav-link:hover{ background:#E8EEF2; text-decoration:none;}
.nav-link.active{ background:var(--deep); color:var(--white); font-weight:bold;}
.nav-link-main{ display:flex; align-items:center; gap:.55rem; min-width:0; }
.nav-link-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-icon{ width:16px; height:16px; flex:none; opacity:.72; }
.nav-link.active .nav-icon{ opacity:.95; }
.dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0;}
.st-live{background:var(--live);}
.st-partial{background:var(--partial);}
.st-stub{background:var(--stub);}
.nav-legend{ font-size:.72rem; color:var(--muted); margin-top:1.2rem; padding-top:.8rem; border-top:1px solid var(--border);}
.nav-legend .dot{ display:inline-block; margin-left:.6rem; margin-right:.25rem;}
.nav-legend .dot:first-child{margin-left:0;}

.content{ flex:1; min-width:0; padding:2rem 2.2rem 4rem; }
@media(max-width:600px){ .content{padding:1.2rem 1rem 3rem;} }

.sitefooter{
  background:linear-gradient(100deg, var(--deep) 0%, var(--deep) 62%, var(--teal) 100%);
  color:#DCEEF5; text-align:center; font-size:.8rem; padding:1.2rem 1rem;
}
.footer-legal{ margin-top:.4rem; font-size:.72rem; opacity:.75; }
.footer-legal a{ color:#DCEEF5; text-decoration:underline; }

.footer-download{ margin-top:.5rem; font-size:.72rem; opacity:.9; }
.footer-download > a{ color:#F4D48A; text-decoration:underline; font-weight:600; }
.footer-download-help{ display:inline-block; margin-left:.6rem; text-align:left; vertical-align:top; }
.footer-download-help summary{
  display:inline; cursor:pointer; color:#DCEEF5; opacity:.8; text-decoration:underline dotted;
  font-size:.72rem; list-style:none;
}
.footer-download-help summary::-webkit-details-marker{ display:none; }
.footer-download-help[open] summary{ opacity:1; }
.footer-download-help ol{
  max-width:420px; margin:.5rem auto 0; padding-left:1.2rem; text-align:left;
  background:rgba(255,255,255,.08); border-radius:6px; padding:.7rem 1rem .7rem 1.6rem;
  font-size:.72rem; line-height:1.5; color:#EAF4F8;
}
.footer-download-help li{ margin-bottom:.3rem; }
.footer-download-help li:last-child{ margin-bottom:0; }
@media(max-width:600px){
  .footer-download-help{ display:block; margin:.4rem auto 0; }
  .footer-download-help ol{ margin-left:0; }
}

/* Component classes reused across topic pages */
.kicker{ text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; font-weight:bold; color:var(--teal);}
.breadcrumb{ font-size:.82rem; color:var(--muted); margin-bottom:.6rem;}
.breadcrumb a{color:var(--muted);}
.lede{ font-size:1.1rem; color:var(--muted); font-style:italic; margin-bottom:1.2rem;}

.badge{ display:inline-block; font-size:.72rem; font-weight:bold; padding:.15rem .55rem; border-radius:12px; margin-left:.5rem; vertical-align:middle;}
.badge-live{background:#E4F5EC; color:var(--live);}
.badge-partial{background:#FBF0DD; color:var(--partial);}
.badge-stub{background:#EEF0F1; color:var(--stub);}

.card{ background:var(--offwhite); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.3rem; margin-bottom:1.2rem;}
.card-dark{ background:var(--deep); color:var(--white); border-radius:var(--radius); padding:1.1rem 1.3rem; margin-bottom:1.2rem;}
.card-dark h3{color:var(--gold);}
.card-dark a{color:#BFE0F0;}

.closing-panel{
  background:linear-gradient(100deg, var(--deep) 0%, var(--deep) 62%, var(--teal) 100%);
  color:var(--white); border-radius:var(--radius); padding:1.4rem 1.8rem; margin:2rem 0;
}
.closing-panel h2{ color:var(--white); border-bottom:2px solid rgba(255,255,255,.25); margin-top:0;}
.closing-panel p{ color:#EAF4F8; margin-bottom:0;}

.grid{ display:grid; gap:1rem; }
.grid-1{ grid-template-columns: 1fr; }
.grid-2{ grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.grid-3{ grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }

.module-card, .topic-card{
  display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.15rem;
  background:var(--white); transition:box-shadow .15s, transform .15s, border-color .15s;
}
.module-card:hover, .topic-card:hover{ border-color:var(--teal); background:#E8EEF2; box-shadow:0 6px 18px rgba(28,114,147,.18); text-decoration:none; transform:translateY(-2px);}
.module-card h3, .topic-card h3{ margin:.2rem 0 .3rem; color:var(--midnight); font-size:1.02rem;}
.module-card p, .topic-card p{ font-size:.88rem; color:var(--muted); margin:0;}
.module-card p{
  display:-webkit-box; -webkit-line-clamp:4; line-clamp:4; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis;
}

table{ width:100%; border-collapse:collapse; margin:1rem 0 1.4rem; font-size:.92rem;}
th,td{ border:1px solid var(--border); padding:.55rem .7rem; text-align:left; vertical-align:top;}
th{ background:var(--midnight); color:var(--white);}
tr:nth-child(even) td{ background:var(--offwhite); }
@media(max-width:700px){
  table{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  th,td{ white-space:normal; min-width:140px; }
}

.callout{ border-left:4px solid var(--gold); background:#FFF8E9; padding:.8rem 1rem; margin:1rem 0; border-radius:0 8px 8px 0;}
.callout-danger{ border-left-color:#C0392B; background:#FDECEA;}
.callout-psc{ border-left-color:var(--deep); background:#EAF3F7;}

.media-stub{
  border:2px dashed var(--border); border-radius:var(--radius); padding:1.4rem; text-align:center;
  color:var(--muted); background:var(--offwhite); margin:1rem 0;
}

.tag-row{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 1rem;}
.tag{ background:#E8EEF2; color:var(--deep); font-size:.76rem; padding:.2rem .6rem; border-radius:12px;}

.faq-item{ border-bottom:1px solid var(--border); padding:.7rem 0;}
.faq-q{ font-weight:bold; color:var(--midnight);}
.faq-a{ color:var(--darktext); margin-top:.3rem;}

.related-links a{
  display:inline-block; margin:0 .5rem .5rem 0; padding:.35rem .7rem; background:var(--offwhite);
  border:1px solid var(--border); border-radius:16px; font-size:.85rem;
}

.checklist li{ list-style:none; margin-left:-1.2rem; padding-left:1.6rem; position:relative;}
.checklist li:before{ content:"\2610"; position:absolute; left:0; color:var(--teal); font-size:1.05rem;}
.checklist li{ cursor:pointer; user-select:none; transition:opacity .15s ease; }
.checklist li:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:3px; }
.checklist li.checked{ opacity:.55; text-decoration:line-through; }
.checklist li.checked:before{ content:"\2611"; }

.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(100deg, var(--deep) 0%, var(--deep) 62%, var(--teal) 100%);
  color:var(--white); border-radius:var(--radius); padding:.9rem 2.2rem; margin-bottom:0;
  display:flex; align-items:stretch; gap:2rem; flex-wrap:wrap;
  animation:heroFadeIn .7s ease-out;
}
.hero-photo{
  /* A real flex item (not absolutely positioned) so the browser always
     reserves its own space in the row -- it can never visually overlap
     hero-text, regardless of window width. Previously this was absolutely
     positioned and sized from the hero's HEIGHT via aspect-ratio, capped
     only as a percentage of the hero's WIDTH; those two don't stay in sync
     as the window is resized, so at in-between widths the photo could still
     grow wide enough to creep over the text. flex-basis/shrink + flex-wrap
     replaces that with a guarantee: if there's not enough room for both at
     their minimum widths, the photo simply drops to its own row below the
     text instead of overlapping it.
     The negative margins bleed the photo back out to the hero's true edges
     (right, top, bottom) to cancel the hero's own padding on those sides,
     preserving the original edge-to-edge look. */
  flex:0 1 460px; min-width:240px;
  /* Safety net for the rare case where it still ends up alone on its own
     flex line (e.g. borderline widths, browser zoom, DPI scaling that
     shifts the effective CSS viewport away from the breakpoint below):
     align-self:stretch only gives it a height when it shares a line with
     hero-text; alone on a line with no text content, it has nothing to
     stretch to and collapses to almost nothing. aspect-ratio fills that
     gap by deriving a sensible height from whatever width it ends up
     with, and min-height is a hard floor under that. Neither affects the
     normal (shared-row) case, where width and height are already both
     resolved by the flex layout and stretch. */
  aspect-ratio: 1400 / 717;
  min-height:160px;
  margin:-.9rem -2.2rem -.9rem 0;
  background-image:
    linear-gradient(rgba(6,90,130,.15), rgba(6,90,130,.15)),
    url('logos/hero-photo.jpg');
  background-size: 100% 100%, 116% 116%;
  background-position: center, 40% center;
  background-repeat: no-repeat, no-repeat;
  filter: contrast(.93);
  box-shadow: inset 14px 0 22px -14px rgba(6,20,30,.55);
  pointer-events:none;
}
@media(max-width:1180px){
  /* Below this width there isn't reliably enough room left for hero-text
     (min 280px) and hero-photo (min 240px) plus the gap to share one row,
     so flex-wrap would drop the photo onto its own line. The aspect-ratio
     fallback above keeps that state from looking broken, but hiding the
     photo outright before that point is still cleaner -- at these widths
     it's a decorative accent, not essential content. The threshold has
     extra headroom versus the strict calculation to also cover browser
     zoom / high-DPI scaling, which can shift the effective CSS viewport
     width away from what raw window-resize testing suggests. */
  .hero-photo{ display:none; }
}
@keyframes heroFadeIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero h1{color:var(--white); font-size:1.85rem;}
.hero p{color:#EAF4F8;}
.hero-text{ flex:1 1 380px; min-width:280px; max-width:580px; align-self:center; }

.hero-features{
  display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem;
}
.hero-feature{
  display:flex; align-items:center; gap:.45rem; white-space:nowrap;
  border:1.5px solid rgba(255,255,255,.4); border-radius:20px;
  padding:.4rem .9rem; font-size:.85rem; font-weight:600; color:var(--white);
  background:rgba(255,255,255,.08);
}
.hero-feature svg{ width:16px; height:16px; flex:none; }

/* Hero stats -- compact metrics strip attached directly under the hero (zero
   gap: .hero's own margin-bottom is 0, this card owns the spacing below it
   instead). Numbers come from platform_stats() in sb_common.py -- computed
   from the real MODULES/GLOBAL_SECTIONS/topic/decision-tree/checklist counts,
   never hardcoded -- then animated from 0 up to target on page load via
   APP_JS. Kept compact (small icons, tight padding) to stay low-height. */
.hero-stats{
  background:linear-gradient(180deg, #F2F8FB, #E9F2F7);
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 6px 16px rgba(6,90,130,.10);
  margin:0 0 1.6rem; padding:.7rem 1.6rem .65rem;
}
.hero-stats-label{
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--deep); margin-bottom:.4rem;
}
.hero-stats-row{
  display:flex; flex-wrap:wrap; gap:1.3rem;
}
.stat-item{
  display:flex; align-items:center; gap:.5rem; flex:1 1 145px;
}
.stat-icon{ width:22px; height:22px; color:var(--deep); flex:none; }
.stat-text{ display:flex; flex-direction:column; line-height:1.15; }
.stat-number{ font-family:Cambria,serif; font-weight:bold; font-size:1rem; color:var(--midnight); }
.stat-label{ font-size:.68rem; color:var(--muted); margin-top:.05rem; white-space:nowrap; }
@media(max-width:700px){
  .stat-item{ flex:1 1 45%; }
}

/* Animated underline -- used for the "Moduli tematici" heading only (not a
   global h2 rule, to keep the effect special rather than busy sitewide).
   Draws the line left-to-right once on page load. Respects reduced-motion. */
.section-heading-animated{
  border-bottom:none; position:relative; padding-bottom:.35rem;
}
.section-heading-animated:after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:linear-gradient(90deg, var(--teal), var(--gold));
  animation:underlineGrow 1.1s cubic-bezier(.25,.7,.3,1) .2s forwards;
}
@keyframes underlineGrow{ to{ width:100%; } }
@media(prefers-reduced-motion: reduce){
  .section-heading-animated:after{ animation:none; width:100%; }
}

.steps{ counter-reset:step; list-style:none; margin-left:0; padding-left:0;}
.steps li{ counter-increment:step; position:relative; padding-left:2.6rem; margin-bottom:1rem;}
.steps li:before{
  content:counter(step); position:absolute; left:0; top:0; width:1.9rem; height:1.9rem;
  background:var(--teal); color:var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:bold; font-size:.95rem;
}

/* Decision tree widget */
.dt-box{ background:var(--offwhite); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; margin:1rem 0;}
.dt-question{ font-weight:bold; font-size:1.1rem; color:var(--midnight); margin-bottom:.8rem;}
.dt-options button{
  display:block; width:100%; text-align:left; margin-bottom:.6rem; padding:.7rem 1rem;
  border:1px solid var(--deep); background:var(--white); color:var(--deep); border-radius:8px;
  font-size:.95rem; cursor:pointer;
}
.dt-options button:hover{ background:var(--deep); color:var(--white);}
.dt-trail{ font-size:.8rem; color:var(--muted); margin-bottom:.8rem;}
.dt-result{ background:#E4F5EC; border-left:4px solid var(--live); padding:1rem 1.2rem; border-radius:0 8px 8px 0;}
.dt-restart{ margin-top:1rem; background:none; border:none; color:var(--teal); text-decoration:underline; cursor:pointer; font-size:.85rem;}

.stub-box{ text-align:center; padding:3rem 1.5rem; background:var(--offwhite); border-radius:var(--radius); border:1px dashed var(--border);}
.stub-box h2{border:none;}

/* Quiz widget */
.quiz-box{ background:var(--offwhite); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; margin:1rem 0;}
.quiz-progress{ font-size:.8rem; color:var(--muted); margin-bottom:.6rem;}
.quiz-question{ font-weight:bold; font-size:1.05rem; color:var(--midnight); margin-bottom:.9rem;}
.quiz-options{ margin-bottom:.8rem;}
.quiz-opt{
  display:block; width:100%; text-align:left; margin-bottom:.6rem; padding:.7rem 1rem;
  border:1px solid var(--deep); background:var(--white); color:var(--deep); border-radius:8px;
  font-size:.95rem; cursor:pointer;
}
.quiz-opt:hover:not(:disabled){ background:var(--deep); color:var(--white);}
.quiz-opt:disabled{ cursor:default; opacity:.85;}
.quiz-opt.quiz-correct{ background:#E4F5EC; border-color:var(--live); color:var(--midnight); font-weight:bold;}
.quiz-opt.quiz-wrong{ background:#FBE7E7; border-color:#C0392B; color:var(--midnight);}
.quiz-feedback{ background:var(--white); border-left:4px solid var(--teal); padding:1rem 1.2rem; border-radius:0 8px 8px 0; font-size:.92rem;}
.quiz-next{ margin-top:.9rem; background:var(--teal); color:var(--white); border:none; padding:.6rem 1.1rem; border-radius:8px; cursor:pointer; font-size:.9rem;}
.quiz-final{ background:#E4F5EC; border-left:4px solid var(--live); padding:1.2rem 1.4rem; border-radius:0 8px 8px 0; font-size:1.05rem; font-weight:bold;}

/* Flash card widget */
.fc-counter{ font-size:.8rem; color:var(--muted); margin-bottom:.6rem; text-align:center;}
.fc-card{
  perspective:1000px; position:relative; height:180px; cursor:pointer; margin-bottom:1rem;
}
.fc-face{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:1.4rem; border-radius:var(--radius); border:1px solid var(--border); backface-visibility:hidden;
  font-size:1.05rem;
}
.fc-front{ background:var(--deep); color:var(--white); font-weight:bold;}
.fc-back{ background:var(--offwhite); color:var(--midnight); transform:rotateY(180deg);}
.fc-card{ transform-style:preserve-3d; transition:transform .5s;}
.fc-card.fc-flipped{ transform:rotateY(180deg);}
.fc-nav{ display:flex; justify-content:space-between; gap:.6rem;}
.fc-nav button{ flex:1; background:var(--white); border:1px solid var(--deep); color:var(--deep); padding:.6rem .8rem; border-radius:8px; cursor:pointer; font-size:.85rem;}
.fc-nav button:hover{ background:var(--deep); color:var(--white);}

/* Best Practices cards */
.bp-card{ background:var(--offwhite); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem 1.4rem; margin-bottom:1rem;}
.bp-role{ display:inline-block; background:var(--teal); color:var(--white); font-size:.75rem; font-weight:bold; padding:.2rem .6rem; border-radius:12px; margin-bottom:.6rem;}

/* ===========================================================================
   Stampa / Salva come PDF (@media print)
   Nasconde navigazione e controlli interattivi, allarga il contenuto a piena
   pagina, evita interruzioni di pagina infelici e forza la stampa degli
   sfondi colorati (badge, callout, tabelle) quando il browser lo consente.
   =========================================================================== */
@media print{
  @page{ margin: 1.6cm 1.4cm; }

  /* Elementi di navigazione/interazione: inutili o fuorvianti su carta.
     .topbar e .sidebar usano position:sticky, che in stampa su Chrome/Edge
     puo' "fantasma-ripetersi" a inizio di ogni pagina anche con display:none:
     si forza quindi anche position:static/relative come misura difensiva. */
  .topbar, .sidebar, .nav-toggle,
  .search-wrap, .search-results,
  .dt-options, .dt-restart, .dt-trail,
  .quiz-options, .quiz-next, .quiz-feedback,
  .fc-nav, .fc-counter{
    display:none !important;
  }
  .topbar, .sidebar{
    position:static !important; top:auto !important;
  }

  /* Il layout a due colonne diventa un flusso singolo a piena larghezza */
  .layout{ display:block; max-width:none; }
  .content{ padding:0; max-width:none; }
  body{ font-size:11pt; }

  a{ color:inherit; text-decoration:none; }

  /* Tabelle e diagrammi: mai piu' larghi della pagina. table-layout:fixed
     forza le colonne a dividersi lo spazio disponibile invece di poter
     eccedere la larghezza stampabile (bug osservato: tabelle a 4+ colonne
     e diagrammi SVG tagliati sul bordo destro). */
  table{ table-layout:fixed !important; width:100% !important; }
  th, td{
    white-space:normal !important; overflow-wrap:break-word; word-break:break-word;
    min-width:0 !important;
  }
  svg, img{ max-width:100% !important; height:auto !important; }
  .card, .card-dark, .dt-box, .quiz-box, .callout, .hero{
    max-width:100% !important; box-sizing:border-box;
  }

  /* Forza la stampa degli sfondi colorati dove il browser lo permette */
  .badge, .callout, .card, .card-dark, table th, .tag, .bp-role,
  .hero, .dt-result, .quiz-final, .checklist li:before, .steps li:before{
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
  }

  .hero{ background:var(--offwhite) !important; color:var(--darktext) !important; box-shadow:none; }
  .hero h1, .hero p{ color:var(--darktext) !important; }

  /* Evita di spezzare intestazioni, card e righe di tabella a metà pagina */
  h1,h2,h3,h4{ page-break-after:avoid; break-after:avoid; }
  .card, .card-dark, .callout, .faq-item, .bp-card, li,
  tr, .dt-box, .quiz-box{
    page-break-inside:avoid; break-inside:avoid;
  }

  /* I widget interattivi lasciati visibili (es. risultato già raggiunto di un
     decision tree, o il testo di una domanda quiz) restano leggibili ma senza
     i controlli: è un limite noto dei componenti client-side su carta. */
  .dt-box, .quiz-box{ border:1px solid #999; background:none; }

  h2{ border-bottom:1px solid #999; }
}