/* Swipe rails (coverflow) + zoom viewer + flying "picked" copy — shared by /, /progress and /lp (swipe.js, feel.js).
   Colours fall back to stamp119's tokens so the file works on any of the pages. */

/* ---------- rail: one row, centre snapping; swipe.js scales items like the Dock ---------- */
.cf{--cf-item:62%;--cf-gap:10px;display:flex;gap:var(--cf-gap);overflow-x:auto;overflow-y:hidden;padding-block:8px;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;outline-offset:-3px}
.cf::-webkit-scrollbar{display:none}
/* end spacers let the first and last item reach the middle */
.cf::before,.cf::after{content:"";flex:0 0 max(0px,calc((100% - var(--cf-item)) / 2 - var(--cf-gap)))}
/* the app's one press (app.css --press): down to .96 in 90ms, back in 240ms (on `scale`, so it never fights the Dock's
   transform) */
.cf>*{flex:0 0 var(--cf-item);min-width:0;scroll-snap-align:center;transform-origin:50% 50%;will-change:transform;cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:scale 240ms cubic-bezier(.23,1,.32,1)}
.cf>*:active{scale:var(--press,.96);transition-duration:90ms}
.cf.cf-pages>*{scroll-snap-stop:always}
.cf img{-webkit-user-drag:none}

/* page dots (≤12 items) or a quiet "3 / 24" counter */
.cf-dots{display:flex;justify-content:center;align-items:center;gap:7px;min-height:10px;margin:2px 0 0}
.cf-dots i{width:6px;height:6px;border-radius:50%;background:rgb(16 48 40 / .18);transition:background-color 200ms cubic-bezier(.23,1,.32,1),transform 200ms cubic-bezier(.23,1,.32,1)}
.cf-dots i.on{background:var(--accent,#0a7c68);transform:scale(1.3)}
.cf-count-text{font-size:12.5px;font-weight:600;color:var(--muted,#66706c);font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ---------- viewer: the tapped picture grows to fill the screen ---------- */
html.sv-lock,html.sv-lock body{overflow:hidden}
.sv{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--ink,#17201d);overflow:hidden;touch-action:none;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif}
.sv::backdrop{background:transparent}
.sv:focus{outline:none}
.sv-bg{position:absolute;inset:0;background:rgb(246 248 247 / .95);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px)}
.sv-pager{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-x}
.sv-pager::-webkit-scrollbar{display:none}
.sv-page{flex:0 0 100%;min-width:0;margin:0;display:grid;padding:calc(env(safe-area-inset-top) + 72px) 16px calc(env(safe-area-inset-bottom) + 78px);scroll-snap-align:center;scroll-snap-stop:always}
.sv-page img{width:100%;height:100%;min-height:0;object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;will-change:transform;
  filter:drop-shadow(0 18px 36px rgb(16 48 40 / .16))}
.sv-btn{position:absolute;z-index:2;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;color:var(--ink,#17201d);cursor:pointer;
  background:rgb(255 255 255 / .86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 1px 2px rgb(0 0 0 / .06),0 6px 20px rgb(0 0 0 / .1),inset 0 0 0 1px rgb(16 48 40 / .08);
  transition:transform 240ms cubic-bezier(.23,1,.32,1),opacity 160ms cubic-bezier(.23,1,.32,1);-webkit-tap-highlight-color:transparent}
.sv-btn:active{transform:scale(var(--press,.96));transition-duration:90ms,160ms}
.sv-btn:focus-visible{outline:2px solid var(--focus-ring,#07614f);outline-offset:2px}
/* opened by a finger or a mouse (swipe.js): ✕ holds the focus without the ring until a key is pressed (WebKit drew it at once) */
.sv.sv-pointer .sv-btn:focus-visible{outline:none}
/* ✕ ‹ ›: lucide's own SVGs (swipe.js VIEWER_ICONS) with the bottom menu's line, a size up (富村「アイコンは線太く少し大きく」) */
.sv-ico{display:block;flex:none;width:24px;height:24px;stroke-width:2.4;pointer-events:none}
.sv-close{top:calc(env(safe-area-inset-top) + 12px);right:12px}
.sv-prev,.sv-next{top:50%;width:44px;height:44px;margin-top:-22px}
.sv-prev{left:10px}.sv-next{right:10px}
.sv-btn:disabled{opacity:0!important;pointer-events:none}
@media (hover:none){.sv-prev,.sv-next{opacity:.72}}
.sv-count{position:absolute;z-index:2;top:calc(env(safe-area-inset-top) + 26px);left:20px;margin:0;font-size:14px;font-weight:600;line-height:1;color:var(--ink-2,#3c4643);font-variant-numeric:tabular-nums;letter-spacing:.02em;pointer-events:none}
.sv-cap{position:absolute;z-index:2;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom) + 30px);margin:0;text-align:center;font-size:15px;font-weight:600;line-height:1.4;color:var(--ink,#17201d);pointer-events:none}
.sv-cap:empty,.sv-count:empty,.sv-count[hidden]{display:none}
/* the counts' words for a screen reader (the viewer's 「5枚のうち1枚目」, a long rail's 「24のうち3番目」); the eye reads 「1 / 5」 */
.sv-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* iPhone 「透明度を下げる」: the viewer's backdrop and buttons are solid, like the app's header and capsule */
@media (prefers-reduced-transparency:reduce){
  .sv-bg{background:rgb(246 248 247);-webkit-backdrop-filter:none;backdrop-filter:none}
  .sv-btn{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------- the chosen thing flying into place (feel.js fly) ---------- */
.fly-ghost{position:fixed;z-index:1300;margin:0;padding:0;pointer-events:none;object-fit:cover;background:#fff;border-radius:14px;
  box-shadow:0 16px 36px rgb(16 48 40 / .24);transform-origin:50% 50%;will-change:transform}