/* Page-group metallic tints. Chrome stays on sign-in and Home. Each group swaps the metal used for
   buttons, active tabs/chips, title lettering, panel frames, rivets and the top glow. */
body[data-pg]{transition:background-color .3s}
body[data-pg="copper"]{--chrome:linear-gradient(180deg,#ffe6d3 0%,#e0966a 40%,#8a4a26 54%,#f2b892 100%);--amb:#eaa57c;--tint:234,165,124}
body[data-pg="titanium"]{--chrome:linear-gradient(180deg,#eef7ff 0%,#9cc3e8 40%,#3f6386 54%,#cfe4f6 100%);--amb:#a9cbec;--tint:150,195,236}
body[data-pg="amethyst"]{--chrome:linear-gradient(180deg,#f5eeff 0%,#b99de8 40%,#5a3f8c 54%,#dccbf6 100%);--amb:#c4aef0;--tint:185,157,232}
body[data-pg="emerald"]{--chrome:linear-gradient(180deg,#e9fff7 0%,#7fd6b8 40%,#22684f 54%,#bdeedc 100%);--amb:#8fdcc2;--tint:127,214,184}
body[data-pg="cobalt"]{--chrome:linear-gradient(180deg,#eef2ff 0%,#93a9f2 40%,#2f428a 54%,#c9d4fb 100%);--amb:#a3b6f5;--tint:147,169,242}
body[data-pg="ruby"]{--chrome:linear-gradient(180deg,#ffeef0 0%,#ec8b96 40%,#7d2431 54%,#f6c3c9 100%);--amb:#ef9aa4;--tint:236,139,150}
body[data-pg]:not([data-pg="chrome"]){background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),radial-gradient(120% 60% at 50% -10%,rgba(var(--tint),.16),transparent 55%),var(--bg);background-attachment:fixed}
body[data-pg]:not([data-pg="chrome"]) .panel{box-shadow:inset 0 0 0 3px var(--bg),inset 0 0 0 4px rgba(var(--tint),.32),0 10px 24px rgba(0,0,0,.35)}
body[data-pg]:not([data-pg="chrome"]) .panel::after{background:radial-gradient(circle at 4px 4px,rgb(var(--tint)) 0 1.6px,transparent 2.2px) 0 0/8px 8px no-repeat,radial-gradient(circle at 4px 4px,rgb(var(--tint)) 0 1.6px,transparent 2.2px) 100% 0/8px 8px no-repeat,radial-gradient(circle at 4px 4px,rgb(var(--tint)) 0 1.6px,transparent 2.2px) 0 100%/8px 8px no-repeat,radial-gradient(circle at 4px 4px,rgb(var(--tint)) 0 1.6px,transparent 2.2px) 100% 100%/8px 8px no-repeat}
body[data-pg]:not([data-pg="chrome"]) .top{border-bottom-color:rgba(var(--tint),.35)}
body[data-pg]:not([data-pg="chrome"]) .hero .mono,body[data-pg]:not([data-pg="chrome"]) .stephead .mono{color:var(--amb)!important}
body[data-pg]:not([data-pg="chrome"]) .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 2px 0 rgba(0,0,0,.55),0 6px 14px rgba(0,0,0,.4)}
body[data-pg]:not([data-pg="chrome"]) .tm.on{border-color:var(--amb);background:rgba(var(--tint),.14)}
body[data-pg]:not([data-pg="chrome"]) .seedrow.flash{border-color:var(--amb)}
body[data-pg]:not([data-pg="chrome"]) input:focus,body[data-pg]:not([data-pg="chrome"]) select:focus,body[data-pg]:not([data-pg="chrome"]) textarea:focus{outline-color:var(--amb)}
/* perf pass: the page background (brushed lines + top glow) was background-attachment:fixed, which makes Chrome repaint the
   whole page on every scroll frame. It now sits on its own fixed layer behind the page content (body is its own stacking context so the layer sits above its colour): same look, scrolls on the compositor.
   iOS Safari has never honoured fixed backgrounds, so it keeps the plain body background it already draws.
   (Lives here, after the tinted backgrounds above, so it wins. styles.css has the rest of the perf pass.) */
@supports not (-webkit-touch-callout:none){
  body,body[data-pg]:not([data-pg="chrome"]){background:var(--bg);isolation:isolate}
  body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),radial-gradient(120% 60% at 50% -10%,rgba(190,200,215,.12),transparent 55%)}
  body[data-pg]:not([data-pg="chrome"])::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),radial-gradient(120% 60% at 50% -10%,rgba(var(--tint),.16),transparent 55%)}
}