/* ============================================================
   Metrici Datasheet — reusable stylesheet
   Link this file (plus the Google Fonts <link>) from any
   datasheet page, then drop the logo + drawing into /images.
   Palette mirrors the documentation: grey #2B2B2B + red #D32F2F.
   ============================================================ */

  :root{
    --ink:#222628;
    --ink-soft:#4b5158;
    --muted:#737b82;
    --line:#e6e8eb;
    --paper:#ffffff;
    --wall:#f4f4f5;
    --grey:#2B2B2B;          /* documentation sidebar grey */
    --grey-text:#ECEFF1;
    --grey-dim:#B0BEC5;
    --red:#D32F2F;           /* metrici red */
    --red-dark:#B71C1C;
    --sans:'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Courier New', monospace;
  }

  *{ box-sizing:border-box; }

  body{
    margin:0;
    background:var(--wall);
    color:var(--ink);
    font-family:var(--sans);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  .sheet{
    max-width:860px;
    margin:28px auto;
    background:var(--paper);
    border-radius:12px;
    box-shadow:0 6px 28px rgba(0,0,0,0.08);
    overflow:hidden;
  }

  /* ── Header band (the grey) ── */
  .ds-head{
    background:var(--grey);
    color:var(--grey-text);
    padding:20px 34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
  }
  .brand-logo{ height:38px; width:auto; display:block; border:0; border-radius:0; margin:0; }
  .head-meta{ text-align:right; }
  .head-meta .eyebrow{
    font-family:var(--mono); font-size:12px; font-weight:500;
    letter-spacing:.22em; color:var(--grey-dim); text-transform:uppercase;
  }
  .head-meta .rev{
    font-family:var(--mono); font-size:11px; color:#8b9197; margin-top:3px;
  }

  /* red accent rule echoing the docs' chapter divider */
  .accent{ height:3px; background:linear-gradient(90deg, var(--red), transparent); }

  /* ── Hero ── */
  .hero{ padding:26px 34px 4px; }
  .hero h1{ margin:0; font-size:30px; font-weight:700; color:var(--ink); letter-spacing:-.2px; }
  .hero .tagline{ margin:6px 0 0; font-size:15.5px; color:var(--muted); }

  /* ── Section eyebrow ── */
  .eyebrow-row{
    display:flex; align-items:center; gap:9px;
    font-family:var(--mono); font-size:11px; font-weight:500;
    letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
    margin:24px 0 12px;
  }
  .eyebrow-row::before{ content:""; width:18px; height:2px; background:var(--red); display:inline-block; }

  /* ── Spec list ── */
  .ds-body{ padding:6px 34px 2px; }
  .specs{ margin:0; }
  .spec{
    display:grid; grid-template-columns:200px 1fr; gap:18px;
    padding:11px 0; border-bottom:1px solid var(--line); align-items:start;
  }
  .spec:last-child{ border-bottom:none; }
  .spec{ break-inside:avoid; }                /* keep a row whole across page breaks */
  .eyebrow-row{ break-after:avoid; }          /* don't orphan a section heading */
  .spec .k{
    font-size:11px; font-weight:600; letter-spacing:.07em;
    text-transform:uppercase; color:var(--muted); padding-top:2px;
  }
  .spec .v{ margin:0; font-size:14.5px; color:var(--ink); line-height:1.55; }
  .spec .v .em{ color:var(--ink-soft); }

  .todo{
    display:inline-block; font-family:var(--mono); font-size:11px;
    color:var(--red-dark); background:#FDECEC; border:1px dashed var(--red);
    border-radius:5px; padding:1px 8px; letter-spacing:.02em;
  }

  /* ── Dimensions ── */
  .ds-dims{ padding:4px 34px 2px; }
  .dimfig{
    margin:0; background:#fafafb; border:1px solid var(--line);
    border-radius:10px; padding:14px;
  }
  .dimfig img{ display:block; width:100%; height:auto; border:0; border-radius:4px; margin:0; }
  .dimfig figcaption{
    font-family:var(--mono); font-size:11px; color:var(--muted);
    text-align:right; margin-top:9px;
  }

  /* product-photo variant: centred, not upscaled (vs. the full-width drawing) */
  .dimfig.product{ text-align:center; }
  .dimfig.product img{ width:auto; max-width:100%; max-height:380px; margin:0 auto; }

  /* photo gallery: several example shots in one card (white bg blends photos) */
  .dimfig.photos{ background:#fff; }
  .dimfig .photo-row{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; align-items:center; }
  .dimfig .photo-row img{ height:180px; width:auto; flex:0 0 auto; border:0; border-radius:6px; margin:0; }

  /* ── Footer ── */
  .ds-foot{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    margin-top:22px; padding:15px 34px; border-top:1px solid var(--line);
    font-family:var(--mono); font-size:11px; color:var(--muted);
  }
  .ds-foot a{ color:var(--muted); text-decoration:none; transition:color .15s; }
  .ds-foot a:hover{ color:var(--red); }

  /* ── Responsive ── */
  @media (max-width:640px){
    .sheet{ margin:0; border-radius:0; }
    .ds-head, .hero, .ds-body, .ds-dims, .ds-foot{ padding-left:20px; padding-right:20px; }
    .hero h1{ font-size:24px; }
    .brand-logo{ height:32px; }
    .spec{ grid-template-columns:1fr; gap:3px; }
    .spec .k{ padding-top:0; }
  }

  /* ── Print: one clean page, keep the brand colours ── */
  @media print{
    body{ background:#fff; }
    .sheet{ margin:0; max-width:none; border-radius:0; box-shadow:none; overflow:visible; }
    .dimfig{ break-inside:avoid; }
    *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    @page{ margin:14mm; }
  }

  /* ── Floating "Download as PDF" button (mirrors the docs language toggle) ── */
  .pdf-download{
    position:fixed; top:20px; right:30px; z-index:300;
  }
  .pdf-btn{
    width:36px; height:36px; border-radius:8px; border:none;
    background:var(--red); cursor:pointer; padding:0;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
    transition:background .2s, transform .2s, box-shadow .2s;
  }
  .pdf-btn:hover{
    background:var(--red-dark);
    transform:translateY(-3px);
    box-shadow:0 6px 16px rgba(0,0,0,0.2);
  }
  .pdf-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
  .pdf-btn .pdf-ico{ width:18px; height:18px; fill:#fff; display:block; }

  @media print{
    .pdf-download{ display:none !important; }
  }
  @media (max-width:640px){
    .pdf-download{ top:14px; right:16px; }
  }