/* ============================================================================
   LuxFeries v2 — interactive, data-driven render. Design-system tokens, seasonal
   colours. Birthdays + handwritten notes on the RIGHT of each day. Birthdays and
   Notes are edited LIVE in their own yearly tabs (no modal). Bigger seasonal
   produce header.
   ========================================================================== */

@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
}

:root {
  --paper:#fff; --paper-warm:#fbf7ef; --ink:#2b2b27; --ink-soft:#6b6b63;
  --hairline:#d7dadd; --title-green:#5f7d3a; --season-green:#7d9a4f;
  --heading-olive:#9a7d1e;
  --mark-top:#efc01f; --mark-top-ring:#b58a08; --mark-gut:#f4e08a;
  --mark-leiw:#f0c4cd; --mark-wurzel:#d4bd95; --mark-meiden:#dfe3e6; --mark-meiden-edge:#b9c0c5;
  --bg-holiday:#f8e4e4; --bg-vacation:#fcf4d0; --bg-weekend:#ebedee;
  --celtic-brown:#8a6a3c; --astro-blue:#3a6ea5; --suntime-amber:#a8781e;
  --event-concert:#5a3a6e; --event-fest:#3f7a3f; --event-holiday:#a23b3b;
  --sunday-num:#b5402f; --gift:#d2691e; --note-ink:#7a5a2e;
  --edge-traffic:#cf6a2a; --edge-guillaume:#3f8a4f; --bridge-blue:#5b8fd0; --holiday-line:#c0504d; --perso-line:#2a9d8f;
  /* summer = green-yellowish (sunnier), brown reserved for autumn */
  --band-spring:#d6e6b8; --band-summer:#dde79a; --band-autumn:#e3bd80; --band-winter:#cdd8de;
  --font-sans:"Liberation Sans","Helvetica Neue",Arial,system-ui,sans-serif;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper-warm); color:var(--ink); font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased; }

/* ---- top bar + view switch ---- */
header.app { position:sticky; top:0; z-index:20; background:rgba(251,247,239,.97);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--hairline);
  display:flex; align-items:center; gap:14px; padding:10px 16px; flex-wrap:wrap; }
header.app h1 { font-size:18px; color:var(--title-green); margin:0; font-weight:800; }
.switch { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
.switch button { font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  border:1px solid #dde4d2; background:#eef2e6; color:var(--ink-soft);
  padding:6px 14px; border-radius:999px; transition:.15s; }
.switch button.is-active { background:var(--title-green); color:#fff; border-color:var(--title-green); }
.switch .lang { font:inherit; font-size:13px; font-weight:600; padding:6px 8px; border-radius:999px;
  border:1px solid #dde4d2; background:#eef2e6; color:var(--ink-soft); cursor:pointer; }

main { max-width:760px; margin:0 auto; padding:18px 14px 70px; }

/* ---- month switcher ---- */
.mswitch { display:flex; align-items:center; gap:8px; justify-content:center; margin:0 0 12px; }
.mswitch button { font:inherit; font-size:18px; line-height:1; width:36px; height:34px;
  border:1px solid var(--hairline); background:#fff; border-radius:8px; cursor:pointer; color:var(--title-green); }
.mswitch button:disabled { opacity:.35; cursor:default; }
.mswitch select { font:inherit; font-size:14px; font-weight:600; padding:7px 10px; border:1px solid var(--hairline);
  border-radius:8px; background:#fff; color:var(--ink); min-width:168px; text-align:center; }

/* ---- header band (seasonal) — produce bigger, fills the space ---- */
.hband { border:1px solid var(--hairline); border-radius:10px; overflow:hidden; margin-bottom:14px; }
.hband__scene { height:118px; display:flex; align-items:flex-end; padding:0 10px 10px; position:relative; }
.season-spring .hband__scene { background:linear-gradient(180deg,#f3f8ec,var(--band-spring)); }
.season-summer .hband__scene { background:linear-gradient(180deg,#f3f6e9,var(--band-summer)); }
.season-autumn .hband__scene { background:linear-gradient(180deg,#fbf2df,var(--band-autumn)); }
.season-winter .hband__scene { background:linear-gradient(180deg,#f2f6f8,var(--band-winter)); }
.hband__produce { width:100%; display:flex; flex-wrap:wrap; justify-content:center; align-content:center;
  gap:1px 10px; font-size:27px; line-height:1.05; max-height:100%; overflow:hidden;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.12)); }
.hband__produce span:nth-child(even){ font-size:22px; }
.hband__produce { cursor:pointer; }
.produce-panel { padding:6px 12px; font-size:11px; line-height:1.7; color:var(--ink); background:#f7f4ec; border-top:1px solid var(--hairline); }
.hband__sun { position:absolute; top:12px; right:16px; font-size:22px; }
.hband__tip { background:#eef4e2; border-top:1px solid #d6e2c0; padding:6px 12px;
  font-size:10px; color:#4f6a36; font-style:italic; }
.hband__title { display:flex; align-items:baseline; gap:12px; padding:8px 12px 10px; flex-wrap:wrap; }
.hband__month { font-size:28px; font-weight:800; color:var(--title-green); line-height:1; }
.hband__year { font-size:15px; color:var(--ink-soft); font-weight:600; }
.hband__season { margin-left:auto; font-size:14px; color:var(--season-green); font-style:italic; }
.legend { display:flex; gap:5px 12px; font-size:9px; align-items:center; flex-wrap:wrap; }
.legend i { width:12px; height:12px; border-radius:50%; display:inline-block; vertical-align:-2px; margin-right:3px; }

/* ---- day rows ---- (grid: marker | body | RIGHT[birthdays+note] | edge) */
.days { border:1px solid var(--hairline); border-radius:10px; overflow:hidden; background:var(--paper); }
.d-row { position:relative; display:grid; grid-template-columns:26px 1fr minmax(0,30%) var(--phw,20px) 6px 14px; gap:0 9px;
  align-items:center; min-height:40px; padding:5px 8px; border-bottom:1px solid var(--hairline); }
.d-row:last-child { border-bottom:0; }
.d-row.is-vacation { background:var(--bg-vacation); }
.d-row.is-weekend  { background:var(--bg-weekend); }
.d-row.is-holiday  { background:var(--bg-holiday); }
/* keep Sa/So visible even on holidays / vacation (deeper shade) */
.d-row.is-holiday.is-weekend  { background:#f1d4d6; }
.d-row.is-vacation.is-weekend { background:#f6ecc2; }
/* weekday zebra, anchored to Monday (identical every week); weekends stay uniform */
.d-row.zeb { box-shadow: inset 0 0 0 100vmax rgba(0,0,0,.025); }

.mark { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; color:var(--ink); }
.mark.cat-top{background:var(--mark-top);} .mark.cat-gut{background:var(--mark-gut);}
.mark.cat-leiw{background:var(--mark-leiw);} .mark.cat-wurzel{background:var(--mark-wurzel);}
.mark.cat-meiden{background:transparent;border:1.5px solid var(--mark-meiden-edge);color:var(--ink-soft);}
.mark.cat-none{background:transparent;}
.mark.king{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--mark-top-ring);}
.mark.sun{color:var(--sunday-num);}

.d-body { min-width:0; display:flex; flex-direction:column; gap:1px; }
.d-meta { display:flex; align-items:center; gap:7px; font-size:11px; }
.d-meta .wd { font-weight:700; }
.d-meta .cat { font-size:9px; color:var(--ink-soft); }
.d-moon { width:14px; height:14px; border-radius:50%; display:inline-block; background:#f0e4b8;
  border:1px solid #cdbf86; position:relative; overflow:hidden; }
.d-moon.new{background:#3a3a36;border-color:#2a2a27;}
.d-moon.first::after,.d-moon.last::after{content:"";position:absolute;top:-1px;bottom:-1px;width:50%;background:#3a3a36;}
.d-moon.first::after{right:0;} .d-moon.last::after{left:0;}
.d-sun { font-size:9px; color:var(--suntime-amber); font-style:italic; }
.evt { font-size:11px; font-weight:500; display:flex; gap:6px; align-items:baseline; }
.evt::before{content:"■";font-size:7px;line-height:1.7;}
.evt.concert{color:var(--event-concert);} .evt.fest{color:var(--event-fest);} .evt.fest::before{content:"✤";}
.evt.holiday{color:var(--event-holiday);font-weight:700;} .evt.vac{color:var(--ink-soft);font-style:italic;}
.evt.celtic{color:var(--celtic-brown);font-style:italic;} .evt.celtic::before{content:"✣";}
/* gaelic wheel fest — distinct brown badge so it stands out on busy days */
.evt.wheel{font-style:normal;font-weight:700;background:#efe3cf;border:1px solid #e0cfa8;
  border-radius:6px;padding:1px 7px 1px 5px;align-self:flex-start;margin-bottom:2px;}
.evt.astro{color:var(--astro-blue);font-style:italic;} .evt.astro::before{content:"✤";}

/* RIGHT side: birthdays (giftbox) above the handwritten note */
.d-right { justify-self:end; align-self:center; display:flex; flex-direction:column; align-items:flex-end;
  gap:1px; text-align:right; min-width:0; }
.bday { font-size:12px; color:var(--gift); font-weight:600; display:flex; gap:4px; align-items:baseline; justify-content:flex-end; max-width:100%; }
.bday::before { content:"🎁"; font-size:12px; }
.bday b { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:14ch; }
.d-note { font-family:"Caveat","Segoe Print","Bradley Hand",cursive; font-size:20px; line-height:1.05;
  color:var(--note-ink); word-break:break-word; }
/* two continuous edge lanes: Knuedeler (green) + Glacis (orange) */
.d-edge { align-self:stretch; display:flex; gap:2px; justify-content:flex-end; align-items:stretch; }
.lane { width:4px; background:transparent; }
.lane.on.pg { background:var(--edge-guillaume); }   /* Knuedeler — Place Guillaume */
.lane.on.gl { background:var(--edge-traffic); }     /* Glacis — Schueberfouer / city traffic */
/* personal-holiday lane — editable ranges with a vertical name along the line */
/* Congé = parallel coloured bands (one sub-lane per overlapping range), name inside */
.ph-lane { align-self:stretch; display:flex; gap:1px; }
.phslot { position:relative; flex:1; border-radius:3px; }
.ph-name { position:absolute; top:4px; left:0; right:0; margin:0 auto; writing-mode:vertical-rl; text-orientation:mixed;
  font-size:11px; font-weight:700; color:#fff; white-space:nowrap; overflow:visible; pointer-events:none; text-align:center;
  text-shadow:0 1px 1px rgba(0,0,0,.2); }
/* public-holiday lane — set apart from the circulation lanes (mid-right) */
.hd-lane { align-self:stretch; background:transparent; border-radius:2px; }
.hd-lane.on { background:var(--holiday-line); }
.edge-legend { display:flex; gap:16px; font-size:10px; color:var(--ink-soft); margin:0 2px 10px; }
.edge-legend i { display:inline-block; width:4px; height:12px; border-radius:1px; vertical-align:-2px; margin-right:5px; }
.edge-legend .pg { background:var(--edge-guillaume); }
.edge-legend .gl { background:var(--edge-traffic); }
.edge-legend .hd { background:var(--holiday-line); }
.edge-legend .ph { background:var(--perso-line); }
/* personal-holiday range editor */
.perso-list { max-width:580px; margin:0 auto; }
.ph-edit { display:grid; grid-template-columns:1fr 1fr 1.3fr 30px; gap:6px; align-items:center; margin-bottom:6px; }
.ph-edit input { font:inherit; font-size:13px; padding:5px 6px; border:1px solid var(--hairline); border-radius:6px; width:100%; background:#fff; }
.ph-edit .dwrap { display:flex; gap:3px; align-items:center; }
.ph-edit .dwrap input { flex:1; width:auto; }
.ph-edit .cal { flex:0 0 auto; width:28px; height:30px; border:1px solid var(--hairline); background:#fff; border-radius:6px; cursor:pointer; }
.ph-edit .cal:hover { background:#f0f4f1; }
.ph-edit .del { border:1px solid var(--hairline); background:#fff; border-radius:6px; cursor:pointer; color:var(--event-holiday); height:30px; }
/* Bréckendeg — dashed blue line + arrow, just left of the lanes (v1 parity) */
.bridge { position:absolute; right:18px; top:50%; transform:translateY(-50%); height:62%;
  border-left:1.6px dashed var(--bridge-blue); }
.bridge::after { content:"▸"; position:absolute; right:-7px; top:50%; transform:translateY(-50%);
  color:var(--bridge-blue); font-size:10px; }

/* ---- overview footer ---- */
.ov { border:1px solid var(--hairline); border-radius:6px; padding:8px 12px; margin-top:10px; background:var(--paper); }
.ov h3 { font-size:11px; font-weight:800; color:var(--heading-olive); margin:0 0 4px; }
.ov.hair h3 { color:var(--title-green); }
.ov p { font-size:11px; margin:0; line-height:1.5; }
.ov .top { color:#9a7600; font-weight:700; }

/* ---- yearly editable views (birthdays + notes) ---- */
.intro { text-align:center; color:var(--ink-soft); font-size:12px; margin:0 0 8px; line-height:1.5; }
.year-tools { display:flex; gap:8px; justify-content:center; margin:0 0 14px; flex-wrap:wrap; }
.year-tools button { font:inherit; font-size:12px; font-weight:600; border:1px solid var(--hairline);
  background:#fff; border-radius:7px; padding:6px 12px; cursor:pointer; color:var(--ink-soft); }
.year-tools button:hover { background:#f4f4ef; }

.byear { display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:12px; align-items:start; }
.bm { border:1px solid var(--hairline); border-radius:10px; overflow:hidden; background:var(--paper); }
.bm__h { padding:7px 12px; font-weight:800; color:#3c4a2e; display:flex; justify-content:space-between; align-items:baseline; }
.bm.season-spring .bm__h{background:var(--band-spring);} .bm.season-summer .bm__h{background:var(--band-summer);}
.bm.season-autumn .bm__h{background:var(--band-autumn);} .bm.season-winter .bm__h{background:var(--band-winter);}
.bm__h small { font-weight:600; color:#5a6647; font-style:italic; }
.bm-rows { padding:6px 12px 2px; display:flex; flex-direction:column; gap:5px; }
.bm-edit { display:grid; grid-template-columns:48px 1fr 30px; gap:6px; align-items:center; }
.bm-edit input { font:inherit; font-size:13px; padding:5px 6px; border:1px solid var(--hairline);
  border-radius:6px; width:100%; background:#fff; }
.bm-edit .dy-in { text-align:center; }
.bm-edit .del { border:1px solid var(--hairline); background:#fff; border-radius:6px; cursor:pointer;
  color:var(--event-holiday); height:30px; font-size:13px; }
.bm-edit .del:hover { background:#f8e4e4; }
.bm-empty { color:var(--ink-soft); font-style:italic; font-size:12px; padding:2px 0 4px; }
.add-row { margin:6px 12px 10px; font:inherit; font-size:12px; font-weight:600; color:var(--gift);
  background:#fbeede; border:1px solid var(--gift); border-radius:7px; padding:5px 10px; cursor:pointer; }
.add-row:hover { filter:brightness(.98); }
.bm .warn { color:var(--event-holiday); font-size:11px; margin:0 12px 8px; }
.bm .warn:empty { display:none; }

footer { text-align:center; color:var(--ink-soft); font-size:11px; padding:24px 16px; }
.hidden { display:none; }

/* family login overlay (lexamil subdomain) */
.fam-login { position:fixed; inset:0; background:rgba(251,247,239,.97); z-index:60;
  display:flex; align-items:center; justify-content:center; padding:20px; }
.fam-box { background:#fff; border:1px solid var(--hairline); border-radius:14px; padding:24px;
  max-width:360px; width:100%; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.18); }
.fam-box h2 { color:var(--title-green); margin:0 0 8px; font-size:20px; }
.fam-box p { font-size:12px; color:var(--ink-soft); margin:0 0 14px; line-height:1.5; }
.fam-box input { font:inherit; font-size:15px; padding:10px 12px; border:1px solid var(--hairline);
  border-radius:8px; width:100%; margin-bottom:8px; }
.fam-box .fbtn { font:inherit; font-weight:700; cursor:pointer; border:1px solid var(--title-green);
  background:var(--title-green); color:#fff; border-radius:8px; padding:10px 18px; width:100%; }
.fam-err { color:var(--event-holiday); min-height:16px; font-weight:600; font-size:12px; }

/* ---- A3 print booklet: 2 months per portrait sheet (v1 layout, bolder/contrasted) ---- */
#print-root { display:none; }
@media print {
  @page { size:A3 portrait; margin:8mm; }   /* A3 portrait is the default paper size */
  * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }  /* keep shades/lanes in PDF */
  html, body { width:281mm; }               /* A3 width − margins, locks the browser to A3 */
  body { background:#fff; }
  body.printing > *:not(#print-root) { display:none !important; }
  body.printing #print-root { display:block; width:281mm; }
  .sheet { display:flex; gap:7mm; page-break-after:always; width:281mm; height:402mm; overflow:hidden; }
  .sheet:last-child { page-break-after:auto; }
  .pcol { flex:1 1 0; min-width:0; border:1px solid #c8ccd0; border-radius:6px; overflow:hidden; }
  .pcol .hband { margin:0; border:0; border-bottom:1px solid #c8ccd0; border-radius:0; }
  .pcol .hband__scene { height:44px; }
  .pcol .hband__tip { font-size:8pt; }
  .pcol .hband__month { font-size:18pt; }
  .pcol .legend, .pcol .edge-legend { display:none; }
  /* uniform cell height sized to the A3 sheet — all 31 days equal, overflow clipped */
  .pcol .days { display:flex; flex-direction:column; }
  .pcol .d-row { height:10.8mm; min-height:0; overflow:hidden; padding:1px 5px; }
  .pcol .mark { width:18px; height:18px; font-size:11pt; font-weight:800; }
  .pcol .d-meta .wd { font-weight:800; }
  .pcol .d-meta, .pcol .d-sun, .pcol .evt { font-size:8.2pt; }
  .pcol .evt { font-weight:600; }
  .pcol .d-note { font-size:13pt; }
  .pcol .ov { font-size:8pt; padding:5px 8px; }
  .pcol .ov h3 { font-size:8.5pt; }
}