/* Resource directory: all recommendations remain visible without JavaScript. */
.resource-page main { padding-bottom: 1rem; }
.resource-hero { padding: 1.7rem 0 2.2rem; background: var(--green-soft); border-bottom: 1px solid var(--line); }
.resource-back { font-size: .9rem; }
.resource-hero .section-kicker { margin: 1.3rem 0 .55rem; color: var(--green); }
.resource-hero h1 { margin: 0 0 1rem; max-width: 25ch; font-family: var(--display); font-size: 3rem; line-height: 1.12; letter-spacing: -.025em; }
.resource-hero .lede { color: var(--ink); max-width: 48rem; margin: 0 0 .9rem; }
.resource-intro { max-width: 49rem; margin: 0; }
.resource-jumps { display: flex; flex-wrap: wrap; gap: .5rem .65rem; margin-top: 1.5rem; }
.resource-jumps a { display: inline-flex; align-items: center; min-height: 2.75rem; border: 1px solid var(--green); border-radius: .4rem; padding: .5rem .8rem; background: var(--paper); color: var(--green); font-weight: 700; font-size: .93rem; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.resource-jumps a:hover { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.resource-library { padding-bottom: 2.4rem; }
.resource-section { padding-top: 2.75rem; }
.resource-section + .resource-section { margin-top: 2.25rem; border-top: 1px solid var(--line); }
.resource-section-heading { margin-bottom: 1.35rem; max-width: 49rem; }
.resource-section-heading h2 { margin: 0 0 .65rem; font-family: var(--display); font-size: 2rem; line-height: 1.2; }
.resource-section-heading p { margin: 0; color: var(--muted); }
.resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; align-items: stretch; }
.resource-card { min-width: 0; padding: 1.45rem; background: var(--paper); border: 1px solid var(--line); border-radius: .65rem; }
.resource-card h3 { font-family: var(--sans); font-size: 1.35rem; line-height: 1.3; margin: 0 0 .65rem; }
.resource-card p { margin: .85rem 0; }
.resource-card > :last-child { margin-bottom: 0; }
.resource-card .resource-meta { color: var(--green); font-size: .86rem; line-height: 1.5; font-weight: 700; padding-bottom: .8rem; margin: 0 0 1rem; border-bottom: 1px solid var(--line); }
.resource-card .resource-detail { color: var(--muted); font-size: .94rem; }
.resource-links { padding-top: .5rem; line-height: 1.8; }
.resource-links a { font-weight: 700; text-underline-offset: .2em; }
.resource-card ul { padding-left: 1.2rem; }
.resource-card li { margin: .65rem 0; }
.resource-source { color: var(--muted); font-size: .88rem; max-width: 58rem; margin: 1.2rem 0 0; }
.resource-company { padding: 1.4rem 1.5rem; margin-top: 1.2rem; background: var(--green-soft); border-radius: .6rem; }
.resource-company h3, .resource-community-list h3 { font-family: var(--sans); font-size: 1.3rem; margin: 0 0 .75rem; }
.resource-company p { max-width: 57rem; }
.resource-company > :last-child { margin-bottom: 0; }
.resource-community-list { padding: 1.5rem; margin-top: 1.2rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--paper); }
.resource-community-list ul { padding-left: 1.2rem; margin-bottom: 1.3rem; }
.resource-community-list li { margin: .85rem 0; max-width: 60rem; }
.resource-community-list > :last-child { margin-bottom: 0; }
.resource-page .ws-context { border-block: 1px solid var(--line); margin-top: 2.75rem; padding: 1rem 0; }
.resource-page .ws-context summary { cursor: pointer; font-weight: 700; padding: .6rem 0; min-height: 2.75rem; }
.resource-page .ws-context > summary { font-size: 1.15rem; }
.resource-page .ws-context p { max-width: 55rem; }
.resource-page .ws-condition { margin: .65rem 0; padding: .3rem 1.1rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--paper); }
.resource-page .ws-condition .fine { font-size: .85rem; color: var(--muted); }
.resource-selection { margin-top: 2rem; max-width: 57rem; font-size: .9rem; color: var(--muted); }
.resource-selection h2 { font-family: var(--sans); font-size: 1.15rem; margin-bottom: .75rem; }
.resource-page main [id] { scroll-margin-top: 7rem; }
.resource-page .resource-card:target, .resource-page .resource-community-list li:target { outline: 2px solid var(--green); outline-offset: .3rem; }
.resource-page main :focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
@media (max-width: 700px) {
  .resource-hero { padding-block: 1.25rem 1.6rem; }
  .resource-hero h1 { font-size: 2.35rem; }
  .resource-hero .lede { font-size: 1.14rem; line-height: 1.55; }
  .resource-intro { font-size: .97rem; }
  .resource-jumps { gap: .45rem; margin-top: 1.15rem; }
  .resource-jumps a { font-size: .87rem; padding: .5rem .65rem; }
  .resource-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .resource-section { padding-top: 2rem; }
  .resource-section + .resource-section { margin-top: 1.75rem; }
  .resource-section-heading h2 { font-size: 1.8rem; }
  .resource-card, .resource-company, .resource-community-list { padding: 1.15rem; }
}
@media print {
  .resource-jumps, .resource-back { display: none; }
  .resource-hero { padding: 0; background: none; }
  .resource-grid { display: block; }
  .resource-card { break-inside: avoid; margin-bottom: 1rem; }
}

/* Keep the category chooser available while the selected resources are read. */
.resource-browser { background: var(--green-soft); border-bottom: 1px solid var(--line); padding-block: .75rem; }
.resource-browser .resource-jumps { margin: 0; }
.resource-mobile-chooser { display: none; }
.resource-enhanced .resource-browser { position: sticky; top: var(--resource-header-height, 76px); z-index: 35; box-shadow: 0 3px 5px rgba(23,44,56,.06); }
.resource-enhanced .resource-jumps a[aria-current="true"] { background: var(--green); color: var(--paper); border-color: var(--green); text-decoration: none; }
.resource-enhanced .resource-section { padding-top: 1.5rem; margin-top: 0; border-top: 0; }
.resource-enhanced .resource-section[hidden] { display: none; }
.resource-enhanced main [id] { scroll-margin-top: var(--resource-jump-offset, 10rem); }
.resource-category-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 820px) {
  .resource-enhanced .resource-browser { padding-block: .5rem; }
  .resource-enhanced .resource-browser .resource-jumps { display: none; }
  .resource-enhanced .resource-mobile-chooser { display: grid; grid-template-columns: 4rem minmax(0,1fr); align-items: center; gap: .55rem; }
  .resource-mobile-chooser label { font-size: .8rem; line-height: 1.25; font-weight: 700; color: var(--green); }
  .resource-mobile-chooser select { min-width: 0; width: 100%; min-height: 44px; padding: .55rem .4rem; border: 1px solid var(--green); border-radius: .4rem; color: var(--ink); background: var(--paper); font: inherit; font-size: .95rem; font-weight: 700; }
}
@media print {
  .resource-browser, .resource-category-status { display: none!important; }
  .resource-enhanced .resource-section[hidden] { display: block!important; }
}

/* Optional apps follow the letters and community recommendations. */
.resource-apps { margin-top: 2rem; }
.resource-apps > h3 { font-family: var(--sans); font-size: 1.3rem; margin: 0 0 .75rem; }

/* Move the first practical suggestion nearer the top of a phone screen. */
@media(max-width:700px){
 .resource-hero{padding:.65rem 0 .85rem}
 .resource-hero .section-kicker{margin:.4rem 0 .25rem}
 .resource-hero h1{margin-bottom:.45rem;font-size:2.05rem}
 .resource-hero .lede{font-size:1rem;line-height:1.4;margin-bottom:.4rem}
 .resource-hero .resource-intro{font-size:.85rem;line-height:1.4}
 .resource-enhanced .resource-section{padding-top:1rem}
 .resource-section-heading{margin-bottom:.7rem}
 .resource-section-heading h2{font-size:1.5rem;margin-bottom:.3rem}
}