/* Autopilot tab: flutter_app/lib/screens/autopilot/ — the status dashboard
   (autopilot_status_screen.dart, S:n), the state shell and footer used by
   discovery, continue-setup and the other states (autopilot_tab_state_shell.dart,
   autopilot_tab_action_footer.dart), and the shared UI (autopilot_ui.dart).
   Every state is its own Scaffold: flat #FCF7F9 under a 56-tall AppBar. */

/* state colour pairs (autopilot_ui.dart:30-66): set on .k-ap-state-card, .k-pill */
.k-ap-active { --ap-fg: #247C3D; --ap-bg: #E2F4E7; }
.k-ap-monitoring { --ap-fg: var(--tertiary); --ap-bg: var(--tertiary-container); }
.k-ap-paused { --ap-fg: #8A5A12; --ap-bg: #F8EBD5; }
.k-ap-ready { --ap-fg: var(--primary); --ap-bg: var(--primary-container); }
.k-ap-off { --ap-fg: var(--on-surface-variant); --ap-bg: var(--surface-container-highest); }
.k-pill.k-ap-active, .k-pill.k-ap-monitoring, .k-pill.k-ap-paused, .k-pill.k-ap-ready, .k-pill.k-ap-off { background: var(--ap-bg); color: var(--ap-fg); }

/* the dashboard (S:145): sections inset 16, bottom clears the nav bar */
.k-ap-dashboard { flex: 1; min-height: 0; overflow: hidden; padding-bottom: calc(16px + var(--k-safe-bottom) + 76px); }
.k-ap-dashboard > .k-card { margin: 16px 16px 0; }
/* the state card (S:841): avatar 48, name, pill, body, one action */
.k-ap-state-head { display: flex; align-items: flex-start; gap: 14px; }
.k-ap-avatar { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ap-bg); color: var(--ap-fg); }
.k-ap-state-head b { display: block; margin-bottom: 8px; font: var(--title-large) var(--k-font); font-weight: 700; letter-spacing: var(--title-large-tracking); }
.k-ap-state-card > p { margin-top: 12px; color: var(--on-surface-variant); }
.k-ap-state-card > .k-filled-button { margin-top: 16px; }
.k-ap-state-card > .k-outlined-button { width: max-content; margin: 16px 0 0 auto; padding: 15px 24px 15px 20px; border-color: var(--outline-variant); }
/* a blocker (S:1113): error container at 70 % */
.k-ap-blocker { display: flex; gap: 12px; background: rgba(255, 218, 214, .7); }
.k-ap-blocker > k-icon { color: var(--on-error-container); }
.k-ap-blocker b { display: block; font-size: 14px; font-weight: 700; }
.k-ap-blocker p { margin-top: 3px; }
/* a section heading: icon 21 (20 in cards), 9 gap, titleMedium w700 */
.k-ap-heading { display: flex; align-items: center; gap: 9px; font: var(--title-medium) var(--k-font); font-weight: 700; letter-spacing: var(--title-medium-tracking); }
.k-ap-heading > k-icon { color: rgba(0, 0, 0, .87); }
/* the usage section (S:1189): on the page, not in a card */
.k-ap-usage { padding: 24px 16px 0; }
.k-ap-usage > .k-ap-heading { margin-bottom: 16px; }
/* label and count are equal halves either side of a 12 gap, so the count
   starts 6 past the middle, not at the right edge (S:1313) */
.k-ap-meter-head { display: flex; gap: 12px; font: var(--title-small) var(--k-font); font-weight: 700; letter-spacing: var(--title-small-tracking); }
.k-ap-meter-head > span { flex: 1; }
.k-ap-meter { height: 8px; margin-top: 8px; overflow: hidden; border-radius: 4px; background: var(--primary-container); }
.k-ap-meter > i { display: block; height: 100%; background: var(--primary); }
.k-ap-meter-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 7px; }
.k-ap-outcome { display: flex; align-items: center; gap: 6px; padding-top: 6px; font-weight: 600; }
.k-ap-outcome > k-icon { color: var(--on-surface-variant); }
.k-ap-usage > .k-divider.variant { margin: 24px 0; }
.k-ap-usage > .k-divider.variant.tight { margin: 12px 0 0; }
/* activity rows (S:1737): a ListTile with no padding */
.k-ap-activity .k-tile { align-items: flex-start; padding: 8px 0; }
.k-ap-activity .k-tile .k-tile-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.k-ap-subhead { display: flex; align-items: center; gap: 8px; margin-top: 12px; font: var(--title-small) var(--k-font); font-weight: 700; letter-spacing: var(--title-small-tracking); }
.k-ap-subhead > k-icon { color: rgba(0, 0, 0, .87); }

/* the state shell (Sh) and its sticky footer (F): discovery, continue setup,
   ready for plan and the generic state view */
.k-ap-shell { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 8px 24px 24px; }
.k-ap-shell > * { width: 100%; max-width: 520px; }
.k-ap-footer { flex: none; padding: 12px 24px calc(16px + var(--k-safe-bottom) + 76px); border-top: 1px solid var(--outline-variant); background: rgba(255, 255, 255, .96); }
.k-ap-footer > .k-filled-button { min-height: 52px; margin: 0; }
.k-ap-footer > p { margin-top: 8px; text-align: center; font: var(--body-small) var(--k-font); letter-spacing: var(--body-small-tracking); color: var(--on-surface-variant); }
.k-ap-headline { font: var(--headline-small) var(--k-font); font-weight: 800; line-height: 1.15; letter-spacing: var(--headline-small-tracking); }
/* discovery (D:71): the house tile with a bolt badge */
.k-ap-shell > .k-ap-art { position: relative; width: 92px; height: 64px; margin: 0 auto; }
.k-ap-art > div { display: grid; place-items: center; width: 76px; height: 60px; border-radius: 22px; background: rgba(255, 56, 92, .09); color: var(--primary); }
.k-ap-art > span { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 32px; height: 32px; border: 3px solid #FFFFFF; border-radius: 50%; background: var(--primary); color: #FFFFFF; }
.k-ap-shell > .k-ap-headline { margin-top: 14px; text-align: center; }
/* the saved-search card (autopilot_search_summary_card.dart): outlined, radius 16 */
.k-ap-search { display: flex; align-items: flex-start; gap: 12px; padding: 12px; }
.k-ap-search small { display: block; font: var(--label-large) var(--k-font); letter-spacing: var(--label-large-tracking); color: var(--on-surface-variant); }
.k-ap-search b { display: block; margin-top: 3px; font: var(--title-small) var(--k-font); font-weight: 700; line-height: 1.35; letter-spacing: var(--title-small-tracking); }
.k-ap-search.titled { align-items: center; padding: 14px; }
.k-ap-search.titled b { margin-top: 0; }
.k-ap-search.titled small { margin-top: 3px; font: var(--body-small) var(--k-font); line-height: 1.35; letter-spacing: var(--body-small-tracking); }
/* how it works: an outlined box of icon steps */
.k-ap-steps { padding: 4px 16px; }
.k-ap-steps > div { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-weight: 600; line-height: 1.35; }
.k-ap-steps > div + div { border-top: 1px solid var(--outline-variant); }
.k-ap-steps > div > i { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 56, 92, .09); color: var(--primary); }
.k-ap-steps > div > i.num { font: var(--label-large) var(--k-font); font-style: normal; font-weight: 800; letter-spacing: var(--label-large-tracking); background: var(--primary-container); color: var(--on-primary-container); width: 30px; height: 30px; }
/* trust points: check + short promise, centred */
.k-ap-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
.k-ap-trust > span { display: inline-flex; align-items: center; gap: 6px; font: var(--body-small) var(--k-font); font-weight: 600; letter-spacing: var(--body-small-tracking); color: var(--on-surface-variant); }
.k-ap-trust k-icon { color: #247C3D; }
/* continue setup and the generic state view: a 56 tile header */
.k-ap-view-head { display: flex; align-items: flex-start; gap: 14px; }
.k-ap-view-head p { margin-top: 6px; line-height: 1.35; color: var(--on-surface-variant); }
.k-ap-progress { padding: 16px; }
.k-ap-progress-bar { height: 8px; margin: 10px 0 8px; overflow: hidden; border-radius: 999px; background: rgba(255, 56, 92, .12); }
.k-ap-progress-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.k-ap-next { margin-top: 14px; font: var(--label-medium) var(--k-font); font-weight: 700; letter-spacing: var(--label-medium-tracking); color: var(--primary); }
.k-ap-next + div { display: flex; align-items: center; gap: 8px; margin-top: 4px; font: var(--body-large) var(--k-font); font-weight: 700; letter-spacing: var(--body-large-tracking); }