/* Section 02 Days. OWNER: calendar worker. calendar.css holds the liquid calendar; this file holds the section frame and the weekday rhythm row. */
/* ---------- 02 days ---------- */
.days { padding-top: 96px; overflow-x: clip; }
.days-head {
  display: grid; grid-template-columns: minmax(240px, 3fr) 9fr; column-gap: 48px; align-items: end;
  margin-bottom: 32px;
}
.days-head .sec-note { margin: 0; max-width: 52ch; height: 2.9em; overflow: hidden; }
.cal-mount { width: 100%; min-width: 0; }

/* ---------- weekday rhythm (port of Daybook's renderRhythm, in Pulse's Swiss language) ---------- */
.rh {
  display: grid; grid-template-columns: minmax(240px, 3fr) 9fr; column-gap: 48px;
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--ink);
}
.rh-side { min-width: 0; }
.rh-title { margin: 0; height: 24px; font: 680 20px/24px var(--f-display); font-stretch: 75%; letter-spacing: -.005em; }
.rh-note { margin: 8px 0 0; height: 48px; overflow: hidden; font: 400 12px/16px var(--f-mono); color: var(--grey-t); max-width: 40ch; }
/* fixed 160px plot: 24px label band at the bottom, 112px of bar travel, 24px headroom for the value */
.rh-plot { position: relative; height: 160px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.rh-allow { position: absolute; left: 0; right: 0; bottom: 24px; height: 0; border-top: 1px dashed var(--red); z-index: 2; pointer-events: none; transition: transform .9s var(--expo); }
.rh-allow[hidden] { display: none; }
.rh-allow-l { position: absolute; right: 0; top: -17px; height: 14px; font: 400 11px/14px var(--f-mono); color: var(--red-t); background: var(--paper); padding-left: 6px; white-space: nowrap; }
.rh-col { position: relative; height: 100%; min-width: 0; }
.rh-col:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.rh-col::after { content: ''; position: absolute; left: 0; right: 0; bottom: 24px; height: 1px; background: var(--ink); }
.rh-bar {
  position: absolute; left: 50%; bottom: 24px; width: min(40px, 80%); height: 112px;
  background: color-mix(in srgb, var(--ink) 12%, var(--paper)); box-shadow: inset 0 1px 0 var(--ink);
  transform-origin: 50% 100%; transform: translateX(-50%) scaleY(var(--h, .015));
  transition: transform .9s var(--expo), background-color .3s;
}
.rh-col.over .rh-bar { background: color-mix(in srgb, var(--red) 22%, var(--paper)); box-shadow: inset 0 1px 0 var(--red); }
.rh-col.hi .rh-bar { background: var(--ink); }
.rh-col.hi.over .rh-bar { background: var(--red-t); box-shadow: none; }
.rh-val {
  position: absolute; left: 50%; bottom: 24px; height: 14px; white-space: nowrap;
  font: 500 11px/14px var(--f-mono); color: var(--ink); opacity: 0; transition: opacity .2s, transform .9s var(--expo);
}
.rh-col.hi .rh-val, .rh-col:hover .rh-val, .rh-col:focus-visible .rh-val { opacity: 1; }
.rh-lab { position: absolute; left: 0; right: 0; bottom: 4px; height: 14px; text-align: center; font: 400 11px/14px var(--f-mono); color: var(--grey-t); }
.rh-col.hi .rh-lab { color: var(--ink); font-weight: 500; }
html[data-motion="off"] .rh-bar, html[data-motion="off"] .rh-val, html[data-motion="off"] .rh-allow { transition: none; }

@media (max-width: 1100px) {
  .days-head, .rh { grid-template-columns: 1fr; row-gap: 16px; }
  .rh-note { height: 32px; max-width: none; }
}
@media (max-width: 760px) {
  .days { padding-top: 64px; }
  .days-head { margin-bottom: 24px; }
  .days-head .sec-note { height: 4.35em; }
  .rh { margin-top: 40px; }
  .rh-plot { gap: 4px; }
  .rh-note { height: 48px; }
}