/* ─── day view ─────────────────────────────────────────────────────── */

.day-view { display: flex; flex-direction: column; gap: 1.5rem; }
.day-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.day-header h1 {
  font-family: var(--font-display);
  font-size: 1.85rem; line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 600;
  flex: 1; text-align: center;
}
.day-nav-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  user-select: none;
}
.day-nav-arrow:hover, .day-nav-arrow:focus {
  color: var(--accent);
  border-color: var(--cyan);
  text-decoration: none;
}
.day-nav-arrow svg { width: 1rem; height: 1rem; }
/* Placeholder used in place of the forward arrow when already on today —
   keeps the title centered between the two slots. */
.day-nav-arrow-hidden { visibility: hidden; pointer-events: none; }

.day-view section h2 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

/* desktop: panes flatten; mobile section below handles the two-pane stack */
.day-panes { display: contents; }
.day-pane-strip { display: none; }
.day-pane-log { display: none; }

@media (min-width: 769px) {
  /* On desktop the routine pane reads as a HUD panel surface */
  .day-pane-routine {
    position: relative;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
  }
  .day-pane-routine::before, .day-pane-routine::after,
  .day-pane-routine > .tick-tr, .day-pane-routine > .tick-bl {
    content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none;
  }
  .day-pane-routine::before { top: -1px; left: -1px;  border-top: 1.5px solid var(--metal-3); border-left: 1.5px solid var(--metal-3); }
  .day-pane-routine::after  { bottom: -1px; right: -1px; border-bottom: 1.5px solid var(--metal-3); border-right: 1.5px solid var(--metal-3); }
  .day-pane-routine > .tick-tr { top: -1px; right: -1px; border-top: 1.5px solid var(--metal-3); border-right: 1.5px solid var(--metal-3); }
  .day-pane-routine > .tick-bl { bottom: -1px; left: -1px; border-bottom: 1.5px solid var(--metal-3); border-left: 1.5px solid var(--metal-3); }
}

@media (max-width: 768px) {
  .day-header h1 { font-size: 1.25rem; }

  /* Two-pane split (mobile-only) */
  body.page-day { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
  body.page-day .app-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  body.page-day .day-view { flex: 1; min-height: 0; gap: 0.6rem; }
  .day-panes {
    display: grid;
    /* Tracks are fr↔fr (not fr↔length): only same-type values interpolate
       continuously. The 3rem collapsed floor lives on .day-pane (min-height),
       so a 0fr track is clamped up to 3rem without putting a length in the
       template. Mixing 1fr↔3rem here makes the browser fall back to *discrete*
       interpolation (a single 50% flip — the "3-frame jump"). A missing
       data-active still degrades to the routine layout. */
    grid-template-rows: 1fr 0fr;
    gap: 0.6rem;
    flex: 1;
    min-height: 0;
    transition: grid-template-rows 0.3s ease;
  }
  .day-panes[data-active="routine"] { grid-template-rows: 1fr 0fr; }
  .day-panes[data-active="log"]     { grid-template-rows: 0fr 1fr; }

  .day-pane {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    /* Floors the collapsed (0fr) pane to the strip height, letting the grid
       tracks stay fr↔fr for smooth interpolation. */
    min-height: 3rem;
    position: relative;
  }
  /* Reuse panel corner ticks on each pane */
  .day-pane::before, .day-pane::after,
  .day-pane > .tick-tr, .day-pane > .tick-bl {
    content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none;
  }
  .day-pane::before { top: -1px; left: -1px;  border-top: 1.5px solid var(--metal-3); border-left: 1.5px solid var(--metal-3); }
  .day-pane::after  { bottom: -1px; right: -1px; border-bottom: 1.5px solid var(--metal-3); border-right: 1.5px solid var(--metal-3); }
  .day-pane > .tick-tr { top: -1px; right: -1px; border-top: 1.5px solid var(--metal-3); border-right: 1.5px solid var(--metal-3); }
  .day-pane > .tick-bl { bottom: -1px; left: -1px; border-bottom: 1.5px solid var(--metal-3); border-left: 1.5px solid var(--metal-3); }

  .day-pane-strip {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.45rem 0.9rem;
    /* Fill the collapsed pane so align-items:center vertically centres the
       label in the strip track (it's the pane's only visible child when
       collapsed; the body is display:none). */
    flex: 1 1 auto;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  /* .day-panes prefix raises specificity above `.day-view section h2`
     (0,1,2), whose margin-bottom otherwise wins and shoves the centred label
     upward by leaving a phantom bottom margin inside the flex item. */
  .day-panes .day-pane-strip h2 {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
  }
  .day-pane-link { font-size: 0.7rem; color: var(--muted); }
  .day-pane-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.85rem;
  }
  /* "Not explicitly log" === routine-active, so a missing data-active degrades
     to the routine layout rather than rendering both panes' bodies at once. */
  .day-panes:not([data-active="log"]) .day-pane-log .day-pane-body,
  .day-panes[data-active="log"] .day-pane-routine .day-pane-body { display: none; }
  .day-panes:not([data-active="log"]) .day-pane-routine .day-pane-strip,
  .day-panes[data-active="log"] .day-pane-log .day-pane-strip { display: none; }
  .day-pane-log { display: flex; }
}