/* SydWalk Ear Pull Tabs R1 — presentation only; existing doors retain behavior. */
:root {
  --ear-tab-aluminum:var(--syd-skin-aluminum);
  --ear-tab-aluminum-dark:var(--syd-skin-aluminum-dark);
  --ear-tab-ink:#fff;
  --ear-tab-edge:var(--syd-skin-cobalt);
  --ear-tab-safety:var(--syd-skin-safety);
  --ear-tab-focus:var(--syd-skin-selection-glow);
}

/* Left Ear: the existing C/V perspective door. */
html body .front-door .sydwalk-shell-flower.perspective-door[data-ear-side="LEFT"] {
  top:50%!important;
  left:-2.88rem!important;
  transform:translateY(-50%) rotate(-90deg)!important;
  transform-origin:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.3rem;
  width:auto;
  min-width:9rem;
  height:var(--syd-ear-height);
  min-height:var(--syd-ear-height);
  padding:.18rem .55rem;
  border:3px solid var(--ear-tab-edge);
  border-radius:var(--syd-ear-radius);
  background:
    radial-gradient(circle at 24% 18%,#f4f7f8 0 6%,transparent 22%),
    linear-gradient(145deg,#d7dde0 0%,var(--ear-tab-aluminum) 48%,var(--ear-tab-aluminum-dark) 100%);
  color:var(--ear-tab-ink);
  box-shadow:inset 0 0 0 2px var(--ear-tab-safety),inset 0 1px #fff,0 .25rem .55rem #10242f55,-.24rem 0 0 var(--ear-tab-edge);
  filter:none;
}
html body .front-door .sydwalk-shell-flower.perspective-door[data-ear-side="LEFT"] img {
  flex:0 0 2.65rem;
  width:2.65rem;
  height:2.65rem;
}
html body .front-door .sydwalk-shell-flower.perspective-door[data-ear-side="LEFT"]::after {
  content:"Main Street";
  position:static;
  width:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  opacity:1;
  transform:none;
  box-shadow:none;
  -webkit-text-stroke:.65px var(--syd-skin-text-outline);
  paint-order:stroke fill;
  text-shadow:none;
  font:900 .78rem/1.05 system-ui,sans-serif;
  letter-spacing:.02em;
  pointer-events:none;
}

/* Right Ear: the existing Demo tools or qualified Page Studio door. */
html body .global-tools-ear[data-ear-side="RIGHT"] {
  top:50%!important;
  right:-2.88rem!important;
  transform:translateY(-50%) rotate(90deg)!important;
  transform-origin:center;
}
html body .front-door .contextual-rail-gear-slot {
  top:50%!important;
  right:0!important;
  width:3.25rem;
  height:9rem;
  transform:translateY(-50%)!important;
}
html body .front-door .contextual-rail-gear-slot .contextual-gear {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(90deg);
  transform-origin:center;
}
html body .global-tools-ear[data-ear-side="RIGHT"],
html body .front-door .contextual-rail-gear-slot .contextual-gear {
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.32rem;
  width:auto;
  min-width:9rem;
  height:var(--syd-ear-height);
  min-height:var(--syd-ear-height);
  padding:.18rem .55rem;
  border:3px solid var(--ear-tab-edge);
  border-radius:var(--syd-ear-radius);
  background:
    radial-gradient(circle at 24% 18%,#f4f7f8 0 6%,transparent 22%),
    linear-gradient(145deg,#d7dde0 0%,var(--ear-tab-aluminum) 48%,var(--ear-tab-aluminum-dark) 100%);
  color:var(--ear-tab-ink);
  box-shadow:inset 0 0 0 2px var(--ear-tab-safety),inset 0 1px #fff,0 .25rem .55rem #10242f55,-.24rem 0 0 var(--ear-tab-edge);
}
html body .global-tools-ear[data-ear-side="RIGHT"]::before {content:"Store Tools";}
html body .front-door .contextual-rail-gear-slot .contextual-gear::before {content:"Page Studio";}
html body :is(.global-tools-ear[data-ear-side="RIGHT"],.front-door .contextual-rail-gear-slot .contextual-gear)::before {
  color:inherit;
  -webkit-text-stroke:.65px var(--syd-skin-text-outline);
  paint-order:stroke fill;
  text-shadow:none;
  font:900 .76rem/1.05 system-ui,sans-serif;
  letter-spacing:.02em;
  white-space:nowrap;
}
html body .global-tools-ear[data-ear-side="RIGHT"] img,
html body .front-door .contextual-rail-gear-slot .contextual-gear img {
  flex:0 0 2.55rem;
  width:2.55rem;
  height:2.55rem;
  border-radius:0;
  object-fit:contain;
}

/* Two qualified right-side doors share the edge without covering one another. */
html body:has(.global-tools-ear[data-ear-side="RIGHT"]:not([hidden])) .global-tools-ear[data-ear-side="RIGHT"] {
  top:38%!important;
}
html body:has(.global-tools-ear[data-ear-side="RIGHT"]:not([hidden])) .front-door .contextual-rail-gear-slot {
  top:62%!important;
}

html body :is(
  .front-door .sydwalk-shell-flower.perspective-door[data-ear-side="LEFT"],
  .global-tools-ear[data-ear-side="RIGHT"],
  .front-door .contextual-rail-gear-slot .contextual-gear
):focus-visible {
  outline:3px solid var(--ear-tab-focus);
  outline-offset:3px;
  box-shadow:0 0 .75rem var(--ear-tab-focus),0 .25rem .55rem #10242f55;
}

@media(max-width:390px) {
  html body .front-door .sydwalk-shell-flower.perspective-door[data-ear-side="LEFT"] {left:-2.63rem!important;min-width:8.5rem;}
  html body .global-tools-ear[data-ear-side="RIGHT"] {right:-2.63rem!important;min-width:8.5rem;}
  html body .front-door .contextual-rail-gear-slot {height:8.5rem;}
  html body .front-door .contextual-rail-gear-slot .contextual-gear {min-width:8.5rem;}
}
@media(prefers-reduced-motion:reduce) {
  html body :is(
    .front-door .sydwalk-shell-flower.perspective-door[data-ear-side="LEFT"],
    .global-tools-ear[data-ear-side="RIGHT"],
    .front-door .contextual-rail-gear-slot .contextual-gear
  ) {transition:none!important;}
}
