/* ============================================================
   gm-screen.css — GM Screen one-pager (Lore > Screen).

   A dense, physical-GM-screen feel: a header plus a multi-column masonry of
   compact reference cards (one per block). Layout uses CSS multi-column so the
   blocks — which arrive ALREADY in reading order (column-major) — flow top-to-
   bottom then across, with break-inside: avoid keeping each card intact. The
   column count steps down with viewport width and collapses to a single column
   on narrow screens, so there is never horizontal overflow.

   The card body is injected (innerHTML) trusted, pre-sanitized HTML carrying NO
   classes — so every element selector below is scoped under .gm-card__body to
   style the raw <h1>-<h4> / <p> / <ul> / <table> to the dark OSR theme.

   Dark OSR theme via base.css tokens only — no raw hex.
   ============================================================ */

/* ---- Page header --------------------------------------------------------- */
/* ONE row: the title+tagline group on the left, and a right cluster holding the
   keyword filter AND the Arrange/Add-note actions. Everything sits on a single
   line — no stacked title-then-actions band. Wraps gracefully on narrow
   viewports (the right cluster drops below the title). */

.gm-screen__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  /* #7 (2026-06-27): tighten the header so the board sits HIGHER — trims the
     excess top whitespace Ken flagged. */
  margin-bottom: var(--space-sm);
}

/* Right cluster: filter + action buttons share the header's right side on one
   line. batch-12 #5 (2026-06-28): folding the actions INTO the header row (they
   were a separate stacked block below it) removes the extra vertical band — the
   title and the Arrange/Add-note controls now read as one tidy row. Wraps below
   the title on narrow screens. */
.gm-screen__head-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs) var(--space-md);
  flex: 1 1 auto;
}

/* Title + tagline sit inline on one baseline-aligned row (mirrors the app-wide
   page-head pattern), tagline muted and smaller immediately to the title's right. */
.gm-screen__headline {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.gm-screen__title {
  margin: 0;
}

.gm-screen__tagline {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---- Keyword filter ------------------------------------------------------ */

.gm-screen__filter {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 0 1 auto;
}

.gm-screen__search {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-xs) var(--space-sm);
  width: 14rem;
  max-width: 100%;
}

.gm-screen__search:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.gm-screen__search::placeholder {
  color: var(--color-text-muted);
}

/* Clear button: the app's small/secondary button, compacted to sit inline with
   the search field (the base .btn padding is too tall for the filter row). The
   `disabled` state (set by JS when the term is empty) dims and de-activates it. */
.gm-screen__clear {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm);
  line-height: 1;
}

.gm-screen__clear:disabled {
  opacity: 0.45;
  cursor: default;
}

.gm-screen__count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Highlighted filter match: a torchlight-gold wash (old-coin gold token) behind
   the matched substring, readable on the dark theme. Inherits text color so it
   stays legible inside headings, body copy and table cells alike. */
.gm-mark {
  background-color: rgba(191, 160, 30, 0.32); /* --color-luck #bfa01e at low alpha */
  color: inherit;
  border-radius: 2px;
  padding: 0 0.05em;
}

/* Filtered-out card: removed from the masonry flow so remaining cards reflow.
   WHY !important: .gm-card sets `display: inline-block` and is defined LATER in
   this file at equal specificity, so a plain `display: none` here loses the
   cascade and the card never hides. !important forces the hide to win. */
.gm-card--hidden {
  display: none !important;
}

.gm-screen__empty {
  margin: var(--space-md) 0 0;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ---- Action controls: Arrange + Add note -------------------------------- */
/* batch-12 #5 (2026-06-28): these now live INSIDE the header's right cluster
   (.gm-screen__head-right), on the SAME line as the title — no longer a separate
   stacked block below the header, so the extra vertical band is gone. The Arrange
   control is the char-dash icon-button (see char-dashboard.css .char-dash__icon-btn)
   so the GM Screen's arrange affordance is identical to the character dashboard's.
   #7 (2026-06-27): buttons made smaller/denser — same affordance, less air. */
.gm-screen__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs, 0.4rem);
}
.gm-screen__actions:empty {
  display: none;
}

/* Smaller, denser action buttons (#7). The Arrange control keeps its char-dash
   icon-button affordance (char-dashboard.css owns the base skin) — we only tighten
   its box here, scoped to the GM Screen so the character dashboard is untouched. */
.gm-screen__arrange.char-dash__icon-btn {
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
}
.gm-screen__arrange.char-dash__icon-btn svg {
  width: 1rem;
  height: 1rem;
}
/* #2 batch-9 (KDL 2026-06-28): vertically align the action row. The Arrange
   icon-button is a fixed 1.85rem box (batch-3 trim); the base .btn's vertical
   padding (0.6rem) + line-height made "Add note" a DIFFERENT total height, so
   `align-items: center` centered two mismatched boxes and the row read uneven.
   Match the button to the same 1.85rem height (zero vertical padding, line-height
   1), so flex centering lands both controls on one clean center. Keeps the
   batch-3 smaller/denser trim — same height as the trimmed Arrange box. */
.gm-screen__add-section {
  height: 1.85rem;
  padding: 0 var(--space-sm);
  font-size: var(--text-sm);
  line-height: 1;
}
.gm-screen__add-section svg {
  vertical-align: -2px;
  margin-right: 0.3rem;
  width: 0.85rem;
  height: 0.85rem;
}

/* The editbar reuses the char-dash editbar skin; pull it tight to the board. */
.gm-screen__editbar {
  margin-bottom: var(--space-sm);
}

/* ---- The board: one dense 3-column drag grid ----------------------------- */
/* Both reference cards and note cards live in this single char-dash-style grid so
   every card is movable under one persisted layout. Equal columns (the GM screen's
   cards are uniform reference blocks, unlike the character dashboard's weighted
   columns) and a tighter gap than the char dashboard keep the screen DENSE — the
   "trim it up" ask. Columns collapse to two then one as the shell narrows. */
.gm-board.char-dash__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}
.gm-board .char-dash__col {
  gap: var(--space-md);
}

@media (max-width: 1180px) {
  .gm-board.char-dash__grid {
    grid-template-columns: 1fr 1fr;
  }
  .gm-board .char-dash__col--right {
    grid-column: 1 / -1;
  }
}
@media (max-width: 760px) {
  .gm-board.char-dash__grid {
    grid-template-columns: 1fr;
  }
  .gm-board .char-dash__col--right {
    grid-column: auto;
  }
}

/* ---- Reference card ------------------------------------------------------ */
/* Block-flow inside its flex column now (no longer a multi-column masonry item).
   Tighter padding than before for a denser, less-sprawling card. */
.gm-card {
  display: block;
  width: 100%;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-sm) var(--space-sm) var(--space-sm);
}

.gm-card__title {
  margin: 0 0 var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-heading-ui);
  font-size: var(--text-h5);
  font-weight: 600;
  letter-spacing: var(--ls-cinzel-caps);
  text-transform: uppercase;
  color: var(--color-accent);
}

.gm-card__body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.38;
  color: var(--color-text);
}

/* ---- Injected content: headings ----------------------------------------- */
/* The canvas blocks use h1 as the section subhead, h2-h4 as nested labels. We
   normalise them to a tight, readable scale so cards stay compact — the card's
   own title already names the block, so an injected h1 reads as a minor heading. */

.gm-card__body > :first-child { margin-top: 0; }
.gm-card__body > :last-child { margin-bottom: 0; }

/* Every block's html leads with an <h1> that repeats the block title — and the
   card already renders that title as its styled header (.gm-card__title). Hide
   the leading h1 so the title shows once, while still injecting block.html as-is.
   Only a LEADING h1 is suppressed; any deeper h1 in the body still renders. */
.gm-card__body > h1:first-child { display: none; }

/* Subsection labels: each reads as a distinct, scannable label block. Accent
   color (torchlight) + uppercase + letter-spacing makes sub-sections (e.g.
   Distance / Activity / Reaction / Treasure within "Random Encounters") pop at
   a glance. A hairline under h2 separates major sub-blocks; tighter top/bottom
   rhythm keeps each heading visually attached to its content. The h2/h3/h4 size
   and weight step keeps a sensible nesting hierarchy. */
.gm-card__body h1,
.gm-card__body h2,
.gm-card__body h3,
.gm-card__body h4 {
  font-family: var(--font-heading-ui);
  color: var(--color-accent);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--ls-cinzel-caps);
  margin: var(--space-sm) 0 var(--space-xs);
}

.gm-card__body h1 { font-size: 0.95rem; font-weight: 700; }

.gm-card__body h2 {
  font-size: 0.86rem;
  font-weight: 700;
  padding-bottom: 0.1rem;
  border-bottom: 1px solid var(--color-border);
}

.gm-card__body h3 { font-size: 0.8rem; font-weight: 600; }

.gm-card__body h4 {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-cornflower);
}

.gm-card__body h1 strong,
.gm-card__body h2 strong,
.gm-card__body h3 strong,
.gm-card__body h4 strong { font-weight: 600; }

/* ---- Injected content: paragraphs + lists ------------------------------- */

.gm-card__body p {
  margin: var(--space-xs) 0;
}

.gm-card__body strong {
  color: var(--color-heading);
  font-weight: 600;
}

.gm-card__body ul {
  margin: var(--space-xs) 0;
  padding-left: 1.1rem;
  list-style: none;
}

.gm-card__body li {
  position: relative;
  margin: 0.15rem 0;
  padding-left: 0.2rem;
}

/* A subtle OSR bullet rather than the default disc. */
.gm-card__body li::before {
  content: "\2022";
  position: absolute;
  left: -0.7rem;
  color: var(--color-accent);
}

/* ---- Injected content: tables ------------------------------------------- */
/* Tight reference tables: full width, subtle row separators, mono numerals in
   the first column read like a die-result column on a real screen. */

.gm-card__body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-xs) 0 var(--space-sm);
  font-size: 0.8rem;
  /* Let header/body cells wrap so a wide label (e.g. "2d6 + Cha Mod") never
     forces the table past its card on a narrow column. */
  word-break: break-word;
}

.gm-card__body thead th {
  text-align: left;
  font-family: var(--font-heading-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--ls-cinzel-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0.2rem 0.4rem;
  border-bottom: 1px solid var(--color-border);
}

.gm-card__body tbody td {
  padding: 0.18rem 0.4rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  color: var(--color-text);
}

.gm-card__body tbody tr:last-child td {
  border-bottom: none;
}

/* First column tends to be a die/range value — give it mono and a touch of
   accent so it reads as the "roll" column. */
.gm-card__body tbody td:first-child {
  font-family: var(--font-mono);
  color: var(--color-accent);
  white-space: nowrap;
  width: 1%;
}

/* ============================================================
   User note cards (#9 / #3, 2026-06-27) — the GM's own free-form sections rendered
   as forge-style cards (char-dash__panel skin) INSIDE the unified board grid,
   alongside the reference cards. The card skin + drag affordances come from
   char-dashboard.css; here we add the note body type + the danger tool tint.
   ============================================================ */

/* The note card body: free text, line breaks preserved. */
.gm-section__body {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--color-text);
}
/* Delete tool reads with a danger tint so it's distinct from the edit chevron. */
.gm-section__tool--danger:hover {
  color: var(--color-danger, #c0392b);
}

/* ============================================================
   Print — the "one-pager". Hide the app chrome (header, nav, footer, toasts)
   and let the cards flow into compact print columns that fit the page with no
   page-level overflow. The board keeps multi-column; we trim color/borders for
   ink economy while keeping the row/header separators legible.
   ============================================================ */

@media print {
  .app-header,
  .mode-bar,
  .app-footer,
  .toast-region,
  .gm-screen__filter,
  .gm-screen__actions,
  .gm-screen__editbar,
  .char-dash__drag-handle,
  #crit-overlay-container {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  /* Print as a dense multi-column flow rather than the 3-fixed-column screen grid,
     so cards pack tightly into the one-pager. Override the grid display + collapse
     the columns into block children that flow through the print columns. */
  .gm-board.char-dash__grid {
    display: block;
    column-width: 15rem;
    column-gap: 0.5rem;
  }
  .gm-board .char-dash__col {
    display: contents;
  }

  .gm-screen__title {
    color: #000 !important;
  }

  .gm-card {
    break-inside: avoid;
    background: #fff !important;
    border: 1px solid #999 !important;
    border-left: 2px solid #333 !important;
    margin-bottom: 0.5rem;
    padding: 0.3rem 0.5rem 0.4rem;
  }

  .gm-card__title { color: #000 !important; border-bottom-color: #999 !important; }
  .gm-card__body,
  .gm-card__body h1,
  .gm-card__body h2,
  .gm-card__body h3,
  .gm-card__body h4,
  .gm-card__body strong,
  .gm-card__body td { color: #000 !important; }
  .gm-card__body li::before,
  .gm-card__body tbody td:first-child { color: #333 !important; }
  /* Drop the highlight wash for ink economy; matched text prints plain. */
  .gm-mark { background: transparent !important; color: #000 !important; }
  .gm-card__body thead th,
  .gm-card__body tbody td { border-bottom-color: #bbb !important; }
}