/* Shared skin used by the review gallery and production app.
   The artwork is a three-slice border image: entire endcaps scale uniformly;
   only the calm center stretches. Foreground labels and SVGs remain ordinary DOM. */
[data-illustrated-buttons] :is(.btn-primary,.btn-secondary,.btn-danger,.material-button) {
  --button-art:var(--button-secondary-art);
  --button-cap:var(--button-secondary-cap);
  --button-art-height:48px;
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:48px;
  min-width:44px;
  box-sizing:border-box;
  padding:12px calc(var(--button-art-height) * var(--button-cap) + 4px);
  border:0;
  border-radius:6px;
  background:transparent;
  color:#fff;
  font:600 14px/1.25 system-ui,sans-serif;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  text-shadow:0 1px 2px #000,0 0 4px #000;
  box-shadow:inset 0 -3px var(--button-selection,transparent);
}
[data-illustrated-buttons] :is(.btn-primary,[data-button-role="primary"]) {
  --button-art:var(--button-primary-art);--button-cap:var(--button-primary-cap);
}
[data-illustrated-buttons] :is(.btn-danger,[data-button-role="danger"]) {
  --button-art:var(--button-danger-art);--button-cap:var(--button-danger-cap);
  color:#ffe4e8;
}
[data-illustrated-buttons] :is(.btn-primary,.btn-secondary,.btn-danger,.material-button)::before {
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  inset-inline:0;
  top:50%;
  height:var(--button-art-height);
  transform:translateY(-50%);
  border-image-source:var(--button-art);
  border-image-slice:0 22% fill;
  border-image-width:0 calc(var(--button-art-height) * var(--button-cap));
  border-image-repeat:stretch;
}
/* Back only the foreground, so there is no rectangular panel covering the rim. */
[data-illustrated-buttons] .button-label {
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-width:0;max-width:100%;padding:2px 4px;border-radius:3px;
  background:rgba(8,13,22,.72);overflow-wrap:anywhere;
}
[data-illustrated-buttons] .button-label > span {min-width:0;}
[data-illustrated-buttons] :is(.btn-primary,.btn-secondary,.btn-danger,.material-button):hover:not(:disabled):not([aria-disabled="true"])::before {filter:brightness(1.06);}
[data-illustrated-buttons] :is(.btn-primary,.btn-secondary,.btn-danger,.material-button):is(:active,[data-preview-state="pressed"]):not(:disabled)::before {transform:translateY(calc(-50% + 1px));filter:brightness(.8);}
[data-illustrated-buttons] :is(.btn-primary,.btn-secondary,.btn-danger,.material-button):is(:focus-visible,[data-preview-state="focused"]) {outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 7px #10131d,inset 0 -3px var(--button-selection,transparent);}
[data-illustrated-buttons] :is(.btn-primary,.btn-secondary,.btn-danger,.material-button):is([aria-pressed="true"],[aria-selected="true"],.active) {--button-selection:#f8e5a6;}
[data-illustrated-buttons] :is(.btn-primary,.btn-secondary,.btn-danger,.material-button):is(:disabled,[aria-disabled="true"]) {cursor:not-allowed;color:#d3d7df;}
[data-illustrated-buttons] :is(.btn-primary,.btn-secondary,.btn-danger,.material-button):is(:disabled,[aria-disabled="true"])::before {filter:grayscale(.85) brightness(.65);}
[data-illustrated-buttons] :is(.btn-primary,.btn-secondary,.btn-danger,.material-button)[aria-busy="true"] {cursor:progress;}
[data-illustrated-buttons] button svg {width:17px;height:17px;flex-shrink:0;pointer-events:none;}
[data-illustrated-buttons] .material-short {--button-art-height:36px;font-size:13px;min-height:44px;padding-block:8px;}
[data-illustrated-buttons] .material-large {--button-art-height:64px;min-height:68px;padding-inline:36px;}
@media(prefers-reduced-motion:reduce) {
  [data-illustrated-buttons] button {transition:none!important;}
  [data-illustrated-buttons] button:active::before {transform:translateY(-50%)!important;}
}
@media(forced-colors:active) {
  [data-illustrated-buttons] button {border:2px solid ButtonText;background:ButtonFace;color:ButtonText;text-shadow:none;}
  [data-illustrated-buttons] button::before {display:none;}
  [data-illustrated-buttons] .button-label {background:transparent;}
  [data-illustrated-buttons] button:focus-visible {outline:3px solid Highlight;}
}

/* Production adapter: preserve each control's existing layout and handlers.
   The shared classifier supplies a role; these rules only replace its paint. */
:root[data-illustrated-buttons] :is(button,a.nav-link)[data-button-material-role] {
  --button-art:var(--button-secondary-art);
  --button-compact-art:var(--button-secondary-compact-art);
  --button-compact-cap:var(--button-secondary-compact-cap);
  --button-cap:var(--button-secondary-cap);
  --button-art-height:44px;
  position:relative;
  isolation:isolate;
  box-sizing:border-box;
  min-width:44px;
  min-height:44px;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  color:#fff!important;
  filter:none!important;
  transform:none!important;
  text-shadow:0 1px 2px #000,0 0 4px #000;
  touch-action:manipulation;
}
:root[data-illustrated-buttons] [data-button-material-role="primary"] {--button-art:var(--button-primary-art);--button-compact-art:var(--button-primary-compact-art);--button-cap:var(--button-primary-cap);--button-compact-cap:var(--button-primary-compact-cap);}
:root[data-illustrated-buttons] [data-button-material-role="danger"] {--button-art:var(--button-danger-art);--button-compact-art:var(--button-danger-compact-art);--button-cap:var(--button-danger-cap);--button-compact-cap:var(--button-danger-compact-cap);color:#ffe4e8!important;}
:root[data-illustrated-buttons] :is(button,a.nav-link)[data-button-material-role]:not([data-button-material-density]) {min-inline-size:calc(var(--button-art-height) * var(--button-cap) * 2 + 6px);}
:root[data-illustrated-buttons] :is(button,a.nav-link)[data-button-material-role]::before {
  content:"";position:absolute;pointer-events:none;z-index:-1;
  inset-inline:0;top:50%;height:min(100%,var(--button-art-height));transform:translateY(-50%);
  border-image-source:var(--button-art);border-image-slice:0 22% fill;
  border-image-width:0 calc(var(--button-art-height) * var(--button-cap));
  border-image-repeat:stretch;
}
:root[data-illustrated-buttons] :is(button,a.nav-link)[data-button-material-density="compact"]::before {
  border-image-source:var(--button-compact-art);border-image-slice:0 48% fill;
  border-image-width:0 calc(var(--button-art-height) * var(--button-compact-cap));
}
:root[data-illustrated-buttons] :is(button,a.nav-link)[data-button-material-density="icon"]::before {
  border-image:none;background:var(--button-compact-art) center/contain no-repeat;
}
:root[data-illustrated-buttons] :is(button,a.nav-link)[data-button-material-density="tile"]::before {
  left:8px;right:auto;width:56px;border-image:none;background:var(--button-compact-art) center/contain no-repeat;
}
:root[data-illustrated-buttons] button.imports-window-opt[data-button-material-density="tile-light"][data-button-material-role] {
  min-height:58px;padding-right:72px;background:var(--bg-surface,#171e27)!important;
  color:var(--text-primary,#fff)!important;border:1px solid var(--border)!important;text-shadow:none!important;
}
:root[data-illustrated-buttons] button.imports-window-opt[data-button-material-density="tile-light"][data-button-material-role]::before {
  inset-inline-start:auto;inset-inline-end:8px;width:56px;border-image:none;
  background:var(--button-compact-art) center/contain no-repeat;
}
:root[data-illustrated-buttons] :is(button,a.nav-link)[data-button-material-role]:is(:hover,:active):not(:disabled)::before {filter:brightness(1.07);}
:root[data-illustrated-buttons] :is(button,a.nav-link)[data-button-material-role]:active:not(:disabled)::before {transform:translateY(calc(-50% + 1px));filter:brightness(.8);}
:root[data-illustrated-buttons] :is(button,a.nav-link)[data-button-material-role]:is(:disabled,[aria-disabled="true"])::before {filter:grayscale(.85) brightness(.65);}
:root[data-illustrated-buttons] :is(button,a.nav-link)[data-button-material-role]:is(:disabled,[aria-disabled="true"]) {cursor:not-allowed!important;}
:root[data-illustrated-buttons] :is(button,a.nav-link)[data-button-material-role][aria-busy="true"] {cursor:progress!important;}
:root[data-illustrated-buttons] :is(button,a.nav-link)[data-button-material-role]:is(:focus-visible,[data-preview-state="focused"]) {outline:3px solid #fff!important;outline-offset:2px;box-shadow:0 0 0 7px #10131d!important;}
:root[data-illustrated-buttons] :is(button,a.nav-link)[data-button-material-role]:is([aria-pressed="true"],[aria-selected="true"],.active)::after {content:"";position:absolute;inset:auto 15% 3px;height:2px;border-radius:2px;background:#f8e5a6;pointer-events:none;}
:root[data-illustrated-buttons] .button-label {text-shadow:0 1px 2px #000;}
:root[data-illustrated-buttons] .home-view-switch .button-label {font-size:12px;padding-inline:1px;white-space:nowrap;}
:root[data-illustrated-buttons] .nav-link .nav-icon {position:relative;z-index:1;}

/* The bottom bar already uses ::before for its active marker. Keep that marker
   and paint a compact material behind the foreground icon instead. */
:root[data-illustrated-buttons] .bottom-nav-item[data-button-material-role] {
  background-image:var(--button-secondary-compact-art);
  background-repeat:no-repeat;background-size:auto 32px;background-position:center 6px;
  color:#fff;
}
:root[data-illustrated-buttons] .bottom-nav-add[data-button-material-role]::before {display:none;}
:root[data-illustrated-buttons] .bottom-nav-add[data-button-material-role] .bnav-add-circle {background:var(--button-primary-compact-art) center/contain no-repeat!important;box-shadow:none!important;color:#fff;}
@media(prefers-reduced-motion:reduce) {
  :root[data-illustrated-buttons] :is(button,a.nav-link)[data-button-material-role]::before {transition:none!important;}
  :root[data-illustrated-buttons] :is(button,a.nav-link)[data-button-material-role]:active::before {transform:translateY(-50%)!important;}
}
@media(forced-colors:active) {
  :root[data-illustrated-buttons] :is(button,a.nav-link)[data-button-material-role] {background:ButtonFace!important;color:ButtonText!important;border:2px solid ButtonText!important;text-shadow:none;}
  :root[data-illustrated-buttons] :is(button,a.nav-link)[data-button-material-role]::before {display:none;}
  :root[data-illustrated-buttons] .bottom-nav-item[data-button-material-role],
  :root[data-illustrated-buttons] .bottom-nav-add .bnav-add-circle {background-image:none!important;}
  :root[data-illustrated-buttons] .button-label {background:transparent!important;}
}