/* עברית מן ההתחלה — шпаргалки уроков 1–6. Единая дизайн-система. */
:root {
  --bg: #f6f3ec; --panel: #fffdf8; --ink: #2a2622; --muted: #7a7266;
  --line: #e2dccf; --accent: #1f7a8c; --accent-soft: #e5f0f2;
  --he: #14343d; --tag: #efe9dc; --tag-ink: #6a5f4d;
  --f-fem: #b23a48; --f-masc: #1f6f8c; --zebra: #faf7f0;
  --serif: "Frank Ruhl Libre","SBL Hebrew","Times New Roman",serif;
  --sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --he-scale: 1;
}
/* тёмная палитра — переиспользуется авто-режимом и явным data-theme="dark" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#1a1816; --panel:#232019; --ink:#ece6da; --muted:#9c9384;
    --line:#39342b; --accent:#63b3c4; --accent-soft:#1e2f33;
    --he:#cfe7ee; --tag:#302b22; --tag-ink:#c3b79c;
    --f-fem:#e8909a; --f-masc:#7fc4dc; --zebra:#26221b;
  }
}
:root[data-theme="dark"] {
  --bg:#1a1816; --panel:#232019; --ink:#ece6da; --muted:#9c9384;
  --line:#39342b; --accent:#63b3c4; --accent-soft:#1e2f33;
  --he:#cfe7ee; --tag:#302b22; --tag-ink:#c3b79c;
  --f-fem:#e8909a; --f-masc:#7fc4dc; --zebra:#26221b;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); line-height: 1.5;
  font-size: 16px; padding: 0 0 5rem;
}
.wrap { max-width: 960px; margin: 0 auto; padding: 0 1.1rem; }
header.top {
  background: linear-gradient(180deg,var(--accent-soft),transparent);
  border-bottom: 1px solid var(--line); padding: 1.6rem 0 1.2rem; margin-bottom: 1.4rem;
}
header.top .wrap { display: flex; flex-direction: column; gap: .3rem; position: relative; }
.crumb { font-size: .82rem; color: var(--muted); letter-spacing: .02em; }
.crumb a { color: var(--accent); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; margin: .1rem 0 .1rem; font-weight: 650; letter-spacing: -.01em; }
h1 .he { font-family: var(--serif); font-weight: 500; }
.sub { color: var(--muted); font-size: .95rem; }
h2 {
  font-size: 1.15rem; margin: 2rem 0 .7rem; padding-bottom: .3rem;
  border-bottom: 2px solid var(--accent-soft); font-weight: 620;
}
h2 .he { font-family: var(--serif); color: var(--he); font-weight: 500; margin-inline-start: .4rem; }
h3 { font-size: .98rem; margin: 1.3rem 0 .5rem; color: var(--muted); font-weight: 600; }
p.lead { color: var(--muted); margin: .2rem 0 1rem; }

.he { font-family: var(--serif); color: var(--he); direction: rtl; unicode-bidi: isolate; font-size: calc(1em * var(--he-scale)); }
.he.big { font-size: calc(1.35rem * var(--he-scale)); line-height: 1.35; }
.lemma { font-family: var(--serif); color: var(--he); direction: rtl; unicode-bidi: isolate; font-size: calc(1.2rem * var(--he-scale)); }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 1rem 1.15rem; margin: .8rem 0;
}
.grid { display: grid; gap: .8rem; }
@media (min-width: 640px){ .grid.two { grid-template-columns: 1fr 1fr; } .grid.three{grid-template-columns:1fr 1fr 1fr;} }

table { border-collapse: collapse; width: 100%; margin: .4rem 0 .6rem; font-size: .96rem; }
caption { text-align: start; color: var(--muted); font-size: .85rem; padding: .2rem 0 .4rem; }
th, td { text-align: start; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: baseline; }
thead th { color: var(--muted); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 2px solid var(--line); }
tbody tr:nth-child(even){ background: var(--zebra); }
td.he, th.he { font-family: var(--serif); color: var(--he); direction: rtl; font-size: calc(1.12rem * var(--he-scale)); }
td.ru { color: var(--ink); }
td.note { color: var(--muted); font-size: .88rem; }

.pill { display:inline-block; font-size:.72rem; padding:.08rem .5rem; border-radius:999px; background:var(--tag); color:var(--tag-ink); border:1px solid var(--line); white-space:nowrap; }
.pill.l { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.g-fem { color: var(--f-fem); font-weight:600; } .g-masc { color: var(--f-masc); font-weight:600; }

.rule { background: var(--accent-soft); border-inline-start: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: .6rem .85rem; margin: .7rem 0; font-size: .93rem; }
.rule b { color: var(--accent); }
.ex { color: var(--muted); font-size: .9rem; }
.ex .he { font-size: calc(1.05rem * var(--he-scale)); color: var(--he); }

/* панель управления (тема · размер иврита) — в правом краю шапки, без прибавки высоты */
.controls { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap;
  position:absolute; inset-inline-end:0; top:50%; transform:translateY(-50%); z-index:6; }
@media (max-width: 620px){
  .controls { position:static; transform:none; inset-inline-end:auto; margin-top:.6rem; }
}
.controls .grp { display:inline-flex; align-items:center; gap:.15rem; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:.15rem; }
.controls button { font:inherit; font-size:.85rem; line-height:1; cursor:pointer; border:none; background:transparent; color:var(--ink); padding:.35rem .55rem; border-radius:7px; }
.controls button:hover { background:var(--accent-soft); }
.controls button[aria-pressed="true"] { background:var(--accent); color:#fff; }
.controls .lbl { color:var(--muted); font-size:.78rem; padding:0 .3rem 0 .45rem; }

/* кликабельные ивритские слова + всплывающий перевод */
.he .w, td.he .w, th.he .w, .lemma .w { cursor:pointer; border-radius:3px; padding:0 .02em; transition:background .1s; }
.he .w:hover, td.he .w:hover, th.he .w:hover, .lemma .w:hover { background:var(--accent-soft); }
.he .w.on, td.he .w.on { background:var(--accent); color:#fff; }
.popover { position:absolute; z-index:50; max-width:min(80vw,320px); background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.18); padding:.6rem .75rem; font-size:.92rem; }
.popover .pop-line { display:flex; align-items:center; gap:.4rem; margin-bottom:.15rem; }
.popover .pop-he { font-family:var(--serif); color:var(--he); direction:rtl; font-size:1.25rem; }
.popover .pop-speak { border:none; background:transparent; cursor:pointer; font-size:1rem; line-height:1; padding:.1rem .2rem; border-radius:6px; }
.popover .pop-speak:hover { background:var(--accent-soft); }
.popover .pop-ru { color:var(--ink); }
.popover .pop-miss { color:var(--muted); font-style:italic; }
.popover .pop-x { position:absolute; top:.2rem; inset-inline-end:.35rem; cursor:pointer; color:var(--muted); font-size:.9rem; line-height:1; }

.toolbar { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: .6rem 0; border-bottom: 1px solid var(--line); margin-bottom: .6rem; }
input[type=search]{ width:100%; padding:.6rem .8rem; font-size:1rem; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--ink); }
.count { color: var(--muted); font-size: .82rem; padding: .3rem 0; }

.index-grid { display:grid; gap:.9rem; grid-template-columns: 1fr; margin: 1rem 0 2rem; }
@media(min-width:560px){ .index-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:860px){ .index-grid{ grid-template-columns:1fr 1fr 1fr; } }
a.tile { display:block; text-decoration:none; color:inherit; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1rem 1.1rem; transition:.12s; }
a.tile:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.06); }
a.tile .n { font-size:.75rem; color:var(--accent); font-weight:700; }
a.tile h3 { margin:.25rem 0 .3rem; color:var(--ink); font-size:1.05rem; }
a.tile h3 .he { font-family:var(--serif); color:var(--he); }
a.tile p { margin:0; color:var(--muted); font-size:.86rem; }

footer.foot { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
.backlink { display:inline-block; margin:1.5rem 0 0; color:var(--accent); text-decoration:none; font-size:.9rem; }
.backlink:hover{ text-decoration:underline; }

@media print {
  body { background:#fff; color:#000; font-size:11pt; }
  .toolbar, .backlink, header.top .crumb, .controls, .popover { display:none; }
  .card,.tile{ break-inside: avoid; }
  a.tile:hover{ transform:none; box-shadow:none; }
}