/* Style switcher (blocks/style-switcher + assets/js/global/style-switcher.js): the "Interface style" panel, and what
   every style shares. Each style's own look is in assets/css/styles/<key>.css, loaded only when chosen. The script
   marks the roles a style restyles: .dgs-card (section boxes), .dgs-tile (repeated grid cards), .dgs-sub (small UI
   cards, chips), .dgs-ctl (icon buttons, fields), .dgs-btn / .dgs-ghost (core buttons, Outline style). */

/* ---------- panel: a modal dialog under the header, right-aligned with the page ---------- */
.dgs{
  --dgs-w: calc(var(--s-9) * 3.5);
  --dgs-shadow: 0 var(--s-5) var(--s-8) var(--shadow);
  position:fixed;inset:calc(var(--admin-h) + var(--nav-h) + var(--s-2)) max(var(--s-4), calc((100vw - var(--page)) / 2)) auto auto;
  width:min(var(--dgs-w), calc(100vw - var(--s-6)));max-height:calc(100dvh - var(--admin-h) - var(--nav-h) - var(--s-5));margin:0;padding:0;overflow:auto;overscroll-behavior:contain;
  border:1px solid var(--rule);border-radius:var(--r-card);background:var(--card);color:var(--ink);box-shadow:var(--dgs-shadow)
}
.dgs::backdrop{background:transparent} /* the page stays in full view: the visitor watches it change */
.dgs__box{position:relative;display:grid;gap:var(--s-3);padding:var(--s-4)}
.dgs__head{padding-right:calc(var(--ctl-s) + var(--s-2))}
.dgs__head > *{margin:0}
.dgs__t{font:700 var(--t-m)/1.2 var(--font-display);letter-spacing:normal;color:var(--ink)}
.dgs__lead{font-size:var(--t-xs);color:var(--ink-2)}
.dgs__close{position:absolute;top:var(--s-3);right:var(--s-3)}
.dgs__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
.dgs__opt{display:flex;align-items:center;gap:var(--s-2);min-width:0;min-height:var(--ctl-s);padding:0 var(--s-3);border:1px solid var(--rule);border-radius:var(--r);background:transparent;color:var(--ink);font:500 var(--t-s)/1.2 var(--font-body);text-align:left;cursor:pointer;
  transition:border-color var(--dur) var(--ease-press),background-color var(--dur) var(--ease-press)}
.dgs__opt--default{grid-column:1 / -1}
.dgs__opt svg{flex:none;width:var(--icon-s);height:var(--icon-s);color:var(--ink-2)}
.dgs__opt .dgs__logo{width:calc(var(--s-4) + var(--s-1));height:auto}
.dgs__opt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dgs__opt[aria-pressed="true"]{border-color:var(--accent-fill);background:var(--accent-tint);color:var(--accent);font-weight:600}
.dgs__opt[aria-pressed="true"] svg{color:var(--accent)}
.dgs__opt:focus-visible{outline:var(--wp--custom--focus-width) solid var(--accent-fill);outline-offset:var(--wp--custom--focus-offset)}
@media (hover: hover){ .dgs__opt:hover{border-color:var(--ink-2)} }
.dgs__use{display:block}
.dgs__use .wp-block-button__link{width:100%;white-space:normal;text-align:center;line-height:1.3;padding-block:var(--s-2)}
@media (max-width: 479px){
  .dgs{inset-inline:var(--s-4);width:auto}
}
@media (prefers-reduced-motion: reduce){ .dgs__opt{transition:none} }

/* ---------- shared by every style ---------- */
/* light / shadow / line of the raised and pressed surfaces, per colour mode */
:root[data-style]{
  --dgs-hi: oklch(100% 0 0 / .78);
  --dgs-lo: oklch(22% 0.02 200 / .14);
  --dgs-line: var(--ink);
  --dgs-z-back: -1; /* light layers some styles paint behind the page (body::before) */
  --nav-glass: color-mix(in oklch, var(--paper) 93%, transparent);
  /* core buttons take the style's corner (they read WordPress's control radius, set from the same preset as --r) */
  --wp--custom--control-radius: var(--r);
}
:root[data-style]:is([data-mode="dark"],[data-mode="moon"]){
  --dgs-hi: oklch(100% 0 0 / .13);
  --dgs-lo: oklch(4% 0.01 260 / .62);
}
:root[data-style][data-mode="moon"]{--dgs-lo: oklch(7% 0.03 278 / .64)}
:root[data-style] .dots{background-color:transparent;background-image:none}
:root[data-style] .dg-glow::after{display:none}