/* Lab 3, round nine, last pass: an own wall (free.js, class "own"). Loaded after free.css.
   The wall is live from the start and every gesture that begins on it is its own: no scrolling, no pull to refresh.
   On a phone the field is shorter than the screen, so the way on is in sight at once: a small arrow in the wall's bottom
   right corner that takes you to the music, under the wall the bar (Start view, Clients), and the top of the music.
   Gestures that start under the wall scroll. On a desktop the wheel is always the page's (no overscroll containment
   there: the wall is a scroll container, and containment would stop the wheel from reaching the page). */
.field.own .f-view { touch-action: none; }
.touch .field.own .f-view { overscroll-behavior: contain; }
.field.own .f-view.over { cursor: grab; } /* the wall is dense: the hand is always over a work, and it still says "drag" */
.field.own .f-view.drag { cursor: grabbing; }
.f-hint.hold { opacity: 0; }
/* a desktop: the help, a small glass note over the wall's lower left corner (not a dialog: the wall works under and
   round it), and four small arrows in the lower right that move the wall while pressed. Glass: a light, warm tint over
   a strong blur, so the type reads over any poster; a hairline of light on top, a soft shadow under. */
.f-help, .f-help-q, .f-pad button { -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); background: rgba(244,242,236,.66);
  border: 1px solid rgba(255,255,255,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 14px 36px rgba(24,20,14,.22); color: #141414; }
.f-help { position: absolute; z-index: 36; left: var(--pad); bottom: 76px; width: 300px; padding: 13px 16px 12px; border-radius: 18px; font-size: 13px; line-height: 1.35; }
.f-help dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 8px 0 0; align-items: baseline; }
.f-help dt { justify-self: start; } .f-help dd { margin: 0; color: #2c2a26; }
.f-help b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em; margin: 0 26px 6px 0; }
.f-help p { margin: 4px 0 0; color: #2c2a26; }
.f-help .k { display: inline-block; padding: 1px 6px 2px; margin-right: 3px; border-radius: 6px; background: rgba(20,20,20,.08); font-size: 12px; font-weight: 500; color: #141414; font-variant-numeric: tabular-nums; }
.f-help-x { all: unset; cursor: pointer; position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-size: 18px; line-height: 1; color: #4a4741; }
.f-help-x:hover { background: rgba(20,20,20,.07); }
.f-help-q { all: unset; cursor: pointer; position: absolute; z-index: 36; left: var(--pad); bottom: 76px; padding: 8px 13px; border-radius: 99px; font-size: 13px;
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); background: rgba(244,242,236,.66); border: 1px solid rgba(255,255,255,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 28px rgba(24,20,14,.2); }
.f-help, .f-help-q { transition: opacity 200ms cubic-bezier(.22, 1, .36, 1), transform 200ms cubic-bezier(.22, 1, .36, 1), visibility 0s; transform-origin: 0 100%; }
.f-help.shut, .f-help-q.shut { opacity: 0; transform: translateY(6px) scale(.98); visibility: hidden; pointer-events: none; transition: opacity 140ms cubic-bezier(.22, 1, .36, 1), transform 140ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 140ms; }
.f-pad { position: absolute; z-index: 36; right: var(--pad); bottom: 76px; width: 112px; height: 112px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); }
.f-pad button { all: unset; cursor: pointer; display: grid; place-items: center; width: 36px; height: 36px; margin: auto; border-radius: 50%;
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); background: rgba(244,242,236,.66); border: 1px solid rgba(255,255,255,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 8px 22px rgba(24,20,14,.2);
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1), background-color 140ms ease; }
.f-pad button svg { width: 15px; height: 15px; }
.f-pad button:active { transform: scale(.92); background: rgba(255,255,255,.8); }
@media (hover: hover) and (pointer: fine) { .f-pad button:hover { background: rgba(255,255,255,.78); } }
.f-pad .f-pad-up { grid-area: 1 / 2; } .f-pad .f-pad-left { grid-area: 2 / 1; } .f-pad .f-pad-right { grid-area: 2 / 3; } .f-pad .f-pad-down { grid-area: 3 / 2; }
.f-help-x:focus-visible, .f-help-q:focus-visible, .f-pad button:focus-visible { outline: 2px solid #2b6cff; outline-offset: 2px; }
.touch .f-help, .touch .f-help-q, .touch .f-pad { display: none; }
.field.own .f-view:focus-visible { outline: 2px solid #2b6cff; outline-offset: -4px; } /* the keyboard's mark, apart from the hover (which has none) */
/* the way on, on a phone: a small arrow, a comfortable 48 px target, apart from the wall (a touch on it is not a drag) */
.f-down { display: none; }
.touch .field.own .f-down { display: grid; place-items: center; position: absolute; z-index: 34; right: 6px; bottom: 68px; width: 48px; height: 48px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.touch .field.own .f-down span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #141414; color: #e6e4de; box-shadow: 0 4px 14px rgba(20,20,20,.25); transition: transform 160ms cubic-bezier(.23, 1, .32, 1); }
.touch .field.own .f-down:active span { transform: scale(.94); }
.touch .field.own .f-down svg { width: 16px; height: 16px; }
.touch .field.own .f-down:focus-visible span { outline: 2px solid #2b6cff; outline-offset: 2px; }
.touch .field.own .f-bar .f-btn.ink { display: none; } /* the arrow is the way on; the bar keeps Start view and Clients */
.field.own #fExplore, .field.own .f-top { display: none !important; } /* no separate mode to enter */
.f-cue { display: none; }
.touch .field.own { height: calc(100svh - 64px); } /* the music's top shows under the field */
.touch .field.own .f-only-mouse { display: inline-block; } /* Start view and Clients, on a phone too */

@media (max-width: 400px) { .touch .field.own .f-say { display: none; } .touch .field.own .f-bar { gap: 6px; justify-content: flex-end; } .touch .field.own .f-btn { padding: 10px 11px; } }
@media (prefers-reduced-motion: reduce) { .touch .field.own .f-down span, .f-help, .f-help-q, .f-help.shut, .f-help-q.shut, .f-pad button { transition: opacity 120ms ease; transform: none; } }
/* Liquid glass (liquid-glass.js, after Liquid Glass Studio by Charles Yin, MIT): the glass is drawn in the wall's WebGL,
   under these elements, from the wall behind them: refracted at the rim, split into colour there, lit along the rim and
   by a glare, which is what draws the glass. Through it the wall shows plainly: a light frost of about 3 css px over the
   whole surface (--lg-frost) and a tint of a few per cent (--lg-tint). The type is clean: no halo, outline or shadow (Omer
   rejected treatments round the letters, and a milky panel). It reads because each piece, as a whole, takes a light or a
   dark appearance from what is behind it (--lg-ink: auto; the glass sets data-lg-ink), as liquid glass does: dark type
   on a lightened glass over light works, light type on a deepened glass over dark ones, each lift capped at .28 of tint (--lg-adapt).
   Without WebGL2 the class "lg" never comes and the CSS glass above stays as the fallback. */
.f-help, .f-help-q, .f-pad button, .f-hint, .f-down span { --lg-ink: auto; --lg-tint: rgba(246,244,239,.04); --lg-frost: 1; --lg-adapt: .5; }
.f-pad button, .f-down span { --lg-frost: .7; }
[data-lg-ink="light"] { --lg-tint: rgba(16,16,16,.06); --lg-adapt: -.46; }
@media (hover: hover) and (pointer: fine) { .f-pad button:hover { --lg-tint: rgba(255,255,255,.16); } .f-pad button[data-lg-ink="light"]:hover { --lg-tint: rgba(16,16,16,.2); } }
.f-pad button:active { --lg-tint: rgba(255,255,255,.26); } .f-pad button[data-lg-ink="light"]:active { --lg-tint: rgba(16,16,16,.3); }
.lg .f-help, .lg .f-help-q, .lg .f-pad button, .lg .f-pad button:hover, .lg .f-pad button:active, .lg .f-hint, .field.own.lg .f-down span {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-color: transparent; }
.lg .f-help, .lg .f-help-q, .lg .f-pad button, .lg .f-hint, .field.own.lg .f-down span { color: #141414; transition: color 220ms cubic-bezier(.22, 1, .36, 1); }
.lg .f-help dd, .lg .f-help p, .lg .f-help b, .lg .f-help-x { color: inherit; }
.lg .f-help dd { font-weight: 500; }
.lg .f-help .k { background: none; padding: 0; font-weight: 600; color: inherit; } /* the keys as type, not chips on the glass */
.lg [data-lg-ink="light"], .field.own.lg .f-down span[data-lg-ink="light"] { color: #f7f5f0; }
.f-help { width: max-content; max-width: 300px; } /* the shorter note takes only its own width */