/* GENERATED FILE - do not edit by hand.
   Compiled from resources/scss/prompt-changes.scss by `npm run css`.
   Edit the partials that entry point names, then rebuild and commit both. */
/* The prompt change page, `/prompts/{version}` once a release's change set is
   stored: every prompt the release sent, what moved in them, and where each
   change landed.

   It loads after prompts.css, which gives it the section's frame and head, and
   adds only what is its own. Every class is `pd-` prefixed: the page was drawn
   as a standalone mockup (docs/mockups/prompt-diff) and cc.css owns a set of
   short global class names a port would otherwise collide with.

   Tokens only, from the hearth theme and cc.css. No `padding:` shorthand
   anywhere here: `.pd-page` rides on the `.shell` element, and a shorthand on
   any class that does zeroes the gutter the shell owns. */
/* ── the head, the stepper and the two columns ─────────────────────── */
/* The head is the section's `.phead`, with a sentence for an h1 rather than a
   version number: at the section's 56px display size a twelve-word headline
   is four lines, so it is set smaller here. Three classes deep so it wins on
   specificity over prompts.css and not on which sheet loaded last. */
.prompts .phead.pd-head {
  margin-bottom: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule-2);
}

.prompts .phead.pd-head .lbl {
  color: var(--state);
}

.prompts .phead.pd-head h1 {
  max-width: 30ch;
  margin-bottom: 0;
  font-size: 38px;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.pd-top {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  align-items: flex-end;
  justify-content: space-between;
}

.pd-stepper {
  display: flex;
  flex: none;
  gap: 2px;
}

.pd-step {
  padding-block: 8px;
  padding-inline: 12px;
  border: 1px solid var(--rule-2);
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-2);
}

a.pd-step:hover {
  border-color: var(--sig);
  color: var(--sig);
}

.pd-here {
  border-color: var(--state-edge);
  color: var(--ink);
}

.pd-off {
  color: var(--ink-4);
}

/* One column, the index first, until there is room for it beside the cards. */
.pd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin-top: 28px;
}

.pd-main {
  min-width: 0;
}

.pd-side {
  order: -1;
  min-width: 0;
}

@media (min-width: 1100px) {
  .pd-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
  }
  .pd-side {
    order: 0;
  }
  .pd-sticky {
    position: sticky;
    top: calc(var(--mast-h) + 16px);
    max-height: calc(100vh - var(--mast-h) - 32px);
    overflow-y: auto;
  }
}
@media (max-width: 860px) {
  .prompts .phead.pd-head h1 {
    font-size: 28px;
  }
  .pd-top {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* A section heading with its count beside it. */
.pd-sec {
  margin-top: 48px;
}

.pd-h2 {
  margin-block: 0 14px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pd-h2 span {
  margin-left: 6px;
  padding-block: 1px;
  padding-inline: 7px;
  border: 1px solid var(--rule-2);
  background: var(--raise);
  color: var(--ink);
}

.pd-lede {
  max-width: 75ch;
  margin-block: 0 14px;
  font-family: var(--prose);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

.pd-lede b {
  font-weight: 600;
  color: var(--ink);
}

.pd-none {
  font-family: var(--prose);
  color: var(--ink-3);
}

/* ── one change: its head, its word diff and where it landed ───────── */
.pd-change {
  margin-bottom: 18px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--bg-2);
  scroll-margin-top: calc(var(--mast-h) + 16px);
}

.pd-change:target {
  border-color: var(--state-edge);
  box-shadow: 0 0 0 3px var(--state-wash);
}

.pd-chead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding-block: 14px 10px;
  padding-inline: 18px;
}

.pd-num {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  background: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--bg);
}

.pd-doc {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--state);
}

.pd-chead h3 {
  margin-block: 2px 0;
  font-family: var(--ui);
  font-size: 19px;
  font-weight: var(--head-wt);
  line-height: 1.3;
  color: var(--ink);
}

.pd-summary {
  max-width: 75ch;
  margin-block: 6px 0;
  font-family: var(--prose);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}

.pd-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block: 6px 0;
}

.pd-badge {
  padding-block: 2px;
  padding-inline: 8px;
  border: 1px solid var(--rule-2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
}

.pd-flag {
  border-color: var(--notable);
  color: var(--notable);
}

.pd-delta {
  margin-block: 4px 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-4);
  white-space: nowrap;
}

.pd-plus {
  color: var(--add);
}

.pd-minus {
  color: var(--del);
}

@media (max-width: 620px) {
  .pd-chead {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .pd-delta {
    grid-column: 2;
  }
}
/* The diff itself. A reworded line keeps its unchanged words grey and marks
   only the edit; a long unchanged stretch folds behind a button. */
.pd-diff {
  margin-block: 0 10px;
  margin-inline: 18px;
  padding-block: 10px;
  padding-inline: 14px;
  border-left: 3px solid var(--rule-2);
  background: var(--raise);
}

.pd-variant {
  margin-block: 0 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
}

.pd-line {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 6px;
  margin-block: 0 8px;
  font-family: var(--reading);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.pd-line:last-child {
  margin-bottom: 0;
}

.pd-mark {
  padding-top: 2px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-4);
}

.pd-add .pd-mark {
  color: var(--add);
}

.pd-rem .pd-mark {
  color: var(--del);
}

.pd-diff ins {
  padding-block: 1px;
  background: var(--add-ghost);
  color: var(--add);
  text-decoration: none;
}

.pd-diff del {
  padding-block: 1px;
  background: var(--del-ghost);
  color: var(--del);
  text-decoration: line-through;
  text-decoration-color: var(--del-dim);
}

.pd-fold {
  margin-inline: 3px;
  padding-block: 1px;
  padding-inline: 7px;
  border: 1px dashed var(--rule-2);
  background: var(--raise-2);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  cursor: pointer;
}

.pd-fold:hover {
  border-color: var(--ink-4);
  color: var(--ink);
}

.pd-more summary {
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--sig);
  cursor: pointer;
}

/* The foot: how far it reached, a chip per prompt, the model strings, and the
   two things a reader takes away (the diff and a link). */
.pd-cfoot {
  padding-block: 4px 14px;
  padding-inline: 18px;
}

.pd-landed {
  margin-block: 6px 8px;
  font-family: var(--ui);
  font-size: 14px;
  color: var(--ink-3);
}

.pd-landed b {
  font-weight: 600;
  color: var(--ink);
}

.pd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.pd-chip {
  padding-block: 3px;
  padding-inline: 8px;
  border: 1px solid var(--rule-2);
  background: var(--bg);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}

.pd-chip:hover {
  border-color: var(--sig);
  color: var(--sig);
}

.pd-models {
  margin-top: 8px;
  font-family: var(--ui);
  font-size: 13px;
  color: var(--ink-3);
}

.pd-models summary {
  cursor: pointer;
}

.pd-models p {
  margin-block: 6px 0;
  line-height: 1.9;
}

.pd-models code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
}

.pd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12px;
}

.pd-actions a {
  color: var(--sig);
}

.pd-copy {
  padding-block: 0;
  padding-inline: 0;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--sig);
  cursor: pointer;
}

.pd-copy:hover {
  color: var(--ink);
}

/* ── where each change landed: one row per prompt, one column per change ── */
/* Wrapped so a release with many changes scrolls sideways inside the section
   instead of pushing the page wider than the window. */
.pd-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.pd-matrix {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ui);
  font-size: 14px;
  color: var(--ink-2);
}

.pd-matrix th,
.pd-matrix td {
  padding-block: 6px;
  padding-inline: 8px;
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

.pd-matrix thead th {
  border-bottom-color: var(--rule-2);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
}

.pd-matrix thead th:first-child,
.pd-matrix tbody th {
  text-align: left;
}

.pd-matrix tbody th {
  font-weight: 500;
  color: var(--ink);
}

.pd-matrix thead a {
  color: var(--ink-2);
}

.pd-matrix thead a:hover {
  color: var(--sig);
}

.pd-matrix tr:target {
  background: var(--state-wash);
}

.pd-matrix tr {
  scroll-margin-top: calc(var(--mast-h) + 16px);
}

.pd-matrix tbody th a {
  color: var(--ink);
}

.pd-matrix tbody th a:hover {
  color: var(--sig);
}

.pd-arms {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-4);
}

.pd-matrix .pd-group th {
  padding-top: 16px;
  border-bottom-color: var(--rule-2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--state);
}

.pd-hit a {
  display: inline-block;
  min-width: 40px;
  padding-block: 3px;
  padding-inline: 6px;
  background: var(--add-ghost);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--add);
}

.pd-hit a:hover {
  outline: 1px solid var(--add);
}

.pd-empty {
  color: var(--rule-2);
}

.pd-matrix .pd-status {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
  white-space: nowrap;
}

.pd-against {
  display: block;
  color: var(--ink-4);
}

.pd-matrix .pd-quiet th,
.pd-matrix .pd-quiet th a,
.pd-matrix .pd-quiet .pd-status {
  color: var(--ink-4);
}

.pd-matrix .pd-fresh .pd-status {
  color: var(--state);
}

/* ── did not change: the quiet tools, the quiet prompts, the masked noise ── */
.pd-quietlist {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-block: 0 18px;
  font-family: var(--mono);
  font-size: 12px;
}

.pd-quietlist a {
  color: var(--ink-3);
}

.pd-quietlist a:hover {
  color: var(--sig);
}

.pd-noise {
  padding-block: 10px;
  padding-inline: 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--ui);
  font-size: 14px;
  color: var(--ink-3);
}

.pd-noise summary {
  color: var(--ink-2);
  cursor: pointer;
}

.pd-noise p {
  max-width: 75ch;
  margin-block: 8px;
  font-family: var(--prose);
  line-height: 1.55;
}

.pd-noise ul {
  margin-block: 0;
  padding-left: 18px;
}

.pd-noise li {
  padding-block: 2px;
}

.pd-noise b {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--ink);
}

/* ── the side index: every change under the document it touched ───── */
/* Sticky beside the cards from 1100px (in _frame.scss); above the cards and
   static below that. A document with more changes than fit at a glance
   collapses into a disclosure. */
.pd-sidehead {
  margin-block: 0 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.pd-toc {
  margin-block: 0 26px;
  padding-left: 0;
  border-left: 1px solid var(--rule-2);
  list-style: none;
}

.pd-toc ol {
  margin-block: 0;
  padding-left: 0;
  list-style: none;
}

.pd-tdoc {
  margin-block: 0;
  padding-block: 10px 2px;
  padding-left: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-4);
}

.pd-toc > li:first-child .pd-tdoc {
  padding-top: 2px;
}

.pd-toc summary.pd-tdoc {
  cursor: pointer;
}

.pd-toc summary.pd-tdoc:hover {
  color: var(--ink-2);
}

.pd-toc a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 4px;
  padding-block: 6px;
  padding-left: 12px;
  font-family: var(--ui);
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink-2);
}

.pd-toc a:hover {
  background: var(--bg-2);
  color: var(--ink);
}

.pd-tn {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--state);
}

.pd-links {
  margin-block: 0;
  padding-left: 0;
  font-family: var(--ui);
  font-size: 14px;
  list-style: none;
}

.pd-links li {
  padding-block: 4px;
}

.pd-links a {
  color: var(--sig);
}