/*
 * Aggiunte al foglio del mockup per le parti che il mockup non aveva:
 * pagine semplici (legali, 404, conferme), banner cookie, testo lungo dei
 * racconti, stati di invio dei moduli e accessibilità.
 */

/* Pagine semplici: privacy, cookie, termini, conferma newsletter, 404 */
html[data-view=page] #v-page{display:block}
.ypage{padding:calc(120px + var(--m)) 0 120px;min-height:70vh}
.ypage .wrap{max-width:820px}
.ypage.ypc{text-align:center;display:grid;align-items:center}
.ypage.ypc .wrap{max-width:720px}
.ypage .ypk{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);margin-bottom:18px}
.ypage .ypk::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--yel)}
.ypage h1.t{font-size:clamp(40px,6vw,76px);margin-bottom:28px}
.ypage.ypc .lead{margin-inline:auto}
.ypage .ypa{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.ypage.ypc .ypa{justify-content:center}
.ypage .btn.ghost{border-color:var(--line2)}

.yprose,.pbody{font-size:16.5px;line-height:1.75;color:var(--ink2)}
.yprose>*+*,.pbody>*+*{margin-top:1em}
.yprose h2,.pbody h2{font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 144;color:var(--ink);font-size:clamp(26px,3vw,34px);line-height:1.1;letter-spacing:-.02em;margin-top:1.6em}
.yprose h3,.pbody h3{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:22px;line-height:1.2;margin-top:1.4em}
.yprose ul,.yprose ol,.pbody ul,.pbody ol{padding-left:1.3em}
.yprose li+li,.pbody li+li{margin-top:.35em}
.yprose a,.pbody a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yel);text-decoration-thickness:3px;text-underline-offset:3px}
.yprose strong,.pbody strong{color:var(--ink);font-weight:600}
.yprose img,.pbody img{border-radius:var(--r-l);height:auto;margin:1.4em 0}
.yprose blockquote,.pbody blockquote{border-left:4px solid var(--yel);padding:.2em 0 .2em 1.1em;font-family:var(--serif);font-style:italic;font-size:1.25em;color:var(--ink)}

/* Testo lungo del racconto, sotto "Com'è andata" */
.pbody{max-width:760px;margin:70px auto 0}

/* Nessun racconto ancora pubblicato */
.xempty{text-align:center;margin:40px auto 0}

/* Campo trappola dei moduli: le persone non lo vedono */
.hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}

/* Invio in corso / errore di invio */
.bform .bsend[disabled]{opacity:.6;cursor:progress}
.bform .bfail{margin-top:12px;font-size:14px;color:#b4281e}
.fform button[disabled]{opacity:.6;cursor:progress}

/* Salta al contenuto */
.skip-link{position:fixed;left:16px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;font-size:14px;transition:top .2s}
.skip-link:focus{top:16px}
#main-content:focus{outline:none}

/* Cookie: pulsantino in basso a sinistra + pannello delle preferenze */
.ckf{position:fixed;left:calc(var(--m) + 12px);bottom:calc(var(--m) + 12px + env(safe-area-inset-bottom,0px));z-index:80}
.ckf .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ckf-btn{position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 10px 28px -12px rgba(29,42,36,.4);cursor:pointer;transition:transform .35s cubic-bezier(.22,1,.36,1),background .2s;animation:ckbIn .7s cubic-bezier(.22,1,.36,1) .6s both}
.ckf-btn:hover{transform:rotate(-12deg) scale(1.06);background:var(--yel)}
.ckf-btn[aria-expanded=true]{background:var(--yel)}
.ckf-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ckf-btn.new::after{content:"";position:absolute;top:1px;right:1px;width:10px;height:10px;border-radius:50%;background:var(--lime);border:2px solid #fff}
.ckf-panel{position:absolute;left:0;bottom:calc(100% + 12px);width:min(380px,calc(100vw - 2*var(--m) - 24px));background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:20px;box-shadow:0 22px 60px -22px rgba(29,42,36,.45);transform-origin:bottom left;animation:ckfIn .35s cubic-bezier(.22,1,.36,1) both}
.ckf-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ckf-head b.t{font-size:20px;line-height:1.15;color:var(--ink)}
.ckf-x{flex-shrink:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--milk);color:var(--ink);border:0;cursor:pointer}
.ckf-x:hover{background:var(--yel)}
.ckf-msg{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink2)}
.ckf-msg a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yel);text-decoration-thickness:2px;text-underline-offset:2px}
.ckf-opts{margin-top:14px;display:grid;gap:8px}
.ckf-opt{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-radius:var(--r-m);background:var(--milk);cursor:pointer}
div.ckf-opt{cursor:default}
.ckf-opt b{display:block;font-size:14px;color:var(--ink)}
.ckf-opt span:not(.ckf-sw){display:block;font-size:12.5px;line-height:1.4;color:var(--ink2);margin-top:2px}
.ckf-sw{flex-shrink:0;position:relative;width:40px;height:24px;border-radius:999px;background:var(--line2);transition:background .2s}
.ckf-sw i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(29,42,36,.25);transition:transform .25s cubic-bezier(.22,1,.36,1)}
.ckf-sw.on{background:var(--lime)}.ckf-sw.on i{transform:translateX(16px)}
.ckf-sw.locked{opacity:.55}
.ckf-opt input:focus-visible + .ckf-sw{outline:2px solid var(--ink);outline-offset:2px}
.ckf-bt{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.ckf-bt .btn{flex:1 1 auto;justify-content:center;padding:10px 14px;font-size:13.5px}
.ckf-bt .btn.ghost{border-color:var(--line2)}
.ckf-bt .btn.yel{flex-basis:100%}
@keyframes ckbIn{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes ckfIn{from{transform:translateY(10px) scale(.96);opacity:0}to{transform:none;opacity:1}}
@media (max-width:760px){.ckf-btn{width:42px;height:42px}}
@media (prefers-reduced-motion:reduce){.ckf-btn,.ckf-panel{animation:none}}

/* Testi e blocchi liberi tra le sezioni del racconto */
.yfree .pbody{margin-top:0}

/* Colori liberi dei tipi di racconto: la scheda porta --tc (colore) e --tci
   (testo leggibile sopra); valgono più dei tre colori fissi del mockup. */
.xrow[data-t][style] .xdate{background:var(--tc);color:var(--tci)}
.xrow[data-t][style] .xcat{background:var(--tc);color:var(--tci)}
.xrow[data-t][style] .flink::before{background:var(--tc)!important}
#v-past[style] .ptag.pc,#v-past[style] .pcta .ebtn,#v-past[style] .ebar .ebtn{color:var(--eci,inherit)}

/* Su telefono il mockup nasconde «Periodo» (aziende) e «Regione» (creator):
   nei moduli del sito i campi si chiamano period e region. */
@media (max-width:760px){
  .bform[data-type=azienda] .bkf:has(input[name=period]),.bform[data-type=creator] .bkf:has(input[name=region]){display:none!important}
}

/* Pagine legali (privacy, cookie, termini): schede colorate come sul sito */
.ypage .wrap:has(.lg){max-width:1000px}
.lg{font-size:16.5px;line-height:1.75;color:var(--ink2)}
.lg>*+*{margin-top:1em}
.lg .lg-lead{font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:var(--ink);max-width:62ch}
.lg .lg-lead em{font-family:var(--serif);font-style:italic;font-weight:500}
.lg a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yel);text-decoration-thickness:3px;text-underline-offset:3px}
.lg strong{color:var(--ink);font-weight:600}
.lg ul{padding-left:1.2em}.lg li+li{margin-top:.35em}.lg li::marker{color:var(--lime)}
.lg-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:34px 0 10px!important}
.lg-c{border-radius:var(--r-xl);padding:22px 20px 20px;background:var(--milk);color:var(--ink);transform:rotate(var(--rot,0deg));transition:transform .4s cubic-bezier(.22,1,.36,1)}
.lg-c:hover{transform:rotate(0) translateY(-4px)}
.lg-c:nth-child(1){--rot:-1.4deg;background:var(--sky)}
.lg-c:nth-child(2){--rot:1deg;background:var(--yel)}
.lg-c:nth-child(3){--rot:-.8deg;background:var(--lime)}
.lg-c:nth-child(4){--rot:1.3deg;background:var(--milk)}
.lg-c b{display:block;font-family:var(--serif);font-size:21px;line-height:1.1;font-weight:600;margin-bottom:8px}
.lg-c span{display:block;font-size:14px;line-height:1.5}
.lg-toc{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 0!important;padding:0!important;list-style:none}
.lg-toc li{margin:0!important}
.lg-toc a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--line2);font-size:13.5px;text-decoration:none!important;color:var(--ink);transition:background .2s,border-color .2s}
.lg-toc a:hover{background:var(--yel);border-color:var(--yel)}
.lg-toc a i{font-style:normal;font-family:var(--serif);font-weight:600;color:var(--ink2)}
.lg h2{display:flex;align-items:center;gap:14px;font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 144;color:var(--ink);font-size:clamp(26px,3vw,34px);line-height:1.1;letter-spacing:-.02em;margin-top:2em;scroll-margin-top:110px}
.lg h2 em{font-style:italic;font-weight:500}
.lg h2 .lg-n{flex-shrink:0;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:18px;letter-spacing:0;background:var(--sky)}
.lg h2:nth-of-type(3n+2) .lg-n{background:var(--yel)}
.lg h2:nth-of-type(3n) .lg-n{background:var(--lime)}
.lg h3{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:21px;line-height:1.2;margin-top:1.5em}
.lg-tw{overflow-x:auto;margin:22px 0 0!important;border-radius:var(--r-xl);background:var(--milk);-webkit-overflow-scrolling:touch}
.lg-tab{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5;min-width:640px}
.lg-tab th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);padding:16px 18px 10px;vertical-align:bottom}
.lg-tab td{padding:14px 18px;border-top:1px solid var(--line);vertical-align:top;color:var(--ink2)}
.lg-tab td:first-child{color:var(--ink);font-weight:600}
.lg-tab code{font-size:13px;background:#fff;border-radius:6px;padding:2px 7px;color:var(--ink)}
.lg-tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;color:var(--ink);background:var(--sky);white-space:nowrap}
.lg-tag.y{background:var(--yel)}.lg-tag.l{background:var(--lime)}
.lg-box{margin:24px 0 0!important;padding:22px 24px;border-radius:var(--r-xl);background:var(--milk);border-left:5px solid var(--yel)}
.lg-box.sky{border-left-color:var(--sky)}.lg-box.lime{border-left-color:var(--lime)}
.lg-box>*+*{margin-top:.6em}
.lg-box b.t2{display:block;font-family:var(--serif);font-size:20px;line-height:1.2;font-weight:600;color:var(--ink)}
.lg-who{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 30px;margin:22px 0 0!important;padding:24px 26px;border-radius:var(--r-xl);border:1px solid var(--line2);background:#fff}
.lg-who div{padding:8px 0}
.lg-who small{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);opacity:.75}
.lg-who span{display:block;color:var(--ink);font-weight:500}
.lg-rights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0 0!important}
.lg-r{padding:18px 18px 16px;border-radius:var(--r-l);background:#fff;border:1px solid var(--line)}
.lg-r b{display:block;font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);margin-bottom:4px}
.lg-r span{display:block;font-size:14px;line-height:1.5}
.lg-r::before{content:'';display:block;width:26px;height:6px;border-radius:999px;margin-bottom:12px;background:var(--sky)}
.lg-r:nth-child(3n+2)::before{background:var(--yel)}.lg-r:nth-child(3n)::before{background:var(--lime)}
.lg-btn{display:inline-flex!important;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;background:var(--yel);color:var(--ink)!important;font-weight:600;font-size:15px;text-decoration:none!important;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.lg-btn:hover{transform:translateY(-2px)}
.lg-end{margin-top:2.6em!important;padding-top:22px;border-top:1px solid var(--line);font-size:14px}
@media (max-width:900px){.lg-sum{grid-template-columns:repeat(2,1fr)}.lg-rights{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.lg-sum,.lg-rights,.lg-who{grid-template-columns:1fr}.lg h2{gap:10px}.lg h2 .lg-n{width:36px;height:36px;font-size:16px}.lg-box{padding:18px}}

/* Pagina del racconto: il titolo vero (h1) resta per motori di ricerca e
   lettori di schermo, sullo schermo si vedono luogo e capitoli. */
.ysr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Il mockup nasconde le vecchie sezioni .pdesc: i blocchi liberi del racconto restano visibili. */
#v-past .pdesc.yfree{display:block;padding:clamp(60px,6vw,100px) 0 0}