/* Casa Costantin — Palio 10 Comuni 2026
   Design layer condiviso. Token dal design system Costantin (theme-costantin).
   Zero dipendenze, zero build. */

/* ---------- Token ---------- */
:root{
  --font-sans:"Helvetica Neue","Helvetica","Arial","Inter",system-ui,-apple-system,sans-serif;

  --blue-deep:#00345E; --blue-mid:#005EB8; --blue:#0085CA; --yellow:#FFF100;
  --ink:#0A1626; --ink-2:#1F2A3B; --ink-3:#41506A; --ink-4:#6A7891; --ink-5:#9AA3B5;
  --line:#E2E6EE; --line-2:#EEF1F6;
  --surface:#FFFFFF; --surface-2:#F6F8FB; --surface-3:#EDF1F7;

  --success:#1F8A4C; --success-bg:#E6F4EC;
  --warning:#C48A00; --warning-bg:#FCF3DA;
  --danger:#B3261E;  --danger-bg:#FBE7E5;
  --info:#0085CA;    --info-bg:#E6F2FA;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --r-2:4px; --r-3:8px; --r-4:12px; --r-card:14px; --r-pill:999px;

  --shadow-1:0 1px 2px rgba(10,22,38,.06), 0 1px 1px rgba(10,22,38,.04);
  --shadow-2:0 4px 10px rgba(10,22,38,.06), 0 2px 4px rgba(10,22,38,.04);
  --shadow-3:0 12px 28px rgba(10,22,38,.10), 0 4px 10px rgba(10,22,38,.05);
  --shadow-4:0 24px 60px rgba(10,22,38,.18), 0 8px 18px rgba(10,22,38,.08);

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --d1:120ms; --d2:200ms; --d3:250ms; --d4:320ms;

  --w-wide:1120px; --w:960px; --w-narrow:680px;
  --tap:48px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface-2); color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{max-width:100%; height:auto; display:block}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--blue-mid); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--blue)}
h1,h2,h3,h4,p,figure{margin:0}
ul,ol{margin:0; padding:0}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:var(--r-2)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}

/* ---------- Tipografia ---------- */
.display{font-size:clamp(34px,8.4vw,64px); line-height:1.03; letter-spacing:-.025em; font-weight:700}
.h1{font-size:clamp(26px,5.4vw,38px); line-height:1.12; letter-spacing:-.02em; font-weight:700}
.h2{font-size:clamp(21px,4vw,27px); line-height:1.2; letter-spacing:-.015em; font-weight:600}
.h3{font-size:18px; line-height:1.3; letter-spacing:-.01em; font-weight:600}
.lede{font-size:clamp(17px,2.4vw,20px); line-height:1.5; color:var(--ink-3)}
.body{font-size:16px; color:var(--ink-2)}
.small{font-size:14px; color:var(--ink-3); line-height:1.5}
.tiny{font-size:12.5px; color:var(--ink-4); line-height:1.45}
.eyebrow{
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-4);
}
.mono{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
strong,b{font-weight:600}

/* ---------- Layout ---------- */
.wrap{width:100%; max-width:var(--w); margin-inline:auto; padding-inline:20px}
.wrap.narrow{max-width:var(--w-narrow)}
.wrap.wide{max-width:var(--w-wide)}
.section{padding-block:var(--s7)}
.section + .section{padding-top:0}
.stack{display:flex; flex-direction:column}
.stack-2{gap:var(--s2)} .stack-3{gap:var(--s3)} .stack-4{gap:var(--s4)}
.stack-5{gap:var(--s5)} .stack-6{gap:var(--s6)} .stack-7{gap:var(--s7)}
.row{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.grow{flex:1 1 auto; min-width:0}

/* ---------- Header ---------- */
.topbar{background:var(--blue-deep); color:#fff; padding:var(--s4) 0}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--s4)}
.wordmark{display:block; width:132px; height:auto; color:#fff}
.wordmark svg,.wordmark img{width:100%; height:auto; display:block}
.topbar-tag{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.62); font-weight:600}

/* ---------- Hero ---------- */
.hero{
  position:relative; background:var(--blue-deep); color:#fff;
  padding-block:var(--s7) 132px; overflow:hidden;
}
.hero .eyebrow{color:var(--yellow); opacity:.92}
.hero .lede{color:rgba(255,255,255,.8)}
.hero-sky{
  position:absolute; left:0; right:0; bottom:-1px; width:100%; height:auto;
  opacity:.3; pointer-events:none; min-width:760px;
}
.hero-inner{position:relative; z-index:1; display:flex; flex-direction:column; gap:var(--s4)}

/* Riquadro orari nell'hero */
.hours{
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5);
  border:1px solid rgba(255,255,255,.22); border-radius:var(--r-card);
  background:rgba(255,255,255,.05); padding:var(--s4) var(--s5); margin-top:var(--s3);
}
.hours-item{display:flex; flex-direction:column; gap:2px; min-width:150px}
.hours-day{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6); font-weight:600}
.hours-time{font-size:19px; font-weight:600; letter-spacing:-.01em}
.hours-note{width:100%; font-size:13.5px; color:rgba(255,255,255,.66)}

/* ---------- Card ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--shadow-1); padding:var(--s5);
}
.card-pad-lg{padding:var(--s6)}
.card-quote{border-left:4px solid var(--yellow)}
.grid{display:grid; gap:var(--s4)}
@media(min-width:720px){ .grid-2{grid-template-columns:1fr 1fr} }

/* ---------- Pulsanti ---------- */
.btn{
  -webkit-appearance:none; appearance:none; border:1px solid transparent; cursor:pointer;
  min-height:var(--tap); padding:0 var(--s5); border-radius:var(--r-3);
  font-size:16px; font-weight:600; letter-spacing:-.005em;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  transition:background var(--d2) var(--ease-standard), box-shadow var(--d2) var(--ease-standard),
             transform var(--d1) var(--ease-standard), border-color var(--d2) var(--ease-standard);
  text-decoration:none; text-align:center;
}
.btn:active{transform:scale(.985)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.4; cursor:not-allowed; transform:none}
.btn-primary{background:var(--blue-deep); color:#fff}
.btn-primary:hover:not(:disabled){background:#004176; color:#fff}
.btn-accent{background:var(--yellow); color:var(--blue-deep)}
.btn-accent:hover:not(:disabled){background:#FFF54D; color:var(--blue-deep)}
.btn-ghost{background:var(--surface); color:var(--blue-deep); border-color:var(--line)}
.btn-ghost:hover:not(:disabled){background:var(--surface-3); color:var(--blue-deep); border-color:#CFD6E3}
.btn-quiet{background:transparent; color:var(--ink-3); border-color:transparent; padding-inline:var(--s3)}
.btn-quiet:hover:not(:disabled){background:rgba(0,52,94,.06); color:var(--ink-2)}
.btn-danger{background:var(--surface); color:var(--danger); border-color:#EBD3D1}
.btn-danger:hover:not(:disabled){background:var(--danger-bg); color:var(--danger)}
.btn-block{width:100%}
.btn-lg{min-height:56px; font-size:17px; padding-inline:var(--s6)}
.btn-sm{min-height:40px; font-size:14px; padding-inline:var(--s4); border-radius:var(--r-2)}

/* ---------- Campi ---------- */
.field{display:flex; flex-direction:column; gap:6px}
.field > label{font-size:14px; font-weight:600; color:var(--ink-2)}
.field-hint{font-size:13px; color:var(--ink-4)}
.field-err{font-size:13px; color:var(--danger); font-weight:500; display:none}
.field.invalid .field-err{display:block}
.input{
  width:100%; min-height:var(--tap); padding:12px var(--s4);
  background:var(--surface); border:1px solid #D3DAE6; border-radius:var(--r-3);
  font-size:16px; color:var(--ink);
  transition:border-color var(--d2) var(--ease-standard), box-shadow var(--d2) var(--ease-standard);
}
.input::placeholder{color:var(--ink-5)}
.input:hover{border-color:#BCC5D6}
.input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,133,202,.16)}
.field.invalid .input{border-color:var(--danger)}
.field.invalid .input:focus{box-shadow:0 0 0 3px rgba(179,38,30,.14)}
select.input{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2341506A' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:42px;
}
.honeypot{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

/* ---------- Day picker a card ---------- */
.daypick{display:grid; gap:var(--s3)}
@media(min-width:640px){ .daypick{grid-template-columns:1fr 1fr} }
.daycard{
  position:relative; display:block; cursor:pointer;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-card);
  padding:var(--s5) var(--s5) var(--s5) var(--s6);
  transition:border-color var(--d2) var(--ease-standard), background var(--d2) var(--ease-standard),
             box-shadow var(--d2) var(--ease-standard), transform var(--d2) var(--ease-out);
  overflow:hidden;
}
.daycard::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:var(--line); transition:background var(--d2) var(--ease-standard);
}
.daycard:hover{border-color:#C6CFDF; box-shadow:var(--shadow-2)}
.daycard input{position:absolute; opacity:0; width:1px; height:1px}
.daycard-dow,.daycard-date,.daycard-time,.daycard-what{display:block}
.daycard-dow{font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-4)}
.daycard-date{font-size:clamp(28px,6.5vw,38px); font-weight:700; letter-spacing:-.03em; line-height:1.05; margin-top:2px}
.daycard-date small{font-size:.44em; font-weight:600; letter-spacing:-.01em; color:var(--ink-3); margin-left:8px}
.daycard-time{margin-top:var(--s3); font-size:17px; font-weight:600; color:var(--blue-deep)}
.daycard-what{margin-top:6px; font-size:13.5px; color:var(--ink-4); line-height:1.45}
.daycard-mark{
  position:absolute; top:var(--s4); right:var(--s4); width:26px; height:26px; border-radius:var(--r-pill);
  border:1.5px solid var(--line); display:grid; place-items:center;
  transition:background var(--d2) var(--ease-standard), border-color var(--d2) var(--ease-standard);
}
.daycard-mark svg{
  width:15px; height:15px; opacity:0; transform:scale(.7); color:var(--blue-deep);
  transition:opacity var(--d2) var(--ease-out), transform var(--d2) var(--ease-out);
}
.daycard.on{background:#FFFEF0; border-color:var(--blue-deep); box-shadow:var(--shadow-2)}
.daycard.on::before{background:var(--yellow)}
.daycard.on .daycard-mark{background:var(--yellow); border-color:var(--blue-deep)}
.daycard.on .daycard-mark svg{opacity:1; transform:scale(1)}
.daycard:has(input:focus-visible){outline:2px solid var(--blue); outline-offset:2px}

/* ---------- Stepper ---------- */
.stepper{
  display:inline-flex; align-items:center; gap:0; align-self:flex-start;
  border:1px solid #D3DAE6; border-radius:var(--r-3); background:var(--surface); overflow:hidden;
}
.stepper button{
  -webkit-appearance:none; appearance:none; border:0; background:var(--surface); cursor:pointer;
  width:56px; height:56px; display:grid; place-items:center; color:var(--blue-deep);
  transition:background var(--d1) var(--ease-standard);
}
.stepper button:hover:not(:disabled){background:var(--surface-3)}
.stepper button:active:not(:disabled){background:#E3E9F2}
.stepper button:disabled{color:var(--ink-5); cursor:not-allowed}
.stepper button svg{width:20px; height:20px}
.stepper-val{
  min-width:64px; height:56px; display:grid; place-items:center;
  font-size:22px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  border-inline:1px solid var(--line); background:var(--surface);
}

/* ---------- Toggle sì/no ---------- */
.toggle{
  position:relative; display:flex; align-items:flex-start; gap:var(--s4); cursor:pointer;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-card);
  padding:var(--s4) var(--s5);
  transition:border-color var(--d2) var(--ease-standard), background var(--d2) var(--ease-standard);
}
.toggle:hover{border-color:#C6CFDF}
.toggle input{position:absolute; opacity:0; width:1px; height:1px}
.toggle-txt{flex:1 1 auto; min-width:0; font-size:14.5px; color:var(--ink-2); line-height:1.5}
.toggle-txt b{display:block; font-size:15.5px; color:var(--ink); margin-bottom:3px; font-weight:600}
.toggle-sw{
  flex:0 0 auto; width:52px; height:31px; border-radius:var(--r-pill);
  background:#CFD6E3; position:relative; margin-top:2px;
  transition:background var(--d2) var(--ease-standard);
}
.toggle-sw::after{
  content:""; position:absolute; top:3px; left:3px; width:25px; height:25px; border-radius:var(--r-pill);
  background:#fff; box-shadow:var(--shadow-1); transition:transform var(--d2) var(--ease-out);
}
.toggle.on{border-color:var(--blue-deep); background:#FFFEF0}
.toggle.on .toggle-sw{background:var(--blue-deep)}
.toggle.on .toggle-sw::after{transform:translateX(21px)}
.toggle:has(input:focus-visible){outline:2px solid var(--blue); outline-offset:2px}

/* ---------- Chip / badge ---------- */
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--r-pill);
  font-size:13px; font-weight:600; background:var(--surface-3); color:var(--ink-2); white-space:nowrap;
}
.chip-yellow{background:var(--yellow); color:var(--blue-deep)}
.chip-blue{background:var(--info-bg); color:var(--blue-deep)}
/* Testi dei chip scuriti rispetto ai token semantici: sui fondi tenui i colori
   di stato non arrivano a 4.5:1. */
.chip-ok{background:var(--success-bg); color:#146134}
.chip-warn{background:var(--warning-bg); color:#8A6200}
.chip-off{background:var(--surface-3); color:var(--ink-3)}

/* ---------- Note / alert ---------- */
.note{
  border-radius:var(--r-3); padding:var(--s4) var(--s5); font-size:14.5px; line-height:1.5;
  border-left:4px solid var(--info); background:var(--info-bg); color:var(--ink-2);
}
.note-warn{border-left-color:var(--warning); background:var(--warning-bg)}
.note-err{border-left-color:var(--danger); background:var(--danger-bg)}
.note-ok{border-left-color:var(--success); background:var(--success-bg)}
.note b{font-weight:600}

/* ---------- Elenco luoghi ---------- */
.places{display:grid; gap:var(--s3); list-style:none}
.place{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--s5); display:flex; flex-direction:column; gap:var(--s2);
}
.place-name{font-size:16.5px; font-weight:600; letter-spacing:-.01em}
.place-addr{font-size:14px; color:var(--ink-4)}
.place-note{font-size:14px; color:var(--ink-2); background:var(--surface-2); border-radius:var(--r-3); padding:var(--s3) var(--s4)}
.maplink{
  align-self:flex-start; display:inline-flex; align-items:center; gap:7px; min-height:40px;
  font-size:14.5px; font-weight:600; color:var(--blue-mid); text-decoration:none;
}
.maplink:hover{text-decoration:underline}
.maplink svg{width:16px; height:16px; flex:0 0 auto}
.maplinks{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5)}

/* ---------- Riferimenti ---------- */
.contacts{display:grid; gap:var(--s3); list-style:none}
@media(min-width:640px){ .contacts{grid-template-columns:1fr 1fr} }
.contact{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--s5); display:flex; flex-direction:column; gap:2px;
}
.contact-name{font-size:16.5px; font-weight:600; letter-spacing:-.01em}
.contact-tel{
  align-self:flex-start; font-size:clamp(21px,4.6vw,25px); font-weight:700; letter-spacing:-.02em;
  color:var(--blue-deep); text-decoration:none; font-variant-numeric:tabular-nums;
  min-height:44px; display:inline-flex; align-items:center;
}
.contact-tel:hover{color:var(--blue-mid); text-decoration:underline}
.contact .btn{margin-top:var(--s3)}
.contact-acts{display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s3)}
.contact-acts .btn{flex:1 1 auto; min-width:132px; margin-top:0}

/* ---------- Programma ---------- */
.prog{display:grid; gap:var(--s4)}
@media(min-width:800px){ .prog{grid-template-columns:1fr 1fr} }
.prog-col{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s5)}
.prog-day{font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-4); margin-bottom:var(--s4)}
.prog-list{list-style:none; display:flex; flex-direction:column}
.prog-item{display:flex; gap:var(--s4); padding-block:var(--s3); border-top:1px solid var(--line-2)}
.prog-item:first-child{border-top:0; padding-top:0}
.prog-when{flex:0 0 84px; font-size:14px; font-weight:600; color:var(--blue-deep); font-variant-numeric:tabular-nums}
.prog-what{flex:1 1 auto; min-width:0; font-size:14.5px; color:var(--ink-2); line-height:1.5}

/* ---------- Pass (carta d'imbarco) ---------- */
.pass{
  width:100%; max-width:420px; margin-inline:auto;
  background:var(--surface); border-radius:var(--r-card); overflow:hidden;
  box-shadow:var(--shadow-3); border:1px solid var(--line);
}
.pass-band{
  background:var(--yellow); color:var(--blue-deep);
  padding:var(--s4) var(--s5); display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
}
.pass-band-t{font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase}
.pass-band-sky{width:96px; opacity:.5; flex:0 0 auto}
.pass-main{padding:var(--s5)}
.pass-name{font-size:clamp(23px,5.5vw,30px); font-weight:700; letter-spacing:-.025em; line-height:1.1; word-break:break-word}
.pass-sub{margin-top:var(--s2); font-size:14.5px; color:var(--ink-3)}
.pass-rows{display:grid; grid-template-columns:1.5fr 1fr; gap:var(--s4); margin-top:var(--s5)}
.pass-row{display:flex; flex-direction:column; gap:3px; min-width:0}
.pass-k{font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4)}
.pass-v{font-size:15px; font-weight:600; color:var(--ink); line-height:1.35}
.pass-days{display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--s5)}
.pass-incl{
  margin-top:var(--s5); border-left:4px solid var(--yellow); background:var(--surface-2);
  border-radius:var(--r-3); padding:var(--s4);
}
.pass-incl-t{font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4)}
.pass-incl ul{list-style:none; margin-top:var(--s2); display:flex; flex-direction:column; gap:var(--s2)}
.pass-incl li{font-size:14.5px; color:var(--ink-2); line-height:1.45}
.pass-incl li b{font-weight:600; color:var(--ink)}
.pass-perf{position:relative; border-top:2px dashed var(--line)}
.pass-perf::before,.pass-perf::after{
  content:""; position:absolute; top:-13px; width:24px; height:24px; border-radius:var(--r-pill);
  background:var(--surface-2);
}
.pass-perf::before{left:-13px}
.pass-perf::after{right:-13px}
.pass-qr{padding:var(--s5); display:flex; flex-direction:column; align-items:center; gap:var(--s3)}
.pass-qr img{
  width:100%; max-width:236px; height:auto; image-rendering:pixelated;
  border-radius:var(--r-2); background:#fff;
}
.pass-code{font-size:19px; font-weight:700; letter-spacing:.1em; color:var(--blue-deep); font-variant-numeric:tabular-nums}
.pass-hint{font-size:13px; color:var(--ink-4); text-align:center; max-width:280px}

/* momento di successo: una sola animazione orchestrata */
@keyframes pass-in{
  from{opacity:0; transform:translateY(14px) scale(.985)}
  to{opacity:1; transform:none}
}
.pass-enter{animation:pass-in var(--d3) var(--ease-out) both}
.pass-enter-1{animation-delay:60ms}
.pass-enter-2{animation-delay:160ms}

/* ---------- Azioni pass ---------- */
.pass-actions{
  width:100%; max-width:420px; margin:var(--s5) auto 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2);
}
.act{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  min-height:86px; padding:var(--s3) var(--s2);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  color:var(--blue-deep); font-size:13px; font-weight:600; text-align:center; text-decoration:none; cursor:pointer;
  transition:box-shadow var(--d2) var(--ease-standard), transform var(--d2) var(--ease-out), border-color var(--d2) var(--ease-standard);
}
.act:hover{box-shadow:var(--shadow-2); transform:translateY(-2px); border-color:#C6CFDF; color:var(--blue-deep)}
.act svg{width:22px; height:22px}

/* ---------- Footer ---------- */
.foot{background:var(--blue-deep); color:rgba(255,255,255,.72); padding-block:var(--s7); margin-top:var(--s8)}
.foot a{color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.4)}
.foot a:hover{color:var(--yellow); text-decoration-color:var(--yellow)}
.foot .wordmark{display:block; width:118px; margin-bottom:var(--s5)}
.foot-cols{display:grid; gap:var(--s5)}
@media(min-width:720px){ .foot-cols{grid-template-columns:1.2fr 1fr} }
.foot p{font-size:14px; line-height:1.6}
.foot-links{list-style:none; display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); font-size:14px}

/* ---------- Scelta iniziale (/) ---------- */
.pick{display:grid; gap:var(--s4)}
@media(min-width:720px){ .pick{grid-template-columns:1fr 1fr} }
.pickcard{
  display:flex; flex-direction:column; gap:var(--s2); text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--s6) var(--s5); box-shadow:var(--shadow-1);
  transition:box-shadow var(--d2) var(--ease-standard), transform var(--d2) var(--ease-out), border-color var(--d2) var(--ease-standard);
}
.pickcard:hover{box-shadow:var(--shadow-3); transform:translateY(-2px); border-color:#C6CFDF; color:inherit}
.pickcard-t{font-size:21px; font-weight:700; letter-spacing:-.02em; color:var(--blue-deep)}
.pickcard-d{font-size:14.5px; color:var(--ink-3); line-height:1.5}
.pickcard-go{margin-top:var(--s3); display:inline-flex; align-items:center; gap:7px; font-size:14.5px; font-weight:600; color:var(--blue-mid)}
.pickcard-go svg{width:16px; height:16px}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:20px; transform:translate(-50%,12px);
  background:var(--ink); color:#fff; padding:13px var(--s5); border-radius:var(--r-3);
  font-size:14.5px; font-weight:500; box-shadow:var(--shadow-4); z-index:90;
  opacity:0; pointer-events:none; max-width:calc(100vw - 32px); text-align:center;
  transition:opacity var(--d2) var(--ease-out), transform var(--d2) var(--ease-out);
}
.toast.on{opacity:1; transform:translate(-50%,0)}

/* ---------- Spinner / skeleton ---------- */
.spin{
  width:18px; height:18px; border-radius:50%; flex:0 0 auto;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
.btn-ghost .spin,.btn-accent .spin{border-color:rgba(0,52,94,.25); border-top-color:var(--blue-deep)}
@keyframes spin{to{transform:rotate(360deg)}}
.skel{background:var(--surface-3); border-radius:var(--r-3); animation:pulse 1.4s var(--ease-standard) infinite}
@keyframes pulse{50%{opacity:.55}}

/* ---------- prefers-reduced-motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
  .act:hover,.pickcard:hover{transform:none}
}