/* The AI Math reading pattern: a title list and one explanation per page.
   The shared theme owns type, color, controls and code. */
.security-shell { width: var(--site-frame-width, min(74rem, calc(100% - 5rem))); margin: 0 auto; padding: clamp(1.25rem, 3vw, 2rem) 0 3.5rem; }

/* Fixed graphical sizes preserve room for the title at enlarged text sizes. */
.security-header { --utility-size: 44px; --utility-icon-size: 25.6px; --utility-gap: 6px; --site-utility-clearance: 110px; }
.security-header .site-mark { width: 32px; height: 32px; }
.security-header .site-brand { gap: 11.2px; }

.case-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 0 2.5rem; margin: 0; padding: 0; list-style: none; }
.case-list li { border-bottom: 1px solid var(--line); }
.case-title { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .85rem 0; color: var(--ink); font: 700 1.2rem/1.3 var(--display); letter-spacing: -.01em; text-decoration: none; }
.case-title .ui-link-arrow { color: var(--muted); }
.case-title:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.case-title:hover .ui-link-arrow { color: currentColor; }

.case-article { --side: 26rem; --side-gap: 3rem; max-width: none; font-size: 1.0625rem; line-height: 1.6; overflow-wrap: anywhere; }
.case-heading { margin-bottom: 1rem; }
.case-heading h1 { margin: 0 0 .4rem; font-size: clamp(1.75rem, 3.4vw, 2.3rem); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
.case-article p { margin: 0 0 .95rem; }
.case-heading .case-reference { margin: 0; color: var(--muted-strong); font: .75rem/1.5 var(--mono); }
.case-reference a { color: inherit; }

.code-example { margin: 1.25rem 0 1.4rem; font-size: 1rem; min-width: 0; }
.code-example figcaption { margin-top: .5rem; color: var(--muted-strong); font: var(--text-ui)/1.5 var(--ui, var(--serif)); }
.code-example figcaption:first-child { margin: 0 0 .5rem; }
.code-example pre code { overflow-wrap: normal; }

@media (min-width: 66rem) {
  .case-article { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); column-gap: var(--side-gap); }
  .case-article > * { grid-column: 1; min-width: 0; }
  .case-article > .case-heading { grid-column: 1 / -1; }
  .case-article > .code-example { grid-column: 2; grid-row: 2 / span 40; align-self: start; margin: .3rem 0 1rem; }
}
@media (min-width: 66rem) and (min-height: 40rem) {
  .case-article > .code-example { position: sticky; top: 1.25rem; }
}
@media (pointer: coarse) {
  .case-title { align-items: center; min-height: 2.75rem; }
}
@media print {
  .case-article { display: block; }
  .case-article > .code-example { position: static; margin: 1rem 0; break-inside: avoid; }
}