/**
 * App styles — the `@layer app` slot.
 *
 * HanziApp's own structural and domain CSS. Sits below `theme`, so a palette
 * can restate a colour or a decoration without fighting these rules, and above
 * `components`, so a `ui-*` / `civ-*` element can still be placed in a layout.
 *
 * Tokens belong in `theme.css`; setting one here will not win.
 */

@layer app {
  /* `ui-search-field` reflects `busy` and renders no indicator of its own, so
     the spinner beside it is this app's choice rather than the framework's. */
  ui-search-field + ui-spinner {
    visibility: hidden;
  }

  ui-search-field[busy] + ui-spinner {
    visibility: visible;
  }

  ui-search-field input {
    font-size: var(--f3);
    height: 2em;
  }

  /* `color-scheme` is a declaration, not a token, so it lives here rather than
     in the palette — the framework moved its own out of `themes/default.css`
     for the same reason. Light is the default; the boot script sets an inline
     `colorScheme` for an explicit choice, and this covers the rest. */
  :root {
    color-scheme: light;
  }

  :root[data-theme='dark'] {
    color-scheme: dark;
  }

/**
 * Hanzi App Layout & Component Overrides
 */

/* Global layout customizations */
main {
  user-select: none;
}

r-search,
r-main {
  max-width: var(--max-width-sm);
}

r-search {
  padding: var(--s3);
  width: 100%;
}

main.study,
r-reference-subject,
r-study,
main:has(r-study) {
  max-width: unset;
  padding: var(--s0);
}

main.study .card-details,
r-reference-subject .card-details,
r-study .card-details {
  max-width: var(--max-width-sm);
  padding: var(--s3);
}

h-reference-header,
h-reference-subhead {
  display: block;
}

h-home-header {
  border-bottom: none;
  display: block;
  padding: var(--s3);
}

header nav {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: auto auto;
  max-width: var(--nav-max-width);
}

header nav ul {
  align-items: center;
  display: flex;
  gap: var(--s2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Language-specific font classes */
.font-Jyutping {
  font-family: var(--font-family-jyutping);
}

.font-Pinyin {
  font-family: var(--font-family-base);
}

.font-zh_CN,
.font-zh_HK,
.font-zh_TW,
.font-zh_CN-answer,
.font-zh_TW-answer,
.font-zh_HK-answer {
  font-family: var(--font-family-base);
}

/* Navigation title */
nav .title {
  border-bottom: 4px solid var(--purple);
  color: var(--purple);
  font-size: var(--f3);
  font-weight: var(--fw-bold);
  margin: 0 var(--s3) 0 0;
  padding: 0;
}

nav .icon {
  font-size: var(--f3);
  margin-right: var(--s3);
}

/* Subject tile component overrides */
ui-card {
  border: 1px solid currentColor;
  border-radius: var(--br2);
  cursor: pointer;
  display: inline-block;
  font-size: var(--f5);
  line-height: 1.5;
  margin: var(--s1);
  padding: var(--s1);
  text-align: center;
  transition: all var(--transition-base);
}

ui-card[state='locked'] {
  opacity: 0.6;
}

ui-card[state='started'][type='radical'] {
  border-color: var(--blue);
  color: var(--blue);
}

ui-card[state='started'][type='character'] {
  border-color: var(--pink);
  color: var(--pink);
}

ui-card[state='started'][type='vocabulary'] {
  border-color: var(--purple);
  color: var(--purple);
}

ui-card[state='passed'][type='radical'] {
  background-color: var(--blue-dots-bg);
  background-image: var(--dot-pattern-purple);
  border: 1px solid var(--dot-border-color);
  color: var(--blue-tint-text);
}

ui-card[state='passed'][type='character'] {
  background-color: var(--pink-dots-bg);
  background-image: var(--dot-pattern-pink);
  border: 1px solid var(--dot-border-color);
  color: var(--pink-tint-text);
}

ui-card[state='passed'][type='vocabulary'] {
  background-color: var(--purple-dots-bg);
  background-image: var(--dot-pattern-purple);
  border: 1px solid var(--dot-border-color);
  color: var(--purple-tint-text);
}

/* Study button components */
.study-buttons {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin: 0 auto var(--s4) auto;
  max-width: var(--main-max-width);
  padding: var(--s2) 0 var(--s4) 0;
}

.study-button,
.game-button {
  text-align: center;
  width: 100%;
  max-width: var(--main-max-width);
  margin: 0 auto;
  padding: 0 var(--s3);
}

.game-button {
  margin: var(--s3) auto;
}

.study-button button,
.game-button button {
  border: none;
  border-radius: var(--br2);
  box-shadow:
    var(--shadow-ink) 1px 1px 0px,
    var(--shadow-ink) 2px 2px 0px,
    var(--shadow-ink) 3px 3px 0px;
  cursor: pointer;
  font-size: var(--f4);
  font-weight: var(--fw-medium);
  height: 3rem;
  max-width: var(--main-max-width);
  transition: all var(--transition-fast);
  width: 100%;
}

.study-button button:active {
  box-shadow: var(--shadow-ink) 1px 1px 0px;
  transform: translate(2px, 2px);
}

.study-button-disabled {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: var(--br-base);
  color: var(--secondary);
  display: flex;
  font-size: var(--f4);
  height: 3rem;
  justify-content: center;
  opacity: 0.3;
  padding: var(--s3);
  width: 100%;
}

/* Settings page layout */
ui-settings-item {
  align-items: center;
  border-bottom: 1px dotted var(--primary-dull);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--f6);
  justify-content: space-between;
  opacity: 0.1;
  padding: var(--s3);
  width: 100%;
}

ui-settings-item:last-child {
  border-bottom: none;
}

ui-settings-item label {
  display: block;
  font-weight: var(--fw-bold);
  padding: var(--s2) 0;
}

/* Search results styling */
ui-search-result {
  border-radius: var(--br2);
  cursor: pointer;
  display: block;
  list-style: none;
  overflow: hidden;
  padding: var(--s1);
  text-overflow: ellipsis;
  transition: background-color var(--transition-base);
  width: 100%;
}

ui-search-result:hover {
  background-color: rgba(231, 222, 237, 0.3);
}

/* Progress section styling */
ui-progress-section {
  display: block;
  padding-top: var(--s1);
}

ui-progress-section summary {
  font-weight: var(--fw-medium);
  margin-bottom: var(--s0);
}

ui-progress-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s0);
}

/* Color utility classes */
.purple {
  color: var(--purple);
}

.purple-border {
  border: 1px solid var(--purple);
  color: var(--purple);
}

.purple-bg {
  background-color: var(--purple-bg);
}

.purple-inverse {
  background-color: var(--purple-solid);
  color: var(--inverse-text);
}

.purple-dots {
  background-color: var(--purple-dots-bg);
  background-image: var(--dot-pattern-purple);
  border: 1px solid var(--dot-border-color);
  color: var(--purple-tint-text);
}

.blue {
  color: var(--blue);
}

.blue-border {
  border: 1px solid var(--blue);
  color: var(--blue);
}

.blue-bg {
  background-color: var(--blue-bg);
}

.blue-inverse {
  background-color: var(--blue-solid);
  color: var(--inverse-text);
}

.blue-dots {
  background-color: var(--blue-dots-bg);
  background-image: var(--dot-pattern-blue);
  border: 1px solid var(--dot-border-color);
  color: var(--blue-tint-text);
}

.blue-shadow {
  box-shadow: var(--blue) 3px 3px 0px 0px;
}

.pink {
  color: var(--pink);
}

.pink-border {
  border: 1px solid var(--pink);
  color: var(--pink);
}

.pink-bg {
  background-color: var(--pink-bg);
}

.pink-inverse {
  background-color: var(--pink-solid);
  color: var(--inverse-text);
}

/* Right/wrong feedback buttons (games) — previously unstyled */
.red-inverse {
  background-color: var(--red-solid);
  color: var(--inverse-text);
}

.green-inverse {
  background-color: var(--green-solid);
  color: var(--inverse-text);
}

/* Colored text on the matching tint: deep brand color in light, body
   color in dark (a token swap — see the dark palette blocks) */
.purple.purple-bg {
  color: var(--purple-tint-text);
}

.blue.blue-bg {
  color: var(--blue-tint-text);
}

.pink.pink-bg {
  color: var(--pink-tint-text);
}

.pink-dots {
  background-color: var(--pink-dots-bg);
  background-image: var(--dot-pattern-pink);
  border: 1px solid var(--dot-border-color);
  color: var(--pink-tint-text);
}

.gray {
  color: gray;
}

.white {
  color: white;
}

.green-bg {
  background-color: hsl(var(--greenH), var(--greenS), var(--greenL));
  color: hsl(0, 0%, 13%);
}

.red-bg {
  background-color: hsl(var(--redH), var(--redS), var(--redL));
  color: hsl(0, 0%, 13%);
}

.blurred {
  background-color: var(--redact-bg);
  color: var(--redact-color);
  text-shadow: var(--redact-shadow);
}

.purple-shadow {
  box-shadow: var(--purple) 3px 3px 0px 0px;
}

.pink-shadow {
  box-shadow: var(--pink) 3px 3px 0px 0px;
}

/* Study page headers */
.study-header {
  padding: var(--s1);
  text-align: center;
}

.study-header .left {
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
  float: left;
  font-weight: bold;
  padding: var(--s1);
  width: unset;
}

h-reference-header .study-header .left {
  font-size: var(--f3);
}

.study-header .right {
  cursor: pointer;
  float: right;
  font-weight: bold;
  padding: var(--s1);
}

.study-header h1 {
  font-size: var(--f1);
  padding-bottom: var(--s1);
  padding-top: var(--s5);
}

.study-subheader {
  padding: var(--s2);
  font-weight: var(--fw-bold);
  font-size: var(--f4);
  text-align: center;
}

/* Tooltip component */
.tooltip {
  display: inline-block;
  position: relative;
}

.tooltip label {
  border-bottom: 1px dotted currentColor;
}

.tooltip .tooltiptext {
  background-color: #555;
  border-radius: 6px;
  bottom: 125%;
  color: #fff;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  padding: 10px;
  position: absolute;
  text-align: left;
  transition: opacity 0.3s;
  visibility: hidden;
  width: 200px;
  z-index: 1;
}

.tooltip .tooltiptext::after {
  border-color: #555 transparent transparent transparent;
  border-style: solid;
  border-width: 5px;
  content: '';
  left: 20%;
  position: absolute;
  top: 100%;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
  visibility: visible;
}

/* Assignment styling */
.assignment {
  list-style: none;
}

.assignment:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

/* Dialog styling */
ui-dialog dialog>article {
  padding: var(--s4);
}

ui-dialog dialog>article table.center {
  margin: var(--s3) auto;
  border-collapse: collapse;
}

ui-dialog dialog>article table.center td {
  padding: var(--s2) var(--s3);
  text-align: center;
}

/* Enhanced kbd styling */
kbd {
  background-color: var(--surface-muted);
  border-radius: var(--br2);
  padding: var(--s1);
}

/* Stats section */
section.stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--s2);
  padding: var(--s0) var(--s3);
  padding-bottom: var(--s0);
  width: 100%;
}

.level h3,
.totals h3 {
  padding: var(--s0);
  margin-bottom: var(--s2);
}

.totals {
  text-align: right;
}

.level button {
  font-size: var(--f6);
  height: 2em;
  padding: 0;
  width: 2em;
}

.progress-header {
  align-items: start;
  display: flex;
  margin-bottom: 0;
  padding-bottom: 0;
}

.progress-header h3 {
  cursor: pointer;
  padding-right: var(--s3);
}

/* Grade system */
.grade-system .stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: var(--s2) var(--s0) var(--s3) var(--s0);
  margin-top: var(--s0);
}

.grade-system h5 {
  margin: var(--s2) 0;
}

.grade-system .grade-level {
  cursor: pointer;
  border: 1px solid transparent;
  padding: var(--s0) var(--s1);
}

/* Study page layouts */
main.study,
r-study {
  min-width: 300px;
}

main.study .done,
r-study .done {
  bottom: 100px;
  left: 50%;
  padding: var(--s4);
  position: fixed;
  text-align: center;
  transform: translateX(-50%);
}

main.study .done button,
r-study .done button {
  font-size: var(--f4);
  width: 100%;
}

/* Card details */
.card-details {
  margin: auto auto;
  max-width: var(--main-max-width);
  padding: var(--s2);
}

.card-details details {
  padding: var(--s2);
}

.card-details details summary {
  cursor: pointer;
  font-weight: var(--fw-bold);
}

.card-details details h3 {
  padding-top: var(--s3);
  text-align: center;
}

.card-details details.example {
  padding: var(--s1);
}

.card-details details h5 {
  margin-bottom: 0;
  padding-bottom: 0;
}

.subject-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.chip-tooltip-wrap {
  display: inline-block;
  position: relative;
}

.chip-tooltip {
  background: var(--body);
  border-radius: var(--br-sm);
  bottom: 100%;
  color: var(--background);
  font-size: var(--f7);
  font-weight: var(--fw-medium);
  left: 50%;
  margin-bottom: var(--s1);
  opacity: 0;
  padding: var(--s1) var(--s2);
  pointer-events: none;
  position: absolute;
  text-shadow: none;
  transform: translateX(-50%);
  transition: opacity var(--transition-fast);
  visibility: hidden;
  white-space: nowrap;
  z-index: var(--z-popover);
}

.chip-tooltip-wrap:hover .chip-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Headers sit at the very top of the viewport, so an above-anchored
   tooltip would render off-screen; flip it below the character instead. */
.study-header .chip-tooltip {
  bottom: auto;
  margin-bottom: 0;
  margin-top: var(--s1);
  top: 100%;
}

/* Settings page */
main.settings,
r-settings-about,
r-about,
r-assignments,
r-downloads,
r-settings {
  display: flex;
  flex-direction: column;
  margin: auto;
  max-width: var(--main-max-width);
  padding: var(--s3);
}

main.settings section,
r-settings-about section,
r-settings section,
r-downloads section,
r-assignments section {
  margin-bottom: var(--s5);
}

main.settings section > p,
r-settings-about section > p,
r-settings section > p,
r-downloads section > p,
r-assignments section > p {
  opacity: 0.6;
  margin-bottom: var(--s3);
  font-size: var(--f6);
}

main.settings .item,
r-settings .item,
r-downloads .item,
r-assignments .item {
  display: flex;
  align-items: center;
  padding: var(--s3);
  width: 100%;
  justify-content: space-between;
  border-bottom: 1px dotted var(--primary-dull);
}

main.settings .item:last-child,
r-settings .item:last-child,
r-downloads .item:last-child,
r-assignments .item:last-child {
  border-bottom: none;
}

main.settings .item label,
r-settings .item label,
r-downloads .item label,
r-assignments .item label {
  font-weight: bold;
  padding: var(--s0) var(--s2);
  display: block;
  flex-shrink: 0;
}

main.settings .item input,
r-settings .item input,
r-downloads .item input,
r-assignments .item input {
  width: unset;
}

main.settings .item input[type='number'],
r-settings .item input[type='number'],
r-downloads .item input[type='number'],
r-assignments .item input[type='number'] {
  border: 1px solid currentColor;
  padding: var(--s2);
  border-radius: var(--br2);
  display: block;
  width: 5em;
}

main.settings .item input[type='checkbox'],
r-settings .item input[type='checkbox'],
r-downloads .item input[type='checkbox'],
r-assignments .item input[type='checkbox'] {
  height: 2.5em;
  width: 2.5em;
  accent-color: var(--blue);
  cursor: pointer;
}

main.settings .full-button,
r-settings .full-button,
r-downloads .full-button,
r-assignments .full-button {
  padding: var(--s3);
  width: 100%;
  text-align: center;
}

main.settings .full-button button,
r-settings .full-button button,
r-downloads .full-button button,
r-assignments .full-button button {
  font-size: var(--f4);
  width: 100%;
  max-width: var(--main-max-width);
  height: 3em;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  font-weight: bold;
  transition: all var(--transition-fast);
}

main.settings select,
r-settings select,
r-downloads select,
r-assignments select {
  border: 1px solid currentColor;
  padding: var(--s2);
  border-radius: var(--br2);
  background: transparent;
  color: inherit;
  font-size: var(--f5);
  cursor: pointer;
  box-shadow: var(--blue-shadow);
}

main.settings .item select,
r-settings .item select,
r-downloads .item select,
r-assignments .item select {
  min-width: 12em;
}

main.settings .half-button,
r-settings .half-button,
r-downloads .half-button,
r-assignments .half-button {
  justify-content: end;
}

/* Settings navigation link (like ClimbApp) */
.settings-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s3);
  border: 1px solid currentColor;
  border-radius: var(--br2);
  text-decoration: none;
  color: inherit;
  font-weight: bold;
  transition: opacity var(--transition-fast);
  margin-top: var(--s3);
  box-shadow: var(--blue-shadow);
}

.settings-nav-link:hover {
  opacity: 0.8;
}

.settings-nav-link span {
  font-size: var(--f5);
}

/* ui-sync component styling in settings */
main.settings ui-sync,
r-settings ui-sync {
  display: block;
  padding: var(--s2) 0;
}

main.settings ui-sync form,
r-settings ui-sync form {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

main.settings ui-sync label,
r-settings ui-sync label {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  cursor: default;
  border: none;
  padding: 0;
  font-weight: normal;
}

main.settings ui-sync label span,
r-settings ui-sync label span {
  font-size: var(--f6);
  opacity: 0.7;
}

main.settings ui-sync input[type='text'],
r-settings ui-sync input[type='text'] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid currentColor;
  padding: var(--s2);
  border-radius: var(--br2);
  background: transparent;
  color: inherit;
}

main.settings ui-sync .ui-sync__status,
r-settings ui-sync .ui-sync__status {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  font-size: var(--f6);
}

main.settings ui-sync .ui-sync__status small,
r-settings ui-sync .ui-sync__status small {
  opacity: 0.6;
}

main.settings ui-sync .ui-sync__actions,
r-settings ui-sync .ui-sync__actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

main.settings ui-sync .ui-sync__actions button,
r-settings ui-sync .ui-sync__actions button {
  border: 1px solid currentColor;
  background: transparent;
  padding: var(--s2) var(--s3);
  cursor: pointer;
  font-weight: bold;
  border-radius: var(--br2);
  font-size: var(--f6);
}

/* ui-data-actions component styling in settings */
main.settings ui-data-actions,
r-settings ui-data-actions {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  padding: var(--s2) 0;
}

main.settings ui-data-actions button,
r-settings ui-data-actions button {
  border: 1px solid currentColor;
  background: transparent;
  padding: var(--s2) var(--s3);
  cursor: pointer;
  font-weight: bold;
  border-radius: var(--br2);
  font-size: var(--f6);
}

.answer-input {
  border: none;
  text-align: center;
  width: 90%;
  max-width: var(--main-max-width);
  position: relative;
  margin: var(--s2) auto auto auto;
}

.answer-input p {
  font-size: var(--f4);
  border-radius: var(--br2);
  margin: var(--s2) var(--s3) var(--s2) var(--s3);
  padding: var(--s0);
  display: flex;
}

.answer-input input[type='text'] {
  height: 100%;
  font-size: var(--f4);
  text-align: center;
  padding: var(--s1);
  border-radius: var(--br2);
  outline: none;
  border: none;
  box-shadow: none;
  flex-grow: 1;
  margin: 0;
}

.answer-input input[type='submit'] {
  border: none;
  outline: none;
  box-shadow: none;
  right: 10px;
  background-color: transparent;
  font-weight: var(--fw-bold);
  padding: 0 var(--s3) 0 var(--s3);
  height: 100%;
  position: absolute;
  cursor: pointer;
}

.redo {
  margin-left: var(--s2);
  display: block;
}

.search-item:hover {
  background-color: rgba(231, 222, 237, 0.3);
}

/* About page */
r-settings-about article {
  padding: var(--s3);
}

r-settings-about article > p {
  font-size: var(--f6);
  opacity: 0.6;
  margin-bottom: var(--s2);
}

r-settings-about .made-by {
  text-align: center;
  padding-top: var(--s4);
}

r-settings-about .made-by a {
  font-size: var(--f3);
  color: var(--body);
  text-decoration: none;
  font-weight: var(--fw-bold);
}

r-settings-about .ko-fi {
  cursor: pointer;
  border: none;
  height: 36px;
}

r-settings-about section {
  margin-bottom: var(--s4);
}

r-settings-about h2 {
  font-size: var(--f4);
  font-weight: var(--fw-bold);
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px dotted var(--primary-dull);
}

r-settings-about ul {
  list-style: none;
  padding: 0;
  margin: var(--s3) 0;
}

r-settings-about li {
  padding: var(--s2) var(--s3);
  border-bottom: 1px dotted var(--primary-dull);
}

r-settings-about li:last-child {
  border-bottom: none;
}

r-settings-about a {
  color: var(--blue);
  text-decoration: none;
}

r-settings-about a:hover {
  opacity: 0.8;
}

r-settings-about details {
  margin-bottom: var(--s2);
}

r-settings-about details summary {
  cursor: pointer;
  font-weight: var(--fw-bold);
  padding: var(--s2) var(--s3);
  border-bottom: 1px dotted var(--primary-dull);
}

r-settings-about details section {
  margin-bottom: var(--s2);
}

r-settings-about details button {
  border: 1px solid currentColor;
  background: transparent;
  padding: var(--s1) var(--s3);
  cursor: pointer;
  font-weight: bold;
  border-radius: var(--br2);
  font-size: var(--f6);
  margin-bottom: var(--s2);
}

r-settings-about pre {
  text-wrap: wrap;
  overflow: scroll;
  background-color: var(--purple-bg);
  max-height: 400px;
  padding: var(--s3);
  border-radius: var(--br2);
  font-size: var(--f6);
  margin: var(--s2) 0;
}


/* ── civ-sync-input component ─────────────────────────────────────────────── */

civ-sync-input form{
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

civ-sync-input label {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  cursor: default;
  border: none;
  padding: 0;
  font-weight: var(--fw-normal);
  border-radius: 0;
  background: none;
}

civ-sync-input label span {
  font-size: var(--f6);
  opacity: 0.7;
}

civ-sync-input label input {
  width: 100%;
  box-sizing: border-box;
}

/* ── civ-sync-state component ─────────────────────────────────────────────── */

/* ui-mark: inline code-like highlight for subject-type markup
   emitted by format() (www/utils/format.ts) */
ui-mark {
  display: inline-block;
  padding: 0 0.3em;
  border: 1px solid;
  border-radius: var(--br2);
  line-height: var(--lh-tight);
}

ui-mark[type='radical'] {
  color: hsl(var(--blueH), var(--blueS), var(--blueL));
  border-color: hsl(var(--blueH), var(--blueS), var(--mark-border-l));
  background-color: hsl(var(--blueH), var(--blueS), var(--mark-bg-l));
}

ui-mark[type='character'] {
  color: hsl(var(--pinkH), var(--pinkS), var(--pinkL));
  border-color: hsl(var(--pinkH), var(--pinkS), var(--mark-border-l));
  background-color: hsl(var(--pinkH), var(--pinkS), var(--mark-bg-l));
}

ui-mark[type='vocabulary'] {
  color: hsl(var(--purpleH), var(--purpleS), var(--purpleL));
  border-color: hsl(var(--purpleH), var(--purpleS), var(--mark-border-l));
  background-color: hsl(var(--purpleH), var(--purpleS), var(--mark-bg-l));
}

ui-mark[type='reading'] {
  color: hsl(var(--blackH), var(--blackS), var(--secondaryL));
  border-color: hsl(var(--blackH), var(--blackS), var(--mark-border-l));
  background-color: hsl(var(--blackH), var(--blackS), var(--mark-bg-l));
}

/* ── Dark palette ─────────────────────────────────────────────
   Explicit choice only (`data-theme="dark"` via setTheme()/boot script);
   there is no system/auto dark until the palette is tuned further.
   Only primitives are overridden; every composed color derives from these. */



/* ── E-ink palette ────────────────────────────────────────────
   App-level extension of the civility theme set: explicit choice only
   (`data-theme="eink"`, written by h-theme-select and the boot script).
   Based on the light palette — grayscale with distinct lightness steps
   per subject type, no dot patterns (they dither), no blur masks (they
   ghost), no transitions (e-ink refresh). */
}