/* Framecastic datasheets on screen: the same showroom as the rest of the site.
   Loaded only by the framecastic brand (tools/brands.py web_layer). Everything
   here is inside @media screen, so printing still gives the A4 sheet that
   tools/datasheet-head.html lays out, and the injected site chrome is hidden. */

@media print {
  /* the site around the sheet does not print */
  .site-header, .site-header + script, .ds-actions, footer.site-footer { display: none !important; }

  /* The printed sheet in the showroom style, A4. Literal colours: the site's
     custom properties live in _style.css, which is screen-only. */
  @page { size: A4; margin: 0; }
  body { font-family: 'Archivo', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; color: #10171f; background: #fff; font-size: 8.4pt; }

  .top-bar {
    background: #0a1119 !important; color: #f3f6f9; text-align: center;
    padding: 11mm 14mm 0 !important; display: flex; flex-direction: column; align-items: center;
  }
  .top-bar::after, .top-bar .brand { display: none !important; }
  .top-bar .doc-type { position: static; order: -1; margin-bottom: 2.5mm; font-size: 8.5pt; font-weight: 600;
                       color: #38bdf8; text-transform: none; letter-spacing: 0; background: none; border: 0; padding: 0; }
  .top-bar h1 { font-size: 28pt; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; color: #f3f6f9; }
  .top-bar .subtitle { font-size: 10.5pt; color: #aab6c2; margin-top: 2mm; text-transform: none; letter-spacing: 0; font-weight: 400; }

  .ds-shot {
    display: flex !important; justify-content: center; padding: 5mm 14mm 3mm;
    background: linear-gradient(180deg, #0a1119 0%, #0a1119 58%, #ffffff 58%) !important;
  }
  .ds-shot img { max-height: 44mm; max-width: 150mm; width: auto; height: auto; }

  .hero-strip { background: #fff !important; display: flex; justify-content: center; gap: 4mm 10mm; flex-wrap: wrap;
                padding: 2mm 14mm 6mm !important; border: 0 !important; }
  .hero-strip .kpi { text-align: center; padding: 0; }
  .hero-strip .kpi .value { font-size: 14pt; font-weight: 600; letter-spacing: -0.02em; color: #10171f; }
  .hero-strip .kpi .label { font-size: 7pt; color: #737e8a; text-transform: none; letter-spacing: 0; font-weight: 400; margin-top: .6mm; }
  .hero-strip .kpi-divider { display: none; }

  .content { padding: 0 12mm 4mm !important; }
  .intro { font-size: 9.5pt; line-height: 1.45; color: #444f5b; text-align: center; max-width: 160mm; margin: 0 auto 4mm; }
  .signal-flow, .two-col .col, .matrix {
    background: #f4f5f7 !important; border: 0 !important; border-radius: 3.5mm; padding: 4mm 4.5mm !important;
  }
  .signal-flow { margin-bottom: 3mm; }
  .signal-flow .flow-title { font-size: 8pt; font-weight: 600; color: #737e8a; text-transform: none; letter-spacing: 0; }
  /* Stacked, not side by side: Chrome will not split a flex or grid item across
     a page, so two tall columns pushed each other onto page 2 and left half of
     page 1 empty. A block splits where the page ends. */
  .two-col { display: block !important; margin: 0 !important; }
  .two-col .col { display: block; width: auto !important; margin: 0 0 3mm; }
  .two-col .col[style*="100%"] { grid-column: 1 / -1; }
  h2 { font-size: 10.5pt; font-weight: 600; text-transform: none; letter-spacing: -0.01em; color: #10171f;
       border: 0 !important; padding: 0 !important; margin: 0 0 2mm !important; background: none !important; }
  .col .specs-table + h2 { margin-top: 3.5mm !important; }
  .features li { font-size: 8pt; line-height: 1.4; }
  .specs-table td { background: none !important; border-bottom: 0.4pt solid #dde1e6; padding: 1.3mm 0; font-size: 7.8pt; vertical-align: top; }
  .specs-table tr:last-child td { border-bottom: 0; }
  .specs-table .param { font-weight: 600; color: #10171f; padding-right: 3mm; }
  .specs-table .val { color: #444f5b; }
  .variants figure { background: #fff; border-radius: 2.5mm; padding: 3mm; text-align: center; }
  .variants img { max-height: 40mm; width: auto !important; max-width: 100%; }
  .variants figcaption { color: #737e8a; }
  .matrix { border-collapse: separate; margin: 0 0 3mm; }
  .matrix th, .matrix td { border: 0 !important; border-bottom: 0.4pt solid #dde1e6 !important; }
  .matrix thead th { background: none !important; color: #737e8a; text-transform: none; letter-spacing: 0; }
  .matrix tbody th { background: none !important; }

  /* long columns flow on to the next page; short blocks (the flow diagram, a
     figure, a table row) still stay whole */
  .two-col, .two-col .col { break-inside: auto !important; page-break-inside: auto !important; }
  .specs-table tr, .features li, .variants figure { break-inside: avoid; }
  .footer { background: #0a1119 !important; color: #aab6c2; padding: 4mm 14mm !important; border: 0; }
  .footer .company { color: #f3f6f9; font-weight: 600; }
  .footer a { color: #f3f6f9; }
}

@media screen {
  /* The datasheets are dark on screen while the rest of the site is light
     (Mario, 30.9.2026): the site's light tokens are overridden here only. */
  :root {
    --floor: #0e1720; --floor-2: #131e2a; --line: #233346;
    --ink: #eef3f8; --ink-mid: #aebbc8; --ink-dim: #7e8c9b; --brand-ink: #38bdf8;
  }
  .btn--ghost { background: rgba(255,255,255,.1); color: var(--ink); }
  .btn--ghost:hover { background: rgba(255,255,255,.17); }
  .mm-pic img { filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
  body {
    width: auto; min-height: 0; margin: 0; display: block;
    font-family: 'Archivo', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--floor);
  }

  /* hero: the dark stage */
  .top-bar {
    background: radial-gradient(70% 90% at 50% 100%, var(--stage-2) 0%, var(--stage) 75%);
    color: var(--stage-fg); text-align: center; padding: 80px 16px 8px; overflow: visible;
  }
  .top-bar::after, .top-bar .brand { display: none; }
  .top-bar .doc-type {
    position: static; display: inline-block; order: -1; margin-bottom: 16px;
    font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none;
    color: #38bdf8; background: none; border: 0; padding: 0;
  }
  .top-bar h1 { font-size: clamp(38px, 5.4vw, 72px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; color: var(--stage-fg); }
  .top-bar .subtitle { font-size: clamp(17px, 1.6vw, 21px); color: var(--stage-mid); margin-top: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; }
  .top-bar { display: flex; flex-direction: column; align-items: center; }

  .ds-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
  .ds-actions .btn { min-width: 200px; }
  .ds-actions button.btn { font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }

  .ds-shot {
    background: linear-gradient(180deg, var(--stage) 0%, var(--stage) 62%, var(--floor-2) 62%);
    display: flex; justify-content: center; padding: 40px 16px 8px;
  }
  .ds-shot img { max-width: min(920px, 100%); max-height: 380px; width: auto; height: auto; filter: drop-shadow(0 34px 38px rgba(0,0,0,.45)); }

  /* the key figures, as on the showroom scenes */
  .hero-strip {
    background: var(--floor-2); color: var(--ink); display: flex; flex-wrap: wrap;
    justify-content: center; gap: 18px clamp(28px, 5vw, 80px); padding: 32px 16px 56px; border: 0;
  }
  .hero-strip .kpi { text-align: center; padding: 0; flex: 0 0 auto; }
  .hero-strip .kpi .value { font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); line-height: 1.15; }
  .hero-strip .kpi .label { font-size: 14px; color: var(--ink-dim); text-transform: none; letter-spacing: 0; margin-top: 4px; font-weight: 400; }
  .hero-strip .kpi-divider { display: none; }

  /* the sheet itself */
  .content { max-width: 1120px; margin: 0 auto; padding: 72px 16px 32px; }
  .intro { font-size: clamp(18px, 1.7vw, 22px); color: var(--ink-mid); max-width: 62ch; margin: 0 auto 48px; text-align: center; line-height: 1.5; }
  .signal-flow, .two-col .col {
    background: var(--floor-2); border: 0; border-radius: 18px; padding: 28px 30px;
  }
  .signal-flow { margin-bottom: 16px; }
  .signal-flow .flow-title { font-size: 15px; font-weight: 600; color: var(--ink-dim); text-transform: none; letter-spacing: 0; margin-bottom: 16px; }
  .signal-flow .flow-box { font-size: 14px; border-radius: 10px; padding: 10px 12px; }
  .signal-flow .flow-box small { font-size: 12.5px; }
  .signal-flow .flow-lane { font-size: 12px; }
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 16px !important; }
  .two-col .col { min-width: 0; }
  .two-col .col[style*="100%"] { grid-column: 1 / -1; }
  h2 {
    font-size: 22px; font-weight: 600; letter-spacing: -0.01em; text-transform: none;
    color: var(--ink); border: 0; padding: 0; margin: 0 0 14px !important; background: none;
  }
  .col h2 + .specs-table, .col h2 + .features { margin-top: 0; }
  .col .specs-table + h2 { margin-top: 26px !important; }
  .features li { font-size: 15.5px; line-height: 1.5; margin-bottom: 8px; }
  .specs-table { font-size: 15px; }
  .specs-table td { padding: 9px 0; border-bottom: 1px solid var(--line); background: none !important; vertical-align: top; }
  .specs-table tr:last-child td { border-bottom: 0; }
  .specs-table .param { font-weight: 600; color: var(--ink); width: 36%; padding-right: 14px; }
  .specs-table .val { color: var(--ink-mid); }
  .col p[style] { font-size: 14px !important; color: var(--ink-dim) !important; margin-top: 12px !important; }
  .variants { display: grid; gap: 16px; }
  .variants figure { background: radial-gradient(80% 90% at 50% 55%, #1b2a3a 0%, var(--floor) 80%); border-radius: 14px; padding: 24px; text-align: center; }
  .matrix th, .matrix td { border-color: var(--line) !important; color: var(--ink-mid); }
  .matrix thead th { background: none !important; color: var(--ink-dim) !important; }
  .matrix tbody th { background: none !important; color: var(--ink) !important; }
  .features li, .intro strong, .col strong { color: inherit; }
  .features li { color: var(--ink-mid); }
  .variants img { max-width: 100%; height: auto; }
  .variants figcaption { font-size: 14px; color: var(--ink-dim); margin-top: 10px; }
  .matrix { display: block; overflow-x: auto; font-size: 13px; background: var(--floor-2); border-radius: 18px; padding: 20px; margin: 0 0 16px; }
  .matrix th, .matrix td { padding: 7px 9px; }
  .matrix thead th { font-size: 12px; text-transform: none; letter-spacing: 0; }
  .matrix-note { font-size: 13px; }

  /* the sheet's own legal footer, then the site's */
  .footer {
    max-width: 1120px; margin: 0 auto; padding: 8px 16px 56px; background: none; color: var(--ink-dim);
    display: flex; gap: 12px 28px; flex-wrap: wrap; font-size: 13px; border: 0;
  }
  .footer .legal { font-size: 13px; text-align: left; flex: 1 1 100%; order: 3; }
  .footer .company { font-weight: 600; color: var(--ink); }

  .top-bar .btn--ghost { background: rgba(255,255,255,.12); color: var(--stage-fg); border: 0; }
  .top-bar .btn--ghost:hover { background: rgba(255,255,255,.2); }
  .specs-table td, .specs-table .param, .specs-table .val { font-size: 15px; line-height: 1.5; }
  .signal-flow .flow-lane { width: auto; min-width: 72px; flex: 0 0 auto; white-space: nowrap; overflow: visible; }

  @media (max-width: 820px) {
    .intro { text-align: left; }
    .two-col { grid-template-columns: 1fr; }
    .signal-flow .flow-diagram { flex-wrap: wrap; }
    .top-bar { padding-top: 56px; }
  }
}