/* schedina.ai — il sistema.
 *
 * Casa «Mercatorum» (core/70-design.md §8): due strati, vetro solo su quello
 * funzionale, molle in linear(), testi corti, bersagli da 48 px. Stessa casa,
 * altra tinta e altra voce — se fosse anche la stessa tipografia sarebbe la
 * stessa app.
 *
 * IL PIANO, scritto prima del codice.
 *
 * Colore — ARDESIA, GESSO E AMBRA. Il neutro non è grigio puro: dentro ha una
 *   punta del blu-verde del feltro. L'ambra è quello che si muove (una quota
 *   presa, una schedina aperta); il verde ardesia quello che è andato bene; il
 *   mattone quello che è andato male; l'indaco i numeri del mercato, che non
 *   sono un giudizio ma un dato.
 * Carattere — **Familjen Grotesk** nei titoli (un grotesque un po' storto, che
 *   in corpo grande non sembra un pannello di controllo), **Instrument Sans**
 *   nell'interfaccia, **IBM Plex Mono** su quote, euro e percentuali: un
 *   listino si legge in colonna.
 * Impianto — tre schermate e una barra bassa che galleggia. Il peso visivo di
 *   ogni schermata sta sulla sua prima carta; l'azione primaria è una sola.
 * Asset — illustrazioni-schedina.svg: lavagna (la settimana), curva (lo storico),
 *   bilancia (il metodo), biglietto (le carte vuote).
 */

/* ── i gettoni ─────────────────────────────────────────────────────────── */
:root{
  --ground:#eceae4;
  --surface:#fbfaf7;
  --sunk:#e0ddd5;
  --line:#d3d0c7;
  --line-2:#adaa9f;
  --ink:#14171b;          /* 15,8:1 su surface */
  --ink-2:#3d434a;        /*  9,2:1 */
  --ink-3:#5f666e;        /*  5,9:1 */
  --ink-4:#9a9e9f;        /* SOLO segni e filetti, mai testo */

  --pino:#1a6350;         /* è andata bene */
  --pino-velo:#d8e8e2;
  --rame:#8b5104;         /* si muove, si gioca, è vivo */
  --rame-velo:#f2e4cd;
  --rosso:#a03426;        /* è andata male */
  --rosso-velo:#f4dedb;
  --acqua:#3a5687;        /* i numeri del mercato */
  --acqua-velo:#dde3ee;
  --oro:#7a6212;
  --oro-velo:#efe9d3;
  --su-accento:#ffffff;
  --vetro:color-mix(in srgb,var(--surface) 88%,transparent);

  --colonna:46rem;

  --r-1:10px; --r-2:14px; --r-3:24px;
  --om-1:0 1px 2px rgba(20,23,27,.05);
  --om-2:0 1px 2px rgba(20,23,27,.04),0 12px 34px rgba(20,23,27,.08);
  --om-3:0 -1px 3px rgba(20,23,27,.05),0 -18px 52px rgba(20,23,27,.14);

  --ios:cubic-bezier(.32,.72,0,1);
  --molla:linear(0,.0026,.0106 2.4%,.0433 4.8%,.1809 9.9%,.2504,.3178,.3813 16%,.4425,.4996,.5527 22.3%,.6019,.6467,.6875 28.6%,.7239,.7565 33%,.8149 37.7%,.8607 42.6%,.8961 47.9%,.9231 53.9%,.9433 60.7%,.9582 68.9%,.9692 80.2%,.9752 89.2%,1);
  --molla-viva:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1);

  /* Sei durate, e nessuna animazione ne scrive una settima. */
  --tocco:120ms; --stato:220ms; --schermo:340ms; --foglio:420ms; --respiro:1.4s;

  --titolo:'Familjen Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --sans:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --barra:calc(4.25rem + max(.75rem, env(safe-area-inset-bottom)));
  --sotto-barra:calc(var(--barra) + 1.5rem);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#101215;
    --surface:#191c20;
    --sunk:#23272c;
    --line:#31363c;
    --line-2:#4b5158;
    --ink:#f2f1ed;
    --ink-2:#c3c6ca;
    --ink-3:#969ba1;
    --ink-4:#666c73;
    --pino:#5cc0a2;
    --pino-velo:#183129;
    --rame:#e0a049;
    --rame-velo:#332512;
    --rosso:#e8776a;
    --rosso-velo:#341c19;
    --acqua:#8fa9d6;
    --acqua-velo:#1c2433;
    --oro:#cdb45c;
    --oro-velo:#2a2612;
    --su-accento:#12151a;
    --om-1:0 1px 2px rgba(0,0,0,.4);
    --om-2:0 1px 2px rgba(0,0,0,.3),0 12px 34px rgba(0,0,0,.45);
    --om-3:0 -1px 3px rgba(0,0,0,.3),0 -18px 52px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --ground:#101215; --surface:#191c20; --sunk:#23272c; --line:#31363c; --line-2:#4b5158;
  --ink:#f2f1ed; --ink-2:#c3c6ca; --ink-3:#969ba1; --ink-4:#666c73;
  --pino:#5cc0a2; --pino-velo:#183129; --rame:#e0a049; --rame-velo:#332512;
  --rosso:#e8776a; --rosso-velo:#341c19; --acqua:#8fa9d6; --acqua-velo:#1c2433;
  --oro:#cdb45c; --oro-velo:#2a2612; --su-accento:#12151a;
  --om-1:0 1px 2px rgba(0,0,0,.4);
  --om-2:0 1px 2px rgba(0,0,0,.3),0 12px 34px rgba(0,0,0,.45);
  --om-3:0 -1px 3px rgba(0,0,0,.3),0 -18px 52px rgba(0,0,0,.5);
}

/* ── base ───────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100dvh; background:var(--ground); color:var(--ink);
  font:400 17px/1.55 var(--sans);
  font-feature-settings:"ss01" 1;
  -webkit-font-smoothing:antialiased;
  padding-bottom:var(--sotto-barra);
}
h1,h2,h3{font-family:var(--titolo); font-weight:600; letter-spacing:-.02em; margin:0; text-wrap:balance}
h1{font-size:clamp(1.9rem,7vw,2.6rem); line-height:1.06}
h2{font-size:1.35rem; line-height:1.15}
h3{font-size:1.05rem; line-height:1.25}
p{margin:0}
a{color:inherit}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
[hidden]{display:none !important}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.03em}

.involucro{max-width:var(--colonna); margin:0 auto; padding:0 1rem}

/* ── testata ────────────────────────────────────────────────────────────── */
.testa{
  position:sticky; top:0; z-index:20;
  background:var(--vetro); backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--line);
}
.testa .involucro{display:flex; align-items:center; gap:.75rem; min-height:3.25rem}
.marchio{font-family:var(--titolo); font-weight:700; font-size:1.05rem; letter-spacing:.01em}
.marchio span{color:var(--rame)}
.testa .sezione{font-size:.9rem; color:var(--ink-3); margin-left:auto}

/* ── apertura ───────────────────────────────────────────────────────────── */
.apertura{padding:1.75rem 0 .5rem}
.apertura .occhiello{
  font-size:.85rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--rame); margin-bottom:.5rem;
}
.apertura .sommario{margin-top:.65rem; color:var(--ink-2); font-size:1.02rem}
.fig{width:100%; height:auto; display:block}
.fig-apertura{max-width:15rem; margin:.25rem 0 -.5rem auto}

/* ── carte ──────────────────────────────────────────────────────────────── */
.carta{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-3);
  box-shadow:var(--om-1); padding:1.15rem; margin:0 0 1rem;
}
.carta.grossa{padding:1.25rem 1.15rem 1.35rem}

/* Il livello si riconosce dal titolo e dal numero grande, non da una barretta
   colorata sul fianco: quella è uno degli stampi per cui una pagina si vede
   subito che è stata generata (core/70-design.md §8, «la regola zero»). */
.schedina[data-livello="prudente"]{--tinta:var(--pino); --velo:var(--pino-velo)}
.schedina[data-livello="equilibrata"]{--tinta:var(--rame); --velo:var(--rame-velo)}
.schedina[data-livello="rischio"]{--tinta:var(--rosso); --velo:var(--rosso-velo)}

.schedina .cima{display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap}
.schedina .cima h2{color:var(--tinta)}
.schedina .frase{color:var(--ink-3); font-size:.95rem; margin-top:.15rem}

.conto{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  margin:.9rem 0 .2rem; padding:.7rem .85rem;
  background:var(--sunk); border-radius:var(--r-2);
}
.conto .voce{display:flex; flex-direction:column; gap:.1rem}
.conto .et{font-size:.78rem; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase}
.conto .val{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:1.25rem; font-weight:600; letter-spacing:-.04em}
.conto .freccia{color:var(--ink-4); font-size:1.1rem; margin:0 .1rem}
.conto .val.grande{font-size:1.55rem; color:var(--tinta)}

.eventi{list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-direction:column; gap:.55rem}
.evento{
  display:grid; grid-template-columns:1fr auto; gap:.3rem .75rem;
  padding:.7rem 0; border-top:1px solid var(--line);
}
.evento:first-child{border-top:0; padding-top:.2rem}
.evento .sfida{font-weight:600; font-size:1.02rem; line-height:1.25}
.evento .dove{font-size:.86rem; color:var(--ink-3); margin-top:.1rem}
.evento .scelta{
  grid-column:1; font-size:.95rem; color:var(--ink-2); margin-top:.35rem;
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
}
.evento .quota{
  grid-row:1/3; grid-column:2; align-self:start;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:1.3rem; font-weight:600; letter-spacing:-.04em;
  padding:.2rem .5rem; border-radius:var(--r-1); background:var(--acqua-velo); color:var(--acqua);
}
.evento .banco{grid-column:1/-1; font-size:.86rem; color:var(--ink-3); margin-top:.15rem}
.evento[data-esito="vinto"] .quota{background:var(--pino-velo); color:var(--pino)}
.evento[data-esito="perso"] .quota{background:var(--rosso-velo); color:var(--rosso)}

.gettone{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.8rem; font-weight:600; letter-spacing:.02em;
  padding:.16rem .5rem; border-radius:999px; background:var(--sunk); color:var(--ink-2);
  white-space:nowrap;
}
.gettone.buono{background:var(--pino-velo); color:var(--pino)}
.gettone.caldo{background:var(--rame-velo); color:var(--rame)}
.gettone.brutto{background:var(--rosso-velo); color:var(--rosso)}
.gettone .num{font-size:.8rem}

.nota{
  margin-top:.9rem; padding-top:.75rem; border-top:1px solid var(--line);
  font-size:.92rem; color:var(--ink-3);
}
.nota strong{color:var(--ink-2); font-weight:600}

.avviso{
  border:1px solid var(--rame); background:var(--rame-velo); color:var(--ink);
  border-radius:var(--r-2); padding:.85rem 1rem; margin:0 0 1rem; font-size:.96rem;
}
.avviso strong{font-weight:700}

/* ── cifre ──────────────────────────────────────────────────────────────── */
.chiave{font-size:.85rem;color:var(--ink-3);display:flex;gap:.9rem;flex-wrap:wrap;padding:.2rem 0 .5rem}
.chiave i{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;margin-right:.35rem;vertical-align:-1px}
.cifre{display:grid; grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr)); gap:.6rem; margin:0 0 1rem}
.cifra{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2); padding:.8rem .85rem}
.cifra .val{display:block; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:1.5rem; font-weight:600; letter-spacing:-.04em; line-height:1.1}
.cifra .et{display:block; font-size:.82rem; color:var(--ink-3); margin-top:.25rem}
.cifra.su .val{color:var(--pino)}
.cifra.giu .val{color:var(--rosso)}

/* ── filtri ─────────────────────────────────────────────────────────────── */
.filtri{display:flex; gap:.5rem; overflow-x:auto; padding:.15rem 0 .9rem; scrollbar-width:none}
.filtri::-webkit-scrollbar{display:none}
.filtri button{
  min-height:44px; padding:.4rem .9rem; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  font-size:.95rem; font-weight:600; white-space:nowrap;
  transition:transform var(--tocco) var(--ios), background var(--tocco) linear;
}
.filtri button[aria-pressed="true"]{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.filtri button:active{transform:scale(.96)}

/* ── grafico ────────────────────────────────────────────────────────────── */
.grafico{width:100%; height:auto; display:block; margin:.4rem 0 .2rem; overflow:visible}
.grafico .assi{stroke:var(--line); stroke-width:1}
.grafico .zero{stroke:var(--line-2); stroke-width:1; stroke-dasharray:2 6}
.grafico .et{font-family:var(--mono); font-size:9px; fill:var(--ink-3)}
.legenda{display:flex; gap:1rem; flex-wrap:wrap; font-size:.88rem; color:var(--ink-3); margin-top:.35rem}
.legenda i{display:inline-block; width:.85rem; height:.22rem; border-radius:2px; margin-right:.35rem; vertical-align:middle}

/* ── settimane passate ──────────────────────────────────────────────────── */
.riga-sett{
  display:grid; grid-template-columns:auto 1fr auto; gap:.2rem .8rem; align-items:center;
  width:100%; text-align:left; padding:.75rem .25rem; border-top:1px solid var(--line);
  min-height:48px; transition:transform var(--tocco) var(--ios);
}
.riga-sett:active{transform:scale(.98)}
.riga-sett .data{font-family:var(--mono); font-size:.92rem; color:var(--ink-3)}
.riga-sett .palle{display:flex; gap:.3rem}
.riga-sett .palla{width:.7rem; height:.7rem; border-radius:50%; background:var(--tinta); opacity:.22}
.riga-sett .palla.si{opacity:1}
.riga-sett .saldo{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600}
.riga-sett .saldo.su{color:var(--pino)} .riga-sett .saldo.giu{color:var(--rosso)}

/* ── prosa del metodo ───────────────────────────────────────────────────── */
.blocco{margin:0 0 1.5rem}
.blocco h2{margin-bottom:.5rem}
.blocco p{color:var(--ink-2); margin-bottom:.7rem}
.tabella{width:100%; border-collapse:collapse; font-size:.95rem; margin:.5rem 0 .3rem}
.tabella th,.tabella td{text-align:left; padding:.5rem .5rem .5rem 0; border-bottom:1px solid var(--line)}
.tabella th{font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); font-weight:600}
.tabella td.n{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; padding-right:0}
.scorre{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ── piede ──────────────────────────────────────────────────────────────── */
.piede{color:var(--ink-3); font-size:.88rem; padding:1.5rem 0 .5rem; border-top:1px solid var(--line); margin-top:1.5rem}
.piede a{color:var(--ink-2)}

/* ── barra bassa, che galleggia ─────────────────────────────────────────── */
.barra{
  position:fixed; left:max(.75rem,env(safe-area-inset-left)); right:max(.75rem,env(safe-area-inset-right));
  bottom:max(.75rem,env(safe-area-inset-bottom)); z-index:40;
  display:flex; gap:.25rem; padding:.35rem;
  background:var(--vetro); backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--line); border-radius:var(--r-3); box-shadow:var(--om-3);
  max-width:calc(var(--colonna) - 2rem); margin:0 auto;
}
.barra a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem;
  min-height:52px; border-radius:var(--r-2); text-decoration:none; color:var(--ink-3);
  font-size:.8rem; font-weight:600;
  transition:transform var(--tocco) var(--ios), background var(--tocco) linear, color var(--tocco) linear;
}
.barra a:active{transform:scale(.96)}
.barra a[aria-current="page"]{background:var(--sunk); color:var(--ink)}
.barra svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}

/* ── stati ──────────────────────────────────────────────────────────────── */
.scheletro{background:var(--sunk); border-radius:var(--r-2); animation:respira var(--respiro) ease-in-out infinite}
.scheletro.alta{height:9rem; margin-bottom:1rem}
@keyframes respira{0%,100%{opacity:.55}50%{opacity:.95}}

.vuoto{text-align:center; padding:2rem 1rem; color:var(--ink-3)}
.vuoto .fig{max-width:11rem; margin:0 auto 1rem}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}