/* Expedit UI vignettes: stylised recreations of Lightroom Classic +
   the Expedit menu bar app. Chrome is CSS; choreography lives in
   vignettes.js, which drives the state classes at the bottom. Thumbs
   are real before/after photo pairs that crossfade as they develop. */

  * { box-sizing: border-box; margin: 0; padding: 0; }

  /* ═══════════ Shared Lightroom Classic chrome (lrv-) ═══════════ */
  .lrv {
    width: 760px; max-width: 96vw; aspect-ratio: 16/10; position: relative;
    border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.09);
    background: #161618; font-size: 12px; color: #b8b8b8;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 40px 90px -20px rgba(0,0,0,.65);
  }
  /* macOS menu bar (dark) */
  .lrv-menubar {
    height: 28px; background: rgba(255,255,255,.035); display: flex; align-items: center;
    gap: 15px; padding: 0 14px; font-size: 12.5px; color: #dddddd;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .lrv-menubar .apple { font-size: 13px; }
  .lrv-menubar .appname { font-weight: 600; }
  .lrv-mi { position: relative; padding: 3px 7px; border-radius: 4px; }
  /* macOS dropdown */
  .lrv-menu {
    position: absolute; top: 25px; left: 0; min-width: 190px; z-index: 30;
    background: rgba(44,44,46,.98); border-radius: 7px; padding: 5px;
    border: .5px solid rgba(255,255,255,.14);
    box-shadow: 0 14px 40px rgba(0,0,0,.55); font-size: 12.5px; color: #e8e8e8;
    opacity: 0;
  }
  .lrv-menu .it { padding: 4px 20px 4px 10px; border-radius: 5px; position: relative; white-space: nowrap; }
  .lrv-menu .it.sub::after { content: '▸'; position: absolute; right: 8px; color: #9a9a9a; }
  .lrv-menu .sep { height: 1px; background: rgba(255,255,255,.12); margin: 4px 10px; }
  .lrv-submenu {
    position: absolute; left: calc(100% - 4px); top: -5px; min-width: 200px;
    background: rgba(44,44,46,.98); border-radius: 7px; padding: 5px;
    border: .5px solid rgba(255,255,255,.14);
    box-shadow: 0 14px 40px rgba(0,0,0,.55); opacity: 0;
  }
  /* LR body: grid + right panel */
  .lrv-body { display: grid; grid-template-columns: 1fr 168px; height: calc(100% - 26px); }
  .lrv-gridwrap { padding: 14px; background: #161618; display: flex; flex-direction: column; gap: 10px; }
  .lrv-grid { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr; gap: 7px; }
  .lrv-cell {
    background: #1d1d20; border: 1px solid rgba(255,255,255,.06); border-radius: 8px;
    position: relative; padding: 5px 5px 15px;
  }
  .lrv-cell .idx { position: absolute; top: 2px; left: 5px; font-size: 8.5px; color: #6f6f6f; z-index: 3; }
  .lrv-thumb { width: 100%; height: calc(100% - 2px); border-radius: 7px; overflow: hidden; position: relative; background: #101010; }
  .lrv-thumb svg { width: 100%; height: 100%; display: block; }
  .lrv-stars { position: absolute; bottom: 2px; left: 5px; font-size: 8px; letter-spacing: 1px; color: #c9c9c9; opacity: 0; z-index: 3; }
  .lrv-flag { position: absolute; top: 2px; right: 4px; font-size: 9px; opacity: 0; z-index: 3; }
  /* Basic panel */
  .lrv-panel { background: #1a1a1d; border-left: 1px solid rgba(255,255,255,.06); padding: 12px 14px; font-size: 11px; overflow: hidden; }
  .lrv-ph { display: flex; justify-content: space-between; color: #d6d6d6; font-weight: 600; margin-bottom: 9px; }
  .lrv-ph .tri { color: #8a8a8a; }
  .lrv-sec { color: #999; font-size: 10px; margin: 8px 0 5px; display: flex; justify-content: space-between; }
  .lrv-sl { margin-bottom: 7px; }
  .lrv-sl .lab { display: flex; justify-content: space-between; margin-bottom: 2px; color: #b0b0b0; }
  .lrv-sl .val { color: #d0d0d0; font-variant-numeric: tabular-nums; }
  .lrv-track { height: 2.5px; background: #454545; border-radius: 2px; position: relative; }
  .lrv-track.temp { background: linear-gradient(90deg, #4a7bd0, #8a8a70, #d0b04a); }
  .lrv-track.tint { background: linear-gradient(90deg, #4ab058, #8a8a80, #c05ac0); }
  .lrv-knob {
    position: absolute; top: -4px; width: 9px; height: 11px; border-radius: 2.5px;
    background: #9a9a9a; border: 1px solid #6a6a6a; left: 50%; transform: translateX(-50%);
  }
  /* cursor */
  .lrv-cursor { position: absolute; width: 15px; height: 15px; z-index: 60; pointer-events: none; opacity: 0; }
  .lrv-cursor svg { display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,.7)); }
  .lrv-click { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid #6fbcff; opacity: 0; transform: scale(.3); }
  .lrv-caption { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 11.5px; color: #8a8a8a; z-index: 40; }
  .lrv-caption span { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; }

  /* ═══════════ Real-pixel thumbs: before + after pair ═══════════ */
  .lrv-photo {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
  .lrv-photo.ph-before { z-index: 1; }
  .lrv-photo.ph-after { z-index: 2; opacity: 0; transition: opacity .65s ease; }
  .lrv-thumb:has(.lrv-photo) > svg { display: none; }
  .lrv-badge-edited {
    position: absolute; bottom: 2px; right: 4px; font-size: 7.5px; color: #7da87b;
    opacity: 0; z-index: 3; transition: opacity .3s ease .35s;
  }

  /* ═══════════ State classes (driven by vignettes.js) ═══════════ */
  .lrv-menu, .lrv-submenu { transition: opacity .15s ease; }
  .lrv-menu.open, .lrv-submenu.open { opacity: 1; }
  .lrv-menu .it.hl, .lrv-submenu .it.hl { background: #2e62d9; color: #fff; }
  .lrv-cursor { transition: opacity .3s ease; }
  .lrv-knob { transition: left .24s ease; }
  .lrv-caption span { transition: opacity .4s ease; }
  .lrv-caption span.on { opacity: 1; }
  .lrv-cell.dev .ph-after { opacity: 1; }
  .lrv-cell.dev .lrv-badge-edited { opacity: 1; }
  .lrv-cell.dev .lrv-stars, .lrv-cell.dev .lrv-flag { opacity: 1; transition: opacity .3s ease .4s; }
  .lrv-click.ping { animation: lrv-ping .5s ease-out; }
  @keyframes lrv-ping {
    0% { opacity: .9; transform: scale(.35); }
    100% { opacity: 0; transform: scale(1.25); }
  }

  /* ═══════════ Vignette B extras: correction labels ═══════════ */
  .vgb .b-hand { border-color: #5a7fb4; }
  .vgb .b-hand .lrv-thumb::after {
    content: 'corrected'; position: absolute; bottom: 2px; left: 4px; font-size: 7.5px;
    color: #6fbcff; opacity: 0; z-index: 3; transition: opacity .35s ease .3s;
  }
  .vgb .b-hand.dev .lrv-thumb::after { opacity: 1; }
  .vgb .b-yours .lrv-thumb::after {
    content: 'your edit, untouched'; position: absolute; bottom: 2px; left: 4px; font-size: 7.5px;
    color: #c9c9c9; opacity: 0; z-index: 3; transition: opacity .35s ease;
  }
  .vgb .b-yours.show-label .lrv-thumb::after { opacity: 1; }

  /* ═══════════ Vignette C: away-day stage (phone → menu bar → LR) ═══════════ */
  .vgc-stage { width: 760px; max-width: 96vw; aspect-ratio: 16/10; position: relative;
               border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.08);
               background: #17171a; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
  .vgc-scene { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
  .vgc-scene.on { opacity: 1; }
  .vgc-tag { position: absolute; top: 16px; left: 0; right: 0; text-align: center;
             font: 300 10px/1 ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; color: #3d9be9; }
  /* phone frame */
  .vgc-phone { width: 300px; margin: 48px auto 0; background: #000; border-radius: 34px;
               border: 2.5px solid #3a3a3c; padding: 14px 12px 18px; height: 380px; }
  .vgc-notch { width: 90px; height: 20px; background: #000; border: 2px solid #3a3a3c; border-top: none;
               border-radius: 0 0 14px 14px; margin: -14px auto 10px; }
  .vgc-chat { display: flex; flex-direction: column; gap: 9px; padding: 6px 4px; }
  .vgc-bub { padding: 8px 12px; border-radius: 16px; font-size: 12px; max-width: 88%;
             opacity: 0; transform: translateY(8px);
             transition: opacity .28s ease, transform .28s ease; }
  .vgc-bub.pop { opacity: 1; transform: none; }
  .vgc-bub.me { align-self: flex-end; background: #0a84ff; color: #fff; border-bottom-right-radius: 4px; }
  .vgc-bub.cl { align-self: flex-start; background: #26262a; color: #e6e1d6; border: 1px solid rgba(255,255,255,.09); border-bottom-left-radius: 4px; }
  .vgc-bub.cl em { color: #6fbcff; font-style: normal; }
  /* mac menubar scene: real macOS menu bar + Expedit dropdown open */
  .vgc-macbar { height: 26px; background: rgba(40,40,42,.97); display: flex; align-items: center;
                justify-content: flex-end; gap: 13px; padding: 0 14px; font-size: 12px; color: #ddd; }
  .vgc-lricon { width: 13px; height: 13px; border-radius: 3px;
                background: linear-gradient(135deg, #3d9be9, #6fbcff); }
  .vgc-drop { position: absolute; top: 27px; right: 96px; width: 250px;
              background: rgba(44,44,46,.98); border-radius: 8px; padding: 6px;
              border: .5px solid rgba(255,255,255,.14); box-shadow: 0 16px 44px rgba(0,0,0,.6);
              font-size: 12.5px; color: #e8e8e8; }
  .vgc-drop .hd { padding: 5px 10px; color: #9a9a9a; font-size: 11px; }
  .vgc-drop .hd strong { color: #e8e8e8; font-weight: 600; display: block; font-size: 12.5px; }
  .vgc-drop .it { padding: 4px 10px; border-radius: 5px; color: #c8c8c8; }
  .vgc-drop .sep { height: 1px; background: rgba(255,255,255,.12); margin: 4px 8px; }
  .vgc-prog { margin: 6px 10px 8px; }
  .vgc-prog .t { font-size: 11px; color: #b8b8b8; margin-bottom: 5px; }
  .vgc-bar { height: 4px; border-radius: 2px; background: #1c1c1e; overflow: hidden; }
  .vgc-fill { height: 100%; width: 6%; background: linear-gradient(90deg, #3d9be9, #6fbcff);
              border-radius: 2px; transition-property: width;
              transition-timing-function: cubic-bezier(.3,.1,.3,1); }
  .vgc-count { font-size: 10.5px; color: #8a8a8a; margin-top: 4px; font-variant-numeric: tabular-nums; }
  /* LR final scene reuses lrv chrome */
  .vgc .lrv { width: 100%; height: 100%; border-radius: 0; border: none; box-shadow: none; aspect-ratio: auto; }

  /* ═══════════ Reduced motion: settled end state, no choreography ═══════════ */
  .vg-static .ph-after,
  .vg-static .lrv-badge-edited,
  .vg-static .lrv-stars,
  .vg-static .lrv-flag { opacity: 1 !important; transition: none !important; }
  .vgc.vg-static .sc3 { opacity: 1; }

/* ── Responsive fit: scale the whole stage to the container width so every
   cursor path, menu position and click lands exactly where it was tuned,
   at any screen size. Container-query units (iOS 16+/modern browsers);
   below the design width without cq support, a stepped fallback applies. */
.vg-fit {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 760 / 475;
}
.vg-fit > .lrv,
.vg-fit > .vgc-stage {
  position: absolute;
  top: 0; left: 0;
  width: 760px;
  height: 475px;
  aspect-ratio: auto;
  max-width: none;
  transform-origin: top left;
  transform: scale(calc(100cqw / 760));
}
@supports not (width: 100cqw) {
  .vg-fit > .lrv, .vg-fit > .vgc-stage { transform: none; position: relative;
    width: 100%; height: auto; aspect-ratio: 16/10; }
  @media (max-width: 800px) {
    .vg-fit { aspect-ratio: auto; height: auto; }
  }
}
/* Round the scaled stage's corners consistently on small screens */
@media (max-width: 520px) {
  .vg-fit > .lrv, .vg-fit > .vgc-stage { border-radius: 8px; }
}