/* PDA Compass: strategies page (A03, reworked by X2 for fewer clicks). Page layout only; components come from
   css/site.css and the explorer kit. Class names are page-prefixed (panda-tile, qf-, order-seg) so they never
   collide with the shell's .panda / .seg (regression 2026-10-21-panda-class-clash: the v0.1 .panda__letter rule
   made the shell's card badges 2.25rem tall). */

.h-info { display: inline-flex; vertical-align: middle; margin-left: var(--space-2, 8px); }
.small { font-size: 0.9em; }
.hero-jump { margin: 0; }

/* ---------- PANDA overview: compact tiles that double as one-tap filters */
.panda-section { padding-block: var(--space-6, 32px); }
.panda-intro { max-width: var(--measure, 68ch); }
.panda-tiles { list-style: none; margin: var(--space-4, 16px) 0 var(--space-3, 12px); padding: 0; display: grid; gap: var(--space-3, 12px); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.panda-tile { display: grid; grid-template-rows: auto auto 1fr; gap: 4px; width: 100%; min-height: 44px; text-align: left; padding: var(--space-3, 12px) var(--space-4, 16px); border: 1px solid var(--line, #d9d4cc); border-radius: var(--radius-m, 12px); background: var(--surface, #fff); color: var(--ink, #1f1d1a); cursor: pointer; font: inherit; transition: border-color 160ms, box-shadow 160ms; }
.panda-tile:hover { border-color: var(--accent, #2f6f6a); box-shadow: var(--shadow-1, 0 2px 8px rgba(0,0,0,.08)); }
.panda-tile:focus-visible { outline: 3px solid var(--focus, #ffbf47); outline-offset: 2px; }
.panda-tile[aria-pressed="true"] { border-color: var(--accent, #2f6f6a); background: var(--accent-soft, #e4f0ee); box-shadow: inset 0 0 0 2px var(--accent, #2f6f6a); }
.panda-tile__letter { font-family: var(--font-display, inherit); font-size: 2rem; line-height: 1; font-weight: 700; color: var(--accent, #2f6f6a); }
.panda-tile__name { font-weight: 600; }
.panda-tile__desc { font-size: 0.875em; color: var(--ink-muted, #5d5750); }
.panda-tile[aria-pressed="true"] .panda-tile__name::after { content: " · on"; font-weight: 400; color: var(--ink-muted, #5d5750); }
@media (prefers-reduced-motion: reduce) { .panda-tile, .strategy-card__toggle::after { transition: none; } }
:root[data-reduce-motion="true"] .panda-tile { transition: none; }

/* ---------- the one-tap chip rows (UX-CLICKS principle 3) */
.finder-controls { display: grid; gap: var(--space-3, 12px); margin-bottom: var(--space-4, 16px); }
.qf { display: grid; gap: var(--space-3, 12px); }
.qf-row { display: grid; gap: var(--space-2, 8px); }
@media (min-width: 720px) { .qf-row { grid-template-columns: 12.5rem minmax(0, 1fr); align-items: start; } }
.qf-row__title { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 0.95rem; min-height: 44px; }
.qf-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); align-items: center; }
.qf-chip { min-height: 44px; gap: 8px; }
.qf-chip__n { font-weight: 400; font-size: 0.8em; opacity: 0.8; font-variant-numeric: tabular-nums; }
.qf-chip__short { display: none; }
@media (max-width: 480px) { .qf-chip--has-short .qf-chip__text { display: none; } .qf-chip--has-short .qf-chip__short { display: inline; } }
.qf-chip[aria-pressed="true"] .qf-chip__n { opacity: 0.95; }
.qf-chip.is-zero { opacity: 0.55; }
.qf-chip--panda { min-width: 44px; justify-content: center; font-family: var(--font-display, inherit); font-size: 1.05rem; padding-inline: 12px; }
.qf-chip--panda .qf-chip__n { display: none; }
.qf-chip--quick::before { content: "⚡"; font-size: 0.9em; }
.qf-age-chip .qf-chip__x { font-size: 1.1rem; line-height: 1; margin-left: 2px; }
.qf-age-chip.is-any { cursor: default; opacity: 0.8; }
.qf-age__from { margin-inline: 4px; }

/* ---------- More filters: one disclosure for the rarer facets + the age slider */
.more-filters { margin: 0; }
.more-filters > summary { min-height: 48px; padding-block: var(--space-2, 8px); }
.more-filters__state { font-weight: 400; margin-right: auto; }
.more-facets { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px) var(--space-4, 16px); align-items: center; margin-bottom: var(--space-4, 16px); } /* 16px between triggers keeps each dropdown "i"'s 44px hit area clear of its neighbour */
.panda-cite a { padding-block: 10px; } /* inline padding: a 44px tap height for the two-line source link without changing the line layout */
.more-facets:empty { display: none; margin: 0; }
.age-control { border: 1px solid var(--line, #d9d4cc); border-radius: var(--radius-m, 12px); background: var(--surface, #fff); padding: var(--space-3, 12px) var(--space-4, 16px); }
.age-control__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px) var(--space-3, 12px); margin-bottom: var(--space-2, 8px); }
.age-control__title { margin: 0; font-size: 1rem; }

/* ---------- results bar: Open all / Close all + order */
.results-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2, 8px) var(--space-3, 12px); margin-top: var(--space-4, 16px); }
.order-seg { display: inline-flex; border: 1px solid var(--line, #d9d4cc); border-radius: 999px; overflow: hidden; background: var(--surface, #fff); }
.order-seg__btn { min-height: 44px; padding: 0 var(--space-4, 16px); border: 0; background: transparent; color: var(--ink, #1f1d1a); font: inherit; cursor: pointer; }
.order-seg__btn + .order-seg__btn { border-left: 1px solid var(--line, #d9d4cc); }
.order-seg__btn[aria-pressed="true"] { background: var(--accent-soft, #e4f0ee); color: var(--accent, #2f6f6a); font-weight: 600; }
.order-seg__btn:focus-visible { outline: 3px solid var(--focus, #ffbf47); outline-offset: -3px; }
.btn, .chip { min-height: 44px; }
.chip { display: inline-flex; align-items: center; padding: 0 var(--space-3, 12px); border-radius: 999px; }

/* ---------- results */
.results { margin-top: var(--space-3, 12px); }
.strategy-card { position: relative; scroll-margin-top: calc(var(--header-h, 72px) + 12px); }
.strategy-card .card__meta { gap: var(--space-2, 8px); margin-bottom: var(--space-2, 8px); align-items: center; }
.strategy-card__h { margin: var(--space-3, 12px) 0 var(--space-1, 4px); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep, var(--accent, #2f6f6a)); }
.strategy-card__more { margin-top: var(--space-3, 12px); padding-top: var(--space-3, 12px); border-top: 1px dashed var(--line, #d9d4cc); }
.strategy-card__more h4 { margin: var(--space-3, 12px) 0 var(--space-1, 4px); font-size: 1rem; }
.strategy-card .card__actions { margin-top: var(--space-3, 12px); align-items: center; gap: var(--space-2, 8px); flex-wrap: wrap; }
.badge--core { background: var(--warm-soft, #fbeedd); color: var(--ink, #1f1d1a); border: 1px solid var(--warm, #d98b3a); }
.badge--panda { font-weight: 700; background: var(--accent-soft, #e4f0ee); color: var(--accent, #2f6f6a); }
.badge--evidence { display: inline-flex; align-items: center; gap: 4px; }
.save-btn[aria-pressed="true"] { background: var(--accent-soft, #e4f0ee); border-color: var(--accent, #2f6f6a); }

/* the explorer's bar must never widen a phone */
.de, .de-bar, .de-filters { max-width: 100%; }
@media (max-width: 480px) {
  .panda-tiles { grid-template-columns: 1fr 1fr; gap: var(--space-2, 8px); }
  .panda-tile { padding: var(--space-3, 12px); }
  .panda-tile__letter { font-size: 1.6rem; }
  .panda-tile__desc { font-size: 0.8em; }
  .order-seg { width: 100%; }
  .order-seg__btn { flex: 1; }
  .results-bar__order { width: 100%; }
}

/* ---------- print one strategy */
@media print {
  .no-print, #site-header, #site-footer, .skip-link { display: none !important; }
  body.print-one .panda-section, body.print-one .page-hero, body.print-one #explorer, body.print-one #data-gaps, body.print-one #find-h { display: none !important; }
  body.print-one .strategy-card:not(.print-target) { display: none !important; }
  .strategy-card__more[hidden], .card__panel[hidden] { display: block !important; }
  .strategy-card .card__actions, .it-btn { display: none !important; }
  .strategy-card { break-inside: avoid; border: 1px solid #999; padding: 12px; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}