/* Reading Hebrew: /hebrew-alphabet/, /hebrew-vowels/ and /learn-to-read-hebrew/
   (tools/alphabet.mjs, tools/learn.mjs). Loaded after guide.css. Only the
   tokens from base.css, which already carry light and dark; logical
   properties throughout, so a right-to-left page lays out the same way. */

/* A section that holds a chart: wider than prose, never full bleed. */
.guide-section.abc-sec { max-width: 62rem; }
.guide-section.abc-sec > p { max-width: 33.5em; }

/* ---- Hero: the way on to the next page ------------------------------------ */
.onward { margin-top: .35rem; }
.onward a {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .55rem 1.15rem;
  border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--brand-tint-2);
  color: var(--brand); font-weight: 700; text-decoration: none;
}
/* Decoration: the link text says where it goes, so the arrow is silent
   (the second content, with empty alt text, where a browser reads it). */
.onward a::after { content: "→"; content: "→" / ""; }
[dir="rtl"] .onward a::after { content: "←"; content: "←" / ""; }
.onward a:hover { background: var(--brand-tint); }

/* ---- The alef-bet at a glance: techelet paper, the same in both themes ---- */
.abc-index {
  max-width: 62rem; margin: 0 0 clamp(1.5rem, 4vw, 2.5rem); padding: clamp(.75rem, 2vw, 1.1rem);
  border-radius: var(--r-card); background: var(--paper-deep);
}
/* Eleven to a row: alef to kaf, then lamed to tav, the way the first two
   units split them; the final forms on a row of their own. */
.abc-index ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: .2rem; }
.abc-index ol + ol { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--paper); }
.abc-index a {
  display: grid; place-items: center; height: clamp(2.2rem, 7vw, 3.4rem); border-radius: var(--r-sm);
  font-family: var(--f-display); font-size: clamp(1.3rem, 1rem + 1.6vw, 2.1rem); line-height: 1; color: var(--on-sky); text-decoration: none;
  transition: background-color .2s var(--ease);
}
.abc-index a:hover { background: var(--paper); }
.abc-index a:focus-visible { outline-color: var(--on-sky); outline-offset: 1px; }

/* ---- Letter and vowel tables ---------------------------------------------- */
.abc { width: 100%; border-collapse: collapse; font-size: .97rem; }
.abc th, .abc td { padding: .85rem 1rem; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); }
.abc tbody:last-child tr:last-child > * { border-bottom: 0; }
.abc thead th { font-size: .8rem; font-weight: 700; color: var(--ink-3); background: var(--inset); white-space: nowrap; }
.abc .glyph { width: 4.75rem; text-align: center; font-family: var(--f-display); font-size: 2.5rem; font-weight: 500; line-height: 1.1; color: var(--ink); }
.abc .name { width: 10.5rem; font-weight: 400; }
.abc .nm { display: block; font-weight: 700; color: var(--ink); }
.abc .nm-he { display: block; unicode-bidi: isolate; font-family: var(--f-display); font-size: 1.2rem; line-height: 1.4; color: var(--ink-2); }
[dir="ltr"] .abc .nm-he { text-align: left; }
.abc .also { display: block; font-size: .82rem; color: var(--ink-3); }
.abc .say { font-weight: 600; color: var(--ink); }
.abc .ipa { font-size: .88rem; color: var(--ink-3); white-space: nowrap; }
.abc .note { margin-top: .3rem; font-size: .93rem; line-height: 1.55; color: var(--ink-2); }
.abc .num { width: 5rem; text-align: end; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.abc .of { width: 8.5rem; }
.abc .of a { color: var(--brand); font-weight: 600; text-decoration: none; white-space: nowrap; }
.abc .of a:hover { text-decoration: underline; }
.abc .of .g { font-family: var(--f-display); font-size: 1.35rem; font-weight: 500; }
.abc tr:target > * { background: var(--brand-tint); }

/* The vowels: grouped by the sound they make. */
.nik .say-cell { width: 6.5rem; }
.nik .pos { width: 6rem; color: var(--ink-2); }
.nik .nt .note { margin-top: 0; }
.nik .fam th { padding-block: 1.3rem .6rem; background: var(--inset); font-family: var(--f-display); font-size: 1.3rem; font-weight: 600; color: var(--ink); }
.nik .fam-n { margin-inline-start: .45rem; font-family: var(--f-body); font-size: .8rem; font-weight: 700; color: var(--ink-3); }
.nik tbody:target .fam th { background: var(--brand-tint); }

/* On a phone every row becomes a card: the letter large at the start, its
   name and number beside it, the sound and the note beneath. */
@media (max-width: 640px) {
  .abc, .abc tbody, .abc tr, .abc th, .abc td { display: block; }
  .abc thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .abc tr {
    display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; grid-template-areas: "g n v" "g s s";
    gap: .15rem .85rem; margin-bottom: .7rem; padding: .9rem 1rem;
    border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  }
  .abc th, .abc td { width: auto; padding: 0; border: 0; }
  .abc tr:target { box-shadow: inset 0 0 0 2px var(--brand); }
  .abc tr:target > * { background: none; }
  .abc .glyph { grid-area: g; font-size: 2.3rem; }
  .abc .name { grid-area: n; }
  .abc .num { grid-area: v; }
  .abc .snd { grid-area: s; margin-top: .35rem; }
  .abc [data-label]::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 700; color: var(--ink-3); }
  .abc-finals tr { grid-template-areas: "g n v" "g o o" "g s s"; }
  .abc-finals .of { grid-area: o; margin-top: .35rem; }
  .nik tr { grid-template-columns: 3.6rem minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "g n n" "g c p" "g t t"; }
  .nik .say-cell { grid-area: c; margin-top: .3rem; }
  .nik .pos { grid-area: p; margin-top: .3rem; }
  .nik .nt { grid-area: t; margin-top: .35rem; }
  .nik .say-cell.is-empty::before { visibility: hidden; }
  .nik tr.fam { display: block; margin: 1.4rem 0 .5rem; padding: 0; background: none; box-shadow: none; }
  .nik .fam th { padding: 0; background: none; }
}

/* ---- Letters that look or sound alike ------------------------------------- */
.pairs { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); align-items: start; gap: .9rem; }
.pair { padding: .9rem; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.pair:target { box-shadow: inset 0 0 0 2px var(--brand); }
.pair-glyphs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.pair-glyphs a { display: grid; justify-items: center; align-content: start; gap: .1rem; padding: .6rem .5rem .8rem; border-radius: var(--r-md); background: var(--inset); text-align: center; text-decoration: none; transition: background-color .2s var(--ease); }
.pair-glyphs a:hover { background: var(--brand-tint); }
.pair-glyphs .g { font-family: var(--f-display); font-size: 3rem; font-weight: 500; line-height: 1.15; color: var(--ink); }
.pair-glyphs .nm { font-weight: 700; color: var(--ink); }
.guide-section .pair-note { margin-top: .75rem; font-size: .92rem; line-height: 1.55; }
.pair-note strong { display: block; font-size: .8rem; color: var(--ink); }

/* ---- The numbers --------------------------------------------------------- */
/* Nine columns, one per digit, so qof (100) stands under yod (10) and alef (1). */
.numgrid { display: grid; gap: .75rem; max-width: 40rem; margin-top: 1.25rem; }
.numrow { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .4rem 1rem; align-items: center; }
.guide-section .numlabel { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.numrow ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .3rem; }
.numrow a { display: grid; justify-items: center; padding: .3rem 0 .35rem; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; }
.numrow a:hover { box-shadow: inset 0 0 0 1px var(--brand); }
.numrow .g { font-family: var(--f-display); font-size: clamp(1.2rem, 1rem + 1vw, 1.55rem); line-height: 1.2; color: var(--ink); }
.numrow .v { font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-3); }
@media (max-width: 520px) { .numrow { grid-template-columns: minmax(0, 1fr); } }

/* ---- Units: the three that teach the letters, and all fourteen ------------ */
.units-mini, .unit-list { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 1rem; }
.units-mini { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.units-mini.one { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
.unit-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.units-mini > li, .unit, .level { padding: 1.1rem 1.25rem 1.2rem; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.unit:target, .level:target { box-shadow: inset 0 0 0 2px var(--brand); }
.guide-section .unit-n { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
[dir="rtl"] .guide-section .unit-n { letter-spacing: .02em; }
.guide-section .units-mini h3, .guide-section .unit h3, .guide-section .level h3 { margin: .2rem 0 .15rem; font-size: var(--step-2); }
.guide-section .level h3 { margin-top: 0; }
.units-mini h3 a { color: var(--ink); text-decoration: none; }
.units-mini h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.guide-section .sub { color: var(--ink); }
.guide-section .unit .sub { font-weight: 600; }
.guide-section .unit .blurb { margin-top: .45rem; font-size: .93rem; line-height: 1.55; }
.chips { list-style: none; padding: 0; margin: .8rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.chips li { padding: .2rem .65rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: .85rem; }
.chips .k-checkpoint { background: var(--brand-tint); color: var(--brand); font-weight: 600; }
.unit .lessons { margin: .8rem 0 0; padding-inline-start: 1.3rem; font-size: .92rem; color: var(--ink-2); }
.unit .lessons li + li { margin-top: .15rem; }
.unit .lessons li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.unit .lessons .k-checkpoint { color: var(--ink-3); }
.guide-section .see { margin-top: .75rem; font-size: .9rem; }
.see a { color: var(--brand); font-weight: 600; }

/* ---- Starting levels: each path as a bar, then in words ------------------- */
.levels { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .9rem; }
.guide-section .level-body { font-size: .92rem; color: var(--ink-3); }
.bar { display: flex; gap: 2px; height: 12px; margin: .9rem 0 .7rem; }
.bar .seg { flex: var(--n) 1 0%; min-width: 2px; border-radius: 3px; background: var(--line-strong); }
.bar .seg.torah { background: var(--brand); }
/* Credited as known: a hollow segment, legible on either theme's card. */
.bar .seg.known, .legend .sw.known { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.guide-section .count { color: var(--ink); }
.path-steps { list-style: none; padding: 0; margin: .45rem 0 0; display: flex; flex-wrap: wrap; gap: .15rem .45rem; font-size: .9rem; color: var(--ink-3); }
.path-steps li + li::before { content: "›"; content: "›" / ""; margin-inline-end: .45rem; color: var(--ink-4); }
[dir="rtl"] .path-steps li + li::before { content: "‹"; content: "‹" / ""; }
.path-steps .t { color: var(--brand); font-weight: 600; }
.guide-section .off { margin-top: .35rem; font-size: .9rem; color: var(--ink-3); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-top: .9rem; font-size: .85rem; color: var(--ink-3); }
.legend .sw { display: inline-block; width: 1.4rem; height: .6rem; margin-inline-end: .4rem; border-radius: 3px; background: var(--line-strong); vertical-align: middle; }
.legend .sw.torah { background: var(--brand); }
.guide-section .aside-note { margin-top: 1rem; font-size: .88rem; color: var(--ink-3); }

/* ---- The five books ------------------------------------------------------ */
.books { list-style: none; padding: 0; margin: 1rem 0 0; border-top: 1px solid var(--line); }
.books li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .7rem; padding-block: .8rem; border-bottom: 1px solid var(--line); }
.books .bk { font-family: var(--f-display); font-size: 1.3rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.books a.bk:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }
.books .he { font-size: 1.2rem; color: var(--ink-2); }
.books .en-name { color: var(--ink-3); }
.books .n { margin-inline-start: auto; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* ---- The lesson screenshot beside the hero ------------------------------ */
/* The phone is guide.css's .app-shot, one width on every hub, with the light
   and the dark screenshot (.only-light, .only-dark) inside it; .hub-top keeps
   the space below the caption, so the hero's own margin goes. */
.hub-top .guide-hero { margin-bottom: 0; }
.shot-fig { margin: 0; width: min(100%, 240px); }
@media (max-width: 760px) {
  .shot-fig .shot-cap { margin-inline: auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .abc-index a, .pair-glyphs a { transition: none; }
}