/* ============================================================
 *  /rotations — v0.62 chrome
 *
 *  Each rotation is a ``.dx-section-card`` with a proper
 *  ``.dx-section-head`` (teal icon square + name + id as
 *  description + status pills). Steps preview list uses
 *  ``.dx-inset-row`` styled as a step row; actions use the
 *  ``.dx-btn-ghost-sm`` vocabulary.
 *
 *  The form macro at the bottom of templates/rotations.html
 *  still uses the legacy ``.rot-step-*`` classes for the edit
 *  view; those rules live in schedules.css and aren't replaced
 *  here. This file is purely the *read view* uplift.
 * ============================================================ */

/* HEAD ROW: teal icon + title + id on the left, status pills
   pinned to the top-right corner of the rotation card. Position
   absolute on the pill stack so they always hug the card's top
   edge regardless of how tall the title block grows (long names,
   wrapped descriptions). The header gets right padding so the
   title block doesn't slide under the pills. */
.rotation-card {
  position: relative;
}

/* Currently-being-edited rotation gets an accent border + a soft
   accent halo so the user can see at a glance which card holds the
   in-flight edit form. The edit Save flow scrolls the browser to
   this card's id (see rotation_routes.update's redirect target),
   and on landing this halo makes the destination card unambiguous
   against the read-view cards above + below it. */
.rotation-card.is-editing {
  border-color: var(--t-accent, #15846a);
  box-shadow:
    0 0 0 3px var(--t-accent-tint, #dcefe8),
    var(--t-shadow-sm, 0 1px 2px rgba(20, 20, 15, 0.04));
}
:root[data-theme="dark"] .rotation-card.is-editing {
  border-color: var(--t-accent, #15846a);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--t-accent) 35%, transparent),
    var(--t-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.4));
}
.dx-rotation-head {
  align-items: flex-start;
  flex-wrap: wrap;
  padding-right: 220px;
}
.dx-rotation-head .dx-section-desc code {
  font-family: var(--t-font-mono);
  font-size: 11.5px;
  color: var(--t-fg-soft);
  background: var(--t-inset);
  border: 1px solid var(--t-inset-border);
  border-radius: 5px;
  padding: 1px 6px;
}
.dx-rotation-status {
  position: absolute;
  top: 18px;
  right: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  max-width: 60%;
}
@media (max-width: 640px) {
  /* On narrow viewports the absolute pin would overlap the
     title; flow it back into the header layout and let it wrap
     to its own line below the title block. */
  .dx-rotation-head { padding-right: 0; }
  .dx-rotation-status {
    position: static;
    width: 100%;
    margin-top: 6px;
    max-width: 100%;
    justify-content: flex-start;
  }
}

/* META STRIP: anchor, cycle minutes, step count. Uses the
   shared .dx-meta-strip vocabulary; the dx-rotation-meta
   override gives the icons a touch more breathing room. */
.dx-rotation-meta {
  margin: 2px 0 14px;
  gap: 14px;
  color: var(--t-fg-soft);
}
.dx-rotation-meta .ph {
  color: var(--t-accent);
  font-size: 14px;
}

/* COUNTDOWN BAR: keeps its existing rotation-countdown skin
   (defined in schedules.css) but we tighten the wrapping margin
   so it sits flush with the meta strip + steps below. */
.dx-rotation-countdown {
  margin: 0 0 14px;
}

/* STEPS LIST: each step is a .dx-inset-row with the step number
   in a tinted square on the left, page name + dwell + warning
   stacked in the middle, and an optional play button on the
   right when the rotation is currently active. */
.dx-rotation-steps {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dx-rotation-step {
  align-items: flex-start;
  gap: 12px;
}
.dx-rotation-step.is-current {
  background: var(--t-accent-tint);
  border-color: color-mix(in oklab, var(--t-accent) 35%, var(--t-inset-border));
}
.dx-rotation-stepnum {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  color: var(--t-fg-soft);
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.dx-rotation-step.is-current .dx-rotation-stepnum {
  background: var(--t-accent);
  border-color: var(--t-accent);
  color: var(--t-accent-fg, #fff);
}
.dx-rotation-stepbody {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dx-rotation-stepline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.dx-rotation-steppage {
  font-weight: 650;
  color: var(--t-fg);
  font-size: 13.5px;
}
.dx-rotation-stepdwell {
  font-size: 12px;
  color: var(--t-muted);
  font-family: var(--t-font-mono);
}
.dx-rotation-stepdevices {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 11.5px;
  color: var(--t-fg-soft);
}
.dx-rotation-stepdevices li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dx-rotation-stepdevices .ph {
  color: var(--t-fg-soft);
  font-size: 13px;
}
.dx-rotation-stepwarn {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--t-pill-warn-fg);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dx-rotation-stepwarn .ph { font-size: 13px; }

/* ACTIONS ROW: Disable / Fire now / Edit / Delete. The trash
   button is icon-only so it doesn't crowd the row at narrow
   widths. */
.dx-rotation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

/* DIVIDER between read view and the inline edit form. */
hr.dx-divider {
  border: 0;
  border-top: 1px solid var(--t-border);
  margin: 18px 0;
}

/* Dark-mode lift: the inset palette in dark mode lives in
   base.css; we just need to make sure the step number tile +
   active step contrast still pops. */
:root[data-theme="dark"] .dx-rotation-stepnum {
  background: var(--t-inset);
  border-color: var(--t-inset-border);
  color: var(--t-fg);
}
:root[data-theme="dark"] .dx-rotation-step.is-current {
  background: color-mix(in oklab, var(--t-accent) 22%, var(--t-inset));
  border-color: color-mix(in oklab, var(--t-accent) 55%, var(--t-inset-border));
}

/* ============================================================
 *  EDIT FORM — step sub-cards + section subheads
 *
 *  Each step in the New/Edit rotation form is a self-contained
 *  sub-card: controls row at the top, optional conditions panel
 *  swelling underneath. The Conditions toggle picks up a filled
 *  active state when its panel is open so the visual pinning
 *  reads at a glance. The "+ Add step" affordance becomes a
 *  full-width dashed button below the list.
 * ============================================================ */

/* Small uppercase section label between form groups ("STEPS —
   ROTATE THROUGH THESE IN ORDER", etc). */
.dx-form-subhead {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-fg-soft);
}

/* Step list: column of sub-cards with a comfortable gap. */
.rot-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

/* The sub-card. Inset background + 1px border + 12px radius so
   each step reads as a tile inside the broader rotation form.
   ``data-rot-step`` is also the JS hook for the toggle script;
   no need to add a second class. */
.rot-step-wrap {
  background: var(--t-inset);
  border: 1px solid var(--t-inset-border);
  border-radius: 12px;
  padding: 10px 12px;
}

/* Controls row at the top of the sub-card. The selects + dwell
   sit on one row; ``×`` (remove) and the Conditions toggle hug
   the right edge. The legacy schedules.css ``.rot-step`` grid
   rule still applies for column-flex distribution; we tighten
   the margins here so the row sits flush with the sub-card
   chrome instead of carrying the legacy bottom margin. */
.rot-step-wrap > .rot-step {
  margin: 0;
}

/* Conditions toggle: ghost button outline by default. When the
   panel below is open (aria-expanded="true") the toggle flips
   to a filled accent state so the eye reads it as pinned to its
   expanded panel. */
.rot-step-cond-toggle {
  /* Reset legacy ``.ghost`` look in case it leaks; .dx-btn-ghost-sm
     is the canonical class now and supplies the closed-state chrome. */
  border-radius: 8px;
}
.rot-step-cond-toggle[aria-expanded="true"] {
  background: var(--t-accent-tint);
  border-color: color-mix(in oklab, var(--t-accent) 40%, var(--t-inset-border));
  color: var(--t-accent);
}
.rot-step-cond-toggle[aria-expanded="true"] > .ph {
  color: var(--t-accent);
}

/* The conditions panel sits inside the same sub-card. Pull it
   out to the sub-card's edges with negative inline + bottom
   margins, then add a top divider so it reads as a related but
   distinct sub-region. Background inherits from the wrap so
   the surface stays cohesive; the divider does the visual work. */
.rot-step-wrap > .rot-step-cond-panel {
  margin: 10px -12px -10px;
  padding: 12px;
  border-top: 1px solid var(--t-inset-border);
  border-radius: 0 0 12px 12px;
}

/* + Add step: full-width dashed button as the spec's "drop
   another step here" affordance. Sits below the step list. */
.dx-rot-add-step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  margin-bottom: 18px;
  background: transparent;
  border: 1.5px dashed var(--t-input-border, #dedcd6);
  border-radius: 12px;
  color: var(--t-fg-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.dx-rot-add-step:hover {
  border-color: var(--t-accent);
  color: var(--t-accent);
  background: var(--t-accent-tint);
}
.dx-rot-add-step .ph {
  font-size: 14px;
}

/* Dark-mode adaptation: inset palette already flips via base
   tokens; we just re-tint the toggle's filled active state so
   the accent stays legible on the dark inset surface. */
:root[data-theme="dark"] .rot-step-cond-toggle[aria-expanded="true"] {
  background: color-mix(in oklab, var(--t-accent) 25%, var(--t-inset));
  border-color: color-mix(in oklab, var(--t-accent) 60%, var(--t-inset-border));
  color: var(--t-accent);
}

/* ============================================================
 *  EDIT FORM — input baseline + day-of-week chip centring
 *
 *  The rotation form's text/time/number inputs and selects
 *  inherit the .field shape from forms.css (6px radius, 8/12
 *  padding, lighter border). v0.62.2 brings them up to the
 *  v0.56 ``.dx-input`` baseline (8px radius, 11/13 padding,
 *  slightly heavier border) so they match the rest of the admin
 *  surface visually.
 *
 *  The .dow-chip text was sitting slightly off-centre because
 *  the (zero-sized) checkbox input still consumed a flex gap on
 *  its right. ``justify-content: center`` + ``gap: 0`` puts the
 *  label dead-centre in the pill.
 * ============================================================ */
.rotation-form .field input[type="text"],
.rotation-form .field input[type="number"],
.rotation-form .field input[type="time"],
.rotation-form .field input[type="date"],
.rotation-form .field input[type="url"],
.rotation-form .field input[type="email"],
.rotation-form .field select,
.rotation-form .rot-step select,
.rotation-form .rot-step input[type="number"],
.schedule-form .field input[type="text"],
.schedule-form .field input[type="number"],
.schedule-form .field input[type="time"],
.schedule-form .field input[type="date"],
.schedule-form .field input[type="url"],
.schedule-form .field input[type="email"],
.schedule-form .field select,
/* Condition picker rows render their selects + text inputs
   directly inside .cp-row-body (no ``.field`` ancestor), so they
   need their own selector to pick up the v0.56 input baseline.
   Same shape, same focus ring, so the condition rows read as
   siblings of the form's anchor fields. */
.condition-picker .cp-row-body input[type="text"],
.condition-picker .cp-row-body input[type="number"],
.condition-picker .cp-row-body input[type="time"],
.condition-picker .cp-row-body select,
.condition-picker .cp-row > select {
  padding: 11px 13px;
  border-radius: 8px;
  border: 1px solid var(--t-input-border, var(--t-border));
  font-size: 14px;
  background: var(--t-surface);
  color: var(--t-fg);
}
.rotation-form .field input:focus,
.rotation-form .field select:focus,
.rotation-form .rot-step select:focus,
.rotation-form .rot-step input:focus,
.schedule-form .field input:focus,
.schedule-form .field select:focus,
.condition-picker .cp-row-body input:focus,
.condition-picker .cp-row-body select:focus,
.condition-picker .cp-row > select:focus {
  outline: 2px solid var(--t-accent);
  outline-offset: -1px;
  border-color: var(--t-accent);
}

/* Day-of-week chip centring. The hidden checkbox is a flex child
   with width:0 but it STILL acts as an anonymous flex item that
   the parent's gap applies around — so the visible label gets
   pushed off-centre. The v0.62.2/.3 attempts to fix this with
   ``gap: 0; justify-content: center`` weren't enough because
   browsers still leave anonymous whitespace text nodes as flex
   items between the input and the span. The fix: take the input
   out of flow entirely (``position: absolute; opacity: 0``) so
   the only visible flex item is the label span, then flip the
   chip to a centred grid so positioning is unambiguous. Applied
   at .dow-chip level so the rule fires anywhere the chip is
   used — rotation form, schedule form, condition picker. */
.dow-chip {
  display: grid;
  grid-auto-flow: column;
  place-items: center;
  min-width: 56px;
  padding-inline: 14px;
  position: relative;
}
.dow-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.dow-chip > span {
  pointer-events: none;
}

/* ============================================================
 *  EDIT FORM — field-grid vertical alignment + switch row
 *
 *  The Smart sync row and the Render lead column have different
 *  intrinsic heights (the switch is a single-line label, the
 *  number input has a label-above-input stack). Without
 *  ``align-items: center`` they top-align and the toggle floats
 *  next to the input's label instead of the input itself.
 *
 *  The info_pop button after the switch label also wraps onto
 *  its own line because the label + popover wrap aren't in a
 *  flex container. We add a flex layout on .field--switch so
 *  the popover sits inline with the toggle.
 * ============================================================ */
.rotation-form .field-grid,
.schedule-form .field-grid {
  align-items: center;
}
.rotation-form .field--switch,
.schedule-form .field--switch {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ============================================================
 *  CONDITION PICKER — responsive layout polish
 *
 *  Each .cp-row contains the kind select on the left, the
 *  .cp-row-body in the middle (entity/op/value), and the remove
 *  button on the right. At narrow widths the body wraps, but
 *  the kind select was stretching to the full row width because
 *  it was the only flex child on its line — sized it to its
 *  content (max 180px) so the row reads consistently even when
 *  wrapped. The remove button hugs the right edge of the row.
 * ============================================================ */
.condition-picker .cp-row {
  align-items: flex-start;
}
.condition-picker .cp-row > select {
  flex: 0 0 auto;
  max-width: 180px;
}
.condition-picker .cp-row > button {
  flex: 0 0 auto;
  margin-left: auto;
}
.condition-picker .cp-row-body {
  flex: 1 1 320px;
}
.condition-picker .cp-row-body > input[type="text"],
.condition-picker .cp-row-body > input[type="number"],
.condition-picker .cp-row-body > select {
  flex: 1 1 8em;
  min-width: 6em;
}