/* Keel hub (evan-keel) — app styles on top of the Keel UI kit (./keel/keel-ui.css).
   Everything here is built from kit tokens (var(--k-*)): Archivo, square corners, 2px rules,
   flush-left labels, Ocean primary actions. Never edit ./keel/; extend here instead.

   Sections
     1. Base & shell (layouts, session strip, bottom nav hooks)
     2. Public site (Keel Public 1a–1e): header menu, home, directory, info pages
     3. Account flows (Keel Public 2a–2e, Account 1a–1c): auth card, onboarding wizard
     4. Member shell: Today, Evan (chat, week, review, history), Settings and Support views. */

/* ════════════════════════════════════════════════════════════════ 1. Base & shell */
[hidden] { display: none !important; }

/* Header, main, then the footer/session strip pinned to the bottom of short pages. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--k-bg); color: var(--k-text); }
body > * { flex: none; }
.main { display: block; flex: 1 0 auto; min-width: 0; outline: none; }
.main:focus-visible { outline: none; }
.view { display: block; min-width: 0; }

/* Body layout set by app.js: public (pub-nav + footer), bare (auth card only), member (KeelBar). */
body[data-layout="bare"] { background: var(--k-surface); }

/* A trailing arrow drawn by CSS so the button's text (and accessible name) stays the bare label. */
.hub-arrow::after { content: "→"; margin-left: auto; padding-left: 12px; font-weight: 800; }

.hub-session {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
  padding: 10px 32px; border-top: 2px solid var(--k-divider);
  font-size: var(--k-fs-13); color: var(--k-muted);
}
.hub-session p { margin: 0; }
.hub-session-user strong { color: var(--k-text); font-weight: 600; }
.hub-session-ai:empty { display: none; }
.hub-session .k-btn { margin-left: auto; min-height: 44px; }
.hub-noscript { padding: 16px; }

@media (max-width: 720px) {
  .hub-session { padding: 10px 16px; }
}

/* ════════════════════════════════════════════════════════════════ 2. Public site */
.pub-nav { position: relative; }
.pub-footer { border-top: 2px solid var(--k-divider); }
.pub-menu > summary { list-style: none; cursor: pointer; font-size: 18px; }
.pub-menu > summary::-webkit-details-marker { display: none; }
.pub-menu-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  display: flex; flex-direction: column; padding: 4px 16px 16px;
  background: var(--k-bg); border-bottom: 2px solid var(--k-divider); box-shadow: var(--k-shadow-md);
}
.pub-menu-panel a:not(.k-btn) {
  display: flex; align-items: center; min-height: 48px; font-size: var(--k-fs-15);
  color: var(--k-text); text-decoration: none; border-bottom: 1px solid var(--k-divider);
}
.pub-menu-panel a[aria-current="page"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--k-text); padding-left: 12px; }
.pub-nav .pub-menu-panel .k-btn-primary { display: flex; margin-top: 16px; min-height: 48px; }
.pub-menu[open] > summary { background: var(--k-hover-wash); }

/* — Home (Keel Public 1a / 1e) — */
.pub-hero { display: grid; grid-template-columns: 7fr 5fr; border-bottom: 2px solid var(--k-divider); }
.pub-hero-main {
  display: flex; flex-direction: column; gap: 24px; padding: 72px 48px 56px;
  background: var(--k-hero); color: #ffffff; border-right: 2px solid var(--k-divider);
}
.pub-kicker {
  margin: 0; font-size: var(--k-fs-12); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--k-muted);
}
.pub-hero-main .pub-kicker { color: #bfe6f2; }
.pub-hero-main h1 {
  margin: 0; font-size: 76px; line-height: 0.98; letter-spacing: -0.045em; color: #ffffff; text-wrap: balance;
}
.pub-lede { margin: 0; max-width: 560px; font-size: 19px; line-height: 1.5; color: #e3f3f8; text-wrap: pretty; }
.pub-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.pub-only-phone { display: none; }

.pub-hero-aside { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 40px; background: var(--k-primary-tint); }
.pub-sample-label { font-size: var(--k-fs-11); letter-spacing: var(--k-tracking-label); text-transform: uppercase; color: var(--k-muted); }
.pub-sample { display: flex; flex-direction: column; background: var(--k-raised); box-shadow: var(--k-shadow-md); }
.pub-sample-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 16px; border-bottom: 2px solid var(--k-divider);
}
.pub-sample-head b { font-size: var(--k-fs-15); }
.pub-sample-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--k-divider); font-size: var(--k-fs-13-5);
}
.pub-sample-day { font-size: var(--k-fs-12); font-weight: 800; color: var(--k-muted); }
.pub-sample-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pub-sample-src { font-size: var(--k-fs-11-5); color: var(--k-muted); white-space: nowrap; }
.pub-sample-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; }
.pub-sample-btn {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  background: var(--k-primary); color: var(--k-on-primary); font-size: var(--k-fs-13); font-weight: 800;
}
.pub-sample-note { font-size: var(--k-fs-12); color: var(--k-muted); }

.pub-strip { display: grid; grid-template-columns: repeat(8, 1fr); height: 8px; }
.pub-strip span { background: var(--k-app); }

.pub-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 2px solid var(--k-divider); }
.pub-app-tile {
  display: flex; flex-direction: column; gap: 8px; padding: 28px 28px 32px;
  background: var(--k-app-tint); border-top: 4px solid var(--k-app);
  border-right: 1px solid var(--k-divider); border-bottom: 1px solid var(--k-divider);
  color: var(--k-text); text-decoration: none;
}
.pub-app-tile:hover { background: var(--k-raised); color: var(--k-text); }
.pub-app-tile:focus-visible { outline-offset: -2px; }
.pub-app-name { display: flex; align-items: center; gap: 8px; font-size: var(--k-fs-20); font-weight: 800; line-height: 1.1; }
.pub-app-blurb { font-size: var(--k-fs-13-5); color: var(--k-muted); text-wrap: pretty; }

.pub-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 2px solid var(--k-divider); }
.pub-principle { display: flex; flex-direction: column; gap: 10px; padding: 40px 48px; border-right: 2px solid var(--k-divider); }
.pub-principle:last-child { border-right: 0; }
.pub-principle-n { font-size: 48px; font-weight: 800; line-height: 1; color: var(--k-primary); }
.pub-principle h2 { margin: 0; font-size: var(--k-fs-20); letter-spacing: -0.01em; }
.pub-principle p { margin: 0; font-size: var(--k-fs-14); color: var(--k-muted); }

/* The ink band keeps Ink + Shell in both themes (it is a brand field, like the hero). */
.pub-band { --k-focus: #f8f6f1; display: grid; grid-template-columns: 5fr 7fr; background: var(--k-ink); color: var(--k-shell); }
.pub-band-main { display: flex; flex-direction: column; gap: 14px; padding: 48px; border-right: 2px solid rgba(248, 246, 241, 0.25); }
.pub-band-main h2 { margin: 0; font-size: var(--k-fs-40); letter-spacing: -0.03em; color: var(--k-shell); }
.pub-band-sub { margin: 0; font-size: var(--k-fs-15); color: #c5d3e2; }
.pub-band-main .k-btn { align-self: flex-start; min-width: 220px; min-height: 48px; padding: 0 18px; }
.pub-promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; padding: 48px; font-size: var(--k-fs-14); }
.pub-promise { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 2px solid rgba(248, 246, 241, 0.3); }
.pub-promise b { color: var(--k-shell); }
.pub-promise span { color: #c5d3e2; }
.pub-band-phone { display: none; }

/* — Public app directory (Keel Public 1c) — */
.pub-dir-head { display: flex; flex-direction: column; gap: 10px; padding: 40px 36px 24px; border-bottom: 2px solid var(--k-divider); }
.pub-dir-head h1 { margin: 0; font-size: var(--k-fs-44); letter-spacing: -0.035em; }
.pub-dir-head p:not(.pub-kicker) { margin: 0; max-width: 640px; color: var(--k-text-2); }
.pub-dir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.pub-dir li { display: flex; min-width: 0; }
.pub-dir-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; flex: 1; min-width: 0;
  padding: 22px 36px; border-bottom: 1px solid var(--k-divider); border-right: 1px solid var(--k-divider);
  color: var(--k-text); text-decoration: none;
}
.pub-dir-row:hover { background: var(--k-raised); color: var(--k-text); }
.pub-dir-row:focus-visible { outline-offset: -2px; }
.pub-dir-name { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 800; line-height: 1.1; }
.pub-dir-areas { grid-column: 1 / -1; font-size: var(--k-fs-13); color: var(--k-muted); }
.pub-dir-foot { padding: 20px 36px 32px; font-size: var(--k-fs-14); color: var(--k-text-2); }
.pub-dir-foot p { margin: 0 0 8px; }

/* — Info pages (server-rendered /pricing /about /terms /privacy and the 404) — */
.info-page { display: block; }
.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 2px solid var(--k-divider); }
.price-intro { display: flex; flex-direction: column; gap: 18px; padding: 64px 48px; border-right: 2px solid var(--k-divider); }
.price-intro h1 { margin: 0; font-size: var(--k-fs-64); line-height: 1; letter-spacing: -0.04em; }
.price-intro p:not(.pub-kicker) { margin: 0; max-width: 460px; font-size: var(--k-fs-17); color: var(--k-text-2); }
.price-card .k-tag { align-self: flex-start; }
.price-card { display: flex; flex-direction: column; gap: 18px; padding: 48px; background: var(--k-raised); }
.price-figure { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.price-figure b { font-size: 96px; font-weight: 800; line-height: 1; letter-spacing: -0.05em; }
.price-figure span { font-size: 18px; color: var(--k-muted); }
.price-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--k-divider); }
.price-apps li { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--k-divider); font-size: var(--k-fs-14); }
.price-checks { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--k-fs-14); }
.price-checks li::before { content: "✓ "; }
.price-card .k-btn { min-height: 52px; padding: 0 18px; font-size: 16px; }
.price-note { margin: 0; font-size: var(--k-fs-12-5); color: var(--k-muted); }
.faq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.faq-item { display: flex; flex-direction: column; gap: 8px; padding: 32px 48px; border-right: 1px solid var(--k-divider); }
.faq-item:last-child { border-right: 0; }
.faq-item h2 { margin: 0; font-size: var(--k-fs-17); letter-spacing: -0.01em; }
.faq-item p { margin: 0; font-size: var(--k-fs-14); color: var(--k-muted); }

.about { display: grid; grid-template-columns: 7fr 5fr; border-bottom: 2px solid var(--k-divider); }
.about-main { display: flex; flex-direction: column; gap: 18px; padding: 64px 48px; border-right: 2px solid var(--k-divider); }
.about-main h1 { margin: 0; font-size: var(--k-fs-64); line-height: 1; letter-spacing: -0.04em; }
.about-main p:not(.pub-kicker) { margin: 0; max-width: 620px; font-size: var(--k-fs-17); line-height: 1.6; color: var(--k-text-body); }
.about-rule { height: 2px; background: var(--k-divider); border: 0; margin: 4px 0; max-width: 620px; }
.about-principles { font-size: var(--k-fs-14) !important; color: var(--k-muted) !important; }
.about-side { display: flex; flex-direction: column; gap: 0; padding: 48px; background: var(--k-raised); }
.about-side h2 { margin: 0 0 12px; font-size: var(--k-fs-11-5); font-weight: 600; letter-spacing: var(--k-tracking-label); text-transform: uppercase; color: var(--k-muted); }
.about-side ul { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--k-divider); }
.about-side li { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--k-divider); font-size: var(--k-fs-14); }
.about-side li span:last-child { margin-left: auto; color: var(--k-muted); font-size: var(--k-fs-12-5); }

.legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); border-bottom: 2px solid var(--k-divider); }
.legal-nav { display: flex; flex-direction: column; padding: 40px 0; border-right: 2px solid var(--k-divider); font-size: var(--k-fs-14); }
.legal-nav a { display: flex; align-items: center; min-height: 44px; padding: 8px 24px; color: var(--k-text); text-decoration: none; border-left: 3px solid transparent; }
.legal-nav a:hover { background: var(--k-hover-wash); color: var(--k-text); }
.legal-nav a[aria-current="page"] { font-weight: 600; background: var(--k-surface); border-left-color: var(--k-text); }
.legal-body { display: flex; flex-direction: column; gap: 10px; max-width: 760px; padding: 40px 48px 56px; }
.legal-body h1 { margin: 0 0 8px; font-size: var(--k-fs-44); letter-spacing: -0.03em; }
.legal-updated { margin: 0; font-size: var(--k-fs-13); color: var(--k-muted); }
.legal-body h2 { margin: 18px 0 0; font-size: var(--k-fs-17); letter-spacing: -0.01em; }
.legal-body p { margin: 0; font-size: var(--k-fs-15); line-height: 1.6; color: var(--k-text-body); }

.nf { display: flex; flex-direction: column; gap: 14px; max-width: 560px; padding: 64px 48px 72px; }
.nf .nf-code { margin: 0; font-size: 96px; font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: var(--k-primary); }
.nf h1 { margin: 0; font-size: var(--k-fs-30); }
.nf p { margin: 0; font-size: var(--k-fs-14); color: var(--k-muted); }
.nf-links { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--k-divider); }
.nf-links a { display: flex; align-items: center; min-height: 48px; padding: 12px 0; border-bottom: 1px solid var(--k-divider); color: var(--k-text); text-decoration: none; }
.nf-links a::after { content: "→"; margin-left: auto; }
.nf-links a:hover { background: var(--k-row-wash); color: var(--k-text); }

@media (max-width: 960px) {
  .pub-hero { grid-template-columns: minmax(0, 1fr); }
  .pub-hero-main { border-right: 0; border-bottom: 2px solid var(--k-divider); }
  .pub-hero-main h1 { font-size: 60px; }
  .pub-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-principle { padding: 32px; }
  .pub-band-main, .pub-promises { padding: 36px 32px; }
}
@media (max-width: 720px) {
  .pub-hero { grid-template-columns: minmax(0, 1fr); }
  .pub-hero-main { gap: 18px; padding: 32px 20px; border-right: 0; }
  .pub-hero-main .pub-kicker { font-size: var(--k-fs-11); }
  .pub-hero-main h1 { font-size: 44px; line-height: 1; letter-spacing: -0.04em; }
  .pub-lede { font-size: 16px; }
  .pub-only-desktop { display: none; }
  .pub-only-phone { display: inline; }
  .pub-cta .k-btn-cta { flex: 1 1 100%; min-width: 0; padding: 0 16px; }
  .pub-cta .k-btn-outline-inverse, .pub-hero-aside, .pub-strip, .pub-principles, .pub-band-main, .pub-promises { display: none; }
  .pub-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 0; }
  .pub-app-tile {
    flex-direction: row; align-items: center; min-height: 56px; padding: 16px;
    border-top: 0; border-left: 4px solid var(--k-app);
  }
  .pub-app-name { font-size: var(--k-fs-15); font-weight: 600; }
  .pub-app-blurb { display: none; }
  .pub-band { grid-template-columns: minmax(0, 1fr); }
  .pub-band-phone { display: flex; flex-direction: column; gap: 8px; padding: 24px 20px; font-size: var(--k-fs-13-5); }
  .pub-band-phone b { color: var(--k-shell); }
  .pub-band-phone span { color: #c5d3e2; }

  .pub-dir-head { padding: 28px 16px 20px; }
  .pub-dir-head h1 { font-size: var(--k-fs-36); }
  .pub-dir { grid-template-columns: minmax(0, 1fr); }
  .pub-dir-row { padding: 18px 16px; border-right: 0; }
  .pub-dir-foot { padding: 20px 16px 28px; }

  .price-grid, .about, .faq, .legal { grid-template-columns: minmax(0, 1fr); }
  .price-intro, .about-main { padding: 32px 16px; border-right: 0; border-bottom: 2px solid var(--k-divider); }
  .price-intro h1, .about-main h1 { font-size: var(--k-fs-44); }
  .price-card, .about-side { padding: 28px 16px; }
  .price-figure b { font-size: 72px; }
  .faq-item { padding: 24px 16px; border-right: 0; border-bottom: 1px solid var(--k-divider); }
  .legal-nav { flex-direction: row; padding: 0; border-right: 0; border-bottom: 2px solid var(--k-divider); }
  .legal-nav a { flex: 1; border-left: 0; border-bottom: 3px solid transparent; }
  .legal-nav a[aria-current="page"] { border-bottom-color: var(--k-text); }
  .legal-body { padding: 28px 16px 40px; }
  .legal-body h1 { font-size: var(--k-fs-36); }
  .nf { padding: 40px 16px 56px; }
  .nf .nf-code { font-size: 72px; }
}

/* ════════════════════════════════════════════════════════════════ 3. Account flows */
/* — Sign in / create account / reset (Keel Public 2a–2c) — */
.auth-shell { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 16px 64px; }
.auth-card {
  display: flex; flex-direction: column; gap: 16px; width: min(100%, 440px); margin: 0;
  padding: 28px 24px; background: var(--k-bg);
  border: 1px solid color-mix(in srgb, var(--k-text) 15%, transparent); box-shadow: 0 1px 3px rgba(23, 35, 64, 0.08);
}
.auth-brand { display: flex; align-items: center; gap: 8px; padding-bottom: 16px; border-bottom: 2px solid var(--k-divider); }
.auth-brand .k-wordmark { font-size: 19px; }
.auth-card h1 { margin: 0; font-size: var(--k-fs-30); letter-spacing: -0.03em; }
.auth-sub { margin: 0; font-size: var(--k-fs-13-5); color: var(--k-muted); }
.auth-kicker { margin: 0; font-size: var(--k-fs-11); letter-spacing: var(--k-tracking-label); text-transform: uppercase; color: var(--k-muted); }
.auth-progress { display: grid; grid-template-columns: repeat(var(--steps, 6), minmax(0, 1fr)); gap: 4px; margin-top: -6px; }
.auth-progress span { height: 4px; background: var(--k-track); }
.auth-progress span.is-on { background: var(--k-primary); }
.auth-card .k-field { gap: 6px; }
.auth-card .k-input { min-height: 44px; }
.auth-error {
  margin: 0; padding: 10px 12px; font-size: var(--k-fs-13); line-height: 1.55;
  border-left: 4px solid var(--k-error); background: var(--k-tone-safety-bg); color: var(--k-tone-safety-fg);
}
.auth-error:empty { display: none; }
.auth-strength { font-size: var(--k-fs-12); color: var(--k-muted); }
.auth-strength.is-strong { color: var(--k-success); }
.auth-agree { display: flex; align-items: flex-start; gap: 10px; font-size: var(--k-fs-13); line-height: 1.5; }
.auth-agree input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--k-primary); }
.auth-agree a { color: var(--k-link-strong); }
.auth-submit { min-height: 48px; padding: 0 16px; }
.auth-link { align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--k-fs-13); color: var(--k-link-strong); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth-link:hover { color: var(--k-link-hover); }
.auth-alt { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: var(--k-fs-13); color: var(--k-muted); }
.auth-foot { margin: 0; font-size: var(--k-fs-12); color: var(--k-muted); }
.auth-aside { margin: 0; max-width: 440px; font-size: var(--k-fs-13); color: var(--k-muted); text-align: center; }
.auth-aside a { color: var(--k-link-strong); }
.auth-card [aria-busy="true"] { cursor: progress; }

/* — Onboarding wizard (Account 1a–1c, Public 2e, details step) — */
.wizard { display: block; }
.wizard > .k-note { margin: 16px 32px 0; }
.ob-form { margin: 0; }
.ob-goals { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.ob-goals legend { margin-bottom: 8px; }
.ob-error { margin: 0; font-size: var(--k-fs-13); color: var(--k-error); }
.ob-error:empty { display: none; }

.ob-access { display: grid; grid-template-columns: 340px minmax(0, 1fr); border-bottom: 2px solid var(--k-divider); }
.ob-access-intro { display: flex; flex-direction: column; gap: 14px; padding: 32px; border-right: 2px solid var(--k-divider); }
.ob-access-intro h1 { margin: 0; font-size: var(--k-fs-36); line-height: 1.05; letter-spacing: -0.03em; }
.ob-access-intro p { margin: 0; font-size: var(--k-fs-14); color: var(--k-muted); text-wrap: pretty; }
.ob-coach { display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--k-raised); border-top: 2px solid var(--k-divider-strong); font-size: var(--k-fs-13); }
.ob-coach span { color: var(--k-muted); }
.ob-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; border: 0; min-width: 0; }
.ob-app {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; cursor: pointer;
  border-bottom: 1px solid var(--k-divider); border-right: 1px solid var(--k-divider);
}
.ob-app:hover { background: var(--k-raised); }
.ob-app:has(input:focus-visible) { outline: 2px solid var(--k-focus); outline-offset: -2px; }
.ob-app input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--k-primary); }
.ob-app-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob-app-name { display: flex; align-items: center; gap: 8px; font-size: var(--k-fs-14); font-weight: 600; }
.ob-app-note { font-size: var(--k-fs-12-5); color: var(--k-muted); }
.ob-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 32px; border-bottom: 2px solid var(--k-divider); }
.ob-actions .k-btn { min-height: 44px; }
.ob-actions-spacer { flex: 1; }
.ob-actions .k-btn-primary { min-width: 220px; }

@media (max-width: 720px) {
  .auth-shell { padding: 24px 12px 40px; }
  .wizard > .k-note { margin: 12px 16px 0; }
  .ob-access { grid-template-columns: minmax(0, 1fr); }
  .ob-access-intro { padding: 24px 16px; border-right: 0; border-bottom: 2px solid var(--k-divider); }
  .ob-access-intro h1 { font-size: var(--k-fs-28); }
  .ob-apps { grid-template-columns: minmax(0, 1fr); }
  .ob-app { padding: 14px 16px; border-right: 0; }
  .ob-actions { padding: 16px; }
  .ob-actions-spacer { display: none; }
  .ob-actions .k-btn { flex: 1 1 100%; }
  .ob-actions .k-btn-primary { order: -1; }
}

/* ════════════════════════════════════════════════════════════════ 4. Member shell (Keel Suite, Account & Evan routes) */
/* Phone/desktop variants of the same control (Suite 1a vs 1b copy). */
.hub-phone { display: none; }
@media (max-width: 720px) {
  .hub-desk { display: none !important; }
  .hub-phone { display: inline; }
  .hub-arrow-phone::after { content: "→"; margin-left: auto; padding-left: 12px; font-weight: 800; }
}
.hub-fail { padding: 24px 32px; }
.hub-app-cue { display: inline-flex; align-items: center; gap: 6px; }
.hub-details > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: var(--k-fs-14); font-weight: 600; list-style: none; }
.hub-details > summary::-webkit-details-marker { display: none; }
.hub-details > summary::before { content: "▸"; font-size: 12px; }
.hub-details[open] > summary::before { content: "▾"; }
.k-block > .k-state, .k-block > div > .k-state { padding: 4px 0; }
.hub-details[open] > summary { margin-bottom: 8px; }
.hub-setup { display: flex; flex-direction: column; gap: 6px; }
.hub-setup-status:empty { display: none; }
.k-state .k-btn { min-height: 44px; }
.k-state .hub-setup { align-self: flex-start; }
.k-month-more { font-size: var(--k-fs-10-5); color: var(--k-muted); }
.k-btn-group .k-btn { min-height: 44px; }

/* Status badges read as kit tags (square, tone colours); class names are the status vocabulary. */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; font-size: var(--k-fs-11); line-height: 1.55;
  letter-spacing: 0.02em; white-space: nowrap; background: var(--k-tone-neutral-bg); color: var(--k-tone-neutral-fg);
}
.badge-healthy, .badge-connected { background: var(--k-tone-success-bg); color: var(--k-tone-success-fg); }
.badge-unavailable, .badge-failed { background: var(--k-tone-safety-bg); color: var(--k-tone-safety-fg); }
.badge-warn, .badge-unknown, .badge-degraded { background: var(--k-tone-warn-bg); color: var(--k-tone-warn-fg); }
.badge.badge-auth { background: var(--k-tone-warn-bg); color: var(--k-tone-warn-fg); }
.badge-simulated { background: var(--k-tone-info-bg); color: var(--k-tone-info-fg); }

/* — Today (Suite 1a desktop / 1b phone) — */
.today-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 2px solid var(--k-divider); }
.today-hero-main { display: flex; flex-direction: column; gap: 14px; padding: 40px 40px 36px; border-right: 2px solid var(--k-divider); }
.today-hero-main h1 { margin: 6px 0 0; font-size: var(--k-fs-44); line-height: 1.02; letter-spacing: var(--k-tracking-h1); text-wrap: balance; }
.today-tagline { display: block; }
.today-sub { margin: 0; font-size: var(--k-fs-15); color: var(--k-text-2); }
.today-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.today-ctas .k-btn { min-height: 44px; padding: 0 16px; }
.today-day { display: flex; flex-direction: column; min-width: 0; }
.today-rows { display: flex; flex-direction: column; min-width: 0; }
.today-rows > .k-note { margin: 16px 24px 0; }
.today-rows > .k-state { padding: 32px; }
.today-rows > .plan-not-read { margin: 0; padding: 12px 28px 14px; border-top: 1px solid var(--k-divider); }
.today-list { border-top: 0; }
.today-list .k-list-row { gap: 16px; min-height: 80px; padding: 14px 28px; }
.today-list .k-list-lead { width: 72px; font-size: var(--k-fs-15); font-weight: 800; color: var(--k-text); }
.today-list .k-list-title { font-size: var(--k-fs-15); }
.today-list .k-list-meta { font-size: var(--k-fs-12-5); }
.today-more { padding: 14px 28px; font-size: var(--k-fs-13); }
.today-preview:empty { display: none; }
.today-preview { padding: 24px 40px; border-bottom: 2px solid var(--k-divider); background: var(--k-raised); }
.today-apps-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; padding: 22px 40px 12px; }
.today-apps-head h2 { margin: 0; font-size: var(--k-fs-20); font-weight: 800; letter-spacing: -0.02em; }
.today-apps-head .k-block-meta { margin-left: 0; }
.today-apps .k-app-tile { min-height: 128px; }
.adapt-out:empty { display: none; }
@media (max-width: 720px) {
  .today-hero { grid-template-columns: minmax(0, 1fr); }
  .today-hero-main { gap: 12px; padding: 22px 16px 20px; border-right: 0; border-bottom: 2px solid var(--k-divider); }
  .today-hero-main h1 { margin: 0; font-size: var(--k-fs-32, 32px); }
  .today-tagline, .today-sub { display: none; }
  .today-ctas { margin-top: 4px; }
  .today-ctas .k-btn-primary { flex: 1 1 100%; min-height: 48px; }
  .today-list .k-list-row { min-height: 60px; gap: 12px; padding: 12px 16px; }
  .today-list .k-list-lead { width: 58px; font-size: var(--k-fs-12-5); white-space: nowrap; }
  .today-list .k-list-meta { font-size: 0; }
  .today-list .k-list-meta .k-dot { width: 8px; height: 8px; }
  .today-rows > .k-note { margin: 12px 16px 0; }
  .today-rows > .k-state { padding: 20px 16px; }
  .today-rows > .plan-not-read { padding: 10px 16px 12px; }
  .today-preview { padding: 16px; }
  .today-apps-head { display: none; }
  .today-apps .k-app-tile { min-height: 64px; }
}

/* — Weekly plan (Suite 2a) — */
.plan-head { align-items: flex-end; }
.plan-head-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.plan-modes .k-seg-opt { min-height: 40px; padding: 0 14px; border: 0; background: transparent; font: inherit; font-size: var(--k-fs-13-5); color: var(--k-text); cursor: pointer; }
.plan-modes .k-seg-opt[aria-pressed="true"] { background: var(--k-app-deep); color: var(--k-on-app); }
/* Beat the kit's hover wash (0,4,1) so the selected mode keeps its fill under the pointer. */
.plan-modes .k-seg-opt.k-seg-opt[aria-pressed="true"]:hover { background: var(--k-app-deep); color: var(--k-on-app); }
.plan-modes .k-seg-opt:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 2px; }
.plan-nav { display: flex; gap: 6px; }
.plan-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 420px; }
.plan-body { display: flex; flex-direction: column; gap: 0; min-width: 0; border-right: 2px solid var(--k-divider); }
.plan-body > .k-note { margin: 16px 20px 0; }
.plan-body > .k-state { padding: 32px; }
.plan-body > .k-list { margin: 0 28px; }
.plan-body > .k-grid { border-top: 0; }
.plan-daily { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; padding: 12px 20px; font-size: var(--k-fs-12-5); color: var(--k-text-2); border-bottom: 1px solid var(--k-divider); }
.plan-daily b { font-size: var(--k-fs-11); letter-spacing: var(--k-tracking-label); text-transform: uppercase; color: var(--k-muted); }
.plan-week { border-left: 0; }
.plan-week .k-week-day { min-height: 420px; padding-bottom: 12px; }
.plan-week .k-week-head { padding: 12px 12px 10px; font-size: var(--k-fs-13-5); }
.plan-week .k-week-item { margin: 0 8px; padding: 9px 10px; border-top: 2px solid var(--k-divider-strong); gap: 4px; }
.plan-week .k-week-item:first-of-type { margin-top: 2px; }
.plan-week .k-week-item-meta { display: block; font-size: var(--k-fs-11); }
.plan-week .k-week-item-meta .k-dot { width: 6px; height: 6px; margin-right: 5px; vertical-align: 1px; }
.plan-week .k-week-item-title { font-size: var(--k-fs-13); }
.plan-week .k-week-item.is-proposed { border-top-color: var(--k-caution); }
.plan-week .k-week-item .k-tag { align-self: flex-start; font-size: var(--k-fs-11); }
.plan-aside { display: flex; flex-direction: column; gap: 14px; padding: 28px 24px; }
.plan-aside .k-note .k-btn { min-height: 44px; }
.plan-aside-title { margin: 0; font-size: var(--k-fs-11-5); font-weight: 600; letter-spacing: var(--k-tracking-label); text-transform: uppercase; color: var(--k-muted); }
.plan-why { margin: 0; }
.plan-why dt { font-size: var(--k-fs-14-5); font-weight: 800; }
.plan-why dd { margin: 4px 0 0; padding-bottom: 14px; margin-bottom: 14px; font-size: var(--k-fs-13-5); color: var(--k-text-2); border-bottom: 1px solid var(--k-divider); }
.plan-access { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--k-tone-info-bg); color: var(--k-tone-info-fg); font-size: var(--k-fs-13); }
.plan-access b { font-size: var(--k-fs-13-5); }
.plan-access a { align-self: flex-start; color: inherit; }
@media (max-width: 960px) {
  .plan-layout { grid-template-columns: minmax(0, 1fr); }
  .plan-body { border-right: 0; border-bottom: 2px solid var(--k-divider); }
}
@media (max-width: 720px) {
  .plan-body > .k-list { margin: 0 16px; }
  .plan-body > .k-note { margin: 12px 16px 0; }
  /* Phones read the week as a day-by-day agenda instead of seven narrow columns. */
  .plan .plan-week { display: flex; flex-direction: column; min-width: 0; border-left: 0; }
  .plan-week .k-week-day { min-height: 0; padding-bottom: 12px; border-right: 0; border-bottom: 1px solid var(--k-divider); }
  .plan-week .k-week-head { padding: 12px 16px 8px; border-bottom: 0; }
  .plan-week .k-week-item { margin: 0 16px; }
  .plan-aside { padding: 20px 16px; }
}

/* — Review (Suite 2b) and Edit first (Account 1e) — */
.review-layout { display: grid; grid-template-columns: 380px minmax(0, 1fr); min-height: 560px; }
.review-side { display: flex; flex-direction: column; border-right: 2px solid var(--k-divider); min-width: 0; }
.review-side-head { padding: 26px 24px 18px; border-bottom: 2px solid var(--k-divider); }
.review-count { margin: 0; font-size: var(--k-fs-24, 24px); font-weight: 800; letter-spacing: -0.02em; }
.review-side-head p { margin: 6px 0 0; font-size: var(--k-fs-13); color: var(--k-muted); }
.review-list { display: flex; flex-direction: column; outline: none; }
.review-list:focus-visible { outline: 2px solid var(--k-focus); outline-offset: -2px; }
.review-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 24px 18px 28px; border-bottom: 1px solid var(--k-divider); border-left: 4px solid transparent; cursor: pointer; }
.review-opt:hover { background: var(--k-row-wash); }
.review-opt[aria-selected="true"] { background: var(--k-raised); border-left-color: var(--k-divider-strong); }
.review-opt-apps { display: inline-flex; align-items: center; gap: 6px; font-size: var(--k-fs-12); color: var(--k-text-2); }
.review-opt-title { font-size: var(--k-fs-14-5); line-height: 1.35; }
.review-detail { display: flex; flex-direction: column; gap: 14px; padding: 32px 36px; min-width: 0; }
.review-detail > .k-state { padding: 20px; background: var(--k-raised); }
.review-from { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--k-fs-12-5); color: var(--k-text-2); }
.review-title { margin: 4px 0 6px; font-size: var(--k-fs-36); font-weight: 800; line-height: 1.1; letter-spacing: var(--k-tracking-h1); text-wrap: balance; }
.review-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 2px solid var(--k-divider); }
.review-now, .review-after { display: flex; flex-direction: column; gap: 6px; padding: 18px; min-width: 0; border-bottom: 1px solid var(--k-divider); }
.review-now { border-right: 2px solid var(--k-divider); }
.review-after { background: var(--k-raised); }
.review-now p, .review-after p { margin: 0; font-size: var(--k-fs-15); line-height: 1.5; }
.review-after p { font-weight: 600; }
.review-k { font-size: var(--k-fs-11); letter-spacing: var(--k-tracking-label); text-transform: uppercase; color: var(--k-muted); }
.review-after .review-k { color: var(--k-link-strong); font-weight: 600; }
.review-h { margin: 6px 0 0; font-size: var(--k-fs-15); font-weight: 800; }
.review-p { margin: 0; font-size: var(--k-fs-14-5); line-height: 1.6; color: var(--k-text-body); }
.review-touch { margin: 0; padding-left: 18px; font-size: var(--k-fs-13-5); color: var(--k-text-2); line-height: 1.6; }
.review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 2px solid var(--k-divider); }
.review-actions .k-btn-primary { min-width: 200px; }
.review-actions .k-btn-secondary { min-width: 140px; }
.review-edit { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-weight: 800; font-size: var(--k-fs-14); color: var(--k-link-strong); text-decoration: none; }
.review-edit:hover { text-decoration: underline; }
.review-undo { margin-left: auto; font-size: var(--k-fs-12-5); color: var(--k-muted); }
.edit-changes { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 860px) {
  .review-layout { grid-template-columns: minmax(0, 1fr); }
  .review-side { border-right: 0; border-bottom: 2px solid var(--k-divider); }
  .review-detail { padding: 22px 16px; }
  .review-title { font-size: var(--k-fs-28); }
  .review-compare { grid-template-columns: minmax(0, 1fr); }
  .review-now { border-right: 0; }
  .review-undo { margin-left: 0; flex-basis: 100%; }
  .review-actions .k-btn-primary, .review-actions .k-btn-secondary { flex: 1 1 140px; min-width: 0; }
}
@media (max-width: 720px) {
  .review-side-head { padding: 20px 16px 14px; }
  .review-opt { padding: 14px 16px 14px 20px; }
}

/* — Ask Evan (Suite 2c; desktop workspace) — */
/* Suite 2c has no tinted head over the chat: the heading stays for screen readers and focus, so the
   composer and the suggestion chips fit in the first view. */
.evan .k-head { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.workspace { display: grid; grid-template-columns: 240px minmax(0, 1fr) 320px; align-items: stretch; min-height: 560px; }
.evan-threads { border-right: 2px solid var(--k-divider); }
.threads { display: flex; flex-direction: column; gap: 8px; padding: 20px; max-height: 76vh; overflow-y: auto; }
.threads .k-block-title { margin: 10px 0 2px; }
.evan-thread { min-height: 44px; padding: 8px 10px; border: 0; border-left: 3px solid transparent; background: transparent; font: inherit; font-size: var(--k-fs-13-5); text-align: left; color: var(--k-text); cursor: pointer; overflow-wrap: anywhere; }
.evan-thread:hover { background: var(--k-hover-wash); }
.evan-thread[aria-current="true"] { background: var(--k-primary-tint); border-left-color: var(--k-primary); font-weight: 600; color: var(--k-text); }
.conversation { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px 24px; }
.evan-access { margin: 0; padding: 10px 14px; font-size: var(--k-fs-13); background: var(--k-tone-info-bg); color: var(--k-tone-info-fg); }
.evan-access a { color: inherit; }
/* The log is sized to the viewport so the chips and composer below it stay in the first view. */
.log { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 240px; max-height: 62vh; max-height: calc(100dvh - 360px); overflow-y: auto; padding: 6px 2px; }
.msg { max-width: 85%; padding: 12px 14px; white-space: pre-wrap; font-size: var(--k-fs-15); line-height: 1.5; overflow-wrap: anywhere; }
.msg-user { align-self: flex-end; background: var(--k-text); color: var(--k-bg); }
.msg-assistant { align-self: flex-start; background: var(--k-raised); border-left: 3px solid var(--k-primary); color: var(--k-text); }
.msg .meta { display: block; margin-top: 6px; font-size: var(--k-fs-11); color: var(--k-muted); white-space: normal; }
.msg-user .meta { color: color-mix(in srgb, var(--k-bg) 78%, var(--k-text)); }
.wf-card { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding: 14px 0 2px; border-top: 1px solid var(--k-divider); white-space: normal; }
.wf-card h3, .wf-title { margin: 0; font-size: var(--k-fs-15); }
.wf-meta { margin: 0; font-size: var(--k-fs-12-5); color: var(--k-muted); }
.wf-body, .wf-report { display: flex; flex-direction: column; gap: 8px; }
.wf-body h4, .wf-report h4 { margin: 4px 0 0; font-size: var(--k-fs-12); letter-spacing: var(--k-tracking-label); text-transform: uppercase; color: var(--k-muted); }
.wf-body .k-list-row { min-height: 44px; padding: 8px 0; }
.wf-body .k-list-title { font-size: var(--k-fs-13-5); font-weight: 400; }
.wf-actions { display: flex; flex-direction: column; gap: 8px; }
.wf-review-link { font-size: var(--k-fs-13); align-self: flex-start; }
.evan-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.evan-chips .k-btn { flex: none; min-height: 44px; }
.composer { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 8px; padding-top: 12px; border-top: 2px solid var(--k-divider); }
.composer .k-input { min-height: 52px; background: var(--k-primary-tint); }
.composer-send { justify-content: center; min-height: 52px; padding: 0; font-size: 20px; }
.evan-disclaimer { margin: 0; font-size: var(--k-fs-11-5); color: var(--k-muted); }
.voice-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.voice-row .k-btn { min-height: 40px; }
/* A pressed toggle is a selection, not a warning. Only push-to-talk goes red while listening. */
.k-btn[aria-pressed="true"] { background: var(--k-primary-tint); border-color: var(--k-primary); color: var(--k-text); box-shadow: inset 0 0 0 1px var(--k-primary); }
.voice-row .k-btn[aria-pressed="true"] { background: var(--k-error); border-color: var(--k-error); color: var(--k-on-status); box-shadow: none; }
.side-panel { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-left: 2px solid var(--k-divider); min-width: 0; overflow-y: auto; max-height: 86vh; position: sticky; top: 0; }
.side-panel h2 { margin: 0; font-size: var(--k-fs-11-5); font-weight: 600; letter-spacing: var(--k-tracking-label); text-transform: uppercase; color: var(--k-muted); }
.side-panel h3 { margin: 8px 0 0; font-size: var(--k-fs-15); }
.side-panel p { margin: 0; font-size: var(--k-fs-13-5); }
.citations { font-size: var(--k-fs-13); }
.evan-sources { margin-top: 8px; }
.evan-sources > summary { font-size: var(--k-fs-15); }
.evan-sources > summary:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 2px; }
/* Evan's confirmation: the prompt is a note, Confirm / Not now sit under it with their own ink. */
.evan-confirm { display: flex; flex-direction: column; gap: 10px; }
.evan-confirm .k-btn { min-height: 44px; }
.threads-compact { display: none; gap: 8px; align-items: center; }
.threads-compact .k-select { flex: 1; min-width: 0; }
@media (max-width: 1199px) {
  .workspace { grid-template-columns: minmax(0, 1fr) 300px; }
  .threads-wrap { display: none; }
  .threads-compact { display: flex; }
  .log { max-height: calc(100dvh - 420px); }
}
@media (max-width: 899px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .side-panel { position: static; max-height: none; border-left: 0; border-top: 2px solid var(--k-divider); }
  .log { min-height: 240px; max-height: calc(100dvh - 420px); }
}
@media (max-width: 720px) {
  .conversation { padding: 14px 16px 16px; }
  /* Bar + tabs, access cue and conversation picker above; chips, composer and the bottom nav below. */
  .log { min-height: 200px; max-height: calc(100dvh - 520px); }
  .msg { max-width: 92%; }
  .side-panel { padding: 16px; }
}

/* — Privacy & Evan (Suite 2d) — */
.priv-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.priv-col { display: flex; flex-direction: column; gap: 10px; padding: 32px; min-width: 0; }
.priv-col:first-child { border-right: 2px solid var(--k-divider); }
.priv-right { padding: 0; }
.priv-col h1, .priv-h { margin: 0; font-size: var(--k-fs-24, 24px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.priv-sub { margin: 0 0 8px; font-size: var(--k-fs-13); color: var(--k-text-2); }
.priv-apps { margin: 0; padding: 0; list-style: none; }
.priv-row { border-bottom: 1px solid var(--k-divider); }
.priv-row-main { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; }
.priv-name { flex: none; width: 120px; font-size: var(--k-fs-14-5); }
.priv-scope { flex: 1; min-width: 0; font-size: var(--k-fs-12-5); color: var(--k-text-2); }
.priv-switch { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.priv-switch[aria-checked="true"] .k-switch-track { background: var(--k-primary); }
.priv-switch[aria-checked="true"] .k-switch-track::after { left: 21px; }
.priv-switch:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 0; }
.priv-details > summary { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin: -10px 0 2px 20px; font-size: var(--k-fs-12-5); color: var(--k-link-strong); cursor: pointer; }
.priv-details[open] { padding-bottom: 12px; }
.priv-details .k-field { margin: 6px 0 10px 20px; }
.priv-choices { display: flex; flex-direction: column; gap: 2px; }
.priv-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; font-size: var(--k-fs-13); overflow-wrap: anywhere; }
.priv-choice input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--k-primary); }
.priv-scope-name { min-width: 0; overflow-wrap: anywhere; }
.priv-left-foot { padding-top: 12px; }
.priv-block { display: flex; flex-direction: column; gap: 10px; padding: 32px; border-bottom: 2px solid var(--k-divider); }
.mem-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mem-row { display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 6px 6px 6px 14px; background: var(--k-raised); }
.mem-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mem-text { font-size: var(--k-fs-14); overflow-wrap: anywhere; }
.mem-meta { font-size: var(--k-fs-11-5); color: var(--k-muted); }
.mem-meta:empty { display: none; }
.mem-btn { min-height: 44px; min-width: 44px; padding: 0 10px; border: 0; background: transparent; font: inherit; font-size: var(--k-fs-13); font-weight: 800; color: var(--k-link-strong); cursor: pointer; }
.mem-btn:hover { background: var(--k-hover-wash); }
.mem-forget { color: var(--k-error); }
.mem-edit { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.mem-edit .k-input { flex: 1 1 200px; }
.mem-add { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.mem-add-row { display: flex; gap: 8px; }
.mem-add-row .k-input { flex: 1; min-width: 0; }
.priv-data-out:empty { display: none; }
@media (max-width: 860px) {
  .priv-layout { grid-template-columns: minmax(0, 1fr); }
  .priv-col:first-child { border-right: 0; border-bottom: 2px solid var(--k-divider); }
}
@media (max-width: 720px) {
  .priv-col, .priv-block { padding: 22px 16px; }
  .priv-right { padding: 0; }
  .priv-name { width: 96px; }
}

/* — Account & support (Suite 1e) — */
.acct-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.acct-col { display: flex; flex-direction: column; gap: 16px; padding: 32px; min-width: 0; }
.acct-col:first-child { border-right: 2px solid var(--k-divider); }
.acct-col h1, .acct-h { margin: 0; font-size: var(--k-fs-24, 24px); font-weight: 800; letter-spacing: -0.02em; }
.acct-col .k-form-wrap { display: flex; flex-direction: column; gap: 12px; }
.acct-member { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; background: var(--k-raised); border-top: 2px solid var(--k-divider-strong); }
.acct-member > div { display: flex; flex-direction: column; gap: 2px; }
.acct-member b { font-size: var(--k-fs-15); }
.acct-member span { font-size: var(--k-fs-12-5); color: var(--k-text-2); }
.acct-label { font-weight: 800; color: var(--k-text); }
.acct-links { display: flex; flex-direction: column; border-top: 2px solid var(--k-divider); }
.acct-links a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 0; border-bottom: 1px solid var(--k-divider); color: var(--k-text); text-decoration: none; font-size: var(--k-fs-15); }
.acct-links a > span:first-child { flex: 1; min-width: 0; }
.acct-links a::after { content: "→"; flex: none; }
.acct-links a:hover { background: var(--k-row-wash); color: var(--k-text); }
.acct-link-meta { font-size: var(--k-fs-12-5); color: var(--k-text-2); }
@media (max-width: 860px) {
  .acct-layout { grid-template-columns: minmax(0, 1fr); }
  .acct-col:first-child { border-right: 0; border-bottom: 2px solid var(--k-divider); }
}
@media (max-width: 720px) { .acct-col { padding: 22px 16px; } }

/* — Connections (Account 1f) — */
.conn-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.conn-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--k-divider); }
.conn-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--k-divider); min-width: 0; }
.conn-row > .connection-feedback, .conn-row > .connection-advanced { grid-column: 1 / -1; }
.conn-actions { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; }
.conn-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.conn-block .k-btn-sm, .conn-block .badge { white-space: nowrap; }
.conn-block + .k-block .k-btn { align-self: flex-start; }
.conn-name { margin: 0; font-size: var(--k-fs-15); font-weight: 800; }
.app-num { font-size: var(--k-fs-12); color: var(--k-muted); }
.conn-desc { margin: 0; font-size: var(--k-fs-13); color: var(--k-text-2); }
.conn-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.connection-feedback:empty { display: none; }
.connection-advanced summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-size: var(--k-fs-13); font-weight: 600; color: var(--k-link-strong); }
.connection-advanced[open] { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
.conn-token { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.conn-token .k-field { flex: 1 1 220px; }

/* — Apps launcher, signed in (Suite 1a tiles family) — */
.hub-apps-block { gap: 16px; }
.hub-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--k-divider); border-left: 1px solid var(--k-divider); }
.hub-app { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--k-app-tint); border-top: 4px solid var(--k-app); border-right: 1px solid var(--k-divider); border-bottom: 1px solid var(--k-divider); min-width: 0; }
.hub-app-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hub-app-name { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--k-fs-17); font-weight: 800; }
.hub-app-tagline { margin: 0; font-size: var(--k-fs-14); font-weight: 600; }
.hub-app-role { margin: 0; font-size: var(--k-fs-12-5); line-height: 1.5; color: var(--k-text-2); }
.app-status-line { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.hub-app-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: auto; }
.hub-app-actions .k-btn { min-height: 40px; }
.hub-dev-note { margin: 0; }
@media (max-width: 720px) {
  .conn-row { grid-template-columns: minmax(0, 1fr); }
  .conn-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}
@media (max-width: 1100px) { .hub-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hub-apps { grid-template-columns: minmax(0, 1fr); } }

/* — Help, search, status, notifications — */
.help-cards .k-card { border-top: 2px solid var(--k-primary); min-height: 112px; }
.help-cards .k-card-kicker { font-size: var(--k-fs-11); letter-spacing: var(--k-tracking-label); text-transform: uppercase; color: var(--k-muted); }
/* The kit gives every button in a note the note ink (.k-note .k-btn { color: inherit }, and the
   same on :hover). On a filled variant that is note ink on the fill: 2:1 on primary in light, 1.5:1 in
   dark. A filled button that lands in a note keeps its own label ink and fill, at rest and on hover. */
.k-note .k-btn-primary, .k-note .k-btn-primary:hover { color: var(--k-on-primary); border-color: transparent; }
.k-note .k-btn-primary:hover { background: var(--k-primary-hover); }
.k-note .k-btn-danger, .k-note .k-btn-danger:hover { color: var(--k-on-status); border-color: transparent; }
.k-note .k-btn-danger:hover { background: color-mix(in srgb, var(--k-error) 86%, #000); }
.hub-crisis .k-btn { color: var(--k-on-status); border-color: transparent; }
.hub-crisis .k-btn-secondary { color: var(--k-text); background: var(--k-raised); border-color: var(--k-divider); }
.search-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.search-row .k-field { flex: 1 1 260px; }
.search-row .k-btn { min-height: 44px; }
.status-out { display: flex; flex-direction: column; gap: 14px; }
.status-out .k-note { margin: 0; }
.k-list-row .badge { flex: none; }

@media (forced-colors: active) { .badge, .priv-switch .k-switch-track { border: 1px solid CanvasText; } }
.hub-app-actions .k-btn { font-size: var(--k-fs-12-5); }
.k-btn-group .k-state-action { align-self: auto; }

/* — Quiet hours "Custom…" range (Account 1b / 1g) — */
.quiet-custom { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); gap: 14px 18px; }
@media (max-width: 720px) { .quiet-custom { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* — Partly-done state (hub): a commit that only partly saved, an undo that partly reversed — */
.k-state--warn { border-left: 4px solid var(--k-tone-warn-edge); }
.outcome-list { margin: 4px 0 6px; font-size: var(--k-fs-13-5); }
.outcome-list b { font-weight: 700; }
.k-state-title[tabindex="-1"]:focus { outline: none; }
.k-state-title[tabindex="-1"]:focus-visible { outline: 2px solid var(--k-focus, var(--k-primary)); outline-offset: 2px; }

/* — Progress and Approval history: table on wide screens, list rows on phones — */
.progress-list, .history-list { display: none; }
.progress-note { display: block; margin-top: 4px; color: var(--k-text-2); }
@media (max-width: 720px) {
  .progress-table, .history-table { display: none; }
  .progress-list, .history-list { display: block; }
}
.progress-list .k-list-row, .history-list .k-list-row { align-items: flex-start; }
.progress-list .k-list-row > .k-dot, .history-list .k-list-row > .k-dot { margin-top: 7px; }
.history-changed { display: block; margin-top: 4px; color: var(--k-text-2); }
.history-list .k-list-row > .k-tag { flex: none; max-width: 42%; white-space: normal; text-align: left; }
.history-list .k-list-title a { color: var(--k-text); }
/* Per-entry "Ask Evan" stays on phones as a compact "Ask" with a full 44px target. */
@media (max-width: 720px) { .k-btn.entry-ask { min-width: 44px; min-height: 44px; justify-content: center; padding-inline: 8px; } }
/* A bordered outcome inside a page block keeps its text off the 4px rule. */
.k-block > .k-state--error, .k-block > .k-state--warn { padding: 4px 0 4px 20px; }