/* Site-owned. FR-093 (2026-10-05): Energy Windows' overnight cap, the placed scale, the
 * starting-template offer and the "How this works" dialog. Loaded only by /profile/ and
 * /dashboard/, the two routes that render lib/day-shape.js's markup, AFTER
 * design-system.css and shell.css. Kept out of design-system.css so this change does not
 * re-pin that file on every route that loads it. Rules: docs/design/energy-windows.md. */

/* ---------- The scale, placed at real clock positions ----------
   design-system.css lays .ct-windows-scale out as five equal grid columns, which put each
   label at the START of a fifth of the track (6 AM at 20%, where 6 AM is really 25%). Every
   label now carries its own inline left:%, so the container only has to be a positioned box
   of one line's height. `display` is deliberately left alone: shell.css hides the scale at
   phone width, and the cap's caption below carries the hours there instead. */
.ct-windows-scale {
  position: relative;
  min-height: calc(var(--ct-text-xs) * 1.5);
}
.ct-windows-tick {
  position: absolute;
  top: 0;
  white-space: nowrap;
}
.ct-windows-tick--start { transform: none; }
.ct-windows-tick--center { transform: translateX(-50%); }
.ct-windows-tick--end { transform: translateX(-100%); }

/* ---------- The Sleep (assumed) cap ----------
   Not a .ct-window (it is not a window): a quiet, hatched block at the right-hand end of a
   collapsed track, so it reads as "folded away" rather than as one more window. */
.ct-windows-cap {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-left: var(--ct-border-width) dashed var(--ct-border-strong);
  background:
    repeating-linear-gradient(135deg, transparent 0 6px, var(--ct-border-divider) 6px 7px),
    var(--ct-bg-surface-sunken);
}
.ct-windows-cap .material-symbols-rounded { font-size: 18px; color: var(--ct-text-muted); }
.ct-windows-cap-note {
  display: flex;
  align-items: center;
  gap: var(--ct-space-1);
  margin: var(--ct-space-2) 0 0;
  font-size: var(--ct-text-xs);
  color: var(--ct-text-muted);
}
.ct-windows-cap-note .material-symbols-rounded { font-size: 14px; }

/* ---------- "How this works" trigger ----------
   Sized like My Map's "Why is this here?" (personal-interface.css .pi-why-btn): small text
   with a leading help symbol, still a real <button> with the global focus ring. */
.ct-ew-howto-btn.ct-btn--text {
  min-height: 0;
  padding: 0;
  gap: var(--ct-space-1);
  font-size: var(--ct-text-sm);
  white-space: nowrap;
}
.ct-ew-howto-btn.ct-btn--text .material-symbols-rounded { font-size: 1.1em; }
.ct-ew-head-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ct-space-4);
}

/* At phone width the two head actions would squeeze the section title into a narrow
   column (shell.css gives the head's last column `auto`), so they drop under the title. */
@media (max-width: 600px) {
  /* :last-child matches shell.css's own `> :last-child:not(...)` justify-self rule on
     specificity, so source order (this file loads later) decides. */
  .ct-section-head > .ct-ew-head-actions:last-child {
    grid-column: 2 / -1;
    justify-self: start;
    justify-content: flex-start;
  }
}

/* ---------- The starting-template offer ---------- */
.ct-ew-offer {
  display: grid;
  gap: var(--ct-space-3);
  margin-top: var(--ct-space-4);
}
.ct-ew-offer > * { margin: 0; }
.ct-ew-offer .ct-dialog-actions { margin-top: var(--ct-space-2); }
.ct-ew-start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ct-space-3);
  font-size: var(--ct-text-sm);
  font-weight: var(--ct-weight-semibold);
  color: var(--ct-text-primary);
}
.ct-ew-start .ct-select { width: auto; min-width: 8.5em; }
.ct-ew-preview { min-width: 0; }
.ct-ew-template-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: var(--ct-space-1) var(--ct-space-4);
  margin: var(--ct-space-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--ct-text-sm);
  color: var(--ct-text-secondary);
}
.ct-ew-template-list b { color: var(--ct-text-primary); font-weight: var(--ct-weight-semibold); }

/* ---------- The trainer dialog: four short cards ---------- */
.ct-ew-cards {
  display: grid;
  gap: var(--ct-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ct-ew-card {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--ct-space-3);
  align-items: start;
  padding: var(--ct-space-4);
  border: var(--ct-border-width) solid var(--ct-border-subtle);
  border-radius: var(--ct-radius-sm);
  background: var(--ct-bg-subtle);
}
.ct-ew-card > .material-symbols-rounded { font-size: 22px; color: var(--ct-text-link); }
.ct-ew-card .ct-card-title { margin: 0; font-size: var(--ct-text-base); }
.ct-ew-card .ct-support { margin: var(--ct-space-1) 0 0; }