/* home · 3 of 4: mobile stacking, resizable stack, schedule add-row, event modal, font overrides.
   Split from home.css 2026-07-29 (1665 lines). The four load in order from
   templates/index.html and cascade as one sheet: order between them is
   load-bearing (the contrast audit block at the end of day.css wins on it). */
/* ============================================================================
   MOBILE — under 960px, columns stack into a single scrollable page.
   under 640px, the topbar metadata + status strip collapse further.
   ============================================================================ */
@media (max-width: 960px) {
  /* bars stay pinned at every size (the scroll-region keeps owning the scroll);
     only the status row goes auto-height because its content reflows to 2 rows. */
  .shell { grid-template-rows: auto auto 1fr auto; }

  .body {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }
  .col {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .col:last-child { border-bottom: 0; }

  /* loosen the flex-panel minimum on small screens so each panel sizes to
     content instead of fighting for vertical room. */
  .panel.flex { flex: 0 0 auto; min-height: 0; }
  .panel-body { max-height: none; }

  .status {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    height: auto;
    padding: var(--s-3) var(--s-5);
    gap: var(--s-3);
  }
  .status .ambient { grid-column: 2; }
  .status .weather,
  .status .src { grid-column: 1 / -1; font-size: 11px; }
}

@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; gap: var(--s-3); min-height: 0; padding: var(--s-3) var(--s-4); }
  .crumb-block { display: none; }
  .brand-mark { width: 56px; height: 56px; }
  .brand-wordmark { font-size: 28px; }
  .brand-slogan { font-size: 12px; }
  .topbar-r { margin-left: auto; }

  .cc-row { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--s-2); }
  .cc-due  { display: none; }

  .launch-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   RESIZABLE STACK — vertical splitters between panels in a column.
   each .rs-cell is a flex item that grows/shrinks based on its inline ratio.
   the .splitter between cells is a thin draggable handle.
   ============================================================================ */
.resizable-stack {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.rs-cell {
  display: flex;
  flex-direction: column;
  min-height: 80px;
  overflow: hidden;
}
/* panels inside a resizable cell fill the cell and lose their own bottom rule
   (the splitter handles separation). higher specificity than .panel.flex /
   .panel.fixed so it overrides their flex behaviour. */
.rs-cell > .panel,
.rs-cell > .panel.flex,
.rs-cell > .panel.fixed {
  flex: 1 1 auto;
  min-height: 0;
  border-bottom: 0;
}

.splitter {
  flex: 0 0 7px;
  margin: 0;
  cursor: row-resize;
  background: transparent;
  position: relative;
  z-index: 1;
  /* a touch-friendly 7px hitbox with a 1px visible rule centered. */
}
.splitter::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 3px;
  height: 1px;
  background: var(--line);
  /* thickens on hover/drag by scaling, not by animating height+top — same 1→2→3px
     result (the line stays centred on 3.5px either way) off the compositor
     instead of relayout on every frame of a drag. */
  transform-origin: center;
  transition: background 120ms ease-out, transform 120ms ease-out;
}
.splitter:hover::before {
  background: var(--accent);
  transform: scaleY(2);
}
.splitter:active::before {
  background: var(--accent);
  transform: scaleY(3);
}

/* free-scroll content model (all widths). the page now scrolls as one under the
   pinned bars, so panels size to their content and stack naturally instead of
   sharing a fixed column height. the draggable splitters/ratios are retired —
   they only made sense when everything had to fit one screen. (ResizableStack is
   no longer rendered; these rules also neutralize it defensively if it returns.) */
.resizable-stack { display: block; flex: none; }
.rs-cell { flex: none !important; min-height: 0; height: auto; overflow: visible; }
.splitter { display: none; }
.rs-cell > .panel,
.rs-cell > .panel.flex,
.rs-cell > .panel.fixed { border-bottom: 1px solid var(--line); }
/* panels grow to content; no internal scroll (the scroll-region owns the scroll). */
.panel.flex { flex: 0 0 auto; min-height: 0; }
.panel-body { max-height: none; }

/* ---------------- schedule: add-btn + ghost row ---------------- */
.add-btn {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;   /* 24px = WCAG 2.5.8 AA min touch target (was 22) */
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: none; cursor: pointer;
  color: var(--fg-faint);
  font-family: var(--font-body); font-size: 17px; line-height: 1;
  padding-bottom: 1px;
  transition: border-color 120ms ease-out, color 120ms ease-out, background 120ms ease-out;
}
.add-btn:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: var(--accent-faint);
}

.event-row-ghost {
  display: grid;
  grid-template-columns: 56px 14px minmax(0, 1fr);
  align-items: start;
  gap: var(--s-2);
  padding: 6px 0 5px;
  border-top: 1px dashed var(--line-soft);
  cursor: pointer;
}
.event-row-ghost:hover .ghost-pip {
  border-color: var(--accent-dim);
  background: var(--accent-faint);
}
.event-row-ghost:hover .ghost-label { color: var(--accent); }

.ghost-time {
  font-family: var(--font-body); font-feature-settings: var(--feat-meta);
  font-size: 14px; color: var(--fg-ghost);
  padding-top: 1px;
}
.ghost-pip {
  width: 7px; height: 7px; border-radius: var(--r-pill);
  border: 1px solid var(--fg-ghost);
  background: transparent;
  margin-top: 5px; justify-self: center;
  transition: border-color 120ms ease-out, background 120ms ease-out;
}
.ghost-label {
  font-family: var(--font-body); font-feature-settings: var(--feat-meta);
  font-style: italic; font-size: 13px;
  color: var(--fg-dim); letter-spacing: 0.01em;
  padding-top: 1px;
  transition: color 120ms ease-out;
}

.event-row.cal-editable { cursor: pointer; }
.event-row.cal-editable:hover { background: var(--bg-hover); transition: background 120ms ease-out; }

/* ---------------- event modal ---------------- */
@keyframes ep-enter {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ep-scrim-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.event-scrim {
  position: fixed; inset: 0; z-index: 50;
  background: var(--launch-scrim);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 96px;
  backdrop-filter: blur(3px);
  animation: ep-scrim-in 180ms ease-out;
}
.event-panel {
  width: min(440px, 92vw);
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--modal-shadow);
  font-family: var(--font-body);
  animation: ep-enter 220ms ease-out;
}

.ep-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--s-4) var(--s-5) var(--s-3);
  border-bottom: 1px solid var(--line);
}
.ep-title {
  font-family: var(--font); font-feature-settings: var(--feat-display);
  font-weight: 500; font-size: 22px;
  color: var(--fg); letter-spacing: 0.01em; text-transform: lowercase; line-height: 1;
}
.ep-cal-name {
  font-family: var(--font-body); font-feature-settings: var(--feat-meta);
  font-style: italic; font-size: 12px; color: var(--accent);
}
.ep-body {
  padding: var(--s-4) var(--s-5);
  display: flex; flex-direction: column; gap: 13px;
}
.ep-field { display: flex; flex-direction: column; gap: 5px; }
.ep-label {
  font-family: var(--font-body); font-feature-settings: var(--feat-meta);
  font-weight: 500; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-mute);
}
.ep-input, .ep-textarea, .ep-select {
  font-family: var(--font-body); font-feature-settings: var(--feat-text);
  font-size: 15px; color: var(--fg);
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 7px 10px; width: 100%; outline: none;
  transition: border-color 120ms ease-out;
}
.ep-input:focus, .ep-textarea:focus, .ep-select:focus { border-color: var(--accent-dim); }
.ep-input::placeholder, .ep-textarea::placeholder { color: var(--fg-faint); font-style: italic; }
.ep-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ep-sublabel {
  font-family: var(--font-body); font-feature-settings: var(--feat-meta);
  font-size: 10px; font-style: italic; color: var(--fg-faint);
  letter-spacing: 0.04em; padding-left: 1px;
}
.ep-dt-sep { height: 1px; background: var(--line-soft); margin: 2px 0; }

/* native date/time pickers — match the active surface so the dropdown calendar/
   clock and the picker indicator render in-theme instead of OS-default white */
[data-surface="light"] .ep-dt { color-scheme: light; }
[data-surface="dark"] .ep-dt { color-scheme: dark; }
.ep-dt::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }
.ep-dt::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* inline save/delete failure message (was previously swallowed silently) */
.ep-error {
  margin: 0 var(--s-5) var(--s-3);
  padding: 7px 10px;
  font-family: var(--font-body); font-feature-settings: var(--feat-text);
  font-size: 13px; color: var(--danger, #c0492f);
  background: rgba(192, 73, 47, 0.10);
  border: 1px solid rgba(192, 73, 47, 0.35);
  border-radius: var(--r-card);
}
.ep-textarea { resize: none; height: 64px; font-size: 14px; }
.ep-select {
  appearance: none; cursor: pointer; font-size: 14px;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
  padding-right: 28px;
}
.ep-divider { height: 1px; background: var(--line); }

.ep-allday-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; background: var(--bg-elev);
  border: 1px solid var(--line); border-radius: var(--r-card); cursor: pointer;
}
.ep-allday-label {
  font-family: var(--font-body); font-feature-settings: var(--feat-text);
  font-size: 14px; color: var(--fg-dim);
}
.ep-toggle {
  width: 34px; height: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-elev);
  position: relative;
  flex-shrink: 0;
  transition: background 120ms ease-out, border-color 120ms ease-out;
}
.ep-toggle::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 13px; height: 13px;
  border-radius: var(--r-pill);
  background: var(--fg-faint);
  transition: transform 120ms ease-out, background 120ms ease-out;
}
.ep-toggle.on { background: var(--accent-faint); border-color: var(--accent-dim); }
.ep-toggle.on::after { transform: translateX(14px); background: var(--accent); }

.ep-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-5) var(--s-4);
  border-top: 1px solid var(--line);
}
.ep-btn-delete {
  font-family: var(--font-body); font-feature-settings: var(--feat-meta);
  font-style: italic; font-size: 13px; letter-spacing: 0.02em;
  color: var(--fg-faint); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 6px 13px;
  background: none; cursor: pointer;
  transition: color 120ms ease-out, border-color 120ms ease-out, background 120ms ease-out;
}
.ep-btn-delete:hover {
  color: var(--tomato); border-color: rgba(217,112,112,0.45);
  background: rgba(217,112,112,0.06);
}
.ep-btn-cancel {
  font-family: var(--font-body); font-feature-settings: var(--feat-meta);
  font-size: 13px; letter-spacing: 0.02em;
  color: var(--fg-dim); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 6px 13px;
  background: none; cursor: pointer;
  transition: background 120ms ease-out, color 120ms ease-out;
}
.ep-btn-cancel:hover { background: var(--bg-elev-2); color: var(--fg); }
/* pronounced primary action: solid accent fill, bolder, larger hit area.
   (accent is light in both surfaces, so dark text reads on either.) */
.ep-btn-save {
  font-family: var(--font-body); font-feature-settings: var(--feat-meta);
  font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--on-accent, #20223f); border: 1px solid var(--accent);
  border-radius: var(--r-card); padding: 8px 24px;
  background: var(--accent); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  transition: background 120ms ease-out, border-color 120ms ease-out,
              box-shadow 120ms ease-out, transform 120ms ease-out, opacity 180ms ease-out;
}
.ep-btn-save:hover {
  background: var(--accent-dim); border-color: var(--accent-dim);
  transform: translateY(-1px); box-shadow: 0 3px 11px rgba(0, 0, 0, 0.18);
}
.ep-btn-save:disabled, .ep-btn-cancel:disabled, .ep-btn-delete:disabled { opacity: 0.45; cursor: default; }
/* saved state: drop the fill, fade back, show the green check (overrides :disabled) */
.ep-btn-save.is-saved {
  background: transparent; border-color: var(--good-dim);
  color: var(--good); font-weight: 500;
  box-shadow: none; transform: none; opacity: 0.8; cursor: default;
}

/* ---------------- body font overrides ---------------- */
/* small text, metadata, labels, and UI chrome use --font-body (Fraunces),
   leaving --font (Cormorant Garamond) for titles only. */
.crumb-meta, .panel-meta, .surface-toggle, .launcher, .launcher .kbd, .day-date, .event-time, .event-sub, .task-flag, .cc-name .last4, .cc-due, .cc-status, .sub-cycle, .sub-flag, .sub-modal-amt, .sub-modal-reason, .sub-modal-dismiss, .sub-modal-close, .task-tab, .task-dd-trigger, .task-dd-group-head, .task-dd-row, .task-section-head, .task-empty, .task-detail, .task-edit-btn, .task-modal-label, .task-edit-save, .task-edit-cancel, .ghost-time, .ghost-label, .status, .status .clock, .launch-head .meta, .launch-tile .tile-desc, .launch-foot, .launch-foot .kbd, .ep-label, .ep-sublabel, .ep-cal-name, .ep-allday-label, .ep-btn-delete, .ep-btn-cancel, .ep-btn-save, .ep-input, .ep-textarea, .ep-select {
  font-family: var(--font-body);
}