/*
 * KU Alumni design system — the assistant dock. Loaded after stage.css.
 *
 * One dark, frosted surface fixed to the bottom of the screen on every page.
 * It is a bar (on Home it also carries the map controls) that grows into the
 * conversation. It sits centred or docked on the right. Every change of
 * state animates the same four properties — left, width, height and corner
 * radius — so moving between pages, opening the chat and changing sides are
 * all one continuous motion. assistant-dock.js sets the state:
 *
 *   #assistantDock[data-mode]     bar | chat
 *   #assistantDock[data-place]    center | right
 *   #assistantDock[data-surface]  home | page | tool (tool: step aside)
 *   body[data-dock]               <place>-<mode>, or hidden
 */

.dk {
  --dk-gap: var(--shell-gap, 16px);
  --dk-ease: cubic-bezier(.22, .9, .24, 1);
  --dk-dur: 560ms;
  --dk-avail: calc(100vw - var(--content-left) - var(--page-pad));
  --dk-w: 620px;
  /* The bar plus the dock's 1px border on each side, so the bar is not squeezed. */
  --dk-h: calc(var(--dk-bar-h, 58px) + 2px);
  --dk-x: calc(var(--content-left) + (var(--dk-avail) - var(--dk-w)) / 2);
  --dk-radius: 29px;
  position: fixed;
  left: var(--dk-x);
  bottom: var(--dk-gap);
  z-index: 940;
  display: flex;
  flex-direction: column;
  /* While the dock grows or shrinks, the bar stays put at the bottom and
     the header is what the edge reveals or clips. */
  justify-content: flex-end;
  width: var(--dk-w);
  height: var(--dk-h);
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 1px solid var(--hline-strong);
  border-radius: var(--dk-radius);
  color: var(--hink);
  box-shadow: var(--hshadow), 0 18px 50px -24px rgba(6, 9, 18, .55);
  font-size: 14px;
  isolation: isolate;
  transition:
    left var(--dk-dur) var(--dk-ease),
    width var(--dk-dur) var(--dk-ease),
    height var(--dk-dur) var(--dk-ease),
    border-radius var(--dk-dur) var(--dk-ease),
    background-color 300ms var(--dk-ease),
    opacity 260ms var(--dk-ease),
    transform 360ms var(--dk-ease),
    visibility 0s linear 0s;
}

.dk {
  --dk-bg: rgba(12, 16, 27, .52);
}

/* The frosted glass lives on a layer behind the dock rather than on the dock
   itself: an element with its own backdrop blur becomes a "backdrop root", and
   the country list opening above the bar would only blur the empty dock, not
   the globe behind it. */
.dk::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--dk-bg);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  transition: background-color 300ms var(--dk-ease);
  content: "";
  pointer-events: none;
}

.dk svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.dk[hidden],
.dk [hidden] {
  display: none !important;
}

/* ------------------------------------------------------------- geometry */

/* On Home the bar sits in the open column between the outcome cards and
   the location panel; the dock measures that column (--dk-home-*). */
.dk[data-surface="home"][data-mode="bar"] {
  --dk-w: min(600px, var(--dk-home-room, 600px));
  --dk-x: calc(var(--dk-home-center, 50vw) - var(--dk-w) / 2);
}

.dk[data-mode="chat"] {
  --dk-w: min(880px, calc(var(--dk-avail) - 32px));
  --dk-h: min(calc(100vh - var(--topbar-h) - var(--dk-gap) * 2 - 6px), 920px);
  --dk-radius: 24px;
  overflow: hidden;
  --dk-bg: rgba(12, 16, 27, .72);
}

.dk[data-place="right"] {
  --dk-w: min(440px, calc(100vw - 32px));
  --dk-x: calc(100vw - var(--dk-w) - var(--dk-gap));
}

.dk[data-place="right"][data-surface="home"][data-mode="bar"] {
  --dk-w: min(600px, calc(100vw - 32px));
  --dk-x: calc(100vw - var(--dk-w) - var(--dk-gap));
}

.dk[data-place="right"][data-mode="chat"] {
  --dk-h: calc(100vh - var(--topbar-h) - var(--dk-gap) - 12px);
}

/* A tool window is in front: the dock steps aside, then stops taking part. */
.dk[data-surface="tool"] {
  opacity: 0;
  transform: translateY(18px) scale(.98);
  visibility: hidden;
  pointer-events: none;
  transition:
    left var(--dk-dur) var(--dk-ease),
    width var(--dk-dur) var(--dk-ease),
    height var(--dk-dur) var(--dk-ease),
    border-radius var(--dk-dur) var(--dk-ease),
    opacity 220ms var(--dk-ease),
    transform 300ms var(--dk-ease),
    visibility 0s linear 300ms;
}

/* ------------------------------------------------------------ chat frame */

.dk-head,
.dk-body {
  display: none;
}

.dk[data-mode="chat"] .dk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
  height: 58px;
  padding: 0 10px 0 16px;
  border-bottom: 1px solid var(--hline);
  animation: dk-reveal 360ms var(--dk-ease) 80ms both;
}

.dk[data-mode="chat"] .dk-body {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  animation: dk-reveal 420ms var(--dk-ease) 120ms both;
}

@keyframes dk-reveal {
  from { opacity: 0; transform: translateY(10px); }
}

.dk-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dk-title-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: var(--level-strong);
  background: #ffffff;
}

.dk-title-mark svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}

.dk-title-copy {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}

.dk-title-copy strong {
  font-size: 14px;
  font-weight: 650;
}

.dk-title-copy small {
  overflow: hidden;
  color: var(--hink-3);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dk-head-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

.dk-icon-button {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--hink-2);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: color 160ms, background-color 160ms;
}

.dk-icon-button:hover:not(:disabled) {
  color: var(--hink);
  background: var(--hfill);
}

.dk-icon-button:disabled {
  opacity: .4;
  cursor: default;
}

.dk-new {
  display: inline-flex;
  gap: 6px;
  width: auto;
  padding: 0 12px 0 9px;
  border-radius: var(--r-pill, 999px);
  font-size: 12.5px;
  font-weight: 560;
}

.dk-new svg {
  width: 15px;
  height: 15px;
}

.dk-transcript {
  height: 100%;
  padding: 22px 22px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
  scrollbar-width: thin;
}

.dk-transcript:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .3);
  outline-offset: -4px;
}

.dk-jump {
  position: absolute;
  bottom: 12px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--hline-strong);
  border-radius: 999px;
  color: var(--hink);
  background: rgba(24, 29, 42, .96);
  box-shadow: var(--hshadow);
  font-size: 12px;
  transform: translateX(-50%);
  cursor: pointer;
}

.dk-jump svg {
  width: 14px;
  height: 14px;
}

.dk-full {
  position: absolute;
  right: 14px;
  bottom: 10px;
  left: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 196, 92, .35);
  border-radius: 14px;
  background: rgba(58, 42, 14, .96);
}

.dk-full strong {
  font-size: 13px;
}

.dk-full p {
  margin: 2px 0 0;
  color: var(--hink-2);
  font-size: 12.5px;
}

.dk-notice {
  display: none;
}

.dk[data-mode="chat"] .dk-notice:not([hidden]),
.dk-notice:not([hidden]):not(:empty) {
  display: block;
  flex: none;
  margin: 0 14px 2px;
  padding: 8px 12px;
  border-radius: 12px;
  color: var(--hink-2);
  background: var(--hfill);
  font-size: 12.5px;
}

.dk[data-mode="bar"] .dk-notice {
  position: absolute;
  right: 12px;
  bottom: calc(100% + 10px);
  left: 12px;
  margin: 0;
  background: rgba(12, 16, 27, .72);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--hline);
}

.dk-ghost {
  flex: none;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--hline-strong);
  border-radius: 999px;
  color: var(--hink);
  background: var(--hfill);
  font-size: 12.5px;
  font-weight: 560;
  cursor: pointer;
}

.dk-ghost:hover:not(:disabled) {
  border-color: var(--hline-strong);
  color: var(--hink);
  background: var(--hfill-strong);
}

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

.dk-bar {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex: none;
  margin: 0;
  padding: 7px;
}

.dk[data-mode="chat"] .dk-bar {
  padding: 8px 12px 12px;
}

/* Map controls belong to Home's bar; elsewhere they fold away. */
.dk-map,
.dk-tools {
  display: flex;
  align-items: center;
  flex: none;
  max-width: 260px;
  height: 42px;
  overflow: hidden;
  opacity: 1;
  white-space: nowrap;
  transition:
    max-width var(--dk-dur) var(--dk-ease),
    margin var(--dk-dur) var(--dk-ease),
    padding var(--dk-dur) var(--dk-ease),
    opacity 240ms var(--dk-ease);
}

.dk-map {
  margin-right: 8px;
  border: 0 !important;
}

.dk-map button {
  height: 34px;
  padding: 0 13px;
  font-size: 13px;
}

.dk-tools {
  gap: 2px;
  margin-left: 6px;
  padding-left: 6px;
  border-left: 1px solid var(--hline);
}

.dk:not([data-surface="home"]) .dk-map,
.dk:not([data-surface="home"]) .dk-tools,
.dk[data-search="ai"] .dk-map,
.dk[data-search="ai"] .dk-tools,
.dk[data-mode="chat"] .dk-map,
.dk[data-mode="chat"] .dk-tools {
  max-width: 0;
  margin: 0;
  padding: 0;
  border-left-width: 0;
  opacity: 0;
  pointer-events: none;
}

.dk[data-place="right"] .dk-map span {
  display: none;
}

.dk-field {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  padding: 0 4px 0 6px;
  border: 1px solid var(--hline);
  border-radius: 21px;
  background: var(--hfill);
  transition: border-color 160ms, background-color 160ms;
}

.dk-field:focus-within {
  border-color: rgba(255, 255, 255, .32);
  background: var(--hfill-strong);
}

.dk-field-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 40px;
  color: var(--level);
}

.dk-field-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}

.dk-focus:not([hidden]) + .dk-field-icon {
  display: none;
}

.dk-focus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  max-width: min(220px, 42%);
  height: 28px;
  margin: 6px 4px 6px 1px;
  padding: 0 10px 0 8px;
  border: 1px solid rgba(169, 143, 255, .45);
  border-radius: 999px;
  color: #ddd2ff;
  background: rgba(140, 108, 247, .2);
  font-size: 12.5px;
  font-weight: 560;
  white-space: nowrap;
  cursor: pointer;
  transition: color 200ms, background-color 200ms, border-color 200ms, opacity 200ms;
}

.dk-focus svg {
  width: 14px;
  height: 14px;
}

.dk-focus span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dk-focus:hover {
  border-color: rgba(169, 143, 255, .45);
  color: #ddd2ff;
  background: rgba(140, 108, 247, .3);
}

.dk-focus[aria-pressed="false"] {
  border-style: dashed;
  border-color: var(--hline-strong);
  color: var(--hink-3);
  background: transparent;
}

/* The foundation's form styles are !important; the dock's field is not a
   form box, so it overrides them. */
.dk .dk-field textarea,
.dk .dk-field textarea:hover,
.dk .dk-field textarea:focus {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  max-height: 180px;
  margin: 0;
  padding: 10px 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  color: var(--hink) !important;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 14px !important;
  line-height: 20px;
  resize: none;
}

.dk .dk-field textarea::placeholder {
  color: var(--hink-3) !important;
}

.dk-field textarea:disabled {
  cursor: not-allowed;
}

.dk-meter {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 42px;
  margin-left: 4px;
}

.dk[data-mode="bar"] .dk-meter {
  display: none;
}

.dk-meter svg {
  width: 20px;
  height: 20px;
  transform: rotate(-90deg);
}

.dk-meter circle {
  fill: none;
  stroke-width: 2.6;
}

.dk-meter-track {
  stroke: var(--hline-strong);
}

.dk-meter-value {
  stroke: var(--level);
  transition: stroke-dasharray 400ms var(--dk-ease);
}

.dk-meter[data-level="mid"] .dk-meter-value {
  stroke: #ffc65c;
}

.dk-meter[data-level="high"] .dk-meter-value {
  stroke: #ff7a59;
}

.dk-open {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--hline-strong);
  border-radius: var(--r-pill);
  color: var(--hink-2);
  background: var(--dk-bg);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: none;
  cursor: pointer;
  transform: translateX(-50%);
  transition: color 160ms, background-color 160ms, opacity 200ms;
}

.dk-open:hover,
.dk-open:focus-visible,
.dk-open:active {
  color: var(--hink);
  background: var(--hglass-strong);
  transform: translateX(-50%);
}

.dk-open svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

/* The pill only expands the bar; the header's own button collapses it. */
.dk[data-mode="chat"] .dk-open {
  display: none;
}

.dk-open.has-news::after {
  position: absolute;
  top: 4px;
  right: 8px;
  width: 7px;
  height: 7px;
  border: 1.5px solid rgb(12, 16, 27);
  border-radius: 50%;
  background: var(--level);
  content: "";
}

.dk-send {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--hdark);
  background: #ffffff;
  box-shadow: none;
  cursor: pointer;
  transition: opacity 160ms, transform 160ms;
}

.dk-send:hover:not(:disabled) {
  color: var(--hdark);
  background: #ffffff;
  transform: translateY(-1px);
}

.dk-send:disabled {
  opacity: .28;
  cursor: default;
}

.dk-send svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

.dk-stop svg {
  fill: currentColor;
  stroke: none;
}

/* Home's AI field is a search field too; AI-only controls wait for a
   question when chat is not allowed. */
.dk[data-ai="off"] .dk-send,
.dk[data-ai="off"] .dk-open,
.dk[data-ai="off"][data-surface="page"] {
  display: none;
}

/* ------------------------------------------------------------- suggest */

.dk-suggest {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  left: 0;
  z-index: 5;
  display: grid;
  gap: 2px;
  max-height: min(340px, 46vh);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--hline-strong);
  border-radius: 16px;
  background: var(--hglass-strong);
  box-shadow: var(--hshadow);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  list-style: none;
}

.dk-suggest li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--hink);
  font-size: 13px;
  cursor: pointer;
}

.dk-suggest li svg {
  width: 15px;
  height: 15px;
  color: var(--hink-3);
}

.dk-suggest li.is-ask svg {
  color: var(--level);
  fill: currentColor;
  stroke: none;
}

.dk-suggest li > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dk-suggest em {
  color: var(--hink-2);
  font-style: normal;
}

.dk-suggest small {
  flex: none;
  color: var(--hink-3);
  font-size: 11.5px;
}

.dk-suggest b {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--hdark);
  background: var(--level);
  font-size: 11.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.dk-suggest kbd {
  flex: none;
  padding: 1px 6px;
  border: 1px solid var(--hline-strong);
  border-radius: 6px;
  color: var(--hink-3);
  font: inherit;
  font-size: 11px;
}

.dk-suggest li[aria-selected="true"],
.dk-suggest li[role="option"]:hover {
  background: var(--hfill-strong);
}

.dk-suggest .dk-suggest-heading {
  padding: 6px 10px;
  color: var(--hink-3);
  font-size: 11.5px;
  font-weight: 550;
  cursor: default;
}

/* ----------------------------------------------------------- transcript */

.dk-welcome {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 560px;
  margin: max(4vh, 12px) auto 0;
  text-align: center;
}

.dk-welcome-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: 14px;
  color: var(--level-strong);
  background: #ffffff;
}

.dk-welcome-mark svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: none;
}

.dk-welcome h2 {
  margin: 0;
  color: var(--hink);
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.dk-welcome p {
  margin: 0;
  color: var(--hink-2);
  font-size: 13.5px;
  line-height: 1.55;
}

.dk-welcome b {
  color: var(--hink);
}

.dk-starters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 12px;
}

.dk[data-place="right"] .dk-starters {
  grid-template-columns: minmax(0, 1fr);
}

.dk-starters button {
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--hline);
  border-radius: 14px;
  color: var(--hink-2);
  background: var(--hfill);
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: color 160ms, background-color 160ms, border-color 160ms;
}

.dk-starters button:hover {
  border-color: var(--hline-strong);
  color: var(--hink);
  background: var(--hfill-strong);
}

.dk-turn {
  max-width: 760px;
  margin: 0 auto 34px;
}

.dk-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.dk-user p {
  max-width: 86%;
  margin: 0;
  padding: 10px 16px;
  border-radius: 20px 20px 6px 20px;
  color: var(--hink);
  background: rgba(255, 255, 255, .1);
  font-size: 14.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.dk-token {
  padding: 0 4px;
  border-radius: 6px;
  color: #ddd2ff;
  background: rgba(140, 108, 247, .28);
}

.dk-scopes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.dk-scope-chip {
  padding: 2px 8px;
  border: 1px solid var(--hline);
  border-radius: 999px;
  color: var(--hink-3);
  font-size: 11px;
}

.dk-assistant {
  margin-top: 20px;
  color: rgba(255, 255, 255, .92);
  font-size: 15px;
  line-height: 1.66;
  overflow-wrap: anywhere;
}

.dk-answer > :first-child {
  margin-top: 0;
}

.dk-answer {
  margin-bottom: 16px;
}

.dk-answer p,
.dk-answer ul,
.dk-answer ol {
  margin: 0 0 14px;
}

.dk-answer > :last-child {
  margin-bottom: 0;
}

.dk-answer ul,
.dk-answer ol {
  padding-left: 20px;
}

.dk-answer li + li {
  margin-top: 7px;
}

.dk-answer li::marker {
  color: rgba(255, 255, 255, .42);
}

.dk-answer h4 {
  margin: 22px 0 8px;
  color: var(--hink);
  font-size: 15px;
  font-weight: 650;
}

.dk-answer strong {
  color: var(--hink);
  font-weight: 650;
}

.dk-answer code,
.dk-assistant pre {
  border-radius: 6px;
  background: rgba(255, 255, 255, .08);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}

.dk-answer code {
  padding: 1px 5px;
}

.dk-assistant pre {
  margin: 0 0 12px;
  padding: 12px;
  overflow-x: auto;
}

.dk-table {
  margin: 0 0 14px;
  overflow-x: auto;
  border: 1px solid var(--hline);
  border-radius: 12px;
}

.dk-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.dk-table th,
.dk-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--hline);
  text-align: left;
  white-space: nowrap;
}

.dk-table th {
  color: var(--hink-2);
  background: rgba(255, 255, 255, .04);
  font-weight: 600;
}

.dk-table tr:last-child td {
  border-bottom: 0;
}

.dk-activity {
  margin: 0 0 14px;
  color: var(--hink-2);
  font-size: 12.5px;
}

.dk-activity summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  list-style: none;
  cursor: pointer;
}

.dk-activity summary::-webkit-details-marker {
  display: none;
}

.dk-activity summary svg,
.dk-activity li svg,
.dk-thinking svg {
  width: 14px;
  height: 14px;
}

/* The steps fold open and shut: the content's height and opacity animate
   (browsers without ::details-content support just switch instantly). */
.dk-activity {
  interpolate-size: allow-keywords;
}

.dk-activity::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition:
    block-size 260ms var(--dk-ease, ease),
    opacity 200ms ease,
    content-visibility 260ms allow-discrete;
}

.dk-activity[open]::details-content {
  block-size: auto;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .dk-activity::details-content {
    transition: none;
  }
}

.dk-activity ul {
  display: grid;
  gap: 5px;
  margin: 8px 0 0 6px;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--hline);
  list-style: none;
}

.dk-activity li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.dk-activity li svg {
  margin-top: 3px;
}

.dk-activity li.is-active {
  color: var(--hink);
}

.dk-thinking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--hink-3);
  font-size: 13px;
}

.dk-spin {
  animation: dk-spin 900ms linear infinite;
}

@keyframes dk-spin {
  to { transform: rotate(360deg); }
}

.dk-research {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  color: var(--hink-2);
  background: rgba(92, 160, 255, .14);
  font-size: 12px;
}

.dk-research svg {
  width: 14px;
  height: 14px;
}

.dk-research.is-warning {
  color: #ffd38a;
  background: rgba(255, 190, 80, .12);
}

.dk-sources {
  interpolate-size: allow-keywords;
  margin: 0 0 6px;
  font-size: 12.5px;
}

.dk-sources summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 14px;
  border: 1px solid var(--hline);
  border-radius: 999px;
  color: var(--hink-2);
  background: rgba(255, 255, 255, .03);
  font-size: 12.5px;
  font-weight: 550;
  list-style: none;
  cursor: pointer;
  transition: color 160ms, background-color 160ms, border-color 160ms;
  user-select: none;
}

.dk-sources summary:hover {
  border-color: var(--hline-strong);
  color: var(--hink);
  background: rgba(255, 255, 255, .06);
}

.dk-sources summary::-webkit-details-marker {
  display: none;
}

.dk-sources summary span {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--hink);
  background: rgba(255, 255, 255, .11);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* A chevron that turns as the list opens. */
.dk-sources summary::after {
  width: 7px;
  height: 7px;
  margin: -3px 2px 0 0;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  content: "";
  opacity: .7;
  transform: rotate(45deg);
  transition: transform 260ms var(--dk-ease, ease), margin 260ms var(--dk-ease, ease);
}

.dk-sources[open] summary::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.dk-sources::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition:
    block-size 260ms var(--dk-ease, ease),
    opacity 200ms ease,
    content-visibility 260ms allow-discrete;
}

.dk-sources[open]::details-content {
  block-size: auto;
  opacity: 1;
}

.dk-sources ol {
  display: grid;
  gap: 6px;
  margin: 10px 0 2px;
  padding: 0;
  list-style: none;
}

.dk-sources li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--hline);
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
  transition: background-color 160ms, border-color 160ms;
}

.dk-sources li:hover {
  border-color: var(--hline-strong);
  background: rgba(255, 255, 255, .07);
}

.dk-source-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .07);
}

.dk-source-icon svg {
  width: 15px;
  height: 15px;
  color: var(--hink-2);
}

.dk-source-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.dk-source-text a,
.dk-source-text > span {
  overflow: hidden;
  color: var(--hink);
  font-size: 13.5px;
  font-weight: 540;
  line-height: 1.35;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dk-source-text a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dk-source-text a svg {
  width: 11px;
  height: 11px;
  margin-left: 5px;
  opacity: .6;
  vertical-align: -1px;
}

.dk-source-text small {
  color: var(--hink-3);
  font-size: 11.5px;
}

.dk-meta {
  display: flex;
  gap: 2px;
  margin: 10px 0 0 -6px;
}

.dk-meta .dk-icon-button {
  width: 28px;
  height: 28px;
}

.dk-meta svg {
  width: 14px;
  height: 14px;
}

.dk-turn-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 122, 89, .35);
  border-radius: 12px;
  color: #ffc2b0;
  background: rgba(255, 122, 89, .1);
  font-size: 13px;
}

.dk :focus-visible {
  outline: 2px solid rgba(255, 255, 255, .55);
  outline-offset: 2px;
}

/* --------------------------------------------------- around the dock */

/* Pages leave room for the bar, and for a chat docked on the right. */
body[data-dock$="-bar"] main,
body[data-dock="center-chat"] main {
  padding-bottom: calc(var(--dk-bar-h, 58px) + 48px) !important;
}

@media (min-width: 1280px) {
  main {
    transition: padding-right var(--dk-ease, ease) 560ms;
  }

  body[data-dock="right-chat"]:not([data-stage="home"]) main {
    padding-right: calc(min(440px, 100vw - 32px) + 36px) !important;
  }

  /* On Home the docked chat takes the place of the location panel. */
  body[data-dock="right-chat"] .home-geo {
    opacity: 0;
    transform: translateX(24px);
    pointer-events: none;
  }
}

.home-geo {
  transition: opacity 360ms var(--ease-out, ease), transform 460ms var(--ease-out, ease);
}

/* The map hint floats just above the bar on Home. */
@media (min-width: 1101px) {
  .home-map-hint {
    position: fixed !important;
    bottom: calc(var(--dk-bar-h, 58px) + 18px + 12px) !important;
    left: var(--dk-home-center, 50vw) !important;
    max-width: var(--dk-home-room, 600px);
    margin: 0 !important;
    transform: translateX(-50%);
  }

  /* With the bar on the right, the hint keeps the map's centre. */
  body[data-dock="right-bar"] .home-map-hint {
    bottom: 18px !important;
  }

  body[data-dock$="-chat"] .home-map-hint,
  body:has(.dk-suggest:not([hidden])) .home-map-hint {
    opacity: 0;
  }
}

/* ------------------------------------------------------- small screens */

@media (max-width: 900px) {
  .dk,
  .dk[data-place="right"],
  .dk[data-mode="chat"],
  .dk[data-surface="home"][data-mode="bar"],
  .dk[data-place="right"][data-surface="home"][data-mode="bar"] {
    --dk-gap: 8px;
    --dk-w: calc(100vw - 16px);
    --dk-x: 8px;
  }

  .dk[data-mode="chat"],
  .dk[data-place="right"][data-mode="chat"] {
    --dk-h: calc(100dvh - var(--topbar-h) - 16px);
    --dk-radius: 20px;
  }

  .dk-place,
  .dk-map span,
  .dk-new span {
    display: none !important;
  }

  .dk-new {
    width: 34px;
    padding: 0;
  }

  .dk-starters {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-dock="right-chat"] main {
    padding-right: var(--page-pad) !important;
  }
}

@media (max-width: 560px) {
  .dk-tools {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dk,
  .dk-map,
  .dk-tools,
  main {
    transition-duration: 1ms !important;
  }

  .dk[data-mode="chat"] .dk-head,
  .dk[data-mode="chat"] .dk-body {
    animation: none;
  }
}

/* ------------------------------------------- "Ask AI" on analytics briefs */

.ai-decision-brief .ai-ask-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px 0 14px;
  border: 1px solid var(--hairline, rgba(13, 15, 20, .12));
  border-radius: 999px;
  color: var(--ink, #0d0f14);
  background: var(--surface, #ffffff);
  box-shadow: var(--shadow-1, none);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow 160ms, transform 160ms;
}

.ai-decision-brief .ai-ask-button:hover {
  box-shadow: var(--shadow-2, none);
  transform: translateY(-1px);
}

.ai-decision-brief .ai-ask-button svg {
  width: 16px;
  height: 16px;
  color: var(--level-strong, #8c6cf7);
  fill: currentColor;
  stroke: none;
}

/* --------------------------------------------------------- type reset */

/* The legacy and foundation stylesheets set headings, text and tables with
   !important for the light pages. Inside the dark dock, text takes the
   dock's colours and tables have no stripes. */
.dk :is(h2, h3, h4, p, li, span, small, strong, b, em, summary, td, th, code, kbd, label) {
  color: inherit !important;
}

.dk .dk-welcome h2 {
  margin: 0 !important;
  color: var(--hink) !important;
  font-size: 21px !important;
  line-height: 1.25 !important;
}

.dk .dk-welcome p,
.dk .dk-title-copy small,
.dk .dk-scope-chip,
.dk .dk-suggest small,
.dk .dk-source-text small {
  color: var(--hink-3) !important;
}

.dk .dk-welcome p,
.dk .dk-activity {
  color: var(--hink-2) !important;
}

.dk .dk-welcome b,
.dk .dk-answer strong,
.dk .dk-answer h4,
.dk .dk-activity li.is-active {
  color: var(--hink) !important;
}

.dk .dk-answer h4 {
  margin: 22px 0 8px !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}

.dk .dk-token,
.dk .dk-focus span {
  color: #ddd2ff !important;
}

.dk .dk-focus[aria-pressed="false"] span {
  color: var(--hink-3) !important;
}

.dk .dk-suggest b {
  color: var(--hdark) !important;
}

.dk .dk-research.is-warning,
.dk .dk-turn-error span {
  color: inherit !important;
}

.dk :is(table, thead, tbody, tr, td, th) {
  background: transparent !important;
  box-shadow: none !important;
}

/* The app-wide light table rules (`td`, `tr:nth-child(even) td`, `table td`) are
   !important and out-rank the :is() reset above on even rows and on text colour,
   so answer tables set both explicitly at higher specificity. */
.dk .dk-table table tbody tr td {
  background: transparent !important;
  color: var(--hink) !important;
}

.dk .dk-table table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, .03) !important;
}

.dk .dk-table table tbody tr:hover td {
  background: rgba(255, 255, 255, .06) !important;
}

.dk .dk-table table thead tr th {
  color: var(--hink-2) !important;
  background: rgba(255, 255, 255, .04) !important;
}

.dk .dk-table :is(td, th) {
  border-color: var(--hline) !important;
  border-width: 0 0 1px !important;
  font-size: 13px !important;
}

.dk .dk-table tr:last-child td {
  border-bottom-width: 0 !important;
}

/* An empty field shows its hint on one line, however narrow the bar. */
.dk .dk-field textarea:placeholder-shown {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Without a map (no WebGL), Home's bar has no map controls. */
body:has(#home.is-map-fallback) .dk-map,
body:has(#home.is-map-fallback) .dk-tools {
  display: none;
}

/* Icons keep their own colours inside the type reset above. */
.dk .dk-title-mark,
.dk .dk-welcome-mark {
  color: var(--level-strong) !important;
}

.dk .dk-field-icon {
  color: var(--level) !important;
}

.dk .dk-source-icon {
  color: var(--hink-3) !important;
}

/* The star in the search field switches between finding a country and asking
   AI. Off: a quiet outline star. On: a filled, lit star. */
.dk .dk-ai-toggle {
  width: 32px;
  height: 32px;
  margin: 0 2px 4px -2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transform: none;
  transition: background-color 160ms, color 160ms;
}

.dk .dk-ai-toggle svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.dk .dk-ai-toggle,
.dk .dk-ai-toggle:hover {
  color: var(--hink-3) !important;
}

.dk .dk-ai-toggle:hover:not(:disabled) {
  background: var(--hfill-strong);
  color: var(--hink) !important;
}

.dk .dk-ai-toggle[aria-pressed="true"] {
  background: rgba(140, 108, 247, .28);
  color: #ddd2ff !important;
}

.dk .dk-ai-toggle[aria-pressed="true"] svg {
  fill: currentColor;
}

.dk .dk-ai-toggle:disabled {
  cursor: default;
  opacity: 1;
}

/* The shared chat renderer wraps answers in .ai-chat-response, whose rules
   (for the light pages) are !important inside the ku layer, which outranks the
   unlayered dock rules above. Restate them here, in the same layer, so answer
   text, headings, bold and code read in the dock's light-on-dark colours. */
@layer ku {
  .dk .ai-chat-response {
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }

  .dk .ai-chat-response p,
  .dk .ai-chat-response li {
    color: inherit !important;
  }

  .dk .ai-chat-response h4 {
    margin: 22px 0 8px !important;
    color: var(--hink) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
  }

  .dk .ai-chat-response strong {
    color: var(--hink) !important;
    font-weight: 650 !important;
  }

  .dk .ai-chat-response code {
    color: var(--hink) !important;
    background: rgba(255, 255, 255, .09) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 12.5px !important;
  }
}

/* New messages arrive with a soft rise and fade, block by block, rather than
   appearing all at once. Only turns drawn while pending animate. */
@keyframes dk-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.dk-user.is-entering {
  animation: dk-rise 380ms var(--dk-ease, ease) both;
}

.dk-assistant.is-entering .dk-answer > *,
.dk-assistant.is-entering .dk-research {
  animation: dk-rise 560ms var(--dk-ease, ease) both;
}

.dk-assistant.is-entering .dk-answer > :nth-child(2) { animation-delay: 90ms; }
.dk-assistant.is-entering .dk-answer > :nth-child(3) { animation-delay: 180ms; }
.dk-assistant.is-entering .dk-answer > :nth-child(4) { animation-delay: 270ms; }
.dk-assistant.is-entering .dk-answer > :nth-child(5) { animation-delay: 360ms; }
.dk-assistant.is-entering .dk-answer > :nth-child(6) { animation-delay: 450ms; }
.dk-assistant.is-entering .dk-answer > :nth-child(n + 7) { animation-delay: 540ms; }

.dk-assistant.is-entering .dk-sources,
.dk-assistant.is-entering .dk-meta {
  animation: dk-rise 560ms var(--dk-ease, ease) 420ms both;
}

@media (prefers-reduced-motion: reduce) {
  .dk-user.is-entering,
  .dk-assistant.is-entering .dk-answer > *,
  .dk-assistant.is-entering .dk-research,
  .dk-assistant.is-entering .dk-sources,
  .dk-assistant.is-entering .dk-meta {
    animation: none;
  }
}