/* DreamWeave Filter Templates: the picker in the Loot Editor toolbar and the download section on
   /tools/loot. Uses the tokens from market.css. No inline styles anywhere: the CSP allows
   style-src 'self' only. */

/* ---- editor toolbar control ---- */

.lt-templates { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.lt-select { min-height: 34px; max-width: 260px; cursor: pointer; }
.lt-select:disabled { opacity: 0.5; cursor: progress; }
.lt-error { color: var(--err); font-size: 13px; }

/* ---- download section on the page ---- */

.lt-section { margin: 0 0 16px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--hairline); border-radius: 8px; }
.lt-title { margin: 0 0 4px; font-size: 18px; }
.lt-lede { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.lt-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.lt-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 6px; }
.lt-item a { font-weight: 600; color: var(--gold); }
.lt-item a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lt-item-note { color: var(--muted); font-size: 13px; }
.lt-keeps { margin: 10px 0 0; font-size: 13px; color: var(--text-2); }