/* ==========================================================================
   Tune UI kit. Every page builds on these tokens and components; /ui-kit shows them all.
   Buttons:  .primary (the one main action) · .secondary (outlined) · .tonal (soft fill) · .link-button (blue text)
             .danger-button · .danger-link · .icon-button (round) · .small (a compact size of any button)
             .lang-switch (EN · RU, the language shown pressed)
   Links:    a plain link is blue text without underline; a link styled as a button takes a button class.
   Surfaces: section (a card) · .hint (small grey text) · .notice (the page's toast)
   Tags:     .tag-chip (pressed with aria-pressed; .personal for one's own) inside .tag-list or .tag-filter
   ========================================================================== */
:root{
  --bg:#f7f3ff;--card:#fff;
  --primary:#6558d3;--primary-active:#5547c3;--primary-soft:#eeeaff;--primary-soft-active:#e0daff;
  --coral:#ff6b57;--coral-active:#ed5947;--coral-soft:#ffe8e3;
  --danger:#b3261e;--danger-border:#e8b4a4;
  --text:#29263a;--text-sec:#68647a;--hint:#918ca1;
  --border:#e8e2f2;--divider:#f3eff8;
  --shadow-sm:0 1px 4px rgba(0,0,0,.04);--shadow:0 2px 12px rgba(0,0,0,.06);
  --r:16px;--r-sm:12px;--r-xs:8px;
  /* control heights: large for the page's main action, regular for the rest, small inside cards and rows */
  --h-lg:48px;--h:44px;--h-sm:36px;
  --gap:12px;--pad:16px;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--text);background:var(--bg);font-synthesis:none;
  -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent
}
*,*::before,*::after{box-sizing:border-box}
/* App screens, not a document: a double tap must not zoom (Safari 13+, Chrome). Pinch is cancelled in /pwa.js. */
html,body{touch-action:manipulation}
body{margin:0;overflow-x:hidden}
main{max-width:480px;margin:0 auto;padding:calc(8px + var(--safe-t)) calc(16px + var(--safe-r)) calc(20px + var(--safe-b)) calc(16px + var(--safe-l))}

/* --- header: [back] logo ............ [account] — the same on every page --- */
header{display:flex;align-items:center;gap:8px;min-height:var(--h);margin-bottom:8px}
.brand{font-size:22px;font-weight:750;letter-spacing:-1.2px;line-height:1;text-decoration:none;color:var(--text);padding:6px 2px}
.brand span{font-size:11px;color:var(--coral);margin-left:1px}
.header-end{margin-left:auto;display:flex;align-items:center;gap:6px}

/* --- typography --- */
h1{font-size:22px;font-weight:700;line-height:1.25;letter-spacing:-.4px;margin:0 0 10px}
em{font-style:normal;color:var(--primary)}
h2{font-size:15px;font-weight:650;color:var(--text-sec);margin:0 0 10px;letter-spacing:0}
h3{font-size:16px;font-weight:650;margin:0 0 4px}
.intro{font-size:15px;line-height:1.45;color:var(--text-sec);margin:-4px 0 12px}
label{display:block;font-size:14px;font-weight:550;color:var(--text-sec);margin:10px 0 4px}
.hint{font-size:13px;line-height:1.45;color:var(--hint);margin:6px 0}
a{color:var(--primary);text-decoration:none;font-weight:600}
a:active{opacity:.7}

/* --- card --- */
section{background:var(--card);border:none;border-radius:var(--r);box-shadow:var(--shadow);padding:var(--pad);margin-bottom:var(--gap)}
section>:first-child{margin-top:0}section>:last-child{margin-bottom:0}

/* --- buttons --- */
button,.btn{font:inherit;font-size:15px;font-weight:650;width:100%;min-height:var(--h);padding:8px 14px;border-radius:var(--r-sm);cursor:pointer;margin:4px 0;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center;text-decoration:none;line-height:1.25;
  transition:transform .1s,opacity .1s,background .15s;-webkit-appearance:none;appearance:none}
button:active:not(:disabled),.btn:active{transform:scale(.97)}
button:disabled{opacity:.35;cursor:default}
.primary{background:var(--primary);color:#fff;border:none;min-height:var(--h-lg);font-size:16px}
.primary:active:not(:disabled){background:var(--primary-active)}
.secondary{background:var(--card);color:var(--primary);border:1.5px solid var(--border)}
.secondary:active:not(:disabled){background:var(--primary-soft)}
.tonal{background:var(--primary-soft);color:var(--primary);border:none}
.tonal:active:not(:disabled){background:var(--primary-soft-active)}
.link-button{width:auto;min-height:var(--h-sm);border:0;background:transparent;color:var(--primary);margin:0;padding:6px 8px;font-size:14px;font-weight:650}
.link-button:active:not(:disabled){background:var(--primary-soft)}
/* The speaker of the Listen button, on every button that plays something. */
.listen-icon{flex:0 0 auto;width:18px;height:18px;fill:currentColor}
.link-button .listen-icon{width:15px;height:15px}
/* A sound on its way pulses the speaker; while it plays, bars move in its place and a second tap stops it. */
.play-bars{display:none;flex:0 0 auto;align-items:flex-end;justify-content:center;gap:2px;width:18px;height:18px;padding:2px 1px}
.link-button .play-bars{width:15px;height:15px}
.play-bars i{flex:1;height:100%;border-radius:2px;background:currentColor;transform-origin:50% 100%;animation:play-bars .9s ease-in-out infinite}
.play-bars i:nth-child(2){animation-delay:-.6s}.play-bars i:nth-child(3){animation-delay:-.3s}
.playing>.listen-icon{display:none}.playing>.play-bars{display:flex}
:not(.icon-button).loading>.listen-icon{animation:play-wait 1s ease-in-out infinite}
button.secondary.loading,button.link-button.loading{background:var(--primary-soft)}
button.secondary.playing,button.link-button.playing{background:var(--primary);border-color:var(--primary);color:#fff}
@keyframes play-bars{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes play-wait{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.play-bars i,:not(.icon-button).loading>.listen-icon{animation:none}}
.danger-button{background:transparent;color:var(--danger);border:1.5px solid var(--danger-border)}
.danger-button:active:not(:disabled){background:var(--coral-soft)}
.danger-link{color:var(--danger)}.danger-link:active:not(:disabled){background:var(--coral-soft)}
.small{min-height:var(--h-sm);padding:6px 12px;font-size:14px;border-radius:var(--r-xs)}

/* --- tag chips: a pill that is pressed or not (aria-pressed); a tag of one's own has a dashed border --- */
.tag-chip{width:auto;min-height:var(--h-sm);margin:0;padding:6px 14px;border-radius:999px;border:1.5px solid var(--border);background:var(--card);
  color:var(--text);font-size:14px;font-weight:600;white-space:nowrap;flex:none}
.tag-chip.personal{border-style:dashed}
.tag-chip[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.icon-button{flex:0 0 auto;width:40px;height:40px;min-height:40px;margin:0;padding:0;border:0;border-radius:50%;background:var(--primary-soft);color:var(--primary);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.icon-button:active:not(:disabled){background:var(--primary-soft-active)}
.icon-button.plain{background:transparent}.icon-button.plain:active:not(:disabled){background:var(--primary-soft)}
.icon-button.danger-link{background:transparent;color:var(--danger)}
.icon-button svg{display:block}
/* a two-way language switch (EN · RU): the language shown is filled */
.lang-switch{display:inline-flex;flex:0 0 auto;gap:2px;padding:2px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--border)}
.lang-switch button{width:auto;min-height:30px;margin:0;padding:2px 10px;border:0;border-radius:999px;background:transparent;color:var(--text-sec);font-size:12px;font-weight:750;letter-spacing:.4px}
.lang-switch button[aria-pressed=true]{background:var(--primary);color:#fff}
.lang-switch button:disabled{opacity:1}.lang-switch button.loading{animation:lang-pulse 1s ease-in-out infinite}
@keyframes lang-pulse{50%{opacity:.45}}
/* a form ends with its button, set apart from the last field */
form>button:last-child{margin-top:12px}
.button-row{display:flex;gap:8px;align-items:center}.button-row>*{flex:1 1 0;margin:0}

/* --- inputs --- */
input:not([type=checkbox]):not([type=file]):not([type=radio]),select,textarea{width:100%;min-height:var(--h);padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r-xs);
  background:var(--card);font:inherit;font-size:16px;color:var(--text);margin:0}
select{-webkit-appearance:none;appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23918ca1' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
textarea{resize:vertical;line-height:1.45}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary)}
input[type=file]{width:100%;font-size:14px}
input::file-selector-button{border:1.5px solid var(--border);background:var(--divider);padding:10px 14px;border-radius:var(--r-xs);margin-right:8px;font:inherit;font-size:14px;cursor:pointer}
.toggle{display:flex;align-items:center;gap:10px;line-height:1.4;min-height:var(--h)}
.toggle input{width:22px;height:22px;accent-color:var(--primary)}
audio{width:100%;display:block;margin:8px 0;border-radius:var(--r-xs)}
time{font-variant-numeric:tabular-nums;font-weight:650;color:var(--text-sec)}

/* --- disclosure: a summary reads as a blue link with a chevron --- */
details{padding:0}
summary{cursor:pointer;font-size:14px;font-weight:650;color:var(--primary);min-height:var(--h-sm);display:flex;align-items:center;gap:6px;list-style:none}
summary::-webkit-details-marker{display:none}
/* a drawn chevron: pointing right when closed, down when open */
summary::after{content:'';flex:none;width:6px;height:6px;margin:0 2px 0 1px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
details[open]>summary::after{transform:translateY(-2px) rotate(45deg)}

/* --- status toast --- */
/* The status line is a toast (toast.js): fixed at the top, shown while it has text and the toast-visible class. */
.notice{position:fixed;left:50%;top:calc(var(--safe-t) + 12px);z-index:1000;box-sizing:border-box;width:min(calc(100% - 32px),480px);
  margin:0;padding:12px 16px;border-radius:var(--r-sm);background:var(--text);color:#fff;font-size:15px;font-weight:500;line-height:1.4;
  box-shadow:0 10px 30px rgba(41,38,58,.28);cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-12px);
  transition:opacity .2s,transform .2s,visibility .2s}
.notice.toast-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.notice.toast-error{background:#c9373c}.notice.toast-success{background:#1a7a4b}
.notice.toast-error::before{content:"⚠ "}.notice.toast-success::before{content:"✓ "}
.notice:empty{display:none}
@media (prefers-reduced-motion:reduce){.notice{transition:none}}

footer{font-size:12px;color:var(--hint);text-align:center;margin-top:24px}

/* --- accessibility --- */
:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* A page's blocks fade in as they appear: on load, and when a script unhides them once their data arrives, since an
   animation starts whenever an element begins to render. Opacity only (the docked record panel keeps its transform),
   and no forwards fill, so the toast and other styles own their opacity afterwards. */
main>:not(header):not(.notice){animation:content-in .24s ease-out backwards}
@keyframes content-in{from{opacity:0}}

/* --- the /ui-kit page --- */
.kit-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kit-swatches span{display:flex;align-items:flex-end;height:52px;padding:4px 6px;border-radius:var(--r-xs);font-size:11px;font-weight:600;color:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.kit-swatches .light{color:var(--text)}
.sw-primary{background:var(--primary)}.sw-primary-soft{background:var(--primary-soft)}.sw-coral{background:var(--coral)}.sw-danger{background:var(--danger)}
.sw-text{background:var(--text)}.sw-text-sec{background:var(--text-sec)}.sw-hint{background:var(--hint)}.sw-bg{background:var(--bg)}
.kit-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.kit-row>button:not(.icon-button){width:auto;margin:0}
.kit-row .best-score{margin-left:0}
.kit-header{border:1.5px dashed var(--border);border-radius:var(--r-sm);padding:0 8px;margin:0}