/* assets/css/calendar.css · CAL-SPLIT-1 (DEC-2026-10-243): the Calendar page's rules, moved out of
   index.html unchanged. index.html links this file at the exact place the rules sat inside its first
   <style> block (that block is closed, this file linked, and a new <style> opened), so the cascade order
   is identical. Rules for the shared row system (.ba-cal-day/.ba-cal-item) and the City-events component
   (.ba-ce-*, .ba-cal-month) stay in index.html: they sit inside shared sections. */
/* ── Calendar ───────────────────────────────────────────────── */
.calendar-wrap{background:var(--ba-bed-2);border:1px solid rgba(var(--ba-veil),0.08);border-radius:12px;padding:24px}
.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-nav-btn{padding:6px 14px;border:1px solid rgba(var(--ba-veil),0.12);border-radius:6px;background:none;color:rgba(var(--ba-ink),var(--ba-ia6));cursor:pointer;font-size:13px}
.cal-nav-btn:hover{border-color:#00D4C4;color:#00D4C4}
.cal-month-title{font-family:"Inter",sans-serif;font-size:19px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;color:var(--ba-ink-solid)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-day-header{text-align:center;font-family:"JetBrains Mono",monospace;font-size:10px;color:rgba(var(--ba-ink),var(--ba-ia3));padding:6px 0}
.cal-day{min-height:60px;background:rgba(var(--ba-veil),0.02);border-radius:4px;padding:6px;cursor:default}
.cal-day.today{border:1px solid rgba(0,212,196,0.4)}
.cal-day.other-month{opacity:.3}
.cal-day-num{font-size:12px;font-weight:600;color:rgba(var(--ba-ink),var(--ba-ia7));margin-bottom:3px}
.cal-event-dot{font-size:9.5px;padding:1px 4px;border-radius:3px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot-utility{background:rgba(200,232,48,0.15);color:#C8E830}
.dot-community{background:rgba(0,212,196,0.15);color:#00D4C4}
.dot-blockparty{background:rgba(251,74,64,0.15);color:#FB4A40}
.dot-birthday{background:rgba(255,107,181,0.15);color:#FF6BB5}
.dot-keydate{background:rgba(229,192,0,0.15);color:#E5C000}
.cal-view-toggle{display:flex;gap:4px;margin:0 0 14px;background:rgba(var(--ba-veil),0.04);border-radius:6px;padding:4px;width:fit-content}
.cal-view-btn{padding:5px 14px;border-radius:4px;border:none;background:none;cursor:pointer;font-size:12px;font-family:"Inter",sans-serif;font-weight:600;color:rgba(var(--ba-ink),var(--ba-ia45))}
.cal-view-btn.active{background:rgba(0,212,196,0.18);color:#00D4C4}
.cal-day-list-item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:6px;margin-bottom:8px}
/* CAL-GRID-ESCAPE-1: --ba-text-secondary, not ia35 (2.92:1 light / 3.04:1 dark measured by #152): AA in both themes */
.cal-day-list-empty{color:var(--ba-text-secondary);font-size:13px;padding:20px 0;text-align:center}
/* S1 · a stated calendar failure. AMBER, not red: the month did not load,
   which is worth saying and is not a safety event (NORTH STAR 11 — red
   stays scarce). Sits under the grid so a partial result is still read
   first, and carries its own retry. */
.cal-error{display:flex;align-items:center;gap:var(--ba-s3);flex-wrap:wrap;
  margin-top:12px;padding:10px 14px;border:1px solid var(--ba-season-line);
  border-radius:var(--ba-r2);background:var(--ba-season-soft);
  font-size:13.5px;color:var(--ba-text-secondary);}
.cal-error .ba-sec-action{color:var(--ba-season);}
.cal-legend{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap}
.cal-legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:rgba(var(--ba-ink),var(--ba-ia45))}
.cal-legend-dot{width:8px;height:8px;border-radius:3px}
.cal-gcal-btn{padding:7px 14px;border:1.5px solid rgba(var(--ba-veil),0.15);border-radius:6px;background:none;color:rgba(var(--ba-ink),var(--ba-ia6));font-size:12px;cursor:pointer;display:flex;align-items:center;gap:6px;margin-bottom:12px}
.cal-gcal-btn:hover{border-color:#00D4C4;color:#00D4C4}
/* CAL-GRID-ESCAPE-1 · a long title can no longer widen a column at any width. Once titles are text (escaped), a
   long one (or one long word) is a nowrap chip, and 1fr's automatic minimum let it stretch its column past the card at
   1440 (Saturday pushed off-screen). Tracks may shrink at every width; the chip ellipsises (.cal-event-dot). Equal
   columns with ordinary titles: unchanged. */
#block-calendar .cal-grid{grid-template-columns:repeat(7,minmax(0,1fr));}
#block-calendar .cal-day{min-width:0;}
/* WAVE3-POLISH-1 P6 · a multi-day date lead wraps after its dash instead of running under the title
   (Alex, iPhone 390: "NOV 20–DEC 24" overlapped "German-style Christmas market…"). See calWhen rows in calendar.js. */
#block-calendar .ba-row-lead.is-range{white-space:normal;overflow-wrap:normal;}
/* WAVE3-POLISH-1 P7 · CAL-MONTH-390-1 · the Month view fits a phone (Alex, "Calendar Padding error").
   Cause: .cal-grid's tracks were repeat(7,1fr), and 1fr has an automatic minimum, so each column grew to its
   longest white-space:nowrap event chip ("Here's What To See On The Near North…"): the grid measured 663px at a
   390 viewport, the page scrolled sideways and the header and footer stopped half-way across. Phone only: the
   tracks may shrink (minmax(0,1fr)), the day cells are smaller, and each event is a coloured dot in its
   category's colour (its words stay in the cell for a screen reader; the Day view lists them in full).
   1440 is unchanged. */
@media(max-width:680px){
  #block-calendar .calendar-wrap{padding:12px;}
  #block-calendar .cal-grid{grid-template-columns:repeat(7,minmax(0,1fr));}
  #block-calendar .cal-day{min-height:44px;padding:4px 2px;min-width:0;overflow:hidden;}
  #block-calendar .cal-day-num{font-size:11px;margin-bottom:2px;}
  #block-calendar .cal-event-dot{display:inline-block;width:7px;height:7px;padding:0;margin:0 1px 1px 0;
    border-radius:50%;font-size:0;line-height:0;vertical-align:top;background:currentColor;}
  /* an event whose type has no colour class still shows a visible dot in both themes (zero specificity, so every
     .dot-* colour above still wins) */
  :where(#block-calendar .cal-event-dot){color:var(--ba-text-muted);}
}
/* BRING-LIST-1 · who's bringing what, under a Block Calendar event in the Day view. Theme tokens only
   (ink/text/accent pairs that flip with Light and Dark); buttons are the site's .ba-btn-secondary and .ba-chip. */
.ba-bring{margin-top:10px;padding-top:10px;border-top:1px solid rgba(var(--ba-ink),0.12)}
.ba-bring-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.ba-bring-title{font-size:13px;font-weight:700;color:var(--ba-text)}
.ba-bring-count{font-size:12.5px;color:rgba(var(--ba-ink),var(--ba-ia6))}
.ba-bring-list{list-style:none;margin:0;padding:0}
.ba-bring-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgba(var(--ba-ink),0.08)}
.ba-bring-item:last-child{border-bottom:0}
.ba-bring-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.ba-bring-label{font-size:14px;font-weight:600;color:var(--ba-text);overflow-wrap:anywhere}
.ba-bring-who{font-size:12.5px;color:rgba(var(--ba-ink),var(--ba-ia6))}
.ba-bring-who.is-mine{color:var(--ba-accent-ink);font-weight:600}
.ba-bring-acts{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ba-bring-claim{min-height:40px;padding:0 14px;font-size:14px}
.ba-bring-link{appearance:none;-webkit-appearance:none;background:none;border:0;padding:8px 4px;margin:0;min-height:40px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:var(--ba-accent-ink);text-decoration:underline;text-underline-offset:2px}
.ba-bring-link:focus-visible,.ba-bring-input:focus-visible{outline:3px solid var(--ba-accent);outline-offset:2px}
.ba-bring-rm{color:rgba(var(--ba-ink),var(--ba-ia6))}
.ba-bring-empty{margin:2px 0 8px;font-size:13px;color:rgba(var(--ba-ink),var(--ba-ia6))}
.ba-bring-ideas{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.ba-bring-ideas .ba-chip{white-space:normal}
/* BRING-LIST-1C (chips): the "Suggested by Block Party AI" label, on its own line under the AI chips */
.ba-bring-ai{flex-basis:100%;font-size:13px;color:rgba(var(--ba-ink),var(--ba-ia6))}
.ba-bring-add{display:flex;gap:8px;margin-top:8px}
.ba-bring-input{flex:1 1 auto;min-width:0;min-height:44px;box-sizing:border-box;padding:0 12px;border-radius:10px;
  border:1px solid rgba(var(--ba-ink),0.30);background:transparent;color:var(--ba-text);font:inherit;font-size:15px}
.ba-bring-input::placeholder{color:rgba(var(--ba-ink),var(--ba-ia45))}
.ba-bring-warn{margin-top:8px;padding:8px 10px;border-radius:8px;border:1px solid var(--ba-season-line);background:var(--ba-season-soft);
  font-size:13px;color:var(--ba-text)}
.ba-bring-msg{margin-top:6px;font-size:13px;color:var(--ba-text-secondary)}
/* CAL-SUBSCRIBE-1B · the block subscribe link under the Next list (only when calendar_feed_public is on).
   The pills and the note reuse the City-events .ba-ce-* component rules in index.html. */
.ba-cal-subscribe{margin-top:20px;padding-top:14px;border-top:1px solid var(--ba-line)}
.ba-cal-subscribe-title{font-family:var(--ba-font-meta);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ba-text-muted);margin-bottom:8px}
/* CAL-W3-FIX-1 · readable Calendar text (Rich, Wave 3 phone look 2026-10-19 17:11 CT: "Some of the text is YELLOW and
   hard to read"). Every text on the Calendar meets WCAG AA in Light and Dark at 390 and 1440, measured by
   scripts/tests/cal-w3-fix.mjs. Amber, lime, teal and coral stay as a category's fill, border or phone dot; the words
   are ink tokens (--ba-text / --ba-text-secondary / --ba-accent-ink), which flip with the theme. */
#block-calendar .ba-ce-status.is-unconfirmed,#block-calendar .ba-ce-status.is-conflicting,#block-calendar .ba-ce-status.is-postponed,
#block-calendar .ba-ce-status.is-stale,#block-calendar .ba-ce-status.is-implausible,#block-calendar .ba-ce-status.is-unverified,
#block-calendar .ba-ce-status.is-block_unaffirmed,#block-calendar .ba-ce-status.is-unavailable{color:var(--ba-text-secondary);}
/* CAL-REPORTED-1 · a press-reported date (Rich 2026-10-20 10:07 CT): quiet, readable ink (AA in Light and Dark), set
   apart from Confirmed by a hollow ring, never the confirmed check or a warning colour. */
#block-calendar .ba-ce-status.is-reported{color:var(--ba-text-secondary);}
#block-calendar .ba-ce-status.is-reported::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;border:1.5px solid currentColor;margin-right:6px;vertical-align:0;}
#block-calendar .ba-ce-status.is-reported a{color:var(--ba-text);}
/* A national holiday: one quiet line (computed in calendar.js, baUsHolidays), never louder than the block's events. */
#block-calendar .ba-cal-item.is-holiday .ba-row-title{font-weight:500;color:var(--ba-text-secondary);}
#block-calendar .cal-day-header{color:var(--ba-text-secondary);}
#block-calendar .cal-view-btn{color:var(--ba-text-secondary);}
#block-calendar .cal-view-btn.active{color:var(--ba-text);}
#block-calendar .cal-legend-item{color:var(--ba-text-secondary);}
#block-calendar .cal-day.other-month{opacity:1;}
#block-calendar .cal-day.other-month .cal-day-num{color:var(--ba-text-muted);}
.dot-holiday{background:rgba(var(--ba-ink),0.06);color:var(--ba-text-muted);}
@media(min-width:681px){
  /* Desktop chips carry words: ink on the category's tint, the category's colour as a left rule. */
  #block-calendar .cal-event-dot{color:var(--ba-text);border-left:3px solid transparent;}
  #block-calendar .cal-event-dot.dot-utility{border-left-color:#C8E830;}
  #block-calendar .cal-event-dot.dot-community{border-left-color:#00D4C4;}
  #block-calendar .cal-event-dot.dot-blockparty{border-left-color:#FB4A40;}
  #block-calendar .cal-event-dot.dot-birthday{border-left-color:#FF6BB5;}
  #block-calendar .cal-event-dot.dot-keydate{border-left-color:#E5C000;}
  #block-calendar .cal-event-dot.dot-holiday{color:var(--ba-text-secondary);border-left-color:rgba(var(--ba-ink),0.25);}
}
/* CAL-DATE-SHARE-1 · "Know a date? Share it with the block" on City event rows (only with calendar_autodates on).
   The link, the field, the button and the result line reuse the BRING-LIST-1 rules above; the note is .ba-ce-note. */
.ba-ds{margin-top:4px}
.ba-ds-open{padding-left:0;font-weight:500;font-size:12.5px}
.ba-ds-form{margin-top:6px;max-width:560px}
.ba-ds-label{display:block;font-size:12.5px;font-weight:600;color:var(--ba-text-secondary)}
.ba-ds-form .ba-bring-link{padding-left:0}
/* CAL-MINE-1 · My calendar: the Customize line, its sheet, the quiet Hide, the Undo line. Theme tokens only (AA both themes). */
.ba-calmine-bar{display:flex;justify-content:flex-end;margin:0 0 10px}
.ba-calmine-bar:empty{display:none}
.ba-calmine-line{margin:0;font-size:13px;color:var(--ba-text-secondary);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ba-calmine-link{background:none;border:none;padding:4px 2px;min-height:28px;font:inherit;font-size:13px;font-weight:600;color:var(--ba-accent-ink);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.ba-calmine-link:focus-visible,.ba-calmine-hide:focus-visible,.ba-calmine-switch input:focus-visible{outline:2px solid var(--ba-accent-ink);outline-offset:2px}
.ba-calmine-sheet{background:var(--ba-bed-2);border:1px solid rgba(var(--ba-veil),0.14);border-radius:12px;padding:16px 18px;margin:0 0 16px}
.ba-calmine-sheet[hidden]{display:none}
.ba-calmine-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ba-calmine-sheet h3{margin:0;font-size:16px;font-weight:700;color:var(--ba-ink-solid)}
.ba-calmine-sheet h3:focus{outline:none}
.ba-calmine-help{margin:6px 0 10px;font-size:13px;color:var(--ba-text-secondary)}
.ba-calmine-cats{border:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 16px}
.ba-calmine-cats legend{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ba-text-secondary);margin-bottom:6px;padding:0}
.ba-calmine-switch{display:flex;align-items:center;gap:8px;min-height:32px;font-size:14px;color:var(--ba-ink-solid);cursor:pointer}
.ba-calmine-switch input{width:18px;height:18px;accent-color:var(--ba-accent-ink);margin:0;flex:0 0 auto}
.ba-calmine-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.ba-calmine-sub{margin:14px 0 6px;font-size:13px;font-weight:700;color:var(--ba-ink-solid)}
.ba-calmine-items{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}
.ba-calmine-item{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--ba-ink-solid)}
.ba-calmine-item-name{min-width:0;overflow-wrap:anywhere}
.ba-calmine-item-when{color:var(--ba-text-secondary);white-space:nowrap}
.ba-calmine-hide{background:none;border:1px solid rgba(var(--ba-veil),0.22);border-radius:6px;padding:3px 10px;min-height:28px;font:inherit;font-size:12px;font-weight:600;color:var(--ba-text-secondary);cursor:pointer;white-space:nowrap}
.ba-calmine-hide:hover{border-color:var(--ba-accent-ink);color:var(--ba-accent-ink)}
.ba-calmine-hide[disabled]{opacity:.55;cursor:default}
.ba-calmine-hide.is-quiet{border-color:transparent}
.ba-calmine-hidewrap{display:inline-flex}
.ba-calmine-ask{display:inline-flex;gap:6px;flex-wrap:wrap}
.ba-calmine-dayhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ba-calmine-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);max-width:min(440px,calc(100% - 32px));background:var(--ba-bed-2);border:1px solid rgba(var(--ba-veil),0.14);border-left:4px solid var(--ba-accent-ink);border-radius:8px;padding:10px 14px;font-size:14px;color:var(--ba-ink-solid);box-shadow:0 8px 30px rgba(0,0,0,0.35);z-index:300;display:none;align-items:center;gap:14px}
.ba-calmine-toast.open{display:flex}
/* NEWS-TOAST-1: a fixed box centred with left:50% shrinks to HALF the screen, so one sentence wrapped over five lines
   on a phone (Rich's 4.2 look). It sizes to its words now, up to 440px or the screen less 32px. */
.ba-calmine-toast{width:max-content;max-width:min(440px,calc(100vw - 32px));box-sizing:border-box;line-height:1.35}
/* NEWS-TOAST-1 · the × on the Calendar and News popups (44px tap target, theme ink). */
.ba-toast-x{flex:0 0 auto;min-width:44px;min-height:44px;margin:-10px -10px -10px 0;padding:0;border:0;background:none;color:var(--ba-ink-solid);font-family:inherit;font-size:24px;font-weight:400;line-height:1;cursor:pointer;border-radius:6px}
.ba-toast-x:focus-visible{outline:2px solid var(--ba-accent-ink);outline-offset:-4px}
@media(max-width:900px){body.ba-signed-in .ba-calmine-toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}

/* CAL-WEEK-1 · Week view. A phone stacks the seven days as rows; from 900px the days are seven columns.
   Colours are the site's theme tokens, so light and dark both read (held by scripts/tests/cal-week.mjs, AA). */
.ba-cw{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:8px;}
.ba-cw-day{border:1px solid rgba(var(--ba-veil),0.14);border-radius:10px;padding:8px 10px;min-width:0;}
.ba-cw-day.is-today{border-color:var(--ba-accent-ink);box-shadow:inset 3px 0 0 var(--ba-accent-ink);}
.ba-cw-head{display:flex;align-items:baseline;gap:6px;width:100%;min-height:44px;padding:0;margin:0;border:0;background:none;
  color:var(--ba-ink-solid);font:700 14px/1.3 inherit;font-family:inherit;text-align:left;cursor:pointer;}
.ba-cw-dow{text-transform:uppercase;letter-spacing:.06em;font-size:12px;}
.ba-cw-today{font-size:11px;font-weight:700;color:var(--ba-accent-ink);text-transform:uppercase;letter-spacing:.06em;}
.ba-cw-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.ba-cw-item{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.35;color:var(--ba-ink-solid);min-width:0;}
.ba-cw-dot{flex:0 0 auto;width:8px;height:8px;margin:6px 0 0;border-radius:50%;background:var(--ba-text-muted);}
.ba-cw-dot--utility{background:#C8E830}.ba-cw-dot--community{background:#00D4C4}.ba-cw-dot--blockparty,.ba-cw-dot--block_party{background:#FB4A40}
.ba-cw-dot--birthday{background:#FF6BB5}.ba-cw-dot--keydate{background:#E5C000}.ba-cw-dot--holiday{background:rgba(var(--ba-ink),0.35)}
.ba-cw-text{display:flex;flex-wrap:wrap;gap:0 6px;min-width:0;overflow-wrap:anywhere;}
.ba-cw-time{font-weight:700;white-space:nowrap;}
.ba-cw-src{font-size:12px;color:var(--ba-accent-ink);}
.ba-cw-empty{margin:0;font-size:12.5px;color:rgba(var(--ba-ink),var(--ba-ia6));}
/* A phone: an empty day is one line (its heading, then "Nothing planned" on the same row), so a quiet week stays short. */
@media (max-width:899px){
  .ba-cw-day{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;padding:2px 10px;}
  .ba-cw-head{width:auto;flex:1 1 0;min-width:0;align-items:center;}
  .ba-cw-empty{white-space:nowrap;}
  .ba-cw-empty{flex:0 0 auto;}
  .ba-cw-list{flex:1 1 100%;padding-bottom:8px;}
}
@media (min-width:900px){
  .ba-cw{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;}
  .ba-cw-day{padding:6px 8px;min-height:140px;}
  .ba-cw-head{flex-direction:column;align-items:flex-start;gap:0;}
  .ba-cw-item{font-size:12.5px;}
}
/* CAL-LINKS-1 · an entry's "More info →" and the site it goes to, in small text (every view; the Month grid's is a "↗"). */
.ba-cal-more{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:12.5px;line-height:1.4;min-width:0;}
.ba-cal-more a{color:var(--ba-accent-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.ba-cal-more-host{font-size:11.5px;color:rgba(var(--ba-ink),var(--ba-ia6));overflow-wrap:anywhere;}
.ba-cal-more-row{margin-top:2px;}
.ba-cal-item .ba-cal-more{margin-top:2px;}
a.ba-cal-more.is-compact{display:inline;color:inherit;text-decoration:none;font-weight:700;padding:0 2px;}
.ba-cal-link-edit{margin-top:6px;min-height:32px;padding:4px 10px;border:1px solid rgba(var(--ba-veil),0.24);border-radius:8px;
  background:none;color:var(--ba-accent-ink);font:600 12.5px/1.2 inherit;font-family:inherit;cursor:pointer;}