/* The upscale tool (/upscale-image). Its own classes are .up-*; the photo-tool
 * components it shares with the compress tool (.cm-panel, .cm-drop, .cm-notice,
 * .cm-bar, .cm-big, .cm-cmp, .cm-promise, …) come from compress-image.css,
 * which the catalogue loads on this page too. Declares NO tokens: site.css owns
 * the palette.
 *
 * Nothing is fixed, sticky or absolutely positioned except inside the
 * comparison's own overflow:hidden box (the 2026-10-15 lesson).
 */
.up-grid{display:grid;gap:.875rem;}
@media (min-width:62rem){
  .up-grid{grid-template-columns:minmax(0,21rem) minmax(0,1fr);gap:1.25rem 1.5rem;align-items:start;}
}

/* 1 · what to do: two equal mode cards (radios in labels), then one options
 * row that keeps its height whichever mode is chosen. */
.up-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:0;padding:0;border:0;min-width:0;}
.up-mode{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:.55rem;
  align-items:center;min-height:84px;padding:.7rem .8rem;border:1px solid var(--ch-rule-strong);border-radius:14px;
  background:var(--ch-card);cursor:pointer;
  transition:border-color var(--ch-t-fast) ease,background-color var(--ch-t-fast) ease,box-shadow var(--ch-t) var(--ch-ease);}
.up-mode input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;}
.up-mode:hover{border-color:var(--ch-action);}
.up-mode:has(input:checked){border:2px solid var(--ch-action);padding:calc(.7rem - 1px) calc(.8rem - 1px);background:var(--ch-action-soft);}
.up-mode:has(input:focus-visible){outline:3px solid var(--ch-action);outline-offset:2px;}
.up-mode__i{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--ch-well);color:var(--ch-action);}
.up-mode:has(input:checked) .up-mode__i{background:var(--ch-action);color:var(--ch-action-ink);}
.up-mode__t{font-weight:680;font-size:1rem;letter-spacing:-.01em;line-height:1.2;color:var(--ch-ink);}
.up-mode__s{font-size:.8125rem;line-height:1.3;color:var(--ch-ink-2);}
/* Narrow places stack the icon over the words: a phone, and the desktop's 21rem side column, where two cards
 * side by side would break words in half. On desktop the cards stack one above the other instead. */
@media (max-width:30rem){.up-mode{grid-template-columns:1fr;row-gap:.35rem;align-items:start;}.up-mode__i{grid-row:auto;width:32px;height:32px;}}
@media (min-width:62rem){.up-modes{grid-template-columns:1fr;}.up-mode{min-height:68px;}}
.up-opts{min-height:3.25rem;margin:.75rem 0 0;}
.up-hint{margin:.1rem 0 0;font-size:.875rem;line-height:1.45;color:var(--ch-ink-2);}
.up-enl .up-hint{margin-top:.45rem;font-size:.8125rem;}
.up-seg{display:flex;width:100%;}
.up-seg button{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:.25rem;white-space:nowrap;font-variant-numeric:tabular-nums;}
.up-seg button[data-sizes]{flex:2 1 0;}
.up-seg button svg{transition:transform var(--ch-t) var(--ch-ease);}
.up-seg button[aria-expanded="true"] svg{transform:rotate(180deg);}
@media (max-width:61.99rem){.up-scale{padding-top:.9rem;padding-bottom:.95rem;}.up-scale .cm-step{margin-bottom:.6rem;}}

/* ready sizes: a grid of two-line chips under Enlarge, then Fill / Whole */
.up-sizes{margin:.85rem 0 0;}
.up-sizes__f{margin:0;padding:0;border:0;min-width:0;}
.up-sizes__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;}
@media (min-width:40rem) and (max-width:61.99rem){.up-sizes__g{grid-template-columns:repeat(3,minmax(0,1fr));}}
.up-size{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;min-height:46px;padding:.35rem .7rem;font-size:.875rem;}
.up-size small{font-size:.75rem;line-height:1.3;}
.up-fit{display:grid;gap:.4rem;margin:.85rem 0 0;}
.up-fit .cm-seg{justify-self:start;}
.up-fit__s{font-size:.8125rem;line-height:1.4;color:var(--ch-ink-2);}

/* working */
.up-work__m{display:grid;grid-template-columns:64px minmax(0,1fr);gap:.4rem .9rem;align-items:center;}
.up-work__th{width:64px;height:64px;}
.up-work__th img{display:block;width:100%;height:100%;object-fit:cover;}
.up-work__th img:not([src]){visibility:hidden;}
.up-work__b{min-width:0;}
.up-work__t{margin:0;font-weight:680;font-size:1.0625rem;letter-spacing:-.012em;line-height:1.3;}
.up-work__s{margin:.15rem 0 0;font-size:.875rem;color:var(--ch-ink-2);font-variant-numeric:tabular-nums;}
.up-work .cm-bar{margin-top:.55rem;}
.up-work__a{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;}
@media (min-width:40rem){.up-work__m{grid-template-columns:64px minmax(0,1fr) auto;}.up-work__a{grid-column:auto;flex-direction:column;align-items:flex-end;}}
.up-skip{font-size:.875rem;}
.up-slow{margin:1rem 0 0;}

/* result */
.up-tool .up-big:focus,.up-tool .up-big:focus-visible{outline:none;box-shadow:none;}
.up-tool .cm-big{flex-wrap:wrap;row-gap:.35rem;}
.up-x{display:inline-flex;align-items:center;padding:.15rem .5rem;border-radius:var(--ch-r-lbl);background:var(--ch-action-soft);
  color:var(--ch-action);font-size:.9375rem;font-weight:700;letter-spacing:0;white-space:nowrap;}
.up-variant{margin:.35rem 0 0;}
.up-acts{flex-wrap:wrap;}
.up-acts .ch-btn{flex:1 1 12rem;}
@media (min-width:62rem){.up-acts .ch-btn{flex:0 1 auto;}.up-acts .up-dl.ch-btn--primary,.up-acts .up-send{min-width:16rem;max-width:22rem;}}
.up-dl__size{font-size:.875rem;font-weight:560;opacity:.85;font-variant-numeric:tabular-nums;}
.up-dl__size:empty{display:none;}
.up-send-hint{margin:.5rem 0 0;font-size:.8125rem;line-height:1.45;color:var(--ch-ink-2);}
.up-note{margin:.85rem 0 0;}
.up-r-s{margin:.6rem 0 0;font-size:.875rem;color:var(--ch-ink-2);font-variant-numeric:tabular-nums;}
.up-r-s:empty{display:none;}
.up-err__acts{margin:.65rem 0 0;}
#up-err-t{outline:none;}

/* comparison: two layers the size of the view; the line clips the AI layer.
 * Fit: each picture contained in its layer. Actual pixels: both at the result's
 * real size, centred, moved together by dragging (--dx/--dy set by the script). */
.up-layer{position:absolute;inset:0;overflow:hidden;}
.up-layer--after{clip-path:inset(0 0 0 var(--split));}
.up-img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;}
.up-img:not([src]){visibility:hidden;}
/* A transparent PNG (a logo) shows its transparency as a checkerboard, as image editors do. */
.up-cmp--alpha .cm-cmp__view{background:repeating-conic-gradient(#d9dee6 0 25%,#f4f6f9 0 50%) 0 0/16px 16px;}
.up-cmp.cm-cmp--1to1 .cm-cmp__view{cursor:grab;touch-action:none;}
.up-cmp.cm-cmp--1to1 .cm-cmp__view:active{cursor:grabbing;}
.up-cmp.cm-cmp--1to1 .up-img{inset:auto;left:50%;top:50%;width:var(--w);height:var(--h);max-width:none;object-fit:fill;
  transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px)));}

/* article: before/after pairs made by tools/upscale-examples.py. Fixed photo
 * colours (the pictures are never themed). */
.up-ex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:1.75rem 0 2rem;}
.up-ex__p{position:relative;margin:0;}
.up-ex__p img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 0 0 1px rgba(15,26,46,.10);background:#dfe6ee;}
/* the label sits under its picture, not on it: a screenshot's own text is at its top */
.up-ex__p span{display:block;margin:.4rem 0 0;font-size:.8125rem;font-weight:640;color:var(--ch-ink);}
.up-ex figcaption{grid-column:1/-1;margin:.15rem 0 0;font-size:.9375rem;line-height:1.6;color:var(--ch-ink-2);}

/* hooks the markup names; listed so every class in the markup has a rule */
.up-tool,.up-pic,.up-enl{min-width:0;}