/*
  The tools: the places a player or a builder authors something in. The frame is base_tool.html; the
  windows, keys, fields and chips are the Hall's (hall.css, gump.css, components.css) and desk.css's.

  Order: the page, the bench (sections, work, proof), the sections' keys, the foot of actions, what the
  game will print, a guard for what cannot be undone, small parts, narrow screens.
*/

/* ------------------------------------------------------------------ the page */

.tool-wrap { padding-top: 1.6rem; padding-bottom: 1.2rem; }
.tool-wrap > .note { margin-top: 0; margin-bottom: 1.2rem; }
.banner-slim { min-height: 8.4rem; padding: 2.4rem 0 1rem; }
.banner-slim .title-art { height: 40px; }

/* ------------------------------------------------------------------ the bench */

/* Sections down the left, the work in the middle and the proof on the right. The two outer columns
   keep their place while the middle scrolls, so the keys that change section and the text as the game
   will print it are in front of you wherever you are in a long form. */
.bench {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr) minmax(19rem, 25rem);
  gap: 1.4rem;
  align-items: start;
}
.bench-lean { grid-template-columns: 12.5rem minmax(0, 1fr); }
.bench-open { grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem); }
.bench > * { min-width: 0; }
.bench .gump { margin: 0; }
/* The one column of a stack is as wide as the stack and no wider: a table in it scrolls in its own wrapper. */
.bench-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-content: start; }
.bench-rail, .bench-proof { position: sticky; top: .9rem; align-self: start; }
.bench-proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; max-height: calc(100vh - 6.2rem); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--brass-lo) transparent; }
.bench-proof .gump { flex: none; }
.bench-proof[hidden] { display: none; }

/* ------------------------------------------------------------------ the sections */

.rail-list { display: grid; gap: .1rem; margin: 0; padding: .4rem 0; list-style: none; }
.rail-tab {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  width: 100%;
  padding: .5rem .8rem;
  font: 400 16px/1.3 var(--pixel);
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brass);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 0;
}
.rail-n { color: var(--heat-3); }
.rail-end { margin-left: auto; font-size: 14px; color: var(--ink-faint); }
.rail-tab:hover, .rail-tab:focus-visible { color: var(--heat-4); background: #2a1c0e; outline: 0; }
.rail-tab[aria-selected="true"], .rail-tab[aria-current="true"] { color: var(--heat-5); background: linear-gradient(#b9531a 0 50%, #9b4314 50% 100%); }
.rail-tab[aria-selected="true"] .rail-n, .rail-tab[aria-selected="true"] .rail-end,
.rail-tab[aria-current="true"] .rail-n { color: var(--heat-5); }
.rail-tab .sig { margin-left: auto; }
.rail-hint { margin: 0; padding: .1rem .9rem .8rem; font: 400 14px/1.6 var(--read); color: var(--ink-faint); }
.rail-hint kbd { font-size: 14px; }

.tool-view[hidden] { display: none; }
.tool-view > .gump + .gump { margin-top: 1.2rem; }

/* ------------------------------------------------------------------ the foot of actions */

.toolfoot {
  position: sticky;
  bottom: 0;
  z-index: 40;
  padding: .75rem 0 .85rem;
  background: linear-gradient(#0b0908f0, #0b0908);
  border-top: 2px solid var(--brass-mid);
  box-shadow: 0 -10px 22px #000c;
}
.toolfoot-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.toolfoot-name { font: 400 16px/1.2 var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--brass); }
.toolfoot-msg { flex: 1 1 14rem; min-width: 0; margin: 0; font: 400 15px/1.45 var(--read); color: var(--ink-dim); overflow-wrap: anywhere; }
.toolfoot-msg.is-ok { color: var(--arc); }
.toolfoot-msg.is-bad { color: var(--rust); }
.toolfoot .keys { margin: 0; }
.toolfoot .key-small { min-height: 2.5rem; padding: .3rem 1.1rem .4rem; }

/* ------------------------------------------------------------------ what the game will print */

/* A screen that is a proof, not the game's own: it takes the width it is given, wraps what is written
   where the game would and waits for nothing. */
.screen.screen-proof { max-width: none; padding: .9rem 1.05rem 1rem; font-size: 15px; line-height: 1.6; white-space: pre-wrap; min-height: 3.4rem; }
.screen.screen-proof > :last-child::after { content: none; }
.screen.screen-proof.empty::before { content: "Nothing to show yet."; color: var(--ink-faint); text-shadow: none; }
.screen-caption { margin: 0 0 .4rem; font: 400 14px/1.3 var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--brass-mid); }
.screen-stack { display: grid; gap: 1rem; }
/* The words as written, for a code the player will copy. */
.codebox {
  display: block;
  width: 100%;
  min-height: 6rem;
  max-height: 14rem;
  padding: .7rem .9rem;
  font: 400 14px/1.55 var(--pixel);
  color: var(--arc);
  resize: vertical;
  background: #0c0b0a;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--well-hi);
}
.codebox:focus { outline: 0; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--heat-3); }

/* ------------------------------------------------------------------ a guard for what cannot be undone */

.guard {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .35rem .6rem .35rem .85rem;
  background: repeating-linear-gradient(135deg, #2a1f06 0 8px, #181004 8px 16px);
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #8f6a14, inset -2px -2px 0 2px #3a2a08;
}
.guard-legend { font: 400 14px/1 var(--pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--ember-hi); }

/* ------------------------------------------------------------------ small parts */

/* What a word means, set beside the chip that carries it. */
.legend { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.legend li { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: .3rem .7rem; align-items: baseline; font: 400 15px/1.55 var(--read); color: var(--ink); }
.legend .chip { justify-self: start; white-space: nowrap; }
.bench .dots dd { overflow-wrap: normal; }
.bench .dots dd .chip { white-space: nowrap; }

.tool-line { margin: 0 0 1rem; font: 400 15px/1.65 var(--read); color: var(--ink); }
.tool-line:last-child { margin-bottom: 0; }
.tool-small { margin: .5rem 0 0; font: 400 14px/1.6 var(--read); color: var(--ink-dim); }
.tool-small code, .tool-line code { padding: 0 .3em; font: 400 15px/1.5 var(--pixel); color: var(--heat-4); background: #1a140d; }
.ticks { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.tick { display: inline-flex; align-items: center; gap: .55rem; min-height: 2rem; font: 400 16px/1.3 var(--pixel); letter-spacing: .04em; text-transform: uppercase; color: var(--brass); cursor: pointer; }
.tick input { width: 1.4rem; height: 1.4rem; margin: 0; accent-color: var(--heat-3); cursor: pointer; }
.tick:hover { color: var(--heat-4); }
.fields { display: grid; gap: 1rem; }
.fields-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-note { margin: .35rem 0 0; font: 400 14px/1.5 var(--read); color: var(--ink-faint); }

/* ------------------------------------------------------------------ narrow screens */

@media (max-width: 1100px) {
  .bench, .bench-lean, .bench-open { grid-template-columns: minmax(0, 1fr); }
  .bench-rail, .bench-proof { position: static; max-height: none; overflow: visible; }
  .rail-list { display: flex; flex-wrap: wrap; gap: .3rem; padding: .5rem; }
  .rail-tab { width: auto; }
  .rail-hint { display: none; }
}
@media (max-width: 640px) {
  .fields-pair { grid-template-columns: minmax(0, 1fr); }
  .toolfoot-name { display: none; }
  .banner-slim { min-height: 7rem; padding-top: 1.6rem; }
}