/* style — A/B compare, including the two-clip wipe.
   One section of the old style.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---------- A/B compare in the lightbox ---------- */
/* The size of what is on screen. Quiet when it is the file, lit when it is
   the preview copy standing in for it — the one case where the difference
   matters and was invisible. */
.glb-res {
  position: absolute; right: 12px; bottom: 10px; z-index: 6;
  padding: 3px 9px; border-radius: 3px;
  background: var(--scrim); color: rgba(255,255,255,.62);
  font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.glb-res:empty { display: none; }
.glb-res.proxy { color: #ffd479; background: rgba(60,42,10,.8); pointer-events: auto; }
.glb-ab {
  position: absolute; left: 10px; bottom: 10px; z-index: 6;
  padding: 5px 12px; border-radius: 3px; cursor: pointer;
  background: var(--scrim-mid); border: 1px solid rgba(255,255,255,.2); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
}

/* The pop-out button, lit while the second-screen window is up. The window it
   controls is on a different monitor, so the button is the only place you can
   find out what state it is in without turning your head. */
.glb-pop.on { color: var(--accent); border-color: var(--accent); }
.glb-ab:hover { border-color: var(--accent); color: var(--accent); }
/* "You are not looking at the file." Top-centre, warm, and not dismissible —
   it is a statement about what is on screen, not a notification. */
.glb-fallback {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 7;
  padding: 5px 12px; border-radius: 3px; pointer-events: auto; cursor: help;
  background: rgba(60,32,10,.92); border: 1px solid rgba(255,178,122,.5); color: #ffb27a;
  font-size: 11px; font-weight: 700; letter-spacing: .2px; max-width: 70%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* One-click "Compare" (vs the generation's source image) sits beside A/B,
   in accent colour so upscale checks are impossible to miss. */
.glb-cmp { left: 62px; border-color: var(--accent); color: var(--accent); }
.glb-cmp:hover { background: var(--accent); color: #fff; }
.ab-wrap { position: absolute; inset: 0; touch-action: none; cursor: ew-resize; z-index: 1; overflow: hidden; }
.ab-zoom { position: absolute; inset: 0; transform-origin: center center; will-change: transform; }
.ab-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block;
}
.ab-div {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: var(--accent); z-index: 4; pointer-events: none;
  box-shadow: 0 0 8px var(--accent-glow);
}
.ab-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--accent); color: #fff; border-radius: 3px;
  font-size: 10px; font-weight: 800; padding: 4px 7px; white-space: nowrap;
}
.ab-tag {
  position: absolute; top: 10px; z-index: 4; font-size: 11px; font-weight: 800;
  background: var(--scrim); color: #fff; border-radius: 3px; padding: 2px 8px;
  pointer-events: none;
}
.ab-tag-a { left: 10px; } .ab-tag-b { right: 10px; }
/* ---- THE SAME WIPE, FOR TWO CLIPS ----

   No zoom container: the stills wipe carries a zoom and pan rig that two
   <video> elements do not need and that fights their own controls. Otherwise
   the same shape, deliberately — the divider, the knob and the corner tags
   all mean what they mean above, so the gesture transfers. */
.abv-wrap { position: absolute; inset: 0; touch-action: none; z-index: 1; overflow: hidden; }
.abv-v {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block; background: #000;
}
/* B sits over A and is clipped from the left, so dragging right reveals more
   of it — the same direction as the stills wipe. It takes no clicks: every
   control belongs to A, which is the one keeping time. */
.abv-b { pointer-events: none; }
.abv-div {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: var(--accent); z-index: 4; cursor: ew-resize;
  box-shadow: 0 0 8px var(--accent-glow);
}
.abv-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--accent); color: #fff; border-radius: 3px;
  font-size: 10px; font-weight: 800; padding: 4px 7px; white-space: nowrap;
  cursor: ew-resize;
}
.abv-tag {
  position: absolute; top: 10px; z-index: 4; font-size: 11px; font-weight: 800;
  background: var(--scrim); color: #fff; border-radius: 3px; padding: 2px 8px;
  pointer-events: none;
}
.abv-tag-a { left: 10px; } .abv-tag-b { right: 10px; }

.ab-strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  background: rgba(10,10,12,.94); border-top: 1px solid var(--border);
  padding: 8px 10px 10px;
}
.ab-cap { display: block; font-size: 10px; color: var(--text-dim); margin-bottom: 6px; }
/* multi-row picker — scroll down for older images (newest first) */
.ab-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 6px; max-height: 136px; overflow-y: auto; padding-right: 2px;
}
.ab-thumb {
  width: 100%; height: 56px; object-fit: cover; border-radius: 3px; cursor: pointer;
  border: 2px solid transparent;
}
.ab-thumb:hover { border-color: var(--accent); }

/* "+ Add character" placeholder card leading the characters grid. */
.gal-item.add-char { cursor: pointer; }
.gal-item.add-char .gthumb { background: #1b1b1f; }
.add-char-in {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; border: 1px dashed var(--border-dash); color: var(--text-dim);
}
.gal-item.add-char:hover .add-char-in {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.add-char-in .ac-plus { font-size: 30px; font-weight: 300; line-height: 1; }
.add-char-in .ac-cap { font-size: 10px; font-weight: 600; letter-spacing: .3px; }

/* @name field pinned bottom-left on character thumbnails — the @ sits ready;
   click in and type to name the character. */
.char-tag {
  position: absolute; left: 5px; bottom: 5px; z-index: 3;
  display: flex; align-items: center; gap: 3px;
  background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.15);
  border-radius: 3px; padding: 2px 7px;
  max-width: calc(100% - 10px);
  backdrop-filter: blur(3px);
}
.char-tag:focus-within { border-color: var(--accent); background: rgba(0,0,0,.78); }
.char-tag .ct-at { color: var(--accent); font-weight: 800; font-size: 11px; flex: none; }
.char-tag .ct-input {
  background: none; border: none; outline: none; padding: 0; margin: 0;
  color: #fff; font-size: 10.5px; font-weight: 600; width: 92px; min-width: 40px;
  border-radius: 0;
}
.char-tag .ct-input::placeholder { color: rgba(255,255,255,.45); font-weight: 400; }

/* A GENERATION'S OWN NAME, when somebody has given it one.

   Bottom-left, the same corner and the same blurred pill as the character
   @name field above — it is the same act on the same kind of tile, and a
   second visual language for it would be a second thing to learn.

   Deliberately NOT .gmeta, which holds the filename on every tile and is
   hidden for a good reason: a grid of pictures with a machine-generated
   filename under each is a grid you read instead of look at. A name someone
   chose and typed has earned the space; a filename has not.

   Above .ginfo's z-index so the hover strip cannot cover it, and pushed
   clear of the bottom-left corner .ginfo occupies on hover. */
.gal-item .gname {
  position: absolute; left: 5px; bottom: 5px; z-index: 4;
  max-width: calc(100% - 10px);
  background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.15);
  border-radius: 3px; padding: 2px 7px;
  color: #fff; font-size: 10.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  backdrop-filter: blur(3px); cursor: text;
}
.gal-item .gname:hover { border-color: var(--accent); background: rgba(0,0,0,.8); }
/* The hover strip gives way to the name rather than fighting it. */
.gal-item:hover .gname ~ .ginfo, .gal-item .gname ~ .ginfo { bottom: 28px; }

/* The editor, in the same place the label sits, so the text does not jump
   between reading it and changing it. */
.gal-item .gname-edit {
  position: absolute; left: 5px; right: 5px; bottom: 5px; z-index: 6;
  background: rgba(0,0,0,.85); border: 1px solid var(--accent);
  border-radius: 3px; padding: 2px 7px;
  backdrop-filter: blur(3px);
}
.gal-item .gname-edit input {
  width: 100%; background: none; border: none; outline: none; padding: 0; margin: 0;
  color: #fff; font-size: 10.5px; font-weight: 600; font-family: inherit;
}
.gal-item .gname-edit input::placeholder { color: rgba(255,255,255,.45); font-weight: 400; }

/* The Shift-click pair in the gallery: A while it waits, then A and B. */
#gallery .gal-item.ab-picked { outline: 2px solid var(--accent); outline-offset: -2px; }