/* Calls calendar (js/views/callcal.js): a week grid on wide screens, a list per day on phones. Each call in its
   closer's colour (blue, lilac, teal, amber, coral, green; no closer = slate). */
.cal-view { display: grid; gap: 14px; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-nav .icon-btn { font-size: 20px; line-height: 1; }
.cal-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-chip { cursor: pointer; border: 0; font: inherit; }
.cal-chip.is-on { box-shadow: inset 0 0 0 2px var(--ev, var(--ink)); }
.cal-chip__dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--lilac), var(--teal)); }

.cal-ev--blue { --ev: var(--blue); --ev-soft: var(--blue-soft); --ev-ink: var(--blue-ink); }
.cal-ev--lilac { --ev: var(--lilac); --ev-soft: var(--lilac-soft); --ev-ink: var(--lilac-ink); }
.cal-ev--teal { --ev: var(--teal); --ev-soft: var(--teal-soft); --ev-ink: var(--teal-ink); }
.cal-ev--amber { --ev: var(--amber); --ev-soft: var(--amber-soft); --ev-ink: var(--amber-ink); }
.cal-ev--coral { --ev: var(--coral); --ev-soft: var(--red-soft); --ev-ink: var(--red-ink); }
.cal-ev--green { --ev: var(--green); --ev-soft: var(--green-soft); --ev-ink: var(--green-ink); }
.cal-ev--slate { --ev: var(--slate); --ev-soft: var(--slate-soft); --ev-ink: var(--slate-ink); }
.cal-chip.cal-ev--blue, .cal-chip--blue { --ev: var(--blue); } .cal-chip--lilac { --ev: var(--lilac); } .cal-chip--teal { --ev: var(--teal); }
.cal-chip--amber { --ev: var(--amber); } .cal-chip--coral { --ev: var(--coral); } .cal-chip--green { --ev: var(--green); } .cal-chip--slate { --ev: var(--slate); }

.cal-card { padding: 0; overflow: hidden; }
.cal-grid { display: grid; grid-template-columns: 58px repeat(7, minmax(0, 1fr)); }
.cal-grid__corner, .cal-grid__day { position: sticky; top: 0; z-index: 2; background: var(--paper); border-bottom: 1px solid var(--line); }
.cal-grid__day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-left: 1px solid var(--line); }
.cal-grid__wd { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cal-grid__dn { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 999px; font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cal-grid__day.is-today .cal-grid__dn { background: var(--red); color: #fff; }
.cal-grid__day.is-today .cal-grid__wd { color: var(--red-ink); }
.cal-grid__hours { position: relative; }
.cal-grid__hour { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.cal-grid__hour:first-child { transform: none; top: 2px !important; }
.cal-grid__col { position: relative; border-left: 1px solid var(--line);
  background-image: linear-gradient(to bottom, var(--grid) 1px, transparent 1px); }
.cal-grid__col.is-today { background-color: color-mix(in srgb, var(--red-soft) 45%, transparent); }

.cal-ev { position: absolute; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: start; column-gap: 4px;
  padding: 4px 6px; border: 0; border-radius: 9px; text-align: left; font: inherit; cursor: pointer; overflow: hidden;
  background: var(--ev-soft); color: var(--ev-ink); box-shadow: inset 3px 0 0 var(--ev); transition: transform 0.15s var(--ease), box-shadow 0.15s; }
.cal-ev:hover { transform: translateY(-1px); box-shadow: inset 3px 0 0 var(--ev), 0 8px 18px -10px var(--ev); z-index: 1; }
.cal-ev:focus-visible { outline: 2px solid var(--ev); outline-offset: 2px; }
.cal-ev__time { grid-column: 1; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-ev__name { grid-column: 1; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev__who { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.cal-ev.is-past { opacity: 0.55; }
.cal-ev.is-narrow { grid-template-columns: minmax(0, 1fr); padding: 4px 5px; }
.cal-ev.is-narrow .cal-ev__who { display: none; }
.cal-ev__time, .cal-ev__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev .demo-tag { margin-left: 4px; }
.cal-now { position: absolute; left: -1px; right: 0; height: 2px; background: var(--red); z-index: 1; pointer-events: none; }
.cal-now::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }

.cal-agenda { display: none; }
@media (max-width: 760px) {
  .cal-card { display: none; }
  .cal-agenda { display: grid; gap: 12px; }
  .cal-agenda__day { padding: 12px; border-radius: var(--card-radius); background: var(--paper); box-shadow: var(--card-shadow); }
  .cal-agenda__day.is-today { box-shadow: var(--card-shadow), inset 3px 0 0 var(--red); }
  .cal-agenda__title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; font-size: 15px; }
  .cal-agenda__n { font-size: 12px; color: var(--muted); }
  .cal-agenda__empty { margin: 0; font-size: 13px; color: var(--faint); }
  .cal-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'time name pill' 'time who who'; gap: 2px 10px; align-items: center;
    width: 100%; margin-top: 6px; padding: 10px 12px; border: 0; border-radius: 12px; text-align: left; font: inherit; cursor: pointer;
    background: var(--ev-soft); box-shadow: inset 3px 0 0 var(--ev); }
  .cal-row__time { grid-area: time; font-weight: 700; color: var(--ev-ink); font-variant-numeric: tabular-nums; }
  .cal-row__name { grid-area: name; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cal-row .pill { grid-area: pill; }
  .cal-row__who { grid-area: who; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
  .cal-row.is-past { opacity: 0.6; }
}

/* Google Calendar feed card (0026) */
.gcal__body { display: grid; gap: 10px; margin-top: 10px; }
.gcal__url { word-break: break-all; font-size: 12px; }
.gcal__steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13.5px; color: var(--ink-2); }