/* /status/schedules — scheduled WhatsApp status posts. FIFTEENTH stylesheet,
   loaded after status.css in both base.html and login.html (see base.html's
   load-order comment). It reuses status.css's swatches / text preview /
   recipients checklist classes as-is and only adds what is new here: the
   weekday chips, the kind panels, the live summary line and the list rows.

   Colours: tokens only. Every --ss-* colour is declared in :root and again
   under [data-theme="dark"]; rules below use var(--…) and never a literal
   colour (a raw hex in a rule breaks dark mode).

   Motion (emil-design-eng rules, adapted to hand-written CSS):
   - one custom ease-out curve, --ss-ease (cubic-bezier(0.23, 1, 0.32, 1));
     never ease-in, never a keyword `ease` on anything that moves;
   - transitions name their properties (transform / opacity / colours),
     never `all`;
   - pressable things (chips, buttons) scale(0.97) on :active in 160ms;
   - the kind panel switch is opacity + 4px translate in 180ms;
   - new list rows enter via @starting-style in 200ms, and a deleted row
     leaves FASTER (120ms) — htmx adds .htmx-swapping for the swap delay;
   - hover feedback only behind (hover: hover) and (pointer: fine), so a
     touch tap never leaves a stuck hover state;
   - the AI switch is a real checkbox: the track recolours and the thumb
     slides in 160ms (transform + background-color only), the whole control
     presses to scale(0.97), and the topic field reveals with the kind-panel
     recipe (opacity + 4px translate, 180ms). Hidden = display:none, so the
     topic field is out of the tab order and the accessibility tree without
     any animated height. Under prefers-reduced-motion the thumb jumps and the
     reveal keeps only the opacity fade;
   - the live summary line and the topic character counter have NO animation: it rewrites on every keystroke
     and a high-frequency update must not move;
   - prefers-reduced-motion keeps the opacity fades and drops every
     transform. */

:root {
  --ss-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ss-chip-bg: var(--bg-paper);
  --ss-chip-ink: var(--text-secondary);
  --ss-chip-border: var(--grey-300);
  --ss-chip-on-bg: var(--primary);
  --ss-chip-on-ink: #FFFFFF;
  --ss-summary-bg: var(--primary-lighter);
  --ss-summary-ink: var(--primary-darker);
  --ss-tab-rule: var(--grey-300);
  --ss-switch-off: var(--grey-400);
  --ss-switch-on: var(--primary);
  --ss-switch-thumb: #FFFFFF;
  --ss-source-bg: var(--primary-lighter);
  --ss-source-ink: var(--primary-darker);
}

[data-theme="dark"] {
  --ss-chip-bg: var(--bg-paper);
  --ss-chip-ink: var(--text-secondary);
  --ss-chip-border: rgba(145, 158, 171, 0.32);
  --ss-chip-on-bg: var(--primary);
  --ss-chip-on-ink: var(--grey-900);
  --ss-summary-bg: var(--primary-lighter);
  --ss-summary-ink: var(--primary-darker);
  --ss-tab-rule: rgba(145, 158, 171, 0.2);
  --ss-switch-off: var(--grey-600);
  --ss-switch-on: var(--primary);
  --ss-switch-thumb: var(--grey-900);
  --ss-source-bg: var(--primary-lighter);
  --ss-source-ink: var(--primary-darker);
}

.ss-intro { color: var(--text-secondary); font-size: 14px; margin: 0 0 16px; max-width: 72ch; }

/* ---------- kind tabs (radio + label, no JS) -------------------------------
   Same technique as status.css's .status-kind-*, with ss- ids so the two
   pages never share a selector. */
.ss-kind-input { position: absolute; opacity: 0; pointer-events: none; }

.ss-kind-list { display: flex; gap: 4px; margin: 4px 0 20px; border-bottom: 1px solid var(--ss-tab-rule); }

.ss-kind-label {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 150ms var(--ss-ease), border-color 150ms var(--ss-ease), transform 160ms var(--ss-ease);
}

.ss-kind-label:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .ss-kind-label:hover { color: var(--text-primary); }
}

#ss-kind-text:checked ~ .ss-kind-list label[for="ss-kind-text"],
#ss-kind-image:checked ~ .ss-kind-list label[for="ss-kind-image"],
#ss-kind-video:checked ~ .ss-kind-list label[for="ss-kind-video"] {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.ss-kind-panel { display: none; }

#ss-kind-text:checked ~ [data-ss-panel="text"],
#ss-kind-image:checked ~ [data-ss-panel="image"],
#ss-kind-video:checked ~ [data-ss-panel="video"] {
  display: block;
  animation: ss-panel-in 180ms var(--ss-ease);
}

/* The caption belongs to image and video only. */
.ss-caption { display: none; }

#ss-kind-image:checked ~ .ss-caption,
#ss-kind-video:checked ~ .ss-caption {
  display: block;
  animation: ss-panel-in 180ms var(--ss-ease);
}

@keyframes ss-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ss-panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- AI-written posts ---------------------------------------------------
   #ss-ai (a real, visually hidden checkbox) is the FIRST child of
   .ss-kind-tabs, so `#ss-ai:checked ~ …` reaches the topic field and the
   fallback labels with no JS, exactly like the kind radios above. */
.ss-ai-input { position: absolute; opacity: 0; pointer-events: none; }

.ss-ai-block { margin: 0 0 20px; }

.ss-switch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  transition: transform 160ms var(--ss-ease);
}

.ss-switch:active { transform: scale(0.97); }

.ss-switch-track {
  position: relative;
  flex: none;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--ss-switch-off);
  transition: background-color 160ms var(--ss-ease);
}

.ss-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ss-switch-thumb);
  transition: transform 160ms var(--ss-ease);
}

.ss-ai-input:checked ~ .ss-ai-block .ss-switch-track { background: var(--ss-switch-on); }
.ss-ai-input:checked ~ .ss-ai-block .ss-switch-thumb { transform: translateX(20px); }
.ss-ai-input:focus-visible ~ .ss-ai-block .ss-switch-track { outline: 2px solid var(--primary); outline-offset: 2px; }

.ss-ai-input:disabled ~ .ss-ai-block .ss-switch { opacity: 0.5; cursor: not-allowed; }
.ss-ai-input:disabled ~ .ss-ai-block .ss-switch:active { transform: none; }

@media (hover: hover) and (pointer: fine) {
  .ss-ai-input:not(:checked):not(:disabled) ~ .ss-ai-block .ss-switch:hover .ss-switch-track { background: var(--text-secondary); }
}

.ss-ai-help { display: block; margin: 4px 0 0; max-width: 72ch; }

/* Hidden = display:none: not focusable, not announced, no height to animate. */
.ss-ai-topic { display: none; margin-top: 12px; }

.ss-ai-input:checked ~ .ss-ai-block .ss-ai-topic {
  display: block;
  animation: ss-panel-in 180ms var(--ss-ease);
}

.ss-ai-count { display: block; text-align: right; margin-top: -8px; }

/* With AI on the static text / caption is only a fallback, and says so. */
.ss-lbl-ai { display: none; }

.ss-ai-input:checked ~ [data-ss-panel="text"] .ss-lbl-plain,
.ss-ai-input:checked ~ .ss-caption .ss-lbl-plain { display: none; }

.ss-ai-input:checked ~ [data-ss-panel="text"] .ss-lbl-ai,
.ss-ai-input:checked ~ .ss-caption .ss-lbl-ai { display: inline; }

/* Source chip on list rows ("AI" / "static"). */
.ss-source {
  display: inline-block;
  padding: 0 6px;
  border-radius: var(--radius-btn);
  background: var(--ss-source-bg);
  color: var(--ss-source-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
}

.ss-next-text { display: inline-block; max-width: 28ch; overflow-wrap: anywhere; }

.ss-unavailable { color: var(--text-secondary); font-size: 14px; margin: 0 0 16px; }

/* ---------- weekday chips ---------------------------------------------------
   A real checkbox sits inside each label (keyboard + form semantics intact);
   the box is visually hidden and the <span> is the chip. */
.ss-fieldset { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }

.ss-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

.ss-chip { position: relative; cursor: pointer; }

.ss-chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

.ss-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ss-chip-border);
  border-radius: var(--radius-btn);
  background: var(--ss-chip-bg);
  color: var(--ss-chip-ink);
  font-size: 14px;
  font-weight: 700;
  user-select: none;
  transition: transform 160ms var(--ss-ease), background-color 160ms var(--ss-ease),
              color 160ms var(--ss-ease), border-color 160ms var(--ss-ease);
}

.ss-chip input:checked + span {
  background: var(--ss-chip-on-bg);
  border-color: var(--ss-chip-on-bg);
  color: var(--ss-chip-on-ink);
}

.ss-chip input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

.ss-chip:active span { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .ss-chip:hover input:not(:checked) + span { border-color: var(--text-primary); color: var(--text-primary); }
}

/* ---------- time row + live summary ---------------------------------------- */
.ss-times { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 16px; }

.ss-summary {
  margin: 0 0 20px;
  padding: 10px 14px;
  border-radius: var(--radius-btn);
  background: var(--ss-summary-bg);
  color: var(--ss-summary-ink);
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere; /* never widen a phone layout */
}

/* ---------- recipients checklist ---------------------------------------------
   status.css's list is reused as-is; the one addition is wrapping a long or
   unbroken contact name (e2eseed carries one) instead of letting it push the
   row past a phone's width. */
.ss-form .status-recipients-row .checkfield { min-width: 0; }
.ss-form .status-recipients-row span { overflow-wrap: anywhere; min-width: 0; }

/* ---------- pressable buttons + list rows ---------------------------------- */
.ss-card .btn,
.ss-rows .btn {
  transition: background-color 120ms ease, box-shadow 120ms ease, transform 160ms var(--ss-ease);
}

.ss-card .btn:active,
.ss-rows .btn:active { transform: scale(0.97); }

.ss-row {
  opacity: 1;
  transition: opacity 200ms var(--ss-ease), transform 200ms var(--ss-ease);
}

@starting-style {
  .ss-row { opacity: 0; transform: translateY(4px); }
}

/* htmx puts .htmx-swapping on the target for the `swap:120ms` delay: the
   exit is faster than the 200ms entry and fades only (no travel). */
.ss-row.htmx-swapping {
  opacity: 0;
  transition: opacity 120ms var(--ss-ease);
}

@media (prefers-reduced-motion: reduce) {
  .ss-kind-label, .ss-kind-label:active,
  .ss-chip span, .ss-chip:active span,
  .ss-card .btn:active, .ss-rows .btn:active,
  .ss-switch:active { transform: none; }
  .ss-switch-thumb { transition: none; }
  .ss-ai-input:checked ~ .ss-ai-block .ss-ai-topic { animation: ss-fade-in 120ms linear; }
  #ss-kind-text:checked ~ [data-ss-panel="text"],
  #ss-kind-image:checked ~ [data-ss-panel="image"],
  #ss-kind-video:checked ~ [data-ss-panel="video"],
  #ss-kind-image:checked ~ .ss-caption,
  #ss-kind-video:checked ~ .ss-caption { animation: none; }
  .ss-row { transition: opacity 120ms linear; }
}

@media (prefers-reduced-motion: reduce) {
  @starting-style {
    .ss-row { opacity: 0; transform: none; }
  }
}