.guide-page { overflow: auto; height: auto; min-height: 100dvh; background-image: radial-gradient(circle at 84% 7%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 26rem); }
.skip-link { position: fixed; z-index: 50; top: var(--space-3); left: var(--space-3); transform: translateY(-200%); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--accent-fill); color: var(--accent-ink); }
.skip-link:focus { transform: translateY(0); }
.guide-topbar { min-height: 4.75rem; background: color-mix(in srgb, var(--surface-solid) 90%, transparent); backdrop-filter: blur(18px); position: sticky; top: 0; }
.guide-main { max-width: 86rem; margin-inline: auto; padding: var(--space-7) var(--space-6) var(--space-8); }
.guide-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-5) var(--space-8); }
.guide-intro h1 { font-size: clamp(2.6rem, 5vw, 5rem); line-height: 1; letter-spacing: -.06em; font-weight: 500; margin: 0; }
.guide-intro h1 em { font-style: normal; color: var(--accent); }
.guide-intro p:not(.eyebrow) { color: var(--ink-soft); margin: var(--space-5) 0 0; }
.prep-jump { flex-shrink: 0; color: var(--ink-muted); font-size: var(--text-sm); text-decoration: none; padding: var(--space-4); border-left: 2px solid var(--accent); }
.prep-jump strong { display: block; color: var(--ink); font-weight: 500; margin-top: var(--space-1); }
.prep-jump:hover strong { color: var(--accent); }
.finder-heading, .finder-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.finder-heading .eyebrow { margin-bottom: var(--space-2); }
.finder-heading h2 { font-size: clamp(1.65rem, 3vw, 2.3rem); letter-spacing: -.045em; font-weight: 500; margin: 0; }
.finder-controls { display: grid; grid-template-columns: 1.25fr 1.1fr 1fr 1fr; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-4); background: color-mix(in srgb, var(--surface-solid) 88%, transparent); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent); backdrop-filter: blur(14px); }
.finder-controls label { font-size: var(--text-sm); color: var(--ink-soft); min-width: 0; }
.finder-controls input, .finder-controls select { display: block; width: 100%; min-height: 48px; margin-top: var(--space-2); padding-inline: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font: inherit; }
.finder-controls select { cursor: pointer; }
.finder-controls input::placeholder { color: var(--ink-muted); }
.finder-controls input:focus-visible, .finder-controls select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: transparent; }
.finder-summary { margin-top: var(--space-3); }
.finder-summary p { color: var(--ink-soft); font-size: var(--text-sm); margin: 0; }
.guide-note { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.6; }
#eligibility-note { max-width: 92ch; margin: var(--space-1) 0 var(--space-6); }
.program-group + .program-group { margin-top: var(--space-7); }
.group-heading { display: grid; grid-template-columns: minmax(10rem, .55fr) 1fr; gap: var(--space-5); align-items: end; padding-block: var(--space-3); border-top: 1px solid var(--line); margin-bottom: var(--space-3); }
.group-heading h3 { display: flex; align-items: center; gap: var(--space-3); font-weight: 500; margin: 0; font-size: var(--text-lg); }
.group-heading h3 span { min-width: 1.75rem; height: 1.75rem; display: inline-grid; place-items: center; border-radius: 50%; background: var(--surface-strong); color: var(--accent); font: var(--text-xs) "IBM Plex Mono", monospace; }
.group-heading p { color: var(--ink-muted); font-size: var(--text-sm); margin: 0; }
.opportunity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: var(--space-3); align-items: stretch; }
.opportunity-card { min-height: 14rem; width: 100%; display: flex; flex-direction: column; gap: 0; text-align: left; color: var(--ink); font: inherit; background: color-mix(in srgb, var(--surface-solid) 95%, transparent); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); cursor: pointer; box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.opportunity-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 54%, var(--line)); box-shadow: 0 14px 30px color-mix(in srgb, var(--ink) 10%, transparent); }
.opportunity-card:active { transform: translateY(-1px); }
.opportunity-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.opportunity-top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); }
.program-monogram { width: 2rem; height: 2rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: .55rem; background: color-mix(in srgb, var(--accent) 15%, var(--surface-strong)); color: var(--accent); font: 500 .68rem/1 "IBM Plex Mono", monospace; }
.program-monogram.is-large { width: 3.25rem; height: 3.25rem; border-radius: .8rem; font-size: .85rem; }
.opportunity-provider { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: var(--text-xs); }
.program-status { display: inline-flex; align-items: center; width: fit-content; min-height: 1.75rem; padding: .25rem .55rem; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--ink-muted); font: 500 .66rem/1.1 "IBM Plex Mono", monospace; }
.opportunity-top .program-status { margin-left: auto; max-width: 8rem; text-align: center; }
.program-status[data-status="open"] { color: #17663c; background: #e7f7ed; border-color: #b4dec3; }
.program-status[data-status="limited"] { color: #87500a; background: #fff4d9; border-color: #ead09a; }
.program-status[data-status="past"] { color: var(--ink-muted); background: var(--surface-strong); }
[data-theme="midnight"] .program-status[data-status="open"] { color: #9cf3bc; background: #123724; border-color: #2a6943; }
[data-theme="midnight"] .program-status[data-status="limited"] { color: #ffd38b; background: #3b2a0f; border-color: #775a25; }
.opportunity-name { display: block; font-size: 1.15rem; line-height: 1.25; letter-spacing: -.025em; font-weight: 600; }
.opportunity-location { display: block; color: var(--accent); font-size: var(--text-xs); margin-top: var(--space-2); }
.opportunity-footer { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: var(--space-3); color: var(--ink-muted); font-size: var(--text-xs); }
.opportunity-footer > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.opportunity-roles { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.opportunity-roles span { border: 1px solid var(--line); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); color: var(--ink-muted); font-size: var(--text-xs); }
.opportunity-brief { margin: 0; }
.opportunity-brief dt { color: var(--ink-muted); font-size: var(--text-xs); margin-bottom: var(--space-2); }
.opportunity-brief dd { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.6; margin: 0; }
.opportunity-note { color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.6; margin-block: var(--space-4); }
.opportunity-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.guide-button, .guide-text-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); font: 500 var(--text-sm)/1.5 "DM Sans", sans-serif; cursor: pointer; text-decoration: none; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface-strong); transition: transform var(--dur-fast) var(--ease-out); }
.guide-button.is-primary { color: var(--accent-ink); background: var(--accent-fill); border-color: transparent; }
.guide-text-button { background: transparent; border-color: transparent; padding-inline: var(--space-1); color: var(--accent); }
.guide-button:hover { border-color: var(--accent); transform: translateY(-1px); }
.guide-text-button:hover { text-decoration: underline; text-underline-offset: 4px; }
.guide-button:active, .guide-text-button:active, .prep-jump:active { transform: translateY(1px); }
.guide-button:disabled { opacity: .55; cursor: not-allowed; }
.program-verified { color: var(--ink-muted); font-size: var(--text-xs); line-height: 1.6; margin: var(--space-4) 0 0; }
.guide-empty { border: 1px dashed var(--line-strong); border-radius: var(--radius-md); padding: var(--space-6); color: var(--ink-soft); }
.guide-empty h3 { color: var(--ink); font-weight: 500; }

.program-dialog { width: min(44rem, calc(100% - 2rem)); max-height: min(50rem, calc(100dvh - 2rem)); margin: auto; padding: 0; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-solid); color: var(--ink); box-shadow: 0 28px 90px rgba(4, 14, 23, .28); }
.program-dialog[open] { animation: dialog-in var(--dur-base) var(--ease-out) both; }
.program-dialog::backdrop { background: rgba(4, 14, 23, .46); backdrop-filter: blur(8px); }
#program-dialog-content { padding: var(--space-5); }
.dialog-head { position: sticky; top: 0; z-index: 2; margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0; padding: var(--space-4) var(--space-5); background: color-mix(in srgb, var(--surface-solid) 92%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.dialog-head .eyebrow { margin-bottom: var(--space-1); }
.dialog-provider { margin: 0; color: var(--ink-soft); font-weight: 600; }
.dialog-close { font-size: 1.4rem; line-height: 1; }
.dialog-title-row { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--space-4); margin-top: var(--space-5); }
.dialog-title-row h2 { margin-top: var(--space-3); font-size: clamp(1.8rem, 4vw, 2.6rem); }
.dialog-scope { color: var(--accent); font-size: var(--text-sm); margin: var(--space-3) 0 var(--space-4); }
.dialog-brief { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); padding-block: var(--space-5); margin-top: var(--space-5); border-block: 1px solid var(--line); }
.dialog-steps { padding-top: var(--space-4); }
.dialog-steps h3 { margin: 0; font-size: var(--text-base); font-weight: 600; }
.dialog-steps ol { padding-left: 1.3rem; margin-bottom: 0; }
.dialog-steps li { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.6; margin-bottom: var(--space-2); padding-left: var(--space-2); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(.75rem) scale(.985); } to { opacity: 1; transform: none; } }

.preparation-guide { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-8); margin-top: var(--space-8); padding-top: var(--space-7); border-top: 1px solid var(--line-strong); scroll-margin-top: var(--space-6); }
.prep-heading h2 { font-size: clamp(2rem, 3vw, 3rem); line-height: 1.1; letter-spacing: -.05em; font-weight: 500; margin: 0; }
.prep-heading > p:last-child { color: var(--ink-muted); font-size: var(--text-sm); max-width: 35ch; margin-top: var(--space-5); }
.prep-steps { list-style: none; margin: 0; padding: 0; }
.prep-steps li { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-4); margin-bottom: var(--space-6); }
.prep-steps li > span { color: var(--accent); font: var(--text-sm)/1.8 "IBM Plex Mono", monospace; }
.prep-steps h3 { font-size: var(--text-lg); font-weight: 500; letter-spacing: -.02em; margin: 0 0 var(--space-2); }
.prep-steps p { color: var(--ink-soft); line-height: 1.65; margin: 0; }
.guide-method { margin-top: var(--space-7); border-top: 1px solid var(--line); padding-top: var(--space-5); }
.guide-method h2 { font-size: var(--text-base); font-weight: 500; }
.guide-method p { color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.65; max-width: 90ch; }

@media (max-width: 800px) {
  .guide-main { padding: var(--space-5) var(--space-4) var(--space-7); }
  .guide-topbar { min-height: 7rem; }
  .guide-intro { align-items: flex-start; flex-direction: column; gap: var(--space-5); padding-top: var(--space-4); }
  .finder-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-3); }
  .group-heading { grid-template-columns: 1fr; gap: var(--space-1); }
  .opportunity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opportunity-card { min-height: 13rem; }
  .preparation-guide { grid-template-columns: 1fr; gap: var(--space-5); }
  .finder-summary { gap: var(--space-1); }
  .finder-controls input, .finder-controls select { font-size: var(--text-base); }
  .dialog-brief { grid-template-columns: 1fr; gap: var(--space-4); }
}
@media (max-width: 540px) {
  .opportunity-grid { grid-template-columns: 1fr; }
  .opportunity-card { min-height: 11.5rem; }
  .finder-controls { grid-template-columns: 1fr; }
  .program-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
  #program-dialog-content { padding: var(--space-4); }
  .dialog-head { margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0; padding-inline: var(--space-4); }
  .dialog-title-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .opportunity-card, .guide-button, .guide-text-button, .program-dialog[open] { transition: none; animation: none; }
}

/* CommandCode-inspired directory: ruled surfaces, flat controls, violet signal. */
.guide-page { background-color:var(--bg); background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:7.5rem 7.5rem; }
.guide-topbar { min-height:5.25rem; background:color-mix(in srgb,var(--bg) 94%,transparent); }
.guide-main { max-width:82rem; padding-top:0; }
.guide-intro { min-height:32rem; align-items:center; padding:var(--space-8) clamp(0rem,2vw,2rem); border-inline:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; }
.guide-intro::before { content:"// COMMUNITY PROGRAMS"; position:absolute; right:1.5rem; top:1.5rem; color:var(--ink-muted); font:500 .65rem/1 "Geist Mono",ui-monospace,monospace; letter-spacing:.12em; }
.guide-intro h1 { max-width:10ch; font-size:clamp(3.5rem,7vw,6.75rem); line-height:.94; letter-spacing:-.07em; font-weight:600; }
.guide-intro h1 em { color:var(--accent); }
.guide-intro p:not(.eyebrow) { font-size:1rem; }
.prep-jump { min-width:19rem; border:1px solid var(--line); border-left:2px solid var(--accent); background:var(--surface); }
.prep-jump:hover { background:var(--surface-strong); }
.program-finder { padding-top:var(--space-7); }
.finder-heading h2 { font-size:clamp(2rem,4vw,3rem); font-weight:600; }
.finder-controls { border-radius:0; gap:0; padding:0; background:var(--surface-solid); box-shadow:none; }
.finder-controls label { padding:.75rem; border-left:1px solid var(--line); }
.finder-controls label:first-child { border-left:0; }
.finder-controls input,.finder-controls select { margin-top:.5rem; min-height:44px; border-radius:0; background:var(--surface-strong); font-size:.85rem; }
.finder-summary { padding:.5rem .75rem; margin-top:0; border:1px solid var(--line); border-top:0; background:var(--surface); }
#eligibility-note { margin-top:var(--space-3); }
.group-heading { border-top-color:var(--line-strong); grid-template-columns:minmax(12rem,.5fr) 1fr; }
.group-heading h3 { font-family:"Geist Mono",ui-monospace,monospace; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; }
.group-heading h3 span { border-radius:0; background:var(--accent-fill); color:var(--accent-ink); }
.opportunity-grid { gap:1px; background:var(--line); border:1px solid var(--line); }
.opportunity-card { min-height:14.25rem; border:0; border-radius:0; background:var(--surface-solid); box-shadow:none; }
.opportunity-card:hover { transform:none; border-color:transparent; background:var(--surface-strong); box-shadow:inset 0 -2px var(--accent); }
.opportunity-card:active { transform:translateY(1px); }
.program-monogram { border-radius:0; background:var(--surface-strong); border-color:var(--line); }
.program-monogram.is-large { border-radius:0; }
.program-monogram img { width: 78%; height: 78%; object-fit: contain; }
.program-monogram:has(img) { background: #fff; border: 1px solid var(--line); }
.program-monogram.is-vector img { filter: brightness(0); }
.opportunity-provider { font-family:"Geist Mono",ui-monospace,monospace; font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; }
.opportunity-name { font-size:1.12rem; }
.opportunity-footer { font-family:"Geist Mono",ui-monospace,monospace; font-size:.65rem; }
.program-status { border-radius:999px; font-family:"Geist Mono",ui-monospace,monospace; }
.program-status[data-status="open"],[data-theme] .program-status[data-status="open"] { color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--surface-solid)); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); }
.program-status[data-status="limited"] { color:#e5cf9b; background:#2e2717; border-color:#5a4d28; }
.program-status[data-status="past"] { background:var(--surface-strong); }
[data-theme="daylight"] .program-status[data-status="limited"] { color:var(--ink-soft); background:var(--surface-strong); border-color:var(--line-strong); }
.guide-button,.guide-text-button { border-radius:0; font-family:"Geist",system-ui,sans-serif; }
.guide-button.is-primary { background:var(--accent-fill); color:var(--accent-ink); }
.guide-empty { border-radius:0; background:var(--surface); }
.program-dialog { border-radius:0; background:var(--surface-solid); }
.program-dialog::backdrop { background:rgba(0,0,0,.76); backdrop-filter:blur(4px); }
.dialog-head { background:color-mix(in srgb,var(--surface-solid) 96%,transparent); }
.dialog-provider { font-family:"Geist Mono",ui-monospace,monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.dialog-title-row h2 { font-weight:600; letter-spacing:-.055em; }
.dialog-brief { gap:1px; padding:1px; background:var(--line); border:0; }
.dialog-brief>div { padding:var(--space-4); background:var(--surface-solid); }
.dialog-steps { border-top:1px solid var(--line); }
.preparation-guide { border-top-color:var(--line-strong); }
.prep-heading h2 { font-weight:600; }
.prep-steps { border-top:1px solid var(--line); }
.prep-steps li { margin:0; padding:var(--space-5) 0; border-bottom:1px solid var(--line); }
.prep-steps li>span { font-family:"Geist Mono",ui-monospace,monospace; }
.guide-method { border-top-color:var(--line-strong); }

@media (max-width:800px) {
  .guide-topbar { min-height:4.5rem; }
  .guide-intro { min-height:27rem; padding-inline:0; }
  .guide-intro h1 { font-size:clamp(3rem,13vw,5rem); }
  .prep-jump { min-width:0; width:100%; }
  .finder-controls { gap:1px; background:var(--line); }
  .finder-controls label { border:0; background:var(--surface-solid); }
  .group-heading { grid-template-columns:1fr; }
}
@media (max-width:540px) {
  .guide-page { background-size:5rem 5rem; }
  .guide-intro::before { display:none; }
  .opportunity-grid { grid-template-columns:1fr; }
}