/* MJ button family: section themes supply color; roles supply emphasis.
   Use .button (primary), .button.button-secondary, or .button.button-nav.
   Place data-theme="dark|light|green" on a surrounding section/container. */
:root,[data-theme="light"]{
 --button-primary-bg:#354a3c;--button-primary-fg:#ffffff;--button-primary-border:#354a3c;--button-primary-hover:#25382c;
 --button-secondary-bg:transparent;--button-secondary-fg:#293f30;--button-secondary-border:#727e6d;--button-secondary-hover:#d6ddcf;
 --button-focus:#254a31;--button-flash:238,250,220;
}
[data-theme="dark"]{
 --button-primary-bg:#121812;--button-primary-fg:#ffffff;--button-primary-border:#a2b295;--button-primary-hover:#202b20;
 --button-secondary-bg:transparent;--button-secondary-fg:#e6e9df;--button-secondary-border:#7c8973;--button-secondary-hover:#ffffff0d;
 --button-focus:#d0dfc1;--button-flash:243,255,223;
}
[data-theme="green"]{
 --button-primary-bg:#111712;--button-primary-fg:#ffffff;--button-primary-border:#a5b59a;--button-primary-hover:#202c22;
 --button-secondary-bg:transparent;--button-secondary-fg:#f3f1e8;--button-secondary-border:#bdc6b0;--button-secondary-hover:#ffffff0d;
 --button-focus:#e3edcf;--button-flash:245,255,226;
}
.button{
 --button-bg:var(--button-primary-bg);--button-fg:var(--button-primary-fg);--button-border:var(--button-primary-border);--button-hover:var(--button-primary-hover);
 position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:space-between;gap:20px;
 min-height:52px;max-width:100%;padding:14px 20px;border:1px solid var(--button-border);border-radius:10px;
 background:var(--button-bg);color:var(--button-fg);font:400 .8125rem/1.4 var(--body);letter-spacing:0;text-align:left;text-decoration:none;cursor:pointer;
 vertical-align:middle;appearance:none;-webkit-tap-highlight-color:transparent;
 transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.button-secondary,.button-nav{
 --button-bg:var(--button-secondary-bg);--button-fg:var(--button-secondary-fg);--button-border:var(--button-secondary-border);--button-hover:var(--button-secondary-hover);
}
.button-nav{min-height:44px;padding:10px 14px;gap:12px;border-radius:9px;font-size:.75rem;white-space:nowrap;flex-shrink:0}
.button span[aria-hidden="true"]{flex-shrink:0;font:400 1.25rem/1 Arial,sans-serif}
.button-nav span[aria-hidden="true"]{font-size:1.125rem}
.button:hover{background:var(--button-hover);color:var(--button-fg);text-decoration:none}
.button:active{border-color:var(--button-focus)}
.button:focus-visible{outline:3px solid var(--button-focus);outline-offset:4px;color:var(--button-fg)}
/* Flash remains clipped to the button: a small left-edge glow and faint sweep. */
.button::before,.button::after{content:"";position:absolute;pointer-events:none;z-index:-1;opacity:0;inset:0;border:0;border-radius:inherit}
.button::before{background:radial-gradient(ellipse 42px 28px at 5px 50%,rgba(var(--button-flash),.65),rgba(var(--button-flash),0) 100%);transform-origin:left center}
.button::after{width:38%;left:-30%;right:auto;background:linear-gradient(105deg,transparent,rgba(var(--button-flash),.13),transparent)}
@media(prefers-reduced-motion:no-preference){
 @media(hover:hover){.button:hover::before{animation:button-edge-flash .48s ease-out}.button:hover::after{animation:button-surface-flash .56s ease-out}}
 .button:focus-visible::before{animation:button-edge-flash .48s ease-out}
 .button:focus-visible::after{animation:button-surface-flash .56s ease-out}
 .button:active::before{animation:none;opacity:.8;transform:scaleX(.65)}
 .button:active::after{animation:none;opacity:.5;transform:translateX(70%)}
}
@keyframes button-edge-flash{0%{opacity:0;transform:scaleX(.65)}18%{opacity:.65;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.15)}}
@keyframes button-surface-flash{0%{opacity:0;transform:translateX(0)}25%{opacity:.6}100%{opacity:0;transform:translateX(210%)}}
@media(max-width:900px){.button{gap:16px}.button-nav{gap:10px}}
@media(max-width:359px){.button-nav{padding-inline:11px;gap:8px}}
@media(prefers-reduced-motion:reduce){.button{transition:none}.button::before,.button::after{display:none;animation:none}}
@media(forced-colors:active){.button{border-color:ButtonText;color:ButtonText;background:Canvas}.button:focus-visible{outline-color:Highlight}.button::before,.button::after{display:none}}