/* The demo organizer. Presentation only, and deliberately thin: the tokens,
 * the card, the chip and the button all come from portal/portal.css, which is
 * the site's visual language. Anything here that could have been a portal
 * class instead is a bug. */

.d-head { padding: 30px 0 6px; }
.d-head h1 { font-size: 26px; margin: 0 0 6px; letter-spacing: -0.02em; font-weight: 650; }
.d-head .lede { color: var(--muted); font-size: 15px; margin: 0 0 10px; max-width: 62ch; }
.d-head .where {
  display: inline-block; margin: 0 0 22px; padding: 8px 12px;
  background: var(--accent-sf); color: var(--accent);
  border-radius: 8px; font-size: 13.5px; font-weight: 550;
}
.d-head .where code {
  font: 600 12.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(255,255,255,0.65); padding: 1px 5px; border-radius: 4px;
}

/* One card per demo. The status chip sits on the title line so a reader
 * scanning the page reads state before blurb. */
.demo { padding: 20px 22px; }
.demo .t { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
.demo .t h2 { font-size: 17px; margin: 0; font-weight: 650; letter-spacing: -0.01em; }
.demo .blurb { color: var(--muted); font-size: 14.5px; margin: 0 0 14px; max-width: 74ch; }
.demo .blurb code { font: 500 13px ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Every way in, as buttons rather than a paragraph of links: a presenter on a
 * call is aiming at a target, not reading. */
.ways { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 4px; }
.ways .btn { text-decoration: none; display: inline-flex; align-items: center; }
.ways .none { color: var(--muted); font-size: 13.5px; padding: 8px 0; }

.state { color: var(--muted); font-size: 13px; margin: 12px 0 0; }

/* The presenter recipe, folded away. It is four screens of detail that only
 * matters in the ten minutes before a call, and open by default it would push
 * every other demo off the page. */
.recipe { margin: 16px 0 0; border-top: 1px solid var(--line-soft); padding-top: 4px; }
.recipe > summary {
  cursor: pointer; list-style: none; padding: 10px 0 4px;
  font-size: 14px; font-weight: 600; color: var(--accent);
}
.recipe > summary::-webkit-details-marker { display: none; }
.recipe > summary::before { content: "\25B8 "; display: inline-block; width: 1em; }
.recipe[open] > summary::before { content: "\25BE "; }
.recipe h3 { font-size: 14.5px; margin: 20px 0 6px; font-weight: 650; }
.recipe p, .recipe li { font-size: 14px; color: var(--fg); max-width: 74ch; }
.recipe p { margin: 0 0 10px; }
.recipe ul { margin: 0 0 10px; padding-left: 20px; }
.recipe li { margin: 0 0 6px; }
.recipe code { font: 500 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
.recipe pre {
  background: var(--tile); border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 12px 14px; overflow-x: auto;
  font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.recipe .tldr {
  background: var(--warn-sf); border-left: 3px solid var(--warn);
  border-radius: 0 8px 8px 0; padding: 12px 16px; margin: 6px 0 14px;
}
.recipe .tldr p { margin: 0; }
.recipe table.list th { white-space: nowrap; }
.recipe table.list td.y { color: var(--ok); font-weight: 600; }
.recipe table.list td.n { color: var(--muted); }

.d-foot {
  margin: 34px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 13px;
}

/* The two links out of the head: the map, and the site they both describe. */
.d-head .ways { margin: 0 0 24px; }