/* kit/satin.css — the app palette "Satin steel" (owner choice, 2026-11-04). Loaded after refine.css.
   Cool graphite-tinted neutrals, panels with a light-to-slightly-darker vertical gradient, a 1px top highlight over a crisp bottom hairline,
   a 2-3% brushed texture, and the existing brand blue given a specular top edge (primary buttons, active segment, active nav item); metal medals.
   Everything is token overrides first (--sat-*, then the kit tokens they feed); the few component rules below only consume tokens.
   No new hues: graphite neutrals + the brand blue + the status colours. Opt-out for comparison: localStorage 'milo-design-refine' = '0'
   (app/design-scope.js then omits data-palette / data-refine). Contrast: ink-2 on the darkest panel stop >= 7:1, --neu (quietest text) >= 4.8:1. */

:root[data-palette="satin"]{
  /* ---- graphite neutral ramp */
  --sat-ink:#0f1a24; --sat-ink-2:#2b3743; --sat-glyph:#44505c; --sat-neu:#4f5c69; --sat-ui:#6d7a87;
  --sat-line:rgb(30 42 56/.2); --sat-line-2:rgb(30 42 56/.32);
  /* ---- surfaces: top stop, mid, bottom stop of the panel gradient; plane under every page */
  --sat-top:rgb(248 250 252/.96); --sat-mid:rgb(236 240 244/.94); --sat-bot:rgb(222 228 235/.94);
  --sat-panel:linear-gradient(180deg,var(--sat-top) 0,var(--sat-mid) 32%,var(--sat-bot) 100%);
  --sat-float:linear-gradient(180deg,#f7f9fb 0,#eef1f5 40%,#e3e8ee 100%);
  --sat-plane:linear-gradient(180deg,#f1f4f7 0,#e6eaef 100%);
  --sat-chrome:linear-gradient(180deg,#f0f3f6 0,#dfe4ea 55%,#d5dbe2 100%);
  --sat-hi:inset 0 1px 0 rgb(255 255 255/.92); --sat-lo:inset 0 -1px 0 rgb(30 42 56/.2);
  --sat-edge:0 0 0 .5px rgb(40 52 66/.3);
  /* ---- brushed texture, 160px inline SVG tile, about 2.5% */
  --sat-texture:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9 .04' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .25  0 0 0 0 .3  0 0 0 .5 0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.06'/></svg>");
  /* ---- metallic blue: the brand blue, one step deeper, with a specular top edge */
  --sat-blue-fill:linear-gradient(180deg,#5b97e6 0,#2f72cc 8%,#2a69c0 55%,#2158a6 100%);
  --sat-blue-sh:0 0 0 .5px #174a8f,0 1px 2px rgb(23 74 143/.35),inset 0 1px 0 rgb(200 225 255/.75);
  --sat-key:linear-gradient(180deg,#ffffff,#eceff3);
  --sat-well:linear-gradient(180deg,#dfe4ea,#e9edf1);
  /* ---- metals */
  --sat-gold:linear-gradient(145deg,#f3d98a,#c8961e 55%,#e6c565);
  --sat-silver:linear-gradient(145deg,#f4f7fa,#9aa6b2 55%,#dfe5ea);
  --sat-bronze:linear-gradient(145deg,#efc7a6,#b8774a 55%,#dca57e);

  /* ---- feed the kit tokens (shell, glass tiers, menus, sheets, toasts) */
  --accent:#2a69c0; --accent-hover:#215bab; --accent-ink:#164a8c;
  --ink-1:var(--sat-ink); --ink-2:var(--sat-ink-2); --glyph:var(--sat-glyph); --neu:var(--sat-neu);
  --hair:rgb(30 42 56/.14); --hair-2:var(--sat-line-2); --edge-hc:var(--sat-neu);
  --side-bg:#e9edf1; --side-border:#c3cad2; --side-hover:#dde3e9; --side-selected:rgb(42 105 192/.14); --side-primary:#2a69c0;   /* page-level copies (the collapse toggle); nav.side re-themes its own below */
  --g1:rgb(236 240 244/.9); --g2:rgb(240 243 247/.92); --g3:rgb(244 246 249/.9); --g3-dense:#f4f6f9; --chrome:rgb(238 241 245/.92);
  --float:rgb(244 246 249/.96); --sheet:rgb(244 246 249/.97); --scrim:rgb(15 26 36/.28);
  --sh-ctl:0 0 0 .5px rgb(40 52 66/.30),0 1px 1.5px rgb(40 52 66/.12),inset 0 1px 0 rgb(255 255 255/.95);
  --sh-float:0 0 0 .5px rgb(30 42 56/.28),0 12px 32px -8px rgb(15 26 36/.34),inset 0 1px 0 rgb(255 255 255/.9);
  --seg-thumb-sh:0 0 0 .5px rgb(30 42 56/.28),0 1px 2px rgb(30 42 56/.2),inset 0 1px 0 #fff;
  --lg-line:#d9dfe6; --lg-faint:#e6ebf0; --lg-canvas:#eef1f5; --lg-ink-3:var(--sat-glyph); --lg-ink-5:var(--sat-neu); --lg-mute:var(--sat-neu);
}
@media (prefers-reduced-transparency:reduce){:root[data-palette="satin"]{--g1:#e9edf1;--g2:#eef1f5;--g3:#f4f6f9;--float:#f4f6f9;--sheet:#f4f6f9}}

/* the refine layer reads its own tokens on #page; point them at satin (higher specificity than refine's :where) */
:root[data-palette="satin"] [data-refine="1"]{--hair:rgb(30 42 56/.2); --hair-2:var(--sat-line-2); --ink-1:var(--sat-ink); --ink-2:var(--sat-ink-2); --glyph:var(--sat-glyph); --neu:var(--sat-neu); --rf-ui:var(--sat-ui);
  --x-grid:rgb(30 42 56/.1); --rf-edge:rgb(30 42 56/.24); --rf-edge-hi:rgb(30 42 56/.38); --accent-ink:#164a8c}

/* ---- every page is the same clean white surface (Owner, 2026-11-04: "all pages r white, the metalic is meant just for the sidebar"):
   the sky scene, the page plane and the panels carry no tint, gradient or texture. Only nav.side below is themed. */
:root[data-palette="satin"] body{background:#fff}
:root[data-palette="satin"] .scene{background:#fff;filter:none}
:root[data-palette="satin"] .scene::after{display:none}
/* The body supplies the white canvas. A transparent page keeps its full-viewport padding from covering the sidebar when a drawer elevates the page. */
:root[data-palette="satin"] #page[data-refine="1"]{background:transparent}

/* ---- sidebar only: the login page's night sky (kit-side copy of pages/access/page.css .px-hero: #0f1418 ground, two soft accent glows, 22px dot grid; static) */
:root[data-palette="satin"] nav.side{
  --side-bg:#0f1418; --side-fg:#e8edf2; --side-muted:#a9b4be; --side-hover:rgb(255 255 255/.07); --side-selected:rgb(255 255 255/.11);
  --side-border:rgb(255 255 255/.10); --side-primary:#7db4f7; --ov:255 255 255;
  background:
    radial-gradient(rgb(255 255 255/.06) 1px,transparent 1px) 0 0/22px 22px,
    radial-gradient(70% 26% at 26% 14%,color-mix(in srgb,var(--accent) 38%,transparent),transparent 72%),
    radial-gradient(60% 24% at 78% 88%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 72%),
    #0f1418;
  box-shadow:none;color-scheme:dark}
:root[data-palette="satin"] .side .nav a .lk{color:#e6b04a}
:root[data-palette="satin"] .side .nav a .tag{color:#9cc9ff}
:root[data-palette="satin"] .side .sacct .av{background:var(--accent);color:#fff}
:root[data-palette="satin"] .side .nav>a[aria-current=page],:root[data-palette="satin"] .side .nav>.nbell.is-current{box-shadow:none}
:root[data-palette="satin"] .side .nav>:is([aria-current=page],.is-current,[aria-expanded=true]) .i{color:var(--side-primary)}
:root[data-palette="satin"] .side .nav>:is([aria-current=page],.is-current,[aria-expanded=true]){color:#fff}

/* Post a deal: flat accent fill, no glow, halo, specular edge or outer shadow (Owner, 2026-11-04) */
:root[data-palette="satin"] .side .side-post .tb-post{background:#1769df;background-image:none;box-shadow:none;border:0}
:root[data-palette="satin"] .side .side-post .tb-post::before,:root[data-palette="satin"] .side .side-post .tb-post::after{content:none;display:none;animation:none;box-shadow:none}
@media (hover:hover){:root[data-palette="satin"] .side .side-post .tb-post:hover{background:#145ac0;box-shadow:none}}

@media (forced-colors:active){:root[data-palette="satin"] :is(.float,.sheet,.pane){background:Canvas}}

/* Sidebar foot (owner 2026-11-05): a slimmer lit Post a deal, and the account as a quiet flush row, not a boxed card. */
:root[data-palette="satin"] .side .side-post .tb-post{height:40px;gap:8px;border-radius:10px;font:600 14px/1 var(--font-ui);letter-spacing:-.005em;background:linear-gradient(180deg,#2f7ef1,#1b62d4);box-shadow:inset 0 1px 0 rgb(255 255 255/.22),inset 0 0 0 1px rgb(255 255 255/.05),0 8px 20px -8px rgb(30 110 240/.65);transition:filter .16s ease,transform .12s ease,box-shadow .2s ease}
:root[data-palette="satin"] .side .side-post .tb-post .i{width:16px;height:16px}
@media (hover:hover){:root[data-palette="satin"] .side .side-post .tb-post:hover{background:linear-gradient(180deg,#2f7ef1,#1b62d4);filter:brightness(1.1);box-shadow:inset 0 1px 0 rgb(255 255 255/.26),inset 0 0 0 1px rgb(255 255 255/.06),0 10px 24px -8px rgb(30 110 240/.85)}}
:root[data-palette="satin"] .side .side-post .tb-post:active{transform:scale(.98)}
:root[data-palette="satin"] .side .sfoot{margin-top:6px;padding-top:0;border-top:0}
:root[data-palette="satin"] .side .scard{padding:0;border:0;border-radius:10px;background:none;box-shadow:none;transition:background-color .16s ease}
@media (hover:hover){:root[data-palette="satin"] .side .scard:hover{background:rgb(255 255 255/.055)}:root[data-palette="satin"] .side :is(.sacct,.sout):hover{background:none}}
:root[data-palette="satin"] .side .sacct{height:46px;gap:10px;padding:0 8px;border-radius:10px}
:root[data-palette="satin"] .side .sacct .av{width:30px;height:30px;font:600 11px/1 var(--font-ui);letter-spacing:.02em;background:linear-gradient(160deg,#3b4c61,#222d3a);color:#dce6f1;box-shadow:inset 0 0 0 1px rgb(255 255 255/.14)}
:root[data-palette="satin"] .side .sacct .who b{font:500 13.5px/18px var(--font-ui)}
:root[data-palette="satin"] .side .sout{width:34px;height:46px;opacity:.55;transition:opacity .16s ease}
@media (hover:hover){:root[data-palette="satin"] .side .scard:hover .sout{opacity:1}}

/* The sidebar's own icon set: sharp corners, even stroke, one tinted facet on each glyph (set on the path itself: page styles cannot reach into a <use> clone). */
:root[data-palette="satin"] .side .nav .i{width:20px;height:20px;stroke-width:1.6;stroke-linejoin:miter;stroke-linecap:square}
:root[data-palette="satin"] .side .sout .i{stroke-width:1.6;stroke-linejoin:miter;stroke-linecap:square}