/* /techniques.html: the spot-check page for technique definitions. One
   panel per category, a card per technique, and a row of small boards per
   variant (each build step with its mirror beside it, the clears as
   pills between them). The boards are SVG from techniques/board-view.js. */

body.page-techniques { --mode: var(--mino-T); }

.tq-sub {
  max-width: 46rem;
  margin: 0.4rem 0 0;
}

.tq-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.8rem 0 1rem;
}

.tq-jump a {
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--muted);
  font-size: var(--text-min);
  font-weight: 700;
  text-decoration: none;
}

.tq-jump a:hover {
  border-color: var(--mode-line);
  color: var(--text);
}

.tq-body {
  display: grid;
  gap: 1.2rem;
}

.tq-category > .panel-title {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
}

.tq-count {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}

.tq-empty {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-min);
}

.tq-list {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tq-tech {
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.18);
}

.tq-tech.is-draft {
  opacity: 0.45;
}

.tq-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  align-items: baseline;
}

.tq-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.tq-ja {
  color: var(--muted);
  font-size: 0.9rem;
}

.tq-head a {
  color: var(--accent);
  font-size: var(--text-min);
}

.tq-id {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-min);
}

.tq-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  margin: 0.35rem 0 0;
  padding: 0;
  color: var(--muted);
  font-size: var(--text-min);
  list-style: none;
}

.tq-facts b {
  color: var(--text);
  font-weight: 700;
}

.tq-error {
  margin: 0.4rem 0 0;
  color: #f87171;
  font-size: var(--text-min);
}

.tq-variant {
  margin-top: 0.7rem;
}

.tq-variant-name {
  margin: 0 0 0.3rem;
  font-size: var(--text-min);
  font-weight: 700;
}

.tq-sources {
  margin: 0 0 0.4rem;
  color: var(--muted);
  font-size: var(--text-min);
}

.tq-sources a {
  color: inherit;
}

.tq-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-end;
}

.tq-step {
  display: grid;
  gap: 0.25rem;
  justify-items: center;
  margin: 0;
}

.tq-pair {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
}

.tq-step figcaption {
  color: var(--muted);
  font-size: var(--text-min);
}

.tq-clear {
  align-self: center;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--mode-line);
  border-radius: 999px;
  background: var(--mode-faint);
  color: var(--text);
  font-size: var(--text-min);
  font-weight: 700;
  white-space: nowrap;
}

.tq-clear.is-complete {
  border-color: var(--text);
}

.tq-completes {
  margin-left: 0.4rem;
  color: var(--muted);
  font-size: var(--text-min);
  font-weight: 400;
}

.tv-board {
  display: block;
}

/* Technique callouts: the banner over a well (ui/technique-banner.js) and
   the dashed outlines of a technique's still-empty cells (renderer.js
   planClasses). Pages that show them link this file. */

/* The banner has the Coach banner's look (coach.css .coach-banner):
   across the top of the well three rows down, two grey lines as thick as
   the well's walls, a dark backing between them, the name in caps. It
   fades in and out and never takes a click. The name is a light cut of
   the O tile's gold, so it reads apart from Coach T's own banner. */
.technique-banner {
  --technique-c: color-mix(in srgb, var(--mino-O) 70%, #fff);
  position: absolute;
  top: calc((100% - var(--well-wall)) * 3 / 23);
  right: var(--well-wall);
  left: var(--well-wall);
  z-index: 4;
  display: flex;
  justify-content: center;
  padding: 0.7rem 0.8rem 0.8rem;
  border-block: var(--well-wall) solid #4a4b53;
  background: rgba(9, 9, 11, 0.86);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

.technique-banner.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease;
}

.technique-banner-title {
  color: var(--technique-c);
  font-size: clamp(1.05rem, calc(var(--cell, 2rem) * 0.66), 1.9rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The Japanese name follows the English one, smaller and as written. */
.technique-banner-ja {
  margin-left: 0.5em;
  color: var(--text);
  font-size: max(0.6em, var(--text-min));
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.technique-banner-ja:empty {
  display: none;
}

/* A flash (a technique just completed) pops in from a little larger. */
.technique-banner.is-flash.is-on .technique-banner-title {
  animation: technique-pop 0.3s ease-out;
}

@keyframes technique-pop {
  from {
    transform: scale(1.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .technique-banner.is-flash.is-on .technique-banner-title {
    animation: none;
  }
}

/* The outlines: a dashed line in a light cut of the piece's colour round
   each piece's empty cells. Each cell draws only its sides on the outline
   (plan-edge-t, -r, -b, -l). It uses ::before, so a cell can also carry
   the coach's ghost, which uses ::after. */
.cell.technique-plan {
  --plan-line: max(2px, calc(var(--cell, 30px) * 0.08));
  position: relative;
}

.cell.technique-plan::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0 dashed var(--plan-c, #fff);
  pointer-events: none;
}

.cell.technique-plan.plan-edge-t::before { border-top-width: var(--plan-line); }
.cell.technique-plan.plan-edge-r::before { border-right-width: var(--plan-line); }
.cell.technique-plan.plan-edge-b::before { border-bottom-width: var(--plan-line); }
.cell.technique-plan.plan-edge-l::before { border-left-width: var(--plan-line); }

.cell.technique-plan-I { --plan-c: color-mix(in srgb, var(--mino-I) 70%, #fff); }
.cell.technique-plan-J { --plan-c: color-mix(in srgb, var(--mino-J) 70%, #fff); }
.cell.technique-plan-L { --plan-c: color-mix(in srgb, var(--mino-L) 70%, #fff); }
.cell.technique-plan-O { --plan-c: color-mix(in srgb, var(--mino-O) 70%, #fff); }
.cell.technique-plan-S { --plan-c: color-mix(in srgb, var(--mino-S) 70%, #fff); }
.cell.technique-plan-T { --plan-c: color-mix(in srgb, var(--mino-T) 70%, #fff); }
.cell.technique-plan-Z { --plan-c: color-mix(in srgb, var(--mino-Z) 70%, #fff); }