/* ============================================================
   PCG — Assistant (lexical retrieval console)

   This is a SEARCH INSTRUMENT, not a chat window. It reads a
   question, runs BM25 over js/pcg-faq-data.js in the visitor's
   own browser, and puts the closest written answer on the face
   together with the page that answer came from. There is no
   model, no server and no request, so there is also nothing to
   wait for: no typing indicator, no "thinking" pause, no busy
   sweep. Every one of those was removed rather than restyled —
   a progress animation in front of a synchronous array scan is
   a lie about what the machine is doing.

   Everything in this sheet is scoped to .aia*. It loads only on
   pages carrying the widget; js/pcg-assistant.js is inert
   without it.

   Two rules govern every animation below:
     1. The resting state IS the finished state. Keyframes only
        ever animate *from* a hidden state, never *to* one, and
        no fill-mode holds a hidden frame. If an animation never
        runs (no JS, reduced motion, a screenshot, a hidden tab)
        the content is still fully readable.
     2. Only opacity / transform / colour are animated — never a
        layout property.
   ============================================================ */

/* ---------- Section shell ---------- */
.aia-split{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(34px,4.5vw,64px);
  align-items:start;
}
@media (min-width:981px){
  .aia-split{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
  .aia-aside{position:sticky;top:calc(var(--nav-h) + 44px)}
}
.aia-aside h2{max-width:14ch}
.aia-aside .lead{margin-top:var(--sp-3)}

/* The honesty note. Deliberately not a footnote — it sits directly
   under the promise so nobody can read one without the other. */
.aia-note{
  margin-top:var(--sp-3);
  padding-left:16px;
  border-left:1px solid var(--rule);
  font-size:var(--fs-fine);
  line-height:1.6;
  color:var(--muted);
  max-width:46ch;
}
.aia-aside .link-underline{margin-top:var(--sp-4)}

/* ---------- Console ----------
   THE SECOND INSTRUMENT. This module and the live price panel on the home
   page (.pi-console) are the site's only two bespoke instruments, and the
   three rules below are what makes them siblings: the same border-block, the
   same milled pocket, and the same eight-gradient corner-tick construction.

   --lip-tl is the pocket (css/pcg.css): the top-left inner wall falls into
   shadow and the bottom-right one catches the light, from the same
   high-left source as --sheen, the seams and the hero canvas. It is 1px
   decoration on both walls, so there is no colour pair to measure. It has
   to stay in front of the existing cast, not replace it — box-shadow is a
   single property and dropping the cast would flatten the console. */
.aia-console{
  position:relative;
  container-type:inline-size;
  container-name:aia;
  display:flex;
  flex-direction:column;
  /* CONTRAST — the corner ticks, which are decoration rather than a state
     carrier but are measured anyway because every colour pair on this site
     is. rgba(201,161,74,.6) is --goud at the instrument's tick opacity;
     flattened it is #816935 over --houtskool #141416 (the .skin-char
     section this console actually sits in) = 3.51:1, and #7D6531 over
     --onyx #0B0B0C = 3.54:1. Both clear 1.4.11's 3:1, and the console's own
     rgba(0,0,0,.34) ground darkens the backdrop a shade further, so the
     rendered figure is better than either. On paper the same value
     measures 1.57:1 over --papier, which is why the cream override below
     routes the ticks to --tick-major (--brons: 5.51:1 on --papier, 4.91:1
     on --creme) instead of dimming a gold that was never going to register
     there. */
  --aia-tick:rgba(201,161,74,.6);
  /* The console's own ground, flattened, for the readout's scroll fade. The
     face is rgba(0,0,0,.34) over the section's --houtskool #141416, which
     composites to #0D0D0E; the cream override below is rgba(255,255,255,.6)
     over --papier #F8F3E9 = #FBF8F2. The fade has to END on that exact colour
     or the bottom of the panel reads as a grey band rather than as content
     running under the edge. It is decoration over content that the visitor
     can scroll to, never over content that is only there. */
  --aia-fade:#0D0D0E;
  /* A ROUNDED CARD, NOT A CUT PLATE. The console used to be a full-bleed slab
     with machined corner ticks, which married it to the price instrument and
     made every message inside it feel like a readout. A conversation is a
     softer object than an instrument: the panel now lifts off the section on
     its own radius and its own shadow, and the messages inside it are rounded
     in turn. It is the one soft-cornered thing on the site, deliberately —
     this is the only place a visitor talks to us. */
  --aia-r:22px;
  border:1px solid var(--rule);
  border-radius:var(--aia-r);
  background:
    radial-gradient(130% 80% at 12% -10%,rgba(201,161,74,.10),transparent 62%),
    var(--aia-bg,rgba(0,0,0,.42));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 2px 6px -2px rgba(0,0,0,.5),
    0 40px 90px -50px rgba(0,0,0,1);
  overflow:hidden;
}
.skin-creme .aia-console,
.skin-creme-deep .aia-console{--aia-bg:rgba(255,255,255,.6);--aia-tick:var(--tick-major);--aia-fade:#FBF8F2}

/* Machined corner ticks. Verbatim the construction .pi-console::after uses
   — eight 1px x 16px no-repeat gradients, one arm per corner per axis — so
   the corners of the two consoles are cut by the same tool.
   inset:0, not the instrument's inset:-1px: this console keeps
   overflow:hidden, so a negative inset would simply be clipped away. The
   arms therefore sit on the inner edge of the two block rules and touch
   them rather than doubling them. */
/* The eight-gradient corner ticks are GONE with the square corners that
   carried them: an engraved tick arm reaching around a 22px radius reads as a
   mistake, and the ticks were the loudest thing marking this as an instrument
   rather than a conversation. --aia-tick survives as the control-boundary
   value; nothing else used those arms. */

/* ---------- THE FLOATING DOCK KEEP-OUT ----------
   js/pcg.js appends a fixed .cta-dock at bottom-right of every page past
   620px of scroll, at z-index 85. On this page it lands squarely on the
   console's lower right, which is where the answer and its source link sit.

   Two fixes, because one is not enough:
     1. STRUCTURAL. Nothing interactive is placed in the console's bottom
        right any more. The old footer carried a "Bekijk tarieven" button in
        exactly that corner; it is gone. Every answer already deep-links to
        the page it came from, which is the better version of that button,
        and the footer is now a non-interactive label.
     2. BEHAVIOURAL, below. While the visitor is actually working the
        console the dock gets out of the way.

   css/components.css already establishes this exact mechanism for the nav
   drawer (`body:has(.drawer.open) .cta-dock`), including the property set,
   so this is the same move against the same element rather than a new one.
   Specificity: :has() carries its most specific argument, so (0,3,1) here
   beats .cta-dock.show at (0,2,0) and the dock stays down.
   is-engaged is written by the script whenever an answer is on the face;
   :focus-within covers typing and keyboard use before that. */
body:has(.aia-console.is-engaged) .cta-dock,
body:has(.aia-console:focus-within) .cta-dock{
  transform:translateY(140%);
  opacity:0;
  pointer-events:none;
}

/* ---------- Console header: the nameplate ----------
   Engraved plate, not a title bar. The rule under it is the machined --rake
   gradient rather than a flat hairline, which is why it is painted as the
   BACKGROUND of a ::after and not as a border-color: --rake is a gradient and
   is invalid in border-color (css/pcg.css says so at the token). The run spans
   the whole console, far past the ~90px width below which the site's own
   grammar calls for a flat rule instead. */
.aia-bar{
  position:relative;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:clamp(16px,1.8vw,20px) clamp(18px,2.2vw,26px);
  border-bottom:1px solid var(--rule-soft);
}
.aia-bar__id{display:flex;align-items:center;gap:11px;min-width:0;flex:1 1 auto}
/* A round lamp, not a struck diamond: the diamond was the instrument's index
   mark and every other mark in this module has been rounded with it. */
.aia-dot{
  flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--gold-text);
  box-shadow:0 0 0 3px rgba(201,161,74,.12);
}
/* THE LAMP DOES NOT BREATHE. A gold dot pulsing forever beside the word
   "Assistent" is the online/thinking lamp off every chat widget on the
   internet, and it tells the same lie this module's opening doctrine bans: it
   animates activity in front of a synchronous array scan that is finished
   before the next frame. It is also blinking content running past five
   seconds with no way to stop it (WCAG 2.2.2). The mark stays, struck and
   still, the way an engraved index mark should. */
/* The name is allowed to be a name. At 12.5px tracked it read as a system
   label on a device; at 15px/600 with normal tracking it reads as the party
   you are talking to, which is what a conversation header is for. */
.aia-bar__label{
  font-size:15px;letter-spacing:0;color:var(--ink);font-weight:600;
  line-height:1.3;
}
/* THE CAPACITY GAUGE. Empty in the markup; js/pcg-assistant.js fills it at boot
   with the real DATA.ENTRIES.length. Needs no display gating precisely because
   it ships empty — nothing stale can paint before the script arrives. */
/* Quiet metadata beside the name, the way a messaging header carries a status
   line. No longer tracked capitals competing with the name next to it. */
.aia-bar__gauge{
  font-size:12.5px;letter-spacing:0;color:var(--steen);
  white-space:nowrap;
}
.aia-bar__gauge b{color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
/* The graduated scale: major ticks every 40px over minor ticks every 8px,
   masked out before it can reach the controls. Decoration in the site's own
   tick tokens — it is a scale engraved on the plate, never a value display, so
   it carries no meaning a reader could misread. Hidden on narrow containers
   and under forced-colors, where the gradient fills drop out anyway. */
/* THE GRADUATED TICK STRIP IS GONE. It was the last piece of measuring-device
   language in the header, it read as a capacity bar next to a number, and a
   conversation panel has nothing to graduate. The space it filled is now just
   space, which the header needed more. */
.aia-bar__act{display:flex;align-items:center;gap:6px;margin-left:auto}

/* At 390 the status line is too long to share a flex row with the clear button,
   so the button wrapped onto a line of its own and landed hard left - a 44px
   bordered box sitting under the text like an orphaned form control. A two
   column grid keeps the full sentence (it may wrap to two lines; it is the
   honest description of what this thing does and should not be truncated) with
   the button held at the right, where it was always meant to be. */
@media (max-width: 640px){
  .aia-bar{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:start;gap:12px;
  }
  .aia-bar__act{margin-left:0;justify-self:end;align-self:center}
}

/* 44px is the floor, not the type size.

   THE BOX IS THE CONTROL, SO THE BOX HAS TO BE VISIBLE. --rule-soft flattens
   to 1.16:1 on this ground: at rest the button read as a loose label floating
   near the plate rather than as something pressable, which is a large part of
   why the old console looked unfinished. --aia-tick is the value this sheet
   already publishes and defends for the corner ticks (3.55:1), so the control
   boundaries now clear the 3:1 that non-text UI needs. */
.aia-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font:inherit;font-size:13px;letter-spacing:.01em;
  color:var(--muted);background:rgba(255,255,255,.04);
  border:1px solid transparent;border-radius:999px;
  padding:7px 16px;min-height:38px;
  cursor:pointer;white-space:nowrap;
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease);
}
.aia-btn:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.aia-btn:active{background:rgba(201,161,74,.1)}
/* Reserved, not removed: the clear control keeps its slot so the header
   does not reflow the moment an answer arrives. */
.aia-clear{visibility:hidden;opacity:0;transition:opacity var(--dur-1) var(--ease)}
.aia-console.is-engaged .aia-clear{visibility:visible;opacity:1}

/* ---------- The inlet ----------
   The question field is the primary control, so it sits at the top of the
   face where a reader looks first, and it is cut INTO the face rather than
   dropped onto it: no box of its own, a full-bleed band with one rule under
   it and a gold prompt mark at the left margin. A bordered rounded input
   here would read as a form pasted onto an instrument. The band, not the
   input, carries the focus state. */
/* THE COMPOSER IS A FIELD, NOT A BAND. It used to be a full-bleed strip cut
   into the face with a rule under it — correct for a search inlet, wrong for
   the thing you type a message into. It is now a rounded field floating in its
   own padded footer, which is the shape every messaging interface has settled
   on because it reads as "a place to put words" rather than "a filter". */
.aia-seek{
  position:relative;
  display:flex;align-items:center;gap:10px;
  margin:clamp(14px,1.6vw,18px) clamp(14px,1.8vw,20px);
  padding:0 8px 0 16px;
  border:1px solid var(--rule);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  transition:border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
.aia-seek:focus-within{
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 3px rgba(201,161,74,.14);
}
.skin-creme .aia-seek,
.skin-creme-deep .aia-seek{background:rgba(26,22,16,.045)}
/* The flat border is still the carrier that states focus under forced-colors,
   where the glow ring and every gradient are dropped. */
.aia-seek:focus-within{border-color:var(--gold-text)}
/* The caret mark is gone from the composer: a rounded field with a placeholder
   already says "type here", and the little gold arrowhead was one more piece of
   instrument furniture in the one control that had to feel ordinary. */
.aia-seek__mark{display:none}
.aia-input{
  flex:1 1 auto;min-width:0;
  min-height:52px;
  font:inherit;
  /* 16px floor: anything smaller and iOS Safari zooms the page on focus. */
  font-size:16px;letter-spacing:.01em;color:var(--ink);
  background:transparent;border:0;
  padding:10px 0;
}
.aia-input:focus{outline:none}
/* The band shows focus; the input keeps a visible ring for keyboard users
   on browsers that would otherwise show nothing inside a borderless field. */
.aia-input:focus-visible{outline:none}
/* …EXCEPT where the band cannot speak. The band states focus with a border
   COLOUR and a gradient, and forced-colors drops both, which left the site's
   primary control with no focus indicator at all in high contrast. */
@media (forced-colors:active){
  .aia-input:focus-visible{outline:2px solid Highlight;outline-offset:-2px}
  .aia-seek{border:1px solid CanvasText}
}
/* --muted is #918A79 on this section's --houtskool ground = 5.36:1, and the
   console darkens that ground further with rgba(0,0,0,.34), so the rendered
   placeholder is better than the measured figure. Past 4.5:1 either way;
   placeholder text is held to body contrast here, not to a decorative grey. */
.aia-input::placeholder{color:var(--muted);opacity:1}
/* Safari paints a magnifier and a clear affordance on type=search that do
   not belong on a milled face. */
.aia-input::-webkit-search-decoration,
.aia-input::-webkit-search-cancel-button,
.aia-input::-webkit-search-results-button{-webkit-appearance:none;appearance:none}
/* A ROUND SEND KEY, sitting inside the field the way every composer resolves
   it. Filled rather than outlined: it is the primary action of the whole
   module and an outlined icon button was reading as a decorative affordance. */
.aia-send{
  flex:none;width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-on-gold,#171310);
  background:rgba(201,161,74,.28);
  border:0;border-radius:50%;cursor:pointer;
  transition:background-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
/* ARMED. The key fills solid the moment the field holds a question, so the
   composer answers before it is asked. A sibling combinator, not :has() — the
   input and the button are real siblings in the form, so this works everywhere
   and costs no specificity. Do not reorder the form's children. */
.aia-input:not(:placeholder-shown) ~ .aia-send{
  background:var(--gold-text);
  box-shadow:0 4px 14px -6px rgba(201,161,74,.9);
}
.aia-send:hover{background:var(--gold-text)}
.aia-send:active{transform:scale(.94)}
.aia-send svg{width:17px;height:17px}
@media (forced-colors:active){
  .aia-send{border:1px solid CanvasText}
}

/* ---------- The readout ----------
   THE HEIGHT IS THE CONTENT, BETWEEN A FLOOR AND A CEILING.

   This used to be one fixed `height:clamp(300px,38vh,404px)`, on the reasoning
   that a constant window means nothing below the console moves when a result
   lands. That reasoning cost more than it bought, in both directions at once:

     TOO SHORT for an answer. A typical answer plus its three related questions
     measures ~450px against a 342px window at 1440, so two of the three
     follow-ups sat below the fold of an internal scroller — on a desktop
     viewport with hundreds of pixels of free room underneath. The related list
     is the console's main way of carrying a reader onward and two thirds of it
     was, in practice, not there.

     TOO TALL for a refusal. "Geen antwoord gevonden" plus the three contact
     routes is ~235px, so the moment the console admitted it could not help it
     rendered ~107px of empty face underneath. The low point of the interaction
     was drawn as a hole.

   So the panel now sizes to what it is holding. The floor keeps a short state
   from collapsing into a strip; the ceiling keeps a long one from pushing the
   footer off a laptop screen. Between them the console grows and shrinks at its
   BOTTOM edge — its top, the field the visitor just used, and the answer that
   lands there do not move.

   FLOOR is set under the shortest real state (the refusal) rather than over it,
   which is the whole point. CEILING is set over the tallest measured state
   (answer + three related, ~450px) with headroom, so at 1440 nothing clips at
   all; when a long answer in a narrow console does exceed it, the scroll is
   ANNOUNCED — see .aia-readout below. An unmarked internal scrollbar is how
   content goes missing without anyone noticing. */
.aia-panel{
  min-height:clamp(210px,26vh,290px);
  max-height:min(70vh,560px);
  overflow-y:auto;overflow-x:hidden;
  padding:clamp(16px,2.2vw,22px) clamp(14px,2vw,20px);
  scrollbar-width:thin;
  scrollbar-color:rgba(201,161,74,.35) transparent;
}
.aia-panel::-webkit-scrollbar{width:6px}
.aia-panel::-webkit-scrollbar-thumb{background:rgba(201,161,74,.32)}
.aia-panel:focus-visible{outline-offset:-3px}

/* THE SCROLL AFFORDANCE. The wrapper exists only to hang this on: a fade
   painted over the bottom of the readout tells the reader that the text runs
   under the edge. It is on the WRAPPER and not on the panel because a
   mask-image on the scroller itself would also fade out the scrollbar, and
   because the panel's own ::before/::after would scroll away with the content.

   js/pcg-assistant.js writes .is-clipped whenever there is more below, and
   removes it the moment the visitor reaches the bottom — a permanent fade
   would dim the last line of every answer that fits. pointer-events:none so
   the gradient never eats a click on a related row underneath it. Opacity is
   the only animated property, per the two rules at the top of this sheet. */
.aia-readout{position:relative}
.aia-readout::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:72px;
  z-index:4;pointer-events:none;
  opacity:0;
  background:linear-gradient(180deg,rgba(0,0,0,0),var(--aia-fade) 92%);
  transition:opacity var(--dur-1) var(--ease);
}
.aia-readout.is-clipped::after{opacity:1}
/* In forced colours a gradient is dropped by the UA anyway, and the sheet must
   not rely on one to communicate state; the scrollbar is the affordance there. */
@media (forced-colors:active){
  .aia-readout::after{display:none}
}

/* Small tracked label. The one repeated typographic device in the console:
   it names every region of the face (question list, answer, source, related,
   routes) the way an instrument silkscreens its own sections. */
/* Quieter than it was, because there are fewer of them now and the answer
   carries its own hierarchy through surface. A section label's job here is to
   be findable when scanned and invisible when reading. */
.aia-lbl{
  display:block;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;
  color:var(--steen);
  margin-bottom:12px;
}
/* The silkscreen tick marks the regions of the RESTING face, where the labels
   are section headings on a plate. Inside a reply it is removed below: a dash
   in front of every sub-heading of a message is document furniture, and four
   of them stacked in one bubble was the last thing making an answer read like
   a printed page rather than something said. */
.aia-lbl::before{
  content:"";display:inline-block;width:18px;height:1px;
  background:var(--rule);
  margin-right:10px;vertical-align:middle;
}
.aia-answer .aia-lbl{
  font-size:10px;letter-spacing:.13em;color:var(--steen);
  margin-bottom:10px;
}
.aia-answer .aia-lbl::before{content:none}

/* ---------- Question register (the resting state) ----------
   Ruled rows, not cards. Each row is a real link to the page that answers
   it, so the list still works with the script absent; the script upgrades
   the click to an in-place answer. */
/* The list's own rule is offset to match the rows. .aia-q carries
   margin-inline:-10px so a hovered cell breaks the text margin, and without
   the same offset here the rule above the first question stopped 10px short at
   each end — a stepped hairline on a site whose entire grammar is hairlines. */
/* SUGGESTION CHIPS, NOT A RULED LIST. Stacked rows with hairlines between them
   read as a table of contents; a wrapped cloud of tappable chips reads as an
   assistant offering you somewhere to go next, which is what these are. Same
   markup, same links, same no-JS behaviour. */
.aia-qlist{
  list-style:none;margin:0;padding:0;border-top:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
/* THE ARROW FOLLOWS THE TEXT; IT DOES NOT SIT ON THE FAR MARGIN. With
   `auto 1fr auto` the third column was pinned to the right edge of the panel,
   so at 1440 the arrow for "Wat kost een webshop?" rendered about 1300px away
   from the words it belonged to. The eye has to travel the full width to find
   an affordance that was never in doubt, and the row reads as two unrelated
   objects. `auto auto 1fr` parks the arrow directly after the question and lets
   the empty column absorb the slack - the row still spans the panel and stays
   one large hit target, but it now reads as one thing. */
.aia-q{
  display:inline-flex;align-items:center;gap:9px;
  min-height:40px;
  padding:9px 15px;
  position:relative;
  border:1px solid var(--rule);border-radius:999px;
  background:rgba(255,255,255,.03);
  font-size:14.5px;line-height:1.35;text-align:left;font-weight:500;
  color:var(--ink);text-decoration:none;
  transition:color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);
}
/* Lifts a hair on hover rather than pressing in: a chip is an object you pick
   up, not a cell you push into a plate. */
.aia-q:hover,
.aia-q:focus-visible{
  color:var(--m-4);
  background:rgba(201,161,74,.10);
  border-color:rgba(201,161,74,.45);
  transform:translateY(-1px);
}
/* Offset only: css/pcg.css owns the ring's weight and colour site-wide, and a
   component that re-declares the whole outline ends up with a thinner ring
   than every other focusable thing on the site. */
.aia-q:focus-visible{outline-offset:-2px}
.aia-q:active{background:rgba(201,161,74,.09)}
.skin-creme .aia-q:hover,.skin-creme-deep .aia-q:hover{background:rgba(122,94,28,.06)}
/* The row marker. A pip, not an index: 01 / 02 / 03 down the resting register
   would be a rank the register does not have, and inventing precision is the
   one thing this console must not do even decoratively. */
.aia-q__pip{
  flex:none;width:5px;height:5px;border-radius:50%;
  background:var(--gold-text);
  opacity:.5;
  transition:opacity var(--dur-1) var(--ease);
}
.aia-q:hover .aia-q__pip{opacity:1}
.aia-q__t{min-width:0}
/* justify-self:start is what actually moves the arrow next to the text: it sits
   in the 1fr column, so without this it would stretch to the panel edge and we
   would be back to a 1300px gap. The empty remainder of that column is the
   row's slack. */
/* The arrow is dropped from the chip: a pill already reads as pressable, and
   an arrow inside one turns it into a button with a direction. It stays in the
   markup for the no-JS list, where the row IS a link to another page. */
.aia-q__mark{display:none}

/* ---------- Statement register ----------
   The second group in the resting panel: sentences a visitor might say, rather
   than questions the site already answers. They are the same row component on
   purpose - they behave identically and both end in an answer, so styling them
   as a separate species would be a promise the interaction does not keep.

   What separates them is the mark. A question keeps the struck diamond this site
   uses for a listed item; a statement gets a rule, because it is a line somebody
   speaks rather than an entry in a list. That is the whole distinction: one glyph
   and the label above it. No second surface, no tint, no border - a statement is
   not a lesser row and must not read as a disabled one.

   The separation is space, not another hairline: .aia-qlist already draws its own
   top rule, so a border on the label would stack two lines a heading apart. */
.aia-lbl--say{margin-top:28px}
.aia-q--say .aia-q__pip{
  width:11px;height:1px;
  transform:none;
  opacity:.5;
}
.aia-q--say:hover .aia-q__pip{opacity:1}

/* ---------- Answer ---------- */
/* THE ANSWER IS THE ONE THING IN THIS PANEL THAT MATTERS, SO IT IS THE ONLY
   THING GIVEN A SURFACE. Everything around it - the query echo, the source row,
   the related list - is chrome, and chrome on this site is flat. The answer is
   cut INTO the plate with the same milled pocket (--lip-tl) used on every other
   cut cell, one step off the console ground so it lifts without becoming a card.

   No new material: the pocket, the alloy ramp and the rake hairline are all
   already in the system. This is what let the "Antwoord" eyebrow go - hierarchy
   by surface instead of hierarchy by label. */
.aia-answer{animation:aia-in var(--dur-1) var(--ease)}

/* The problem response. Same pocket as an answer, because it carries the same
   weight for the reader - but led by a hedge rather than a question, so the
   lead-in is small, quiet, and sits tight against the discipline name it
   qualifies. "Dit klinkt als" / "Procesoptimalisatie" reads as one unit. */
.aia-problem__lead{
  font-size:12.5px;line-height:1.2;
  color:var(--steen);
  margin-bottom:6px;
}
/* The discipline name is the heading here, so it takes the answer heading's
   size but not its full brightness: it is a classification, not a quote. */
.aia-answer--problem .aia-answer__q{color:var(--m-3)}
/* The pocket is gone: the reply card above IS the surface now, and a second
   inset panel inside it was a box in a box. */
.aia-answer__body{
  position:relative;
  margin:0;padding:0;
  background:none;
  box-shadow:none;
}
/* The machined hairline that marks a cut edge everywhere else on the site. Top
   edge only; the pocket's own lip carries the other three.

   THE LATHE PASS, and it is the opposite of a typing indicator. The rule is
   drawn left to right the instant an answer lands — but the answer is already
   complete and readable underneath it, so nothing is ever withheld or faked
   into looking slow. The keyframe is from-only with no fill-mode, so the
   resting frame is the finished rule: no-JS, reduced motion and a screenshot
   all see the cut already made. The ::before is recreated on every render, so
   each answer, related row included, gets its own pass. */
.aia-answer__body::before{content:none}
/* In forced colours the pocket loses all three of the things that delimit it —
   the gold wash, the milled lip and the --rake hairline are a background, a
   shadow and a gradient, and the UA drops every one. Without this the answer
   is unframed prose butted against the question it answers. */
@media (forced-colors:active){
  .aia-answer__body{border:1px solid CanvasText}
  .aia-bar{border-bottom:1px solid CanvasText}
}
.aia-answer:focus{outline:none}
.aia-answer:focus-visible{outline-offset:4px}
@media (prefers-reduced-motion: reduce){
  .aia-answer{animation:none}
}
/* The question the console actually matched, echoed back so the visitor can
   see WHICH question was answered — the one thing a retrieval box owes its
   reader, and the difference between an answer and a non sequitur. */
/* THE HIERARCHY IS INVERTED FROM WHAT IT WAS, on purpose. At 21px in display
   gold this line was the loudest thing in the reply, which made every answer
   read as a document with a title rather than as something said back to you.
   Its job is smaller than that: it states WHICH question was matched, so a
   near-miss is visible. The answer itself is the message and now carries the
   weight. Still an h3 — heading navigation reaches it, it is only quieter. */
.aia-answer__q{
  font-family:inherit;font-weight:600;
  font-size:14px;line-height:1.4;
  letter-spacing:0;
  color:var(--steen);
  text-wrap:balance;
  max-width:40ch;
}
.aia-answer__a{
  margin-top:9px;
  /* The message itself, and now the brightest thing in the card. */
  font-size:16.5px;line-height:1.7;color:var(--ink);
  /* 62ch measured against this panel's width never actually bound anything -
     the panel is narrower than the measure, so the cap did nothing. 46ch is
     inside the panel and is the line length the text will really take. */
  max-width:46ch;
  text-wrap:pretty;
  overflow-wrap:break-word;
}

/* Provenance. An answer that cannot be traced to a page is the failure this
   whole module is built to avoid, so the source is a first-class row on the
   face rather than a footnote. */
.aia-src{
  margin-top:16px;padding-top:14px;
  border-top:1px solid var(--rule-soft);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.aia-src .aia-lbl{margin-bottom:0}
.aia-src__l{
  display:inline-flex;align-items:center;gap:.5em;
  min-height:32px;
  font-size:13.5px;color:var(--gold-text);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  transition:opacity var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
/* Brighter on hover, never dimmer: an instrument does not fade its own
   engraving, and this is the one link on the face that proves the answer. */
.aia-src__l:hover{opacity:1;color:var(--m-4)}

/* ---------- The thread ----------
   A correspondence panel, not a support widget. It reads as a chat because of
   the one thing that actually signals a conversation — the two speakers sit on
   opposite margins and their messages are sized differently — and it stays
   prestige because of everything it refuses: no rounded speech balloons, no
   avatars, no coloured pastel bubbles, no emoji, no ellipsis that pretends
   someone is typing. Square corners throughout, because the whole site is cut
   square; a radius here would be the one soft edge in the building. */
.aia-open{
  font-size:14.5px;line-height:1.62;color:var(--muted);
  margin:0 0 24px;max-width:58ch;
}

.aia-turn{
  display:flex;flex-direction:column;
  margin-top:clamp(22px,2.6vw,30px);
}
.aia-turn:first-child{margin-top:0}

/* WHO IS SPEAKING, said once and quietly. A name above the message is the
   convention that lets a reader skim a thread; an avatar would be a face this
   company does not have. */
.aia-turn__who{
  display:flex;align-items:center;gap:8px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;color:var(--steen);
  margin-bottom:9px;
}
.aia-turn__who .aia-q__pip{opacity:.75}

/* ---- the visitor's side: right margin, tighter measure ---- */
.aia-turn--you{align-items:flex-end}
.aia-turn--you .aia-turn__who{flex-direction:row-reverse}
/* THE VISITOR'S MESSAGE. Warm, filled, and rounded on three corners with the
   fourth left tight against the margin it came from — the way a message
   attaches itself to its sender without resorting to a drawn tail. */
.aia-turn__said{
  margin:0;max-width:min(74%,44ch);
  padding:14px clamp(17px,1.8vw,21px);
  background:linear-gradient(160deg,rgba(201,161,74,.20),rgba(201,161,74,.11));
  border:1px solid rgba(201,161,74,.32);
  border-radius:18px 18px 5px 18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
  font-size:15.5px;line-height:1.55;color:var(--ink);
  text-align:left;
  overflow-wrap:break-word;
}
.skin-creme .aia-turn__said,
.skin-creme-deep .aia-turn__said{background:linear-gradient(160deg,rgba(122,94,28,.14),rgba(122,94,28,.07))}

/* ---- the console's side: left margin, room to answer ---- */
.aia-turn--pcg{align-items:flex-start}
/* THE REPLY IS THE MESSAGE SURFACE. The answer used to be a flat block whose
   only container was a milled pocket around the prose; now the whole reply —
   heading, prose, sources, follow-ups — is one raised card, mirrored against
   the visitor's bubble. */
.aia-turn--pcg > .aia-answer{
  width:100%;max-width:92%;
  padding:clamp(18px,2vw,24px) clamp(18px,2.1vw,26px) clamp(16px,1.8vw,22px);
  background:rgba(255,255,255,.042);
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px 18px 18px 5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -34px rgba(0,0,0,1);
}
.skin-creme .aia-turn--pcg > .aia-answer,
.skin-creme-deep .aia-turn--pcg > .aia-answer{background:rgba(26,22,16,.045);border-color:rgba(26,22,16,.09)}

/* ---- entrance ----
   THE SEQUENCE IS BUILT FROM DURATIONS, NOT DELAYS, and that is a constraint
   worth keeping: a delayed entrance needs animation-fill-mode:backwards to
   stay hidden until it starts, and a fill-mode is exactly what parks content
   in an invisible frame when the animation never runs. Everything below starts
   in the same frame and simply takes longer to arrive, so the reply settles
   after the question and the answer assembles itself part by part — while a
   browser that skips animation altogether still paints every one of them in
   its finished position. */
.aia-turn--you{animation:aia-msg .42s var(--ease)}
.aia-turn--pcg{animation:aia-msg .62s var(--ease)}
.aia-turn--pcg .aia-turn__who{animation:aia-msg .5s var(--ease)}
.aia-turn--pcg .aia-answer__q{animation:aia-rise .58s var(--ease)}
.aia-turn--pcg .aia-answer__a{animation:aia-rise .72s var(--ease)}
.aia-turn--pcg .aia-src{animation:aia-rise .84s var(--ease)}
.aia-turn--pcg .aia-handoff{animation:aia-rise .84s var(--ease)}
.aia-turn--pcg .aia-related{animation:aia-rise .96s var(--ease)}

/* ---------- The hand-off ----------
   The refusal branch's primary action. It is the one place the console sends
   the visitor away, so it gets a real sentence and a real button rather than a
   bare link in a row of three. */
.aia-handoff{margin-top:16px}
.aia-handoff__lead{
  margin:0 0 14px;
  font-size:14.5px;line-height:1.6;color:var(--muted);
  max-width:52ch;
}
.aia-handoff__go{gap:.5em}
/* "Of rechtstreeks" introduces the raw contact details underneath, so it needs
   air above it and none of the margin the register labels carry. */
.aia-lbl--or{margin:22px 0 10px}

/* ---------- Related ---------- */
.aia-related{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule-soft)}
.aia-related .aia-q{min-height:36px;font-size:14px;padding:7px 14px}

/* ---------- Routes (below threshold, and the entries whose job is to hand
     the question to a person) ---------- */
.aia-routes{
  margin-top:16px;padding-top:14px;
  border-top:1px solid var(--rule-soft);
  display:flex;flex-wrap:wrap;gap:8px;
}
.aia-route{
  display:inline-flex;align-items:center;
  min-height:42px;padding:9px 17px;
  border-radius:999px;
  border:1px solid var(--aia-tick);
  font-size:13.5px;color:var(--ink);text-decoration:none;
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease);
}
.aia-route:hover{color:var(--gold-text);border-color:var(--gold-text);background:rgba(201,161,74,.08)}
.skin-creme .aia-route:hover,.skin-creme-deep .aia-route:hover{background:rgba(122,94,28,.07)}
/* The hand-off is the primary action of the refusal, so it is the one filled
   control in the card rather than a third outline among three. */
.aia-route--go{
  border-color:transparent;
  background:rgba(201,161,74,.16);
  color:var(--m-4);font-weight:500;
}
.aia-route--go:hover{background:rgba(201,161,74,.26);border-color:transparent}

/* ---------- Console footer ----------
   Label only. Nothing interactive lives here any more; see the dock
   keep-out note above. */
.aia-foot{
  padding:13px clamp(14px,2vw,20px);
  border-top:1px solid var(--rule-soft);
}
.aia-foot__note{font-size:12.5px;line-height:1.55;color:var(--muted);max-width:62ch}

/* Shown until the script takes over. */
.aia-nojs{
  padding:0 clamp(14px,2vw,20px) 16px;
  font-size:13px;line-height:1.6;color:var(--muted);
}
.aia-console.is-live .aia-nojs{display:none}

/* ---------- Screen-reader only ---------- */
.aia-sr{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Keyframes ----------
   Animates *from* a hidden frame to the element's own resting style, with
   no fill-mode, so a frame that never runs leaves the content visible. */
@keyframes aia-in{from{opacity:0;transform:translateY(8px)}}
@keyframes aia-cut{from{transform:scaleX(0)}}
/* A message arriving in the thread. Slightly further and softer than aia-in:
   this is a whole utterance landing, not a panel refreshing. */
@keyframes aia-msg{from{opacity:0;transform:translateY(16px)}}
/* The parts of a reply assembling. Same shape, shorter throw, so the pieces
   read as belonging to the message rather than as separate arrivals. */
@keyframes aia-rise{from{opacity:0;transform:translateY(9px)}}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .aia-console *,
  .aia-console *::before,
  .aia-console *::after{
    animation:none !important;
    transition-duration:1ms !important;
  }
  /* The dock is OUTSIDE .aia-console, so the selectors above never reached it:
     under reduced motion the console still threw a fixed element 140% down the
     viewport on every answer. It may still get out of the way — it just does
     it without the travel. */
  body:has(.aia-console.is-engaged) .cta-dock,
  body:has(.aia-console:focus-within) .cta-dock{transition-duration:1ms !important}
}

/* ---------- Narrow console ----------
   Every layout switch in this module hangs off the SAME question: how wide
   is the console, not how wide is the window. A viewport query would
   disagree with the rest of the sheet the moment either is tuned.
   Container query, one threshold, 520px. */
@container aia (max-width:519.98px){
  .aia-bar{gap:10px}
  .aia-bar__id{flex:1 1 auto}
  /* THE COUNT DROPS FIRST. At 390 the header is name + count + Wissen on one
     row, and the count is nowrap, so it ran straight under the button and
     forced the name to break across two lines. Of the three, the count is the
     one nobody needs on a phone. */
  .aia-bar__gauge{display:none}
  /* Controls drop to their own row; the reserved (invisible) clear slot
     moves to the end so nothing looks indented by a gap. */
  .aia-bar__act{margin-left:auto}
  /* Same floor-and-ceiling construction as above, re-tuned for a narrow
     console: everything reflows taller here, so the floor rises with it and
     the ceiling is given a larger share of a phone screen. */
  .aia-panel{min-height:clamp(240px,34vh,320px);max-height:min(78vh,620px)}
  .aia-input{min-height:52px}
  .aia-answer__a{font-size:15px}
  .aia-routes .aia-route{flex:1 1 100%;justify-content:center}
}