/* kb check - mockup 06-komponenter.html, "Tjekboks" and "Tjekliste".
   Markup:  <label class="kb-check"><input type="checkbox"><span class="kb-check__box"></span><span class="kb-check__text">...</span></label>
   The native input stays (visually hidden, focusable): forms and `change` listeners keep working.
   The box is 22px border-box with a 2px border, so checked and unchecked are exactly the same size; the colour
   fill slides in skewed *inside* the border, the check mark is drawn (wiped in) and pops.
   Lists: put .kb-checklist on the list and [data-id] on its items; check.js (kb.checklist.init) adds the rest. */
@layer kb.components {

  /* ---------- fill colours (same stops as the primary button; dark exists twice, keep in step) ---------- */
  :root,
  [data-theme="light"] {
    --kb-check-a: #2b56c4; --kb-check-a2: #5840d4; --kb-check-a3: #0b72c4;
    --kb-check-ring: #203f8c;          /* the darker blue the ring takes when checked */
  }
  :root[data-theme="dark"],
  [data-theme="dark"] {
    --kb-check-a: #4069d4; --kb-check-a2: #6a52e4; --kb-check-a3: #1674c4;
    --kb-check-ring: #4a74e0;   /* lighter than the fill: on the dark card a darker ring would be only 2.5:1 */
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --kb-check-a: #4069d4; --kb-check-a2: #6a52e4; --kb-check-a3: #1674c4;
      --kb-check-ring: #4a74e0;
    }
  }

  /* ---------- the checkbox ---------- */
  .kb-check {
    --kb-check-size: 22px;
    position: relative;
    display: inline-block;
    min-height: var(--kb-check-size);
    padding-inline-start: calc(var(--kb-check-size) + 10px);
    line-height: var(--kb-check-size);
    cursor: pointer;
  }
  .kb-check > input {            /* visually hidden, but on the box so the browser scrolls/focuses it right */
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: var(--kb-check-size);
    height: var(--kb-check-size);
    margin: 0;
    opacity: 0;
    cursor: inherit;
  }
  .kb-check__box {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    box-sizing: border-box;
    width: var(--kb-check-size);
    height: var(--kb-check-size);
    overflow: hidden;            /* clips the fill to the padding box, so it never paints over the ring */
    border: 2px solid var(--kb-control-edge);
    border-radius: var(--kb-radius);
    background: var(--kb-card);
    transition: border-color .25s;
  }
  .kb-check:hover > input:not(:disabled) ~ .kb-check__box { border-color: var(--kb-primary); }
  .kb-check > input:checked ~ .kb-check__box,
  .kb-check:hover > input:checked:not(:disabled) ~ .kb-check__box { border-color: var(--kb-check-ring); }
  .kb-check > input:focus-visible ~ .kb-check__box { outline: 2px solid var(--kb-focus-ring); outline-offset: 2px; }

  /* the fill: wider than the box, soft edge on the right, slides in from the left on a skewed edge */
  .kb-check__box::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: -14px; right: -14px;
    background: linear-gradient(100deg, var(--kb-check-a), var(--kb-check-a2) 45%, var(--kb-check-a3));
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 10px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 10px), transparent);
    transform: translateX(-100%) skewX(var(--kb-skew));
    transition: transform .3s var(--kb-ease-out);
  }
  .kb-check > input:checked ~ .kb-check__box::before { transform: translateX(8px) skewX(var(--kb-skew)); }

  /* the check mark: wiped in from the left, then pops */
  .kb-check__box::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    clip-path: inset(0 100% 0 0);
    transform: scale(.6);
    transition: clip-path .22s ease .02s, transform .2s;
  }
  .kb-check > input:checked ~ .kb-check__box::after {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
    transition: clip-path .28s var(--kb-ease-out) .2s, transform .4s var(--kb-ease-spring) .2s;
  }

  .kb-check > input:disabled ~ .kb-check__box,
  .kb-check > input:disabled ~ .kb-check__text { opacity: .5; }
  .kb-check:has(> input:disabled) { cursor: not-allowed; }

  .kb-check__note {              /* optional second line inside a label; not struck through */
    display: block;
    font-size: 13px;
    line-height: 1.35;
    color: var(--kb-text-muted);
  }

  /* ---------- checklist ---------- */
  .kb-checklist { list-style: none; margin: 0; padding: 0; position: relative; }
  .kb-checklist > [data-id] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 4px;
    border-top: 1px solid var(--kb-line);
  }
  .kb-checklist > [data-id]:first-child { border-top: 0; }
  .kb-checklist > [data-id] > .kb-check { flex: 1 1 auto; min-width: 0; display: block; }
  .kb-checklist__meta {
    flex: none;
    margin-inline-start: auto;
    display: flex; gap: 6px; align-items: center;
    font-size: 12px; line-height: 22px;
    color: var(--kb-text-muted);
  }

  /* text: muted when done, struck through from the left (a background line, so it also works across wrapped
     lines: every line fragment gets its own stroke) */
  .kb-checklist .kb-check__text {
    font-weight: 600;
    background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / 0% 2px;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
    transition: color .3s .2s, background-size .32s var(--kb-ease-out) .18s;
  }
  .kb-checklist .kb-check > input:checked ~ .kb-check__text {
    color: var(--kb-text-muted);
    background-size: 100% 2px;
  }
  .kb-checklist .kb-check__note { font-weight: 400; }

  /* grip: only on user-ordered lists */
  .kb-grip {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 30px;
    margin: -4px 0 -4px -4px;
    padding: 0;
    border: 0;
    border-radius: var(--kb-radius);
    background: transparent;
    color: var(--kb-control-edge);
    cursor: grab;
    touch-action: none;
    transition: color .2s, background .2s;
  }
  .kb-grip svg { width: 16px; height: 16px; fill: currentColor; pointer-events: none; }
  .kb-checklist > [data-id]:hover .kb-grip,
  .kb-grip:focus-visible { color: var(--kb-text-muted); }
  .kb-grip:hover { background: var(--kb-hover); }
  .kb-grip:focus-visible { outline: 2px solid var(--kb-focus-ring); outline-offset: 1px; }

  .kb-checklist > [data-id].is-dragging {
    position: relative;
    z-index: 5;
    border-radius: var(--kb-radius-card);
    background: var(--kb-card);
    box-shadow: var(--kb-shadow-pop);
    border-top-color: transparent;
    transition: box-shadow .2s;
  }
  .kb-checklist > [data-id].is-dragging .kb-grip { cursor: grabbing; color: var(--kb-primary); }
  .kb-checklist > [data-id].is-dragging + [data-id] { border-top-color: transparent; }
  .kb-dragging, .kb-dragging * { cursor: grabbing !important; }
  .kb-dragging { user-select: none; -webkit-user-select: none; }

  .kb-check-live {               /* screen-reader announcements for keyboard moves */
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  /* ---------- reduced motion: plain state changes ---------- */
  @media (prefers-reduced-motion: reduce) {
    .kb-check__box,
    .kb-check__box::before,
    .kb-check__box::after,
    .kb-checklist .kb-check__text,
    .kb-grip { transition: none !important; }
  }
}