/*
 * Project Outpost — workspace-first visual foundation.
 *
 * Loaded after the legacy stylesheet and the approved Design Lab component
 * layers. It removes obsolete drawer presentation without changing the
 * renderer, Host commands, state ownership, or data hooks that still use the
 * historical `.drawer-view` class.
 */

body.outpost-real-page-preview {
  --op-workspace-max: 1378px;
  --op-workspace-rule: 1px solid var(--op-line);
  --op-workspace-rule-faint: 1px solid var(--op-line-faint);
  --op-workspace-pad: clamp(20px, 2.2vw, 34px);
  --op-control-height: 42px;
  --op-control-height-compact: 34px;
  --op-control-padding-inline: 11px;
  --op-scrollbar-gutter: stable;
  --op-copy-measure: 68ch;
  --op-page-header-min-height: 114px;
  --op-page-header-padding: 8px 0 24px;
  --op-page-header-title-size: clamp(28px, 3vw, 46px);
  --op-page-header-description-size: 13px;
  --op-page-header-kicker-size: 9px;
  --op-page-header-kicker-line-height: 1.2;
  --op-context-tab-height: 45px;
  --op-context-tab-control-height: 43px;
  --op-context-tab-padding: 0 14px;
  --op-context-tab-font-size: 10px;
  --op-context-meta-font-size: 9px;
  /* Design Lab rhythm: every primary context strip hands off to its page
   * content on the same 26px baseline. Keep the historical variable as an
   * alias while page styles finish converging on the semantic token. */
  --op-context-content-gap: 26px;
  --op-workspace-layout-gap: var(--op-context-content-gap);
  --op-workspace-region-padding: 24px;
  --op-workspace-region-padding-compact: 16px;
  --op-workspace-section-gap: 18px;
  --op-panel-padding: 14px;
  --op-control-surface: var(--op-bg-raised);
  --op-workspace-canvas-padding: var(--op-context-content-gap) 0 32px;
  /* One shell-owned clearance contract for the fixed Quick Bar. Pages do not
   * need to guess its height or add their own trailing spacer. */
  --op-quick-bar-block-size: 94px;
  --op-quick-bar-inset-block-end: 14px;
  --op-quick-bar-measured-clearance: calc(
    var(--op-quick-bar-block-size)
    + var(--op-quick-bar-inset-block-end)
  );
  --op-page-bottom-breathing-room: 28px;
  --op-workspace-bottom-safe-area: calc(
    var(--op-quick-bar-measured-clearance)
    + var(--op-page-bottom-breathing-room)
    + env(safe-area-inset-bottom, 0px)
  );
  background-color: var(--op-bg);
  background-image: none !important;
}

/* Keep the workspace plane in lockstep with the shared wide shell. */
@media (min-width: 1800px) {
  body.outpost-real-page-preview {
    --op-workspace-max: none;
  }
}

/* When the command plane is not visible, retain only the small end-of-page
 * breathing room. DM and Character Creation hide the bar independently of
 * the preference attribute, so they share the same collapsed contract. */
body.outpost-real-page-preview:is(
  [data-op-quick-bar="off"],
  .dm-workspace-mode,
  .character-onboarding
) {
  --op-workspace-bottom-safe-area: calc(
    var(--op-page-bottom-breathing-room)
    + env(safe-area-inset-bottom, 0px)
  );
}

/* The early real-page compatibility coat is deliberately no longer mounted.
 * These primitives are the only generic material layer applied after the
 * approved Design Lab shell and page-specific styles. */
body.outpost-real-page-preview :is(button, input, textarea, select) {
  font: inherit;
}

/* One theme-aware form language for every migrated workspace. The legacy
 * stylesheet uses a fixed near-black control surface, which is unreadable in
 * Light Mode. Exclude native toggle/range/file controls so their platform
 * interaction remains intact. */
body.outpost-real-page-preview :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  textarea,
  select
) {
  box-sizing: border-box;
  border-color: var(--op-line);
  border-radius: 0 !important;
  color: var(--op-text);
  background-color: var(--op-control-surface);
  background-image: none;
  box-shadow: none;
}

/* Page styles may choose regular or compact height, but shape, material and
 * sizing arithmetic always belong to the shared control contract. */
body.outpost-real-page-preview .workspace-view :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  textarea,
  select
) {
  padding-inline: var(--op-control-padding-inline);
}

body.outpost-real-page-preview .workspace-view textarea {
  min-height: 96px;
  padding-block: 10px;
  resize: vertical;
}

body.outpost-real-page-preview :is(input, textarea)::placeholder {
  color: var(--op-text-faint);
  opacity: 1;
}

body.outpost-real-page-preview select :is(option, optgroup) {
  color: var(--op-text);
  background: var(--op-control-surface);
}

/* Retired card classes can still be emitted by authoritative renderers. They
 * inherit the workspace material instead of retaining the old dark skin. */
body.outpost-real-page-preview .app > main > .view :is(.resource-card, .stat-card, .gear-card) {
  border-color: var(--op-line);
  color: var(--op-text);
  background-color: transparent;
}

body.outpost-real-page-preview .app > main > .view :is(.resource-card, .stat-card) > label,
body.outpost-real-page-preview .app > main > .view .gear-card > .gear-label {
  color: var(--op-text-muted);
}

body.outpost-real-page-preview .app > main > .view .gear-card.empty :is(.gear-preview, .weapon-slot-copy) b {
  color: var(--op-text);
}

body.outpost-real-page-preview .app > main > .view .gear-card.empty :is(.gear-preview, .weapon-slot-copy) small {
  color: var(--op-text-muted);
}

body.outpost-real-page-preview :is(button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--op-focus);
  outline-offset: 3px;
}

body.outpost-real-page-preview .panel {
  min-width: 0;
  padding: var(--op-panel-padding);
  border: 1px solid var(--op-line);
  border-radius: 0;
  color: var(--op-text);
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview .panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--op-text);
  font-family: var(--op-font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body.outpost-real-page-preview .app > main,
body.outpost-real-page-preview.profile-mode .app > main {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: var(--op-space-6) 0 var(--op-workspace-bottom-safe-area);
  scroll-padding-bottom: var(--op-workspace-bottom-safe-area);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body.outpost-real-page-preview .app > main > .view {
  scroll-padding-bottom: var(--op-workspace-bottom-safe-area);
}

body.outpost-real-page-preview.profile-mode :is(#profile, #character).view {
  height: auto;
  min-height: 0;
  overflow: visible;
}

/* One structural and typographic contract for every primary page header.
 * Page renderers supply content only; this layer owns vertical rhythm so a
 * different tag name or legacy inner wrapper cannot shift one destination. */
body.outpost-real-page-preview :is(#profile, #character, #party, #inventory, #skillbook, #dice, #encounter, #dm, #options) .op-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
  min-height: var(--op-page-header-min-height);
  margin: 0;
  padding: var(--op-page-header-padding);
  overflow: visible;
  border: 0;
  background: transparent;
  box-sizing: border-box;
}

body.outpost-real-page-preview :is(#profile, #character, #party, #inventory, #skillbook, #dice, #encounter, #dm, #options) .op-page-heading {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: end;
  gap: 0;
  min-width: 0;
}

body.outpost-real-page-preview :is(#profile, #character, #party, #inventory, #skillbook, #dice, #encounter, #dm, #options) .op-page-kicker {
  display: block;
  margin: 0;
  color: var(--op-text-faint) !important;
  font-family: var(--op-font-mono) !important;
  font-size: var(--op-page-header-kicker-size) !important;
  font-weight: 600;
  line-height: var(--op-page-header-kicker-line-height) !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: none;
}

body.outpost-real-page-preview :is(#profile, #character, #party, #inventory, #skillbook, #dice, #encounter, #dm, #options) .op-page-header :is(h1, h2) {
  margin: 8px 0 3px;
  color: var(--op-text);
  font-family: var(--op-font-ui);
  font-size: var(--op-page-header-title-size);
  font-weight: 530;
  line-height: 1;
  letter-spacing: -.035em;
  text-shadow: none;
}

body.outpost-real-page-preview :is(#profile, #character, #party, #inventory, #skillbook, #dice, #encounter, #dm, #options) .op-page-description {
  max-width: 720px;
  margin: 0;
  color: var(--op-text-muted);
  font-family: var(--op-font-ui);
  font-size: var(--op-page-header-description-size);
  line-height: 1.35;
  text-shadow: none;
}

body.outpost-real-page-preview :is(#profile, #character, #party, #inventory, #skillbook, #dice, #encounter, #dm, #options) .op-page-header-aside {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  align-self: flex-end;
  gap: 8px;
  min-width: 0;
  color: var(--op-text-faint);
  font-family: var(--op-font-mono);
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.outpost-real-page-preview .nav-wrap,
body.outpost-real-page-preview.profile-mode .nav-wrap {
  max-height: calc(100dvh - var(--op-shell-topbar) - (var(--op-shell-pad) * 2));
  padding-bottom: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

/* Bounded work areas retain their own position without propagating wheel or
 * touch momentum into the shell. The stable gutter prevents a panel from
 * changing width when its content grows by one row. */
body.outpost-real-page-preview :is(
  .dm-content-panel,
  .dm-battle-side-control,
  .dm-battle-design-side,
  .dm-asset-grid,
  .data-table,
  .item-palette,
  .dice-skill-switches,
  .history,
  .asset-browser-grid,
  .visual-picker-grid,
  .quick-side-rail-content
) {
  overscroll-behavior: contain;
  scrollbar-gutter: var(--op-scrollbar-gutter);
}

body.outpost-real-page-preview .nav-wrap::-webkit-scrollbar {
  display: none;
}

body.outpost-real-page-preview .app > main > .view:not(.active) {
  display: none !important;
}

body.outpost-real-page-preview .app > main > .view.active {
  display: block;
}

/* Workspace views intentionally keep `.drawer-view` as a compatibility hook
 * for existing render guards. Visually and semantically they are normal pages. */
body.outpost-real-page-preview .app > main > .workspace-view,
body.outpost-real-page-preview .app > main > .workspace-view.active {
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: calc(100dvh - var(--op-shell-main-top) - var(--op-shell-pad));
  max-width: var(--op-workspace-max);
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  animation: none !important;
  --drawer-inner-height: auto;
}

/* The Director Console is the one workspace that owns a bounded command
 * viewport. Its three regions scroll internally, so it must not inherit the
 * page-style auto height used by Player workspaces. */
@media (min-width: 821px) {
  body.outpost-real-page-preview.dm-workspace-mode .app > main > #dm.workspace-view,
  body.outpost-real-page-preview.dm-workspace-mode .app > main > #dm.workspace-view.active {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }
}

body.outpost-real-page-preview .workspace-view.drawer-opening,
body.outpost-real-page-preview.drawer-motion-lock .workspace-view {
  animation: none !important;
  filter: none !important;
}

body.outpost-real-page-preview .drawer-close-button {
  display: none !important;
}

/* A page owns one broad workspace plane. Internal hierarchy comes from rules,
 * spacing and typography rather than a stack of rounded cards. */
body.outpost-real-page-preview .workspace-view > :is(
  .panel,
  .party-layout,
  .party-workspace,
  .inventory-layout-player,
  .skillbook-layout-player,
  .dice-layout,
  .dm-layout,
  .encounter-frame,
  .options-layout
) {
  width: 100%;
  min-height: inherit;
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
}

body.outpost-real-page-preview .workspace-view :is(
  .panel,
  .subpanel,
  .item-detail,
  .skill-detail,
  .dm-card,
  .dice-card,
  .encounter-card,
  .quick-card,
  .storage-section,
  .inventory-storage-section,
  .full-backpack-section
) {
  border-radius: 0;
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
}

body.outpost-real-page-preview .workspace-view :is(
  .panel,
  .subpanel,
  .item-detail,
  .skill-detail,
  .dm-card,
  .dice-card,
  .encounter-card
) + :is(
  .panel,
  .subpanel,
  .item-detail,
  .skill-detail,
  .dm-card,
  .dice-card,
  .encounter-card
) {
  border-top: var(--op-workspace-rule-faint);
}

body.outpost-real-page-preview .workspace-view :is(
  .panel-title,
  .subpanel-title,
  .section-title,
  .drawer-title,
  h2,
  h3
) {
  color: var(--op-text);
  font-family: var(--op-font-ui);
  font-style: normal;
  text-shadow: none;
  text-wrap: balance;
}

/* Canonical microcopy.  Legacy pages historically assigned Georgia and gold
 * ornament to badges/headings.  The workspace foundation owns typography for
 * every converted page so those declarations cannot surface between page
 * passes.  Semantic success/warning/danger colours remain component-owned. */
body.outpost-real-page-preview .workspace-view :is(
  .outpost-workspace-kicker,
  .dm-badge,
  .badge,
  .pill,
  .tag,
  .status-chip,
  label,
  small
) {
  font-family: var(--op-font-mono);
  font-style: normal;
  text-shadow: none;
}

body.outpost-real-page-preview .workspace-view :is(p, .subtle, small) {
  max-width: var(--op-copy-measure);
}

body.outpost-real-page-preview .workspace-view :is(
  .pill,
  .badge,
  .tag,
  .status-chip,
  .inventory-source-pill
) {
  border-radius: 0;
  box-shadow: none;
}

body.outpost-real-page-preview .workspace-view :is(button, input, textarea, select) {
  border-radius: 0;
  background-image: none;
  box-shadow: none;
}

/* Legacy visual quarantine for pages that have not received their final
 * page-specific transplant yet. These selectors remove decoration only; all
 * existing classes, IDs and runtime ownership remain intact. */
body.outpost-real-page-preview .workspace-view :is(
  .progression-dashboard,
  .known-skills-panel,
  .progression-resource-strip > article,
  .progression-ability-panel,
  .progression-tree-panel,
  .progression-ability-row,
  .progression-policy-note,
  .progression-loadout-summary > article,
  .skillbook-head,
  .dice-control-card,
  .dm-navigation-surface,
  .dm-content-panel,
  .dm-workspace-switch,
  .dm-menu-group,
  .dm-compact-card,
  .compact-kpi,
  .battle-board,
  .turn-panel,
  .library-empty
) {
  border-radius: 0;
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
}

body.outpost-real-page-preview #skillbook :is(
  .progression-resource-strip,
  .progression-layout,
  .progression-loadout-summary
) {
  gap: 0;
}

body.outpost-real-page-preview #skillbook .progression-resource-strip > article {
  border-color: var(--op-line-faint);
  background-color: transparent;
}

body.outpost-real-page-preview #skillbook .progression-resource-strip > article + article {
  border-left: 0;
}

body.outpost-real-page-preview #skillbook :is(.progression-ability-panel, .progression-tree-panel) {
  border-color: var(--op-line);
  background-color: transparent;
}

body.outpost-real-page-preview #skillbook .progression-layout > * + * {
  border-left: 0;
}

body.outpost-real-page-preview #skillbook .progression-ability-row {
  border-color: var(--op-line-faint);
  background-color: transparent;
}

body.outpost-real-page-preview #skillbook :is(
  .progression-panel-heading,
  .progression-policy-note,
  .progression-loadout-heading
) > span {
  border-radius: 0;
}

body.outpost-real-page-preview #skillbook .progression-loadout-summary > article {
  border-color: var(--op-line-faint);
  background-color: transparent;
}

body.outpost-real-page-preview #skillbook .skillbook-head {
  position: static;
  background-color: transparent;
}

body.outpost-real-page-preview #skillbook :is(.skill-category-row, .skill-mode-grid) button.active {
  color: var(--op-text);
  background-color: var(--op-surface-strong);
}

body.outpost-real-page-preview #skillbook :is(
  .outpost-surface,
  .progression-dashboard,
  .known-skills-panel,
  .skill-detail-panel
) {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.outpost-real-page-preview #skillbook .outpost-action-primary {
  color: var(--op-text) !important;
  background: var(--op-surface-strong) !important;
  box-shadow: none !important;
}

body.outpost-real-page-preview #dice .dice-control-card {
  border-color: var(--op-line);
  background-color: transparent;
}

body.outpost-real-page-preview #dice .dice-control-card + .dice-control-card {
  border-top-color: var(--op-line-faint);
}

body.outpost-real-page-preview #dice :is(
  .dice-stage-v3,
  .toggle-row,
  .history-row,
  .dice-quick-toggle
) {
  border-radius: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.outpost-real-page-preview #dice button.active,
body.outpost-real-page-preview #dice .roll-button {
  color: var(--op-text);
  background-color: var(--op-surface-strong);
}

body.outpost-real-page-preview #dm :is(.dm-navigation-surface, .dm-content-panel) {
  background-color: transparent;
}

body.outpost-real-page-preview #dm :is(.dm-workspace-switch, .dm-menu-group, .dm-compact-card, .compact-kpi) {
  border-color: var(--op-line-faint);
  background-color: transparent;
}

body.outpost-real-page-preview #dm button.active {
  color: var(--op-text);
  background-color: var(--op-surface-strong);
}

body.outpost-real-page-preview #dm :is(
  .outpost-surface,
  .dm-navigation-surface,
  .dm-content-panel,
  .dm-compact-card
) {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.outpost-real-page-preview #dm :is(.dm-badge, .compact-kpi, .quick-timer, label) {
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.outpost-real-page-preview #encounter :is(.battle-board, .turn-panel) {
  border-color: var(--op-line);
  background-color: transparent;
}

body.outpost-real-page-preview .workspace-view button:not(.icon-button):not(.quick-remove):not(.battle-token) {
  transition:
    color var(--op-fast) ease,
    background-color var(--op-fast) ease,
    border-color var(--op-fast) ease,
    transform var(--op-medium) var(--op-ease);
}

body.outpost-real-page-preview .workspace-view button:not(:disabled):hover {
  transform: translate3d(0, -1px, 0);
}

body.outpost-real-page-preview .workspace-view button:active {
  transform: translate3d(0, 0, 0);
}

/* True overlays remain overlays. They are flattened but are not reclassified
 * as workspaces because they own confirmation, picking or contextual input. */
body.outpost-real-page-preview :is(.modal, .name-gate) > :is(
  .panel,
  .name-card,
  .slot-picker-card,
  .confirm-card
) {
  border-radius: 0;
  background-color: var(--op-bg-raised);
  background-image: none;
  box-shadow: 0 28px 80px var(--op-shadow);
  backdrop-filter: none;
}

body.outpost-real-page-preview :is(.context-menu, .tooltip, .toast) {
  border-radius: 0;
  background-image: none;
  backdrop-filter: none;
}

/* One button silhouette across Player, DM and overlay surfaces. Legacy base
 * CSS still gives bare buttons a 7px radius; overlays such as confirmations
 * live outside `.workspace-view`, so they need this application-level owner. */
body.outpost-real-page-preview button {
  border-radius: 0 !important;
}

body.outpost-real-page-preview .toast-stack {
  position: fixed;
  z-index: 120;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 36px));
  pointer-events: none;
}

body.outpost-real-page-preview .toast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 10px 12px;
  border: var(--op-workspace-rule);
  border-left: 2px solid var(--op-accent);
  color: var(--op-text);
  background: var(--op-bg-raised);
  box-shadow: none;
  font-size: 12px;
  pointer-events: auto;
  animation: op-toast-in 180ms var(--op-ease) both;
}

body.outpost-real-page-preview .toast button {
  width: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-left: var(--op-workspace-rule-faint);
  border-radius: 0;
  background: transparent;
}

body.outpost-real-page-preview .toast.success { border-left-color: var(--op-success); }
body.outpost-real-page-preview .toast.warn { border-left-color: var(--op-warning); }
body.outpost-real-page-preview .toast.error { border-left-color: var(--op-danger); }

@keyframes op-toast-in {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
}

body.outpost-real-page-preview .modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: none;
  place-items: center;
  padding: 18px;
  background: color-mix(in srgb, #000 74%, transparent);
}

body.outpost-real-page-preview .modal.active {
  display: grid;
}

body.outpost-real-page-preview .modal-card {
  width: min(680px, 100%);
  max-height: calc(100dvh - 84px);
  padding: 16px;
  overflow: auto;
  border: var(--op-workspace-rule);
  border-radius: 0;
  color: var(--op-text);
  background: var(--op-bg-raised);
  box-shadow: 0 28px 80px var(--op-shadow);
}

body.outpost-real-page-preview .modal-card.small-modal { width: min(520px, 100%); }
body.outpost-real-page-preview .modal-card.gacha-modal { width: min(860px, 100%); }

body.outpost-real-page-preview .game-confirm-overlay {
  z-index: 340;
  background: color-mix(in srgb, var(--op-bg) 78%, transparent);
  backdrop-filter: blur(3px);
}

body.outpost-real-page-preview .game-confirm-dialog {
  display: grid;
  gap: 14px;
  width: min(460px, 100%);
  padding: 18px;
  border-left: 2px solid var(--op-accent);
}

body.outpost-real-page-preview .game-confirm-kicker {
  color: var(--op-muted);
  font: 700 10px/1.2 var(--op-font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.outpost-real-page-preview .game-confirm-dialog > h3,
body.outpost-real-page-preview .game-confirm-dialog > p {
  margin: 0;
}

body.outpost-real-page-preview .game-confirm-dialog > p {
  color: var(--op-text-soft);
  line-height: 1.55;
}

body.outpost-real-page-preview .game-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

body.outpost-real-page-preview .game-confirm-actions > button {
  min-height: 40px;
}
body.outpost-real-page-preview .modal-card:is(.data-editor-modal, .item-editor-modal, .token-editor-modal, .visual-editor-modal) {
  width: min(1180px, calc(100vw - 40px));
}
body.outpost-real-page-preview .modal-card.skill-editor-modal {
  width: min(1420px, calc(100vw - 28px));
}

body.outpost-real-page-preview .visual-picker-overlay {
  z-index: 300;
  background: color-mix(in srgb, #000 56%, transparent);
}

body.outpost-real-page-preview .visual-picker-modal {
  width: min(980px, calc(100vw - 32px));
}

body.outpost-real-page-preview .visual-picker-grid {
  min-height: 0;
  overflow: auto;
}

/* Shared image / visual browser. This intentionally does not inherit the
 * equipment slot-picker geometry: library media needs bounded thumbnails,
 * internal scrolling, and one consistent surface across every DM tool. */
body.outpost-real-page-preview .asset-browser-modal {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(980px, calc(100vw - 32px));
  height: min(760px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--op-line-strong);
  color: var(--op-text);
  background: var(--op-bg-raised);
  box-shadow: 0 28px 80px var(--op-shadow);
}

body.outpost-real-page-preview .asset-browser-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 70px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--op-line);
}

body.outpost-real-page-preview .asset-browser-header > div:first-child {
  display: grid;
  gap: 4px;
}

body.outpost-real-page-preview .asset-browser-header small,
body.outpost-real-page-preview .asset-browser-toolbar label > span,
body.outpost-real-page-preview .asset-browser-header-actions > span,
body.outpost-real-page-preview .asset-browser-footer {
  color: var(--op-text-faint);
  font-family: var(--op-font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

body.outpost-real-page-preview .asset-browser-header .panel-title {
  color: var(--op-text);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 540;
  letter-spacing: -0.035em;
  line-height: 1;
}

body.outpost-real-page-preview .asset-browser-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.outpost-real-page-preview .asset-browser-header-actions button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--op-line);
  border-radius: 0;
  color: var(--op-text-muted);
  background: transparent;
}

body.outpost-real-page-preview .asset-browser-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, auto);
  align-items: end;
  gap: 20px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--op-line);
  background: var(--op-surface);
}

body.outpost-real-page-preview .asset-browser-toolbar label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

body.outpost-real-page-preview .asset-browser-toolbar input {
  width: 100%;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--op-line);
  border-radius: 0;
  color: var(--op-text);
  background: var(--op-bg);
  box-shadow: none;
}

body.outpost-real-page-preview .asset-browser-toolbar input:focus {
  border-color: var(--op-line-strong);
  outline: 1px solid var(--op-line-strong);
  outline-offset: -2px;
}

body.outpost-real-page-preview .asset-browser-toolbar p {
  max-width: 390px;
  margin: 0 0 4px;
  color: var(--op-text-muted);
  font-size: 11px;
  line-height: 1.45;
  text-align: right;
}

body.outpost-real-page-preview .asset-browser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  align-content: start;
  gap: 0;
  min-height: 0;
  padding: 0;
  overflow: auto;
  scrollbar-gutter: stable;
}

body.outpost-real-page-preview .asset-browser-card {
  position: relative;
  display: grid;
  grid-template-rows: 88px auto auto;
  align-content: start;
  gap: 6px;
  min-width: 0;
  min-height: 144px;
  margin: 0;
  padding: 9px;
  overflow: hidden;
  border: 0;
  border-right: 1px solid var(--op-line-faint);
  border-bottom: 1px solid var(--op-line-faint);
  border-radius: 0;
  color: var(--op-text-muted);
  background: transparent;
  box-shadow: none;
  text-align: left;
  transform: none;
  transition: color var(--op-fast) ease, background-color var(--op-fast) ease;
}

body.outpost-real-page-preview .asset-browser-card[hidden] {
  display: none;
}

body.outpost-real-page-preview .asset-browser-thumbnail,
body.outpost-real-page-preview .asset-browser-card.asset-browser-clear > span,
body.outpost-real-page-preview .asset-browser-card .audio-glyph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 88px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--op-line-faint);
  color: var(--op-text-faint);
  background: var(--op-bg);
}

body.outpost-real-page-preview .asset-browser-thumbnail > :is(img, canvas, video),
body.outpost-real-page-preview .asset-browser-thumbnail .battle-sprite-frame,
body.outpost-real-page-preview .asset-browser-thumbnail .battle-sprite-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 88px;
  object-fit: contain;
}

body.outpost-real-page-preview .asset-browser-background .asset-browser-thumbnail > :is(img, canvas, video) {
  object-fit: cover;
}

body.outpost-real-page-preview .asset-browser-card > b {
  overflow: hidden;
  color: var(--op-text);
  font-size: 11px;
  font-weight: 590;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .asset-browser-card > small {
  overflow: hidden;
  color: var(--op-text-faint);
  font-family: var(--op-font-mono);
  font-size: 8px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .asset-browser-card:hover,
body.outpost-real-page-preview .asset-browser-card:focus-visible,
body.outpost-real-page-preview .asset-browser-card.selected {
  color: var(--op-text);
  background: var(--op-surface-strong);
  outline: none;
  transform: none;
}

body.outpost-real-page-preview .asset-browser-card.selected::after {
  content: "SELECTED";
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 3px 5px;
  color: var(--op-bg);
  background: var(--op-text);
  font-family: var(--op-font-mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

body.outpost-real-page-preview .asset-browser-clear > span {
  font-size: 26px;
  font-weight: 300;
}

body.outpost-real-page-preview .asset-browser-audio .asset-browser-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

body.outpost-real-page-preview .asset-browser-audio .asset-browser-card {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  min-height: 76px;
}

body.outpost-real-page-preview .asset-browser-audio .asset-browser-card > span {
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
}

body.outpost-real-page-preview .asset-browser-audio .asset-browser-card > em {
  grid-column: 3;
  grid-row: 1 / 3;
  color: var(--op-text-muted);
  font-family: var(--op-font-mono);
  font-size: 8px;
  font-style: normal;
  letter-spacing: 0.08em;
}

body.outpost-real-page-preview .asset-browser-footer {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  min-height: 34px;
  padding: 10px 16px;
  border-top: 1px solid var(--op-line);
}

/* DM item/skill chooser extends the shared asset browser language with a
 * catalog grid and a persistent detail rail. Selection remains local until
 * the DM explicitly applies it, so browsing never rebuilds the workspace. */
body.outpost-real-page-preview .dm-library-picker-modal {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(1180px, calc(100vw - 32px));
  height: min(800px, calc(100dvh - 40px));
  max-height: calc(100dvh - 40px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--op-line-strong);
  border-radius: 0;
  color: var(--op-text);
  background: var(--op-bg-raised);
  box-shadow: 0 28px 80px var(--op-shadow);
}

body.outpost-real-page-preview .dm-library-picker-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  align-items: end;
  gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--op-line);
  background: var(--op-surface);
}

body.outpost-real-page-preview .dm-library-picker-toolbar > label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--op-text-faint);
  font-family: var(--op-font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
}

body.outpost-real-page-preview .dm-library-picker-toolbar input {
  width: 100%;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--op-line);
  border-radius: 0;
  color: var(--op-text);
  background: var(--op-bg);
  box-shadow: none;
}

body.outpost-real-page-preview .dm-library-picker-categories {
  display: flex;
  gap: 0;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

body.outpost-real-page-preview .dm-library-picker-categories button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--op-line);
  border-right: 0;
  border-radius: 0;
  color: var(--op-text-muted);
  background: transparent;
  font-family: var(--op-font-mono);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.outpost-real-page-preview .dm-library-picker-categories button:last-child {
  border-right: 1px solid var(--op-line);
}

body.outpost-real-page-preview .dm-library-picker-categories button:is(:hover, :focus-visible, .active) {
  color: var(--op-bg);
  background: var(--op-text);
  outline: none;
}

body.outpost-real-page-preview .dm-library-picker-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  min-height: 0;
  overflow: hidden;
}

body.outpost-real-page-preview .dm-library-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  align-content: start;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
}

body.outpost-real-page-preview .dm-library-picker-card {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 88px;
  padding: 9px;
  border: 0;
  border-right: 1px solid var(--op-line-faint);
  border-bottom: 1px solid var(--op-line-faint);
  border-radius: 0;
  color: var(--op-text-muted);
  background: transparent;
  box-shadow: none;
  text-align: left;
  transform: none;
}

body.outpost-real-page-preview .dm-library-picker-card:is(:hover, :focus-visible, .selected) {
  background: var(--op-surface-strong);
  outline: none;
  transform: none;
}

body.outpost-real-page-preview .dm-library-picker-card.selected::after {
  content: "SELECTED";
  position: absolute;
  top: 5px;
  right: 6px;
  color: var(--op-text);
  font-family: var(--op-font-mono);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: .1em;
}

body.outpost-real-page-preview .dm-library-picker-thumb {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--op-line-faint);
  color: var(--op-text-faint);
  background: var(--op-bg);
  font-family: var(--op-font-mono);
  font-weight: 700;
}

body.outpost-real-page-preview .dm-library-picker-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.outpost-real-page-preview .dm-library-picker-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.outpost-real-page-preview .dm-library-picker-card-copy small,
body.outpost-real-page-preview .dm-library-picker-detail-title small,
body.outpost-real-page-preview .dm-library-picker-detail section > small,
body.outpost-real-page-preview .dm-library-picker-detail-empty > span {
  color: var(--op-text-faint);
  font-family: var(--op-font-mono);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.outpost-real-page-preview .dm-library-picker-card-copy b {
  overflow: hidden;
  color: var(--op-text);
  font-size: 11px;
  font-weight: 590;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .dm-library-picker-card-copy > span {
  display: -webkit-box;
  overflow: hidden;
  color: var(--op-text-faint);
  font-size: 9px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.outpost-real-page-preview .dm-library-picker-detail {
  display: grid;
  grid-template-rows: auto auto auto auto auto 1fr auto;
  align-content: start;
  gap: 13px;
  min-width: 0;
  min-height: 0;
  padding: 15px;
  overflow: auto;
  border-left: 1px solid var(--op-line);
  background: var(--op-surface);
}

body.outpost-real-page-preview .dm-library-picker-detail-art {
  display: grid;
  place-items: center;
  width: 100%;
  height: 164px;
  overflow: hidden;
  border: 1px solid var(--op-line);
  color: var(--op-text-faint);
  background: var(--op-bg);
  font-family: var(--op-font-mono);
  font-size: 28px;
}

body.outpost-real-page-preview .dm-library-picker-detail-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.outpost-real-page-preview .dm-library-picker-detail-title {
  display: grid;
  gap: 4px;
}

body.outpost-real-page-preview .dm-library-picker-detail-title b {
  color: var(--op-text);
  font-size: 18px;
  font-weight: 560;
  line-height: 1.15;
}

body.outpost-real-page-preview .dm-library-picker-detail-title code {
  overflow-wrap: anywhere;
  color: var(--op-text-faint);
  font-family: var(--op-font-mono);
  font-size: 8px;
}

body.outpost-real-page-preview .dm-library-picker-detail dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--op-line-faint);
  border-left: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview .dm-library-picker-detail dl > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  border-right: 1px solid var(--op-line-faint);
  border-bottom: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview .dm-library-picker-detail dt {
  color: var(--op-text-faint);
  font-family: var(--op-font-mono);
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.outpost-real-page-preview .dm-library-picker-detail dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--op-text);
  font-size: 10px;
}

body.outpost-real-page-preview .dm-library-picker-detail section {
  display: grid;
  gap: 5px;
}

body.outpost-real-page-preview .dm-library-picker-detail section p,
body.outpost-real-page-preview .dm-library-picker-detail-empty p {
  margin: 0;
  color: var(--op-text-muted);
  font-size: 10px;
  line-height: 1.5;
}

body.outpost-real-page-preview .dm-library-picker-detail-empty {
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 220px;
}

body.outpost-real-page-preview .dm-library-picker-apply {
  align-self: end;
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--op-text);
  border-radius: 0;
  color: var(--op-bg);
  background: var(--op-text);
  font-family: var(--op-font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.outpost-real-page-preview .dm-library-picker-footer {
  align-items: center;
}

body.outpost-real-page-preview .dm-library-picker-pages {
  display: flex;
  align-items: center;
  gap: 9px;
}

body.outpost-real-page-preview .dm-library-picker-pages button {
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--op-line);
  border-radius: 0;
  color: var(--op-text-muted);
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
}

body.outpost-real-page-preview .dm-library-picker-pages button:disabled {
  opacity: .32;
}

@media (max-width: 820px) {
  body.outpost-real-page-preview .dm-library-picker-modal {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }

  body.outpost-real-page-preview .dm-library-picker-toolbar,
  body.outpost-real-page-preview .dm-library-picker-body {
    grid-template-columns: minmax(0, 1fr);
  }

  body.outpost-real-page-preview .dm-library-picker-categories {
    grid-row: 2;
  }

  body.outpost-real-page-preview .dm-library-picker-detail {
    max-height: 260px;
    border-top: 1px solid var(--op-line);
    border-left: 0;
  }

  body.outpost-real-page-preview .dm-library-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.outpost-real-page-preview .dm-library-picker-body {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  body.outpost-real-page-preview .dm-library-picker-detail-art,
  body.outpost-real-page-preview .dm-library-picker-detail section,
  body.outpost-real-page-preview .dm-library-picker-detail dl {
    display: none;
  }

  body.outpost-real-page-preview .dm-library-picker-footer > span:first-child {
    display: none;
  }
}

@media (max-width: 680px) {
  body.outpost-real-page-preview .asset-browser-modal {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }

  body.outpost-real-page-preview .asset-browser-toolbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  body.outpost-real-page-preview .asset-browser-toolbar p {
    display: none;
  }

  body.outpost-real-page-preview .asset-browser-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* One context-navigation primitive for every primary workspace. Individual
 * pages own their labels and commands; the foundation owns the geometry. */
body.outpost-real-page-preview :is(
  #profile .op-character-context-tabs,
  #character .op-character-context-tabs,
  #party .party-context-tabs,
  #inventory .inventory-context-tabs,
  #skillbook .skill-workspace-tabs,
  #dice .dice-context-tabs,
  #encounter .encounter-context-strip,
  #dm .dm-context-tabs,
  #options .options-context-tabs
) {
  display: flex;
  align-items: stretch;
  min-height: var(--op-context-tab-height);
  overflow-x: auto;
  overflow-y: hidden;
  border-top: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
  scrollbar-width: none;
}

body.outpost-real-page-preview :is(
  #profile .op-character-context-tabs,
  #character .op-character-context-tabs,
  #party .party-context-tabs,
  #inventory .inventory-context-tabs,
  #skillbook .skill-workspace-tabs,
  #dice .dice-context-tabs,
  #encounter .encounter-context-strip,
  #dm .dm-context-tabs,
  #options .options-context-tabs
)::-webkit-scrollbar {
  display: none;
}

body.outpost-real-page-preview :is(
  #profile .op-character-context-tabs,
  #character .op-character-context-tabs,
  #party .party-context-tabs,
  #inventory .inventory-context-tabs,
  #skillbook .skill-workspace-tabs,
  #dice .dice-context-tabs,
  #encounter .encounter-context-strip,
  #dm .dm-context-tabs,
  #options .options-context-tabs
) > button {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: max-content;
  min-height: var(--op-context-tab-control-height);
  margin: 0;
  padding: var(--op-context-tab-padding);
  border: 0;
  border-right: 1px solid var(--op-line);
  border-radius: 0;
  color: var(--op-text-muted);
  background: transparent;
  box-shadow: none;
  font-family: var(--op-font-mono);
  font-size: var(--op-context-tab-font-size);
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

body.outpost-real-page-preview :is(
  #profile .op-character-context-tabs,
  #character .op-character-context-tabs,
  #party .party-context-tabs,
  #inventory .inventory-context-tabs,
  #skillbook .skill-workspace-tabs,
  #dice .dice-context-tabs,
  #encounter .encounter-context-strip,
  #dm .dm-context-tabs,
  #options .options-context-tabs
) > button:is(:hover, :focus-visible, .active) {
  color: var(--op-text);
  background: var(--op-surface-strong);
}

body.outpost-real-page-preview :is(
  #profile .op-character-context-tabs,
  #character .op-character-context-tabs,
  #party .party-context-tabs,
  #inventory .inventory-context-tabs,
  #skillbook .skill-workspace-tabs,
  #dice .dice-context-tabs,
  #encounter .encounter-context-strip,
  #dm .dm-context-tabs,
  #options .options-context-tabs
) > button.active {
  box-shadow: inset 0 -2px var(--op-accent);
}

body.outpost-real-page-preview :is(
  #profile .op-character-context-tabs,
  #character .op-character-context-tabs,
  #party .party-context-tabs,
  #inventory .inventory-context-tabs,
  #skillbook .skill-workspace-tabs,
  #dice .dice-context-tabs,
  #encounter .encounter-context-strip,
  #dm .dm-context-tabs,
  #options .options-context-tabs
) > button:disabled {
  color: var(--op-text-faint);
  background: transparent;
  box-shadow: none;
  opacity: .5;
}

body.outpost-real-page-preview :is(
  #profile .op-character-context-tabs,
  #character .op-character-context-tabs,
  #party .party-context-tabs,
  #inventory .inventory-context-tabs,
  #skillbook .skill-workspace-tabs,
  #dice .dice-context-tabs,
  #encounter .encounter-context-strip,
  #dm .dm-context-tabs,
  #options .options-context-tabs
) > span {
  align-self: center;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0 14px;
  color: var(--op-text-faint);
  font: var(--op-context-meta-font-size) var(--op-font-mono);
  letter-spacing: .1em;
  white-space: nowrap;
}

/* Global Quick Roll is a movable utility, not a page drawer. Its placement
 * remains local browser state; this layer owns only the flat presentation. */
body.outpost-real-page-preview .quick-roll-panel {
  position: fixed;
  z-index: 79;
  top: 50%;
  right: 158px;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(90px, 1fr);
  gap: 0;
  width: min(460px, calc(100vw - 190px));
  height: min(680px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
  border: var(--op-workspace-rule);
  border-radius: 0;
  color: var(--op-text);
  background: color-mix(in srgb, var(--op-bg) 96%, transparent);
  box-shadow: none;
  backdrop-filter: none;
  transform: translateY(-50%);
  touch-action: none;
  user-select: none;
}

body.outpost-real-page-preview .quick-roll-panel.dragging {
  box-shadow: inset 2px 0 var(--op-accent);
}

/* The Roll Console is one sharp utility surface. Keep legacy form/button
 * radii from leaking back into its header, command, or pacing controls. */
body.outpost-real-page-preview .quick-roll-panel :is(button, input) {
  border-radius: 0;
}

body.outpost-real-page-preview :is(.quick-roll-head, .quick-roll-command-row) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border-bottom: var(--op-workspace-rule-faint);
}

body.outpost-real-page-preview .quick-roll-head {
  cursor: move;
}

body.outpost-real-page-preview .quick-roll-result-stage {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  min-height: 132px;
  border-bottom: var(--op-workspace-rule);
  background: color-mix(in srgb, var(--op-bg-raised) 42%, transparent);
}

body.outpost-real-page-preview .quick-roll-result-die {
  display: grid;
  place-items: center;
  border-right: var(--op-workspace-rule);
}

body.outpost-real-page-preview .quick-roll-result-die::before {
  content: "";
  grid-area: 1 / 1;
  width: 70px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--op-text) 48%, var(--op-line-strong));
  background: color-mix(in srgb, var(--op-text) 11%, var(--op-bg-raised));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--op-bg) 72%, transparent),
    0 0 0 1px color-mix(in srgb, var(--op-text) 5%, transparent);
  clip-path: polygon(50% 0, 91% 22%, 91% 78%, 50% 100%, 9% 78%, 9% 22%);
}

body.outpost-real-page-preview .quick-roll-result-die b {
  z-index: 1;
  grid-area: 1 / 1;
  color: var(--op-text);
  font: 500 30px/1 var(--op-font-mono);
  font-variant-numeric: tabular-nums;
}

@keyframes op-quick-roll-roulette {
  0% { opacity: .42; transform: translateY(-4px); }
  50% { opacity: 1; transform: translateY(0); }
  100% { opacity: .56; transform: translateY(4px); }
}

body.outpost-real-page-preview .quick-roll-result-die b.roulette {
  animation: op-quick-roll-roulette 120ms steps(2, end) infinite;
}

body.outpost-real-page-preview .quick-roll-result-copy {
  display: grid;
  align-content: center;
  min-width: 0;
  gap: 7px;
  padding: 18px;
}

body.outpost-real-page-preview .quick-roll-result-copy > small {
  overflow: hidden;
  color: var(--op-text);
  font: 600 10px var(--op-font-mono);
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .quick-roll-result-copy > strong {
  width: max-content;
  color: var(--op-text-muted);
  font: 8px var(--op-font-mono);
  letter-spacing: .1em;
}

body.outpost-real-page-preview .quick-roll-result-stage[data-sync-state="authoritative"] .quick-roll-result-copy > strong {
  color: var(--op-success);
}

body.outpost-real-page-preview .quick-roll-result-stage[data-sync-state="syncing"] .quick-roll-result-copy > strong {
  color: var(--op-warning);
}

body.outpost-real-page-preview .quick-roll-result-copy p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--op-text-faint);
  font: 9px/1.45 var(--op-font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .quick-roll-pacing {
  display: grid;
  gap: 0;
  border-bottom: var(--op-workspace-rule);
}

body.outpost-real-page-preview .quick-roll-pacing header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  padding: 7px 10px;
  color: var(--op-text-faint);
  font: 8px var(--op-font-mono);
  letter-spacing: .08em;
}

body.outpost-real-page-preview .quick-roll-pacing header small {
  color: var(--op-text-faint);
  font: inherit;
  letter-spacing: 0;
}

body.outpost-real-page-preview .quick-roll-pacing > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.outpost-real-page-preview .quick-roll-pacing button {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 48px;
  padding: 8px 10px;
  border: 0;
  border-top: var(--op-workspace-rule-faint);
  border-right: var(--op-workspace-rule-faint);
  border-radius: 0;
  color: var(--op-text-muted);
  background: transparent;
  box-shadow: none;
  font: 600 8px var(--op-font-mono);
  letter-spacing: .07em;
}

body.outpost-real-page-preview .quick-roll-pacing button:last-child {
  border-right: 0;
}

body.outpost-real-page-preview .quick-roll-pacing button small {
  color: var(--op-text-faint);
  font: 8px var(--op-font-mono);
  letter-spacing: 0;
}

body.outpost-real-page-preview .quick-roll-pacing button:is(:hover, :focus-visible, .active) {
  color: var(--op-text);
  background: var(--op-surface-strong);
}

body.outpost-real-page-preview .quick-roll-pacing button.active {
  box-shadow: inset 0 -2px var(--op-accent);
}

body.outpost-real-page-preview :is(.quick-roll-head button, .quick-roll-command-row button) {
  min-height: 34px;
  border: var(--op-workspace-rule);
  border-radius: 0;
  color: var(--op-text-muted);
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview .quick-roll-command-row input {
  min-height: 38px;
  border: var(--op-workspace-rule);
  border-radius: 0;
  color: var(--op-text);
  background: color-mix(in srgb, var(--op-bg-raised) 58%, transparent);
  box-shadow: none;
}

body.outpost-real-page-preview :is(.quick-roll-head button, .quick-roll-command-row button, .quick-roll-command-row input) {
  user-select: auto;
}

body.outpost-real-page-preview .quick-roll-history {
  display: grid;
  gap: 0;
  min-height: 0;
  max-height: none;
  overflow: auto;
  user-select: text;
}

body.outpost-real-page-preview .quick-roll-history .history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  grid-template-areas:
    "identity total"
    "breakdown time";
  gap: 9px 12px;
  align-items: start;
  min-height: 70px;
  padding: 11px 12px 12px;
  border: 0;
  border-bottom: var(--op-workspace-rule-faint);
  border-radius: 0;
  background: transparent;
  font-size: 10px;
}

body.outpost-real-page-preview .quick-roll-history :is(.history-roller, .history-source) {
  min-width: 0;
  overflow: hidden;
  color: var(--op-text);
  text-overflow: ellipsis;
}

body.outpost-real-page-preview .quick-roll-history .history-roller {
  grid-area: identity;
  display: grid;
  gap: 5px;
  min-height: 28px;
  align-content: start;
}

body.outpost-real-page-preview .quick-roll-history .history-roller > small,
body.outpost-real-page-preview .quick-roll-history .history-source,
body.outpost-real-page-preview .quick-roll-history .history-breakdown {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .quick-roll-history .history-source {
  color: var(--op-text);
  font-weight: 600;
  line-height: 1.3;
}

body.outpost-real-page-preview .quick-roll-history .history-roller > small {
  color: var(--op-text-faint);
  font: 8px/1.25 var(--op-font-mono);
}

body.outpost-real-page-preview .quick-roll-history .history-row > b {
  grid-area: total;
  color: var(--op-text);
  font-family: var(--op-font-mono);
  font-size: 14px;
  text-align: center;
}

body.outpost-real-page-preview .quick-roll-history .history-breakdown {
  grid-area: breakdown;
  min-width: 0;
  color: var(--op-text-muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: normal;
}

body.outpost-real-page-preview .quick-roll-history .history-row small {
  grid-area: time;
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}

body.outpost-real-page-preview .quick-roll-history .history-roller > small {
  grid-area: auto;
  justify-self: start;
  text-align: left;
}

/* Runtime Quick Bar pilot: same confirmed controls, new command-plane material.
 * The existing renderer and event bindings remain authoritative. */
body.outpost-real-page-preview .quick-action-bar,
body.outpost-real-page-preview.profile-mode .quick-action-bar {
  position: fixed;
  z-index: 86;
  left: calc(50% + var(--op-shell-center-shift));
  right: auto;
  bottom: 14px;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  width: min(1120px, calc(100vw - var(--op-shell-main-left) - var(--op-shell-pad)));
  min-width: 0;
  min-height: 76px;
  max-height: 90px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  border-top: var(--op-workspace-rule);
  border-bottom: var(--op-workspace-rule);
  border-radius: 0;
  color: var(--op-text);
  background-color: color-mix(in srgb, var(--op-bg) 94%, transparent);
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
  transform: translateX(-50%);
  scrollbar-width: none;
}

body.outpost-real-page-preview .quick-action-bar::-webkit-scrollbar,
body.outpost-real-page-preview .quick-action-bar .quick-icon-strip::-webkit-scrollbar {
  display: none;
}

body.outpost-real-page-preview .quick-action-bar > * {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

body.outpost-real-page-preview .quick-action-bar > * + * {
  border-left: var(--op-workspace-rule-faint);
}

body.outpost-real-page-preview .quick-action-bar .quick-avatar {
  display: grid;
  place-items: center;
  width: 68px;
  height: auto;
  padding: 10px;
  border: 0;
  background: transparent;
}

body.outpost-real-page-preview .quick-action-bar .quick-avatar :is(img, span) {
  width: 44px;
  height: 44px;
  border-radius: 0;
  object-fit: cover;
}

body.outpost-real-page-preview .quick-action-bar .quick-status-card {
  position: relative;
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 58px;
  min-height: 0;
  padding: 9px 10px;
  border: 0;
  background: transparent;
}

body.outpost-real-page-preview .quick-action-bar .quick-status-card.resource-card {
  grid-template-columns: minmax(0, 1fr) auto;
  width: 122px;
}

body.outpost-real-page-preview .quick-action-bar .quick-status-card > span {
  color: var(--op-text-faint);
  font-family: var(--op-font-mono);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.outpost-real-page-preview .quick-action-bar .quick-status-card > b {
  color: var(--op-text);
  font-family: var(--op-font-mono);
  font-size: 11px;
  font-weight: 650;
}

body.outpost-real-page-preview .quick-action-bar .quick-status-card.resource-card > i {
  grid-column: 1 / -1;
  position: relative;
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: 0;
  background: var(--op-line-faint);
}

body.outpost-real-page-preview .quick-action-bar .quick-status-card.resource-card > i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill);
  background: var(--op-danger);
}

body.outpost-real-page-preview .quick-action-bar .quick-status-card.resource-card.mp-card > i::after {
  background: #78c7ef;
}

body.outpost-real-page-preview .quick-action-bar .quick-status-card.resource-card > input {
  grid-column: 1 / -1;
  width: 100%;
  height: 22px;
  min-height: 0;
  padding: 0 6px;
  border: 0;
  border-top: var(--op-workspace-rule-faint);
  border-radius: 0;
  color: var(--op-text-muted);
  background: transparent;
  text-align: center;
}

body.outpost-real-page-preview .quick-action-bar .quick-status-card.compact {
  width: 58px;
  padding-inline: 7px;
  text-align: center;
}

body.outpost-real-page-preview .quick-action-bar .quick-status-card.spent {
  opacity: 0.42;
}

body.outpost-real-page-preview .quick-action-bar .quick-icon-strip {
  flex: 1 0 220px;
  display: flex;
  align-items: stretch;
  min-width: 220px;
  max-width: none;
  min-height: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  background: transparent;
}

body.outpost-real-page-preview .quick-action-bar .quick-icon-strip > button,
body.outpost-real-page-preview .quick-action-bar .battle-skill-card {
  flex: 0 0 68px;
  width: 68px;
  min-width: 68px;
  min-height: 74px;
  padding: 7px;
  border: 0;
  border-right: var(--op-workspace-rule-faint);
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  transform: none;
}

body.outpost-real-page-preview .quick-action-bar .quick-icon-action img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.outpost-real-page-preview .quick-action-bar .quick-icon-action.skill-action {
  position: relative;
  isolation: isolate;
  padding: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--op-text) 3%, var(--op-surface-strong));
}

body.outpost-real-page-preview .quick-action-bar .quick-icon-action.skill-action .battle-action-card-art {
  z-index: 0;
}

body.outpost-real-page-preview .quick-action-bar .quick-icon-action.skill-action .battle-action-card-glyph {
  font-size: 25px;
}

body.outpost-real-page-preview .quick-action-bar .quick-icon-action.skill-action.has-card-art .battle-action-card-glyph {
  opacity: 0;
}

body.outpost-real-page-preview .quick-action-bar .quick-icon-action.skill-action::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 18%;
  background: rgba(4, 5, 5, .58);
  pointer-events: none;
}

body.outpost-real-page-preview :is(.quick-action-bar .quick-icon-action, .quick-side-bar button) {
  position: relative;
}

body.outpost-real-page-preview :is(.quick-action-bar .quick-icon-action, .quick-side-bar button).pending-active {
  color: var(--op-text);
  background: var(--op-surface-strong);
  box-shadow: inset 0 -2px var(--op-accent);
  transform: translate3d(0, -3px, 0);
  z-index: 2;
}

body.outpost-real-page-preview :is(.quick-action-bar .quick-icon-action, .quick-side-bar button).pending-dim {
  opacity: 0.38;
}

body.outpost-real-page-preview :is(.quick-action-bar .quick-icon-action, .quick-side-bar button).action-unavailable {
  opacity: 0.28;
  cursor: not-allowed;
}

body.outpost-real-page-preview :is(.quick-action-bar .quick-icon-action, .quick-side-bar button).needs-target {
  box-shadow: inset 0 -2px var(--op-accent);
}

body.outpost-real-page-preview :is(.quick-action-bar .quick-icon-action, .quick-side-bar button).out-of-range {
  color: var(--op-danger);
  box-shadow: inset 0 -2px var(--op-danger);
}

body.outpost-real-page-preview :is(.quick-action-bar .quick-icon-action, .quick-side-bar button)[data-action-cost]::after {
  content: attr(data-action-cost);
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  min-height: 16px;
  padding: 2px 3px;
  color: var(--op-bg);
  background: var(--op-text);
  font-family: var(--op-font-mono);
  font-size: 7px;
  line-height: 12px;
  text-align: center;
}

body.outpost-real-page-preview .quick-action-bar .quick-status-card.quick-pulse {
  animation: op-quick-status-pulse 420ms var(--op-ease) both;
}

body.outpost-real-page-preview .quick-action-bar .quick-status-card.quick-pulse.heal {
  box-shadow: inset 0 -2px var(--op-success);
}

body.outpost-real-page-preview .quick-action-bar .quick-status-card.quick-pulse.damage {
  box-shadow: inset 0 -2px var(--op-danger);
}

@keyframes op-quick-status-pulse {
  45% { transform: translate3d(0, -2px, 0); }
}

body.outpost-real-page-preview .quick-action-bar .battle-skill-hand {
  display: flex;
  flex: 1 0 auto;
  align-items: stretch;
  min-width: 0;
  padding: 0;
  gap: 0;
}

body.outpost-real-page-preview .quick-action-bar .battle-skill-card:hover,
body.outpost-real-page-preview .quick-action-bar .quick-icon-strip > button:hover {
  color: var(--op-text);
  background: var(--op-surface-strong);
  transform: translate3d(0, -2px, 0);
}

body.outpost-real-page-preview .quick-action-bar .battle-skill-card b {
  max-width: 8ch;
  overflow: hidden;
  color: var(--op-text);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .quick-action-bar .battle-skill-card small {
  color: var(--op-text-faint);
  font-size: 7px;
}

body.outpost-real-page-preview .quick-action-bar > button {
  flex: 0 0 64px;
  min-width: 64px;
  min-height: 74px;
  padding: 7px;
  border: 0;
  border-radius: 0;
  color: var(--op-text-muted);
  background: transparent;
  box-shadow: none;
  font-family: var(--op-font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: none;
}

body.outpost-real-page-preview .quick-action-bar > button:not(:disabled):hover,
body.outpost-real-page-preview .quick-action-bar > button.active {
  color: var(--op-text);
  background: var(--op-surface-strong);
  transform: translate3d(0, -2px, 0);
}

body.outpost-real-page-preview .quick-action-bar > button:disabled {
  opacity: 0.34;
}

/* Design Lab command plane: identity, resources, economy, actions, context. */
body.outpost-real-page-preview .quick-action-bar,
body.outpost-real-page-preview.profile-mode .quick-action-bar {
  display: grid;
  grid-template-columns: 190px 150px max-content minmax(260px, 1fr) 108px;
  align-items: stretch;
  min-height: 78px;
  max-height: 94px;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--op-bg) 97%, transparent);
  box-shadow: 0 20px 50px color-mix(in srgb, #000 42%, transparent);
}

body.outpost-real-page-preview .quick-action-bar .quick-bar-group {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

body.outpost-real-page-preview .quick-action-bar .quick-identity-group {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

body.outpost-real-page-preview .quick-action-bar .quick-avatar {
  width: 48px;
  height: 48px;
  padding: 0;
  border: var(--op-workspace-rule);
}

body.outpost-real-page-preview .quick-action-bar .quick-avatar :is(img, span) {
  width: 46px;
  height: 46px;
}

body.outpost-real-page-preview .quick-action-bar .quick-identity-copy,
body.outpost-real-page-preview .quick-action-bar .quick-identity-copy :is(small, b) {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .quick-action-bar .quick-identity-copy small {
  color: var(--op-text-faint);
  font-family: var(--op-font-mono);
  font-size: 8px;
  letter-spacing: .06em;
}

body.outpost-real-page-preview .quick-action-bar .quick-identity-copy b {
  margin-top: 5px;
  color: var(--op-text);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

body.outpost-real-page-preview .quick-action-bar .quick-resource-group {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 7px 11px;
}

body.outpost-real-page-preview .quick-action-bar .quick-resource-group .quick-status-card.resource-card {
  grid-template-columns: 24px minmax(0, 1fr) 31px;
  width: auto;
  min-height: 30px;
  padding: 1px 0;
}

body.outpost-real-page-preview .quick-action-bar .quick-resource-group .quick-status-card.resource-card > b {
  text-align: right;
}

body.outpost-real-page-preview .quick-action-bar .quick-resource-group .quick-temp-hp {
  overflow: hidden;
  color: var(--op-text-muted);
  font-family: var(--op-font-mono);
  font-size: 6px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .quick-action-bar .quick-resource-group .quick-status-card.resource-card > i {
  grid-column: 1 / 3;
  height: 2px;
}

body.outpost-real-page-preview .quick-action-bar .quick-resource-group .quick-status-card.resource-card > input {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: stretch;
  width: 31px;
  height: auto;
  min-height: 0;
  padding: 0 3px;
  border: 0;
  border-left: var(--op-workspace-rule-faint);
  font-family: var(--op-font-mono);
  font-size: 8px;
}

body.outpost-real-page-preview .quick-action-bar .quick-economy-group {
  display: flex;
  align-items: stretch;
}

body.outpost-real-page-preview .quick-action-bar .quick-economy-group .quick-status-card.compact {
  min-width: 52px;
  width: auto;
  padding: 8px 9px;
  border-right: var(--op-workspace-rule-faint);
}

body.outpost-real-page-preview .quick-action-bar .quick-command-group {
  display: flex;
  align-items: stretch;
  min-width: 0;
  padding: 5px;
}

body.outpost-real-page-preview .quick-action-bar .quick-command-group .quick-icon-strip {
  flex: 1 1 auto;
  min-width: 0;
}

body.outpost-real-page-preview .quick-action-bar .quick-command-group > .quick-primary {
  flex: 0 0 176px;
  min-width: 176px;
  min-height: 66px;
  padding: 8px 10px;
  border: 0;
  border-right: var(--op-workspace-rule-faint);
  border-radius: 0;
  color: var(--op-text);
  background: transparent;
  box-shadow: inset 2px 0 var(--op-warning);
  font-family: var(--op-font-mono);
  font-size: 8px;
  line-height: 1.45;
  text-transform: uppercase;
}

body.outpost-real-page-preview .quick-action-bar .quick-context-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.outpost-real-page-preview .quick-action-bar .quick-context-group > button {
  min-width: 0;
  min-height: 0;
  padding: 7px 5px;
  border: 0;
  border-right: var(--op-workspace-rule-faint);
  border-bottom: var(--op-workspace-rule-faint);
  border-radius: 0;
  color: var(--op-text-muted);
  background: transparent;
  box-shadow: none;
  text-transform: uppercase;
}

body.outpost-real-page-preview .quick-action-bar .quick-context-group > button :is(small, b) {
  display: block;
}

body.outpost-real-page-preview .quick-action-bar .quick-context-group > button small {
  color: var(--op-text-faint);
  font-family: var(--op-font-mono);
  font-size: 6px;
  letter-spacing: .06em;
}

body.outpost-real-page-preview .quick-action-bar .quick-context-group > button b {
  margin-top: 5px;
  color: inherit;
  font-family: var(--op-font-mono);
  font-size: 8px;
  font-weight: 650;
}

body.outpost-real-page-preview .quick-action-bar :is(.quick-context-group > button, .quick-command-group > button):not(:disabled):hover,
body.outpost-real-page-preview .quick-action-bar .quick-context-group > button.active {
  color: var(--op-text);
  background: var(--op-surface-strong);
  transform: translate3d(0, -2px, 0);
}

body.outpost-real-page-preview .quick-action-bar .quick-context-group > button[data-quick-end-turn] {
  box-shadow: inset 0 -2px var(--op-warning);
}

body.outpost-real-page-preview .quick-action-bar :is(.quick-context-group > button, .quick-command-group > button):disabled {
  opacity: .34;
}

body.outpost-real-page-preview .quick-action-bar .quick-context-group > .quick-command-initiative.rolled:disabled {
  opacity: .72;
  color: var(--op-text-muted);
  box-shadow: inset 0 -2px var(--op-line-strong);
}

/* Target Command Card -------------------------------------------------
 * One modeless decision surface and one visual owner for Weapon, Skill,
 * and Item targeting. */
body.outpost-real-page-preview .quick-pending-card {
  position: fixed;
  z-index: 154;
  right: 96px;
  bottom: calc(var(--op-quick-bar-inset-block-end) + var(--op-quick-bar-block-size) + 8px);
  display: grid;
  gap: 0;
  width: min(540px, calc(100vw - 124px));
  padding: 0;
  overflow: visible;
  border: var(--op-workspace-rule);
  border-radius: 0;
  color: var(--op-text);
  background: color-mix(in srgb, var(--op-bg) 97%, transparent);
  box-shadow: 0 12px 28px color-mix(in srgb, #000 18%, transparent);
  pointer-events: auto;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity var(--op-fast) var(--op-ease), transform var(--op-fast) var(--op-ease);
}

body.outpost-real-page-preview .quick-pending-card[hidden] {
  display: none !important;
}

body.outpost-real-page-preview .quick-pending-card.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

body.outpost-real-page-preview .quick-pending-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 40px;
  align-items: stretch;
  min-height: 34px;
  border-bottom: var(--op-workspace-rule);
}

body.outpost-real-page-preview .quick-pending-card-head > div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 0 12px;
}

body.outpost-real-page-preview .quick-pending-card-head :is(small, b, span),
body.outpost-real-page-preview .quick-pending-card footer {
  font-family: var(--op-font-mono);
  font-size: 8px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.outpost-real-page-preview .quick-pending-card-head small {
  color: var(--op-text-faint);
}

body.outpost-real-page-preview .quick-pending-card-head b {
  color: var(--op-text);
}

body.outpost-real-page-preview .quick-pending-card-head > span {
  display: grid;
  place-items: center;
  min-width: 62px;
  padding: 0 10px;
  border-left: var(--op-workspace-rule-faint);
  color: var(--op-accent);
}

body.outpost-real-page-preview .quick-pending-card-head button {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-left: var(--op-workspace-rule-faint);
  border-radius: 0;
  color: var(--op-text-muted);
  background: transparent;
  box-shadow: none;
  font-size: 17px;
}

body.outpost-real-page-preview .quick-pending-card-head button:is(:hover, :focus-visible) {
  color: var(--op-text);
  background: var(--op-surface-strong);
}

body.outpost-real-page-preview .quick-pending-card-body {
  display: grid;
  grid-template-columns: minmax(128px, .75fr) minmax(180px, 1.25fr);
}

body.outpost-real-page-preview .quick-pending-card-identity {
  min-width: 0;
  padding: 10px 12px;
}

body.outpost-real-page-preview .quick-pending-card-identity small {
  display: block;
  color: var(--op-text-faint);
  font-family: var(--op-font-mono);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.outpost-real-page-preview .quick-pending-card-identity strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--op-text);
  font-size: 14px;
  font-weight: 560;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .quick-pending-card-instruction {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-left: var(--op-workspace-rule-faint);
}

body.outpost-real-page-preview .quick-pending-card-instruction > i {
  width: 3px;
  height: 20px;
  background: var(--op-accent);
  animation: op-target-command-signal 1.8s ease-in-out infinite;
}

body.outpost-real-page-preview .quick-pending-card-instruction small,
body.outpost-real-page-preview .quick-pending-card-instruction b {
  display: block;
  font-family: var(--op-font-mono);
  text-transform: uppercase;
}

body.outpost-real-page-preview .quick-pending-card-instruction small {
  color: var(--op-text-faint);
  font-size: 7px;
  letter-spacing: .12em;
}

body.outpost-real-page-preview .quick-pending-card-instruction b {
  margin-top: 5px;
  color: var(--op-text);
  font-size: 9px;
  letter-spacing: .05em;
}

body.outpost-real-page-preview .quick-pending-card-stats {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  margin: 0;
  border-top: var(--op-workspace-rule-faint);
}

body.outpost-real-page-preview .quick-pending-card-stats > div {
  min-width: 0;
  padding: 7px 10px;
  border-right: var(--op-workspace-rule-faint);
}

body.outpost-real-page-preview .quick-pending-card-stats > div:last-child {
  border-right: 0;
}

body.outpost-real-page-preview .quick-pending-card-stats :is(dt, dd) {
  margin: 0;
  font-family: var(--op-font-mono);
  text-transform: uppercase;
}

body.outpost-real-page-preview .quick-pending-card-stats dt {
  color: var(--op-text-faint);
  font-size: 7px;
  letter-spacing: .1em;
}

body.outpost-real-page-preview .quick-pending-card-stats dd {
  margin-top: 5px;
  overflow: hidden;
  color: var(--op-text);
  font-size: 9px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes op-target-command-signal {
  50% { opacity: .34; }
}

body[data-op-motion="reduced"].outpost-real-page-preview .quick-pending-card,
body[data-op-motion="reduced"].outpost-real-page-preview .quick-pending-card-instruction > i {
  transition: none;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  body.outpost-real-page-preview .quick-pending-card,
  body.outpost-real-page-preview .quick-pending-card-instruction > i {
    transition: none;
    animation: none;
  }
}

/* Host receipt -------------------------------------------------------
 * A transient acknowledgement of the existing authoritative command
 * lifecycle. It owns no game state and never polls or rebuilds a page. */
body.outpost-real-page-preview .host-command-receipt {
  position: fixed;
  z-index: 155;
  right: 96px;
  bottom: calc(var(--op-quick-bar-inset-block-end) + var(--op-quick-bar-block-size) + 8px);
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr) auto;
  align-items: stretch;
  width: min(320px, calc(100vw - 124px));
  min-height: 42px;
  overflow: hidden;
  border: var(--op-workspace-rule);
  border-radius: 0;
  color: var(--op-text);
  background: color-mix(in srgb, var(--op-bg) 97%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, #000 16%, transparent);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 4px, 0);
  transition: opacity var(--op-fast) var(--op-ease), transform var(--op-fast) var(--op-ease);
}

body.outpost-real-page-preview .host-command-receipt.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

body.outpost-real-page-preview .host-command-receipt > i {
  background: var(--op-accent);
}

body.outpost-real-page-preview .host-command-receipt[data-status="confirmed"] > i {
  background: var(--op-success);
}

body.outpost-real-page-preview .host-command-receipt[data-status="rejected"] > i {
  background: var(--op-danger);
}

body.outpost-real-page-preview .host-command-receipt[data-status="waiting"] > i {
  background: var(--op-warning);
}

body.outpost-real-page-preview .host-command-receipt > span {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  padding: 7px 10px;
}

body.outpost-real-page-preview .host-command-receipt :is(small, b, em) {
  font-family: var(--op-font-mono);
  font-style: normal;
  line-height: 1;
  text-transform: uppercase;
}

body.outpost-real-page-preview .host-command-receipt small {
  color: var(--op-text-faint);
  font-size: 7px;
  letter-spacing: .11em;
}

body.outpost-real-page-preview .host-command-receipt b {
  overflow: hidden;
  color: var(--op-text);
  font-size: 9px;
  letter-spacing: .05em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .host-command-receipt em {
  display: grid;
  place-items: center;
  min-width: 88px;
  padding: 0 10px;
  border-left: var(--op-workspace-rule-faint);
  color: var(--op-text-muted);
  font-size: 8px;
  letter-spacing: .08em;
}

body.outpost-real-page-preview .host-command-receipt[data-status="confirmed"] em { color: var(--op-success); }
body.outpost-real-page-preview .host-command-receipt[data-status="rejected"] em { color: var(--op-danger); }
body.outpost-real-page-preview .host-command-receipt[data-status="waiting"] em { color: var(--op-warning); }

body[data-op-motion="reduced"].outpost-real-page-preview .host-command-receipt {
  transition: none;
}

/* Detached Battle Action Hand -----------------------------------------
 * Presentation only: Weapon and prepared Active actions continue to use
 * the shared pending-target and Host-authoritative execution pipeline. */
body.outpost-real-page-preview .quick-action-bar.battle-active,
body.outpost-real-page-preview.profile-mode .quick-action-bar.battle-active {
  width: min(1120px, calc(100vw - var(--op-shell-main-left) - var(--op-shell-pad)));
  min-height: 66px;
  max-height: 72px;
  grid-template-columns: 154px 158px max-content minmax(112px, 1fr) 264px;
  overflow: hidden;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-identity-group {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 10px;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-avatar,
body.outpost-real-page-preview .quick-action-bar.battle-active .quick-avatar :is(img, span) {
  width: 38px;
  height: 38px;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-resource-group {
  gap: 0;
  padding: 4px 10px;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-resource-group .quick-status-card.resource-card {
  min-height: 27px;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-economy-group .quick-status-card.compact {
  min-width: 42px;
  padding: 6px 7px;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-status-card.action-economy.unavailable {
  color: var(--op-text-faint);
  background: transparent;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-status-card.action-economy.unavailable b {
  font-weight: 500;
  opacity: .7;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-noncombat-status {
  display: none;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-command-group {
  justify-content: center;
  align-items: stretch;
  min-height: 0;
  padding: 5px;
  overflow: hidden;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-icon-strip {
  flex: 1 1 auto;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-battle-utility {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) 70px;
  width: 100%;
  min-width: 0;
  min-height: 54px;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-item-command {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 6px 7px;
  border: 0;
  border-right: var(--op-workspace-rule-faint);
  border-radius: 0;
  color: var(--op-text);
  background: color-mix(in srgb, var(--op-text) 3%, transparent);
  box-shadow: none;
  text-align: left;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-item-command:hover,
body.outpost-real-page-preview .quick-action-bar.battle-active .quick-item-command:focus-visible {
  background: var(--op-surface-strong);
  transform: none;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-item-command.empty {
  color: var(--op-text-muted);
  background: transparent;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-item-visual {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border: var(--op-workspace-rule-faint);
  color: var(--op-text-faint);
  background: color-mix(in srgb, var(--op-text) 4%, transparent);
  font: 500 16px/1 var(--op-font-mono);
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-item-visual :is(img, span) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-item-copy,
body.outpost-real-page-preview .quick-action-bar.battle-active .quick-item-copy :is(small, b) {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-item-copy small {
  color: var(--op-text-faint);
  font: 600 6px/1.2 var(--op-font-mono);
  letter-spacing: .1em;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-item-copy b {
  margin-top: 6px;
  color: inherit;
  font: 650 8px/1.2 var(--op-font-mono);
  letter-spacing: .03em;
  text-transform: uppercase;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-hand-status {
  display: grid;
  align-content: center;
  justify-items: center;
  width: 100%;
  min-height: 54px;
  padding: 5px 8px;
  border: 0;
  border-radius: 0;
  color: var(--op-text-faint);
  background: transparent;
  box-shadow: inset 0 -1px color-mix(in srgb, var(--op-text) 18%, transparent);
  font-family: var(--op-font-mono);
  text-align: center;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-battle-utility .quick-hand-status {
  width: 70px;
  padding-inline: 5px;
  box-shadow: none;
}

body.outpost-real-page-preview .quick-action-bar.battle-live:not(.battle-active) .quick-command-group {
  padding: 5px;
}

body.outpost-real-page-preview .quick-action-bar.battle-live:not(.battle-active) .quick-icon-strip {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

body.outpost-real-page-preview .quick-action-bar .quick-battle-return {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 66px;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  color: var(--op-text);
  background: color-mix(in srgb, var(--op-text) 3%, transparent);
  box-shadow: inset 2px 0 var(--op-accent);
  text-align: left;
}

body.outpost-real-page-preview .quick-action-bar.battle-live:not(.battle-active) .quick-command-group .quick-icon-strip > .quick-battle-return {
  flex: 1 1 100%;
  width: 100%;
  min-width: 100%;
  min-height: 100%;
  align-self: stretch;
}

body.outpost-real-page-preview .quick-action-bar .quick-battle-return :is(span, small, b) {
  display: block;
  min-width: 0;
}

body.outpost-real-page-preview .quick-action-bar .quick-battle-return small {
  color: var(--op-text-faint);
  font: 600 6px/1.2 var(--op-font-mono);
  letter-spacing: .1em;
}

body.outpost-real-page-preview .quick-action-bar .quick-battle-return b {
  margin-top: 6px;
  font: 650 9px/1.2 var(--op-font-mono);
  letter-spacing: .04em;
}

body.outpost-real-page-preview .quick-action-bar .quick-battle-return strong {
  flex: 0 0 auto;
  color: var(--op-text-muted);
  font: 650 7px/1 var(--op-font-mono);
  letter-spacing: .06em;
}

body.outpost-real-page-preview .quick-action-bar .quick-battle-return:hover,
body.outpost-real-page-preview .quick-action-bar .quick-battle-return:focus-visible {
  background: var(--op-surface-strong);
  transform: none;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-hand-status small {
  font-size: 6px;
  letter-spacing: .13em;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-hand-status b {
  margin-top: 5px;
  color: var(--op-text);
  font-size: 8px;
  letter-spacing: .08em;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-hand-status:hover,
body.outpost-real-page-preview .quick-action-bar.battle-active .quick-hand-status:focus-visible {
  color: var(--op-text);
  background: var(--op-surface-strong);
  transform: none;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-context-group {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  border-left: var(--op-workspace-rule);
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-context-group > button {
  min-height: 66px;
  padding: 10px 6px 9px;
  border-right: 0;
  border-bottom: 0;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-context-group > button + button {
  border-left: var(--op-workspace-rule-faint);
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-context-group > button b {
  margin-top: 7px;
  font-size: 8px;
  letter-spacing: .04em;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-context-group > .quick-command-roll {
  color: var(--op-text-muted);
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-context-group > .quick-command-end {
  color: var(--op-text);
  box-shadow: inset 0 -2px var(--op-warning);
}

body.outpost-real-page-preview .quick-action-bar .quick-context-group > .quick-death-save {
  color: var(--op-text);
  box-shadow: inset 0 -2px var(--op-danger);
}

body.outpost-real-page-preview .quick-action-bar .quick-context-group > .quick-death-save:is(:hover, :focus-visible):not(:disabled) {
  box-shadow: inset 0 -3px var(--op-danger);
}

body.outpost-real-page-preview .battle-action-hand {
  position: fixed;
  z-index: 85;
  left: calc(50% + var(--op-shell-center-shift));
  bottom: 82px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(720px, calc(100vw - var(--op-shell-main-left) - 42px));
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--op-text);
  background: transparent;
  pointer-events: none;
  transform: translateX(-50%);
}

body.outpost-real-page-preview .battle-action-hand[hidden] {
  display: none !important;
}

body.outpost-real-page-preview[data-op-quick-bar="off"] .battle-action-hand {
  bottom: 16px;
}

body.outpost-real-page-preview .battle-hand-header {
  position: absolute;
  z-index: 70;
  right: 8px;
  bottom: 112px;
  left: 8px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  min-height: 23px;
  padding: 0 8px 3px;
  border: 0;
  color: var(--op-text-faint);
  pointer-events: auto;
}

body.outpost-real-page-preview .battle-hand-header > span :is(small, b) {
  display: block;
  font-family: var(--op-font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

body.outpost-real-page-preview .battle-hand-header > span small {
  font-size: 6px;
}

body.outpost-real-page-preview .battle-hand-header > span b {
  margin-top: 2px;
  color: var(--op-text-muted);
  font-size: 7px;
  font-weight: 650;
}

body.outpost-real-page-preview .battle-hand-modes,
body.outpost-real-page-preview .quick-side-mode-grid {
  display: flex;
  align-items: stretch;
  gap: 0;
}

body.outpost-real-page-preview :is(.battle-hand-modes, .quick-side-mode-grid) button {
  min-width: 48px;
  min-height: 24px;
  padding: 5px 8px;
  border: 0;
  border-left: var(--op-workspace-rule-faint);
  border-radius: 0;
  color: var(--op-text-faint);
  background: color-mix(in srgb, var(--op-bg) 90%, transparent);
  box-shadow: none;
  font: 700 6px/1 var(--op-font-mono);
  letter-spacing: .08em;
}

body.outpost-real-page-preview :is(.battle-hand-modes, .quick-side-mode-grid) button:is(:hover, :focus-visible),
body.outpost-real-page-preview :is(.battle-hand-modes, .quick-side-mode-grid) button[aria-pressed="true"] {
  color: var(--op-text);
  background: var(--op-surface-strong);
  box-shadow: inset 0 -1px var(--op-text);
  transform: none;
}

body.outpost-real-page-preview .battle-action-card-row {
  isolation: isolate;
  display: flex;
  align-items: end;
  justify-content: center;
  min-width: 0;
  min-height: 142px;
  padding: 4px 38px 0;
  overflow: visible;
  perspective: 1000px;
  pointer-events: none;
}

body.outpost-real-page-preview .battle-action-card {
  position: relative;
  flex: 0 0 120px;
  width: 120px;
  min-width: 120px;
  height: 166px;
  min-height: 166px;
  margin: 0 0 0 -18px;
  padding: 0;
  overflow: hidden;
  border: var(--op-workspace-rule);
  border-bottom-color: color-mix(in srgb, var(--op-text) 44%, transparent);
  border-radius: 0;
  color: var(--op-text);
  background: var(--op-surface-strong);
  box-shadow: 0 12px 30px color-mix(in srgb, #000 34%, transparent);
  transform: translate3d(0, calc(var(--card-arc, 0px) + 48px), 0) rotate(var(--card-tilt, 0deg));
  transform-origin: 50% 132%;
  transition: transform 160ms var(--op-ease), border-color 140ms var(--op-ease), opacity 140ms var(--op-ease), filter 140ms var(--op-ease), box-shadow 160ms var(--op-ease);
  touch-action: none;
  user-select: none;
  pointer-events: auto;
  z-index: var(--card-layer, 1);
}

body.outpost-real-page-preview .battle-action-card:first-child {
  margin-left: 0;
}

body.outpost-real-page-preview .battle-action-card-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--op-text-muted);
  background: color-mix(in srgb, var(--op-text) 3%, var(--op-surface-strong));
}

body.outpost-real-page-preview .battle-action-card-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

body.outpost-real-page-preview .battle-action-card-art img[hidden] {
  display: none !important;
}

body.outpost-real-page-preview .battle-action-card-glyph {
  font-size: 34px;
  opacity: .66;
}

body.outpost-real-page-preview .battle-action-card.has-card-art .battle-action-card-glyph {
  opacity: 0;
}

body.outpost-real-page-preview .battle-action-card-index,
body.outpost-real-page-preview .battle-action-card-kind,
body.outpost-real-page-preview .battle-action-card::after {
  position: absolute;
  z-index: 4;
  top: 7px;
  display: grid;
  place-items: center;
  min-height: 18px;
  padding: 3px 5px;
  border: 0;
  border-radius: 0;
  color: #f5f5f2;
  background: rgba(7, 9, 9, .78);
  font: 750 6px/1 var(--op-font-mono);
  letter-spacing: .06em;
  pointer-events: none;
}

body.outpost-real-page-preview .battle-action-card-index {
  left: 7px;
  min-width: 18px;
}

body.outpost-real-page-preview .battle-action-card-kind {
  left: 30px;
  color: rgba(245, 245, 242, .72);
}

body.outpost-real-page-preview .battle-action-card::after {
  content: attr(data-card-state-label);
  right: 7px;
  bottom: auto;
  left: auto;
  width: auto;
  box-shadow: none;
}

body.outpost-real-page-preview .battle-action-card[data-card-state-label=""]::after {
  display: none;
}

body.outpost-real-page-preview .battle-action-card-copy {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  align-content: end;
  gap: 4px;
  min-height: 46px;
  padding: 7px 9px 7px;
  border-top: 1px solid rgba(245, 245, 242, .22);
  color: #f5f5f2;
  background: rgba(7, 9, 9, .70);
  text-align: left;
}

body.outpost-real-page-preview .battle-action-card-copy b {
  display: -webkit-box;
  overflow: hidden;
  color: inherit;
  font-size: 10px;
  font-weight: 720;
  line-height: 1.18;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.outpost-real-page-preview .battle-action-card-copy small {
  display: flex;
  gap: 4px;
  overflow: hidden;
  color: rgba(245, 245, 242, .66);
  font: 6px/1.2 var(--op-font-mono);
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .battle-action-card-copy small span {
  min-width: 0;
  padding-right: 4px;
  border-right: 1px solid rgba(245, 245, 242, .22);
}

body.outpost-real-page-preview .battle-action-card-copy small span:last-child {
  padding-right: 0;
  border-right: 0;
}

body.outpost-real-page-preview .battle-action-card:not(.action-unavailable):is(:hover, :focus-visible) {
  z-index: 80;
  border-color: color-mix(in srgb, var(--op-text) 80%, transparent);
  box-shadow: 0 34px 64px color-mix(in srgb, #000 58%, transparent), inset 0 -2px var(--op-text);
  transform: translate3d(0, -18px, 32px) rotate(0deg) scale(1.065);
}

body.outpost-real-page-preview .battle-action-card.pending-active {
  z-index: 82;
  box-shadow: 0 34px 64px color-mix(in srgb, #000 58%, transparent), inset 0 -2px var(--op-text);
  transform: translate3d(0, -16px, 28px) rotate(0deg) scale(1.055);
}

body.outpost-real-page-preview .battle-action-card.pending-dim {
  opacity: .42;
  transform: translate3d(0, calc(var(--card-arc, 0px) + 54px), 0) rotate(var(--card-tilt, 0deg)) scale(.97);
}

body.outpost-real-page-preview .battle-action-card.action-unavailable {
  opacity: 1;
  filter: none;
  border-color: color-mix(in srgb, var(--op-text) 24%, transparent);
}

body.outpost-real-page-preview .battle-action-card.action-unavailable .battle-action-card-art img {
  opacity: .94;
  filter: grayscale(.08) saturate(.92) brightness(.96);
}

body.outpost-real-page-preview .battle-action-card.action-unavailable .battle-action-card-copy {
  color: rgba(245, 245, 242, .96);
  background: rgba(7, 9, 9, .74);
}

body.outpost-real-page-preview .battle-action-card.action-unavailable:is(:hover, :focus-visible) {
  z-index: 76;
  opacity: 1;
  filter: none;
  border-color: color-mix(in srgb, var(--op-text) 52%, transparent);
  transform: translate3d(0, -10px, 18px) rotate(0deg) scale(1.035);
}

body.outpost-real-page-preview .battle-action-card.action-unavailable:is(:hover, :focus-visible) .battle-action-card-art img {
  opacity: 1;
  filter: none;
}

body.outpost-real-page-preview .battle-action-card.insufficient-mp {
  border-bottom-color: color-mix(in srgb, var(--op-mp, #72d7ff) 72%, transparent);
}

body.outpost-real-page-preview .battle-action-card.waiting-turn,
body.outpost-real-page-preview .battle-action-card.spent-action {
  border-bottom-color: color-mix(in srgb, var(--op-text-muted) 54%, transparent);
}

body.outpost-real-page-preview .battle-action-card.invalid-target {
  border-bottom-color: color-mix(in srgb, var(--op-warning) 62%, transparent);
}

body.outpost-real-page-preview .battle-action-hand.mode-full {
  z-index: 92;
  left: var(--op-shell-main-left);
  right: var(--op-shell-pad);
  width: auto;
  padding: 8px 12px 12px;
  border-top: var(--op-workspace-rule);
  border-bottom: var(--op-workspace-rule);
  background: color-mix(in srgb, var(--op-bg) 96%, transparent);
  box-shadow: 0 -22px 54px color-mix(in srgb, #000 28%, transparent);
  transform: none;
}

body.outpost-real-page-preview .battle-action-hand.mode-full .battle-hand-header {
  padding-inline: 0;
}

body.outpost-real-page-preview .battle-action-hand.mode-full .battle-action-card-row {
  justify-content: center;
  min-height: 216px;
  padding: 2px 12px 0;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
}

body.outpost-real-page-preview .battle-action-hand.mode-full .battle-action-card {
  flex-basis: 148px;
  width: 148px;
  min-width: 148px;
  height: 206px;
  min-height: 206px;
  margin-left: 8px;
  transform: none;
}

body.outpost-real-page-preview .battle-action-hand.mode-full .battle-action-card:first-child {
  margin-left: 0;
}

body.outpost-real-page-preview .battle-action-hand.mode-full .battle-action-card:not(.action-unavailable):is(:hover, :focus-visible) {
  transform: translate3d(0, -10px, 24px) scale(1.045);
}

body.outpost-real-page-preview .battle-hand-empty {
  align-self: center;
  color: var(--op-text-faint);
  font: 8px/1.4 var(--op-font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  pointer-events: auto;
}

body.outpost-real-page-preview .quick-side-hand-layout .quick-side-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 8px;
  border-top: var(--op-workspace-rule-faint);
  border-bottom: var(--op-workspace-rule-faint);
}

body.outpost-real-page-preview .quick-side-hand-active {
  color: var(--op-text-faint);
  font: 7px/1.45 var(--op-font-mono);
  text-transform: uppercase;
}

.battle-skill-drag-ghost.battle-action-card {
  --op-text: #f2f4f1;
  --op-text-faint: #98a09d;
  --op-bg: #070909;
  --op-surface-strong: #101414;
  --op-workspace-rule: 1px solid rgba(238, 243, 240, .48);
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  display: block;
  width: 142px;
  min-width: 142px;
  height: 196px;
  min-height: 196px;
  margin: 0;
  opacity: 1;
  filter: none;
  pointer-events: none;
  transform: translate3d(var(--drag-x, -200px), var(--drag-y, -200px), 0) translate(-50%, -74%) rotate(-1.5deg) scale(1.045);
  transform-origin: 50% 100%;
  transition: border-color 90ms linear, box-shadow 90ms linear, opacity 140ms var(--op-ease), transform 45ms linear;
  will-change: transform;
}

.battle-skill-drag-ghost.battle-action-card[data-drop-state="valid"] {
  border-color: #b9f6d2;
  box-shadow: 0 32px 70px rgba(0, 0, 0, .62), 0 0 0 2px rgba(126, 235, 171, .22);
}

.battle-skill-drag-ghost.battle-action-card[data-drop-state="invalid"] {
  border-color: rgba(255, 132, 132, .7);
}

.battle-skill-drag-ghost.battle-action-card.returning {
  opacity: 0;
  transform: translate3d(var(--drag-x, -200px), calc(var(--drag-y, -200px) + 22px), 0) translate(-50%, -74%) scale(.86);
}

.battle-skill-drag-ghost .battle-skill-drag-readout {
  position: absolute;
  z-index: 8;
  top: calc(100% + 7px);
  left: 50%;
  width: max-content;
  max-width: 210px;
  padding: 6px 8px;
  overflow: hidden;
  border: 1px solid rgba(238, 243, 240, .24);
  color: #f2f4f1;
  background: rgba(7, 9, 9, .95);
  font: 700 7px/1.2 var(--op-font-mono, monospace);
  letter-spacing: .06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}

body.battle-skill-card-dragging,
body.battle-skill-card-dragging * {
  cursor: grabbing !important;
}

body.battle-skill-drop-valid .battle-skill-drag-readout {
  border-color: rgba(126, 235, 171, .48);
  color: #b9f6d2;
}

@media (max-width: 1040px) {
  body.outpost-real-page-preview .battle-action-hand {
    width: min(680px, calc(100vw - var(--op-shell-main-left) - 24px));
  }

  body.outpost-real-page-preview .battle-action-card {
    flex-basis: 112px;
    width: 112px;
    min-width: 112px;
    height: 158px;
    min-height: 158px;
    margin-left: -21px;
  }
}

@media (max-width: 820px) {
  body.outpost-real-page-preview .battle-action-hand,
  body.outpost-real-page-preview .battle-action-hand.mode-full {
    right: 8px;
    left: 8px;
    width: auto;
    transform: none;
  }

  body.outpost-real-page-preview .battle-action-card-row,
  body.outpost-real-page-preview .battle-action-hand.mode-full .battle-action-card-row {
    justify-content: start;
    padding-inline: 12px;
    overflow-x: auto;
    overflow-y: visible;
  }

  body.outpost-real-page-preview .battle-action-card,
  body.outpost-real-page-preview .battle-action-hand.mode-full .battle-action-card {
    flex-basis: 112px;
    width: 112px;
    min-width: 112px;
    height: 158px;
    min-height: 158px;
    margin-left: 6px;
    transform: translate3d(0, 38px, 0);
  }

  body.outpost-real-page-preview .battle-action-hand.mode-full .battle-action-card {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.outpost-real-page-preview .battle-action-card,
  .battle-skill-drag-ghost.battle-action-card {
    transition-duration: .01ms !important;
  }
}

/* Side actions are a compact field rail, not the rounded legacy drawer. */
body.outpost-real-page-preview .quick-side-bar {
  position: fixed;
  z-index: 78;
  top: 50%;
  right: 0;
  display: grid;
  grid-template-columns: 34px 176px;
  gap: 0;
  width: 210px;
  max-height: min(620px, calc(100dvh - 150px));
  padding: 0;
  overflow: hidden;
  border: var(--op-workspace-rule);
  border-right: 0;
  border-radius: 0;
  color: var(--op-text);
  background: color-mix(in srgb, var(--op-bg) 97%, transparent);
  background-image: none;
  box-shadow: 0 20px 48px color-mix(in srgb, #000 34%, transparent);
  backdrop-filter: none;
  opacity: .76;
  transform: translate3d(176px, -50%, 0);
  transition: transform var(--op-fast) var(--op-ease), opacity var(--op-fast) var(--op-ease);
}

body.outpost-real-page-preview .quick-side-bar::before {
  content: none;
}

body.outpost-real-page-preview .quick-side-bar:hover,
body.outpost-real-page-preview .quick-side-bar:focus-within {
  border-color: var(--op-line-strong);
  opacity: 1;
  transform: translate3d(0, -50%, 0);
}

body.outpost-real-page-preview .quick-side-rail-tab {
  display: grid;
  place-content: center;
  gap: 7px;
  min-height: 150px;
  border-right: var(--op-workspace-rule);
  background: var(--op-surface);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

body.outpost-real-page-preview .quick-side-rail-tab small,
body.outpost-real-page-preview .quick-side-rail-tab b {
  color: var(--op-text-faint);
  font-family: var(--op-font-mono);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: .12em;
}

body.outpost-real-page-preview .quick-side-rail-tab b {
  color: var(--op-text);
  font-size: 8px;
}

body.outpost-real-page-preview .quick-side-rail-content {
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--op-line-strong) transparent;
}

body.outpost-real-page-preview .quick-side-section {
  display: grid;
  gap: 0;
  padding: 8px;
  border-bottom: var(--op-workspace-rule-faint);
}

body.outpost-real-page-preview .quick-side-title {
  min-height: 20px;
  color: var(--op-text-faint);
  font-family: var(--op-font-mono);
  font-size: 7px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.outpost-real-page-preview .quick-side-bar button {
  display: grid;
  justify-items: start;
  min-width: 0;
  min-height: 38px;
  padding: 7px 8px;
  overflow: hidden;
  border: 0;
  border-top: var(--op-workspace-rule-faint);
  border-radius: 0;
  color: var(--op-text);
  background: transparent;
  box-shadow: none;
  text-align: left;
  transform: none;
}

body.outpost-real-page-preview .quick-side-bar button:not(:disabled):hover,
body.outpost-real-page-preview .quick-side-bar button:focus-visible {
  background: var(--op-surface-strong);
  transform: translate3d(-2px, 0, 0);
}

body.outpost-real-page-preview .quick-side-bar button :is(small, b) {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .quick-side-bar button small {
  color: var(--op-text-faint);
  font-family: var(--op-font-mono);
  font-size: 6px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

body.outpost-real-page-preview .quick-side-bar button b {
  margin-top: 4px;
  color: var(--op-text);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .02em;
}

body.outpost-real-page-preview .quick-side-bar .subtle {
  display: block;
  padding: 8px;
  color: var(--op-text-faint);
  font-family: var(--op-font-mono);
  font-size: 7px;
  line-height: 1.55;
}

body.outpost-real-page-preview .quick-side-roll-summary {
  display: grid;
  gap: 4px;
  padding: 6px 8px 9px;
  border-top: var(--op-workspace-rule-faint);
}

body.outpost-real-page-preview .quick-side-roll-summary b {
  color: var(--op-text);
  font: 600 9px var(--op-font-mono);
  letter-spacing: .06em;
}

body.outpost-real-page-preview .quick-side-roll-summary small {
  overflow: hidden;
  color: var(--op-text-faint);
  font: 7px/1.4 var(--op-font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .quick-side-bar .quick-side-timer {
  position: relative;
  gap: 7px;
  padding-block: 10px 9px;
  background: color-mix(in srgb, var(--op-surface) 56%, transparent);
  box-shadow: inset 2px 0 var(--op-line-strong);
}

body.outpost-real-page-preview .quick-side-bar .quick-side-timer[data-timer-state="live"] {
  box-shadow: inset 2px 0 var(--op-success);
}

body.outpost-real-page-preview .quick-side-module-head,
body.outpost-real-page-preview .quick-side-bar .quick-target-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

body.outpost-real-page-preview .quick-side-module-head > span,
body.outpost-real-page-preview .quick-side-bar .quick-target-head > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

body.outpost-real-page-preview .quick-side-module-head small,
body.outpost-real-page-preview .quick-side-bar .quick-target-head small,
body.outpost-real-page-preview .quick-side-bar .quick-target-facts small {
  color: var(--op-text-faint);
  font: 600 6px/1.2 var(--op-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.outpost-real-page-preview .quick-side-module-head b,
body.outpost-real-page-preview .quick-side-bar .quick-target-head b {
  display: block;
  max-width: 118px;
  overflow: hidden;
  color: var(--op-text);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .quick-side-module-head em {
  flex: none;
  padding-left: 6px;
  border-left: 1px solid var(--op-line-strong);
  color: var(--op-text-muted);
  font: normal 600 6px/1.2 var(--op-font-mono);
  letter-spacing: .09em;
}

body.outpost-real-page-preview .quick-side-timer[data-timer-state="live"] .quick-side-module-head em {
  border-left-color: var(--op-success);
  color: var(--op-success);
}

body.outpost-real-page-preview .quick-side-bar .quick-timer {
  min-height: auto;
  padding: 1px 0 3px;
  border: 0;
  border-radius: 0;
  color: var(--op-text);
  background: transparent;
  box-shadow: none;
  font-family: var(--op-font-mono);
  font-size: 23px;
  font-variant-numeric: tabular-nums;
  font-weight: 520;
  letter-spacing: .09em;
  line-height: 1;
  text-align: left;
}

body.outpost-real-page-preview .quick-side-bar .quick-timer-caption {
  padding-top: 6px;
  border-top: var(--op-workspace-rule-faint);
  color: var(--op-text-faint);
  font: 600 6px/1.2 var(--op-font-mono);
  letter-spacing: .1em;
}

body.outpost-real-page-preview .quick-side-bar .quick-target-hud {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-left: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 2px 0 var(--op-line-strong);
}

body.outpost-real-page-preview .quick-side-bar .quick-target-head i {
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
  border: 1px solid var(--op-text-muted);
}

body.outpost-real-page-preview .quick-side-bar .quick-target-head i::before,
body.outpost-real-page-preview .quick-side-bar .quick-target-head i::after {
  content: "";
  position: absolute;
  background: var(--op-bg);
}

body.outpost-real-page-preview .quick-side-bar .quick-target-head i::before {
  inset: 3px -2px;
}

body.outpost-real-page-preview .quick-side-bar .quick-target-head i::after {
  inset: -2px 3px;
}

body.outpost-real-page-preview .quick-side-bar .quick-target-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: var(--op-workspace-rule-faint);
  border-bottom: var(--op-workspace-rule-faint);
}

body.outpost-real-page-preview .quick-side-bar .quick-target-facts > span {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 7px 5px 6px;
  border-right: var(--op-workspace-rule-faint);
}

body.outpost-real-page-preview .quick-side-bar .quick-target-facts > span:first-child {
  padding-left: 0;
}

body.outpost-real-page-preview .quick-side-bar .quick-target-facts > span:last-child {
  padding-right: 0;
  border-right: 0;
}

body.outpost-real-page-preview .quick-side-bar .quick-target-facts b {
  overflow: hidden;
  color: var(--op-text);
  font: 600 7px/1.25 var(--op-font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .quick-side-bar .quick-target-range {
  display: block;
  min-width: 0;
  padding-left: 6px;
  overflow: hidden;
  border-left: 1px solid currentColor;
  color: var(--op-text-muted);
  font: 600 6px/1.35 var(--op-font-mono);
  letter-spacing: .035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .quick-side-bar .quick-target-range.range-ok {
  color: var(--op-success);
}

body.outpost-real-page-preview .quick-side-bar .quick-target-range.range-warn {
  color: var(--op-warning);
}

body.outpost-real-page-preview .quick-side-bar .quick-target-hud > button {
  min-height: 30px;
  padding-inline: 0;
}

@media (max-width: 1180px) {
  body.outpost-real-page-preview .quick-action-bar,
  body.outpost-real-page-preview.profile-mode .quick-action-bar {
    grid-template-columns: 150px 136px max-content minmax(220px, 1fr) 96px;
  }

  body.outpost-real-page-preview .quick-action-bar .quick-identity-group {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  body.outpost-real-page-preview .quick-action-bar .quick-avatar,
  body.outpost-real-page-preview .quick-action-bar .quick-avatar :is(img, span) {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 820px) {
  body.outpost-real-page-preview {
    --op-quick-bar-inset-block-end: 8px;
  }

  body.outpost-real-page-preview :is(#profile, #character, #party, #inventory, #skillbook, #dice, #encounter, #dm, #options) .op-page-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  body.outpost-real-page-preview :is(#profile, #character, #party, #inventory, #skillbook, #dice, #encounter, #dm, #options) .op-page-header-aside {
    align-self: flex-start;
  }

  body.outpost-real-page-preview :is(
    #profile .op-character-context-tabs,
    #character .op-character-context-tabs,
    #party .party-context-tabs,
    #inventory .inventory-context-tabs,
    #skillbook .skill-workspace-tabs,
    #dice .dice-context-tabs,
    #encounter .encounter-context-strip,
    #dm .dm-context-tabs,
    #options .options-context-tabs
  ) > span {
    display: none;
  }

  body.outpost-real-page-preview .app > main,
  body.outpost-real-page-preview.profile-mode .app > main {
    display: block;
    width: 100%;
    padding-top: 0;
    padding-bottom: var(--op-workspace-bottom-safe-area);
  }

  body.outpost-real-page-preview .nav-wrap,
  body.outpost-real-page-preview.profile-mode .nav-wrap {
    max-height: none;
    overflow: visible;
  }

  body.outpost-real-page-preview .app > main > .workspace-view,
  body.outpost-real-page-preview .app > main > .workspace-view.active {
    min-height: 0;
    max-width: none;
  }

  body.outpost-real-page-preview .quick-action-bar,
  body.outpost-real-page-preview.profile-mode .quick-action-bar {
    left: 8px;
    right: 8px;
    bottom: 8px;
    display: grid;
    grid-template-columns: 126px max-content minmax(230px, 1fr) 90px;
    width: auto;
    transform: none;
  }

  body.outpost-real-page-preview .quick-action-bar .quick-identity-group {
    display: none;
  }

  body.outpost-real-page-preview :is(.quick-pending-card, .host-command-receipt) {
    right: 8px;
    width: min(390px, calc(100vw - 16px));
  }
}

@media (max-width: 760px) {
  body.outpost-real-page-preview .quick-roll-panel {
    display: none !important;
  }

  body.outpost-real-page-preview .modal {
    padding: 8px;
  }

  body.outpost-real-page-preview .modal-card,
  body.outpost-real-page-preview .modal-card:is(.small-modal, .gacha-modal, .data-editor-modal, .item-editor-modal, .token-editor-modal, .visual-editor-modal, .skill-editor-modal) {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 16px);
  }
}

@media (max-width: 620px) {
  body.outpost-real-page-preview :is(#profile, #character, #party, #inventory, #skillbook, #dice, #encounter, #dm, #options) .op-page-header {
    min-height: 96px;
    padding: 8px 0 18px;
  }

  body.outpost-real-page-preview :is(#profile, #character, #party, #inventory, #skillbook, #dice, #encounter, #dm, #options) .op-page-header :is(h1, h2) {
    font-size: 30px;
  }

  body.outpost-real-page-preview :is(#profile, #character, #party, #inventory, #skillbook, #dice, #encounter, #dm, #options) .op-page-description {
    display: none;
  }
}

@media (hover: none) {
  body.outpost-real-page-preview .workspace-view button:not(:disabled):hover {
    transform: none;
  }
}

/* Retired inline Battle Skill Hand. Kept inert for one migration cycle;
 * the detached Battle Action Hand above is the sole layout owner. */
@media not all {
/* Battle Skill Hand ---------------------------------------------------
 * A compact physical hand: authored Active cards fan from the bottom,
 * lift locally, and use a detached pointer ghost while targeting. */
body.outpost-real-page-preview .quick-action-bar.battle-active,
body.outpost-real-page-preview.profile-mode .quick-action-bar.battle-active {
  width: min(1240px, calc(100vw - var(--op-shell-main-left) - var(--op-shell-pad)));
  min-height: 132px;
  max-height: 148px;
  grid-template-columns: 150px 138px max-content minmax(430px, 1fr) 100px;
  overflow: visible;
  background-color: color-mix(in srgb, var(--op-bg) 98%, transparent);
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-bar-group {
  overflow: visible;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-command-group {
  position: relative;
  align-items: end;
  min-height: 130px;
  padding: 7px 10px 5px;
  overflow: visible;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-icon-strip {
  align-items: end;
  min-height: 120px;
  overflow: visible;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .quick-icon-strip > .quick-icon-action {
  align-self: end;
  min-height: 82px;
  margin-right: 10px;
  border: var(--op-workspace-rule-faint);
}

body.outpost-real-page-preview .quick-action-bar.battle-active .battle-skill-hand {
  isolation: isolate;
  align-items: end;
  justify-content: center;
  min-width: 330px;
  min-height: 120px;
  padding: 8px 18px 3px;
  overflow: visible;
  perspective: 900px;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .battle-skill-card {
  position: relative;
  flex: 0 0 88px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 54px minmax(24px, auto) auto;
  align-content: start;
  gap: 5px;
  width: 88px;
  min-width: 88px;
  height: 112px;
  min-height: 112px;
  margin: 0 0 0 -13px;
  padding: 7px;
  overflow: hidden;
  border: var(--op-workspace-rule);
  border-bottom-color: color-mix(in srgb, var(--op-text) 36%, transparent);
  border-radius: 0;
  color: var(--op-text);
  background: color-mix(in srgb, var(--op-surface-strong) 96%, var(--op-bg));
  box-shadow: 0 12px 24px color-mix(in srgb, #000 32%, transparent);
  transform: translate3d(0, var(--card-arc, 0), 0) rotate(var(--card-tilt, 0deg));
  transform-origin: 50% 125%;
  transition: transform 150ms var(--op-ease), border-color 150ms var(--op-ease), opacity 150ms var(--op-ease), box-shadow 150ms var(--op-ease);
  touch-action: none;
  user-select: none;
  z-index: var(--card-layer, 1);
}

body.outpost-real-page-preview .quick-action-bar.battle-active .battle-skill-card:first-child {
  margin-left: 0;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .battle-skill-card:not(.action-unavailable):is(:hover, :focus-visible) {
  z-index: 40;
  border-color: color-mix(in srgb, var(--op-text) 72%, transparent);
  box-shadow: 0 24px 42px color-mix(in srgb, #000 46%, transparent), inset 0 -2px var(--op-accent);
  transform: translate3d(0, -20px, 24px) rotate(0deg) scale(1.055);
}

body.outpost-real-page-preview .quick-action-bar.battle-active .battle-skill-card.pending-active {
  z-index: 44;
  opacity: 1;
  box-shadow: 0 24px 42px color-mix(in srgb, #000 46%, transparent), inset 0 -2px var(--op-accent);
  transform: translate3d(0, -16px, 20px) rotate(0deg) scale(1.045);
}

body.outpost-real-page-preview .quick-action-bar.battle-active .battle-skill-card.pending-dim {
  opacity: 0.26;
  transform: translate3d(0, calc(var(--card-arc, 0px) + 5px), 0) rotate(var(--card-tilt, 0deg)) scale(.96);
}

body.outpost-real-page-preview .quick-action-bar.battle-active .battle-skill-card.action-unavailable {
  opacity: .42;
  filter: grayscale(.72) saturate(.35);
}

body.outpost-real-page-preview .quick-action-bar.battle-active .battle-skill-card.action-unavailable:is(:hover, :focus-visible) {
  z-index: 36;
  opacity: .74;
  border-color: color-mix(in srgb, var(--op-text) 42%, transparent);
  filter: grayscale(.48) saturate(.55);
  transform: translate3d(0, -10px, 12px) rotate(0deg) scale(1.025);
}

body.outpost-real-page-preview .quick-action-bar.battle-active .battle-skill-card-art,
.battle-skill-drag-ghost .battle-skill-card-art {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 54px;
  overflow: hidden;
  border: 0;
  border-bottom: var(--op-workspace-rule-faint);
  border-radius: 0;
  color: var(--op-text);
  background: color-mix(in srgb, var(--op-text) 4%, transparent);
  font-size: 23px;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .battle-skill-card b,
.battle-skill-drag-ghost b {
  grid-column: 1;
  grid-row: 2;
  display: -webkit-box;
  max-width: none;
  margin: 0;
  overflow: hidden;
  color: var(--op-text);
  font-size: 9px;
  font-weight: 650;
  line-height: 1.22;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .battle-skill-card small,
.battle-skill-drag-ghost small {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  overflow: hidden;
  color: var(--op-text-faint);
  font: 7px/1.25 var(--op-font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.outpost-real-page-preview .quick-action-bar.battle-active .battle-skill-card-index,
.battle-skill-drag-ghost .battle-skill-card-index {
  position: absolute;
  z-index: 2;
  top: 6px;
  left: 6px;
  right: auto;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  border: var(--op-workspace-rule);
  border-radius: 0;
  color: var(--op-bg);
  background: var(--op-text);
  font: 700 7px/1 var(--op-font-mono);
}

body.outpost-real-page-preview .quick-action-bar.battle-active .battle-skill-card::after,
.battle-skill-drag-ghost::after {
  content: attr(data-card-state-label);
  position: absolute;
  z-index: 3;
  top: 6px;
  right: 6px;
  bottom: auto;
  left: auto;
  padding: 3px 4px;
  border: 0;
  border-radius: 0;
  color: var(--op-bg);
  background: var(--op-text);
  box-shadow: none;
  font: 700 6px/1 var(--op-font-mono);
  letter-spacing: .05em;
}

.battle-skill-drag-ghost {
  --op-text: #f2f4f1;
  --op-text-faint: #98a09d;
  --op-bg: #070909;
  --op-accent: #cfd7d4;
  --op-surface-strong: #101414;
  --op-workspace-rule: 1px solid rgba(238, 243, 240, .42);
  --op-workspace-rule-faint: 1px solid rgba(238, 243, 240, .16);
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 58px minmax(26px, auto) auto;
  gap: 6px;
  width: 98px;
  min-width: 98px;
  height: 124px;
  min-height: 124px;
  padding: 8px;
  overflow: visible;
  border: var(--op-workspace-rule);
  border-radius: 0;
  color: var(--op-text);
  background: var(--op-surface-strong);
  box-shadow: 0 32px 70px rgba(0, 0, 0, .62);
  pointer-events: none;
  transform: translate3d(var(--drag-x, -200px), var(--drag-y, -200px), 0) translate(-50%, -72%) rotate(-1.5deg) scale(1.06);
  transform-origin: 50% 100%;
  transition: border-color 90ms linear, box-shadow 90ms linear, opacity 140ms var(--op-ease), transform 45ms linear;
  will-change: transform;
}

body.outpost-real-page-preview[data-outpost-theme="light"] > .battle-skill-drag-ghost,
body.outpost-real-page-preview[data-op-theme="light"] > .battle-skill-drag-ghost {
  --op-text: #111514;
  --op-text-faint: #5f6966;
  --op-bg: #f2f1ed;
  --op-accent: #2d3c38;
  --op-surface-strong: #fbfaf7;
  --op-workspace-rule: 1px solid rgba(17, 21, 20, .44);
  --op-workspace-rule-faint: 1px solid rgba(17, 21, 20, .16);
  box-shadow: 0 28px 58px rgba(25, 30, 28, .24);
}

body.outpost-real-page-preview[data-outpost-theme="light"] > .battle-skill-drag-ghost .battle-skill-drag-readout,
body.outpost-real-page-preview[data-op-theme="light"] > .battle-skill-drag-ghost .battle-skill-drag-readout {
  border-color: rgba(17, 21, 20, .2);
  color: #111514;
  background: rgba(251, 250, 247, .96);
}

.battle-skill-drag-ghost[data-drop-state="valid"] {
  border-color: #b9f6d2;
  box-shadow: 0 32px 70px rgba(0, 0, 0, .62), 0 0 0 2px rgba(126, 235, 171, .22);
}

.battle-skill-drag-ghost[data-drop-state="invalid"] {
  border-color: rgba(255, 132, 132, .64);
}

.battle-skill-drag-ghost.returning {
  opacity: 0;
  transform: translate3d(var(--drag-x, -200px), calc(var(--drag-y, -200px) + 18px), 0) translate(-50%, -72%) scale(.88);
}

.battle-skill-drag-readout {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  width: max-content;
  max-width: 190px;
  padding: 5px 7px;
  overflow: hidden;
  border: 1px solid rgba(238, 243, 240, .22);
  color: #f2f4f1;
  background: rgba(7, 9, 9, .94);
  font: 700 7px/1.2 var(--op-font-mono, monospace);
  letter-spacing: .06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}

body.battle-skill-card-dragging,
body.battle-skill-card-dragging * {
  cursor: grabbing !important;
}

body.battle-skill-drop-valid .battle-skill-drag-readout {
  border-color: rgba(126, 235, 171, .48);
  color: #b9f6d2;
}

@media (max-width: 1180px) {
  body.outpost-real-page-preview .quick-action-bar.battle-active,
  body.outpost-real-page-preview.profile-mode .quick-action-bar.battle-active {
    grid-template-columns: 128px 126px max-content minmax(360px, 1fr) 94px;
  }

  body.outpost-real-page-preview .quick-action-bar.battle-active .battle-skill-card {
    flex-basis: 80px;
    width: 80px;
    min-width: 80px;
    margin-left: -14px;
  }
}

@media (max-width: 820px) {
  body.outpost-real-page-preview .quick-action-bar.battle-active,
  body.outpost-real-page-preview.profile-mode .quick-action-bar.battle-active {
    left: 8px;
    right: 8px;
    width: auto;
    grid-template-columns: 122px max-content minmax(330px, 1fr) 92px;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.outpost-real-page-preview .quick-action-bar.battle-active .battle-skill-card,
  .battle-skill-drag-ghost {
    transition-duration: 0.01ms !important;
  }

  body.outpost-real-page-preview .workspace-view *,
  body.outpost-real-page-preview .workspace-view *::before,
  body.outpost-real-page-preview .workspace-view *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
}

/* Battle command-plane responsive owner. Kept after the retired inline-hand
 * block so generic Quick Bar breakpoints cannot compress the live commands. */
@media (max-width: 1180px) {
  body.outpost-real-page-preview .quick-action-bar.battle-active,
  body.outpost-real-page-preview.profile-mode .quick-action-bar.battle-active {
    grid-template-columns: 112px minmax(0, max-content) minmax(216px, 1fr);
  }

  body.outpost-real-page-preview .quick-action-bar.battle-active :is(.quick-identity-group, .quick-command-group) {
    display: none;
  }

  body.outpost-real-page-preview .quick-action-bar.battle-active .quick-economy-group .quick-status-card.compact {
    min-width: 36px;
    padding-inline: 5px;
  }
}

@media (max-width: 820px) {
  body.outpost-real-page-preview .quick-action-bar.battle-active,
  body.outpost-real-page-preview.profile-mode .quick-action-bar.battle-active {
    grid-template-columns: 108px max-content 204px;
  }
}