/* ============================================================
   Meridian — Calendar
   ============================================================ */

.cal-app { flex: 1; min-width: 0; display: grid; grid-template-columns: 264px 1fr; grid-template-rows: minmax(0, 1fr); height: 100%; }

/* ============================= Side ============================= */
.cal-side {
  background: var(--surface-0); border-right: 1px solid var(--line);
  padding: 14px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px;
}
.cal-new { width: 100%; justify-content: center; }

.mini { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; box-shadow: var(--shadow-1); }
.mini-head { display: flex; align-items: center; gap: 2px; margin-bottom: 4px; }
.mini-title { flex: 1; text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-1); border-radius: var(--r-xs); padding: 4px 6px; }
.mini-title:hover { background: var(--surface-hover); }
.mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.mini-wd { text-align: center; font-size: 10px; font-weight: 700; color: var(--ink-4); padding: 6px 0 3px; text-transform: uppercase; }
.mini-day {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 32px; border-radius: var(--r-sm); transition: background var(--t-fast) var(--ease);
}
.mini-day:hover { background: var(--surface-hover); }
.mini-day.is-out .mini-num { color: var(--ink-4); }
.mini-day.is-today .mini-num {
  background: var(--accent); color: #fff; font-weight: 700;
  width: 21px; height: 21px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
}
.mini-day.is-selected { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent-line); }
.mini-num { font-size: 12px; font-weight: 570; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mini-dots { display: flex; gap: 1.5px; height: 3px; margin-top: 1px; }
.mini-dots i { width: 3px; height: 3px; border-radius: 50%; background: var(--accent); }

.cal-cat-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 6px 8px; border-radius: var(--r-sm); font-size: 13px; color: var(--ink-2);
  transition: background var(--t-fast) var(--ease);
}
.cal-cat-row:hover { background: var(--surface-hover); }
.cal-cat-check {
  width: 18px; height: 18px; border-radius: 5px; flex: none;
  border: 1.5px solid var(--ink-4); display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: transparent; transition: all var(--t-fast) var(--ease);
}
.cal-cat-check.is-on { background: var(--c); border-color: var(--c); }
.cal-cat-name { flex: 1; text-align: left; font-weight: 560; }
.cal-cat-count { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ============================= Toolbar ============================= */
.cal-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cal-toolbar { padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--surface-1); flex: none; }
.cal-tb-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-tb-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.cal-today { font-weight: 640; }
.cal-nav-group { display: flex; gap: 1px; }
.cal-label { font-size: 16.5px; font-weight: 720; margin: 0; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-tb-right { display: flex; align-items: center; gap: 10px; }
.cal-views .calseg { height: 30px; padding: 0 11px; }
.calseg span { margin-left: 5px; }
@media (max-width: 900px) { .calseg span { display: none; } }

.cal-scroll { flex: 1; overflow: auto; min-height: 0; background: var(--surface-1); }
.cal-scroll[data-view="week"], .cal-scroll[data-view="day"] { overflow-y: auto; overflow-x: hidden; }

/* ============================= Time grid ============================= */
.cal-timegrid { display: grid; grid-template-rows: auto auto 1fr; min-width: 640px; min-height: 100%; position: relative; }
.cal-timegrid.is-day { min-width: 0; }

.tg-head { display: grid; grid-template-columns: 60px 1fr; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 8; background: var(--surface-1); }
.tg-corner { border-right: 1px solid var(--line); }
.tg-days { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.tg-day {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 9px;
  color: var(--ink-3); transition: background var(--t-fast) var(--ease); border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.tg-day:hover { background: var(--surface-hover); }
.tg-dow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.tg-num { font-size: 17px; font-weight: 640; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tg-day.is-today .tg-dow { color: var(--accent); }
.tg-day.is-today .tg-num {
  background: var(--accent); color: #fff; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 45%, transparent);
}

.tg-allday { display: grid; grid-template-columns: 60px 1fr; border-bottom: 1px solid var(--line); position: sticky; top: 49px; z-index: 7; background: var(--surface-1); }
.tg-corner-allday { font-size: 10.5px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; padding: 8px 8px 0 0; text-align: right; border-right: 1px solid var(--line); }
.tg-allday-cols { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.allday-col { padding: 4px 3px; min-height: 30px; display: flex; flex-direction: column; gap: 3px; border-left: 1px solid var(--line-soft); }
.evt-allday {
  font-size: 12px; font-weight: 620; padding: 4px 9px; border-radius: var(--r-sm);
  color: var(--ink-1); background: color-mix(in srgb, var(--cat, var(--cat-blue)) 16%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--cat, var(--cat-blue)) 35%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.evt-allday:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.evt-allday.cat-blue { --cat: var(--cat-blue); } .evt-allday.cat-violet { --cat: var(--cat-violet); }
.evt-allday.cat-indigo { --cat: var(--cat-indigo); } .evt-allday.cat-green { --cat: var(--cat-green); }
.evt-allday.cat-orange { --cat: var(--cat-orange); } .evt-allday.cat-gold { --cat: var(--cat-gold); }
.evt-allday.cat-teal { --cat: var(--cat-teal); } .evt-allday.cat-pink { --cat: var(--cat-pink); }

.tg-body { display: grid; grid-template-columns: 60px 1fr; position: relative; }
.tg-hours { padding-top: 0; }
.tg-hour { position: relative; }
.tg-hour span {
  position: absolute; top: -8px; right: 9px; font-size: 11px; color: var(--ink-4);
  font-variant-numeric: tabular-nums; background: var(--surface-1); padding: 0 3px;
}
.tg-cols { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: relative; border-left: 1px solid var(--line); }
.tg-col { position: relative; border-right: 1px solid var(--line-soft); min-height: calc(24 * 48px); cursor: crosshair; }
.tg-col.is-today { background: color-mix(in srgb, var(--accent) 3.5%, transparent); }
.tg-col::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, var(--line-soft) 47px, var(--line-soft) 48px);
}

/* events */
.evt {
  position: absolute; border-radius: var(--r-sm); overflow: hidden; cursor: grab;
  padding: 3px 7px 3px 10px; font-size: 12px; line-height: 1.35; z-index: 3;
  background: color-mix(in srgb, var(--cat, var(--cat-blue)) 14%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--cat, var(--cat-blue)) 32%, transparent);
  border-left: none;
  box-shadow: 0 1px 2px rgba(24, 28, 48, .05);
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
  user-select: none; touch-action: none;
}
.evt:hover { filter: brightness(1.03); box-shadow: var(--shadow-2); z-index: 5; }
.evt:focus-visible { z-index: 6; box-shadow: var(--focus-ring); }
.evt-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3.5px; border-radius: 3px 0 0 3px; background: var(--cat, var(--cat-blue)); }
.evt.cat-blue { --cat: var(--cat-blue); color: var(--cat-blue-ink); }
.evt.cat-violet { --cat: var(--cat-violet); color: var(--cat-violet-ink); }
.evt.cat-indigo { --cat: var(--cat-indigo); color: var(--cat-violet-ink); }
.evt.cat-green { --cat: var(--cat-green); color: var(--cat-green-ink); }
.evt.cat-orange { --cat: var(--cat-orange); color: var(--cat-orange-ink); }
.evt.cat-gold { --cat: var(--cat-gold); color: var(--cat-gold-ink); }
.evt.cat-teal { --cat: var(--cat-teal); color: var(--cat-teal-ink); }
.evt.cat-pink { --cat: var(--cat-pink); color: var(--cat-pink-ink); }
:root[data-theme="dark"] .evt.cat-blue, :root[data-theme="dark"] .evt.cat-violet,
:root[data-theme="dark"] .evt.cat-indigo, :root[data-theme="dark"] .evt.cat-green,
:root[data-theme="dark"] .evt.cat-orange, :root[data-theme="dark"] .evt.cat-gold,
:root[data-theme="dark"] .evt.cat-teal, :root[data-theme="dark"] .evt.cat-pink { color: var(--ink-1); }

.evt-time { font-size: 10.5px; font-weight: 700; color: var(--cat, var(--cat-blue)); display: block; }
.evt-title { font-weight: 640; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt-people { position: absolute; right: 4px; bottom: 3px; display: flex; }
.evt-people .avatar { box-shadow: 0 0 0 1.5px var(--surface-1); }
.evt-resize { position: absolute; left: 10%; right: 10%; bottom: 0; height: 7px; cursor: ns-resize; }
.evt-resize::after {
  content: ""; position: absolute; left: 50%; translate: -50% 0; bottom: 2px;
  width: 26px; height: 3px; border-radius: 3px; background: var(--cat, var(--cat-blue)); opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.evt:hover .evt-resize::after { opacity: .8; }
.evt.is-dragging { opacity: .85; box-shadow: var(--shadow-3); cursor: grabbing; z-index: 40; }
.evt.is-ghost { border-style: dashed; pointer-events: none; z-index: 30; background: var(--accent-soft); border-color: var(--accent-line); }
.evt.is-ghost .evt-title { color: var(--accent); font-weight: 650; display: inline-flex; align-items: center; gap: 5px; }
body.is-evt-drag { cursor: grabbing; user-select: none; }

.now-line {
  position: absolute; left: 0; right: 0; height: 0; z-index: 20; pointer-events: none;
  border-top: 2px solid var(--danger);
}
.now-dot {
  position: absolute; left: -5px; top: -5px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
}

/* ============================= Month ============================= */
.cal-month { min-width: 700px; min-height: 100%; display: flex; flex-direction: column; }
.m-head { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line); }
.m-wd { padding: 10px 12px 8px; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.m-grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; }
.m-day { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 6px; min-height: 96px; display: flex; flex-direction: column; gap: 2px; transition: background var(--t-fast) var(--ease); }
.m-day:hover { background: var(--surface-hover); }
.m-day.is-drop { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent-line); }
.m-day.is-out { background: color-mix(in srgb, var(--bg) 55%, var(--surface-1)); }
.m-day.is-out .m-chip { opacity: .55; }
.m-num {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 620; color: var(--ink-2); margin-bottom: 2px; align-self: flex-end;
  font-variant-numeric: tabular-nums; transition: background var(--t-fast) var(--ease);
}
.m-num:hover { background: var(--surface-active); }
.m-day.is-today .m-num { background: var(--accent); color: #fff; font-weight: 700; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent); }
.m-chips { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow: hidden; }
.m-chip {
  display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 590; color: var(--ink-1);
  padding: 2.5px 7px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: color-mix(in srgb, var(--cat, var(--cat-blue)) 13%, var(--surface-1));
  cursor: grab; touch-action: none; transition: filter var(--t-fast) var(--ease);
}
.m-chip:hover { filter: brightness(1.04); }
.m-chip time { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.m-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cat, var(--cat-blue)); flex: none; }
.m-chip-allday { background: color-mix(in srgb, var(--cat, var(--cat-blue)) 24%, var(--surface-1)); font-weight: 650; }
.m-chip.cat-blue { --cat: var(--cat-blue); } .m-chip.cat-violet { --cat: var(--cat-violet); }
.m-chip.cat-indigo { --cat: var(--cat-indigo); } .m-chip.cat-green { --cat: var(--cat-green); }
.m-chip.cat-orange { --cat: var(--cat-orange); } .m-chip.cat-gold { --cat: var(--cat-gold); }
.m-chip.cat-teal { --cat: var(--cat-teal); } .m-chip.cat-pink { --cat: var(--cat-pink); }
.m-chip.is-dragging { opacity: .35; }
.m-more { font-size: 11px; font-weight: 650; color: var(--ink-3); padding: 2px 7px; border-radius: 6px; text-align: left; align-self: flex-start; }
.m-more:hover { background: var(--surface-active); color: var(--accent); }
.m-ghost {
  position: fixed; z-index: 300; pointer-events: none;
  font-size: 12px; font-weight: 650; color: var(--ink-1);
  padding: 4px 10px; border-radius: var(--r-sm); box-shadow: var(--shadow-3);
  background: color-mix(in srgb, var(--cat, var(--cat-blue)) 22%, var(--surface-3));
  border: 1px solid color-mix(in srgb, var(--cat, var(--cat-blue)) 40%, transparent);
}
.m-ghost.cat-blue { --cat: var(--cat-blue); } .m-ghost.cat-violet { --cat: var(--cat-violet); }
.m-ghost.cat-indigo { --cat: var(--cat-indigo); } .m-ghost.cat-green { --cat: var(--cat-green); }
.m-ghost.cat-orange { --cat: var(--cat-orange); } .m-ghost.cat-gold { --cat: var(--cat-gold); }
.m-ghost.cat-teal { --cat: var(--cat-teal); } .m-ghost.cat-pink { --cat: var(--cat-pink); }

/* ============================= Agenda ============================= */
.cal-agenda { max-width: 760px; margin: 0 auto; padding: 22px 24px 40px; }
.ag-day { margin-bottom: 26px; animation: riseIn var(--t-med) var(--ease); }
.ag-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.ag-dow { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.ag-dnum { font-size: 24px; font-weight: 750; letter-spacing: -.02em; }
.ag-mon { font-size: 12.5px; color: var(--ink-3); }
.ag-head.is-today .ag-dnum { color: var(--accent); }
.ag-head.is-today .ag-dow { color: var(--accent); }
.ag-evt {
  display: flex; align-items: center; gap: 16px; padding: 12px 12px 12px 0; border-radius: var(--r-md);
  cursor: pointer; transition: background var(--t-fast) var(--ease); border: 1px solid transparent;
}
.ag-evt:hover { background: var(--surface-hover); border-color: var(--line-soft); }
.ag-stripe { width: 4px; align-self: stretch; border-radius: 3px; flex: none; }
.ag-when { width: 118px; flex: none; display: flex; flex-direction: column; gap: 1px; }
.ag-when time { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ag-until { font-size: 11.5px; color: var(--ink-3); font-weight: 500 !important; }
.ag-allday { font-size: 12px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.ag-in { align-self: flex-start; margin-top: 4px; }
.ag-main { flex: 1; min-width: 0; }
.ag-title { margin: 0; font-size: 14.5px; font-weight: 650; letter-spacing: -.005em; }
.ag-loc { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.ag-people { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.ag-people span:last-child { margin-left: 4px; }

/* ============================= Event popover ============================= */
.evt-pop { padding: 4px 6px 6px; position: relative; }
.evt-pop-stripe { height: 4px; border-radius: 4px; margin: 6px 8px 12px; }
.evt-pop-title { font-size: 16px; font-weight: 720; letter-spacing: -.01em; padding: 0 8px; }
.evt-pop-when { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--ink-2); padding: 8px; font-variant-numeric: tabular-nums; }
.evt-pop-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); padding: 3px 8px; }
.evt-pop-row .icon { color: var(--ink-3); flex: none; }
.evt-pop-people { align-items: center; }
.evt-pop-people-avas { display: inline-flex; }
.evt-pop-notes { font-size: 12.5px; color: var(--ink-3); padding: 8px; line-height: 1.55; border-top: 1px solid var(--line-soft); margin-top: 6px; }
.evt-pop-actions { display: flex; gap: 8px; padding: 10px 8px 4px; }

/* ============================= Editor ============================= */
.ee-label { font-size: 12px; font-weight: 680; color: var(--ink-3); margin-bottom: 5px; display: block; }
.ee-row { display: flex; gap: 12px; }
.ee-row-tight { align-items: end; margin-top: -4px; }
.ee-grow { flex: 1; }
.ee-allday {
  display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-sunken);
  font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 14px;
}
.ee-allday.is-on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-softer); }
.ee-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.ee-cat { padding: 5px 12px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 620; border: 1px solid transparent; transition: all var(--t-fast) var(--ease); }
.ee-cat:hover { background: var(--surface-hover); }
.ee-cat.cat-blue { color: var(--cat-blue-ink); } .ee-cat.cat-violet { color: var(--cat-violet-ink); }
.ee-cat.cat-indigo { color: var(--cat-violet-ink); } .ee-cat.cat-green { color: var(--cat-green-ink); }
.ee-cat.cat-orange { color: var(--cat-orange-ink); } .ee-cat.cat-gold { color: var(--cat-gold-ink); }
.ee-cat.cat-teal { color: var(--cat-teal-ink); } .ee-cat.cat-pink { color: var(--cat-pink-ink); }
.ee-cat.is-on { background: color-mix(in srgb, var(--cat, var(--cat-blue)) 15%, var(--surface-1)); border-color: color-mix(in srgb, var(--cat, var(--cat-blue)) 45%, transparent); }
.ee-cat.is-on.cat-blue { --cat: var(--cat-blue); } .ee-cat.is-on.cat-violet { --cat: var(--cat-violet); }
.ee-cat.is-on.cat-indigo { --cat: var(--cat-indigo); } .ee-cat.is-on.cat-green { --cat: var(--cat-green); }
.ee-cat.is-on.cat-orange { --cat: var(--cat-orange); } .ee-cat.is-on.cat-gold { --cat: var(--cat-gold); }
.ee-cat.is-on.cat-teal { --cat: var(--cat-teal); } .ee-cat.is-on.cat-pink { --cat: var(--cat-pink); }
:root[data-theme="dark"] .ee-cat.cat-blue { color: var(--cat-blue); }
:root[data-theme="dark"] .ee-cat.cat-violet, :root[data-theme="dark"] .ee-cat.cat-indigo { color: var(--cat-violet); }
:root[data-theme="dark"] .ee-cat.cat-green { color: var(--cat-green); }
:root[data-theme="dark"] .ee-cat.cat-orange { color: var(--cat-orange); }
:root[data-theme="dark"] .ee-cat.cat-gold { color: var(--cat-gold); }
:root[data-theme="dark"] .ee-cat.cat-teal { color: var(--cat-teal); }
:root[data-theme="dark"] .ee-cat.cat-pink { color: var(--cat-pink); }

/* ============================= Responsive ============================= */
@media (max-width: 1080px) {
  .cal-app { grid-template-columns: 1fr; }
  .cal-side { position: absolute; inset: 0 auto 0 0; width: 272px; z-index: 22; transform: translateX(-102%); transition: transform var(--t-slow) var(--ease); box-shadow: var(--shadow-3); }
  .app[data-nav-open="1"] .cal-side { transform: none; }
}