/* worthly.si — dark-mode repair layer.
   The base sheet flips its colour tokens for a dark screen, but a set of rules kept a *fixed*
   light value: white card backgrounds, light chips, dark brand-blue link text on a dark page.
   That produced light-on-light and dark-on-dark text on phones (the mobile sales cards were
   unreadable). This file loads after every other stylesheet and only touches the dark scheme,
   so the light theme is untouched. */

@media (prefers-color-scheme: dark) {
  /* semantic chip colours: a light amber/green/red background cannot carry light text */
  :root {
    --warn: #F2C879; --warn-bg: #2A2114;
    --ok: #79E0AC; --ok-bg: #0E2A1E;
    --bad: #FF9E96; --bad-bg: #2E1618;
  }

  /* links: --brand-600 (#1447CC) is 2.4:1 on a dark card — every link and name on the site
     disappeared. .btn keeps its own colour, so buttons are unaffected. */
  a { color: #8FB4FF; }
  a:visited { color: #B9A6FF; }
  a.skip { color: #8FB4FF; }

  /* the mobile menu panel was a hard white sheet holding light text */
  .menu .panel { background: var(--card); border-color: var(--line); }
  .menu .panel a { color: var(--ink); }

  /* notes: base .note already uses the dark --brand-050, the warn/ok/bad tints did not */
  .note { color: #D3DEF7; }
  .note b { color: #FFFFFF; }
  .note.warn { background: var(--warn-bg); border-color: #4A3C1E; color: #EFE1C2; }
  .note.ok { background: var(--ok-bg); border-color: #23543E; color: #D9F3E6; }
  .note.bad { background: var(--bad-bg); border-color: #5A2A2A; color: #F8DAD7; }

  /* small chips that kept light backgrounds */
  .tagx { background: #15204A; border-color: var(--line-2); color: #AFC4FF; }
  .tagx.soon, .pill.unknown { background: #15204A; border-color: var(--line-2); color: #BFCDF5; }

  /* numbers and status words that were painted in the dark brand blue */
  .status.warn, .status.ok, .status.bad { color: #CFDBF7; }
  .mult { color: #CFDBF7; }
  .dial-out { color: #FFFFFF; }
  span.bad, .bad { color: var(--bad); }
  span.good, .good { color: var(--ok); }

  /* category tags carry their own colour inline as --c; on a dark card the raw brand colour
     drops to ~3:1, so lift it toward white for the text while the chip keeps its tint */
  .cat-tag { color: #AFC4FF; color: color-mix(in srgb, var(--c, #1F5BFF) 42%, #FFFFFF); }

  /* named links that carry their own colour and beat the plain `a` rule */
  nav a.sell, .nav a.sell { color: #8FB4FF; }
  .bcard .read { color: #8FB4FF; }
  .drivers .mult { background: #15204A; color: #BFCDF5; }
  .drivers .mult.down { background: #3A2A12; color: #F3C77E; }
  .sc-num b { color: #7FA6FF; }
  /* text links inside content blocks (FAQ answers, prose) — never buttons */
  .faq details a:not(.btn), article p a:not(.btn), .card p a:not(.btn), .prose a:not(.btn) { color: #8FB4FF; }
  /* the menu panel's highlighted "List your domain" link (#1F5BFF on a dark panel) */
  .menu .panel a[href="/list-your-domain"] { color: #8FB4FF; }
  /* labels and ribbons that kept a fixed dark value on a dark card */
  .lform .field-label { color: var(--ink-2); }
  .ltier .lt-ribbon { background: #3C63D8; color: #FFFFFF; }

  /* inputs and selects: white field + var(--ink) text is invisible once --ink turns light */
  .checker input, .filters input, .filters select, select,
  input[type=text], input[type=search], input[type=email], input[type=number], input[type=url], textarea {
    background: #0E1836; color: var(--ink); border-color: var(--line-2);
  }
  .checker input::placeholder, input::placeholder, textarea::placeholder { color: #8E9CC0; }
  select option { background: #0E1836; color: var(--ink); }

  /* mobile card rows: keep the same shape as the desktop row cards */
  .tablewrap table[data-cards] tbody tr { background: var(--card); }
  .tablewrap table[data-cards] td+td { border-top-color: var(--line); }
}