/* ==========================================================================
   DLS home-page hero — scroll-driven light/dark split.

   Fills the first .ch-project__image tile in the /dls card. Two identical
   themed layers (light base + dark overlay clipped by a moving vertical
   divider); js/main.js drives --x from the tile's progress through the
   viewport, so the dark side grows as the reader scrolls — a live demo of a
   design system's theming.

   Everything is scoped under .ch-dls-split and sized in cqw (1cqw = 1% of the
   tile width) so the whole composition scales with the tile at any width.
   The markup is built in main.js; if that never runs the tile keeps its
   placeholder icon.
   ========================================================================== */

.ch-dls-split {
  --x: 0%;                         /* divider position, driven by main.js */
  position: relative;
  overflow: hidden;                /* clips tiles that bleed off the edges */
  border-radius: var(--ch-radius-xl);   /* match the other gallery placeholders */
  container-type: size;            /* establishes the cqw context */
  padding: 0;
}
.ch-dls-split, .ch-dls-split *, .ch-dls-split *::before, .ch-dls-split *::after { box-sizing: border-box; }
/* The gallery rule shrinks bare <svg> to 20%; our icons size themselves. */
.ch-dls-split .ic svg { width: 100%; height: 100%; display: block; }

.ch-dls-split .layer { position: absolute; inset: 0; }
.ch-dls-split .layer.dark { clip-path: inset(0 calc(100% - var(--x)) 0 0); will-change: clip-path; }

.ch-dls-split .divider {
  position: absolute; top: 0; bottom: 0; left: var(--x);
  width: 1.5px; z-index: 6; transform: translateX(-0.75px);
  background: #52525b; box-shadow: none;
  will-change: left;
}

/* ---- themed component surface ------------------------------------------- */
.ch-dls-split .ui {
  position: absolute; inset: 0; background: var(--bg); color: var(--fg);
  font-size: 2.2cqw; line-height: 1.25;
  font-family: "Noto Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
}
.ch-dls-split .layer.light .ui {
  --bg: #f4f4f5; --card: #ffffff; --fg: #09090b; --muted: #71717a;
  --border: #e4e4e7; --secondary: #ececf0; --secondary-fg: #18181b;
  --primary: #2563eb; --primary-fg: #ffffff;
  --accent-soft: #eff4ff; --track: #e4e4e7; --field: #ffffff;
  --red: #dc2626; --red-soft: #fef2f2; --green: #16a34a; --green-soft: #f0fdf4;
}
.ch-dls-split .layer.dark .ui {
  --bg: #09090b; --card: #18181b; --fg: #fafafa; --muted: #a1a1aa;
  --border: #27272a; --secondary: #1f1f23; --secondary-fg: #fafafa;
  --primary: #3b82f6; --primary-fg: #0b1220;
  --accent-soft: #172033; --track: #3f3f46; --field: #0c0c0f;
  --red: #f87171; --red-soft: #2a1618; --green: #4ade80; --green-soft: #0f2417;
}

.ch-dls-split .bento { position: absolute; inset: 0; }
.ch-dls-split .el { position: absolute; }

.ch-dls-split .card2 {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--card); border: 0.16cqw solid var(--border);
  border-radius: 1.6cqw; padding: 2.2cqw;
  display: flex; flex-direction: column;
}
.ch-dls-split .card2.sel { border-color: var(--primary); border-width: 0.3cqw; background: var(--accent-soft); }

.ch-dls-split .rowc { display: flex; align-items: center; gap: 1.4cqw; height: 100%; min-width: 0; }
.ch-dls-split .colc { display: flex; flex-direction: column; min-width: 0; }
.ch-dls-split .fill { flex: 1; min-width: 0; }
.ch-dls-split .mta  { margin-top: auto; }
.ch-dls-split .muted { color: var(--muted); }
.ch-dls-split .trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ch-dls-split .ic { flex: none; display: inline-grid; place-items: center; }

.ch-dls-split .thumb {
  width: 6cqw; height: 6cqw; border-radius: 1.4cqw; flex: none;
  background: var(--accent-soft); color: var(--primary); display: grid; place-items: center;
}
.ch-dls-split .thumb .ic { width: 3.2cqw; height: 3.2cqw; }

/* 28px circle / 16px icon at the 560px reference frame; scales with the tile */
.ch-dls-split .chip {
  width: 5cqw; height: 5cqw; border-radius: 50%; border: 0.16cqw solid var(--border);
  color: var(--muted); display: grid; place-items: center; flex: none;
}
.ch-dls-split .chip .ic { width: 2.86cqw; height: 2.86cqw; }

.ch-dls-split .badge-ic { width: 5.2cqw; height: 5.2cqw; border-radius: 50%; display: grid; place-items: center; flex: none; }
.ch-dls-split .badge-ic .ic { width: 2.9cqw; height: 2.9cqw; }

.ch-dls-split .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 1.2cqw;
  width: 100%; border: 0; border-radius: 1.4cqw;
  background: var(--primary); color: var(--primary-fg);
  font-size: 2.4cqw; font-weight: 600;
}

.ch-dls-split .flabel { color: var(--primary); font-size: 2cqw; font-weight: 600; margin-bottom: 1.4cqw; }
.ch-dls-split .field {
  width: 100%; border-radius: 1.4cqw; border: 0.2cqw solid var(--primary);
  box-shadow: 0 0 0 0.5cqw color-mix(in srgb, var(--primary) 18%, transparent);
  background: var(--field); display: flex; align-items: center; gap: 1.2cqw;
  padding: 0 1.6cqw; color: var(--muted); font-size: 2cqw;
}
.ch-dls-split .field .ic { width: 2.4cqw; height: 2.4cqw; flex: none; }
.ch-dls-split .caret { width: 0.16cqw; height: 2.4cqw; background: var(--primary); margin-left: -0.6cqw; }

.ch-dls-split .tabs { display: flex; align-items: center; background: var(--secondary); border-radius: 99cqw; padding: 0.7cqw; gap: 0.6cqw; height: 100%; }
.ch-dls-split .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.5cqw; padding: 1.1cqw 0.6cqw; border-radius: 99cqw; color: var(--muted); font-size: 1.75cqw; font-weight: 500; white-space: nowrap; }
.ch-dls-split .tab .ic { width: 3cqw; height: 3cqw; }
.ch-dls-split .tab.active { background: var(--card); color: var(--primary); font-weight: 600; box-shadow: 0 0.2cqw 0.5cqw rgba(0,0,0,.14); }

.ch-dls-split .alert { display: flex; align-items: center; gap: 1.6cqw; height: 100%; background: var(--red-soft); color: var(--red); border-radius: 1.6cqw; padding: 0 2.4cqw; font-weight: 600; font-size: 2.5cqw; }
.ch-dls-split .alert .ic { width: 3.4cqw; height: 3.4cqw; flex: none; }
.ch-dls-split .toast { display: flex; align-items: center; gap: 1.6cqw; height: 100%; background: var(--card); border: 0.16cqw solid var(--border); border-left: 0.7cqw solid var(--green); border-radius: 1.6cqw; padding: 0 2.2cqw; }
.ch-dls-split .toast .ic { width: 3cqw; height: 3cqw; color: var(--green); flex: none; }

.ch-dls-split .lead { width: 4.4cqw; height: 4.4cqw; border-radius: 1.1cqw; flex: none; background: var(--accent-soft); color: var(--primary); display: grid; place-items: center; }
.ch-dls-split .lead .ic { width: 2.6cqw; height: 2.6cqw; }

.ch-dls-split .visa { font: 700 1.7cqw/1 ui-sans-serif, system-ui; letter-spacing: .04em; background: var(--primary); color: #fff; padding: 0.5cqw 0.8cqw; border-radius: 0.6cqw; }
.ch-dls-split .layer.dark .visa { background: #1e3a8a; }
.ch-dls-split .cardacts { display: flex; align-items: center; gap: 2cqw; margin-top: auto; font-size: 2cqw; font-weight: 700; }
.ch-dls-split .cardacts .edit { color: var(--muted); }
.ch-dls-split .cardacts .del  { color: var(--red); }
.ch-dls-split .cardacts .sep  { width: 0.16cqw; height: 2.2cqw; background: var(--border); }

/* Reduced motion: main.js freezes --x mid-sweep; nothing here animates. */