/* Container dimensions reference page. Builds on style.css (same tokens, system fonts only). */
.docsheet .titleblock{grid-template-columns:1fr 190px 190px}
.docsheet h1 span{font-size:19px}
.doc-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 22px;border-bottom:1px solid var(--rule)}
.doc-bar .btn{display:inline-flex;align-items:center;text-decoration:none}
.doc-bar p{margin:0 0 0 auto;max-width:62ch;font-size:13px;color:var(--ink2)}

.glance{padding:18px 22px 8px}
.glance h2{margin:0 0 10px;font-size:20px}
.glance-t{font-size:15px}
.glance-t th,.glance-t td{border-bottom:1px solid var(--hair);padding:10px 10px;text-align:left;vertical-align:top}
.glance-t thead th{background:var(--tint);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.glance-t thead small{display:block;font:500 12px var(--mono);letter-spacing:0;text-transform:none}
.glance-t tbody th{min-width:150px}
.glance-t tbody th a{font-size:17px;font-weight:700;color:var(--ink);text-decoration:none}
.glance-t tbody th a:hover{text-decoration:underline}
.glance-t small{display:block;font-size:13px;font-weight:500;color:var(--ink2)}
.glance-t td b{font:600 15px var(--mono);white-space:nowrap}
.glance-t td small{font-family:var(--mono);font-size:12px;white-space:nowrap}
.glance-t td.src{font-size:13px;color:var(--ink2);min-width:120px}
.glance-t td.go a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border:1px solid var(--ink);color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap}
.glance-t td.go a:hover{background:var(--ink);color:#fff}
.glance-t tbody tr:target{background:#fff8d6}
.glance .note{margin:12px 0 8px}

/* type cards */
.spec{border:1px solid var(--rule);margin:18px 0 24px;scroll-margin-top:12px}
.spec:target{outline:3px solid var(--blue);outline-offset:2px}
.spec-h{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--ink);color:#fff}
.spec-h h3{margin:0;font-size:21px}
.spec-h h3 span{font-size:15px;font-weight:500;color:#c9d6e6;margin-left:6px}
.spec-h .btn{display:inline-flex;align-items:center;text-decoration:none;border-color:#fff;background:#fff;color:var(--ink);font-size:14px}
.spec-h .btn:hover{background:var(--tint)}
.ref .spec-src{margin:0;padding:10px 16px;font-size:14px;color:var(--ink2);border-bottom:1px solid var(--hair);max-width:none}
.spec .table-wrap{padding:0 16px}
.kv{font-size:15px;margin:8px 0}
.kv th,.kv td{border-bottom:1px solid var(--hair);padding:8px 10px 8px 0;text-align:left;vertical-align:top}
.kv thead th{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.kv tbody th{font-weight:600;width:28%}
.kv td{font-family:var(--mono);font-size:14px}
.kv td b{font-size:15px}
.kv td small{font-family:var(--sans);color:var(--ink2)}
.spec .note{padding:0 16px;margin:6px 0 10px}
.compare{border-top:1px solid var(--hair)}
.compare summary{cursor:pointer;padding:10px 16px;min-height:44px;font-weight:600;display:flex;align-items:center}
.compare summary:hover{background:var(--tint)}
.cmp{font-size:14px;margin:4px 0 14px}
.cmp th,.cmp td{border:1px solid var(--hair);padding:7px 9px;text-align:left;vertical-align:top}
.cmp thead th{background:var(--tint);font-size:12px;font-weight:700}
.cmp tbody th{font-weight:600;min-width:170px}
.cmp tbody th small{display:block;font-weight:500;font-size:12px;color:var(--ink2)}
.cmp td{font-family:var(--mono);white-space:nowrap}
.cmp tr.obs-note td{font-family:var(--sans);white-space:normal;color:var(--ink2);font-size:13px;background:#fafbfc}
a.srcref{font:600 12px var(--mono);text-decoration:none}

.data.num td.txt{font-family:var(--sans);font-size:14px}
.data th a{color:var(--ink)}
.pallets td b{font-family:var(--mono)}
.plans{margin:16px 0;border:1px solid var(--hair);padding:12px;max-width:680px}
.plans svg{display:block;width:100%;height:auto}
.plans figcaption{font-size:14px;color:var(--ink2);margin-top:8px}
.checks li{margin:8px 0}
.srclist li{margin:0 0 12px;overflow-wrap:anywhere}
.srclist .kind{display:inline-block;font:600 12px var(--mono);letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--ink2);padding:0 6px;margin-left:4px;color:var(--ink2)}
.srclist small{font-size:13px;color:var(--ink2)}
.cite{font-size:14px;overflow-wrap:anywhere}

@media screen and (max-width:1100px){
  .docsheet .titleblock{grid-template-columns:1fr 1fr}
  .docsheet .tb-title{grid-column:1/-1;border-bottom:1px solid var(--rule)}
  .docsheet .tb-field:nth-child(2){border-left:0}
  .doc-bar p{margin:0;flex-basis:100%}
}

/* phone: the overview table becomes one record per container */
@media screen and (max-width:760px){
  .glance{padding:14px 12px 6px}
  .glance-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .glance-t,.glance-t tbody,.glance-t tr,.glance-t th,.glance-t td{display:block;width:100%}
  .glance-t tbody tr{border:1px solid var(--rule);margin:0 0 12px;padding:0}
  .glance-t tbody th{background:var(--tint);border-bottom:1px solid var(--rule)}
  .glance-t tbody th a{display:inline-flex;align-items:center;min-height:40px}
  .glance-t td{display:grid;grid-template-columns:42% 1fr;gap:8px;padding:8px 10px}
  .glance-t td::before{content:attr(data-label);grid-row:span 2;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2)}
  .glance-t td>*{grid-column:2}
  .glance-t td b,.glance-t td small{white-space:normal}
  .glance-t td.go{display:block;border-bottom:0}
  .glance-t td.go::before{content:none}
  .glance-t td.go a{width:100%;justify-content:center}
  .doc-bar{padding:12px}
  .doc-bar .btn{flex:1 1 auto;justify-content:center}
  .spec-h{padding:10px 12px}
  .spec-h .btn{width:100%;justify-content:center}
  .spec .table-wrap,.spec .note,.spec-src,.compare summary{padding-left:12px;padding-right:12px}
  .kv tbody th{width:auto}
  .cmp tbody th a{display:inline-flex;align-items:center;min-height:40px}
}

@media print{
  @page{size:A4 portrait;margin:12mm}
  body{background:#fff;font-size:10pt}
  body.refpage .sheet,body.refpage .annex,body.refpage .ref{display:block!important}
  .topbar,.foot,.skip,.toc,.doc-bar .btn,#print,.go,.glance-t td.go,.spec-h .btn,.plans{display:none!important}
  main{padding:0;max-width:none}
  .sheet,.ref{border:0;box-shadow:none;padding:0}
  .annex{display:block;margin:0}
  body.refpage .docsheet .titleblock{grid-template-columns:1fr 120px 120px}
  body.refpage .docsheet .tb-title{grid-column:auto;border-bottom:0}
  body.refpage .docsheet .tb-field{border-left:1px solid var(--rule)}
  .doc-bar{padding:4pt 0}
  .doc-bar p{margin:0;max-width:none;font-size:8pt}
  .kv th,.kv td{padding:1.6pt 6pt 1.6pt 0;font-size:8.5pt}
  .kv td b{font-size:8.5pt}
  .kv thead th{font-size:7pt}
  .cmp{margin:2pt 0 4pt}
  .cmp th,.cmp td{padding:1.6pt 4pt;font-size:7.6pt}
  .cmp thead th{font-size:7pt}
  .cmp tr.obs-note td{font-size:7.4pt}
  .ref .spec-src{padding:3pt 8pt;font-size:8pt}
  .spec-h{padding:3pt 8pt}
  .spec-h h3{font-size:12pt}
  .spec .note{font-size:8pt;margin:3pt 0}
  .ref h2{font-size:15pt}
  .ref p,.ref li{font-size:9.5pt}
  .glance-t th,.glance-t td{padding:4pt 5pt;font-size:8.5pt}
  .glance-t td b{font-size:8.5pt}
  .glance-t td small,.glance-t small{font-size:7.5pt}
  .glance-t thead th{font-size:7.5pt}
  .spec{break-inside:avoid;margin:8pt 0}
  .spec-h{background:#fff;color:#000;border-bottom:1.5pt solid #000}
  .spec-h h3 span{color:#333}
  details.compare{display:block}
  details.compare>summary{display:none}
  details.compare:not([open])>*:not(summary){display:block}
  .ref section{break-before:auto}
  #types{break-before:page}
  a{color:#000;text-decoration:none}
  .srclist a::after{content:""}
}
@media (prefers-reduced-motion:reduce){.spec:target{outline-offset:0}}