:root{color-scheme:dark;--ice:#e9fdff;--paper:#cfe6ee;--muted:#86a7b3;--cyan:#50d8fa;--blue:#3786f7;--line:rgba(80,216,250,.16)}*{box-sizing:border-box}body{margin:0;color:var(--paper);font:15px/1.5 'Manrope',system-ui,sans-serif;background:radial-gradient(900px 540px at 90% -10%,#103e55 0,transparent 65%),linear-gradient(#50d8fa0a 1px,transparent 1px),linear-gradient(90deg,#50d8fa0a 1px,transparent 1px),#01090c;background-size:auto,48px 48px,48px 48px;min-height:100vh}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}[hidden]{display:none!important}.shell{max-width:1750px;margin:auto;padding:0 clamp(16px,3.3vw,54px)}.topbar{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand,.top-right{display:flex;align-items:center;gap:20px}.brand img{width:116px;max-height:48px}.brand-divider{height:25px;width:1px;background:#365965;transform:skewX(-18deg)}.brand-product,.eyebrow,.private-label,.text-button,.footnote,label,.secondary,.primary,.danger{font-family:'Barlow',system-ui,sans-serif;font-weight:700;letter-spacing:.13em;font-size:11px}.brand-product{color:var(--ice);font-size:14px;letter-spacing:.17em}.private-label{color:#94b7c1}.status-dot{display:inline-block;width:7px;height:7px;background:#5cf0b0;box-shadow:0 0 10px #5cf0b0;border-radius:50%;margin-right:8px}.text-button{color:var(--muted);background:none;border:0;padding:12px}main{padding:48px 0}.intro{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:34px}.eyebrow{margin:0 0 10px;color:var(--cyan);font-size:10px}.eyebrow span,.footnote span{color:#477584;margin:0 9px}h1,h2,p{margin-top:0}.intro h1,.login h1{font-size:clamp(34px,4vw,58px);line-height:1.1;letter-spacing:-.045em;margin:0 0 10px;color:var(--ice);font-weight:650}.intro>div>p:last-child{color:var(--muted);margin:0}.accent{color:var(--cyan)}.primary{background:linear-gradient(100deg,#3786f7,#50d8fa);color:#00151c;border:0;padding:16px 23px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);min-height:48px;transition:filter .18s,transform .18s}.primary:active,.secondary:active,.icon-button:active{transform:scale(.96)}.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px}.plate{position:relative;background:linear-gradient(160deg,#0a2029,#041015 60%);border:1px solid #1c4856;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}.month-head,.agenda-head{display:flex;justify-content:space-between;align-items:center;padding:25px 26px;border-bottom:1px solid var(--line)}h2{font-size:24px;color:var(--ice);letter-spacing:-.035em;margin:0}.month-actions{display:flex;gap:8px}.secondary,.icon-button{color:var(--paper);background:#09202a;border:1px solid #28515e;min-height:40px}.secondary{padding:0 15px}.icon-button{width:40px;font-size:23px;line-height:1}.month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.weekday{color:#89aab5;font:700 10px system-ui;letter-spacing:.1em;text-align:center;padding:14px 4px;border-bottom:1px solid var(--line)}.day{min-width:0;min-height:112px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 9px}.day:nth-child(7n){border-right:0}.day-number{font:600 13px system-ui;color:#cfe6ee;display:inline-grid;place-items:center;width:25px;height:25px}.day.outside .day-number{color:#4d6c76}.day.today .day-number{color:#00191c;background:var(--cyan);font-weight:800}.event-chip{display:block;text-align:left;width:100%;margin:6px 0 0;padding:5px 7px;border:0;border-left:2px solid #50d8fa;color:#dff9ff;background:#0c3444;font-size:11px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-chip small{display:block;color:#87cddd;font-size:10px}.agenda-head{padding:25px 23px}.agenda-icon{color:var(--cyan);font-size:20px}.agenda-item{padding:19px 23px;display:grid;grid-template-columns:52px 1fr;gap:12px;border-bottom:1px solid var(--line);width:100%;text-align:left;background:none;color:inherit;border-top:0;border-left:0;border-right:0}.agenda-date{font:700 11px/1.5 system-ui;letter-spacing:.06em;color:#87adba;text-transform:uppercase}.agenda-detail{border-left:2px solid var(--cyan);padding-left:12px;min-width:0}.agenda-detail strong{display:block;color:var(--ice);font-size:14px;overflow-wrap:anywhere}.agenda-detail small{display:block;color:var(--muted);margin-top:2px}.empty{padding:25px 23px;color:var(--muted);font-size:13px}.footnote{color:#537580;font-size:9px;margin:22px 0}.message{color:#ffc24d;margin:18px 0;white-space:pre-wrap}.login{max-width:620px;margin:8vh auto;padding:clamp(30px,6vw,70px)}.login h1{margin:18px 0}.login h1 em{font-style:normal;color:var(--cyan)}.login>p:not(.eyebrow){color:var(--muted);max-width:410px}.login .primary{margin:18px 0 8px}.login .primary span{margin-left:25px}.hint{font-size:12px}dialog{width:min(540px,calc(100vw - 32px));color:var(--paper);background:#06171e;border:1px solid #377283;padding:0;box-shadow:0 24px 100px #000b}dialog::backdrop{background:#000c}form{padding:28px}.dialog-heading{display:flex;justify-content:space-between;align-items:start;margin-bottom:25px}label{display:block;color:#91b7c3;margin:17px 0 0}.optional{font-weight:400;color:#66818b}input,textarea{display:block;width:100%;margin-top:7px;background:#031016;border:1px solid #28515e;color:var(--ice);padding:12px;font:14px system-ui;resize:vertical}input::placeholder,textarea::placeholder{color:#5f808b}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.dialog-actions{display:flex;justify-content:space-between;gap:15px;margin-top:24px}.dialog-actions .primary{margin-left:auto}.danger{border:0;background:none;color:#ff8a80;padding:12px}.form-error{color:#ff8a80;margin:12px 0 0;font-size:13px}@media(max-width:900px){.layout{grid-template-columns:1fr}.agenda{min-height:180px}.day{min-height:94px}}@media(max-width:600px){main{padding:32px 0}.private-label{display:none}.brand img{width:94px}.brand,.top-right{gap:10px}.intro{align-items:start;flex-direction:column}.intro .add{width:100%}.month-head{padding:20px 15px}.month-head h2{font-size:20px}.month-actions{gap:5px}.secondary{padding:0 8px}.icon-button{width:36px}.day{min-height:75px;padding:5px 3px}.day-number{font-size:11px}.event-chip{font-size:0;padding:4px 2px;min-height:8px}.event-chip small{font-size:0}.weekday{font-size:9px}.form-row{grid-template-columns:1fr;gap:0}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@font-face{font-family:Barlow;src:url('/assets/Barlow-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}@font-face{font-family:Barlow;src:url('/assets/Barlow-Bold.ttf') format('truetype');font-weight:700;font-display:swap}@font-face{font-family:Manrope;src:url('/assets/Manrope-Regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Manrope;src:url('/assets/Manrope-SemiBold.ttf') format('truetype');font-weight:600 700;font-display:swap}@media(max-width:600px){.event-chip{font-size:10px;min-height:26px;padding:4px;white-space:nowrap}.event-chip small{display:none}}

/* Readability and interaction measurements shared across the calendar. */
.eyebrow { font-size: 12px; letter-spacing: .11em; }
.brand-product, .secondary, .primary, .text-button, .danger { font-size: 12px; }
.icon-button { width: 44px; min-height: 44px; }
.secondary { min-height: 44px; }
button { touch-action: manipulation; }
button:disabled { cursor: wait; opacity: .62; }
.primary, .secondary, .icon-button, .text-button, .danger {
  transition: transform 120ms cubic-bezier(.2, 0, 0, 1), filter 120ms cubic-bezier(.2, 0, 0, 1);
}
.weekday { font-size: 12px; }
.day-number { font-size: 14px; }
.event-chip { font-size: 12px; line-height: 1.4; }
.event-chip small { font-size: 11px; }
.agenda-date { font-size: 12px; }
.agenda-detail strong { font-size: 15px; }
.agenda-detail small, .empty { font-size: 14px; }
.day-selector, .selected-day { display: none; }
dialog { max-height: min(90dvh, 760px); overflow-y: auto; }
input, textarea { font-size: 16px; min-height: 44px; }
label { font-size: 12px; }
@media (hover: hover) and (pointer: fine) {
  .primary:hover { filter: brightness(1.12); }
  .secondary:hover, .icon-button:hover, .event-chip:hover, .agenda-item:hover, .text-button:hover, .danger:hover { filter: brightness(1.3); }
}
@media (max-width: 600px) {
  .month-head { flex-wrap: wrap; gap: 16px; padding: 20px 16px; }
  .month-actions { gap: 6px; margin-left: auto; }
  .icon-button { width: 44px; min-height: 44px; }
  .secondary { min-height: 44px; padding-inline: 12px; }
  .month-grid .weekday { font-size: 11px; padding: 12px 2px; }
  .month-grid .day { min-height: 54px; padding: 0; }
  .day-number, .event-chip { display: none; }
  .day-selector { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; border: 0; background: transparent; color: var(--paper); font: 600 14px 'Manrope', system-ui, sans-serif; }
  .outside .day-selector { color: #73919b; }
  .today .day-selector { color: var(--cyan); font-weight: 700; }
  .selected .day-selector { background: #164053; color: var(--ice); box-shadow: inset 0 0 0 2px var(--cyan); }
  .day-selector:focus-visible { outline-offset: -4px; }
  .day-dot { position: absolute; bottom: 6px; width: 5px; height: 5px; background: var(--cyan); border-radius: 50%; }
  .selected-day { display: block; }
  .selected-day-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 23px; border-bottom: 1px solid var(--line); }
  .selected-day-head h2 { font-size: 20px; }
  .day-count { flex: none; color: #9cbfc9; font: 700 11px 'Barlow', system-ui, sans-serif; letter-spacing: .1em; }
  .selected-event { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 68px; padding: 14px 23px; color: var(--paper); text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); }
  .selected-event-detail { min-width: 0; border-left: 2px solid var(--cyan); padding-left: 12px; }
  .selected-event-detail strong, .selected-event-detail small { display: block; overflow-wrap: anywhere; }
  .selected-event-detail strong { color: var(--ice); font-size: 15px; }
  .selected-event-detail small { color: var(--muted); font-size: 13px; margin-top: 3px; }
  .selected-event-arrow { color: var(--cyan); font-size: 24px; line-height: 1; }
  .footnote { font-size: 10px; }
}
@media (max-width: 350px) { .shell { padding-inline: 0; } .topbar, .intro, .footnote, .message { margin-inline: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .primary:active, .secondary:active, .icon-button:active { transform: none; }
}
@media (max-width: 600px) {
  .selected-day-actions { padding: 14px 23px 20px; }
  .selected-day-actions button { width: 100%; }
}
.primary:active:focus-visible, .secondary:active:focus-visible, .icon-button:active:focus-visible { transform: none; }
.loading { color: var(--muted); font-size: 15px; padding: 24px 0; }
.primary:focus-visible { box-shadow: inset 0 0 0 3px #03171c, inset 0 0 0 5px #e9fdff; }

/* Atmospheric calendar and live visual moods. */
:root, :root[data-theme="midnight"] {
  --scene: url('/assets/lofi-midnight.webp');
  --scene-tint: rgba(1, 9, 17, .30);
  --scene-saturate: 1;
  --mood-accent: #68def5;
  --mood-border: rgba(121, 220, 242, .29);
  --mood-panel: rgba(3, 16, 25, .82);
  --mood-grid: rgba(3, 16, 25, .63);
}
:root[data-theme="rain"] {
  --scene: url('/assets/lofi-rain.webp');
  --scene-tint: rgba(7, 20, 28, .23);
  --scene-saturate: .7;
  --mood-accent: #a7e8d9;
  --mood-border: rgba(160, 228, 214, .28);
  --mood-panel: rgba(7, 23, 27, .84);
  --mood-grid: rgba(6, 22, 26, .66);
  --cyan: #a7e8d9;
  --blue: #68aaa7;
}
:root[data-theme="sunset"] {
  --scene: url('/assets/lofi-sunset.webp');
  --scene-tint: rgba(19, 8, 20, .27);
  --scene-saturate: 1;
  --mood-accent: #ffca9c;
  --mood-border: rgba(255, 193, 153, .31);
  --mood-panel: rgba(29, 14, 27, .86);
  --mood-grid: rgba(25, 13, 26, .70);
  --cyan: #ffca9c;
  --blue: #db8e98;
}
html.theme-changing *, html.theme-changing *::before, html.theme-changing *::after { transition: none !important; }
body { isolation: isolate; background: #030d12; }
body::before, body::after { content: ''; position: fixed; z-index: -2; pointer-events: none; inset: -3%; }
body::before {
  background-image: linear-gradient(var(--scene-tint),var(--scene-tint)), var(--scene);
  background-position: center;
  background-size: cover;
  filter: saturate(var(--scene-saturate));
  animation: scene-drift 60s ease-in-out infinite alternate;
  transform-origin: 50% 50%;
}
body::after {
  z-index: -1;
  background: linear-gradient(180deg,rgba(1,8,14,.34),rgba(1,8,14,.16) 45%,rgba(1,8,14,.58)), repeating-linear-gradient(108deg,transparent 0 66px,rgba(216,247,255,.045) 67px,transparent 68px 134px);
  opacity: .8;
  animation: atmosphere-drift 9s linear infinite;
}
:root[data-theme="sunset"] body::after { background: linear-gradient(180deg,rgba(19,8,20,.35),rgba(19,8,20,.12) 45%,rgba(19,8,20,.65)), radial-gradient(circle at 75% 24%,rgba(255,187,133,.10),transparent 38%); animation: sunset-glow 14s ease-in-out infinite alternate; }
@keyframes scene-drift { from { transform: scale(1.01) translate3d(-.25%,0,0); } to { transform: scale(1.06) translate3d(.25%,-.3%,0); } }
@keyframes atmosphere-drift { from { transform: translate3d(0,-3%,0); } to { transform: translate3d(-1%,3%,0); } }
@keyframes sunset-glow { from { opacity: .65; } to { opacity: .9; } }
.shell { position: relative; }
.topbar { border-color: var(--mood-border); }
.plate { background: var(--mood-panel); border-color: var(--mood-border); box-shadow: 0 18px 60px rgba(0,0,0,.22); }
.month { background: var(--mood-grid); }
.month-head, .agenda-head, .selected-day-head { background: rgba(2,12,19,.58); }
.day { background: rgba(2,12,19,.16); }
.day-number { color: #f4fdff; text-shadow: 0 1px 5px #000, 0 0 9px #000; }
.event-chip { color: #f4fdff; background: rgba(3,27,39,.94); border-left-color: var(--mood-accent); }
.event-chip small { color: #b6e5ef; }
.selected .day-selector { box-shadow: inset 0 0 0 2px var(--mood-accent); }
.day-dot { background: var(--mood-accent); }
.agenda-detail, .selected-event-detail { border-left-color: var(--mood-accent); }
.eyebrow, .agenda-icon, .selected-event-arrow, .accent { color: var(--mood-accent); }
.primary { background: linear-gradient(100deg,var(--blue),var(--mood-accent)); }

/* Theme picker: clear labels and a generous pointer target. */
.theme-switcher { position: relative; z-index: 30; }
.theme-trigger { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--mood-border); background: rgba(4,17,25,.76); color: var(--ice); font: 600 13px 'Manrope',system-ui,sans-serif; }
.theme-trigger::before { content: 'THEME'; color: #acc6ce; font: 700 10px 'Barlow',system-ui,sans-serif; letter-spacing: .12em; }
.theme-trigger-icon { color: var(--mood-accent); font-size: 18px; line-height: 1; }
.theme-trigger-chevron { color: #a7c4cc; font-size: 16px; }
.theme-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(330px,calc(100vw - 24px)); padding: 20px; background: #081a23; border: 1px solid var(--mood-border); box-shadow: 0 20px 60px rgba(0,0,0,.62); color: var(--ice); }
.theme-panel-heading { margin-bottom: 14px; }
.theme-panel-kicker { color: var(--mood-accent); font: 700 11px 'Barlow',system-ui,sans-serif; letter-spacing: .12em; margin: 0 0 6px; }
.theme-panel-title { font-size: 20px; }
.theme-options { display: grid; gap: 6px; }
.theme-option { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 9px; text-align: left; background: rgba(255,255,255,.025); border: 1px solid transparent; color: var(--ice); }
.theme-option[aria-checked="true"] { border-color: var(--mood-accent); background: rgba(129,200,214,.12); }
.theme-swatch { flex: none; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.15); background: linear-gradient(140deg,#172d52,#2b738b 54%,#e1b47a); }
.theme-option[data-theme-choice="rain"] .theme-swatch { background: linear-gradient(140deg,#233745,#4b7473 56%,#a7c7bc); }
.theme-option[data-theme-choice="sunset"] .theme-swatch { background: linear-gradient(140deg,#32243e,#a75e68 54%,#f4bc85); }
.theme-option-copy { display: grid; flex: 1; gap: 2px; }
.theme-option-name { font-size: 14px; }
.theme-option-description { color: #a6c0c8; font-size: 12px; }
.theme-option-check { color: var(--mood-accent); font-size: 18px; visibility: hidden; }
.theme-option[aria-checked="true"] .theme-option-check { visibility: visible; }

/* A single action surface for right-click, tap and touch-and-hold. */
.quick-menu { position: fixed; z-index: 100; width: min(300px,calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 8px; background: #081a23; border: 1px solid var(--mood-border); box-shadow: 0 22px 70px rgba(0,0,0,.68); color: var(--ice); }
.quick-menu[hidden] { display: none; }
.quick-menu-head { padding: 12px 12px 10px; border-bottom: 1px solid rgba(170,220,230,.16); }
.quick-menu-title { display: block; color: #f1fdff; font: 700 15px/1.4 'Manrope',system-ui,sans-serif; overflow-wrap: anywhere; }
.quick-menu-meta, .quick-menu-details { color: #b2cad0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.quick-menu-actions { display: grid; padding-top: 5px; }
.quick-menu-item { width: 100%; min-height: 44px; padding: 10px 12px; text-align: left; border: 0; background: transparent; color: var(--ice); font: 600 14px 'Manrope',system-ui,sans-serif; }
.quick-menu-item.is-destructive { color: #ffaea4; }
.quick-menu-item.is-pressed, .quick-menu-item:focus-visible { background: rgba(139,216,232,.19); outline: 2px solid var(--mood-accent); outline-offset: -2px; }
.quick-menu-target { -webkit-touch-callout: none; user-select: none; }
@media (hover:hover) and (pointer:fine) { .theme-trigger:hover,.theme-option:hover,.quick-menu-item:hover { background-color: rgba(139,216,232,.14); } }
@media (max-width: 600px) {
  .top-right { gap: 4px; }
  .theme-trigger { padding: 0 10px; }
  .theme-trigger::before, .theme-trigger-chevron { display: none; }
  .theme-trigger-name { font-size: 12px; }
  .month-head, .agenda-head, .selected-day-head { background: rgba(2,12,19,.65); }
}
@media (max-width: 360px) { .theme-trigger-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
@media (prefers-reduced-motion: reduce) { body::before,body::after { animation: none !important; } }
:root[data-theme="midnight"] body::after, :root:not([data-theme]) body::after {
  background: linear-gradient(180deg,rgba(1,8,14,.34),rgba(1,8,14,.15) 45%,rgba(1,8,14,.58)), radial-gradient(circle at 76% 20%,rgba(128,205,255,.09),transparent 30%);
  animation: sunset-glow 16s ease-in-out infinite alternate;
}
.quick-menu-eyebrow { display: block; margin-bottom: 5px; color: var(--mood-accent); font: 700 10px 'Barlow',system-ui,sans-serif; letter-spacing: .13em; }
.quick-menu-meta { display: block; margin-top: 3px; }
.quick-menu-details { display: grid; gap: 5px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(170,220,230,.14); }
.quick-menu-detail { display: block; white-space: pre-wrap; }
.quick-menu-item { display: flex; align-items: center; gap: 12px; }
.quick-menu-item::before { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; color: var(--mood-accent); font: 600 18px system-ui,sans-serif; }
.quick-menu-item[data-action="view-details"]::before { content: '⌄'; }
.quick-menu-item[data-action="edit-event"]::before { content: '✎'; }
.quick-menu-item[data-action="duplicate-event"]::before { content: '⧉'; }
.quick-menu-item[data-action="add-event"]::before, .quick-menu-item[data-action="add-event-on-this-day"]::before { content: '+'; }
.quick-menu-item[data-action="delete-event"]::before { content: '×'; color: #ffaea4; }
.quick-menu-item[data-action="go-to-today"]::before { content: '◷'; }
.quick-menu-item[data-action="view-this-day"]::before { content: '◫'; }
@media (prefers-reduced-motion: reduce) { :root[data-theme="midnight"] body::after, :root:not([data-theme]) body::after { animation: none; } }
.quick-hint { margin: 0; padding: 12px 20px; border-top: 1px solid var(--line); color: #b4ccd2; background: rgba(2,12,19,.62); font: 400 12px/1.5 'Manrope',system-ui,sans-serif; }
@media (max-width: 600px) { .quick-hint { padding: 12px 16px; } }
.day:focus-visible { outline: 2px solid var(--mood-accent); outline-offset: -3px; }

/* A shared 8px rhythm, readable event cards, and consistent control geometry. */
:root { --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; }
.shell { max-width: 1680px; }
main { padding-block: 40px; }
.intro { margin-bottom: var(--space-4); gap: var(--space-3); }
.intro h1, .login h1 { font-size: clamp(36px,3.8vw,54px); line-height: 1.12; letter-spacing: -.035em; }
.intro h1, .intro > div > p { text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.intro > div > p:last-child { color: #d1e4e9; }
.month-head, .agenda-head { min-height: 104px; padding: 24px; }
.month-head .eyebrow, .agenda-head .eyebrow { margin-bottom: 8px; }
.layout { grid-template-columns: minmax(0,1fr) minmax(288px, 320px); gap: var(--space-3); align-items: start; }
.weekday { color: #bbd4db; font-size: 12px; line-height: 1.25; padding-block: 16px; }
.day { min-height: 120px; padding: 8px; }
.day-number { width: 28px; height: 28px; font-size: 14px; font-variant-numeric: tabular-nums; }
.day.outside .day-number { color: #a1bac2; }
.event-chip { min-height: 44px; margin-top: 8px; padding: 6px 8px; font-size: 13px; font-weight: 600; line-height: 1.3; }
.event-chip small { font-size: 11px; font-weight: 400; line-height: 1.35; font-variant-numeric: tabular-nums; }
.agenda-head { padding-inline: 24px; }
.agenda-icon { width: 8px; height: 8px; flex: none; background: var(--mood-accent); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--mood-accent) 14%, transparent); }
.agenda-item { padding: 20px 24px; grid-template-columns: 56px minmax(0,1fr); gap: 16px; min-height: 80px; }
.agenda-date { color: #bfd9df; font-size: 12px; font-variant-numeric: tabular-nums; }
.agenda-detail { padding-left: 16px; }
.agenda-detail small { color: #bbd4db; line-height: 1.45; }
.footnote { color: #bad2d9; font-size: 11px; line-height: 1.5; text-shadow: 0 1px 6px #000; }
.footnote span, .eyebrow span { color: #9bbcc5; }
.theme-trigger { min-width: 44px; justify-content: center; }
.control-icon, .menu-icon { display: block; width: 20px; height: 20px; flex: none; }
.menu-icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--mood-accent); }
.quick-menu-item.is-destructive .menu-icon { color: #ffaea4; }
.quick-menu-item::before { content: none !important; }
.primary.add, #selected-day-add { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.primary.add { padding-inline: 20px 24px; }
.icon-button { display: inline-grid; place-items: center; }
.quick-menu { padding: 8px; }
.quick-menu-head { padding: 16px 12px 12px; }
.quick-menu-actions { gap: 2px; padding-top: 8px; }
.quick-menu-item { gap: 12px; min-height: 44px; padding: 10px 12px; }
.theme-option { padding: 10px; }
.theme-swatch { width: 40px; height: 40px; border-color: rgba(255,255,255,.10); }
.quick-hint { padding: 12px 24px; color: #c8dbe0; }
@media (hover:hover) and (pointer:fine) {
  .event-chip:hover, .agenda-item:hover, .selected-event:hover { filter: none; background-color: rgba(102,185,206,.19); }
}
@media (max-width: 1100px) {
  .layout { grid-template-columns: minmax(0,1fr); }
  .agenda { min-height: 0; }
}
@media (max-width: 600px) {
  main { padding-block: 24px; }
  .intro { gap: 20px; margin-bottom: 24px; }
  .intro h1 { font-size: clamp(32px,9vw,40px); }
  .layout { gap: 16px; }
  .month-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; min-height: 88px; padding: 16px; }
  .month-head h2 { font-size: clamp(17px,4.8vw,20px); line-height: 1.2; }
  .month-head .eyebrow { margin-bottom: 4px; }
  .month-actions { gap: 4px; margin-left: 0; }
  .month-actions .secondary { padding-inline: 8px; }
  .month-grid .day { min-height: 54px; padding: 0; }
  .month-grid .weekday { padding-block: 12px; }
  .day-selector { min-height: 54px; }
  .agenda-head, .selected-day-head { min-height: 88px; padding: 20px; }
  .agenda-item { padding: 16px 20px; }
  .selected-event { padding: 16px 20px; }
  .quick-hint { padding: 12px 16px; }
}
@media (min-width: 1101px) { .layout { grid-template-columns: minmax(0,1fr) minmax(320px,360px); } }
@media (min-width: 601px) { .day { min-height: 104px; } }
@media (max-width: 360px) { .theme-trigger::before { display: inline; font-size: 11px; } }
@media (min-width: 601px) {
  main { padding-block: 32px; }
  .intro { margin-bottom: 24px; }
  .intro h1 { font-size: clamp(36px,3.5vw,48px); }
  .month-head, .agenda-head { min-height: 96px; padding-block: 20px; }
  .weekday { padding-block: 12px; }
  .event-chip { white-space: normal; }
  .event-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
}
@media (max-width: 400px) {
  .brand { gap: 6px; }
  .brand img { width: 64px; }
  .brand-divider { display: none; }
  .brand-product { font-size: 12px; letter-spacing: .12em; }
  .top-right { gap: 4px; }
  .theme-trigger { gap: 6px; padding-inline: 8px; }
  #signout { min-height: 44px; padding-inline: 8px; white-space: nowrap; }
}
.optional { color: #a8c2ca; }
input::placeholder, textarea::placeholder { color: #97b2bb; }
.text-button { min-height: 44px; }

/* Clear glass lets the scene read through the calendar; text sits on darker ink. */
:root, :root[data-theme="midnight"] {
  --glass-calendar: rgba(4, 18, 29, .43);
  --glass-panel: rgba(4, 18, 29, .63);
}
:root[data-theme="rain"] {
  --glass-calendar: rgba(6, 24, 27, .44);
  --glass-panel: rgba(6, 24, 27, .65);
}
:root[data-theme="sunset"] {
  --glass-calendar: rgba(28, 14, 29, .45);
  --glass-panel: rgba(28, 14, 29, .66);
}
.month, .agenda, .selected-day {
  background: var(--glass-panel);
  -webkit-backdrop-filter: blur(7px) saturate(135%);
  backdrop-filter: blur(7px) saturate(135%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.035), 0 18px 60px rgba(0,0,0,.25);
  border-color: rgba(225,248,255,.24);
}
.month { background: var(--glass-calendar); }
.month-head, .agenda-head, .selected-day-head { background: rgba(3,15,25,.48); }
.weekday { background: rgba(2,13,22,.48); }
.day { background: rgba(2,13,22,.12); }
.day-number { background: rgba(2,13,22,.72); border-radius: 3px; }
.day.outside .day-number { color: #c1d6dc; }
.day.today .day-number { background: var(--cyan); color: #00191c; text-shadow: none; }
.agenda-date, .agenda-detail, .selected-event-detail { text-shadow: 0 1px 4px #000, 0 0 12px #000; }
.agenda-item { background: rgba(2,13,22,.24); }
.quick-hint { background: rgba(2,13,22,.70); }
.theme-panel, .quick-menu {
  background: rgba(5,21,30,.89);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 22px 70px rgba(0,0,0,.64);
}
@media (max-width: 600px) {
  .day-selector { color: #f1fbfd; text-shadow: 0 1px 4px #000, 0 0 9px #000; }
  .outside .day-selector { color: #d0e2e6; }
  .selected .day-selector { background: rgba(24,75,94,.78); }
  .selected-event { background: rgba(2,13,22,.24); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .month, .agenda, .selected-day { background: rgba(3,16,25,.78); }
  .theme-panel, .quick-menu { background: #081a23; }
}

/* Date numerals stay crisp over glass without a solid tile on every day. */
.day-number {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border-radius: 50%;
  color: #f4fcff;
  font: 700 15px/1 'Manrope', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-shadow: 0 1px 3px #000, 0 0 7px #000, 0 0 14px #000;
}
.day.outside .day-number { color: #d0e0e4; }
.day.today .day-number {
  background: linear-gradient(135deg,var(--blue),var(--mood-accent));
  color: #00151c;
  box-shadow: 0 0 0 3px rgba(140,225,240,.16), 0 3px 12px rgba(0,0,0,.35);
  text-shadow: none;
}
@media (max-width: 600px) {
  .day-label {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font: 700 15px/1 'Manrope', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
  }
  .day-selector { text-shadow: 0 1px 3px #000, 0 0 7px #000, 0 0 14px #000; }
  .selected .day-selector { background: rgba(24,75,94,.35); box-shadow: inset 0 0 0 1px var(--mood-accent); }
  .selected .day-label { box-shadow: inset 0 0 0 1px var(--mood-accent); }
  .today .day-label {
    background: linear-gradient(135deg,var(--blue),var(--mood-accent));
    color: #00151c;
    box-shadow: 0 0 0 3px rgba(140,225,240,.16), 0 3px 12px rgba(0,0,0,.35);
    text-shadow: none;
  }
}
@media (max-width: 600px) { .day-number { display: none; } }

/* A soft highlight and lower rim give the date circle a tactile, glassy lift. */
.day.today .day-number,
.today .day-label {
  background: radial-gradient(ellipse at 32% 18%, rgba(255,255,255,.58), transparent 45%), linear-gradient(145deg,var(--mood-accent),var(--blue));
  border: 1px solid rgba(237,253,255,.58);
  color: #00151c;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.45), inset 0 -3px 4px rgba(1,35,50,.34), 0 2px 0 rgba(0,16,28,.65), 0 5px 13px rgba(0,0,0,.42), 0 0 0 3px rgba(140,225,240,.13);
  text-shadow: 0 1px 0 rgba(255,255,255,.24);
}
@media (max-width: 600px) {
  .selected:not(.today) .day-label {
    background: linear-gradient(155deg,rgba(214,250,255,.22),rgba(19,68,82,.48));
    box-shadow: inset 0 1px 1px rgba(255,255,255,.24), inset 0 -2px 3px rgba(0,10,18,.38), 0 2px 6px rgba(0,0,0,.28), 0 0 0 1px var(--mood-accent);
  }
}

/* Calendar view controls and scrollable day ranges. */
.view-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: rgba(2,13,22,.48); }
.view-picker-label, .few-days-control { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: #d5e9ed; font: 700 12px 'Barlow',system-ui,sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.view-select { min-height: 44px; min-width: 126px; padding: 8px 36px 8px 12px; border: 1px solid var(--mood-border); border-radius: 3px; color: var(--ice); background-color: rgba(3,17,26,.85); font: 600 14px 'Manrope',system-ui,sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer; }
.few-days-control .view-select { min-width: 78px; }
.view-select:focus-visible { outline: 2px solid var(--mood-accent); outline-offset: 3px; }
.range-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.range-grid { display: grid; grid-template-columns: repeat(var(--range-columns, 1),minmax(130px,1fr)); min-width: calc(var(--range-columns, 1) * 130px); }
.range-day { min-width: 0; min-height: 320px; background: rgba(2,13,22,.12); border-right: 1px solid var(--line); }
.range-day:last-child { border-right: 0; }
.range-day-header { display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 12px; background: rgba(2,13,22,.48); border-bottom: 1px solid var(--line); }
.range-weekday { color: #c3d9df; font: 700 12px 'Barlow',system-ui,sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.range-day-number { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; color: #f4fcff; font: 700 15px/1 'Manrope',system-ui,sans-serif; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #000,0 0 7px #000; }
.range-day.today .range-day-number { border-radius: 50%; background: radial-gradient(ellipse at 32% 18%,rgba(255,255,255,.58),transparent 45%),linear-gradient(145deg,var(--mood-accent),var(--blue)); border: 1px solid rgba(237,253,255,.58); color: #00151c; box-shadow: inset 0 1px 2px rgba(255,255,255,.45),inset 0 -3px 4px rgba(1,35,50,.34),0 2px 0 rgba(0,16,28,.65),0 5px 13px rgba(0,0,0,.42); text-shadow: none; }
.range-event-list { display: grid; align-content: start; gap: 8px; padding: 12px 8px; }
.range-event { display: grid; gap: 4px; width: 100%; min-height: 52px; padding: 9px; border: 0; border-left: 2px solid var(--mood-accent); color: #f4fdff; background: rgba(3,27,39,.94); text-align: left; }
.range-event-time { color: #c7e8ee; font-size: 12px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.range-event-title { font-size: 14px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.range-empty { color: #c0d3d8; font-size: 13px; line-height: 1.5; margin: 0; padding: 4px 2px; }
@media (hover:hover) and (pointer:fine) { .range-event:hover { background: rgba(38,91,107,.96); } }
@media (max-width: 600px) {
  .view-controls { padding: 12px 16px; gap: 8px 16px; }
  .range-day { min-height: 260px; }
}
#calendar[data-view]:not([data-view="month"]) .selected-day { display: none; }
.range-day-header { width: 100%; border: 0; border-bottom: 1px solid var(--line); color: var(--ice); text-align: left; cursor: pointer; }
.range-day-header:focus-visible { outline: 2px solid var(--mood-accent); outline-offset: -3px; }
.range-event-location { color: #b8d1d8; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
@media (hover:hover) and (pointer:fine) { .range-day-header:hover { background: rgba(44,93,105,.45); } }
@media (max-width: 600px) {
  #calendar[data-view="few"] .range-view::after, #calendar[data-view="week"] .range-view::after {
    content: 'Swipe across days to explore'; display: block; padding: 10px 16px; color: #c0d3d8; background: rgba(2,13,22,.48); font-size: 12px;
  }
}

.intro-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }

/* Glass direction from the calendar design: soft edges, luminous depth, quiet numerals. */
@font-face { font-family: 'Michroma'; src: url('/assets/Michroma-Regular.ttf') format('truetype'); font-display: swap; }
.plate { clip-path: none; border-radius: 22px; border: 1px solid rgba(232,252,255,.23); background: radial-gradient(120% 70% at 8% 0%,rgba(255,255,255,.14),transparent 52%),linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,.015) 65%,rgba(255,255,255,.06)),var(--mood-panel); box-shadow: inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.06),0 30px 70px -24px rgba(0,0,0,.7); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); }
.month-head,.agenda-head,.selected-day-head,.view-controls { background: transparent; }
.primary,.secondary,.icon-button,.theme-trigger,.view-select,.theme-panel,.theme-option,dialog,input,textarea,.quick-menu,.range-event,.event-chip { clip-path:none; border-radius:12px; }
.primary { background:radial-gradient(90% 120% at 30% -20%,rgba(255,255,255,.65),transparent 55%),linear-gradient(100deg,var(--blue),var(--mood-accent)); box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 12px 30px -10px var(--mood-accent); }
.secondary,.icon-button,.theme-trigger { background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.045)); border-color:rgba(255,255,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.26); }
.month-grid { gap:5px; padding:0 12px 12px; }
.weekday { border:0; }
.day { border:0!important; border-radius:12px; background:linear-gradient(165deg,rgba(255,255,255,.08),rgba(255,255,255,.015) 62%); box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 0 0 1px rgba(255,255,255,.05); }
.day.outside { opacity:.72; }
.day.selected { background:radial-gradient(100% 80% at 20% 0%,color-mix(in srgb,var(--mood-accent) 25%,transparent),transparent 70%),rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px var(--mood-accent),0 0 26px -12px var(--mood-accent); }
.day-number,.range-day-number,.day-label { font-family:'Michroma',sans-serif!important; font-weight:400!important; }
.day.today .day-number,.range-day.today .range-day-number,.today .day-label { color:#fff; background:transparent; border:0; box-shadow:none; text-shadow:0 0 4px #fff,0 0 12px var(--mood-accent),0 0 24px var(--mood-accent); }
.theme-panel,.quick-menu,dialog { border:1px solid rgba(255,255,255,.24); background:rgba(5,19,28,.91); box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 24px 70px rgba(0,0,0,.6); }
.theme-option { margin:2px 0; }
.theme-swatch { border-radius:10px; background-image:url('/assets/lofi-midnight.webp'); background-size:cover; background-position:center; }
.theme-option[data-theme-choice="rain"] .theme-swatch { background-image:url('/assets/lofi-rain.webp'); background-size:cover; }
.theme-option[data-theme-choice="sunset"] .theme-swatch { background-image:url('/assets/lofi-sunset.webp'); background-size:cover; }
@media (max-width:600px) { .month-grid { gap:4px; padding:0 8px 10px; } .month-grid .day { min-height:54px; } .day-selector { border-radius:12px; } .selected .day-selector,.selected .day-label { background:transparent; box-shadow:none; } .intro-actions { width:100%; } .intro-actions > button { flex:1; } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .plate { background:rgba(4,18,26,.92); } }