/* Answers — AiOS answer and card presentation spec (approved 23 Sep 2026; applied 24 Sep 2026).
   Tenant-agnostic: every colour derives from --accent / --ink / --line, every size from the --t-* ladder. Fonts and brand colours stay
   with the tenant configuration. Selectors are the production DOM (kit-renderer.js, v2-renderer.js, app.js), verified against develop
   f63c3afd; where the spec's reference CSS named a different class, the declarations were kept and the selector adapted:
     .p-document → .docrow (row), .p-button → .open (pill), .aios-answer-marker .persona → not restyled (owner kept production marker).
   Owner decisions 24 Sep 2026: card grid = spec auto-fill 280px; detail width = 2 × card + 50px; desktop answers keep the --ui-z scale
   above 1440 (D2), so a 4K answer is the 1440 answer, larger, with the same column count. */
.screen{--aios-tabband:var(--tabband,#EDF2F7);--aios-r-card:var(--radius-card,var(--r-card,12px));--aios-r-detail:14px;--aios-r-cta:10px;--aios-gap-set:16px;--aios-card-min:280px}
#chatScroll .messages{container:answers/inline-size}
.screen.live #chatScroll .messages{zoom:var(--ui-z,1)}

/* 1 · Answer prose -------------------------------------------------------------------------------------------------------------- */
/* Formatting holds everywhere the markdown subset renders: answer prose, detail panes, the reader, card summaries. */
.aios-answer-text strong,.screen .pane .prose strong,.screen .p-reader-body strong,.screen .card .summary strong{color:var(--accent);font-weight:700}
.aios-answer-text em,.screen .pane .prose em,.screen .p-reader-body em{font-style:italic}
.screen .pane .prose ul:not(.checklist),.screen .p-reader-body ul:not(.checklist){margin:6px 0 12px;padding-left:20px;list-style:disc}
.screen .pane .prose li,.screen .p-reader-body li{margin:0 0 5px}
/* Prose typography from the approved Golden Answers reference (token-driven; fonts and colours stay with the tenant). */
.aios-answer-text{max-width:75ch;font-size:var(--t-base);line-height:1.65}
.aios-answer-text p{margin:1em 0}.aios-answer-text > :first-child{margin-top:0}.aios-answer-text > :last-child{margin-bottom:0}
.aios-answer-text h3{margin:18px 0 6px;font-size:var(--t-lg);font-weight:800;line-height:1.25;color:var(--ink);letter-spacing:0;text-transform:none}
.aios-answer-text ul,.aios-answer-text ol{margin:6px 0 12px;padding-left:22px}.aios-answer-text li{margin:4px 0}
.screen .pane > * + *{margin-top:16px}
.screen .pane .prose{max-width:70ch;font-size:var(--t-sm);line-height:1.6}
.screen .pane .prose p{margin:0 0 12px}.screen .pane .prose > :first-child{margin-top:0}
.screen .pane .prose h3,.screen .pane .prose h4,.screen .pane .prose h5{font-weight:800;line-height:1.25}
.screen .pane .prose h5{font-size:var(--t-xs);margin:14px 0 6px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub)}
.screen .pane .prose ul:not(.checklist),.screen .pane .prose ol{margin:6px 0 12px;padding-left:22px}.screen .pane .prose li{margin:4px 0}
.aios-answer-text h5,.aios-answer-text h4{margin:14px 0 4px;font-size:var(--t-md);font-weight:800;line-height:1.25;color:var(--ink);letter-spacing:0;text-transform:none}
.aios-answer-text h4 + ul,.aios-answer-text h5 + ul{margin-top:4px}
.aios-answer-text ul{margin:6px 0 10px;padding-left:20px}
.aios-answer-text li{margin:0 0 4px}
.aios-answer-text a,.pane .prose a{color:var(--accent);text-decoration:none}.aios-answer-text a:hover,.pane .prose a:hover{text-decoration:underline}
/* Checklist: "- [x] item". Bare accent check, CSS columns, never one long bullet run. Prose and panes. */
.screen ul.checklist{list-style:none;padding:0;margin:10px 0 14px;columns:3 200px;column-gap:28px}
.screen ul.checklist li{display:flex;align-items:flex-start;gap:9px;margin:0 0 9px;break-inside:avoid;line-height:1.45}
.screen ul.checklist .ck{flex:0 0 auto;display:flex;width:17px;height:17px;margin-top:2px;color:var(--accent)}
.screen ul.checklist .ck svg{width:17px;height:17px;stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pane .prose h3{font-size:var(--t-md);margin:18px 0 6px;text-transform:none;letter-spacing:0;color:var(--ink)}
.pane .prose h4{font-size:var(--t-base);margin:16px 0 6px;text-transform:none;letter-spacing:0;color:var(--ink)}

/* 2 · NEXT follow-ups --------------------------------------------------------------------------------------------------------- */
.aios-answer-next{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.screen[data-device="mobile"] .aios-answer-next{gap:6px}
.aios-answer-next .next-label{margin-right:2px;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#6B7280);line-height:1.5}
.screen .aios-next-btn{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:7px 14px;border:2px solid color-mix(in srgb,var(--accent) 60%,#fff);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:var(--t-sm);font-weight:600;line-height:1.2;cursor:pointer}
.screen .aios-next-btn:hover{background:color-mix(in srgb,var(--accent) 8%,#fff)}
.screen[data-device="mobile"] .aios-next-btn{min-height:40px;text-align:left}
.aios-next-btn .spark,.aios-next-btn .spark svg{width:17px;height:17px;flex:0 0 auto;color:var(--accent)}
.aios-next-btn .spark svg{filter:drop-shadow(0 1px 1.5px color-mix(in srgb,var(--accent) 40%,transparent))}

/* 3 · Every card-like surface: glossy lining + soft lift, identical inside detail panes (no tinted well) -------------------------
   One shadow for every card (owner, 29 Sep 2026): compare tables, forms (standalone or opened from a detail, in every state) and a
   form's sent confirmation take the same lining and resting shadow; the hover lift stays on what can be clicked (face cards, document
   rows, video), and inside a detail pane those answer hover exactly as they do at top level. The detail card keeps its own shadow. */
.screen .card,.screen .p-resource,.screen .docrow,.screen .pc .pane .set > .card,.screen .pc .pane .p-resource,.screen .tbl,.screen .frm,.screen .conf{
  border:1px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 55%,#fff) 0%,color-mix(in srgb,var(--accent) 14%,#fff) 42%,color-mix(in srgb,var(--accent) 38%,#fff) 100%) border-box;
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 10px 24px -14px color-mix(in srgb,var(--accent) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .18s ease,box-shadow .18s ease}
.screen .card:hover,.screen .docrow:hover,.screen .p-video:hover,.screen .pc .pane .set > .card:hover,.screen .pc .pane .p-video:hover{transform:translateY(-2px);
  background:linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 30%,#fff) 45%,color-mix(in srgb,var(--accent) 70%,#fff) 100%) border-box;
  box-shadow:0 2px 4px rgba(16,24,40,.06),0 16px 32px -14px color-mix(in srgb,var(--accent) 55%,transparent)}
@media (prefers-reduced-motion:reduce){.screen .card,.screen .docrow,.screen .p-video{transition:none}.screen .card:hover,.screen .docrow:hover,.screen .p-video:hover,.screen .pc .pane .set > .card:hover,.screen .pc .pane .p-video:hover{transform:none}}
body.a11y-reduce-motion .screen .card:hover,body.a11y-reduce-motion .screen .docrow:hover,body.a11y-reduce-motion .screen .p-video:hover,body.a11y-reduce-motion .screen .pc .pane .set > .card:hover,body.a11y-reduce-motion .screen .pc .pane .p-video:hover{transform:none}
.screen .pane .set,.screen .pane .rset{background:none;padding:0}

/* 4 · Card grid: face cards, galleries and videos share one width; desktop gains columns, never bigger cards --------------------- */
.screen .set,.screen .pane .set,.screen .rset{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--aios-card-min)),1fr));gap:var(--aios-gap-set)}
.screen .set{grid-auto-rows:1fr;align-items:stretch}
.screen .set > .card{height:100%}
.screen .rset{align-items:start}
.screen .rset + .rset,.screen .set + .rset,.screen .rset + .set{margin-top:var(--aios-gap-set)}
.screen .rcell{display:flex;flex-direction:column;gap:8px;min-width:0}
.screen .rcell > .p-gallery,.screen .rcell > .p-video{margin:0;min-width:0}
.screen .rset-title{margin:0;font-size:var(--t-base);font-weight:700;line-height:1.3;color:var(--ink);text-transform:none;letter-spacing:0}
.screen .rset:not(.multi) .rset-title{display:none}

/* 5 · Face card ------------------------------------------------------------------------------------------------------------------ */
.screen .card{position:relative;display:flex;flex-direction:column;border-radius:var(--aios-r-card);overflow:hidden;cursor:pointer}
.screen .card .media{position:relative;aspect-ratio:4/3;max-height:280px;flex:0 0 auto;overflow:hidden;background:var(--lockup,#EDF2F7);border-bottom:1px solid color-mix(in srgb,var(--accent) 12%,#fff)}
.screen[data-device="mobile"] .card .media{max-height:240px}
/* Photography fills its frame; product imagery and floorplans retain their complete silhouette. */
.screen .card .media img:not(.phlogo),.screen .pc-hero img:not(.phlogo){display:block;width:100%;height:100%;object-fit:cover;padding:0}
.screen .card .media img:not(.phlogo),.screen .pc-hero img:not(.phlogo){position:absolute;inset:0}
.screen .card .media.contain img:not(.phlogo),.screen .pc-hero.contain img:not(.phlogo){object-fit:contain;padding:8px;background:#fff}
.screen .card .cbody{display:flex;flex-direction:column;flex:1 1 auto;padding:12px 5% 16px}
/* CTA: spans the body's text column exactly, 48 high, radius 10, last, pinned to the bottom, 14 above, 16 to the bottom border.
   --cta-bg and --cta-ink are the branding API's ctaButtonBgColor and ctaButtonTextColor, set only when sent (owner, 29 Sep 2026). */
.screen .card .cta-bar{margin-top:auto;padding:14px 0 0}
.screen .cta-bar-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:0 18px;border:0;border-radius:var(--aios-r-cta);background:var(--cta-bg,var(--accent));color:var(--cta-ink,#fff);font:inherit;font-size:var(--t-sm);font-weight:800;line-height:1.2;cursor:pointer;white-space:nowrap}
.screen .cta-or{margin:8px 0;text-align:center;font-size:var(--t-2xs);font-weight:700;letter-spacing:.12em;color:var(--sub)}
.screen .card .cta-or + .cta-bar{margin-top:0;padding-top:0}

/* 6 · Detail --------------------------------------------------------------------------------------------------------------------- */
.screen .pc,.screen.live .pc,.screen.live[data-device="desktop"] .pc{width:min(100%,calc(2 * var(--card-w,280px) + 50px));max-width:100%;border-radius:var(--aios-r-detail)}
.screen .pc-hero{aspect-ratio:16/9}
.screen[data-device="mobile"] .pc-hero{aspect-ratio:16/10}
/* No rule between the tab content and the detail's CTA (reference): the CTA follows the pane directly. */
.screen .pc > .cta-bar{padding:4px 20px 16px;border:0;box-shadow:none;background:transparent;position:static}
.screen .pc > .pane{border-bottom:0}
.screen .pc > .cta-bar:has(+ .cta-or),.screen .pc > .cta-bar:has(+ .cta-bar){padding-bottom:0}
.screen .pc > .cta-or{margin:8px 20px}
.screen .pc > .cta-or + .cta-bar{padding-top:0}
.screen[data-device="mobile"] .pc > .cta-bar{padding:4px 16px 16px}
.screen[data-device="mobile"] .pc > .cta-or{margin:8px 16px}
/* Tab band: tint, numbered pills, scrolls sideways, never wraps; chevrons at whichever end has more. The branding API's detail tab
   colours (owner, 29 Sep 2026) arrive as --detail-tabband, --tab-label, --tab-on-bg, --tab-on-label and --tab-on-number, set by app.js
   only when sent; unset, every value below is what it was. */
.screen .tabrow{position:relative;display:flex;align-items:stretch;background:var(--detail-tabband,var(--aios-tabband))}
.screen .tabrow .tabscroll{display:flex;flex:1 1 auto;min-width:0;gap:5px;padding:8px 11px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.screen .tabrow .tabscroll::-webkit-scrollbar{display:none}
/* Tabs as in the reference: inactive tabs are bare text on the band (no white pill, no border); the active tab is the brand pill. */
.screen .tabrow .tb{flex:0 0 auto;white-space:nowrap;display:flex;align-items:baseline;justify-content:center;gap:7px;padding:9px 14px;border:0;border-radius:999px;background:none;box-shadow:none;color:var(--tab-label,var(--sub));font-size:var(--t-xs);font-weight:700}
.screen .tabrow .tb .n{font-size:10.5px;font-weight:800;letter-spacing:.04em;color:var(--tab-label,var(--ink))}
.screen .tabrow{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.screen .pc-facts + .tabrow{border-top:0}
/* The pagination bar (sort, per page, pages) takes the tab band fill (owner ruling 24 Sep 2026). */
.screen .set-bar{background:var(--aios-tabband)}
/* Active tab takes the brand primary colour (spec §5.2); master.css's later white-pill rule is superseded. */
.screen .tabrow .tb.on{background:var(--tab-on-bg,var(--accent));color:var(--tab-on-label,#fff);border-color:var(--tab-on-bg,var(--accent));box-shadow:none}
.screen .tabrow .tb.on .n{color:var(--tab-on-number,rgba(255,255,255,.75))}
.screen .tabnav{display:none;flex:0 0 auto;width:34px;padding:0;margin:0;border:0;align-items:center;justify-content:center;color:var(--tab-label,var(--ink));cursor:pointer;z-index:2}
.screen .tabnav.prev{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(to right,var(--detail-tabband,var(--aios-tabband)) 55%,transparent)}
.screen .tabnav.next{position:absolute;right:0;top:0;bottom:0;background:linear-gradient(to left,var(--detail-tabband,var(--aios-tabband)) 55%,transparent)}
.screen .tabrow[data-overflow-start="true"] .tabnav.prev,.screen .tabrow[data-overflow-end="true"] .tabnav.next{display:flex}
.screen .tabnav svg{width:16px;height:16px}

/* 7 · Gallery card: no title bar, 4:3 cover stage, caption inside the image, side arrows, count pill top-right ----------------- */
.screen .p-gallery{padding:0;border-radius:var(--aios-r-card);overflow:hidden}
.screen .p-gallery > h3{display:none}
.screen .p-gallery-stage{position:relative}
.screen .p-gallery-open{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.screen .p-gallery-open .p-image{width:100%;aspect-ratio:4/3;max-height:none;margin:0;overflow:hidden;background:var(--lockup,#EDF2F7)}
.screen .p-gallery-open .p-image img{display:block;width:100%;height:100%;object-fit:cover}
.screen .p-gallery .p-caption{position:absolute;left:0;right:0;bottom:0;z-index:1;margin:0;padding:28px 14px 11px;background:linear-gradient(to top,rgba(10,16,24,.72),rgba(10,16,24,0));color:#fff;font-size:var(--t-sm);font-weight:600;line-height:1.35;pointer-events:none;min-height:0}
.screen .p-gallery .p-caption[hidden]{display:none}
.screen .p-gallery-controls{position:absolute;inset:0;display:block;pointer-events:none}
.screen .p-gallery-controls .p-button{position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;width:34px;height:34px;min-height:0;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);font-size:18px;box-shadow:0 2px 8px rgba(0,0,0,.18);z-index:2}
.screen .p-gallery-controls .p-button:first-child{left:10px}
.screen .p-gallery-controls .p-button:last-child{right:10px}
.screen .p-gallery-controls .p-button[hidden]{display:none}
.screen .p-gallery-controls .p-count{position:absolute;right:10px;top:10px;left:auto;bottom:auto;padding:4px 10px;border-radius:999px;background:rgba(10,16,24,.62);color:#fff;font-size:10.5px;font-weight:700;z-index:2}
.screen .p-gallery-controls .p-count[hidden]{display:none}
.screen .p-gallery-strip{display:flex;gap:8px;padding:10px 12px 12px;overflow-x:auto}
.screen .p-gallery-thumb{flex:0 0 auto;width:64px;height:46px;padding:0;border:0;border-radius:8px;overflow:hidden;background:var(--lockup,#EDF2F7);cursor:pointer}
.screen .p-gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.screen .p-gallery-thumb.on{outline:2px solid var(--accent);outline-offset:-2px}

/* 8 · Documents: rows, two across from 420px; the pill spans the row on phones ------------------------------------------------- */
.screen .docrows{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:12px}
.screen .docrow{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:16px;align-items:center;min-height:0;padding:14px 16px;border-radius:var(--aios-r-detail);cursor:pointer}
.screen .docrow .mk{width:96px;height:72px}
.screen .docrow .open{justify-self:end;min-height:38px;padding:7px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 30%,#fff);background:color-mix(in srgb,var(--accent) 8%,#fff);color:var(--accent);font-size:var(--t-xs);font-weight:800;white-space:nowrap}
.screen .docrow:hover .open{background:var(--accent);color:#fff}
.screen[data-device="mobile"] .docrow{grid-template-columns:72px minmax(0,1fr);gap:12px;padding:12px}
.screen[data-device="mobile"] .docrow .mk{width:72px;height:54px}
.screen[data-device="mobile"] .docrow .open{grid-column:1 / -1;justify-self:stretch;display:flex;justify-content:center}

/* Full source titles remain readable at every width; do not merely replace an ellipsis with a crop. */
.screen .cname{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
.screen .cname,.screen .pc-name,.screen .pc-addr,.screen .docmeta b,.screen .docmeta small,.screen .rset-title{white-space:normal;overflow-wrap:anywhere}
.screen .docmeta b,.screen .docmeta small{overflow:visible}
.screen .tabrow .tab-separator{opacity:.65;font-weight:400}
.screen .cta-bar-label{min-width:0;white-space:normal;overflow-wrap:anywhere}
.screen .cta-bar-btn{padding-top:10px;padding-bottom:10px}
/* The persona name above every answer is set in the tenant's display font (same face as card titles); colour and size unchanged. */
.aios-answer-marker .aios-marker-label{font-family:var(--brand-font-display,var(--brand-font-body,Inter)),sans-serif}
/* NEXT prompts are white surfaces on every canvas. */
.screen .aios-next-btn{background-color:#fff}
/* Safari and Firefox: a flex item with aspect-ratio + max-height derives its WIDTH from the clamped height (240 × 4/3, 280 × 4/3),
   leaving a gap beside the photo on phones, tablets and 1024 laptops. A definite width keeps the frame full-bleed; max-height then
   only trims height and the image covers. */
.screen .card .media,.screen .pc-hero{width:100%;min-width:100%;align-self:stretch}
/* Viewer by kind (24 Sep 2026): header actions, contained images, and a page card instead of framing sites that refuse to be framed. */
.screen .viewer-head h2{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.screen .viewer-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.screen .viewer-newtab{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border:1px solid color-mix(in srgb,var(--accent) 35%,#fff);border-radius:999px;background:#fff;color:var(--accent);font-size:var(--t-sm);font-weight:700;text-decoration:none;white-space:nowrap}
.screen .viewer-newtab:hover{background:var(--accent);color:#fff;text-decoration:none}
.screen .p-reader-body > .viewer-newtab{margin-top:16px}
.screen .reader.viewer--image .viewer-body{align-items:center;justify-content:center;background:#F4F5F7}
.screen .viewer-img{display:block;max-width:100%;max-height:100%;margin:auto;object-fit:contain}
.screen .reader.viewer--page .p-reader,.screen .reader.viewer--text .p-reader{height:auto}
.screen .viewer-pagecard{display:flex;flex-direction:column;gap:14px;width:100%}
.screen .viewer-page-image{display:block;width:100%;max-height:min(360px,45vh);object-fit:cover;border-radius:var(--aios-r-card,12px)}
.screen .viewer-page-summary{margin:0;font-size:var(--t-base);line-height:1.6;color:var(--ink)}
.screen .viewer-page-note{margin:0;font-size:var(--t-sm);color:var(--sub)}
.screen .viewer-pagecard > .viewer-newtab{align-self:flex-start}
@container (orientation:portrait) and (max-width:519px){.screen .viewer-actions .viewer-newtab{padding:6px 12px;font-size:var(--t-xs)}}
/* PDF pages drawn in the interface: a scrolling column of white pages on the neutral ground, each page full width of the viewer. */
.screen .reader.viewer--pdf .p-reader{max-width:min(980px,100%)}
.screen .viewer-pages{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px;background:#E9ECF0}
.screen .viewer-pdfpage{width:100%;max-width:900px;background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.12);border-radius:4px;overflow:hidden;flex:0 0 auto}
.screen .viewer-pdfpage canvas{display:block;width:100%;height:auto}
.screen .viewer-status{margin:auto;font-size:var(--t-sm);color:var(--sub)}
@container (orientation:portrait) and (max-width:519px){.screen .viewer-pages{padding:8px;gap:8px}}
/* Always-open contact cards: no hover lift or pointer (the card itself is not a button; its routes are the links). */
.screen .card.contact-open{cursor:default}
.screen .card.contact-open:hover{transform:none}
.screen .card.contact-open .cbody:has(> .p-contact){padding:0}
.screen .card.contact-open .p-contact{border:0;box-shadow:none;background:none;padding:18px 20px}
.screen .card.contact-open .p-contact dd a{overflow-wrap:anywhere}
.screen .card.contact-open .cta-bar{padding:0 20px 18px}
/* Contact cards span two face-card columns wherever the answer column fits two (owner ruling 24 Sep 2026); phones keep one full-width column. */
@container answers (min-width:576px){.screen .set > .card.contact-open{grid-column:span 2}}
.screen .card.contact-open .p-contact dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));column-gap:28px}
/* Inline video: the governed player (AiOSWidgets.videoPlayer) fills the poster frame at 16:9. */
.screen .p-video-poster:has(> iframe,> video){aspect-ratio:16/9;background:#000}
.screen .p-video-poster > :is(iframe,video){display:block;width:100%;height:100%;border:0;background:#000}
/* Record names in the answer open the record (button styled as the bold name, with an underline on hover/focus). */
.aios-answer-text .record-link{display:inline;padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:inherit}
.aios-answer-text .record-link strong{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent);text-underline-offset:3px;text-decoration-thickness:1.5px}
.aios-answer-text .record-link:hover strong,.aios-answer-text .record-link:focus-visible strong{text-decoration-color:var(--accent)}
.aios-answer-text .record-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
/* Comparison: column headers open their record; long lists in cells are single-column checklists. */
.screen .thead.topen{cursor:pointer;border-radius:10px;transition:background-color .15s ease}
.screen .thead.topen:hover{background:color-mix(in srgb,var(--accent) 5%,#fff)}
.screen .thead.topen:hover .tname{text-decoration:underline;text-underline-offset:3px}
.screen .thead-open{display:flex;flex-direction:column;align-items:stretch;gap:7px;width:100%;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:inherit;cursor:pointer}
.screen .thead-open:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.screen .tcell .tchecks ul.checklist{columns:1;margin:0}
.screen .tcell .tchecks{font-size:inherit}
/* Class sections (owner, 30 Sep 2026; Option A locked). One heading per class, in the answer's own Header 1 (as .aios-answer-text h3
   draws a # heading): body font, --t-lg, 800, line height 1.25, --ink; in a detail tab, the tab's section heading (.pane .prose h3, --t-md).
   A block, not a flex row, so a wrapped label keeps its count beside it. Every section after the first sits under a 1px --line rule: 20px
   above the rule (the 16px widget gap plus 4px, or 20px in a pane), 28px from the rule to the heading, 6px below the heading. Tokens only. */
.screen .set-group-head{display:block;margin:0 0 6px;font-family:inherit;font-size:var(--t-lg);font-weight:800;line-height:1.25;color:var(--ink);letter-spacing:0;text-transform:none}
.screen .set-group-head.in-tab{font-size:var(--t-md)}
.screen .set-group-count{display:inline-block;margin-left:8px;font-family:inherit;font-size:var(--t-sm);font-weight:600;line-height:inherit;color:var(--sub);white-space:nowrap;letter-spacing:0;text-transform:none}
.screen .set-section-next{border-top:1px solid var(--line);padding-top:28px}
.screen .turn-widgets .set-section-next{margin-top:4px}
.screen .pane > .set-section-next{margin-top:20px}
.screen .set-sections{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
/* A detail opens on its own (owner, 30 Sep 2026): while a detail is open in an answer, its other widgets are hidden, never rebuilt, and come
   back as they were on Back. The answer text, NEXT and the accuracy line sit outside .turn-widgets and stay. */
.turn-widgets.has-open-detail > :not(.kit-frame-open){display:none}