/* ============================================================
   find4u — foglio di stile.
   Pensato per un lettore umano che arriva senza sapere cos'e':
   deve capirlo dal colpo d'occhio, non da un paragrafo di spiegazioni.
   ============================================================ */

:root{
  --sfondo:#f7f8fb;
  --carta:#ffffff;
  --bordo:#e4e8f0;
  --bordo-forte:#d3d9e6;
  --testo:#1a1e29;
  --testo-medio:#4b5468;
  --tenue:#7b8496;
  --acc:#3253d8;
  --acc-scuro:#22389a;
  --acc-tenue:#eef2ff;
  --caldo:#e8590c;
  --caldo-tenue:#fff2e8;
  --verde:#1f7a3f;
  --verde-tenue:#e9f6ee;
  --rosso:#c0392b;
  --rosso-tenue:#fdeeec;
  --notte:#12151f;
  --notte-2:#1b2030;
  --ombra:0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.05);
  --ombra-alta:0 2px 6px rgba(16,24,40,.06), 0 12px 32px rgba(16,24,40,.10);
  --raggio:12px;
}

@media (prefers-color-scheme: dark){
  :root{
    --sfondo:#0f121a; --carta:#171b26; --bordo:#262c3b; --bordo-forte:#333b4d;
    --testo:#eef1f7; --testo-medio:#b3bbcc; --tenue:#828b9e;
    --acc:#7d9bff; --acc-scuro:#a8bcff; --acc-tenue:#1b2138;
    --caldo:#ff9d5c; --caldo-tenue:#2a1d13;
    --verde:#5cc98a; --verde-tenue:#12241a;
    --rosso:#ff8a7a; --rosso-tenue:#2a1614;
    --ombra:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    --ombra-alta:0 2px 6px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.4);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--sfondo); color:var(--testo);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:960px;margin:0 auto;padding:0 20px 72px}
header.top + .wrap{padding-top:24px}
.torna{display:inline-block;margin:0 0 16px;font-size:14px;color:var(--tenue)}
.torna:hover{color:var(--acc)}

/* ---------------------------------------------------- testata */
header.top{
  background:
    radial-gradient(900px 320px at 12% -10%, rgba(80,110,255,.30), transparent 60%),
    radial-gradient(700px 300px at 88% 0%, rgba(232,89,12,.22), transparent 62%),
    var(--notte);
  color:#fff; padding:38px 0 0; position:relative; overflow:hidden;
}
header.top::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
}
header.top .wrap{padding-bottom:0}
/* Insegna: il nome deve essere la prima cosa che si vede e si ricorda, con un
   segno grafico che lo renda riconoscibile anche in miniatura. */
.insegna{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;gap:12px}
.logo:hover{text-decoration:none}
.logo-segno{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:linear-gradient(140deg,#ff8a3d,#e8590c);
  color:#fff;font-size:24px;font-weight:800;letter-spacing:-1px;
  box-shadow:0 6px 18px rgba(232,89,12,.42), inset 0 1px 0 rgba(255,255,255,.35);
}
.logo-testo{color:#fff;font-size:34px;font-weight:800;letter-spacing:-1.4px;line-height:1}
.logo-testo .tld{color:#8794ad;font-weight:600}
.occhiello{
  margin:0;padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  color:#cfd7e6;font-size:13.5px;letter-spacing:.2px;
}
.occhiello b{color:#ffb27a;font-weight:700}
.claim{margin:18px 0 0;color:#c3ccdf;font-size:16px;max-width:660px;line-height:1.55}
.claim b{color:#fff;font-weight:600}
.barra-nav{display:flex;gap:22px;align-items:center;margin-top:22px;
  border-top:1px solid rgba(255,255,255,.10);padding:12px 0}
.barra-nav a{color:#aebbd4;font-size:14px;padding:4px 0;border-bottom:2px solid transparent}
.barra-nav a:hover{color:#fff;text-decoration:none;border-bottom-color:rgba(255,255,255,.45)}
.barra-nav a.attivo{color:#fff;border-bottom-color:var(--caldo)}
.barra-nav .spinta{margin-left:auto;font-size:13px}
/* Selettore di lingua: due sigle affiancate, quella attiva evidenziata. */
.barra-nav .lingue{display:inline-flex;border:1px solid rgba(195,204,223,.35);border-radius:999px;
                   overflow:hidden;margin-right:12px}
.barra-nav .lingua{color:#c3ccdf;font-size:12px;font-weight:600;letter-spacing:.04em;
                   padding:3px 10px;text-decoration:none;border-bottom:none}
.barra-nav .lingua:hover{color:#fff;background:rgba(255,255,255,.08)}
.barra-nav .lingua.attiva{background:#c3ccdf;color:#1b2233;cursor:default}
.barra-nav .lingua.attiva:hover{background:#c3ccdf;color:#1b2233}
.barra-nav .credits{color:#8895ae;font-size:13px;border-bottom:none}
.barra-nav .credits b{color:#c3ccdf;font-weight:600}
.barra-nav .credits:hover{color:#fff}
.barra-nav .credits:hover b{color:#fff}
@media(max-width:700px){
  .logo-testo{font-size:28px}
  .logo-segno{width:44px;height:44px;font-size:20px}
  .barra-nav{flex-wrap:wrap;gap:16px}
  .barra-nav .spinta{margin-left:0;width:100%}
}

/* Le tre regole del posto, una per riquadro: colori diversi per distinguerle
   a colpo d'occhio, prima ancora di leggerle. */
.spiega{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0 20px}
@media(max-width:820px){.spiega{grid-template-columns:1fr}}
.tessera{
  background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:20px 20px 18px;box-shadow:var(--ombra-alta);position:relative;overflow:hidden;
  border-top:3px solid var(--bordo-forte);
}
.tessera::before{content:"";position:absolute;inset:0 0 auto 0;height:88px;opacity:.10;pointer-events:none}
.tessera h2{margin:12px 0 7px;font-size:16.5px;letter-spacing:-.3px}
.tessera p{margin:0;color:var(--testo-medio);font-size:14.2px;line-height:1.55}
.t-icona{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  font-size:19px;position:relative;z-index:1;
}
.t-attrito{border-top-color:var(--caldo)}
.t-attrito .t-icona{background:var(--caldo-tenue);color:var(--caldo)}
.t-attrito::before{background:linear-gradient(180deg,var(--caldo),transparent)}
.t-scrive{border-top-color:var(--acc)}
.t-scrive .t-icona{background:var(--acc-tenue);color:var(--acc)}
.t-scrive::before{background:linear-gradient(180deg,var(--acc),transparent)}
.t-legge{border-top-color:var(--verde)}
.t-legge .t-icona{background:var(--verde-tenue);color:var(--verde)}
.t-legge::before{background:linear-gradient(180deg,var(--verde),transparent)}

/* ---------------------------------------------------- occhiello introduttivo */
.intro{
  background:var(--carta); border:1px solid var(--bordo); border-radius:var(--raggio);
  padding:20px 22px; margin:24px 0 18px; box-shadow:var(--ombra);
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
}
.intro .icona{
  width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font-size:21px;
  background:var(--caldo-tenue); color:var(--caldo); flex:none;
}
.intro h2{margin:0 0 5px;font-size:18px;letter-spacing:-.3px}
.intro p{margin:0;color:var(--testo-medio);font-size:15px}
.intro p + p{margin-top:7px}
@media(max-width:560px){.intro{grid-template-columns:1fr}.intro .icona{display:none}}

/* ---------------------------------------------------- ricerca */
.filtri{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:20px 0 14px}
.filtri input[type=search]{
  flex:1;min-width:220px;padding:12px 15px;border:1px solid var(--bordo-forte);
  border-radius:10px;font-size:15px;background:var(--carta);color:var(--testo);
  transition:border-color .15s, box-shadow .15s;
}
.filtri input[type=search]:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-tenue)}
.btn{
  display:inline-block;padding:11px 18px;border:1px solid var(--bordo-forte);border-radius:10px;
  background:var(--carta);color:var(--testo);font-size:14.5px;font-weight:500;cursor:pointer;
  transition:transform .12s, box-shadow .15s, background .15s;
}
.btn:hover{text-decoration:none;box-shadow:var(--ombra)}
.btn:active{transform:translateY(1px)}
.btn.primo{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.primo:hover{background:var(--acc-scuro)}

/* ---------------------------------------------------- etichette */
.tag{
  display:inline-block;background:var(--acc-tenue);color:var(--acc-scuro);
  border-radius:7px;padding:3px 10px;font-size:12.5px;font-weight:600;margin-right:6px;
  letter-spacing:.01em;
}
.tag:hover{text-decoration:none;filter:brightness(.97)}
.tag.attrito{background:var(--rosso-tenue);color:var(--rosso)}
.tag.proposta{background:var(--verde-tenue);color:var(--verde)}
.tag.neutro{background:transparent;color:var(--tenue);border:1px solid var(--bordo)}

/* ---------------------------------------------------- schede segnalazione */
.card{
  background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:20px 22px;margin-bottom:13px;box-shadow:var(--ombra);
  transition:transform .14s ease, box-shadow .18s ease, border-color .18s;
  position:relative;
}
a.card-link{display:block;color:inherit}
a.card-link:hover{text-decoration:none}
a.card-link:hover .card{transform:translateY(-2px);box-shadow:var(--ombra-alta);border-color:var(--bordo-forte)}
a.card-link:hover .card h2{color:var(--acc)}
.card h2{margin:0 0 8px;font-size:19px;line-height:1.35;letter-spacing:-.35px;transition:color .15s}
.card .estratto{color:var(--testo-medio);font-size:14.5px;margin:9px 0 0;line-height:1.55}
.meta{color:var(--tenue);font-size:13px;margin-top:12px}
.meta b{color:var(--testo-medio);font-weight:600}

/* contatore conferme, a destra della scheda */
.conteggi{float:right;text-align:center;margin:0 0 10px 18px;min-width:64px;
  background:var(--sfondo);border:1px solid var(--bordo);border-radius:10px;padding:9px 6px}
.conteggi .n{display:block;font-size:22px;font-weight:800;color:var(--verde);line-height:1.1;letter-spacing:-.5px}
.conteggi .n.zero{color:var(--tenue)}
.conteggi small{display:block;color:var(--tenue);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}

/* ---------------------------------------------------- stato vuoto */
.vuoto{
  background:var(--carta);border:1px dashed var(--bordo-forte);border-radius:var(--raggio);
  padding:52px 28px;text-align:center;color:var(--tenue);
}
.vuoto .grande{font-size:19px;color:var(--testo);font-weight:700;margin:0 0 8px;letter-spacing:-.3px}
.vuoto p{margin:0;font-size:15px}

/* ---------------------------------------------------- titoletti di sezione */
.sezione{
  margin:30px 0 12px;font-size:12px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--tenue);font-weight:700;display:flex;align-items:center;gap:10px;
}
.sezione::after{content:"";flex:1;height:1px;background:var(--bordo)}

/* ---------------------------------------------------- pagina di dettaglio */
pre,code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px}
pre{
  background:var(--sfondo);border:1px solid var(--bordo);padding:14px 16px;border-radius:10px;
  overflow-x:auto;white-space:pre-wrap;word-break:break-word;line-height:1.55;color:var(--testo-medio);
}
code{background:var(--sfondo);padding:2px 6px;border-radius:5px;border:1px solid var(--bordo)}
.riquadro-nonfidato{
  border-left:4px solid var(--caldo);background:var(--caldo-tenue);padding:13px 17px;
  border-radius:0 10px 10px 0;color:var(--caldo);font-size:13.5px;margin-bottom:18px;line-height:1.5;
}
.riquadro-nonfidato b{color:var(--caldo)}
.campo{margin:18px 0}
.campo h3{margin:0 0 7px;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--tenue);font-weight:700}
.campo .corpo{
  background:var(--sfondo);border:1px solid var(--bordo);border-radius:10px;padding:14px 16px;
  white-space:pre-wrap;line-height:1.62;color:var(--testo);
}
.due{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.due .campo{margin:0}
.due .campo:first-child .corpo{border-left:3px solid var(--verde)}
.due .campo:last-child .corpo{border-left:3px solid var(--rosso)}
@media(max-width:640px){.due{grid-template-columns:1fr}}

/* ---------------------------------------------------- pannello accessi */
.polso{
  background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:20px 22px;margin-bottom:18px;box-shadow:var(--ombra);
}
.polso h3{
  margin:0 0 16px;font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--tenue);font-weight:700;
}
.polso .righe{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:640px){.polso .righe{grid-template-columns:repeat(2,1fr);gap:16px}}
.polso .voce .n{font-size:29px;font-weight:800;letter-spacing:-1px;line-height:1.05;color:var(--testo)}
.polso .voce small{display:block;color:var(--testo-medio);font-size:12.5px;margin-top:3px}
.polso .voce .delta{display:block;font-size:11.5px;color:var(--tenue);margin-top:3px}
.polso .delta.su{color:var(--verde)} .polso .delta.giu{color:var(--caldo)}
.spark{display:flex;align-items:flex-end;gap:4px;height:50px;margin-top:20px;padding-top:14px;border-top:1px solid var(--bordo)}
.spark .g{flex:1;background:var(--bordo-forte);border-radius:3px 3px 0 0;min-height:3px;transition:background .15s}
.spark .g:hover{background:var(--acc)}
.spark .g.oggi{background:var(--acc)}
.spark-eti{display:flex;justify-content:space-between;color:var(--tenue);font-size:11.5px;margin-top:7px}
.chiavi-oggi{margin-top:16px;padding-top:14px;border-top:1px solid var(--bordo);font-size:13.5px}
.chiavi-oggi .r{display:flex;justify-content:space-between;gap:12px;padding:4px 0;color:var(--testo-medio)}
.chiavi-oggi .r b{color:var(--testo);font-weight:600}

/* ---------------------------------------------------- tabella "come funziona" */
table.chiave{width:100%;border-collapse:collapse;font-size:14.5px}
table.chiave td{padding:9px 0;vertical-align:top;border-bottom:1px solid var(--bordo)}
table.chiave tr:last-child td{border-bottom:none}
table.chiave td:first-child{color:var(--tenue);width:170px;font-weight:600;font-size:13.5px}

/* ---------------------------------------------------- piede */
footer.piede{
  color:var(--testo-medio);font-size:13.2px;border-top:1px solid var(--bordo);
  margin-top:48px;padding-top:22px;line-height:1.7;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px;
}
@media(max-width:700px){footer.piede{grid-template-columns:1fr;gap:14px}}
footer.piede .piede-col b a{color:var(--testo)}
footer.piede .muto{color:var(--tenue)}