/* The tactics section, layered on landing.css and motifs.css.
 *
 * `/tactics` reuses the archive's page furniture, `body.motifs-page`, `.motifs-hero`, `.motif-line`
 * and `.motif-pitch`, because they are the same kind of page dressed the same way, and adds the
 * three shapes the archive does not have: a grid of a dozen positions, an answer that opens, and an
 * index that is a list of names rather than a wall of boards.
 *
 * Written by `build_tactic_pages.py`, so the markup this styles is generated. Class names are the
 * contract between the two.
 */

/* --- The boards ---------------------------------------------------------------------------------
 *
 * `motifs.css` sizes every SVG on the page to `width: 100%`, which is right for a board and wrong
 * for the one SVG here that is not a board: the `<defs>` block carrying the piece artwork, which is
 * shipped once per page with `width="0"` and would otherwise be stretched into a full-width empty
 * box between the last position and the pitch. `display: none` would work in every browser tested
 * and is nevertheless the wrong tool, since a `<use>` referring into a `display: none` subtree is
 * only reliably rendered because the spec says the referenced content is cloned rather than
 * displayed; taking it out of flow at zero size asks nothing of that rule. */
.board-defs {
  position: absolute;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden;
}

/* The boards' own size, rather than leaning on `motifs.css`'s blanket rule for every SVG on an
   archive page. Stated here because the blanket rule is one selector away from being overridden by
   something in `ui.css`, which is exactly what happened while this was called `.mini-board`: that
   name is already the dashboard's daily card and carries `max-width: 42vw`, so on a phone these
   drew at 158px inside a 297px column. Every stylesheet is loaded on every page here, so a class
   name is a global name. */
.tactic-board {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 1;
  border-radius: 4px;
}

/* --- How to spot it --------------------------------------------------------------------------- */

.tactic-spot {
  margin: 34px auto 0;
  max-width: 68ch;
  padding: 20px 24px;
  border: 1px solid rgba(216, 172, 83, 0.24);
  border-radius: 6px;
  background: rgba(10, 8, 6, 0.5);
  text-align: left;
}

.tactic-spot h2 {
  margin: 0 0 10px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.tactic-spot p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--parchment-dim);
}

/* --- The positions ---------------------------------------------------------------------------- */

.positions-head {
  margin: 52px 0 6px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--parchment);
}

.positions-note {
  margin: 0 auto;
  max-width: 60ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--parchment-dim);
}

.position-grid {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  text-align: left;
}

.position-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(216, 172, 83, 0.2);
  border-radius: 6px;
  background: rgba(10, 8, 6, 0.55);
}

.position-board { margin: 0; }

.position-board figcaption {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.position-board figcaption b { font-weight: 400; color: var(--parchment); }
.position-rating { color: var(--parchment-dim); letter-spacing: 0.08em; }

/* The answer. Closed by default so the page still works as an exercise, and in the document either
   way so it can be read by anything that does not run scripts. */
.position-answer { margin-top: auto; }

.position-answer summary {
  cursor: pointer;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.position-answer summary:hover { color: var(--gold-bright); }

/* The shared `.motif-line` carries a bottom margin sized for the archive's single wide column,
   which is far too much inside a card. */
.position-answer .motif-line {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.7;
}

.position-play {
  font-size: 13px;
  color: var(--gold-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
}

.position-play:hover { border-bottom-color: var(--gold); }

/* --- See also --------------------------------------------------------------------------------- */

.tactic-related {
  margin: 48px auto 0;
  max-width: 68ch;
  padding-top: 20px;
  border-top: 1px solid rgba(216, 172, 83, 0.2);
  text-align: left;
}

.tactic-related h2 {
  margin: 0 0 10px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--parchment-dim);
}

.tactic-related p { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.tactic-related a { font-size: 14.5px; color: var(--gold-ink); }

.tactic-credit {
  margin: 30px auto 0;
  max-width: 62ch;
  font-size: 12.5px;
  color: var(--parchment-dim);
}

.tactic-credit a { color: var(--gold-ink); }

/* --- The index -------------------------------------------------------------------------------- */

.tactic-group { margin: 46px 0 0; text-align: left; }

.tactic-group h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  color: var(--parchment);
}

.tactic-group-blurb {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--parchment-dim);
}

.tactic-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px 22px;
}

.tactic-list li {
  display: flex;
  align-items: baseline;
  padding: 9px 12px;
  border: 1px solid rgba(216, 172, 83, 0.18);
  border-radius: 5px;
  background: rgba(10, 8, 6, 0.45);
}

.tactic-list a {
  font-size: 15px;
  color: var(--parchment);
  text-decoration: none;
}

/* The whole row is the target, not just the words: these are 240px cells on a phone and a tap that
   lands a pixel to the right of a short name like "Pin" should still open it. */
.tactic-list a { display: block; width: 100%; }
.tactic-list a:hover { color: var(--gold-bright); }