/* /tools/cpm-calculator. Loads after tools.css via `css: tools, cpm-calculator`. */
.cpm-solve { grid-column: 1 / -1; }
.cpm-solve .pg-options label { min-height: 44px; }
.cpm-solve .pg-options label:has(input:checked) { background-color: var(--dark); color: var(--light); border-color: var(--dark); }
.cpm-solve .pg-options input { accent-color: var(--light); }
.cpm-solve .pg-options label:focus-within { outline: 2px solid var(--dark); outline-offset: 2px; }
.pg-field.is-solved input[type=text] { background-color: var(--bg); border-style: dashed; }
.pg-field .cpm-tag { display: none; font-family: var(--font--mono); font-size: 11px; letter-spacing: var(--letter-spacing--2-0); text-transform: uppercase; opacity: .7; margin-left: 6px; }
.pg-field.is-solved .cpm-tag { display: inline; }
.cpm-opt { grid-column: 1 / -1; margin: 8px 0 -8px; font-family: var(--font--mono); font-size: var(--text--label); letter-spacing: var(--letter-spacing--2-0); text-transform: uppercase; opacity: .7; }
.tl-out .pg-stat.main .tl-formula { opacity: .8; font-size: 13px; overflow-wrap: anywhere; }
.cpm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.cpm-btn { font: inherit; font-size: 15px; font-weight: 500; min-height: 44px; padding: 10px 20px; border-radius: var(--radius--round); border: 1px solid var(--border-dark); background-color: transparent; color: inherit; cursor: pointer; }
.cpm-btn:hover { border-color: var(--dark); }
.cpm-btn:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }
.cpm-copied { font-size: 14px; opacity: .75; }

/* Two campaigns side by side */
.cpm-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cpm-side { display: flex; flex-direction: column; gap: 20px; padding: 32px; border-radius: var(--radius--small); background-color: var(--light); border: 1px solid var(--border-dark); }
.cpm-side h3 { margin: 0; font-family: var(--font--serif); font-weight: 400; font-size: 28px; line-height: 1.1; }
.cpm-side .pg-form { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cpm-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--border-dark); padding-top: 16px; }
.cpm-mini div { display: flex; flex-direction: column; gap: 4px; }
.cpm-mini b { font-family: var(--font--serif); font-weight: 400; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.cpm-mini span { font-family: var(--font--mono); font-size: var(--text--label); letter-spacing: var(--letter-spacing--2-0); text-transform: uppercase; opacity: .7; }
.cpm-verdict { margin: 16px 0 0; padding: 18px 22px; border-radius: var(--radius--xsmall); background-color: var(--dark); color: var(--light); font-family: var(--font--serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.3; }

/* Source links on cards */
.pg-card .cpm-src { margin-top: auto; padding-top: 4px; font-size: 14px; opacity: .75; }
.pg-card .cpm-src a, .pg-stat-when a, .pg-split-text a { color: inherit; }

@media screen and (max-width: 991px) { .cpm-side .pg-form { grid-template-columns: minmax(0, 1fr); } }
@media screen and (max-width: 767px) { .cpm-vs { grid-template-columns: minmax(0, 1fr); } .cpm-side { padding: 24px; } .cpm-side .pg-form { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media screen and (max-width: 479px) { .cpm-side { padding: 20px 16px; } .cpm-side .pg-form { gap: 8px; } .cpm-side .pg-field > span { font-size: 13px; } .cpm-side .pg-field input[type=text] { padding: 12px 10px; } .cpm-mini b { font-size: 24px; } }