/* ==========================================================================
   Guide Retrim Stylesheet - Design System & Visual Rhythm
   ========================================================================== */

/* 1. Sheet & Base Dimensions & Precise Scroll Alignment */
html {
  scroll-padding-top: 0 !important;
}
.slide {
  scroll-margin-top: 60px !important;
}
.sheet {
  padding: 2.2cqw 3cqw 1.8cqw;
}
.kicker {
  font-size: 0.95cqw;
  letter-spacing: 0.08em;
}
.kicker .chip {
  padding: 0.35cqw 0.75cqw;
  border-radius: 6px;
  background: #eef2fb;
  color: #3552a8;
  font-weight: 800;
}
.slide h1,
.slide h2 {
  font-size: 2.5cqw;
  margin: 0.6cqw 0 0.35cqw;
  letter-spacing: -0.05em;
  font-weight: 800;
  color: #17233d;
}
.entry {
  font-size: 1.05cqw;
  margin-bottom: 0.9cqw;
  color: #64748b;
}

/* 2. Main 2-Column Slide Grid */
.body-grid,
.cover .body-grid,
.flow .body-grid {
  grid-template-columns: 63% 34%;
  gap: 3%;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

/* 3. Left-Hand Image Area (.visual) - Center & Spacing */
.visual {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 0.45cqw;
}

/* 4. Unified Cuts Container */
.cuts {
  display: grid;
  width: 100%;
  max-width: 58cqw;
  margin: 0 auto;
  gap: 0.7cqw;
  align-items: start;
}

/* 5. Screenshot Figure & Step Badge Typography */
.screen-cut {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.screen-cut figcaption {
  display: flex;
  align-items: center;
  gap: 0.45cqw;
  font-size: 0.92cqw;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.35;
  margin: 0 0 0.35cqw;
  letter-spacing: -0.02em;
}
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #3552a8;
  color: #ffffff;
  font-size: 0.76cqw;
  font-weight: 800;
  padding: 0.12cqw 0.45cqw;
  border-radius: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.25;
}
.step-badge.alt {
  background: #5a6b85;
}
.step-title {
  color: #2b3a55;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 6. Card Frame & Elevation for Captures */
.capture {
  flex: none;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid #d5ddec;
  border-radius: 6px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(23, 35, 61, 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.capture:hover {
  border-color: #3552a8;
  box-shadow: 0 6px 18px rgba(53, 82, 168, 0.14);
}
.capture img,
.cover .capture img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 35cqw;
  object-fit: contain;
}
.visual > .capture {
  max-height: 35cqw;
  margin: 0 auto;
}
.visual > .capture img {
  max-height: 35cqw;
  width: auto;
  max-width: 100%;
}

/* 7. Bottom Caption & Jump Links */
.caption {
  font-size: 0.8cqw;
  color: #64748b;
  line-height: 1.4;
  margin: 0.2cqw 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35cqw;
  align-self: flex-start;
  padding: 0.15cqw 0.5cqw;
  border-radius: 4px;
  background: #f1f4f9;
}
.caption::before {
  content: "ℹ";
  font-size: 0.85cqw;
  color: #3552a8;
  font-weight: 700;
}
.jump-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45cqw;
  margin-top: 0.4cqw;
}
.jump-links a {
  display: inline-flex;
  align-items: center;
  font-size: 0.86cqw;
  font-weight: 600;
  color: #3552a8;
  background: #ffffff;
  border: 1px solid #ccd7ee;
  border-radius: 6px;
  padding: 0.3cqw 0.65cqw;
  text-decoration: none;
  box-shadow: 0 1px 4px rgba(23, 35, 61, 0.04);
  transition: all 0.15s ease;
}
.jump-links a:hover {
  background: #eef3fc;
  border-color: #3552a8;
}

/* 8. Standardized Layout Archetypes */

/* Single Screen Cut */
.cuts-single,
.cuts-stack:has(> .screen-cut:only-child),
.cuts-columns:has(> .screen-cut:only-child),
.cuts:has(> .screen-cut:only-child) {
  display: block;
  max-width: 52cqw;
}
.cuts-single .capture img,
.cuts:has(> .screen-cut:only-child) .capture img {
  max-height: 29cqw;
}

/* G03 Preparation Specific */
#g03 .cuts {
  max-width: 50cqw;
}
#g03 .capture img {
  max-height: 28cqw;
}

/* Vertical Stack (2 Wide Images) */
.cuts-stack {
  grid-template-columns: 1fr;
  max-width: 56cqw;
  gap: 0.65cqw;
}

/* Split Columns (2 Columns) */
.cuts-columns {
  grid-template-columns: 1fr 1fr;
  max-width: 58cqw;
  gap: 0.75cqw;
  align-items: start;
}

/* Specialized Layouts */

/* A01 Profile (Webzine Basic Info) - Precise Proportion & Button Scale */
.cuts-profile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5cqw 0.8cqw;
  max-width: 52cqw;
  align-items: end;
}
.cuts-profile .screen-cut:first-child {
  grid-column: 1 / -1;
}
.cuts-profile .screen-cut:first-child .capture img {
  max-height: 18cqw;
  width: 100%;
  object-fit: contain;
}
.cuts-profile .screen-cut:nth-child(2) {
  grid-column: 1;
}
.cuts-profile .screen-cut:nth-child(2) .capture img {
  max-height: 8.5cqw;
  width: 100%;
  object-fit: contain;
}
.cuts-profile .screen-cut:nth-child(3) {
  grid-column: 2;
  width: 6.5cqw;
  min-width: 75px;
  max-width: 105px;
  align-self: end;
}
.cuts-profile .screen-cut:nth-child(3) figcaption {
  font-size: 0.82cqw;
  white-space: nowrap;
}
.cuts-profile .screen-cut:nth-child(3) .capture {
  width: 100%;
}
.cuts-profile .screen-cut:nth-child(3) .capture img {
  width: 100%;
  height: auto;
  max-height: 5.5cqw;
  object-fit: contain;
}

/* A02 Domain */
.cuts-domain {
  grid-template-columns: 44% 54%;
  gap: 2%;
  max-width: 58cqw;
  align-items: center;
}

/* A05 Template */
.cuts-template {
  grid-template-columns: 1fr auto;
  gap: 0.8cqw;
  max-width: 50cqw;
  align-items: end;
}
.cuts-template .screen-cut:first-child .capture img {
  max-height: 28cqw;
}
.cuts-template .screen-cut:last-child {
  width: 11cqw;
  max-width: 150px;
}
.cuts-template .screen-cut:last-child .capture img {
  width: 100%;
  height: auto;
}

/* A08 Regions (Page 11) - Optimized for 16:9 Slide */
#a08 .cuts,
.cuts-regions {
  grid-template-columns: 1fr 1fr;
  gap: 0.45cqw;
  max-width: 42cqw;
  margin: 0 auto;
}
#a08 .screen-cut:first-child,
.cuts-regions .screen-cut:first-child {
  grid-column: 1 / -1;
}
#a08 .screen-cut:first-child .capture img {
  max-height: 9cqw;
  width: 100%;
  object-fit: contain;
}
#a08 .screen-cut:nth-child(2) .capture img,
#a08 .screen-cut:nth-child(3) .capture img {
  max-height: 13.8cqw;
  width: 100%;
  object-fit: contain;
}

/* A11 Basic */
.cuts-basic {
  grid-template-columns: 1fr 1fr;
  gap: 0.6cqw;
  max-width: 56cqw;
}
.cuts-basic .screen-cut:last-child {
  grid-column: 1 / -1;
}

/* A13 Representative Image & Engagement (Page 16) - Fill Visual Area */
#a13 .cuts {
  grid-template-columns: 1fr 1fr;
  max-width: 58cqw;
  gap: 0.8cqw;
  align-items: start;
}
#a13 .screen-cut .capture img {
  width: 100%;
  height: auto;
  max-height: 26cqw;
  object-fit: contain;
}

/* A15 Content Layout */
#a15 .cuts {
  grid-template-columns: 1fr 1fr;
  max-width: 56cqw;
  gap: 0.6cqw;
}
#a15 .screen-cut:last-child {
  grid-column: 1 / -1;
  width: 11cqw;
  max-width: 140px;
  justify-self: center;
}
#a15 .screen-cut:last-child .capture img {
  width: 100%;
  height: auto;
  max-height: 4.5cqw;
  object-fit: contain;
}

/* A19 Reader View (PC + Mobile) */
.cuts-reader {
  grid-template-columns: 74% 24%;
  gap: 2%;
  max-width: 59cqw;
  align-items: center;
}

/* A22 Export */
.cuts-export {
  grid-template-columns: 1fr;
  gap: 0.55cqw;
  max-width: 56cqw;
}
.cuts-export .screen-cut:nth-child(2) {
  max-width: 38cqw;
  justify-self: center;
}

/* B03 Popup */
.cuts-popup {
  grid-template-columns: 49% 49%;
  gap: 2%;
  max-width: 58cqw;
  align-items: start;
}
.cuts-popup .screen-cut:first-child {
  grid-row: 1 / 3;
}
.cuts-popup .screen-cut:last-child {
  width: 10cqw;
  max-width: 130px;
}

/* B05 Search 2x2 Grid */
.cuts-search,
.cuts-search2,
.cuts-search-grid {
  grid-template-columns: 1fr 1fr;
  gap: 0.6cqw;
  max-width: 58cqw;
}

/* B06 Board 2x2 Grid */
.cuts-board,
.cuts-board2,
.cuts-board-grid {
  grid-template-columns: 1fr 1fr;
  gap: 0.6cqw;
  max-width: 58cqw;
}

/* B08 Board Write */
.cuts-boardwrite {
  grid-template-columns: 70% 28%;
  gap: 2%;
  max-width: 56cqw;
  align-items: end;
}

/* C02 Quiz Grid (5 cuts) */
.cuts-quiz,
.cuts-quiz2,
.cuts-quiz-grid {
  grid-template-columns: 1fr 1fr;
  gap: 0.5cqw;
  max-width: 56cqw;
}
.cuts-quiz .screen-cut:last-child,
.cuts-quiz2 .screen-cut:last-child,
.cuts-quiz-grid .screen-cut:last-child {
  grid-column: 1 / -1;
  max-width: 25cqw;
  justify-self: center;
}

/* Split Columns - 2-Cut Side-by-Side (Pages 43, 50, 51, 52, 53, 55) - Fill Visual Area */
#c08 .cuts,
#e01 .cuts,
#e02 .cuts,
#e03 .cuts,
#e04 .cuts,
#e06 .cuts {
  grid-template-columns: 1fr 1fr;
  max-width: 58cqw;
  margin: 0 auto;
  gap: 0.8cqw;
  align-items: start;
}
#c08 .screen-cut .capture img,
#e01 .screen-cut .capture img,
#e02 .screen-cut .capture img,
#e03 .screen-cut .capture img,
#e04 .screen-cut .capture img,
#e06 .screen-cut .capture img {
  width: 100%;
  height: auto;
  max-height: 25cqw;
  object-fit: contain;
}

/* Other Height Protective Rules */
#a02 .screen-cut:first-child .capture img { max-height: 27cqw; }
#a03 .cuts { max-width: 42cqw; margin: 0 auto; }
#a03 .capture img { max-height: 28cqw; }
#a05 .screen-cut:first-child .capture img { max-height: 27cqw; width: auto; margin: 0 auto; }
#a07 .screen-cut .capture img { max-height: 27cqw; width: auto; margin: 0 auto; }
#a09 .cuts { max-width: 48cqw; margin: 0 auto; gap: 0.5cqw; }
#a09 .screen-cut:nth-child(2) .capture img { max-height: 18cqw; }
#a10 .cuts { max-width: 45cqw; margin: 0 auto; gap: 0.5cqw; }
#a18 .cuts { max-width: 48cqw; margin: 0 auto; gap: 0.5cqw; }
#a19 .screen-cut:nth-child(2) .capture img { max-height: 28cqw; }
#a20 .cuts { max-width: 46cqw; margin: 0 auto; }
#a22 .screen-cut:nth-child(2) .capture img { max-height: 14cqw; }
#b01 .cuts { max-width: 44cqw; margin: 0 auto; gap: 0.45cqw; }
#c07 .screen-cut .capture img { max-height: 27cqw; }
/* D03 Article Analytics (Page 47) - Fill Visual Area */
#d03 .cuts {
  grid-template-columns: 1fr;
  max-width: 57cqw;
  margin: 0 auto;
  gap: 0.45cqw;
}
#d03 .screen-cut:first-child .capture img {
  max-height: 9cqw;
  width: 100%;
  object-fit: contain;
}
#d03 .screen-cut:nth-child(2) .capture img {
  max-height: 22cqw;
  width: 100%;
  object-fit: contain;
}

/* D05 Reaction Analytics (Page 49) - Fill Visual Area */
#d05 .cuts {
  grid-template-columns: 1fr;
  max-width: 55cqw;
  margin: 0 auto;
  gap: 0.45cqw;
}
#d05 .screen-cut:first-child .capture img {
  max-height: 22cqw;
  width: 100%;
  object-fit: contain;
}
#d05 .screen-cut:nth-child(2) .capture img {
  max-height: 11cqw;
  width: 100%;
  object-fit: contain;
}

/* D02 User Agent */
.cuts-ua {
  grid-template-columns: 44% 54%;
  gap: 2%;
  max-width: 58cqw;
  align-items: center;
}
.cuts-ua .screen-cut:first-child {
  grid-row: 1 / 3;
}

/* Diagrams & Covers */
.flow .visual > .diagram {
  max-height: 33cqw;
  width: 100%;
  object-fit: contain;
  margin: 0 auto;
}
.cover .visual {
  justify-content: center;
}
.cover .capture {
  box-shadow: 0 8px 30px rgba(23, 35, 61, 0.12);
  border: 0;
}

/* 9. Typography & Step List Consistency (Preserved) */
.copy {
  gap: 0.75cqw;
}
.steps {
  gap: 0.75cqw;
}
.steps li {
  font-size: 1.35cqw;
  line-height: 1.55;
  padding-left: 2.2cqw;
}
.steps li:before {
  font-size: 1.05cqw;
}
.note {
  font-size: 1.02cqw;
  padding: 0.6cqw 0.75cqw;
}
.done {
  font-size: 1.08cqw;
  margin-top: auto;
}
.slide footer {
  margin-top: 0.7cqw;
  padding-top: 0.6cqw;
  font-size: 0.9cqw;
}
.cover h1 {
  font-size: 3.6cqw;
}
.cover .hero-copy {
  font-size: 1.4cqw;
}
.cover .eyebrow {
  font-size: 1cqw;
}

/* 9.1 Toolbar Button Layout & Alignment */
.toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
}
.toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.toolbar .print-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* 10. Mobile Responsive Rules */
@media screen and (max-width: 760px) {
  /* Mobile Toolbar Optimization */
  .toolbar {
    padding: 0 10px;
    gap: 6px;
  }
  .brand {
    font-size: 13px;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .toc-text,
  .total-pages,
  .page-label,
  .print-text,
  .print-label {
    display: none !important;
  }
  .toolbar button {
    padding: 6px 8px;
    font-size: 14px;
    min-width: 32px;
    height: 36px;
    border-radius: 6px;
  }
  #toc-toggle {
    font-size: 16px;
    min-width: 34px;
    padding: 6px 8px;
  }
  .toolbar label {
    margin: 0;
  }
  #page-number {
    width: 44px;
    height: 36px;
    padding: 4px 2px;
    font-size: 13px;
    border-radius: 6px;
  }
  #print {
    min-width: 34px;
    padding: 6px 8px;
  }
  #print .print-icon {
    width: 16px;
    height: 16px;
  }
  .body-grid,
  .cover .body-grid,
  .flow .body-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .visual {
    gap: 10px;
  }
  .cuts,
  .cuts-stack,
  .cuts-columns,
  .cuts-profile,
  .cuts-domain,
  .cuts-template,
  .cuts-regions,
  .cuts-basic,
  .cuts-reader,
  .cuts-export,
  .cuts-popup,
  .cuts-search2,
  .cuts-board2,
  .cuts-boardwrite,
  .cuts-quiz2,
  .cuts-send,
  .cuts-analytics,
  .cuts-ua {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 100% !important;
  }
  #c08 .cuts,
  #d03 .cuts,
  #d05 .cuts,
  #e01 .cuts,
  #e02 .cuts,
  #e03 .cuts,
  #e04 .cuts,
  #e06 .cuts {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    max-width: 100% !important;
  }
  .screen-cut {
    width: 100%;
  }
  .screen-cut figcaption {
    font-size: 13px;
    gap: 6px;
    margin-bottom: 5px;
  }
  .step-badge {
    font-size: 11px;
    padding: 2px 6px;
  }
  .step-title {
    white-space: normal;
  }
  .capture {
    box-shadow: 0 2px 8px rgba(23, 35, 61, 0.06);
  }
  .caption {
    font-size: 12px;
    padding: 3px 8px;
  }
  .jump-links a {
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* ==========================================================================
   11. Print Stylesheet - Exact 1:1 Screen Layout (A4 Landscape, 1 Slide / Page)
   ========================================================================== */
@page {
  size: A4 landscape;
  margin: 0;
}

@media print {
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-sizing: border-box !important;
  }

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    width: 100% !important;
    height: 100% !important;
  }

  .toolbar,
  .toc,
  .zoom,
  .sr-only,
  #reading-status,
  .jump-links,
  .asset-link {
    display: none !important;
  }

  .deck {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .slide {
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    aspect-ratio: 16/9 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    page-break-before: always !important;
    break-before: page !important;
    page-break-after: always !important;
    break-after: page !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    overflow: hidden !important;
    position: relative !important;
    container-type: inline-size !important;
    display: block !important;
  }

  .slide:first-of-type {
    page-break-before: avoid !important;
    break-before: avoid !important;
  }

  .slide:last-of-type {
    page-break-after: avoid !important;
    break-after: auto !important;
  }

  .sheet {
    position: absolute !important;
    inset: 0 !important;
    padding: 2.2cqw 3cqw 1.8cqw !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
  }

  .body-grid,
  .cover .body-grid,
  .flow .body-grid {
    display: grid !important;
    grid-template-columns: 63% 34% !important;
    gap: 3% !important;
    flex: 1 !important;
    min-height: 0 !important;
    align-items: stretch !important;
  }

  .visual {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  .copy {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  .cuts,
  .cuts-stack,
  .cuts-columns,
  .cuts-profile,
  .cuts-domain,
  .cuts-template,
  .cuts-regions,
  .cuts-basic,
  .cuts-reader,
  .cuts-export,
  .cuts-popup,
  .cuts-search2,
  .cuts-board2,
  .cuts-boardwrite,
  .cuts-quiz2,
  .cuts-send,
  .cuts-analytics,
  .cuts-ua {
    display: grid !important;
  }

  .capture {
    box-shadow: 0 1px 6px rgba(23, 35, 61, 0.08) !important;
    border: 1px solid #d5ddec !important;
  }

  .cover .capture {
    box-shadow: none !important;
    border: none !important;
  }

  .slide footer a,
  .entry a,
  a {
    text-decoration: none !important;
    color: inherit !important;
  }
}