/*
 * DNCG course finder everywhere: "Help me choose a course" (3.12.0).
 *
 * Same contract as search.css and course-finder.css: no literal colour in
 * any notation, every colour a theme token, so each child theme's brand
 * carries through; nothing smaller than --fs-min (1.1rem). One rule per
 * component. Results are the theme's own course cards (css/components/
 * card.css: .card, .course-cards-list); the rules here only fit them into
 * the finder and style the list view's level badge, facts and "why it
 * fits" line, which the theme has no CSS for yet.
 *
 * Loaded only with the network option dncg_search_finder_everywhere on.
 */

/* ---------------------------------------------------------------- shell */

.dncg-choose { color: var(--ink); font-size: var(--fs-min); line-height: 1.55; }
.dncg-choose--panel { border: 1px solid var(--line); border-left: var(--card-edge) solid var(--accent); border-radius: var(--radius-md); background: var(--light); padding: 1.8rem 2rem; margin: 0 0 2rem; }
.dncg-choose__head { margin: 0 0 1.2rem; }
.dncg-choose__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.9rem; line-height: 1.15; color: var(--text-heading); margin: 0 0 .4rem; }
.dncg-choose__intro { font-size: var(--fs-min); color: var(--ink); margin: 0 0 1rem; max-width: 46rem; }
.dncg-choose__step { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.6rem; line-height: 1.2; color: var(--text-heading); margin: .4rem 0 .8rem; }
.dncg-choose__subhead { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.3rem; color: var(--text-heading); margin: 1.4rem 0 .7rem; }
.dncg-choose__note { font-size: var(--fs-min); color: var(--muted); border-left: var(--card-edge) solid var(--line); padding-left: 1rem; margin: 1.2rem 0 0; max-width: 46rem; }
.dncg-choose__note a, .dncg-choose__handoff a, .dncg-choose__links a { font-weight: 700; color: var(--link); }

/* -------------------------------------------------- navigation, answers */

.dncg-choose__nav { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem; margin: 0 0 .8rem; }
.dncg-choose__back, .dncg-choose__restart { cursor: pointer; border: 0; background: none; padding: .3rem 0; font: inherit; font-size: var(--fs-min); font-weight: 700; color: var(--link); text-decoration: underline; text-underline-offset: .2em; }
.dncg-choose__back::before { content: "\2190\00a0"; }
.dncg-choose__restart { color: var(--muted); }
.dncg-choose__progress { margin-left: auto; font-size: var(--fs-min); color: var(--muted); }
.dncg-choose__summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .6rem; }
.dncg-choose__summary-lead { font-size: var(--fs-min); font-weight: 700; color: var(--muted); }
.dncg-choose__answer { cursor: pointer; text-align: left; font: inherit; font-size: var(--fs-min); font-weight: 600; color: var(--text-heading); background: var(--white); border: 1px solid var(--control-border); border-radius: var(--radius-pill); padding: .25rem .8rem; }
.dncg-choose__answer::after { content: "\00a0\270E"; color: var(--muted); }
.dncg-choose__answer:hover { border-color: var(--accent); }

/* -------------------------------------------------------------- options */

.dncg-choose__options { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .8rem; }
.dncg-choose__options--subjects { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .6rem; }
.dncg-choose__option { cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-align: left; font: inherit; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-left: var(--card-edge) solid var(--accent); border-radius: var(--radius-sm); padding: .9rem 1.1rem; min-height: 3.2rem; transition: border-left-width var(--transition), border-color var(--transition); }
.dncg-choose__option:hover:not(:disabled) { border-color: var(--accent); border-left-width: var(--card-edge-hover); }
.dncg-choose__option:disabled { cursor: not-allowed; border-left-color: var(--line); background: var(--light); }
.dncg-choose__option--all { border-left-color: var(--control-border); }
.dncg-choose__option-label { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.2rem; line-height: 1.25; color: var(--text-heading); }
.dncg-choose__option-hint { font-size: var(--fs-min); color: var(--muted); }
.dncg-choose__option-count { margin-top: .2rem; font-size: var(--fs-min); font-weight: 700; color: var(--text-heading); background: var(--light); border-radius: var(--radius-pill); padding: .05rem .6rem; }
.dncg-choose__option-count--none { font-weight: 600; color: var(--muted); background: none; padding: 0; }
.dncg-choose__skip { margin: 1.2rem 0 0; }
.dncg-choose__skip-btn, .dncg-choose__open, .dncg-choose__job-go { cursor: pointer; font: inherit; font-size: var(--fs-min); font-weight: 700; color: var(--btn-accent-text); background: var(--btn-accent-bg); border: 0; border-radius: var(--radius-pill); padding: .75rem 1.5rem; }
.dncg-choose__skip-btn:hover, .dncg-choose__open:hover, .dncg-choose__job-go:hover { text-decoration: underline; }

/* ------------------------------------------------------------- results */

.dncg-choose__refine { display: flex; flex-direction: column; gap: .6rem; margin: .4rem 0 1rem; }
.dncg-choose__refine-group { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.dncg-choose__refine-label { font-size: var(--fs-min); font-weight: 700; color: var(--ink); margin-right: .3rem; min-width: 7.5rem; }
.dncg-choose__chip { cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: var(--fs-min); font-weight: 600; color: var(--text-heading); background: var(--white); border: 1px solid var(--control-border); border-radius: var(--radius-pill); padding: .25rem .85rem; }
.dncg-choose__chip[aria-pressed="true"] { color: var(--btn-primary-text); background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); }
.dncg-choose__chip-count { font-variant-numeric: tabular-nums; }
.dncg-choose__chip--also { align-self: flex-start; }
.dncg-choose__results[aria-busy="true"] { min-height: 4rem; }
.dncg-choose__featured { border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 0 1rem 1rem; margin: 0 0 1.2rem; background: var(--white); }

.dncg-choose .dncg-choose__cards { display: grid; gap: .7rem; list-style: none; margin: 0; padding: 0; }
.dncg-choose .dncg-choose__card { flex-direction: row; align-items: stretch; }
.dncg-choose .dncg-choose__card .card-section { padding: 1rem 1.2rem; gap: .4rem; min-width: 0; }
.dncg-choose .dncg-choose__card h3 { font-size: 1.25rem; line-height: 1.3; margin: 0; }
.dncg-choose .dncg-choose__card .level { flex: 0 0 auto; align-self: flex-start; margin: 1.05rem 0 0 1.1rem; font-size: var(--fs-min); font-weight: 700; white-space: nowrap; color: var(--text-heading); background: var(--light); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: .1rem .7rem; }
.dncg-choose .dncg-choose__card .level--3 { border-color: var(--accent); }
.dncg-choose .dncg-choose__card .level--4 { border-color: var(--level-4); }
.dncg-choose .course-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: var(--fs-min); color: var(--muted); }
.dncg-choose .course-meta__item { display: inline-flex; align-items: center; gap: .4rem; }
.dncg-choose .course-meta__item svg { flex: 0 0 auto; width: 1.05em; height: 1.05em; }
.dncg-choose .course__go { flex: 0 0 auto; display: flex; align-items: center; padding: 0 1.1rem; color: var(--accent); }
.dncg-choose .course__go svg { width: 1.4rem; height: 1.4rem; }
.dncg-choose__college { margin: 0; }
.dncg-choose__why { font-size: var(--fs-min); color: var(--ink); margin: 0; }
.dncg-choose__why-lead { font-weight: 700; }
.dncg-choose__badge { align-self: flex-start; margin: 0; font-size: var(--fs-min); font-weight: 700; color: var(--btn-accent-text); background: var(--btn-accent-bg); border-radius: var(--radius-pill); padding: .05rem .7rem; }
.dncg-choose__more { cursor: pointer; display: block; width: 100%; margin: .9rem 0 0; font: inherit; font-size: var(--fs-min); font-weight: 700; color: var(--text-heading); background: var(--white); border: 1px solid var(--control-border); border-radius: var(--radius-pill); padding: .7rem 1.2rem; }
.dncg-choose__more:hover { border-color: var(--accent); }
.dncg-choose__empty { font-size: var(--fs-min); color: var(--ink); margin: .4rem 0 .9rem; }
.dncg-choose__none { margin: .4rem 0 0; }
.dncg-choose__signpost { border: 1px solid var(--line); border-left: var(--card-edge) solid var(--accent); border-radius: var(--radius-sm); background: var(--white); padding: 1rem 1.3rem; margin: 0 0 1rem; }
.dncg-choose__cta { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin: 1.1rem 0 0; font-size: var(--fs-min); }
.dncg-choose__cta a { font-weight: 700; color: var(--link); }
.dncg-choose__cta a::after { content: "\00a0\2192"; }
.dncg-choose__cta--big { font-size: 1.2rem; }
.dncg-choose__handoff { margin: 1.2rem 0 0; font-size: var(--fs-min); }
.dncg-choose__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.dncg-choose__links li { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; }
.dncg-choose__links-meta { font-size: var(--fs-min); color: var(--muted); }

/* ------------------------------------------------------- typed search */

.dncg-choose__job { margin: 1.4rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line); }
.dncg-choose__job-label { display: block; font-size: var(--fs-min); font-weight: 700; color: var(--ink); margin: 0 0 .5rem; }
.dncg-choose__job-row { display: flex; gap: .6rem; }
.dncg-choose__job-input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--fs-min); color: var(--ink); background: var(--white); border: 1px solid var(--control-border); border-radius: var(--radius-pill); padding: .65rem 1.1rem; }

/* ------------------------------------------------------------ loading */

.dncg-choose__loading { display: flex; align-items: center; gap: .75rem; font-size: var(--fs-min); color: var(--muted); }
.dncg-choose__loading::before { content: ""; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: dncg-choose-spin .8s linear infinite; }
@keyframes dncg-choose-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- dialog */

.dncg-choose__dialog { width: min(54rem, 94vw); max-width: 94vw; max-height: 92vh; padding: 0; border: 0; border-radius: var(--radius-md); background: var(--white); color: var(--ink); box-shadow: var(--shadow-lg); }
.dncg-choose__dialog::backdrop { background: var(--navy); opacity: .6; }
.dncg-choose--dialog { padding: 0 1.6rem 1.6rem; }
.dncg-choose__bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; padding: 1rem 0; background: var(--white); border-bottom: 1px solid var(--line); }
.dncg-choose--dialog .dncg-choose__title { font-size: 1.35rem; margin: 0; }
.dncg-choose__close { cursor: pointer; flex: 0 0 auto; font: inherit; font-size: var(--fs-min); font-weight: 700; color: var(--text-heading); background: var(--white); border: 1px solid var(--control-border); border-radius: var(--radius-pill); padding: .4rem 1rem; }
.dncg-choose--dialog .dncg-choose__skip { position: sticky; bottom: 0; margin: 1.2rem -1.6rem -1.6rem; padding: .9rem 1.6rem; background: var(--white); border-top: 1px solid var(--line); }
html.dncg-choose-open { overflow: hidden; }

/* ------------------------------------------------------------ buttons */

.dncg-choose-card { border: 1px solid var(--line); border-left: var(--card-edge) solid var(--accent); border-radius: var(--radius-sm); background: var(--white); padding: 1.1rem 1.2rem; margin: 1rem 0 0; }
.dncg-choose-card__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.25rem; color: var(--text-heading); margin: 0 0 .3rem; }
.dncg-choose-card__text { font-size: var(--fs-min); color: var(--ink); margin: 0 0 .8rem; }
.dncg-choose-hero { margin-top: 1rem; }
.dncg-choose-hero__cta { cursor: pointer; background: none; font: inherit; font-weight: 600; }
.dncg-choose-band { padding: 1.6rem 0 .4rem; }
.dncg-choose-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; background: var(--light); border: 1px solid var(--line); border-left: var(--card-edge) solid var(--accent); border-radius: var(--radius-md); padding: 1.4rem 1.8rem; }
.dncg-choose-band__text { flex: 1 1 26rem; }
.dncg-choose-band__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.6rem; line-height: 1.2; color: var(--text-heading); margin: 0 0 .3rem; }
.dncg-choose-band__intro { font-size: var(--fs-min); color: var(--ink); margin: 0; }
.dncg-choose-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1.2rem 0 0; font-size: var(--fs-min); }
.dncg-choose-inline--center { justify-content: center; }
.dncg-choose-inline__lead { font-weight: 700; }

/* -------------------------------------------------------------- phone */

@media (max-width: 40em) {
    .dncg-choose--panel { padding: 1.2rem 1rem; }
    .dncg-choose__title { font-size: 1.6rem; }
    .dncg-choose__step { font-size: 1.4rem; }
    .dncg-choose__options, .dncg-choose__options--subjects { grid-template-columns: 1fr; }
    .dncg-choose__progress { margin-left: 0; flex-basis: 100%; }
    .dncg-choose .course__go { display: none; }
    .dncg-choose .dncg-choose__card { flex-direction: column; }
    .dncg-choose .dncg-choose__card .level { margin: .9rem 0 0 1.2rem; }
    .dncg-choose__refine-label { min-width: 0; flex-basis: 100%; }
    .dncg-choose__job-row { flex-direction: column; }
    .dncg-choose__dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
    .dncg-choose--dialog { padding: 0 1rem 1rem; }
    .dncg-choose--dialog .dncg-choose__skip { margin: 1rem -1rem -1rem; padding: .8rem 1rem; }
    .dncg-choose__skip-btn { width: 100%; }
    .dncg-choose-band__inner { padding: 1.1rem 1rem; }
    .dncg-choose-band__open { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .dncg-choose__loading::before { animation: none; }
    .dncg-choose__option { transition: none; }
}