/* Night (§5.1), Day (§5.2) and Workout (§5.3) — owned by the "detail" builder. Ported from prototype v2. */

/* ==== ported from the prototype: views/night.css ==== */
/* views/night.css — Night view (spec §5.1, round 2). Owner: builder D. Tokens only.
   The lanes are V.charts.nightStack (charts-extra.css); this file styles what sits around them. */

/* Sleep stage swatches (side panel; spec 8.4): position and text carry the meaning */
.st{stroke-width:1}
.st-deep{fill:var(--v-series);stroke:var(--v-series)}
.st-rem{stroke:var(--v-series)}
.st-light{fill:var(--v-band);stroke:var(--v-series)}
.st-awake{fill:var(--v-paper);stroke:var(--v-ink)}
.st-unknown{fill:var(--v-paper);stroke:var(--v-ink);stroke-dasharray:1.5 1.5}
.night-swatch{flex:none;display:inline-block;vertical-align:middle;overflow:visible}

/* The stack */
.night-fig{gap:6px}
.night-stack{margin-top:4px}
.night-table{margin-top:6px}

/* Side panel: Stages, value first (D46): the duration leads, the stage name and the quiet usual follow */
.night-side{min-width:0}
.night-stagelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.night-stagerow{display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-areas:"val name" "val usual";align-items:baseline;column-gap:16px;row-gap:2px;padding:14px 0;border-bottom:1px solid var(--desk-rule)}
.night-stagerow:last-child{border-bottom:0}
.night-stage-val{grid-area:val;align-self:center;font:800 26px/1 var(--desk-display);letter-spacing:-.8px;font-variant-numeric:tabular-nums;color:var(--desk-ink);white-space:nowrap}
.night-stage-name{grid-area:name;display:flex;align-items:center;gap:8px;min-width:0;font:500 13px/1.4 var(--desk-font);color:var(--desk-muted)}
.night-stagerow .v-usual{grid-area:usual;font-size:11.5px}
.night-stagerow:not(:has(.v-usual)) .night-stage-name{grid-row:1 / span 2;align-self:center}
.night-links{flex-direction:column;align-items:flex-start;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--desk-rule)}
@container view (min-width:760px){
  .night-stagerow{grid-template-columns:84px minmax(0,1fr)}
  .night-stage-val{font-size:28px}
}


/* ==== ported from the prototype: views/day.css ==== */
/* views/day.css — Day view (spec §5.2) plus the shared detail-view styles (.detail-*, .dt-*)
   used by Night and Workout. Owner: builder D. Tokens only; container queries on #view.
   Round 2 (D46): let it breathe. The number leads every figure; names, usual ranges and section heads are quieter. */

/* ---- Head ---------------------------------------------------------------------------- */
/* The contract roles (.view-head, .view-title, .btn) belong to editorial.css when mounted (0,2,1 or more), so the
   adjustments here are scoped under #view. */
#view .detail-head{margin-bottom:28px}
#view .detail-head .view-actions{align-self:flex-end}
#view .detail-head .view-actions[hidden]{display:none}
.detail-step{display:flex;gap:8px}
#view .detail-stepbtn{gap:4px}
/* the pager reads as links, as in the prototype (Desk blue); a disabled end stays ink */
#view a.detail-stepbtn{color:var(--desk-blue)}
.detail-stepbtn span{white-space:nowrap}
#view .detail-stepbtn[disabled]{opacity:.42;box-shadow:none}
.detail-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:12px 0 0;font:400 12px/1.5 var(--desk-mono);color:var(--desk-muted)}
.detail-sub>*{max-width:100%}
/* loading stand-ins (no layout shift): they hold the space of the pager and the usual line */
.detail-step.is-placeholder{visibility:hidden}
.detail-sub-ph{display:inline-block;min-height:1.5em;font-size:13px}
.detail-sub .v-chip{font-size:11px}
.detail-sub .v-usual{font-size:13px}
/* Day and Workout are named by their subject (a date, a workout type): a quieter title, so the figures lead (D46) */
#view .detail-head.is-named .view-title{font-size:calc(var(--desk-title-size) * .8);letter-spacing:-1.2px}
/* Night's title is its value: '7h12' big, the word quieter */
.detail-hero-num{font-variant-numeric:tabular-nums}
.detail-hero-word{font-size:.5em;font-weight:600;letter-spacing:-.4px;color:var(--desk-muted)}
.detail-nw{white-space:nowrap}
@container view (max-width:579px){
  #view .detail-head .view-actions{align-self:stretch}
  .detail-step{width:100%}
  #view .detail-stepbtn{flex:1 1 0;min-width:0}
}
/* Loading: the figure strip and a chart block at their final sizes */
.detail-skel{display:flex;flex-direction:column;gap:28px;padding-top:22px;border-top:1px solid var(--desk-ink)}

/* ---- Figure strip: value first, quiet names, room to breathe ------------------------------ */
.detail-figs-wrap{border-top:1px solid var(--desk-ink);padding:22px 0 0;margin:0 0 44px}
.detail-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px;align-items:start}
.detail-fig{min-width:0}
.detail-fig.is-wide,.detail-fig.is-wide-phone{grid-column:1 / -1}
.detail-figs .fig{gap:8px}
.detail-figs .fig-meta{flex-direction:column;align-items:flex-start;gap:3px}
.detail-figs .detail-fig .fig .fig-value{font-size:30px;letter-spacing:-1px}
.detail-figs .fig-unit{font-size:14px}
.detail-figs .fig-label{font-size:13px}
.detail-figs .v-usual{font-size:12px}
.detail-figs .fig-sub{font-size:12px}
.detail-fig.is-missing .fig-value{color:var(--desk-muted)}
.detail-figs .fig-wrap{gap:2px}
.detail-figs .fig-wrap>.v-info{margin-top:4px}
.detail-figs .fig-label .v-info{margin-left:2px;vertical-align:-1px}
/* phone: three across where the values are short (Night, Workout); Night's two clock times share the second row */
.workout-figs{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:14px}
.night-figs{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:14px}
.night-figs>.detail-fig{grid-column:span 2}
.night-figs>.detail-fig[data-key="onset"],.night-figs>.detail-fig[data-key="wake"]{grid-column:span 3}
@container view (max-width:359px){
  .workout-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container view (min-width:580px){
  .detail-figs:not(.night-figs){grid-template-columns:repeat(3,minmax(0,1fr))}
  .detail-figs{column-gap:28px}
  .detail-fig.is-wide-phone{grid-column:auto}
  .detail-figs .detail-fig .fig .fig-value{font-size:34px}
}
@container view (min-width:760px){
  .night-figs{grid-template-columns:repeat(5,minmax(0,1fr))}
  .night-figs>.detail-fig,.night-figs>.detail-fig[data-key="onset"],.night-figs>.detail-fig[data-key="wake"]{grid-column:auto}
  .detail-figs .detail-fig .fig .fig-value{font-size:38px;letter-spacing:-1.3px}
  .detail-figs .fig-unit{font-size:15px}
}
@container view (min-width:1180px){
  .detail-figs.day-figs,.detail-figs.workout-figs{grid-template-columns:repeat(6,minmax(0,1fr))}
  .detail-figs.day-figs[data-n="5"],.detail-figs.workout-figs.is-five{grid-template-columns:repeat(5,minmax(0,1fr))}
  .detail-figs{column-gap:36px}
  .detail-figs .detail-fig .fig .fig-value{font-size:42px;letter-spacing:-1.5px}
}

/* ---- Two-column bodies ------------------------------------------------------------------ */
.detail-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:16px 40px;align-items:start}
@container view (min-width:760px){
  .night-cols{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .workout-cols{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .day-cols{grid-template-columns:minmax(0,2fr) minmax(250px,1fr)}
}
@container view (min-width:1180px){
  .night-cols,.workout-cols{gap:16px 56px}
  .day-cols{grid-template-columns:minmax(0,2.3fr) minmax(300px,1fr);gap:16px 56px}
}
.detail-sec{margin-bottom:32px}
.detail-sec.is-page{margin-bottom:40px}
.detail-sec .v-section-body{gap:10px;padding-top:10px}
.detail-sec .v-section-head{padding-top:8px}

/* ---- Rows, notes, links ----------------------------------------------------------------- */
.detail-row{gap:12px;min-height:56px}
.detail-row.is-static:hover{background:transparent}
.detail-row-icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--desk-rule);border-radius:2px;color:var(--desk-ink);background:var(--desk-paper)}
.detail-row-icon svg{width:16px;height:16px}
.detail-row-arrow{flex:none;font:500 15px/1 var(--desk-mono);color:var(--desk-blue)}
/* value-first rows in rails (nights, workouts): a smaller value than Explore's */
.v-vrow.detail-vrow{min-height:64px;padding:12px 0;gap:12px}
.v-vrow.detail-vrow .fig-value{font-size:24px;letter-spacing:-.7px}
.v-vrow.detail-vrow .fig-meta{flex-direction:column;align-items:flex-start;gap:1px}
.v-vrow.detail-vrow .v-usual{font-size:11.5px}
.detail-none{margin:0;padding:6px 0 2px;font:400 13px/1.5 var(--desk-font);color:var(--desk-muted)}
.detail-note{margin:0;font:400 13px/1.55 var(--desk-font);color:var(--desk-ink)}
.detail-sec .detail-note+.detail-note{padding-top:8px;border-top:1px solid var(--desk-rule)}
.detail-mark{align-self:flex-start;gap:6px}
.detail-mark svg{width:14px;height:14px}
.detail-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin:6px 0 0}
.detail-empty{max-width:560px;padding:8px 0 24px;border-top:1px solid var(--desk-ink)}
.detail-empty .v-sentence{margin:14px 0 10px}
.detail-tip p{margin:0}
.detail-tip p+p{margin-top:6px}

/* ---- Chart figures: the summary sentence, its ⓘ, then a quiet readout line ------------------ */
.detail-sec figure.v-fig figcaption{min-height:0}
.detail-readout{display:flex;align-items:flex-start;gap:6px;min-height:34px;padding:2px 0 4px;border-bottom:1px dotted transparent}
.detail-readout:not(.is-hint){border-bottom-color:var(--desk-rule)}
.detail-readout-text{flex:1;min-width:0;padding-top:6px;font:400 12px/1.5 var(--desk-mono);color:var(--desk-ink);font-variant-numeric:tabular-nums}
.detail-readout.is-hint .detail-readout-text{color:var(--desk-muted)}
.detail-readout-text a{position:relative;color:var(--desk-blue);font-weight:500}
@media (max-width:900px),(pointer:coarse){.detail-readout-text a::after{content:"";position:absolute;inset:-14px -10px}}
.detail-readout-clear{min-width:30px;min-height:30px}
.detail-readout-clear svg{width:14px;height:14px}

/* ---- Shared chart marks (SVG) -------------------------------------------------------------- */
.dt-ni{stroke:var(--v-grid);stroke-width:1}
.dt-usualtick{stroke:var(--v-ink);stroke-width:2;stroke-linecap:butt}
.dt-usualtick.is-future{stroke:var(--v-ref);stroke-width:1.5}
.dt-lowest{fill:none;stroke:var(--v-ink);stroke-width:1.5}
.dt-labelbox{fill:var(--v-paper);stroke:var(--v-grid);stroke-width:1}

/* ---- Day ---------------------------------------------------------------------------- */
.day-wk-links{margin:8px 0 2px}
.day-hr-fig,.day-steps-fig{gap:6px}
.day-rail{min-width:0}
.day-context{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 18px;padding-top:4px}
.day-context .fig{gap:5px}
.day-context .fig-meta{flex-direction:column;align-items:flex-start;gap:1px}
.day-context .fig-label{font-size:12px}
.day-context .fig-sub{font-size:11.5px}
@container view (max-width:359px){
  .day-context{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ==== ported from the prototype: views/workout.css ==== */
/* views/workout.css — Workout view (spec §5.3, round 2). Owner: builder D. Tokens only. */

.workout-when{color:var(--desk-muted)}

/* Heart-rate chart */
.workout-fig{gap:6px}
.workout-zone{fill:var(--v-band);opacity:.7}
.workout-zone-edge{stroke:var(--v-ref);stroke-width:1;stroke-dasharray:4 3;opacity:.8}
.workout-edge{stroke:var(--v-ink);stroke-width:1;shape-rendering:crispEdges}
.workout-line{fill:none;stroke:var(--v-series);stroke-width:1.5;stroke-linejoin:round}
.workout-ctx{fill:none;stroke:var(--v-ref);stroke-width:1.25;stroke-linejoin:round}
/* 5-minute buckets (no 5-second detail): the range in each bucket, light; the line is its average */
.workout-range{fill:var(--v-series);opacity:.2}
.workout-range.is-ctx{fill:var(--v-ref);opacity:.25}
.workout-line.is-coarse{stroke-width:2}

/* Time in zone: the time first, then the zone, then its bar (D46) */
.workout-tiz{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.workout-tiz-title{margin:0;font:600 12px/1.4 var(--desk-font);letter-spacing:.08em;text-transform:uppercase;color:var(--desk-muted)}
.workout-tiz-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.workout-tiz-row{display:grid;grid-template-columns:52px minmax(118px,150px) minmax(0,1fr);align-items:center;gap:12px;min-height:34px;border-bottom:1px solid var(--desk-rule)}
.workout-tiz-row:last-child{border-bottom:0}
.workout-tiz-val{font:800 17px/1 var(--desk-display);letter-spacing:-.3px;text-align:right;font-variant-numeric:tabular-nums;color:var(--desk-ink)}
.workout-tiz-row.is-zero .workout-tiz-val{color:var(--desk-muted);font-weight:600}
.workout-tiz-name{display:flex;align-items:baseline;gap:8px;font:500 13px/1.4 var(--desk-font);color:var(--desk-muted);white-space:nowrap}
.workout-tiz-range{font:400 11px/1.4 var(--desk-mono);color:var(--desk-muted)}
.workout-tiz-bar{height:8px;border-left:1px solid var(--desk-rule)}
.workout-tiz-bar span{display:block;height:100%;background:var(--v-series)}

/* Your runs */
.workout-record{margin:0;font:600 15px/1.5 var(--desk-font);color:var(--desk-ink)}
.workout-runs-fig{gap:6px}
.workout-thisring{fill:none;stroke:var(--v-ink);stroke-width:1.75}
.workout-leader{stroke:var(--v-ink);stroke-width:1;shape-rendering:geometricPrecision}
.workout-runs{cursor:crosshair}

.workout-side{min-width:0}
.workout-foot{margin-top:8px;padding-top:12px;border-top:1px solid var(--desk-ink)}