@charset "utf-8";

/* Layout: a navy gym-card hero with role doors, then a sticky case index beside one reading column. */
a { color: var(--accent); text-underline-offset: 3px }
.hero { background: var(--band); color: var(--band-ink) }
.hero .wrap { padding-block: 56px 48px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px; align-items: center }
.app-icon { display: block; width: 96px; height: 96px; margin: 14px 0 }
h1 { margin: 0; font: 600 clamp(44px, 7vw, 82px)/1.05 var(--display); text-wrap: balance }
.lead { margin: 20px 0 0; max-width: 60ch; color: var(--band-soft); font-size: 19px }
.scene { width: 100%; max-width: 400px; justify-self: end; height: auto }
.doors-band { background: var(--band); padding-bottom: 44px }
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 48px; align-items: start; padding-block: 36px 80px }
.index { position: sticky; top: calc(var(--header) + 16px); max-height: calc(100vh - var(--header) - 32px); overflow-y: auto; font-size: 14.5px; line-height: 1.35; padding-right: 6px }
.index label { display: block; font-weight: 600; margin-bottom: 6px }
#find { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit }
.index ul { list-style: none; margin: 0; padding: 0 }
.index > ul { margin-top: 14px }
.nav-chapter { margin-top: 12px }
.nav-chapter > a { font-weight: 600; color: var(--ink); text-decoration: none }
.nav-case a { display: block; padding: 4px 8px; margin-top: 2px; border-radius: 6px; color: var(--soft); text-decoration: none }
.nav-case a b { color: var(--accent); font-variant-numeric: tabular-nums; margin-right: 4px }
.nav-case a:hover, .nav-case a.current { background: var(--panel); color: var(--ink) }
.nav-chapter > a.current { color: var(--accent) }
.no-match { display: none; margin-top: 12px; color: var(--soft) }
main { min-width: 0; max-width: 880px }
.chapter { display: flex; align-items: baseline; gap: 16px; margin: 64px 0 20px; font: 600 clamp(32px, 4.4vw, 46px)/1.12 var(--display); scroll-margin-top: calc(var(--header) + 16px); text-wrap: balance }
main > .chapter:first-of-type { margin-top: 0 }
.ch-no { color: var(--accent) }
.case { margin: 44px 0 14px; padding-top: 22px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header) + 16px) }
.case-no { display: block; font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent) }
.case-title { display: block; margin-top: 4px; font: 500 28px/1.2 var(--display) }
.sub { margin: 30px 0 10px; font: 500 24px/1.25 var(--display) }
p { margin: 12px 0 }
main > ul, li > ul { padding-left: 22px }
main > ol:not(.flow), li > ol { list-style: none; counter-reset: s; padding: 0; margin: 16px 0 }
main > ol:not(.flow) > li { counter-increment: s; position: relative; padding-left: 46px; margin: 14px 0 }
main > ol:not(.flow) > li::before { content: counter(s); position: absolute; left: 0; top: -1px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums }
figure { margin: 18px 0 }
.shot button, .shot img { display: block; width: 100% }
.shot img { border: 1px solid var(--line); border-radius: 10px; background: #f6f7fb; cursor: zoom-in }
.shot figcaption { margin-top: 7px; color: var(--soft); font-size: 14px }
.art img { display: block; width: 100%; border-radius: 16px }
.phones { display: flex; flex-wrap: wrap; gap: 20px }
.phones .shot { margin: 18px 0; width: min(270px, 100%) }
.table-wrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel) }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.45 }
th { text-align: left; font-weight: 600; background: var(--note-bg) }
th, td { padding: 10px 14px; vertical-align: top; border-top: 1px solid var(--line) }
tr:first-child th { border-top: 0 }
.flow { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 10px; padding: 0; margin: 20px 0 24px }
.flow li { display: flex; align-items: center; gap: 10px }
.flow span { padding: 8px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 15px; line-height: 1.3 }
.flow li:not(:last-child)::after { content: "→"; color: var(--accent); font-weight: 600; font-size: 18px; line-height: 1 }
.callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: baseline; margin: 18px 0; padding: 14px 18px; border-radius: 10px }
.callout p { margin: 0 }
.callout-label { font: 500 18px/1.3 var(--display) }
.callout.warn { background: var(--warn-bg) } .callout.tip { background: var(--tip-bg) } .callout.note { background: var(--note-bg) }
dialog { width: min(1400px, 96vw); max-height: 94vh; padding: 12px; border: 0; border-radius: 12px; background: var(--panel); color: var(--ink) }
dialog::backdrop { background: rgba(10, 16, 28, .75) }
dialog img { display: block; width: 100%; height: auto }
#close { display: block; margin: 0 0 10px auto; padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer }
@media (max-width: 960px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 24px }
  .index { position: static; max-height: 300px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--panel) }
  .nav-case a:hover, .nav-case a.current { background: var(--note-bg) }
}
@media (max-width: 720px) {
  body { font-size: 16px }
  .hero .wrap { grid-template-columns: minmax(0, 1fr) }
  .scene { display: none }
  .doors { grid-template-columns: minmax(0, 1fr) }
  main > ol:not(.flow) > li { padding-left: 40px }
  .flow { flex-direction: column; align-items: flex-start; gap: 6px }
  .flow li { flex-direction: column; align-items: flex-start; gap: 6px }
  .flow li:not(:last-child)::after { content: "↓"; margin-left: 18px }
  .callout { grid-template-columns: minmax(0, 1fr); gap: 4px }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
.shot img, .art img { height: auto }