/* SmartisanForge Royale visual layer.
   CSS-only blue, stone and gold cues inspired by the local Store reference.
   No Store artwork, fonts, scripts or remote CDN assets are loaded. */
:root {
  --sf-royale-ink: #142a3d;
  --sf-royale-night: #10283c;
  --sf-royale-deep: #0a1d2d;
  --sf-royale-blue: #28608a;
  --sf-royale-gold: #f6c84f;
  --sf-royale-gold-edge: #9e6416;
  --sf-royale-stone: #f7f9fb;
  --sf-royale-stone-low: #e8eef3;
  --sf-royale-line: #bdcbd6;
  --sf-royale-shadow: 0 12px 30px rgba(3, 15, 27, .2);
  --sf-royale-control-shadow: inset 0 1px 0 rgba(255, 255, 255, .46),
    inset 0 -3px 0 rgba(5, 22, 39, .28), 0 3px 0 rgba(5, 22, 39, .58),
    0 7px 14px rgba(2, 15, 27, .16);
}

/* A quiet arena-sky texture made from gradients, so it adds no network or
   image-decoding work and cannot cover the card art. */
body {
  background-color: var(--sf-royale-night);
  background-image:
    radial-gradient(ellipse at 50% -14rem, rgba(87, 153, 185, .48), transparent 48rem),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, #10283c, #18394f 58%, #10283c);
  background-attachment: fixed;
}

/* Keep the existing header geometry and the product-switcher entirely intact. */
.top h1#brand-title {
  color: #fff5d5;
  -webkit-text-stroke: .35px #102033;
  text-shadow: 0 1px 0 #9a671f, 0 3px 0 #4d3519, 0 5px 14px rgba(0, 0, 0, .35);
}
.top p#brand-subtitle {
  color: #d9e7ef;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .42);
}

/* Metal-edged stone surfaces: color and finish only; no card/layout geometry. */
.panel,
.stat {
  background: linear-gradient(155deg, rgba(255, 255, 255, .985), rgba(234, 241, 246, .97));
  border-color: var(--sf-royale-line);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .72), var(--sf-royale-shadow);
}
.panel.builder {
  background: linear-gradient(160deg, #fbfcfd, #edf2f6);
  border-color: #aebfcb;
}
.section-head h2 {
  color: var(--sf-royale-ink);
  text-shadow: 0 1px 0 #fff;
}
.stat label {
  color: #526879;
  font-weight: 750;
}
.stat b {
  color: #f3c34d;
  -webkit-text-stroke: .55px #273d4d;
  text-shadow: 0 1px 0 #fff0c5, 0 2px 0 #81601c;
}

/* The sticky selection rail becomes a dark, readable control deck. */
.builder-sticky {
  background: linear-gradient(180deg, rgba(25, 58, 81, .97), rgba(13, 38, 57, .97));
  border-bottom-color: rgba(246, 200, 79, .7);
  box-shadow: 0 5px 14px rgba(3, 17, 29, .2);
}
.builder-sticky #count {
  color: #f1f5f7;
  font-weight: 750;
}

/* Shared raised-control language for actions only; card buttons and the
   protected product-switcher are deliberately not selected here. */
.builder-sticky button,
.builder-tools button,
.builder-actions button,
.sort,
.expand-toggle,
.open-chooser,
.deck .copy-deck {
  border: 1px solid #17334a;
  border-radius: 9px;
  background: linear-gradient(180deg, #5684a2, #285676);
  color: #fff;
  font-family: inherit;
  font-weight: 850;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .24);
  box-shadow: var(--sf-royale-control-shadow);
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.builder-sticky button:hover:not(:disabled),
.builder-tools button:hover:not(:disabled),
.builder-actions button:hover:not(:disabled),
.sort:hover:not(:disabled),
.expand-toggle:hover:not(:disabled),
.open-chooser:hover:not(:disabled),
.deck .copy-deck:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.builder-sticky button:active:not(:disabled),
.builder-tools button:active:not(:disabled),
.builder-actions button:active:not(:disabled),
.sort:active:not(:disabled),
.expand-toggle:active:not(:disabled),
.open-chooser:active:not(:disabled),
.deck .copy-deck:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 0 rgba(5, 22, 39, .5);
}
.builder-sticky button:focus-visible,
.builder-tools button:focus-visible,
.builder-actions button:focus-visible,
.sort:focus-visible,
.expand-toggle:focus-visible,
.open-chooser:focus-visible,
.deck .copy-deck:focus-visible,
#language-switcher button:focus-visible {
  outline: 3px solid #ffe08a;
  outline-offset: 2px;
}
.builder-sticky button:disabled,
.builder-tools button:disabled,
.builder-actions button:disabled,
.sort:disabled,
.expand-toggle:disabled,
.open-chooser:disabled,
.deck .copy-deck:disabled {
  cursor: not-allowed;
  filter: grayscale(.45);
  opacity: .55;
  transform: none;
}

/* BUILD: use the Store's gold gradient and layered bevel as a visual reference,
   with a locally rendered, accessible control rather than copied Store code. */
.builder-sticky #build {
  border: 1px solid #70511e;
  border-radius: 12px;
  background-image: linear-gradient(165deg, #ffe58a 0%, #f2bf48 56%, #dfa033 100%);
  color: #243548;
  font-weight: 950;
  letter-spacing: .025em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .54);
  box-shadow: inset 0 1px 0 rgba(255, 248, 210, .88),
    inset 0 -4px 0 #b97821, 0 3px 0 #704c20, 0 8px 16px rgba(6, 20, 31, .23);
}
.builder-sticky #build:hover:not(:disabled) {
  filter: brightness(1.055) saturate(1.04);
  transform: translateY(-1px);
}
.builder-sticky #build:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: inset 0 -2px 0 #b97821, inset 0 1px 0 rgba(255, 248, 210, .72),
    0 1px 0 #704c20;
}

/* Mode colors remain distinct so the existing selection semantics stay clear. */
.builder-sticky #required-mode.active,
.sort.active {
  border-color: #845718;
  background: linear-gradient(180deg, #ffe98c, #edb936);
  color: #2d2619;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .42);
}
.builder-sticky #optional-mode.active {
  border-color: #15545b;
  background: linear-gradient(180deg, #4dc5b4, #198b8b);
  color: #fff;
}
.builder-sticky #exclude-mode.active {
  border-color: #692d35;
  background: linear-gradient(180deg, #d87872, #a8444a);
  color: #fff;
}
.builder-sticky #more-recommendations {
  border-color: #175c4d;
  background: linear-gradient(180deg, #43b997, #207d68);
  color: #fff;
}
.builder-sticky #reset {
  border-color: #657583;
  background: linear-gradient(180deg, #f4f6f7, #cbd5dc);
  color: #263b4a;
  text-shadow: 0 1px 0 #fff;
}

.usage-help {
  border-color: rgba(246, 200, 79, .52);
  background: linear-gradient(150deg, rgba(23, 52, 73, .96), rgba(11, 31, 47, .97));
  box-shadow: 0 8px 22px rgba(3, 16, 27, .22);
}
.usage-help summary {
  color: #fff1c1;
}
.usage-help #help-content,
.usage-help p,
.usage-help li {
  color: #e4edf2;
}
.usage-help h3,
.usage-help h4 {
  color: #f6ce66;
}
.debug-toggle {
  color: #9caab5;
}

@media (prefers-reduced-motion: reduce) {
  .builder-sticky button,
  .builder-tools button,
  .builder-actions button,
  .sort,
  .expand-toggle,
  .open-chooser,
  .deck .copy-deck {
    transition: none;
  }
}