/* ui-additions.css — three owner-approved additions (WEB-01, 2026-09-28).
   Load after /src/style.css and visual-owner.css. Nothing here restyles hero, film or native captures.
   Markup contracts and evidence limits: opus-ui-review.md. */

/* 1. Feature overview: a real <table> inside one .answers <details>.
   Three columns: decorative icon, 2–5 word title (<th scope="row">), explanation. Max 14 body rows (content rule).
   Native table layout by default; a narrow answers column restacks each row (container query below). */
.answers details:has(.feature-table){container-type:inline-size}
.feature-table{width:100%;margin:0 0 25px;border-collapse:collapse;font-size:14px;line-height:1.6;text-align:left}
.feature-table caption{padding:0 0 14px;text-align:left;font-size:14px;line-height:1.6;color:#c1b9ce}
.feature-table thead th{padding:0 0 10px;font-size:11px;font-weight:400;letter-spacing:.12em;color:#beaddb;vertical-align:bottom}
.feature-table tbody tr{border-top:1px solid var(--line)}
.feature-table tbody th,.feature-table tbody td{padding:20px 0 16px;vertical-align:top}
.feature-table .feature-icon{width:48px;padding:14px 14px 14px 0;color:var(--rust)}
/* Icon chip: 34px circle; the SVG itself stays decorative (aria-hidden in markup). */
.feature-table .feature-icon svg{box-sizing:content-box;display:block;width:20px;height:20px;padding:7px;border-radius:50%;background:#30293f;stroke-width:1.6}
.feature-table tbody th{width:32%;padding-right:18px;font-size:15px;font-weight:500;line-height:1.4;color:inherit;hyphens:auto;overflow-wrap:break-word}
.feature-table tbody td:last-child{color:#c1b9ce;overflow-wrap:break-word}
/* style.css pads every .answers details p by 25px. */
.answers .feature-table p{margin:0;padding:0;font-size:inherit;line-height:inherit;color:inherit}

/* Below ~480px the explanation column would drop under ~22 characters per line.
   Rows become a two-column grid; markup carries explicit table roles so WebKit keeps table semantics. */
@container (max-width:479px){
  .feature-table,.feature-table tbody{display:block}
  .feature-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .feature-table tbody tr{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:14px;row-gap:4px;padding:16px 0}
  .feature-table tbody th,.feature-table tbody td,.feature-table .feature-icon{display:block;width:auto;padding:0}
  .feature-table .feature-icon{grid-row:1/3}
  .feature-table tbody th{grid-column:2;padding-top:6px}
  .feature-table tbody td:last-child{grid-column:2}
}

/* 2. Signature toggle under the web listing example.
   <button aria-pressed> with a heart SVG; the visible line is its <label for>, so no extra accessible name is needed.
   Off: grey outline heart. On: filled red heart and full-strength line. Fill, not colour alone, carries the state. */
.signature-option{--signature-off:#a39bb5;--signature-on:#ff4d5e;display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--signature-off)}
/* style.css turns every .text-example label into a spaced flex row. */
.text-example .signature-option label{display:inline;margin:0;font-size:inherit;cursor:pointer}
.signature-toggle{flex:none;display:inline-grid;place-items:center;min-width:44px;min-height:44px;margin-left:-11px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--signature-off)}
.signature-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;transition:fill .15s,transform .15s}
.signature-toggle[aria-pressed="true"]{color:var(--signature-on)}
.signature-toggle[aria-pressed="true"] svg{fill:currentColor}
.signature-option:has(.signature-toggle[aria-pressed="true"]){color:#f1edf9}
/* Global button focus (#9a3d22) reaches ~2.5:1 on #1c192d; this outline is ~9.7:1. */
.signature-toggle:focus-visible{outline:3px solid #c8bbfa;outline-offset:2px}
@media(hover:hover) and (pointer:fine){.signature-toggle:hover{background:#ffffff12}}
@media(prefers-reduced-motion:no-preference){.signature-toggle:active svg{transform:scale(.88)}}
@media(forced-colors:active){.signature-toggle,.signature-toggle[aria-pressed="true"]{color:ButtonText}}

/* 3a. Font comparison page (site-shell.css): <section class="font-options"> with three <article>.
   Each article sets --heading-font/--body-font from an existing local font; site-shell's h1–h3 rule picks them up.
   Labels and links keep DM so only the samples change. */
.font-options{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin:40px 0 0}
.font-options>article{display:flex;flex-direction:column;gap:16px;min-width:0;padding:26px 24px 24px;border:1px solid #e3dafa26;border-radius:24px;background:#242036;font-family:var(--body-font,DM),system-ui,sans-serif}
.font-options .font-name{margin:0;font-family:DM,system-ui,sans-serif;font-size:11px;letter-spacing:.14em;color:#beaddb}
.font-options>article :is(h2,h3){margin:0;font-size:clamp(30px,3.4vw,40px);font-weight:500;line-height:1.08;letter-spacing:-.04em;hyphens:auto;overflow-wrap:break-word}
.font-options>article p:not(.font-name){margin:0;font-size:16px;line-height:1.6;color:#c1b9ce}
.font-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:8px;font-family:DM,system-ui,sans-serif}
.font-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid #f1edf94a;border-radius:28px;color:#f1edf9;font-size:14px;line-height:1.2;text-decoration:none}
@media(hover:hover) and (pointer:fine){.font-links a:hover{background:#ffffff0f}}
@media(min-width:860px){.font-options{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 3b. Shared font hook. Variant A is the HTML default, including without JavaScript.
   The preview script can select B or C through the URL whitelist. */
html[data-font-preview]{font-family:var(--body-font,DM),'Helvetica Neue',Arial,sans-serif}
html[data-font-preview] :is(h1,h2,h3){font-family:var(--heading-font,var(--body-font,DM)),'Helvetica Neue',Arial,sans-serif}