/* Parcel — Autopilot view (#/autopilot, #/autopilot/log) and its sheets.
   Page styles are scoped under .view-autopilot; sheets live in the overlay root, so they're scoped
   under .ap-sheet instead. Tokens only, so light and dark both work. */

/* ============================================================== page layout */
.view-autopilot .ap { display: flex; flex-direction: column; gap: var(--sp-4); }
.view-autopilot .ap-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.view-autopilot .ap-col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.view-autopilot .ap-col:empty { display: none; }
.view-autopilot .ap.is-wide { gap: var(--sp-5); }
/* The side column (cap + activity) never drops below a phone's width: 330pt on an iPad in portrait. */
.view-autopilot .ap.is-wide .ap-cols {
  grid-template-columns: minmax(0, 1.3fr) minmax(330px, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.view-autopilot .ap.is-wide .ap-col { gap: var(--sp-5); }

/* Nicer rag on short paragraphs (no one-word last lines). */
.view-autopilot p, .ap-sheet p,
.view-autopilot .ap-entry-link, .view-autopilot .ap-act-msg { text-wrap: pretty; }
.view-autopilot .ap-glue, .ap-sheet .ap-glue { white-space: nowrap; }

/* Shared: a small count badge beside a card title */
.view-autopilot .ap-count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 2px;
  border-radius: 10px;
  background: var(--orange); color: #000;
  font-size: 13px; line-height: 1; font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.view-autopilot .ap-count[hidden] { display: none; }

/* ============================================================== hero (one kill switch, DECISIONS §44)
   On: glyph · title/sub, then the facts, then the brake row. Stopped: the explanation and Resume. Waiting for the
   one-time setup (§31): the go-live essentials, honest timing and the way on. Keyed to the card's own width. */
.view-autopilot .ap-master {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "glyph text"
    "body body"
    "stop stop";
  column-gap: 14px;
  align-items: center;
}
/* The "on" wash: a soft indigo light from the glyph's corner. Fades rather than snaps. */
.view-autopilot .ap-master::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 150% at 0% 0%, color-mix(in srgb, var(--indigo) 17%, transparent) 0%, transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--indigo) 4%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
  pointer-events: none;
}
.view-autopilot .ap-master.is-on::before { opacity: 1; }

.view-autopilot .ap-glyph { grid-area: glyph; position: relative; width: 56px; height: 56px; flex: none; align-self: start; }
.view-autopilot .ap-glyph-disc {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--fill-3);
  color: var(--label-2);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.view-autopilot .ap-master.is-on .ap-glyph-disc {
  background: linear-gradient(160deg, color-mix(in srgb, var(--indigo) 82%, #fff), var(--indigo));
  color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--indigo) 30%, transparent);
}
.view-autopilot .ap-master.is-waiting .ap-glyph-disc {
  background: color-mix(in srgb, var(--indigo) 14%, transparent);
  color: var(--indigo-text);
}
.view-autopilot .ap-glyph-pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--indigo);
  opacity: 0;
}
.view-autopilot .ap-master.is-on .ap-glyph-pulse { animation: ap-pulse 3.2s var(--ease-out) 600ms infinite; }
@keyframes ap-pulse {
  0% { transform: scale(1); opacity: .28; }
  55%, 100% { transform: scale(1.55); opacity: 0; }
}

/* Words never break mid-word (G022): they wrap between words, and the column has a floor where it sits in a row. */
.view-autopilot .ap-master-text { grid-area: text; min-width: 0; overflow-wrap: normal; word-break: normal; align-self: center; }
.view-autopilot .ap-master-title {
  font-size: var(--fs-title2); line-height: var(--lh-title2); letter-spacing: var(--ls-title2);
  font-weight: var(--w-bold);
  text-wrap: balance;
}
.view-autopilot .ap-master-sub {
  margin-top: 1px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2);
  text-wrap: pretty;
}

/* Everything is stopped: a calm orange pause (same as the shell's bar), what keeps going, and Resume. */
.view-autopilot .ap-master.is-stopped .ap-glyph-disc {
  background: color-mix(in srgb, var(--orange) 16%, transparent);
  color: var(--orange-text);
}
.view-autopilot .ap-stopped {
  grid-area: body;
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  margin-top: 16px; padding-top: 14px;
  box-shadow: inset 0 var(--hairline) 0 var(--sep);
}
.view-autopilot .ap-stopped[hidden] { display: none; }
.view-autopilot .ap-stopped-text { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); }
.view-autopilot .ap-resume { width: 100%; }

/* Waiting for the one-time setup: the essentials meter, the honest timing and the way on. */
.view-autopilot .ap-live {
  grid-area: body;
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 16px; padding-top: 14px;
  box-shadow: inset 0 var(--hairline) 0 var(--sep);
}
.view-autopilot .ap-live[hidden] { display: none; }
.view-autopilot .ap-live-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.view-autopilot .ap-live-timing { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.view-autopilot .ap-live-timing[hidden] { display: none; }
.view-autopilot .ap-live-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.view-autopilot .ap-live-go { flex: 1 1 auto; }
.view-autopilot .ap-live-list { flex: 0 1 auto; }
@media (max-width: 479.98px) { .view-autopilot .ap-live-actions { flex-direction: column; align-items: stretch; gap: 4px; } }
@media (min-width: 480px) { .view-autopilot .ap-live-go { flex: 0 1 auto; } }

/* The brake: a quiet destructive row across the foot of the card, like "Turn Off Find My". */
.view-autopilot .ap-stop-row {
  grid-area: stop;
  margin: 16px -16px -16px;
  box-shadow: inset 0 var(--hairline) 0 var(--sep);
}
.view-autopilot .ap-stop-row[hidden] { display: none; }
.view-autopilot .ap-stop {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 56px; padding: 9px 16px 10px;
  border-radius: 0 0 var(--r-card) var(--r-card);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-press) linear;
}
.view-autopilot .ap-stop:active { background: var(--highlight); }
.view-autopilot .ap-stop:focus-visible { outline-offset: -3px; }
.view-autopilot .ap-stop.is-busy { opacity: .55; pointer-events: none; }
.view-autopilot .ap-stop-icon {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: color-mix(in srgb, var(--red) 14%, transparent);
  color: var(--red-text);
}
.view-autopilot .ap-stop-label {
  flex: none;
  font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); font-weight: var(--w-medium);
  color: var(--red-text);
}
.view-autopilot .ap-stop-note {
  flex: 1 1 auto; min-width: 0; margin-left: auto;
  text-align: right;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2);
}
@media (min-width: 768px) {
  .view-autopilot .ap-stop-row { margin: 20px -20px -20px; }
  .view-autopilot .ap-stop { padding-inline: 20px; }
}
@media (max-width: 479.98px) {
  /* Phones: the note goes under the words, so neither squeezes the other. */
  .view-autopilot .ap-stop { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; row-gap: 0; }
  .view-autopilot .ap-stop-icon { grid-row: 1 / span 2; }
  .view-autopilot .ap-stop-note { margin-left: 0; text-align: left; }
}

.view-autopilot .ap-facts {
  grid-area: body;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 16px 0 0; padding-top: 14px;
  box-shadow: inset 0 var(--hairline) 0 var(--sep);
}
.view-autopilot .ap-facts[hidden] { display: none; }
.view-autopilot .ap-fact { min-width: 0; padding: 0 10px; }
.view-autopilot .ap-fact:first-child { padding-left: 0; }
.view-autopilot .ap-fact + .ap-fact { box-shadow: inset var(--hairline) 0 0 var(--sep); }
.view-autopilot .ap-fact dd { margin: 0; }
.view-autopilot .ap-fact-label {
  font-size: 12px; line-height: 16px; font-weight: var(--w-semibold); color: var(--label-2);
}
.view-autopilot .ap-fact-value {
  margin-top: 2px;
  font-family: var(--font-rounded);
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* "last 9:30 am" never orphans "am" (G039). */
.view-autopilot .ap-fact-note {
  font-size: 12px; line-height: 16px; color: var(--label-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Roomy: one calm row, like a macOS Control Center module stretched out. */
.view-autopilot .ap-top { container-type: inline-size; container-name: ap-top; }
@container ap-top (min-width: 760px) {
  .view-autopilot .ap-master { column-gap: 20px; padding: 22px 24px; }
  .view-autopilot .ap-master.is-on {
    grid-template-columns: auto minmax(200px, 1fr) auto;
    grid-template-areas: "glyph text body" "stop stop stop";
  }
  .view-autopilot .ap-stop-row { margin: 20px -24px -22px; }
  .view-autopilot .ap-stop { padding-inline: 24px; min-height: 52px; }
  .view-autopilot .ap-glyph { width: 60px; height: 60px; align-self: center; }
  .view-autopilot .ap-facts {
    grid-template-columns: repeat(3, auto);
    margin: 0; padding: 0 4px 0 0;
    box-shadow: none;
  }
  .view-autopilot .ap-fact { padding: 2px 22px; min-width: 116px; }
  .view-autopilot .ap-fact:first-child { padding-left: 22px; box-shadow: inset var(--hairline) 0 0 var(--sep); }
  .view-autopilot .ap-live { margin-top: 18px; padding-top: 16px; }
  .view-autopilot .ap-live-main { max-width: 560px; }
  /* Stopped keeps its stacked layout here: Resume goes full width under the explanation (G022). */
  .view-autopilot .ap-master.is-stopped .ap-stopped { flex-direction: row; align-items: center; gap: 20px; }
  .view-autopilot .ap-master.is-stopped .ap-stopped-text { flex: 1 1 auto; min-width: 0; max-width: 560px; }
  .view-autopilot .ap-master.is-stopped .ap-resume { width: auto; flex: none; margin-left: auto; }
}
/* Stopped goes into one row only when the title column still gets a comfortable width (G022). */
@container ap-top (min-width: 1000px) {
  .view-autopilot .ap-master.is-stopped {
    grid-template-columns: auto minmax(240px, 1fr) minmax(0, 560px);
    grid-template-areas: "glyph text body";
  }
  .view-autopilot .ap-master.is-stopped .ap-stopped {
    margin: 0; padding: 2px 0 2px 22px;
    box-shadow: inset var(--hairline) 0 0 var(--sep);
  }
  /* Waiting: the meter and the timing on the left, the way on at the right. */
  .view-autopilot .ap-live { flex-direction: row; align-items: flex-end; gap: 32px; }
  .view-autopilot .ap-live-main { flex: 1 1 auto; }
  .view-autopilot .ap-live-actions { flex: none; margin-left: auto; flex-wrap: nowrap; }
}

/* Small phones (iPhone SE 1st gen): a smaller glyph, so the words keep their room. */
@media (max-width: 374px) {
  .view-autopilot .ap-master { column-gap: 12px; }
  .view-autopilot .ap-glyph { width: 44px; height: 44px; }
  .view-autopilot .ap-glyph-disc svg { width: 20px; height: 20px; }
  .view-autopilot .ap-master-title { font-size: var(--fs-title3); line-height: var(--lh-title3); letter-spacing: var(--ls-title3); }
  .view-autopilot .ap-fact { padding: 0 6px; }
  .view-autopilot .ap-fact-value { font-size: 14px; }
}
/* Phones: each fact takes its own width, so "No changes" and "last 3:00 pm" fit without cutting off (G039). */
@media (max-width: 479.98px) {
  .view-autopilot .ap-facts { grid-template-columns: auto auto auto; justify-content: space-between; }
  .view-autopilot .ap-fact:last-child { padding-right: 0; }
}

/* ============================================================== daily cap */
.view-autopilot .ap-cap .card-header { margin-bottom: 6px; }
.view-autopilot .ap-cap-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.view-autopilot .ap-cap-value { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.view-autopilot .ap-cap-amount {
  font-family: var(--font-rounded);
  font-size: 40px; line-height: 46px; font-weight: var(--w-bold); letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) linear;
}
.view-autopilot .ap-cap.is-pending .ap-cap-amount { color: var(--accent-text); }
.view-autopilot .ap-cap-unit { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); white-space: nowrap; }
.view-autopilot .ap-cap .stepper-control { height: 36px; border-radius: 9px; }
.view-autopilot .ap-cap .stepper-btn { width: 50px; height: 36px; border-radius: 9px; }

.view-autopilot .ap-cap-gst { margin-top: 2px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.view-autopilot .ap-cap-gst[hidden] { display: none; }
.view-autopilot .ap-cap-warm {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 12px; padding: 9px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--indigo) 9%, transparent);
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label);
}
.view-autopilot .ap-cap-warm[hidden] { display: none; }
.view-autopilot .ap-cap-warm svg { flex: none; margin-top: 1px; color: var(--indigo-text); }
.view-autopilot .ap-cap-today { margin-top: 18px; }
.view-autopilot .ap-cap-spent {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead);
}
.view-autopilot .ap-cap-spent-label { color: var(--label-2); }
.view-autopilot .ap-cap-spent-value { font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.view-autopilot .ap-bar {
  --bar: var(--indigo);
  display: block; height: 8px;
  border-radius: 4px; overflow: hidden;
  background: color-mix(in srgb, var(--bar) 17%, transparent);
}
.view-autopilot .ap-bar[data-tone="orange"] { --bar: var(--orange); }
.view-autopilot .ap-bar[data-tone="red"] { --bar: var(--red); }
.view-autopilot .ap-bar-fill {
  display: block; height: 100%; border-radius: 4px;
  background: var(--bar);
  transition: width 600ms var(--ease), background-color var(--dur-fast) linear;
}

.view-autopilot .ap-cap-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  align-items: end; /* a two-line label ("Budgets when you resume") keeps the values level */
  margin-top: 14px;
}
.view-autopilot .ap-cap-fact { display: flex; flex-direction: column; min-width: 0; }
.view-autopilot .ap-cap-fact-label { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.view-autopilot .ap-cap-fact-value {
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}
.view-autopilot .ap-cap-fact-value[class*="tone-"] { color: var(--tone-text); }
.view-autopilot .ap-cap-fact-note { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.view-autopilot .ap-cap-split {
  margin-top: 6px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2);
  font-variant-numeric: tabular-nums;
}
.view-autopilot .ap-cap-split.is-over { color: var(--orange-text); }

.view-autopilot .ap-cap-meta {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 16px -16px -16px; padding: 13px 16px 14px;
  box-shadow: inset 0 var(--hairline) 0 var(--sep);
  border-radius: 0 0 var(--r-card) var(--r-card);
  color: inherit;
}
.view-autopilot .ap-cap-meta.pressable:active { transform: none; opacity: 1; background: var(--highlight); }
@media (hover: hover) and (pointer: fine) { .view-autopilot .ap-cap-meta:hover { background: var(--fill-4); } }
.view-autopilot .ap-cap-meta-icon {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--fill-3); color: var(--label-2);
}
.view-autopilot .ap-cap-meta-body { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); min-width: 0; }
.view-autopilot .ap-cap-meta-title { display: block; font-weight: var(--w-semibold); color: var(--label); }
.view-autopilot .ap-cap-meta-text { display: block; }
.view-autopilot .ap-limit-bar {
  display: block; height: 4px; margin: 8px 0 2px; max-width: 280px;
  border-radius: 2px; overflow: hidden;
  background: var(--fill-3);
}
.view-autopilot .ap-limit-bar[hidden] { display: none; }
.view-autopilot .ap-limit-fill { display: block; height: 100%; border-radius: 2px; background: var(--label-2); transition: width 600ms var(--ease); }
.view-autopilot .ap-cap-meta-link {
  display: inline-flex; align-items: center; gap: 2px; margin-top: 3px;
  color: var(--accent-text); font-weight: var(--w-medium);
}
@media (min-width: 768px) {
  .view-autopilot .ap-cap-meta { margin: 18px -20px -20px; padding: 14px 20px 16px; }
}

/* ============================================================== needs your OK
   Same item as Today (css/views/today.css .q-*), same markup and class names: 32px icon tile · title + time
   top-right · optional "$50 → $85" chip · detail (subhead) · Approve (tinted) / Decline (gray), 40px capsules
   with 44pt hit areas. Keep the two in step. */
.view-autopilot .ap-queue .card-header { margin-bottom: 4px; }
.view-autopilot .q-list { display: flex; flex-direction: column; }
.view-autopilot .q-list[hidden] { display: none; }
.view-autopilot .q-item {
  position: relative;
  display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px;
  padding: 14px 0;
}
.view-autopilot .q-item:first-child { padding-top: 4px; }
.view-autopilot .q-item:last-child { padding-bottom: 0; }
/* Only while collapsing (it would clip the buttons' hit areas otherwise). */
.view-autopilot .q-item.is-leaving { overflow: hidden; pointer-events: none; }
.view-autopilot .q-item.is-busy .q-actions .btn { pointer-events: none; }
/* iOS inset separator: starts at the text, not under the icon. */
.view-autopilot .q-item + .q-item::before {
  content: ""; position: absolute; top: 0; left: 44px; right: 0;
  height: var(--hairline); background: var(--sep);
}
.view-autopilot .q-item .icon-tile { margin-top: 1px; }
.view-autopilot .q-main { min-width: 0; }
.view-autopilot .q-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.view-autopilot .q-title {
  min-width: 0;
  text-wrap: pretty;
  font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold);
  letter-spacing: var(--ls-headline);
  color: var(--label);
  overflow-wrap: anywhere;
  border-radius: 4px;
}
.view-autopilot .q-title:active { opacity: .55; }
.view-autopilot .q-time {
  flex: none;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote);
  color: var(--label-2);
  white-space: nowrap;
}
.view-autopilot .q-change { margin-top: 8px; }
.view-autopilot .q-change-vis {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 8px;
  background: var(--fill-4);
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}
.view-autopilot .q-change-vis svg { color: var(--label-2); }
.view-autopilot .q-from { color: var(--label-2); font-weight: var(--w-medium); }
.view-autopilot .q-detail {
  margin-top: 6px;
  text-wrap: pretty;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead);
  color: var(--label-2);
}
.view-autopilot .q-consequence {
  margin-top: 8px; padding: 8px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label);
  text-wrap: pretty;
}
.view-autopilot .q-consequence[hidden], .view-autopilot .q-blocked[hidden] { display: none; }
.view-autopilot .q-blocked {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 8px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--w-medium); color: var(--label-2);
  text-wrap: pretty;
}
.view-autopilot .q-blocked svg { flex: none; margin-top: 1px; }
.view-autopilot .q-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.view-autopilot .q-actions .btn { flex: 0 1 auto; min-width: 104px; max-width: 100%; padding-inline: 16px; }
.view-autopilot .q-actions .btn.is-blocked { opacity: .45; cursor: default; }

.view-autopilot .ap-queue-empty { display: flex; align-items: center; gap: 12px; padding: 4px 0 2px; }
.view-autopilot .ap-queue-empty[hidden] { display: none; }
.view-autopilot .ap-queue-empty-icon { color: var(--green); flex: none; --knockout: var(--bg-2); }
.view-autopilot .ap-queue-empty-title {
  display: inline-block; vertical-align: top;
  font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold);
  border-radius: 6px;
}
.view-autopilot .ap-queue-empty-title:focus { outline: none; }
.view-autopilot .ap-queue-empty-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.view-autopilot .ap-queue-empty-sub { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); }

/* ============================================================== rules */
.view-autopilot .ap-rules .card-header { margin-bottom: 4px; }
.view-autopilot .ap-edit { font-weight: var(--w-regular); min-height: 32px; }
.view-autopilot .ap-edit.is-done { font-weight: var(--w-semibold); }
.view-autopilot .ap-edit[hidden] { display: none; }

.view-autopilot .ap-rules-paused {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 0 8px; padding: 9px 12px;
  border-radius: 12px;
  background: var(--fill-4);
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2);
}
.view-autopilot .ap-rules-paused[hidden] { display: none; }
.view-autopilot .ap-rules-paused svg { flex: none; color: var(--label-2); }

.view-autopilot .ap-rule-group { margin: 0 -16px; }
@media (min-width: 768px) {
  .view-autopilot .ap-rule-group { margin: 0 -20px; }
}
@media (max-width: 374px) {
  /* Give sentences the room: drop the decorative tiles on the smallest phones. */
  .view-autopilot .ap-rule-lead .icon-tile { display: none; }
  .view-autopilot .ap-rule-lead { margin-right: 0; }
  .view-autopilot .ap-rules.is-editing .ap-rule-lead { margin-right: 0; }
  .view-autopilot .ap-rule-add::before { left: 16px; }
}

.view-autopilot .ap-rule { position: relative; }
.view-autopilot .ap-rule-inner { display: flex; align-items: stretch; padding-left: 16px; }
@media (min-width: 768px) { .view-autopilot .ap-rule-inner { padding-left: 20px; } }
.view-autopilot .ap-rule-lead { flex: none; display: flex; align-items: flex-start; padding-top: 12px; margin-right: 14px; }
.view-autopilot .ap-rule-main {
  flex: 1 1 auto; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  grid-template-areas: "body trail" "note note";
  padding: 10px 16px 10px 0;
}
@media (min-width: 768px) { .view-autopilot .ap-rule-main { padding-right: 20px; } }
.view-autopilot .ap-rule + .ap-rule .ap-rule-main { box-shadow: inset 0 var(--hairline) 0 var(--sep); }
.view-autopilot .ap-rule-body { grid-area: body; min-width: 0; }
.view-autopilot .ap-rule-text {
  font-size: var(--fs-body); line-height: 28px; letter-spacing: var(--ls-body);
  color: var(--label);
  transition: color var(--dur-fast) linear;
  overflow-wrap: break-word;
}
.view-autopilot .ap-rule-note { grid-area: note; margin: 1px 0 2px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.view-autopilot .ap-rule-note[hidden] { display: none; }
.view-autopilot .ap-rule-trail { grid-area: trail; display: flex; align-items: center; gap: 8px; }
.view-autopilot .ap-rule-lock {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2);
  white-space: nowrap;
}
.view-autopilot .ap-rule .icon-tile { transition: background-color var(--dur-fast) linear; }
.view-autopilot .ap-rule.is-off .icon-tile { --tile-bg: var(--gray2); }
.view-autopilot .ap-rule.is-off .ap-rule-text { color: var(--label-2); }
.view-autopilot .ap-rule.is-busy { opacity: .5; pointer-events: none; }
.view-autopilot .ap-rule.is-flash .ap-rule-inner { animation: ap-row-flash 1.3s var(--ease-out); }
@keyframes ap-row-flash {
  0%, 30% { background: color-mix(in srgb, var(--accent) 10%, transparent); }
  100% { background: transparent; }
}

/* Tappable number tokens: iOS tinted inline buttons */
.view-autopilot .ap-token,
.ap-sheet .ap-token {
  position: relative;
  display: inline-block;
  margin: 0 1px;
  padding: 0 7px;
  border-radius: 7px;
  line-height: 25px;
  background: var(--accent-tint);
  color: var(--accent-text);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  vertical-align: baseline;
  transition: transform var(--dur-press) var(--ease), opacity var(--dur-press) linear, background-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
.view-autopilot button.ap-token { cursor: pointer; }
/* A 44pt hit area that never steals a neighbour's taps: the ::after slop (z 1) grows the token to at least
   44×44, and an invisible ::before (z 2) covers the pill itself, so where a token on the next line reaches
   over this one, the pill you can see still wins. */
.view-autopilot button.ap-token::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.view-autopilot button.ap-token::after {
  content: ""; position: absolute; z-index: 1;
  inset: min(0px, calc(50% - var(--hit) / 2)) min(-4px, calc(50% - var(--hit) / 2));
}
.view-autopilot button.ap-token:active { transform: scale(.93); opacity: .7; }
.view-autopilot button.ap-token:focus-visible { outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) {
  .view-autopilot button.ap-token:hover { background: var(--accent-tint-hover); }
}
.view-autopilot .ap-rule.is-off .ap-token { background: var(--fill-3); color: var(--label-2); }
.view-autopilot .ap-token.is-flash { animation: ap-token-flash 1.2s var(--ease-out); }
@keyframes ap-token-flash {
  0% { transform: scale(1.12); background: var(--accent); color: #fff; }
  25% { transform: none; background: var(--accent); color: #fff; }
  100% { background: var(--accent-tint); color: var(--accent-text); }
}

/* Edit mode: red minus reveals a Remove button, like iOS.
   The minus is a 46×44 hit area (the 22pt glyph sits where a 26pt slot would put it, then 12pt to the tile);
   negative margins keep the row's layout exactly as it was. It clips itself while it slides in. */
.view-autopilot .ap-rule-minus {
  display: flex; align-items: center; justify-content: flex-start;
  flex: none;
  width: 0; height: 44px; margin: -7px 0; padding: 0;
  color: var(--red);
  opacity: 0; visibility: hidden;
  overflow: hidden;
  --knockout: #fff;
  transition: width var(--dur) var(--ease), margin var(--dur) var(--ease), padding var(--dur) var(--ease), opacity var(--dur-fast) linear, visibility 0s linear var(--dur);
}
.view-autopilot .ap-rule-minus svg { flex: none; transition: transform var(--dur) var(--ease); }
/* Every row indents in edit mode (like UITableView); only removable ones show the control. */
.view-autopilot .ap-rules.is-editing .ap-rule .ap-rule-minus { width: 46px; margin-left: -8px; padding-left: 10px; }
.view-autopilot .ap-rules.is-editing .ap-rule.can-remove .ap-rule-minus {
  opacity: 1; visibility: visible;
  transition: width var(--dur) var(--ease), margin var(--dur) var(--ease), padding var(--dur) var(--ease), opacity var(--dur-fast) linear 80ms, visibility 0s;
}
.view-autopilot .ap-rule-minus:focus-visible { outline-offset: -4px; border-radius: 12px; }
.view-autopilot .ap-rule.is-confirming .ap-rule-minus svg { transform: rotate(-90deg); }
.view-autopilot .ap-rules.is-editing .ap-rule .switch { display: none; }
.view-autopilot .ap-rule-delete {
  display: none;
  align-items: center; justify-content: center;
  height: 34px; padding: 0 14px;
  border-radius: 9px;
  background: var(--destructive-fill); color: #fff;
  font-size: var(--fs-subhead); font-weight: var(--w-semibold);
}
.view-autopilot .ap-rule.is-confirming .ap-rule-delete { display: inline-flex; animation: ap-pop 260ms var(--ease-out); }
.view-autopilot .ap-rule-delete:active { opacity: .75; }
@media (hover: hover) and (pointer: fine) { .view-autopilot .ap-rule-delete:hover { filter: brightness(.92); } }
@keyframes ap-pop { from { transform: translateX(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.view-autopilot .ap-rules.is-editing .ap-token { pointer-events: none; background: var(--fill-3); color: var(--label-2); }

.view-autopilot .ap-rule-add { position: relative; }
.view-autopilot .ap-rule-add::before {
  content: ""; position: absolute; top: 0; right: 0; left: 60px;
  height: var(--hairline); background: var(--sep);
}
@media (min-width: 768px) { .view-autopilot .ap-rule-add::before { left: 64px; } }
.view-autopilot .ap-add-btn {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 50px; padding: 0 16px 0 19px;
  color: var(--accent-text);
  font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body);
  --knockout: #fff;
}
@media (min-width: 768px) { .view-autopilot .ap-add-btn { padding: 0 20px 0 23px; } }
.view-autopilot .ap-add-btn svg { color: var(--accent); }
.view-autopilot .ap-add-btn:active { background: var(--highlight); }
@media (hover: hover) and (pointer: fine) { .view-autopilot .ap-add-btn:hover { background: var(--fill-4); } }
.view-autopilot .ap-add-btn:focus-visible { outline-offset: -3px; border-radius: 10px; }

.view-autopilot .ap-rules-foot {
  margin: 2px -16px 0; padding: 12px 16px 0;
  box-shadow: inset 0 var(--hairline) 0 var(--sep);
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2);
}
@media (min-width: 768px) { .view-autopilot .ap-rules-foot { margin-inline: -20px; padding-inline: 20px; } }
.view-autopilot .ap-rules.is-paused .ap-rule-text { color: var(--label-2); }
.view-autopilot .ap-rules.is-paused .ap-rule .icon-tile { opacity: .55; }

/* ============================================================== recent activity */
.view-autopilot .ap-activity .card-header { margin-bottom: 2px; }
.view-autopilot .ap-act { position: relative; }
.view-autopilot .ap-act + .ap-act::before {
  content: ""; position: absolute; top: 0; right: 0; left: 40px;
  height: var(--hairline); background: var(--sep);
}
.view-autopilot .ap-act-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0;
  color: inherit;
  border-radius: 10px;
}
.view-autopilot .ap-act:last-child .ap-act-row { padding-bottom: 0; }
.view-autopilot .ap-act-row:active { opacity: .55; }
/* Pointer hover: the row washes like a list row, bleeding past the text to the card's inner edge. */
.view-autopilot .ap-act-row { position: relative; isolation: isolate; }
.view-autopilot .ap-act-row::before {
  content: ""; position: absolute; inset: 0 -8px; z-index: -1;
  border-radius: 10px; background: transparent;
  transition: background-color var(--dur-press) linear;
}
.view-autopilot .ap-act:last-child .ap-act-row::before { bottom: -6px; }
@media (hover: hover) and (pointer: fine) { .view-autopilot .ap-act-row:hover::before { background: var(--fill-4); } }
.view-autopilot .ap-act-icon {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; margin-top: 1px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 15%, transparent);
  color: var(--tone-text);
}
.view-autopilot .ap-act-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.view-autopilot .ap-act-msg { font-size: var(--fs-subhead); line-height: var(--lh-subhead); }
.view-autopilot .ap-act-meta { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.view-autopilot .ap-act.is-undone .ap-act-msg { color: var(--label-2); }
.view-autopilot .ap-act-chevron { flex: none; align-self: center; color: var(--label-3); }
.view-autopilot .ap-act-none { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); padding: 4px 0; }

/* ============================================================== levels ("Runs on its own") */
.view-autopilot .ap-levels .card-header { margin-bottom: 2px; }
.view-autopilot .ap-lv-lead,
.view-autopilot .ap-safe-lead { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); }
.view-autopilot .ap-lv-list { margin: 8px -16px 0; }
.view-autopilot .ap-lv {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  min-height: 60px; padding: 9px 16px;
}
.view-autopilot .ap-lv + .ap-lv::before {
  content: ""; position: absolute; top: 0; right: 0; left: 60px;
  height: var(--hairline); background: var(--sep);
}
.view-autopilot .ap-lv .icon-tile { transition: background-color var(--dur-fast) linear; }
.view-autopilot .ap-lv.is-ask .icon-tile { --tile-bg: var(--gray2); }
.view-autopilot .ap-lv-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.view-autopilot .ap-lv-title { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); }
.view-autopilot .ap-lv-state { font-weight: var(--w-semibold); color: var(--orange-text); }
.view-autopilot .ap-lv-state::after { content: " · "; font-weight: var(--w-regular); color: var(--label-2); }
.view-autopilot .ap-lv:not(.is-ask) .ap-lv-state { display: none; }
.view-autopilot .ap-lv-limit { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }
.view-autopilot .ap-lv .switch { flex: none; }
.view-autopilot .ap-lv-foot {
  margin: 4px -16px 0; padding: 12px 16px 0;
  box-shadow: inset 0 var(--hairline) 0 var(--sep);
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2);
}
@media (min-width: 768px) {
  .view-autopilot .ap-lv-list { margin-inline: -20px; }
  .view-autopilot .ap-lv { padding-inline: 20px; }
  .view-autopilot .ap-lv + .ap-lv::before { left: 64px; }
  .view-autopilot .ap-lv-foot { margin-inline: -20px; padding-inline: 20px; }
}
@media (max-width: 374px) {
  .view-autopilot .ap-lv .icon-tile { display: none; }
  .view-autopilot .ap-lv + .ap-lv::before { left: 16px; }
}

/* ============================================================== testing */
.view-autopilot .ap-testing .card-header { margin-bottom: 6px; }
.view-autopilot .ap-testing[hidden] { display: none; }
.view-autopilot .ap-tc-set { display: flex; align-items: center; gap: 12px; }
.view-autopilot .ap-tc-set-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.view-autopilot .ap-tc-set-title {
  font-family: var(--font-rounded);
  font-size: var(--fs-title3); line-height: var(--lh-title3); letter-spacing: var(--ls-title3); font-weight: var(--w-bold);
}
.view-autopilot .ap-tc-set-sub { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.view-autopilot .ap-tc-change { flex: none; }
.view-autopilot .ap-tc-now { margin-top: 14px; }
.view-autopilot .ap-tc-run {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--bg-3);
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-press) var(--ease), background-color var(--dur-press) linear;
}
.view-autopilot .ap-tc-run + .ap-tc-run { margin-top: 8px; }
.view-autopilot .ap-tc-run:active { transform: scale(.98); background: var(--fill-3); }
@media (hover: hover) and (pointer: fine) { .view-autopilot .ap-tc-run:hover { background: var(--fill-3); } }
.view-autopilot .ap-tc-art { flex: none; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; }
.view-autopilot .ap-tc-art svg { display: block; width: 100%; height: 100%; }
.view-autopilot .ap-tc-run-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.view-autopilot .ap-tc-run-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; }
.view-autopilot .ap-tc-run-title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-headline); line-height: var(--lh-headline); letter-spacing: var(--ls-headline); font-weight: var(--w-semibold);
}
.view-autopilot .ap-tc-run-top .pill { flex: none; }
.view-autopilot .ap-tc-run-title { flex: 1 1 auto; }
@media (max-width: 374px) {
  .view-autopilot .ap-tc-set-title { font-size: var(--fs-headline); line-height: var(--lh-headline); }
  .view-autopilot .ap-tc-art { width: 40px; height: 40px; }
  .view-autopilot .ap-tc-run { padding: 10px; gap: 10px; }
}
.view-autopilot .ap-tc-run-meta { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); font-variant-numeric: tabular-nums; }
.view-autopilot .ap-tc-bar {
  display: block; height: 5px; margin-top: 5px;
  border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--blue) 16%, transparent);
}
.view-autopilot .ap-tc-bar-fill { display: block; height: 100%; border-radius: 3px; background: var(--blue); transition: width 600ms var(--ease); }
.view-autopilot .ap-tc-now.is-paused .ap-tc-bar-fill,
.view-autopilot .ap-tc-run.is-paused .ap-tc-bar-fill { background: var(--gray); }
.view-autopilot .ap-tc-chev { flex: none; color: var(--label-3); }
.view-autopilot .ap-tc-none {
  padding: 12px 14px; border-radius: 14px; background: var(--bg-3);
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2);
}
.view-autopilot .ap-tc-next { margin-top: 12px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.view-autopilot .ap-tc-next-label { font-weight: var(--w-semibold); color: var(--label); }

/* ============================================================== safety net */
.view-autopilot .ap-safety .card-header { margin-bottom: 2px; }
.view-autopilot .ap-safety[hidden] { display: none; }
.view-autopilot .ap-safe-list { margin: 8px -16px -4px; }
.view-autopilot .ap-safe {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 16px;
}
.view-autopilot .ap-safe + .ap-safe::before {
  content: ""; position: absolute; top: 0; right: 0; left: 60px;
  height: var(--hairline); background: var(--sep);
}
.view-autopilot .ap-safe .icon-tile { margin-top: 1px; }
.view-autopilot .ap-safe-body { flex: 1 1 auto; min-width: 0; }
.view-autopilot .ap-safe-text { font-size: var(--fs-callout); line-height: var(--lh-callout); letter-spacing: var(--ls-callout); text-wrap: pretty; }
.view-autopilot .ap-safe-note { margin-top: 3px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }
.view-autopilot .ap-safe-lock {
  flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; margin-top: 3px;
  border-radius: 50%;
  background: var(--fill-4); color: var(--label-2);
}
@media (min-width: 768px) {
  .view-autopilot .ap-safe-list { margin-inline: -20px; }
  .view-autopilot .ap-safe { padding-inline: 20px; }
  .view-autopilot .ap-safe + .ap-safe::before { left: 64px; }
}
@media (max-width: 374px) {
  .view-autopilot .ap-safe .icon-tile { display: none; }
  .view-autopilot .ap-safe + .ap-safe::before { left: 16px; }
}

/* ============================================================== fresh mode */
.view-autopilot .ap-fresh { padding-top: var(--sp-8); }

/* ============================================================== states */
.view-autopilot .ap-error { padding-top: var(--sp-8); }
.view-autopilot .ap-master.is-skeleton .ap-master-text { display: flex; flex-direction: column; }

/* ============================================================== activity log (#/autopilot/log) */
.view-autopilot .ap-log { max-width: 720px; margin: 0 auto; }
.view-autopilot .ap-log-top { display: flex; flex-direction: column; gap: 8px; padding-top: var(--sp-2); }
.view-autopilot .ap-log-top[hidden] { display: none; }
.view-autopilot .ap-log-top .segmented { width: 100%; }
@media (min-width: 768px) {
  .view-autopilot .ap-log-top { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
  .view-autopilot .ap-log-top .segmented { width: 320px; }
}
.view-autopilot .ap-log-summary {
  padding: 0 4px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2);
  font-variant-numeric: tabular-nums;
}
.view-autopilot .ap-log-summary:empty { display: none; }
.view-autopilot .ap-days > .empty { margin-top: var(--sp-6); }

.view-autopilot .ap-day { margin-top: var(--sp-6); }
.view-autopilot .ap-day-title {
  padding: 0 4px; margin-bottom: 10px;
  font-size: var(--fs-title3); line-height: var(--lh-title3); letter-spacing: var(--ls-title3);
  font-weight: var(--w-bold);
}
.view-autopilot .ap-day-sk { margin: 0 4px 12px; }

.view-autopilot .ap-timeline {
  background: var(--bg-2);
  border-radius: var(--r-card);
  padding: 4px 0;
  overflow: hidden;
}
.view-autopilot .ap-entry {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px;
  transition: background-color var(--dur-press) linear;
}
@media (min-width: 768px) { .view-autopilot .ap-entry { padding: 13px 20px; gap: 14px; } }
.view-autopilot .ap-entry:has(.ap-entry-link:active) { background: var(--highlight); }
@media (hover: hover) and (pointer: fine) {
  .view-autopilot .ap-entry:has(.ap-entry-link:hover) { background: var(--fill-4); }
  .view-autopilot .ap-entry:has(.ap-undo:hover) { background: transparent; }
  .view-autopilot .ap-undo:hover:not(.is-busy):not(.is-waiting) { background: var(--accent-tint-hover); }
}
.view-autopilot .ap-entry-rail { position: relative; flex: none; width: 30px; align-self: stretch; display: flex; justify-content: center; }
.view-autopilot .ap-entry-icon {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 15%, var(--bg-2));
  color: var(--tone-text);
}
/* The rail: a quiet line joining one entry's icon to the next. */
.view-autopilot .ap-entry:not(:last-child) .ap-entry-rail::after {
  content: "";
  position: absolute; top: 36px; bottom: -18px; left: 50%;
  width: 2px; margin-left: -1px; border-radius: 1px;
  background: var(--fill-3);
}
@media (min-width: 768px) { .view-autopilot .ap-entry:not(:last-child) .ap-entry-rail::after { bottom: -19px; } }
.view-autopilot .ap-entry-body { flex: 1 1 auto; min-width: 0; padding-top: 4px; }
.view-autopilot .ap-entry-link {
  display: block;
  font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body);
  color: var(--label);
  overflow-wrap: break-word;
}
.view-autopilot .ap-entry-link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.view-autopilot .ap-entry-link:focus-visible { outline: none; }
.view-autopilot .ap-entry-link:focus-visible::after { outline: 2.5px solid var(--accent); outline-offset: -3px; border-radius: 12px; }
.view-autopilot .ap-entry-foot { display: flex; align-items: center; gap: 10px; margin-top: 5px; min-height: 20px; }
.view-autopilot .ap-entry-meta {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 5px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2);
  font-variant-numeric: tabular-nums;
}
.view-autopilot .ap-entry-dot { color: var(--label-3); }
.view-autopilot .ap-entry-undone { margin-left: 2px; }
.view-autopilot .ap-undo {
  position: relative; z-index: 2;
  flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 12px 0 10px;
  border-radius: 15px;
  background: var(--accent-tint); color: var(--accent-text);
  font-size: var(--fs-subhead); font-weight: var(--w-semibold);
  transition: transform var(--dur-press) var(--ease), opacity var(--dur-press) linear;
}
.view-autopilot .ap-undo::before { content: ""; position: absolute; inset: -7px -4px; }
.view-autopilot .ap-undo:active { transform: scale(.95); opacity: .7; }
.view-autopilot .ap-undo.is-busy { opacity: .5; }
.view-autopilot .ap-undo.is-waiting { background: var(--fill-4); color: var(--label-2); font-weight: var(--w-medium); }
.view-autopilot .ap-undo.is-waiting:active { transform: none; opacity: 1; }
.view-autopilot .ap-entry-chevron { flex: none; align-self: center; color: var(--label-3); position: relative; z-index: 1; pointer-events: none; }
.view-autopilot .ap-entry.is-undone .ap-entry-link { color: var(--label-2); }
.view-autopilot .ap-entry.is-new { animation: ap-entry-in 520ms var(--ease); }
@keyframes ap-entry-in {
  from { opacity: 0; transform: translateY(-6px); background: color-mix(in srgb, var(--accent) 10%, transparent); }
  to { opacity: 1; transform: none; }
}
.view-autopilot .ap-entry.is-skeleton .ap-entry-body { display: flex; flex-direction: column; padding-top: 6px; }

/* ============================================================== sheets (overlay root) */
/* Number sheet */
.ap-sheet .ap-ps { display: flex; flex-direction: column; padding: 4px 0 8px; }
.ap-sheet .ap-ps-preview {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bg-2);
}
.ap-sheet .ap-ps-sentence {
  font-size: var(--fs-body); line-height: 28px; letter-spacing: var(--ls-body);
  color: var(--label-2);
}
.ap-sheet .ap-token.is-static { background: var(--fill-3); color: var(--label-2); font-weight: var(--w-medium); }
.ap-sheet .ap-token.is-current { background: var(--accent-tint); color: var(--accent-text); font-weight: var(--w-semibold); }
.ap-sheet .ap-ps-value {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  margin-top: 28px;
}
.ap-sheet .ap-ps-num {
  display: inline-block;
  font-family: var(--font-rounded);
  font-size: 60px; line-height: 64px; font-weight: var(--w-bold); letter-spacing: -1.4px;
  font-variant-numeric: tabular-nums;
}
.ap-sheet .ap-ps-unit { font-size: var(--fs-title3); line-height: var(--lh-title3); font-weight: var(--w-semibold); color: var(--label-2); }
.ap-sheet .ap-ps-unit[hidden] { display: none; }
.ap-sheet .ap-ps-stepper { display: flex; justify-content: center; margin-top: 14px; }
.ap-sheet .ap-ps-stepper .stepper-control { height: 44px; border-radius: 12px; }
.ap-sheet .ap-ps-stepper .stepper-btn { width: 76px; height: 44px; border-radius: 12px; }
.ap-sheet .ap-ps-stepper .stepper-btn svg { width: 22px; height: 22px; }
.ap-sheet .ap-ps-stepper .stepper-sep { height: 22px; }
.ap-sheet .ap-ps-range {
  margin-top: 10px; text-align: center;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2);
}
.ap-sheet .ap-ps-hint {
  margin: 22px auto 0; max-width: 420px;
  text-align: center;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2);
}
.ap-sheet .ap-ps-hint[hidden] { display: none; }
.ap-sheet .ap-ps-note {
  margin: 10px auto 0; max-width: 420px;
  text-align: center;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2);
}

/* Test settings sheet (shared with Settings) */
.ap-sheet.ap-ts-sheet .ap-ts { padding-top: 8px; }
.ap-sheet .ap-ts-summary {
  padding: 10px 16px 0;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2);
  text-wrap: pretty;
}
.ap-sheet .ap-ts .stepper-value { min-width: 4ch; font-variant-numeric: tabular-nums; }

/* Needs your OK: a raise with choices (consequence, the split before → after, the choices) and the feedback score */
.ap-sheet .ap-options, .ap-sheet .ap-score { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }
.ap-sheet .ap-options-intro, .ap-sheet .ap-score-intro { padding: 0 4px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); }
.ap-sheet .ap-options .list-section { margin: 0; }
.ap-sheet .ap-option-row .list-row-title { white-space: normal; text-wrap: pretty; }
.ap-sheet .ap-split {
  width: 100%; border-collapse: collapse;
  background: var(--bg-2); border-radius: var(--r-list); overflow: hidden;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead);
  font-variant-numeric: tabular-nums;
}
.ap-sheet .ap-split th, .ap-sheet .ap-split td { padding: 8px 16px; text-align: right; white-space: nowrap; }
.ap-sheet .ap-split th[scope="row"] { text-align: left; font-weight: var(--w-regular); white-space: normal; }
.ap-sheet .ap-split thead th { padding-top: 12px; padding-bottom: 4px; font-size: var(--fs-footnote); font-weight: var(--w-semibold); color: var(--label-2); }
.ap-sheet .ap-split td.ap-split-arrow { padding-inline: 0; color: var(--label-3); width: 1%; }
.ap-sheet .ap-split tbody tr + tr > * { box-shadow: inset 0 var(--hairline) 0 var(--sep); }
.ap-sheet .ap-split tr.is-total > * { font-weight: var(--w-semibold); }
.ap-sheet .ap-split tr.is-over td:last-child { color: var(--orange-text); }
.ap-sheet .ap-split tfoot td {
  padding-top: 6px; padding-bottom: 12px; text-align: left; white-space: normal;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2);
}
.ap-sheet .ap-score-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 6px 16px;
  border-radius: var(--r-list); background: var(--bg-2);
}
.ap-sheet .ap-score-label { font-size: var(--fs-body); line-height: var(--lh-body); }
.ap-sheet .ap-score-row .stepper-value { min-width: 7ch; font-variant-numeric: tabular-nums; }
.ap-sheet .ap-score-link {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin: 0 4px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-medium); color: var(--accent-text);
}

/* Add rule sheet */
.ap-sheet .ap-add-loading { display: grid; place-items: center; min-height: 180px; }
.ap-sheet .ap-tpl-list { background: var(--bg-2); border-radius: var(--r-list); overflow: hidden; }
.ap-sheet .ap-tpl-list li { position: relative; }
.ap-sheet .ap-tpl-list li + li::before {
  content: ""; position: absolute; top: 0; right: 0; left: 60px;
  height: var(--hairline); background: var(--sep);
}
.ap-sheet .ap-tpl {
  display: flex; align-items: flex-start; gap: 14px;
  width: 100%; padding: 13px 16px 14px;
  text-align: left;
  transition: background-color var(--dur-press) linear;
}
.ap-sheet .ap-tpl:active { background: var(--row-pressed); }
@media (hover: hover) and (pointer: fine) { .ap-sheet .ap-tpl:hover:not(.is-busy) { background: var(--fill-4); } }
.ap-sheet .ap-tpl:focus-visible { outline-offset: -3px; border-radius: var(--r-list); }
.ap-sheet .ap-tpl > .icon-tile { margin-top: 1px; }
.ap-sheet .ap-tpl-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ap-sheet .ap-tpl-label { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-semibold); letter-spacing: var(--ls-body); }
.ap-sheet .ap-tpl-sentence { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); }
.ap-sheet .ap-tpl-add {
  flex: none; align-self: center;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent-text);
}
.ap-sheet .ap-tpl.is-busy .ap-tpl-add { background: transparent; }
.ap-sheet .ap-add-foot { padding: 8px 16px 0; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }

/* ============================================================== pointer hover (Mac, iPad with a trackpad) */
@media (hover: hover) and (pointer: fine) {
  .view-autopilot .q-title:hover { color: var(--accent-text); }
}

/* ============================================================== forced colours (Windows High Contrast) */
@media (forced-colors: active) {
  .view-autopilot .ap-bar { forced-color-adjust: none; background: Canvas; box-shadow: inset 0 0 0 1px CanvasText; }
  .view-autopilot .ap-bar-fill { forced-color-adjust: none; background: Highlight; }
  .view-autopilot .ap-limit-bar { forced-color-adjust: none; background: Canvas; box-shadow: inset 0 0 0 1px CanvasText; }
  .view-autopilot .ap-limit-fill { forced-color-adjust: none; background: CanvasText; }
  .view-autopilot .ap-cap-warm { border: 1px solid CanvasText; }
  .view-autopilot .ap-count { forced-color-adjust: none; background: CanvasText; color: Canvas; }
  .view-autopilot .ap-glyph-disc { border: 1px solid CanvasText; }
  .view-autopilot .ap-master.is-on .ap-glyph-disc { forced-color-adjust: none; background: Highlight; color: HighlightText; box-shadow: none; }
  .view-autopilot .ap-glyph-pulse { display: none; }
  .view-autopilot .q-change-vis, .view-autopilot .q-consequence, .ap-sheet .ap-split { border: 1px solid CanvasText; }
  .view-autopilot button.ap-token, .ap-sheet .ap-token.is-current { border: 1px solid ButtonText; }
  .view-autopilot .ap-rules.is-editing .ap-token { border-color: GrayText; color: GrayText; }
  .view-autopilot .ap-rule-delete { forced-color-adjust: none; background: ButtonText; color: ButtonFace; }
  .view-autopilot .ap-undo { border: 1px solid ButtonText; }
  .view-autopilot .ap-entry-rail::after { forced-color-adjust: none; background: CanvasText; }
  .view-autopilot .ap-entry-icon, .view-autopilot .ap-act-icon { border: 1px solid CanvasText; }
  .ap-sheet .ap-ps-preview { border: 1px solid CanvasText; }
  .ap-sheet .ap-tpl-add { border: 1px solid ButtonText; }
  .view-autopilot .ap-tc-bar { forced-color-adjust: none; background: Canvas; box-shadow: inset 0 0 0 1px CanvasText; }
  .view-autopilot .ap-tc-bar-fill { forced-color-adjust: none; background: Highlight; }
  .view-autopilot .ap-stop-icon, .view-autopilot .ap-safe-lock { border: 1px solid CanvasText; }
  .view-autopilot .ap-tc-run, .view-autopilot .ap-tc-none { border: 1px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  .view-autopilot .ap-master.is-on .ap-glyph-pulse { animation: none; }
}