/* ══════════════════════════════════════════════════════════════════════════
   SCHEDULES — the page where a sentence gets a clock.

   Structural twin of .net-page / .hist-page: same 780px column, same 22px top
   padding so the heading lands on the sidebar logo's line, same revealUp
   entrance. Everything inside reuses the app's existing components —
   .card + label + .hint for the form, .net-chip for the pickers, .acc-device's
   row geometry for the list, #wakeToggle's dot-pill for the on/off control.
   Only the pieces with no existing twin are defined here.

   Loaded AFTER index.html's <style> block, so equal-specificity rules here
   win — which is the point: nothing in this file overrides the design system,
   it only extends it.

   Scrollbars: none of this file's business. /scrollbars.css owns the law and
   the only overflow declared below is the PAGE's own scroller, mirroring what
   .net-page already does at line 335 of index.html. No inner scrollers.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────────────────── */
.sched-page {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  padding: 22px 28px 80px;
  animation: revealUp 0.55s var(--exp) both;
}
.sched-page[hidden] { display: none; }
.sched-page > .lede { margin-bottom: 18px; }

/* The page is the scroller (at ≥981px .main is a fixed-height flex column, so
   a view that doesn't claim the overflow simply gets clipped). Same rule the
   Devices page carries. */
#screen-home.active .sched-page:not([hidden]) {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

@media (max-width: 980px) {
  .sched-page {
    max-width: none;
    padding: 18px var(--m-pad) calc(var(--nav-h) + 28px + env(safe-area-inset-bottom, 0px));
  }
}

/* The topbar drops its page-scoping chrome here, as it does on Account and
   History — the room switcher scopes the fleet, not a list of tasks. */
#screen-home:has(.sched-page:not([hidden])) .room-slot { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sched-page { animation: none; }
}

/* ── Compose card ───────────────────────────────────────────────────────── */
.sched-new label { margin-top: 22px; }
.sched-new > label:first-child { margin-top: 0; }
.sched-opt {
  font-family: var(--mono);
  letter-spacing: 2px;
  color: var(--muted);
}

/* One `when` body is visible at a time; the chips above choose which. */
.sched-when[hidden] { display: none; }
.sched-when { margin-top: 14px; }

.sched-fields {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.sched-fields[hidden] { display: none; }
/* Capped, not stretched: a clock value dragged across a 670px card reads as a
   text field waiting for a paragraph. */
.sched-fields > * { flex: 1 1 150px; min-width: 0; max-width: 220px; }
.sched-fields .sched-num { flex: 0 0 108px; }
/* Native date/time controls: the app's input rules already give them the well,
   the hairline and the focus ring, and :root's `color-scheme` already tints
   the picker glyph per theme. These only stop iOS Safari from centring the
   value and keep it on the app's mono face. */
.sched-fields input[type="time"],
.sched-fields input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  min-height: 52px;
}
.sched-fields input::-webkit-calendar-picker-indicator { cursor: pointer; }

/* Weekday row — .net-chip in a 7-up grid so Sun…Sat never reflows mid-week. */
.sched-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.sched-days .net-chip {
  padding: 9px 0;
  text-align: center;
  letter-spacing: 0.8px;
}

.sched-chips { margin-top: 2px; }
/* A second chip rail (Once → delay / clock time) sits above its own fields. */
.sched-when .sched-chips + .sched-fields,
.sched-when .sched-chips + .sched-fields + .sched-fields { margin-top: 10px; }

/* The server's own words when it refuses a task ("that time is in the past"). */
.sched-err {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--err) 45%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--err) 10%, transparent);
  color: var(--ink-hi);
  font-size: 13px;
  line-height: 1.5;
}
.sched-err[hidden] { display: none; }

.sched-new .primary { margin-top: 20px; }

/* ── The list ───────────────────────────────────────────────────────────── */
.sched-list { display: flex; flex-direction: column; gap: 10px; }

/* Row geometry lifted from .acc-device — same glass, same hairline, same
   hover nudge — with a third column for the on/off pill and the bin. */
.sched-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 17px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--glass);
  transition: border-color 0.25s, background 0.25s, opacity 0.25s;
}
.sched-row:hover { border-color: var(--border-hi); background: var(--glass-2); }
/* A disabled task stays readable — it is paused, not gone. */
.sched-row.off { opacity: 0.55; }

.sched-row .sc-dot {
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--muted);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.sched-row:not(.off) .sc-dot {
  background: var(--on);
  box-shadow: 0 0 10px var(--on-soft);
}

.sched-row .sc-body { flex: 1; min-width: 0; }

/* The command IS the task — the sentence the user would have said out loud. */
.sched-row .sc-say {
  font-family: var(--disp);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink-hi);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
/* The server's `describe` string, verbatim. Never composed here. */
.sched-row .sc-when {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--accent);
}
.sched-row .sc-meta {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--dim);
  text-transform: uppercase;
}
.sched-row .sc-result {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line-2);
  font-size: 12px;
  line-height: 1.5;
  color: var(--dim);
  overflow-wrap: anywhere;
}
.sched-row .sc-result b {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  display: block;
  margin-bottom: 3px;
}

.sched-row .sc-acts {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* On/off — the #wakeToggle dot-pill, which is already how this app says
   "this thing is armed". */
.sched-onoff {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.sched-onoff:hover { color: var(--ink); border-color: var(--line-hi); }
.sched-onoff .sc-d {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dim);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.sched-onoff.on {
  color: var(--ink-hi);
  border-color: rgba(var(--on-rgb), 0.35);
  background: var(--on-soft);
}
.sched-onoff.on .sc-d { background: var(--on); box-shadow: 0 0 9px var(--on); }

.sched-del {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.sched-del:hover {
  color: var(--err);
  border-color: color-mix(in srgb, var(--err) 45%, transparent);
  background: color-mix(in srgb, var(--err) 10%, transparent);
}
.sched-del svg { width: 15px; height: 15px; }

/* Phone: the actions drop under the text rather than squeezing the sentence
   into a two-word column. */
@media (max-width: 560px) {
  .sched-row { flex-wrap: wrap; }
  .sched-row .sc-acts { width: 100%; justify-content: flex-end; }
  .sched-days { grid-template-columns: repeat(4, 1fr); }
}

/* The empty state teaches the feature, so give it room without the full
   viewport fill .state reaches for on a page that also carries a form. */
.sched-list .state { min-height: 0; padding: 42px 20px; }
.sched-list .state-sub em {
  font-style: normal;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.92em;
}

/* ── Bottom nav: five pills around a centred orb ────────────────────────
   The bar is now two equal groups with the spacer between them, so the orb
   (absolutely centred on the capsule) always lands in the gap rather than on
   a pill — which is what happened when the five pills sat in one flat row.
   Each group divides its own half, so a 2/3 split is fine. */
.lipi-nav-side {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
/* Labels would rather run a touch close on a 320px phone than wrap to two
   lines and shove the icons out of alignment. */
.lipi-nav-pill span { white-space: nowrap; }