/* ─────────────────────────────────────────────────────────────────────────────
   Calendar Aggregator — stylesheet
   Loaded by calendar.html via <link>. Edits here don't require a script run.

   Layout strategy: a single HTML payload contains both views. CSS controls
   which is visible at which viewport.
     • Desktop (≥ 760px) — the seven-column month grid (one per month)
     • Mobile  (< 760px) — vertical agenda layout with compact mini-grids on top
   The Razr Ultra cover screen (~360 CSS px) and inner screen (~408 CSS px)
   both fall into the mobile bucket.
   ─────────────────────────────────────────────────────────────────────────── */

*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:'Courier New',monospace;
  background:linear-gradient(135deg,#f5f0e5 0%,#f9f5ec 50%,#f5f0e5 100%);
  min-height:100vh;padding:40px 20px;color:#1E3A52;position:relative;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%,rgba(232,196,160,.15) 0%,transparent 25%),
    radial-gradient(circle at 40% 80%,rgba(237,228,211,.2)  0%,transparent 20%),
    radial-gradient(circle at 90% 20%,rgba(184,212,213,.12) 0%,transparent 25%),
    radial-gradient(circle at 60% 50%,rgba(232,196,160,.10) 0%,transparent 30%),
    radial-gradient(circle at 10% 70%,rgba(184,212,213,.08) 0%,transparent 20%);
  z-index:0;
}

/* ── Container — slim shell, no art-deco frame ─────────────────────────────── */
.container{
  position:relative;z-index:1;
  max-width:1200px;margin:0 auto;
  padding:24px 30px;
}

/* ── Page header — single teal underline replaces the heavy double border ─── */
.page-hdr{
  text-align:center;margin-bottom:20px;padding-bottom:14px;
  border-bottom:2px solid #4A8B9E;
}
.page-hdr h1{
  font-size:2em;font-weight:bold;letter-spacing:2px;
  color:#1E3A52;text-transform:uppercase;
}
.page-hdr p{
  margin:6px 0 0;color:#1E3A52;font-size:.85em;letter-spacing:1.5px;
}

/* ── Status panel (expandable details) ─────────────────────────────────────── */
.status-panel{
  margin-bottom:18px;
  font-family:'Segoe UI',sans-serif;font-size:.85em;color:#4A8B9E;
}
.status-panel > summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:8px;
  padding:6px 4px;
}
.status-panel > summary::-webkit-details-marker{display:none}
.status-panel > summary::after{
  content:"▸";font-size:.9em;color:#888;margin-left:auto;
  transition:transform .15s ease;
}
.status-panel[open] > summary::after{transform:rotate(90deg)}
.status-panel .dot{color:#2a6e3f;font-weight:bold;font-size:1.15em;line-height:1}
.status-panel .dot.warn{color:#C8563C}
.status-detail{
  margin-top:6px;padding:10px 14px;
  background:rgba(255,255,255,.55);
  border-left:2px solid rgba(74,139,158,.4);
  font-size:.95em;line-height:1.6;
}
.sl{display:flex;gap:8px;padding:1px 0;color:#555;align-items:baseline}
.sl.ok{color:#2a6e3f}
.sl.err{color:#C8563C;font-weight:bold}
.sl strong{color:inherit;font-family:'Courier New',monospace;letter-spacing:.5px}
.test-badge{
  background:#C8563C;color:white;font-size:.75em;padding:1px 7px;
  border-radius:2px;margin-right:8px;letter-spacing:.5px;
}

/* ── View switching — show one, hide the other ─────────────────────────────── */
.view--mobile{display:none}
.view--desktop{display:block}

/* ════════════════════════════════════════════════════════════════════════════
   DESKTOP VIEW — seven-column month grids
   ════════════════════════════════════════════════════════════════════════════ */

.month-block{margin-bottom:32px}
.month-title{
  font-size:1.3em;font-weight:bold;letter-spacing:2px;
  text-transform:uppercase;color:#1E3A52;
  text-align:center;padding-bottom:8px;
}
.cgrid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:2px;background:#1E3A52;border:2px solid #1E3A52;
  margin-top:6px;
  box-shadow:0 2px 12px rgba(30,58,82,.10);
}
.dh{
  background:#1E3A52;color:#EDE4D3;
  text-align:center;padding:9px 4px;
  font-weight:bold;font-size:.78em;letter-spacing:1.5px;
}
.dc{
  background:white;min-height:96px;padding:8px 7px;
  position:relative;min-width:0;
}
.dc.other-month{opacity:.55}
.dc.out-window{opacity:.55;background:#f5f5f0}
.dc.today{background:#fffaed;outline:2px solid #C8563C;outline-offset:-2px}
.dc.today .dn{color:#C8563C}
.dn{
  font-weight:bold;font-size:.95em;color:#1E3A52;
  margin-bottom:5px;
}
.devents{display:flex;flex-direction:column;gap:2px}
.ecard{
  font-family:'Segoe UI',sans-serif;
  font-size:.72em;line-height:1.3;
  padding:2px 5px;border-radius:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#1E3A52;font-weight:600;
  display:flex;align-items:baseline;gap:0 4px;
}
.ecard.personal{background:#dce8f0;border-left:2px solid #1E3A52}
.ecard.google  {background:#B8D4D5;border-left:2px solid #4A8B9E}
.ecard.family  {background:#E8C4A0;border-left:2px solid #C8563C}
.ecard .et{color:#666;font-size:.95em;flex-shrink:0;font-family:'Courier New',monospace}
.ecard .etitle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ecard .etag{
  font-family:'Courier New',monospace;font-size:.85em;font-weight:bold;
  letter-spacing:.5px;text-transform:uppercase;margin-left:auto;flex-shrink:0;
  display:none; /* hidden by default — only visible at very wide screens */
}

/* Banner-style card for all-day & multi-day events on desktop */
.ecard--banner{
  border-left-width:3px;font-weight:bold;
}
.ecard--banner::before{
  content:attr(data-pill);
  font-family:'Courier New',monospace;font-size:.85em;
  background:rgba(30,58,82,.13);color:#1E3A52;
  padding:0 4px;border-radius:2px;letter-spacing:.5px;
  flex-shrink:0;margin-right:2px;
}
.ecard--cont{opacity:.7;font-weight:600}
.ecard--cont::before{background:rgba(30,58,82,.06);color:#666}

/* ── Legend — desktop only ─────────────────────────────────────────────────── */
.legend{
  margin-top:14px;padding:14px 18px;
  background:rgba(255,255,255,.55);border:1px solid rgba(30,58,82,.2);
  border-radius:2px;
}
.legend h3{
  font-size:.82em;text-transform:uppercase;letter-spacing:1.5px;
  color:#1E3A52;margin-bottom:10px;font-weight:bold;
  font-family:'Courier New',monospace;
}
.legend-items{display:flex;flex-wrap:wrap;gap:8px 24px}
.li{
  display:flex;align-items:center;gap:8px;
  font-family:'Segoe UI',sans-serif;font-size:.82em;color:#1E3A52;
}
.lswatch{
  width:28px;height:12px;border-radius:2px;flex-shrink:0;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.page-ftr{
  text-align:center;margin-top:24px;padding-top:14px;
  border-top:1px solid rgba(30,58,82,.2);
  font-size:.75em;letter-spacing:1px;color:#888;
  font-family:'Segoe UI',sans-serif;
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE VIEW — agenda layout with mini-grids on top
   Activated by media query at the bottom of this file.
   ════════════════════════════════════════════════════════════════════════════ */

/* Mini-grids — sit ABOVE the agenda for at-a-glance day awareness */
.minigrids{
  margin-bottom:16px;padding-bottom:14px;
  border-bottom:1px solid rgba(30,58,82,.2);
  display:flex;flex-direction:column;gap:14px;
}
.minigrid h3{
  font-family:'Courier New',monospace;font-size:.78em;
  letter-spacing:1.5px;text-transform:uppercase;
  color:#1E3A52;margin-bottom:6px;text-align:center;
  font-weight:bold;
}
.mg{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
  background:rgba(30,58,82,.3);border:1px solid rgba(30,58,82,.3);
  font-family:'Courier New',monospace;
}
.mg .mh{
  background:#1E3A52;color:#EDE4D3;
  text-align:center;padding:4px 0;
  font-size:.62em;letter-spacing:1px;font-weight:bold;
}
.mg .mc{
  background:white;text-align:center;padding:7px 0 9px;
  font-size:.78em;color:#1E3A52;
  position:relative;
}
.mg .mc.other{opacity:.55}
.mg .mc.has-ev::after{
  content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:#4A8B9E;
}
.mg .mc.today{background:#C8563C;color:white;font-weight:bold}
.mg .mc.today.has-ev::after{background:white}
/* Multi-day span bars — colored bottom bar across the cells the event covers */
.mg .mc.span::before{
  content:'';position:absolute;left:0;right:0;bottom:1px;
  height:3px;background:#C8563C;
}
.mg .mc.span--start::before{left:50%;border-radius:2px 0 0 2px}
.mg .mc.span--end::before  {right:50%;border-radius:0 2px 2px 0}
.mg .mc.span--solo::before {left:25%;right:25%;border-radius:2px}
.mg .mc.span-personal::before{background:#1E3A52}
.mg .mc.span-google::before  {background:#4A8B9E}
.mg .mc.span-family::before  {background:#C8563C}
.mg .mc.span.has-ev::after{display:none}

/* Agenda — vertical day list */
.agenda{padding:0}
.day{
  margin-bottom:14px;
  page-break-inside:avoid;
}
.day__hdr{
  display:flex;align-items:baseline;justify-content:space-between;
  font-family:'Courier New',monospace;
  font-size:.82em;letter-spacing:1.5px;
  text-transform:uppercase;
  color:#4A8B9E;
  padding:0 0 4px;
  border-bottom:1px solid rgba(74,139,158,.35);
  margin-bottom:6px;
}
.day--today{
  background:#fffaed;
  border-left:4px solid #C8563C;
  padding:10px 12px;
  margin-bottom:16px;
}
.day--today .day__hdr{
  color:#C8563C;
  font-size:.9em;font-weight:bold;letter-spacing:2px;
  border-bottom-color:rgba(200,86,60,.4);
}
.day--tomorrow{
  background:rgba(184,212,213,.25);
  border-left:3px solid #4A8B9E;
  padding:8px 12px;
  margin-bottom:14px;
}
.day--tomorrow .day__hdr{color:#1E3A52;font-weight:bold}
.day__events{display:flex;flex-direction:column;gap:5px}
.day--empty .day__events{
  color:#aaa;font-size:.82em;font-style:italic;
  font-family:'Segoe UI',sans-serif;padding:2px 0;
}

/* Event row — full title, no truncation */
.ev{
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:8px;align-items:baseline;
  font-family:'Segoe UI',sans-serif;
  font-size:.92em;line-height:1.4;
  padding:3px 0;
}
.ev__time{
  color:#666;font-family:'Courier New',monospace;
  font-size:.85em;font-weight:bold;text-align:right;
}
.ev__title{color:#1E3A52;font-weight:600}
.ev__title .loc{
  display:block;color:#888;font-weight:normal;
  font-size:.85em;font-style:italic;
}
.ev__src{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  margin-top:5px;
}
.ev__src.personal{background:#1E3A52}
.ev__src.google{background:#4A8B9E}
.ev__src.family{background:#C8563C}

/* All-day & multi-day banners — sit at the top of a day's event list */
.ev-banner{
  display:flex;align-items:center;gap:8px;
  padding:5px 9px;border-radius:3px;margin-bottom:5px;
  font-family:'Segoe UI',sans-serif;font-size:.9em;line-height:1.3;
  border-left:3px solid;
}
.ev-banner__pill{
  font-family:'Courier New',monospace;font-size:.72em;font-weight:bold;
  letter-spacing:.8px;text-transform:uppercase;
  padding:1px 6px;border-radius:2px;
  background:rgba(30,58,82,.13);color:#1E3A52;
  flex-shrink:0;white-space:nowrap;
}
.ev-banner__title{color:#1E3A52;font-weight:600;flex:1;min-width:0}
.ev-banner--personal{background:#dce8f0;border-left-color:#1E3A52}
.ev-banner--google  {background:#B8D4D5;border-left-color:#4A8B9E}
.ev-banner--family  {background:#E8C4A0;border-left-color:#C8563C}
.ev-banner--cont{opacity:.7}
.ev-banner--cont .ev-banner__pill{background:rgba(30,58,82,.07);color:#666}

/* Gap marker — collapses uneventful stretches between sections */
.day-gap{
  text-align:center;
  font-family:'Courier New',monospace;
  font-size:.72em;letter-spacing:1.5px;
  color:#888;
  padding:8px 0;margin:6px 0 12px;
  border-top:1px dashed rgba(74,139,158,.3);
  border-bottom:1px dashed rgba(74,139,158,.3);
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════════════════════════════════ */

/* At narrow viewports: switch to agenda view, drop visual chrome */
@media (max-width: 760px){
  body{padding:14px 8px}
  body::before{display:none} /* drop weathered texture overlay */
  .container{padding:10px 12px}
  .page-hdr{margin-bottom:14px;padding-bottom:10px}
  .page-hdr h1{font-size:1.3em;letter-spacing:1.5px}
  .page-hdr p{font-size:.7em;letter-spacing:1px}
  .view--mobile{display:block}
  .view--desktop{display:none}
  .legend{display:none} /* color dots inline next to events carry source info */
}

/* Inner screen — slightly more horizontal room — stack mini-grids
   side-by-side. Cover screen stays stacked. */
@media (min-width: 400px) and (max-width: 760px){
  .minigrids{flex-direction:row;gap:10px}
  .minigrids .minigrid{flex:1;min-width:0}
}

/* At very wide viewports, show the source tag inline on event cards */
@media (min-width: 1100px){
  .ecard .etag{display:inline}
}