/* The learner dictionary (/dictionary/), in the site's Apple direction (docs/DESIGN-APPLE.md): calm, precise, restrained.
   Typography does the work: a large bold English headword (Atkinson Hyperlegible Next), quiet grey secondary text (IPA,
   part of speech), Persian in Vazirmatn/Estedad and never letter-spaced. Surfaces are iOS-like: the plain grouped page
   (--paper), soft rounded cards (--card) and inset-grouped lists with hairline separators; no borders, frames, ornaments
   or glows. One accent (--indigo) for links, play buttons and the active state; CEFR is a small neutral pill. The search
   field is an iOS filled search bar. Dark mode is true black with grey cards (tokens in app.css). English blocks are LTR
   inside the RTL page; logical properties only. Motion: press feedback only (scale on pointer-down, transform/opacity),
   off at html[data-motion="0"] and under prefers-reduced-motion. No layout shift: fixed control sizes, audio loads on tap
   (audio.js), the mini header is transform-only. */

.dx {
  --dx-fill: color-mix(in srgb, #767680 12%, transparent);   /* iOS tertiary fill: search bar, chips, pills */
  --dx-fill-2: color-mix(in srgb, #767680 8%, transparent);  /* quaternary fill: wells inside cards */
  --dx-press: color-mix(in srgb, #767680 16%, transparent);  /* a pressed / hovered row */
  --dx-fa: var(--ink);                                        /* Persian meanings read as primary text */
  --dx-note: color-mix(in srgb, var(--saffron) 14%, var(--card));
  --dx-note-ink: #8a5300;                                     /* 5.9:1 on the note fill */
  --dx-en: "Atkinson Next", system-ui, sans-serif;
  --dx-r: 12px;                                               /* iOS control radius */
  --dx-seg: var(--card);                                      /* the selected segment (iOS: white / #636366) */
  padding-block: 8px 80px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dx { --dx-fill: color-mix(in srgb, #767680 24%, transparent); --dx-fill-2: color-mix(in srgb, #767680 16%, transparent);
    --dx-press: color-mix(in srgb, #767680 30%, transparent); --dx-note: color-mix(in srgb, var(--saffron) 13%, var(--card)); --dx-note-ink: #ffc84d; --dx-seg: #636366; }
}
:root[data-theme="dark"] .dx { --dx-fill: color-mix(in srgb, #767680 24%, transparent); --dx-fill-2: color-mix(in srgb, #767680 16%, transparent);
  --dx-press: color-mix(in srgb, #767680 30%, transparent); --dx-note: color-mix(in srgb, var(--saffron) 13%, var(--card)); --dx-note-ink: #ffc84d; --dx-seg: #636366; }

.dx [lang="en"] { font-family: var(--dx-en); }
.dx .ipa { font-family: var(--dx-en); font-variant-ligatures: none; letter-spacing: 0.01em; color: var(--ink-2); }
.dx-crumbs { margin-block-end: 12px; }
.dx-label { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.dx-label [lang="en"] { font-size: var(--fs-2xs); letter-spacing: 0.04em; text-transform: uppercase; }

/* section titles: plain, bold, no marks */
.dx-sec-h, .dx-block h2 { font-family: var(--f-display); font-size: var(--fs-xl); font-weight: 750; letter-spacing: var(--ls-title);
  line-height: var(--lh-title); margin: 0 0 12px; }

/* CEFR: a small neutral pill everywhere (ui.css colours it; the dictionary keeps it quiet) */
.dx .lvl { font-family: var(--dx-en); font-weight: 700; font-size: var(--fs-2xs); block-size: 22px; min-inline-size: 30px; padding-inline: 7px;
  border-radius: 999px; letter-spacing: 0.02em; direction: ltr; background: var(--dx-fill); color: var(--ink-2); }

/* ------------------------------------------------------------------ entry header: the word on the plain page */
.dx-head { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 14px 32px; padding: 20px 4px 24px;
  border-block-end: 1px solid var(--sep); }
.dx-head-main { display: grid; gap: 14px; min-inline-size: 0; }
.dx-word { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; text-align: start; justify-content: flex-end; }
html[dir="ltr"] .dx-word { justify-content: flex-start; }
.dx-hw { font-family: var(--dx-en); font-size: clamp(2.75rem, 6vw + 0.75rem, 5rem); font-weight: 800; line-height: 1;
  letter-spacing: -0.04em; margin: 0; overflow-wrap: anywhere; color: var(--ink); }
.dx-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.dx-chip { display: inline-flex; align-items: center; block-size: 26px; padding-inline: 10px; border-radius: 999px; font-size: var(--fs-sm);
  background: var(--dx-fill); color: var(--ink-2); font-style: italic; }
.dx-reg { font-style: normal; color: var(--ink); }
.dx-cefr { block-size: 26px !important; font-size: var(--fs-xs) !important; padding-inline: 9px !important; }
.dx-ladder { display: inline-flex; gap: 3px; align-items: flex-end; block-size: 16px; margin-inline-start: 2px; }
.dx-ladder i { inline-size: 4px; border-radius: 2px; background: var(--dx-fill); }
.dx-ladder i:nth-child(1) { block-size: 5px; } .dx-ladder i:nth-child(2) { block-size: 7px; } .dx-ladder i:nth-child(3) { block-size: 9px; }
.dx-ladder i:nth-child(4) { block-size: 11px; } .dx-ladder i:nth-child(5) { block-size: 13px; } .dx-ladder i:nth-child(6) { block-size: 16px; }
.dx-ladder i.on { background: var(--indigo); }

/* pronunciation: a filled capsule per accent (label · IPA · round play button with a 44px target) */
.dx-pron { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
html[dir="ltr"] .dx-pron { justify-content: flex-start; }
.dx-ipa { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; padding-inline: 14px 4px; border-radius: 999px;
  background: var(--dx-fill); font-size: var(--fs-md); color: var(--ink); }
.dx-ipa .ipa { color: var(--ink); }
.dx-ipa .play-btn, .dx-ex-en .play-btn, .dx-mini-in .play-btn { position: relative; inline-size: 36px; block-size: 36px; min-inline-size: 36px; min-block-size: 36px;
  padding: 0; border: 0; border-radius: 50%; background: var(--tint); color: var(--indigo); }
.dx-ipa .play-btn::before, .dx-ex-en .play-btn::before, .dx-mini-in .play-btn::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.dx .play-btn.playing { background: var(--indigo); color: var(--on-indigo); }
.dx-acc { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.06em; color: var(--ink-2); }
.dx-say .play-btn { min-block-size: 44px; padding-inline: 14px 16px; border: 0; background: var(--indigo); color: var(--on-indigo); }
.dx-forms { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: var(--fs-sm); justify-content: flex-end; color: var(--ink); }
html[dir="ltr"] .dx-forms { justify-content: flex-start; }
.dx-forms small { color: var(--ink-2); font-size: var(--fs-xs); }
.dx-head-side { display: grid; gap: 10px; align-content: start; justify-items: stretch; min-inline-size: 200px; }
.dx-head-side .dx-rv-btn { min-block-size: 44px; background: var(--tint); color: var(--indigo); }  /* clear but quiet: tinted, not filled */

/* the sense map: filled capsules under the headword */
.dx-map { grid-column: 1 / -1; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
.dx-map::-webkit-scrollbar { display: none; }
html[dir="rtl"] .dx-map a:first-child { margin-inline-start: auto; }  /* under the headword; an auto margin (not justify-content) keeps an overflow scrollable */
.dx-map a { flex: none; display: inline-flex; align-items: center; gap: 8px; min-block-size: 40px; padding-inline: 12px 14px; border-radius: 999px;
  background: var(--dx-fill); color: var(--ink); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; }
.dx-map a b { color: var(--ink-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.dx-map a:hover { background: var(--dx-press); }

/* the Persian switch (iOS switch) */
.dx-switch { display: flex; align-items: center; gap: 10px; min-block-size: 44px; font-size: var(--fs-sm); cursor: pointer; user-select: none; color: var(--ink); }
.dx-switch input { position: absolute; opacity: 0; pointer-events: none; }
.dx-switch-ui { position: relative; inline-size: 51px; block-size: 31px; border-radius: 999px; background: var(--dx-fill); flex: none;
  transition: background var(--dur-2) var(--ease-std); }
.dx-switch-ui::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: 27px; block-size: 27px;
  border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgb(0 0 0 / 0.15), 0 1px 1px rgb(0 0 0 / 0.16); transition: transform var(--dur-2) var(--spring); }
.dx-switch input:checked + .dx-switch-ui { background: var(--ok); }
.dx-switch input:checked + .dx-switch-ui::after { transform: translateX(-20px); }
html[dir="ltr"] .dx-switch input:checked + .dx-switch-ui::after { transform: translateX(20px); }
.dx-switch input:focus-visible + .dx-switch-ui { outline: 2px solid var(--indigo); outline-offset: 2px; }

.dx-rv-btn { inline-size: 100%; }
.dx-rv { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-block-size: 44px; padding-inline: 14px;
  border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.dx-rv.sm { min-block-size: var(--ctl-sm); }
.dx-rv-btn.is-kept { opacity: 0.75; }

/* sticky mini header: a material capsule that slides down when the headword leaves the screen */
.dx-mini { position: fixed; inset-inline: 0; inset-block-start: calc(var(--header-h) + var(--safe-t)); z-index: 30; pointer-events: none;
  transform: translateY(-120%); opacity: 0; transition: transform var(--dur-3) var(--spring), opacity var(--dur-2); }
.dx-mini.is-on { transform: none; opacity: 1; pointer-events: auto; }
.dx-mini-in { margin-inline: auto; inline-size: min(100% - 2 * var(--gutter), 760px); display: flex; align-items: center; gap: 12px;
  padding: 6px 6px 6px 18px; border-radius: 999px; background: var(--mat-card); backdrop-filter: var(--mat-blur); -webkit-backdrop-filter: var(--mat-blur);
  box-shadow: var(--e2); direction: ltr; }
.dx-mini-in b { font-family: var(--dx-en); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; }
.dx-mini-in .ipa { font-size: var(--fs-sm); flex: 1; }
.dx-mini-top { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .dx-mini { transition: opacity var(--dur-2); transform: none; } }
@media (prefers-reduced-transparency: reduce) { .dx-mini-in { background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* ------------------------------------------------------------------ Persian summary: one grouped card */
.dx-fa-sum { margin-block: 20px 0; padding: 14px 18px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e1); }
.dx-fa-sum h2 { font-size: var(--fs-xs); font-weight: 600; margin: 0 0 6px; color: var(--ink-2); }
.dx-fa-sum h2 [lang="en"] { color: var(--ink-2); }
.dx-fa-sum p { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--ink); }
.dx-fa-item { display: inline-flex; align-items: baseline; gap: 6px; }
.dx-fa-n { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; }
.dx-nofa [data-fa] { display: none !important; }

/* ------------------------------------------------------------------ senses */
.dx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; margin-block-start: 28px; align-items: start; }
.dx-h2 { font-family: var(--dx-en); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.015em; margin: 0 0 2px; text-align: start; }
html[dir="rtl"] .dx-h2 { text-align: end; }
.dx-common { margin: 0 0 14px; }
.dx-senses { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dx-sense { padding: 20px 22px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e1); display: grid; gap: 14px;
  scroll-margin-block-start: calc(var(--header-h) + 76px); }
.dx-sense:target { box-shadow: 0 0 0 2px var(--indigo), var(--e1); }
.dx-sense-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dx-n { font-family: var(--dx-en); font-weight: 700; font-size: var(--fs-lg); color: var(--ink-2); font-variant-numeric: tabular-nums; flex: none; }
.dx-gw { font-family: var(--dx-en); font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.dx-sense-top .dx-chip { block-size: 24px; font-size: var(--fs-xs); }
.dx-gr { font-family: var(--dx-en); font-size: var(--fs-sm); color: var(--ink-2); }
.dx-sense-ipa { font-size: var(--fs-sm); }
.dx-sense-pron { min-block-size: 44px; font-size: var(--fs-sm); } /* a sense said differently from the headword (heteronyms) */
.dx-def { margin: 0; font-size: clamp(1.1875rem, 0.5vw + 1.05rem, 1.375rem); line-height: 1.5; letter-spacing: -0.01em; font-weight: 500; color: var(--ink);
  text-wrap: pretty; }
.dx-fa { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-lg); font-weight: 600; color: var(--dx-fa); }
.dx-fa-k { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); flex: none; }
/* examples: an inset group with hairline separators */
.dx-ex { list-style: none; margin: 0; padding: 0; display: grid; border-radius: var(--r-md); background: var(--dx-fill-2); }
.dx-ex li { display: grid; gap: 2px; padding: 12px 14px; }
.dx-ex li + li { border-block-start: 1px solid var(--sep); }
.dx-ex-en { display: flex; align-items: flex-start; gap: 12px; }
.dx-ex-en p { margin: 0; font-size: var(--fs-md); line-height: 1.6; color: var(--ink); padding-block-start: 5px; }
.dx-ex-en .play-btn { flex: none; }
.dx-hl { background: none; color: inherit; font-weight: 700; padding: 0; }
.dx-ex-fa { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.8; }
.dx-ex-en:has(.play-btn:not(.no-audio)) + .dx-ex-fa { padding-inline-end: 48px; }
html[dir="ltr"] .dx-ex-en:has(.play-btn:not(.no-audio)) + .dx-ex-fa { padding-inline: 48px 0; }
.dx .dx-ex-en .play-btn.no-audio { display: none; }  /* no recording yet: no dead button (audio is listed for generation) */
.dx-more summary { cursor: pointer; display: flex; align-items: center; min-block-size: 44px; padding: 0 16px; color: var(--indigo); font-size: var(--fs-sm);
  font-weight: 600; list-style: none; }
.dx-more summary::-webkit-details-marker { display: none; }
.dx-more[open] summary { display: none; }
.dx-coll { display: grid; gap: 8px; }
.dx-coll ul, .dx-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dx-coll li, .dx-chips li > * { display: inline-flex; align-items: center; min-block-size: 32px; padding-inline: 12px; border-radius: 999px;
  background: var(--dx-fill); font-size: var(--fs-sm); color: var(--ink); text-decoration: none; }
.dx-chips li > a { min-block-size: 44px; padding-inline: 16px; color: var(--indigo); }
.dx-chips a:hover { background: var(--dx-press); }
/* «اشتباه رایج فارسی‌زبان‌ها»: a calm filled callout, distinct by its warm fill and icon only */
.dx-note { padding: 14px 16px; border-radius: var(--r-md); background: var(--dx-note); }
.dx-note b { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--dx-note-ink); }
.dx-note-ic { display: inline-grid; place-items: center; flex: none; color: var(--dx-note-ink); }
.dx-note .ic { inline-size: 18px; block-size: 18px; }
.dx-note p { margin: 6px 0 0; font-size: var(--fs-base); line-height: 1.85; color: var(--ink); }
.dx-rel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; line-height: 1.9; }
.dx-rel .dx-label { padding-inline-start: 6px; }
.dx-rel .dx-label:first-child { padding-inline-start: 0; }
.dx-rel a { color: var(--indigo); text-decoration: none; }
.dx-rel a:hover { text-decoration: underline; }
.dx-sense-act { display: flex; justify-content: flex-start; }
.dx-sense-act .dx-rv-btn { inline-size: auto; }

.dx-block { margin-block-start: 34px; }
/* inset-grouped list (iOS Settings) */
.dx-phrases { list-style: none; margin: 0; padding: 0; display: grid; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e1); overflow: hidden; }
.dx-phrases li { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 12px 18px; min-block-size: 48px; }
.dx-phrases li + li::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 18px 0; block-size: 1px; background: var(--sep); }
.dx-phrases li > a[lang], .dx-phrases li > b { font-family: var(--dx-en); font-weight: 700; color: var(--ink); text-decoration: none; }
.dx-phrases li > a[lang]:hover { color: var(--indigo); }
.dx-phrases li > a.small { color: var(--indigo); text-decoration: none; }
.dx-ph-fa { color: var(--ink-2); font-size: var(--fs-sm); flex: 1 1 12em; }

/* ------------------------------------------------------------------ aside: grouped cards */
.dx-side { display: grid; gap: 14px; position: sticky; inset-block-start: calc(var(--header-h) + 16px); }
.dx-card { padding: 16px 18px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e1); }
.dx-card h2 { font-size: var(--fs-base); font-weight: 700; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.dx-card h2 .ic { inline-size: 18px; block-size: 18px; color: var(--ink-2); }
.dx-learn ul, .dx-near ul { list-style: none; margin: 0; padding: 0; display: grid; }
.dx-learn li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dx-learn li + li { border-block-start: 1px solid var(--sep); }
.dx-learn a { display: flex; align-items: center; gap: 10px; min-block-size: 44px; color: var(--indigo); text-decoration: none; font-size: var(--fs-sm); }
.dx-learn .ic { inline-size: 18px; block-size: 18px; color: var(--indigo); flex: none; }
.dx-near { padding-inline: 8px; }
.dx-near h2 { padding-inline: 10px; }
.dx-near a, .dx-near b { display: flex; align-items: center; min-block-size: 40px; padding: 0 10px; border-radius: var(--r-sm); font-family: var(--dx-en);
  color: var(--ink); text-decoration: none; }
.dx-near a:hover { background: var(--dx-fill-2); }
.dx-near b { background: var(--tint); color: var(--indigo); font-weight: 700; }
.dx-trust p { margin: 0 0 8px; color: var(--ink-2); line-height: 1.85; }
.dx-report summary { list-style: none; cursor: pointer; }
.dx-report summary.btn { min-block-size: 44px; padding-inline: 4px; background: none; color: var(--indigo); box-shadow: none; }
.dx-report summary::-webkit-details-marker { display: none; }
.dx-report form { display: grid; gap: 10px; margin-block-start: 8px; }
.dx-report fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 2px; }
.dx-radio { display: flex; align-items: center; gap: 8px; min-block-size: 44px; font-size: var(--fs-sm); }
.dx-report textarea, .dx-report select { inline-size: 100%; font: inherit; padding: 8px 10px; border-radius: var(--r-sm); background: var(--card); color: var(--ink);
  min-block-size: 44px; }
.dx-report-done { color: var(--ok); margin: 0; }

/* ------------------------------------------------------------------ search: the iOS filled search bar */
.dx-search { position: relative; display: flex; align-items: center; inline-size: 100%; max-inline-size: 640px; }
.dx .dx-search input { inline-size: 100%; min-block-size: 44px; padding-inline: 40px; border-radius: var(--dx-r); border: 0;
  background: var(--dx-fill); color: var(--ink); font: 400 var(--fs-md) / 1.2 var(--f-body); box-shadow: none; transition: background var(--dur-1); }
.dx .dx-search.big input { min-block-size: 52px; font-size: var(--fs-lg); padding-inline: 48px; border-radius: 14px; }
.dx .dx-search input::placeholder { color: var(--ink-2); opacity: 1; text-overflow: ellipsis; }
.dx .dx-search input:focus { outline: none; box-shadow: none; }
.dx .dx-search input:focus-visible { outline: 2px solid var(--indigo); outline-offset: 0; }
.dx-search input::-webkit-search-cancel-button { display: none; }
.dx-search-ic { position: absolute; inset-inline-start: 12px; color: var(--ink-2); display: grid; pointer-events: none; }
.dx-search-ic .ic { inline-size: 18px; block-size: 18px; }
.dx-search.big .dx-search-ic { inset-inline-start: 16px; }
.dx-search.big .dx-search-ic .ic { inline-size: 20px; block-size: 20px; }
.dx-kbd { position: absolute; inset-inline-end: 12px; font: 600 var(--fs-2xs)/1 var(--dx-en); color: var(--ink-2); border-radius: 6px; padding: 4px 7px;
  background: var(--card); box-shadow: 0 0 0 0.5px var(--sep), 0 1px 1px rgb(0 0 0 / 0.06); }
.dx-search.big .dx-kbd { inset-inline-end: 16px; }
.dx-search input:focus ~ .dx-kbd { display: none; }
@media (hover: none) { .dx-kbd { display: none; } }
/* suggestions: a menu card that grows from the search bar */
.dx-sug { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 8px); z-index: 40; border-radius: var(--r-md); background: var(--card);
  box-shadow: var(--e2); overflow: hidden; text-align: start; transform-origin: top center; }
.dx-sug:empty { display: none; }
.dx-sug-list { list-style: none; margin: 0; padding: 6px; display: grid; max-block-size: min(60vh, 440px); overflow-y: auto; }
.dx-sug-list li + li a { box-shadow: 0 -1px 0 var(--sep); }
.dx-sug-list a { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 12px; padding: 12px 12px; border-radius: 10px;
  color: var(--ink); text-decoration: none; min-block-size: 48px; }
.dx-sug-list a > small { grid-column: 1; }
.dx-sug-list b { font-family: var(--dx-en); font-size: var(--fs-md); font-weight: 600; }
.dx-sug-fa { color: var(--ink-2); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-sug-list [aria-selected="true"] a, .dx-sug-list a:hover { background: var(--tint); box-shadow: none; }
.dx-sug-list [aria-selected="true"] + li a, .dx-sug-list li:hover + li a { box-shadow: none; }
.dx-sug-fix { margin: 0; padding: 12px 16px; font-size: var(--fs-sm); background: var(--dx-note); color: var(--ink); }
.dx-sug-none { margin: 0; padding: 16px; }

/* ------------------------------------------------------------------ hub */
.dx-hero { display: grid; justify-items: center; text-align: center; gap: 10px; padding: clamp(28px, 6vw, 72px) 0 clamp(24px, 4vw, 44px); }
.dx-hero h1 { font-family: var(--f-display); font-size: clamp(2.125rem, 3vw + 1.25rem, 3.5rem); font-weight: 800; line-height: 1.2; margin: 0;
  color: var(--ink); text-wrap: balance; }
.dx-eyebrow { font-family: var(--dx-en); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); margin: 0; }
.dx-eyebrow:not([lang="en"]) { font-family: var(--f-body); }
.dx-lede { max-inline-size: 52ch; margin: 0 0 18px; color: var(--ink-2); font-size: var(--fs-md); line-height: 1.85; text-wrap: pretty; }
.dx-hero .dx-search { max-inline-size: 620px; }
.dx-hero-meta { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--ink-2); }
.dx-hero.sm { padding-block: clamp(24px, 5vw, 48px) 24px; }
.dx-hero.sm h1 { font-size: var(--fs-h1); }

.dx-hub-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; margin-block: 8px 0; align-items: start; }
/* word of the day: one calm card, the word set large */
.dx-wotd { display: grid; gap: 8px; align-content: start; padding: 22px 24px 18px; border-radius: var(--r-lg); text-decoration: none; color: var(--ink);
  background: var(--card); box-shadow: var(--e1); }
.dx-wotd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dx-wotd-head .dx-eyebrow { font-weight: 600; }
.dx-wotd-word { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-block-start: 2px; }
.dx-wotd-word b { font-family: var(--dx-en); font-size: clamp(2.5rem, 2.5vw + 1.75rem, 3.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05;
  overflow-wrap: anywhere; }
.dx-wotd-word i { color: var(--ink-2); font-size: var(--fs-md); }
.dx-wotd-word .ipa { font-size: var(--fs-md); }
.dx-wotd-def { color: var(--ink); font-size: var(--fs-lg); line-height: 1.55; text-wrap: pretty; margin-block-start: 4px; }
.dx-wotd-fa { color: var(--ink); font-weight: 600; font-size: var(--fs-md); }
.dx-wotd-fa:empty { display: none; }
.dx-wotd-go { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-block-size: 44px; margin-block-start: 8px;
  padding-block-start: 6px; border-block-start: 1px solid var(--sep); color: var(--indigo); font-size: var(--fs-sm); font-weight: 600; }
.dx-wotd-go .ic, .dx-chev .ic { inline-size: 16px; block-size: 16px; }
html[dir="ltr"] .dx-wotd-go .ic, html[dir="ltr"] .dx-chev .ic { transform: scaleX(-1); }

/* levels: an inset-grouped list of six rows */
.dx-levels ul { list-style: none; margin: 0; padding: 0; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e1); overflow: hidden; }
.dx-levels li { position: relative; }
.dx-levels li + li::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 64px 0; block-size: 1px; background: var(--sep); z-index: 1; }
.dx-lv { display: grid; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 12px; min-block-size: 50px; padding: 6px 16px;
  text-decoration: none; color: var(--ink); }
.dx-lv b { justify-self: start; font-family: var(--dx-en); font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.dx-lv-name { font-size: var(--fs-base); font-weight: 500; }
.dx-lv-n { font-size: var(--fs-sm); color: var(--ink-2); }
.dx-chev { display: grid; color: color-mix(in srgb, var(--ink-2) 60%, transparent); }
.dx-lv:hover { background: var(--dx-fill-2); }
/* the shared .empty state class (ui.css) must not restyle an empty level row */
.dx-lv.empty { display: grid; justify-items: stretch; text-align: start; padding: 6px 16px; border: 0; border-radius: 0; background: none; font-size: inherit; gap: 12px; }
.dx-lv.empty:hover { background: var(--dx-fill-2); }
.dx-lv.empty .dx-lv-name, .dx-lv.empty b { color: var(--ink-2); }

.dx-az { margin-block: 36px 0; }
/* the letter index: plain glyphs on one card */
.dx-letters { list-style: none; margin: 0; padding: 8px; display: grid; grid-template-columns: repeat(13, 1fr); gap: 2px; border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--e1); }
.dx-letters a, .dx-letters span, .dx-letters b { display: grid; place-items: center; block-size: 48px; border-radius: 10px; font-family: var(--dx-en);
  font-weight: 600; font-size: var(--fs-lg); text-decoration: none; color: var(--indigo); }
.dx-letters a:hover { background: var(--tint); }
.dx-letters a:focus-visible { outline-offset: -2px; }
.dx-letters span { color: color-mix(in srgb, var(--ink-2) 45%, transparent); font-weight: 500; }
.dx-letters b { color: var(--on-indigo); background: var(--indigo); }
/* list pages: the strip of letters, and the level switcher as a segmented control */
.dx-letters.sm { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; background: none; box-shadow: none; border-radius: 0; }
html[dir="rtl"] .dx-letters.sm { justify-content: flex-end; }  /* under the RTL title, though the strip itself is LTR */
.dx-letters.sm a, .dx-letters.sm b { inline-size: 44px; block-size: 44px; font-size: var(--fs-md); border-radius: 999px; background: var(--dx-fill); color: var(--ink); }
.dx-letters.sm a:hover { background: var(--dx-press); }
.dx-letters.sm b { background: var(--indigo); color: var(--on-indigo); }
.dx-listhead-level .dx-letters.sm { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 2px; border-radius: 10px; background: var(--dx-fill);
  inline-size: min(100%, 420px); justify-self: stretch; }
/* the strip is dir=ltr, so its own logical margins would point the wrong way: physical margins keep it on the page's start edge */
html[dir="rtl"] .dx-listhead-level .dx-letters.sm { margin-left: auto; }
html[dir="ltr"] .dx-listhead-level .dx-letters.sm { margin-right: auto; }
.dx-listhead-level .dx-letters.sm a, .dx-listhead-level .dx-letters.sm b { inline-size: auto; block-size: 40px; border-radius: 8px; background: none;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.dx-listhead-level .dx-letters.sm b { background: var(--dx-seg); color: var(--ink); box-shadow: 0 3px 8px rgb(0 0 0 / 0.12), 0 0 0 0.5px rgb(0 0 0 / 0.04); }
.dx-listhead-level .dx-letters.sm a:hover { background: var(--dx-fill-2); }

.dx-recent { margin-block-start: 36px; }
.dx-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.dx-item a { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e1);
  color: var(--ink); text-decoration: none; block-size: 100%; }
.dx-item-top { display: flex; align-items: center; gap: 8px; }
.dx-item-top b { font-family: var(--dx-en); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.015em; }
.dx-item-top .lvl { margin-inline-start: auto; }
html[dir="rtl"] .dx-item-top { flex-direction: row-reverse; justify-content: flex-end; }
html[dir="rtl"] .dx-item-top .lvl { margin-inline-start: 0; margin-inline-end: auto; }
.dx-item-def { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.dx-item-def i { color: var(--ink-2); }
.dx-item-fa { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .dx-item a:hover, .dx-wotd:hover { box-shadow: var(--e2); } }

.dx-listhead { display: grid; gap: 14px; margin-block: 8px 22px; }
.dx-listhead-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.dx-listhead h1 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: var(--fs-h1); font-weight: 800; }
.dx-listhead h1 .lvl { block-size: 30px; min-inline-size: 44px; font-size: var(--fs-md); color: var(--ink); }
.dx-listhead-n { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.dx-big-letter { font-family: var(--dx-en); font-size: 2.75rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.dx-how { margin-block-start: 40px; padding: 22px 24px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e1); }
.dx-how ol { margin: 0; padding: 0; list-style: none; counter-reset: dxhow; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
.dx-how li { position: relative; counter-increment: dxhow; padding-inline-start: 30px; line-height: 1.85; color: var(--ink-2); }
.dx-how li::before { content: counter(dxhow, persian); position: absolute; inset-inline-start: 0; inset-block-start: 0; font-weight: 700; color: var(--ink); }
html[lang="en"] .dx-how li::before { content: counter(dxhow); }
.dx-how a { color: var(--indigo); }
.dx-results { margin-block-start: 8px; }

/* ------------------------------------------------------------------ motion: press feedback only (on pointer-down) */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="0"]) .dx-wotd, html:not([data-motion="0"]) .dx-item a, html:not([data-motion="0"]) .dx-map a,
  html:not([data-motion="0"]) .dx-letters a, html:not([data-motion="0"]) .dx-chips a, html:not([data-motion="0"]) .dx .play-btn {
    transition: transform var(--dur-3) var(--spring), box-shadow var(--dur-2), background var(--dur-1); }
  html:not([data-motion="0"]) .dx-wotd:active, html:not([data-motion="0"]) .dx-item a:active { transform: scale(0.98); transition-duration: var(--dur-1); }
  html:not([data-motion="0"]) .dx-map a:active, html:not([data-motion="0"]) .dx-letters a:active, html:not([data-motion="0"]) .dx-chips a:active,
  html:not([data-motion="0"]) .dx .play-btn:active { transform: scale(0.94); transition-duration: var(--dur-1); }
  html[data-motion="2"] .dx-sug-list, html[data-motion="3"] .dx-sug-list { animation: dx-menu var(--dur-2) var(--ease-out); }
}
@keyframes dx-menu { from { opacity: 0; transform: translateY(-4px) scale(0.99); } }
.dx-lv:active, .dx-near a:active, .dx-sug-list a:active { background: var(--dx-press); }
.dx-wotd:focus-visible, .dx-item a:focus-visible, .dx-lv:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.dx-lv:focus-visible { outline-offset: -2px; }

/* ------------------------------------------------------------------ tablets and phones */
@media (max-width: 860px) {
  .dx-grid, .dx-hub-grid { grid-template-columns: 1fr; }
  .dx-side { position: static; }
  .dx-head { grid-template-columns: 1fr; padding-block: 12px 20px; }
  .dx-head-side { min-inline-size: 0; grid-template-columns: 1fr auto; align-items: center; }
  .dx-letters { grid-template-columns: repeat(7, 1fr); }
  .dx-how ol { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .dx-hero { justify-items: stretch; text-align: start; }  /* the iOS large title: start-aligned on phones */
  html[dir="rtl"] .dx-hero .dx-eyebrow { text-align: right; }  /* the English kicker follows the page's start edge */
  .dx-hero .dx-lede { margin-block-end: 12px; }
  .dx-wotd { padding: 18px 18px 14px; }
  .dx-letters { padding: 6px; }
  .dx-letters a, .dx-letters span { block-size: 44px; }
  .dx-how { padding: 18px; }
  .dx .dx-search input::placeholder { font-size: var(--fs-sm); }  /* the box keeps 16px+ (no iOS zoom); the hint fits a 360px screen */
}
@media (max-width: 420px) {
  .dx-sense { padding: 16px; }
  .dx-head-side { grid-template-columns: 1fr; }
  .dx-ex li { padding: 12px; }
  .dx-ex-fa { padding-inline-end: 0 !important; }
  .dx-ipa { font-size: var(--fs-base); }
  .dx-fa-sum { padding: 14px 16px; }
  .dx-listhead-level .dx-letters.sm { inline-size: 100%; }
}
@media (prefers-contrast: more) {
  .dx { --dx-fill: transparent; --dx-fill-2: transparent; }
  .dx-ipa, .dx-chip, .dx-map a, .dx .lvl, .dx-coll li, .dx-chips li > *, .dx .dx-search input, .dx-letters.sm a { box-shadow: inset 0 0 0 1px var(--line); }
  .dx-sense, .dx-card, .dx-wotd, .dx-item a, .dx-levels ul, .dx-letters, .dx-phrases, .dx-fa-sum, .dx-how { box-shadow: 0 0 0 1px var(--line); }
}
@media (forced-colors: active) { .dx-hl { background: Mark; } .dx .dx-search input { border: 1px solid CanvasText; } }
@media print { .dx-side, .dx-mini, .dx-head-side, .dx-map { display: none !important; } .dx-grid { grid-template-columns: 1fr; } }