/* My creations, encounters and the D&D OCR workshop. Panels, callouts, badges, labels and menus come from
   ink-paper.css; this file only adds the layout those pages need. */
.workspace { padding-bottom: 3rem; }
.workspace h2, .workspace h3, .workspace legend { font-family: var(--ui-font-display); }
.workspace .paper__title { margin-bottom: .5rem; }
.workspace .callout h2 { font-size: 1.1875rem; font-weight: 700; }
.workspace .callout ul { margin-top: .5rem; padding-left: 1.25rem; list-style: disc; }
.workspace-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.workspace-note { margin-block: 1rem 1.5rem; }
.workspace-note summary { color: var(--ui-text); }
.workspace-note p { max-width: 65ch; margin-top: .5rem; }
.code-field { display: block; margin-block: .75rem; font-family: var(--ui-font-mono); font-size: .8125rem; line-height: 1.6; tab-size: 2; }

/* My creations */
.library-tabs { display: flex; gap: .25rem; margin-bottom: 1rem; overflow-x: auto; box-shadow: inset 0 -1px 0 var(--ui-line); scrollbar-width: none; }
.library-tabs a { display: flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding-inline: .75rem; border-bottom: 2px solid transparent; color: var(--ui-muted); font-size: .9375rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.library-tabs a:hover { color: var(--ui-text); }
.library-tabs a[aria-current] { border-bottom-color: var(--ui-accent); color: var(--ui-text); }
.library-tabs__count { color: var(--ui-muted); font-size: .8125rem; font-weight: 400; font-variant-numeric: tabular-nums; }
/* Encounters group creations, so their tab sits apart from the kinds of creation and stays in view while the kinds scroll. */
.library-tabs .library-tabs__groups { position: sticky; right: 0; margin-left: auto; background: var(--ui-page); box-shadow: inset 0 -1px 0 var(--ui-line), -.5rem 0 .5rem -.25rem var(--ui-page); }
.library-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.library-filters > div { flex: 1 1 9rem; max-width: 12rem; }
.library-filters > .library-filters__query { flex: 3 1 14rem; max-width: 28rem; }
.library-list { display: grid; gap: .75rem; margin-top: 1rem; }
.creation-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .75rem 1.5rem; }
.creation-row .paper__title { overflow-wrap: anywhere; }
.creation-row .paper__title a { color: inherit; text-decoration: none; }
.creation-row .paper__title a:hover { text-decoration: underline; text-underline-offset: .2em; }
.creation-facts { font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.creation-text { max-width: 65ch; margin-top: .25rem; color: var(--ui-muted); font-family: var(--ui-font-display); font-style: italic; }
.creation-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 0; margin-top: .625rem; }
.creation-meta li:not(:last-child)::after { content: "·"; margin-inline: .5rem; }
.creation-meta a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.creation-meta a:hover { color: var(--ui-text); }
.menu__list .menu__danger { color: var(--ui-danger); }
/* On a phone the title gets the full width: the menu sits beside the kind label, and each fact about the row takes a line. */
@media (max-width: 640px) {
  .creation-row { position: relative; display: block; }
  .creation-row > .menu { position: absolute; top: .75rem; right: .75rem; }
  .creation-row .eyebrow { min-height: 2rem; padding-right: 6.5rem; }
  .creation-meta { display: grid; }
  .creation-meta li:not(:last-child)::after { content: none; }
}

/* Encounters */
.encounter-new { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.encounter-new > div { flex: 1 1 14rem; max-width: 28rem; }
.encounter-pick { display: grid; gap: 1rem; max-width: 44rem; }
.encounter-pick__list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding-block: .75rem; border-top: 1px solid var(--ui-line); }
.encounter-pick__list li:first-child { padding-top: .25rem; border-top: 0; }
.encounter-pick__list li:last-child { padding-bottom: 0; }
.encounter-pick__list li > div { display: grid; min-width: 0; overflow-wrap: anywhere; }
.encounter.tool { padding-bottom: 3rem; }
.encounter-notes { max-width: 65ch; margin-bottom: .75rem; font-size: 1.0625rem; overflow-wrap: anywhere; }
.encounter-notes p + p { margin-top: .5rem; }
.encounter-edit > summary { display: inline-block; font-size: .9375rem; cursor: pointer; }
.encounter-edit > form { display: grid; gap: .875rem; max-width: 40rem; margin-top: .75rem; }
.encounter-edit .btn { justify-self: start; }
.encounter-roster { margin-top: 1.5rem; }
.encounter-roster .encounter-roster__group { margin-top: 1rem; padding-bottom: .25rem; border-bottom: 1px solid var(--ui-line); color: var(--ui-accent); font: 650 .75rem/1.4 var(--ui-font); letter-spacing: .12em; text-transform: uppercase; }
.encounter-row { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; align-items: center; gap: .5rem 1rem; padding-block: .5rem; border-bottom: 1px solid var(--ui-line); }
.encounter-roster ul:last-child .encounter-row:last-child { padding-bottom: 0; border-bottom: 0; }
.encounter-row__what { display: grid; grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
/* A row with no count starts at the edge instead of leaving the stepper's column empty. */
.encounter-row__what:first-child { grid-column: 1 / 3; }
.encounter-row__what a { color: inherit; font-family: var(--ui-font-display); font-size: 1.0625rem; font-weight: 700; text-decoration: none; }
.encounter-row__what a:hover { text-decoration: underline; text-underline-offset: .2em; }
.encounter-row__actions, .encounter-count { display: flex; align-items: center; gap: .375rem; }
.encounter-row__actions { grid-column: 3; }
.encounter-count .btn { min-width: 2rem; padding-inline: 0; font-size: 1rem; }
.encounter-count__value { min-width: 2.25rem; font-weight: 650; font-variant-numeric: tabular-nums; text-align: center; }
.encounter-budget { margin-top: 1.5rem; }
.encounter-budget__head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: .75rem 1.5rem; }
.encounter-budget__sum { font-variant-numeric: tabular-nums; }
.encounter-budget__sum strong { font-family: var(--ui-font-display); font-size: 1.375rem; }
.encounter-budget__party { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.encounter-budget__party .field { width: auto; }
.encounter-budget__lines { max-width: 26rem; margin-block: .75rem; font-variant-numeric: tabular-nums; }
.encounter-budget__lines li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .375rem; border-bottom: 1px solid var(--ui-line); }
.encounter-budget__lines b { font-weight: 650; }
.encounter-budget .hint { max-width: 70ch; }
.encounter-budget__how > summary { cursor: pointer; }
.encounter-budget__how p { margin-top: .375rem; }
.encounter-cards { margin-top: 2.5rem; }
.encounter-cards > .section-title { margin-bottom: 1rem; }
.encounter-cards__blocks { display: grid; gap: 1.25rem; }
/* Anchor targets clear the top of the window when the roster links to a card. */
.encounter-cards [id^="entry-"] { scroll-margin-top: 1rem; }
.encounter-block { display: grid; gap: .5rem; align-content: start; min-width: 0; }
.encounter-block .stat-block-container { text-align: left; }
.encounter-block .stat-block { width: 100%; max-width: 44rem; min-width: 0; box-shadow: none; }
.encounter-times { font-weight: 650; font-variant-numeric: tabular-nums; }
.encounter-card__foot { margin-top: .875rem; padding-top: .75rem; border-top: 1px solid var(--ui-line); color: var(--ui-muted); font-size: .875rem; }
.encounter-card__foot b { color: var(--ui-text); font-variant-numeric: tabular-nums; }
@media (pointer: coarse) {
  .encounter-row { grid-template-columns: 8.5rem minmax(0, 1fr) auto; }
  .encounter-count .btn { min-width: 2.75rem; }
  .encounter-count .btn, .encounter-row__actions .btn { min-height: 2.75rem; }
}
@media (max-width: 640px) {
  .encounter-row { grid-template-columns: minmax(0, 1fr) auto; }
  .encounter-row__what { grid-column: 1 / -1; grid-row: 1; }
  .encounter-row__actions { grid-column: 2; justify-content: end; }
}

/* Running an encounter: what the GM marks during play comes first, what they read after. */
.run .encounter-notes { max-width: 44rem; color: var(--ui-muted); }
/* The table bar keeps Fear and the countdowns at the top of the window while the page scrolls. */
html:has(.run-bar) { scroll-padding-top: 8rem; }
.run-bar { position: sticky; top: 0; z-index: 5; display: grid; gap: .5rem; margin-block: 1rem 1.5rem; padding: .5rem 1rem; box-shadow: var(--ui-shadow-pop); }
.run-bar__row { display: flex; align-items: center; gap: .5rem 1rem; min-width: 0; }
.run-bar__actions { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.run-saved { color: var(--ui-muted); font-size: .8125rem; }
.run-saved[data-failed] { color: var(--ui-danger); font-weight: 650; }
.run-bar__countdowns { padding-top: .5rem; border-top: 1px solid var(--ui-line); }
.run-bar__manage::after { content: ""; width: .4rem; height: .4rem; margin-top: -.2rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.run-bar__manage[aria-expanded="true"]::after { margin-top: .2rem; transform: rotate(-135deg); }
.run-countdowns { display: flex; flex: 1; flex-wrap: wrap; gap: .5rem; min-width: 0; }
.run-countdown { display: flex; flex: none; align-items: center; gap: .375rem; padding: .125rem .25rem .125rem .625rem; border: 1px solid var(--ui-card-line); border-radius: var(--ui-radius-sm); background: var(--ui-inset); }
.run-countdown__name { max-width: 11rem; overflow: hidden; font-size: .875rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.run-countdown__value { min-width: 2ch; font: 700 1.375rem/1 var(--ui-font-display); font-variant-numeric: tabular-nums; text-align: center; }
.run-countdown__done { color: var(--ui-danger); font-size: .8125rem; font-weight: 650; }
.run-countdown.is-done { border: 2px solid var(--ui-danger); }
.run-countdown.is-done .run-countdown__value { color: var(--ui-danger); }
/* Reset and Remove show while the countdowns are open for changes. */
.run-countdown__more { display: none; }
.run-bar:has(.run-manage:not([hidden])) .run-countdown__more { display: contents; }
.run-bar:has(.run-manage:not([hidden])) .run-countdown { flex: 0 1 auto; flex-wrap: wrap; max-width: 100%; }
.run-bar:has(.run-manage:not([hidden])) .run-countdown__name { max-width: none; white-space: normal; overflow-wrap: anywhere; }
.run-manage { padding-top: .75rem; border-top: 1px solid var(--ui-line); }
.run-suggestions { display: grid; gap: .5rem; }
.run-suggestions ul { display: flex; flex-wrap: wrap; gap: .375rem; }
.run-suggestions .btn { white-space: normal; text-align: left; }
.run-countdown-new { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem .75rem; margin-top: .75rem; }
.run-countdown-new__name { flex: 1 1 14rem; max-width: 24rem; }
.run-countdown-new__start { flex: 0 0 7rem; }
.run-countdown-new__roll { flex-basis: 100%; }
/* The note hangs below the bar, so the bar never changes height. */
.run-note { position: absolute; top: calc(100% + .375rem); right: 0; left: 0; box-shadow: var(--ui-shadow-pop); }
/* Empty, it takes no room but stays a live region, so what is written into it is announced. */
.run-note:empty { padding: 0; border-width: 0; box-shadow: none; }

/* Counters: label and count, dots, then the two buttons side by side. */
.run-track { display: grid; grid-template-columns: 3.25rem auto auto auto; align-items: center; gap: .375rem; }
.run-track__label { display: grid; font-size: .875rem; font-weight: 650; line-height: 1.25; }
.run-track__value { color: var(--ui-muted); font-size: .8125rem; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.run-track__step { min-width: 2.25rem; padding-inline: 0; font-size: 1.0625rem; }
.run-track__pips { display: flex; flex-wrap: wrap; gap: .25rem; margin-right: .25rem; }
.run-pip { width: .8125rem; height: .8125rem; border: 1.5px solid var(--ui-line-strong); border-radius: 50%; }
.run-pip.is-marked { border-color: var(--ui-accent); background: var(--ui-accent); }

.run-section { margin-top: 2rem; }
.run-section > .section-title { margin-bottom: .5rem; }
.run-section__hint { margin-bottom: .5rem; }
.run-group { display: grid; gap: .75rem 1.5rem; align-items: start; padding-block: 1.25rem; border-top: 1px solid var(--ui-line); }
.run-group__head h3 { font-size: 1.25rem; font-weight: 700; overflow-wrap: anywhere; }
.run-group__count { color: var(--ui-muted); font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.run-facts { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: .375rem; font-variant-numeric: tabular-nums; }
.run-facts dt { color: var(--ui-muted); font-size: .6875rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.run-facts dd { font-size: .9375rem; font-weight: 650; }

/* Each copy is a ruled row in one sheet: its name beside its counters once there is room. */
.run-foes { container-type: inline-size; padding-block: 0; }
.run-foe { display: grid; gap: .5rem 1rem; padding-block: .75rem; }
.run-foe + .run-foe { border-top: 1px solid var(--ui-line); }
.run-foe__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; font: 650 .9375rem/1.3 var(--ui-font); }
.run-foe__down { color: var(--ui-danger); font-size: .8125rem; }
.run-foe__tracks { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
@container (min-width: 36rem) {
  .run-foe { grid-template-columns: 7rem minmax(0, 1fr); }
  .run-foe__name { grid-row: span 2; display: grid; align-content: start; }
  .run-foe .run-pip { width: 1rem; height: 1rem; }
}
/* A defeated copy keeps only its HP, so a slip can be cleared. */
.run-foe.is-down { color: var(--ui-muted); }
.run-foe.is-down .run-foe__label { text-decoration: line-through; }
.run-foe.is-down .run-conditions, .run-foe.is-down .run-track:nth-child(2) { display: none; }
.run-conditions { display: flex; flex-wrap: wrap; gap: .375rem; }
.run-condition[aria-pressed="true"], .run-condition[aria-pressed="true"]:hover { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-text); }
.run-condition[aria-pressed="true"]::before { content: "✓"; }

.run-minions { display: grid; gap: .625rem; padding-block: .75rem; }
.run-minions ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); gap: .5rem; }
.run-minion { width: 100%; min-height: 3rem; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.run-minion[aria-pressed="true"], .run-minion[aria-pressed="true"]:hover { border-style: dashed; border-color: var(--ui-card-line); background: var(--ui-inset); color: var(--ui-muted); text-decoration: line-through; }

.run-card > summary { cursor: pointer; color: var(--ui-muted); font-size: .9375rem; font-weight: 600; }
.run-card[open] > summary { margin-bottom: .5rem; }
.run-card--environment { max-width: 48rem; }
.run-card--environment + .run-card--environment { margin-top: 1rem; }
.run-other { padding-block: .75rem; border-top: 1px solid var(--ui-line); }
.run-other > summary { color: var(--ui-text); font-weight: 400; }
.run-other > summary b { font-family: var(--ui-font-display); font-size: 1.125rem; }

.run-dialog { max-width: min(26rem, calc(100vw - 2rem)); }
.run-dialog__text { display: grid; gap: .5rem; margin-top: .75rem; color: var(--ui-muted); }
.run-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; }
body:has(.run-dialog[open]) { overflow: hidden; }

/* On a wide screen each adversary's card sits beside its counters, level with its name. */
@media (min-width: 64rem) {
  /* The card's height goes to the counters' row, so the name and the counters stay together. */
  .run-group { grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem); grid-template-rows: auto 1fr; grid-template-areas: "head card" "foes card"; }
  .run-group__head { grid-area: head; }
  .run-group > .run-foes { grid-area: foes; }
  .run-group > .run-card { grid-area: card; }
}
/* On a phone the bar stays two short rows: Fear as a number beside the Countdowns button, then the
   countdowns scrolling sideways beside Undo. */
@media (max-width: 40rem) {
  .run-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-inline: .75rem; }
  .run-bar__row { display: contents; }
  .run-bar .run-track { order: 1; }
  .run-bar__manage { order: 2; margin-left: auto; }
  .run-bar::before { content: ""; flex-basis: 100%; order: 3; border-top: 1px solid var(--ui-line); }
  .run-bar__countdowns > .hint, .run-countdowns { order: 4; }
  .run-countdowns { flex: 1 1 0; flex-wrap: nowrap; overflow-x: auto; padding: 3px; scrollbar-width: thin; }
  .run-bar__actions { order: 5; }
  .run-manage { flex-basis: 100%; order: 6; }
  .run-bar .run-track__pips { display: none; }
  .run-bar .run-track__value { color: var(--ui-text); font: 700 1.375rem/1 var(--ui-font-display); }
  .run-saved:not([data-failed]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .run-countdown__name { max-width: 8rem; }
  /* Open for changes, the countdowns wrap and the panel below them scrolls, so the bar fits the window. */
  .run-bar:has(.run-manage:not([hidden])) .run-countdowns { flex-basis: 100%; flex-wrap: wrap; overflow-x: visible; }
  .run-manage { max-height: 50dvh; overflow-y: auto; }
}
/* A short window, such as a phone on its side, has no room for a bar that stays. */
@media (max-height: 30rem) {
  .run-bar { position: relative; }
  html:has(.run-bar) { scroll-padding-top: 0; }
}
@media (pointer: coarse) {
  .run .btn--sm { min-height: 2.75rem; }
  .run-track__step { min-width: 2.75rem; }
}
@media (forced-colors: active) {
  .run-pip.is-marked { forced-color-adjust: none; border-color: CanvasText; background: CanvasText; }
  .run-condition[aria-pressed="true"], .run-minion[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: 1px; }
}

/* OCR upload */
.ocr-upload .uppy-Root { font-family: inherit; }
.ocr-upload .uppy-Dashboard-inner { border-color: var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-card); color: var(--ui-text); }
.ocr-upload .uppy-Dashboard-AddFiles { border-color: var(--ui-line); }
.ocr-upload .uppy-Dashboard-AddFiles-title { color: var(--ui-text); }
.ocr-upload .uppy-Dashboard-browse { color: var(--ui-accent); }
.ocr-upload .uppy-Dashboard-note, .ocr-upload .uppy-Dashboard-poweredBy { color: var(--ui-muted); }
.ocr-upload-help { display: grid; gap: 1rem; margin-block: 1.5rem; }

/* OCR review: source images beside the result, or one at a time on narrow screens */
.ocr-review { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.5rem; margin-top: 1.5rem; }
.ocr-review > * { min-width: 0; }
.ocr-review-tabs { display: none; gap: .5rem; }
.ocr-review-tabs .btn { flex: 1; }
.ocr-review[data-ready="true"] .ocr-review-tabs { display: flex; }
.ocr-source figure { margin-top: 1.25rem; }
.ocr-source a { display: block; }
.ocr-source img { width: 100%; height: auto; max-height: 65vh; object-fit: contain; background: var(--ui-inset); }
.ocr-source figcaption { margin-top: .5rem; overflow-wrap: anywhere; }
.ocr-result-content { container-type: inline-size; }
.ocr-result-content .stat-block { width: 100%; min-width: 0; box-shadow: none; }
.ocr-export-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 2rem; }
.ocr-export-grid section { display: flex; flex-direction: column; min-width: 0; }
.export-actions { margin-top: auto; padding-top: 1rem; }
.export-actions .workspace-actions { justify-content: space-between; margin-bottom: .75rem; }
.ocr-bottom-actions { justify-content: space-between; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--ui-line); }

/* OCR corrections */
.correction-fields fieldset { min-width: 0; margin-bottom: 1.5rem; }
.correction-fields legend { margin-bottom: .75rem; font-size: 1.25rem; font-weight: 700; }
.correction-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.correction-grid--scores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Traits and actions: a name over its rules text, one entry after another. */
.correction-block { display: grid; gap: .5rem; padding-block: .875rem; border-top: 1px solid var(--ui-line); }
.correction-block:first-of-type { padding-top: 0; border-top: 0; }
.correction-add > summary { display: inline-block; font-size: .9375rem; }
.correction-add[open] > summary { margin-bottom: .75rem; }
.correction-section > .space-y-1 { margin-bottom: .875rem; }
.correction-check { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; font-size: .9375rem; }
/* The save bar stays in reach however long the stat block is. */
.correction-save { position: sticky; bottom: 0; margin: 1rem -1.25rem -1.25rem; padding: .75rem 1.25rem; border-top: 1px solid var(--ui-line); border-radius: 0 0 var(--ui-radius) var(--ui-radius); background: var(--ui-card); }
/* On the result page the fields open in place of the stat block. */
.ocr-fix { margin-top: 1rem; }
.ocr-fix > summary { list-style: none; }
.ocr-fix > summary::-webkit-details-marker { display: none; }
.ocr-fix[open] .ocr-fix__closed, .ocr-fix:not([open]) .ocr-fix__open { display: none; }
.ocr-fix[open] > summary { border-color: var(--ui-card-line); background: var(--ui-field); color: var(--ui-text); }
.ocr-fix[open] > summary:hover { border-color: var(--ui-line-strong); background: var(--ui-inset); }
.ocr-fix[open] ~ * { display: none; }
.ocr-fix__lead { margin-block: .75rem; }
.correction-fields [aria-invalid="true"], .correction-json [aria-invalid="true"] { border-color: var(--ui-danger); }
.correction-fields .btn, .correction-json .btn { max-width: 100%; white-space: normal; text-align: center; }
.correction-fields + .correction-json { margin-top: 1.5rem; }

@container (max-width: 42rem) {
  .ocr-result-content .stat-block.wide .section-left, .ocr-result-content .stat-block.wide .section-right { display: block; width: 100%; margin-inline: 0; }
}
@media (min-width: 36rem) {
  .correction-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .correction-grid--scores { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ocr-upload-help { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .ocr-review { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .ocr-review[data-ready="true"] .ocr-review-tabs { display: none; }
  .ocr-source { position: sticky; top: 1rem; max-height: calc(100dvh - 2rem); overflow: auto; }
  .ocr-export-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}