/**
 * TICKET-304: Solver Ledger and Result Funnel Premium Retrofit
 *
 * Loaded on solver page templates only.
 * Applies dark etched-instrument / light clinical-paper-stack treatment.
 *
 * Rules:
 *  - Results stay primary — no decorative effect reduces readability
 *  - Continuation modules remain visually secondary to results
 *  - Light mode: paper-stack with flat lines, not glow
 *  - All rendered result data stays safely escaped (handled by PHP/JS)
 *  - No solver algorithm changes
 */

/* ─── Solver container — TICKET-336 / TICKET-337: explicit card + wider shell ── */
/*
 * .container is now a pure layout primitive (see premium.css). Re-apply the
 * card treatment here so solver pages retain their instrument-panel surface.
 * Widened to 1200px to give multi-pattern and single-pattern tool UI more room.
 *
 * TICKET-337 scoping: use #main-content > .container (ID + direct child) to
 * prevent this rule bleeding into .site-header .container and .site-footer
 * .container — both have 0,2,0 specificity, equal to the old .cws-page--solver
 * .container rule, so the later-loaded premium-solver.css was winning and
 * applying the dark card treatment to the header and footer chrome.
 * #main-content raises specificity to 1,2,0, safely above the header/footer
 * resets in premium.css (0,2,0), with no side-effects on any other page.
 */

.cws-page--solver #main-content > .container {
  max-width: 1200px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  border-radius: 6px;
}

html.light-mode .cws-page--solver #main-content > .container {
  background-color: var(--surface-paper);
  border-color: var(--line-soft);
  box-shadow: var(--surface-stack-shadow);
}

/* ─── TICKET-337: Multi-pattern content shell — below solver card ────────────── */
/*
 * Long-form explanatory content in multiple-pattern.php lives outside the
 * solver card. Render it as an open-canvas section that matches the width
 * and rhythm of instructions/methodology pages (~900px, no card surface).
 */

.cws-multi-content {
  max-width: 900px;
  width: 100%;
  margin: 2rem auto 0;
  padding: 0 1rem;
  box-sizing: border-box;
  color: var(--text-primary);
}

.cws-multi-content .page-content h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--text-heading, var(--text-primary));
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.cws-multi-content .page-content h2:first-child {
  margin-top: 0;
}

.cws-multi-content .page-content p,
.cws-multi-content .page-content li,
.cws-multi-content .page-content dd {
  color: var(--text-secondary, var(--text-muted));
  line-height: 1.75;
  font-size: 0.95rem;
}

.cws-multi-content .page-content ul,
.cws-multi-content .page-content ol {
  padding-left: 1.5rem;
}

.cws-multi-content .page-content dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1.5rem;
}

.cws-multi-content .page-content dt {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
  padding-top: 0.5rem;
}

.cws-multi-content .page-content dd {
  padding-top: 0.5rem;
  margin: 0;
}

/* Comparison table */
.cws-multi-content .solver-comparison {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 1rem 0;
}

.cws-multi-content .solver-comparison th,
.cws-multi-content .solver-comparison td {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-subtle);
  text-align: left;
  color: var(--text-primary);
}

.cws-multi-content .solver-comparison th {
  background-color: var(--bg-panel);
  font-family: var(--font-logic);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

html.light-mode .cws-multi-content .solver-comparison th {
  background-color: var(--vellum-base);
  border-color: var(--line-soft);
  color: var(--ink-slate);
}

html.light-mode .cws-multi-content .solver-comparison td {
  border-color: var(--line-soft);
  color: var(--ink-blueprint);
}

/* Related links nav */
.cws-multi-content .related-links ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.cws-multi-content .related-links a {
  color: var(--accent);
  font-size: 0.9rem;
  text-decoration: none;
}

.cws-multi-content .related-links a:hover {
  text-decoration: underline;
}

html.light-mode .cws-multi-content .related-links a {
  color: var(--amber-logic);
}

@media (max-width: 600px) {
  .cws-multi-content {
    padding: 0 1rem;
    margin-top: 1.5rem;
  }

  .cws-multi-content .page-content dl {
    grid-template-columns: 1fr;
  }
}

/* ─── Form elements ──────────────────────────────────────────────────────────── */

.cws-page--solver .word-length,
.cws-page--solver select {
  background-color: var(--bg-panel);
  color: var(--text-primary);
  border-color: var(--border-subtle);
  font-family: var(--font-logic);
  transition: border-color var(--dur-fast);
}

.cws-page--solver .word-length:focus,
.cws-page--solver select:focus {
  border-color: var(--accent);
  outline: none;
}

html.light-mode .cws-page--solver .word-length,
html.light-mode .cws-page--solver select {
  background-color: var(--surface-paper);
  color: var(--ink-blueprint);
  border-color: var(--line-soft);
}

/* Pattern input cells */
.cws-page--solver .inputs-container input {
  background-color: var(--bg-panel);
  color: var(--text-primary);
  border-color: var(--border-subtle);
  font-family: var(--font-logic);
  font-weight: 600;
  transition:
    border-color     var(--dur-fast),
    background-color var(--dur-fast),
    box-shadow       var(--dur-fast);
}

.cws-page--solver .inputs-container input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
  outline: none;
  background-color: var(--bg-elevated, var(--bg-panel));
}

html.light-mode .cws-page--solver .inputs-container input {
  background-color: var(--surface-paper);
  color: var(--ink-blueprint);
  border-color: var(--line-soft);
}

html.light-mode .cws-page--solver .inputs-container input:focus {
  border-color: var(--amber-logic);
  box-shadow: 0 0 0 2px var(--amber-soft);
}

/* Clear button */
.cws-page--solver .clear-pattern {
  background-color: var(--bg-panel);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-logic);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}

.cws-page--solver .clear-pattern:hover {
  background-color: var(--border-subtle);
  color: var(--text-primary);
}

/* Primary solve button */
.cws-page--solver .primary-btn {
  font-family: var(--font-logic);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background-color: var(--accent);
  color: var(--ink-nocturnal);
  border: none;
  transition:
    background-color var(--dur-fast),
    box-shadow       var(--dur-fast);
}

html.light-mode .cws-page--solver .primary-btn {
  background-color: var(--amber-logic);
  color: #fff;
}

.cws-page--solver .primary-btn:hover:not(:disabled) {
  background-color: var(--primary-dark);
}

/* ─── Results section — etched instrument feel ──────────────────────────────── */

.results-section {
  animation: cws-shutter-reveal var(--dur-slow) var(--ease-shutter) both;
}

@keyframes cws-shutter-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.results-count {
  font-family: var(--font-logic);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

html.light-mode .results-count {
  color: var(--ink-slate);
}

/* Result ledger container */
.matches {
  background-color: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  color: var(--text-primary);
  font-family: var(--font-logic);
  font-size: 0.925rem;
  line-height: 1.7;
}

/* Light mode: crisp clinical paper-stack */
html.light-mode .matches {
  background-color: var(--vellum-base);
  border-color: var(--line-soft);
  color: var(--ink-blueprint);
  box-shadow: var(--surface-stack-shadow);
}

/* Result rows inside the ledger */
.matches li,
.matches .match-item {
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color var(--dur-fast);
}

.matches li:last-child,
.matches .match-item:last-child {
  border-bottom: none;
}

.matches li:hover,
.matches .match-item:hover {
  background-color: var(--accent-glow);
}

html.light-mode .matches li:hover,
html.light-mode .matches .match-item:hover {
  background-color: var(--amber-soft);
}

/* Category headings within ledger */
.matches h3,
.pattern-results h3 {
  font-family: var(--font-logic);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}

html.light-mode .matches h3,
html.light-mode .pattern-results h3 {
  color: var(--ink-slate);
  border-bottom-color: var(--line-soft);
}

/* ─── Loading state ──────────────────────────────────────────────────────────── */

.loading {
  color: var(--text-muted);
  font-family: var(--font-logic);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* TICKET-339: retain legacy ::after rule in case base stylesheet defines a spinner */
.loading::after {
  border-color: var(--border-subtle);
  border-top-color: var(--accent);
}

html.light-mode .loading::after {
  border-color: var(--line-soft);
  border-top-color: var(--amber-logic);
}

/* Spinner element — TICKET-339 */
@keyframes cws-spin {
  to { transform: rotate(360deg); }
}

.loading__spinner {
  display: inline-block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: cws-spin 0.75s linear infinite;
  margin-top: 0.15em; /* align with first line of text */
}

html.light-mode .loading__spinner {
  border-color: var(--line-soft);
  border-top-color: var(--amber-logic);
}

/* Primary loading message text */
.loading__primary {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-family: var(--font-logic);
  letter-spacing: 0.04em;
}

/* Secondary duration note — TICKET-339: multi-pattern only */
.loading__note {
  width: 100%;           /* break to a new line below spinner + primary */
  margin: 0.3rem 0 0;
  padding-left: calc(14px + 0.6rem);  /* indent under spinner */
  color: var(--text-muted);
  font-size: 0.8rem;
  font-family: var(--font-logic);
  letter-spacing: 0.02em;
  opacity: 0.75;
}

html.light-mode .loading__note {
  color: var(--ink-slate);
}

/* Multi-pattern loading modifier — slightly elevated visual weight */
.loading--multi .loading__primary {
  color: var(--text-primary);
  letter-spacing: 0.05em;
}

html.light-mode .loading--multi .loading__primary {
  color: var(--ink-blueprint);
}

/* ─── No-matches state ──────────────────────────────────────────────────────── */

.no-matches {
  color: var(--text-muted);
  font-family: var(--font-logic);
  font-size: 0.9rem;
  font-style: normal;
  letter-spacing: 0.02em;
}

html.light-mode .no-matches {
  color: var(--ink-slate);
}

/* ─── Error / success feedback ──────────────────────────────────────────────── */

.error-message {
  background-color: var(--danger-glow);
  color: var(--danger);
  border-left: 3px solid var(--danger);
  font-family: var(--font-logic);
  font-size: 0.9rem;
}

html.light-mode .error-message {
  background-color: rgba(159, 18, 57, 0.08);
  color: var(--rose-urgency);
  border-left-color: var(--rose-urgency);
}

.success-message {
  background-color: var(--reward-glow);
  color: var(--accent);
  border-left: 3px solid var(--accent);
  font-family: var(--font-logic);
  font-size: 0.9rem;
}

html.light-mode .success-message {
  background-color: var(--amber-soft);
  color: var(--amber-logic);
  border-left-color: var(--amber-logic);
}

/* ─── Instructions highlight box ─────────────────────────────────────────────── */

.instructions {
  background-color: var(--bg-panel);
  border-left: 3px solid var(--accent);
  color: var(--text-muted);
  font-family: var(--font-logic);
  font-size: 0.875rem;
}

.instructions code {
  background-color: rgba(212, 175, 55, 0.12);
  color: var(--accent);
  font-family: var(--font-logic);
}

html.light-mode .instructions {
  background-color: var(--amber-soft);
  border-left-color: var(--amber-logic);
  color: var(--ink-slate);
}

html.light-mode .instructions code {
  background-color: rgba(180, 83, 9, 0.1);
  color: var(--amber-logic);
}

/* ─── Mode switch tabs ───────────────────────────────────────────────────────── */

.mode-switch {
  font-family: var(--font-logic);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mode-switch.active {
  color: var(--accent);
}

.mode-switch.active::after {
  background-color: var(--accent);
}

html.light-mode .mode-switch.active {
  color: var(--amber-logic);
}

html.light-mode .mode-switch.active::after {
  background-color: var(--amber-logic);
}

/* ─── Pagination ─────────────────────────────────────────────────────────────── */

.page-number {
  font-family: var(--font-logic);
  font-size: 0.875rem;
  color: var(--text-muted);
}

.primary-btn.pagination-btn {
  background-color: transparent;
  color: var(--accent);
  border: 1px solid var(--border-subtle);
}

.primary-btn.pagination-btn:hover {
  border-color: var(--accent);
  background-color: var(--accent-glow);
}

/* ─── Instructions guide link — TICKET-304 ──────────────────────────────────── */

.instructions .instructions__guide-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
}

.instructions .instructions__guide-link:hover {
  text-decoration: underline;
}

html.light-mode .instructions .instructions__guide-link {
  color: var(--amber-logic);
}

/* ─── Solver Guide — TICKET-304 explanatory content below solver card ────────── */
/*
 * Lives outside the instrument-panel .container so it reads as open-canvas
 * editorial content, visually secondary to the solver tool above it.
 * Max-width matches instructions/methodology pages (~900px).
 */

.solver-page .solver-guide {
  max-width: 900px;
  width: 100%;
  margin: 2.5rem auto 0;
  padding: 0 1rem 2.5rem;
  box-sizing: border-box;
}

.solver-page .solver-guide h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-heading, var(--text-primary));
  margin-top: 2.25rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border-subtle);
}

.solver-page .solver-guide h2:first-child {
  margin-top: 0;
}

html.light-mode .solver-page .solver-guide h2 {
  color: var(--ink-blueprint);
  border-bottom-color: var(--line-soft);
}

.solver-page .solver-guide p,
.solver-page .solver-guide li,
.solver-page .solver-guide dd {
  color: var(--text-secondary, var(--text-muted));
  font-size: 0.95rem;
  line-height: 1.75;
}

html.light-mode .solver-page .solver-guide p,
html.light-mode .solver-page .solver-guide li,
html.light-mode .solver-page .solver-guide dd {
  color: var(--ink-slate);
}

.solver-page .solver-guide a {
  color: var(--accent);
  text-decoration: none;
}

.solver-page .solver-guide a:hover {
  text-decoration: underline;
}

html.light-mode .solver-page .solver-guide a {
  color: var(--amber-logic);
}

/* Symbol / dictionary definition tables */

.solver-page .solver-symbol-table {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 1.5rem;
  margin: 0.75rem 0 1rem;
}

.solver-page .solver-symbol-table dt {
  font-family: var(--font-logic);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  padding-top: 0.5rem;
  white-space: nowrap;
}

.solver-page .solver-symbol-table dd {
  padding-top: 0.5rem;
  margin: 0;
}

html.light-mode .solver-page .solver-symbol-table dt {
  color: var(--ink-blueprint);
}

/* Tip lists */

.solver-page .solver-tip-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 1rem;
}

.solver-page .solver-tip-list li {
  padding: 0.45rem 0 0.45rem 1rem;
  border-left: 2px solid var(--border-subtle);
  margin-bottom: 0.5rem;
}

html.light-mode .solver-page .solver-tip-list li {
  border-left-color: var(--line-soft);
}

/* ─── Continuation paths — TICKET-305 ───────────────────────────────────────── */

.solver-next-steps {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
}

html.light-mode .solver-next-steps {
  border-top-color: var(--line-soft);
}

.solver-next-steps__heading {
  font-family: var(--font-logic);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  /* Override shared h2 treatment */
  border-bottom: none !important;
  margin-top: 0 !important;
  margin-bottom: 0.9rem;
  padding-bottom: 0;
}

html.light-mode .solver-next-steps__heading {
  color: var(--ink-slate);
}

.solver-next-steps__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

/* Reset tip-list border on next-steps items */
.solver-next-steps__list li {
  border-left: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

.solver-next-steps__list a {
  font-size: 0.9rem;
  color: var(--accent);
  text-decoration: none;
}

.solver-next-steps__list a::before {
  content: '\2192\00a0';
  color: var(--text-muted);
}

.solver-next-steps__list a:hover {
  text-decoration: underline;
}

html.light-mode .solver-next-steps__list a {
  color: var(--amber-logic);
}

/* ─── Responsive — solver guide ─────────────────────────────────────────────── */

@media (max-width: 600px) {
  .solver-page .solver-guide {
    padding: 0 1rem 1.5rem;
    margin-top: 2rem;
  }

  .solver-page .solver-symbol-table {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .solver-page .solver-symbol-table dt {
    padding-top: 1rem;
    padding-bottom: 0.1rem;
  }

  .solver-page .solver-symbol-table dd {
    padding-top: 0;
  }
}

/* ─── TICKET-381A: Multi-pattern result sections ─────────────────────────────
 *
 * When a multi-pattern search returns two result groups, each group is wrapped
 * in .result-section with a labeled header so Pattern 1 and Pattern 2 are
 * immediately distinguishable. Single-pattern results use a plain .results-grid
 * with no section wrapper; the styles below apply only to the multi-pattern path.
 *
 * Distinction uses label + badge + border (never color alone) so it remains
 * clear when styles are unavailable.
 * ────────────────────────────────────────────────────────────────────────── */

/* Shared wrapper used by both single and multi renders; provides the anchor
 * point for renderExplanationBlock() without relying on .results-grid count. */
.results-wrapper {
  margin-top: 0.75rem;
}

/* Per-pattern section container */
.result-section {
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  margin-bottom: 0.5rem;
}

/* Separator between the two pattern blocks */
.result-section + .result-section {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-subtle);
}

html.light-mode .result-section + .result-section {
  border-top-color: var(--line-soft);
}

/* Section header row: badge + label + count */
.result-section__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

html.light-mode .result-section__header {
  border-bottom-color: var(--line-soft);
}

/* Circular number badge — provides non-color differentiation */
.result-section__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background-color: var(--accent);
  color: var(--ink-nocturnal);
  font-family: var(--font-logic);
  font-size: 0.6875rem;
  font-weight: 700;
}

html.light-mode .result-section__badge {
  background-color: var(--amber-logic);
  color: #fff;
}

/* "Pattern 1" / "Pattern 2" text label */
.result-section__label {
  font-family: var(--font-gnosis);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

html.light-mode .result-section__label {
  color: var(--amber-logic);
}

/* Match count alongside the label */
.result-section__count {
  font-family: var(--font-logic);
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-left: 0.25rem;
}

html.light-mode .result-section__count {
  color: var(--ink-slate);
}

@media (max-width: 600px) {
  .result-section {
    padding-left: 0.625rem;
  }
}

/* ─── TICKET-382A: Result group sections (Most likely / Possible / Rare) ─────── */

.result-group {
  margin-top: 1.25rem;
}

.result-group:first-child {
  margin-top: 0;
}

/* Group header — styled as an accessible toggle button */
.result-group__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.375rem 0 0.375rem 0;
  margin-bottom: 0.625rem;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-logic);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}

.result-group__header:hover,
.result-group__header:focus-visible {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.result-group__header:hover {
  outline: none;
}

html.light-mode .result-group__header {
  border-bottom-color: var(--line-soft);
  color: var(--ink-slate);
}

html.light-mode .result-group__header:hover {
  color: var(--ink-blueprint);
  border-bottom-color: var(--amber-logic);
}

/* "Most likely" group gets a subtle accent colour on the label */
.result-group:first-child .result-group__label {
  color: var(--accent);
}

html.light-mode .result-group:first-child .result-group__label {
  color: var(--amber-logic);
}

.result-group__label {
  flex: 1 1 auto;
  font-weight: 600;
}

.result-group__count {
  font-weight: 400;
  opacity: 0.7;
}

.result-group__chevron {
  flex-shrink: 0;
  font-size: 0.6rem;
  transition: transform var(--dur-fast);
}

/* TICKET-382C: styles.css sets display:flex on .results-grid, which overrides the
   browser UA default [hidden]{display:none}. Explicitly enforce hidden on the grouped
   grid so the toggle actually collapses the panel. Specificity (.results-grid wins at
   0,1,0; this selector wins at 0,2,0). */
.result-group__grid[hidden] {
  display: none;
}

/* Collapsed state: grid is hidden via the HTML hidden attribute (see rule above);
   the chevron points down to signal "expandable". */
.result-group--collapsed .result-group__chevron {
  /* chevron text already set to ▼ in JS; no additional CSS needed */
}

/* ─── TICKET-382A: "Show all possibilities" control ─────────────────────────── */

.show-all-container {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-subtle);
  text-align: center;
}

html.light-mode .show-all-container {
  border-top-color: var(--line-soft);
}

.show-all-btn {
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-logic);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 0.375rem 0.875rem;
  transition:
    border-color    var(--dur-fast),
    color           var(--dur-fast),
    background-color var(--dur-fast);
}

.show-all-btn:hover,
.show-all-btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.show-all-btn:hover {
  outline: none;
}

html.light-mode .show-all-btn {
  border-color: var(--line-soft);
  color: var(--ink-slate);
}

html.light-mode .show-all-btn:hover {
  border-color: var(--amber-logic);
  color: var(--amber-logic);
}

/* Explanatory note after "Show all" expands the flat list */
.show-all-note {
  font-family: var(--font-logic);
  font-size: 0.775rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin: 0.5rem 0 0;
  text-align: center;
}

html.light-mode .show-all-note {
  color: var(--ink-slate);
}

/* ─── TICKET-384A: Narrowing controls (Exclude letters / Prefer common) ──────── */

.solver-narrowing-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 0.75rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--border-subtle);
}

html.light-mode .solver-narrowing-controls {
  border-top-color: var(--line-soft);
}

.narrowing-control {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.narrowing-label {
  font-family: var(--font-logic);
  font-size: 0.775rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

html.light-mode .narrowing-label {
  color: var(--ink-slate);
}

/* Inline label for the checkbox row */
.narrowing-label.prefer-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: none;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
}

html.light-mode .narrowing-label.prefer-label {
  color: var(--ink-blueprint);
}

.prefer-common-checkbox {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

html.light-mode .prefer-common-checkbox {
  accent-color: var(--amber-logic);
}

.exclude-letters-input {
  background-color: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  color: var(--text-primary);
  font-family: var(--font-logic);
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  width: 9rem;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.exclude-letters-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
  outline: none;
}

html.light-mode .exclude-letters-input {
  background-color: var(--surface-paper);
  border-color: var(--line-soft);
  color: var(--ink-blueprint);
}

html.light-mode .exclude-letters-input:focus {
  border-color: var(--amber-logic);
  box-shadow: 0 0 0 2px var(--amber-soft);
}

.narrowing-hint {
  font-family: var(--font-body, inherit);
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.3;
  max-width: 18rem;
}

html.light-mode .narrowing-hint {
  color: var(--ink-slate);
}

@media (max-width: 600px) {
  .solver-narrowing-controls {
    flex-direction: column;
    gap: 0.75rem;
  }

  .exclude-letters-input {
    width: 100%;
    max-width: 12rem;
  }
}

/* ─── TICKET-393A: Compatible pairs section ──────────────────────────────────
 *
 * Renders the multi-solver compatible-pairs output as a productised result
 * section: titled header with count badge, explanatory subtext, and a list of
 * structured pair rows (word ↔ word). Sits above the per-pattern sections in
 * .results-wrapper.
 * ────────────────────────────────────────────────────────────────────────── */

.result-pairs-section {
  margin-bottom: 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

html.light-mode .result-pairs-section {
  border-bottom-color: var(--line-soft);
}

/* Header row: title + count badge + optional truncation note */
.result-pairs-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

/* "Compatible pairs" section title */
.result-pairs-title {
  font-family: var(--font-gnosis);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

html.light-mode .result-pairs-title {
  color: var(--amber-logic);
}

/* Pill badge showing the count */
.result-pairs-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0 0.4rem;
  height: 1.375rem;
  background-color: var(--accent);
  border-radius: 999px;
  font-family: var(--font-logic);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-nocturnal);
  line-height: 1;
}

html.light-mode .result-pairs-count {
  background-color: var(--amber-logic);
  color: #fff;
}

/* Truncation note when MAX_PAIRS was hit */
.result-pairs-trunc {
  font-family: var(--font-logic);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

html.light-mode .result-pairs-trunc {
  color: var(--ink-slate);
}

/* Explanatory copy below the header row */
.result-pairs-hint {
  margin: 0 0 0.875rem;
  font-family: var(--font-logic);
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  line-height: 1.45;
}

html.light-mode .result-pairs-hint {
  color: var(--ink-slate);
}

/* Scrollable list container — cap height so very long lists don't bury the
   per-pattern sections below. Users can scroll within the block. */
.result-pairs-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 22rem;
  overflow-y: auto;
  padding-right: 0.25rem;
  /* Subtle scrollbar in dark mode */
  scrollbar-width: thin;
  scrollbar-color: var(--border-subtle) transparent;
}

.result-pairs-list::-webkit-scrollbar {
  width: 4px;
}

.result-pairs-list::-webkit-scrollbar-track {
  background: transparent;
}

.result-pairs-list::-webkit-scrollbar-thumb {
  background-color: var(--border-subtle);
  border-radius: 2px;
}

/* Individual pair row */
.result-pair-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  background-color: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  transition:
    background-color var(--dur-fast) var(--ease-shutter),
    border-color     var(--dur-fast) var(--ease-shutter);
}

.result-pair-row:hover {
  background-color: var(--bg-surface);
  border-color: var(--accent);
}

html.light-mode .result-pair-row {
  background-color: var(--surface-paper);
  border-color: var(--line-soft);
}

html.light-mode .result-pair-row:hover {
  border-color: var(--amber-logic);
  background-color: var(--amber-soft);
}

/* Word cells */
.result-pair-word {
  font-family: var(--font-logic);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Left word right-aligns so both words bracket the central separator */
.result-pair-word--1 {
  text-align: right;
}

.result-pair-word--2 {
  text-align: left;
}

html.light-mode .result-pair-word {
  color: var(--ink-blueprint);
}

/* Directional separator between the two words */
.result-pair-sep {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--accent);
  opacity: 0.7;
  line-height: 1;
  user-select: none;
}

html.light-mode .result-pair-sep {
  color: var(--amber-logic);
}

/* ─── Responsive: narrow viewports ─────────────────────────────────────── */
@media (max-width: 480px) {
  /* Switch to a looser two-line layout: word1 on its own line above word2,
     with the separator inline before word2. This keeps the pair relationship
     obvious without cramped inline wrapping. */
  .result-pair-row {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0.15rem 0.4rem;
    padding: 0.5rem 0.625rem;
  }

  .result-pair-word--1 {
    grid-column: 1 / -1;
    text-align: left;
  }

  .result-pair-sep {
    grid-column: 1;
    grid-row: 2;
    font-size: 0.7rem;
    opacity: 0.5;
  }

  .result-pair-word--2 {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }
}

/* ─── TICKET-393B: Supporting-sections disclosure ────────────────────────────
 *
 * When compatible pairs are present, the per-pattern word lists are wrapped in
 * a <details> disclosure so they read as secondary context rather than the
 * primary answer. Collapsed by default; opens on click without JS.
 * ────────────────────────────────────────────────────────────────────────── */

details.result-supporting-sections {
  margin-top: 1.25rem;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  overflow: hidden;
}

html.light-mode details.result-supporting-sections {
  border-color: var(--line-soft);
}

/* Summary bar — acts as the clickable toggle row */
summary.result-supporting-sections__summary {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--bg-panel);
  cursor: pointer;
  list-style: none; /* hide default triangle in Firefox */
  user-select: none;
  transition: background-color var(--dur-fast) var(--ease-shutter);
}

/* Remove default disclosure triangle in WebKit */
summary.result-supporting-sections__summary::-webkit-details-marker {
  display: none;
}

summary.result-supporting-sections__summary:hover {
  background-color: var(--bg-surface);
}

html.light-mode summary.result-supporting-sections__summary {
  background-color: #F1F5F9;
}

html.light-mode summary.result-supporting-sections__summary:hover {
  background-color: var(--amber-soft);
}

/* "Per-pattern word lists" label */
.result-supporting-sections__label {
  font-family: var(--font-logic);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex: 1 1 auto;
}

html.light-mode .result-supporting-sections__label {
  color: var(--ink-slate);
}

/* Per-pattern counts — "P1 × 12 — P2 × 8" */
.result-supporting-sections__counts {
  font-family: var(--font-logic);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  white-space: nowrap;
}

html.light-mode .result-supporting-sections__counts {
  color: var(--ink-slate);
}

/* Chevron appended via CSS so no JS is needed */
summary.result-supporting-sections__summary::after {
  content: '\25B6'; /* ▶ */
  font-size: 0.55rem;
  color: var(--text-muted);
  transition: transform var(--dur-fast) var(--ease-shutter);
  flex-shrink: 0;
}

details.result-supporting-sections[open]
  > summary.result-supporting-sections__summary::after {
  transform: rotate(90deg);
}

/* Body padding when open */
details.result-supporting-sections[open] {
  padding-bottom: 0.75rem;
}

details.result-supporting-sections[open] > .result-section:first-of-type {
  margin-top: 1rem;
}

/* ─── TICKET-393B: Effective-pattern note ────────────────────────────────────
 *
 * The lone-digit wildcard note. When displayed standalone (no pairs) it sits
 * above the result wrapper; when pairs are active it is deferred inside the
 * supporting-sections disclosure so it does not interrupt the primary surface.
 * ────────────────────────────────────────────────────────────────────────── */

.cws-effective-pattern-note {
  margin: 0.5rem 0 0.75rem;
  font-family: var(--font-logic);
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.cws-effective-pattern-note code {
  background-color: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  padding: 0.05em 0.35em;
  font-family: var(--font-logic);
  font-size: 0.875em;
  color: var(--accent);
}

html.light-mode .cws-effective-pattern-note {
  color: var(--ink-slate);
}

html.light-mode .cws-effective-pattern-note code {
  background-color: #F1F5F9;
  border-color: var(--line-soft);
  color: var(--amber-logic);
}

/* When the note lives inside the supporting-sections disclosure, give it
   horizontal padding to align with the section content inside. */
details.result-supporting-sections > .cws-effective-pattern-note {
  margin: 0.5rem 0.75rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

html.light-mode details.result-supporting-sections > .cws-effective-pattern-note {
  border-bottom-color: var(--line-soft);
}

/* ─── TICKET-393C: Grouped pair list container ───────────────────────────────
 *
 * .result-pair-group__list is the body panel inside each pair group
 * (.result-group). Unlike .results-grid (flex-wrap for word cards), pairs
 * must stack in a single column — one row per pair.
 *
 * The hidden attribute is managed by JS toggle (same as .result-group__grid).
 * ────────────────────────────────────────────────────────────────────────── */

.result-pair-group__list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.5rem 0.75rem 0.25rem;
}

.result-pair-group__list[hidden] {
  display: none;
}

/* Pair groups inside the pairs section inherit full width of the section */
.result-pairs-section .result-group {
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  margin-bottom: 0.4rem;
  overflow: hidden;
}

html.light-mode .result-pairs-section .result-group {
  border-color: var(--line-soft);
}

/* Group header inherits .result-group__header from the word-result styles;
   tighten padding slightly since pair rows are more compact than word cards. */
.result-pairs-section .result-group__header {
  padding: 0.45rem 0.75rem;
}