/* The Synap: search results, the 404 page and the HTML sitemap. Prefix ut-. Loaded only on those pages.
   Built on the page deck (home.css .pg-*): breadcrumbs on the black, then one card (.pg-sheet) holding the title
   block (page-head.php, the search box in its 'after' slot) and the page. The card already sits on the one shared
   width, so .ut adds no side padding of its own. Built from the site's pieces: paper cards with a hairline, pills, arrow circles, the segmented control, the shared phone and story
   cards. No glass: nothing here sits over a photo or the gradient.
   Hover, everywhere: titles turn orange, arrow circles fill orange, photos ease in 4%. No underlines. */

/* ---------- tokens and frames ---------- */
.ut {
  --ut-paper: #ffffff; --ut-line: rgba(0,0,0,.08); --ut-line-2: rgba(0,0,0,.16); --ut-ph: rgba(0,0,0,.05);
  --ut-lift: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05);
  --ut-h2: clamp(20px, calc(.6vw + 11.4px), 28px);
  font-size: var(--page-base);
  color: var(--ink);
  overflow-x: clip;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ut { --ut-paper: #0e0e0e; --ut-line: rgba(255,255,255,.1); --ut-line-2: rgba(255,255,255,.2); --ut-ph: rgba(255,255,255,.06); --ut-lift: 0 0 0 0 transparent; }
}
.ut a { color: inherit; text-decoration: none; }
.ut :focus-visible { outline-color: var(--ink); }
.ut .hp-ph { background: var(--ut-ph); }
.ut .hp-ph.is-product { background: #ffffff; }

/* ---------- the title block (page-head.php): a search may be long, the box and "did you mean" follow it ---------- */
.ut-head .pg-h1 { max-width: 22ch; overflow-wrap: anywhere; }
.ut-head .ut-search { margin-top: 2em; }
.ut-head .ut-mean + .ut-search { margin-top: 1.4em; }
.ut-mean { margin: 1.6em 0 0; font-size: var(--t-lead); line-height: 1.45; color: var(--ink-2); }
.ut-mean a { font-weight: 600; color: var(--acc-text); transition: color .25s ease; }
.ut-mean a:hover, .ut-mean a:focus-visible { color: var(--ink); }
.ut-label { display: block; margin: 0 0 .9em; font-family: var(--font); font-size: var(--t-label); font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- the search box: a white pill, the magnifier, the field, a round go button ---------- */
.ut-search { position: relative; display: flex; align-items: center; height: 3.5em; max-width: min(100%, 32em); margin: 0; padding: 0 .375em 0 1.3em; border-radius: 999px; background: var(--ut-paper); box-shadow: inset 0 0 0 1px var(--ut-line-2), var(--ut-lift); transition: box-shadow .25s ease; }
.ut-search:focus-within { box-shadow: inset 0 0 0 2px var(--ink), var(--ut-lift); }
.ut-search__icon { flex: none; width: 1.15em; height: 1.15em; color: var(--ink-3); }
.ut-search input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0 .75em; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: max(16px, var(--t-ui)); outline: 0; -webkit-appearance: none; appearance: none; }
.ut-search input::placeholder { color: var(--ink-3); opacity: 1; }
.ut-search input::-webkit-search-cancel-button, .ut-search input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.ut-search__go { flex: none; display: grid; place-items: center; width: 2.75em; height: 2.75em; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; font: inherit; color: inherit; cursor: pointer; }
.ut-search__go .sy-go { background: var(--ink); color: var(--bg); }
.ut-search__go:hover .sy-go, .ut-search__go:focus-visible .sy-go { background: #E85002; color: #ffffff; }
.ut-search__go:hover .sy-go svg, .ut-search__go:focus-visible .sy-go svg { transform: rotate(45deg); }
.ut-search__go:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ut-search--lg { height: 4em; max-width: 36em; padding-left: 1.5em; }
.ut-search--lg input { font-size: max(16px, var(--t-lead)); }
.ut-search--lg .ut-search__go, .ut-search--lg .sy-go { width: 3.25em; height: 3.25em; }

/* ---------- All results / Phones: the homepage's segmented control, made of links ---------- */
.ut-seg { display: inline-flex; align-items: stretch; height: 3.125em; max-width: 100%; margin: 0 0 2.2em; padding: .25em; border-radius: 999px; background: var(--ut-paper); box-shadow: inset 0 0 0 1px var(--ut-line), var(--ut-lift); overflow-x: auto; scrollbar-width: none; }
.ut-seg::-webkit-scrollbar { display: none; }
.ut-seg a { display: inline-flex; align-items: center; gap: .5em; padding: 0 1.35em; border-radius: 999px; color: var(--ink-2); font-size: var(--t-ui); font-weight: 500; white-space: nowrap; transition: color .25s ease; }
.ut-seg a:hover { color: var(--ink); }
.ut-seg a[aria-current] { background: #C8470A; color: #F9F9F9; box-shadow: 0 2px 10px rgba(200,71,10,.28); }
.ut-seg__n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ut-seg a[aria-current] .ut-seg__n { color: inherit; }
.ut-seg a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* ---------- result sections ---------- */
.ut-sec + .ut-sec, .ut-sec + .ut-also { margin-top: 3.6em; }
.ut-sec__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6em 2em; margin-bottom: 1.2em; }
.ut-sec__t { margin: 0; font-family: var(--display); font-weight: 500; font-size: var(--ut-h2); line-height: 1.1; letter-spacing: -0.03em; }
.ut-sec__n { margin-left: .35em; font-family: var(--font); font-size: var(--t-ui); font-weight: 500; letter-spacing: 0; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ut-more { font-size: var(--t-ui); font-weight: 600; color: var(--acc-text); white-space: nowrap; transition: color .25s ease; }
.ut-more:hover, .ut-more:focus-visible { color: var(--ink); }
.ut-more:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* phones: the shared phone card as list rows, two across */
.ut-phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8em 1em; margin: 0; padding: 0; list-style: none; }
.ut-phones > li { display: flex; min-width: 0; }
.ut-phones > li > .ct-card { flex: 1; }

/* stories: the shared story card in a calm grid */
.ut-river { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; }

/* phones to suggest: small cards, four across (five on very wide screens) */
.ut-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; margin: 0; padding: 0; list-style: none; }
.ut-grid > li { display: flex; min-width: 0; }
.ut-grid > li > .ct-card { flex: 1; }
.ut-grid > li:nth-child(n+5) { display: none; }

/* ---------- paper cards with quiet rows (brands, lists, ways onward) ---------- */
.ut-card { margin: 0; padding: .25em 1.3em; list-style: none; border-radius: 1.75em; background: var(--ut-paper); box-shadow: var(--ut-lift), inset 0 0 0 1px var(--ut-line); }
.ut-rows > li + li { border-top: 1px solid var(--ut-line); }
.ut-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1em; padding: .95em 0; }
.ut-row--ph { grid-template-columns: 3.4em minmax(0, 1fr) auto; }
.ut-row__ph { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: .85em; }
.ut-row__ph img { position: absolute; inset: 0; }
.ut-row__text { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.ut-row__t { font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); line-height: 1.2; letter-spacing: -0.02em; overflow-wrap: break-word; transition: color .25s ease; }
.ut-row__d { font-size: var(--t-meta); line-height: 1.4; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ut-row .sy-go { width: 2.5em; height: 2.5em; background: var(--ink); color: var(--bg); }
.ut-row:hover .ut-row__t, .ut-row:focus-visible .ut-row__t { color: var(--acc-text); }
.ut-row:hover .sy-go, .ut-row:focus-visible .sy-go { background: #E85002; color: #ffffff; }
.ut-row:hover .sy-go svg, .ut-row:focus-visible .sy-go svg { transform: rotate(45deg); }
.ut-row:hover .hp-ph img, .ut-row:focus-visible .hp-ph img { transform: scale(1.04); }
.ut-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: .6em; }

/* brands as chips */
.ut-chips { display: flex; flex-wrap: wrap; gap: .45em; margin: 0; padding: 0; list-style: none; }
.ut-chip { display: inline-flex; align-items: center; height: 2.6em; padding: 0 1.1em; border-radius: 999px; background: var(--ut-paper); box-shadow: inset 0 0 0 1px var(--ut-line-2); font-size: var(--t-ui); font-weight: 500; white-space: nowrap; transition: color .25s ease; }
.ut-chip:hover, .ut-chip:focus-visible { color: var(--acc-text); }
.ut-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* brands and lists after the results, and the suggestions when nothing matched */
.ut-also { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24em), 1fr)); gap: 2.4em 2em; align-items: start; }
.ut-suggest > .ut-sec { margin-bottom: 3.4em; }
.ut-suggest__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6em 2em; align-items: start; }

/* ---------- page numbers ---------- */
.ut-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5em; margin-top: 2.8em; }
.ut-pages__list { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; margin: 0; padding: 0; list-style: none; }
.ut-pg { display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-width: 3.1em; height: 3.1em; padding: 0 .5em; border-radius: 999px; background: var(--ut-paper); box-shadow: inset 0 0 0 1px var(--ut-line-2); color: var(--ink); font-size: var(--t-ui); font-weight: 500; font-variant-numeric: tabular-nums; transition: color .25s ease; }
a.ut-pg:hover, a.ut-pg:focus-visible { color: var(--acc-text); }
.ut-pg.is-on { background: #C8470A; color: #F9F9F9; box-shadow: none; }
.ut-pg--step { padding: 0 1.2em; }
.ut-pg--step svg { width: 1em; height: 1em; }
.ut-pg:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ut-pages__gap { padding: 0 .3em; color: var(--ink-3); }

/* ---------- ways onward as a row of paper tiles (the 404) ---------- */
.ut-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13em), 1fr)); gap: 1em; margin: 0; padding: 0; list-style: none; }
.ut-tiles > li { display: flex; min-width: 0; }
/* like the Best phones cards: the name, a line on what is there, the arrow in the corner */
.ut-tile { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; min-width: 0; padding: 1.25em 1em 1em 1.3em; border-radius: 1.75em; background: var(--ut-paper); box-shadow: var(--ut-lift), inset 0 0 0 1px var(--ut-line); }
.ut-tile .ut-row__text { display: contents; }
.ut-tile .ut-row__t { grid-column: 1 / -1; grid-row: 1; }
.ut-tile .ut-row__d { grid-column: 1 / -1; grid-row: 2; margin-top: .4em; text-wrap: pretty; }
.ut-tile .sy-go { grid-column: 2; grid-row: 3; align-self: end; margin-top: 1.3em; width: 2.5em; height: 2.5em; background: var(--ink); color: var(--bg); }
.ut-tile:hover .ut-row__t, .ut-tile:focus-visible .ut-row__t { color: var(--acc-text); }
.ut-tile:hover .sy-go, .ut-tile:focus-visible .sy-go { background: #E85002; color: #ffffff; }
.ut-tile:hover .sy-go svg, .ut-tile:focus-visible .sy-go svg { transform: rotate(45deg); }
.ut-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 1.75em; }

/* ---------- the sitemap: section name on the left, its pages on the right ---------- */
.ut-map__sec { display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr); gap: 1.4em 3em; padding: 2.4em 0 2.6em; border-top: 1px solid var(--ut-line); }
.ut-map__h2 { align-self: start; margin: 0; font-family: var(--display); font-weight: 500; font-size: var(--ut-h2); line-height: 1.1; letter-spacing: -0.03em; }
.ut-map__body { min-width: 0; }
.ut-map__groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr)); gap: 2em 2.5em; }
.ut-map__more-wrap { margin-top: 2.6em; }
.ut-map__h3 { margin: 0 0 1em; font-family: var(--font); font-size: var(--t-label); font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ut-map__cols { columns: 13em; column-gap: 2.5em; }
.ut-map__cols--wide { columns: 19em; }
.ut-map__cols > .ut-map__group { break-inside: avoid; margin-bottom: 2em; }
.ut-map__h4 { margin: 0 0 .65em; font-family: var(--font); font-size: var(--t-ui); font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.ut-map__h4 a { transition: color .25s ease; }
.ut-map__h4 a:hover, .ut-map__h4 a:focus-visible { color: var(--acc-text); }
.ut-map__list { display: grid; gap: .55em; margin: 0; padding: 0; list-style: none; }
.ut-map__list a { font-size: var(--t-ui); line-height: 1.4; color: var(--ink-2); transition: color .25s ease; }
.ut-map__list a:hover, .ut-map__list a:focus-visible { color: var(--acc-text); }
.ut-map__list a.ut-map__more { font-weight: 600; color: var(--ink); }
.ut-map__list a.ut-map__more:hover, .ut-map__list a.ut-map__more:focus-visible { color: var(--acc-text); }
.ut-map__list a:focus-visible, .ut-map__h4 a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.ut-map__empty { margin: 0; max-width: 36em; font-size: var(--t-ui); line-height: 1.5; color: var(--ink-3); }

/* ---------- responsive ---------- */
@media (min-width: 1800px) {
  .ut-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ut-grid > li:nth-child(5) { display: flex; }
}
@media (min-width: 981px) {
  /* the section name stays in view beside a long section */
  .ut-map__h2 { position: sticky; top: 1.5em; }
}
@media (max-width: 1300px) {
  .ut-river { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .ut { font-size: 15px; }
  .ut-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; }
  .ut-grid > li:nth-child(n+4) { display: none; }
  .ut-phones { grid-template-columns: minmax(0, 1fr); gap: .6em; }
  .ut-river { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75em; }
  .ut-suggest__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ut-map__sec { grid-template-columns: minmax(0, 1fr); gap: 1.4em; padding: 2em 0 2.2em; }
}
@media (min-width: 640px) and (max-width: 980px) {
  .ut-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .ut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em; }
  .ut-grid > li:nth-child(4) { display: flex; }
  .ut-tile { grid-template-rows: auto auto; column-gap: 1em; align-items: center; padding: 1.1em .9em 1.1em 1.2em; }
  .ut-tile .ut-row__t, .ut-tile .ut-row__d { grid-column: 1; }
  .ut-tile .sy-go { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
  .ut-tiles { gap: .6em; }
  .ut-suggest__cols { grid-template-columns: minmax(0, 1fr); gap: 2.2em; }
  .ut-pg--step span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ut-pg--step { padding: 0; min-width: 3.1em; }
}
@media (max-width: 560px) {
  .ut-river { grid-template-columns: minmax(0, 1fr); }
  .ut-sec + .ut-sec, .ut-sec + .ut-also { margin-top: 3em; }
  .ut-card { padding: .2em 1.1em; }
  .ut-search--lg { height: 3.75em; padding-left: 1.2em; }
  .ut-search--lg .ut-search__go, .ut-search--lg .sy-go { width: 3em; height: 3em; }
  .ut-map__cols { columns: 2; column-gap: 1.6em; }
  .ut-map__cols--wide { columns: 1; }
}
@media (max-width: 400px) {
  .ut-row--ph { grid-template-columns: 3em minmax(0, 1fr) auto; gap: .8em; }
}

/* touch screens: every control is at least 44px to hit */
@media (pointer: coarse) {
  .ut-chip { height: 44px; }
  .ut-seg { height: 52px; }
  .ut-pg { min-width: 44px; height: 44px; }
  .ut-search__go { width: 44px; height: 44px; }
  .ut-search__go .sy-go { width: 44px; height: 44px; }
  .ut-search { height: max(3.5em, 54px); }
  .ut-map__list { gap: 0; }
  .ut-map__list a { display: inline-block; padding: .55em 0; }
  .ut-more { display: inline-block; padding: .6em 0; margin: -.6em 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ut-search, .ut-row__t, .ut-chip, .ut-pg, .ut-seg a { transition: none; }
  .ut-row:hover .hp-ph img, .ut-row:focus-visible .hp-ph img { transform: none; }
}