/* Lab 3, round nine: the posters as a free field, not a route. Loaded after lab3.css and d.css.
   The field is one screen with a hard bottom edge: a solid bar that holds the way on ("Next: Music ↓"), so the page
   below is always one step away. The bar replaces round eight's pale gradient, which washed out the works at the bottom.
   The top bar and every control sit on a solid ground, so they read over any composition. */
html, body { height: auto; overflow: visible; }
html.locked { overflow: hidden; overscroll-behavior: none; }
.d-top { position: fixed; z-index: 60; background: rgba(230,228,222,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(20,20,20,.12); padding-top: 14px; padding-bottom: 14px; }
.d-top a, .d-top b { cursor: pointer; }
.field { position: relative; height: 100vh; height: 100svh; padding-top: 52px; background: #e6e4de; display: flex; flex-direction: column; }
.f-view { position: relative; flex: 1; overflow: hidden; touch-action: pan-x pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.f-view.drag { cursor: grabbing; }
.f-view.over { cursor: pointer; }
.f-view canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
/* the bottom edge of the poster area */
.f-bar { position: relative; z-index: 30; flex: none; display: flex; align-items: center; gap: 10px; padding: 10px var(--pad); background: #e6e4de; border-top: 1px solid rgba(20,20,20,.22); min-height: 62px; }
.f-say { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.f-say b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-say span { font-size: 12px; color: #6d6a63; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-btn { all: unset; cursor: pointer; flex: none; padding: 9px 14px; border-radius: 99px; font-size: 14px; line-height: 1; background: rgba(20,20,20,.07); color: #141414; white-space: nowrap; }
.f-btn { transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color 160ms ease; }
.f-btn:active { transform: scale(.97); } /* the press is heard at once */
@media (hover: hover) and (pointer: fine) { .f-btn:hover { background: rgba(20,20,20,.13); } .f-btn.ink:hover { background: #000; } }
.f-btn:focus-visible { outline: 2px solid #2b6cff; outline-offset: 2px; }
.f-btn.ink { background: #141414; color: #e6e4de; }
.f-btn[hidden], .f-only-explore, .f-only-touch { display: none; }
.f-zoom { display: flex; gap: 2px; }
.f-zoom .f-btn { padding: 9px 12px; }
.f-zoom output { min-width: 46px; text-align: center; font-size: 13px; color: #6d6a63; font-variant-numeric: tabular-nums; align-self: center; }
/* the clients: a list that flies to a group, and leaves the roaming free */
.f-clients { position: absolute; z-index: 40; right: var(--pad); bottom: 72px; width: min(320px, calc(100% - 2 * var(--pad))); max-height: min(60vh, 520px); overflow: auto; background: #f2f0eb; border: 1px solid rgba(20,20,20,.16); border-radius: 10px; padding: 6px; box-shadow: 0 18px 50px rgba(30,26,20,.18); }
.f-clients { transform-origin: 100% 100%; visibility: visible; transition: opacity 180ms cubic-bezier(.22, 1, .36, 1), transform 180ms cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.f-clients[hidden] { display: block; opacity: 0; transform: scale(.97) translateY(6px); pointer-events: none; visibility: hidden; transition: opacity 120ms cubic-bezier(.22, 1, .36, 1), transform 120ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 120ms; } /* it grows from its button, and leaves faster */
.f-clients button { all: unset; cursor: pointer; display: flex; justify-content: space-between; width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 6px; font-size: 14px; }
.f-clients button:hover, .f-clients button:focus-visible { background: rgba(20,20,20,.07); }
.f-clients button i { font-style: normal; color: #6d6a63; }
/* the name of whatever the hand is over */
.hov { position: absolute; z-index: 35; pointer-events: none; font-size: 12px; line-height: 1.25; padding: 6px 9px 7px; border-radius: 6px; max-width: 260px; background: #141414; color: #e6e4de;
  transform: translate(14px, 14px); opacity: 0; transition: opacity .12s; }
.hov.on { opacity: 1; }
.hov small { display: block; opacity: .62; font-size: 11px; margin-top: 1px; }
.f-hint { position: absolute; z-index: 32; left: 50%; top: 14px; transform: translateX(-50%); padding: 8px 14px; border-radius: 99px; background: #141414; color: #e6e4de; font-size: 13px; white-space: nowrap; pointer-events: none; transition: opacity .4s; }
.f-hint.gone { opacity: 0; }
.f-hint { transition: opacity 300ms cubic-bezier(.22, 1, .36, 1); }
.f-readout { position: absolute; z-index: 31; left: var(--pad); top: 12px; padding: 5px 9px; border-radius: 6px; background: rgba(230,228,222,.92); font: 500 12px/1 'Inter Tight', sans-serif; font-variant-numeric: tabular-nums; color: #6d6a63; letter-spacing: .04em; pointer-events: none; }
/* ---------- touch: the field is part of the page until "Explore posters" ---------- */
.touch .f-only-touch { display: inline-block; }
.touch .f-zoom, .touch .f-only-mouse { display: none; }
.touch .field { height: 88vh; height: 88svh; } /* the music's edge shows below, so the page plainly goes on */
.field.exploring { position: fixed; inset: 0; z-index: 100; height: 100vh; height: 100dvh; padding-top: 0; }
.field.exploring .f-view { touch-action: none; }
.exploring .f-only-explore { display: inline-block; }
.exploring .f-only-page { display: none; }
.f-top { display: none; }
.exploring .f-top { display: flex; position: relative; z-index: 30; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) var(--pad) 10px; background: #e6e4de; border-bottom: 1px solid rgba(20,20,20,.22); }
.exploring .f-top b { flex: 1; font-size: 15px; font-weight: 600; }
.exploring .f-bar { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
/* for the films only: where the hand is, and a ring where it presses */
.cursor { position: fixed; z-index: 200; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.95), 0 0 0 3px rgba(0,0,0,.45); background: rgba(20,20,20,.25); }
.cursor.on { opacity: 1; } .cursor.press { transform: scale(.72); background: rgba(20,20,20,.55); } .cursor.tap { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
@media (max-width: 760px) { .f-bar { gap: 6px; } .f-btn { padding: 10px 12px; font-size: 14px; } .f-say span { display: none; } }
@media (prefers-reduced-motion: reduce) { .f-btn, .f-clients, .f-clients[hidden] { transition: opacity 120ms ease; transform: none; } .f-btn:active { transform: none; } }
.f-view:focus-visible { outline: 2px solid #2b6cff; outline-offset: -4px; }
.f-end { padding: 48px var(--pad) 64px; color: #6d6a63; font-size: 14px; border-top: 1px solid rgba(20,20,20,.16); }
.f-end a { color: #141414; text-decoration: underline; }