/* The Opal Workflow Builder on the platform. Google Sans as on opalclinical.com, white ground, ink and one cobalt
   for what Opal does. The hospital's own words are the loudest thing on the page. */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/google_sans_latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/google_sans_latin_ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #ffffff;
  --ink: #17191d;
  --graphite: #454b57;
  --quiet: #6b7079;
  --rule: #e6e7eb;
  --wash: #f6f7f9;
  --cobalt: #2455f5;
  --cobalt-deep: #1a3fb8;
  --cobalt-wash: #edf2ff;
  --held: #1d7a4c;
  --amber: #8a5300;
  --amber-wash: #fdf3e3;
  --stop: #b4261a;
  color-scheme: light;
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.45; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

/* ---- the bar ---------------------------------------------------------------------------------------------- */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: 64px; padding: 0 max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px));
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
}
.bar.scrolled { border-bottom-color: var(--rule); }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; font-size: 15px; }
.mark svg { width: 22px; height: 22px; }
.links { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.links a, .links button { color: var(--graphite); text-decoration: none; background: none; border: 0; padding: 4px 0; }
.links a:hover, .links button:hover, .links a[aria-current="page"] { color: var(--ink); }
.links .who { color: var(--quiet); }

/* Opal's own people see the test platform's top bar here instead, from shell.css. The engineer view strip there
   lines up with this page's column. Sticky parts of the page sit under whichever bar shows (--bar-h). */
:root { --viewing-width: 1116px; --viewing-gutter: 32px; }

/* ---- the page and its type -------------------------------------------------------------------------------- */
.page { max-width: 1180px; margin: 0 auto; padding: 40px 32px 120px; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.012em; }
h1 { font-size: 44px; line-height: 1.08; letter-spacing: -0.026em; max-width: 18ch; }
h2 { font-size: 27px; line-height: 1.2; letter-spacing: -0.018em; }
h3 { font-size: 19px; line-height: 1.32; }
h4 { font-size: 15px; line-height: 1.4; font-weight: 500; }
p { margin: 0; }
.lede { font-size: 19px; line-height: 1.55; color: var(--graphite); max-width: 60ch; margin-top: 16px; }
.quiet { color: var(--quiet); }
.small { font-size: 14px; line-height: 1.5; }
.num { font-variant-numeric: tabular-nums; }
.gap { margin-top: 40px; }
.gap-s { margin-top: 16px; }
.gap-l { margin-top: 72px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.spread { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }

/* ---- controls --------------------------------------------------------------------------------------------- */
.go {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 999px; border: 0;
  background: var(--ink); color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.go:hover:not(:disabled) { background: #000; }
.go.cobalt { background: var(--cobalt); }
.go.cobalt:hover:not(:disabled) { background: var(--cobalt-deep); }
.soft {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--rule); background: #fff; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.soft:hover:not(:disabled) { border-color: #c9ccd3; }
.soft.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.plain { background: none; border: 0; padding: 0; color: var(--graphite); font-size: 14px; text-decoration: underline;
  text-decoration-color: var(--rule); text-underline-offset: 4px; }
.plain:hover:not(:disabled) { color: var(--ink); text-decoration-color: currentColor; }
.plain.stop { color: var(--stop); }
.switch { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--wash); gap: 2px; }
.switch button { border: 0; background: none; padding: 8px 16px; border-radius: 999px; font-size: 14px; color: var(--graphite); }
.switch button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(23, 25, 29, 0.08); }

label.field { display: block; }
label.field > span { display: block; font-size: 14px; color: var(--graphite); margin-bottom: 6px; }
input[type="text"], input[type="password"], input[type="number"], select, textarea {
  width: 100%; border: 1px solid var(--rule); border-radius: 12px; background: #fff; padding: 11px 14px; font-size: 16px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); }
textarea { resize: vertical; line-height: 1.55; }
textarea.words { font-size: 19px; line-height: 1.6; padding: 20px 22px; border-radius: 18px; min-height: 220px; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink); margin: 2px 0 0; flex: none; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }

.error { color: var(--stop); font-size: 15px; margin-top: 12px; }
.notice { border-radius: 14px; background: var(--wash); padding: 14px 18px; font-size: 15px; color: var(--graphite); }

/* ---- the opening: four ways in, the least work first ------------------------------------------------------- */
.space-row { margin-bottom: 28px; }
.back { display: inline-block; margin-bottom: 24px; font-size: 14px; color: var(--graphite); text-decoration: underline;
  text-decoration-color: var(--rule); text-underline-offset: 4px; }
.back:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ---- the front door: her words, Opal's questions, then the workflow Opal would run ----------------------------- */
.front { max-width: 760px; }
.front-wide { max-width: 980px; }
.front h1 { max-width: 20ch; text-wrap: balance; }
.front .lede { text-wrap: pretty; }
.front-box { margin-top: 32px; }
.front-box textarea.words { min-height: 190px; }
.front-note { margin-top: 10px; }
.front-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.front-try-label { font-size: 14px; color: var(--quiet); margin-right: 4px; }
.front .front-try .pick { padding: 7px 14px; font-size: 14px; color: var(--graphite); }
.front .front-try .pick:hover { color: var(--ink); }
.front .front-try .pick[aria-pressed="true"] { color: #fff; }
.front-go { margin-top: 22px; }
.front-pickup { margin-top: 22px; font-size: 15px; }
.front-pickup a, .front-more a { color: var(--graphite); text-decoration: underline; text-decoration-color: var(--rule);
  text-underline-offset: 4px; }
.front-pickup a { color: var(--cobalt); text-decoration-color: currentColor; }
.front-pickup a:hover, .front-more a:hover { color: var(--ink); text-decoration-color: currentColor; }
.front-more { margin-top: 40px; font-size: 15px; }
.said { padding: 18px 22px 20px; border-radius: 18px; background: var(--wash); }
.said-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.said-label { font-size: 13px; font-weight: 500; color: var(--quiet); }
.said-text { margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--graphite); display: -webkit-box;
  -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.said-answers { display: grid; gap: 4px; margin: 12px 0 0; padding: 12px 0 0; list-style: none; border-top: 1px solid var(--rule);
  font-size: 15px; }
.front-step { margin-top: 44px; font-size: 14px; color: var(--quiet); }
.front-q { margin-top: 8px; font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.front-found { margin-top: 44px; }
.front .picks { margin-top: 24px; }
.front .pick { padding: 11px 18px; font-size: 16px; }
.front-own { margin-top: 14px; max-width: 520px; }
.front-cards { display: grid; gap: 0; margin: 24px 0 0; padding: 0; list-style: none; }
.front-card { display: grid; gap: 16px; padding: 28px 0 32px; border-top: 1px solid var(--rule); }
.front-card:last-child { border-bottom: 1px solid var(--rule); }
.front-card h3 { font-size: 24px; letter-spacing: -0.016em; }
.front-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.front-card .c-summary { font-size: 17px; line-height: 1.5; color: var(--graphite); max-width: 68ch; }
.front-card .front-go { margin-top: 4px; }
.front-outside { margin-top: 28px; }
.front-outside .does, .front-keeps .does { margin-top: 6px; }
.front-keeps .does li { font-size: 15px; color: var(--graphite); }
.space-pick { width: auto; min-width: 220px; max-width: 100%; padding: 7px 12px; font-size: 14px; }
.opening { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 980px; }
.opening h1 { max-width: 22ch; text-wrap: balance; }
.opening .lede { text-wrap: pretty; }
.compose { margin-top: 40px; max-width: 860px; }
.compose.wide { max-width: none; }
.compose .row { margin-top: 16px; }
.compose .title { max-width: 380px; }
.way-lede { font-size: 17px; line-height: 1.55; color: var(--graphite); max-width: 62ch; margin-bottom: 20px; }
.way-lede + .gap-s { margin-top: 0; }

.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 36px; max-width: 860px; }
.way, .lib-card { border: 1px solid var(--rule); border-radius: 18px; background: #fff; text-align: left; color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.way:hover, .lib-card:hover { border-color: #c9ccd3; }
.way[aria-pressed="true"], .lib-card[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.way { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.w-name { font-size: 16px; font-weight: 500; line-height: 1.3; }
.w-line { font-size: 14px; line-height: 1.45; color: var(--graphite); }

/* Opal's library: each workflow as a card, and the one picked tailored below. */
.library { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px; }
.library li { display: flex; min-width: 0; }
.lib-card { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 18px 16px; min-width: 0; }
.lib-card .wf-icon { margin-bottom: 6px; }
.l-title { font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.l-summary { font-size: 14px; line-height: 1.5; color: var(--graphite); margin-bottom: 6px; }
.l-tag { margin-top: auto; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; line-height: 1.4; }
.l-tag.here { background: var(--cobalt-wash); color: var(--cobalt-deep); }
.l-tag.team { background: var(--wash); color: var(--graphite); }
.compose.wide .ready-form, .team-note { max-width: 860px; margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--rule); }
.team-note { display: grid; gap: 8px; }
.team-note .row { margin-top: 12px; }

/* Your policies: dropped or chosen files, each read into words on the platform. */
.drop { display: grid; justify-items: center; gap: 6px; padding: 36px 24px 30px; border: 1.5px dashed #c9ccd3; border-radius: 20px;
  background: var(--wash); text-align: center; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.drop:hover, .drop.over { border-color: var(--cobalt); background: var(--cobalt-wash); }
.d-mark { position: relative; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 1px var(--rule); }
.d-mark::before { content: ""; position: absolute; left: 21px; top: 14px; width: 2px; height: 17px; border-radius: 1px; background: var(--cobalt); }
.d-mark::after { content: ""; position: absolute; left: 17px; top: 15px; width: 8px; height: 8px; border-left: 2px solid var(--cobalt);
  border-top: 2px solid var(--cobalt); transform: rotate(45deg); }
.d-main { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.d-sub { font-size: 14px; color: var(--graphite); max-width: 46ch; text-wrap: balance; }
.d-pick { margin-top: 10px; }
.files { list-style: none; margin: 14px 0 0; padding: 0; }
.files:empty { display: none; }
.file { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0;
  border-bottom: 1px solid var(--rule); }
.file:first-child { border-top: 1px solid var(--rule); }
.f-doc { position: relative; justify-self: center; width: 17px; height: 21px; color: var(--quiet); border: 1.5px solid currentColor;
  border-radius: 3px 6px 3px 3px; }
.f-doc::before { content: ""; position: absolute; left: 3px; right: 3px; top: 5px; height: 1.5px; background: currentColor;
  box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor; }
.file.ready .f-doc { color: var(--cobalt); }
.file.failed .f-doc { color: var(--stop); }
.file.reading .f-doc { animation: pulse 1.3s ease-in-out infinite; }
.f-text { display: grid; gap: 2px; min-width: 0; }
.f-name { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.error-inline { color: var(--stop); }
details.paste { margin-top: 20px; }
details.paste summary { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-size: 15px;
  color: var(--graphite); }
details.paste summary::-webkit-details-marker { display: none; }
details.paste summary::before { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.15s ease; }
details.paste:not([open]) summary::before { margin-top: 0; transform: rotate(-45deg); }
details.paste summary:hover { color: var(--ink); }
details.paste textarea.words { min-height: 160px; }

/* With Opal's team: a request for Opal's healthcare technologists. */
.team-form { display: grid; gap: 22px; max-width: 680px; }
.team-form h3 { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--graphite); }
.team-form .picks { margin-top: 8px; }
.team-form .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.team-form .row { margin-top: 2px; }
.asked { margin-top: 48px; max-width: 680px; }
.asked ul { list-style: none; margin: 14px 0 0; padding: 0; }
.asked li { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--rule); }
.asked li:last-child { border-bottom: 1px solid var(--rule); }
.a-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.a-meta p { min-width: 0; }

/* Opal at work: what it has heard so far. */
.working { margin-top: 28px; padding: 18px 22px; border-radius: 18px; background: var(--cobalt-wash); max-width: 760px; }
.working ol { margin: 12px 0 0; padding: 0; list-style: none; }
.working li { font-size: 17px; padding: 6px 0; color: var(--ink); }
.working .pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cobalt);
  margin-right: 10px; animation: pulse 1.3s ease-in-out infinite; vertical-align: middle; }
@keyframes pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* ---- the hospital's words, quoted ------------------------------------------------------------------------- */
/* The opening mark hangs in the margin, so the words line up with the text around them. */
.q { position: relative; font-size: 18px; line-height: 1.5; color: var(--ink); margin: 0; cursor: default; }
.q::before { content: "\201C"; position: absolute; left: -0.46em; color: var(--cobalt); }
.q::after { content: "\201D"; color: var(--cobalt); }
.q + .q { margin-top: 10px; }
.q.small { font-size: 15px; color: var(--graphite); }
.q.shortened::after { content: "\2026\201D"; }

/* ---- what Opal found -------------------------------------------------------------------------------------- */
.found { margin-top: 72px; max-width: 980px; scroll-margin-top: 88px; }
.found > p { margin-top: 8px; }
.candidates { list-style: none; margin: 28px 0 0; padding: 0; }
.candidate { display: grid; gap: 18px; padding: 34px 0; border-top: 1px solid var(--rule); }
.candidate:last-child { border-bottom: 1px solid var(--rule); }
.candidate .head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.candidate .head h3 { font-size: 24px; letter-spacing: -0.016em; }
.candidate h4 { color: var(--quiet); font-weight: 400; margin-bottom: 8px; }
.candidate .c-summary { font-size: 17px; line-height: 1.5; color: var(--graphite); max-width: 68ch; margin-top: -6px; }
.candidate .c-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; margin-top: 4px; }
.does { margin: 0; padding: 0; list-style: none; }
/* A line that wraps lines up under its first word, past the dot. */
.does li { padding: 4px 0 4px 18px; text-indent: -18px; font-size: 16px; }
.does li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cobalt);
  margin: 0 12px 2px 0; vertical-align: middle; }
.keeps li::before { background: var(--quiet); }
.candidate .act { margin-top: 2px; }

/* Where she is on the way from her words to a live workflow. */
.journey { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; list-style: none; margin: 0 0 26px; padding: 0;
  font-size: 14px; color: var(--quiet); }
.journey li { display: inline-flex; align-items: center; gap: 8px; }
.journey li + li::before { content: ""; width: 28px; height: 1px; background: var(--rule); margin: 0 12px; }
.journey .n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--rule); font-size: 12px; font-variant-numeric: tabular-nums; }
.journey li.done { color: var(--graphite); }
.journey li.done .n { border-color: transparent; background: #e7f4ec; color: var(--held); }
.journey li.now { color: var(--ink); font-weight: 500; }
.journey li.now .n { border-color: var(--ink); background: var(--ink); color: #fff; }

/* A workflow Opal found, drawn as a small map: her words, Opal, then what Opal does. */
.flow { display: grid; grid-template-columns: minmax(170px, 232px) 44px auto 44px minmax(0, 1fr); align-items: center;
  padding: 22px; border-radius: 20px; background-color: #f4f4f6;
  background-image: radial-gradient(circle, #d3d3d9 1px, transparent 1.3px); background-size: 22px 22px;
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  color: #1d1d1f; -webkit-font-smoothing: antialiased; }
.f-node { display: grid; gap: 5px; align-content: start; padding: 10px 13px 11px; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 18px rgba(0, 0, 0, 0.06); }
.f-says { padding: 8px 11px; font-size: 14px; font-weight: 500; line-height: 1.36; background: #f2f2f7; border-radius: 14px 14px 14px 5px; }
.f-opal { justify-items: center; gap: 6px; padding: 14px 18px 12px; border-radius: 20px; }
.f-opal .m-brand { width: 40px; height: 40px; }
.f-name { font-size: 13.5px; font-weight: 600; }
.f-arrow { position: relative; height: 1.6px; margin: 0 8px; background: #c4c4cb; }
.f-arrow::after { content: ""; position: absolute; right: 0; top: -3.6px; width: 7px; height: 7px; border-top: 1.6px solid #b9b9c0;
  border-right: 1.6px solid #b9b9c0; transform: rotate(45deg); }
.f-steps { display: grid; gap: 12px; }
.f-lane { display: grid; gap: 6px; }
.f-lane-name { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #8e8e93; }
.f-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.f-line { font-size: 13.5px; font-weight: 600; line-height: 1.32; }
.basis { font-size: 14px; color: var(--quiet); }
.basis.suggested { color: var(--amber); }
.basis.policy { color: var(--cobalt); }

/* ---- each workflow's icon: a line icon in a soft tile of its own color ---------------------------------------- */
.wf-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; flex: none;
  background: var(--icon-bg, var(--wash)); color: var(--icon-ink, var(--ink)); }
.wf-icon svg { width: 22px; height: 22px; }
.wf-icon.small { width: 32px; height: 32px; border-radius: 9px; }
.wf-icon.small svg { width: 18px; height: 18px; }
.t-fall { --icon-ink: #8a5300; --icon-bg: #fdf1de; }
.t-lab, .t-page { --icon-ink: #2455f5; --icon-bg: #edf2ff; }
.t-pulse, .t-drop, .t-heart { --icon-ink: #c0392b; --icon-bg: #fdeceb; }
.t-seizure { --icon-ink: #6a3fd0; --icon-bg: #f1ecfd; }
.t-person, .t-call { --icon-ink: #1d7a4c; --icon-bg: #e5f4ec; }
.t-chart { --icon-ink: #0f6f69; --icon-bg: #e3f4f2; }
.t-handoff, .t-opal { --icon-ink: #17191d; --icon-bg: #f0f1f3; }

/* ---- the list of workflows -------------------------------------------------------------------------------- */
.yours { margin-top: 72px; max-width: 980px; }
.yours ul { list-style: none; margin: 16px 0 0; padding: 0; }
.yours li a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 24px; align-items: center;
  padding: 18px 0; border-top: 1px solid var(--rule); text-decoration: none; }
.yours li:last-child a { border-bottom: 1px solid var(--rule); }
.yours li a:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.stage { font-size: 14px; color: var(--graphite); }
.stage.live { color: var(--held); }
.stage.live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--held);
  margin-right: 8px; vertical-align: 1px; }
.stage.broke { color: var(--stop); }

/* ---- one workflow ----------------------------------------------------------------------------------------- */
.wf-head { display: grid; gap: 14px; }
.wf-head .says { font-size: 20px; color: var(--graphite); }
.wf-head .says strong { color: var(--ink); font-weight: 500; }
.back { font-size: 14px; color: var(--quiet); text-decoration: none; }
.back:hover { color: var(--ink); }
.steps-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 28px; padding-bottom: 0; border-bottom: 1px solid var(--rule); }
.steps-nav a { position: relative; padding: 10px 14px 14px; font-size: 15px; color: var(--quiet); text-decoration: none; }
.steps-nav a .n { font-variant-numeric: tabular-nums; margin-right: 8px; }
.steps-nav a.done { color: var(--graphite); }
.steps-nav a.done .n { color: var(--held); }
.steps-nav a[aria-current="page"] { color: var(--ink); }
.steps-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px;
  background: var(--ink); }
.steps-nav .try-link { margin-left: auto; }

.two { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 56px; margin-top: 40px; align-items: start; }

/* The steps as cards: what Opal does in plain words, with the hospital system each one uses, joined top to bottom.
   A tap opens a card to show what Opal says, where it came from and the ways to change it. */
.cards { display: grid; }
.card { display: grid; gap: 10px; min-width: 0; padding: 18px 22px 20px; border: 1px solid var(--rule); border-radius: 18px;
  background: #fff; box-shadow: 0 1px 2px rgba(23, 25, 29, 0.04), 0 8px 24px rgba(23, 25, 29, 0.05); scroll-margin-top: 96px; }
.card.open { border-color: #c9ccd3; }
.card.when { grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: 14px; border-color: transparent;
  background: var(--wash); box-shadow: none; }
.card.when .m-brand { display: block; width: 44px; height: 44px; }
.card.when .m-brand svg { display: block; width: 100%; height: 100%; }
.card.when .m-eyebrow { font-size: 11px; letter-spacing: 0.08em; }
.when-text { margin-top: 4px; font-size: 18px; line-height: 1.4; color: var(--graphite); }
.when-text strong { color: var(--ink); font-weight: 500; }
.card.focus { border-color: var(--cobalt); }
.card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.card-top .m-eyebrow { font-size: 11px; letter-spacing: 0.08em; }
.card-top .uses { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--wash); font-size: 12.5px;
  color: var(--graphite); }
.card-title { font-size: inherit; }
.card-head { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 0; border: 0; background: none;
  text-align: left; color: var(--ink); font-size: 17px; font-weight: 500; line-height: 1.45; }
.card-head::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 1.5px solid var(--quiet);
  border-bottom: 1.5px solid var(--quiet); transform: translateY(-3px) rotate(45deg); flex: none; }
.card.open .card-head::after { transform: translateY(1px) rotate(-135deg); }
.card-head:hover { color: #000; }
.card .says-line { font-size: 15px; color: var(--graphite); }
.card .says-line b { color: var(--ink); font-weight: 500; }
.card .today { font-size: 14px; color: var(--quiet); }
.card .q { cursor: pointer; }
.step-tools { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.join { position: relative; display: flex; align-items: center; justify-content: center; min-height: 34px; }
.join::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; background: #d9dade; }
.join.open { padding: 10px 0; }
.join.open::before { display: none; }
.join-add { position: relative; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid var(--rule);
  background: #fff; color: var(--quiet); font-size: 15px; line-height: 22px; }
.join-add:hover { border-color: var(--ink); color: var(--ink); }
.add-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px;
  background: var(--wash); }
.add-picker select { width: auto; }
.card-add { display: flex; justify-content: center; margin-top: 18px; }
.add-pill { padding: 10px 18px; border-radius: 999px; border: 1px dashed #c9ccd3; background: #fff; font-size: 14px;
  color: var(--graphite); }
.add-pill:hover { border-color: var(--ink); color: var(--ink); }
.soft.big { padding: 12px 22px; font-size: 15px; }

/* A hospital's own page for a workflow: its cards, then what Opal connects to beside them. */
.unit-title { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px;
  margin-top: 14px; }
.unit-sub { margin-top: 10px; font-size: 17px; color: var(--graphite); }
.unit-actions { gap: 10px; }
.unit-sent { margin-top: 14px; font-size: 14px; color: var(--held); }
.send-panel { display: grid; gap: 14px; max-width: 760px; margin-top: 22px; padding: 20px 22px; border-radius: 18px;
  background: var(--wash); }
.send-panel .pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.send-lede { font-size: 16px; line-height: 1.5; }
.unit-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; margin-top: 40px; align-items: start; }
.unit-main { max-width: 680px; min-width: 0; }
.unit-main .block { margin-top: 48px; }
.unit-main .qa textarea { min-height: 0; height: 48px; }
.unit-note { margin-top: 28px; font-size: 14px; line-height: 1.55; color: var(--quiet); }
.unit-side { display: grid; gap: 16px; position: sticky; top: calc(var(--bar-h, 64px) + 20px); }
.side-panel { padding: 20px 22px; border-radius: 18px; background: var(--wash); }
.side-panel h3 { margin-bottom: 12px; font-size: 15px; }
.how { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.how li { display: grid; gap: 2px; }
.how b { font-size: 15px; font-weight: 500; }
.how span { font-size: 14px; line-height: 1.45; color: var(--graphite); }
.unit-stage { display: inline-block; margin-right: 10px; padding: 2px 9px; border-radius: 999px; font-size: 13px; font-weight: 500;
  vertical-align: 2px; background: var(--wash); color: var(--graphite); border: 1px solid var(--rule); }
.unit-stage.live { background: #e7f6ec; color: #1e8e4a; border-color: #cdebd8; }
.side-label { font-size: 13px; color: var(--quiet); margin-bottom: 4px; }
.side-text { font-size: 15px; line-height: 1.5; margin-bottom: 14px; }
.side-text:last-child { margin-bottom: 0; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; letter-spacing: 0; }
.tag.suggested { background: var(--amber-wash); color: var(--amber); }
.accept-all { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin: 4px 0 8px; padding: 14px 16px 14px 18px; border-radius: 16px; background: var(--amber-wash); }
.accept-all p { flex: 1; min-width: 220px; color: var(--ink); }
.next-block .row { gap: 18px; }
details.more-tests summary { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  font-size: 15px; color: var(--graphite); }
details.more-tests summary::-webkit-details-marker { display: none; }
details.more-tests summary::before { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
details.more-tests:not([open]) summary::before { margin-top: 0; transform: rotate(-45deg); }
details.more-tests summary:hover { color: var(--ink); }
details.more-tests[open] summary { margin-bottom: 14px; }
.editor { display: grid; gap: 14px; padding: 18px; border-radius: 16px; background: var(--wash); }
.editor .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* The hospital's text, with each quote Opal used marked where it sits. */
.source { position: sticky; top: calc(var(--bar-h, 64px) + 20px); max-height: calc(100vh - var(--bar-h, 64px) - 44px); overflow: auto; padding: 4px 4px 24px 0; }
.source h3 { margin-bottom: 4px; }
.source .text { white-space: pre-wrap; font-size: 15px; line-height: 1.65; color: var(--graphite); margin-top: 18px;
  overflow-wrap: anywhere; }
.source mark { background: var(--cobalt-wash); color: var(--ink); border-radius: 3px; padding: 1px 0;
  box-shadow: inset 0 -2px 0 rgba(36, 85, 245, 0.35); cursor: pointer; }
.source mark.keep { background: var(--amber-wash); box-shadow: inset 0 -2px 0 rgba(138, 83, 0, 0.3); cursor: default; }
.source mark.on { background: #d9e3ff; box-shadow: inset 0 -2px 0 var(--cobalt); }
.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--quiet); margin-top: 8px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--cobalt-wash);
  box-shadow: inset 0 -2px 0 rgba(36, 85, 245, 0.35); margin-right: 6px; vertical-align: -1px; }
.legend i.keep { background: var(--amber-wash); box-shadow: inset 0 -2px 0 rgba(138, 83, 0, 0.3); }

.block { margin-top: 56px; }
.block > h2 { margin-bottom: 6px; }
.block > p.quiet { margin-bottom: 18px; }
.qa { display: grid; gap: 12px; padding: 20px 0; border-top: 1px solid var(--rule); }
.qa .answer { color: var(--held); }
.keep-list { list-style: none; margin: 0; padding: 0; }
.keep-list li { padding: 14px 0; border-top: 1px solid var(--rule); display: grid; gap: 6px; }

/* What is left before approval. */
ul.ready { list-style: none; margin: 0; padding: 0; }
ul.ready li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 8px; padding: 12px 0; border-top: 1px solid var(--rule); }
ul.ready li:first-child { border-top: 0; }
ul.ready .mk { font-size: 17px; line-height: 1.4; color: var(--quiet); }
ul.ready li.ok .mk { color: var(--held); }
ul.ready .t { font-weight: 500; }
ul.ready .d { grid-column: 2; font-size: 14px; color: var(--graphite); }

/* ---- the proof -------------------------------------------------------------------------------------------- */
.verdict { font-size: 56px; line-height: 1.04; letter-spacing: -0.03em; font-weight: 500; font-variant-numeric: tabular-nums; }
.verdict.short { color: var(--stop); }
table.kinds { width: 100%; border-collapse: collapse; margin-top: 32px; }
table.kinds th, table.kinds td { text-align: left; vertical-align: top; padding: 16px 16px 16px 0; border-top: 1px solid var(--rule); }
table.kinds th { font-weight: 500; font-size: 17px; width: 26%; }
table.kinds td.about { color: var(--graphite); font-size: 15px; }
table.kinds td.count { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 17px; padding-right: 0; }
table.kinds td.count.short { color: var(--stop); }
.examples { list-style: none; margin: 0; padding: 0; }
.examples li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.examples .k { color: var(--quiet); }
.examples .bad { color: var(--stop); grid-column: 2; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: grid; grid-template-columns: 26px 220px minmax(0, 1fr); gap: 4px 8px; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.checks .mk { color: var(--held); }
.checks li.no .mk { color: var(--stop); }
.checks .d { color: var(--graphite); }
.fine { font-size: 13px; color: var(--quiet); margin-top: 20px; }

/* ---- approval and going live ------------------------------------------------------------------------------ */
.sign { display: grid; gap: 16px; max-width: 520px; }
.sign .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.signed { font-size: 22px; line-height: 1.4; max-width: 34ch; }
.livebox { display: grid; gap: 14px; }
.livebox .on { color: var(--held); font-size: 22px; }

/* ---- trying it as the nurse ------------------------------------------------------------------------------- */
.try { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; margin-top: 40px; align-items: start; }
.who-line { font-size: 17px; color: var(--graphite); }
.turns { list-style: none; margin: 20px 0 0; padding: 0; }
.turns li { padding: 16px 0; border-top: 1px solid var(--rule); display: grid; gap: 6px; }
.turns .nurse { font-size: 18px; font-weight: 500; }
.turns .nurse .tag { font-weight: 400; color: var(--amber); font-size: 14px; margin-left: 8px; }
.turns .opal { color: var(--graphite); }
.turns .why { font-size: 14px; }
.turns .why.allow { color: var(--held); }
.turns .why.deny { color: var(--stop); }
.turns .why.ask { color: var(--amber); }
.turns .at { font-size: 13px; color: var(--quiet); font-variant-numeric: tabular-nums; }
.say { display: grid; gap: 12px; margin-top: 22px; }
.say .row { gap: 10px; }
.say .wait { width: auto; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; }
.people { display: grid; gap: 6px; }
.timeline { list-style: none; margin: 14px 0 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 76px 120px minmax(0, 1fr); gap: 2px 12px; padding: 9px 0; font-size: 14px;
  border-top: 1px solid var(--rule); }
.timeline .c { font-variant-numeric: tabular-nums; color: var(--quiet); }
.timeline .w { color: var(--graphite); }
.timeline li.nurse .what { font-weight: 500; }
.timeline li.later { color: var(--quiet); }
.timeline li.later .w, .timeline li.later .what { color: var(--quiet); }
.timeline .divider { display: block; padding: 14px 0 6px; font-size: 13px; color: var(--amber); border-top: 0; }
.draftnote { margin-top: 28px; padding: 18px 20px; border-radius: 16px; background: var(--wash); font-size: 15px; color: var(--graphite); }
.draftnote h4 { color: var(--ink); margin-bottom: 6px; }

/* ---- setup and demo links --------------------------------------------------------------------------------- */
.setup { max-width: 760px; }
.roles { list-style: none; margin: 0; padding: 0; }
.roles li { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 10px; padding: 10px 0; align-items: center; }
.systems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
/* What a demo link's guest reads under Your hospital: each person Opal reaches and how. */
.reach-read { list-style: none; margin: 0; padding: 0; }
.reach-read li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 12px 0; border-top: 1px solid var(--rule); }
.reach-read li:last-child { border-bottom: 1px solid var(--rule); }
.reach-read .r-name { font-weight: 500; }
.reach-read .r-how { font-size: 14px; color: var(--graphite); }
.invites { list-style: none; margin: 0; padding: 0; }
.invites li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; padding: 16px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.invites li .row { gap: 16px; }
.linkbox { display: grid; gap: 10px; padding: 18px 20px; border-radius: 16px; background: var(--cobalt-wash); }
.linkbox code { font-family: inherit; font-size: 14px; overflow-wrap: anywhere; color: var(--ink); }

/* ---- questions before suggestions, reads and redrafts ----------------------------------------------------- */
.found.ask .lede { margin-top: 10px; }
.asks { list-style: none; margin: 28px 0 0; padding: 0; counter-reset: ask; max-width: 860px; }
.ask-q { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px 10px; padding: 26px 0; border-top: 1px solid var(--rule);
  counter-increment: ask; }
.ask-q::before { content: counter(ask); grid-row: 1 / span 3; font-size: 21px; line-height: 1.32; color: var(--quiet);
  font-variant-numeric: tabular-nums; }
.ask-q > * { grid-column: 2; }
.ask-q:last-child { border-bottom: 1px solid var(--rule); }
.ask-q h3 { font-size: 21px; letter-spacing: -0.014em; }
.ask-q input { max-width: 560px; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--rule); background: #fff; font-size: 15px; color: var(--ink); }
.pick:hover { border-color: #c9ccd3; }
.pick[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.pick[aria-pressed="true"]::before { content: "\2713"; margin-right: 8px; }
.ask-go { margin-top: 26px; }
ul.items { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
ul.items li { padding: 4px 11px; border-radius: 999px; background: var(--wash); font-size: 14px; color: var(--graphite); }
.item-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin-top: 6px; }
div.field > .label { display: block; font-size: 14px; color: var(--graphite); }
.redraft { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 4px 0 8px; padding: 16px 18px;
  border-radius: 16px; background: var(--cobalt-wash); }
.redraft p { font-size: 16px; }
.view-row { margin-top: 28px; }

/* ---- the map: the workflow drawn the way it runs at the bedside ------------------------------------------- */
/* The builder's own canvas, as on its design page: a dotted ground, white cards and colored labels in place of icons. */
html { overflow-x: clip; }
.mapwrap {
  --m-text: #1d1d1f; --m-text2: #6e6e73; --m-text3: #8e8e93; --m-fill: #f2f2f7; --m-blue: #0071e3; --m-link: #0066cc;
  position: relative; margin: 20px calc(50% - 50vw) 0; color: var(--m-text); scroll-margin-top: 64px;
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.mapwrap button { font: inherit; color: inherit; }
.mapwrap :focus-visible { outline: 3px solid rgba(0, 113, 227, 0.45); outline-offset: 2px; border-radius: 6px; }
.m-shell { display: grid; grid-template-columns: minmax(0, 1fr); background: #f4f4f6; }
.m-shell.logged { grid-template-columns: minmax(0, 1fr) 360px;
  background: linear-gradient(to right, #f4f4f6 calc(100% - 361px), #e5e5ea calc(100% - 361px), #e5e5ea calc(100% - 360px), #fff calc(100% - 360px)); }
.page.mapped { padding-bottom: 0; }
.m-canvas { position: relative; min-width: 0; padding-bottom: 8px; background-color: #f4f4f6;
  background-image: radial-gradient(circle, #d3d3d9 1px, transparent 1.3px); background-size: 22px 22px; }
.m-fit { position: relative; width: 100%; overflow-x: clip; }
.m-stage { position: relative; width: 100%; min-width: 1000px; max-width: 1120px; margin: 0 auto; padding: 18px 40px 26px; transform-origin: 0 0; }
.m-wires { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.m-stage > :not(.m-wires) { position: relative; z-index: 1; }
.m-stage > .m-tools { position: absolute; top: 18px; left: 24px; z-index: 3; }
.m-lane { margin-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--m-text3); }
.m-lane.center { text-align: center; }
.m-ctx-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 42px; }
.m-main { display: grid; grid-template-columns: 270px 232px 340px; justify-content: space-between; align-items: center; }
.m-col { display: flex; flex-direction: column; gap: 10px; }
.m-col-opal { align-items: center; }
.m-col-people .m-lane { align-self: flex-start; margin-bottom: 0; padding: 2px 6px; margin-left: -6px; background: #f4f4f6; border-radius: 6px; }
.m-then-wrap { margin-top: 34px; }
.m-then-wrap > .m-lane { width: max-content; margin: 0 auto 10px; padding: 2px 6px; background: #f4f4f6; border-radius: 6px; }
.m-then-row { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 44px; }

.m-node { position: relative; background: #fff; border-radius: 16px; outline: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 18px rgba(0, 0, 0, 0.06); transition: box-shadow 0.2s; }
.m-node[role="button"] { cursor: pointer; }
.m-node[role="button"]:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.06), 0 10px 28px rgba(0, 0, 0, 0.09); }
.m-node:focus-visible { box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.45), 0 6px 18px rgba(0, 0, 0, 0.06); }
.m-title { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--m-text); }
.m-sub { font-size: 12px; line-height: 1.42; color: var(--m-text2); }
.m-sub.today-text { color: #8a5a00; }
.m-sub.quiet { color: var(--m-text3); }
.m-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; }
.m-meta { font-size: 11.5px; color: var(--m-text3); white-space: nowrap; }
.m-eyebrow { font-size: 10.5px; font-weight: 700; line-height: 1.2; letter-spacing: 0.07em; text-transform: uppercase; color: var(--m-text3); }
.ink-teal { color: #0b7a86; } .ink-blue { color: #0063d1; } .ink-red { color: #d70015; } .ink-pink { color: #c9184a; }
.ink-orange { color: #c25100; } .ink-green { color: #248a3d; } .ink-indigo { color: #4b44c9; } .ink-gray { color: #6e6e73; }
.ink-off { color: #aeaeb2; }
.m-dot { display: inline-block; width: 8px; height: 8px; flex: none; background: #d1d1d6; border-radius: 50%; }
.m-dot.ok { background: #30c55a; } .m-dot.warn { background: #ff9f0a; } .m-dot.bad { background: #ff3b30; }

.m-nurse { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.m-bubble { padding: 10px 13px; font-size: 14px; font-weight: 500; line-height: 1.36; color: var(--m-text); background: #f2f2f7; border-radius: 18px 18px 18px 6px; }
.m-bubble.quiet { font-weight: 400; color: var(--m-text3); }
.m-bubble.prompt { color: #0a3d80; background: #fff; box-shadow: inset 0 0 0 1.5px #0a84ff; }
.m-say-lab { display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; color: #0a84ff; }
.m-press { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 13px; font-weight: 600; color: #fff; background: #1d1d1f; border-radius: 12px; }
.m-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.m-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; font-size: 11.5px; font-weight: 500; color: #3a3a3c; background: #f2f2f7; border-radius: 999px; }

.m-opal { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 232px; padding: 18px 16px 16px; text-align: center; border-radius: 26px; }
.m-mark { position: relative; width: 62px; height: 62px; margin-bottom: 4px; }
.m-brand { position: relative; z-index: 1; display: inline-flex; width: 62px; height: 62px; }
.m-brand svg { display: block; width: 100%; height: 100%; }
.m-halo { position: absolute; inset: -9px; border-radius: 26px; background: conic-gradient(from 180deg, #64d2ff, #0a84ff, #bf5af2, #ff375f, #ff9f0a, #64d2ff);
  filter: blur(13px); opacity: 0.42; }
.m-mark.live .m-halo { opacity: 0.78; animation: m-halo 6s linear infinite; }
.m-mark.flash .m-brand { animation: m-pop 0.55s ease-out; }
.m-opal.dim .m-halo { opacity: 0.1; }
.m-opal .m-title { font-size: 15px; }
.m-guard { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 11.5px; font-weight: 600; border-radius: 999px; }
.m-guard.allow { color: #1a7f37; background: #e7f8ec; }
.m-guard.deny { color: #a35200; background: #fff1e0; }
.m-guard.ask { color: #0a5bb5; background: #e8f1fc; }
.m-reply { margin-top: 2px; padding: 10px 12px; font-size: 13px; font-weight: 500; line-height: 1.38; color: #fff; text-align: left;
  background: linear-gradient(180deg, #1a8cff, #0071e3); border-radius: 18px 18px 6px 18px; }

.m-person { display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 12px 14px 13px; }
.m-person .m-title { font-size: 15px; }
.m-read .m-title { font-size: 14px; }
.m-read .m-chips { margin-top: 6px; }
.m-person .m-st { align-self: flex-start; margin-top: 5px; }
.m-person.st-ok { box-shadow: 0 0 0 1.5px rgba(48, 197, 90, 0.65), 0 6px 18px rgba(0, 0, 0, 0.06); }
.m-st { flex: none; padding: 4px 9px; font-size: 11px; font-weight: 600; white-space: nowrap; border-radius: 999px; }
.m-st.wait { color: #8e8e93; background: #f2f2f7; }
.m-st.prog::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; vertical-align: 1px; background: currentColor;
  border-radius: 50%; animation: m-blink 1s ease-in-out infinite; }
.m-st.prog { color: #0a5bb5; background: #e8f1fc; }
.m-st.ok2 { color: #0e6f80; background: #e3f6f9; }
.m-st.ok { color: #1a7f37; background: #e7f8ec; }
.m-st.bad { color: #c4001a; background: #ffeceb; }

.m-then { display: flex; flex-direction: column; gap: 5px; width: 240px; padding: 12px 14px 14px; }
.m-clock { margin-top: 4px; font: 300 32px/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.m-clock.idle { color: #c7c7cc; }
.m-clock.stopped { color: var(--m-text2); }
.m-cadence { margin-top: 4px; font: 500 20px/1.15 -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.01em; }
.m-stepper { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.m-stepper-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #8e8e93; transition: color 0.3s; }
.m-stepper-dot { width: 8px; height: 8px; flex: none; background: #e5e5ea; border-radius: 50%; transition: background 0.3s, box-shadow 0.3s; }
.m-stepper-row.on { color: var(--m-text); }
.m-stepper-row.on .m-stepper-dot { background: #5e5ce6; }
.m-stepper-row.now { font-weight: 600; }
.m-stepper-row.now .m-stepper-dot { box-shadow: 0 0 0 4px rgba(94, 92, 230, 0.2); }
.m-ticks { display: flex; flex-wrap: wrap; gap: 5px; }
.m-tick { width: 18px; height: 6px; background: #e5e5ea; border-radius: 3px; transition: background 0.3s; }
.m-tick.on { background: #ff2d55; }
.m-mini { padding: 7px 10px; font-size: 12px; color: #8a1030; background: #fff0f3; border-radius: 12px 12px 12px 4px; }

.m-ctx { display: flex; flex-direction: column; align-items: stretch; gap: 5px; min-width: 168px; padding: 10px 14px 11px; border-radius: 14px; }
.m-ctx-val { font-size: 13px; font-weight: 500; color: var(--m-text); white-space: nowrap; }
.m-ctx.off { background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); }
.m-ctx.off .m-ctx-val { color: #aeaeb2; }
.m-ctx:not(.used):not(.off) { opacity: 0.72; }
.m-ctx.lit { box-shadow: 0 0 0 1.5px rgba(10, 132, 255, 0.5), 0 6px 18px rgba(10, 132, 255, 0.14); }

.m-cite { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; margin-top: 5px; padding: 2px 7px; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.01em; color: #636366; background: #f2f2f7; border: 0; border-radius: 6px; }
.m-top .m-cite { margin-top: 0; }
button.m-cite.pol:hover { color: #0a5bb5; background: #e8f1fc; }
.m-cite.sugg { color: #a35200; background: #fff4e5; }
.m-cite.added { color: #8e8e93; }
.m-cite.tiny { margin: 0; }
.m-node.flash { animation: m-flash 0.9s ease-out; }

.m-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 16px; font-size: 12.5px; font-weight: 600;
  color: #636366; background: rgba(255, 255, 255, 0.6); border: 1.5px dashed #c7c7cc; border-radius: 12px; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.m-add:hover:not(:disabled) { color: #0a84ff; background: #fff; border-color: #0a84ff; }
.m-add-wrap { position: relative; display: flex; align-items: center; }
.m-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 10; width: 300px; padding: 6px; background: #fff; border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 18px 50px rgba(0, 0, 0, 0.18); }
.m-pop-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 10px 11px; text-align: left; background: none; border: 0; border-radius: 10px; }
.m-pop-item:hover { background: var(--m-fill); }
.m-empty { padding: 12px; font-size: 12px; color: var(--m-text3); background: rgba(255, 255, 255, 0.7); border-radius: 12px; }

.m-w { fill: none; stroke: #c4c4cb; stroke-width: 1.6; }
.m-w.ctx { stroke: #cdcdd4; stroke-dasharray: 3 5; }
.m-w.ctx.lit { stroke: #8ab8f5; stroke-dasharray: none; }
.m-w.done { stroke: #30c55a; }
.m-w.act { stroke: #0a84ff; stroke-width: 2.2; stroke-dasharray: 7 7; animation: m-wflow 0.7s linear infinite; }
.today .m-w { opacity: 0.5; stroke-dasharray: 2 6; }

.m-seg { display: inline-flex; max-width: 100%; padding: 2px; background: rgba(118, 118, 128, 0.14); border-radius: 9px; }
.m-seg button { flex: 1 1 auto; padding: 5px 12px; font-size: 12px; font-weight: 500; color: var(--m-text); white-space: nowrap; background: transparent; border: 0; border-radius: 7px; }
.m-seg button[aria-pressed="true"] { font-weight: 600; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.05); }
.m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 6px 15px; font-size: 13px; font-weight: 500;
  line-height: 1.2; white-space: nowrap; border: 0; border-radius: 999px; transition: background 0.15s, opacity 0.15s; }
.m-btn.small { min-height: 30px; padding: 5px 14px; }
.m-btn.primary { color: #fff; background: var(--m-blue); }
.m-btn.primary:hover { background: #0077ed; }
.m-btn.dark { color: #fff; background: #1d1d1f; }
.m-btn.dark:hover { background: #3a3a3c; }
.m-btn.gray { color: var(--m-text); background: #e8e8ed; }
.m-btn.gray:hover { background: #dedee3; }
.m-btn.plain { padding: 6px 10px; color: var(--m-link); background: transparent; }
.m-btn.plain:hover { background: #f0f5fc; }
.m-btn.plain.bold { font-weight: 600; }
.m-btn:disabled { opacity: 0.38; cursor: default; pointer-events: none; }
.m-rb-play { min-width: 74px; }
.m-spacer { flex: 1; }

/* The proof bar stays at the bottom of the screen while the map is in view. */
.m-runbar { position: sticky; bottom: 0; z-index: 5; background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px); border-top: 1px solid rgba(0, 0, 0, 0.08); padding-bottom: env(safe-area-inset-bottom); }
.m-rb-row { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 14px; }
.m-rb-status { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 10px; font-size: 12.5px; font-weight: 600; text-align: left;
  background: none; border: 0; border-radius: 10px; }
.m-rb-status:hover:not(:disabled) { background: rgba(0, 0, 0, 0.04); }
.m-rb-status:disabled { cursor: default; opacity: 1; }
.m-rb-status.bad { color: #c4001a; }
.m-rb-clock { margin-left: 6px; font: 600 15px/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums; }
.m-rb-turn { font-size: 12px; color: var(--m-text3); }
.m-rb-done { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #1a7f37; }
.m-rb-note { font-size: 12px; color: var(--m-text3); }
.m-rb-result { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; font-weight: 500; }
.m-rb-result.bad { color: #c4001a; }
.m-rb-log { max-height: 34vh; overflow-y: auto; padding: 2px 14px 12px; border-top: 1px solid #f0f0f2; }

/* The log of each turn, beside the map while it plays. */
.m-log { position: sticky; top: var(--bar-h, 64px); align-self: start; max-height: calc(100vh - var(--bar-h, 64px) - 53px); overflow-y: auto; background: #fff; }
.m-log-head { padding: 16px 18px 14px; border-bottom: 1px solid #f0f0f2; }
.m-log-head h2 { font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.m-log-head p { margin-top: 2px; font-size: 12px; color: var(--m-text3); }
.m-log-body { padding: 6px 18px 28px; }
.m-hint { padding: 12px 0; font-size: 11.5px; line-height: 1.42; color: var(--m-text3); }
.m-tb { padding: 8px 0; border-bottom: 1px solid #f2f2f4; }
.m-tb:last-child { border-bottom: 0; }
.m-tb-head { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 18px; align-items: baseline; gap: 10px; }
.m-log .m-tb-head { grid-template-columns: 18px minmax(0, 1fr) 18px; }
.m-log .m-tb-check { grid-column: 2; grid-row: 2; text-align: left; }
.m-log .m-tb-mark { grid-column: 3; grid-row: 1; }
.m-tb-n { font-size: 11px; font-weight: 700; color: var(--m-text3); text-align: right; }
.m-tb-say { font-size: 13px; font-weight: 600; }
.m-tb-note { font-weight: 400; color: var(--m-text2); }
.m-tb-check { font-size: 11.5px; color: var(--m-text3); text-align: right; }
.m-tb-mark { display: inline-flex; }
.m-tb-problems { margin: 4px 0 0 32px; font-size: 11px; line-height: 1.4; color: #c4001a; }
.m-ev { display: grid; grid-template-columns: 22px 60px 66px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 2px 0; font-size: 12px; color: var(--m-text2); }
.m-log .m-ev { grid-template-columns: 10px 56px 58px minmax(0, 1fr); }
.m-log .m-ev .m-cite { grid-column: 4; justify-self: start; }
.m-ev::before { content: ""; }
.m-ev.now::before { width: 6px; height: 6px; justify-self: end; align-self: center; background: #0a84ff; border-radius: 50%; }
.m-ev-t { font-variant-numeric: tabular-nums; color: var(--m-text3); }
.m-ev-who { font-weight: 600; color: #3a3a3c; }
.m-ev-what { overflow-wrap: anywhere; }
.m-ev.now { color: var(--m-text); }
.m-ev.now .m-ev-what { font-weight: 500; }

@keyframes m-halo { to { transform: rotate(360deg); } }
@keyframes m-pop { 0% { transform: scale(1); } 35% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes m-flash { 0% { box-shadow: 0 0 0 0 rgba(10, 132, 255, 0.5), 0 6px 18px rgba(0, 0, 0, 0.06); } 100% { box-shadow: 0 0 0 16px rgba(10, 132, 255, 0), 0 6px 18px rgba(0, 0, 0, 0.06); } }
@keyframes m-wflow { to { stroke-dashoffset: -14; } }
@keyframes m-blink { 50% { opacity: 0.25; } }

/* Narrow screens: the map stacks from what Opal reads down to what follows. */
@media (max-width: 860px) {
  .m-stage { min-width: 0; padding: 16px max(16px, env(safe-area-inset-right)) 28px max(16px, env(safe-area-inset-left)); }
  .m-stage > .m-tools { position: relative; top: auto; left: auto; display: flex; justify-content: center; margin-bottom: 16px; }
  .m-ctx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 0; }
  .m-ctx { min-width: 0; }
  .m-ctx-val { white-space: normal; }
  .m-main { display: flex; flex-direction: column; align-items: stretch; }
  .m-main > .m-col, .m-then-wrap { position: relative; margin-top: 0; padding-top: 30px; }
  .m-main > .m-col::before, .m-then-wrap::before { content: ""; position: absolute; top: 6px; left: 50%; width: 2px; height: 18px; margin-left: -1px;
    background: #c4c4cb; border-radius: 1px; }
  .m-opal { width: 100%; }
  .m-then-row { flex-direction: column; align-items: stretch; gap: 30px; }
  .m-then-row > .m-node + .m-node::before, .m-then-row > .m-node + .m-add-wrap::before { content: ""; position: absolute; top: -24px; left: 50%;
    width: 2px; height: 18px; margin-left: -1px; background: #c4c4cb; border-radius: 1px; }
  .m-then { width: auto; }
  .m-add-wrap { justify-content: center; }
  .m-pop { right: auto; left: 50%; width: min(300px, calc(100vw - 32px)); transform: translateX(-50%); }
  .m-rb-row { flex-wrap: wrap; padding: 6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)); }
  .m-rb-status { flex: 1 1 100%; }
  .m-ev { grid-template-columns: 8px 54px minmax(0, 1fr); }
  .m-ev-who, .m-ev .m-cite { display: none; }
  .m-tb-head { grid-template-columns: 18px minmax(0, 1fr) 18px; }
  .m-tb-check { display: none; }
  .item-picks { grid-template-columns: minmax(0, 1fr); }
  .flow { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .f-opal { justify-self: center; }
  .f-arrow { justify-self: center; width: 1.6px; height: 24px; margin: 6px 0; }
  .f-arrow::after { right: auto; top: auto; left: -3px; bottom: 0; transform: rotate(135deg); }
  .f-cards { grid-template-columns: minmax(0, 1fr); }
  .candidate .c-cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .journey li + li::before { width: 16px; margin: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .mapwrap *, .mapwrap *::before, .mapwrap *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; }
}

/* ---- starting from one of Opal's own workflows -------------------------------------------------------------- */
.ready-form { display: grid; gap: 40px; margin-top: 28px; }
.ready-form .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: end; }
.ready-form .trio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px; gap: 12px 16px; align-items: end; }
.reach { display: grid; gap: 12px; padding: 20px 0 4px; margin-top: 16px; border-top: 1px solid var(--rule); }
.reach h4 .quiet { font-weight: 400; margin-left: 10px; }

/* ---- signing in ------------------------------------------------------------------------------------------- */
.signin { max-width: 420px; margin: 12vh auto 0; display: grid; gap: 18px; }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 20; background: var(--ink); color: #fff;
  padding: 12px 20px; border-radius: 999px; font-size: 15px; max-width: calc(100vw - 32px); }

@media (max-width: 900px) {
  .page { padding: 28px 16px 96px; }
  h1 { font-size: 34px; }
  .verdict { font-size: 42px; }
  .two, .try, .candidate { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .source { position: static; max-height: none; }
  .examples li, .checks li { grid-template-columns: minmax(0, 1fr); }
  .checks li { grid-template-columns: 26px minmax(0, 1fr); }
  .checks .d { grid-column: 2; }
  .timeline li { grid-template-columns: 64px minmax(0, 1fr); }
  .timeline .what { grid-column: 2; }
  .yours li a { grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; }
  .yours li a > :nth-child(n+3) { grid-column: 2; }
  .reach-read li { grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; }
  .reach-read .r-how { grid-column: 2; }
  .roles li { grid-template-columns: minmax(0, 1fr) 120px; }
  .systems, .editor .pair, .sign .pair, .ready-form .pair, .ready-form .trio, .team-form .pair { grid-template-columns: minmax(0, 1fr); }
  .unit-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .unit-side { position: static; }
  .send-panel .pair { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 16px 18px 18px; }
  .card-top .uses { margin-left: 0; }
  .bar { padding: 0 16px; }
  :root { --viewing-gutter: 16px; }
  .links { gap: 14px; }
  .links .who, .links .wide { display: none; }
}
@media (max-width: 560px) {
  .mark span { display: none; }
  /* On a phone the way ahead shows as numbers, with the name of the step she is on. */
  .journey { flex-wrap: nowrap; }
  .journey li + li::before { width: 14px; margin: 0 6px; }
  .journey li:not(.now) > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; }
  .links { gap: 12px; font-size: 13px; }
  /* The four ways in stack on a phone. */
  .ways { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 28px; }
  .front-q { font-size: 24px; }
  .way { padding: 13px 16px 14px; gap: 2px; }
  .drop { padding: 28px 18px 24px; }
  .d-main { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .working .pulse, .file.reading .f-doc { animation: none; opacity: 1; }
  .way, .lib-card, .drop, details.paste summary::before { transition: none; }
}

/* ---- Watch it run, as a tree ------------------------------------------------------------------------------- */
/* As agent tools draw who started whom: hairline cards on a pale ground, a status on each and thin lines between. */
.rtree { --rt-line: #e7e7e9; --rt-ink: #111113; --rt-ink2: #3c3c43; --rt-gray: #8a8a8e; --rt-wire: #b8cff5;
  --rt-blue: #2563eb; --rt-blue-bg: #eaf1ff; --rt-green: #1e8e4a; --rt-green-bg: #e7f6ec; --rt-red: #d4352c; --rt-red-bg: #fdecec;
  position: relative; display: flex; flex-direction: column; min-height: calc(100vh - 280px);
  margin: 20px calc(50% - 50vw) 0; background: #fafafa; border-top: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--rt-ink); font: 13px/1.45 Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; }
.rt-in { flex: 1 0 auto; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 32px 28px; }
.rt-head { display: flex; align-items: center; gap: 14px; min-height: 56px; padding-top: 14px; font-size: 14px; flex-wrap: wrap; }
.rt-title { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; }
.rt-quiet { color: var(--rt-gray); }
/* What the run is, on a line of its own under the title and the counts. */
.rt-made { order: 10; flex-basis: 100%; margin-top: -8px; padding-bottom: 6px; }
.rt-blue { color: var(--rt-blue); }
.rt-done { color: var(--rt-green); }
.rt-miss { color: var(--rt-red); background: var(--rt-red-bg); padding: 2px 8px; border-radius: 6px; font-weight: 500; }
.rt-clock { min-width: 64px; text-align: right; }
.rt-spacer { flex: 1; }
.rt-ring { display: inline-block; width: 15px; height: 15px; border: 2.5px solid currentColor; border-radius: 50%; flex: none; }
.rt-stage { position: relative; min-height: 120px; margin-top: 8px; transition: height 0.35s ease; }
.rt-wires { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rt-wires path { fill: none; stroke: var(--rt-wire); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0 7; }
.rt-wires circle { fill: var(--rt-wire); stroke: none; }
.rtree.flowing .rt-wires path { animation: rt-flow 0.9s linear infinite; }
@keyframes rt-flow { to { stroke-dashoffset: -7; } }
/* On a draft's map the pill names the kind of step in its own color, as the step cards do. */
.rt-pill.kind { background: #f2f2f4; text-transform: uppercase; letter-spacing: 0.04em; font-size: 10.5px; font-weight: 600; }
.rt-pill[hidden], .rt-foot[hidden] { display: none; }
.rt-pill.kind.ink-green { color: #248a3d; background: #e9f6ed; }
.rt-pill.kind.ink-blue { color: #0063d1; background: #e8f1fd; }
.rt-pill.kind.ink-orange { color: #c25100; background: #fdf0e6; }
.rt-pill.kind.ink-pink { color: #c9184a; background: #fcebf0; }
.rt-pill.kind.ink-indigo { color: #4b44c9; background: #eeedfb; }
.rt-pill.kind.ink-gray { color: #6e6e73; background: #f2f2f4; }
.rt-card { position: absolute; left: 0; top: 0; background: #fff; border: 1px solid var(--rt-line); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); padding: 10px 12px 9px; opacity: 0; transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease, left 0.35s ease, top 0.35s ease, width 0.35s ease; }
.rt-card.in { opacity: 1; transform: none; }
.rt-card.off { pointer-events: none; }
.rt-row1 { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 9px; row-gap: 1px; align-items: center; }
.rt-icon { grid-row: span 2; align-self: start; width: 26px; height: 26px; border: 1px solid #ececee; border-radius: 7px;
  display: grid; place-items: center; font-size: 10px; font-weight: 600; color: #48484a; letter-spacing: 0.02em; }
.rt-icon .rt-ring { width: 13px; height: 13px; border-width: 2.4px; color: var(--rt-ink); }
.rt-name { font-size: 13px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-sub { grid-column: 2 / 4; font-size: 11.5px; color: var(--rt-gray); line-height: 1.3; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.rt-pill { justify-self: end; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; padding: 2px 6px;
  border-radius: 6px; white-space: nowrap; background: #f2f2f3; color: var(--rt-gray); }
.rt-pill.run { background: var(--rt-blue-bg); color: var(--rt-blue); }
.rt-pill.ok { background: var(--rt-green-bg); color: var(--rt-green); }
.rt-pill.no { background: var(--rt-red-bg); color: var(--rt-red); }
.rt-spin { width: 9px; height: 9px; border: 1.6px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: rt-spin 0.9s linear infinite; }
@keyframes rt-spin { to { transform: rotate(360deg); } }
.rt-task { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--rt-ink2); }
.rt-said { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--rt-gray); }
.rt-said:empty { display: none; }
.rt-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 11.5px; color: var(--rt-gray); }
.rt-d { display: inline-block; }
.rt-d.roll { animation: rt-roll 0.32s ease; }
@keyframes rt-roll { from { transform: translateY(45%); opacity: 0.25; } to { transform: none; opacity: 1; } }
.rt-bar { position: sticky; bottom: 0; z-index: 5; background: rgba(250, 250, 250, 0.92); -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px); border-top: 1px solid rgba(0, 0, 0, 0.06); padding-bottom: env(safe-area-inset-bottom); }
.rt-bar-in { max-width: 1180px; margin: 0 auto; padding: 10px 32px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rt-btn { font: inherit; font-size: 12.5px; font-weight: 500; color: var(--rt-ink); background: #fff; border: 1px solid var(--rt-line);
  border-radius: 8px; padding: 6px 12px; }
.rt-btn.dark { background: var(--rt-ink); color: #fff; border-color: var(--rt-ink); }
.rt-btn:disabled { opacity: 0.4; }
.rt-turn { margin-left: 6px; font-size: 12px; color: var(--rt-gray); }
@media (max-width: 720px) {
  .rt-in, .rt-bar-in { padding-left: 16px; padding-right: 16px; }
  .rt-head { gap: 10px; font-size: 13px; padding: 8px 0; }
  .rt-back { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rt-card, .rt-stage { transition: none; }
  .rt-spin, .rt-d.roll, .rtree.flowing .rt-wires path { animation: none; }
}