/* Zzz Sleep Calculator: page-scoped styles, layered on top of the shared
   site stylesheet. Custom properties are scoped under #zzz-app rather than
   added to the shared :root in style.css. */

/* This stylesheet is only ever linked from zzz/index.html, so a plain
   body selector here is already scoped to this one page; no need to
   touch the shared style.css or gate this behind a :has() selector.
   The dark color used to live only on the boxed .zzz-tool-column; it is
   now the page background itself (Task 2, round 3), so this hex is kept
   in sync with --zzz-bg below by hand (custom properties declared on
   #zzz-app do not inherit upward to body). */
body {
  background: #12141c;
  min-height: 100vh;
}

#zzz-app {
  --zzz-bg: #12141c;
  --zzz-bg-raised: #1b1e2b;
  --zzz-border: #2c3044;
  --zzz-text: #e7e9f2;
  --zzz-text-muted: #9298b3;
  --zzz-accent: #c99b5a;
  --zzz-accent-soft: rgba(201, 155, 90, 0.16);
  --zzz-warn: #e07856;

  color: var(--zzz-text);

  /* Widened from the shared .page-main 800px cap (#zzz-app as an ID beats
     that class regardless of source order) so the fact blurbs have room
     either side of the tool without touching style.css. Side columns
     widened from 200px to 260px minimum (and the overall max-width bumped
     to match) since narrow columns made the blurb text feel cramped. */
  max-width: 1320px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 640px) minmax(260px, 1fr);
  gap: 40px;
}

@media (max-width: 1024px) {
  #zzz-app {
    grid-template-columns: 1fr;
    max-width: 800px;
  }
}

.zzz-tool-column {
  grid-column: 2;
  grid-row: 1;
}

.zzz-format-toggle {
  background: transparent;
  border: 1px solid var(--zzz-border);
  color: var(--zzz-text-muted);
  border-radius: var(--radius);
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-body);
  font-size: 0.8rem;
  cursor: pointer;
}

.zzz-format-toggle[aria-pressed="true"] {
  border-color: var(--zzz-accent);
  color: var(--zzz-accent);
}

@media (max-width: 1024px) {
  .zzz-tool-column {
    grid-column: 1;
    grid-row: auto;
  }
}

.zzz-tool-column h1 {
  color: var(--zzz-text);
}

.zzz-tool-column > p {
  color: var(--zzz-text-muted);
  max-width: var(--content-measure);
}

.zzz-tool-column a {
  color: var(--zzz-accent);
}

.zzz-tool-column a:hover {
  color: var(--zzz-text);
}

/* Sleep-fact blurbs (Task 4): decorative context, not part of the tool's
   operation. Placed after the tool column in DOM order so they are never
   announced between the input and the results; CSS grid puts them either
   side visually on wide screens.

   grid-row: 1 is required, not decorative: without it, sparse grid
   auto-placement bumps these to row 2. It processes items in DOM order,
   and once the tool column claims column 2, the cursor cannot move back
   to column 1 within that same row for the item that follows, so
   #facts-left (and then #facts-right alongside it) silently landed a
   full row below the tool column instead of beside it. */

.zzz-facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-block: var(--space-xl);
}

.zzz-facts-heading {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--zzz-accent);
  margin: 0;
}

#facts-left {
  grid-column: 1;
  grid-row: 1;
}

#facts-right {
  grid-column: 3;
  grid-row: 1;
}

@media (max-width: 1024px) {
  #facts-left,
  #facts-right {
    grid-column: 1;
    grid-row: auto;
    padding-block: 0 var(--space-lg);
  }
}

.zzz-fact-blurb {
  /* Was var(--color-secondary), a dark gray tuned for the light page
     background this page no longer has (Task 2, round 3). A one-sided
     accent border read as an odd stray line rather than a boundary, so
     each blurb is now its own small panel instead, matching the raised
     card look already used for tier cards elsewhere in the tool. */
  background: var(--zzz-bg-raised);
  border: 1px solid var(--zzz-border);
  border-radius: var(--radius);
  color: var(--zzz-text-muted);
  font-size: 0.9rem;
  line-height: 1.75;
  margin: 0;
  padding: var(--space-md) var(--space-lg);
}

/* Mode toggle + time input */

.zzz-mode-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.zzz-mode-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.zzz-tradeoff {
  position: relative;
}

.zzz-tradeoff-btn {
  background: none;
  border: none;
  padding: var(--space-xs) 0;
  color: var(--zzz-text-muted);
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.zzz-tradeoff-btn:hover,
.zzz-tradeoff-btn[aria-expanded="true"] {
  color: var(--zzz-accent);
}

/* The disclosure content renders as a centered modal, not an inline or
   anchored-popover expansion: the button sits in the blank space next to
   the mode toggle, but the copy is too long to expand there without
   either pushing the 12-hour toggle and results container down (forbidden)
   or, as a small anchored popover, running out of vertical room before
   the results container starts (as little as ~90px on a short intro).
   A modal sidesteps both: nothing else on the page moves or is covered
   once it closes. */
.zzz-tradeoff-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  z-index: 50;
}

.zzz-tradeoff-backdrop[hidden] {
  display: none;
}

.zzz-tradeoff-panel {
  background: var(--zzz-bg-raised);
  border: 1px solid var(--zzz-border);
  border-radius: var(--radius);
  padding: var(--space-lg) var(--space-xl);
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  color: var(--zzz-text);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
}

.zzz-tradeoff-panel:focus {
  outline: none;
}

.zzz-mode-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--zzz-border);
  border-radius: 999px;
  cursor: pointer;
  color: var(--zzz-text-muted);
  font-size: 0.95rem;
}

.zzz-mode-option:has(input:checked) {
  border-color: var(--zzz-accent);
  color: var(--zzz-text);
  background: var(--zzz-accent-soft);
}

.zzz-input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.zzz-input-row label {
  color: var(--zzz-text-muted);
  font-weight: 500;
}

.zzz-time-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.zzz-time-input {
  background: var(--zzz-bg-raised);
  border: 1px solid var(--zzz-border);
  border-radius: var(--radius);
  color: var(--zzz-text);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: 1rem;
  width: 5.5rem;
}

.zzz-time-input::placeholder {
  color: var(--zzz-text-muted);
}

.zzz-meridiem-btn {
  background: transparent;
  border: 1px solid var(--zzz-border);
  color: var(--zzz-text-muted);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.zzz-meridiem-btn[aria-pressed="true"] {
  border-color: var(--zzz-accent);
  color: var(--zzz-accent);
}

#now-btn,
#calculate-btn,
#show-earlier-btn,
#show-later-btn,
#sleep-now-btn,
#stop-btn,
.duration-btn {
  background: transparent;
  border: 1px solid var(--zzz-accent);
  color: var(--zzz-accent);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}

#now-btn:hover,
#calculate-btn:hover,
#show-earlier-btn:hover,
#show-later-btn:hover,
#sleep-now-btn:hover,
#stop-btn:hover,
.duration-btn:hover {
  background: var(--zzz-accent);
  color: var(--zzz-bg);
}

#calculate-btn,
#sleep-now-btn {
  background: var(--zzz-accent);
  color: var(--zzz-bg);
}

#calculate-btn:hover,
#sleep-now-btn:hover {
  background: var(--zzz-text);
  border-color: var(--zzz-text);
}

/* "Now playing" feedback (Task 4): a slow pulse on the button itself while
   the sound machine is actually playing, on top of the label swapping to
   "Playing...". */
#sleep-now-btn.is-playing {
  animation: zzz-playing-pulse 1.8s ease-in-out infinite;
}

@keyframes zzz-playing-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  #sleep-now-btn.is-playing {
    animation: none;
  }
}

.zzz-results {
  min-height: 1px;
}

.zzz-error {
  background: var(--zzz-accent-soft);
  border: 1px solid var(--zzz-warn);
  color: var(--zzz-text);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* Tier cards */

/* #zzz-app prefix (not just .zzz-tier-list) is required to outrank the
   shared style.css rule .page-main ul { padding-left: 1.25em }, which
   otherwise wins on specificity and left-indents these cards relative to
   the full-width show-earlier/later buttons beside them. */
#zzz-app .zzz-tier-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-lg);
}

.tier-card {
  background: var(--zzz-bg-raised);
  border: 1px solid var(--zzz-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  opacity: 0;
  transform: translateY(8px);
  animation: zzz-tier-fade-in 400ms ease forwards;
}

@keyframes zzz-tier-fade-in {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tier-card {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.tier-card-primary {
  border-color: var(--zzz-accent);
  box-shadow: 0 0 0 1px var(--zzz-accent);
}

.tier-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

/* Task 6: .tier-hours now holds the clock time (headline) and .tier-time
   now holds the duration (secondary); only their styling swapped, not
   their position in the markup. */
.tier-hours {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--zzz-text);
}

.tier-badge {
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
}

.tier-badge-primary {
  background: var(--zzz-accent);
  color: var(--zzz-bg);
}

.tier-badge-warn {
  background: transparent;
  border: 1px solid var(--zzz-warn);
  color: var(--zzz-warn);
}

.tier-time {
  color: var(--zzz-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  margin: 0 0 var(--space-sm);
}

.tier-copy {
  color: var(--zzz-text);
  margin: 0;
}

.duration-note {
  color: var(--zzz-text-muted);
  font-size: 0.85rem;
  margin: var(--space-sm) 0 0;
}

.zzz-expand-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: var(--space-md) 0;
  width: 100%;
  justify-content: center;
}

/* An author rule setting display always wins over the UA stylesheet's
   [hidden] { display: none }, regardless of specificity, so setting
   showEarlierBtn.hidden / showLaterBtn.hidden in JS did nothing without
   this override: the buttons stayed visible via the flex rule above even
   with the hidden attribute set. */
.zzz-expand-btn[hidden] {
  display: none;
}

/* Chevrons make it visually clear there is more above/below, since the
   button text alone ("Show earlier" / "Show later") does not say which
   direction the revealed tiers sit in relative to the default pair. */
#show-earlier-btn::before {
  content: "\2191";
}

#show-later-btn::after {
  content: "\2193";
}

/* Coffee cups. One <symbol>, instanced with <use>; fullness is one liquid
   path toggled by custom properties on the .zzz-cup wrapper. Descendant
   selectors can't reach through <use>'s shadow tree, but CSS custom
   properties inherit through it, so the wrapper sets them and the
   .zzz-cup-liquid rule (matched directly on the cloned symbol content)
   just reads them via var(). */

.zzz-cups {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.zzz-cup-svg {
  width: 1.15rem;
  height: 1.15rem;
}

.zzz-cup-outline {
  stroke: var(--zzz-text-muted);
  stroke-width: 1.5;
}

.zzz-cup-liquid {
  fill: var(--zzz-cup-fill, transparent);
  clip-path: inset(var(--zzz-cup-clip-top, 0%) 0 0 0);
}

.zzz-cup[data-fill="full"] {
  --zzz-cup-fill: var(--zzz-accent);
  --zzz-cup-clip-top: 0%;
}

.zzz-cup[data-fill="half"] {
  --zzz-cup-fill: var(--zzz-accent);
  --zzz-cup-clip-top: 50%;
}

.zzz-cup[data-fill="empty"] {
  --zzz-cup-fill: transparent;
  --zzz-cup-clip-top: 100%;
}

/* Sound machine */

.zzz-sound-machine {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--zzz-border);
}

.zzz-sound-machine h2 {
  color: var(--zzz-text);
}

.zzz-sound-machine > p {
  color: var(--zzz-text-muted);
}

.zzz-sound-select {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.zzz-sound-select button {
  background: transparent;
  border: 1px solid var(--zzz-border);
  color: var(--zzz-text-muted);
  border-radius: var(--radius);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.zzz-sound-select button[aria-pressed="true"] {
  border-color: var(--zzz-accent);
  color: var(--zzz-accent);
  background: var(--zzz-accent-soft);
}

.zzz-sound-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.zzz-duration-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.duration-btn {
  padding: var(--space-xs) var(--space-md);
  font-size: 0.85rem;
}

.duration-btn[aria-pressed="true"] {
  background: var(--zzz-accent);
  color: var(--zzz-bg);
}

.zzz-volume-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.zzz-volume-row label {
  color: var(--zzz-text-muted);
}

.zzz-volume-row input[type="range"] {
  accent-color: var(--zzz-accent);
}

#timer-readout {
  color: var(--zzz-text-muted);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* Sitewide footer (Task 6). Same markup/classes as the rest of the site,
   but this element is a sibling of #zzz-app, not a descendant of it, so
   #zzz-app's custom properties don't inherit here — the colors below are
   the same values by hand, same tradeoff already made for body's
   background at the top of this file. */
.site-footer {
  border-top: 1px solid #2c3044;
  margin-top: var(--space-2xl);
}

.site-footer .footer-meta,
.site-footer .footer-privacy {
  color: #9298b3;
  font-size: 0.7rem;
}

.site-footer .footer-meta a {
  color: #c99b5a;
}

.site-footer .footer-meta a:hover {
  color: #e7e9f2;
}

.site-footer .footer-sep {
  color: #9298b3;
}