/*
 * Day sheet content (views/day.js, SPEC-DATABASE section 5).
 *
 * The frame is the shell's (styles.css): .sheet-layer > .sheet-backdrop + section.sheet >
 * .sheet-bar + .sheet-body (the scroller) > .sheet-content. The sheet is the page ground
 * (true black in the dark theme) with a hairline edge; 480px on the right, 560px on touch
 * tablets, a full-height bottom sheet on phones. Everything below styles what day.js puts
 * inside .sheet-content: a sticky day bar, then the day as a story. Sections sit on the
 * ground and are separated by space and a heading; hairlines separate readings, the way a
 * data sheet does. Text stays in ink; colour sits in icons, dots, bars and the bezel.
 */

/* ------------------------------------------------------------ slide timing */
/* SPEC-DATABASE asks for a 180 ms slide; the frame's keyframes stay the shell's. */
.sheet-layer .sheet,
.sheet-layer .sheet-backdrop {
  animation-duration: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  .sheet-layer .sheet,
  .sheet-layer .sheet-backdrop {
    animation: none;
  }
}

/* ------------------------------------------------------------------- root */

.day-root {
  /* Mirrors .sheet-body's side padding so the sticky bar can reach both edges. */
  --day-gutter-l: 24px;
  --day-gutter-r: max(24px, var(--safe-right, 0px));
  --day-bg: var(--bg);
  --chart-surface: var(--bg);
  position: relative;
  /* Vertical scrolling stays native; horizontal drags reach the swipe handler. */
  touch-action: pan-y;
  gap: 12px;
}

/* Anything scrolled into view lands below the sticky day bar. */
.day-root .day-hero,
.day-root .day-section,
.day-root .day-composer {
  scroll-margin-top: 72px;
}

.day {
  display: flex;
  flex-direction: column;
  gap: 36px;
  min-width: 0;
  padding-bottom: 8px;
}

.day.is-swiping,
.day-root:has(.day.is-swiping) {
  -webkit-user-select: none;
  user-select: none;
}

/* ------------------------------------------------------------- the day bar */

.day-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  /* day.js sets top and margin-top to minus the scroller's top padding. */
  margin: 0 calc(-1 * var(--day-gutter-r)) 0 calc(-1 * var(--day-gutter-l));
  padding: 6px var(--day-gutter-r) 6px var(--day-gutter-l);
  border-bottom: 1px solid transparent;
  background: var(--day-bg);
  transition: border-color 150ms ease;
}

.day-bar.is-scrolled {
  border-bottom-color: var(--hairline);
}

.day-nav {
  display: inline-flex;
  flex: none;
  gap: 8px;
}

.day-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.day-icon-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.day-icon-btn:disabled {
  color: var(--ink-3);
  opacity: 0.4;
  cursor: default;
}

.day-flip {
  transform: scaleX(-1);
}

.day-compact {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
}

.day-compact-date {
  overflow: hidden;
  text-overflow: ellipsis;
}

.day-compact-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dot, var(--ink-3));
}

.day-compact-score {
  color: var(--ink-2);
  font-size: 17px;
}

.day-position {
  flex: none;
  margin-left: auto;
  color: var(--ink-3);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  transition: opacity 150ms ease;
}

.day-bar.is-condensed .day-compact {
  opacity: 1;
  transform: none;
}

.day-bar.is-condensed .day-position {
  position: absolute;
  right: var(--day-gutter-r);
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------- heading */

.day-hero {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.day-hero.is-text-only {
  grid-template-columns: minmax(0, 1fr);
}

.day-hero-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.day-title {
  color: var(--ink);
  font-size: 24px;
  font-weight: 650;
  font-stretch: 105%;
  letter-spacing: -0.01em;
  line-height: 1.18;
  text-wrap: balance;
}

.day-year {
  margin-top: -6px;
  color: var(--ink-3);
  font-size: 14px;
}

.day-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.day-zone-pill .status-dot {
  width: 9px;
  height: 9px;
}

/* Dial-lite: the instrument's bezel in miniature. */
.day-bezel {
  position: relative;
  width: 76px;
  height: 76px;
}

.day-bezel svg {
  position: absolute;
  inset: 0;
}

.day-bezel line {
  stroke-width: 1.7;
  stroke-linecap: butt;
}

.day-bezel-base line {
  stroke: var(--hairline);
}

.day-bezel-base line.is-major {
  stroke: var(--axis);
}

.day-bezel-lit line {
  stroke: var(--bezel, var(--ink-2));
}

.day-bezel-lit {
  filter: drop-shadow(0 0 4px color-mix(in oklab, var(--bezel, var(--ink-2)) 60%, transparent));
}

.day-bezel-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.day-bezel-inner {
  display: inline-flex;
  align-items: baseline;
  color: var(--ink);
  font-size: 27px;
  line-height: 1;
  letter-spacing: -0.01em;
}

.day-bezel-unit {
  margin-left: 1px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
}

.day-bezel.is-empty .day-bezel-inner {
  color: var(--ink-3);
}

/* ------------------------------------------------------------------- lead */

.day-lead {
  max-width: none;
  font-size: 19px;
  line-height: 1.42;
}

/* --------------------------------------------------------------- sections */

.day-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.day-section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  font-stretch: 105%;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

.day-section-icon {
  display: inline-grid;
  place-items: center;
}

.day-sentence {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  text-wrap: pretty;
}

.day-fine {
  margin-top: -4px;
}

.day-none {
  color: var(--ink-2);
  font-size: 15px;
}

.day-root .bridge {
  margin-top: -6px;
}

.day-inline-link {
  color: var(--ink-2);
}

/* ---- readouts (Recovery) ---- */

.day-readouts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
}

.day-readout {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 12px 0 14px;
  border-top: 1px solid var(--hairline);
}

.day-readout-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
}

.day-readout-icon {
  display: inline-grid;
  place-items: center;
}

.day-flag {
  display: inline-grid;
  place-items: center;
  color: var(--status-serious);
}

.day-readout-figure {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-height: 36px;
}

.day-readout-value {
  color: var(--ink);
  font-size: 32px;
  line-height: 1.1;
}

.day-readout-value.is-missing {
  color: var(--ink-3);
  font-size: 15px;
  font-stretch: 100%;
  font-weight: 450;
  line-height: 36px;
}

.day-readout-unit {
  color: var(--ink-2);
  font-size: 14px;
}

.day-delta,
.day-readout-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  font-size: 13px;
  line-height: 1.35;
}

.day-readout-note {
  color: var(--ink-3);
}

.day-delta-value {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--ink-2);
  font-weight: 600;
  white-space: nowrap;
}

.day-delta-value.good {
  color: var(--status-good);
}

.day-delta-value.bad {
  color: var(--status-critical);
}

.day-delta-base {
  color: var(--ink-3);
  white-space: nowrap;
}

/* ---- stat lists (night, day) ---- */

.day-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  column-gap: 20px;
  margin: 0;
}

.day-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 0 12px;
  border-top: 1px solid var(--hairline);
}

.day-stat dt {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  font-size: 13px;
}

.day-stat dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  margin: 0;
}

.day-stat-value {
  color: var(--ink);
  font-size: 21px;
  line-height: 1.2;
}

.day-stat-extra {
  color: var(--ink-3);
  font-size: 13px;
}

.day-stat-extra.good {
  color: var(--status-good);
}

.day-stat-extra.bad {
  color: var(--status-critical);
}

/* ---- the night before ---- */

.day-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.day-stage-bar {
  min-height: 12px;
}

.day-times {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 2px 0;
}

.day-time {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.day-time-label {
  color: var(--ink-3);
  font-size: 13px;
}

.day-time-value {
  color: var(--ink);
  font-size: 24px;
  line-height: 1.15;
  white-space: nowrap;
}

/* ---- the day ---- */

.day-strain {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}

.day-strain-figure {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.day-strain-value {
  color: var(--ink);
  font-size: 44px;
  line-height: 1;
}

.day-strain-label {
  color: var(--ink-2);
  font-size: 15px;
}

.day-strain-note {
  color: var(--ink-2);
  font-size: 14px;
}

.day-meter {
  margin-top: -2px;
}

.day-workouts-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.day-workouts {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.day-workout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 16px;
  padding: 12px 0 14px;
  border-top: 1px solid var(--hairline);
}

.day-workout:last-child {
  border-bottom: 1px solid var(--hairline);
}

.day-workout-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.day-workout-sport {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.day-workout-meta {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.day-workout-strain {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--ink);
  line-height: 1.05;
}

.day-workout-strain .num {
  font-size: 26px;
}

.day-workout-strain-label {
  color: var(--ink-3);
  font-size: 12px;
}

.day-zones {
  display: flex;
  grid-column: 1 / -1;
  gap: 2px;
  height: 6px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 3px;
}

.day-zone {
  flex-basis: 0;
  min-width: 3px;
  height: 100%;
}

.day-zone-key {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-3);
  font-size: 12px;
}

.day-zone-ramp {
  display: inline-flex;
  gap: 2px;
}

.day-zone-end {
  margin: 0 -2px;
  font-variant-numeric: tabular-nums;
}

.day-zone-ramp > span {
  width: 14px;
  height: 6px;
  border-radius: 2px;
}

/* ---- notes and journal ---- */

.day-notes {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.day-note-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.day-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.day-root .day-note-chip {
  max-width: 100%;
  border-color: var(--hairline);
  background: var(--surface-2);
  color: var(--ink);
  white-space: normal;
  text-align: left;
}

.day-note-chip > span {
  min-width: 0;
}

.day-note-tags {
  color: var(--ink-3);
  font-size: 13px;
}

.day-note-text {
  max-width: 60ch;
  padding-left: 14px;
  border-left: 2px solid var(--hairline);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-line;
}

.day-journal {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.day-subhead {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
}

.day-journal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.day-root .day-journal-chip {
  min-height: 32px;
  padding: 5px 12px;
  border-radius: 16px;
  white-space: normal;
  line-height: 1.3;
}

.day-journal-chip .icon {
  color: var(--ink-3);
}

.day-journal-chip.is-yes .icon {
  color: var(--status-good);
}

.day-journal-q {
  min-width: 0;
}

.day-journal-a {
  flex: none;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}

.day-journal-chip.is-no {
  background: transparent;
  color: var(--ink-2);
}

.day-note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.day-composer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.day-composer-title {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.day-note-chips .chips {
  gap: 8px;
}

.day-own-tag {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.day-own-tag .input {
  flex: 1 1 auto;
  min-width: 0;
}

.day-own-tag .btn {
  flex: none;
  height: 40px;
}

.day-note-textarea {
  min-height: 84px;
}

.day-composer-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--ink);
  font-size: 14px;
}

.day-composer-error .icon {
  margin-top: 2px;
  color: var(--status-critical);
}

.day-composer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.day-spacer {
  flex: 1 1 auto;
}

/* ---- the bigger picture ---- */

.day-measures {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.day-measure {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 0 16px;
  border-top: 1px solid var(--hairline);
}

.day-measure:last-child {
  border-bottom: 1px solid var(--hairline);
}

.day-measure-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
}

.day-measure-label {
  grid-column: 1;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
}

.day-measure-figure {
  grid-column: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.day-measure-head > .status {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
}

.day-measure-value {
  color: var(--ink);
  font-size: 26px;
  line-height: 1.15;
}

.day-measure-value.is-missing {
  color: var(--ink-3);
  font-size: 15px;
  font-stretch: 100%;
  font-weight: 450;
  line-height: 30px;
}

.day-measure-unit {
  color: var(--ink-2);
  font-size: 14px;
}

.day-measure-text {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
  text-wrap: pretty;
}

.day-range {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}

.day-range-track {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: var(--hairline);
}

.day-range-band {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  background: color-mix(in oklab, var(--c-hrv) 34%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c-hrv) 55%, transparent);
}

.day-range-mark {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid var(--day-bg);
  border-radius: 50%;
  background: var(--c-hrv);
  transform: translate(-50%, -50%);
}

.day-range-labels {
  position: relative;
  height: 16px;
  color: var(--ink-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.day-range-labels > span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}

/* ---- missing day and hints ---- */

.day-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: -16px;
}

.day-hint {
  margin-top: -12px;
  text-align: center;
}

/* ------------------------------------------------------------- pointer */

@media (any-pointer: coarse) {
  .day-icon-btn {
    width: 44px;
    height: 44px;
  }

  .day-root .btn.small {
    height: 40px;
    padding: 0 14px;
  }

  .day-root .day-note-chip,
  .day-root .chip[aria-pressed] {
    min-height: 44px;
  }

  /* 16px keeps iOS from zooming into a field on focus. */
  .day-composer .input {
    font-size: 16px;
  }
}

@media (hover: hover) {
  .day-icon-btn:hover:not(:disabled) {
    border-color: var(--axis);
    background: var(--surface-2);
  }

  .day-root .day-note-chip:hover {
    border-color: var(--axis);
  }
}

/* ---------------------------------------------------------------- sizes */

/* Touch tablets get the 560px sheet: a little more room for the figures. */
@media (hover: none) and (min-width: 600px) {
  .day-title {
    font-size: 26px;
  }

  .day-lead {
    font-size: 20px;
  }
}

/* Phones: the body's gutters are 16px (or the safe area); day.js reads the real ones. */
@media (max-width: 599.98px) {
  .day-root {
    --day-gutter-l: max(16px, var(--safe-left, 0px));
    --day-gutter-r: max(16px, var(--safe-right, 0px));
  }

  .day {
    gap: 32px;
  }

  .day-hero {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 14px;
  }

  .day-bezel {
    width: 68px;
    height: 68px;
  }

  .day-bezel svg {
    width: 68px;
    height: 68px;
  }

  .day-bezel-inner {
    font-size: 24px;
  }

  .day-title {
    font-size: 22px;
  }

  .day-lead {
    font-size: 18px;
  }

  .day-readout-value {
    font-size: 30px;
  }

  .day-time-value {
    font-size: 21px;
  }

  .day-composer {
    padding: 14px;
  }
}

/* The shell's close button sits at the right end of this bar. */
.sheet-layer:not(.is-host) .day-bar {
  padding-right: calc(var(--day-gutter-r) + 52px);
}

/* Short screens (a phone on its side): a slimmer day bar. */
@media (max-height: 500px) {
  .day-bar {
    min-height: 0;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .day {
    gap: 28px;
  }
}

/* --------------------------------------------------------------- themes */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .day-bezel-base line {
    stroke: var(--axis);
  }

  :root:not([data-theme="dark"]) .day-bezel-lit {
    filter: none;
  }

  :root:not([data-theme="dark"]) .day-range-band {
    background: color-mix(in oklab, var(--c-hrv) 22%, transparent);
  }
}

:root[data-theme="light"] .day-bezel-base line {
  stroke: var(--axis);
}

:root[data-theme="light"] .day-bezel-lit {
  filter: none;
}

:root[data-theme="light"] .day-range-band {
  background: color-mix(in oklab, var(--c-hrv) 22%, transparent);
}

/* ---------------------------------------------------------------- print */

@media print {
  .day-bar,
  .day-note-actions,
  .day-hint,
  .day-root .bridge {
    display: none !important;
  }
}