/* Industrial tags page. Linked only from tags.html; extends styles.css. */

/* ---------- jump links: small tags hung on the page-head panel ---------- */
.plate nav{margin:1.6rem 0 0;width:auto;display:block}
.jump{list-style:none;display:flex;flex-wrap:wrap;gap:.8rem .9rem;margin:0;padding:0}
.jump a.tag{font-size:.9rem;padding:.55em 1.9em;text-decoration:none;max-width:100%}
.jump a.tag:hover{filter:brightness(1.3)}
.jump .hole{width:.5em;height:.5em}

/* ---------- shared section bits ---------- */
h3.sub{font-size:1.12rem;margin:2.5rem 0 .75rem}
.split h3.sub:first-child{margin-top:0}
.builder-note{margin-top:2rem}
.prose p:last-child{margin-bottom:0}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start;margin-top:2rem}
.split .stage{position:static;order:0;min-height:0}
@media (max-width:860px){.split{grid-template-columns:1fr}}
/* screw-hole bullets, the same hardware the tags carry */
.holes{list-style:none;margin:.6rem 0 1rem;padding:0}
.holes li{position:relative;padding:.3rem 0 .3rem 1.6rem}
.holes li::before{content:"";position:absolute;left:.1rem;top:.78em;width:.7em;height:.7em;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#E2E5E4,#8D9492 55%,#4A5052);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.holes b{font-weight:600}
.holes.send{margin-top:0;border-top:1px solid var(--line)}
.holes.send li{padding-block:.7rem;border-bottom:1px solid var(--line)}
.holes.send li::before{top:1.1em}
.holes.tips li{max-width:66ch}

/* ---------- two-ply cross-section ---------- */
.xfig{--xs-face:var(--t-black);--xs-core:var(--t-white);--xs-edge:var(--t-black)}
@media (prefers-color-scheme:dark){.xfig{--xs-face:var(--t-white);--xs-core:var(--t-black);--xs-edge:var(--bone)}}
.xsec svg{display:block;width:100%;height:auto;overflow:visible}
.xs-core{fill:var(--xs-core);stroke:var(--xs-edge);stroke-width:1}
.xs-face{fill:var(--xs-face)}
.xs-nozzle{fill:var(--char);stroke:var(--bone);stroke-width:1}
.xs-ray{stroke:var(--orange);stroke-width:2;fill:none}
.xs-spot{fill:#FFE2B0;filter:drop-shadow(0 0 3px #F99F38) drop-shadow(0 0 6px #F99F38)}
/* at rest the pass is finished: the beam is parked at the far edge and the lettering is cut */
/* each patch (.xs-patch) reaches 1.5 units past the gap on both sides, so anti-aliased face edges do not leave hairline seams */
.xs-beam{transform:translateX(340px)}
.xs-patch{transform-box:fill-box;transform-origin:right center;transform:scaleX(0)}
.xsec.engrave .xs-beam{animation:xs-sweep 3.2s linear both}
.xsec.engrave .xs-patch{animation:xs-unpatch .23s linear both}
.xsec.engrave .xs-p1{animation-delay:.485s}
.xsec.engrave .xs-p2{animation-delay:1.185s}
.xsec.engrave .xs-p3{animation-delay:1.885s}
@keyframes xs-sweep{from{transform:translateX(20px)}to{transform:translateX(340px)}}
@keyframes xs-unpatch{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.xsec.engrave .xs-beam,.xsec.engrave .xs-patch{animation:none}}
.legend{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.3rem;margin:1.1rem 0 0;padding:0;font-size:.92rem;color:#16181A}
.legend .key{display:inline-block;width:1rem;height:1rem;margin-right:.45rem;vertical-align:-.17em;border-radius:2px}
.legend .face{background:var(--xs-face);box-shadow:0 0 0 1px var(--xs-edge)}
.legend .core{background:var(--xs-core);box-shadow:0 0 0 1px var(--xs-edge)}
.legend .beam{background:var(--orange);border-radius:50%;box-shadow:0 0 0 1px var(--char)}
@media (prefers-color-scheme:dark){.legend{color:#EDEFEE}.legend .beam{box-shadow:0 0 0 1px var(--bone)}}

/* ---------- choosing size, thickness, mounting ---------- */
.make.choose{grid-template-columns:1fr;margin-top:2rem}
.choose li{align-items:start}
.choose p{max-width:72ch}
.choose p + p,.choose p + ul,.choose ul + p{margin-top:.6rem}
.choose .holes{max-width:44rem;margin-bottom:0}
.choose .holes li{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:.2rem 1rem;align-items:start;padding:.55rem 0 .55rem 1.6rem;border-bottom:1px solid var(--line);color:var(--muted)}
.choose .holes li::before{top:1em}
.choose .holes b{color:var(--ink)}
@media (max-width:560px){.choose .holes li{grid-template-columns:1fr;gap:.1rem}}

/* ---------- color range ---------- */
#color-range .lede{margin-bottom:1rem}
.pgroup{margin-top:2.25rem}
.pgroup h3{margin:0}
.palette{list-style:none;columns:17rem;column-gap:2.5rem;margin:.7rem 0 0;padding:0;border-top:1px solid var(--line)}
.palette li{display:flex;align-items:center;gap:.7rem;break-inside:avoid;padding:.4rem 0;border-bottom:1px solid var(--line);font-size:.98rem;line-height:1.3}
.palette .sw{flex:none}

/* ---------- bulk list ---------- */
/* literal values the customer types into the spreadsheet */
.cols code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:.05em .35em}
.template-note{margin:.7rem 0 0}
.steps.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:700px){.steps.three{grid-template-columns:1fr}}
.bulk-split{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);margin-top:2.5rem}
@media (max-width:860px){.bulk-split{grid-template-columns:1fr}}
.cols{margin:0;border-top:1px solid var(--line)}
.cols > div{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:.3rem 1.5rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.cols dt{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;border-left:3px solid var(--orange);padding-left:.7rem}
.cols dd{margin:0;color:var(--muted);max-width:70ch}
@media (max-width:560px){.cols > div{grid-template-columns:1fr}}
.sheet-note{margin:0 0 .6rem}
.sheetwrap{overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:var(--bg)}
.sheet{border-collapse:collapse;width:100%;font-size:.95rem}
.sheet th,.sheet td{padding:.55rem .85rem;border-top:1px solid var(--line);text-align:left;white-space:nowrap}
.sheet thead th{background:var(--panel);color:var(--ink);font:600 .85rem var(--display);text-transform:uppercase;letter-spacing:.05em}
.sheet tbody td:first-child{font-family:var(--display);font-weight:600;letter-spacing:.03em}

/* ---------- swatches for the color range (approximations of the sheet colors) ---------- */
/* Keep .k1 to .k58 in step with CONFIG.colors in js/config.js: same order, same face and core values. No checker compares them. */
.k1{--face:#16181A;--core:#F4F4F0}
.k2{--face:#F4F4F0;--core:#16181A}
.k3{--face:#B3201A;--core:#F4F4F0}
.k4{--face:#F0C419;--core:#16181A}
.k5{--face:#1F4E8C;--core:#F4F4F0}
.k6{--face:#1F8A3B;--core:#F4F4F0}
.k7{--face:#6E7478;--core:#F4F4F0}
.k8{--face:#F4F4F0;--core:#B3201A}
.k9{--face:#F4F4F0;--core:#1F4E8C}
.k10{--face:#B3201A;--core:#16181A}
.k11{--face:#E8731C;--core:#F4F4F0}
.k12{--face:#E8731C;--core:#16181A}
.k13{--face:#F0C419;--core:#B3201A}
.k14{--face:#16181A;--core:#F0C419}
.k15{--face:#16181A;--core:#C8322B}
.k16{--face:#16181A;--core:#C9A24A}
.k17{--face:#16181A;--core:#C4C8CA}
.k18{--face:#1B2A4A;--core:#F4F4F0}
.k19{--face:#1B2A4A;--core:#C9A24A}
.k20{--face:#2A5DB0;--core:#F4F4F0}
.k21{--face:#3B4C9A;--core:#F4F4F0}
.k22{--face:#7FB2E0;--core:#F4F4F0}
.k23{--face:#A9C8E6;--core:#F4F4F0}
.k24{--face:#4AA3DF;--core:#F0C419}
.k25{--face:#1F4D36;--core:#F4F4F0}
.k26{--face:#1F4D36;--core:#C9A24A}
.k27{--face:#8DB7A0;--core:#F4F4F0}
.k28{--face:#F4F4F0;--core:#1F8A3B}
.k29{--face:#5B2D82;--core:#F4F4F0}
.k30{--face:#6E1F2E;--core:#F4F4F0}
.k31{--face:#B3201A;--core:#C9A24A}
.k32{--face:#E77FA8;--core:#F4F4F0}
.k33{--face:#E77FA8;--core:#16181A}
.k34{--face:#F2B8C6;--core:#F4F4F0}
.k35{--face:#6B4A2E;--core:#F4F4F0}
.k36{--face:#E3D3B5;--core:#16181A}
.k37{--face:#2B2D30;--core:#F4F4F0}
.k38{--face:#B9BDBF;--core:#16181A}
.k39{--face:#C9CCCE;--core:#16181A}
.k40{--face:#D6D9DB;--core:#16181A}
.k41{--face:#E1E4E6;--core:#16181A}
.k42{--face:#A9AEB1;--core:#16181A}
.k43{--face:#A9AEB1;--core:#1F4E8C}
.k44{--face:#A9AEB1;--core:#B3201A}
.k45{--face:#C2C2B8;--core:#16181A}
.k46{--face:#C9A24A;--core:#16181A}
.k47{--face:#D4AF4F;--core:#16181A}
.k48{--face:#B8963E;--core:#16181A}
.k49{--face:#B5943C;--core:#16181A}
.k50{--face:#B87352;--core:#16181A}
.k51{--face:#6E4E2E;--core:#16181A}
.k52{--face:#8A6A45;--core:#F4F4F0}
.k53{--face:#6B4B32;--core:#F4F4F0}
.k54{--face:#4A3323;--core:#F4F4F0}
.k55{--face:#D9B98A;--core:#16181A}
.k56{--face:#D9B98A;--core:#F4F4F0}
.k57{--face:#9A5B3C;--core:#F4F4F0}
.k58{--face:#B98A5E;--core:#F4F4F0}