/* ============================================================
   REVERE — FINISH SYSTEM (Phase 17.2.0)
   ------------------------------------------------------------
   The brushed-metal "special" surfaces — .rail, .btn.cy, .metal-strip,
   .rv-tabbar, .tool-tile.active, .card.brushed, .rail.wide .rail-me-av —
   all read four tokens from portal.css:
       --metal-brushed  --metal-brushed-r  --bevel-chrome  --metal-edge
   Overriding those under html[data-finish="…"] re-skins every surface at
   once. `brushed` is the production default (no rule here → portal.css wins,
   nothing changes for users until a finish is chosen). Each finish has a
   light block and a dark (html[data-theme="dark"][data-finish="…"]) block.
   Loaded AFTER portal.css so these overrides win.
   ============================================================ */

/* ---------- MATTE — flat graphite, hairline edge, faint top highlight ---------- */
html[data-finish="matte"] {
  --metal-brushed: #E6E7E2;
  --metal-brushed-r: #E6E7E2;
  --metal-edge: #CBCDC6;
  --bevel-chrome: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
html[data-theme="dark"][data-finish="matte"] {
  --metal-brushed: #23262B;
  --metal-brushed-r: #23262B;
  --metal-edge: #34383E;
  --bevel-chrome: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ---------- SATIN — faint single-direction gradient, no striations ---------- */
html[data-finish="satin"] {
  --metal-brushed: linear-gradient(180deg, #F7F7F3 0%, #E4E3DC 100%);
  --metal-brushed-r: linear-gradient(90deg, #F7F7F3 0%, #E4E3DC 100%);
  --metal-edge: #C9CBC3;
  --bevel-chrome: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(20, 18, 12, 0.06);
}
html[data-theme="dark"][data-finish="satin"] {
  --metal-brushed: linear-gradient(180deg, #2B2F34 0%, #1B1E22 100%);
  --metal-brushed-r: linear-gradient(90deg, #2B2F34 0%, #1B1E22 100%);
  --metal-edge: #33373D;
  --bevel-chrome: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.40);
}

/* ---------- FROST — translucent + backdrop blur ---------- */
html[data-finish="frost"] {
  --metal-brushed: rgba(255, 255, 255, 0.55);
  --metal-brushed-r: rgba(255, 255, 255, 0.50);
  --metal-edge: rgba(0, 0, 0, 0.10);
  --bevel-chrome: 0 6px 20px rgba(15, 20, 25, 0.10);
}
html[data-theme="dark"][data-finish="frost"] {
  --metal-brushed: rgba(28, 31, 35, 0.55);
  --metal-brushed-r: rgba(28, 31, 35, 0.50);
  --metal-edge: rgba(255, 255, 255, 0.12);
  --bevel-chrome: 0 6px 20px rgba(0, 0, 0, 0.45);
}
html[data-finish="frost"] .rail,
html[data-finish="frost"] .btn.cy,
html[data-finish="frost"] .metal-strip,
html[data-finish="frost"] .rv-tabbar,
html[data-finish="frost"] .tool-tile.active,
html[data-finish="frost"] .card.brushed,
html[data-finish="frost"] .rail.wide .rail-me-av {
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
}

/* ---------- NEU — solid fill, soft dual shadows, no border, rounded ---------- */
html[data-finish="neu"] {
  --metal-brushed: #ECEBE6;
  --metal-brushed-r: #ECEBE6;
  --metal-edge: transparent;
  --bevel-chrome: -5px -5px 12px rgba(255, 255, 255, 0.90), 6px 6px 14px rgba(20, 18, 12, 0.12);
}
html[data-theme="dark"][data-finish="neu"] {
  --metal-brushed: #1B1E22;
  --metal-brushed-r: #1B1E22;
  --metal-edge: transparent;
  --bevel-chrome: -5px -5px 12px rgba(255, 255, 255, 0.04), 6px 6px 16px rgba(0, 0, 0, 0.55);
}
html[data-finish="neu"] .btn.cy,
html[data-finish="neu"] .tool-tile.active,
html[data-finish="neu"] .card.brushed,
html[data-finish="neu"] .rail.wide .rail-me-av {
  border-radius: 10px;
}

/* ---------- Drop brushed-only embellishments for every non-brushed finish ----------
   The .btn.cy specular hover sweep and the .metal-strip grain overlay read as
   "metal" and look wrong on flat/satin/frost/neu surfaces. */
html[data-finish="matte"] .btn.cy::after,
html[data-finish="satin"] .btn.cy::after,
html[data-finish="frost"] .btn.cy::after,
html[data-finish="neu"] .btn.cy::after,
html[data-finish="matte"] .metal-strip::before,
html[data-finish="satin"] .metal-strip::before,
html[data-finish="frost"] .metal-strip::before,
html[data-finish="neu"] .metal-strip::before {
  display: none;
}

/* ---------- Per-finish rail hover sweep (Phase 17.8.2) ----------
   The rail's L→R hover fill (.rail .rail-item::before) reads --rail-hover-fill.
   The brushed default (dark gradient + striations) lives in portal.css :root;
   each finish re-skins it to echo its own surface. All values stay dark so the
   white-on-hover label/icon remain readable in both themes — only texture varies. */
html[data-finish="matte"] {
  --rail-hover-fill: rgba(20, 21, 24, 0.97);                       /* flat solid — no gradient/grain */
}
html[data-finish="satin"] {
  --rail-hover-fill: linear-gradient(105deg, rgba(42, 46, 52, 0.97) 0%, rgba(18, 20, 23, 0.97) 100%);
}
html[data-finish="frost"] {
  --rail-hover-fill: rgba(16, 18, 22, 0.62);                       /* translucent — frosted rail shows through */
}
html[data-finish="frost"] .rail .rail-item::before {
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
}
html[data-finish="neu"] {
  --rail-hover-fill: rgba(22, 24, 28, 0.97);                       /* solid */
}
html[data-finish="neu"] .rail .rail-item::before {
  box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.40), inset -2px -2px 6px rgba(255, 255, 255, 0.05);
}