/* Price-free feature guides. Extends the approved HJ cinematic design. */
.hj-reference-guide { background: #041120; }
.ref-container { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.ref-section { padding: 72px 0; border-top: 1px solid #203b4f; background: #041120; scroll-margin-top: 140px; }
.ref-section h2 { margin: 0; color: #f3f7ff; font: 700 clamp(1.8rem, 3.3vw, 2.9rem)/1.16 'Space Grotesk', sans-serif; letter-spacing: -.025em; }
.ref-intro { margin: 16px 0 36px; max-width: 85ch; color: #afc2d8; font-size: 1.1rem; }
.ref-tiers { margin-top: 40px; }
.ref-tier { display: grid; grid-template-columns: 72px minmax(190px,.95fr) minmax(0,1.5fr) auto; gap: 30px; align-items: center; min-height: 132px; padding: 25px 0; border-bottom: 1px solid #203b4f; }
.ref-number { color: #47d6f5; font: 400 2.7rem/1.2 'Space Grotesk',sans-serif; border-right: 1px solid #29495e; }
.ref-tier h3 { margin: 0; color: #f3f7ff; font: 700 1.65rem/1.25 'Space Grotesk', sans-serif; letter-spacing: -.015em; }
.ref-tier p { margin: 0; color: #afc2d8; font-size: 1rem; }
.ref-outline { border: 1px solid #47d6f5; border-radius: 8px; padding: 13px 17px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; color: #47d6f5; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.ref-outline:hover { background: #0b283a; }
.ref-outline svg, .ref-link svg { flex: 0 0 18px; }
.ref-note { border: 1px solid #29495e; border-radius: 8px; color: #afc2d8; padding: 20px 24px; margin: 28px 0 0; font-size: .95rem; }
.ref-search { margin-top: 24px; }
.ref-search-field { position: relative; }
.ref-search-icon { position: absolute; left: 18px; top: 18px; width: 20px; height: 20px; color: #afc2d8; pointer-events: none; }
.ref-search .ref-search-field input { padding-left: 52px; }
.ref-scene-disclosure { position: absolute; right: 20px; top: 626px; z-index: 1; margin: 0; padding: 8px 12px; max-width: 360px; border-radius: 6px; background: rgba(3,12,26,.7); color: #c2cfdd; font-size: .65rem; line-height: 1.45; }
.ref-search label { display: block; color: #47d6f5; font: 600 .78rem/1.5 'JetBrains Mono',monospace; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.ref-search input { width: 100%; border: 1px solid #426176; border-radius: 8px; background: #071827; color: #f3f7ff; font: 400 1rem/1.5 'Inter',sans-serif; padding: 16px 20px; min-height: 56px; }
.ref-search input::placeholder { color: #a1b6d0; }
.ref-search input:focus-visible { outline: 2px solid #47d6f5; outline-offset: 3px; }
.ref-search-status { color: #8da5be; font-size: .86rem; margin: 12px 0; }
.ref-model { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.55fr) minmax(160px,.65fr); gap: 30px; align-items: start; padding: 24px 0; border-bottom: 1px solid #203b4f; scroll-margin-top: 140px; }
.ref-model h3 { margin: 0 0 5px; color: #f3f7ff; font: 700 1.15rem/1.35 'Space Grotesk', sans-serif; white-space: pre-line; }
.ref-model code { font: 400 .88rem/1.65 'JetBrains Mono',monospace; color: #afc2d8; overflow-wrap: anywhere; white-space: pre-line; }
.ref-model strong { color: #f3f7ff; font-size: 1rem; }
.ref-model p { color: #afc2d8; margin: 5px 0 0; font-size: .95rem; }
.ref-link { color: #47d6f5; display: inline-flex; align-items: center; gap: 12px; font-size: .9rem; min-height: 44px; }
.ref-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.ref-source-note { color: #a1b6d0; font-size: .82rem; }
.ref-model-actions { display: grid; gap: 6px; }
.ref-model-actions .ref-link { font-size: .85rem; }
.ref-planning { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; margin-top: 28px; }
.ref-planning article { border-left: 1px solid #29495e; padding-left: 24px; }
.ref-planning h3 { color: #f3f7ff; font: 700 1.25rem/1.4 'Space Grotesk',sans-serif; margin: 0 0 7px; }
.ref-planning p { margin: 0; color: #afc2d8; }
.ref-faq { margin-top: 30px; }
.ref-faq details { border: 1px solid #426176; border-radius: 8px; margin: 10px 0; }
.ref-faq summary { padding: 16px 22px; cursor: pointer; color: #f3f7ff; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 14px; }
.ref-faq summary::-webkit-details-marker { display: none; }
.ref-faq-chevron { flex: 0 0 18px; width: 18px; height: 18px; }
.ref-faq details[open] .ref-faq-chevron { transform: rotate(180deg); }
.ref-faq p { margin: 0; padding: 0 22px 20px; color: #afc2d8; }
.ref-related-links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 25px; }
.ref-empty { color: #afc2d8; padding: 24px 0; }
.hj-reference-guide [hidden] { display: none !important; }
@media(max-width:1100px) {
  .ref-tier { grid-template-columns: 56px minmax(0,1fr) minmax(0,1.4fr); gap: 22px; }
  .ref-tier .ref-outline { grid-column: 2 / 4; justify-self: start; }
  .ref-model { grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); }
  .ref-model>.ref-link, .ref-model>.ref-source-note, .ref-model>.ref-model-actions { grid-column: 2; }
}
@media(max-width:767px) {
  .ref-scene-disclosure { top: 218px; right: 16px; max-width: calc(100% - 32px); }
  .ref-container { width: calc(100% - 36px); }
  .ref-section { padding: 42px 0; }
  .ref-intro { font-size: 1rem; margin-bottom: 24px; }
  .ref-tier { grid-template-columns: 42px minmax(0,1fr); gap: 12px 18px; padding: 25px 0; }
  .ref-number { font-size: 2rem; align-self: start; }
  .ref-tier h3 { font-size: 1.5rem; }
  .ref-tier p, .ref-tier .ref-outline { grid-column: 2; }
  .ref-note { padding: 16px 18px; }
  .ref-model { grid-template-columns: minmax(0,1fr); gap: 14px; padding: 24px 0; }
  .ref-model>.ref-link, .ref-model>.ref-source-note, .ref-model>.ref-model-actions { grid-column: 1; }
  .ref-planning { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .ref-faq summary { padding: 16px; }
  .ref-faq p { padding: 0 16px 18px; }
}
@media(prefers-reduced-motion:reduce) { .hj-reference-guide { scroll-behavior: auto; } }

.ref-component-intro { margin-top: 40px; scroll-margin-top: 160px; }

.ref-family-filter { margin-bottom: 24px; }
.ref-family-filter select { width: 100%; border: 1px solid #426176; border-radius: 8px; background: #071827; color: #f3f7ff; color-scheme: dark; font: 400 1rem/1.5 Inter, sans-serif; padding: 14px 16px; min-height: 56px; }
.ref-family-filter select:focus-visible { outline: 2px solid #47d6f5; outline-offset: 3px; }
.ref-family-filter .ref-source-note { margin: 10px 0 0; }
.ref-tier.is-selected { background: #071b2b; }

.ref-search-examples { margin-top: 16px; }
.ref-search-examples > p { margin: 0 0 12px; }
.ref-search-examples > div { display: flex; flex-wrap: wrap; gap: 10px; }
.ref-search-example { min-height: 44px; padding: 10px 14px; font-family: inherit; cursor: pointer; background: transparent; }
.ref-search-example:hover, .ref-search-example[aria-pressed="true"] { background: #0b283a; color: #f3f7ff; }
.ref-search-example:focus-visible { outline: 2px solid #47d6f5; outline-offset: 3px; }