/* Shared Ukrainian palette. Color lesson swatches and watercolor artwork retain their hues. */
:root {
  --blue: #0057B7;
  --yellow: #FFD700;
  --navy: #173B66;
  --sky: #E8F3FF;
  --wheat: #F5E6C8;
  --linen: #FFFCF5;
  --green: #54764D;
  --red: #B63F49;
  --border: #E8F3FF;
  --muted: #173B66;
  --correct: var(--green);
  --incorrect: var(--red);
  color: var(--navy);
  background: var(--linen);
  accent-color: var(--blue);
}
body { background: var(--linen); color: var(--navy); }
header {
  position: relative;
  background: var(--navy);
  color: var(--linen);
  border-bottom: 4px solid var(--yellow);
  padding-bottom: 26px;
}
/* A narrow cross-stitch rhythm, kept outside the learning content. */
header::after {
  content: "";
  position: absolute;
  bottom: 4px; left: 5%; right: 5%; height: 5px;
  opacity: .55;
  background: repeating-linear-gradient(45deg,transparent 0 5px,var(--yellow) 5px 7px,transparent 7px 12px),repeating-linear-gradient(-45deg,transparent 0 5px,var(--sky) 5px 7px,transparent 7px 12px);
  pointer-events: none;
}
.flag { background: linear-gradient(var(--blue) 50%,var(--yellow) 50%); }
.edition { color: var(--sky); }
h1,h2,h3,.note strong { color: var(--navy); }
h1 em { color: var(--blue); }
.page-nav a { color: var(--linen); border-color: var(--sky); min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.page-nav a[aria-current],.page-nav a:hover { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }
:is(button,a.ue-tab).control { background: var(--blue); color: white; border-color: var(--blue); }
select.control { background: var(--linen); color: var(--navy); border-color: var(--blue); }
select option { background: var(--linen); color: var(--navy); }
.control,.filter { min-height: 44px; }
.filter,.alphabet-tabs :is(button,a.ue-tab),.noun-tabs :is(button,a.ue-tab),.study-decks :is(button,a.ue-tab).control { background: var(--sky); color: var(--navy); border-color: var(--border); }
.filter.active,.alphabet-tabs :is(button,a.ue-tab)[aria-selected=true],.noun-tabs :is(button,a.ue-tab)[aria-selected=true],.study-decks :is(button,a.ue-tab)[aria-pressed=true] { background: var(--yellow); color: var(--navy); border-color: var(--blue); box-shadow: inset 0 -3px var(--blue); }
.listen,.study-actions .draw { background: var(--yellow); color: var(--navy); border-color: var(--yellow); min-height: 44px; }
.study-actions .discard { background: var(--blue); color: white; border-color: var(--blue); }
.panel,.count-player,.color-card { background: var(--navy); color: var(--linen); }
.panel h2,.count-player h2,.color-card h2 { color: var(--linen); }
.panel .eyebrow,.panel .label,.panel .status,.panel .big small,.count-player .chosen-guide,.count-status,.color-card .eyebrow,.color-card #color-guide,#color-status,.mix-note { color: var(--sky); }
.panel .name,.phrase-en,.count-player .chosen-digit { color: var(--yellow); }
.color-options .control { border-color: var(--sky); }
.tile { --color: var(--sky); --edge: var(--border); }
.tile.vowel { --color: var(--wheat); --edge: var(--border); }
.tile.sign { --color: var(--linen); --edge: var(--blue); }
.tile.selected,.number-tile[aria-pressed=true],.phrase-card[aria-pressed=true],.color-element[aria-pressed=true],.neutral[aria-pressed=true] { outline-color: var(--blue); }
.tile .num,.tile .speaker,.glyph small,.number-tile .sound { opacity: 1; }
.phrase-card[aria-pressed=true] { background: var(--wheat); }
.function-button,.tens-grid .number-tile { background: var(--sky); border-color: var(--border); }
.function-button[aria-pressed=true],.jump-button[aria-pressed=true] { background: var(--yellow)!important; color: var(--navy)!important; border-color: var(--blue)!important; outline-color: var(--blue); }
.next-group { background: var(--blue)!important; color: white!important; border-color: var(--blue)!important; }
.next-group .english,.next-group .guide { color: white!important; }
.next-group .digit { color: var(--yellow); }
.word-choice[aria-pressed=true] { background: var(--yellow); outline-color: var(--blue); border-color: var(--blue); }
.study-card { background: var(--linen); border: 2px solid var(--sky); box-shadow: 0 8px 28px #173B6610; }
.study-card .study-word { border-top: 4px solid var(--yellow); color: var(--navy); }
.study-sidebar { background: var(--sky); }
.study-help { background: var(--wheat); }
.study-keys :is(button,a.ue-tab) { background: var(--linen); border-color: var(--blue); }
.study-keys :is(button,a.ue-tab):active { background: var(--yellow); }
.pile-back { background: repeating-linear-gradient(45deg,var(--navy) 0 7px,var(--blue) 7px 8px); color: var(--yellow); border-color: var(--sky); box-shadow: 3px 3px 0 var(--wheat),6px 6px 0 var(--sky); }
.discard-target .pile-back { background: repeating-linear-gradient(45deg,var(--wheat) 0 7px,var(--yellow) 7px 8px); color: var(--navy); }
#progress,.study-mini-pile strong,.study-counts strong { color: var(--blue); font-weight: bold; }
progress { accent-color: var(--blue); }
.correct,[data-result=correct] { color: var(--green); border-color: var(--green); }
.incorrect,[data-result=incorrect] { color: var(--red); border-color: var(--red); }
:is(button,a.ue-tab):focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; box-shadow: 0 0 0 3px var(--linen); }
header a:focus-visible { outline-color: var(--yellow); box-shadow: 0 0 0 3px var(--navy); }
:is(button,a.ue-tab):not(:disabled):hover { filter: brightness(.97); }
@media(max-width:450px) { .page-nav { gap: 5px; } .page-nav a { flex: 1; padding-inline: 8px; } }
@media(prefers-reduced-motion:reduce) { .tile,.number-tile,.phrase-card { transition: none; } }
.color-options select.control { background: var(--linen); color: var(--navy); }

.count-player .eyebrow { color: var(--sky); }