/* Kun create.html indlæser dette stylesheet. Elev og storskærm bevares. */
.builder-page .c-page { max-inline-size: 1440px; background: var(--paper-2); padding-block: var(--s-3) var(--s-6); padding-inline: var(--s-5); }
.builder-page .c-grid { display: block; }
.builder-page .c-preview { position: static; max-block-size: none; overflow: visible; padding-inline: 0; margin-block-start: var(--s-4); }
.builder-page .page-header { margin-block-end: var(--s-3); }
.builder-savebar { display: flex; justify-content: space-between; align-items: start; gap: var(--s-5); }
.builder-savebar .c-h1 { font-size: 22px; margin: 0; }
.builder-savebar .c-save { position: static; background: transparent; border: 0; padding: 0; margin: 0; inline-size: auto; max-inline-size: 420px; }
.builder-savebar .btn { min-block-size: 44px; block-size: auto; inline-size: auto; padding-block: var(--s-2); padding-inline: var(--s-4); color: var(--ink); }
.builder-page .c-lead { font-size: 13px; margin-block: var(--s-2) var(--s-3); }
.builder-page .c-modebar { margin-block-end: var(--s-3); }
.builder-page .c-tools { margin-inline-start: auto; }
.builder-page .f-form { gap: var(--s-3); }
.builder-page .builder-nav { display: flex; flex-wrap: nowrap; overflow: auto; gap: 0; border-block-end: 1px solid var(--rule); margin: 0; }
.builder-nav button { flex-shrink: 0; border: 0; border-block-end: 3px solid transparent; background: transparent; color: var(--ink-2); font: 500 13px var(--sans); padding-block: var(--s-2); padding-inline: var(--s-4); min-block-size: 44px; cursor: pointer; }
.builder-nav button[aria-current] { color: var(--ink); border-block-end-color: var(--accent); font-weight: 700; }
.builder-content { display: grid; gap: var(--s-5); }
.builder-content[data-builder-page="case"],.builder-content[data-builder-page="roles"],.builder-content[data-builder-page="rules"] { max-inline-size: 960px; }
.builder-page .f-sec { border: 0; padding-block-start: 0; gap: var(--s-3); }
.builder-page .f-item,.builder-page .f-subitem,.builder-page .s-panel,.builder-page .mechanism-card,.builder-page .mechanism-panel,.builder-page .frame-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.builder-page .f-item { border-block-start: 1px solid var(--rule); }
.builder-page .f-item-body { padding-inline: 0; }
.builder-page .f-subitem,.builder-page .s-panel,.builder-page .mechanism-card,.builder-page .mechanism-panel { padding-inline: 0; border-block-start: 1px solid var(--rule); }
/* Navnet redigeres i rækkehovedet; korte mellemrum holder de indlejrede rækker kompakte. */
.builder-page .f-subitem[data-row-name-path] { gap: var(--s-1); }
.builder-page .frame-card { border-block-start: 1px solid var(--rule); padding-inline: 0; }
.builder-page .frame-tags small { background: transparent; border: 0; border-radius: 0; }
.builder-page .text-input { min-block-size: 44px; font-size: 14px; padding-block: var(--s-2); padding-inline: var(--s-3); }
.builder-page .f-add,.builder-page .t-link,.builder-page .f-jump,.builder-page .btn-icon { min-block-size: 44px; }
.builder-page .btn-icon { min-inline-size: 44px; }
.builder-page .f-add { border: 0; background: transparent; justify-self: start; }
.builder-page .t-link:hover,.builder-page .f-add:hover,.builder-page .f-jump:hover { text-decoration: underline; text-underline-offset: 3px; }
.builder-page summary { min-block-size: 44px; cursor: pointer; }
.builder-flow { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: var(--s-5); align-items: start; }
.builder-timeline { border-inline-end: 1px solid var(--rule); padding-inline-end: var(--s-4); min-inline-size: 0; }
.builder-phase-list { display: grid; gap: var(--s-1); margin-block: var(--s-3); }
.builder-phase { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: var(--s-2); align-items: start; text-align: start; background: transparent; border: 0; border-inline-start: 3px solid transparent; padding-block: var(--s-2); padding-inline: var(--s-2); color: var(--ink); cursor: pointer; min-block-size: 52px; }
.builder-phase.selected { border-inline-start-color: var(--accent); background: oklch(from var(--accent) l c h / 8%); }
.builder-phase strong { font: 600 13px/1.4 var(--sans); overflow-wrap: anywhere; }
.builder-phase small { display: block; margin-block-start: var(--s-1); font: 11px var(--mono); color: var(--ink-2); }
.builder-phase:hover { background: var(--paper-3); }
.builder-editor-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.builder-phase-editor { min-inline-size: 0; }
.builder-page .flow-editor { padding: 0; border: 0; gap: var(--s-3); }
.builder-page .flow-editor>h3 { margin-block-start: var(--s-3); }
.builder-page .flow-editor .s-panel { margin-block: 0; padding-block: var(--s-3); padding-inline: 0; }
.builder-page .mechanism-option { background: transparent; border: 0; border-block-start: 1px solid var(--rule); border-radius: 0; min-block-size: 44px; }
.builder-library summary { display: flex; align-items: center; gap: var(--s-2); font: 600 13px var(--sans); }
.builder-library-options { display: grid; gap: var(--s-3); }
.builder-library-options h3 { font: 11px var(--mono); color: var(--ink-2); }
.builder-library .flow-component { inline-size: 100%; border: 0; border-radius: 0; background: transparent; cursor: pointer; touch-action: manipulation; padding-inline: 0; }
.builder-library .flow-component:hover { background: var(--paper-3); }
.builder-extra,.builder-add-rules { border-block-start: 1px solid var(--rule); }
.builder-extra>summary,.builder-add-rules>summary { padding-block: var(--s-3); font-weight: 600; }
.builder-add-rules .f-sec { margin-block: var(--s-4); }
/* Spillets regler: en række pr. regel, med streger imellem (ingen kort i kort) */
.builder-rule-list { list-style: none; margin: 0; padding: 0; }
.builder-rule-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s-4); align-items: start; padding-block: var(--s-3); border-block-start: 1px solid var(--rule); }
.builder-rule-row:last-child { border-block-end: 1px solid var(--rule); }
.builder-rule-row strong { font: 600 14px/1.4 var(--sans); }
.builder-rule-row p { margin: var(--s-1) 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.builder-rule-row .f-hint { color: var(--ink-3); }
.builder-rule-row .f-hint.warn { color: var(--ink-2); }
.builder-rule-flag { display: block; margin-block-start: var(--s-1); font: 500 12px/1.45 var(--sans); color: var(--ink-2); }
.builder-rule-row.has-error .builder-rule-flag { color: var(--red); }
.builder-rule-row .f-jump { align-self: center; padding-inline: var(--s-2); }
@media (max-width: 560px) { .builder-rule-row { grid-template-columns: minmax(0,1fr); gap: var(--s-1); } .builder-rule-row .f-jump { align-self: start; padding-inline: 0; } }
.builder-mobile-select { display: none; }
.builder-rule-dialog { margin: auto; inline-size: min(860px,94vw); max-block-size: 90dvh; padding: 0; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-l); overflow: auto; }
.builder-rule-dialog[open] { display: block; }
.builder-rule-content { padding-block: var(--s-4); padding-inline: var(--s-5); }
.builder-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); margin-block-end: var(--s-2); }
.builder-dialog-head h2 { font-size: 18px; }
#builderRuleUsage { border-block-end: 1px solid var(--rule); padding-block-end: var(--s-3); margin-block-end: var(--s-4); color: var(--ink-2); }
.builder-page :is(button,a,input,select,textarea,summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media(max-width:750px) {
 .builder-page .c-page { padding-inline: var(--s-3); }
 .builder-savebar { gap: var(--s-3); }
 .builder-savebar .c-h1 { font-size: 20px; }
 .builder-savebar .c-save { max-inline-size: 50%; }
 .builder-page .c-tools { margin-inline-start: 0; }
 .builder-nav button { font-size: 12px; padding-inline: var(--s-3); }
 .builder-flow { grid-template-columns: minmax(0,1fr); gap: var(--s-3); }
 .builder-timeline { border: 0; padding-inline: 0; }
 .builder-timeline .flow-heading,.builder-phase-list { display: none; }
 .builder-library-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .builder-mobile-select { display: grid; gap: var(--s-1); margin-block-end: var(--s-2); }
 .builder-rule-content { padding-inline: var(--s-3); }
}
@media(prefers-reduced-motion:reduce) { .builder-page * { transition: none !important; animation: none !important; } }
@media(prefers-contrast:more) { .builder-page { --ink-3: var(--ink-2); --rule: var(--rule-2); } }
@media(forced-colors:active) { .builder-phase.selected,.builder-nav button[aria-current] { outline: 2px solid Highlight; } }

.builder-preview-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-end: var(--s-4); }
.builder-preview-dialog { margin: auto; inline-size: min(1500px,96vw); block-size: 94dvh; max-block-size: 94dvh; padding: var(--s-4); border: 1px solid var(--rule); border-radius: var(--r-l); background: var(--paper); }
.builder-preview-dialog[open] { display: flex; flex-direction: column; gap: var(--s-2); }
.builder-preview-selects { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.builder-preview-selects label { display: grid; gap: var(--s-1); min-inline-size: 0; flex: 1 1 160px; font-size: 12px; }
.builder-preview-stage { flex: 1; min-block-size: 0; display: flex; justify-content: center; }
.builder-preview-stage iframe { inline-size: 100%; block-size: 100%; border: 1px solid var(--rule); background: var(--paper); }
.builder-preview-dialog[data-view="student"] iframe { max-inline-size: 390px; }
.builder-preview-dialog [data-preview-status]:empty { display: none; }
.builder-example-toggle { display: flex; align-items: center; gap: var(--s-2); min-block-size: 44px; font-size: 14px; font-weight: 600; }
.builder-example-toggle input { accent-color: var(--accent); inline-size: 18px; block-size: 18px; }
.builder-preview-tools { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.builder-preview-tools[hidden] { display: none; }
.builder-preview-tools + .builder-preview-tools { margin-block-start: var(--s-3); }

/* Rolige, kompakte kontroller. Kun lærerbyggeren; iframe-siderne har
   deres eget stylesheet og beholder telefonens og projektorens design. */
.builder-page .c-modebar { gap: var(--s-2) var(--s-4); align-items: center; }
.builder-page .c-modes { background: var(--paper-3); border: 0; padding: var(--s-1); border-radius: var(--r-m); box-shadow: none; }
.builder-page .c-modes .seg-btn { min-block-size: 44px; padding-block: var(--s-1); padding-inline: var(--s-3); border-radius: var(--r-s); font-size: 12px; box-shadow: none; }
.builder-page .c-modes .seg-btn.active { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-s); }
.builder-page .c-tools { gap: var(--s-1); }
.builder-page .t-link { border: 0; background: transparent; border-radius: var(--r-s); padding-block: var(--s-1); padding-inline: var(--s-2); font-size: 12px; color: var(--ink-2); }
.builder-page .t-link:hover { background: var(--paper-3); text-decoration: none; color: var(--ink); }
.builder-page .builder-preview-actions { margin: 0; gap: var(--s-1); }
.builder-page .builder-preview-actions button { border-color: transparent; background: oklch(from var(--accent) l c h / 8%); color: var(--ink); }
.builder-page :is(.btn-small,.btn-ghost,.builder-savebar .btn) { min-block-size: 44px; border-radius: var(--r-m); padding-block: var(--s-1); padding-inline: var(--s-3); font: 600 12px/1.4 var(--sans); box-shadow: none; }
.builder-page .text-input { border: 1px solid var(--rule); border-radius: var(--r-m); background-color: var(--paper); color: var(--ink); box-shadow: none; font-size: 13px; padding-block: var(--s-2); }
.builder-page .text-input:hover { border-color: var(--ink-4); }
.builder-page .text-input:focus { border-color: var(--accent); }
.builder-page select.text-input {
  appearance: none;
  cursor: pointer;
  padding-inline-end: var(--s-6);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) center, calc(100% - 12px) center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
}
.builder-page select.text-input:disabled { cursor: default; opacity: .6; }
.builder-page .f-field { gap: var(--s-1); }
.builder-page .f-label { font-size: 12px; color: var(--ink-2); }
.builder-page .f-hint { line-height: 1.5; }
.builder-page .f-block-body { display: grid; gap: var(--s-3); }
.builder-page .f-check { min-block-size: 44px; font-size: 13px; }
.builder-page input[type="checkbox"] { accent-color: var(--accent); }
.builder-page .c-draftnote { background: transparent; border: 0; padding-block: 0; padding-inline: 0; gap: var(--s-2); color: var(--ink-3); font-size: 12px; margin-block-end: var(--s-2); }
.builder-page .c-draftnote .btn { min-block-size: 44px; border: 0; background: transparent; color: var(--ink-2); padding-inline: var(--s-2); }
.builder-preview-tools>label { flex: 1; min-inline-size: 0; }
/* Knapperne må ikke klemmes, så "Nulstil prøven" deler sig over to linjer. */
.builder-preview-tools>button { flex: none; white-space: nowrap; }
.builder-preview-tools select { inline-size: 100%; }
.builder-preview-dialog { overflow: auto; }
@media(min-width:900px) {
  .builder-page .f-block-body { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .builder-page .f-block-body>* { grid-column: 1 / -1; }
  .builder-page .f-block-body>.f-field-half { grid-column: auto; }
}
@media(max-width:600px) {
 .builder-page .c-modebar { gap: var(--s-2); }
 .builder-page .builder-preview-actions { flex-wrap: wrap; }
 .builder-preview-stage { flex: 1 0 240px; }
 .builder-page .f-check { min-block-size: 44px; }
}
@media(forced-colors:active) { .builder-page select.text-input { appearance: auto; background-image: none; } }

/* Kompakte kontroller (28/9 2026). Byggeren bruges ved en computer, og 44 px
   høje felter og knapper fik siden til at virke klodset. Med mus eller
   touchpad (pointer: fine) er de derfor lavere. På en touchskærm gælder
   reglerne ovenfor stadig, så trykfladerne er mindst 44 px. */
@media (pointer: fine) {
  .builder-page .text-input { min-block-size: 34px; padding-block: 5px; }
  .builder-page :is(.btn-small, .btn-ghost, .builder-savebar .btn) { min-block-size: 32px; }
  .builder-page .c-modes .seg-btn { min-block-size: 30px; }
  .builder-page :is(.t-link, .f-add, .f-jump) { min-block-size: 30px; }
  .builder-page .btn-icon { min-block-size: 30px; min-inline-size: 30px; }
  .builder-page summary { min-block-size: 32px; }
  .builder-nav button { min-block-size: 38px; }
  .builder-page .f-check { min-block-size: 30px; }
  .builder-page .mechanism-option { min-block-size: 36px; }
  .builder-example-toggle { min-block-size: 32px; }
}
/* En rullemenu med korte valg skal ikke strække sig over hele editoren. */
.builder-page select.text-input { max-inline-size: 420px; }
/* Foldeoverskrifterne får samme størrelse som resten af byggerens tekst. */
.builder-page :is(.mechanism-library, .builder-extra, .builder-add-rules) > summary { font: 600 13px var(--sans); padding-block: var(--s-2); }
/* "Slå til i denne aktivitet" har sit eget plus-ikon og skal ikke også have pilen. */
.builder-page .mechanism-library > summary { display: flex; align-items: center; gap: var(--s-2); list-style: none; padding-inline: var(--s-3); }
.builder-page .mechanism-library > summary::-webkit-details-marker { display: none; }
/* Prøvevinduets statuslinje og lærerens prøveknapper i samme størrelse som resten */
.builder-preview-dialog [data-preview-status] { font-size: 13px; color: var(--ink-2); }
.builder-preview-dialog summary { font: 600 13px var(--sans); }

/* =============================================================================
   AI-hjælperen (builder-ai.js): panel i højre side af byggeren
   ============================================================================= */
.ai-panel {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 20;
  inline-size: min(420px, 100vw);
  display: flex; flex-direction: column; gap: var(--s-2);
  padding-block: var(--s-3); padding-inline: var(--s-4);
  background: var(--paper); border-inline-start: 1px solid var(--rule);
  box-shadow: var(--shadow-m);
  font-size: 13px;
  &[hidden] { display: none; }
}
/* På brede skærme skubbes byggeren til side, så formularen kan ses imens */
@media (min-width: 1100px) {
  body.builder-page.ai-open .c-page { margin-inline-end: 420px; }
}
.ai-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  & h2 { font-size: 16px; margin: 0; display: flex; align-items: center; gap: var(--s-2); }
  & .hi { color: var(--accent); } }
.ai-tabs { display: flex; gap: var(--s-1); border-block-end: 1px solid var(--rule);
  & button { border: 0; background: transparent; color: var(--ink-2); font: 500 12px var(--sans);
    padding-block: var(--s-2); padding-inline: var(--s-2); border-block-end: 2px solid transparent; cursor: pointer; }
  & button[aria-selected="true"] { color: var(--ink); font-weight: 700; border-block-end-color: var(--accent); } }
.ai-key > summary { font: 500 12px var(--sans); color: var(--ink-2); min-block-size: 28px; }
.ai-key .f-field { padding-block: var(--s-2); }
.ai-log { flex: 1; min-block-size: 0; overflow: auto; display: grid; align-content: start; gap: var(--s-3); padding-block: var(--s-2); }
.ai-msg { line-height: 1.5; overflow-wrap: anywhere;
  & p { margin-block: 0 var(--s-2); }
  & ul { margin-block: var(--s-1); padding-inline-start: var(--s-4); } }
.ai-teacher { justify-self: end; max-inline-size: 85%; background: oklch(from var(--accent) l c h / 10%);
  padding-block: var(--s-2); padding-inline: var(--s-3); border-radius: var(--r-l); }
.ai-claude { display: grid; gap: var(--s-2); }
.ai-error, .ai-msg.ai-error { color: var(--red); }
.ai-plan { border-inline-start: 3px solid var(--accent); padding-inline-start: var(--s-3); }
.ai-questions li { font-weight: 600; }
.ai-findings { list-style: none; padding: 0; display: grid; gap: var(--s-2);
  & li { border-block-start: 1px solid var(--rule); padding-block-start: var(--s-2); }
  & .ai-sev { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
  & .sev-fejl .ai-sev { color: var(--red); } }
.ai-diff { border-block-start: 1px solid var(--rule); padding-block-start: var(--s-2);
  & > summary { font-weight: 600; cursor: pointer; }
  & h4 { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-block: var(--s-3) var(--s-1); } }
.ai-change { display: grid; gap: var(--s-1); padding-block: var(--s-1); }
.ai-change-label { font-weight: 600; font-size: 12px; }
.ai-before, .ai-after { white-space: pre-wrap; padding-block: var(--s-1); padding-inline: var(--s-2); border-radius: var(--r-s); font-size: 12px; }
.ai-before { background: oklch(from var(--red) l c h / 8%); text-decoration: line-through; text-decoration-color: oklch(from var(--red) l c h / 50%); color: var(--ink-2); }
.ai-after { background: oklch(from var(--green) l c h / 10%); }
.ai-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.ai-done, .ai-usage { font: 11px var(--mono); color: var(--ink-3); margin: 0; }
.ai-warn { color: var(--ink-2); font-size: 12px; }
.ai-status { margin: 0; font-size: 12px; color: var(--ink-2); min-block-size: 1.2em;
  &:empty { display: none; }
  &.error { color: var(--red); } }
.ai-input { display: grid; gap: var(--s-2); border-block-start: 1px solid var(--rule); padding-block-start: var(--s-2);
  & textarea { resize: vertical; min-block-size: 64px; } }
.ai-input-row { display: flex; align-items: center; gap: var(--s-2); }
.ai-privacy { margin: 0; font-size: 11px; }
.ai-toggle[aria-expanded="true"] { background: oklch(from var(--accent) l c h / 18%); }
@media (prefers-reduced-motion: reduce) { .ai-panel * { scroll-behavior: auto; } }
@media (forced-colors: active) { .ai-before, .ai-after, .ai-teacher { border: 1px solid CanvasText; } }
/* En manglende forbindelse (fx en slettet rolle), læreren skal tage stilling til.
   Knappen står midt i sætningen som et almindeligt link. */
.builder-page .f-hint.warn { color: var(--red); }
.builder-page .f-hint .t-link { display: inline; min-block-size: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* "Om byggeklodsen" → /r/byggeklodser.html (builder-blocks.js) */
.builder-page .block-help { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--ink-3); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
.builder-page .block-help:hover, .builder-page .block-help:focus-visible { color: var(--ink); }

/* Tjekkets beskeder ved felterne (create.html: markIssues) og den klikbare
   fejlliste (showIssues). Fejl er røde; råd er dæmpede. */
.builder-page .f-issue { display: block; margin-block-start: var(--s-1); font: 500 12px/1.45 var(--sans); color: var(--red); text-wrap: pretty; }
.builder-page .f-issue.warning { color: var(--ink-3); font-weight: 400; }
.builder-page .flow-editor > .f-issue { padding: var(--s-2) var(--s-3); border-inline-start: 3px solid var(--red); background: oklch(from var(--red) l c h / 6%); }
.builder-page .flow-editor > .f-issue.warning { border-inline-start-color: var(--rule-2); background: var(--paper-2); }
.builder-page [aria-invalid="true"] { border-color: var(--red); }
/* En prik ved fanen, aktiviteten eller rollen: der er noget at se på */
.builder-page .has-issue { position: relative; }
.builder-page .builder-nav .has-issue::after,
.builder-page .builder-phase.has-issue::after,
.builder-page summary.has-issue::after {
  content: ''; display: inline-block; inline-size: 7px; block-size: 7px; margin-inline-start: var(--s-2);
  border-radius: var(--r-full); background: var(--ink-4); vertical-align: middle;
}
.builder-page .has-error::after { background: var(--red) !important; }
.builder-page .builder-phase.has-issue::after { position: absolute; inset-block-start: var(--s-2); inset-inline-end: var(--s-2); margin: 0; }
/* Fejllisten: hvert punkt er et link til feltet */
.c-msg .issue-link { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: oklch(from currentColor l c h / 40%); }
.c-msg .issue-link:hover { text-decoration-color: currentColor; }
.c-msg .issue-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-s); }
@media (forced-colors: active) { .builder-page .has-issue::after { forced-color-adjust: none; background: Mark; } }

/* Beskeden efter en sletning, med "Fortryd" (create.html: offerUndo) */
.undo-bar { position: fixed; z-index: 20; inset-block-end: var(--s-4); inset-inline: var(--s-4); margin-inline: auto; max-inline-size: 640px;
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  background: var(--ink); color: var(--paper); border-radius: var(--r-l); box-shadow: var(--shadow-hover); font: 400 13px/1.45 var(--sans); }
.undo-bar[hidden] { display: none; }
.undo-bar > span { flex: 1; text-wrap: pretty; }
.undo-bar .btn-ghost { color: var(--paper); border-color: oklch(from var(--paper) l c h / 40%); flex-shrink: 0; }
.undo-bar .btn-icon { color: var(--paper); flex-shrink: 0; }
@media (forced-colors: active) { .undo-bar { border: 1px solid CanvasText; } }