.planner.planner-shell {
  display: block;
  gap: 0;
  width: min(100%, 760px);
  max-width: 760px;
  transform: none;
}

.planner-shell .planner-workspace {
  position: relative;
  z-index: var(--planner-layer-base);
  margin: 0 var(--planner-rail-width) 0 0;
}

.planner-shell .planner-primary {
  position: relative;
  z-index: var(--planner-layer-base);
}

.planner-shell-right-tabs {
  position: absolute;
  top: var(--planner-rail-top, 0);
  left: 100%;
  z-index: var(--planner-layer-tabs);
  display: grid;
  width: var(--planner-rail-width);
}

.planner-shell-tab {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--planner-font-control);
  letter-spacing: 0.04em;
}

.planner-shell-tab:hover,
.planner-shell-tab:focus-visible,
.planner-shell-tab[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.planner-shell-tab.has-items,
.planner-shell-tab.is-active-priority {
  color: var(--active-priority);
}

.planner-shell-right-tabs .planner-shell-tab {
  width: var(--planner-rail-width);
  min-height: 7rem;
  padding: 0.55rem 0.35rem;
  border-left: 0;
  border-radius: 0 var(--planner-radius-control) var(--planner-radius-control) 0;
  writing-mode: vertical-rl;
}

.planner-shell-right-tabs .planner-shell-tab + .planner-shell-tab {
  border-top: 0;
}

.planner-shell-right-stage {
  position: absolute;
  z-index: var(--planner-layer-panels);
  inset: 0;
  pointer-events: none;
}

.planner-shell-panel {
  min-width: 0;
  padding: var(--planner-space-4);
  border: 1px solid var(--border);
  border-radius: var(--planner-radius-panel);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: var(--planner-font-body);
}

.planner-shell-panel[hidden] {
  display: none;
}

.planner-shell-right-panel {
  position: absolute;
  top: var(--planner-panel-top, 0);
  left: calc(100% + var(--planner-rail-width));
  width: min(var(--planner-panel-width), calc(100vw - 2rem));
  max-height: min(42rem, calc(100vh - 3rem));
  overflow: auto;
  border-radius: 0 var(--planner-radius-panel) var(--planner-radius-panel);
  pointer-events: auto;
}

.planner-shell-right-panel[data-panel="arsenal"] {
  width: min(30rem, calc(100vw - 2rem));
  min-width: min(30rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
}

#planner-arsenal-panel.planner-shell-panel {
  width: min(30rem, calc(100vw - 2rem));
  min-width: min(30rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
}

#planner-damage-priority-panel.planner-shell-panel {
  width: min(var(--planner-panel-width), calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
}

.planner-shell-bottom {
  position: relative;
  z-index: var(--planner-layer-tabs);
  width: calc(100% - var(--planner-rail-width));
  margin-top: -1px;
}

.planner-shell-bottom-tabs {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, var(--planner-tab-width));
  justify-content: center;
}

.planner-shell-bottom-tabs .planner-shell-tab {
  width: var(--planner-tab-width);
  min-height: var(--planner-control-height);
  padding: 0.35rem 0.65rem;
  border-top: 0;
  border-radius: 0 0 var(--planner-radius-control) var(--planner-radius-control);
  white-space: nowrap;
}

.planner-shell-bottom-tabs .planner-shell-tab + .planner-shell-tab {
  border-left: 0;
}

.planner-shell-bottom-stage {
  display: grid;
  justify-items: center;
  width: 100%;
}

.planner-shell-bottom-panel {
  position: relative;
  z-index: 1;
  width: min(var(--planner-panel-wide), calc(100vw - 3rem));
  max-height: none;
  margin-top: 0;
  overflow: visible;
}

.planner-shell-bottom-panel[data-panel="build-summary"] {
  width: min(42rem, calc(100vw - 3rem));
}

.planner-shell-panel .arsenal-panel {
  margin: 0;
}

.planner-shell-panel .build-rules {
  margin-top: var(--planner-space-4);
}

.planner-shell-panel .build-rules > summary {
  display: none;
}

.planner-shell-mobile-header,
.planner-shell-backdrop {
  display: none;
}