.calendar-note-lanes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));position:relative;z-index:1;--note-band-inset:4px;gap:0}
.cal.board .cweek{position:relative}
.cal.board .calendar-note-lanes{grid-column:1/-1;position:absolute;left:0;right:0;top:48px;z-index:2;--note-band-inset:5px}
.cal.board .calendar-note-space{margin-top:28px;margin-bottom:4px}
.calendar-note-lanes:not(.board-notes){grid-column:2/-1}
.calendar-note-band,.calendar-note-row{color:var(--note-ink);background:color-mix(in srgb,var(--note-hue) 20%,var(--bg-raised));border:0;cursor:pointer}
.calendar-note-band{display:flex;align-items:center;gap:4px;height:16px;overflow:hidden;padding:0 4px;font-size:10px;text-align:left;white-space:nowrap;align-self:start;box-sizing:border-box}
.calendar-note-band svg{flex-shrink:0;width:12px;height:12px}
.calendar-note-band.no-icon svg{display:none}
.calendar-note-band span{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar-note-row{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:8px;text-align:left;width:100%;margin-bottom:0;min-height:0;white-space:nowrap;font-size:12px;line-height:16px}
/* The day pane uses a 14px flex gap; only consecutive notes tighten to 4px. */
.calendar-note-row + .calendar-note-row{margin-top:-10px}
.calendar-note-row svg{width:16px;height:16px;flex-shrink:0}
.calendar-note-row strong{flex-shrink:0;font-size:12px;line-height:16px}
.calendar-note-row small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:16px}
.board-notes .calendar-note-band{height:20px;font-size:11px;padding:0 6px}
.calendar-note-dialog{border:0;border-radius:20px;background:var(--bg);color:var(--ink);width:min(480px,calc(100vw - 24px));padding:24px;max-height:calc(100dvh - 24px);overflow:auto}
.calendar-note-dialog::backdrop{background:#0006}
.calendar-note-dialog h2{font:700 20px var(--font-stack)}
.calendar-note-dialog .note-label{display:block;font-weight:600;font-size:15px;margin:20px 0 10px}
.note-categories{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.note-categories button{display:flex;align-items:center;gap:8px;text-align:left;padding:12px;font-size:13px;min-height:44px;border:1px solid var(--separator);border-radius:12px;color:var(--note-ink);background:transparent}
.note-categories button.on{border-color:var(--note-hue);background:color-mix(in srgb,var(--note-hue) 16%,transparent)}
.note-categories svg{flex-shrink:0}
.note-dates{display:flex;flex-direction:column;gap:8px}
.note-dates label{display:flex;align-items:center;justify-content:space-between;font-size:var(--font-subheadline)}
.note-dates input{display:block;width:150px;margin-top:0;background:var(--chip);border:0;border-radius:9px;padding:8px;color:inherit;min-width:0;font:inherit}
.calendar-note-dialog textarea{width:100%;min-height:100px;background:var(--bg);color:inherit;border:1px solid var(--separator);border-radius:12px;padding:12px;font:inherit}
.calendar-note-dialog p{font-size:12px}
.calendar-note-dialog footer{display:flex;justify-content:space-between;gap:10px;margin-top:20px}
.note-confirm footer{flex-direction:row;justify-content:flex-end}
.calendar-note-dialog [data-note-remove]{color:var(--destructive)}
.multi-days-selected{outline:2px solid var(--accent);outline-offset:-2px}
.calendar-note-dialog .error{color:var(--danger)}

@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .calendar-note-band,:root:not([data-theme="light"]) .calendar-note-row,:root:not([data-theme="light"]) .note-categories button{--note-hue:var(--note-dark-hue)!important;--note-ink:var(--note-dark-ink)!important}}

.note-section{background:var(--bg-raised);padding:12px;border-radius:16px;margin-top:12px}
.calendar-note-dialog .note-section .note-label{margin:0 0 8px;font-size:var(--font-caption);font-weight:400;color:var(--ink-secondary)}
.calendar-note-dialog .secondary{color:var(--ink-secondary)}
.note-dates input{color:var(--ink);font-size:var(--font-subheadline);background:var(--bg)}
.calendar-note-dialog textarea{min-height:64px;background:var(--bg);border:0;border-radius:10px}
.note-categories button.on span{font-weight:600}

.calendar-note-dialog .note-dates ox-date{width:auto;flex:none}
.calendar-note-dialog .note-dates .ox-date-pill{min-width:9.5rem}

[data-theme="dark"] .calendar-note-band,[data-theme="dark"] .calendar-note-row,[data-theme="dark"] .note-categories button{--note-hue:var(--note-dark-hue)!important;--note-ink:var(--note-dark-ink)!important}
.note-categories button{color:var(--ink)}.note-categories button svg{color:var(--note-ink)}

.note-kind{display:flex;align-items:center;justify-content:space-between;gap:12px}.note-kind .note-label{margin:0}.note-kind ox-menu{max-width:70%}

/* Whole-week bands. Notes retain a separate lane; no note means no empty lane. */
.calendar-phase-chip{display:flex;align-items:center;gap:4px;box-sizing:border-box;width:100%;height:17px;padding:0 7px;border-radius:5px;border:0;cursor:pointer;white-space:nowrap;overflow:hidden;font:600 10.5px/17px var(--font-stack,-apple-system,sans-serif);color:var(--ink);background:color-mix(in srgb,var(--ph) 30%,var(--bg-raised))}
.calendar-phase-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.calendar-phase-chip svg{width:12px;height:12px;flex:none;color:var(--leaf)}
[data-theme="dark"] .calendar-phase-chip svg{color:var(--leaf-dark)}
.calendar-phase-chip.recovery{background:color-mix(in srgb,var(--ink) 9%,var(--bg-raised))}
.calendar-phase-label{white-space:nowrap}
.calendar-phase-slot{height:17px;min-width:0;width:100%}
.cal.board .calendar-phase-chip{height:20px;width:auto;margin:0 5px;padding:0 8px;gap:5px;font-size:11px;line-height:20px;color:#1c1c1e;background:color-mix(in srgb,var(--ph) 70%,var(--bg-raised))}
.cal.board .calendar-phase-chip.recovery{color:var(--ink);background:color-mix(in srgb,var(--ink) 9%,var(--bg-raised))}
.cal.board .calendar-phase-space{height:23px;margin-top:28px;margin-bottom:4px}
.cal.board .has-phase .calendar-note-space{margin-top:0}
.cal.board .has-phase .calendar-note-lanes{top:71px}
.cal.board .calendar-phase-lanes{position:absolute;left:0;right:0;top:48px;z-index:2;height:23px}