/* ── The Build surface: the owner's screen-for-screen design ─────────────────
 *
 * Directed by the owner on 2026-08-20 from a seven-panel reference: true
 * neutral blacks, one hairline border weight, green circle checks, white
 * primary buttons, a TASKS sidebar, and Progress/Files/Console on a task.
 * The palette is scoped to this surface (.bd) and to the minimal auth pages;
 * the Medina19 token file remains the authority for every other surface and
 * is untouched. This block is that direction, recorded as tokens of its own.
 */

.bd {
  --bd-bg: #FFFFFF;
  --bd-panel: #FAFAFB;
  --bd-card: #F4F5F7;
  --bd-field: #FFFFFF;
  --bd-line: #E3E5EA;
  --bd-line-soft: #ECEEF1;
  --bd-ink: #101318;
  --bd-muted: #5D646E;
  --bd-dim: #667085;
  --bd-green: #16A34A;
  --bd-green-soft: #E8F7EE;
  --bd-white: #FFFFFF;
  --bd-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.bd { background: var(--bd-bg); color: var(--bd-ink); min-height: 100vh; margin: 0;
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  -webkit-font-smoothing: antialiased; }
.bd a { color: inherit; }
.bd ul { list-style: none; margin: 0; padding: 0; }
.bd h1, .bd h2, .bd h3, .bd p { margin: 0; }

/* ── Auth + arrival: one centred column ── */
.bd-center { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.bd-card { background: var(--bd-panel); border: 1px solid var(--bd-line);
  border-radius: 14px; padding: 40px 36px; width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: 14px; }
.bd-card-wide { max-width: 460px; }
.bd-glyph { font-size: 28px; text-align: center; letter-spacing: 2px; color: var(--bd-ink); }
.bd-title { font-size: 22px; font-weight: 650; text-align: center; }
.bd-sub { color: var(--bd-muted); text-align: center; font-size: 13.5px; }
.bd-field-label { font-size: 12.5px; color: var(--bd-muted); }
.bd input[type=email], .bd input[type=password], .bd input[type=text], .bd textarea {
  background: var(--bd-field); border: 1px solid var(--bd-line); color: var(--bd-ink);
  border-radius: 9px; padding: 11px 13px; font: inherit; width: 100%; box-sizing: border-box; }
.bd input::placeholder, .bd textarea::placeholder { color: var(--bd-dim); }
.bd input:focus-visible, .bd textarea:focus-visible, .bd button:focus-visible, .bd a:focus-visible {
  outline: 2px solid var(--bd-muted); outline-offset: 2px; }
/* A field already carries a 1px border, so an outline held 2px clear of it drew
   two concentric rings around one box. The outline sits on the border instead:
   one ring, same 2px of contrast, nothing lost for anybody relying on it. */
.bd input:focus-visible, .bd textarea:focus-visible { outline-offset: 0; }
.bd-btn { background: transparent; border: 1px solid var(--bd-line); color: var(--bd-ink);
  border-radius: 9px; padding: 10px 16px; font: inherit; font-weight: 550; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.bd-btn:hover { border-color: var(--bd-dim); }
.bd-btn-primary { background: var(--bd-ink); border-color: var(--bd-ink); color: #FFFFFF; }
.bd-btn-primary:hover { background: #2A2F37; border-color: #2A2F37; }
.bd-btn-block { width: 100%; }
.bd-btn:disabled { opacity: .45; cursor: default; }
.bd-or { display: flex; align-items: center; gap: 10px; color: var(--bd-dim); font-size: 12px; }
.bd-or::before, .bd-or::after { content: ""; flex: 1; height: 1px; background: var(--bd-line-soft); }
.bd-fine { color: var(--bd-dim); font-size: 12px; text-align: center; }
.bd-error { color: #B91C1C; font-size: 13px; text-align: center; }

/* The big check moment. */
.bd-bigcheck { width: 56px; height: 56px; border-radius: 50%; border: 2.5px solid var(--bd-green);
  display: grid; place-items: center; margin: 6px auto 2px; color: var(--bd-green);
  font-size: 26px; font-weight: 700; }

/* Setup rows: green circle, name, quiet state. */
.bd-setup-row { display: flex; align-items: center; gap: 12px;
  background: var(--bd-card); border: 1px solid var(--bd-line-soft); border-radius: 10px;
  padding: 12px 14px; }
.bd-check { width: 20px; height: 20px; border-radius: 50%; background: var(--bd-green);
  color: #FFFFFF; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.bd-setup-name { flex: 1; font-weight: 550; font-size: 14px; overflow-wrap: anywhere; }
.bd-setup-state { color: var(--bd-dim); font-size: 12.5px; }
.bd-note { background: var(--bd-card); border: 1px solid var(--bd-line-soft); border-radius: 10px;
  padding: 11px 14px; color: var(--bd-muted); font-size: 13px; text-align: center; }

/* ── The shell: sidebar + main ── */
.bd-shell { display: grid; grid-template-columns: 224px 1fr; min-height: 100vh; }
.bd-side { border-right: 1px solid var(--bd-line-soft); background: var(--bd-panel);
  display: flex; flex-direction: column; padding: 14px 12px; gap: 10px;
  height: 100vh; box-sizing: border-box; }
.bd-side-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px; }
.bd-side-label { font-size: 11px; letter-spacing: .12em; color: var(--bd-dim); font-weight: 650; }
.bd-new { background: transparent; border: 0; color: var(--bd-muted); font: inherit;
  font-size: 12.5px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.bd-new:hover { color: var(--bd-ink); background: var(--bd-card); }
.bd-tasks { flex: 1; min-height: 48px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.bd-task-item { border: 0; background: transparent; color: var(--bd-muted); text-align: left;
  font: inherit; font-size: 13.5px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.bd-task-item:hover { background: var(--bd-card); color: var(--bd-ink); }
.bd-task-item[aria-current="true"] { background: var(--bd-card); color: var(--bd-ink); }
.bd-side-foot { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; }
.bd-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--bd-card);
  border: 1px solid var(--bd-line); display: grid; place-items: center; font-size: 12px;
  color: var(--bd-muted); }
.bd-gear { color: var(--bd-dim); font-size: 15px; text-decoration: none; }
.bd-gear:hover { color: var(--bd-ink); }

.bd-main { display: flex; flex-direction: column; min-width: 0; }

/* ── Home: the question, centred ── */
.bd-home { flex: 1; display: grid; place-items: center; padding: 24px; }
.bd-home-inner { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 16px; }
.bd-home-title { font-size: 21px; font-weight: 650; text-align: center; }
.bd-compose { position: relative; }
.bd-compose textarea { min-height: 96px; resize: vertical; padding-right: 44px; }
.bd-send { position: absolute; right: 10px; bottom: 10px; background: transparent; border: 0;
  color: var(--bd-muted); cursor: pointer; font-size: 16px; padding: 4px; border-radius: 6px; }
.bd-send:hover { color: var(--bd-ink); }
.bd-chiprow { display: flex; gap: 8px; justify-content: flex-start; }
.bd-chip { background: var(--bd-card); border: 1px solid var(--bd-line); color: var(--bd-muted);
  border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.bd-chip[aria-pressed="true"] { color: var(--bd-ink); }

/* ── Task view: head, tabs, panes ── */
.bd-task { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.bd-task-head { padding: 14px 20px 0; border-bottom: 1px solid var(--bd-line-soft); }
.bd-task-title { font-size: 15px; font-weight: 650; padding-bottom: 10px;
  display: flex; gap: 10px; align-items: baseline; }
.bd-task-state { color: var(--bd-dim); font-size: 12.5px; font-weight: 500; }
.bd-tabs { display: flex; gap: 18px; }
.bd-tab { background: transparent; border: 0; color: var(--bd-dim); font: inherit;
  font-size: 13px; padding: 8px 2px 10px; cursor: pointer; border-bottom: 2px solid transparent; }
.bd-tab[aria-selected="true"] { color: var(--bd-ink); border-bottom-color: var(--bd-ink); }
.bd-panes { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 28px; }

/* ── The rail: brand, new chat, recent, projects, account ── */
.bd-brandrow { display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px; }
.bd-brandname { font-size: 11.5px; font-weight: 750; letter-spacing: .18em; }
.bd-newchat { margin: 0 4px 10px; }
.bd-side .bd-side-label { display: block; padding: 8px 6px 4px; }
.bd-projects { display: flex; flex-direction: column; gap: 2px; flex: 0 1 auto; max-height: 22vh; overflow-y: auto; }
.bd-project-item { display: flex; align-items: center; gap: 8px; border: 0; background: transparent;
  color: var(--bd-muted); text-align: left; font: inherit; font-size: 13.5px; padding: 7px 10px;
  border-radius: 8px; cursor: pointer; width: 100%; }
.bd-project-item:hover { background: var(--bd-card); color: var(--bd-ink); }
.bd-project-item[aria-pressed="true"] { background: var(--bd-card); color: var(--bd-ink); }
.bd-project-item .bd-chevron { margin-left: auto; color: var(--bd-dim); }
.bd-account-row { display: flex; align-items: center; gap: 9px; border: 0; background: transparent;
  font: inherit; text-align: left; cursor: pointer; padding: 6px; border-radius: 9px; min-width: 0; }
.bd-account-row:hover { background: var(--bd-card); }
.bd-account-who { display: flex; flex-direction: column; min-width: 0; }
.bd-account-name { font-size: 12.5px; font-weight: 600; color: var(--bd-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.bd-account-org { font-size: 11.5px; color: var(--bd-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.bd-context-menu { position: static; margin-top: 8px; }
.bd-context-menu button { display: block; width: 100%; text-align: left; border: 0;
  background: transparent; font: inherit; font-size: 13px; color: var(--bd-muted);
  padding: 8px 12px; border-radius: 7px; cursor: pointer; }
.bd-context-menu button:hover { background: var(--bd-card); color: var(--bd-ink); }

/* ── The thread: the conversation is the surface ── */
.bd-center-col { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.bd-thread { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.bd-msg { max-width: 88%; align-self: flex-start; background: var(--bd-card);
  border: 1px solid var(--bd-line-soft); border-radius: 14px 14px 14px 4px;
  padding: 10px 14px; font-size: 13.5px; overflow-wrap: anywhere; }
.bd-msg.bd-msg-own { align-self: flex-end; background: var(--bd-ink); color: #FFFFFF;
  border-color: var(--bd-ink); border-radius: 14px 14px 4px 14px; }
.bd-say { display: flex; gap: 8px; align-items: center; padding: 10px 20px 14px;
  border-top: 1px solid var(--bd-line-soft); background: var(--bd-bg); }
.bd-say input { flex: 1; border: 1px solid var(--bd-line); border-radius: 11px;
  background: var(--bd-field); color: var(--bd-ink); font: inherit; padding: 11px 14px; }
.bd-say-send { position: static; }

/* ── Home: greeting held in space, the composer at the bottom ── */
.bd-home { display: flex; flex-direction: column; padding: 0; }
.bd-home-greet { flex: 1; display: grid; place-items: center; padding: 24px; }
.bd-home .bd-home-inner { margin: 0 auto; width: 100%; max-width: 640px;
  padding: 0 20px 18px; }

/* ── Context panel: six views over the goal's own record ── */
.bd-taskgrid { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bd-panel { border-top: 1px solid var(--bd-line); padding: 14px 20px 28px; overflow-y: auto; }
.bd-panel-tabs { border-bottom: 1px solid var(--bd-line-soft); padding-bottom: 8px;
  margin-bottom: 12px; flex-wrap: wrap; gap: 9px; }
.bd-panel-tabs .bd-tab { font-size: 12px; padding: 6px 1px 8px; }
.bd-pview { font-size: 13.5px; }
.bd-pview h2 { font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bd-muted); margin: 14px 0 6px; }
.bd-pview h2:first-child { margin-top: 0; }
.bd-plist li { display: flex; gap: 8px; padding: 4px 0; align-items: baseline; }
.bd-plist .bd-pmark { color: var(--bd-green); font-weight: 700; flex: none; }
.bd-plist li[data-state="pending"] .bd-pmark { color: var(--bd-dim); }
.bd-pmetric { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0;
  border-bottom: 1px solid var(--bd-line-soft); }
.bd-pmetric:last-child { border-bottom: 0; }
.bd-pmetric .bd-pmetric-v { font-weight: 650; overflow-wrap: anywhere; text-align: right; }
.bd-pview .bd-status { margin: 8px 0; }
.bd-panel-preview { width: 100%; min-height: 260px; }
.bd-memories li { display: flex; gap: 10px; align-items: baseline; padding: 7px 0;
  border-bottom: 1px solid var(--bd-line-soft); }
.bd-memories li span { flex: 1; overflow-wrap: anywhere; }
.bd-memories .bd-forget { background: none; border: 0; color: var(--bd-muted);
  font: inherit; font-size: 12.5px; cursor: pointer; padding: 0; }
.bd-memories .bd-forget:hover { color: var(--bd-ink); text-decoration: underline; }
.bd-remember { display: flex; gap: 8px; margin: 12px 0 8px; }
.bd-remember input { flex: 1; border: 1px solid var(--bd-line); border-radius: 8px;
  background: var(--bd-field); color: var(--bd-ink); font: inherit; padding: 8px 10px; }
.bd-memory-export { display: inline-block; margin-top: 4px; }
.bd-revise { display: flex; gap: 8px; width: 100%; margin-top: 6px; }
.bd-revise input { flex: 1; border: 1px solid var(--bd-line); border-radius: 9px;
  background: var(--bd-field); color: var(--bd-ink); font: inherit; padding: 9px 12px; }
@media (min-width: 1100px) {
  .bd-taskgrid { flex-direction: row; }
  .bd-panes { flex: 1; }
  .bd-panel { flex: none; width: 352px; border-top: 0; border-left: 1px solid var(--bd-line); }
}

/* Progress checklist */
.bd-steps { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.bd-step { display: flex; align-items: center; gap: 11px; font-size: 14px; }
.bd-step .bd-check { width: 18px; height: 18px; font-size: 10.5px; }
.bd-step-open { width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--bd-dim); flex: none; }
.bd-step-pending { color: var(--bd-muted); }
.bd-plan-sub { color: var(--bd-dim); font-size: 13px; padding-left: 29px; }
.bd-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
.bd-status { color: var(--bd-muted); font-size: 13px; }

/* Console + diff */
.bd-console { background: #101318; border: 1px solid #101318; border-radius: 10px;
  padding: 14px 16px; font-family: var(--bd-mono); font-size: 12.5px; line-height: 1.7;
  color: #B7BEC7; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.bd-console .ok { color: #4ADE80; }
.bd-console .add { color: #4ADE80; }
.bd-console .del { color: #F87171; }
.bd-console .hunk { color: #60A5FA; }

/* Files */
.bd-files { font-family: var(--bd-mono); font-size: 13px; color: var(--bd-muted);
  display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.bd-file { overflow-wrap: anywhere; }
.bd-file::before { content: "\1F4C4  "; font-size: 12px; }

/* Done */
.bd-done { max-width: 420px; display: flex; flex-direction: column; gap: 12px; }
.bd-done-title { font-size: 19px; font-weight: 650; }
.bd-preview { width: 100%; height: 340px; border: 1px solid var(--bd-line); border-radius: 10px;
  background: #FFFFFF; }

/* Phone: the sidebar folds into one compact bar; the question owns the rest. */
@media (max-width: 720px) {
  .bd-shell { display: flex; flex-direction: column; min-height: 100dvh; }
  .bd-side { flex: none; flex-direction: row; align-items: center; gap: 10px;
    border-right: 0; border-bottom: 1px solid var(--bd-line-soft); padding: 10px 14px;
    height: auto; }
  /* The rail's tall sections become one compact bar: the mark, + New, the
     recent chips, and the account glyph. Everything else lives behind the
     gear or on wider screens. */
  .bd-brandrow { padding: 0; }
  .bd-brandname { display: none; }
  .bd-newchat { margin: 0; padding: 7px 12px; font-size: 13px; width: auto; }
  .bd-side .bd-side-label { display: none; }
  .bd-projects { display: none; }
  .bd-connect-link { flex: none; padding: 4px 6px; white-space: nowrap; }
  .bd-tasks { flex: 1; min-height: 0; flex-direction: row; overflow-x: auto; gap: 6px;
    scrollbar-width: none; }
  .bd-tasks::-webkit-scrollbar { display: none; }
  .bd-task-item { max-width: 44vw; flex: none; padding: 6px 10px; }
  .bd-tasks-empty { white-space: nowrap; }
  .bd-fine-side { display: none; }
  .bd-side-foot { flex: none; margin-left: auto; gap: 10px; padding: 0; }
  .bd-account-who { display: none; }
  .bd-account-row { padding: 2px; }
  .bd-main { flex: 1; }
  .bd-home-greet { padding: 16px; }
  .bd-fine-phone { display: block; }
  .bd-panel { width: auto; border-left: 0; }
}
@media (min-width: 721px) {
  .bd-fine-phone { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .bd-step-open.bd-live { animation: bd-pulse 1.6s ease-in-out infinite; }
  @keyframes bd-pulse { 50% { border-color: var(--bd-muted); } }
}

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--bd-ink, #101318);
  color: #FFFFFF; padding: 8px 12px; border-radius: 0 0 8px 0; z-index: 99; }
.skip-link:focus { left: 12px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; }

/* A whisper of chrome on the auth screens: the mark, and the one other way in. */
.bd-top { position: absolute; top: 0; left: 0; right: 0; display: flex;
  align-items: center; justify-content: space-between; padding: 14px 18px; }
.bd-top a { color: var(--bd-muted); font-size: 13px; text-decoration: none; }
.bd-top a:hover { color: var(--bd-ink); }

/* The hidden attribute always wins; a display: grid on a class must not
   quietly resurrect a screen the runtime hid. */
.bd [hidden] { display: none !important; }

.bd-icon { width: 18px; height: 18px; display: inline-block; vertical-align: middle; }
.bd-icon path, .bd-icon circle { fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }

/* One quiet dot says where each task stands. State, not decoration. */
.bd-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block;
  margin-right: 8px; flex: none; vertical-align: 1px; background: var(--bd-dim); }
.bd-dot-done { background: var(--bd-green); }
.bd-dot-waiting { background: #D97706; }
.bd-dot-stopped { background: #B91C1C; }
.bd-dot-working { background: var(--bd-dim); }

/* The account menu: two honest destinations behind the avatar. */
.bd-account { position: relative; }
.bd-avatar { border: 1px solid var(--bd-line); background: var(--bd-card); cursor: pointer;
  font: inherit; font-size: 12px; }
.bd-menu { position: absolute; bottom: 34px; left: 0; background: var(--bd-bg);
  border: 1px solid var(--bd-line); border-radius: 9px; padding: 6px;
  display: flex; flex-direction: column; min-width: 150px; box-shadow: 0 8px 24px rgba(16,19,24,.10); }
.bd-menu a { padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--bd-ink);
  text-decoration: none; }
.bd-menu a:hover { background: var(--bd-card); }
.bd-menu form { display: contents; }
.bd-menu button { padding: 8px 10px; border-radius: 6px; font: inherit; font-size: 13px;
  color: var(--bd-ink); background: transparent; border: 0; text-align: left; cursor: pointer; }
.bd-menu button:hover { background: var(--bd-card); }
@media (max-width: 720px) { .bd-menu { bottom: auto; top: 34px; left: auto; right: 0; } }
.bd-tasks-empty { color: var(--bd-dim); font-size: 12.5px; padding: 8px 10px; }

.bd-menu .bd-danger { color: #B91C1C; }
.bd-menu .bd-danger:hover { background: #FDECEC; }

/* The register, in this room's language. */
.bd-connect-link { margin-top: 4px; text-align: left; }
.bd-connect-head { font-size: 14px; font-weight: 650; margin: 14px 0 10px; }
.bd-connect-head:first-child { margin-top: 0; }
.bd-register { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px; max-width: 900px; }
.bd-register li { display: flex; align-items: center; gap: 10px;
  background: var(--bd-card); border: 1px solid var(--bd-line-soft); border-radius: 10px;
  padding: 10px 12px; }
.bd-reg-name { flex: 1; font-size: 13.5px; font-weight: 550; overflow-wrap: anywhere; }
/* The row a "connect X" ask landed on: findable at a glance, nothing else dimmed. */
.bd-register li.bd-reg-focus { border-color: var(--bd-green); }
.bd-reg-cat { display: block; color: var(--bd-dim); font-size: 11.5px; font-weight: 400; }
.bd-pill { font-size: 11.5px; color: var(--bd-dim); white-space: nowrap; }
.bd-pill-ok { color: var(--bd-green); font-weight: 600; }
.bd-pill-risk { color: #B91C1C; font-weight: 600; }
/* The live address on a project row: quiet until wanted, and unmistakably a
   link out to the customer's own site rather than another pane of ForgeOS. */
.bd-project-live { display: block; margin: -2px 0 6px 30px; font-size: 12px;
  color: var(--bd-blue, #3B49B4); text-decoration: none; }
.bd-project-live::before { content: "\2197\00a0"; }
.bd-project-live:hover { text-decoration: underline; }
.bd-pill-btn { font-size: 12px; padding: 5px 10px; }

.bd-live-line { margin-top: 10px; max-width: 560px; }

/* `hidden` must win over a class that sets `display`; the UA rule
   `[hidden] { display: none }` loses to any class selector. */
.bd-avatar[hidden] { display: none; }
.bd-bigcheck[hidden] { display: none; }
.bd-btn[hidden] { display: none; }
.bd-center[hidden] { display: none; }
.bd-done[hidden] { display: none; }
.bd-icon[hidden] { display: none; }
.bd-menu[hidden] { display: none; }
.bd-tabs[hidden] { display: none; }
.bd-task[hidden] { display: none; }