/* ------------------------------------------------------------------ fonts */
/* Inter and JetBrains Mono are served from this app, not a CDN: a private
   tracker should not tell a third party that a visit happened. Both cover
   Cyrillic — the reason Sora had to go (issue #7): it covers Latin only, so
   every Russian glyph fell through to the browser default, a serif. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Every fallback here can draw Cyrillic on the platform it belongs to. A
     fallback that cannot is how #7 happened; keep that property when editing. */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;

  /* --------------------------------------------------------------- colour */
  /* Surfaces, darkest first. */
  --bg: #26251F;
  --surface: #302E27;
  --surface-2: #3A3830;
  --surface-3: #332F28;
  --surface-4: #2B2A23;

  /* Text, brightest first. --muted is the second tier, --muted-2 the third. */
  --text: #EDEAE0;
  --text-2: #C2BCAC;
  --muted: #A8A395;
  --muted-2: #9E988A;   /* was #7A756A — 3.35:1 on --bg, below AA. #9E988A is
                           the dimmest neutral on this ramp that clears 4.5:1
                           on every surface it lands on: 5.35 / 4.73 / 4.63. */
  --cover-ink: #6E695E;

  --accent: #D97757;
  --on-accent: #000;    /* was #fff — 3.12:1 on --accent. Darkening the orange
                           instead was measured and rejected: white needs the
                           background at #B8532F, which drops the button itself
                           to 3.16:1 against the page, from 4.92:1. */
  --disabled: #4A4944;

  --star-on: #E0A050;
  --star-off: #4A4944;

  --danger: #E38670;
  --danger-bg: #3A211C;

  --status-playing: #E0A050;
  --status-completed: #D97757;
  --status-dropped: #E38670;
  --status-wishlist: #7BAFD4;

  /* Borders and dividers. */
  --hairline: rgba(237, 234, 224, .1);
  --hairline-2: rgba(237, 234, 224, .15);
  --hairline-3: rgba(237, 234, 224, .08);
}

/* ------------------------------------------------------------------- base */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); font-family: var(--font-sans); color: var(--text); }
::selection { background: var(--accent); color: var(--on-accent); }
input, textarea, select { font-family: var(--font-sans); }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
.cover-ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--surface-4); color: var(--cover-ink);
  font: 500 11px var(--font-mono); letter-spacing: .04em;
}

/* ------------------------------------------------------- type scale (sans) */
/* Named by rank, not by element: a rank is a typographic level, so every site
   on one level shares one class and they cannot drift apart. Sizes and weights
   are carried over unchanged from the inline styles they replace. */
.t-display { font: 700 26px var(--font-sans); }
.t-h1      { font: 700 22px var(--font-sans); }
.t-h2      { font: 700 20px var(--font-sans); }
.t-h3      { font: 700 18px var(--font-sans); }
.t-h4      { font: 700 16px var(--font-sans); }
.t-h5      { font: 700 14px var(--font-sans); }
.t-h6      { font: 700 13px var(--font-sans); }
.t-tag     { font: 700 11px var(--font-sans); }
.t-strong  { font: 600 14px var(--font-sans); }
.t-item    { font: 600 13px var(--font-sans); }
.t-label   { font: 600 12px var(--font-sans); }
.t-micro   { font: 600 11px var(--font-sans); }
.t-field   { font: 500 14px var(--font-sans); }
.t-note    { font: 500 12px var(--font-sans); }
.t-body    { font: 400 14px var(--font-sans); }
.t-prose   { font: 400 14px/1.6 var(--font-sans); }
.t-body-s  { font: 400 13px var(--font-sans); }

/* -------------------------------------------------------- type scale (mono) */
/* Numbers, ratings, platform tags and counters. */
.n-display { font: 700 28px var(--font-mono); }
.n-label   { font: 600 12px var(--font-mono); }
.n-tag     { font: 600 11px var(--font-mono); }
.n-micro   { font: 600 10px var(--font-mono); }
.n-plain   { font: 400 11px var(--font-mono); }

/* --------------------------------------------------------- reset-rating */
/* «Без оценки». enhanceClickable (app.js:339) gives it role="button" and a
   tabindex, so it is already reachable by keyboard; these rules give it the
   states a button is expected to have. :focus-visible, not :focus — a mouse
   click should not leave a ring behind. */
.reset-rating { color: var(--muted-2); cursor: pointer; }
.reset-rating:hover { color: var(--muted); }
.reset-rating:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}