/* Canonical semantic-neutral frames. site_theme.css + ds_tokens.css first.
   Hero selectors are compatibility aliases; typography belongs to ds_patterns.
   Every surface requires a direct .ps-surface-in (legacy .ps-phero-in) well. */
:is(.ps-surface, .ps-surface--plinth, .ps-phero) {
  display: block;
  position: relative;
  padding: 7px;
  border-radius: 6px;
  background: linear-gradient(180deg, #e4c078, #a9761f 52%, #6d4611);
  box-shadow:
    0 26px 60px -20px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 251, 232, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}


:is(.ps-surface-in, .ps-phero-in) {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(28, 46, 76, 0.95), rgba(10, 17, 32, 0.98));
  box-shadow:
    inset 0 2px 12px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px rgba(255, 236, 176, 0.16),
    inset 0 -20px 40px -20px rgba(0, 0, 0, 0.8);
}


:is(.ps-surface-in, .ps-phero-in)::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 120% at 12% -10%, rgba(232, 196, 111, 0.13), transparent 60%),
    radial-gradient(70% 130% at 92% 0%, rgba(36, 115, 126, 0.2), transparent 64%);
  pointer-events: none;
}


:is(.ps-surface-in, .ps-phero-in)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.07), transparent);
  pointer-events: none;
}


:is(.ps-surface--bevel, .ps-phero--bevel) {
  padding:0;
  border-radius:12px;
  background:linear-gradient(168deg,rgba(38,60,96,.62) 0%,rgba(18,30,52,.9) 44%,rgba(10,17,32,.96) 100%);
  box-shadow:0 30px 70px -22px rgba(0,0,0,.85),0 2px 0 rgba(255,244,214,.10),inset 0 1px 0 rgba(255,244,214,.22),inset 0 -18px 34px -18px rgba(0,0,0,.7),inset 0 0 0 1px rgba(232,196,111,.5),inset 0 0 0 6px rgba(6,11,21,.55),inset 0 0 0 7px rgba(213,177,101,.28);
}


:is(.ps-surface--bevel, .ps-phero--bevel)::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  background:radial-gradient(78% 130% at 88% 4%,rgba(120,169,255,.14),transparent 62%),radial-gradient(50% 90% at 8% 0%,rgba(232,196,111,.14),transparent 66%);
  pointer-events:none;
  z-index:2;
}


:is(.ps-surface--bevel, .ps-phero--bevel)>:is(.ps-surface-in, .ps-phero-in) {
  border-radius:12px;
  background:none;
  box-shadow:none;
}


:is(.ps-surface--bevel, .ps-phero--bevel)>:is(.ps-surface-in, .ps-phero-in)::before,:is(.ps-surface--bevel, .ps-phero--bevel)>:is(.ps-surface-in, .ps-phero-in)::after {
  content:none;
}



:is(.ps-surface--bracket, .ps-phero--bracket) {
  padding:6px;
  border:1px solid rgba(232,196,111,.5);
  border-radius:4px;
  background:linear-gradient(180deg,rgba(24,40,68,.9),rgba(9,15,29,.96));
  box-shadow:0 24px 56px -20px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,244,214,.14),inset 0 0 60px rgba(0,0,0,.55);
}


:is(.ps-surface--bracket, .ps-phero--bracket)>:is(.ps-surface-in, .ps-phero-in) {
  border-radius:0;
  border:1px solid rgba(213,177,101,.26);
  background:none;
  box-shadow:none;
}


:is(.ps-surface--bracket, .ps-phero--bracket)>:is(.ps-surface-in, .ps-phero-in)::before {
  background:radial-gradient(64% 150% at 26% -18%,rgba(232,196,111,.18),transparent 62%),repeating-linear-gradient(90deg,rgba(255,236,176,.022) 0 1px,transparent 1px 5px);
}


:is(.ps-surface--bracket, .ps-phero--bracket)>:is(.ps-surface-in, .ps-phero-in)::after {
  content:none;
}


.ps-phero-bracket-mark {
  position:absolute;
  width:22px;
  height:22px;
  z-index:3;
  pointer-events:none;
}


.ps-phero-bracket-mark:nth-of-type(1) {
  top:6px;
  left:6px;
  border-top:3px solid var(--gold-300);
  border-left:3px solid var(--gold-300);
}


.ps-phero-bracket-mark:nth-of-type(2) {
  top:6px;
  right:6px;
  border-top:3px solid var(--gold-300);
  border-right:3px solid var(--gold-300);
}


.ps-phero-bracket-mark:nth-of-type(3) {
  bottom:6px;
  left:6px;
  border-bottom:3px solid var(--gold-300);
  border-left:3px solid var(--gold-300);
}


.ps-phero-bracket-mark:nth-of-type(4) {
  bottom:6px;
  right:6px;
  border-bottom:3px solid var(--gold-300);
  border-right:3px solid var(--gold-300);
}



:is(.ps-surface--rail, .ps-phero--rail) {
  padding:0;
  border:1px solid rgba(213,177,101,.44);
  border-top:0;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(30,49,80,.86),rgba(10,17,32,.97));
  box-shadow:0 28px 64px -22px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,236,176,.06),inset 0 -26px 46px -26px rgba(0,0,0,.8);
  overflow:hidden;
}


:is(.ps-surface--rail, .ps-phero--rail)::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:6px;
  z-index:3;
  background:linear-gradient(180deg,#fbe6a8,#dfb45f 45%,#9a6a1c);
  box-shadow:0 1px 0 rgba(255,251,232,.5),0 4px 14px rgba(232,196,111,.35);
}


:is(.ps-surface--rail, .ps-phero--rail)>:is(.ps-surface-in, .ps-phero-in) {
  border-radius:0;
  background:none;
  box-shadow:none;
}


:is(.ps-surface--rail, .ps-phero--rail)>:is(.ps-surface-in, .ps-phero-in)::before {
  inset:6px 0 0;
  background:radial-gradient(56% 120% at 18% -10%,rgba(232,196,111,.16),transparent 60%),radial-gradient(64% 130% at 88% 4%,rgba(36,115,126,.24),transparent 62%),linear-gradient(180deg,rgba(255,244,214,.08),transparent 42%);
}


:is(.ps-surface--rail, .ps-phero--rail)>:is(.ps-surface-in, .ps-phero-in)::after {
  content:none;
}

/* Isolated negative decoration layers stay behind even bare text nodes.
   No positioning or z-index is imposed on user content. */
:is(.ps-surface, .ps-surface--plinth, .ps-phero) {
  isolation:isolate;
}

:is(.ps-surface-in, .ps-phero-in) {
  isolation:isolate;
  box-sizing:border-box;
}

:is(.ps-surface-in, .ps-phero-in)::before,
:is(.ps-surface-in, .ps-phero-in)::after {
  z-index:-1;
  pointer-events:none;
}

:is(.ps-surface--bevel, .ps-phero--bevel)::before {
  z-index:-1;
  pointer-events:none;
}

:is(.ps-surface--rail, .ps-phero--rail)::before {
  pointer-events:none;
  z-index:-1;
}

/* Reserve the six-pixel rail above generic content; legacy heroes already
   reserve it in their body padding. */
.ps-surface--rail > .ps-surface-in {
  margin-top:6px;
}

/* The generic well already starts below the reserved rail. Do not offset its
   decorative wash a second time; legacy wells still start at the outer top. */
.ps-surface--rail > .ps-surface-in::before {
  inset:0;
}

/* Paint the cap glow after the well wash, but still behind arbitrary content.
   The cap itself stays outside the well; its clipped shadow is painted here so
   the safety stacking does not dim the canonical lit edge. */
.ps-surface--rail::before {
  box-shadow:none;
}

.ps-surface--rail > .ps-surface-in::after {
  content:"";
  top:-6px;
  height:6px;
  background:none;
  box-shadow:0 1px 0 rgba(255,251,232,.5),0 4px 14px rgba(232,196,111,.35);
}

/* Generic corners use explicit positions, never nth-of-type or tag names.
   Place these empty aria-hidden spans outside the inner content well. */
.ps-surface-mark {
  z-index:-1;
  position:absolute;
  width:22px;
  height:22px;
  pointer-events:none;
}

.ps-surface-mark--tl {
  top:6px;
  left:6px;
  border-top:3px solid var(--gold-300);
  border-left:3px solid var(--gold-300);
}

.ps-surface-mark--tr {
  top:6px;
  right:6px;
  border-top:3px solid var(--gold-300);
  border-right:3px solid var(--gold-300);
}

.ps-surface-mark--bl {
  bottom:6px;
  left:6px;
  border-bottom:3px solid var(--gold-300);
  border-left:3px solid var(--gold-300);
}

.ps-surface-mark--br {
  bottom:6px;
  right:6px;
  border-bottom:3px solid var(--gold-300);
  border-right:3px solid var(--gold-300);
}