/* Cyber City · Compare (theme 0.17.0): the tray at the foot of the screen and the comparison page.
   The tray is fixed to the bottom of the screen in its own box (nothing sticks inside the page's grid, the theme's rule
   for anything that stays on screen); the page keeps room under its content while the tray shows, so the tray never
   covers the last line. */

.ecc-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ecc-z-sticky); padding: 0 var(--ecc-gutter) calc(var(--ecc-s-3) + env(safe-area-inset-bottom)); pointer-events: none; }
.ecc-tray[hidden] { display: none; }
.ecc-tray__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ecc-s-2) var(--ecc-s-4); max-width: var(--ecc-container); margin: 0 auto; padding: var(--ecc-s-3) var(--ecc-s-4); border: 1px solid var(--ecc-panel-border); border-radius: var(--ecc-r); background: var(--ecc-panel); color: var(--ecc-on-panel); box-shadow: var(--ecc-elev-overlay); pointer-events: auto; }
.ecc-tray__n { display: inline-flex; align-items: center; gap: var(--ecc-s-2); margin: 0; color: var(--ecc-on-panel-2); }
.ecc-tray__list { display: flex; gap: var(--ecc-s-2); margin: 0; padding: 0; list-style: none; }
.ecc-tray__item { position: relative; }
.ecc-tray__img { display: block; inline-size: var(--ecc-s-7); block-size: var(--ecc-s-7); overflow: hidden; border-radius: var(--ecc-r-sm); background: var(--ecc-stage-studio); }
.ecc-tray__img img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ecc-tray__item.is-empty .ecc-tray__img { border: 1px dashed var(--ecc-on-panel-2); background: transparent; opacity: .6; }
.ecc-tray__x { position: absolute; top: calc(var(--ecc-s-2) * -1); right: calc(var(--ecc-s-2) * -1); display: inline-flex; align-items: center; justify-content: center; inline-size: var(--ecc-s-5); block-size: var(--ecc-s-5); padding: 0; border: 1px solid var(--ecc-panel-border); border-radius: var(--ecc-r-voxel); background: var(--ecc-panel-2); color: var(--ecc-on-panel); cursor: pointer; }
.ecc-tray__x::after { content: ""; position: absolute; inset: calc((var(--ecc-hit) - var(--ecc-s-5)) / -2); }
.ecc-tray__acts { display: flex; gap: var(--ecc-s-2); margin-left: auto; }
.ecc-tray__acts .is-off { opacity: .55; }
.ecc-tray__note { flex: 1 1 100%; margin: 0; color: var(--ecc-on-panel-2); }
.ecc-tray__note[hidden] { display: none; }
html.ecc-has-tray body { padding-bottom: calc(var(--ecc-s-9) + var(--ecc-s-5)); }
@media (max-width: 760px) {
  .ecc-tray { padding: 0 0 env(safe-area-inset-bottom); }
  .ecc-tray__in { border-radius: 0; border-left: 0; border-right: 0; padding: var(--ecc-s-2) var(--ecc-gutter); }
  .ecc-tray__n { flex: 1 1 100%; }
  .ecc-tray__acts { margin-left: auto; }
}
@media print { .ecc-tray { display: none !important; } }

/* ---- the comparison page ---- */
.ecc-cmpp { display: grid; gap: var(--ecc-gap); }
.ecc-cmpp__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ecc-s-3) var(--ecc-s-5); }
.ecc-cmpp__head > * { margin: 0; }
.ecc-cmpp__head .ecc-h1 { margin-right: auto; }
.ecc-cmpp__head .ecc-module__label { flex: 1 1 100%; }
.ecc-cmpp__body { display: grid; gap: var(--ecc-s-4); }
.ecc-cmpp__table thead .ecc-cmpt { margin-top: var(--ecc-s-2); }
.ecc-cmpp.is-diff tr.is-same { display: none; }
.ecc-cmpp__ask { margin: 0; }