/* Whisk Ask — standalone UI, slice 26.5.
   Neutral palette (off-white / dark grey / one deep-blue accent).
   Serif for composed prose, sans for UI chrome — the split signals
   "this text was assembled from a knowledge graph, not typed by a UI." */

:root {
  --ask-bg: #f7f6f2;
  --ask-panel-bg: #ffffff;
  --ask-ink: #24262b;
  --ask-ink-soft: #5b5f68;
  --ask-border: #e2e0d9;
  --ask-accent: #1c3faa;
  --ask-accent-soft: #eef1fb;
  --ask-warn-bg: #fdf3e4;
  --ask-warn-border: #e8c88a;
  --ask-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --ask-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ask-radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ask-bg);
  color: var(--ask-ink);
  font-family: var(--ask-sans);
  -webkit-font-smoothing: antialiased;
}

.ask-app {
  /* FIX-10 (v0.22.3.3) — fill the browser window instead of capping
     at 1320px. Frees ~200-600px of horizontal real estate on modern
     desktops so the mind-map side panel + main-content column both
     get room to breathe. */
  max-width: none;
  margin: 0 auto;
  padding: 0 24px 40px;
}

/* ---------- Header ---------- */

.ask-header {
  padding: 32px 4px 18px;
  border-bottom: 1px solid var(--ask-border);
  margin-bottom: 22px;
  position: relative;
}

.ask-wordmark {
  font-family: var(--ask-serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--ask-ink);
  text-decoration: none;
}

.ask-wordmark-accent { color: var(--ask-accent); }

.ask-tagline {
  font-family: var(--ask-sans);
  font-size: 14px;
  color: var(--ask-ink-soft);
  max-width: 620px;
  margin: 8px 0 0;
}

.ask-header-links {
  position: absolute;
  right: 4px;
  top: 34px;
  display: flex;
  gap: 18px;
}

.ask-header-links a {
  font-size: 13px;
  color: var(--ask-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.ask-header-links a:hover { border-bottom-color: var(--ask-ink-soft); }

/* ---------- Search bar ---------- */

.ask-searchbar {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
}

.ask-search-input {
  flex: 1;
  font-family: var(--ask-serif);
  font-size: 18px;
  padding: 14px 18px;
  border: 1.5px solid var(--ask-border);
  border-radius: var(--ask-radius);
  background: var(--ask-panel-bg);
  color: var(--ask-ink);
}

.ask-search-input:focus {
  outline: none;
  border-color: var(--ask-accent);
}

.ask-search-submit {
  font-family: var(--ask-sans);
  font-size: 15px;
  font-weight: 600;
  padding: 0 26px;
  border: none;
  border-radius: var(--ask-radius);
  background: var(--ask-accent);
  color: #fff;
  cursor: pointer;
}

.ask-search-submit:hover { background: #16308a; }

/* ---------- Body layout ---------- */

.ask-body {
  display: grid;
  /* v0.22.6.0.3.1-alpha Option B — 2-column stacked layout. Left
     column stacks disambig sidebar (#ask-left) on top + mind-map
     sidebar (#ask-right) below. Answer (.ask-main) spans both rows
     in the right column so it gets the full page height alongside
     the stack. Prior 3-column layout (220 | 1fr | 440) squeezed the
     disambig tree; stacked model gives it full sidebar width AND
     keeps the mind map visible in the same column, just below.
     Named grid areas replace flex `order` reordering — grid ignores
     order when areas are set, so layout is now purely area-driven. */
  grid-template-columns: 340px minmax(0, 1fr);
  grid-template-areas:
    "left  answer"
    "map   answer";
  gap: 24px;
  align-items: start;
}
#ask-left  { grid-area: left; }
#ask-right { grid-area: map; }
.ask-main  { grid-area: answer; }

@media (max-width: 1180px) {
  /* Narrower screens: keep 2-column stacked, shrink the left column. */
  .ask-body { grid-template-columns: 300px minmax(0, 1fr); }
}
@media (max-width: 980px) {
  /* Mobile: single column stacked answer → disambig → map. */
  .ask-body {
    grid-template-columns: 1fr;
    grid-template-areas: "answer" "left" "map";
  }
}

/* FIX-12 (v0.22.3.3) — expanded mind-map mode: stacks map above the
   main-content and sidebar so both are visible via scrolling. Replaces
   the fullscreen modal overlay. Layout order: map / answer / left. */
.ask-body.ask-body-expanded {
  grid-template-columns: 1fr;
  grid-template-areas: "map" "answer" "left";
}
.ask-body.ask-body-expanded .ask-sidebar-right { position: static; }
.ask-body.ask-body-expanded #ask-cy {
  max-width: none;
  width: 100%;
  height: 780px;
}

.ask-sidebar {
  background: var(--ask-panel-bg);
  border: 1px solid var(--ask-border);
  border-radius: var(--ask-radius);
  padding: 16px;
  font-size: 13px;
  color: var(--ask-ink-soft);
  min-height: 120px;
  position: sticky;
  top: 20px;
}

.ask-sidebar h3 {
  font-family: var(--ask-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ask-ink-soft);
  margin: 0 0 10px;
}

.ask-sidebar h3:not(:first-child) { margin-top: 20px; }

.ask-sidebar ul { list-style: none; margin: 0; padding: 0; }

.ask-sidebar li { margin-bottom: 6px; }

.ask-sidebar a.ask-link,
.ask-sidebar button.ask-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--ask-accent);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.ask-sidebar a.ask-link:hover,
.ask-sidebar button.ask-link:hover { text-decoration: underline; }

.ask-breadcrumb {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ask-ink);
}

/* ---------- Empty state ---------- */

.ask-empty-state h2 {
  font-family: var(--ask-serif);
  font-size: 22px;
  margin: 6px 0 4px;
}

.ask-empty-note {
  font-size: 13.5px;
  color: var(--ask-ink-soft);
  margin: 0 0 16px;
}

.ask-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}

.ask-chip {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--ask-panel-bg);
  border: 1px solid var(--ask-border);
  border-radius: var(--ask-radius);
  padding: 12px 14px;
  cursor: pointer;
  font-family: var(--ask-sans);
}

.ask-chip:hover { border-color: var(--ask-accent); background: var(--ask-accent-soft); }

.ask-chip-category {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ask-accent);
  margin-bottom: 4px;
}

.ask-chip-question {
  display: block;
  font-family: var(--ask-serif);
  font-size: 15px;
  color: var(--ask-ink);
}

/* ---------- Answer ---------- */

.ask-answer-title {
  font-family: var(--ask-serif);
  font-size: 30px;
  margin: 0 0 4px;
}

.ask-answer-meta {
  font-size: 12px;
  color: var(--ask-ink-soft);
  margin-bottom: 6px;
  line-height: 1.55;
}

/* Item 2 (v0.22.6.0.3.2-alpha) — breadcrumb links + separator + current
   entity styling in the answer-meta subtitle. Links match the ink-soft
   colour with a subtle underline on hover; the current entity (last
   segment) is plain text with no interaction affordance. */
.ask-breadcrumb-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ask-link);
  cursor: pointer;
}
.ask-breadcrumb-link:hover,
.ask-breadcrumb-link:focus {
  text-decoration: underline;
  outline: none;
}
.ask-breadcrumb-sep {
  color: var(--ask-ink-soft);
  opacity: 0.6;
  margin: 0 2px;
}
.ask-breadcrumb-current {
  color: var(--ask-ink);
  font-weight: 500;
}
.ask-resolved-by {
  font-style: italic;
}

/* Item 4c (v0.22.6.0.3.4-alpha) — Earth entity's 3D scatter globe.
   The canvas sits inside `#earth-elevation-globe` (composer emits
   the placeholder div in a section's text_html for the Earth entity
   only). Legend below the canvas indicates the elevation-band
   colours. */
#earth-elevation-globe {
  display: block;
  min-height: 320px;
  margin-top: 12px;
}
.earth-globe-status {
  padding: 24px;
  text-align: center;
  color: var(--ask-ink-soft);
  font-style: italic;
}
.earth-globe-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.earth-globe-wrap canvas {
  display: block;
  background: #0b1622;
  border-radius: 8px;
  border: 1px solid var(--ask-border);
  user-select: none;
}
.earth-globe-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 18px;
  font-size: 12px;
  color: var(--ask-ink-soft);
}
.earth-globe-legend .chip {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.earth-globe-legend .earth-globe-count {
  color: var(--ask-ink);
  font-weight: 500;
  padding-left: 8px;
  border-left: 1px solid var(--ask-border);
  margin-left: 4px;
}

/* Item 6 (v0.22.6.0.3.3-alpha) — section body wrapper for text_html
   content. Kept minimal so inline entity anchors + inline block
   elements (like the Earth globe placeholder) both render cleanly. */
.ask-section-body {
  margin: 0 0 8px;
}

/* Item 4c (v0.22.6.0.3.4 hotfix4) — Earth flat map. Canvas holds
   the equirectangular elevation scatter; a sibling label layer
   positioned absolutely on top holds clickable continent + ocean
   overlays at each entity's centroid. */
/* v0.22.6.0.5 hotfix10 — band-cycle slider. .scatter-band groups
   fade in/out via opacity every 5 s; overlay text top-left shows
   the currently-active band + count. IntersectionObserver gates
   the cycle to the visible map only. */
.geo-scatter-mount {
  position: relative;
}
.geo-scatter-map {
  position: relative;
}
.scatter-band {
  transition: opacity 0.5s ease-in-out;
}
.geo-scatter-cycle-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--ask-border);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--ask-ink);
  /* v0.22.6.0.5.4 — was pointer-events:none; now interactive so the
     inline pause/play button is clickable. Individual elements
     inside the overlay handle their own hover/cursor. */
  pointer-events: auto;
  z-index: 3;
  transition: opacity 0.3s;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.geo-scatter-cycle-overlay:empty {
  opacity: 0;
}
.geo-scatter-cycle-toggle {
  background: transparent;
  border: 1px solid var(--ask-border);
  border-radius: 3px;
  padding: 1px 8px;
  font-size: 11px;
  color: var(--ask-ink);
  cursor: pointer;
  font-family: inherit;
}
.geo-scatter-cycle-toggle:hover { background: rgba(0,0,0,0.04); }
.geo-scatter-cycle-status {
  color: var(--ask-ink-soft);
}

/* v0.22.6.0.5.4 — interactive scatter dots. Hover highlight + pointer. */
.geo-scatter-svg .ask-scatter-dot {
  transition: filter 0.15s ease-in-out;
}
.geo-scatter-svg .ask-scatter-dot:hover {
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.5)) brightness(1.15);
}

/* v0.22.6.0.5.4 — interactive legend chips. Click a chip to isolate
   its band. Active/dimmed states show which band is isolated. */
.geo-scatter-legend-chip {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--ask-border);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  color: var(--ask-ink-soft);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, opacity 0.2s;
}
.geo-scatter-legend-chip:hover {
  background: rgba(0,0,0,0.03);
  color: var(--ask-ink);
}
.geo-scatter-legend-chip.is-active {
  background: var(--ask-ink);
  color: #fff;
  border-color: var(--ask-ink);
}
.geo-scatter-legend-chip.is-dimmed {
  opacity: 0.4;
}
.geo-scatter-legend-all {
  font-style: italic;
}

.earth-flatmap-mount {
  position: relative;
  display: block;
  margin: 8px auto 0;
  max-width: 760px;
}
.earth-flatmap-mount canvas {
  display: block;
  background: #0f2b47;
  border-radius: 8px;
  border: 1px solid var(--ask-border);
  width: 100%;
  height: auto;
}
.earth-flatmap-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.earth-flatmap-label {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 11px;
  color: #222;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
  z-index: 2;
}
.earth-flatmap-label:hover,
.earth-flatmap-label:focus {
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 2px var(--ask-link);
  z-index: 3;
}
.earth-flatmap-label.is-ocean {
  background: rgba(170, 210, 245, 0.92);
  font-style: italic;
}
.earth-flatmap-label.is-ocean:hover,
.earth-flatmap-label.is-ocean:focus {
  background: rgb(210, 230, 250);
}
.earth-flatmap-status {
  padding: 24px;
  text-align: center;
  color: var(--ask-ink-soft);
  font-style: italic;
}

/* v0.22.6.0.4-alpha — per-entity scatter SVG maps (4 sections per
   entity: elevation / climate / terrain / population). One shared
   payload from /api/v1/geo/scatter/{entity_id}; each section renders
   the same data with a different colour function. SVG chosen for
   shareability + lossless zoom. */
.geo-scatter-map {
  display: block;
  margin: 8px 0 0;
  max-width: 720px;
}
.geo-scatter-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--ask-border);
  background: #ffffff;
}
.geo-scatter-status {
  padding: 20px;
  text-align: center;
  color: var(--ask-ink-soft);
  font-style: italic;
}
.geo-scatter-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 12px;
  color: var(--ask-ink-soft);
  margin-top: 8px;
}
.geo-scatter-legend .chip {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.geo-scatter-legend .geo-scatter-count {
  color: var(--ask-ink);
  font-weight: 500;
  padding-left: 8px;
  border-left: 1px solid var(--ask-border);
  margin-left: 4px;
}

/* Inline entity links inside prose (Item 6). */
a.ask-inline-link {
  color: var(--ask-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a.ask-inline-link:hover,
a.ask-inline-link:focus {
  text-decoration-thickness: 2px;
  outline: none;
}

/* Slice 28.6 Item 1 — subtle "Grouped under: substance." metadata line */
.ask-grouped-under {
  font-family: var(--ask-sans);
  font-size: 12.5px;
  font-style: italic;
  color: var(--ask-ink-soft);
  margin: 0 0 18px;
}

/* Slice 28.6 Item 2 — alternate-senses block after primary answer */
.ask-alternate-senses {
  margin-top: 28px;
  padding: 14px 18px;
  border: 1px dashed var(--ask-border);
  border-radius: var(--ask-radius);
  background: rgba(28, 63, 170, 0.03);
}

.ask-alternate-senses h4 {
  font-family: var(--ask-sans);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ask-ink-soft);
  margin: 0 0 10px;
}

.ask-alternate-senses ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--ask-serif);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ask-ink);
}

.ask-alternate-senses li {
  margin-bottom: 6px;
}

.ask-alt-sense-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--ask-accent);
  cursor: pointer;
  text-align: left;
}

.ask-alt-sense-link:hover {
  text-decoration: underline;
}

.ask-callout {
  background: var(--ask-warn-bg);
  border: 1px solid var(--ask-warn-border);
  border-radius: var(--ask-radius);
  padding: 14px 16px;
  font-size: 13.5px;
  margin-bottom: 20px;
}

.ask-callout-title { font-weight: 700; margin: 0 0 4px; }

.ask-section { margin-bottom: 22px; }

.ask-section h4 {
  font-family: var(--ask-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ask-accent);
  margin: 0 0 8px;
}

.ask-section p {
  font-family: var(--ask-serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ask-ink);
  margin: 0 0 8px;
  white-space: pre-line;
}

.ask-concept-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.ask-concept-chip {
  font-family: var(--ask-sans);
  font-size: 11.5px;
  background: var(--ask-accent-soft);
  color: var(--ask-accent);
  border: none;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
}

.ask-concept-chip:hover { background: #dfe5f8; }

.ask-no-answer {
  font-family: var(--ask-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ask-ink);
}

/* ---------- References ---------- */

.ask-references {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--ask-border);
}

.ask-references h4 {
  font-family: var(--ask-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ask-ink-soft);
  margin: 0 0 8px;
}

.ask-references ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

/* Reference pill — used to be <li>, now <a> per C2. Selectors match both
   for defensive compatibility with any cached older markup. */
.ask-reference-pill {
  font-size: 12px;
  background: var(--ask-panel-bg);
  border: 1px solid var(--ask-border);
  border-radius: 999px;
  padding: 4px 12px;
  color: var(--ask-ink-soft);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.ask-reference-pill:hover {
  border-color: var(--ask-accent);
  color: var(--ask-accent);
}

.ask-reference-pill.primary {
  border-color: var(--ask-accent);
  color: var(--ask-accent);
}

.ask-ref-legend {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ask-ink-soft);
}

/* C3 — hover popup */
.ask-ref-popup {
  position: absolute;
  z-index: 1000;
  min-width: 200px;
  max-width: 280px;
  padding: 10px 12px;
  background: var(--ask-panel-bg);
  color: var(--ask-ink);
  border: 1px solid var(--ask-border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  font-family: var(--ask-sans);
  font-size: 12.5px;
  line-height: 1.45;
  pointer-events: none;
}

.ask-ref-popup-primary {
  font-weight: 700;
  color: var(--ask-accent);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.ask-ref-popup-portal {
  font-weight: 700;
}

.ask-ref-popup-desc {
  margin-top: 4px;
  color: var(--ask-ink-soft);
}

.ask-ref-popup-meta {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--ask-ink-soft);
}

.ask-copyright {
  margin-top: 16px;
  font-size: 11.5px;
  color: var(--ask-ink-soft);
  line-height: 1.5;
}

.ask-flag-link {
  background: none; border: none; padding: 0; margin-top: 10px;
  font-size: 11.5px; color: var(--ask-ink-soft); text-decoration: underline;
  cursor: pointer; display: inline-block;
}

/* ---------- Right sidebar / mind map ---------- */

.ask-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
}

.ask-map-header h3 {
  margin: 0;
}

.ask-map-expand {
  background: var(--ask-panel-bg);
  border: 1px solid var(--ask-border);
  border-radius: 6px;
  color: var(--ask-ink-soft);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 4px 8px;
}

.ask-map-expand:hover {
  color: var(--ask-accent);
  border-color: var(--ask-accent);
}

.ask-map-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.ask-map-toggle button {
  flex: 1;
  font-size: 11px;
  padding: 5px 4px;
  border: 1px solid var(--ask-border);
  background: var(--ask-panel-bg);
  color: var(--ask-ink-soft);
  border-radius: 6px;
  cursor: pointer;
}

.ask-map-toggle button.active {
  background: var(--ask-accent);
  border-color: var(--ask-accent);
  color: #fff;
}

#ask-cy {
  /* FIX-9 (v0.22.3.2) — enlarged side-panel to use the empty real estate
     around the previous 260px canvas. Width fills the panel up to
     380px; height 380px min so fcose can spread the layout instead of
     packing nodes over each other. */
  width: 100%;
  max-width: 380px;
  height: 380px;
  border: 1px solid var(--ask-border);
  border-radius: 8px;
  background: #fbfaf7;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.ask-map-note { font-size: 11.5px; margin-top: 8px; color: var(--ask-ink-soft); }

.ask-status {
  font-family: var(--ask-sans);
  font-size: 14px;
  color: var(--ask-ink-soft);
  padding: 40px 0;
  text-align: center;
}

/* ---------- Footer ---------- */

.ask-footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--ask-border);
  font-size: 11.5px;
  color: var(--ask-ink-soft);
  text-align: center;
}

/* ---------- Fullscreen mind map modal (B2) ---------- */

.ask-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 22, 26, 0.55);
  backdrop-filter: blur(2px);
}

.ask-modal[hidden] { display: none; }

body.ask-modal-open { overflow: hidden; }

.ask-modal-inner {
  position: relative;
  width: 90vw;
  height: 90vh;
  max-width: 1600px;
  background: var(--ask-panel-bg);
  border: 1px solid var(--ask-border);
  border-radius: 14px;
  padding: 20px 24px 16px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

.ask-modal-title {
  font-family: var(--ask-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ask-ink-soft);
  margin-bottom: 10px;
}

.ask-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--ask-ink-soft);
  cursor: pointer;
}

.ask-modal-close:hover { color: var(--ask-ink); }

#ask-cy-fullscreen {
  flex: 1;
  min-height: 0;
  border: 1px solid var(--ask-border);
  border-radius: 10px;
  background: #fbfaf7;
}

/* Slice 28.8 — disambiguation card (minimal — user's only task is
   picking the sense they meant). No cross-alias, no map, no metadata. */
.ask-disambig-subhead {
  font-family: var(--ask-sans);
  font-size: 14px;
  color: var(--ask-ink-soft);
  margin: 0 0 18px;
}

.ask-disambig-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ask-disambig-item {
  margin: 0 0 10px;
}

.ask-disambig-choice {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: var(--ask-panel-bg);
  border: 1px solid var(--ask-border);
  border-radius: var(--ask-radius);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 120ms ease, background 120ms ease;
}

.ask-disambig-choice:hover {
  border-color: var(--ask-accent);
  background: var(--ask-accent-soft);
}

.ask-disambig-choice-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.ask-disambig-title {
  font-family: var(--ask-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ask-ink);
}

.ask-disambig-pos {
  font-family: var(--ask-sans);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ask-accent);
  background: var(--ask-accent-soft);
  padding: 2px 8px;
  border-radius: 4px;
}

.ask-disambig-gloss {
  font-family: var(--ask-serif);
  font-size: 14.5px;
  color: var(--ask-ink-soft);
  line-height: 1.5;
}

/* Slice 28.8 — "Other places named X" section on WordNet-sense answers */
.ask-other-places {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--ask-border);
}

.ask-other-places h4 {
  font-family: var(--ask-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ask-ink-soft);
  margin: 0 0 8px;
}

.ask-other-places ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--ask-serif);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ask-ink);
}

.ask-other-places li {
  margin-bottom: 4px;
}

.ask-other-place-cat {
  font-family: var(--ask-sans);
  font-size: 11.5px;
  color: var(--ask-ink-soft);
  margin-left: 6px;
}

/* Slice 28.10 Item 4b — "Did you mean X?" hint strip above answer title */
.ask-didyoumean {
  font-family: var(--ask-sans);
  font-size: 13px;
  color: var(--ask-ink-soft);
  font-style: italic;
  margin: 0 0 8px;
  padding: 6px 12px;
  background: var(--ask-accent-soft);
  border-left: 3px solid var(--ask-accent);
  border-radius: 4px;
  display: inline-block;
}

.ask-didyoumean strong {
  color: var(--ask-accent);
  font-style: normal;
}

/* v0.22.3.1 FIX-4 — zero-meanings empty state + inline base-lemma link */
.ask-wordhub-empty {
  margin: 24px 0;
  padding: 18px 22px;
  background: var(--ask-accent-soft);
  border-left: 4px solid var(--ask-accent);
  border-radius: 6px;
  font-family: var(--ask-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ask-ink-soft);
}
.ask-wordhub-empty p { margin: 0 0 8px; }
.ask-wordhub-empty p:last-child { margin-bottom: 0; }
.ask-inline-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--ask-accent);
  text-decoration: underline;
  cursor: pointer;
}
.ask-inline-link:hover { color: var(--ask-ink); }

/* v0.22.4.21 — sparse-coverage phonetic-neighbor redirect chip.
 * Sits between the disambiguation subhead and the sense cards. Uses
 * a subtler background than `.ask-wordhub-empty` so users don't
 * misread it as an error state — the current word IS resolvable,
 * this is just a nudge. */
.ask-wordhub-spellcheck-chip {
  margin: 12px 0 20px;
  padding: 10px 14px;
  background: var(--ask-surface-soft, #f6f5f0);
  border: 1px solid var(--ask-border-soft, #e5e3d9);
  border-radius: 6px;
  font-family: var(--ask-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ask-ink-soft);
}
.ask-wordhub-spellcheck-chip .ask-inline-link {
  font-weight: 600;
}

/* v0.22.4.22 A.2 — Places bucket v2 (three-section nested hierarchy).
 * Sits inside the "Proper noun / Place" bucket; other buckets untouched. */
.ask-place-v2 { display: block; }
.ask-place-card {
  background: #fff; border: 1px solid #e6e3d9; border-radius: 8px;
  padding: 16px 20px; margin: 10px 0 12px;
}
.ask-place-section-heading {
  font-family: Georgia, "Iowan Old Style", serif; font-weight: 700;
  font-size: 16px; margin: 0 0 10px; color: #1c1b18;
}
.ask-place-v2 ul { list-style: none; margin: 0; padding: 0; }
.ask-place-entry { margin: 5px 0; }
.ask-place-choice {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--ask-accent, #2b4bb8); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
}
.ask-place-choice:hover { color: var(--ask-ink, #1c1b18); }

/* v0.22.6.0.5.11 — topical section pills. Each concept renders as
 * its own paragraph with a small label at the start. Labels sit in
 * the flow (not big header pills) so a topical section reads as
 * connected prose rather than disconnected "cards". */
.ask-topic-pill {
  margin: 8px 0;
  line-height: 1.55;
}
/* v0.22.6.0.5.17.3 — visible banner shown between fast-phase render
 * and topics-phase completion. Makes progress obvious — user sees
 * base content immediately + knows more is coming. Removed on the
 * second render pass (when topics lands + renderAnswer runs again). */
.ask-topics-loading-banner {
  margin: 8px 0 16px;
  padding: 10px 14px;
  background: linear-gradient(90deg, #fff7d4, #fef3b3);
  border: 1px solid #d1b26a;
  border-left: 4px solid #b8860b;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: #4a3808;
  animation: ask-loading-pulse 1.6s ease-in-out infinite;
}
.ask-topics-loading-banner strong { color: #2f2400; }
.ask-topics-loading-spinner {
  display: inline-block;
  margin-right: 6px;
  animation: ask-loading-spin 2s linear infinite;
}
@keyframes ask-loading-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.75; }
}
@keyframes ask-loading-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* v0.22.6.0.5.17 — Contains section styling for the topical HTML
 * variant. Headings sit as bold section-marks; sub-bullets indent
 * under them; anchors inside inherit the ink+underline pattern. */
.ask-contains-heading { margin: 8px 0 4px; font-size: 13px; }
.ask-contains-sub     { margin: 3px 0 3px 14px; font-size: 13px; color: var(--ask-ink); }
.ask-contains-flat    { margin: 8px 0 4px; font-size: 13px; }

/* v0.22.6.0.5.12 — SVG sky-widget mount. Small, inline, sits below
 * the pills of its topic section. Climate calendar spans full width;
 * moon phase is fixed 96px. Both stay lightweight (< 1 KB SVG). */
.sky-widget-mount {
  display: block;
  margin: 12px 0 4px;
  max-width: 480px;
}
.sky-widget-climate-calendar { max-width: 400px; }
.sky-widget-moon-phase { display: inline-block; max-width: 120px; }
.sky-widget-sun-path { max-width: 380px; }
.sky-widget-tide-clock { display: inline-block; max-width: 440px; }
.sky-widget-p2c { max-width: 480px; }
.sky-widget-svg {
  display: block;
  height: auto;
  border-radius: 4px;
}

/* v0.22.6.0.5.11.1 — topical pill label restored as a clickable
 * pill button (previously a span). Small rounded chip that reads as
 * "this is the concept name, click to see how it works" — same
 * affordance as the pre-topical concept chips. */
.ask-topic-pill-label {
  display: inline-block;
  font-family: var(--ask-sans, inherit);
  font-size: 11px;
  font-weight: 600;
  color: var(--ask-ink-soft, #524f47);
  background: var(--ask-surface-soft, #f6f5f0);
  border: 1px solid var(--ask-border-soft, #e5e3d9);
  border-radius: 10px;
  padding: 1px 8px;
  margin-right: 6px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: baseline;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ask-topic-pill-label:hover {
  background: var(--ask-accent, #2b4bb8);
  color: #fff;
  border-color: var(--ask-accent, #2b4bb8);
}
/* Topical section prose links (same rule as ask-df-prose links but
 * scoped to the wider .ask-section-body path so the topical anchors
 * inside the topical prose match Key-part-of styling exactly). */
.ask-section-body .ask-place-choice,
.ask-topic-pill .ask-place-choice {
  color: var(--ask-ink, #1c1b18);
  font-weight: normal;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.ask-section-body .ask-place-choice:hover,
.ask-topic-pill .ask-place-choice:hover { color: var(--ask-accent, #2b4bb8); }

/* v0.22.6.0.5.10 — inside derived-facts prose (nearby-peers etc.),
 * render peer names in the SAME dark ink as body text. Underline
 * signals click affordance; accent colour returns on hover. Prior
 * version kept accent-blue as base which read too "buttoned" in the
 * flow of prose. Operator directive: match the "Key part of" sober
 * feel. */
.ask-df-prose .ask-place-choice {
  color: var(--ask-ink, #1c1b18);
  font-weight: normal;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.ask-df-prose .ask-place-choice:hover,
.ask-df-prose .ask-place-choice:focus {
  color: var(--ask-accent, #2b4bb8);
}
.ask-place-anchor { font-weight: 600; }
.ask-place-pop {
  color: #524f47; font-size: 13px;
  margin-left: 10px; padding-left: 10px;
  border-left: 1px solid #d8d5c8;
}
.ask-place-coord {
  color: #948e7d; font-style: italic; font-size: 12px;
  margin-left: 10px; padding-left: 10px;
  border-left: 1px solid #d8d5c8;
}
.ask-place-count-hint { color: #7d7a6a; font-size: 13px; margin-left: 4px; }
.ask-place-contains-arrow { color: #4a7c9c; font-style: italic; margin-right: 4px; }
.ask-place-details > summary { cursor: pointer; list-style: none; padding: 2px 0; user-select: none; }
.ask-place-details > summary::before {
  content: '▸'; display: inline-block; width: 14px; color: var(--ask-accent, #2b4bb8);
}
.ask-place-details[open] > summary::before { content: '▾'; }
.ask-place-details > summary::-webkit-details-marker { display: none; }
.ask-place-nested {
  padding-left: 22px; border-left: 1px dashed #d2cebd; margin: 4px 0 4px 8px;
}
.ask-place-contains { border-left-color: #b7d4e6; }
.ask-place-inside-block {
  background: #f6f5f0; border-left: 2px solid #d2cebd;
  padding: 10px 14px; margin: 10px 0; border-radius: 4px;
}
/* v0.22.4.22-h2 — nested visual indent per hierarchy level.
 * Country header (level 0) → country-body content (level 1, +22px)
 * → admin1 heading (level 2, +22px again) → feature-cluster / name-
 * group entries (level 3) → nested rows inside a name-group (level 4).
 * Each level gets a dashed left border so the parent→child link is
 * unambiguous even when many siblings render at once. */
.ask-place-country { margin: 6px 0; }
.ask-place-country > summary {
  cursor: pointer; list-style: none; padding: 4px 0; user-select: none;
  color: #1c1b18; font-size: 14px;
}
.ask-place-country > summary::before {
  content: '▸'; display: inline-block; width: 14px; color: var(--ask-accent, #2b4bb8);
}
.ask-place-country[open] > summary::before { content: '▾'; }
.ask-place-country > summary::-webkit-details-marker { display: none; }
.ask-place-country-body {
  margin-left: 14px; padding-left: 12px;
  border-left: 1px dashed #d2cebd;
}
.ask-place-admin1 {
  margin: 8px 0 8px 12px; padding-left: 12px;
  border-left: 1px dashed #b7d4e6;
}
/* v0.22.4.22-h8 — "(no state)" / "Open water" admin1 groups don't
 * warrant their own heading + indent; feature-clusters render flush
 * against the country body. */
.ask-place-admin1.ask-place-admin1-elided {
  margin: 0; padding-left: 0; border-left: none;
}
.ask-place-admin1-heading {
  font-weight: 600; color: #3a3a35; margin: 4px 0; font-size: 14px;
}
/* v0.22.6.0.5.1 — admin2 / admin3 sub-blocks between admin1 and
 * feature_clusters. Same dashed-left-border pattern as admin1, one
 * shade lighter each level so the nesting reads visually. */
.ask-place-admin2 {
  margin: 6px 0 6px 10px; padding-left: 10px;
  border-left: 1px dashed #c8dfec;
}
.ask-place-admin2-heading {
  font-weight: 600; color: #4a4a42; margin: 3px 0; font-size: 13px;
}
.ask-place-admin3 {
  margin: 4px 0 4px 10px; padding-left: 10px;
  border-left: 1px dashed #d6e6f0;
}
.ask-place-admin3-heading {
  font-weight: 500; color: #5a5a4a; margin: 3px 0; font-size: 13px;
}
.ask-place-feature-cluster {
  margin: 4px 0 4px 12px; padding-left: 12px;
  border-left: 1px dashed #d2cebd;
}
.ask-place-feature-cluster > summary {
  cursor: pointer; list-style: none; padding: 2px 0; user-select: none;
  color: #3a3a35; font-size: 13px;
}
.ask-place-feature-cluster > summary::before {
  content: '▸'; display: inline-block; width: 14px; color: var(--ask-accent, #2b4bb8);
}
.ask-place-feature-cluster[open] > summary::before { content: '▾'; }
.ask-place-feature-cluster > summary::-webkit-details-marker { display: none; }

/* v0.22.3.1 FIX-2 — bucket-click / non-navigable node tooltip */
.ask-map-tooltip {
  position: absolute;
  padding: 4px 8px;
  background: rgba(28, 63, 170, 0.92);
  color: #fff;
  font-family: var(--ask-sans);
  font-size: 11px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}

/* v0.22.3 UX-5 — word-hub grouped disambiguation cards. */
.ask-wordhub-group {
  margin: 22px 0 8px;
  padding: 4px 10px;
  font-family: var(--ask-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ask-accent);
  background: var(--ask-accent-soft);
  border-left: 3px solid var(--ask-accent);
  border-radius: 4px;
  display: inline-block;
}
.ask-wordhub-count {
  color: var(--ask-ink-soft);
  font-weight: normal;
  font-size: 12px;
  margin-left: 4px;
}
.ask-wordhub-primary {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-family: var(--ask-sans);
  font-size: 10px;
  color: #b25a12;
  background: #fff2e6;
  border: 1px solid #e05d2f;
  border-radius: 3px;
  vertical-align: middle;
}

/* v0.22.1.7 — friendly cooling-off panel for rate-limited responses.
   Rendered instead of the empty entity/concept template when the client
   hits the anon per-IP rate limit. */
.ask-ratelimit {
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--ask-accent-soft);
  border-left: 4px solid var(--ask-accent);
  border-radius: 6px;
}
.ask-ratelimit .ask-answer-title {
  margin: 0 0 12px;
  font-size: 22px;
  color: var(--ask-ink);
}
.ask-ratelimit p {
  margin: 0;
  font-family: var(--ask-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ask-ink-soft);
}

/* Slice 28.10 Item 2 — Other-places rows render as clickable link-styled
   buttons; footer "See all N" is non-clickable this slice. */
.ask-place-link {
  font-family: var(--ask-serif);
  font-size: 14.5px;
  color: var(--ask-accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.ask-place-link:hover { text-decoration: underline; }

.ask-other-places-more {
  color: var(--ask-ink-soft);
  font-size: 13px;
  margin-top: 6px;
}

/* Slice 28.11 Item 3 — per-place page back-link at bottom */
.ask-back-link {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--ask-border);
}

.ask-back-link-btn {
  font-family: var(--ask-serif);
  font-size: 14.5px;
  color: var(--ask-accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.ask-back-link-btn:hover { text-decoration: underline; }

/* Slice 28.9 — About modal prose. Reuses .ask-modal / .ask-modal-inner
   shell from the fullscreen mind-map modal; overrides sizing for a
   readable card + adds serif prose typography. */
.ask-about-inner {
  width: min(720px, 92vw);
  height: auto;
  max-height: 88vh;
  overflow-y: auto;
}

.ask-about-prose {
  font-family: var(--ask-serif);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ask-ink);
  max-width: 60ch;
}

.ask-about-prose p {
  margin: 0 0 14px;
}

.ask-about-prose p:last-child {
  margin-bottom: 0;
}

/* Slice 29b-1 v4 C3 — stub badge, resolved-by marker, computation trails,
   elimination attempts. Honest-uncertainty voice; not color-coded pills. */
.ask-stub-badge {
  font-size: 13px;
  font-weight: 500;
  font-style: italic;
  color: var(--ask-ink-soft);
  margin-left: 8px;
  vertical-align: middle;
}

.ask-resolved-by {
  font-style: italic;
  color: var(--ask-ink-soft);
}

.ask-computation-trails {
  margin-top: 10px;
}

.ask-computation-trail {
  margin: 8px 0;
}

.ask-trail-toggle {
  background: none;
  border: none;
  padding: 4px 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--ask-accent);
  cursor: pointer;
  text-align: left;
}

.ask-trail-toggle:hover {
  text-decoration: underline;
}

.ask-trail-body {
  margin-top: 6px;
  padding: 10px 14px;
  border-left: 3px solid var(--ask-accent-soft);
  background: var(--ask-panel-bg);
  font-size: 14px;
  border-radius: 0 6px 6px 0;
}

.ask-trail-block {
  margin: 8px 0;
}

.ask-trail-block:first-child {
  margin-top: 0;
}

.ask-trail-block ul {
  margin: 4px 0 4px 20px;
  padding: 0;
}

.ask-trail-block code {
  background: var(--ask-accent-soft);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 13px;
}

.ask-trail-path {
  color: var(--ask-ink-soft);
  font-size: 12px;
}

.ask-trail-formula {
  background: var(--ask-bg);
  border: 1px solid var(--ask-border);
  padding: 8px 12px;
  border-radius: 4px;
  font-family: ui-monospace, "Cascadia Code", "Menlo", monospace;
  font-size: 13px;
  line-height: 1.5;
  margin: 6px 0;
  white-space: pre-wrap;
  overflow-x: auto;
}

.ask-trail-attribution {
  font-size: 12px;
  font-style: italic;
  color: var(--ask-ink-soft);
  margin-top: 8px;
}

.ask-elimination-attempts {
  margin: 20px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--ask-warn-border, #b58915);
  background: var(--ask-warn-bg, #fff9e6);
  border-radius: 0 6px 6px 0;
}

.ask-elimination-attempts h4 {
  margin: 0 0 8px;
  font-size: 15px;
}

.ask-elimination-attempt {
  margin: 6px 0;
}

.ask-elim-tried {
  margin: 4px 0 4px 20px;
  padding: 0;
  font-size: 13px;
}

/* Slice 29b-1 v6 Item 5 — dangling-ref chips (Wikipedia links not yet ingested) */
.ask-dangling-refs-section {
  margin: 22px 0;
}
.ask-dangling-refs-note {
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  color: var(--ask-ink-soft);
  margin-left: 6px;
}
.ask-dangling-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.ask-dangling-ref {
  padding: 4px 10px;
  border: 1px dashed var(--ask-border);
  border-radius: 12px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--ask-ink);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ask-dangling-ref:hover {
  background: var(--ask-accent-soft);
  border-color: var(--ask-accent);
}
.ask-dangling-ref:disabled {
  opacity: 0.6;
  cursor: wait;
}
.ask-dangling-more {
  font-size: 12px;
  color: var(--ask-ink-soft);
  margin-top: 6px;
}


@media (prefers-color-scheme: dark) {
  :root {
    --ask-bg: #17181c;
    --ask-panel-bg: #1f2126;
    --ask-ink: #eceef2;
    --ask-ink-soft: #9a9ea8;
    --ask-border: #303339;
    --ask-accent: #6f8fe8;
    --ask-accent-soft: #232a45;
    --ask-warn-bg: #2c260f;
    --ask-warn-border: #5a4a1c;
  }
  #ask-cy { background: #14161a; }
  #ask-cy-fullscreen { background: #14161a; }
  .ask-modal { background: rgba(0, 0, 0, 0.6); }
}

/* v0.22.4.1 Fix-E — inline "and N more" expand button used by Contains
   buckets, Also-called sentences, Names in other languages tiers. */
.ask-expand {
  color: var(--link-color, #2563eb);
  text-decoration: underline dotted;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}
.ask-expand:hover { text-decoration: underline; }
.ask-expand:focus-visible { outline: 2px solid var(--link-color, #2563eb); outline-offset: 2px; }

/* v0.22.4.2-alpha — Contains section now two-tier: a class header line
   ("Administrative divisions (29)") followed by one indented sub-bucket
   line per feature_code ("  Counties, districts, and sub-regions (27): ...").
   v0.22.4.3.1 — sub-bucket lines carry a leading bullet so the parent/
   child relationship reads even when a class has just one sub-bucket. */
.ask-contains-header { margin: 0.5em 0 0.15em 0; }
.ask-contains-sub    { margin: 0.1em 0 0.1em 1.5em; }
/* v0.22.4.11 Fix-B — flag tags after a foreign-language name. */
.ask-alias-flag      { color: var(--muted-color, #6b7280); font-style: italic; font-size: 0.9em; }
.ask-contains-bullet {
  display: inline-block;
  width: 1em;
  color: var(--muted-color, #6b7280);
  font-weight: 700;
}

/* v0.22.4.5 Fix-B/C — place-hierarchy tree inside the "Proper noun /
   Place" word-hub bucket. One block per same-admin cluster; entries
   indent by 1.5em per depth level; superseded H-suffix rows hide by
   default and reveal via the small toggle at the bottom of the block. */
.ask-place-group           { margin: 0.6em 0; }
.ask-place-group-heading   {
  font-weight: 600;
  color: var(--muted-color, #6b7280);
  margin-bottom: 0.25em;
}
/* v0.22.4.16 Fix-3 — Place bucket wraps in one white card container
   matching the Person / Common noun / Verb card chrome. */
.ask-place-card {
  background: #ffffff;
  padding: 12px 16px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
  .ask-place-card { background: #1e1e1e; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
}

/* v0.22.4.16 Fix-4 — hanging indent on bulleted lines so wrapped
   continuation aligns under the text, not the bullet. */
.ask-contains-sub, .ask-place-entry {
  padding-left: 1.5em;
  text-indent: -1em;
}

.ask-place-entry           {
  margin: 0.15em 0;
  display: flex;
  align-items: baseline;
  gap: 0.4em;
}
.ask-place-arrow           { color: var(--muted-color, #6b7280); flex: 0 0 auto; }
.ask-place-choice          {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--link-color, #2563eb);
  text-decoration: underline dotted;
  font: inherit;
}
.ask-place-choice:hover    { text-decoration: underline; }
.ask-place-meta            { color: var(--muted-color, #6b7280); font-size: 0.9em; }
.ask-place-entry-superseded .ask-place-choice,
.ask-place-entry-superseded .ask-place-meta { color: #9ca3af; font-style: italic; }
.ask-place-superseded-toggle {
  margin-top: 0.25em;
  margin-left: 1.5em;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--muted-color, #6b7280);
  font: inherit;
  font-size: 0.85em;
  text-decoration: underline dotted;
}

/* v0.22.4.6 Fix-B — inline "(admin1, country)" context suffix after
   each Place entry's clickable name. Same muted colour as .ask-place-meta
   so the eye reads name + place-context + feature-type as one line. */
.ask-place-ctx           { color: var(--muted-color, #6b7280); }

/* v0.22.4.6 Fix-D — peer-collapse row + expand-in-place children. The
   expand button reuses .ask-expand styling; the children container is
   indented one level (~1.5em) via the inline style set on each child
   render. */
.ask-place-peer-children { margin: 0.1em 0; }
.ask-place-peer-expand   { margin-left: 0.5em; }

/* v0.22.4.0 Fix-F — millisecond timer strip below the composed answer. */
.ask-status-timer { font-variant-numeric: tabular-nums; opacity: 0.7; }
.ask-generation-time {
  color: var(--muted-color, #6b7280);
  font-size: 0.85em;
  margin-top: 1em;
  font-style: italic;
}

/* CE.3 (v0.22.5.1-alpha) — inline SVG visualization for derived facts.
   Rendered above the collapsed computation trail; caption sits under
   the map in muted text. SVG uses currentColor for stroke inheritance
   so the map colors flow with the theme; explicit fills fall back to
   neutral greys. */
.ask-viz {
  margin: 10px 0;
  text-align: center;
}
.ask-viz svg {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule-color, #d1d5db);
  border-radius: 4px;
  background: transparent;
}
.ask-viz-caption {
  color: var(--muted-color, #6b7280);
  font-size: 0.85em;
  margin-top: 4px;
  font-style: italic;
}

/* CE.4 (v0.22.5.2-alpha) — solar clock visualization. Smaller than
   the map viz (~220×220) and no border since the clock face has its
   own ring styling. Centered same as .ask-viz. */
.ask-viz-clock svg {
  max-width: 240px;
  border: none;
  background: transparent;
}

/* v0.22.6.0.5.19.38 — expandable Nearby-5km sub-category tree */
.ask-nearby-5km {
  margin: 0.75em 0;
  padding: 0.75em 1em;
  background: #fafaf7;
  border: 1px solid #ece8d8;
  border-radius: 6px;
}
.ask-nearby-5km-heading {
  margin: 0 0 0.5em 0;
  font-size: 1em;
  font-weight: 600;
  color: #524f47;
}
.ask-nearby-5km-class {
  margin: 0.75em 0 1em 0;
}
.ask-nearby-5km-class-heading {
  font-weight: 700;
  font-size: 1.05em;
  color: #1a1918;
  margin-bottom: 0.35em;
  letter-spacing: 0.01em;
}
.ask-nearby-5km-subcat {
  margin: 0.2em 0 0.2em 0.75em;
  padding-left: 0.9em;
  border-left: 2px solid #c9c1a3;
  line-height: 1.5;
  font-size: 0.95em;
}
.ask-nearby-5km-subcat-label {
  color: #4a4740;
  font-weight: 500;
}
.ask-nearby-5km-more summary {
  outline: none;
}
.ask-nearby-5km-more summary::marker { content: ""; }
.ask-nearby-5km-more summary::-webkit-details-marker { display: none; }
.ask-nearby-5km-more[open] summary { color: #666; }