/* The English Edge · app v7 · Marker & Pen (docs/design-guide.md)
   Rule: highlighters only mean "marked" or "what you're looking at now". Buttons, bars and cards use ink, paper and white.
   Mobile first. Breakpoints: 600 (two-column grids), 900 (side rail), 1280 (wide home).
   Nothing under 12px, targets at least 44px, contrast at least 4.5:1, no sideways scrolling, full-strength colors only. */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600&family=Rubik:wght@400;500;700&display=swap');

:root {
  --ink: #22304F; --ink-down: #172238; --muted: #4E5870; --paper: #FBF7EE; --white: #FFFFFF;
  --line: #E4DCCA; --soft: #EAE2CF; --tag-line: #B9B09A; --pressed: #F3EFE6;
  --off-fill: #E9E4D8; --off-line: #C9C1AE;
  --yellow: #FFE45C; --green: #8EF04F; --orange: #FFB23F; --blue: #57D0FF; --purple: #B99BFF; --pink: #FF7BD5; --smile: #F0BE00;
  --cobalt: #2D4CC8; --violet: #6A3DC0; --berry: #A82C68; --teal: #0B7780;
  --mk-yellow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2040'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20x2='1'%3E%3Cstop%20offset='0'%20stop-color='%23FFD21F'/%3E%3Cstop%20offset='.06'%20stop-color='%23FFE45C'/%3E%3Cstop%20offset='.93'%20stop-color='%23FFE45C'/%3E%3Cstop%20offset='1'%20stop-color='%23FFD21F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d='M7%208C45%204%2096%207%20140%205S188%205%20194%207C199%2013%20199%2027%20195%2033C150%2037%20104%2033%2062%2035S15%2037%206%2034C1%2027%202%2015%207%208Z'%20fill='url%28%23g%29'/%3E%3Cpath%20d='M12%2023C60%2021%20130%2024%20188%2021'%20fill='none'%20stroke='%23FFD21F'%20stroke-width='2.2'%20stroke-linecap='round'/%3E%3C/svg%3E");
  --mk-green: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2040'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20x2='1'%3E%3Cstop%20offset='0'%20stop-color='%236FDF2E'/%3E%3Cstop%20offset='.06'%20stop-color='%238EF04F'/%3E%3Cstop%20offset='.93'%20stop-color='%238EF04F'/%3E%3Cstop%20offset='1'%20stop-color='%236FDF2E'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d='M7%208C45%204%2096%207%20140%205S188%205%20194%207C199%2013%20199%2027%20195%2033C150%2037%20104%2033%2062%2035S15%2037%206%2034C1%2027%202%2015%207%208Z'%20fill='url%28%23g%29'/%3E%3Cpath%20d='M12%2023C60%2021%20130%2024%20188%2021'%20fill='none'%20stroke='%236FDF2E'%20stroke-width='2.2'%20stroke-linecap='round'/%3E%3C/svg%3E");
  --mk-orange: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2040'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20x2='1'%3E%3Cstop%20offset='0'%20stop-color='%23FF9D12'/%3E%3Cstop%20offset='.06'%20stop-color='%23FFB23F'/%3E%3Cstop%20offset='.93'%20stop-color='%23FFB23F'/%3E%3Cstop%20offset='1'%20stop-color='%23FF9D12'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d='M7%208C45%204%2096%207%20140%205S188%205%20194%207C199%2013%20199%2027%20195%2033C150%2037%20104%2033%2062%2035S15%2037%206%2034C1%2027%202%2015%207%208Z'%20fill='url%28%23g%29'/%3E%3Cpath%20d='M12%2023C60%2021%20130%2024%20188%2021'%20fill='none'%20stroke='%23FF9D12'%20stroke-width='2.2'%20stroke-linecap='round'/%3E%3C/svg%3E");
  --mk-blue: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2040'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20x2='1'%3E%3Cstop%20offset='0'%20stop-color='%2326BDFA'/%3E%3Cstop%20offset='.06'%20stop-color='%2357D0FF'/%3E%3Cstop%20offset='.93'%20stop-color='%2357D0FF'/%3E%3Cstop%20offset='1'%20stop-color='%2326BDFA'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d='M7%208C45%204%2096%207%20140%205S188%205%20194%207C199%2013%20199%2027%20195%2033C150%2037%20104%2033%2062%2035S15%2037%206%2034C1%2027%202%2015%207%208Z'%20fill='url%28%23g%29'/%3E%3Cpath%20d='M12%2023C60%2021%20130%2024%20188%2021'%20fill='none'%20stroke='%2326BDFA'%20stroke-width='2.2'%20stroke-linecap='round'/%3E%3C/svg%3E");
  --mk-purple: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2040'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20x2='1'%3E%3Cstop%20offset='0'%20stop-color='%23A07BFF'/%3E%3Cstop%20offset='.06'%20stop-color='%23B99BFF'/%3E%3Cstop%20offset='.93'%20stop-color='%23B99BFF'/%3E%3Cstop%20offset='1'%20stop-color='%23A07BFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d='M7%208C45%204%2096%207%20140%205S188%205%20194%207C199%2013%20199%2027%20195%2033C150%2037%20104%2033%2062%2035S15%2037%206%2034C1%2027%202%2015%207%208Z'%20fill='url%28%23g%29'/%3E%3Cpath%20d='M12%2023C60%2021%20130%2024%20188%2021'%20fill='none'%20stroke='%23A07BFF'%20stroke-width='2.2'%20stroke-linecap='round'/%3E%3C/svg%3E");
  --display: 'Fredoka', 'Rubik', system-ui, sans-serif; --body: 'Rubik', system-ui, sans-serif;
  --shadow: 0 1px 0 var(--line), 0 10px 24px -18px var(--ink);
  --gutter: 16px; --maxw: 720px; --tabbar: 68px; --rail: 232px;
  color-scheme: light;
}
@media (min-width: 600px) { :root { --gutter: 24px; --maxw: 780px; } }
@media (min-width: 900px) { :root { --gutter: 36px; --maxw: 820px; } }
@media (min-width: 1280px) { :root { --gutter: 48px; --maxw: 1080px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16.5px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; background: none; border: 0; padding: 0; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.2; margin: 0; }
p { margin: 0; }
svg { flex: none; }
[lang=he], .he { font-family: var(--body); unicode-bidi: isolate; }
h1 .he, h2 .he, h3 .he { font-family: var(--display); font-weight: 500; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--white); }
/* The page title takes focus after navigation for screen readers; it isn't a control, so no ring. */
#page-title:focus { outline: none; box-shadow: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--ink); color: var(--white); padding: 12px 16px; border-radius: 10px; z-index: 50; }
.skip:focus { top: 8px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.spread { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.section { margin-top: 28px; }
.ic { width: 24px; height: 24px; }
/* Icons (D-45, F-104): Phosphor outlines only, in the text color, thickened a little so they never look thin. */
.ic .ln { fill: currentColor; stroke: currentColor; stroke-width: 7; stroke-linejoin: round; }
.ic .duo { display: none; }
.tab .ti .ic { color: var(--ink); }
.ic.sm { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- the marker */
.mk { color: inherit; background: var(--mk-yellow) left center / 0% 100% no-repeat; padding: .02em .22em; margin: 0 -.08em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .7s cubic-bezier(.3, .7, .3, 1); border-radius: 2px; }
.mk.on { background-size: 100% 100%; }
.mk:lang(he), [dir=rtl] .mk { background-position: right center; }
.mk-green { background-image: var(--mk-green); }
.mk-orange { background-image: var(--mk-orange); }
.mk-blue { background-image: var(--mk-blue); }
@media (prefers-reduced-motion: reduce) { .mk { transition: none; background-size: 100% 100%; } }
/* A marker behind a whole control (current tab, selected option): drawn at once, no animation. */
.mk-fill { background: var(--mk-yellow) center / 100% 100% no-repeat, var(--yellow); }

/* ---------------------------------------------------------------- bilingual text */
/* The Hebrew line starts on the same left line as the English (one clear rule), never at the end of the English text.
   Buttons and tabs center both lines instead. */
.bi { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.2; min-width: 0; }
.bi .he { font-size: .85em; font-weight: 400; }
button .bi, .btn .bi, .review-link .bi { align-items: center; }
/* F-61: a marker showing the current or selected item covers the label text only, from its start to its end. */
[aria-pressed=true] > .lbl, [aria-pressed=true] > .bi > span, .types [aria-pressed=true] > .en, .types [aria-pressed=true] > .he, .tchips [aria-pressed=true] > .tname, .review-link[aria-current=page] .bi > span, .opt.right > .lbl, .opt.wrong > .lbl {
  background: var(--mk-yellow) center / 100% 100% no-repeat; padding: 0 .25em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.opt.right > .lbl { background-image: var(--mk-green); }
.opt.wrong > .lbl { background-image: var(--mk-orange); text-decoration: line-through; text-decoration-thickness: 2px; }
/* Edge anchors: English on the object's left edge, Hebrew on its right edge. */
.pair { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; min-width: 0; }
.pair > .en { min-width: 0; }
/* Physical margin on purpose: the Hebrew span is dir=rtl, where margin-inline-start would be its right side. */
.pair > .he { margin-left: auto; text-align: right; }
.page-head { margin: 4px 0 18px; }
.page-head h1 { font-size: 28px; }
/* F-59: a title's English and Hebrew share one row (English at the left edge, Hebrew at the right edge). */
.tpair { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.tpair > .he { margin-left: auto; font-size: .82em; font-weight: 500; }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.lang { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: .04em; margin-bottom: 4px; }

/* ---------------------------------------------------------------- shell */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px var(--gutter); background: var(--paper); border-bottom: 1.5px solid var(--line); }
.logo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 18px; }
.logo span { white-space: nowrap; }
@media (max-width: 374.98px) {
  .topbar .logo > span { font-size: 16px; } .topbar .logo svg { width: 28px; }
  /* On the narrowest phones the account button shows only the avatar; its label stays for screen readers (aria-label). */
  .topbar .account-link { padding: 2px; min-width: 48px; justify-content: center; }
  .topbar .account-link .bi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.logo svg { width: 34px; height: 31px; }
.logo .hl { background: var(--mk-yellow) center / 100% 100% no-repeat; padding: 0 .15em; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.account-link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 2px 12px 2px 3px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); text-decoration: none; font-weight: 600; font-size: 14px; }
.account-link .bi .he { font-size: 12px; }
.account-link .bi { white-space: nowrap; }
@media (max-width: 899.98px) { .topbar .account-link { padding-right: 10px; } }
main { display: block; padding: 18px var(--gutter) calc(var(--tabbar) + 36px); max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; outline: none; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--white); border-top: 2px solid var(--ink); padding-bottom: env(safe-area-inset-bottom); }
.tabbar .rail-only { display: none; }
.tab { position: relative; min-height: var(--tabbar); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 6px 2px; text-decoration: none; color: var(--muted); min-width: 0; text-align: center; }
.tab .ti { display: grid; place-items: center; width: 60px; height: 32px; }
.tab .en { font-size: 12px; font-weight: 600; line-height: 1.15; }
.tab .he { font-size: 12px; line-height: 1.15; }
.tab[aria-current=page] { color: var(--ink); }
.tab[aria-current=page] .ti { background: var(--mk-yellow) center / 100% 100% no-repeat; }
.badge { position: absolute; top: 4px; left: calc(50% + 12px); min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--white); color: var(--ink); border: 1.5px solid var(--ink); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.save-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--muted); white-space: pre-line; line-height: 1.35; }
.sync-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); margin-top: 3px; flex: none; }
.sync-dot.on { background: var(--ink); }
.sync-dot.warn { border-color: #9A4A00; background: var(--orange); }

@media (min-width: 900px) {
  .topbar { display: none; }
  .tabbar { top: 0; right: auto; width: var(--rail); display: flex; flex-direction: column; gap: 4px; padding: 18px 14px; border-top: 0; border-right: 2px solid var(--ink); overflow-y: auto; }
  .tabbar .rail-only { display: flex; }
  .tabbar .logo { margin: 0 4px 16px; }
  .tab { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 52px; padding: 4px 8px; border-radius: 12px; text-align: left; }
  .tab .ti { width: 56px; height: 32px; }
  .tab .labels { display: flex; flex-direction: column; }
  .tab .en { font-size: 15px; } .tab .he { font-size: 13px; }
  .badge { position: static; margin-inline-start: auto; }
  .rail-foot { margin-top: auto; flex-direction: column; gap: 10px; padding-top: 16px; }
  .rail-foot .account-link, .rail-foot .btn { width: 100%; justify-content: flex-start; }
  main { margin-left: var(--rail); padding-bottom: 48px; max-width: none; }
  #view > .page { max-width: var(--maxw); margin: 0 auto; } /* pages sit inside #view since F-120 */
}
@media (max-width: 899.98px) { .tab .labels { display: contents; } }

/* F-120: the Continue bar brings the learner back to their topic from any other screen. */
.continue-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; margin: 0 auto 16px; max-width: var(--maxw); padding: 6px 16px; border-radius: 12px; background: var(--yellow); color: var(--ink); text-decoration: none; font-weight: 700; box-shadow: var(--shadow); }
.continue-bar[hidden] { display: none; }
.continue-bar .bi { align-items: flex-start; }
.topic-top .row { gap: 12px; }

/* ---------------------------------------------------------------- buttons (Buttons B, no marker underline) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 8px 22px; border-radius: 12px;
  border: 2px solid var(--ink); background: var(--white); color: var(--ink); text-decoration: none; text-align: center; font-weight: 700; font-size: 16.5px; line-height: 1.2; }
.btn .bi { align-items: center; }
.btn .bi .he { font-size: 14px; font-weight: 400; }
.btn.primary { background: var(--ink); color: var(--white); }
.btn:active:not([disabled]) { transform: translateY(1px); background: var(--pressed); }
.btn.primary:active:not([disabled]) { background: var(--ink-down); }
.btn.sm { min-height: 48px; padding: 6px 16px; font-size: 15px; }
.btn.wide { width: 100%; }
.btn[disabled], .btn[aria-disabled=true] { background: var(--off-fill); border: 2px dashed var(--off-line); color: var(--muted); cursor: not-allowed; }
.btn.quiet { border-color: transparent; background: none; min-height: 44px; padding: 6px 4px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.btn.quiet .bi { align-items: flex-start; }
.btn.danger { color: #8A1C1C; border-color: #8A1C1C; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-row.center { justify-content: center; }
.btn-row.end { justify-content: flex-end; }
@media (max-width: 599.98px) { .btn-row.fill > .btn { flex: 1 1 100%; } }
/* Round icon buttons (D-31): white fill, 2px ink outline. */
.icon-btn { width: 48px; height: 48px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; border: 2px solid var(--ink); background: var(--white); color: var(--ink); text-decoration: none; }
.icon-btn.lg { width: 64px; height: 64px; }
.icon-btn.lg .ic { width: 30px; height: 30px; }
.icon-btn[aria-disabled=true], .icon-btn[disabled] { background: var(--off-fill); border: 2px dashed var(--off-line); color: var(--muted); cursor: not-allowed; }
.icon-btn.speaking { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------------------------------------------------------------- cards and instructions */
.card { background: var(--white); border: 1.5px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 18px; min-width: 0; }
.card.tight { padding: 14px; }
.instr { background: var(--white); border: 1.5px solid var(--line); border-radius: 12px; }
.instr.short { padding: 10px 14px; }
.instr.short .en { font-weight: 500; }
.instr.long > div { padding: 14px 16px; }
.instr.long > div + div { border-top: 1.5px dashed var(--line); }
.instr.long .he { text-align: right; }
.instr.long p + p { margin-top: 6px; }
.instr ol { margin: 6px 0 0; padding-inline-start: 22px; }
.instr ol li + li { margin-top: 4px; }
.empty { text-align: center; padding: 26px 18px; }
.empty h3 { font-size: 20px; }
.empty p { margin-top: 8px; color: var(--muted); }
/* Short bilingual messages are written "English\nHebrew": keep the two lines apart. */
.empty p, .set-card p, .card > p { white-space: pre-line; }
.empty .btn-row { justify-content: center; margin-top: 16px; }
.alert { margin-top: 12px; padding: 10px 14px; border: 2px solid #8A1C1C; border-radius: 12px; background: var(--white); color: #8A1C1C; white-space: pre-line; }
.note { font-size: 14px; color: var(--muted); white-space: pre-line; }

/* ---------------------------------------------------------------- tags and statuses */
.tag { display: inline-flex; align-items: center; min-height: 26px; padding: 1px 10px; border: 1.5px solid var(--tag-line); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--muted); background: var(--white); font-style: normal; white-space: nowrap; }
.tag.src { border-style: dashed; }
.st { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 12px 2px 10px; font-weight: 600; font-size: 14px; border-radius: 8px; white-space: nowrap; }
.st i { font-style: normal; font-weight: 700; }
.st .he { font-weight: 400; font-size: 13px; }
.fold > summary .st { white-space: normal; }
.st-new { background: var(--mk-purple) center / 100% 100% no-repeat; }
.mk-purple { background-image: var(--mk-purple); }
.st-known { background: var(--mk-green) center / 100% 100% no-repeat; }
.st-missed { background: var(--mk-orange) center / 100% 100% no-repeat; }
.st-due { background: var(--mk-blue) center / 100% 100% no-repeat; }

/* ---------------------------------------------------------------- segmented switch */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; background: var(--white); }
.seg button { min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 6px; line-height: 1.2; border-inline-start: 1.5px solid var(--line); font-weight: 600; font-size: 14px; }
.seg button:first-child { border-inline-start: 0; }
.seg button .he { font-weight: 400; font-size: 12.5px; }
.seg button[aria-pressed=true] { border-width: 0; }
.seg.lists button { font-family: var(--display); font-size: 17px; }
.seg.lists button small { font-family: var(--body); font-size: 12px; font-weight: 400; }

/* F-74: Show Both / Hide Hebrew / Hide English are separate buttons, centered. */
.show-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.show-modes { gap: 8px; }
.show-modes button { min-height: 52px; padding: 6px 12px; border: 2px solid var(--ink); border-radius: 12px; background: var(--white); font-weight: 600; font-size: 14.5px; }
.show-modes button .he { font-weight: 400; font-size: 12.5px; }
.show-modes button[aria-pressed=true] { border-width: 3px; }

/* ---------------------------------------------------------------- Know It (checkbox) */
.know { display: inline-grid; grid-template-columns: 30px auto; column-gap: 12px; align-items: center; justify-items: start; min-height: 52px; padding: 6px 18px 6px 12px;
  border: 2px solid var(--ink); border-radius: 12px; background: var(--white); text-align: left; }
.know .box { grid-row: 1 / span 2; width: 28px; height: 28px; border: 2px solid var(--ink); border-radius: 7px; background: var(--white); display: grid; place-items: center; }
.know .box svg { visibility: hidden; width: 20px; height: 20px; }
.know[aria-pressed=true] .box { background: var(--mk-green) center / 100% 100% no-repeat, var(--green); }
.know[aria-pressed=true] .box svg { visibility: visible; }
.know .en { font-weight: 700; } .know .he { font-size: 13.5px; }

/* ---------------------------------------------------------------- home */
.home { gap: 20px; }
.home-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
/* F-67: How It Works steps, each with its own pen color; even spacing before and after the list. */
.how-steps { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.how-steps li { display: flex; align-items: flex-start; gap: 12px; }
.how-steps .hs-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: var(--white); display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.instr.long .he .how-steps li { flex-direction: row; }
@media (min-width: 900px) { .home-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; } }
.next-card { position: relative; overflow: hidden; background: var(--ink); border-color: var(--ink); color: var(--white); }
.next-card .kicker { color: #D3D8E3; }
.next-card .sub { color: #D3D8E3; }
/* F-119: the Home banner's main button is yellow, so it's clear where to start. */
.next-card .btn, .color-trial .next-card .btn.primary { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.next-card .btn:active:not([disabled]) { background: #FFD21F; }
.next-card .kicker { margin-bottom: 8px; }
.next-card h2 { font-size: 26px; }
.next-card .btn { margin-top: 18px; position: relative; z-index: 1; }
.next-card .sub { margin-top: 8px; }
.next-card .smile { position: absolute; right: -8px; bottom: -14px; width: 150px; opacity: 1; pointer-events: none; }
@media (max-width: 599.98px) { .next-card .btn { width: 100%; } .next-card .smile { width: 110px; } }
.refresh-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
/* F-65: five progress boxes in one row, each in its own pen color; one under the other on phones. */
.pboxes { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .pboxes { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.pbox .go { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; }
.pbox { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 118px; padding: 14px 16px; border-radius: 16px; background: var(--c); color: var(--white); text-decoration: none; box-shadow: var(--shadow); }
.pbox b { font-family: var(--display); font-size: 34px; line-height: 1.05; font-weight: 600; }
.pbox b small { font-size: 18px; font-weight: 500; }
.pbox .en { font-weight: 700; font-size: 15px; line-height: 1.25; }
.pbox .he { font-size: 14px; }
.pbox .bar { border-color: var(--white); background: var(--c); margin-top: auto; }
.pbox .bar i { background: var(--white); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--white); text-decoration: none; min-height: 96px; }
.tile b { font-family: var(--display); font-size: 28px; line-height: 1.15; font-weight: 600; }
.tile b span { padding: 0 .2em; }
.tile .en { font-weight: 600; font-size: 14.5px; line-height: 1.25; } .tile .he { font-size: 13px; }
.bar { height: 12px; border-radius: 999px; border: 2px solid var(--ink); background: var(--white); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--ink); }
/* F-66: the exam plan as three equal figures. */
.plan-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.plan-nums > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 8px; border-radius: 14px; border: 2px solid var(--c); }
.plan-nums b { display: block; font-family: var(--display); font-size: 34px; line-height: 1.1; font-weight: 600; }
.plan-nums .en { font-weight: 700; font-size: 14px; line-height: 1.2; } .plan-nums .he { font-size: 13px; }
.exam-set { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.exam-set .field { flex: 1 1 200px; }
.exam-set input[type=date] { cursor: pointer; }
.exam-set .icon-btn { flex: none; }
.fold { border: 1.5px solid var(--line); border-radius: 14px; background: var(--white); }
.fold > summary { list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; font-weight: 700; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary .chev { transition: transform .2s; }
.fold[open] > summary .chev { transform: rotate(180deg); }
.fold > .inner { padding: 0 16px 16px; }
.fold.plain { border: 0; background: none; }

/* ---------------------------------------------------------------- topics */
.topic-list { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .topic-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.topic-card { display: flex; align-items: stretch; min-height: 84px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--white); overflow: hidden; text-decoration: none; }
.topic-card .pen { width: 58px; flex: none; display: grid; place-items: center; background: var(--pen); color: var(--white); font-family: var(--display); font-size: 24px; font-weight: 600; margin: -1px 0 -1px -1px; }
.topic-card .tbody { flex: 1; min-width: 0; padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.topic-card .pair .en { font-weight: 600; }
.tmeta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.dots { display: inline-flex; gap: 5px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ink); }
.dots i.on { background: var(--ink); }
.search { width: 100%; min-height: 52px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--white); }
.coming { text-align: center; }

/* topic headline (D-30: ink bar) */
.topic-head { display: grid; grid-template-columns: 72px minmax(0, 1fr); border-radius: 14px; overflow: hidden; color: var(--white);
  /* F-68: the bar is painted in two parts, so no ink shows at the edges of the number block. */
  background: linear-gradient(90deg, var(--tbg, var(--pen)) 0 72px, var(--ink) 72px); }
.color-trial .topic-head { --tbg: var(--tcolor); }
.topic-head .pen { background: var(--tbg, var(--pen)); color: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 4px; }
.topic-head .pen .tl { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; }
.topic-head .pen b { font-family: var(--display); font-size: 28px; line-height: 1.05; font-weight: 600; }
.topic-head .pair { padding: 12px 16px; align-self: stretch; align-items: center; align-content: center; background: var(--ink); }
.topic-head .pair .en { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.2; }
.topic-head .pair .he { font-family: var(--display); font-weight: 500; font-size: 19px; }
.topic-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.topic-nav { display: flex; gap: 8px; }
a.topic-head { text-decoration: none; }

/* step bar (Circles C) + unnumbered Review */
.stepbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin: 18px 0 20px; }
/* F-70: step circles close together, joined by a dotted line; the current one grows. */
.steps { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 6px; position: relative; }
.steps::before { content: ""; position: absolute; top: 24px; left: 12%; right: 12%; border-top: 2.5px dotted var(--ink); }
.steps li { position: relative; }
.steps a { display: flex; flex-direction: column; align-items: center; gap: 6px; width: clamp(64px, 20vw, 82px); min-height: 76px; padding: 4px 2px; text-decoration: none; text-align: center; border-radius: 10px; }
.steps .num { width: 40px; height: 40px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-weight: 700; font-size: 16px; position: relative; transition: transform .2s; }
.steps .num .ic { width: 20px; height: 20px; }
.steps .done .num { background: var(--ink); color: var(--white); }
.steps [aria-current=step] .num { background: var(--yellow); box-shadow: 0 0 0 2.5px var(--ink); color: var(--ink); transform: scale(1.18); }
.steps .done[aria-current=step] .num, .color-trial .steps .done[aria-current=step] .num { background: var(--yellow); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .steps .num { transition: none; } }
.steps .en { font-size: 13px; font-weight: 600; line-height: 1.2; }
.steps .he { font-size: 12px; line-height: 1.2; }
.steps a:not(.done):not([aria-current=step]) .labels { color: var(--muted); }
.steps .labels { display: flex; flex-direction: column; }
.review-link { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 16px; border: 2px solid var(--ink); border-radius: 12px; background: var(--white); text-decoration: none; font-weight: 600; }
.review-link[aria-current=page] { border-width: 3px; }
.review-link .bi .he { font-size: 12.5px; font-weight: 400; }

/* ---------------------------------------------------------------- Meet */
.meet-card { display: flex; flex-direction: column; gap: 14px; text-align: center; }
.meet-card .tag { align-self: center !important; }
.meet-count { font-weight: 700; font-size: 15px; }
.meet-word { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.meet-word h2 { font-size: clamp(34px, 7vw, 46px); line-height: 1.1; }
.meet-he { border-top: 1.5px dashed var(--line); padding-top: 14px; text-align: center; font-family: var(--display); font-weight: 500; font-size: clamp(26px, 5vw, 32px); }
.meet-nav { display: flex; justify-content: center; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.meet-nav .btn { min-width: 0; padding-inline: 18px; }
.scene { font-size: 19px; line-height: 1.75; }
.scene .tw { font: inherit; color: inherit; cursor: pointer; border-bottom: 2px dotted var(--ink); }
.scene-gloss { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white); }
.scene-gloss .he { font-size: 18px; font-weight: 500; }

/* ---------------------------------------------------------------- word card */
.cards { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.word-card { display: flex; flex-direction: column; gap: 12px; }
/* F-73: Listen sits next to the English word; the Hebrew is at the right edge. */
.wc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.wc-word { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wc-word h3 { font-size: 34px; line-height: 1.1; }
.wc-he { margin-left: auto; text-align: right; font-family: var(--display); font-weight: 500; font-size: 24px; }
.wc-body { margin: 0; }
.wc-body > div + div { margin-top: 10px; }
.wc-body dt { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.wc-body dd { margin: 2px 0 0; }
.wc-body .tag { margin-inline-start: 6px; vertical-align: 1px; }
.ex { font-style: italic; border-inline-start: 3px solid var(--line); padding-inline-start: 12px; }
.ex + .ex { margin-top: 8px; }
.ex .tag { font-style: normal; margin-inline-start: 6px; }
/* F-106: the status tag sits beside the Know It box on the right; ticking Know It never moves the box. */
.wc-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; border-top: 1.5px solid var(--line); padding-top: 12px; }
.masked { position: relative; }
.masked > :not(.reveal) { visibility: hidden; }
.reveal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; min-height: 44px; border: 2px dashed var(--ink); border-radius: 10px; background: var(--white); font-weight: 600; font-size: 14px; }
.wc-he.masked { min-height: 48px; }
.learn-end { margin-top: 20px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
@media (min-width: 600px) { .learn-end { align-items: flex-end; } }

/* ---------------------------------------------------------------- practice */
.types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
@media (min-width: 600px) { .types { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.types button { min-height: 60px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; padding: 8px 12px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--white); text-align: left; }
.types button .en { font-weight: 600; font-size: 15px; line-height: 1.2; }
.types button .he { align-self: flex-end; font-size: 13px; }
.types button[aria-pressed=true] { border-width: 2.5px; }
.types button .left { font-size: 12.5px; color: var(--muted); }
.session-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.session-top .bar { flex: 1; }
.session-top .n { font-weight: 700; font-size: 15px; white-space: nowrap; }
.q-card { display: flex; flex-direction: column; gap: 16px; }
/* F-108: a practice instruction's English and Hebrew share one row above phone width; they wrap only when they don't fit. */
.q-card .ask { gap: 4px 24px; }
@media (max-width: 599.98px) { .q-card .ask { flex-direction: column; align-items: stretch; } }
.prompt { border-inline-start: 5px solid var(--ink); padding: 4px 0 4px 14px; }
/* F-78: the meaning to match stands out in the area's pen color. */
.prompt.meaning { border: 0; border-radius: 14px; padding: 16px 18px; background: var(--tcolor); color: var(--ink); }

.prompt .p-text { font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.35; margin-top: 4px; }
.prompt .p-text.he { text-align: left; font-size: 28px; }
.prompt .tag { margin-top: 6px; }
.opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 600px) { .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.opt { min-height: 56px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--white); font-weight: 600; font-size: 17px; text-align: left; }
.opt.he { text-align: right; font-weight: 500; }
.opt[aria-pressed=true] { border-width: 3px; }
.opt[disabled] { cursor: default; }
.typed { width: 100%; min-height: 56px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--white); font-size: 20px; letter-spacing: .04em; }
.typed:disabled { background: var(--white); }
.slots { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.slots .w { display: inline-flex; flex-wrap: wrap; gap: 3px 2px; max-width: 100%; }
.slots .c { width: clamp(15px, 5vw, 22px); height: 30px; display: inline-grid; place-items: end center; border-bottom: 2.5px solid var(--ink); font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1; padding-bottom: 2px; }
.slots .c.p { border-bottom-color: transparent; }
.slots-note { font-size: 13.5px; color: var(--muted); }
/* F-79: the learner types right on the letter slots: a real input lies over them, invisible, and the slots show the letters. */
.slot-input { position: relative; display: inline-flex; max-width: 100%; border-radius: 8px; cursor: text; }
.slot-input input { position: absolute; top: -10px; bottom: -10px; left: -6px; right: -6px; width: calc(100% + 12px); height: auto; min-height: 44px; opacity: 0; font-size: 16px; border: 0; padding: 0; }
/* F-111: no box around the slots; while typing, the current letter's slot is highlighted yellow with the colored underline. */
.slot-input:focus-within { outline: none; }
.slot-input:focus-within .slots .c.cur { background: var(--yellow); border-bottom-width: 4px; border-bottom-color: var(--accent, var(--ink)); border-radius: 3px 3px 0 0; }
.kb-hint { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 2px solid var(--berry); border-radius: 10px; background: var(--white); color: var(--ink); font-size: 14.5px; }
.kb-hint[hidden] { display: none; }
.slot-input.big .slots .c { width: clamp(20px, 7vw, 30px); height: 40px; font-size: 26px; }
.sentence { font-size: 19px; line-height: 2.1; }
.sentence .gap { display: inline-flex; vertical-align: middle; margin: 0 4px; max-width: 100%; }
.sentence .gap .c { width: clamp(13px, 4.2vw, 17px); height: 26px; font-size: 16px; }
.hint { font-size: 14.5px; color: var(--muted); }
.hint .he { font-size: 16px; color: var(--ink); font-weight: 500; }
.feedback { border-top: 1.5px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.feedback h3 { font-size: 21px; }
.feedback .answer-word { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.feedback .answer-word b { font-family: var(--display); font-size: 26px; font-weight: 600; }
.q-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
@media (max-width: 599.98px) { .q-actions > .btn { flex: 1 1 auto; } }
/* Flip Cards (F-23): a real 3D flip */
.flip { perspective: 1200px; }
.flip-in { position: relative; min-height: 220px; transition: transform .6s cubic-bezier(.3, .7, .3, 1); transform-style: preserve-3d; }
.flip-in.flipped { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; text-align: center;
  border: 2px solid var(--ink); border-radius: 16px; background: var(--white); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.face.back { transform: rotateY(180deg); }
.face .fw { font-family: var(--display); font-weight: 600; font-size: 36px; }
.face .fh { font-family: var(--display); font-weight: 500; font-size: 30px; }
@media (prefers-reduced-motion: reduce) {
  .flip-in { transition: none; transform: none !important; }
  .face { transition: opacity .25s; }
  .face.back { transform: none; opacity: 0; }
  .flipped .face.back { opacity: 1; } .flipped .face.front { opacity: 0; }
}
.rec-note { font-size: 13.5px; color: var(--muted); }
.btn.recording { outline: 3px solid var(--ink); outline-offset: 3px; }
.summary { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.summary .score { font-family: var(--display); font-weight: 600; font-size: 44px; line-height: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chips.start { justify-content: flex-start; }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--white); font-weight: 600; text-decoration: none; }

/* ---------------------------------------------------------------- tests */
.qdots { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; }
.qdots button { width: 44px; height: 44px; border-radius: 50%; background: var(--soft); font-weight: 700; }
.qdots button.done { background: var(--ink); color: var(--white); }
.qdots button[aria-current=step] { background: var(--white); color: var(--ink); box-shadow: 0 0 0 2.5px var(--ink); }
.defs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.def-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.def-head .qn { width: 32px; height: 32px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-weight: 700; }
.def-head .d { font-family: var(--display); font-size: 20px; font-weight: 500; line-height: 1.4; }
.answer-slot { grid-column: 2; justify-self: start; min-width: 60%; display: inline-flex; align-items: center; min-height: 34px; font-weight: 600; }
.answer-slot.is-empty { border-bottom: 2px dashed var(--tag-line); color: var(--muted); font-weight: 500; font-size: 14.5px; }
.answer-slot.is-filled { border-bottom: 2px solid var(--ink); padding: 0 4px; }
.picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
@media (min-width: 600px) { .picks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pick { min-height: 48px; padding: 6px 10px; border: 2px solid var(--ink); border-radius: 12px; background: var(--white); font-weight: 600; font-size: 15.5px; }
.pick[aria-pressed=true] { border-width: 3px; }
.pick.taken:not([aria-pressed=true]) { border-style: dashed; color: var(--muted); font-weight: 500; }
.test-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.result-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 26px 18px; }
.result-head .kicker { font-size: 14px; }
.res-sec { display: flex; flex-direction: column; gap: 10px; }
.res-sec > h3 { font-size: 22px; }
.results-body { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.result-head .score { font-family: var(--display); font-size: 64px; font-weight: 600; line-height: 1; }
.result-head .msg { font-family: var(--display); font-size: 22px; font-weight: 600; }
.mistake { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1.5px solid var(--line); }
.mistake:last-child { border-bottom: 0; }
.mistake .d { font-size: 17px; font-weight: 500; }
.mistake .ans { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 6px 12px; align-items: center; }
.mistake .ans .val { justify-self: start; min-width: 0; max-width: 100%; overflow-wrap: anywhere; font-weight: 600; font-family: var(--display); font-size: 18px; }
@media (max-width: 399.98px) { .mistake .ans { grid-template-columns: minmax(0, 1fr); gap: 2px; } .mistake .ans .val { margin-bottom: 6px; } }
.mistake s { text-decoration-thickness: 2px; }
.known-list { display: flex; flex-direction: column; gap: 8px; }
.known-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1.5px solid var(--line); }
.known-row .bi .he { font-size: 16px; }
.known-row:last-child { border-bottom: 0; }
.known-row b { font-family: var(--display); font-size: 19px; font-weight: 600; }
.results { display: flex; flex-direction: column; gap: 10px; }
.result-item > summary { min-height: 60px; }
.result-item > summary { display: grid; grid-template-columns: minmax(0, 1fr) 72px 28px; align-items: center; }
.result-item .score-pill { font-family: var(--display); font-size: 20px; font-weight: 600; white-space: nowrap; text-align: center; }
.result-item .inner { display: flex; flex-direction: column; gap: 16px; }
.result-item h4 { font-size: 18px; }
.tests-banner { margin-bottom: 20px; }
.tests-banner h1 { font-size: 28px; }
.tests-banner h1 .he { display: block; font-size: 21px; }
.tests-banner p { margin-top: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 15px; }
.field .he { font-weight: 400; font-size: 13px; }
.field input { min-height: 52px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--white); font-weight: 400; font-size: 16.5px; width: 100%; }
/* F-100: every drop-down looks like the "Choose Topics One By One" fold: light border, bold text, the same arrow and padding. */
select, .field select { -webkit-appearance: none; appearance: none; width: 100%; min-height: 56px; padding: 8px 48px 8px 16px; border: 1.5px solid var(--line); border-radius: 14px; font: 700 16px/1.3 var(--body); color: var(--ink); cursor: pointer;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z' fill='%2322304F' stroke='%2322304F' stroke-width='6'/%3E%3C/svg%3E") right 16px center / 22px 22px no-repeat; }
.field input[readonly] { border-style: dashed; border-color: var(--off-line); background: var(--off-fill); }
.fields-2 { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .fields-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
.check input { width: 22px; height: 22px; accent-color: var(--ink); }

/* ---------------------------------------------------------------- review */
.counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 380px) { .counts { grid-template-columns: minmax(0, 1fr); } }
.counts .tile { min-height: 88px; }
.counts .tile b span { padding: 0 .25em; }
.mini-word { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1.5px solid var(--line); }
.mini-word:last-child { border-bottom: 0; }
.mini-word b { font-family: var(--display); font-weight: 600; font-size: 19px; }
.mini-word .acts { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-inline-start: auto; }

/* ---------------------------------------------------------------- all words */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { min-height: 48px; padding: 4px 14px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--white); display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; }
.filters button .he { font-weight: 400; font-size: 13px; }
.filters button .c { font-size: 13px; color: var(--muted); font-weight: 500; }
.filters button[aria-pressed=true] { border-width: 2.5px; }
.filters button[aria-pressed=true] .c { color: var(--ink); }
.aw { display: flex; flex-direction: column; gap: 22px; }
.aw-topic { background: var(--white); border: 1.5px solid var(--line); border-radius: 16px; padding: 14px; box-shadow: var(--shadow); }
.aw-topic .topic-head { margin-bottom: 8px; }
.aw-topic .topic-head .pair .en { font-size: 19px; } .aw-topic .topic-head .pair .he { font-size: 17px; }
.aw-topic .topic-head .pen b { font-size: 24px; }
.aw-rows { border-inline-start: 6px solid var(--pen); padding-inline-start: 12px; }
.aw-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1.5px solid var(--line); }
.aw-w { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.aw-w b { font-family: var(--display); font-weight: 600; font-size: 20px; }
.aw-he { text-align: right; font-weight: 500; font-size: 18px; align-self: center; }
.aw-d { grid-column: 1 / -1; font-size: 15.5px; }
.aw-d .lbl-b { font-weight: 700; }
.aw-d .tag { margin-inline-start: 4px; }
.aw-d .ex { margin-top: 6px; }

/* ---------------------------------------------------------------- settings and account */
.settings { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .settings { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.set-card h2 { display: flex; align-items: center; gap: 12px; font-size: 20px; }
.set-card h2 .ic-wrap { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--white); display: grid; place-items: center; flex: none; }
.set-card h2 .he { margin-left: auto; font-size: 17px; font-weight: 500; }
.set-card .stack { margin-top: 14px; }
.acct-type { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 12px; }
.acct-type b { font-family: var(--display); font-size: 19px; font-weight: 600; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: block; flex: none; }
.avatar.lg { width: 72px; height: 72px; }
.avatar.xl { width: 96px; height: 96px; }
.avatar-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.swatches button { width: 44px; height: 44px; border-radius: 50%; background: var(--c); border: 2px solid var(--white); box-shadow: 0 0 0 1.5px var(--line); }
.swatches button[aria-pressed=true] { box-shadow: 0 0 0 3px var(--ink); }
.program { display: flex; align-items: center; gap: 12px; }
.program .ic-wrap { width: 44px; height: 44px; border-radius: 50%; background: var(--cobalt); color: var(--white); display: grid; place-items: center; flex: none; }
.chip.grade { min-height: 44px; cursor: pointer; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1.5px solid var(--line); }
/* T-40: signed out, the app shows only sign-in and sign-up: no tabs, no rail, no top-bar buttons. */
body.gated .tabbar, body.gated .top-actions, body.gated .continue-bar { display: none !important; }
/* T-06: signed in without the words (no access, or they couldn't load): no tabs; the profile button stays for logging out. */
body.no-content .tabbar, body.no-content .continue-bar { display: none !important; }
@media (min-width: 900px) { body.no-content .topbar { display: flex; } body.no-content main { margin-left: auto; max-width: calc(var(--maxw) + 2 * var(--gutter)); } }
@media (min-width: 900px) { body.gated .topbar { display: flex; } }
body.gated main { margin-left: auto; padding-bottom: 48px; max-width: calc(var(--maxw) + 2 * var(--gutter)); }
.gate-intro p[lang=he] { text-align: right; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; font-weight: 400; min-height: 44px; cursor: pointer; }
.check input { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--ink); cursor: pointer; }
.check .en, .check .he { display: block; }
.check .he { text-align: right; margin-top: 2px; color: var(--muted); }
.check a { color: var(--ink); font-weight: 600; }
.parent-box { border: 2px dashed var(--tag-line); border-radius: 14px; padding: 12px 14px 14px; margin: 0; min-width: 0; }
.parent-box legend { padding: 0 6px; font-weight: 700; }
[data-for][hidden] { display: none !important; }
.invite-status { min-height: 1.4em; margin-top: -8px; font-weight: 600; }
.invite-status.student, .invite-status.teacher { color: #1D6B2C; }
.invite-status.bad { color: #8A1C1C; }
.pw-hint { margin-top: -6px; }
.pw-hint p[lang=he] { text-align: right; }
.captcha:empty { display: none; }
.legal-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 16px; font-size: 14px; }
.legal-links a { color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; }
.msg { min-height: 1.4em; font-size: 14.5px; }
.msg .en, .msg .he { display: block; }
.msg .he { text-align: right; }
.msg.error { color: #8A1C1C; font-weight: 600; }

/* ---------------------------------------------------------------- toast, dialog, celebration */
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar) + 18px); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 40;
  max-width: min(92vw, 520px); padding: 12px 18px; border-radius: 12px; background: var(--ink); color: var(--white); font-weight: 600; font-size: 15px; white-space: pre-line; text-align: center; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) { .toast { bottom: 28px; left: calc(50% + var(--rail) / 2); } }
dialog { border: 2px solid var(--ink); border-radius: 18px; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: var(--white); color: var(--ink); }
dialog::backdrop { background: rgb(34 48 79 / .55); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1.5px solid var(--line); }
.dlg-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.burst { position: fixed; z-index: 45; pointer-events: none; width: 0; height: 0; }
.burst i { position: absolute; width: 10px; height: 16px; border-radius: 3px; animation: burst .9s ease-out forwards; }
@keyframes burst { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }

/* ---------------------------------------------------------------- teacher */
.mode-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 2px 12px; border: 1.5px solid var(--ink); border-radius: 999px; font-weight: 600; font-size: 14px; background: var(--white); margin-bottom: 10px; }
.t-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .t-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.t-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.t-card h3 { display: flex; align-items: center; gap: 12px; font-size: 20px; }
.t-card h3 .ic-wrap { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--white); display: grid; place-items: center; flex: none; }
.t-card p .he { display: block; color: var(--muted); }
.builder { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1280px) { .builder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .preview-col { position: sticky; top: 16px; } }
.step-card header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.step-card header .num { width: 36px; height: 36px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-weight: 700; flex: none; }
.step-card header h2 { font-size: 19px; }
.step-card header h2 .he { font-size: 15px; }
.counter { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1.5px solid var(--line); }
.counter:last-child { border-bottom: 0; }
.counter .lbl { display: flex; flex-direction: column; }
.counter .lbl span { font-size: 14px; color: var(--muted); }
.stepper-num { display: flex; align-items: center; gap: 8px; }
.stepper-num output { min-width: 32px; text-align: center; font-family: var(--display); font-size: 22px; font-weight: 600; }
.range-row { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .range-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } .range-row .btn { grid-column: 1 / -1; justify-self: start; } }
.field-label { font-weight: 700; font-size: 15px; }
/* F-114: the chosen topics are always visible, each removable. */
.chosen { display: flex; flex-direction: column; gap: 6px; }
.topic-chip { padding: 0 10px 0 0; overflow: hidden; gap: 8px; }
.topic-chip .tn { align-self: stretch; display: grid; place-items: center; min-width: 34px; background: var(--tcolor); color: var(--ink); font-family: var(--display); font-weight: 600; }
.color-trial .topic-chip .tn { background: var(--tcolor); }
/* F-116: the preview sits on its own tinted panel, with the quiz as a white page. */
.preview-box { background: var(--soft); border-color: var(--soft); }
.preview-box .sheet { background: var(--white); border-color: var(--white); box-shadow: 0 10px 24px -14px var(--ink); padding: 18px; }
/* Topic picker (F-46): the pen-color number and the topic's name; the chosen ones get the yellow marker. */
.tchips { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .tchips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .builder .tchips { grid-template-columns: minmax(0, 1fr); } }
.tchips button { display: flex; align-items: stretch; min-height: 48px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--white); overflow: hidden; text-align: left; }
.tchips .pen { width: 44px; flex: none; display: grid; place-items: center; background: var(--pen); color: var(--white); font-family: var(--display); font-weight: 600; font-size: 17px; }
.tchips .tname { padding: 6px 10px; align-self: center; font-weight: 600; font-size: 14.5px; line-height: 1.25; }
.tchips button[aria-pressed=true] { border-width: 2.5px; }
.word-hits { display: flex; flex-direction: column; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white); overflow: hidden; }
.word-hit { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 6px 14px; text-align: left; border-bottom: 1.5px solid var(--line); }
.word-hit:last-child { border-bottom: 0; }
.word-hit[disabled] { cursor: default; }
.word-hit[disabled] .small { color: var(--muted); }
.word-hit > .small { white-space: nowrap; flex: none; }
.chip.removable { gap: 6px; min-height: 44px; cursor: pointer; }
.ver-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.ver-tabs button { min-height: 44px; padding: 4px 14px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--white); font-weight: 600; }
.ver-tabs button[aria-pressed=true] { border-width: 2.5px; }
.sheet { border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; font-size: 15px; }
.sheet h3 { font-size: 19px; }
.sheet .meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 10px; color: var(--muted); font-size: 14px; }
.sheet .part + .part { margin-top: 14px; }
.sheet h4 { font-size: 16px; margin-bottom: 4px; }
.sheet .instr-line .he { display: block; text-align: right; color: var(--muted); }
.sheet .qblock { margin-top: 10px; }
.sheet .qopts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0; }
.sheet .qdef { display: flex; gap: 8px; margin-top: 4px; }
.sheet .blank { display: inline-block; min-width: 70px; border-bottom: 1.5px solid var(--ink); margin: 0 4px; text-align: center; font-weight: 600; }
.sheet ol { margin: 6px 0 0; padding-inline-start: 22px; }
.sheet .bank { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 10px; border: 1.5px dashed var(--ink); border-radius: 8px; margin: 6px 0; }
.notice { display: flex; gap: 12px; align-items: flex-start; }
/* Class Screen */
#cs-root:empty { display: none; }
.cs { position: fixed; inset: 0; z-index: 60; background: var(--paper); display: flex; flex-direction: column; padding: 16px var(--gutter); gap: 12px; overflow-y: auto; }
.cs-top, .cs-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cs-top .topic-head { flex: 1 1 320px; }
.cs-stage { width: min(1000px, 100%); background: var(--white); border-radius: 22px; border-top: 14px solid var(--tcolor); box-shadow: var(--shadow); padding: clamp(20px, 4vw, 48px); }
.cs-stage .cs-he { color: var(--teal); }
.cs-stage .cs-pos { display: inline-block; margin-top: 10px; padding: 2px 14px; border-radius: 999px; background: var(--tcolor); color: var(--ink); font-weight: 600; }
.cs-count { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cs-dots { display: flex; flex-wrap: wrap; gap: 5px; }
.cs-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--soft); }
.cs-dots i.done { background: var(--teal); }
.cs-dots i.now { background: var(--yellow); box-shadow: 0 0 0 2px var(--ink); }
.cs .btn.primary { background: var(--teal); border-color: var(--teal); }
.cs-main { flex: 1; display: grid; place-items: center; text-align: center; }
.cs-word { font-family: var(--display); font-weight: 600; font-size: clamp(44px, 9vw, 110px); line-height: 1.05; }
.cs-pos { color: var(--muted); font-size: clamp(16px, 2vw, 22px); margin-top: 6px; }
.cs-he { font-family: var(--display); font-weight: 500; font-size: clamp(32px, 6vw, 70px); margin-top: 18px; }
.cs-def { font-size: clamp(18px, 2.4vw, 30px); max-width: 30ch; margin: 12px auto 0; }
/* F-51: the example stands apart from the definition. */
.cs-ex { max-width: 34ch; margin: 1.6em auto 0; padding-top: 1em; border-top: 2px dashed var(--line); font-style: italic; font-size: clamp(17px, 2vw, 26px); color: var(--muted); }
.cs-ex b { color: var(--ink); }
.cs-hidden { margin-top: 28px; padding: 16px 24px; border: 2px dashed var(--ink); border-radius: 14px; font-weight: 600; }

/* ---------------------------------------------------------------- print (F-40): measured pages, no fixed heights */
#print-root { display: none; }
#print-measure { position: absolute; left: -10000px; top: 0; width: 186mm; visibility: hidden; }
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; }
  .shell, .topbar, .tabbar, .toast, dialog, #cs-root, .skip, .burst { display: none !important; }
  #print-root { display: block; }
  .mk { background-size: 100% 100% !important; transition: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.p-sheet { width: 186mm; font-size: 10pt; line-height: 1.35; color: #000; display: flex; flex-direction: column; gap: 3mm; }
@media print { .p-sheet { break-after: page; } .p-sheet:last-child { break-after: auto; } }
.p-head, .p-foot { display: flex; justify-content: space-between; gap: 6mm; font-size: 9pt; color: #333; }
.p-topic { break-inside: avoid; }
.p-topic .topic-head { border-radius: 0; --tbg: var(--ink); background: linear-gradient(90deg, var(--ink) 0 16mm, var(--tcolor) 16mm); color: var(--ink); grid-template-columns: 16mm minmax(0, 1fr); }
.p-topic .topic-head .pen { padding: 1.5mm 1mm; background: var(--ink); color: var(--white); }
.p-topic .topic-head .pair { background: var(--tcolor); color: var(--ink); }
.p-topic .topic-head .pen b { font-size: 16pt; }
.p-topic .topic-head .pen .tl { font-size: 7pt; }
.p-topic .topic-head .pair { padding: 2mm 4mm; }
.p-topic .topic-head .pair .en { font-size: 13pt; } .p-topic .topic-head .pair .he { font-size: 12pt; }
.p-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 1.5mm; }
.p-table td { vertical-align: top; padding: 1.2mm 1.6mm; border-bottom: .3mm solid #CFC7B4; }
.p-table col.w { width: 30mm; } .p-table col.h { width: 32mm; }
.p-word b { font-size: 11.5pt; color: var(--ink); display: block; }
.p-word small { color: #333; font-size: 8.5pt; }
.p-mean .p-ex { display: block; font-style: italic; color: #333; margin-top: .8mm; }
.p-mean .p-ex b { font-style: italic; }
.p-he { text-align: right; font-size: 11pt; }
.p-recall { border: .5mm solid var(--ink); border-radius: 2.5mm; padding: 1.5mm 2.5mm; font-size: 8.5pt; background: var(--yellow); }
.p-recall p + p { margin-top: 1mm; text-align: right; }
/* teacher print: quizzes and word cards */
.pq h1 { font-size: 16pt; } .pq h2 { font-size: 12.5pt; margin-top: 3mm; }
.pq-meta { display: flex; gap: 10mm; }
.pq .instr-line .he { display: block; text-align: right; }
.pq .qb { break-inside: avoid; margin-top: 2mm; }
.pq .qo { display: flex; flex-wrap: wrap; gap: 1mm 6mm; margin: 1mm 0; }
.pq .qd { display: flex; gap: 2mm; margin-top: 1mm; }
.pq .ln { display: inline-block; width: 12mm; border-bottom: .3mm solid #000; }
.pq .bank { display: flex; flex-wrap: wrap; gap: 1mm 6mm; border: .4mm solid #000; padding: 2mm; border-radius: 2mm; }
.pq ol { margin: 1mm 0; padding-inline-start: 6mm; }
.pq ol li { margin-top: 1.5mm; break-inside: avoid; }
.pc { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 62mm; border-top: .3mm dashed #999; border-left: .3mm dashed #999; }
.pc > div { border-right: .3mm dashed #999; border-bottom: .3mm dashed #999; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4mm; gap: 1.5mm; overflow: hidden; position: relative; }
.pc .band { position: absolute; top: 0; left: 0; right: 0; height: 9mm; display: flex; align-items: center; justify-content: space-between; padding: 0 3mm; font-size: 8.5pt; font-weight: 700; background: var(--tcolor); color: var(--ink); }
.pc .cw { margin-top: 6mm; }
.pc .cex { font-size: 9pt; font-style: italic; color: #333; }
.pc.bw .band { background: #fff; border-bottom: .4mm solid #000; }
.pc.color .ch { color: var(--cobalt); }
.pc .cw { font-family: var(--display); font-size: 20pt; font-weight: 600; }
.pc .cp, .pc .ct { font-size: 9pt; color: #333; }
.pc .ch { font-size: 17pt; font-weight: 500; }
.pc .cd { font-size: 10pt; }

/* ================================================================ Color Trial (F-56, 09-28; a trial, not decided: D-43)
   Switch in Settings → Testing Tools; without it the app is plain Marker & Pen.
   - Markers still mean only "marked" or "current".
   - Pens (ink colors) now color the interface, one per area: learning = cobalt, Review = teal, Tests = berry,
     All Words = violet; Settings and Account stay ink. They fill primary buttons, progress bars, icon circles
     and done steps, and color each tab's icon.
   - Topics use the original 25 topic colors (full strength, with ink text) instead of the four pens. */
.color-trial body { --accent: var(--ink); }
.color-trial body[data-area=learn] { --accent: var(--cobalt); }
.color-trial body[data-area=review] { --accent: var(--teal); }
.color-trial body[data-area=tests] { --accent: var(--berry); }
.color-trial body[data-area=words] { --accent: var(--violet); }
.color-trial .btn.primary { background: var(--accent); border-color: var(--accent); }
.color-trial .btn.primary:active:not([disabled]) { background: var(--ink); border-color: var(--ink); }
.color-trial .bar { border-color: var(--accent); }
.color-trial .bar i { background: var(--accent); }
.color-trial .set-card h2 .ic-wrap, .color-trial .t-card h3 .ic-wrap { background: var(--accent); }
.color-trial .steps .done .num { background: var(--accent); }
.color-trial .page-head h1::after, .color-trial .tests-banner h1::after { content: ""; flex: 0 0 100%; height: 6px; margin-top: 8px; background: linear-gradient(90deg, var(--accent) 0 56px, transparent 56px); border-radius: 3px; }
.color-trial .next-card { border-top: 6px solid var(--accent); }
.color-trial .tile { border-left: 6px solid var(--ink); }
.color-trial .tile[href="#/topics"] { border-left-color: var(--cobalt); }
.color-trial .tile[href="#/review"] { border-left-color: var(--teal); }
.color-trial .tile[href="#/tests"] { border-left-color: var(--berry); }

.color-trial .set-card:nth-child(4n+1) .ic-wrap { background: var(--cobalt); }
.color-trial .set-card:nth-child(4n+2) .ic-wrap { background: var(--teal); }
.color-trial .set-card:nth-child(4n+3) .ic-wrap { background: var(--berry); }
.color-trial .set-card:nth-child(4n+4) .ic-wrap { background: var(--violet); }
.color-trial .t-card:nth-child(1) .ic-wrap { background: var(--berry); }
.color-trial .t-card:nth-child(2) .ic-wrap { background: var(--teal); }
.color-trial .t-card:nth-child(3) .ic-wrap { background: var(--violet); }
.color-trial .t-card:nth-child(4) .ic-wrap { background: var(--cobalt); }
/* Topic identity: the original 25 colors with ink text. */
.color-trial .topic-card .pen, .color-trial .topic-head .pen, .color-trial .tchips .pen { background: var(--tcolor); color: var(--ink); }
.color-trial .aw-rows { border-inline-start-color: var(--tcolor); }
.color-trial .topic-card { border-left: 0; }