/* kb seg - the segmented "vælger": pick one of several views or sources (mockup 24-vaelger.html, V2 "iOS med glid").
   A grey track; the chosen option sits on a raised white pill with dark text, and the pill glides to a new choice
   (--kb-ease-out; it simply switches under reduced motion). It must look neither like a primary button (blue = action)
   nor like tabs (an underline).
     <div class="kb-seg [kb-seg--sm] [kb-seg--fill]" role="group" aria-label="…">
       <button type="button" aria-pressed="true"><kb-icon …/>Tekst</button> …
     </div>
     radios: <div class="kb-seg" role="radiogroup"><label class="kb-seg__opt"><input type="radio" …><span>…</span></label> …</div>
   seg.js draws the pill as the group's ::before from --kb-seg-x/y/w/h once it has placed it ([data-kb-seg="on"]);
   until then (no JS yet, or the group is hidden) the chosen option carries the pill look itself.
   --sm: the compact height next to small buttons; --fill: the options share the full width.
   data-kb-tone="err" on an option: its text is red while chosen (a choice with a meaning, e.g. an expense). */
@layer kb.components {

  /* ---------- colours (light + dark; dark exists twice, keep in step) ---------- */
  :root,
  [data-theme="light"] {
    --kb-seg-track: color-mix(in srgb, var(--kb-text) 7%, transparent);
    --kb-seg-pill: var(--kb-card);
    --kb-seg-pill-shadow: 0 1px 2px rgba(10, 30, 70, .12), 0 0 0 1px color-mix(in srgb, var(--kb-text) 6%, transparent);
  }
  :root[data-theme="dark"],
  [data-theme="dark"] {
    --kb-seg-track: color-mix(in srgb, #fff 7%, transparent);
    --kb-seg-pill: color-mix(in srgb, #fff 12%, var(--kb-card));
    --kb-seg-pill-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --kb-seg-track: color-mix(in srgb, #fff 7%, transparent);
      --kb-seg-pill: color-mix(in srgb, #fff 12%, var(--kb-card));
      --kb-seg-pill-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
    }
  }

  .kb-seg {
    position: relative;                 /* the options' offsetLeft/offsetTop are measured from here */
    isolation: isolate;
    display: inline-flex;
    flex-wrap: wrap;                    /* 360 px: a long group wraps instead of being cut; the pill follows */
    align-items: center;
    align-self: center;                 /* a row of taller controls does not stretch the track */
    max-width: 100%;
    box-sizing: border-box;
    padding: 3px;
    border-radius: 6px;
    background: var(--kb-seg-track);
    vertical-align: middle;
    /* unchosen text: --kb-text-muted is 4.30:1 on the track over the page; 15% toward --kb-text gives >= 5.1:1 light, >= 6.1:1 dark */
    --kb-seg-muted: color-mix(in srgb, var(--kb-text) 15%, var(--kb-text-muted));
  }
  .kb-seg::before {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: var(--kb-seg-w, 0);
    height: var(--kb-seg-h, 0);
    border-radius: 4px;
    background: var(--kb-seg-pill);
    box-shadow: var(--kb-seg-pill-shadow);
    transform: translate(var(--kb-seg-x, 0), var(--kb-seg-y, 0));
    pointer-events: none;
  }
  .kb-seg[data-kb-seg="on"]::before { content: ""; }

  .kb-seg > button,
  .kb-seg__opt > span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-sizing: border-box;
    height: 32px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--kb-seg-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 600;                   /* the same for every option, so a choice never shifts the others */
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
  }
  .kb-seg__opt { position: relative; z-index: 1; display: inline-flex; margin: 0; }
  .kb-seg__opt > input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .kb-seg > button > svg,
  .kb-seg > button > i[data-lucide] { flex: none; width: 16px; height: 16px; }

  .kb-seg > button:hover:not([aria-pressed="true"], :disabled),
  .kb-seg__opt:hover > input:not(:checked, :disabled) + span { color: var(--kb-text); }
  .kb-seg > button[aria-pressed="true"],
  .kb-seg__opt > input:checked + span { color: var(--kb-text); }

  /* opt-in tone for a choice that carries meaning (Likviditetsberegner "Udgift"): data-kb-tone="err" on the button or
     .kb-seg__opt colours its text when chosen; the pill stays white. A touch of --kb-text keeps it >= 4.5:1 on the dark
     pill (6.35:1 light, 4.81:1 dark; plain --kb-status-err-ink is 4.45:1 there). */
  .kb-seg > button[data-kb-tone="err"][aria-pressed="true"],
  .kb-seg__opt[data-kb-tone="err"] > input:checked + span { color: color-mix(in srgb, var(--kb-status-err-ink) 90%, var(--kb-text)); }

  /* until seg.js has placed the pill: the chosen option carries it */
  .kb-seg:not([data-kb-seg="on"]) > button[aria-pressed="true"],
  .kb-seg:not([data-kb-seg="on"]) > .kb-seg__opt > input:checked + span {
    background: var(--kb-seg-pill);
    box-shadow: var(--kb-seg-pill-shadow);
  }

  .kb-seg > button:focus-visible,
  .kb-seg__opt > input:focus-visible + span { outline: 2px solid var(--kb-focus-ring); outline-offset: 2px; }

  .kb-seg > button:disabled,
  .kb-seg__opt > input:disabled,
  .kb-seg__opt > input:disabled + span { cursor: default; }
  .kb-seg > button:disabled:not([aria-pressed="true"]),
  .kb-seg__opt > input:disabled:not(:checked) + span { opacity: .55; }

  /* ---------- sizes ---------- */
  .kb-seg--sm { padding: 2px; }
  .kb-seg--sm > button,
  .kb-seg--sm .kb-seg__opt > span { height: 28px; padding: 0 11px; gap: 6px; font-size: 13px; }

  .kb-seg--fill { display: flex; width: 100%; }
  .kb-seg--fill > button,
  .kb-seg--fill > .kb-seg__opt { flex: 1 1 0; min-width: 0; }
  .kb-seg--fill > .kb-seg__opt > span { flex: 1; }

  @media (prefers-reduced-motion: no-preference) {
    .kb-seg[data-kb-seg="on"]:not([data-kb-seg-still])::before {
      transition: transform .35s var(--kb-ease-out), width .35s var(--kb-ease-out), height .35s var(--kb-ease-out);
    }
    .kb-seg > button,
    .kb-seg__opt > span { transition: color .2s; }
  }
}