/* ═══════════════════════════════════════════════════════════════════════
   checklists-core — presentation layer (CLUI).

   Lifted VERBATIM out of the <style> block of Platform/dashboard/dist/
   checklists.html at 822a01e. The block was already 100% cl--scoped plus one
   media query, so this is a move, not a rewrite — deliberately: INC-1 QA gate
   (i) is a byte-diff, and a "tidy while extracting" pass is exactly what makes
   that gate fire for reasons nobody wants to read.

   Token-driven so it themes on BOTH product lines (per the standing "module
   chrome belongs in the shared sheet first" rule). Every var() below already
   carried a fallback in the original; those fallbacks are what let Works adopt
   this sheet before its own tokens are proven against it (INC-1 QA step iv).

   ⭐ THE D2 FLOOR IS IN (gate ii, its own reviewed change): 48px targets and
   visible focus. Both were NET-NEW ON BOTH product lines — neither the suite's
   .cl-circle nor Works' .cl-check met 22px x 22px, and BOTH suppressed focus in
   three places. So adopting this sheet grows Works' checks too and moves layout
   geometry on both lines. That is the approved decision, not a regression: this
   sheet is the only place a web a11y floor is written down at all, since
   FIELD_APP_ACCESSIBILITY_SPEC.md excludes web and no web spec exists yet
   (INC-7 records it normatively so the next consumer inherits it by spec).

   ⚠ There is now ZERO `outline:none` in this file, and it must stay zero. The
   three that were here suppressed the focus ring on the search box, the drawer
   title and every step input — the exact controls a keyboard user lives in.
   ═══════════════════════════════════════════════════════════════════════ */
/* ⭐ THE TOKEN CONTRACT — and it is what INC-1 QA step (iv) actually caught.
   MEASURED on a Works surface (module-chrome.css, no style.css), light theme:

     --text --text-dim --bg-hover --border --accent --bg-card   ALL UNDEFINED

   ...because those are the SUITE's names, defined in style.css, which Works does
   not load. The consequences were not subtle:
     · .cl-row-title fell back to #E2E8F0 and rendered at 1.18:1 on Works' light
       background — invisible text, against a 4.5:1 floor.
     · var(--text-dim) and var(--accent) had NO literal fallback inside the ring
       rule, so the whole border shorthand was invalid at computed-value time:
       border-width 0px, border-style none. The unchecked checkbox had NO RING,
       and the done state had no fill.
   ⚠ AND IT LOOKED FINE IN DARK, where #E2E8F0 happens to be right — a bug that is
   invisible in one theme and total in the other is one that ships.

   So the sheet declares its OWN namespaced surface and maps it from whichever
   host vocabulary exists: the suite's (style.css) first, module-chrome's second,
   a LIGHT-safe literal last. That is not a product branch — nothing here asks
   which product is calling; it asks which tokens the host defines, and every
   answer is right. Adding a token means adding one line HERE, not a flag.  */
:root {
  --cl-text:          var(--text,         var(--text-primary,   #0F172A));
  --cl-text-dim:      var(--text-dim,     var(--text-faint,     #64748B));
  --cl-bg-card:       var(--bg-card,      var(--bg-panel,       #FFFFFF));
  --cl-bg-hover:      var(--bg-hover,     var(--bg-panel-hover, #F1F5F9));
  --cl-border:        var(--border,       var(--border-default, #E2E8F0));
  --cl-accent:        var(--accent,       var(--accent-primary, #0A7504));
  /* These two already resolve on both surfaces — module-chrome defines them and
     they are theme-invariant by design (SK Green v2: #0A8A06 fills, WHITE ink —
     the 2026-08-03 migration retired #0A9C07/#10180E-ink outright). */
  --cl-accent-fill:   var(--accent-fill,   #0A8A06);
  --cl-accent-onfill: var(--accent-onfill, #FFFFFF);
  /* v2 hover INVERTS — darker, not brighter. A `filter:brightness(>1)` hover on a
     green fill LIGHTENS the ground under white ink: 1.08 lands white at 3.95:1. */
  --cl-accent-fill-hover: var(--accent-fill-hover, #0A7504);
}

/* Checklists-local styles (cl- prefix). Platform tokens with fallbacks. */
.cl-wrap { display:flex; gap:18px; align-items:flex-start; max-width:100%; }
.cl-rail { width:264px; flex-shrink:0; }
.cl-main { flex:1; min-width:0; max-width:100%; }
.cl-main .card { overflow:hidden; }
.cl-rail .card, .cl-main .card { padding:14px; }
.cl-view-btn { display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  background:transparent; border:none; color:var(--cl-text); padding:8px 10px;
  border-radius:6px; font-size:14px; cursor:pointer; }
.cl-view-btn:hover { background:rgba(10,156,7,0.08); }
.cl-view-btn.active { background:rgba(10,156,7,0.15); color:var(--cl-accent); font-weight:600; }
.cl-view-btn .cl-count { margin-left:auto; font-size:12px; color:var(--cl-text-dim); }
.cl-space-h { font-size:11px; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--cl-text-dim); font-weight:700; margin:14px 4px 4px; display:flex; align-items:center; justify-content:space-between; }
.cl-newlist { display:flex; gap:6px; margin-top:6px; }
.cl-newlist input { flex:1; min-width:0; background:var(--cl-bg-hover);
  color:var(--cl-text); border:1px solid var(--cl-border); border-radius:6px;
  padding:6px 9px; font-size:13px; }
.cl-quickadd { display:flex; gap:8px; margin-bottom:12px; }
.cl-quickadd input { flex:1; background:var(--cl-bg-hover);
  color:var(--cl-text); border:1px solid var(--cl-border); border-radius:8px;
  padding:11px 13px; font-size:15px; }
.cl-search { background:var(--cl-bg-hover); color:var(--cl-text);
  border:1px solid var(--cl-border); border-radius:8px; padding:8px 11px; font-size:13px;
  min-width:210px; max-width:100%; }
.cl-search:focus { border-color:var(--cl-accent); }
/* D2 floor: the row centres its controls because they are now 48px targets — at
   flex-start a 48px box would hang its 22px mark 24px below the first line of a
   wrapped title. Vertical padding drops to 3px so the row grows to ~54px rather
   than ~66px; the 48px control is what sets the height now, not the padding. */
.cl-row { display:flex; align-items:center; gap:10px; padding:3px 8px; border-radius:8px;
  cursor:pointer; border-bottom:1px solid var(--cl-border); max-width:100%;
  background:var(--cl-tint, transparent); }
/* Hover brightens ON TOP of the category tint (layered), so the space-color wash survives hover. */
.cl-row:hover { background:linear-gradient(rgba(10,156,7,0.06),rgba(10,156,7,0.06)), var(--cl-tint, transparent); }
.cl-row:last-child { border-bottom:none; }
.cl-row[draggable="true"] { cursor:grab; }
.cl-row.cl-dragging { opacity:0.45; }
.cl-row.cl-dragover { border-top:2px solid var(--cl-accent); }
.cl-row.cl-dragover-below { border-bottom:2px solid var(--cl-accent); }
/* ── D2 floor: 48px targets ──────────────────────────────────────────────────
   ⭐ THE TARGET IS 48px; THE PAINTED MARK STAYS 22px. Growing the visible circle
   to 48px would make a dense to-do list unreadable, and WCAG 2.5.5 is about the
   POINTER TARGET, not the ink. So the button is the 48x48 target and the ring is
   drawn by ::before. The button owns a stacking context (position:relative +
   z-index:0) so the ring's z-index:-1 paints ABOVE the row's category tint and
   BELOW the ✓ glyph — without the stacking context, z-index:-1 would drop the
   ring behind a tinted row and it would vanish in the cross-list views. */
.cl-circle { width:48px; height:48px; min-width:48px; border:none; background:transparent;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; color:transparent; padding:0; position:relative; z-index:0; border-radius:50%; }
.cl-circle::before { content:''; position:absolute; width:22px; height:22px; box-sizing:border-box;
  border:2px solid var(--cl-text-dim); border-radius:50%; z-index:-1; }
.cl-circle:hover { color:var(--cl-accent); }
.cl-circle:hover::before { border-color:var(--cl-accent); }
/* ⚠ The done disc is a FILL, so it takes the theme-INVARIANT fill pair — NOT
   --cl-accent. --cl-accent is the TEXT accent and flips by theme: on light it
   resolves to #0A7504 through every branch (--accent, --accent-primary, and the
   literal fallback all land there), and the old #10180E ink measured 3.07:1 on
   it — the exact "text token used as a fill" failure the suite already documents
   at style.css:1160. It read fine in dark (8.44:1), which is why it survived.
   ⚠ Whitening the ink alone does NOT fix it: white on the dark-theme accent
   #1ACD15 is 2.15:1. The GROUND had to move too. Now #FFFFFF on #0A8A06 =
   4.515:1 in BOTH themes. The ✓ is real text (13px), so the floor is 4.5. */
.cl-circle.done { color:var(--cl-accent-onfill); }
.cl-circle.done::before { background:var(--cl-accent-fill); border-color:var(--cl-accent-fill); }
/* ▲/▼ reorder — the keyboard + touch equivalent of drag, which is mouse-only. */
.cl-move { width:48px; height:48px; min-width:48px; border:none; background:transparent;
  color:var(--cl-text-dim); cursor:pointer; font-size:11px; line-height:1; padding:0;
  display:inline-flex; align-items:center; justify-content:center; border-radius:6px; }
.cl-move:hover { color:var(--cl-accent); background:rgba(10,156,7,0.08); }
.cl-move:disabled { opacity:0.28; cursor:default; background:transparent; color:var(--cl-text-dim); }
.cl-row-title { flex:1; min-width:0; font-size:14px; color:var(--cl-text);
  white-space:normal; word-break:break-word; overflow-wrap:anywhere; line-height:1.4; }
.cl-row.completed .cl-row-title { text-decoration:line-through; color:var(--cl-text-dim); }
.cl-chip { font-size:11px; color:var(--cl-text-dim); white-space:nowrap; }
.cl-chip.overdue { color:#F87171; }
.cl-chip.today { color:#FBBF24; }
.cl-star { background:transparent; border:none; cursor:pointer; font-size:16px;
  color:var(--cl-text-dim); padding:0; width:48px; height:48px; min-width:48px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:6px; }
.cl-star.on { color:#FBBF24; }
.cl-listtag { font-size:11px; color:var(--cl-text-dim); background:var(--cl-bg-hover);
  border:1px solid var(--cl-border); border-radius:4px; padding:1px 6px; white-space:nowrap; }
.cl-sec-h { font-size:12px; color:var(--cl-text-dim); font-weight:700; margin:16px 4px 6px;
  text-transform:uppercase; letter-spacing:0.05em; cursor:pointer; }
.cl-empty { color:var(--cl-text-dim); font-size:14px; padding:22px 8px; text-align:center; }
/* A whole list added to My Day renders as a nested BLOCK. Without a container its to-dos are
   pixel-identical to the loose singles below (both carry the same space tint), so there was no
   boundary between "that list" and the rest of the day once the block was expanded. Border +
   a left rail in the list's category colour — no fill, so it reads the same in light and dark. */
.cl-md-blk { border:1px solid var(--cl-border);
  border-left:3px solid var(--cl-blk, var(--cl-border));
  border-radius:8px; margin:12px 0 14px; padding:0 8px 2px; }
.cl-md-blk-h { display:flex; align-items:center; gap:6px; cursor:pointer;
  font-size:12px; font-weight:700; color:var(--cl-text-dim);
  text-transform:uppercase; letter-spacing:0.05em; padding:9px 2px 7px; }
.cl-md-blk-h .cl-count { font-size:12px; color:var(--cl-text-dim); }
.cl-md-blk-h .btn.small { margin-left:auto; text-transform:none; letter-spacing:normal; }
.cl-md-blk-body .cl-row:last-child { border-bottom:none; }
/* Detail drawer */
.cl-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:1000;
  display:flex; justify-content:flex-end; }
/* Half the viewport (was a fixed 420px ≈ 20% on a wide monitor, which cut off long titles and
   left no room to work). min-width keeps the old width as the floor on narrow desktops; the
   ≤900px block below drops it to full-bleed and clears the floor so it can't overflow a phone. */
.cl-drawer { box-sizing:border-box; width:50vw; min-width:420px; max-width:100vw; height:100%;
  overflow-y:auto;
  background:var(--cl-bg-card); border-left:1px solid var(--cl-border); padding:20px; }
.cl-drawer h3 { margin:0 0 4px; }
.cl-fab { position:fixed; right:24px; bottom:24px; width:56px; height:56px; border-radius:50%;
  background:var(--cl-accent-fill); color:var(--cl-accent-onfill); border:none; font-size:30px; line-height:1; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,0.3); z-index:900; display:flex; align-items:center; justify-content:center; }
.cl-fab:hover { background:var(--cl-accent-fill-hover); } /* darker, per v2 — see the token note */
.cl-d-title { width:100%; background:transparent; color:var(--cl-text);
  border:none; font-size:18px; font-weight:600; padding:4px 0; }
.cl-d-title:focus { border-bottom:1px solid var(--cl-accent); }
.cl-d-row { display:flex; align-items:center; gap:10px; padding:10px 0;
  border-bottom:1px solid var(--cl-border); font-size:14px; color:var(--cl-text); }
.cl-d-row label { color:var(--cl-text-dim); min-width:92px; font-size:12px; }
.cl-d-row input[type="date"], .cl-d-row input[type="datetime-local"], .cl-d-row input[type="url"], .cl-d-row select {
  background:var(--cl-bg-hover); color:var(--cl-text);
  border:1px solid var(--cl-border); border-radius:6px; padding:6px 8px; font-size:13px; }
.cl-steps { margin:6px 0; }
.cl-step { display:flex; align-items:center; gap:8px; padding:5px 0; }
.cl-step input[type="text"] { flex:1; background:transparent; border:none;
  color:var(--cl-text); font-size:13px; border-bottom:1px dashed transparent; }
.cl-step input[type="text"]:focus { border-bottom-color:var(--cl-accent); }
.cl-step.done input[type="text"] { text-decoration:line-through; color:var(--cl-text-dim); }
/* A step's circle keeps the smaller 17px MARK but inherits the 48px target — the
   floor does not get a discount for being inside a drawer. */
.cl-step .cl-circle::before { width:17px; height:17px; }
.cl-step .cl-circle { font-size:10px; }
.cl-x { background:transparent; border:none; color:var(--cl-text-dim); cursor:pointer;
  font-size:15px; padding:0; width:48px; height:48px; min-width:48px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:6px; }
.cl-x:hover { color:#F87171; }
.cl-notes { width:100%; min-height:74px; background:var(--cl-bg-hover);
  color:var(--cl-text); border:1px solid var(--cl-border); border-radius:8px;
  padding:9px 11px; font-size:13px; resize:vertical; }
.cl-convert { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.cl-convert .btn[disabled] { opacity:0.5; cursor:default; }
.cl-danger { color:#F87171 !important; }
.cl-back { display:none; margin-bottom:10px; }
.cl-muted { color:var(--cl-text-dim); font-size:12px; }
.cl-toast { position:fixed; top:18px; right:18px; z-index:1200; background:var(--cl-bg-card);
  color:var(--cl-text); border:1px solid var(--cl-border); border-radius:8px;
  padding:10px 14px; font-size:13px; display:none; max-width:340px; }
/* Per-list color dot (rail) + settings/emoji pickers (v3 settings) */
.cl-listdot { width:9px; height:9px; min-width:9px; border-radius:50%; display:inline-block; }
.cl-emoji-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:5px; margin:12px 0; }
.cl-emoji-grid button { font-size:20px; background:transparent; border:1px solid var(--cl-border);
  border-radius:8px; padding:7px 0; cursor:pointer; }
.cl-emoji-grid button:hover { background:rgba(10,156,7,0.12); border-color:var(--cl-accent); }
.cl-color-row { display:flex; align-items:center; gap:12px; padding:9px 0; font-size:14px; color:var(--cl-text); }
.cl-color-row input[type="color"] { width:48px; height:32px; padding:0; border:1px solid var(--cl-border);
  border-radius:6px; background:transparent; cursor:pointer; }
/* ── D2 floor: a visible focus ring on every interactive cl- control ─────────
   :focus-visible, not :focus, so a mouse click does not leave a ring behind on a
   button while a keyboard tab always shows one. Text inputs match :focus-visible
   on click too, which is what we want — a caret alone is a weak focus indicator
   at these contrast levels.

   The ring is drawn with `outline`, deliberately: it does not participate in
   layout, so adding it cannot shift a single pixel of the geometry this commit
   just settled. outline-offset lifts it clear of the 22px mark inside the 48px
   circle button, which would otherwise draw the ring around empty space. */
.cl-view-btn:focus-visible,
.cl-circle:focus-visible,
.cl-star:focus-visible,
.cl-move:focus-visible,
.cl-x:focus-visible,
.cl-fab:focus-visible,
.cl-row:focus-visible,
.cl-md-blk-h:focus-visible,
.cl-sec-h:focus-visible,
.cl-search:focus-visible,
.cl-d-title:focus-visible,
.cl-notes:focus-visible,
.cl-newlist input:focus-visible,
.cl-quickadd input:focus-visible,
.cl-step input[type="text"]:focus-visible,
.cl-d-row input:focus-visible,
.cl-d-row select:focus-visible,
.cl-emoji-grid button:focus-visible,
.cl-color-row input:focus-visible {
  outline:2px solid var(--cl-accent); outline-offset:2px;
}
/* The circle's ring is inset inside a much larger target, so the focus outline is
   pulled in to hug the mark rather than float 24px away from it. */
.cl-circle:focus-visible { outline-offset:-11px; border-radius:50%; }

@media (max-width: 900px) {
  .cl-wrap { flex-direction:column; }
  .cl-rail { width:100%; }
  .cl-wrap.mobile-view .cl-rail { display:none; }
  .cl-wrap.mobile-rail .cl-main { display:none; }
  .cl-back { display:inline-block; }
  .cl-drawer { width:100vw; min-width:0; }
}