/* Токены и правила — в DESIGN.md. Меняешь здесь — поменяй и там. */

/* ---------- Шрифты (свои, не Google Fonts) ---------- */
@font-face {
  font-family: "Rubik"; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url(/static/fonts/rubik-hebrew-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Rubik"; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url(/static/fonts/rubik-cyrillic-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Rubik"; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url(/static/fonts/rubik-latin-wght-normal.woff2) format("woff2-variations");
  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: "Caveat"; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url(/static/fonts/caveat-cyrillic-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Caveat"; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url(/static/fonts/caveat-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}

/* ---------- Токены ---------- */
:root {
  --envelope: #EEF1F4;
  --paper: #FFFFFF;
  --ink: #16233A;
  --ink-soft: #55627A;
  --rule: #D5DCE5;
  --action: #1E46A8;
  --action-ink: #FFFFFF;
  --marker: #FFE14D;
  --on-marker: #16233A;
  --stamp: #B3261E;
  --ok: #2C7A4B;

  --r-sheet: 6px;
  --r-button: 10px;
  --r-mark: 3px;
  --sheet-shadow: 0 1px 0 var(--rule), 0 12px 24px -18px rgba(22, 35, 58, .35);

  --font: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --envelope: #0F1B2D;
    --paper: #17263C;
    --ink: #E6EBF2;
    --ink-soft: #9AA8BD;
    --rule: #2A3A53;
    --action: #8FB0FF;
    --action-ink: #0F1B2D;
    --stamp: #FF8F86;
    --ok: #6FD39A;
    --sheet-shadow: 0 1px 0 var(--rule), 0 14px 28px -18px rgba(0, 0, 0, .7);
  }
}

/* ---------- Основа ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--envelope);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font);
}
@media (min-width: 900px) { body { font-size: 1.125rem; } }

main, .top, .foot { max-width: 640px; margin: 0 auto; padding: 0 16px; }
main.wide, .top.wide, .foot.wide { max-width: 1040px; }
.below-hero { max-width: 640px; }

a { color: var(--action); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }

h1 { font-size: 1.7rem; font-weight: 650; line-height: 1.2; margin: 0 0 .75rem; letter-spacing: -.01em; }
h2 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin: 0 0 .5rem; }
p, ul, ol { margin: 0 0 .9rem; }
li { margin-bottom: .35rem; }
bdi { unicode-bidi: isolate; }

.hint { color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }
.ok { color: var(--ok); font-weight: 600; }
.error { color: var(--stamp); font-weight: 600; }
.text, .reply { white-space: pre-line; }

mark {
  background: var(--marker);
  color: var(--on-marker);
  border-radius: var(--r-mark);
  padding: 0 .15em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Шапка и подвал ---------- */
.top { display: flex; justify-content: space-between; align-items: baseline; padding-top: 18px; padding-bottom: 8px; }
.logo { font-weight: 700; color: var(--ink); text-decoration: none; }
.nav { display: flex; gap: 18px; }
.nav a { color: var(--ink-soft); text-decoration: none; }
.nav a:hover { color: var(--action); }
.foot { color: var(--ink-soft); font-size: .92rem; padding-top: 32px; padding-bottom: 40px; }
.foot a { color: var(--ink-soft); }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- Разделы и лист ---------- */
/* .card — обычный раздел на фоне страницы, без рамки (DESIGN.md §2: листом выглядят только документы) */
.card { padding: 20px 0; border-top: 1px solid var(--rule); }
.card:first-child { border-top: 0; }
.sheet {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sheet);
  box-shadow: var(--sheet-shadow);
  padding: 22px 20px;
  margin: 16px 0;
}
.sheet .card { padding: 16px 0; }
.sheet .card:first-child { padding-top: 0; }

/* ---------- Главная: первый экран ---------- */
.hero { padding: 28px 0 8px; display: grid; gap: 28px; align-items: center; }
.hero h1 { font-size: 2.1rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 30rem; }
@media (min-width: 900px) {
  .hero { grid-template-columns: 1fr 1.1fr; gap: 56px; padding: 56px 0 32px; }
  .hero h1 { font-size: 2.9rem; }
}

.letter { padding: 18px 18px 12px; margin: 0; }
.letter .line {
  display: grid;
  grid-template-areas: "he" "note";
  padding: 10px 0;
  border-top: 1px dashed var(--rule);
}
.letter .line:first-child { border-top: 0; padding-top: 0; }
.letter .he { grid-area: he; margin: 0; font-size: 1.05rem; }
.letter .note {
  grid-area: note;
  margin: 2px 0 0;
  font-family: var(--hand);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--action);
}
.letter figcaption { margin-top: 10px; }
@media (min-width: 560px) {
  .letter .line { grid-template-areas: "note he"; grid-template-columns: 10.5rem 1fr; column-gap: 18px; align-items: baseline; }
  .letter .note { margin: 0; }
}

/* Единственное движение на сайте: маркер проводится по выделенному (справа налево — как читают иврит) */
.letter mark {
  background: linear-gradient(var(--marker), var(--marker)) right center / 100% 100% no-repeat;
  animation: marker-sweep .6s cubic-bezier(.3, .7, .3, 1) both;
  animation-delay: calc(.35s + var(--i, 0) * .45s);
}
@keyframes marker-sweep { from { background-size: 0% 100%; } }
@media (prefers-reduced-motion: reduce) { .letter mark { animation: none; } }

/* ---------- Кнопки ---------- */
button, .button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  font: inherit; font-weight: 600;
  border: 0; border-radius: var(--r-button);
  padding: 12px 20px;
  background: var(--action); color: var(--action-ink);
  cursor: pointer; text-decoration: none;
}
button:hover, .button:hover { filter: brightness(1.08); }
button.secondary { background: transparent; color: var(--action); box-shadow: inset 0 0 0 1.5px var(--action); }
button.danger { background: var(--stamp); color: var(--paper); }
button.small { min-height: 36px; padding: 6px 12px; font-size: .92rem; }
button:disabled { opacity: .6; cursor: wait; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- Формы ---------- */
.stack { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
label { font-weight: 500; }
input[type=email], input[type=date] {
  font: inherit; width: 100%; max-width: 26rem;
  padding: 11px 12px; min-height: 48px;
  border: 1px solid var(--rule); border-radius: var(--r-sheet);
  background: var(--paper); color: var(--ink);
}
input[type=email]:focus, input[type=date]:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .97rem; }
.check input { margin-top: 4px; width: 20px; height: 20px; flex: none; accent-color: var(--action); }
fieldset { border: 1px solid var(--rule); border-radius: var(--r-sheet); padding: 14px 16px; margin: 0; width: 100%; background: var(--paper); }
legend { font-weight: 600; padding: 0 6px; }

.file {
  display: block; width: 100%;
  border: 2px dashed var(--rule); border-radius: var(--r-sheet);
  padding: 22px 16px; text-align: center; cursor: pointer;
  background: var(--paper);
}
.file:hover, .file:focus-within { border-color: var(--action); }
.file span { display: block; font-weight: 600; margin-bottom: 8px; }
.file input { max-width: 100%; }
.picked { color: var(--ink-soft); padding-left: 1.2rem; margin: 0; }

/* Переключатель «Письмо / Зарплатный лист» */
.tabs { display: flex; margin: 16px 0 4px; border: 1px solid var(--rule); border-radius: var(--r-button); overflow: hidden; background: var(--paper); }
.tabs a { flex: 1; text-align: center; padding: 11px 8px; color: var(--ink); text-decoration: none; font-weight: 600; }
.tabs a + a { border-left: 1px solid var(--rule); }
.tabs a[aria-current=page] { background: var(--ink); color: var(--paper); }
.tabs + .card { border-top: 0; }
fieldset .hint { margin: -4px 0 0; }

/* ---------- Результат разбора ---------- */
.sender { color: var(--ink-soft); margin: 0 0 .25rem; }
.deadline-date { font-size: 1.5rem; font-weight: 700; margin: 0 0 .75rem; }
.reply {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sheet);
  padding: 14px 16px; margin-bottom: 10px;
  font-size: 1.05rem;
}
.warn { border-left: 3px solid var(--stamp); padding-left: 14px; }
.again { margin: 24px 0 4px; }

/* Проверка зарплатного листа */
.nums { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 12px 0 0; }
.nums dt { color: var(--ink-soft); font-size: .92rem; }
.nums dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.findings { list-style: none; padding: 0; margin: 0; }
.finding { border-left: 3px solid var(--rule); padding: 6px 0 6px 14px; margin-bottom: 14px; }
.finding.lvl-problem { border-color: var(--stamp); }
.finding.lvl-check { border-color: var(--marker); }
.finding.lvl-ok { border-color: var(--ok); }
.finding p { margin: .3rem 0 0; color: var(--ink-soft); }
.badge { display: block; font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.lvl-problem .badge { color: var(--stamp); }
.lvl-ok .badge { color: var(--ok); }

/* ---------- Кабинет ---------- */
.reminders { list-style: none; padding: 0; margin: 0; }
.reminders li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); margin: 0; }

/* ---------- Статьи ---------- */
.prose { max-width: 38rem; }
.prose h2 { margin-top: 1.6rem; }
.article-list { list-style: none; padding: 0; margin: 0; }
.article-list li { padding: 16px 0; border-top: 1px solid var(--rule); margin: 0; }
.article-list a { font-size: 1.15rem; font-weight: 600; text-decoration: none; }
.article-list a:hover { text-decoration: underline; }
.article-list p { margin: .3rem 0 0; }
.cta { margin: 28px 0 16px; }

details { border-top: 1px solid var(--rule); padding: 10px 0; }
summary { cursor: pointer; font-weight: 600; }
details p { margin: .5rem 0 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}