/* ═══════════════════════════════════════════════════════════════
   tools.css — the calculator widgets.

   The page shell (nav, logo, footer, theme toggle, light palette,
   touch targets) is shared with the blog via blog.css, which every
   tool page also links. Only the tool-specific pieces live here, so
   the two surfaces cannot drift apart.
   ═══════════════════════════════════════════════════════════════ */

/* ════════ HUB ════════ */
.tools-index{padding:64px 0 40px}
.th-head{max-width:52ch;margin-bottom:40px}
.th-head h1{font-size:clamp(38px,6vw,58px);font-weight:800;margin-top:20px}
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tool-card{
  display:flex;flex-direction:column;gap:10px;padding:26px 24px;color:inherit;
  background:var(--g-glass);border:1px solid var(--line);border-radius:18px;
  transition:border-color .2s,transform .2s;
}
.tool-card:hover{border-color:var(--ember-line);transform:translateY(-3px);text-decoration:none}
.tool-card .ic{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--ember-dim);border:1px solid var(--ember-line);color:var(--ember);
  font-size:18px;margin-bottom:4px;
}
.tool-card h2{font-size:18.5px;font-weight:700;line-height:1.3}
.tool-card p{color:var(--faint);font-size:14.5px;line-height:1.6;flex:1}
.tool-card .go{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ember);
}

/* ════════ TOOL PAGE ════════ */
.tool{padding:36px 0 40px}
.tool-head{max-width:62ch;margin-bottom:30px}
.tool-head h1{font-size:clamp(30px,5vw,46px);font-weight:800;letter-spacing:-.03em}
.tool-head .lede{color:var(--muted);font-size:19px;line-height:1.6;margin-top:16px}

.calc{
  background:var(--g-glass);border:1px solid var(--line);border-radius:20px;
  padding:28px;position:relative;overflow:hidden;
}
.calc::before{
  content:"";position:absolute;inset:-1px -1px auto;height:2px;
  background:linear-gradient(90deg,transparent,var(--ember),transparent);opacity:.6;
}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.calc h2{font-size:17px;font-weight:700;margin-bottom:4px}
.calc .hint{color:var(--faint);font-size:13.5px;margin-bottom:18px;line-height:1.55}

.f{margin-bottom:16px}
.f:last-child{margin-bottom:0}
.f label{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px;
}
.f label .q{color:var(--faint);text-transform:none;letter-spacing:0;font-family:var(--body)}
.inp-wrap{display:flex;align-items:stretch}
.inp-wrap .pre,.inp-wrap .suf{
  font-family:var(--mono);font-size:14px;color:var(--muted);
  background:rgba(255,255,255,.055);border:1px solid var(--line);
  display:grid;place-items:center;padding:0 13px;flex:none;
}
.inp-wrap .pre{border-right:0;border-radius:11px 0 0 11px}
.inp-wrap .suf{border-left:0;border-radius:0 11px 11px 0}
.f input[type=text],.f input[type=number],.f input[type=url],.f select{
  width:100%;background:rgba(0,0,0,.38);border:1px solid var(--line);
  border-radius:11px;padding:12px 14px;color:var(--text);font-size:15.5px;
  font-family:inherit;transition:border-color .18s,box-shadow .18s,background .18s;
  -moz-appearance:textfield;appearance:textfield;
}
.f input::-webkit-outer-spin-button,.f input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inp-wrap .pre + input{border-radius:0 11px 11px 0}
.inp-wrap input:has(+ .suf){border-radius:11px 0 0 11px}
.inp-wrap > input{border-radius:0}
.inp-wrap > input:first-child{border-radius:11px 0 0 11px}
.inp-wrap > input:last-child{border-radius:0 11px 11px 0}
.f input:focus,.f select:focus{
  outline:0;border-color:var(--ember-line);box-shadow:0 0 0 3px var(--ember-dim);
  background:rgba(0,0,0,.5);position:relative;z-index:1;
}
.f input::placeholder{color:#8C8880}
.f .err{color:#FF7A70;font-size:12.5px;margin-top:6px;display:none}
.f.bad input{border-color:rgba(255,122,112,.6)}
.f.bad .err{display:block}
.f .help{color:var(--faint);font-size:12.5px;margin-top:6px;line-height:1.5}

/* results */
.out{
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);
  border-radius:16px;padding:24px;
}
.out h3{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--faint);margin-bottom:16px;
}
.res{display:grid;gap:12px}
.res-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-bottom:12px;border-bottom:1px solid var(--line-2);
}
.res-row:last-child{border-bottom:0;padding-bottom:0}
.res-row .k{color:var(--muted);font-size:14.5px;line-height:1.4}
.res-row .v{
  font-family:var(--display);font-size:23px;font-weight:800;letter-spacing:-.03em;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.res-row.hero .v{font-size:clamp(28px,4vw,38px)}
.res-row .v.good{color:var(--good,#3FBF6B)}
.res-row .v.bad{color:#FF7A70}
.res-row .sub{display:block;color:var(--faint);font-size:12.5px;margin-top:3px}

.verdict{
  margin-top:18px;border-radius:12px;padding:15px 17px;font-size:14.5px;line-height:1.6;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);
}
.verdict.ok{background:rgba(63,191,107,.10);border-color:rgba(63,191,107,.34);color:#9BE7B6}
.verdict.warn{background:rgba(232,166,46,.10);border-color:rgba(232,166,46,.34);color:#F3D392}
.verdict.stop{background:rgba(255,122,112,.10);border-color:rgba(255,122,112,.34);color:#FFB3AD}
.verdict b{font-weight:700}

/* copy-to-clipboard output */
.copybox{display:flex;gap:8px;align-items:stretch;margin-top:6px}
.copybox input{
  flex:1;font-family:var(--mono);font-size:13.5px;
  background:rgba(0,0,0,.42);border:1px solid var(--line);border-radius:11px;
  padding:13px 14px;color:var(--text);
}
.btn-copy{
  flex:none;font-family:var(--body);font-size:14px;font-weight:700;
  background:var(--g-cta);color:#1A0800;border:0;border-radius:11px;
  padding:0 20px;cursor:pointer;transition:filter .2s,transform .18s;white-space:nowrap;
}
.btn-copy:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-copy.done{background:rgba(63,191,107,.9);color:#04220F}

/* the little chips that preset a form */
.presets{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.preset{
  font-family:var(--body);font-size:13px;background:rgba(255,255,255,.045);
  border:1px solid var(--line);color:var(--muted);border-radius:99px;
  padding:8px 14px;cursor:pointer;transition:.18s;
}
.preset:hover{border-color:rgba(255,255,255,.22);color:var(--text)}
.preset.on{background:var(--ember-dim);border-color:var(--ember-line);color:var(--ember);font-weight:600}

/* ════════ SERP PREVIEW ════════ */
.serp{
  background:#fff;border:1px solid #dadce0;border-radius:12px;padding:20px 22px;
  font-family:Arial,sans-serif;
}
.serp .s-url{color:#202124;font-size:14px;line-height:1.3}
.serp .s-url span{color:#4d5156;font-size:12px;display:block;margin-top:1px}
.serp .s-title{
  color:#1a0dab;font-size:20px;line-height:1.3;margin-top:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.serp .s-desc{color:#4d5156;font-size:14px;line-height:1.58;margin-top:3px}
.serp.mobile{max-width:400px}
.serp.mobile .s-title{font-size:18px;white-space:normal}
.px{
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--faint);
  display:flex;justify-content:space-between;margin-top:9px;
}
.px .over{color:#FF7A70;font-weight:600}
.px .fits{color:var(--good,#3FBF6B)}

/* ════════ EXPLANATION BELOW THE TOOL ════════ */
.explain{max-width:70ch;margin-top:56px}
.explain h2{font-size:clamp(23px,3.4vw,30px);font-weight:700;margin-top:44px}
.explain h3{font-size:19px;font-weight:700;margin-top:30px}
.explain p{color:var(--muted);font-size:17px;line-height:1.75;margin-top:16px}
.explain ul,.explain ol{margin:16px 0;padding-left:24px;color:var(--muted);font-size:17px;line-height:1.75}
.explain li{margin:9px 0}
.explain li::marker{color:var(--ember)}
.explain strong{color:var(--text);font-weight:600}
.explain a{text-decoration:underline;text-underline-offset:3px}
.explain .formula{
  font-family:var(--mono);font-size:15px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-left:3px solid var(--ember);
  border-radius:10px;padding:16px 18px;margin:22px 0;color:var(--text);
  overflow-x:auto;
}
.explain .table-wrap{overflow-x:auto;margin:24px 0;border:1px solid var(--line);border-radius:12px}
.explain table{border-collapse:collapse;width:100%;font-size:15px;min-width:460px}
.explain th,.explain td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line-2)}
.explain th{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);background:rgba(255,255,255,.035);font-weight:600;
}
.explain tr:last-child td{border-bottom:0}

/* related tools + soft CTA */
.next-tools{margin-top:56px;padding-top:34px;border-top:1px solid var(--line)}
.next-tools h2{font-size:22px;font-weight:700;margin-bottom:16px}
.nt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.nt{
  display:flex;flex-direction:column;gap:7px;padding:18px;color:inherit;
  background:var(--g-glass);border:1px solid var(--line);border-radius:14px;transition:.2s;
}
.nt:hover{border-color:var(--ember-line);transform:translateY(-3px);text-decoration:none}
.nt b{font-family:var(--display);font-size:16px;font-weight:700;line-height:1.3}
.nt span{color:var(--faint);font-size:13px;line-height:1.5}

.soft-cta{
  margin-top:44px;background:var(--g-glass);border:1px solid var(--ember-line);
  border-radius:18px;padding:30px 28px;text-align:center;
}
.soft-cta h2{font-size:clamp(21px,3vw,27px);font-weight:700}
.soft-cta p{color:var(--muted);font-size:16px;margin-top:12px;max-width:56ch;margin-inline:auto;line-height:1.65}
.soft-cta .btn{margin-top:20px}

/* ════════ LIGHT THEME ════════ */
:root[data-theme="light"] .f input,
:root[data-theme="light"] .f select,
:root[data-theme="light"] .copybox input{background:#FFFFFF;color:var(--text)}
:root[data-theme="light"] .f input::placeholder{color:#9A948C}
:root[data-theme="light"] .inp-wrap .pre,
:root[data-theme="light"] .inp-wrap .suf{background:#F2EFEA}
:root[data-theme="light"] .out{background:#FFFFFF;border-color:var(--line)}
:root[data-theme="light"] .verdict{background:rgba(20,20,22,.03)}
:root[data-theme="light"] .verdict.ok{background:rgba(31,122,68,.09);border-color:rgba(31,122,68,.32);color:#14663A}
:root[data-theme="light"] .verdict.warn{background:rgba(138,94,15,.09);border-color:rgba(138,94,15,.32);color:#7A5310}
:root[data-theme="light"] .verdict.stop{background:rgba(192,52,31,.07);border-color:rgba(192,52,31,.30);color:#9A2A16}
:root[data-theme="light"] .preset{background:rgba(20,20,22,.035)}
:root[data-theme="light"] .explain .formula{background:rgba(20,20,22,.04)}
/* --faint is a light-grey meant for dark backgrounds; on a near-white
   table header it only reaches 3.2:1, short of the 4.5:1 body-text bar. */
:root[data-theme="light"] .explain th{background:rgba(20,20,22,.05);color:#4A4650}
:root[data-theme="light"] .tool-card,
:root[data-theme="light"] .nt,
:root[data-theme="light"] .calc,
:root[data-theme="light"] .soft-cta{box-shadow:0 16px 36px -26px rgba(20,20,22,.28)}
:root[data-theme="light"] .res-row .v.good{color:#1F7A44}

/* ════════ RESPONSIVE ════════ */
@media (max-width:920px){
  .tool-grid,.nt-grid{grid-template-columns:repeat(2,1fr)}
  .calc-grid{grid-template-columns:1fr;gap:20px}
}
@media (max-width:620px){
  .tool-grid,.nt-grid{grid-template-columns:1fr}
  .calc{padding:22px 18px}
  .out{padding:20px 18px}
  .copybox{flex-direction:column}
  .btn-copy{padding:14px 20px}
  .serp{padding:16px}
}
@media (pointer:coarse){
  .preset{min-height:44px;display:inline-flex;align-items:center}
  .btn-copy{min-height:44px}
  .f input,.f select{min-height:44px}
  .tool-card,.nt{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .tool-card:hover,.nt:hover,.btn-copy:hover{transform:none}
}

/* a bare checkbox is ~13px, far below a comfortable tap target — give the
   whole label the hit area and scale the box itself on touch */
.f label:has(input[type=checkbox]){cursor:pointer}
@media (pointer:coarse){
  .f label:has(input[type=checkbox]){min-height:44px;display:flex;align-items:center;gap:11px}
  .f input[type=checkbox]{width:22px;height:22px;min-height:22px;flex:none}
  .f input[type=range]{min-height:44px}
  .f input[type=color]{min-height:44px}
}

/* ════════ SELECTOR AT THE TOP OF THE COLUMN ════════
   This used to sit on the right of a header row, where people simply did not
   see it. It now leads the column whose numbers it changes. */
.cur-top{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  background:var(--ember-dim);border:1px solid var(--ember-line);
  border-radius:12px;padding:11px 13px;margin-bottom:20px;
}
.cur-top label{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ember);margin:0;flex:none;
}
.cur-top select{
  flex:1;min-width:0;background:rgba(0,0,0,.34);border:1px solid var(--line);
  border-radius:9px;padding:10px 12px;color:var(--text);font-size:14.5px;
  font-family:inherit;cursor:pointer;
}
.cur-top select:focus{outline:0;border-color:var(--ember-line);box-shadow:0 0 0 3px var(--ember-dim)}
:root[data-theme="light"] .cur-top select{background:#FFFFFF}
@media (pointer:coarse){ .cur-top select{min-height:44px} }

/* the always-visible example under a field */
.f .eg{
  display:block;color:var(--faint);font-size:12.5px;margin-top:6px;line-height:1.5;
}
.f .eg b{color:var(--text);font-weight:700;font-size:13px}

/* ═══════════════════════════════════════════════════════════════
   WIDGETS — added for the second wave of tools
   ═══════════════════════════════════════════════════════════════ */

/* ──────── text areas ──────── */
.f textarea{
  width:100%;background:rgba(0,0,0,.38);border:1px solid var(--line);
  border-radius:11px;padding:12px 14px;color:var(--text);font-size:15px;
  font-family:inherit;line-height:1.6;resize:vertical;min-height:76px;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.f textarea:focus{
  outline:0;border-color:var(--ember-line);box-shadow:0 0 0 3px var(--ember-dim);
  background:rgba(0,0,0,.5);
}
.f textarea::placeholder{color:#8C8880}
.ta-out{
  width:100%;background:rgba(0,0,0,.42);border:1px solid var(--line);border-radius:11px;
  padding:13px 14px;color:var(--text);font-family:var(--mono);font-size:13px;
  line-height:1.65;resize:vertical;
}

/* ──────── side-by-side field pairs ──────── */
.f2,.f3{display:grid;gap:14px}
.f2{grid-template-columns:1fr 1fr}
.f3{grid-template-columns:repeat(3,1fr)}
.f2 .f,.f3 .f{margin-bottom:16px}

/* ──────── checkboxes ──────── */
.chk-row{display:flex;flex-direction:column;gap:10px}
.chk{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  font-family:var(--body);font-size:14.5px;text-transform:none;letter-spacing:0;
  color:var(--muted);margin:0;line-height:1.5;
}
.chk input[type=checkbox]{
  width:18px;height:18px;flex:none;margin-top:1px;
  accent-color:var(--ember);cursor:pointer;
}
.chk code{
  font-family:var(--mono);font-size:12.5px;background:rgba(255,255,255,.06);
  border-radius:5px;padding:1px 6px;color:var(--text);
}
.chk span{min-width:0}

/* ──────── buttons ──────── */
.btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn-ghost{
  font-family:var(--body);font-size:14px;font-weight:600;
  background:rgba(255,255,255,.045);border:1px solid var(--line);color:var(--muted);
  border-radius:11px;padding:12px 18px;cursor:pointer;transition:.18s;
}
.btn-ghost:hover{border-color:rgba(255,255,255,.22);color:var(--text)}
.btn-ghost.sm{padding:8px 13px;font-size:13px}

/* ──────── a small strip of counts above a result ──────── */
.stat-strip{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:16px;
  padding-bottom:14px;border-bottom:1px solid var(--line-2);
  color:var(--faint);font-size:13px;
}
.stat-strip b{
  color:var(--text);font-family:var(--display);font-size:17px;
  font-weight:800;letter-spacing:-.02em;margin-right:3px;
  font-variant-numeric:tabular-nums;
}

/* ──────── tab switcher ──────── */
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.tab{
  font-family:var(--body);font-size:13px;background:rgba(255,255,255,.045);
  border:1px solid var(--line);color:var(--muted);border-radius:99px;
  padding:8px 14px;cursor:pointer;transition:.18s;
}
.tab:hover{border-color:rgba(255,255,255,.22);color:var(--text)}
.tab.on{background:var(--ember-dim);border-color:var(--ember-line);color:var(--ember);font-weight:600}

/* ──────── segmented control ──────── */
.seg{display:flex;background:rgba(0,0,0,.34);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.sgb{
  flex:1;font-family:var(--body);font-size:14px;font-weight:600;background:none;
  border:0;color:var(--muted);border-radius:9px;padding:11px 10px;cursor:pointer;transition:.18s;
}
.sgb:hover{color:var(--text)}
.sgb.on{background:var(--ember-dim);color:var(--ember)}

/* ──────── keyword density bars ──────── */
.dens{display:grid;gap:7px}
.dens-row{display:grid;grid-template-columns:minmax(0,1fr) 78px 34px 52px;gap:10px;align-items:center;font-size:13.5px}
.dens-row .dw{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dens-row .dbarw{background:rgba(255,255,255,.07);border-radius:99px;height:7px;overflow:hidden}
.dens-row .dbar{display:block;height:100%;background:var(--g-cta);border-radius:99px}
.dens-row .dn{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.dens-row .dp{color:var(--faint);text-align:right;font-family:var(--mono);font-size:12px}
.dens-row.hit .dw{color:var(--ember);font-weight:700}

/* ──────── character-count bars ──────── */
.f.cc{margin-bottom:20px}
.ccbar{height:4px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;margin-top:8px}
.ccfill{display:block;height:100%;width:0;background:var(--g-cta);border-radius:99px;transition:width .18s}
.ccfill.warn{background:#E8A62E}
.ccfill.bad{background:#FF7A70}
.eg .over,b.over{color:#FF7A70}

/* ──────── case converter ──────── */
.case-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:9px;margin:18px 0}
.cbtn{
  text-align:left;font-family:var(--body);background:rgba(0,0,0,.34);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;transition:.18s;
}
.cbtn b{display:block;color:var(--text);font-size:14px;font-weight:700;margin-bottom:3px}
.cbtn span{display:block;color:var(--faint);font-size:12px;font-family:var(--mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbtn:hover{border-color:rgba(255,255,255,.22)}
.cbtn.on{background:var(--ember-dim);border-color:var(--ember-line)}
.cbtn.on b{color:var(--ember)}

/* ──────── slug preview ──────── */
.urlprev{display:grid;gap:8px}
.urlrow{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:2px;font-family:var(--mono);font-size:13px;
  background:rgba(0,0,0,.3);border:1px solid var(--line-2);border-radius:10px;padding:11px 13px;
}
.urlrow .ub{color:var(--faint)}
.urlrow .us{color:var(--ember);font-weight:600;word-break:break-all}
.urlrow .ul{margin-left:auto;color:var(--faint);font-size:11.5px;white-space:nowrap;padding-left:10px}

/* ──────── long-sentence list ──────── */
.long-list{display:grid;gap:9px}
.lrow{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.55}
.lrow .ln{
  flex:none;font-family:var(--mono);font-size:11px;color:#F3D392;
  background:rgba(232,166,46,.13);border-radius:6px;padding:3px 7px;white-space:nowrap;
}
.lrow .lt{color:var(--muted);min-width:0}

/* ──────── file picker ──────── */
.filerow{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.filerow input[type=file]{
  flex:1;min-width:0;font-family:inherit;font-size:13.5px;color:var(--muted);
  background:rgba(0,0,0,.34);border:1px solid var(--line);border-radius:11px;padding:10px 12px;
}
.filerow input[type=file]::file-selector-button{
  font-family:inherit;font-size:13px;font-weight:600;margin-right:11px;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--text);
  border-radius:8px;padding:7px 12px;cursor:pointer;
}

/* ═══════════ INVOICE ═══════════ */
.inv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;align-items:start}
.inv-form fieldset{border:1px solid var(--line-2);border-radius:14px;padding:18px;margin:0 0 18px}
.inv-form legend{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding:0 8px;
}
.inv-row{display:grid;grid-template-columns:minmax(0,1fr) 62px 92px 34px;gap:7px;margin-bottom:8px}
.inv-row input{
  width:100%;min-width:0;background:rgba(0,0,0,.38);border:1px solid var(--line);
  border-radius:9px;padding:10px 11px;color:var(--text);font-size:14px;font-family:inherit;
  -moz-appearance:textfield;appearance:textfield;
}
.inv-row input::-webkit-outer-spin-button,.inv-row input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inv-row input:focus{outline:0;border-color:var(--ember-line);box-shadow:0 0 0 3px var(--ember-dim)}
.inv-row .ir-q,.inv-row .ir-r{text-align:right}
.ir-x{
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--faint);
  border-radius:9px;font-size:17px;line-height:1;cursor:pointer;transition:.18s;
}
.ir-x:hover{color:#FF7A70;border-color:rgba(255,122,112,.45)}

.inv-prev-wrap{position:sticky;top:88px}
.scr-only-h{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--faint);margin-bottom:12px;
}
.inv-doc{
  background:#FFFFFF;color:#15161A;border-radius:12px;padding:34px 32px;
  font-size:13.5px;line-height:1.6;box-shadow:0 18px 50px rgba(0,0,0,.4);
}
.inv-doc *{margin:0;padding:0}
.ivd-top{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:28px}
.ivd-name{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.ivd-lines{color:#5A5D66;font-size:12.5px;line-height:1.55}
.ivd-title{text-align:right;flex:none}
.ivd-h{font-size:24px;font-weight:800;letter-spacing:.06em;color:#B4341A;margin-bottom:8px}
.ivd-meta{font-size:12.5px;color:#5A5D66;line-height:1.7}
.ivd-meta span{color:#6B6F7A;display:inline-block;min-width:74px}
.ivd-bill{margin-bottom:22px;padding-top:18px;border-top:1px solid #E5E7EC}
.ivd-lab{
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#6B6F7A;
  font-weight:700;margin-bottom:6px;
}
.ivd-name2{font-size:15px;font-weight:700;margin-bottom:4px}
.ivd-table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:13px}
.ivd-table th{
  text-align:left;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#6B6F7A;border-bottom:2px solid #E5E7EC;padding:0 0 8px;font-weight:700;
}
.ivd-table th.r,.ivd-table td.r{text-align:right}
.ivd-table td{padding:10px 0;border-bottom:1px solid #EEF0F4;vertical-align:top}
.ivd-table td.r{font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:12px}
.ivd-empty td{color:#6B6F7A;text-align:center;padding:22px 0}
.ivd-tot{margin-left:auto;width:min(272px,100%)}
.ivd-tot .tr{display:flex;justify-content:space-between;gap:16px;padding:6px 0;font-size:13px;color:#5A5D66}
.ivd-tot .tr b{color:#15161A;font-variant-numeric:tabular-nums;font-weight:600}
.ivd-tot .grand{border-top:2px solid #E5E7EC;margin-top:6px;padding-top:11px;font-size:15px;color:#15161A;font-weight:700}
.ivd-tot .grand b{font-size:19px;font-weight:800;color:#B4341A}
.ivd-notes{margin-top:26px;padding-top:16px;border-top:1px solid #E5E7EC;color:#5A5D66;font-size:12.5px;line-height:1.6}
.ivd-foot{margin-top:22px;text-align:center;color:#6B6F7A;font-size:11.5px}

/* ═══════════ SOCIAL MOCKUPS ═══════════ */
.mock-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:28px;align-items:start}
.mk-wrap{position:sticky;top:88px}
.mk-stage{
  display:flex;justify-content:center;padding:22px;border-radius:16px;
  background:
    linear-gradient(rgba(255,255,255,.02),rgba(255,255,255,.02)),
    repeating-conic-gradient(rgba(255,255,255,.035) 0% 25%,transparent 0% 50%) 0 0/18px 18px;
  border:1px solid var(--line-2);
}

/* ═══════════ HUB CATEGORIES ═══════════ */
.tool-cat{margin-top:44px}
.tool-cat:first-of-type{margin-top:32px}
.tool-cat > h2{
  display:flex;align-items:baseline;gap:12px;font-size:15px;font-weight:700;
  letter-spacing:-.01em;margin-bottom:4px;
}
.tool-cat > h2 .n{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  color:var(--faint);text-transform:uppercase;
}
.tool-cat > p{color:var(--faint);font-size:13.5px;line-height:1.55;margin-bottom:18px;max-width:64ch}
.cat-nav{display:flex;flex-wrap:wrap;gap:7px;margin:26px 0 4px}
.cat-nav a{
  font-family:var(--body);font-size:13px;background:rgba(255,255,255,.045);
  border:1px solid var(--line);color:var(--muted);border-radius:99px;
  padding:8px 14px;text-decoration:none;transition:.18s;
}
.cat-nav a:hover{border-color:var(--ember-line);color:var(--ember)}

/* ═══════════ LIGHT THEME ═══════════ */
:root[data-theme="light"] .f textarea,
:root[data-theme="light"] .ta-out,
:root[data-theme="light"] .inv-row input{background:#FFFFFF;color:var(--text)}
:root[data-theme="light"] .f textarea::placeholder{color:#9A948C}
:root[data-theme="light"] .btn-ghost,
:root[data-theme="light"] .tab,
:root[data-theme="light"] .cbtn,
:root[data-theme="light"] .cat-nav a,
:root[data-theme="light"] .filerow input[type=file],
:root[data-theme="light"] .seg{background:#FFFFFF}
:root[data-theme="light"] .sgb.on,
:root[data-theme="light"] .tab.on,
:root[data-theme="light"] .cbtn.on{background:var(--ember-dim)}
:root[data-theme="light"] .stat-strip,
:root[data-theme="light"] .dens-row .dbarw,
:root[data-theme="light"] .ccbar{background:rgba(20,20,22,.07)}
:root[data-theme="light"] .stat-strip{background:none}
:root[data-theme="light"] .ir-x,
:root[data-theme="light"] .chk code{background:rgba(20,20,22,.05)}
:root[data-theme="light"] .mk-stage{
  background:
    linear-gradient(rgba(20,20,22,.02),rgba(20,20,22,.02)),
    repeating-conic-gradient(rgba(20,20,22,.05) 0% 25%,transparent 0% 50%) 0 0/18px 18px;
}
:root[data-theme="light"] .inv-doc{box-shadow:0 12px 34px rgba(20,20,22,.12);border:1px solid var(--line)}
:root[data-theme="light"] .lrow .ln{color:#7A5400;background:rgba(232,166,46,.20)}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:880px){
  .inv-grid,.mock-grid{grid-template-columns:1fr}
  .inv-prev-wrap,.mk-wrap{position:static}
}
@media (max-width:620px){
  .f2,.f3{grid-template-columns:1fr}
  .inv-row{grid-template-columns:minmax(0,1fr) 54px 78px 34px;gap:6px}
  .inv-doc{padding:24px 20px}
  .ivd-top{flex-direction:column;gap:16px}
  .ivd-title{text-align:left}
  .ivd-tot{width:100%}
  .dens-row{grid-template-columns:minmax(0,1fr) 46px 50px;gap:8px}
  .dens-row .dbarw{display:none}
  .case-grid{grid-template-columns:1fr 1fr}
  .mk-stage{padding:12px}
}
@media (max-width:400px){
  .case-grid{grid-template-columns:1fr}
}

/* ═══════════ TOUCH TARGETS ═══════════ */
@media (pointer:coarse){
  .tab,.sgb,.btn-ghost,.cbtn,.cat-nav a,.ir-x{min-height:44px}
  .chk{min-height:44px;align-items:center}
  .chk input[type=checkbox]{width:22px;height:22px}
  .filerow input[type=file]{min-height:44px}
}

/* ═══════════ PRINT — the invoice only ═══════════ */
@media print{
  body{background:#fff}
  .site-nav,.site-foot,.crumbs,.tool-head,.explain,.faq,.soft-cta,.next-tools,
  .inv-form,.cur-top,.scr-only-h,.theme-t{display:none !important}
  .calc,.inv-doc{border:0;box-shadow:none;padding:0;background:none}
  .inv-grid{display:block}
  .inv-prev-wrap{position:static}
  .inv-doc{color:#000;font-size:12pt}
  @page{margin:14mm}
}

/* ──────── QR code stage ──────── */
.qr-stage{
  display:flex;align-items:center;justify-content:center;padding:22px;
  background:#FFFFFF;border-radius:14px;border:1px solid var(--line-2);
}
.qr-stage svg{display:block;width:100%;max-width:300px;height:auto}
.qr-empty{color:#8B8F99;font-size:13.5px;padding:70px 10px;text-align:center}
.qr-stage .btn-row{margin-top:0}

/* ──────── aspect ratio preview ──────── */
.ar-preview{
  margin-top:18px;display:flex;align-items:center;justify-content:center;
  min-height:170px;padding:16px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);
}
.ar-box{
  background:var(--g-cta);border-radius:6px;width:60%;padding-top:34%;
  transition:width .2s ease,padding-top .2s ease;
}
:root[data-theme="light"] .ar-preview{background:rgba(20,20,22,.04)}

/* ──────── range slider ──────── */
.f input[type=range]{
  width:100%;accent-color:var(--ember);height:26px;cursor:pointer;background:none;
}
.f input[type=color]{
  width:100%;height:46px;padding:4px;background:rgba(0,0,0,.38);
  border:1px solid var(--line);border-radius:11px;cursor:pointer;
}

/* ──────── converted-image list ──────── */
.img-list{display:grid;gap:8px}
.img-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto 56px auto;gap:11px;align-items:center;
  background:rgba(0,0,0,.28);border:1px solid var(--line-2);border-radius:11px;padding:11px 13px;
}
.img-row .in{min-width:0;font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.img-row .in .sub{display:block;color:var(--faint);font-size:11.5px;font-family:var(--mono);margin-top:2px}
.img-row .ib{font-size:12.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.img-row .ib b{color:var(--text)}
.img-row .ip{font-family:var(--mono);font-size:12.5px;text-align:right;font-weight:600}
.img-row .ip.good{color:var(--good,#3FBF6B)}
.img-row .ip.bad{color:#FF7A70}

.img-stage{
  display:flex;align-items:center;justify-content:center;min-height:210px;padding:16px;
  border-radius:14px;border:1px solid var(--line-2);
  background:
    linear-gradient(rgba(255,255,255,.02),rgba(255,255,255,.02)),
    repeating-conic-gradient(rgba(255,255,255,.04) 0% 25%,transparent 0% 50%) 0 0/16px 16px;
}
.img-stage img{max-width:100%;max-height:320px;height:auto;border-radius:8px;display:block}

/* ──────── size reference table ──────── */
.sz-table{display:grid;gap:6px;margin-top:6px}
.sz-head,.sz-row{
  display:grid;grid-template-columns:104px minmax(0,1fr) 116px 66px;gap:12px;align-items:center;
}
.sz-head{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);padding:0 13px 6px;
}
.sz-row{
  background:rgba(0,0,0,.28);border:1px solid var(--line-2);border-radius:11px;
  padding:11px 13px;text-decoration:none;transition:.16s;
}
.sz-row:hover{border-color:var(--ember-line);background:var(--ember-dim)}
.sz-row .p{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ember)}
.sz-row .w{color:var(--text);font-size:14px;min-width:0}
.sz-row .w .sub{display:block;color:var(--faint);font-size:11.5px;margin-top:2px;line-height:1.4}
.sz-row .d{font-family:var(--mono);font-size:13px;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.sz-row .r{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right}

:root[data-theme="light"] .img-row,
:root[data-theme="light"] .sz-row,
:root[data-theme="light"] .f input[type=color]{background:#FFFFFF}
:root[data-theme="light"] .sz-row:hover{background:var(--ember-dim)}
:root[data-theme="light"] .img-stage{
  background:
    linear-gradient(rgba(20,20,22,.02),rgba(20,20,22,.02)),
    repeating-conic-gradient(rgba(20,20,22,.055) 0% 25%,transparent 0% 50%) 0 0/16px 16px;
}

@media (max-width:640px){
  .sz-head{display:none}
  .sz-row{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .sz-row .p{grid-column:1/-1}
  .sz-row .r{text-align:left}
  .img-row{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .img-row .ip{text-align:left}
}
@media (pointer:coarse){
  .sz-row{min-height:44px}
  .f input[type=range]{height:44px}
}

/* ──────── copyable format rows (colour + timestamp) ──────── */
.cc-list{display:grid;gap:7px}
.cc-row{
  display:grid;grid-template-columns:130px minmax(0,1fr) 54px;gap:12px;align-items:center;
  width:100%;text-align:left;font-family:inherit;cursor:pointer;transition:.16s;
  background:rgba(0,0,0,.28);border:1px solid var(--line-2);border-radius:11px;padding:11px 13px;
}
.cc-row:hover{border-color:var(--ember-line);background:var(--ember-dim)}
.cc-row .k{
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);
}
.cc-row .v{
  font-family:var(--mono);font-size:13px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cc-row .c{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ember);text-align:right;
}

/* ──────── colour ramp + swatch ──────── */
.cc-ramp{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;margin-top:4px}
.cc-sw{
  height:44px;border:1px solid var(--line-2);border-radius:8px;cursor:pointer;
  padding:0;transition:transform .15s ease,border-color .15s ease;
}
.cc-sw:hover{transform:translateY(-2px);border-color:var(--ember-line)}
.cc-big{
  height:130px;border-radius:14px;border:1px solid var(--line-2);
  transition:background .18s ease;
}

:root[data-theme="light"] .cc-row{background:#FFFFFF}
:root[data-theme="light"] .cc-row:hover{background:var(--ember-dim)}

@media (max-width:620px){
  .cc-row{grid-template-columns:minmax(0,1fr) 54px;row-gap:3px}
  .cc-row .k{grid-column:1/-1}
  .cc-ramp{grid-template-columns:repeat(5,1fr)}
}
@media (pointer:coarse){ .cc-row{min-height:44px} }

/* ═══════════════════════════════════════════════════════════════
   NARROW-SCREEN FIXES
   Grid and flex children default to min-width:auto, so a long word or
   a wide input stops the column shrinking and pushes the page sideways.
   ═══════════════════════════════════════════════════════════════ */
.calc-grid > *,.inv-grid > *,.mock-grid > *,.f2 > *,.f3 > *{min-width:0}
.f textarea,.ta-out,.f input,.f select{max-width:100%}

@media (max-width:380px){
  /* five swatches leaves each 43px; four gives a comfortable target */
  .cc-ramp{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:400px){
  /* the description box was squeezed to 24px — stack the line instead */
  .inv-row{grid-template-columns:1fr 1fr;grid-template-areas:"d d" "q r" "x x";gap:7px}
  .inv-row .ir-d{grid-area:d}
  .inv-row .ir-q{grid-area:q}
  .inv-row .ir-r{grid-area:r}
  .inv-row .ir-x{grid-area:x;min-height:38px}
}

@media (pointer:coarse){
  /* the logo shrinks to just the mark on small screens — keep it tappable */
  .logo{min-width:44px}
  .foot-links a,.crumbs a{min-width:44px;justify-content:center}
  .cc-sw{min-height:44px}
}

/* A long URL or path inside <code> has no break opportunity, so it pushes
   the whole page sideways on a narrow screen. Let it wrap. */
code{overflow-wrap:anywhere;word-break:break-word}

@media (pointer:coarse){
  .inv-row input{min-height:44px}
  .inv-row .ir-x{min-height:44px}
  .f input[type=color]{min-width:44px;min-height:46px}
}

/* invoice / quote logo */
.ivd-logo{margin-bottom:14px}
.ivd-logo img{max-height:58px;max-width:190px;width:auto;height:auto;display:block}

/* ──────── quote-specific document bits ──────── */
.inv-row.qrow{grid-template-columns:minmax(0,1fr) 56px 84px 52px 34px}
.ir-o{
  display:flex;align-items:center;justify-content:center;gap:4px;
  background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:9px;
  cursor:pointer;font-family:var(--mono);font-size:10px;color:var(--faint);
  text-transform:uppercase;letter-spacing:.06em;
}
.ir-o input{width:14px;height:14px;accent-color:var(--ember);cursor:pointer}
.ir-o:has(input:checked){border-color:var(--ember-line);background:var(--ember-dim);color:var(--ember)}
:root[data-theme="light"] .ir-o{background:#FFFFFF}

.ivd-opt td{opacity:.72}
.ivd-optag{
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:#8B6A00;background:rgba(232,166,46,.18);border-radius:4px;padding:2px 5px;margin-left:6px;
  white-space:nowrap;
}
.ivd-tot .tr.opt{color:#8B6A00;border-top:1px dashed #E5E7EC;margin-top:6px;padding-top:9px}
.ivd-tot .tr.opt b{color:#8B6A00}
.ivd-tot .tr.dep{font-size:12px;color:#6B6F7A}

.ivd-sign{margin-top:26px;padding-top:16px;border-top:1px solid #E5E7EC}
.ivd-acc{font-size:12.5px;color:#5A5D66;line-height:1.6;margin-bottom:22px}
.ivd-sigrow{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ivd-line{display:block;border-bottom:1px solid #9AA0AC;height:26px}
.ivd-cap{
  display:block;margin-top:6px;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#6B6F7A;
}
@media (max-width:560px){
  .inv-row.qrow{grid-template-columns:1fr 1fr;grid-template-areas:"d d" "q r" "o x";gap:7px}
  .inv-row.qrow .ir-d{grid-area:d}
  .inv-row.qrow .ir-q{grid-area:q}
  .inv-row.qrow .ir-r{grid-area:r}
  .inv-row.qrow .ir-o{grid-area:o;min-height:40px}
  .inv-row.qrow .ir-x{grid-area:x}
  .ivd-sigrow{grid-template-columns:1fr;gap:16px}
}
@media (pointer:coarse){ .ir-o{min-height:44px} }

/* ═══════════════════════════════════════════════════════════════
   BUTTON ROWS
   The three button styles grew separately: .btn-copy had no vertical
   padding at all, .btn-ghost had 12px, and .btn had 16px plus a
   margin-top meant for standalone use. Side by side they never lined
   up. Inside a .btn-row they now share one box.
   ═══════════════════════════════════════════════════════════════ */
.btn-row{align-items:stretch}
.btn-row > .btn,
.btn-row > .btn-copy,
.btn-row > .btn-ghost,
.btn-row > button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 22px;margin:0;
  font-family:var(--body);font-size:14.5px;font-weight:700;
  border-radius:11px;line-height:1;white-space:nowrap;text-decoration:none;
}
.btn-row > .btn-ghost{font-weight:600}
.btn-row > .btn{box-shadow:0 12px 28px -16px rgba(255,81,35,.7)}
.btn-row > .btn:hover{transform:translateY(-1px)}

/* a copy button used on its own still needs a height of its own */
.btn-copy{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;line-height:1;
}

/* ═══════════════════════════════════════════════════════════════
   CREATIVE SIZE LIBRARY
   Rows are labels wrapping a checkbox, not links — clicking one
   ticks it for the brief rather than navigating away.
   ═══════════════════════════════════════════════════════════════ */
.plat-chips{display:flex;flex-wrap:wrap;gap:7px}
.pchip{
  font-family:var(--body);font-size:13px;background:rgba(255,255,255,.045);
  border:1px solid var(--line);color:var(--muted);border-radius:99px;
  padding:8px 14px;cursor:pointer;transition:.16s;
}
.pchip:hover{border-color:rgba(255,255,255,.22);color:var(--text)}
.pchip.on{background:var(--ember-dim);border-color:var(--ember-line);color:var(--ember);font-weight:600}

.cs-table{display:grid;gap:6px;margin-top:6px}
.cs-group{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:20px 0 6px;padding-bottom:8px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ember);
}
.cs-group:first-child{margin-top:0}
.cs-group b{color:var(--faint);font-weight:600}
.cs-gcopy{
  font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;
  background:var(--ember-dim);border:1px solid var(--ember-line);color:var(--ember);
  border-radius:99px;padding:7px 14px;cursor:pointer;transition:.16s;white-space:nowrap;
}
.cs-gcopy:hover{background:var(--ember);color:#1A0800}
.cs-gcopy.done{background:rgba(63,191,107,.9);border-color:transparent;color:#04220F}

.cs-row{
  display:grid;grid-template-columns:22px 34px minmax(0,1fr) 116px 62px minmax(0,1fr);
  gap:12px;align-items:center;cursor:pointer;
  background:rgba(0,0,0,.28);border:1px solid var(--line-2);border-radius:11px;
  padding:11px 13px;transition:.14s;
}
.cs-row:hover{border-color:rgba(255,255,255,.2)}
.cs-row.on{border-color:var(--ember-line);background:var(--ember-dim)}
.cs-row input{width:18px;height:18px;accent-color:var(--ember);cursor:pointer;margin:0}
.cs-name{color:var(--text);font-size:14px;min-width:0}
.cs-tag{
  display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;border-radius:4px;padding:2px 6px;margin-left:7px;vertical-align:1px;
}
.cs-tag.ad{background:rgba(255,81,35,.16);color:var(--ember)}
.cs-tag.organic{background:rgba(255,255,255,.08);color:var(--muted)}
.cs-tag.m{background:rgba(232,166,46,.14);color:#E8A62E}
.cs-note{display:block;color:var(--faint);font-size:12px;margin-top:4px;line-height:1.45}
.cs-dim{
  font-family:var(--mono);font-size:13.5px;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.cs-ratio{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.cs-meta{color:var(--faint);font-size:12px;min-width:0;line-height:1.45}

:root[data-theme="light"] .cs-row,
:root[data-theme="light"] .pchip{background:#FFFFFF}
:root[data-theme="light"] .cs-row.on,
:root[data-theme="light"] .pchip.on{background:var(--ember-dim)}
:root[data-theme="light"] .cs-tag.organic{background:rgba(20,20,22,.07)}
:root[data-theme="light"] .cs-tag.m{color:#7A5400;background:rgba(232,166,46,.2)}

@media (max-width:820px){
  .cs-row{grid-template-columns:22px 34px minmax(0,1fr) 104px;row-gap:6px}
  .cs-ratio{grid-column:4;text-align:right}
  .cs-meta{grid-column:3/-1;padding-left:0}
}
@media (max-width:520px){
  .cs-group{flex-direction:column;align-items:flex-start;gap:8px}
  .cs-gcopy{width:100%}
}
@media (pointer:coarse){
  .cs-row{min-height:44px}
  /* a one-letter platform like "X" is only 38px wide however tall it is */
  .pchip,.cs-gcopy{min-height:44px;min-width:44px}
  .cs-row input{width:22px;height:22px}
}

/* a scale drawing of each format, so the numbers mean something */
.cs-shape{display:grid;place-items:center;width:34px;height:28px}
.cs-shape i{
  display:block;border:1.5px solid var(--ember);border-radius:2px;
  background:var(--ember-dim);
}
:root[data-theme="light"] .cs-shape i{background:rgba(217,59,16,.12)}
@media (max-width:820px){ .cs-shape{grid-row:1} }