/* ZOKKU site: the account page (ACC, 23 Oct 2026; W10: our own sign-in, sign-up and forgot-password forms).
   Only for account.html; site.css is not touched. Phone first: the intro, then the card with the form, in the first
   view; from 900 px the two sit side by side. */
.acc-testa{padding-block:clamp(28px,5vw,88px) clamp(40px,5vw,72px)}
.acc-griglia-testa{display:grid;gap:28px;align-items:start}
.acc-intro h1{font-size:clamp(44px,7vw,112px);letter-spacing:-.035em;line-height:.98}
.acc-intro p{margin-top:16px;font-size:var(--s-lead);line-height:1.35;max-width:30ch;color:var(--fg-2)}
.acc-intro p.acc-nota,.acc-altro p.acc-nota{margin-top:18px;font-size:var(--s-small);line-height:1.5;max-width:52ch;color:var(--fg-2)}
@media (max-width:600px){.acc-intro p:not(.acc-nota){font-size:19px}.acc-intro .acc-nota{display:none}}

/* the card */
.acc-carta{background:var(--tile);border-radius:16px;padding:clamp(18px,3vw,32px);box-shadow:inset 0 0 0 1px var(--tile-2)}
.acc-carta[hidden]{display:none}
.acc-carta > p{line-height:1.5}
.acc-attesa{color:var(--fg-2)}

/* Sign in | Create an account */
.acc-schede{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:22px;border-radius:12px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--tile-2)}
.acc-schede button{min-height:44px;padding:0 10px;border-radius:9px;font-size:16px;font-weight:500;color:var(--fg-2);transition:background-color 200ms var(--ease-out),color 200ms ease,transform var(--t-press) var(--ease-out)}
.acc-schede button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.acc-schede button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.acc-schede button[aria-pressed="false"]:hover{color:var(--fg)}}

/* fields */
.acc-modulo{display:grid;gap:16px}
.acc-modulo[hidden]{display:none}
.campo{display:grid;gap:6px}
.campo label{font-size:var(--s-small);font-weight:500}
.campo input{width:100%;min-height:52px;padding:0 14px;border-radius:10px;border:1.5px solid color-mix(in srgb,var(--fg) 22%,transparent);background:var(--bg);color:var(--fg);font:inherit;font-size:17px;caret-color:var(--fg);transition:border-color 150ms ease,box-shadow 150ms ease}
.campo input:focus{outline:none;border-color:var(--fg);box-shadow:0 0 0 3px color-mix(in srgb,var(--fg) 16%,transparent)}
.campo input:-webkit-autofill{-webkit-text-fill-color:var(--fg);box-shadow:0 0 0 40px var(--bg) inset;caret-color:var(--fg)}
.campo-aiuto{font-size:14px;color:var(--fg-2)}
.acc-spiega{color:var(--fg-2);line-height:1.5;max-width:44ch}
.acc-invia{width:100%;margin-top:4px}
.acc-invia:disabled{opacity:.6;cursor:progress}
.acc-modulo .lnk{justify-self:start;min-height:44px}
.acc-piccolo{font-size:14px;line-height:1.5;color:var(--fg-2)}
.acc-errore{display:flex;gap:10px;align-items:baseline;padding:12px 14px;border-radius:10px;font-size:15px;line-height:1.45;color:#8C1D18;background:#F9DEDC}
.acc-errore::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor;transform:translateY(-1px)}
.acc-errore a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.acc-errore[hidden]{display:none}
.acc-esito{line-height:1.5}
.acc-esito:empty{display:none}
@media (prefers-color-scheme:dark){.acc-errore{color:#FFDAD6;background:#5C1A15}}

/* signed in */
.acc-ciao{font-size:var(--s-lead);font-weight:500;line-height:1.25}
.acc-email{margin-top:4px;color:var(--fg-2);overflow-wrap:anywhere}
.acc-dentro .azioni{margin-top:20px;gap:8px 20px}

/* the library */
.acc-libreria{padding-block:0 clamp(40px,5vw,72px)}
.acc-libreria h2,.acc-altro h2{font-size:var(--s-head)}
.acc-sotto{margin-top:14px;max-width:60ch;color:var(--fg-2)}
.acc-griglia{margin-top:28px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--gap)}
.acc-voce{display:grid;grid-template-rows:auto auto auto 1fr;gap:8px;padding:20px;border-radius:var(--r-m);background:var(--tile)}
.acc-logo{display:block;height:28px}
.acc-logo svg{height:100%;width:auto}
.acc-ruolo{font-size:var(--s-small);color:var(--fg-2)}
.acc-stato{justify-self:start;padding:4px 10px;border-radius:var(--r-s);font-size:var(--s-xs);font-weight:500;background:var(--tile-2)}
.acc-voce[data-stato="owned"] .acc-stato{background:var(--house);color:var(--house-fg)}
.acc-voce[data-stato="trial"] .acc-stato{background:#F3E2B3;color:#3B2E07}
.acc-voce .lnk{align-self:end;min-height:44px}
.acc-scarica{margin-top:40px}
.acc-scarica h3{font-size:var(--s-lead)}
.acc-file{margin-top:14px;display:grid;gap:8px;max-width:720px}
.acc-file-voce{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;min-height:56px;padding:14px 18px;border-radius:var(--r-m);background:var(--tile);color:inherit;text-decoration:none;transition:background-color var(--t-hover) ease,transform var(--t-press) var(--ease-out)}
.acc-file-voce span{font-size:var(--s-small);color:var(--fg-2)}
.acc-file-voce:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){.acc-file-voce:hover{background:var(--tile-2)}}

/* the rest */
.acc-altro{padding-block:clamp(40px,5vw,72px);border-top:1px solid color-mix(in srgb,var(--fg) 12%,transparent)}
.acc-colonne{margin-top:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--gap) calc(var(--gap) * 2)}
.acc-colonne h3{font-size:var(--s-lead)}
.acc-colonne p{margin-top:10px;max-width:52ch;color:var(--fg-2)}
.acc-colonne .azioni{margin-top:8px}

@media (min-width:900px){
  .acc-griglia-testa{grid-template-columns:minmax(0,1fr) minmax(0,460px);column-gap:clamp(40px,6vw,120px)}
  .acc-intro{padding-top:8px}
}