/* ════════════════════════════════════════
   CONTENT CALENDAR  (aigakccomms.org)

   Loaded by calendar.html after shared.css, which supplies the tokens, the
   nav/footer chrome and the modal shell the admin forms render into.
════════════════════════════════════════ */

/* ── page shell ── */
/* Wide on purpose. Seven columns of post titles need the room, and the month
   grid is the whole page here rather than one section competing with others. */
.cal-page{
  max-width:1800px;margin:0 auto;
  padding:calc(var(--nav-h) + 28px) 24px 40px;
}
/* #cal-shell carried a 40px top margin as section 03 of the brand page; on a
   page it owns outright the wrapper supplies the spacing. */
.cal-page #cal-shell{margin-top:0;}

/* ════════════════════════════════════════
   SOCIAL CALENDAR
════════════════════════════════════════ */
#cal-shell{
  margin-top:40px;background:var(--ink2);border:1px solid var(--border);
  /* Row height for the month grid; week view gets its own taller columns. */
  --cal-cell-h:164px;
}
@media (max-height:900px){ #cal-shell{--cal-cell-h:132px;} }
.cal-toolbar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--border);
}
.cal-nav{display:flex;align-items:center;gap:8px;}
.cal-nav-btn{
  width:30px;height:30px;display:grid;place-items:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:3px;color:var(--tx-dim);cursor:pointer;
  font-size:17px;line-height:1;transition:all .12s;
}
.cal-nav-btn:hover{border-color:var(--mag);color:var(--mag-text);}
.cal-period{
  min-width:150px;font-size:15px;letter-spacing:.05em;color:var(--white);
}
.cal-today-btn,.cal-view-btn,.cal-admin-btn,.cal-signin-btn{
  padding:7px 12px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);border-radius:3px;
  color:var(--tx-dim);cursor:pointer;
  font-family:'DM Mono',monospace;font-size:var(--fs);
  letter-spacing:.06em;text-transform:uppercase;transition:all .12s;
}
.cal-today-btn:hover,.cal-view-btn:hover,.cal-admin-btn:hover,.cal-signin-btn:hover{
  border-color:var(--mag);color:var(--mag-text);
}
.cal-view-btn.active{background:var(--mag-lo);border-color:var(--mag);color:var(--mag-text);}
.cal-views{display:flex;gap:4px;}
.cal-actions{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}

/* Admin affordances are convenience only — every route is gated server side. */
.cal-admin-actions{display:none;gap:6px;flex-wrap:wrap;}
body.is-admin .cal-admin-actions{display:flex;}
body.is-admin .cal-signin-btn{display:none;}

/* ── month grid ── */
.cal-body{padding:16px 18px 20px;overflow-x:auto;}
.cal-empty{
  padding:48px 12px;text-align:center;font-size:var(--fs);color:var(--tx-mute);
}
/* minmax(0,1fr) rather than 1fr throughout: a bare 1fr track refuses to shrink
   below its content's minimum, so one long post title would widen its whole
   column and squeeze the other six. Zeroing the minimum is what lets the
   titles below clip to an ellipsis instead. */
.cal-grid-head{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;min-width:660px;
  margin-bottom:1px;
}
.cal-grid-head span{
  padding:6px 8px;font-size:var(--fs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx-mute);
}
.cal-grid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  grid-auto-rows:minmax(var(--cal-cell-h),auto);gap:1px;min-width:660px;
  background:var(--border);border:1px solid var(--border);
}
.cal-cell{
  background:var(--ink2);padding:7px;display:flex;flex-direction:column;gap:3px;
  min-height:var(--cal-cell-h);min-width:0;position:relative;
}
/* Narrow-screen affordance only: see the mobile block at the end of this file,
   where the pills shrink to colour bars and the cell itself becomes the target. */
.cal-cell-tap{
  display:none;position:absolute;inset:0;z-index:1;
  background:none;border:none;padding:0;cursor:pointer;
}
.cal-cell-tap:focus-visible{outline:2px solid var(--mag);outline-offset:-2px;}
.cal-cell.outside{background:var(--ink);}
/* Out-of-month days read as secondary through the darker cell behind them,
   not through transparency that would drop the number below 4.5:1. */
.cal-cell.outside .cal-daynum{color:var(--tx-mute);}
.cal-cell.today{box-shadow:inset 0 0 0 1.5px var(--mag);}
.cal-daynum{font-size:var(--fs);color:var(--tx);padding:1px 2px;}
.cal-cell.today .cal-daynum{color:var(--mag-text);font-weight:500;}
.cal-cell-events{display:flex;flex-direction:column;gap:3px;min-width:0;}

.cal-pill{
  display:flex;align-items:center;gap:4px;width:100%;
  padding:4px 7px;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.05);border:none;border-left:3px solid var(--pill);
  border-radius:2px;color:var(--tx);
  font-family:'DM Mono',monospace;font-size:var(--fs);line-height:1.4;
  transition:background .12s;
}
.cal-pill:hover{background:rgba(255,255,255,.12);}
.cal-pill.recurring{border-left-style:dotted;border-left-width:3px;}
.cal-pill-time{color:var(--tx-dim);flex-shrink:0;}
/* flex:1 makes the title absorb the spare width, which both pins the platform
   badges to the right edge and gives the ellipsis a boundary to clip against.
   min-width:0 is what allows it to shrink past its own text. */
.cal-pill-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* A touch above the 14px floor and loosely tracked: at badge size the useful
   signal is the glyph's silhouette, and several emoji in a row need daylight
   between them to stay countable. margin-left keeps the title's ellipsis from
   running straight into the first icon. */
.cal-pill-plat{
  flex-shrink:0;margin-left:2px;
  font-size:15px;line-height:1;letter-spacing:1px;
}

/* ── agenda ── */
.cal-agenda{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);}
.cal-agenda-day{display:flex;gap:14px;padding:12px 14px;background:var(--ink2);}
.cal-agenda-day.today{box-shadow:inset 2px 0 0 var(--mag);}
.cal-agenda-date{
  display:flex;flex-direction:column;align-items:center;
  width:52px;flex-shrink:0;padding-top:2px;
}
.cal-agenda-dow{font-size:var(--fs);letter-spacing:.06em;text-transform:uppercase;color:var(--tx-mute);}
.cal-agenda-num{font-size:19px;line-height:1.15;color:var(--white);}
.cal-agenda-mon{font-size:var(--fs);letter-spacing:.06em;text-transform:uppercase;color:var(--tx-mute);}
.cal-agenda-day.today .cal-agenda-num{color:var(--mag-text);}
.cal-agenda-items{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;}
.cal-agenda-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;
  padding:7px 10px;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.03);border:none;border-left:2.5px solid var(--pill);
  border-radius:2px;color:var(--tx);
  font-family:'DM Mono',monospace;font-size:var(--fs);transition:background .12s;
}
.cal-agenda-row:hover{background:rgba(255,255,255,.09);}
.cal-agenda-time{color:var(--tx-dim);min-width:66px;font-size:var(--fs);}
.cal-agenda-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cal-agenda-plat,.cal-agenda-camp{
  font-size:var(--fs);letter-spacing:.04em;text-transform:uppercase;
  color:var(--tx-mute);padding:2px 7px;
  border:1px solid rgba(255,255,255,.1);border-radius:2px;
}

/* ── event detail ── */
.cal-detail-when{font-size:var(--fs);color:var(--tx-dim);}
.cal-tags{display:flex;gap:6px;flex-wrap:wrap;}
.cal-tag{
  font-size:var(--fs);letter-spacing:.05em;text-transform:uppercase;
  padding:4px 9px;border-radius:2px;
  color:var(--tx-dim);
  background:rgba(255,255,255,.04);
  border:1px solid var(--tag,rgba(255,255,255,.12));
}
.cal-detail-block{display:flex;flex-direction:column;gap:6px;}
.cal-detail-label{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:var(--fs);letter-spacing:.1em;text-transform:uppercase;color:var(--tx-mute);
}
.cal-copy-btn{
  padding:3px 8px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);border-radius:3px;
  color:var(--tx-dim);cursor:pointer;
  font-family:'DM Mono',monospace;font-size:var(--fs);
  letter-spacing:.1em;text-transform:uppercase;transition:all .12s;
}
.cal-copy-btn:hover{border-color:var(--mag);color:var(--mag-text);}
.cal-detail-copy{
  padding:11px 12px;background:var(--ink);border:1px solid var(--border);
  border-radius:3px;font-size:var(--fs);line-height:1.65;
  color:var(--tx);white-space:pre-wrap;word-break:break-word;
}
.cal-detail-notes{font-size:var(--fs);line-height:1.6;color:var(--tx-dim);white-space:pre-wrap;}
.cal-assets{display:flex;flex-direction:column;gap:8px;}
.cal-assets-none{font-size:var(--fs);color:var(--tx-mute);}
.cal-unlock-assets{
  display:flex;align-items:center;gap:8px;padding:10px 13px;
  background:var(--mag-lo);border:1px solid var(--mag-hi);border-radius:3px;
  color:var(--mag-text);cursor:pointer;
  font-family:'DM Mono',monospace;font-size:var(--fs);
  letter-spacing:.05em;transition:all .15s;
}
.cal-unlock-assets:hover{background:rgba(229,0,125,.22);border-color:var(--mag);}
.cal-drive-link{
  display:flex;align-items:center;gap:8px;padding:10px 13px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);
  border-radius:3px;color:var(--white);text-decoration:none;
  font-size:var(--fs);transition:all .15s;word-break:break-all;
}
.cal-drive-link:hover{border-color:var(--mag);color:var(--mag-text);}

@media (max-width:720px){
  .cal-toolbar{gap:10px;}
  .cal-actions{margin-left:0;width:100%;}
  .cal-period{min-width:auto;}
  .am-row{grid-template-columns:1fr;}
}

/* ── calendar: public reference links ── */
.cal-links{display:flex;flex-direction:column;gap:4px;}
.cal-link,.cal-link-plain{
  font-size:var(--fs);line-height:1.5;word-break:break-all;
  color:var(--tx-dim);text-decoration:none;
}
.cal-link:hover{color:var(--mag-text);text-decoration:underline;}
.cal-link-plain{color:var(--tx-mute);}

/* ── calendar: week view ── */
.cal-grid-head.week span{
  display:flex;gap:5px;align-items:baseline;
}
.cal-grid-head.week span.today{color:var(--mag-text);}
.cal-week{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;min-width:760px;
  background:var(--border);border:1px solid var(--border);
}
.cal-wcell{
  background:var(--ink2);padding:8px;min-height:calc(var(--cal-cell-h) * 3);
  display:flex;flex-direction:column;
}
.cal-wcell.today{box-shadow:inset 0 0 0 1.5px var(--mag);}
/* Shown only once the seven columns stack into rows and the shared header,
   which is what normally names each column, stops lining up. */
.cal-wcell-label{
  display:none;margin-bottom:7px;
  font-size:var(--fs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx-mute);
}
.cal-wcell.today .cal-wcell-label{color:var(--mag-text);}
.cal-wcell-events{display:flex;flex-direction:column;gap:6px;}
.cal-wcell-empty{flex:1;}
.cal-wcard{
  display:flex;flex-direction:column;gap:3px;width:100%;
  padding:8px 9px;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.05);border:none;border-left:3px solid var(--pill);
  border-radius:2px;color:var(--tx);
  font-family:'DM Mono',monospace;font-size:var(--fs);line-height:1.45;
  transition:background .12s;
}
.cal-wcard:hover{background:rgba(255,255,255,.12);}
.cal-wcard.recurring{border-left-style:dotted;border-left-width:4px;}
.cal-wcard-time{
  display:flex;align-items:center;gap:5px;
  font-size:var(--fs);color:var(--tx-dim);
}
.cal-wcard-title{word-break:break-word;}
.cal-wcard-meta,.cal-wcard-camp{
  font-size:var(--fs);letter-spacing:.04em;text-transform:uppercase;
  color:var(--tx-mute);
}

/* ════════════════════════════════════════
   SMALL SCREENS

   Last block in the file on purpose: several of these override calendar
   rules declared above at equal specificity, so source order is what
   decides. 760px reflows the toolbar and collapses the month grid; 560px
   is the phone-proper pass (the modal half of it lives in shared.css).
════════════════════════════════════════ */

@media (max-width:760px){

  /* ── toolbar stacks into full-width rows ── */
  .cal-toolbar{padding:12px;gap:10px;}
  .cal-nav{width:100%;}
  .cal-period{flex:1;min-width:0;font-size:15px;}
  .cal-views{width:100%;}
  .cal-views .cal-view-btn{flex:1;}
  .cal-actions{width:100%;margin-left:0;}
  .cal-signin-btn{width:100%;}
  .cal-admin-actions{width:100%;}
  body.is-admin .cal-admin-actions{display:grid;grid-template-columns:repeat(3,1fr);}

  /* ── month grid fits the screen instead of scrolling sideways ──
     A seven-column grid cannot hold a legible pill at this width, so each post
     becomes a colour bar and the cell itself opens the day (openDayDetail). */
  #cal-shell{--cal-cell-h:60px;}
  .cal-body{padding:10px 10px 14px;overflow-x:visible;}
  .cal-grid,.cal-grid-head{min-width:0;}
  .cal-grid-head span{padding:5px 0;text-align:center;font-size:var(--fs);letter-spacing:0;}
  .cal-cell{padding:4px 3px;gap:2px;}
  .cal-daynum{padding:0;text-align:center;font-size:var(--fs);}
  .cal-cell-events{gap:2px;overflow:hidden;}
  .cal-cell-tap{display:block;}
  .cal-pill{height:5px;padding:0;gap:0;border:none;border-radius:3px;background:var(--pill);}
  .cal-pill.recurring{border:none;opacity:.5;}
  .cal-pill-time,.cal-pill-title,.cal-pill-plat{display:none;}

  /* ── week view stacks into day rows ── */
  .cal-grid-head.week{display:none;}
  .cal-week{grid-template-columns:1fr;min-width:0;}
  .cal-wcell{min-height:0;padding:11px 12px;}
  .cal-wcell-label{display:block;}
  .cal-wcell-empty{display:none;}

  /* ── agenda ── */
  .cal-agenda-day{gap:10px;padding:10px 11px;}
  .cal-agenda-time{min-width:44px;}
  .cal-agenda-plat,.cal-agenda-camp{display:none;}
}

@media (max-width:560px){
  .cal-page{padding:calc(var(--nav-h) + 16px) 12px 28px;}

  .cal-agenda-day{flex-direction:column;gap:6px;}
  .cal-agenda-date{flex-direction:row;align-items:baseline;gap:6px;width:auto;}
  .cal-agenda-num{font-size:15px;}

  /* At 14px the longer admin labels no longer fit three to a row and wrap to
     two lines, leaving the buttons uneven. Two columns keeps each on one line. */
  body.is-admin .cal-admin-actions{grid-template-columns:repeat(2,1fr);}
}