/* JoyDay — area cliente (percorso privato di embargo pre-lancio).
   Stessa palette/font del sito pubblico (vedi site/index.html). */
:root{
  --paper:#FBF7F1; --paper-wash:#F1E7DB; --ink:#332C25; --ink-soft:#6E6152;
  --tortora:#B4876C; --tortora-wash:#EFE0D4; --salvia:#5F7350; --salvia-wash:#E4E9DC;
  --gold:#AD8A3F; --hairline:rgba(51,44,37,0.16); --error:#B4433A;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#211C17; --paper-wash:#2B241D; --ink:#F1E9DF; --ink-soft:#C9BDAE;
    --hairline:rgba(241,233,223,0.18); --error:#E08A80; }
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}   /* vale anche sui blocchi in flex/grid */
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Archivo,system-ui,sans-serif; line-height:1.55;
}
h1,h2{font-family:"Bodoni Moda",serif; font-style:italic; font-weight:600; margin:0 0 .4em;}
.wrap{max-width:640px; margin:0 auto; padding:clamp(28px,6vw,56px) 20px;}
.card{
  background:var(--paper-wash); border:1px solid var(--hairline); border-radius:14px;
  padding:clamp(20px,4vw,32px); margin-bottom:20px;
}
label{display:block; font-size:.85em; color:var(--ink-soft); margin:14px 0 6px;}
input,select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--hairline); border-radius:8px;
  background:var(--paper); color:var(--ink); font:inherit;
}
button{
  margin-top:18px; padding:11px 22px; border:none; border-radius:999px; cursor:pointer;
  background:var(--salvia); color:#fff; font:inherit; font-weight:600; letter-spacing:.02em;
}
button:disabled{opacity:.6; cursor:default;}
button.secondary{background:transparent; color:var(--salvia); border:1px solid var(--salvia);}
.note{margin-top:12px; font-size:.9em;}
.note.ok{color:var(--salvia);}
.note.err{color:var(--error);}
.event-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--hairline);
}
.event-row:last-child{border-bottom:none;}
.pill{
  display:inline-block; font-size:.75em; text-transform:uppercase; letter-spacing:.05em;
  color:var(--gold); border:1px solid var(--gold); border-radius:999px; padding:2px 10px;
}
a{color:var(--salvia);}
.topline{font-size:.8em; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-soft); margin-bottom:10px;}

/* ───────────── Scheda evento (Proposta 1: eventi espandibili) ─────────────
   La riga dell'evento si apre in una scheda con quattro linguette. Le classi
   stanno qui e non dentro event-panel.js perché le usano sia la teca sia la
   pagina del familiare, che caricano già questo foglio. */
.jd-ev{
  background:var(--paper); border:1px solid var(--hairline); border-radius:14px;
  margin-bottom:12px; overflow:hidden;
}
.jd-ev-head{
  display:flex; align-items:center; gap:12px; padding:12px 14px; width:100%;
  background:none; border:none; margin:0; color:inherit; font:inherit; text-align:left;
  cursor:pointer; border-radius:0;
}
.jd-ev-head:hover{background:var(--paper-wash);}
.jd-chev{
  flex:0 0 auto; width:18px; color:var(--ink-soft); font-size:.9em;
  transition:transform .15s;
}
.jd-ev.is-open .jd-chev{transform:rotate(90deg);}
.jd-thumb{
  flex:0 0 auto; width:52px; height:52px; border-radius:12px; overflow:hidden;
  background:var(--tortora-wash); color:var(--tortora); display:flex;
  align-items:center; justify-content:center;
  font-family:"Bodoni Moda",serif; font-style:italic; font-weight:600; font-size:1.2em;
}
.jd-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.jd-ev-titles{flex:1 1 auto; min-width:0;}
.jd-ev-titles strong{display:block; font-size:1.02em;}
.jd-ev-titles .jd-meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:.86em; color:var(--ink-soft); margin-top:3px;
}
.jd-dots{
  flex:0 0 auto; background:none; border:none; margin:0; padding:4px 8px;
  color:var(--ink-soft); font-size:1.2em; line-height:1; cursor:pointer; border-radius:8px;
}
.jd-dots:hover{background:var(--paper-wash);}
.jd-menu{
  margin:0 14px 10px; padding:8px; border:1px solid var(--hairline);
  border-radius:12px; background:var(--paper-wash);
  display:flex; flex-wrap:wrap; gap:6px;
}
.jd-menu a{
  font-size:.88em; text-decoration:none; padding:6px 12px; border-radius:999px;
  border:1px solid var(--hairline); background:var(--paper);
}
.jd-tabs{
  display:flex; gap:4px; padding:0 14px; border-bottom:1px solid var(--hairline);
  overflow-x:auto;
}
.jd-tab{
  background:none; border:none; margin:0; padding:9px 12px; border-radius:0;
  color:var(--ink-soft); font:inherit; font-size:.92em; cursor:pointer;
  border-bottom:2px solid transparent; white-space:nowrap;
}
.jd-tab.is-on{color:var(--ink); font-weight:600; border-bottom-color:var(--salvia);}
.jd-pane{padding:14px;}
.jd-grid2{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.jd-box{
  border:1px solid var(--hairline); border-radius:12px; padding:12px 14px;
  background:var(--paper-wash);
}
.jd-box + .jd-box, .jd-grid2 + .jd-box{margin-top:12px;}
.jd-box-head{display:flex; align-items:flex-start; gap:10px; margin-bottom:10px;}
.jd-box-head .jd-t{flex:1 1 auto; min-width:0;}
.jd-box-head strong{display:block; font-size:.96em;}
.jd-box-head .jd-sub{display:block; font-size:.84em; color:var(--ink-soft);}
.jd-box-head a{font-size:.86em; white-space:nowrap; text-decoration:none;}
.jd-ico{
  flex:0 0 auto; width:30px; height:30px; border-radius:9px; background:var(--paper);
  border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center;
  color:var(--salvia);
}
.jd-ico svg{width:16px; height:16px;}
.jd-thumbs{display:grid; grid-template-columns:repeat(3,1fr); gap:6px;}
.jd-thumbs img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; display:block;}
.jd-thumbs .jd-more{
  display:flex; align-items:center; justify-content:center; text-align:center;
  aspect-ratio:1; border-radius:8px; border:1px dashed var(--hairline);
  background:var(--paper); font-size:.78em; color:var(--ink-soft); padding:4px;
  text-decoration:none;
}
.jd-tiles{display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.jd-tile{
  display:block; text-decoration:none; color:inherit; background:var(--paper);
  border:1px solid var(--hairline); border-radius:11px; padding:10px 11px;
}
.jd-tile:hover{border-color:var(--salvia);}
.jd-tile.is-off{opacity:.55;}
.jd-tile .jd-tile-top{display:flex; flex-wrap:wrap; align-items:flex-start; gap:4px 8px; margin-bottom:6px; min-width:0;}
.jd-tile strong{font-size:.9em; flex:1 1 auto; min-width:0; line-height:1.3; padding-top:4px;}
.jd-tile .jd-sub{display:block; font-size:.8em; color:var(--ink-soft); line-height:1.4;}
.jd-state{
  flex:0 0 auto; display:inline-block; font-size:.72em; letter-spacing:.03em; padding:2px 9px;
  border-radius:999px; white-space:nowrap;
  background:var(--salvia-wash); color:var(--salvia); border:1px solid transparent;
}
.jd-state.is-wait{background:var(--tortora-wash); color:var(--tortora);}
.jd-state.is-off{background:transparent; color:var(--ink-soft); border-color:var(--hairline);}
.jd-line{
  display:flex; align-items:center; gap:10px; padding:9px 0;
  border-bottom:1px solid var(--hairline);
}
.jd-line:last-child{border-bottom:none;}
.jd-line .jd-t{flex:1 1 auto; min-width:0;}
.jd-line strong{display:block; font-size:.92em;}
.jd-line .jd-sub{display:block; font-size:.82em; color:var(--ink-soft);}
.jd-line .jd-right{display:flex; align-items:center; gap:6px; white-space:nowrap;}
.jd-check{color:var(--salvia); display:flex;}
.jd-check svg{width:15px; height:15px;}