/* Layout: una colonna di modulo; le sezioni numerate seguono l'ordine della piattaforma ufficiale. */
:root {
  --bg: #f6f7f9; --surface: #ffffff; --ink: #14202e; --muted: #536173; --line: #d9dfe7;
  --accent: #0b6e8a; --accent-ink: #ffffff; --sun: #f2a900; --sun-soft: #fff4d6;
  --ok: #1d7a46; --ok-soft: #e6f4ec; --warn: #b3261e; --warn-soft: #fdecea; --amber: #8a5a00; --amber-soft: #fff1d6;
  --f-display: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --night: #08131f; --night-ink: #eef4fa; --night-muted: #a9bccd; --night-line: rgba(169, 188, 205, 0.22);
  --sun-hot: #ffc23d; --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1520; --surface: #152131; --ink: #e8eef5; --muted: #9fb0c3; --line: #263547;
    --accent: #4fb8d6; --accent-ink: #06202a; --sun: #ffc23d; --sun-soft: #2e2610;
    --ok: #5fcf8e; --ok-soft: #12291c; --warn: #ff8a80; --warn-soft: #3a1c1a; --amber: #ffc66b; --amber-soft: #2e230f;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.55 var(--f-body); padding-block: 0 4rem; }
.wrap {
  max-width: 46rem; margin: 0 auto; box-sizing: content-box;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
h1, h2, h3 { font-family: var(--f-display); line-height: 1.15; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 6.5vw, 2.7rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 1.45rem; font-weight: 800; display: flex; align-items: center; gap: 0.6rem; }
h3 { font-size: 1.1rem; font-weight: 600; margin-top: 1rem; }
p { margin: 0; }
.eyebrow { font: 500 0.75rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lead { color: var(--muted); font-size: 1.1rem; }
header.top { display: grid; gap: 1rem; padding-block: 2rem 1rem; }
.privacy { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 1rem; font-size: 0.95rem; }
.access { display: grid; gap: 0.3rem; max-width: 20rem; }
.bar, .actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.actions { margin-top: 1.5rem; }
section { display: grid; gap: 0.9rem; padding-block: 1.8rem 0; }
section > h2 { padding-top: 1.2rem; border-top: 1px solid var(--line); }
.n { width: 2rem; height: 2rem; border-radius: 50%; display: inline-grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 1rem; flex: none; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.grid2 .wide { grid-column: 1 / -1; }
@media (max-width: 34rem) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
.f { display: grid; gap: 0.3rem; min-width: 0; }
label { font-weight: 700; font-size: 0.95rem; }
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.55rem 0.7rem; width: 100%; min-width: 0;
}
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 3px solid var(--sun); outline-offset: 1px; }
small, .hint, .note { color: var(--muted); font-size: 0.9rem; }
.counter { font: 500 0.75rem/1 var(--f-mono); color: var(--muted); justify-self: end; }
.counter.over { color: var(--warn); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1rem; display: grid; gap: 0.7rem; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.card-head b { font-family: var(--f-display); }
.list { display: grid; gap: 0.75rem; }
.inline { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.inline input { width: auto; }
.area h3, .phase h3 { margin: 0.6rem 0 0.4rem; }
.btn { font: 700 0.95rem/1 var(--f-body); padding: 0.75rem 1rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.ghost { background: transparent; }
.btn.small { padding: 0.45rem 0.7rem; font-size: 0.85rem; }
.btn[disabled] { opacity: 0.6; cursor: wait; }
.grant { font-family: var(--f-mono); font-size: 0.9rem; color: var(--muted); }
.status { min-height: 1.5rem; font-weight: 700; margin-top: 0.8rem; }
.status.err { color: var(--warn); }
.score { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.score div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem 0.8rem; display: grid; gap: 0.15rem; }
.score b { font: 800 1.3rem/1.1 var(--f-display); font-variant-numeric: tabular-nums; }
.score span { font-size: 0.85rem; color: var(--muted); }
@media (max-width: 34rem) { .score { grid-template-columns: minmax(0, 1fr); } }
.total { margin-top: 0.6rem; padding: 0.8rem 1rem; border-radius: 12px; font-weight: 700; }
.total.yes { background: var(--ok-soft); color: var(--ok); }
.total.no { background: var(--warn-soft); color: var(--warn); }
.summary { font-size: 1.05rem; }
.finding { padding: 0.55rem 0.8rem; border-radius: 0 8px 8px 0; border-left: 4px solid; font-size: 0.95rem; margin-bottom: 0.4rem; }
.finding.blocco { border-color: var(--warn); background: var(--warn-soft); }
.finding.attenzione { border-color: var(--sun); background: var(--amber-soft); }
.finding b { font-weight: 700; }
.fix .old { color: var(--muted); text-decoration: line-through; font-size: 0.95rem; }
.fix .new { font-size: 1rem; }
.fix .why { font-size: 0.9rem; color: var(--muted); }
.fix .path { font: 500 0.75rem/1 var(--f-mono); color: var(--accent); }
.tips ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); }

/* ---------- v2: nav, AI notice, email sign-in, history ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--night); }
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(8, 19, 31, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--night-line); }
.nav-in {
  max-width: 46rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.7rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--night-ink); text-decoration: none; font: 800 1.05rem/1 var(--f-display); }
.brand-sub { font-weight: 500; color: var(--night-muted); }
.brand-mark { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3c4, var(--sun-hot) 55%, #e08a00); }
.nav-link { color: var(--night-ink); text-decoration: none; font-weight: 700; font-size: 0.9rem; padding: 0.5rem 0.8rem; border: 1px solid var(--night-line); border-radius: 99px; }
.brand:focus-visible, .nav-link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 30rem) { .brand-sub { display: none; } }
a { color: var(--accent); text-underline-offset: 0.15em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.auth { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; gap: 0.7rem; }
.auth > h2 + * { margin-top: 0; }
.auth-title { font: 800 1.15rem/1.2 var(--f-display); }
.inline-form { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.inline-form input { flex: 1 1 14rem; width: auto; }
#otp { font: 700 1.3rem/1 var(--f-mono); letter-spacing: 0.3em; max-width: 12rem; flex: 0 1 12rem; }
.account-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem; }
.btn { transition: transform 160ms var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn.danger { color: var(--warn); }
.btn.danger-solid { background: var(--warn); border-color: var(--warn); color: #fff; }
.confirm { border: 1px solid var(--warn); background: var(--warn-soft); border-radius: 10px; padding: 0.8rem 0.9rem; display: grid; gap: 0.6rem; }
.history { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.history li { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; }
.history li > div { display: grid; gap: 0.1rem; min-width: 0; }
.h-meta { color: var(--muted); font-size: 0.85rem; }
#authMsg { margin-top: 0; }
.prose ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.45rem; }
.prose section { gap: 0.7rem; }
mark { background: var(--sun-soft); color: var(--ink); border: 1px dashed var(--sun); padding: 0 0.25rem; border-radius: 4px; }
code { font-family: var(--f-mono); font-size: 0.9em; }
.soon { background: var(--sun-soft); border: 1px solid var(--sun); border-radius: 10px; padding: 0.7rem 0.9rem; font-size: 0.95rem; margin-bottom: 0.8rem; }

/* "Come funziona": the four steps of the email flow */
.how { background: var(--sun-soft); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; display: grid; gap: 0.6rem; }
.how h2 { font-size: 1.15rem; border: 0; padding: 0; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.how-steps li { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: 0.7rem; align-items: start; }
.how-n { width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; font: 800 0.95rem/1 var(--f-display); background: var(--sun); color: #1c1300; }
.received { background: var(--ok-soft); color: var(--ink); border: 1px solid var(--ok); border-radius: 14px; padding: 1rem 1.1rem; font-weight: 600; }

/* User menu (top right of the nav): account actions in a dropdown */
.nav-right { display: flex; align-items: center; gap: 0.6rem; }
.user-menu { position: relative; }
.user-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.5rem 0.25rem 0.25rem; border: 1px solid var(--night-line); border-radius: 99px; background: transparent; color: var(--night-ink); cursor: pointer; transition: transform 160ms var(--ease-out); }
.user-btn:active { transform: scale(0.97); }
.user-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.user-avatar { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font: 800 0.95rem/1 var(--f-display); background: var(--sun-hot); color: #1c1300; }
.user-caret { width: 0.8rem; height: 0.8rem; }
.user-btn[aria-expanded="true"] .user-caret { transform: rotate(180deg); }
.user-pop { position: absolute; right: 0; top: calc(100% + 0.5rem); width: min(19rem, calc(100vw - 32px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); padding: 0.5rem; display: grid; gap: 0.15rem; transform-origin: top right; animation: user-pop-in 160ms var(--ease-out); }
@keyframes user-pop-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .user-pop { animation: none; } .user-btn { transition: none; } }
.user-who { margin: 0; padding: 0.5rem 0.6rem 0.6rem; font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; }
.user-who b { color: var(--ink); font-size: 0.95rem; }
.user-item { text-align: left; background: none; border: 0; border-radius: 9px; padding: 0.55rem 0.6rem; font: 600 0.95rem/1.2 var(--f-body); color: var(--ink); cursor: pointer; }
.user-item:hover, .user-item:focus-visible { background: var(--bg); outline: none; }
.user-item.danger { color: var(--warn); }
.user-sep { border: 0; border-top: 1px solid var(--line); margin: 0.3rem 0; width: 100%; }
.user-confirm { background: var(--warn-soft); border: 1px solid var(--warn); border-radius: 10px; padding: 0.6rem; display: grid; gap: 0.5rem; font-size: 0.9rem; }
.user-confirm p { margin: 0; }
.user-msg { margin: 0; padding: 0 0.6rem; font-size: 0.85rem; color: var(--ok); }
.user-msg:empty { display: none; }
.user-msg.error { color: var(--warn); }

/* Admin page */
.admin { padding-block: 1.5rem 0; display: grid; gap: 1.5rem; }
.admin h1 { font-size: 1.6rem; }
.admin-login { display: grid; gap: 0.5rem; max-width: 22rem; }
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.admin-table th, .admin-table td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin-table td:nth-child(3) { white-space: normal; min-width: 12rem; }
.admin-table tbody tr { cursor: pointer; }
.admin-table tbody tr:hover, .admin-table tbody tr:focus-visible, .admin-table tbody tr.on { background: var(--sun-soft); outline: none; }
.badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 99px; font-size: 0.8rem; font-weight: 700; background: var(--bg); border: 1px solid var(--line); }
.st-in_attesa { background: var(--amber-soft); color: var(--amber); border-color: var(--amber); }
.st-in_lavorazione { background: var(--sun-soft); color: var(--amber); }
.st-bozza { background: var(--sun-soft); color: var(--ink); border-color: var(--sun); }
.st-pronta { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.st-errore { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.admin-meta { color: var(--muted); }
.admin-list { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.lv-blocco { color: var(--warn); font-weight: 600; }
.admin-fix { border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.9rem; background: var(--surface); display: grid; gap: 0.3rem; }
.admin-fix p { margin: 0; }
.admin-logout { background: transparent; cursor: pointer; font: inherit; font-weight: 700; font-size: 0.9rem; }
.status.error, #detailMsg.error { color: var(--warn); }
.wrap.admin { max-width: 72rem; }
.admin-table td:nth-child(4) { white-space: normal; overflow-wrap: anywhere; min-width: 10rem; }
@media (max-width: 640px) {
  .admin-table th:nth-child(2), .admin-table td:nth-child(2),
  .admin-table th:nth-child(4), .admin-table td:nth-child(4) { display: none; }
  .admin-table td:nth-child(3) { min-width: 0; }
}
.admin-page .nav-in { max-width: 72rem; }
.admin-section { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 0.5rem 0.9rem; margin-bottom: 0.5rem; }
.admin-section summary { cursor: pointer; font-weight: 700; text-transform: capitalize; }
.admin-fields { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 0.35rem 1rem; margin: 0.6rem 0 0.2rem; }
.admin-fields dt { color: var(--muted); }
.admin-fields dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .admin-fields { grid-template-columns: 1fr; } .admin-fields dd { margin-bottom: 0.4rem; } }
.admin-table .version { display: block; font-size: 0.78rem; color: var(--muted); }
.link-gate { display: grid; gap: 0.6rem; justify-items: start; }