/* Our controls, the addon's look (Options/Widgets.lua). */

/* ---- W.Button: 1 px outline, warm band, fill gradient, lit top line; hover traces the band in the accent ---- */
.wbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 28px; min-width: 150px; border: 0; cursor: pointer;
  font: 600 15px/1 var(--font-body); color: var(--ink-text); text-decoration: none;
  background: var(--border); isolation: isolate; -webkit-tap-highlight-color: transparent;
}
.wbtn.small { height: 36px; min-width: 0; padding: 0 18px; font-size: 14px; }
.wbtn > .band { position: absolute; inset: 1px; background: var(--btn-band); }
.wbtn.main > .band { background: var(--btn-band-main); }
.wbtn > .fill { position: absolute; inset: 3px; background: linear-gradient(180deg, var(--btn-fill-top), var(--btn-fill-bottom)); }
.wbtn > .fill::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--btn-lit); }
.wbtn:active > .fill { background: linear-gradient(0deg, var(--btn-fill-top), var(--btn-fill-bottom)); }
.wbtn:active > .fill::before { display: none; }
.wbtn > .lbl { position: relative; z-index: 3; transition: color var(--fast) var(--ease); }
.wbtn:hover > .lbl, .wbtn:focus-visible > .lbl { color: var(--ink-value); }
.wbtn > .tr { position: absolute; z-index: 2; pointer-events: none; width: 0; height: 0; }
.wbtn > .tr[data-seg="top"], .wbtn > .tr[data-seg="bottom"] { background: var(--accent); background-repeat: no-repeat; }
.wbtn > .tr[data-seg="top"] { left: 0; top: 0; }
.wbtn > .tr[data-seg="right"] { right: 0; top: 0; background: var(--hi); }
.wbtn > .tr[data-seg="left"] { left: 0; top: 0; background: var(--lo); }
.wbtn > .tr[data-seg="bottom"] { left: 0; bottom: 0; }
.wbtn > .glow {
  position: absolute; z-index: 2; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 242, 217, 0.9), transparent 65%);
}
.wbtn:focus-visible { outline: none; }

/* ---- W.Chip: a filter pill; on = filled with the accent ---- */
.chip {
  height: 24px; padding: 0 11px; border: 0; border-radius: 7px; cursor: pointer;
  font: 600 13px/24px var(--font-game); letter-spacing: 0.02em; color: var(--ink-text);
  background: var(--chip-off); box-shadow: inset 0 0 0 1px var(--chip-edge);
  transition: box-shadow var(--fast) var(--ease), background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.chip:hover, .chip:focus-visible { box-shadow: inset 0 0 0 1px var(--mid); outline: none; }
.chip.on { background: color-mix(in srgb, var(--mid) 90%, transparent); box-shadow: none; color: var(--chip-ink); }

/* ---- W.Tab: picked = accent text and a 2 px accent line that grows in ---- */
.wtab {
  position: relative; display: inline-block; height: 24px; padding: 0 2px; border: 0; background: none; cursor: pointer; text-decoration: none;
  font: 500 14px/24px var(--font-body); color: var(--ink-label); transition: color var(--fast) var(--ease);
}
.wtab:hover, .wtab:focus-visible { color: var(--ink-value); outline: none; }
.wtab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--accent);
  transform: scaleX(0); transition: transform var(--fast) var(--ease);
}
.wtab:focus-visible::after { transform: scaleX(0.4); }
.wtab.on { color: var(--mid); }
.wtab.on::after { transform: scaleX(1); }