/* Printed sheets: the spec sheet and the size guide.
   Both are laid out for A4 first and simply look the same on screen, so
   what someone sees before pressing print is what comes out. */

.sheet-bar{position:sticky;top:0;z-index:40;background:var(--surface);
  border-bottom:1px solid var(--line)}
.sheet-bar-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-block:12px}
.sheet-bar p{flex:1 1 220px;min-width:0;font-size:13.5px;color:var(--ink-faint)}
.sheet-bar p b{color:var(--ink)}

.sheet{max-width:820px;margin:26px auto 60px;
  padding:34px 38px 26px;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 34px rgba(0,0,0,.09);
  border-radius:3px;

  /* This is a sheet of paper, and paper does not have a dark mode. The
     theme tokens are redeclared here so everything inside the sheet —
     including the shared table and panel rules from app.css — stays on
     the light palette whatever the visitor's OS is set to. Without this
     the size table rendered light grey text on white at 1.1:1. */
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F2F5F5; --surface-3:#E9EEED;
  --ink:#14201F; --ink-soft:#394543; --ink-faint:#5F6A68;
  --line:#DDE3E2; --line-strong:#C3CCCA;
  --accent:#387F87; --accent-deep:#2A6168; --accent-ink:#1F4A50;
  --accent-soft:#E4EFF0; --on-accent:#FFFFFF;
  background:#fff;color:var(--ink)}
.sheet a{color:var(--accent-ink)}

/* app.css gives tables a 560px floor so wide data tables scroll rather than
   crush. These are three narrow columns and just need to fit the paper. */
.sheet table{min-width:0}

.sh-head{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;
  border-bottom:2px solid #14201F;padding-bottom:14px}
.sh-brand{display:flex;align-items:center;gap:11px}
.sh-brand b{display:block;font-family:var(--display);font-weight:800;font-size:15px;
  letter-spacing:.01em}
.sh-brand span{display:block;font-size:11px;color:#5F6A68;margin-top:1px}
.sh-title{margin-inline-start:auto;text-align:end}
.sh-title h1{font-size:30px;font-weight:800;letter-spacing:-.02em}
.sh-title h1 em{font-style:normal;font-size:17px;color:#5F6A68;font-weight:500}
.sh-title p{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.08em;
  color:#2A6168;margin-top:3px}

.sh-top{display:grid;grid-template-columns:210px minmax(0,1fr);gap:22px;
  padding-block:20px;border-bottom:1px solid #DDE3E2}
.sh-shot{margin:0;border:1px solid #DDE3E2;border-radius:3px;overflow:hidden;background:#F2F5F5}
.sh-shot img{width:100%;height:auto;display:block}
.sh-lede{font-size:14px;line-height:1.6;color:#394543;margin-bottom:12px}
.sh-tbl{width:100%;border-collapse:collapse;font-size:13px}
.sh-tbl th,.sh-tbl td{text-align:start;padding:5px 0;border-bottom:1px solid #EDF0EF;
  vertical-align:top}
.sh-tbl th{width:38%;color:#5F6A68;font-weight:600;white-space:nowrap}
.sh-tbl td{font-weight:500}
.sh-col{display:inline-flex;align-items:center;gap:5px;margin-inline-end:11px}
.sh-col i{width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.3)}

.sh-block{padding-block:18px;border-bottom:1px solid #DDE3E2}
.sh-block h2{font-size:15px;font-weight:800;margin-bottom:11px}
.sh-marks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sh-marks li{border:1px solid #DDE3E2;border-radius:3px;padding:9px 11px}
.sh-marks code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  font-weight:700;letter-spacing:.06em;background:#E4EFF0;color:#1F4A50;
  padding:1px 6px;border-radius:2px}
.sh-marks b{display:block;font-size:13px;margin-top:5px}
.sh-marks span{display:block;font-size:11.5px;color:#5F6A68;margin-top:2px;line-height:1.45}
.sh-marks .none{grid-column:1/-1;font-size:13px;color:#5F6A68;border-style:dashed}
.sh-feat{display:grid;grid-template-columns:1fr 1fr;gap:5px 18px}
.sh-feat li{position:relative;padding-inline-start:15px;font-size:13px;color:#394543}
.sh-feat li::before{content:"";position:absolute;inset-inline-start:3px;top:8px;
  width:5px;height:5px;border-radius:50%;background:#387F87}
.sh-note{margin-top:10px;padding:9px 12px;background:#F6E9DF;color:#8A4A20;
  border-radius:3px;font-size:12.5px}

.sh-foot{display:flex;flex-wrap:wrap;gap:14px;padding-top:14px;font-size:11.5px;
  color:#5F6A68;line-height:1.6}
.sh-foot b{color:#14201F}
.sh-meta{margin-inline-start:auto;text-align:end}

/* ---------- print ---------- */
@media print{
  @page{size:A4;margin:12mm}
  .no-print,.fabs,.a11y-panel,.head,.foot{display:none!important}
  body{background:#fff}
  .sheet{box-shadow:none;margin:0;padding:0;max-width:none;border-radius:0}
  .sh-block,.sh-top{break-inside:avoid}
  .sh-marks li{break-inside:avoid}
  a{text-decoration:none;color:#14201F}
}

@media (max-width:700px){
  .sheet{padding:20px 18px;margin:14px auto 40px}
  .sh-top{grid-template-columns:1fr}
  .sh-shot{max-width:230px}
  .sh-title{margin-inline-start:0;text-align:start}
  .sh-marks{grid-template-columns:1fr}
  .sh-feat{grid-template-columns:1fr}
}