/* The Flat style: solid colours, no gradients, no coloured glows. How business software looks.
   It is on when <html data-style="flat"> (set by js/theme.js from the chosen palette, and switchable in the Appearance window).
   Everything here reads the solid colours css/palettes.css gives every palette: --flat-solid (filled buttons), --flat-top (header),
   --flat-hero (the big dark cards), --flat-side (the sidebar). Loaded after dark.css so it wins in both the light and the dark half. */

html[data-style="flat"]{--grad:var(--flat-solid)}

/* the page: no coloured glow behind it */
html[data-style="flat"] body,html[data-style="flat"][data-theme="dark"] body{background:var(--bg)}

/* header and sidebar */
html[data-style="flat"] .top{background:var(--flat-top);box-shadow:none;border-bottom:1px solid rgba(255,255,255,.07)}
html[data-style="flat"] .top::after{display:none}
html[data-style="flat"] .brand img{box-shadow:none}
html[data-style="flat"] .side{background:var(--flat-side)}
html[data-style="flat"] .side #nav a.on,html[data-style="flat"] .side .side-foot>a.on{background:rgba(255,255,255,.09);box-shadow:inset 3px 0 0 var(--accent-1)}

/* the big dark cards (Overview, the eBay pages) */
html[data-style="flat"] .ov-hero,html[data-style="flat"] .mg-hero{background:var(--flat-hero);box-shadow:none}
html[data-style="flat"] .ov-hero:before,html[data-style="flat"] .ov-hero:after,html[data-style="flat"] .mg-hero:before,html[data-style="flat"] .mg-hero:after{display:none}
html[data-style="flat"] .pr-hero{background:var(--brand-wash)}

/* windows and messages */
html[data-style="flat"] .modal-head,html[data-style="flat"][data-theme="dark"] .modal-head{background:var(--card)}
html[data-style="flat"] .toast{background:var(--flat-top)}

/* buttons, switches, markers: solid, with no coloured glow */
html[data-style="flat"] button.primary,html[data-style="flat"] .mg-btn.pri{background:var(--flat-solid);box-shadow:none}
html[data-style="flat"] button.primary:hover:not(:disabled),html[data-style="flat"] .mg-btn.pri:hover:not(:disabled){background:var(--brand-dark)}
html[data-style="flat"] .theme-switch[aria-checked="true"]{background:var(--flat-solid);border-color:transparent}
html[data-style="flat"] .acct-mk{background:hsl(var(--h) var(--acct-s,64%) 38%);text-shadow:none;box-shadow:none}
html[data-style="flat"] .acct-mk.us{background:#a8403f}

/* the lock and activation screen */
html[data-style="flat"] .gate-aurora,html[data-style="flat"] .gate-grid,html[data-style="flat"] .gate-stage::before{display:none}
html[data-style="flat"] .gate-card{background:var(--flat-hero);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
html[data-style="flat"] .gate-icon{background:rgba(255,255,255,.07)}
html[data-style="flat"] .gate-word b,html[data-style="flat"] .wordmark b{background:none;-webkit-text-fill-color:currentColor;color:color-mix(in srgb,var(--accent-1) 55%,#fff)}
html[data-style="flat"] .gate-go,html[data-style="flat"] body.gated .gate-go:hover:not(:disabled){background:var(--flat-solid);box-shadow:none}
html[data-style="flat"] body.gated .gate-go:hover:not(:disabled){background:color-mix(in srgb,var(--flat-solid) 86%,#fff)}