/* ── Inter variable font (self-hosted, no CDN dependency) ─────────────── */
/* NOTE: .landing-display (30px/800/-.02em) is defined in Task 8 alongside
   the landing screen markup — hold that selector until that task. */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Apple-style palette. --chili/--accent* names are kept for
     compatibility with theme.js's org-branding derivation. */
  --chili: #0071E3;
  --chili-light: #AFD6F5;
  --chili-dark: #0060C0;
  --chili-darkest: #1D1D1F;

  --bg: #FFFFFF;
  --panel: #FFFFFF;
  --panel-alt: #F5F5F7;
  --panel-alt-2: #E8E8ED;
  --border: #E3E3E6;
  --border-strong: #D2D2D7;
  --text: #1D1D1F;
  --text-dim: #55555C;
  --accent: #0071E3;
  --accent-hover: #0077ED;
  --accent-light: #AFD6F5;
  --accent-dark: #005BB5;
  --error: #D70015;
  --warning: #B25000;
  --ok: #1D8A34;

  /* elevation */
  --shadow-1: 0 1px 2px rgba(0,0,0,.05);
  --shadow-2: 0 6px 24px -8px rgba(0,0,0,.12);
  --shadow-3: 0 20px 48px -16px rgba(0,0,0,.20);

  /* motion (unchanged) */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: .14s;
  --dur-med: .22s;
  --dur-slow: .34s;

  /* semantic tints (unchanged names) */
  --ok-bg: #E7F6EC;
  --warning-bg: #FBEEDD;
  --error-bg: #FDE7E9;

  --brand-grad: linear-gradient(135deg,#0A84FF,#0071E3);

  /* code block: always dark, independent of theme (unchanged behavior) */
  --code-bg: #0F172A;
  --code-text: #E2E8F0;

  /* new tokens */
  --accent-bg: #E8F2FD;
  --accent-border: #AFD6F5;
  --focus-ring: rgba(0,113,227,.4);
  --radius-1: 10px;
  --radius-2: 14px;
  --radius-3: 20px;

  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

:root[data-theme="dark"]:not([data-custom-theme]) {
  --bg: #000000;
  --panel: #1D1D1F;
  --panel-alt: #161617;
  --panel-alt-2: #2A2A2C;
  --border: #38383A;
  --border-strong: #48484A;
  --text: #F5F5F7;
  --text-dim: #B4B4BC;
  --chili: #2997FF;
  --chili-light: #1C3A5E;
  --chili-dark: #6FB6FF;
  --chili-darkest: #F5F5F7;
  --accent: #2997FF;
  --accent-hover: #47A9FF;
  --error: #FF453A;
  --warning: #FF9F0A;
  --ok: #30D158;
  --ok-bg: #0B2E1A;
  --warning-bg: #3A2A0B;
  --error-bg: #3A1512;
  --accent-bg: #0A2540;
  --accent-border: #1C4E80;
  --focus-ring: rgba(41,151,255,.45);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 6px 24px -8px rgba(0,0,0,.5);
  --shadow-3: 0 20px 48px -16px rgba(0,0,0,.6);
  --brand-grad: linear-gradient(135deg,#2997FF,#0A84FF);
}

* { box-sizing: border-box; }

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 12px 32px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-1);
}
.topbar-actions { justify-self: end; }

/* ── Brand / logo ─────────────────────────────────────────────────────── */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.topbar-brand-link { cursor: pointer; border-radius: 8px; padding: 4px 6px; margin: -4px -6px; transition: opacity .12s; }
.topbar-brand-link:hover { opacity: .78; }
.topbar-brand-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brand-logo { display: inline-flex; flex: 0 0 auto; }
.brand-logo svg { display: block; border-radius: 9px; box-shadow: 0 2px 8px rgba(15, 23, 42, .28); }
.brand-text { display: inline-flex; flex-direction: column; line-height: 1.12; }
.brand-name { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.brand-sub { font-size: 12px; font-weight: 500; color: var(--text-dim); }

/* ── Primary nav (Apps / Agents / Skills / Build) ─────────────────────── */
.topbar-nav { display: flex; align-items: center; gap: 22px; }
.topbar-nav a {
  font-size: 15px; font-weight: 600; color: var(--text-dim);
  text-decoration: none; padding: 4px 2px; border-bottom: 2px solid transparent;
  transition: color .14s, border-color .14s;
}
.topbar-nav a:hover { color: var(--text); }
.topbar-nav a.active { color: var(--text); border-bottom-color: var(--accent); }

/* ── Top-bar action cluster ───────────────────────────────────────────── */
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-sep { width: 1px; align-self: stretch; margin: 4px 4px; background: var(--border); }

.topbar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 600; font-family: inherit; line-height: 1;
  color: var(--text-dim); background: transparent; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.topbar-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.topbar-btn:hover { background: var(--panel-alt); color: var(--chili-dark); border-color: var(--border); }
.topbar-btn.accent { color: var(--chili); background: var(--panel-alt); border-color: var(--border-strong); }
.topbar-btn.accent:hover { background: var(--panel-alt-2); color: var(--chili-dark); }

.profile-menu { position: relative; }
.profile-toggle { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--panel-alt); }
.profile-toggle:hover { background: var(--panel-alt-2); color: var(--chili-dark); }
.profile-toggle[aria-expanded="true"] { border-color: var(--chili); color: var(--chili); }
.profile-toggle svg { width: 17px; height: 17px; margin: 0; }

.profile-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 150;
  min-width: 190px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-3); padding: 6px;
  animation: modal-in var(--dur-fast) var(--ease-out) both;
}
.profile-dropdown-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: 8px; border: none; background: none;
  font-size: 13px; font-weight: 600; font-family: inherit; color: var(--text);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.profile-dropdown-item svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--text-dim); }
.profile-dropdown-item:hover { background: var(--panel-alt); color: var(--chili-dark); }
.profile-dropdown-item:hover svg { color: var(--chili-dark); }
.profile-dropdown-item.accent { color: var(--chili); }
.profile-dropdown-item.accent svg { color: var(--chili); }

.steps {
  display: flex;
  gap: 4px;
  padding: 14px 32px 0 32px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.step::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--accent);
  transform: scaleX(0); transition: transform var(--dur-med) var(--ease-out);
}
.step.active::after { transform: scaleX(1); }

.step .num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--panel-alt);
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--text-dim);
}

.step.active { color: var(--chili-darkest); }
.step.active .num { background: var(--accent); color: #fff; border-color: var(--accent); }
.step.done .num { background: var(--chili-dark); color: #fff; border-color: var(--chili-dark); }

.layout {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 32px 100px 32px;
}

.category-menu {
  display: none;
  flex: 0 0 230px;
  position: sticky;
  top: 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
.category-menu { display: block; }
body:not(.agents-step) .category-section { display: none; }
body:not(.agents-step) .nav-divider { margin-top: 0; }

.category-menu-header {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim); font-weight: 700; margin-bottom: 10px; padding: 0 8px;
}

.category-list { display: flex; flex-direction: column; gap: 3px; }

.category-item {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; width: 100%; text-align: left;
  background: none; border: none; border-radius: 8px;
  padding: 9px 10px; font-size: 13.5px; font-weight: 500; color: var(--text);
  cursor: pointer; transition: background .12s, color .12s;
}
.category-item:hover { background: var(--panel-alt); }
.category-item.active { background: var(--chili); color: #fff; font-weight: 700; }
.category-item .category-count {
  font-size: 11px; font-weight: 700; color: var(--text-dim);
  background: var(--panel-alt); border-radius: 10px; padding: 1px 7px; min-width: 20px; text-align: center;
}
.category-item.active .category-count { background: rgba(255,255,255,.25); color: #fff; }

.nav-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 10px 0;
}

.nav-create { padding: 4px 0; }

.nav-create-header {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  font-weight: 700;
  margin-bottom: 6px;
  padding: 0 8px;
}

.nav-create-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--chili);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.nav-create-btn:hover { background: var(--panel-alt); color: var(--chili-dark); }

main { flex: 1 1 auto; min-width: 0; max-width: 1000px; margin: 0 auto; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.panel { animation: panel-in var(--dur-slow) var(--ease-out) both; }

.panel h2 { margin-top: 0; color: var(--chili-darkest); font-size: 1.5rem; font-weight: 750; letter-spacing: -.01em; }
.hint { color: var(--text-dim); font-size: 0.9375rem; line-height: 1.5; }
.panel > .hint { margin-bottom: 18px; }
.hint-inline { font-weight: 400; font-size: 0.8125rem; color: var(--text-dim); }

.field { margin: 16px 0; }
.field label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; font-weight: 600; }
.field .help-text { font-size: 0.8125rem; color: var(--text-dim); margin-top: 4px; line-height: 1.4; }
.field.invalid input { border-color: var(--error); }
.field .field-error-text { color: var(--error); font-size: 12px; margin-top: 4px; line-height: 1.4; }
.browse-row { display: flex; gap: 8px; align-items: center; }
.browse-row input { flex: 1; min-width: 0; }
.btn-browse {
  flex-shrink: 0; background: var(--panel-alt); color: var(--chili-darkest);
  border: 1px solid var(--border-strong); border-radius: 6px; padding: 6px 12px;
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-browse:hover:not(:disabled) { background: var(--panel-alt-2); }
.btn-browse:disabled { opacity: .5; cursor: default; }

input[type="text"], input[type="email"], input[type="search"], input[type="number"], input[type="password"], textarea, select {
  width: 100%;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
}
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
select:hover { border-color: var(--border-strong); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--chili);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

textarea { min-height: 70px; font-family: inherit; font-size: 0.9375rem; }
/* Prose fields (not code/config) read better in the body font. */
#org-probe-note { font-family: inherit; font-size: 14px; }

.search { margin: 0; }

.filter-row { display: flex; gap: 10px; margin: 16px 0 20px 0; }
.filter-row .search { flex: 1; }
.filter-row select { width: auto; min-width: 160px; }

/* ---------- Landing screen (spec §2.3) ---------- */
.landing-hero { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.landing-display { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; color: var(--text); }
.landing-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto 40px; overflow-x: hidden; }
/* Spec Part 5: at very wide viewports the landing split may widen to 1100px, centered
   (currently bounded by `main`'s own max-width until that widens). */
@media (min-width: 1280px) { .landing-split { max-width: 1100px; } }
.landing-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-3);
  padding: 32px; text-align: center; cursor: pointer;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.landing-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--accent-border); }
.landing-card-icon { font-size: 40px; margin-bottom: 12px; }
.landing-card h3 { font-size: 20px; margin: 0 0 8px; }
.landing-card p { color: var(--text-dim); font-size: 14px; line-height: 1.55; margin: 0 0 16px; }
.landing-card-meta { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }
.landing-card .btn { pointer-events: none; }
.landing-featured { max-width: 1100px; margin: 0 auto; }

/* ---------- Breadcrumb (spec §2.5) ---------- */
.breadcrumb { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text-dim); margin-bottom: 16px; }
.breadcrumb a { color: var(--text-dim); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .current { color: var(--text); font-weight: 600; }
.breadcrumb .sep { opacity: .5; }

/* ---------- App grid + cards (spec §2.4) ---------- */
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 16px; overflow-x: hidden; }
.app-grid-compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.app-card {
  display: block; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-2);
  padding: 18px; text-decoration: none; color: inherit;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.app-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--accent-border); }
.app-card-icon {
  width: 44px; height: 44px; border-radius: var(--radius-1); background: var(--accent-bg);
  display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 10px;
}
.app-card-name { font-weight: 700; font-size: 14px; }
.app-card-tagline { font-size: 12px; color: var(--text-dim); margin: 4px 0 10px; line-height: 1.4; }
.app-card-meta { display: flex; justify-content: space-between; align-items: center; }
.app-card-count { font-size: 11px; color: var(--text-dim); }

/* ---------- Category chips (gallery filter row) ---------- */
.category-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.category-chip {
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 14px; font-size: 13px; color: var(--text-dim); cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.category-chip:hover { border-color: var(--accent-border); color: var(--text); }
.category-chip.active { background: var(--accent-bg); border-color: var(--accent-border); color: var(--text); font-weight: 600; }

/* ---------- App detail page (spec §2.4) ---------- */
.detail-hero {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  margin-bottom: 24px; flex-wrap: wrap;
}
.detail-hero-left { display: flex; align-items: flex-start; gap: 16px; flex: 1; min-width: 0; }
.detail-hero-icon { flex-shrink: 0; }
.detail-hero-text { flex: 1; min-width: 0; }
.detail-hero-name { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.detail-hero-tagline { font-size: 14px; color: var(--text-dim); margin: 0 0 10px; }
.detail-hero-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-cta { flex-shrink: 0; align-self: center; }
.detail-description { font-size: 14px; line-height: 1.65; color: var(--text-dim); margin: 0 0 24px; }
.detail-section { margin-bottom: 28px; }
.detail-section-title { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.detail-agents-list { display: flex; flex-direction: column; gap: 8px; }
.detail-agent-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-1);
  padding: 10px 14px;
}
.detail-agent-unavailable { opacity: .5; font-style: italic; }
.detail-agent-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.detail-agent-name { font-size: 13px; font-weight: 600; }
.detail-agent-tagline { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.detail-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.detail-checklist li::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.detail-checklist li { font-size: 14px; }
.detail-bullets { padding-left: 20px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.detail-bullets li { font-size: 14px; }
.detail-footnote { font-size: 13px; color: var(--text-dim); font-style: italic; margin-top: 16px; }

/* ---------- View chrome by route (Task 8) ---------- */
/* The step nav, category sidebar, and Back/Next row belong to the wizard/setup
   flows only. renderRoute() sets body[data-view]; the view sections themselves are
   shown/hidden via .hidden in JS (showView/showPanel), so we only gate chrome here. */
body[data-view="landing"] .steps,
body[data-view="gallery"] .steps,
body[data-view="detail"] .steps,
body[data-view="landing"] .category-menu,
body[data-view="gallery"] .category-menu,
body[data-view="detail"] .category-menu,
body[data-view="landing"] .nav-buttons,
body[data-view="gallery"] .nav-buttons,
body[data-view="detail"] .nav-buttons,
body[data-view="landing"] #setup-context-bar,
body[data-view="gallery"] #setup-context-bar,
body[data-view="detail"] #setup-context-bar { display: none; }

/* ---------- Quick-setup mode (Task 10) ---------- */
#setup-context-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 32px;
  background: var(--panel-alt); border-bottom: 1px solid var(--border);
}
#setup-context-label { font-size: 13px; color: var(--text-dim); font-weight: 600; }
#btn-edit-assistants { margin-right: 0; padding: 6px 16px; font-size: 13px; }
.advanced-storage-link {
  display: inline-block; margin-top: 8px;
  font-size: 13px; color: var(--text-dim); text-decoration: underline; cursor: pointer;
}
.advanced-storage-link:hover { color: var(--text); }

.selected-agents-box {
  background: var(--panel-alt);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 20px;
}
.selected-agents-box h3 { margin: 0 0 10px 0; font-size: 13px; color: var(--chili-dark); text-transform: uppercase; letter-spacing: .04em; }

.selected-agent-item {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 10px; margin-bottom: 8px;
}
.selected-agent-item.parallel-group { border-left: 3px solid var(--chili); }
.selected-agent-top-row { display: flex; align-items: center; gap: 10px; }
.selected-agent-item .order-num {
  min-width: 26px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--chili); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.selected-agent-item .parallel-badge { color: var(--chili); font-weight: 700; font-size: 14px; }
.selected-agent-item .agent-name { flex: 1; font-size: 13px; font-weight: 600; }
.selected-agent-item .agent-autonomy { font-size: 11px; color: var(--text-dim); text-transform: uppercase; }
.selected-agent-item .reorder-btn {
  background: var(--panel-alt); border: 1px solid var(--border-strong); color: var(--text);
  border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: 13px; line-height: 1;
}
.selected-agent-item .reorder-btn:hover { background: var(--chili-light); }
.selected-agent-item .reorder-btn:disabled { opacity: .3; cursor: not-allowed; }
.selected-agent-item .remove-btn { background: none; border: none; color: var(--error); cursor: pointer; font-size: 16px; padding: 0 4px; }

.selected-agent-details { padding-left: 34px; }
.selected-agent-details .parallel-toggle { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.selected-agent-details .field { margin: 0; }
.selected-agent-details textarea { min-height: 44px; }

.agent-group { margin-bottom: 22px; }
.agent-group-header {
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--chili-dark);
  font-weight: 700; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}

.agent-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

@keyframes pop-in { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Same visual DNA as the app gallery's .tile (radius/shadow/motion/pill-badge language),
   scaled down for a dense multi-select grid (up to 100+ cards) — no photo banner, since
   that would make scanning that many cards at once far slower. */
.agent-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: 18px;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.agent-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--chili-light); }
.agent-card.selected { border-color: var(--chili); background: var(--accent-bg); box-shadow: var(--shadow-2); }
.agent-card.selected::after {
  content: "✓";
  position: absolute; top: -7px; right: -7px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--chili); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-1);
  animation: pop-in var(--dur-med) var(--ease-out);
}

.agent-card-icon {
  width: 40px; height: 40px; border-radius: var(--radius-1); background: var(--accent-bg);
  display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 10px;
}
.agent-card .top-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.agent-card .name { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.agent-card .badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 4px; background: var(--panel-alt); color: var(--text-dim);
  white-space: nowrap;
}
.agent-card .badge.autonomy-human-approval { color: var(--error); background: var(--error-bg); }
.agent-card .badge.autonomy-review-gate { color: var(--warning); background: var(--warning-bg); }
.agent-card .badge.autonomy-assist { color: var(--ok); background: var(--ok-bg); }
.agent-card .tagline { font-size: 13px; color: var(--text-dim); margin-top: 6px; line-height: 1.4; }
/* Pill badge, same shape/tracking language as the gallery tile's .thumb-cat category pill
   (uppercase, letter-spaced, rounded-full) — recolored for a plain card background instead
   of an image-overlay blur. */
.agent-card .func {
  display: inline-block; margin-top: 8px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
  color: var(--chili); background: var(--accent-bg);
  padding: 3px 10px; border-radius: 980px;
}

.option-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.option-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.option-card.selected { border-color: var(--chili); background: var(--accent-bg); box-shadow: var(--shadow-1); }
.option-card .top-row { display: flex; align-items: center; gap: 10px; }
.option-card .label { font-weight: 700; font-size: 14px; flex: 1; }
.option-card .desc { font-size: 13px; color: var(--text-dim); margin: 4px 0 0 30px; }
.option-card .readiness { font-size: 11px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.readiness.ready { background: var(--ok-bg); color: var(--ok); }
.readiness.partial { background: var(--warning-bg); color: var(--warning); }
.option-card .fields-box { margin-left: 30px; margin-top: 10px; }
.integration-logo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.btn-setup-guide {
  border: 1px solid var(--border-strong); background: var(--panel-alt); color: var(--chili-dark);
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; cursor: pointer;
}
.btn-setup-guide:hover { background: var(--panel-alt-2); }

.fields-box { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.fields-box .field { margin: 0; grid-column: span 1; }
.fields-box .field.wide { grid-column: span 2; }

.approval-warning {
  margin: 10px 0 0 30px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--error-bg);
  border: 1px solid var(--chili-light);
  font-size: 12px;
  color: var(--chili-dark);
}
.approval-warning label { color: var(--text); display: flex; gap: 6px; align-items: center; margin-top: 6px; }

.storage-role { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.storage-role .role-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.storage-role .role-title { font-weight: 700; font-size: 14px; }
.storage-role .required-badge { font-size: 10px; color: var(--text-dim); }

.review-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: start; }
.deploy-main { display: flex; flex-direction: column; gap: 20px; }

/* ── Deploy summary chips ("Review & deploy" headline, replaces reading raw JSON) ── */
.deploy-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.deploy-summary .deploy-chip { cursor: default; }
.deploy-summary .deploy-chip:hover { border-color: var(--border-strong); }

/* ── Instructions card ────────────────────────────────────────────────────────── */
.deploy-instructions-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-3);
  padding: 24px 26px; box-shadow: var(--shadow-1);
}
.deploy-instructions-card h3 { margin: 0 0 14px; font-size: 17px; color: var(--text); }
.deploy-instructions-card ol { margin: 0; padding-left: 22px; }
.deploy-instructions-card ol li {
  font-size: 15px; line-height: 1.6; color: var(--text); margin-bottom: 10px; padding-left: 4px;
}
.deploy-instructions-card ol li::marker { color: var(--accent); font-weight: 700; }
.deploy-instructions-card code {
  background: var(--panel-alt); border-radius: 5px; padding: 2px 6px; font-size: 13.5px;
}
.deploy-instructions-card h4 { margin: 18px 0 8px; font-size: 14px; color: var(--text-dim); }

/* ── Technical details (collapsed raw draft JSON — de-emphasized, not deleted) ──── */
.deploy-tech summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-dim);
  padding: 4px 0; list-style: none;
}
.deploy-tech summary::-webkit-details-marker { display: none; }
.deploy-tech summary::before { content: "\25B8"; display: inline-block; margin-right: 6px; transition: transform .12s; }
.deploy-tech[open] summary::before { transform: rotate(90deg); }
.deploy-tech summary:hover { color: var(--text); }
.deploy-tech .code-block { margin-top: 10px; }

.code-block {
  background: var(--code-bg); color: var(--code-text); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 16px; font-size: 12px; overflow: auto; max-height: 520px;
  font-family: "SF Mono", Menlo, monospace; white-space: pre-wrap;
}

.issues-box { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; min-height: 40px; }
.issue { border-radius: 8px; padding: 10px 12px; font-size: 13px; border: 1px solid; }
.issue.error { border-color: var(--chili-light); background: var(--error-bg); color: var(--error); }
.issue.warning { border-color: var(--warning); background: var(--warning-bg); color: var(--warning); }
.issue.ok { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }

.btn {
  border: none; border-radius: 980px; padding: 10px 20px; font-size: 14px; font-weight: 600;
  cursor: pointer; margin-right: 8px; font-family: inherit; line-height: 1;
  transition: background var(--dur-fast), transform var(--dur-fast), opacity var(--dur-fast);
}
.btn:active:not(:disabled) { transform: scale(.97); }
/* Apple-style primary: solid accent fill, no gradient, no heavy shadow */
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--accent-dark); transform: translateY(-1px) scale(1.01); }
.btn.primary:disabled { background: var(--accent); color: #fff; opacity: .4; cursor: not-allowed; }
/* Apple-style secondary: tinted fill, accent-colored text */
.btn.secondary { background: var(--panel-alt); color: var(--text); border: 1px solid var(--border-strong); }
.btn.secondary:hover:not(:disabled) { background: var(--panel-alt-2); }
.btn.secondary:disabled { opacity: .4; cursor: not-allowed; }

.nav-buttons {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--panel); border-top: 1px solid var(--border);
  padding: 14px 32px; display: flex; justify-content: flex-end; gap: 8px;
  box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06);
}

.btn:focus-visible, .topbar-btn:focus-visible, .step:focus-visible, .agent-card:focus-visible,
.option-card:focus-visible, .admin-tab:focus-visible {
  outline: 2px solid var(--chili); outline-offset: 2px;
}

.hidden { display: none !important; }
label.checkbox-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }

.section-subhead {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--chili-dark); margin: 22px 0 8px;
}
.section-subhead:first-of-type { margin-top: 10px; }
.leaf-output-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.leaf-output-row .filename-preview { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

/* ── Login screen ────────────────────────────────────────────────────── */

.login-screen {
  position: fixed; inset: 0; z-index: 500;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.login-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 32px; width: 340px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
}
.login-card h1 { font-size: 18px; margin: 0 0 4px; color: var(--text); }
.login-card .field { display: flex; flex-direction: column; gap: 4px; }
.login-card label { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.login-card input {
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px;
}
.login-error { color: var(--error); font-size: 13px; margin: 0; }
.login-card .brand { justify-content: center; margin-bottom: 4px; }
.login-sso-sep { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.login-sso-sep::before, .login-sso-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.login-sso-sep span { font-size: 12px; color: var(--text-dim); white-space: nowrap; }

#sso-slug-row { margin: 0; }
#sso-slug-row label { font-size: 12px; color: var(--text-dim); }
.sso-slug-inputs { display: flex; gap: 8px; }
.sso-slug-inputs input { flex: 1; }
.sso-slug-inputs button { white-space: nowrap; }
#sso-error { margin-top: 6px; }

/* Consumer social login buttons (Phase 2.5) -- Google/X, distinct from the org-slug
   WorkOS SSO block above. Reuses .btn.secondary, no new button style. */
.social-login-row { display: flex; gap: 8px; }
.social-login-row .btn { flex: 1; }
.social-login-block [data-social-error] { margin-top: 6px; }

/* ── API key tutorials ────────────────────────────────────────────────── */
.api-key-guide {
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  background: var(--accent-bg);
  margin: 8px 0 4px;
  overflow: hidden;
}
.api-key-guide summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.api-key-guide summary::-webkit-details-marker { display: none; }
.api-key-guide summary::before {
  content: "›";
  font-size: 16px;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out);
  display: inline-block;
}
.api-key-guide[open] summary::before { transform: rotate(90deg); }
.api-key-guide-steps {
  margin: 0;
  padding: 4px 14px 12px 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.api-key-guide-steps li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.api-key-guide-steps li a { color: var(--accent); text-decoration: none; }
.api-key-guide-steps li a:hover { text-decoration: underline; }
.api-key-guide-steps li code {
  background: var(--panel-alt-2);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
  font-family: "SF Mono", "Fira Code", monospace;
}
.api-key-guide-btn {
  margin: 0 14px 12px;
  font-size: 12px !important;
  padding: 6px 12px !important;
}
.api-key-guide--compact { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--border); }

/* ── Modals ──────────────────────────────────────────────────────────── */

@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: overlay-in var(--dur-fast) ease-out both;
}

.modal-box {
  background: var(--panel);
  border-radius: 16px;
  width: 640px;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 48px rgba(15, 23, 42, 0.24);
  animation: modal-in var(--dur-med) var(--ease-out) both;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0 24px;
}

.modal-title { margin: 0; font-size: 18px; color: var(--chili-darkest); }

.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.modal-close:hover { color: var(--chili); }

.modal-stepper {
  display: flex;
  gap: 0;
  padding: 14px 24px 0 24px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.modal-step {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 8px 12px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.modal-step.active { color: var(--chili); border-bottom-color: var(--chili); }
.modal-step.done { color: var(--chili-dark); }

/* Auth modal tabs (#modal-auth) reuse .modal-step but are real <button>s, so reset the
   button chrome and add a pointer cursor; active/hover behavior is inherited above. */
.auth-tabs { overflow: hidden; }
.auth-tabs .modal-step { background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; font: inherit; }
.auth-tabs .modal-step:hover { color: var(--chili-dark); }

.builder-panel { padding: 20px 24px; }

.modal-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.required-star { color: var(--chili); font-weight: 700; }

/* Profile modal */
.modal-profile-appearance { margin-bottom: 18px; }
.theme-toggle-row {
  display: inline-flex; border: 1px solid var(--border-strong); border-radius: 8px;
  overflow: hidden; margin-top: 6px;
}
.theme-toggle-btn {
  border: none; border-right: 1px solid var(--border-strong); background: var(--panel);
  color: var(--text-dim); font-size: 13px; font-weight: 600; font-family: inherit;
  padding: 8px 16px; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast);
}
.theme-toggle-btn:last-child { border-right: none; }
.theme-toggle-btn:hover { background: var(--panel-alt); }
.theme-toggle-btn[aria-pressed="true"] { background: var(--chili); color: #fff; }
#profile-kb-section { margin-top: 16px; }
.profile-kb-heading { font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
#profile-kb-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
#profile-kb-form { display: flex; gap: 8px; margin-top: 8px; }
#profile-kb-name { flex: 1; }
#profile-kb-path { flex: 2; }
#profile-status { margin-top: 14px; }
#btn-delete-my-context { margin-top: 10px; color: var(--error); }

/* Save-template form (Review step) */
#btn-save-template { margin-top: 8px; }
.save-template-form .field-first { margin-top: 12px; }
#tmpl-desc-input { min-height: 56px; }
.link-cancel { margin-left: 12px; font-size: 13px; color: var(--text-dim); }
#save-template-status { margin-top: 8px; }
#btn-start-over { margin-top: 16px; }

/* Agent builder modal */
#ab-function-other { margin-top: 8px; }
#ab-system-prompt { min-height: 280px; }
#btn-add-output-field { margin-top: 8px; }
.ab-preview-block { max-height: 340px; overflow-y: auto; }
#ab-submit-status { margin-top: 8px; }

/* Guided integration setup modal (Feature 6) */
.setup-guide-intro { display: flex; align-items: center; gap: 12px; padding: 16px 24px 0; }
.setup-guide-logo { width: 32px; height: 32px; object-fit: contain; }
.setup-guide-logo.hidden { display: none; }
.setup-guide-steps { list-style: none; padding: 4px 24px 20px; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.setup-guide-step { display: flex; gap: 12px; }
.setup-guide-step .step-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--chili);
  color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.setup-guide-step .step-title { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.setup-guide-step .step-body { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

/* Output field rows in step 4 */
.output-field-row {
  display: grid;
  grid-template-columns: 1fr 2fr 120px 32px;
  gap: 8px;
  align-items: start;
  margin-bottom: 8px;
}
.output-field-row input, .output-field-row select { margin: 0; }
.output-field-row .remove-field-btn {
  background: none;
  border: none;
  color: var(--error);
  font-size: 18px;
  cursor: pointer;
  padding: 8px 0 0 0;
  line-height: 1;
}

/* Prompt tips collapsible */
.prompt-tips {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-dim);
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
}
.prompt-tips summary { cursor: pointer; font-weight: 600; }
.prompt-tips ul { margin: 8px 0 0 0; padding-left: 18px; line-height: 1.7; }

/* Transient success banner */
.success-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ok);
  color: #fff;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  z-index: 2000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  animation: banner-fade 4s forwards;
}
@keyframes banner-fade {
  0%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}

/* ── Harness Templates ───────────────────────────────────────────────── */

.save-template-form {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-top: 8px;
}

.template-load-section { margin-bottom: 20px; }

.template-load-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  user-select: none;
}
.template-load-header .chevron { font-size: 12px; color: var(--text-dim); }

.template-load-list {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}

.template-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.template-card:last-child { border-bottom: none; }

.template-card-info { flex: 1; }
.template-card-name { font-weight: 700; font-size: 14px; }
.template-card-desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.template-loaded-banner {
  background: var(--panel-alt);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--chili-dark);
  margin-bottom: 16px;
}

@media (max-width: 1024px) {
  .layout { gap: 20px; padding: 20px 20px 100px; }
  .category-menu { flex: 0 0 200px; }
}

@media (max-width: 860px) {
  .layout { flex-direction: column; }
  .category-menu { position: static; flex: none; width: 100%; max-height: none; }
  main { width: 100%; }
  .category-list { flex-direction: row; flex-wrap: wrap; }
  .category-item { width: auto; }
  .review-grid, .fields-box, .teams-columns { grid-template-columns: 1fr; }
  .fields-box .field.wide { grid-column: auto; }
  .agent-list { grid-template-columns: 1fr; }
  .topbar { display: flex; flex-wrap: wrap; padding: 10px 16px; }
  .topbar-nav { order: 3; width: 100%; gap: 16px; overflow-x: auto; justify-content: center; }
  .topbar-actions { flex-wrap: wrap; justify-self: unset; }
  .brand-sub, .topbar-sep { display: none; }
  .steps { overflow-x: auto; padding: 10px 16px 0; }
  .step { white-space: nowrap; padding: 8px 10px; }
  .nav-buttons { padding: 12px 16px; }
  .filter-row { flex-wrap: wrap; }
  /* Marketplace views (Tasks 8-10) — 860 px additions */
  .landing-split { grid-template-columns: 1fr; }
  .app-grid-compact { grid-template-columns: repeat(2, 1fr); }
  .detail-hero { flex-direction: column; }
  .detail-cta { align-self: stretch; }
  .detail-cta .btn { width: 100%; margin-right: 0; }
  #setup-context-bar { padding: 10px 16px; }
}

/* ── Detour modal: disable step-tab interaction while a detour is active ── */
body.detour-active .steps { pointer-events: none; opacity: .55; }

/* ── 640 px breakpoint — new marketplace views (Task 12) ─────────────── */
@media (max-width: 640px) {
  .layout { padding: 14px 14px 80px; }
  /* Landing: full-bleed cards */
  .landing-split { max-width: 100%; }
  .landing-card { padding: 22px 18px; }
  /* Featured strip 1-up */
  .app-grid-compact { grid-template-columns: 1fr; }
  /* Breadcrumb: wrap rows so long paths don't overflow */
  .breadcrumb { flex-wrap: wrap; row-gap: 4px; overflow: hidden; max-width: 100%; }
  .breadcrumb .current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 180px; }
  /* Landing hero: edge breathing room */
  .landing-hero { padding: 0 4px; }
  /* Detail agent rows: stack info and badge vertically at narrow widths */
  .detail-agent-row { flex-direction: column; gap: 4px; }
  /* Ensure spans inside flex column wrap text (needed because flex-item spans keep max-content width) */
  .detail-agent-name, .detail-agent-tagline { display: block; max-width: 100%; overflow-wrap: break-word; }
}

/* ── 480 px breakpoint — new marketplace views (Task 12) ─────────────── */
@media (max-width: 480px) {
  /* Landing display headline drops to 24 px */
  .landing-display { font-size: 24px; }
  /* Gallery/featured: single column */
  .app-grid { grid-template-columns: 1fr; }
  /* Wizard/setup nav-buttons: Back/Next become 50-50 full-width */
  .nav-buttons { padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .nav-buttons .btn { flex: 1; margin-right: 0; }
  /* Step nav labels: shrink to number-only circles */
  .step { font-size: 0; padding: 6px 4px; gap: 0; }
  .step .num { font-size: 12px; }
}

@keyframes shimmer { to { transform: translateX(100%); } }
.skeleton {
  position: relative; overflow: hidden;
  background: var(--panel-alt); border-radius: 6px;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: shimmer 1.4s infinite;
}
.skeleton.line { height: 12px; margin: 6px 0; }
.skeleton.line.w-40 { width: 40%; } .skeleton.line.w-60 { width: 60%; } .skeleton.line.w-90 { width: 90%; }
.skeleton-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
}

@keyframes spin { to { transform: rotate(360deg); } }
.btn.busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.busy::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--chili-light); border-top-color: var(--chili);
  animation: spin .7s linear infinite;
}
.btn.primary.busy::after { border-color: rgba(255, 255, 255, .4); border-top-color: #fff; }

.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 36px 20px; text-align: center;
  border: 1px dashed var(--border-strong); border-radius: 10px;
  background: var(--panel);
}
.empty-state .empty-icon { font-size: 26px; opacity: .7; }
.empty-state .empty-title { font-weight: 700; font-size: 14px; color: var(--text); }
.empty-state .empty-hint { font-size: 13px; color: var(--text-dim); max-width: 380px; }

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

/* ═══════════════════════════════════════════════════════════════════════════
   R2 Marketplace storefront — Apple-style landing + gallery
   Tokens used: --text, --text-dim, --panel, --panel-alt, --border,
   --border-strong, --accent, --accent-hover, --shadow-1, --shadow-2,
   --radius-3, --ease-out.  No hex values that duplicate a token.
   ══════════════════════════════════════════════════════════════════════════ */

/* Widen the layout container for storefront views so main can breathe */
body[data-view="landing"] .layout,
body[data-view="gallery"] .layout {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  gap: 0;
}
body[data-view="landing"] main,
body[data-view="gallery"] main {
  max-width: 1180px;
  padding: 0 32px 64px;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.mk-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 72px 0 34px;
}
.mk-hero-glow {
  position: absolute;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 920px;
  height: 460px;
  background: radial-gradient(closest-side, var(--accent-bg), transparent 72%);
  z-index: 0;
  pointer-events: none;
}
.mk-hero > *:not(.mk-hero-glow) { position: relative; z-index: 1; }
.mk-hero h1 {
  font-size: 56px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -.03em;
  margin: 0 0 14px;
  color: var(--text);
}
.mk-hero p {
  font-size: 21px;
  line-height: 1.4;
  color: var(--text-dim);
  margin: 0 auto;
  max-width: 40ch;
  font-weight: 400;
}
.mk-hero-links {
  margin-top: 22px;
  display: flex;
  gap: 26px;
  justify-content: center;
  font-size: 17px;
}
.mk-hero-links a {
  color: var(--accent);
  font-weight: 400;
  text-decoration: none;
}
.mk-hero-links a:hover { text-decoration: underline; }

/* ── NotionEdge.ai promo banner (landing page, above "How this works") ──── */
.mk-notionedge-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 28px;
  padding: 20px 24px;
  border-radius: var(--radius-2);
  border: 1px solid var(--accent-border);
  background: linear-gradient(135deg, var(--accent-bg), var(--panel) 85%);
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.mk-notionedge-banner:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--accent);
}
.mk-notionedge-mark {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
}
.mk-notionedge-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.mk-notionedge-copy strong { font-size: 16px; color: var(--text); }
.mk-notionedge-copy span { font-size: 14px; color: var(--text-dim); }
.mk-notionedge-banner .mk-btn { flex: 0 0 auto; pointer-events: none; }
@media (max-width: 640px) {
  .mk-notionedge-banner { flex-wrap: wrap; text-align: center; }
  .mk-notionedge-copy { text-align: center; }
  .mk-notionedge-banner .mk-btn { width: 100%; text-align: center; }
}

/* ── Featured banner ────────────────────────────────────────────────────── */
.mk-feature {
  position: relative;
  height: 440px;
  border-radius: 22px;
  overflow: hidden;
  margin: 8px 0 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: flex-start;
  padding: 54px 24px 0;
  color: #fff;
  cursor: pointer;
  outline-offset: 3px;
}
.mk-feature:focus-visible { outline: 2px solid var(--accent); }
.mk-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.12) 42%, rgba(0,0,0,.46));
  pointer-events: none;
}
.mk-feature > * { position: relative; z-index: 2; }
.mk-feature-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(.85) brightness(.92);
}
.mk-feature-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
}
.mk-feature h2 {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -.03em;
  margin: 8px 0 8px;
  max-width: 18ch;
  color: #fff;
}
.mk-feature p {
  font-size: 19px;
  font-weight: 400;
  color: rgba(255,255,255,.92);
  margin: 0;
  max-width: 34ch;
}
.mk-feature-row {
  margin-top: 22px;
  display: flex;
  gap: 14px;
  justify-content: center;
}

/* ── Pill buttons (featured banner + tile foot accent) ──────────────────── */
.mk-btn {
  display: inline-block;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 11px 22px;
  border-radius: 980px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .18s, transform .18s;
  text-decoration: none;
  user-select: none;
}
.mk-btn.primary {
  background: var(--accent);
  color: #fff;
}
.mk-btn.primary:hover { background: var(--accent-hover); transform: scale(1.02); }
.mk-btn.ghost {
  background: rgba(255,255,255,.16);
  color: #fff;
  border-color: rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.mk-btn.ghost:hover { background: rgba(255,255,255,.26); }
/* Outline variant (Phase 8): for buttons over the plain page background, not the
   .mk-feature banner's photo backdrop -- .ghost's translucent-white styling only reads
   correctly over a dark-scrimmed image, so it would be invisible here. Token-based like
   .btn.secondary, just kept pill-shaped like the rest of .mk-btn. */
.mk-btn.outline {
  background: var(--panel);
  color: var(--text);
  border-color: var(--border-strong);
}
.mk-btn.outline:hover { background: var(--panel-alt); }

/* ── Section wrapper ────────────────────────────────────────────────────── */
.mk-sec { padding: 48px 0 8px; }

/* ── Chips ──────────────────────────────────────────────────────────────── */
.mk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.mk-chip {
  padding: 7px 15px;
  border-radius: 980px;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .14s, background .14s, color .14s;
}
.mk-chip:hover { border-color: var(--text-dim); }
.mk-chip.active { background: var(--text); color: var(--panel); border-color: var(--text); }
.mk-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Tile grid ──────────────────────────────────────────────────────────── */
.mk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 26px;
}

/* ── Tile ────────────────────────────────────────────────────────────────── */
.tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-1);
  transition: transform .2s var(--ease-out), box-shadow .2s;
  min-height: 396px;
  text-decoration: none;
  color: inherit;
}
.tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Thumb (image header) ────────────────────────────────────────────────── */
.thumb {
  position: relative;
  height: 196px;
  overflow: hidden;
  background: var(--panel-alt);
  flex-shrink: 0;
}
.thumb-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(.18) saturate(.92) contrast(1.02);
  transform: scale(1.02);
  transition: transform .5s ease;
}
.tile:hover .thumb-img { transform: scale(1.06); }
/* White fade at the bottom of the image header (light mode) */
.thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(255,255,255,.92) 100%);
  pointer-events: none;
}
/* Invert the fade to match dark panel background */
:root[data-theme="dark"]:not([data-custom-theme]) .thumb::after {
  background: linear-gradient(180deg, rgba(29,29,31,0) 55%, rgba(29,29,31,.92) 100%);
}
/* Category pill top-left of image */
.thumb-cat {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,.32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 5px 11px;
  border-radius: 980px;
}

/* ── MCP badge (Skills tiles that declare an MCP server requirement) ──────────────── */
.thumb-mcp-badge {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: rgba(0,0,0,.4); backdrop-filter: blur(8px);
  padding: 4px 9px; border-radius: 980px;
}

/* ── Tile body ───────────────────────────────────────────────────────────── */
.tile-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tile-name {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 8px;
  color: var(--text);
}
.tile-hook {
  font-size: 15.5px;
  line-height: 1.42;
  color: var(--text-dim);
  margin: 0;
  flex: 1;
}
.tile-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
}
.tile-arw { display: inline-block; transition: transform .18s; }
.tile:hover .tile-arw { transform: translateX(3px); }

/* ── Gallery title + hint stay but sit above the chip row ────────────────── */
#view-gallery h2 { margin-bottom: 4px; }
#view-gallery > .hint { margin-top: 0; margin-bottom: 12px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 940px) {
  .mk-grid { grid-template-columns: repeat(2, 1fr); }
  .mk-hero h1 { font-size: 40px; }
  .mk-feature h2 { font-size: 32px; }
  body[data-view="landing"] main,
  body[data-view="gallery"] main { padding: 0 20px 48px; }
}
@media (max-width: 600px) {
  .mk-grid { grid-template-columns: 1fr; }
  .mk-hero { padding: 48px 0 24px; overflow: hidden; }
  .mk-hero h1 { font-size: 32px; }
  .mk-hero p { font-size: 17px; max-width: 100%; width: 100%; }
  .mk-feature { height: 360px; padding-top: 36px; }
  .mk-feature h2 { font-size: 26px; }
  .mk-feature p { max-width: 100%; font-size: 16px; }
  body[data-view="landing"] main,
  body[data-view="gallery"] main { padding: 0 16px 40px; overflow-x: hidden; }
}

/* ══════════════════════════════════════════════════════════════════════════
   R3 App Detail — Apple-style product page
   Tokens only; no hardcoded hex values that duplicate a token.
   ══════════════════════════════════════════════════════════════════════════ */

/* Widen layout for detail view, mirroring R2 landing/gallery pattern */
body[data-view="detail"] .layout {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  gap: 0;
}
body[data-view="detail"] main {
  max-width: 980px;
  padding: 24px 32px 80px;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.det-hero {
  position: relative;
  height: 520px;
  border-radius: var(--radius-3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
}
.det-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(.85) brightness(.9);
}
/* Dark scrim: heavier at top (breadcrumb) and bottom (headline) */
.det-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.06) 38%, rgba(0,0,0,.64) 100%);
  pointer-events: none;
}
.det-hero-content {
  position: relative;
  z-index: 2;
  padding: 0 44px 44px;
}
.det-breadcrumb {
  padding-top: 32px;
  margin-bottom: 22px;
  font-size: 13px;
  color: rgba(255,255,255,.78);
}
.det-breadcrumb a { color: rgba(255,255,255,.78); text-decoration: none; }
.det-breadcrumb a:hover { color: #fff; }
.det-breadcrumb .current { color: #fff; font-weight: 600; }
.det-breadcrumb .sep { opacity: .55; }
.det-cat-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 5px 13px;
  border-radius: 980px;
  margin-bottom: 14px;
}
.det-hero-name {
  font-size: 52px;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: 0 0 10px;
  color: #fff;
}
.det-hero-hook {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.38;
  color: rgba(255,255,255,.9);
  margin: 0 0 26px;
  max-width: 46ch;
}
.det-hero-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ── Content column ────────────────────────────────────────────────────── */
.det-content { margin-top: 0; }
/* Plain inline links in body copy (e.g. the skill detail page's "This skill works in
   Claude" text) had no color rule at all, so they fell back to the browser's default
   unvisited-link blue -- fine on a white page, poor contrast on this dark theme's
   near-black background. Underline them too so the link isn't color-only. */
.det-content a { color: var(--accent); text-decoration: underline; }
.det-content a:hover { color: var(--accent-hover); }
.det-description {
  font-size: 17px;
  line-height: 1.68;
  color: var(--text-dim);
  max-width: 70ch;
  margin: 48px 0 0;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
}
.det-section {
  padding: 40px 0;
  border-bottom: 1px solid var(--border);
}
.det-section-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 24px;
  color: var(--text);
}

/* ── Agent rows ("What's inside") ─────────────────────────────────────── */
.det-agents { display: flex; flex-direction: column; gap: 10px; }
.det-agent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: 16px 20px;
  box-shadow: var(--shadow-1);
}
.det-agent-unavail { opacity: .5; font-style: italic; }
.det-agent-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.det-agent-name { font-size: 15px; font-weight: 600; color: var(--text); }
.det-agent-tagline { font-size: 13px; color: var(--text-dim); line-height: 1.4; }

/* Autonomy badge pill — pill shape, colour-coded by autonomy level */
.det-badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 5px 13px;
  border-radius: 980px;
  white-space: nowrap;
  flex-shrink: 0;
}
.det-badge.autonomy-assist { background: var(--ok-bg); color: var(--ok); }
.det-badge.autonomy-review-gate { background: var(--warning-bg); color: var(--warning); }
.det-badge.autonomy-human-approval { background: var(--error-bg); color: var(--error); }
.det-badge.autonomy-unknown { background: var(--panel-alt); color: var(--text-dim); }

/* ── Checklist ("What you get") ────────────────────────────────────────── */
.det-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.det-checklist li {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.det-checklist li::before {
  content: "\2713";
  color: var(--ok);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Features list ─────────────────────────────────────────────────────── */
.det-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.det-features li {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-dim);
  padding-left: 18px;
  position: relative;
}
.det-features li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--text-dim);
}

/* ── Footnote ───────────────────────────────────────────────────────────── */
.det-footnote {
  font-size: 14px;
  color: var(--text-dim);
  font-style: italic;
  padding-top: 32px;
  margin: 0;
}
.det-bottom-cta {
  display: flex;
  justify-content: center;
  padding: 40px 0 16px;
}
.det-bottom-cta .mk-btn { min-width: 200px; font-size: 16px; padding: 14px 32px; }

/* ── Requirements (Skill detail — declared MCP servers, metadata only) ──────────── */
.det-req-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-2);
  padding: 18px 20px; box-shadow: var(--shadow-1); margin-bottom: 14px;
}
.det-req-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.det-req-name {
  font-size: 14px; font-weight: 700; color: var(--text);
  background: var(--panel-alt); border-radius: 6px; padding: 3px 9px;
}
.det-badge-free { background: var(--ok-bg); color: var(--ok); }
.det-req-link { margin-left: auto; font-size: 13px; color: var(--accent); text-decoration: none; }
.det-req-link:hover { text-decoration: underline; }
.det-req-card p { margin: 0 0 10px; font-size: 14px; color: var(--text-dim); line-height: 1.5; }
.det-req-setup { font-size: 13px; }
.det-req-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.det-req-tools code {
  font-size: 12px; color: var(--text-dim); background: var(--panel-alt);
  border-radius: 6px; padding: 3px 8px;
}

/* ── Instructions body (Skill detail "How it works", mdLite-rendered markdown) ───── */
.det-instructions { font-size: 15.5px; line-height: 1.6; color: var(--text); }
.det-instructions h4, .det-instructions h5, .det-instructions h6 { margin: 20px 0 8px; color: var(--text); }
.det-instructions p { margin: 0 0 12px; }
.det-instructions ul, .det-instructions ol { margin: 0 0 12px; padding-left: 22px; }
.det-instructions li { margin-bottom: 6px; }
.det-instructions code { background: var(--panel-alt); border-radius: 5px; padding: 2px 6px; font-size: 13.5px; }

/* ── Skill install steps ("Use this skill" — Claude Desktop/Code setup) ──────────── */
.det-skill-steps { margin: 12px 0 16px; padding-left: 22px; }
.det-skill-steps li { font-size: 15px; line-height: 1.6; color: var(--text); margin-bottom: 8px; }
.det-skill-steps li::marker { color: var(--accent); font-weight: 700; }
.det-skill-steps code { background: var(--panel-alt); border-radius: 5px; padding: 2px 6px; font-size: 13.5px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 940px) {
  .det-hero { height: 460px; }
  .det-hero-name { font-size: 38px; }
  .det-hero-hook { font-size: 18px; }
  .det-hero-content { padding: 0 28px 36px; }
  .det-breadcrumb { padding-top: 24px; }
  body[data-view="detail"] main { padding: 20px 20px 64px; }
}

@media (max-width: 640px) {
  .det-hero { height: auto; min-height: 360px; border-radius: var(--radius-2); }
  .det-hero-name { font-size: 28px; }
  .det-hero-hook { font-size: 16px; max-width: 100%; }
  .det-hero-content { padding: 0 18px 26px; }
  .det-breadcrumb { padding-top: 20px; }
  .det-hero-cta { flex-direction: column; align-items: stretch; }
  .det-hero-cta .mk-btn { text-align: center; }
  .det-section-title { font-size: 22px; }
  .det-description { font-size: 15px; }
  .det-agent-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  body[data-view="detail"] main { padding: 14px 16px 48px; }
}

/* ── Site footer (Phase 0: notionedge.ai lead-gen) ───────────────────────── */
.mk-footer {
  width: 100%;
  padding: 20px 32px;
  border-top: 1px solid var(--border);
  background: var(--panel-alt);
  font-size: 12.5px;
  color: var(--text-dim);
}
.mk-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 4px 0;
}
.mk-footer a {
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 600;
}
.mk-footer a:hover { color: var(--accent); text-decoration: underline; }
.mk-footer-blurb { color: var(--text-dim); }

/* ── CTA callout box (reused on app/agent/skill detail pages) ── */
.mk-cta-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  background: var(--panel-alt);
  box-shadow: var(--shadow-1);
  padding: 20px 22px;
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.mk-cta-box-text { flex: 1; min-width: 220px; }
.mk-cta-box-text h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; color: var(--text); }
.mk-cta-box-text p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.mk-cta-box .mk-btn { flex-shrink: 0; }
@media (max-width: 640px) {
  .mk-cta-box { flex-direction: column; align-items: stretch; text-align: center; }
  .mk-cta-box .mk-btn { text-align: center; }
}

/* Inline notionedge.ai CTA appended to the wizard's post-download status line
   (#generate-status) -- Phase 8. */
.notionedge-inline-cta {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.notionedge-inline-cta:hover { text-decoration: underline; }

/* CTA link appended to .success-banner (Phase 8: skill-download confirmation) -- reuses
   the banner's own color: #fff (set above) rather than a token, matching the banner's
   pre-existing white-on-var(--ok) treatment. */
.success-banner-cta {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  margin-left: 8px;
}

@media (max-width: 860px) {
  .mk-footer { padding: 16px 20px; }
  .mk-footer-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}