/* ═══════════════════════════════════════════════════════════════════
   routines.css  -  Daily Routines Module styles
   ═══════════════════════════════════════════════════════════════════
   Anti-busy-screen rule: child Run screen shows ONE step at a time at
   full width. Parent overview is one collapsed card per slot. Builder
   lists rows vertically with mini-controls. Designed to pass
   scripts/check-narrow-viewport.js at 320px width.
   ═══════════════════════════════════════════════════════════════════ */

/* ── PARENT — OVERVIEW ─────────────────────────────────────────── */
#rt-slot-list { padding: 0 16px 24px; }

.rt-slot-card {
  margin: 0 0 12px;
  padding: 12px 14px;
}

.rt-slot-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.rt-slot-emoji { font-size: 24px; line-height: 1; }
.rt-slot-name  { flex: 1; font-weight: 700; font-size: 16px; }

.rt-routine-row {
  display: block;
  padding: 10px 12px;
  margin: 6px 0 0;
  background: var(--bg-soft, #f5f5f7);
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rt-routine-row:active { transform: scale(0.99); }
.rt-routine-name { font-weight: 600; font-size: 15px; }
.rt-routine-meta { color: var(--text2, #666); font-size: 12px; margin-top: 2px; }

.rt-empty {
  padding: 10px 4px;
  color: var(--text2, #666);
  font-size: 13px;
}

/* ── PARENT — BUILDER ──────────────────────────────────────────── */
.rt-child-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rt-child-chip {
  border: 1px solid var(--line, #ddd);
  background: #fff;
  color: var(--text, #111);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.rt-child-chip.on {
  background: var(--accent, #0a84ff);
  color: #fff;
  border-color: transparent;
}

.rt-item-list { margin-top: 4px; }

.rt-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: 6px 0;
  background: var(--bg-soft, #f5f5f7);
  border-radius: 10px;
}
.rt-item-icon {
  flex: 0 0 32px;
  text-align: center;
  font-size: 22px;
  line-height: 1;
}
.rt-item-mid { flex: 1; min-width: 0; }
.rt-item-label {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rt-item-sub  { color: var(--text2, #666); font-size: 11px; margin-top: 1px; }

.rt-item-ctrl {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}
.rt-mini {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 0;
  background: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rt-mini:active { background: var(--bg-soft, #eaeaef); }
.rt-mini-del { color: var(--danger, #d33); }
.rt-mini-spacer { width: 30px; height: 30px; display: inline-block; }

/* ── CHILD — RUN SCREEN ────────────────────────────────────────── */
.rt-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px 0;
  flex-wrap: wrap;
  max-height: 32px;
  overflow: hidden;
}
.rt-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line, #ddd);
  flex: 0 0 auto;
}
.rt-dot.here { background: var(--accent, #0a84ff); transform: scale(1.2); }
.rt-dot.done { background: var(--success, #2bbd3d); }

.rt-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 24px 12px;
  text-align: center;
  min-height: 50vh;
}
.rt-stage-icon {
  font-size: 96px;
  line-height: 1;
  margin-bottom: 16px;
}
.rt-stage-label {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  word-break: break-word;
}
.rt-stage-time {
  color: var(--text2, #666);
  font-size: 14px;
}

.rt-run-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px 24px;
  /* Reserve nav clearance — sticky overlay rule from CLAUDE.md */
  padding-bottom: calc(24px + var(--ux-nav-clearance, 0px));
}
.rt-run-controls .btn-green {
  flex: 1;
  min-width: 0;
  padding: 14px 12px;
  font-size: 16px;
  font-weight: 700;
}

.rt-run-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  text-align: center;
  min-height: 50vh;
  gap: 12px;
}
.rt-run-complete .btn-green {
  margin-top: 12px;
  min-width: 160px;
}

/* ── Narrow-viewport guard (320px) ─────────────────────────────── */
@media (max-width: 360px) {
  .rt-stage-icon  { font-size: 80px; }
  .rt-stage-label { font-size: 19px; }
  .rt-item-ctrl .rt-mini { width: 28px; height: 28px; }
  .rt-mini-spacer { width: 28px; height: 28px; }
}

/* ── Under-7 simple mode overrides ─────────────────────────────── */
.child-mode-simple #screen-routine-run .rt-stage-icon  { font-size: 120px; }
.child-mode-simple #screen-routine-run .rt-stage-label { font-size: 26px; }
.child-mode-simple #screen-routine-run .rt-run-controls .btn-ghost { display: none; }