/* ============================================================
   LOCAL KNOWN — Phase 2 application shell styles
   Consumer: all Phase 2 route pages (this-week, be-found, etc.)
   Imports the shared design-token system; adds the application
   chrome (header, responsive nav, cards, states, badges).
   ============================================================ */

@import url('/ds/styles.css');

:root {
  --shell-header-h: 64px;
  --shell-nav-w: 248px;
  --content-max: 1200px;
}

/* ---- Accessibility helpers ---- */
.lk-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lk-sr-only:focus,
.lk-sr-only:focus-visible {
  position: static;
  width: auto;
  height: auto;
  padding: var(--space-2) var(--space-3);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--surface-card);
  color: var(--text-body);
  z-index: 100;
}

/* ---- Focus states ---- */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Application frame ---- */
html, body { margin: 0; padding: 0; }

body {
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

/* Ink-sidebar application layout (LK-20).
   Desktop: a persistent dark left rail + a scrolling content column.
   Mobile (<=768px): the rail collapses off-canvas behind a slim top bar. */
.lk-app {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}

/* ---- Mobile top bar (hidden on desktop) ---- */
.lk-topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 45;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--shell-header-h);
  padding: 0 var(--space-4);
  background: var(--ink-900);
  color: var(--text-on-dark);
  border-bottom: 1px solid var(--ink-700);
}

.lk-topbar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--ink-600);
  color: var(--text-on-dark);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}

/* ---- Brand lockup (shared by top bar + sidebar) ---- */
.lk-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.lk-brand__mark { width: 28px; height: 28px; display: block; flex: none; }
.lk-brand__word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.lk-brand__dot { color: var(--green-400); }

/* ---- Persistent Ink sidebar ---- */
.lk-sidebar {
  flex: 0 0 var(--shell-nav-w);
  width: var(--shell-nav-w);
  align-self: stretch;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ink-900);
  color: var(--text-on-dark);
  border-right: 1px solid var(--ink-700);
}

.lk-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--ink-700);
}

.lk-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-3) var(--space-5);
}

.lk-nav__group { margin-bottom: var(--space-5); }
.lk-nav__group:last-child { margin-bottom: 0; }

.lk-nav__group-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-on-dark-muted);
  padding: 0 var(--space-3) var(--space-2);
}

.lk-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-on-dark);
  text-decoration: none;
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.lk-nav__bar {
  width: 3px;
  align-self: stretch;
  border-radius: 999px;
  margin: 2px 0;
  background: transparent;
  flex: none;
}

.lk-nav__label {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Growth Coach is a <button> because it toggles a panel rather than navigating.
   This class was written when every element carrying it was an <a>, so the
   button needs the user-agent chrome removed to match its four siblings. */
button.lk-nav__link { appearance: none; -webkit-appearance: none; background: none;
  border: 0; width: 100%; font: inherit; text-align: left; cursor: pointer; }

.lk-nav__link svg { flex: none; color: var(--text-on-dark-muted); }

.lk-nav__link:hover,
.lk-nav__link:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-decoration: none;
}
.lk-nav__link:hover svg { color: var(--text-on-dark); }

.lk-nav__link[aria-current="page"] {
  background: rgba(15, 164, 95, 0.14);
  color: #fff;
  font-weight: var(--fw-semibold);
}
.lk-nav__link[aria-current="page"] .lk-nav__bar { background: var(--green-500); }
.lk-nav__link[aria-current="page"] svg { color: var(--green-300); }

/* ---- Sidebar footer: coach CTA + customer identity ---- */
.lk-sidebar__footer {
  border-top: 1px solid var(--ink-700);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lk-sidebar__coach {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(15, 164, 95, 0.14);
  border: 1px solid rgba(15, 164, 95, 0.32);
  color: var(--green-300);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
  text-align: left;
  cursor: default;
}
.lk-sidebar__coach[disabled] { opacity: 0.85; }
.lk-sidebar__coach svg { flex: none; }
.lk-sidebar__coach-label { flex: 1; }

.lk-sidebar__switcher:empty { display: none; }
.lk-sidebar__switcher .lk-header__switcher {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--text-on-dark-muted);
}
.lk-sidebar__switcher select {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--ink-600);
  background: var(--ink-800);
  color: var(--text-on-dark);
  max-width: 140px;
}

.lk-identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-1);
}
.lk-identity__avatar {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 999px;
  background: var(--green-700);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
}
.lk-identity__text { min-width: 0; line-height: 1.25; }
.lk-identity__name {
  color: #fff;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lk-identity__loc {
  color: var(--text-on-dark-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Content column ---- */
.lk-main {
  flex: 1;
  min-width: 0;
  padding: var(--space-6) var(--space-5);
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
  overflow: auto;
}

/* ---- Typography ---- */
.lk-page-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  margin: 0 0 var(--space-5);
  color: var(--text-strong);
}

.lk-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand-ink);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.lk-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--text-strong);
  margin: 0 0 var(--space-3);
}

.lk-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--text-strong);
  margin: 0 0 var(--space-3);
}

.lk-prose {
  max-width: var(--content-prose);
  color: var(--text-body);
}

.lk-muted { color: var(--text-muted); }

/* ---- Cards and surfaces ---- */
.lk-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
}

.lk-card--compact {
  padding: var(--space-4);
}

.lk-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  margin: 0 0 var(--space-3);
  color: var(--text-strong);
}

.lk-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.lk-card__header .lk-card__title { margin: 0; }

.lk-details {
  margin-top: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  padding: var(--space-3);
}
.lk-details summary { cursor: pointer; font-weight: var(--fw-semibold); }
.lk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-caption);
  margin-top: var(--space-3);
}
.lk-table caption { text-align: left; margin-bottom: var(--space-2); font-weight: var(--fw-semibold); }
.lk-table th, .lk-table td {
  border: 1px solid var(--border-default);
  padding: var(--space-2);
  text-align: left;
  vertical-align: top;
}
.lk-table th { background: var(--surface-sunken); }
.lk-evidence-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(5rem, 1fr) auto auto;
  gap: var(--space-2);
  align-items: center;
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-2) 0;
}

/* ---- Badges ---- */
.lk-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.lk-badge--fresh    { background: var(--success-bg);    color: var(--success); }
.lk-badge--aging    { background: var(--warning-bg);    color: var(--warning); }
.lk-badge--stale    { background: var(--gray-100);       color: var(--gray-600); }
.lk-badge--historical { background: var(--gray-100);     color: var(--gray-600); }
.lk-badge--unknown  { background: var(--gray-100);       color: var(--gray-500); }
.lk-badge--error    { background: var(--danger-bg);       color: var(--danger); }
.lk-badge--target   { background: var(--green-100);      color: var(--green-800); }
.lk-badge--peer     { background: var(--info-bg);         color: var(--info); }
.lk-badge--partial  { background: var(--warning-bg);      color: var(--warning); }
.lk-badge--invalid  { background: var(--danger-bg);       color: var(--danger); }
.lk-badge--evidence-confirmed { background: var(--success-bg); color: var(--success); }
.lk-badge--evidence-inferred { background: var(--info-bg); color: var(--info); }
.lk-badge--evidence-modeled { background: var(--warning-bg); color: var(--warning); }
.lk-badge--evidence-missing { background: var(--gray-100); color: var(--gray-600); }
.lk-badge--evidence-conflicting { background: var(--danger-bg); color: var(--danger); }

/* ---- State placeholders ---- */
.lk-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-9) var(--space-5);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.lk-state__icon {
  width: 48px;
  height: 48px;
  color: var(--text-muted);
}

.lk-state__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--text-strong);
  margin: 0;
}

.lk-state--error { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.lk-state--error .lk-state__title { color: var(--danger); }
.lk-state--error .lk-state__icon { color: var(--danger); }

.lk-state--permission { border-color: var(--warning); background: var(--warning-bg); }

/* ---- Outcome score tiles ---- */
.lk-outcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

.lk-outcome-tile {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--surface-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lk-outcome-tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lk-outcome-tile__name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  margin: 0;
}

.lk-outcome-tile__score {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  color: var(--brand);
  line-height: 1;
}

.lk-outcome-tile__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---- Move cards ---- */
.lk-move {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--surface-card);
  margin-bottom: var(--space-4);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
}

.lk-move__num {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--text-on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  flex: none;
}

.lk-move__title {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  margin: 0 0 var(--space-2);
}

.lk-move__desc { margin: 0; color: var(--text-body); }

.lk-move__pills {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.lk-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* ---- Be Known evidence detail ---- */
.lk-evidence-list {
  display: grid;
  gap: var(--space-3);
}

.lk-evidence-row {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  overflow-wrap: anywhere;
}

.lk-evidence-row__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.lk-evidence-row__title {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  margin: 0;
  overflow-wrap: anywhere;
}

.lk-evidence-row__value,
.lk-evidence-row__source {
  margin: var(--space-2) 0 0;
  overflow-wrap: anywhere;
}

.lk-evidence-row__source {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}

.lk-disclosure {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
}

.lk-disclosure summary {
  cursor: pointer;
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
}

.lk-disclosure__body {
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}

.lk-move--preview {
  border-style: dashed;
}

/* ---- Chart / map fallback ---- */
.lk-fallback {
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--surface-sunken);
  color: var(--text-muted);
  text-align: center;
}

.lk-fallback__note {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.lk-grid-fallback {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-1);
  max-width: 320px;
  margin: var(--space-3) auto 0;
}

.lk-grid-cell {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-micro);
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  color: var(--rank-you-ring);
  border: 1px solid var(--border-subtle);
}

.lk-grid-cell--top3  { background: var(--rank-top-fill);  color: #fff; }
.lk-grid-cell--mid   { background: var(--rank-mid-fill);   color: var(--rank-mid-ink); }
.lk-grid-cell--low   { background: var(--rank-low-fill);   color: #fff; }
.lk-grid-cell--nf    { background: var(--rank-nf-fill);    color: var(--rank-nf-ink); }
.lk-grid-cell--you   { box-shadow: inset 0 0 0 3px var(--ink-900); }

/* ---- Opportunity list ---- */
.lk-opportunity {
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-4) 0;
}

.lk-opportunity:last-child { border-bottom: none; }

.lk-opportunity__title {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  margin: 0 0 var(--space-1);
}

.lk-opportunity__meta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.lk-opportunity__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.lk-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  text-decoration: none;
}

.lk-btn:hover { background: var(--surface-sunken); }

.lk-btn--primary { background: var(--brand); color: var(--text-on-brand); border-color: var(--brand); }
.lk-btn--primary:hover { background: var(--brand-hover); }

.lk-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Be Found detail ---- */
.lk-bf-summary__text { font-size: var(--fs-body-lg); }
.lk-bf-grid-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.lk-bf-grid-controls label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.lk-bf-grid-controls select {
  min-width: 220px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-body);
}
.lk-bf-grid__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.lk-bf-grid__legend {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.lk-bf-grid__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.lk-bf-grid__legend-shape {
  width: 12px;
  height: 12px;
  display: inline-block;
  border: 1px solid var(--border-default);
  background: var(--rank-nf-fill);
}
.lk-bf-grid__legend-item--top3 .lk-bf-grid__legend-shape { background: var(--rank-top-fill); border-radius: 50%; }
.lk-bf-grid__legend-item--mid .lk-bf-grid__legend-shape { background: var(--rank-mid-fill); border: 2px dashed var(--rank-mid-ink); }
.lk-bf-grid__legend-item--low .lk-bf-grid__legend-shape { background: var(--rank-low-fill); border-radius: 50%; }
.lk-bf-grid__legend-item--ranked .lk-bf-grid__legend-shape { background: var(--rank-ranked-fill); border: 1px dotted var(--rank-ranked-ink); }
.lk-bf-grid__frame {
  display: grid;
  /* Column count is data-driven: set via the --lk-grid-cols custom property from
     the grid's rows/cols metadata (grid_cols on lk_scans, default 7). 7 is a
     sane fallback that matches the collector default if the property is unset. */
  grid-template-columns: repeat(var(--lk-grid-cols, 7), minmax(48px, 1fr));
  gap: var(--space-2);
  width: min(100%, 680px);
  aspect-ratio: 1;
  margin: var(--space-5) auto;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}
.lk-bf-grid__cell {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  text-align: center;
  cursor: default;
}
.lk-bf-grid__cell--top3 { background: var(--rank-top-fill); color: #fff; border-radius: 50%; }
.lk-bf-grid__cell--mid { background: var(--rank-mid-fill); color: var(--rank-mid-ink); border: 2px dashed var(--rank-mid-ink); }
.lk-bf-grid__cell--low { background: var(--rank-low-fill); color: #fff; border-radius: 50%; }
.lk-bf-grid__cell--ranked { background: var(--rank-ranked-fill); color: var(--rank-ranked-ink); border: 2px dotted var(--rank-ranked-ink); }
.lk-bf-grid__cell--nf { background: var(--rank-nf-fill); color: var(--rank-nf-ink); }
.lk-bf-grid__cell--office { box-shadow: inset 0 0 0 3px var(--ink-900); }
/* Dark "visibility map" treatment (LK-22): the frame becomes an ink surface while
   rank fills + office outline stay readable; layout/columns are unchanged. */
.lk-bf-grid-card--dark .lk-bf-grid__frame { background: var(--ink-900); border-color: var(--ink-800); }
/* The caption sits on the light card surface (sibling of the frame), so it keeps
   the default muted color — an on-dark override would render light-on-light. */
.lk-bf-grid-card--dark .lk-bf-grid__cell--office { box-shadow: inset 0 0 0 3px var(--green-300); }
.lk-bf-grid-card--dark .lk-bf-grid__cell--nf { background: #17362a; color: var(--text-on-dark-muted); border-color: #24463a; }
.lk-bf-grid__rank { font-family: var(--font-mono); font-size: var(--fs-body-sm); line-height: 1; }
.lk-bf-grid__cell-label { font-size: var(--fs-micro); line-height: 1.1; }
.lk-bf-grid__caption { margin: 0; color: var(--text-muted); font-size: var(--fs-caption); }
.lk-bf-table { margin-top: var(--space-4); }
.lk-bf-table summary,
.lk-bf-methodology summary,
.lk-bf-disclosure summary {
  cursor: pointer;
  color: var(--brand-ink);
  font-weight: var(--fw-semibold);
}
.lk-bf-table table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
}
.lk-bf-table th,
.lk-bf-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  vertical-align: top;
}
.lk-bf-table th { color: var(--text-strong); }
.lk-bf-methodology { margin-top: var(--space-4); }
.lk-bf-disclosure ul { margin-bottom: 0; }

/* ---- Progress timeline ---- */
.lk-timeline {
  position: relative;
  padding-left: var(--space-5);
  border-left: 2px solid var(--border-subtle);
}

.lk-timeline__item {
  position: relative;
  padding-bottom: var(--space-5);
}

.lk-timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-5) - 6px);
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid var(--surface-page);
}

.lk-timeline__date {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.lk-timeline__title {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  margin: var(--space-1) 0 var(--space-1);
}

/* This Week */
.lk-week-module { margin-top: var(--space-6); }
/* header */
.lk-week { max-width: var(--content-max); }
.lk-week__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
}
.lk-week__date {
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-ink);
}
.lk-week-greeting {
  font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900;
  letter-spacing: -0.02em; line-height: 1.05; color: var(--text-strong);
  margin: var(--space-2) 0 var(--space-1);
}
.lk-week__sub { color: var(--text-muted); font-size: var(--fs-h5); margin: 0; }
.lk-week-scan {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
  box-shadow: var(--shadow-sm);
}
.lk-week-scan__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--text-muted); flex: 0 0 auto; }
.lk-week-scan__dot.is-fresh { background: var(--green-500); }
.lk-week-scan__dot.is-aging { background: var(--warning-bg); }
.lk-week-scan__label { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-strong); }
.lk-week-scan__meta { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); }

/* briefing callout */
.lk-week-briefing {
  margin-top: var(--space-5); padding: var(--space-5);
  border: 1px solid var(--border-subtle); border-left: var(--space-2) solid var(--brand);
  border-radius: var(--radius-lg); background: var(--info-bg);
}
.lk-week-briefing__eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-ink);
  margin-bottom: var(--space-2);
}
.lk-week-briefing__body { margin: 0; max-width: 72ch; font-size: var(--fs-h5); line-height: 1.55; color: var(--text-body); }

/* primary action + position */
.lk-week-primary {
  margin-top: var(--space-6); display: grid;
  grid-template-columns: 1.55fr 1fr; gap: var(--space-5); align-items: start;
}
/* Column 1 of that grid: the action card AND anything that sources it (the LK-27
   web-evidence disclosure). Keeping them in one wrapper is what stops a third grid
   child auto-placing into column 2 and pushing the position panel onto row 2.
   `min-width: 0` because a grid item's default `auto` minimum lets long source URLs
   inside the disclosure widen the column past its track and overflow on mobile. */
.lk-week-primary__main {
  display: flex; flex-direction: column; gap: var(--space-4); min-width: 0;
}
.lk-action {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.lk-action__bar {
  background: linear-gradient(180deg, var(--ink-900), var(--ink-800));
  padding: var(--space-4) var(--space-5); display: flex;
  align-items: center; justify-content: space-between; gap: var(--space-4);
}
.lk-action__bar-left { display: flex; align-items: center; gap: var(--space-3); }
.lk-action__flag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--green-300);
  background: rgba(15,164,95,0.16); border: 1px solid rgba(15,164,95,0.3);
  padding: 4px 9px; border-radius: 999px;
}
.lk-action__outcome { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-on-dark-muted); }
.lk-action__time { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-on-dark-muted); display: inline-flex; align-items: center; gap: var(--space-1); }
.lk-action__body { padding: var(--space-5); }
.lk-action--empty .lk-action__body { padding: var(--space-6) var(--space-5); }
.lk-action__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.01em; color: var(--text-strong); margin: 0 0 var(--space-3); }
.lk-action__desc { font-size: var(--fs-h5); line-height: 1.6; color: var(--text-body); margin: 0 0 var(--space-4); }
.lk-action__meta {
  display: flex; gap: var(--space-5); flex-wrap: wrap;
  padding: var(--space-3) 0; margin-bottom: var(--space-4);
  border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
}
.lk-action__meta-label { font-family: var(--font-mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.lk-action__meta-value { font-weight: var(--fw-semibold); color: var(--text-strong); font-size: var(--fs-body); margin-top: 3px; }
.lk-action__note { font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.5; margin: 0 0 var(--space-4); }
.lk-action__reviewed { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); margin: var(--space-3) 0 0; }
/* LK-122: the "reviewed against older evidence" note. Sits with the review caption
   and stays visible (never collapsed) — it exists to qualify a currency claim the
   card is making in the same breath. */
.lk-rec__grounding {
  font-size: var(--fs-caption); margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.lk-position { display: flex; flex-direction: column; gap: var(--space-3); }
.lk-position__eyebrow { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.lk-position__row {
  display: flex; align-items: center; gap: var(--space-3);
  text-decoration: none; background: var(--surface-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-3) var(--space-4);
}
.lk-position__row:hover { box-shadow: var(--shadow-md); }
.lk-position__icon {
  width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-sunken); color: var(--brand-ink);
}
.lk-position__text { flex: 1; min-width: 0; }
.lk-position__label { font-weight: var(--fw-bold); color: var(--text-strong); font-size: var(--fs-body); }
.lk-position__summary { font-size: var(--fs-caption); color: var(--text-muted); }
.lk-position__score { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); color: var(--text-strong); margin-left: auto; }

/* secondary */
.lk-week-secondary h2 { margin-bottom: var(--space-3); }
.lk-secondary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.lk-secondary-card {
  display: block; text-decoration: none; background: var(--surface-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-4) var(--space-5);
}
.lk-secondary-card:hover { box-shadow: var(--shadow-md); }
.lk-secondary-card__top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.lk-secondary-card__tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-ink); background: var(--surface-sunken); padding: 3px 8px; border-radius: 999px; }
.lk-secondary-card__effort { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); }
.lk-secondary-card__title { font-weight: var(--fw-bold); font-size: var(--fs-h5); color: var(--text-strong); line-height: 1.35; margin-bottom: var(--space-1); }
.lk-secondary-card__why { font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.5; }
/* LK-122: a secondary recommendation carries its OWN grounding disclosure. Same
   treatment as the hero's, just spaced off the rationale above it. */
.lk-secondary-card .lk-rec__grounding { margin-top: var(--space-3); }

/* provenance (plain, non-jargon) */
.lk-week-provenance { margin: var(--space-3) 0 0; font-size: var(--fs-caption); color: var(--text-muted); }

/* ---- Outcome-first hero (shared: Be Found / Be Chosen / Be Known) ---- */
.lk-outcome-hero { margin-bottom: var(--space-5); }
.lk-outcome-hero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-1); }
.lk-outcome-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.lk-outcome-hero__headline { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 900; letter-spacing: -0.02em; line-height: 1.08; color: var(--text-strong); max-width: 22ch; margin: var(--space-2) 0 0; }
.lk-outcome-hero__score { text-align: right; flex: 0 0 auto; }
.lk-outcome-hero__score-num { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 800; line-height: 1; color: var(--brand-ink); }
.lk-outcome-hero__score-meta { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); }
.lk-outcome-hero__lead { margin: var(--space-3) 0 0; max-width: 70ch; font-size: var(--fs-h5); line-height: 1.55; color: var(--text-body); }

/* ---- Shared epistemic chip (Be Chosen / Be Known): the demoted, customer-
   facing Observed / Derived / Modeled taxonomy ---- */
.lk-ev-chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.lk-ev-chip--observed { color: var(--green-700, #0b7a44); background: rgba(15,164,95,0.12); border-color: rgba(15,164,95,0.28); }
.lk-ev-chip--derived { color: var(--brand-ink); background: var(--surface-sunken); border-color: var(--border-subtle); }
.lk-ev-chip--modeled { color: #2563eb; background: rgba(37,99,235,0.10); border-color: rgba(37,99,235,0.26); }
.lk-ev-chip--conflicting { color: var(--ember, #b23a1f); background: rgba(255,84,54,0.10); border-color: rgba(255,84,54,0.28); }
.lk-ev-chip--missing { color: var(--text-muted); background: var(--surface-sunken); border-color: var(--border-subtle); }

/* ---- Audited web evidence (LK-27): the local evidence behind a reviewed
   recommendation, shown behind a disclosure. Each item keeps its epistemic class
   visible (observed fact / competitor pattern / hypothesis / opportunity) so
   nothing reads as more certain than it is. Source links + retrieved dates live
   here, the sanctioned home for exact source detail. ---- */
.lk-webev { display: flex; flex-direction: column; gap: var(--space-3); }
.lk-webev-item { padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); }
.lk-webev-item:first-of-type { border-top: none; }
.lk-webev-item__head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.lk-webev-item__statement { color: var(--text-body); font-size: var(--fs-body); line-height: 1.5; }
.lk-webev-item__unknown { margin: var(--space-2) 0 0; font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.5; }
.lk-webev-item__source { margin: var(--space-2) 0 0; font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); }
.lk-webev-item__link { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }
.lk-webev-chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; flex: 0 0 auto; }
/* Four epistemic classes, four design-system hues (no off-palette hex):
   fact = Known Green (observed / confirmed), pattern = Ember (competitor
   tension — the brand's exact meaning), opportunity = the amber rank-mid tier
   (an opening to take), hypothesis = neutral gray (tentative, not proven).
   Each text/background pair is an existing token and clears WCAG AA (>=4.5:1). */
.lk-webev-chip--fact { color: var(--green-700); background: var(--success-bg); border-color: var(--green-200); }
.lk-webev-chip--pattern { color: var(--ember-700); background: var(--ember-50); border-color: var(--ember-100); }
.lk-webev-chip--hypothesis { color: var(--gray-700); background: var(--gray-100); border-color: var(--gray-300); }
.lk-webev-chip--opportunity { color: var(--rank-mid-ink); background: var(--rank-mid-soft); border-color: var(--rank-mid-fill); }

/* ---- Be Chosen: reputation-first layout ---- */
.lk-chosen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; margin-bottom: var(--space-5); }
.lk-rep-card__head { display: flex; align-items: center; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-3); }
.lk-rep-card__rating { font-family: var(--font-display); font-size: 44px; font-weight: 900; line-height: 1; color: var(--text-strong); }
.lk-rep-card__stars { display: inline-flex; gap: 2px; color: var(--rank-mid-fill, #E0A32E); }
.lk-rep-stat { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; }
.lk-meter__row { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--space-2); }
.lk-meter { height: 10px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.lk-meter__fill { height: 100%; background: var(--brand); border-radius: 999px; }
.lk-trust-list { margin-top: var(--space-4); }
.lk-trust-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); }
.lk-trust-row__val { display: inline-flex; align-items: center; gap: var(--space-2); }

/* ---- Strength / friction callouts (shared) ---- */
.lk-callout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-5); }
.lk-callout { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); background: var(--surface-card); }
.lk-callout--win { border-left: var(--space-2) solid var(--green-500); background: rgba(15,164,95,0.06); }
.lk-callout--warning { border-left: var(--space-2) solid var(--ember, #FF5436); background: rgba(255,84,54,0.05); }
.lk-callout__title { font-weight: var(--fw-bold); font-size: var(--fs-h5); color: var(--text-strong); margin: var(--space-1) 0; }
.lk-callout__body { margin: 0; font-size: var(--fs-body); color: var(--text-body); line-height: 1.5; }
.lk-chosen-caution { margin: 0 0 var(--space-5); }
.lk-nextmove__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 800; color: var(--text-strong); margin: var(--space-1) 0 var(--space-3); }

/* ---- Be Known: community-presence layout ---- */
.lk-bk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; margin-bottom: var(--space-5); }
.lk-bk-section__eyebrow { margin-bottom: var(--space-3); }
.lk-bk-list { display: flex; flex-direction: column; }
.lk-bk-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); }
.lk-bk-row:first-child { border-top: 0; }
.lk-bk-row__body { flex: 1; min-width: 0; }
.lk-bk-row__name { font-weight: var(--fw-semibold); color: var(--text-strong); }
.lk-bk-row__note { font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.45; }
.lk-bk-empty { border: 1px dashed var(--border-default); border-radius: var(--radius-lg); padding: var(--space-4); color: var(--text-muted); font-size: var(--fs-body); text-align: center; }
.lk-week-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--info-bg);
  color: var(--brand-ink);
}
.lk-week-banner p { margin: var(--space-1) 0 0; }
.lk-week-banner--refresh { background: var(--warning-bg); }
.lk-week-cmd {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  margin-top: var(--space-4);
  text-decoration: none;
}

/* ---- Public preview (LK-8) ---- */
.lk-public {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.lk-public-header {
  height: var(--shell-header-h);
  background: var(--ink-900);
  color: var(--text-on-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-5);
  gap: var(--space-4);
}

.lk-public-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.lk-public-header__word {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--text-on-dark);
}

.lk-public-main {
  flex: 1;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
}

.lk-public-footer {
  padding: var(--space-5);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  border-top: 1px solid var(--border-subtle);
}

.lk-preview-hero {
  margin-bottom: var(--space-6);
}

.lk-preview-hero__name {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  color: var(--text-strong);
  margin: 0 0 var(--space-3);
}

.lk-preview-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.lk-preview-hero__notice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-body-sm);
}

.lk-preview-disclaimer {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border-left: 3px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-caption);
  max-width: var(--content-prose);
}

.lk-preview-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}

.lk-preview-strength { border-left: 4px solid var(--success); }
.lk-preview-opportunity { border-left: 4px solid var(--warning); }

.lk-preview-finding {
  margin-top: var(--space-2);
  font-size: var(--fs-body-sm);
}

.lk-preview-finding summary {
  cursor: pointer;
  color: var(--brand-ink);
  font-weight: var(--fw-medium);
}

.lk-preview-cta {
  background: var(--surface-sunken);
  border-color: var(--border-default);
}

.lk-preview-cta__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.lk-preview-disclosures__row {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-body);
  font-size: var(--fs-body-sm);
}

.lk-preview-disclosures__row:last-child { border-bottom: none; }

.lk-link {
  color: var(--brand-ink);
  text-decoration: underline;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .lk-app { flex-direction: column; align-items: stretch; }

  .lk-topbar { display: flex; }

  .lk-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
    box-shadow: var(--shadow-lg);
  }

  .lk-sidebar.is-open { transform: translateX(0); }

  .lk-main { padding: var(--space-4); }

  .lk-public-main { padding: var(--space-5) var(--space-4); }

  .lk-preview-hero__name { font-size: var(--fs-h2); }

  .lk-preview-cols { grid-template-columns: 1fr; }

  .lk-preview-cta__actions .lk-btn { width: 100%; justify-content: center; }

  .lk-outcome-grid { grid-template-columns: 1fr; }

  .lk-move { grid-template-columns: 1fr; }

  .lk-grid-fallback { grid-template-columns: repeat(5, 1fr); }

  .lk-week-greeting { font-size: var(--fs-h2); }
  .lk-outcome-hero__headline,
  .lk-outcome-hero__score-num { font-size: var(--fs-h2); }
  .lk-week-primary { grid-template-columns: 1fr; }
  .lk-secondary-grid { grid-template-columns: 1fr; }
  .lk-chosen-grid { grid-template-columns: 1fr; }
  .lk-callout-grid { grid-template-columns: 1fr; }
  .lk-bk-grid { grid-template-columns: 1fr; }
  .lk-week__header { gap: var(--space-4); }
  .lk-week-cmd { width: 100%; }

  .lk-bf-grid-controls { align-items: stretch; flex-direction: column; }
  .lk-bf-grid-controls label { align-items: flex-start; flex-direction: column; }
  .lk-bf-grid-controls select { width: 100%; min-width: 0; }
  .lk-bf-grid__frame { gap: var(--space-1); padding: var(--space-2); }
  .lk-bf-grid__cell-label { font-size: 9px; }
  .lk-bf-grid__rank { font-size: var(--fs-caption); }
  .lk-bf-table { overflow-x: auto; }
  .lk-bf-table table { min-width: 560px; }
}

/* ---- LK-16 phone hardening (360–390px first-customer band) ----
   .lk-main is overflow:auto, so content wider than its box scrolls INSIDE it and
   would not show up on documentElement — these rules keep the widest elements
   (the be-found geo-grid and the be-chosen peer table) within their own box so no
   horizontal scrollbar appears on the four first-test screens at phone widths. */
@media (max-width: 420px) {
  /* The default grid track minmax(48px, 1fr) has a hard 7×48 = 336px floor that
     overflows .lk-main's content box at 360–390px. Drop the floor so the data-driven
     columns scale to fit, and tighten gap/label so a 7×7 grid stays legible. */
  .lk-bf-grid__frame {
    grid-template-columns: repeat(var(--lk-grid-cols, 7), minmax(0, 1fr));
    gap: 3px;
    padding: var(--space-2);
  }
  .lk-bf-grid__cell { border-width: 1px; }
  .lk-bf-grid__cell-label { font-size: 8px; }
  .lk-bf-grid__rank { font-size: var(--fs-micro); }

  /* Wide data tables (the peer comparison set) scroll horizontally within their own
     box instead of forcing .lk-main wider than the viewport. */
  .lk-table { display: block; overflow-x: auto; max-width: 100%; }

  /* Card headers pair a title with a nowrap status badge (e.g. "Market: … · fresh").
     Let the badge wrap to its own line instead of forcing the header wider than the card. */
  .lk-card__header { flex-wrap: wrap; }

  /* The be-chosen reputation pills use fixed minmax grid columns plus two nowrap
     badges whose combined min-width exceeds a phone content box. Stack to a single
     column so each part wraps within the row instead of overflowing .lk-main. */
  .lk-evidence-row { grid-template-columns: 1fr; }

  /* observationList() rows are inline-flex `.lk-pill`s with width:100% + space-between;
     their default min-width:auto lets the label/value keep intrinsic width and blow
     past the container. Allow the two spans to wrap and shrink so the pill stays 100%. */
  .lk-pill { flex-wrap: wrap; }
  .lk-pill > span { min-width: 0; overflow-wrap: anywhere; }
}

/* ---- LK-5 Progress & history ---- */
.lk-progress-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  margin: var(--space-4) 0;
}
.lk-progress-filters__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.lk-progress-filters select { min-width: 12rem; }
.lk-progress-body { display: grid; gap: var(--space-5); }
.lk-progress-body > .lk-card { margin: 0; }
.lk-progress-concerns { display: grid; gap: var(--space-3); }

/* ---- LK-7 Community Opportunity Radar ---- */
.lk-opp-panel[hidden] { display: none !important; }

.lk-opp-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.lk-opp-toggle {
  display: inline-flex;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.lk-opp-toggle__btn {
  padding: var(--space-2) var(--space-4);
  border: none;
  background: var(--surface-card);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

.lk-opp-toggle__btn + .lk-opp-toggle__btn { border-left: 1px solid var(--border-default); }
.lk-opp-toggle__btn.is-active { background: var(--brand); color: var(--text-on-brand); }
.lk-opp-toggle__btn:disabled { opacity: 0.5; cursor: not-allowed; }

.lk-opp-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.lk-opp-filter {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  cursor: pointer;
}

.lk-opp-filter.is-active {
  background: var(--surface-sunken);
  color: var(--text-strong);
  border-color: var(--text-strong);
}

.lk-opp-list { display: grid; gap: var(--space-4); }

.lk-opp-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.lk-opp-card__badges { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.lk-opp-card .lk-opportunity__meta { margin-top: var(--space-3); }

.lk-opp-action__note {
  align-self: center;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.lk-opp-map__box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 260px;
  margin: var(--space-3) 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--border-subtle) 1px, transparent 1px) 0 0 / 100% 12.5%,
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px) 0 0 / 12.5% 100%,
    var(--surface-sunken);
  overflow: hidden;
}

.lk-opp-map__office,
.lk-opp-map__marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.lk-opp-map__office-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink-900, #0B1A14);
  box-shadow: 0 0 0 3px var(--surface-card);
}

.lk-opp-map__pin {
  width: 22px;
  height: 22px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--brand);
  color: var(--text-on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}

.lk-opp-map__pin > * { transform: rotate(45deg); }
.lk-opp-map__marker--be_found .lk-opp-map__pin { background: var(--brand); }
.lk-opp-map__marker--be_chosen .lk-opp-map__pin { background: var(--rank-mid-ink, #7a5b00); }
.lk-opp-map__marker--be_known .lk-opp-map__pin { background: var(--ink-700, #274236); }

.lk-opp-map__marker-label {
  max-width: 120px;
  font-size: var(--fs-micro);
  line-height: 1.1;
  text-align: center;
  color: var(--text-body);
  background: color-mix(in srgb, var(--surface-card) 85%, transparent);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
}

.lk-opp-map__office:focus-visible,
.lk-opp-map__marker:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.lk-opp-map__legend { margin: var(--space-3) 0 0; padding-left: var(--space-4); display: grid; gap: var(--space-1); }
.lk-opp-map__legend-item { font-size: var(--fs-caption); color: var(--text-muted); }
.lk-opp-map__legend-num { font-family: var(--font-mono); font-weight: var(--fw-bold); margin-right: var(--space-1); }

.lk-opp-unmapped { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.lk-opp-unmapped__item { font-size: var(--fs-caption); color: var(--text-muted); }

@media (max-width: 768px) {
  .lk-progress-filters { flex-direction: column; align-items: stretch; }
  .lk-progress-filters__field { width: 100%; }
  .lk-progress-filters select { width: 100%; min-width: 0; }
  .lk-opp-controls { flex-direction: column; align-items: stretch; }
  .lk-opp-toggle { width: 100%; }
  .lk-opp-toggle__btn { flex: 1; }
  .lk-opp-map__box { aspect-ratio: auto; min-height: 320px; }
  .lk-opp-map__marker-label { max-width: 84px; }
}

/* LK-17: founder-reviewed recommendation overlay (read-only) */
.lk-rec-section { display: grid; gap: var(--space-4); }
.lk-rec { display: grid; gap: var(--space-2); padding: var(--space-4); }
.lk-rec__reviewed { display: inline-flex; align-items: center; gap: var(--space-1); width: max-content; }
.lk-rec__title { margin: 0; font-family: var(--font-display, inherit); }
.lk-rec__subhead { margin: var(--space-2) 0 0; font-size: var(--fs-small, 0.85rem); text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; }
.lk-rec__evidence { margin: 0; padding-left: var(--space-4); display: grid; gap: var(--space-1); }
.lk-rec__meta { margin: var(--space-2) 0 0; display: grid; gap: var(--space-2); }
.lk-rec__meta-label { font-weight: 600; }
.lk-rec__meta-value { margin: 0 0 var(--space-2); }
.lk-rec__note { font-style: italic; }

/* ── LK-15 first live-customer test mode ─────────────────────────────────────
   When the shell activates test mode it adds `.lk-test-mode` to <body>. These
   rules hide the sections that are out of scope for Test #1 so page modules
   stay ignorant of the test (the shell owns the toggle, not the pages).
   Nav routes for Opportunities/Progress are already removed in shell.js; these
   rules cover the in-page teasers/actions that live inside kept routes
   (e.g. This Week's opportunity teaser and completed/history timeline), plus any
   mutable Growth Plan/opportunity actions and a Growth Coach chat entry point.
   Scoped to `.lk-test-mode` — normal builds are unaffected. */
.lk-test-mode [data-module="opportunity"],
.lk-test-mode [data-module="completed"],
.lk-test-mode [data-module="win"] {
  display: none !important;
}
.lk-test-mode .lk-opportunity__actions,
.lk-test-mode .lk-growth-coach,
.lk-test-mode [data-module="growth-coach"] {
  display: none !important;
}

/* LK-20: retained legacy header classes. The Ink sidebar (.lk-sidebar__*) replaces
   the old top header for the four test routes, but these classes are still used by
   non-sidebar surfaces — the public preview page (preview.js), shared badge helpers
   (components.js), the Be Chosen page body (be-chosen.js), and the legacy dashboard.
   Kept until those surfaces are reskinned (LK-21–24 + a preview pass) so they don't
   regress. Do not delete while consumers remain. (Devin review, PR #88.) */
.lk-header__logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--brand);
  flex: none;
}
.lk-header__badges {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.lk-header__switcher {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--text-on-dark-muted);
}
.lk-header__switcher select {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-body);
  max-width: 200px;
}

/* ── Growth Plan (LK-37) ─────────────────────────────────────────────────── */
.lk-plan__header{margin-bottom:1.1rem}
.lk-plan__title{font-family:'Archivo',sans-serif;font-size:1.5rem;margin:.15rem 0 .2rem}
.lk-plan__sub{color:rgba(11,26,20,.6);max-width:52ch;margin:0}
.lk-plan-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.9rem;align-items:start}
.lk-plan-col{background:rgba(11,26,20,.02);border:1px solid rgba(11,26,20,.07);border-radius:16px;padding:.7rem}
.lk-plan-col__head{display:flex;align-items:center;justify-content:space-between;margin:.1rem .1rem .55rem}
.lk-plan-col__label{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(11,26,20,.55)}
.lk-plan-col__count{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:rgba(11,26,20,.4)}
.lk-plan-col__empty{color:rgba(11,26,20,.3);text-align:center;padding:.5rem 0;margin:0}
.lk-plan-move{background:#fff;border:1px solid rgba(11,26,20,.1);border-radius:13px;padding:.7rem;margin:0 0 .55rem}
.lk-plan-move--primary{border-color:var(--lk-green,#0FA45F);box-shadow:0 0 0 1px var(--lk-green,#0FA45F)}
.lk-plan-move__flag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;color:#0a7a47;background:rgba(15,164,95,.12);border-radius:999px;padding:.15rem .45rem;margin-bottom:.35rem}
.lk-plan-move__tag{font-family:'JetBrains Mono',monospace;font-size:.62rem;color:rgba(11,26,20,.5)}
.lk-plan-move__title{font-family:'Archivo',sans-serif;font-size:.92rem;margin:.2rem 0 .25rem;line-height:1.2}
.lk-plan-move__why{font-size:.82rem;line-height:1.4;color:rgba(11,26,20,.75);margin:.15rem 0}
.lk-plan-move__meta{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:rgba(11,26,20,.5);margin-top:.35rem}
.lk-plan-move__signal{font-size:.76rem;color:rgba(11,26,20,.6);margin:.35rem 0 0;padding-left:.6rem;border-left:2px solid rgba(15,164,95,.4)}
.lk-plan-move__coach{display:inline-flex;align-items:center;gap:.3rem;margin-top:.55rem;border:1px solid rgba(11,26,20,.14);background:#fff;border-radius:9px;padding:.3rem .55rem;font:inherit;font-size:.76rem;cursor:pointer;color:var(--lk-ink,#0B1A14)}
.lk-plan-move__coach:hover{background:rgba(15,164,95,.06);border-color:rgba(15,164,95,.5)}
.lk-plan-empty{background:rgba(11,26,20,.02);border:1px solid rgba(11,26,20,.08);border-radius:16px;padding:1.6rem;text-align:center;max-width:52ch}
.lk-plan-empty__title{font-family:'Archivo',sans-serif;font-size:1.1rem;margin:0 0 .5rem}
.lk-plan-empty__body{color:rgba(11,26,20,.65);line-height:1.5;margin:0 0 1rem}

/* ── Growth Plan: the action-to-result loop (LK-37) ──────────────────────── */
/* A dismissed move keeps its slot, greyed, until its Undo is used or the page
   reloads — reversibility has to stay visible, not just be possible. */
.lk-plan-move--dismissed{opacity:.55;border-style:dashed}

/* Recently-dismissed (LK-51 P1): a collapsed affordance BELOW the board, not a
   fifth column — keeps the active plan to 1-3 visible priorities (§2) while
   still making a reload-surviving Undo reachable. Reuses .lk-details (the
   shared disclosure()) and .lk-plan-move (dismissed variant) for the cards
   inside it, so nothing here re-styles what already exists. */
.lk-plan-dismissed:empty{display:none}
.lk-plan-dismissed .lk-details{margin-top:1rem}
.lk-plan-dismissed__list .lk-plan-move{margin-bottom:.55rem}
.lk-plan-dismissed__list .lk-plan-move:last-child{margin-bottom:0}
.lk-plan-move__watch{font-size:.74rem;line-height:1.4;color:rgba(11,26,20,.55);margin:.25rem 0 0}
.lk-plan-move__blocked{font-size:.76rem;color:#8a2c1c;margin:.35rem 0 0;padding-left:.6rem;border-left:2px solid rgba(255,84,54,.5)}
.lk-plan-col__more{display:block;width:100%;margin:.15rem 0 0;border:1px dashed rgba(11,26,20,.18);background:transparent;border-radius:10px;padding:.35rem;font:inherit;font-size:.74rem;color:rgba(11,26,20,.6);cursor:pointer}
.lk-plan-col__more:hover{background:rgba(11,26,20,.04);color:var(--lk-ink,#0B1A14)}

/* Per-move actions. Real <button>s in a labelled group so keyboard order and
   screen-reader context survive every re-render. */
.lk-plan-acts{margin-top:.55rem}
.lk-plan-acts--none{margin-top:0}
.lk-plan-acts__row{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.lk-plan-act{border:1px solid rgba(11,26,20,.16);background:#fff;border-radius:9px;padding:.3rem .6rem;font:inherit;font-size:.76rem;line-height:1.2;color:var(--lk-ink,#0B1A14);cursor:pointer}
.lk-plan-act:hover:not(:disabled){background:rgba(11,26,20,.04)}
.lk-plan-act:disabled{opacity:.5;cursor:not-allowed}
/* Known Green is the win state: it marks the moves-forward actions only. */
.lk-plan-act--go{border-color:var(--lk-green,#0FA45F);color:#0a7a47;background:rgba(15,164,95,.08);font-weight:600}
.lk-plan-act--go:hover:not(:disabled){background:rgba(15,164,95,.14)}
.lk-plan-act--quiet{border-color:transparent;color:rgba(11,26,20,.5)}
.lk-plan-act--quiet:hover:not(:disabled){color:var(--lk-ink,#0B1A14);border-color:rgba(11,26,20,.16)}
.lk-plan-act--danger{border-color:rgba(255,84,54,.55);color:#8a2c1c;background:rgba(255,84,54,.06);font-weight:600}
.lk-plan-act--danger:hover:not(:disabled){background:rgba(255,84,54,.12)}
.lk-plan-acts__q{font-size:.76rem;color:rgba(11,26,20,.7);flex:1 1 100%}
.lk-plan-acts__input{border:1px solid rgba(11,26,20,.18);border-radius:9px;padding:.3rem .5rem;font:inherit;font-size:.78rem;min-width:0;flex:1 1 9rem}
.lk-plan-acts__link{font-size:.74rem;color:rgba(11,26,20,.55);text-decoration:underline;background:none;border:0;padding:.3rem .2rem;font:inherit;cursor:pointer}
.lk-plan-acts__link:hover{color:var(--lk-ink,#0B1A14)}
.lk-plan-acts__msg{font-size:.74rem;line-height:1.4;color:rgba(11,26,20,.6);margin:.35rem 0 0}
.lk-plan-acts__msg:empty{margin:0}
.lk-plan-acts__msg--error{color:#8a2c1c}

/* "What just happened" + Undo. Undo is a contract requirement (§2), so it is a
   first-class control, not a hidden gesture. */
.lk-plan-applied{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.5rem 0 0;padding:.35rem .5rem;border-radius:10px;background:rgba(15,164,95,.09)}
.lk-plan-applied__text{font-size:.76rem;font-weight:600;color:#0a7a47}
.lk-plan-applied__undo{border:1px solid rgba(15,164,95,.5);background:#fff;border-radius:8px;padding:.2rem .5rem;font:inherit;font-size:.74rem;color:#0a7a47;cursor:pointer}
.lk-plan-applied__undo:hover:not(:disabled){background:rgba(15,164,95,.12)}
.lk-plan-applied__undo:disabled{opacity:.5;cursor:not-allowed}
.lk-plan-applied__msg{font-size:.72rem;color:rgba(11,26,20,.6);flex:1 1 100%}
.lk-plan-applied__msg:empty{display:none}
.lk-plan-applied__msg--error{color:#8a2c1c}

/* Durable per-move history (LK-51): collapsed by default, mono eyebrow-style
   toggle, tabular numerals on dates via formatDate. Undo here reuses the exact
   .lk-plan-acts__msg feedback line so a failure reads identically everywhere. */
/* The history disclosure itself is .lk-details (app/components.js' shared
   disclosure() component, native <details>/<summary> — same widget used by
   be-chosen.js / be-known.js / progress.js). Only the CONTENTS below are
   specific to move history. */
.lk-plan-history__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.lk-plan-history__item{border-left:2px solid rgba(11,26,20,.1);padding-left:.55rem}
.lk-plan-history__line{display:flex;flex-wrap:wrap;gap:.3rem;align-items:baseline;font-size:.78rem;color:var(--lk-ink,#0B1A14)}
.lk-plan-history__label{font-weight:600}
.lk-plan-history__who{color:rgba(11,26,20,.55)}
.lk-plan-history__meta{font-family:'JetBrains Mono',monospace;font-size:.66rem;font-variant-numeric:tabular-nums;color:rgba(11,26,20,.45);margin-top:.1rem}
.lk-plan-history__undo{margin-top:.3rem;border:1px solid rgba(15,164,95,.5);background:#fff;border-radius:8px;padding:.2rem .5rem;font:inherit;font-size:.72rem;color:#0a7a47;cursor:pointer}
.lk-plan-history__undo:hover:not(:disabled){background:rgba(15,164,95,.12)}
.lk-plan-history__undo:disabled{opacity:.5;cursor:not-allowed}

/* ── This Week: the primary Growth Move ──────────────────────────────────── */
.lk-week-move__host{margin-top:.5rem}
.lk-week-move__card{border:1px solid var(--lk-green,#0FA45F);border-radius:14px;padding:.85rem .95rem;background:#fff}
.lk-week-move__tag{font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(11,26,20,.5)}
.lk-week-move__title{font-family:'Archivo',sans-serif;font-size:1.08rem;margin:.2rem 0 .3rem;line-height:1.2}
.lk-week-move__why{font-size:.88rem;line-height:1.45;color:rgba(11,26,20,.78);margin:.15rem 0}
.lk-week-move__meta{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-variant-numeric:tabular-nums;color:rgba(11,26,20,.5);margin-top:.4rem}
.lk-week-move__signal{font-size:.8rem;color:rgba(11,26,20,.62);margin:.4rem 0 0;padding-left:.6rem;border-left:2px solid rgba(15,164,95,.4)}
.lk-week-move__watch{font-size:.76rem;color:rgba(11,26,20,.55);margin:.25rem 0 0}
.lk-week-move__alts{margin-top:.8rem;border-top:1px solid rgba(11,26,20,.08);padding-top:.6rem}
.lk-week-move__alts-label{font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(11,26,20,.5);margin-bottom:.4rem}
.lk-week-move__alt{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.35rem 0}
.lk-week-move__alt-text{flex:1 1 12rem;min-width:0}
.lk-week-move__alt-title{font-size:.86rem;line-height:1.3}
.lk-week-move__alt-tag{font-family:'JetBrains Mono',monospace;font-size:.62rem;color:rgba(11,26,20,.45)}
.lk-week-move__link{display:inline-block;margin-top:.7rem;font-size:.8rem;color:rgba(11,26,20,.6);text-decoration:underline}
.lk-week-move__link:hover{color:var(--lk-ink,#0B1A14)}

@media (max-width: 640px) {
  /* Touch targets and full-width controls on small screens; the action row
     already wraps, so only the sizing needs adjusting. */
  .lk-plan-act{padding:.45rem .7rem;font-size:.8rem}
  .lk-plan-acts__input{flex:1 1 100%}
  .lk-week-move__alt{align-items:flex-start}
  .lk-week-move__alt .lk-plan-act{width:100%;text-align:center}
}