/* A10 search: page /search, search box with autocomplete (also used in the navbar), suggestions.
   Uses the design tokens of dojo.css with fallbacks, so it also works if loaded alone.
   Belt colors come from [data-belt="<color>"] (--belt, --belt-edge, --belt-fill). */

.search-box, .search-hero, .search-layout, .search-start {
  --s-ink: var(--ink-strong, #1b1f2a);
  --s-muted: var(--muted, #64748b);
  --s-line: rgba(27, 31, 42, .08);
  --s-line-strong: rgba(27, 31, 42, .14);
  --s-paper: var(--surface, #ffffff);
  --s-navy: var(--brand-navy, #1f3a5f);
  --s-navy-light: var(--brand-navy-light, #e1e9f3);
  --s-teal: var(--brand-teal, #2a9d8f);
  --s-teal-dark: var(--brand-teal-dark, #1f7a6f);
  --s-teal-light: var(--brand-teal-light, #e3f4f1);
  --s-gold: var(--gold, #f5b82e);
  --s-gold-light: var(--gold-light, #fef3c7);
  --s-shadow: 0 1px 2px rgba(27, 31, 42, .06), 0 6px 18px -8px rgba(27, 31, 42, .14);
  --s-shadow-hover: 0 2px 4px rgba(27, 31, 42, .06), 0 14px 30px -12px rgba(27, 31, 42, .22);
  --s-title-font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --s-text-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ------------------------------------------------------------------ highlight */
.search-box mark, .search-hit mark, .search-results mark {
  color: inherit; font-weight: 700; padding: 0 .08em; border-radius: .2em;
  background: linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--gold, #f5b82e) 55%, white) 52%);
}

/* ----------------------------------------------------------------- search box */
.search-box {
  position: relative; display: flex; align-items: center; gap: .5rem;
  height: 2.75rem; width: clamp(12rem, 26vw, 21rem); padding: 0 .5rem 0 .8rem;
  background: var(--s-paper); border: 1px solid var(--s-line-strong); border-radius: .9rem;
  box-shadow: 0 1px 2px rgba(27, 31, 42, .05);
  font-family: var(--s-text-font); color: var(--s-ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.search-box:focus-within {
  border-color: var(--s-teal);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-teal, #2a9d8f) 22%, transparent), 0 6px 18px -10px rgba(27, 31, 42, .25);
}
.search-box__icon { display: grid; place-items: center; color: var(--s-muted); flex-shrink: 0; }
.search-box__icon .sicon { width: 1.15rem; height: 1.15rem; }
.search-box:focus-within .search-box__icon { color: var(--s-teal-dark); }
.search-box input[type="search"] {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: .95rem; color: var(--s-ink);
}
.search-box input[type="search"]::placeholder { color: #94a3b8; }
.search-box input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.search-box__kbd {
  display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem;
  border: 1px solid var(--s-line-strong); border-bottom-width: 2px; border-radius: .45rem;
  font: 700 .75rem/1 var(--s-text-font); color: var(--s-muted); background: #f8fafc; flex-shrink: 0;
}
.search-box:focus-within .search-box__kbd { display: none; }
.search-box__submit { flex-shrink: 0; }

/* Large variant (search page). */
.search-box--lg {
  width: 100%; height: 4rem; padding: 0 .55rem 0 1.15rem; border-radius: 1.25rem;
  border-color: transparent; box-shadow: 0 2px 4px rgba(15, 28, 46, .12), 0 18px 40px -18px rgba(15, 28, 46, .55);
}
.search-box--lg input[type="search"] { font-size: 1.15rem; font-weight: 600; }
.search-box--lg .search-box__icon .sicon { width: 1.5rem; height: 1.5rem; }
.search-box--lg .search-box__submit { height: 3rem; padding-inline: 1.4rem; border-radius: .95rem; }
.search-box--lg:focus-within { border-color: var(--s-gold); box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold, #f5b82e) 45%, transparent), 0 18px 40px -18px rgba(15, 28, 46, .55); }

/* --------------------------------------------------------------- suggestions */
.search-box__list {
  position: absolute; z-index: 60; top: calc(100% + .5rem); left: 0; right: 0; min-width: min(26rem, 92vw);
  display: none; max-height: min(28rem, 70vh); overflow-y: auto; padding: .4rem;
  background: var(--s-paper); border: 1px solid var(--s-line); border-radius: 1.1rem;
  box-shadow: 0 4px 8px rgba(27, 31, 42, .06), 0 24px 48px -16px rgba(27, 31, 42, .3);
  text-align: left;
}
.search-box--nav .search-box__list { left: auto; right: 0; width: max(100%, 26rem); }
.search-box.is-open .search-box__list,
.search-box:not([data-js]):focus-within .search-box__list:not(:empty) { display: block; }

.search-opt {
  display: flex; align-items: center; gap: .75rem; min-height: 2.9rem; padding: .45rem .6rem;
  border-radius: .8rem; color: var(--s-ink); text-decoration: none; cursor: pointer;
}
.search-opt:hover, .search-opt[aria-selected="true"] { background: var(--s-teal-light); }
.search-opt[aria-selected="true"] { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand-teal, #2a9d8f) 45%, transparent); }
.search-opt__icon {
  display: grid; place-items: center; flex-shrink: 0; width: 2.1rem; height: 2.1rem; border-radius: .7rem;
  color: var(--belt-edge, var(--s-navy)); background: color-mix(in srgb, var(--belt-fill, #94a3b8) 16%, white);
}
.search-opt__icon .sicon { width: 1.1rem; height: 1.1rem; }
.search-opt__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.search-opt__title { font-weight: 600; font-size: .95rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-opt__title mark { background: none; color: var(--s-teal-dark); font-weight: 800; padding: 0; }
.search-opt__sub { font-size: .8rem; color: var(--s-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-opt__meta { display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; color: var(--s-muted); }
.search-opt__kind { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.search-opt__lock { display: inline-grid; color: #b45309; }
.search-opt__lock svg { width: .9rem; height: .9rem; }
.search-opt.is-locked .search-opt__title { color: #475569; }
.search-opt--empty { cursor: default; color: var(--s-muted); font-size: .9rem; }
.search-opt--empty:hover { background: none; }
.search-opt--all { margin-top: .3rem; border-top: 1px solid var(--s-line); border-radius: 0 0 .8rem .8rem; color: var(--s-navy); }
.search-opt--all .search-opt__icon { color: var(--s-navy); background: var(--s-navy-light); }
.search-opt--all .search-opt__title { font-weight: 700; }
.search-opt__enter { width: 1rem; height: 1rem; }

/* ----------------------------------------------------------------------- hero */
.search-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 2.5rem 2.5rem 2.25rem;
  border-radius: 1.75rem; color: #fff;
  background:
    radial-gradient(42rem 18rem at 100% 0%, rgba(42, 157, 143, .55), transparent 60%),
    radial-gradient(30rem 16rem at 0% 120%, rgba(245, 184, 46, .28), transparent 60%),
    linear-gradient(135deg, #1f3a5f 0%, #182c47 100%);
  box-shadow: 0 2px 4px rgba(15, 28, 46, .12), 0 24px 50px -28px rgba(15, 28, 46, .7);
}
.search-hero::after { /* soft dot grid */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18;
  background-image: radial-gradient(rgba(255, 255, 255, .55) 1px, transparent 1.2px); background-size: 18px 18px;
  mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
}
.search-hero__art {
  position: absolute; right: -1.5rem; top: -1.5rem; z-index: -1; color: rgba(255, 255, 255, .09);
  transform: rotate(-12deg);
}
.search-hero__art .sicon { width: 15rem; height: 15rem; stroke-width: 1.6; }
.search-hero__eyebrow {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0;
  font: 800 .78rem/1 var(--s-title-font); letter-spacing: .12em; text-transform: uppercase; color: var(--s-gold);
}
.search-hero__eyebrow .sicon { width: 1rem; height: 1rem; }
.search-hero__title {
  margin: .55rem 0 0; font: 800 clamp(1.75rem, 3.2vw, 2.6rem)/1.15 var(--s-title-font); letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.search-hero__lead { margin: .6rem 0 0; max-width: 38rem; font: 400 1.05rem/1.5 var(--s-text-font); color: rgba(255, 255, 255, .82); }
.search-hero__box { max-width: 46rem; }
.search-hero__hint { margin: .8rem 0 0 .25rem; overflow-wrap: anywhere; font: 500 .82rem/1.4 var(--s-text-font); color: rgba(255, 255, 255, .7); }
.search-hero__hint kbd {
  display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; margin: 0 .1rem;
  border-radius: .4rem; border: 1px solid rgba(255, 255, 255, .3); border-bottom-width: 2px;
  background: rgba(255, 255, 255, .1); font: 700 .72rem/1 var(--s-text-font); color: #fff;
}
.search-hero.is-compact { padding: 1.6rem 2rem 1.5rem; }
.search-hero.is-compact .search-hero__title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.search-hero.is-compact .search-hero__art .sicon { width: 10rem; height: 10rem; }
@media (min-width: 1024px) {
  .search-hero.is-compact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 2rem; }
}

/* ------------------------------------------------------------- landing panels */
.search-start { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 900px) { .search-start { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } }
.search-panel {
  padding: 1.5rem; border-radius: 1.4rem; background: var(--s-paper); border: 1px solid var(--s-line); box-shadow: var(--s-shadow);
}
.search-panel__title {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem;
  font: 800 1.15rem/1.2 var(--s-title-font); color: var(--s-navy);
}
.search-panel__title .sicon { width: 1.2rem; height: 1.2rem; color: var(--s-teal); }
.search-panel__note { margin: 1.1rem 0 0; font: 400 .9rem/1.5 var(--s-text-font); color: var(--s-muted); }
.search-examples { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }

.search-belts { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); }
.search-belt {
  display: flex; align-items: center; gap: .75rem; min-height: 3.6rem; padding: .55rem .8rem .55rem .55rem;
  border-radius: 1rem; border: 1px solid var(--s-line); background: #fff; color: var(--s-ink); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.search-belt:hover { transform: translateY(-2px); box-shadow: var(--s-shadow-hover); border-color: transparent; }
.search-belt__band {
  flex-shrink: 0; width: .7rem; align-self: stretch; border-radius: .5rem;
  background: var(--belt, #cbd5e1); box-shadow: inset 0 0 0 1.5px var(--belt-edge, transparent);
}
.search-belt__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.search-belt__name { font: 800 .95rem/1.2 var(--s-title-font); }
.search-belt__title { font: 500 .8rem/1.3 var(--s-text-font); color: var(--s-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-belt__state { display: inline-grid; place-items: center; flex-shrink: 0; min-width: 2rem; height: 2rem; padding: 0 .35rem; border-radius: 9999px; background: #f1f5f9; color: #94a3b8; font: 800 .72rem/1 var(--s-text-font); }
.search-belt__state svg { width: 1rem; height: 1rem; }
.search-belt__state.is-done { background: #dcfce7; color: #16a34a; }
.search-belt__state.is-open { background: var(--s-teal-light); color: var(--s-teal-dark); }
.search-belt.is-locked .search-belt__name { color: #64748b; }

/* -------------------------------------------------------------------- layout */
.search-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 1.5rem; align-items: start; }
@media (min-width: 900px) { .search-layout { grid-template-columns: 15.5rem minmax(0, 1fr); gap: 2rem; } }

/* ------------------------------------------------------------------- filters */
.search-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }
@media (min-width: 900px) { .search-filters { position: sticky; top: 4.75rem; } }
.search-filter-group {
  min-width: 0; padding: .9rem; border-radius: 1.25rem; background: var(--s-paper); border: 1px solid var(--s-line); box-shadow: var(--s-shadow);
}
.search-filter-group__title { margin: .1rem .4rem .55rem; font: 800 .72rem/1 var(--s-title-font); letter-spacing: .1em; text-transform: uppercase; color: var(--s-muted); }
.search-filter-list { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.search-filter {
  display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .35rem .55rem;
  border-radius: .8rem; color: #334155; text-decoration: none; font: 600 .92rem/1.2 var(--s-text-font);
  transition: background .15s ease, color .15s ease;
}
.search-filter:hover { background: #f1f5f9; color: var(--s-ink); }
.search-filter.is-active { background: var(--s-navy); color: #fff; }
.search-filter.is-active .search-filter__count { background: rgba(255, 255, 255, .18); color: #fff; }
.search-filter.is-active .search-filter__icon { color: var(--s-gold); }
.search-filter.is-empty { opacity: .5; }
.search-filter:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-navy, #1f3a5f) 55%, white); outline-offset: 2px; }
.search-filter__icon { display: grid; place-items: center; width: 1.6rem; flex-shrink: 0; color: var(--s-teal-dark); }
.search-filter__icon .sicon { width: 1.1rem; height: 1.1rem; }
.search-filter__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-filter__count { min-width: 1.75rem; padding: .2rem .45rem; border-radius: 9999px; background: #f1f5f9; color: #475569; font: 700 .75rem/1 var(--s-text-font); text-align: center; font-variant-numeric: tabular-nums; }

@media (max-width: 899px) { /* filters become horizontal chip rails */
  .search-filter-group { padding: .7rem .7rem .55rem; }
  .search-filter-list { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
  .search-filter { flex-shrink: 0; border: 1px solid var(--s-line); min-height: 2.75rem; }
  .search-filter__label { overflow: visible; }
}

/* ------------------------------------------------------------------- results */
.search-results { min-width: 0; }
.search-summary { margin: 0 0 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font: 500 .95rem/1.5 var(--s-text-font); color: var(--s-muted); }
.search-summary strong { color: var(--s-ink); }
.search-summary__clear { color: var(--s-teal-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.search-group { margin-bottom: 2rem; }
.search-group__head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.search-group__icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .8rem; background: var(--s-navy); color: #fff; }
.search-group__icon .sicon { width: 1.15rem; height: 1.15rem; }
.search-group__title { margin: 0; font: 800 1.3rem/1.2 var(--s-title-font); color: var(--s-navy); }
.search-group__count { padding: .25rem .6rem; border-radius: 9999px; background: var(--s-navy-light); color: var(--s-navy); font: 800 .78rem/1 var(--s-text-font); }
.search-group__more {
  margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; padding: 0 .4rem;
  color: var(--s-teal-dark); font: 700 .9rem/1 var(--s-text-font); text-decoration: none;
}
.search-group__more .sicon { width: 1rem; height: 1rem; transition: transform .18s ease; }
.search-group__more:hover .sicon { transform: translateX(3px); }

.search-hits { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.search-hit {
  position: relative; overflow: hidden; border-radius: 1.15rem; background: var(--s-paper);
  border: 1px solid var(--s-line); box-shadow: var(--s-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.search-hit::before { /* belt stripe */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .4rem;
  background: var(--belt-fill, #94a3b8); box-shadow: inset -1px 0 0 var(--belt-edge, transparent);
}
.search-hit:hover { transform: translateY(-2px); box-shadow: var(--s-shadow-hover); }
.search-hit__link { display: flex; align-items: flex-start; gap: .9rem; padding: 1rem 1.1rem .55rem 1.35rem; color: inherit; text-decoration: none; }
.search-hit__link:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-navy, #1f3a5f) 55%, white); outline-offset: -3px; border-radius: 1.15rem; }
.search-hit__icon {
  display: grid; place-items: center; flex-shrink: 0; width: 2.6rem; height: 2.6rem; border-radius: .85rem;
  color: var(--belt-edge, var(--s-navy)); background: color-mix(in srgb, var(--belt-fill, #94a3b8) 15%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--belt-fill, #94a3b8) 25%, transparent);
}
[data-belt="white"] .search-hit__icon, .search-hit[data-belt="white"] .search-hit__icon { color: #475569; }
.search-hit__icon .sicon { width: 1.3rem; height: 1.3rem; }
.search-hit__body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1; }
.search-hit__eyebrow { font: 700 .72rem/1.2 var(--s-text-font); letter-spacing: .07em; text-transform: uppercase; color: var(--s-muted); }
.search-hit__title { font: 800 1.12rem/1.3 var(--s-title-font); color: var(--s-ink); overflow-wrap: anywhere; }
.search-hit__snippet {
  font: 400 .95rem/1.5 var(--s-text-font); color: #475569;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.search-hit__go { display: grid; place-items: center; flex-shrink: 0; align-self: center; width: 2rem; height: 2rem; border-radius: 9999px; color: #94a3b8; transition: transform .18s ease, color .18s ease, background .18s ease; }
.search-hit__go .sicon { width: 1.1rem; height: 1.1rem; }
.search-hit:hover .search-hit__go { color: var(--s-teal-dark); background: var(--s-teal-light); transform: translateX(2px); }
.search-hit__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; padding: 0 1.1rem .9rem 4.85rem;
  font: 500 .82rem/1.3 var(--s-text-font); color: var(--s-muted);
}
.search-hit__metatext { overflow-wrap: anywhere; }
.search-hit.is-locked .search-hit__title { color: #475569; }
.search-hit.is-locked .search-hit__icon { filter: saturate(.55); }
.search-hit.is-locked:hover .search-hit__go { color: #b45309; background: #fef3c7; transform: none; }
@media (max-width: 560px) {
  .search-hit__link { padding: .9rem .9rem .5rem 1.15rem; gap: .7rem; }
  .search-hit__icon { width: 2.2rem; height: 2.2rem; }
  .search-hit__meta { padding: 0 .9rem .8rem 1.15rem; }
  .search-hit__go { display: none; }
  .search-hero { padding: 1.6rem 1.25rem 1.5rem; border-radius: 1.4rem; }
  .search-box--lg { height: 3.5rem; }
  .search-box--lg .search-box__submit { display: none; }
  .search-hero__hint, .search-box__kbd { display: none; } /* no hardware keyboard, no "/" hint */
}

/* --------------------------------------------------------------------- chips */
.search-chip {
  display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; min-height: 1.85rem; padding: .25rem .7rem;
  border-radius: 9999px; background: #f1f5f9; color: #334155; text-decoration: none;
  font: 600 .8rem/1.2 var(--s-text-font); white-space: nowrap;
}
.search-chip > span { overflow: hidden; text-overflow: ellipsis; }
.search-chip svg { width: .9rem; height: .9rem; flex-shrink: 0; }
a.search-chip:hover { background: var(--s-teal-light); color: var(--s-teal-dark); }
.search-chip--locked, .search-chip--lock { background: #fef3c7; color: #92400e; }
a.search-chip--locked:hover { background: #fde68a; color: #78350f; }
.search-chip--admin { background: var(--s-navy-light); color: var(--s-navy); }
.search-chip--example {
  min-height: 2.75rem; padding: .4rem 1rem; background: #fff; border: 1px solid var(--s-line-strong);
  border-bottom-width: 3px; font-size: .9rem; color: var(--s-navy);
  transition: transform .12s ease, border-color .15s ease;
}
.search-chip--example:hover { border-color: var(--s-teal); }
.search-chip--example:active { transform: translateY(2px); border-bottom-width: 1px; }
.search-chip--example svg { color: var(--s-teal); }

/* --------------------------------------------------------------------- empty */
.search-empty {
  padding: 2.5rem 1.5rem; border-radius: 1.4rem; text-align: center;
  background: var(--s-paper); border: 1px dashed var(--s-line-strong);
}
.search-empty__art { display: inline-grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 1.4rem; background: var(--s-teal-light); color: var(--s-teal-dark); transform: rotate(-6deg); }
.search-empty__art .sicon { width: 2.2rem; height: 2.2rem; }
.search-empty__title { margin: 1rem 0 .3rem; font: 800 1.3rem/1.25 var(--s-title-font); color: var(--s-navy); overflow-wrap: anywhere; }
.search-empty__text { margin: 0 auto 1.25rem; max-width: 32rem; font: 400 .95rem/1.5 var(--s-text-font); color: var(--s-muted); }
.search-empty .search-examples { justify-content: center; }

/* ------------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  .search-hit, .search-belt, .search-hit__go, .search-group__more .sicon, .search-chip--example, .search-box { transition: none; }
  .search-hit:hover, .search-belt:hover { transform: none; }
}