/*
 * GOcontroll configuration datasheet and price overview: the look of the Datasheet Generator's
 * template ("Moduline M1 29110001 Datasheet.dc.html", 05-Moduline - Documenten\64-Datasheets),
 * ported from its inline styles to classes (the Configurator's CSP allows no inline style) and
 * scoped under .gc-datasheet so it never touches the page around it. House style (guide §6):
 * orange #e94f24, dark grey #3b3b3b, Noto Sans for text and headings (handbook p. 7; Verdana as
 * fallback), Roboto Slab only for the big numbers and the pin (and article) numbers, and the
 * house-style element of the GOcontroll handbook (2022, p. 8; the 2024 letterhead): two orange lines
 * along the right edge, each 4 mm (on screen 11 px) wide and 4 mm apart, flush with the edge, top to
 * bottom, nothing under them. Prints as A4 with the lines on every page. The fonts are vendored in
 * /fonts/ (scripts/vendor-fonts.mjs, OFL); the PDF inlines this file and its fonts
 * (src/datasheet/document.ts).
 */

@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/noto-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/noto-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/noto-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/noto-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/noto-sans-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Slab'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/roboto-slab-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Slab'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/roboto-slab-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Slab'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/roboto-slab-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Slab'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/roboto-slab-latin-700-normal.woff2') format('woff2'); }

.gc-datasheet {
  --gc-ds-orange: #e94f24;
  --gc-ds-orange-dark: #c63d18;
  --gc-ds-grey: #3b3b3b;
  --gc-ds-text: #5a5a5a;
  --gc-ds-muted: #8a8a8a;
  --gc-ds-line: rgba(59, 59, 59, 0.1);
  --gc-ds-card: #fbfaf9;
  --gc-ds-head: #f5f3f1;
  --gc-ds-sans: 'Noto Sans', Verdana, system-ui, sans-serif;
  --gc-ds-slab: 'Roboto Slab', Georgia, serif;
  /* The house-style lines: each line, and the gap between them (handbook: 11 px on screen). */
  --gc-ds-stripe: 11px;
  display: block;
  color: var(--gc-ds-grey);
  font-family: var(--gc-ds-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
  text-align: left;
  color-scheme: light;
}
.gc-datasheet *, .gc-datasheet *::before, .gc-datasheet *::after { box-sizing: border-box; }
.gc-datasheet a { color: var(--gc-ds-orange); text-decoration: none; }
.gc-datasheet a:hover { color: var(--gc-ds-orange-dark); text-decoration: underline; }
:where(.gc-datasheet) p { margin: 0; }
:where(.gc-datasheet) table { width: 100%; border-collapse: collapse; }
:where(.gc-datasheet) img { max-width: 100%; }

/* Inside the Configurator page, its stylesheet styles the bare elements of the app: main (negative
   top margin that overlaps the hero, grid, gap, max-width), footer (centred, bordered, hidden in
   print), and a universal margin/padding reset. The datasheet's own main, header and footer undo
   what would leak in, with selectors more specific than an element selector. */
.gc-datasheet .gc-ds-main, .gc-datasheet .gc-ds-header, .gc-datasheet .gc-ds-footer {
  flex: none; width: auto; max-width: none; margin: 0; position: static; grid-template-columns: none; align-content: normal;
}
.gc-datasheet .gc-ds-main, .gc-datasheet .gc-ds-header { display: block; }
.gc-datasheet .gc-ds-footer { border: 0; text-align: left; font-size: inherit; }

.gc-ds-sheet {
  position: relative;
  padding-right: calc(3 * var(--gc-ds-stripe));
  max-width: 1060px;
  margin: 0 auto;
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  overflow: hidden;
}
/* The two lines on screen: flush with the sheet's right edge, its full height, in the band the
   sheet keeps free (padding-right), so the dark header and footer end at the inner line. Borders,
   as the Datasheet Generator's template (.gc-lines). In print the page draws them (@page below). */
.gc-ds-edge {
  position: absolute; top: 0; right: 0; bottom: 0; width: calc(3 * var(--gc-ds-stripe)); pointer-events: none;
  border-left: var(--gc-ds-stripe) solid var(--gc-ds-orange); border-right: var(--gc-ds-stripe) solid var(--gc-ds-orange);
}

/* ── Header ───────────────────────────────────────────────────────────── */
.gc-ds-header { background: var(--gc-ds-grey); color: #ffffff; padding: 34px 46px 40px; }
.gc-ds-header-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.gc-ds-logo { height: 68px; width: auto; display: block; }
.gc-ds-meta { text-align: right; font-size: 11px; color: #b9b9b9; line-height: 1.7; }
.gc-ds-meta-title { font-weight: 600; color: #ffffff; letter-spacing: 1px; font-size: 12px; }
.gc-ds-meta-strong { color: #ffffff; font-weight: 600; }
.gc-ds-hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px; align-items: end; margin-top: 30px; }
.gc-ds-kicker { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gc-ds-orange); font-weight: 600; }
.gc-ds-h1 { font-family: var(--gc-ds-sans); font-weight: 700; font-size: 44px; line-height: 1.02; margin: 10px 0 0; color: #ffffff; }
.gc-ds-summary { font-size: 15px; color: #d5d5d5; margin-top: 10px; font-weight: 500; }
.gc-ds-tagline { font-size: 13.5px; line-height: 1.6; color: #b9b9b9; margin: 16px 0 0; max-width: 46ch; }
.gc-ds-photo { height: 210px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); }
.gc-ds-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── Sections ─────────────────────────────────────────────────────────── */
.gc-ds-main { padding: 44px 46px 20px; }
.gc-ds-section { margin-bottom: 48px; }
.gc-ds-section--pinout { margin-bottom: 40px; }
.gc-ds-eyebrow { margin-bottom: 8px; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gc-ds-muted); font-weight: 600; }
.gc-ds-h2 { font-family: var(--gc-ds-sans); font-size: 26px; font-weight: 600; color: var(--gc-ds-grey); margin: 0 0 6px; line-height: 1.2; }
.gc-ds-h2--spaced { margin-bottom: 22px; }
.gc-ds-h3 { font-family: var(--gc-ds-sans); font-size: 17px; font-weight: 600; color: var(--gc-ds-grey); margin: 22px 0 4px; }
.gc-ds-intro { font-size: 14px; line-height: 1.6; color: var(--gc-ds-text); margin: 0 0 20px; max-width: 74ch; }
.gc-ds-intro--small { font-size: 13px; }
.gc-ds-group-intro { font-size: 13px; line-height: 1.55; color: var(--gc-ds-text); margin: 0 0 12px; max-width: 74ch; }
.gc-ds-overview { font-size: 15px; line-height: 1.66; color: #454545; max-width: 74ch; text-wrap: pretty; }
.gc-ds-overview strong { color: var(--gc-ds-grey); }
.gc-ds-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.gc-ds-cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: start; }

/* ── Key capabilities ─────────────────────────────────────────────────── */
.gc-ds-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gc-ds-card { border: 1px solid rgba(59, 59, 59, 0.13); border-radius: 11px; padding: 20px; background: var(--gc-ds-card); }
.gc-ds-card-big { font-family: var(--gc-ds-slab); font-size: 30px; font-weight: 700; color: var(--gc-ds-orange); line-height: 1; }
.gc-ds-card-label { font-size: 14px; font-weight: 700; color: var(--gc-ds-grey); margin-top: 8px; }
.gc-ds-card-sub { font-size: 12px; color: #787878; margin-top: 4px; line-height: 1.5; }

/* ── Spec tables (the header row is the block title) ──────────────────── */
.gc-ds-spec { font-size: 13px; }
.gc-ds-spec thead th {
  text-align: left; padding: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--gc-ds-grey);
  text-transform: uppercase; letter-spacing: 1px; border: 0;
}
.gc-ds-spec--accent thead th { color: var(--gc-ds-orange); }
.gc-ds-spec tbody th {
  padding: 8px 12px 8px 0; border-bottom: 1px solid var(--gc-ds-line); font-weight: 600; color: var(--gc-ds-grey);
  width: 44%; vertical-align: top; text-align: left;
}
.gc-ds-spec tbody td { padding: 8px 0; border-bottom: 1px solid var(--gc-ds-line); color: var(--gc-ds-text); line-height: 1.45; vertical-align: top; }
.gc-ds-spec--small { font-size: 12.5px; }
.gc-ds-spec--small tbody th { padding: 7px 10px 7px 0; width: 42%; }
.gc-ds-spec--small tbody td { padding: 7px 0; }

/* ── Applications ─────────────────────────────────────────────────────── */
.gc-ds-apps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.gc-ds-app { border: 1px solid rgba(59, 59, 59, 0.13); border-radius: 11px; padding: 18px 20px; background: var(--gc-ds-card); }
.gc-ds-app-title { font-family: var(--gc-ds-sans); font-size: 16px; font-weight: 600; color: var(--gc-ds-grey); margin: 0; }
.gc-ds-app p { margin: 9px 0 0; font-size: 13px; line-height: 1.55; color: var(--gc-ds-text); }

/* ── Pinout: one table per connector, two side by side ─────────────────── */
.gc-ds-conns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 26px; align-items: start; }
.gc-ds-pins { font-size: 12px; }
.gc-ds-pins caption, .gc-ds-conn-title {
  caption-side: top; text-align: left; font-size: 12px; font-weight: 700; color: var(--gc-ds-orange);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; padding: 0;
}
.gc-ds-pins thead th {
  text-align: left; padding: 7px 8px; background: var(--gc-ds-head); color: var(--gc-ds-grey); font-weight: 700;
  font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase; border-bottom: 2px solid var(--gc-ds-orange);
}
.gc-ds-pins td, .gc-ds-pins tbody th {
  padding: 5px 8px; border-bottom: 1px solid rgba(59, 59, 59, 0.09); color: var(--gc-ds-text); vertical-align: top;
  text-align: left; font-weight: 400;
}
.gc-ds-pins td.gc-ds-sig { font-weight: 600; color: var(--gc-ds-grey); white-space: nowrap; }
.gc-ds-pins th.gc-ds-pin { width: 1%; font-family: var(--gc-ds-slab); font-weight: 600; color: var(--gc-ds-orange); white-space: nowrap; }
.gc-ds-conn-none { font-size: 12.5px; color: var(--gc-ds-muted); }

/* ── Configuration note ───────────────────────────────────────────────── */
.gc-ds-note { margin-bottom: 14px; border-top: 1px solid rgba(59, 59, 59, 0.13); padding-top: 20px; }
.gc-ds-note p { font-size: 11.5px; line-height: 1.6; color: var(--gc-ds-muted); max-width: 88ch; }
.gc-ds-note strong { color: #6b6b6b; }

/* ── Footer: the logo with "Modular Embedded Electronics" (diapositive, for the dark background,
   as in the header), the address. 160 px wide as in the template (handbook minimum: 100 px on
   screen, 35 mm in print); in print 200 px, which the 80 % below makes the template's 160 px:
   artwork ≈ 39 mm. ─ */
.gc-ds-footer {
  background: var(--gc-ds-grey); color: #c9c9c9; padding: 26px 46px; display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 16px;
}
.gc-ds-footer-logo { width: 160px; height: auto; display: block; flex: none; }
.gc-ds-footer-address { font-size: 11.5px; line-height: 1.6; text-align: right; }

/* ── Price overview ───────────────────────────────────────────────────── */
.gc-q-hero { margin-top: 30px; }
.gc-q-section { margin-bottom: 30px; }
.gc-q-table { font-size: 12.5px; }
.gc-q-table caption {
  caption-side: top; text-align: left; font-size: 12px; font-weight: 700; color: var(--gc-ds-orange);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; padding: 0;
}
.gc-q-table thead th {
  text-align: left; padding: 7px 8px; background: var(--gc-ds-head); color: var(--gc-ds-grey); font-weight: 700;
  font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase; border-bottom: 2px solid var(--gc-ds-orange);
}
.gc-q-table td { padding: 7px 8px; border-bottom: 1px solid rgba(59, 59, 59, 0.09); color: var(--gc-ds-text); vertical-align: top; }
.gc-q-table tfoot th, .gc-q-table tfoot td { padding: 9px 8px; font-weight: 700; color: var(--gc-ds-grey); text-align: right; border-bottom: 0; }
.gc-q-table .gc-q-num { text-align: right; white-space: nowrap; }
.gc-q-table .gc-q-article { font-family: var(--gc-ds-slab); font-weight: 600; color: var(--gc-ds-orange); white-space: nowrap; }
/* Delivery: one cell over the controller's lines (rowspan), one per accessory. */
.gc-q-table .gc-q-delivery { white-space: nowrap; border-left: 1px solid rgba(59, 59, 59, 0.09); }
.gc-q-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border: 1px solid rgba(59, 59, 59, 0.13);
  border-radius: 11px; padding: 18px 20px; background: var(--gc-ds-card); margin-bottom: 18px;
}
.gc-q-total-label { font-size: 14px; font-weight: 700; color: var(--gc-ds-grey); }
.gc-q-total-value { font-family: var(--gc-ds-slab); font-size: 26px; font-weight: 700; color: var(--gc-ds-orange); }
.gc-q-note { font-size: 11.5px; line-height: 1.6; color: var(--gc-ds-muted); max-width: 88ch; margin-bottom: 14px; }

/* ── Phones (360 px without horizontal scroll); screen only: an A4 page is about as narrow ─ */
@media screen and (max-width: 760px) {
  .gc-ds-header { padding: 24px 18px 26px; }
  .gc-ds-header-top { flex-wrap: wrap; gap: 12px 24px; }
  .gc-ds-logo { height: 44px; }
  .gc-ds-meta { margin-left: auto; }
  .gc-ds-meta > div { white-space: nowrap; }
  .gc-ds-hero { grid-template-columns: 1fr; gap: 20px; margin-top: 22px; }
  .gc-ds-h1 { font-size: 34px; }
  .gc-ds-photo { height: 180px; }
  .gc-ds-main { padding: 28px 18px 12px; }
  .gc-ds-section { margin-bottom: 34px; }
  .gc-ds-cols2, .gc-ds-cols3, .gc-ds-apps, .gc-ds-conns { grid-template-columns: 1fr; gap: 18px; }
  .gc-ds-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gc-ds-card { padding: 14px; }
  .gc-ds-card-big { font-size: 24px; }
  .gc-ds-h2 { font-size: 22px; }
  .gc-ds-footer { padding: 20px 18px; }
  .gc-ds-footer-address { text-align: left; }
  .gc-ds-pins, .gc-q-table { font-size: 11px; }
  .gc-ds-pins td, .gc-ds-pins th, .gc-q-table td, .gc-q-table thead th { padding: 5px 4px; }
  .gc-ds-spec tbody td, .gc-ds-pins td, .gc-q-table td { overflow-wrap: anywhere; }
}
/* A phone: the band would take a tenth of the width, and the handbook allows the lines only at
   11 px, so on a screen this narrow they are left out (print and the PDF always have them). */
@media screen and (max-width: 480px) {
  .gc-ds-sheet { padding-right: 0; }
  .gc-ds-edge { display: none; }
}

/* ── The PDF document (src/datasheet/document.ts) and printing ────────── */
.gc-ds-document { margin: 0; padding: 0; background: #ffffff; }
.gc-ds-document .gc-ds-sheet { box-shadow: none; border-radius: 0; max-width: none; }

/* A4 with 12 mm margins. The right margin is the band of the lines (x 198–202 and 206–210 mm,
   y 0–297 mm, as on the letterhead), and nothing of the document can reach under them. Printing
   from the browser (Print, Ctrl+P), the page's own margin boxes draw them: on every page, from the
   top to the bottom edge of the paper, flush right. Borders, not backgrounds: they print with
   "Background graphics" off too. The same technique as the Datasheet Generator's template; margin
   boxes need Chrome / Edge 131 or later (older ones print the document without the lines). The
   downloaded PDFs do not depend on that: the Worker stamps the lines into them with pdf-lib
   (src/pdf.ts) and switches these boxes off in the PDF document (PDF_PAGE_CSS in
   src/datasheet/document.ts), so they are never drawn twice. The colour is the value of
   --gc-ds-orange: a page box does not inherit the tokens of .gc-datasheet. Not a named page:
   Chrome 126 (seen in the PDF check) breaks the page at every table part inside one. This
   stylesheet is on every page of the Configurator, so its other printouts (the Price tab) get the
   same A4 page and lines. */
@page {
  size: A4;
  margin: 12mm;
  /* Alone in the right column, @right-middle takes its whole height; the corners reach 1 mm into
     it, so no hairline seam shows where the boxes meet. */
  @top-right-corner { content: ""; border-left: 4mm solid #e94f24; border-right: 4mm solid #e94f24; margin-bottom: -1mm; }
  @right-middle { content: ""; border-left: 4mm solid #e94f24; border-right: 4mm solid #e94f24; }
  @bottom-right-corner { content: ""; border-left: 4mm solid #e94f24; border-right: 4mm solid #e94f24; margin-top: -1mm; }
}
@media print {
  /* The page's print stylesheet hides every footer element (!important): not the datasheet's. */
  .gc-datasheet footer.gc-ds-footer { display: flex !important; }
  .gc-ds-sheet {
    box-shadow: none !important; margin: 0 !important; width: 100% !important; max-width: none !important; border-radius: 0 !important;
    padding-right: 0 !important;
  }
  .gc-ds-edge { display: none !important; }
  .gc-ds-footer-logo { width: 200px; }
  /* The template's layout on an A4 page (186 mm ≈ 703 px between the margins, so the dark header
     and footer end at the inner line), at 80 % (≈ 880 px): scaled, so the two- and three-column
     blocks stay as they are on screen. */
  .gc-datasheet { -webkit-print-color-adjust: exact; print-color-adjust: exact; zoom: 0.8; }
  .gc-ds-avoid, .gc-ds-card, .gc-ds-app, .gc-ds-pins tr, .gc-ds-spec tr { break-inside: avoid; }
  .gc-ds-h2, .gc-ds-h3, .gc-ds-eyebrow { break-after: avoid; }
  /* The pinout on a page of its own (its connector tables fill one), the footer not alone. */
  .gc-ds-section--pinout { break-before: page; }
  .gc-datasheet .gc-ds-footer { break-before: avoid; break-inside: avoid; }
}