/* ==========================================================================
   ASK KILL DULL

   A small piece of the Bureau opening inside the site.

   The control is an icon only, in the top-left position of the persistent nav
   that the grid already leaves empty, opposite CONTACT. It is yellow because
   it is the one thing in the bar that does something rather than goes
   somewhere — the same reason CONTACT is yellow.

   The panel is a reading surface: var(--paper) with var(--ink) type, so it is
   white on the homepage and cream on every other page, matching whatever page
   it opens over. Structure — the record bar and the ask bar — is ink.

   No gradients. No shadows. No radius. No bubbles. No glow.
   Tokens and type come from kd.css / fonts.css. Nothing new is invented here.

   kd.js rewrites the innerHTML of #registrar-desktop, .unified-nav-products
   and .registrar-mobile on every load, and injects its grid rules as a <style>
   appended to head. So: the trigger is a direct child of #registrar (never
   inside those three), and every rule that has to beat kd.js is qualified with
   the #registrar id — id specificity wins over its class selectors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CONTROL
   Desktop: the grid is `1fr auto 1fr` — chapters centred, CONTACT right,
   column 1 unused. The control takes column 1. Nothing else moves.
   -------------------------------------------------------------------------- */

#registrar .ask-kd-trigger {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: var(--yellow);
  -webkit-tap-highlight-color: transparent;
}

#registrar .ask-kd-trigger svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill 0.15s ease;
}

/* Hover fills the bubble. Open fills it and takes the nav's own active rule. */
#registrar .ask-kd-trigger:hover svg { fill: var(--yellow); }
#registrar .ask-kd-trigger[aria-expanded='true'] svg { fill: var(--yellow); }
#registrar .ask-kd-trigger[aria-expanded='true'] { border-bottom-color: var(--yellow); }

/* --------------------------------------------------------------------------
   PANEL
   -------------------------------------------------------------------------- */

.ask-kd-panel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 189;
  width: 480px;
  max-width: calc(100vw - 48px);
  display: none;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--border);
  border-top: none;
}

.ask-kd-panel.is-open { display: flex; }

/*
  Rules and quiet type are the page's own ink, thinned. kd.js sets the palette
  globally at runtime (--ink:#24222B, --paper:#FFFFFF), so these derive from the
  token rather than restating a colour that would drift the moment it changes.
  The literal fallback matches the current ink for browsers without color-mix.
*/
.ask-kd-panel {
  --ask-rule: rgba(36, 34, 43, 0.24);
  --ask-quiet: rgba(36, 34, 43, 0.56);
}

@supports (color: color-mix(in srgb, red, blue)) {
  .ask-kd-panel {
    --ask-rule: color-mix(in srgb, var(--ink) 24%, transparent);
    --ask-quiet: color-mix(in srgb, var(--ink) 56%, transparent);
  }
}

/* Record bar. Ink, because it is chrome. */
.ask-kd-record {
  display: flex;
  align-items: center;
  /* Close is the only thing in this bar, and it stays on the right. */
  justify-content: flex-end;
  gap: 16px;
  flex-shrink: 0;
  background: var(--ink);
  padding: 11px 20px 9px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8880;
}

.ask-kd-record__close {
  background: none;
  border: none;
  padding: 2px 0;
  font: inherit;
  color: #FFFFFF;
  cursor: pointer;
}

.ask-kd-record__close:hover { color: var(--yellow); }

/* --------------------------------------------------------------------------
   READING SURFACE
   -------------------------------------------------------------------------- */

.ask-kd-read {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 20px 22px;
}

.ask-kd-read::-webkit-scrollbar { width: 4px; }
.ask-kd-read::-webkit-scrollbar-track { background: transparent; }
.ask-kd-read::-webkit-scrollbar-thumb { background: var(--ask-rule); }

/* The title is the whole opening. No explanatory copy follows it. */
.ask-kd-title {
  margin: 0 0 22px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 34px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   STARTERS — ruled rows. An index, the way the footer is an index.
   -------------------------------------------------------------------------- */

.ask-kd-starters { border-top: 1px solid var(--ask-rule); }

.ask-kd-starter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--ask-rule);
  padding: 13px 0;
  cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink);
  transition: padding-left 0.15s ease;
}

/* Focus itself is the site's own global :focus-visible treatment, which is
   declared !important in kd.js — a yellow outline on an ink halo. Only the
   hover/focus shift belongs here. */
.ask-kd-starter:hover,
.ask-kd-starter:focus-visible { padding-left: 8px; }

.ask-kd-starter__mark {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: transparent;
  transition: background 0.15s ease;
}

.ask-kd-starter:hover .ask-kd-starter__mark,
.ask-kd-starter:focus-visible .ask-kd-starter__mark { background: var(--yellow); }

/* --------------------------------------------------------------------------
   ANSWER — folded under its question, inside the same ruled row.
   -------------------------------------------------------------------------- */

.ask-kd-answer {
  border-bottom: 1px solid var(--ask-rule);
  padding: 2px 0 20px;
}

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

.ask-kd-answer__body {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
}

/* An open question keeps the shift and the mark it had on hover, so the row
   you are reading stays legible as the pointer moves away. The question also
   loses its own rule: question and answer read as one block. */
.ask-kd-starter.is-open { padding-left: 8px; border-bottom-color: transparent; }
.ask-kd-starter.is-open .ask-kd-starter__mark { background: var(--yellow); }

.ask-kd-boundary {
  flex-shrink: 0;
  background: var(--ink);
  border-top: 1px solid var(--border);
  padding: 9px 20px 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6f6d66;
}

/* --------------------------------------------------------------------------
   NARROW
   kd.js gives the bar `1fr auto` here — dropdown left, CONTACT right, and the
   nav's own padding drops to 0. Make room for a third column so the control
   keeps the same top-left position, and give it the page gutter.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  #registrar.unified-nav { grid-template-columns: auto 1fr auto !important; }
  #registrar .registrar-mobile { grid-column: 2 !important; }
  #registrar .unified-nav-products { grid-column: 3 !important; }
  #registrar .ask-kd-trigger { padding-left: 24px; }

  .ask-kd-panel {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    border-left: none;
    border-right: none;
  }

  .ask-kd-read { padding: 22px 24px 20px; }
  .ask-kd-title { font-size: 28px; }
  .ask-kd-record { padding-left: 24px; padding-right: 24px; }
  .ask-kd-boundary { padding-left: 24px; padding-right: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  #registrar .ask-kd-trigger svg,
  .ask-kd-starter,
  .ask-kd-starter__mark { transition: none; }
}