/* 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; }
}

/* 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)); }
}