/* input scenes: styles for js/scenes/input.js only, every class prefixed in-. Props are in screen units on the 1512 x 982 display. */
.in-desk { position: absolute; left: 456px; width: 600px; display: flex; align-items: center; justify-content: center; gap: 30px; }
.in-desk.col { flex-direction: column; gap: 12px; }
.in-colm { display: flex; flex-direction: column; gap: 10px; }
.in-note { font-size: 12px; color: var(--notch-text-2); text-align: center; }
.in-ar { display: grid; place-items: center; font-size: 18px; color: var(--notch-text-2); flex: none; }

/* In the notch */
.in-pk { padding: 0 22px; }
.in-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.1); font-size: 17px; flex: none; }
.in-ic.ok { background: rgba(48,209,88,.22); color: var(--notch-green); }
.in-ti, .in-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-cap { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 8px; flex: none;
  font: 600 12px/1 -apple-system, BlinkMacSystemFont, system-ui; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1);
  transition: background 180ms, color 180ms, opacity 180ms, border-color 180ms; }
.in-cap.on { background: var(--notch-blue); border-color: rgba(255,255,255,.2); color: #fff; }
.in-dim .in-cap { opacity: .4; }
.in-rule { gap: 8px; }
.in-rule .t2 { margin-left: 6px; }
.in-maps { display: flex; flex-direction: column; gap: 8px; }
.in-mrow { height: 40px; padding: 0 12px; gap: 8px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid transparent; transition: background 180ms, border-color 180ms; }
.in-mrow.on { background: rgba(10,132,255,.16); border-color: rgba(10,132,255,.7); }
.in-dots { display: flex; gap: 6px; margin-left: 10px; }
.in-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.2); transition: background 160ms, scale 260ms var(--ease-quint); }
.in-dots i.on { background: var(--notch-blue); scale: 1.2; }

/* Keycaps: a simple rounded key */
.in-key { position: relative; display: grid; place-items: center; min-width: 60px; height: 56px; padding: 0 12px; border-radius: 12px; flex: none;
  background: #2a2b31; border: 1px solid #3d3e46; box-shadow: 0 4px 0 #17181c, inset 0 1px 0 rgba(255,255,255,.08);
  color: var(--notch-text); font: 600 14px/1 -apple-system, BlinkMacSystemFont, system-ui; cursor: pointer;
  transition: translate 90ms var(--ease-out), box-shadow 90ms, background 140ms, opacity 200ms; }
span.in-key { cursor: default; }
.in-key.w { min-width: 116px; }
.in-key.s { min-width: 40px; height: 40px; padding: 0; border-radius: 9px; font-size: 13px; box-shadow: 0 3px 0 #17181c, inset 0 1px 0 rgba(255,255,255,.08); }
.in-key.dn, .in-key.press { translate: 0 3px; box-shadow: 0 1px 0 #17181c, inset 0 1px 0 rgba(255,255,255,.08); background: #3a3b43; }
.in-key.on { background: var(--notch-blue); border-color: rgba(255,255,255,.28); color: #fff; }
.in-key:focus-visible, .in-act:focus-visible, .in-tp:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 3px; }
.in-kb { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.in-kb > div { display: flex; gap: 6px; }
.in-kc { display: flex; gap: 10px; min-width: 126px; }
.in-kc .in-key { opacity: 0; }
.in-kc.has .in-key { opacity: 1; }
.in-fld { min-width: 230px; height: 36px; padding: 0 14px; border-radius: 10px; display: flex; align-items: center; background: #1c1d22; border: 1px solid #2f3036; font-size: 15px; letter-spacing: .04em; }
.in-fld:empty::before { content: "Type here"; color: #6c6d75; letter-spacing: 0; }
.in-fld .ex { color: var(--notch-amber); }
.in-out { min-width: 112px; padding: 10px 16px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: opacity 200ms; }
.in-out small { display: block; font-size: 11px; color: var(--notch-text-2); }
.in-out b { display: block; margin-top: 3px; font-size: 18px; font-weight: 600; }
.in-tag { position: absolute; left: 50%; top: -30px; translate: -50% 0; padding: 5px 10px; border-radius: 999px; background: rgba(255,214,10,.16); border: 1px solid rgba(255,214,10,.5);
  color: var(--notch-amber); font: 600 11px/1 -apple-system, system-ui; white-space: nowrap; pointer-events: none; animation: in-tag 1100ms var(--ease-out) forwards; }
@keyframes in-tag { 0% { opacity: 0; translate: -50% 6px; } 15%, 70% { opacity: 1; translate: -50% 0; } 100% { opacity: 0; translate: -50% -4px; } }

/* Ripples and pops */
.in-rip { position: absolute; width: 20px; height: 20px; margin: -10px; border-radius: 50%; border: 2px solid var(--notch-teal); pointer-events: none; opacity: 0; animation: in-rip 650ms var(--ease-out) forwards; }
@keyframes in-rip { from { opacity: .9; scale: .4; } to { opacity: 0; scale: 3.6; } }
.in-pop { animation: in-pop 420ms var(--sp-reward); }
@keyframes in-pop { from { scale: .8; } }
.in-flash { animation: in-flash 1100ms var(--ease-out) forwards; }
@keyframes in-flash { 0% { opacity: 0; } 15%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* Mouse */
.in-mouse { position: relative; width: 100px; height: 158px; border-radius: 50px 50px 46px 46px; background: #25262c; border: 1px solid #3d3e46; flex: none; }
.in-mouse > * { position: absolute; display: block; transition: background 140ms, translate 90ms var(--ease-out), scale 120ms; }
.in-mb { top: -1px; height: 64px; background: #2d2e35; border: 1px solid #3d3e46; }
.in-mb.l { left: -1px; width: 50px; border-radius: 50px 4px 4px 4px; }
.in-mb.r { right: -1px; width: 50px; border-radius: 4px 50px 4px 4px; }
.in-wh { left: 43px; top: 16px; width: 14px; height: 28px; border-radius: 7px; background: #4a4b54; }
.in-sb { left: -6px; width: 9px; height: 24px; border-radius: 4px 0 0 4px; background: #34353c; border: 1px solid #4a4b54; }
.in-sb.f { top: 52px; } .in-sb.b { top: 82px; }
.in-wa { left: 42px; top: 50px; font-size: 16px; color: var(--notch-text-2); rotate: 90deg; }
.in-wa.t { left: 60px; top: 22px; font-size: 13px; rotate: 0deg; }
.in-act { cursor: pointer; }
.in-wh.in-act::after, .in-sb.in-act::after { content: ""; position: absolute; inset: -8px; }
.in-mb.on, .in-wh.on, .in-sb.on { background: var(--notch-blue); }
.in-mb.dn, .in-mb.press { translate: 0 2px; background: #3a3b43; }
.in-sb.dn, .in-sb.press { translate: -2px 0; }
.in-mouse.mv { animation: in-mv 1500ms var(--ease-inout) infinite alternate; }
@keyframes in-mv { to { translate: 0 -16px; } }

/* Trackpad */
.in-tp { position: relative; width: 270px; height: 168px; border-radius: 18px; flex: none; cursor: pointer; touch-action: none;
  background: rgba(28,29,34,.9); border: 1px solid #34353c; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: scale 90ms var(--ease-out), background 140ms; }
.in-tp.dn, .in-tp.press { scale: .985; background: rgba(42,44,52,.95); }
.in-f { position: absolute; left: 0; top: 0; width: 20px; height: 20px; margin: -10px; border-radius: 50%; background: rgba(255,255,255,.85); pointer-events: none;
  box-shadow: 0 0 14px rgba(107,204,255,.6); opacity: 0; scale: .5; transition: opacity 180ms var(--ease-out), scale 260ms var(--ease-quint), translate 90ms linear; }
.in-f.on { opacity: 1; scale: 1; }
.in-edge { position: absolute; top: 10px; bottom: 10px; width: 14px; border-radius: 7px; border: 1px dashed rgba(255,255,255,.2); pointer-events: none; transition: background 180ms, border-color 180ms; }
.in-edge.r { right: 8px; } .in-edge.l { left: 8px; }
.in-edge.on { background: rgba(10,132,255,.25); border-color: var(--notch-blue); }
.in-lap { position: relative; width: 360px; height: 170px; display: grid; grid-template-columns: repeat(10, 1fr); grid-auto-rows: 18px; gap: 6px; align-content: start; padding: 14px 16px; flex: none;
  border-radius: 18px; background: #1c1d22; border: 1px solid #34353c; cursor: pointer; transition: translate 90ms var(--ease-out); }
.in-lap i { border-radius: 4px; background: #2a2b31; }
.in-lap b { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; width: 130px; height: 46px; border-radius: 8px; border: 1px solid #3a3b43; }
.in-lap.dn, .in-lap.press { translate: 0 2px; }
.in-ct { min-width: 180px; padding: 14px 18px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.in-ct small { font-size: 11px; color: var(--notch-text-2); }
.in-ct b { display: block; font: 600 40px/1.1 -apple-system, system-ui; font-variant-numeric: tabular-nums; }
.in-strip { display: flex; gap: 6px; height: 12px; margin-top: 8px; }
.in-strip i { width: 12px; height: 12px; border-radius: 50%; background: #fff; animation: in-pop 320ms var(--sp-reward); }
.in-strip i.x { background: var(--notch-amber); }
.in-strip i.ig { background: none; border: 1.5px dashed var(--notch-red); }

/* Acceleration chart: the curve bends, the straight line is what is left without acceleration */
.in-chart { position: relative; width: 270px; height: 160px; flex: none; }
.in-chart path:not([stroke]) { fill: none; stroke-width: 2.5; stroke-linecap: round; transition: opacity 260ms; }
.in-chart .cv { stroke: var(--notch-amber); } .in-chart .lr { stroke: var(--notch-blue); opacity: .2; }
.in-chart.flat .cv { opacity: .2; } .in-chart.flat .lr { opacity: 1; }
.in-chart text { font: 500 10px -apple-system, system-ui; fill: var(--notch-text-2); }
.in-d { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--notch-amber); offset-path: path("M24 136Q150 128 246 20"); offset-rotate: 0deg; animation: in-trav 2200ms var(--ease-inout) infinite alternate; }
.in-chart.flat .in-d { background: var(--notch-blue); offset-path: path("M24 136L246 20"); }
@keyframes in-trav { to { offset-distance: 100%; } }

/* Windows and lists */
.in-win { position: relative; width: 260px; height: 160px; border-radius: 12px; overflow: hidden; flex: none; background: #1c1d22; border: 1px solid #2f3036; }
.in-colm .in-win { height: 140px; }
.in-bar { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-bottom: 1px solid #2a2b31; font-size: 11px; color: var(--notch-text-2); }
.in-bar > i { width: 8px; height: 8px; border-radius: 50%; background: #3a3b41; }
.in-lc { position: absolute; left: 0; right: 0; top: 28px; }
.in-li { height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 12px; border-bottom: 1px solid #26272c; }
.in-li::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: #3a3b41; flex: none; }
.in-dir { position: absolute; right: 12px; top: 40px; font-size: 20px; color: var(--notch-blue); opacity: 0; }
.in-g { display: grid; grid-template-columns: repeat(6, 56px); grid-auto-rows: 56px; gap: 8px; padding: 10px; width: max-content; }
.in-g i { border-radius: 10px; background: #2a2b31; }
.in-g i:nth-child(4n+2) { background: #30323a; } .in-g i:nth-child(4n+3) { background: #262a36; } .in-g i:nth-child(4n) { background: #2d2a3a; }
.in-tr { width: 260px; height: 40px; overflow: visible; }
.in-tr text { font: 500 10px -apple-system, system-ui; fill: var(--notch-text-2); }
.in-tr path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.in-tr .st { stroke: var(--notch-amber); } .in-tr .sm { stroke: var(--notch-blue); }
.in-pgs { position: absolute; left: 0; top: 28px; bottom: 0; width: 300%; display: flex; transition: translate 340ms var(--ease-quint); }
.in-pg { width: 33.3333%; padding: 14px 18px; }
.in-pg b { display: block; font-size: 17px; font-weight: 600; margin-bottom: 12px; }
.in-ln { height: 9px; margin-bottom: 10px; border-radius: 5px; background: #2a2b31; }
.in-nv { display: grid; place-items: center; font-size: 15px; color: var(--notch-text); transition: opacity 180ms; }
.in-nv.b { rotate: 180deg; }
.in-nv.off { opacity: .3; }
.in-bar b { margin-left: 8px; font-weight: 600; color: var(--notch-text); }
.in-tabs { display: flex; gap: 4px; padding: 6px 8px 0; height: 28px; border-bottom: 1px solid #2a2b31; }
.in-tab { padding: 0 12px; height: 22px; display: grid; place-items: center; border-radius: 7px 7px 0 0; font-size: 11px; background: #2a2b31; color: var(--notch-text-2); white-space: nowrap; max-width: 84px; overflow: hidden; text-overflow: ellipsis; animation: in-pop 380ms var(--sp-reward); }
.in-tab:first-child { color: var(--notch-text); background: #34353c; }
.in-lk { position: relative; margin: 16px 14px 0; padding: 10px 12px; border-radius: 9px; font-size: 13px; background: #26272c; color: var(--notch-blue); text-decoration: underline; transition: background 160ms; }
.in-lk.hl { background: rgba(10,132,255,.22); }
.in-cur { position: absolute; right: 22px; top: 22px; width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .in-key, .in-tp, .in-lap, .in-f, .in-edge, .in-mouse > *, .in-pgs, .in-dots i, .in-cap, .in-mrow, .in-out, .in-lk { transition: none; }
  .in-mouse.mv, .in-d, .in-rip, .in-pop, .in-tag, .in-strip i, .in-tab { animation: none; }
  .in-flash { animation: none; opacity: 1; }
}