/* ==========================================================================
   ascii.css — the text-mode look for real HTML elements, in every mode.

   Cards and popups are monospace text in an ASCII frame. In plain mode the
   frame is the --ascii-box border image (base.css), which fits any size; in
   game mode game.css swaps it for the exact per-card frame that
   js/game/level.js writes into ::before.
   ========================================================================== */

.card {
  position: relative;
  padding: clamp(1rem, 2.6vw, 1.6rem) clamp(1rem, 3vw, 2rem);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  background: var(--paper);
  border: solid;
  border-width: 16px 10px;
  border-image: var(--ascii-box) 16 10 round;
  contain: layout paint style;
}


.meta {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.75em;
  font-variant-numeric: tabular-nums;
}
.meta .org { font-weight: 700; color: var(--ink); }
.meta .when { color: var(--ink-faint); }

.tags {
  display: flex;
  flex-wrap: wrap;
  margin: 1em 0 0;
  list-style: none;
}
.tags li { margin: 0; }

.items { margin: 1em 0 0; list-style: none; }
.item-title, .item-by, .item-note { display: block; }

/* In a descent, an item that has been brushed past inks its note in. */
.item[data-grazed] .item-note { color: var(--accent-ink); }

.contact-list { padding: 0; margin: 1em 0 0; list-style: none; }
.contact-list li { margin-bottom: 0.3rem; }

.card *, .reader-body * {
  font-family: inherit;
  font-size: inherit;
  font-style: normal;
}

.card h1, .reader-body h1,
.card h2, .reader-body h2 {
  display: block;
  margin: 0 0 0.6em;
  padding: 0;
  background: none;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.card h1, .reader-body h1 { font-size: 26px; }
.card h2::before, .reader-body h2::before { content: "## "; color: var(--accent); }
.card h1::after, .reader-body h1::after,
.card h2::after, .reader-body h2::after {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--ink-faint);
}
.card h1::after, .reader-body h1::after { content: "================================================================"; }
.card h2::after, .reader-body h2::after { content: "----------------------------------------------------------------"; }

.card .lede, .reader-body .lede { color: var(--ink-soft); }
.card .meta, .reader-body .meta { gap: 0 1ch; color: var(--ink-soft); }
.card .meta .when::before, .reader-body .meta .when::before { content: "("; }
.card .meta .when::after, .reader-body .meta .when::after { content: ")"; }

.card .hint, .reader-body .hint {
  border-top: 0;
  padding-top: 0;
  color: var(--accent-ink);
}
.card .hint::before, .reader-body .hint::before {
  content: "- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -";
  display: block;
  overflow: hidden;
  white-space: nowrap;
  color: var(--ink-faint);
}

.card ul, .reader-body ul { padding-left: 2ch; list-style: none; }
.card ul > li, .reader-body ul > li { position: relative; }
.card ul > li::before, .reader-body ul > li::before {
  content: "*";
  position: absolute;
  left: -2ch;
  color: var(--accent);
}

.card .tags, .reader-body .tags { gap: 0 1ch; padding: 0; }
.card .tags li, .reader-body .tags li { padding: 0; }
.card .tags li::before, .reader-body .tags li::before { content: "["; position: static; color: var(--ink-faint); }
.card .tags li::after, .reader-body .tags li::after { content: "]"; color: var(--ink-faint); }

.card .items, .reader-body .items { padding: 0; }
.card .item, .reader-body .item { padding: 0.3em 0 0.3em 2ch; border: 0; }
.card .item::before, .reader-body .item::before { content: ">"; left: 0; }
.card .item-title, .reader-body .item-title { font-weight: 700; }
.card .item-by, .reader-body .item-by,
.card .item-note, .reader-body .item-note { color: var(--ink-soft); }