/* ---------------------------------------------------------------
   Teoremi spiegati facile — pagina /teoremi
   Usa i token di style.css (--navy, --gold, --ink, --grey, --line…)
   --------------------------------------------------------------- */
.th-wrap { --th-grid:#e8ecf3; --th-soft:#f6f8fb; --th-acc:var(--blue); --th-mark:var(--gold-d);
           --th-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

.th-wrap section { padding: 0; }          /* style.css mette 72px su ogni <section> */
.th-wrap ol, .th-wrap ul { margin: 0; }
.th-head { background: var(--navy); color:#fff; padding: 46px 0 40px 0; }
.th-head .kicker { color:#8b93a3; }
.th-head h1 { font-size: 36px; line-height:1.12; margin:8px 0 0 0; color:#fff; }
.th-head h1 em { font-style:normal; color: var(--gold); }
.th-head .rule { margin: 14px 0 18px 0; }
.th-head p { color:#cdd3de; font-size:17px; max-width: 640px; }
.th-head .meta { display:flex; gap:22px; flex-wrap:wrap; margin-top:22px; }
.th-head .meta div { font-size:13px; color:#8b93a3; }
.th-head .meta b { display:block; font-size:22px; color:var(--gold); font-weight:700; line-height:1.3; }

.container.wide { max-width: 1240px; }
.th-shell { display:grid; grid-template-columns: 274px minmax(0,1fr); gap:0; align-items:start; }

/* ---------- indice ---------- */
/* indice tutto aperto: nessuno scorrimento interno, l'elenco e' lungo quanto
   serve e scorre insieme alla pagina. */
.th-side { border-right:1px solid var(--line); align-self:start;
           padding: 26px 20px 40px 0; }
.th-side-top, .th-scrim { display:none; }
body.th-lock { overflow:hidden; }
/* il bottone che apre l'indice: in rosso pieno, altrimenti non si capisce
   che li' sotto c'e' un menu da aprire */
.th-toggle { display:none; width:100%; align-items:center; gap:10px; text-align:left;
             font:inherit; font-size:15px; font-weight:700; color:#fff; background:var(--red);
             border:0; border-radius:10px; padding:13px 15px; cursor:pointer; margin:18px 0 0 0;
             box-shadow:0 6px 16px rgba(178,60,60,.26); }
.th-toggle .ic { width:17px; height:17px; flex:none; }
.th-toggle .l { flex:none; }
.th-toggle span.c { font-size:13px; font-weight:600; color:rgba(255,255,255,.82);
                    margin-left:auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
                    white-space:nowrap; }
.th-toggle:hover { background:#9d3434; }
.th-toggle:active { transform:translateY(1px); }
.th-part { margin: 20px 0 6px 0; display:flex; align-items:baseline; gap:8px;
           border-bottom:1px solid var(--line); padding-bottom:6px; }
.th-part:first-child { margin-top:0; }
.th-part .rn { font-family:var(--serif); font-style:italic; font-weight:700; font-size:13px;
               color:var(--gold-d); min-width:20px; }
.th-part .nm { font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:#8b93a3; font-weight:700; }
#thNav button { display:flex; gap:10px; align-items:baseline; width:100%; text-align:left; font:inherit;
                 font-size:14px; line-height:1.4; color:var(--grey); background:none; border:0;
                 border-left:3px solid transparent; padding:7px 10px; border-radius:0 7px 7px 0; cursor:pointer; }
#thNav button:hover { background:var(--th-soft); color:var(--ink); }
#thNav button[aria-current="true"] { background:var(--th-soft); color:var(--navy); font-weight:700;
                                      border-left-color:var(--gold); }
#thNav button .n { font-family:var(--th-mono); font-size:11.5px; color:#8b93a3; min-width:16px; flex:none; }
#thNav button[aria-current="true"] .n { color:var(--gold-d); }

/* ---------- lettura ---------- */
.th-main { min-width:0; padding: 30px 0 60px 30px; }
.th-crumb { font-size:12px; letter-spacing:1.6px; text-transform:uppercase; color:#8b93a3; font-weight:700;
            display:flex; gap:9px; flex-wrap:wrap; align-items:baseline; }
.th-crumb b { color:var(--gold-d); font-family:var(--serif); font-style:italic; letter-spacing:.4px; }
.th-main h2.t { font-family:var(--serif); font-size:34px; line-height:1.14; color:var(--navy);
                margin:10px 0 0 0; text-wrap:balance; }
.th-main p.sub { color:var(--grey); font-size:17px; margin:10px 0 0 0; max-width:62ch; }
.th-block { margin-top:34px; }
.th-block > h3 { font-size:11px; letter-spacing:2.6px; text-transform:uppercase; color:#8b93a3;
                 font-weight:700; margin:0 0 13px 0; padding-bottom:7px; border-bottom:1px solid var(--line); }

.th-stmt { background:#fff; border:1px solid var(--line); border-left:4px solid var(--navy);
           border-radius:4px 10px 10px 4px; padding:20px 22px; box-shadow:0 1px 2px rgba(31,43,71,.05); }
.th-stmt p { font-family:var(--serif); font-size:17px; line-height:1.62; margin:0 0 10px 0; }
.th-stmt p:last-child { margin-bottom:0; }
.th-wrap .formula { font-family:var(--th-mono); font-size:13.5px; line-height:1.8; background:var(--th-soft);
       border:1px solid var(--line); border-radius:8px; padding:12px 15px; margin:12px 0 0 0;
       overflow-x:auto; white-space:pre; color:var(--ink); }
.th-wrap .hint { font-size:14.5px; color:var(--grey); margin:12px 0 0 0; }
em.t { font-style:normal; font-family:var(--th-mono); font-size:.92em; background:var(--th-soft);
       border:1px solid var(--line); padding:1px 5px; border-radius:4px; }

ol.th-proof { counter-reset:p; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:15px; }
ol.th-proof > li { counter-increment:p; display:grid; grid-template-columns:28px minmax(0,1fr); gap:13px; }
ol.th-proof > li::before { content:counter(p); font-family:var(--th-mono); font-size:12.5px; color:var(--navy);
  background:var(--th-soft); border:1px solid var(--line); border-radius:50%; width:26px; height:26px;
  display:grid; place-items:center; font-weight:600; margin-top:1px; }
ol.th-proof > li > div { min-width:0; max-width:66ch; }
ol.th-proof p { margin:0 0 8px 0; }
ol.th-proof p:last-child { margin-bottom:0; }
.th-qed { margin-top:16px; font-size:14px; color:var(--grey); display:flex; align-items:center; gap:9px; }
.th-qed i { width:9px; height:9px; background:var(--navy); display:inline-block; flex:none; }
.th-aside { margin-top:16px; background:var(--th-soft); border-radius:9px; padding:14px 16px;
            font-size:14.5px; color:var(--grey); max-width:68ch; border-left:3px solid var(--gold); }
.th-aside b { color:var(--ink); }

/* ---------- laboratorio ---------- */
.th-lab { border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden;
          box-shadow:0 1px 2px rgba(31,43,71,.05); }
.th-lab-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:13px 17px;
               border-bottom:1px solid var(--line); background:var(--th-soft); }
.th-lab-head .a { font-size:13.5px; font-weight:700; color:var(--navy); flex:1; min-width:150px; }
.th-lab-head .b { font-size:12.5px; color:var(--grey); }
.th-ctrls { display:grid; grid-template-columns:repeat(auto-fit,minmax(172px,1fr)); gap:13px 15px; padding:16px 17px; }
.th-f { display:flex; flex-direction:column; gap:5px; min-width:0; }
.th-f label { font-size:12px; color:var(--grey); font-weight:700; }
.th-f label .u { font-weight:400; color:#8b93a3; }
.th-f input { font-family:var(--th-mono); font-size:14px; padding:8px 10px; border-radius:7px;
              border:1px solid var(--line); background:#fff; color:var(--ink); width:100%; min-width:0; }
.th-f input:focus { outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue); }
.th-f input.bad { border-color:var(--red); background:#faf0ef; }
.th-f .e { font-size:12px; color:var(--red); }
.th-pre { display:flex; gap:8px; flex-wrap:wrap; padding:0 17px 16px 17px; align-items:center; }
.th-pre .pl { font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:#8b93a3; font-weight:700; }
.th-pre button { font-family:var(--th-mono); font-size:12.5px; border:1px solid var(--line); background:#fff;
                 color:var(--grey); border-radius:999px; padding:5px 12px; cursor:pointer; }
.th-pre button:hover { border-color:var(--gold); color:var(--gold-d); background:#fdf9f0; }

.th-ro { display:flex; flex-wrap:wrap; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
         background:var(--th-soft); }
.th-ro > div { flex:1 1 155px; min-width:0; padding:12px 17px; border-right:1px solid var(--line); }
.th-ro > div:last-child { border-right:0; }
.th-ro .k { font-size:11.5px; color:#8b93a3; font-weight:700; }
.th-ro .v { font-family:var(--th-mono); font-size:16.5px; margin-top:3px; font-variant-numeric:tabular-nums;
            color:var(--ink); overflow:hidden; text-overflow:ellipsis; }
.th-ro .v.ac { color:var(--blue); } .th-ro .v.mk { color:var(--gold-d); }

.th-verdict { padding:13px 17px; font-size:14.5px; display:flex; gap:10px; align-items:flex-start;
              border-bottom:1px solid var(--line); line-height:1.55; }
.th-verdict i { width:9px; height:9px; border-radius:50%; flex:none; margin-top:7px; }
.th-verdict.ok { color:var(--green); } .th-verdict.ok i { background:var(--green); }
.th-verdict.no { color:var(--red); } .th-verdict.no i { background:var(--red); }
.th-verdict.mid { color:#8a6414; } .th-verdict.mid i { background:var(--gold); }
.th-verdict b { font-weight:700; }

.th-plot { padding:17px; background:#fff; }
.th-plot svg { display:block; width:100%; height:auto; max-width:100%; overflow:visible; }

/* legenda dei grafici (la produce legend() in teoremi.js, classe non prefissata) */
.th-wrap .legend { display:flex; flex-wrap:wrap; gap:13px; padding:0 17px 15px;
                   font-size:12.5px; color:var(--grey); background:#fff; margin:0; }
.th-wrap .legend span { display:flex; align-items:center; gap:6px; }
.th-wrap .legend i { width:16px; height:0; border-top-width:2.5px; border-top-style:solid;
                     flex:none; display:inline-block; }
.th-wrap .legend i.dot { height:8px; width:8px; border-radius:50%; border:0; }
.th-leg { display:flex; flex-wrap:wrap; gap:14px; padding:0 17px 15px 17px; font-size:12.5px; color:var(--grey); }
.th-leg span { display:flex; align-items:center; gap:7px; }
.th-leg i { width:17px; height:0; border-top-width:2.5px; border-top-style:solid; flex:none; display:inline-block; }
.th-leg i.dot { height:9px; width:9px; border-radius:50%; border:0; }

.th-tbl { border-top:1px solid var(--line); }
.th-tbl-h { display:flex; align-items:baseline; gap:11px; padding:13px 17px 9px 17px; flex-wrap:wrap; }
.th-tbl-h h4 { margin:0; font-size:11px; letter-spacing:2.2px; text-transform:uppercase; color:#8b93a3; font-weight:700; }
.th-tbl-h .n { font-size:12.5px; color:#8b93a3; flex:1; min-width:130px; }
.th-scroll { overflow-x:auto; padding:0 17px 17px 17px; }
.th-scroll table { border-collapse:collapse; font-family:var(--th-mono); font-size:12.5px; width:100%;
                   min-width:min(100%,430px); }
.th-scroll thead th { text-align:right; font-weight:600; color:#8b93a3; padding:7px 12px; white-space:nowrap;
                      border-bottom:1px solid var(--line); font-size:11.5px; background:#fff; }
.th-scroll thead th:first-child { text-align:left; }
.th-scroll tbody td { text-align:right; padding:6px 12px; white-space:nowrap; font-variant-numeric:tabular-nums;
                      border-bottom:1px solid #f0f3f8; color:var(--ink); }
.th-scroll tbody td:first-child { text-align:left; color:var(--grey); }
.th-scroll tbody tr.hl td { background:#fdf6e9; color:var(--gold-d); font-weight:600; }
.th-scroll td.pos { color:var(--green); } .th-scroll td.neg { color:var(--red); }

.th-foot { margin-top:40px; padding-top:20px; border-top:1px solid var(--line); display:flex;
           justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:center; }
.th-foot .pair { display:flex; gap:10px; flex-wrap:wrap; }
.th-foot button { font:inherit; font-size:13.5px; font-weight:600; border:1px solid var(--line); background:#fff;
                  color:var(--grey); border-radius:8px; padding:9px 15px; cursor:pointer; max-width:46vw;
                  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.th-foot button:hover { border-color:var(--gold); color:var(--gold-d); }
.th-foot .c { font-size:13px; color:#8b93a3; font-family:var(--th-mono); }

.th-cta { margin-top:46px; background:var(--navy); color:#fff; border-radius:12px; padding:28px 30px;
          display:flex; gap:22px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.th-cta h3 { font-family:var(--serif); font-size:23px; margin:0 0 7px 0; color:#fff; line-height:1.2; }
.th-cta p { color:#cdd3de; font-size:15px; margin:0; max-width:52ch; }

@media (max-width:860px){
  .th-head { padding:34px 0 30px 0; }
  .th-head h1 { font-size:28px; }
  .th-shell { grid-template-columns:minmax(0,1fr); }
  .th-toggle { display:flex; }

  /* l'indice entra da sinistra come un cassetto, sopra la pagina */
  .th-side { position:fixed; top:0; left:0; bottom:0; z-index:71;
             /* align-self:start serve all'indice disteso su schermo grande, ma qui
                impedirebbe al pannello di prendere tutta l'altezza dello schermo */
             align-self:stretch;
             width:min(86vw, 340px); background:#fff; border-right:1px solid var(--line);
             box-shadow:0 0 44px rgba(31,43,71,.26); padding:0; overflow-y:auto;
             -webkit-overflow-scrolling:touch;
             transform:translateX(-100%); visibility:hidden;
             transition:transform .28s ease, visibility 0s linear .28s; }
  .th-side.open { transform:translateX(0); visibility:visible;
                  transition:transform .28s ease, visibility 0s linear 0s; }
  .th-side-top { display:flex; align-items:center; justify-content:space-between; gap:12px;
                 position:sticky; top:0; z-index:1; background:#fff;
                 border-bottom:1px solid var(--line); padding:15px 16px 13px; }
  .th-side-top span { font-size:11px; letter-spacing:1.8px; text-transform:uppercase;
                      color:#8b93a3; font-weight:700; }
  .th-x { font:inherit; font-size:24px; line-height:1; color:var(--grey); background:none;
          border:0; padding:0 4px; cursor:pointer; }
  #thNav { display:block; padding:14px 16px 26px; }
  .th-scrim { display:block; position:fixed; inset:0; z-index:70; background:rgba(23,33,54,.46);
              opacity:0; pointer-events:none; transition:opacity .28s ease; }
  .th-scrim.on { opacity:1; pointer-events:auto; }
  .th-main { padding:26px 0 50px 0; }
  .th-main h2.t { font-size:27px; }
}
@media (prefers-reduced-motion:reduce){ * { transition:none !important; } }