/* Shared form styling. Colours come from the tokens in cave.css. */

/* ── Column width ─────────────────────────────────────────────
   minima's wrapper is 740px inside, which wraps Dig's four stage cards 3 + 1
   and squeezes the assay matrix. Every room loads this file, so widening here
   gives Dig, Stockpile, Haul and Details one column width instead of Dig being
   the odd wide room. Header and footer wrappers widen with it, so the nav
   still lines up with the content. */
@media (min-width: 900px) {
  .wrapper {
    max-width: 1140px;
  }
}

/* ── Warning banner (noscript only) ───────────────────────────── */
.warn-banner {
  background: rgba(224, 90, 77, 0.12);
  border: 1px solid var(--ember);
  color: #f0a49b;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

/* ── Form layout ──────────────────────────────────────────────── */
fieldset {
  border: 1px solid var(--rock-edge);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  background: var(--rock-deep);
}

legend {
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0 0.5rem;
  color: #e8ebef;
}
legend .sub {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--text-faint);
}

.hint {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.role-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
}
.role-grid input,
.role-grid select {
  font-size: 0.95rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--rock-edge);
  border-radius: 4px;
  background: var(--rock);
  color: var(--text);
  transition: border-color 0.15s;
}
.role-grid input:focus,
.role-grid select:focus {
  border-color: var(--lamp);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(122, 162, 247, 0.18);
}

.scout-grid {
  grid-template-columns: 2fr 1fr 1fr;
}

/* ── Topics textarea ──────────────────────────────────────────── */
textarea#topics {
  width: 100%;
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  font-size: 0.9rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rock-edge);
  border-radius: 4px;
  background: var(--rock);
  color: var(--text);
  resize: vertical;
  box-sizing: border-box;
}
textarea#topics:focus {
  border-color: var(--lamp);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(122, 162, 247, 0.18);
}

/* ── BibTeX upload ────────────────────────────────────────────── */
.bib-upload {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.bib-upload input[type="file"] {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: var(--text-dim);
}
.bib-upload input[type="file"]::file-selector-button {
  font: inherit;
  margin-right: 0.6rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--rock-lit);
  border-radius: 4px;
  background: var(--rock);
  color: var(--text);
  cursor: pointer;
}
.bib-upload input[type="file"]::file-selector-button:hover {
  background: var(--rock-edge);
}

/* ── Button bar ───────────────────────────────────────────────── */
.button-bar {
  display: flex;
  gap: 1rem;
  margin: 2rem 0 3rem;
  align-items: center;
}
.button-bar button {
  font-size: 1rem;
  padding: 0.65rem 1.5rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.button-bar button:active {
  transform: scale(0.97);
}

/* Primary action carries the ore colour: this is what you came for. */
#run-filter {
  background: var(--gold);
  color: #221a00;
}
#run-filter:hover {
  background: #ffc730;
}
#run-filter:disabled {
  background: var(--pyrite-dim);
  color: var(--text-faint);
  box-shadow: none;
  cursor: not-allowed;
}

/* The one button the page exists for. Big, and lit like a lamp so the eye
   lands on it before the advanced blocks below. */
#run-filter {
  font-size: 1.1rem;
  padding: 0.85rem 2.4rem;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 1px rgba(245, 179, 1, 0.35),
              0 6px 22px -6px rgba(245, 179, 1, 0.55);
}
#run-filter:hover {
  box-shadow: 0 0 0 1px rgba(255, 199, 48, 0.5),
              0 8px 26px -6px rgba(245, 179, 1, 0.75);
}

/* ── Run status ────────────────────────────────────────────────── */
.run-status {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
}
.run-status.info {
  background: rgba(122, 162, 247, 0.12);
  border: 1px solid var(--rock-lit);
  color: var(--text);
}
.run-status.error {
  background: rgba(224, 90, 77, 0.12);
  border: 1px solid var(--ember);
  color: #f0a49b;
}

/* ── Brief list (briefs.md) ───────────────────────────────────── */
.brief-list {
  list-style: none;
  padding: 0;
}
.brief-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rock-edge);
  font-size: 1.05rem;
}
.brief-subtitle {
  color: var(--text-faint);
  font-size: 0.9rem;
}

.empty {
  color: var(--text-faint);
  font-style: italic;
}

/* ── Brief layout ─────────────────────────────────────────────── */
.brief-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--rock-edge);
}
.brief-header h1 {
  margin-bottom: 0.25rem;
}
.brief-title {
  color: var(--text-dim);
  font-size: 1.1rem;
  margin: 0;
}

.brief-footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rock-edge);
  font-size: 0.85rem;
  color: var(--text-faint);
}

/* ── WIP markers: pyrite, because the signal only looks like gold ── */
.wip {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(154, 143, 92, 0.18);
  color: var(--pyrite);
  border: 1px solid var(--pyrite-dim);
}

.wip-note {
  border-left: 3px solid var(--pyrite-dim);
  padding-left: 0.6rem;
  margin-top: 0.5rem;
}

.status-banner {
  border: 1px solid var(--rock-edge);
  border-left: 4px solid var(--rock-lit);
  background: var(--rock-deep);
  border-radius: 4px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1.2rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-dim);
}

/* A room that is open but not finished. Pyrite, the same colour the nav's WIP
   tag uses, so the two read as one claim: looks like gold, is not yet. */
.wip-banner {
  border: 1px solid var(--pyrite-dim);
  border-left: 4px solid var(--pyrite);
  background: rgba(154, 143, 92, 0.09);
  border-radius: 4px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-dim);
}
.wip-banner strong {
  color: var(--pyrite);
  letter-spacing: 0.05em;
}

/* ── Table of contents ────────────────────────────────────────
   For one long reference page. Built by kramdown from the headings, so it
   cannot drift out of step with them the way a hand-written list would.
   Two levels: sections, and the numbered steps of the assay under it. */
.toc-card {
  background: var(--rock-deep);
  border: 1px solid var(--rock-edge);
  border-left: 4px solid var(--rock-lit);
  border-radius: 4px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 2rem;
  font-size: 0.9rem;
}
.toc-card > p {
  margin: 0 0 0.5rem;
  color: var(--text-dim);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.toc-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc-card li {
  margin: 0.15rem 0;
  line-height: 1.4;
}
/* Nested entries are the steps inside a section: indented, smaller, and dimmer,
   so the top level still reads as the page's shape at a glance. */
.toc-card ul ul {
  padding-left: 0.9rem;
  margin: 0.1rem 0 0.35rem;
  border-left: 1px solid var(--rock-edge);
}
.toc-card ul ul li {
  font-size: 0.85rem;
}
.toc-card ul ul a,
.toc-card ul ul a:visited {
  color: var(--text-dim);
}
.toc-card a:hover {
  color: var(--gold);
}

/* Wide tables — measurement tables run past the column on a narrow screen, and
   a page that scrolls sideways as a whole is worse than one that scrolls a
   table. minima gives table a wrapper only inside .post-content, so this
   targets the table itself. The app-rendered tables on the Dig page
   (.wagon-table, #assay-table) size themselves to width:100% and manage their
   own overflow — this rule's width:max-content would shrink them to the
   longest category string, so they opt out. */
.post-content table:not(.wagon-table):not(#assay-table) {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  width: max-content;
}

/* Formula blocks: monospace, and they must never wrap — a broken alignment in
   a fraction is a different formula. */
.post-content pre {
  overflow-x: auto;
}

/* ── Cave walls: pixel art in the page gutters ─────────────────
   Scroll down a page like descending a mine shaft. Absolutely positioned
   against .page-content (see cave.scss) so a strip's height tracks the whole
   page, not just the viewport. Same sprite language as assets/arxave-logo.svg:
   8px blocks, crisp edges, no anti-aliasing.

   Every room loads this file, and every room gets walls — but not the same
   ones. Dig is raw rock with ore still in it, Stockpile is that rock cut and
   stacked in bins, Haul is the stone laid out on market counters under price
   tags. The rules are shared; the tile is a variable, so a room says which
   wall it is in one line and nothing else has to change. */
.cave-wall {
  /* Default tile: raw cave rock. A room overrides this and inherits
     everything else. */
  --cave-wall-art: url('cave-wall.svg');

  position: absolute;
  top: 0;
  bottom: 0;
  /* A conservative estimate of the gutter outside the content column —
     deliberately undershoots (minima's own max-width shifts at its
     800px breakpoint, and the dev preview's shell is wider still) so
     this never eats into the text. Shrinks to 0 on narrower viewports;
     background-position keeps the inner tip (near the content) in view
     and crops the outer bulk first as it shrinks. Text still wins if
     the estimate is ever wrong: page content sits a layer above. */
  width: clamp(0px, calc((100vw - 1220px) / 2), 180px);
  z-index: 0;
  pointer-events: none;
  background-color: var(--cave-air);
  background-image: var(--cave-wall-art);
  background-repeat: repeat-y;
  background-position: right top;
  background-size: 200px 320px;
  image-rendering: pixelated;
}
/* Below this the gutter is a sliver, and a 20px strip of rock reads as
   noise rather than a wall — better none at all. */
@media (max-width: 1340px) {
  .cave-wall {
    display: none;
  }
}

.cave-wall-left {
  left: 0;
}
.cave-wall-right {
  right: 0;
  /* Mirrored, so the two gutters are one cave rather than two copies of the
     same wall facing the same way. */
  transform: scaleX(-1);
}

/* Stockpile: the same stone, cut square and stacked in bins. Sorted, because
   this is the room where everything is already filed. */
.cave-wall-stockpile {
  --cave-wall-art: url('stockpile-wall.svg');
}

/* Haul: market stalls. Awnings, stone laid out on counters, price tags, a
   scale. This is the room where the night's stone is offered. */
.cave-wall-haul {
  --cave-wall-art: url('haul-wall.svg');
}

/* The walls are decoration and always lose to text. They are positioned with
   z-index 0, and an unpositioned sibling would paint *under* them if the gutter
   estimate ever came out too wide — so every sibling that is not a wall gets
   lifted one layer. `:not(.cave-wall)` matters: without it this rule would
   re-position the walls themselves and drop them into the flow. */
.post-content > *:not(.cave-wall),
#app {
  position: relative;
  z-index: 1;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 600px) {
  .role-grid,
  .scout-grid,
  .weight-grid {
    grid-template-columns: 1fr;
  }
  .button-bar {
    flex-direction: column;
    align-items: stretch;
  }
}