/* Wattlas — everything that decides where content sits on the FIRST paint (issue #370).
 *
 * nav.js builds the chrome (sidebar, mobile top bar, footer) at DOMContentLoaded, and it
 * used to inject these rules too, as a JS string, a moment earlier. That order painted a
 * broken frame on every navigation: the .shell grid was live while <main> was its only
 * child, so auto-placement put the whole page in the 248px sidebar column — the page sat
 * "squashed to the left" until the sidebar arrived (CLS 1.0 on desktop).
 *
 * So these rules live in a stylesheet every nav.js page loads in <head> (styles.css and
 * redesign.css @import it; spread.html and panels.html link it). Nothing that moves content
 * is left for JavaScript to inject:
 *   • .main is pinned to column 2 and .side to column 1, so an empty column 1 is just the
 *     space the sidebar will take.
 *   • On a phone, a spacer holds the top bar's height ABOVE .shell until nav.js inserts the
 *     bar and marks the chrome mounted (html.wx-chrome), in the same task. It must sit above
 *     .shell, not inside it as padding: padding kept the text still but let the .shell box
 *     itself jump 61px, and Chrome counted that (0.084 on every phone page, Lighthouse).
 *     The bar has a fixed height (nav.js reads --wx-topbar-reserve), so the spacer is exact.
 *   • The prerendered view opener (.wx-crumb, .wx-kicker) and the tokens it and every
 *     headline use (--s-*, --serif) are declared here, not injected.
 *   • Manrope's @font-face rules load here, with an Arial fallback scaled to Manrope's
 *     metrics, so a headline wraps the same before and after the font swaps in.
 * test_first_paint_layout.py fails a page that loses this stylesheet, or a nav.js that
 * injects any of it again. */

@import url("../vendor/fonts/manrope.css");

/* Arial, scaled to Manrope (#738), so a line wraps the same before and after the webfont swaps
   in. Arial has two weights and Manrope a continuous range, so the fallback comes in three
   bands, each sized by Manrope's rendered width over Arial's on the site's own headline and
   body strings: 400 is 102.6% of Arial, 600-700 is 99.6% of Arial Bold, and the 800 headlines
   are 88.6% of Arial Bold. Ascent and descent are Manrope's (1.07 and 0.30 of the em) divided
   by each size-adjust. Where Arial is not installed local() fails, the face is skipped, and
   the stack falls through to system-ui. */
@font-face {
  font-family: "Manrope Fallback"; font-weight: 100 550;
  src: local("Arial"), local("ArialMT");
  size-adjust: 102.6%; ascent-override: 104.3%; descent-override: 29.2%; line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback"; font-weight: 551 750;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 99.6%; ascent-override: 107.4%; descent-override: 30.1%; line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback"; font-weight: 751 900;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 88.6%; ascent-override: 120.8%; descent-override: 33.9%; line-gap-override: 0%;
}

:root {
  /* The eight section accents (#738): a cool set, each 4.5:1 or better as text on --bg and on
     a white card, with no orange and nothing near loss red. The token names are historic
     (--s-red is 04, --s-amber is 03); renaming them would rewrite every generated page. */
  --s-blue:#2e69b2; --s-green:#007c7d; --s-amber:#1f652f; --s-red:#956700; --s-plum:#812e63;
  --s-teal:#253c67; --s-indigo:#7a5da9; --s-olive:#5e6b10;
  /* One family since #738. --serif keeps its historic name: every headline rule reads it. */
  --sans:"Manrope","Manrope Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:var(--sans);
  /* The mobile top bar's fixed height. nav.js sets .topbar to exactly this. */
  --wx-topbar-reserve:61px;
}

.shell { display:grid; grid-template-columns:248px minmax(0,1fr); min-height:100vh; }
.shell > .side { grid-column:1; grid-row:1; }
.shell > .main { grid-column:2; grid-row:1; }
.main { padding:0 36px 80px; min-width:0; }
.main-inner { max-width:min(1220px,100%); margin:0 auto; padding-top:26px; }

@media (max-width:900px) {
  .shell { display:block; }
  /* The page's single horizontal gutter on a phone — .wrap and .card give theirs up
     below 760px (styles.css) so a chart isn't left with 258px of a 375px screen. */
  .main { padding:0 12px calc(96px + env(safe-area-inset-bottom)); }
  /* The top bar's space, above .shell, until nav.js replaces it with the bar. In a hub's
     frame nav.js adds .wx-chrome as it runs, and it is already in memory from the host
     page, so a frame does not paint with the spacer. */
  html:not(.wx-chrome) body::before { content:""; display:block; height:var(--wx-topbar-reserve); }
}

/* ---- Data views: hold the space the data will fill (#377) --------------------------------
   A view page paints its prose, then fetches its JSON and fills containers that were empty.
   Each one that grew on arrival pushed the lead chart down: 130–280px on 18 views, CLS up
   to 0.24 on a desktop and 0.33 on a phone. So the empty states are given their filled size.

   The chart. Chart.js sizes a responsive canvas to its container's width at an ASPECT RATIO,
   and charts.js sets that ratio: the authored width/height attributes (300 by default, so
   <canvas height="120"> is 2.5:1) on a desktop, PHONE_ASPECT 1.15 at (max-width: 760px).
   Before Chart.js runs, the canvas sat at its default 300x120 box. Stretched to the column
   with height:auto it takes the same intrinsic ratio Chart.js will use; on a phone it takes
   charts.js's. Chart.js then writes an inline width/height, which wins over both. Every
   authored canvas is at least 2:1, which is charts.js's TOO_WIDE threshold for switching
   to the phone ratio — test_first_paint_layout.py fails if a new canvas or a change to
   charts.js breaks that agreement. */
canvas[height]:not([width]) { display:block; width:100%; height:auto; }
@media (max-width:760px) { canvas[height]:not([width]) { aspect-ratio:1.15; } }

/* The KPI row: one row of cards on a desktop, two on a phone, where styles.css makes the
   grid two columns. 99px is a card with a one-line label; a view whose labels wrap still
   grows a little, but the chart no longer starts where the KPIs will be. */
.kpis:empty { min-height:99px; }
@media (max-width:640px) { .kpis:empty { min-height:206px; } }

/* "Data shown for …" — one line of .meta, filled on load. */
#periodNote:empty { min-height:26px; }

/* The zone chips (zones.js mountZoneChips, on /pulse /spread /divergence /residual-load) sit
   between the chart title and the canvas: one 26px row of six chips on a desktop, two rows
   (50px) on a phone. Empty until the data names the zones, so the canvas used to start one
   row too high and drop when they arrived. */
#zoneChips:empty { min-height:26px; }
@media (max-width:760px) { #zoneChips:empty { min-height:50px; } }
/* A hub frame on a phone is narrower than the page: the chips wrap to a third row. */
@media (max-width:760px) { html.wx-embed #zoneChips:empty { min-height:74px; } }

/* ---- A view inside a hub frame (#377) ----------------------------------------------------
   html.wx-embed is set by an inline script at the top of the view's opener block, before its
   content is parsed. Without it a frame painted the standalone layout first: <main> in the
   sidebar grid's second column (248px in), then a whole page collapsing to its lead card when
   nav.js ran. That was 0.3 of shift inside the frame, and a hub counts its frames' shifts.
   The frame stays invisible until nav.js has isolated the lead card (html.wx-embed-ready):
   content that is not visible is not scored as shifting. If nav.js never runs, the animation
   shows the frame after 8s anyway, so a frame is never left blank. Not sooner: a hub loads
   several frames at once, and on a slow phone nav.js can take seconds to run in each; a
   reveal that beats it shows exactly the collapse this hides. */
html.wx-embed .shell { display:block; }
html.wx-embed:not(.wx-embed-ready) body { visibility:hidden; animation:wx-embed-reveal 0s 8s forwards; }
@keyframes wx-embed-reveal { to { visibility:visible; } }
/* In a lead-only frame nav.js sets the KPI row as a one-line strip (#260), not cards: hold
   that height instead of the standalone row's, or the lead card starts 53px (104px on a
   phone) too low and jumps up when the figures land. */
html.wx-embed .kpis:empty { min-height:46px; }
@media (max-width:640px) { html.wx-embed .kpis:empty { min-height:102px; } }

/* ---- The view opener (build_view_opener.py prerenders it; nav.js used to style it) ---- */
.wx-crumb{display:flex;align-items:center;gap:8px;font-size:var(--fs-caption,12px);color:var(--hint,#5e6a77);
  margin:0 0 14px;flex-wrap:wrap}
.wx-crumb a{color:var(--muted,#495766);text-decoration:none}
.wx-crumb a:hover{color:var(--text,#162330);text-decoration:underline}
.wx-crumb a:focus-visible{outline:2px solid var(--text,#162330);outline-offset:2px;border-radius:4px}
/* The view's opener, in the section's own accent: number and question above the title,
   the same three lines a hub header uses. It is how a view page — the front door most
   visitors come through — says which of the seven questions it belongs to. */
.wx-kicker{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px;margin:0 0 8px;color:var(--a,var(--text,#162330))}
/* How old the figures are, at the top of the page rather than only in the footer: the
   site refreshes twice a month and a view can be two weeks stale. It is the date of THIS
   view's own data files (observeDataFreshness), so it never claims a cadence a curated or
   frozen-history view does not have. Empty until the data has loaded. */
.wx-kicker .wx-kfresh{margin-left:auto;font-size:var(--fs-caption,12px);font-weight:400;color:var(--hint,#5e6a77);
  min-width:146px;text-align:right}
/* The stamp keeps its width whether empty or filled (#377). It used to be display:none until
   the data loaded, and then as wide as its text; on a phone the filled stamp (145px at 12px)
   wrapped onto a second line and pushed the <h1> and everything under it down 23px. It is
   also written more than once — each data file can carry a fresher date, and "1 Sept" is
   narrower than "15 Sept" — so a width that followed the text could unwrap the line and wrap
   it again (/uk-regional). A fixed minimum, right-aligned, makes the kicker wrap the same way
   at every step; the empty line holds its height. */
.wx-kicker .wx-kfresh:empty{display:inline-block;min-height:19px}
.wx-kicker .wx-kn{display:inline-block;font-variant-numeric:tabular-nums;font-size:var(--fs-caption,12px);font-weight:800;line-height:1.3;
  color:var(--bg,#f0f4f7);background:var(--a,var(--blue,#2f5da0));padding:2px 7px;border-radius:var(--radius-sm,6px)}
.wx-kicker .wx-kq{font-size:var(--fs-emph,15px);font-weight:600}
/* Visually hidden, still announced. */
.wx-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* The "More in" list and the site footer (#464). build_site_links.py writes both into the
   page so a crawler that runs no JavaScript still finds the site's links; their styles live
   here, not in nav.js, so a short page (/contact) shows its footer styled on the first paint.
   In a hub frame the host page owns the chrome: hide them from the start (wx-embed is set by
   the opener block, before the body paints). */
.readon{margin-top:44px}
.readon .ro-head{font-size:var(--fs-label,11px);font-weight:600;color:var(--hint);margin-bottom:14px}
.readon .ro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.methods-line{margin:28px 0 0;font-size:var(--fs-caption,12px);color:var(--hint)}
.methods-line a{font-weight:600}
/* Links (#736). No sheet gave a bare link a colour, so every link without a colour rule of its
   own (the method line, a hub's method notes, source lines, table cells, prose) painted in the
   browser's #0000ee. Ink, at zero specificity through :where(), so any rule that colours its own
   links still wins. It sits here, where tokens.css would be the natural home, because this is
   the one sheet every page with the site's chrome loads (spread.html links it without
   tokens.css). The hairline underline is set per context, since a base underline would restyle
   links that already chose one: the method line and the method note take it as .story-links does. */
:where(a){color:var(--text)}
.methods-line a, .vmethod a{color:var(--text);text-decoration:underline;text-decoration-color:var(--border);
  text-decoration-thickness:1px;text-underline-offset:3px}
.methods-line a:hover, .vmethod a:hover{text-decoration-color:currentColor}
/* The enquiry line (#500) sits directly under the method line as one pair. */
.methods-line + .enquiry-line{margin-top:6px}
.methods-line + .alerts-line, .enquiry-line + .alerts-line{margin-top:6px}
.ro-card{display:flex;flex-direction:column;gap:4px;text-decoration:none;border:.5px solid var(--border);border-radius:var(--radius-sm,9px);
  padding:14px 16px;background:var(--surface);transition:background .14s,transform .16s,box-shadow .16s}
.ro-card:hover{background:var(--surface-2);transform:translateY(-2px);box-shadow:0 6px 22px rgba(22,35,48,.09)}
.ro-card .ro-t{font-family:var(--serif);font-size:17px;font-weight:500;color:var(--a,var(--text))}
.ro-card .ro-o{font-size:var(--fs-ui,13.5px);color:var(--muted);line-height:1.45}

.sitefoot{margin-top:64px;padding-top:34px;border-top:.5px solid var(--border);font-size:var(--fs-ui,13.5px)}
.sitefoot .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;margin-bottom:28px}
.sitefoot .foot-brand .fb-mark{font-size:20px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.sitefoot .foot-brand .fb-mark .fb-tile{width:22px;height:22px;flex:none;display:block}
.sitefoot .foot-brand p{font-size:var(--fs-ui,13.5px);color:var(--muted);line-height:1.6;margin:12px 0 0;max-width:34ch}
.sitefoot .foot-brand .fb-by{margin-top:.4em}
.sitefoot .foot-brand .fb-by a{color:var(--text);text-decoration:none;border-bottom:.5px solid var(--border)}
.sitefoot h2{font-size:var(--fs-label,11px);font-weight:600;color:var(--hint);margin:0 0 12px}
.sitefoot .foot-col a{display:block;font-size:var(--fs-ui,13.5px);color:var(--muted);text-decoration:none;padding:3px 0;line-height:1.5}
.sitefoot .foot-col a:hover{color:var(--text)}
.sitefoot .foot-bot{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;
  padding:18px 0 6px;border-top:.5px solid var(--border-2);font-size:var(--fs-caption,12px);color:var(--hint);line-height:1.6}
.sitefoot .foot-bot .fb-meta{max-width:64ch}
.sitefoot .foot-bot .fb-copy,.sitefoot .foot-bot .fb-updated{white-space:nowrap}
@media (max-width:760px){.sitefoot .foot-top{grid-template-columns:1fr 1fr;gap:22px}.sitefoot .foot-brand{grid-column:1 / -1}}
.wx-embed .readon,.wx-embed .sitefoot,.wx-embed .methods-line{display:none}

/* The readings block of a Streitfragen view (#623, assets/readings.js): one cell per position,
   flat at rest, the same surface for every position so no side is coloured as the right one. */
.wx-readings-head{text-align:center;font-size:var(--fs-caption,12px);color:var(--muted);margin:4px 0 6px}
.wx-readings{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.5px;background:var(--border);
  border:.5px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;margin:4px 0 10px}
.wx-reading{background:var(--surface-2);padding:10px 12px;font-size:12.5px;line-height:1.45;color:var(--text)}
.wx-reading b{display:block;margin-bottom:4px;color:var(--text)}

/* ---- Site search (#627) -------------------------------------------------------------------
   One field, drawn three times: at the top of the sidebar (nav.js), in the phone top bar
   (nav.js) and on /search (build_html.py). assets/search.js fills the list. The rules live
   here, in <head>, so the prerendered /search form is styled on the first paint.
   The sidebar is an index, so typing does not open a panel over the page: the list takes the
   place of the section list in the same column, flat, and Escape gives the sections back. */
.wx-search{position:relative;display:flex;align-items:center;gap:8px;margin:0}
/* A field needs an edge a reader can see (WCAG 1.4.11): 1px in --hint, as on the contact
   form, where a 0.5px --border hairline falls below 3:1 against --surface. */
.wx-search input[type=search]{flex:1 1 auto;min-width:0;box-sizing:border-box;margin:0;font:inherit;color:var(--text,#162330);
  background:var(--surface,#fff);border:1px solid var(--hint,#5e6a77);border-radius:var(--pill,8px);caret-color:var(--text,#162330);
  -webkit-appearance:none;appearance:none}
.wx-search input[type=search]::placeholder{color:var(--hint,#5e6a77);opacity:1}
.wx-search input[type=search]:focus-visible{outline:2px solid var(--text,#162330);outline-offset:1px}
/* The browser's own clear cross is drawn in its blue; Escape clears the field instead. */
.wx-search input[type=search]::-webkit-search-cancel-button,
.wx-search input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.wx-search-ico{position:absolute;left:12px;top:50%;width:14px;height:14px;margin-top:-7px;color:var(--hint,#5e6a77);pointer-events:none}
.wx-search-ico path,.wx-search-ico circle,.wx-search-btn svg path,.wx-search-btn svg circle{fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* In the sidebar: one line under the wordmark, at the sidebar links' own size. */
.side .wx-search{margin:0 0 14px}
.side .wx-search input[type=search]{height:36px;padding:0 34px;font-size:var(--fs-ui,13.5px)}
/* The key that puts the cursor in the field. It leaves once the field is in use. */
.wx-search-key{position:absolute;right:11px;top:50%;transform:translateY(-50%);min-width:9px;padding:1px 5px;text-align:center;
  font-size:var(--fs-label,11px);line-height:1.4;color:var(--hint,#5e6a77);border:.5px solid var(--border,rgba(22,35,48,.16));
  border-radius:4px;pointer-events:none}
.wx-search:focus-within .wx-search-key,.wx-search input:not(:placeholder-shown)~.wx-search-key{display:none}
.side.wx-searching .snav{display:none}

/* The list. A row is a link: title, then where it sits. */
.wx-list{display:flex;flex-direction:column;gap:1px;margin:0 0 12px}
.wx-list:empty{display:none}
.wx-r{display:grid;gap:2px;padding:7px 10px;border-radius:var(--radius-sm,9px);text-decoration:none;color:var(--text,#162330)}
.wx-r:hover,.wx-r[aria-selected="true"]{background:var(--surface-2,#e3e8ee)}
.wx-r:focus-visible{outline:2px solid var(--text,#162330);outline-offset:2px;border-radius:4px}
.wx-r-t{font-size:var(--fs-ui,13.5px);font-weight:500;line-height:1.3;overflow-wrap:anywhere}
.wx-r-m{font-size:var(--fs-label,11px);line-height:1.45;color:var(--hint,#5e6a77)}
/* The section number, in the section's accent: the same mark the sidebar and the tab bar use. */
.wx-r-n{font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.04em;color:var(--ga,var(--hint,#5e6a77));margin-right:6px}
.wx-r-d{font-size:var(--fs-caption,12px);line-height:1.5;color:var(--muted,#495766)}
/* A definition is an answer, so it sits on a tile like a figure does. */
.wx-r-term{padding:10px 12px;margin:0 0 6px;background:var(--surface-2,#e3e8ee)}
.wx-r-term:hover,.wx-r-term[aria-selected="true"]{background:var(--surface-3,#d1dce8)}
.wx-r-term .wx-r-d{color:var(--text,#162330)}
.wx-r-k{font-size:var(--fs-label,11px);font-weight:600;color:var(--hint,#5e6a77)}
.wx-sep{height:0;margin:6px 10px;border-top:.5px solid var(--border,rgba(22,35,48,.16))}
.wx-r-all .wx-r-t{color:var(--muted,#495766)}
.wx-r-none{margin:0;padding:7px 10px;font-size:var(--fs-ui,13.5px);line-height:1.5;color:var(--muted,#495766)}
/* Under a field there is room for the title and its place, and the description waits on /search. */
.wx-list-compact .wx-r:not(.wx-r-term):not(.wx-r-ask) .wx-r-d{display:none}

/* The phone top bar: a button that swaps the wordmark for the field. */
.wx-search-btn{display:none}
.topbar .wx-search{display:none}
@media (max-width:900px){
  .side .wx-search,.side .wx-list{display:none}
  .side.wx-searching .snav{display:flex}
  .topbar .wx-search-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:auto;padding:0;
    border:none;background:none;color:var(--text,#162330);cursor:pointer;border-radius:var(--radius-sm,9px)}
  .topbar .signedchip~.wx-search-btn{margin-left:0}
  .topbar .wx-search-btn svg{width:19px;height:19px}
  .topbar .wx-search-btn:active{background:var(--surface-2,#e3e8ee)}
  .topbar .wx-search-btn:focus-visible{outline:2px solid var(--text,#162330);outline-offset:2px}
  .topbar .wx-search-btn.wx-search-close{display:none}
  /* !important: the back button and the burger are shown by rules in nav.js that outrank
     a plain child selector, and the open field has to have the bar to itself. */
  body.wx-search-open .topbar>*:not(.wx-search):not(.wx-list):not(.wx-search-close){display:none!important}
  body.wx-search-open .topbar .wx-search{display:flex;flex:1 1 auto;min-width:0}
  body.wx-search-open .topbar .wx-search-btn.wx-search-close{display:flex;margin-left:0}
  /* 16px in the field, so iOS does not zoom the page on focus. */
  .topbar .wx-search input[type=search]{height:40px;padding:0 14px 0 36px;font-size:16px}
  /* A top bar that scrolls with the page still has to anchor the list under it. */
  body.wx-search-open .topbar.static{position:relative}
  .topbar .wx-list{position:absolute;top:100%;left:0;right:0;margin:0;padding:8px 12px 14px;box-sizing:border-box;
    max-height:calc(100vh - var(--wx-topbar-reserve,61px) - 72px - env(safe-area-inset-bottom));
    max-height:calc(100dvh - var(--wx-topbar-reserve,61px) - 72px - env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;background:var(--bg,#f0f4f7);border-bottom:.5px solid var(--border,rgba(22,35,48,.16))}
  body:not(.wx-search-open) .topbar .wx-list{display:none}
  .topbar .wx-r{padding:10px}
  .topbar .wx-r-t{font-size:var(--fs-emph,15px)}
  .topbar .wx-r-m,.topbar .wx-r-d{font-size:var(--fs-caption,12px)}
}

/* /search: the same rows at reading size, ruled like an index. The place a row sits in
   moves to the right-hand margin, where an index keeps its reference. */
.wx-search-page{max-width:640px;margin:0 0 14px}
.wx-search-page input[type=search]{min-height:44px;padding:10px 16px;font-size:16px}
.wx-search-page .btn{flex:none;min-height:44px;border:0;cursor:pointer;font:inherit;font-size:var(--fs-ui,13.5px);font-weight:500}
.page-body p.wx-search-status{margin:0 0 10px;font-size:var(--fs-ui,13.5px);color:var(--muted,#495766)}
/* Holds the page open before the index arrives, so the footer does not jump (#370). */
.wx-results{max-width:860px;min-height:50vh}
.wx-results .wx-list{gap:0;margin:0}
.wx-results .wx-r{grid-template-columns:minmax(0,1fr) auto;column-gap:28px;align-items:baseline;padding:14px 12px;
  border-radius:0;border-top:.5px solid var(--border,rgba(22,35,48,.16))}
.wx-results .wx-r-t{grid-column:1;font-size:var(--fs-emph,15px);font-weight:600}
.wx-results .wx-r-m{grid-column:2;grid-row:1;font-size:var(--fs-caption,12px);white-space:nowrap}
.wx-results .wx-r-d{grid-column:1;font-size:var(--fs-ui,13.5px);line-height:1.55;max-width:68ch}
.wx-results .wx-r-term{grid-template-columns:minmax(0,1fr);margin:0 0 18px;padding:16px 18px;border-top:0;border-radius:var(--radius-sm,9px)}
.wx-results .wx-r-term .wx-r-t{font-size:16px}
.wx-results .wx-r-term .wx-r-d{font-size:var(--fs-emph,15px);line-height:1.6}
.wx-results .wx-r-term .wx-r-m{grid-column:1;grid-row:auto;margin-top:4px}
.wx-results .wx-sep{display:none}
.wx-results .wx-r-ask{grid-template-columns:minmax(0,1fr)}
.wx-results .wx-r-none{padding:14px 12px;border-top:.5px solid var(--border,rgba(22,35,48,.16))}
@media (max-width:640px){
  .wx-results .wx-r{grid-template-columns:minmax(0,1fr);padding:13px 4px}
  .wx-results .wx-r-m{grid-column:1;grid-row:auto;white-space:normal}
  .wx-results .wx-r-term{padding:14px}
}