:root {
  --shell: #e9eee9;
  --sheet: #ffffff;
  --ink: #16232c;
  --muted: #5e6a72;
  --rule: #cbd3ce;
  --sunday: #f1f4f1;
  --a: #2547a6;
  --b: #a8326a;
  --a-shell: #2547a6;
  --b-shell: #a8326a;
  --focus: #2547a6;
  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --text: 'Atkinson Hyperlegible', system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --shell: #1b262d;
    --ink-shell: #e8eeea;
    --muted-shell: #a9b5ad;
    --a-shell: #9db4f0;
    --b-shell: #eba3c5;
    --focus: #9db4f0;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --shell: #1b262d;
  --ink-shell: #e8eeea;
  --muted-shell: #a9b5ad;
  --a-shell: #9db4f0;
  --b-shell: #eba3c5;
  --focus: #9db4f0;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--shell);
  color: var(--ink-shell, var(--ink));
  font: 400 1rem/1.5 var(--text);
}

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------- Testata: la frase è il modulo ---------- */

.shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem 1rem;
}

.brand {
  margin: 0 0 2.5rem;
  font: 700 1.25rem/1 var(--display);
  letter-spacing: 0.02em;
}

.sentence {
  margin: 0;
  font: 900 clamp(2.6rem, 8vw, 6.5rem)/0.98 var(--display);
  letter-spacing: -0.01em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.28em;
}

.pick select,
.pick-sm select {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 0.08em solid currentColor;
  border-radius: 0;
  padding: 0 0.1em;
  cursor: pointer;
  appearance: none;
  field-sizing: content;
  max-width: 100%;
}
.pick select option,
.pick-sm select option { font: 400 1rem var(--text); color: #16232c; background: #fff; }

.pick-a select { color: var(--a-shell); }
.pick-b select { color: var(--b-shell); }

.langs {
  margin: 1.25rem 0 0;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: var(--muted-shell, var(--muted));
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.4em;
  align-items: baseline;
}
.pick-sm select { font-weight: 700; }

.actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

button {
  font: 700 1rem/1 var(--text);
  padding: 0.9rem 1.4rem;
  border-radius: 999px;
  border: 2px solid var(--ink-shell, var(--ink));
  background: var(--ink-shell, var(--ink));
  color: var(--shell);
  cursor: pointer;
}
button.ghost { background: transparent; color: var(--ink-shell, var(--ink)); }
button:disabled { opacity: 0.5; cursor: progress; }

.status { min-height: 1.5em; margin: 1rem 0 0; color: var(--muted-shell, var(--muted)); }

.busy .status::before {
  content: '';
  display: inline-block;
  width: 0.7em; height: 0.7em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--a-shell) 50%, var(--b-shell) 50%);
  animation: spin 1.2s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

/* ---------- Fogli del calendario ---------- */

.calendar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
  display: grid;
  gap: 2rem;
}
.calendar:empty { display: none; }

.sheet {
  background: var(--sheet);
  color: var(--ink);
  padding: clamp(0.75rem, 3vw, 2rem);
  border-radius: 4px;
  box-shadow: 0 1px 0 var(--rule), 0 12px 32px -18px rgba(22, 35, 44, 0.45);
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
}

.photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 2vw, 1rem);
}

.photo { margin: 0; }

.frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  background: var(--sunday);
  border-top: 6px solid var(--a);
}
.photo-b .frame { border-top-color: var(--b); }

.frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

.frame.loading {
  background: linear-gradient(100deg, var(--sunday) 40%, #fff 50%, var(--sunday) 60%) 0 0 / 300% 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { to { background-position: -150% 0; } }

.retry {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.85rem; padding: 0.6rem 1rem;
  background: var(--ink); color: #fff; border-color: var(--ink);
}

figcaption { overflow-wrap: anywhere; padding-top: 0.5rem; font-size: 0.85rem; line-height: 1.35; }
figcaption p { margin: 0; }
.place { font-size: 0.95rem; }
.place i { color: var(--muted); font-style: normal; }
.cc {
  display: inline-block;
  font: 700 0.7rem/1 var(--text);
  padding: 0.2em 0.35em;
  border-radius: 2px;
  color: #fff;
  background: var(--a);
  vertical-align: 0.1em;
}
.photo-b .cc { background: var(--b); }
.cap { margin-top: 0.15rem; }
.cap-2 { color: var(--muted); font-style: italic; }

.title {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 0 0.75rem;
  margin: clamp(1rem, 3vw, 1.75rem) 0 0.75rem;
}
.num {
  font: 900 clamp(3.5rem, 11vw, 6.5rem)/0.8 var(--display);
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}
.title h2 { margin: 0; display: flex; flex-direction: column; line-height: 0.9; }
.m-a { font: 900 clamp(2rem, 6.5vw, 3.6rem)/0.9 var(--display); }
.m-b { font: 500 clamp(1.2rem, 3.5vw, 1.9rem)/1 var(--display); color: var(--muted); margin-top: 0.15em; }
.yr { font: 700 clamp(1.4rem, 4vw, 2.2rem)/0.9 var(--display); }

.grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.grid th {
  font: 700 0.8rem/1.2 var(--text);
  text-align: left;
  padding: 0.3rem 0.35rem;
  border-bottom: 2px solid var(--ink);
}
.grid th i { display: block; font-weight: 400; font-style: normal; color: var(--muted); }
.grid th.sun { color: var(--b); }

.grid td {
  vertical-align: top;
  height: clamp(3.6rem, 10vw, 5.6rem);
  padding: 0.25rem 0.35rem;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  overflow: hidden;
}
.grid td:last-child { border-right: 0; }
.grid td.sun { background: var(--sunday); }

.n { font: 700 clamp(1.1rem, 3vw, 1.6rem)/1 var(--display); }
.hol-a .n { color: var(--a); }
.hol-b:not(.hol-a) .n { color: var(--b); }

.hols { list-style: none; margin: 0.2rem 0 0; padding: 0; font-size: clamp(0.55rem, 1.4vw, 0.7rem); line-height: 1.2; }
.hols li { padding-left: 0.4em; border-left: 3px solid var(--a); margin-top: 0.15rem; overflow-wrap: anywhere; }
.hols li.by-b { border-left-color: var(--b); }
.hols li.by-a.by-b { border-image: linear-gradient(var(--a) 50%, var(--b) 50%) 1; }
.hols i { display: block; color: var(--muted); }

.legend {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  font-size: 0.8rem;
}
.key::before {
  content: '';
  display: inline-block;
  width: 0.8em; height: 0.8em;
  margin-right: 0.4em;
  background: var(--a);
  vertical-align: -0.05em;
}
.key-b::before { background: var(--b); }
.key i { color: var(--muted); margin-left: 0.35em; }

.foot {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
  font-size: 0.85rem;
  color: var(--muted-shell, var(--muted));
}
.foot p { max-width: 70ch; margin: 0; }

@media (max-width: 560px) {
  .photos { grid-template-columns: 1fr; }
  .grid th i, .hols i { display: none; }
  .grid td { padding: 0.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .busy .status::before, .frame.loading { animation: none; }
}

.example-note {
  max-width: 860px;
  width: 100%;
  margin: 0 auto -1rem;
  font-weight: 700;
}

/* ---------- Pannello Personalizza ---------- */

.more { margin-top: 1.5rem; max-width: 760px; }
.more summary {
  cursor: pointer;
  font-weight: 700;
  width: fit-content;
}
.opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem 1.25rem;
  margin-top: 1rem;
}
.opts label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; color: var(--muted-shell, var(--muted)); }
.opts .wide { grid-column: 1 / -1; }
.opts select,
.opts textarea {
  font: 400 1rem/1.4 var(--text);
  color: var(--ink-shell, var(--ink));
  background: transparent;
  border: 1.5px solid var(--muted-shell, var(--muted));
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
}
.opts select option { color: #16232c; background: #fff; }
.opts textarea { resize: vertical; min-height: 3.2rem; }
.count { align-self: flex-end; font-size: 0.8rem; }


/* ---------- Elementi comuni ai formati ---------- */

.credit { margin-top: 0.2rem; font-size: 0.7rem; color: var(--muted); }
.credit a { color: inherit; }
.credit:empty { display: none; }

.own-wrap { margin-top: 0.3rem; }
.own {
  font-size: 0.75rem;
  padding: 0.35rem 0.7rem;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--rule);
}
.own:hover { border-color: var(--ink); }

.dayhead { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }

/* Fasi lunari disegnate in CSS: nessun font necessario. */
.moon {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  vertical-align: middle;
  flex: none;
}
.moon-new { background: var(--ink); }
.moon-full { background: #fff; }
.moon-first { background: linear-gradient(90deg, #fff 50%, var(--ink) 50%); }
.moon-last { background: linear-gradient(90deg, var(--ink) 50%, #fff 50%); }
.dayhead .moon { font-size: clamp(0.8rem, 2vw, 1rem); }

.season { font-size: clamp(0.5rem, 1.3vw, 0.65rem); line-height: 1.1; color: var(--muted); }
.season i { display: block; }

.today { outline: 2.5px solid var(--b); outline-offset: -3px; }

/* Griglia compatta: trimestrale e mini-mesi */
.cgrid { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: center; }
.cgrid th {
  font: 700 0.65rem/1.15 var(--text);
  padding: 0.25rem 0.1rem;
  background: var(--sunday);
  border: 1px solid #fff;
}
.cgrid th i { display: block; font-weight: 400; font-style: normal; color: var(--muted); }
.cgrid th.we { color: var(--b); }
.cgrid td {
  font: 700 clamp(1rem, 3vw, 1.7rem)/1.25 var(--display);
  padding: 0.1rem 0;
  border: 1px solid var(--rule);
  position: relative;
}
.cgrid td.we { color: var(--b); }
.cgrid td.out { color: #b9c1bc; font-weight: 500; }
.cgrid td.hol-a { color: #fff; background: var(--a); }
.cgrid td.hol-b { color: #fff; background: var(--b); }
.cgrid td.hol-a.hol-b { background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); }
.cgrid td .moon { position: absolute; top: 3px; right: 3px; font-size: 0.45rem; border-width: 1px; }
.cgrid .wk { width: 2.2em; color: var(--muted); font: 400 0.65rem/1 var(--text); background: var(--sunday); }
.cgrid.mini td { font: 500 0.62rem/1.35 var(--text); border: 0; padding: 0; }
.cgrid.mini th { font-size: 0.55rem; background: none; border: 0; padding: 0 0 0.1rem; }
.cgrid.mini td.hol-a,
.cgrid.mini td.hol-b { border-radius: 2px; }

/* ---------- Copertina ---------- */

.cover { position: relative; overflow: hidden; padding: 0; }
.cover-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cover .frame { aspect-ratio: 3 / 4; border-top: 0; border-radius: 0; }
.cover-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(1rem, 4vw, 2.5rem);
  color: #fff;
  background: linear-gradient(transparent, rgba(10, 18, 24, 0.75));
}
.cover-year { margin: 0; font: 900 clamp(4rem, 16vw, 10rem)/0.85 var(--display); }
.cover-countries { margin: 0.4rem 0 0; font: 700 clamp(1.1rem, 3vw, 1.8rem)/1.2 var(--display); }
.cover-countries i { display: block; font-weight: 500; opacity: 0.85; }
.cover-desk { max-width: 1000px; }
.cover-desk .frame { aspect-ratio: 4 / 3; }
.cover-quarter { max-width: 560px; }

/* ---------- Trimestrale ---------- */

.quarter { max-width: 560px; }
.qtop { position: relative; }
.quarter .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.quarter .frame { aspect-ratio: 3 / 4; }
.quarter figcaption { font-size: 0.7rem; }
.qyear {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  margin: 0;
  font: 900 clamp(2rem, 7vw, 3.4rem)/1 var(--display);
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.rings {
  height: 14px;
  margin: 0.8rem -0.4rem 0.5rem;
  background: radial-gradient(circle at 50% 50%, #8d979c 0 2.5px, transparent 3px) 0 0 / 12px 14px repeat-x;
}
.qblock { padding: 0.2rem 0; }
.qhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.3rem; }
.qhead h3 { margin: 0; font: 900 clamp(1.3rem, 4vw, 1.9rem)/1 var(--display); color: var(--a); }
.qhead h3 i { font-weight: 500; font-style: normal; color: var(--muted); margin-left: 0.5rem; font-size: 0.75em; }
.qyr { font: 700 1.3rem/1 var(--display); color: var(--a); }
.qblock.current { box-shadow: inset 4px 0 0 var(--b); padding-left: 0.6rem; }
.qhols { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.1rem 0.9rem; font-size: 0.68rem; }
.qhols li { padding-left: 0.4em; border-left: 3px solid var(--a); }
.qhols li.by-b { border-left-color: var(--b); }
.qhols li.by-a.by-b { border-image: linear-gradient(var(--a) 50%, var(--b) 50%) 1; }
.qhols i { color: var(--muted); margin-left: 0.3em; }

/* ---------- Da tavolo ---------- */

.desk {
  max-width: 1000px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr);
  gap: clamp(0.6rem, 2vw, 1.2rem);
}
.dphotos { display: grid; grid-template-rows: 1fr 1fr; gap: 0.5rem; }
.dphotos .photo { display: flex; flex-direction: column; min-height: 0; }
.dphotos .frame { aspect-ratio: auto; flex: 1; min-height: 150px; }
.dphotos figcaption { font-size: 0.68rem; padding-top: 0.25rem; }
.dphotos .place { font-size: 0.75rem; }
.dhead { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 0.8rem; align-items: start; margin-bottom: 0.5rem; }
.dmini p { margin: 0 0 0.15rem; font: 700 0.7rem/1 var(--text); color: var(--muted); }
.dtitle { text-align: center; }
.dyear { margin: 0; font: 900 clamp(2rem, 6vw, 3rem)/0.9 var(--display); color: var(--b); }
.dtitle h2 { margin: 0.2rem 0 0; font: 700 clamp(1rem, 2.6vw, 1.4rem)/1.1 var(--display); }
.dtitle h2 i { display: block; font-weight: 500; font-style: normal; color: var(--muted); }
.grid .wk { width: 2em; font: 400 0.6rem/1 var(--text); color: var(--muted); text-align: center; vertical-align: middle; }
.grid-notes td { height: clamp(3.4rem, 8vw, 4.6rem); }
.grid-notes .n { font-size: clamp(0.95rem, 2.2vw, 1.3rem); }

@media (max-width: 700px) {
  .desk { grid-template-columns: minmax(0, 1fr); }
  .dphotos { grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dphotos .frame { aspect-ratio: 4 / 3; }
  .dhead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dtitle { grid-column: 1 / -1; grid-row: 1; }
}

/* ---------- Stampa ---------- */

@page { size: A4 portrait; margin: 8mm; }
@page quarter { size: 290mm 630mm; margin: 10mm; }
@page desk { size: A5 landscape; margin: 6mm; }

@media print {
  body { background: #fff; color: var(--ink); }
  .shell, .foot, .retry, .own-wrap, .example-note { display: none; }
  .calendar { padding: 0; gap: 0; max-width: none; display: block; }
  .sheet {
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    max-width: none;
    break-after: page;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .sheet:last-child { break-after: auto; }
  .today { outline: 0; }
  .grid th { font-size: 8pt; }
  .grid th i, .hols i { display: block; }
  .hols { font-size: 6.5pt; }
  .legend { font-size: 8pt; margin-top: 3mm; }
  .cover-photos { height: 100%; }
  .cover .frame { aspect-ratio: auto; height: 100%; }

  .wall, .cover-wall { height: 279mm; display: flex; flex-direction: column; }
  .wall .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5mm; }
  .wall .frame { aspect-ratio: auto; height: 78mm; }
  .wall figcaption { font-size: 8.5pt; }
  .wall .num { font-size: 58pt; }
  .wall .m-a { font-size: 34pt; }
  .wall .m-b { font-size: 18pt; }
  .wall .yr { font-size: 20pt; }
  .wall .title { margin: 5mm 0 3mm; }
  .wall .grid { flex: 1; }
  .wall .grid td { height: auto; }
  .wall .n { font-size: 15pt; }

  .quarter, .cover-quarter { page: quarter; height: 610mm; display: flex; flex-direction: column; }
  .quarter .frame { aspect-ratio: auto; height: 150mm; }
  .quarter figcaption { font-size: 9pt; }
  .quarter .qblock { flex: 1; display: flex; flex-direction: column; }
  .quarter .cgrid { flex: 1; }
  .quarter .cgrid td { font-size: 30pt; }
  .quarter .cgrid th { font-size: 9pt; }
  .quarter .qhead h3 { font-size: 30pt; }
  .quarter .qyr { font-size: 24pt; }
  .quarter .qyear { font-size: 60pt; }
  .quarter .qhols { font-size: 9pt; }
  .quarter .cgrid td .moon { font-size: 10pt; top: 2mm; right: 2mm; border-width: 1.5px; }
  .cover-quarter .cover-year { font-size: 200pt; }

  .desk, .cover-desk { page: desk; height: 136mm; }
  .desk { grid-template-columns: 62mm 1fr; gap: 4mm; }
  .desk .grid { height: 92mm; }
  .desk .grid td { height: auto; }
  .desk .grid th { font-size: 6.5pt; }
  .desk .n { font-size: 11pt; }
  .desk .hols { font-size: 5.5pt; }
  .desk .legend { font-size: 6.5pt; margin-top: 1.5mm; }
  .desk .dyear { font-size: 26pt; }
  .desk .dtitle h2 { font-size: 12pt; }
  .cover-desk .cover-year { font-size: 90pt; }
}

/* ---------- Usa la tua AI ---------- */

.byok {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.8rem 1.25rem;
  margin: 0;
  padding: 1rem;
  border: 1.5px dashed var(--muted-shell, var(--muted));
  border-radius: 8px;
}
.byok legend { padding: 0 0.4rem; font-weight: 700; color: var(--ink-shell, var(--ink)); }
.byok input[type='password'],
.byok input[type='text'] {
  font: 400 1rem/1.4 var(--text);
  color: var(--ink-shell, var(--ink));
  background: transparent;
  border: 1.5px solid var(--muted-shell, var(--muted));
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
}
.byok input:disabled { opacity: 0.45; }
.byok .check { flex-direction: row; align-items: center; gap: 0.5rem; align-self: end; }
.byok .hint { grid-column: 1 / -1; margin: 0; font-size: 0.82rem; color: var(--muted-shell, var(--muted)); max-width: 70ch; }