.os-page { padding: clamp(24px, 5vw, 72px); max-width: 1400px; margin: auto; min-width: 0; }
.os-page *, .os-page *::before, .os-page *::after { box-sizing: border-box; }
.os-page a { color: #72d6ba; text-underline-offset: 4px; overflow-wrap: anywhere; }
/* Links inside running text must not rely on colour alone (WCAG 1.4.1). */
.os-notice a, .os-downloads a, .os-hero > a, .os-action-body dd a { text-decoration: underline; }
.os-page p { line-height: 1.8; color: #b5c7cd; }
.os-hero { padding-block: 28px 48px; }
.os-kicker { display: block; color: #70c9b1; letter-spacing: .1em; font-size: .74rem; margin-block: 22px 12px; text-transform: uppercase; }
.os-hero h1 { font-size: clamp(2rem, 4.4vw, 4.2rem); line-height: 1.14; max-width: 950px; margin: 20px 0; overflow-wrap: anywhere; }
.os-hero h1 em { font-style: normal; color: #72d6ba; }
.os-hero > p { max-width: 880px; font-size: 1.06rem; }
.os-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #29414b; margin-top: 30px; }
.os-stats > div { padding: 20px; border-right: 1px solid #29414b; }
.os-stats > div:last-child { border: 0; }
.os-stats strong, .os-stats span { display: block; }
.os-stats strong { font-size: 2rem; color: #edf5f5; }
.os-stats span { font-size: .78rem; color: #b5c7cd; margin-top: 8px; }
.os-notice { padding: clamp(20px, 3vw, 32px); border-left: 3px solid #70c9b1; background: #10232b; margin-bottom: 36px; }
.os-page h2 { font-size: 1.35rem; line-height: 1.4; margin: 0 0 12px; overflow-wrap: anywhere; }
.os-page h3 { margin: 24px 0 12px; }
.os-reading { margin: 36px 0; max-width: 1040px; }
.os-reading li { line-height: 1.8; }
.os-phase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.os-phase-card { min-width: 0; padding: 26px; border: 1px solid #29414b; background: #0b1b23; }
.os-phase-card .os-kicker { margin-top: 0; }
.os-phase-card p { font-size: .88rem; }
.os-phase-card ul { padding-left: 19px; }
.os-phase-card li { margin-block: 12px; font-size: .85rem; }
.os-phase-card li span { display: block; font-size: .74rem; color: #b5c7cd; margin-top: 5px; }
.os-open-phase { display: inline-block; margin-top: 12px; }
.os-module-nav { display: flex; gap: 12px; flex-wrap: wrap; padding-bottom: 24px; }
.os-module-nav a { border: 1px solid #29414b; padding: 10px 14px; font-size: .8rem; }
.os-filter, #os-jump { padding: 22px; background: #10232b; border: 1px solid #29414b; margin: 24px 0; }
.os-page label { display: block; margin-bottom: 12px; font-weight: 600; }
.os-page input { max-width: 100%; width: 100%; background: #07131b; color: #edf5f5; border: 1px solid #527681; padding: 12px; font: inherit; min-width: 0; }
.os-page button { background: #163b40; color: #edf5f5; border: 1px solid #527681; padding: 11px 16px; font: inherit; cursor: pointer; margin: 8px 6px 0 0; }
.os-page :is(button, input, a, summary):focus-visible { outline: 3px solid #96f7d9; outline-offset: 4px; }
#os-jump > div { display: flex; gap: 12px; align-items: baseline; }
#os-jump input { max-width: 320px; }
.os-filter p, #os-jump-result { font-size: .85rem; margin-bottom: 8px; }
.os-module { margin-block: 42px; scroll-margin-top: 24px; }
.os-module > header { padding-bottom: 16px; }
.os-module > header p { font-size: .9rem; }
.os-action { border: 1px solid #29414b; border-bottom: 0; scroll-margin-top: 24px; }
.os-action:last-child { border-bottom: 1px solid #29414b; }
.os-action summary { cursor: pointer; padding: 18px; display: flex; gap: 14px; align-items: start; background: #0b1b23; }
.os-action summary::before { content: '+'; color: #72d6ba; flex: 0 0 12px; }
.os-action[open] summary::before { content: '−'; }
.os-id { font: .85rem ui-monospace, monospace; color: #72d6ba; padding-top: 2px; flex: 0 0 56px; }
.os-action-title { flex: 1; min-width: 0; font-size: .91rem; line-height: 1.5; }
.os-badge { font-size: .65rem; color: #d7c594; background: #302f24; padding: 6px 8px; white-space: nowrap; }
.os-action-body { padding: 8px clamp(16px, 3vw, 30px) 24px; background: #0a1820; }
.os-reason { font-size: .9rem; padding-bottom: 12px; border-bottom: 1px solid #29414b; }
.os-action dl { margin: 20px 0; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; font-size: .86rem; }
.os-action dt { font-weight: 600; color: #90cabb; line-height: 1.7; }
.os-action dd { margin: 0; color: #c0cdd1; line-height: 1.8; overflow-wrap: anywhere; min-width: 0; }
.os-action code, .os-page code { white-space: normal; overflow-wrap: anywhere; color: #d2dedf; font-size: .83em; }
.os-action small { display: block; color: #9bb0b7; margin-top: 7px; }
.os-action-links, .os-phase-pagination { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid #29414b; }
.os-phase-pagination { margin-top: 40px; font-size: .9rem; }
.os-action[hidden], .os-module[hidden] { display: none; }
@media (max-width: 1100px) { .os-phase-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 650px) {
  .os-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .os-stats > div { padding: 16px; border: 0; }
  .os-stats span { font-size: .72rem; }
  .os-action summary { flex-wrap: wrap; gap: 10px; padding: 16px 12px; }
  .os-action-title { flex-basis: calc(100% - 90px); }
  .os-badge { margin-left: 32px; }
  .os-action dl { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .os-action dd { margin-bottom: 16px; }
  .os-phase-card { padding: 20px; }
  .os-phase-pagination { flex-direction: column; }
  #os-jump > div { flex-direction: column; align-items: start; }
}
