/* Team and captain tactics.

   Tokens only, the way finder.css does it: nothing here hard codes a colour,
   and every gap comes off the rhythm ladder in styles.css. The reading column
   is the measure and the tree is the canvas, per cricket-desktop. */

.tac {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 14px; padding: var(--s4);
  margin: var(--s4) 0 0;
}

/* ---------- the meter ----------
   The count of situations still reachable. The bar is a separate element from
   anything the walker rebuilds, because a transition on a node that is
   replaced every render never animates: the diagnosis meter shipped that way
   once and looked correct in a screenshot. */
.tac__meter { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tac__meter-n {
  font-family: var(--font-display); font-size: 2rem; line-height: 1;
  color: var(--red); font-weight: 700; letter-spacing: -0.03em;
}
.tac__meter-l { font-size: 0.94rem; color: var(--ink-soft); }
.tac__bar {
  flex: 1 1 100%; height: 4px; border-radius: 2px;
  background: var(--rule-soft); overflow: hidden; margin-top: var(--s1);
}
.tac__bar i {
  display: block; height: 100%; width: 8%; background: var(--red);
  transition: width .32s ease;
}

/* ---------- the trail ---------- */
.tac__trail { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }
.tac__crumb {
  font-family: var(--font-ui); font-size: 0.86rem; line-height: 1.2;
  padding: 7px 12px; min-height: 34px;
  background: var(--paper-card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 999px; cursor: pointer;
}
.tac__crumb:hover { border-color: var(--green); }
.tac__crumb--again { color: var(--red); border-style: dashed; }

/* ---------- the questions ---------- */
.tac__q {
  font-family: var(--font-display); font-size: 1.22rem; font-weight: 600;
  margin: var(--s4) 0 var(--s2); letter-spacing: -0.015em; max-width: var(--measure);
}
.tac__opts { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tac__opts:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tac__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; min-height: 52px; text-align: left;
  background: var(--paper-card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 10px; cursor: pointer;
  font-family: var(--font-ui); font-size: 1rem; line-height: 1.3;
}
.tac__opt:hover { border-color: var(--green); background: var(--rule-soft); }
.tac__opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tac__opt-n {
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; color: var(--ink-faint); flex: 0 0 auto;
}

/* ---------- the situation, once the three questions are answered ---------- */
.tac__sit { margin-top: var(--s4); }
.tac__sit-h, .tac__answer-h {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-size: 1.32rem; font-weight: 600;
  margin: 0 0 var(--s1); letter-spacing: -0.018em;
}
.tac__sit-h .i5, .tac__answer-h .i5 { flex: 0 0 44px; width: 44px; height: 44px; }
.tac__sit-s { margin: 0; color: var(--ink-soft); max-width: var(--measure); }

.tac__perms { display: grid; gap: 8px; }
.tac__perm {
  text-align: left; padding: 13px 16px; min-height: 48px;
  background: var(--paper-card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 10px; cursor: pointer;
  font-family: var(--font-ui); font-size: 1rem; line-height: 1.4;
}
.tac__perm:hover { border-color: var(--green); background: var(--rule-soft); }
.tac__perm:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- the answer ----------
   Three parts, always in the same order, each one labelled. The order is what
   it is because it is the order they matter in: what is coming, the one call,
   then what the other ten do. */
.tac__answer {
  margin-top: var(--s4); background: var(--paper-card);
  border: 1px solid var(--rule); border-radius: 12px; padding: var(--s4);
}
.tac__part { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 0 16px;
  padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.tac__part-k {
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5;
}
.tac__part--next .tac__part-k { color: var(--amber); }
.tac__part--captain .tac__part-k { color: var(--red); }
.tac__part--team .tac__part-k { color: var(--green); }
.tac__part-b { margin: 0; max-width: var(--measure); }
.tac__again { margin: var(--s3) 0 0; }
.tac__again button {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: 0.94rem; color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
}
.tac__again button:hover { color: var(--red); border-bottom-color: var(--red); }
.tac__no { margin: var(--s3) 0 0; color: var(--ink-soft); }

/* ---------- how we want to play ----------
   A chunk per principle, with whose idea it is under the heading. The name is
   an attribution and not a byline, so it sits small and quiet under the
   heading rather than above it as an eyebrow. */
.prin { padding-top: var(--s4); }
.prin:first-child { padding-top: 0; }
.prin .subhead { margin-top: 0; }
.prin__who {
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--red);
  margin: 0 0 var(--s2);
}

/* The words themselves, under the paraphrase that summarises them.

   It reuses `.q` from styles.css rather than inventing a second quotation
   look: the sources page and this page have to agree about what a quotation
   is on this site. What changes here is only its place in the rhythm, and the
   left bar, which marks the start of the text and belongs at the text's own
   edge. That is a marker rather than a rule across the page, so it is not the
   hairline fault and `_check_desktop.py` rule 2 leaves it alone.

   The measure caps the words and never the box, so the figure spans and the
   sentences inside it stop. */
.prin__q {
  margin: var(--s3) 0 0; padding: var(--s2) 0 var(--s2) var(--s3);
  border-top: none; border-left: 2px solid var(--rule-soft);
  max-width: none;
}
.prin__q:last-child { border-bottom: none; }
.prin__q blockquote p { font-size: 1.04rem; max-width: var(--measure); }
.prin__q figcaption { font-size: 0.85rem; max-width: var(--measure); }

/* ---------- the whole tree, written out under the quiz ---------- */
.tacs { padding-top: var(--s5); }
.tacs__head {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-size: 1.32rem; font-weight: 600;
  margin: 0 0 var(--s1); letter-spacing: -0.018em;
}
.tacs__mark { flex: 0 0 40px; }
.tacs__mark .i5 { width: 40px; height: 40px; }
.tacs__stand { margin: 0 0 var(--s3); color: var(--ink-soft); max-width: var(--measure); }
.tacp { border-top: 1px solid var(--rule); padding: var(--s3) 0; }
.tacp__label {
  font-family: var(--font-hand); font-size: 1.02rem; font-weight: 700;
  margin: 0 0 var(--s1); color: var(--ink); letter-spacing: -0.01em;
}
.tacp p { margin: 0 0 5px; font-size: 0.96rem; line-height: 1.55;
  color: var(--ink-soft); max-width: var(--measure); }
.tacp p:last-child { margin-bottom: 0; }
.tacp__k {
  font-family: var(--font-hand); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; margin-right: 8px;
}
.tacp__next .tacp__k { color: var(--amber); }
.tacp__captain .tacp__k { color: var(--red); }
.tacp__team .tacp__k { color: var(--green); }

@media (max-width: 640px) {
  .tac { padding: var(--s3); border-radius: 12px; }
  .tac__opts { grid-template-columns: 1fr; }
  .tac__part { grid-template-columns: 1fr; gap: 4px; }
  .tac__answer { padding: var(--s3); }
}