/* Comparison screens (Spåra / Matcha / Loopa). Owned by frontend-compare.
   Dark control panels over the picture for sunlight, ≥44 px targets. */

.cg-root {
  --cg-navy: var(--night, #0B1B2B);
  --cg-navy-2: var(--night-2, #1B2F43);
  --cg-navy-3: var(--night-3, #24384C);
  --cg-navy-4: var(--night-4, #33475B);
  --cg-line: var(--night-line, #4B6178);
  --cg-muted: var(--night-muted, #8094A8);
  --cg-ink2: var(--night-ink-2, #C9D6E2);
  --cg-ink3: var(--night-ink-3, #DCE6EF);
  --cg-accent: var(--accent, #C2410C);
  --cg-accent-hi: var(--accent-hi, #FB923C);
  --cg-pink: #F472B6;
  --cg-snow: #DCE7F0;
  --cg-ghost: var(--ghost, #0369A1);
  --cg-ghost-bg: var(--ghost-bg, #E0F2FE);
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--cg-navy); color: #fff;
  font-family: var(--font, 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.cg-root button { font: inherit; color: inherit; cursor: pointer; -webkit-user-select: none; user-select: none; }
.cg-root button:disabled { cursor: default; opacity: .5; }
.cg-root [hidden] { display: none !important; }
.cg-root :focus-visible { outline: 3px solid var(--cg-accent-hi); outline-offset: 2px; }
.cg-body { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.cg-ic { display: inline-flex; align-items: center; justify-content: center; line-height: 0; flex: none; }
.cg-ic svg { width: 24px; height: 24px; }
.cg-ic-sm svg { width: 18px; height: 18px; }
.cg-ok { color: #86EFAC; }
.cg-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.cg-msg { margin: 0; font-size: 17px; color: var(--cg-ink2); }

/* ---- chrome: top bar + steps */
.cg-chrome { flex: none; background: rgba(11,27,43,.96); padding: env(safe-area-inset-top, 0) 0 8px; display: flex; flex-direction: column; gap: 4px; }
.cg-topbar { height: 50px; display: flex; align-items: center; gap: 4px; padding: 0 6px; }
.cg-title { flex: 1; min-width: 0; text-align: center; font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-iconbtn { width: 44px; height: 44px; flex: none; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; border-radius: 22px; }
.cg-iconbtn:active { background: var(--cg-navy-3); }
.cg-steps { margin: 0 10px; padding: 3px; border-radius: 12px; background: var(--cg-navy-2); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.cg-step { height: 40px; border: 0; border-radius: 9px; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 16px; font-weight: 600; }
.cg-step.is-current { background: #fff; color: var(--cg-navy); font-weight: 700; }
.cg-step[aria-disabled="true"] { color: var(--cg-muted); }

/* ---- shared view layout */
.cg-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cg-stage { position: relative; flex: 1; min-height: 120px; overflow: hidden; background: var(--cg-navy); touch-action: none; }
.cg-stage-snow { background: linear-gradient(#C9D7E4, var(--cg-snow)); }
.cg-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; will-change: transform; }
.cg-content { position: absolute; }
.cg-video, .cg-frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; pointer-events: none; -webkit-user-select: none; user-select: none; }
.cg-mask { position: absolute; pointer-events: none; image-rendering: auto; }
.cg-nametag { position: absolute; transform: translate(-50%, 6px) scale(var(--inv, 1)); transform-origin: 50% 0; height: 28px; padding: 0 10px; border-radius: 14px; background: #9D1373; display: flex; align-items: center; font-size: 14px; font-weight: 700; white-space: nowrap; pointer-events: none; }
.cg-stage.is-tapmode { cursor: crosshair; }
/* scribble to select (Spåra) */
.cg-scrib { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; opacity: .6; transition: opacity .2s; }
.cg-scrib.is-dim { opacity: .3; }
.cg-selmask { position: absolute; pointer-events: none; }
.cg-selbox { position: absolute; pointer-events: none; border: 3px solid #39FF6A; border-radius: 14px; background: rgba(57,255,106,.18); box-shadow: 0 0 0 1px rgba(11,27,43,.5); }
.cg-toolseg { position: absolute; right: 10px; top: 62px; display: flex; padding: 3px; gap: 3px; border-radius: 22px; background: rgba(11,27,43,.85); z-index: 4; }
.cg-toolbtn { height: 40px; min-width: 64px; padding: 0 12px; border: 0; border-radius: 19px; background: transparent; font-size: 15px; font-weight: 700; }
.cg-toolbtn.is-on { background: #fff; color: var(--cg-navy) !important; }
.cg-hintrow { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.cg-spinner-sm { width: 24px; height: 24px; border-width: 3px; flex: none; }

.cg-panel { flex: none; background: var(--cg-navy); padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0)); display: flex; flex-direction: column; gap: 10px; }

/* status strip */
.cg-strip { flex: none; height: 44px; background: rgba(11,27,43,.9); border-top: 1px solid var(--cg-navy-3); display: flex; align-items: center; gap: 4px; padding: 0 8px; font-size: 16px; font-weight: 600; }
.cg-stripbtn { height: 44px; border: 0; background: transparent; padding: 0 8px; display: flex; align-items: center; gap: 6px; border-radius: 8px; white-space: nowrap; min-width: 0; }
.cg-stripbtn span:first-child { overflow: hidden; text-overflow: ellipsis; }
.cg-stripbtn.is-active { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.cg-dot { color: var(--cg-muted); }
.cg-minibar { width: 40px; height: 6px; border-radius: 3px; background: var(--cg-navy-4); overflow: hidden; display: flex; flex: none; }
.cg-minibar > span { background: var(--cg-pink); transition: width .3s; }
.cg-minibar-wide { width: 100%; height: 8px; }

/* chips on stage */
.cg-filmchip { position: absolute; left: 12px; top: 10px; max-width: calc(100% - 24px); height: 40px; padding: 0 12px; border: 0; border-radius: 20px; background: rgba(11,27,43,.85); display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; z-index: 2; }
.cg-filmchip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-caret { font-size: 13px; opacity: .85; }
.cg-hintcard { position: absolute; left: 50%; transform: translateX(-50%); top: 12px; max-width: calc(100% - 24px); box-sizing: border-box; padding: 6px 14px; border-radius: 16px; background: rgba(11,27,43,.62); display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; pointer-events: none; z-index: 2; }
.cg-hintcard strong { font-size: 15px; }
.cg-hintcard span { font-size: 12px; color: var(--cg-ink2); }
.cg-loadcard { top: 50%; transform: translate(-50%, -50%); width: 200px; gap: 8px; }
.cg-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(#C9D7E4, var(--cg-snow)); z-index: 3; }
.cg-emptycard, .cg-statuscard { width: 100%; max-width: 340px; padding: 16px; border-radius: 14px; background: var(--cg-navy); display: flex; flex-direction: column; gap: 8px; text-align: left; }
.cg-emptycard strong, .cg-statuscard strong { font-size: 19px; }
.cg-emptycard span, .cg-statuscard span { font-size: 15px; color: var(--cg-ink2); }
.cg-statuscard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% - 48px); z-index: 3; box-shadow: 0 8px 24px rgba(4,12,20,.4); }
.cg-zoompill { position: absolute; right: 10px; top: 10px; height: 44px; padding: 0 14px; border: 0; border-radius: 22px; background: var(--cg-accent-hi); color: var(--cg-navy) !important; font-size: 16px; font-weight: 700; z-index: 4; }
.cg-pinchhint, .cg-hintpill { position: absolute; right: 12px; bottom: 10px; min-height: 30px; padding: 4px 12px; border-radius: 15px; background: rgba(11,27,43,.78); display: flex; align-items: center; font-size: 14px; font-weight: 600; pointer-events: none; transition: opacity .5s; z-index: 2; }
.cg-hintpill { left: 12px; justify-content: center; text-align: center; }
.is-faded { opacity: 0; }
.cg-timeschip { position: absolute; left: 10px; bottom: 10px; height: 30px; padding: 0 10px; border-radius: 15px; background: rgba(11,27,43,.8); display: flex; align-items: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; z-index: 2; }
.cg-bigplay { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 38px; background: rgba(11,27,43,.75); display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2; }
.cg-bigplay svg { width: 34px; height: 34px; }

/* spinner */
.cg-spinner { width: 36px; height: 36px; border-radius: 50%; border: 4px solid rgba(255,255,255,.25); border-top-color: var(--cg-accent-hi); animation: cg-spin .9s linear infinite; }
.cg-spinner-corner { position: absolute; right: 12px; bottom: 48px; width: 26px; height: 26px; border-width: 3px; z-index: 2; }
@keyframes cg-spin { to { transform: rotate(360deg); } }

/* scrub */
.cg-scrub { display: flex; flex-direction: column; gap: 4px; }
.cg-scrub-label { font-size: 14px; font-weight: 600; color: var(--cg-ink2); }
.cg-rangewrap { position: relative; height: 32px; display: flex; align-items: center; }
.cg-band { position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; pointer-events: none; }
.cg-range { position: relative; width: 100%; height: 32px; margin: 0; accent-color: var(--cg-accent-hi); background: transparent; touch-action: pan-y; }
.cg-times { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--cg-ink3); font-variant-numeric: tabular-nums; }

/* controls */
.cg-ctrls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cg-ctrl { height: 56px; border: 0; border-radius: 12px; background: var(--cg-navy-3); display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cg-ctrl:active { filter: brightness(1.25); }
.cg-ctrl-main { background: #fff; color: var(--cg-navy) !important; }
.cg-ctrl-lg { height: 64px; border-radius: 14px; font-size: 22px; }
.cg-ctrl-lg .cg-ic svg { width: 30px; height: 30px; }
.cg-ctrl-sq { height: 48px; }
.cg-ctrl-n { line-height: 1; }

/* context block */
.cg-ctx { display: flex; flex-direction: column; gap: 10px; }
.cg-ctx-head { display: flex; flex-direction: column; gap: 2px; }
.cg-ctx-title { font-size: 19px; font-weight: 700; }
.cg-ctx-sub { font-size: 15px; color: var(--cg-ink2); }
.cg-big { font-size: 17px; }
.cg-center-text { text-align: center; }
.cg-namerow { display: flex; align-items: center; gap: 10px; }
.cg-namerow label { flex: none; font-size: 15px; font-weight: 600; }
.cg-input { flex: 1; min-width: 0; height: 48px; padding: 0 12px; border: 2px solid var(--cg-line); border-radius: 10px; background: #13283C; color: #fff; font: inherit; font-size: 18px; }
.cg-input:focus { border-color: var(--cg-accent-hi); outline: none; }
.cg-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cg-row2 > :only-child { grid-column: 1 / -1; }

/* buttons */
.cg-btn { min-height: 52px; border-radius: 12px; border: 0; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 18px; font-weight: 700; text-decoration: none; }
.cg-btn-primary { background: var(--cg-accent); color: #fff; min-height: 56px; font-size: 19px; }
.cg-btn-primary:active { filter: brightness(1.1); }
.cg-btn-xl { min-height: 60px; font-size: 21px; border-radius: 14px; }
.cg-btn-outline { background: transparent; border: 2px solid #fff; min-height: 48px; }
.cg-btn-quiet { background: transparent; color: #BFDBFE !important; min-height: 44px; font-weight: 600; font-size: 16px; }
.cg-btn.is-dim { opacity: .55; }
.cg-link { min-height: 44px; border: 0; background: transparent; color: #BFDBFE !important; font-size: 16px; font-weight: 600; }

/* person chips (Matcha/Loopa) */
.cg-chiprow { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--cg-navy); min-width: 0; }
.cg-pchip { height: 44px; min-width: 0; padding: 0 10px 0 12px; border-radius: 22px; border: 2px solid var(--cg-navy-3); background: var(--cg-navy-2); display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; }
.cg-pchip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-pchip-b { border-style: dashed; border-color: var(--cg-ghost); background: var(--cg-ghost-bg); color: var(--cg-navy) !important; }
.cg-swapbtn { margin-left: auto; height: 44px; min-width: 44px; padding: 0 12px; border: 0; border-radius: 22px; background: var(--cg-navy-3); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; font-weight: 700; flex: none; }
.cg-roundbtn { width: 44px; height: 44px; flex: none; border: 0; border-radius: 22px; background: var(--cg-navy-3); display: flex; align-items: center; justify-content: center; }
.cg-roundbtn-dark { width: 48px; height: 48px; border-radius: 24px; background: rgba(11,27,43,.78); }

/* nudge */
.cg-nudge { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 10px; align-items: center; }
.cg-nudge-mid { display: flex; flex-direction: column; align-items: center; }
.cg-nudge-val { font-size: 17px; font-weight: 700; }
.cg-nudge-sub { font-size: 13px; color: var(--cg-ink2); }

/* loop panel */
.cg-panel-loop { gap: 10px; }
.cg-bartop { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--cg-ink3); }
.cg-tab { font-variant-numeric: tabular-nums; }
.cg-loopbar { position: relative; height: 32px; display: flex; align-items: center; cursor: pointer; }
.cg-loopbar-track { position: absolute; left: 0; right: 0; height: 8px; border-radius: 4px; background: var(--cg-navy-4); }
.cg-loopbar-range { position: absolute; height: 12px; border-radius: 6px; background: var(--cg-accent-hi); }
.cg-loopbar-knob { position: absolute; width: 24px; height: 24px; margin-left: -12px; border-radius: 12px; background: #fff; border: 3px solid var(--cg-accent-hi); box-sizing: border-box; pointer-events: none; }
.cg-loopbar-knob.is-outside { border-color: var(--cg-muted); }
.cg-chipbtn { height: 44px; padding: 0; border-radius: 10px; border: 2px solid var(--cg-line); background: transparent; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.cg-chipbtn.is-on { background: #fff; border-color: #fff; color: var(--cg-navy) !important; }
.cg-chipline { display: flex; align-items: center; gap: 6px; }
.cg-chiplabel { width: 44px; flex: none; font-size: 14px; font-weight: 600; color: var(--cg-ink2); }
.cg-chipgrid { flex: 1; display: grid; gap: 6px; }
.cg-chipgrid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cg-chipgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cg-chipgrid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* place sync: B's time gap at this spot */
.cg-gappill { position: absolute; left: 10px; top: 10px; height: 36px; padding: 0 12px; border-radius: 18px; border: 2px dashed var(--cg-ghost); background: var(--cg-ghost-bg); color: var(--cg-navy); display: flex; align-items: center; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; z-index: 2; }
.cg-canvas { position: absolute; left: 0; top: 0; display: block; }

/* short phones: tighten the loop panel */
@media (max-height: 720px) {
  .cg-panel { padding-top: 8px; gap: 8px; }
  .cg-ctrl-lg { height: 54px; }
  .cg-chipbtn { height: 44px; }
}

/* ---- fullscreen loop */
.cg-root-full { background: #000; }
.cg-loop-full { position: relative; }
.cg-loop-full .cg-stage { position: absolute; inset: 0; background: #000; }
.cg-fulltop { position: absolute; left: 0; right: 0; top: 0; padding: calc(10px + env(safe-area-inset-top, 0)) 10px 0 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; pointer-events: none; z-index: 5; }
.cg-fulltop > * { pointer-events: auto; }
.cg-fullbtns { display: flex; gap: 8px; }
.cg-pairchip { margin-top: 8px; height: 32px; padding: 0 12px; border-radius: 16px; background: rgba(11,27,43,.78); display: flex; align-items: center; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cg-fullbottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 14px calc(18px + env(safe-area-inset-bottom, 0)); display: flex; flex-direction: column; gap: 10px; z-index: 5; }
.cg-loop-full .cg-loopbar-track { background: rgba(11,27,43,.6); }
.cg-loop-full .cg-ctrl { border-radius: 32px; background: rgba(11,27,43,.78); }
.cg-loop-full .cg-ctrl-main { background: #fff; }
.cg-loop-full .cg-zoompill { top: auto; bottom: calc(136px + env(safe-area-inset-bottom, 0)); }
.cg-loop-full .cg-gappill { top: auto; bottom: calc(136px + env(safe-area-inset-bottom, 0)); left: 14px; }
.cg-loop-full .cg-hintpill { top: 70px; bottom: auto; }

/* Spåra: film row (Byt film) and person choice */
.cg-filmrow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cg-filmrow[hidden] { display: none; }
.cg-filmrow-name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; font-size: 15px; }
.cg-filmrow-side { flex: none; font-weight: 700; }
.cg-filmrow-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cg-ink2); }
.cg-btn-sm { flex: none; min-height: 44px; padding: 0 14px; font-size: 16px; border-color: var(--cg-line); }
.cg-choicecol { display: flex; flex-direction: column; gap: 8px; max-height: 38vh; overflow-y: auto; }
.cg-personbtn { justify-content: space-between; min-height: 52px; text-align: left; }
.cg-personbtn-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-personbtn-note { flex: none; font-size: 14px; font-weight: 600; color: var(--cg-ink2); }
.cg-btn-new { border: 2px dashed var(--cg-line); }
.cg-choicelist { display: flex; flex-direction: column; gap: 10px; }
.cg-choice:disabled { opacity: .55; cursor: default; }
.cg-choice .cg-ic svg { width: 26px; height: 26px; }
.cg-choice-new { width: 100%; min-height: 56px; margin-top: 12px; }