/*
 * App interface mockups: static HTML drawn in the style of the Nova app, used in place of screenshots.
 * Wrap a mockup in <figure class="ui"><div class="ui-frame">…</div><figcaption>…</figcaption></figure>.
 * Every rule is scoped to .ui-frame, so mockups work on any page without touching its styles.
 * Mockups must fit a phone without scrolling sideways: see "Narrow mockups" at the end and README.md.
 * Icons: <i data-lucide="name"></i>, inlined at build time (eleventy.config.js).
 * Values are copied from the app's components: NDS tokens (imports/client/shared/NDS/colors.js), the left
 * drawer (DrawerNavigationTeams.jsx), the project header (ProjectHeaderNDS.jsx), the project list
 * (projectListStyle.js), session steps (SingleSession.styles.js), notes (NoteDisplay.jsx), the AI chat
 * (AiChat/novaChatTheme.js) and the task drawer (TaskDrawer.jsx).
 * Source: tasks/faq/faq.css (the help pages generated in the app repository).
 */
.ui-frame, figure.ui, .docs {
  --text: #1d1d1f;
  --text-2: #6b7280;
  --meta: #86868b;
  --icon: #9ca3af;
  --bg: #f9fcfe;
  --card: #ffffff;
  --border: #edf2f9;
  --border-strong: #d2d2d7;
  --border-accent: #d3e3fe;
  --teal: #15bba4;
  --teal-dark: #0d7566;
  --teal-chip: #c6efe9;
  --navy: #13233d;
  --blue: #5170ff;
  --blue-ink: #2f45b8;
  --blue-tint: #eef0ff;
  --ai-teal: #2dcdb5;
  --ai-gradient: linear-gradient(135deg, #5170ff 0%, #2dcdb5 100%);
  --ai-wash: linear-gradient(135deg, rgba(81, 112, 255, 0.09), rgba(45, 205, 181, 0.09));
  --drawer: #f1f1f1;
  --drawer-text: #212424;
  --drawer-active: #e2e2e2;
  --drawer-tile: #d2d5d5;
  --ink: #0b1220;
  --ink-2: #4b5563;
  --mute: #6b7787;
  --faint: #8a97a8;
  --line: #e7edf6;
  --font: Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color-scheme: light;
}
.ui-frame, .ui-frame * { box-sizing: border-box; }
.ui-frame { font-family: var(--font); font-weight: 500; text-align: left; }
.ui-frame :where(p, h1, h2, h3, h4, ul, ol, li) { margin: 0; padding: 0; }
.ui-frame a { color: inherit; text-decoration: none; }
.ui-frame svg.lucide, .docs svg.lucide { width: 1em; height: 1em; stroke-width: 2; flex: none; vertical-align: -0.125em; }

/* ---------- App drawer parts used inside illustrations (DrawerNavigationTeams.jsx) ---------- */

.ui-frame .drawer-head {
  display: flex; align-items: center; gap: 8px;
  height: 50px; margin: 0 13px; padding: 10px;
  background: #fff; border-radius: 6px 6px 0 0;
  font-size: 13px; font-weight: 600; color: var(--drawer-text);
}
.ui-frame .drawer-head:hover { text-decoration: none; }
.ui-frame .drawer-start {
  display: flex; align-items: center;
  height: 30px; margin: 0 13px 8px; padding-left: 11px;
  background: #ddf7f3; border: 1px solid #0bebce; border-radius: 0 0 6px 6px;
  color: #08a38f; font-size: 12px; font-weight: 500;
}
.ui-frame .drawer-start:hover { background: #ccebe6; text-decoration: none; }
.ui-frame .drawer-section {
  margin: 15px 0 2px; padding: 0 15px;
  height: 28px; display: flex; align-items: center; gap: 4px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.02em;
}
.ui-frame .drawer-item, .ui-frame .d-item {
  display: flex; align-items: center;
  min-height: 30px; margin: 2px 14px; padding: 4px 8px 4px 0;
  border-radius: 6px;
  color: var(--drawer-text); font-size: 13px; font-weight: 500; line-height: 1.3;
}
.ui-frame .drawer-item:hover { background: rgba(0, 0, 0, 0.035); text-decoration: none; }
.ui-frame .drawer-item[aria-current='page'], .ui-frame .d-item.on { background: var(--drawer-active); }
.ui-frame .d-tile {
  width: 17px; height: 17px; margin: 0 8px 0 9px; flex: none;
  border-radius: 3px; background: var(--drawer-tile);
  display: inline-flex; align-items: center; justify-content: center;
  color: #444; font-size: 11px;
}
.ui-frame .d-letter {
  width: 14px; height: 14px; margin-right: 6px; flex: none;
  border-radius: 2px; background: var(--drawer-text); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
}
.ui-frame .d-space { display: flex; align-items: center; height: 28px; padding: 0 13px 0 15px; font-size: 12px; color: var(--drawer-text); }
.ui-frame .d-space.sub { padding-left: 35px; }


/* ---------- Illustration frame ---------- */

/* The figure is a size container: the "Narrow mockups" rules at the end react to the mockup's own
   width, so a mockup reflows the same way in an article, a help page or a two-column layout. */
figure.ui { margin: 28px 0; container: ui / inline-size; }
figure.ui figcaption { color: var(--text-2); font-size: 13.5px; margin-top: 10px; line-height: 1.5; }
.ui-frame {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(19, 35, 61, 0.06);
  font-size: 13px; line-height: 1.45; color: var(--text);
}
/* Legacy: a mockup inside .ui-scroll keeps a 620px minimum and scrolls sideways on phones. Help and
   landing pages still use it. The frame is its own size container, so the "Narrow mockups" rules
   don't apply inside it. New mockups leave it out and reflow instead. */
.ui-scroll { overflow-x: auto; border-radius: 14px; }
.ui-scroll > .ui-frame { min-width: 620px; container: ui / inline-size; }
.ui-frame.ui-pad, .ui-frame .ui-pad { padding: 16px; }
.ui-frame .ui-split { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.ui-frame .ui-split > .ui-drawer { border-right: 1px solid rgba(0, 0, 0, 0.12); }
.ui-frame .ui-drawer { background: var(--drawer); color: var(--drawer-text); padding: 10px 0; }
.ui-frame .ui-drawer .drawer-head { margin: 0 10px; height: 44px; }
.ui-frame .ui-drawer .drawer-start { margin: 0 10px 6px; }
.ui-frame .ui-drawer .d-item { margin: 2px 10px; }
.ui-frame .ui-drawer .drawer-section { margin-top: 10px; padding: 0 12px; height: 24px; }

.ui-frame .row { display: flex; align-items: center; gap: 8px; }
.ui-frame .col { display: flex; flex-direction: column; gap: 10px; }
.ui-frame .wrap-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-frame .grow { flex: 1; min-width: 0; }
.ui-frame .muted { color: var(--text-2); }
.ui-frame .meta { color: var(--meta); font-size: 12px; }
.ui-frame .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Avatars ---------- */

.ui-frame .av {
  width: 25px; height: 25px; border-radius: 7px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px; font-weight: 700;
}
.ui-frame .av.round { border-radius: 50%; }
.ui-frame .av.lg { width: 36px; height: 36px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.ui-frame .av.ws { width: 30px; height: 30px; border-radius: 4px; font-size: 13px; }
.ui-frame .av-stack { display: inline-flex; }
.ui-frame .av-stack .av { box-shadow: 0 0 0 2px #fff; }
.ui-frame .av-stack .av + .av { margin-left: -6px; }
.ui-frame .c1 { background: #5dd3ba; }
.ui-frame .c2 { background: #4173e6; }
.ui-frame .c3 { background: #f07338; }
.ui-frame .c4 { background: #6841e6; }
.ui-frame .c5 { background: #ab348b; }
.ui-frame .c6 { background: #0e91bc; }
.ui-frame .c7 { background: #df3d4e; }
.ui-frame .av.ai { background: var(--ai-gradient); }

/* The Nova circle mark: a ring in the AI gradient (NovaCircleAnimation.jsx). */
.ui-frame .nova-mark {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: var(--ai-gradient);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%, #000 66%, transparent 68%);
  mask: radial-gradient(circle, transparent 54%, #000 56%, #000 66%, transparent 68%);
  display: inline-block;
}
.ui-frame .nova-mark.white { background: #fff; }
.ui-frame .nova-mark.lg { width: 52px; height: 52px; }
.ui-frame .av.ai .nova-mark { width: 62%; height: 62%; background: #fff; }

/* ---------- NDS buttons, tags, tabs, inputs ---------- */

.ui-frame .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 600; white-space: nowrap; line-height: 1.3;
  background: var(--text); color: #fff;
}
.ui-frame .btn.primary { background: var(--teal); }
.ui-frame .btn.navy { background: var(--navy); }
.ui-frame .btn.outline { background: #fff; color: var(--text-2); border: 1.5px solid var(--border-strong); font-weight: 500; }
.ui-frame .btn.subtle { background: var(--border); color: #374151; font-weight: 500; }
.ui-frame .btn.live { background: #ff3b30; border-radius: 9999px; font-weight: 500; }
.ui-frame .btn.async { background: var(--border); color: var(--text-2); border-radius: 9999px; font-weight: 500; }
.ui-frame .btn.sm { padding: 0 12px; height: 32px; font-size: 12.5px; }
.ui-frame .icon-btn {
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border); color: #64748b; font-size: 16px;
}

.ui-frame .tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 500; white-space: nowrap; line-height: 1.4;
  background: var(--border); color: #374151;
}
.ui-frame .tag.participants, .ui-frame .tag.visible { background: #dbeafe; color: #1e40af; }
.ui-frame .tag.private { background: #c6efe9; color: #166534; }
.ui-frame .tag.leaders, .ui-frame .tag.in-progress { background: #fef3c7; color: #92400e; }
.ui-frame .tag.overdue { background: #fecdd3; color: #991b1b; }
.ui-frame .tag.due-week { background: #e0e7ff; color: #3730a3; }
.ui-frame .tag.due-today { background: #ff3b30; color: #fff; }
.ui-frame .tag.completed { background: #c6efe9; color: #0d7566; }
.ui-frame .tag.not-started { background: #d2dbe7; color: #4b5563; }
.ui-frame .tag.pro { background: #f0f0ff; color: #4f46e5; font-weight: 700; }

.ui-frame .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); }
.ui-frame .tabs .t { padding: 10px 14px; font-size: 13.5px; font-weight: 500; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ui-frame .tabs .t.on { color: var(--text); border-bottom-color: var(--text); }
.ui-frame .pill-tabs { display: inline-flex; gap: 4px; padding: 4px; background: #f3f4f6; border-radius: 12px; }
.ui-frame .pill-tabs .t { padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.ui-frame .pill-tabs .t.on { background: #fff; color: #111827; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); }

.ui-frame .field { display: flex; flex-direction: column; gap: 4px; }
.ui-frame .field-label { font-size: 13px; font-weight: 500; color: #374151; }
.ui-frame .input {
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: #fff;
  font-size: 13.5px; color: var(--text); min-height: 36px;
}
.ui-frame .input.placeholder { color: var(--icon); }
.ui-frame .input.focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25); }
.ui-frame .check {
  width: 18px; height: 18px; border-radius: 5px; flex: none;
  border: 1.5px solid #b9c4d3; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px;
}
.ui-frame .check.on { background: var(--teal); border-color: var(--teal); }
.ui-frame .check.round { border-radius: 50%; }
.ui-frame .toggle { width: 34px; height: 20px; border-radius: 999px; background: #d2dbe7; position: relative; flex: none; }
.ui-frame .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.ui-frame .toggle.on { background: var(--teal); }
.ui-frame .toggle.on::after { left: 16px; }

/* ---------- Project header (ProjectHeaderNDS.jsx) ---------- */

.ui-frame .ph { background: #fff; border-bottom: 1px solid var(--border); }
.ui-frame .ph-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 52px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--border); }
.ui-frame .ph-crumbs { font-size: 13.5px; color: var(--drawer-text); white-space: nowrap; }
.ui-frame .ph-name { font-size: 14px; font-weight: 600; color: #1f2937; white-space: nowrap; }
.ui-frame .ph-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; min-height: 46px; padding: 6px 8px; }
.ui-frame .ph-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: #64748b; white-space: nowrap;
}
.ui-frame .ph-tab.on { font-weight: 600; color: var(--blue); background: var(--blue-tint); }
.ui-frame .ph-div { width: 1px; height: 16px; background: #e2e8f0; margin: 0 6px; flex: none; }

.ui-frame .status {
  display: inline-flex; align-items: center; gap: 4px;
  height: 32px; padding: 0 10px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.ui-frame .status.on-track { background: #c5eee4; color: #296f64; }
.ui-frame .status.at-risk { background: #f0dfd9; color: #a0401f; }
.ui-frame .status.off-track { background: #ecddec; color: #884e7b; }
.ui-frame .status.complete { background: #ddf7f3; color: #0d9e8c; }
.ui-frame .status.draft { background: #d5d4d5; color: #3d3939; }
.ui-frame .status.paused { background: #d7dcf1; color: #1949d5; }
.ui-frame .status.inline { height: auto; padding: 2px 8px; border-radius: 6px; }

/* AI Chat segmented button. */
.ui-frame .ai-btn { display: inline-flex; align-items: center; height: 32px; border-radius: 8px; overflow: hidden; background: var(--ai-gradient); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ui-frame .ai-btn .l { display: inline-flex; align-items: center; gap: 7px; padding: 0 12px 0 8px; }
.ui-frame .ai-btn .l .nova-mark { width: 18px; height: 18px; background: #fff; }
.ui-frame .ai-btn .d { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.32); }
.ui-frame .ai-btn .r { width: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }

/* ---------- Project list (projectListStyle.js) ---------- */

.ui-frame .lv-band { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: rgba(249, 252, 254, 0.85); flex-wrap: wrap; }
.ui-frame .lv-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.ui-frame .lv-chip.on { background: #d3e3fe; color: var(--blue-ink); }
.ui-frame .lv-chip .n { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 5px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ui-frame .lv-search { display: inline-flex; align-items: center; gap: 6px; width: 180px; height: 32px; padding: 0 10px; border-radius: 11px; border: 1px solid var(--line); background: #fff; color: var(--faint); font-size: 12.5px; }
.ui-frame .lv-add { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px 0 10px; border-radius: 11px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 2px rgba(11, 18, 32, 0.18); }
.ui-frame .lv-card { margin: 12px 16px 16px; background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04); overflow: hidden; }
.ui-frame .lv-head, .ui-frame .lv-row { display: grid; grid-template-columns: 46px 30px minmax(180px, 1fr) 110px 70px 64px 64px; align-items: center; padding: 0 12px; }
.ui-frame .lv-head { height: 38px; color: var(--faint); font-size: 12px; font-weight: 500; border-bottom: 1px solid var(--line); text-transform: lowercase; }
.ui-frame .lv-row { min-height: 50px; border-bottom: 1px solid var(--line); font-size: 13px; }
.ui-frame .lv-row:last-child { border-bottom: 0; }
.ui-frame .lv-num { display: inline-flex; align-items: center; gap: 8px; color: var(--faint); font-size: 12px; font-weight: 500; padding-left: 8px; }
.ui-frame .lv-bar { width: 4px; height: 18px; border-radius: 3px; background: #d2dbe7; }
.ui-frame .lv-bar.active { background: #fbbf24; }
.ui-frame .lv-bar.today { background: #f2634f; }
.ui-frame .lv-bar.week { background: #8b7cf6; }
.ui-frame .lv-bar.overdue { background: #ec6b8a; }
.ui-frame .lv-bar.done { background: var(--teal); }
.ui-frame .lv-title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.ui-frame .lv-row.done .lv-title { color: var(--mute); }
.ui-frame .lv-sub { display: flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--faint); font-size: 11.5px; font-weight: 500; flex-wrap: wrap; }
.ui-frame .mini { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--border); color: var(--ink-2); white-space: nowrap; }
.ui-frame .mini.live { background: var(--ink); color: #fff; }
.ui-frame .mini.live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.ui-frame .mini.ai { background: linear-gradient(90deg, rgba(81, 112, 255, 0.12), rgba(139, 124, 246, 0.14), rgba(21, 187, 164, 0.12)); color: var(--blue-ink); }
.ui-frame .mini.blue { background: #d3e3fe; color: var(--blue-ink); }
.ui-frame .mini.done { background: #dff5f1; color: #0b7c6c; }
.ui-frame .mini.risk { background: #fde4ea; color: #b03a5b; }
.ui-frame .lv-date { color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.ui-frame .lv-date.late { color: #b03a5b; font-weight: 600; }
.ui-frame .seg { display: flex; gap: 2px; height: 10px; }
.ui-frame .seg i { flex: 1; background: #fff; border: 1px solid #d2dbe7; border-radius: 2px; }
.ui-frame .seg i:first-child { border-radius: 5px 2px 2px 5px; }
.ui-frame .seg i:last-child { border-radius: 2px 5px 5px 2px; }
.ui-frame .seg i.f { background: var(--teal); border-color: var(--teal); }
.ui-frame .seg i.h { background: #c6efe9; border-color: #c6efe9; }

/* ---------- Session page (SingleSessionRenderNDS.jsx, Steps.jsx) ---------- */

.ui-frame .ss-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 16px; background: rgba(255, 255, 255, 0.95); border-bottom: 1px solid var(--border); font-size: 13.5px; }
.ui-frame .ss-body { padding: 20px; }
.ui-frame .ss-title { font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.025em; color: var(--text); }
.ui-frame .ss-section { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; }
.ui-frame .ss-section h4 { margin: 0; font-size: 16px; font-weight: 600; color: #1f2937; }
.ui-frame .ss-icon { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }
.ui-frame .ss-icon.goals { background: #d3e3fe; color: var(--blue); }
.ui-frame .ss-icon.video { background: #fee2e2; color: #ef4444; }
.ui-frame .ss-icon.leaders { background: #fff3cd; color: #f59e0b; }
.ui-frame .ss-icon.conclusion { background: var(--teal-chip); color: var(--teal-dark); }

.ui-frame .step {
  border-radius: 20px; margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(229, 231, 235, 0.6);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 8px rgba(0, 0, 0, 0.04);
}
/* The title keeps at least 150px next to the number. When tags, avatars and buttons don't fit
   beside it, they wrap to a second line, aligned right as they are on one line. */
.ui-frame .step-head { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 14px; padding: 16px 18px; }
.ui-frame .step-num {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  background: var(--border); color: #374151;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.ui-frame .step-title { flex: 1 1 150px; min-width: 0; font-size: 15.5px; font-weight: 600; color: #1e293b; letter-spacing: -0.01em; }
.ui-frame .step-body { padding: 0 18px 16px 64px; color: #374151; }
.ui-frame .step.collapsed .step-head { padding-top: 12px; padding-bottom: 12px; }
.ui-frame .step-add-person { width: 26px; height: 26px; border-radius: 8px; border: 1.5px dashed #d2dbe7; color: #b0bac9; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.ui-frame .step-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px;
  background: #fff; border: 1.5px solid #e5e7eb; color: var(--text-2);
  font-size: 12px; font-weight: 500; white-space: nowrap;
}
.ui-frame .step-btn.done { background: #c6efe9; color: #0d7566; border-color: transparent; }
.ui-frame .step-btn.closed { background: #f7e6ec; color: #bf5b52; border-color: transparent; }
.ui-frame .step-btn.ai { border-color: rgba(81, 112, 255, 0.45); background: rgba(81, 112, 255, 0.07); color: #3f57cc; font-weight: 600; }
.ui-frame .ai-wait { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 999px; border: 1px solid rgba(81, 112, 255, 0.3); background: rgba(81, 112, 255, 0.07); color: #3f57cc; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ui-frame .ai-wait::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }

/* Notes (NoteDisplay.jsx) and reactions (EmojiDisplay.jsx). */
.ui-frame .note {
  display: flex; gap: 10px;
  padding: 14px; border-radius: 12px; background: #fff; border: 1.5px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02);
}
.ui-frame .note.hl { background: #fffbeb; }
.ui-frame .note-name { font-size: 14px; font-weight: 600; color: var(--text); }
.ui-frame .note-time { font-size: 11.5px; color: var(--meta); }
.ui-frame .note-text { font-size: 14px; line-height: 1.6; color: var(--text); margin-top: 4px; }
.ui-frame .react { display: inline-flex; align-items: center; gap: 4px; height: 24px; min-width: 34px; padding: 0 8px; border-radius: 13px; background: #f5f5f7; font-size: 12px; }
.ui-frame .react b { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.ui-frame .react.mine { background: rgba(12, 210, 185, 0.25); box-shadow: 0 0 0 1px rgba(12, 210, 185, 0.6); }

/* Board sticky notes. */
.ui-frame .board { position: relative; background-color: #fff; background-image: radial-gradient(#e3e8ef 1px, transparent 1px); background-size: 18px 18px; padding: 16px; }
.ui-frame .sticky { padding: 10px 12px; border-radius: 4px; font-size: 12.5px; line-height: 1.35; color: #1d1d1f; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); width: 132px; min-height: 76px; }
.ui-frame .sticky.y { background: #fff59d; }
.ui-frame .sticky.b { background: #b3e5fc; }
.ui-frame .sticky.g { background: #c5e1a5; }
.ui-frame .sticky.p { background: #f8bbd0; }
.ui-frame .board-card { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 12px; padding: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03); }
.ui-frame .board-tools { display: inline-flex; flex-direction: column; gap: 4px; padding: 6px; background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); border: 1px solid var(--border); color: #475569; font-size: 15px; }
.ui-frame .board-tools span { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.ui-frame .board-tools span.on { background: var(--blue-tint); color: var(--blue); }

/* ---------- Modal (NDSModal.jsx / StandardDialogNDS.jsx) ---------- */

.ui-frame .modal-wrap { background: rgba(0, 0, 0, 0.45); padding: 24px 16px; display: flex; justify-content: center; }
.ui-frame .modal { width: 100%; max-width: 520px; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 25px 70px -15px rgba(0, 0, 0, 0.35), 0 10px 30px -10px rgba(0, 0, 0, 0.25); }
.ui-frame .modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px 16px; border-bottom: 1.5px solid #e5e7eb; }
.ui-frame .modal-title { flex: 1; font-size: 18px; font-weight: 600; color: #111827; letter-spacing: -0.01em; }
.ui-frame .modal-x { width: 30px; height: 30px; border-radius: 50%; background: #f3f4f6; color: #111827; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.ui-frame .modal-body { padding: 16px 22px; background: #f9fafb; display: flex; flex-direction: column; gap: 12px; }
.ui-frame .modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); }
.ui-frame .modal-cancel { padding: 9px 18px; border-radius: 12px; background: #fafafa; border: 1px solid var(--border); color: #4b5563; font-size: 13.5px; font-weight: 500; }
.ui-frame .modal-ok { padding: 9px 18px; border-radius: 12px; background: #000; color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }

/* ---------- AI chat panel (AiChatDrawer.jsx, AiChatMessage.jsx, AiChatComposer.jsx) ---------- */

.ui-frame .chat { background: rgba(255, 255, 255, 0.96); border-left: 1px solid var(--border); box-shadow: -6px 0 48px rgba(19, 35, 61, 0.1); display: flex; flex-direction: column; color: var(--navy); }
.ui-frame .chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #f1f5f9; }
.ui-frame .chat-thread { padding: 4px 8px; border-radius: 8px; background: #fff; font-size: 12px; font-weight: 600; color: #475569; }
.ui-frame .chat-hbtn { width: 28px; height: 28px; border-radius: 6px; color: #64748b; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.ui-frame .chat-msgs { padding: 8px 0 12px; display: flex; flex-direction: column; }
.ui-frame .chat-user { align-self: flex-end; max-width: 82%; margin: 6px 18px; padding: 9px 13px; border-radius: 15px 15px 4px 15px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 500; line-height: 1.6; }
.ui-frame .chat-ai { padding: 8px 18px; font-size: 14px; font-weight: 500; line-height: 1.65; color: var(--navy); }
.ui-frame .chat-tool { display: flex; align-items: center; gap: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: #a0aec0; margin-bottom: 4px; }
.ui-frame .chat-tool svg { color: var(--text-2); font-size: 13px; }
.ui-frame .chat-sign { display: flex; align-items: center; gap: 6px; padding: 2px 18px 6px; opacity: 0.65; font-size: 11px; font-weight: 500; color: #718096; }
.ui-frame .chat-sign .nova-mark { width: 18px; height: 18px; }
.ui-frame .proposal { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 12px; color: var(--navy); }
.ui-frame .proposal .k { color: #64748b; font-weight: 500; }
.ui-frame .proposal .old { color: #dc2626; text-decoration: line-through; }
.ui-frame .proposal .new { color: #16a34a; }
.ui-frame .proposal .res { display: inline-flex; padding: 1px 6px; border-radius: 6px; background: #eef2ff; color: #3730a3; font-size: 11px; font-weight: 600; }
.ui-frame .plan { margin-top: 10px; padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--border), 0 1px 3px rgba(19, 35, 61, 0.04), 0 8px 16px rgba(19, 35, 61, 0.02); font-size: 13px; }
.ui-frame .plan ol { margin: 6px 0 10px; padding-left: 20px; }
.ui-frame .c-approve, .ui-frame .c-discard { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; }
.ui-frame .c-approve { background: #1e293b; color: #fff; }
.ui-frame .c-discard { background: #fff; border: 1px solid #e2e8f0; color: #64748b; }
.ui-frame .chat-suggest { padding: 9px 13px; border-radius: 11px; background: #f0f4f8; box-shadow: 0 0 0 1px var(--border); font-size: 12.5px; font-weight: 500; color: var(--navy); }
.ui-frame .composer-wrap { padding: 10px 14px 12px; }
.ui-frame .composer { border-radius: 14px; background: #fff; box-shadow: 0 0 0 1.5px var(--border); }
.ui-frame .composer.focus { box-shadow: 0 0 0 1.5px var(--blue); }
.ui-frame .composer-text { padding: 11px 12px 6px 14px; font-size: 14px; font-weight: 500; color: #a0aec0; line-height: 1.5; }
.ui-frame .composer-text.filled { color: var(--navy); }
.ui-frame .composer-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px 8px; }
.ui-frame .composer-btn { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border); color: #718096; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.ui-frame .composer-send { width: 32px; height: 32px; border-radius: 10px; background: var(--navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.ui-frame .composer-send.off { background: #d2dbe7; }
.ui-frame .ctx-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 4px 10px; border-radius: 8px; font-size: 12px; background: rgba(45, 205, 181, 0.08); border: 1px solid rgba(45, 205, 181, 0.25); color: var(--teal); }
.ui-frame .ctx-chip.file { background: rgba(81, 112, 255, 0.08); border-color: rgba(81, 112, 255, 0.25); color: var(--blue); }
.ui-frame .chat-disclaimer { text-align: center; font-size: 10.5px; color: #a0aec0; margin-top: 6px; }

/* AI coworker panel rows. */
.ui-frame .cw-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--border); }
.ui-frame .cw-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.ui-frame .cw-status.working { background: var(--ai-gradient); color: #fff; }
.ui-frame .cw-status.waiting { background: rgba(81, 112, 255, 0.07); color: #3f57cc; border: 1px solid rgba(81, 112, 255, 0.3); }
.ui-frame .cw-status.done { background: #c6efe9; color: #0d7566; }
.ui-frame .cw-status.paused { background: #fef3c7; color: #92400e; }
.ui-frame .ai-banner { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--ai-wash); border: 1px solid #d3e3fe; }

/* ---------- Task drawer (TaskDrawer.jsx) ---------- */

.ui-frame .td { background: #fff; border-left: 1px solid rgba(0, 0, 0, 0.12); }
.ui-frame .td-head { display: flex; align-items: center; gap: 6px; height: 50px; padding: 0 12px 0 16px; background: var(--bg); border-bottom: 1px solid var(--border); color: var(--icon); font-size: 15px; }
.ui-frame .td-complete { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 20px; border: 1.5px solid #d2dbe7; background: #fff; color: var(--text-2); font-size: 12px; font-weight: 600; }
.ui-frame .td-complete i { width: 12px; height: 12px; border: 2px solid var(--icon); border-radius: 4px; }
.ui-frame .td-body { padding: 16px 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.ui-frame .td-title { font-size: 20px; font-weight: 600; color: var(--text); line-height: 1.3; }
.ui-frame .td-pill { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; border-radius: 20px; font-size: 12px; font-weight: 600; background: var(--border); color: var(--text); white-space: nowrap; }
.ui-frame .td-pill.empty { background: var(--bg); color: var(--icon); }
.ui-frame .td-pill.auto { background: #f0f4ff; color: #6366f1; }
.ui-frame .td-pill.me { background: #111827; color: #fff; }
.ui-frame .td-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5a6579; }
.ui-frame .td-add { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px; border: 1.5px dashed #e5e7eb; color: var(--icon); font-size: 12px; font-weight: 500; }

/* ---------- Pricing cards (PricingNDS3.jsx, simplified) ---------- */

.ui-frame .plans { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-frame .plan-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.ui-frame .plan-card.on { border: 2px solid var(--text); }
.ui-frame .plan-name { font-size: 15px; font-weight: 700; color: var(--text); }
.ui-frame .plan-price { font-size: 26px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.ui-frame .plan-price small { font-size: 12px; font-weight: 500; color: var(--text-2); letter-spacing: 0; }
.ui-frame .plan-feat { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #374151; }
.ui-frame .plan-feat svg { color: var(--teal); }

/* ---------- Concept diagrams: nested levels drawn with app styles ---------- */

.ui-frame .nest { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; }
.ui-frame .nest .nest { margin-top: 10px; background: var(--bg); border-color: var(--border); }
.ui-frame .nest .nest .nest { background: #fff; border-color: #e5e7eb; }
.ui-frame .nest-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ui-frame .nest-name { font-size: 14px; font-weight: 600; color: var(--text); }
.ui-frame .level { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ui-frame .level.workspace { background: var(--navy); color: #fff; }
.ui-frame .level.space { background: var(--drawer-text); color: #fff; }
.ui-frame .level.project { background: #d3e3fe; color: var(--blue-ink); }
.ui-frame .level.session { background: var(--teal-chip); color: var(--teal-dark); }
.ui-frame .level.l-step { background: var(--border); color: #374151; }
.ui-frame .level.task { background: #fef3c7; color: #92400e; }
.ui-frame .nest-steps { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ui-frame .nest-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #1e293b; }
.ui-frame .nest-step .step-num { width: 24px; height: 24px; border-radius: 8px; font-size: 12px; }
.ui-frame .nest-step .step-num.done { background: var(--teal); color: #fff; }

/* Concept annotations between app elements (hand-offs, waits). */
.ui-frame .handoff { display: flex; align-items: center; gap: 8px; margin: -4px 0 10px 30px; color: var(--teal); font-size: 15px; }
.ui-frame .step.current { box-shadow: 0 0 0 2px var(--teal), 0 8px 32px rgba(31, 38, 135, 0.08); }
.ui-frame .step.current .step-num { background: var(--teal); color: #fff; }
.ui-frame .note-meta { color: var(--faint); font-size: 12px; font-weight: 500; }
.ui-frame .step-num.done { background: var(--teal); color: #fff; }

/* ---------- Layout helpers that reflow on narrow mockups ---------- */
/* Use these instead of inline grid-template-columns, fixed widths or min-widths, which can't reflow. */

/* Main content with a side panel (e.g. "AI coworkers on this session"). Stacks below 640px. */
.ui-frame .ui-aside { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 16px; align-items: start; }
/* Board columns of sticky notes, any number of them. Two per row below 600px. */
.ui-frame .board-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.ui-frame .board-cols > .col { gap: 10px; }
.ui-frame .board-cols .sticky { width: auto; }
/* Cards joined by arrows, left to right. Top to bottom below 560px. */
.ui-frame .flow { display: flex; align-items: stretch; }
.ui-frame .flow > .board-card { flex: 1; min-width: 0; gap: 6px; }
.ui-frame .flow-link { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 0 6px; min-width: 92px; text-align: center; }
.ui-frame .flow-link svg { font-size: 22px; color: var(--teal); }
/* Decision log rows: category, entry, level. Category and level share a line above the entry below 560px. */
.ui-frame .lv-row.dl-row { grid-template-columns: 200px minmax(0, 1fr) 170px; }

/* ---------- Narrow mockups ---------- */
/* Phones show a mockup about 340px wide. Nothing scrolls sideways: rows wrap, columns stack and the
   list drops its secondary columns. Check with `npm run mockups:check`. */

@container ui (max-width: 640px) {
  .ui-frame .ui-aside { grid-template-columns: minmax(0, 1fr); }
}
@container ui (max-width: 600px) {
  .ui-frame .board-cols { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
}
@container ui (max-width: 560px) {
  .ui-frame .ss-body { padding: 14px 12px; }
  .ui-frame .ss-bar { padding: 10px 12px; }
  .ui-frame .ss-title { font-size: 21px; }
  .ui-frame.ui-pad, .ui-frame .ui-pad { padding: 12px; }
  .ui-frame .step-head { gap: 8px 10px; padding: 12px 14px; }
  .ui-frame .step-body { padding: 0 14px 14px; }
  .ui-frame .handoff { margin-left: 16px; }
  .ui-frame .ph-top { padding-left: 12px; }
  .ui-frame .ph-tab { padding: 5px 9px; }
  .ui-frame .ph-div { display: none; }
  .ui-frame .board { padding: 12px; }

  .ui-frame .flow { flex-direction: column; }
  .ui-frame .flow-link { flex-direction: row; gap: 8px; padding: 6px 0; min-width: 0; }
  .ui-frame .flow-link svg { transform: rotate(90deg); }

  /* Project list: keep #, check, name and assignee; hide progress, due and the last column.
     Rows with their own inline grid are left alone. */
  .ui-frame .lv-card { margin: 10px; }
  .ui-frame :is(.lv-head, .lv-row):not([style]):not(.dl-row) { grid-template-columns: 34px 26px minmax(0, 1fr) auto; padding: 0 10px 0 4px; column-gap: 4px; }
  .ui-frame :is(.lv-head, .lv-row):not([style]):not(.dl-row) > :is(:nth-child(4), :nth-child(n+6)) { display: none; }
  .ui-frame .lv-row:not([style]):not(.dl-row) { padding-top: 8px; padding-bottom: 8px; }

  .ui-frame .lv-row.dl-row { display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 10px 12px; }
  .ui-frame .lv-row.dl-row > :last-child { margin-left: auto; }
  .ui-frame .lv-row.dl-row > .lv-title { order: 1; flex-basis: 100%; }
}