/* Шрифт. Кириллица и латиница разными файлами: русская страница тянет
   только кириллицу, семь килобайт на начертание. */
@font-face{font-family:Golos;font-style:normal;font-weight:400;font-display:swap;
 src:url(/assets/fonts/golos-cyrillic-400.woff2) format('woff2');
 unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Golos;font-style:normal;font-weight:400;font-display:swap;
 src:url(/assets/fonts/golos-latin-400.woff2) format('woff2');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:Golos;font-style:normal;font-weight:600;font-display:swap;
 src:url(/assets/fonts/golos-cyrillic-600.woff2) format('woff2');
 unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Golos;font-style:normal;font-weight:600;font-display:swap;
 src:url(/assets/fonts/golos-latin-600.woff2) format('woff2');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:Golos;font-style:normal;font-weight:700;font-display:swap;
 src:url(/assets/fonts/golos-cyrillic-700.woff2) format('woff2');
 unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Golos;font-style:normal;font-weight:700;font-display:swap;
 src:url(/assets/fonts/golos-latin-700.woff2) format('woff2');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215}
/* Токены. Тёмная тема не отдельная страница, а другой набор значений. */
:root{
 --bg:#f2f5f3;--surface:#fff;--surface-sunken:#eef2ef;--fg:#0f1a16;--muted:#5a6b64;
 --line:#e0e7e2;--line-strong:#cfdad4;
 --accent:#0b5c40;--accent-strong:#084832;--accent-fg:#fff;--accent-soft:#e7f2ec;--accent-line:#b3d4c4;
 --brass:#a8823c;--warn:#8f4d0d;--warn-soft:#fdf2e6;
 --header-bg:#0d2019;--header-fg:#eaf2ed;--header-muted:#93ada2;
 --panel-from:#0d4f38;--panel-to:#0b3d2c;--panel-fg:#fff;--panel-accent:#fff;--panel-line:transparent;
 --shadow-sm:0 1px 2px rgba(10,26,20,.05),0 1px 1px rgba(10,26,20,.04);
 --shadow:0 2px 4px rgba(10,26,20,.04),0 14px 30px -18px rgba(10,26,20,.28);
 --radius:14px;--radius-sm:10px;--page:70rem;--text:42rem
}
/* Тёмная тема. Три состояния: выбор человека сильнее системной настройки,
   а по умолчанию действует системная. Токены одни и те же, поэтому набор
   значений повторяется дважды, а правила остаются едиными. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --bg:#0b1210;--surface:#131c19;--surface-sunken:#0f1714;--fg:#e6ede9;--muted:#93a8a0;
 --line:#22302b;--line-strong:#2d3d37;
 --accent:#59c99d;--accent-strong:#7fdcb6;--accent-fg:#06231a;--accent-soft:#13251e;--accent-line:#27443a;
 --brass:#c9a25a;--warn:#e0a05a;--warn-soft:#241a10;
 /* В тёмной теме шапка светлее полотна, а не темнее: иначе она сливается
    с фоном и страница начинается ничем. */
 --header-bg:#141f1b;--header-fg:#e6ede9;--header-muted:#93a8a0;
 /* Ярко-зелёная плашка на тёмном фоне слепит, поэтому блок ближайшего
    намаза в тёмной теме приглушается, а акцентом остаётся текст. */
 --panel-from:#14261f;--panel-to:#101d18;--panel-fg:#e6ede9;--panel-accent:#59c99d;--panel-line:#27443a;
 --shadow-sm:0 1px 2px rgba(0,0,0,.4);
 --shadow:0 2px 6px rgba(0,0,0,.35),0 18px 34px -20px rgba(0,0,0,.7)
}}
:root[data-theme="dark"]{
 --bg:#0b1210;--surface:#131c19;--surface-sunken:#0f1714;--fg:#e6ede9;--muted:#93a8a0;
 --line:#22302b;--line-strong:#2d3d37;
 --accent:#59c99d;--accent-strong:#7fdcb6;--accent-fg:#06231a;--accent-soft:#13251e;--accent-line:#27443a;
 --brass:#c9a25a;--warn:#e0a05a;--warn-soft:#241a10;
 /* В тёмной теме шапка светлее полотна, а не темнее: иначе она сливается
    с фоном и страница начинается ничем. */
 --header-bg:#141f1b;--header-fg:#e6ede9;--header-muted:#93a8a0;
 /* Ярко-зелёная плашка на тёмном фоне слепит, поэтому блок ближайшего
    намаза в тёмной теме приглушается, а акцентом остаётся текст. */
 --panel-from:#14261f;--panel-to:#101d18;--panel-fg:#e6ede9;--panel-accent:#59c99d;--panel-line:#27443a;
 --shadow-sm:0 1px 2px rgba(0,0,0,.4);
 --shadow:0 2px 6px rgba(0,0,0,.35),0 18px 34px -20px rgba(0,0,0,.7)
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* padding-bottom держит место под уведомлением о cookie: оно стоит
   полосой поверх страницы, и без запаса закрывало собой расписание.
   Высоту полосы измеряет скрипт, до него запас нулевой. */
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);
 font:400 1rem/1.6 Golos,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
 overflow-x:hidden;-webkit-font-smoothing:antialiased;padding-bottom:var(--cookie-height,0)}
a{color:var(--accent);text-underline-offset:.16em;text-decoration-thickness:1px}
h1,h2,h3{line-height:1.15;margin:0 0 .5rem;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
h2{font-size:1.375rem;margin-top:2.4rem}
h3{font-size:1.06rem;margin-top:1.6rem}
p{margin:0 0 .85rem}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.wrap{width:100%;max-width:var(--page);margin:0 auto;padding:0 1.25rem}
.prose{max-width:none}
.prose p{color:var(--muted)}
.prose :last-child{margin-bottom:0}
/* Шапка. Тёмная: это единственная полоса, которая держит страницу
   и отделяет сайт от белого листа. */
.site-header{background:var(--header-bg);color:var(--header-fg)}
.site-header__inner{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.6rem;padding-top:.85rem;padding-bottom:.85rem}
.site-header__brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.1rem;
 letter-spacing:-.02em;text-decoration:none;color:var(--header-fg)}
.site-header__mark{width:1.75rem;height:1.75rem;flex:0 0 auto;color:var(--brass)}
/* На узком экране логотип с двумя кнопками не помещался в ряд, и кнопка
   темы уезжала на третью строку шапки, отодвигая расписание за сгиб. */
@media (max-width:26rem){
 .site-header__inner{gap:.5rem .6rem}
 .site-header__brand{font-size:1rem;gap:.45rem}
 .site-header__mark{width:1.5rem;height:1.5rem}
 .site-header__find,.site-header__theme{width:2rem;height:2rem}
}
.site-header__nav{display:flex;gap:.15rem;order:3;width:100%;overflow-x:auto;scrollbar-width:none}
.site-header__nav::-webkit-scrollbar{display:none}
.site-header__link{color:var(--header-muted);text-decoration:none;font-size:.94rem;font-weight:500;
 padding:.35rem .7rem;border-radius:var(--radius-sm);white-space:nowrap}
.site-header__link:hover{background:rgba(255,255,255,.09);color:var(--header-fg)}
.site-header__search{margin-left:auto;flex:0 1 17rem}
/* Свёрнутый поиск: форма уходит, остаётся кнопка. Раскрытая форма встаёт
   отдельной строкой под логотипом, а не жмётся к нему. */
/* Имя класса повторяется дважды: правило .search-form ниже по файлу и
   с той же силой возвращало форме display:flex. */
.site-header__search.site-header__search--folded{display:none}
.site-header__search.site-header__search--open{order:2;width:100%;flex:1 1 100%;margin-left:0}
.site-header__find{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;
 margin-left:auto;flex:0 0 auto;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);
 color:var(--header-fg);border-radius:var(--radius-sm);cursor:pointer;padding:0}
.site-header__find:hover{background:rgba(255,255,255,.16)}
.site-header__find[hidden]{display:none}
.site-header__find-icon{width:1.15rem;height:1.15rem}
/* Кнопка поиска стоит слева от кнопки темы, поэтому отступ забирает она. */
.site-header__find+.site-header__theme{margin-left:0}
.site-header__theme{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;
 flex:0 0 auto;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);
 color:var(--header-fg);border-radius:var(--radius-sm);cursor:pointer;padding:0}
.site-header__theme:hover{background:rgba(255,255,255,.16)}
.site-header__theme-icon{width:1.1rem;height:1.1rem}
.site-header__theme--light .site-header__theme-icon{transform:rotate(180deg)}
.site-header__theme--dark{background:var(--brass);border-color:var(--brass);color:#1a1408}
.site-header .search-form__input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:var(--header-fg)}
.site-header .search-form__input::placeholder{color:var(--header-muted)}
.site-header .search-form__input:focus{background:rgba(255,255,255,.14)}
@media (min-width:48rem){
 .site-header__nav{order:0;width:auto;overflow:visible}
 .site-header__search{flex-basis:15rem}
 /* На широком экране поиск помещается в строку целиком, сворачивать его
    незачем: кнопка прячется, форма возвращается на место. */
 .site-header__find{display:none}
 .site-header__search.site-header__search--folded{display:flex}
 .site-header__search.site-header__search--open{order:0;width:auto;flex:0 1 15rem;margin-left:auto}
}
/* Живой поиск: список подсказок висит под строкой и не двигает вёрстку. */
.suggest{position:relative}
.suggest__list{position:absolute;top:calc(100% + .35rem);left:0;right:0;z-index:30;margin:0;padding:.25rem;
 list-style:none;max-height:19rem;overflow-y:auto;background:var(--surface);color:var(--fg);
 border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow)}
.suggest__list[hidden]{display:none}
.suggest__item{margin:0}
.suggest__link{display:block;padding:.42rem .55rem;border-radius:.45rem;text-decoration:none;color:var(--fg)}
.suggest__link:hover,.suggest__item--current .suggest__link{background:var(--accent-soft);color:var(--accent-strong)}
.suggest__region{display:block;font-size:.78rem;color:var(--muted)}
.suggest__empty{padding:.5rem .55rem;color:var(--muted);font-size:.88rem}

.search-form{display:flex;flex-wrap:wrap;gap:.45rem;margin:0}
.search-form__input{flex:1 1 9rem;min-width:0;border:1px solid var(--line-strong);background:var(--surface);
 color:var(--fg);border-radius:var(--radius-sm);padding:.55rem .8rem;font:inherit;font-size:.95rem}
.search-form__note{color:var(--muted);font-size:.88rem;margin:.6rem 0 0}
/* Крошки. На телефоне они стоят между шапкой и заголовком, поэтому кегль
   и отступы там меньше: каждая их строка отодвигает расписание за сгиб. */
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;font-size:.8rem;color:var(--muted);
 padding-top:.6rem;margin:0}
.breadcrumbs__link{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:28px}
.breadcrumbs__link:hover{color:var(--accent);text-decoration:underline}
.breadcrumbs__separator{opacity:.4}
@media (min-width:48rem){
 .breadcrumbs{font-size:.85rem;gap:.35rem;padding-top:1rem}
 .breadcrumbs__link{min-height:32px}
}

.content{flex:1 0 auto;padding-top:.9rem;padding-bottom:3rem}
/* Заголовок страницы */
.page-head{margin:.5rem 0 .9rem}
.page-head__title{font-size:clamp(1.6rem,4.4vw,2.35rem);margin:0 0 .3rem;overflow-wrap:break-word}
/* Дата и хиджра идут одной строкой: на узком экране две отдельные строки
   стоили сорока пикселей первого экрана. */
.page-head__dates{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .7rem;color:var(--muted);
 font-size:.88rem;margin:0}
@media (min-width:48rem){
 .page-head{margin:.9rem 0 1.4rem}
 .page-head__title{margin-bottom:.45rem}
 .page-head__dates{font-size:.95rem;gap:.2rem .8rem}
}
.page-head__hijri{color:var(--muted)}
.page-head__hijri::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
 background:var(--brass);vertical-align:.22em;margin-right:.75rem}
.page-head__note{color:var(--muted);font-size:1rem;margin:.4rem 0 0}
/* Двухколоночный макет: на узком экране одна колонка, порядок разметки. */
/* minmax(0,1fr) обязателен: колонка grid по умолчанию auto, и длинная
   строка кода внутри растягивала весь макет за край экрана. */
.layout{display:grid;gap:1.4rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:60rem){
 .layout{grid-template-columns:minmax(0,1fr) 20rem;align-items:start;gap:1.6rem}
 .layout__aside{position:sticky;top:1.25rem;display:grid;gap:1.1rem}
 /* Страница города идёт одной колонкой: боковая была тесной для карты
    Киблы и переключателей, а сами они нужны сразу под расписанием. */
 .layout--single{grid-template-columns:minmax(0,1fr)}
}
/* Карточки */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
 padding:1.4rem 1.45rem;box-shadow:var(--shadow-sm)}
/* Две карточки подряд (напоминания и Кибла на странице города) стояли
   вплотную и читались одним полотном. В сетке с gap отступ не нужен:
   там расстояние уже задано, и второй сложился бы с первым. */
.card+.card{margin-top:1.2rem}
.layout__aside .card+.card{margin-top:0}
/* На узком экране поля карточки съедают ширину строки, поэтому там они
   меньше: содержимое важнее воздуха по краям. */
@media (max-width:27rem){.card{padding:1.15rem 1.05rem}}
.card--accent{border-color:var(--accent-line);box-shadow:var(--shadow)}
.card__title{font-size:1.02rem;margin:0 0 1rem;padding-bottom:.65rem;border-bottom:1px solid var(--line);
 letter-spacing:-.01em}
.card__note{color:var(--muted);font-size:.89rem;margin:.95rem 0 0}
.card__note:last-child{margin-bottom:0}
/* Плашка праздника или предупреждения */
.notice{background:var(--accent-soft);border:1px solid var(--accent-line);border-left-width:3px;
 border-radius:var(--radius-sm);padding:.85rem 1rem;margin:0 0 1.1rem}
.notice--warn{background:var(--warn-soft);border-color:var(--warn)}
.notice__title{font-weight:700;letter-spacing:-.01em}
.notice__note{display:block;color:var(--muted);font-size:.89rem;margin-top:.15rem}
/* Ближайший намаз: главный элемент первого экрана */
.next-prayer{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--panel-from),var(--panel-to));
 color:var(--panel-fg);border:1px solid var(--panel-line);border-radius:var(--radius);
 padding:1.25rem 1.35rem 1.4rem;margin:0 0 1.1rem;box-shadow:var(--shadow)}
.next-prayer::after{content:"";position:absolute;width:22rem;height:22rem;border-radius:50%;right:-9rem;top:-11rem;
 background:radial-gradient(circle,rgba(255,255,255,.09),transparent 62%);pointer-events:none}
.next-prayer__caption{margin:0;font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;opacity:.72}
/* Нижняя граница кегля считается по восьми знакам: сразу после иша
   до фаджра остаётся больше десяти часов, и «12:34:56» шире, чем
   «1:45:14», ради которого кегль подбирали. */
.next-prayer__timer{color:var(--panel-accent);margin:.25rem 0 0;font-size:clamp(2rem,9vw,3.25rem);
 font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.next-prayer__timer--message{font-size:clamp(1.35rem,4vw,1.7rem);letter-spacing:-.02em;line-height:1.15}
.next-prayer__target{margin:.3rem 0 0;opacity:.85;font-size:1rem}
/* Выбор мазхаба: тумблер прямо в блоке ближайшего намаза. Аср расходится
   между мазхабами почти на час, и это первое, что человек проверяет
   глазами. Спрятанный в «настройки» выбор никто не находит. */
.madhab-switch{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:0 0 1rem;
 font-size:.88rem;color:var(--panel-fg)}
/* display:flex сильнее встроенного правила для [hidden], поэтому явно. */
.madhab-switch[hidden]{display:none}
.madhab-switch__name{opacity:.62;transition:opacity .15s}
.madhab-switch__track{display:block;flex:0 0 auto;width:2.9rem;height:1.6rem;padding:0;border-radius:1rem;
 cursor:pointer;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.3);position:relative}
.madhab-switch__track::after{content:"";position:absolute;top:.18rem;left:.2rem;width:1.1rem;height:1.1rem;
 border-radius:50%;background:var(--panel-fg);transition:transform .16s ease}
.madhab-switch__track[aria-checked="true"]::after{transform:translateX(1.25rem)}
.madhab-switch__track:focus-visible{outline:2px solid var(--panel-fg);outline-offset:2px}
/* Выбранная сторона написана ярче: по одному положению кружка не понять,
   какой мазхаб включён, а ошибка здесь стоит часа разницы в асре. */
.madhab-switch:has(.madhab-switch__track[aria-checked="false"]) .madhab-switch__name--hanafi,
.madhab-switch:has(.madhab-switch__track[aria-checked="true"]) .madhab-switch__name--shafii{opacity:1;font-weight:600}

/* Времена намазов внутри блока: ответ на вопрос без прокрутки до таблицы. */
.next-prayer__times{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;
 list-style:none;margin:1.1rem 0 0;padding:0}
.next-prayer__time{padding:.45rem .3rem;border-radius:calc(var(--radius) / 1.6);text-align:center;
 background:color-mix(in srgb,var(--panel-accent) 9%,transparent)}
.next-prayer__time-name{display:block;font-size:.7rem;font-weight:600;text-transform:uppercase;
 letter-spacing:.06em;opacity:.7}
.next-prayer__time-value{display:block;margin-top:.15rem;font-size:1.05rem;font-weight:700;
 font-variant-numeric:tabular-nums;color:var(--panel-accent)}
.next-prayer__time--next{background:color-mix(in srgb,var(--panel-accent) 20%,transparent);
 box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--panel-accent) 45%,transparent)}
.next-prayer__time--passed{opacity:.5}
@media (min-width:40rem){.next-prayer__times{grid-template-columns:repeat(6,1fr)}}
/* Шкала дня: засечки намазов и метка текущего момента. */
.next-prayer__scale{position:relative;margin:1.35rem 0 0;height:3.4rem}
.next-prayer__track{position:absolute;left:0;right:0;top:.55rem;height:.3rem;border-radius:1rem;
 background:color-mix(in srgb,var(--panel-accent) 22%,transparent)}
.next-prayer__progress{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:1rem;background:var(--panel-accent);opacity:.9}
.next-prayer__mark{position:absolute;top:0;transform:translateX(-50%);font-size:.72rem;font-weight:500;opacity:.88}
.next-prayer__mark-dot{display:block;width:.45rem;height:.45rem;margin:.48rem auto .32rem;border-radius:50%;background:var(--panel-accent)}
.next-prayer__mark-label{display:block;white-space:nowrap;text-align:center}
.next-prayer__mark--lower .next-prayer__mark-label{margin-top:.95rem}
.next-prayer__mark--first{transform:none}
.next-prayer__mark--first .next-prayer__mark-dot{margin-left:0;margin-right:auto}
.next-prayer__mark--first .next-prayer__mark-label{text-align:left}
.next-prayer__mark--last{left:auto!important;right:0;transform:none}
.next-prayer__mark--last .next-prayer__mark-dot{margin-left:auto;margin-right:0}
.next-prayer__mark--last .next-prayer__mark-label{text-align:right}
.next-prayer__mark--passed{opacity:.45}
.next-prayer__now{position:absolute;top:.1rem;width:2px;height:1.2rem;background:var(--panel-accent);
 transform:translateX(-50%);border-radius:2px;box-shadow:0 0 0 3px var(--panel-to)}
@media (max-width:30rem){.next-prayer__mark{font-size:.63rem}}
/* Сегодня или завтра: расписание на завтра уже в странице */
.day-switch{display:inline-flex;gap:.25rem;margin:1.2rem 0 .9rem;padding:.25rem;
 background:var(--surface-sunken);border:1px solid var(--line);border-radius:2rem}
.day-switch__option{border:0;background:none;font:inherit;font-size:.92rem;font-weight:500;
 color:var(--muted);padding:.4rem 1.05rem;border-radius:2rem;cursor:pointer}
.day-switch__option:hover{color:var(--accent)}
.day-switch__option--current{background:var(--surface);color:var(--fg);box-shadow:var(--shadow-sm)}
/* Расписание дня */
.schedule{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);
 border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.schedule__row{border-top:1px solid var(--line)}
.schedule__row:first-child{border-top:0}
.schedule__name{text-align:left;font-weight:600;padding:.8rem 1rem;position:relative}
.schedule__cell{display:flex;align-items:center;gap:.7rem}
.schedule__icon{width:1.35rem;height:1.35rem;flex:0 0 auto;color:var(--muted);opacity:.85}
.schedule__time{text-align:right;padding:.8rem 1rem;font-variant-numeric:tabular-nums;font-size:1.3rem;
 font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.schedule__local{display:block;color:var(--muted);font-size:.82rem;font-weight:400}
.schedule__hint{color:var(--muted);font-weight:400;font-size:.85rem}
.schedule__link{color:inherit;text-decoration:none}
.schedule__link:hover{color:var(--accent);text-decoration:underline}
/* Строка обязательного намаза ведёт к его разбору ниже. Стрелка нужна,
   чтобы это было видно до нажатия: без неё по строке просто тыкали. */
.schedule__row--linked{cursor:pointer}
.schedule__row--linked:hover{background:var(--surface-sunken)}
.schedule__more{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;
 margin-left:.45rem;vertical-align:.02em;color:var(--muted);opacity:.65}
.schedule__more svg{width:100%;height:100%}
.schedule__row--secondary{background:var(--surface-sunken)}
.schedule__row--secondary .schedule__name,.schedule__row--secondary .schedule__time{color:var(--muted);font-weight:500}
.schedule__row--secondary .schedule__time{font-size:1.02rem}
.schedule__row--secondary .schedule__icon{opacity:.6}
.schedule__row--next{background:var(--accent-soft)}
.schedule__row--next .schedule__name::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.schedule__row--next .schedule__time,.schedule__row--next .schedule__icon{color:var(--accent)}
.schedule__source{color:var(--muted);font-size:.87rem;margin:.75rem 0 1.2rem}
/* Вкладки разделов */
.section-nav{display:flex;gap:.45rem;flex-wrap:wrap;margin:1.3rem 0}
.section-nav__link{padding:.45rem .95rem;border:1px solid var(--line-strong);background:var(--surface);
 border-radius:2rem;text-decoration:none;font-size:.93rem;font-weight:500;color:var(--fg);box-shadow:var(--shadow-sm)}
.section-nav__link:hover{border-color:var(--accent);color:var(--accent)}
.section-nav__link--current{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.section-nav__link--current:hover{color:var(--accent-fg)}
/* Кнопки */
.actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.4rem}
.button{display:inline-block;border:1px solid var(--line-strong);background:var(--surface);color:var(--fg);
 border-radius:var(--radius-sm);padding:.6rem 1.05rem;font:inherit;font-size:.95rem;font-weight:500;
 cursor:pointer;text-decoration:none;box-shadow:var(--shadow-sm)}
.button:hover{border-color:var(--accent);color:var(--accent)}
.button--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.button--primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--accent-fg)}
.button--file{border-color:var(--accent-line);color:var(--accent)}
.button--locate{border-color:var(--accent-line);color:var(--accent)}
.button--locate:disabled{opacity:.6;cursor:default}
.actions--locate{align-items:center;margin:.9rem 0 0}
/* На странице города счётчик свёрнут: расписание важнее, и кнопка в восемь
   строк высотой не должна вставать между текстом и вопросами. */
.tasbih--collapsed{text-align:left;margin-top:2rem}
.tasbih__summary{font-weight:600;cursor:pointer}
.tasbih__summary::marker{color:var(--accent)}
.tasbih__body{margin-top:1rem;text-align:center}
.tasbih--collapsed .tasbih__button{min-height:5rem}

/* Приглашение определить город: первый экран главной, поэтому стили
   встроенные. Показывается скриптом при первом заходе и заменяется
   ссылкой на свой город у вернувшихся. */
.locate{border-color:var(--accent-line);background:var(--accent-soft)}
.locate__title{margin:0 0 .35rem;font-weight:700;font-size:1.1rem;letter-spacing:-.01em}
.locate__note{margin:0;color:var(--muted);font-size:.9rem}
.locate .actions{margin:.8rem 0 0}
/* display:flex у .actions сильнее встроенного правила для [hidden]. */
.actions[hidden]{display:none}


/* Дуа: арабский текст, запись русскими буквами, перевод. Порядок строк
   и есть иерархия: арабский это сам текст, остальное подсказки. */
.dua{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
 padding:1.1rem 1.2rem;margin:0 0 1rem;box-shadow:var(--shadow-sm)}
.dua__arabic{margin:0 0 .8rem;font-size:1.6rem;line-height:2.1;text-align:right;
 font-family:"Segoe UI","Noto Naskh Arabic","Traditional Arabic",serif}
.dua__translit{margin:0 0 .5rem;font-size:1.02rem;color:var(--accent-strong);font-weight:500}
.dua__translation{margin:0 0 .5rem;color:var(--fg)}
.dua__source{margin:0;font-size:.84rem;color:var(--muted)}
.dua-page .entry-list__flag{margin-left:.4rem}

/* --- Конец критических стилей ---------------------------------------------
   Всё выше встраивается в разметку и держит первый экран: шрифт, токены,
   шапка, крошки, блок ближайшего намаза и таблица дня. Всё ниже уезжает
   отдельным файлом с годовым кешем, поэтому вторая и следующие страницы
   не тянут стили заново. Порядок разделов здесь и есть граница: правка
   выше маркера попадает в разметку каждой страницы, ниже в файл.
   -------------------------------------------------------------------------- */
/* Статья обучающего раздела: текст читают подряд, а не сканируют. */
.prose--article{color:var(--fg)}
.prose--article p{color:var(--fg)}
.prose--article h2{font-size:1.2rem;margin-top:2rem}
.prose--article ul,.prose--article ol{padding-left:1.3rem;margin:0 0 1rem}
.prose--article li{margin-bottom:.4rem}
/* Коран: список сур и текст суры */
.surah-list{list-style:none;padding:0;margin:0 0 2rem;display:grid;gap:.3rem;
 grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr))}
.surah-list__link{display:flex;align-items:center;gap:.85rem;padding:.7rem .9rem;text-decoration:none;
 background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
 color:var(--fg);box-shadow:var(--shadow-sm)}
.surah-list__link:hover{border-color:var(--accent)}
.surah-list__number{flex:0 0 2rem;text-align:center;font-weight:700;color:var(--muted);
 font-variant-numeric:tabular-nums}
.surah-list__name{flex:1 1 auto;font-weight:600;letter-spacing:-.01em;min-width:0}
.surah-list__title{display:block;font-weight:400;font-size:.85rem;color:var(--muted)}
.surah-list__meta{flex:0 0 auto;text-align:right}
.surah-list__arabic{display:block;font-size:1.05rem}
.surah-list__count{display:block;font-size:.78rem;color:var(--muted);white-space:nowrap}

.verse-list{list-style:none;padding:0;margin:0 0 2rem;display:grid;gap:.2rem}
.verse-list__item{position:relative;padding:1.1rem 3.2rem 1.1rem 1.2rem;background:var(--surface);
 border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}
.verse-list__arabic{margin:0 0 .7rem;font-size:1.5rem;line-height:2;text-align:right}
.verse-list__translation{margin:0;color:var(--fg)}
.verse-list__number{position:absolute;top:1.15rem;right:1rem;font-size:.78rem;color:var(--muted);
 text-decoration:none;font-variant-numeric:tabular-nums}
.verse-list__number:hover{color:var(--accent)}
/* Рецитация: кнопка у аята и общий проигрыватель над списком. */
.verse-list__listen{position:absolute;top:2.6rem;right:1rem;display:inline-flex;align-items:center;
 justify-content:center;width:1.9rem;height:1.9rem;padding:0;border:1px solid var(--line);
 border-radius:50%;background:var(--surface);color:var(--accent);cursor:pointer}
.verse-list__listen:hover{background:var(--accent-soft)}
.verse-list__item--playing{box-shadow:inset 0 0 0 2px var(--accent-line)}
.recitation{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:0 0 1.2rem}
.recitation__note{margin:0;color:var(--muted);font-size:.85rem}
/* На узком экране номер аята некуда положить сбоку: он налезал на
   арабскую строку, которая идёт справа налево. */
@media (max-width:34rem){
 .verse-list__item{padding:1rem}
 .verse-list__number{position:static;display:block;margin-bottom:.5rem;text-align:right}
}
.settings--inline{max-width:18rem;margin:0 0 1.4rem}
/* Календарь на месяц, год и Рамадан */
.calendar__scroll{overflow-x:auto;background:var(--surface);border:1px solid var(--line);
 border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.calendar{width:100%;border-collapse:collapse;min-width:34rem}
.calendar--narrow{min-width:0}
.calendar__head{text-align:center;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;
 color:var(--muted);font-weight:600;padding:.75rem .45rem;white-space:nowrap;position:sticky;top:0;
 background:var(--surface);border-bottom:1px solid var(--line-strong)}
.calendar__head--first{text-align:left;padding-left:1rem}
.calendar__row{border-top:1px solid var(--line)}
.calendar__row--friday{background:var(--surface-sunken)}
.calendar__row--today{background:var(--accent-soft);font-weight:700}
.calendar__row--upcoming{background:var(--accent-soft)}
.calendar__day{text-align:left;padding:.5rem .45rem .5rem 1rem;font-weight:600;white-space:nowrap}
.calendar__weekday{color:var(--muted);font-weight:400;font-size:.8rem;margin-left:.35rem}
.calendar__hijri{text-align:center;color:var(--muted);font-size:.86rem;padding:.5rem .45rem;white-space:nowrap}
.calendar__time{text-align:center;padding:.5rem .45rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.calendar__time--muted{color:var(--muted);font-size:.86rem;font-variant-numeric:normal}
.calendar__note{color:var(--muted);font-size:.88rem;margin:.85rem 0 1.2rem}
/* Переход по месяцам и годам */
.period-nav{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:0 0 1rem;
 flex-wrap:wrap}
.period-nav__step{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .9rem;
 border:1px solid var(--line-strong);border-radius:2rem;background:var(--surface);color:var(--fg);
 text-decoration:none;font-size:.92rem;font-weight:500;box-shadow:var(--shadow-sm);white-space:nowrap}
.period-nav__step:hover{border-color:var(--accent);color:var(--accent)}
.period-nav__step--empty{border:0;box-shadow:none;background:none;padding:0}
.period-nav__current{font-weight:700;letter-spacing:-.01em;font-size:1.02rem}
.period-nav--years{justify-content:flex-start;gap:.45rem}
.period-nav__year{padding:.4rem .85rem;border:1px solid var(--line-strong);border-radius:2rem;
 background:var(--surface);color:var(--fg);text-decoration:none;font-size:.92rem;font-weight:500;
 font-variant-numeric:tabular-nums;box-shadow:var(--shadow-sm)}
.period-nav__year:hover{border-color:var(--accent);color:var(--accent)}
.period-nav__year--current{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.period-list{list-style:none;padding:0;margin:0 0 1.4rem;display:flex;flex-wrap:wrap;gap:.4rem}
.period-list__link{display:inline-block;padding:.3rem .7rem;border-radius:var(--radius-sm);
 font-size:.86rem;color:var(--muted);text-decoration:none;background:var(--surface-sunken)}
.period-list__link:hover{color:var(--accent)}
.period-list__link--current{background:var(--accent-soft);color:var(--accent);font-weight:600}
/* Переключатели метода и мазхаба */
.settings{display:grid;gap:.85rem}
/* Свёрнутый блок: в строке видно, что показано сейчас, и открывать её ради
   проверки не нужно. Поля не тянутся во всю ширину экрана: селект длиной
   в тысячу пикселей выглядит ошибкой вёрстки, а не выбором. */
.settings__fold{display:grid;gap:.85rem}
.settings__fold[open] .settings__summary{margin-bottom:.1rem}
.settings__summary{cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem}
/* Строка выглядела подписью под расписанием, и никто не догадывался, что
   её можно раскрыть: display:flex убирает у summary штатный треугольник.
   Слово вместо значка, потому что человеку нужно знать не «тут что-то
   раскрывается», а что метод расчёта можно сменить. */
.settings__fold > .settings__summary::after{content:"Изменить";margin-left:auto;flex:0 0 auto;
 color:var(--accent);font-size:.88rem;font-weight:600;border-bottom:1px dashed currentColor}
.settings__fold[open] > .settings__summary::after{content:"Свернуть"}
.settings__summary-title{font-weight:700;font-size:1.06rem;letter-spacing:-.01em}
.settings__summary-current{color:var(--muted);font-size:.9rem}
.settings__summary-current::before{content:"· ";color:var(--line-strong)}
.settings__field{display:grid;gap:.3rem;max-width:22rem}
.settings__label{font-size:.82rem;color:var(--muted);font-weight:500}
.settings__control{border:1px solid var(--line-strong);background:var(--bg);color:var(--fg);
 border-radius:var(--radius-sm);padding:.55rem .65rem;font:inherit;font-size:.95rem;width:100%}
.settings__note{margin:0;font-size:.82rem;color:var(--muted)}
/* Напоминания: кнопки не липнут к селекту, а пояснение под ними не липнет
   к кнопкам. Блок собран из общих элементов, поэтому отступы задаются
   здесь, а не переопределением .actions на всём сайте. */
.reminders .settings__field{margin-bottom:1rem}
.reminders .actions{margin-bottom:1rem}
/* Своя поправка: раскрывается по нажатию, свёрнутая не мешает главному. */
.settings__extra{margin:.2rem 0 .6rem;border-top:1px solid var(--line);padding-top:.7rem}
/* display:list-item возвращает штатный треугольник: без него строка
   выглядит заголовком, а не тем, что раскрывается. */
.settings__extra .settings__summary{font-weight:600;font-size:.92rem;color:var(--accent);
 display:list-item;margin-left:1.1rem}
.settings__extra .settings__summary::marker{color:var(--accent)}
.offsets{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin:.7rem 0;max-width:26rem}
.offsets__field{display:grid;gap:.2rem}
.offsets__name{font-size:.8rem;color:var(--muted)}
.offsets__control{border:1px solid var(--line-strong);background:var(--bg);color:var(--fg);
 border-radius:var(--radius-sm);padding:.4rem .5rem;font:inherit;font-size:.95rem;width:100%}
@media (min-width:40rem){.offsets{grid-template-columns:repeat(3,1fr)}}
/* Выбор города на странице виджета: тот же элемент, что и переключатели. */
.widget-picker{max-width:22rem;margin:0 0 1rem}
/* Форма обратной связи */
.contact-form{display:grid;gap:1rem;max-width:34rem}
.contact-form__message{min-height:9rem;resize:vertical;font:inherit;line-height:1.5}
.contact-form__consent{display:grid;grid-template-columns:auto 1fr;gap:.55rem;align-items:start;
 font-size:.92rem;color:var(--muted)}
/* Ловушка для роботов: человек её не видит, но и экранный диктор не читает. */
.contact-form__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice--warning{border-color:var(--warn);background:var(--warn-soft)}
/* Разделы по отдельным намазам */
.prayer-notes{display:grid;gap:.9rem;margin:2rem 0 0}
.prayer-notes__item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
 padding:1.05rem 1.25rem;display:grid;grid-template-columns:1fr auto;gap:.25rem 1rem;align-items:baseline;
 box-shadow:var(--shadow-sm)}
.prayer-notes__heading{font-size:1.05rem;margin:0;grid-column:1}
.prayer-notes__time{grid-column:2;grid-row:1;margin:0;font-size:1.45rem;font-weight:700;letter-spacing:-.02em;
 font-variant-numeric:tabular-nums;color:var(--accent);white-space:nowrap}
.prayer-notes__text{grid-column:1/-1;color:var(--muted);font-size:.95rem;margin-top:.35rem}
/* Переход из таблицы: раздел подсвечивается, иначе после прыжка непонятно,
   куда именно попал экран. */
.prayer-notes__item:target{border-color:var(--accent);box-shadow:var(--shadow)}
.prayer-notes__text :last-child{margin-bottom:0}
/* Кибла */
/* Карточка, идущая следом за другой: без отступа они слипаются в одну. */
.card--spaced{margin-top:1.2rem}
.qibla__body{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}
/* Компас устройства: круг по центру, текст под ним. Слева он выглядел
   случайно приткнутым, а на широком экране рядом оставалась пустота. */
.qibla__body--centered{flex-direction:column;text-align:center}
.qibla__body--centered .compass{margin:0 auto}
.qibla__body--centered p{margin-left:auto;margin-right:auto;max-width:34rem}
.qibla__angle{margin:0 0 .9rem;font-size:1rem;color:var(--muted)}
/* Компас и карта в одном блоке: на телефоне друг под другом, на широком
   экране рядом. Карта тянется, компас держит свою ширину. */
.qibla__pair{display:grid;gap:1.2rem;align-items:start}
.qibla__compass{text-align:center}
.qibla__compass .actions{margin:.7rem 0 0;justify-content:center}
.qibla__map-slot{min-width:0}
@media (min-width:60rem){.qibla__pair{grid-template-columns:15rem minmax(0,1fr);gap:1.6rem}}
.qibla__value{font-size:1.85rem;font-weight:700;letter-spacing:-.02em;color:var(--fg);font-variant-numeric:tabular-nums}
.qibla__note{color:var(--muted);font-size:.89rem;margin:.5rem 0 0}
.compass{width:118px;height:118px;flex:0 0 auto}
.compass--large{width:212px;height:212px}
.compass--large .compass__label{font-size:16px}
.compass__ring{fill:none;stroke:var(--line-strong);stroke-width:2}
.compass__label{fill:var(--muted);font-size:11px;text-anchor:middle}
.compass__needle{stroke:var(--accent);stroke-width:3}
.compass__arrow{fill:var(--accent)}
/* Уведомление о файлах cookie: одна полоса внизу, без перекрытия таблицы.
   На телефоне она стояла поверх блока ближайшего намаза и закрывала сам
   счётчик, поэтому кегль мелкий, поля узкие, а высоту полосы скрипт
   отдаёт странице через --cookie-height (правило для body ниже). */
.cookie-notice{position:fixed;left:.5rem;right:.5rem;bottom:.5rem;z-index:20;
 display:flex;flex-wrap:nowrap;gap:.6rem;align-items:center;justify-content:space-between;
 padding:.45rem .6rem;border:1px solid var(--line);border-radius:var(--radius);
 background:var(--surface);box-shadow:var(--shadow)}
/* display:flex сильнее встроенного правила для [hidden], поэтому прячем явно. */
.cookie-notice[hidden]{display:none}
.cookie-notice__text{margin:0;flex:1 1 auto;min-width:0;font-size:.76rem;line-height:1.3;color:var(--muted)}
.cookie-notice__text p{margin:0}
.cookie-notice__actions{display:flex;flex:0 0 auto;align-items:center;gap:.2rem}
.cookie-notice__accept{flex:0 0 auto;padding:.35rem .6rem;font-size:.8rem}
/* Крестик: отказ от показа. Площадь нажатия не меньше сорока пикселей,
   иначе по нему промахиваются пальцем. */
.cookie-notice__later{display:inline-flex;align-items:center;justify-content:center;
 width:2.5rem;height:2.5rem;flex:0 0 auto;border:0;background:none;color:var(--muted);
 font-size:1.3rem;line-height:1;cursor:pointer;border-radius:var(--radius-sm)}
.cookie-notice__later:hover{background:var(--surface-sunken);color:var(--fg)}
@media (min-width:48rem){
 .cookie-notice{left:.75rem;right:.75rem;bottom:.75rem;padding:.6rem .75rem;gap:.75rem}
 .cookie-notice__text{font-size:.84rem;line-height:1.4}
}
@media (min-width:60rem){.cookie-notice{left:auto;right:1.25rem;max-width:32rem}}
/* Карта Киблы: свои тайлы, без библиотеки карт. */
/* Тайловая карта: общий слой карты Киблы и карты мечетей. */
.tile-map{position:relative}
.tile-map__canvas{position:relative;overflow:hidden;border-radius:var(--radius);
 border:1px solid var(--line);background:var(--surface-sunken);cursor:grab;touch-action:none}
.tile-map__canvas--dragging{cursor:grabbing}
.tile-map__layer{position:absolute;inset:0}
.tile-map__tile{position:absolute;width:256px;height:256px;user-select:none;-webkit-user-drag:none}
.tile-map__overlay{position:absolute;inset:0;pointer-events:none}
.tile-map__controls{position:absolute;top:.75rem;left:.75rem;z-index:2;display:flex;flex-direction:column;gap:.35rem}
/* display:flex сильнее встроенного правила для [hidden]: до открытия карты
   кнопки масштаба показывались поверх пустого полотна. */
.tile-map__controls[hidden]{display:none}
.tile-map__zoom{width:2rem;height:2rem;border-radius:.5rem;border:1px solid var(--line);
 background:var(--surface);color:var(--fg);font:inherit;font-size:1.05rem;line-height:1;cursor:pointer}
.tile-map__zoom:hover{background:var(--surface-sunken)}
.tile-map__failed{display:none;margin:0;padding:.7rem .9rem;background:var(--warn-soft);color:var(--warn);
 border-radius:var(--radius-sm);font-size:.9rem}
.tile-map[data-tiles-failed="1"] .tile-map__failed{display:block}
.tile-map[data-tiles-failed="1"] .tile-map__canvas{background:var(--surface-sunken)}
.qibla-map{margin:1.2rem 0 0}
.qibla-map__canvas{height:16rem}
.qibla-map__placeholder{position:absolute;inset:0;display:flex;flex-direction:column;gap:.5rem;
 align-items:center;justify-content:center;margin:0;padding:1rem;text-align:center}
.qibla-map__hint{color:var(--muted);font-size:.85rem}
.qibla-map__compass{width:8rem;height:8rem;flex:0 0 auto;margin-bottom:.15rem}
.qibla-map__line{stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* Конец пути: на масштабе материка человек должен видеть, что линия
   приходит именно на Каабу, а не просто уходит за край. */
.qibla-map__kaaba{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.qibla-map__kaaba-label{fill:var(--fg);font-size:12px;font-weight:700;text-anchor:middle;
 paint-order:stroke;stroke:var(--surface);stroke-width:3}
.qibla-map__arrow{fill:var(--accent)}
.qibla-map__rose{fill:none;stroke:var(--line-strong);stroke-width:2}
.qibla-map__rose-fill{fill:var(--surface);opacity:.85}
.qibla-map__rose-label{fill:var(--fg);font-size:11px;font-weight:700;text-anchor:middle}
.qibla-map__legend{margin:.75rem 0 0;color:var(--muted);font-size:.87rem}
@media (min-width:60rem){.qibla-map__canvas{height:19rem}}
/* Карта мечетей: точки те же, что строки списка выше. Метка молельной
   комнаты полая: в комнату заходят в перерыв, в мечеть идут на джума-намаз. */
.mosques-map{margin:1rem 0 1.2rem}
.mosques-map__canvas{height:18rem}
/* Кнопка стоит посреди полотна: пустую плашку с кнопкой в углу
   пролистывали, не нажимая. */
.mosques-map__placeholder{position:absolute;inset:0;display:flex;flex-direction:column;gap:.5rem;
 align-items:center;justify-content:center;margin:0;padding:1rem;text-align:center}
.mosques-map__hint{color:var(--muted);font-size:.85rem}
.mosques-map__point{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.mosques-map__point--room{fill:var(--surface);stroke:var(--accent);stroke-width:3}
.mosques-map__center{fill:var(--fg);stroke:var(--surface);stroke-width:2}
@media (min-width:60rem){.mosques-map__canvas{height:22rem}}
/* Мечети города. Данные из OpenStreetMap, поэтому у части записей нет ни
   имени, ни адреса: строка собирается из того, что есть, и не разъезжается
   от пустых полей. */
.mosques{margin:2rem 0 0}
.mosques__list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.mosques__item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
 padding:.8rem .95rem;box-shadow:var(--shadow-sm)}
.mosques__item--room{background:var(--surface-sunken)}
.mosques__name{margin:0;font-weight:600;letter-spacing:-.01em}
.mosques__link{color:var(--fg);text-decoration:none}
.mosques__link:hover{color:var(--accent);text-decoration:underline}
.mosques__kind{margin-left:.4rem;font-size:.8rem;font-weight:400;color:var(--muted)}
.mosques__address{margin:.15rem 0 0;color:var(--muted);font-size:.92rem}
.mosques__meta{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin:.35rem 0 0;font-size:.9rem}
.mosques__meta:empty{display:none}
.mosques__hours{color:var(--muted)}
.mosques__note{margin:.8rem 0 0;color:var(--muted);font-size:.89rem}
.mosques__actions{margin:.9rem 0 0}
.mosques__more[disabled]{opacity:.6;cursor:default}
.mosques__credit{margin:.5rem 0 0;color:var(--muted);font-size:.82rem}
/* Частые вопросы */
.faq{margin-top:2rem}
.faq__item{border-bottom:1px solid var(--line)}
.faq__question{cursor:pointer;font-weight:600;padding:.85rem 0;list-style:none;display:flex;
 justify-content:space-between;gap:1rem;align-items:baseline;letter-spacing:-.01em}
.faq__question::-webkit-details-marker{display:none}
.faq__question::after{content:"+";color:var(--accent);font-weight:700;flex:0 0 auto;font-size:1.1rem;line-height:1}
.faq__item[open] .faq__question::after{content:"–"}
.faq__answer{color:var(--muted);padding:0 0 1rem}
.faq__answer :last-child{margin-bottom:0}
/* Списки городов и регионов */
.place-list{list-style:none;padding:0;margin:0 0 1.2rem;
 display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,12.5rem),1fr));gap:.15rem 1rem}
.place-list__item{padding:.42rem 0;border-bottom:1px solid var(--line)}
.place-list a,.region-list a{text-decoration:none}
.place-list a:hover,.region-list a:hover{text-decoration:underline}
/* Плитки: список крупных городов на главной и городов региона на странице
   города. Голые ссылки в три колонки выглядят черновиком, плитка даёт им
   вес и площадь для пальца.
   Плитки в ряду одной высоты: «Набережные Челны» занимают две строки, и
   без растягивания соседи висели в воздухе, а ряд выглядел рваным.
   Теней нет намеренно: их в списке шесть десятков, и страница начинает
   рябить. Плитку отделяет от полотна рамка, а не подъём над листом. */
.place-list--tiles{gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr))}
.place-list--tiles .place-list__item{padding:0;border-bottom:0;display:flex}
.place-list__link{display:flex;align-items:center;width:100%;min-height:2.9rem;
 background:var(--surface);border:1px solid var(--line);
 border-radius:var(--radius-sm);padding:.55rem .8rem;font-weight:500;font-size:.95rem;
 line-height:1.25;color:var(--fg)}
.place-list__link:hover{border-color:var(--accent-line);background:var(--accent-soft);
 color:var(--accent);text-decoration:none}
.place-list__note{color:var(--muted);font-size:.83rem;margin-left:.35rem}
.region-list{list-style:none;padding:0;margin:0 0 1.2rem;
 display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));gap:0 1.2rem}
.region-list__item{display:flex;justify-content:space-between;gap:.6rem;padding:.42rem 0;border-bottom:1px solid var(--line)}
.region-list__count{color:var(--muted);font-size:.83rem;flex:0 0 auto;font-variant-numeric:tabular-nums}
.links{margin-top:2rem}

.error-page__search{max-width:26rem;margin:1.6rem 0 0}
/* Страница виджета: код для вставки и живой пример */
.code-block{background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--radius-sm);
 padding:.9rem 1rem;overflow-x:auto;font-size:.84rem;line-height:1.5;margin:0 0 1rem}
.code-block code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre}
/* Длинная строка кода прокручивается внутри блока, а не тянет за собой лист. */
.code-block{overflow-x:auto;max-width:100%}
.widget-demo{width:100%;height:20rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
/* Реклама. Не перекрывает таблицу и не стоит на первом экране. */
.ad-slot{margin:1.4rem 0}
/* Подвал */
.site-footer{background:var(--header-bg);color:var(--header-muted);margin-top:3rem;
 padding:2rem 0 2.4rem;font-size:.89rem}
.site-footer a{color:var(--header-fg)}
.site-footer__nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:0 0 1.1rem;font-weight:500}
.site-footer__nav a{text-decoration:none}
.site-footer__nav a:hover{text-decoration:underline}
/* Установка на домашний экран: кнопки нет, пока браузер сам не предложит. */
.site-footer__install{margin:0 0 1.1rem}
.site-footer__install-button[hidden]{display:none}
.site-footer__note{margin-bottom:.7rem}
.site-footer__credits{margin:0;opacity:.75}
/* Печать: остаётся расписание, уходит вся обвязка. */
@media print{
 :root{--surface:#fff;--bg:#fff;--fg:#000;--muted:#444;--line:#bbb;--line-strong:#999;
  --accent:#000;--accent-soft:#eee;--shadow:none;--shadow-sm:none}
 /* Лист должен ложиться на холодильник: остаются расписание и справка о
    расчёте. Мечети, напоминания и счётчик зикра на бумаге бесполезны,
    в них жмут, а не читают. */
 .site-header,.breadcrumbs,.settings,.section-nav,.actions,.ad-slot,.next-prayer,.faq,.links,
 .period-nav,.period-list,.day-switch,.reminders,.mosques,.tasbih,.cookie-notice,
 .qibla,.site-footer,.layout__aside,.prayer-notes{display:none!important}
 body{font-size:11pt}
 .schedule,.calendar__scroll{border:0;box-shadow:none}
 .calendar{min-width:0}
 .calendar__row,.schedule__row{page-break-inside:avoid}
 .schedule__time{font-size:12pt}
 .schedule__icon{display:none}
 .page-head__title{font-size:15pt}
}
/* Область нажатия. Отдельно стоящая ссылка (списки, крошки, подвал, таблица)
   должна быть не меньше двадцати четырёх пикселей по высоте: WCAG 2.5.8,
   и просто попасть пальцем. Ссылки внутри абзаца это не касается, там
   размер задаёт текст. */
/* Подпись над списком городов: сколько их и в каком регионе. */
.place-list__caption{color:var(--muted);font-size:.88rem;margin:0 0 .7rem}
.place-list__item a,
.breadcrumbs__link,
.site-footer__nav a,
.schedule__link,
.region-list__item a,
.entry-list__item a{display:inline-flex;align-items:center;min-height:24px}
.contact-form__consent input[type=checkbox]{width:1.5rem;height:1.5rem;margin-top:0;accent-color:var(--accent)}
/* Тасбих: счётчик зикра. Кнопка большая намеренно, в неё жмут не глядя. */
.tasbih{text-align:center}
.tasbih__phrase{margin:0;font-size:1.15rem;font-weight:600}
.tasbih__count{margin:.3rem 0 0;font-size:clamp(3rem,18vw,5rem);font-weight:700;line-height:1;
 letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.tasbih__target{margin:.2rem 0 1rem;color:var(--muted);font-size:.9rem}
.tasbih__button{width:100%;min-height:8rem;border:1px solid var(--accent-line);border-radius:var(--radius);
 background:var(--accent-soft);color:var(--accent-strong);font:inherit;font-size:1.05rem;font-weight:600;
 cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.tasbih__button:active{background:var(--accent);color:var(--accent-fg)}
.tasbih__controls{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:end;justify-content:center;
 margin-top:1rem;text-align:left}
.tasbih__controls .actions{margin:0}
/* Нет сети: узкая полоса под шапкой, не перекрывает расписание. */
.offline-note{margin:0;padding:.55rem 1.25rem;background:var(--warn-soft);color:var(--warn);
 font-size:.88rem;text-align:center}
.offline-note[hidden]{display:none}