/**
 * depth-kit — the sites feel like hardware.
 *
 * One shared sheet, five own-brand lanes. Everything is namespaced .hw-* and
 * gated on html[data-hw], so a page without the loader is byte-identical to
 * before. The kit only ADDS paint: box-shadow, background-image, text-shadow,
 * transform, filter. It never sets layout properties (display, position sizing,
 * margins) on site elements, so it cannot reflow a page it has never seen.
 *
 * Hard rules carried over from the support-agent widget (learned the hard way):
 *   - No backdrop-filter. Legibility never depends on a compositing feature.
 *   - No opacity-transition visibility gates. Worst case is "no effect",
 *     never "unreadable".
 *   - Accent arrives as a custom property (--hw-accent) AND every use of it
 *     has a flat fallback, so a lane that fails to set it still renders.
 *
 * Layers (bottom to top):
 *   .hw-chassis   fixed, z-index:-1 — machined-enclosure light: key light from
 *                 above, accent underglow from below, edge vignette, brushed
 *                 vertical micro-texture. Sits ABOVE the body background color
 *                 and BELOW all content (negative z-index paints over the
 *                 canvas, under the flow).
 *   content       the site itself, with .hw-panel / .hw-key / .hw-etch /
 *                 .hw-seam / .hw-led applied by depth.js from the lane map.
 *   .hw-rails     fixed edge extrusions with fastener detail, desktop only.
 *   .hw-grain     fixed film grain, mix-blend overlay, above everything of
 *                 ours but BELOW the support widget's z-band.
 */

html[data-hw] {
  --hw-accent: #c9a961;
  --hw-light: rgba(255, 255, 255, 0.09);
  --hw-glow: color-mix(in srgb, var(--hw-accent) 22%, transparent);
  --hw-rim: color-mix(in srgb, #ffffff 13%, transparent);
  --hw-shade: rgba(0, 0, 0, 0.55);
}

/* ------------------------------------------------------------------ chassis */

.hw-chassis {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    /* key light — one workshop lamp above the unit */
    radial-gradient(1200px 620px at 50% -12%, var(--hw-light), transparent 62%),
    /* accent underglow — powered hardware leaks light at the base */
    radial-gradient(1000px 460px at 50% 112%, var(--hw-glow), transparent 66%),
    /* edge vignette — the enclosure curves away */
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 11%, transparent 89%, rgba(0, 0, 0, 0.42)),
    /* brushed metal — vertical micro-striation */
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.008) 0 1px, transparent 1px 7px);
}

/* --------------------------------------------------------------------- rails
   Machined edge extrusions. Fastener heads are painted with repeating radial
   gradients — no extra DOM, no images. Desktop only; a phone bezel is bezel
   enough. */

.hw-rail {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 12px;
  z-index: 3;
  pointer-events: none;
  background-image:
    repeating-radial-gradient(circle at 50% 120px, rgba(255, 255, 255, 0.16) 0 1.2px, rgba(0, 0, 0, 0.7) 2px 3.4px, transparent 4px 280px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012) 40%, rgba(0, 0, 0, 0.5));
  background-repeat: repeat-y, no-repeat;
  background-size: 12px 280px, 100% 100%;
}

.hw-rail--r {
  right: 0;
  transform: scaleX(-1);
}

.hw-rail--l {
  left: 0;
}

@media (max-width: 1279px) {
  .hw-rail {
    display: none;
  }
}

/* --------------------------------------------------------------------- grain
   Film grain above the page pulls every flat fill together into one lit
   surface. Kept far below the support widget's z-band (2147483000+). */

.hw-grain {
  position: fixed;
  inset: 0;
  z-index: 2147479000;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* -------------------------------------------------------------------- panels
   An anodized plate: top rim catches the key light, bottom edge falls into
   shade, the whole plate lifts off the chassis on a real drop shadow, and a
   faint top sheen says "machined face", not "css card". */

html[data-hw] .hw-panel {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 16%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.011) 0 1px, transparent 1px 3px);
  box-shadow:
    inset 0 1px 0 var(--hw-rim),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    inset 1px 0 0 rgba(255, 255, 255, 0.04),
    inset -1px 0 0 rgba(0, 0, 0, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.45),
    0 22px 44px -20px rgba(0, 0, 0, 0.75);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

html[data-hw] .hw-panel:hover {
  box-shadow:
    inset 0 1px 0 var(--hw-rim),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    inset 1px 0 0 rgba(255, 255, 255, 0.04),
    inset -1px 0 0 rgba(0, 0, 0, 0.3),
    0 0 0 1px color-mix(in srgb, var(--hw-accent) 34%, transparent),
    0 2px 6px rgba(0, 0, 0, 0.45),
    0 14px 34px -12px var(--hw-glow),
    0 30px 60px -24px rgba(0, 0, 0, 0.85);
  transform: translateY(-1px);
}

/* Major plates (hero, flagship tiles) get fastener heads in the corners —
   painted, not DOM. The socket is a dark ring around a lit center. */

html[data-hw] .hw-panel--bolted {
  background-image:
    radial-gradient(circle 3.5px at 14px 14px, rgba(255, 255, 255, 0.2) 0 1.2px, rgba(0, 0, 0, 0.75) 1.8px 3px, transparent 3.5px),
    radial-gradient(circle 3.5px at calc(100% - 14px) 14px, rgba(255, 255, 255, 0.2) 0 1.2px, rgba(0, 0, 0, 0.75) 1.8px 3px, transparent 3.5px),
    radial-gradient(circle 3.5px at 14px calc(100% - 14px), rgba(255, 255, 255, 0.2) 0 1.2px, rgba(0, 0, 0, 0.75) 1.8px 3px, transparent 3.5px),
    radial-gradient(circle 3.5px at calc(100% - 14px) calc(100% - 14px), rgba(255, 255, 255, 0.2) 0 1.2px, rgba(0, 0, 0, 0.75) 1.8px 3px, transparent 3.5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 16%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.011) 0 1px, transparent 1px 3px);
}

/* ---------------------------------------------------------------------- keys
   Buttons are milled keycaps. Rest state is raised (light rim above, shade
   below, a real 2px drop to the deck). Press drives the cap INTO the deck:
   travel down, drop collapses, face darkens. Pure CSS physics. */

html[data-hw] .hw-key {
  transition: transform 0.07s ease, box-shadow 0.07s ease, filter 0.18s ease;
  will-change: transform;
}

html[data-hw] .hw-key:hover {
  filter: brightness(1.09);
}

html[data-hw] .hw-key:active {
  transform: translateY(1.5px);
  filter: brightness(0.94);
}

/* Lanes whose buttons are flat ink get the full keycap face as well.
   The raised face is built ENTIRELY from box-shadow — a background-image here
   would replace a button painted with its own gradient (vigil's gold CTA is
   background-image, and v1 of this rule erased it). The gradient face exists
   only as .hw-key--face, which depth.js grants exclusively to buttons whose
   computed background-image is none. */

html[data-hw][data-hw-keystrong] .hw-key {
  box-shadow:
    inset 0 1px 0 var(--hw-rim),
    inset 0 10px 14px -10px rgba(255, 255, 255, 0.13),
    inset 0 -10px 14px -10px rgba(0, 0, 0, 0.3),
    inset 0 -2px 3px rgba(0, 0, 0, 0.28),
    0 2px 0 rgba(0, 0, 0, 0.55),
    0 10px 20px -10px rgba(0, 0, 0, 0.8);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45);
}

html[data-hw][data-hw-keystrong] .hw-key--face {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.015) 55%, rgba(0, 0, 0, 0.12));
}

html[data-hw][data-hw-keystrong] .hw-key:hover {
  box-shadow:
    inset 0 1px 0 var(--hw-rim),
    inset 0 10px 14px -10px rgba(255, 255, 255, 0.13),
    inset 0 -10px 14px -10px rgba(0, 0, 0, 0.3),
    inset 0 -2px 3px rgba(0, 0, 0, 0.28),
    0 0 0 1px color-mix(in srgb, var(--hw-accent) 40%, transparent),
    0 2px 0 rgba(0, 0, 0, 0.55),
    0 12px 26px -10px var(--hw-glow);
}

html[data-hw][data-hw-keystrong] .hw-key:active {
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, 0.25),
    inset 0 2px 6px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 4px 10px -6px rgba(0, 0, 0, 0.8);
}

/* ---------------------------------------------------------------------- type
   Display type reads as engraved into the faceplate: shade above the stroke,
   a hairline of catch-light below. Shadow only — never color, never size. */

html[data-hw] .hw-etch {
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.85),
    0 1px 0 rgba(255, 255, 255, 0.055);
}

/* --------------------------------------------------------------------- seams
   Dividers become machined grooves: the cut line, then the lit edge below it. */

html[data-hw] .hw-seam {
  border: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.65);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.055);
}

/* ----------------------------------------------------------------------- led
   depth.js inserts <i class="hw-led"> as the first child of mapped status
   elements — our own element, so no pseudo-element collisions with site CSS.
   Breathes very slowly; a status light, not an alert. */

.hw-led {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: 6%;
  background: var(--hw-accent, #c9a961);
  box-shadow:
    0 0 5px var(--hw-accent, #c9a961),
    0 0 14px var(--hw-glow, rgba(201, 169, 97, 0.25)),
    inset 0 -1px 1px rgba(0, 0, 0, 0.35);
  animation: hw-led-breathe 3.4s ease-in-out infinite;
}

@keyframes hw-led-breathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.45); }
}

/* ------------------------------------------------------------------- screens
   Media wells: a display module set INTO the plate behind a hairline bezel. */

html[data-hw] .hw-screen {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 2px 10px rgba(0, 0, 0, 0.7),
    0 1px 0 var(--hw-rim);
}

/* ------------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  .hw-led {
    animation: none;
  }
  html[data-hw] .hw-panel,
  html[data-hw] .hw-key {
    transition: none;
  }
}