/* =============================================================================
   Kverneland Energi — Data sheet design system
   Brand: Deep Teal (#315869) surfaces, Energy Yellow (#FFC107) accent only,
   Barlow type, Woodsmoke text on white. A4 portrait, print-exact.
============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800&display=swap');

:root{
  --teal:#315869;
  --teal-deep:#1f3e4a;
  --teal-deeper:#15303a;
  --teal-ink:#0e242c;
  --yellow:#FFC107;
  --white:#ffffff;
  --smoke:#171C1B;
  --ink-soft:#56666c;
  --paper:#ffffff;
  --hair:#e2e6e7;
  --hair-strong:#cfd5d6;
  --duo:#33596a;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:'Barlow',system-ui,sans-serif;color:var(--smoke);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}

/* ----------------------------------------------------------------------------
   THE SHEET  (A4 portrait, 210 × 297 mm)
---------------------------------------------------------------------------- */
.sheet{
  width:210mm;
  min-height:297mm;
  background:var(--paper);
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ---------- header band (Deep Teal) ---------- */
.sheet__head{
  background:var(--teal);
  color:#fff;
  padding:11mm 14mm 10mm;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  position:relative;
}
.sheet__head::after{ /* thin yellow rule under header */
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.4mm;background:var(--yellow);
}
.sheet__head .logo{height:11mm;display:block;}
.sheet__head .docmeta{text-align:right;display:flex;flex-direction:column;gap:2.5mm;align-items:flex-end;}
.sheet__head .kicker{
  font-size:9pt;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.82);white-space:nowrap;
}
.sheet__head .kicker b{color:var(--yellow);font-weight:600;}
.sheet__head .docyear{font-size:7.5pt;font-weight:600;letter-spacing:.3em;color:var(--yellow);text-transform:uppercase;
  border:1px solid rgba(255,255,255,.28);border-radius:1mm;padding:1mm 2.5mm;}

/* ---------- hero (title + image) ---------- */
.sheet__hero{
  display:grid;
  grid-template-columns:1fr 70mm;
  gap:10mm;
  padding:9mm 14mm 6mm;
  align-items:stretch;
}
.hero__text{display:flex;flex-direction:column;justify-content:center;}
.hero__eyebrow{
  font-size:8.5pt;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--teal);margin:0 0 3mm;
}
.hero__eyebrow .fam{color:var(--yellow);}
.hero__name{
  font-size:30pt;font-weight:700;line-height:.98;letter-spacing:-.015em;
  color:var(--teal-deeper);margin:0 0 3mm;
}
.hero__variant{font-size:11pt;font-weight:400;color:var(--ink-soft);line-height:1.35;margin:0;max-width:95%;}

.hero__media{
  position:relative;border-radius:3mm;overflow:hidden;
  background:linear-gradient(160deg,#33596a,#1f3e4a);
  border:1px solid var(--hair-strong);
  min-height:52mm;
  display:flex;align-items:center;justify-content:center;
}
.hero__media .photo{
  position:absolute;inset:0;width:100%;height:100%;
  filter:grayscale(1) contrast(1.08) brightness(1.04);
  mix-blend-mode:luminosity;
}
.hero__media.fit-cover .photo{object-fit:cover;}
.hero__media.fit-contain .photo{object-fit:contain;padding:7mm;mix-blend-mode:normal;filter:none;}
.hero__media .scrim{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 20%,rgba(49,88,105,0),rgba(14,36,44,.55));mix-blend-mode:multiply;}
.hero__media.fit-contain .scrim{display:none;}
.hero__media .seal{position:absolute;right:4mm;bottom:3.5mm;height:8mm;z-index:3;opacity:.92;}

/* ---------- highlight stat strip ---------- */
.sheet__stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:3mm;
  padding:0 14mm 6mm;
}
.stat{
  background:var(--teal-deeper);color:#fff;border-radius:2.5mm;
  padding:4.5mm 4.5mm 4mm;display:flex;flex-direction:column;gap:2.5mm;min-height:23mm;
}
.stat .num{font-size:18pt;font-weight:700;line-height:1;letter-spacing:-.02em;}
.stat .num .u{font-size:9.5pt;font-weight:600;color:var(--yellow);margin-left:1mm;letter-spacing:0;}
.stat .lbl{font-size:7.2pt;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);line-height:1.2;margin-top:auto;}

/* ---------- spec sections ---------- */
.sheet__body{flex:1;padding:5mm 14mm 4mm;}
.spec{
  --specfs:9.4pt;
  font-size:var(--specfs);
  columns:2;
  column-gap:9mm;
}
.spec__sec{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  display:inline-block;width:100%;
  margin:0 0 5.5mm;
}
.spec__sec h3{
  font-size:1.02em;font-weight:700;letter-spacing:.02em;color:var(--teal-deeper);
  text-transform:uppercase;margin:0 0 1.5mm;padding-bottom:1.4mm;
  border-bottom:1.5px solid var(--teal);
  display:flex;align-items:center;gap:2mm;
}
.spec__sec h3::before{content:"";width:2mm;height:2mm;background:var(--yellow);flex:0 0 auto;}
.spec__row{
  padding:1.7mm 0;border-bottom:1px solid var(--hair);
}
.spec__row:last-child{border-bottom:none;}
.spec__label{display:block;font-size:.76em;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4mm;}
.spec__val{display:block;font-weight:600;color:var(--smoke);line-height:1.22;}
.spec__val.tbc{color:#b3babb;font-weight:500;}

/* ---------- notes ---------- */
.sheet__notes{padding:0 14mm 4mm;}
.note{
  font-size:7.6pt;line-height:1.45;color:var(--ink-soft);
  border-left:1.5px solid var(--yellow);padding:0 0 0 3mm;margin:0 0 2mm;
}
.note.draft{color:#9a6b00;border-color:#e0a800;background:#fff8e6;padding:2mm 3mm;border-left-width:2px;}

/* ---------- footer band (Deep Teal) ---------- */
.sheet__foot{
  background:var(--teal-deeper);color:#fff;margin-top:auto;
  padding:6mm 14mm;display:flex;align-items:flex-end;justify-content:space-between;gap:8mm;position:relative;
}
.sheet__foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1.4mm;background:var(--yellow);}
.foot__contact{font-size:8pt;line-height:1.55;color:rgba(255,255,255,.82);}
.foot__contact .co{font-weight:700;color:#fff;letter-spacing:.01em;font-size:8.6pt;}
.foot__contact a{color:var(--yellow);text-decoration:none;}
.foot__doc{text-align:right;font-size:7pt;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);line-height:1.7;white-space:nowrap;}
.foot__doc b{color:rgba(255,255,255,.82);font-weight:600;}

/* draft ribbon */
.sheet[data-status="draft"] .draft-ribbon{display:block;}
.draft-ribbon{display:none;position:absolute;top:9mm;left:-22mm;transform:rotate(-45deg);
  background:#e0a800;color:#3a2a00;font-weight:700;font-size:8pt;letter-spacing:.3em;text-transform:uppercase;
  padding:1.5mm 24mm;z-index:20;box-shadow:0 1mm 3mm rgba(0,0,0,.2);}

/* ============================================================================
   SCREEN SHELL  (toolbar + scaling) — never printed
============================================================================ */
.screen-only{}
@media screen{
  body.viewer{background:#d9dbdc;margin:0;}
  .toolbar{
    position:fixed;top:0;left:0;right:0;height:54px;z-index:50;
    background:var(--teal-deeper);color:#fff;display:flex;align-items:center;gap:14px;
    padding:0 18px;box-shadow:0 2px 12px rgba(0,0,0,.25);
  }
  .toolbar .brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.02em;font-size:14px;}
  .toolbar .brand img{height:20px;}
  .toolbar .spacer{flex:1;}
  .toolbar a,.toolbar button{
    font-family:'Barlow',sans-serif;font-size:13px;font-weight:600;letter-spacing:.02em;
    color:#fff;text-decoration:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
    padding:8px 14px;border-radius:7px;cursor:pointer;transition:background .15s,transform .15s;display:inline-flex;align-items:center;gap:7px;
  }
  .toolbar a:hover,.toolbar button:hover{background:rgba(255,255,255,.2);transform:translateY(-1px);}
  .toolbar .cta{background:var(--yellow);color:var(--smoke);border-color:var(--yellow);}
  .toolbar .cta:hover{filter:brightness(1.05);background:var(--yellow);}
  .toolbar select{
    font-family:'Barlow',sans-serif;font-size:13px;font-weight:600;color:#fff;background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.18);border-radius:7px;padding:8px 10px;cursor:pointer;
  }
  .toolbar select option{color:#171C1B;}
  .stage{padding:78px 24px 60px;display:flex;justify-content:center;}
  .sheet{
    box-shadow:0 30px 70px -30px rgba(14,36,44,.6),0 2px 0 rgba(0,0,0,.04);
    transform-origin:top center;
  }
}

/* ============================================================================
   PRINT — exact A4, no chrome
============================================================================ */
@page{size:A4;margin:0;}
@media print{
  .toolbar{display:none !important;}
  body{background:#fff !important;}
  .stage{padding:0 !important;display:block !important;}
  .sheet{box-shadow:none !important;transform:none !important;width:210mm;min-height:297mm;}
  html,body{width:210mm;}
  .stat,.sheet__head,.sheet__foot,.hero__media{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}