/* owner: admin-v2 B4 · contract: server/ADMIN-V2.md sec. 5.4, 4.5 (calendar.css: the יומן page)
   The booking requests, the meeting cards with their briefs and the example 14-day board. Every rule sits under .view-calendar;
   cards, chips, buttons, notices, .note and .fact are base.css. Colors are tokens only; the board's blocks use the CTA teal for
   meetings, a teal outline for requests, a faded muted block for busy time and the bad red for the now line. */

/* ---------- the page: requests and Google side by side, then the meetings, then the board ---------- */
.view-calendar .grid2.top { align-items: start; }
.view-calendar .meetings, .view-calendar .later { margin-top: 56px; }
.view-calendar .card .empty { padding-inline: 0; }

/* ---------- booking requests ---------- */
.view-calendar .requests { display: grid; margin-top: 8px; }
.view-calendar .requests > .kicker { margin-top: 24px; }
.view-calendar .requests .booking {
  display: grid; gap: 8px; padding-block: 18px; border-top: 1px solid var(--line); scroll-margin-top: 24px;
}
.view-calendar .requests .booking:first-child, .view-calendar .requests .kicker + .booking { border-top: 0; }
.view-calendar .requests .who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.view-calendar .requests .booking > p { overflow-wrap: anywhere; }
.view-calendar .requests .tocall {
  display: inline-flex; align-items: center; gap: 4px; width: fit-content; font-size: 14px; color: var(--fgMuted);
}
.view-calendar .requests .booking > .acts { margin-top: 4px; }

/* ---------- meeting cards ---------- */
.view-calendar .meeting { scroll-margin-top: 24px; }
.view-calendar .meeting > p { overflow-wrap: anywhere; }
.view-calendar .meeting .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.view-calendar .meeting > .acts { align-items: center; margin-top: 18px; }
.view-calendar .meeting .mail { overflow-wrap: anywhere; }

/* the brief under a meeting */
.view-calendar .brief { display: grid; gap: 16px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.view-calendar .brief > * { margin-top: 0; }
.view-calendar .brief h4 { font-size: 17px; line-height: 1.3; }
.view-calendar .brief h5 { margin-bottom: 6px; font-size: 14px; line-height: 1.3; font-weight: 500; color: var(--fgMuted); }
.view-calendar .brief section p, .view-calendar .brief li { color: var(--fg); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.view-calendar .brief ul, .view-calendar .brief ol { display: grid; gap: 4px; }
.view-calendar .brief li { position: relative; padding-inline-start: 16px; }
.view-calendar .brief ul > li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: .7em; width: 5px; height: 5px; border-radius: 50%;
  background-color: var(--fgMuted);
}
.view-calendar .brief ol { counter-reset: brief; }
.view-calendar .brief ol > li { counter-increment: brief; padding-inline-start: 22px; }
.view-calendar .brief ol > li::before {
  content: counter(brief) "."; position: absolute; inset-inline-start: 0; color: var(--fgMuted); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.view-calendar .brief .src { color: var(--fgMuted); font-size: 13px; }
.view-calendar .brief p.src { margin-top: 6px; }
.view-calendar .brief .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.view-calendar .brief .foot .note { margin-top: 0; }

/* ---------- the example 14-day board ---------- */
.view-calendar .legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; color: var(--fgMuted); }
.view-calendar .legend span { display: inline-flex; align-items: center; gap: 6px; }
.view-calendar .legend i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.view-calendar .legend .busy, .view-calendar .blk.busy { background-color: var(--muted); opacity: .35; }
.view-calendar .legend .booking, .view-calendar .blk.booking { background-color: var(--cta); }
.view-calendar .legend .request, .view-calendar .blk.request { box-shadow: inset 0 0 0 2px var(--cta); }

.view-calendar .board { display: grid; margin-top: 12px; }
.view-calendar .bday {
  display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr); gap: 8px 20px; padding-block: 16px;
  border-top: 1px solid var(--line);
}
.view-calendar .bday:first-child { border-top: 0; }
.view-calendar .bname { display: grid; align-content: start; gap: 2px; }
.view-calendar .bname .num { font-size: 14px; color: var(--fgMuted); }
.view-calendar .bbody { display: grid; gap: 8px; min-width: 0; }
.view-calendar .bbody .note { margin-top: 0; }
.view-calendar .bscale { display: flex; justify-content: space-between; font-size: 12px; color: var(--fgMuted); }
.view-calendar .btrack { position: relative; height: 12px; border-radius: 6px; background-color: var(--stone); }
.view-calendar .blk { position: absolute; inset-block: 0; inset-inline-start: var(--s0, 0%); width: var(--w, 0%); border-radius: 6px; }
.view-calendar .blk.now { inset-block: -3px; border-radius: 1px; background-color: var(--bad); }
.view-calendar .evs { display: grid; gap: 4px; }
.view-calendar .ev { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; font-size: 14px; }
.view-calendar .ev b { min-width: 7.5em; }
.view-calendar .ev > span:not(.chip) { min-width: 0; overflow-wrap: anywhere; }
.view-calendar .ev.busy > span:not(.chip) { color: var(--fgMuted); }

@media (max-width: 760px) {
  .view-calendar .meetings, .view-calendar .later { margin-top: 36px; }
  /* standalone links are touch targets on phones */
  .view-calendar :is(.requests .tocall, .requests .who a.num, .meeting > .acts a.num, .meeting .mail) {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .view-calendar .bday { grid-template-columns: minmax(0, 1fr); }
  .view-calendar .bname { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; }
}