/* ============================================================================
   ReSOLVE Facilities — User Manual SCREEN overrides
   ============================================================================
   The canonical stylesheet (manual.css) is print-targeted: A4 page size, mm
   units, page breaks. When the same HTML is viewed in a browser, the print
   geometry leaves the cover sitting at 794px in the top-left and the
   chapters with no margins. This file fixes that for screen rendering only.

   IMPORTANT: loaded via `<link media="screen" …>`, so Chromium's PDF engine
   (which renders as `print` media) IGNORES this file. PDF output is identical.
*/

@media screen {

  html, body { background: #eef2f3; }
  body {
    font-size: 15.5px;
    line-height: 1.65;
  }

  /* ============================================================ COVER ===== */
  /* Full-bleed gradient hero, responsive height — no longer locked to A4. */
  .cover {
    width: 100%;
    height: auto;
    min-height: 360px;
    margin: 0;
    padding: 64px 24px 52px;
    page-break-after: auto;
  }
  .cover .cover-top  { max-width: 860px; margin: 0 auto; padding: 0; }
  .cover .cover-meta { max-width: 860px; margin: 36px auto 0; padding: 0; flex-wrap: wrap; gap: 20px 32px; }
  .cover .cover-logo { width: 220px; height: 88px; margin-top: 24px; padding: 10px 18px; }
  .cover h1          { font-size: clamp(34px, 4.6vw, 52px); margin: 28px 0 12px; line-height: 1.1; }
  .cover .cover-subtitle { font-size: clamp(15px, 1.4vw, 19px); max-width: 640px; }

  /* ================================================== DOCUMENT SECTIONS === */
  /* TOC, chapters and back-cover all become centered reading cards on grey. */
  .toc,
  .chapter,
  .back-cover {
    max-width: 880px;
    margin: 28px auto;
    padding: 48px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(14,79,81,0.04);
    page-break-before: auto;
    page-break-after: auto;
  }

  /* TOC: slightly tighter padding so the index reads as a compact list. */
  .toc                { padding: 40px 48px; }
  .toc h2             { font-size: 28px; padding-bottom: 14px; }
  .toc > ol > li      { font-size: 15px; margin-bottom: 7px; }
  .toc ol ol          { margin: 6px 0 4px 22px; }
  .toc ol ol li       { font-size: 13.5px; margin-bottom: 3px; }
  .toc a              { color: inherit; }
  .toc a:hover        { color: #1d6371; text-decoration: underline; }

  /* CHAPTER — comfortable on-screen typography */
  .chapter h1.chapter-title { font-size: 34px; margin-bottom: 12px; }
  .chapter-number           { font-size: 11px; padding: 5px 13px; margin-bottom: 16px; }
  .chapter-lede             { font-size: 16px; padding-bottom: 18px; margin-bottom: 26px; line-height: 1.5; }
  .chapter h2               { font-size: 22px; margin: 28px 0 12px; padding-left: 14px; }
  .chapter h3               { font-size: 17px; margin: 22px 0 8px; }
  .chapter h4               { font-size: 13px; margin: 16px 0 6px; }
  .chapter p, .chapter li, .chapter dd { font-size: 15.5px; }
  .chapter p                { margin: 0 0 11px; }
  .chapter dl.fields        { margin: 12px 0 18px; }
  .chapter dl.fields dt     { font-size: 14.5px; margin-top: 12px; }
  .chapter dl.fields dt:first-child { margin-top: 0; }
  .chapter dl.fields dd     { font-size: 14.5px; margin: 2px 0 0; }
  ul, ol                    { padding-left: 22px; }
  ul li, ol li              { margin-bottom: 4px; }

  /* Callouts — slight scale-up on screen */
  .callout                  { font-size: 14.5px; padding: 14px 18px; margin: 18px 0; border-radius: 10px; }
  .callout .callout-label   { font-size: 11px; margin-bottom: 4px; }

  /* Tables */
  table                     { font-size: 14px; margin: 16px 0; }
  th                        { font-size: 11.5px; padding: 9px 12px; }
  td                        { padding: 9px 12px; }

  /* Steps */
  ol.steps                  { margin: 18px 0; }
  ol.steps > li             { padding-left: 44px; margin-bottom: 14px; min-height: 30px; }
  ol.steps > li::before     { width: 30px; height: 30px; top: -2px; font-size: 14px; }

  /* Inline code / keyboard */
  code, kbd                 { font-size: 13px; }
  code                      { padding: 1px 7px; }

  /* Screenshot placeholders — fit the wider on-screen column */
  .screenshot                       { margin: 22px 0; }
  .screenshot .placeholder-box      { height: 240px; border-radius: 12px; padding: 24px; }
  .screenshot.small .placeholder-box{ height: 160px; }
  .screenshot.tall  .placeholder-box{ height: 360px; }
  .screenshot .placeholder-title    { font-size: 14px; }
  .screenshot .placeholder-desc     { font-size: 12.5px; }
  .screenshot figcaption            { font-size: 13px; margin-top: 8px; }

  /* Platform cards */
  .platform-grid       { grid-template-columns: 1fr 1fr; gap: 18px; margin: 16px 0; }
  .platform-card       { padding: 18px 22px; border-radius: 12px; }
  .platform-card ol li { font-size: 13.5px; margin-bottom: 5px; }

  /* Back cover — centered closing card */
  .back-cover                   { padding: 72px 48px 80px; text-align: center; }
  .back-cover .back-logo        { width: 88px; height: 88px; margin: 0 auto 18px; }
  .back-cover h2                { font-size: 28px; padding-bottom: 8px; }
  .back-cover p                 { font-size: 16px; max-width: 520px; }
  .back-cover .back-contact     { padding: 24px 40px; border-radius: 14px; }
  .back-cover .back-contact a   { font-size: 14.5px; }

  a:hover                       { color: #1d6371; }

  /* Justified body copy with automatic hyphenation. Applied to running
     paragraphs only — lists, TOC entries, tables and headings stay
     left-aligned (justification on short text looks irregular). The
     hyphens require <html lang="…"> to be set (it is, per language file). */
  .chapter p,
  .chapter-lede,
  .callout p,
  .chapter dl.fields dd {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphenate-limit-chars: 7 4 3;
  }
}

/* =========================================================== MOBILE === */
@media screen and (max-width: 720px) {
  .cover                  { padding: 44px 18px 36px; min-height: 320px; }
  .cover .cover-logo      { width: 180px; height: 72px; }
  .toc, .chapter, .back-cover {
    margin: 18px 14px;
    padding: 32px 22px;
    border-radius: 12px;
  }
  .toc h2                 { font-size: 24px; }
  .chapter h1.chapter-title { font-size: 26px; }
  .chapter h2             { font-size: 19px; padding-left: 10px; }
  .chapter-lede           { font-size: 15px; }
  .platform-grid          { grid-template-columns: 1fr; }
  table                   { font-size: 13px; }
  th, td                  { padding: 7px 9px; }
  ol.steps > li           { padding-left: 38px; }
  ol.steps > li::before   { width: 26px; height: 26px; font-size: 13px; }
  .back-cover .back-contact { padding: 18px 24px; }
}