/* ukulell.ru — тема «Песенник»
   Рукописная тетрадь с песнями: линованная бумага, синяя ручка, красный карандаш на аккордах. */

:root{
  --paper:#FCFAF3;
  --sheet:#FFFDF6;
  --ink:#20242E;
  --ink-soft:#4A4E58;
  --pencil:#7C7768;
  --rule:#DED7C2;
  --rule-soft:#EDE8DA;
  --blue:#2A4B8D;
  --blue-hover:#1D3A72;
  --blue-wash:#E8EDF7;
  --red:#C03A2B;
  --shadow:0 1px 2px rgba(32,36,46,.05), 0 10px 26px -20px rgba(32,36,46,.5);

  --f-hand:"Caveat", "Segoe Script", cursive;
  --f-body:"Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --shell:1140px;
  --radius:10px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#171613;
    --sheet:#1E1D19;
    --ink:#E9E5DC;
    --ink-soft:#BBB6AA;
    --pencil:#928C7C;
    --rule:#33312B;
    --rule-soft:#28261F;
    --blue:#89AEEC;
    --blue-hover:#A6C3F4;
    --blue-wash:#1E2735;
    --red:#E87A66;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -20px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --paper:#171613;
  --sheet:#1E1D19;
  --ink:#E9E5DC;
  --ink-soft:#BBB6AA;
  --pencil:#928C7C;
  --rule:#33312B;
  --rule-soft:#28261F;
  --blue:#89AEEC;
  --blue-hover:#A6C3F4;
  --blue-wash:#1E2735;
  --red:#E87A66;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -20px rgba(0,0,0,.9);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--blue); text-decoration:none}
a:hover{color:var(--blue-hover); text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--blue); outline-offset:2px; border-radius:3px;
}

img{max-width:100%; height:auto}

.shell{max-width:var(--shell); margin:0 auto; padding:0 16px}

/* ---------- шапка ---------- */
.top{
  background:var(--sheet);
  border-bottom:1px solid var(--rule);
}
.top-in{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:12px 16px; max-width:var(--shell); margin:0 auto;
}
.logo{
  font-family:var(--f-hand); font-size:32px; font-weight:700; line-height:1;
  color:var(--blue); text-decoration:none; white-space:nowrap;
}
.logo:hover{text-decoration:none; color:var(--blue-hover)}
.logo small{
  display:block; font-family:var(--f-body); font-size:11px; font-weight:500;
  color:var(--pencil); letter-spacing:.04em; margin-top:2px;
}
.top-nav{display:flex; gap:16px; font-size:14.5px; font-weight:500; flex-wrap:wrap}
.top-nav a{color:var(--ink-soft)}
.top-nav a:hover{color:var(--blue)}
.top-nav a.on{color:var(--blue)}
.top-spacer{flex:1}

.theme-toggle{
  border:1px solid var(--rule); background:transparent; color:var(--pencil);
  border-radius:999px; padding:5px 10px; font:inherit; font-size:13px; cursor:pointer;
  line-height:1;
}
.theme-toggle:hover{border-color:var(--blue); color:var(--blue)}

/* ---------- поиск ---------- */
.search{position:relative; display:flex; width:100%; max-width:420px}
.search input{
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--rule); border-radius:999px;
  padding:9px 40px 9px 16px;
}
.search input::placeholder{color:var(--pencil)}
.search input:focus{border-color:var(--blue); outline:none}
.search button{
  position:absolute; right:4px; top:4px; bottom:4px; width:34px;
  border:0; background:transparent; color:var(--pencil); cursor:pointer;
  display:flex; align-items:center; justify-content:center; border-radius:999px;
}
.search button:hover{color:var(--blue)}

/* ---------- алфавит ---------- */
.alphabet{
  background:var(--sheet); border-bottom:1px solid var(--rule);
  padding:9px 0;
}
.alphabet-row{display:flex; flex-wrap:wrap; gap:3px; justify-content:center}
.alphabet-row + .alphabet-row{margin-top:5px}
.alphabet a{
  min-width:26px; text-align:center; padding:3px 5px;
  font-size:13.5px; font-weight:600; color:var(--ink-soft);
  border-radius:6px; line-height:1.3;
}
.alphabet a:hover{background:var(--blue-wash); color:var(--blue); text-decoration:none}
.alphabet a.on{background:var(--blue); color:var(--sheet)}
.alphabet a.on:hover{background:var(--blue-hover); color:var(--sheet)}

/* ---------- каркас страницы ---------- */
main{padding:26px 0 56px}
.crumbs{font-size:13px; color:var(--pencil); margin:0 0 12px}
.crumbs a{color:var(--pencil)}
.crumbs a:hover{color:var(--blue)}
.crumbs span{margin:0 5px; opacity:.6}

h1{
  font-family:var(--f-hand); font-weight:700;
  font-size:clamp(32px,6vw,46px); line-height:1.05; margin:0 0 6px;
  letter-spacing:.005em; text-wrap:balance;
}
h2{
  font-family:var(--f-hand); font-weight:700; font-size:30px; line-height:1.1;
  margin:0 0 12px;
}
.lead{color:var(--pencil); margin:0 0 22px; font-size:15.5px}

.section{margin-top:38px}
.section-head{
  display:flex; align-items:baseline; gap:12px; margin-bottom:14px;
}
.section-head h2{margin:0}
.section-head .more{font-size:14px; margin-left:auto; white-space:nowrap}

/* ---------- карточки подборок ---------- */
.tiles{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
}
.tile{
  display:flex; flex-direction:column; justify-content:space-between; gap:8px;
  min-height:82px; padding:13px 15px;
  background:var(--sheet); border:1px solid var(--rule); border-radius:var(--radius);
  box-shadow:var(--shadow);
  color:var(--ink); font-weight:500;
}
.tile:hover{border-color:var(--blue); color:var(--blue); text-decoration:none}
.tile b{font-weight:600; font-size:15px; line-height:1.25}
.tile span{font-size:12.5px; color:var(--pencil); font-variant-numeric:tabular-nums}

/* ---------- списки песен ---------- */
.cols{display:grid; gap:34px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

.songlist{list-style:none; margin:0; padding:0}
.songlist li{border-bottom:1px solid var(--rule-soft)}
.songlist li:last-child{border-bottom:0}
.songlist a{
  display:flex; align-items:baseline; gap:10px; padding:9px 2px;
  color:var(--ink);
}
.songlist a:hover{color:var(--blue); text-decoration:none; background:var(--blue-wash)}
.songlist .rank{
  font-family:var(--f-mono); font-size:12px; color:var(--red);
  min-width:26px; flex:none; font-variant-numeric:tabular-nums;
}
.songlist .name{flex:1; min-width:0; font-size:15px; line-height:1.35}
.songlist .name i{font-style:normal; color:var(--pencil)}
.songlist .meta{
  font-size:12.5px; color:var(--pencil); flex:none; font-variant-numeric:tabular-nums;
}

/* ---------- сетка исполнителей ---------- */
.artists{
  display:grid; gap:2px 22px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  list-style:none; margin:0; padding:0;
}
.artists li{border-bottom:1px solid var(--rule-soft)}
.artists a{display:flex; gap:8px; align-items:baseline; padding:7px 2px; color:var(--ink)}
.artists a:hover{color:var(--blue); text-decoration:none}
.artists .n{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px}
.artists .c{font-size:12px; color:var(--pencil); font-variant-numeric:tabular-nums}

/* ---------- страница песни ---------- */
.song-head{margin-bottom:16px}
.song-artist{
  font-size:16px; font-weight:600; margin:0;
}
.song-facts{
  display:flex; flex-wrap:wrap; gap:14px; margin:10px 0 0;
  font-size:13px; color:var(--pencil); font-variant-numeric:tabular-nums;
}

.toolbox{
  background:var(--sheet); border:1px solid var(--rule); border-radius:var(--radius);
  padding:14px 16px; box-shadow:var(--shadow); margin-bottom:20px;
}
.chordstrip{
  display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; margin-bottom:12px;
  scrollbar-width:thin;
}
.chordstrip:empty{display:none}
.chordstrip .cits-c-b{flex:none; text-align:center}
.chordstrip img{display:block; width:64px; height:auto}

.controls{
  display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center;
  font-size:13.5px;
}
.control-group{display:flex; align-items:center; gap:7px}
.control-group > .label{color:var(--pencil); font-size:12.5px; white-space:nowrap}

.seg{display:flex; border:1px solid var(--rule); border-radius:999px; overflow:hidden}
.seg button{
  border:0; background:transparent; color:var(--ink-soft); font:inherit; font-size:13px;
  font-weight:600; padding:5px 13px; cursor:pointer; line-height:1.4;
}
.seg button:hover{background:var(--blue-wash); color:var(--blue)}
.seg button.on{background:var(--blue); color:var(--sheet)}

.pill{
  border:1px solid var(--rule); background:transparent; color:var(--ink-soft);
  border-radius:999px; padding:5px 12px; font:inherit; font-size:13px; font-weight:600;
  cursor:pointer; line-height:1.4;
}
.pill:hover{border-color:var(--blue); color:var(--blue)}
.pill.on{background:var(--blue); border-color:var(--blue); color:var(--sheet)}

input[type="range"]{accent-color:var(--blue); width:96px}
input[type="color"]{
  width:34px; height:28px; padding:2px; border:1px solid var(--rule);
  border-radius:6px; background:var(--paper); cursor:pointer;
}

/* лист с песней — линованная бумага */
.sheet-wrap{
  background:var(--sheet);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.sheet{
  margin:0; padding:18px 18px 22px;
  font-family:var(--f-mono);
  font-size:15px;
  line-height:1.7;
  color:var(--ink);
  white-space:pre;
  overflow-x:auto;
  tab-size:4;
  background-image:linear-gradient(to bottom, transparent calc(1.7em - 1px), var(--rule-soft) calc(1.7em - 1px), var(--rule-soft) 1.7em);
  background-size:100% 1.7em;
  background-position:0 18px;
}
.sheet .c,
.sheet span.c{color:var(--red); font-weight:700}

.sticky-chords{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--sheet); border-top:1px solid var(--rule);
  padding:8px 10px; display:none; gap:8px; overflow-x:auto;
  box-shadow:0 -6px 20px -12px rgba(0,0,0,.4);
}
.sticky-chords.show{display:flex}
.sticky-chords img{width:48px; height:auto}

/* ---------- пагинация ---------- */
.pager{display:flex; flex-wrap:wrap; gap:6px; margin-top:26px; align-items:center}
.pager a,.pager span{
  min-width:36px; text-align:center; padding:6px 10px; border-radius:8px;
  border:1px solid var(--rule); font-size:14px; font-weight:500; color:var(--ink-soft);
}
.pager a:hover{border-color:var(--blue); color:var(--blue); text-decoration:none}
.pager .cur{background:var(--blue); border-color:var(--blue); color:var(--sheet)}
.pager .gap{border:0}

/* ---------- текстовые страницы ---------- */
.prose{max-width:68ch}
.prose p{margin:0 0 14px}
.prose h2,.prose h3{font-family:var(--f-hand); margin:26px 0 10px}
.prose ul,.prose ol{margin:0 0 14px; padding-left:22px}
.prose img{border-radius:var(--radius)}

.empty{
  padding:34px 18px; text-align:center; color:var(--pencil);
  border:1px dashed var(--rule); border-radius:var(--radius);
}

/* ---------- подвал ---------- */
.foot{
  border-top:1px solid var(--rule); background:var(--sheet);
  padding:26px 0 34px; margin-top:50px; font-size:14px; color:var(--pencil);
}
.foot-in{display:flex; flex-wrap:wrap; gap:18px 40px; align-items:flex-start}
.foot-nav{display:flex; flex-wrap:wrap; gap:14px}
.foot a{color:var(--ink-soft)}
.foot a:hover{color:var(--blue)}

@media (max-width:640px){
  .top-in{gap:10px; padding:10px 14px}
  .logo{font-size:27px}
  .search{max-width:none; order:3}
  .top-nav{font-size:14px; gap:13px}
  .sheet{font-size:13.5px; padding:14px 14px 18px; background-position:0 14px}
  main{padding:18px 0 44px}
  .alphabet a{min-width:23px; font-size:13px; padding:3px 4px; flex:none}
  .alphabet-row{flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; scrollbar-width:none}
  .alphabet-row::-webkit-scrollbar{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ---------- фильтры списков ---------- */
.filters{
  display:flex; flex-direction:column; gap:8px;
  margin:0 0 20px; padding:12px 14px;
  background:var(--sheet); border:1px solid var(--rule); border-radius:var(--radius);
}
.filter-row{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.filter-label{
  font-size:12.5px; color:var(--pencil); margin-right:4px; white-space:nowrap;
}
.filters .pill{text-decoration:none; display:inline-block}
.filters .pill:hover{text-decoration:none}
.filters .pill.on{background:var(--blue); border-color:var(--blue); color:var(--sheet)}

@media (max-width:640px){
  .filters{padding:10px 12px; gap:7px}
  .filter-row{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
  .filter-row::-webkit-scrollbar{display:none}
  .filters .pill{flex:none}
}