/* =====================================================================================================
   VAULT-TAGS — R289/§282 P4 (J5) styles: the manual-tag picker dialog + the shared dot/chip renderers
   (Tags list-column cluster, dock rows, inspector chips). Scoped .vtag* — never leaks into .vlt.
   Tokens are the host's (chrome.css/vault.css): hsl(var(--ink)) / --line / --accent / --overlay / --app.
   Dot colours arrive per-element via setVar() only (--vtag-c / --vtag-c-light / --vtag-c-dark, resolved
   from the R75 OKLCH estate palette in vault-tags.js) — no inline style attributes anywhere (CSP).
   ASL: component container query (Law 2) · ≥44px coarse targets (Law 5, BRIEF non-negotiable 7; fine
   pointers keep the shell's 36px --ytx-tap floor per R269) · reduced-motion hard stop (Law 6) ·
   reduced-transparency = solid chrome (BRIEF 10) · no 100vh (svh only).
   ===================================================================================================== */

/* ---------- the dialog shell (mirrors .vlt-conflict, vault.css:1050) ---------- */
.vtag-dlg { border: 0; padding: 0; inline-size: min(440px, 94vw); border-radius: 16px;
  background: hsl(var(--overlay)); color: hsl(var(--ink)); }
.vtag-dlg::backdrop { background: hsl(var(--hue) 40% 3% / .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Unsupported browsers ignore this media block and keep the translucent backdrop — that IS the graceful
   path (the query itself is the feature detection). */
@media (prefers-reduced-transparency: reduce) {
  .vtag-dlg::backdrop { background: hsl(var(--hue) 40% 3% / .92);
    -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.vtag { container: vtag / inline-size; display: flex; flex-direction: column; gap: 12px;
  padding: 16px; font-family: var(--font-body); max-block-size: min(78svh, 620px); }

/* ---------- header ---------- */
.vtag__head { display: flex; align-items: center; gap: 9px; }
.vtag__ico { display: grid; place-items: center; line-height: 0; font-size: 16px; color: hsl(var(--accent)); }
.vtag__titles { flex: 1; min-inline-size: 0; }
.vtag__title { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.vtag__sub { font-size: 11.5px; color: hsl(var(--ink-faint)); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.vtag__x { display: grid; place-items: center; inline-size: var(--ytx-tap-ico, 32px); block-size: var(--ytx-tap-ico, 32px);
  border: 0; border-radius: 9px; background: transparent; color: hsl(var(--ink-dull)); cursor: pointer; font-size: 14px; }
.vtag__x:hover { background: hsl(var(--hover)); color: hsl(var(--ink)); }

/* ---------- the dots (shared renderer + picker) ---------- */
.vtag-dot { display: inline-block; inline-size: 11px; block-size: 11px; border-radius: 50%;
  background: var(--vtag-c-dark, var(--vtag-c, hsl(var(--ink-faint) / .5)));
  border: 1px solid hsl(var(--line)); flex: none; }
:root[data-scheme="light"] .vtag-dot { background: var(--vtag-c-light, var(--vtag-c, hsl(var(--ink-faint) / .5))); }
.vtag-dot--lg { inline-size: 16px; block-size: 16px; }

/* dot CLUSTER — the Tags list-column cell / dock row renderer (P2/P5 consume this) */
.vtag-dots { display: inline-flex; align-items: center; }
.vtag-dots .vtag-dot { margin-inline-start: -4px; box-shadow: 0 0 0 1.5px hsl(var(--overlay)); }
.vtag-dots .vtag-dot:first-child { margin-inline-start: 0; }
.vtag-dots__more { font-size: 10.5px; color: hsl(var(--ink-faint)); margin-inline-start: 3px;
  font-variant-numeric: tabular-nums; }

/* named chip — the inspector's manual-tag row (sits beside the existing .vlt-chip autoTag pills) */
.vtag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: hsl(var(--ink-dull));
  background: hsl(var(--box) / .6); border: 1px solid hsl(var(--line)); }
.vtag-chip .vtag-dot { inline-size: 8px; block-size: 8px; border: 0; }

/* ---------- quick-toggle dot row ---------- */
.vtag__dots { display: flex; flex-wrap: wrap; gap: 4px; }
.vtag-dotbtn { position: relative; display: grid; place-items: center;
  inline-size: var(--ytx-tap, 36px); block-size: var(--ytx-tap, 36px);
  border: 0; border-radius: 10px; background: transparent; cursor: pointer; color: hsl(var(--ink)); }
.vtag-dotbtn:hover { background: hsl(var(--hover)); }
.vtag-dotbtn:focus-visible { outline: 2px solid hsl(var(--accent)); outline-offset: 2px; }
.vtag-dotbtn__check { position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 10px; color: hsl(var(--app)); visibility: hidden; line-height: 0; }
.vtag-dotbtn[aria-pressed="true"] .vtag-dotbtn__check { visibility: visible; }
.vtag-dotbtn[data-mixed] .vtag-dot--lg { box-shadow: 0 0 0 2px hsl(var(--accent) / .45); }   /* some, not all, of the selection */

/* ---------- named list ---------- */
.vtag__list { display: flex; flex-direction: column; overflow-y: auto; min-block-size: 0;
  border-block: 1px solid hsl(var(--line)); padding-block: 4px; }
.vtag-row { display: flex; align-items: center; gap: 4px; min-block-size: var(--ytx-tap, 36px); }
.vtag-row__main { flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: 9px;
  min-block-size: var(--ytx-tap, 36px); cursor: pointer; }
.vtag-row__cb { inline-size: 24px; block-size: 24px; accent-color: hsl(var(--accent)); flex: none; }   /* WCAG 2.2 SC 2.5.8 24px floor; the wrapping label row is the real target */
.vtag-row__name { flex: 1; min-inline-size: 0; font-size: 13px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.vtag-row__ren { flex: 1; min-inline-size: 0; font: inherit; font-size: 13px; padding: 6px 8px;
  border-radius: 8px; color: hsl(var(--ink)); background: hsl(var(--app));
  border: 1px solid hsl(var(--accent)); outline: none; }
.vtag-row__dotbtn, .vtag-row__edit { display: grid; place-items: center; flex: none;
  inline-size: var(--ytx-tap, 36px); block-size: var(--ytx-tap, 36px);
  border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  color: hsl(var(--ink-dull)); font-size: 13px; }
.vtag-row__dotbtn:hover, .vtag-row__edit:hover { background: hsl(var(--hover)); color: hsl(var(--ink)); }
.vtag-row__dotbtn:focus-visible, .vtag-row__edit:focus-visible,
.vtag-row__cb:focus-visible, .vtag-swatch:focus-visible, .vtag__x:focus-visible,
.vtag__add:focus-visible, .vtag__done:focus-visible { outline: 2px solid hsl(var(--accent)); outline-offset: 2px; }
.vtag-row__dotbtn[aria-expanded="true"] { background: hsl(var(--hover)); }

/* recolor strip (opens under its row) */
.vtag-swatches { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 6px 8px;
  border-block-end: 1px solid hsl(var(--line) / .6); }
.vtag-swatch { position: relative; display: grid; place-items: center;
  inline-size: var(--ytx-tap, 36px); block-size: var(--ytx-tap, 36px);
  border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.vtag-swatch:hover { background: hsl(var(--hover)); }
.vtag-swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 2px hsl(var(--accent)); }

/* ---------- create row + footer ---------- */
.vtag__create { display: flex; gap: 8px; align-items: center; }
.vtag__newname { flex: 1 1 120px; min-inline-size: 0; font: inherit; font-size: 13.5px; padding: 8px 10px;
  min-block-size: var(--ytx-tap, 36px); border-radius: 9px; color: hsl(var(--ink)); background: hsl(var(--app));
  border: 1px solid hsl(var(--line)); }
.vtag__newname:focus-visible { outline: none; border-color: hsl(var(--accent)); }
.vtag__add { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px;
  min-block-size: var(--ytx-tap, 36px); border-radius: 9px; cursor: pointer; font: inherit; font-size: 13px;
  font-weight: 600; color: hsl(var(--ink)); background: hsl(var(--box)); border: 1px solid hsl(var(--line)); }
.vtag__add:hover { background: hsl(var(--hover)); }
.vtag__foot { display: flex; justify-content: flex-end; }
.vtag__done { padding: 0 18px; min-block-size: var(--ytx-tap, 36px); border-radius: 9px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; color: hsl(var(--app));
  background: hsl(var(--accent)); border: 0; }
.vtag__done:hover { filter: brightness(1.08); }

/* very narrow dialog (small phones): the create row stacks — component-scoped, so a container query
   (ASL Law 2), never a viewport media query */
@container vtag (max-width: 300px) {
  .vtag__create { flex-direction: column; align-items: stretch; }
  .vtag__add { justify-content: center; }
}

/* ---------- coarse pointers: every target takes the 44px BRIEF floor (Law 5) on both axes where it is
   a square control, and as a block floor on rows/inputs. 44 is also the estate ceiling (R269) — we sit
   exactly on it, only under coarse pointers; fine pointers keep the 36px shell floor above. ---------- */
@media (pointer: coarse) {
  .vtag-dotbtn, .vtag-swatch, .vtag-row__dotbtn, .vtag-row__edit, .vtag__x {
    inline-size: var(--ytx-tap-ceil, 44px); block-size: var(--ytx-tap-ceil, 44px); }
  .vtag-row, .vtag-row__main, .vtag__newname, .vtag__add, .vtag__done {
    min-block-size: var(--ytx-tap-ceil, 44px); }
}

/* ---------- motion: nothing animates by default; the one affordance transition is opt-in ---------- */
@media (prefers-reduced-motion: no-preference) {
  .vtag-dotbtn, .vtag-swatch, .vtag-row__dotbtn, .vtag-row__edit, .vtag__x, .vtag__add { transition: background-color .12s ease; }
}