/* 2026-10-19 "Glass Depth" job icons (markup from tools/job-icons.js), refinement pass (Chris):
   more depth (lit upper-left edges, clearer front/back contrast), one glow size and strength for all 12 icons,
   hover = soft lit card ring + 3 px icon lift (no looping animation), vector only, reduced motion respected.
   Every glow uses the job's deep hue (--h1) at the same strength, so bright hues (yellow, orange) do not glow louder.
   Card dimensions never change: the hover ring is a box-shadow, not a border. */
.gd { --gd: 60px; --halo: 0 10px 22px -12px color-mix(in srgb, var(--h1) 55%, transparent);
  position: relative; flex: none; width: var(--gd); height: var(--gd); border-radius: 18px; isolation: isolate; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--h2) 12%, #ffffff), color-mix(in srgb, var(--h1) 20%, #f1f5ff));
  box-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, 1), inset -1px -1px 0 color-mix(in srgb, var(--h1) 18%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--h1) 14%, rgba(255, 255, 255, .5)), var(--halo);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; }
/* one halo for every icon: same position, radius and strength */
.gd-glow { position: absolute; inset: -30%; z-index: 0; opacity: .6;
  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--h1) 42%, transparent) 0, transparent 50%);
  transition: opacity .35s ease; }
/* the solid shape behind the glass: saturated, with its own shadow so it reads as a separate layer */
.gd-back { position: absolute; z-index: 1; width: 70%; height: 70%; left: 5%; top: 4%; transform: rotate(-9deg);
  filter: drop-shadow(0 3px 4px color-mix(in srgb, var(--h1) 40%, transparent)) saturate(1.15);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
/* frosted pane: brighter upper-left rim, darker lower-right edge, curved highlight */
.gd-lens { position: absolute; z-index: 2; left: 31%; top: 30%; right: 7%; bottom: 7%; border-radius: 12px; overflow: hidden;
  background: linear-gradient(150deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .32) 55%, rgba(255, 255, 255, .52));
  -webkit-backdrop-filter: blur(5px) saturate(1.7); backdrop-filter: blur(5px) saturate(1.7);
  box-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, 1), inset -1px -1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .6),
    0 0 0 .5px color-mix(in srgb, var(--h1) 30%, transparent), 0 8px 12px -8px color-mix(in srgb, var(--h1) 55%, transparent);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.gd-lens::before { content: ""; position: absolute; left: -22%; top: -58%; width: 92%; height: 92%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .85), transparent); opacity: .6; }
/* the drawing on the glass */
.gd-front { position: absolute; z-index: 3; left: 37%; top: 36%; width: 49%; height: 49%;
  color: color-mix(in srgb, var(--h1) 62%, #0a1430);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1); }

/* hover / keyboard focus on a job card: a soft ring of the job's color around the card, the icon lifts 3 px,
   the colored shape eases out from behind the glass. Transitions only; nothing loops. */
.gd-card { transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease; }
.gd-card:hover, .gd-card:focus-visible {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--h1) 45%, transparent), 0 14px 32px -18px color-mix(in srgb, var(--h1) 50%, transparent); }
.gd-card:hover > .gd, .gd-card:focus-visible > .gd { transform: translateY(-3px);
  box-shadow: inset 1.5px 1.5px 0 #fff, inset -1px -1px 0 color-mix(in srgb, var(--h1) 18%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--h1) 30%, rgba(255, 255, 255, .5)), 0 14px 24px -12px color-mix(in srgb, var(--h1) 60%, transparent); }
.gd-card:hover .gd-back, .gd-card:focus-visible .gd-back { transform: translate(-1.5px, -1.5px) rotate(-14deg) scale(1.04); }
.gd-card:hover .gd-glow, .gd-card:focus-visible .gd-glow { opacity: .8; }

/* dark: lit glass objects; same halo for all icons */
html[data-theme="dark"] .gd { --halo: 0 10px 24px -12px color-mix(in srgb, var(--h1) 65%, transparent);
  background: radial-gradient(120% 100% at 20% 0%, color-mix(in srgb, var(--h1) 24%, #0b1428) 0, #080e1f 72%);
  box-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, .22), inset -1px -1px 0 rgba(0, 0, 0, .35),
    inset 0 0 0 1px color-mix(in srgb, var(--h1) 28%, rgba(255, 255, 255, .06)), var(--halo); }
html[data-theme="dark"] .gd-glow { opacity: .8; }
html[data-theme="dark"] .gd-lens { background: linear-gradient(150deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, .12));
  box-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, .55), inset -1px -1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .16),
    0 0 0 .5px color-mix(in srgb, var(--h1) 50%, transparent), 0 0 14px -4px color-mix(in srgb, var(--h1) 55%, transparent); }
html[data-theme="dark"] .gd-lens::before { opacity: .24; }
html[data-theme="dark"] .gd-front { color: #f4f8ff; filter: drop-shadow(0 0 2.5px color-mix(in srgb, var(--h1) 75%, transparent)); }
html[data-theme="dark"] .gd-card:hover, html[data-theme="dark"] .gd-card:focus-visible {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--h1) 60%, transparent), 0 0 28px -10px color-mix(in srgb, var(--h1) 55%, transparent); }
html[data-theme="dark"] .gd-card:hover > .gd, html[data-theme="dark"] .gd-card:focus-visible > .gd {
  box-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, .3), inset -1px -1px 0 rgba(0, 0, 0, .35),
    inset 0 0 0 1px color-mix(in srgb, var(--h1) 50%, transparent), 0 14px 26px -12px color-mix(in srgb, var(--h1) 70%, transparent); }

/* compact version for the homepage hero tiles (36 px, 30 px on phones): same layers, tighter geometry, smaller halo */
.gd.gd-sm { --gd: 36px; --halo: 0 6px 12px -8px color-mix(in srgb, var(--h1) 55%, transparent); border-radius: 11px; }
.gd-sm .gd-back { width: 72%; height: 72%; left: 4%; top: 3%; }
.gd-sm .gd-lens { left: 33%; top: 32%; right: 6%; bottom: 6%; border-radius: 7px; -webkit-backdrop-filter: blur(3px) saturate(1.7); backdrop-filter: blur(3px) saturate(1.7);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 1), inset 0 0 0 .75px rgba(255, 255, 255, .6), 0 4px 7px -5px color-mix(in srgb, var(--h1) 55%, transparent); }
.gd-sm .gd-front { left: 39%; top: 38%; width: 49%; height: 49%; stroke-width: 2.1; }
.gd-sm .gd-glow { inset: -40%; }
.gd-card:hover > .gd.gd-sm, .gd-card:focus-visible > .gd.gd-sm { transform: translateY(-2px); }
html[data-theme="dark"] .gd-sm .gd-lens { box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 .75px rgba(255, 255, 255, .16), 0 0 8px -3px color-mix(in srgb, var(--h1) 55%, transparent); }
/* homepage tiles keep their own lift; the border and tint take the job's color instead of the old blue */
.job-tile.gd-card:hover, .job-tile.gd-card:focus-visible { border-color: color-mix(in srgb, var(--h1) 45%, #ffffff); background: color-mix(in srgb, var(--h1) 5%, #ffffff); }
html[data-theme="dark"] .job-tile.gd-card:hover, html[data-theme="dark"] .job-tile.gd-card:focus-visible { border-color: color-mix(in srgb, var(--h1) 55%, transparent); }
@media (max-width: 640px) { .gd.gd-sm { --gd: 30px; border-radius: 9px; } }

/* tiny version for the job chip on job pages ("What do you need done?"): tile + drawing only, no glass layers */
.gd.gd-xs { --gd: 22px; border-radius: 7px; --halo: 0 3px 6px -4px color-mix(in srgb, var(--h1) 60%, transparent); }
.gd-xs .gd-back, .gd-xs .gd-lens { display: none; }
.gd-xs .gd-front { left: 18%; top: 18%; width: 64%; height: 64%; stroke-width: 2.2; }

/* without backdrop blur: a slightly denser pane */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gd-lens { background: linear-gradient(150deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .62)); }
  html[data-theme="dark"] .gd-lens { background: linear-gradient(150deg, rgba(40, 52, 84, .9), rgba(18, 26, 48, .85)); }
}
@media (max-width: 640px) { .gd { --gd: 52px; border-radius: 16px; } }
/* reduced motion: the ring and colors still change on hover, nothing moves */
@media (prefers-reduced-motion: reduce) {
  .gd, .gd-glow, .gd-back, .gd-lens, .gd-front, .gd-card { transition: none; }
  .gd-card:hover > .gd, .gd-card:focus-visible > .gd, .gd-card:hover .gd-back, .gd-card:focus-visible .gd-back { transform: none; }
  .gd-card:hover .gd-back, .gd-card:focus-visible .gd-back { transform: rotate(-9deg); }
}