/* ============================================================================
   KERNOL client portal (kp-*)
   The pet owner's surface: calm, roomy, top-navigation, desktop and phone in
   equal measure. Scoped to body.kp-app (the portal layout) so the back office
   and the public pages are untouched.

   Same discipline as backoffice.css: this file is the COMPONENT layer and holds
   no colour, no radius and no type scale of its own. Every value comes from
   kernol.css. Re-tinting the portal is an edit to kernol.css; reshaping a
   component is an edit here; neither is an edit to a template.

   Where the two surfaces differ on purpose:
     - the chrome is white, not navy. A client visits a handful of times, and a
       dark frame reads as "software" where this has to read as "your move".
     - the density is one step looser everywhere. Staff scan; clients read.
     - teal carries progress. The back office spends blue on everything that
       moves; here blue is reserved for links and review, and the journey's own
       advancement is the teal.
   ============================================================================ */

/* Scoped to the portal's own body rather than :root, and that placement is
   load-bearing. The client portal is white-label: it kept the pre-rebrand palette,
   which kernol.css pins on `body.kp-app` (see "the white-label freeze"). A custom
   property resolves var() against the element it is DECLARED on, so aliasing here
   at :root would have read the Orppio values and repainted the whole portal green
   — the tokens have to be spent on the same element the freeze sits on. */
body.kp-app {
  /* ═══ The bridge: --kp-* roles onto the frozen tokens ════════════════════ */

  --kp-bg:            var(--kernol-grey-50);
  --kp-surface:       var(--kernol-surface);
  --kp-surface-sunk:  var(--kernol-grey-100);
  --kp-border:        var(--kernol-grey-300);
  --kp-border-subtle: var(--kernol-grey-200);
  --kp-border-strong: var(--kernol-grey-400);

  --kp-ink:      var(--kernol-navy-900);
  --kp-ink-body: var(--kernol-grey-800);
  --kp-ink-soft: var(--kernol-grey-700);
  --kp-muted:    var(--kernol-grey-600);
  --kp-faint:    var(--kernol-grey-500);

  --kp-primary:       var(--kernol-chrome-900);
  --kp-primary-hover: var(--kernol-chrome-800);
  --kp-accent:        var(--kernol-blue-600);
  --kp-accent-hover:  var(--kernol-blue-700);
  --kp-hover:         var(--kernol-grey-50);
  --kp-hover-strong:  var(--kernol-grey-100);

  --kp-done:      var(--kernol-teal-600);
  --kp-done-soft: var(--kernol-teal-50);
  --kp-done-ink:  var(--kernol-teal-700);

  --kp-alert:      var(--kernol-red-500);
  --kp-alert-soft: var(--kernol-red-50);
  --kp-alert-ink:  var(--kernol-red-700);

  --kp-r-sm:  var(--kernol-radius-sm);
  --kp-r:     var(--kernol-radius);
  --kp-r-md:  var(--kernol-radius-md);
  --kp-r-lg:  var(--kernol-radius-lg);
  --kp-r-xl:  var(--kernol-radius-xl);

  --kp-shadow:      var(--kernol-shadow-xs);
  --kp-shadow-card: var(--kernol-shadow-sm);
  --kp-shadow-pop:  var(--kernol-shadow-pop);

  /* Layout metrics. The page is wider than the back office's work canvas
     because the journey column and the action rail have to sit side by side
     without either being cramped. */
  --kp-page-w:   1320px;
  --kp-page-x:   20px;
  --kp-topbar-h: 72px;
  --kp-rail-w:   328px;
}

@media (min-width: 768px) {
  /* Same scope as the block above — a :root override here would lose to the
     body's own declaration and never apply. */
  body.kp-app { --kp-page-x: 32px; }
}

/* ============================================================================
   1. SHELL
   ========================================================================= */

body.kp-app {
  min-height: 100vh;
  margin: 0;
  background: var(--kp-bg);
  color: var(--kp-ink-body);
  font-family: var(--kernol-font);
  font-size: var(--kernol-text-14);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.kp-app *:focus-visible {
  outline: none;
  box-shadow: var(--kernol-focus-ring);
  border-radius: var(--kp-r-sm);
}

/* ─── Top bar ────────────────────────────────────────────────────────────
   White, one hairline, and sticky: on a page whose whole job is a long
   workflow, the way out of it should not require scrolling back up. */
.kp-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--kp-surface);
  border-bottom: 1px solid var(--kp-border-subtle);
}

.kp-topbar__inner {
  display: flex;
  align-items: stretch;
  gap: var(--kernol-space-6);
  max-width: var(--kp-page-w);
  margin: 0 auto;
  padding: 0 var(--kp-page-x);
  min-height: var(--kp-topbar-h);
}

/* ─── Brand ───────────────────────────────────────────────────────────── */
.kp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--kernol-space-3) 0;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.kp-brand__text { min-width: 0; line-height: 1.15; }

/* The product name, now set in type beside the mark rather than carried by a cut
   wordmark. Sized so the two-line stack stays shorter than the 34px mark and the
   bar keeps exactly the height it had. */
.kp-brand__name {
  display: block;
  font-size: var(--kernol-text-14);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--kp-ink);
}

.kp-brand__sub {
  display: block;
  margin-top: 1px;
  font-size: var(--kernol-text-11);
  color: var(--kp-muted);
}

/* ─── Primary navigation ─────────────────────────────────────────────────
   Centred on desktop, and hidden on a phone, which gets the bottom bar.
   The active item is a navy underline sitting on the bar's own hairline. */
.kp-nav {
  display: none;
  align-items: stretch;
  gap: var(--kernol-space-2);
  margin: 0 auto;
}

@media (min-width: 900px) {
  .kp-nav { display: flex; }
}

.kp-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--kernol-space-4);
  font-size: var(--kernol-text-14);
  font-weight: 500;
  color: var(--kp-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.12s;
}

.kp-nav__link:hover { color: var(--kp-ink); }

.kp-nav__link.is-active {
  color: var(--kp-ink);
  font-weight: 620;
}

.kp-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: var(--kernol-space-3);
  right: var(--kernol-space-3);
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--kp-primary);
}

/* The unread dot on Messages. One dot, no number: a client with two unread
   threads needs to know the agency has written, not which. */
.kp-nav__dot,
.kp-bnav__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--kernol-radius-full);
  background: var(--kp-accent);
  flex-shrink: 0;
}

/* ─── Top-bar right-hand side ────────────────────────────────────────── */
.kp-topbar__end {
  display: flex;
  align-items: center;
  gap: var(--kernol-space-3);
  margin-left: auto;
  flex-shrink: 0;
}

.kp-iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: var(--kp-r-md);
  background: transparent;
  color: var(--kp-ink-soft);
  cursor: pointer;
  text-decoration: none;
}

.kp-iconbtn:hover { background: var(--kp-hover-strong); color: var(--kp-ink); }

.kp-iconbtn__count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--kernol-radius-full);
  background: var(--kp-accent);
  color: var(--kernol-text-on-dark);
  font-size: var(--kernol-text-10);
  font-weight: 650;
  line-height: 17px;
  text-align: center;
}

.kp-user {
  display: inline-flex;
  align-items: center;
  gap: var(--kernol-space-2);
  padding: 5px 8px 5px 5px;
  border-radius: var(--kernol-radius-full);
  color: var(--kp-ink);
  text-decoration: none;
  font-size: var(--kernol-text-14);
  font-weight: 550;
}

.kp-user:hover { background: var(--kp-hover-strong); }

.kp-user__name { display: none; }

@media (min-width: 640px) {
  .kp-user__name { display: inline; }
}

/* ─── Avatar ─────────────────────────────────────────────────────────── */
.kp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--kernol-radius-full);
  background: var(--kernol-blue-50);
  color: var(--kernol-blue-700);
  font-size: var(--kernol-text-12);
  font-weight: 650;
  object-fit: cover;
  overflow: hidden;
}

.kp-avatar--lg { width: 44px; height: 44px; font-size: var(--kernol-text-16); }
.kp-avatar--xl { width: 64px; height: 64px; font-size: var(--kernol-text-22); }
.kp-avatar--ring { box-shadow: 0 0 0 2px var(--kp-surface); }

/* ─── Account menu ─────────────────────────────────────────────────────
   A <details> popover; no controller owns its state. %s */
.kp-menu { position: relative; }
.kp-menu > summary { list-style: none; cursor: pointer; }
.kp-menu > summary::-webkit-details-marker { display: none; }

.kp-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  min-width: 220px;
  padding: 6px;
  background: var(--kp-surface);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-r-md);
  box-shadow: var(--kp-shadow-pop);
}

.kp-menu__head {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--kp-border-subtle);
  margin-bottom: 6px;
}

.kp-menu__name { font-size: var(--kernol-text-14); font-weight: 600; color: var(--kp-ink); }
.kp-menu__meta { margin-top: 2px; font-size: var(--kernol-text-12); color: var(--kp-muted); word-break: break-all; }

.kp-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--kp-r-sm);
  background: transparent;
  color: var(--kp-ink-body);
  font-family: inherit;
  font-size: var(--kernol-text-13);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.kp-menu__item:hover { background: var(--kp-hover-strong); color: var(--kp-ink); }
.kp-menu__item svg { color: var(--kp-faint); }

/* ─── Main column ────────────────────────────────────────────────────── */
.kp-main {
  max-width: var(--kp-page-w);
  margin: 0 auto;
  padding: var(--kernol-space-6) var(--kp-page-x) var(--kernol-space-12);
}

@media (max-width: 899px) {
  /* Clearance for the fixed bottom bar. */
  .kp-main { padding-bottom: 96px; }
}

/* ─── Bottom navigation (phone) ──────────────────────────────────────── */
.kp-bnav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: flex;
  background: var(--kp-surface);
  border-top: 1px solid var(--kp-border-subtle);
  padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 900px) {
  .kp-bnav { display: none; }
}

.kp-bnav__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 4px 8px;
  font-size: var(--kernol-text-10);
  font-weight: 550;
  color: var(--kp-muted);
  text-decoration: none;
}

.kp-bnav__link.is-active { color: var(--kp-primary); }
.kp-bnav__icon { position: relative; display: inline-flex; }
.kp-bnav__dot { position: absolute; top: -1px; right: -3px; }

/* ─── Staff banner ───────────────────────────────────────────────────── */
.kp-staffbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kernol-space-3);
  padding: 10px var(--kp-page-x);
  background: var(--kernol-chrome-900);
  color: var(--kernol-chrome-soft);
  font-size: var(--kernol-text-12);
}

.kp-staffbar strong { color: var(--kernol-chrome-ink); font-weight: 600; }
.kp-staffbar a { color: var(--kernol-blue-200); font-weight: 550; }

/* ============================================================================
   2. PRIMITIVES
   ========================================================================= */

/* ─── Page header ────────────────────────────────────────────────────── */
.kp-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--kernol-space-4);
  margin-bottom: var(--kernol-space-6);
}

.kp-pagehead__title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: var(--kernol-tracking-tight);
  color: var(--kp-ink);
}

.kp-pagehead__sub {
  margin: 6px 0 0;
  font-size: var(--kernol-text-14);
  color: var(--kp-muted);
}

.kp-pagehead__end { display: flex; align-items: center; gap: var(--kernol-space-3); flex-wrap: wrap; }

.kp-eyebrow {
  font-size: var(--kernol-text-11);
  font-weight: 700;
  letter-spacing: var(--kernol-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--kp-muted);
}

.kp-backlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--kernol-space-4);
  font-size: var(--kernol-text-13);
  font-weight: 500;
  color: var(--kp-muted);
  text-decoration: none;
}

.kp-backlink:hover { color: var(--kp-ink); }

/* ─── Buttons ────────────────────────────────────────────────────────── */
.kp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--kp-r);
  font-family: inherit;
  font-size: var(--kernol-text-14);
  font-weight: 570;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.kp-btn--primary { background: var(--kp-primary); color: var(--kernol-text-on-dark); }
.kp-btn--primary:hover { background: var(--kp-primary-hover); color: var(--kernol-text-on-dark); }

.kp-btn--secondary {
  background: var(--kp-surface);
  border-color: var(--kp-border);
  color: var(--kp-ink-soft);
  box-shadow: var(--kp-shadow);
}
.kp-btn--secondary:hover { border-color: var(--kp-border-strong); color: var(--kp-ink); }

.kp-btn--alert { background: var(--kernol-red-600); color: var(--kernol-text-on-dark); }
.kp-btn--alert:hover { background: var(--kernol-red-700); color: var(--kernol-text-on-dark); }

.kp-btn--ghost { background: transparent; color: var(--kp-muted); }
.kp-btn--ghost:hover { background: var(--kp-hover-strong); color: var(--kp-ink); }

.kp-btn--sm { height: 34px; padding: 0 13px; font-size: var(--kernol-text-13); }
.kp-btn--block { width: 100%; }
.kp-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.kp-link {
  color: var(--kp-accent);
  font-weight: 550;
  text-decoration: none;
}
.kp-link:hover { color: var(--kp-accent-hover); text-decoration: underline; }

/* ─── Cards ──────────────────────────────────────────────────────────── */
.kp-card {
  background: var(--kp-surface);
  border: 1px solid var(--kp-border-subtle);
  border-radius: var(--kp-r-lg);
  box-shadow: var(--kp-shadow);
}

.kp-card__body { padding: var(--kernol-space-5); }
.kp-card__head {
  display: flex;
  align-items: center;
  gap: var(--kernol-space-3);
  padding: var(--kernol-space-4) var(--kernol-space-5);
  border-bottom: 1px solid var(--kp-border-subtle);
}
.kp-card__title { margin: 0; font-size: var(--kernol-text-14); font-weight: 650; color: var(--kp-ink); }

.kp-card--flat { box-shadow: none; }
.kp-card--quiet { background: var(--kernol-grey-25); }

/* ─── Pills ──────────────────────────────────────────────────────────
   Six tones, one shape, always carrying a word. */
.kp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--kp-r-sm);
  font-size: var(--kernol-text-12);
  font-weight: 570;
  line-height: 1.35;
  white-space: nowrap;
}

.kp-pill--neutral { background: var(--kernol-neutral-soft); color: var(--kernol-neutral-ink); }
.kp-pill--info    { background: var(--kernol-info-soft);    color: var(--kernol-info-ink); }
.kp-pill--success { background: var(--kernol-success-soft); color: var(--kernol-success-ink); }
.kp-pill--warning { background: var(--kernol-warning-soft); color: var(--kernol-warning-ink); }
.kp-pill--danger  { background: var(--kernol-danger-soft);  color: var(--kernol-danger-ink); }
.kp-pill--plan    { background: var(--kernol-plan-soft);    color: var(--kernol-plan-ink); }

/* ─── Progress ───────────────────────────────────────────────────────── */
.kp-progress {
  height: 8px;
  width: 100%;
  overflow: hidden;
  border-radius: var(--kernol-radius-full);
  background: var(--kernol-grey-200);
}

.kp-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--kp-done);
  transition: width 0.3s ease;
}

.kp-progress--sm { height: 6px; }

/* ─── Empty state ────────────────────────────────────────────────────── */
.kp-empty {
  padding: var(--kernol-space-10) var(--kernol-space-6);
  text-align: center;
  border: 1px dashed var(--kp-border-strong);
  border-radius: var(--kp-r-lg);
  background: var(--kp-surface);
}

.kp-empty__title { margin: 0; font-size: var(--kernol-text-16); font-weight: 650; color: var(--kp-ink); }
.kp-empty__body { margin: 8px auto 0; max-width: 34rem; font-size: var(--kernol-text-14); color: var(--kp-muted); }

/* ─── Notices ────────────────────────────────────────────────────────── */
.kp-notice {
  display: flex;
  gap: var(--kernol-space-3);
  padding: var(--kernol-space-4);
  border: 1px solid transparent;
  border-radius: var(--kp-r-md);
  font-size: var(--kernol-text-13);
}

.kp-notice__title { font-weight: 620; }
.kp-notice--info    { background: var(--kernol-info-soft);    border-color: var(--kernol-blue-100); color: var(--kernol-info-ink); }
.kp-notice--success { background: var(--kernol-success-soft); border-color: var(--kernol-teal-100); color: var(--kernol-success-ink); }
.kp-notice--warning { background: var(--kernol-warning-soft); border-color: var(--kernol-tan-100); color: var(--kernol-warning-ink); }
.kp-notice--danger  { background: var(--kernol-danger-soft);  border-color: var(--kernol-red-100); color: var(--kernol-danger-ink); }
.kp-notice--neutral { background: var(--kernol-neutral-soft); border-color: var(--kp-border-subtle); color: var(--kp-ink-soft); }

/* ─── Footer reassurance strip ───────────────────────────────────────── */
.kp-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: var(--kernol-space-10);
  font-size: var(--kernol-text-12);
  color: var(--kp-muted);
}

/* ─── Powered by ──────────────────────────────────────────────────────
   The one Orppio mark on a white-label surface. To the client this portal is
   their relocation agency's, so this is a colophon and not a brand block: the
   muted ink already used by the reassurance strip above it, no rule, no ground,
   no logo. Everything else on this page is the agency's. */
.kp-poweredby {
  margin-top: var(--kernol-space-3);
  text-align: center;
  font-size: var(--kernol-text-11);
  color: var(--kp-muted);   /* 5.2:1 — unobtrusive, still legible */
}
.kp-poweredby a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.kp-poweredby a:hover { color: var(--kp-ink-soft); }

/* ============================================================================
   3. THE JOURNEY PAGE
   ========================================================================= */

/* ─── Journey switcher ───────────────────────────────────────────────
   One selected journey; the others are a row of compact cards above it. A
   horizontal scroller rather than a wrap, so four pets never push the
   workflow below the fold on a laptop. */
.kp-switch {
  display: flex;
  gap: var(--kernol-space-3);
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: var(--kernol-space-4);
  scrollbar-width: thin;
}

.kp-switch__item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  max-width: 20rem;
  padding: 9px 14px 9px 9px;
  background: var(--kp-surface);
  border: 1px solid var(--kp-border-subtle);
  border-radius: var(--kernol-radius-full);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s, background 0.12s;
}

.kp-switch__item:hover { border-color: var(--kp-border-strong); }

.kp-switch__item.is-active {
  border-color: var(--kernol-navy-900);
  background: var(--kernol-navy-900);
}

.kp-switch__item.is-active .kp-switch__name,
.kp-switch__item.is-active .kp-switch__route { color: var(--kernol-text-on-dark); }
.kp-switch__item.is-active .kp-switch__route { opacity: 0.75; }

.kp-switch__text { min-width: 0; line-height: 1.25; }
.kp-switch__name { display: block; font-size: var(--kernol-text-13); font-weight: 620; color: var(--kp-ink); }
.kp-switch__route {
  display: block;
  font-size: var(--kernol-text-12);
  color: var(--kp-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kp-switch__badge {
  margin-left: 2px;
  padding: 1px 6px;
  border-radius: var(--kernol-radius-full);
  background: var(--kernol-danger-soft);
  color: var(--kernol-danger-ink);
  font-size: var(--kernol-text-10);
  font-weight: 700;
}

.kp-switch__item.is-active .kp-switch__badge {
  background: var(--kernol-chrome-pill-alert-bg);
  color: var(--kernol-chrome-pill-alert-ink);
}

/* ─── Journey overview (hero) ────────────────────────────────────────── */
.kp-hero {
  background: var(--kp-surface);
  border: 1px solid var(--kp-border-subtle);
  border-radius: var(--kp-r-lg);
  box-shadow: var(--kp-shadow);
  overflow: hidden;
}

.kp-hero__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kernol-space-5);
  padding: var(--kernol-space-5);
}

.kp-hero__photo {
  width: 108px;
  height: 108px;
  flex-shrink: 0;
  border-radius: var(--kp-r-md);
  object-fit: cover;
  background: var(--kp-surface-sunk);
}

.kp-hero__photo--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 700;
  color: var(--kernol-blue-700);
  background: var(--kernol-blue-50);
}

.kp-hero__body { flex: 1 1 22rem; min-width: 0; }

.kp-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kernol-space-2);
  margin-bottom: 10px;
}

.kp-hero__route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: var(--kernol-tracking-tight);
  color: var(--kp-ink);
}

.kp-hero__arrow { color: var(--kp-faint); font-weight: 400; }

.kp-hero__meta {
  margin: 8px 0 0;
  font-size: var(--kernol-text-13);
  color: var(--kp-muted);
}

.kp-hero__meta b { font-weight: 600; color: var(--kp-ink-soft); }

.kp-hero__pet {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: var(--kernol-text-13);
  color: var(--kp-ink-soft);
}

.kp-hero__pet b { font-weight: 620; color: var(--kp-ink); }

.kp-hero__progress { flex: 0 0 auto; min-width: 150px; text-align: right; }

/* ─── Departure countdown ────────────────────────────────────────────
   A tile in the hero's top row, between the journey and its progress: the
   figure large, the word under it, the date under that. Four tones — ahead,
   soon (a week out), today, past — plus a quiet one for a date not yet booked.
   Navy for what is coming and teal for the day itself, because those are the
   two things a client opens the portal to check. */
.kp-countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 0 0 auto;
  min-width: 148px;
  margin-left: auto;
  padding: 14px 18px 12px;
  border-radius: var(--kp-r-md);
  text-align: center;
  background: linear-gradient(160deg, var(--kernol-navy-800, #1F2B46) 0%, var(--kernol-navy-900) 100%);
  color: var(--kernol-text-on-dark);
  box-shadow: var(--kp-shadow-card);
}

.kp-countdown__icon {
  display: inline-flex;
  margin-bottom: 4px;
  opacity: 0.75;
}

.kp-countdown__figure {
  font-size: 34px;
  font-weight: 750;
  letter-spacing: var(--kernol-tracking-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.kp-countdown__label {
  margin-top: 4px;
  font-size: var(--kernol-text-12);
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.9;
}

.kp-countdown__date {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgb(255 255 255 / 18%);
  width: 100%;
  font-size: var(--kernol-text-11);
  font-weight: 500;
  opacity: 0.75;
  white-space: nowrap;
}

.kp-countdown--soon {
  background: linear-gradient(160deg, var(--kernol-blue-600) 0%, var(--kernol-blue-700) 100%);
}

.kp-countdown--today {
  background: linear-gradient(160deg, var(--kernol-teal-600) 0%, var(--kernol-teal-700) 100%);
}
.kp-countdown--today .kp-countdown__figure { font-size: 26px; padding: 4px 0; }

.kp-countdown--past,
.kp-countdown--tbc {
  background: var(--kp-surface-sunk);
  color: var(--kp-ink-soft);
  box-shadow: none;
  border: 1px solid var(--kp-border-subtle);
}
.kp-countdown--past .kp-countdown__date,
.kp-countdown--tbc .kp-countdown__date { border-top-color: var(--kp-border); }
.kp-countdown--tbc .kp-countdown__figure { color: var(--kp-faint); }
.kp-countdown--tbc .kp-countdown__label { max-width: 9rem; line-height: 1.3; }

@media (max-width: 720px) {
  .kp-hero__progress { text-align: left; width: 100%; }
  .kp-countdown { margin-left: 0; width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 4px 10px; text-align: left; padding: 12px 16px; }
  .kp-countdown__icon { margin-bottom: 0; }
  .kp-countdown__figure { font-size: 26px; }
  .kp-countdown__label { margin-top: 0; }
  .kp-countdown__date { flex: 1 0 100%; margin-top: 4px; }
}

.kp-hero__pct {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: var(--kernol-tracking-tight);
  color: var(--kp-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.kp-hero__pctlabel { margin-top: 2px; font-size: var(--kernol-text-12); color: var(--kp-muted); }

.kp-hero__bar { margin: 14px var(--kernol-space-5) 0; }
.kp-hero__bar + .kp-hero__stats { margin-top: var(--kernol-space-5); }

/* The three-up strip along the bottom of the hero. Vertical rules between,
   stacked on a phone. */
.kp-hero__stats {
  display: grid;
  gap: 1px;
  background: var(--kp-border-subtle);
  border-top: 1px solid var(--kp-border-subtle);
}

@media (min-width: 720px) {
  .kp-hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.kp-stat {
  display: flex;
  align-items: flex-start;
  gap: var(--kernol-space-3);
  padding: var(--kernol-space-4) var(--kernol-space-5);
  background: var(--kp-surface);
  text-decoration: none;
  color: inherit;
}

a.kp-stat:hover { background: var(--kp-hover); }

.kp-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--kp-r);
  background: var(--kernol-info-soft);
  color: var(--kernol-info-dot);
}

.kp-stat__icon--alert { background: var(--kp-alert-soft); color: var(--kp-alert); }
.kp-stat__icon--done { background: var(--kp-done-soft); color: var(--kp-done); }

.kp-stat__label { font-size: var(--kernol-text-11); font-weight: 600; color: var(--kp-muted); }
.kp-stat__label--alert { color: var(--kp-alert-ink); }
.kp-stat__value { margin-top: 2px; font-size: var(--kernol-text-14); font-weight: 620; color: var(--kp-ink); }
.kp-stat__note { margin-top: 1px; font-size: var(--kernol-text-12); color: var(--kp-muted); }
.kp-stat__note--alert { color: var(--kp-alert-ink); font-weight: 550; }
.kp-stat__note--done { color: var(--kp-done-ink); font-weight: 550; }

/* ─── The two-column body ────────────────────────────────────────────
   Desktop: the hero, the setup card and the workflow stack in the wide
   column; the rail sits beside them, sticky, from the top of the hero down.
   Phone: both columns dissolve (display: contents) so every block is a
   sibling, and the order is fixed by hand — hero, setup, then the actions
   block above the workflow, which is the one rule the mobile spec is strict
   about — before the rest of the rail follows the workflow. */
.kp-jr {
  display: flex;
  flex-direction: column;
  gap: var(--kernol-space-4);
}

.kp-jr__main,
.kp-jr__rail { display: contents; }
.kp-jr__rail > * + * { margin-top: 0; }

.kp-jr__hero { order: -3; }
.kp-jr__setup { order: -2; }
.kp-jr__actions { order: -1; }

@media (min-width: 1024px) {
  .kp-jr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--kp-rail-w);
    align-items: start;
    gap: var(--kernol-space-5);
  }

  .kp-jr__main {
    display: flex;
    flex-direction: column;
    gap: var(--kernol-space-4);
    min-width: 0;
  }

  .kp-jr__rail {
    display: flex;
    flex-direction: column;
    gap: var(--kernol-space-4);
  }

  .kp-jr__hero,
  .kp-jr__setup,
  .kp-jr__actions { order: 0; }
}

/* ─── Workflow ───────────────────────────────────────────────────────── */
.kp-wf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.kp-wf__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kernol-space-3);
  margin-bottom: var(--kernol-space-3);
}

.kp-wf__title { margin: 0; font-size: var(--kernol-text-16); font-weight: 650; color: var(--kp-ink); }
.kp-wf__count { font-size: var(--kernol-text-13); color: var(--kp-muted); font-variant-numeric: tabular-nums; }

/* ─── Milestone ──────────────────────────────────────────────────────── */
.kp-ms {
  background: var(--kp-surface);
  border: 1px solid var(--kp-border-subtle);
  border-radius: var(--kp-r-lg);
  box-shadow: var(--kp-shadow);
}

.kp-ms--current { border-color: var(--kernol-blue-200); box-shadow: 0 0 0 3px var(--kernol-blue-50); }
.kp-ms--done { background: var(--kernol-grey-25); box-shadow: none; }
.kp-ms--upcoming { background: var(--kernol-grey-25); box-shadow: none; }

.kp-ms__head {
  display: flex;
  align-items: flex-start;
  gap: var(--kernol-space-3);
  padding: var(--kernol-space-4);
  list-style: none;
}

details.kp-ms > summary.kp-ms__head { cursor: pointer; }
details.kp-ms > summary.kp-ms__head::-webkit-details-marker { display: none; }

.kp-ms__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--kernol-radius-full);
  font-size: var(--kernol-text-13);
  font-weight: 650;
  background: var(--kernol-grey-100);
  color: var(--kp-muted);
}

.kp-ms--done .kp-ms__marker { background: var(--kp-done-soft); color: var(--kp-done-ink); }
.kp-ms--current .kp-ms__marker { background: var(--kernol-blue-600); color: var(--kernol-text-on-dark); }

.kp-ms__text { flex: 1 1 auto; min-width: 0; }

.kp-ms__title {
  font-size: var(--kernol-text-14);
  font-weight: 650;
  color: var(--kp-ink);
}

.kp-ms--done .kp-ms__title,
.kp-ms--upcoming .kp-ms__title { color: var(--kp-ink-soft); }

.kp-ms__desc {
  margin-top: 3px;
  font-size: var(--kernol-text-12);
  color: var(--kp-muted);
}

.kp-ms__end {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-top: 3px;
}

.kp-ms__state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--kernol-text-12);
  font-weight: 570;
  white-space: nowrap;
}

.kp-ms__state--done { color: var(--kp-done-ink); }
.kp-ms__state--current { color: var(--kernol-blue-700); }
.kp-ms__state--upcoming { color: var(--kp-muted); }

.kp-ms__chev { color: var(--kp-faint); transition: transform 0.15s; }
details.kp-ms[open] .kp-ms__chev { transform: rotate(180deg); }

.kp-ms__tasks {
  list-style: none;
  margin: 0;
  padding: 0 var(--kernol-space-4) var(--kernol-space-4);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (min-width: 640px) {
  .kp-ms__tasks { padding-left: 58px; }
}

/* ─── Task row ───────────────────────────────────────────────────────── */
.kp-task {
  display: flex;
  align-items: flex-start;
  gap: var(--kernol-space-3);
  padding: 11px var(--kernol-space-4);
  background: var(--kp-surface);
  border: 1px solid var(--kp-border-subtle);
  border-radius: var(--kp-r-md);
  text-decoration: none;
  color: inherit;
}

a.kp-task:hover { border-color: var(--kp-border-strong); }

.kp-task--action { border-color: var(--kernol-red-200); background: var(--kp-alert-soft); }
a.kp-task--action:hover { border-color: var(--kernol-red-500); }
.kp-task--done { background: var(--kernol-grey-25); }

.kp-task__icon { flex-shrink: 0; margin-top: 1px; color: var(--kp-faint); }
.kp-task__icon--done { color: var(--kp-done); }
.kp-task__icon--action { color: var(--kp-alert); }

.kp-task__text { flex: 1 1 auto; min-width: 0; }
.kp-task__title { font-size: var(--kernol-text-13); font-weight: 570; color: var(--kp-ink); }
.kp-task--done .kp-task__title { color: var(--kp-ink-soft); }
.kp-task__desc {
  margin-top: 2px;
  font-size: var(--kernol-text-12);
  color: var(--kp-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kp-task__end {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.kp-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--kernol-text-12);
  font-weight: 550;
  white-space: nowrap;
}

.kp-status--done    { color: var(--kp-done-ink); }
.kp-status--action  { color: var(--kp-alert-ink); font-weight: 620; }
.kp-status--review  { color: var(--kernol-blue-700); }
.kp-status--current { color: var(--kernol-blue-700); }
.kp-status--soon    { color: var(--kernol-tan-700); }
.kp-status--muted   { color: var(--kp-muted); }

.kp-status__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--kernol-radius-full);
  background: currentColor;
  flex-shrink: 0;
}

/* ─── "Your actions" rail block ──────────────────────────────────────── */
.kp-actions { display: flex; flex-direction: column; gap: 10px; }

.kp-actions__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kernol-space-2);
}

.kp-actions__count { font-size: var(--kernol-text-12); color: var(--kp-muted); }

.kp-actioncard {
  padding: var(--kernol-space-4);
  background: var(--kp-alert-soft);
  border: 1px solid var(--kernol-red-100);
  border-radius: var(--kp-r-lg);
}

.kp-actioncard--soft { background: var(--kp-surface); border-color: var(--kp-border-subtle); box-shadow: var(--kp-shadow); }

.kp-actioncard__top { display: flex; align-items: center; gap: 10px; }

.kp-actioncard__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--kp-r);
  background: var(--kp-surface);
  color: var(--kp-alert);
  box-shadow: var(--kp-shadow);
}

.kp-actioncard--soft .kp-actioncard__icon { background: var(--kernol-info-soft); color: var(--kernol-info-dot); box-shadow: none; }

.kp-actioncard__title { font-size: var(--kernol-text-14); font-weight: 650; color: var(--kp-ink); }
.kp-actioncard__pet { margin-top: 1px; font-size: var(--kernol-text-11); color: var(--kp-muted); }
.kp-actioncard__body { margin: 10px 0 0; font-size: var(--kernol-text-13); color: var(--kp-ink-soft); }
.kp-actioncard__due { margin-top: 8px; font-size: var(--kernol-text-12); font-weight: 570; color: var(--kp-alert-ink); }
.kp-actioncard__due--calm { color: var(--kp-muted); font-weight: 500; }
.kp-actioncard__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: var(--kernol-space-3); }

/* The reassuring counterpart. Deliberately quiet: a card, not a banner. */
.kp-allset {
  padding: var(--kernol-space-5);
  background: var(--kp-done-soft);
  border: 1px solid var(--kernol-teal-100);
  border-radius: var(--kp-r-lg);
}

.kp-allset__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--kernol-radius-full);
  background: var(--kp-surface);
  color: var(--kp-done);
}

.kp-allset__title { margin-top: 12px; font-size: var(--kernol-text-14); font-weight: 650; color: var(--kernol-teal-800); }
.kp-allset__body { margin: 5px 0 0; font-size: var(--kernol-text-13); line-height: 1.55; color: var(--kp-done-ink); }
.kp-allset__next {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--kernol-teal-100);
  font-size: var(--kernol-text-12);
  color: var(--kp-done-ink);
}
.kp-allset__next b { display: block; font-weight: 620; color: var(--kernol-teal-800); font-size: var(--kernol-text-13); }

/* ─── Upcoming dates ─────────────────────────────────────────────────── */
.kp-dates { display: flex; flex-direction: column; }

.kp-dates__row {
  display: flex;
  align-items: baseline;
  gap: var(--kernol-space-3);
  padding: 7px 0;
  font-size: var(--kernol-text-13);
}

.kp-dates__row + .kp-dates__row { border-top: 1px solid var(--kp-border-subtle); }

.kp-dates__date {
  flex: 0 0 52px;
  font-weight: 620;
  color: var(--kp-ink);
  font-variant-numeric: tabular-nums;
}

.kp-dates__title { flex: 1 1 auto; min-width: 0; color: var(--kp-ink-body); }
.kp-dates__note { display: block; margin-top: 1px; font-size: var(--kernol-text-11); color: var(--kp-muted); }

/* ─── Expert + help ──────────────────────────────────────────────────── */
.kp-expert__row { display: flex; align-items: center; gap: var(--kernol-space-3); }
.kp-expert__name { font-size: var(--kernol-text-14); font-weight: 620; color: var(--kp-ink); }
.kp-expert__role { margin-top: 1px; font-size: var(--kernol-text-12); color: var(--kp-muted); }

.kp-help {
  padding: var(--kernol-space-5);
  border-radius: var(--kp-r-lg);
  background: var(--kernol-periwinkle-50);
  border: 1px solid var(--kernol-periwinkle-100);
}

.kp-help__title { margin: 0; font-size: var(--kernol-text-16); font-weight: 650; color: var(--kp-ink); }
.kp-help__body { margin: 6px 0 0; font-size: var(--kernol-text-13); line-height: 1.55; color: var(--kp-ink-soft); }

.kp-help__list { margin-top: var(--kernol-space-4); display: flex; flex-direction: column; gap: 6px; }

.kp-help__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--kp-r-md);
  background: var(--kp-surface);
  text-decoration: none;
  color: inherit;
}

.kp-help__item:hover { box-shadow: var(--kp-shadow-card); }
.kp-help__item svg { color: var(--kp-accent); }
.kp-help__label { font-size: var(--kernol-text-13); font-weight: 570; color: var(--kp-ink); }
.kp-help__meta { display: block; margin-top: 1px; font-size: var(--kernol-text-11); color: var(--kp-muted); font-weight: 400; }

/* ============================================================================
   4. LISTS — journeys, pets, documents
   ========================================================================= */

.kp-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--kp-surface);
  border: 1px solid var(--kp-border-subtle);
  border-radius: var(--kp-r-lg);
  overflow: hidden;
}

.kp-rows > li + li { border-top: 1px solid var(--kp-border-subtle); }

.kp-row {
  display: flex;
  align-items: center;
  gap: var(--kernol-space-3);
  padding: 13px var(--kernol-space-4);
  text-decoration: none;
  color: inherit;
}

.kp-row:hover { background: var(--kp-hover); }
.kp-row__text { flex: 1 1 auto; min-width: 0; }
.kp-row__title { font-size: var(--kernol-text-14); font-weight: 570; color: var(--kp-ink); }
.kp-row__meta { margin-top: 2px; font-size: var(--kernol-text-12); color: var(--kp-muted); }
.kp-row__end { display: flex; align-items: center; gap: var(--kernol-space-3); flex-shrink: 0; }
.kp-row__chev { color: var(--kp-faint); }

/* ─── Section heading above a list ───────────────────────────────────── */
.kp-section { margin-top: var(--kernol-space-8); }
.kp-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kernol-space-3);
  margin-bottom: var(--kernol-space-3);
}
.kp-section__title { margin: 0; font-size: var(--kernol-text-16); font-weight: 650; color: var(--kp-ink); }

/* ─── Pets ───────────────────────────────────────────────────────────── */
.kp-pets { display: grid; gap: var(--kernol-space-4); }

@media (min-width: 1024px) {
  .kp-pets { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--kp-rail-w); align-items: start; }
}

.kp-petcard {
  display: flex;
  align-items: center;
  gap: var(--kernol-space-4);
  padding: var(--kernol-space-4);
  background: var(--kp-surface);
  border: 1px solid var(--kp-border-subtle);
  border-radius: var(--kp-r-lg);
  box-shadow: var(--kp-shadow);
  text-decoration: none;
  color: inherit;
}

.kp-petcard.is-active { border-color: var(--kernol-blue-400); box-shadow: 0 0 0 3px var(--kernol-blue-50); }
.kp-petcard:hover { border-color: var(--kp-border-strong); }

.kp-petcard__photo {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  border-radius: var(--kp-r-md);
  object-fit: cover;
  background: var(--kp-surface-sunk);
}

.kp-petcard__name { font-size: var(--kernol-text-16); font-weight: 650; color: var(--kp-ink); }
.kp-petcard__breed { margin-top: 1px; font-size: var(--kernol-text-13); color: var(--kp-muted); }
.kp-petcard__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 8px;
  font-size: var(--kernol-text-12);
  color: var(--kp-ink-soft);
}
.kp-petcard__sep { color: var(--kp-faint); }

.kp-petdetail__cover {
  width: 100%;
  height: 190px;
  object-fit: cover;
  background: var(--kp-surface-sunk);
  border-radius: var(--kp-r-lg) var(--kp-r-lg) 0 0;
}

.kp-facts { display: grid; gap: var(--kernol-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }

@media (min-width: 640px) {
  .kp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.kp-facts dt { font-size: var(--kernol-text-12); color: var(--kp-muted); }
.kp-facts dd { margin: 3px 0 0; font-size: var(--kernol-text-14); font-weight: 570; color: var(--kp-ink); }

.kp-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }

.kp-tile {
  padding: 12px;
  border: 1px solid var(--kp-border-subtle);
  border-radius: var(--kp-r-md);
  background: var(--kp-surface);
}

.kp-tile__label { font-size: var(--kernol-text-12); font-weight: 600; color: var(--kp-ink); }
.kp-tile__value { margin-top: 4px; font-size: var(--kernol-text-12); color: var(--kp-muted); }
.kp-tile__state { margin-top: 8px; }

/* ─── Documents ──────────────────────────────────────────────────────── */
.kp-tabs {
  display: flex;
  gap: var(--kernol-space-2);
  border-bottom: 1px solid var(--kp-border-subtle);
  margin-bottom: var(--kernol-space-4);
  overflow-x: auto;
}

.kp-tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px var(--kernol-space-4);
  font-size: var(--kernol-text-13);
  font-weight: 570;
  color: var(--kp-muted);
  text-decoration: none;
  white-space: nowrap;
}

.kp-tabs__tab:hover { color: var(--kp-ink); }
.kp-tabs__tab.is-active { color: var(--kp-accent); }
.kp-tabs__tab.is-active::after {
  content: "";
  position: absolute;
  left: var(--kernol-space-3);
  right: var(--kernol-space-3);
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--kp-accent);
}

.kp-docbanner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kernol-space-4);
  padding: var(--kernol-space-4) var(--kernol-space-5);
  background: var(--kp-alert-soft);
  border: 1px solid var(--kernol-red-100);
  border-radius: var(--kp-r-lg);
  margin-bottom: var(--kernol-space-4);
}

.kp-docbanner__lead { flex: 1 1 16rem; min-width: 0; }
.kp-docbanner__title { font-size: var(--kernol-text-14); font-weight: 650; color: var(--kp-alert-ink); }
.kp-docbanner__body { margin-top: 3px; font-size: var(--kernol-text-13); color: var(--kp-ink-soft); }

.kp-table { width: 100%; border-collapse: collapse; font-size: var(--kernol-text-13); }
.kp-tablewrap { overflow-x: auto; }

.kp-table thead th {
  padding: 10px var(--kernol-space-4);
  text-align: left;
  font-size: var(--kernol-text-12);
  font-weight: 620;
  color: var(--kp-muted);
  border-bottom: 1px solid var(--kp-border-subtle);
  white-space: nowrap;
}

.kp-table tbody td {
  padding: 12px var(--kernol-space-4);
  border-bottom: 1px solid var(--kp-border-subtle);
  vertical-align: middle;
}

.kp-table tbody tr:last-child td { border-bottom: 0; }
.kp-table tbody tr:hover { background: var(--kp-hover); }

.kp-doc__name { font-size: var(--kernol-text-13); font-weight: 570; color: var(--kp-ink); }
.kp-doc__cat { margin-top: 2px; font-size: var(--kernol-text-11); color: var(--kp-muted); }
.kp-doc__when { color: var(--kp-ink-body); white-space: nowrap; }
.kp-doc__when--alert { color: var(--kp-alert-ink); font-weight: 570; }
.kp-doc__sub { display: block; margin-top: 2px; font-size: var(--kernol-text-11); color: var(--kp-muted); }

.kp-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.kp-select,
.kp-input {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-r);
  background: var(--kp-surface);
  color: var(--kp-ink);
  font-family: inherit;
  font-size: var(--kernol-text-13);
}

.kp-input::placeholder { color: var(--kp-faint); }

/* ============================================================================
   5. FORMS — profile, onboarding, task detail
   ========================================================================= */

.kp-field { display: block; margin-bottom: var(--kernol-space-4); }
.kp-field__label { display: block; margin-bottom: 6px; font-size: var(--kernol-text-13); font-weight: 570; color: var(--kp-ink); }
.kp-field__hint { margin-top: 5px; font-size: var(--kernol-text-12); color: var(--kp-muted); }

.kp-field input[type="text"],
.kp-field input[type="email"],
.kp-field input[type="tel"],
.kp-field input[type="date"],
.kp-field input[type="number"],
.kp-field input[type="password"],
.kp-field select,
.kp-field textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-r);
  background: var(--kp-surface);
  color: var(--kp-ink);
  font-family: inherit;
  font-size: var(--kernol-text-14);
}

.kp-field textarea { min-height: 6rem; resize: vertical; }

.kp-formactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kernol-space-3);
  margin-top: var(--kernol-space-5);
  padding-top: var(--kernol-space-4);
  border-top: 1px solid var(--kp-border-subtle);
}

.kp-errors {
  padding: var(--kernol-space-3) var(--kernol-space-4);
  margin-bottom: var(--kernol-space-4);
  border: 1px solid var(--kernol-red-100);
  border-radius: var(--kp-r-md);
  background: var(--kp-alert-soft);
  color: var(--kp-alert-ink);
  font-size: var(--kernol-text-13);
}

.kp-errors ul { margin: 0; padding-left: 1.1rem; }

/* ─── Choice rows (link an existing record / start fresh) ────────────── */
.kp-choice {
  display: flex;
  align-items: center;
  gap: var(--kernol-space-3);
  padding: 12px var(--kernol-space-4);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-r-md);
  font-size: var(--kernol-text-14);
  color: var(--kp-ink);
  cursor: pointer;
}

.kp-choice:has(:checked) { border-color: var(--kernol-blue-400); background: var(--kernol-blue-50); }
.kp-choice--new { border-style: dashed; color: var(--kp-ink-soft); }

/* ─── Countdown panel on a time-elapsed task ─────────────────────────── */
.kp-countdown { text-align: center; padding: var(--kernol-space-6) var(--kernol-space-5); }
.kp-countdown__value {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: var(--kernol-tracking-tight);
  color: var(--kp-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.kp-countdown__label { margin-top: 8px; font-size: var(--kernol-text-13); color: white; }

/* ─── Attachment list ────────────────────────────────────────────────── */
.kp-files { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kp-files li { display: flex; align-items: center; gap: 10px; font-size: var(--kernol-text-13); }
.kp-files a { color: var(--kp-ink-body); text-decoration: underline; text-decoration-color: var(--kp-border-strong); }
.kp-files a:hover { color: var(--kp-ink); }

/* ============================================================================
   6. FLASH
   ========================================================================= */

.kp-flash {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px var(--kernol-space-4);
  margin-bottom: var(--kernol-space-4);
  border: 1px solid transparent;
  border-radius: var(--kp-r-md);
  font-size: var(--kernol-text-13);
  font-weight: 500;
}

.kp-flash--notice { background: var(--kernol-success-soft); border-color: var(--kernol-teal-100); color: var(--kernol-success-ink); }
.kp-flash--alert  { background: var(--kernol-danger-soft);  border-color: var(--kernol-red-100);  color: var(--kernol-danger-ink); }

/* ============================================================================
   7. ODDS AND ENDS
   ========================================================================= */

.kp-brand__logo { flex-shrink: 0; }
.kp-user__chev { color: var(--kp-faint); }

/* Overlapped pet avatars. A journey with three cats keeps the row height of a
   journey with one. */
.kp-stack { display: inline-flex; align-items: center; flex-shrink: 0; }
.kp-stack__item + .kp-stack__item { margin-left: -10px; }
.kp-stack__item .kp-avatar,
.kp-stack__more { box-shadow: 0 0 0 2px var(--kp-surface); }
.kp-stack__more { background: var(--kernol-grey-100); color: var(--kp-ink-soft); }

.kp-task__pet { font-weight: 450; color: var(--kp-muted); }
.kp-ms__count { font-size: var(--kernol-text-12); color: var(--kp-muted); font-variant-numeric: tabular-nums; }

.kp-empty__icon { display: block; margin: 0 auto 10px; color: var(--kp-faint); }
.kp-notice__icon { flex-shrink: 0; margin-top: 2px; }
.kp-card__icon { color: var(--kp-faint); }

/* A milestone opened by a fragment link from the rail should not land under the
   sticky top bar. */
body.kp-app [id] { scroll-margin-top: calc(var(--kp-topbar-h) + 16px); }

/* Setup checklist ticks. */
.kp-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: var(--kernol-radius-full);
  border: 2px solid var(--kp-border-strong);
}

.kp-check--done { border-color: transparent; background: var(--kp-done-soft); color: var(--kp-done-ink); }

/* Form controls, applied to the element rather than inherited through a
   wrapper: Tailwind's utilities load after this file, so anything carrying both
   would take the utility. Templates carry kp-control and nothing else. */
.kp-control {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: 10px 13px;
  margin-top: 6px;
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-r);
  background: var(--kp-surface);
  color: var(--kp-ink);
  font-family: inherit;
  font-size: var(--kernol-text-14);
  line-height: 1.4;
}

.kp-control::placeholder { color: var(--kp-faint); }
.kp-control:focus { border-color: var(--kernol-blue-400); }
textarea.kp-control { min-height: 6rem; resize: vertical; }

.kp-grid2 { display: grid; gap: var(--kernol-space-4); }

@media (min-width: 640px) {
  .kp-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kp-grid2 .kp-span2 { grid-column: span 2; }
}

.kp-fieldset { border: 0; padding: var(--kernol-space-4) 0 0; margin: var(--kernol-space-2) 0 0; border-top: 1px solid var(--kp-border-subtle); }
.kp-fieldset legend { padding: 0; font-size: var(--kernol-text-13); font-weight: 620; color: var(--kp-ink); }

.kp-form { display: flex; flex-direction: column; gap: var(--kernol-space-4); }

.kp-photofield { display: flex; align-items: center; gap: var(--kernol-space-4); }
.kp-photofield label { cursor: pointer; }
.kp-hidden { display: none; }

.kp-inlineform { display: inline; }
.kp-inlineform button { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }

.kp-form--spaced { margin-top: var(--kernol-space-6); }

/* ============================================================================
   8. MESSAGES
   The two-pane Messagerie. Its grid and scroll behaviour live in the Tailwind
   entry (.portal-messagerie / .portal-msg-*) because they predate this file and
   the fill-height controller measures against them; everything cosmetic is here.
   ========================================================================= */

.kp-msg-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--kp-surface);
  border: 1px solid var(--kp-border-subtle);
  border-radius: var(--kp-r-lg);
  box-shadow: var(--kp-shadow);
}

.kp-msg-list { min-height: 0; flex: 1; overflow-y: auto; }
.kp-msg-list > * + * { border-top: 1px solid var(--kp-border-subtle); }

.kp-msg-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  text-decoration: none;
  color: inherit;
  border-left: 3px solid transparent;
}

.kp-msg-row:hover { background: var(--kp-hover); }
.kp-msg-row.is-current { background: var(--kernol-blue-50); border-left-color: var(--kp-accent); }

.kp-msg-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kp-msg-row__who { font-size: var(--kernol-text-13); font-weight: 600; color: var(--kp-ink); }
.kp-msg-row.is-unread .kp-msg-row__who { font-weight: 700; }
.kp-msg-row__when { flex-shrink: 0; font-size: var(--kernol-text-11); color: var(--kp-muted); }
.kp-msg-row__subject {
  margin-top: 1px;
  font-size: var(--kernol-text-13);
  color: var(--kp-ink-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kp-msg-row.is-unread .kp-msg-row__subject { font-weight: 600; color: var(--kp-ink); }
.kp-msg-row__preview {
  margin-top: 2px;
  font-size: var(--kernol-text-12);
  color: var(--kp-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kp-msg-row__unread { width: 8px; height: 8px; border-radius: var(--kernol-radius-full); background: var(--kp-accent); flex-shrink: 0; }

.kp-msg-head {
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--kp-border-subtle);
}

.kp-msg-head__title { margin: 0; font-size: var(--kernol-text-16); font-weight: 650; color: var(--kp-ink); }
.kp-msg-head__meta { margin: 2px 0 0; font-size: var(--kernol-text-12); color: var(--kp-muted); }

.kp-msg-daymark {
  align-self: center;
  padding: 2px 12px;
  border-radius: var(--kernol-radius-full);
  background: var(--kernol-grey-100);
  font-size: var(--kernol-text-11);
  font-weight: 620;
  color: var(--kp-muted);
}

.kp-bubble { display: flex; }
.kp-bubble--mine { justify-content: flex-end; }
.kp-bubble__col { display: flex; flex-direction: column; max-width: 85%; }
.kp-bubble--mine .kp-bubble__col { align-items: flex-end; }

@media (min-width: 768px) {
  .kp-bubble__col { max-width: 70%; }
}

.kp-bubble__body {
  padding: 10px 14px;
  border-radius: var(--kernol-radius-xl);
  font-size: 13.5px;
  line-height: 1.55;
  background: var(--kernol-grey-100);
  color: var(--kp-ink-body);
  border-bottom-left-radius: var(--kp-r-sm);
}

.kp-bubble--mine .kp-bubble__body {
  background: var(--kp-accent);
  color: var(--kernol-text-on-dark);
  border-bottom-left-radius: var(--kernol-radius-xl);
  border-bottom-right-radius: var(--kp-r-sm);
}

.kp-bubble__who { margin: 0 0 3px; font-size: var(--kernol-text-11); font-weight: 620; color: var(--kp-muted); }
.kp-bubble__text { margin: 0; white-space: pre-line; }
.kp-bubble__files { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kp-bubble__file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--kernol-text-12);
  font-weight: 550;
  text-decoration: underline;
  color: var(--kp-accent);
}
.kp-bubble--mine .kp-bubble__file { color: var(--kernol-blue-50); }
.kp-bubble__when { margin-top: 4px; padding: 0 4px; font-size: var(--kernol-text-11); color: var(--kp-faint); }

.kp-composer { flex: none; padding: 8px; border-top: 1px solid var(--kp-border-subtle); }

.kp-composer__box {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--kp-border);
  border-radius: var(--kernol-radius-xl);
  background: var(--kp-surface);
}

.kp-composer__box:focus-within { border-color: var(--kernol-blue-400); box-shadow: var(--kernol-focus-ring); }

.kp-composer__input {
  flex: 1;
  min-height: 36px;
  max-height: 8rem;
  resize: none;
  border: 0;
  background: transparent;
  padding: 8px 4px;
  font-family: inherit;
  font-size: var(--kernol-text-14);
  color: var(--kp-ink);
}

.kp-composer__input:focus { outline: none; box-shadow: none; }

.kp-composer__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--kernol-radius-full);
  background: transparent;
  color: var(--kp-faint);
  cursor: pointer;
}

.kp-composer__btn:hover { background: var(--kp-hover-strong); color: var(--kp-ink-soft); }
.kp-composer__btn--send { background: var(--kp-accent); color: var(--kernol-text-on-dark); }
.kp-composer__btn--send:hover { background: var(--kp-accent-hover); color: var(--kernol-text-on-dark); }

.kp-composer__files { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0 8px; font-size: var(--kernol-text-12); color: var(--kp-muted); }
.kp-composer__files:empty { margin: 0; }
.kp-composer__warning { margin: 0; padding: 0 8px; font-size: var(--kernol-text-12); color: var(--kernol-tan-700); }

.kp-msg-empty { display: flex; flex: 1; align-items: center; justify-content: center; padding: 32px; text-align: center; }

.kp-taskfacts { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.kp-taskfact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--kernol-text-13);
  color: var(--kp-ink-soft);
}
.kp-taskfact svg { color: var(--kp-faint); }

/* ============================================================================
   9. FIXES THAT BELONG WITH THEIR COMPONENT
   Inline elements that carry a line of their own. Every one of these is a
   <span> inside a link — an anchor cannot contain a <div> and stay valid — so
   the block behaviour has to come from here rather than from the tag.
   ========================================================================= */

.kp-flag { width: 22px; height: 16px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgb(11 20 38 / 0.08); }

.kp-stat__label,
.kp-stat__value,
.kp-stat__note,
.kp-ms__title,
.kp-ms__desc,
.kp-task__title,
.kp-task__desc,
.kp-row__title,
.kp-row__meta,
.kp-petcard__name,
.kp-petcard__breed,
.kp-petcard__facts,
.kp-switch__name,
.kp-switch__route,
.kp-msg-row__top,
.kp-msg-row__who,
.kp-msg-row__subject,
.kp-msg-row__preview,
.kp-doc__name,
.kp-doc__cat,
.kp-help__label,
.kp-help__meta { display: block; }

.kp-msg-row__top { display: flex; }
.kp-petcard__facts { display: flex; }
.kp-stat > span:last-child { min-width: 0; }

/* ─── Narrow viewports ───────────────────────────────────────────────────
   A milestone header and a task row are "identity left, state right" only
   while there is room for both. Below that the state drops to a line of its
   own rather than squeezing the title into a column three words wide. */
@media (max-width: 720px) {
  .kp-ms__head { flex-wrap: wrap; }
  .kp-ms__end { flex: 1 0 100%; justify-content: flex-start; padding-left: 42px; padding-top: 8px; }

  .kp-task { flex-wrap: wrap; }
  .kp-task__end { flex: 1 0 100%; justify-content: flex-start; padding-left: 27px; padding-top: 8px; }

  /* basis 0 rather than auto: a long title's content size would otherwise be the
     hypothetical main size, and the row would wrap its own icon onto a line of
     its own before the text had a chance to fit. */
  .kp-ms__text,
  .kp-task__text { flex: 1 1 0%; }

  .kp-hero__photo { width: 84px; height: 84px; }
  .kp-hero__photo--fallback { font-size: 28px; }
  .kp-hero__route { font-size: 21px; }
  .kp-pagehead__title { font-size: 24px; }
}

/* ============================================================================
   BILLING
   The client's side of the ledger: a strip of figures, then one card per
   quotation holding its schedule, its payments and its invoices. Tables turn
   into stacked rows on a phone rather than scrolling sideways — a schedule
   a client cannot read on the phone the reminder arrived on is no schedule.
   ========================================================================= */
.kp-section__count { font-size: var(--kernol-text-13); color: var(--kp-muted); }

.kp-bill-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--kernol-space-3);
  margin-bottom: var(--kernol-space-2);
}

.kp-bill-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--kernol-space-4) var(--kernol-space-5);
  background: var(--kp-surface);
  border: 1px solid var(--kp-border-subtle);
  border-radius: var(--kp-r-lg);
  box-shadow: var(--kp-shadow);
  min-width: 0;
}

.kp-bill-tile__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--kernol-text-11);
  font-weight: 700;
  letter-spacing: var(--kernol-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--kp-muted);
}

.kp-bill-tile__value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: var(--kernol-tracking-tight);
  line-height: 1.1;
  color: var(--kp-ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.kp-bill-tile__value--done { color: var(--kp-done-ink); }
.kp-bill-tile__value--alert { color: var(--kp-alert-ink); }
.kp-bill-tile__note { font-size: var(--kernol-text-12); color: var(--kp-muted); }
.kp-bill-tile__note b { font-weight: 600; color: var(--kp-ink-soft); }

/* The next payment: the one tile that leads somewhere, so it carries the brand's
   ink and the button. Overdue turns its edge red, not its whole face. */
.kp-bill-tile--next {
  grid-column: span 1;
  border-color: var(--kernol-blue-200);
  background: var(--kernol-blue-50);
}
.kp-bill-tile--next .kp-bill-tile__label { color: var(--kernol-blue-700); }
.kp-bill-tile--next.is-overdue { border-color: var(--kernol-red-200); background: var(--kp-alert-soft); }
.kp-bill-tile--next.is-overdue .kp-bill-tile__label { color: var(--kp-alert-ink); }
.kp-bill-tile__cta { align-self: flex-start; margin-top: 8px; }

@media (min-width: 900px) {
  .kp-bill-summary { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); }
  .kp-bill-summary:has(.kp-bill-tile:only-child) { grid-template-columns: minmax(0, 1fr); }
}

/* ─── One quotation ──────────────────────────────────────────────────── */
.kp-bill-section { margin-top: var(--kernol-space-6); }
.kp-bill-section .kp-section__head { margin-bottom: var(--kernol-space-3); }
.kp-bill + .kp-bill { margin-top: var(--kernol-space-4); }

.kp-bill { overflow: hidden; }

.kp-bill__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--kernol-space-4);
  padding: var(--kernol-space-5);
}

.kp-bill__lead { flex: 1 1 20rem; min-width: 0; }

.kp-bill__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kernol-space-2);
  margin-bottom: 8px;
}

.kp-bill__ref {
  font-family: var(--kernol-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--kernol-text-12);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--kp-ink-soft);
  padding: 3px 7px;
  border-radius: var(--kp-r-sm);
  background: var(--kp-surface-sunk);
}

.kp-bill__title {
  margin: 0;
  font-size: var(--kernol-text-18, 18px);
  font-weight: 650;
  letter-spacing: var(--kernol-tracking-tight);
  color: var(--kp-ink);
}

.kp-bill__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: var(--kernol-text-13);
  color: var(--kp-muted);
}
.kp-bill__meta svg { color: var(--kp-faint); }

.kp-bill__figure {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
  min-width: 150px;
}
.kp-bill__figure-label { display: block; font-size: var(--kernol-text-11); font-weight: 600; color: var(--kp-muted); }
.kp-bill__figure-value {
  display: block;
  margin-top: 2px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: var(--kernol-tracking-tight);
  color: var(--kp-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.kp-bill__figure-note { display: block; margin-top: 3px; font-size: var(--kernol-text-12); color: var(--kp-muted); }

.kp-bill__progress { padding: 0 var(--kernol-space-5) var(--kernol-space-4); }
.kp-bill__progress-row {
  display: flex;
  justify-content: space-between;
  gap: var(--kernol-space-3);
  margin-top: 8px;
  font-size: var(--kernol-text-12);
  color: var(--kp-muted);
  font-variant-numeric: tabular-nums;
}
.kp-bill__progress-row b { font-weight: 620; color: var(--kp-ink); }

.kp-bill__block { border-top: 1px solid var(--kp-border-subtle); }
.kp-bill__block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kernol-space-3);
  padding: 14px var(--kernol-space-5) 4px;
}
.kp-bill__block-sub { font-size: var(--kernol-text-12); color: var(--kp-muted); }

/* The schedule / payments tables. */
.kp-bill-table thead th { padding-left: var(--kernol-space-5); padding-right: var(--kernol-space-5); }
.kp-bill-table tbody td { padding: 12px var(--kernol-space-5); }
.kp-bill-table tbody tr:hover { background: transparent; }
.kp-bill-table tbody tr.is-next td { background: var(--kernol-blue-50); }
.kp-bill-table tbody tr.is-paid .kp-bill-table__title { color: var(--kp-ink-soft); }
.kp-bill-table__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kp-bill-table__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--kernol-text-13);
  font-weight: 570;
  color: var(--kp-ink);
}
.kp-bill-table__sub { display: block; margin-top: 2px; font-size: var(--kernol-text-11); color: var(--kp-muted); }
.kp-bill-table__date { font-size: var(--kernol-text-13); color: var(--kp-ink-soft); white-space: nowrap; }
.kp-bill-table__date.is-overdue { color: var(--kp-alert-ink); font-weight: 600; }

/* The way to the payment page: one sentence and one button, on a sunk strip so
   it reads as the card's action rather than another row of the table. */
.kp-bill__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kernol-space-3) var(--kernol-space-4);
  padding: var(--kernol-space-4) var(--kernol-space-5);
  border-top: 1px solid var(--kp-border-subtle);
  background: var(--kernol-grey-25);
}
.kp-bill__actions-text { flex: 1 1 18rem; font-size: var(--kernol-text-13); color: var(--kp-ink-soft); }
.kp-bill__actions-text b { font-weight: 650; color: var(--kp-ink); }
.kp-bill__actions .kp-btn { flex: 0 0 auto; margin-left: auto; }

.kp-bill__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kernol-space-2) var(--kernol-space-5);
  padding: 12px var(--kernol-space-5);
  border-top: 1px solid var(--kp-border-subtle);
  font-size: var(--kernol-text-12);
  color: var(--kp-muted);
}
.kp-bill__foot-item { display: inline-flex; align-items: center; gap: 6px; }
.kp-bill__foot-item svg { color: var(--kp-faint); }
.kp-bill__foot-link { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: var(--kernol-text-13); }

/* Phone: the tables stack. Each cell becomes a labelled line, the amount stays
   bold, and the "next" highlight becomes a left rule rather than a band. */
@media (max-width: 720px) {
  .kp-bill__head { padding: var(--kernol-space-4); }
  .kp-bill__figure { margin-left: 0; text-align: left; min-width: 0; width: 100%; }
  .kp-bill__progress { padding: 0 var(--kernol-space-4) var(--kernol-space-4); }
  .kp-bill__block-head,
  .kp-bill__actions,
  .kp-bill__foot { padding-left: var(--kernol-space-4); padding-right: var(--kernol-space-4); }
  .kp-bill__actions .kp-btn { width: 100%; margin-left: 0; justify-content: center; }
  .kp-bill__foot-link { margin-left: 0; }

  .kp-bill-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .kp-bill-table,
  .kp-bill-table tbody,
  .kp-bill-table tr,
  .kp-bill-table td { display: block; }
  .kp-bill-table tr { padding: 10px var(--kernol-space-4); border-bottom: 1px solid var(--kp-border-subtle); }
  .kp-bill-table tr:last-child { border-bottom: 0; }
  .kp-bill-table tbody tr.is-next { border-left: 3px solid var(--kp-accent); }
  .kp-bill-table tbody tr.is-next td { background: transparent; }
  .kp-bill-table tbody td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px var(--kernol-space-3);
    padding: 4px 0;
    border: 0;
    text-align: right;
  }
  /* A cell's second line (the share, the reference) drops under its first rather
     than sitting between the label and the value. */
  .kp-bill-table tbody td .kp-bill-table__sub { flex: 1 0 100%; text-align: right; }
  .kp-bill-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: var(--kernol-text-11);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--kernol-tracking-eyebrow);
    color: var(--kp-faint);
    text-align: left;
  }
  .kp-bill-table__title { justify-content: flex-end; text-align: right; }
  .kp-bill-table__num { text-align: right; }
}