:root {
  --week-w: 3rem;
  --day-w: 1fr;
  --month-w: 2rem;
  --row-h: 15vh;
}
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font:
    500 14px/1.2 ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Inter,
    Arial;
  background: var(--bg);
  color: var(--ink);
  /* Prevent body scrolling / unwanted scrollbars due to mobile browser UI chrome affecting vh */
  overflow: hidden;
}

/* Ensure root app container doesn't introduce its own scrollbars */
#app {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.today-date {
  cursor: pointer;
}
.today-date::first-line {
  color: var(--today);
}
.today-button:hover {
  opacity: 0.8;
}

/* Header row */
.calendar-header,
#calendar-header {
  display: grid;
  grid-template-columns: var(--week-w) repeat(7, var(--day-w)) var(--month-w);
  border-bottom: 0.2em solid var(--muted);
  align-items: last baseline;
  flex-shrink: 0;
  width: 100%;
}

/* Main container */
.calendar-container,
#calendar-container {
  flex: 1;
  overflow: hidden;
  position: relative;
  width: 100%;
  display: flex;
}

/* Viewports (support id or class) */
.calendar-viewport,
#calendar-viewport {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  width: 100%;
  scrollbar-width: none;
}
.calendar-viewport::-webkit-scrollbar,
#calendar-viewport::-webkit-scrollbar {
  display: none;
}
.calendar-content,
#calendar-content {
  position: relative;
}
/* Week row: label + 7-day grid + jogwheel column */
.week-row {
  display: grid;
  grid-template-columns: var(--week-w) repeat(7, var(--day-w)) var(--month-w);
  position: relative;
  overflow: visible;
  height: var(--row-h);
  scroll-snap-align: start;
  width: 100%;
}

/* Label cells */
.year-label,
.week-label {
  display: grid;
  place-items: center;
  width: 100%;
  color: var(--muted);
  cursor: ns-resize;
  font-size: 1.2em;
}

.week-label {
  height: var(--row-h);
}
/* 7-day grid inside each week row */
.week-row > .days-grid {
  grid-column: 2 / span 7;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  position: relative;
  height: 100%;
  width: 100%;
}

.month-name-label {
  grid-column: -2 / -1;
  font-size: 2em;
  font-weight: 700;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 15;
  overflow: visible;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
}
.month-name-label > span {
  display: inline-block;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  transform-origin: center;
}