/* ── Единый канон светлой темы, шаг 2.4: функциональные границы ──
   Граница, которая НЕСЁТ СМЫСЛ — поле ввода, кольцо фокуса, дорожка тумблера,
   чекбокс, активная вкладка — обязана быть видимой. Декоративные --border и
   --sep для этого слишком слабые (контраст 1.2–1.6), состояние на них вешать
   нельзя. Светлая тема — #8a6a24 (4.09 к фону), тёмная — rgba(230,196,118,.45)
   (3.10, значение уже жило в offline.html). */
:root{--border-strong:rgba(230,196,118,.45)}
html.light,html.lite,html.cardlite,html[data-theme="light"]{--border-strong:#8a6a24}
input:not([type=hidden]),select,textarea{border-color:var(--border-strong)}
input:not([type=hidden]):focus,select:focus,textarea:focus,button:focus-visible,
a:focus-visible,[role=button]:focus-visible{outline:2px solid var(--border-strong);outline-offset:2px}
.tg,.cbox,.ch,.tab.on,.nav-tab.active,.seg button.on{border-color:var(--border-strong)}

/* Обёртка списков даты/времени: внутри строки настроек она флекс-элемент и без
   min-width:0 не сжимается — два списка вылезают за строку. */
.dzdob{min-width:0;max-width:100%}
.r .dzdob{flex:0 0 auto}
.r .dzdob .dzd{flex:0 0 auto;width:auto;min-width:0;padding-left:7px;padding-right:18px;font-size:14px}

/* ── СВЕТЛАЯ ТЕМА ДЛИННЫХ ДОКУМЕНТОВ ──────────────────────────────────────
   Оферта, конфиденциальность, порядок удаления аккаунта и поддержка — это
   самые длинные экраны приложения, и читают их дольше всего. Светлой темы у
   них не было вообще: тумблер в профиле их не касался, своего тумблера не
   было, и человек, выбравший светлую, попадал в чёрный лист.

   Правила живут ЗДЕСЬ, а не в каждом документе, потому что вёрстка у всех
   четырёх одна (.top/.doc/.card/.qa/.warn). canon.css подключается раньше
   вёрстки экрана, поэтому специфичность поднята префиксом html.light —
   иначе более позднее правило страницы победило бы.

   Значения — канон: bgRoot.light #EFE7D3, cream.light #241C08,
   gold.light #8A6A24 (design/tokens.json). Своих цветов не выдумываем. */
html.light body{background:#efe7d3;color:#241c08}
/* Фото ночного неба в светлой теме не прячем насовсем: экран, у которого
   есть СВОЙ светлый снимок (Карта), перебивает это правило своим filter —
   поэтому здесь именно filter, а не opacity/display, иначе светлое небо
   Карты стало бы невидимым. */
html.light .csky{filter:brightness(1.5) saturate(.72) contrast(.82) opacity(.22)}
html.light .cskyscrim,html.light .cscrim{background:linear-gradient(180deg,#f6f0e0,#efe7d3)}
html.light .top{background:linear-gradient(180deg,#efe7d3,rgba(239,231,211,.72));border-bottom-color:rgba(138,106,36,.28)}
html.light .top b{color:#241c08}
html.light .bk{border-color:rgba(138,106,36,.42);color:#8a6a24}
html.light .doc{background:rgba(255,255,255,.86);border-color:rgba(138,106,36,.24);box-shadow:0 10px 30px rgba(120,100,40,.10)}
html.light .doc h1{color:#241c08}
html.light .doc h2,html.light .doc h3{color:#7a5f1e}
html.light .doc p,html.light .doc li{color:#3b3121}
html.light .doc a,html.light main a{color:#7a5f1e}
html.light .op,html.light .lead{color:#4a3f2a}
html.light .upd,html.light .legal{color:#6b5f3a}
html.light .lead,html.light .warn{background:rgba(201,168,76,.12);border-color:rgba(138,106,36,.32);color:#3b3121}
html.light hr{border-top-color:rgba(138,106,36,.24)}
html.light .card{background:rgba(255,255,255,.76);border-color:rgba(138,106,36,.26)}
html.light .card .ic{background:rgba(201,168,76,.12);border-color:rgba(138,106,36,.32)}
html.light .card .ic svg{stroke:#8a6a24}
html.light .card .tt{color:#241c08}
html.light .card .ss,html.light .qa .a{color:#4a3f2a}
html.light .qa .q{color:#7a5f1e}
html.light main{color:#241c08}
html.light main h1,html.light main h2{color:#7a5f1e}

/* ── СВЕТЛАЯ ТЕМА ЭКРАНОВ-ФОРМ И КАРТОЧЕК ────────────────────────────────
   «Оценка сотрудника», совместимость, семейные, карта другому, подарок,
   редактирование данных рождения — у всех одна вёрстка
   (.csky/.cscrim/.wrap/.top/.card/.seg/.go/.paywall) и до сих пор не было
   светлого набора: класс темы вставал, а экран оставался тёмным. Это и есть
   «упрощённый набор», которого быть не должно.

   Набор ОДИН и общий — тот же, что у документов и у Карты: bgRoot.light
   #EFE7D3, cream.light #241C08, gold.light #8A6A24 (design/tokens.json).
   Специфичность поднята префиксом html.light: canon.css подключается раньше
   вёрстки экрана и без префикса проиграл бы ей. */

html.light .cstars,html.light .cskyscrim{display:none}
html.light .cscrim{background:linear-gradient(180deg,#f6f0e0,#efe7d3 60%,#efe7d3)}
html.light .pw-bg{background:linear-gradient(180deg,#f6f0e0,#efe7d3);filter:none}
html.light body{color:#241c08}
html.light .top h1,html.light .top .tt,html.light .ttl{color:#241c08}
html.light .back,html.light .bk{background:rgba(255,255,255,.72);border-color:rgba(138,106,36,.42);color:#8a6a24}
html.light .intro,html.light .msg,html.light .bnote{color:#4a3f2a}
html.light .card,html.light .doc,html.light .bdoc,html.light .sect,html.light .gcard,html.light .fav,html.light .sec
{background:rgba(255,255,255,.86);border-color:rgba(138,106,36,.26);box-shadow:0 10px 30px rgba(120,100,40,.10)}
html.light label,html.light .gsh,html.light .fav-title{color:#7a5f1e}
html.light input:not([type=hidden]),html.light textarea,html.light select
{background:rgba(255,255,255,.9);color:#241c08;border-color:rgba(138,106,36,.42)}
html.light input::placeholder,html.light textarea::placeholder{color:rgba(36,28,8,.42)}
html.light .seg button{background:rgba(255,255,255,.7);color:#4a3f2a;border-color:rgba(138,106,36,.36)}
html.light .seg button.on{background:linear-gradient(135deg,#e7c66d,#c89b49);color:#1a1408}
html.light .go,html.light .act,html.light .gsbtn{color:#1a1408}
html.light .load,html.light .empty,html.light .fav-meta,html.light .fav-time,html.light .gstxt,html.light .gssub
{color:#4a3f2a}
html.light .bdoc p,html.light .doc p{color:#3b3121}
html.light .bdoc b,html.light .doc b,html.light .fav-label{color:#7a5f1e}
html.light .paywall{background:linear-gradient(180deg,rgba(255,252,246,.94),rgba(246,240,224,.88))!important;
border-color:rgba(138,106,36,.34)!important;box-shadow:0 18px 50px rgba(120,100,40,.14)!important}
html.light .paywall h3{color:#241c08!important;text-shadow:none!important}
html.light .paywall p{color:#4a3f2a!important;text-shadow:none!important}
html.light .paywall .cta.alt{background:rgba(255,255,255,.9)!important;color:#7a5f1e!important;
border-color:rgba(138,106,36,.4)!important}
html.light .paywall .tariff,html.light .ctariff{background:rgba(255,255,255,.8)!important;
border-color:rgba(138,106,36,.3)!important}

/* ── ФОН ЭКРАНА НЕ ЗАКРАШИВАТЬ ─────────────────────────────────────────────
   ЗАКОН: экраны полноэкранные, плашки плавают стеклом, ФОН ИДЁТ ПОД НИМИ.

   Экран с атмосферным фоном строит его тремя слоями — .csky (снимок неба),
   .cstars (звёздная пыль), .cscrim (затемнение под текст). Все три стоят на
   ОТРИЦАТЕЛЬНОМ z-index, то есть ниже содержимого. Но собственный фон <body>
   непрозрачен (`background:var(--bg)`), а по порядку отрисовки фон блочного
   потомка корня рисуется ПОСЛЕ слоёв с отрицательным z-index — и закрашивает
   их целиком. Человек видит плоскую чёрную заливку: именно её владелец и
   прислал со снимка «Прогноз на неделю» до генерации.

   Чинится ровно один раз и здесь, а не в каждом экране: фон уводится на
   <html> (он рисует холст и не перекрывает слои), а <body> становится
   прозрачным. Правило действует ТОЛЬКО там, где слои реально есть, поэтому
   экраны без них (главная со своим .bg, чат, профиль) не затронуты.
   Цвет на <html> остаётся, чтобы не было ни белой вспышки при загрузке, ни
   просвета под слоями. */
html:has(> body > .csky){background:#06060b}
html.light:has(> body > .csky),html.cardlite:has(> body > .csky),
html[data-theme="light"]:has(> body > .csky){background:#efe7d3}
body:has(> .csky){background:transparent!important}