/* ==========================================================================
   BEFORE AND AFTER - the imaging comparison panel (.cmp), added 2026-10-01.

   "a high end model animation can be used in several places on the website
   with several different XRays and MRI's. Basically it is a slider like on
   royalspinesurgery.com/cervical-disc-arthroplasty ... the rectangle should be
   almost the whole screen width wide (to hold 2-3 side by side images) ...
   hovering (or perhaps just scrolling down and exposing the whole pane)
   [should] automatically cause the slider to move from left to right and show
   the postop or after images. you can also grab the slider and move it
   yourself."

   ONE OF TWO FILES THE COMPONENT IS MADE OF; the other is
   assets/js/before-after.js. They are shared files rather than a copy in each
   page's own sheet because the panel goes on several pages and its script is
   not three lines; see CLAUDE.md, "Before and after".

   THE PANEL KEEPS ITS OWN COLOURS. Every value below is a literal or a
   --cmp-* token declared on .cmp, so the panel looks the same on a paper page,
   on procedures.html's black and inside a .band-light section, none of which
   agree on what --void or --signal mean.

   WHAT A FILM IS. A .cmp-film holds two stacked layers, the pre-op film
   underneath and the post-op film on top, clipped to the left of the line.
   So the line travelling LEFT TO RIGHT paints the after-surgery film in, which
   is the direction that was asked for. That puts "After" on the left of the
   line and "Before" on its right, the opposite of most before/after sliders;
   it is the cost of the wipe going the way a page is read.

   ONE LINE ACROSS THE ROW, OR ONE PER FILM. While the films sit side by side
   the script draws a single line across the whole row and it sweeps the films
   in turn, the way the reference site's one wide image does. Once the films
   stack (a phone) each film gets its own line, its own trigger and its own
   control. CSS decides which layout it is - the container queries at the foot
   of this file - and the script reads the result.
   ========================================================================== */

.cmp{
  --cmp-ground:#05080C;
  --cmp-ink:#EFE8D8;
  --cmp-dim:rgba(239,232,216,0.64);
  --cmp-faint:rgba(239,232,216,0.14);
  --cmp-amber:#E0952B;
  --cmp-gap:clamp(8px, 1vw, 16px);
  --cmp-pad:clamp(14px, 2.2vw, 40px);
  --cmp-r-film:4px;
  /* THE ROW IS HELD TO A SCREEN. The trigger is "the whole pane is showing",
     so the films can never be taller than the window less the panel's own head
     and padding. 280 is that head and padding, measured at 1440 with a tab row;
     the floor keeps a short laptop window from shrinking films to nothing. */
  --cmp-hmax:clamp(230px, calc(100vh - 290px), 820px);
  --cmp-hmax:clamp(230px, calc(100svh - 290px), 820px);

  container:cmp / inline-size;
  position:relative;
  color:var(--cmp-ink);
  background:
    radial-gradient(120% 80% at 50% -10%, #111A24 0%, rgba(17,26,36,0) 62%),
    var(--cmp-ground);
  border-radius:12px;
  padding:var(--cmp-pad);
  box-shadow:inset 0 0 0 1px rgba(239,232,216,0.07), 0 30px 70px -45px rgba(0,0,0,0.5);
  font-family:'Archivo', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Breaks out of a reading column to nearly the window's width. 100vw counts
   the desktop scrollbar, so 56px leaves ~20px a side there and 28 on a phone;
   it can never overflow, because the subtraction is wider than any scrollbar.
   Centred on its own column, which is centred on the page. */
.cmp.is-bleed{
  --cmp-w:min(1860px, calc(100vw - 56px));
  width:var(--cmp-w);
  margin-left:calc(50% - var(--cmp-w) / 2);
}

/* On a band that is already black, the panel is the band: no box of its own,
   and the films run to the band's edges. */
.cmp.is-flat{ background:none; box-shadow:none; border-radius:0; padding:0; }

/* A full-width black band to hold a panel, for a page whose own sections
   are not dark (procedures.html, below the four panels). */
.cmp-band{
  background:#070B11;
  padding:clamp(44px, 6vw, 110px) clamp(16px, 2vw, 32px) clamp(48px, 6vw, 110px);
}
.cmp-band > .cmp{ max-width:1860px; margin:0 auto; }

/* ---------- head: title, hint, replay ---------- */
.cmp-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px 24px; flex-wrap:wrap;
  margin-bottom:clamp(14px, 1.6vw, 24px);
}
/* (0,2,0), because a procedure page's .blk h2 is (0,1,1) and would otherwise
   set this heading's size and margin. */
.cmp .cmp-title{
  margin:0;
  font-family:var(--cmp-title-face, 'Spectral', Georgia, serif);
  font-weight:var(--cmp-title-weight, 500);
  font-size:clamp(24px, 2.6vw, 40px);
  line-height:1.05; letter-spacing:-0.01em;
  color:var(--cmp-ink);
}
.cmp.is-caps .cmp-title{ text-transform:uppercase; letter-spacing:0.1em; }
.cmp-tools{ display:flex; align-items:center; gap:16px; }
.cmp-hint{ font-size:13.5px; color:var(--cmp-dim); }
.cmp-replay{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px 8px 11px; border-radius:999px;
  border:1px solid rgba(239,232,216,0.22); background:rgba(239,232,216,0.04);
  color:var(--cmp-ink); font:600 12px/1 'Archivo', system-ui, sans-serif;
  letter-spacing:0.12em; text-transform:uppercase; cursor:pointer;
  transition:border-color .2s ease, background-color .2s ease, color .2s ease;
}
.cmp-replay svg{ width:15px; height:15px; flex:none; }
.cmp-replay:hover{ border-color:var(--cmp-amber); color:var(--cmp-amber); }
.cmp-replay:focus-visible{ outline:2px solid var(--cmp-amber); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .cmp-replay{ display:none; } }
@container cmp (max-width:560px){ .cmp-hint{ display:none; } }
/* On a phone the button keeps its word for a screen reader and drops it for
   the eye, so the title and the button share one line. */
@container cmp (max-width:480px){
  .cmp-head{ flex-wrap:nowrap; align-items:center; }
  .cmp-replay{ padding:9px; }
  .cmp-replay span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}

/* ---------- case tabs, when a panel holds more than one case ---------- */
.cmp-tabs{
  display:flex; gap:8px; margin:0 0 clamp(14px, 1.6vw, 22px);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  padding:2px; /* room for the focus ring inside the scroller */
}
.cmp-tabs::-webkit-scrollbar{ display:none; }
.cmp-tab{
  appearance:none; -webkit-appearance:none; flex:none;
  padding:9px 15px; border-radius:999px;
  border:1px solid rgba(239,232,216,0.2); background:transparent;
  color:var(--cmp-dim); cursor:pointer;
  font:600 12.5px/1.1 'Archivo', system-ui, sans-serif;
  letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap;
  transition:border-color .2s ease, background-color .2s ease, color .2s ease;
}
.cmp-tab:hover{ color:var(--cmp-ink); border-color:rgba(239,232,216,0.45); }
.cmp-tab[aria-selected="true"]{ background:var(--cmp-amber); border-color:var(--cmp-amber); color:#000; }
.cmp-tab:focus-visible{ outline:2px solid var(--cmp-amber); outline-offset:2px; }

.cmp-case[hidden]{ display:none; }
.cmp-case{ animation:cmp-in .45s ease both; }
@keyframes cmp-in{ from{ opacity:0; } to{ opacity:1; } }

/* ---------- the row of films ----------
   A ROW OF FILMS SHARES ONE HEIGHT WITH NOTHING CROPPED - the technology
   page's photograph rows do the same. Each film grows by its own aspect ratio
   (--r, width over height) from a zero basis, so widths come out in
   proportion and heights come out equal. --cmp-sum and --cmp-n are written by
   the script from the films' own --r; the max-width is what holds the row to
   --cmp-hmax, and the row centres in the panel when that binds. */
.cmp-row{
  position:relative;
  display:flex; align-items:flex-start; gap:var(--cmp-gap);
  max-width:calc(var(--cmp-sum, 2.4) * var(--cmp-hmax) + (var(--cmp-n, 3) - 1) * var(--cmp-gap));
  margin:0 auto;
  touch-action:pan-y;
  user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
@media (hover:hover) and (pointer:fine){ .cmp-row{ cursor:ew-resize; } }

.cmp-film{
  position:relative; margin:0;
  flex:var(--r, 0.8) 1 0; min-width:0;
}
.cmp-stage{
  position:relative; overflow:hidden;
  aspect-ratio:var(--r, 0.8);
  border-radius:var(--cmp-r-film);
  background:#000;
  box-shadow:0 0 0 1px rgba(239,232,216,0.08);
}
.cmp-layer{ position:absolute; inset:0; background:#000; }
.cmp-layer img{
  display:block; width:100%; height:100%; object-fit:contain;
  -webkit-user-drag:none; user-select:none; pointer-events:none;
}
/* The after film, on top, clipped to the left of the line. --p is this
   film's own share of the line, 0 to 100, written by the script; a film the
   line has passed is 100 and one it has not reached is 0. */
.cmp-post{ clip-path:inset(0 calc(100% - var(--p, 0) * 1%) 0 0); }

/* ---------- the labels on the film ----------
   INSIDE THEIR OWN LAYER, so each is clipped with its film: "After" is only
   ever drawn over the after film and "Before" is covered as the after film
   slides over it. A label on the stage would sit over both and say the wrong
   thing at most positions of the line. */
.cmp-tag{
  position:absolute; top:clamp(8px, 1.1cqi, 14px); z-index:1;
  padding:5px 9px 4px; border-radius:999px;
  font:600 11px/1 'Archivo', system-ui, sans-serif;
  letter-spacing:0.16em; text-transform:uppercase;
  background:rgba(5,8,12,0.62);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(239,232,216,0.14);
}
.cmp-pre .cmp-tag{ right:clamp(8px, 1.1cqi, 14px); color:var(--cmp-ink); }
.cmp-post .cmp-tag{ left:clamp(8px, 1.1cqi, 14px); color:var(--cmp-amber); box-shadow:inset 0 0 0 1px rgba(224,149,43,0.4); }

/* What the film is - "Lateral X-ray" - on both layers at once, so it stays
   put while the line passes under it. */
.cmp-view{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:28px clamp(9px, 1.1cqi, 14px) clamp(8px, 1cqi, 12px);
  background:linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
  border-radius:0 0 var(--cmp-r-film) var(--cmp-r-film);
  font:500 12.5px/1.2 'Archivo', system-ui, sans-serif;
  letter-spacing:0.04em; color:rgba(239,232,216,0.86);
  pointer-events:none;
}

/* ---------- the line and its grip ----------
   Built by the script, one per row or one per film. Positioned with a
   transform so a sweep costs no layout. The line is amber with a dark edge
   either side, because it crosses white bone and black air on the same film
   and a pale line vanishes on the first, a dark one on the second. */
.cmp-rule{
  position:absolute; top:0; bottom:0; left:0; width:0; z-index:3;
  pointer-events:none; will-change:transform;
}
.cmp-rule::before{
  content:""; position:absolute; top:0; bottom:0; left:-1px; width:2px;
  background:var(--cmp-amber);
  box-shadow:0 0 0 1px rgba(0,0,0,0.38), 0 0 14px 1px rgba(224,149,43,0.0);
  transition:box-shadow .5s ease;
}
/* THE SHEEN. A soft band of light trailing the line on the after side while
   it moves, gone when it rests - what makes the sweep read as a pass of
   light rather than a box being resized. */
.cmp-rule::after{
  content:""; position:absolute; top:0; bottom:0; right:0; width:clamp(40px, 6cqi, 110px);
  background:linear-gradient(to right, rgba(224,149,43,0), rgba(224,149,43,0.16));
  opacity:0; transition:opacity .6s ease;
}
.cmp-rule.is-live::before{ box-shadow:0 0 0 1px rgba(0,0,0,0.38), 0 0 16px 2px rgba(224,149,43,0.55); }
.cmp-rule.is-live::after{ opacity:1; transition-duration:.25s; }

.cmp-grip{
  position:absolute; top:50%; left:0;
  width:46px; height:46px; margin:-23px 0 0 -23px;
  border-radius:50%;
  background:rgba(5,8,12,0.58);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1.5px var(--cmp-amber), 0 6px 18px rgba(0,0,0,0.45);
  color:var(--cmp-amber);
  display:grid; place-items:center;
  transform:translateX(var(--gx, 0px)) scale(var(--gs, 1));
  transition:transform .25s cubic-bezier(.2,.8,.2,1), background-color .2s ease, color .2s ease;
}
.cmp-grip svg{ width:24px; height:24px; display:block; }
.cmp-row:hover .cmp-grip,
.cmp-stage:hover .cmp-grip{ --gs:1.06; }
.cmp-rule.is-held .cmp-grip{ --gs:1.1; background:var(--cmp-amber); color:#000; }
/* The control is a real range input, visually hidden; its focus ring is
   drawn on the grip it moves. */
.cmp-range:focus-visible + .cmp-rule .cmp-grip{
  outline:2px solid var(--cmp-ink); outline-offset:4px;
}
@container cmp (max-width:560px){
  .cmp-grip{ width:40px; height:40px; margin:-20px 0 0 -20px; }
  .cmp-grip svg{ width:21px; height:21px; }
}

.cmp-range{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0; opacity:0;
}

/* ---------- caption and fine print ---------- */
.cmp-cap{
  margin:clamp(12px, 1.4vw, 18px) auto 0; max-width:880px; text-align:center;
  font-size:15px; line-height:1.55; color:var(--cmp-dim);
}
.cmp-cap b{ color:var(--cmp-ink); font-weight:600; }
.cmp-cap a{ color:var(--cmp-amber); text-decoration:none; margin-left:4px; white-space:nowrap; }
.cmp-cap a:hover{ text-decoration:underline; text-underline-offset:3px; }
.cmp-fine{
  margin:clamp(14px, 1.6vw, 22px) auto 0; max-width:880px; text-align:center;
  font-size:12.5px; line-height:1.5; color:rgba(239,232,216,0.46);
}

/* ---------- a film that has not arrived ----------
   Built by the script when an image fails to load. The two halves are drawn
   differently, a cool slate against an amber wash, so the sweep can be seen
   to do something before a single film is in place. The file name and the
   drop hint only show in preview (?ba, or the bench). */
.cmp-layer.is-missing img{ display:none; }
.cmp-layer:not(.is-missing) .cmp-empty{ display:none; }
.cmp-empty{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center;
  gap:6px; padding:16px; text-align:center;
}
.cmp-pre .cmp-empty{
  background:
    repeating-linear-gradient(135deg, rgba(239,232,216,0.035) 0 1px, transparent 1px 11px),
    #0B1118;
}
.cmp-post .cmp-empty{
  background:
    repeating-linear-gradient(45deg, rgba(224,149,43,0.07) 0 1px, transparent 1px 11px),
    #17110A;
}
.cmp-empty::before, .cmp-empty::after{
  content:""; position:absolute; width:22px; height:22px;
  border:1.5px solid rgba(239,232,216,0.4);
}
.cmp-post .cmp-empty::before, .cmp-post .cmp-empty::after{ border-color:rgba(224,149,43,0.7); }
.cmp-empty::before{ left:12px; top:46px; border-right:0; border-bottom:0; }
.cmp-empty::after{ right:12px; bottom:46px; border-left:0; border-top:0; }
.cmp-empty b{
  font:600 11px/1 'Archivo', system-ui, sans-serif; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--cmp-dim);
}
.cmp-post .cmp-empty b{ color:var(--cmp-amber); }
.cmp-empty span{ font-size:14px; color:var(--cmp-ink); }
.cmp-empty code{
  display:none; max-width:100%; overflow-wrap:anywhere;
  font:500 11px/1.4 ui-monospace, Menlo, Consolas, monospace; color:var(--cmp-dim);
}
.cmp-empty i{ display:none; font-style:normal; font-size:11.5px; color:rgba(239,232,216,0.45); }
.cmp.is-preview .cmp-empty code,
.cmp.is-preview .cmp-empty i{ display:block; }

/* Drop-to-preview: the half of the film a dropped file would land in. */
.cmp-drop{
  position:absolute; inset:0; z-index:4; display:none; pointer-events:none;
  grid-template-columns:1fr 1fr;
}
.cmp-stage.is-over .cmp-drop{ display:grid; }
.cmp-drop span{
  display:grid; place-items:center; margin:8px; border-radius:4px;
  border:1.5px dashed rgba(239,232,216,0.35); background:rgba(5,8,12,0.55);
  font:600 11px/1 'Archivo', system-ui, sans-serif; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--cmp-dim);
}
.cmp-drop span.is-on{ border-color:var(--cmp-amber); color:var(--cmp-amber); background:rgba(224,149,43,0.12); }

/* ---------- when the films stack ----------
   Three films side by side stop being readable below about 600px of panel,
   two below about 420. Stacked, each film is held to most of a screen's
   height and centred, and the script gives each its own line. */
@container cmp (max-width:620px){
  .cmp-row:has(> figure:nth-of-type(3)){
    flex-direction:column; align-items:center; max-width:none; gap:calc(var(--cmp-gap) * 2.5);
  }
  .cmp-row:has(> figure:nth-of-type(3)) > .cmp-film{
    flex:none; width:min(100%, calc(var(--r, 0.8) * 72vh));
    width:min(100%, calc(var(--r, 0.8) * 72svh));
  }
}
@container cmp (max-width:430px){
  .cmp-row:has(> figure:nth-of-type(2)){
    flex-direction:column; align-items:center; max-width:none; gap:calc(var(--cmp-gap) * 2.5);
  }
  .cmp-row:has(> figure:nth-of-type(2)) > .cmp-film{
    flex:none; width:min(100%, calc(var(--r, 0.8) * 72vh));
    width:min(100%, calc(var(--r, 0.8) * 72svh));
  }
}