/* ══════════════════════════════════════════════════════════════
   Keln — the Calendar.

   Google Calendar's restraint with Keln's material. Glass surfaces,
   the orbit's stage colours, a today marker that reads as a lit star
   rather than a filled box.

   z-index 1600: above the dossier (1500) so a calendar opened from a
   prospect sits on top, below the tour (1800), boot (2000) and
   toasts (9999).

   RECORD vs EDITABLE is expressed visually. Reminders and follow-ups
   lift on hover and can be dragged. Stage changes and notes cannot,
   and they look like it — a calendar that lets you appear to drag
   the past is lying about what it is.
   ══════════════════════════════════════════════════════════════ */

.cal-wrap {
  position: fixed; inset: 0; z-index: 1600;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-11) 22px;
  background: radial-gradient(ellipse 85% 70% at 50% 10%, rgba(13,21,38,.96), rgba(4,7,12,.98));
  backdrop-filter: blur(16px);
  animation: cal-in .26s ease;
}
.cal-wrap--out { animation: cal-in .24s ease reverse forwards; }
@keyframes cal-in { from { opacity: 0; transform: scale(.99); } }

.cal {
  width: min(1180px, 100%);
  max-height: 100%;
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, rgba(24,31,44,.85), rgba(10,15,23,.94));
  border: 1px solid var(--border-hi);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 34px 90px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.05);
  transition: opacity .2s;
}
.cal--loading { opacity: .55; }

/* ── Head ──────────────────────────────────────────────────── */
.cal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-8); padding: var(--s-8) var(--s-9);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(91,140,255,.06), transparent);
}
.cal__nav { display: flex; align-items: center; gap: var(--s-4); }
.cal__arrow {
  width: 30px; height: 30px; border-radius: 9px;
  background: rgba(6,10,16,.5); border: 1px solid var(--border);
  color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer;
  transition: color .18s, border-color .18s;
}
.cal__arrow:hover { color: var(--ink); border-color: var(--border-hi); }
.cal__label {
  font-size: var(--t-2xl); font-weight: 700; letter-spacing: -.02em;
  margin: 0 var(--s-3) 0 var(--s-4); min-width: 190px;
}
.cal__today {
  background: none; border: 1px solid var(--border); color: var(--muted);
  font: 600 12px var(--font); padding: var(--s-3) 13px; border-radius: 999px; cursor: pointer;
  transition: color .18s, border-color .18s;
}
.cal__today:hover { color: var(--accent2); border-color: var(--border-hi); }

.cal__right { display: flex; align-items: center; gap: var(--s-5); }
.cal__views {
  display: flex; gap: 3px; padding: 3px;
  background: rgba(6,10,16,.55); border-radius: 10px; border: 1px solid var(--border);
}
.cal__view {
  background: none; border: none; color: var(--dim); cursor: pointer;
  font: 600 11.5px var(--font); text-transform: capitalize;
  padding: var(--s-3) 13px; border-radius: 7px; transition: all .18s;
}
.cal__view--on { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #04121a; }
.cal__view:not(.cal__view--on):hover { color: var(--ink); }

.cal__vega, .cal__x {
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(6,10,16,.5); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; font-size: var(--t-md);
  transition: all .18s;
}
.cal__vega:hover { color: var(--accent2); border-color: var(--border-hi); box-shadow: 0 0 14px rgba(34,211,166,.25); }
.cal__x:hover { color: #fff; border-color: var(--hot); background: rgba(255,107,139,.14); }

/* ── Body ──────────────────────────────────────────────────── */
.cal__body { flex: 1; overflow-y: auto; padding: 0 var(--s-8) var(--s-8); }
.cal__body::-webkit-scrollbar { width: 7px; }
.cal__body::-webkit-scrollbar-thumb { background: rgba(91,140,255,.2); border-radius: var(--r-xs); }

/* ── Month ─────────────────────────────────────────────────── */
.cal__dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  padding: var(--s-6) 0 var(--s-4); position: sticky; top: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(14,20,30,.97) 70%, transparent);
}
.cal__dow div {
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .16em;
  color: var(--dim); text-transform: uppercase; text-align: center;
}

.cal__grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(96px, 1fr); gap: 5px;
}

.cal__cell {
  position: relative;
  padding: 7px var(--s-4) var(--s-4);
  border-radius: 11px;
  background: rgba(6,10,16,.35);
  border: 1px solid rgba(91,140,255,.07);
  transition: background .18s, border-color .18s;
  overflow: hidden;
}
.cal__cell:hover { background: rgba(91,140,255,.06); border-color: var(--border); }
.cal__cell:focus-visible { outline: none; border-color: var(--border-hi); }
.cal__cell--out { opacity: .32; }
.cal__cell--wknd { background: rgba(6,10,16,.55); }

/* Today is a lit ring, not a filled block. Same grammar as a lit
   star: presence, not selection. */
.cal__cell--today {
  border-color: var(--accent2);
  box-shadow: inset 0 0 0 1px rgba(34,211,166,.3), 0 0 22px rgba(34,211,166,.12);
}
.cal__cell--today .cal__num {
  color: #04121a; background: var(--accent2);
  box-shadow: 0 0 12px rgba(34,211,166,.6);
}
.cal__cell--overdue { border-color: rgba(255,209,102,.28); }
.cal__cell--drop {
  border-color: var(--accent2);
  background: rgba(34,211,166,.1);
  box-shadow: 0 0 0 2px rgba(34,211,166,.2);
}

.cal__num {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  color: var(--muted); margin-bottom: 5px;
}

.cal__items { display: flex; flex-direction: column; gap: 3px; }

.cal__chip {
  display: flex; align-items: center; gap: 5px;
  padding: 3px var(--s-3); border-radius: 6px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border-left: 2px solid var(--c);
  font-size: var(--t-xs); color: var(--ink);
  cursor: pointer; user-select: none;
  transition: background .16s, transform .16s;
}
.cal__chip:hover { background: color-mix(in srgb, var(--c) 26%, transparent); }
.cal__chip--drag:hover { transform: translateX(2px); }
.cal__chip--done { opacity: .42; text-decoration: line-through; }
.cal__chip--lifting { opacity: .3; }
.cal__chip-g { color: var(--c); font-size: var(--t-2xs); flex-shrink: 0; }
.cal__chip-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cal__ghost {
  position: fixed; z-index: 3000; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-2deg) scale(1.04);
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  max-width: 180px;
}

.cal__more {
  font-family: var(--mono); font-size: 9.5px; color: var(--dim);
  padding-left: var(--s-3); cursor: pointer;
}
.cal__more:hover { color: var(--accent2); }

.cal__add {
  position: absolute; top: 6px; right: 6px;
  width: 19px; height: 19px; border-radius: 6px;
  background: rgba(91,140,255,.14); border: none;
  color: var(--accent2); font-size: var(--t-base); line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .16s;
}
.cal__cell:hover .cal__add { opacity: 1; }
.cal__ask {
  position: absolute; top: 6px; right: 28px; width: 19px; height: 19px;
  border-radius: 6px; background: rgba(34,211,166,.14); border: none;
  color: var(--accent2); font-size: var(--t-xs); line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .16s;
}
.cal__cell:hover .cal__ask,
.cal__wcol:hover .cal__ask { opacity: 1; }
.cal__ask:hover {
  background: rgba(34,211,166,.28);
  box-shadow: 0 0 10px rgba(34,211,166,.3);
}

/* ── Week ──────────────────────────────────────────────────── */
.cal__week { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-3); padding-top: var(--s-7); }
.cal__wcol {
  position: relative;
  background: rgba(6,10,16,.35); border: 1px solid rgba(91,140,255,.07);
  border-radius: var(--r-md); padding: var(--s-5) 9px; min-height: 320px;
}
.cal__wcol--today { border-color: var(--accent2); box-shadow: 0 0 22px rgba(34,211,166,.1); }
.cal__wcol--drop { border-color: var(--accent2); background: rgba(34,211,166,.08); }
.cal__whead { text-align: center; padding-bottom: var(--s-5); border-bottom: 1px solid var(--border); margin-bottom: 9px; }
.cal__wdow { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--dim); }
.cal__wnum { display: block; font-size: 20px; font-weight: 700; color: var(--ink); margin-top: 3px; }
.cal__wcol--today .cal__wnum { color: var(--accent2); }
.cal__wbody { display: flex; flex-direction: column; gap: 5px; }
.cal__wbody .cal__chip { padding: var(--s-3) var(--s-4); font-size: 11.5px; }
.cal__wbody .cal__chip-t { white-space: normal; }
.cal__wadd {
  background: none; border: 1px dashed rgba(91,140,255,.14);
  border-radius: var(--r-sm); color: var(--dim); font-size: var(--t-md); padding: var(--s-4);
  cursor: pointer; transition: all .18s; margin-top: var(--s-1);
}
.cal__wadd:hover { border-color: var(--border-hi); color: var(--accent2); background: rgba(34,211,166,.05); }
.cal__wbody:not(:has(.cal__chip)) .cal__wadd { padding: var(--s-7); }

/* ── Agenda ────────────────────────────────────────────────── */
.cal__agenda { padding-top: var(--s-8); display: flex; flex-direction: column; gap: var(--s-2); }
.cal__aday { display: grid; grid-template-columns: 92px 1fr; gap: var(--s-7); padding: var(--s-6) 0; }
.cal__aday + .cal__aday { border-top: 1px solid rgba(91,140,255,.07); }
.cal__ahead { display: flex; align-items: center; gap: 11px; }
.cal__adate { font-size: 28px; font-weight: 800; color: var(--muted); line-height: 1; }
.cal__aday--today .cal__adate { color: var(--accent2); text-shadow: 0 0 20px rgba(34,211,166,.4); }
.cal__adow { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.cal__arel { font-size: 9px; letter-spacing: .14em; color: var(--dim); margin-top: var(--s-1); }
.cal__alist { display: flex; flex-direction: column; gap: 5px; }
.cal__arow {
  display: flex; align-items: center; gap: 11px;
  padding: var(--s-5) 13px; border-radius: 11px;
  background: rgba(6,10,16,.45); border: 1px solid var(--border);
  cursor: pointer; transition: border-color .18s, transform .18s;
}
.cal__arow:hover { border-color: var(--border-hi); transform: translateX(3px); }
.cal__arow--done { opacity: .45; }
.cal__adot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex-shrink: 0; box-shadow: 0 0 9px var(--c); }
.cal__abody { flex: 1; min-width: 0; }
.cal__atitle { font-size: 13.5px; color: var(--ink); }
.cal__arow--done .cal__atitle { text-decoration: line-through; }
.cal__ameta { font-size: var(--t-2xs); color: var(--dim); margin-top: var(--s-1); letter-spacing: .05em; }
.cal__adone {
  background: none; border: 1px solid var(--border); color: var(--dim);
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer; flex-shrink: 0;
  transition: all .18s;
}
.cal__adone:hover { color: var(--accent2); border-color: var(--accent2); }

/* ── Foot ──────────────────────────────────────────────────── */
.cal__foot {
  display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap;
  padding: var(--s-6) var(--s-9); border-top: 1px solid var(--border);
  background: rgba(6,10,16,.35);
}
.cal__leg { display: flex; align-items: center; gap: var(--s-3); font-size: 11.5px; color: var(--muted); }
.cal__leg i { width: 8px; height: 8px; border-radius: 50%; }
.cal__hint { margin-left: auto; font-size: 9.5px; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }

/* ── Quick add ─────────────────────────────────────────────── */
.cal-add {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,7,12,.6); backdrop-filter: blur(6px);
}
.cal-add__box {
  width: min(400px, 90%); padding: var(--s-10);
  background: linear-gradient(160deg, rgba(30,38,52,.98), rgba(12,17,25,.99));
  border: 1px solid var(--border-hi); border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.cal-add__date { font-size: var(--t-2xs); letter-spacing: .2em; color: var(--accent2); margin-bottom: var(--s-6); }
.cal-add__in {
  width: 100%; background: rgba(6,10,16,.6); border: 1px solid var(--border);
  color: var(--ink); border-radius: 10px; padding: var(--s-6) var(--s-7);
  font: 400 14px var(--font); margin-bottom: var(--s-7);
}
.cal-add__in:focus { outline: none; border-color: var(--border-hi); box-shadow: 0 0 0 3px rgba(34,211,166,.1); }
.cal-add__row { display: flex; gap: var(--s-4); }
.cal-add__go {
  flex: 1; background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none; color: #04121a; font: 800 13px var(--font);
  padding: var(--s-5); border-radius: 9px; cursor: pointer;
}
.cal-add__go:hover { filter: brightness(1.1); }
.cal-add__del, .cal-add__no {
  background: none; border: 1px solid var(--border); color: var(--muted);
  font: 600 13px var(--font); padding: var(--s-5) var(--s-8); border-radius: 9px; cursor: pointer;
}
.cal-add__del { color: var(--hot); border-color: rgba(255,107,139,.3); }
.cal-add__no:hover { color: var(--ink); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cal-wrap { padding: 0; }
  .cal { border-radius: 0; max-height: 100vh; height: 100vh; }
  .cal__grid { grid-auto-rows: minmax(72px, 1fr); }
  .cal__chip-t { display: none; }        /* dots only on small screens */
  .cal__chip { justify-content: center; padding: var(--s-2); }
  .cal__label { min-width: 0; font-size: var(--t-lg); }
  .cal__week { grid-template-columns: 1fr; }
  .cal__wcol { min-height: 0; }
  .cal__aday { grid-template-columns: 64px 1fr; gap: var(--s-5); }
}

@media (prefers-reduced-motion: reduce) {
  .cal-wrap, .cal-wrap--out { animation: none; }
  .cal__chip, .cal__arow, .cal__chip--drag:hover { transition: none; transform: none; }
}