/* NCSIM components. Uses only role tokens from tokens-proposed.css.
   Status: proposal for PruTech review; not SUNY-approved.
   Prefix nc- keeps these separate from the review site's own styles.
   Logical properties (inline/block) let every component flip for right-to-left languages. */

.nc, .nc *, .nc *::before, .nc *::after { box-sizing: border-box; }
.nc { font-family: var(--ds-font-body); font-size: var(--ds-text-body); line-height: var(--ds-leading-body); color: var(--ds-color-text); }
.nc :focus-visible { outline: var(--ds-focus-width) solid var(--ds-color-focus); outline-offset: var(--ds-focus-offset); }
.nc .nc-on-dark :focus-visible, .nc-on-dark :focus-visible { outline-color: var(--ds-color-focus-on-dark); }
.nc-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; float: none !important; }
/* Phosphor icons are filled shapes; they take the text color. */
.nc-icon { width: 1.125rem; height: 1.125rem; flex: none; fill: currentColor; }
[dir="rtl"] .nc-icon--directional { transform: scaleX(-1); }

/* ---------- Skip link ---------- */
.nc-skip { position: absolute; z-index: var(--ds-z-skip); inset-inline-start: var(--ds-space-4); inset-block-start: -10rem; padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-color-surface); color: var(--ds-color-link); font-weight: var(--ds-weight-semibold); border: var(--ds-border-width-strong) solid var(--ds-color-action); border-radius: var(--ds-radius-sm); }
.nc-skip:focus, .nc-skip.is-demo-visible { inset-block-start: var(--ds-space-2); }
.nc-skip.is-demo-visible { position: static; display: inline-block; }

/* ---------- Links ---------- */
.nc a, .nc-link { color: var(--ds-color-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--ds-duration-hover) var(--ds-easing), background-color var(--ds-duration-hover) var(--ds-easing), border-color var(--ds-duration-hover) var(--ds-easing), text-decoration-color var(--ds-duration-hover) var(--ds-easing), text-decoration-thickness var(--ds-duration-hover) var(--ds-easing); }
.nc a:hover, .nc-link:hover { text-decoration-thickness: 2px; color: var(--ds-color-action-strong); }
.nc a:visited.nc-link--visitable { color: var(--ds-color-link-visited); }
.nc-link--standalone { display: inline-flex; align-items: center; gap: var(--ds-space-1); font-weight: var(--ds-weight-semibold); min-height: var(--ds-target-compact); }
.nc-link--external .nc-icon { width: 1rem; height: 1rem; }
.nc-on-dark a, .nc-on-dark .nc-link { color: var(--ds-color-link-on-frame); }

/* ---------- Buttons ---------- */
.nc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); min-height: var(--ds-control-height); padding: var(--ds-space-2) var(--ds-space-6); font: inherit; font-size: var(--ds-text-control); line-height: var(--ds-leading-label); font-weight: var(--ds-weight-semibold); text-align: center; text-decoration: none; border-radius: var(--ds-radius-md); border: var(--ds-border-width-strong) solid transparent; cursor: pointer; transition: color var(--ds-duration-hover) var(--ds-easing), background-color var(--ds-duration-hover) var(--ds-easing), border-color var(--ds-duration-hover) var(--ds-easing); }
.nc a.nc-btn { text-decoration: none; }
.nc-btn--primary { background: var(--ds-color-action); color: var(--ds-color-on-action); border-color: var(--ds-color-action); }
.nc a.nc-btn--primary, .nc a.nc-btn--primary:hover { color: var(--ds-color-on-action); }
.nc-btn--primary:hover, .nc-btn--primary.is-hover { background: var(--ds-color-action-strong); border-color: var(--ds-color-action-strong); }
.nc-btn--primary:active, .nc-btn--primary.is-active { background: var(--ds-suny-dark-blue); border-color: var(--ds-suny-dark-blue); }
.nc-btn--secondary { background: var(--ds-color-surface); color: var(--ds-color-action); border-color: var(--ds-color-action); }
.nc-btn--secondary:hover, .nc-btn--secondary.is-hover { background: var(--ds-color-action-subtle); color: var(--ds-color-action-strong); }
.nc-btn--secondary:active, .nc-btn--secondary.is-active { background: var(--ds-color-action-subtle-strong); }
.nc-btn--tertiary { background: transparent; color: var(--ds-color-action); padding-inline: var(--ds-space-2); text-decoration: underline; text-underline-offset: 0.2em; }
.nc-btn--tertiary:hover, .nc-btn--tertiary.is-hover { background: var(--ds-color-action-subtle); }
.nc-btn--on-dark { background: transparent; color: var(--ds-color-on-frame); border-color: var(--ds-color-on-frame); }
.nc-btn--on-dark:hover { background: rgb(255 255 255 / 0.12); }
.nc-btn--block { display: flex; width: 100%; }
.nc-btn--icon { min-width: var(--ds-target-min); padding-inline: var(--ds-space-2); }
.nc-btn--sm { min-height: var(--ds-control-height-sm); padding: var(--ds-space-2) var(--ds-space-4); font-size: var(--ds-text-label); }
.nc-btn--compact { min-height: var(--ds-target-compact); padding: var(--ds-space-1) var(--ds-space-3); font-size: var(--ds-text-label); }
.nc-btn.is-focus { outline: var(--ds-focus-width) solid var(--ds-color-focus); outline-offset: var(--ds-focus-offset); }
.nc-btn[aria-disabled="true"], .nc-btn:disabled { background: var(--ds-color-surface-disabled); color: var(--ds-color-text-disabled); border-color: var(--ds-color-border); cursor: not-allowed; }
.nc-btn[aria-busy="true"] { cursor: progress; }
.nc-btn[aria-busy="true"] .nc-spinner { display: inline-block; }
.nc-spinner { display: none; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: nc-spin 800ms linear infinite; }
@keyframes nc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nc-spinner { animation: none; border-inline-end-color: currentColor; opacity: 0.6; } }
.nc-btn-group { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); align-items: center; }

/* ---------- Form fields ---------- */
/* Visual order: label, error, control, hint. Hints sit under the control; aria-describedby keeps them announced. */
.nc-field { display: grid; gap: var(--ds-space-2); max-width: 32rem; }
.nc-field > .nc-error-text, .nc-search > .nc-error-text { order: 1; }
.nc-field > :is(.nc-input, .nc-select, .nc-textarea, .nc-readonly), .nc-search > .nc-search-row { order: 2; }
.nc-field > .nc-hint, .nc-search > .nc-hint, .nc-field > .nc-count { order: 3; }
.nc-label { font-size: var(--ds-text-label); line-height: var(--ds-leading-label); font-weight: var(--ds-weight-semibold); }
.nc-label .nc-optional { font-weight: var(--ds-weight-regular); color: var(--ds-color-text-muted); }
.nc-hint { margin: 0; font-size: var(--ds-text-small); line-height: var(--ds-leading-small); color: var(--ds-color-text-muted); }
.nc-error-text { display: flex; gap: var(--ds-space-1); align-items: flex-start; margin: 0; font-size: var(--ds-text-label); font-weight: var(--ds-weight-semibold); color: var(--ds-color-error-text); }
.nc-error-text .nc-icon { margin-block-start: 0.2rem; }
/* Fields: 2px edge at every state so nothing shifts; hover, focus and filled turn blue. */
.nc-input, .nc-select, .nc-textarea { width: 100%; min-height: var(--ds-control-height); padding: var(--ds-space-3) var(--ds-space-4); font: inherit; font-size: var(--ds-text-control); color: var(--ds-color-text); background: var(--ds-color-surface); border: var(--ds-border-width-strong) solid var(--ds-color-border-field); border-radius: var(--ds-radius-md); transition: border-color var(--ds-duration-hover) var(--ds-easing), background-color var(--ds-duration-hover) var(--ds-easing); }
.nc-input:hover, .nc-select:hover, .nc-textarea:hover { border-color: var(--ds-color-border-input-hover); }
.nc-input:focus-visible, .nc-select:focus-visible, .nc-textarea:focus-visible, .nc-input.is-focus { outline: var(--ds-focus-width) solid var(--ds-color-focus); outline-offset: var(--ds-focus-offset); border-color: var(--ds-color-action); background-color: var(--ds-color-surface); }
.nc-select[data-pointer-focus]:focus-visible { outline: none; }
.nc-input[data-filled]:not(:focus), .nc-select[data-filled]:not(:focus), .nc-textarea[data-filled]:not(:focus) { border-color: var(--ds-color-action); background-color: var(--ds-color-action-subtle); }
.nc-input[aria-invalid="true"], .nc-select[aria-invalid="true"], .nc-textarea[aria-invalid="true"] { border-color: var(--ds-color-invalid); background-color: var(--ds-color-surface); }
.nc-field.is-invalid, .nc-fieldset.is-invalid { padding: var(--ds-space-4); background: var(--ds-color-error-bg); border-radius: var(--ds-radius-md); }
.nc-input:disabled, .nc-select:disabled, .nc-textarea:disabled { background-color: var(--ds-color-surface-disabled); color: var(--ds-color-text-disabled); border-color: var(--ds-color-border-input); border-style: dashed; cursor: not-allowed; }
.nc-input[readonly] { background: var(--ds-color-surface-alt); border-color: var(--ds-color-border); }
.nc-input--short { max-width: 10rem; }
.nc-textarea { min-height: 8rem; resize: vertical; }
.nc-select { appearance: none; padding-inline-end: var(--ds-space-10); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%231b1f24' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 1rem; background-position: right var(--ds-space-3) center; }
[dir="rtl"] .nc-select { background-position: left var(--ds-space-3) center; }
.nc-count { justify-self: end; font-size: var(--ds-text-small); color: var(--ds-color-text-muted); }

/* Checkbox and radio: native controls, enlarged, so every browser and screen reader behaves as expected */
.nc-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--ds-space-2); }
.nc-fieldset > legend { float: inline-start; width: 100%; padding: 0; margin-block-end: var(--ds-space-2); font-weight: var(--ds-weight-semibold); font-size: var(--ds-text-label); }
.nc-fieldset > legend + * { clear: both; }
/* Choice card: each checkbox or radio is a bordered card as tall as a field; the whole card is the target. */
.nc-check { display: flex; gap: var(--ds-space-3); align-items: center; min-height: var(--ds-control-height); padding: var(--ds-space-2) var(--ds-space-4); background: var(--ds-color-surface); border: var(--ds-border-width-strong) solid var(--ds-color-border-choice); border-radius: var(--ds-radius-md); font-size: var(--ds-text-control); line-height: 1.4; cursor: pointer; transition: border-color var(--ds-duration-hover) var(--ds-easing), background-color var(--ds-duration-hover) var(--ds-easing); }
.nc-check:hover { border-color: var(--ds-color-border-choice-hover); background: var(--ds-color-surface-alt); }
.nc-check:has(input:checked) { border-color: var(--ds-color-action); background: var(--ds-color-action-subtle); }
.nc-check:has(input:focus-visible) { outline: var(--ds-focus-width) solid var(--ds-color-focus); outline-offset: var(--ds-focus-offset); }
.nc-check input:focus-visible { outline: none; }
.nc-check:has(input:disabled) { background: var(--ds-color-surface-disabled); border-color: var(--ds-color-border-input); border-style: dashed; cursor: not-allowed; }
.nc-check input { width: 1.5rem; height: 1.5rem; margin: 0; flex: none; accent-color: var(--ds-color-action); cursor: pointer; }
.nc-check input:disabled + span { color: var(--ds-color-text-disabled); }
.nc-check > span { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--ds-space-3); align-items: baseline; }
.nc-check .nc-check-count { margin-inline-start: auto; color: var(--ds-color-text-muted); font-size: var(--ds-text-label); }
.nc-check-desc { grid-column: 1 / -1; font-size: var(--ds-text-small); color: var(--ds-color-text-muted); }
/* Compact choice cards inside the filter panel */
.nc-filter-body .nc-check { min-height: var(--ds-control-height-sm); font-size: var(--ds-text-label); padding-block: var(--ds-space-1); }
.nc-filter-body .nc-check input { width: 1.25rem; height: 1.25rem; }

/* ---------- Search field ---------- */
.nc-form-panel { display: grid; gap: var(--ds-space-3); padding: var(--ds-space-6); background: var(--ds-color-surface); border: var(--ds-border-width-strong) solid var(--ds-color-border); border-radius: var(--ds-radius-md); }
.nc-form-panel-title { margin: 0; font-size: var(--ds-text-h3); line-height: var(--ds-leading-h3); }
.nc-search { display: grid; gap: var(--ds-space-1); max-width: 40rem; }
.nc-search-row { display: flex; gap: var(--ds-space-2); }
.nc-search-box { position: relative; flex: 1; min-width: 0; }
.nc-search-box .nc-input { padding-inline-start: var(--ds-space-10); padding-inline-end: var(--ds-space-10); }
.nc-search-box > .nc-icon { position: absolute; inset-inline-start: var(--ds-space-3); inset-block-start: 50%; transform: translateY(-50%); color: var(--ds-color-text-muted); pointer-events: none; }
.nc-search-clear { position: absolute; inset-inline-end: var(--ds-space-1); inset-block-start: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: var(--ds-target-compact); height: var(--ds-target-compact); border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-color-text-muted); cursor: pointer; transition: color var(--ds-duration-hover) var(--ds-easing), background-color var(--ds-duration-hover) var(--ds-easing); }
.nc-search-clear:hover { background: var(--ds-color-surface-alt); color: var(--ds-color-text); }
.nc-search-clear[hidden] { display: none; }

/* ---------- Header ---------- */
.nc-header { background: var(--ds-color-frame); color: var(--ds-color-on-frame); border-block-end: var(--ds-highlight-width) solid var(--ds-color-highlight); }
.nc-header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-6); padding: var(--ds-space-2) var(--ds-gutter); min-height: var(--ds-header-height); }
.nc-wordmark { display: inline-flex; flex-direction: column; color: var(--ds-color-on-frame); text-decoration: none; line-height: 1.15; margin-inline-end: auto; padding-block: var(--ds-space-1); }
.nc .nc-wordmark { color: var(--ds-color-on-frame); text-decoration: none; transition: opacity var(--ds-duration-hover) var(--ds-easing); }
.nc .nc-wordmark:hover { opacity: 0.85; }
.nc-header-nav { display: flex; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-5); }
.nc .nc-header-nav a, .nc .nc-header-util a { display: inline-flex; align-items: center; gap: var(--ds-space-1); min-height: var(--ds-target-min); color: var(--ds-color-on-frame); font-weight: var(--ds-weight-semibold); text-decoration-line: underline; text-decoration-color: transparent; }
.nc .nc-header-nav a:hover, .nc .nc-header-util a:hover { text-decoration-color: currentColor; color: var(--ds-color-on-frame); }
.nc .nc-header-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--ds-color-highlight); text-underline-offset: 0.4em; }
.nc-header-util { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-4); }
.nc-header-btn { display: inline-flex; align-items: center; gap: var(--ds-space-1); min-height: var(--ds-target-min); padding: 0 var(--ds-space-2); background: transparent; color: var(--ds-color-on-frame); border: 0; font: inherit; font-weight: var(--ds-weight-semibold); cursor: pointer; border-radius: var(--ds-radius-sm); transition: background-color var(--ds-duration-hover) var(--ds-easing); }
.nc-header-btn:hover { background: rgb(255 255 255 / 0.12); }
.nc-badge-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 var(--ds-space-1); border-radius: var(--ds-radius-pill); background: var(--ds-color-highlight); color: var(--ds-color-text); font-size: var(--ds-text-small); font-weight: var(--ds-weight-bold); }
.nc-menu-toggle { display: none; }
.nc-header-panel { width: 100%; display: none; padding-block: var(--ds-space-2) var(--ds-space-4); border-block-start: 1px solid rgb(255 255 255 / 0.25); }
.nc-header-panel.is-open { display: grid; gap: var(--ds-space-1); }
.nc-header--compact .nc-header-nav, .nc-header--compact .nc-header-util { display: none; }
.nc-header--compact .nc-menu-toggle { display: inline-flex; }
@media (max-width: 767px) {
  .nc-header:not(.nc-header--wide) .nc-header-nav, .nc-header:not(.nc-header--wide) .nc-header-util { display: none; }
  .nc-header:not(.nc-header--wide) .nc-menu-toggle { display: inline-flex; }
}
.nc .nc-header-panel a { display: flex; min-height: var(--ds-target-min); align-items: center; color: var(--ds-color-on-frame); font-weight: var(--ds-weight-semibold); }
.nc .nc-header-panel a:hover { text-decoration-color: var(--ds-color-highlight); }

/* ---------- Language menu ---------- */
.nc-lang { position: relative; }
.nc-lang-list { position: absolute; z-index: var(--ds-z-sticky); inset-inline-end: 0; inset-block-start: calc(100% + var(--ds-space-1)); width: max-content; min-width: 14rem; max-height: 22rem; overflow: auto; margin: 0; padding: var(--ds-space-2); list-style: none; background: var(--ds-color-surface); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-overlay); }
.nc-lang-list[hidden] { display: none; }
.nc .nc-lang-list a { display: flex; justify-content: space-between; gap: var(--ds-space-4); min-height: var(--ds-target-min); align-items: center; padding: 0 var(--ds-space-3); color: var(--ds-color-text); text-decoration: none; border-radius: var(--ds-radius-sm); }
.nc .nc-lang-list a:hover { background: var(--ds-color-action-subtle); }
.nc .nc-lang-list a[aria-current="true"] { font-weight: var(--ds-weight-bold); background: var(--ds-color-action-subtle); }
.nc-lang-list .nc-lang-en { color: var(--ds-color-text-muted); font-size: var(--ds-text-small); }

/* ---------- Breadcrumb and back link ---------- */
.nc-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--ds-text-label); }
.nc-breadcrumb li { display: inline-flex; align-items: center; gap: var(--ds-space-2); }
.nc-breadcrumb li + li::before { content: ""; width: 0.45rem; height: 0.45rem; border-block-start: 2px solid var(--ds-color-text-muted); border-inline-end: 2px solid var(--ds-color-text-muted); transform: rotate(45deg); }
[dir="rtl"] .nc-breadcrumb li + li::before { transform: rotate(-45deg); }
.nc-breadcrumb [aria-current="page"] { color: var(--ds-color-text-muted); }
.nc-back { display: inline-flex; align-items: center; gap: var(--ds-space-1); min-height: var(--ds-target-min); font-weight: var(--ds-weight-semibold); }

/* ---------- Footer ---------- */
.nc-footer { background: var(--ds-color-frame); color: var(--ds-color-on-frame); padding: var(--ds-space-8) var(--ds-gutter) var(--ds-space-6); border-block-start: var(--ds-highlight-width) solid var(--ds-color-highlight); }
.nc-footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: var(--ds-space-6); }
.nc-footer h2 { margin: 0 0 var(--ds-space-2); font-size: var(--ds-text-h4); color: var(--ds-color-on-frame); }
.nc-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ds-space-1); }
.nc .nc-footer a { display: inline-flex; min-height: var(--ds-target-compact); align-items: center; color: var(--ds-color-on-frame); }
.nc .nc-footer a:hover { text-decoration-color: var(--ds-color-highlight); }
.nc-footer-legal { margin-block-start: var(--ds-space-6); padding-block-start: var(--ds-space-4); border-block-start: 1px solid rgb(255 255 255 / 0.25); font-size: var(--ds-text-small); color: var(--ds-color-on-frame); }

/* ---------- Pagination and result bar ---------- */
.nc-results-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--ds-space-3) var(--ds-space-6); padding-block-end: var(--ds-space-3); border-block-end: 1px solid var(--ds-color-border); }
.nc-results-count { margin: 0; font-weight: var(--ds-weight-semibold); }
.nc-results-count span { font-weight: var(--ds-weight-regular); color: var(--ds-color-text-muted); }
.nc-sort { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); min-width: 0; max-width: 100%; }
.nc-sort .nc-select { width: auto; max-width: 100%; }
.nc-pagination ul { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); margin: 0; padding: 0; list-style: none; align-items: center; }
.nc .nc-pagination a, .nc-pagination [aria-current="page"] { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-1); min-width: var(--ds-target-min); min-height: var(--ds-target-min); padding: 0 var(--ds-space-2); border-radius: var(--ds-radius-sm); font-weight: var(--ds-weight-semibold); }
.nc .nc-pagination a { text-decoration: none; }
.nc .nc-pagination a:hover { background: var(--ds-color-action-subtle); }
.nc-pagination [aria-current="page"] { background: var(--ds-color-action); color: var(--ds-color-on-action); }
.nc-pagination .nc-ellipsis { padding: 0 var(--ds-space-1); color: var(--ds-color-text-muted); }
.nc-pagination-pos { margin: var(--ds-space-2) 0 0; font-size: var(--ds-text-small); color: var(--ds-color-text-muted); }
@media (max-width: 479px) { .nc-pagination .nc-page-num:not([aria-current]) { display: none; } }

/* ---------- Status ---------- */
.nc-status { display: inline-flex; align-items: center; gap: var(--ds-space-1); padding: 0 var(--ds-space-3) 0 var(--ds-space-2); border-radius: var(--ds-radius-pill); font-size: var(--ds-text-label); line-height: 1.75rem; font-weight: var(--ds-weight-semibold); max-width: 100%; }
.nc-status .nc-icon { width: 1rem; height: 1rem; }
.nc-status--open { color: var(--ds-status-open-text); background: var(--ds-status-open-bg); }
.nc-status--waitlist { color: var(--ds-status-waitlist-text); background: var(--ds-status-waitlist-bg); }
.nc-status--full { color: var(--ds-status-full-text); background: var(--ds-status-full-bg); }
.nc-status--closed { color: var(--ds-status-closed-text); background: var(--ds-status-closed-bg); }
.nc-status--soon { color: var(--ds-status-soon-text); background: var(--ds-status-soon-bg); }
.nc-status--unknown { color: var(--ds-color-text); background: var(--ds-color-surface); box-shadow: inset 0 0 0 1px var(--ds-color-border-control); }
.nc-status-detail { font-size: var(--ds-text-small); color: var(--ds-color-text-muted); }

/* ---------- Tags ---------- */
.nc-tags { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin: 0; padding: 0; list-style: none; }
.nc-tag { display: inline-flex; align-items: center; gap: var(--ds-space-1); padding: 0 var(--ds-space-2); border-radius: var(--ds-radius-sm); font-size: var(--ds-text-small); line-height: 1.625rem; font-weight: var(--ds-weight-semibold); background: var(--ds-color-action-subtle); color: var(--ds-color-text); }
.nc-tag--outline { background: var(--ds-color-surface); box-shadow: inset 0 0 0 1px var(--ds-color-border-control); }
.nc-tag .nc-icon { width: 0.9rem; height: 0.9rem; }

/* ---------- Chips (applied filters) ---------- */
.nc-chips { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); align-items: center; margin: 0; padding: 0; list-style: none; }
.nc-chip { display: inline-flex; align-items: center; gap: var(--ds-space-1); min-height: var(--ds-target-compact); padding: 0 var(--ds-space-2) 0 var(--ds-space-3); background: var(--ds-color-action-subtle); color: var(--ds-color-text); border: var(--ds-border-width) solid var(--ds-color-action); border-radius: var(--ds-radius-pill); font: inherit; font-size: var(--ds-text-label); cursor: pointer; transition: background-color var(--ds-duration-hover) var(--ds-easing), border-color var(--ds-duration-hover) var(--ds-easing); }
.nc-chip:hover { background: var(--ds-color-action-subtle-strong); }
.nc-chip .nc-icon { width: 1rem; height: 1rem; }

/* ---------- Filters ---------- */
.nc-filters { display: grid; gap: var(--ds-space-1); }
.nc-filter-group { border-block-end: 1px solid var(--ds-color-border); }
.nc-filter-group > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-target-min); font-weight: var(--ds-weight-semibold); cursor: pointer; list-style: none; }
.nc-filter-group > summary::-webkit-details-marker { display: none; }
.nc-filter-group > summary::after { content: ""; width: 0.55rem; height: 0.55rem; border-block-end: 2px solid currentColor; border-inline-end: 2px solid currentColor; transform: rotate(45deg); margin-inline-end: var(--ds-space-2); transition: transform var(--ds-duration) var(--ds-easing); }
.nc-filter-group[open] > summary::after { transform: rotate(-135deg); }
.nc-filter-group .nc-selected-count { margin-inline-start: auto; font-weight: var(--ds-weight-regular); font-size: var(--ds-text-small); color: var(--ds-color-text-muted); }
.nc-filter-body { padding-block: var(--ds-space-1) var(--ds-space-4); display: grid; gap: var(--ds-space-2); }

/* ---------- Drawer and dialog (native dialog element) ---------- */
.nc-dialog { width: min(36rem, calc(100vw - 2 * var(--ds-space-4))); max-height: calc(100dvh - 2 * var(--ds-space-4)); padding: 0; border: 0; border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-overlay); color: var(--ds-color-text); font-family: var(--ds-font-body); }
.nc-dialog::backdrop { background: var(--ds-color-overlay); }
.nc-dialog-inner { display: grid; gap: var(--ds-space-4); padding: var(--ds-space-6); }
.nc-dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ds-space-4); }
.nc-dialog h2 { margin: 0; font-size: var(--ds-text-h3); line-height: var(--ds-leading-h3); }
.nc-dialog p { margin: 0; }
.nc-close { display: inline-flex; align-items: center; justify-content: center; width: var(--ds-target-min); height: var(--ds-target-min); flex: none; margin: calc(-1 * var(--ds-space-2)); border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-color-text); cursor: pointer; transition: background-color var(--ds-duration-hover) var(--ds-easing); }
.nc-close:hover { background: var(--ds-color-surface-alt); }
.nc-drawer { margin: 0; margin-inline-start: auto; width: var(--ds-drawer-width); max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
.nc-drawer .nc-dialog-inner { grid-template-rows: auto 1fr auto; height: 100%; padding: 0; gap: 0; }
.nc-drawer .nc-dialog-head { padding: var(--ds-space-4) var(--ds-space-5); border-block-end: 1px solid var(--ds-color-border); align-items: center; }
.nc-drawer-body { overflow: auto; padding: var(--ds-space-2) var(--ds-space-5); }
.nc-drawer-foot { display: flex; gap: var(--ds-space-3); padding: var(--ds-space-4) var(--ds-space-5); border-block-start: 1px solid var(--ds-color-border); background: var(--ds-color-surface); }
.nc-drawer-foot .nc-btn { flex: 1; }
.nc-dialog[open] { animation: nc-fade var(--ds-duration-slow) var(--ds-easing); }
@keyframes nc-fade { from { opacity: 0; transform: translateY(0.5rem); } }

/* ---------- Course card ---------- */
.nc-card { position: relative; display: grid; gap: var(--ds-space-3); padding: var(--ds-space-4) var(--ds-space-5) var(--ds-space-5); background: var(--ds-color-surface); border: var(--ds-border-width-strong) solid var(--ds-color-border); border-radius: var(--ds-radius-md); min-width: 0; transition: border-color var(--ds-duration-hover) var(--ds-easing), box-shadow var(--ds-duration-hover) var(--ds-easing); }
.nc-card:hover { border-color: var(--ds-color-action); box-shadow: var(--ds-shadow-raised); }
.nc-card:focus-within { border-color: var(--ds-color-action); }
.nc-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ds-space-3); }
.nc-card-campus { display: flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-text-small); font-weight: var(--ds-weight-semibold); color: var(--ds-color-text-muted); }
.nc-card-campus::before { content: ""; width: 0.75rem; height: 0.75rem; flex: none; border-radius: 2px; background: var(--ds-color-campus-accent); }
.nc-card-title { margin: 0; font-family: var(--ds-font-heading); font-size: var(--ds-text-h3); line-height: var(--ds-leading-h3); font-weight: var(--ds-weight-bold); overflow-wrap: break-word; hyphens: manual; }
.nc .nc-card-title a { color: var(--ds-color-text); text-decoration-color: var(--ds-color-action); text-decoration-thickness: 2px; }
.nc .nc-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--ds-radius-md); }
.nc .nc-card-title a:focus-visible { outline: none; }
.nc .nc-card-title a:focus-visible::after { outline: var(--ds-focus-width) solid var(--ds-color-focus); outline-offset: var(--ds-focus-offset); }
.nc-card .nc-save, .nc-card .nc-card-extra { position: relative; z-index: 1; }
.nc-card-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr)); gap: var(--ds-space-2) var(--ds-space-4); }
.nc-card-facts div { display: grid; align-content: start; min-width: 0; }
.nc-card-facts dt { font-size: var(--ds-text-small); color: var(--ds-color-text-muted); }
.nc-card-facts dd { margin: 0; font-weight: var(--ds-weight-semibold); overflow-wrap: anywhere; }
.nc-card-facts dd.nc-missing { font-weight: var(--ds-weight-regular); font-style: italic; color: var(--ds-color-text-muted); }
.nc-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-3); padding-block-start: var(--ds-space-1); }
.nc-card--preferred { border-inline-start: var(--ds-highlight-width) solid var(--ds-color-highlight); }
.nc-card-note { margin: 0; font-size: var(--ds-text-small); color: var(--ds-color-text-muted); }
.nc-card-list { display: grid; gap: var(--ds-space-4); margin: 0; padding: 0; list-style: none; }

/* ---------- Save toggle ---------- */
.nc-save { display: inline-flex; align-items: center; gap: var(--ds-space-1); min-height: var(--ds-target-compact); padding: 0 var(--ds-space-2); border: var(--ds-border-width) solid transparent; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-color-action); font: inherit; font-size: var(--ds-text-label); font-weight: var(--ds-weight-semibold); cursor: pointer; transition: background-color var(--ds-duration-hover) var(--ds-easing), border-color var(--ds-duration-hover) var(--ds-easing); }
.nc-save:hover { background: var(--ds-color-action-subtle); }
.nc-save .nc-icon { width: 1.25rem; height: 1.25rem; }

/* ---------- Campus identity ---------- */
.nc-campus { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-color-surface); border: 1px solid var(--ds-color-border); border-inline-start: var(--ds-space-2) solid var(--ds-color-campus-accent); border-radius: var(--ds-radius-sm); }
.nc-campus-logo { display: grid; place-items: center; width: 3rem; height: 3rem; flex: none; border-radius: var(--ds-radius-sm); background: var(--ds-color-surface-alt); color: var(--ds-color-text-muted); font-size: var(--ds-text-small); font-weight: var(--ds-weight-bold); }
.nc-campus-name { margin: 0; font-weight: var(--ds-weight-bold); }
.nc-campus-sub { margin: 0; font-size: var(--ds-text-small); color: var(--ds-color-text-muted); }

/* ---------- Course page heading and key facts ---------- */
.nc-course-head { display: grid; gap: var(--ds-space-2); }
.nc-course-head h1, .nc-course-title { margin: 0; font-family: var(--ds-font-heading); font-size: var(--ds-text-h1); line-height: var(--ds-leading-h1); font-weight: var(--ds-weight-bold); overflow-wrap: break-word; hyphens: manual; }
/* Cells draw their own top and start borders and overlap the frame by 1px, so empty grid space stays white. */
.nc-facts { margin: 0; display: grid; grid-template-columns: 1fr; background: var(--ds-color-surface); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-md); overflow: hidden; }
.nc-facts > div { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--ds-space-3); align-content: start; padding: var(--ds-space-3) var(--ds-space-4); margin-block-start: -1px; margin-inline-start: -1px; border-block-start: 1px solid var(--ds-color-border); border-inline-start: 1px solid var(--ds-color-border); }
.nc-facts .nc-icon { grid-row: span 2; margin-block-start: 0.25rem; color: var(--ds-color-action); width: 1.25rem; height: 1.25rem; }
.nc-facts dt { font-size: var(--ds-text-small); color: var(--ds-color-text-muted); }
.nc-facts dd { margin: 0; font-weight: var(--ds-weight-semibold); overflow-wrap: anywhere; }
.nc-facts dd small { display: block; font-weight: var(--ds-weight-regular); font-size: var(--ds-text-small); color: var(--ds-color-text-muted); }
.nc-facts dd.nc-missing { font-weight: var(--ds-weight-regular); font-style: italic; color: var(--ds-color-text-muted); }

/* ---------- Section picker ---------- */
.nc-sections { margin: 0; padding: 0; border: 0; display: grid; gap: var(--ds-space-3); min-width: 0; }
.nc-sections > legend { padding: 0; margin-block-end: var(--ds-space-1); font-family: var(--ds-font-heading); font-size: var(--ds-text-h3); line-height: var(--ds-leading-h3); font-weight: var(--ds-weight-bold); }
.nc-sections-help { margin: 0; color: var(--ds-color-text-muted); }
.nc-option { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--ds-space-1) var(--ds-space-3); padding: var(--ds-space-4); background: var(--ds-color-surface); border: var(--ds-border-width-strong) solid var(--ds-color-border-choice); border-radius: var(--ds-radius-md); cursor: pointer; transition: border-color var(--ds-duration-hover) var(--ds-easing), background-color var(--ds-duration-hover) var(--ds-easing); }
.nc-option:hover { border-color: var(--ds-color-border-choice-hover); background: var(--ds-color-surface-alt); }
.nc-option input { grid-row: span 3; width: 1.5rem; height: 1.5rem; margin: 0.2rem 0 0; accent-color: var(--ds-color-action); cursor: pointer; }
.nc-option:has(input:checked) { border-color: var(--ds-color-action); background: var(--ds-color-action-subtle); }
.nc-option:has(input:focus-visible) { outline: var(--ds-focus-width) solid var(--ds-color-focus); outline-offset: var(--ds-focus-offset); }
.nc-option input:focus-visible { outline: none; }
.nc-option-title { font-weight: var(--ds-weight-bold); }
.nc-option-row { display: flex; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-3); align-items: center; }
.nc-option dl { grid-column: 2; margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--ds-space-1) var(--ds-space-3); font-size: var(--ds-text-label); }
.nc-option dt { color: var(--ds-color-text-muted); }
.nc-option dd { margin: 0; }
.nc-option--unavailable { background: var(--ds-color-surface-alt); border-style: dashed; cursor: default; }
.nc-option--unavailable:hover { border-color: var(--ds-color-border-input); }
.nc-option-note { grid-column: 2; margin: 0; font-size: var(--ds-text-label); }
.nc-deadline { display: inline-flex; align-items: flex-start; gap: var(--ds-space-1); color: var(--ds-color-warning-text); font-weight: var(--ds-weight-semibold); }
.nc-selection-summary { padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-color-surface-alt); border-radius: var(--ds-radius-sm); }
.nc-selection-summary p { margin: 0; }

/* ---------- Cost ---------- */
.nc-cost { display: grid; gap: var(--ds-space-3); max-width: 32rem; }
.nc-cost table { width: 100%; border-collapse: collapse; }
.nc-cost th, .nc-cost td { padding: var(--ds-space-2) 0; border-block-end: 1px solid var(--ds-color-border); text-align: start; font-weight: var(--ds-weight-regular); vertical-align: top; }
.nc-cost td { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; padding-inline-start: var(--ds-space-4); }
.nc-cost tfoot th, .nc-cost tfoot td { font-weight: var(--ds-weight-bold); border-block-end: 0; border-block-start: 2px solid var(--ds-color-text); }
.nc-cost .nc-discount td { color: var(--ds-color-success-text); }
.nc-cost-note { margin: 0; font-size: var(--ds-text-small); color: var(--ds-color-text-muted); }

/* ---------- Outcome, eligibility, funding, pathway: info blocks ---------- */
.nc-block { display: grid; gap: var(--ds-space-3); }
.nc-block h2, .nc-block h3 { margin: 0; font-family: var(--ds-font-heading); }
.nc-block h2 { font-size: var(--ds-text-h2); line-height: var(--ds-leading-h2); }
.nc-block h3 { font-size: var(--ds-text-h4); line-height: var(--ds-leading-h4); }
.nc-block p { margin: 0; }
.nc-outcomes { display: grid; gap: var(--ds-space-3); margin: 0; padding: 0; list-style: none; }
.nc-outcome { display: grid; grid-template-columns: auto 1fr; gap: var(--ds-space-1) var(--ds-space-3); padding: var(--ds-space-4); background: var(--ds-color-surface); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-md); }
.nc-outcome > .nc-icon { grid-row: span 3; width: 1.75rem; height: 1.75rem; color: var(--ds-color-action); }
.nc-outcome-name { font-weight: var(--ds-weight-bold); }
.nc-outcome-from, .nc-outcome-next { font-size: var(--ds-text-label); }
.nc-outcome-next { color: var(--ds-color-text-muted); }
.nc-asof { font-size: var(--ds-text-small); color: var(--ds-color-text-muted); }
.nc-table-wrap { overflow-x: auto; border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-md); }
.nc-table { width: 100%; border-collapse: collapse; font-size: var(--ds-text-label); }
.nc-table caption { text-align: start; padding: var(--ds-space-3) var(--ds-space-4) 0; font-weight: var(--ds-weight-semibold); }
.nc-table th, .nc-table td { padding: var(--ds-space-2) var(--ds-space-4); text-align: start; border-block-end: 1px solid var(--ds-color-border); vertical-align: top; }
.nc-table thead th { background: var(--ds-color-surface-alt); font-size: var(--ds-text-small); }
.nc-table tr:last-child > * { border-block-end: 0; }
@media (max-width: 599px) {
  .nc-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nc-table--stack tr { display: grid; padding: var(--ds-space-3) var(--ds-space-4); border-block-end: 1px solid var(--ds-color-border); }
  .nc-table--stack td, .nc-table--stack th { display: grid; grid-template-columns: 6rem 1fr; gap: var(--ds-space-2); padding: var(--ds-space-1) 0; border: 0; }
  .nc-table--stack [data-label]::before { content: attr(data-label); color: var(--ds-color-text-muted); font-size: var(--ds-text-small); font-weight: var(--ds-weight-regular); }
}

/* ---------- Term explainer ---------- */
.nc-term { display: inline; position: relative; }
.nc-term-btn { display: inline; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 0.25em; text-decoration-color: var(--ds-color-action); cursor: pointer; transition: color var(--ds-duration-hover) var(--ds-easing); }
.nc-term-btn:hover { color: var(--ds-color-action-strong); }
.nc-term-def { display: block; margin-block: var(--ds-space-2); padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-color-info-bg); border-inline-start: 4px solid var(--ds-color-action); border-radius: var(--ds-radius-sm); font-size: var(--ds-text-label); }
.nc-term-def[hidden] { display: none; }
.nc-term-def--popover { position: absolute; z-index: var(--ds-z-sticky); inset-block-start: calc(100% + var(--ds-space-2)); inset-inline-start: 0; width: min(22rem, calc(100vw - var(--ds-gutter) - var(--ds-gutter))); margin: 0; box-shadow: var(--ds-shadow-overlay); color: var(--ds-color-text); font-weight: var(--ds-weight-regular); line-height: var(--ds-leading-body); text-align: start; }

/* ---------- Disclosure ---------- */
.nc-disclosure { border-block: 1px solid var(--ds-color-border); }
.nc-disclosure + .nc-disclosure { border-block-start: 0; }
.nc-disclosure > summary { display: flex; align-items: center; gap: var(--ds-space-3); min-height: var(--ds-target-min); padding-block: var(--ds-space-2); font-weight: var(--ds-weight-semibold); cursor: pointer; list-style: none; color: var(--ds-color-text); }
.nc-disclosure > summary::-webkit-details-marker { display: none; }
.nc-disclosure > summary::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-block-end: 2px solid var(--ds-color-action); border-inline-end: 2px solid var(--ds-color-action); transform: rotate(-45deg); transition: transform var(--ds-duration) var(--ds-easing); }
[dir="rtl"] .nc-disclosure > summary::before { transform: rotate(135deg); }
.nc-disclosure[open] > summary::before { transform: rotate(45deg); }
.nc-disclosure-body { padding: 0 0 var(--ds-space-4) var(--ds-space-6); padding-inline-start: var(--ds-space-6); padding-inline-end: 0; }
.nc-readmore { display: grid; gap: var(--ds-space-2); max-width: var(--ds-measure); }
.nc-readmore-text { font-size: var(--ds-text-body-lg); line-height: var(--ds-leading-body-lg); }
.nc-readmore-text p { margin: 0 0 var(--ds-space-3); }
.nc-readmore-text.is-clamped { max-height: calc(var(--ds-leading-body-lg) * 5); overflow: hidden; mask-image: linear-gradient(to bottom, #000 60%, transparent); }

/* ---------- Alerts ---------- */
.nc-alert { display: grid; grid-template-columns: auto 1fr; gap: var(--ds-space-1) var(--ds-space-3); padding: var(--ds-space-4); border-radius: var(--ds-radius-sm); border-inline-start: 4px solid currentColor; }
.nc-alert > .nc-icon { grid-row: span 2; width: 1.25rem; height: 1.25rem; margin-block-start: 0.2rem; }
.nc-alert-title { margin: 0; font-weight: var(--ds-weight-bold); }
.nc-alert-body { margin: 0; color: var(--ds-color-text); }
.nc-alert-body p { margin: 0; }
.nc-alert-body p + p, .nc-alert-body .nc-btn-group { margin-block-start: var(--ds-space-2); }
.nc-alert--info { color: var(--ds-color-info-text); background: var(--ds-color-info-bg); }
.nc-alert--success { color: var(--ds-color-success-text); background: var(--ds-color-success-bg); }
.nc-alert--warning { color: var(--ds-color-warning-text); background: var(--ds-color-warning-bg); border-inline-start-color: var(--ds-color-warning-border); }
.nc-alert--error { color: var(--ds-color-error-text); background: var(--ds-color-error-bg); }
.nc-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-4); padding: var(--ds-space-3) var(--ds-gutter); background: var(--ds-color-info-bg); color: var(--ds-color-text); border-block-end: 1px solid var(--ds-blue-100); }
.nc-banner p { margin: 0; flex: 1 1 16rem; }
.nc-error-summary { padding: var(--ds-space-4); border: var(--ds-border-width-strong) solid var(--ds-color-invalid); border-radius: var(--ds-radius-sm); background: var(--ds-color-surface); }
.nc-error-summary:focus { outline: var(--ds-focus-width) solid var(--ds-color-focus); outline-offset: var(--ds-focus-offset); }
.nc-error-summary h2 { margin: 0 0 var(--ds-space-2); font-size: var(--ds-text-h4); color: var(--ds-color-error-text); }
.nc-error-summary ul { margin: 0; padding-inline-start: var(--ds-space-5); }
.nc .nc-error-summary a { color: var(--ds-color-error-text); font-weight: var(--ds-weight-semibold); }

/* ---------- Inline status message (announced) ---------- */
.nc-live { display: flex; align-items: center; gap: var(--ds-space-2); min-height: 1.5rem; font-weight: var(--ds-weight-semibold); color: var(--ds-color-success-text); }
.nc-live:empty { display: none; }

/* ---------- Empty, loading ---------- */
.nc-empty { display: grid; gap: var(--ds-space-3); justify-items: start; padding: var(--ds-space-6); background: var(--ds-color-surface); border: 1px dashed var(--ds-color-border-control); border-radius: var(--ds-radius-md); }
.nc-empty h2, .nc-empty h3 { margin: 0; font-size: var(--ds-text-h3); line-height: var(--ds-leading-h3); }
.nc-empty p, .nc-empty ul { margin: 0; }
.nc-empty ul { padding-inline-start: var(--ds-space-5); }
.nc-skeleton { display: grid; gap: var(--ds-space-3); padding: var(--ds-space-5); background: var(--ds-color-surface); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-md); }
.nc-skeleton span { display: block; height: 1rem; border-radius: var(--ds-radius-sm); background: var(--ds-color-skeleton); animation: nc-pulse 1.4s ease-in-out infinite; }
.nc-skeleton span:nth-child(2) { height: 1.5rem; width: 80%; }
.nc-skeleton span:nth-child(3) { width: 60%; }
.nc-skeleton span:nth-child(4) { width: 40%; }
@keyframes nc-pulse { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .nc-skeleton span { animation: none; } }

/* ---------- Location prompt ---------- */
.nc-location { display: grid; gap: var(--ds-space-3); padding: var(--ds-space-4); background: var(--ds-color-surface); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-md); max-width: 34rem; }
.nc-location p { margin: 0; }
.nc-location-or { display: flex; align-items: center; gap: var(--ds-space-3); color: var(--ds-color-text-muted); font-size: var(--ds-text-small); }
.nc-location-or::before, .nc-location-or::after { content: ""; flex: 1; border-block-start: 1px solid var(--ds-color-border); }
.nc-inline-form { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); align-items: end; }

/* ---------- Sticky action bar (phones) ---------- */
.nc-sticky { position: sticky; inset-block-end: 0; z-index: var(--ds-z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-gutter); background: var(--ds-color-surface); border-block-start: 1px solid var(--ds-color-border); box-shadow: 0 -2px 8px rgb(2 35 92 / 0.08); }
.nc-sticky-info { display: grid; min-width: 0; }
.nc-sticky-info strong { font-size: var(--ds-text-h4); }
.nc-sticky-info span { font-size: var(--ds-text-small); color: var(--ds-color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Help block ---------- */
.nc-help { display: grid; gap: var(--ds-space-3); padding: var(--ds-space-5); background: var(--ds-color-surface-alt); border-radius: var(--ds-radius-md); }
.nc-help h2, .nc-help h3 { margin: 0; font-size: var(--ds-text-h4); line-height: var(--ds-leading-h4); }
.nc-help p { margin: 0; }
.nc-help-contacts { display: grid; gap: var(--ds-space-1); margin: 0; }
.nc-help-contacts div { display: flex; flex-wrap: wrap; gap: 0 var(--ds-space-2); }
.nc-help-contacts dt { color: var(--ds-color-text-muted); }
.nc-help-contacts dd { margin: 0; }

/* ---------- Form layout ---------- */
.nc-form { display: grid; gap: var(--ds-space-5); max-width: 36rem; }
.nc-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: var(--ds-space-5); }
.nc-form-note { margin: 0; font-size: var(--ds-text-small); color: var(--ds-color-text-muted); }
.nc-confirmation { display: grid; gap: var(--ds-space-3); padding: var(--ds-space-6); border: 1px solid var(--ds-color-border); border-block-start: var(--ds-space-2) solid var(--ds-color-success-text); border-radius: var(--ds-radius-md); background: var(--ds-color-surface); }
.nc-confirmation h2, .nc-confirmation h3 { margin: 0; font-size: var(--ds-text-h3); }
.nc-confirmation p, .nc-confirmation dl { margin: 0; }
.nc-ref { font-family: var(--ds-font-mono); font-size: var(--ds-text-h4); letter-spacing: 0.05em; }
.nc-deadline .nc-icon { margin-block-start: 0.2rem; }

/* ---------- Home hero ---------- */
.nc-hero { position: relative; display: grid; background: var(--ds-color-surface-alt); overflow: hidden; }
.nc-hero-copy { display: grid; gap: var(--ds-space-4); align-content: center; padding: var(--ds-space-8) var(--ds-gutter); }
.nc-hero .nc-hero-title, .nc-carousel .nc-hero-title { margin: 0; font-family: var(--ds-font-heading); font-size: var(--ds-text-display); line-height: var(--ds-leading-display); font-weight: var(--ds-weight-bold); }
.nc-hero .nc-hero-lead { margin: 0; font-size: var(--ds-text-body-lg); line-height: var(--ds-leading-body-lg); max-width: 34rem; }
.nc-hero .nc-hint { margin: 0; }
.nc-hero-links { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin: 0; padding: 0; list-style: none; }
.nc .nc-hero-links a { display: inline-flex; align-items: center; min-height: var(--ds-target-compact); padding: 0 var(--ds-space-3); border-radius: var(--ds-radius-pill); background: var(--ds-color-surface); border: 1px solid var(--ds-color-border-control); color: var(--ds-color-text); text-decoration: none; font-weight: var(--ds-weight-semibold); }
.nc .nc-hero-links a:hover { border-color: var(--ds-color-action); color: var(--ds-color-action); }
.nc-hero-media { margin: 0; min-height: 12rem; background: var(--ds-blue-100) center / cover no-repeat; }
.nc-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .nc-hero--split { grid-template-columns: 1.1fr 1fr; }
  .nc-hero--split .nc-hero-media { min-height: 24rem; order: 2; }
}
.nc-hero--split .nc-hero-media { border-block-end: var(--ds-highlight-width) solid var(--ds-color-highlight); }
@media (min-width: 768px) { .nc-hero--split .nc-hero-media { border-block-end: 0; border-inline-start: var(--ds-highlight-width) solid var(--ds-color-highlight); } }

/* Text on an image: the text always sits on a solid panel, so contrast never depends on the photo */
.nc-hero--overlay { min-height: 26rem; align-items: end; }
.nc-hero--overlay .nc-hero-media { position: absolute; inset: 0; min-height: 0; }
.nc-hero--overlay .nc-hero-copy { position: relative; margin: var(--ds-space-6) var(--ds-gutter); padding: var(--ds-space-6); max-width: 36rem; background: rgb(2 35 92 / 0.94); color: var(--ds-color-on-frame); border-radius: var(--ds-radius-md); border-inline-start: var(--ds-highlight-width) solid var(--ds-color-highlight); }
.nc-hero--overlay .nc-search .nc-label, .nc-hero--overlay .nc-hint { color: var(--ds-color-on-frame); }
@media (max-width: 479px) { .nc-hero--overlay { display: block; } .nc-hero--overlay .nc-hero-media { position: static; height: 11rem; } .nc-hero--overlay .nc-hero-copy { margin: 0; border-radius: 0; } }

/* Rotating banner: manual by default; play is opt-in and pauses on hover or focus */
.nc-carousel { position: relative; background: var(--ds-color-frame); color: var(--ds-color-on-frame); }
.nc-slides { display: grid; }
.nc-slide { grid-area: 1 / 1; display: grid; visibility: hidden; opacity: 0; transition: opacity var(--ds-duration-slow) var(--ds-easing), visibility 0s linear var(--ds-duration-slow); }
.nc-slide.is-current { visibility: visible; opacity: 1; transition-delay: 0s; }
@media (min-width: 768px) { .nc-slide { grid-template-columns: 1fr 1fr; } }
.nc-slide .nc-hero-media { min-height: 12rem; }
.nc-slide-copy { display: grid; gap: var(--ds-space-3); align-content: center; padding: var(--ds-space-8) var(--ds-gutter); }
.nc-slide-copy h3 { margin: 0; font-size: var(--ds-text-h2); line-height: var(--ds-leading-h2); }
.nc-slide-copy p { margin: 0; }
.nc-carousel-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-3) var(--ds-gutter); border-block-start: 1px solid rgb(255 255 255 / 0.25); }
.nc-carousel-controls .nc-btn { min-height: var(--ds-target-compact); padding: 0 var(--ds-space-3); }
.nc-carousel-pos { margin-inline-start: auto; font-size: var(--ds-text-small); }

/* ---------- Page header ---------- */
.nc-pagehead { position: relative; display: grid; gap: var(--ds-space-2); padding: var(--ds-space-6) var(--ds-gutter) var(--ds-space-8); background: var(--ds-color-surface-alt); border-block-end: 1px solid var(--ds-color-border); overflow: hidden; }
.nc-pagehead h2, .nc-pagehead-title { position: relative; margin: 0; font-family: var(--ds-font-heading); font-size: var(--ds-text-h1); line-height: var(--ds-leading-h1); font-weight: var(--ds-weight-bold); }
.nc-pagehead p { position: relative; margin: 0; max-width: 36rem; }
.nc-pagehead .nc-breadcrumb { position: relative; }
/* Faded image: the photo sits at the end side and fades into the surface, so text stays on a plain background */
.nc-pagehead--image { min-height: 12rem; align-content: end; background: var(--ds-color-surface-alt); }
.nc-pagehead--image::before { content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: 60%; background: var(--nc-pagehead-image) center / cover no-repeat; -webkit-mask-image: linear-gradient(to left, #000 35%, transparent); mask-image: linear-gradient(to left, #000 35%, transparent); }
[dir="rtl"] .nc-pagehead--image::before { -webkit-mask-image: linear-gradient(to right, #000 35%, transparent); mask-image: linear-gradient(to right, #000 35%, transparent); }
@media (max-width: 599px) { .nc-pagehead--image::before { width: 100%; height: 5rem; inset-block: 0 auto; -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent); mask-image: linear-gradient(to bottom, #000 30%, transparent); } .nc-pagehead--image { padding-block-start: 5.5rem; } }
.nc-pagehead--plain { background: var(--ds-color-surface); }

@media (min-width: 480px) { .nc-facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .nc-facts { grid-template-columns: repeat(3, 1fr); } }
.nc-facts > div { padding: var(--ds-space-4) var(--ds-space-5); }
.nc-card-title { margin-block-start: var(--ds-space-1); }
.nc-card-facts { padding-block: var(--ds-space-1); }
/* Buttons on dark surfaces keep their own colors over the link color */
.nc a.nc-btn--on-dark, .nc a.nc-btn--on-dark:hover { color: var(--ds-color-on-frame); }
.nc-btn--inverse { background: var(--ds-color-surface); color: var(--ds-color-action); border-color: var(--ds-color-surface); }
.nc a.nc-btn--inverse, .nc a.nc-btn--inverse:hover { color: var(--ds-color-action); }
.nc-btn--inverse:hover { background: var(--ds-color-action-subtle); }
.nc-lang-list--static { position: static; margin-block-start: var(--ds-space-2); max-height: none; }
.nc .nc-header-panel a { gap: var(--ds-space-2); }
/* Something already known: plain text that wraps in full, never a clipped input */
.nc-readonly { margin: 0; padding: var(--ds-space-2) var(--ds-space-3); background: var(--ds-color-surface-alt); border-radius: var(--ds-radius-sm); font-weight: var(--ds-weight-semibold); overflow-wrap: anywhere; }
.nc-outcomes { max-width: 44rem; }
/* Hidden always wins over a component's own display rule */
.nc [hidden], .nc[hidden] { display: none !important; }
.nc-help { max-width: 40rem; }
.nc-sticky-info strong, .nc-sticky .nc-btn { white-space: nowrap; }


/* ---------- Form shell and action bar ---------- */
/* The action bar sits at the end of the available space: secondary at the start, primary at the end. */
.nc-form-shell { display: flex; flex-direction: column; gap: var(--ds-space-6); min-height: var(--nc-form-min-height, auto); max-width: 40rem; }
.nc-form-actions { margin-block-start: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--ds-space-3); padding-block-start: var(--ds-space-5); border-block-start: 1px solid var(--ds-color-border); }
.nc-form-actions .nc-btn--primary { margin-inline-start: auto; }
@media (max-width: 479px) { .nc-form-actions .nc-btn { flex: 1 1 0; padding-inline: var(--ds-space-3); } }
.nc-choices { display: grid; gap: var(--ds-space-2); }
.nc-choices--row { grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); }

/* ---------- Cancelled status ---------- */
.nc-status--cancelled { color: var(--ds-status-closed-text); background: var(--ds-status-closed-bg); }

/* ---------- Rows of help inside empty states ---------- */
.nc-empty-options { display: grid; gap: var(--ds-space-3); margin: 0; padding: 0; list-style: none; }
.nc-empty-options li { display: block; }
.nc-empty-options li:has(.nc-chip) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-3); }

/* ---------- Account menu ---------- */
.nc-menu-wrap { position: relative; }
.nc-menu { position: absolute; z-index: var(--ds-z-sticky); inset-inline-end: 0; inset-block-start: calc(100% + var(--ds-space-2)); min-width: min(15rem, calc(100vw - 2rem)); margin: 0; padding: var(--ds-space-2); list-style: none; background: var(--ds-color-surface); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-overlay); }
.nc-menu[hidden] { display: none; }
.nc .nc-menu a { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); min-height: var(--ds-control-height-sm); padding: 0 var(--ds-space-3); border-radius: var(--ds-radius-sm); color: var(--ds-color-text); text-decoration: none; font-weight: var(--ds-weight-semibold); }
.nc .nc-menu a:hover { background: var(--ds-color-action-subtle); color: var(--ds-color-action-strong); }
.nc-menu-sep { margin-block-start: var(--ds-space-2); padding-block-start: var(--ds-space-2); border-block-start: 1px solid var(--ds-color-border); }
.nc .nc-header-util .nc-header-minor { font-weight: var(--ds-weight-regular); }
/* Phones never show the account dropdown in the bar: it sits inside the Menu panel as a plain list */
@media (max-width: 479px) { .nc-menu-wrap { width: 100%; } .nc-menu { position: static; width: 100%; margin-block-start: var(--ds-space-2); } }
.nc-form-shell .nc-field { max-width: none; }
.nc .nc-header-util .nc-header-minor { padding-inline-end: var(--ds-space-4); border-inline-end: 1px solid rgb(255 255 255 / 0.35); }
.nc-card--preferred:hover, .nc-card--preferred:focus-within { border-inline-start-color: var(--ds-color-highlight); }
/* Phones: the breadcrumb becomes one link back to the parent level */
@media (max-width: 479px) {
  .nc-breadcrumb li { display: none; }
  .nc-breadcrumb li:nth-last-child(2) { display: inline-flex; }
  .nc-breadcrumb li:nth-last-child(2)::before { content: ""; width: 0.45rem; height: 0.45rem; border-block-start: 2px solid currentColor; border-inline-start: 2px solid currentColor; border-inline-end: 0; transform: rotate(-45deg); color: var(--ds-color-action); }
  [dir="rtl"] .nc-breadcrumb li:nth-last-child(2)::before { transform: rotate(45deg); }
}
/* Account menu: who is signed in, grouped items, one line on what each holds */
.nc-menu { min-width: min(18rem, calc(100vw - 2rem)); }
.nc-menu-head { padding: var(--ds-space-2) var(--ds-space-3) var(--ds-space-3); margin-block-end: var(--ds-space-1); border-block-end: 1px solid var(--ds-color-border); font-size: var(--ds-text-small); color: var(--ds-color-text-muted); }
.nc-menu-head b { display: block; color: var(--ds-color-text); font-size: var(--ds-text-label); overflow-wrap: anywhere; }
.nc-menu-group { padding: var(--ds-space-3) var(--ds-space-3) var(--ds-space-1); font-size: var(--ds-text-small); font-weight: var(--ds-weight-semibold); color: var(--ds-color-text-muted); }
.nc .nc-menu a > span:first-child { display: grid; padding-block: var(--ds-space-1); line-height: 1.3; }
.nc .nc-menu a small { font-size: var(--ds-text-small); font-weight: var(--ds-weight-regular); color: var(--ds-color-text-muted); }

.nc-check:has(input:checked):hover, .nc-option:has(input:checked):hover { border-color: var(--ds-color-action-strong); background: var(--ds-color-action-subtle); }
/* The native control keeps a dark gray outline so the choice meets 3:1 on its own */
.nc-check input:not(:checked), .nc-option input:not(:checked) { accent-color: var(--ds-color-action); }

/* ---------- Custom checkbox and radio ----------
   Drawn so the box or circle uses exactly the same 2px edge and color as its card and every field. */
.nc-check input, .nc-option input { appearance: none; -webkit-appearance: none; display: grid; place-content: center; flex: none; width: 1.5rem; height: 1.5rem; margin: 0; background: var(--ds-color-surface); border: var(--ds-border-width-strong) solid var(--ds-color-border-input); border-radius: var(--ds-radius-sm); cursor: pointer; transition: border-color var(--ds-duration) var(--ds-easing), background-color var(--ds-duration) var(--ds-easing); }
.nc-check input[type="radio"], .nc-option input[type="radio"] { border-radius: 50%; }
.nc-check:hover input:not(:checked):not(:disabled), .nc-option:hover input:not(:checked) { border-color: var(--ds-color-border-input-hover); }
.nc-check input[type="checkbox"]::before { content: ""; width: 0.875rem; height: 0.875rem; background: var(--ds-color-on-action); transform: scale(0); transition: transform var(--ds-duration) var(--ds-easing); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.nc-check input[type="checkbox"]:checked { background: var(--ds-color-action); border-color: var(--ds-color-action); }
.nc-check input[type="checkbox"]:checked::before { transform: scale(1); }
.nc-check input[type="radio"]::before, .nc-option input[type="radio"]::before { content: ""; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--ds-color-action); transform: scale(0); transition: transform var(--ds-duration) var(--ds-easing); }
.nc-check input[type="radio"]:checked, .nc-option input[type="radio"]:checked { border-color: var(--ds-color-action); }
.nc-check input[type="radio"]:checked::before, .nc-option input[type="radio"]:checked::before { transform: scale(1); }
.nc-check input:disabled { background: var(--ds-color-surface-disabled); border-style: dashed; cursor: not-allowed; }
.nc-check input[aria-invalid="true"] { border-color: var(--ds-color-invalid); }
.nc-filter-body .nc-check input { width: 1.25rem; height: 1.25rem; }
.nc-filter-body .nc-check input[type="checkbox"]::before { width: 0.75rem; height: 0.75rem; }
.nc-filter-body .nc-check input[type="radio"]::before { width: 0.625rem; height: 0.625rem; }
/* Icon choice: the card and icon show the choice; the native input remains keyboard and screen-reader accessible. */
.nc-check--icon { position: relative; }
.nc-check.nc-check--icon > input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0;
}
.nc-check.nc-check--icon > .nc-choice-mark { display: grid; place-items: center; flex: none; grid-template-columns: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--ds-color-action-subtle); color: var(--ds-color-action); }
.nc-check.nc-check--icon > .nc-choice-mark .nc-icon { width: 1.75rem; height: 1.75rem; }
/* Windows contrast themes: hand the controls back to the system */
@media (forced-colors: active) { .nc-check input, .nc-option input { appearance: auto; -webkit-appearance: auto; } .nc-check input::before, .nc-option input::before { display: none; } }
@media (forced-colors: active) {
  .nc-check.nc-check--icon > input { position: static; width: 1.5rem; height: 1.5rem; margin: 0; overflow: visible; clip-path: none; opacity: 1; }
  .nc-check.nc-check--icon > .nc-choice-mark { display: none; }
}

/* ---------- Logo and product lockup ---------- */
.nc-logo { display: block; width: auto; height: var(--ds-logo-height); }
.nc .nc-wordmark { flex-direction: row; align-items: center; gap: var(--ds-space-3); }
.nc-product { padding-inline-start: var(--ds-space-3); border-inline-start: 1px solid rgb(255 255 255 / 0.45); font-size: var(--ds-text-h4); font-weight: var(--ds-weight-semibold); line-height: 1.2; color: var(--ds-color-on-frame); white-space: nowrap; }
.nc-wordmark--light .nc-product { color: var(--ds-color-text); border-inline-start-color: var(--ds-color-border); }
.nc-logo--footer { height: var(--ds-logo-height-footer); }
.nc-footer-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-4); }
@media (max-width: 479px) { .nc-product { font-size: var(--ds-text-label); } }

/* ---------- Two-tier header ---------- */
/* Utility strip above the main bar; on phones its items move into the Menu panel. */
.nc-header-top { display: flex; justify-content: flex-end; padding: 0 var(--ds-gutter); background: rgb(0 0 0 / 0.22); }
.nc-header-top .nc-header-util { gap: var(--ds-space-1) var(--ds-space-5); }
.nc .nc-header-top .nc-header-util a, .nc-header-top .nc-header-btn { min-height: 2.5rem; font-size: var(--ds-text-label); }
.nc-header-top .nc-header-btn { padding-inline: var(--ds-space-1); }
.nc-header-inner { flex-wrap: nowrap; }
.nc-header-nav { margin-inline-start: auto; }
.nc-wordmark { margin-inline-end: 0; flex: none; }
.nc .nc-header-nav a { font-size: var(--ds-text-h4); }
@media (max-width: 767px) {
  .nc-header:not(.nc-header--wide) .nc-header-top { display: none; }
  .nc-header-inner { flex-wrap: wrap; justify-content: space-between; }
  .nc-menu-toggle { margin-inline-start: auto; }
}
.nc-header--compact .nc-header-top { display: none; }
.nc-header--compact .nc-menu-toggle { margin-inline-start: auto; }
@media (max-width: 479px) {
  .nc-product { white-space: normal; max-width: 6.5rem; font-size: var(--ds-text-label); }
  .nc .nc-wordmark { gap: var(--ds-space-2); }
  .nc-product { padding-inline-start: var(--ds-space-2); }
}
.nc-header--compact .nc-product { white-space: normal; max-width: 6.5rem; font-size: var(--ds-text-label); }
.nc-header--compact .nc-header-inner { flex-wrap: wrap; }
@media (max-width: 767px) { .nc-menu-toggle { padding-inline: var(--ds-space-1); } }
.nc-header--compact .nc-menu-toggle { padding-inline: var(--ds-space-1); }
.nc-header--compact .nc-logo { height: 3rem; }
.nc-header--compact .nc-header-inner { flex-wrap: wrap; column-gap: var(--ds-space-2); }
.nc-header--compact .nc-header-panel { flex-basis: 100%; }
@media (max-width: 479px) { .nc-product { max-width: 5.5rem; font-size: 0.9375rem; } .nc-header-inner { column-gap: var(--ds-space-2); } }
/* Account menu: groups separated by a light line instead of headings; more room between links */
.nc-menu li + li { margin-block-start: var(--ds-space-1); }
.nc .nc-menu a { padding-block: var(--ds-space-2); }
.nc-menu-divider { height: 1px; margin: var(--ds-space-2) var(--ds-space-3); background: var(--ds-color-border); }
.nc-menu-sep { border-block-start-color: var(--ds-color-border); }
/* Placeholder: example text only (search), readable supporting-text color */
.nc-input::placeholder, .nc-textarea::placeholder { color: var(--ds-color-placeholder); opacity: 1; }
/* Search button: icon and word; on phones the icon alone, so the field keeps room for its placeholder */
.nc-search-btn .nc-icon { width: 1.25rem; height: 1.25rem; }
@media (min-width: 480px) { .nc-search-btn .nc-icon { display: none; } }
@media (max-width: 479px) {
  .nc-search-btn { min-width: var(--ds-control-height); padding-inline: var(--ds-space-3); }
  .nc-search-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Empty search: no clear button, so give its space back to the placeholder */
.nc-search-box .nc-input:placeholder-shown { padding-inline-end: var(--ds-space-3); }
@media (max-width: 479px) { .nc-search-box .nc-input::placeholder { font-size: var(--ds-text-label); } }
/* Narrowest phones: field gets the full row; the button sits below with its word */
@media (max-width: 359px) {
  .nc-search-row { flex-direction: column; }
  .nc-search-btn { width: 100%; }
  .nc-search-btn .nc-icon { display: none; }
  .nc-search-btn-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* ---------- Card scroller ----------
   A row of cards people move through with arrows or a swipe. Never moves on its own.
   Four cards on wide screens, two on tablets, one and a peek on phones. */
.nc-scroller { display: grid; gap: var(--ds-space-4); min-width: 0; }
.nc-scroller-controls { display: flex; align-items: center; gap: var(--ds-space-2); }
.nc-scroller-pos { margin-inline-end: var(--ds-space-2); font-size: var(--ds-text-small); color: var(--ds-color-text-muted); white-space: nowrap; }
.nc-scroller-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--ds-control-height-sm); height: var(--ds-control-height-sm); padding: 0; border: var(--ds-border-width-strong) solid var(--ds-color-action); border-radius: var(--ds-radius-pill); background: var(--ds-color-surface); color: var(--ds-color-action); cursor: pointer; transition: color var(--ds-duration-hover) var(--ds-easing), background-color var(--ds-duration-hover) var(--ds-easing), border-color var(--ds-duration-hover) var(--ds-easing); }
.nc-scroller-btn:hover { background: var(--ds-color-action-subtle); }
.nc-scroller-btn[aria-disabled="true"] { border-color: var(--ds-color-border-input); color: var(--ds-color-text-muted); background: var(--ds-color-surface); cursor: default; }
.nc-scroller-btn .nc-icon { width: 1.25rem; height: 1.25rem; }
.nc-scroller-track { --nc-per-view: 1.15; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--nc-per-view) - 1) * var(--ds-space-4)) / var(--nc-per-view)); gap: var(--ds-space-4); margin: 0; padding: var(--ds-space-1) 0 var(--ds-space-3); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.nc-scroller-track::-webkit-scrollbar { display: none; }
.nc-scroller-track > li { display: grid; scroll-snap-align: start; min-width: 0; }
@media (min-width: 600px) { .nc-scroller-track { --nc-per-view: 2; } }
@media (min-width: 1024px) { .nc-scroller-track { --nc-per-view: 4; } }
@media (prefers-reduced-motion: reduce) { .nc-scroller-track { scroll-behavior: auto; } }
.nc-scroller-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--ds-space-3) var(--ds-space-6); }
.nc-scroller-title { margin: 0; font-size: var(--ds-text-h3); line-height: var(--ds-leading-h3); }
.nc-card { align-content: start; }
/* NN/g: people should reach the last card in 3 to 4 steps. Phones show 4 cards (4 swipes),
   tablets 8 (two per step), wide screens 12 (four per step). The full list is linked separately. */
@media (max-width: 599px) { .nc-scroller:not(.is-filterable) .nc-scroller-track > li:nth-child(n+5) { display: none; } }
@media (min-width: 600px) and (max-width: 1023px) { .nc-scroller-track { --nc-per-view: 2.15; } .nc-scroller:not(.is-filterable) .nc-scroller-track > li:nth-child(n+9) { display: none; } }

/* ---------- Goal tiles ----------
   The main reasons to visit, as compact icon tiles. One row of up to five on wide screens;
   a list of rows (icon, text, arrow) on narrower ones, so no tile is ever left alone. */
.nc-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-3); }
@media (min-width: 600px) and (max-width: 1099px) { .nc-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .nc-goals { grid-template-columns: repeat(var(--nc-goals, 5), minmax(0, 1fr)); gap: var(--ds-space-4); } }
.nc-goals > li { display: grid; }
.nc .nc-goal { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ds-space-4); padding: var(--ds-space-4) var(--ds-space-5); color: var(--ds-color-text); text-decoration: none; background: var(--ds-color-surface); border: var(--ds-border-width-strong) solid var(--ds-color-border); border-radius: var(--ds-radius-md); transition: border-color var(--ds-duration-hover) var(--ds-easing), box-shadow var(--ds-duration-hover) var(--ds-easing); }
.nc .nc-goal:hover { border-color: var(--ds-color-action); box-shadow: var(--ds-shadow-raised); color: var(--ds-color-text); }
.nc-goal-mark { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--ds-color-action-subtle); color: var(--ds-color-action); }
.nc-goal-mark .nc-icon { width: 2rem; height: 2rem; }
.nc-goal-text { display: grid; gap: var(--ds-space-1); }
.nc-goal-text b { font-size: var(--ds-text-h4); line-height: var(--ds-leading-h4); color: var(--ds-color-action); }
.nc-goal-text span { color: var(--ds-color-text-muted); }
.nc-goal > .nc-icon { color: var(--ds-color-action); }
@media (min-width: 1100px) {
  .nc .nc-goal { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; align-items: start; gap: var(--ds-space-3); padding: var(--ds-space-5); }
  .nc-goal > .nc-icon { justify-self: end; }
}
@media (min-width: 600px) and (max-width: 1099px) { .nc-goals > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Goal tile spot icons: duotone, blue outline over a SUNY yellow fill */
.nc-goal-mark { --nc-duo: var(--ds-color-highlight); --nc-duo-opacity: 1; width: 3.5rem; height: 3.5rem; }
.nc-goal-mark .nc-icon { width: 2.25rem; height: 2.25rem; }
/* Menus opened from the dark header keep dark text in every state */
.nc .nc-header .nc-lang-list a, .nc .nc-header .nc-lang-list a:hover, .nc .nc-header .nc-lang-list a:focus-visible,
.nc .nc-header .nc-menu a, .nc .nc-header .nc-menu a:hover { color: var(--ds-color-text); text-decoration: none; }
.nc .nc-header .nc-lang-list a:hover, .nc .nc-header .nc-menu a:hover { background: var(--ds-color-action-subtle); color: var(--ds-color-action-strong); }
.nc .nc-header .nc-lang-list a:focus-visible, .nc .nc-header .nc-menu a:focus-visible { outline-color: var(--ds-color-focus); }

/* ---------- Campus logo in a card header ---------- */
.nc-card-campus--logo::before { display: none; }
.nc-card-campus--logo { gap: var(--ds-space-3); min-height: 1.75rem; }
.nc-card-campus--logo img { flex: none; height: 1.75rem; width: auto; max-width: 5.5rem; object-fit: contain; object-position: left center; }

/* ---------- Filter chips (single choice, filters a list in place) ---------- */
.nc-filter-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.nc-filter-chip { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-target-compact); padding: 0 var(--ds-space-4); font: inherit; font-size: var(--ds-text-label); font-weight: var(--ds-weight-semibold); color: var(--ds-color-text); background: var(--ds-color-surface); border: var(--ds-border-width-strong) solid var(--ds-color-border-input); border-radius: var(--ds-radius-pill); cursor: pointer; transition: border-color var(--ds-duration) var(--ds-easing), background-color var(--ds-duration) var(--ds-easing); }
.nc-filter-chip:hover { border-color: var(--ds-color-border-input-hover); }
.nc-filter-chip[aria-pressed="true"] { background: var(--ds-color-action); border-color: var(--ds-color-action); color: var(--ds-color-on-action); }
.nc-filter-chip-count { font-weight: var(--ds-weight-regular); color: var(--ds-color-text-muted); }
.nc-filter-chip[aria-pressed="true"] .nc-filter-chip-count { color: var(--ds-color-on-action); }
/* Filterable scrollers cap the cards in script, so the fixed position caps below do not apply */
.nc-scroller.is-filterable .nc-scroller-track > li { display: grid; }
.nc-scroller.is-filterable .nc-scroller-track > li[hidden] { display: none; }
@media (max-width: 599px) {
  .nc-filter-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--ds-gutter)); padding-inline: var(--ds-gutter); padding-block: var(--ds-space-1); }
  .nc-filter-chips::-webkit-scrollbar { display: none; }
  .nc-filter-chip { white-space: nowrap; }
}
.nc-card-campus--logo { flex-direction: column; align-items: flex-start; gap: var(--ds-space-1); }
.nc-card-campus--logo img { height: 1.625rem; max-width: 7rem; }
/* Card header: campus logo left, type badge right, one row */
.nc-card-top { align-items: center; }
.nc-card-top > .nc-tags { margin-inline-start: auto; justify-content: flex-end; }
.nc-card-campus--logo { flex-direction: row; min-height: 0; }
.nc-card-campus--logo img { height: 1.8rem; max-width: 8rem; }

/* Card logo a little larger now that the header holds only the logo */
.nc-card-campus--logo img { height: 2.25rem; max-width: 10rem; }
.nc-card-facts dd .nc-tags { margin-block-start: var(--ds-space-1); }
/* Last scroller slot when more courses match than fit */
.nc-scroller-end[hidden] { display: none !important; }
.nc .nc-scroller-end-card { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--ds-space-4); height: 100%; min-height: 16rem; padding: var(--ds-space-6); text-align: center; color: var(--ds-color-action); text-decoration: none; background: var(--ds-color-action-subtle); border: var(--ds-border-width-strong) dashed var(--ds-color-action); border-radius: var(--ds-radius-md); }
.nc .nc-scroller-end-card:hover { background: var(--ds-color-surface); color: var(--ds-color-action-strong); }
.nc-scroller-end-card b { font-size: var(--ds-text-h4); }
.nc-scroller-end-card .nc-goal-mark { background: var(--ds-color-surface); }
/* Status always sits at the bottom of the card, so cards of different lengths share a baseline */
.nc-card { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.nc-card > .nc-card-foot { margin-block-start: auto; padding-block-start: var(--ds-space-2); }
.nc-scroller-track > li > .nc-card, .results-cards > li > .nc-card, .nc-card-list > li > .nc-card { height: 100%; }

/* ---------- Typeahead (search suggestions) ----------
   Same floating surface as the language menu: white panel, soft shadow, rows that highlight. */
.nc-typeahead { position: relative; flex: 1; min-width: 0; }
.nc-suggest { position: absolute; z-index: var(--ds-z-drawer); inset-inline: 0; inset-block-start: calc(100% + var(--ds-space-2)); max-height: min(26rem, 70vh); overflow: auto; margin: 0; padding: var(--ds-space-2); list-style: none; background: var(--ds-color-surface); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-overlay); }
@media (max-width: 359px) { .nc-search-row .nc-suggest { inset-block-start: calc(100% + var(--ds-control-height) + var(--ds-space-4)); } }
.nc-suggest[hidden] { display: none; }
.nc-suggest-group { padding: var(--ds-space-3) var(--ds-space-3) var(--ds-space-1); font-size: var(--ds-text-small); font-weight: var(--ds-weight-semibold); color: var(--ds-color-text-muted); }
.nc-suggest-group:first-child { padding-block-start: var(--ds-space-1); }
.nc-suggest-option { display: flex; align-items: center; gap: var(--ds-space-3); min-height: var(--ds-control-height-sm); padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-sm); color: var(--ds-color-text); cursor: pointer; }
.nc-suggest-option .nc-icon { color: var(--ds-color-text-muted); }
.nc-suggest-option:hover, .nc-suggest-option[aria-selected="true"] { background: var(--ds-color-action-subtle); color: var(--ds-color-action-strong); }
.nc-suggest-option[aria-selected="true"] .nc-icon, .nc-suggest-option:hover .nc-icon { color: var(--ds-color-action); }
.nc-suggest-text { display: grid; min-width: 0; line-height: 1.3; }
.nc-suggest-text b { font-weight: var(--ds-weight-semibold); overflow-wrap: anywhere; }
.nc-suggest-text mark { background: none; color: inherit; font-weight: var(--ds-weight-bold); text-decoration: underline; text-decoration-color: var(--ds-color-highlight); text-decoration-thickness: 3px; text-underline-offset: 0.15em; }
.nc-suggest-text small { font-size: var(--ds-text-small); color: var(--ds-color-text-muted); }
.nc-suggest-all { margin-block-start: var(--ds-space-2); border-block-start: 1px solid var(--ds-color-border); border-radius: 0 0 var(--ds-radius-sm) var(--ds-radius-sm); font-weight: var(--ds-weight-semibold); color: var(--ds-color-action); }
.nc-suggest-empty { padding: var(--ds-space-3); color: var(--ds-color-text-muted); }
/* Hide the browser's own clear button; the component has its own */
.nc-search-box input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
/* Let suggestions float over the next section instead of being cut off by the hero */
.nc-hero:has(.nc-typeahead) { overflow: visible; }
.nc-hero:has(.nc-suggest:not([hidden])) { z-index: var(--ds-z-drawer); }

/* Nested filter options: topics under a checked area, indented with a guide line */
.nc-subfilter { display: grid; gap: var(--ds-space-2); margin: calc(-1 * var(--ds-space-1)) 0 var(--ds-space-1); padding: 0 0 0 var(--ds-space-4); margin-inline-start: var(--ds-space-4); border: 0; border-inline-start: 2px solid var(--ds-color-border); min-width: 0; }
.nc-check--nested { min-height: var(--ds-target-compact); font-size: var(--ds-text-small); padding-block: var(--ds-space-1); }
.nc-filter-body .nc-check--nested input, .nc-check--nested input { width: 1.125rem; height: 1.125rem; }
/* Keep a chip's hidden label inside the chip, so scrolling chip rows never widen the page */
.nc-chip { position: relative; }

/* ---------- Tooltip ----------
   Names a mark (such as a campus logo) on hover or keyboard focus of its card. */
.nc-card-campus--logo { position: relative; }
.nc-card-campus--logo img { height: 2.5rem; max-width: 11rem; }
.nc-tooltip { position: absolute; z-index: 5; inset-block-end: calc(100% + 0.5rem); inset-inline-start: 0; width: max-content; max-width: min(18rem, 80vw); padding: var(--ds-space-2) var(--ds-space-3); font-size: var(--ds-text-small); font-weight: var(--ds-weight-semibold); line-height: 1.35; color: var(--ds-color-surface); background: var(--ds-color-text); border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-raised); pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms; }
.nc-tooltip::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline-start: var(--ds-space-4); border: 6px solid transparent; border-block-start-color: var(--ds-color-text); }
.nc-card:hover .nc-tooltip, .nc-card:focus-within .nc-tooltip, .is-tip-open > .nc-tooltip { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms ease 150ms, transform 200ms ease 150ms, visibility 0s linear 150ms; }
.nc-tips-dismissed .nc-tooltip { opacity: 0 !important; visibility: hidden !important; transition: opacity 150ms ease, visibility 0s linear 150ms !important; }
@media (prefers-reduced-motion: reduce) { .nc-tooltip, .nc-card:hover .nc-tooltip, .nc-card:focus-within .nc-tooltip { transform: none; transition: opacity 120ms ease, visibility 0s; } }
/* Room above the cards for a tooltip inside the scrolling row; the extra band lets clicks through to the chips */
.nc-scroller-track { padding-block-start: 2.5rem; margin-block-start: -2.5rem; pointer-events: none; }
.nc-scroller-track > li { pointer-events: auto; }

/* ---------- Ask a question ----------
   The same block wherever the site offers a question, so people learn to recognise it. */
.nc-ask { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ds-space-3) var(--ds-space-4); align-items: center; padding: var(--ds-space-5) var(--ds-space-6); background: var(--ds-color-surface); border: var(--ds-border-width-strong) solid var(--ds-color-border); border-inline-start: var(--ds-space-1) solid var(--ds-color-highlight); border-radius: var(--ds-radius-md); }
.nc-ask .nc-goal-mark { --nc-duo: var(--ds-color-highlight); --nc-duo-opacity: 1; }
.nc-ask-body { display: grid; gap: var(--ds-space-1); }
.nc .nc-ask-title { margin: 0; font-size: var(--ds-text-h4); line-height: var(--ds-leading-h4); }
.nc-ask-body p { margin: 0; color: var(--ds-color-text-muted); }
.nc-ask > .nc-btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 768px) { .nc-ask { grid-template-columns: auto minmax(0, 1fr) auto; } .nc-ask > .nc-btn { grid-column: auto; } }
@media (max-width: 599px) { .nc-ask > .nc-btn { justify-self: stretch; } }
/* In narrow columns (course page side panel, help cards) the button sits below */
.course-aside .nc-ask, .help-options .nc-ask { grid-template-columns: auto minmax(0, 1fr); }
.course-aside .nc-ask > .nc-btn, .help-options .nc-ask > .nc-btn { grid-column: 1 / -1; }
@media (max-width: 599px) { .nc .nc-ask > .nc-btn { justify-self: stretch; width: 100%; justify-content: center; } }

/* Required marker: an asterisk after the label, explained once at the top of the form */
.nc-required { color: var(--ds-color-invalid); font-weight: var(--ds-weight-bold); margin-inline-start: 0.15em; }

/* Campus identity sits quietly beside the title: logo and name, no box (October 27) */
.nc-course-head .nc-campus, .course-top .nc-campus { padding: 0; background: none; border: 0; }
.nc-readmore > button, .nc-readmore > .nc-link-btn { justify-self: start; }

/* Sign-up steps, payment choice, campus details card, class rows and group rows (D-036) */
.course-option-lines { list-style: none; margin: var(--ds-space-1) 0 0; padding: 0; display: grid; gap: 2px; font-size: var(--ds-text-small); color: var(--ds-color-text-muted); }
.course-option-lines li:first-child { color: var(--ds-color-text); }
.signup-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-10); }
.signup-step { display: grid; gap: var(--ds-space-4); }
.nc .signup-step > h2 { display: flex; align-items: center; gap: var(--ds-space-3); margin: 0; font-size: var(--ds-text-h3); }
.signup-num { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; background: var(--ds-color-action); color: var(--ds-color-on-action, #fff); font-size: var(--ds-text-small); font-weight: var(--ds-weight-bold); }
.signup-step .nc-sections { margin: 0; display: grid; gap: var(--ds-space-2); border: 0; padding: 0; }
.signup-details { margin: 0; display: grid; gap: var(--ds-space-2); }
.signup-details > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--ds-space-3); }
.signup-details dt { color: var(--ds-color-text-muted); }
.signup-details dd { margin: 0; font-weight: var(--ds-weight-semibold); overflow-wrap: anywhere; }
@media (max-width: 479px) { .signup-details > div { grid-template-columns: 1fr; gap: 0; } }
.course-handoff-card { display: grid; gap: var(--ds-space-3); padding: var(--ds-space-4); background: var(--ds-color-surface-alt); border-radius: var(--ds-radius-md); }
.nc .course-handoff-card h3 { margin: 0; font-size: var(--ds-text-h4); }
.course-handoff-details { margin: 0; display: grid; gap: var(--ds-space-1); font-size: var(--ds-text-small); }
.course-handoff-details > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--ds-space-2); }
.course-handoff-details dt { color: var(--ds-color-text-muted); }
.course-handoff-details dd { margin: 0; font-weight: var(--ds-weight-semibold); overflow-wrap: anywhere; }
.course-handoff-tools { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.course-handoff-tools [hidden], .course-handoff-tell[hidden], .course-handoff-card [hidden] { display: none; }
.course-handoff-card p:empty { display: none; }
.signup-pay-choice span { display: grid; gap: 2px; }
.signup-pay-choice small { color: var(--ds-color-text-muted); font-size: var(--ds-text-small); }
.signup-pay .nc-choices { display: grid; gap: var(--ds-space-2); }
.signup-pay-choice { min-height: 0; padding-block: var(--ds-space-3); align-items: flex-start; }
.signup-pay-choice input { margin-block-start: .3rem; }
.group-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-3); counter-reset: row; }
.group-row { display: grid; gap: var(--ds-space-2); padding: var(--ds-space-4); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-md); background: var(--ds-color-surface); }
.group-row-fields { display: grid; gap: var(--ds-space-3); }
@media (min-width: 700px) { .group-row-fields { grid-template-columns: 1fr 1fr 1.4fr; } }
.group-row .nc-field { margin: 0; }
.group-row .nc-label { font-size: var(--ds-text-small); }
.group-row-end { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); min-height: 1.75rem; }
.group-row-end .nc-status[hidden] { display: none; }
.group-row-end .nc-link-btn { margin-inline-start: auto; }
.group-row[data-state="name"], .group-row[data-state="email"], .group-row[data-state="format"], .group-row[data-state="dup"] { border-color: var(--ds-color-error-text, #b00020); }
.nc-check.signup-pay-choice > span { grid-template-columns: minmax(0, 1fr); gap: 2px; align-items: start; }
.cmp-step-h { display: flex; align-items: center; gap: var(--ds-space-3); margin: 0; font-size: var(--ds-text-h4); }
.nc .nc-link-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--ds-color-action); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.course-muted { color: var(--ds-color-text-muted); font-size: var(--ds-text-small); margin: 0; }
.nc-option-spacer { width: 1.5rem; }