/* Page canvas */
/* Screen "compact" preview (optional) */
:root.compact .chart-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

:root.compact .chart-table {
    font-size: 12px;
}

:root.compact .chart-table th,
:root.compact .chart-table td {
    padding: 5px 6px;
}

:root.compact .sheet {
    padding: 12px;
}

.sheet {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    margin: 16px 0;
}

/* Cover */
.sheet--cover {
    display: grid;
    place-items: center;
    padding: 64px 18px;
}

.cover-inner {
    text-align: center
}

.brand-heading {
    margin: 0 0 6px;
    font-size: 28px;
    opacity: .9
}

.cover-title {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 800
}

.cover-series {
    color: var(--muted)
}

/* Titles */
.sheet-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 800
}

.sheet-lead {
    color: var(--muted);
    margin: 0 0 12px
}

/* Bullets + note */
.bullets {
    margin: 10px 0 12px
}

.bullets li {
    margin: 6px 0
}

.note {
    font-size: 13px;
    color: var(--muted)
}

/* Chart grid */
.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.chart {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px
}

/* Screen: make the length printable visually plain (no card chrome) */
.length-sheet .chart {
    background: transparent;
    border: none;
    border-radius: 6px; /* keep slight rounding for screen layout */
    padding: 8px;
    box-shadow: none;
}

.length-sheet .chart p,
.length-sheet .chart li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chart h3 {
    margin: 0 0 8px
}

.chart-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px
}

.chart-table th,
.chart-table td {
    border: 1px solid var(--border);
    padding: 6px 8px;
    text-align: left
}

.chart-table thead th {
    background: rgba(108, 180, 255, .06)
}

/* Print button row (screen only) */
.print-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 10px
}

/* Print rules */
@media print {
    :root {
        --bg: #fff;
        --fg: #000;
        --muted: #333;
        --card: #fff;
        --surface: #fff;
        --border: #ccc
    }

    body {
        background: #fff;
        color: #000
    }

    header,
    .print-actions,
    .to-top {
        display: none !important;
    }


    .sheet {
        /* Allow breaking across pages for long sheets */
        page-break-inside: auto;
        break-inside: auto;
        border: 1px solid #ddd;
    }

    .sheet+.sheet {
        page-break-before: always;
    }

    footer {
        display: none !important;
    }
}

/* Optional: narrow screens */
@media (max-width:680px) {
    .sheet {
        padding: 14px
    }
}

/* --- compact helpers (screen + print) --- */
.chart-table {
    font-size: 14px;
}

.chart-table th,
.chart-table td {
    padding: 6px 8px;
}

/* keep table rows intact if possible */
.chart-table tr {
    break-inside: avoid;
}

/* === PRINT: 1 page, filled nicely (Chrome/Edge) ===================== */
@media print {

    /* Paper + scaling */
    @page {
        size: Letter portrait;
        margin: 8mm;
    }

    /* a touch more breathing room */
    html,
    body {
        background: #fff;
        color: #000;
    }

    /* Bump scale up to use the page while still fitting on one sheet */
    body {
        zoom: .94;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Hide site chrome + cover */
    header,
    nav,
    .print-actions,
    .to-top,
    footer {
        display: none !important;
    }

    .sheet--cover {
        display: none !important;
    }

    /* Print masthead: place a small logo + site name at the top of the printed sheets */
    .print-masthead {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 10px;
        padding-bottom: 6px;
        border-bottom: 1px solid #ddd;
    }

    /* Use a larger, print-friendly logo. Also provide a more specific selector
       that overrides the smaller rule in site.css (.print-only .print-logo). */
    .print-masthead .print-logo {
        width: 160px;
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* Stronger override: container with both classes (higher specificity) */
    .print-only.print-masthead .print-logo {
        width: 160px;
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* Sheet + layout */
    .sheet {
    background: #fff;
    border: none !important;
    border-radius: 0 !important;
    padding: 10px; /* keep padding for spacing */
    margin: 0;
    page-break-inside: auto;
    break-inside: auto;
  }

    /* Make the charts BIGGER: go 2 columns instead of 3 */
    .chart-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* Length-specific: print-friendly, compact, no card decorations */
    .length-sheet .chart {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 6px !important;
        box-shadow: none !important;
    }

    /* Force conversion lines to remain on a single row where possible */
    .length-sheet .chart p,
    .length-sheet .chart li {
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        font-size: 10.5pt;
        margin: 2px 0;
    }

    /* Tighten vertical rhythm for printable length sheet */
    .length-sheet .chart h3 {
        font-size: 12pt;
        margin: 0 0 4px;
    }

    /* Make the prefixes table more compact */
    .length-sheet .chart-table th,
    .length-sheet .chart-table td {
        padding: 3px 6px;
        font-size: 9.5pt;
        border: 1px solid #ddd;
    }

    /* Slightly reduce overall scale for this sheet to try and fit a single page */
    .length-sheet {
        transform: scale(.95);
        transform-origin: top left;
    }

    /* Typography up a notch */
    .sheet-title {
        margin: 0 0 6px;
        font-size: 16px;
    }

    .sheet-lead {
        margin: 0 0 8px;
        font-size: 11px;
        color: #333;
    }

    .chart h3 {
        margin: 0 0 6px;
        font-size: 14px;
    }

    /* Tables: larger font & padding */
    .chart-table {
        font-size: 11.5px;
        border-collapse: collapse;
        width: 100%;
    }

    .chart-table th,
    .chart-table td {
        padding: 5px 7px;
        border: 1px solid #bbb;
    }

    .chart-table thead th {
        background: #f3f5f8;
    }

    .bullets {
        margin: 6px 0 8px;
    }

    .bullets li {
        margin: 3px 0;
    }

    .note {
        font-size: 10.5px;
        color: #444;
    }

    /* Keep table rows intact where possible */
    .chart-table tr {
        break-inside: avoid;
    }

    .chart,
    .sheet,
    .chart-grid {
        break-inside: avoid;
    }

    /* No forced page breaks between blocks */
    .sheet+.sheet {
        page-break-before: auto;
    }
}
/* Printable pages (shared) — relies on site.css theme tokens */
/* Tokens expected (from site.css):
   --bg, --fg, --muted, --card, --surface, --border, --accent, --text, --primary
*/

.panel {
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--border), transparent 20%);
  border-radius: 14px;
  padding: 16px;
}

/* Page blocks */
.sheet {
  padding: 10mm 8mm;
}

.heading-xl {
  font: 800 22pt/1.15 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--fg);
  margin: 0 0 4mm;
}

.kicker,
.section-title {
  color: var(--accent);
  font-weight: 800;
}

.kicker { margin: 0 0 2mm; font-size: 13pt; }
.section-title { margin: 0 0 2mm; font-size: 13pt; }

/* Layout — make charts larger */
.grid-2 {
  display: grid;
  grid-template-columns: 1.35fr 1fr; /* give the left/conversions side more room */
  gap: 10mm 12mm;
}

.grid-2-eq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6mm 8mm;
}

@media (max-width: 900px) {
  .grid-2, .grid-2-eq { grid-template-columns: 1fr; }
}

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6mm;
  box-shadow: none; /* keep low-contrast for dark mode */
}

/* Lists — force ONE LINE per bullet (no wrapping) for readability */
ul.clean {
  margin: 0;
  padding-left: 14px;
  list-style: disc;
}
ul.clean li {
  font-size: 12pt;          /* bigger */
  line-height: 1.35;
  color: var(--fg);
  white-space: nowrap;      /* stay on one line */
  overflow: hidden;         /* avoid overflow on tiny screens */
  text-overflow: ellipsis;  /* graceful if viewport is narrow */
  font-variant-numeric: tabular-nums;
}

/* “Muted” helper text (tips/notes) */
.tiny { font-size: 9.5pt; color: var(--muted); }

/* Tables (e.g., metric prefixes) */
table.clean { 
  width: 100%; 
  border-collapse: collapse; 
  font-size: 11.5pt; /* bigger */
  font-variant-numeric: tabular-nums;
}
table.clean th, table.clean td {
  border: 1px solid var(--border);
  padding: 6px 8px;
  color: var(--fg);
  white-space: nowrap; /* keep each row to one line */
}
table.clean th {
  background: color-mix(in oklab, var(--surface), #fff 6%); /* subtle in both themes */
  font-weight: 700;
}

/* === ONE-PAGE A4 COMPACT PRINT OVERRIDES =============================== */
@media print {
  /* Page + global text sizing */
  @page { size: A4 portrait; margin: 10mm; } /* a bit tighter than 12mm */
  html, body { font-size: 10.5pt; line-height: 1.25; }

  /* Optional WebKit “safety margin” to guarantee one page.
     If you still see 2–3 pages, lower to 0.90. */
  html { zoom: 0.94; } /* Chromium/WebKit only; harmless elsewhere */

  /* Compact the container */
  .sheet { padding: 6mm 6mm; }

  /* Give left column the space, but tighter gaps */
  .grid-2 { 
    grid-template-columns: 1.35fr 0.9fr; 
    gap: 5mm 6mm; 
  }
  .grid-2-eq { gap: 4mm 6mm; }

  /* Cards: thinner borders, smaller padding, no rounded corners to save space */
  @media print {
  .card {
    padding: 4mm;
    border: 0;          /* no border when printing */
    border-radius: 0;
    box-shadow: none !important;
    background: #fff;   /* crisp on paper */
  }
}


  /* Titles */
  .heading-xl   { font-size: 18pt; margin-bottom: 3mm; }
  .kicker       { font-size: 11.5pt; margin-bottom: 2mm; color: #000 !important; }
  .section-title{ font-size: 11.5pt; margin-bottom: 2mm; color: #000 !important; }

  /* Lists: keep one line per rule but a bit smaller to fit A4 */
  ul.clean li {
    font-size: 10.5pt;
    white-space: nowrap;
    margin: 1px 0;
  }

  /* Tables (metric prefixes) – compact row height */
  table.clean { font-size: 10.5pt; }
  table.clean th, table.clean td { 
    padding: 3px 5px; 
    border: 0.6px solid #000; 
    white-space: nowrap; 
  }
  table.clean th { background: #f2f2f2; }

  /* Print masthead/logo: keep, but shrink to save vertical space */
  .print-masthead { margin-bottom: 3mm !important; }
  .print-masthead .print-logo { height: 8mm !important; }

  /* Trim any extra chrome from the panel wrapper */
  .panel { border: 0.6px solid #000; padding: 8px; }

  /* Avoid accidental page breaks inside cards */
    .card { break-inside: avoid; }
}

/* --- Project-specific overrides for length printable layout --- */

/* Remove any inner panel/card borders so only the outer sheet border prints
     This keeps the printed page clean like the attached screenshot. */
.length-sheet .panel,
.length-sheet .card {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Desktop/print: two-column layout for charts (keeps the grid compact) */
.length-sheet .chart-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* Mobile: make each chart full width (one per row) for small screens */
@media (max-width: 680px) {
    .length-sheet .chart-grid {
        grid-template-columns: 1fr !important;
    }
    .length-sheet .chart {
        width: 100% !important;
        padding: 8px !important;
    }
}

/* Hide a possible third conversion initial so lines show only two inits (CSS fallback).
     This targets markup where conversion initials are wrapped in inline children.
     If markup differs, we can refine the selector after you share the exact HTML snippet. */
.length-sheet .chart .conversion span:nth-child(3) {
    display: none !important;
}

.two-column-list {
  columns: 2 2rem; /* 2 columns, 2rem gap */
  -webkit-columns: 2 2rem;
  -moz-columns: 2 2rem;
}
.two-column-list li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid; /* for older Safari */
}
.length-sheet .conversion-list  {
  padding-left: 0;
}
.length-sheet .conversion-list li {
  overflow-wrap: anywhere;
}
/* ===== Mobile fixes for long lines on printables (phones only) ===== */
@media (max-width: 520px) {
  /* Let the conversion lines wrap instead of overflowing */
  .length-sheet .chart p,
  .length-sheet .chart li {
    white-space: normal;          /* override earlier nowrap */
    overflow: visible;
    text-overflow: clip;
    word-break: normal;
    overflow-wrap: anywhere;      /* allow breaks inside long unit names */
    line-height: 1.35;
    font-size: 0.98rem;           /* a touch smaller on small screens */
  }

  /* One column per section on very small screens */
  .length-sheet .chart-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  /* Slightly tighter headings/padding so content breathes */
  .heading-xl { font-size: 1.4rem; }
  .length-sheet .chart { padding: 10px !important; }
}

  /* keep lines from overflowing on narrow screens */
  .two-col{
    display:grid;
    gap:16px;
    grid-template-columns:1fr;
  }
  @media (min-width:900px){
    .two-col{ grid-template-columns:1fr 1fr; }
  }
  .nowrap{ white-space:nowrap; }
  .table-wrap{ overflow:auto; }
  .basic{ width:100%; border-collapse:collapse; }
  .basic th, .basic td{ border:1px solid var(--border); padding:6px 8px; }
  .basic thead th{ background: color-mix(in oklab, var(--card), transparent 10%); }

/* ===== Pressure sheet tweaks ===== */
.sheet--pressure .two-col { display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width: 900px) {
  .sheet--pressure .two-col { grid-template-columns:1fr 1fr; }
}
/* avoid breaking any column block or table across pages */
.sheet--pressure .two-col > div,
.sheet--pressure .table-wrap,
.sheet--pressure table { break-inside: avoid; page-break-inside: avoid; }

/* compact type/spacing for this sheet */
.sheet--pressure h2 { margin:6px 0 8px; }
.sheet--pressure h3 { margin:8px 0 6px; }
.sheet--pressure ul  { margin:6px 0 8px; }
.sheet--pressure li  { margin:0; line-height:1.25; }

/* tighter table */
.sheet--pressure table.basic { font-size:12px; }
.sheet--pressure table.basic th,
.sheet--pressure table.basic td { padding:4px 6px; }

/* ===== Print: force everything onto one page ===== */
@media print {
  /* pick the paper size you use elsewhere; change to A4 if needed */
  @page { size: Letter; margin: 10mm; }

  .sheet--fit-one {
    /* scale down just the sheet so it fits */
    transform: scale(0.88);
    transform-origin: top left;
    width: calc(100% / 0.88); /* keep layout width correct after scaling */
  }

  /* small extra tighten at print */
  .sheet--pressure { font-size: 12.5px; line-height:1.3; }
}