/* Calendar workspace (see app.js renderAgentCalendar). Built on the Money
   design system: the .money-app shell and .m-* parts from money.css, the pl-
   sidebar pieces from pipeline.css, and the cal- pieces below. Designed in
   Figma, page "Calendar". Every colour is a money token, so dark mode follows. */

.cal-app .m-seg a.m-btn { color: var(--m-muted); }
.cal-app .m-seg a.m-btn.on { color: var(--m-ink); }
.cal-app .m-head .m-btn.icon svg.i { width: 15px; height: 15px; }

/* kind colours, shared by chips, bars, dots and layer boxes */
.cal-bar.k-key, .cal-stat i.k-key, .cal-box.k-key { background: var(--m-accent); }
.cal-bar.k-show, .cal-stat i.k-show, .cal-box.k-show { background: var(--m-pos); }
.cal-bar.k-task, .cal-stat i.k-task, .cal-box.k-task { background: var(--m-warn); }
.cal-bar.k-meet, .cal-stat i.k-meet, .cal-box.k-meet { background: var(--m-muted); }

/* ---- sidebar ---- */
.cal-layers { display: flex; flex-direction: column; gap: 1px; }
.cal-layer { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--m-ink); text-align: left; cursor: pointer; }
.cal-layer:hover { background: var(--m-surface-2); }
.cal-layer .l { flex: 1; min-width: 0; }
.cal-box { width: 14px; height: 14px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid transparent; border-radius: 4px; color: #fff; }
.money-app .cal-box svg.i { width: 10px; height: 10px; stroke-width: 3; }
.cal-layer[aria-pressed="false"] .cal-box { background: transparent; border-color: var(--m-faint); }
.cal-layer[aria-pressed="false"] .cal-box svg.i { visibility: hidden; }
.cal-layer[aria-pressed="false"] .l { color: var(--m-muted); }
.cal-ups { display: flex; flex-direction: column; gap: 1px; }
.money-app a.cal-up { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 6px; border-radius: 8px; color: var(--m-ink); }
.money-app a.cal-up:hover { background: var(--m-surface-2); }
.cal-up .pl-date, .cal-close .pl-date { width: 34px; height: 34px; }
.cal-up .pl-date span, .cal-close .pl-date span { font-size: 12.5px; }
.cal-up .t, .cal-close .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cal-up b, .cal-up small, .cal-close b, .cal-close small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-up b { font-size: 12px; font-weight: 500; }
.cal-up small { font-size: 10.5px; color: var(--m-faint); }
.cal-gcal { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 10px 12px 12px; border-radius: 10px; background: var(--m-surface-2); }
.cal-gcal .st { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.cal-gcal .st b { flex: 1; font-weight: 600; }
.cal-gcal .st span { font-size: 10.5px; font-weight: 500; color: var(--m-faint); }
.cal-gcal .st span.on { color: var(--m-pos); }
.cal-gcal p { margin: 0; font-size: 11px; line-height: 1.45; color: var(--m-muted); }
.cal-gcal code { font-size: 10.5px; }
.cal-gcal .m-btn { align-self: flex-start; }

/* ---- month ---- */
.money-app a.cal-alert { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--m-ink); }
.cal-alert svg.i { color: var(--m-warn); }
.cal-alert > span:first-of-type { flex: 1; min-width: 200px; }
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.cal-wk, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-wk span { padding: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--m-faint); }
.cal-day { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 112px; padding: 7px 8px; border: 0; border-top: 1px solid var(--m-line); border-left: 1px solid var(--m-line); background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.cal-grid > :nth-child(7n + 1) { border-left: 0; }
.cal-day:hover { background: var(--m-surface-2); }
.cal-day:focus-visible { outline: 2px solid var(--m-accent); outline-offset: -2px; }
.cal-day.out { background: color-mix(in srgb, var(--m-surface-2) 55%, transparent); cursor: default; }
.cal-day.out .cal-num { color: var(--m-faint); }
.cal-day.sel { background: color-mix(in srgb, var(--m-accent-soft) 60%, transparent); }
.cal-num { width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.cal-day.today .cal-num { background: var(--m-accent); color: #fff; }
.cal-chip { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 2px 6px; border-radius: 5px; font-size: 10.5px; font-weight: 500; line-height: 1.35; color: var(--m-ink); }
.cal-chip i { width: 5px; height: 5px; flex-shrink: 0; border-radius: 999px; }
.cal-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip.k-key { background: var(--m-accent-soft); }
.cal-chip.k-key i { background: var(--m-accent); }
.cal-chip.k-show { background: color-mix(in srgb, var(--m-pos) 14%, transparent); }
.cal-chip.k-show i { background: var(--m-pos); }
.cal-chip.k-task { background: color-mix(in srgb, var(--m-warn) 14%, transparent); }
.cal-chip.k-task i { background: var(--m-warn); }
.cal-chip.k-meet { background: var(--m-surface-2); }
.cal-chip.k-meet i { background: var(--m-muted); }
.cal-chip.done { color: var(--m-muted); }
.cal-more { padding-left: 2px; font-size: 10.5px; font-weight: 500; color: var(--m-faint); }

/* day panel */
.cal-daycard { padding-bottom: 8px; }
.cal-dayhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 12px; }
.cal-dayhead small { display: block; font-size: 12px; font-weight: 500; color: var(--m-faint); }
.cal-dayhead h3 { margin: 2px 0 0; font-size: 18px; font-weight: 700; }
.money-app a.cal-item { display: flex; gap: 12px; min-width: 0; padding: 11px 0; border-top: 1px solid var(--m-line-soft); color: var(--m-ink); }
.money-app a.cal-item:hover .t { color: var(--m-accent); }
.cal-bar { width: 3px; flex-shrink: 0; align-self: stretch; border-radius: 2px; }
.cal-item .mn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cal-item .w { font-size: 11px; font-weight: 600; }
.cal-item .w.k-key { color: var(--m-accent); }
.cal-item .w.k-show { color: var(--m-pos); }
.cal-item .w.k-task { color: var(--m-warn); }
.cal-item .w.k-meet { color: var(--m-muted); }
.cal-item .t { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.cal-item .s { font-size: 11.5px; color: var(--m-muted); overflow-wrap: anywhere; }
.cal-dayfoot { padding: 12px 0 4px; border-top: 1px solid var(--m-line); font-size: 11.5px; color: var(--m-faint); }
.cal-none { padding: 11px 20px; border-top: 1px solid var(--m-line-soft); font-size: 12px; color: var(--m-faint); }
.cal-none.flush { padding-left: 0; padding-right: 0; }

/* ---- agenda ---- */
.cal-dayrow { display: flex; align-items: center; gap: 8px; padding: 9px 20px; border-top: 1px solid var(--m-line-soft); background: color-mix(in srgb, var(--m-surface-2) 60%, transparent); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--m-muted); }
.cal-agenda > .cal-dayrow:first-child { border-top: 0; }
.cal-dayrow.today { background: var(--m-accent-soft); color: var(--m-accent); }
.cal-dayrow .n { margin-left: auto; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--m-faint); }
.money-app a.cal-arow { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 11px 20px; border-top: 1px solid var(--m-line-soft); color: var(--m-ink); }
.money-app a.cal-arow:hover { background: var(--m-surface-2); }
.cal-arow .tm { width: 76px; flex-shrink: 0; font-size: 12px; font-weight: 600; }
.cal-arow .tm small { display: block; font-size: 11px; font-weight: 400; color: var(--m-faint); }
.cal-arow .cal-bar { height: 36px; align-self: center; }
.cal-arow .mn { flex: 1; min-width: 0; }
.cal-arow .mn b { display: block; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.cal-arow .mn span { display: block; font-size: 11.5px; color: var(--m-muted); }
.cal-stat { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--m-line-soft); }
.cal-stat i { width: 8px; height: 8px; border-radius: 999px; }
.cal-stat span { flex: 1; font-size: 12.5px; font-weight: 500; color: var(--m-muted); }
.cal-stat b { font-size: 18px; font-weight: 700; }
.money-app a.cal-close { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--m-line-soft); color: var(--m-ink); }
.money-app a.cal-close:hover b { color: var(--m-accent); }
.cal-close b { font-size: 12.5px; font-weight: 600; }
.cal-close small { font-size: 11px; color: var(--m-faint); }
.cal-close .d { font-size: 11.5px; font-weight: 500; color: var(--m-muted); white-space: nowrap; }

/* ---- showings inbox ---- */
.cal-srow { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 11px 20px; border-top: 1px solid var(--m-line-soft); }
.cal-srow.locked { opacity: .62; }
.cal-srow .mn { flex: 1; min-width: 0; }
.cal-srow .mn b { display: block; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.cal-srow .mn span { display: block; font-size: 11.5px; color: var(--m-muted); }
.cal-srow .pl-select { width: 220px; flex-shrink: 0; }

@media (max-width: 1100px) {
  .cal-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  /* one column that may shrink below its content, and rows that do not stretch */
  .cal-app { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .cal-side .cal-layers, .cal-side .cal-ups, .cal-side .cal-gcal { display: none; }
  .cal-day { flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 3px; min-height: 64px; padding: 5px; }
  .cal-num { width: 100%; justify-content: flex-start; border-radius: 0; background: none; }
  .cal-day.today .cal-num { background: none; color: var(--m-accent); }
  .cal-chip { padding: 0; background: none; }
  .cal-chip.k-key, .cal-chip.k-show, .cal-chip.k-task, .cal-chip.k-meet { background: none; }
  .cal-chip span, .cal-more { display: none; }
  .cal-chip i { width: 6px; height: 6px; }
  .cal-srow { flex-wrap: wrap; }
  .cal-srow .mn { flex-basis: calc(100% - 60px); }
  .cal-srow .pl-select { width: auto; flex: 1; }
}