/* OysterFlow only: live, reflowable service-design diagrams. */
.o-diagram { margin: 30px 0; padding: 26px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.o-diagram p { font-size: 14px; line-height: 1.7; margin: 8px 0 0; }
.o-kicker { display: block; margin-bottom: 18px; color: var(--muted); font: 13px/1.5 "Bitcount Grid Single", monospace; letter-spacing: .05em; }
.o-route { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; list-style: none; margin: 0; padding: 0; }
.o-route li { position: relative; padding: 18px 0; border-top: 2px solid var(--ink); }
.o-route li:not(:last-child)::after { content: '→'; position: absolute; right: -22px; top: 18px; color: var(--muted); }
.o-route strong, .o-partner strong { display: block; font-size: 17px; }
.o-route small { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; }
.o-coordination { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 25px; align-items: center; margin-top: 25px; }
.o-hub { padding: 25px 18px; border: 1px solid var(--ink); text-align: center; }
.o-hub strong { font-size: 20px; }
.o-partner { text-align: center; }
.o-link { display: block; font-size: 13px; color: var(--muted); margin: 8px 0; }
.o-resident { max-width: 360px; margin: 0 auto; text-align: center; }
.o-resident::before { content: '↓ 培训 / 取水服务'; display: block; font-size: 13px; color: var(--muted); padding: 20px 0; }
.o-resident strong { display: block; padding: 14px; background: var(--highlight); color: #242623; font-size: 19px; font-weight: 500; }
.o-blueprint { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; }
.o-phase { min-width: 0; padding: 0 17px; border-right: 1px solid var(--rule); }
.o-phase:first-child { padding-left: 0; }
.o-phase:last-child { border: 0; padding-right: 0; }
.o-phase h3 { min-height: 72px; margin: 0; padding-bottom: 16px; border-bottom: 2px solid var(--ink); font-size: 17px; }
.o-phase h3 span { display: block; font: 13px/1.5 "Bitcount Grid Single", monospace; color: var(--muted); margin-bottom: 7px; }
.o-phase dl { margin: 0; }
.o-phase dl > div { min-height: 118px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.o-phase dl > div:nth-child(3) { border-top: 1px dashed var(--muted); }
.o-phase dl > div:last-child { border-bottom: 0; }
.o-phase dt { font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.o-phase dd { font-size: 14px; line-height: 1.75; color: var(--ink); }
.o-phase .o-front { color: var(--ink); }
.o-method { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0 0 18px; margin-bottom: 20px; border-bottom: 1px solid var(--rule); color: var(--body); font-size: 14px; }
.o-results { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.o-results caption { text-align: left; color: var(--ink); font-size: 17px; padding-bottom: 15px; }
.o-results th, .o-results td { text-align: right; border-bottom: 1px solid var(--rule); padding: 12px 10px; }
.o-results th:first-child { text-align: left; padding-left: 0; }
.o-results th { font-weight: 500; }
.o-results thead { color: var(--muted); font-size: 13px; }
.o-results .o-selected { background: var(--footer-surface); }
.o-tds { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.o-bar { display: block; width: var(--bar); height: 5px; background: var(--muted); }
.o-selected .o-bar { background: var(--ink); }
.o-maintenance { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; padding: 0; margin: 0; list-style: none; }
.o-maintenance li { position: relative; }
.o-maintenance li:not(:last-child)::after { content: '→'; position: absolute; top: 75px; right: -18px; color: var(--muted); }
.o-maintenance svg { display: block; width: 100%; height: 140px; color: var(--ink); }
.o-maintenance strong { display: block; margin: 12px 0 4px; font-size: 17px; }
.o-maintenance .o-step { font: 13px/1.5 "Bitcount Grid Single", monospace; color: var(--muted); }
.o-structure img { background: transparent; }
[data-theme="dark"] .o-structure img { filter: invert(1) hue-rotate(180deg); }
.image-viewer img[src*="device-structure-transparent"] { background: transparent; }
[data-theme="dark"] .image-viewer img[src*="device-structure-transparent"] { filter: invert(1) hue-rotate(180deg); }
@media (max-width: 700px) {
  .o-blueprint { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 0; }
  .o-phase:nth-child(2) { border: 0; padding-right: 0; }
  .o-phase:nth-child(3) { padding-left: 0; }
  .o-maintenance { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 24px; }
  .o-maintenance li:nth-child(2)::after { content: none; }
}
@media (max-width: 440px) {
  .o-route { grid-template-columns: 1fr; gap: 17px; }
  .o-route li { padding: 13px 0; }
  .o-route li:not(:last-child)::after { content: '↓'; right: 0; top: auto; bottom: -15px; }
  .o-route p { margin-top: 4px; }
  .o-coordination { grid-template-columns: 1fr 1fr; gap: 12px; }
  .o-hub { grid-column: 1 / -1; grid-row: 2; }
  .o-partner strong { font-size: 15px; }
  .o-link { font-size: 12px; }
  .o-blueprint { grid-template-columns: 1fr; gap: 28px; }
  .o-phase { border: 0; padding: 0; }
  .o-phase h3 { min-height: 0; }
  .o-phase dl > div { min-height: 0; display: grid; grid-template-columns: 62px 1fr; gap: 10px; padding: 12px 0; }
  .o-phase dt { margin: 0; }
  .o-bar { width: calc(var(--bar) * .65); }
  .o-results th, .o-results td { padding: 10px 5px; }
}
.o-original-diagram { margin: 32px 0; }
.o-diagram-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.o-diagram-toolbar > span { font-weight: 600; }
.o-diagram-toolbar > div { display: flex; gap: 8px; }
.o-diagram-toolbar button { padding: 8px 14px; font: inherit; font-size: 14px; color: var(--ink, currentColor); background: transparent; border: 1px solid currentColor; border-radius: 3px; cursor: pointer; min-height: 44px; }
.o-diagram-toolbar button[aria-pressed="true"] { background: #c6ff54; color: #171a14; border-color: #c6ff54; }
.o-diagram-viewport { overflow: auto; background: #fff; padding: clamp(14px, 2vw, 32px); max-height: 85vh; scrollbar-gutter: stable; }
.o-diagram-viewport img { display: block; width: 100%; height: auto; max-width: 100%; background: #fff; }
.o-diagram-toolbar button:focus-visible, .o-diagram-viewport:focus-visible { outline: 3px solid #57b2b2; outline-offset: 4px; }
.o-original-diagram:not(.is-zoomed):is(section[aria-labelledby="stakeholder-title"] > figure) .o-diagram-viewport { max-height: none; overflow: visible; scrollbar-gutter: auto; padding: 16px; }
.o-original-diagram:not(.is-zoomed):is(section[aria-labelledby="stakeholder-title"] > figure) .o-diagram-viewport img { width: min(100%, 640px, 69.2svh); margin-inline: auto; }