/* shop-tools.css — the free tools in the 24-Hour Shop look (2026-10-09).
   ---------------------------------------------------------------------------
   Loaded LAST on /tools/* pages, whose <body class="tp shop">. Every rule is prefixed
   `html body.tp.shop`, so it out-ranks tools-premium.css (.tp .x and its
   html[data-mode="light"] variants) and each page's own single-class rules without !important.
   The tools are the day shift (as on the homepage): day ground, steel ink, ring blue for live
   values. Inputs sit on a work ticket, calculator results print on adding-machine tape, and the
   tools index is the pegboard. Fonts (Overpass, Atkinson Hyperlegible, Courier Prime) are loaded
   by /js/crew-chrome.js, which every tool page includes.
   Generated; edit the rules, keep the prefix on every selector. */
html body.tp.shop {
  --day:#E5EAEB; --wall:#F6F7F6; --paper:#FCFCF9; --steel:#1B2023; --steel-2:#4A545A; --ring:#17628F; --ring-2:#0F4C70;
  --rule:#C5CDD0; --rule-2:#D7DDDF; --field:#B8C1C5; --peg:#B48759; --peg-hole:#6E4F31; --peg-frame:#8C6741;
  --tape:#141414; --tape-blue:#1C4F78; --stamp:#B3261E; --ok-c:#2E7A4E; --warn-c:#8A5A00;
  --f-sign:'Overpass','Franklin Gothic Demi',Arial,sans-serif;
  --f-text:'Atkinson Hyperlegible',Verdana,sans-serif;
  --f-log:'Courier Prime','Courier New',monospace;
  --bg:var(--day); --bg-2:#DCE2E3; --bg-3:var(--wall); --panel:var(--wall); --panel-2:#EEF1F1;
  --ink:var(--steel); --ink-2:var(--steel-2); --muted:#5B656B; --line:var(--rule); --line-2:var(--rule-2);
  --accent:var(--ring); --accent-2:var(--ring-2); --accent-ink:#FFFFFF; --warn:var(--warn-c); --danger:var(--stamp);
  --green:var(--ok-c); --green-lt:var(--ok-c); --white:var(--steel);
  --font-display:var(--f-sign); --font-body:var(--f-text); --font-mono:var(--f-log); --font:var(--f-text);
  background:var(--day); color:var(--steel); font-family:var(--f-text);}
html body.tp.shop::before,
html body.tp.shop::after {content:none;display:none}
html body.tp.shop .head,
html body.tp.shop .tools-hero,
html body.tp.shop .panel,
html body.tp.shop .cross,
html body.tp.shop .why {animation:none}
html body.tp.shop .panel::before,
html body.tp.shop .btn::after {content:none;display:none}
html body.tp.shop .wrap h1,
html body.tp.shop .wrap h2,
html body.tp.shop .wrap h3,
html body.tp.shop .wrap h4,
html body.tp.shop .tools-hero h1,
html body.tp.shop .why h2,
html body.tp.shop .tools-grid h3 {font-family:var(--f-sign);color:var(--steel);letter-spacing:-.015em}
html body.tp.shop .head h1,
html body.tp.shop .tools-hero h1 {background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;color:var(--steel);font-weight:900;line-height:1;letter-spacing:-.025em;text-wrap:balance}
html body.tp.shop .head h1 *,
html body.tp.shop .tools-hero h1 * {background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;color:var(--ring)}
html body.tp.shop .head,
html body.tp.shop .tools-hero {text-align:left;margin-left:0;margin-right:auto}
html body.tp.shop .head p,
html body.tp.shop .tools-hero p {color:var(--steel-2);margin-left:0}
html body.tp.shop .head h1 {font-size:clamp(2.2rem,1.2rem + 3.2vw,3.6rem)}
html body.tp.shop .tools-hero h1 {font-size:clamp(2.6rem,1.2rem + 4.4vw,4.6rem)}
html body.tp.shop .badge {background:var(--tape);color:#F1F1F1;border:0;border-radius:2px;font:800 .7rem/1 var(--f-sign);letter-spacing:.16em;text-transform:uppercase;padding:.55em .8em .45em;text-shadow:0 -1px 0 rgba(255,255,255,.22),0 1px 0 rgba(0,0,0,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.6);backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--tape-blue);display:inline-block;margin-bottom:18px}
html body.tp.shop .wrap a,
html body.tp.shop .tools-hero a,
html body.tp.shop .why a {color:var(--ring)}
html body.tp.shop .grid > *,
html body.tp.shop .row > *,
html body.tp.shop .params > *,
html body.tp.shop .stage > *,
html body.tp.shop .wrap .panel,
html body.tp.shop .wrap .field {min-width:0}
html body.tp.shop .wrap .field input,
html body.tp.shop .wrap .stage input {min-width:0;max-width:100%}
html body.tp.shop .wrap canvas,
html body.tp.shop .wrap img {max-width:100%}
html body.tp.shop .panel {background:var(--wall);border:1px solid var(--rule);border-radius:3px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
html body.tp.shop .panel h2 {font:700 .78rem/1.2 var(--f-log);letter-spacing:.08em;text-transform:uppercase;color:var(--steel-2);border-bottom:1.5px solid var(--steel);padding-bottom:8px;margin-bottom:16px}
html body.tp.shop .wrap label,
html body.tp.shop .field-row label {color:var(--steel)}
html body.tp.shop .val,
html body.tp.shop .field-row .val,
html body.tp.shop .stat .val {background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;font-family:var(--f-log);color:var(--ring);font-weight:700}
html body.tp.shop .hint,
html body.tp.shop .wrap small {color:var(--steel-2)}
html body.tp.shop .wrap input[type=number],
html body.tp.shop .wrap input[type=text],
html body.tp.shop .wrap input[type=email],
html body.tp.shop .wrap input[type=tel],
html body.tp.shop .wrap input[type=url],
html body.tp.shop .wrap input[type=date],
html body.tp.shop .wrap input[type=search],
html body.tp.shop .wrap input:not([type]),
html body.tp.shop .wrap select,
html body.tp.shop .wrap textarea {background:#FFFFFF;border:1px solid var(--field);border-radius:2px;color:var(--steel);box-shadow:none;font-family:var(--f-text)}
html body.tp.shop .wrap input[type=number]:focus,
html body.tp.shop .wrap input[type=text]:focus,
html body.tp.shop .wrap input[type=email]:focus,
html body.tp.shop .wrap input[type=tel]:focus,
html body.tp.shop .wrap input[type=url]:focus,
html body.tp.shop .wrap input[type=date]:focus,
html body.tp.shop .wrap input[type=search]:focus,
html body.tp.shop .wrap input:not([type]):focus,
html body.tp.shop .wrap select:focus,
html body.tp.shop .wrap textarea:focus {border-color:var(--ring);box-shadow:0 0 0 3px rgba(23,98,143,.2);outline:none}
html body.tp.shop .wrap input[type=range] {accent-color:var(--ring)}
html body.tp.shop .wrap input[type=checkbox],
html body.tp.shop .wrap input[type=radio] {accent-color:var(--ring)}
html body.tp.shop .wrap ::placeholder {color:#7A858B}
html body.tp.shop .fld {background:#FFFFFF;border:1px solid var(--field);border-radius:2px;color:var(--steel);box-shadow:none;font-family:var(--f-text);transform:none}
html body.tp.shop .fld:focus-within {border-color:var(--ring);box-shadow:0 0 0 3px rgba(23,98,143,.2);outline:none;transform:none}
html body.tp.shop .fld.locked {background:#EAF2F7;border-color:var(--ring);box-shadow:none}
html body.tp.shop .result {background:var(--paper);border:0;border-radius:0;color:var(--steel);font-family:var(--f-log);text-align:left;padding:34px 26px;box-shadow:none;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/12px 51% repeat-x;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/12px 51% repeat-x}
html body.tp.shop .result .big-lbl,
html body.tp.shop .big-lbl {font:700 .74rem/1.3 var(--f-log);letter-spacing:.1em;text-transform:uppercase;color:var(--steel-2)}
html body.tp.shop .result .big-num,
html body.tp.shop .big-num {background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;font-family:var(--f-log);font-weight:700;color:var(--steel);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
html body.tp.shop .result .sub {color:var(--steel-2);font-family:var(--f-log)}
html body.tp.shop .stat-grid {gap:0 18px;border-top:1.5px dashed #9AA4A9;margin-top:18px}
html body.tp.shop .stat {background:transparent;border:0;border-bottom:1px dashed #C3CACD;border-radius:0;box-shadow:none;padding:10px 2px;transform:none;overflow:visible}
html body.tp.shop .stat:hover {transform:none;box-shadow:none;border-color:#C3CACD}
html body.tp.shop .stat .lbl,
html body.tp.shop .lbl {font-family:var(--f-log);color:var(--steel-2)}
html body.tp.shop .stat .v,
html body.tp.shop .v {background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;font-family:var(--f-log);color:var(--steel)}
html body.tp.shop .breakdown {background:transparent;border:0;border-top:1.5px dashed #9AA4A9;border-radius:0;padding:12px 0 0}
html body.tp.shop .breakdown table,
html body.tp.shop .breakdown h4 {font-family:var(--f-log)}
html body.tp.shop .breakdown tr.total td,
html body.tp.shop tr.total td {border-top:3px double var(--steel)}
html body.tp.shop table {font-variant-numeric:tabular-nums}
html body.tp.shop .scenario {background:#FFFFFF;border:1px solid var(--rule);border-radius:2px}
html body.tp.shop .scenario .v {color:var(--ring)}
html body.tp.shop .preset,
html body.tp.shop .preset-btn,
html body.tp.shop .stage-btn,
html body.tp.shop .templates button {background:#FFFFFF;color:var(--steel);border:1px solid var(--field);border-radius:2px;font-family:var(--f-sign);font-weight:700}
html body.tp.shop .preset:hover,
html body.tp.shop .preset-btn:hover,
html body.tp.shop .stage-btn:hover,
html body.tp.shop .templates button:hover {border-color:var(--ring);color:var(--ring)}
html body.tp.shop .preset.active,
html body.tp.shop .preset-btn.active,
html body.tp.shop .stage-btn.active,
html body.tp.shop .templates button.active {background:var(--tape);color:#F1F1F1;border:0;border-radius:2px;font:800 .7rem/1 var(--f-sign);letter-spacing:.16em;text-transform:uppercase;padding:.55em .8em .45em;text-shadow:0 -1px 0 rgba(255,255,255,.22),0 1px 0 rgba(0,0,0,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.6);backdrop-filter:none;-webkit-backdrop-filter:none}
html body.tp.shop .tab {font-family:var(--f-sign);color:var(--steel-2)}
html body.tp.shop .tab.active {color:var(--steel);border-bottom-color:var(--steel)}
html body.tp.shop .btn {border-radius:3px;font-family:var(--f-sign);font-weight:800;box-shadow:none;transform:none;backdrop-filter:none;-webkit-backdrop-filter:none;filter:none}
html body.tp.shop .btn:hover {transform:none;box-shadow:none;filter:none}
html body.tp.shop .btn-primary,
html body.tp.shop .btn.primary,
html body.tp.shop .btn--accent {background:var(--steel);color:#FFFFFF;border:1.5px solid var(--steel)}
html body.tp.shop .btn-primary:hover,
html body.tp.shop .btn.primary:hover,
html body.tp.shop .btn--accent:hover {background:var(--ring);border-color:var(--ring);color:#FFFFFF}
html body.tp.shop .btn-2 {background:transparent;color:var(--steel);border:1.5px solid var(--field)}
html body.tp.shop .btn-2:hover {border-color:var(--ring);color:var(--ring)}
html body.tp.shop .copy-btn {background:var(--steel);color:#FFFFFF;border-radius:3px;font-family:var(--f-sign);font-weight:800}
html body.tp.shop .copy-btn:hover {background:var(--ring);opacity:1}
html body.tp.shop .copy-btn.done {background:var(--ok-c);color:#FFFFFF}
html body.tp.shop .verdict {border-radius:2px;font-family:var(--f-log);letter-spacing:.04em}
html body.tp.shop .verdict.good,
html body.tp.shop .sumwarn.ok {background:#E3F1E8;border:1px solid #9CC7AE;color:var(--ok-c)}
html body.tp.shop .verdict.bad {background:#F8E3E1;border:1px solid #E0A7A1;color:var(--stamp)}
html body.tp.shop .verdict.warn {background:#F6EDD9;border:1px solid #D9BE85;color:var(--warn-c)}
html body.tp.shop .verdict.ok {background:#E2EEF5;border:1px solid #9EC3D9;color:var(--ring)}
html body.tp.shop .verdict.na {background:#FFFFFF;border:1px solid var(--rule);color:var(--steel-2)}
html body.tp.shop td.neg,
html body.tp.shop .neg {color:var(--stamp)}
html body.tp.shop td.pos,
html body.tp.shop .pos {color:var(--ok-c)}
html body.tp.shop .bar {background:#D9DFE1;border-radius:1px}
html body.tp.shop .bar-fill {background:var(--ring);border-radius:1px}
html body.tp.shop .bar-fill.rev {background:var(--ring)}
html body.tp.shop .bar-fill.cost,
html body.tp.shop .balbar.neg {background:var(--stamp)}
html body.tp.shop .bar-fill.profit,
html body.tp.shop .balbar.pos {background:var(--ok-c)}
html body.tp.shop .cross {background-color:var(--peg);background-image:radial-gradient(circle,var(--peg-hole) 0 3.1px,transparent 3.6px);background-size:28px 28px;background-position:14px 14px;border:10px solid var(--peg-frame);border-radius:2px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;text-align:left}
html body.tp.shop .cross h3 {background:var(--tape);color:#F1F1F1;border:0;border-radius:2px;font:800 .7rem/1 var(--f-sign);letter-spacing:.16em;text-transform:uppercase;padding:.55em .8em .45em;text-shadow:0 -1px 0 rgba(255,255,255,.22),0 1px 0 rgba(0,0,0,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.6);backdrop-filter:none;-webkit-backdrop-filter:none;display:inline-block;font-size:.8rem;margin-bottom:12px}
html body.tp.shop .cross p {color:#1F1408;background:rgba(246,247,246,.92);display:inline-block;padding:6px 10px;border-radius:2px}
html body.tp.shop .cross-links {justify-content:flex-start}
html body.tp.shop .cross-links a {background:var(--tape);color:#F1F1F1;border:0;border-radius:2px;font:800 .7rem/1 var(--f-sign);letter-spacing:.16em;text-transform:uppercase;padding:.55em .8em .45em;text-shadow:0 -1px 0 rgba(255,255,255,.22),0 1px 0 rgba(0,0,0,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.6);backdrop-filter:none;-webkit-backdrop-filter:none;font-size:.68rem;transform:none}
html body.tp.shop .cross-links a:hover {background:var(--tape-blue);color:#FFFFFF;transform:none;box-shadow:none}
html body.tp.shop .tools-hero {max-width:1240px;margin-left:auto;margin-right:auto;padding:clamp(40px,6vw,80px) clamp(16px,4vw,56px) 28px}
html body.tp.shop .tools-hero p {max-width:56ch}
html body.tp.shop .tools-hero .hero-meta {font-family:var(--f-log);color:var(--steel-2);justify-content:flex-start}
html body.tp.shop .tools-hero .hero-meta b {color:var(--ring)}
html body.tp.shop .tools-hero .dot {background:var(--ring);box-shadow:none;border-radius:0}
html body.tp.shop .tools-grid {max-width:calc(1240px - 2 * clamp(16px,4vw,56px));margin:0 auto 72px;padding:56px 28px 28px;gap:56px 28px;background-color:var(--peg);background-image:radial-gradient(circle,var(--peg-hole) 0 3.1px,transparent 3.6px);background-size:28px 28px;background-position:14px 14px;border:10px solid var(--peg-frame);border-radius:2px}
html body.tp.shop .tool {background:var(--wall);border:1px solid #C2CACC;border-radius:0;box-shadow:none;overflow:visible;backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1;transform:none;padding:26px 20px 20px}
html body.tp.shop .tool:hover {transform:none;border-color:var(--ring);box-shadow:none}
html body.tp.shop .tool::before {content:"";position:absolute;left:50%;top:-22px;width:52px;height:24px;margin-left:-26px;inset:auto;top:-22px;left:50%;background:var(--wall);border:1px solid #C2CACC;border-bottom:0;border-radius:8px 8px 0 0;opacity:1;z-index:1;transition:none}
html body.tp.shop .tool::after {content:"";position:absolute;left:50%;top:-14px;width:12px;height:12px;margin-left:-6px;inset:auto;top:-14px;left:50%;border-radius:50%;background:var(--peg-hole);box-shadow:inset 0 2px 2px rgba(0,0,0,.45);opacity:1;z-index:2}
html body.tp.shop .tool .tool-icon {display:none}
html body.tp.shop .tool h3 {background:var(--tape);color:#F1F1F1;border:0;border-radius:2px;font:800 .7rem/1 var(--f-sign);letter-spacing:.16em;text-transform:uppercase;padding:.55em .8em .45em;text-shadow:0 -1px 0 rgba(255,255,255,.22),0 1px 0 rgba(0,0,0,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.6);backdrop-filter:none;-webkit-backdrop-filter:none;display:inline-block;align-self:flex-start;font-size:.72rem;line-height:1.25;margin:0 0 12px;max-width:100%;white-space:normal}
html body.tp.shop .tool p {color:var(--steel-2);font-size:.95rem}
html body.tp.shop .tool-cta {color:var(--ring);font-family:var(--f-sign);font-weight:800}
html body.tp.shop .why {background:var(--wall);border:1px solid var(--rule);border-radius:3px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;max-width:calc(1240px - 2 * clamp(16px,4vw,56px))}
html body.tp.shop .why h2 {font-family:var(--f-sign);font-weight:900}
html body.tp.shop .why p {color:var(--steel-2)}

/* 2026-10-14: catalog plates (the vintage catalog drawing of each tool, /catalog). Tool pages: a clipping
   beside the title. Tools index: the drawing on each pegboard card. */
html body.tp.shop .head {display:grid;grid-template-columns:minmax(0,1fr) clamp(170px,18vw,240px);column-gap:clamp(20px,3vw,44px);align-items:start}
html body.tp.shop .head > :not(.tp-plate) {grid-column:1}
html body.tp.shop .head > .badge {justify-self:start}
html body.tp.shop .tp-plate span i {font-style:normal}
html body.tp.shop .tp-plate {grid-column:2;grid-row:1 / span 4;display:block;text-decoration:none;background:#F3EEDF;border:1px solid #CFC4A6;padding:8px 8px 10px;transform:rotate(1.2deg);box-shadow:0 14px 26px -18px rgba(27,32,35,.55)}
html body.tp.shop .tp-plate img {display:block;width:100%;height:auto;aspect-ratio:4/3;mix-blend-mode:multiply}
html body.tp.shop .tp-plate span {display:block;margin-top:6px;font:700 .72rem/1.3 'Courier Prime','Courier New',monospace;letter-spacing:.06em;text-transform:uppercase;color:#B3261E}
html body.tp.shop .tp-plate:hover {border-color:var(--steel)}
html body.tp.shop .tool .tool-plate {display:block;width:100%;height:auto;aspect-ratio:4/3;margin:0 0 14px;background:#F3EEDF;border:1px solid #DCD3B8;mix-blend-mode:multiply}
@media (max-width:640px){
  html body.tp.shop .head {grid-template-columns:minmax(0,1fr) 112px;column-gap:14px}
  html body.tp.shop .tp-plate {padding:4px 4px 6px;transform:rotate(1.5deg)}
  html body.tp.shop .tp-plate span {font-size:.62rem;letter-spacing:.04em}
  html body.tp.shop .tp-plate span i {display:none}
}