/* Guscio del portale (anteprima v3): header sottile + barra laterale + footer
   compatto per le pagine interne (body.app), header e footer pubblici per le
   pagine pubbliche (body.public). Viene dopo pages.css.
   Il mono (JetBrains Mono) è statico 400: niente pesi diversi sul mono. */

.skip{position:absolute;left:-999px;top:8px;background:var(--slate);color:#fff;padding:10px 16px;z-index:1060}
.skip:focus{left:8px;color:#fff}

/* ---------- applicazione: header ---------- */
body.app{background:var(--light)}
/* Ancore sotto gli header sticky (56px app, 72px pubblico). Lo scroll-padding
   vale sul contenitore di scorrimento, cioè html: su body non avrebbe effetto. */
html:has(body.app){scroll-padding-top:64px}
html:has(body.public){scroll-padding-top:80px}
.app-top{position:sticky;top:0;z-index:1040;height:56px;display:flex;align-items:center;gap:18px;padding:0 20px;background:var(--white);border-bottom:1px solid var(--line)}
.app-logo{flex:0 0 auto;width:202px;line-height:0}
.app-logo img{height:36px;width:auto}
.gsearch{position:relative;flex:1;max-width:560px}
.gsearch input{width:100%;height:38px;padding:0 40px 0 38px;border:1px solid var(--line);border-radius:2px;background:var(--light);font:400 .92rem var(--font-text);color:var(--ink)}
.gsearch input:focus{outline:none;border-color:var(--blue);background:var(--white);box-shadow:0 0 0 3px rgba(160,190,210,.4)}
.gsearch input::-webkit-search-cancel-button{display:none}
.gsearch>svg{position:absolute;left:12px;top:11px;width:16px;height:16px;color:var(--ink-soft)}
.gsearch kbd{position:absolute;right:9px;top:9px;font:400 .7rem/1 var(--font-mono);padding:4px 6px;border:1px solid var(--line);border-radius:2px;color:var(--ink-soft);background:var(--white)}
.gs-res{position:absolute;top:44px;left:0;right:0;background:var(--white);border:1px solid var(--line);border-radius:4px;box-shadow:0 18px 40px rgba(55,67,80,.14);padding:6px 8px 8px;max-height:60vh;overflow:auto;z-index:1040}
.gs-res h5{font:400 .64rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:10px 10px 4px}
.gs-res a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 10px;border-radius:2px;color:var(--ink);font-size:.92rem;text-decoration:none}
.gs-res a:hover,.gs-res a.hl{background:var(--acc-a);color:var(--ink)}
.gs-res a .mono{color:var(--ink-soft);font-size:.76rem}
.gs-res a.more{justify-content:flex-start;color:var(--blue-deep);font-size:.84rem}
.gs-res .none{padding:12px 10px;margin:0;color:var(--ink-soft);font-size:.9rem}
.app-tools{margin-left:auto;display:flex;align-items:center;gap:6px}
.app-pending{margin-right:6px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid transparent;border-radius:2px;background:transparent;color:var(--slate);cursor:pointer}
.icon-btn:hover{border-color:var(--blue);color:var(--blue-deep)}
.icon-btn svg{width:18px;height:18px}
.bell{position:relative}
.bell .dot{position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:2px;background:var(--blue);color:#fff;font:400 .66rem/17px var(--font-mono);text-align:center}
.me{display:inline-flex;align-items:center;gap:10px;padding:4px 6px;border:0;background:none;cursor:pointer;color:var(--ink);font:500 .88rem/1.1 var(--font-text);text-align:left;border-radius:2px}
.me:hover,.me[aria-expanded="true"]{background:var(--acc-a)}
.me .ini{width:34px;height:34px;border-radius:2px;background:var(--slate);color:#fff;display:inline-flex;align-items:center;justify-content:center;font:400 .78rem/1 var(--font-mono);letter-spacing:.06em}
.me .who>span{display:block}
.me small{display:block;color:var(--ink-soft);font-weight:400;font-size:.76rem}
.me-menu{min-width:240px;padding:6px;border:1px solid var(--line);border-radius:4px;box-shadow:0 18px 40px rgba(55,67,80,.14)}
.me-menu-h{padding:8px 12px 10px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.me-menu-h b{display:block;font-weight:500;color:var(--ink)}
.me-menu-h small{display:block;color:var(--ink-soft);font-size:.8rem;overflow-wrap:anywhere}
.me-menu .dropdown-item{padding:9px 12px;border-radius:2px;color:var(--ink);font-size:.92rem}
.me-menu .dropdown-item:hover,.me-menu .dropdown-item:focus{background:var(--acc-a);color:var(--ink)}
.side-burger{display:none;width:40px;height:40px;border:0;background:none;position:relative;cursor:pointer;flex:0 0 40px}
.side-burger span{position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink)}
.side-burger span:nth-child(1){top:14px}.side-burger span:nth-child(2){top:20px}.side-burger span:nth-child(3){top:26px}

/* ---------- applicazione: barra laterale e contenuto ---------- */
body.app .shell{display:grid;grid-template-columns:240px minmax(0,1fr);grid-template-rows:1fr auto;min-height:calc(100vh - 56px)}
.side{grid-row:1/3;position:sticky;top:56px;align-self:start;height:calc(100vh - 56px);overflow:auto;background:var(--white);border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:20px}
.side-g{display:flex;flex-direction:column}
.side-h{display:block;font:400 .64rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0 13px 8px}
.side a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-left:3px solid transparent;color:var(--ink);font:500 .92rem/1.2 var(--font-text);border-radius:0 2px 2px 0;text-decoration:none;transition:background-color .3s var(--ease-out)}
.side a:hover{background:var(--acc-a);color:var(--ink)}
.side a b{font:400 .76rem/1 var(--font-mono);color:var(--ink-soft)}
.side a[aria-current="page"]{border-left-color:var(--blue);color:var(--blue-deep);background:var(--acc-a)}
.side a[aria-current="page"] b{color:var(--blue-deep)}
.side a.side-cta{border-left:0;justify-content:center;margin:10px 10px 0;color:#fff;border-radius:2px;font:500 .78rem/1.2 var(--font-text)}
.side a.side-cta:hover{color:#fff;background:var(--blue-deep)}
.side-foot{margin:auto 0 0;padding:14px 13px 0;border-top:1px solid var(--line);font-size:.76rem;color:var(--ink-soft);line-height:1.5}
.app-main{grid-column:2;min-width:0;padding:20px 0 32px}
.app-main>.container,.app-main>.container-fluid,.app-main>.container-lg,.app-main>.container-xl,.app-main>.container-xxl{max-width:none;padding-inline:28px}
.app-crumb{margin-bottom:4px}
.app-foot{grid-column:2;display:flex;flex-wrap:wrap;gap:6px 18px;padding:16px 28px;border-top:1px solid var(--line);font-size:.78rem;color:var(--ink-soft)}
.app-foot a{color:var(--ink-soft);text-decoration:none}
.app-foot a:hover{color:var(--blue-deep)}
@media (max-width:980px){
  body.app .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;top:56px;left:0;bottom:0;width:264px;height:auto;align-self:stretch;z-index:1035;transform:translateX(-100%);visibility:hidden;transition:transform .35s var(--ease-out),visibility 0s linear .35s}
  .side.open{transform:none;visibility:visible;transition:transform .35s var(--ease-out);box-shadow:0 0 0 100vmax rgba(31,38,46,.35)}
  .app-main,.app-foot{grid-column:1}
  .side-burger{display:block}
  .app-logo{width:auto}
  .gsearch kbd{display:none}
  .app-top{gap:10px;padding:0 12px}
}
@media (max-width:760px){.app-top .me .who,.app-pending{display:none}}
@media (max-width:600px){
  .app-logo img{height:30px}
  .gsearch input{padding-right:12px}
  .app-main>.container,.app-main>.container-fluid,.app-main>.container-lg,.app-main>.container-xl,.app-main>.container-xxl{padding-inline:16px}
  .app-foot{padding:14px 16px}
}
@media (max-width:420px){.app-logo img{height:26px}.app-top{gap:6px}}

/* ---------- pubblico: header ---------- */
.pub-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.pub-header{position:sticky;top:0;z-index:1030;border-bottom:1px solid var(--line)}
.pub-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pub-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.brandline{display:flex;align-items:center;gap:16px;flex:0 1 auto;min-width:0}
.pub-logo{display:inline-flex;align-items:center;line-height:0;flex:0 0 auto}
.pub-logo img{height:48px;width:auto;display:block}
.idline{font:400 .64rem/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);padding-left:16px;border-left:1px solid var(--line);white-space:nowrap}
.idline span{display:block}
.pub-menu{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;white-space:nowrap}
.pub-menu a{display:inline-flex;align-items:center;padding:10px 12px;color:var(--ink);font:500 .9rem/1 var(--font-text);border-radius:2px;text-decoration:none;transition:color .3s var(--ease-out),background-color .3s var(--ease-out)}
.pub-menu a:hover{color:var(--blue-deep);background:var(--acc-a)}
.pub-menu .cta{margin-left:6px}
.pub-menu .cta a{padding:12px 18px;background:var(--blue);color:#fff}
.pub-menu .cta a:hover{background:var(--blue-deep);color:#fff}
.pub-main{padding:32px 0 48px;min-height:50vh}
.pub-burger{display:none;width:40px;height:40px;border:0;background:none;position:relative;cursor:pointer;flex:0 0 40px}
.pub-burger span{position:absolute;left:9px;right:9px;height:1.5px;background:var(--ink)}
.pub-header.on-hero .pub-burger span{background:#fff}
.pub-burger span:nth-child(1){top:14px}.pub-burger span:nth-child(2){top:20px}.pub-burger span:nth-child(3){top:26px}
@media (max-width:720px){.idline{display:none}}
@media (max-width:720px){
  .pub-burger{display:block}
  .pub-menu{position:absolute;top:100%;right:var(--pad);left:var(--pad);z-index:1030;flex-direction:column;align-items:stretch;gap:2px;white-space:normal;background:var(--white);border:1px solid var(--line);border-radius:4px;box-shadow:0 18px 40px rgba(55,67,80,.14);padding:6px;opacity:0;transform:translateY(-6px);pointer-events:none;visibility:hidden;transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),visibility 0s linear .3s}
  .pub-menu.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
  .pub-menu li{width:100%}
  .pub-menu li:not(.cta) a{width:100%;color:var(--ink)!important}
  .pub-menu li:not(.cta) a:hover{background:var(--acc-a)!important}
  .pub-menu .cta{margin-left:0}
  /* Il pulsante Registrati resta blu con testo bianco anche nel menu mobile:
     senza questo override i due !important sopra lo appiattivano su ink su blu (2.3:1). */
  .pub-menu .cta a{width:100%;justify-content:center;color:#fff}
  .pub-menu .cta a:hover{background:var(--blue-deep);color:#fff}
}
@media (max-width:520px){.pub-logo img{height:40px}.pub-nav{gap:12px;height:64px}.pub-menu a{padding:10px 8px}.pub-menu .cta{margin-left:2px}.pub-menu .cta a{padding:11px 12px}}
@media (max-width:360px){.pub-logo img{height:34px}}

/* ---------- pubblico: footer (le regole base di .site-footer sono in components.css) ---------- */
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.foot-grid{grid-template-columns:1fr}}
.site-footer a{text-decoration:none}
.foot-brand{display:inline-block;line-height:0}
.foot-brand img{height:64px;width:auto}
.site-footer .who-we{margin:18px 0 10px;max-width:36ch;color:#E6EDF2}
.site-footer .mail{font-family:var(--font-mono);font-size:.84rem;color:#C9D4DD;user-select:all}
.site-footer .foot-soon{color:#A9B7C3}
.site-footer .partner{color:#C9D4DD}
.site-footer .legal-row a{color:#C9D4DD}

/* Stampa: il guscio sparisce e resta il contenuto. Sta qui (e non in pages.css)
   perché shell.css si carica dopo e altrimenti sovrascriverebbe queste regole.
   Le regole di pagina (es. la tessera) restano in pages.css. */
@media print{
  .app-top,.side,.app-foot,.skip{display:none!important}
  body.app .shell{display:block;min-height:0}
  .app-main{padding:0}
  html,body,body.app,body.app .shell,.app-main{background:var(--white)}
}