/*
 * The three-panel app shell: rail / list / detail panel.
 * Ported from the APP section of "Checklist Spike.dc.html".
 *
 * Namespaced .ap-* so it never collides with the marketing (.mk-*) or
 * onboarding (.ob-*) surfaces, or the older app chrome in application.css.
 */

body.app {
  font-family: var(--ck-font);
  color: var(--ck-ink);
  background: var(--ck-wizard-grad);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  height: 100vh;
  overflow: hidden;
}
body.app *, body.app *::before, body.app *::after { box-sizing: border-box; }

.ap-shell {
  height: 100vh;
  display: flex;
  gap: 18px;
  padding: 22px 22px 74px;
  overflow: hidden;
  position: relative;
}

.ap-panel-surface,
.ap-rail, .ap-main, .ap-detail {
  border-radius: 20px;
  box-shadow: 0 26px 50px -30px rgba(40, 60, 110, .45);
  overflow: hidden;
}

/* ============================ LEFT RAIL ============================ */

.ap-rail {
  width: 246px; flex: none;
  background: #f4f7fc;
  display: flex; flex-direction: column;
  padding: 14px 12px;
}

.ap-workspace {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 6px 4px 14px; border-bottom: 1px solid #e6ebf3;
  text-decoration: none; color: inherit;
  background: none; border-top: 0; border-inline: 0; cursor: pointer;
  font-family: inherit; text-align: left;
}
.ap-workspace-chev { transition: transform .15s ease; }
.ap-workspace[aria-expanded="true"] .ap-workspace-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .ap-workspace-chev { transition: none; } }
.ap-workspace-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
}
.ap-workspace-text { line-height: 1.15; min-width: 0; }
.ap-workspace-name {
  display: block; font-weight: 800; font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-workspace-sub { display: block; font-size: 11.5px; color: var(--ck-soft); }
.ap-workspace-chev { margin-left: auto; color: var(--ck-faint); font-size: 13px; }

.ap-nav-group { margin-top: 14px; background: #eaf0f8; border-radius: 14px; padding: 6px; }
.ap-nav-group-plain { background: none; padding: 0 4px; margin-top: 12px; }
.ap-nav-label {
  font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ck-faint); padding: 4px 8px 8px; margin: 0;
}

.ap-nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 10px;
  color: var(--ck-muted); font-weight: 600; font-size: 13.5px;
  text-decoration: none;
}
.ap-nav-item:hover { color: var(--ck-ink); }
.ap-nav-item.is-active {
  background: #fff; color: var(--ck-ink); font-weight: 800;
  box-shadow: 0 4px 12px -6px rgba(40, 60, 110, .25);
}
.ap-nav-group-plain .ap-nav-item.is-active { background: #eaf0f8; box-shadow: none; }
.ap-nav-icon { font-size: 15px; opacity: .85; flex: none; }
.ap-nav-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ap-nav-count {
  margin-left: auto; border-radius: 20px; min-width: 22px; text-align: center;
  padding: 1px 7px; font-size: 12px; font-weight: 800; color: #fff; flex: none;
}
.ap-nav-count-inbox { background: var(--ck-amber); }
.ap-nav-count-waiting { background: #e6a63a; }
.ap-nav-count-reply { background: var(--ck-green); }
.ap-nav-count-sent { background: #c9d2e0; }
.ap-nav-count-fixed { background: #a9b6cd; }
.ap-nav-count-skipped { background: #c2c8d4; }

/* split legs ---------------------------------------------------------- */
.ap-legs { list-style: none; margin: 0 0 10px; padding: 0; border: 1px solid var(--ck-line); border-radius: 11px; overflow: hidden; }
.ap-leg { display: flex; align-items: center; gap: 12px; padding: 10px 13px; font-size: 13px; }
.ap-leg + .ap-leg { border-top: 1px solid var(--ck-line); }
.ap-leg-category { flex: 1; min-width: 0; }
.ap-leg-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.ap-leg.is-loose { background: #fff8e6; }
.ap-leg.is-loose .ap-leg-category { color: #8a6100; font-weight: 700; }
.ap-legs-note { margin: 0 0 4px; font-size: 12px; line-height: 1.5; color: var(--ck-muted); }
.ap-nav-count.is-zero { background: #e9edf1; color: var(--ck-ghost); }

.ap-nav-tag {
  margin-left: auto; font-size: 10px; font-weight: 800;
  color: var(--ck-faint); background: var(--ck-line);
  border-radius: 20px; padding: 3px 8px; letter-spacing: .04em; flex: none;
}

.ap-rail-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid #e6ebf3; }
/* Ambient status, at the foot of the rail. Deliberately not a button: it used
   to be one, which made a green heading-looking thing sit above the nav and
   quietly do something when clicked. */
.ap-sync-status {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 8px 6px 0 10px;
  border-top: 1px solid #e6ebf3;
  font-size: 11.5px; font-weight: 700; color: #1f9d6a;
}
.ap-sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ck-green); flex: none; }
.ap-sync-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-sync-form { margin-left: auto; flex: none; display: flex; }
.ap-sync-now {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 13px; line-height: 1; padding: 5px; border-radius: 8px;
  opacity: .65;
}
.ap-sync-now:hover { opacity: 1; background: #eaf0f8; }
.ap-sync-now:focus-visible { outline: 2px solid #b9c9f5; outline-offset: 1px; }
.ap-account-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; flex: none; }
.ap-account-nav form { display: contents; }
.ap-account-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 10px;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--ck-soft); text-decoration: none;
  background: none; border: none; cursor: pointer; text-align: left;
}
.ap-account-item:hover { color: var(--ck-ink); }
.ap-account-item.is-active { background: #eaf0f8; color: var(--ck-ink); font-weight: 800; }

/* ============================ MIDDLE LIST ============================ */

.ap-main {
  flex: 1; min-width: 0; background: #fff;
  display: flex; flex-direction: column;
}
.ap-main > form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ap-main-plain { display: block; overflow-y: auto; padding: 26px 30px; }

.ap-list-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px 14px; }
.ap-list-icon { font-size: 19px; }
.ap-list-title { font-size: 20px; font-weight: 800; letter-spacing: -.3px; margin: 0; }
.ap-search { margin-left: auto; }
.ap-search-field {
  border: 1px solid #e6ebf3; background: #fbfcfe; border-radius: 11px;
  padding: 9px 13px; font-size: 12.5px; font-weight: 600; width: 200px;
  font-family: inherit; color: inherit;
}
.ap-search-field:focus { outline: 2px solid #b9c9f5; outline-offset: 1px; }

.ap-chips { display: flex; align-items: center; gap: 7px; padding: 0 24px 16px; flex-wrap: wrap; }
.ap-chip-filter {
  padding: 7px 13px; border-radius: 11px; background: #f4f7fc;
  color: var(--ck-muted); font-size: 12.5px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.ap-chip-filter:hover { color: var(--ck-ink); }
.ap-chip-filter.is-active {
  background: #fff; color: var(--ck-ink); font-weight: 800;
  box-shadow: 0 4px 12px -6px rgba(40, 60, 110, .35);
}

.ap-selection {
  display: flex; align-items: center; gap: 12px; padding: 11px 24px;
  background: #eef4ff; border-top: 1px solid #dbe6ff; border-bottom: 1px solid #dbe6ff;
  flex-wrap: wrap;
}
.ap-selection[hidden] { display: none; }
.ap-selection-count { font-size: 13px; font-weight: 800; color: #1f49b8; }
.ap-selection-total { font-size: 12.5px; color: #5b76c4; }
.ap-selection-actions { margin-left: auto; display: flex; gap: 8px; }

/* rows -------------------------------------------------------------- */

.ap-rows { flex: 1; overflow-y: auto; min-height: 0; }

.ap-row { display: flex; align-items: center; gap: 12px; padding-left: 24px; border-bottom: 1px solid #f2f4f8; }
.ap-row:hover:not(.ap-row-head) { background: #fbfcfe; }
.ap-row.is-active { background: #eef4ff; box-shadow: inset 3px 0 0 #2f6bff; }

.ap-row-head {
  background: #fbfcfe; border-top: 1px solid var(--ck-line);
  font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--ck-faint);
}
.ap-row-head .ap-row-link { padding-block: 9px; cursor: default; }
.ap-row-head .ap-cell-merchant, .ap-row-head .ap-cell-date { font-weight: 800; }

.ap-row-link {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: 62px 32px minmax(0, 1fr) 112px 108px 14px;
  align-items: center; gap: 12px;
  padding: 11px 24px 11px 0;
  text-decoration: none; color: inherit; cursor: pointer;
}

.ap-check { display: flex; align-items: center; flex: none; cursor: pointer; }
.ap-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.ap-check-box {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid #c6cede; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ap-check input:checked + .ap-check-box { background: #2f6bff; border-color: #2f6bff; }
.ap-check input:checked + .ap-check-box::after {
  content: "✓"; color: #fff; font-size: 11px; font-weight: 800;
}
.ap-check input:focus-visible + .ap-check-box { outline: 2px solid #b9c9f5; outline-offset: 2px; }

.ap-cell-date { font-size: 12px; color: var(--ck-soft); font-weight: 600; }
.ap-avatar {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
}
.ap-avatar-blue { background: var(--ck-tint-blue); color: var(--ck-blue); }
.ap-avatar-violet { background: #eae7f6; color: #5a4fb0; }
.ap-avatar-orange { background: var(--ck-tint-orange); color: #d5622a; }
.ap-avatar-pink { background: #f6e9ee; color: #b23a5e; }
.ap-avatar-green { background: #e6f2ec; color: #2f7d55; }
.ap-avatar-navy { background: #eef2fb; color: #3a55a8; }

.ap-cell-merchant { min-width: 0; }
.ap-merchant {
  display: block; font-weight: 700; font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-submeta {
  display: block; font-size: 10.5px; color: var(--ck-faint); letter-spacing: .03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-cell-amount { text-align: right; font-weight: 800; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ap-chevron { color: #c6cede; font-size: 14px; }

.ap-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 800; padding: 4px 10px;
  border-radius: 20px; white-space: nowrap;
}
.ap-chip-needs { background: #f0f1f4; color: var(--ck-soft); }
.ap-chip-waiting { background: #fbeed6; color: #b8801f; }
.ap-chip-reply { background: var(--ck-mint-chip); color: #12a575; }
.ap-chip-sent { background: var(--ck-line); color: #7a8699; }
.ap-chip-fixed { background: #eef2fb; color: #5b6f9c; }

/* ============================ BUTTONS ============================ */

.ap-btn {
  border: none; cursor: pointer; font-family: inherit;
  font-weight: 800; font-size: 12.5px; text-align: center; text-decoration: none;
  padding: 7px 14px; border-radius: 9px;
}
.ap-btn:disabled { opacity: .45; cursor: default; }
.ap-btn-blue { background: #2f6bff; color: #fff; }
.ap-btn-blue:hover:not(:disabled) { background: #1f55d8; color: #fff; }
.ap-btn-green { background: var(--ck-green-grad); color: #fff; box-shadow: 0 8px 18px -8px rgba(18, 181, 126, .7); }
.ap-btn-green:hover { color: #fff; filter: brightness(1.04); }
.ap-btn-navy { background: var(--ck-navy); color: #fff; }
.ap-btn-navy:hover { color: #fff; background: #16376f; }
.ap-btn-ghost { background: #fff; border: 1px solid #cdd9f5; color: var(--ck-muted); font-weight: 700; }
.ap-btn-ghost:hover { color: var(--ck-ink); }
.ap-btn-outline {
  background: #fff; border: 1.5px solid var(--ck-field-line);
  color: var(--ck-blue); font-size: 13px;
}
.ap-btn-outline:hover { border-color: #b9c9f5; }
.ap-btn-block { display: block; width: 100%; padding: 11px; border-radius: 11px; }
.ap-btn-grow { flex: 1; padding: 12px; border-radius: 11px; font-size: 13.5px; }

/* ============================ EMPTY STATES ============================ */

.ap-empty { padding: 70px 30px; text-align: center; }
.ap-empty-compact { padding: 48px 10px; }
.ap-empty-icon { font-size: 34px; }
.ap-empty-title { font-size: 16px; font-weight: 800; margin: 14px 0 0; }
.ap-empty-body {
  font-size: 13px; color: var(--ck-soft); margin: 7px auto 0;
  line-height: 1.5; max-width: 340px;
}
.ap-empty .ap-btn { margin-top: 18px; }

/* ============================ RIGHT PANEL ============================ */

.ap-detail {
  width: 380px; flex: none; background: #fff;
  display: flex; flex-direction: column; min-height: 0;
}

.ap-detail-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 34px; text-align: center;
}
.ap-detail-empty-icon {
  width: 54px; height: 54px; border-radius: 15px; background: #f4f7fc;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.ap-detail-empty-title { font-size: 15.5px; font-weight: 800; margin: 16px 0 0; }
.ap-detail-empty-body { font-size: 12.5px; color: var(--ck-soft); margin: 8px 0 0; line-height: 1.55; }

.ap-stats {
  margin-top: 22px; width: 100%; background: #fbfcfe;
  border: 1px solid var(--ck-line); border-radius: 14px;
  padding: 14px 16px; text-align: left;
}
.ap-stats-label { font-size: 11px; font-weight: 800; color: var(--ck-faint); letter-spacing: .05em; margin: 0; }
.ap-stat { display: flex; align-items: center; gap: 10px; margin-top: 9px; font-size: 13px; }
.ap-stat span { font-weight: 700; color: var(--ck-muted); }
.ap-stat strong { margin-left: auto; font-weight: 800; }

/* detail header ------------------------------------------------------ */

.ap-detail-head { background: linear-gradient(150deg, #455499 0%, #3a4790 100%); padding: 18px 20px 16px; color: #fff; }
.ap-detail-id { display: flex; align-items: center; gap: 13px; }
.ap-detail-avatar {
  width: 44px; height: 44px; border-radius: 11px; flex: none;
  background: #fff; color: #5a4fb0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px;
}
.ap-detail-titles { flex: 1; min-width: 0; }
.ap-detail-merchant {
  display: block; font-weight: 800; font-size: 17px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-detail-sub { display: block; font-size: 12.5px; opacity: .85; margin-top: 1px; }
.ap-detail-close {
  color: rgba(255, 255, 255, .75); font-size: 15px; text-decoration: none;
  flex: none; padding: 4px 6px; border-radius: 7px;
}
.ap-detail-close:hover { color: #fff; background: rgba(255, 255, 255, .16); }

.ap-tabs { display: flex; gap: 6px; margin-top: 14px; background: rgba(255, 255, 255, .12); border-radius: 11px; padding: 4px; }
.ap-tab {
  flex: 1; text-align: center; padding: 7px; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .8); text-decoration: none;
}
.ap-tab:hover { color: #fff; }
.ap-tab.is-active { background: #fff; color: var(--ck-ink); font-weight: 800; }

/* detail body -------------------------------------------------------- */

/* The form wraps body and footer, so it has to pass the panel's height down --
   without this the body never gets a height to scroll within, and anything
   taller than the panel (an answer card, a long split) is cut off. */
.ap-detail-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ap-detail-body { flex: 1; overflow-y: auto; padding: 16px 20px; min-height: 0; }

.ap-facts { margin: 0; }
.ap-fact { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f2f4f8; }
.ap-fact dt { width: 74px; flex: none; color: var(--ck-faint); font-size: 12.5px; font-weight: 700; }
.ap-fact dd { margin: 0; font-size: 13px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.ap-field-label {
  font-size: 11px; font-weight: 800; color: var(--ck-faint);
  letter-spacing: .04em; text-transform: uppercase; margin: 16px 0 7px;
}

.ap-select, .ap-input, .ap-textarea {
  width: 100%; font-family: inherit; color: inherit;
  border: 1.5px solid var(--ck-line-strong); border-radius: 11px;
  padding: 11px 12px; font-size: 13px; font-weight: 600; background: #fff;
}
.ap-select { border-color: #b9c9f5; background: #f3f7ff; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.ap-input { margin-top: 8px; }
.ap-textarea { height: 130px; line-height: 1.55; resize: none; font-weight: 500; }
.ap-select:focus, .ap-input:focus, .ap-textarea:focus { outline: 2px solid #b9c9f5; outline-offset: 1px; }
.ap-detail-body form .ap-btn-block { margin-top: 12px; }

.ap-reply-card { margin-top: 16px; background: #f0faf6; border: 1px solid var(--ck-mint-line); border-radius: 14px; padding: 13px 14px; }
.ap-reply-head { display: flex; align-items: center; gap: 8px; }
.ap-reply-avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--ck-green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}
.ap-reply-avatar-you { background: var(--ck-blue); }
.ap-reply-who { font-size: 12px; font-weight: 800; color: #178a63; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-reply-when { margin-left: auto; font-size: 11px; color: var(--ck-soft); flex: none; }
.ap-reply-body { font-size: 13px; line-height: 1.5; color: #33403d; margin: 8px 0 0; white-space: pre-wrap; }

.ap-waiting-card { margin-top: 16px; background: #fff8ed; border: 1px solid var(--ck-warn-line); border-radius: 14px; padding: 13px 14px; }
.ap-waiting-title { font-size: 12px; font-weight: 800; color: #b26a00; margin: 0; }
.ap-waiting-body { font-size: 12.5px; color: #7a6a52; margin: 6px 0 0; line-height: 1.5; }
.ap-waiting-close { display: inline-block; margin-top: 9px; font-size: 12px; font-weight: 700; color: #b26a00; }
.ap-waiting-close:hover { color: #8a5200; }

.ap-thread-item { margin-bottom: 12px; background: #fbfcfe; border: 1px solid var(--ck-line); border-radius: 14px; padding: 13px 14px; }
.ap-thread-item .ap-reply-who { color: var(--ck-ink); }
.ap-thread-sent { background: #f3f7ff; border-color: #dbe6ff; }

.ap-detail-foot {
  display: flex; gap: 10px; padding: 14px 20px;
  border-top: 1px solid var(--ck-line); background: #fbfcfe;
}
.ap-detail-foot form { display: contents; }
.ap-detail-foot .ap-btn-ghost { flex: none; padding: 12px 16px; border-radius: 11px; font-size: 13.5px; border-color: var(--ck-line-strong); }

/* compose ------------------------------------------------------------ */

.ap-compose-head { background: linear-gradient(150deg, #3358d4, #2140a8); padding: 18px 20px; color: #fff; }
.ap-compose-title { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; }
.ap-compose-title .ap-detail-close { margin-left: auto; }
.ap-compose-sub { font-size: 12.5px; opacity: .85; margin: 3px 0 0; }
.ap-compose-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ap-compose-body { flex: 1; overflow-y: auto; padding: 16px 20px; min-height: 0; }
.ap-compose-list { border: 1px solid #e6e8ec; border-radius: 11px; overflow: hidden; }
.ap-compose-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid #f4f5f8; font-size: 12.5px; font-weight: 700;
}
.ap-compose-item:last-child { border-bottom: none; }
.ap-compose-note {
  margin-top: 10px; background: var(--ck-surface-blue); border-radius: 11px;
  padding: 11px 13px; font-size: 11.5px; line-height: 1.5; color: var(--ck-muted);
}
.ap-contact-chips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ap-contact-chip {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid #e6ebf3; border-radius: 20px; padding: 4px 10px 4px 5px;
  background: #fbfcfe; cursor: pointer; font-family: inherit;
  font-size: 11.5px; font-weight: 700; color: var(--ck-muted);
}
.ap-contact-chip:hover { border-color: #b9c9f5; color: var(--ck-ink); }
.ap-contact-initial {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--ck-blue); color: #fff; font-size: 9.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ============================ AUTOMATIONS ============================ */

.ap-auto-head { display: flex; align-items: center; gap: 11px; }
.ap-auto-head .ap-nav-tag { margin-left: 0; }
.ap-auto-blurb { font-size: 13.5px; color: var(--ck-soft); margin: 8px 0 0; max-width: 560px; line-height: 1.55; }
.ap-auto-zero {
  margin-top: 24px; border: 1.5px dashed #d7e0ee; border-radius: 18px;
  background: #fbfcfe; padding: 30px; text-align: center;
}
.ap-auto-zero-title { font-size: 17px; font-weight: 800; margin: 14px 0 0; }
.ap-auto-zero-body {
  font-size: 13px; color: var(--ck-soft); margin: 8px auto 0;
  line-height: 1.55; max-width: 420px;
}
.ap-auto-label {
  margin: 26px 0 12px; font-size: 11px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ck-faint);
}
.ap-auto-preview { display: flex; flex-direction: column; gap: 11px; opacity: .6; pointer-events: none; }
.ap-auto-card {
  display: flex; align-items: center; gap: 13px;
  border: 1px solid var(--ck-line); border-radius: 14px; padding: 14px 16px; background: #fff;
}
.ap-auto-icon {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.ap-auto-icon-orange { background: var(--ck-tint-orange); color: #d5622a; }
.ap-auto-icon-blue { background: #eef2fb; color: #3a55a8; }
.ap-auto-icon-pink { background: #f6e9ee; color: #b23a5e; }
.ap-auto-icon-amber { background: #fbeed6; color: #b26a00; }
.ap-auto-icon-green { background: #e7f4ea; color: #2f8f4f; }
.ap-auto-text { min-width: 0; }
.ap-auto-title { display: block; font-size: 13.5px; font-weight: 800; }
.ap-auto-body { display: block; font-size: 12px; color: var(--ck-soft); margin-top: 2px; }
.ap-auto-action {
  margin-left: auto; flex: none; font-size: 11.5px; font-weight: 800;
  color: var(--ck-faint); background: #f4f7fc; border-radius: 20px; padding: 5px 11px;
}

/* ============================ SCROLLBARS ============================ */

.scroll::-webkit-scrollbar { width: 10px; }
.scroll::-webkit-scrollbar-thumb {
  background: #dfe5ee; border-radius: 6px;
  border: 3px solid transparent; background-clip: content-box;
}

/* ============================ RESPONSIVE ============================ */

@media (max-width: 1180px) {
  .ap-rail { width: 68px; padding: 14px 8px; }
  .ap-rail .ap-nav-text, .ap-rail .ap-nav-label, .ap-rail .ap-nav-count,
  .ap-rail .ap-nav-tag, .ap-rail .ap-workspace-text, .ap-rail .ap-workspace-chev,
  .ap-rail .ap-sync-text { display: none; }
  .ap-workspace, .ap-nav-item, .ap-account-item { justify-content: center; }
  .ap-sync-status { justify-content: center; padding: 8px 0 0; }
  .ap-sync-form { margin-left: 0; }
  .ap-row-link { grid-template-columns: 32px minmax(0, 1fr) 100px 96px; }
  .ap-row-link .ap-cell-date, .ap-row-head .ap-cell-date, .ap-chevron { display: none; }
  .ap-row-head .ap-row-link > span:nth-child(2) { display: none; }
}

@media (max-width: 980px) {
  .ap-detail {
    position: fixed; inset: 22px; width: auto; z-index: 20;
    box-shadow: 0 30px 70px -20px rgba(40, 60, 110, .6);
  }
  .ap-detail:not(:has(.ap-detail-head)):not(:has(.ap-compose-head)) { display: none; }
}

@media (max-width: 720px) {
  .ap-shell { padding: 10px; gap: 10px; }
  .ap-detail { inset: 10px; }
  .ap-list-head { flex-wrap: wrap; padding: 14px 16px 10px; }
  .ap-search { margin-left: 0; width: 100%; }
  .ap-search-field { width: 100%; }
  .ap-chips { padding: 0 16px 12px; }
  .ap-row { padding-left: 16px; }
  .ap-row-link { padding-right: 16px; grid-template-columns: 32px minmax(0, 1fr) 92px; }
  .ap-row-link .ap-cell-status { display: none; }
  .ap-selection { padding: 11px 16px; }
}

/* The shell owns the full viewport, so flash messages float as the design's
   toast rather than pushing the panels down. */
body.app .flash {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ck-navy); color: #fff; border-radius: 13px;
  padding: 13px 20px; font-size: 13px; font-weight: 700; z-index: 50;
  box-shadow: 0 18px 40px -14px rgba(15, 42, 92, .7);
  max-width: min(560px, calc(100vw - 40px));
}
body.app .flash { display: flex; align-items: center; gap: 14px; }
body.app .flash form { display: contents; }
body.app .flash-alert { background: #9f1239; }

/* The way back from a one-click action, so it has to read as an action while
   staying quieter than the message it sits beside. */
.flash-undo {
  background: rgba(255, 255, 255, .16); color: #fff; border: 0;
  border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 12px;
  font-weight: 800; cursor: pointer;
}
.flash-undo:hover { background: rgba(255, 255, 255, .28); }


/* ======================= BUDGET SWITCHER POPOVER ======================= */

/* Solid avatar fills, per the design's switcher palette. */
.ap-tint-blue   { background: #3358d4; }
.ap-tint-clay   { background: #8a4b2a; }
.ap-tint-green  { background: #2f7d55; }
.ap-tint-rose   { background: #b23a5e; }
.ap-tint-violet { background: #5a4fb0; }
.ap-tint-orange { background: #d5622a; }
.ap-tint-navy   { background: #0f2a5c; }
.ap-tint-ink    { background: #2b2f36; }

.ap-menu-layer { position: absolute; inset: 0; z-index: 30; }
.ap-menu-layer[hidden] { display: none; }
.ap-menu-backdrop {
  position: absolute; inset: 0;
  background: none; border: none; padding: 0; cursor: default;
}

.ap-menu {
  position: absolute; left: 26px; top: 84px; width: 288px;
  background: #fff; border: 1px solid var(--ck-line); border-radius: 16px;
  box-shadow: 0 24px 54px -18px rgba(20, 34, 66, .5);
  padding: 8px; overflow: hidden;
}
.ap-menu-label {
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ck-faint);
  padding: 8px 10px 6px; margin: 0;
}

.ap-menu-budget {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 10px; border-radius: 12px;
  text-decoration: none; color: inherit;
}
.ap-menu-budget:hover { background: var(--ck-surface-blue); color: inherit; }
.ap-menu-budget.is-active { background: #f3f7ff; }
.ap-menu-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
}
.ap-menu-budget-name {
  font-size: 13.5px; font-weight: 700; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-menu-budget.is-active .ap-menu-budget-name { font-weight: 800; }
.ap-menu-tick { margin-left: auto; flex: none; color: #2f6bff; font-size: 13px; font-weight: 800; }

.ap-menu-rule { height: 1px; background: #f2f4f8; margin: 8px 6px; border: 0; }

.ap-menu-action {
  display: flex; align-items: center; gap: 11px;
  padding: 10px; border-radius: 12px;
  text-decoration: none; color: inherit;
}
.ap-menu-action:hover { background: var(--ck-surface-blue); color: inherit; }
.ap-menu-tile {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.ap-menu-tile-add { background: #eef4ff; color: #2f6bff; font-size: 17px; font-weight: 700; }
.ap-menu-tile-quiet { background: var(--ck-surface-blue); color: var(--ck-muted); font-size: 15px; }
.ap-menu-action-title { display: block; font-size: 13px; font-weight: 800; color: #2f6bff; }
.ap-menu-action-quiet { color: var(--ck-muted); }
.ap-menu-action-sub { display: block; font-size: 11.5px; color: var(--ck-faint); }

@media (max-width: 1180px) {
  .ap-menu { left: 22px; }
}


/* ========================= CONTACTS / MEMBERS ========================= */

.ap-people { flex: 1; overflow-y: auto; padding: 26px 30px; }
.ap-people-head { display: flex; align-items: center; gap: 12px; }
.ap-people-cta { margin-left: auto; padding: 9px 15px; border-radius: 11px; flex: none; }
.ap-sync-status.is-paused .ap-sync-dot { background: var(--ap-amber, #d97706); }
.ap-sync-paused { color: var(--ap-amber, #d97706); text-decoration: none; }
.ap-sync-paused:hover { text-decoration: underline; }
.ap-people-cta-form { margin-left: auto; }
.ap-people-cta-form .ap-people-cta { margin-left: 0; }
.ap-people-blurb {
  font-size: 13.5px; color: var(--ck-soft); margin: 8px 0 0;
  max-width: 560px; line-height: 1.55;
}
.ap-people-rows { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.ap-people-empty { font-size: 13.5px; color: var(--ck-soft); margin: 0; }
.ap-people-foot {
  margin: 20px 0 0; background: var(--ck-surface-blue); border-radius: 12px;
  padding: 13px 15px; font-size: 12.5px; line-height: 1.55; color: var(--ck-muted);
}

.ap-person {
  display: flex; align-items: center; gap: 13px;
  border: 1px solid var(--ck-line); border-radius: 14px;
  padding: 14px 16px; background: #fff;
}
.ap-person-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
}
.ap-person-id { min-width: 0; }
.ap-person-name {
  display: block; font-size: 14px; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-person-email {
  display: block; font-size: 12px; color: var(--ck-faint); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-person-side { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
.ap-person-meta { font-size: 12px; color: var(--ck-soft); font-weight: 600; }

.ap-role {
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  border-radius: 20px; padding: 4px 10px;
}
.ap-role-owner { background: #eef4ff; color: #2f6bff; }
.ap-role-member { background: var(--ck-surface-blue); color: var(--ck-soft); }

/* ---------- pending access requests ---------- */
/* .ap-request, not .ap-person: somebody waiting is not a member, and the
   member count should not include them. */
.ap-people-subhead {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ck-faint); margin: 4px 0 -4px;
}
.ap-request {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid #f0e2cd; border-radius: 13px; background: #fffdf8;
}
.ap-request-actions { display: flex; gap: 8px; flex: none; }
.ap-request-actions .ap-btn { padding: 7px 12px; font-size: 12px; }
.ap-role-pending { background: #fdf3e5; color: var(--ap-amber, #d97706); }

.ap-past-requests { margin-top: 14px; }
.ap-past-requests summary { font-size: 12px; color: var(--ck-muted); cursor: pointer; }
.ap-past-requests summary:hover { color: var(--ck-ink); }
.ap-past-request { font-size: 12.5px; color: var(--ck-muted); margin: 8px 0 0; }

/* The account nav only ever held an icon and a label, so a count needs its own
   slot -- unlike the Review nav above, which has .ap-nav-count already. */
.ap-account-count {
  margin-left: auto; flex: none; min-width: 19px; text-align: center;
  padding: 1px 6px; border-radius: 20px;
  font-size: 11px; font-weight: 800; color: #fff;
  background: var(--ap-amber, #d97706);
}

/* the ⋮ row menu ----------------------------------------------------- */

.ap-row-menu { position: relative; display: inline-flex; }
.ap-row-menu-trigger {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  font-family: inherit; font-size: 16px; line-height: 1; color: #c6cede;
}
.ap-row-menu-trigger:hover { color: var(--ck-muted); }
.ap-row-menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 25;
  min-width: 168px; background: #fff;
  border: 1px solid var(--ck-line); border-radius: 12px;
  box-shadow: 0 24px 54px -18px rgba(20, 34, 66, .5);
  padding: 6px; display: flex; flex-direction: column;
}
.ap-row-menu-list[hidden] { display: none; }
.ap-row-menu-list form { display: contents; }
.ap-row-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: 8px;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--ck-body); text-decoration: none;
  background: none; border: none; cursor: pointer;
}
.ap-row-menu-item:hover { background: var(--ck-surface-blue); color: var(--ck-ink); }
.ap-row-menu-danger { color: #b0342c; }
.ap-row-menu-danger:hover { background: #fdf1f0; color: #b0342c; }

@media (max-width: 720px) {
  .ap-people { padding: 16px; }
  .ap-person { flex-wrap: wrap; }
  .ap-person-side { margin-left: 49px; }
}

/* ---------------- account monitoring toggle ---------------- */

.ap-toggle-form { display: flex; }
.ap-toggle {
  width: 38px; height: 22px; border-radius: 20px; flex: none;
  background: var(--ck-line-strong); border: none; cursor: pointer;
  display: flex; align-items: center; padding: 2px;
  transition: background .15s ease;
}
.ap-toggle.is-on { background: var(--ck-green); }
.ap-toggle-knob {
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: margin-left .15s ease;
}
.ap-toggle.is-on .ap-toggle-knob { margin-left: 16px; }
@media (prefers-reduced-motion: reduce) {
  .ap-toggle, .ap-toggle-knob { transition: none; }
}

/* The "Not clearing" filter chip shares the waiting palette: it's the same
   shape of problem -- something outstanding rather than something wrong. */
.ap-chip-filter.is-amber.is-active { color: var(--ck-amber-ink); }

/* "Why this is here" -- the open classifications, in the detail panel. */
.ap-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ap-reason {
  background: var(--ck-surface-blue); border-radius: 12px; padding: 11px 13px;
}
.ap-reason-label {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ck-blue);
}
.ap-reason-detail {
  display: block; font-size: 12.5px; line-height: 1.5; color: var(--ck-muted); margin-top: 4px;
}

/* Checks settings */
.ap-check-description {
  display: block; font-size: 12px; color: var(--ck-faint); margin-top: 2px; line-height: 1.45;
}
.ap-check-count {
  font-size: 12px; font-weight: 700; color: var(--ck-blue); text-decoration: none; white-space: nowrap;
}
.ap-check-count.is-zero { color: var(--ck-faint); }
.ap-check-count:hover { color: var(--ck-blue-dark); }

/* Skip sits left, but comes second in the markup so that pressing Enter in the
   panel sends to YNAB rather than skipping the transaction. */
.ap-detail-foot .ap-btn-ghost { order: -1; }

/* Asking is a real action rather than a way out, so it reads in the app's blue
   while keeping the quiet weight that stops it competing with Send. */
.ap-detail-ask { color: var(--ck-blue); border-color: #cdd9f5; }
.ap-detail-ask:hover { color: var(--ck-blue-dark); border-color: var(--ck-blue); }

/* Sign out is a form, so it needs to lay out like the menu's links. */
.ap-menu-form { display: block; }
.ap-menu-form .ap-menu-action { width: 100%; text-align: left; background: none; border: none;
  cursor: pointer; font-family: inherit; }

/* ---------- two-step sign-in nudge ---------- */

.ap-nudge {
  display: flex; align-items: flex-start; gap: 13px;
  margin: 16px 24px 0; padding: 14px 16px;
  background: var(--ck-warn-bg); border: 1px solid var(--ck-warn-line);
  border-radius: 13px;
}
.ap-nudge-icon { font-size: 17px; line-height: 1.3; }
.ap-nudge-body { flex: 1; min-width: 0; }
.ap-nudge-title { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--ck-ink); }
.ap-nudge-note { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ck-muted); }
.ap-nudge-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.ap-nudge-dismiss { display: contents; }

.ap-menu-flag {
  margin-left: auto; flex: none;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
  color: var(--ck-amber-ink); background: var(--ck-warn-bg);
  border: 1px solid var(--ck-warn-line); border-radius: 999px;
  padding: 2px 8px;
}

@media (max-width: 900px) {
  .ap-nudge { flex-wrap: wrap; margin: 12px 16px 0; }
  .ap-nudge-actions { width: 100%; }
}

/* ---------- per-transaction questions + the drafts tray ---------- */

.ap-compose-ask { flex-direction: column; align-items: stretch; gap: 7px; }
.ap-compose-item-head { display: flex; justify-content: space-between; gap: 10px; }
.ap-question { height: auto; min-height: 54px; resize: vertical; font-size: 12.5px; margin: 0; }
.ap-note-field { height: 72px; }
.ap-field-optional { font-weight: 600; color: var(--ck-faint); text-transform: none; letter-spacing: 0; margin-left: 4px; }
.ap-compose-remove {
  align-self: flex-end; border: none; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--ck-soft);
}
.ap-compose-remove:hover { color: #c0392b; }
.ap-compose-discard { align-self: center; font-size: 12px; font-weight: 700; color: var(--ck-soft); }

.ap-drafts { display: flex; flex-direction: column; gap: 8px; margin: 16px 24px 0; }
.ap-draft {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: 13px;
  background: var(--ck-surface-blue); border: 1px solid #dbe6ff;
  font-size: 13px; color: var(--ck-ink); text-decoration: none;
}
.ap-draft:hover { border-color: #b9c9f5; }
.ap-draft-title { font-weight: 800; }
.ap-draft-sub { color: var(--ck-muted); font-size: 12px; }
.ap-draft-cta { margin-left: auto; font-weight: 800; color: var(--ck-blue); flex: none; }
.ap-chip-queued { background: #e7eeff; color: #3358d4; }

.ap-answer-card { margin-top: 16px; background: #f0faf6; border: 1px solid var(--ck-mint-line); border-radius: 14px; padding: 13px 14px; }
.ap-answer-q { font-size: 12px; color: var(--ck-muted); margin: 8px 0 0; }

@media (max-width: 900px) {
  .ap-drafts { margin: 12px 16px 0; }
}

/* ---------- review & send modal ---------- */

.ap-modal {
  width: 620px; max-width: calc(100vw - 32px);
  max-height: min(86vh, 820px);
  padding: 0; border: none; border-radius: 20px;
  box-shadow: 0 40px 90px -30px rgba(20, 35, 80, .55);
  color: var(--ck-ink); font-family: var(--ck-font);
}
.ap-modal[open] { display: flex; }
.ap-modal::backdrop { background: rgba(22, 32, 60, .38); }
.ap-modal-form { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; }
.ap-modal-head { display: flex; align-items: center; padding: 18px 22px 0; }
.ap-modal-title { margin: 0; font-size: 17px; font-weight: 800; }
.ap-modal-close {
  margin-left: auto; border: none; background: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 9px; font-size: 15px; color: var(--ck-soft);
}
.ap-modal-close:hover { background: #f1f3f7; color: var(--ck-ink); }
.ap-modal-tabs { display: flex; gap: 6px; padding: 14px 22px 0; flex-wrap: wrap; }
.ap-modal-tab {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--ck-line); background: #fbfcfe; border-radius: 999px;
  padding: 6px 12px; font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--ck-muted); cursor: pointer;
}
.ap-modal-tab:hover { border-color: #b9c9f5; color: var(--ck-ink); }
.ap-modal-tab.is-active { background: var(--ck-blue); border-color: var(--ck-blue); color: #fff; cursor: default; }
.ap-modal-tab-count { font-size: 11px; opacity: .75; }
.ap-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 22px 8px; }
.ap-envelope { margin: 0; border-bottom: 1px solid var(--ck-line); padding-bottom: 10px; }
.ap-envelope div { display: flex; gap: 10px; padding: 3px 0; font-size: 13px; }
.ap-envelope dt { width: 58px; flex: none; color: var(--ck-soft); font-weight: 700; }
.ap-envelope dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ap-modal-greeting { margin: 16px 0 8px; font-size: 13.5px; }
.ap-review-items { list-style: none; counter-reset: ap-review; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ap-review-item {
  counter-increment: ap-review; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--ck-line); border-radius: 13px; padding: 12px 13px; background: #fbfcfe;
}
.ap-review-item-head { display: flex; gap: 10px; align-items: baseline; }
.ap-review-payee { font-weight: 800; font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
.ap-review-payee::before { content: counter(ap-review) ". "; color: var(--ck-faint); }
.ap-review-amount { margin-left: auto; font-weight: 800; font-size: 13.5px; flex: none; }
.ap-review-meta { margin: 0; font-size: 12px; color: var(--ck-soft); }
.ap-modal-foot {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  padding: 14px 22px; border-top: 1px solid var(--ck-line); background: #fbfcfe;
}
.ap-modal-foot .ap-compose-discard { margin-right: auto; }
.ap-modal-foot .ap-btn { padding: 11px 18px; border-radius: 11px; font-size: 13.5px; }

@media (max-width: 720px) {
  .ap-modal { max-height: calc(100vh - 20px); border-radius: 16px; }
  .ap-modal-head, .ap-modal-tabs, .ap-modal-body, .ap-modal-foot { padding-left: 16px; padding-right: 16px; }
}
/* The modal's frame sits in the shell's flex row; it must not take a gap slot. */
turbo-frame#modal { display: contents; }
.ap-modal-head { align-items: flex-start; }
.ap-modal-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--ck-soft); line-height: 1.45; }
.ap-modal-flash {
  margin: 12px 22px 0; padding: 9px 12px; border-radius: 10px;
  background: #f0faf6; border: 1px solid var(--ck-mint-line); color: #178a63;
  font-size: 12.5px; font-weight: 700;
  animation: ap-modal-flash-out .4s ease 3.5s forwards;
}
@keyframes ap-modal-flash-out { to { opacity: 0; } }