/* Ask (scripts/lib/components/ask.mjs, public/components/ask.js, public/ask-numbers.js; cards
   #839, #867). The big question box on /stats and the pilot guide pages: the frame, the
   goblin on the field, the sliding rail of example questions, and the answer area they fill.
   Past the box the reader gets a sticky dock: a bar under the header, the answer in a panel, and
   a fold tab (the last section). Tokens only: colors, sizes and widths come from styles.css :root. */

/* Every Ask root is a container for the answer layout, and carries the chart palette the
   renderer draws with (it was scoped to /stats; the pilot pages have no .st-page). */
/* The sticky dock's panel (end of this file) holds the moved answer outside the root, so it
   carries the same palette. */
/* lint-css-allow: color. The /stats chart palette, as on .ask-root below. */
.ask-dock-panel {
  --st-new: #2bb11f;
  --st-changed: #b35800;
  --st-unchanged: #82776c;
  --st-single: #b98c06;
}
.ask-root {
  container: ask / inline-size;
  /* lint-css-allow: color. The chart palette is the /stats one (stats.css .st-page), validated
     as marks on a dark ground; a dataviz scale, not part of the brand tokens. */
  --st-new: #2bb11f;
  --st-changed: #b35800;
  --st-unchanged: #82776c;
  --st-single: #b98c06;
}

/* ---------- The field, chips and help ---------- */

.ask-form { display: block; }
/* The field is one bordered bar with the Ask button inside its right end. */
.ask-field {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  background: var(--bg);
}
.ask-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ask-field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  min-height: 2.9rem;
  padding: 0 .5rem 0 .75rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 400 var(--fs-sm)/1.2 var(--font-ui);
}
.ask-field input:focus-visible { outline: none; }
.ask-go {
  flex: none;
  gap: .35rem;
  min-height: 2.3rem;
  margin: .3rem;
  padding: 0 .85rem;
}
.ask-go svg { width: .9rem; height: .9rem; }
.ask-go:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ask-go:disabled { opacity: .6; cursor: progress; }
.ask-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.ask-try { color: var(--ink-3); font: 400 var(--fs-2xs)/1 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; }
.ask-chip {
  min-height: 1.9rem;
  padding: .2rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--bg-3);
  color: var(--ink-2);
  font: 400 var(--fs-2xs)/1.3 var(--font-ui);
  text-align: left;
  cursor: pointer;
}
.ask-chip:hover { border-color: var(--accent); color: var(--ink); }
.ask-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ask-info {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--ink-2);
  font: 400 var(--fs-xs)/1 var(--font-ui);
  cursor: help;
}
.ask-info:hover { border-color: var(--accent); color: var(--ink); }
.ask-info:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ask-help {
  position: fixed;
  inset: auto;
  max-width: 22rem;
  margin: 0;
  padding: .55rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  background: var(--bg-3);
  color: var(--ink);
  font: 400 var(--fs-xs)/1.4 var(--font-body);
}

/* ---------- The answer area ----------
   One turn is a two-column grid when the root is wide enough: the question, answer, facts and
   links on the left; the chart in a framed panel on the right, drawn to the width of its
   column. The footer (next questions, actions) runs under both on one row. */

.ask-result { display: grid; gap: .5rem; padding-top: .55rem; border-top: 1px solid var(--line); }
.ask-result[hidden] { display: none; }
/* After the first answer the example chips give way to the answer's own follow-ups. */
.ask-root[data-ask-answered] .ask-chips[data-ask-chips] { display: none; }
.ask-thread { display: grid; gap: .6rem; transition: opacity .2s; }
/* The answer on screen while the next one streams in above it. */
.ask-thread.is-stale { opacity: .5; }
.ask-status:empty { display: none; }
/* Back and forward through this conversation's answers. */
.ask-history { display: flex; align-items: center; gap: .35rem; color: var(--ink-3); font: 400 var(--fs-2xs)/1.4 var(--font-ui); }
.ask-history[hidden] { display: none; }
.ask-history-btn { min-width: 1.9rem; min-height: 1.9rem; padding: 0 .4rem; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--bg-3); color: var(--ink); font: 600 1rem/1 var(--font-ui); cursor: pointer; }
.ask-history-btn:hover:not(:disabled) { border-color: var(--accent-text); }
.ask-history-btn:disabled { opacity: .4; cursor: default; }
.ask-history-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ask-turn[hidden] { display: none; }

/* ---------- Embeds from the guides (card #1014) ----------
   The mini talent tree, a guide video or screenshot, and a player quote. */
.ask-talents { --ask-cell: 1.35rem; }
.ask-tree-link { display: flex; flex-wrap: wrap; gap: .5rem .7rem; color: inherit; text-decoration: none; }
.ask-tree-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-ctl); }
.ask-tree-link:hover .ask-tree-name span { color: var(--ink); text-decoration: underline; }
.ask-tree { display: grid; gap: .25rem; align-content: start; }
.ask-tree.is-empty { opacity: .55; }
.ask-tree-name { display: flex; align-items: center; gap: .3rem; color: var(--ink-2); font: 400 var(--fs-2xs)/1.2 var(--font-ui); }
.ask-tree-name img { width: 1.1rem; height: 1.1rem; border-radius: 3px; }
.ask-tree-name b { margin-left: auto; color: var(--accent-text); font-weight: 700; }
.ask-tree-grid { display: grid; grid-template-columns: repeat(4, var(--ask-cell)); gap: .2rem; }
.ask-tal { position: relative; width: var(--ask-cell); height: var(--ask-cell); border-radius: 3px; outline: 1px solid var(--line); overflow: hidden; }
.ask-tal img { display: block; width: 100%; height: 100%; filter: grayscale(1) brightness(.45); }
.ask-tal.is-on { outline: 1px solid var(--st-new, #3fbf3f); }
.ask-tal.is-max { outline-color: var(--classic-yellow); }
.ask-tal.is-on img { filter: none; }
.ask-tal-rank { position: absolute; right: 0; bottom: 0; min-width: .7rem; padding: 0 .1rem; border-radius: 2px 0 0 0; background: rgb(0 0 0 / .8); color: var(--classic-yellow); font: 700 .58rem/1.1 var(--font-ui); text-align: center; }
@container ask (width >= 40rem) { .ask-talents { --ask-cell: 1.5rem; } }
.ask-media { gap: .3rem; width: 100%; max-width: 24rem; }
.ask-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-ctl); background: #000; }
.ask-media.is-vertical .ask-video { aspect-ratio: 9 / 16; max-width: 14rem; }
.ask-video iframe, .ask-video-play, .ask-video-play img { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.ask-video-play { position: relative; }
.ask-video-play:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ask-video-btn { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; width: 3rem; height: 2.1rem; border-radius: .5rem; background: rgb(0 0 0 / .72); color: #fff; font-size: 1rem; transform: translate(-50%, -50%); transition: background .15s; }
.ask-video-play:hover .ask-video-btn { background: #c00; }
.ask-shot { display: block; border-radius: var(--r-ctl); overflow: hidden; }
.ask-shot img { display: block; width: 100%; height: auto; max-height: 16rem; object-fit: contain; background: var(--bg); }
.ask-shot:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ask-media-caption { display: -webkit-box; margin: 0; overflow: hidden; color: var(--ink-2); font: 400 var(--fs-2xs)/1.4 var(--font-ui); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ask-quote { max-width: var(--measure); margin: .15rem 0 0; padding: .35rem .6rem; border-left: 2px solid var(--classic-yellow); background: var(--bg-3); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
.ask-quote blockquote { margin: 0; color: var(--ink); font: italic 400 var(--fs-sm)/1.45 var(--font-body); }
.ask-quote figcaption { margin-top: .2rem; color: var(--ink-3); font: 400 var(--fs-2xs)/1.4 var(--font-ui); }
.ask-quote a { color: var(--ink-2); }
.ask-quote a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ask-turn { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem .9rem; align-items: start; }
.ask-text { display: grid; gap: .35rem; min-width: 0; align-content: start; }
.ask-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .9rem; }
@container ask (width >= 40rem) {
  .ask-turn.has-chart { grid-template-columns: minmax(14rem, 2fr) minmax(0, 3fr); }
  .ask-turn.has-chart[data-even] { grid-template-columns: minmax(14rem, 1fr) auto; }
  .ask-turn[data-even] .ask-figure { justify-self: start; max-width: 100%; }
}
/* Several pictures (card #851) stack in the figure column, each in its own panel. */
.ask-figures { display: grid; gap: .5rem; min-width: 0; align-content: start; }
.ask-turn[data-even] .ask-figures .ask-figure { justify-self: start; max-width: 100%; }
.ask-asked { margin: 0; color: var(--ink-3); font: 400 var(--fs-xs)/1.4 var(--font-ui); overflow-wrap: anywhere; }
.ask-asked .ask-q { display: inline-block; padding: .1rem .5rem; border-radius: var(--r-ctl); background: var(--bg-3); color: var(--ink-2); }
.ask-context { color: var(--ink-3); font-size: var(--fs-2xs); }
.ask-context-label { text-transform: uppercase; letter-spacing: .06em; font-size: .64rem; }
.ask-answer { max-width: var(--measure); margin: 0; color: var(--ink); font: 400 .92rem/1.5 var(--font-body); }
.ask-answer.is-empty { color: var(--ink-2); }
/* The answer as it streams in, dimmed until the checked answer replaces it. */
.ask-answer.is-draft { margin-bottom: .35rem; color: var(--ink-2); }
/* Points: a list or breakdown the answer asked for, one short line each. */
.ask-points { display: grid; gap: .2rem; max-width: var(--measure); margin: 0; padding: 0; list-style: none; color: var(--ink); font: 400 var(--fs-sm)/1.45 var(--font-body); }
.ask-points li { position: relative; padding-left: .95rem; }
.ask-points li::before { content: ""; position: absolute; left: .1rem; top: .62em; width: .32rem; height: .32rem; border-radius: 50%; background: var(--classic-yellow); }
.ask-loading, .ask-error { margin: 0; color: var(--ink-2); font: 400 var(--fs-sm)/1.45 var(--font-body); }
.ask-error { color: var(--horde-text); }
.ask-error.is-quiet { color: var(--ink-2); }
.ask-error a { color: var(--accent-text); }
.ask-facts { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; color: var(--ink-2); font: 400 var(--fs-xs)/1.4 var(--font-body); }
.ask-facts li { position: relative; padding-left: .85rem; }
.ask-facts li::before { content: ""; position: absolute; left: 0; top: .72em; width: .4rem; height: 2px; background: var(--classic-yellow); opacity: .7; }
.ask-facts a { color: var(--accent-text); }
.ask-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; margin: 0; font: 400 var(--fs-xs)/1.4 var(--font-ui); }
.ask-links-label { color: var(--ink-3); font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; }
.ask-links a { color: var(--accent-text); }

/* The chart panel: a title bar with the legend on the same row, the plot, the source line. */
.ask-figure { display: grid; gap: .4rem; min-width: 0; margin: 0; padding: .45rem .6rem .5rem; border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--r-ctl); background: color-mix(in srgb, var(--bg) 55%, var(--bg-2)); }
.ask-figure-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .15rem .9rem; }
.ask-figure-title { margin: 0; color: var(--ink); font: 400 var(--fs-sm)/1.3 var(--font-ui); }
.ask-legend { display: flex; flex-wrap: wrap; gap: .15rem .8rem; margin: 0; padding: 0; list-style: none; color: var(--ink-2); font: 400 var(--fs-2xs)/1.3 var(--font-ui); font-variant-numeric: tabular-nums; }
.ask-legend li { display: inline-flex; align-items: center; gap: .3rem; }
.ask-key { display: inline-block; flex: none; width: .6rem; height: .6rem; border-radius: var(--r-ctl); }
.ask-legend-value { color: var(--ink); }
.ask-source { margin: 0; color: var(--ink-3); font: 400 var(--fs-2xs)/1.4 var(--font-ui); overflow-wrap: anywhere; }
.ask-source a { color: var(--ink-2); }
.ask-plot { min-width: 0; overflow-x: auto; }
.ask-plot.is-donut { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; overflow: visible; }
.ask-donut { flex: none; }
.ask-plot.is-donut .ask-legend { display: grid; grid-auto-flow: row; gap: .1rem 1rem; }
.ask-plot.is-donut .ask-legend li { display: flex; align-items: center; white-space: nowrap; }
.ask-plot.is-donut .ask-legend-name { flex: 1 1 auto; }
.ask-plot.is-donut .ask-legend-value { color: var(--ink); }
.ask-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.ask-svg text { font-family: var(--font-ui); }
.ask-svg-name { fill: var(--ink-2); font-size: 12px; }
.ask-svg-value { fill: var(--ink); font-size: 11px; font-variant-numeric: tabular-nums; }
.ask-svg-value.is-small { font-size: 9.5px; }
.ask-svg-tick { fill: var(--ink-3); font-size: 10px; font-variant-numeric: tabular-nums; }
.ask-svg-grid { stroke: var(--line); stroke-width: 1; }
.ask-svg-grid.is-base { stroke: var(--line-strong); }
.ask-svg-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ask-svg-area { opacity: .16; }
.ask-svg-dot { stroke: var(--bg-2); stroke-width: 1.5; }
.ask-svg-center { fill: var(--ink); font-size: 18px; font-variant-numeric: tabular-nums; }
.ask-svg-center-name { fill: var(--ink-2); font-size: 10px; }
.ask-table { width: auto; max-width: 100%; border-collapse: collapse; font: 400 var(--fs-xs)/1.3 var(--font-ui); font-variant-numeric: tabular-nums; }
.ask-table th, .ask-table td { padding: .22rem .7rem .22rem 0; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.ask-table th:first-child, .ask-table td:first-child { padding-right: 1.1rem; text-align: left; }
.ask-table th:last-child, .ask-table td:last-child { padding-right: 0; }
.ask-table thead th { padding-top: 0; color: var(--ink-3); font-weight: 400; font-size: var(--fs-2xs); text-transform: capitalize; }
.ask-table tbody tr:last-child th, .ask-table tbody tr:last-child td { border-bottom: 0; }
.ask-table tbody th { color: var(--ink); font-weight: 400; }

/* The footer row: next questions on the left, Copy Link / New Topic and the AI note on the right. */
.ask-next { flex: 1 1 auto; min-width: 0; }
.ask-next .ask-try { margin-right: .1rem; }
@container ask (width < 30rem) { .ask-next .ask-try { display: none; } }
.ask-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .8rem; }
.ask-mini, button.ask-note { padding: 0; border: 0; background: none; color: var(--ink-2); font: 400 var(--fs-2xs)/1.6 var(--font-ui); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.ask-mini:hover, button.ask-note:hover { color: var(--ink); }
.ask-mini:focus-visible, button.ask-note:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ask-mini[hidden] { display: none; }
.ask-note { margin: 0; color: var(--ink-3); font: 400 var(--fs-2xs)/1.6 var(--font-ui); }
button.ask-note { color: var(--ink-3); text-decoration-style: dotted; }
/* The AI note and, under it on an answer with the partner link, the affiliate note: two tight
   lines that fit the footer row's height (the follow-up chips are taller). */
.ask-notes { display: grid; justify-items: start; gap: 0; }
.ask-notes .ask-note { line-height: 1.25; }
.ask-notes .ask-note--affiliate { font-size: .66rem; }

/* ---------- The partner link (card #875) ----------
   RestedXP's first mention in an answer is a link in the answer's own color; a leveling answer
   that never names it ends with one plain line after the points. No box, no label. */
.ask-partner { color: var(--accent-text); text-decoration: underline; text-underline-offset: .15em; }
.ask-partner:hover { color: var(--ink); }
.ask-partner:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ask-partner-line { max-width: var(--measure); margin: .1rem 0 0; color: var(--ink-2); font: 400 var(--fs-sm)/1.45 var(--font-body); }

/* ---------- Answer links (cards #906) ----------
   A page the answer names is an inline link in the accent color. The build line is the one clear
   action under the points. Read more lists the pages behind the answer, quiet and compact. */
.ask-link { color: var(--accent-text); text-decoration: underline; text-underline-offset: .15em; }
.ask-link:hover { color: var(--ink); }
.ask-build { margin: .15rem 0 0; color: var(--accent-text); font: 600 var(--fs-sm)/1.35 var(--font-ui); }
.ask-build::before { content: "\2192\00a0"; }
.ask-build-link { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.ask-build-link:hover { color: var(--ink); }
.ask-more { display: grid; gap: .2rem; margin: .1rem 0 0; }
.ask-more-label { margin: 0; color: var(--ink-3); font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; }
.ask-more-list { display: grid; gap: .12rem; margin: 0; padding: 0 0 0 1.1em; list-style: disc; font: 400 var(--fs-xs)/1.4 var(--font-ui); }
.ask-more-list li { min-width: 0; }
.ask-more-list li::marker { color: var(--ink-3); }
.ask-more-page { color: var(--accent-text); overflow-wrap: anywhere; }
.ask-more-secs { color: var(--ink-3); font-size: var(--fs-2xs); }
.ask-more-secs a { color: var(--ink-2); }
.ask-more a:hover { color: var(--ink); }
.ask-link:focus-visible, .ask-build-link:focus-visible, .ask-more a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* A repeat game link is a button that pins its tooltip: no button chrome, the anchor's text. The
   quality color (.wh-link.q1 and so on) and the item icon (.wh-item[style]) come from styles.css,
   which wins over this reset on those two properties. The answer may sit in the dock panel. */
:where(.ask-root, .ask-dock-panel) button.wh-link {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  cursor: pointer;
}
:where(.ask-root, .ask-dock-panel) :is(.wh-link, .spell-link):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- A text answer's picture (card #875) ----------
   Tiles and the comparison table hug their content in the chart panel; the level strip and bars
   draw to the panel's width (components/ask.js). */
/* A split: one bar cut into its shares, the names and values under it. */
.ask-split { display: grid; gap: .35rem; min-width: min(100%, 16rem); }
.ask-split-bar { display: flex; gap: 2px; height: .8rem; overflow: hidden; border-radius: var(--r-ctl); }
.ask-split-part { flex: 0 1 0; min-width: 3px; }
/* Steps: numbered, the step in bold, its detail after it. */
.ask-steps { display: grid; gap: .2rem; margin: 0; padding-left: 1.3rem; color: var(--ink-2); font: 400 var(--fs-xs)/1.4 var(--font-ui); }
.ask-steps li::marker { color: var(--accent); font-variant-numeric: tabular-nums; }
.ask-step { color: var(--ink); font-weight: 600; }
.ask-step-detail::before { content: " · "; color: var(--ink-3); }
.ask-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .4rem .8rem; min-width: min(100%, 16rem); margin: 0; padding: 0; list-style: none; }
.ask-tile { display: grid; align-content: start; gap: .15rem; }
/* The UI face, not the display one: Presidency draws a bar through "$". */
.ask-tile-value { color: var(--ink); font: 600 1.4rem/1.1 var(--font-ui); font-variant-numeric: tabular-nums; }
.ask-tiles:has(> :only-child) .ask-tile-value { font-size: 1.8rem; }
.ask-tile-label { color: var(--ink-2); font: 400 var(--fs-2xs)/1.3 var(--font-ui); }
.ask-table.is-text th, .ask-table.is-text td { white-space: normal; text-align: left; vertical-align: top; }
.ask-table.is-text td { max-width: 14rem; color: var(--ink-2); }

/* ---------- The big box (card #867) ----------
   The frame, the goblin perched on the field, the quip and the sliding question rail: one
   markup (scripts/lib/components/ask.mjs, askBox) for /stats and the pilot guide pages. */

.st-ask {
  grid-template-columns: minmax(0, 1fr);
  display: grid;
  gap: .45rem;
  margin-top: var(--s-2);
  margin-bottom: var(--s-3);
  padding: .55rem .7rem .65rem;
  border: 1px solid color-mix(in srgb, var(--classic-yellow) 30%, var(--edge));
  border-top: 3px solid var(--classic-yellow);
  box-shadow: var(--panel-frame), 0 10px 28px -14px color-mix(in srgb, var(--classic-yellow) 45%, transparent);
  background:
    radial-gradient(ellipse 22rem 12rem at 4% 100%, color-mix(in srgb, var(--classic-yellow) 24%, transparent), transparent 70%),
    radial-gradient(ellipse 26rem 10rem at 100% 0%, color-mix(in srgb, var(--enter-red) 22%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--classic-yellow) 9%, var(--bg-2)), var(--bg-2) 70%);
  scroll-margin-top: var(--sticky-top);
}
.st-ask-intro h2 { text-shadow: 0 0 18px color-mix(in srgb, var(--classic-yellow) 35%, transparent); }
.st-ask .ask-field:not(:focus-within) { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--classic-yellow) 12%, transparent); }
.st-ask .ask-field:focus-within { border-color: var(--classic-yellow); box-shadow: 0 0 0 1px var(--classic-yellow); }
.st-ask-head { display: flex; align-items: flex-end; }
.st-ask-intro { display: grid; gap: .1rem; min-width: 0; }
.st-ask-intro h2 { margin: 0; }
/* The goblin perches on the field's left end: the typed text starts beside him. */
.st-ask .ask-field input { padding-left: 8.6rem; }
.st-ask .ask-chip:hover { border-color: var(--classic-yellow); }
.st-ask .ask-info:hover { border-color: var(--classic-yellow); }

/* The goblin sits on the input's top edge at its left end; the title and the typed text start
   beside him, so he never covers either. */
.st-ask-goblin {
  --gob-w: 8rem;
  position: absolute;
  left: .3rem;
  top: calc(var(--gob-w) * -0.65);
  width: var(--gob-w);
  pointer-events: none;
}
.st-ask-goblin img { display: block; width: 100%; height: auto; }
/* The live model's frame has headroom above the poster for raised arms; bottoms line up. */
.st-ask-goblin-3d { position: absolute; left: 0; bottom: 0; width: 100%; height: 135.2%; }
.st-ask-head { padding-left: 8.6rem; min-height: 4.4rem; align-items: flex-end; }
.st-ask-intro .st-ask-quip { display: flex; align-items: center; gap: .4rem; color: var(--classic-yellow); font: 400 var(--fs-sm)/1.35 var(--font-ui); }
.st-ask-gaze { position: absolute; inset: 0; background: url("/assets/tools/ask-goblin/goblin-gaze.webp") 50% 50% / 700% 300% no-repeat; }
.st-ask-gaze[hidden] { display: none; }
@container page (width < 30rem) {
  .st-ask-goblin { --gob-w: 5.8rem; }
  .st-ask .ask-field input { padding-left: 6.2rem; }
  .st-ask .ask-go { padding: 0 .6rem; }
  .st-ask-head { padding-left: 6.2rem; min-height: 3.8rem; }
}
/* At large text sizes, reserve the narrow box for the question and controls. */
@container ask (width < 14rem) {
  .st-ask-goblin { display: none; }
  .st-ask-head { padding-left: 0; min-height: 0; }
  .st-ask .ask-field input { padding-left: .75rem; }
  .st-ask-intro .st-ask-quip { flex-wrap: wrap; }
}
/* The question rail: one sliding row with arrows; the edges fade so it reads as more. */
.st-ask-rail { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.st-ask-rail .ask-chips {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, transparent, var(--ink) .75rem, var(--ink) calc(100% - 1.5rem), transparent);
}
.st-ask-rail .ask-chips::-webkit-scrollbar { display: none; }
.st-ask-rail .ask-chip { flex: none; scroll-snap-align: start; }
.st-ask-nav {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--classic-yellow);
  cursor: pointer;
}
.st-ask-nav svg { width: .85rem; height: .85rem; }
.st-ask-nav.is-prev svg { transform: rotate(180deg); }
.st-ask-nav:hover { border-color: var(--classic-yellow); }
.st-ask-nav:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.st-ask-nav[hidden] { display: none; }

/* On every content page the box follows the intro paragraph, above the TL;DR (card #963). Its
   Ask button is the gold one, not the red: the partner button stays the page's only red or
   orange one (TJ, 2026-10-03). Same display face and size as the red button on /stats; the gold
   is the site's accent. */
[data-intro] + .st-ask { margin-block: var(--s-3); }
.ask-go--gold {
  border: 1px solid color-mix(in srgb, var(--classic-yellow) 55%, var(--edge));
  background: var(--classic-yellow);
  box-shadow: none;
  font: 400 1.3rem/1 var(--font-display);
  letter-spacing: .03em;
}
.ask-go--gold, .ask-go--gold:hover { color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) {
  .ask-go--gold:hover { filter: brightness(1.08); box-shadow: none; }
}

/* ---------- The sticky dock (card #875) ----------
   Built by public/ask-numbers.js (no build markup). Once the reader scrolls past the big box, a
   slim bar sits under the site header: its own field, a gold Ask button, a Hide/Show Answer
   toggle and a fold button. The box's answer moves into the panel under the bar while docked.
   Folded, the bar slides up and a small tab hangs from the header's right end. Under the header
   (z-index 39 against its 40); when the header scrolls away (data-unstuck) the bar sits at 0. */

.ask-dock {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 39;
  transition: transform 150ms ease, visibility 0s linear 0s;
}
:root:has(.site-header[data-unstuck]) .ask-dock, :root:has(.site-header[data-unstuck]) .ask-dock-tab { top: 0; }
.ask-dock[hidden], .ask-dock-tab[hidden], .ask-dock [hidden] { display: none; }
/* Folded: slides up, then leaves the tab order and the accessibility tree. */
.ask-dock[data-folded] {
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 150ms ease, visibility 0s linear 150ms;
}
.ask-dock-inner {
  width: min(100% - 2 * var(--gutter), var(--page));
  margin-inline: auto;
  border-bottom: 3px solid var(--classic-yellow);
  background: var(--bg-2);
  box-shadow: 0 1px 0 var(--edge), 0 8px 16px -10px color-mix(in srgb, var(--bg) 85%, transparent);
}
.ask-dock-bar { display: flex; align-items: center; gap: .4rem; min-height: 3.25rem; padding: .4rem .5rem; }
.ask-dock-goblin { display: none; flex: none; width: 1.75rem; height: 1.75rem; object-fit: cover; object-position: 50% 12%; }
.ask-dock input {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.25rem;
  padding: 0 .6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-sm)/1.2 var(--font-ui);
}
.ask-dock input:focus { border-color: var(--classic-yellow); }
.ask-dock input:focus-visible, .ask-dock-toggle:focus-visible, .ask-dock-fold:focus-visible, .ask-dock-tab:focus-visible, .ask-dock .ask-go:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The Ask button is icon-only on phones (its name is the aria-label), "Ask →" from 30rem. */
.ask-dock .ask-go { flex: none; min-width: 2.5rem; min-height: 2.25rem; margin: 0; padding: 0; }
.ask-dock-go-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ask-dock[aria-busy="true"] .ask-go { cursor: progress; }
.ask-dock-toggle, .ask-dock-fold {
  flex: none;
  min-height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--bg-3);
  color: var(--ink-2);
  font: 400 var(--fs-2xs)/1 var(--font-ui);
  cursor: pointer;
}
.ask-dock-toggle { padding: 0 .55rem; }
.ask-dock-fold { display: grid; place-items: center; width: 2.25rem; padding: 0; color: var(--classic-yellow); }
.ask-dock-fold svg { width: 1rem; height: 1rem; }
.ask-dock-toggle:hover, .ask-dock-fold:hover { border-color: var(--classic-yellow); color: var(--ink); }
.ask-dock-panel {
  container: ask / inline-size;
  max-height: calc(100vh - var(--header-h) - 3.25rem - 1rem);
  max-height: calc(100dvh - var(--header-h) - 3.25rem - 1rem);
  padding: 0 .6rem .6rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--line);
  animation: ask-dock-in 150ms ease;
}
.ask-dock-panel .ask-result { padding-top: .6rem; border-top: 0; }
@keyframes ask-dock-in { from { transform: translateY(-.5rem); opacity: 0; } }

/* The tab a folded bar leaves behind. */
.ask-dock-tab {
  position: fixed;
  top: var(--header-h);
  right: var(--gutter);
  z-index: 39;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 2.5rem;
  padding: 0 .7rem;
  border: 1px solid var(--edge);
  border-top: 3px solid var(--classic-yellow);
  border-radius: 0 0 var(--r-ctl) var(--r-ctl);
  background: var(--bg-2);
  color: var(--ink);
  font: 400 .8rem/1 var(--font-ui);
  cursor: pointer;
  animation: ask-dock-in 150ms ease;
}
.ask-dock-tab img { width: 1.25rem; height: 1.25rem; object-fit: cover; object-position: 50% 12%; }
.ask-dock-tab:hover { border-top-color: var(--classic-yellow); background: var(--bg-3); }
@media (pointer: coarse) { .ask-dock-tab { height: 2.75rem; } }

@media (min-width: 30rem) {
  .ask-dock-go-text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .ask-dock .ask-go { padding: 0 .85rem; }
  .ask-dock-toggle { font-size: var(--fs-xs); padding: 0 .7rem; }
}
@media (min-width: 48rem) {
  .ask-dock-bar { min-height: 3rem; padding-block: .3rem; }
  .ask-dock-goblin { display: block; }
  .ask-dock input { max-width: 36rem; }
  .ask-dock-toggle { margin-left: auto; }
  .ask-dock-panel { max-height: min(28rem, calc(100vh - var(--header-h) - 4rem)); max-height: min(28rem, calc(100dvh - var(--header-h) - 4rem)); }
}
@media (max-width: 47.99rem) { .ask-dock-toggle { margin-left: auto; } }
@media (prefers-reduced-motion: reduce) {
  .ask-dock, .ask-dock[data-folded] { transition: none; }
  .ask-dock-panel, .ask-dock-tab { animation: none; }
}
/* While the bar is open, in-page links land below it too. */
:root:has(.ask-dock:not([hidden]):not([data-folded])) { scroll-padding-top: calc(var(--header-h) + 3.25rem + var(--s-5)); }