/* * School Navigator Filters CSS Web File Module * * Physical URL: /School-Navigator-Filters.css * Logical owner: School Navigator filter controls, filter panes, surface-host filter scaffolding, * and Program Filter adapter accents. * * This stylesheet is loaded after /Header-Main.css and before the residual page-local CSS. * It is the first platform-backed CSS extraction from the former localized page CSS surface. */ :root { --sn-filters-css-module-loaded: 1; } /* ================================================================================================= */ /* ======================================================================================================= */ /* #region SN-UI-SCHOOL-YEAR-TOGGLE v1.0.0 | School Navigator: School Year Toggle Styles */ /* Summary: Styles the app school-year segmented toggle mounted into the shared header action anchor. */ /* Contents: */ /* - local semantic toggle variables */ /* - grouped segmented shell */ /* - segment button states */ /* - focus and accessibility resilience */ /* - responsive header behavior */ /* Notes: This region owns the toggle presentation only. Shared header CSS remains limited to shell, layout, and mount-hook behavior. */ /* ======================================================================================================= */ :root { --sn-school-year-toggle-shell-bg: color-mix(in srgb, var(--hisd-white) 78%, var(--hisd-teal-tint-90W) 22%); --sn-school-year-toggle-shell-border: color-mix(in srgb, var(--hisd-white) 24%, var(--hisd-teal-tint-60W) 76%); --sn-school-year-toggle-shell-text: color-mix(in srgb, var(--hisd-dark-grey) 76%, var(--hisd-teal-shade-20B) 24%); --sn-school-year-toggle-shell-shadow: color-mix(in srgb, var(--hisd-dark-grey) 9%, transparent); --sn-school-year-toggle-shell-gap: 0.625rem; --sn-school-year-toggle-shell-padding-inline: 0.5rem; --sn-school-year-toggle-shell-padding-block: 0.375rem; --sn-school-year-toggle-bg: color-mix(in srgb, var(--hisd-white) 88%, var(--hisd-teal-tint-90W) 12%); --sn-school-year-toggle-bg-elevated: color-mix(in srgb, var(--hisd-white) 82%, var(--hisd-teal-tint-90W) 18%); --sn-school-year-toggle-border: color-mix(in srgb, var(--hisd-white) 28%, var(--hisd-teal-tint-60W) 72%); --sn-school-year-toggle-shadow-soft: color-mix(in srgb, var(--hisd-dark-grey) 10%, transparent); --sn-school-year-toggle-shadow-ambient: color-mix(in srgb, var(--hisd-dark-grey) 7%, transparent); --sn-school-year-toggle-shell-inset: color-mix(in srgb, var(--hisd-teal) 12%, transparent); --sn-school-year-toggle-segment-text: color-mix(in srgb, var(--hisd-dark-grey) 90%, var(--hisd-teal-shade-20B) 10%); --sn-school-year-toggle-segment-muted: color-mix(in srgb, var(--hisd-dark-grey) 78%, var(--hisd-teal-shade-20B) 22%); --sn-school-year-toggle-segment-bg: color-mix(in srgb, var(--hisd-white) 80%, var(--hisd-teal) 20%); --sn-school-year-toggle-segment-border: color-mix(in srgb, var(--hisd-white) 20%, var(--hisd-teal) 80%); --sn-school-year-toggle-segment-hover: color-mix(in srgb, var(--hisd-white) 74%, var(--hisd-teal) 26%); --sn-school-year-toggle-segment-active-bg: var(--hisd-teal); --sn-school-year-toggle-segment-active-border: color-mix(in srgb, var(--hisd-teal) 78%, var(--hisd-teal-shade-20B) 22%); --sn-school-year-toggle-segment-active-text: var(--hisd-white); --sn-school-year-toggle-indicator-bg: var(--hisd-yellow); --sn-school-year-toggle-indicator-border: color-mix(in srgb, var(--hisd-yellow) 72%, var(--hisd-teal-shade-20B) 28%); --sn-school-year-toggle-segment-active-glow: color-mix(in srgb, var(--hisd-teal) 22%, transparent); --sn-school-year-toggle-focus-ring: color-mix(in srgb, var(--hisd-yellow) 72%, var(--hisd-white) 28%); --sn-school-year-toggle-disabled-bg: color-mix(in srgb, var(--hisd-white) 72%, var(--hisd-teal-tint-90W) 28%); --sn-school-year-toggle-disabled-border: color-mix(in srgb, var(--hisd-white) 26%, var(--hisd-teal-tint-60W) 74%); --sn-school-year-toggle-disabled-text: color-mix(in srgb, var(--hisd-dark-grey) 62%, var(--hisd-teal-tint-70W) 38%); --sn-school-year-toggle-disabled-indicator: color-mix(in srgb, var(--hisd-white) 26%, var(--hisd-teal-tint-70W) 74%); --sn-school-year-toggle-indicator-inactive: color-mix(in srgb, var(--hisd-dark-grey) 72%, var(--hisd-light-grey) 28%); } .sn-school-year-toggle { --sn-school-year-toggle-label-optical-offset: 0.045em; display: flex; align-items: center; justify-content: flex-end; inline-size: 100%; max-inline-size: 22rem; min-inline-size: 0; font-family: var(--font-body); color: var(--sn-school-year-toggle-segment-text); } .sn-school-year-toggle__shell { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--sn-school-year-toggle-shell-gap); inline-size: 100%; min-inline-size: max-content; padding: var(--sn-school-year-toggle-shell-padding-block) var(--sn-school-year-toggle-shell-padding-inline); border: 1px solid var(--sn-school-year-toggle-shell-border); border-radius: 999px; background: linear-gradient( 180deg, color-mix(in srgb, var(--hisd-white) 62%, transparent) 0%, color-mix(in srgb, var(--hisd-white) 32%, transparent) 100% ), var(--sn-school-year-toggle-shell-bg); box-shadow: 0 0.45rem 1rem var(--sn-school-year-toggle-shell-shadow), inset 0 1px 0 color-mix(in srgb, var(--hisd-white) 58%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--hisd-teal) 6%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .sn-school-year-toggle__title { display: inline-flex; align-items: center; flex: 0 0 auto; min-inline-size: max-content; padding-inline-start: 0.2rem; color: var(--sn-school-year-toggle-shell-text); font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; } .sn-school-year-toggle__group { display: inline-flex; align-items: stretch; gap: 0.375rem; flex: 0 0 auto; inline-size: auto; min-inline-size: max-content; min-block-size: 2.875rem; padding: 0.3125rem; border: 1px solid var(--sn-school-year-toggle-border); border-radius: 999px; background: linear-gradient( 180deg, color-mix(in srgb, var(--hisd-white) 96%, transparent) 0%, color-mix(in srgb, var(--hisd-white) 88%, transparent) 100% ), var(--sn-school-year-toggle-bg); box-shadow: inset 0 3px 6px color-mix(in srgb, var(--hisd-dark-grey) 18%, transparent), inset 0 0 0 1px var(--sn-school-year-toggle-shell-inset), inset 0 -2px 0 color-mix(in srgb, var(--hisd-white) 42%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--hisd-teal) 8%, transparent); backdrop-filter: blur(8px); overflow: hidden; } .sn-school-year-toggle__segment { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 0.45rem; min-inline-size: max-content; min-block-size: 2.25rem; padding: 0.625rem 0.95rem; border: 1px solid var(--sn-school-year-toggle-segment-border); border-radius: 999px; background: var(--sn-school-year-toggle-segment-bg); color: var(--sn-school-year-toggle-segment-muted); font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; letter-spacing: 0; line-height: 1; cursor: pointer; user-select: none; transition: background-color 140ms ease, border-color 140ms ease, box-shadow 160ms ease, color 140ms ease, transform 140ms ease; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hisd-white) 84%, transparent), 0 1px 0 color-mix(in srgb, var(--hisd-white) 45%, transparent), 0 0.22rem 0.55rem color-mix(in srgb, var(--hisd-dark-grey) 13%, transparent); } .sn-school-year-toggle__segment:hover:not(:disabled):not([aria-checked="true"]) { background: var(--sn-school-year-toggle-segment-hover); border-color: color-mix(in srgb, var(--hisd-white) 12%, var(--hisd-teal) 88%); color: var(--sn-school-year-toggle-segment-text); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hisd-white) 92%, transparent), 0 0 0 1px color-mix(in srgb, var(--hisd-teal) 28%, transparent), 0 0.32rem 0.78rem color-mix(in srgb, var(--hisd-dark-grey) 16%, transparent); } .sn-school-year-toggle__segment:active:not(:disabled) { transform: translateY(1px); } .sn-school-year-toggle__segment[aria-checked="true"] { border-color: var(--sn-school-year-toggle-segment-active-border); background: var(--sn-school-year-toggle-segment-active-bg); color: var(--sn-school-year-toggle-segment-active-text); font-weight: 800; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hisd-white) 24%, transparent), 0 0.32rem 0.8rem color-mix(in srgb, var(--hisd-dark-grey) 18%, transparent), 0 1px 0 color-mix(in srgb, var(--hisd-white) 12%, transparent), 0 0 0 1px var(--sn-school-year-toggle-segment-active-glow); } .sn-school-year-toggle__segment[aria-checked="true"] .sn-school-year-toggle__label { color: var(--hisd-white); font-weight: 800; } .sn-school-year-toggle__segment:disabled { background: var(--sn-school-year-toggle-disabled-bg); color: var(--sn-school-year-toggle-disabled-text); border-color: var(--sn-school-year-toggle-disabled-border); cursor: progress; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hisd-white) 58%, transparent), 0 0.12rem 0.28rem color-mix(in srgb, var(--hisd-dark-grey) 6%, transparent); } .sn-school-year-toggle__segment:focus-visible { outline: 2px solid var(--sn-school-year-toggle-focus-ring); outline-offset: 2px; } .sn-school-year-toggle__label { display: inline-flex; align-items: center; justify-content: center; align-self: center; min-inline-size: max-content; flex: 0 0 auto; line-height: 1; transform: translateY(var(--sn-school-year-toggle-label-optical-offset)); white-space: nowrap; } .sn-school-year-toggle__indicator { display: inline-flex; align-self: center; flex: 0 0 auto; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--hisd-dark-grey) 60%, var(--hisd-light-grey) 40%); background: var(--sn-school-year-toggle-indicator-inactive); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hisd-white) 82%, transparent); opacity: 0.88; transform: scale(0.82); transition: opacity 140ms ease, transform 140ms ease, background-color 140ms ease, border-color 140ms ease; } .sn-school-year-toggle__segment[aria-checked="true"] .sn-school-year-toggle__indicator { background: var(--sn-school-year-toggle-indicator-bg); border-color: var(--sn-school-year-toggle-indicator-border); opacity: 1; transform: scale(1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hisd-white) 36%, transparent); } .sn-school-year-toggle[data-state="loading"] .sn-school-year-toggle__group { background: linear-gradient( 180deg, color-mix(in srgb, var(--hisd-white) 90%, transparent) 0%, color-mix(in srgb, var(--hisd-white) 80%, transparent) 100% ), var(--sn-school-year-toggle-bg-elevated); box-shadow: inset 0 3px 6px color-mix(in srgb, var(--hisd-dark-grey) 16%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--hisd-teal) 8%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--hisd-white) 38%, transparent); } .sn-school-year-toggle[data-state="loading"] .sn-school-year-toggle__shell, .sn-school-year-toggle[data-state="switching"] .sn-school-year-toggle__shell { box-shadow: 0 0.38rem 0.88rem var(--sn-school-year-toggle-shell-shadow), inset 0 1px 0 color-mix(in srgb, var(--hisd-white) 52%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--hisd-teal) 4%, transparent); } .sn-school-year-toggle[data-state="loading"] .sn-school-year-toggle__segment { background: var(--sn-school-year-toggle-disabled-bg); color: var(--sn-school-year-toggle-disabled-text); border-color: var(--sn-school-year-toggle-disabled-border); } .sn-school-year-toggle[data-state="loading"] .sn-school-year-toggle__segment .sn-school-year-toggle__indicator { background: color-mix(in srgb, var(--hisd-dark-grey) 56%, var(--hisd-light-grey) 44%); border-color: color-mix(in srgb, var(--hisd-dark-grey) 48%, var(--hisd-light-grey) 52%); opacity: 0.85; } .sn-school-year-toggle[data-state="loading"] .sn-school-year-toggle__segment[aria-checked="true"] { background: color-mix(in srgb, var(--hisd-white) 44%, var(--hisd-teal-tint-80W) 56%); color: color-mix(in srgb, var(--hisd-dark-grey) 72%, var(--hisd-teal-shade-20B) 28%); border-color: color-mix(in srgb, var(--hisd-white) 18%, var(--hisd-teal-tint-60W) 82%); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hisd-white) 58%, transparent), 0 0.16rem 0.35rem color-mix(in srgb, var(--hisd-dark-grey) 8%, transparent); } .sn-school-year-toggle[data-state="loading"] .sn-school-year-toggle__segment[aria-checked="true"] .sn-school-year-toggle__indicator { background: var(--sn-school-year-toggle-disabled-indicator); border-color: color-mix(in srgb, var(--hisd-white) 22%, var(--hisd-teal-tint-60W) 78%); box-shadow: none; } .sn-school-year-toggle[data-state="switching"] .sn-school-year-toggle__group { background: linear-gradient( 180deg, color-mix(in srgb, var(--hisd-white) 92%, transparent) 0%, color-mix(in srgb, var(--hisd-white) 80%, transparent) 100% ), var(--sn-school-year-toggle-bg-elevated); box-shadow: inset 0 3px 6px color-mix(in srgb, var(--hisd-dark-grey) 16%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--hisd-teal) 8%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--hisd-white) 38%, transparent); } .sn-school-year-toggle[data-state="switching"] .sn-school-year-toggle__segment[aria-checked="true"] { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hisd-white) 18%, transparent), 0 0.2rem 0.45rem color-mix(in srgb, var(--hisd-dark-grey) 12%, transparent); } .sn-school-year-toggle[data-state="switching"] .sn-school-year-toggle__segment:disabled { background: var(--sn-school-year-toggle-segment-bg); color: var(--sn-school-year-toggle-segment-muted); border-color: var(--sn-school-year-toggle-segment-border); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hisd-white) 80%, transparent), 0 0.18rem 0.42rem color-mix(in srgb, var(--hisd-dark-grey) 10%, transparent); } .sn-school-year-toggle[data-state="switching"] .sn-school-year-toggle__segment[aria-checked="true"]:disabled { background: var(--sn-school-year-toggle-segment-active-bg); color: var(--sn-school-year-toggle-segment-active-text); border-color: var(--sn-school-year-toggle-segment-active-border); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hisd-white) 24%, transparent), 0 0.24rem 0.55rem color-mix(in srgb, var(--hisd-dark-grey) 14%, transparent), 0 0 0 1px var(--sn-school-year-toggle-segment-active-glow); } .sn-school-year-toggle[data-state="switching"] .sn-school-year-toggle__segment[aria-checked="true"]:disabled .sn-school-year-toggle__label { color: var(--hisd-white); } .sn-school-year-toggle[data-state="switching"] .sn-school-year-toggle__segment .sn-school-year-toggle__indicator { background: var(--sn-school-year-toggle-indicator-inactive); border-color: color-mix(in srgb, var(--hisd-dark-grey) 60%, var(--hisd-light-grey) 40%); opacity: 0.88; } .sn-school-year-toggle[data-state="switching"] .sn-school-year-toggle__segment[aria-checked="true"]:disabled .sn-school-year-toggle__indicator { background: var(--sn-school-year-toggle-indicator-bg); border-color: var(--sn-school-year-toggle-indicator-border); opacity: 1; } @media (max-width: 640px) { .sn-school-year-toggle { inline-size: 100%; max-inline-size: 16.5rem; min-inline-size: 0; } .sn-school-year-toggle__shell { gap: 0.4rem; padding-inline: 0.32rem; padding-block: 0.22rem; } .sn-school-year-toggle__title { font-size: 0.68rem; letter-spacing: 0; } .sn-school-year-toggle__group { min-block-size: 2.625rem; gap: 0.25rem; padding: 0.18rem; } .sn-school-year-toggle__segment { min-block-size: 2.15rem; gap: 0.32rem; padding-inline: 0.55rem; font-size: 0.81rem; } } @media (prefers-reduced-motion: reduce) { html.sn-supports-reduced-motion .sn-school-year-toggle__segment, html.sn-supports-reduced-motion .sn-school-year-toggle__indicator { transition: none; } } @media (forced-colors: active) { .sn-school-year-toggle__shell { border-color: ButtonText; background: Canvas; box-shadow: none; forced-color-adjust: auto; } .sn-school-year-toggle__title { color: ButtonText; } .sn-school-year-toggle__group { border-color: ButtonText; background: Canvas; box-shadow: none; forced-color-adjust: auto; } .sn-school-year-toggle__segment { border-color: transparent; color: ButtonText; background: Canvas; } .sn-school-year-toggle__segment[aria-checked="true"] { border-color: Highlight; background: Highlight; color: HighlightText; } .sn-school-year-toggle__segment:focus-visible { outline-color: Highlight; } .sn-school-year-toggle__indicator { border-color: currentColor; background: transparent; opacity: 1; transform: none; } .sn-school-year-toggle__segment[aria-checked="true"] .sn-school-year-toggle__indicator { background: HighlightText; border-color: HighlightText; } } /* #endregion SN-UI-SCHOOL-YEAR-TOGGLE */ /* ======================================================================================================= */ /* ================================================================================================= */ /* ======================================================================================================= */ /* ================================================================================================= */ /* #region SN-UI-CUSTOM-DROPDOWN v1.0.0 | School Navigator: Custom Dropdown */ /* Summary: Styles the shared structural dropdown skeleton used by app-owned custom selection controls. */ /* Contents: */ /* - dropdown root */ /* - dropdown toggle */ /* - dropdown list */ /* - dropdown options */ /* ================================================================================================= */ /* Root dropdown container */ .custom-dropdown { position: relative; width: auto; font-family: inherit; font-size: 1rem; user-select: none; } /* Dropdown toggle (button) */ .custom-dropdown .dropdown-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; cursor: pointer; background: none; border: none; outline: none; } /* Label within toggle */ .custom-dropdown .selected-label { flex: 1 1 auto; text-align: left; } /* Dropdown icon */ .custom-dropdown .dropdown-icon { display: inline-block; } /* Dropdown list: hidden by default, shown on .open */ .custom-dropdown .dropdown-list { position: absolute; left: 0; top: 100%; width: 100%; z-index: 1000; display: none; flex-direction: column; } .custom-dropdown.open .dropdown-list { display: flex; } /* Section headers */ .dropdown-section-header { width: 100%; display: flex; align-items: center; } /* Dropdown options (button for each) */ .dropdown-option { width: 100%; display: flex; align-items: center; text-align: left; border: none; background: none; cursor: pointer; outline: none; } /* #endregion SN-UI-CUSTOM-DROPDOWN */ /* ================================================================================================= */ /* ================================================================================================= */ /* ================================================================================================= */ /* ================================================================================================= */ /* #region SN-UI-FILTER-PANE-SKELETON v1.0.0 | School Navigator: Filter Pane Skeleton */ /* Summary: Defines shared filter-pane structural tokens, spacing, and row-level layout hooks. */ /* Contents: */ /* - pane-level variables */ /* - header and title layout */ /* - chip row and body structure */ /* - responsive pane behavior */ /* ================================================================================================= */ :root { --filter-row-gap: 8px; --hisd-teal: #00A3AF; } .filter-pane.control-pane { display: flex; flex-direction: row; align-items: stretch; overflow: unset; gap: var(--filter-row-gap); padding: 10px; } /* Filter header row: horizontal, left-aligned, vertically centered */ .filters-header-row.filter-title { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex: 0 0 auto; } .sn-pane__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; } .sn-pane__header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; } .sn-grade-filter__title { margin: 0; white-space: nowrap; text-align: left; } /* Form: row-first, wraps chips, full width */ .filter-form { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--filter-row-gap); width: 100%; margin-block-end: 0px !important; } /* Grade filter: natural size, aligns start */ .grade-filter-container { display: flex; align-items: center; justify-content: flex-start; flex: 0 1 auto; min-width: 120px; max-width: 320px; } .grade-filter-container select { width: 100%; font-size: 1rem; padding: 6px 10px; border-radius: 6px; border: 1.5px solid #ddeef3; background: #f7fafc; color: #24383C; } /* Level chips: row, wrap as needed, all same min-width, natural width otherwise */ .level-chips-group { display: flex; flex-wrap: wrap; gap: var(--filter-row-gap); } .level-chips-group .control-chip.level-chip { min-width: 110px; margin: 0; justify-content: center; text-align: center; /* Don't force equal width by default */ } /* === Responsive: Stack vertically on small panes === */ @container (max-width: 700px) { .filter-form { flex-direction: column; align-items: stretch; gap: 8px; } .grade-filter-container, .level-chips-group { width: 100%; margin: 0 auto; max-width: 100%; } .level-chips-group { flex-direction: column; align-items: center; gap: 6px; } .level-chips-group .control-chip.level-chip { width: 100%; min-width: 0; justify-content: center; } } /* #endregion SN-UI-FILTER-PANE-SKELETON */ /* ================================================================================================= */ /* ================================================================================================= */ /* ================================================================================================= */ /* ================================================================================================= */ /* #region SN-UI-GRADE-FILTER-DROPDOWN v1.0.0 | School Navigator: Grade Filter Dropdown */ /* Summary: Styles the custom grade-filter dropdown shell, grouped options, and selection states. */ /* Contents: */ /* - dropdown tokens */ /* - toggle shell */ /* - grouped option list */ /* - option state styling */ /* ================================================================================================= */ :root { --grade-dropdown-width: 222px; --grade-dropdown-shadow: 0 2.5px 14px rgba(30,30,30,0.10), 0 1px 4px rgba(30,30,30,0.06); --grade-list-shadow: 0 5px 24px rgba(0,32,48,0.13), 0 1.5px 8px rgba(30,30,30,0.08); --grade-toggle-height: 38px; --grade-option-height: 28px; --grade-dropdown-radius: 999px; --grade-list-radius: 0 0 14px 14px; --grade-list-bg: color-mix(in srgb, var(--hisd-teal, #00A3AF) 9%, #000 91%); } /* --- Dropdown container --- */ .grade-filter-dropdown { position: relative; width: var(--grade-dropdown-width); font-family: inherit; font-size: 1rem; user-select: none; } /* --- Dropdown toggle (button) --- */ .grade-filter-dropdown .dropdown-toggle { width: 100%; height: var(--grade-toggle-height); border-radius: var(--grade-dropdown-radius); background: color-mix(in srgb, var(--hisd-teal, #00A3AF) 67%, #fff 33%); color: #fff; font-weight: 700; font-size: 1em; border: none; box-shadow: var(--grade-dropdown-shadow); display: flex; align-items: center; padding: 0 22px 0 17px; letter-spacing: 0.01em; transition: box-shadow 0.16s, background 0.16s; outline: none; cursor: pointer; gap: 8px; } .grade-filter-dropdown .dropdown-toggle:focus, .grade-filter-dropdown .dropdown-toggle:hover { background: color-mix(in srgb, var(--hisd-teal, #00A3AF) 80%, #fff 20%); box-shadow: 0 7px 14px rgba(0,0,0,0.12); } /* --- Selected label in toggle --- */ .grade-filter-dropdown .selected-label { flex: 1 1 auto; text-align: left; font-weight: 700; color: #fff; } /* --- Dropdown arrow/icon --- */ .grade-filter-dropdown .dropdown-icon { font-size: 2em; margin-left: 7px; color: #fff; display: flex; align-items: center; line-height: 1; } /* --- Dropdown list: hidden by default, shown on .open --- */ .grade-filter-dropdown .dropdown-list { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 80%; min-width: 140px; max-width: calc(var(--grade-dropdown-width) * 0.8); background: var(--grade-list-bg, transparent); border: none; border-radius: var(--grade-list-radius); z-index: 1000; padding: 0; box-shadow: var(--grade-list-shadow); display: none; flex-direction: column; gap: 0; backdrop-filter: blur(22px) saturate(210%); -webkit-backdrop-filter: blur(22px) saturate(210%); color: #fff; overflow: hidden; } .grade-filter-dropdown.open .dropdown-list { display: flex; } /* --- Spacer for top padding --- */ .dropdown-spacer { width: 100%; height: 8px; pointer-events: none; background: transparent; } /* --- Section header --- */ .dropdown-section-header { width: 100%; font-weight: 800; font-size: 0.8em; color: #fff; background: color-mix(in srgb, var(--section-color, var(--hisd-teal, #00A3AF)) 88%, #fff 12%); border: none; border-radius: 0; margin: 0; padding: 0 13px; min-height: var(--grade-option-height); display: flex; align-items: center; backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); opacity: 0.93; box-sizing: border-box; } #gradeSectionECC { --section-color: var(--level-ecc-color); } #gradeSectionES { --section-color: var(--level-es-color); } #gradeSectionMS { --section-color: var(--level-ms-color); } #gradeSectionHS { --section-color: var(--level-hs-color); } /* --- Dropdown options: subtle border, no growth, modern hover --- */ .dropdown-option { width: 100%; border: none; border-radius: 0; height: var(--grade-option-height); display: flex; align-items: center; font-weight: 500; font-size: 0.99em; background: color-mix(in srgb, var(--option-color, #bdbdbd) 9%, #fff 91%); color: var(--hisd-dark-grey, #24383C); cursor: pointer; outline: none; transition: background 0.14s, color 0.14s, font-weight 0.15s, border-color 0.14s; padding: 0 14px 0 25px; text-align: left; margin: 0; border-bottom: 1px solid rgba(36,56,60,0.055); /* Ultra subtle divider */ backdrop-filter: blur(10px) saturate(115%); -webkit-backdrop-filter: blur(10px) saturate(115%); opacity: 0.91; box-sizing: border-box; } .dropdown-option:last-child { border-bottom: none; } #gradeEE, #gradePK { --option-color: var(--level-ecc-color); } #grade1, #grade2, #grade3, #grade4, #grade5 { --option-color: var(--level-es-color); } #grade6, #grade7, #grade8 { --option-color: var(--level-ms-color); } #grade9, #grade10, #grade11, #grade12 { --option-color: var(--level-hs-color); } /* --- On hover/focus: 10% darker, bold font, border a bit stronger, NO growth --- */ .dropdown-option:hover, .dropdown-option:focus { background: color-mix(in srgb, var(--option-color, #bdbdbd) 19%, #fff 81%); color: var(--hisd-dark-grey, #24383C); font-weight: 700; opacity: 1; margin: 0; width: 100%; border-bottom: 1px solid rgba(36,56,60,0.11); /* A bit more visible on hover */ z-index: 2; } /* --- Selected option: strong bg and font, NO growth --- */ .dropdown-option[aria-selected="true"] { background: color-mix(in srgb, var(--section-color, var(--hisd-teal, #00A3AF)) 80%, #000 20%); color: #fff; font-weight: 700; opacity: 1; margin: 0; width: 100%; border-bottom: 1px solid rgba(36,56,60,0.11); z-index: 2; } /* --- Irrelevant: dull everything --- */ .irrelevant { opacity: 0.98; filter: grayscale(0.10) brightness(0.97) saturate(0.91) contrast(0.97); position: relative; transition: filter 0.18s, opacity 0.18s; } .irrelevant::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(230,230,230,0.10) 0%, rgba(180,180,180,0.08) 100% ); pointer-events: none; z-index: 1; border-radius: inherit; } /* #endregion SN-UI-GRADE-FILTER-DROPDOWN */ /* ================================================================================================= */ /* ================================================================================================================ */ /* ========================================================================================= */ /* ================================================================================================================ */ /* #region SN-UI-SCHOOL-CHOICE-FILTER v1.0.5 | School Navigator: School Choice Filter */ /* Summary: Styles the app School Choice pane, grouped controls, and magnet-context accent states. */ /* Contents: */ /* - pane shell */ /* - grouped row-filling option chip flow */ /* - clear action */ /* - magnet-context accent treatment */ /* ================================================================================================================ */ .school-choice-pane { width: 100%; max-width: 360px; min-width: 260px; padding: 6px 16px; margin: 0; display: none; border-radius: 18px; box-shadow: 0 8px 32px rgba(0, 163, 175, 0.10), 0 4px 18px rgba(0,0,0,0.11), 0 0.5px 2.5px rgba(0,0,0,0.06); } .school-choice-filter-body { display: flex; flex-direction: column; gap: 5px; width: 100%; margin-top: 4px; } .school-choice-group { display: flex; flex-direction: column; gap: 3px; width: 100%; } .school-choice-group-title { margin: 0; color: var(--filter-pane-title-color, color-mix(in srgb, var(--theme-accent-solid) 68%, var(--theme-text-primary) 32%)); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.045em; line-height: 1.15; text-transform: uppercase; opacity: 0.8; } .school-choice-options { container-type: inline-size; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: flex-start; min-width: 0; max-width: 100%; overflow: hidden; overflow: clip; scrollbar-width: none !important; } .school-choice-options::-webkit-scrollbar { display: none; } .school-choice-group--school-flag .school-choice-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } .school-choice-group--school-flag .school-choice-option { width: 100%; min-width: 0; max-width: 100%; padding-inline: 0.5rem; } .school-choice-strand-group { gap: 5px; } .school-choice-strand-toggle { padding-left: 1rem; border-radius: 14px; } .school-choice-strand-content { padding: 0.22em 0 0 0.75rem; margin: 0; } .school-choice-option { --chip-bg: var(--hisd-teal, #00A3AF); --chip-fg: #ffffff; --chip-rest-bg: var(--chip-bg); --chip-rest-border: color-mix(in srgb, var(--chip-bg) 76%, #0f4f58 24%); --chip-hover-bg: color-mix(in srgb, var(--chip-bg) 82%, #0f4f58 18%); --chip-hover-border: color-mix(in srgb, var(--chip-bg) 68%, #0f4f58 32%); --chip-selected-bg: color-mix(in srgb, var(--chip-bg) 62%, #0f4f58 38%); --chip-selected-border: color-mix(in srgb, var(--chip-bg) 48%, #0f4f58 52%); --chip-selected-fg: #ffffff; font-size: 0.86rem; font-size: clamp(0.82rem, 3.8cqw, 0.92rem); font-weight: 700; line-height: 1.05; color: var(--chip-fg, var(--theme-accent-solid, #00A3AF)) !important; background: var(--chip-rest-bg) !important; border-color: var(--chip-rest-border) !important; position: relative; display: inline-flex; align-items: center; flex: 1 1 max-content; justify-content: center; text-align: center; white-space: nowrap; overflow: hidden; overflow-wrap: normal; word-break: normal; text-overflow: ellipsis; letter-spacing: 0; width: auto; min-width: 0; max-width: 100%; min-height: 1.78rem; padding: 0.2rem clamp(0.58rem, 2cqw, 0.78rem); border-radius: 11px; box-shadow: none !important; transform: none !important; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease !important; } .school-choice-option--with-icon { padding-left: 2.06rem; padding-right: 1.55rem; } .school-choice-option--with-icon .sn-chip-icon-badge { position: absolute; left: 0.36rem; top: 50%; transform: translateY(-50%); } .school-choice-option .chip-label { min-width: 0; justify-self: center; text-align: center; overflow: hidden; text-overflow: ellipsis; } .school-choice-option:hover, .school-choice-option:focus-visible { background: var(--chip-hover-bg) !important; border-color: var(--chip-hover-border) !important; transform: none !important; } .school-choice-option.control-chip:hover, .school-choice-option.control-chip:focus-visible, .school-choice-option.control-chip:active, .school-choice-option.control-chip.selected:hover, .school-choice-option.control-chip.selected:focus-visible, .school-choice-option.control-chip[aria-pressed="true"]:hover, .school-choice-option.control-chip[aria-pressed="true"]:focus-visible { transform: none !important; } .school-choice-option.selected, .school-choice-option[aria-pressed="true"] { --chip-fg: var(--chip-selected-fg); color: var(--chip-selected-fg, #ffffff) !important; background: var(--chip-selected-bg) !important; border-color: var(--chip-selected-border) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; transform: none !important; } .school-choice-option.selected:hover, .school-choice-option.selected:focus-visible, .school-choice-option[aria-pressed="true"]:hover, .school-choice-option[aria-pressed="true"]:focus-visible { background: color-mix(in srgb, var(--chip-selected-bg) 76%, #0f4f58 24%) !important; border-color: color-mix(in srgb, var(--chip-selected-border) 76%, #0f4f58 24%) !important; color: var(--chip-selected-fg, #ffffff) !important; } @media (max-width: 700px) { .school-choice-pane { max-width: 100%; min-width: 0; } .school-choice-options { gap: 6px; } .school-choice-group--school-flag .school-choice-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } .school-choice-option { width: auto; max-width: 100%; justify-content: stretch; white-space: nowrap; } } /* #endregion SN-UI-SCHOOL-CHOICE-FILTER */ /* ================================================================================================================ */ /* ================================================================================================================ */ /* ================================================================================================================ */ /* ================================================================================================================ */ /* #region SN-UI-SURFACE-HOST v1.0.0 | School Navigator: Surface Host Styles */ /* Summary: Owns reusable app surface-shell sizing, mode semantics, and host-level scroll behavior. */ /* Contents: */ /* - shell sizing */ /* - shell chrome */ /* - host body scroll */ /* - mode tokens */ /* ================================================================================================================ */ .sn-surface-host { --sn-surface-width: min(100%, 360px); --sn-surface-max-width: 360px; --sn-surface-radius: 20px; --sn-surface-max-height: min(62vh, calc(100% - 8px)); --sn-surface-accent: var(--theme-accent-solid); --sn-surface-border: color-mix(in srgb, var(--sn-surface-accent) 28%, var(--theme-border) 72%); --sn-surface-border-strong: color-mix(in srgb, var(--sn-surface-accent) 42%, var(--theme-border) 58%); --sn-surface-glow: color-mix(in srgb, var(--sn-surface-accent) 12%, transparent 88%); --sn-surface-shell-bg: linear-gradient( 180deg, color-mix(in srgb, var(--theme-surface-elevated) 88%, var(--sn-surface-accent) 12%), color-mix(in srgb, var(--theme-surface-primary) 94%, var(--sn-surface-accent) 6%) ); --sn-surface-body-bg: color-mix(in srgb, var(--theme-surface-elevated) 74%, var(--sn-surface-accent) 26%); width: var(--sn-surface-width); max-width: var(--sn-surface-max-width); min-width: 0; padding: 6px 16px; margin: 0; display: none; border-radius: var(--sn-surface-radius); box-sizing: border-box; max-height: var(--sn-surface-max-height); overflow: hidden; } .sn-surface-host[data-sn-surface-mode="panel"] { --sn-surface-width: min(100%, 360px); --sn-surface-max-width: 360px; --sn-surface-radius: 20px; } .sn-surface-host[data-sn-surface-mode="drawer"] { --sn-surface-width: min(100%, 420px); --sn-surface-max-width: 420px; --sn-surface-radius: 24px 24px 0 0; } .sn-surface-host[data-sn-surface-mode="bar"] { --sn-surface-width: min(100%, 100%); --sn-surface-max-width: 100%; --sn-surface-radius: 18px; --sn-surface-max-height: min(28vh, 18rem); } .sn-surface-host[data-sn-surface-mode="card"] { --sn-surface-width: min(100%, 28rem); --sn-surface-max-width: 28rem; --sn-surface-radius: 24px; } .sn-surface-host[data-sn-surface-mode="sheet"] { --sn-surface-width: min(100%, 34rem); --sn-surface-max-width: 34rem; --sn-surface-radius: 24px 24px 0 0; } .sn-surface-host[data-sn-surface-mode="inline"] { --sn-surface-width: min(100%, 100%); --sn-surface-max-width: 100%; --sn-surface-radius: 18px; --sn-surface-max-height: none; } .sn-surface-host.program-pane { --sn-surface-max-height: none; max-height: none; overflow: visible; border: 1px solid var(--sn-surface-border) !important; background: var(--sn-surface-shell-bg) !important; box-shadow: var(--theme-shadow-md), 0 0 0 1px color-mix(in srgb, var(--sn-surface-border-strong) 78%, transparent 22%), 0 0 1.4rem var(--sn-surface-glow) !important; } .sn-surface-host.program-pane .sn-surface-host__body[data-sn-surface-scroll-owner="group"] { flex: 0 0 auto; overflow: visible; } .sn-surface-host__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; background: transparent; border: none; border-radius: 16px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--sn-accordion-scroll-accent, var(--sn-surface-accent)) 78%, var(--theme-accent-solid) 22%) color-mix(in srgb, var(--theme-surface-strong) 88%, transparent 12%); } .sn-surface-host__body::-webkit-scrollbar { width: 11px; } .sn-surface-host__body::-webkit-scrollbar-track { background: color-mix(in srgb, var(--theme-surface-strong) 90%, transparent 10%); border-left: 1px solid color-mix(in srgb, var(--sn-surface-border) 52%, transparent 48%); } .sn-surface-host__body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, color-mix(in srgb, var(--sn-accordion-scroll-accent, var(--sn-surface-accent)) 58%, var(--theme-accent-solid) 42%), var(--sn-accordion-scroll-accent, var(--sn-surface-accent))); border: 2px solid color-mix(in srgb, var(--theme-surface-elevated) 92%, transparent 8%); border-radius: 999px; } .sn-surface-host__body::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--sn-accordion-scroll-accent, var(--sn-surface-accent)) 62%, var(--theme-accent-solid-hover) 38%), color-mix(in srgb, var(--sn-accordion-scroll-accent, var(--sn-surface-accent)) 78%, #10284f 22%)); } .flex-row { display: flex; flex-direction: row; } .flex-col { display: flex; flex-direction: column; } .flex-wrap { flex-wrap: wrap; } /* ================================================================================================================ */ /* #endregion SN-UI-SURFACE-HOST */ /* ================================================================================================================ */ /* ================================================================================================================ */ /* ================================================================================================================ */ /* #region SN-UI-SEAT-AVAILABILITY-FILTER v1.0.0 | School Navigator: Seat Availability Filter Styles */ /* Summary: Styles the Seat Availability right-rail pane, scope/status chips, and shared chip icon badges. */ /* Contents: */ /* - seat availability pane */ /* - scope and status chip rows */ /* - availability color scale */ /* - circular chip icon badges */ /* ================================================================================================================ */ :root { --sn-seat-open: #4f9568; --sn-seat-limited: #8b8f3e; --sn-seat-waitlist: #b8792b; --sn-seat-long-waitlist: #aa4f47; --sn-seat-scope-pk: color-mix(in srgb, var(--theme-accent-solid) 56%, var(--sn-seat-open) 44%); --sn-seat-scope-k12: color-mix(in srgb, var(--theme-accent-solid) 58%, #52636f 42%); --sn-choice-seat-open: var(--sn-seat-open); --sn-choice-seat-limited: var(--sn-seat-limited); --sn-choice-seat-waitlist: var(--sn-seat-waitlist); --sn-choice-seat-long_waitlist: var(--sn-seat-long-waitlist); --sn-choice-seat-open-icon: color-mix(in srgb, var(--sn-seat-open) 68%, var(--hisd-dark-grey, #24383c) 32%); --sn-choice-seat-limited-icon: color-mix(in srgb, var(--sn-seat-limited) 68%, var(--hisd-dark-grey, #24383c) 32%); --sn-choice-seat-waitlist-icon: color-mix(in srgb, var(--sn-seat-waitlist) 68%, var(--hisd-dark-grey, #24383c) 32%); --sn-choice-seat-long_waitlist-icon: color-mix(in srgb, var(--sn-seat-long-waitlist) 68%, var(--hisd-dark-grey, #24383c) 32%); } .sn-surface-host.seat-availability-pane, .seat-availability-pane.control-pane { --sn-surface-accent: var(--sn-seat-open); width: 100%; max-width: 360px; min-width: 260px; padding: 6px 16px; margin: 0; display: flex; flex-direction: column; gap: 0; border-radius: 18px; border: 1px solid var(--sn-surface-border, var(--theme-border)) !important; background: var(--sn-surface-shell-bg, var(--filter-pane-bg)) !important; box-shadow: var(--theme-shadow-md), 0 0 0 1px color-mix(in srgb, var(--sn-surface-border-strong, var(--theme-border-strong)) 76%, transparent 24%), 0 0 1.1rem color-mix(in srgb, var(--sn-seat-open) 18%, transparent 82%) !important; } .seat-availability-filter-body { display: flex; flex-direction: column; gap: 5px; width: 100%; margin-top: 4px; padding: 0; overflow: visible; } .seat-availability-group { display: flex; flex-direction: column; gap: 3px; width: 100%; } .seat-availability-group-title { margin: 0; color: var(--filter-pane-title-color, color-mix(in srgb, var(--theme-accent-solid) 68%, var(--theme-text-primary) 32%)); font-family: inherit; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.045em; line-height: 1.15; text-transform: uppercase; opacity: 0.8; } .seat-availability-options { container-type: inline-size; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 5px; min-width: 0; max-width: 100%; overflow: hidden; overflow: clip; scrollbar-width: none !important; } .seat-availability-options::-webkit-scrollbar { display: none; } .seat-availability-chip { --chip-bg: var(--sn-seat-open); --chip-fg: #fff; --sn-selected-dot-fill: var(--hisd-yellow, #F9D04E); --sn-selected-dot-ring: color-mix(in srgb, var(--hisd-yellow, #F9D04E) 70%, #ffffff 30%); font-size: 0.86rem; font-size: clamp(0.82rem, 3.8cqw, 0.92rem); font-weight: 700; line-height: 1.05; color: var(--chip-fg) !important; background: var(--chip-bg) !important; border-color: color-mix(in srgb, var(--chip-bg) 76%, #0f4f58 24%) !important; position: relative; display: inline-flex; align-items: center; flex: 1 1 max-content; justify-content: center; min-height: 1.78rem; min-width: 0; width: 100%; max-width: 100%; padding: 0.2rem 1.55rem 0.2rem 2.06rem; border-radius: 11px; text-align: center; white-space: nowrap; overflow: hidden; overflow-wrap: normal; word-break: normal; text-overflow: ellipsis; } .seat-availability-options > .seat-availability-chip:last-child:nth-child(odd) { grid-column: 1 / -1; } .seat-availability-chip .chip-label { margin-left: 0.16rem; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; font-weight: 700; } .seat-availability-chip .sn-chip-icon-badge { position: absolute; left: 0.36rem; top: 50%; transform: translateY(-50%); } .seat-availability-status-helper { margin: 0.02rem 0 0; color: color-mix(in srgb, var(--theme-text-primary) 72%, var(--filter-pane-title-color, var(--theme-accent-solid)) 28%); font-size: 0.72rem; font-weight: 700; line-height: 1.18; text-align: center; } .seat-availability-chip--pk { --chip-bg: var(--sn-seat-scope-pk); } .seat-availability-chip--k12 { --chip-bg: var(--sn-seat-scope-k12); } .seat-availability-chip--open { --chip-bg: var(--sn-seat-open); } .seat-availability-chip--limited { --chip-bg: var(--sn-seat-limited); } .seat-availability-chip--waitlist { --chip-bg: var(--sn-seat-waitlist); } .seat-availability-chip--long-waitlist { --chip-bg: var(--sn-seat-long-waitlist); } .seat-availability-chip--limited, .seat-availability-chip--waitlist, .seat-availability-chip--long-waitlist { --sn-selected-dot-fill: #ffffff; --sn-selected-dot-ring: var(--hisd-yellow, #F9D04E); } .sn-chip-icon-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 1.36rem; width: 1.36rem; height: 1.36rem; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)), color-mix(in srgb, var(--chip-bg, var(--theme-accent-solid)) 68%, var(--hisd-dark-grey, #24383c) 32%); box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 28%, transparent 72%), 0 0.12rem 0.32rem color-mix(in srgb, #06131f 24%, transparent 76%); color: #fff; } .sn-chip-selected-dot { display: inline-flex; flex: 0 0 0.62rem; inline-size: 0.62rem; block-size: 0.62rem; justify-self: end; border-radius: 999px; border: 2px solid color-mix(in srgb, #ffffff 70%, transparent 30%); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, #06131f 12%, transparent 88%); opacity: 0.72; } .school-choice-option .sn-chip-selected-dot, .seat-availability-chip .sn-chip-selected-dot { position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%); } .school-choice-option[aria-pressed="true"] .sn-chip-selected-dot, .school-choice-option.selected .sn-chip-selected-dot { border-color: color-mix(in srgb, var(--hisd-yellow, #F9D04E) 82%, #ffffff 18%); background: var(--hisd-yellow, #F9D04E); opacity: 1; box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 34%, transparent 66%), 0 0.1rem 0.28rem color-mix(in srgb, #06131f 24%, transparent 76%); } .seat-availability-chip[aria-pressed="true"] .sn-chip-selected-dot, .seat-availability-chip.selected .sn-chip-selected-dot { border-color: var(--sn-selected-dot-ring); background: var(--sn-selected-dot-fill); opacity: 1; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--chip-bg, var(--theme-accent-solid)) 68%, var(--hisd-dark-grey, #24383c) 32%), 0 0.1rem 0.28rem color-mix(in srgb, #06131f 24%, transparent 76%); } .sn-chip-icon-badge .sn-icon { width: 0.96rem; height: 0.96rem; color: currentColor; } .sn-choice-seats { display: flex; flex-direction: column; gap: 7px; width: 100%; min-width: 0; } .sn-choice-seats--list { margin: 8px 0 10px; } .sn-choice-seats--profile { margin: 2px 0 4px; } .sn-choice-seats__heading { color: color-mix(in srgb, var(--infocard-level-color, var(--List-Item-header-bg, var(--theme-accent-solid))) 76%, var(--theme-text-primary, #24383C) 24%); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.095em; line-height: 1.05; text-transform: uppercase; } .sn-choice-seats--profile .sn-choice-seats__heading { color: var(--infocard-level-color, var(--theme-accent-solid)); font-size: 0.92rem; letter-spacing: 0; text-transform: none; } .sn-choice-seats__stack { display: flex; flex-direction: column; gap: 7px; width: 100%; } .sn-choice-seat-pill { --sn-choice-seat-status-fill: var(--sn-choice-seat-open); --sn-choice-seat-icon-fill: var(--sn-choice-seat-open-icon); --sn-choice-seat-header-color: var(--infocard-level-color, var(--List-Item-header-bg, var(--theme-accent-solid))); display: grid; grid-template-columns: minmax(82px, 0.92fr) minmax(0, 1.62fr); width: 100%; min-height: 43px; overflow: hidden; border-radius: 13px; box-shadow: 0 0.14rem 0.42rem color-mix(in srgb, #06131f 16%, transparent 84%), inset 0 0 0 1px color-mix(in srgb, #ffffff 12%, transparent 88%); } .sn-choice-seat-pill, .sn-choice-seat-pill * { color: #fff; } .sn-choice-seat-pill--open { --sn-choice-seat-status-fill: var(--sn-choice-seat-open); --sn-choice-seat-icon-fill: var(--sn-choice-seat-open-icon); } .sn-choice-seat-pill--limited { --sn-choice-seat-status-fill: var(--sn-choice-seat-limited); --sn-choice-seat-icon-fill: var(--sn-choice-seat-limited-icon); } .sn-choice-seat-pill--waitlist { --sn-choice-seat-status-fill: var(--sn-choice-seat-waitlist); --sn-choice-seat-icon-fill: var(--sn-choice-seat-waitlist-icon); } .sn-choice-seat-pill--long_waitlist { --sn-choice-seat-status-fill: var(--sn-choice-seat-long_waitlist); --sn-choice-seat-icon-fill: var(--sn-choice-seat-long_waitlist-icon); } .sn-choice-seat-pill__type, .sn-choice-seat-pill__status { display: flex; align-items: center; min-width: 0; } .sn-choice-seat-pill__type { justify-content: center; padding: 0 8px; color: #fff; background: color-mix(in srgb, var(--sn-choice-seat-header-color) 40%, #000 60%); font-size: 0.75rem; font-weight: 800; line-height: 1.05; text-align: center; } .sn-choice-seat-pill__status { gap: 8px; padding: 5px 10px; color: #fff; background: var(--sn-choice-seat-status-fill); } .sn-choice-seat-pill__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 25px; width: 25px; height: 25px; border-radius: 999px; color: #fff; background: var(--sn-choice-seat-icon-fill); box-shadow: inset 0 0 0 2px color-mix(in srgb, #ffffff 24%, transparent 76%), 0 0.08rem 0.24rem color-mix(in srgb, #06131f 18%, transparent 82%); } .sn-choice-seat-pill__svg { width: 15px; height: 15px; color: currentColor; } .sn-choice-seat-pill__copy { display: flex; flex-direction: column; min-width: 0; gap: 1px; } .sn-choice-seat-pill__label, .sn-choice-seat-pill__tagline { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sn-choice-seat-pill__label { font-size: 0.79rem; font-weight: 800; line-height: 1.05; } .sn-choice-seat-pill__tagline { font-size: 0.66rem; font-weight: 700; line-height: 1.08; opacity: 0.92; } .infocard-grade-pills { gap: 44px 16px; padding-bottom: 10px; } .infocard-grade-pill.sn-choice-grade-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 54px; min-height: 54px; margin: 0 0 38px; border-radius: 14px; background: var(--sn-choice-grade-fill, var(--infocard-level-color, var(--theme-accent-solid))) !important; overflow: visible; outline-offset: 4px; font-size: 1.56rem; font-weight: 900; line-height: 1; box-shadow: inset 0 0 0 3px color-mix(in srgb, #ffffff 14%, transparent 86%), 0 0.16rem 0.36rem color-mix(in srgb, #06131f 18%, transparent 82%); } .infocard-grade-pill.sn-choice-grade-pill--open { --sn-choice-grade-fill: var(--sn-choice-seat-open); } .infocard-grade-pill.sn-choice-grade-pill--limited { --sn-choice-grade-fill: var(--sn-choice-seat-limited); } .infocard-grade-pill.sn-choice-grade-pill--waitlist { --sn-choice-grade-fill: var(--sn-choice-seat-waitlist); } .infocard-grade-pill.sn-choice-grade-pill--long_waitlist { --sn-choice-grade-fill: var(--sn-choice-seat-long_waitlist); } .sn-choice-grade-badge { position: absolute; left: 50%; bottom: -43px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; transform: translateX(-50%); color: #fff; background: color-mix(in srgb, var(--sn-choice-grade-fill, var(--infocard-level-color, var(--theme-accent-solid))) 68%, var(--hisd-dark-grey, #24383c) 32%); box-shadow: 0 0.16rem 0.36rem color-mix(in srgb, #06131f 30%, transparent 70%), inset 0 0 0 3px color-mix(in srgb, #ffffff 22%, transparent 78%); } .sn-choice-grade-badge--empty { background: color-mix(in srgb, #ffffff 54%, var(--theme-surface-secondary, #dcebed) 46%); box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--theme-text-secondary, #5C616B) 32%, transparent 68%), 0 0.16rem 0.34rem color-mix(in srgb, #06131f 18%, transparent 82%); } .sn-choice-grade-badge__svg { width: 20px; height: 20px; color: currentColor; } .sn-choice-grade-tooltip { position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 35; display: flex; flex-direction: column; min-width: 156px; max-width: 220px; overflow: hidden; border-radius: 13px; border: 1px solid color-mix(in srgb, var(--sn-choice-grade-fill, var(--theme-accent-solid)) 42%, #ffffff 58%); background: color-mix(in srgb, var(--theme-surface-primary, #ffffff) 92%, var(--sn-choice-grade-fill, var(--theme-accent-solid)) 8%); box-shadow: 0 0.55rem 1.25rem color-mix(in srgb, #06131f 28%, transparent 72%), inset 0 0 0 1px color-mix(in srgb, #ffffff 24%, transparent 76%); opacity: 0; pointer-events: none; transform: translate(-50%, -8px) scale(0.96); transition: opacity 140ms ease, transform 140ms ease; } .sn-choice-grade-tooltip__title { display: block; padding: 7px 10px 6px; color: #fff; background: var(--sn-choice-grade-fill, var(--theme-accent-solid)); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.03em; line-height: 1; text-align: center; text-transform: uppercase; } .sn-choice-grade-tooltip__message { display: block; padding: 8px 10px 9px; color: var(--theme-text-primary, #24383c); font-size: 0.76rem; font-weight: 800; line-height: 1.16; text-align: center; } .infocard-grade-pill.sn-choice-grade-pill:hover .sn-choice-grade-tooltip, .infocard-grade-pill.sn-choice-grade-pill:focus-visible .sn-choice-grade-tooltip, .infocard-grade-pill.sn-choice-grade-pill:focus-within .sn-choice-grade-tooltip { opacity: 1; transform: translate(-50%, 0) scale(1); } .control-chip.level-chip > .sn-icon, .control-chip.all-campuses-chip > .sn-icon { width: 1.05em; height: 1.05em; padding: 0.25em; border-radius: 999px; box-sizing: content-box; background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)), color-mix(in srgb, var(--chip-bg, var(--theme-accent-solid)) 68%, var(--hisd-dark-grey, #24383c) 32%); box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 42%, transparent 58%), 0 0.12rem 0.32rem color-mix(in srgb, #06131f 20%, transparent 80%); } .seat-availability-pane--school-choice-suppressed { display: none !important; } @media (max-width: 700px) { .seat-availability-options { grid-template-columns: 1fr; } } /* ================================================================================================================ */ /* #endregion SN-UI-SEAT-AVAILABILITY-FILTER */ /* ================================================================================================================ */ /* ================================================================================================================ */ /* ================================================================================================================ */ /* ================================================================================================================ */ /* #region SN-UI-ACCORDION-FILTER-CONTROL v1.0.0 | School Navigator: Accordion Filter Control Styles */ /* Summary: Owns shared accordion filter chrome, interaction states, and accent-driven option styling. */ /* Contents: */ /* - accordion stack */ /* - group and subgroup toggles */ /* - option chips */ /* - compatibility selectors */ /* ================================================================================================================ */ .sn-accordion-filter-root { min-height: 0; } .sn-surface-host.program-pane .sn-accordion-filter-root { flex: 0 1 auto; overflow: visible; } .sn-accordion-filter { min-height: 0; gap: 6px; padding: 0; } .sn-surface-host.program-pane .sn-accordion-filter { flex: 0 1 auto; overflow: visible; } .sn-accordion-filter__group { --sn-accordion-accent: var(--sn-surface-accent, var(--theme-accent-solid)); --sn-accordion-accent-border: color-mix(in srgb, var(--sn-accordion-accent) 38%, var(--theme-border) 62%); --sn-accordion-accent-border-strong: color-mix(in srgb, var(--sn-accordion-accent) 54%, var(--theme-border) 46%); --sn-accordion-toggle-bg: color-mix(in srgb, var(--sn-accordion-accent) 78%, #11283e 22%); --sn-accordion-toggle-bg-hover: color-mix(in srgb, var(--sn-accordion-accent) 84%, #163154 16%); --sn-accordion-toggle-bg-active: color-mix(in srgb, var(--sn-accordion-accent) 68%, #081628 32%); --sn-accordion-toggle-bg-active-hover: color-mix(in srgb, var(--sn-accordion-accent) 74%, #0f2540 26%); --sn-accordion-toggle-text: var(--theme-accent-contrast); --sn-accordion-chip-rest-border: color-mix(in srgb, var(--sn-accordion-accent) 76%, rgba(255, 255, 255, 0.14) 24%); --sn-accordion-chip-hover-bg: color-mix(in srgb, var(--sn-accordion-accent) 88%, #ffffff 12%); --sn-accordion-chip-hover-border: color-mix(in srgb, var(--sn-accordion-accent) 82%, rgba(255, 255, 255, 0.18) 18%); --sn-accordion-chip-active-bg: color-mix(in srgb, var(--sn-accordion-accent) 66%, #000 34%); --sn-accordion-chip-active-border: color-mix(in srgb, var(--sn-accordion-accent) 58%, rgba(7, 17, 22, 0.34) 42%); margin-bottom: 0; max-width: 100%; box-sizing: border-box; background: transparent; border: none; border-radius: 16px; overflow: visible; box-shadow: none; } .sn-surface-host.program-pane .sn-accordion-filter__group { flex: 0 0 auto; min-height: 0; } .sn-surface-host.program-pane .sn-accordion-filter__group--expanded { flex: 0 0 auto; } .sn-accordion-filter__group-toggle, .sn-program-filter-cluster-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 34px; margin: 0; cursor: pointer; white-space: normal; word-break: break-word; transition: border-radius 0.16s, background 0.13s; } .sn-accordion-filter__group-toggle { gap: 0.58rem; padding: 0.44rem 0.78rem 0.44rem 0.68rem; border-radius: 11px; border: 2.5px solid transparent; outline: 2.5px solid transparent; font-size: 1em; font-weight: 800; line-height: 1; background: var(--sn-accordion-toggle-bg); color: var(--sn-accordion-toggle-text) !important; } .sn-accordion-filter__group-toggle, .sn-accordion-filter__group-toggle .sn-accordion-filter__group-label, .sn-accordion-filter__group-toggle .sn-accordion-filter__chevron, .sn-accordion-filter__subgroup-toggle, .sn-accordion-filter__subgroup-toggle .sn-accordion-filter__subgroup-label, .sn-accordion-filter__subgroup-toggle .sn-accordion-filter__chevron, .sn-program-filter-cluster-toggle, .sn-program-filter-cluster-toggle .sn-program-filter-cluster-label, .sn-program-filter-cluster-toggle .sn-program-filter-chevron { color: var(--theme-accent-contrast) !important; } .sn-accordion-filter__group-toggle[aria-expanded="true"] { border-radius: 14px 14px 0 0; background: var(--sn-accordion-toggle-bg-active); border-color: color-mix(in srgb, var(--sn-accordion-accent-border-strong) 88%, rgba(255, 255, 255, 0.18) 12%) !important; box-shadow: 0 0.42rem 1rem color-mix(in srgb, var(--sn-accordion-accent) 20%, transparent 80%), inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .sn-accordion-filter__group--top-level-only .sn-accordion-filter__group-toggle[aria-pressed="true"] { background: var(--sn-accordion-toggle-bg-active); border-color: color-mix(in srgb, var(--sn-accordion-accent-border-strong) 88%, rgba(255, 255, 255, 0.18) 12%) !important; box-shadow: 0 0.42rem 1rem color-mix(in srgb, var(--sn-accordion-accent) 20%, transparent 80%), inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .sn-accordion-filter__group--top-level-only .sn-accordion-filter__group-toggle[aria-pressed="true"]:hover, .sn-accordion-filter__group--top-level-only .sn-accordion-filter__group-toggle[aria-pressed="true"]:focus-visible { background: var(--sn-accordion-toggle-bg-active-hover); } .sn-accordion-filter__group--top-level-only .sn-chip-selected-dot { border-color: color-mix(in srgb, var(--hisd-yellow, #F9D04E) 72%, var(--hisd-white, #ffffff) 28%); } .sn-accordion-filter__group--top-level-only .sn-accordion-filter__group-toggle[aria-pressed="true"] .sn-chip-selected-dot { background: var(--hisd-white, #ffffff); opacity: 1; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sn-accordion-accent) 66%, var(--hisd-dark-grey, #24383c) 34%), 0 0.1rem 0.28rem color-mix(in srgb, #06131f 24%, transparent 76%); } .sn-accordion-filter__group-toggle:hover:not([aria-expanded="true"]):not([aria-pressed="true"]) { outline: none; border-color: transparent !important; background: var(--sn-accordion-toggle-bg-hover); box-shadow: none; } .sn-accordion-filter__group-toggle:focus-visible:not([aria-pressed="true"]) { outline: none; border-color: transparent !important; background: var(--sn-accordion-toggle-bg-hover); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sn-accordion-accent-border-strong) 72%, transparent 28%); } .sn-accordion-filter__group-toggle[aria-expanded="true"]:hover { background: var(--sn-accordion-toggle-bg-active-hover); } .sn-accordion-filter__group-toggle[aria-expanded="true"]:focus-visible { background: var(--sn-accordion-toggle-bg-active-hover); border-color: color-mix(in srgb, var(--sn-accordion-accent-border-strong) 88%, rgba(255, 255, 255, 0.18) 12%) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--sn-accordion-accent-border-strong) 72%, transparent 28%), 0 0.42rem 1rem color-mix(in srgb, var(--sn-accordion-accent) 20%, transparent 80%), inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .sn-accordion-filter__group-label { display: flex; align-items: center; flex: 1 1 0; min-width: 0; min-height: 1.5rem; font-weight: 800; font-size: 1em; line-height: 1.08; text-align: left; } .sn-accordion-filter__group-icon { --chip-bg: var(--sn-accordion-accent, var(--theme-accent-solid)); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 1.62rem; width: 1.62rem; height: 1.62rem; padding: 0.2rem; border-radius: 999px; box-sizing: border-box; color: currentColor; background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)), color-mix(in srgb, var(--chip-bg, var(--theme-accent-solid)) 66%, var(--hisd-dark-grey, #24383c) 34%); box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 38%, transparent 62%), 0 0.1rem 0.28rem color-mix(in srgb, #06131f 22%, transparent 78%); } .sn-accordion-filter__group-content { min-height: 0; max-height: clamp(8rem, calc(var(--sn-surface-max-height) - 9.5rem), 20rem); overflow-y: auto; overflow-x: hidden; background: color-mix(in srgb, var(--sn-accordion-accent) 62%, #081628 38%); border: 2.5px solid color-mix(in srgb, var(--sn-accordion-accent-border-strong) 88%, rgba(255, 255, 255, 0.18) 12%); border-top: none; border-radius: 0 0 11px 11px; background-clip: padding-box; padding-bottom: 0.12rem; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--sn-accordion-accent) 82%, rgba(255, 255, 255, 0.18) 18%) transparent; overscroll-behavior: contain; } .sn-surface-host.program-pane .sn-accordion-filter__group--expanded .sn-accordion-filter__group-content { flex: 0 1 auto; max-height: none; overflow: visible; scrollbar-gutter: auto; } .sn-accordion-filter__group-content::-webkit-scrollbar { width: 0.78rem; background: transparent; } .sn-accordion-filter__group-content::-webkit-scrollbar-thumb { border: 3px solid transparent; background: color-mix(in srgb, var(--sn-accordion-accent) 82%, rgba(255, 255, 255, 0.18) 18%); background-clip: padding-box; border-radius: 999px; } .sn-accordion-filter__subgroup, .sn-program-filter-cte-cluster { background: transparent; border-radius: 0; margin: 0; box-shadow: none; padding: 0; } .sn-accordion-filter__subgroup-toggle, .sn-program-filter-cluster-toggle { font-weight: 700; border: none; border-radius: 0; padding: 0.3em 0.8em 0.3em 1.25em; text-align: left; font-size: 1em; box-shadow: none; background: color-mix(in srgb, var(--sn-accordion-accent, var(--theme-accent-solid)) 78%, black 22%); } .sn-accordion-filter__subgroup-label, .sn-program-filter-cluster-label { flex: 1 1 0; min-width: 0; font-weight: 700; font-size: 1em; white-space: normal; overflow: hidden; text-overflow: ellipsis; text-wrap: wrap; } .sn-accordion-filter__chevron, .sn-program-filter-chevron { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-left: auto; line-height: 1; transition: transform 0.18s; transform-origin: center; } .sn-accordion-filter__group-toggle .sn-accordion-filter__chevron { width: 1.5rem; height: 1.5rem; } .sn-accordion-filter__subgroup-toggle .sn-accordion-filter__chevron, .sn-program-filter-cluster-toggle .sn-program-filter-chevron { width: 1.25rem; height: 1.25rem; } .sn-accordion-filter__subgroup-toggle:hover:not([aria-expanded="true"]):not([aria-pressed="true"]), .sn-accordion-filter__subgroup-toggle:focus-visible:not([aria-expanded="true"]):not([aria-pressed="true"]), .sn-program-filter-cluster-toggle:hover:not([aria-expanded="true"]), .sn-program-filter-cluster-toggle:focus-visible:not([aria-expanded="true"]) { outline: none; border-color: transparent !important; background: color-mix(in srgb, var(--sn-accordion-accent, var(--theme-accent-solid)) 86%, #173759 14%); box-shadow: 0 0.24rem 0.72rem color-mix(in srgb, var(--sn-accordion-accent, var(--theme-accent-solid)) 18%, transparent 82%); } .sn-accordion-filter__subgroup-toggle[aria-expanded="true"], .sn-accordion-filter__subgroup-toggle[aria-pressed="true"], .sn-program-filter-cluster-toggle[aria-expanded="true"] { outline: none; border-color: color-mix(in srgb, var(--sn-accordion-accent-border-strong, var(--theme-accent-border)) 88%, rgba(255, 255, 255, 0.18) 12%) !important; background: color-mix(in srgb, var(--sn-accordion-accent, var(--theme-accent-solid)) 68%, #081628 32%); box-shadow: 0 0.42rem 1rem color-mix(in srgb, var(--sn-accordion-accent, var(--theme-accent-solid)) 20%, transparent 80%), inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .sn-accordion-filter__subgroup-toggle[aria-expanded="true"]:hover, .sn-accordion-filter__subgroup-toggle[aria-expanded="true"]:focus-visible, .sn-accordion-filter__subgroup-toggle[aria-pressed="true"]:hover, .sn-accordion-filter__subgroup-toggle[aria-pressed="true"]:focus-visible, .sn-program-filter-cluster-toggle[aria-expanded="true"]:hover, .sn-program-filter-cluster-toggle[aria-expanded="true"]:focus-visible { background: color-mix(in srgb, var(--sn-accordion-accent, var(--theme-accent-solid)) 74%, #0f2540 26%); } .sn-accordion-filter__subgroup-toggle--terminal { justify-content: flex-start; } .sn-accordion-filter__subgroup-content, .sn-program-filter-cluster-content, .sn-program-filter-cte-cluster-content { padding: 0.24em 0.45em 0.36em; margin-bottom: 0; background: transparent; border-top: 1px solid color-mix(in srgb, var(--sn-accordion-accent-border, var(--theme-accent-border)) 28%, transparent 72%); gap: 5px; align-items: stretch; justify-content: center; } .sn-accordion-filter__option, .sn-program-filter-program-chip, .sn-program-filter-cte-program { --chip-bg: var(--sn-accordion-accent, var(--theme-accent-solid)); --chip-fg: var(--theme-accent-contrast); background: var(--chip-rest-bg, var(--chip-bg)); color: var(--chip-fg, #ffffff) !important; border-color: var(--sn-accordion-chip-rest-border, color-mix(in srgb, var(--chip-bg) 76%, rgba(255, 255, 255, 0.14) 24%)); border-radius: 11px; box-shadow: var(--theme-shadow-sm); font-weight: 700; line-height: 1.2; flex: 1 1 11rem; justify-content: center; text-align: center; white-space: normal; overflow-wrap: anywhere; word-break: normal; width: auto; min-width: min(100%, 11rem); max-width: 100%; min-height: 30px; padding: 0.22rem 0.58rem; margin: 0; transition: background 0.14s, color 0.14s, border-color 0.14s; outline: none; } .sn-accordion-filter__option:hover, .sn-accordion-filter__option:focus, .sn-program-filter-program-chip:hover, .sn-program-filter-program-chip:focus, .sn-program-filter-cte-program:hover, .sn-program-filter-cte-program:focus { background: var(--sn-accordion-chip-hover-bg, color-mix(in srgb, var(--chip-bg) 88%, #ffffff 12%)); color: var(--chip-fg, #ffffff) !important; border-color: var(--sn-accordion-chip-hover-border, color-mix(in srgb, var(--chip-bg) 82%, rgba(255, 255, 255, 0.18) 18%)); box-shadow: var(--theme-shadow-md); } .sn-accordion-filter__option.selected, .sn-accordion-filter__option[aria-pressed="true"], .sn-program-filter-program-chip.selected, .sn-program-filter-program-chip[aria-pressed="true"], .sn-program-filter-cte-program.selected, .sn-program-filter-cte-program[aria-pressed="true"] { background: var(--sn-accordion-chip-active-bg, color-mix(in srgb, var(--chip-bg) 78%, #000 22%)); color: var(--chip-fg, #ffffff) !important; border-color: var(--sn-accordion-chip-active-border, color-mix(in srgb, var(--chip-bg) 72%, rgba(255, 255, 255, 0.12) 28%)); box-shadow: var(--theme-shadow-md); } .sn-accordion-filter__group-content[hidden], .sn-accordion-filter__subgroup-content[hidden], .sn-program-filter-cluster-content[hidden] { display: none !important; } html[data-theme="dark"] .sn-accordion-filter__option, html[data-theme="dark"] .sn-program-filter-program-chip, html[data-theme="dark"] .sn-program-filter-cte-program { background: color-mix(in srgb, var(--sn-accordion-accent, var(--theme-accent-solid)) 50%, black 50%); color: var(--theme-accent-contrast); border-color: color-mix(in srgb, var(--sn-accordion-accent, var(--theme-accent-solid)) 44%, rgba(255, 255, 255, 0.18) 56%); box-shadow: 0 0.35rem 0.9rem color-mix(in srgb, var(--sn-accordion-accent, var(--theme-accent-solid)) 18%, transparent 82%), inset 0 1px 0 rgba(255, 255, 255, 0.06); } html[data-theme="dark"] .sn-accordion-filter__option:hover, html[data-theme="dark"] .sn-accordion-filter__option:focus, html[data-theme="dark"] .sn-program-filter-program-chip:hover, html[data-theme="dark"] .sn-program-filter-program-chip:focus, html[data-theme="dark"] .sn-program-filter-cte-program:hover, html[data-theme="dark"] .sn-program-filter-cte-program:focus { background: color-mix(in srgb, var(--sn-accordion-accent, var(--theme-accent-solid)) 58%, black 42%); border-color: color-mix(in srgb, var(--sn-accordion-accent, var(--theme-accent-solid)) 72%, rgba(255, 255, 255, 0.24) 28%); } html[data-theme="dark"] .sn-accordion-filter__option.selected, html[data-theme="dark"] .sn-accordion-filter__option[aria-pressed="true"], html[data-theme="dark"] .sn-program-filter-program-chip.selected, html[data-theme="dark"] .sn-program-filter-program-chip[aria-pressed="true"], html[data-theme="dark"] .sn-program-filter-cte-program.selected, html[data-theme="dark"] .sn-program-filter-cte-program[aria-pressed="true"] { background: color-mix(in srgb, var(--sn-accordion-accent, var(--theme-accent-solid)) 66%, #000 34%); border-color: color-mix(in srgb, var(--sn-accordion-accent, var(--theme-accent-solid)) 76%, rgba(255, 255, 255, 0.24) 24%); box-shadow: 0 0.45rem 1rem color-mix(in srgb, var(--sn-accordion-accent, var(--theme-accent-solid)) 22%, transparent 78%), inset 0 0 0 1px rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .sn-accordion-filter__group-toggle[aria-expanded="true"] { border-color: color-mix(in srgb, var(--sn-accordion-accent-border-strong) 84%, rgba(7, 17, 22, 0.82) 16%) !important; box-shadow: 0 0.42rem 1rem color-mix(in srgb, var(--sn-accordion-accent) 20%, transparent 80%); } html[data-theme="dark"] .sn-accordion-filter__group-toggle[aria-expanded="true"]:focus-visible { border-color: color-mix(in srgb, var(--sn-accordion-accent-border-strong) 84%, rgba(7, 17, 22, 0.82) 16%) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--sn-accordion-accent-border-strong) 68%, rgba(7, 17, 22, 0.32) 32%), 0 0.42rem 1rem color-mix(in srgb, var(--sn-accordion-accent) 20%, transparent 80%); } html[data-theme="dark"] .sn-accordion-filter__subgroup-toggle:hover:not([aria-expanded="true"]):not([aria-pressed="true"]), html[data-theme="dark"] .sn-accordion-filter__subgroup-toggle:focus-visible:not([aria-expanded="true"]):not([aria-pressed="true"]), html[data-theme="dark"] .sn-program-filter-cluster-toggle:hover:not([aria-expanded="true"]), html[data-theme="dark"] .sn-program-filter-cluster-toggle:focus-visible:not([aria-expanded="true"]) { box-shadow: none; } html[data-theme="dark"] .sn-accordion-filter__subgroup-toggle[aria-expanded="true"], html[data-theme="dark"] .sn-accordion-filter__subgroup-toggle[aria-pressed="true"], html[data-theme="dark"] .sn-program-filter-cluster-toggle[aria-expanded="true"] { border-color: color-mix(in srgb, var(--sn-accordion-accent-border-strong, var(--theme-accent-border)) 84%, rgba(7, 17, 22, 0.82) 16%) !important; box-shadow: 0 0.42rem 1rem color-mix(in srgb, var(--sn-accordion-accent, var(--theme-accent-solid)) 20%, transparent 80%); } /* ================================================================================================================ */ /* #endregion SN-UI-ACCORDION-FILTER-CONTROL */ /* ================================================================================================================ */ /* ================================================================================================================ */ /* ================================================================================================================ */ /* ================================================================================================================ */ /* #region SN-UI-PROGRAM-FILTER-ADAPTERS v1.1.0 | School Navigator: Program Filter Adapter Accents */ /* Summary: Applies family-level accent tokens for program-filter adapters without moving family semantics into shared layers. */ /* Contents: */ /* - CTE accent */ /* - Early Childhood accent */ /* - Language accent */ /* - Future 2 accent */ /* ================================================================================================================ */ .sn-program-filter-adapter--cte { --sn-accordion-accent: var(--level-hs-solid); } .sn-program-filter-adapter--early-childhood { --sn-accordion-accent: var(--level-ecc-color); } .sn-program-filter-adapter--language { --sn-accordion-accent: color-mix(in srgb, var(--theme-accent-solid) 72%, var(--hisd-yellow, #F9D04E) 28%); } .sn-program-filter-adapter--future-2 { --sn-accordion-accent: #5374b3; } /* ================================================================================================================ */ /* #endregion SN-UI-PROGRAM-FILTER-ADAPTERS */ /* ================================================================================================================ */ /* ================================================================================================================ */