/* The Drill Library (drills.html). Builds on styles.css tokens, the member site's header and menu, and the realtor page's hero and footer. */
.drills .site-head, .drills .dl-shell { padding-inline: 16px; } /* realtor.css zeroes body padding; keep text off the screen edge */
.drills .site-head .subnav { margin-bottom: 0; }
/* Same column as every other member page: heading on the left under the menu, filters in a sidebar beside the drills. */
.dl-shell { padding-top: 26px; }
.dl-head { max-width: none; margin-bottom: 18px; }
.dl-head h1 { margin: 0; }
.dl-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dl-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; }
.dl-wrap { min-width: 0; padding: 0 0 8px; }
.dl-wrap h2 { font-family: var(--font-display); }

.dl-find { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; border: 1px solid var(--line); border-radius: 14px; z-index: 3; padding: 14px 14px 10px; background: color-mix(in srgb, var(--ground) 94%, transparent); backdrop-filter: blur(6px); }
.dl-search input { width: 100%; font: inherit; font-size: 1.05rem; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.dl-find-h { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin: 2px 0 8px; }
.dl-states { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.dl-filters { margin-top: 12px; }
.dl-state { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; font: inherit; }
.dl-state span { font-size: 0.78rem; color: var(--ink-3); line-height: 1.25; }
.dl-state[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.dl-state[aria-pressed="true"] span { color: var(--primary-ink); }
.dl-selects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.dl-selects label { display: flex; flex-direction: column; gap: 3px; font-size: 0.78rem; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; min-width: 0; }
.dl-selects select { font: inherit; font-size: 0.92rem; text-transform: none; letter-spacing: 0; font-weight: 400; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); width: 100%; }
.dl-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.dl-family h2 { margin: 30px 0 10px; font-size: 1.6rem; }
.dl-family:first-child h2 { margin-top: 0; }
.dl-intro { margin: 0 0 12px; color: var(--ink-2); }
.dl-intro summary { cursor: pointer; color: var(--ink-3); }
.dl-drill { margin: 0 0 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); scroll-margin-top: 350px; }
.dl-drill[open] { border-color: var(--line-strong); }
.dl-drill > summary { list-style: none; cursor: pointer; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 3px; align-items: baseline; }
.dl-drill > summary::-webkit-details-marker { display: none; }
.dl-drill > summary b { font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; }
.dl-key { font-size: 0.78rem; font-weight: 700; color: var(--twine); letter-spacing: 0.04em; white-space: nowrap; }
.dl-sum { grid-column: 1 / -1; color: var(--ink-2); font-style: italic; }
.dl-tags { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.8rem; color: var(--ink-3); }
.dl-label { padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.dl-label[data-l="Established"] { background: color-mix(in srgb, var(--thriving) 22%, transparent); }
.dl-label[data-l="Promising"] { background: color-mix(in srgb, var(--solid) 22%, transparent); }
.dl-label[data-l="Emerging"] { background: color-mix(in srgb, var(--patchy) 22%, transparent); }
.dl-label[data-l="Debated"] { background: color-mix(in srgb, var(--fragile) 24%, transparent); }
.dl-body { padding: 0 16px 12px; border-top: 1px solid var(--line); line-height: 1.55; }
.dl-body ol { padding-left: 1.4em; }
.dl-body li { margin: 4px 0; }
.dl-meta { color: var(--ink-2); }
.dl-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.dl-empty { padding: 30px 0; text-align: center; color: var(--ink-2); }

.dl-kit { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--twine); border-radius: var(--radius); background: var(--surface); }
.dl-kit-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.dl-kit-head h2 { margin: 0; font-size: 1.4rem; }
.dl-kit-list { margin: 6px 0 0; padding-left: 1.4em; }
.dl-kit-list li { margin: 4px 0; }
.dl-kit-list a { color: var(--ink); }

.dl-about, .dl-safety { margin-top: 44px; padding-top: 10px; border-top: 1px solid var(--line); }
.dl-about li { margin: 6px 0; }
.dl-safe { margin: 0 0 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); scroll-margin-top: 80px; }
.dl-safe summary { cursor: pointer; font-weight: 600; }
.dl-safe ul { padding-left: 1.2em; }
.dl-safe li { margin: 6px 0; line-height: 1.5; }

@media (max-width: 900px) {
  .dl-layout { grid-template-columns: 1fr; gap: 18px; }
  .dl-find { position: static; max-height: none; overflow: visible; }
  .dl-selects { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .dl-drill { scroll-margin-top: 70px; }
  .dl-states { grid-template-columns: repeat(2, 1fr); }
  .dl-selects { grid-template-columns: repeat(2, 1fr); }
}

@media print {
  .site-head, .dl-head, .tour-invite, .tour-card, .dl-find, .dl-about, .dl-safety, .site-foot, .dl-actions, .dl-kit-head div { display: none !important; }
  body.print-kit .dl-results .dl-drill:not([open]), body.print-kit .dl-intro, body.print-kit .dl-family h2 { display: none; }
  .dl-drill { break-inside: avoid; border-color: #999; }
}

.dl-practice { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 4px; }
.dl-rate { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dl-rate .btn { min-width: 36px; }
@media print { .dl-practice { display: none !important; } }

/* The favorite star in each drill's title row. */
.dl-star { border: 0; background: none; padding: 0 4px; font-size: 1.1rem; line-height: 1; color: var(--ink-3); cursor: pointer; vertical-align: 1px; }
.dl-star:hover, .dl-star.on { color: var(--twine); }

/* Video demos (content/drill-demos.json) */
.dl-vid { color: var(--accent, inherit); font-weight: 600; }
.dl-demos { display: grid; gap: 10px; margin: 12px 0 4px; }
.dl-demo { margin: 0; }
.dl-demo video { width: 100%; max-width: 720px; aspect-ratio: 16 / 9; display: block; border-radius: var(--radius); background: #000; }
.dl-demo figcaption { margin-top: 4px; }
@media print { .dl-demos { display: none; } }

/* The spoken tour (drill-tour.js) */
.tour-invite { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: -6px 0 18px; padding: 12px 16px; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-soft); }
.tour-card { position: fixed; z-index: 40; left: 50%; bottom: calc(16px + var(--bottom-nav-space, 0px)); transform: translateX(-50%); width: min(560px, calc(100vw - 24px)); display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.tour-top { display: flex; align-items: center; gap: 10px; }
.tour-dots { display: flex; gap: 4px; flex: 1; }
.tour-dots i { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-2); }
.tour-dots i.on { background: var(--accent); }
.tour-text { margin: 0; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.4; }
.tour-nav { display: flex; justify-content: space-between; gap: 8px; }
.tour-spot { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 10px; box-shadow: 0 0 0 9999px color-mix(in srgb, var(--ground) 0%, transparent); transition: outline-color .2s; position: relative; z-index: 2; }
@media (prefers-reduced-motion: no-preference) { .tour-spot { animation: tour-glow 1.6s ease-in-out infinite; } }
@keyframes tour-glow { 50% { outline-color: color-mix(in srgb, var(--accent) 40%, transparent); } }