/* ════════════════════════════════════════════════════════════
   CALENDAR PAGE · "week, managed" redesign (Phase A walkthrough)
   Ported from the Claude Design redesign (cal2-* namespace).
   Day view = ribbon + agenda list; Week view = hour grid; right
   rail = collapsible mini-calendar + Next-up. Reuses the existing
   calendar data/handlers. Remove this block + revert renderCalendar
   to undo.
   ════════════════════════════════════════════════════════════ */
#page-calendar .cal2-layout{ display:grid; grid-template-columns:1fr 330px; gap:20px; align-items:start; }
@media (max-width:1100px){ #page-calendar .cal2-layout{ grid-template-columns:1fr; } }
#page-calendar .cal2-main{ min-width:0; display:flex; flex-direction:column; gap:18px; }
#page-calendar .cal2-side{ display:flex; flex-direction:column; gap:18px; }
/* rail collapse: hide the whole rail, main goes full width */
#page-calendar .cal2-layout.rail-collapsed{ grid-template-columns:1fr; }
#page-calendar .cal2-layout.rail-collapsed .cal2-side{ display:none; }
@media (max-width:1100px){ #page-calendar .cal2-side{ order:-1; } }

#page-calendar .cal2-ribbon{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
@media (max-width:1100px){ #page-calendar .cal2-ribbon{ grid-template-columns:repeat(4,1fr); } }
#page-calendar .cal2-day{ border:1px solid var(--line); border-radius:14px; padding:12px 13px 13px; cursor:pointer;
  background:var(--paper-1); position:relative; transition:border-color .15s, box-shadow .15s; text-align:left; width:100%; }
#page-calendar .cal2-day:hover{ border-color:var(--line-2); }
#page-calendar .cal2-day.sel{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
#page-calendar .cal2-day .dow{ font-family:'Geist Mono',monospace; font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-3); }
#page-calendar .cal2-day .dnum{ font-size:24px; font-weight:600; letter-spacing:-0.03em; color:var(--ink-0); line-height:1.1; margin-top:3px; }
#page-calendar .cal2-day.today .dnum{ color:var(--accent); }
#page-calendar .cal2-day .cnt{ font-size:11px; color:var(--ink-3); margin-top:6px; }
#page-calendar .cal2-day .load{ height:3px; border-radius:99px; background:var(--paper-3); margin-top:10px; overflow:hidden; }
#page-calendar .cal2-day .load i{ display:block; height:100%; background:var(--accent); border-radius:99px; }
#page-calendar .cal2-day .tdot{ position:absolute; top:13px; right:13px; width:5px; height:5px; border-radius:50%; background:var(--accent); }

#page-calendar .cal2-agenda{ background:var(--paper-1); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-sm); overflow:hidden; }
#page-calendar .cal2-ag-hd{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:18px 22px; border-bottom:1px solid var(--line); }
#page-calendar .cal2-ag-hd .d{ font-size:16px; font-weight:600; letter-spacing:-0.02em; color:var(--ink-0); }
#page-calendar .cal2-ag-hd .m{ font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-3); text-align:right; }
#page-calendar .cal2-list{ padding:6px 22px 16px; }
#page-calendar .cal2-ev{ display:grid; grid-template-columns:62px 1fr; gap:16px; padding:15px 0; border-top:1px solid var(--line); cursor:pointer; }
#page-calendar .cal2-ev:first-child{ border-top:0; }
#page-calendar .cal2-ev:hover .cal2-etitle{ color:var(--accent); }
#page-calendar .cal2-time{ display:flex; flex-direction:column; gap:3px; padding-top:1px; }
#page-calendar .cal2-time b{ font-family:'Geist Mono',monospace; font-size:12px; font-weight:500; color:var(--ink-1); }
#page-calendar .cal2-time span{ font-family:'Geist Mono',monospace; font-size:9.5px; color:var(--ink-4); }
#page-calendar .cal2-ebody{ border-left:2px solid var(--line-2); padding-left:16px; min-width:0; }
#page-calendar .cal2-ev.t-meeting .cal2-ebody{ border-color:var(--accent); }
#page-calendar .cal2-ev.t-focus .cal2-ebody{ border-color:var(--good); }
#page-calendar .cal2-ev.t-hold .cal2-ebody{ border-color:var(--warn); }
#page-calendar .cal2-ev.t-solo .cal2-ebody{ border-color:var(--ink-3); }
#page-calendar .cal2-ev.t-eod .cal2-ebody{ border-color:var(--ink-4); border-left-style:dashed; }
#page-calendar .cal2-etitle{ font-size:14px; font-weight:500; color:var(--ink-0); letter-spacing:-0.01em; line-height:1.35; transition:color .12s; }
#page-calendar .cal2-ewho{ font-size:12px; color:var(--ink-3); margin-top:3px; }
#page-calendar .cal2-tag{ font-family:'Geist Mono',monospace; font-size:8.5px; letter-spacing:0.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; color:var(--accent); background:var(--accent-soft);
  display:inline-block; vertical-align:middle; margin-left:8px; transform:translateY(-1px); white-space:nowrap; }
#page-calendar .cal2-empty{ padding:36px 12px; text-align:center; color:var(--ink-3); font-size:12.5px; line-height:1.5; }

#page-calendar .cal2-card{ background:var(--paper-1); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm); padding:20px 22px; }
#page-calendar .cal2-card .lbl{ font-family:'Geist Mono',monospace; font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; }
#page-calendar .cal2-prep .pt{ font-size:15px; font-weight:600; letter-spacing:-0.02em; color:var(--ink-0); line-height:1.2; }
#page-calendar .cal2-prep .pw{ font-family:'Geist Mono',monospace; font-size:10px; color:var(--accent); letter-spacing:0.06em; text-transform:uppercase; margin-top:5px; }
#page-calendar .cal2-prep .pp{ font-size:12.5px; color:var(--ink-2); line-height:1.55; margin:11px 0 15px; }
#page-calendar .cal2-prep .pf{ display:flex; gap:7px; flex-wrap:wrap; }

#page-calendar .cal2-mini{ padding:16px 18px; }
#page-calendar .cal2-mini-hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
#page-calendar .cal2-mini-label{ font-size:13px; font-weight:600; letter-spacing:-0.01em; color:var(--ink-0); }
#page-calendar .cal2-mini-nav{ display:flex; align-items:center; gap:2px; }
#page-calendar .cal2-mini-nav button{ width:26px; height:26px; border-radius:7px; border:1px solid transparent; background:transparent;
  color:var(--ink-2); cursor:pointer; font-size:15px; line-height:1; display:grid; place-items:center; }
#page-calendar .cal2-mini-nav button:hover{ background:var(--paper-2); color:var(--ink-0); }
#page-calendar .cal2-mini-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
#page-calendar .cal2-mini-wd{ text-align:center; font-family:'Geist Mono',monospace; font-size:8.5px; letter-spacing:0.04em; color:var(--ink-4); padding-bottom:6px; }
#page-calendar .cal2-mini-day{ position:relative; aspect-ratio:1; display:grid; place-items:center; font-size:11.5px; color:var(--ink-1);
  border-radius:8px; cursor:pointer; border:0; background:transparent; transition:background .12s,color .12s; }
#page-calendar .cal2-mini-day:hover{ background:var(--paper-2); }
#page-calendar .cal2-mini-day.off{ color:var(--ink-4); opacity:.55; }
#page-calendar .cal2-mini-day.today{ color:var(--accent); font-weight:600; box-shadow:inset 0 0 0 1px var(--accent-line); }
#page-calendar .cal2-mini-day.picked{ background:var(--accent); color:#fff; font-weight:600; box-shadow:none; }
#page-calendar .cal2-mini-day.picked:hover{ background:var(--accent); }
#page-calendar .cal2-mini-day .ed{ position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:3px; height:3px; border-radius:50%; background:var(--accent); }
#page-calendar .cal2-mini-day.picked .ed{ background:#fff; }

#page-calendar .cal2-board{ }
@media (max-width:1100px){ #page-calendar .cal2-board{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; } #page-calendar .cal2-wk{ min-width:780px; } }
#page-calendar .cal2-wk{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--paper-1); box-shadow:var(--shadow-sm); }
#page-calendar .cal2-wk-head{ display:grid; grid-template-columns:54px repeat(7,1fr); border-bottom:1px solid var(--line); background:var(--paper-2); }
#page-calendar .cal2-wk-dh{ padding:9px 6px 10px; text-align:center; border-left:1px solid var(--line); cursor:pointer; border-top:0; border-right:0; border-bottom:0; background:transparent; }
#page-calendar .cal2-wk-dh:first-child{ border-left:0; }
#page-calendar .cal2-wk-dh:hover{ background:var(--paper-1); }
#page-calendar .cal2-wk-dh .wd{ display:block; font-family:'Geist Mono',monospace; font-size:8.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); }
#page-calendar .cal2-wk-dh .wn{ display:block; font-size:17px; font-weight:600; letter-spacing:-0.02em; color:var(--ink-0); margin-top:2px; }
#page-calendar .cal2-wk-dh.today{ background:var(--accent-soft); }
#page-calendar .cal2-wk-dh.today .wn{ color:var(--accent); }
#page-calendar .cal2-wk-body{ display:grid; grid-template-columns:54px repeat(7,1fr); position:relative; }
#page-calendar .cal2-wk-hour{ height:60px; font-family:'Geist Mono',monospace; font-size:9px; color:var(--ink-4); text-align:right; padding:3px 7px 0 0; box-sizing:border-box; }
#page-calendar .cal2-wk-col{ position:relative; border-left:1px solid var(--line); }
#page-calendar .cal2-wk-col:first-of-type{ border-left:0; }
#page-calendar .cal2-wk-col.today{ background:color-mix(in oklch, var(--accent) 5%, transparent); }
#page-calendar .cal2-wk-line{ height:60px; border-top:1px solid var(--line); box-sizing:border-box; }
#page-calendar .cal2-wk-line:first-child{ border-top:0; }
#page-calendar .cal2-wk-ev{ position:absolute; border-radius:7px; padding:4px 7px; overflow:hidden; cursor:pointer;
  background:var(--paper-2); border:1px solid var(--line); border-left:2.5px solid var(--ink-3); box-sizing:border-box; }
#page-calendar .cal2-wk-ev.t-meeting{ border-left-color:var(--accent); background:var(--accent-soft); }
#page-calendar .cal2-wk-ev.t-focus{ border-left-color:var(--good); background:color-mix(in oklch,var(--good) 12%,transparent); }
#page-calendar .cal2-wk-ev.t-hold{ border-left-color:var(--warn); background:color-mix(in oklch,var(--warn) 12%,transparent); }
#page-calendar .cal2-wk-ev.t-solo{ border-left-color:var(--ink-3); }
#page-calendar .cal2-wk-ev .et{ font-family:'Geist Mono',monospace; font-size:8.5px; color:var(--ink-3); }
#page-calendar .cal2-wk-ev .en{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:11px; color:var(--ink-0); font-weight:500; line-height:1.25; margin-top:1px; }
#page-calendar .cal2-now{ position:absolute; height:2px; background:var(--bad); z-index:3; pointer-events:none; }
#page-calendar .cal2-now::before{ content:''; position:absolute; left:-3px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--bad); }