/* 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:#276B44; --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 picture {display:contents}
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}
}

/* readability floor 2026-10-14 */
/* The tool template set labels, hints and table headers at 10-11px. On a phone that is too small to read,
   so every small text style on a tool page gets a 12px floor. The invoice preview (.inv-*) is a paper
   document and keeps its own sizes. */
html body.tp.shop :is(.hint, .big-lbl, .stat .lbl, .opp .lbl, .multiplier .lbl, .sum .lbl, .sum .sub, .qcell .ql,
  .chart h4, .breakdown h4, .bottleneck h4, .tips h4, .annual h4, .scenario small, .lever small, .check small,
  .stage label small, .stage .rate, .funnel-bar .pct, .field label, .fld-label, .fld-hint, .items-tbl th,
  .amort th, table.log th, table.cf th, .breakdown tr.sub td, .sms-count, .disclaimer, .preview-meta) {font-size:12px}
html body.tp.shop .color-grp label {font-size:12px !important}
html body.tp.shop .lock-btn {font-size:12px;min-height:28px;padding:4px 10px}
html body.tp.shop .cross-links a, html body.tp.shop .tool h3 {font-size:.75rem}

/* related tools 2026-10-14: a pegboard of three related tools at the foot of each tool page */
html body.tp.shop section.cross[data-related-tools] {display:grid;gap:12px;justify-items:start;width:min(1240px, calc(100% - 32px));box-sizing:border-box;margin:28px auto 40px;padding:22px clamp(16px,3vw,28px)}
html body.tp.shop section.cross[data-related-tools] h3 {margin:0}
html body.tp.shop section.cross[data-related-tools] p {margin:0;font-size:.95rem}
html body.tp.shop .cross-links {display:flex;flex-wrap:wrap;gap:10px}
html body.tp.shop .cross-links a {text-decoration:none;min-height:30px;display:inline-flex;align-items:center}

/* how it works 2026-10-14: the formula and plain questions under each tool */
html body.tp.shop section.how {width:min(860px, calc(100% - 32px));box-sizing:border-box;margin:36px auto 0;padding:22px clamp(16px,3vw,28px) 24px;background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--steel);color:var(--steel);display:grid;grid-template-columns:minmax(0,1fr);gap:10px;overflow-wrap:anywhere}
/* 10/16: one unbreakable string (the QR page's WIFI:T:...;H:hidden.) widened the grid track and html{overflow-x:clip} cut the text off at 320px */
html body.tp.shop section.how h2 {margin:0;font:900 1.5rem/1.1 var(--f-sign);color:var(--steel)}
html body.tp.shop section.how h3 {margin:10px 0 0;font:800 1.05rem/1.2 var(--f-sign);color:var(--steel)}
html body.tp.shop .how-lead {margin:0;font-size:1.02rem;color:var(--steel);max-width:68ch}
html body.tp.shop .how-steps {margin:0;padding-left:1.4em;display:grid;gap:6px;max-width:68ch;color:var(--steel)}
html body.tp.shop .how-faq {margin:0;display:grid;gap:4px;max-width:68ch}
html body.tp.shop .how-faq dt {font-weight:700;color:var(--steel);margin-top:8px}
html body.tp.shop .how-faq dd {margin:0;color:var(--steel-2)}

/* 10/17: bizbot-shared.css turns every table into a sideways scroller on phones and gives its body min-width:max-content,
   so the two-column 'Where it comes from' summaries (employee cost, hourly rate, tax estimator) pushed their dollar column
   off the right edge at 320-390px (measured 52px at 390). They are label + amount: lay them out as tables and let the label wrap. */
@media (max-width:640px){html body.tp.shop .breakdown table{display:table;overflow:visible}html body.tp.shop .breakdown table>tbody{display:table-row-group;min-width:0}html body.tp.shop .breakdown td:first-child{overflow-wrap:anywhere;padding-right:10px}html body.tp.shop .breakdown td:last-child{white-space:nowrap}}
/* 10/17: links inside the policy generator's preview text are underlined (axe link-in-text-block, 1.56:1 by color alone) */
html body.tp.shop .preview-body :is(p, li) a {text-decoration:underline;text-underline-offset:2px}