.ct-ae { margin: 14px 18px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-sunken); min-width: 0; }
.ct-ae-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ct-ae-heading strong { font-size: 15px; color: var(--accent); }
.ct-ae-rx { margin-inline-start: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.ct-ae p { margin: 9px 0; }
.ct-ae-correction { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; }
.ct-ae-correction button { min-height: 44px; white-space: normal; flex: 1; }
.ct-ae-instructions { padding-inline-start: 20px; margin: 12px 0; color: var(--text-soft); }
.ct-ae-instructions li + li { margin-top: 5px; }
.ct-ae-comparison { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.ct-ae-comparison caption { text-align: start; font-weight: 600; padding: 8px 0; }
.ct-ae-comparison th, .ct-ae-comparison td { text-align: start; padding: 9px 6px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; vertical-align: top; }
.ct-ae-comparison thead th { color: var(--text-soft); font-weight: 500; }
.ct-ae-reference { margin-top: 14px; }
.ct-ae-evidence summary { cursor: pointer; font-weight: 600; min-height: 32px; color: var(--accent); }
.ct-ae-reference summary { cursor: pointer; color: var(--accent); min-height: 32px; }
.ct-ae-reference ul { padding-inline-start: 18px; }
.ct-ae-reference a { color: var(--accent); overflow-wrap: anywhere; }
.ct-ae-reference li + li { margin-top: 7px; }
.ct-spectacles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: hidden; }
.ct-spectacles[hidden] { display: none; }
/* Teal acetate frame. Fixed colours (not theme tokens): it sits on the face photo, which never changes with the theme. */
.ct-spectacles { --ctsp-hi: #4a8287; --ctsp-mid: #2c5a5f; --ctsp-lo: #183639; }
.ct-spectacles path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ctsp-rim-hi { stop-color: var(--ctsp-hi); }
.ctsp-rim-mid { stop-color: var(--ctsp-mid); }
.ctsp-rim-lo { stop-color: var(--ctsp-lo); }
.ct-spectacles .ctsp-rim { stroke: url(#ctsp-rim); }
.ct-spectacles .ctsp-sheen { stroke: url(#ctsp-sheen); }
.ct-spectacles .ctsp-shadow path { stroke: rgba(40, 24, 16, .22); }
.ct-spectacles .ctsp-hinge { stroke: var(--ctsp-mid); stroke-linecap: butt; }
.ct-spectacles .ctsp-arm { stroke-linecap: butt; }
.ctsp-rivet { fill: #e4ecec; stroke: rgba(24, 54, 57, .55); stroke-width: .6; }
.ct-spectacles .ctsp-glass { fill: url(#ctsp-glass); stroke: none; }
.ct-spectacles .ctsp-glare { fill: url(#ctsp-glare); stroke: none; }
.ct-spectacles .ctsp-glare-thin { opacity: .6; }
/* FT-28 near segment: a slightly denser zone with a crisp ledge that catches light. */
.ct-spectacles .ctsp-seg-body { fill: rgba(205, 232, 236, .16); stroke: rgba(24, 54, 57, .5); stroke-width: 1.1; }
.ct-spectacles .ctsp-seg-ledge { stroke: rgba(24, 54, 57, .78); stroke-width: 1.6; stroke-linecap: butt; }
.ct-spectacles .ctsp-seg-glint { stroke: rgba(255, 255, 255, .8); stroke-width: 1; }
.ctsp-seg { animation: ctsp-seg-in .28s ease-out both; }
@keyframes ctsp-seg-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ctsp-seg { animation: none; } }
@container ctc (max-width: 420px) { .ct-ae { margin: 10px; padding: 12px; } .ct-ae-rx { margin-inline-start: 0; } }