/* The compress tool (/compress-image). Its classes are .cm-*; the shell's are
 * .ch-* in site.css. Declares NO tokens: site.css owns the palette (light,
 * dark, system), and this file loads before it (tool.html.twig head_extra).
 *
 * Reference: design/compress-image-visual.html and design/visual-system.md; the
 * rules below were lifted from the mockup's .cm-* section and adapted where the
 * real markup differs (real <img>s in the comparison, rows built from a
 * <template>, the custom-size row, the per-row upload select).
 *
 * Nothing in the tool is fixed, sticky or absolutely positioned except inside
 * the comparison's own overflow:hidden box (UX §8, the 2026-10-15 lesson).
 */
.cm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.cm-tool{min-width:0;}

.cm-grid{display:grid;gap:.75rem;grid-template-areas:"goal" "files" "adv";}
.cm-goal{grid-area:goal;}.cm-files{grid-area:files;}.cm-advp{grid-area:adv;}
@media (min-width:62rem){
  .cm-grid{grid-template-columns:minmax(0,25rem) minmax(0,1fr);grid-template-rows:auto 1fr;
    grid-template-areas:"goal files" "adv files";gap:1rem 1.25rem;align-items:start;}
}
.cm-panel{background:var(--ch-card);border:1px solid var(--ch-rule);border-radius:var(--ch-r-card);
  box-shadow:var(--ch-sh-2);padding:1.1rem 1.1rem 1.15rem;}
@media (min-width:62rem){.cm-panel{padding:1.35rem;}}
.cm-advp{padding-top:.2rem;padding-bottom:.2rem;}
.cm-step{display:flex;align-items:center;gap:.6rem;margin:0 0 .85rem;font-weight:660;font-size:1rem;letter-spacing:-.01em;}
.cm-step__n{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;
  background:var(--ch-action-soft);color:var(--ch-action);font-size:.8125rem;font-weight:720;}
.cm-sub{display:block;margin:0 0 .5rem;padding:0;font-size:.8125rem;font-weight:600;color:var(--ch-ink-2);}

/* chips: real radios inside labels */
.cm-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;border:0;min-width:0;}
.cm-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-height:46px;
  padding:.45rem .85rem;border:1px solid var(--ch-rule-strong);border-radius:var(--ch-r-ctl);background:var(--ch-card);
  font-size:.9375rem;font-weight:600;line-height:1.15;color:var(--ch-ink);cursor:pointer;
  transition:background-color var(--ch-t-fast) ease,border-color var(--ch-t-fast) ease,color var(--ch-t-fast) ease,box-shadow var(--ch-t) var(--ch-ease);}
.cm-chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;}
.cm-chip small{font-size:.8125rem;font-weight:500;color:var(--ch-ink-2);}
.cm-chip:hover{border-color:var(--ch-action);background:var(--ch-action-soft);}
.cm-chip:has(input:checked){background:var(--ch-action);border-color:var(--ch-action);color:var(--ch-action-ink);box-shadow:var(--ch-sh-btn);}
.cm-chip:has(input:checked) small{color:var(--ch-action-ink);opacity:.9;}
.cm-chip:has(input:focus-visible){outline:3px solid var(--ch-action);outline-offset:2px;}
.cm-chip--other{border-style:dashed;}
.cm-chips--sizes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;}
.cm-chips--sizes legend{grid-column:1/-1;}
.cm-chips--sizes .cm-chip{padding:.45rem .2rem;white-space:nowrap;font-variant-numeric:tabular-nums;}
.cm-chips--items .cm-chip{flex-direction:column;align-items:flex-start;gap:.1rem;padding:.45rem .8rem;}

/* fields */
.cm-field{display:flex;flex-direction:column;gap:.3rem;font-size:.8125rem;font-weight:600;color:var(--ch-ink-2);}
.cm-input,.cm-select{font:inherit;font-size:1rem;font-weight:500;min-height:46px;padding:.55rem .75rem;color:var(--ch-ink);
  background:var(--ch-card);border:1px solid var(--ch-rule-strong);border-radius:var(--ch-r-ctl);
  transition:border-color var(--ch-t-fast) ease,box-shadow var(--ch-t-fast) ease;}
.cm-input:hover,.cm-select:hover{border-color:var(--ch-ink-3);}
.cm-input:focus-visible,.cm-select:focus-visible{outline:none;border-color:var(--ch-action);box-shadow:0 0 0 3px var(--ch-action-glow);}
.cm-select{appearance:none;-webkit-appearance:none;padding-right:2.3rem;background-image:var(--ch-select-chev);
  background-repeat:no-repeat;background-position:right .75rem center;}
.cm-input--num{width:6.5rem;font-variant-numeric:tabular-nums;}
.cm-custom{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem .6rem;margin:.75rem 0 0;padding:.8rem;
  background:var(--ch-well);border-radius:12px;}

/* one disclosure component: forms + pixel/format */
.cm-adv{margin:0;}
.cm-adv>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  min-height:56px;padding:.35rem 0;font-size:.9375rem;font-weight:640;color:var(--ch-ink);border-radius:8px;}
.cm-adv>summary::-webkit-details-marker{display:none;}
.cm-adv>summary small{display:block;font-weight:500;font-size:.8125rem;color:var(--ch-ink-2);margin-top:.1rem;}
.cm-adv__chev{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:999px;background:var(--ch-well);
  color:var(--ch-ink-2);transition:transform var(--ch-t) var(--ch-ease),background-color var(--ch-t-fast) ease;}
.cm-adv>summary:hover .cm-adv__chev{background:var(--ch-action-soft);color:var(--ch-action);}
.cm-adv[open]>summary .cm-adv__chev{transform:rotate(180deg);}
.cm-forms{margin:1rem 0 0;padding-top:.15rem;border-top:1px solid var(--ch-rule);}
.cm-forms[open]>summary small{display:none;}
.cm-adv__b{display:grid;gap:.85rem;padding:.25rem 0 .9rem;}
.cm-row2{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end;}
.cm-check{display:flex;gap:.6rem;align-items:flex-start;min-height:44px;padding-top:.3rem;font-size:.9375rem;}
.cm-check input{width:20px;height:20px;margin:.1rem 0 0;flex:none;accent-color:var(--ch-action);}
.cm-country{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;margin:.1rem 0 0;}
.cm-country label{font-size:.875rem;font-weight:600;color:var(--ch-ink-2);}
.cm-country .cm-select{flex:1 1 11rem;}
.cm-why{display:flex;align-items:center;gap:.35rem;margin:.45rem 0 .8rem;font-size:.8125rem;color:var(--ch-ink-2);}
.cm-why svg{flex:none;color:var(--ch-ink-3);}
.cm-spec{margin:.9rem 0 .2rem;padding:.8rem .9rem;background:var(--ch-action-soft);border-radius:12px;font-size:.9375rem;line-height:1.5;}
.cm-spec__h{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .5rem;margin:0;}
.cm-spec__h b{font-weight:680;}
.cm-spec__src{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .5rem;margin:.45rem 0 0;font-size:.8125rem;color:var(--ch-ink-2);}
.cm-tag{display:inline-flex;align-items:center;gap:.25rem;padding:.1rem .45rem;border-radius:var(--ch-r-lbl);
  background:var(--ch-card);border:1px solid var(--ch-rule);font-size:.75rem;font-weight:600;color:var(--ch-ink-2);white-space:nowrap;}
.cm-none{margin:.5rem 0 .3rem;font-size:.9375rem;color:var(--ch-ink-2);}

/* the goal, folded to one line (phones, once results exist) */
.cm-goalsum{display:none;align-items:center;justify-content:space-between;gap:.75rem;}
.cm-goalsum__t{min-width:0;font-size:.9375rem;line-height:1.35;color:var(--ch-ink-2);}
.cm-goalsum__k{display:block;font-size:.75rem;font-weight:600;color:var(--ch-ink-3);}
.cm-goalsum__t b{color:var(--ch-ink);font-weight:680;}
@media (max-width:61.99rem){
  .cm--collapsed .cm-goal__body,.cm--collapsed .cm-advp,.cm--collapsed .cm-goal .cm-step{display:none;}
  .cm--collapsed .cm-goalsum{display:flex;}
  .cm--collapsed .cm-goal{padding:.55rem .6rem .55rem 1rem;}
}
.cm-goal--need{border-color:var(--ch-action);box-shadow:0 0 0 3px var(--ch-action-glow),var(--ch-sh-2);}

/* =====================================================================
   STEP 2 — drop zone
   ===================================================================== */
.cm-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:1.6rem 1.25rem 1.4rem;border:1.5px dashed var(--ch-rule-strong);border-radius:14px;
  background:radial-gradient(140% 100% at 50% 0%,color-mix(in srgb,var(--ch-action-soft) 80%,transparent) 0%,transparent 70%),var(--ch-well);
  transition:border-color var(--ch-t) ease,background-color var(--ch-t) ease;}
@media (min-width:62rem){.cm-drop{min-height:24rem;}}
.cm-drop.is-over{border-color:var(--ch-action);border-style:solid;background:var(--ch-action-soft);}
.cm-drop__i{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:var(--ch-card);
  color:var(--ch-action);box-shadow:var(--ch-sh-2);border:1px solid var(--ch-rule);}
.cm-drop__t{margin:.95rem 0 1.1rem;font-weight:700;font-size:1.25rem;letter-spacing:-.018em;line-height:1.25;}
.cm-drop .ch-btn{width:100%;max-width:21rem;}
.cm-drop__hint{margin:.8rem 0 0;font-size:.9375rem;color:var(--ch-ink-2);}
.cm-kbd{display:inline-block;padding:0 .35rem;border:1px solid var(--ch-rule-strong);border-bottom-width:2px;border-radius:5px;
  background:var(--ch-card);font-size:.8125rem;font-weight:600;color:var(--ch-ink);line-height:1.5;}
.cm-drop__fine{margin:.4rem 0 0;font-size:.8125rem;color:var(--ch-ink-2);}
.cm-safe{display:inline-flex;align-items:center;gap:.4rem;margin:.9rem 0 0;padding:.3rem .7rem .3rem .55rem;border-radius:999px;
  background:var(--ch-ok-soft);color:var(--ch-ok);font-size:.8125rem;font-weight:640;}
.cm-safe svg{flex:none;}
@media (hover:none) and (pointer:coarse){
  .cm-only-pointer{display:none !important;}
  .cm-drop{padding:0;border:0;background:none;}
  .cm-drop .ch-btn{max-width:none;}
  .cm-drop__fine{margin-top:.6rem;}
  .cm-safe{margin-top:.5rem;}
}
@media not ((hover:none) and (pointer:coarse)){.cm-only-touch{display:none !important;}}

/* =====================================================================
   RESULTS — list head, notices, rows, badges, progress
   ===================================================================== */
.cm-head{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:0 0 .9rem;}
.cm-head__t{flex:1 1 13rem;margin:0;font-weight:680;font-size:1.0625rem;letter-spacing:-.012em;line-height:1.3;}
.cm-head__t small{display:block;margin-top:.15rem;font-weight:500;font-size:.875rem;letter-spacing:0;color:var(--ch-ink-2);}
@media (max-width:40rem){.cm-head .ch-btn--primary{flex:1 1 100%;}}

.cm-notice{display:flex;gap:.65rem;align-items:flex-start;margin:0 0 .9rem;padding:.75rem .9rem;border-radius:12px;
  background:var(--ch-well);border:1px solid var(--ch-rule);font-size:.9375rem;line-height:1.5;}
.cm-notice>svg{flex:none;margin-top:.15rem;color:var(--ch-action);}
.cm-notice p{margin:0;}
.cm-notice--alert{background:var(--ch-warn-soft);border-color:transparent;}
.cm-notice--alert>svg{color:var(--ch-warn);}

.cm-list{list-style:none;margin:0;padding:0;}
.cm-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:.25rem .85rem;align-items:center;
  padding:.75rem 0;border-top:1px solid var(--ch-rule);}
.cm-row:last-child{border-bottom:1px solid var(--ch-rule);}
.cm-thumb{display:block;width:56px;height:56px;border-radius:var(--ch-r-photo);overflow:hidden;flex:none;
  box-shadow:0 0 0 1px rgba(15,26,46,.10);background:#e9edf3;}
.cm-thumb svg{display:block;width:100%;height:100%;}
.cm-thumb--bad{display:grid;place-items:center;background:var(--ch-well);color:var(--ch-ink-3);box-shadow:0 0 0 1px var(--ch-rule) inset;}
.cm-thumb--bad svg{width:24px;height:24px;}
.cm-row__b{min-width:0;}
.cm-row__n{margin:0;font-weight:620;font-size:.9375rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cm-row__m{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .35rem;margin:.1rem 0 0;font-size:.8125rem;color:var(--ch-ink-2);}
.cm-row__m .ch-num,.cm-row__m b{white-space:nowrap;}
.cm-row__m svg{color:var(--ch-ink-3);}
.cm-row__m b{color:var(--ch-ink);font-weight:700;}
.cm-row__a{display:flex;gap:.25rem;}
@media (max-width:30rem){.cm-row{grid-template-columns:48px minmax(0,1fr) auto;gap:.25rem .7rem;}.cm-thumb{width:48px;height:48px;}}
.cm-row__x{grid-column:2/span 2;display:flex;align-items:center;gap:.5rem;}
.cm-row__x .cm-select{min-height:44px;font-size:.875rem;padding:.35rem 2.1rem .35rem .6rem;max-width:100%;}

/* status badges: icon + words, never colour alone */
.cm-st{display:inline-flex;align-items:flex-start;gap:.3rem;margin:.35rem 0 0;padding:.15rem .5rem .15rem .4rem;
  border-radius:var(--ch-r-lbl);font-size:.8125rem;font-weight:620;line-height:1.35;max-width:100%;}
.cm-st svg{flex:none;margin-top:.12rem;}
.cm-st--hit{background:var(--ch-ok-soft);color:var(--ch-ok);}
.cm-st--near,.cm-st--fail{background:var(--ch-warn-soft);color:var(--ch-warn);}
.cm-st--wait{padding-left:0;background:none;color:var(--ch-ink-2);font-weight:500;}

.cm-ico{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--ch-r-ctl);
  border:1px solid var(--ch-rule-strong);background:var(--ch-card);color:var(--ch-ink);cursor:pointer;box-shadow:var(--ch-sh-1);
  transition:border-color var(--ch-t-fast) ease,color var(--ch-t-fast) ease,background-color var(--ch-t-fast) ease;}
.cm-ico:hover{border-color:var(--ch-action);color:var(--ch-action);background:var(--ch-action-soft);}
.cm-ico--plain{border-color:transparent;background:none;box-shadow:none;color:var(--ch-ink-2);}

/* progress: determinate fill + a sheen that stops under reduced motion */
.cm-bar{position:relative;height:6px;max-width:18rem;margin:.45rem 0 0;border-radius:99px;background:var(--ch-action-soft);overflow:hidden;}
.cm-bar>span{position:relative;display:block;height:100%;border-radius:inherit;background:var(--ch-action);overflow:hidden;
  transition:width var(--ch-t-slow) var(--ch-ease);}
.cm-bar>span::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%);animation:cm-sheen 1.4s var(--ch-ease) infinite;}
@keyframes cm-sheen{to{transform:translateX(100%);}}

/* the size gauge — the tool's motif: where the file landed against the window */
.cm-gauge{--lo:0;--hi:.87;--at:.835;margin:.15rem 0 0;max-width:22rem;}
.cm-gauge__t{position:relative;height:8px;border-radius:99px;background:var(--ch-well);box-shadow:0 0 0 1px var(--ch-rule) inset;}
.cm-gauge__win{position:absolute;top:0;bottom:0;left:calc(var(--lo)*100%);width:calc((var(--hi) - var(--lo))*100%);
  border-radius:99px;background:var(--ch-ok-soft);box-shadow:0 0 0 1px color-mix(in srgb,var(--ch-ok) 45%,transparent) inset;}
.cm-gauge__win::after{content:"";position:absolute;right:-1px;top:-3px;bottom:-3px;width:2px;border-radius:1px;background:var(--ch-ok);}
.cm-gauge--miss .cm-gauge__win::after{background:var(--ch-ink-2);}
.cm-gauge__at{position:absolute;top:50%;left:calc(var(--at)*100%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:var(--ch-ok);box-shadow:0 0 0 3px var(--ch-card);}
.cm-gauge--miss .cm-gauge__at{background:var(--ch-warn);}
.cm-gauge__l{position:relative;height:1.1rem;margin-top:.25rem;font-size:.75rem;font-weight:560;color:var(--ch-ink-2);font-variant-numeric:tabular-nums;}
.cm-gauge__l span{position:absolute;white-space:nowrap;}
.cm-gauge__l .lo{left:0;}
.cm-gauge__l .hi{left:calc(var(--hi)*100%);transform:translateX(-50%);}
.cm-gauge__l .mn{left:calc(var(--lo)*100%);transform:translateX(-50%);}
.cm-gauge--mini{max-width:13rem;margin-top:.45rem;}
.cm-gauge--mini .cm-gauge__t{height:6px;}
.cm-gauge--mini .cm-gauge__at{width:12px;height:12px;margin:-6px 0 0 -6px;box-shadow:0 0 0 2px var(--ch-card);}

/* fix box: one sentence of cause, one button that fixes it */
.cm-fix{grid-column:1/-1;margin:.45rem 0 .1rem;padding:.8rem .9rem;border-radius:12px;background:var(--ch-well);
  border:1px solid var(--ch-rule);font-size:.9375rem;line-height:1.5;}
.cm-fix p{margin:0 0 .65rem;}
.cm-fix p:last-child{margin:0;}

.cm-more{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:.9rem 0 0;}

/* =====================================================================
   SINGLE RESULT + comparison
   ===================================================================== */
.cm-result{animation:cm-in var(--ch-t-slow) var(--ch-ease) both;}
@keyframes cm-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.cm-result__n{margin:0 0 .2rem;font-size:.875rem;color:var(--ch-ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cm-result__top{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .8rem;margin:0 0 .55rem;}
.cm-big{display:flex;align-items:center;gap:.5rem;margin:0;font-size:2rem;font-weight:780;letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums;}
.cm-big s{text-decoration:none;font-size:1.0625rem;font-weight:540;letter-spacing:0;color:var(--ch-ink-2);}
.cm-big svg{color:var(--ch-ink-3);}
.cm-result__top .cm-st{margin:0;font-size:.875rem;padding:.25rem .6rem .25rem .45rem;}
.cm-result .ch-acts{margin:.85rem 0 1rem;}
.cm-result .ch-acts .ch-btn--primary{flex:1 1 15rem;}
.cm-result .cm-share{min-height:56px;border-radius:14px;}
@media (max-width:30rem){.cm-result .ch-acts .ch-btn--primary{flex:1 1 0;padding:.8rem .9rem;}.cm-result .cm-share{flex:none;width:56px;padding:0;}.cm-result .cm-share span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}}
.cm-cmp{margin:1rem 0 0;}
/* The visitor's own picture: fixed colours, never themed (as the .pub paper). */
/* As wide as the column allows and no taller than min(24rem,55vh): the width
 * follows from that height and the photo's own shape (--arn = width/height),
 * so the picture fills its box instead of sitting in grey bars. */
.cm-cmp__view{position:relative;width:min(100%,calc(min(24rem,55vh) * var(--arn,1.333)));aspect-ratio:var(--ar,4/3);margin:0 auto;border-radius:12px;
  overflow:hidden;background:#dfe6ee;box-shadow:0 0 0 1px rgba(15,26,46,.10);--split:50%;}
.cm-cmp__img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;}
.cm-cmp__img--after{clip-path:inset(0 0 0 var(--split));}
.cm-cmp__img:not([src]){visibility:hidden;}
/* Actual pixels: both images are the same size, so 1:1 keeps them aligned. */
.cm-cmp--1to1 .cm-cmp__img{object-fit:none;object-position:center;image-rendering:pixelated;}
.cm-cmp__line{position:absolute;top:0;bottom:0;left:var(--split);width:2px;margin-left:-1px;background:#fff;
  box-shadow:0 0 0 1px rgba(10,15,25,.18);pointer-events:none;}
.cm-cmp__knob{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:40px;height:40px;margin:-20px 0 0 -20px;
  border-radius:50%;background:#fff;color:#0f1a2e;box-shadow:0 2px 10px rgba(10,15,25,.35);}
.cm-cmp__tag{position:absolute;top:.6rem;padding:.2rem .55rem;border-radius:999px;background:rgba(10,15,25,.70);color:#fff;
  font-size:.75rem;font-weight:620;letter-spacing:.01em;pointer-events:none;}
.cm-cmp__tag--l{left:.6rem;}.cm-cmp__tag--r{right:.6rem;}
.cm-cmp__range{display:block;width:100%;margin:.65rem 0 .2rem;height:28px;accent-color:var(--ch-action);cursor:pointer;}
.cm-cmp__opts{display:flex;justify-content:space-between;align-items:center;gap:.5rem .8rem;flex-wrap:wrap;font-size:.875rem;color:var(--ch-ink-2);}
.cm-seg{display:inline-flex;padding:3px;gap:2px;border-radius:12px;background:var(--ch-well);border:1px solid var(--ch-rule);}
.cm-seg button{min-height:40px;padding:.3rem .85rem;border:0;border-radius:9px;background:none;font:inherit;font-size:.875rem;
  font-weight:600;color:var(--ch-ink-2);cursor:pointer;transition:background-color var(--ch-t-fast) ease,color var(--ch-t-fast) ease;}
.cm-seg button:hover{color:var(--ch-ink);}
.cm-seg button[aria-pressed="true"]{background:var(--ch-raised);color:var(--ch-ink);box-shadow:var(--ch-sh-1),0 0 0 1px var(--ch-rule);}
.cm-report{display:flex;flex-wrap:wrap;gap:.25rem .9rem;margin:.85rem 0 0;padding:.7rem .85rem;border-radius:12px;background:var(--ch-well);
  font-size:.8125rem;color:var(--ch-ink-2);font-variant-numeric:tabular-nums;}
.cm-report span{display:inline-flex;align-items:center;gap:.35rem;}
.cm-report svg{flex:none;color:var(--ch-ink-3);}
.cm-report b{color:var(--ch-ink);font-weight:640;}

/* =====================================================================
   PROMISE (under the tool)
   ===================================================================== */
.cm-promise{margin:1.25rem 0 0;display:grid;gap:1rem;padding:1.15rem 1.25rem;border-radius:var(--ch-r-card);
  background:var(--ch-inverse);color:var(--ch-inverse-ink);}
@media (min-width:62rem){.cm-promise{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:1.35rem 1.6rem;}}
.cm-promise__m{display:flex;gap:.85rem;align-items:flex-start;}
.cm-promise__i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);color:#b4c6ff;}
.cm-promise__t{margin:0 0 .2rem;font-weight:720;font-size:1.1875rem;letter-spacing:-.02em;line-height:1.25;}
.cm-promise__s{margin:0;font-size:.9375rem;color:var(--ch-inverse-ink-2);max-width:56ch;}
.cm-promise ul{display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:.45rem 1.2rem;list-style:none;margin:0;padding:0;
  font-size:.875rem;color:#dfe6f5;}
.cm-promise li{display:flex;align-items:center;gap:.4rem;}
.cm-promise li svg{flex:none;color:#7fe0b4;}

.cm-use{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.45rem .9rem;border-radius:10px;border:1px solid var(--ch-rule-strong);
  background:var(--ch-card);font-size:.9375rem;font-weight:600;color:var(--ch-action);text-decoration:none;box-shadow:var(--ch-sh-1);}
.cm-use:hover{border-color:var(--ch-action);background:var(--ch-action-soft);text-decoration:none;}
.cm-checked{font-size:.875rem;color:var(--ch-ink-2);}

/* ---- pieces the real markup adds to the mockup ---- */
.cm-custom__min{display:contents;}
.cm-err{flex:1 1 100%;margin:0;font-size:.875rem;font-weight:600;color:var(--ch-warn);}
.cm-chips--portals{margin:.85rem 0 0;}
.cm-sub--q{margin-top:1rem;}
.cm-chips--items{margin:0;}
.cm-spec__chg{margin:.45rem 0 0;font-size:.8125rem;font-weight:600;color:var(--ch-warn);}
.cm-notice__b{flex:1;min-width:0;}
.cm-notice__b p+p{margin-top:.45rem;}
.cm-notice__tip{font-size:.875rem;color:var(--ch-ink-2);}
.cm-bar--wide{max-width:none;}
.cm-bar--wide>span{width:0;}
.cm-result__acts{margin:.85rem 0 0;}
.cm-result .cm-fix{margin:.75rem 0 0;}
.cm-result .cm-gauge{margin-top:.35rem;}
/* the thumbnail opens the comparison under its row */
button.cm-thumb{padding:0;border:0;cursor:pointer;position:relative;display:grid;place-items:center;}
.cm-thumb img{display:block;width:100%;height:100%;object-fit:cover;}
.cm-thumb img:not([src]){display:none;}
.cm-thumb__i{width:24px;height:24px;color:var(--ch-ink-3);}
.cm-thumb img[src]+.cm-thumb__i{display:none;}
.cm-thumb--bad{cursor:default;}
.cm-row__cmp{grid-column:1/-1;min-width:0;}
.cm-row__cmp:empty{display:none;}
.cm-row__x{grid-column:2/-1;}
.cm-row .cm-fix{grid-column:2/-1;}
@media (max-width:30rem){.cm-row .cm-fix,.cm-row__x{grid-column:1/-1;}}
a.cm-ico{text-decoration:none;}
.cm-anchor{display:block;position:relative;top:-1rem;visibility:hidden;}
.ch-prose .cm-use{margin-right:.6rem;}
.ch-prose p:has(>.cm-use){display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .2rem;}
.cm-cty .cm-none{margin-top:.85rem;}
.cm-drop .cm-none{margin:.6rem 0 0;}

@media (prefers-reduced-motion:reduce){
  .cm-bar>span::after{display:none;}
  .cm-result{animation:none;}
}

/* hooks the script finds things by; listed so every class in the markup has a rule */
.cm-portal{min-width:0;}
.cm-adv--px{min-width:0;}