/* ══════════════════════════════════════════════════════════════════
   FireClouds Console — Frizbee Activity Calendar
   Uses the Atlassian tokens from console.css (--n0…--n900, --b400).

   DESIGN INTENT — this is the landing page, so it has to answer three
   questions before you have finished looking at it:
       1. What is on TODAY?     → orange, ringed, unmissable
       2. What is coming SOON?  → red / amber / blue countdowns
       3. Which days are BUSY?  → tinted cells, saturated chips
   Everything else — empty days, weekends, the trailing month — is
   pushed down the contrast ladder so it stops competing for attention.
   ══════════════════════════════════════════════════════════════════ */

/* ── toolbar ───────────────────────────────────────────────────── */
.fzcal-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.fzcal-nav{display:flex;align-items:center;gap:4px}
.fzcal-arrow{width:34px;height:34px;border:1px solid var(--n30);background:var(--n0);border-radius:var(--radius);
  color:var(--n400);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1}
.fzcal-arrow:hover{background:var(--b50);color:var(--b500);border-color:var(--b400)}
.fzcal-title{font-size:22px;font-weight:700;letter-spacing:-.4px;color:var(--n900);min-width:190px;padding:0 4px}
.fzcal-title span{color:var(--n200);font-weight:500}
.fzcal-seg{display:inline-flex;border:1px solid var(--n30);border-radius:var(--radius);overflow:hidden;background:var(--n0)}
.fzcal-seg button{border:none;background:transparent;padding:0 13px;height:34px;font-size:13px;font-weight:600;
  color:var(--n300);cursor:pointer;border-right:1px solid var(--n30)}
.fzcal-seg button:last-child{border-right:none}
.fzcal-seg button:hover{background:var(--n20);color:var(--n800)}
.fzcal-seg button.on{background:var(--b400);color:#fff}
.fzcal-spacer{flex:1}
.fzcal-bar select,.fzcal-bar input{height:34px;border:1px solid var(--n30);border-radius:var(--radius);
  padding:0 9px;font:inherit;background:var(--n0);color:var(--n800)}
.fzcal-bar input:focus,.fzcal-bar select:focus{outline:none;border-color:var(--b400);box-shadow:0 0 0 1px var(--b400) inset}

/* ── legend / category filter ──────────────────────────────────── */
.fzcal-legend{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.fzcal-lg{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--n30);background:var(--n0);
  border-radius:16px;padding:5px 11px 5px 9px;font-size:12px;font-weight:600;color:var(--n400);
  cursor:pointer;user-select:none;transition:border-color .12s,color .12s,opacity .12s}
.fzcal-lg:hover{border-color:var(--n200);color:var(--n800)}
.fzcal-lg i{width:10px;height:10px;border-radius:3px;flex:none}
.fzcal-lg.off{opacity:.34}
.fzcal-lg.solo{border-color:var(--b400);color:var(--b500);background:var(--b50)}
.fzcal-lg .n{background:var(--n800);color:#fff;border-radius:9px;min-width:17px;padding:0 5px;
  font-size:10px;font-weight:700;line-height:16px;text-align:center}
.fzcal-lg.solo .n{background:var(--b400)}

/* ── month grid ────────────────────────────────────────────────── */
.fzcal-wrap{background:var(--n0);border:1px solid var(--n40);border-radius:6px;overflow:hidden;
  box-shadow:0 1px 3px rgba(9,30,66,.08)}
.fzcal-dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--n800)}
.fzcal-dow div{padding:9px 11px;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:#fff;text-align:left;opacity:.92}
.fzcal-dow div.we{color:#FFD5A8;opacity:1}
.fzcal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(126px,auto)}

.fzcal-day{border-right:1px solid var(--n30);border-bottom:1px solid var(--n30);padding:7px 8px 9px;min-width:0;
  position:relative;cursor:pointer;transition:background .12s ease,box-shadow .12s ease;
  display:flex;flex-direction:column;gap:4px;background:var(--n0)}
.fzcal-day:nth-child(7n){border-right:none}
.fzcal-day:hover{background:var(--b50);box-shadow:inset 0 0 0 1px var(--b75)}

/* quiet: days with nothing on them, and days outside this month */
.fzcal-day .fzcal-dnum{color:var(--n300)}
.fzcal-day.we:not(.has){background:#FAFBFC}
.fzcal-day.out{background:var(--n20)}
.fzcal-day.out .fzcal-dnum{color:var(--n40)}
.fzcal-day.out:hover{background:var(--n20);box-shadow:none}

/* loud: days that carry something. Tinted in the event's own colour,
   with a solid rail across the top so a busy week reads as a block. */
.fzcal-day.has{background:var(--d-tint,var(--n0))}
.fzcal-day.has::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--d-color,var(--b400))}
.fzcal-day.has .fzcal-dnum{color:#fff;background:var(--d-color,var(--b400));font-weight:700}
.fzcal-day.has:hover{background:var(--d-tint,var(--b50));box-shadow:inset 0 0 0 2px var(--d-color,var(--b400))}

/* loudest: today */
.fzcal-day.today{background:#FFF4E0}
.fzcal-day.today::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--o400);pointer-events:none;z-index:1}
.fzcal-day.today .fzcal-dnum{background:var(--o400);color:#fff;font-weight:800;box-shadow:0 2px 6px rgba(229,105,16,.4)}
.fzcal-day.today:hover{background:#FFEDCC}
.fzcal-day.sel{box-shadow:inset 0 0 0 2px var(--b400);z-index:2}

.fzcal-dtop{display:flex;align-items:center;gap:6px;margin-bottom:1px}
.fzcal-dnum{font-size:13.5px;font-weight:600;width:26px;height:26px;display:flex;align-items:center;
  justify-content:center;border-radius:50%;flex:none;transition:background .12s}

/* countdown tag on the cell — colour carries the urgency */
.fzcal-dtag{font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;margin-left:auto;
  white-space:nowrap;padding:2px 6px;border-radius:3px;background:var(--n20);color:var(--n300);z-index:2}
.fzcal-dtag.now{background:var(--r500);color:#fff}
.fzcal-dtag.soon{background:#FFECEB;color:#AE2E24}
.fzcal-dtag.near{background:#FFF0B3;color:#533F04}

/* event chips */
.fzcal-chip{display:flex;align-items:center;gap:5px;font-size:11.5px;line-height:1.4;padding:4px 7px;
  border-radius:4px;background:var(--c-bg,#E9F2FF);color:var(--c-fg,#09326C);
  border-left:4px solid var(--c-fg,#0C66E4);cursor:pointer;min-width:0;overflow:hidden;
  box-shadow:0 1px 1px rgba(9,30,66,.09);position:relative;z-index:2}
.fzcal-chip:hover{filter:brightness(.95);box-shadow:0 2px 5px rgba(9,30,66,.18)}
.fzcal-chip .em{flex:none;font-size:11px}
.fzcal-chip .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.fzcal-chip .tm{flex:none;font-size:10px;font-weight:700;opacity:.8}
.fzcal-chip.done,.fzcal-chip.cancelled{opacity:.5;text-decoration:line-through;box-shadow:none}
.fzcal-more{font-size:10.5px;color:var(--n400);font-weight:700;padding:1px 6px;cursor:pointer;position:relative;z-index:2}
.fzcal-more:hover{color:var(--b400);text-decoration:underline}
.fzcal-add{position:absolute;right:5px;bottom:5px;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--n30);background:var(--n0);color:var(--n300);font-size:14px;line-height:1;
  display:none;align-items:center;justify-content:center;cursor:pointer;z-index:3}
.fzcal-day:hover .fzcal-add{display:flex}
.fzcal-add:hover{background:var(--b400);color:#fff;border-color:var(--b400)}

/* week strip */
.fzcal-grid.week{grid-auto-rows:minmax(330px,auto)}
.fzcal-grid.week .fzcal-chip{font-size:12.5px;padding:6px 8px}

/* ── side panel ────────────────────────────────────────────────── */
.fzcal-side{background:var(--n0);border:1px solid var(--n40);border-radius:6px;padding:15px 16px;
  position:sticky;top:0;box-shadow:0 1px 3px rgba(9,30,66,.08)}
.fzcal-side h3{margin:0 0 3px;font-size:15px;font-weight:700;color:var(--n900);letter-spacing:-.2px}
.fzcal-side .sd{font-size:12px;color:var(--n300);margin-bottom:13px}
.fzcal-ev{border:1px solid var(--n30);border-left:4px solid var(--c-fg,#0C66E4);border-radius:5px;
  padding:10px 12px;margin-bottom:9px;cursor:pointer;background:var(--n0);transition:box-shadow .12s,background .12s}
.fzcal-ev:hover{box-shadow:0 3px 10px rgba(9,30,66,.14);background:var(--n10)}
.fzcal-ev .t{font-size:14px;font-weight:700;color:var(--n900);display:flex;align-items:center;gap:6px}
.fzcal-ev .m{font-size:11.5px;color:var(--n300);margin-top:3px;line-height:1.5}
.fzcal-ev .g{font-size:12px;color:var(--n700,#42526E);margin-top:7px;background:var(--n10);
  border-left:3px solid var(--n40);border-radius:3px;padding:6px 8px;line-height:1.45}

/* ── countdown pill — the loudest signal on the page ───────────── */
.fzcal-count{display:inline-flex;align-items:baseline;gap:4px;font-weight:800;font-size:10.5px;letter-spacing:.4px;
  text-transform:uppercase;padding:3px 8px;border-radius:4px;background:var(--n20);color:var(--n400);white-space:nowrap}
.fzcal-count.d0{background:var(--r500);color:#fff;box-shadow:0 1px 4px rgba(202,53,33,.4)}
.fzcal-count.d1{background:#FFECEB;color:#AE2E24;border:1px solid #FFB4AB}
.fzcal-count.d3{background:#FFF0B3;color:#533F04;border:1px solid #F5CD47}
.fzcal-count.d7{background:var(--b50);color:var(--b500);border:1px solid #CCE0FF}
.fzcal-count.past{background:var(--n20);color:var(--n200)}

/* ── progress ──────────────────────────────────────────────────── */
.fzcal-prog{height:8px;border-radius:4px;background:var(--n20);overflow:hidden;margin-top:7px;
  box-shadow:inset 0 1px 2px rgba(9,30,66,.1)}
.fzcal-prog i{display:block;height:100%;border-radius:4px;background:var(--g400);transition:width .3s ease}
.fzcal-prog.low i{background:var(--r400)}
.fzcal-prog.mid i{background:var(--y400)}

/* ── reminder ladder ───────────────────────────────────────────── */
.fzcal-ladder{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.fzcal-rd{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--n30);border-radius:15px;
  padding:5px 11px;font-size:11.5px;font-weight:700;color:var(--n400);cursor:pointer;user-select:none;background:var(--n0)}
.fzcal-rd:hover{border-color:var(--b400);color:var(--b400)}
.fzcal-rd.on{background:var(--b400);border-color:var(--b400);color:#fff}
.fzcal-rd.sent{background:#DFFCEF;border-color:#7EE2B8;color:#164B35;cursor:default}
.fzcal-rd.sent:hover{border-color:#7EE2B8;color:#164B35}
.fzcal-rd.due{background:#FFF0B3;border-color:#E2B203;color:#533F04}

/* ══════════════════════════════════════════════════════════════════
   IMAGES — never crop an event photo
   Event artwork is usually a wide banner; object-fit:cover was slicing
   the top and bottom off. Everything uses `contain` over a soft
   backdrop, so the letterbox reads as a deliberate frame.
   ══════════════════════════════════════════════════════════════════ */
.fzcal-shot{width:100%;display:block;border-radius:5px;border:1px solid var(--n30);
  background:#EDF0F4;object-fit:contain;cursor:zoom-in}
.fzcal-shot:hover{border-color:var(--b400)}
.fzcal-side .fzcal-shot{height:112px;margin-top:8px}
.fzcal-hero{width:100%;height:auto;max-height:300px;object-fit:contain;background:#EDF0F4;
  border-radius:6px;border:1px solid var(--n30);display:block;margin-bottom:10px;cursor:zoom-in}
.fzcal-hero:hover{border-color:var(--b400)}
.fzcal-gal{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.fzcal-gal figure{margin:0;position:relative;width:104px;height:76px;border-radius:5px;overflow:hidden;
  border:1px solid var(--n30);background:#EDF0F4}
.fzcal-gal img{width:100%;height:100%;object-fit:contain;display:block;cursor:zoom-in}
.fzcal-gal .rm{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:none;
  background:rgba(9,30,66,.72);color:#fff;font-size:12px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.fzcal-gal .rm:hover{background:var(--r500)}
.fzcal-strip{display:flex;gap:6px;flex-wrap:wrap;margin:-2px 0 12px}
.fzcal-strip img{width:62px;height:46px;object-fit:contain;background:#EDF0F4;border:1px solid var(--n30);
  border-radius:4px;cursor:pointer;display:block}
.fzcal-strip img:hover,.fzcal-strip img.on{border-color:var(--b400);box-shadow:0 0 0 1px var(--b400)}
.fzcal-row-img{width:58px;height:42px;object-fit:contain;background:#EDF0F4;border-radius:4px;
  border:1px solid var(--n30);display:block;cursor:zoom-in}

/* ── list / agenda view ────────────────────────────────────────── */
.fzcal-dot{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}
.fzcal-cat{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--n400);white-space:nowrap}

/* ── checklist editor ──────────────────────────────────────────── */
.fzcal-ck{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--n30);
  border-radius:4px;margin-bottom:6px;background:var(--n0)}
.fzcal-ck input[type=text]{flex:1;border:none;outline:none;font:inherit;font-size:13px;background:transparent;
  color:var(--n800);height:auto;padding:0}
.fzcal-ck input[type=checkbox]{width:16px;height:16px;accent-color:var(--g400);cursor:pointer;flex:none}
.fzcal-ck.done input[type=text]{text-decoration:line-through;color:var(--n200)}
.fzcal-ck .x{border:none;background:transparent;color:var(--n200);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.fzcal-ck .x:hover{color:var(--r500)}

/* ── setup notice ──────────────────────────────────────────────── */
.fzcal-setup{background:#FFF7E6;border:1px solid #F5CD47;border-radius:6px;padding:18px 20px;line-height:1.6}
.fzcal-setup h3{margin:0 0 8px;font-size:15px;color:#533F04}
.fzcal-setup code{background:#fff;border:1px solid #F5CD47;border-radius:3px;padding:2px 6px;
  font-family:var(--mono);font-size:12px}

#modalBack .modal.fzcal-modal{width:min(760px,96vw)}

/* ══════════════════════════════════════════════════════════════════
   TOP-BAR QUICK ACCESS  (#calPill, in .gn-right)
   ══════════════════════════════════════════════════════════════════ */
.cal-pill{position:relative;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;
  border:1px solid var(--n30);border-radius:999px;background:transparent;color:var(--n400);font:inherit;
  font-weight:600;font-size:12.5px;cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s}
.cal-pill:hover{border-color:var(--n200);background:var(--n10)}
.cal-pill svg{width:15px;height:15px;flex:none}
.cal-pill.soon{border-color:#CCE0FF;background:var(--b50);color:var(--b500)}
.cal-pill.today{border-color:#FFB878;background:#FFF4E0;color:#A54800}
.cal-pill.today svg{animation:calNudge 2.6s ease-in-out infinite}
@keyframes calNudge{0%,88%,100%{transform:none}92%{transform:rotate(-9deg)}96%{transform:rotate(9deg)}}
.cal-pill-badge{min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--o400);color:#fff;
  font-size:10px;font-weight:800;line-height:17px;text-align:center}
.cal-pill.soon .cal-pill-badge{background:var(--b400)}
@media (max-width:760px){.cal-pill .cal-pill-txt{display:none}.cal-pill{padding:0 9px;gap:4px}}

/* ══════════════════════════════════════════════════════════════════
   LIGHTBOX
   ══════════════════════════════════════════════════════════════════ */
.fzcal-lb{position:fixed;inset:0;z-index:9000;background:rgba(9,30,66,.86);display:none;
  align-items:center;justify-content:center;padding:32px;flex-direction:column;gap:14px}
.fzcal-lb.show{display:flex}
.fzcal-lb img{max-width:min(1100px,92vw);max-height:80vh;object-fit:contain;border-radius:6px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);background:#fff}
.fzcal-lb-cap{color:#fff;font-size:13px;font-weight:600;text-align:center;opacity:.92}
.fzcal-lb-x{position:absolute;top:16px;right:20px;width:38px;height:38px;border-radius:50%;border:none;
  background:rgba(255,255,255,.14);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.fzcal-lb-x:hover{background:rgba(255,255,255,.26)}
.fzcal-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:none;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.fzcal-lb-nav:hover{background:rgba(255,255,255,.26)}
.fzcal-lb-nav.prev{left:18px}.fzcal-lb-nav.next{right:18px}
.fzcal-lb-nav[hidden]{display:none}

/* ── responsive ────────────────────────────────────────────────── */
@media(max-width:900px){.fzcal-side{position:static}}
@media(max-width:760px){
  .fzcal-title{font-size:17px;min-width:0}
  .fzcal-grid{grid-auto-rows:minmax(88px,auto)}
  .fzcal-day{padding:4px 4px 6px;gap:3px}
  .fzcal-dow div{padding:7px 5px;font-size:9.5px;letter-spacing:.4px}
  .fzcal-dnum{font-size:12px;width:22px;height:22px}
  .fzcal-chip{font-size:9.5px;padding:2px 4px;gap:3px;border-left-width:3px}
  .fzcal-chip .tm,.fzcal-chip .em{display:none}
  .fzcal-dtag{display:none}
  .fzcal-add{display:none!important}
  .fzcal-grid.week{grid-template-columns:repeat(1,minmax(0,1fr));grid-auto-rows:auto}
  .fzcal-grid.week .fzcal-day{border-right:none}
  .fzcal-seg button{padding:0 9px;font-size:12px}
  .fzcal-side .fzcal-shot{height:140px}
  .fzcal-lb{padding:14px}
  .fzcal-lb img{max-height:70vh}
}

/* ══════════════════════════════════════════════════════════════════
   LAYOUT — grid beside the day panel on a desktop, stacked on a phone.
   Previously these two used inline grid-column values, which no media
   query could override, so a phone got a quarter-width side panel with
   one word per line.
   ══════════════════════════════════════════════════════════════════ */
.fzcal-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.fzcal-main{min-width:0}
.fzcal-aside{min-width:0}
@media(max-width:1100px){.fzcal-layout{grid-template-columns:minmax(0,1fr) 260px}}
@media(max-width:900px){
  .fzcal-layout{grid-template-columns:1fr}
  .fzcal-aside{order:2}
  .fzcal-side{position:static}
}

/* ══════════════════════════════════════════════════════════════════
   PHONE — a 7-column month on a 360px screen gives each day about
   45px, which is not enough for a text chip. Below 640px the chips
   become COLOURED DOTS: the grid still answers "which days are busy",
   and tapping a day opens the full detail in the panel underneath.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:640px){
  .fzcal-grid{grid-auto-rows:minmax(62px,auto)}
  .fzcal-day{padding:3px 2px 5px;gap:2px;align-content:flex-start;
    flex-direction:row;flex-wrap:wrap;justify-content:center}
  .fzcal-dtop{width:100%;justify-content:center;margin:0}
  .fzcal-dnum{width:24px;height:24px;font-size:12.5px}

  /* chip → dot */
  .fzcal-chip{width:7px;height:7px;min-width:7px;padding:0;border-radius:50%;
    border-left:none;background:var(--c-fg);box-shadow:none;margin:0 1px}
  .fzcal-chip .tx,.fzcal-chip .em,.fzcal-chip .tm{display:none}
  .fzcal-chip.done,.fzcal-chip.cancelled{opacity:.4;text-decoration:none}
  .fzcal-more{font-size:9px;padding:0 2px;width:100%;text-align:center}

  /* the day header row is tighter, so keep the weekday letters short */
  .fzcal-dow div{text-align:center;padding:6px 2px;font-size:9px;letter-spacing:0}

  /* a tapped day should be obvious, since its detail is now below the fold */
  .fzcal-day.sel{box-shadow:inset 0 0 0 2px var(--b400);background:var(--b50)}

  /* toolbar stacks into something thumb-sized */
  .fzcal-bar{gap:6px}
  .fzcal-title{width:100%;order:-1;font-size:18px;text-align:center;min-width:0}
  .fzcal-nav{order:1}
  .fzcal-bar #fzToday{order:2}
  .fzcal-spacer{display:none}
  .fzcal-bar #fzQ{order:5;width:100%;min-width:0}
  .fzcal-bar #fzMonthSel,.fzcal-bar #fzYearSel{order:3;flex:1;min-width:0}
  .fzcal-bar #fzStatus{order:6;flex:1}
  .fzcal-seg{order:7;width:100%}
  .fzcal-seg button{flex:1;padding:0 4px}


  /* day panel reads as a card, not a squeezed column */
  .fzcal-side{padding:13px 14px}
  .fzcal-ev .t{flex-wrap:wrap;row-gap:4px}
  .fzcal-side .fzcal-shot{height:150px}
}

/* very small phones: drop the weekday labels to one letter */
@media(max-width:380px){
  .fzcal-dow div{font-size:0}
  .fzcal-dow div::first-letter{font-size:9px}
  .fzcal-grid{grid-auto-rows:minmax(56px,auto)}
}

/* ══════════════════════════════════════════════════════════════════
   LEGEND — one scrollable row on anything narrow.
   Nine categories wrapped into five or six rows on a phone, pushing the
   calendar itself off the screen. They now sit in a single line that
   scrolls sideways, with a soft fade on the right so it is obvious
   there is more to reach.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .fzcal-legend{position:relative;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;
    scroll-snap-type:x proximity;
    /* fade the right edge to advertise the overflow */
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%);
    mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%)}
  .fzcal-legend::-webkit-scrollbar{display:none}
  .fzcal-lg{flex:none;scroll-snap-align:start;padding:5px 10px 5px 8px}
  /* the clear-filter chip should stay reachable at the end of the row */
  #fzClearCat{margin-right:22px}
}

/* ══════════════════════════════════════════════════════════════════
   YEAR TABLE — every event of one year, under the month grid.
   The grid answers "what is on this month". This answers "what is
   coming all year", which is the view you plan campaigns from.
   ══════════════════════════════════════════════════════════════════ */
.fzy-wrap{margin-top:18px;background:var(--n0);border:1px solid var(--n40);border-radius:6px;
  overflow:hidden;box-shadow:0 1px 3px rgba(9,30,66,.08)}
.fzy-head{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--n30)}
.fzy-title{font-size:15px;font-weight:600;color:var(--n800)}
.fzy-title b{font-weight:800;color:var(--n900)}
.fzy-years{margin-left:auto;display:flex;align-items:center;gap:6px}

/* kind tabs */
.fzy-tabs{display:flex;gap:6px;padding:10px 16px;border-bottom:1px solid var(--n30);
  background:var(--n10);overflow-x:auto;scrollbar-width:none}
.fzy-tabs::-webkit-scrollbar{display:none}
.fzy-tab{display:inline-flex;align-items:center;gap:7px;flex:none;border:1px solid var(--n30);
  background:var(--n0);border-radius:16px;padding:5px 11px;font:inherit;font-size:12px;font-weight:600;
  color:var(--n400);cursor:pointer;white-space:nowrap}
.fzy-tab:hover{border-color:var(--n200);color:var(--n800)}
.fzy-tab b{background:var(--n20);color:var(--n400);border-radius:9px;min-width:18px;padding:0 5px;
  font-size:10px;font-weight:700;line-height:16px;text-align:center}
.fzy-tab.on{background:var(--b400);border-color:var(--b400);color:#fff}
.fzy-tab.on b{background:rgba(255,255,255,.26);color:#fff}

/* table */
.fzy-scroll{max-height:560px;overflow:auto}
.fzy-table{margin:0}
.fzy-table thead th{position:sticky;top:0;z-index:3;background:var(--n10);
  box-shadow:inset 0 -1px 0 var(--n30)}
/* A quiet divider, not a black bar. One dark band per month was fine with a
   dozen events and overwhelming with one event a month — the screen became a
   ladder of navy stripes with the actual content squeezed between them. */
.fzy-mth td{position:sticky;top:33px;z-index:2;background:var(--n10);
  border-top:1px solid var(--n30);border-bottom:1px solid var(--n30);
  padding:5px 12px!important}
.fzy-mth-n{font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--n400)}
.fzy-mth-c{float:right;font-size:10.5px;font-weight:600;color:var(--n200)}
.fzy-row{cursor:pointer}
.fzy-row:hover{background:var(--b50)}
.fzy-row.past{color:var(--n200)}
.fzy-row.past .fzy-name{color:var(--n300);font-weight:600}
.fzy-row.past .fzy-d b{color:var(--n200)}
.fzy-row.past .fzcal-dot{opacity:.45}
.fzy-row.past .lozenge{opacity:.5}
.fzy-row.today{background:#FFF4E0;box-shadow:inset 3px 0 0 var(--o400)}
.fzy-d{white-space:nowrap;width:58px}
.fzy-d b{font-size:15px;font-weight:800;color:var(--n900);margin-right:5px}
.fzy-d span{font-size:10.5px;color:var(--n300);text-transform:uppercase;font-weight:700}
.fzy-t{min-width:170px}
.fzy-t .fzcal-dot{vertical-align:-1px;margin-right:7px}
.fzy-name{font-weight:700;color:var(--n900)}
.fzy-pic{margin-left:6px;font-size:11px;opacity:.6}
/* Clamp on a word boundary instead of slicing characters; full text on hover. */
.fzy-note{color:var(--n300);font-size:12px;line-height:1.45;max-width:0;width:42%}
.fzy-note span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis}
.fzy-cd{white-space:nowrap;text-align:right}
.fzy-bell{margin-left:6px;font-size:11px}

@media(max-width:900px){
  .fzy-head{flex-wrap:wrap;gap:8px}
  .fzy-years{margin-left:0;width:100%}
  .fzy-scroll{max-height:none}
  .fzy-note{display:none}          /* the campaign column is the first to go */
  .fzy-table thead th:nth-child(4){display:none}
  .fzy-mth td{top:0}
}
@media(max-width:560px){
  .fzy-table thead{display:none}   /* the date+title carry it on a phone */
  .fzy-table th:nth-child(3),.fzy-row td:nth-child(3){display:none}
  .fzy-t{min-width:0}
}

/* ── density: the rows were floating in space ─────────────────── */
.fzy-table td{padding:7px 12px;vertical-align:middle}
.fzy-table thead th{padding:8px 12px;font-size:10px;letter-spacing:.6px}
.fzy-d{width:54px;padding-right:0!important}
.fzy-t{width:26%}
.fzy-table td:nth-child(3){width:110px}
.fzy-cd{width:104px}
.fzy-table .lozenge{font-size:9.5px;padding:2px 7px;letter-spacing:.3px}
.fzy-row + .fzy-row{border-top:1px solid var(--n20)}
.fzy-mth + .fzy-row{border-top:none}

/* ══════════════════════════════════════════════════════════════════
   HEAVY-RAIN WARNINGS
   Shown only for genuinely heavy days. Coonoor rains most days in
   season, so an alert that fires on ordinary rain is one nobody reads.
   ══════════════════════════════════════════════════════════════════ */
.fzr-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:11px 14px;
  border-radius:6px;background:var(--b50);border:1px solid #B3D4FF;color:#09326C}
.fzr-banner.sev{background:#FFF4E0;border-color:#FFB878;color:#A54800}
.fzr-ic{font-size:20px;line-height:1;flex:none}
.fzr-txt{flex:1;min-width:210px;font-size:13px;line-height:1.45}
.fzr-sub{font-size:11.5px;opacity:.75;margin-top:2px}
.fzr-days{display:flex;gap:6px;flex-wrap:wrap}
.fzr-day{display:flex;flex-direction:column;align-items:center;gap:1px;background:rgba(255,255,255,.8);
  border:1px solid rgba(9,30,66,.12);border-radius:5px;padding:5px 10px;min-width:66px}
.fzr-day b{font-size:12px;font-weight:700;white-space:nowrap}
.fzr-day i{font-size:9.5px;font-style:normal;opacity:.7;text-transform:uppercase;letter-spacing:.3px}
.fzr-day u{font-size:12.5px;font-weight:800;text-decoration:none}
.fzr-day.sev{background:#FFEBE6;border-color:#FF9C8F;color:#601E16}

/* the marker in a day cell — a corner drop, never a full wash, so it
   cannot compete with the event colours the grid exists to show */
.fzr-mark{font-size:11px;line-height:1;margin-left:2px;flex:none;opacity:.9}
.fzcal-day.rainy::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:repeating-linear-gradient(90deg,#4C9AFF 0 4px,transparent 4px 8px);pointer-events:none}
.fzcal-day.rainy.today::after{background:var(--o400)}

@media(max-width:640px){
  .fzr-banner{padding:9px 11px;gap:8px}
  .fzr-txt{min-width:0;font-size:12px}
  .fzr-sub{display:none}
  .fzr-day{min-width:58px;padding:4px 7px}
  .fzr-mark{display:none}      /* the underline still marks the day */
}

/* ══════════════════════════════════════════════════════════════════
   THE "COMING UP" COLUMN
   It used to run far past the bottom of the month grid, leaving a wide
   band of empty white beside it. Capped and scrolled instead, so the
   two columns end at roughly the same place.
   ══════════════════════════════════════════════════════════════════ */
.fzcal-side{max-height:640px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.fzcal-side::-webkit-scrollbar{width:6px}
.fzcal-side::-webkit-scrollbar-thumb{background:var(--n30);border-radius:3px}
.fzcal-side::-webkit-scrollbar-track{background:transparent}
@media(max-width:900px){.fzcal-side{max-height:none;overflow:visible}}

/* ══════════════════════════════════════════════════════════════════
   NOTES
   Short, pinned to a day, private or shared. Deliberately quieter than
   events — the grid is for what is happening, notes are for what you
   want to remember about it.
   ══════════════════════════════════════════════════════════════════ */
.fzn-wrap{margin-top:14px;padding-top:12px;border-top:1px solid var(--n30)}
.fzn-head{font-size:10.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  color:var(--n300);margin-bottom:8px}
.fzn-head b{background:var(--n800);color:#fff;border-radius:8px;padding:0 6px;font-size:10px;margin-left:3px}

.fzn{border:1px solid var(--n30);border-left:3px solid var(--n40);border-radius:5px;
  padding:8px 10px;margin-bottom:7px;background:var(--n0)}
.fzn.team{border-left-color:var(--b400);background:var(--b50)}
.fzn.due{box-shadow:0 0 0 2px #F5CD47 inset}
.fzn-top{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.fzn-vis{font-size:9.5px;font-weight:800;letter-spacing:.3px;color:var(--n300);white-space:nowrap}
.fzn.team .fzn-vis{color:var(--b500)}
.fzn-rem{font-size:9.5px;font-weight:700;color:#533F04;background:#FFF0B3;border-radius:3px;padding:1px 5px;white-space:nowrap}
.fzn-x{margin-left:auto;border:none;background:transparent;color:var(--n200);cursor:pointer;
  font-size:13px;line-height:1;padding:0 2px}
.fzn-x:hover{color:var(--r500)}
.fzn-body{font-size:12.5px;line-height:1.5;color:var(--n800);white-space:pre-wrap;word-break:break-word}
.fzn-foot{font-size:10px;color:var(--n200);margin-top:4px}

/* composer */
.fzn-new{margin-top:8px}
.fzn-new textarea{width:100%;border:1px solid var(--n30);border-radius:5px;padding:7px 9px;
  font:inherit;font-size:12.5px;background:var(--n0);color:var(--n800);resize:vertical;min-height:44px}
.fzn-new textarea:focus{outline:none;border-color:var(--b400);box-shadow:0 0 0 1px var(--b400) inset}
.fzn-row{display:flex;align-items:center;gap:5px;margin-top:6px;flex-wrap:wrap}
.fzn-seg{display:inline-flex;align-items:center;cursor:pointer}
.fzn-seg input{position:absolute;opacity:0;width:0;height:0}
.fzn-seg span{display:inline-block;border:1px solid var(--n30);border-radius:13px;padding:3px 9px;
  font-size:11px;font-weight:700;color:var(--n300);background:var(--n0);white-space:nowrap}
.fzn-seg input:checked + span{background:var(--b400);border-color:var(--b400);color:#fff}
.fzn-row input[type=datetime-local]{flex:1;min-width:132px;height:28px;border:1px solid var(--n30);
  border-radius:5px;padding:0 6px;font:inherit;font-size:11px;background:var(--n0);color:var(--n400)}
.fzn-hint{font-size:10px;color:var(--n200);margin-top:5px;line-height:1.45}



/* ══════════════════════════════════════════════════════════════════
   NOTE MARKER ON A DAY CELL
   The first version was a 10px emoji that nobody could see. A filled
   badge with a count reads from across the grid, and the cell itself
   gets a dotted underline so a day with notes is obvious at a glance.
   ══════════════════════════════════════════════════════════════════ */
.fzn-badge{display:inline-flex;align-items:center;gap:2px;font-size:9.5px;font-weight:800;
  line-height:1;padding:2px 5px;border-radius:9px;background:#FFF0B3;color:#533F04;
  border:1px solid #F5CD47;flex:none;margin-left:3px;cursor:help;white-space:nowrap}
.fzn-badge.team{background:var(--b50);color:var(--b500);border-color:#B3D4FF}
.fzcal-day.noted{box-shadow:inset 0 -3px 0 -1px #F5CD47}
.fzcal-day.noted.sel{box-shadow:inset 0 0 0 2px var(--b400)}
@media(max-width:640px){
  .fzn-badge{padding:1px 3px;font-size:8.5px;margin-left:1px}
}

/* ══════════════════════════════════════════════════════════════════
   SIDE COLUMN — the chosen day AND what is coming, not one or the other
   ══════════════════════════════════════════════════════════════════ */
.fzcal-sec + .fzcal-sec{margin-top:16px;padding-top:14px;border-top:2px solid var(--n30)}
.fzcal-sec.second h3{font-size:13.5px;color:var(--n400)}
.fzcal-side{max-height:720px}

/* ══════════════════════════════════════════════════════════════════
   NOTE MARKER ON A DAY CELL
   A faint emoji was invisible against a tinted cell. This is a solid
   pill with real contrast — amber when the notes are yours alone, blue
   when any of them is shared — carrying the count when there is more
   than one. No transparency, so it stays readable on every cell colour:
   white, weekend grey, event tint, today's orange.
   ══════════════════════════════════════════════════════════════════ */
.fzn-badge{display:inline-flex;align-items:center;gap:2px;margin-left:auto;
  background:#B7791F;color:#fff;border:1px solid #8A5A12;
  font-size:9.5px;font-weight:800;line-height:1;letter-spacing:.2px;
  padding:3px 6px;border-radius:4px;white-space:nowrap;flex:none;
  box-shadow:0 1px 2px rgba(9,30,66,.25);cursor:default;z-index:3;position:relative}
.fzn-badge.team{background:#0C66E4;border-color:#09326C}

/* the day itself gets a matching edge, so a noted day reads at a glance
   even before you find the badge */
.fzcal-day.noted::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:#B7791F;pointer-events:none;z-index:2}
.fzcal-day.noted.today::after{background:var(--o400)}

/* the badge shares the header row with the countdown tag; when both are
   present the countdown gives way, since the badge is the rarer signal */
.fzcal-day.noted .fzcal-dtag{margin-left:4px}

/* the Notes heading in the day panel */
.fzn-head{color:#8A5A12}
.fzn-head b{background:#B7791F}

@media(max-width:640px){
  /* no room for text at phone size — keep the colour, drop the count */
  .fzn-badge{padding:3px 4px;font-size:9px}
  .fzn-badge{font-size:0;width:8px;height:8px;border-radius:50%;padding:0}
}

/* ══════════════════════════════════════════════════════════════════
   HEADER, TRIMMED
   The description line, the four KPI cards and the full-width rain
   banner have all gone. What is left is: title, toolbar, calendar.
   The category chips are still there, one click away, rather than
   occupying a permanent row above the grid.
   ══════════════════════════════════════════════════════════════════ */
.fzcal-legend.hide{display:none}
.fzcal-legend{margin-bottom:12px}

/* heavy rain as a pill in the toolbar, not a banner across the page */
.fzr-pill{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 11px;
  border-radius:var(--radius-sm,7px);background:var(--b50);border:1px solid #B3D4FF;
  color:#09326C;font-size:12.5px;font-weight:500;white-space:nowrap;cursor:default;flex:none}
.fzr-pill b{font-weight:700}
.fzr-pill.sev{background:#FFF4E0;border-color:#FFB878;color:#A54800}

/* the calendar gets the room the header gave back */
.fzcal-grid{grid-auto-rows:minmax(138px,auto)}
.fzcal-bar{margin-bottom:10px}

@media(max-width:900px){
  .fzcal-grid{grid-auto-rows:minmax(120px,auto)}
}
@media(max-width:640px){
  .fzr-pill{height:30px;padding:0 8px;font-size:11.5px}
  .fzcal-grid{grid-auto-rows:minmax(62px,auto)}
}