/* ==========================================================================
   Mortaga — reverse logistics for Egyptian e-commerce
   Palette is drawn from the warehouse floor, not the SaaS template:
   pine-green (tilework), concrete (cool bone), saffron (spice) as the
   single accent. Neutrals are green-shifted so they read chosen, not default.
   ========================================================================== */

:root {
  --ink:        #111917;
  --ink-2:      #1C2724;
  --pine:       #0B4A41;
  --pine-lift:  #127264;
  --pine-glow:  #1E9C89;
  --concrete:   #E4E7E1;
  --paper:      #F4F6F2;
  --surface:    #FFFFFF;
  --saffron:    #B8741A;
  --saffron-hi: #D9902B;
  --muted:      #56655F;
  --faint:      #7F8F88;
  --line:       #D3DAD4;
  --line-hi:    #BAC5BD;

  /* Semantic status — deliberately NOT the brand hue. In the app these mean
     approved / needs review / rejected, so they are data and must never be
     reassigned for decoration. */
  --ok:         #15803D;
  --warn:       #B45309;
  --err:        #C2261E;

  --bg:      var(--paper);
  --fg:      var(--ink);
  --card:    var(--surface);
  --accent:  var(--pine);
  --accent-t:var(--pine-lift);

  --disp: "Bricolage Grotesque", "Segoe UI Variable Display", system-ui, sans-serif;
  --body: "IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --measure: 62ch;
  --gutter: clamp(18px, 4.5vw, 56px);
  --maxw: 1160px;

  /* ---- shape ----
     3px read as a 2012 admin panel. Surfaces get real curvature; controls stay
     slightly tighter than the cards that hold them so nesting reads correctly. */
  --r-xs: 6px;
  --r:    9px;    /* inputs, small controls */
  --r-md: 12px;   /* cards, panels */
  --r-lg: 16px;   /* big containers, dialogs */
  --r-full: 100px;

  /* ---- elevation ----
     Layered, not a single blurry drop. Dark mode needs a rim-light instead of
     a shadow, since a shadow on near-black is invisible. */
  --sh-1: 0 1px 2px rgba(16,25,23,.05), 0 1px 1px rgba(16,25,23,.04);
  --sh-2: 0 2px 4px rgba(16,25,23,.05), 0 6px 14px -6px rgba(16,25,23,.10);
  --sh-3: 0 4px 8px rgba(16,25,23,.06), 0 16px 32px -12px rgba(16,25,23,.16);
  --rim: inset 0 1px 0 rgba(255,255,255,.5);

  /* ---- motion ----
     One curve, three speeds. Consistency is what reads as "smooth"; a page
     where every element eases differently reads as janky even when fast. */
  --ease: cubic-bezier(.22,.72,.28,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: 120ms;
  --t: 200ms;
  --t-slow: 340ms;
}

/* Arabic mode: Bricolage has no Arabic coverage, so display collapses into
   the Plex Arabic superfamily rather than silently falling back mid-heading. */
:root[lang="ar"] {
  --disp: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:     #0A100E;
    --fg:     #E5EAE6;
    --card:   #131C19;
    --paper:  #0A100E;
    --surface:#131C19;
    --concrete:#1A2521;
    --muted:  #93A49D;
    --faint:  #6B7C76;
    --line:   #1F2C28;
    --line-hi:#2B3A35;
    --accent: #1E9C89;
    --accent-t: #35C4AE;
    --saffron: #E0A244;
    --saffron-hi: #EDB863;
    --ok:  #4ADE80;
    --warn:#FBBF24;
    --err: #FB7185;
    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 2px 6px rgba(0,0,0,.45), 0 8px 20px -8px rgba(0,0,0,.55);
    --sh-3: 0 6px 14px rgba(0,0,0,.5), 0 20px 44px -14px rgba(0,0,0,.65);
    --rim: inset 0 1px 0 rgba(255,255,255,.055);
  }
}
:root[data-theme="dark"] {
  --bg:#0A100E; --fg:#E5EAE6; --card:#131C19; --paper:#0A100E; --surface:#131C19;
  --concrete:#1A2521; --muted:#93A49D; --faint:#6B7C76; --line:#1F2C28; --line-hi:#2B3A35;
  --accent:#1E9C89; --accent-t:#35C4AE; --saffron:#E0A244; --saffron-hi:#EDB863;
  --ok:#4ADE80; --warn:#FBBF24; --err:#FB7185;
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 2px 6px rgba(0,0,0,.45), 0 8px 20px -8px rgba(0,0,0,.55);
  --sh-3: 0 6px 14px rgba(0,0,0,.5), 0 20px 44px -14px rgba(0,0,0,.65);
  --rim: inset 0 1px 0 rgba(255,255,255,.055);
}
:root[data-theme="light"] {
  --bg:#F4F6F2; --fg:#111917; --card:#FFFFFF; --paper:#F4F6F2; --surface:#FFFFFF;
  --concrete:#E4E7E1; --muted:#56655F; --faint:#7F8F88; --line:#D3DAD4; --line-hi:#BAC5BD;
  --accent:#0B4A41; --accent-t:#127264; --saffron:#B8741A; --saffron-hi:#D9902B;
  --ok:#15803D; --warn:#B45309; --err:#C2261E;
  --sh-1: 0 1px 2px rgba(16,25,23,.05), 0 1px 1px rgba(16,25,23,.04);
  --sh-2: 0 2px 4px rgba(16,25,23,.05), 0 6px 14px -6px rgba(16,25,23,.10);
  --sh-3: 0 4px 8px rgba(16,25,23,.06), 0 16px 32px -12px rgba(16,25,23,.16);
  --rim: inset 0 1px 0 rgba(255,255,255,.5);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible {
  outline: 2px solid var(--accent-t);
  outline-offset: 3px;
  border-radius: var(--r);
}

.shell { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- typography ---------- */
h1, h2, h3 { font-family: var(--disp); margin: 0; text-wrap: balance; }
h1 {
  font-size: clamp(40px, 7.4vw, 84px);
  line-height: .98;
  letter-spacing: -.035em;
  font-weight: 800;
}
h2 {
  font-size: clamp(27px, 4.2vw, 44px);
  line-height: 1.06;
  letter-spacing: -.028em;
  font-weight: 800;
}
h3 {
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -.012em;
  font-weight: 700;
}
:root[lang="ar"] h1 { letter-spacing: 0; line-height: 1.18; }
:root[lang="ar"] h2 { letter-spacing: 0; line-height: 1.3; }
:root[lang="ar"] h3 { letter-spacing: 0; }

p { margin: 0; max-width: var(--measure); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-t);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  flex: none;
}
:root[lang="ar"] .eyebrow { letter-spacing: .04em; }

.lede { font-size: clamp(17px, 2.1vw, 20.5px); color: var(--muted); line-height: 1.56; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 62px;
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--disp); font-weight: 800; font-size: 19px;
  letter-spacing: -.03em; color: var(--fg); text-decoration: none;
}
:root[lang="ar"] .brand { letter-spacing: 0; }
.mark { width: 21px; height: 21px; flex: none; color: var(--accent-t); }
.nav-actions { display: flex; align-items: center; gap: 8px; }

.ghost {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase;
  background: none; border: 1px solid var(--line-hi); color: var(--muted);
  padding: 7px 13px; border-radius: 100px; cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.ghost:hover { color: var(--fg); border-color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent); }
.ghost:active { transform: scale(.96); }
.ghost { transition: color var(--t) var(--ease), border-color var(--t) var(--ease),
                     background var(--t) var(--ease), transform var(--t-fast) var(--ease); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--body); font-weight: 600; font-size: 15px;
  padding: 12px 22px; border-radius: var(--r-full);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background var(--t) var(--ease), transform var(--t-fast) var(--ease),
              box-shadow var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease);
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(.985); transition-duration: 60ms; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--sh-1); }
.btn-primary:hover { background: var(--accent-t); transform: translateY(-1px); box-shadow: var(--sh-2); }
/* background:none matters — without it the UA button colour shows through and
   light text lands on a light button. */
.btn-line { background: none; border-color: var(--line-hi); color: var(--fg); }
.btn-line:hover { border-color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.btn svg { width: 15px; height: 15px; flex: none; }
:root[dir="rtl"] .btn svg { transform: scaleX(-1); }

/* ---------- hero ---------- */
.hero { padding: clamp(52px, 9vw, 104px) 0 clamp(40px, 6vw, 72px); }
.hero-grid {
  display: grid; gap: clamp(34px, 5vw, 60px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: 1.06fr .94fr; align-items: center; }
}
.hero-copy { display: grid; gap: 22px; justify-items: start; }
:root[dir="rtl"] .hero-copy { justify-items: end; }
.hero h1 span { color: var(--accent-t); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 11px; padding-top: 4px; }
.hero-note {
  font-family: var(--mono); font-size: 12px; color: var(--faint);
  letter-spacing: .04em;
}

/* ---------- calculator ---------- */
.calc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(20px, 3vw, 30px);
  display: grid; gap: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 12px 34px -22px rgba(0,0,0,.22);
}
.calc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.calc-title { font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); }
:root[lang="ar"] .calc-title { letter-spacing: .04em; }

.field { display: grid; gap: 9px; }
.field-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.field label { font-size: 14px; font-weight: 600; color: var(--muted); }
.field output { font-family: var(--mono); font-size: 14.5px; font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; border-radius: 100px;
  background: var(--line-hi); cursor: pointer; margin: 6px 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--accent-t); border: 3px solid var(--card);
  box-shadow: 0 0 0 1px var(--accent-t);
  cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent-t); border: 3px solid var(--card);
  box-shadow: 0 0 0 1px var(--accent-t); cursor: grab;
}

.calc-out {
  border-top: 1px dashed var(--line-hi);
  padding-top: 18px;
  display: grid; gap: 4px;
}
.calc-out .big {
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(34px, 5.4vw, 50px); line-height: 1;
  letter-spacing: -.035em; color: var(--accent-t);
  font-variant-numeric: tabular-nums;
}
:root[lang="ar"] .calc-out .big { letter-spacing: 0; }
.calc-out .cap { font-size: 13.5px; color: var(--muted); max-width: 40ch; }
.calc-foot { font-family: var(--mono); font-size: 11px; color: var(--faint); line-height: 1.5; }

/* ---------- strip of stats ---------- */
.strip { border-block: 1px solid var(--line); background: var(--concrete); }
.strip-in {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  background: var(--line);
}
.stat { background: var(--bg); padding: 26px var(--gutter); display: grid; gap: 5px; }
.stat .n {
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(30px, 4.4vw, 42px); line-height: 1;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
:root[lang="ar"] .stat .n { letter-spacing: 0; }
.stat .l { font-size: 14px; color: var(--muted); line-height: 1.45; }

/* ---------- generic section ---------- */
section { padding: clamp(58px, 9vw, 104px) 0; }
.sec-head { display: grid; gap: 15px; margin-bottom: clamp(30px, 4vw, 48px); max-width: 640px; }

/* ---------- steps ---------- */
.steps { display: grid; gap: 0; }
.step {
  display: grid; gap: 8px 26px;
  grid-template-columns: 1fr;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 800px) {
  .step { grid-template-columns: 68px 250px 1fr; align-items: start; }
}
.step-n {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  color: var(--accent-t); padding-top: 4px;
}
.step p { font-size: 15px; color: var(--muted); }

/* ---------- feature cards ---------- */
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 5px; padding: 22px 20px;
  display: grid; gap: 9px; align-content: start;
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--line-hi); transform: translateY(-2px); }
.card .ic { width: 21px; height: 21px; color: var(--accent-t); margin-bottom: 3px; }
.card p { font-size: 14.5px; color: var(--muted); }

/* ---------- egypt block ---------- */
.egypt { background: var(--concrete); border-block: 1px solid var(--line); }
.egypt-grid { display: grid; gap: clamp(30px, 5vw, 56px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .egypt-grid { grid-template-columns: .9fr 1.1fr; } }
.reasons { display: grid; gap: 0; }
.reason {
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  padding: 16px 0; border-top: 1px solid var(--line-hi);
}
.reason:first-child { border-top: 0; padding-top: 0; }
.reason .tick { width: 17px; height: 17px; color: var(--accent-t); margin-top: 4px; flex: none; }
.reason b { font-weight: 650; display: block; margin-bottom: 2px; font-size: 15.5px; }
.reason span { font-size: 14.5px; color: var(--muted); }

/* ---------- cta ---------- */
.cta-wrap { text-align: center; display: grid; gap: 22px; justify-items: center; }
.cta-wrap p { margin-inline: auto; }
.cta-row { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); padding: 40px 0 52px; }
.foot-in { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; }
.foot-in p, .foot-in a { font-size: 13.5px; color: var(--faint); }
.foot-in a { text-decoration: none; }
.foot-in a:hover { color: var(--fg); }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }


/* ==========================================================================
   Shared form + banner primitives.
   These live here, not in auth.css, because the dashboard pages use them too
   and only load styles.css + app-shell.css. Leaving them in auth.css meant an
   unstyled .banner rendered its icon at full size.
   ========================================================================== */

form { display: grid; gap: 15px; }

.f { display: grid; gap: 6px; }
.f-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.f label { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.f-link { font-size: 12.5px; color: var(--accent-t); text-decoration: none; }
.f-link:hover { text-decoration: underline; }

.input-wrap { position: relative; display: flex; }
.f input {
  width: 100%;
  font-family: var(--body); font-size: 15px;
  padding: 11px 13px;
  min-height: 44px;
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--line-hi);
  border-radius: var(--r);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.f input::placeholder { color: var(--faint); }
.f input:hover { border-color: var(--muted); }
.f input:focus {
  outline: none;
  border-color: var(--accent-t);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-t) 18%, transparent);
}
.f input[aria-invalid="true"] { border-color: var(--err); }
.f input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 18%, transparent);
}
.f input[type="password"] { padding-inline-end: 44px; }

.peek {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: 42px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--faint);
  border-radius: var(--r);
}
.peek:hover { color: var(--fg); }
.peek svg { width: 17px; height: 17px; }

.err {
  font-size: 12.5px; color: var(--err);
  display: none; align-items: center; gap: 5px;
}
.err.on { display: flex; }
.err svg { width: 13px; height: 13px; flex: none; }

.hint { font-size: 12.5px; color: var(--faint); }

.check { display: flex; align-items: center; gap: 9px; }
.check input { width: 16px; height: 16px; accent-color: var(--accent-t); cursor: pointer; }
.check label { font-size: 13.5px; color: var(--muted); cursor: pointer; }

.btn-full { width: 100%; min-height: 46px; }
.btn[aria-busy="true"] { pointer-events: none; opacity: .72; }

.spin {
  width: 15px; height: 15px; flex: none;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  display: none;
}
.btn[aria-busy="true"] .spin { display: block; }
.btn[aria-busy="true"] svg { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 1.6s; } }

.divider {
  display: flex; align-items: center; gap: 13px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}
.divider::before, .divider::after {
  content: ""; height: 1px; background: var(--line); flex: 1;
}
:root[lang="ar"] .divider { letter-spacing: 0; }

.btn-oauth {
  width: 100%; min-height: 46px;
  background: var(--card); border: 1px solid var(--line-hi); color: var(--fg);
  font-weight: 500;
}
.btn-oauth:hover { border-color: var(--muted); background: var(--card); transform: none; }
.btn-oauth svg { width: 17px; height: 17px; }

.swap { font-size: 14px; color: var(--muted); text-align: center; }
.swap a { color: var(--accent-t); font-weight: 600; text-decoration: none; }
.swap a:hover { text-decoration: underline; }

.note {
  font-size: 12.5px; color: var(--faint); text-align: center;
  line-height: 1.5; max-width: 36ch; margin-inline: auto;
}
.note a { color: var(--muted); }

/* status banner (stub backend, errors, success) */
.banner {
  display: none; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r);
  font-size: 13.5px; line-height: 1.5;
  border: 1px solid transparent;
}
.banner.on { display: flex; }
.banner svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.banner.info { background: color-mix(in srgb, var(--accent-t) 10%, transparent); border-color: color-mix(in srgb, var(--accent-t) 30%, transparent); color: var(--fg); }
.banner.bad  { background: color-mix(in srgb, var(--err) 10%, transparent); border-color: color-mix(in srgb, var(--err) 30%, transparent); color: var(--fg); }
.banner.good { background: color-mix(in srgb, var(--ok) 12%, transparent); border-color: color-mix(in srgb, var(--ok) 32%, transparent); color: var(--fg); }

/* select, matching the text inputs */
.f select {
  width: 100%; font-family: var(--body); font-size: 15px; min-height: 44px;
  padding: 10px 12px; border-radius: var(--r);
  border: 1px solid var(--line-hi); background: var(--card); color: var(--fg);
}
.f select:focus {
  outline: none; border-color: var(--accent-t);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-t) 18%, transparent);
}

/* ==========================================================================
   Polish layer.
   Everything above sets structure; this makes it feel built rather than
   assembled. One easing curve, real elevation, and a response to every
   interaction — that consistency is what actually reads as "smooth".
   ========================================================================== */

/* form controls pick up the new shape + depth */
.f input, .f select, .dlg-in input, .dlg-in select, #swapSearch, .reason-slot select {
  border-radius: var(--r);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
              background var(--t) var(--ease);
}
.f input:hover, .f select:hover { border-color: var(--muted); }

/* Everything that can be clicked says so on hover and answers on press. */
button, [role="button"], .tile, .alt, .swap-item, .size-chip, .choice, .res-opt, .item {
  -webkit-tap-highlight-color: transparent;
}
.tile, .alt, .swap-item, .choice, .res-opt, .item, .kpi, .proof, .card {
  transition:
    border-color var(--t) var(--ease),
    box-shadow   var(--t) var(--ease),
    background   var(--t) var(--ease),
    transform    var(--t-fast) var(--ease);
}
.tile:active, .alt:active, .swap-item:active, .choice:active, .res-opt:active {
  transform: scale(.99); transition-duration: 60ms;
}

/* Rows: never `transition: all` — it animates layout and reads as lag. */
table.grid tbody tr {
  transition: background var(--t-fast) var(--ease);
}
table.grid tbody tr:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
tr.rowlink:active { background: color-mix(in srgb, var(--fg) 7%, transparent); }


/* Theme swap must not animate.
   Every themed property (shadow, background, border) would otherwise cross-fade
   at once, which looks like a glitch — and box-shadow built from a custom
   property can get stranded on the old value mid-interpolation, leaving light
   mode wearing dark-mode shadows. Kill transitions for the swap frame. */
:root.theme-swapping,
:root.theme-swapping *,
:root.theme-swapping *::before,
:root.theme-swapping *::after {
  transition: none !important;
  animation-duration: 0s !important;
}