/* OneBrain onboarding — the Monad system, one step at a time.
 *
 * Loaded after app.css and home.css, so every Monad token (parchment canvas,
 * serif display at weight 400, mono labels, one Lake Blue action) already
 * applies via `.home`. This file adds only what a wizard needs that a landing
 * page does not: a step machine, a progress rail, and source cards.
 *
 * Why this is not a dashboard tab. First run is the one moment a person has no
 * idea what the product is. The dashboard's Dub system is built for density —
 * seven tabs, hairline tables, 14px type — which is exactly right for someone
 * who already knows what they are looking at, and exactly wrong for someone who
 * does not. Here the page holds ONE question at a time at display size.
 *
 * Motion rules, inherited from the landing page and unchanged: transform and
 * opacity only (never layout properties), ease-out only (ease-in delays the
 * first frame, the moment the eye is on it), and everything collapses under
 * prefers-reduced-motion.
 */

.ob { min-height:100vh; display:flex; flex-direction:column; }

/* ------------------------------------------------------------------ nav */

.obnav {
  display:flex; align-items:center; gap:var(--u4);
  padding:var(--u4) var(--u6); max-width:var(--page-max);
  width:100%; margin:0 auto;
}
.ob .navbrand { display:inline-flex; align-items:center; gap:10px;
  font-size:16px; letter-spacing:-.01em; }
.ob .navbrand .mark { width:16px; height:16px; border-radius:5px;
  background:var(--color-electric-iris); position:relative; }
.ob .navbrand .mark::after { content:""; position:absolute; inset:4.5px;
  border-radius:50%; background:var(--color-void); }

/* The rail is a map, not a control: showing where you are matters more than
   letting you jump, and a half-filled step 3 is not a place to land. */
.obrail { display:flex; align-items:center; gap:var(--u4);
  list-style:none; margin:0 auto; padding:0;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.obrail li { display:inline-flex; align-items:center; gap:8px;
  color:var(--color-ash-gray); }
.rdot { width:7px; height:7px; border-radius:50%;
  background:var(--color-ash-line);
  transition:transform 260ms var(--ease-out), background-color 260ms var(--ease-out); }
.obrail li[data-on] { color:var(--color-bone-white); }
.obrail li[data-on] .rdot { background:var(--color-electric-iris);
  transform:scale(1.5); }
.obrail li[data-done] .rdot { background:var(--color-deep-verdant); }
.obskip { font-size:14px; color:var(--color-silver-mist);
  transition:color 200ms ease; }
.obskip:hover { color:var(--color-electric-iris); }

/* ----------------------------------------------------------------- step */

#stepmain, #wmain { flex:1; width:100%; max-width:760px; margin:0 auto;
  padding:var(--u10) var(--u6) var(--u16); }
#stepmain:focus-visible, #wmain:focus-visible { outline:none; }
/* Step headings are focused programmatically on each swap so keyboard and
   screen-reader users land in the content that changed. They are targets, not
   controls, so they must not draw a focus ring — same treatment app.css gives
   its own #view. Real controls keep theirs. */
.step h1:focus, .step h1:focus-visible { outline:none; }

.step { display:block; }
.ob h1 { font-size:clamp(34px, 4.4vw, 58px); margin:0 0 var(--u4); }

/* Steps swap by opacity+transform only, so nothing reflows mid-transition. */
.js .step[data-anim="in"] { animation:obin 280ms var(--ease-out) both; }
.js .step[data-anim="out"] { animation:obout 160ms var(--ease-out) both; }
@keyframes obin  { from { opacity:0; transform:translateY(14px); } }
@keyframes obout { to   { opacity:0; transform:translateY(-10px); } }

/* -------------------------------------------------------------- welcome

   The one page that exists to be read, not filled in. It says what the
   product does in three lines and what the next four steps will ask, so
   nobody arrives at "name your organization" wondering what they signed up
   for. No cards: two mono headers and the numbered list the Trello
   walkthrough already uses, because a list of steps is what it is. */

.welcome { margin:var(--u5) 0 0; max-width:40em; }
.welh { font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-ash-gray); margin:0 0 var(--u3); }
.welfeat { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--u4); margin:0 0 var(--u6); }
.welfeat dt { font-size:17px; margin:0 0 6px; }
.welfeat dd { margin:0; font-size:14px; line-height:1.5;
  color:var(--color-silver-mist); text-wrap:pretty; }
.welsteps { margin-top:0; }
.welcome .wlist > li { font-size:15px; line-height:1.5; padding-right:120px; }
.welsteps > li:first-child { border-top:0; padding-top:4px; }
.welsteps > li:first-child::before { top:4px; }
.welsteps b { font-weight:500; }
.weltime { position:absolute; right:0; top:var(--u3);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--color-ash-gray); }
.welsteps > li:first-child .weltime { top:4px; }
.ctaarrow { margin-left:10px; transition:transform 200ms var(--ease-out); }
.cta:hover .ctaarrow { transform:translateX(3px); }
.acts .fh { margin:0; }
@media (max-width: 720px) {
  .welfeat { grid-template-columns:1fr; gap:var(--u3); }
  .welcome .wlist > li { padding-right:0; }
  .weltime { position:static; display:block; margin-top:4px; }
}

/* --------------------------------------------------------------- fields */

.fields { margin:var(--u5) 0 var(--u6); max-width:34em; }
.fl { display:block; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-ash-gray); margin:var(--u4) 0 10px; }
.fields .fl:first-child { margin-top:0; }
.fi {
  width:100%; height:52px; padding:0 18px;
  background:transparent; color:var(--color-bone-white);
  border:1px solid var(--color-ash-line); border-radius:14px;
  font-family:inherit; font-size:16px;
  transition:border-color 200ms ease, box-shadow 200ms var(--ease-out);
}
.fi:hover { border-color:var(--line-strong); }
.fi:focus { outline:none; border-color:var(--color-electric-iris);
  box-shadow:0 0 0 4px rgba(43,89,209,.12); }
textarea.fi { height:auto; min-height:180px; padding:14px 18px; line-height:1.5;
  font-family:var(--font-mono, ui-monospace, monospace); font-size:13px; resize:vertical; }
select.fi { appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--color-ash-gray) 50%),
                   linear-gradient(135deg, var(--color-ash-gray) 50%, transparent 50%);
  background-position:calc(100% - 22px) 23px, calc(100% - 16px) 23px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat; }
.fh { font-size:14px; color:var(--color-silver-mist); margin:10px 0 0;
  max-width:38em; text-wrap:pretty; }

.acts { display:flex; align-items:center; gap:var(--u4); flex-wrap:wrap;
  margin-top:var(--u5); }
button.textlink { background:none; border:none; cursor:pointer; padding:0; }

.ghostpill {
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 20px; cursor:pointer;
  background:transparent; color:var(--color-bone-white);
  border:1px solid var(--color-ash-line); border-radius:var(--radius-buttons);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  transition:border-color 200ms ease, color 200ms ease, transform var(--t-press) var(--ease-out);
}
.ghostpill:hover:not(:disabled) { border-color:var(--color-electric-iris);
  color:var(--color-electric-iris); }
.ghostpill:active:not(:disabled) { transform:scale(.97); }
.ghostpill:disabled { opacity:.45; cursor:default; }

/* -------------------------------------------------------------- sources

   The integrations catalog. Built-in sources and registry servers share one
   card so the grid reads as a single product surface: a mark, a name, one
   line, a state. Twelve to a page in three columns — four rows, scannable
   without scrolling on a laptop — and the pager below is set in the same mono
   voice as the progress rail, because it is the same kind of information:
   where you are in a sequence. */

.catalog { margin:var(--u5) 0 0; }
.cathead { display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--u3); flex-wrap:wrap; margin-bottom:var(--u3); }
.cattitle h2 { font-size:22px; margin:0 0 4px; }
.cattitle .fh { margin:0; max-width:34em; text-wrap:pretty; }

/* Filters: a segmented row of the same mono pills the page uses everywhere;
   the pressed one fills so the current view is legible without colour. */
.catfilters { display:inline-flex; gap:4px; padding:3px;
  border:1px solid var(--color-ash-line); border-radius:var(--radius-buttons); }
.catfilter { height:32px; padding:0 14px; cursor:pointer;
  background:transparent; color:var(--color-silver-mist); border:0;
  border-radius:var(--radius-buttons);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  transition:background-color 160ms ease, color 160ms ease; }
.catfilter:hover { color:var(--color-bone-white); }
.catfilter[aria-pressed="true"], .catfilter[aria-selected="true"] {
  background:var(--color-bone-white); color:var(--color-void); }
.catfilter:focus-visible { outline:2px solid var(--color-electric-iris);
  outline-offset:2px; }

.catsearch { position:relative; display:block; margin-bottom:var(--u3); }
.catsearch svg { position:absolute; left:18px; top:50%; width:16px; height:16px;
  transform:translateY(-50%); fill:none; stroke:var(--color-ash-gray);
  stroke-width:1.8; stroke-linecap:round; pointer-events:none; }
.catsearch .fi { height:46px; padding-left:44px; }
.catsearch .fi::-webkit-search-cancel-button { cursor:pointer; }

#srcgrid { display:grid; gap:var(--u2); margin:0 0 var(--u3);
  grid-template-columns:repeat(3, minmax(0, 1fr)); }
.srcgrid { display:grid; gap:var(--u2); margin:var(--u5) 0 var(--u4);
  grid-template-columns:repeat(auto-fill, minmax(232px, 1fr)); }
.srccard {
  /* app.css's base `button` rule is `height:32px; justify-content:center` — this
     is a button, so both apply and the content overflowed a 32px box. Sharing a
     stylesheet for its tokens means inheriting its element rules too. */
  height:auto; justify-content:flex-start; align-items:stretch;
  display:flex; flex-direction:column; gap:8px; text-align:left;
  padding:var(--u3); cursor:pointer;
  background:transparent; border:1px solid var(--color-ash-line);
  border-radius:20px; color:inherit; font:inherit;
  transition:border-color 220ms ease, transform 220ms var(--ease-out),
             box-shadow 220ms var(--ease-out);
}
#srcgrid .srccard { padding:16px; border-radius:16px; gap:6px; min-width:0; }
.srccard:hover:not(:disabled) { border-color:var(--line-strong);
  transform:translateY(-2px); }
.srccard:focus-visible { outline:2px solid var(--color-electric-iris);
  outline-offset:2px; }
.srccard[data-on="1"] { border-color:var(--color-deep-verdant); }
.srccard[data-on="err"] { border-color:var(--color-coral); }
.srcname { display:flex; align-items:center; gap:10px; font-size:17px; min-width:0; }
#srcgrid .srcname { font-size:15px; font-weight:500; letter-spacing:-.005em; }
#srcgrid .srcname > :not(.srcicon):not(.sd) { overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
/* The logo carries recognition, so the status dot moves to the end of the row
   rather than competing with it for the leading position. */
.srcicon { width:22px; height:22px; flex:none; display:block; }
.srcicon svg { width:100%; height:100%; display:block; }
/* Registry servers get a monogram tile in the product's colour — a square
   with an initial reads as "a product" without shipping anyone's logo. */
.srcicon.tile { display:grid; place-items:center; border-radius:6px;
  background:var(--tile, var(--color-ash-gray)); color:#fff;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px; font-weight:600; line-height:1; }
.srcname .sd { margin-left:auto; }
.srcwhat { font-size:14px; color:var(--color-silver-mist); text-wrap:pretty; }
#srcgrid .srcwhat { font-size:13px; line-height:1.4; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:calc(13px * 1.4 * 2); }
.srcstate { font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--color-ash-gray); }
#srcgrid .srcstate { margin-top:2px; }
.srccard[data-on="1"] .srcstate { color:var(--color-deep-verdant); }
.srccard[data-on="err"] .srcstate { color:var(--color-coral); }
.sd { width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--color-ash-line);
  transition:background-color 220ms ease, transform 220ms var(--ease-out); }
.srccard[data-on="1"] .sd { background:var(--color-deep-verdant); transform:scale(1.15); }
.srccard[data-on="err"] .sd { background:var(--color-coral); }

/* Skeletons hold each card's exact footprint while the page loads, so the
   grid never reflows when rows arrive. */
.srccard.skel { pointer-events:none; }
.sk { display:block; border-radius:4px; background:var(--color-ash-line);
  opacity:.55; }
.js .sk { animation:obsk 1.1s ease-in-out infinite alternate; }
@keyframes obsk { to { opacity:.25; } }
.skel .srcicon { border-radius:6px; background:var(--color-ash-line); opacity:.55; }
.sk-t { width:55%; height:13px; }
.sk-w { width:92%; height:12px; margin-top:6px; }
.sk-s { width:38%; height:9px; margin-top:8px; }
.catempty { grid-column:1 / -1; padding:var(--u5) var(--u3); text-align:center;
  color:var(--color-silver-mist); font-size:15px; text-wrap:pretty; margin:0; }

/* Fetched logos sit in the same 22px box as the built-in marks. */
.srcicon.logo { display:grid; place-items:center; border-radius:6px; overflow:hidden; }
.srcicon.logo img { width:100%; height:100%; display:block; object-fit:contain; }

/* The list's foot: how far you are through it, in the rail's mono voice,
   and a button for anyone whose browser will not fetch on scroll. */
#cat-sentinel { height:1px; }
.catfoot { display:flex; align-items:center; justify-content:space-between;
  gap:var(--u3); flex-wrap:wrap; padding-top:var(--u3);
  border-top:1px solid var(--color-ash-line);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-ash-gray); font-variant-numeric:tabular-nums; }
.catfoot[hidden] { display:none; }
.catfoot .ghostpill { height:34px; padding:0 16px; }

@media (max-width: 720px) {
  #srcgrid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cathead { align-items:flex-start; }
}
@media (max-width: 440px) {
  #srcgrid { grid-template-columns:1fr; }
}

.manual { margin-top:var(--u3); }
.manual summary { cursor:pointer; font-size:15px;
  color:var(--color-silver-mist); transition:color 200ms ease; }
.manual summary:hover { color:var(--color-electric-iris); }
.mrow { display:flex; gap:var(--u2); flex-wrap:wrap; margin-top:var(--u3); }
.mrow .fi { flex:1 1 190px; width:auto; height:44px; }

/* The "what does it read" box after a remote source connects. */
.mtp h2 { font-size:20px; }
.mtp .fh b.mono { font-weight:500; color:var(--color-bone-white); }
.mtp .manual { margin-top:var(--u3); }
.mtp select.fi { flex:1 1 260px; width:auto; height:44px; padding-right:40px;
  background-position:calc(100% - 22px) 19px, calc(100% - 16px) 19px; }
.mtp[hidden] { display:none; }
.mtp-acts { margin-top:var(--u4); }
/* On Sources the actions lead: the list below is long, and "what next" must
   not depend on reaching its end. */
.acts-top { margin:var(--u4) 0 0; }
.acts-top + .catalog { margin-top:var(--u6); }

/* --------------------------------------------------------------- verify */

.vpanel { border:1px solid var(--color-ash-line); border-radius:24px;
  padding:var(--u4); margin:var(--u5) 0 0; }
.vhead { display:flex; align-items:center; justify-content:space-between;
  gap:var(--u3); margin-bottom:var(--u3); font-size:17px; }
.vrows { display:flex; flex-direction:column; }
.vrow { display:flex; align-items:flex-start; gap:10px;
  padding:11px 0; border-top:1px solid var(--color-ash-line); }
.vrows .vrow:first-child { border-top:0; }
/* Rows arrive one after another so the eye tracks progress instead of being
   handed a finished list; capped so a long list never feels slow. */
.js .vrow { animation:obin 240ms var(--ease-out) both; }
.js .vrow:nth-child(2) { animation-delay:60ms; }
.js .vrow:nth-child(3) { animation-delay:120ms; }
.js .vrow:nth-child(4) { animation-delay:180ms; }
.js .vrow:nth-child(n+5) { animation-delay:240ms; }
.vrow b { font-weight:500; }
.vdetail { color:var(--color-silver-mist); font-size:15px; }
.vfix { margin:6px 0 0 18px; font-size:14px; color:var(--color-silver-mist);
  max-width:44em; text-wrap:pretty; }
.vfetch { margin-top:var(--u4); padding-top:var(--u4);
  border-top:1px solid var(--color-ash-line); }
.vfetch .vrows { margin-top:var(--u3); }
.spinner { display:inline-block; width:13px; height:13px; flex:none;
  border:2px solid var(--color-ash-line);
  border-top-color:var(--color-electric-iris); border-radius:50%;
  animation:obspin 700ms linear infinite; }
@keyframes obspin { to { transform:rotate(360deg); } }

/* ----------------------------------------------------------------- done */

/* A command to copy: the text is the object, the button sits beside it. */
.snip { display:flex; align-items:flex-start; gap:12px; margin-top:10px;
  padding:12px 14px; border:1px solid var(--color-ash-line); border-radius:12px;
  background:var(--sunk, #efeae7); }
.snip pre { flex:1; margin:0; font-size:13px; line-height:1.5;
  white-space:pre-wrap; word-break:break-all; color:var(--color-bone-white); }
.snip .ghostpill { height:32px; padding:0 14px; flex:none; }
.snip[hidden] { display:none; }
.wsteps .textlink { font-size:14px; color:var(--color-silver-mist); }
.wsteps .textlink .tl { border-bottom:1px solid var(--color-ash-line); }
a.ghostpill { text-decoration:none; }
.harn { flex-wrap:wrap; margin:var(--u3) 0 var(--u3); }
.harnpane[hidden] { display:none; }
.harnpane .snip { margin-top:6px; }
/* The Claude Code line as a terminal window (the landing page's), left-set
   inside the box; the steps under it in the same numbered voice as Welcome. */
.harnpane .term { margin:var(--u3) 0; max-width:none; }
.harnpane .snippet code { white-space:pre-wrap; word-break:break-all; }
.harnsteps { margin-top:var(--u3); }
.harnsteps > li { font-size:14px; line-height:1.5; }
.harnsteps > li:first-child { border-top:0; padding-top:4px; }
.harnsteps > li:first-child::before { top:4px; }
.harnsteps .snip { margin-top:8px; }
.wsteps .cta { text-decoration:none; }

.donemark { width:64px; height:64px; margin:0 0 var(--u4);
  border-radius:50%; border:1px solid var(--color-deep-verdant);
  display:grid; place-items:center; }
.donemark svg { width:34px; height:34px; fill:none;
  stroke:var(--color-deep-verdant); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round; }
.js .donemark svg path { stroke-dasharray:40; stroke-dashoffset:40;
  animation:obtick 420ms var(--ease-out) 120ms forwards; }
@keyframes obtick { to { stroke-dashoffset:0; } }

/* ------------------------------------------------------------ responsive */

@media (max-width: 720px) {
  .obnav { flex-wrap:wrap; gap:var(--u3); padding:var(--u3) var(--u4); }
  .obrail { order:3; width:100%; margin:0; gap:var(--u3);
    justify-content:space-between; }
  .obrail .rlab { display:none; }
  .obrail li { flex:1; }
  .rdot { width:100%; height:3px; border-radius:2px; }
  .obrail li[data-on] .rdot { transform:none; }
  #stepmain { padding:var(--u6) var(--u4) var(--u10); }
}

/* --------------------------------------------------------- reduced motion

   Everything above is decoration on top of a page that already works. Under
   reduced motion the steps still change and the rows still appear; they simply
   stop moving. */
@media (prefers-reduced-motion: reduce) {
  .js .step[data-anim="in"], .js .step[data-anim="out"],
  .js .vrow, .js .donemark svg path, .js .sk {
    animation:none; opacity:1; transform:none; stroke-dashoffset:0; }
  .spinner { animation:none; }
  .rdot { transition:none; }
}

/* ------------------------------------------------- the Trello walkthrough

   A numbered path, not a paragraph: the flow leaves this page (Trello's own
   authorize screen) and comes back with something to paste, and each hand-off
   is where people get lost. Mono numerals in a hairline gutter — the same voice
   the progress rail uses for "where am I". */
.wsteps { border:1px solid var(--color-ash-line); border-radius:24px;
  padding:var(--u4); margin-top:var(--u3); }
.wsteps:focus, .wsteps:focus-visible { outline:none; }  /* reveal target, not a control */
.wsteps h2 { font-size:22px; margin:0 0 var(--u2); }
.wlist { list-style:none; counter-reset:wstep; margin:var(--u3) 0 0; padding:0; }
.wlist > li { counter-increment:wstep; position:relative;
  padding:var(--u3) 0 var(--u3) 44px; border-top:1px solid var(--color-ash-line); }
.wlist > li::before { content:counter(wstep);
  position:absolute; left:0; top:var(--u3);
  width:26px; height:26px; border-radius:50%;
  border:1px solid var(--color-ash-line);
  display:grid; place-items:center;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px; color:var(--color-silver-mist); }
.wlist > li > b { font-weight:500; }
.wlist .fh { margin-top:6px; }
.wlist .ghostpill, .wlist .mrow { margin-top:12px; }
a.ghostpill { text-decoration:none; }
.harn { flex-wrap:wrap; margin:var(--u3) 0 var(--u3); }
.harnpane[hidden] { display:none; }
.harnpane .snip { margin-top:6px; }
/* The Claude Code line as a terminal window (the landing page's), left-set
   inside the box; the steps under it in the same numbered voice as Welcome. */
.harnpane .term { margin:var(--u3) 0; max-width:none; }
.harnpane .snippet code { white-space:pre-wrap; word-break:break-all; }
.harnsteps { margin-top:var(--u3); }
.harnsteps > li { font-size:14px; line-height:1.5; }
.harnsteps > li:first-child { border-top:0; padding-top:4px; }
.harnsteps > li:first-child::before { top:4px; }
.harnsteps .snip { margin-top:8px; }
.wsteps .cta { text-decoration:none; }

/* The platform group inside verify: same rows, different owner — the label is
   the hand-off. Steps under a failed row are the operator walkthrough. */
.vsub { font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-ash-gray); padding:14px 0 4px;
  border-top:1px solid var(--color-ash-line); margin-top:6px; }
.vsteps { margin:8px 0 2px; padding:0 0 0 20px; }
.vsteps li { margin:6px 0; font-size:14px; color:var(--color-silver-mist);
  max-width:52em; text-wrap:pretty; }

/* The authorize link before a key exists: present (the path is visible from the
   start) but plainly not ready. */
a.ghostpill.disabled { opacity:.45; pointer-events:none; }