/* ==========================================================================
   The Quiet Gambit — library expansion
   Sides, lesson states, filters, the opening map, line and path cards.
   Uses the tokens defined in styles.css.
   ========================================================================== */

/* Side badges: a small square in the piece colour. White = paper with an
   ink edge, Black = ink, Both = split diagonally. */
.side { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.side-mark { display: inline-block; width: 12px; height: 12px; flex: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.side-white .side-mark, .side-white-mark { background: #fff; }
.side-black .side-mark, .side-black-mark { background: var(--ink); }
.side-both .side-mark { background: linear-gradient(135deg, #fff 50%, var(--ink) 50%); }
.nav a .side-mark { margin-right: 7px; vertical-align: -1px; }

/* Lesson states */
.pip.is-completed { background: var(--ink); box-shadow: none; }
.pip.is-in-progress { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pip.is-review { background: transparent; box-shadow: inset 0 0 0 3px var(--accent-board); }
.pip.is-new { box-shadow: inset 0 0 0 1.5px var(--control-border); }
.pips { flex-wrap: wrap; }
.state { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; color: var(--graphite); }
.state-completed { color: var(--success); }
.state-review { color: var(--accent-ink); font-weight: 600; }
.state-in-progress { color: var(--ink); }
.state-next { color: var(--accent-ink); font-weight: 600; }

.head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 14px; color: var(--graphite); }
.tag { display: inline-flex; align-items: center; font-size: 13px; line-height: 1.3; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--control-border); color: var(--ink); white-space: nowrap; }
.tag-quiet { border-color: var(--rule-strong); color: var(--graphite); }
.tag-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tag-character { font-weight: 600; }
.tag-established { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tag-playable { border: 1.5px solid var(--ink); }
.tag-speculative { border: 1.5px dashed var(--error); color: var(--error); }

/* Lesson rows (shared) */
.lesson-row .lesson-main { display: grid; gap: 2px; min-width: 0; }
.lesson-row .lesson-sum { display: block; }
.lesson-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--graphite); margin-top: 4px; }
.lesson-meta .side { font-size: 13px; }
.lesson-row.is-review a { box-shadow: inset 3px 0 0 var(--accent-board); }
.path-steps .lesson-sum { font-style: italic; }

/* Lesson head additions */
.objective { display: flex; gap: 12px; align-items: baseline; font-family: var(--font-read); font-size: 19px; line-height: 1.5; max-width: 44em; }
.objective-label { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--paper); background: var(--ink); padding: 2px 8px; border-radius: 4px; flex: none; }
.prereq { color: var(--graphite); }
.review-note { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 15px; }
.next-up { border-top: 1px solid var(--rule); padding-top: var(--s-3); width: 100%; display: grid; gap: 2px; }
.next-why-inline { flex-basis: 100%; }
.next-why-inline.is-alert { color: var(--error); }
.next-why { font-family: var(--font-read); font-size: 18px; max-width: 44em; padding: var(--s-3) var(--s-4); border-left: 3px solid var(--accent); background: var(--paper); margin-bottom: var(--s-2); }
.related { padding-top: var(--s-6); }

/* Home: side tiles */
.side-tiles { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-3); }
.side-tile { display: grid; grid-template-columns: 28px 1fr; gap: 4px 12px; padding: var(--s-4); border-radius: var(--r-panel); text-decoration: none; height: 100%; border: 1px solid var(--rule-strong); }
.side-tile-white { background: var(--paper); color: var(--ink); }
.side-tile-black { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.side-tile-mark { grid-row: span 2; width: 28px; height: 28px; box-shadow: inset 0 0 0 2px currentColor; }
.side-tile-black .side-tile-mark { background: var(--paper); box-shadow: none; }
.side-tile-white .side-tile-mark { background: #fff; }
.side-tile-title { font-weight: 600; font-size: 17px; }
.side-tile-sub { font-size: 14px; opacity: .88; }
.side-tile:hover .side-tile-title { text-decoration: underline; text-underline-offset: 3px; }
.side-tile-black:focus-visible { outline-color: var(--accent); }
@media (max-width: 560px) { .side-tiles { grid-template-columns: 1fr; } }

/* Path cards */
.path-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--s-4); }
.path-card { display: grid; gap: var(--s-2); align-content: start; height: 100%; padding: var(--s-5); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-panel); color: var(--ink); text-decoration: none; }
.path-card:hover { border-color: var(--control-border); }
.path-card.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.path-card-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.path-card-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.path-card-sum { font-family: var(--font-read); font-size: 17px; color: var(--graphite); }
.path-card-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 13px; color: var(--graphite); margin-top: var(--s-2); }
.section-tight { padding: var(--s-6) 0; }
.section-tight + .section-tight { border-top: 0; }
.section-tight > .h2 { margin-bottom: var(--s-4); }
.section-foot { margin-top: var(--s-5); }

/* Home: categories */
.cat-groups { list-style: none; display: grid; gap: var(--s-6); }
.cat-group-title { font-size: 15px; font-weight: 600; color: var(--graphite); margin-bottom: var(--s-2); }
.track-index .track-meta .side { font-size: 13px; }
.track-index .track-meta { flex-wrap: wrap; justify-content: flex-end; }

/* Filters */
.filters { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); padding: var(--s-4); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-panel); margin-bottom: var(--s-4); }
.filters-compact { grid-template-columns: minmax(200px, 2fr) repeat(3, minmax(140px, 1fr)); }
.field { display: grid; gap: 4px; min-width: 0; align-content: start; }
.field label { font-size: 13px; font-weight: 600; color: var(--graphite); }
.field input, .field select {
  font: inherit; font-size: 15px; color: var(--ink); background: #fff;
  min-height: 44px; padding: 8px 10px; border: 1.5px solid var(--control-border); border-radius: var(--r-btn); width: 100%; min-width: 0;
}
.field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.results-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 44px; margin-bottom: var(--s-2); }
.results-bar [hidden] { display: none; }
@media (max-width: 760px) {
  .filters, .filters-compact { grid-template-columns: 1fr 1fr; padding: var(--s-3); }
  .field-search { grid-column: 1 / -1; }
}

/* Segmented control and filter links */
.segmented { display: inline-flex; border: 1.5px solid var(--ink); border-radius: var(--r-btn); overflow: hidden; width: max-content; max-width: 100%; }
.segmented a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; text-decoration: none; color: var(--ink); }
.segmented a + a { border-left: 1.5px solid var(--ink); }
.segmented a[aria-current="page"] { background: var(--ink); }
.segmented a[aria-current="page"] .side { color: var(--paper); }
.segmented a[aria-current="page"] .side-mark { box-shadow: inset 0 0 0 1.5px var(--paper); }
.segmented a:focus-visible { outline-offset: -4px; outline-color: var(--accent); }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
.filter-links { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--control-border); color: var(--ink); text-decoration: none; font-size: 14px; }
.filter-links a[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filter-links a[aria-current="true"] .count { color: var(--paper); }
.count { font-size: 13px; color: var(--graphite); font-weight: 400; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .segmented a { padding: 8px 10px; } .segmented .side { font-size: 13px; } }

/* Chips (links to lines and lessons) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px; border-radius: var(--r-btn); border: 1px solid var(--control-border); background: var(--paper); color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.25; }
.chip:hover { border-color: var(--ink); }
.chip .side-mark { width: 10px; height: 10px; }
.chip-gambit { border-style: dashed; }
.chip-kind { font-size: 12px; font-weight: 600; color: var(--accent-ink); }
.chip-lesson { background: transparent; }

/* Line cards */
.line-group { margin-bottom: var(--s-6); }
.line-group > .h3 { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-3); }
.line-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--s-3); }
.line-card { display: grid; gap: 6px; align-content: start; height: 100%; padding: var(--s-4); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-panel); color: var(--ink); text-decoration: none; }
.line-card:hover { border-color: var(--control-border); }
.line-card.is-gambit { border-style: dashed; border-color: var(--rule-strong); }
.line-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.line-card-name { font-size: 18px; font-weight: 600; line-height: 1.25; }
.line-card-moves { font-family: var(--font-read); font-size: 16px; color: var(--graphite); font-variant-numeric: tabular-nums; }
.line-card-sum { font-family: var(--font-read); font-size: 16px; line-height: 1.45; }
.line-card-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.line-card-lessons { font-size: 13px; color: var(--graphite); margin-left: auto; }
.character-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--graphite); }
.character-legend li { display: flex; align-items: center; gap: 8px; }

/* Opening map */
.map { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); gap: var(--s-6); align-items: start; padding-bottom: var(--s-7); }
.map-tree-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.map-tree-head p { max-width: 34em; }
.tree, .tree-children { list-style: none; }
.tree { border-top: 1px solid var(--rule); }
.tree-children { margin-left: 13px; padding-left: 12px; border-left: 1px solid var(--rule-strong); }
.tree-item { padding: 2px 0; }
.tree > .tree-item { border-bottom: 1px solid var(--rule); padding: 6px 0; }
.tree-row { display: flex; align-items: center; gap: 4px; min-height: 44px; }
.tree-toggle { width: 32px; height: 40px; flex: none; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; border-radius: 4px; }
.tree-toggle::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); transition: transform .15s var(--ease); }
.tree-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
.tree-toggle:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.tree-leaf { width: 32px; flex: none; display: grid; place-items: center; }
.tree-leaf::before { content: ""; width: 5px; height: 5px; background: var(--rule-strong); }
.tree-move { border: 0; background: transparent; cursor: pointer; text-align: left; padding: 6px 8px; min-height: 40px; border-radius: var(--r-btn); font-family: var(--font-read); font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tree-move:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.tree-move[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.tree-count { font-size: 12px; color: var(--graphite); min-width: 22px; height: 22px; display: inline-grid; place-items: center; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 0 6px; font-variant-numeric: tabular-nums; }
.tree-entries { margin: 2px 0 8px 36px; }
.map-side { position: sticky; top: 92px; display: grid; gap: var(--s-4); max-width: max(320px, min(520px, calc(100svh - 300px))); width: 100%; }
.map-info { display: grid; gap: var(--s-2); }
.map-moves { font-family: var(--font-read); font-size: 19px; font-variant-numeric: tabular-nums; }
.map-list { list-style: none; display: grid; border-top: 1px solid var(--rule); }
.map-list li { border-bottom: 1px solid var(--rule); }
.map-list a { display: flex; justify-content: space-between; gap: var(--s-3); align-items: center; padding: 10px 2px; color: var(--ink); text-decoration: none; min-height: 44px; }
.map-list a:hover .map-item-name { text-decoration: underline; text-underline-offset: 3px; }
.map-item-name { font-weight: 500; }
.map-item-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 900px) {
  .map { grid-template-columns: 1fr; }
  .map-side { position: static; order: -1; max-width: 480px; }
}

/* Line detail */
.mainline { font-family: var(--font-read); font-size: clamp(20px, 2vw, 24px); font-variant-numeric: tabular-nums; }
.line-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-7); align-items: start; }
.line-board { position: sticky; top: 92px; display: grid; gap: var(--s-4); max-width: max(340px, min(560px, calc(100svh - 260px))); width: 100%; }
.line-detail { display: grid; gap: var(--s-5); min-width: 0; }
.line-detail .h3 { font-size: 19px; }
.plan-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.plan-col { display: grid; gap: var(--s-2); align-content: start; }
.response-list { list-style: none; display: grid; border-top: 1px solid var(--rule); }
.response-list li { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s-3); align-items: baseline; }
.response-moves { font-family: var(--font-read); font-size: 18px; font-weight: 600; }
.response-name { font-size: 14px; color: var(--graphite); }
.response-list p { grid-column: 1 / -1; font-family: var(--font-read); font-size: 17px; line-height: 1.5; }
.character-block { display: grid; gap: var(--s-2); justify-items: start; padding: var(--s-4); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-panel); }
.note-uncertain { border-left: 3px solid var(--error); padding: var(--s-2) var(--s-4); font-family: var(--font-read); font-size: 17px; background: var(--paper); }
.connect-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s-5); margin-bottom: var(--s-5); }
.plain-list { list-style: none; display: grid; gap: var(--s-3); }
.plain-list p { margin-top: 4px; }
.lessons-h { margin: var(--s-5) 0 var(--s-3); }
@media (max-width: 900px) {
  .line-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .line-board { position: static; max-width: min(560px, calc(100svh - 120px)); }
}
@media (max-width: 560px) { .plan-cols { grid-template-columns: 1fr; } }

/* Progress */
.state-legend { list-style: none; display: grid; gap: 6px; }
.state-legend li { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); border-bottom: 1px solid var(--rule); padding-bottom: 6px; }
.legend-count { font-variant-numeric: tabular-nums; font-weight: 600; }
.progress-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.progress-table th, .progress-table td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.progress-table thead th { font-size: 13px; font-weight: 600; color: var(--graphite); border-bottom-color: var(--rule-strong); }
.progress-table tbody th { font-weight: 500; }
.progress-table tbody th a { color: var(--ink); }
.progress-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.progress-table tr.is-active th { box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; }
.progress-table .pips { max-width: 260px; }
@media (max-width: 640px) {
  .progress-table thead { display: none; }
  .progress-table tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .progress-table th, .progress-table td { border: 0; padding: 0; }
  .progress-table td:nth-child(2) { grid-row: 1; grid-column: 2; }
}
.chip-review { font-size: 12px; font-weight: 600; color: var(--accent-ink); }

/* Promotion chooser */
.promo { position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 12px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: var(--r-panel); box-shadow: 0 12px 30px -12px rgba(26, 29, 43, .5); max-width: 92%; }
.promo-title { width: 100%; text-align: center; font-size: 14px; font-weight: 600; }
.promo-btn { width: calc(100cqw / 8); height: calc(100cqw / 8); min-width: 44px; min-height: 44px; display: grid; place-items: center; border: 1px solid var(--control-border); border-radius: var(--r-btn); background: var(--sq-light); cursor: pointer; }
.promo-btn:hover { background: var(--accent-wash); }
.promo-btn .piece { font-size: calc(100cqw / 8 * 0.72); transform: none; }
.promo-cancel { width: 100%; min-height: 40px; border: 0; background: transparent; font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }

/* --- Review fixes --------------------------------------------------------- */
/* Map: board panel is first in the DOM; place it on the right on desktop. */
.map > .map-side { grid-column: 2; grid-row: 1; }
.map > .map-tree { grid-column: 1; grid-row: 1; }
@media (max-width: 900px) {
  .map > .map-side, .map > .map-tree { grid-column: 1; grid-row: auto; }
  .map-side { order: 0; }
}
[data-back-to-tree] { justify-self: start; margin-top: var(--s-2); }

/* Completed but flagged for review: filled square with a review ring. */
.pip.is-review-done { background: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 2px var(--accent-board); }

/* Focus on the dark selected segment */
.segmented a[aria-current="page"]:focus-visible { outline-color: var(--paper); }

/* Nav: never wrap; shorten "White repertoire" to "White" in the tight band. */
.nav a { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1180px) {
  .nav .nav-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* "Up next" strip on browse pages */
.next-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 14px; margin: calc(-1 * var(--s-3)) 0 var(--s-5); background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: var(--r-btn); font-size: 15px; }
.next-strip-label { font-weight: 600; }
.next-strip a { font-weight: 600; }
.next-strip-why { color: var(--graphite); font-family: var(--font-read); font-size: 16px; }

/* Touch targets for the new controls */
@media (pointer: coarse) {
  .tree-toggle, .tree-leaf { width: 44px; }
  .tree-toggle { height: 44px; }
  .tree-move, .chip { min-height: 44px; }
  .tree-entries { margin-left: 48px; }
  .progress-table a { display: inline-block; padding: 12px 0; }
  .position-text summary { min-height: 44px; display: flex; align-items: center; }
}
.btn-secondary[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.link-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (pointer: coarse) { .link-btn { min-height: 44px; } }