/* Static replica contract: fragment routing only. No script, state, or runtime hooks. */

html {
  scroll-behavior: auto;
}

html,
body,
.window-frame {
  background: transparent !important;
}

body {
  overflow: hidden;
}

:root {
  --replica-console-height: 385px;
  /* The pane starts after the 462px content track and the 2px desk gap. */
  --replica-side-panel-shift: calc(var(--desk-shell-width) - 16px);
}

.window-frame > .app {
  /* Keep the replica's main shell at the same canonical desktop width as PC. */
  top: 0 !important;
  left: 50% !important;
  width: min(var(--desk-shell-width), 100vw) !important;
  max-width: min(var(--desk-shell-width), 100vw) !important;
  transform: translateX(-50%) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.static-route-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.static-session-screen {
  display: none;
  min-height: 0;
  padding: 8px;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--surface-panel);
}

.static-session-screen:target {
  display: grid;
}

#app-shell:has(.static-session-screen:target) .console-layout,
#app-shell:has(.static-session-screen:target) .compact-layout {
  display: none;
}

.bot-tabs {
  min-height: 0;
}

.bot-tab-select,
.bot-tab-toggle,
.quick-module-open,
.quick-module-toggle,
.compact-card-open,
.compact-card-toggle,
.route-toggle-open,
.route-toggle-button,
.route-track-control,
.modal-layer a,
.modal-layer button {
  text-decoration: none;
}

/* Side columns are navigable screens, not live panels. */
#battle-column-content,
#logs-column-content,
#global-modules-column-content,
#route-track-column-content,
#client-tools-column-content,
#special-stuff-column-content {
  display: none !important;
}

#battle-column-content:target,
#logs-column-content:target,
#global-modules-column-content:target,
#route-track-column-content:target,
#client-tools-column-content:target,
#special-stuff-column-content:target {
  display: block !important;
}

/* The copied desktop stylesheet has higher-specificity live-panel guards. The
   static fragment target must win those guards without adding a script-driven
   state machine to the replica. */
#app-shell:has(> #battle-column-content:target) > #battle-column-content {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#app-shell:has(#logs-column-content:target) #logs-column-content,
#app-shell:has(#global-modules-column-content:target) #global-modules-column-content,
#app-shell:has(#route-track-column-content:target) #route-track-column-content,
#app-shell:has(#client-tools-column-content:target) #client-tools-column-content,
#app-shell:has(#special-stuff-column-content:target) #special-stuff-column-content {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#app-shell:has(#logs-column-content:target) .right-column,
#app-shell:has(#global-modules-column-content:target) .right-column,
#app-shell:has(#route-track-column-content:target) .right-column,
#app-shell:has(#client-tools-column-content:target) .right-column,
#app-shell:has(#special-stuff-column-content:target) .right-column {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#app-shell:has(#logs-column-content:target, #global-modules-column-content:target, #route-track-column-content:target, #client-tools-column-content:target, #special-stuff-column-content:target) .console-layout {
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "left" !important;
  overflow: visible !important;
  justify-self: start !important;
  contain: layout !important;
}

#app-shell:has(#logs-column-content:target, #global-modules-column-content:target, #route-track-column-content:target, #client-tools-column-content:target, #special-stuff-column-content:target) {
  overflow: visible !important;
  justify-items: start !important;
}

#app-shell:has(#logs-column-content:target, #global-modules-column-content:target, #route-track-column-content:target, #client-tools-column-content:target, #special-stuff-column-content:target) .right-column {
  /* Keep the hidden route panes in the same grid slot so opening one cannot
     resize or translate the main shell; the selected pane paints outside it. */
  display: grid !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: var(--desk-side-panel-width) !important;
  min-width: var(--desk-side-panel-width) !important;
  max-width: var(--desk-side-panel-width) !important;
  height: var(--replica-console-height) !important;
  grid-area: left !important;
  grid-row: 1 !important;
  grid-column: 1 !important;
  justify-self: start !important;
  align-self: stretch !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
}

#app-shell:has(#logs-column-content:target, #global-modules-column-content:target, #route-track-column-content:target, #client-tools-column-content:target, #special-stuff-column-content:target) .right-column > :is(#logs-column-content, #route-track-column-content, #global-modules-column-content, #client-tools-column-content, #special-stuff-column-content):target {
  position: static !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: var(--replica-console-height) !important;
  min-height: 0 !important;
  transform: translateX(var(--replica-side-panel-shift)) !important;
  align-self: stretch !important;
}

/* The modal route is a pure fragment target. */
#modal-layer {
  display: none !important;
}

#modal-layer:has(.modal-panel:target),
#modal-layer:has(.static-module-route:target) {
  display: grid !important;
}

#modal-layer .modal-panel {
  display: none !important;
}

#modal-layer > .modal-panel.modal-panel:target,
#modal-layer #modal-module:has(.static-module-route:target) {
  display: grid !important;
}

#modal-layer > .modal-panel.modal-panel:target,
#modal-layer #modal-module:has(.static-module-route:target) {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#app-shell:has(#modal-layer > .modal-panel:target) #modal-layer,
#app-shell:has(#modal-layer > .static-module-route:target) #modal-layer {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#app-shell:has(#modal-layer > .modal-panel:target) #modal-layer > .modal-panel:target,
#app-shell:has(#modal-layer > .static-module-route:target) #modal-layer #modal-module {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#modal-layer > .modal-panel[aria-hidden="true"]:target {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#modal-layer > #modal-god-watch.modal-panel[aria-hidden="true"]:target {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#modal-layer > #modal-god-watch.modal-panel[aria-hidden="true"]:not(.open):target {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#modal-layer .static-module-route {
  display: none;
}

#modal-layer .static-module-route:target {
  display: grid;
}

#modal-layer:has(.static-module-route:target) #modal-module {
  display: grid !important;
}

.static-module-preview {
  min-height: 0;
  display: grid;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line-soft);
  background: var(--surface-inset);
}

.static-module-preview .section-title {
  color: var(--accent-text);
  font-size: var(--text-xl);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}

.static-module-preview .section-meta,
.static-module-preview p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.static-module-preview .module-rule-list {
  display: grid;
  gap: 4px;
}

.static-module-preview .module-rule-card {
  padding: 7px;
  border: 1px solid var(--line-soft);
  background: var(--surface-elevated);
}

.static-route-note {
  margin: 0;
  padding: 5px 7px;
  border: 1px solid rgba(214, 191, 115, 0.32);
  color: var(--accent-2);
  background: rgba(42, 36, 20, 0.42);
  font-size: var(--text-sm);
}

.static-shell-map {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 0 0 4px;
}

.static-shell-map a {
  min-height: 22px;
  padding: 4px 7px;
  border: 1px solid var(--line-soft);
  background: var(--surface-elevated);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
}

.static-shell-map a:hover,
.static-shell-map a:focus-visible {
  border-color: var(--accent);
  color: var(--accent-2);
}

/* A static route never leaves the iframe, and this surface has no forms that submit. */
form {
  pointer-events: none;
}

input,
select,
textarea {
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   Static interaction layer

   Every state below is a fragment target. It exists only to make the copied
   shell feel complete: the URL changes, the relevant surface stays open, and
   the mock state gets a visible treatment. There is no runtime behind it.
   ------------------------------------------------------------------------- */

#replica-state-markers,
.replica-action-state {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
}

#replica-feedback {
  position: absolute;
  z-index: 30;
  top: 8px;
  right: 10px;
  display: flex;
  align-items: center;
  min-height: 20px;
  max-width: min(310px, calc(100% - 20px));
  padding: 3px 7px;
  border: 1px solid var(--line-soft);
  background: rgba(13, 18, 24, 0.94);
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.25;
  letter-spacing: 0.04em;
  pointer-events: none;
}

#replica-feedback > span {
  display: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#replica-feedback .replica-feedback-default {
  display: inline;
}

#replica-feedback strong {
  color: var(--accent-2);
  font-weight: var(--weight-strong);
}

#app-shell:has(#replica-state-synced:target) #replica-feedback .replica-feedback-default,
#app-shell:has(#replica-state-synced:target) #replica-feedback .replica-feedback-sync,
#app-shell:has(#replica-state-client-closed:target) #replica-feedback .replica-feedback-default,
#app-shell:has(#replica-state-client-closed:target) #replica-feedback .replica-feedback-client-closed,
#app-shell:has(#replica-state-battle-cleared:target) #replica-feedback .replica-feedback-default,
#app-shell:has(#replica-state-battle-cleared:target) #replica-feedback .replica-feedback-battle,
body:has(#replica-module-haste-on:target) #replica-feedback .replica-feedback-default,
body:has(#replica-module-haste-on:target) #replica-feedback .replica-feedback-haste,
body:has(#replica-module-anti-paralyze-on:target) #replica-feedback .replica-feedback-default,
body:has(#replica-module-anti-paralyze-on:target) #replica-feedback .replica-feedback-anti-paralyze,
#app-shell:has(#replica-state-local-return-home:target) #replica-feedback .replica-feedback-default,
#app-shell:has(#replica-state-local-return-home:target) #replica-feedback .replica-feedback-return,
#app-shell:has(#replica-state-cavebot-paused:target) #replica-feedback .replica-feedback-default,
#app-shell:has(#replica-state-cavebot-paused:target) #replica-feedback .replica-feedback-cavebot,
#app-shell:has(#replica-state-global-walk:target) #replica-feedback .replica-feedback-default,
#app-shell:has(#replica-state-global-walk:target) #replica-feedback .replica-feedback-global-walk,
#app-shell:has(#replica-state-global-target:target) #replica-feedback .replica-feedback-default,
#app-shell:has(#replica-state-global-target:target) #replica-feedback .replica-feedback-global-target,
#app-shell:has(#replica-state-waypoints-overlay:target) #replica-feedback .replica-feedback-default,
#app-shell:has(#replica-state-waypoints-overlay:target) #replica-feedback .replica-feedback-waypoints,
#app-shell:has(#replica-state-global-loop:target) #replica-feedback .replica-feedback-default,
#app-shell:has(#replica-state-global-loop:target) #replica-feedback .replica-feedback-global-loop,
#app-shell:has(#replica-state-global-return:target) #replica-feedback .replica-feedback-default,
#app-shell:has(#replica-state-global-return:target) #replica-feedback .replica-feedback-global-return,
#app-shell:has(#replica-state-global-pk:target) #replica-feedback .replica-feedback-default,
#app-shell:has(#replica-state-global-pk:target) #replica-feedback .replica-feedback-global-pk,
body:has(#replica-module-rainbow-on:target) #replica-feedback .replica-feedback-default,
body:has(#replica-module-rainbow-on:target) #replica-feedback .replica-feedback-rainbow {
  display: none;
}

#app-shell:has(#replica-state-synced:target) #replica-feedback .replica-feedback-sync,
#app-shell:has(#replica-state-client-closed:target) #replica-feedback .replica-feedback-client-closed,
#app-shell:has(#replica-state-battle-cleared:target) #replica-feedback .replica-feedback-battle,
body:has(#replica-module-haste-on:target) #replica-feedback .replica-feedback-haste,
body:has(#replica-module-anti-paralyze-on:target) #replica-feedback .replica-feedback-anti-paralyze,
#app-shell:has(#replica-state-local-return-home:target) #replica-feedback .replica-feedback-return,
#app-shell:has(#replica-state-cavebot-paused:target) #replica-feedback .replica-feedback-cavebot,
#app-shell:has(#replica-state-global-walk:target) #replica-feedback .replica-feedback-global-walk,
#app-shell:has(#replica-state-global-target:target) #replica-feedback .replica-feedback-global-target,
#app-shell:has(#replica-state-waypoints-overlay:target) #replica-feedback .replica-feedback-waypoints,
#app-shell:has(#replica-state-global-loop:target) #replica-feedback .replica-feedback-global-loop,
#app-shell:has(#replica-state-global-return:target) #replica-feedback .replica-feedback-global-return,
#app-shell:has(#replica-state-global-pk:target) #replica-feedback .replica-feedback-global-pk,
body:has(#replica-module-rainbow-on:target) #replica-feedback .replica-feedback-rainbow {
  display: inline;
}

#app-shell:has(.replica-app-state[data-panel="global"]:target) #global-modules-column-content,
#app-shell:has(.replica-app-state[data-panel="global"]:target) .right-column,
#app-shell:has(.replica-app-state[data-panel="global"]:target) .console-layout {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#app-shell:has(.replica-app-state[data-panel="global"]:target) .console-layout {
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "left" !important;
  overflow: visible !important;
  justify-self: start !important;
  contain: layout !important;
}

#app-shell:has(.replica-app-state[data-panel="global"]:target) .right-column {
  position: relative !important;
  inset: auto !important;
  width: var(--desk-side-panel-width) !important;
  min-width: var(--desk-side-panel-width) !important;
  max-width: var(--desk-side-panel-width) !important;
  height: var(--replica-console-height) !important;
  grid-area: left !important;
  grid-row: 1 !important;
  grid-column: 1 !important;
  justify-self: start !important;
  align-self: stretch !important;
  overflow: visible !important;
}

#app-shell:has(#replica-state-battle-cleared:target) > #battle-column-content {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body:has(#replica-module-haste-on:target) #quick-toggle-haste,
body:has(#replica-module-anti-paralyze-on:target) #quick-toggle-anti-paralyze,
#app-shell:has(#replica-state-local-return-home:target) #quick-toggle-local-return,
#app-shell:has(#replica-state-cavebot-paused:target) #quick-toggle-cavebot-pause,
#app-shell:has(#replica-state-global-walk:target) #quick-toggle-global-autowalk,
#app-shell:has(#replica-state-global-target:target) #quick-toggle-global-targeting,
#app-shell:has(#replica-state-waypoints-overlay:target) #quick-toggle-session-waypoints,
#app-shell:has(#replica-state-global-loop:target) #quick-toggle-global-loop,
#app-shell:has(#replica-state-global-return:target) #quick-toggle-global-return,
#app-shell:has(#replica-state-global-pk:target) #quick-toggle-global-pk {
  border-color: var(--accent) !important;
  color: var(--accent-2) !important;
  box-shadow: 0 0 0 1px rgba(214, 191, 115, 0.22), 0 0 14px rgba(214, 191, 115, 0.12);
}

body:has(#replica-module-haste-on:target) #summary-haste,
body:has(#replica-module-anti-paralyze-on:target) #summary-anti-paralyze,
#app-shell:has(#replica-state-local-return-home:target) #summary-local-return,
#app-shell:has(#replica-state-global-walk:target) #summary-global-autowalk,
#app-shell:has(#replica-state-global-target:target) #summary-global-targeting,
#app-shell:has(#replica-state-waypoints-overlay:target) #summary-session-waypoints,
#app-shell:has(#replica-state-global-loop:target) #summary-global-loop,
#app-shell:has(#replica-state-global-return:target) #summary-global-return,
#app-shell:has(#replica-state-global-pk:target) #summary-global-pk {
  color: var(--accent-2) !important;
}

body:has(#replica-module-haste-on:target) #summary-haste,
body:has(#replica-module-anti-paralyze-on:target) #summary-anti-paralyze {
  font-size: 0;
}

body:has(#replica-module-haste-on:target) #summary-haste::after {
  content: "On";
  font-size: var(--text-md);
}

body:has(#replica-module-anti-paralyze-on:target) #summary-anti-paralyze::after {
  content: "On";
  font-size: var(--text-md);
}

/* Modal action fragments keep their owning panel open without JavaScript. */
#modal-layer:has(.replica-action-state:target) {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#modal-layer .modal-panel:has(.replica-action-state:target) {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* The copied God Watch stylesheet has a more specific aria-hidden guard. Keep
   its static action fragments inside the populated preview surface. */
#modal-layer > #modal-god-watch.modal-panel[aria-hidden="true"]:has(.replica-action-state:target),
#modal-layer > #modal-god-watch.modal-panel[aria-hidden="true"]:not(.open):has(.replica-action-state:target) {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.replica-static-surface {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 36%),
    var(--surface-panel);
  box-shadow: var(--shadow-panel);
  color: var(--text);
}

.replica-surface-head,
.replica-action-row,
.replica-route-feedback,
.replica-record-feedback,
.replica-god-feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.replica-surface-head > div:first-child {
  min-width: 0;
}

.replica-status-badge,
.replica-list-state,
.replica-waypoint-row em {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 5px;
  border: 1px solid rgba(214, 191, 115, 0.38);
  color: var(--accent-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.replica-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.replica-summary-cell,
.replica-tactical-card,
.replica-evidence-card {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line-soft);
  background: var(--surface-inset);
}

.replica-summary-cell span,
.replica-summary-cell small,
.replica-tactical-card span,
.replica-tactical-card small,
.replica-evidence-card small,
.replica-list-card small,
.replica-saved-route small,
.replica-launcher-card small,
.replica-preset-card small {
  color: var(--muted);
  font-size: var(--text-xs);
}

.replica-summary-cell strong,
.replica-tactical-card strong,
.replica-evidence-card strong {
  overflow: hidden;
  color: var(--text);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.replica-list-grid,
.replica-saved-route-list,
.replica-waypoint-list,
.replica-log-list,
.replica-preset-grid,
.replica-launcher-grid,
.replica-evidence-grid {
  display: grid;
  gap: 4px;
}

.replica-list-card,
.replica-saved-route,
.replica-waypoint-row,
.replica-log-row,
.replica-preset-card,
.replica-launcher-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid var(--line-soft);
  background: var(--surface-inset);
  color: var(--text);
  text-decoration: none;
}

.replica-list-card > div,
.replica-saved-route > span:nth-child(2),
.replica-waypoint-row,
.replica-log-row,
.replica-preset-card,
.replica-launcher-card {
  min-width: 0;
}

.replica-list-card strong,
.replica-saved-route strong,
.replica-waypoint-row strong,
.replica-log-row strong,
.replica-preset-card strong,
.replica-launcher-card strong {
  display: block;
  overflow: hidden;
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.replica-list-index,
.replica-log-row span,
.replica-launcher-card span,
.replica-preset-card span {
  color: var(--accent-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.replica-list-state.is-safe,
.replica-list-state.is-ready,
.replica-waypoint-row em {
  border-color: rgba(108, 190, 140, 0.4);
  color: #9de2ae;
}

.replica-battle-entry,
.replica-evidence-card {
  text-decoration: none;
}

.replica-battle-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 7px;
  border: 1px solid var(--line-soft);
  color: var(--text);
}

.replica-battle-entry span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.replica-battle-entry small {
  color: var(--muted);
  font-size: var(--text-xs);
}

.replica-battle-entry-dot,
.legend-dot,
.replica-evidence-mark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-size: 8px;
  font-weight: var(--weight-strong);
}

.replica-battle-entry-hp {
  color: var(--accent-2);
  font-size: var(--text-xs);
}

.replica-empty-note,
.replica-route-feedback,
.replica-record-feedback,
.replica-god-feedback {
  padding: 5px 7px;
  border-left: 2px solid var(--accent);
  background: rgba(214, 191, 115, 0.08);
  color: var(--muted);
  font-size: var(--text-xs);
}

.replica-route-feedback > span,
.replica-record-feedback > span,
.replica-god-feedback > span {
  display: none;
}

.replica-route-feedback .replica-route-feedback-default,
.replica-record-feedback .replica-record-feedback-default,
.replica-god-feedback .replica-god-feedback-default {
  display: inline;
}

#modal-autowalk:has(#replica-route-stopped:target) .replica-route-feedback-default,
#modal-autowalk:has(#replica-route-action:target) .replica-route-feedback-default,
#modal-autowalk:has(#replica-route-saved:target) .replica-route-feedback-default,
#modal-route-library-picker:has(#replica-route-loaded:target) .replica-route-feedback-default,
#modal-record:has(#replica-record-waypoint:target) .replica-record-feedback-default,
#modal-record:has(#replica-record-on:target) .replica-record-feedback-default,
#modal-record:has(#replica-record-saved:target) .replica-record-feedback-default,
#modal-god-watch:has(#replica-god-watch-refreshed:target) .replica-god-feedback-default,
#modal-god-watch:has(#replica-god-watch-snoozed:target) .replica-god-feedback-default {
  display: none;
}

#modal-autowalk:has(#replica-route-stopped:target) .replica-route-feedback-stop,
#modal-autowalk:has(#replica-route-action:target) .replica-route-feedback-action,
#modal-autowalk:has(#replica-route-saved:target) .replica-route-feedback-save,
#modal-route-library-picker:has(#replica-route-loaded:target) .replica-route-feedback-save,
#modal-record:has(#replica-record-waypoint:target) .replica-record-feedback-waypoint,
#modal-record:has(#replica-record-static-waypoint:target) .replica-record-feedback-waypoint,
#modal-record:has(#replica-record-on:target) .replica-record-feedback-on,
#modal-record:has(#replica-record-static-on:target) .replica-record-feedback-on,
#modal-record:has(#replica-record-saved:target) .replica-record-feedback-saved,
#modal-record:has(#replica-record-static-saved:target) .replica-record-feedback-saved,
#modal-god-watch:has(#replica-god-watch-refreshed:target) .replica-god-feedback-refresh,
#modal-god-watch:has(#replica-god-watch-snoozed:target) .replica-god-feedback-snooze {
  display: inline;
}

.replica-route-views {
  min-width: 0;
}

.replica-route-view {
  display: none;
  gap: 7px;
}

.replica-route-view-floor {
  display: grid;
}

#modal-autowalk:has(#replica-route-tactical:target) .replica-route-view-floor,
#modal-autowalk:has(#replica-route-waypoints:target) .replica-route-view-floor,
#modal-autowalk:has(#replica-route-tactical:target) .replica-route-view-waypoints,
#modal-autowalk:has(#replica-route-waypoints:target) .replica-route-view-tactical {
  display: none;
}

#modal-autowalk:has(#replica-route-tactical:target) .replica-route-view-tactical,
#modal-autowalk:has(#replica-route-waypoints:target) .replica-route-view-waypoints {
  display: grid;
}

.replica-route-map {
  position: relative;
  min-height: 150px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background:
    linear-gradient(rgba(130, 150, 160, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 150, 160, 0.08) 1px, transparent 1px),
    #10171c;
  background-size: 18px 18px;
}

.replica-map-grid {
  position: absolute;
  inset: 20px 10% 20px 8%;
  border: 1px solid rgba(151, 174, 182, 0.24);
  transform: skewY(-8deg);
}

.replica-map-path {
  position: absolute;
  height: 3px;
  transform-origin: left center;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(214, 191, 115, 0.5);
}

.replica-map-path.path-one { top: 70%; left: 15%; width: 42%; transform: rotate(-20deg); }
.replica-map-path.path-two { top: 53%; left: 55%; width: 30%; transform: rotate(20deg); }

.replica-map-pin {
  position: absolute;
  padding: 3px 5px;
  border: 1px solid var(--accent);
  background: rgba(13, 18, 24, 0.9);
  color: var(--accent-2);
  font-size: 9px;
  font-weight: var(--weight-strong);
}

.replica-map-pin.pin-start { left: 10%; bottom: 15%; }
.replica-map-pin.pin-target { left: 52%; top: 42%; }
.replica-map-pin.pin-return { right: 8%; top: 22%; }

.replica-route-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: var(--text-xs);
}

.replica-route-legend span { display: inline-flex; align-items: center; gap: 4px; }
.legend-dot { width: 8px; height: 8px; }
.legend-dot.is-start { background: #9de2ae; }
.legend-dot.is-target { background: var(--accent); }
.legend-dot.is-return { background: #86b5e8; }

.replica-tactical-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.replica-waypoint-row { grid-template-columns: 34px minmax(0, 0.7fr) minmax(0, 1.3fr) auto; }
.replica-waypoint-row small { color: var(--muted); font-size: var(--text-xs); }
.replica-waypoint-row.is-selected { border-color: var(--accent); background: rgba(214, 191, 115, 0.11); }

.replica-recorder-track { display: flex; align-items: center; min-width: 0; padding: 12px 4px; }
.replica-recorder-node { display: inline-flex; align-items: center; justify-content: center; min-width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 9px; }
.replica-recorder-node.is-done { border-color: rgba(157, 226, 174, 0.6); color: #9de2ae; }
.replica-recorder-node.is-active { border-color: var(--accent); background: var(--accent); color: var(--bg); }
.replica-recorder-line { flex: 1 1 auto; height: 1px; min-width: 8px; background: var(--line); }

.replica-evidence-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.replica-evidence-card { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.replica-evidence-mark { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.replica-evidence-mark.is-safe { border-color: rgba(157, 226, 174, 0.55); color: #9de2ae; }

.replica-log-row { grid-template-columns: auto auto minmax(0, 1fr); }
.replica-log-row time { color: var(--muted); font-family: var(--mono); font-size: var(--text-xs); }
.replica-log-row.is-live { border-color: rgba(157, 226, 174, 0.5); }

.replica-preset-grid,
.replica-launcher-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.replica-preset-card,
.replica-launcher-card { grid-template-columns: 1fr; align-content: start; min-height: 72px; }
.replica-preset-card.is-selected,
.replica-launcher-card.is-selected { border-color: var(--accent); background: rgba(214, 191, 115, 0.11); }

.replica-module-actions { justify-content: flex-start; }

#modal-module:has(.replica-action-state:target) .static-module-route:first-of-type {
  display: grid;
}

@media (max-width: 620px) {
  #replica-feedback { top: 5px; right: 5px; max-width: calc(100% - 10px); }
  .replica-summary-grid,
  .replica-tactical-grid,
  .replica-evidence-grid,
  .replica-preset-grid,
  .replica-launcher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .replica-waypoint-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .replica-waypoint-row small { grid-column: 2 / -1; }
}

/* -------------------------------------------------------------------------
   Exhaustive static interaction coverage

   These selectors intentionally keep every action inside the iframe. A
   target is a paint-only state: it never changes a session, reads storage, or
   contacts a service.
   ------------------------------------------------------------------------- */

.replica-side-panel-close {
  position: absolute;
  z-index: 4;
  top: 5px;
  right: 5px;
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 6px;
  border: 1px solid var(--line-soft);
  background: var(--surface-elevated);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  text-decoration: none;
  text-transform: uppercase;
}

.replica-side-panel-close:hover,
.replica-side-panel-close:focus-visible {
  border-color: var(--accent);
  color: var(--accent-2);
}

#app-shell:has(#replica-state-client-panel-open:target) #client-tools-column-content,
#app-shell:has(#replica-state-special-panel-open:target) #special-stuff-column-content,
#app-shell:has(#replica-state-route-panel-open:target) #route-track-column-content {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#app-shell:has(#replica-state-client-panel-open:target) .right-column,
#app-shell:has(#replica-state-special-panel-open:target) .right-column,
#app-shell:has(#replica-state-route-panel-open:target) .right-column,
#app-shell:has(#replica-state-client-panel-open:target) .console-layout,
#app-shell:has(#replica-state-special-panel-open:target) .console-layout,
#app-shell:has(#replica-state-route-panel-open:target) .console-layout {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "left" !important;
  overflow: visible !important;
  justify-self: start !important;
  contain: layout !important;
}

#app-shell:has(#replica-state-client-panel-open:target),
#app-shell:has(#replica-state-special-panel-open:target),
#app-shell:has(#replica-state-route-panel-open:target) {
  overflow: visible !important;
  justify-items: start !important;
}

#app-shell:has(#replica-state-client-panel-open:target) .right-column,
#app-shell:has(#replica-state-special-panel-open:target) .right-column,
#app-shell:has(#replica-state-route-panel-open:target) .right-column {
  position: relative !important;
  inset: auto !important;
  width: var(--desk-side-panel-width) !important;
  min-width: var(--desk-side-panel-width) !important;
  max-width: var(--desk-side-panel-width) !important;
  height: var(--replica-console-height) !important;
  grid-area: left !important;
  grid-row: 1 !important;
  grid-column: 1 !important;
  justify-self: start !important;
  align-self: stretch !important;
  overflow: visible !important;
}

#app-shell:has(#replica-state-client-panel-open:target) .right-column > #client-tools-column-content,
#app-shell:has(#replica-state-special-panel-open:target) .right-column > #special-stuff-column-content,
#app-shell:has(#replica-state-route-panel-open:target) .right-column > #route-track-column-content {
  position: static !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: var(--replica-console-height) !important;
  min-height: 0 !important;
  transform: translateX(var(--replica-side-panel-shift)) !important;
  align-self: stretch !important;
}

#app-shell:has(.replica-app-state[data-panel="global"]:target) .right-column > #global-modules-column-content {
  position: static !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: var(--replica-console-height) !important;
  min-height: 0 !important;
  transform: translateX(var(--replica-side-panel-shift)) !important;
  align-self: stretch !important;
}

#app-shell:has(.replica-app-state.replica-action-state:target) #replica-feedback .replica-feedback-default,
#app-shell:has(#replica-state-route-panel-open:target) #replica-feedback .replica-feedback-default,
#app-shell:has(#replica-state-client-panel-open:target) #replica-feedback .replica-feedback-default,
#app-shell:has(#replica-state-special-panel-open:target) #replica-feedback .replica-feedback-default {
  display: none;
}

#app-shell:has(#replica-state-global-panel-open:target) #replica-feedback .replica-feedback-global-panel,
#app-shell:has(#replica-state-global-open-cavebot:target) #replica-feedback .replica-feedback-global-open,
#app-shell:has(#replica-state-global-open-walk:target) #replica-feedback .replica-feedback-global-open,
#app-shell:has(#replica-state-global-open-target:target) #replica-feedback .replica-feedback-global-open,
#app-shell:has(#replica-state-global-open-loop:target) #replica-feedback .replica-feedback-global-open,
#app-shell:has(#replica-state-global-open-return:target) #replica-feedback .replica-feedback-global-open,
#app-shell:has(#replica-state-global-open-pk:target) #replica-feedback .replica-feedback-global-open,
#app-shell:has(#replica-state-client-panel-open:target) #replica-feedback .replica-feedback-client-panel,
#app-shell:has(#replica-state-special-panel-open:target) #replica-feedback .replica-feedback-special-panel,
#app-shell:has(#replica-state-route-panel-open:target) #replica-feedback .replica-feedback-route-panel {
  display: inline;
}

/* Module toggle targets open the same populated module preview and change its
   visual state. */

#modal-layer:has(.replica-module-state:target) {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#modal-module:has(.replica-module-state:target) {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#modal-module .static-module-route:has(.replica-module-state:target) {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#modal-module .static-module-route:has(.replica-module-state:target) .section-meta {
  color: #9de2ae !important;
}

#modal-module .static-module-route:has(.replica-module-state:target) .section-meta::after {
  content: " / PREVIEW ENABLED";
  color: #9de2ae;
  font-weight: var(--weight-strong);
}

#modal-module:has(.replica-module-state:target) .replica-module-feedback-default,
#modal-module:has(#replica-module-rule-added:target) .replica-module-feedback-default,
#modal-module:has(#replica-module-saved:target) .replica-module-feedback-default {
  display: none !important;
}

#modal-module:has(.replica-module-state:target) .replica-module-feedback-state,
#modal-module:has(#replica-module-rule-added:target) .replica-module-feedback-rule,
#modal-module:has(#replica-module-saved:target) .replica-module-feedback-state {
  display: inline !important;
}

.replica-module-feedback,
.replica-targeting-feedback,
.replica-launcher-feedback,
.replica-preset-feedback {
  display: block;
  padding: 5px 7px;
  border-left: 2px solid var(--accent);
  background: rgba(214, 191, 115, 0.08);
  color: var(--muted);
  font-size: var(--text-xs);
}

.replica-module-feedback > span,
.replica-targeting-feedback > span,
.replica-launcher-feedback > span,
.replica-preset-feedback > span {
  display: none;
}

.replica-module-feedback-default,
.replica-targeting-feedback-default,
.replica-launcher-feedback-default,
.replica-preset-feedback-default {
  display: inline !important;
}

/* Session tabs are mock screens, while Start/Pause remains an explicit
   preview state instead of silently reusing the tab fragment. */

.static-session-screen:has(.replica-session-state:target) {
  display: grid !important;
}

#app-shell:has(.static-session-screen:has(.replica-session-state:target)) .console-layout,
#app-shell:has(.static-session-screen:has(.replica-session-state:target)) .compact-layout {
  display: none;
}

.replica-session-feedback {
  padding: 5px 7px;
  border-left: 2px solid var(--accent);
  background: rgba(214, 191, 115, 0.08);
  color: var(--muted);
  font-size: var(--text-sm);
}

.replica-session-feedback-state { display: none; }

.static-session-screen:has(.replica-session-state:target) .replica-session-feedback-default {
  display: none;
}

.static-session-screen:has(.replica-session-state:target) .replica-session-feedback-state {
  display: inline;
  color: var(--accent-2);
}

/* Route builder subviews. */

#modal-autowalk:has(.replica-route-state:target) .replica-route-view {
  display: none !important;
}

#modal-autowalk:not(:has(.replica-route-state:target)) .replica-route-view-floor,
#modal-autowalk:has(#replica-route-floor:target, #replica-route-walk-on:target, #replica-route-loop-on:target, #replica-route-off:target, #replica-route-action:target, #replica-route-stopped:target, #replica-route-saved:target) .replica-route-view-floor {
  display: grid !important;
}

#modal-autowalk:has(#replica-route-tactical:target) .replica-route-view-tactical,
#modal-autowalk:has(#replica-route-waypoints:target, #replica-route-waypoint-040:target, #replica-route-waypoint-041:target, #replica-route-waypoint-042:target, #replica-route-waypoint-043:target, #replica-route-waypoint-044:target) .replica-route-view-waypoints,
#modal-autowalk:has(#replica-route-recorder:target, #replica-route-recorder-on:target) .replica-route-view-recorder,
#modal-autowalk:has(#replica-route-saved-routes:target, #replica-route-saved-route-apes:target, #replica-route-saved-route-depot:target, #replica-route-saved-route-rook:target, #replica-route-load-preview:target, #replica-route-delete-preview:target, #replica-route-clear-preview:target) .replica-route-view-saved-routes,
#modal-autowalk:has(#replica-route-hazard:target, #replica-route-hazard-on:target, #replica-route-hazard-rule:target) .replica-route-view-hazard,
#modal-autowalk:has(#replica-route-recovery:target, #replica-route-recovery-staged:target, #replica-route-recovery-clear:target) .replica-route-view-recovery,
#modal-autowalk:has(#replica-route-save-load:target, #replica-route-saved:target, #replica-route-loaded:target, #replica-route-load-preview:target, #replica-route-clear-preview:target) .replica-route-view-save-load {
  display: grid !important;
}

#modal-autowalk:has(.replica-route-state:target) {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.replica-route-subview-feedback {
  padding: 5px 7px;
  border-left: 2px solid var(--accent);
  background: rgba(214, 191, 115, 0.08);
  color: var(--muted);
  font-size: var(--text-xs);
}

.replica-route-subview-feedback-state { display: none; color: var(--accent-2); }

.replica-route-view:has(.replica-route-state:target) .replica-route-subview-feedback-default {
  display: none;
}

.replica-route-view:has(.replica-route-state:target) .replica-route-subview-feedback-state {
  display: inline;
}

#modal-autowalk:has(#replica-route-recorder-on:target) .replica-route-view-recorder .replica-route-subview-feedback-default {
  display: none !important;
}

#modal-autowalk:has(#replica-route-recorder-on:target) .replica-route-view-recorder .replica-route-subview-feedback-state {
  display: inline !important;
}

.replica-route-view .replica-saved-route:has(.replica-route-state:target),
.replica-route-view .replica-waypoint-row:has(.replica-route-state:target) {
  border-color: var(--accent);
  background: rgba(214, 191, 115, 0.12);
  box-shadow: 0 0 0 1px rgba(214, 191, 115, 0.15);
}

#modal-autowalk:has(.replica-route-state:target) .replica-route-feedback-default {
  display: none;
}

#modal-autowalk:has(#replica-route-action:target, #replica-route-walk-on:target, #replica-route-loop-on:target, #replica-route-off:target) .replica-route-feedback-action,
#modal-autowalk:has(#replica-route-stopped:target) .replica-route-feedback-stop,
#modal-autowalk:has(#replica-route-saved:target) .replica-route-feedback-save {
  display: inline;
}

#modal-autowalk:has(#replica-route-walk-on:target) #quick-toggle-autowalk,
#modal-autowalk:has(#replica-route-loop-on:target) #quick-toggle-loop,
#modal-autowalk:has(#replica-route-hazard-on:target) .replica-route-view-hazard .replica-status-badge,
#modal-autowalk:has(#replica-route-recovery-staged:target) .replica-route-view-recovery .replica-status-badge {
  border-color: var(--accent);
  color: #9de2ae;
}

/* Recorder controls from the side panel all land on a populated preview with
   an action-specific visible result. */

#modal-record:has(.replica-record-state:target) .replica-record-feedback-default,
#modal-record:has(#replica-record-waypoint:target) .replica-record-feedback-default,
#modal-record:has(#replica-record-on:target) .replica-record-feedback-default,
#modal-record:has(#replica-record-saved:target) .replica-record-feedback-default {
  display: none;
}

#modal-record:has(.replica-record-state:target) .replica-record-feedback-action,
#modal-record:has(#replica-record-waypoint:target) .replica-record-feedback-waypoint,
#modal-record:has(#replica-record-on:target) .replica-record-feedback-on,
#modal-record:has(#replica-record-saved:target) .replica-record-feedback-saved {
  display: inline;
}

/* Saved route catalog choices and delete/clear previews. */

#modal-route-library-picker:has(.replica-route-picker-state:target) .replica-route-feedback-default,
#modal-route-library-picker:has(#replica-route-loaded:target) .replica-route-feedback-default {
  display: none;
}

#modal-route-library-picker:has(.replica-route-picker-state:target) .replica-route-feedback-save,
#modal-route-library-picker:has(#replica-route-loaded:target) .replica-route-feedback-save {
  display: inline;
}

#modal-route-library-picker:has(#replica-route-picker-delete:target) .replica-route-feedback-save,
#modal-route-library-picker:has(#replica-route-picker-clear:target) .replica-route-feedback-save {
  display: none;
}

#modal-route-library-picker:has(#replica-route-picker-delete:target) .replica-route-feedback-delete,
#modal-route-library-picker:has(#replica-route-picker-clear:target) .replica-route-feedback-clear {
  display: inline;
}

.replica-saved-route:has(.replica-route-picker-state:target) {
  border-color: var(--accent);
  background: rgba(214, 191, 115, 0.12);
}

/* Static session launcher selections/actions. */

#modal-route-launcher:has(.replica-session-picker-state:target, #replica-session-previewed:target) .replica-launcher-feedback-default {
  display: none !important;
}

#modal-route-launcher:has(.replica-session-picker-state:target) .replica-launcher-feedback-state,
#modal-route-launcher:has(#replica-session-team-preview:target, #replica-session-open-preview:target, #replica-session-settings-saved:target, #replica-session-new-team:target, #replica-session-launch-preview:target, #replica-session-window-down:target, #replica-session-window-up:target, #replica-session-window-preview:target, #replica-session-preset-saved:target, #replica-session-delete-preset:target, #replica-session-launch-opened:target, #replica-session-previewed:target) .replica-launcher-feedback-action,
#modal-route-launcher:has(#replica-session-delete-preview:target) .replica-launcher-feedback-delete {
  display: inline !important;
}

.replica-launcher-card:has(.replica-session-picker-state:target) {
  border-color: var(--accent);
  background: rgba(214, 191, 115, 0.12);
}

#modal-route-launcher:has(#replica-session-team-preview:target, #replica-session-open-preview:target, #replica-session-settings-saved:target, #replica-session-new-team:target, #replica-session-launch-preview:target, #replica-session-window-down:target, #replica-session-window-up:target, #replica-session-window-preview:target, #replica-session-preset-saved:target, #replica-session-delete-preset:target, #replica-session-launch-opened:target, #replica-session-previewed:target, #replica-session-delete-preview:target) .replica-launcher-feedback-state {
  display: none !important;
}

/* Targeting, God Watch, and preset surfaces keep their content populated for
   every state fragment. */

#modal-targeting:has(#replica-targeting-enabled:target, #replica-targeting-rule-added:target, #replica-targeting-saved:target) .replica-targeting-feedback-default {
  display: none !important;
}

#modal-targeting:has(#replica-targeting-enabled:target) .replica-targeting-feedback-state,
#modal-targeting:has(#replica-targeting-rule-added:target) .replica-targeting-feedback-rule,
#modal-targeting:has(#replica-targeting-saved:target) .replica-targeting-feedback-state {
  display: inline !important;
}

#modal-god-watch:has(.replica-god-action-state:target) .replica-god-feedback-default {
  display: none;
}

#modal-god-watch:has(#replica-god-watch-refresh-action:target, #replica-god-watch-exiva:target, #replica-god-watch-target-added:target, #replica-god-watch-watch-added:target, #replica-god-watch-footer-refresh:target, #replica-god-watch-exiva-toggle:target) .replica-god-feedback-action {
  display: inline;
}

.replica-preset-card:has(.replica-preset-state:target) {
  border-color: var(--accent);
  background: rgba(214, 191, 115, 0.12);
}

#modal-presets:has(.replica-preset-state:target) .replica-preset-feedback-default {
  display: none !important;
}

#modal-presets:has(.replica-preset-state:target) .replica-preset-feedback-state {
  display: inline !important;
}