.library {
  max-width: 1320px;
  margin: 40px auto;
  padding: 0 28px 50px;
}
.library h1 {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}
.library .intro {
  max-width: 76ch;
  color: #526078;
  font-size: 17px;
}
.library-tools {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 22px;
  margin: 28px 0 14px;
}
.library-layout {
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr);
  gap: 35px;
}
#families {
  align-self: start;
  position: sticky;
  top: 20px;
  display: grid;
  gap: 5px;
}
#families button {
  text-align: left;
  background: transparent;
  border-color: transparent;
}
#families button[aria-pressed="true"] {
  background: #e9edf8;
  color: #334589;
  border-left: 3px solid #4358a8;
}
.family-section {
  margin-bottom: 38px;
}
.family-section h2 {
  font-size: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #4358a8;
}
.archetype-row {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  padding: 18px 0;
  border-bottom: 1px solid #dbe1eb;
}
.archetype-row h3 {
  font-size: 17px;
  margin: 0 0 5px;
}
.archetype-row h3 a {
  text-decoration: none;
}
.archetype-row h3 a:hover {
  text-decoration: underline;
}
.archetype-row p {
  margin: 4px 0;
  max-width: 68ch;
}
.archetype-row small {
  color: #68768b;
}
/* The card's badge is the row's own "Run" — a link into the archetype page's
   run panel, never a label that only looks like a button. */
.availability {
  flex-shrink: 0;
  align-self: start;
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid #cbd3df;
  border-radius: 4px;
  color: #526078;
  text-decoration: none;
  white-space: nowrap;
}
a.availability:hover, a.availability:focus-visible {
  filter: brightness(0.94);
  text-decoration: underline;
  outline-offset: 2px;
}
.availability.sample-runnable {
  color: #196953;
  background: #eef8f3;
  border-color: #b4d8ca;
}
.library-note {
  border-top: 1px solid #cbd3df;
  padding-top: 22px;
  color: #68768b;
  max-width: 90ch;
}
.capability {
  background: #eef1f8;
  border-left: 3px solid #4358a8;
  padding: 15px 18px;
  max-width: 100ch;
}
.workflow-context {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 18px;
  padding: 18px 0;
}
.workflow-context p {
  grid-column: 1 / -1;
  color: #526078;
  margin-top: 0;
}
#sample-links {
  display: flex;
  gap: 20px;
  align-items: end;
  padding-bottom: 10px;
  flex-wrap: wrap;
}
.workflow-layout {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 40px;
  margin: 20px 0 40px;
}
#workflow-steps {
  display: flex;
  flex-direction: column;
}
#workflow-steps button {
  text-align: left;
}
#workflow-steps button small {
  display: block;
  color: #68768b;
  margin-bottom: 4px;
}
#workflow-steps button[aria-current="true"] {
  border-color: #4358a8;
  background: #eef1fa;
}
#workflow-steps svg {
  height: 24px;
}
#workflow-steps path {
  fill: none;
  stroke: #9baac2;
  stroke-width: 2;
}
.workflow-detail {
  background: white;
  border: 1px solid #cbd3df;
  border-radius: 6px;
  padding: 25px;
  align-self: start;
}
.workflow-detail p {
  max-width: 75ch;
}
.workflow-detail li {
  margin-bottom: 10px;
}
.workflow-scope {
  border-top: 1px solid #cbd3df;
  padding-top: 20px;
  max-width: 85ch;
}
.workflow-scope label {
  margin: 16px 0;
}
.sample-console {
  background: white;
  border: 1px solid #cbd3df;
  padding: 25px;
  margin-top: 25px;
}
.sample-console label {
  max-width: 400px;
  margin-bottom: 16px;
}
.sample-console table {
  width: 100%;
  border-collapse: collapse;
}
.sample-console th,
.sample-console td {
  padding: 14px;
  text-align: left;
  border-bottom: 1px solid #dbe1eb;
}
.sample-app[data-side="source"] .workspace-header {
  background: #54333c;
}
.sample-app[data-side="target"] .workspace-header {
  background: #203c58;
}
.sample-app[data-side="source"] h1 {
  font-family: Georgia, serif;
  letter-spacing: -0.015em;
}
[hidden] {
  display: none !important;
}
@media (max-width: 760px) {
  .library {
    padding: 0 16px 30px;
    margin-top: 25px;
  }
  .library-layout,
  .workflow-layout,
  .library-tools,
  .workflow-context {
    grid-template-columns: 1fr;
  }
  #families {
    position: static;
    display: flex;
    overflow: auto;
  }
  #families button {
    min-width: 180px;
  }
  .archetype-row {
    flex-direction: column;
    gap: 10px;
  }
  .workflow-layout {
    gap: 20px;
  }
  .workspace-header {
    flex-wrap: wrap;
  }
  .workflow-context p {
    grid-column: auto;
  }
}

/* --- The run panel (testing-workflow.html) -------------------------------- */
/* One section, four shapes; the same frame whichever kind the launch API
   returns, so a pipeline row and a blueprint row read as the same page. */
.run-panel { margin-top: 1.5rem; padding: 1.25rem 1.5rem; border: 1px solid #cbd3df; border-radius: 12px; background: #fbfcfe; scroll-margin-top: 1rem; }
/* Arriving via a card's badge (#run): the panel is what they came for. */
.run-panel:target { border-color: #4358a8; box-shadow: 0 0 0 3px #dfe4f5; }
.run-panel h2 { margin-top: 0; }
/* migration.css lays .intro out as a two-column grid for the workspace's
   hero; inside these sections it is a paragraph. */
.run-panel .intro, .profile .intro { display: block; max-width: 90ch; }
.run-controls { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: end; margin: 1rem 0; }
.run-controls label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.run-controls select, .run-controls input { min-width: 12rem; }
.run-controls button { padding: 0.5rem 1rem; }
#run-log { max-height: 14rem; overflow: auto; font-size: 0.78rem; background: #f4f4f8; padding: 0.75rem; border-radius: 8px; white-space: pre-wrap; }
#run-needs li { margin: 0.35rem 0; max-width: 90ch; }
.hint { color: #68768b; font-size: 0.9rem; max-width: 90ch; }
.hint code { font-size: 0.85em; }

/* --- Per-step assurance and the profile ----------------------------------- */
.step-assurance { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 1rem 0; font-size: 0.92rem; }
.step-assurance dt { color: #526078; font-weight: 600; }
.step-assurance dd { margin: 0; }
.ref { display: inline-block; font-size: 0.82rem; color: #526078; margin-right: 0.75rem; }
.ref a { color: #2f4a9c; }
.profile { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #cbd3df; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; }
.profile-grid h3 { margin: 1.25rem 0 0.4rem; font-size: 0.95rem; color: #1d2947; }
.profile-grid ul { margin: 0; padding-left: 1.2rem; }
.profile-grid li { margin: 0.3rem 0; max-width: 60ch; }
.standards li a { color: #2f4a9c; }
@media (max-width: 900px) {
  .profile-grid { grid-template-columns: 1fr; }
  .step-assurance { grid-template-columns: 1fr; }
}

/* --- Library badges -------------------------------------------------------- */
.availability.pipeline { color: #2f4a9c; background: #eef1f8; border-color: #b9c4e6; }
.availability.performance-lane { color: #7a4d10; background: #fdf5e8; border-color: #e6cfa6; }
.availability.snapshot-runner { color: #196953; background: #eef8f3; border-color: #b4d8ca; }
.archetype-row .badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.archetype-row .badge { font-size: 10.5px; padding: 2px 6px; border-radius: 3px; background: #f0f2f7; color: #526078; border: 1px solid #dde3ee; }

/* ---- Recorded runs a visitor can load (the showcase) --------------------- */
.recorded-runs { margin: 1.5rem 0; padding: 1.1rem 1.4rem 1.3rem; border: 2px solid #4358a8; border-radius: 12px; background: linear-gradient(180deg, #eef1fb, #fbfcfe); }
.recorded-runs h2 { margin: 0 0 0.25rem; }
.recorded-runs .intro { font-size: 15px; margin: 0 0 0.9rem; }
.recorded-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0.9rem; }
.recorded-card { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.9rem 1rem; border: 1px solid #cbd3df; border-radius: 10px; background: #fff; color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.recorded-card:hover, .recorded-card:focus-visible { border-color: #4358a8; box-shadow: 0 0 0 3px #dfe4f5; }
.recorded-card.own { border-color: #4358a8; }
.recorded-card small { color: #526078; }
.recorded-badges { display: flex; gap: 0.35rem; min-height: 1.2rem; }
.recorded-badges .badge.own { background: #4358a8; color: #fff; }
.recorded-badges .badge.featured { background: #fdf3e1; color: #8a5a10; }
.recorded-cta { margin-top: auto; font-weight: 600; color: #4358a8; }

/* ---- Run inputs: greenfield or brownfield, saved and loaded ------------- */
.run-inputs { border: 1px solid #cbd3df; border-radius: 10px; padding: 0.8rem 1rem 1rem; margin: 1rem 0 0.5rem; background: #fff; }
.run-inputs legend { font-weight: 600; padding: 0 0.35rem; }
.mode-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0.6rem; }
.mode-choice label { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.6rem 0.75rem; border: 1px solid #cbd3df; border-radius: 8px; cursor: pointer; }
.mode-choice label:has(input:checked) { border-color: #4358a8; box-shadow: 0 0 0 2px #dfe4f5; }
.mode-choice span { display: flex; flex-direction: column; gap: 0.15rem; }
.mode-choice small { color: #526078; }
.brownfield-inputs { display: grid; gap: 0.55rem; margin: 0.25rem 0 0.75rem; padding: 0.75rem; border-radius: 8px; background: #f4f6fb; }
.brownfield-inputs[hidden] { display: none; }
.brownfield-inputs .wide { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.brownfield-inputs .hint { margin: 0; }
.doc-source { display: grid; grid-template-columns: auto 11rem minmax(0, 1fr); align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.doc-source small { color: #526078; font-size: 0.72rem; }
.doc-source input[type="text"], .doc-source input:not([type]) { min-width: 0; }
.doc-source input:disabled { opacity: 0.5; }
.saved-inputs { display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; align-items: end; padding-top: 0.75rem; border-top: 1px dashed #cbd3df; }
.saved-inputs label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.saved-inputs select, .saved-inputs input { min-width: 14rem; }
.run-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0.75rem 0; }
.run-actions button { padding: 0.55rem 1.1rem; }
@media (max-width: 640px) { .doc-source { grid-template-columns: auto 1fr; } .doc-source input:not([type="checkbox"]) { grid-column: 1 / -1; } }
.recorded-badges .badge { font-size: 10.5px; padding: 2px 7px; border-radius: 3px; font-weight: 600; }
.mode-choice input[type="radio"], .doc-source input[type="checkbox"] { width: auto; min-width: 0; height: auto; margin: 0.2rem 0 0; flex: 0 0 auto; }
.mode-choice label { flex-direction: row; }