/* Reading view reflows the authored slides without changing presentation layout. */
.deck-table {
  min-width: 0;
}
deck-stage > section a:focus-visible,
.deck-table:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

@media screen {
  html[data-deck-mode="reading"] {
    overflow: auto;
  }
  body[data-deck-mode="reading"] {
    overflow: auto;
    padding-bottom: calc(var(--deck-toolbar-height, 64px) + 32px);
  }
  body[data-deck-mode="reading"] deck-stage {
    display: block;
    background: var(--bg);
  }
  deck-stage[data-mode="reading"] > section {
    padding: 48px 36px;
    border-bottom: 1px solid var(--line-2);
    font-size: 19px;
    line-height: 1.55;
    scroll-margin-top: 24px;
    overflow-wrap: anywhere;
  }
  deck-stage[data-mode="reading"]
    :is(
      .chrome-top,
      .chrome-bottom,
      .bg-grid,
      .brand-glow,
      .cover-ascii,
      .divider .num,
      .prompt .c
    ) {
    display: none;
  }
  deck-stage[data-mode="reading"] :is(.content, .divider) {
    position: static;
    inset: auto;
    padding: 0 !important;
    width: 100%;
    height: auto;
    overflow: visible;
    gap: 24px;
  }
  deck-stage[data-mode="reading"] .content * {
    min-width: 0;
  }
  deck-stage[data-mode="reading"] [style*="font-size"] {
    font-size: inherit !important;
  }
  deck-stage[data-mode="reading"] [style*="margin-top"] {
    margin-top: 20px !important;
  }
  deck-stage[data-mode="reading"] [style*="margin-bottom"] {
    margin-bottom: 20px !important;
  }
  deck-stage[data-mode="reading"] [style*="gap:"] {
    gap: 24px !important;
  }
  deck-stage[data-mode="reading"]
    :is(
      .grid-2,
      .grid-3,
      .grid-4,
      .intro-columns,
      .proxmox-layout,
      .netbird-intro,
      .backup-restore,
      [style*="grid-template-columns"]
    ) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
    margin-top: 0;
  }
  deck-stage[data-mode="reading"]
    :is(.content, .divider)
    > [style*="display: flex"] {
    flex-wrap: wrap;
  }
  deck-stage[data-mode="reading"]
    :is(.content, .divider)
    > div[style*="padding:"] {
    padding: 20px !important;
  }
  deck-stage[data-mode="reading"]
    :is(h1.slide-title, h2.slide-title, .divider .title) {
    font-size: clamp(32px, 5.5vw, 54px) !important;
    line-height: 1.1 !important;
    max-width: 24ch !important;
    margin-bottom: 0 !important;
  }
  deck-stage[data-mode="reading"] .divider .sub {
    margin-top: 0;
  }
  deck-stage[data-mode="reading"] :is(.lede, .divider .sub) {
    font-size: 22px !important;
    line-height: 1.5;
    max-width: 64ch;
  }
  deck-stage[data-mode="reading"] :is(.eyebrow, .divider .label) {
    font-size: 14px;
    margin: 0 !important;
  }
  deck-stage[data-mode="reading"] .eyebrow {
    flex-wrap: wrap;
    gap: 10px;
  }
  deck-stage[data-mode="reading"] :is(.kicker, .frame-label) {
    font-size: 14px;
  }
  deck-stage[data-mode="reading"] .term-list {
    gap: 18px !important;
    margin-top: 0;
  }
  deck-stage[data-mode="reading"] .term-list li {
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 12px;
    font-size: 20px;
    line-height: 1.5;
    max-width: none;
  }
  deck-stage[data-mode="reading"] .term-list li::before {
    font-size: 24px;
  }
  deck-stage[data-mode="reading"] .term-list li > br {
    display: none;
  }
  deck-stage[data-mode="reading"] .term-list li > span ~ span {
    grid-column: 2;
  }
  deck-stage[data-mode="reading"] :is(.chip, .prompt, .resource-line) {
    font-size: 16px;
    line-height: 1.6;
  }
  deck-stage[data-mode="reading"] .chip {
    padding: 8px 12px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  deck-stage[data-mode="reading"] .resource-line {
    margin-top: 0;
  }
  deck-stage[data-mode="reading"] .card {
    padding: 24px;
    gap: 12px;
  }
  deck-stage[data-mode="reading"] .card .card-title {
    font-size: 26px;
  }
  deck-stage[data-mode="reading"] .card .card-body {
    font-size: 19px;
  }
  deck-stage[data-mode="reading"] .card .card-sub {
    font-size: 14px;
  }
  deck-stage[data-mode="reading"] :is(img, svg) {
    max-width: 100%;
  }
  deck-stage[data-mode="reading"] img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
  deck-stage[data-mode="reading"] figcaption {
    font-size: 16px;
    margin-top: 12px;
  }
  deck-stage[data-mode="reading"] .starter-options {
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 0;
  }
  deck-stage[data-mode="reading"] .starter-options strong {
    font-size: 26px;
  }
  deck-stage[data-mode="reading"] .starter-options span {
    font-size: 19px;
  }
  deck-stage[data-mode="reading"] .hardware-checks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 0;
    padding-top: 24px;
  }
  deck-stage[data-mode="reading"] .hardware-checks dt {
    font-size: 18px;
  }
  deck-stage[data-mode="reading"] .hardware-checks dd {
    font-size: 17px;
  }
  deck-stage[data-mode="reading"] .deck-table {
    max-width: 100%;
    overflow-x: auto;
  }
  deck-stage[data-mode="reading"] .foundation-table {
    min-width: 620px;
    margin-top: 0;
  }
  deck-stage[data-mode="reading"] .foundation-table :is(th, td) {
    font-size: 18px;
    line-height: 1.45;
    padding: 18px 16px;
  }
  deck-stage[data-mode="reading"] .foundation-table thead th {
    font-size: 15px;
  }
  deck-stage[data-mode="reading"] .foundation-table tbody th {
    font-size: 22px;
  }
  deck-stage[data-mode="reading"] .foundation-choice {
    margin-top: 0;
  }
  deck-stage[data-mode="reading"] .host-summary {
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 0;
    padding-top: 20px;
  }
  deck-stage[data-mode="reading"] .host-summary strong {
    font-size: 26px;
    white-space: normal;
  }
  deck-stage[data-mode="reading"] .host-summary span {
    font-size: 20px;
  }
  deck-stage[data-mode="reading"] .backup-sequence li {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
  }
  deck-stage[data-mode="reading"] .backup-sequence li::before {
    font-size: 24px;
  }
  deck-stage[data-mode="reading"] .backup-sequence h2 {
    font-size: 26px;
  }
  deck-stage[data-mode="reading"] :is(.backup-sequence p, .backup-note) {
    font-size: 19px;
  }
  deck-stage[data-mode="reading"] .backup-note {
    margin-top: 0;
    padding-top: 0;
  }
  deck-stage[data-mode="reading"] .cost-note {
    border-left: 0;
    border-top: 1px solid var(--line-2);
    padding: 24px 0 0;
  }
  deck-stage[data-mode="reading"] .cost-note h2 {
    font-size: 28px;
  }
  deck-stage[data-mode="reading"] .cost-note p {
    font-size: 20px;
  }
  deck-stage[data-mode="reading"] .closing-title {
    font-size: clamp(84px, 18vw, 140px);
  }
  @media (max-width: 600px) {
    deck-stage[data-mode="reading"] > section {
      padding: 32px 24px;
    }
    deck-stage[data-mode="reading"] .hardware-checks {
      grid-template-columns: 1fr;
    }
    deck-stage[data-mode="reading"] .deck-table::before {
      content: "Scroll sideways to see all columns.";
      display: block;
      color: var(--accent);
      font-size: 14px;
      margin-bottom: 12px;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  deck-stage *,
  deck-stage *::before,
  deck-stage *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media screen {
  deck-stage[data-mode="reading"] :is(.stack-overview, .stack-recap) {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  deck-stage[data-mode="reading"] :is(.stack-overview, .stack-recap) dt {
    font-size: 16px;
    margin-bottom: 8px;
  }
  deck-stage[data-mode="reading"] .stack-overview dd {
    font-size: 28px;
  }
  deck-stage[data-mode="reading"] .stack-recap dd {
    font-size: 22px;
  }
  deck-stage[data-mode="reading"] .recap-takeaway {
    font-size: 30px;
    margin-top: 0;
    padding-top: 8px;
  }
  deck-stage[data-mode="reading"] .connection-map svg {
    display: none;
  }
  deck-stage[data-mode="reading"] .selfhost-install {
    position: static;
    width: 100%;
    height: auto;
  }
  deck-stage[data-mode="reading"] .connection-reading {
    display: grid;
    gap: 24px;
    font-size: 20px;
  }
  deck-stage[data-mode="reading"] .connection-reading strong {
    color: var(--accent);
  }
  deck-stage[data-mode="reading"] .connection-map figcaption {
    margin-top: 24px;
    font-size: 18px;
    text-align: left;
  }
}