/*
 * Canonical responsive shell
 * --------------------------
 * Page structure has exactly three supported modes:
 *   narrow  < 640px
 *   medium  640px–1199px
 *   wide    >= 1200px
 *
 * Component container queries may still protect dense controls inside a mode,
 * but viewport width does not select any additional page composition.
 */

html[data-layout-mode="narrow"] {
  --mode-gutter:16px;
  --mode-header-height:64px;
  --mode-search-height:58px;
  --mode-search-width:100%;
  --mode-panel-width:100%;
  --mode-search-icon-inset:16px;
  --mode-search-icon-gap:12px;
  --mode-search-icon-size:22px;
}

html[data-layout-mode="medium"] {
  --mode-gutter:24px;
  --mode-header-height:76px;
  --mode-search-height:62px;
  --mode-search-width:min(100%,624px);
  --mode-panel-width:min(100%,960px);
  --mode-search-icon-inset:16px;
  --mode-search-icon-gap:12px;
  --mode-search-icon-size:22px;
}

html[data-layout-mode="wide"] {
  --mode-gutter:32px;
  --mode-header-height:88px;
  --mode-search-height:64px;
  --mode-search-width:min(100%,624px);
  --mode-panel-width:min(100%,960px);
  --mode-search-icon-inset:16px;
  --mode-search-icon-gap:12px;
  --mode-search-icon-size:22px;
}

/* Mobile keeps ordinary horizontal/vertical panning but opts out of pinch
   gestures. Medium and wide retain the browser default touch behavior. */
html[data-layout-mode="narrow"],
html[data-layout-mode="narrow"] body {
  touch-action:pan-x pan-y;
}

/* Header chrome is part of the page canvas, not a separate ruled surface. */
html[data-layout-mode] .app-header,
html[data-layout-mode] body.workspace-active .app-header {
  position:sticky;
  z-index:100;
  top:0;
  width:100%;
  min-height:var(--mode-header-height);
  padding-inline:var(--mode-gutter);
  border-bottom:0 !important;
  background:var(--canvas);
  box-shadow:none;
}

html[data-layout-mode] .app-header[hidden] {
  display:none !important;
}

/* Medium and wide share the full navigation composition. */
html:is([data-layout-mode="medium"],[data-layout-mode="wide"]) .app-header {
  display:grid;
  grid-template-columns:minmax(112px,1fr) auto minmax(52px,1fr);
  grid-template-rows:1fr;
  align-items:center;
  gap:1rem;
}

html:is([data-layout-mode="medium"],[data-layout-mode="wide"]) .app-header .brand {
  display:flex;
  grid-column:1;
  grid-row:1;
  width:auto;
  height:auto;
  justify-self:start;
}

html:is([data-layout-mode="medium"],[data-layout-mode="wide"]) .app-header .brand-mark {
  display:none;
}

html:is([data-layout-mode="medium"],[data-layout-mode="wide"]) .app-header .brand-text {
  display:block;
}

html[data-layout-mode="medium"] .app-header .brand-wordmark {
  width:112px;
}

html[data-layout-mode="wide"] .app-header .brand-wordmark {
  width:144px;
}

html:is([data-layout-mode="medium"],[data-layout-mode="wide"]) .primary-nav {
  position:relative;
  grid-column:2;
  grid-row:1;
  display:flex;
  width:max-content;
  min-width:0;
  min-height:56px;
  align-self:center;
  justify-self:center;
  justify-content:center;
  margin:0;
  padding:5px 6px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:999px;
  background:color-mix(in srgb,var(--surface) 76%,var(--panel));
}

html[data-layout-mode="medium"] .primary-nav {
  min-height:52px;
}

html:is([data-layout-mode="medium"],[data-layout-mode="wide"]) .primary-nav-toggle {
  display:none;
}

html:is([data-layout-mode="medium"],[data-layout-mode="wide"]) .primary-nav-links {
  position:static;
  z-index:1;
  display:flex;
  width:auto;
  max-height:none;
  align-items:center;
  gap:.25rem;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}

html:is([data-layout-mode="medium"],[data-layout-mode="wide"]) .primary-nav a {
  flex:0 0 auto;
  min-height:42px;
  padding:.55rem .9rem;
  border-radius:999px;
  font-size:.9rem;
  text-align:center;
}

html[data-layout-mode="wide"] .primary-nav a {
  min-height:46px;
  padding:.65rem 1.25rem;
  font-size:1rem;
}

html:is([data-layout-mode="medium"],[data-layout-mode="wide"]) .header-controls {
  display:block;
  grid-column:3;
  grid-row:1;
  justify-self:end;
  margin:0;
}

html[data-layout-mode="medium"] #account-menu-toggle {
  width:48px;
  height:44px;
  min-height:44px;
  justify-content:center;
  gap:1px;
  padding:3px;
}

html[data-layout-mode="medium"] #account-menu-toggle .account-trigger-copy {
  display:none;
}

html[data-layout-mode="medium"] #account-menu-toggle .account-avatar-trigger {
  width:36px;
  height:36px;
}

/* Narrow has one cohesive header row and the animated navigation disclosure. */
html[data-layout-mode="narrow"] .app-header {
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 52px;
  grid-template-rows:64px;
  gap:8px;
  align-items:center;
  padding-block:0;
}

html[data-layout-mode="narrow"] .app-header .brand {
  grid-column:1;
  grid-row:1;
  width:44px;
  height:44px;
  justify-content:center;
  padding:0;
}

html[data-layout-mode="narrow"] .app-header .brand-mark {
  display:inline-flex;
  width:40px;
  height:40px;
}

html[data-layout-mode="narrow"] .app-header .brand-text {
  display:none;
}

html[data-layout-mode="narrow"] .primary-nav {
  grid-column:2;
  grid-row:1;
  display:block;
  width:min(100%,196px);
  min-width:0;
  min-height:48px;
  justify-self:center;
  margin:0;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
}

html[data-layout-mode="narrow"] .primary-nav-toggle {
  position:relative;
  display:flex;
  width:100%;
  min-height:48px;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:.55rem 2.35rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:color-mix(in srgb,var(--surface) 78%,var(--panel));
  color:var(--indigo-strong);
  font-family:var(--font-ui);
  font-size:.92rem;
  font-weight:700;
}

html[data-layout-mode="narrow"] .primary-nav-toggle svg {
  position:absolute;
  top:50%;
  right:1rem;
  transform:translateY(-50%);
}

html[data-layout-mode="narrow"] .primary-nav[data-mobile-open="true"] .primary-nav-toggle svg {
  transform:translateY(-50%) rotate(180deg);
}

html[data-layout-mode="narrow"] .primary-nav-indicator {
  display:none;
}

html[data-layout-mode="narrow"] .primary-nav-links {
  position:absolute;
  z-index:60;
  top:calc(100% + 8px);
  left:0;
  display:grid;
  width:100%;
  max-height:0;
  gap:0;
  padding:0 7px;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:22px;
  background:color-mix(in srgb,var(--surface) 97%,transparent);
  box-shadow:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:max-height .28s cubic-bezier(.22,1,.36,1),
    padding .28s cubic-bezier(.22,1,.36,1),
    opacity .18s ease-out,
    border-color .18s ease-out,
    box-shadow .24s cubic-bezier(.22,1,.36,1),
    visibility 0s linear .2s;
}

html[data-layout-mode="narrow"] .primary-nav[data-mobile-open="true"] .primary-nav-links {
  max-height:240px;
  gap:3px;
  padding:7px;
  border-color:var(--line);
  box-shadow:0 16px 38px rgb(37 35 31 / 14%);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:max-height .3s cubic-bezier(.22,1,.36,1),
    padding .3s cubic-bezier(.22,1,.36,1),
    opacity .18s ease-out,
    border-color .18s ease-out,
    box-shadow .24s cubic-bezier(.22,1,.36,1),
    visibility 0s;
}

html[data-layout-mode="narrow"] .primary-nav a {
  min-height:44px;
  justify-content:center;
  padding:.65rem .8rem;
  border-radius:11px;
  font-size:.9rem;
  text-align:center;
}

html[data-layout-mode="narrow"] .header-controls {
  display:block;
  grid-column:3;
  grid-row:1;
  justify-self:end;
  margin:0;
}

html[data-layout-mode="narrow"] #account-menu-toggle {
  width:52px;
  height:44px;
  min-height:44px;
  justify-content:center;
  gap:1px;
  padding:3px;
}

html[data-layout-mode="narrow"] #account-menu-toggle .account-trigger-copy {
  display:none;
}

html[data-layout-mode="narrow"] #account-menu-toggle .account-avatar-trigger {
  width:30px;
  height:30px;
}

html[data-layout-mode="narrow"] #account-menu-toggle .account-menu-chevron {
  display:block;
  width:12px;
  height:12px;
}

/* One search component per mode: changing Explore stage only moves it. */
html[data-layout-mode] body[data-view="explore"] .filter-primary .field-search,
html[data-layout-mode] body[data-view="explore"][data-explore-stage="landing"] .filter-primary .field-search,
html[data-layout-mode] body[data-view="explore"]:is([data-explore-stage="results"],[data-explore-stage="profile"]) .filter-primary .field-search {
  grid-column:1 / -1;
  justify-self:center;
  width:var(--mode-search-width);
}

html[data-layout-mode] body[data-view="explore"] .search-wrap input,
html[data-layout-mode] body[data-view="explore"][data-explore-stage="landing"] .search-wrap input,
html[data-layout-mode] body[data-view="explore"]:is([data-explore-stage="results"],[data-explore-stage="profile"]) .search-wrap input {
  height:var(--mode-search-height);
  min-height:var(--mode-search-height);
  padding-left:calc(
    var(--mode-search-icon-inset) +
    var(--mode-search-icon-size) +
    var(--mode-search-icon-gap)
  );
  border-radius:999px;
}

html[data-layout-mode] body[data-view="explore"] .search-icon {
  left:var(--mode-search-icon-inset);
  width:var(--mode-search-icon-size);
  height:var(--mode-search-icon-size);
}

/* iOS zooms focused form controls below 16px. Keep the narrow search readable
   without relying on a restrictive viewport-scale declaration. */
html[data-layout-mode="narrow"] body[data-view="explore"] .search-wrap input#search {
  font-size:1rem;
}

/* Search is input-led in every mode: Enter still submits and the conditional
   Clear action occupies the trailing edge. Preserve the established outer
   measures so medium/wide retain breathing room beyond the placeholder. */
html[data-layout-mode] body[data-view="explore"] .search-wrap,
html[data-layout-mode] body[data-view="explore"] .search-wrap.has-search-value {
  --search-submit-width:0px !important;
}

html[data-layout-mode] body[data-view="explore"] .search-submit {
  display:none !important;
}

html[data-layout-mode="narrow"] body[data-view="explore"] .search-wrap:not(.has-search-value) input#search {
  padding-right:16px;
}

html[data-layout-mode] body[data-view="explore"] .filter-bar {
  width:100%;
  padding-inline:var(--mode-gutter);
}

html[data-layout-mode] body[data-view="explore"] .filter-primary {
  display:grid;
  grid-template-columns:minmax(0,1fr);
}

html[data-layout-mode] body[data-view="explore"] .filter-bar.refine-is-expanded {
  row-gap:15px !important;
}

html[data-layout-mode] body[data-view="explore"] .filter-quick-row {
  justify-content:center;
}

/* Closed landing: center the complete editorial/search/disclosure group. */
html[data-layout-mode] body[data-view="explore"][data-explore-stage="landing"] main {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;
  min-height:calc(100dvh - var(--mode-header-height));
  height:auto;
  overflow:visible;
}

html[data-layout-mode="narrow"] body.workspace-active[data-view="explore"][data-explore-stage="landing"]:has(
  .advanced-filters[aria-hidden="true"]
) .filter-bar {
  position:relative;
  grid-column:1;
  grid-row:1;
  display:grid;
  align-self:center;
  grid-template-rows:auto auto auto;
  gap:20px;
  width:100%;
  margin:0 auto;
  padding:24px var(--mode-gutter);
}

html[data-layout-mode="narrow"] body.workspace-active[data-view="explore"][data-explore-stage="landing"]:has(
  .advanced-filters[aria-hidden="true"]
) .filter-primary {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:18px;
}

html[data-layout-mode="narrow"] body.workspace-active[data-view="explore"][data-explore-stage="landing"]:has(
  .advanced-filters[aria-hidden="true"]
) .explore-hero-copy,
html[data-layout-mode="narrow"] body.workspace-active[data-view="explore"][data-explore-stage="landing"]:has(
  .advanced-filters[aria-hidden="true"]
) .filter-primary .field-search,
html[data-layout-mode="narrow"] body.workspace-active[data-view="explore"][data-explore-stage="landing"]:has(
  .advanced-filters[aria-hidden="true"]
) .refine-entry-row {
  grid-row:auto;
  align-self:auto;
  margin:0;
}

html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="landing"] .explore-hero-copy {
  display:grid;
  justify-items:center;
  gap:12px;
  text-align:center;
}

html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="landing"] .explore-hero-copy h2 {
  font-size:clamp(2.55rem,13vw,3.25rem);
  line-height:.96;
}

html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="landing"] .explore-hero-copy p {
  display:block !important;
  max-width:32ch;
  font-size:.9rem;
  line-height:1.45;
}

html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="landing"] .guardrail-band {
  grid-column:1;
  grid-row:2;
  width:calc(100% - (2 * var(--mode-gutter)));
  margin:0 auto 12px;
}

/* Open landing and post-search stages share the same focused top composition. */
html[data-layout-mode] body.workspace-active[data-view="explore"][data-explore-stage="landing"]:has(
  .advanced-filters[aria-hidden="false"]
) {
  display:block;
  height:auto;
  min-height:100dvh;
  overflow-x:hidden;
  overflow-y:auto;
}

html[data-layout-mode] body.workspace-active[data-view="explore"][data-explore-stage="landing"]:has(
  .advanced-filters[aria-hidden="false"]
) main {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(min-content,1fr);
  align-content:start;
  height:auto;
  min-height:calc(100dvh - var(--mode-header-height));
  padding-bottom:0;
  overflow:visible;
}

html[data-layout-mode] body[data-view="explore"][data-explore-stage="landing"]:has(
  .advanced-filters[aria-hidden="false"]
) .filter-bar,
html[data-layout-mode] body[data-view="explore"]:is([data-explore-stage="results"],[data-explore-stage="profile"]) .filter-bar {
  grid-column:1 / -1;
  grid-row:1;
  align-self:start;
  width:100%;
  gap:12px;
  margin:0;
  padding:12px var(--mode-gutter) 18px;
  border:0;
  background:var(--canvas);
  box-shadow:none;
}

html[data-layout-mode] body[data-view="explore"][data-explore-stage="landing"]:has(
  .advanced-filters[aria-hidden="false"]
) .explore-hero-copy {
  display:none;
}

html[data-layout-mode] body[data-view="explore"][data-explore-stage="landing"]:has(
  .advanced-filters[aria-hidden="false"]
) .guardrail-band {
  grid-column:1;
  grid-row:2;
  align-self:end;
  margin-top:24px;
}

html[data-layout-mode] body[data-view="explore"]:is([data-explore-stage="results"],[data-explore-stage="profile"]) main {
  min-height:calc(100dvh - var(--mode-header-height));
}

/* The refinement disclosure is one grid-track transition with no dock rewrite. */
html[data-layout-mode] .advanced-filters,
html[data-layout-mode] body[data-view="explore"][data-explore-stage="landing"] .advanced-filters {
  position:relative;
  display:grid;
  grid-template-rows:0fr;
  width:var(--mode-panel-width);
  max-height:none !important;
  margin:0 auto !important;
  padding:0 !important;
  overflow:clip;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:grid-template-rows var(--motion-slow) var(--motion-ease),
    opacity var(--motion-fast) ease-out,
    visibility 0s linear var(--motion-slow);
}

html[data-layout-mode] .advanced-filters[aria-hidden="false"],
html[data-layout-mode] body[data-view="explore"][data-explore-stage="landing"] .advanced-filters[aria-hidden="false"] {
  grid-template-rows:1fr;
  max-height:none !important;
  margin:0 auto !important;
  padding:0 !important;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:grid-template-rows var(--motion-slow) var(--motion-ease),
    opacity var(--motion-fast) ease-out,
    visibility 0s;
}

html[data-layout-mode] .advanced-filters-inner,
html[data-layout-mode] body[data-view="explore"] .advanced-filters-inner,
html[data-layout-mode] body[data-view="explore"] .advanced-filters[aria-hidden="false"] > .advanced-filters-inner {
  min-height:0;
  max-height:none;
  padding-right:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  opacity:1;
  transform:none;
  clip-path:none;
  transition:box-shadow 240ms cubic-bezier(.22,1,.36,1);
  scrollbar-gutter:stable;
}

html[data-layout-mode] .advanced-filters[aria-hidden="true"] > .advanced-filters-inner {
  border-color:transparent;
  opacity:1;
  visibility:visible;
}

html[data-layout-mode] .filter-bar.refine-is-settled .advanced-filters[aria-hidden="false"],
html[data-layout-mode] .filter-bar.refine-is-settled .advanced-filters[aria-hidden="false"] > .advanced-filters-inner {
  overflow:visible;
}

html[data-layout-mode] .advanced-filter-heading {
  min-height:0;
  max-height:none;
}

html[data-layout-mode] .advanced-filter-heading[data-visible="false"] {
  min-height:0;
  max-height:0;
  padding:0 !important;
}

html[data-layout-mode] .advanced-filter-fields,
html[data-layout-mode] .advanced-filters-inner > .advanced-filter-section,
html[data-layout-mode] .advanced-filter-columns > .advanced-filter-section,
html[data-layout-mode] .sort-filter-section {
  padding:16px !important;
}

html[data-layout-mode] .advanced-filters.sort-is-expanded :is(
  .advanced-filter-fields,
  .advanced-filter-columns,
  .referral-preferences-section
) {
  padding-block:0 !important;
}

html[data-layout-mode] .advanced-filters-inner:has(
  > .advanced-filter-heading[data-visible="false"]
) > .sort-filter-section {
  padding:16px !important;
}

html[data-layout-mode] .sort-filter-section {
  gap:10px;
  border:0 !important;
}

html[data-layout-mode] .sort-priority-panel {
  border-bottom:0 !important;
}

html[data-layout-mode] .sort-priority-panel[aria-hidden="false"] > .sort-priority-inner {
  padding:12px 2px 0;
}

/* Panel density is selected only by the canonical page mode. */
html[data-layout-mode="wide"] .advanced-filter-fields {
  grid-template-columns:repeat(4,minmax(0,1fr));
}

html[data-layout-mode="wide"] .advanced-filter-columns {
  grid-template-columns:minmax(250px,.78fr) minmax(450px,1.42fr);
}

html[data-layout-mode="medium"] .advanced-filter-fields {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

html[data-layout-mode="medium"] .advanced-filter-columns {
  grid-template-columns:minmax(0,1fr);
}

html[data-layout-mode="narrow"] .advanced-filter-fields,
html[data-layout-mode="narrow"] .advanced-filter-columns,
html[data-layout-mode="narrow"] .referral-preferences-grid {
  grid-template-columns:minmax(0,1fr);
}

html[data-layout-mode="narrow"] .advanced-filter-heading {
  grid-template-columns:minmax(0,1fr);
  gap:9px;
  padding:12px !important;
}

html[data-layout-mode="narrow"] .advanced-filter-close {
  width:100%;
  max-width:none;
}

html[data-layout-mode="narrow"] .referral-preferences-section .accepting-filter-pill {
  justify-self:start;
}

/* Results/profile page structure switches only at the wide boundary. */
html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
  body[data-view="explore"]:is([data-explore-stage="results"],[data-explore-stage="profile"]) main {
  display:block;
  width:100%;
  height:auto;
  min-height:calc(100dvh - var(--mode-header-height));
  overflow:visible;
}

html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
  body[data-view="explore"] .workspace {
  display:grid;
  grid-column:auto;
  grid-row:auto;
  grid-template-columns:minmax(0,1fr);
  width:100%;
  height:auto;
  overflow:visible;
}

html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
  body[data-view="explore"][data-explore-stage="profile"] .results-panel {
  display:none;
}

html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
  body[data-view="explore"][data-explore-stage="profile"] .profile-panel,
html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
  body.workspace-active[data-view="explore"][data-explore-stage="profile"] .profile-panel {
  display:block;
  grid-column:1;
  grid-row:1;
  width:100%;
  height:auto;
  min-height:0;
  margin:0;
  padding:0 var(--mode-gutter) 32px;
  overflow:visible;
}

html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
  body[data-view="explore"][data-explore-stage="profile"] .profile-back-button {
  display:inline-flex;
}

html:is([data-layout-mode="narrow"],[data-layout-mode="medium"])
  body[data-view="explore"][data-explore-stage="profile"] .profile-header {
  margin-inline:calc(var(--mode-gutter) * -1);
  padding-inline:var(--mode-gutter);
}

html[data-layout-mode="wide"] body[data-view="explore"][data-explore-stage="profile"] .workspace {
  display:grid;
  grid-column:1 / -1;
  grid-row:2;
  grid-template-columns:430px minmax(0,1fr);
  width:100%;
  min-height:0;
  overflow:hidden;
}

html[data-layout-mode="wide"] body[data-view="explore"][data-explore-stage="profile"] .results-panel {
  display:grid;
  grid-column:1;
  grid-row:1;
  grid-template-rows:auto minmax(0,1fr);
  min-width:0;
  height:100%;
  overflow:hidden;
}

html[data-layout-mode="wide"] body[data-view="explore"][data-explore-stage="profile"] .profile-panel {
  display:block;
  grid-column:2;
  grid-row:1;
  min-width:0;
  height:100%;
  overflow-y:auto;
}

html[data-layout-mode="wide"] body[data-view="explore"][data-explore-stage="profile"] .profile-back-button {
  display:none;
}

/* One horizontal gutter governs all narrow Explore surfaces. */
html[data-layout-mode="narrow"] body[data-view="explore"]:is(
  [data-explore-stage="results"],
  [data-explore-stage="profile"]
) .filter-bar,
html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="landing"]:has(
  .advanced-filters[aria-hidden="false"]
) .filter-bar {
  padding-inline:var(--mode-gutter);
}

html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="results"] .results-panel {
  width:100%;
  padding-inline:var(--mode-gutter);
}

html[data-layout-mode="narrow"] body[data-view="explore"][data-explore-stage="results"] :is(
  .section-heading,
  .result-list
) {
  padding-inline:0;
}

@media (prefers-reduced-motion:reduce) {
  html[data-layout-mode] .advanced-filters,
  html[data-layout-mode] .advanced-filters-inner {
    transition-duration:.01ms !important;
  }
}