// ===========================================================================
//  eww theme — Mountain / "Fuji" palette, monochrome + soft violet accent
//  Base bg/fg are the Fuji values; accent is Fuji's (bright) violet.
// ===========================================================================

$bg:       #0f0f0f;
$bg-alt:   #191919;
$bg-hi:    #242424;
$fg:       #f0f0f0;
$muted:    #8a8a8a;

// Accent — $accent-dim mirrors TANINUX's gui.json `accent_hex` and is the only
// managed line (rewritten by scripts/accent.sh). Everything else derives from
// it, so the whole bar/panels/dock re-tint from one value.
$accent-dim: #ac8a8c;   // accent_hex (managed by scripts/accent.sh)
$accent:     lighten($accent-dim, 8%);   // bright

// translucent accent washes (depth without shouting)
$accent-08: rgba($accent, 0.08);
$accent-14: rgba($accent, 0.14);
$accent-22: rgba($accent, 0.22);

$border:   rgba(240, 240, 240, 0.06);
$shadow:   rgba(0, 0, 0, 0.55);

* {
  font-family: "Iosevka Aile", "Symbols Nerd Font", sans-serif;
  font-size: 16px;
  font-weight: 500;            // Medium
  // The GTK theme (adw-gtk3 / Adwaita) puts an "embossed" text-shadow on
  // labels & buttons — on our dark bar it shows as a light, vertically
  // offset ghost that makes text look doubled. Kill it everywhere.
  text-shadow: none;
  -gtk-icon-shadow: none;
}

// Kill the GTK window background — otherwise it shows through the panel margin
// as a fat light frame. GTK also puts a `.background` style class on toplevels
// that the theme fills with a colour; on a semi-transparent window (the dock)
// that fill shows through as an extra outer rectangle ("box in a box"), so kill
// it too.
window,
window.background,
.background,
decoration {
  background-color: transparent;
  background-image: none;
  box-shadow: none;   // kill the theme's CSD window shadow — on the translucent
  border: none;       // dock it shows as a faint outer box with its own shadow
}

// eventbox wrappers must not inherit a theme background, or they paint a second
// rectangle behind rounded content (the dock's "box in a box").
eventbox { background-color: transparent; background-image: none; }

// Strip GTK's default button/scale theming so our colours actually show.
button {
  background-image: none;
  background-color: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  min-height: 0;
  min-width: 0;
}
scale trough,
scale highlight,
scale slider {
  background-image: none;
  border: none;
  box-shadow: none;
}

// ===========================================================================
//  BAR
// ===========================================================================
.bar {
  background-color: $bg;
  color: $fg;
  font-size: 8px;   // was 12px
  padding: 0 12px;
}
// (No bar shadow: the exclusive strip can't cast a real drop shadow onto the
// windows below — see HANDOVER. The .bar-shadow gradient hack was removed.)

// ---- workspaces -----------------------------------------------------------
.workspaces .ws {
  color: $muted;
  font-size: 7px;   // was 11px
  padding: 1px 9px;
  margin: 1px 1px;
  border-radius: 999px;
}
.workspaces .ws.occupied { color: $fg; }
.workspaces .ws.active {
  background-color: $accent-14;
  color: $accent;
}
.workspaces .ws:hover { background-color: $bg-alt; }

// ---- clock ----------------------------------------------------------------
.clock {
  color: $fg;
  padding: 1px 10px;
  border-radius: 999px;
}
.clock:hover { background-color: $bg-alt; }

// ---- right modules --------------------------------------------------------
.module {
  color: $fg;
  padding: 1px 8px;
  border-radius: 999px;
}
.module:hover {
  background-color: $bg-alt;
  color: $accent;
}
// update-in-progress: pulse the bar module in the accent so the running state
// is visible at a glance (tooltip carries the latest progress line).
@keyframes upd-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 1; }
}
.module.updates.updating {
  color: $accent;
  animation: upd-pulse 1.2s ease-in-out infinite;
}

// ===========================================================================
//  PANELS  (depth: border + drop shadow inside the window margin)
// ===========================================================================
.panel {
  background-color: $bg;
  color: $fg;
  border: 1px solid $accent-22;
  border-radius: 18px;
  padding: 18px;
  // margin must exceed the shadow's reach, or it clips at the window edge and
  // leaves a hard line instead of fading out. Same shadow as the dock.
  margin: 12px 16px 16px 16px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.40);
}
.panel-title {
  font-size: 18px;
  font-weight: 700;
  color: $fg;
  margin-bottom: 4px;
}

// ---- control-center tiles -------------------------------------------------
.tile {
  background-color: $bg-alt;
  color: $muted;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  padding: 14px 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);   // raised card feel
}
.tile:hover { background-color: $bg-hi; }
.tile.active {
  background-color: $accent-14;
  border: 1px solid $accent-22;
  color: $accent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);   // flat — bg+border mark active
}
.tile.active:hover { background-color: $accent-08; }
.tile-icon  { font-size: 24px; }
.tile-label { font-size: 12px; font-weight: 500; }

// ---- action buttons -------------------------------------------------------
.cc-actions { margin-top: 4px; }
.action {
  background-color: $bg-alt;
  color: $fg;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 12px 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.action:hover {
  background-color: $accent;
  color: $bg;
  box-shadow: 0 2px 10px rgba(163, 158, 196, 0.35);
}
.action-icon  { font-size: 20px; }
.action-label { font-size: 11px; font-weight: 500; }

// ---- control-center header (settings + power) -----------------------------
.cc-header { margin-bottom: 2px; }
.cc-iconbtn {
  color: $muted;
  font-size: 18px;
  padding: 4px 8px;
  border-radius: 10px;
}
.cc-iconbtn:hover  { color: $fg; background-color: $bg-alt; }
.cc-iconbtn.active { color: $accent; background-color: $accent-14; }

.power-menu {
  background-color: $bg-alt;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.power-item {
  color: $fg;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 10px;
}
.power-item:hover { background-color: $accent-14; color: $accent; }
.power-item-icon  { font-size: 16px; }

// ---- sliders --------------------------------------------------------------
.slider-row  { margin-top: 4px; }
.slider-icon { font-size: 18px; color: $fg; }
.slider-val  { color: $muted; font-size: 13px; }

// ---- audio output dropdown ------------------------------------------------
.audio-caret {
  color: $muted;
  font-size: 13px;
  padding: 0 4px;
  background-color: transparent;
  border: none;
}
.audio-caret:hover { color: $fg; }
.audio-caret.open  { color: $accent; }

.audio-list { margin: 2px 0 2px 0; }
.audio-dev {
  color: $muted;
  background-color: $bg-alt;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 8px 12px;
}
.audio-dev:hover { background-color: $bg-hi; color: $fg; }
.audio-dev.active {
  background-color: $accent-14;
  border: 1px solid $accent-22;
  color: $accent;
}
.audio-dev-icon  { font-size: 15px; }
.audio-dev-check { color: $accent; font-size: 14px; }

scale trough {
  background-color: $bg-alt;
  border-radius: 999px;
  min-height: 8px;
  min-width: 60px;
}
scale highlight {
  background-color: $accent;
  border-radius: 999px;
}
scale slider {
  background-color: $fg;
  border-radius: 999px;
  min-height: 15px;
  min-width: 15px;
  margin: -4px;
}
// progress-style bars (non interactive)
.metric-bar trough    { min-height: 6px; }
.metric-bar highlight { background-color: $accent; }
.metric-bar slider {
  background-color: transparent;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

// ---- music ----------------------------------------------------------------
.cover {
  border-radius: 14px;
  background-color: $bg-alt;
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.m-title  { font-size: 17px; font-weight: 700; margin-top: 4px; }
.m-artist { color: $muted; font-size: 14px; }
.m-controls { margin-top: 6px; }
.m-btn {
  font-size: 22px;
  padding: 6px 12px;
  border-radius: 12px;
  color: $fg;
}
.m-btn:hover { background-color: $bg-alt; color: $accent; }
.m-btn.play  { font-size: 28px; color: $accent; }

// ---- calendar -------------------------------------------------------------
.cal-time { font-size: 42px; font-weight: 700; }
.cal-date { color: $muted; font-size: 15px; margin-bottom: 10px; }
calendar {
  padding: 4px;
  background-color: transparent;   // GTK theme draws a white box + border here otherwise
  background-image: none;
  border: none;
  box-shadow: none;
  outline: none;
  color: $fg;
}
calendar.header { font-weight: 700; color: $fg; }
calendar.button { background: transparent; border: none; }
calendar:selected {
  color: $bg;
  background-color: $accent;
  border-radius: 8px;
}
calendar:indeterminate { color: $muted; }

// ---- sysmon ---------------------------------------------------------------
.metric-icon { font-size: 20px; color: $accent; }
.metric      { margin: 2px 0; }
.temp-row    { margin-top: 2px; }

// ---- dock -----------------------------------------------------------------
// glassy: semi-transparent fill + Hyprland layer blur (set in launch.sh).
// No border -> avoids the "double frame" look; depth comes from a soft drop
// shadow plus a 1px inner top highlight (the Apple glass edge).
.dock-hot { background-color: transparent; }
// left-edge hover strip that opens the dock (niri has no cursor-pos IPC).
.dock-trigger { background-color: transparent; min-width: 6px; }
// the glassy box IS the eventbox (single styled element — no theme rectangle
// behind it). The inner layout box stays transparent.
.dock-evt { background-color: transparent; background-image: none; }
.dock {
  background-color: rgba(15, 15, 15, 0.45);
  border-radius: 22px;
  padding: 10px 8px;
  margin: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.dock-inner { background-color: transparent; }
.dock-icon {
  min-width: 42px;
  min-height: 42px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.dock-item {
  padding: 4px;
  border-radius: 14px;
}
.dock-item:hover { background-color: rgba(255, 255, 255, 0.10); }
.dock-item.unpinned { opacity: 0.92; }
.dock-dot {
  min-width: 4px;
  min-height: 4px;
  border-radius: 999px;
  background-color: transparent;   // reserve space so icons stay aligned
}
.dock-dot.on { background-color: $fg; }   // white running indicator
.dock-dot-spacer { min-width: 4px; }      // matches the dot, keeps icon centred

// ---- dock right-click menu ------------------------------------------------
.dock-menu-backdrop { background-color: transparent; }
.dock-catcher { background-color: transparent; }
.panel-backdrop { background-color: transparent; }
.spot-backdrop { background-color: transparent; }

// even opacity fade for the top panels (content pre-rendered at opacity 0, then
// only opacity animates → no size change, no re-layout → perfectly smooth)
.panel-fade { opacity: 0; transition: opacity 100ms ease-in-out; }
.panel-fade.shown { opacity: 1; }
.dock-menu {
  background-color: rgba(16, 16, 20, 0.93);
  border-radius: 16px;
  padding: 6px;
  margin: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.dock-menu-title {
  color: $muted;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px 4px 12px;
}
.dock-menu-item {
  color: $fg;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 10px;
}
.dock-menu-item:hover { background-color: $accent-14; color: $accent; }
.dock-menu-item.danger:hover { background-color: rgba(220, 90, 90, 0.22); color: #ff7a7a; }
.dock-menu-ws { color: $accent; font-size: 11px; font-weight: 700; }
.dock-menu-sep {
  min-height: 1px;
  background-color: rgba(255, 255, 255, 0.08);
  margin: 4px 8px;
}

// ---- notifications --------------------------------------------------------
.notif-list  { margin-top: 6px; }
.notif-head  { margin-bottom: 2px; }
.notif-clear {
  color: $muted;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
}
.notif-clear:hover { color: $accent; background-color: $bg-alt; }
.notif-empty { color: $muted; font-size: 13px; padding: 4px 2px; }

.notif-card {
  background-color: $bg-alt;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
.notif-app     { color: $accent; font-size: 11px; font-weight: 700; }
.notif-time    { color: $muted;  font-size: 11px; }
.notif-summary { color: $fg;     font-size: 13px; font-weight: 600; }
.notif-body    { color: $muted;  font-size: 12px; }
.notif-x {
  color: $muted;
  font-size: 14px;
  padding: 0 4px;
  border-radius: 8px;
}
.notif-x:hover { color: $fg; background-color: $bg-hi; }

// the top-right toast: same card look, a touch more presence.
// Keep the shadow blur smaller than the margin below, otherwise GTK clips it
// to the window rectangle and the rounded corners look square.
.notif-popup {
  border: 1px solid $accent-22;
  margin: 10px 10px 14px 10px;   // right = gaps_out (10) so it lines up with windows
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);
}

// ---- updates panel --------------------------------------------------------
.upd-head { margin-bottom: 2px; }
.upd-count {
  color: $accent;
  font-size: 13px;
  font-weight: 700;
  background-color: $accent-14;
  padding: 1px 9px;
  border-radius: 999px;
}
.upd-list { padding-right: 6px; }
.upd-row  { padding: 5px 8px; border-radius: 8px; }
.upd-row:hover { background-color: $bg-alt; }
.upd-name  { color: $fg;     font-size: 13px; }
.upd-old   { color: $muted;  font-size: 12px; }
.upd-arrow { color: $muted;  font-size: 12px; }
.upd-new   { color: $accent; font-size: 12px; font-weight: 600; }
.upd-all   { margin-top: 4px; }

// ---- control-center now-playing -------------------------------------------
.cc-music {
  background-color: $bg-alt;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.cc-cover {
  min-width: 52px;
  min-height: 52px;
  border-radius: 12px;
  background-color: $bg-hi;
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
.cc-cover-fallback { font-size: 24px; color: $muted; }
.cc-m-title  { font-size: 14px; font-weight: 700; color: $fg; }
.cc-m-artist { font-size: 12px; color: $muted; }
.cc-m-controls { margin-top: 4px; }
.cc-m-btn {
  font-size: 18px;
  color: $fg;
  padding: 2px 4px;
  border-radius: 8px;
}
.cc-m-btn:hover { color: $accent; background-color: $bg-hi; }
.cc-m-btn.play  { color: $accent; }

// ===========================================================================
//  LIGHT  ("Shibui") — applied to panels/dock when GNOME is in light mode.
//  The .light class is added to each panel/dock root; the bar never gets it.
// ===========================================================================
$bg-l:     #f3f1ec;   // soft warm white
$bg-alt-l: #e8e4dc;   // cards / tiles
$bg-hi-l:  #ddd8ce;   // hover
$fg-l:     #2a2926;   // near-black ink
$muted-l:  #6f6b62;   // muted ink
$border-l: rgba(0, 0, 0, 0.10);
$acc-l:    $accent-dim;   // darker violet reads better on white

// ---- generic panel ---------------------------------------------------------
.panel.light {
  background-color: $bg-l;
  color: $fg-l;
  border: 1px solid $border-l;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}
.light .panel-title { color: $fg-l; }

// ---- control-center tiles / actions ---------------------------------------
.light .tile {
  background-color: $bg-alt-l;
  color: $muted-l;
  border: 1px solid $border-l;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.light .tile:hover { background-color: $bg-hi-l; }
.light .tile.active {
  background-color: $accent-14;
  color: $acc-l;
  border: 1px solid $accent-22;
}
.light .tile.active:hover { background-color: $accent-08; }

.light .action {
  background-color: $bg-alt-l;
  color: $fg-l;
  border: 1px solid $border-l;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.light .action:hover { background-color: $accent; color: #fff; box-shadow: 0 2px 8px rgba(163, 158, 196, 0.4); }

// ---- sliders ---------------------------------------------------------------
.light .slider-icon { color: $fg-l; }
.light .slider-val  { color: $muted-l; }
.light scale trough { background-color: $bg-hi-l; }
.light scale slider { background-color: $fg-l; }
.light .metric-bar trough { background-color: $bg-hi-l; }

// ---- audio dropdown --------------------------------------------------------
.light .audio-caret { color: $muted-l; }
.light .audio-caret:hover { color: $fg-l; }
.light .audio-dev { background-color: $bg-alt-l; color: $muted-l; border: 1px solid $border-l; }
.light .audio-dev:hover { background-color: $bg-hi-l; color: $fg-l; }
.light .audio-dev.active { background-color: $accent-14; color: $acc-l; border: 1px solid $accent-22; }

// ---- calendar --------------------------------------------------------------
.light calendar { color: $fg-l; }
.light calendar.header { color: $fg-l; }
.light calendar:indeterminate { color: $muted-l; }

// ---- music -----------------------------------------------------------------
.light .m-title  { color: $fg-l; }
.light .m-artist { color: $muted-l; }
.light .cover    { background-color: $bg-alt-l; }
.light .m-btn    { color: $fg-l; }
.light .m-btn:hover { background-color: $bg-alt-l; color: $acc-l; }

// ---- sysmon ----------------------------------------------------------------
.light .metric-icon { color: $acc-l; }

// ---- notifications ---------------------------------------------------------
.light .notif-card {
  background-color: $bg-alt-l;
  border: 1px solid $border-l;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}
.light .notif-app     { color: $acc-l; }
.light .notif-time    { color: $muted-l; }
.light .notif-summary { color: $fg-l; }
.light .notif-body    { color: $muted-l; }
.light .notif-x       { color: $muted-l; }
.light .notif-x:hover { color: $fg-l; background-color: $bg-hi-l; }
.light .notif-clear   { color: $muted-l; }
.light .notif-clear:hover { color: $acc-l; background-color: $bg-alt-l; }
.light .notif-empty   { color: $muted-l; }

// ---- dock (frosted white) --------------------------------------------------
.dock.light {
  background-color: rgba(243, 241, 236, 0.55);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22),
              inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.dock.light .dock-item:hover { background-color: rgba(0, 0, 0, 0.06); }
.dock.light .dock-dot.on { background-color: $fg-l; }   // dark dot on light glass

// ---- dock menu -------------------------------------------------------------
.dock-menu.light {
  background-color: rgba(243, 241, 236, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.dock-menu.light .dock-menu-title { color: $muted-l; }
.dock-menu.light .dock-menu-ws { color: $acc-l; }
.dock-menu.light .dock-menu-sep { background-color: rgba(0, 0, 0, 0.12); }
.dock-menu.light .dock-menu-item  { color: $fg-l; }
.dock-menu.light .dock-menu-item:hover { background-color: $accent-14; color: $acc-l; }

// ---- updates panel (light) -------------------------------------------------
.light .upd-count { color: $acc-l; background-color: $accent-14; }
.light .upd-row:hover { background-color: $bg-alt-l; }
.light .upd-name  { color: $fg-l; }
.light .upd-old   { color: $muted-l; }
.light .upd-arrow { color: $muted-l; }
.light .upd-new   { color: $acc-l; }

// ---- control-center header / power (light) --------------------------------
.light .cc-iconbtn { color: $muted-l; }
.light .cc-iconbtn:hover  { color: $fg-l; background-color: $bg-alt-l; }
.light .cc-iconbtn.active { color: $acc-l; background-color: $accent-14; }
.light .power-menu { background-color: $bg-alt-l; border: 1px solid $border-l; }
.light .power-item { color: $fg-l; }
.light .power-item:hover { background-color: $accent-14; color: $acc-l; }

// ---- now-playing (light) ---------------------------------------------------
.light .cc-music { background-color: $bg-alt-l; border: 1px solid $border-l; }
.light .cc-cover { background-color: $bg-hi-l; }
.light .cc-m-title  { color: $fg-l; }
.light .cc-m-artist { color: $muted-l; }
.light .cc-m-btn    { color: $fg-l; }
.light .cc-m-btn:hover { color: $acc-l; background-color: $bg-hi-l; }
.light .cc-m-btn.play  { color: $acc-l; }

// ===========================================================================
//  SPOTLIGHT LAUNCHER
// ===========================================================================
.spot {
  background-color: $bg;
  border: 1px solid $accent-22;
  border-radius: 18px;
  padding: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.spot-search { padding: 8px 12px; }
.spot-search-icon { color: $muted; font-size: 19px; }
.spot-input {
  color: $fg;
  font-size: 19px;
  background-color: transparent;
  border: none;
  box-shadow: none;
  caret-color: $accent;
}
.spot-list { padding: 6px 4px 2px; }
.spot-row {
  padding: 7px 10px;
  border-radius: 12px;
  background-color: transparent;
}
.spot-row:hover { background-color: $accent-14; }
.spot-icon { min-width: 36px; }
.spot-img {
  min-width: 30px; min-height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.spot-glyph { color: $accent; font-size: 22px; }
.spot-title { color: $fg; font-size: 14px; }
.spot-sub   { color: $muted; font-size: 11px; }

// ---- spotlight (light) ----------------------------------------------------
.spot.light {
  background-color: $bg-l;
  border: 1px solid $accent-22;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.50);
}
.spot.light .spot-search-icon { color: $muted-l; }
.spot.light .spot-input { color: $fg-l; caret-color: $acc-l; }
.spot.light .spot-row:hover { background-color: $accent-14; }
.spot.light .spot-glyph { color: $acc-l; }
.spot.light .spot-title { color: $fg-l; }
.spot.light .spot-sub   { color: $muted-l; }

// ---- spotlight category pills ---------------------------------------------
.spot-pills { padding: 6px 6px 2px; }
.spot-pill {
  padding: 4px 11px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.05);
  color: $muted;
}
.spot-pill:hover { background-color: $accent-14; color: $fg; }
.spot-pill.active { background-color: $accent-22; color: $fg; }
.spot-pill-icon  { font-size: 13px; }
.spot-pill-label { font-size: 12px; }
.spot.light .spot-pill { background-color: rgba(0, 0, 0, 0.05); color: $muted-l; }
.spot.light .spot-pill:hover  { color: $fg-l; }
.spot.light .spot-pill.active { color: $fg-l; }

// AUR badge in the updates panel
.upd-src.aur {
  font-size: 9px;
  color: $accent;
  background-color: $accent-14;
  border-radius: 5px;
  padding: 0 4px;
}
.light .upd-src.aur { color: $acc-l; background-color: $accent-14; }

// pill sigil hint + keyboard focus (GTK Tab traversal)
.spot-pill-key {
  font-size: 10px;
  color: $muted;
  background-color: rgba(255, 255, 255, 0.07);
  border-radius: 5px;
  padding: 0 4px;
  margin-left: 2px;
}
.spot-pill:focus {
  background-color: $accent-22;
  color: $fg;
  outline: none;
  box-shadow: 0 0 0 2px $accent;
}
.spot-row:focus { background-color: $accent-22; outline: none; }
.spot.light .spot-pill-key { color: $muted-l; background-color: rgba(0,0,0,0.06); }

// in-panel update progress
.upd-prog {
  background-color: $bg-alt;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 12px 14px;
}
.upd-prog-spin { color: $accent; font-size: 16px; }
.upd-prog-text { color: $muted; font-size: 11px; }
.light .upd-prog { background-color: $bg-alt-l; border: 1px solid $border-l; }
.light .upd-prog-spin { color: $acc-l; }
.light .upd-prog-text { color: $muted-l; }
