/*
 * Project Outpost — Minimal V1 open-frame policy.
 *
 * This final presentation layer owns frame density and scrollbar visibility
 * across converted workspaces. It does not alter markup, state, commands,
 * targeting, drag/drop, or Host-authoritative contracts.
 */

/* Scroll remains available, but browser chrome must not resize or interrupt
 * the composition when a long workspace becomes active. */
html:has(> body.outpost-real-page-preview),
body.outpost-real-page-preview,
body.outpost-real-page-preview * {
  scrollbar-width: none;
  scrollbar-gutter: auto !important;
}

html:has(> body.outpost-real-page-preview)::-webkit-scrollbar,
body.outpost-real-page-preview::-webkit-scrollbar,
body.outpost-real-page-preview *::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body.outpost-real-page-preview {
  overflow-x: hidden;
}

/* Character ------------------------------------------------------------ */

body.outpost-real-page-preview .op-character-manage-layout {
  grid-template-columns: 240px minmax(0, 1fr) 320px;
  min-height: 620px;
  border: 0;
  border-top: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
  background: color-mix(in srgb, var(--op-bg-raised) 38%, transparent);
}

body.outpost-real-page-preview .op-character-manage-layout > .op-character-region {
  border: 0;
  background: transparent;
}

body.outpost-real-page-preview .op-character-manage-layout > .op-character-region + .op-character-region {
  border-left: 1px solid var(--op-line);
}

body.outpost-real-page-preview #character .op-character-page > .character-creation-shell {
  border: 0;
  border-top: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
  background: color-mix(in srgb, var(--op-bg-raised) 38%, transparent);
}

body.outpost-real-page-preview #character :is(
  .character-creation-header,
  .character-creation-stage,
  .character-creation-actions
) {
  border-right: 0;
  border-left: 0;
  background-color: transparent;
}

/* Inventory ------------------------------------------------------------ */

body.outpost-real-page-preview #inventory .outpost-workspace-header,
body.outpost-real-page-preview #inventory .inventory-section-title {
  background: transparent;
}

body.outpost-real-page-preview #inventory .inventory-content-grid {
  border-top: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
  background: color-mix(in srgb, var(--op-bg-raised) 38%, transparent);
}

body.outpost-real-page-preview #inventory .unified-inventory-panel {
  background: transparent !important;
}

body.outpost-real-page-preview #inventory .inventory-view-filters {
  border: 0;
  border-top: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
}

body.outpost-real-page-preview #inventory .inventory-grid,
body.outpost-real-page-preview #inventory .unified-inventory-panel .inventory-grid {
  gap: 1px;
  padding: 1px;
  border: 1px solid var(--op-line-faint);
  background: var(--op-line-faint);
}

body.outpost-real-page-preview #inventory .slot {
  border: 0;
  border-radius: 0;
  background: var(--op-bg-raised);
}

body.outpost-real-page-preview #inventory .slot.empty {
  border: 0;
  background: color-mix(in srgb, var(--op-bg-raised) 72%, transparent);
  opacity: .44;
}

body.outpost-real-page-preview #inventory .slot.empty::after {
  display: none;
  content: none;
}

body.outpost-real-page-preview #inventory .inv-item {
  border: 0;
  border-radius: 0;
  background: var(--op-bg-raised);
}

body.outpost-real-page-preview #inventory .inv-item::before {
  display: none;
  content: none;
}

body.outpost-real-page-preview #inventory .inv-item:is(:hover, :focus-visible, .selected) {
  border: 0;
  background: var(--op-surface-strong);
}

body.outpost-real-page-preview #inventory :is(.inv-icon, .selected-item-art) {
  border: 0 !important;
  border-radius: 0;
  background: var(--op-surface-soft);
}

body.outpost-real-page-preview #inventory .stack {
  border: 0;
  background: var(--op-surface-strong);
}

/* Dice ----------------------------------------------------------------- */

body.outpost-real-page-preview #dice .dice-layout-v3 {
  gap: 0;
  height: auto;
  min-height: 620px;
  overflow: visible;
  border-top: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
  background: color-mix(in srgb, var(--op-bg-raised) 38%, transparent);
}

body.outpost-real-page-preview #dice .dice-layout-v3 > :is(.panel, .dice-stage-panel) {
  min-width: 0;
  padding: var(--op-workspace-region-padding);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview #dice .dice-layout-v3 > * + * {
  border-left: 1px solid var(--op-line);
}

body.outpost-real-page-preview #dice .dice-control-card {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--op-line-faint);
  background: transparent;
}

body.outpost-real-page-preview #dice :is(.toggle-row, .history-row) {
  border: 0 !important;
  border-bottom: 1px solid var(--op-line-faint) !important;
  background: transparent !important;
}

body.outpost-real-page-preview #dice .dice-quick-toggle {
  gap: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
  background: transparent;
}

body.outpost-real-page-preview #dice .dice-quick-toggle button + button {
  border-left: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #dice :is(#rollDisplay, .dice-history-panel) {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

/* Encounter ------------------------------------------------------------ */

body.outpost-real-page-preview #encounter .battle-shell {
  gap: 0;
  border-top: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
  background: color-mix(in srgb, var(--op-bg-raised) 38%, transparent);
}

body.outpost-real-page-preview #encounter .battle-board {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.outpost-real-page-preview #encounter .turn-panel {
  padding: 16px;
  border: 0;
  border-left: 1px solid var(--op-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview #encounter :is(.turn-row, .library-empty) {
  border: 0;
  border-bottom: 1px solid var(--op-line-faint);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* DM ------------------------------------------------------------------- */

body.outpost-real-page-preview #dm .dm-layout {
  gap: 0;
  border-top: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
  background: color-mix(in srgb, var(--op-bg-raised) 38%, transparent);
}

body.outpost-real-page-preview #dm .dm-layout > :is(.dm-navigation-surface, .dm-content-panel) {
  padding: var(--op-workspace-region-padding);
  border: 0 !important;
  background: transparent !important;
}

body.outpost-real-page-preview #dm .dm-layout > * + * {
  border-left: 1px solid var(--op-line) !important;
}

body.outpost-real-page-preview #dm .dm-menu-group {
  border: 0;
  border-bottom: 1px solid var(--op-line-faint);
  background: transparent;
}

body.outpost-real-page-preview #dm .dm-menu-group button {
  border: 0;
  border-bottom: 1px solid var(--op-line-faint);
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview #dm .dm-menu-group button:is(:hover, :focus-visible, .active) {
  border-color: var(--op-line-faint);
  background: var(--op-surface-strong);
  box-shadow: inset 2px 0 var(--op-accent);
}

body.outpost-real-page-preview #dm .dm-compact-grid {
  gap: 0;
  border-top: 1px solid var(--op-line-faint);
}

body.outpost-real-page-preview #dm .dm-compact-card {
  border: 0 !important;
  border-bottom: 1px solid var(--op-line-faint) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.outpost-real-page-preview #dm :is(.compact-kpi, .library-empty) {
  border: 0 !important;
  border-bottom: 1px solid var(--op-line-faint) !important;
  background: transparent !important;
}

body.outpost-real-page-preview #dm .dm-badge {
  border-width: 0 0 0 2px;
  background: transparent;
}

body.outpost-real-page-preview #dm .quick-timer {
  border: 0;
  border-left: 2px solid var(--op-accent);
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview #dm .quick-timer label {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Existing completed pages already use open regions. Keep their top-level
 * surfaces transparent so future content cannot revive a closed card. */
body.outpost-real-page-preview :is(#party, #skillbook, #options) > :is(
  .party-workspace,
  .skillbook-layout-player,
  .options-layout
) {
  border-right: 0;
  border-left: 0;
  background-color: transparent;
  box-shadow: none;
}

@media (max-width: 1180px) {
  body.outpost-real-page-preview .op-character-manage-layout {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  body.outpost-real-page-preview .op-character-manage-review {
    grid-column: 1 / -1;
    border-top: 1px solid var(--op-line) !important;
    border-left: 0 !important;
  }
}

@media (max-width: 820px) {
  body.outpost-real-page-preview .op-character-manage-layout,
  body.outpost-real-page-preview #dice .dice-layout-v3 {
    grid-template-columns: 1fr;
  }

  body.outpost-real-page-preview .op-character-manage-layout > .op-character-region + .op-character-region,
  body.outpost-real-page-preview #dice .dice-layout-v3 > * + *,
  body.outpost-real-page-preview #dm .dm-layout > * + *,
  body.outpost-real-page-preview #encounter .turn-panel {
    border-left: 0 !important;
    border-top: 1px solid var(--op-line) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.outpost-real-page-preview #inventory :is(.slot, .inv-item) {
    transform: none !important;
  }
}