/* ============================================================================
   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--xs { width: 22px; height: 22px; font-size: var(--kernol-text-10); }
.kp-avatar--sm { width: 26px; height: 26px; font-size: var(--kernol-text-11); }
.kp-avatar--md { width: 32px; height: 32px; font-size: var(--kernol-text-12); }
.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); }
/* One box whether or not there is a photograph, so a row never changes height
   because somebody uploaded one. */
img.kp-avatar { object-fit: cover; background: var(--kernol-grey-100); }
.kp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Generated tones — the same seven the back office uses, keyed off the record
   rather than the render (Avatars::Palette), so a client sees their coordinator
   in the same colour the coordinator's colleagues do. */
.kp-avatar--c1 { background: var(--kernol-av-1-bg); color: var(--kernol-av-1-ink); }
.kp-avatar--c2 { background: var(--kernol-av-2-bg); color: var(--kernol-av-2-ink); }
.kp-avatar--c3 { background: var(--kernol-av-3-bg); color: var(--kernol-av-3-ink); }
.kp-avatar--c4 { background: var(--kernol-av-4-bg); color: var(--kernol-av-4-ink); }
.kp-avatar--c5 { background: var(--kernol-av-5-bg); color: var(--kernol-av-5-ink); }
.kp-avatar--c6 { background: var(--kernol-av-6-bg); color: var(--kernol-av-6-ink); }
.kp-avatar--c7 { background: var(--kernol-av-7-bg); color: var(--kernol-av-7-ink); }

/* An animal keeps the calm monogram it always had rather than a tone: the portal
   has no species icon set, and a pet's own photograph is the usual case here. */
.kp-avatar--pet { background: var(--kernol-tan-50); color: var(--kernol-tan-700); }

/* The client's own identity at the top of their profile — their picture, their
   name, and whose books they are on. */
.kp-profilehead {
  display: flex;
  align-items: center;
  gap: var(--kernol-space-4);
  padding-bottom: var(--kernol-space-4);
  margin-bottom: var(--kernol-space-4);
  border-bottom: 1px solid var(--kp-border-subtle);
}

.kp-profilehead__name { margin: 0; font-size: var(--kernol-text-18); font-weight: 650; color: var(--kp-ink); }
.kp-profilehead__meta { margin: 2px 0 0; font-size: var(--kernol-text-13); color: var(--kp-muted); }

/* ─── 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); }
.kp-menu__item.is-active { color: var(--kp-ink); font-weight: 650; }
.kp-menu__item.is-active svg { color: var(--kp-accent); }

/* The unread count, where Messages sits in the menu rather than in the bar. */
.kp-menu__count {
  margin-left: auto;
  min-width: 18px;
  padding: 0 6px;
  border-radius: var(--kernol-radius-full);
  background: var(--kp-alert);
  color: var(--kernol-text-on-dark);
  font-size: var(--kernol-text-10);
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* The four sections, folded into the account menu only where the top bar has no
   room for them. Above 900px .kp-nav carries them and this would be a duplicate. */
.kp-menu__sections { display: block; }
.kp-menu__sep { height: 1px; margin: 6px 0; border: 0; background: var(--kp-border-subtle); }

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

/* ─── 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; }

/* ── Segmented: the journey's four states along one line ──────────────────
   The portal's answer to the back office's bo-prog-track. Bands sit side by
   side in proportion — completed, in review, needs you, still ahead — and every
   one of them is repeated as a counted word underneath, so the bar is readable
   in greyscale and to anyone who cannot separate the hues. */
.kp-progress--seg { display: flex; height: 10px; }

.kp-progress__seg { height: 100%; transition: width 0.3s ease; }
.kp-progress__seg:first-child { border-start-start-radius: inherit; border-end-start-radius: inherit; }
.kp-progress__seg:last-child { border-start-end-radius: inherit; border-end-end-radius: inherit; }
.kp-progress__seg + .kp-progress__seg { box-shadow: inset 1px 0 0 var(--kp-surface); }

.kp-progress__seg--done     { background: var(--kp-done); }
.kp-progress__seg--review   { background: var(--kernol-periwinkle-500); }
.kp-progress__seg--action   { background: var(--kp-alert); }
/* The remainder. A visible fill rather than the track showing through, so
   "nothing has started" still draws a bar rather than an empty groove. */
.kp-progress__seg--upcoming { background: var(--kernol-grey-300); }

.kp-prog { display: flex; flex-direction: column; gap: 8px; }

.kp-prog__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.kp-prog__key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--kernol-text-12);
  color: var(--kp-muted);
}

.kp-prog__key b { color: var(--kp-ink); font-weight: 650; font-variant-numeric: tabular-nums; }

.kp-prog__dot { width: 8px; height: 8px; border-radius: var(--kernol-radius-full); background: currentColor; flex: none; }
.kp-prog__key--done .kp-prog__dot     { color: var(--kp-done); }
.kp-prog__key--review .kp-prog__dot   { color: var(--kernol-periwinkle-500); }
.kp-prog__key--action .kp-prog__dot   { color: var(--kp-alert); }
.kp-prog__key--upcoming .kp-prog__dot { color: var(--kernol-grey-400); }

/* The one figure a client repeats to somebody else. */
.kp-prog__key--action { color: var(--kp-alert-ink); font-weight: 550; }
.kp-prog__summary { margin: 0; font-size: var(--kernol-text-12); color: var(--kp-muted); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .kp-progress__fill, .kp-progress__seg { transition: none; }
}

/* ─── A saved file, as one chip ─────────────────────────────────────────
   The portal's face of shared/_attachment_chip. Calmer and roomier than the back
   office's — a client meets three of these on a page, not thirty — and it says
   what will happen, because "will this download or open?" is exactly the question
   a filename on its own leaves unanswered. */
.kp-filechip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-r);
  background: var(--kp-surface);
  color: var(--kp-ink-body);
  font-size: var(--kernol-text-13);
  text-decoration: none;
}
.kp-filechip:hover { border-color: var(--kp-border-strong); background: var(--kp-hover); }
.kp-filechip__type {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  border-radius: var(--kp-r-sm);
  background: var(--kp-surface-sunk);
  color: var(--kp-muted);
  font-size: 10px;
  font-weight: 700;
}
.kp-filechip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.kp-filechip__size { flex: none; color: var(--kp-faint); font-size: var(--kernol-text-11); font-variant-numeric: tabular-nums; }
/* A row of chips rather than a column of underlined filenames. */
.kp-filerow { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

/* ─── 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; }

/* Departed. The old rule put this on the sunk grey, which on a white hero card
   is very nearly invisible — a tile reading "12 days since departure" that a
   client has to hunt for. It now takes the teal the whole portal already uses
   for "this has happened": a soft ground, teal ink well over 4.5:1 on it, and a
   teal hairline. Soft rather than solid on purpose — a completed departure is
   good news, not a call to action, and it must not compete with the coral of
   "Action required" two blocks below. */
.kp-countdown--past {
  background: var(--kp-done-soft);
  color: var(--kp-done-ink);
  box-shadow: none;
  border: 1px solid var(--kernol-teal-200);
}
.kp-countdown--past .kp-countdown__icon { opacity: 1; }
.kp-countdown--past .kp-countdown__label { opacity: 1; }
.kp-countdown--past .kp-countdown__date { border-top-color: var(--kernol-teal-200); opacity: 1; color: var(--kernol-teal-700); }

/* Not booked yet. This one stays neutral: there is no state to celebrate. */
.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--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; }
}

/* ─── The journey file ───────────────────────────────────────────────────
   In the rail, between what is coming up and who is looking after the move: one
   thin line per thing the agency has recorded, grouped by kind.

   It used to be a full-width panel above the two columns, with a horizontal tab
   strip and every record expanded into a card. That was the right information in
   the wrong place — three hundred pixels competing with "what do I need to do",
   and a tab strip is the first thing to break on a 360px screen. A rail list has
   no width to lose: it scans, and a click opens the one record that was wanted.

   Colour does the grouping. Each kind takes one of the seven tinted pairs the
   product already declares, on the icon square only — a list where every row is
   coloured is not a list. */
.kp-jf .kp-card__head { gap: var(--kernol-space-2); }
.kp-jf__total {
  margin-left: auto;
  font-size: var(--kernol-text-11);
  font-weight: 650;
  color: var(--kp-muted);
  background: var(--kp-surface-sunk);
  border-radius: var(--kernol-radius-full);
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}

.kp-jf__groups { padding: 6px 0 8px; }
.kp-jf__group + .kp-jf__group { border-top: 1px solid var(--kp-border-subtle); margin-top: 6px; padding-top: 8px; }

.kp-jf__grouphead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px var(--kernol-space-4) 6px;
}

.kp-jf__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--kp-r-sm);
}

.kp-jf__icon--t1 { background: var(--kernol-av-1-bg); color: var(--kernol-av-1-ink); }
.kp-jf__icon--t2 { background: var(--kernol-av-2-bg); color: var(--kernol-av-2-ink); }
.kp-jf__icon--t3 { background: var(--kernol-av-3-bg); color: var(--kernol-av-3-ink); }
.kp-jf__icon--t4 { background: var(--kernol-av-4-bg); color: var(--kernol-av-4-ink); }
.kp-jf__icon--t5 { background: var(--kernol-av-5-bg); color: var(--kernol-av-5-ink); }
.kp-jf__icon--t6 { background: var(--kernol-av-6-bg); color: var(--kernol-av-6-ink); }
.kp-jf__icon--t7 { background: var(--kernol-av-7-bg); color: var(--kernol-av-7-ink); }

.kp-jf__grouplabel {
  min-width: 0;
  font-size: var(--kernol-text-11);
  font-weight: 700;
  letter-spacing: var(--kernol-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--kp-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kp-jf__count {
  margin-left: auto;
  flex: none;
  font-size: var(--kernol-text-11);
  font-weight: 650;
  color: var(--kp-faint);
  font-variant-numeric: tabular-nums;
}

.kp-jf__list { list-style: none; margin: 0; padding: 0; }

/* One record. Two lines at most, and the second is optional: a rail row that
   wraps to four lines is a card again. */
.kp-jf__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px var(--kernol-space-4);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.kp-jf__row:hover { background: var(--kp-hover); }
.kp-jf__row:hover .kp-jf__name { text-decoration: underline; }
.kp-jf__row:focus-visible { outline: none; box-shadow: inset var(--kernol-focus-ring); }

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

.kp-jf__name {
  display: block;
  font-size: var(--kernol-text-13);
  font-weight: 550;
  color: var(--kp-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kp-jf__note {
  display: block;
  margin-top: 1px;
  font-size: var(--kernol-text-11);
  color: var(--kp-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kp-jf__end { display: flex; align-items: center; gap: 6px; flex: none; }
.kp-jf__warn { display: inline-flex; color: var(--kp-alert); }
.kp-jf__files {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--kernol-text-11);
  color: var(--kp-faint);
  font-variant-numeric: tabular-nums;
}
.kp-jf__chev { color: var(--kp-faint); }

/* ─── The record modal ───────────────────────────────────────────────────
   A native <dialog>. The browser supplies the backdrop, the focus trap, Escape
   and the top layer that lets this escape the rail's sticky positioning, so none
   of it is reimplemented and none of it can be got wrong. */
.kp-modal {
  /* `margin: auto` is what centres a modal dialog, and it is the browser's own
     default — but Tailwind's preflight resets every element to `margin: 0`, which
     lands the panel in the top-left corner. Stated back explicitly. */
  margin: auto;
  width: min(560px, calc(100vw - 32px));
  max-height: min(85vh, 760px);
  padding: 0;
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-r-lg);
  background: var(--kp-surface);
  color: var(--kp-ink-body);
  box-shadow: var(--kernol-shadow-modal);
  overflow: hidden;
}

.kp-modal::backdrop { background: rgb(11 20 38 / 45%); }

.kp-modal__panel { display: flex; flex-direction: column; max-height: inherit; }

.kp-modal__head {
  display: flex;
  align-items: flex-start;
  gap: var(--kernol-space-3);
  padding: var(--kernol-space-4) var(--kernol-space-5);
  border-bottom: 1px solid var(--kp-border-subtle);
}

.kp-modal__titles { flex: 1; min-width: 0; }
.kp-modal__kind {
  display: block;
  font-size: var(--kernol-text-11);
  font-weight: 700;
  letter-spacing: var(--kernol-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--kp-muted);
}
.kp-modal__title { margin: 2px 0 0; font-size: var(--kernol-text-16); font-weight: 650; color: var(--kp-ink); }

.kp-modal__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--kp-r-sm);
  background: transparent;
  color: var(--kp-muted);
  cursor: pointer;
}
.kp-modal__close:hover { background: var(--kp-hover-strong); color: var(--kp-ink); }
.kp-modal__close:focus-visible { outline: none; box-shadow: var(--kernol-focus-ring); }

.kp-modal__body {
  padding: var(--kernol-space-5);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* On a phone the modal is a sheet: full width, anchored to the bottom, thumb
   distance from the close button. */
@media (max-width: 560px) {
  .kp-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 88vh;
    margin: auto auto 0;
    border-radius: var(--kp-r-lg) var(--kp-r-lg) 0 0;
    border-bottom: 0;
  }
  .kp-modal__head,
  .kp-modal__body { padding-inline: var(--kernol-space-4); }
}

/* ─── One record's detail ────────────────────────────────────────────────
   Shared by the modal and the shelf's own page, so the two cannot drift. */
.kp-rec__state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kp-rec__pet { display: inline-flex; align-items: center; gap: 6px; font-size: var(--kernol-text-12); color: var(--kp-muted); }

.kp-rec__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--kernol-space-3) var(--kernol-space-4);
  margin: var(--kernol-space-4) 0 0;
  padding: var(--kernol-space-4) 0 0;
  border-top: 1px solid var(--kp-border-subtle);
}

.kp-rec__facts dt {
  font-size: var(--kernol-text-11);
  font-weight: 600;
  letter-spacing: var(--kernol-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--kp-faint);
}

.kp-rec__facts dd {
  margin: 3px 0 0;
  font-size: var(--kernol-text-13);
  color: var(--kp-ink-body);
  overflow-wrap: anywhere;
}

.kp-rec__empty { margin: var(--kernol-space-4) 0 0; font-size: var(--kernol-text-13); color: var(--kp-muted); }
.kp-rec__filehead { margin: var(--kernol-space-4) 0 0; }
.kp-rec .kp-filerow { margin-top: 8px; }

.kp-rec__from {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--kernol-space-4) 0 0;
  padding-top: var(--kernol-space-3);
  border-top: 1px solid var(--kp-border-subtle);
  font-size: var(--kernol-text-12);
  color: var(--kp-muted);
}
.kp-rec__from svg { color: var(--kp-faint); flex: none; }

/* ─── The shelf's own page ───────────────────────────────────────────────
   Where a row leads when the modal cannot open. */
.kp-filepage { display: flex; flex-direction: column; gap: var(--kernol-space-4); max-width: 46rem; }
.kp-filepage__group .kp-card__head { gap: var(--kernol-space-3); }
.kp-filepage__record { padding: var(--kernol-space-5); }
.kp-filepage__record + .kp-filepage__record { border-top: 1px solid var(--kp-border-subtle); }
.kp-filepage__title { margin: 0 0 var(--kernol-space-3); font-size: var(--kernol-text-14); font-weight: 650; color: var(--kp-ink); }

/* ─── 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); }

/* Finished: teal, and quiet. The one state that has earned the right to recede. */
.kp-ms--done {
  background: var(--kernol-grey-25);
  border-color: var(--kp-border-subtle);
  border-left: 3px solid var(--kp-done);
  box-shadow: none;
}

/* With the team. Periwinkle, which the product already spends on "planned /
   being handled" and on nothing else, so it cannot be mistaken for either the
   blue of "in progress" or the teal of "done". */
.kp-ms--review {
  background: var(--kernol-periwinkle-50);
  border-color: var(--kernol-periwinkle-200);
  border-left: 3px solid var(--kernol-periwinkle-500);
  box-shadow: none;
}

/* Upcoming. The old rule made this identical to "done", which is the one pair a
   client must never confuse — "we have finished that" and "we have not started
   it". It is now its own thing: a lighter card on the page's own ground, a
   dashed left edge that reads as "not yet drawn in", and ink that is quiet but
   still legible. Deliberately no warm colour: nothing is wrong with a step that
   has not happened yet. */
.kp-ms--upcoming {
  background: var(--kp-bg);
  border-color: var(--kp-border-subtle);
  border-left: 3px dashed var(--kp-border-strong);
  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--review .kp-ms__marker { background: var(--kernol-periwinkle-100); color: var(--kernol-periwinkle-700); }
/* An outline rather than a fill: the step is drawn but not filled in yet. */
.kp-ms--upcoming .kp-ms__marker {
  background: transparent;
  border: 1.5px dashed var(--kp-border-strong);
  color: var(--kp-muted);
}

.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); }
/* Regular weight, not lighter ink: "upcoming" is a position in the journey, not
   a reason to be hard to read. */
.kp-ms--upcoming .kp-ms__title { font-weight: 570; }

.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;
}

/* The badge on a milestone's header. A tinted pill rather than bare coloured
   words, so the four states are told apart by shape as well as by hue — and
   every one of them is also a word. */
.kp-ms__state {
  padding: 2px 9px;
  border-radius: var(--kernol-radius-full);
}

.kp-ms__state--done { color: var(--kp-done-ink); background: var(--kp-done-soft); }
.kp-ms__state--current { color: var(--kernol-blue-700); background: var(--kernol-blue-50); }
.kp-ms__state--review { color: var(--kernol-periwinkle-700); background: var(--kernol-periwinkle-100); }
.kp-ms__state--upcoming {
  color: var(--kp-ink-soft);
  background: var(--kp-surface);
  box-shadow: inset 0 0 0 1px var(--kp-border);
}

.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); }

/* Yours to do: coral, and the only row in the timeline with a left accent. */
.kp-task--action {
  border-color: var(--kernol-red-200);
  background: var(--kp-alert-soft);
  border-left: 3px solid var(--kp-alert);
}
a.kp-task--action:hover { border-color: var(--kernol-red-500); }

/* With the team: periwinkle, the product's "being handled" colour. Not coral —
   a client has nothing to do here — and not grey, because something IS happening. */
.kp-task--review {
  border-color: var(--kernol-periwinkle-200);
  background: var(--kernol-periwinkle-50);
}

.kp-task--done { background: var(--kernol-grey-25); }

/* Still ahead. On the page's own ground with a dashed left edge, so it reads as
   "not yet" rather than as "done" — which is what it used to look like. */
.kp-task--upcoming {
  background: var(--kp-bg);
  border-color: var(--kp-border-subtle);
  border-left: 3px dashed var(--kp-border-strong);
}
.kp-task--upcoming .kp-task__title { color: var(--kp-ink-soft); }

.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);
}

/* With something outstanding the whole block is announced rather than merely
   present: the heading turns coral and carries an icon. Colour is never the
   signal on its own — the words change too ("Action required" / "You're all
   set") and so does the mark beside them. */
.kp-actions--live .kp-actions__head { color: var(--kp-alert-ink); }
.kp-actions--live .kp-eyebrow { color: var(--kp-alert-ink); }

.kp-actions__mark {
  display: inline-flex;
  vertical-align: -2px;
  margin-right: 6px;
  color: var(--kp-alert);
}

.kp-actions__count { font-size: var(--kernol-text-12); color: var(--kp-muted); }
.kp-actions--live .kp-actions__count { color: var(--kp-alert-ink); font-weight: 550; }

.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);
}

/* ── The one thing to do next ─────────────────────────────────────────────
   The first card in the rail, and the only one that moves. A heavier border, a
   coral ring, and a very slow breath: scale(1) → scale(1.015) → scale(1) over
   four seconds. Transform only — the card's box never changes size in layout, so
   nothing around it shifts and no reflow happens on any frame.

   Deliberately not a flash, a shake or a colour cycle. This is a professional
   tool a person opens to find out what is being asked of them; the card should
   catch the eye on the way past, not demand it. */
.kp-actioncard--now {
  border-color: var(--kernol-red-200);
  box-shadow: 0 0 0 3px var(--kp-alert-soft), var(--kp-shadow-card);
  transform-origin: center;
  animation: kp-breathe 4s ease-in-out infinite;
  will-change: transform;
}

.kp-actioncard__eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: var(--kernol-text-11);
  font-weight: 700;
  letter-spacing: var(--kernol-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--kp-alert-ink);
}

@keyframes kp-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

/* Somebody who has asked their system to stop animating things has asked for
   this too. The card keeps every other cue — the ring, the border, the eyebrow,
   the words — and simply stops breathing. */
@media (prefers-reduced-motion: reduce) {
  .kp-actioncard--now { animation: none; }
}

.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
   ========================================================================= */

/* The agency's mark, constrained rather than cropped: a wordmark keeps its
   aspect ratio and a square icon fills the tile. Fixed height so the bar never
   changes size with the file somebody uploaded. */
.kp-brand__logo {
  flex-shrink: 0;
  display: block;
  height: 34px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}

/* No logo on file: the agency's own initials, never a broken image and never
   Orppio's mark. */
.kp-brand__logo--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--kp-primary);
  color: var(--kernol-text-on-dark);
  font-size: var(--kernol-text-13);
  font-weight: 700;
  letter-spacing: .01em;
}

/* An agency name is longer than a product name; it gets the room a two-word
   wordmark needs and is cut off rather than pushing the navigation about. */
.kp-brand__name {
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .kp-brand__name { max-width: 9rem; }
}
.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: flex-start; gap: var(--kernol-space-4); }
.kp-photofield label { cursor: pointer; }
.kp-photofield__control { flex: 1; min-width: 0; }
.kp-photofield__remove {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: var(--kernol-text-12);
  color: var(--kp-muted);
}
.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; align-items: flex-end; gap: 8px; }
.kp-bubble--mine { justify-content: flex-end; }
/* The coordinator's face beside their message, on the agency's side only. It
   sits on the bubble's baseline so a long message does not push it up the page. */
.kp-bubble__avatar { flex: none; margin-bottom: 2px; }
.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; }
}