/* css/components/autopilot-rules.css — TinkyTown Autopilot drill-down sub-tabs + rules grid
 * P4.T3 — Phase 4. Brand: Fraunces + General Sans + var(--surface-deep)
 * var(--amber) var(--green) var(--green-soft). All colours via var().
 * Active sub-tab = amber, mobile strip scrolls horizontally.
 */

.tt-ap-rules-wrap {
  margin-top: 1.25rem;
  font-family: var(--f-sans, 'General Sans', system-ui, sans-serif);
}

.tt-ap-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  margin: 0 0 0.9rem;
  background: var(--surface-deep, #0d0b10);
  border: 1px solid color-mix(in srgb, var(--amber, #e8a33d) 22%, transparent);
  border-radius: 14px;
}

.tt-ap-tab {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.85rem; min-height: 44px;
  background: transparent;
  color: var(--text-muted, rgba(255, 255, 255, 0.7));
  border: 1px solid transparent; border-radius: 10px;
  font: inherit; font-size: 0.88rem; font-weight: 500; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.tt-ap-tab:hover {
  background: color-mix(in srgb, var(--green-soft, #4ade80) 10%, transparent);
  color: var(--text-primary, #fff);
  border-color: color-mix(in srgb, var(--green, #22c55e) 30%, transparent);
}
.tt-ap-tab:focus-visible { outline: 2px solid var(--amber, #e8a33d); outline-offset: 2px; }
.tt-ap-tab.is-active {
  background: color-mix(in srgb, var(--amber, #e8a33d) 14%, transparent);
  border-color: var(--amber, #e8a33d);
  color: var(--text-primary, #fff); font-weight: 600;
}
.tt-ap-tab-icon { font-size: 1rem; line-height: 1; }
.tt-ap-tab-label { white-space: nowrap; }

.tt-ap-rules-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0.2rem 0.6rem;
}
.tt-ap-rules-title { font-family: var(--f-serif, 'Fraunces', serif); font-size: 1.05rem; color: var(--text-primary, #fff); }
.tt-ap-rules-count {
  display: inline-block; margin-left: 0.4rem; padding: 0 0.5rem;
  background: color-mix(in srgb, var(--amber, #e8a33d) 18%, transparent);
  color: var(--amber, #e8a33d); border-radius: 999px;
  font-family: var(--f-sans, 'General Sans', system-ui, sans-serif);
  font-size: 0.78rem; font-variant-numeric: tabular-nums;
}

.tt-ap-rules { display: grid; gap: 0.5rem; }
.tt-ap-rule {
  display: grid; grid-template-columns: 1fr auto auto; gap: 0.75rem; align-items: center;
  padding: 0.7rem 0.9rem;
  background: color-mix(in srgb, var(--surface-deep, #0d0b10) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber, #e8a33d) 14%, transparent);
  border-radius: 12px;
}
.tt-ap-rule.is-on { border-color: color-mix(in srgb, var(--green, #22c55e) 38%, transparent); }
.tt-ap-rule-name { color: var(--text-primary, #fff); font-weight: 600; font-size: 0.95rem; }
.tt-ap-rule-meta { color: var(--text-muted, rgba(255,255,255,0.65)); font-size: 0.78rem; margin-top: 0.15rem; }
.tt-ap-rule-toggle { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; }
.tt-ap-rule-toggle input { appearance: none; width: 36px; height: 20px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface-deep, #0d0b10) 50%, #333 50%); position: relative; outline: none; cursor: pointer; transition: background 120ms ease; }
.tt-ap-rule-toggle input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 120ms ease; }
.tt-ap-rule-toggle input:checked { background: var(--amber, #e8a33d); }
.tt-ap-rule-toggle input:checked::after { transform: translateX(16px); }
.tt-ap-rule-state { font-size: 0.72rem; color: var(--text-muted, rgba(255,255,255,0.7)); font-weight: 600; min-width: 1.8rem; }

.tt-ap-rule-run, .tt-ap-add {
  background: transparent; color: var(--amber, #e8a33d);
  border: 1px solid var(--amber, #e8a33d); border-radius: 8px;
  padding: 0.45rem 0.8rem; min-height: 36px; font: inherit; font-weight: 600; font-size: 0.85rem; cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.tt-ap-rule-run:hover, .tt-ap-add:hover { background: var(--amber, #e8a33d); color: var(--surface-deep, #0d0b10); }
.tt-ap-add-sm { padding: 0.35rem 0.7rem; min-height: 32px; font-size: 0.8rem; }

.tt-ap-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 2rem 1rem; text-align: center;
  background: color-mix(in srgb, var(--surface-deep, #0d0b10) 60%, transparent);
  border: 1px dashed color-mix(in srgb, var(--amber, #e8a33d) 28%, transparent);
  border-radius: 14px;
}
.tt-ap-empty-icon { font-size: 2rem; }
.tt-ap-empty-title { font-family: var(--f-serif, 'Fraunces', serif); color: var(--text-primary, #fff); font-size: 1.05rem; }
.tt-ap-empty-sub { color: var(--text-muted, rgba(255,255,255,0.7)); font-size: 0.85rem; max-width: 28rem; }

@media (max-width: 640px) {
  .tt-ap-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tt-ap-tab { flex: 0 0 auto; }
  .tt-ap-rule { grid-template-columns: 1fr; }
  .tt-ap-rule-toggle, .tt-ap-rule-run { justify-self: start; }
}