/* Explore's one panel (js/explore-nav.js; README.md, "Explore: the panel"): the button in the row under the top
   bar (on phones, at the bottom over the tabs) and the panel it opens, a bubble that grows out of the button and
   shrinks back into it, as Orbit's groups do (css/style.css, "the bubble": its pop-grow and pop-shrink), with each
   choice a small card. Kept light so it opens smoothly: what grows is only its background (.xn-bg, a shell quick to
   draw each frame: the cards aren't redrawn under it as it grows), and the cards come in over it with a fade and a
   rise, a column at a time side by side, and go first as it closes. On Explore's page the shell is Liquid Glass,
   frosted and see-through like the groups' bubble, from its first frame. */

/* ---------- what the panel takes the place of: the mix's pills (their bubbles still open, for Build your own) ---------- */
.has-xnav .mix-bar > .mix-button { display: none; }
.has-xnav #groupBar { visibility: hidden; pointer-events: none; }   /* (only unseen: Orbit lays its top row out round it) */
.has-xnav #groupBar .group-pop { visibility: visible; pointer-events: auto; }

/* ---------- the button ---------- */
.xn-row { display: flex; justify-content: center; align-items: center; padding: 0; background: none; box-shadow: none; }
.xn-btn { --ring: linear-gradient(90deg, #0725f9, #8a2be2, #f70008); display: inline-flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); height: 44px; padding: 0 16px 0 12px; box-sizing: border-box;
  border: 2px solid transparent; border-radius: 999px; background: linear-gradient(#fff, #fff) padding-box, var(--ring) border-box; color: var(--btn-ink, #150e5e);
  font: inherit; font-family: var(--font-read, "Source Sans 3", system-ui, sans-serif); text-align: left; cursor: pointer; box-shadow: 0 4px 16px rgba(38, 27, 143, .14);
  transition: transform .3s var(--spring, ease); }
.xn-btn:hover { transform: translateY(-1px); }
.xn-btn:focus-visible { outline: 3px solid var(--btn-ring, #8a2be2); outline-offset: 2px; }
.xn-btn[aria-expanded="true"] { visibility: hidden; }   /* (the panel grew out of it, over it) */
.xn-btn-ico { flex: none; font-size: 20px; line-height: 1; }
.xn-btn-t { display: grid; min-width: 0; line-height: 1.1; }
.xn-btn-t b { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.xn-btn-t small { overflow: hidden; color: #6b5fd6; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.xn-down { flex: none; color: #8a86b5; font-size: 12px; }
.xn-dock { display: none; }

/* ---------- the panel ---------- */
.xn-pnl { position: fixed; z-index: 1600; display: flex; flex-direction: column; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); padding: 12px 18px 18px; box-sizing: border-box;
  color: var(--btn-ink, #150e5e); font-family: var(--font-read, "Source Sans 3", system-ui, sans-serif); isolation: isolate; }
.xn-bg { position: absolute; inset: 0; z-index: -1; border-radius: 26px; background: #f4f2fe; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 16px 40px rgba(38, 27, 143, .22); pointer-events: none; }
.xn-pnl[hidden] { display: none; }
[data-glass] .xn-bg { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(255, 255, 255, .35), 0 16px 40px rgba(38, 27, 143, .2); }
.xn-bg::before { content: ""; position: absolute; top: 9px; left: 12px; width: 24px; height: 9px; border-radius: 50%; background: rgba(211, 205, 251, .34); rotate: -40deg; pointer-events: none; }   /* (the bubbles' glint, tucked into the corner's curve) */
/* (a softer spring than the groups' bubble, and a touch quicker; closing eases out of the way) */
.xn-pnl.is-opening .xn-bg { animation: pop-grow .5s cubic-bezier(.22, 1.18, .36, 1) both; }
.xn-pnl.is-closing .xn-bg { animation: pop-shrink .24s cubic-bezier(.4, 0, .9, .6) both; }
.xn-pnl.is-closing { pointer-events: none; }
.xn-pnl.is-opening :is(.xn-head, .xn-intro, .xn-sec, .xn-search, .xn-opt, .xn-sub, .xn-none) { animation: xn-in .32s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(110ms + min(var(--k, 0), 10) * 20ms); }
.xn-pnl.is-closing > :not(.xn-bg) { animation: xn-out .12s ease-in both; }
@keyframes xn-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes xn-out { to { opacity: 0; transform: translateY(4px); } }
/* its head: where you are, centred where the button was, and × */
.xn-head { position: relative; display: flex; justify-content: center; align-items: center; min-height: 44px; margin-bottom: 12px; }
.xn-title { display: grid; justify-items: center; line-height: 1.15; text-align: center; }
.xn-title b { font-size: 16px; }
.xn-title small { color: #6b5fd6; font-size: 12px; font-weight: 700; }
.xn-intro { flex: none; margin: -6px 0 12px; color: #5d5a85; font-size: 14px; font-weight: 600; text-align: center; }
.xn-x { position: absolute; right: -4px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: var(--btn-tint, #efedfd); color: var(--btn-ink, #150e5e); font-size: 18px; line-height: 1; cursor: pointer; transition: transform .3s var(--spring); }
.xn-x:hover { transform: rotate(90deg) scale(1.1); }
/* two columns, who and what: never scrolled; everything fits (js/explore-nav.js fit(): a small window shrinks the
   columns a touch, with zoom, rather than scroll) */
.xn-cols { display: grid; grid-template-columns: 250px 1fr; align-items: start; gap: 20px; min-height: 0; margin: -4px -6px; padding: 4px 6px; overflow: hidden; }
.xn-col { min-width: 0; }
.xn-sec { margin: 0 6px 6px; color: #6b5fd6; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.xn-sub { margin: 10px 8px 2px; color: #8a86b5; font-size: 12px; font-weight: 800; }
/* 2 · what: big cards, two across, each with its picture (ART in js/explore-nav.js) */
.xn-list.is-what { grid-template-columns: 1fr 1fr; gap: 8px; }
.xn-list.is-what .xn-sub { grid-column: 1 / -1; margin-top: 8px; }
.xn-opt.is-big { gap: 12px; min-height: 76px; padding: 8px 12px 8px 8px; border-radius: 16px; }
.xn-opt.is-big .xn-ot b { font-size: 16px; line-height: 1.2; }
.xn-opt.is-big .xn-ot small { font-size: 12.5px; }
.xn-opt.is-big .xn-tick { position: absolute; top: 8px; right: 10px; }
.xn-art { display: grid; place-items: center; flex: none; width: 78px; height: 56px; border-radius: 12px; background: #f3f1fd; }
.xn-art svg { display: block; width: 72px; height: 52px; }
.xn-list { display: grid; gap: 6px; }
.xn-list[hidden] { display: none; }
/* each choice, a small card: white on the panel's lavender, a soft shadow; the one chosen wears the horizon's ring */
.xn-opt { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; box-sizing: border-box; border: 1.5px solid rgba(38, 27, 143, .06); border-radius: 14px;
  background: #fff; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(38, 27, 143, .06), 0 3px 10px rgba(38, 27, 143, .07); transition: transform .15s ease, box-shadow .15s ease; }
.xn-opt:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(38, 27, 143, .07), 0 8px 18px rgba(38, 27, 143, .12); }
.xn-opt:focus-visible { outline: 3px solid var(--btn-ring, #8a2be2); outline-offset: 2px; }
.xn-opt.is-on { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #0725f9, #8a2be2, #f70008) border-box; }
.xn-opt:disabled { opacity: .45; cursor: default; }
.xn-oico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: #f3f1fd; font-size: 17px; }
.xn-ot { display: grid; gap: 1px; min-width: 0; }
.xn-ot b { font-size: 15px; }
.xn-ot small { color: #5d5a85; font-size: 12.5px; line-height: 1.3; }
.xn-tick { margin-left: auto; color: #6b2fe0; font-weight: 800; }
.xn-search { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0 14px; border: 1.5px solid rgba(38, 27, 143, .06); border-radius: 999px; background: #fff; cursor: text;
  box-shadow: 0 1px 2px rgba(38, 27, 143, .06), 0 3px 10px rgba(38, 27, 143, .07); }
.xn-search:focus-within { border-color: #8a2be2; }
.xn-search input { flex: 1; min-width: 0; height: 42px; border: 0; background: none; color: inherit; font: 600 15px var(--font-read, sans-serif); outline: none; }
/* Ask: all the way across, on top, in the horizon's ring; its answers take the columns' place while you type */
.xn-ask { flex: none; margin: 0 0 14px; border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #0725f9, #8a2be2, #f70008) border-box; }
.xn-ask:focus-within { border-color: transparent; box-shadow: 0 0 0 4px rgba(138, 43, 226, .14), 0 3px 10px rgba(38, 27, 143, .07); }
.xn-ask input { height: 46px; font-size: 16px; }
.xn-res { display: grid; align-content: start; gap: 8px; min-height: 0; }
.xn-res[hidden], .xn-cols[hidden] { display: none; }
.xn-res .xn-sec { margin-top: 4px; }
.xn-res .xn-list.hits { grid-template-columns: 1fr 1fr; }
.xn-answer { display: grid; gap: 8px; }
.xn-askgo { justify-self: start; padding: 10px 16px; border: 0; border-radius: 999px; background: #21167c; color: #fff; font: 800 15px var(--font-read, sans-serif); cursor: pointer; }
.xn-askgo:disabled { opacity: .7; cursor: default; }
/* (the answer: the one part that may scroll, inside its own card, if it's long) */
.xn-answer-text { max-height: 34vh; max-height: 34dvh; overflow-y: auto; padding: 12px 16px; border-radius: 16px; background: #fff; font-size: 15px; line-height: 1.45;
  box-shadow: 0 1px 2px rgba(38, 27, 143, .06), 0 3px 10px rgba(38, 27, 143, .07); }
.xn-answer-text p { margin: 0 0 8px; }
.xn-answer-text ul { margin: 0 0 8px; padding-left: 20px; }
.xn-answer-text a { color: #4a28ee; font-weight: 700; }
.xn-answer-note { color: #6b6890; font-size: 12px; }
.xn-face { --ring: #8a2be2; display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #e7e4f6 center / cover; color: #150e5e; font-size: 11px; font-weight: 800;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ring); }
.xn-face.is-d { --ring: #0725f9; }
.xn-face.is-r { --ring: #f70008; }
.xn-none { margin: 8px; color: #5d5a85; font-size: 14px; }

/* ---------- phones: the button at the bottom, over the tabs; the panel grows upward from it ---------- */
@media (max-width: 700px) {
  body.has-xnav { --xn-h: 62px; padding-bottom: calc(var(--tabs-h, 0px) + var(--xn-h) + env(safe-area-inset-bottom, 0px)); }
  body.has-xnav.has-explore { --xp-h: var(--xn-h); }   /* (Explore's views keep clear of it: css/style.css, what sits along the bottom) */
  .xn-dock { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabs-h, 0px) + 12px + env(safe-area-inset-bottom, 0px)); z-index: 1150; display: flex; }
  .xn-dock .xn-btn { width: 100%; max-width: none; height: 50px; box-shadow: 0 10px 30px rgba(38, 27, 143, .25); }
  .xn-dock .xn-down { margin-left: auto; }
  /* (just the one button on phones, the one at the bottom: the row under the top bar, which only holds the
     row's copy of it, goes, and the views start straight under the top bar) */
  body.has-xnav.has-row { --row-h: 0px; }
  .has-xnav .nav-row:has(.xn-row) { display: none; }
  body.has-xnav.has-row .od { top: 10px; bottom: calc(var(--tabs-h, 0px) + var(--xn-h) + 12px + env(safe-area-inset-bottom, 0px)); }   /* (Orbit's dots and their numbers end above the button) */
  .has-xnav .site-foot { padding-bottom: calc(18px + var(--tabs-h, 0px) + var(--xn-h) + env(safe-area-inset-bottom, 0px)); }   /* (the footer's last links scroll clear of the button and the tabs) */
  body.has-xnav.has-explore.has-row .gen-main { padding-top: 12px; }
  .xn-pnl { max-height: calc(100dvh - 110px); padding: 12px 14px 8px; }
  .xn-pnl.is-opening .xn-bg { animation-name: xn-grow-up; }
  .xn-pnl.is-closing .xn-bg { animation-name: xn-shrink-up; }
  .xn-head { order: 9; flex: none; margin: 8px 0 0; }
  .xn-intro { order: 8; margin: 6px 0 0; font-size: 13px; }
  .xn-cols { grid-template-columns: 1fr; gap: 10px; }
  /* (phones, to fit with no scrolling: the groups two across, just their names; the questions two across, a small
     picture beside each) */
  .xn-col:first-child .xn-list:not(:empty) { grid-template-columns: 1fr 1fr; }
  .xn-col:first-child .xn-opt { gap: 8px; min-height: 40px; padding: 5px 8px; }
  .xn-col:first-child .xn-opt .xn-ot small { display: none; }
  .xn-col:first-child .xn-oico { width: 28px; height: 28px; font-size: 15px; border-radius: 8px; }
  .xn-col:first-child .xn-ot b { font-size: 13.5px; line-height: 1.15; }
  .xn-col:first-child .xn-tick { position: absolute; top: 3px; right: 6px; font-size: 12px; }
  .xn-list.hits { grid-template-columns: 1fr !important; }
  .xn-search { margin-bottom: 6px; }
  .xn-ask { margin-bottom: 10px; }
  .xn-ask input { height: 42px; font-size: 15px; }
  .xn-res .xn-list.hits { grid-template-columns: 1fr; }
  .xn-search input { height: 38px; }
  .xn-list.is-what { gap: 6px; }
  .xn-list.is-what .xn-sub { margin: 4px 6px 0; }
  .xn-opt.is-big { gap: 8px; min-height: 52px; padding: 5px 8px 5px 5px; border-radius: 14px; }
  .xn-art { width: 46px; height: 40px; border-radius: 9px; }
  .xn-art svg { width: 44px; height: 32px; }
  .xn-opt.is-big .xn-ot b { font-size: 13.5px; line-height: 1.15; }
  .xn-opt.is-big .xn-ot small { display: none; }
  .xn-opt.is-big .xn-tick { top: 3px; right: 6px; font-size: 12px; }
}
@keyframes xn-grow-up {
  from { clip-path: inset(calc(100% - var(--ph)) calc(50% - var(--pw) / 2) 0 calc(50% - var(--pw) / 2) round 999px); }
  to { clip-path: inset(-40px round 60px); }
}
@keyframes xn-shrink-up {
  from { clip-path: inset(-40px round 60px); }
  to { clip-path: inset(calc(100% - var(--ph)) calc(50% - var(--pw) / 2) 0 calc(50% - var(--pw) / 2) round 999px); opacity: .4; }
}
@media (prefers-reduced-motion: reduce) { .xn-pnl, .xn-pnl *, .xn-btn { animation: none !important; transition: none !important; } }