/* ═══════════════════════════════════════════════════════════════════════
   __darmaster/css/base/components.css — THE shared component layer (2026-06-22)

   ONE definition per UI primitive, reused by every page instead of each page
   re-inventing its own title / row / button / panel / chip / field. Every size
   comes from the interface scale (--ui-fs-* / --ui-icon, driven by the SIZING
   knob --ui-scale); every colour comes from the skin tokens. Change a primitive
   HERE and it updates platform-wide. Loaded after tokens.css.

   Pages adopt these by using the .ds-* classes; legacy per-page CSS is migrated
   onto them page by page (skin manager → registry → portals → home).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── FORM CONTROLS · ONE FONT (2026-06-26, user "fix fonts") ────────────────
   Native <button>/<input>/<select>/<textarea> do NOT inherit font-family — they
   fall back to the BROWSER default (Arial on the library toolbar, Cascadia on the
   glossary), so toolbars, filter dropdowns and search inputs rendered in a
   different font than the rest of the chrome. Pin them to the platform UI sans so
   every control matches everything else, from the ONE source.
   `!important` so THIS one rule wins over the per-page chrome fonts (the registry's
   --reg-font / the glossary's mono), making every interface control Inter platform-
   wide while IDs / filenames / code keep mono (2026-06-26, user approved). */
button, input, select, textarea, optgroup {
  font-family: var(--font-sans, inherit) !important;
}

/* ── INPUT FIELDS · ALWAYS LIGHT (HARD RULE, user asked many times) ─────────
   EVERY text input / search box / textarea / select must be a VERY LIGHT field
   with DARK text — NEVER the dark page colour (dark-on-dark inputs are invisible).
   Fixed ONCE here so it holds platform-wide; !important beats the per-page dark
   input styles that keep re-introducing it. Excludes checkbox/radio/range/etc.
   Light = the platform light-object colour #F6F1E6 / ink #33312E. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
textarea,
select {
  background-color: #F6F1E6 !important;
  color: #33312E !important;
}
input::placeholder,
textarea::placeholder {
  color: rgba(51, 49, 46, 0.55) !important;
}

/* ── ON-DEMAND SEARCH BUTTON (user 2026-06-26: NO type-ahead) ───────────────
   The shared "Search" button placed next to every search box. Search runs only
   on click / Enter — never as you type. Gold action button, dark ink. */
.search-go-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  min-height: 30px; padding: 0 13px; border-radius: 4px; cursor: pointer; white-space: nowrap;
  font: 600 var(--ui-fs-label, 13px)/1 var(--font-sans, sans-serif);
  letter-spacing: .05em; text-transform: uppercase;
  background: var(--nav-gold, #B8832A); color: #1C1205;
  border: 1px solid color-mix(in srgb, var(--nav-gold, #B8832A) 65%, #000);
}
.search-go-btn:hover { filter: brightness(1.08); }
.search-go-btn:active { transform: translateY(1px); }

/* ── TEXT LEVELS ── the four interface steps as ready-to-wear classes. ──────
   Title is the dominant text; the rest step down. Mono face from the skin. */
.ds-title { font-family: var(--font-mono); font-size: var(--ui-fs-title); font-weight: 700;
  line-height: 1.2; color: var(--text-color); letter-spacing: .01em; }
.ds-value { font-family: var(--font-mono); font-size: var(--ui-fs-value); color: var(--text-color); }
.ds-label { font-family: var(--font-mono); font-size: var(--ui-fs-label); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--text-color) 62%, transparent); }
.ds-micro { font-family: var(--font-mono); font-size: var(--ui-fs-micro); letter-spacing: .06em; }

/* On dark chrome (nav/panels), labels read in the muted bright-text tint. */
.ds-on-chrome .ds-label,
.ds-label.ds-on-chrome { color: color-mix(in srgb, var(--nav-text-hover, #F1E9D8) 60%, transparent); }

/* ── ICON ── every chrome icon renders in one box (the SIZING knob). ──────── */
.ds-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ds-ico svg { width: var(--ui-icon); height: var(--ui-icon); display: block; }

/* ── PANEL ── a dark chrome container (rails, toolbars, dialogs). ─────────── */
.ds-panel { background: var(--doc-header-bg, var(--nav-bg, #16232F));
  border: 1px solid color-mix(in srgb, var(--nav-gold, #B8832A) 50%, transparent);
  border-radius: 8px; padding: 12px; }

/* ── FIELD ── one recipe for text inputs + selects on chrome. ─────────────── */
.ds-field { font-family: var(--font-mono); font-size: var(--ui-fs-value); letter-spacing: .02em;
  color: var(--nav-text-hover, #F1E9D8);
  background: color-mix(in srgb, var(--nav-bg, #16232F) 72%, #000);
  border: 1px solid color-mix(in srgb, var(--nav-gold, #B8832A) 65%, transparent);
  border-radius: 5px; padding: 5px 9px; height: calc(var(--ui-scale,1) * 30px);
  box-sizing: border-box; }
.ds-field:focus { outline: 1px solid var(--nav-gold, #B8832A); }
select.ds-field { cursor: pointer; }

/* ── BUTTON ── solid (accent) + ghost variants. ──────────────────────────── */
.ds-btn { font-family: var(--font-mono); font-size: var(--ui-fs-value); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: calc(var(--ui-scale,1) * 30px); box-sizing: border-box; padding: 0 13px;
  border-radius: 5px; color: #1C1205; background: var(--nav-gold, #B8832A);
  border: 1px solid color-mix(in srgb, var(--nav-gold, #B8832A) 70%, #000);
  transition: filter .15s ease, transform .08s ease; }
.ds-btn:hover:not(:disabled) { filter: brightness(1.1); }
.ds-btn:active:not(:disabled) { transform: translateY(1px); }
.ds-btn:disabled { opacity: .38; cursor: not-allowed; }
.ds-btn .ds-ico svg, .ds-btn svg { width: calc(var(--ui-scale,1) * 14px); height: calc(var(--ui-scale,1) * 14px); }
.ds-btn--ghost { background: transparent; color: var(--nav-text-hover, #F1E9D8); font-weight: 600;
  border-color: color-mix(in srgb, var(--nav-text-hover, #F1E9D8) 30%, transparent); }
.ds-btn--ghost:hover { border-color: var(--nav-gold, #B8832A); color: var(--nav-gold, #B8832A); filter: none; }

/* ── ROW ── the shared list row (registry, sections, library). ───────────── */
.ds-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 9px;
  padding: 5px 12px 6px 10px; border-radius: 6px;
  background: var(--row-bg, var(--surface-color, #F6F1E6)); color: var(--text-color, #33312E);
  border: 1px solid color-mix(in srgb, var(--text-color, #33312E) 16%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--text-color, #33312E) 34%, transparent); }

/* ── CHIP ── small tag / count. ──────────────────────────────────────────── */
.ds-chip { display: inline-block; font-family: var(--font-mono); font-size: var(--ui-fs-micro);
  font-weight: 600; letter-spacing: .05em; padding: 2px 7px; border-radius: 4px;
  background: color-mix(in srgb, var(--text-color, #33312E) 12%, var(--row-bg, #F6F1E6));
  color: color-mix(in srgb, var(--text-color, #33312E) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-color, #33312E) 28%, transparent); }
.ds-chip--accent { background: color-mix(in srgb, var(--nav-gold, #B8832A) 20%, transparent);
  color: var(--nav-text-hover, #F1E9D8); border-color: color-mix(in srgb, var(--nav-gold, #B8832A) 50%, transparent); }