/* ============================================================
   COMPARE PAGE CHROME
   ------------------------------------------------------------
   The before-and-after page for a demo: two of that demo's own
   pages shown side by side, and the catalogue they are both
   drawing from printed underneath so a visitor can check.

   Deliberately the same palette and the same vocabulary as
   demos/rescue/, which is the existing before-and-after page.
   Two visual languages for one argument would make the second
   one look like marketing.

   One file for all three demos, for the same reason there is one
   catalogue per demo: a copy per server is three chances for the
   comparisons to stop being comparable to each other.
   ============================================================ */

:root{
  --ground:#07090C; --surface:#111820; --surface-2:#18212B; --line:#242E3A;
  --accent:#E8B863; --accent-dim:#6B5227; --warn:#E86363; --warn-dim:#5C2626;
  --text:#EDE7DF; --mute:#8A93A0; --faint:#727B85;
  --display: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: clamp(1.1rem, 4vw, 2.75rem);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--display);
     -webkit-font-smoothing:antialiased;line-height:1.6}
a{color:var(--accent)}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}

.skip{position:fixed;top:0;left:0;z-index:200;padding:.7rem 1.1rem;background:#E8B863;
  color:#0A0A0A;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;transform:translateY(-120%)}
.skip:focus{transform:translateY(0)}

.demo-bar{margin:0;padding:.8rem var(--gutter);background:#2A1D08;
  border-bottom:1px solid var(--accent-dim);color:#F0DCB4;
  font-family:var(--mono);font-size:.7rem;line-height:1.65}

.tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}

header.top{padding:clamp(2.4rem,6vw,4rem) 0 clamp(1.4rem,4vw,2rem);border-bottom:1px solid var(--line);
  background:radial-gradient(80% 120% at 80% 0%, rgba(232,184,99,.10), transparent 60%)}
h1{margin:.6rem 0 .8rem;font-size:clamp(1.9rem,5vw,3rem);line-height:1.06;letter-spacing:-.03em;max-width:20ch}
.lede{margin:0;max-width:64ch;color:var(--mute);font-size:1.04rem}

section{padding:clamp(2rem,5vw,3.2rem) 0;border-bottom:1px solid var(--line)}
h2{margin:0 0 .35rem;font-size:1.34rem;letter-spacing:-.02em}
h2 + .tag{display:block;margin-bottom:1.4rem}
p{max-width:66ch}
p.mute{color:var(--mute)}

/* ---------- the pair ----------
   Both panes are real pages in real frames, not screenshots, so
   neither can drift from what a visitor sees on opening it. */
.pair{display:grid;gap:1.1rem;grid-template-columns:1fr;margin-top:1.2rem}
@media(min-width:960px){.pair{grid-template-columns:1fr 1fr}}
.shot{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column}
.shot .cap{display:flex;align-items:center;gap:.6rem;padding:.6rem .85rem;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--mute)}
.shot .cap b{color:var(--text)}
.shot .cap .open{margin-left:auto;text-decoration:none}
.shot .frame{width:100%;height:min(72vh,660px);border:0;display:block;background:#07090C}
.dot{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:none}
.dot.ok{background:#63E896}

/* ---------- the flip ----------
   Two full-page captures of the two real pages, and a control that swaps
   between them in place. This is the headline of the page: a slice of each
   side in a small frame shows the top of a storefront and nothing else, and
   the whole argument is about what the page is like all the way down.

   The two captures are genuinely different heights, so this swaps them rather
   than crossfading. A crossfade would need one fixed box, which would either
   crop the taller one or leave a large empty area under the shorter one. */
.flip{margin-top:1.2rem}
.flip-bar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.9rem}
.flip-bar button{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  padding:.6rem 1rem;border:1px solid var(--line);background:var(--surface);color:var(--mute);
  border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:.55rem}
.flip-bar button:hover{color:var(--text)}
.flip-bar button[aria-pressed="true"]{border-color:var(--accent-dim);background:rgba(232,184,99,.12);color:var(--accent)}
/* The focus ring is not decoration here: these are the page's main control and
   the a11y pass fails a control that removes it without putting one back. */
.flip-bar button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.flip-stage{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);
  line-height:0}
.flip-stage img{display:block;width:100%;height:auto}
.flip-stage img[hidden]{display:none}

.flip-note{margin:.8rem 0 0;color:var(--faint);font-size:.82rem;max-width:70ch}
.flip-note a{color:var(--accent)}

/* ---------- the catalogue table, which is the actual evidence ---------- */
table{border-collapse:collapse;width:100%;margin-top:1rem;font-size:.92rem}
th,td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
td.num{font-family:var(--mono);text-align:right;white-space:nowrap}
td.cat{color:var(--mute);font-size:.85rem}
tr.catrow td{background:var(--surface-2);font-family:var(--mono);font-size:.64rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.was{color:var(--faint);text-decoration:line-through;margin-right:.45rem}

ul.changes{list-style:none;padding:0;margin:1.1rem 0 0;display:grid;gap:.55rem}
ul.changes li{border:1px solid var(--line);border-left:3px solid var(--accent-dim);border-radius:9px;
  padding:.75rem .95rem;background:var(--surface);font-size:.94rem;max-width:none}
ul.changes li b{display:block;margin-bottom:.15rem}
ul.changes li span{color:var(--mute);font-size:.89rem}

.callout{border:1px solid var(--accent-dim);background:rgba(232,184,99,.06);border-radius:12px;
  padding:1.05rem 1.15rem;margin-top:1.3rem}
.callout p{margin:.5rem 0 0;color:var(--mute);font-size:.93rem}
.callout p:first-child{margin-top:0}
.callout b{color:var(--accent)}

.cta{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.4rem;text-decoration:none;
  border:1px solid var(--accent-dim);background:rgba(232,184,99,.1);color:var(--accent);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  padding:.72rem 1.15rem;border-radius:9px}
.cta:hover{background:rgba(232,184,99,.18)}

/* Filled in only if the browser actually managed to count both frames.
   Hidden otherwise, because an unverified claim printed as a verified one is
   the failure this whole page is arguing against. */
.counted{display:none;margin-top:1rem;border:1px solid #2C4A33;background:rgba(99,232,150,.07);
  border-radius:10px;padding:.75rem .95rem;font-family:var(--mono);font-size:.7rem;
  line-height:1.8;color:#A8D9B9}
.counted.on{display:block}
.counted b{color:#63E896}

footer{padding:2.4rem 0 3.4rem;color:var(--faint);font-size:.85rem}