/* =====================================================================
   Sezione 04: Onesta' e limiti + La storia + FAQ
   Ogni selettore comincia con #onesta-faq. Solo token.
   ===================================================================== */

#onesta-faq .of-titolo__soft{color:var(--muted)}

/* ---------- griglia limiti ---------- */
#onesta-faq .of-limiti{row-gap:var(--s-8);align-items:start}

/* ---------- il cursore della velocita' ---------- */
#onesta-faq .of-ritmo__in{padding:var(--s-5) var(--s-4) var(--s-5);border-radius:var(--radius-lg);display:grid;gap:var(--s-4);background:var(--surface)}
#onesta-faq .of-ritmo__eti{color:var(--muted);display:flex;align-items:center;gap:.75em}
#onesta-faq .of-ritmo__eti::before{content:"";width:2px;height:1.1em;background:var(--accent);flex:none}

#onesta-faq .of-ritmo__demo{padding-block:var(--s-3);margin-inline:calc(var(--s-1) * -1)}
#onesta-faq .of-ritmo__reticle{--word-size:clamp(2rem, 1.5rem + 2vw, 3rem)}
#onesta-faq .of-ritmo__reticle .reticle__w{font-weight:700}

#onesta-faq .of-ritmo__lettura{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
#onesta-faq .of-ritmo__num{display:flex;align-items:baseline;gap:.6em;margin:0}
#onesta-faq .of-ritmo__num output{font-size:clamp(2rem, 1.6rem + 1.6vw, 2.75rem);font-weight:500;line-height:1;letter-spacing:-.02em;color:var(--ink);min-width:3.2ch;display:inline-block}
#onesta-faq .of-ritmo__num .t-mono{color:var(--muted)}
#onesta-faq .of-ritmo__play{min-width:6.5rem}

/* scala: la pista e' allineata al percorso del cursore (pomello 22px => 11px per lato) */
#onesta-faq .of-scala{position:relative;padding-top:2.4rem}
#onesta-faq .of-scala__pista{position:absolute;left:11px;right:11px;top:2.4rem;height:44px;pointer-events:none}
#onesta-faq .of-scala__base{position:absolute;left:0;width:calc(var(--a, .2778) * 100%);top:50%;height:2px;margin-top:-1px;background:var(--line-strong)}
#onesta-faq .of-scala__cala{position:absolute;left:calc(var(--a) * 100%);right:0;top:50%;height:2px;margin-top:-1px;display:flex;gap:4px}
#onesta-faq .of-scala__cala i{flex:1 1 0;height:2px;background:var(--line-strong)}
#onesta-faq .of-scala__banda{position:absolute;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);top:8px;bottom:8px;background:var(--accent-soft);border-top:2px solid var(--accent);border-bottom:2px solid var(--accent)}
#onesta-faq .of-scala__banda b{position:absolute;left:0;top:calc(100% + .55rem);font-weight:500;color:var(--accent);white-space:nowrap}
#onesta-faq .of-scala__media{position:absolute;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);top:-1.9rem;bottom:50%}
#onesta-faq .of-scala__media i{position:absolute;left:50%;bottom:0;top:1.35rem;width:1px;background:var(--muted)}
#onesta-faq .of-scala__media b{position:absolute;left:0;top:0;font-weight:500;color:var(--muted);white-space:nowrap}

#onesta-faq .of-scala__range{position:relative;z-index:1;display:block}
/* track trasparente: la pista disegnata sta sotto */
#onesta-faq .of-scala__range::-webkit-slider-runnable-track{background:transparent}
#onesta-faq .of-scala__range::-moz-range-track{background:transparent}
#onesta-faq .of-scala__range::-moz-range-progress{background:transparent}
#onesta-faq .of-scala__range::-webkit-slider-thumb{width:22px;height:22px;margin-top:-9px;background:var(--accent);border:4px solid var(--surface);box-shadow:0 0 0 1px var(--accent)}
#onesta-faq .of-scala__range::-moz-range-thumb{width:14px;height:14px;background:var(--accent);border:4px solid var(--surface);box-shadow:0 0 0 1px var(--accent)}
#onesta-faq .of-scala__range:focus-visible{outline-offset:6px}

#onesta-faq .of-scala__num{position:relative;height:1.4rem;margin:1.6rem 11px 0;font-size:var(--fs-mono);color:var(--muted)}
#onesta-faq .of-scala__num span{position:absolute;left:calc(var(--a) * 100%);transform:translateX(-50%)}
#onesta-faq .of-scala__num span:first-child{transform:none}
#onesta-faq .of-scala__num span:last-child{transform:translateX(-100%)}

#onesta-faq .of-ritmo__msg{font-size:var(--fs-body);font-weight:700;line-height:1.4;min-height:2.8em;color:var(--ink);text-wrap:pretty}
#onesta-faq .of-ritmo__msg[data-zona="cala"],#onesta-faq .of-ritmo__msg[data-zona="molto"]{color:var(--ink)}
#onesta-faq .of-ritmo__nota{line-height:1.5;border-top:var(--rule);padding-top:var(--s-4)}

/* il lettore che "perde" parole quando si corre: lo stato lo mette il JS */
#onesta-faq .of-ritmo__demo{transition:opacity var(--dur) var(--ease-out)}
#onesta-faq .of-ritmo[data-zona="cala"] .of-ritmo__demo{opacity:.82}
#onesta-faq .of-ritmo[data-zona="molto"] .of-ritmo__demo{opacity:.6}

@media (min-width:48em){
  #onesta-faq .of-ritmo{position:sticky;top:calc(var(--header-h) + var(--s-5))}
  #onesta-faq .of-ritmo__in{padding:var(--s-6)}
}

/* ---------- i nove limiti, lungo un rigo verticale ---------- */
#onesta-faq .of-lista{list-style:none;margin:0;padding:0 0 0 var(--s-5);position:relative;display:grid;gap:0}
#onesta-faq .of-lista::before{content:"";position:absolute;left:0;top:.4rem;bottom:.4rem;width:1px;background:var(--line)}
#onesta-faq .of-lista__fill{position:absolute;left:0;top:.4rem;bottom:.4rem;width:1px;background:var(--accent);transform-origin:50% 0;transform:scaleY(0)}
#onesta-faq .of-voce{position:relative;display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:var(--s-3);padding-block:var(--s-5);border-bottom:var(--rule)}
#onesta-faq .of-voce:first-child{padding-top:0}
#onesta-faq .of-voce:last-child{border-bottom:0}
#onesta-faq .of-voce::before{content:"";position:absolute;left:calc(var(--s-5) * -1 - 6px);top:calc(var(--s-5) + .3rem);width:13px;height:2px;background:var(--line-strong);transition:background-color var(--dur) var(--ease-out)}
#onesta-faq .of-voce:first-child::before{top:.3rem}
#onesta-faq .of-voce.is-letta::before{background:var(--accent)}
#onesta-faq .of-voce__n{font-size:var(--fs-mono);color:var(--accent);letter-spacing:.08em;padding-top:.35em}
#onesta-faq .of-voce p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted);text-wrap:pretty;max-width:var(--max-text)}
#onesta-faq .of-voce strong{display:block;color:var(--ink);font-weight:800;font-size:var(--fs-h3);line-height:var(--lh-snug);letter-spacing:-.015em;margin-bottom:.3em}

@media (min-width:48em){
  #onesta-faq .of-lista{padding-left:var(--s-7)}
  #onesta-faq .of-voce::before{left:calc(var(--s-7) * -1 - 6px)}
  #onesta-faq .of-voce{grid-template-columns:3.4rem minmax(0,1fr);padding-block:var(--s-6)}
  #onesta-faq .of-voce::before{top:calc(var(--s-6) + .3rem)}
}

/* ---------- La storia ---------- */
#onesta-faq .of-storia{margin-top:calc(var(--section-y) * .9);row-gap:var(--s-5);align-items:start}
#onesta-faq .of-storia__eti{color:var(--muted)}
#onesta-faq .of-storia__rigo{margin-top:var(--s-4);--notch-x:38%}
#onesta-faq .of-storia__titolo{font-size:var(--fs-h2);font-weight:800;line-height:1.06;letter-spacing:-.03em;max-width:18ch}
#onesta-faq .of-storia__corpo{margin-top:var(--s-7);display:grid;gap:var(--s-5);max-width:var(--max-text)}
#onesta-faq .of-storia__corpo p{font-size:var(--fs-lead);line-height:1.55;color:var(--muted);text-wrap:pretty}
#onesta-faq .of-storia__corpo .of-storia__forte{color:var(--ink);padding-left:var(--s-5);border-left:2px solid var(--accent)}
#onesta-faq .of-firma{margin-top:var(--s-7);display:grid;gap:var(--s-1);padding-top:var(--s-5);border-top:var(--rule);max-width:var(--max-text)}
#onesta-faq .of-firma__nome{font-weight:800;font-size:var(--fs-h3);letter-spacing:-.015em}
#onesta-faq .of-firma__ruolo{color:var(--muted)}
@media (min-width:48em){
  #onesta-faq .of-storia__lato{position:sticky;top:calc(var(--header-h) + var(--s-6))}
}

/* ---------- FAQ ---------- */
#onesta-faq .of-faq{margin-top:calc(var(--section-y) * .9);row-gap:var(--s-6);align-items:start}
#onesta-faq .of-faq__titolo{font-size:var(--fs-h2);font-weight:800;line-height:1.06;letter-spacing:-.03em}
#onesta-faq .of-faq__sotto{margin-top:var(--s-4);max-width:22rem}
@media (min-width:48em){
  #onesta-faq .of-faq__testa{position:sticky;top:calc(var(--header-h) + var(--s-6))}
}

#onesta-faq .of-faq__lista{border-top:var(--rule)}
#onesta-faq .of-q{border-bottom:var(--rule)}
#onesta-faq .of-q__h{font-size:inherit;font-weight:inherit;letter-spacing:normal;line-height:inherit;margin:0}
#onesta-faq .of-q__btn{width:100%;min-height:64px;display:grid;grid-template-columns:2.4rem minmax(0,1fr) 28px;align-items:center;gap:var(--s-3);padding:var(--s-4) 0;text-align:left;color:var(--ink);-webkit-tap-highlight-color:transparent}
#onesta-faq .of-q__btn:focus-visible{outline-offset:-2px}
#onesta-faq .of-q__n{font-size:var(--fs-mono);color:var(--muted);letter-spacing:.08em;transition:color var(--dur-fast) ease}
#onesta-faq .of-q__testo{font-size:var(--fs-body);font-weight:700;line-height:1.35;text-wrap:pretty;transition:transform var(--dur) var(--ease-out)}
#onesta-faq .of-q__btn:hover .of-q__testo{transform:translateX(4px)}
#onesta-faq .of-q__btn:hover .of-q__n,#onesta-faq .of-q__btn[aria-expanded="true"] .of-q__n{color:var(--accent)}

/* il segno: due tacche. Aperto, quella verticale si abbassa e resta il rigo */
#onesta-faq .of-q__segno{position:relative;width:28px;height:28px;justify-self:end}
#onesta-faq .of-q__segno i{position:absolute;left:50%;top:50%;background:var(--accent)}
#onesta-faq .of-q__segno i:first-child{width:16px;height:2px;margin:-1px 0 0 -8px;background:var(--line-strong);transition:background-color var(--dur) var(--ease-out)}
#onesta-faq .of-q__segno i:last-child{width:2px;height:16px;margin:-8px 0 0 -1px;transition:transform var(--dur) var(--ease-out)}
#onesta-faq .of-q__btn[aria-expanded="true"] .of-q__segno i:last-child{transform:scaleY(0)}
#onesta-faq .of-q__btn[aria-expanded="true"] .of-q__segno i:first-child{background:var(--accent)}

#onesta-faq .of-q__dentro{padding:0 0 0 calc(2.4rem + var(--s-3))}
#onesta-faq .of-q__dentro p{padding-bottom:var(--s-5);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted);max-width:var(--max-text);text-wrap:pretty}
#onesta-faq .of-q__dentro a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:.2em;text-decoration-thickness:1px}

/* chiusura solo se il JS ha preso in carico l'accordion: senza JS si legge tutto */
#onesta-faq .of-faq__lista.is-acc .of-q__r{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur) var(--ease-out)}
#onesta-faq .of-faq__lista.is-acc .of-q__r > .of-q__dentro{min-height:0;overflow:hidden;opacity:0;transform:translate3d(0,-6px,0);transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out)}
#onesta-faq .of-faq__lista.is-acc .of-q.is-open .of-q__r{grid-template-rows:1fr}
#onesta-faq .of-faq__lista.is-acc .of-q.is-open .of-q__r > .of-q__dentro{opacity:1;transform:none}

@media (min-width:48em){
  #onesta-faq .of-q__btn{grid-template-columns:3.4rem minmax(0,1fr) 28px;min-height:72px;padding-block:var(--s-5)}
  #onesta-faq .of-q__testo{font-size:var(--fs-lead)}
  #onesta-faq .of-q__dentro{padding-left:calc(3.4rem + var(--s-3));padding-right:var(--s-7)}
}

/* .col-N + .start-M insieme in base.css danno una colonna sola
   (grid-column-start azzera lo span): qui le posizioni sono esplicite */
@media (min-width:48em){
  #onesta-faq .of-limiti > .of-ritmo{grid-column:1 / span 5}
  #onesta-faq .of-limiti > .of-lista{grid-column:7 / span 6}
  #onesta-faq .of-storia > .of-storia__lato{grid-column:1 / span 4}
  #onesta-faq .of-storia > .of-storia__testo{grid-column:6 / span 7}
  #onesta-faq .of-faq > .of-faq__testa{grid-column:1 / span 4}
  #onesta-faq .of-faq > .of-faq__lista{grid-column:5 / span 8}
}