/* Pulse calendar: Daybook's liquid month, set in Pulse's Swiss language. OWNER: calendar worker.
   Ported from ui-showcase/pulse/calendar.css; the grid is aligned to the period (cells may span two months).
   Self-contained. Reuses Pulse tokens when present, falls back to the hex values.
   Zero layout shift: every box has a fixed or width-derived size; state changes only touch
   transform / opacity / box-shadow / colour; changing text lives in fixed, absolutely placed boxes. */

.pcal {
  --c-paper: var(--paper, #F3F2EE);
  --c-ink: var(--ink, #0D0D0D);
  --c-grey: var(--grey, #8A8A85);
  --c-grey-t: var(--grey-t, #5C5C58);
  --c-hair: var(--hair, #D9D8D2);
  --c-mute: var(--mute, #C6C5BF);
  --c-red: var(--red, #FF3B1F);
  --c-red-t: var(--red-t, #C4240C);
  --c-display: var(--f-display, 'Archivo', 'Arial Narrow', system-ui, sans-serif);
  --c-mono: var(--f-mono, 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace);
  --c-expo: var(--expo, cubic-bezier(.16, 1, .3, 1));
  --c-ease: var(--ease, cubic-bezier(.2, .8, .2, 1));

  --head-h: 36px;
  --lane-h: 56px;
  --wk-h: 26px;
  --legend-h: 30px;
  --panel-h-m: 320px;
  --cell-ratio: 10 / 7;

  container: pcal / inline-size;
  position: relative;
  color: var(--c-ink);
  font-family: var(--c-display);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.pcal *, .pcal *::before, .pcal *::after { box-sizing: border-box; }
.pcal.is-loading { visibility: hidden; }
.pcal button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
.pcal .pcal-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------------- frame ---------------- */
.pcal-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "lane" "grid" "strip" "panel" "legend";
}
@container pcal (min-width: 760px) {
  .pcal-frame {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    grid-template-rows: var(--head-h) var(--lane-h) auto var(--legend-h);
    grid-template-areas: "head head" "lane panel" "grid panel" "legend legend";
    column-gap: 32px;
  }
}

/* head: month name + over count, one fixed line */
.pcal-head {
  grid-area: head; height: var(--head-h); position: relative;
  border-bottom: 1px solid var(--c-ink);
}
.pcal-month { position: absolute; left: 0; right: 0; top: 6px; height: 24px; }
.pcal-month span {
  position: absolute; left: 0; top: 0; height: 24px; line-height: 24px; white-space: nowrap;
  font-size: 20px; font-weight: 680; font-stretch: 75%; letter-spacing: -.005em;
}
.pcal-sum { font: 400 12px/24px var(--c-mono); color: var(--c-grey-t); white-space: nowrap; height: 24px; text-align: right; position: absolute; right: 0; top: 6px; width: 30ch; overflow: hidden; }
.pcal-sum b { font-weight: 500; color: var(--c-ink); }
.pcal-sum b.is-red { color: var(--c-red-t); }

/* ---------------- fixed lane ---------------- */
.pcal-lane { grid-area: lane; height: var(--lane-h); position: relative; }
.pcal-lane-in { position: absolute; inset: 0; overflow: clip; }
.pcal-axis { position: absolute; left: 0; right: 0; top: 36px; height: 1px; background: var(--c-ink); }
.pcal-dayticks { position: absolute; left: 0; right: 0; top: 37px; height: 3px;
  background-image: linear-gradient(90deg, var(--c-mute) 1px, transparent 1px);
  background-size: var(--tick-step, 3.33%) 3px; background-position: calc(var(--tick-step, 3.33%) / 2) 0; background-repeat: repeat-x; }
.pcal-lane-end { position: absolute; top: 42px; font: 400 10px/12px var(--c-mono); color: var(--c-grey-t); height: 12px; }
.pcal-lane-end.is-start { left: 0; }
.pcal-lane-end.is-end { right: 0; text-align: right; }
.pcal-lane-now { position: absolute; top: 30px; width: 1px; height: 12px; background: var(--c-red); transform: translateX(-.5px); }
.pcal-fx {
  position: absolute; top: 0; height: 40px; width: 0;
}
.pcal-lane-empty { position: absolute; left: 0; top: 12px; height: 14px; font: 400 11px/14px var(--c-mono); color: var(--c-grey-t); white-space: nowrap; }
.pcal-lane-empty.has-hint { top: 2px; }
.pcal-lane-hint { position: absolute; left: 0; top: 16px; height: 14px; font: 400 10px/14px var(--c-mono); color: var(--c-grey-t); white-space: nowrap; }
.pcal-fx-hit { position: absolute; top: 26px; height: 20px; width: 16px; left: -8px; display: block; z-index: 2; }
.pcal-fx-hit:focus-visible { outline: 2px solid var(--c-red); outline-offset: -2px; }
.pcal-fx-sq { position: absolute; left: -3px; top: 33px; width: 7px; height: 7px; background: var(--c-ink); transition: transform .3s var(--c-expo), background-color .2s; }
.pcal-fx.is-due .pcal-fx-sq { background: var(--c-paper); box-shadow: inset 0 0 0 1px var(--c-ink); }
.pcal-fx-stem { position: absolute; left: 0; width: 1px; background: var(--c-hair); }
.pcal-fx-lbl {
  position: absolute; height: 14px; font: 400 11px/14px var(--c-mono); white-space: nowrap; color: var(--c-ink);
  transition: color .2s; cursor: pointer; z-index: 1;
}
.pcal-fx-lbl i { font-style: normal; color: var(--c-grey-t); }
.pcal-fx.is-due .pcal-fx-lbl { color: var(--c-grey-t); }
.pcal-fx.is-on .pcal-fx-sq { transform: scale(1.45); }
.pcal-fx.is-on .pcal-fx-lbl { color: var(--c-red-t); }
.pcal-fx.is-on .pcal-fx-lbl i { color: var(--c-red-t); }

/* ---------------- grid ---------------- */
.pcal-grid { grid-area: grid; container: pcalgrid / inline-size; }
.pcal-wk {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); height: var(--wk-h);
  font: 400 11px/var(--wk-h) var(--c-mono); color: var(--c-grey-t);
}
.pcal-wk span { padding-left: 9px; white-space: nowrap; overflow: hidden; }
.pcal-cells {
  --band: 28px;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; padding: 1px;
}
.pcal .pcal-c {
  position: relative; display: block; width: 100%;
  aspect-ratio: var(--cell-ratio);
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
/* real days draw their own hairline into the 1px gutter; padding slots stay bare whitespace */
.pcal .pcal-c:not(.is-blank) { background: var(--c-paper); }
.pcal-c:not(.is-blank)::before { content: ''; position: absolute; inset: -1px; border: 1px solid var(--c-hair); pointer-events: none; }
.pcal-c.is-blank { cursor: default; }
button.pcal-c.is-future { cursor: default; }
.pcal-c:focus { outline: none; }
.pcal-c:focus-visible { outline: 2px solid var(--c-red); outline-offset: 2px; z-index: 4; }

/* liquid */
/* the vessel: everything below the label band; the liquid never enters the band */
.pcal-clip { position: absolute; left: 0; right: 0; bottom: 0; top: var(--band); overflow: hidden; pointer-events: none; }
.pcal-liq {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  transform: translate3d(0, calc(100% + 10px), 0);
  transition: transform 1.1s var(--c-expo);
  will-change: transform;
  color: var(--c-ink);
}
.pcal.is-still .pcal-liq { transition: none; }
.pcal-wave { position: absolute; left: 0; top: -5px; width: 200%; height: 10px; overflow: visible; display: block; }
.pcal-wave .w-fill { fill: currentColor; fill-opacity: .1; }
.pcal-wave .w-line { fill: none; stroke: currentColor; stroke-width: 1; }
.pcal-wave.is-back .w-line { stroke-opacity: .28; }
.pcal-c.is-over .pcal-liq .w-line { stroke: var(--c-red); }
.pcal-c.is-over .pcal-wave.is-back .w-line { stroke-opacity: .45; }
.pcal-c.is-over .pcal-liq .w-fill { fill-opacity: .13; }

/* faces: every label has its own fixed slot. Band labels sit above the vessel, so no wave can cross them. */
.pcal-face { position: absolute; inset: 0; pointer-events: none; }
.pcal-n {
  position: absolute; left: 9px; top: 3px; height: 24px; white-space: nowrap;
  font-size: 21px; line-height: 24px; font-weight: 640; font-stretch: 72%; letter-spacing: -.01em;
}
.pcal-d { font-weight: inherit; }
.pcal-mo { position: absolute; left: 1px; top: 24px; height: 12px; font: 400 10px/12px var(--c-mono); letter-spacing: 0; color: var(--c-grey-t); }
.pcal-mo:empty { display: none; }
.pcal-c.is-future .pcal-n { color: var(--c-grey); font-weight: 450; }
.pcal-amt, .pcal-over {
  position: absolute; height: 14px; white-space: nowrap; overflow: hidden;
  font: 400 11px/14px var(--c-mono); font-variant-numeric: tabular-nums;
}
.pcal-amt { right: 8px; top: 8px; width: calc(100% - 52px); text-align: right; color: var(--c-ink); }
.pcal-c.is-credit .pcal-amt { color: var(--c-grey-t); }
/* over days fill the vessel completely: the wave sits at the vessel top, the badge on solid fill at the bottom */
.pcal-over { left: 9px; bottom: 7px; right: 6px; color: var(--c-red-t); font-size: 10.5px; }
.pcal-today { display: none; }
.pcal-fxd { position: absolute; left: 38px; top: 12px; width: 6px; height: 6px; background: var(--c-ink); opacity: 0; }
.pcal-c.has-fixed .pcal-fxd { opacity: 1; }
.pcal-c.has-due .pcal-fxd { opacity: 1; background: transparent; box-shadow: inset 0 0 0 1px var(--c-ink); }

/* rings: overlays, never borders */
.pcal-ring { position: absolute; inset: 0; pointer-events: none; z-index: 2; transition: box-shadow .18s; }
.pcal-c.is-future .pcal-ring { box-shadow: inset 0 0 0 4px var(--c-paper); outline: 1px dotted var(--c-mute); outline-offset: -5px;
  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--c-mute) 35%, transparent) 6px 7px); }
.pcal-c.is-today .pcal-ring { box-shadow: inset 0 0 0 1.5px var(--c-red); }
button.pcal-c:not(.is-future):not(.is-blank):hover .pcal-ring,
.pcal-c.is-linked .pcal-ring { box-shadow: inset 0 0 0 1px var(--c-ink); }
.pcal-c.is-today:not(.is-future):hover .pcal-ring,
.pcal-c.is-today.is-linked .pcal-ring { box-shadow: inset 0 0 0 1.5px var(--c-red), inset 0 0 0 2.5px var(--c-ink); }
.pcal-c.is-sel .pcal-ring,
.pcal-c.is-sel:hover .pcal-ring { box-shadow: inset 0 0 0 2px var(--c-ink); }
.pcal-c.is-sel.is-today .pcal-ring { box-shadow: inset 0 0 0 2px var(--c-ink), inset 0 0 0 3.5px var(--c-red); }

/* crosshair highlight (Pulse pace scrub) */
.pcal-hl { position: absolute; inset: -1px; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .12s; box-shadow: 0 0 0 1px var(--c-red); }
.pcal-hl::before, .pcal-hl::after { content: ''; position: absolute; background: var(--c-red); }
.pcal-hl::before { left: 50%; top: -7px; bottom: -7px; width: 1px; transform: translateX(-.5px);
  -webkit-mask: linear-gradient(#000 0 7px, transparent 7px calc(100% - 7px), #000 calc(100% - 7px)); mask: linear-gradient(#000 0 7px, transparent 7px calc(100% - 7px), #000 calc(100% - 7px)); }
.pcal-hl::after { top: 50%; left: -7px; right: -7px; height: 1px; transform: translateY(-.5px);
  -webkit-mask: linear-gradient(90deg, #000 0 7px, transparent 7px calc(100% - 7px), #000 calc(100% - 7px)); mask: linear-gradient(90deg, #000 0 7px, transparent 7px calc(100% - 7px), #000 calc(100% - 7px)); }
.pcal-c.is-hl { z-index: 3; }
.pcal-c.is-hl .pcal-hl { opacity: 1; }

/* droplet */
.pcal-drop { position: absolute; left: 50%; top: 0; width: 5px; height: 7px; margin-left: -2.5px; background: var(--c-ink); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; pointer-events: none; z-index: 1; opacity: 0; }
.pcal-drop.is-red { background: var(--c-red); }
.pcal-ripple { position: absolute; left: 50%; width: 28px; height: 1px; margin-left: -14px; background: var(--c-ink); pointer-events: none; z-index: 1; opacity: 0; }
.pcal-ripple.is-red { background: var(--c-red); }

/* narrow cells: keep the liquid and the number, drop the small print */
@container pcal (max-width: 480px) {
  .pcal .pcal-legend { height: 72px; }
  .pcal-sum { font-size: 11px; }
}
/* mid widths: cells too narrow for amounts beside the numeral */
@container pcalgrid (max-width: 741px) {
  .pcal-amt, .pcal-over { display: none; }
  .pcal-fxd { left: auto; right: 8px; }
}
/* phone: taller cells so the vessel keeps depth below the band */
@container pcalgrid (max-width: 560px) {
  .pcal-cells { --band: 22px; --cell-ratio: 5 / 6; }
  .pcal-n { left: 6px; top: 1px; font-size: 17px; line-height: 20px; height: 20px; }
  .pcal-mo { left: 0; top: 19px; height: 10px; font-size: 9px; line-height: 10px; }
  .pcal-wk span { padding-left: 6px; }
  .pcal-fxd { right: 5px; top: 8px; width: 5px; height: 5px; }
}

/* ---------------- legend ---------------- */
.pcal-legend {
  grid-area: legend; height: var(--legend-h); overflow: hidden;
  font: 400 11px/14px var(--c-mono); color: var(--c-grey-t);
  padding-top: 10px; white-space: nowrap; text-overflow: ellipsis;
}
.pcal-legend b { font-weight: 500; color: var(--c-ink); }
.pcal-legend .k-sq { display: inline-block; width: 6px; height: 6px; background: var(--c-ink); vertical-align: 1px; margin-right: 2px; }
.pcal-legend .k-hollow { display: inline-block; width: 6px; height: 6px; box-shadow: inset 0 0 0 1px var(--c-ink); vertical-align: 1px; margin-right: 2px; }
.pcal-legend .k-red { display: inline-block; width: 14px; height: 1px; background: var(--c-red); vertical-align: 3px; margin-right: 4px; }
.pcal-legend .k-red + span { color: var(--c-red-t); }

/* ---------------- selected-day strip (narrow only, sits right under the grid) ---------------- */
.pcal-strip { grid-area: strip; display: none; position: relative; height: 64px; overflow: hidden; }
@container pcal (max-width: 759.98px) {
  .pcal-strip { display: block; }
  .pd-top { display: none !important; }
  .pd-tl { margin-top: 14px !important; }
}
.ps-layer { position: absolute; inset: 0; background: var(--c-paper); }
.ps-date { position: absolute; left: 0; top: 12px; right: 45%; height: 26px; font-size: 21px; line-height: 26px; font-weight: 700; font-stretch: 68%; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-date em { font-style: normal; color: var(--c-grey-t); font-weight: 500; }
.ps-total { position: absolute; right: 0; top: 12px; width: 45%; height: 26px; text-align: right; font-size: 21px; line-height: 26px; font-weight: 600; font-stretch: 85%; white-space: nowrap; }
.ps-verdict { position: absolute; left: 0; right: 64px; top: 40px; height: 16px; font: 400 11px/16px var(--c-mono); color: var(--c-grey-t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-verdict.is-over { color: var(--c-red-t); }
.ps-tag { position: absolute; right: 0; top: 40px; width: 64px; height: 16px; text-align: right; font: 400 11px/16px var(--c-mono); color: var(--c-red-t); }

/* ---------------- day panel ---------------- */
.pcal-panel { grid-area: panel; position: relative; height: var(--panel-h-m); margin-top: 0; border-top: 1px solid var(--c-ink); overflow: hidden; }
@container pcal (min-width: 760px) {
  .pcal-panel { height: auto; margin-top: 0; border-top: 0; border-left: 1px solid var(--c-hair); }
  .pcal-legend { white-space: nowrap; }
}
@container pcal (max-width: 759.98px) {
  .pcal-legend { white-space: normal; line-height: 15px; height: 56px; padding-top: 16px; }
  .pcal-month span { font-size: 18px; }
}
.pcal-layer { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0 0 0 24px; background: var(--c-paper); }
@container pcal (max-width: 759.98px) {
  .pcal-layer { padding: 0; }
}
.pd-meta { flex: none; height: 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; font: 400 11px/14px var(--c-mono); color: var(--c-grey-t); }
.pd-meta .pd-tag { color: var(--c-red-t); }
.pd-date { flex: none; height: 36px; font-size: 30px; line-height: 36px; font-weight: 700; font-stretch: 68%; letter-spacing: -.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.pd-date em { font-style: normal; color: var(--c-grey-t); font-weight: 500; }
.pd-total { flex: none; height: 30px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: baseline; margin-top: 6px; }
.pd-total b { font-size: 24px; line-height: 30px; font-weight: 600; font-stretch: 85%; white-space: nowrap; }
.pd-total span { font: 400 11px/14px var(--c-mono); color: var(--c-grey-t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-verdict { flex: none; height: 16px; font: 400 12px/16px var(--c-mono); color: var(--c-grey-t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.pd-verdict.is-over { color: var(--c-red-t); }
.pd-fixed { flex: none; height: 16px; font: 400 11px/16px var(--c-mono); color: var(--c-grey-t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 24-hour strip */
.pd-tl { flex: none; position: relative; height: 56px; margin-top: 12px; }
.pd-top { flex: none; display: flex; flex-direction: column; }
.pd-tl-plot { position: absolute; left: 0; right: 0; top: 0; height: 36px; }
.pd-tl-base { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--c-ink); }
.pd-tl-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--c-hair); }
.pd-tl-ax { position: absolute; left: 0; right: 0; top: 40px; height: 12px; }
.pd-tl-ax span { position: absolute; top: 0; font: 400 10px/12px var(--c-mono); color: var(--c-grey-t); transform: translateX(-50%); }
.pd-tl-ax span:first-child { transform: none; }
.pd-tl-ax span:last-child { transform: translateX(-100%); }
.pd-stem { position: absolute; bottom: 0; width: 2px; margin-left: -1px; background: var(--c-ink); transform-origin: 50% 100%; transition: background-color .15s; }
.pd-stem.is-fixed { width: 7px; height: 7px !important; margin-left: -3.5px; bottom: -3px; }
.pd-stem.is-ns { background: var(--c-mute); }
.pd-stem.is-on { background: var(--c-red); }

/* list */
.pd-lh { flex: none; height: 26px; margin-top: 4px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding-bottom: 6px; border-bottom: 1px solid var(--c-ink); font: 400 11px/14px var(--c-mono); color: var(--c-grey-t); }
.pd-list { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--c-mute) transparent; }
.pd-row {
  display: grid; grid-template-columns: 40px 14px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  height: 36px; border-bottom: 1px solid var(--c-hair); padding-right: 4px; width: 100%;
}
.pcal .pd-row:focus-visible { outline: 2px solid var(--c-red); outline-offset: -2px; }
.pd-row:hover { background: color-mix(in srgb, var(--c-ink) 4%, transparent); }
.pd-t { font: 400 11px/14px var(--c-mono); color: var(--c-grey-t); }
.pd-mk { font-size: 11px; line-height: 1; text-align: center; }
.pd-m { min-width: 0; font-size: 14px; line-height: 18px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-m i { font: 400 10px/14px var(--c-mono); font-style: normal; color: var(--c-grey-t); margin-left: 6px; }
.pd-m i.is-rv { color: var(--c-red-t); }
.pd-m i.pd-bill { color: var(--c-ink); border: 1px solid var(--c-hair, currentColor); padding: 0 4px; line-height: 12px; display: inline-block; vertical-align: 1px; }
.pd-a { font-size: 14px; line-height: 18px; font-weight: 600; font-stretch: 85%; text-align: right; white-space: nowrap; }
.pd-row.is-ns .pd-a { color: var(--c-grey-t); font-weight: 400; }
.pd-row.is-fresh .pd-t { color: var(--c-red-t); }
.pd-date, .pd-verdict, .pd-fixed, .pd-empty, .pcal-sum, .pcal-legend { margin: 0; }
.pd-empty { padding: 18px 0; font: 400 12px/16px var(--c-mono); color: var(--c-grey-t); }

@media (forced-colors: active) {
  .pcal-liq .w-line { stroke: CanvasText; }
  .pcal-c.is-sel .pcal-ring { outline: 2px solid Highlight; outline-offset: -2px; }
  .pcal-c.is-today .pcal-ring { outline: 2px dashed CanvasText; outline-offset: -3px; }
}