/* ══════════════════════════════════════ Meetings & Tasks (MEET) — styles ══
   Only MEET-specific rules live here. Everything with a plain name — .btn, .card, .panel, .table,
   .badge, .modal, .chk, .grid2, .filters, .subtabs, .kv, .empty, .chip, .row-actions — is the ERP's
   own, defined in styles.css, and is reused as-is: a second "chip" or "badge" class here would only
   fight the one every other screen already understands. Every rule below is scoped to a class that
   starts with `meet-`, or to a `.card`/`.badge` MODIFIER a meet screen adds on top of the shared one.

   Colours, radii and shadows all come from styles.css's own custom properties (--gold, --ink,
   --green, --red, --blue, --amber, --line, --card, --paper, --r-card, --r-sm, --r-pill, --gap,
   --sh-1/2/3, --mono) so a MEET screen never invents a second palette next to the one every other
   module is drawn in.

   Responsive: the room (tiles + controls + side panel) is the one layout that genuinely changes
   shape on a narrow screen — DESIGN §4 runs the same mesh call on a phone, and a two-column video
   layout on a 375px screen is unusable. It collapses at 1024px. Everything else in this file reuses
   the breakpoints styles.css already established (900px, 700px) so a MEET screen resizes exactly
   the way its neighbours do. */

/* ── small text utilities used across every meet screen ──────────────────── */
.meet-good{color:var(--green)}
.meet-bad{color:var(--red);font-weight:600}
.meet-pad{padding:16px 18px}
.meet-inline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px}
.meet-pre{white-space:pre-wrap;word-break:break-word;line-height:1.6;color:var(--ink-700)}
.meet-summary{font-size:14px;line-height:1.65;color:var(--ink-700)}
.meet-ul{margin:0;padding-left:20px;line-height:1.7;font-size:13px;color:var(--ink-700)}
.meet-ul li{margin-bottom:4px}
.meet-b{vertical-align:middle;margin-left:2px}

/* A quoted line of evidence from the transcript — set off from the sentence that cites it, never
   styled as if it were the ERP's own claim. */
.meet-quote{margin:8px 0 0;padding:8px 12px;border-left:3px solid var(--gold);background:var(--paper);
  font-size:12.5px;font-style:italic;color:var(--ink-500);border-radius:0 var(--r-sm) var(--r-sm) 0}
.meet-decision{padding:10px 0;border-bottom:1px solid var(--line-soft)}
.meet-decision:last-child{border-bottom:none}

/* Tables inside a MEET screen scroll horizontally rather than break the page, and collapse into one
   card per row under 760px — the same trade the payroll salary-line table already makes, and for
   the same reason: three or four dense columns of names, dates and badges do not fit a phone. */
.meet-scroll{overflow-x:auto}
.meet-scroll table{width:100%}
@media(max-width:760px){
  .meet-scroll thead{display:none}
  .meet-scroll tbody tr{display:block;padding:10px 0;border-bottom:1px solid var(--line)}
  .meet-scroll tbody td{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
    border:none;padding:3px 0;text-align:left!important}
  .meet-scroll tbody td::before{content:attr(data-label);color:var(--ink-500);font-size:10.5px;
    text-transform:uppercase;letter-spacing:.05em;flex:0 0 auto;padding-top:2px}
  .meet-scroll tbody td:empty,.meet-scroll tbody td[data-label='']::before{display:none}
  .meet-actions tbody td{align-items:center}
}
.meet-actions td{vertical-align:top}

/* ── occurrence rows (dashboard, calendar, My Meetings, follow-up) ───────── */
.meet-list{display:flex;flex-direction:column;gap:8px}
.meet-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;background:var(--card);
  transition:border-color .15s ease,box-shadow .15s ease}
.meet-row:hover,.meet-row:focus-visible{border-color:var(--gold);box-shadow:var(--sh-1);outline:none}
.meet-row-main{min-width:0;flex:1}
.meet-row-title{font-weight:600;font-size:13.5px;color:var(--ink);display:flex;align-items:center;gap:8px}
.meet-row-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto}
.meet-click{cursor:pointer}
.meet-click:hover{background:var(--paper)}
.meet-dayhead{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  color:var(--ink-500);text-transform:uppercase;letter-spacing:.05em;margin:18px 0 8px}
.meet-dayhead:first-child{margin-top:0}

/* ── chips: participants, candidates, "who was there" ─────────────────────── */
.meet-chips{display:flex;flex-wrap:wrap;gap:7px}
.meet-chip{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);
  border-radius:var(--r-pill);background:var(--paper);font-size:12.5px}
.meet-role{padding:3px 6px;font-size:11.5px;border-radius:6px}
.meet-attendee{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line);
  border-radius:var(--r-pill);font-size:12px;background:var(--card)}

/* ── the employee typeahead (employeePicker / participantPicker) ─────────── */
.meet-pick{position:relative}
.meet-pick-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;max-height:260px;
  overflow-y:auto;padding:6px}
.meet-pick-row{padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;font-size:13px}
.meet-pick-row:hover{background:var(--gold-50)}

/* ── the calendar: nav bar, week grid, month grid ─────────────────────────── */
.meet-calnav{gap:10px}
.meet-range{font-size:14px;color:var(--ink)}
.meet-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
@media(max-width:900px){.meet-two{grid-template-columns:1fr}}

.meet-week{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.meet-col{background:var(--card);min-height:160px;padding:8px;display:flex;flex-direction:column;gap:6px}
.meet-col.is-today{background:var(--gold-50)}
.meet-col-head{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;
  padding-bottom:4px;border-bottom:1px solid var(--line-soft)}
.meet-col-empty{color:var(--muted);font-size:12px;text-align:center;padding:10px 0}

.meet-month{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.meet-month-head{background:var(--paper);text-align:center;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:6px 0}
.meet-cell{background:var(--card);min-height:88px;padding:5px;display:flex;flex-direction:column;gap:3px}
.meet-cell.is-out{background:var(--paper);color:var(--muted-2)}
.meet-cell.is-today .meet-cell-day{background:var(--ink);color:#fff;border-radius:50%}
.meet-cell-day{font-size:11px;font-weight:600;width:20px;height:20px;display:flex;align-items:center;
  justify-content:center}
.meet-more{font-size:10.5px;color:var(--muted);cursor:default}

.meet-chip-ev{display:flex;align-items:center;gap:5px;padding:2px 6px;border-radius:5px;font-size:10.5px;
  border-left:3px solid var(--blue);background:var(--blue-soft);color:var(--ink-700);cursor:pointer;
  overflow:hidden}
.meet-chip-ev.is-live{border-color:var(--green);background:var(--green-soft)}
.meet-chip-ev.is-ended{border-color:var(--line);background:var(--paper);color:var(--muted)}
.meet-chip-ev.is-cancelled{border-color:var(--red);background:var(--red-soft);color:var(--muted);
  text-decoration:line-through}
.meet-chip-ev.is-missed{border-color:var(--amber);background:var(--amber-soft)}
.meet-chip-time{font-family:var(--mono);font-size:10px;flex:0 0 auto}
.meet-chip-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){.meet-week,.meet-month{grid-template-columns:1fr}
  .meet-month-head:nth-child(n+2){display:none} .meet-month-head:first-child{display:none}}

/* ── the dashboard's "clickable" tile ──────────────────────────────────────── */
.card.meet-clickable{cursor:pointer}
.card.meet-clickable:hover{border-color:var(--gold);box-shadow:var(--sh-2)}

/* ── one occurrence: facts, transcript, form days ─────────────────────────── */
.meet-facts.kv{grid-template-columns:150px 1fr}
@media(max-width:640px){.meet-facts.kv{grid-template-columns:1fr}}
.meet-days{display:flex;flex-wrap:wrap;gap:8px}

.meet-transcript{display:flex;flex-direction:column;gap:2px;padding:6px 0;max-height:560px;overflow-y:auto}
.meet-line{display:flex;align-items:baseline;gap:10px;padding:6px 16px;font-size:13px;line-height:1.55}
.meet-line:nth-child(odd){background:var(--paper)}
.meet-at{flex:0 0 64px}
.meet-speaker{flex:0 0 130px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meet-said{flex:1;color:var(--ink-700);word-break:break-word}
@media(max-width:640px){.meet-line{flex-wrap:wrap}.meet-speaker{flex:1 0 auto}}

/* ── task history timeline ─────────────────────────────────────────────────── */
.meet-hist-row{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.meet-hist-row:last-child{border-bottom:none}
.meet-hist-when{flex:0 0 150px;color:var(--muted)}

/* ── settings form ─────────────────────────────────────────────────────────── */
.meet-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;align-items:start}
.meet-settings-grid>*{min-width:0}
.meet-set-row{padding:10px 0}
@media(max-width:760px){.meet-settings-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════ the room ══
   Two zones — the stage (video tiles + the control bar that is always visible under them) and the
   side panel (participants / chat) — sitting side by side above 1024px and stacked below it, so the
   control bar never ends up squeezed under a video grid too narrow to show a face. */
.meet-room{display:flex;flex-direction:column;height:calc(100vh - var(--topbar,64px) - 32px);min-height:520px}
.meet-room-head{display:flex;align-items:center;gap:12px;padding:10px 4px;flex-wrap:wrap}
.meet-room-title{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px}
.meet-timer{font-size:13px;color:var(--ink-500)}

.meet-notice{padding:9px 14px;border-radius:var(--r-sm);background:var(--blue-soft);color:var(--blue);
  font-size:12.5px;margin:0 4px 8px}
.meet-notice.is-warn{background:var(--amber-soft);color:var(--amber)}

.meet-room-body{flex:1;min-height:0;display:grid;grid-template-columns:1fr 300px;gap:14px}
@media(max-width:1024px){.meet-room-body{grid-template-columns:1fr}}

.meet-stage{position:relative;min-height:0;display:flex;flex-direction:column;gap:10px;
  background:var(--ink);border-radius:var(--r-card);padding:12px;overflow:hidden}
/* THE STAGE IS FILLED BY THE PEOPLE IN IT, and the number of them is what decides the shape.
   `auto-fit, minmax(220px, 1fr)` made as many columns as the width allowed — five on a desk
   monitor — so two people sat in two 220px boxes at the top left of a stage six times that size,
   with the rest of it black. A meeting laid out like a spreadsheet is the complaint behind
   "google meet sarkhi asavi": there, one person fills the stage, two share it, four make a square.
   The count is written onto the container as data-n (meetroom.js: layoutTiles). */
.meet-tiles{flex:1;min-height:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  grid-auto-rows:minmax(0,1fr);gap:8px;overflow-y:auto;align-content:stretch;
  /* THE FLOATING BAR SITS IN THIS SPACE. Without the padding the bottom row of faces is under it,
     and on a short laptop window that row is the only other person in the meeting. */
  padding-bottom:62px}
.meet-tiles[data-n="1"]{grid-template-columns:1fr}
.meet-tiles[data-n="2"]{grid-template-columns:repeat(2,1fr)}
.meet-tiles[data-n="3"],.meet-tiles[data-n="4"]{grid-template-columns:repeat(2,1fr)}
/* AN ODD LAST ROW IS CENTRED. Three people in a 2x2 grid puts the third in a corner with an
   empty black cell beside it, which reads as somebody having dropped out. */
.meet-tiles[data-n="3"] .meet-tile:nth-child(3){grid-column:1/-1;justify-self:center;
  width:calc(50% - 4px)}
.meet-tiles[data-n="5"] .meet-tile:nth-child(5),
.meet-tiles[data-n="7"] .meet-tile:nth-child(7){grid-column:1/-1;justify-self:center;
  width:calc(33.333% - 6px)}
.meet-tiles[data-n="5"],.meet-tiles[data-n="6"]{grid-template-columns:repeat(3,1fr)}
.meet-tiles[data-n="7"],.meet-tiles[data-n="8"],.meet-tiles[data-n="9"]{grid-template-columns:repeat(3,1fr)}
@media(max-width:1024px){
  .meet-tiles{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  /* A phone-width column: two side by side is two thumbnails, and nobody is recognisable. */
  .meet-tiles[data-n="1"],.meet-tiles[data-n="2"]{grid-template-columns:1fr}
  .meet-tiles[data-n="3"],.meet-tiles[data-n="4"],.meet-tiles[data-n="5"],
  .meet-tiles[data-n="6"],.meet-tiles[data-n="7"],.meet-tiles[data-n="8"],
  .meet-tiles[data-n="9"]{grid-template-columns:repeat(2,1fr)}
}

/* PRESENTING. One person's picture takes the stage and everybody else stands in a strip beside
   it - the arrangement every person in this office already knows, and the reason it is here: a
   shared spreadsheet dealt one cell of an even grid is delivered and unreadable, which is what
   "screen share disat nahi" still meant after the frames started arriving.

   The rows are written out per head count rather than left implicit, because `grid-row:1/-1` can
   only span rows the grid actually declares: against implicit rows it collapses to the first one
   and the presenter ends up the same size as everybody else. meetroom.js writes both attributes
   (layoutTiles). */
.meet-tiles[data-present="1"]{grid-template-columns:1fr minmax(136px,200px)}
.meet-tiles[data-present="1"] .meet-tile.is-presenting{grid-column:1;grid-row:1/-1}
.meet-tiles[data-present="1"][data-n="1"]{grid-template-columns:1fr}
.meet-tiles[data-present="1"][data-n="2"]{grid-template-rows:1fr}
.meet-tiles[data-present="1"][data-n="3"]{grid-template-rows:repeat(2,1fr)}
.meet-tiles[data-present="1"][data-n="4"]{grid-template-rows:repeat(3,1fr)}
.meet-tiles[data-present="1"][data-n="5"]{grid-template-rows:repeat(4,1fr)}
.meet-tiles[data-present="1"][data-n="6"]{grid-template-rows:repeat(5,1fr)}
.meet-tiles[data-present="1"][data-n="7"]{grid-template-rows:repeat(6,1fr)}
.meet-tiles[data-present="1"][data-n="8"]{grid-template-rows:repeat(7,1fr)}
.meet-tiles[data-present="1"][data-n="9"]{grid-template-rows:repeat(8,1fr)}
/* A strip tile is a thumbnail, not a cell of the grid: it must not demand a face-sized box. */
.meet-tiles[data-present="1"] .meet-tile{min-height:76px}
.meet-tiles[data-present="1"] .meet-tile.is-presenting{min-height:0;background:#000}

/* Narrow: the presenter goes on top, full width, and the strip runs along the bottom. */
@media(max-width:900px){
  .meet-tiles[data-present="1"],
  .meet-tiles[data-present="1"][data-n="1"]{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
    grid-template-rows:1fr 84px}
  .meet-tiles[data-present="1"] .meet-tile.is-presenting{grid-column:1/-1;grid-row:1}
}

/* NO FIXED ASPECT ON THE TILE. It was 4/3 while phones send portrait and laptops send 16:9, so the
   tile was never the shape of the picture in it. The cell decides the tile, and the PICTURE is
   fitted whole inside it — `contain`, not `cover`, because a cropped meeting takes the top of
   somebody's head off and that is what was reported. */
.meet-tile{position:relative;background:#1c1c1c;border-radius:var(--r-sm);overflow:hidden;
  min-height:96px;display:flex;align-items:center;justify-content:center;border:2px solid transparent}
.meet-tile video{width:100%;height:100%;object-fit:contain;display:none}
.meet-tile.has-video video{display:block}
.meet-tile.is-self{border-color:var(--gold)}
.meet-tile.is-bad{border-color:var(--red)}
.meet-tile-name{position:absolute;left:6px;bottom:6px;padding:3px 9px;border-radius:var(--r-pill);
  background:rgba(17,17,17,.62);color:#fff;font-size:11.5px;display:flex;align-items:center;gap:6px}
.meet-tile-mic{color:#F2B8B8;font-size:10px;text-transform:uppercase;letter-spacing:.04em}

/* FULL SCREEN. Quiet until the pointer is on the tile - a control that is always bright competes
   with the person's face, and one that never appears is a control nobody finds. It stays visible
   while focused, so it can be reached from the keyboard. */
.meet-tile-full{position:absolute;top:6px;right:6px;width:26px;height:26px;padding:0;line-height:1;
  border:0;border-radius:6px;background:rgba(17,17,17,.55);color:#fff;font-size:13px;cursor:pointer;
  opacity:0;transition:opacity .15s}
.meet-tile:hover .meet-tile-full,.meet-tile-full:focus{opacity:1}
.meet-tile-full:hover{background:rgba(17,17,17,.85)}

/* A TILE IN FULL SCREEN IS ALL THERE IS, so it fills the screen on black and the picture is fitted
   WHOLE - `contain`, never `cover`: cropping is what makes a shared screen unreadable at the edges,
   which is the complaint this control exists to answer. */
.meet-tile:fullscreen{background:#000;border:0;border-radius:0}
.meet-tile:fullscreen video{width:100%;height:100%;object-fit:contain}
.meet-tile:fullscreen .meet-tile-full{opacity:1;top:12px;right:12px;width:32px;height:32px;font-size:16px}

/* ONE BAR, FLOATING OVER THE STAGE. Under the stage it cost a whole line of a room that is
   already exactly one screen tall, and on a laptop that line is the one the faces needed. It is
   always visible - controls that fade out are controls somebody hunts for mid-meeting. */
.meet-controls{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;
  display:flex;align-items:center;gap:6px;padding:7px 9px;flex-wrap:nowrap;max-width:calc(100% - 24px);
  background:rgba(20,20,20,.86);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-pill);
  box-shadow:0 10px 30px rgba(0,0,0,.5)}
/* The shared `spacer` grows to fill a row; inside a pill that would stretch it across the stage. */
.meet-controls .spacer{flex:0 0 6px}
.meet-controls .btn{white-space:nowrap}
.meet-ctl{color:#fff;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06)}
.meet-ctl:hover{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.14)}
.meet-ctl.is-on{background:var(--green);border-color:var(--green);color:#fff}
.meet-ctl.is-off{background:var(--red);border-color:var(--red);color:#fff}
.meet-recdot{color:#F87171;font-size:11.5px;font-weight:600;display:flex;align-items:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}

.meet-side{display:flex;flex-direction:column;min-height:0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-card)}
.meet-side .subtabs{margin:8px 8px 0}
.meet-side-pane{flex:1;min-height:0;display:flex;flex-direction:column;padding:10px 12px;overflow-y:auto}
.meet-people{display:flex;flex-direction:column;gap:6px}
.meet-person{display:flex;align-items:center;gap:8px;padding:7px 4px;border-bottom:1px solid var(--line-soft);
  font-size:12.5px}
.meet-person:last-child{border-bottom:none}

.meet-chatlog{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-bottom:8px}
.meet-msg{font-size:12.5px;line-height:1.5}
.meet-chatbar{display:flex;gap:8px;padding-top:8px;border-top:1px solid var(--line-soft)}
.meet-chatbar input{flex:1}

.meet-consent{max-width:560px;margin:40px auto;padding:26px 28px;text-align:left}
.meet-consent h3{margin:0 0 10px;font-size:17px}
.meet-consent p{font-size:13.5px;line-height:1.65;color:var(--ink-700);margin:0 0 10px}

@media(max-width:640px){
  .meet-room{height:auto;min-height:0}
  .meet-room-body{gap:10px}
  .meet-side{min-height:280px}
}

/* ── the calendar as a calendar: time down the side, meetings where they are ──────────────────
 *
 * The week used to be seven columns of chips in order, which says WHAT is on and never WHEN. Here
 * the vertical axis IS time: a nine o'clock meeting is near the top, a two-hour one is twice as
 * tall as a one-hour one, and an empty afternoon looks empty. That is the whole difference between
 * a list and a calendar, and it is what the owner asked for.
 */
/* THE THREE CHILDREN MUST BE PLACED, or the browser places them for you and gets it wrong.
   `cal-grid` holds an empty corner, the hour gutter and the day columns - three items in a
   two-column grid, so auto-placement put the GUTTER in the wide right-hand column and squeezed
   the day columns into the 56px one. Since `.cal-hour>span` is pinned `right:8px`, what that
   looked like was a blank week with the hours stacked down the far right edge. Live from 22-09
   to 24-09-2026; the every-screen walk never saw it because it asserts a heading, not a layout.

   The head height is one number used twice - the corner's row and each day's head - so the hours
   line up with the lanes by construction rather than by two paddings happening to agree. */
.cal-grid{--cal-head:55px;display:grid;grid-template-columns:56px 1fr;
  grid-template-rows:var(--cal-head) 1fr;border:1px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden;background:var(--card)}
.cal-gutter-head{grid-column:1;grid-row:1;border-bottom:1px solid var(--line);background:var(--paper)}
.cal-gutter{grid-column:1;grid-row:2;border-right:1px solid var(--line);background:var(--paper)}
.cal-hour{position:relative}
.cal-hour>span{position:absolute;top:-7px;right:8px;font-size:10.5px;font-family:var(--mono);
  color:var(--muted)}
.cal-hour:first-child>span{top:2px}

.cal-cols{grid-column:2;grid-row:1 / span 2;display:grid;grid-auto-flow:column;
  grid-auto-columns:1fr;overflow-x:auto}
.cal-col{border-left:1px solid var(--line-soft);min-width:96px}
.cal-col:first-child{border-left:0}
.cal-col.is-today{background:var(--gold-50)}
.cal-col-head{height:var(--cal-head);box-sizing:border-box;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;
  border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:2}
.cal-dow{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.cal-dom{font-size:17px;font-weight:600;line-height:1.1;width:28px;height:28px;display:flex;
  align-items:center;justify-content:center;border-radius:50%}
.cal-dom.is-today{background:var(--ink);color:#fff}

.cal-lanes{position:relative}
.cal-line{position:absolute;left:0;right:0;height:1px;background:var(--line-soft)}
/* Where "now" is — the single most useful mark on a calendar, and only ever on today. */
.cal-now{position:absolute;left:0;right:0;height:2px;background:var(--red);z-index:3}
.cal-now::before{content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--red)}

/* A meeting is placed and sized by its own start and duration; overlaps share the width rather
   than covering one another, because a hidden meeting is the one thing a calendar must not do. */
.cal-ev{position:absolute;z-index:1;flex-direction:column;align-items:flex-start;gap:0;
  padding:3px 6px;border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.cal-ev .meet-chip-title{white-space:normal;line-height:1.25;font-weight:600}
.cal-ev .meet-chip-time{opacity:.75}
.cal-ev .btn{margin-top:auto;align-self:stretch;padding:1px 6px;font-size:10px}

@media(max-width:640px){
  .cal-grid{grid-template-columns:44px 1fr;--cal-head:50px}
  .cal-col{min-width:108px}
}

/* The calendar shortcut in the top bar, beside the live clock. */
.tb-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);color:var(--ink-700);
  cursor:pointer}
.tb-icon:hover{background:var(--paper);color:var(--ink)}