/* Extra di viaggio — modulo additivo (namespaced .x-) */

/* barra "Adesso": orologio doppio + prossima azione + condividi */
#x-now{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:12px 0 6px;padding:12px 16px;
  border:1px solid var(--bordo,#e1d9c7);border-left:3px solid var(--oro,#9c7c2a);border-radius:8px;
  background:var(--carta2,#fffdf8)}
#x-now .x-clocks{display:flex;gap:18px}
#x-now .x-clock{display:flex;flex-direction:column}
#x-now .x-clock span{font-family:var(--sans,system-ui);font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--grigio,#6f6657);font-weight:700}
#x-now .x-clock strong{font-family:var(--serif,Georgia,serif);font-size:26px;line-height:1.15;color:var(--inchiostro,#231f18);font-variant-numeric:tabular-nums}
#x-now .x-clock.xj strong{color:var(--rosso,#9b2226)}
#x-now .x-next{flex:1;min-width:200px;border-left:1px dashed var(--bordo,#e1d9c7);padding-left:14px}
#x-now .x-next[hidden]{display:none}
#x-now .x-kick{display:block;font-family:var(--sans,system-ui);font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--rossoscuro,#7a1d20);font-weight:700}
#x-now .x-next strong{display:block;font-family:var(--serif,Georgia,serif);font-size:16.5px;color:var(--inchiostro,#231f18)}
#x-now .x-next .x-t{color:var(--rosso,#9b2226);font-weight:700}
#x-now .x-next em{font-family:var(--sans,system-ui);font-style:normal;font-size:12.5px;color:var(--verde,#3a6b4a);font-weight:700}
#x-now .x-share{display:flex;gap:8px;margin-left:auto}
#x-now .x-share button{font-family:var(--sans,system-ui);font-size:12.5px;font-weight:700;border:1px solid var(--bordo,#e1d9c7);
  background:var(--carta2,#fffdf8);color:var(--rosso,#9b2226);border-radius:7px;padding:8px 11px;min-height:40px;cursor:pointer}
#x-now .x-share button:hover{background:var(--rosso,#9b2226);color:#fff;border-color:var(--rosso,#9b2226)}
@media(max-width:680px){
  #x-now{gap:10px}
  #x-now .x-next{border-left:none;padding-left:0;flex-basis:100%}
  #x-now .x-share{margin-left:0}
}

/* promemoria maree Miyajima */
#x-tide-banner{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0;padding:10px 14px;
  border:1px solid var(--bordo,#e1d9c7);border-left:3px solid var(--blu,#3a5577);border-radius:8px;
  background:var(--carta2,#fffdf8);font-family:var(--sans,system-ui);font-size:13.5px;color:var(--inchiostro,#231f18)}
#x-tide-banner a{color:var(--blu,#3a5577);font-weight:700}
#x-tide-banner button{margin-left:auto;font-family:var(--sans,system-ui);font-size:11.5px;border:1px solid var(--bordo,#e1d9c7);
  background:none;color:var(--grigio,#6f6657);border-radius:6px;padding:5px 9px;cursor:pointer}

/* sezione Extra */
#x-extra{margin:34px 0;scroll-margin-top:110px}
#x-extra .x-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){#x-extra .x-grid{grid-template-columns:1fr}}
.x-card{border:1px solid var(--bordo,#e1d9c7);border-top:3px solid var(--oro,#9c7c2a);border-radius:8px;
  background:var(--carta2,#fffdf8);padding:16px 18px}
.x-card h3{margin:0 0 10px;font-family:var(--serif,Georgia,serif);font-size:18px;color:var(--inchiostro,#231f18)}
.x-mini{font-size:12px;color:var(--grigio,#6f6657);margin:6px 0}
.x-lab{display:block;margin:10px 0 3px;font-family:var(--sans,system-ui);font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--rossoscuro,#7a1d20);font-weight:700}
.x-in{width:100%;box-sizing:border-box;font-family:var(--sans,system-ui);font-size:16px;padding:9px 11px;
  border:1px solid var(--bordo,#e1d9c7);border-radius:7px;background:#fff;color:var(--inchiostro,#231f18);resize:vertical}
.x-btn{font-family:var(--sans,system-ui);font-size:13px;font-weight:700;border:1px solid var(--bordo,#e1d9c7);
  background:var(--carta2,#fffdf8);color:var(--rosso,#9b2226);border-radius:7px;padding:9px 13px;min-height:40px;cursor:pointer;margin-top:10px}
.x-btn.solid{background:var(--inchiostro,#231f18);color:#fff;border-color:var(--inchiostro,#231f18)}
.x-btn.solid:hover{background:var(--rosso,#9b2226);border-color:var(--rosso,#9b2226)}
.x-trav{border-bottom:1px dashed var(--bordo,#e1d9c7);padding-bottom:14px;margin-bottom:12px}
.x-trav-h{font-family:var(--sans,system-ui);font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--oro,#9c7c2a)}

/* voci lista (preferiti + link meteo) */
.x-favitem{display:flex;flex-direction:column;gap:1px;padding:8px 10px;margin:6px 0;border:1px solid var(--bordo,#e1d9c7);
  border-radius:7px;background:var(--carta2,#fffdf8);text-decoration:none;color:var(--inchiostro,#231f18);font-family:var(--sans,system-ui);font-size:13.5px}
.x-favitem:hover{border-color:var(--rosso,#9b2226)}
.x-favitem b{color:var(--rossoscuro,#7a1d20)}
.x-favitem span{font-size:11.5px;color:var(--grigio,#6f6657)}

/* modale scheda medica a caratteri grandi */
#x-med-modal{position:fixed;inset:0;z-index:210;background:rgba(20,17,14,.94);display:none;align-items:flex-start;justify-content:center;padding:22px;overflow:auto}
#x-med-modal.on{display:flex}
#x-med-modal .x-mbox{max-width:680px;width:100%;padding:10px 0 30px}
#x-med-modal .x-mhead{font-family:var(--sans,system-ui);font-size:17px;font-weight:700;color:#c9ad73;margin-bottom:18px;text-align:center}
#x-med-modal .x-mrow{margin-bottom:20px;text-align:center}
#x-med-modal .x-mlab{font-family:var(--sans,system-ui);font-size:15px;color:#c9ad73;margin-bottom:4px}
#x-med-modal .x-mval{font-family:var(--sans,system-ui);font-size:min(8vw,40px);line-height:1.25;color:#fff;font-weight:700;overflow-wrap:break-word}
#x-med-modal .x-mcls{display:block;margin:24px auto 0;font-family:var(--sans,system-ui);font-size:14px;font-weight:700;
  background:#c9ad73;color:#231f18;border:none;border-radius:8px;padding:11px 22px;cursor:pointer;min-height:44px}

/* toast */
#x-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);z-index:220;
  background:var(--inchiostro,#231f18);color:#f3ecdc;font-family:var(--sans,system-ui);font-size:13px;
  padding:9px 16px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
#x-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* indicatore offline */
#x-now .x-net{flex-basis:100%;font-family:var(--sans,system-ui);font-size:12px;font-weight:700;color:var(--rossoscuro,#7a1d20)}
#x-now .x-net[hidden]{display:none}

/* scadenzario pre-partenza */
#x-scadenze{margin:10px 0;padding:12px 16px;border:1px solid var(--bordo,#e1d9c7);border-left:3px solid var(--rosso,#9b2226);
  border-radius:8px;background:var(--carta2,#fffdf8)}
#x-scadenze .x-dl-head{font-family:var(--sans,system-ui);font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--rossoscuro,#7a1d20);font-weight:700;margin-bottom:6px}
#x-scadenze .x-dl-item{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--bordo,#e1d9c7);font-family:var(--sans,system-ui);font-size:13.5px;color:var(--inchiostro,#231f18)}
#x-scadenze .x-dl-item:last-child{border-bottom:none}
#x-scadenze .x-dl-item a{color:var(--inchiostro,#231f18);text-decoration:underline;text-decoration-color:var(--oro,#9c7c2a)}
#x-scadenze .x-dl-item button{flex:0 0 auto;font-family:var(--sans,system-ui);font-size:11.5px;font-weight:700;border:1px solid var(--bordo,#e1d9c7);
  background:var(--carta2,#fffdf8);color:var(--verde,#3a6b4a);border-radius:6px;padding:6px 10px;min-height:36px;cursor:pointer}
#x-scadenze .x-dl-item button:hover{background:var(--verde,#3a6b4a);color:#fff;border-color:var(--verde,#3a6b4a)}

/* accesso rapido in nav */
.x-navlink{cursor:pointer}

/* dark mode: le variabili si adattano da sole; correggo i fondi fissi */
body.dark .x-in{background:#2a241e;color:#ece5d6}
body.dark #x-now .x-share button{background:#2a241e}

/* stampa: nascondo le parti interattive, la scheda medica resta stampabile */
@media print{
  #x-now,#x-tide-banner,#x-med-modal,#x-toast,.x-btn,#x-extra .x-share,#x-scadenze{display:none !important}
  .x-card{break-inside:avoid}
}