/* Public patient guides. Shared typography and spacing with the Mito Map shell. */
body.patient-guide { margin: 0; background: #f8f5ef; color: #17324d; font-family: system-ui, sans-serif; }
.patient-guide * { box-sizing: border-box; }
.guide-main { max-width: 1040px; margin: 94px auto 56px; padding: 24px; }
.guide-kicker { color: #176f63; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.guide-main h1 { max-width: 800px; margin: 12px 0 18px; font: min(2.5rem, var(--site-page-title-size, clamp(1.75rem, 2.6vw, 2.5rem))) Georgia, serif; line-height: 1.16; }
.guide-main h2 { margin: 0 0 14px; font: 1.65rem Georgia, serif; line-height: 1.25; }
.guide-main h3 { margin: 0 0 8px; font-size: 1.1rem; }
.guide-main p, .guide-main li { line-height: 1.65; }
.guide-main a { color: #176f63; text-underline-offset: 3px; }
.guide-main a:focus-visible, .guide-main button:focus-visible, .guide-main summary:focus-visible { outline: 3px solid #b96d32; outline-offset: 4px; }
.guide-lede { max-width: 800px; color: #465f73; font-size: 1.08rem; }
.guide-section { background: #fff; padding: 26px; border: 1px solid #d5e0da; border-radius: 20px; margin: 24px 0; scroll-margin-top: 100px; }
.guide-section p:last-child { margin-bottom: 0; }
.guide-jump, .guide-actions, .guide-footer { display: flex; gap: 12px 22px; flex-wrap: wrap; }
.guide-jump { padding: 16px 0 6px; }
.guide-actions { margin-top: 20px; align-items: center; }
.guide-button { display: inline-block; border-radius: 999px; padding: 11px 18px; background: #176f63; color: #fff !important; font-weight: 750; text-decoration: none; }
.guide-button.secondary { background: #edf7f4; color: #175c53 !important; border: 1px solid #c7ddd5; }
.guide-note { padding: 16px 18px; background: #edf7f4; border: 1px solid #c7ddd5; border-radius: 14px; line-height: 1.65; }
.guide-note.warm { background: #fff8eb; border-color: #e6d2ae; }
.guide-steps { padding-left: 24px; }
.guide-steps > li { padding-left: 5px; margin: 14px 0; }
.guide-steps > li strong { display: block; }
.guide-table-wrap { overflow-x: auto; }
.guide-table { width: 100%; border-collapse: collapse; font-size: .94rem; line-height: 1.6; }
.guide-table th, .guide-table td { padding: 15px 13px; border-bottom: 1px solid #d5e0da; text-align: left; vertical-align: top; }
.guide-table th { background: #f2f7f4; font-weight: 750; }
.guide-table td:first-child { min-width: 135px; font-weight: 700; }
.guide-code { display: block; overflow-x: auto; margin: 14px 0; padding: 15px; border-radius: 12px; background: #f2f5f5; color: #243e50; font: .85rem/1.65 ui-monospace, monospace; white-space: pre; }
.guide-main summary { cursor: pointer; padding: 14px 0; font-weight: 700; }
.guide-main details + details { border-top: 1px solid #d5e0da; }
.guide-main details > p { margin-top: 0; }
.guide-main video { display: block; width: 100%; background: #17324d; border-radius: 12px; }
.guide-main video::cue { font-size: 150%; line-height: 1.45; background: rgba(5, 20, 35, .92); color: #fff; }
.walkthrough-audio { margin: 14px 0 2px; border: 0; border-radius: 999px; padding: 11px 16px; background: #e4f6e9; color: #175f34; font: inherit; font-weight: 800; cursor: pointer; }
.guide-step-label { display: inline-block; margin-bottom: 12px; padding: 5px 10px; border-radius: 999px; background: #edf7f4; color: #176f63; font-size: .8rem; font-weight: 800; }
.guide-example { margin: 18px 0; padding: 18px 20px; border-left: 4px solid #176f63; background: #f4f8f6; border-radius: 0 12px 12px 0; }
.guide-example h3 { font-size: .84rem; color: #176f63; letter-spacing: .03em; }
.guide-example p { margin: 8px 0; }
.guide-footer { margin-top: 32px; padding: 20px 0; border-top: 1px solid #d5e0da; font-size: .9rem; }
@media (max-width: 600px) {
  .guide-main { margin-top: 80px; padding: 18px; }
  .guide-section { padding: 20px; border-radius: 16px; }
  .guide-main h2 { font-size: 1.45rem; }
  .guide-table th, .guide-table td { padding: 12px 9px; }
  .guide-table td:first-child { min-width: 100px; }
  .guide-table, .guide-table tbody, .guide-table tr, .guide-table td { display: block; width: 100%; }
  .guide-table caption { display: block; margin-bottom: 12px; text-align: left; }
  .guide-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .guide-table tr { margin-bottom: 16px; border: 1px solid #d5e0da; border-radius: 12px; overflow: hidden; }
  .guide-table td { border: 0; padding: 12px 14px; }
  .guide-table td:first-child { background: #f2f7f4; font-size: 1rem; }
  .guide-table td + td { border-top: 1px solid #e4ebe7; }
  .guide-table td:nth-child(n+2)::before { display: block; margin-bottom: 5px; color: #465f73; font-size: .78rem; font-weight: 750; }
  .guide-import-table td:nth-child(2)::before { content: 'How to add it'; }
  .guide-import-table td:nth-child(3)::before { content: 'What to check'; }
  .guide-timeline-table td:nth-child(2)::before { content: 'Entry'; }
  .guide-timeline-table td:nth-child(3)::before { content: 'Detail Alex records'; }
}
@media print {
  .guide-main { margin: 0 auto; max-width: none; }
  .guide-actions, .guide-jump, [data-site-nav], .walkthrough-audio, .guide-main video { display: none !important; }
  .guide-section { break-inside: avoid; }
}
