/* Lowcut design tokens and base components (docs/plans/2026-10-29-redesign.md).
   Dark, one accent, hierarchy by size and space instead of borders; calm, short motion.
   Font: Medeo (OFL, licenses/Medeo-1.0.0-rc.4.1-OFL.txt): Sans for everything, Pixel (shape Circle, ELSH 20) for the wordmark and readouts, https://github.com/DNFDEVS/medeo-font v1.0.0-rc.4.1. */

@font-face { font-family: "Medeo Sans"; src: url(../fonts/MedeoSansVariable.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Medeo Pixel"; src: url(../fonts/MedeoPixelVariable.woff) format("woff"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  /* surfaces */
  --bg: #0b0b0d; --raised: #151517; --fill: #1d1d20; --fill-strong: #26262a; --hairline: rgba(255, 255, 255, .07);
  /* text */
  --text: #f2f2f4; --text-2: #a3a3ab; --text-3: #85858e; --on-light: #0b0b0d;
  /* one accent: the periwinkle of the logo's label (#7c9cff), a step lighter so small text in it reads (8.2:1 on --bg);
     the glow mixes the logo blue with the violet the accent used to be */
  --accent: #8ea2ff; --accent-soft: rgba(142, 162, 255, .14);
  --glow-blue: 124, 156, 255; --glow-violet: 154, 140, 255;
  --good: #5fd39a; --warn: #f0b45a; --bad: #ff6b6b;
  /* track sections: calm, told apart by place as much as by colour */
  --sec-intro: #56637d; --sec-buildup: #a07c48; --sec-drop: #c8697a; --sec-break: #4a7f7a; --sec-outro: #56637d; --sec-other: #3a3a40;
  /* type */
  --font-ui: "Medeo Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-display: "Medeo Pixel", var(--font-ui);              /* the wordmark and the big track readouts only */
  --ff-ui: "ss05" 1, "ss07" 1;                                  /* I with serifs (not l), light arrows */
  --ff-num: "tnum" 1, "ss05" 1, "ss07" 1;
  --t-readout: 400 44px/44px var(--font-display);
  --t-display: 600 32px/36px var(--font-ui); --t-title: 600 20px/26px var(--font-ui);
  --t-body: 400 15px/22px var(--font-ui); --t-small: 400 13px/18px var(--font-ui); --t-caption: 500 11px/14px var(--font-ui);
  /* space, radius */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --r-s: 8px; --r-m: 12px; --r-l: 20px; --r-pill: 999px;
  --shadow-float: 0 16px 48px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--hairline);
  /* motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-move: cubic-bezier(.65, 0, .35, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1); --ease-exit: cubic-bezier(.55, 0, 1, .45);
  /* durations: hover / a value changing / a block entering / a thumb or a toast / a sheet */
  --d-1: 120ms; --d-2: 160ms; --d-3: 200ms; --d-4: 240ms; --d-5: 320ms;
  --bar-h: 56px;
  /* widths: a wide page (stick, «Что дальше»), a set, a reading column (account, genres, import); side lists */
  --w-page: 1160px; --w-mid: 960px; --w-read: 720px; --w-side: 280px;
  /* rows: one line, two lines */
  --row-1: 44px; --row-2: 60px;

  /* names the older styles still use, mapped onto the tokens */
  --panel: var(--raised); --panel2: var(--fill); --line: var(--hairline); --muted: var(--text-2);
  --intro: var(--sec-intro); --buildup: var(--sec-buildup); --drop: var(--sec-drop); --breakdown: var(--sec-break); --outro: var(--sec-outro); --other: var(--sec-other);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
html, body { margin: 0; color: var(--text); font: var(--t-body); font-feature-settings: var(--ff-ui); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* the glow: one soft light in the logo's colours at the top of the app, fixed and static (the header blurs it);
   the sign-in screen has a stronger one of its own (app.css) */
body::before { content: ""; position: fixed; z-index: -1; inset: 0 0 auto; height: 520px; pointer-events: none;
  background:
    radial-gradient(34vw 280px at 64% -60px, rgba(var(--glow-blue), .17), rgba(var(--glow-blue), .05) 55%, transparent 100%),
    radial-gradient(22vw 210px at 80% -40px, rgba(var(--glow-violet), .10), transparent 100%); }
body:has(> #appHeader[hidden])::before { content: none; }       /* the sign-in screen has its own */
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
::selection { background: var(--accent-soft); }
h1, h2, h3, h4 { margin: 0; }
.num, .tnum { font-feature-settings: var(--ff-num); font-variant-numeric: tabular-nums; }
.readout { font: var(--t-readout); font-variation-settings: "ELSH" 20; font-feature-settings: "tnum" 1; font-synthesis: none; letter-spacing: 0; }
.title { font: var(--t-display); letter-spacing: -.02em; }
.sub { color: var(--text-2); margin: var(--s-1) 0 0; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.small { font: var(--t-small); }
.note { color: var(--text-3); font: var(--t-small); margin: var(--s-1) 0 0; }
.err { color: var(--bad); font: var(--t-small); }
.err:empty { display: none; }
.ok-t { color: var(--good); } .warn-t { color: var(--warn); } .bad-t { color: var(--bad); }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.fill { fill: currentColor; stroke: none; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); flex: none; }
.dot.good { background: var(--good); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); } .dot.accent { background: var(--accent); }

/* ---------- header */
.appbar { position: sticky; top: 0; z-index: 20; height: var(--bar-h); display: flex; align-items: center; gap: var(--s-4); padding: 0 var(--s-5);
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px);
  box-shadow: 0 1px 0 var(--hairline); }
.brand { font: 400 22px/1 var(--font-display); font-variation-settings: "ELSH" 20; font-synthesis: none; color: var(--text); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.appbar-title { color: var(--text-2); }
.appbar-gap { flex: 1 1 auto; }
.stick-ind { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-2); font: var(--t-small); white-space: nowrap; }
.stick-ind button { font: var(--t-small); gap: var(--s-2); }
.who { color: var(--text-2); font: var(--t-small); }

/* segmented control: a track with a thumb that slides under the active item */
.seg { position: relative; display: inline-flex; padding: 3px; background: var(--fill); border-radius: var(--r-pill); isolation: isolate; }
.seg > a, .seg > button { position: relative; z-index: 1; border: 0; background: transparent; color: var(--text-2); font: 500 14px/1 var(--font-ui);
  padding: 9px 16px; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; transition: color 160ms linear; }
.seg > a:hover, .seg > button:hover { color: var(--text); text-decoration: none; background: transparent; }
.seg > .on { color: var(--text); }
.seg-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; border-radius: var(--r-pill); background: var(--fill-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform 240ms var(--ease-move), width 240ms var(--ease-move), opacity 120ms linear; opacity: 0; }
.seg.small > a, .seg.small > button { padding: 7px 14px; font-size: 13px; }

/* account menu */
.me { position: relative; }
.me > button { gap: 6px; }
#meBtn .me-ic, .menu-stick, .menu-stick + hr { display: none; }      /* the phone's bar (below) */
.menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: 6px; background: var(--raised); border-radius: var(--r-m);
  box-shadow: var(--shadow-float); display: flex; flex-direction: column; animation: pop 160ms var(--ease-out); transform-origin: top right; z-index: 30; }
.menu a, .menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--r-s); color: var(--text); background: transparent; font: var(--t-body); border: 0; cursor: pointer; }
.menu a:hover, .menu button:hover { background: var(--fill); text-decoration: none; }
.menu hr { border: 0; height: 1px; background: var(--hairline); margin: 6px 4px; }
@keyframes pop { from { opacity: 0; transform: scale(.97) translateY(-4px); } }

/* ---------- buttons: pills, no borders */
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border: 0; border-radius: var(--r-pill);
  background: var(--fill); color: var(--text); font: 500 14px/1 var(--font-ui); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 120ms linear, color 120ms linear, transform 160ms var(--ease-out), opacity 120ms linear; }
button:hover:not(:disabled), .btn:hover { background: var(--fill-strong); text-decoration: none; }
button:active:not(:disabled), .btn:active { transform: scale(.97); transition-duration: 80ms; }
button.primary, .btn.primary { background: var(--text); color: var(--on-light); font-weight: 600; }
button.primary:hover:not(:disabled), .btn.primary:hover { background: #ffffff; }
button.accent, .btn.accent { background: var(--accent); color: var(--on-light); font-weight: 600; }
button.secondary, .btn.secondary { background: var(--fill); }
button.quiet, .btn.quiet, button.link { background: transparent; color: var(--text-2); padding: 0 10px; }
button.quiet:hover:not(:disabled), .btn.quiet:hover { background: var(--fill); color: var(--text); }
button.link { height: auto; padding: 0; color: var(--accent); }
button.link:hover:not(:disabled) { background: transparent; text-decoration: underline; }
button.danger, .btn.danger { color: var(--bad); }
button.icon { width: 36px; padding: 0; }
button.wide, .btn.wide { width: 100%; height: 44px; font-size: 15px; }
button.on { background: var(--fill-strong); color: var(--text); }
button:disabled, .btn[aria-disabled=true] { background: var(--fill); color: var(--text-3); opacity: 1; cursor: default; }
button.quiet:disabled, button.link:disabled { background: transparent; }
/* play: white and round; 56 in a hero, 40 at a block's head, 32 in a row */
.play-btn { width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--text); color: var(--on-light); }
.play-btn:hover:not(:disabled) { background: #fff; }
.play-btn .ic { width: 20px; height: 20px; }
.play-btn.lg { width: 56px; height: 56px; } .play-btn.lg .ic { width: 24px; height: 24px; }
.play-btn.sm { width: 32px; height: 32px; background: transparent; color: var(--text-2); } .play-btn.sm .ic { width: 16px; height: 16px; }
.play-btn.sm:hover:not(:disabled) { background: var(--fill); color: var(--text); }
.play-btn.nostick { opacity: .5; }
/* a verdict: a dot and a word, only when there is something to say (risky); "clean" and "normal" say nothing */
.verdict { display: inline-flex; align-items: center; gap: 6px; font: var(--t-small); color: var(--warn); white-space: nowrap; }
.verdict::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.verdict.bad { color: var(--bad); }
/* one line that says the stick is not there, the same on every screen */
.need-stick { display: flex; align-items: center; gap: var(--s-3); color: var(--text-3); font: var(--t-small); }
kbd { font: 500 11px/1 var(--font-ui); font-feature-settings: var(--ff-num); color: var(--text-3); background: var(--bg); border-radius: 4px; padding: 3px 5px; }

/* ---------- fields */
input[type=text], input[type=password], input[type=search], input[type=number], input:not([type]), select, textarea {
  height: 40px; width: 100%; padding: 0 12px; border: 0; border-radius: var(--r-s); background: var(--fill); color: var(--text); font: var(--t-body);
  transition: box-shadow 120ms linear, background-color 120ms linear; }
textarea { height: auto; padding: 10px 12px; }
select { width: auto; padding-right: 30px; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%23a3a3ab' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent); background: var(--fill-strong); }
input[aria-invalid], input[aria-invalid]:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bad) 60%, transparent); }   /* a field our own check refused */
/* a password field with its eye (ui.js pwToggles): the button shows every [data-pw] field of its form */
.pw { position: relative; display: block; }
.pw > input { width: 100%; padding-right: 44px; }
.pw-eye { position: absolute; right: 4px; top: calc(50% - 18px); width: 36px; height: 36px; padding: 0; background: transparent; color: var(--text-3); border-radius: var(--r-pill); }
.pw-eye:hover:not(:disabled) { background: transparent; color: var(--text); }
.pw-eye[aria-pressed=false] .pw-slash { display: none; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; vertical-align: -3px; cursor: pointer; }
input[type=range] { accent-color: var(--accent); }
label.f { display: flex; flex-direction: column; gap: 6px; color: var(--text-2); font: var(--t-small); }
label.check { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
/* a checkbox drawn as a switch */
label.switch { display: flex; gap: 12px; align-items: center; cursor: pointer; }
label.switch input { appearance: none; width: 40px; height: 24px; border-radius: 12px; background: var(--fill-strong); position: relative; flex: none; transition: background-color 200ms var(--ease-out); }
label.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text); transition: transform 200ms var(--ease-out); }
label.switch input:checked { background: var(--accent); }
label.switch input:checked::after { transform: translateX(16px); }

/* ---------- layout pieces */
.view.enter { animation: enter var(--d-3) var(--ease-out); }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } }
@keyframes fade { from { opacity: 0; } }
/* a value that changed (a track's readouts, a new track's name): a short crossfade with a 3 px settle, never a counter */
@keyframes swap { from { opacity: 0; transform: translateY(3px); } }
/* rows that arrive with data settle in once, 10 ms apart, the whole list within 240 ms (ui.js stagger()) */
.stagger > * { animation: enter var(--d-2) var(--ease-out) both; }
.stagger > :nth-child(2) { animation-delay: 10ms; } .stagger > :nth-child(3) { animation-delay: 20ms; }
.stagger > :nth-child(4) { animation-delay: 30ms; } .stagger > :nth-child(5) { animation-delay: 40ms; }
.stagger > :nth-child(6) { animation-delay: 50ms; } .stagger > :nth-child(7) { animation-delay: 60ms; }
.stagger > :nth-child(8) { animation-delay: 70ms; } .stagger > :nth-child(n+9) { animation-delay: 80ms; }

/* skeletons: the shape of what is loading, so nothing jumps when it arrives. One soft light crosses all the blocks
   together (the gradient is fixed to the viewport); a fast answer never shows them (they fade in after 120 ms). */
.sk { pointer-events: none; animation: fade var(--d-4) linear 120ms both; }
.skel { display: block; height: 14px; border-radius: 6px; background-color: var(--fill); background-clip: content-box;
  background-image: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .045) 50%, transparent 60%);
  background-size: 200vw 100%; background-attachment: fixed; background-repeat: no-repeat; animation: skel 1.2s var(--ease-move) infinite; }
@keyframes skel { from { background-position: -140vw 0; } 75%, to { background-position: 40vw 0; } }
.skel.round { border-radius: 50%; } .skel.pill { border-radius: var(--r-pill); }
/* a line of text: the block is the line box (padding, not margins: they never collapse), the grey is the glyphs' height */
.skel.t-display { height: 36px; padding: 4px 0; border-radius: 6px / 10px; } .skel.t-title { height: 26px; padding: 3px 0; border-radius: 6px / 9px; }
.skel.t-body { height: 22px; padding: 4px 0; border-radius: 6px / 10px; } .skel.t-small { height: 18px; padding: 3.5px 0; border-radius: 5px / 8.5px; }
.skel.readout { height: 44px; width: 64px; padding: 4px 0; border-radius: 8px / 12px; }
.skel.w15 { width: 15%; } .skel.w25 { width: 25%; } .skel.w35 { width: 35%; } .skel.w45 { width: 45%; } .skel.w55 { width: 55%; }
.skel.w65 { width: 65%; } .skel.w75 { width: 75%; } .skel.w100 { width: 100%; }
.page { max-width: var(--w-page); margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-8); }
.page.narrow { max-width: var(--w-read); }
.group { margin-top: var(--s-6); }
.empty { color: var(--text-2); padding: var(--s-6); text-align: center; }
.empty-state { max-width: 440px; margin: 12vh auto; text-align: center; display: grid; gap: var(--s-3); justify-items: center; }
.empty-state h2 { font: var(--t-title); }
.empty-state p { color: var(--text-2); margin: 0 0 var(--s-2); }
/* the logo's record, small and quiet, above an empty state: grooves, the periwinkle label, the light dot */
.empty-state::before, .vinyl::before { content: ""; display: block; width: 64px; height: 64px; margin: 0 auto var(--s-2); border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .85) 0 2px, transparent 2.6px),
    radial-gradient(circle, rgb(var(--glow-blue)) 0 11px, transparent 11.6px),
    repeating-radial-gradient(circle, transparent 0 3px, rgba(255, 255, 255, .05) 3px 4px),
    #121216;
  box-shadow: inset 0 0 0 1px var(--hairline), 0 8px 40px rgba(var(--glow-blue), .14); }
.spin { width: 16px; height: 16px; border: 2px solid var(--fill-strong); border-top-color: var(--text-2); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; vertical-align: -3px; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
details > summary { cursor: pointer; color: var(--text-2); list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 160ms var(--ease-out); }
details[open] > summary::before { transform: rotate(45deg); }
/* folds open smoothly where the browser can (Chrome 131+), instantly elsewhere */
:root { interpolate-size: allow-keywords; }
details::details-content { block-size: 0; overflow: hidden; opacity: 0;
  transition: block-size var(--d-3) var(--ease-out), opacity var(--d-3) linear, content-visibility var(--d-3) allow-discrete; }
details[open]::details-content { block-size: auto; opacity: 1; }
details > summary:hover { color: var(--text); }
.pbar { height: 4px; background: var(--fill); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.pbar i { display: block; height: 100%; background: var(--text-2); border-radius: 2px; transition: width .3s var(--ease-out); }
.pbar.warn i { background: var(--warn); } .pbar.bad i { background: var(--bad); }
.notice { background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--text); border-radius: var(--r-m); padding: 12px 16px; margin-bottom: var(--s-4); font: var(--t-small); }
.notice.info { background: var(--fill); }
.notice.bad { background: color-mix(in srgb, var(--bad) 12%, transparent); }

/* ---------- sheet (secondary content), scrim, toast */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .4); opacity: 0; transition: opacity 200ms linear; }
.scrim.on { opacity: 1; }
.sheet { position: fixed; z-index: 41; top: 8px; right: 8px; bottom: 8px; width: min(440px, calc(100vw - 16px)); display: flex; flex-direction: column;
  background: var(--raised); border-radius: var(--r-l); box-shadow: var(--shadow-float); transform: translateX(calc(100% + 16px));
  transition: transform 220ms var(--ease-exit); }
.sheet.wide { width: min(640px, calc(100vw - 16px)); }
.sheet.on { transform: none; transition: transform 320ms var(--ease-sheet); }
.sheet > header { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-2) var(--s-5); }
.sheet > header h2 { font: var(--t-title); flex: 1; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: var(--s-2) var(--s-5) var(--s-5); flex: 1; }
html.sheet-open, html.sheet-open body { overflow: hidden; }   /* the page under an open sheet does not scroll (ui.js lockPage) */
/* what is in the sheet follows it in, a beat later (only as it opens; a redraw inside does not move) */
.sheet.opening .sheet-body > *, .sheet.opening > header h2 { animation: enter var(--d-4) var(--ease-out) 60ms both; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 24px; display: flex; align-items: center; gap: var(--s-3); padding: 10px 10px 10px 18px; max-width: calc(100vw - 32px);
  background: var(--raised); color: var(--text); border-radius: var(--r-pill); box-shadow: var(--shadow-float); font: var(--t-body);
  transform: translate(-50%, 12px); opacity: 0; transition: transform 160ms var(--ease-exit), opacity 160ms linear; }
.toast.on { transform: translate(-50%, 0); opacity: 1; transition: transform 240ms var(--ease-out), opacity 240ms var(--ease-out); }
.toast:not(:has(button)) { padding-right: 18px; }

/* non-production environments (js/envbanner.js) */
.env-badge { position: fixed; left: 12px; bottom: 12px; z-index: 60; padding: 4px 10px; border-radius: var(--r-pill); background: var(--warn); color: var(--on-light); font: 600 11px/1.2 var(--font-ui); letter-spacing: .06em; pointer-events: none; }

@media (max-width: 760px) {
  .appbar { gap: var(--s-2); padding: 0 var(--s-3); }
  .seg > a, .seg > button { padding: 8px 10px; }
  .stick-ind span:not(.dot) { display: none; }
  .brand { font-size: 18px; }
  .page { padding: var(--s-5) var(--s-4) var(--s-7); }
}
/* a phone: the bar must fit the screen (its nowrap buttons would widen the page). The four sections stay in the bar,
   the account is an icon, the stick's state moves into the account menu (library/main.js draws it in both places) */
@media (max-width: 560px) {
  .appbar .brand, .appbar .stick-ind, #impChip:empty, #whoName, #meBtn .me-chev { display: none; }
  .appbar .seg { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }      /* the last resort: the sections scroll, the page does not */
  .appbar .seg::-webkit-scrollbar { display: none; }
  .appbar .seg > a { flex: none; padding: 12px 8px; font-size: 13px; }
  .appbar .me { flex: none; }
  #meBtn { width: 40px; height: 40px; padding: 0; color: var(--text); }
  #meBtn .me-ic { display: block; width: 20px; height: 20px; }
  .menu { max-width: calc(100vw - 2 * var(--s-3)); }
  .menu a, .menu button { height: auto; padding: 12px; }
  .menu-stick:not(:empty) { display: flex; align-items: center; gap: var(--s-2); padding: 12px; color: var(--text-2); font: var(--t-small); }
  .menu-stick:has(button) { padding: 0; }
  .menu-stick button { display: flex; align-items: center; justify-content: flex-start; gap: var(--s-2); white-space: normal; }
  .menu-stick:not(:empty) + hr { display: block; }
}
/* phones and touch screens: a field under 16 px makes iOS Safari zoom the page on focus */
@media (max-width: 560px), (hover: none) and (pointer: coarse) {
  input[type=text], input[type=password], input[type=search], input[type=number], input[type=email], input:not([type]), select, textarea { font-size: 16px; }
}
/* touch screens: a finger needs 36–44 px (a mouse keeps the compact sizes above) */
@media (hover: none) and (pointer: coarse) {
  .play-btn.sm { width: 40px; height: 40px; }
  .pw-eye { width: 44px; height: 44px; top: calc(50% - 22px); right: 0; }
  input[type=checkbox] { width: 20px; height: 20px; vertical-align: -4px; }
  .appbar .btn, .rb-x { min-width: 36px; min-height: 36px; }      /* /help's «Войти», the status page's close */
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .skel, .auth::before { animation: none !important; }
}