/* Project Outpost — approved minimal layout transplant: Party + Options only. */

body.outpost-real-page-preview #party,
body.outpost-real-page-preview #options {
  color: var(--op-text);
}

body.outpost-real-page-preview #party.drawer-view.active,
body.outpost-real-page-preview #options.drawer-view.active {
  padding: 0;
  border: 1px solid var(--op-line);
  border-radius: 2px;
  background: var(--op-bg-raised);
  box-shadow: 0 26px 70px var(--op-shadow);
  overflow: auto;
}

body.outpost-real-page-preview #party .party-workspace,
body.outpost-real-page-preview #options .options-workspace {
  display: grid;
  min-height: 100%;
  align-content: start;
}

body.outpost-real-page-preview #party .outpost-workspace-aside button,
body.outpost-real-page-preview #options .outpost-workspace-aside button,
body.outpost-real-page-preview #options [data-options-reset],
body.outpost-real-page-preview #options .option-sound-tests button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--op-line);
  border-radius: 0;
  color: var(--op-text);
  background: transparent;
  box-shadow: none;
  font-family: var(--op-font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.outpost-real-page-preview #party .outpost-workspace-aside button:hover,
body.outpost-real-page-preview #options [data-options-reset]:hover,
body.outpost-real-page-preview #options .option-sound-tests button:hover {
  border-color: var(--op-line-strong);
  background: var(--op-surface-soft);
}

/* Party ---------------------------------------------------------------- */
body.outpost-real-page-preview #party .party-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  min-height: 620px;
}

body.outpost-real-page-preview #party .party-lineup-panel,
body.outpost-real-page-preview #party .party-summary-grid > .panel {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview #party .party-lineup-panel {
  padding: var(--op-workspace-region-padding);
}

body.outpost-real-page-preview #party .party-lineup-panel > .panel-title,
body.outpost-real-page-preview #party .party-summary-grid .panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  margin: 0 0 16px;
  color: var(--op-text);
  font-family: var(--op-font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

body.outpost-real-page-preview #party .party-lineup-panel .panel-title .subtle {
  color: var(--op-text-faint);
  font-family: var(--op-font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.outpost-real-page-preview #party .party-lineup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--op-line);
  border-left: 1px solid var(--op-line);
}

body.outpost-real-page-preview #party .party-member-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-width: 0;
  min-height: 152px;
  padding: 18px;
  border: 0;
  border-right: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview #party .party-member-card.ready {
  border-color: var(--op-line);
  background: rgba(var(--op-success-rgb), 0.025);
  box-shadow: inset 2px 0 var(--op-success);
}

body.outpost-real-page-preview #party .party-member-avatar {
  width: 54px;
  height: 54px;
  border: 1px solid var(--op-line);
  border-radius: 0;
  color: var(--op-text-muted);
  background: var(--op-surface-soft);
  font-family: var(--op-font-mono);
  font-size: 16px;
  font-weight: 600;
}

body.outpost-real-page-preview #party .party-member-copy { gap: 6px; }
body.outpost-real-page-preview #party .party-member-copy > span b { color: var(--op-text); font-size: 13px; font-weight: 600; }
body.outpost-real-page-preview #party .party-member-copy small { color: var(--op-text-muted); font-size: 10px; }

body.outpost-real-page-preview #party .party-hp-line {
  height: 3px;
  border-radius: 0;
  background: var(--op-line-faint);
}

body.outpost-real-page-preview #party .party-hp-line i {
  background: var(--op-success);
}

body.outpost-real-page-preview #party .party-condition-list { gap: 6px; }
body.outpost-real-page-preview #party .party-condition-list span,
body.outpost-real-page-preview #party .status-pill {
  padding: 2px 6px;
  border: 0;
  border-left: 2px solid var(--op-danger);
  border-radius: 0;
  color: var(--op-danger);
  background: var(--op-surface-soft);
  font-family: var(--op-font-mono);
  font-size: 8px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body.outpost-real-page-preview #party .status-pill.live {
  border-left-color: var(--op-success);
  color: var(--op-success);
}

body.outpost-real-page-preview #party .party-rest-state b { color: var(--op-accent); font-family: var(--op-font-mono); font-size: 11px; }

body.outpost-real-page-preview #party .party-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 0;
  border-left: 1px solid var(--op-line);
}

body.outpost-real-page-preview #party .party-summary-grid > .panel {
  padding: var(--op-workspace-region-padding);
  border-bottom: 1px solid var(--op-line);
}

body.outpost-real-page-preview #party .party-facility-list {
  display: grid;
  gap: 0;
}

body.outpost-real-page-preview #party .party-facility-list span {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--op-line-faint);
  border-radius: 0;
  background: transparent;
}

body.outpost-real-page-preview #party .party-facility-list i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--op-accent);
  font-style: normal;
}

body.outpost-real-page-preview #party .party-facility-list b { font-size: 11px; font-weight: 560; }
body.outpost-real-page-preview #party .party-summary-grid p { margin: 0 0 10px; color: var(--op-text-muted); font-size: 11px; line-height: 1.55; }

/* Options -------------------------------------------------------------- */
body.outpost-real-page-preview #options .options-local-state {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-left: 2px solid var(--op-success);
  color: var(--op-success);
  background: var(--op-surface-soft);
  font-family: var(--op-font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.outpost-real-page-preview #options .options-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  min-height: 620px;
}

body.outpost-real-page-preview #options .options-primary {
  min-width: 0;
  padding: 0 24px 28px;
}

body.outpost-real-page-preview #options .options-card {
  display: grid;
  gap: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview #options .options-section + .options-section {
  margin-top: 30px;
}

body.outpost-real-page-preview #options .options-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  border-bottom: 1px solid var(--op-line);
}

body.outpost-real-page-preview #options .options-section-heading > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.outpost-real-page-preview #options .options-section-heading span,
body.outpost-real-page-preview #options .options-section-heading small {
  color: var(--op-text-faint);
  font-family: var(--op-font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
}

body.outpost-real-page-preview #options .options-section-heading b {
  color: var(--op-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

body.outpost-real-page-preview #options .toggle-row,
body.outpost-real-page-preview #options .option-slider,
body.outpost-real-page-preview #options .option-profile-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 66px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--op-line-faint);
  border-radius: 0;
  background: transparent;
}

body.outpost-real-page-preview #options .toggle-row > span,
body.outpost-real-page-preview #options .option-profile-line {
  min-width: 0;
}

body.outpost-real-page-preview #options .toggle-row b,
body.outpost-real-page-preview #options .option-slider b,
body.outpost-real-page-preview #options .option-profile-line b {
  color: var(--op-text);
  font-size: 12px;
  font-weight: 560;
}

body.outpost-real-page-preview #options .toggle-row small,
body.outpost-real-page-preview #options .option-slider small,
body.outpost-real-page-preview #options .option-profile-line span {
  color: var(--op-text-muted);
  font-size: 10px;
}

body.outpost-real-page-preview #options .toggle-row input[type="checkbox"],
body.outpost-real-page-preview #options .option-slider input[type="range"] {
  accent-color: var(--op-accent);
}

body.outpost-real-page-preview #options .option-slider {
  grid-template-columns: minmax(120px, 0.34fr) minmax(180px, 1fr);
}

body.outpost-real-page-preview #options .option-slider > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.outpost-real-page-preview #options .option-sound-tests {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

body.outpost-real-page-preview #options .options-profile-card {
  grid-column: auto;
  align-content: start;
  grid-template-columns: 1fr;
}

body.outpost-real-page-preview #options .options-session-rail {
  padding: 0 24px 24px;
  border-left: 1px solid var(--op-line);
}

body.outpost-real-page-preview #options .options-session-rail .subtle {
  margin: 18px 0;
  color: var(--op-text-muted);
  font-size: 10px;
  line-height: 1.55;
}

body.outpost-real-page-preview #options [data-options-reset] { width: 100%; }

@media (max-width: 1120px) {
  body.outpost-real-page-preview #party .party-layout,
  body.outpost-real-page-preview #options .options-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  body.outpost-real-page-preview #party .party-lineup-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  body.outpost-real-page-preview #party.drawer-view.active,
  body.outpost-real-page-preview #options.drawer-view.active { padding-bottom: 92px; }

  body.outpost-real-page-preview #party .party-layout,
  body.outpost-real-page-preview #options .options-layout { grid-template-columns: 1fr; }

  body.outpost-real-page-preview #party .party-summary-grid,
  body.outpost-real-page-preview #options .options-session-rail {
    border-top: 1px solid var(--op-line);
    border-left: 0;
  }
}

@media (max-width: 620px) {
  body.outpost-real-page-preview #party .party-lineup-panel,
  body.outpost-real-page-preview #party .party-summary-grid > .panel,
  body.outpost-real-page-preview #options .options-primary,
  body.outpost-real-page-preview #options .options-session-rail { padding: 16px; }

  body.outpost-real-page-preview #party .party-member-card {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 128px;
    padding: 14px;
  }

  body.outpost-real-page-preview #party .party-member-avatar { width: 48px; height: 48px; }
  body.outpost-real-page-preview #party .party-rest-state { grid-column: 2; display: flex; align-items: center; justify-content: space-between; }
  body.outpost-real-page-preview #options .option-slider { grid-template-columns: 1fr; }
  body.outpost-real-page-preview #options .option-sound-tests { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  body.outpost-real-page-preview #party *,
  body.outpost-real-page-preview #options * { transition-duration: 0.01ms !important; animation: none !important; }
}

body.outpost-real-page-preview #party .party-canvas {
  padding: var(--op-workspace-canvas-padding);
}

body.outpost-real-page-preview #party .party-layout {
  grid-template-columns: minmax(0, 1fr) 340px;
  min-height: 620px;
  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 #party :is(.party-lineup-panel, .party-mode-primary, .party-selected-panel, .party-mode-rail) {
  min-width: 0;
  padding: var(--op-workspace-region-padding);
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.outpost-real-page-preview #party :is(.party-selected-panel, .party-mode-rail) {
  border-left: 1px solid var(--op-line);
}

body.outpost-real-page-preview #party :is(.party-lineup-panel, .party-mode-primary, .party-selected-panel, .party-mode-rail) > .panel-title {
  min-height: 34px;
  margin: 0 0 18px;
  font-size: 14px;
  letter-spacing: 0.04em;
}

body.outpost-real-page-preview #party .party-lineup-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 0;
  border-bottom: 1px solid var(--op-line);
}

body.outpost-real-page-preview #party .party-member-card {
  position: relative;
  display: block;
  min-height: 218px;
  padding: 18px;
  border: 0;
  border-right: 1px solid var(--op-line);
  color: var(--op-text);
  background: transparent;
  text-align: left;
  box-shadow: none;
}

body.outpost-real-page-preview #party .party-member-card:last-child { border-right: 0; }
body.outpost-real-page-preview #party .party-member-card:is(:hover, :focus-visible, .selected) { background: var(--op-surface-soft); }
body.outpost-real-page-preview #party .party-member-card.selected::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 0;
  left: 16px;
  height: 2px;
  background: var(--op-accent);
}

body.outpost-real-page-preview #party .party-member-avatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 0 24px;
  overflow: hidden;
  border: 1px solid var(--op-line);
  color: var(--op-text-muted);
  background: var(--op-surface-soft);
  font: 18px var(--op-font-mono);
}

body.outpost-real-page-preview #party .party-member-avatar img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.12) saturate(0.82); }
body.outpost-real-page-preview #party :is(.party-member-kicker, .party-member-card > strong, .party-member-state) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.outpost-real-page-preview #party .party-member-kicker { margin-bottom: 5px; color: var(--op-text-faint); font: 8px var(--op-font-mono); letter-spacing: 0.09em; text-transform: uppercase; }
body.outpost-real-page-preview #party .party-member-card > strong { font-size: 14px; font-weight: 600; }
body.outpost-real-page-preview #party .party-member-state { min-height: 28px; margin: 3px 0 12px; color: var(--op-text-muted); font-size: 11px; }
body.outpost-real-page-preview #party .party-hp-line { display: block; width: 100%; height: 3px; overflow: hidden; background: var(--op-line-faint); }
body.outpost-real-page-preview #party .party-hp-line i { display: block; width: var(--party-hp); height: 100%; background: var(--op-success); }
body.outpost-real-page-preview #party .party-member-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 11px; color: var(--op-text-muted); font: 9px var(--op-font-mono); }
body.outpost-real-page-preview #party .party-member-foot i { color: var(--op-text-faint); font-style: normal; text-transform: uppercase; }
body.outpost-real-page-preview #party .party-member-foot b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.outpost-real-page-preview #party .party-rest-state { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }

body.outpost-real-page-preview #party .party-shared-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 26px;
  border-top: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
}

body.outpost-real-page-preview #party .party-shared-summary > div { min-height: 132px; padding: 20px 20px 20px 0; }
body.outpost-real-page-preview #party .party-shared-summary > div + div { padding-left: 20px; border-left: 1px solid var(--op-line); }
body.outpost-real-page-preview #party .party-shared-summary small { display: block; color: var(--op-text-faint); font: 9px var(--op-font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
body.outpost-real-page-preview #party .party-shared-summary b { display: block; margin: 8px 0; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
body.outpost-real-page-preview #party .party-shared-summary p { margin: 0; color: var(--op-text-muted); font-size: 11px; }

body.outpost-real-page-preview #party .party-selected-hero { padding-bottom: 20px; border-bottom: 1px solid var(--op-line); }
body.outpost-real-page-preview #party .party-selected-hero .party-member-avatar { margin-bottom: 16px; }
body.outpost-real-page-preview #party .party-selected-hero > small { color: var(--op-text-faint); font: 9px var(--op-font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
body.outpost-real-page-preview #party .party-selected-hero h3 { margin: 8px 0 4px; font-size: 21px; font-weight: 530; }
body.outpost-real-page-preview #party .party-selected-hero p { color: var(--op-text-muted); font-size: 12px; }
body.outpost-real-page-preview #party .party-selected-vitals { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; border-top: 1px solid var(--op-line); border-left: 1px solid var(--op-line); }
body.outpost-real-page-preview #party .party-selected-vitals > span { min-width: 0; min-height: 68px; padding: 12px; border-right: 1px solid var(--op-line); border-bottom: 1px solid var(--op-line); }
body.outpost-real-page-preview #party .party-selected-vitals small { display: block; color: var(--op-text-faint); font: 9px var(--op-font-mono); }
body.outpost-real-page-preview #party .party-selected-vitals b { display: block; overflow: hidden; margin-top: 5px; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
body.outpost-real-page-preview #party :is(.party-selected-rule, .party-rule-list > div, .party-readiness-list > div) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; min-height: 58px; padding: 10px 0; border-bottom: 1px solid var(--op-line-faint); }
body.outpost-real-page-preview #party .party-selected-rule { border-top: 1px solid var(--op-line-faint); }
body.outpost-real-page-preview #party :is(.party-selected-rule, .party-rule-list, .party-readiness-list) b { display: block; font-size: 13px; }
body.outpost-real-page-preview #party :is(.party-selected-rule, .party-rule-list, .party-readiness-list) small { display: block; color: var(--op-text-muted); font-size: 11px; }
body.outpost-real-page-preview #party :is(.party-selected-rule, .party-rule-list, .party-readiness-list) strong { color: var(--op-accent); font: 11px var(--op-font-mono); white-space: nowrap; }

body.outpost-real-page-preview #party .party-empty-state { display: grid; place-items: center; min-height: 360px; padding: 40px; background: var(--op-surface-soft); text-align: center; }
body.outpost-real-page-preview #party .party-empty-state > span { color: var(--op-text-faint); font-size: 42px; }
body.outpost-real-page-preview #party .party-empty-state h3 { margin: 18px 0 4px; font-size: 22px; }
body.outpost-real-page-preview #party .party-empty-state p { max-width: 520px; margin: 0; color: var(--op-text-muted); }
body.outpost-real-page-preview #party .party-milestone-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--op-line); border-left: 1px solid var(--op-line); }
body.outpost-real-page-preview #party .party-milestone-grid > article { min-height: 190px; padding: var(--op-workspace-region-padding); border-right: 1px solid var(--op-line); border-bottom: 1px solid var(--op-line); }
body.outpost-real-page-preview #party .party-milestone-grid i { color: var(--op-text-muted); font: 24px var(--op-font-mono); filter: grayscale(1) saturate(0); }
body.outpost-real-page-preview #party .party-milestone-grid small { display: block; margin-top: 18px; color: var(--op-text-faint); font: 9px var(--op-font-mono); text-transform: uppercase; }
body.outpost-real-page-preview #party .party-milestone-grid h3 { margin: 8px 0 6px; font-size: 18px; }
body.outpost-real-page-preview #party .party-milestone-grid p { color: var(--op-text-muted); font-size: 11px; }

@media (max-width: 1120px) {
  body.outpost-real-page-preview #party .party-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  body.outpost-real-page-preview #party .party-lineup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  body.outpost-real-page-preview #party .party-layout { grid-template-columns: 1fr; }
  body.outpost-real-page-preview #party :is(.party-selected-panel, .party-mode-rail) { border-top: 1px solid var(--op-line); border-left: 0; }
}

@media (max-width: 620px) {
  body.outpost-real-page-preview #party .party-lineup-grid,
  body.outpost-real-page-preview #party .party-shared-summary,
  body.outpost-real-page-preview #party .party-milestone-grid { grid-template-columns: 1fr; }
  body.outpost-real-page-preview #party .party-member-card { border-right: 0; border-bottom: 1px solid var(--op-line); }
  body.outpost-real-page-preview #party .party-shared-summary > div + div { padding-left: 0; border-top: 1px solid var(--op-line); border-left: 0; }
}