/* Rove — console page.
   Loaded after base.css, which owns tokens, buttons and badges.
   Every size and gap here comes from the scales in base.css. */

/* Masthead ---------------------------------------------------------------- */

/* The bar itself is .site-head (base.css), shared with every other page. */

.masthead-meta { display: flex; align-items: center; gap: var(--space-3); }

.masthead .brand { color: inherit; text-decoration: none; }

/* Where you are: brand / workspace. */
.masthead-where { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.crumb-sep { color: var(--border-strong); font-size: var(--step-5); }
/* In Settings the header's workspace steps aside; each page names its own. */
.masthead-where .crumb.is-away { visibility: hidden; }

.scope { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.scope label { font-size: var(--step-1); font-weight: 600; color: var(--text-muted); }
.scope select { width: auto; max-width: 16rem; }


/* An open panel's button, and Settings while you're in it, read as pressed. */
.btn:not(.btn-primary)[aria-expanded="true"],
.btn[aria-current="true"] {
  background: var(--surface-sunken);
  border-color: var(--border-strong);
  color: var(--text);
}

/* Banner ----------------------------------------------------------------- */

.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-5);
  background: var(--danger-soft);
  color: var(--danger);
  border-bottom: 1px solid var(--border);
  font-size: var(--step-2);
}

.banner[data-tone="ok"] { background: var(--accent-soft); color: var(--accent); }

.banner-close {
  border: 0; background: none; cursor: pointer;
  color: inherit; font-size: var(--step-5); line-height: 1; padding: 0 var(--space-1);
}

/* Layout ----------------------------------------------------------------- */

.layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-4) var(--space-5) var(--space-6);
  max-width: var(--shell);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-3);
}

.panel h2 {
  margin: 0;
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Forms ------------------------------------------------------------------ */

.form { display: grid; gap: var(--space-1); }

.form-inset {
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.form label {
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.form label:first-of-type { margin-top: 0; }

.hint { font-weight: 400; color: var(--text-faint); }
.hint-block { margin: var(--space-2) 0 0; font-size: var(--step-1); color: var(--text-faint); }

input, textarea, select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--step-3);
}

textarea { resize: vertical; font-family: var(--mono); font-size: var(--step-2); line-height: 1.6; }

input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.form-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }

.btn-copy {
  margin-left: auto;
  border-color: var(--border);
  color: var(--text-faint);
  font-size: var(--step-0);
  padding: var(--space-1) var(--space-2);
}
.btn-copy:hover { color: var(--text); }

/* Topic list ------------------------------------------------------------- */

/* align-content: start, because on wide screens the list is stretched to fill
   the panel so it can scroll, and a grid's default stretches its rows into that
   space — four Topics were spaced ~180px apart. */
.topic-list { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: var(--space-1); }

.topic-button {
  width: 100%;
  display: grid;
  gap: var(--space-1);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.topic-button:hover { background: var(--surface-sunken); }

.topic-list[data-active="true"] .topic-item[data-selected="true"] .topic-button {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.topic-name { font-size: var(--step-3); font-weight: 500; overflow-wrap: anywhere; }
.topic-sub { display: flex; align-items: center; gap: var(--space-2); font-size: var(--step-0); color: var(--text-faint); }

/* Stream ----------------------------------------------------------------- */

.placeholder {
  /* The placeholder, not the panel, owns this height — on the panel it
     forced a void beneath any timeline shorter than 440px. */
  min-height: 320px;
  padding: var(--space-6) var(--space-5);
  max-width: 56ch;
}
.placeholder h2 {
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--step-5);
  color: var(--text);
  margin-bottom: var(--space-2);
}
.placeholder p { margin: 0; color: var(--text-muted); font-size: var(--step-2); }

.stream-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.stream-head h2 {
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: var(--step-5);
  color: var(--text);
  overflow-wrap: anywhere;
}
.topic-description { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--step-2); max-width: 70ch; }
.stream-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* Retrieval -------------------------------------------------------------- */

.find {
  display: flex;
  align-items: stretch;      /* input and button share one height */
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

/* `input, textarea, select` sets width:100% for stacked forms. Here the input is
   a flex item, so it must size from flex-basis instead — otherwise it claims the
   whole row and shoves the button out of it. */
.find input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  font-family: inherit;
  font-size: var(--step-3);
}

.find .btn {
  flex: 0 0 auto;
  /* Matches the input's font-size and vertical padding so the two line up
     exactly rather than differing by a pixel or two. */
  font-size: var(--step-3);
  padding: var(--space-2) var(--space-4);
  white-space: nowrap;
}

.findings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.findings-head h2 {
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: var(--step-5);
  color: var(--text);
}

.findings-sub { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--step-2); }

/* Ranked results are not an ordered stream, so they get no rail. */
#findings .timeline { padding-left: 0; }
#findings .timeline::before { display: none; }

.finding-topic {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: var(--step-1);
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 2px;
  cursor: pointer;
}
.finding-topic:hover { color: var(--text); }

.finding-stale {
  font-size: var(--step-0);
  color: var(--text-faint);
}
/* Not an error — a Session can be old and still right. Enough to prompt a check. */
.finding-stale[data-stale="true"] { color: var(--accent); }

/* Stronger than the staleness hint: this is not "check whether it still holds",
   it is "someone has said it does not". Still not destructive styling — the
   Session is kept on purpose. */
.finding-superseded {
  font-size: var(--step-0);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: 100px;
  background: var(--danger-soft);
  color: var(--danger);
}

/* Every supersession on this Session was itself withdrawn, so the finding may
   stand again. Softened rather than hidden — whether it stands is the reader's
   call, and removing the mark would be making it for them. */
.finding-superseded[data-disputed="true"] {
  background: var(--surface-sunken);
  color: var(--text-muted);
}

@media (max-width: 520px) {
  .find { flex-direction: column; align-items: stretch; }
}

/* Timeline --------------------------------------------------------------- */

/* An ordered stream, drawn as one. A continuous rule runs behind the cards with
   each sequence badge sitting on it as a node, so append-only ordering — the one
   concept the whole product rests on — is legible without reading the numbers. */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-5);
  display: grid;
  gap: var(--space-3);
  position: relative;
}

/* --border-strong rather than --border: measured at 1.33:1 against the panel the
   lighter token is not visible at 2px, and an invisible decoration is just dead
   markup. This reads at 1.68:1 in both themes. */
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: var(--space-2);
  bottom: var(--space-2);
  width: 2px;
  background: var(--border-strong);
}

.session {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
}

/* The node on the rule. */
.session::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-5) + 2px);
  top: var(--space-4);
  width: 8px;
  height: 8px;
  border-radius: 100px;
  /* The node carries meaning — it marks a position in the stream — so it takes a
     token that reads clearly (5.38:1 light, 5.19:1 dark) rather than a hairline
     colour. The halo is --surface so the node sits cleanly on the rail. */
  background: var(--text-faint);
  box-shadow: 0 0 0 3px var(--surface);
}

.session[data-fresh="true"]::before { background: var(--accent); }

/* A retrieval result is chosen rather than listed, so it keeps an accent edge —
   and sits outside a timeline, so it has no node. */
.finding { border-left: 3px solid var(--accent); }
.finding::before { display: none; }

.session-head {
  display: flex;
  align-items: center;
  /* Wraps because a retrieval result puts several things here — Topic,
     staleness, correction, time — and on a narrow panel they don't fit a row. */
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  font-size: var(--step-1); color: var(--text-faint);
}

.session-author { color: var(--text-muted); }
.session-time { font-variant-numeric: tabular-nums; }

.session-title {
  overflow-wrap: anywhere;
  margin: var(--space-2) 0 0;
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Session text is Markdown rendered to safe elements (markdown.js): prose with
   structure, at a readable measure. */
.session-text {
  margin: var(--space-2) 0 0;
  max-width: 78ch;
  overflow-wrap: anywhere;
  font-size: var(--step-3);
  line-height: 1.62;
  color: var(--text);
}

.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 var(--space-2); }
.md h4, .md h5 {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--step-3);
  font-weight: 600;
  color: var(--text);
}
.md h5 { font-size: var(--step-2); color: var(--text-muted); }
.md ul, .md ol { margin: 0 0 var(--space-2); padding-left: var(--space-5); }
.md li { margin: var(--space-1) 0; }
.md li > ul, .md li > ol { margin-bottom: 0; }
.md blockquote {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-3);
  border-left: 3px solid var(--border-strong);
  color: var(--text-muted);
}
.md code {
  font-family: var(--mono);
  font-size: 0.9em;
  padding: 0 var(--space-1);
  border-radius: 3px;
  background: var(--surface-sunken);
}
.md pre {
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  overflow-x: auto;
  font-size: var(--step-2);
  line-height: 1.5;
}
.md pre code { padding: 0; background: none; font-size: inherit; }
.md pre.md-plain { font-family: inherit; white-space: pre-wrap; background: none; padding: 0; }
.md hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-3) 0; }
.md a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Folded: the first screenful, faded out, until "Show more". */
.md[data-folded="true"] {
  max-height: 16em;
  overflow: clip;
  mask-image: linear-gradient(to bottom, black 70%, transparent);
}
.session-more { margin-top: var(--space-2); }

.session-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

.empty { color: var(--text-faint); font-size: var(--step-2); padding: var(--space-3) var(--space-1); margin: 0; }

/* Facts ------------------------------------------------------------------- */

.facts {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.facts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.facts-head h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--step-3);
  font-weight: 600;
}


.facts .form-inset { margin-top: var(--space-3); background: var(--surface); }

.fact-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }

/* Two columns, not a flex run. Laid out inline, every statement began wherever
   its verb happened to end, so "Observed", "Answer" and "Open question" started
   their claims at three different x positions and the panel had no edge to read
   down. The verb column is wide enough for the longest label, so the claims line
   up whatever the verbs are. */
.fact {
  display: grid;
  grid-template-columns: var(--fact-verb-col) minmax(0, 1fr) auto;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  align-items: baseline;
  font-size: var(--step-3);
  line-height: 1.5;
}

/* "Open question" is the longest of the nine labels. Measured rather than
   guessed at: ch is the width of a zero, which understates a proportional
   face by about a quarter. */
.fact-list { --fact-verb-col: 96px; }

.fact-verb {
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--text-muted);
}
/* The two verbs a reader acts on first: what not to retry, and what is unknown. */
.fact-verb[data-verb="ruled_out"] { color: var(--danger); }
.fact-verb[data-verb="open_question"],
.fact-verb[data-verb="decided"] { color: var(--accent); }

.fact-statement { grid-column: 2; overflow-wrap: anywhere; color: var(--text); min-width: 0; }

/* Under the claim it annotates rather than floating off to the right, where it
   read as a separate column of unrelated text. */
.fact-links {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--step-1);
  color: var(--text-faint);
}

.fact-answer { grid-column: 3; grid-row: 1; justify-self: end; }

/* Narrow: a 96px label column costs more than the alignment is worth. */
@media (max-width: 560px) {
  .fact { grid-template-columns: minmax(0, 1fr); }
  .fact-statement, .fact-links, .fact-answer { grid-column: 1; grid-row: auto; }
  .fact-answer { justify-self: start; }
}

.link-button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: var(--step-1);
  color: var(--accent);
  cursor: pointer;
}
.link-button:hover { text-decoration: underline; }

/* Scroll containment ------------------------------------------------------ */

/* Wide screens only. Scrolling the whole document meant losing the masthead and
   the Topic list to read a timeline — on a 52-Session Topic you lose your place
   entirely and have to scroll back up to switch Topic. Below the layout
   breakpoint the two columns are already stacked, and a phone wants the document
   to scroll normally, so none of this applies there. */
@media (min-width: 861px) {
  html, body { height: 100%; }

  body {
    display: flex;
    flex-direction: column;
    overflow: hidden;   /* the document itself never scrolls; its panes do */
  }

  .masthead, .banner { flex: 0 0 auto; }

  .layout {
    flex: 1 1 auto;
    /* min-height:0 is what actually lets a flex child shrink below its content
       and become scrollable; without it the panes grow and the page scrolls
       again, which is the bug this rule exists to fix. */
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
  }

  .panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  /* Topics: the heading and New button stay put, the list scrolls, and
     "Load more" stays reachable at the foot rather than being scrolled to. */
  .panel-head,
  .panel-topics .form,
  #load-more-topics,
  #topics-empty { flex: 0 0 auto; }

  .topic-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  /* Stream: the find bar is always available, and the pane below it scrolls. */
  .find { flex: 0 0 auto; }

  #stream,
  #findings,
  #workspace-view,
  .placeholder {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  /* Which Topic you are reading should not scroll away from you. Sticky rather
     than fixed so it participates in the pane's own layout.
     The spacing below the head moves from margin into padding: a margin sits
     outside the sticky box, so content would scroll visibly through the gap
     between the border and the first card. Same total spacing, all of it inside
     the box the background covers. */
  .stream-head,
  .findings-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
    margin-bottom: 0;
  }

  .stream-head { padding-bottom: var(--space-5); }
  .findings-head { padding-bottom: var(--space-3); }

  .placeholder { min-height: 0; }
}

/* Narrow ----------------------------------------------------------------- */

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; padding: var(--space-4); }
  .banner { padding: var(--space-3) var(--space-4); }
  .stream-head { flex-direction: column; }
  .stream-actions { width: 100%; }
  .stream-actions .btn { flex: 1; }
}

/* Sign-in ------------------------------------------------------------------ */

/* Centred in the space under the masthead, a little above the middle, which
   reads as centred. Signed out, the masthead drops the workspace crumb. */
.signin {
  display: grid;
  place-items: center;
  min-height: calc(100dvh - 140px);
  padding: var(--space-6) var(--space-5);
}
.is-signed-out .crumb-sep { display: none; }

.signin .panel { width: min(100%, 400px); }
.signin h2 { margin: 0 0 var(--space-2); font-size: var(--step-3); }

.signin-card {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5) var(--space-5);
  text-align: center;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.06);
}
.signin-mark { width: 44px; height: 38px; margin-bottom: var(--space-1); color: var(--text); }
/* A title here, not a panel label: sentence case and the body colour. */
.signin .signin-card h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--text);
}
.signin-lede {
  margin: 0 0 var(--space-2);
  max-width: 32ch;
  font-size: var(--step-3);
  line-height: 1.55;
  color: var(--text-muted);
}
.btn-block {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--step-3);
  font-weight: 600;
  text-align: center;
}
.signin-note {
  width: 100%;
  margin: var(--space-3) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-faint);
}

/* Access ------------------------------------------------------------------- */

.access h3 { margin: 0 0 var(--space-2); font-size: var(--step-2); }

.access-list { list-style: none; margin: 0 0 var(--space-2); padding: 0; }

.access-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--step-1);
}

.access-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.access-role { color: var(--text-muted); }

.share-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.share-row input { flex: 1 1 220px; width: auto; min-width: 0; }
.share-row select { flex: 0 0 auto; width: auto; }


/* Workspace ---------------------------------------------------------------- */

.workspace-switch { width: auto; max-width: 16rem; }

/* Phones: keep the masthead one row. Who you are moves out of the bar (Settings
   shows it), and the workspace name shortens before anything wraps. */
@media (max-width: 640px) {
  #deployment { display: none; }
  .workspace-switch { min-width: 0; max-width: 7rem; text-overflow: ellipsis; }
}


.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* One category shows at a time under its own page title, so a section needs
   neither a box nor a heading of its own. The h3 stays for aria-labelledby. */
#workspace-view .ws-section {
  background: none;
  border: 0;
  padding: 0;
  margin: var(--space-3) 0 0;
  max-width: 640px;
}
.ws-section > h3 { display: none; }

.subhead {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--text-muted);
}

/* A token about to expire is about to break an agent. */
.access-role[data-soon="true"] { color: var(--danger); }
#revoked-list .access-name { color: var(--text-faint); }

/* Confirmation ------------------------------------------------------------ */

.confirm {
  width: min(100% - 2 * var(--space-4), 420px);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}
.confirm::backdrop { background: rgb(0 0 0 / 0.4); }
.confirm h2 { margin: 0 0 var(--space-2); font-size: var(--step-4); }
.confirm p { margin: 0; color: var(--text-muted); font-size: var(--step-2); line-height: 1.5; }
.confirm .form-actions { justify-content: flex-end; }

.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--surface); }
.btn-danger:hover:not(:disabled) { filter: brightness(1.08); }

/* Settings' sidebar ------------------------------------------------------- */

.topics-nav { display: contents; }

.settings-back {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: var(--step-2);
  color: var(--text-muted);
  text-decoration: none;
}
.settings-back:hover { color: var(--text); }

.settings-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }

.settings-links a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
  font-size: var(--step-3);
}
.settings-links a:hover { background: var(--surface-sunken); }
.settings-links a[aria-current="page"] {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.member-role-select { width: auto; }

.team-list { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.team-item { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.team-head { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.team-members { margin: var(--space-1) 0; }
.team-add { margin-top: var(--space-1); }

.secret {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}
/* The secret itself (a token) on its own line; code inside sentences stays inline. */
.secret > code { display: block; overflow-wrap: anywhere; font-size: var(--step-1); }

.topic-state { margin: var(--space-1) 0 0; font-size: var(--step-1); color: var(--text-muted); }

/* A short form: sized to its content, not stretched to fill the pane. A grid
   container told to grow spreads its rows across the extra height. */
#new-workspace-form { flex: 0 0 auto; align-content: start; max-width: 480px; }
#new-workspace-form h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--step-3);
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
}

/* Connect an agent, like the docs: a tab per agent and one box showing the
   chosen agent's setup. The panels share one grid cell, so switching never
   moves the page; the setups are similar lengths, so the box stays snug. */
.connect-tabs { margin-top: var(--space-2); }
.connect-tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.connect-tabs > label {
  display: inline-block;
  margin: 0 var(--space-1) var(--space-2) 0;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--step-1);
  font-weight: 500;
  cursor: pointer;
}
.connect-tabs > label:hover { color: var(--text); }
.connect-tabs > input:checked + label { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.connect-tabs > input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.connect-box {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.connect-panels { display: grid; }
.connect-panel { grid-area: 1 / 1; visibility: hidden; min-width: 0; }
#connect-claude:checked ~ .connect-box [data-agent="claude"],
#connect-codex:checked ~ .connect-box [data-agent="codex"],
#connect-vscode:checked ~ .connect-box [data-agent="vscode"],
#connect-other:checked ~ .connect-box [data-agent="other"] { visibility: visible; }
.connect-panel p { margin: 0 0 var(--space-2); font-size: var(--step-1); color: var(--text-muted); }
.connect-panel p code { font-family: var(--mono); font-size: 0.95em; }
.connect-panel pre {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  overflow-x: auto;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-family: var(--mono);
  font-size: var(--step-1);
  line-height: 1.55;
}
.connect-actions { display: flex; justify-content: flex-end; margin-top: var(--space-2); }
.connect-actions .btn { min-width: 7.5em; }