/* Editorial Blue App Kit — LIVE shared kit since 2026-07-04 (supersedes Command Blue).
   Decision record + migration plan: projects/workshop/_working/design-app-family-visual-direction.md.
   Insights aesthetic on the Command Blue bones: real typefaces (Montserrat display /
   Roboto body / Roboto Mono labels, self-hosted in ./fonts/), generous spacing,
   14px radii + pills, hover motion, calmer dark surfaces, single blue accent.
   Same class vocabulary, breakpoints, touch targets, and focus states as Command Blue.
   Command Blue final source preserved at _craft/_working/html-app-mockups/app-kit.command-blue.live-final.css. */

@import './fonts/fonts.css';

:root {
  color-scheme: dark;

  --kit-bg: #0b1018;
  --kit-nav: #0d1420;
  --kit-surface: #141b2b;
  --kit-surface-2: #1a2236;
  --kit-surface-3: #232e47;
  --kit-field: #0e1523;

  --kit-ink: #e8edf7;
  --kit-soft: #a6b1c6;
  --kit-muted: #8d9ab5;
  --kit-meta: #7987a3;
  --kit-on-accent: #0b1018;

  --kit-line: #2a3346;
  --kit-line-strong: #38445e;
  --kit-accent: #5b8cff;
  --kit-accent-hover: #7fa5ff;
  --kit-accent-2: #3e63c4; /* deep blue — violet retired; old gradients turn tonal */
  --kit-accent-soft: rgba(91, 140, 255, .12);
  --kit-accent-line: rgba(91, 140, 255, .38);
  --kit-warn: #f6bd60;
  --kit-ok: #4ade80;
  --kit-ok-soft: #14301f;
  --kit-danger: #f47c76;

  --kit-radius: 14px;
  --kit-radius-sm: 10px;
  --kit-radius-lg: 18px;
  --kit-pill: 999px;
  --kit-gap: 16px;
  --kit-app-pad: 24px;
  --kit-nav-width: 200px;
  --kit-touch: 44px;
  --kit-shadow: 0 1px 40px rgba(0, 0, 0, .45);
  --kit-shadow-soft: 0 1px 18px rgba(0, 0, 0, .32);
  --kit-ease: cubic-bezier(.2, .6, .25, 1);
  --kit-quick: .16s;

  --kit-font: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --kit-font-display: 'Montserrat', 'Roboto', system-ui, sans-serif;
  --kit-font-mono: 'Roboto Mono', ui-monospace, "SFMono-Regular", Consolas, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  background: var(--kit-bg);
}

body {
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  background: var(--kit-bg);
  color: var(--kit-ink);
  font-family: var(--kit-font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: .56;
}

input[type="checkbox"],
input[type="radio"],
progress {
  accent-color: var(--kit-accent);
}

:focus-visible {
  outline: 2px solid var(--kit-accent);
  outline-offset: 2px;
}

.kit-app {
  min-height: 100vh;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--kit-app-pad);
  color: var(--kit-ink);
  font-family: var(--kit-font);
}

.kit-shell {
  display: grid;
  grid-template-columns: var(--kit-nav-width) minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - (var(--kit-app-pad) * 2));
  overflow: hidden;
  border: 1px solid var(--kit-line);
  border-radius: var(--kit-radius);
  background: var(--kit-bg);
}

.kit-nav {
  min-width: 0;
  padding: 18px 14px;
  overflow: hidden auto;
  background: var(--kit-nav);
  border-right: 1px solid var(--kit-line);
}

.kit-nav-brand,
.kit-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0 0 20px;
}

.kit-nav-mark,
.kit-mark {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--kit-accent), var(--kit-accent-2));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset;
}

.kit-nav-brand strong,
.kit-brand strong {
  display: block;
  min-width: 0;
  font-family: var(--kit-font-display);
  font-size: 14px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.01em;
}

.kit-nav-brand span,
.kit-brand span {
  display: block;
  min-width: 0;
  margin-top: 3px;
  color: var(--kit-muted);
  font-size: 11.5px;
  line-height: 1.3;
}

/* Mono micro-labels — the shared DNA both systems agreed on */
.kit-nav-section,
.kit-label,
.kit-meta,
.kit-row-meta,
.kit-metric-label {
  color: var(--kit-meta);
  font-family: var(--kit-font-mono);
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Eyebrow — the Insights signature: an accent-colored kicker above a title */
.kit-eyebrow {
  color: var(--kit-accent);
  font-family: var(--kit-font-mono);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
}

.kit-nav-section {
  margin: 20px 0 8px;
}

.kit-nav-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kit-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--kit-radius-sm);
  color: var(--kit-soft);
  background: transparent;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.3;
  transition: color var(--kit-quick) var(--kit-ease), background-color var(--kit-quick) var(--kit-ease), border-color var(--kit-quick) var(--kit-ease);
}

.kit-nav-item:hover {
  color: var(--kit-ink);
  background: var(--kit-surface-2);
}

.kit-nav-item.is-active,
.kit-nav-item[aria-current="page"] {
  color: var(--kit-ink);
  background: var(--kit-surface-2);
  border-color: var(--kit-line);
  box-shadow: inset 2px 0 0 var(--kit-accent);
}

.kit-main,
.kit-content {
  min-width: 0;
}

.kit-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.kit-header,
.kit-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--kit-gap);
  align-items: center;
  min-width: 0;
  padding: 20px 22px;
  border-bottom: 1px solid var(--kit-line);
  background: transparent;
}

/* Titles are Montserrat — content headlines, not chrome */
.kit-title {
  margin: 0;
  color: var(--kit-ink);
  font-family: var(--kit-font-display);
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 700;
}

.kit-subtitle,
.kit-copy,
.kit-row-copy,
.kit-metric-note,
.kit-empty p,
.kit-state {
  color: var(--kit-soft);
  font-size: 13.5px;
  line-height: 1.55;
}

.kit-subtitle {
  margin: 6px 0 0;
}

.kit-workspace,
.kit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .85fr);
  gap: var(--kit-gap);
  min-width: 0;
  padding: 20px 22px;
}

.kit-stack {
  display: grid;
  gap: var(--kit-gap);
  min-width: 0;
}

.kit-command {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: min(250px, 34vw);
  min-height: 40px;
  padding: 9px 14px;
  color: var(--kit-muted);
  background: var(--kit-field);
  border: 1px solid var(--kit-line);
  border-radius: var(--kit-radius-sm);
  font-size: 13px;
  line-height: 1.25;
  transition: border-color var(--kit-quick) var(--kit-ease);
}

.kit-command:hover,
.kit-command:focus-within {
  border-color: var(--kit-accent-line);
}

.kit-command kbd {
  margin-left: auto;
  padding: 2px 6px;
  color: var(--kit-meta);
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--kit-line);
  border-radius: 6px;
  font-family: var(--kit-font-mono);
  font-size: 10px;
}

.kit-card,
.kit-panel,
.kit-metric {
  min-width: 0;
  background: var(--kit-surface);
  border: 1px solid var(--kit-line);
  border-radius: var(--kit-radius);
  transition: border-color var(--kit-quick) var(--kit-ease), box-shadow var(--kit-quick) var(--kit-ease), transform var(--kit-quick) var(--kit-ease);
}

.kit-card,
.kit-panel {
  padding: 20px 22px;
}

.kit-panel {
  overflow: hidden;
  padding: 0;
}

/* Link-cards get the Insights reward: lift, accent border, top bar reveal */
a.kit-card {
  display: block;
  position: relative;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

a.kit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--kit-accent), transparent);
  opacity: 0;
  transition: opacity var(--kit-quick) var(--kit-ease);
}

a.kit-card:hover {
  transform: translateY(-3px);
  border-color: var(--kit-accent);
  box-shadow: var(--kit-shadow);
}

a.kit-card:hover::before {
  opacity: 1;
}

.kit-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--kit-line);
}

.kit-panel-title,
.kit-card-title {
  margin: 0;
  color: var(--kit-ink);
  font-family: var(--kit-font-display);
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -.01em;
  font-weight: 700;
}

.kit-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--kit-gap);
  min-width: 0;
}

.kit-metric {
  min-height: 88px;
  padding: 15px 16px;
}

.kit-metric-value {
  display: block;
  margin-top: 10px;
  color: var(--kit-ink);
  font-family: var(--kit-font-display);
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.015em;
}

.kit-metric-note {
  margin: 8px 0 0;
}

.kit-list {
  display: grid;
  min-width: 0;
}

.kit-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  min-width: 0;
  padding: 12px 16px;
  color: var(--kit-ink);
  background: var(--kit-surface);
  border-bottom: 1px solid var(--kit-line);
  transition: background-color var(--kit-quick) var(--kit-ease);
}

.kit-row:last-child {
  border-bottom: 0;
}

.kit-row:hover,
.kit-row.is-active {
  background: var(--kit-surface-2);
}

.kit-row-main {
  min-width: 0;
}

.kit-row-title {
  display: block;
  min-width: 0;
  color: var(--kit-ink);
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.kit-row-copy {
  margin: 5px 0 0;
}

.kit-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.kit-status-dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: var(--kit-pill);
  background: var(--kit-accent);
  box-shadow: 0 0 0 3px var(--kit-accent-soft);
}

.kit-status-dot.is-warn {
  background: var(--kit-warn);
  box-shadow: 0 0 0 3px rgba(246, 189, 96, .14);
}

.kit-status-dot.is-ok {
  background: var(--kit-ok);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, .14);
}

.kit-status-dot.is-danger {
  background: var(--kit-danger);
  box-shadow: 0 0 0 3px rgba(244, 124, 118, .14);
}

/* Buttons are pills — mono voice, quiet until hovered */
.kit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 38px;
  padding: 9px 18px;
  color: var(--kit-on-accent);
  background: var(--kit-accent);
  border: 1px solid transparent;
  border-radius: var(--kit-pill);
  font-family: var(--kit-font-mono);
  font-size: 12px;
  line-height: 1.15;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--kit-quick) var(--kit-ease), border-color var(--kit-quick) var(--kit-ease), color var(--kit-quick) var(--kit-ease), transform var(--kit-quick) var(--kit-ease), box-shadow var(--kit-quick) var(--kit-ease);
}

.kit-btn:hover {
  background: var(--kit-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--kit-shadow-soft);
}

.kit-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.kit-btn.secondary,
.kit-btn.is-secondary {
  color: var(--kit-ink);
  background: var(--kit-surface);
  border-color: var(--kit-line);
}

.kit-btn.secondary:hover,
.kit-btn.is-secondary:hover {
  background: var(--kit-surface);
  border-color: var(--kit-accent);
  color: var(--kit-accent);
  box-shadow: none;
}

.kit-btn.ghost,
.kit-btn.is-ghost {
  color: var(--kit-soft);
  background: transparent;
  border-color: transparent;
}

.kit-btn.ghost:hover,
.kit-btn.is-ghost:hover {
  color: var(--kit-ink);
  background: var(--kit-surface-2);
  transform: none;
  box-shadow: none;
}

.kit-btn.danger,
.kit-btn.is-danger {
  color: #2a0f0d;
  background: var(--kit-danger);
}

.kit-chip,
.kit-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 25px;
  max-width: 100%;
  padding: 4px 11px;
  color: var(--kit-accent-hover);
  background: var(--kit-accent-soft);
  border: 1px solid var(--kit-accent-line);
  border-radius: var(--kit-pill);
  font-family: var(--kit-font-mono);
  font-size: 10.5px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: border-color var(--kit-quick) var(--kit-ease), color var(--kit-quick) var(--kit-ease);
}

.kit-count {
  min-width: 25px;
  padding-inline: 7px;
}

.kit-chip.is-recorded,
.kit-chip.is-ok {
  color: var(--kit-ok);
  background: var(--kit-ok-soft);
  border-color: rgba(74, 222, 128, .32);
}

.kit-chip.is-warn {
  color: #ffd89c;
  background: rgba(246, 189, 96, .1);
  border-color: rgba(246, 189, 96, .32);
}

.kit-chip.is-danger {
  color: #ffb6b1;
  background: rgba(244, 124, 118, .1);
  border-color: rgba(244, 124, 118, .32);
}

/* Tabs are pills on the page, not boxes in a well */
.kit-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  margin: 0 0 var(--kit-gap);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.kit-tab {
  flex: 0 1 auto;
  min-height: 38px;
  padding: 9px 16px;
  color: var(--kit-soft);
  background: transparent;
  border: 1px solid var(--kit-line);
  border-radius: var(--kit-pill);
  font-family: var(--kit-font-mono);
  font-size: 11.5px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: .03em;
  transition: color var(--kit-quick) var(--kit-ease), background-color var(--kit-quick) var(--kit-ease), border-color var(--kit-quick) var(--kit-ease);
}

.kit-tab:hover {
  color: var(--kit-ink);
  border-color: var(--kit-line-strong);
  background: var(--kit-surface);
}

.kit-tab.is-active,
.kit-tab[aria-selected="true"] {
  color: var(--kit-ink);
  background: var(--kit-accent-soft);
  border-color: var(--kit-accent-line);
}

/* One-line app bar (promoted from Home Life into the kit, 2026-07-06).
   mount() tags its root .kit-app--bar and emits header (mark + title) -> tabs -> content.
   The app mark + title sit on the left, the tab strip on the right, all on ONE line, with
   the tab content below. It compacts rather than stacks down to phone widths; the tab strip
   scrolls sideways as a last resort instead of wrapping. Pages that don't use mount() (e.g.
   Insights) never get .kit-app--bar, so their layout is untouched. */
.kit-app--bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "title tabs"
    "content content";
  /* Pack rows to the top. With align-items:center on a min-height:100vh .kit-app,
     a tab whose content is shorter than the viewport stretches its content row and
     floats mid-page. Rows start at the top; the header + tab strip re-center within
     their own row via align-self below. (Ported from the cockpit's proven app-local
     override, 2026-07-08 — Workshop tracker "App Kit fix".) */
  align-content: start;
  align-items: start;
  column-gap: var(--kit-gap);
  row-gap: 10px;
}

.kit-app--bar > .kit-header {
  grid-area: title;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.kit-app--bar > .kit-header .kit-title {
  font-size: 20px;
  white-space: nowrap;
}

/* The app icon: the app's own favicon tile, clipped to a small rounded badge. */
.kit-appmark {
  flex: 0 0 auto;
  display: inline-flex;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset;
}

.kit-appmark > img,
.kit-appmark > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.kit-app--bar > .kit-tabs {
  grid-area: tabs;
  justify-self: end;
  align-self: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.kit-app--bar > .kit-tabs::-webkit-scrollbar { display: none; }

.kit-app--bar .kit-tab {
  flex: 0 0 auto;
  white-space: nowrap;
}

.kit-app--bar > .kit-content {
  grid-area: content;
  min-width: 0;
}

/* Keep the bar on ONE line at phone widths by compacting, not stacking. */
@media (max-width: 620px) {
  .kit-app--bar { column-gap: 10px; }
  .kit-app--bar > .kit-header .kit-title { font-size: 17px; }
  .kit-app--bar > .kit-tabs { gap: 6px; }
  .kit-app--bar .kit-tab { padding: 7px 12px; }
}

@media (max-width: 400px) {
  .kit-app--bar { column-gap: 8px; }
  .kit-appmark { width: 24px; height: 24px; }
  .kit-app--bar > .kit-header .kit-title { font-size: 15px; }
  .kit-app--bar .kit-tab { padding: 6px 10px; font-size: 11px; }
}

/* ===== Side section rail (opt-in via mount({ nav: "side" })) =========================
   The brand sits on a full-width bar; the tab strip becomes a left rail at laptop
   width and collapses to an app-icon dropdown menu on phones (tap the brand). One
   nav element, reflowed by width. Generalized from the CoS cockpit rail, 2026-07-09. */
.kit-navcaret { display: none; }

@media (min-width: 1160px) {
  .kit-app--side {
    display: grid;
    grid-template-columns: var(--kit-nav-width) minmax(0, 1fr);
    grid-template-areas: "header header" "rail main";
    align-items: start;
    min-height: 100vh;
  }
  .kit-app--side > .kit-header {
    grid-area: header;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 12px;
    padding: 6px 2px 14px;
    border-bottom: 1px solid var(--kit-line);
  }
  .kit-app--side > .kit-content { grid-area: main; min-width: 0; }
  .kit-app--side > .kit-tabs {
    grid-area: rail;
    position: sticky;
    top: 0;
    align-self: stretch;
    height: 100vh;
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px 14px 20px;
    background: var(--kit-surface);
    border-right: 1px solid var(--kit-line);
  }
  .kit-app--side > .kit-tabs .kit-tab {
    width: 100%;
    min-height: 0;
    margin: 0;
    text-align: left;
    justify-content: flex-start;
    border: none;
    border-left: 2px solid transparent;
    background: transparent;
    border-radius: var(--kit-radius-sm, 8px);
    padding: 9px 12px;
    font: 500 14px var(--kit-font);
    letter-spacing: 0;
    color: var(--kit-soft);
  }
  .kit-app--side > .kit-tabs .kit-tab:hover { background: var(--kit-surface-2); color: var(--kit-ink); }
  .kit-app--side > .kit-tabs .kit-tab.is-active {
    background: var(--kit-surface-3);
    color: var(--kit-ink);
    border-left-color: var(--kit-line-strong);
  }
}

@media (max-width: 1159px) {
  .kit-app--side { display: flex; flex-direction: column; }
  .kit-app--side > .kit-header {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    padding: 4px 2px 10px;
  }
  .kit-app--side > .kit-header .kit-navcaret {
    display: inline-block;
    margin-left: auto;
    font-size: 15px;
    line-height: 1;
    color: var(--kit-muted);
    transition: transform var(--kit-quick, .15s) var(--kit-ease, ease);
  }
  .kit-app--side.kit-nav-open > .kit-header .kit-navcaret { transform: rotate(180deg); color: var(--kit-ink); }
  .kit-app--side > .kit-tabs { display: none; }
  .kit-app--side.kit-nav-open > .kit-tabs {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    box-sizing: border-box;
    margin: 2px 0 14px;
    padding: 8px;
    background: var(--kit-surface-2);
    border: 1px solid var(--kit-line);
    border-radius: var(--kit-radius-lg, 12px);
    box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .6);
  }
  .kit-app--side.kit-nav-open > .kit-tabs .kit-tab {
    width: 100%;
    min-height: 0;
    margin: 0;
    text-align: left;
    justify-content: flex-start;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    border-radius: var(--kit-radius-sm, 8px);
    padding: 11px 13px;
    font: 500 15px var(--kit-font);
    letter-spacing: 0;
    color: var(--kit-soft);
  }
  .kit-app--side.kit-nav-open > .kit-tabs .kit-tab:hover { background: var(--kit-surface-3); color: var(--kit-ink); }
  .kit-app--side.kit-nav-open > .kit-tabs .kit-tab.is-active {
    background: var(--kit-surface-3);
    color: var(--kit-ink);
    border-left-color: var(--kit-line-strong);
  }
}

/* ===== Dropdown-only nav (opt-in via mount({ nav: "menu" })) =====================
   The phone dropdown at EVERY width — no rail, ever. For apps whose content wants
   the whole window (Home Life's calendar). Same rules as the side rail's ≤1159px
   collapse, minus the media query; the open menu caps its width on big screens. */
.kit-app--menu { display: flex; flex-direction: column; }
.kit-app--menu > .kit-header {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  padding: 4px 2px 10px;
}
.kit-app--menu > .kit-header .kit-navcaret {
  display: inline-block;
  /* Next to the lockup, not flushed right — on a wide screen an auto margin would
     strand the caret a full viewport away from the thing it opens. */
  margin-left: 2px;
  font-size: 15px;
  line-height: 1;
  color: var(--kit-muted);
  transition: transform var(--kit-quick, .15s) var(--kit-ease, ease);
}
.kit-app--menu.kit-nav-open > .kit-header .kit-navcaret { transform: rotate(180deg); color: var(--kit-ink); }
.kit-app--menu > .kit-tabs { display: none; }
.kit-app--menu.kit-nav-open > .kit-tabs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  max-width: 380px;
  box-sizing: border-box;
  margin: 2px 0 14px;
  padding: 8px;
  background: var(--kit-surface-2);
  border: 1px solid var(--kit-line);
  border-radius: var(--kit-radius-lg, 12px);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .6);
}
.kit-app--menu.kit-nav-open > .kit-tabs .kit-tab {
  width: 100%;
  min-height: 0;
  margin: 0;
  text-align: left;
  justify-content: flex-start;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  border-radius: var(--kit-radius-sm, 8px);
  padding: 11px 13px;
  font: 500 15px var(--kit-font);
  letter-spacing: 0;
  color: var(--kit-soft);
}
.kit-app--menu.kit-nav-open > .kit-tabs .kit-tab:hover { background: var(--kit-surface-3); color: var(--kit-ink); }
.kit-app--menu.kit-nav-open > .kit-tabs .kit-tab.is-active {
  background: var(--kit-surface-3);
  color: var(--kit-ink);
  border-left-color: var(--kit-line-strong);
}

/* ===== Split nav (opt-in via mount({ nav: "split", pinned: [...] })) =============
   The core sections stay one tap away as header pills; everything else drops from
   the ☰ on the far right. Built for Home Life (2026-07-23); the pattern the CoS
   cockpit may adopt when it goes mobile. */
.kit-app--split { display: flex; flex-direction: column; }
.kit-app--split > .kit-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px 10px;
}
.kit-app--split > .kit-header .kit-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kit-pins {
  display: flex;
  gap: 6px;
  margin-left: auto;
  min-width: 0;
  /* Never overlap the ☰: if the pills can't fit, they scroll inside their box. */
  overflow-x: auto;
  scrollbar-width: none;
}
.kit-pins::-webkit-scrollbar { display: none; }
.kit-pins .kit-tab { flex: 0 0 auto; white-space: nowrap; }
.kit-menubtn {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 9px 13px;
  color: var(--kit-soft);
  background: transparent;
  border: 1px solid var(--kit-line);
  border-radius: var(--kit-pill);
  font-size: 15px;
  line-height: 1;
  transition: color var(--kit-quick) var(--kit-ease), background-color var(--kit-quick) var(--kit-ease), border-color var(--kit-quick) var(--kit-ease);
}
.kit-menubtn:hover { color: var(--kit-ink); border-color: var(--kit-line-strong); background: var(--kit-surface); }
.kit-app--split.kit-nav-open > .kit-header .kit-menubtn {
  color: var(--kit-ink);
  background: var(--kit-accent-soft);
  border-color: var(--kit-accent-line);
}
.kit-app--split > .kit-tabs { display: none; }
.kit-app--split.kit-nav-open > .kit-tabs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  max-width: 380px;
  box-sizing: border-box;
  /* The ☰ sits on the right edge, so the dropdown hangs under it, not across the page. */
  margin: 2px 0 14px auto;
  padding: 8px;
  background: var(--kit-surface-2);
  border: 1px solid var(--kit-line);
  border-radius: var(--kit-radius-lg, 12px);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .6);
}
.kit-app--split.kit-nav-open > .kit-tabs .kit-tab {
  width: 100%;
  min-height: 0;
  margin: 0;
  text-align: left;
  justify-content: flex-start;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  border-radius: var(--kit-radius-sm, 8px);
  padding: 11px 13px;
  font: 500 15px var(--kit-font);
  letter-spacing: 0;
  color: var(--kit-soft);
}
.kit-app--split.kit-nav-open > .kit-tabs .kit-tab:hover { background: var(--kit-surface-3); color: var(--kit-ink); }
.kit-app--split.kit-nav-open > .kit-tabs .kit-tab.is-active {
  background: var(--kit-surface-3);
  color: var(--kit-ink);
  border-left-color: var(--kit-line-strong);
}
/* Compact, don't stack, at phone widths (same discipline as the bar). */
@media (max-width: 620px) {
  .kit-app--split > .kit-header { gap: 6px; }
  .kit-app--split > .kit-header .kit-title { font-size: 17px; }
  .kit-pins .kit-tab { padding: 7px 12px; }
  .kit-menubtn { padding: 7px 11px; }
}
/* Phone: the pinned sections are the point of this mode, so the title text yields
   to them — the app mark alone carries the brand (same trade the PWA icon makes). */
/* Phone: the pinned sections get their OWN full-width row (2026-07-23).
   They used to share the title's row and scroll inside whatever was left, which
   clipped "Calendar" down to "dar" as soon as Home Life pinned a fourth section.
   A half-readable primary section is worse than one more row of chrome, so the
   pills drop below the title and take equal shares of the full width. The label
   also leaves the mono face here: at this size the sans is both narrower and more
   legible, which is what buys a twelve-character label ("Relationship") its room. */
@media (max-width: 500px) {
  .kit-app--split > .kit-header { flex-wrap: wrap; row-gap: 8px; padding-bottom: 8px; }
  .kit-app--split > .kit-header .kit-title { font-size: 16px; }
  .kit-pins {
    order: 3; flex: 1 0 100%; margin-left: 0;
    justify-content: space-between; gap: 5px; overflow-x: visible;
  }
  .kit-pins .kit-tab {
    flex: 1 1 0; min-width: 0; padding: 8px 4px; text-align: center;
    font-family: inherit; font-size: 12px; letter-spacing: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .kit-menubtn { padding: 6px 9px; min-height: 34px; }
}

.kit-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.kit-field + .kit-field {
  margin-top: 12px;
}

.kit-field label,
.kit-field-label {
  color: var(--kit-meta);
  font-family: var(--kit-font-mono);
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
}

.kit-input,
.kit-field input,
.kit-field select,
.kit-field textarea,
input.kit-input,
select.kit-input,
textarea.kit-input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 9px 13px;
  color: var(--kit-ink);
  background: var(--kit-field);
  border: 1px solid var(--kit-line);
  border-radius: var(--kit-radius-sm);
  caret-color: var(--kit-accent);
  font-size: 14.5px;
  transition: border-color var(--kit-quick) var(--kit-ease);
}

.kit-field textarea,
textarea.kit-input {
  min-height: 104px;
  resize: vertical;
  line-height: 1.55;
}

.kit-input::placeholder,
.kit-field input::placeholder,
.kit-field textarea::placeholder {
  color: var(--kit-meta);
}

.kit-input:focus,
.kit-field input:focus,
.kit-field select:focus,
.kit-field textarea:focus {
  border-color: var(--kit-accent);
  outline: 2px solid rgba(91, 140, 255, .22);
  outline-offset: 1px;
}

.kit-empty,
.kit-state {
  display: grid;
  place-items: center;
  min-height: 136px;
  padding: 24px;
  text-align: center;
  color: var(--kit-soft);
  background: rgba(14, 21, 35, .6);
  border: 1px dashed var(--kit-line-strong);
  border-radius: var(--kit-radius);
}

.kit-empty-title {
  margin: 0;
  color: var(--kit-ink);
  font-family: var(--kit-font-display);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
}

.kit-empty p {
  margin: 8px 0 0;
}

.kit-error {
  color: var(--kit-danger);
}

.kit-progress {
  height: 8px;
  overflow: hidden;
  background: var(--kit-surface-3);
  border-radius: var(--kit-pill);
}

.kit-progress > span,
.kit-progress-bar {
  display: block;
  width: var(--kit-progress, 0%);
  height: 100%;
  background: linear-gradient(90deg, var(--kit-accent), var(--kit-ok));
  border-radius: inherit;
  transition: width .4s var(--kit-ease);
}

/* Density: same type, tighter air for the cockpit; roomier for personal apps */
.kit-density-cockpit,
.kit-app.kit-density-cockpit,
.kit-app.cos,
.kit-app.insights {
  --kit-gap: 12px;
  --kit-app-pad: 18px;
  --kit-radius: 12px;
}

.kit-density-cockpit .kit-card,
.kit-app.cos .kit-card,
.kit-app.insights .kit-card {
  padding: 15px 17px;
}

.kit-density-cockpit .kit-panel-head,
.kit-app.cos .kit-panel-head,
.kit-app.insights .kit-panel-head {
  padding: 12px 14px;
}

.kit-density-cockpit .kit-row,
.kit-app.cos .kit-row,
.kit-app.insights .kit-row {
  padding-block: 10px;
}

.kit-density-cockpit .kit-metric,
.kit-app.cos .kit-metric,
.kit-app.insights .kit-metric {
  min-height: 80px;
  padding: 12px 14px;
}

.kit-density-personal,
.kit-app.kit-density-personal,
.kit-app.home,
.kit-app.homelife,
.kit-app.coach,
.kit-app.checkin {
  --kit-gap: 18px;
  --kit-app-pad: 24px;
  --kit-touch: 44px;
}

.kit-density-personal .kit-btn,
.kit-density-personal .kit-tab,
.kit-density-personal .kit-nav-item,
.kit-density-personal .kit-input,
.kit-density-personal .kit-field input,
.kit-density-personal .kit-field select,
.kit-density-personal .kit-field textarea,
.kit-app.home .kit-btn,
.kit-app.home .kit-tab,
.kit-app.home .kit-nav-item,
.kit-app.home .kit-input,
.kit-app.home .kit-field input,
.kit-app.home .kit-field select,
.kit-app.home .kit-field textarea,
.kit-app.homelife .kit-btn,
.kit-app.homelife .kit-tab,
.kit-app.homelife .kit-nav-item,
.kit-app.homelife .kit-input,
.kit-app.homelife .kit-field input,
.kit-app.homelife .kit-field select,
.kit-app.homelife .kit-field textarea,
.kit-app.coach .kit-btn,
.kit-app.coach .kit-tab,
.kit-app.coach .kit-nav-item,
.kit-app.coach .kit-input,
.kit-app.coach .kit-field input,
.kit-app.coach .kit-field select,
.kit-app.coach .kit-field textarea,
.kit-app.checkin .kit-btn,
.kit-app.checkin .kit-tab,
.kit-app.checkin .kit-nav-item,
.kit-app.checkin .kit-input,
.kit-app.checkin .kit-field input,
.kit-app.checkin .kit-field select,
.kit-app.checkin .kit-field textarea {
  min-height: 44px;
  min-height: var(--kit-touch);
}

@media (max-width: 1100px) {
  .kit-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kit-workspace,
  .kit-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .kit-btn,
  .kit-tab,
  .kit-nav-item,
  .kit-input,
  .kit-field input,
  .kit-field select,
  .kit-field textarea {
    min-height: 44px;
    min-height: var(--kit-touch);
  }
}

@media (max-width: 760px) {
  .kit-app {
    --kit-app-pad: 14px;
    --kit-gap: 14px;
    padding: var(--kit-app-pad);
    overflow-x: hidden;
  }

  .kit-shell {
    display: block;
    min-height: calc(100vh - (var(--kit-app-pad) * 2));
    overflow: visible;
  }

  .kit-nav {
    display: grid;
    gap: 10px;
    padding: 14px;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--kit-line);
  }

  .kit-nav-brand,
  .kit-brand {
    margin-bottom: 0;
  }

  .kit-nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kit-nav-section {
    margin-top: 2px;
  }

  .kit-header,
  .kit-topbar {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 16px 14px;
  }

  .kit-command {
    width: 100%;
    min-width: 0;
    min-height: var(--kit-touch);
  }

  .kit-workspace,
  .kit-layout {
    padding: 14px;
  }

  .kit-metrics {
    grid-template-columns: 1fr;
  }

  .kit-row {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: var(--kit-touch);
  }

  .kit-row-actions,
  .kit-row > .kit-row-meta,
  .kit-row > .kit-chip,
  .kit-row > .kit-count {
    grid-column: 2;
    justify-content: flex-start;
  }

  .kit-btn,
  .kit-tab,
  .kit-nav-item,
  .kit-input,
  .kit-field input,
  .kit-field select,
  .kit-field textarea {
    min-height: 44px;
    min-height: var(--kit-touch);
  }

  .kit-btn {
    padding: 10px 18px;
  }

  .kit-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  }

  a.kit-card:hover {
    transform: none;
  }
}

@media (max-width: 430px) {
  .kit-nav-list,
  .kit-tabs {
    grid-template-columns: 1fr;
  }

  .kit-title {
    font-size: 20px;
  }

  .kit-card,
  .kit-panel-head,
  .kit-empty,
  .kit-state {
    padding: 15px;
  }

  .kit-chip,
  .kit-count {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --- Minimal-shell fit (carried over from live adoption, 2026-07-02) ---
   Apps on today's runtime emit no .kit-shell frame; keep the centered
   1080px reading column — Insights independently settled on the same width. */
.kit-app {
  max-width: 1080px;
  margin: 0 auto;
}