/* Hypha · JV partner · document: the calendar, in the generic look of a week view: the visitor's real week (dates
   from their own clock), their own work in the slots, and an invitation that hovers over it dashed and grey and never
   lands (page 01). Also here: invitation cards (Call, Demo, Follow-up; the introduction call both accept, page 03:
   two ticks, no light, because a meeting is not an agreement) and requests that wait unanswered.

   <article class="doc cal">
     <header class="cl-top"><span class="ico ico-cal"></span><b class="cl-m" data-month>…</b><span class="cl-view">Week</span></header>
     <div class="cl-days"><span></span><span data-wd="0">Mon</span>…<span data-wd="4">Fri</span></div>
     <div class="cl-body">
       <div class="cl-hours"><span>9</span>…</div>
       <div class="cl-ev ev-b" style="--d:0;--s:0;--e:2">Customer</div>          (day 0-4; start/end in hours from 9)
       <div class="cl-ev cl-ghost" style="--d:2;--s:3;--e:4">Partnership</div>    (the scene moves it; it never lands)
     </div>
   </article>
   <article class="doc inv"> … <article class="doc req"> (below) */

.cal {
  --w: 560px;
  --rh: 38px;
  --hw: 40px;
  width: var(--w);
  --f-app: var(--f-google);
  font-family: var(--f-app, var(--f-sheet));
  color: #1f1f1f;
  border-radius: 10px;
}
.cl-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e3e5e8; }
.cl-top .ico { color: #1a73e8; }
.cl-m { flex: 1; font-size: 16px; font-weight: 500; white-space: nowrap; }
.cl-view { padding: 3px 10px; border: 1px solid #dadce0; border-radius: 6px; font-size: 12.5px; color: #3c4043; }
.cl-days { display: grid; grid-template-columns: var(--hw) repeat(5, 1fr); padding: 8px 0 6px; border-bottom: 1px solid #e3e5e8; font-size: 12.5px; color: #5f6368; text-align: center; }
.cl-body { position: relative; height: calc(var(--rh) * 8); margin-bottom: 8px; background:
    linear-gradient(#eceef0 1px, transparent 1px) 0 0 / 100% var(--rh),
    linear-gradient(90deg, transparent var(--hw), #eceef0 var(--hw), #eceef0 calc(var(--hw) + 1px), transparent calc(var(--hw) + 1px)); }
.cl-body::before { content: ""; position: absolute; inset: 0 0 0 var(--hw); background: linear-gradient(90deg, #eceef0 1px, transparent 1px) 0 0 / 20% 100%; pointer-events: none; }
.cl-hours { position: absolute; left: 0; top: 0; width: var(--hw); }
.cl-hours span { display: block; height: var(--rh); padding: 3px 8px 0 0; text-align: right; font-size: 12px; color: #70757a; }
.cl-ev {
  position: absolute;
  left: calc(var(--hw) + var(--d) * ((100% - var(--hw)) / 5) + 3px);
  width: calc((100% - var(--hw)) / 5 - 6px);
  top: calc(var(--s) * var(--rh) + 2px);
  height: calc((var(--e) - var(--s)) * var(--rh) - 4px);
  padding: 4px 7px;
  border-radius: 5px;
  border-left: 3px solid var(--ec, #3f6fd8);
  background: var(--ef, #e3ebfb);
  color: var(--et, #1e3f8a);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ev-b { --ec: #3f6fd8; --ef: #e3ebfb; --et: #1e3f8a; }
.ev-o { --ec: #e8590c; --ef: #fde9df; --et: #8f3404; }
.ev-y { --ec: #e0a800; --ef: #fdf4d5; --et: #6f5200; }
.ev-g { --ec: #8a9097; --ef: #eef0f2; --et: #3c4043; }
.cl-ghost {
  border: 1.5px dashed #9aa0a6;
  border-left-width: 1.5px;
  background: rgb(255 255 255 / 0.88);
  color: #5f6368;
  z-index: 3;
}
/* a layer of its own only while its scene is near (WORLD §8) */
.stage.is-near .cl-ghost { will-change: transform; }
@media (max-width: 899px) {
  .cal { --w: min(352px, calc(100vw - 32px)); --rh: 30px; --hw: 28px; }
  .cl-top { padding: 9px 12px; gap: 8px; }
  .cl-m { font-size: 14.5px; }
  .cl-view { font-size: 12px; padding: 2px 8px; }
  .cl-days { font-size: 12px; padding: 6px 0 5px; }
  .cl-hours span { font-size: 12px; padding-right: 5px; }
  .cl-ev { font-size: 12px; padding: 3px 4px; left: calc(var(--hw) + var(--d) * ((100% - var(--hw)) / 5) + 2px); width: calc((100% - var(--hw)) / 5 - 4px); border-left-width: 2px; }
}

/* ---------- an invitation card ---------- */
.inv { width: 260px; padding: 14px 16px 14px; --f-app: var(--f-google); font-family: var(--f-app, var(--f-sheet)); border-radius: 10px; }
.iv-top { display: flex; align-items: center; gap: 10px; }
.iv-top .ico { color: #1a73e8; }
.iv-top b { font-size: 16px; font-weight: 600; }
.iv-when { margin: 6px 0 0 28px; font-size: 13px; color: #5f6368; }
.iv-rsvp { display: flex; gap: 6px; margin: 12px 0 0 28px; }
.iv-rsvp span { padding: 4px 11px; border: 1px solid #dadce0; border-radius: 999px; font-size: 12.5px; color: #3c4043; }
.iv-who { margin: 10px 0 0 28px; }
.iv-who li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13.5px; color: #3c4043; }
.iv-who .ico-check { width: 15px; height: 15px; color: #5f6368; }
.iv-who .is-on .ico-check { color: #1f1f1f; }
@media (max-width: 899px) {
  .inv { width: 214px; padding: 11px 12px; }
  .iv-top b { font-size: 14.5px; }
  .iv-when, .iv-rsvp, .iv-who { margin-left: 26px; }
  .iv-rsvp span { padding: 3px 8px; font-size: 12px; }
  .iv-who li { font-size: 12.5px; }
}

/* ---------- a request that waits: nobody presses anything ---------- */
.req { display: flex; align-items: center; gap: 12px; width: 250px; padding: 12px 14px; --f-app: var(--f-google); font-family: var(--f-app, var(--f-sheet)); border-radius: 10px; }
.req > .ico { width: 22px; height: 22px; color: #5f6368; }
.req p { display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; }
.req b { font-weight: 600; }
.req span { color: #5f6368; font-size: 12.5px; }
@media (max-width: 899px) {
  .req { width: 200px; padding: 9px 11px; gap: 10px; }
  .req p { font-size: 13px; }
  .req span { font-size: 12px; }
}