/* =========================================================================
 * Brushed Metal skin — CSS overrides
 *
 * Companion to js/skins/brushed.js. Together they form the complete
 * Brushed Metal skin. To remove the skin: delete both files and the
 * <link>/<script> tags from index.html.
 *
 * All rules are scoped under body[data-skin="brushed"] so they only
 * activate when the skin is selected in Settings > Skins.
 * ========================================================================= */

/* =========================================================================
 * Drawer skins — SHELL ONLY
 *
 * Body attribute `data-skin` selects between visual treatments of
 * the bottom (admin) drawer. "stclaude" is the default dashboard look,
 * already styled by the base rules above, so this file only defines the
 * alternate skin's SHELL — panel, scrollbar, head, handle.
 *
 * Content-specific styling (admin buttons, section cards, service tiles,
 * inline-color overrides, etc.) lives alongside the admin region's HTML
 * in DEFAULT_ADMIN_CSS (js/config.js), so swapping drawer content
 * doesn't require touching this file, and swapping the skin doesn't
 * require touching content files.
 *
 * "brushed" — ported from POC1. A light aluminum panel with a brushed
 * noise texture; js/config.js generates two variants (panel + elements)
 * as data URLs and pins them to --brushed-metal-url / -url-elements.
 * ========================================================================= */
body[data-skin="brushed"] {
  /* Specular highlight — full-width gradient layered ON TOP of the tiled
     brush-grain texture. Darker edges (a "lit from above" vignette in the
     horizontal axis) with a bright vertical column through the center,
     so each panel reads as one continuous sheet of polished metal
     regardless of element size. Baking this into the tile would produce
     repeating highlight stripes when the tile wraps, so it lives here. */
  --brushed-sheen:
    linear-gradient(90deg,
      rgba(20, 40, 55, 0.38)  0%,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.50) 50%,
      rgba(255, 255, 255, 0) 70%,
      rgba(20, 40, 55, 0.38) 100%);

  /* Chart palette — charts.js reads these via themeColor() in the canvas
     draw functions. Transparent background so the brushed metal shows
     through, near-black text with a slight blue cast for legibility on
     the metal, and heavier ink for grid lines so they read against the
     sheen. --chart-series-darken shades every plotted line/fill toward
     black by this fraction (0..1); the default dark-shell palette is
     too light to read on a pale metal panel. */
  --chart-bg:            transparent;
  --chart-grid:          rgba(8, 14, 24, 0.70);
  --chart-grid-center:   rgba(5, 10, 18, 0.92);
  --chart-label:         #050a14;
  --chart-label-strong:  #000000;
  --chart-label-dim:     #2a3448;
  --chart-stroke-dim:    rgba(5, 10, 18, 0.88);
  --chart-series-darken: 0.45;

  /* Gold sheen — paired with --brushed-gold-url for the admin drawer.
     Three bright vertical bands with warm-dark bands between them,
     approximating the multi-highlight look of a polished brass sheet. */
  --brushed-gold-sheen:
    linear-gradient(90deg,
      rgba(55, 35, 8, 0.40)    0%,
      rgba(255, 230, 140, 0.45) 20%,
      rgba(50, 30, 5, 0.25)    35%,
      rgba(255, 240, 170, 0.55) 50%,
      rgba(50, 30, 5, 0.25)    65%,
      rgba(255, 230, 140, 0.45) 80%,
      rgba(55, 35, 8, 0.40)   100%);
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-panel {
  background-color: rgb(201, 163, 85);
  background-image: var(--brushed-gold-sheen), var(--brushed-gold-url, none);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 600px auto;
  /* `local` — background scrolls with panel content (not the viewport),
     so sections don't slide over a pinned texture. */
  background-attachment: local;
  /* No border-top: when closed, max-height collapses to 0 but the border
     still paints a thin line across ~95% of the viewport. */
  border-top: none;
  border-bottom: none;
  /* Chamfered top corners + beveled frame. The radii give the panel a
     machined-edge look where it meets the top of the viewport; the
     stack of inset box-shadows fakes the 45° chamfer face on top +
     softer bevels on the other sides so every visible edge reads as
     a raised metal plate rather than a flat painted surface. */
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  color: #2a2a2a;
  /* Panel keeps only the outer drop shadow + hairline rim. The chamfer
     bevel itself has moved to .drawer-rail--bottom.is-open::before so
     it overlays the scrolling content instead of being painted under
     it. Otherwise `inset` box-shadows draw on the padding box *below*
     children, which meant scrolled content rode over the top chamfer. */
  box-shadow:
    0 -8px 28px rgba(0, 0, 0, 0.40),                  /* lift from page below */
    0 -1px 0 rgba(60, 40, 10, 0.7);                   /* hairline outer rim */
  /* Needed so the ::before overlay (on the rail) can match the panel's
     clipping corners when sized with border-radius: inherit. */
  position: relative;
  /* Removed scrollbar-width/color on purpose: modern Chromium's
     standards-based scrollbar styling (triggered by scrollbar-width)
     SUPPRESSES the legacy ::-webkit-scrollbar pseudo-elements, which
     is where we paint the brushed-metal texture. Without those shorthand
     properties, Chromium falls back to legacy webkit scrollbars and our
     texture actually applies. Firefox falls back to its UA default here;
     we can add scrollbar-color back if/when someone wants it. */
}
/* ── Beveled overlay — paints the chamfer ABOVE the scrolling content.
 *
 * The panel itself scrolls (overflow-y: auto when open), and inset
 * box-shadows on that panel get painted below its children — so as
 * the user scrolled, content rode visually *over* the top chamfer.
 *
 * The rail is position:fixed and doesn't scroll, so a pseudo-element
 * anchored to the rail can sit over the panel without moving. When
 * the drawer is open the pull handle is display:none, so the rail's
 * height collapses to the panel's height and `inset: 0 12px` (the
 * 12px matches .drawer-rail--bottom .drawer-panel's horizontal
 * margin) nails the overlay onto the panel's visible box.
 *
 * pointer-events: none so the overlay doesn't eat clicks on anything
 * below it. z-index keeps it above the panel's scrolling content but
 * below modal dialogs etc. */
body[data-skin="brushed"] .drawer-rail--bottom.is-open::before {
  content: '';
  position: absolute;
  inset: 0 12px;
  pointer-events: none;
  z-index: 2;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  box-shadow:
    inset 0 9px 0 rgba(255, 232, 165, 0.78),          /* TOP chamfer — bright face */
    inset 0 14px 10px -5px rgba(70, 45, 10, 0.6),     /* dark line below chamfer */
    inset 9px 0 0 rgba(255, 225, 145, 0.38),          /* left edge highlight */
    inset -9px 0 0 rgba(85, 55, 12, 0.45),            /* right edge shadow */
    inset 0 -9px 0 rgba(40, 25, 5, 0.40);             /* inner lower edge */
}
/* Mobile: the drawer-panel drops its 12 px side margins
   (drawers.css @media max-width 768px). Collapse the bevel overlay's
   horizontal inset to 0 to match, but KEEP the rounded top corners —
   the panel also re-asserts top radii below so the drawer's top edge
   stays rounded on phones, matching the desktop look. */
@media (max-width: 768px) {
  body[data-skin="brushed"] .drawer-rail--bottom.is-open::before {
    inset: 0;
  }
  /* Restore the panel's rounded top corners on mobile — base
     drawers.css zeroes them out for edge-to-edge fit, but the bevel
     overlay + rail edges look unfinished without the curve. */
  body[data-skin="brushed"] .drawer-rail--bottom .drawer-panel {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
  }
}
/* Scrollbar column carries its own copy of the metal texture. Tried a
   transparent scrollbar so the panel's own background-image could show
   through, but Chromium excludes the scrollbar gutter from paint when
   `background-attachment: local` is active on the panel — the column
   ended up white. Painting directly on the scrollbar + track produces
   a tiny seam at the scrollbar boundary when scrolled (the panel
   texture moves with content via `local`, the scrollbar texture is
   fixed to its element), but that's a better trade than a visible
   white column next to the metal. */
body[data-skin="brushed"] .drawer-rail--bottom .drawer-panel::-webkit-scrollbar {
  width: 9px;
  background-color: rgb(201, 163, 85);
  background-image: var(--brushed-gold-url, none);
  background-repeat: repeat;
  background-size: 600px auto;
  /* Match the panel's 8px top-right corner so the scrollbar column
     clips to the drawer's rounded top edge instead of painting a hard
     square corner past it. */
  border-top-right-radius: 8px;
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-panel::-webkit-scrollbar-track {
  background-color: rgb(201, 163, 85);
  background-image: var(--brushed-gold-url, none);
  background-repeat: repeat;
  background-size: 600px auto;
  /* margin-top clears the sticky "Admin Drawer" header (.drawer-head,
     ~40px tall at padding:12px 18px + 13px text + 1px border). 48px
     leaves a small gap below the header bottom so the scrollbar can't
     touch the title bar. */
  margin-top: 48px;
  margin-bottom: 4px;
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-panel::-webkit-scrollbar-thumb {
  /* Gold thumb to match the drawer. Light-to-dark vertical gradient
     reads as a polished cylinder; warm amber border + inner white
     highlight along the top edge sell the 3D lift. */
  background: linear-gradient(180deg,
    rgba(230, 185, 95, 0.95),
    rgba(140, 95, 30, 1));
  border: 1px solid rgba(60, 40, 10, 0.55);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 165, 0.55);
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-panel::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    rgba(255, 205, 115, 1),
    rgba(165, 115, 40, 1));
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-panel::-webkit-scrollbar-corner {
  background: transparent;
}
/* Sticky top bar inside the panel. Uses the panel texture so it reads as
   a raised lip rather than a bolted-on strip. The bottom separator is
   drawn by a ::after pseudo-element (not border-bottom) so we can trim
   it symmetrically — drop the right edge out by the scrollbar width,
   then inset the left edge by the same amount so the line looks
   balanced end-to-end instead of running past the title on the left
   and stopping short of the scrollbar column on the right. */
body[data-skin="brushed"] .drawer-rail--bottom .drawer-head {
  background-color: rgb(201, 163, 85);
  background-image: var(--brushed-gold-sheen), var(--brushed-gold-url, none);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 600px auto;
  color: #1a1a2e;
  font-weight: 700;
  border-bottom: none;
  position: relative;
  /* Round the top corners to sit flush inside the panel's rounded frame
     when the drawer is extended. The rail-level ::before overlay
     (see above) now supplies the chamfer bevel on top of the scrolling
     panel, so the head no longer needs its own inset shadow stack —
     that would just double up the top edge on non-scrolled content. */
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  box-shadow: none;
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-head::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;  /* inset by the same amount as the natural right gap so
                   both ends visually match */
  bottom: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-close {
  color: #2a2a2a;
}
/* Handle — same noise texture so the drawer reads as one continuous
   metal surface when open (the handle sits flush against the panel's
   top edge when closed). Neutral dark text so it reads on the metal
   without the steel-blue tint that pulled attention in an otherwise
   monochrome palette. */
body[data-skin="brushed"] .drawer-rail--bottom .drawer-handle {
  background-color: rgb(201, 163, 85);
  background-image: var(--brushed-gold-sheen), var(--brushed-gold-url, none);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 600px auto;
  border: 1px solid rgba(60, 40, 10, 0.5);
  border-bottom: none;
  /* Chamfered top corners + beveled frame — matches the drawer panel
     so the handle reads as an integral machined lip rather than a
     sticker applied to the chrome. Four-sided inset shadow stack gives
     it a full 3D rim; top gets the brightest highlight (light hitting
     the 45° chamfer face), right side dimmer to suggest depth. */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  color: #1a1a2e;
  /* Thinner bevel on the closed-drawer handle — the handle is a small
     pull-tab rather than the full drawer face, so it reads better with
     a ~4-5px chamfer. Panel + head use the 9px variant. */
  box-shadow:
    0 -5px 16px rgba(0, 0, 0, 0.26),                  /* lift above bottom edge */
    inset 0 5px 0 rgba(255, 232, 165, 0.85),          /* TOP chamfer face */
    inset 0 8px 6px -3px rgba(70, 45, 10, 0.48),      /* dark line below chamfer */
    inset 4px 0 0 rgba(255, 222, 140, 0.5),           /* left bevel highlight */
    inset -4px 0 0 rgba(85, 55, 12, 0.5),             /* right bevel shadow */
    inset 0 -3px 0 rgba(40, 25, 5, 0.45);             /* bottom footing */
}
/* When the admin drawer is open, hide the pull handle at the viewport
   bottom — the drawer's own top bar (see .drawer-head override below)
   now carries the "Admin Drawer" label and close button, so keeping
   the bottom handle visible duplicates the affordance and clutters
   the screen. The handle still does its job when the drawer is closed. */
body[data-skin="brushed"] .drawer-rail--bottom.is-open .drawer-handle {
  display: none;
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-handle:hover {
  color: #000;
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-handle.is-active {
  color: #000;
  border-color: rgba(0, 0, 0, 0.5);
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-handle-bar {
  background: rgba(0, 0, 0, 0.35);
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-handle.is-active .drawer-handle-bar {
  background: rgba(0, 0, 0, 0.65);
}
/* Text + link colors flipped dark for readability on light metal. */
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body,
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body * {
  color: #2a2a2a;
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body a {
  color: #1a1a2e;
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,0.25);
}
/* Inline-style color overrides — admin.js writes colors straight onto
   leaf elements. Inline wins over parent color, so we match the known
   palette explicitly. Dashboard accents → near-black; dim greys → dark. */
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="color:#4fc1c9"],
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="color: #4fc1c9"],
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="color:#0a4a7a"] {
  color: #1a1a2e !important;
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="color:#d8d9da"],
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="color: #d8d9da"],
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="color:#ccc"],
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="color:#bbb"],
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="color:#aaa"],
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="color:#999"],
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="color:#888"],
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="color:#777"] {
  color: #2a2a2a !important;
}
/* Seam borders that used the dim-cyan tint → dark. */
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="border-bottom:1px solid rgba(255"],
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="border-top:1px solid rgba(255"],
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="border:1px solid rgba(255"] {
  border-color: rgba(0,0,0,0.15) !important;
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="text-shadow"] {
  text-shadow: none !important;
}
/* Buttons — machined-metal pills with texture + bevel. */
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body button[style],
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body a.admin-btn,
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body #adminServiceLinks a {
  background-color: rgb(211, 173, 95) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.05) 50%, rgba(0,0,0,0.08)),
    var(--brushed-gold-url, none) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 100% 100%, 600px auto !important;
  background-position: 0 0, 0 0 !important;
  color: #2a2a2a !important;
  border: 1px solid rgba(0, 0, 0, 0.5) !important;
  border-bottom-color: rgba(0, 0, 0, 0.6) !important;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.18),
    0 1px 1px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  padding: 3px 9px !important;
  font-size: 10px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body button[style]:nth-of-type(2n),
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body a.admin-btn:nth-of-type(2n),
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body #adminServiceLinks a:nth-of-type(2n) {
  background-position: 0 0, 73px 211px !important;
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body button[style]:nth-of-type(3n),
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body a.admin-btn:nth-of-type(3n),
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body #adminServiceLinks a:nth-of-type(3n) {
  background-position: 0 0, 189px 47px !important;
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body button[style]:nth-of-type(5n),
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body a.admin-btn:nth-of-type(5n),
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body #adminServiceLinks a:nth-of-type(5n) {
  background-position: 0 0, 311px 519px !important;
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body button[style]:nth-of-type(7n),
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body a.admin-btn:nth-of-type(7n),
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body #adminServiceLinks a:nth-of-type(7n) {
  background-position: 0 0, 417px 283px !important;
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body button[style]:nth-of-type(11n),
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body a.admin-btn:nth-of-type(11n),
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body #adminServiceLinks a:nth-of-type(11n) {
  background-position: 0 0, 91px 677px !important;
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body button[style]:hover,
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body a.admin-btn:hover,
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body #adminServiceLinks a:hover {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.15) 50%, rgba(0,0,0,0.05)),
    var(--brushed-gold-url, none) !important;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body button[style]:active,
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body a.admin-btn:active,
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body #adminServiceLinks a:active {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.02) 50%, rgba(255,255,255,0.1)),
    var(--brushed-gold-url, none) !important;
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.25),
    inset 0 -1px 0 rgba(255, 255, 255, 0.25) !important;
}
/* Inline-background palette — neutralize cyan, retint danger/warn/green. */
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="background:rgba(79,193,201"],
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="background: rgba(79, 193, 201"] {
  background-color: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body button.adminEditBtn,
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body button.adminSaveBtn,
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body button.adminCancelBtn {
  color: #1a1a2e !important;
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="background:rgba(224,128,128,0.06"],
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="background:rgba(224, 128, 128, 0.06"] {
  background: rgba(180, 50, 45, 0.18) !important;
  border-color: rgba(120, 20, 15, 0.4) !important;
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body button[style*="background:rgba(224,128,128"],
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body button[style*="background: rgba(224, 128, 128"] {
  background: linear-gradient(180deg, rgba(210, 60, 55, 0.75), rgba(160, 30, 28, 0.9)) !important;
  color: #fff !important;
  border: 1px solid rgba(90, 15, 12, 0.65) !important;
  border-top-color: rgba(255, 170, 165, 0.6) !important;
  border-bottom-color: rgba(60, 10, 8, 0.85) !important;
  box-shadow:
    0 2px 4px rgba(120, 20, 15, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 210, 205, 0.5) !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35) !important;
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body button[style*="background:rgba(224,128,128"]:hover,
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body button[style*="background: rgba(224, 128, 128"]:hover {
  background: linear-gradient(180deg, rgba(230, 80, 70, 0.85), rgba(180, 40, 35, 0.95)) !important;
  border-color: rgba(80, 10, 8, 0.85) !important;
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="background:rgba(212,145,94"],
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="background: rgba(212, 145, 94"] {
  background: rgba(150, 95, 35, 0.25) !important;
  color: #6a3a0a !important;
  border-color: rgba(150, 95, 35, 0.5) !important;
}
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="background:rgba(34,204,68"],
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="background: rgba(34, 204, 68"],
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="background:rgba(39,174,96"],
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="background:#2a6"] {
  background: rgba(22, 100, 50, 0.22) !important;
  color: #124a24 !important;
  border-color: rgba(22, 100, 50, 0.5) !important;
}
/* Service-link tiles — dark text, icon treatment for Qui/Portainer. */
body[data-skin="brushed"] #adminServiceLinks a {
  color: #1a1a2e !important;
}
body[data-skin="brushed"] #adminServiceLinks img {
  filter: brightness(0.85) !important;
}
/* The Qui/Portainer-on-dark-disc treatment that used to live here was
   a workaround for the old admin.js which forced both icons to pure
   white silhouettes via `brightness(0) invert(1)`. With that filter
   removed (icons now render in their native colors from selfh.st /
   homarr-labs), the dark disc is no longer needed and was showing as
   a black circle BEHIND the glyph — hiding it. No override now: let
   the icons render flat on the gold panel like every other service. */
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body .admin-section-title,
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="color:var(--u-accent)"],
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="color: var(--u-accent)"] {
  color: #1a1a2e !important;
}
/* Service tiles strip — force single-row grid; labels truncate. */
body[data-skin="brushed"] #adminServiceLinks > div:last-child {
  grid-template-columns: none !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(0, 1fr) !important;
}
/* On narrow viewports the single-row launcher strip overflows the
   drawer (all 15+ service buttons crammed across the width). Drop
   back to auto-fill wrapping so they flow across multiple rows and
   every button stays reachable on mobile. */
@media (max-width: 900px) {
  body[data-skin="brushed"] #adminServiceLinks > div:last-child {
    grid-auto-flow: row !important;
    grid-auto-columns: initial !important;
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)) !important;
  }
}
body[data-skin="brushed"] #adminServiceLinks a span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Service/project rows — never wrap; inner button clusters neither.
   Wider grid tracks so danger cards fit on one line. */
body[data-skin="brushed"] #adminBody > div > div > div,
body[data-skin="brushed"] #adminBody > div > div > div > div {
  flex-wrap: nowrap !important;
  overflow: hidden;
}
body[data-skin="brushed"] #adminBody > div > div[style*="grid-template-columns"] {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}
body[data-skin="brushed"] #adminBody > div > div > div > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Warning icon — saturated red with halo. */
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body span[style*="color:#e08080"] {
  color: #b02020 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.5),
    0 0 4px rgba(255, 80, 80, 0.45) !important;
  margin: 0 2px;
}
/* Auth-status text — darker for legibility. */
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body .admin-auth-text,
body[data-skin="brushed"] .drawer-rail--bottom .drawer-body [style*="color:var(--u-text-dim)"] {
  color: #4a4a5a !important;
}
/* Section cards — raised tiles with brushed texture + drop shadow. */
body[data-skin="brushed"] #adminBody > div {
  background-color: rgba(255, 255, 255, 0.15) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0) 50%, rgba(0,0,0,0.05)),
    var(--brushed-gold-url, none) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 100% 100%, 600px auto !important;
  background-position: 0 0, 0 0 !important;
  background-attachment: local, local !important;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 1px rgba(0, 0, 0, 0.1);
}
body[data-skin="brushed"] #adminBody > div:nth-of-type(2n) {
  background-position: 0 0, 137px 313px !important;
}
body[data-skin="brushed"] #adminBody > div:nth-of-type(3n) {
  background-position: 0 0, 251px 89px !important;
}
body[data-skin="brushed"] #adminBody > div:nth-of-type(5n) {
  background-position: 0 0, 43px 547px !important;
}
body[data-skin="brushed"] #adminBody > div:nth-of-type(7n) {
  background-position: 0 0, 379px 191px !important;
}
body[data-skin="brushed"] #adminBody > div > div[style*="font-size:12px"],
body[data-skin="brushed"] #adminBody > div > div[style*="letter-spacing"] {
  color: #1a1a2e !important;
  font-weight: 700 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
body[data-skin="brushed"] #adminBody > div > div > div {
  background-color: rgba(0, 0, 0, 0.08) !important;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0) 50%, rgba(255,255,255,0.08)),
    var(--brushed-gold-url, none) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 100% 100%, 600px auto !important;
  background-position: 0 0, 0 0 !important;
  background-attachment: local, local !important;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-top-color: rgba(0, 0, 0, 0.18);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  padding: 6px 10px;
  margin: 3px 0;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.18),
    inset 0 1px 1px rgba(0, 0, 0, 0.1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.4);
}
body[data-skin="brushed"] #adminBody > div > div > div:nth-of-type(2n) {
  background-position: 0 0, 163px 241px !important;
}
body[data-skin="brushed"] #adminBody > div > div > div:nth-of-type(3n) {
  background-position: 0 0, 53px 421px !important;
}
body[data-skin="brushed"] #adminBody > div > div > div:nth-of-type(5n) {
  background-position: 0 0, 287px 127px !important;
}
body[data-skin="brushed"] #adminBody > div > div > div:nth-of-type(7n) {
  background-position: 0 0, 401px 583px !important;
}
body[data-skin="brushed"] #adminBody > div > div > div:nth-of-type(11n) {
  background-position: 0 0, 119px 37px !important;
}
/* Console terminal-preview card escapes the brushed inset treatment —
   it's a deliberate dark terminal look (#0c0c0c bg, green border) that
   would disappear underneath the gold metal tile otherwise. */
body[data-skin="brushed"] #adminBody div.admin-console-preview {
  background-color: #0c0c0c !important;
  background-image: none !important;
  background-attachment: scroll !important;
  border: 2px solid #2a6 !important;
  box-shadow: none !important;
}
body[data-skin="brushed"] #adminBody .admin-console-preview,
body[data-skin="brushed"] #adminBody .admin-console-preview * {
  color: inherit;  /* let the inline terminal colors come through */
}
/* `.admin-naked` marker — opt a whole section out of the brushed
   card-inset treatment. Applied to adminSection wrappers that shouldn't
   read as cards on the gold panel (e.g. the Console section, which
   contains its own terminal-styled launch card). Strip ONLY the
   visual (bg/border/shadow) — keep layout padding/margins intact. */
body[data-skin="brushed"] #adminBody > div.admin-naked,
body[data-skin="brushed"] #adminBody > div.admin-naked > div,
body[data-skin="brushed"] #adminBody > div.admin-naked > div > div {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}
/* Keep the Console terminal-preview card black even when it sits inside
   an .admin-naked section. The rule above strips backgrounds from every
   descendant up to depth 3 via > div > div, which in the demo's flatter
   DOM catches .admin-console-preview too. This higher-specificity rule
   restores the deliberate dark terminal look. */
body[data-skin="brushed"] #adminBody .admin-naked .admin-console-preview {
  background-color: #0c0c0c !important;
  background-image: none !important;
  border: 2px solid #2a6 !important;
  box-shadow: none !important;
}
/* Config groups (.adminConfigGroup) — readings themselves are the
   content; the old cyan-tinted card wrapper turned into a dark
   rectangle on gold. Keep it flat with a dashed top divider only. */
body[data-skin="brushed"] #adminBody .adminConfigGroup {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
body[data-skin="brushed"] #adminBody .adminConfigGroup:first-child {
  border-top: none !important;
}
/* Appearance picker selects — gold machined pills matching the admin
   buttons. Same recipe: gold base + vertical highlight gradient +
   brushed-gold tile + dark border. Keeps the chevron glyph (from the
   base .admin-picker-select rule) visible by recolouring `currentColor`
   to near-black. */
body[data-skin="brushed"] .admin-appearance .admin-picker-select {
  background-color: rgb(211, 173, 95);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,230,140,0.1) 50%, rgba(0,0,0,0.08)),
    var(--brushed-gold-url, none),
    linear-gradient(45deg, transparent 50%, #2a2a2a 50%),
    linear-gradient(135deg, #2a2a2a 50%, transparent 50%);
  background-position: 0 0, 0 0, calc(100% - 14px) 52%, calc(100% - 10px) 52%;
  background-size: 100% 100%, 600px auto, 5px 5px, 5px 5px;
  background-repeat: no-repeat, repeat, no-repeat, no-repeat;
  color: #1a1a2e;
  border: 1px solid rgba(60, 40, 10, 0.5);
  border-bottom-color: rgba(60, 40, 10, 0.6);
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 232, 165, 0.55);
  font-weight: 500;
}
body[data-skin="brushed"] .admin-appearance .admin-picker-select:hover {
  border-color: rgba(60, 40, 10, 0.7);
}
body[data-skin="brushed"] .admin-appearance .admin-appearance-label {
  color: #1a1a2e;
  text-shadow: 0 1px 0 rgba(255,232,165,0.4);
}
/* Option list inside the select — keep the light bg + dark text so the
   expanded menu reads clearly over whatever's behind it. */
body[data-skin="brushed"] .admin-appearance .admin-picker-select option {
  background: rgb(232, 218, 186);
  color: #1a1a2e;
}
/* Command/result pane — inset like a stamped-in label. */
body[data-skin="brushed"] #adminResult {
  background-color: rgba(255, 255, 255, 0.12) !important;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0) 50%, rgba(255,255,255,0.08)),
    var(--brushed-gold-url, none) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 100% 100%, 600px auto !important;
  background-attachment: local, local !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  color: #2a2a2a !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
/* =========================================================================
 * Skin: Brushed Metal — header
 *
 * Textures the header bar with the same brushed-metal surface as the
 * admin drawer so skin-level changes read consistently across the
 * shell. Flips title/button text dark-on-light. Existing header.css
 * rules (layout, sticky positioning, logo sizing) are untouched — this
 * block only overrides paint + text.
 * ========================================================================= */
body[data-skin="brushed"] .header {
  background-color: rgb(178, 198, 208);
  background-image: var(--brushed-sheen), var(--brushed-metal-url, none);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 600px auto;
  /* Kill the animated gradient from header.css — we want a stable
     metal surface, not a moving diagonal wash. */
  animation: none;
  /* Drop the blur; header.css sets backdrop-filter expecting a
     semi-transparent gradient behind — the metal is opaque, no need. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.2);
}
/* Title colors — dashboard cyan accent + glow reads as out-of-palette on
   metal. Retone to near-black for the title proper, medium grey for the
   dim parts, and drop the cyan text-shadow entirely. */
body[data-skin="brushed"] .header h1 {
  color: #1a1a2e;
}
body[data-skin="brushed"] .title-bracket { color: #4a4a5a; }
body[data-skin="brushed"] .title-erratic {
  color: #1a1a2e;
  text-shadow: none;
}
body[data-skin="brushed"] .title-dot    { color: #7a3010; }
body[data-skin="brushed"] .title-dc     { color: #4a4a5a; }
body[data-skin="brushed"] .title-cursor { color: #1a1a2e; }
/* Header buttons (Refresh, Range-picker, etc.) — same machined-pill
   treatment as the admin-drawer buttons so the two zones read as one
   surface. Lighter metal plate + asymmetric bevel + inset top sheen. */
body[data-skin="brushed"] .header .btn {
  background-color: rgb(182, 202, 212);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.05) 50%, rgba(0,0,0,0.08)),
    var(--brushed-metal-url-elements, none);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 600px auto;
  color: #1a1a2e;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-bottom-color: rgba(0, 0, 0, 0.6);
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.18),
    0 1px 1px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
body[data-skin="brushed"] .header .btn:hover {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.15) 50%, rgba(0,0,0,0.05)),
    var(--brushed-metal-url-elements, none);
  color: #000;
  border-color: rgba(0, 0, 0, 0.6);
}
body[data-skin="brushed"] .header .btn:active,
body[data-skin="brushed"] .header .btn.is-pressed {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.02) 50%, rgba(255,255,255,0.1)),
    var(--brushed-metal-url-elements, none);
  color: #1a1a2e;
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.25),
    inset 0 -1px 0 rgba(255, 255, 255, 0.25);
}
/* Authentik icon tends to be a dark rune that vanishes on light metal —
   knock it toward white so the identity-pill stays readable. */
body[data-skin="brushed"] .header .btn .authentik-icon {
  filter: brightness(0) invert(0.15);
}
/* When the user is signed in, flip the auth pill to the gold palette
   that the admin drawer uses. Matches --brushed-gold-url + sheen so
   the identity pill reads as "you've got admin privileges — mind the
   button". */
body[data-skin="brushed"] .header .btn.is-authenticated {
  background-color: rgb(201, 163, 85);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,230,140,0.1) 50%, rgba(0,0,0,0.08)),
    var(--brushed-gold-url, none);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 600px auto;
  color: #1a0a00;
  border: 1px solid rgba(60, 40, 10, 0.55);
  border-bottom-color: rgba(60, 40, 10, 0.7);
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 235, 170, 0.7);
}
body[data-skin="brushed"] .header .btn.is-authenticated:hover {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,230,140,0.15) 50%, rgba(0,0,0,0.05)),
    var(--brushed-gold-url, none);
  border-color: rgba(60, 40, 10, 0.75);
}
/* Header weather stats — the cyan-accent + dim-grey defaults vanish on
   light metal. Force near-black so the temp / description / sunrise-set
   read clearly, with a small white halo to lift them off the sheen. */
body[data-skin="brushed"] .header-weather,
body[data-skin="brushed"] .header-weather .hw-temp,
body[data-skin="brushed"] .header-weather .hw-sun {
  color: #0e1420;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
body[data-skin="brushed"] .header-weather .hw-desc {
  color: #5a2410;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
body[data-skin="brushed"] .header-weather .hw-stamp {
  color: #3a3a48;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
body[data-skin="brushed"] .header-weather .hw-emoji {
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
}
/* Top-rail panel — same texture + sticky-scroll treatment as the bottom
   drawer panel. Overlays the dashboard content, so a crisp border-radius
   and a shadow sell the "hanging metal plate" look. */
body[data-skin="brushed"] .drawer-rail--top .drawer-panel {
  background-color: rgb(178, 198, 208);
  background-image: var(--brushed-sheen), var(--brushed-metal-url, none);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 600px auto;
  background-attachment: local;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-top: none;  /* merges with header bottom */
  color: #2a2a2a;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* Tab strip — each tab is a machined-metal pill hanging from the rail.
   The base drawers.css gives them cyan borders + bg-elev; override to
   the brushed palette. */
body[data-skin="brushed"] .drawer-rail--top .drawer-tab {
  background-color: rgb(182, 202, 212);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.05) 50%, rgba(0,0,0,0.1)),
    var(--brushed-metal-url-elements, none);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 600px auto;
  background-position: 0 0, 0 0;
  color: #2a2a2a;
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-top: none;  /* joins the rail above */
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.3);
}
body[data-skin="brushed"] .drawer-rail--top .drawer-tab:hover {
  color: #000;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.12) 50%, rgba(0,0,0,0.05)),
    var(--brushed-metal-url-elements, none);
}
/* Active tab — pressed-in, darker metal. This is the tab whose drawer is
   currently open; base CSS sets visibility: hidden for top-rail active
   tabs (the panel covers the tab), so this only visually matters if a
   hover/focus lands before the drawer mounts. */
body[data-skin="brushed"] .drawer-rail--top .drawer-tab.is-active {
  color: #1a1a2e;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.02) 50%, rgba(255,255,255,0.1)),
    var(--brushed-metal-url-elements, none);
  border-color: rgba(0, 0, 0, 0.55);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.25);
}
/* Vary each tab's texture slice so adjacent tabs don't look identical. */
body[data-skin="brushed"] .drawer-rail--top .drawer-tab:nth-of-type(2n) {
  background-position: 0 0, 97px 301px;
}
body[data-skin="brushed"] .drawer-rail--top .drawer-tab:nth-of-type(3n) {
  background-position: 0 0, 241px 137px;
}
body[data-skin="brushed"] .drawer-rail--top .drawer-tab:nth-of-type(5n) {
  background-position: 0 0, 387px 559px;
}
/* Tab LED status indicator — the colored dot in each tab. Keep the hue
   but tone down the glow since the metal surface reflects light anyway. */
body[data-skin="brushed"] .drawer-rail--top .drawer-tab-led {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* Top-rail drawer body content (System / Services / Cameras panels) —
   pure black text on metal so readouts are legible. Lightweight version
   of the admin-drawer text rules, without the admin-specific DOM hits. */
body[data-skin="brushed"] .drawer-rail--top .drawer-body {
  color: #000;
}
body[data-skin="brushed"] .drawer-rail--top .drawer-body .section-title,
body[data-skin="brushed"] .drawer-rail--top .drawer-body [style*="color:var(--u-accent)"],
body[data-skin="brushed"] .drawer-rail--top .drawer-body [style*="color: var(--u-accent)"] {
  color: #000;
}
/* Dashboard-palette inline greys → black. */
body[data-skin="brushed"] .drawer-rail--top .drawer-body [style*="color:#d8d9da"],
body[data-skin="brushed"] .drawer-rail--top .drawer-body [style*="color:#ccc"],
body[data-skin="brushed"] .drawer-rail--top .drawer-body [style*="color:#bbb"],
body[data-skin="brushed"] .drawer-rail--top .drawer-body [style*="color:#aaa"],
body[data-skin="brushed"] .drawer-rail--top .drawer-body [style*="color:#999"],
body[data-skin="brushed"] .drawer-rail--top .drawer-body [style*="color:#888"],
body[data-skin="brushed"] .drawer-rail--top .drawer-body [style*="color:#777"] {
  color: #000 !important;
}
/* Gauge cards inside a top-rail drawer should adopt the brushed-metal
   card palette instead of the default dark-glass. Narrow selector so
   this only touches cards *inside* a top-rail panel — cards on the
   main dashboard aren't styled yet (that's the next step). */
body[data-skin="brushed"] .drawer-rail--top .drawer-body .gauge,
body[data-skin="brushed"] .drawer-rail--top .drawer-body .gauge-stat,
body[data-skin="brushed"] .drawer-rail--top .drawer-body .gauge-status-indicator,
body[data-skin="brushed"] .drawer-rail--top .drawer-body .gauge-canvas-tile,
body[data-skin="brushed"] .drawer-rail--top .drawer-body .ss-tile,
body[data-skin="brushed"] .drawer-rail--top .drawer-body .env-outdoor,
body[data-skin="brushed"] .drawer-rail--top .drawer-body .health-bar {
  background-color: rgba(0, 0, 0, 0.08);
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0) 50%, rgba(255,255,255,0.08)),
    var(--brushed-metal-url-elements, none);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 600px auto;
  background-position: 0 0, 0 0;
  background-attachment: local, local;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-top-color: rgba(0, 0, 0, 0.3);
  border-bottom-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: none;   /* no glass blur — the texture is opaque */
  -webkit-backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.15);
}
/* System + Services tabs render their rows in a single inset panel —
   one row per status LED, separated by hairlines. The OUTER panel
   gets the SILVER bas-relief treatment (not gold — gold is reserved
   for the admin drawer); INDIVIDUAL rows lose the per-tile card so
   the list reads as one continuous inset pocket. */
body[data-skin="brushed"] .drawer-rail--top .drawer-body .system-grid,
body[data-skin="brushed"] .drawer-rail--top .drawer-body .services-grid {
  background-color: rgba(0, 0, 0, 0.10) !important;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0) 50%, rgba(255,255,255,0.08)),
    var(--brushed-metal-url-elements, none) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 100% 100%, 600px auto !important;
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
  border-top-color: rgba(0, 0, 0, 0.45) !important;
  border-bottom-color: rgba(255, 255, 255, 0.18) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.15) !important;
}
body[data-skin="brushed"] .drawer-rail--top .drawer-body .system-grid .gauge-status-indicator,
body[data-skin="brushed"] .drawer-rail--top .drawer-body .services-grid .gauge-status-indicator {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body[data-skin="brushed"] .drawer-rail--top .drawer-body .system-grid .gauge-status-indicator:last-child,
body[data-skin="brushed"] .drawer-rail--top .drawer-body .services-grid .gauge-status-indicator:last-child {
  border-bottom: none !important;
}
/* ── Brushed-metal — top-rail drawer heads + LEDs + text polish ──────
 * Three fixes layered onto the existing top-rail skin block:
 *   - drawer-head (the "SYSTEM" / "SERVICES" / "CAMERAS" title bar at
 *     the top of each open panel) was still using the cyan St. Claude
 *     tokens; retexture + darken to match the rest of the metal.
 *   - .gauge-led status dots inside a service row need a 1px dark ring
 *     so they read on the light metal — the glow alone disappeared.
 *   - Text throughout the drawer picks up a subtle white drop-shadow
 *     so dark labels don't muddy into the metal grain underneath.
 * ------------------------------------------------------------------- */

body[data-skin="brushed"] .drawer-rail--top .drawer-head {
  background-color: rgb(178, 198, 208);
  background-image: var(--brushed-sheen), var(--brushed-metal-url, none);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 600px auto;
  color: #000;
  font-weight: 700;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 1px 0 rgba(0, 0, 0, 0.15);
}
body[data-skin="brushed"] .drawer-rail--top .drawer-close {
  color: #000;
}
/* Status dots (OK / WARN / CRITICAL) rendered by the status_indicator
   gauge. Add a dark ring so each dot has a crisp edge against the metal,
   and soften the big colored glow — it looked neon against light grey.
   Selector hits both the tab-level `.drawer-tab-led` and the in-panel
   `.gauge-led` since they use the same data-status attribute. */
body[data-skin="brushed"] .drawer-rail--top .gauge-led,
body[data-skin="brushed"] .drawer-rail--top .drawer-tab-led {
  border: 1px solid rgba(0, 0, 0, 0.55);
  box-sizing: content-box;
}
body[data-skin="brushed"] .drawer-rail--top .gauge-led[data-status="ok"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 4px rgba(34, 170, 55, 0.5);
}
body[data-skin="brushed"] .drawer-rail--top .gauge-led[data-status="warn"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 4px rgba(200, 145, 40, 0.55);
}
body[data-skin="brushed"] .drawer-rail--top .gauge-led[data-status="critical"] {
  box-shadow: inset 0 1px 0 rgba(255, 210, 210, 0.5), 0 0 5px rgba(200, 40, 40, 0.6);
}
/* Drop-shadow on text so black glyphs don't smear into the metal grain.
   Dark-grey shadow for depth (glyphs appear embossed into the plate).
   Applied to the panel body + drawer-head + tab labels. */
body[data-skin="brushed"] .drawer-rail--top .drawer-head,
body[data-skin="brushed"] .drawer-rail--top .drawer-body {
  text-shadow: 0 1px 1px rgba(40, 40, 45, 0.55);
}
body[data-skin="brushed"] .drawer-rail--top .drawer-tab {
  color: #000;
  text-shadow: 0 1px 1px rgba(40, 40, 45, 0.55);
}
/* ── Brushed — gauge text color overrides for top-rail ────────────────
 * .gauge-status-title / .gauge-status-value / .gauge-stat-value / unit
 * all set their own color to var(--u-text) / var(--u-text-dim) directly
 * in css/gauges.css, which beats our .drawer-body { color: #000 } rule
 * on specificity. Hit them by name so service names + big numbers in
 * a top-rail drawer also flip to black on metal. */
body[data-skin="brushed"] .drawer-rail--top .gauge-status-title,
body[data-skin="brushed"] .drawer-rail--top .gauge-status-value,
body[data-skin="brushed"] .drawer-rail--top .gauge-stat-value,
body[data-skin="brushed"] .drawer-rail--top .gauge-stat-unit,
body[data-skin="brushed"] .drawer-rail--top .gauge-info,
body[data-skin="brushed"] .drawer-rail--top .gauge-info * {
  color: #000;
  text-shadow: 0 1px 1px rgba(40, 40, 45, 0.55);
}
/* ── Brushed — Cameras drawer content ────────────────────────────────
 * The Cameras top-rail drawer has its own control strip (.cameras-ctrl
 * checkboxes, .cameras-size-btn T/S/M/L size picker). Their CSS uses
 * var(--u-text-dim)/--u-accent which renders as light grey/cyan on the
 * metal surface — unreadable. Flip to the same black + dark-shadow
 * convention used for System/Services, and give the size buttons the
 * machined-pill treatment so they match the rest of the skin. */

body[data-skin="brushed"] .drawer-rail--top .cameras-controls,
body[data-skin="brushed"] .drawer-rail--top .cameras-ctrl {
  color: #000;
  text-shadow: 0 1px 1px rgba(40, 40, 45, 0.55);
}
body[data-skin="brushed"] .drawer-rail--top .cameras-ctrl:hover {
  color: #000;
}
body[data-skin="brushed"] .drawer-rail--top .cameras-ctrl input[type="checkbox"] {
  accent-color: #1a1a2e;
}
/* Size buttons (T / S / M / L) — same metal-pill bevel as header/drawer
   buttons, just smaller. Active button presses in with an inverted
   gradient. */
body[data-skin="brushed"] .drawer-rail--top .cameras-size-btn {
  background-color: rgb(182, 202, 212);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.05) 50%, rgba(0,0,0,0.08)),
    var(--brushed-metal-url-elements, none);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 600px auto;
  color: #000;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-bottom-color: rgba(0, 0, 0, 0.6);
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 1px rgba(40, 40, 45, 0.55);
}
body[data-skin="brushed"] .drawer-rail--top .cameras-size-btn:hover {
  color: #000;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.12) 50%, rgba(0,0,0,0.05)),
    var(--brushed-metal-url-elements, none);
  border-color: rgba(0, 0, 0, 0.6);
}
body[data-skin="brushed"] .drawer-rail--top .cameras-size-btn[aria-pressed="true"] {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.02) 50%, rgba(255,255,255,0.1)),
    var(--brushed-metal-url-elements, none);
  color: #000;
  border-color: rgba(0, 0, 0, 0.65);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}
/* Camera-feed overlays — labels + detect badges + bbox labels. These
   sit over the LIVE CAMERA FRAME, not the brushed-metal panel, so the
   `.drawer-rail--top .drawer-body { color: #000 }` cascade above
   renders them illegibly (black text on the camera's dark overlay
   chip). Force bright colours + a soft drop-shadow so the text reads
   on whatever the feed is currently showing. */
body[data-skin="brushed"] .drawer-rail--top .drawer-body .cameras-label,
body[data-skin="brushed"] .drawer-rail--top .drawer-body .cameras-badge,
body[data-skin="brushed"] .drawer-rail--top .drawer-body .cameras-badge *,
body[data-skin="brushed"] .drawer-rail--top .drawer-body .cameras-bbox-label {
  color: #f2f4f8 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
/* Camera-name chip in the corner of each feed — stays in the accent
   cyan so it's obvious which feed is which, with a stronger shadow
   since it's the smallest text on the overlay. */
body[data-skin="brushed"] .drawer-rail--top .drawer-body .cameras-label {
  color: #7eeaf0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
/* Named-detect badges (Frigate recognised subject) — warm amber so
   they stand out from generic object labels. */
body[data-skin="brushed"] .drawer-rail--top .drawer-body .cameras-badge-named,
body[data-skin="brushed"] .drawer-rail--top .drawer-body .cameras-badge.cameras-badge-named {
  color: #ffd170 !important;
}
/* =========================================================================
 * Skin: Brushed Metal — section cards (generic)
 *
 * Wraps every main-dashboard .section in a brushed-metal card with
 * rounded corners. No content coupling: the selector only uses the
 * generic `.section` class + the `.section-head` / `.section-name` /
 * `.section-icon` markup that sections.js gives every section, so any
 * item in any section picks up the treatment without the skin knowing
 * anything about it.
 *
 * Inner element styling (e.g. Power's .pc-tile / .pc-btn internals)
 * deliberately NOT here — that's per-item content. If an item wants
 * skin-aware styling for its internals it lives in the item's own
 * CSS pane (Settings → Region → Item → CSS), scoped to
 * `body[data-skin="brushed"] ...`. That keeps the skin decoupled from
 * any particular item's DOM.
 * ========================================================================= */
body[data-skin="brushed"] .section {
  background-color: rgb(178, 198, 208);
  background-image: var(--brushed-sheen), var(--brushed-metal-url, none);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 600px auto;
  background-attachment: local;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  padding: 18px 20px 20px 20px;
  margin-bottom: 16px;
  color: #000;
  text-shadow: 0 1px 1px rgba(40, 40, 45, 0.5);
  /* Chamfered bevel — matches the admin-handle thickness (5/4/3 px)
     so every outer dashboard card reads as a machined plate lifting
     off the page. Silver-toned highlights/shadows to match the base
     tile rather than the admin's gold. */
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.25),                    /* lift from the page */
    inset 0 5px 0 rgba(255, 255, 255, 0.55),           /* top chamfer face */
    inset 0 8px 6px -3px rgba(0, 0, 0, 0.28),          /* dark line below chamfer */
    inset 4px 0 0 rgba(255, 255, 255, 0.30),           /* left edge highlight */
    inset -4px 0 0 rgba(0, 0, 0, 0.28),                /* right edge shadow */
    inset 0 -3px 0 rgba(0, 0, 0, 0.22);                /* bottom footing */
}
body[data-skin="brushed"] .section .section-head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
body[data-skin="brushed"] .section .section-name,
body[data-skin="brushed"] .section .section-icon {
  color: #000;
}
/* =========================================================================
 * Skin: Brushed Metal — inner cards (gauges + graphs)
 *
 * Same generic framework selectors as the St. Claude skin above
 * (.gauge, .gauge-stat, .ss-tile, .graph-host, etc.). No item-specific
 * class names — the skin only targets surfaces the framework mounts on
 * every item, so any gauge / graph / tile picks up the metal treatment
 * without the skin having to know what's inside.
 *
 * Visual model: inner cards read as pressed-in machined plates against
 * the raised section card that holds them (see `.section` block above).
 * Asymmetric bevel (dark top / light bottom) inverts the section's
 * raised cue so inner tiles look stamped into the plate.
 * ========================================================================= */
body[data-skin="brushed"] {
  /* Mirror the --card-* knobs St. Claude defines so items referencing
     them pick up brushed values automatically. --card-blur drops to 0
     because the metal is opaque — backdrop-blur is wasted work. */
  --gauge-card-bg:         rgba(0, 0, 0, 0.08);
  --graph-card-bg:         rgba(0, 0, 0, 0.08);
  --card-content-opacity:  1.0;
  --card-blur:             0px;
}
body[data-skin="brushed"] .gauge,
body[data-skin="brushed"] .gauge-stat,
body[data-skin="brushed"] .gauge-status-indicator,
body[data-skin="brushed"] .gauge-canvas-tile,
body[data-skin="brushed"] .gauge-pip,
body[data-skin="brushed"] .gauge-camera,
body[data-skin="brushed"] .gauge-stub,
body[data-skin="brushed"] .ss-tile,
body[data-skin="brushed"] .env-outdoor,
body[data-skin="brushed"] .health-bar {
  background-color: var(--gauge-card-bg) !important;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0) 50%, rgba(255,255,255,0.08)),
    var(--brushed-metal-url-elements, none) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 100% 100%, 600px auto !important;
  background-position: 0 0, 0 0 !important;
  background-attachment: local, local !important;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-top-color: rgba(0, 0, 0, 0.45);
  border-bottom-color: rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  color: #000;
  text-shadow: 0 1px 1px rgba(40, 40, 45, 0.5);
  /* Opaque metal — backdrop blur is dead weight, override whatever the
     item's CSS or the St. Claude var set. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.15);
}
/* Per-tile texture slice so adjacent tiles aren't identical cuts. */
body[data-skin="brushed"] .gauge:nth-of-type(2n),
body[data-skin="brushed"] .gauge-stat:nth-of-type(2n),
body[data-skin="brushed"] .gauge-canvas-tile:nth-of-type(2n),
body[data-skin="brushed"] .ss-tile:nth-of-type(2n) {
  background-position: 0 0, 73px 211px !important;
}
body[data-skin="brushed"] .gauge:nth-of-type(3n),
body[data-skin="brushed"] .gauge-stat:nth-of-type(3n),
body[data-skin="brushed"] .gauge-canvas-tile:nth-of-type(3n),
body[data-skin="brushed"] .ss-tile:nth-of-type(3n) {
  background-position: 0 0, 189px 47px !important;
}
body[data-skin="brushed"] .gauge:nth-of-type(5n),
body[data-skin="brushed"] .gauge-stat:nth-of-type(5n),
body[data-skin="brushed"] .gauge-canvas-tile:nth-of-type(5n),
body[data-skin="brushed"] .ss-tile:nth-of-type(5n) {
  background-position: 0 0, 311px 519px !important;
}
body[data-skin="brushed"] .gauge:nth-of-type(7n),
body[data-skin="brushed"] .gauge-stat:nth-of-type(7n),
body[data-skin="brushed"] .gauge-canvas-tile:nth-of-type(7n),
body[data-skin="brushed"] .ss-tile:nth-of-type(7n) {
  background-position: 0 0, 417px 283px !important;
}
/* Graph frames — same pressed-in metal treatment, wider radius so they
   don't read as identical to square gauge tiles. */
body[data-skin="brushed"] .graph-host,
body[data-skin="brushed"] .graph-power-host,
body[data-skin="brushed"] .graph-status,
body[data-skin="brushed"] .graph-power-status {
  background-color: var(--graph-card-bg) !important;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0) 50%, rgba(255,255,255,0.08)),
    var(--brushed-metal-url-elements, none) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 100% 100%, 600px auto !important;
  background-attachment: local, local !important;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-top-color: rgba(0, 0, 0, 0.45);
  border-bottom-color: rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #000;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.15);
}
/* Gauge text (titles, big numbers, units, info blocks) — same black +
   drop-shadow treatment used across brushed. Applies globally, not
   just top-rail, so main-dashboard gauges get readable text too. */
body[data-skin="brushed"] .gauge-status-title,
body[data-skin="brushed"] .gauge-status-value,
body[data-skin="brushed"] .gauge-stat-value,
body[data-skin="brushed"] .gauge-stat-unit,
body[data-skin="brushed"] .gauge-title,
body[data-skin="brushed"] .gauge-value,
body[data-skin="brushed"] .gauge-status,
body[data-skin="brushed"] .gauge-info,
body[data-skin="brushed"] .gauge-info * {
  color: #000 !important;
  text-shadow: 0 1px 1px rgba(40, 40, 45, 0.55);
}
/* =========================================================================
 * Skin: Brushed Metal — Power item (content-coupled exception)
 *
 * The Power item uses its own class names (.pc-tile / .pc-center /
 * .pc-bar-* / .pc-btn) rather than the framework-generic .gauge /
 * .gauge-canvas-tile classes the inner-cards block above targets. That
 * means the skin's decoupled selectors miss it, and the item's
 * DEFAULT_POWERCONS_CSS sets .pc-tile's background to var(--u-bg-elev).
 *
 * Ideal architectural home for these rules is the item's own CSS
 * pane, scoped to body[data-skin="brushed"]. But since any saved state
 * with a customized Power region shadows DEFAULT_POWERCONS_CSS, rules
 * added there never reach existing users. Drawers.css is always loaded,
 * so we accept the content coupling here — the same tradeoff we took
 * for the admin drawer content overrides above. When items all opt
 * into the generic .gauge contract, this block collapses back into
 * the generic one. */

body[data-skin="brushed"] .pc-center {
  background-color: rgba(0, 0, 0, 0.08) !important;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0) 50%, rgba(255,255,255,0.08)),
    var(--brushed-metal-url-elements, none) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 100% 100%, 600px auto !important;
  background-position: 0 0, 0 0 !important;
  background-attachment: local, local !important;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-top-color: rgba(0, 0, 0, 0.45);
  border-bottom-color: rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  color: #000;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.15);
}
/* Inline gauges sit bare on the .pc-center panel now — no per-item
   card backgrounds. Just lift the canvas off the metal surface with a
   subtle drop-shadow so the arcs + icons feel present. */
body[data-skin="brushed"] .pc-ig-item canvas {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}
/* Text inside the Power item — head title, scale, labels, bar labels,
   bar values. All flip to black + drop-shadow. */
body[data-skin="brushed"] .pc-head-title,
body[data-skin="brushed"] .pc-head-scale,
body[data-skin="brushed"] .pc-label,
body[data-skin="brushed"] .pc-bar-label,
body[data-skin="brushed"] .pc-bar-val {
  color: #000;
  text-shadow: 0 1px 1px rgba(40, 40, 45, 0.55);
}
body[data-skin="brushed"] .pc-bar-row--panel .pc-bar-label {
  color: #000;
}
/* Bar track — inverted dark inset so bars read as filled channels on
   the light metal surface. */
body[data-skin="brushed"] .pc-bar-track {
  background: rgba(0, 0, 0, 0.2) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28) !important;
}
/* Mode + schedule buttons — machined pill treatment. */
body[data-skin="brushed"] .pc-btn {
  background-color: rgb(182, 202, 212) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.05) 50%, rgba(0,0,0,0.08)),
    var(--brushed-metal-url-elements, none) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 100% 100%, 600px auto !important;
  color: #000 !important;
  border: 1px solid rgba(0, 0, 0, 0.5) !important;
  border-bottom-color: rgba(0, 0, 0, 0.6) !important;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  text-shadow: 0 1px 1px rgba(40, 40, 45, 0.5);
}
body[data-skin="brushed"] .pc-btn:hover {
  border-color: rgba(0, 0, 0, 0.6) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.12) 50%, rgba(0,0,0,0.05)),
    var(--brushed-metal-url-elements, none) !important;
}
body[data-skin="brushed"] .pc-btn:active {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.02) 50%, rgba(255,255,255,0.1)),
    var(--brushed-metal-url-elements, none) !important;
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.25) !important;
}
/* UPS "Edit Schedule" inline dialog — recessed bas-relief treatment,
   identical pattern to .pc-tile / .pc-center above: dark-tint overlay
   on the metal texture, a top-to-bottom light gradient, asymmetric
   borders (dark top, light bottom), inset top shadow + inset bottom
   highlight. Reads as a carved-in pocket rather than a floating dialog. */
body[data-skin="brushed"] .pc-sched-editor {
  background-color: rgba(0, 0, 0, 0.08);
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0) 50%, rgba(255,255,255,0.08)),
    var(--brushed-metal-url-elements, none);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 600px auto;
  background-attachment: local, local;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-top-color: rgba(0, 0, 0, 0.45);
  border-bottom-color: rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  color: #0e1420;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.15);
}
body[data-skin="brushed"] .pc-sched-row label {
  color: #0e1420;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
body[data-skin="brushed"] .pc-sched-row input {
  background: rgba(0, 0, 0, 0.12);
  color: #050a14;
  border: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
body[data-skin="brushed"] .pc-sched-row input:focus {
  outline: none;
  border-color: rgba(0, 0, 0, 0.7);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.35),
    0 0 0 2px rgba(255, 255, 255, 0.35);
}
body[data-skin="brushed"] .pc-sched-status {
  color: #2a3448;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
body[data-skin="brushed"] .pc-sched-status.is-error { color: #6a1a1a; }
body[data-skin="brushed"] .pc-sched-status.is-ok    { color: #1a4020; }
/* Every canvas-drawn gauge now routes through drawGlowArcOn, which
   delegates to window.SkinRegistry.brushed.drawArc — the mercury/
   liquid-metal painter in js/skins/brushed.js. That's a real native
   gradient, not a post-hoc raster effect, so the earlier
   grayscale + high-contrast filter was actively mangling it (the
   Battery already had a per-gauge exemption). Keep just a subtle
   lift shadow. */
body[data-skin="brushed"] .gauge-canvas-tile canvas,
body[data-skin="brushed"] .ss-tile canvas {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}
/* background set inline by drawBars() JS — tinted per circuit color */
body[data-skin="brushed"] .pc-bar-fill {
  position: relative;
  border-radius: 0 999px 999px 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 1px 1px rgba(0, 0, 0, 0.4);
}
/* Track holding the fill — recessed dark channel so the bead reads as
   liquid filling a groove rather than floating on the section card. */
body[data-skin="brushed"] .pc-bar-track {
  background: rgba(0, 0, 0, 0.3) !important;
  border-radius: 999px;
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18) !important;
}



/* ── Brushed — override framework color tokens ──────────────────────
 * The base product defines --u-text as light grey for dark backgrounds.
 * On brushed metal the surface is light, so text tokens flip to dark. */
body[data-skin="brushed"] {
  --u-text:     #1a1a2e;
  --u-text-dim: #4a4a5a;
  --u-accent:   #0e3a4a;
}

/* ── Brushed — skin-text color convention ────────────────────────────
 * Any text span with class="skin-text" gets dark readable colors on
 * brushed metal. data-hue="cool" (blues/teals/greens) and
 * data-hue="warm" (reds/oranges/ambers) let skins differentiate.
 * Base product sets the bright color inline; skin overrides here. */
body[data-skin="brushed"] .skin-text[data-hue="cool"] {
  color: #0a3048 !important;
  text-shadow: 0 1px 1px rgba(40, 40, 45, 0.4);
}
body[data-skin="brushed"] .skin-text[data-hue="warm"] {
  color: #3e1e06 !important;
  text-shadow: 0 1px 1px rgba(40, 40, 45, 0.4);
}

/* General gauge text on brushed — titles, values, status labels */
body[data-skin="brushed"] .gauge-bw .gauge-title,
body[data-skin="brushed"] .gauge-bw .gauge-value,
body[data-skin="brushed"] .gauge-bw .gauge-status,
body[data-skin="brushed"] .ss-value,
body[data-skin="brushed"] .ss-status,
body[data-skin="brushed"] .ss-label {
  color: #000 !important;
  text-shadow: 0 1px 1px rgba(40, 40, 45, 0.55);
}

/* =========================================================================
 * Skin: Brushed Metal — range picker (calendar + presets)
 *
 * picker.js injects its own CSS at runtime (#range-picker-style block)
 * which hardcodes the dashboard cyan accent + dark panel. These rules
 * override it: silver brushed panel with a 4-side chamfered bevel, gold
 * for active preset / hover / selected day, dark text so the metal reads.
 * Buttons re-use the gold machined-pill recipe from the admin drawer so
 * Apply/Reset/Done look like the rest of the skin. Selector specificity
 * (body[data-skin] + #id) wins over picker.js's plain-id rules.
 * ========================================================================= */
body[data-skin="brushed"] #fullPickerOverlay {
  background: rgba(0, 0, 0, 0.55);
}
body[data-skin="brushed"] #fullPickerPanel {
  background-color: rgb(178, 198, 208);
  background-image: var(--brushed-sheen), var(--brushed-metal-url, none);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 600px auto;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 14px;
  color: #1a1a2e;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.55),
    inset 0 7px 0 rgba(255, 255, 255, 0.55),
    inset 0 11px 8px -4px rgba(0, 0, 0, 0.25),
    inset 7px 0 0 rgba(255, 255, 255, 0.35),
    inset -7px 0 0 rgba(0, 0, 0, 0.3),
    inset 0 -7px 0 rgba(0, 0, 0, 0.35);
}
body[data-skin="brushed"] #fullPickerPanel #fpPresets {
  border-right: 1px solid rgba(0, 0, 0, 0.18);
}
body[data-skin="brushed"] #fullPickerPanel .fp-preset {
  color: #2a2a35;
}
body[data-skin="brushed"] #fullPickerPanel .fp-preset:hover {
  background: rgba(201, 163, 85, 0.18);
  color: #000;
}
body[data-skin="brushed"] #fullPickerPanel .fp-preset.active {
  background: rgba(201, 163, 85, 0.35);
  color: #2a1c05;
  font-weight: 600;
}
body[data-skin="brushed"] #fullPickerPanel .fp-cal-title {
  color: #1a1a2e;
}
body[data-skin="brushed"] #fullPickerPanel .fp-cal-nav {
  color: #2a1c05;
  background: rgba(201, 163, 85, 0.15);
}
body[data-skin="brushed"] #fullPickerPanel .fp-cal-nav:hover {
  background: rgba(201, 163, 85, 0.35);
}
body[data-skin="brushed"] #fullPickerPanel .fp-cal-dow {
  color: #4a4a5a;
}
body[data-skin="brushed"] #fullPickerPanel .fp-cal-day {
  color: #1a1a2e;
}
body[data-skin="brushed"] #fullPickerPanel .fp-cal-day:hover {
  background: rgba(201, 163, 85, 0.3);
  color: #000;
}
body[data-skin="brushed"] #fullPickerPanel .fp-cal-day.today {
  color: #7a3010;
  font-weight: bold;
}
body[data-skin="brushed"] #fullPickerPanel .fp-cal-day.selected {
  background-color: rgb(211, 173, 95);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 230, 140, 0.1) 50%, rgba(0, 0, 0, 0.08)),
    var(--brushed-gold-url, none);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 600px auto;
  color: #1a1a0e;
  box-shadow: inset 0 1px 0 rgba(255, 232, 165, 0.6);
}
body[data-skin="brushed"] #fullPickerPanel .fp-cal-day.in-range {
  background: rgba(201, 163, 85, 0.2);
  color: #1a1a2e;
}
body[data-skin="brushed"] #fullPickerPanel .fp-cal-day.other-month {
  color: rgba(26, 26, 46, 0.35);
}
body[data-skin="brushed"] #fullPickerPanel .fp-cal-day.disabled {
  color: rgba(26, 26, 46, 0.25);
}
body[data-skin="brushed"] #fullPickerPanel #fpCustom {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  color: #2a2a35;
}
body[data-skin="brushed"] #fullPickerPanel #fpCustom input[type="number"],
body[data-skin="brushed"] #fullPickerPanel #fpCustom select,
body[data-skin="brushed"] #fullPickerPanel #fpDisplays input {
  background: rgba(255, 255, 255, 0.18);
  color: #1a1a2e;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
body[data-skin="brushed"] #fullPickerPanel .fp-btn,
body[data-skin="brushed"] #fullPickerPanel #fpCustom button {
  background-color: rgb(211, 173, 95);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 230, 140, 0.1) 50%, rgba(0, 0, 0, 0.08)),
    var(--brushed-gold-url, none);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 600px auto;
  color: #1a1a2e;
  border: 1px solid rgba(60, 40, 10, 0.55);
  border-bottom-color: rgba(60, 40, 10, 0.7);
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 232, 165, 0.55);
  letter-spacing: 1px;
}
body[data-skin="brushed"] #fullPickerPanel .fp-btn:hover,
body[data-skin="brushed"] #fullPickerPanel #fpCustom button:hover {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 230, 140, 0.15) 50%, rgba(0, 0, 0, 0.05)),
    var(--brushed-gold-url, none);
  color: #000;
  border-color: rgba(60, 40, 10, 0.75);
}
body[data-skin="brushed"] #fullPickerPanel .fp-btn:active {
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.25),
    inset 0 -1px 0 rgba(255, 255, 255, 0.25);
}
body[data-skin="brushed"] #fullPickerPanel .fp-btn-reset {
  color: #5a1a05;
  border-color: rgba(100, 30, 10, 0.55);
}
body[data-skin="brushed"] #fullPickerPanel #fpFooter {
  border-top: 1px solid rgba(0, 0, 0, 0.18);
}
body[data-skin="brushed"] #fullPickerPanel #fpSummary {
  color: #2a2a35;
}