/* Techniques pages: shared by /techniques/ (the tabbed index) and every
   /techniques/<slug>/ page. Moved out of techniques/index.html on Sept 11 2026
   when the fifteen techniques became real pages. */
  /* The list runs FOUR cards across, so the wrap is wider than the other learn
     pages. The detail view stays at the shared 980px below: its step cards are
     already only two across, and stretching them just pushes the boards apart. */
  .tech-wrap { max-width: 1280px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 32px) 60px; }
  #detailView { max-width: 980px; margin: 0 auto; }
  .tech-wrap > h1, #listView > h1, .tech-intro h1 { font-family:"Nunito"; font-weight:900; font-size: clamp(30px, 5vw, 40px); letter-spacing:-1px; margin-bottom: 8px; }
  .tech-sub { color: var(--muted); font-size: 17px; margin-bottom: 30px; max-width: 38em; }

  /* Segmented tab bar, the app's Techniques control ported to the web: gray pill
     track, white raised pill on the active tab, ink-black labels with the
     selected one in its difficulty colour. Capped in width because the app's
     runs the full width of a phone and a 1200px-wide segmented control does not
     read as one. Only the active tab's cards are in the DOM. */
  .tech-tabs { display:flex; background:#ECECEF; border-radius:12px; padding:3px; max-width:620px; margin:0 auto 30px; }
  .tech-tabs button { flex:1; appearance:none; border:0; background:transparent; cursor:pointer;
    padding:8px 4px; border-radius:10px; font:inherit; font-size:15px; font-weight:800; color:#1A1A1A;
    transition: background-color .14s ease, box-shadow .14s ease; }
  .tech-tabs button:hover:not([aria-selected="true"]) { background: rgba(255,255,255,.55); }
  .tech-tabs button[aria-selected="true"] { background:#FFFFFF; box-shadow:0 1px 3px rgba(0,0,0,.1); }
  .tech-tabs button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

  /* 4 across at full width, stepping down to 3, 2 and 1. At 1280px a quarter
     card is 281px wide, which is the same card the 3-across 980px layout gave,
     so the boards do not shrink; the page just gets wider.
     4-across holds all the way down to a 1000px window, because a laptop browser
     is very often narrower than the screen it sits on and dropping to 3 the
     moment it is looks like the change never landed. Below 1280 the gap and the
     card padding tighten first, so the BOARD keeps as much width as possible;
     only under 1000px does the grid actually drop a column. */
  /* A tab holds 2 to 5 cards, so the row is a CENTRED flex line rather than a
     grid: a 2-card tab would otherwise sit in the first two columns of a
     4-column track and read as broken. The card keeps a quarter-width basis at
     every count, so a two-card tab matches a four-card one.
     Aug 19 2026: the re-tab put FIVE cards in Expert, the first tab to exceed a
     row. Centred flex wraps it to 4 + 1 with the orphan centred underneath,
     which is why this was built as a flex line and not a grid. */
  /* Centred, to sit under the centred tab bar. Hard fills the row so this
     changes nothing for it; it is the two-card tabs where a left-aligned row
     under a centred control reads as a mistake. */
  .sec-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; }
  .tech-card { flex:0 1 calc((100% - 90px) / 4); max-width:calc((100% - 90px) / 4); }
  @media (max-width: 1240px) {
    .sec-grid { gap:24px; }
    .tech-card { flex-basis:calc((100% - 72px) / 4); max-width:calc((100% - 72px) / 4); }
    .tech-illus { padding: 14px 10px; }
  }
  @media (max-width: 1080px) {
    .sec-grid { gap:18px; }
    .tech-card { flex-basis:calc((100% - 54px) / 4); max-width:calc((100% - 54px) / 4); }
    .tech-illus { padding: 12px 6px; }
    .tech-body { padding: 12px 12px 14px; }
  }
  @media (max-width: 1000px) {
    .sec-grid { gap:26px; }
    .tech-card { flex-basis:calc((100% - 52px) / 3); max-width:calc((100% - 52px) / 3); }
    .tech-illus { padding: 16px 14px; }
    .tech-body { padding: 14px 16px 16px; }
  }
  @media (max-width: 760px) {
    .tech-card { flex-basis:calc((100% - 26px) / 2); max-width:calc((100% - 26px) / 2); }
  }
  @media (max-width: 560px) {
    .tech-card { flex-basis:330px; max-width:330px; }
  }
  .tech-card { background: var(--card); border: 1.5px solid #C3C0CC; overflow:hidden;
    display:flex; flex-direction:column; }
  .tech-illus { display:flex; align-items:center; justify-content:center; padding: 16px 14px; background:#F8F8F8;
    border-top: 1px solid var(--border); }
  /* The body stretches to the card's full text height and pins "Learn more"
     to its bottom edge, so the links and the boards line up across a row. */
  .tech-body { padding: 14px 16px 16px; flex: 1 0 auto; display:flex; flex-direction:column; align-items:flex-start; }
  .tech-body .learn-link { margin-top: auto; }
  .tech-body h2 { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
  .tech-body p { color: var(--muted); font-size: 14.5px; line-height: 1.5; margin-bottom: 10px; }
  .learn-link { color: var(--accent); font-weight: 700; font-size: 14px; cursor: pointer; }
  .learn-link:hover { text-decoration: underline; }
  @media (max-width: 560px) {
    /* phones match the app: board on top, text below */
    .tech-illus { order:-1; margin-top:0; border-top:none; border-bottom:1px solid var(--border); }
  }

  /* Detail view: steps tile 2-across on desktop, stack on mobile */
  .back-link { display:inline-block; color: var(--accent); font-weight:700; margin-bottom: 16px; }
  #dSteps { display:grid; grid-template-columns:repeat(2, 1fr); gap:30px; margin-bottom: 22px; }
  @media (max-width: 820px) { #dSteps { grid-template-columns:minmax(0, 1fr); } }
  .tagline-card { background: #F2EEFF; border-radius: 14px; padding: 18px; margin-bottom: 22px;
    color: var(--accent); font-weight: 600; font-size: 16px; line-height: 1.5; }
  .step-card { background: var(--card); border: 1.5px solid #C3C0CC; padding: 18px 20px;
    display:flex; flex-direction:column; }
  .step-head { display:flex; align-items:center; gap: 10px; margin-bottom: 14px; }
  .step-head .num { width:24px; height:24px; border-radius:12px; background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; }
  .step-head h3 { font-size: 15px; font-weight: 800; }
  .step-grid { display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 10px; margin-bottom: 12px; flex:1; }
  /* The board host has to be full width or it shrink-wraps around its board and
     the fit measurement below just reads the board's own size straight back. */
  .step-grid .sg { width:100%; display:flex; justify-content:center; }
  /* Every board is a full 9x9 now, so a narrow screen scales the whole board
     down as one piece rather than side-scrolling it. Scaling beats re-rendering
     at a smaller cell size: the X Wing and Swordfish connector lines are pinned
     to candidate-dot positions, and a uniform transform keeps them exact.
     line-height:0 kills the inline-block baseline gap under the board. */
  .board-fit { display:block; line-height:0; transform-origin: top center; }
  .tag-pill { align-self:flex-start; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 800; letter-spacing:.5px; }
  .tag-pill.before { background:#F2EEFF; color: var(--accent); }
  .tag-pill.after { background:#E8FFF0; color:#1D7A4A; }
  .step-cap { color: var(--muted); font-size: 14px; line-height: 1.5; }
  .legend { display:flex; gap: 16px; flex-wrap:wrap; margin: 4px 4px 18px; }
  .legend .item { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; font-weight:500; }
  .legend .sw { width:16px; height:16px; border-radius:4px; border:1px solid rgba(96,24,192,0.33); background-color:#fff; }
  .insight { display:flex; background: var(--card); border: 1.5px solid #C3C0CC; margin-bottom: 20px; overflow:hidden; }
  .insight .bar { width: 5px; background: var(--accent); flex-shrink:0; }
  .insight .body { padding: 16px 18px; }
  .insight .t { font-size: 13px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing:.4px; margin-bottom: 6px; }
  .insight .x { font-size: 14px; line-height: 1.5; }

  /* A caution the reader has to see BEFORE trying the technique, so it sits
     above the steps. Red, not amber: amber reads as a tip, and this one costs
     a life if it is missed. Colors are the app's own Red bubble. */
  .warn { display:flex; background:#FDDAD7; border:1.5px solid #F02309; margin-bottom: 22px; overflow:hidden; }
  .warn .bar { width: 6px; background:#F02309; flex-shrink:0; }
  .warn .body { padding: 16px 18px; }
  .warn .head { display:flex; align-items:center; gap:9px; margin-bottom: 8px; }
  .warn .badge { width:20px; height:20px; border-radius:10px; background:#F02309; color:#fff; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; }
  .warn .t { font-size: 14px; font-weight: 800; color:#B51A07; text-transform: uppercase; letter-spacing:.6px; }
  .warn .x { font-size: 14px; font-weight: 600; color:#6E1206; line-height: 1.5; }

  .tips { background: var(--card); border: 1.5px solid #C3C0CC; padding: 16px 18px; margin-bottom: 20px; }
  .tips .t { font-size: 13px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing:.4px; margin-bottom: 10px; }
  .tips .row { display:flex; gap:10px; margin-bottom: 10px; }
  .tips .row:last-child { margin-bottom: 0; }
  .tips .dot { width:6px; height:6px; border-radius:3px; background:var(--accent); margin-top:7px; flex-shrink:0; }
  .tips .x { font-size: 14px; line-height: 1.5; }

  /* Phones give the board back the room the card padding was taking, so a 9x9
     at the app's own cell size still fits without being scaled. */
  @media (max-width: 560px) {
    .step-card { padding: 16px 12px; }
    .tech-illus { padding: 14px 8px; }
  }

  .hidden { display:none !important; }
  .tech-cta { text-align:center; margin-top: 30px; }

  /* ── ONE SCREEN, NO SCROLL (Sept 10, reworked Sept 11 2026) ────────────────
     Kasey: fit the techniques on one page without scrolling, and the tab bar
     "looks strange because it's off center. Maybe it would look better on a
     vertical line??"
     Narrow windows: one centred axis, top to bottom. Title and intro centred,
     the app's horizontal segmented control centred under them, the cards
     centred under that, the Play button last.
     1180px and up: a left column holds the title, the tabs as a VERTICAL list
     and the Play button; the cards fill the column on the right. Nothing sits
     above the cards any more, so they start right under the nav, and the body
     is a full-height column so the footer lands on the bottom edge. The JS
     (previewHeightCap) sizes the boards so the card row ends above the footer:
     the whole page, footer included, is one screen.
     1180 is where the card column is still wide enough (~560px+ after the
     sidebar) for four readable cards; below it the sidebar would squeeze them. */
  .tech-index .tech-intro { text-align: center; }
  .tech-index .tech-sub { margin-left: auto; margin-right: auto; }
  .tech-tabs .dot, .tech-tabs .n { display: none; }

  @media (min-width: 1180px) {
    body.tech-index { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
    .tech-index .tech-wrap { flex: 1 0 auto; width: 100%; max-width: 1400px; padding-top: 30px; padding-bottom: 28px; }
    .tech-index #listView {
      display: grid; grid-template-columns: 224px minmax(0, 1fr); column-gap: 44px;
      grid-template-rows: auto auto 1fr;
      grid-template-areas: "intro cards" "tabs cards" "cta cards";
    }
    .tech-index .tech-intro { grid-area: intro; text-align: left; }
    .tech-index .tech-intro h1 { font-size: 34px; line-height: 1.08; letter-spacing: -0.8px; margin-bottom: 12px; }
    .tech-index .tech-sub { font-size: 15px; line-height: 1.5; margin: 0; max-width: none; }
    .tech-index #cards { grid-area: cards; align-self: start; justify-content: flex-start; }
    .tech-index .tech-cta { grid-area: cta; text-align: left; margin-top: 26px; align-self: start; }
    .tech-index .tech-cta p { font-size: 14px; line-height: 1.5; margin-bottom: 12px; }

    /* The segmented control stood on its end: the same gray track and white
       raised pill, one difficulty per row. Each row carries its difficulty's
       bubble and how many techniques it holds. */
    .tech-index .tech-tabs { grid-area: tabs; flex-direction: column; max-width: none; margin: 24px 0 0; padding: 4px; gap: 2px; }
    .tech-index .tech-tabs button { flex: none; display: flex; align-items: center; gap: 11px;
      padding: 10px 12px; text-align: left; font-size: 15.5px; }
    .tech-index .tech-tabs .dot { display: block; width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; }
    .tech-index .tech-tabs .n { display: block; margin-left: auto; font-size: 13px; font-weight: 700; color: var(--quiet); }

    /* Card width follows how many cards the tab holds: two-card tabs get
       half-width cards (the height is there, so their boards grow to the
       app's full cell size), four go four across and Expert's five go five
       across, so every tab fills the same row. */
    .tech-index .sec-grid { gap: 22px; }
    .tech-index .tech-card { flex-basis: calc((100% - 66px) / 4); max-width: calc((100% - 66px) / 4); }
    .tech-index #cards[data-n="2"] .tech-card { flex-basis: calc((100% - 22px) / 2); max-width: calc((100% - 22px) / 2); }
    .tech-index #cards[data-n="5"] { gap: 16px; }
    .tech-index #cards[data-n="5"] .tech-card { flex-basis: calc((100% - 64px) / 5); max-width: calc((100% - 64px) / 5); }
    .tech-index #cards[data-n="5"] .tech-illus { padding: 12px 8px; }
    .tech-index #cards[data-n="5"] .tech-body { padding: 12px 12px 14px; }
    .tech-index #cards[data-n="5"] .tech-body p { font-size: 14px; }
    .tech-index .site-footer { padding-top: 22px; padding-bottom: 22px; }
  }
  /* Short laptop windows: tighten the left column so it never outgrows the
     screen (the cards shrink their boards on their own). */
  @media (min-width: 1180px) and (max-height: 780px) {
    .tech-index .tech-wrap { padding-top: 22px; }
    .tech-index .tech-intro h1 { font-size: 30px; margin-bottom: 8px; }
    .tech-index .tech-sub { font-size: 14px; }
    .tech-index .tech-tabs { margin-top: 16px; }
    .tech-index .tech-tabs button { padding: 8px 12px; }
    .tech-index .tech-cta { margin-top: 18px; }
    .tech-index .tech-cta p { display: none; }
  }

/* ── Technique pages (Sept 11 2026) ───────────────────────────────────────── */
.tech-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--sec, var(--quiet)); margin: 2px 0 6px; }
#detailView h1 { font-family: "Nunito"; font-weight: 900; font-size: clamp(28px, 4.4vw, 40px);
  letter-spacing: -0.8px; line-height: 1.1; margin: 0 0 8px; }
.tech-aka { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 0 0 18px; max-width: 46em; }
.insight h2.t, .tips h2.t { margin: 0 0 6px; }
.tips h2.t { margin-bottom: 10px; }
.tech-related { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--border); }
.tech-related h2 { font-size: 12px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--quiet); margin-bottom: 10px; }
.tech-related ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.tech-related a { display: inline-block; padding: 7px 13px; border: 1.5px solid #E2E2E2; border-radius: 999px;
  font-weight: 700; font-size: 14px; background: var(--card); transition: border-color .15s; }
.tech-related a:hover { border-color: var(--text); }
.tech-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.tech-pager a { display: block; padding: 13px 16px; border: 1.5px solid #E2E2E2; border-radius: 12px;
  background: var(--card); font-weight: 800; font-size: 15px; transition: border-color .15s; }
.tech-pager a:hover { border-color: var(--text); }
.tech-pager .label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--quiet); margin-bottom: 2px; }
.tech-pager .next { text-align: right; }
.tech-cta p { color: var(--muted); margin-bottom: 14px; }
@media (max-width: 560px) {
  .tech-pager { grid-template-columns: 1fr; }
  .tech-pager .next { text-align: left; }
}

/* Link to the Stuck guide (Sept 11 2026): under the pager on every technique
   page, and under the Play button in the index sidebar. */
.tech-stuck { margin: 18px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.tech-stuck a { color: var(--accent); font-weight: 700; }
.tech-stuck a:hover { text-decoration: underline; }
.tech-index .tech-cta .tech-stuck { margin-top: 14px; font-size: 13.5px; }
/* Wide sidebar: the Stuck link takes the place of the hint line above the
   button, so the column stays one screen tall. */
@media (min-width: 1180px) {
  .tech-index .tech-cta p:first-child { display: none; }
  .tech-index .tech-cta .tech-stuck { margin-top: 12px; }
}
@media (min-width: 1180px) and (max-height: 780px) {
  .tech-index .tech-cta p.tech-stuck { display: block; margin-top: 8px; line-height: 1.4; }
}