/* ==========================================================================
   فهيم — shared navigation (assets/nav.js): sidebar extras, phone top bar,
   bottom bar and bottom sheets. Yellow marks the selected item only.
   ========================================================================== */

/* sidebar: the unbuilt sections, together and quiet */
.side__later { display: flex; gap: 8px; align-items: flex-start; margin: var(--s-16) 10px 0; font-size: 12px; line-height: 1.7; color: var(--muted); }
.side__later .icon { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--faint); }
.side__nav .side__later a { display: inline; padding: 0; border-radius: 0; font-size: inherit; color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.side__nav .side__later a:hover { background: none; }
.side__nav .side__later a:hover { color: var(--ink); }
.side__nav button { font: inherit; }
/* «قريبًا»: each unbuilt section is its icon and a short name */
.side__later b { margin-inline-end: 6px; font-weight: var(--w-semibold); }
.side__soon { display: inline-flex; align-items: center; gap: 4px; margin-inline-end: 10px; font-style: normal; white-space: nowrap; }
.side__later .side__soon .icon { width: 14px; height: 14px; margin: 0; color: inherit; }

/* a colour per section, on menu icons only (text stays ink); the selected item keeps an ink icon on gold */
[data-k="home"] { --k: var(--ink); }               [data-k="plan"] { --k: var(--c-plan); }
[data-k="reading"] { --k: var(--c-reading); }      [data-k="listening"] { --k: var(--c-listening); }
[data-k="grammar"] { --k: var(--c-grammar); }      [data-k="writing"] { --k: var(--c-writing); }
[data-k="speaking"] { --k: var(--c-speaking); }    [data-k="paraphrase"] { --k: var(--c-plan); }
[data-k="vocab"] { --k: var(--c-vocab); }          [data-k="exam"] { --k: var(--c-exam); }
[data-k="learn"] { --k: var(--c-listening); }       [data-k="activate"] { --k: var(--c-plan); }
[data-k="spelling"] { --k: var(--c-writing); }
.side__nav a[data-k] .icon, .sheet__row[data-k] .sheet__icon, .bnav__i[data-k] { color: var(--k); }
.side__nav a[data-k].is-active .icon { color: var(--ink); }
.sheet__tile[data-k] .sheet__icon { color: var(--k); background: color-mix(in srgb, var(--k) 12%, var(--surface)); }
.sheet__row[data-k] .sheet__icon { background: color-mix(in srgb, var(--k) 10%, var(--surface)); border-color: color-mix(in srgb, var(--k) 25%, var(--surface)); }
.bnav__i[data-k] span { color: var(--muted); }
.bnav__i[data-k].is-active span { color: var(--ink); }
.bnav__i[data-k].is-active { color: var(--ink); }

/* ==========================================================================
   The signed-in look (October 2026, after the Eduzen learning dashboard):
   a flat light-grey canvas, soft white cards with big corners and no outline,
   pill buttons with one purple accent, black for the selected pill, and
   purple + yellow for data. Scoped to signed-in pages; the landing page keeps its own.
   ========================================================================== */
.dash-body {
  --canvas: #ececee;
  --lilac: #f2f2f4;
  --border-strong: #e2e2e6;
  --border: #ececef;
  --accent: #7c4dea; --accent-hover: #6d3fe0; --accent-press: #5f33d0;   /* white on it: 5.1:1 */
  --on-accent: #ffffff;
  --accent-soft: #f0ebfd;
  --violet: #9d6cf7; --violet-2: #cdb4fc; --violet-soft: #efe8fe;          /* data: lines, gauges, bars */
  --sun: #f4cd2a; --sun-2: #fbe98f; --sun-soft: #fdf5cf;
  --mint: #43a95b; --mint-2: #b9efc3;
  --glow: linear-gradient(125deg, #ad78ea 0%, #d6a3a6 55%, #eac257 100%);   /* the one feature tile */
  --card-bg: linear-gradient(180deg, #ffffff 0%, #f9f9fa 100%);
  --r-panel: 28px; --r-feature: 28px; --r-card: 20px; --r-button: 9999px;
  --shadow-float: 0 18px 40px -18px rgba(20, 20, 30, .28);
}
.dash-body .btn--primary { font-weight: var(--w-semibold); }
.dash-body .btn--ghost { border-color: var(--border-strong); background: var(--surface); }
.dash-body .btn--ghost:hover { border-color: var(--ink); background: var(--surface); }
/* links: purple words with a thin line under them */
.dash-body .link { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.dash-body .link:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
/* a button that is only a word or two (بدّلها، أجّلها للغد): a small white pill, not an underlined word */
.dash-body .link--btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 14px; vertical-align: middle;
  border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--surface);
  color: var(--ink); font-size: 13px; font-weight: var(--w-medium); line-height: 1.3; text-decoration: none;
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.dash-body .link--btn:hover { color: var(--ink); background: var(--lilac); border-color: var(--faint); }
/* breadcrumbs: the places you can go back to are white chips; the page you are on stays plain text */
.dash-body :is(.crumbs, .sp-crumbs, .ls-crumbs, .st-crumb, .rl-crumbs) a {
  display: inline-flex; align-items: center; min-height: 28px; padding: 3px 12px; border-radius: var(--r-pill);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong);
  color: var(--ink); font-weight: var(--w-medium); text-decoration: none;
  transition: background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.dash-body :is(.crumbs, .sp-crumbs, .ls-crumbs, .st-crumb, .rl-crumbs) a:hover {
  color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); text-decoration: none;
}
.dash-body .bar > span { background: linear-gradient(90deg, var(--violet-2), var(--violet)); }
/* round icon buttons and the avatar: white circles */
.dash-body .icon-btn { border-radius: 50%; border-color: transparent; background: var(--surface); }
.dash-body .icon-btn:hover { border-color: var(--border-strong); }
.dash-body .avatar--lg { width: 48px; height: 48px; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); }

/* ==========================================================================
   Desktop shell (≥961px): the flat canvas, a slim icon bar on the right that
   opens on hover, and the profile button in the page header.
   ========================================================================== */
/* pages that keep the full sidebar (the owner panel) keep its width */
body:not(.has-rail) { --side-w: 252px; }
@media (min-width: 961px) {
  body.has-rail { background: var(--canvas); }
  body.has-rail::after { background: var(--canvas); }   /* the cover the page fades in from (reading.css) */
  /* ---- the icon bar: compact at rest; opens toward the content (left) when the mouse rests on it (.is-hover, set by
     nav.js with a short wait and a short grace), on keyboard focus, or with the touch toggle. Its right edge stays put and it floats over the page, so nothing moves.
     Smooth in Safari too: the only thing that animates is the white panel (::before) sliding in from
     the right with transform, which the graphics card does without repainting anything (its shadow is
     drawn once and slides with it). A clip cuts it to the slim strip at rest and keeps the hidden part
     from catching clicks; it widens at once on open (enough for the shadow, not past the screen edge)
     and narrows with the panel on close. Row highlights grow from an icon tile to the
     whole row with the panel, and the names never move: they appear in place (colour only; Safari
     drops Arabic marks from moving text). ---- */
  .has-rail .side {
    --open-w: 244px;
    --shift: calc(var(--open-w) - var(--side-w));                       /* how far the panel slides */
    --ease-open: cubic-bezier(.22, 1, .36, 1);                          /* quick start, long soft landing */
    justify-self: start;                       /* RTL: pinned to the right edge of its column */
    width: var(--open-w); z-index: 60; overflow: visible; isolation: isolate;
    padding: 16px 0 14px; gap: 10px; align-items: stretch;
    background: transparent; border: 0; border-radius: 30px;
    clip-path: inset(0 0 0 var(--shift) round 30px);                    /* RTL: only the right-hand strip is there */
    --clip-open: inset(-48px 0 -48px -48px);                            /* room for the shadow above, below and toward the page */
    /* closing: the clickable area shrinks together with the panel, so nothing invisible is left over the page */
    transition: clip-path 280ms var(--ease-open);
  }
  .has-rail .side::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 30px; pointer-events: none;
    background: #fff; box-shadow: var(--shadow-float), inset 0 0 0 1px var(--border);   /* solid; the shadow slides with it */
    transform: translateX(var(--shift)); will-change: transform;
    /* (the short wait before opening and the grace before closing are nav.js's: .is-hover) */
    transition: transform 280ms var(--ease-open);
  }
  .has-rail .side:is(.is-hover, .is-open, :has(:focus-visible)) {
    clip-path: var(--clip-open); transition: clip-path 0s;
  }
  .has-rail .side:is(.is-hover, .is-open, :has(:focus-visible))::before { transform: none; transition: transform 360ms var(--ease-open); }
  /* every row keeps its icon on the same vertical line: 42px from the right edge, open or closed */
  .has-rail .side__logo { padding-inline-start: 19px; gap: 12px; flex: none; }
  .has-rail .side__logo .logo__mark { width: 46px; height: 46px; border-radius: 14px; flex: none; }
  .has-rail .side__logo .logo__mark svg { width: 46px; height: 46px; }
  .has-rail .side__logo .logo__word { height: 26px; color: transparent; transition: color 100ms ease; }
  .has-rail .side__nav { display: flex; flex-direction: column; align-items: stretch; gap: 3px; flex: 1; padding: 2px 12px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
  .has-rail .side__nav::-webkit-scrollbar { display: none; }
  /* group names: a short line when closed, the name when open */
  .has-rail .side__label { position: relative; flex: none; height: 17px; margin: 8px 0 2px; padding-inline-start: 20px; overflow: hidden; white-space: nowrap;
    font-size: 11.5px; line-height: 17px; color: transparent; transition: color 100ms ease; }
  .has-rail .side__label::before { content: ""; position: absolute; top: 8px; inset-inline-start: 19px; width: 22px; height: 1px; background: var(--border-strong); transition: opacity 100ms ease; }
  .has-rail .side__label:first-child { display: none; }
  .has-rail .side__nav a {
    position: relative; isolation: isolate; flex: none; height: 48px; gap: 24px; padding: 0; padding-inline-start: 19px;   /* 12 + 19 + 10.5 = 42; names start clear of the 59px tile */
    justify-content: flex-start; border-radius: 15px; white-space: nowrap; color: var(--ink-2); background: none;
  }
  /* the highlight (hover, current page): an icon-sized tile when closed that grows to the whole row as the
     panel opens. Only this small absolutely placed shape changes size, so nothing around it moves */
  .has-rail .side__nav a::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 59px; z-index: -1; border-radius: 15px;
    background: transparent; transition: width 280ms var(--ease-open), background-color 120ms ease;
  }
  .has-rail .side:is(.is-hover, .is-open, :has(:focus-visible)) .side__nav a::before { width: 100%; transition: width 360ms var(--ease-open), background-color 120ms ease; }
  .has-rail .side__nav a .icon { width: 21px; height: 21px; flex: none; }
  .has-rail .side__txt { font-size: 14.5px; color: transparent; transition: color 100ms ease; }
  .has-rail .side__nav a:hover { background: none; }
  .has-rail .side__nav a:hover::before { background: var(--lilac); }
  .has-rail .side__nav a.is-active { background: none; }
  .has-rail .side__nav a.is-active::before { background: var(--ink); }
  .has-rail .side__nav a.is-active .side__txt { font-weight: var(--w-semibold); }
  .has-rail .side__nav a.is-active .icon { color: var(--on-accent); }
  .has-rail .side__nav a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
  .has-rail .side__later { flex: none; margin: auto 0 0; padding: 10px 12px; padding-inline-start: 22px;   /* 12 + 22 + 8 = 42 */ gap: 12px; white-space: nowrap; font-size: 12px; line-height: 1.6; }
  .has-rail .side__later .icon { margin: 0; flex: none; }
  .has-rail .side__later span { color: transparent; white-space: normal; min-width: 170px; transition: color 100ms ease; }
  .has-rail .side__streak { display: none; }

  /* open: the names appear in place once the panel is mostly there (colour only), group names replace their lines */
  .has-rail .side:is(.is-hover, .is-open, :has(:focus-visible)) .side__txt { color: var(--ink-2); transition: color 160ms ease 110ms; }
  .has-rail .side:is(.is-hover, .is-open, :has(:focus-visible)) .side__nav a.is-active .side__txt { color: var(--on-accent); }
  .has-rail .side:is(.is-hover, .is-open, :has(:focus-visible)) .side__nav a:hover:not(.is-active) .side__txt { color: var(--ink); transition-delay: 0ms; }   /* the current page keeps white on black */
  .has-rail .side:is(.is-hover, .is-open, :has(:focus-visible)) .logo__word { color: var(--ink); transition: color 160ms ease 110ms; }
  .has-rail .side:is(.is-hover, .is-open, :has(:focus-visible)) .side__later span { color: var(--muted); transition: color 160ms ease 110ms; }
  .has-rail .side:is(.is-hover, .is-open, :has(:focus-visible)) .side__label { color: var(--faint); transition: color 160ms ease 110ms; }
  .has-rail .side:is(.is-hover, .is-open, :has(:focus-visible)) .side__label::before { opacity: 0; }

  /* touch screens (iPad): no hover, so a button opens and closes the names. A trackpad or Pencil
     still opens it on hover (nav.js sets .is-hover only for those, never for a finger) */
  .side__toggle { display: none; }
  @media (hover: none) {
    .has-rail .side__toggle {
      display: grid; place-items: center; flex: none; width: 44px; height: 36px; margin-inline-start: 20px; padding: 0;   /* finger-sized; centre stays on the 42px icon line */
      border: 0; border-radius: 12px; background: var(--lilac); color: var(--ink); cursor: pointer;
      -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    }
    .has-rail .side__toggle .icon { width: 18px; height: 18px; transition: transform 220ms ease; }
    .has-rail .side.is-open .side__toggle .icon { transform: scaleX(-1); }
    .has-rail .side__nav a { -webkit-tap-highlight-color: transparent; }
    /* Safari leaves :hover stuck on a tapped row: on touch only the current page is highlighted */
    .has-rail .side__nav a:hover:not(.is-active)::before { background: transparent; }
    .has-rail .side:has(:focus-visible):not(.is-open, .is-hover) { clip-path: inset(0 0 0 var(--shift) round 30px); }
    .has-rail .side:has(:focus-visible):not(.is-open, .is-hover)::before { transform: translateX(var(--shift)); }
    .has-rail .side:has(:focus-visible):not(.is-open, .is-hover) .side__nav a::before { width: 59px; }
    .has-rail .side:has(:focus-visible):not(.is-open, .is-hover) :is(.side__txt, .side__label, .logo__word, .side__later span) { color: transparent; }
    .has-rail .side:has(:focus-visible):not(.is-open, .is-hover) .side__label::before { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .has-rail .side, .has-rail .side::before, .has-rail .side *, .has-rail .side *::before { transition-duration: 0ms !important; transition-delay: 0ms !important; }
  }

  /* the page fills the screen: the icon bar sits on the right edge and the content takes the rest.
     No empty column is reserved (only the writing lesson has a real third one: its contents). */
  body.has-rail .app { max-width: none; grid-template-columns: var(--side-w) minmax(0, 1fr); padding-inline: 16px 24px; }
  /* the bar sticks only as far as its grid row reaches, so the page's bottom space lives inside the row
     (a margin on the columns, not padding on .app): scrolled all the way down, the bar still doesn't move */
  body.has-rail .app { padding-bottom: 0; }
  body.has-rail .app > :not(.side) { margin-bottom: var(--s-48); }
  body.has-rail.lesson-page .app { grid-template-columns: var(--side-w) minmax(0, 1fr) 248px; }
  body.has-rail:not(.ls-exam-on) .main { max-width: none; }
  body.has-rail .pl-setup { max-width: none; }
  .has-rail .dash-tools:empty { display: none; }
}

/* ==========================================================================
   The dashboard's look on every signed-in page (style only — no section moves):
   light large titles, white cards on the colour wash, pill tab switches with a
   charcoal selected tab, and a soft shine on the coloured feature cards.
   ========================================================================== */
.has-rail :is(.rh-door, .gx-next, .gx-cta, .pl-today, .v-due, .sp-next--rec, .sp-part, .ls-result, .rv-summary, .sg-tip, .strategy,
  .exam-hero, .kpi--band, .rll-top, .next, .mock) {
  background-image: linear-gradient(140deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 100%);
}
.has-rail .dash-title { font-size: clamp(28px, 2.8vw, 40px); font-weight: var(--w-regular); line-height: 1.35; }
.has-rail .rtabs, .has-rail .seg { background: rgba(255, 255, 255, .85); border-color: transparent; border-radius: var(--r-pill); }
.has-rail .seg button { border-radius: var(--r-pill); }
.has-rail .rtabs button[aria-selected="true"] { background: var(--ink); color: var(--on-accent); box-shadow: none; }
.has-rail .gx-switch { background: rgba(255, 255, 255, .7); border-radius: 18px; }
.has-rail .gx-switch button { border-radius: 14px; }
.has-rail .gx-switch button[aria-selected="true"] { background: var(--ink); color: var(--on-accent); border-color: var(--ink); }
.has-rail .gx-switch button[aria-selected="true"] small { color: rgba(245, 243, 238, .75); }
@media (min-width: 961px) {
  /* on the grey canvas a white card needs no outline */
  .has-rail .card { border-color: transparent; border-radius: 28px; background: var(--card-bg); }
}
.has-rail .rtabs button[aria-selected="true"], .has-rail .seg button[aria-pressed="true"] { border-radius: var(--r-pill); }

/* phones only */
.mbar, .bnav { display: none; }

@media (max-width: 960px) {
  .has-bnav .side { display: none; }
  .has-bnav { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .has-bnav .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }

  .mbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    max-width: 1560px; margin-inline: auto; padding: 12px var(--s-16) 0;
  }
  .dash-body:not(.is-loaded) .mbar { visibility: hidden; }
  .mbar__logo .logo__word { height: 26px; }
  .mbar__logo .logo__mark { width: 32px; height: 32px; }
  .mbar__logo .logo__mark svg { width: 32px; height: 32px; }

  .bnav {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 70;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--border-strong);
    box-shadow: var(--shadow-float);
  }
  .bnav__i {
    display: grid; justify-items: center; gap: 2px; min-height: 54px; padding: 4px 2px;
    border: 0; background: none; font: inherit; font-size: 11.5px; color: var(--muted); cursor: pointer;
    border-radius: 10px; -webkit-tap-highlight-color: transparent;
  }
  .bnav__icon { width: 44px; height: 28px; padding: 4px 12px; border-radius: var(--r-pill); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .bnav__i.is-active { color: var(--ink); font-weight: var(--w-semibold); }
  .bnav__i.is-active .bnav__icon { background: var(--accent); color: var(--on-accent); }
  /* a floating white pill above the page, the current tab a purple capsule */
  .dash-body .bnav { inset-inline: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); padding: 6px; border: 0; border-radius: 26px; }
  .dash-body .bnav__icon { width: 52px; height: 32px; padding: 6px 16px; }
  .bnav__i:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
  .bnav__i .bnav__icon circle { fill: currentColor; stroke: none; }
}

/* bottom sheets («تعلّم», «المزيد») */
.sheet {
  width: 100%; max-width: 560px; margin: auto auto 0; padding: var(--s-16) var(--s-16) calc(var(--s-16) + env(safe-area-inset-bottom));
  border: 1px solid var(--border-strong); border-bottom: 0; border-radius: var(--r-panel) var(--r-panel) 0 0;
  background: var(--surface); color: var(--ink); max-height: 85vh;
}
.sheet::backdrop { background: rgba(23, 25, 23, .28); }
.sheet__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sheet__head h2 { font-size: 18px; font-weight: var(--w-display); }
.sheet__list { display: grid; gap: 4px; }
.sheet__row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: var(--r-card);
  border: 0; background: none; font: inherit; color: var(--ink); text-align: start; cursor: pointer;
}
.sheet__row:hover, .sheet__row:focus-visible { background: var(--lilac); }
.sheet__row.is-active { background: var(--accent-soft); }
.sheet__row b { display: block; font-size: 15px; font-weight: var(--w-semibold); }
.sheet__row small { display: block; font-size: 12px; color: var(--muted); }
.sheet__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--canvas); border: 1px solid var(--border); }
.sheet__icon .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* «تعلّم»: a grid of coloured tiles; the icon says what it is, the name is one word */
.sheet__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.sheet__tile {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; padding: 14px 6px 12px;
  border-radius: var(--r-card); color: var(--ink); text-align: center; text-decoration: none;
}
.sheet__tile:hover, .sheet__tile:focus-visible { background: var(--lilac); }
.sheet__tile.is-active { background: var(--accent-soft); }
.sheet__tile .sheet__icon { width: 56px; height: 56px; border: 0; border-radius: 18px; }
.sheet__tile .sheet__icon .icon { width: 26px; height: 26px; }
.sheet__tile b { font-size: 13px; font-weight: var(--w-semibold); line-height: 1.4; }
.sheet__tile small { position: absolute; top: 8px; inset-inline-end: 8px; padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--surface); box-shadow: 0 0 0 1px var(--border); font-size: 10.5px; color: var(--muted); }
.sheet__later { margin: var(--s-16) 4px 0; padding-top: 12px; border-top: 1.5px dashed var(--border); }
@media (max-width: 960px) {
  .has-bnav .dash-head { flex-wrap: nowrap; align-items: flex-start; }
  .has-bnav .dash-tools { flex: none; }
  .has-bnav .dash-tools:empty { display: none; }
}

/* count-ups (nav.js): equal-width digits, so a counting number never nudges the line */
[data-count] { font-variant-numeric: tabular-nums; }

/* profile menu: an icon before each item (nav.js adds them) */
.pop--menu > a:has(> .icon), .pop--menu > button:has(> .icon) { display: flex; align-items: center; gap: 10px; }
.pop--menu > a > .icon, .pop--menu > button > .icon { width: 18px; height: 18px; flex: none; color: var(--muted); }
.pop--menu > :is(a, button):hover > .icon { color: var(--ink); }

/* menus, dialogs and bottom sheets fade in instead of popping (opacity only: moving Arabic text loses its marks in
   Safari); their rows answer the pointer softly. «حركة أقل» / the system setting make all of it instant. */
@keyframes ui-in { from { opacity: 0; } }
.pop:not([hidden]) { animation: ui-in 120ms ease-out; }
dialog.dlg[open], dialog.sheet[open] { animation: ui-in 150ms ease-out; }
dialog.dlg[open]::backdrop, dialog.sheet[open]::backdrop { animation: ui-in 180ms ease-out; }
.pop--menu > a, .pop--menu > button, .sheet__row, .sheet__tile { transition: background-color 120ms ease, color 120ms ease; }
.pop--menu > a:active, .pop--menu > button:active, .sheet__row:active, .sheet__tile:active { background: var(--border); }