/* S3 — the results "workspace" layout.
 *
 * Design: "UI Improvement Request" handoff, option 1b, Organic tokens.
 * This file styles ONLY `.ks3-workspace`. The classic results renderer in
 * s3.css is untouched and still ships; the two are chosen between at render
 * time (see KS3_Embed::render_results). Nothing here leaks out of the
 * workspace scope, so both can be on the same site during sign-off.
 *
 * ── Tokens ───────────────────────────────────────────────────────────────────
 * The handoff ships its own token sheet (organic.css) whose names collide with
 * nothing here but duplicate everything. Importing both would give the site two
 * parallel colour systems that drift the first time either is retuned. So the
 * Organic VALUES are bound to the --ks3-* NAMES the plugin already uses, scoped
 * to this layout — one naming system, and Appearance > Customize > Additional
 * CSS still works the way s3.css documents.
 *
 * ── A standing trap ──────────────────────────────────────────────────────────
 * This design is made almost entirely of pills and segmented controls, i.e. of
 * <button>. `font: inherit` does NOT reset colour, so a button with no explicit
 * `color` takes the theme's — which is how village names rendered white on
 * white in 1.31.0. Every button rule below sets `color` explicitly, and the
 * blanket rule near the top is the backstop. Do not remove it.
 */

/* The faces are in s3-fonts.css, enqueued as a dependency of this file. */

.ks3-workspace {
  /* ground + surfaces */
  --ks3-bg:            #f5ead8;
  --ks3-surface:       #ebddc5;
  --ks3-card:          #f9f4ed;
  --ks3-text:          #201e1d;
  /* neutral ramp */
  --ks3-n-200:         #eee7db;
  --ks3-n-300:         #dcd3c4;
  --ks3-n-400:         #c0b6a5;
  --ks3-n-600:         #82796a;
  --ks3-n-700:         #645c50;
  --ks3-n-800:         #474238;
  /* terracotta ramp */
  --ks3-accent-100:    #fff2eb;
  --ks3-accent-200:    #ffe1d0;
  --ks3-accent-300:    #ffc6a5;
  --ks3-accent:        #c67139;
  --ks3-accent-500:    #d67f48;
  --ks3-accent-600:    #b2622d;
  --ks3-accent-700:    #8c491a;
  --ks3-accent-800:    #643312;
  /* sage ramp */
  --ks3-sage-200:      #e1eecc;
  --ks3-sage-300:      #ccdbb2;
  --ks3-sage-400:      #aebf92;
  --ks3-sage-600:      #728157;
  --ks3-sage-800:      #3d472b;
  /* type + shape */
  --ks3-font-head:     'Young Serif', Georgia, serif;
  --ks3-font-body:     'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ks3-r-card:        32px;
  --ks3-r-panel:       28px;
  --ks3-r-inner:       20px;
  --ks3-r-pill:        999px;
  --ks3-shadow-sm:     0 1px 2px rgba(46, 43, 37, .14);
  --ks3-shadow-md:     0 3px 10px rgba(46, 43, 37, .16);

  background: var(--ks3-bg);
  color: var(--ks3-text);
  font-family: var(--ks3-font-body);
  font-size: 15px;
  line-height: 1.5;
  padding: 20px;
  border-radius: var(--ks3-r-card);
  text-align: left;
  box-sizing: border-box;
}
.ks3-workspace *,
.ks3-workspace *::before,
.ks3-workspace *::after { box-sizing: border-box; }

/* ── The hidden attribute has to win ────────────────────────────────────────
   `[hidden] { display: none }` lives in the BROWSER's stylesheet, and every
   author rule beats the browser's regardless of specificity. So the moment a
   rule below says `display:` on an element this layout hides — the accordion
   bodies (`.ks3-ws-person-body`) and the 1918 question (`.ks3-ws-q`, hidden
   until the first question is answered yes) — the attribute stops meaning
   anything and both render permanently open.

   The same mistake is live in the classic layout: `.ks3-actions{display:flex}`
   has kept "Get results" on screen with nothing selected since it was written.

   `!important` is deliberate. A theme rule can be more specific than anything
   scoped here, and this is the one declaration that must not lose. */
.ks3-workspace [hidden] { display: none !important; }

/* Young Serif is single-weight. Any font-weight above 400 landing on a heading
   makes the browser synthesise a bold and smear it, so every heading pins 400. */
.ks3-workspace h2, .ks3-workspace h3, .ks3-ws-head {
  font-family: var(--ks3-font-head); font-weight: 400; margin: 0;
}

/* The backstop for the inheritance trap described at the top. */
.ks3-workspace button { font: inherit; color: var(--ks3-text); cursor: pointer; }
.ks3-workspace :focus-visible {
  outline: 2px solid var(--ks3-accent); outline-offset: 2px; border-radius: 4px;
}
.ks3-workspace :focus:not(:focus-visible) { outline: none; }

/* ── Layout ─────────────────────────────────────────────────────────────────
   Below ~820px the columns wrap and the aside lands on top. That is deliberate:
   on a phone the verdict and the next action come first. */
.ks3-ws-cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ks3-ws-aside {
  flex: 1 1 300px; position: sticky; top: 20px;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.ks3-ws-main {
  flex: 999 1 480px; min-width: 0;
  /* Tighter than the handoff's 28px, because a rule now does the separating
     and whitespace no longer has to do it alone. */
  display: flex; flex-direction: column; gap: 14px;
}
/* A hairline between "Your family" and "Possible matches". Sized off the ink
   colour rather than a grey so it sits in the same family as everything else,
   and kept at 12% so it reads as a seam and not as a border. */
.ks3-ws-main > section + section {
  border-top: 1px solid rgba(32, 30, 29, .12);
  padding-top: 14px;
}
@media (max-width: 820px) {
  .ks3-workspace { padding: 14px; }
  /* Sticky with nothing to scroll past pins the card over the content. */
  .ks3-ws-aside { position: static; }
}

/* ── Live verdict card ─────────────────────────────────────────────────────── */
.ks3-ws-verdict {
  background: var(--ks3-text); color: var(--ks3-card);
  border-radius: var(--ks3-r-card); padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.ks3-ws-kicker {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ks3-sage-300);
}
.ks3-ws-kicker::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ks3-sage-400); flex: none;
}
.ks3-ws-verdict-head {
  font-family: var(--ks3-font-head); font-weight: 400;
  font-size: 26px; line-height: 1.15; margin: 0; color: var(--ks3-card);
}
.ks3-ws-verdict-line { margin: 0; font-size: 14px; color: var(--ks3-n-300); }
.ks3-ws-verdict-line strong { color: var(--ks3-card); }

.ks3-ws-progress { display: flex; gap: 4px; }
.ks3-ws-progress i {
  flex: 1 1 0; height: 8px; border-radius: var(--ks3-r-pill);
  background: var(--ks3-n-700);
}
.ks3-ws-progress i.is-on { background: var(--ks3-sage-400); }
.ks3-ws-caption { margin: 0; font-size: 13px; color: var(--ks3-n-300); }

.ks3-ws-cta {
  font-family: var(--ks3-font-head); font-weight: 400; font-size: 15px;
  background: var(--ks3-accent-500); color: #fff;
  border: 0; border-radius: var(--ks3-r-pill); padding: 12px 18px;
  text-align: center; width: 100%;
}
.ks3-ws-cta:hover { background: var(--ks3-accent-600); color: #fff; }
.ks3-ws-cta[disabled] { opacity: .6; cursor: default; }

/* The handoff shows the button and the sent state but never the form between
   them. Name and email are still required, so the form opens inside the card. */
.ks3-ws-gate { display: flex; flex-direction: column; gap: 10px; }
.ks3-ws-gate p { margin: 0; font-size: 13px; color: var(--ks3-n-300); }
.ks3-ws-gate label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ks3-n-300); }
.ks3-ws-gate input {
  font: inherit; font-size: 15px; color: var(--ks3-text); background: var(--ks3-card);
  border: 0; border-radius: var(--ks3-r-pill); padding: 10px 14px; width: 100%;
}
.ks3-ws-sent { margin: 0; font-size: 14px; color: var(--ks3-sage-300); }
.ks3-ws-terms { margin: 0; font-size: 12px; color: var(--ks3-n-600); }

/* ── "Your search" card ────────────────────────────────────────────────────── */
.ks3-ws-search {
  background: var(--ks3-card); border-radius: var(--ks3-r-card);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 12px;
}
.ks3-ws-search-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ks3-ws-search-top h3 { font-family: var(--ks3-font-body); font-weight: 700; font-size: 15px; margin: 0; }
.ks3-ws-again {
  background: none; border: 0; padding: 0;
  font-size: 13px; font-weight: 600; color: var(--ks3-accent-700); text-decoration: underline;
}
.ks3-ws-again:hover { color: var(--ks3-accent-800); }
.ks3-ws-again[disabled] { opacity: .5; cursor: default; }

.ks3-ws-field { display: flex; flex-direction: column; gap: 2px; }
.ks3-ws-value { font-family: var(--ks3-font-head); font-weight: 400; font-size: 24px; line-height: 1.15; }
.ks3-ws-variants { font-size: 12px; color: var(--ks3-n-700); }
.ks3-ws-hint { font-size: 12px; color: var(--ks3-accent-700); margin: 0; }
.ks3-ws-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Missing fields are dashed chips that become inputs when clicked. */
.ks3-ws-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ks3-ws-chip {
  background: none; border: 1.5px dashed var(--ks3-n-400); border-radius: var(--ks3-r-pill);
  padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--ks3-n-700);
}
.ks3-ws-chip:hover { border-color: var(--ks3-accent); color: var(--ks3-accent-700); }
.ks3-ws-input {
  font: inherit; font-size: 13px; color: var(--ks3-text);
  background: #fff; border: 1.5px solid var(--ks3-n-400);
  border-radius: var(--ks3-r-pill); padding: 6px 12px; min-width: 130px;
}
.ks3-ws-known { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ks3-n-700); }
.ks3-ws-known b { color: var(--ks3-text); font-weight: 600; }

/* Village disambiguation — kept from the classic layout, restyled. The 1.31.0
   contrast fix is why `color` is stated on the button and on its children. */
.ks3-ws-village { display: flex; flex-direction: column; gap: 6px; }
.ks3-ws-village p { margin: 0; font-size: 12px; color: var(--ks3-n-700); }
.ks3-ws-cand {
  text-align: left; background: var(--ks3-n-200); color: var(--ks3-text);
  border: 1px solid var(--ks3-n-300); border-radius: var(--ks3-r-inner);
  padding: 8px 12px; display: flex; flex-direction: column; gap: 1px;
}
.ks3-ws-cand:hover { border-color: var(--ks3-accent); background: var(--ks3-accent-100); }
.ks3-ws-cand b    { font-size: 14px; color: var(--ks3-text); }
.ks3-ws-cand span { font-size: 12px; color: var(--ks3-n-700); }

/* ── Section headings ──────────────────────────────────────────────────────── */
.ks3-ws-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ks3-ws-sec-head h2 { font-size: 28px; line-height: 1.1; }
.ks3-ws-sec-note { font-size: 14px; color: var(--ks3-n-700); }

/* ── Your family: the accordion ────────────────────────────────────────────── */
.ks3-ws-people { display: flex; flex-direction: column; gap: 8px; }
.ks3-ws-person { background: var(--ks3-card); border-radius: var(--ks3-r-panel); box-shadow: var(--ks3-shadow-sm); }
.ks3-ws-person-head {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: none; border: 0; padding: 16px 18px; text-align: left;
  border-radius: var(--ks3-r-panel); color: var(--ks3-text);
}
.ks3-ws-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ks3-accent-500); color: #fff;
  font-family: var(--ks3-font-head); font-weight: 400; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
/* Name above, the record's own facts below — as the handoff draws it. These
   are <span>s, so without a block display they ran together on one line and
   read as "JAN NOVAKGRANDPARENT · BORN 1863". */
.ks3-ws-person-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ks3-ws-person-name {
  font-family: var(--ks3-font-head); font-weight: 400; font-size: 18px; line-height: 1.2;
  overflow-wrap: anywhere;
}
.ks3-ws-person-meta { font-size: 13px; line-height: 1.35; color: var(--ks3-n-700); }
.ks3-ws-status {
  flex: none; border-radius: var(--ks3-r-pill); padding: 4px 10px;
  font-size: 12px; font-weight: 600;
  background: var(--ks3-accent-200); color: var(--ks3-accent-800);
}
.ks3-ws-status.is-done { background: var(--ks3-sage-200); color: var(--ks3-sage-800); }

.ks3-ws-person-body { padding: 4px 18px 20px 72px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 560px) { .ks3-ws-person-body { padding-left: 18px; } }

.ks3-ws-warn {
  background: var(--ks3-accent-100); color: var(--ks3-accent-800);
  border-radius: 18px; padding: 10px 14px; font-size: 13px; margin: 0;
}

.ks3-ws-q { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ks3-ws-q-text { flex: 1 1 220px; min-width: 0; }
.ks3-ws-q-label { display: block; font-size: 14px; font-weight: 600; }
.ks3-ws-q-hint  { display: block; font-size: 12px; color: var(--ks3-n-700); }

.ks3-ws-seg { display: flex; gap: 4px; background: var(--ks3-n-200); border-radius: var(--ks3-r-pill); padding: 3px; }
.ks3-ws-seg button {
  border: 0; background: none; color: var(--ks3-n-800);
  border-radius: var(--ks3-r-pill); padding: 6px 12px; font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.ks3-ws-seg button:hover { background: var(--ks3-n-300); color: var(--ks3-n-800); }
.ks3-ws-seg button.is-on            { color: #fff; }
.ks3-ws-seg button.is-on:hover      { color: #fff; }
.ks3-ws-seg button.is-on.pos-no     { background: var(--ks3-accent-600); }
.ks3-ws-seg button.is-on.pos-unknown{ background: var(--ks3-n-700); }
.ks3-ws-seg button.is-on.pos-yes    { background: var(--ks3-sage-600); }

.ks3-ws-evidence-title {
  margin: 0 0 -8px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ks3-n-600);
}
.ks3-ws-found { margin: 0; font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.ks3-ws-found b  { font-weight: 600; }
.ks3-ws-found em { font-style: normal; color: var(--ks3-n-700); display: block; font-size: 12px; }
.ks3-ws-held { margin: 0; font-size: 13px; color: var(--ks3-n-700); display: flex; align-items: flex-start; gap: 6px; }
.ks3-ws-held svg { flex: none; margin-top: 2px; }

/* ── The map ─────────────────────────────────────────────────────────────────
   One outline, one pin per place. Colours come from the same ramps as the rest
   of the layout, so the map is part of the page rather than a component
   dropped onto it. */
.ks3-ws-map {
  background: var(--ks3-card); border-radius: var(--ks3-r-panel);
  padding: 18px 20px 16px;
}
.ks3-ws-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.ks3-ws-map-land {
  fill: var(--ks3-sage-200); stroke: var(--ks3-sage-400); stroke-width: 2;
  stroke-linejoin: round;
}
/* The two reference cities. Furniture, not content: they orient the pins and
   must never read as one. Hence the neutral ramp rather than the terracotta —
   a city in accent colour is a finding, and nobody emigrated from "Bratislava,
   printed on the map".

   No halo. 1.51.0 gave the labels a card-coloured outline against the case
   where one crosses from the land onto the panel behind it. Neither ever does:
   both cities are fixed points, "Bratislava" runs x 70-215 at y 386 where the
   land spans 30-515, and "Kosice" runs x 799-890 at y 235 where it spans
   29-961. So the outline was insurance against nothing, and what it actually
   produced was a visible white rim on every letter — Martin, 2026-10-08. If a
   third city is ever added near an edge, move the label rather than reaching
   for the stroke again.

   Sized in viewBox units, so the label scales with the map. 26 is ~13px at the
   desktop column width and ~7px on a phone, which is why the breakpoint at the
   foot of this block puts it back up: the map shrinks faster than the text
   should. */
.ks3-ws-city-dot  { fill: var(--ks3-n-700); }
.ks3-ws-city-text {
  fill: var(--ks3-n-700); font-family: var(--ks3-font-body);
  font-size: 26px; font-weight: 600;
}
@media (max-width: 820px) { .ks3-ws-city-text { font-size: 34px; } }

.ks3-ws-pin-dot   { fill: var(--ks3-accent-600); }
.ks3-ws-pin-text  { fill: #fff; font-family: var(--ks3-font-body); font-size: 17px; font-weight: 700; }
/* An approximate pin says so by being soft-edged: the haze is the rounding the
   disclosure policy applied, drawn at roughly the size of it. */
.ks3-ws-pin-haze  { fill: var(--ks3-accent-500); opacity: .22; }
.ks3-ws-pin.is-approx .ks3-ws-pin-dot { fill: var(--ks3-accent-500); }

.ks3-ws-legend {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  font-size: 13px; color: var(--ks3-n-700);
}
.ks3-ws-legend li { display: flex; align-items: center; gap: 7px; }
.ks3-ws-legend b { color: var(--ks3-text); font-weight: 600; }
.ks3-ws-legend-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--ks3-accent-600);
}

/* ── Possible matches ──────────────────────────────────────────────────────── */
.ks3-ws-matches { background: var(--ks3-card); border-radius: var(--ks3-r-panel); padding: 6px 8px; }
.ks3-ws-match {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 10px; border-radius: var(--ks3-r-inner);
}
.ks3-ws-match.is-mine { background: var(--ks3-accent-100); }
/* Same stacking, same reason: "Jan Novakage 44 · arrived 1907". */
.ks3-ws-match-id { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ks3-ws-match-name { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.ks3-ws-match-meta { font-size: 13px; line-height: 1.35; color: var(--ks3-n-700); }

.ks3-ws-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.ks3-ws-pill {
  border: 1px solid var(--ks3-n-300); background: var(--ks3-card); color: var(--ks3-n-800);
  border-radius: var(--ks3-r-pill); padding: 5px 11px; font-size: 12px; font-weight: 600;
}
.ks3-ws-pill:hover { border-color: var(--ks3-accent); color: var(--ks3-accent-700); }
.ks3-ws-pill.is-on {
  background: var(--ks3-text); border-color: var(--ks3-text); color: var(--ks3-card);
}
.ks3-ws-pill.is-on:hover { color: var(--ks3-card); }

.ks3-ws-note {
  background: var(--ks3-sage-200); color: var(--ks3-sage-800);
  border-radius: 24px; padding: 14px 18px; font-size: 14px; margin: 12px 0 0;
}
.ks3-ws-note b { font-weight: 700; }
.ks3-ws-note button {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
  color: var(--ks3-accent-700); text-decoration: underline;
}

.ks3-ws-empty { margin: 0; padding: 14px 10px; font-size: 14px; color: var(--ks3-n-700); }
/* This line lives INSIDE the verdict card, which is near-black — and both of
   these colours were picked for a light surface. #643312 on #201e1d is 1.60:1,
   which is not a contrast problem so much as invisible ink: the daily-limit
   notice, the one message that has to be read, was the least legible thing on
   the page. Measured against #201e1d: 11.19:1 and 10.97:1. */
.ks3-ws-status-line {
  margin: 0; font-size: 13px; line-height: 1.45; color: var(--ks3-n-300);
}
.ks3-ws-status-line.is-error {
  color: var(--ks3-accent-300);
  /* A surface as well as a colour: an error that looks like the running
     commentary beside it gets read as commentary. */
  background: rgba(255, 198, 165, .10);
  border-radius: 16px;
  padding: 10px 14px;
}
/* Empty between messages — without this the tinted block sits there blank. */
.ks3-ws-status-line:empty { display: none; }

/* ── Searching ───────────────────────────────────────────────────────────────
   A search takes seconds, and one quiet line in a thin panel reads as a result
   rather than as work in progress. So the panel holds the shape of what is
   coming — skeleton rows the size of real match rows — and says so in words. */
.ks3-ws-loading {
  display: flex; align-items: center; gap: 14px; padding: 14px 10px 6px;
}
/* Krtko digs. A still picture of a mole beside the word "searching" is a
   picture, not a signal — the movement is what says the page is still working.
   Rocking rather than bobbing: he is leaning into the soil, and a pure
   translate reads as a bounce. Stopped under prefers-reduced-motion by the rule
   at the foot of this file, where the sentence carries the message instead. */
.ks3-ws-loading img {
  width: 84px; height: 56px; flex: none;
  transform-origin: 60% 85%;
  animation: ks3-ws-dig .62s ease-in-out infinite;
}
@keyframes ks3-ws-dig {
  0%   { transform: rotate(-4deg) translateY(0); }
  45%  { transform: rotate(3.5deg) translateY(2px); }
  70%  { transform: rotate(1deg) translateY(1px); }
  100% { transform: rotate(-4deg) translateY(0); }
}
.ks3-ws-loading p { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.ks3-ws-loading b { font-size: 15px; font-weight: 700; color: var(--ks3-text); }
.ks3-ws-loading span { font-size: 13px; color: var(--ks3-n-700); }

.ks3-ws-skels { display: flex; flex-direction: column; gap: 2px; padding: 0 2px 6px; }
.ks3-ws-skel-row {
  display: flex; flex-direction: column; gap: 7px;
  padding: 14px 10px; border-radius: var(--ks3-r-inner);
}
.ks3-ws-skel {
  display: block; height: 11px; border-radius: var(--ks3-r-pill);
  /* Two stops of the ground colour, swept across. Not a grey bar: a grey
     placeholder on a sand card reads as a broken image. */
  background: linear-gradient(90deg,
      var(--ks3-n-200) 0%, var(--ks3-surface) 45%, var(--ks3-n-200) 90%);
  background-size: 300% 100%;
  animation: ks3-ws-sweep 1.4s ease-in-out infinite;
}
.ks3-ws-skel-name { width: 42%; }
.ks3-ws-skel-meta { width: 68%; height: 9px; opacity: .72; }
.ks3-ws-skel-row:nth-child(2) .ks3-ws-skel { animation-delay: .12s; }
.ks3-ws-skel-row:nth-child(3) .ks3-ws-skel { animation-delay: .24s; }
@keyframes ks3-ws-sweep {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ks3-workspace * { transition: none !important; animation: none !important; }
  /* With the sweep stopped, a mid-gradient bar can look like a rendering
     fault. A flat tint reads as a placeholder; the sentence above it is what
     actually says "searching" here. */
  .ks3-ws-skel { background: var(--ks3-n-200); }
}

/* ── The two lines below the columns ─────────────────────────────────────────
   "You told us: …" and the quota notice are server-rendered and shared with the
   classic layout's markup — but s3.css does not load here, so they would land
   unstyled. Same class names on purpose: a site that has already restyled them
   in Additional CSS keeps its restyling in both layouts. */
.ks3-workspace .ks3-orig {
  margin: 20px 0 0; font-size: 13px; color: var(--ks3-n-700);
  display: flex; gap: 6px; flex-wrap: wrap;
}
.ks3-workspace .ks3-orig span { font-weight: 600; }
.ks3-workspace .ks3-orig em   { font-style: italic; }
.ks3-workspace .ks3-quota { margin: 6px 0 0; font-size: 12px; color: var(--ks3-n-600); }
/* Same class the classic layout uses, restyled to this palette — s3.css does
   not load here. It is a statement about the input, so it sits above the
   columns rather than inside the search card. */
.ks3-workspace .ks3-unclear {
  margin: 0 0 16px; padding: 12px 16px; border-radius: var(--ks3-r-inner);
  background: var(--ks3-accent-100); color: var(--ks3-accent-800); font-size: 14px;
}
.ks3-workspace .ks3-ws-empty { padding: 0; }