/* =========================================================
   PEBBLESHIP UI SYSTEM — 2026
   Canonical global visual layer

   Design rule:
   Pebbleship is an ageing working spacecraft,
   not an arcade interface.
   ========================================================= */


/* =========================================================
   TOKENS
   ========================================================= */

:root {
  --ship-bg: #070b10;
  --ship-bg-soft: #0a1017;

  --ship-panel: #0d141c;
  --ship-panel-2: #111a24;
  --ship-panel-3: #151f2a;

  --ship-border: #293541;
  --ship-border-soft: #1d2832;
  --ship-border-strong: #3a4b59;

  --ship-text: #dce5eb;
  --ship-text-bright: #f0f4f7;
  --ship-muted: #7f909d;
  --ship-muted-2: #5f707d;

  --ship-accent: #65a9bd;
  --ship-accent-bright: #84bed0;
  --ship-accent-dim: rgba(101, 169, 189, 0.10);

  --ship-engineering: #c18b47;
  --ship-good: #6fa481;
  --ship-warning: #c59852;
  --ship-danger: #bf6464;

  --ship-radius: 4px;
  --ship-radius-small: 3px;

  --ship-shadow:
    0 12px 30px rgba(0,0,0,0.24);
}


/* =========================================================
   DOCUMENT
   ========================================================= */

html {
  background: var(--ship-bg);
}

body {
  margin: 0;
  background:
    radial-gradient(
      circle at 50% -20%,
      rgba(49, 80, 101, 0.13),
      transparent 42rem
    ),
    linear-gradient(
      180deg,
      #090e14 0%,
      #070b10 45%,
      #05080c 100%
    ) !important;

  color: var(--ship-text) !important;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  animation: none !important;
}


/* main.css currently styles .container like a card.
   Main page shell should NOT itself be a glowing card. */

main.container {
  width: min(100%, 1060px);
  max-width: 1060px;
  margin: 28px auto 80px;
  padding: 0 18px 100px !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
  color: var(--ship-accent-bright);
  text-decoration: none;
}

a:hover {
  color: #a7ced9;
  text-shadow: none !important;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4 {
  color: var(--ship-text-bright);
  text-shadow: none !important;
}

h1 {
  letter-spacing: 0.02em;
}

h2,
h3 {
  letter-spacing: 0.015em;
}

.muted,
small {
  color: var(--ship-muted);
}


/* =========================================================
   TOP SYSTEM BAR
   ========================================================= */

.topnav {
  min-height: 56px;
  padding: 7px 14px !important;

  background:
    linear-gradient(
      180deg,
      rgba(17, 25, 34, 0.98),
      rgba(10, 16, 23, 0.98)
    ) !important;

  border-bottom:
    1px solid var(--ship-border-strong) !important;

  box-shadow:
    0 5px 18px rgba(0,0,0,0.30);

  backdrop-filter: blur(10px);
}

.brand-home {
  color: var(--ship-text-bright) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.mobile-player-status {
  color: var(--ship-muted) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.035em;
}

.hamburger {
  min-height: 38px !important;
  padding: 7px 11px !important;

  color: var(--ship-text) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.035),
      rgba(255,255,255,0.012)
    ) !important;

  border: 1px solid var(--ship-border) !important;
  border-radius: var(--ship-radius) !important;

  box-shadow: none !important;
}

.hamburger:hover {
  color: var(--ship-text-bright) !important;
  background: rgba(101,169,189,0.07) !important;
  border-color: #425564 !important;
  box-shadow: none !important;
}


/* =========================================================
   NAVIGATION DRAWER
   ========================================================= */

.nav-backdrop {
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(2px);
}

.nav-drawer {
  background:
    linear-gradient(
      180deg,
      #0e151d 0%,
      #090e14 100%
    ) !important;

  border-left:
    1px solid var(--ship-border-strong) !important;

  box-shadow:
    -20px 0 50px rgba(0,0,0,0.38);
}

.nav-drawer-header {
  min-height: 58px;
  padding: 12px 14px !important;

  border-bottom:
    1px solid var(--ship-border) !important;

  background: rgba(255,255,255,0.015);
}

.nav-drawer-header strong {
  color: var(--ship-text-bright);
  font-size: 0.75rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-section {
  margin-bottom: 13px !important;
  padding-bottom: 13px !important;

  border-bottom:
    1px solid var(--ship-border-soft) !important;
}

.nav-meta {
  color: var(--ship-muted) !important;
  font-size: 0.76rem !important;
  line-height: 1.55 !important;
  letter-spacing: 0.025em;
}

.nav-meta strong {
  color: var(--ship-text);
}

.nav-item {
  display: flex !important;
  align-items: center;

  min-height: 42px;

  margin-bottom: 5px !important;
  padding: 9px 11px !important;

  color: #bfcbd3 !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.025),
      rgba(255,255,255,0.01)
    ) !important;

  border: 1px solid var(--ship-border-soft) !important;
  border-radius: var(--ship-radius-small) !important;

  font-size: 0.82rem;
  font-weight: 550;
  letter-spacing: 0.035em;

  box-shadow: none !important;
  text-shadow: none !important;

  transition:
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}

.nav-item:hover {
  color: var(--ship-text-bright) !important;

  background:
    linear-gradient(
      90deg,
      rgba(101,169,189,0.11),
      rgba(101,169,189,0.025)
    ) !important;

  border-color: #405260 !important;

  transform: none !important;
  box-shadow: none !important;
}

.nav-item:active {
  transform: none !important;
  background: rgba(101,169,189,0.12) !important;
}


/* =========================================================
   PANELS / CARDS
   ========================================================= */

.card,
.panel,
.box,
.table-shell,
.market-insight,
.ship-help-box {
  color: var(--ship-text) !important;

  background:
    linear-gradient(
      180deg,
      rgba(18, 27, 37, 0.96),
      rgba(11, 18, 25, 0.97)
    ) !important;

  border:
    1px solid var(--ship-border) !important;

  border-radius:
    var(--ship-radius) !important;

  box-shadow:
    var(--ship-shadow) !important;
}

.card,
.panel,
.box {
  padding: 15px !important;
}

.card:hover,
.panel:hover,
.mission-card:hover,
.room-card:hover,
.card.accent-core:hover,
.card.accent-eng:hover {
  transform: none !important;

  border-color:
    var(--ship-border-strong) !important;

  box-shadow:
    var(--ship-shadow) !important;
}


/* technical section headings */

.card h2,
.card h3,
.panel h2,
.panel h3 {
  color: var(--ship-text-bright) !important;
  text-shadow: none !important;
}


/* accent classes now communicate department,
   rather than creating neon glow */

.accent-core {
  border-left:
    3px solid var(--ship-accent) !important;

  box-shadow:
    var(--ship-shadow) !important;
}

.accent-eng {
  border-left:
    3px solid var(--ship-engineering) !important;

  box-shadow:
    var(--ship-shadow) !important;
}

.accent-core h1,
.accent-core h2,
.accent-core h3 {
  color: var(--ship-text-bright) !important;
}

.accent-eng h1,
.accent-eng h2,
.accent-eng h3 {
  color: #d7b680 !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

button,
.btn,
.nav-btn,
a.nav-btn {
  padding: 8px 12px;

  color: #c7d5dc !important;

  background:
    linear-gradient(
      180deg,
      rgba(47, 62, 74, 0.45),
      rgba(26, 37, 47, 0.42)
    ) !important;

  border:
    1px solid #344552 !important;

  border-radius:
    var(--ship-radius-small) !important;

  font-weight: 600;
  letter-spacing: 0.025em;

  box-shadow: none !important;
  text-shadow: none !important;

  transition:
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}

button:hover,
.btn:hover,
.nav-btn:hover,
a.nav-btn:hover {
  color: var(--ship-text-bright) !important;

  background:
    rgba(101,169,189,0.10) !important;

  border-color:
    #536b7a !important;

  box-shadow: none !important;
  transform: none !important;
}

button:active,
.btn:active,
.nav-btn:active {
  transform: translateY(1px) !important;
}

button[disabled],
.btn[disabled] {
  opacity: 0.38;
}


/* dangerous buttons retain meaning */

.btn-danger,
button.btn-danger {
  color: #d8aaaa !important;
  border-color: #694040 !important;
  background: rgba(128, 49, 49, 0.10) !important;
}

.btn-danger:hover,
button.btn-danger:hover {
  color: #f1c3c3 !important;
  border-color: #8b5050 !important;
  background: rgba(160, 62, 62, 0.16) !important;
}


/* =========================================================
   INPUT / FORM CONTROLS
   ========================================================= */

input,
select,
textarea {
  color: var(--ship-text) !important;

  background:
    #070c11 !important;

  border:
    1px solid #31404c !important;

  border-radius:
    var(--ship-radius-small) !important;

  box-shadow:
    inset 0 1px 4px rgba(0,0,0,0.24);

  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color:
    #507184 !important;

  box-shadow:
    0 0 0 2px rgba(101,169,189,0.08) !important;
}

input::placeholder,
textarea::placeholder {
  color: #53636e;
}


/* =========================================================
   TABLES / DATA SYSTEMS
   ========================================================= */

.table-shell {
  overflow: hidden;
}

.table,
.market-table {
  color: var(--ship-text);
}

.table th,
.market-table th {
  color: #91a3af !important;

  background:
    rgba(70, 91, 105, 0.09) !important;

  border-color:
    #31404b !important;

  font-size: 0.70rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.table td,
.market-table td {
  border-color:
    rgba(68, 84, 95, 0.42) !important;
}

.table tbody tr:nth-child(even) td {
  background:
    rgba(255,255,255,0.012) !important;
}

.table tr:hover td {
  background:
    rgba(101,169,189,0.035) !important;
}


/* =========================================================
   TAGS / PILLS / STATUS DATA
   ========================================================= */

.pill,
.chip,
.tag,
.badge,
.badge-rank,
.badge-credits,
.rank-pill,
.credits-pill,
.room-card-badge,
.risk-label {
  border-radius:
    var(--ship-radius-small) !important;

  background:
    rgba(255,255,255,0.025) !important;

  border:
    1px solid #34434f !important;

  color:
    #aebbc4;

  box-shadow:
    none !important;
}


/* =========================================================
   SEMANTIC STATUS COLOURS
   ========================================================= */

.status-good,
.flash.success,
.mission-complete,
.price-buy {
  color: var(--ship-good) !important;
}

.status-warning,
.flash.warning,
.price-sell {
  color: var(--ship-warning) !important;
}

.status-danger,
.flash.danger,
.out-of-stock,
.craft-warning {
  color: var(--ship-danger) !important;
}

.trend.up {
  color: var(--ship-good) !important;
}

.trend.down {
  color: var(--ship-danger) !important;
}


/* =========================================================
   FLASH / SYSTEM MESSAGES
   ========================================================= */

.flashes {
  margin: 12px 0 18px;
}

.flash {
  padding: 10px 12px !important;

  color: var(--ship-text);

  background:
    rgba(15, 22, 29, 0.98) !important;

  border:
    1px solid var(--ship-border) !important;

  border-left:
    3px solid var(--ship-accent) !important;

  border-radius:
    var(--ship-radius-small) !important;

  box-shadow:
    0 8px 18px rgba(0,0,0,0.18);
}

.flash.success {
  border-left-color:
    var(--ship-good) !important;
}

.flash.warning {
  border-left-color:
    var(--ship-warning) !important;
}

.flash.danger {
  border-left-color:
    var(--ship-danger) !important;
}


/* =========================================================
   ROOM / MISSION INTERACTION
   ========================================================= */

.room-card,
.mission-card,
.choice-btn {
  transition:
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease !important;
}

.room-title {
  color:
    var(--ship-text-bright) !important;
}

.choice-btn {
  border-radius:
    var(--ship-radius) !important;

  border:
    1px solid var(--ship-border) !important;

  background:
    rgba(6, 11, 16, 0.68) !important;
}

.choice-btn:hover {
  transform: none !important;

  background:
    rgba(101,169,189,0.065) !important;

  border-color:
    #405562 !important;

  box-shadow:
    none !important;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.progress-bar {
  height: 7px !important;

  background:
    #080d12;

  border:
    1px solid #34414b !important;

  border-radius:
    2px !important;
}

.progress-bar div {
  background:
    #628b77 !important;
}


/* =========================================================
   COMMS BAR
   ========================================================= */

.commsbar {
  background:
    rgba(7, 11, 16, 0.97) !important;

  border-top:
    1px solid var(--ship-border-strong) !important;

  box-shadow:
    0 -8px 24px rgba(0,0,0,0.27);

  backdrop-filter:
    blur(10px);
}

.commsbar-inner {
  min-height: 48px;
  padding: 7px 14px !important;
}

.commsbar-left strong {
  color: #9aabb5;
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.admin-msg {
  color: #bdc7ce;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {
  color: #52616b !important;
  font-size: 0.72rem;
  letter-spacing: 0.055em;

  border-top:
    1px solid rgba(44, 57, 68, 0.32);

  padding:
    24px 12px 80px !important;
}


/* =========================================================
   MOBILE DATA CARDS
   ========================================================= */

@media (max-width: 720px) {

  main.container {
    margin-top: 18px;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .table tr {
    border:
      1px solid var(--ship-border) !important;

    border-radius:
      var(--ship-radius) !important;

    background:
      rgba(12, 19, 26, 0.95) !important;

    box-shadow:
      0 7px 16px rgba(0,0,0,0.17);
  }

  .table td::before {
    color: #758793;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* =========================================================
   MARKET EXCHANGE — CATALOGUE CONTROLS
   ========================================================= */

.market-catalogue-controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;

  margin: 18px 0 14px;
  padding: 12px;

  background:
    linear-gradient(
      180deg,
      rgba(17, 26, 35, 0.96),
      rgba(10, 16, 22, 0.97)
    );

  border: 1px solid var(--ship-border);
  border-radius: var(--ship-radius);
}


.market-search-wrap {
  flex: 1 1 420px;
  min-width: 0;
}


.market-search-wrap > label {
  display: block;

  margin-bottom: 6px;

  color: #8799a5;

  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}


.market-search-row {
  display: flex;
  gap: 7px;
}


.market-search-input {
  flex: 1 1 auto;

  width: 100%;
  min-width: 0;

  min-height: 40px;

  padding: 8px 11px !important;
}


.market-clear-search {
  flex: 0 0 auto;
}


.market-search-status {
  min-height: 18px;

  margin-top: 5px;

  color: var(--ship-muted);

  font-size: 0.71rem;
  letter-spacing: 0.025em;
}


.market-section-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}


/* =========================================================
   COLLAPSIBLE MARKET SECTIONS
   ========================================================= */

.market-section {
  padding: 0 !important;
  overflow: hidden;
}


.market-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  min-height: 48px;

  padding: 10px 13px !important;

  color: var(--ship-text-bright) !important;

  background:
    linear-gradient(
      90deg,
      rgba(193, 139, 71, 0.09),
      rgba(255,255,255,0.012)
    ) !important;

  border: 0 !important;
  border-bottom:
    1px solid var(--ship-border) !important;

  border-radius: 0 !important;

  text-align: left;

  box-shadow: none !important;
}


.market-section-toggle:hover {
  background:
    linear-gradient(
      90deg,
      rgba(193, 139, 71, 0.14),
      rgba(255,255,255,0.018)
    ) !important;

  border-color:
    var(--ship-border-strong) !important;
}


.market-section-title {
  min-width: 0;

  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.055em;
}


.market-section-meta {
  display: flex;
  align-items: center;
  gap: 10px;

  flex: 0 0 auto;
}


.market-section-count {
  color: var(--ship-muted);

  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}


.market-section-chevron {
  color: #8799a5;

  font-size: 0.85rem;

  transition: transform 130ms ease;
}


.market-section-toggle[aria-expanded="false"]
.market-section-chevron {
  transform: rotate(-90deg);
}


.market-section-body {
  padding: 12px;
}


.market-section-body[hidden] {
  display: none;
}


.market-section.is-collapsed
.market-section-toggle {
  border-bottom: 0 !important;
}


.market-no-results {
  text-align: center;
}


.market-no-results strong {
  display: block;

  margin-bottom: 4px;

  color: var(--ship-text-bright);

  font-size: 0.77rem;
  letter-spacing: 0.08em;
}


/* =========================================================
   MARKET MOBILE
   ========================================================= */

@media (max-width: 720px) {

  .market-catalogue-controls {
    align-items: stretch;
    flex-direction: column;
  }


  .market-search-wrap {
    flex-basis: auto;
  }


  .market-section-actions {
    width: 100%;
  }


  .market-section-actions .btn {
    flex: 1 1 0;
  }


  .market-section-count {
    display: none;
  }


  .market-section-body {
    padding: 9px;
  }
}


/* =========================================================
   CARGO HOLD — SEARCH / CATALOGUE
   ========================================================= */

.cargo-catalogue-controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;

  margin: 18px 0 14px;
  padding: 12px;

  background:
    linear-gradient(
      180deg,
      rgba(17, 26, 35, 0.96),
      rgba(10, 16, 22, 0.97)
    );

  border: 1px solid var(--ship-border);
  border-radius: var(--ship-radius);
}


.cargo-search-wrap {
  flex: 1 1 420px;
  min-width: 0;
}


.cargo-search-wrap > label {
  display: block;

  margin-bottom: 6px;

  color: #8799a5;

  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}


.cargo-search-row {
  display: flex;
  gap: 7px;
}


.cargo-search-input {
  flex: 1 1 auto;

  width: 100%;
  min-width: 0;
  min-height: 40px;

  padding: 8px 11px !important;
}


.cargo-search-status {
  min-height: 18px;

  margin-top: 5px;

  color: var(--ship-muted);

  font-size: 0.71rem;
  letter-spacing: 0.025em;
}


.cargo-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}


/* =========================================================
   CARGO HOLD — COLLAPSIBLE SECTIONS
   ========================================================= */

.cargo-section {
  padding: 0 !important;
  overflow: hidden;
}


.cargo-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  min-height: 52px;

  padding: 10px 13px !important;

  color: var(--ship-text-bright) !important;

  background:
    linear-gradient(
      90deg,
      rgba(193, 139, 71, 0.09),
      rgba(255,255,255,0.012)
    ) !important;

  border: 0 !important;

  border-bottom:
    1px solid var(--ship-border) !important;

  border-radius: 0 !important;

  text-align: left;

  box-shadow: none !important;
}


.cargo-section-toggle:hover {
  background:
    linear-gradient(
      90deg,
      rgba(193, 139, 71, 0.14),
      rgba(255,255,255,0.018)
    ) !important;
}


.cargo-section-heading {
  display: flex;
  flex-direction: column;
  gap: 3px;

  min-width: 0;
}


.cargo-section-title {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.055em;
}


.cargo-section-value {
  color: var(--ship-muted);

  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.075em;
}


.cargo-section-meta {
  display: flex;
  align-items: center;
  gap: 10px;

  flex: 0 0 auto;
}


.cargo-section-count {
  color: var(--ship-muted);

  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}


.cargo-section-chevron {
  color: #8799a5;

  font-size: 0.85rem;

  transition:
    transform 130ms ease;
}


.cargo-section-toggle[aria-expanded="false"]
.cargo-section-chevron {
  transform: rotate(-90deg);
}


.cargo-section-body {
  padding: 12px;
}


.cargo-section-body[hidden] {
  display: none;
}


.cargo-section.is-collapsed
.cargo-section-toggle {
  border-bottom: 0 !important;
}


.cargo-no-results {
  text-align: center;
}


.cargo-no-results strong {
  display: block;

  margin-bottom: 4px;

  font-size: 0.77rem;
  letter-spacing: 0.08em;
}


/* =========================================================
   CARGO HOLD — MOBILE
   ========================================================= */

@media (max-width: 720px) {

  .cargo-catalogue-controls {
    align-items: stretch;
    flex-direction: column;
  }


  .cargo-search-wrap {
    flex-basis: auto;
  }


  .cargo-section-actions {
    width: 100%;
  }


  .cargo-section-actions .btn {
    flex: 1 1 0;
  }


  .cargo-section-count {
    display: none;
  }


  .cargo-section-body {
    padding: 9px;
  }

}


/* =========================================================
   FABRICATION BAY
   ========================================================= */

.fabrication-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}


.fabrication-kicker,
.fabrication-field-label,
.fabrication-readout-label,
.fabrication-status-label,
.fabrication-blueprint-code {
  color: var(--ship-muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}


.fabrication-header-status {
  flex: 0 0 auto;
  min-width: 110px;

  padding-left: 16px;

  border-left: 1px solid var(--ship-border);

  text-align: right;
}


.fabrication-status-value {
  margin-top: 2px;

  color: var(--ship-text-bright);

  font-size: 1.35rem;
  font-weight: 700;
}


/* COMMAND BAR */

.fabrication-commandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin: 12px 0;

  padding: 10px 12px;

  background: rgba(11, 17, 23, 0.94);

  border: 1px solid var(--ship-border);
  border-radius: var(--ship-radius);
}


.fabrication-modes,
.fabrication-command-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}


.fabrication-mode-readout {
  margin-right: 6px;

  color: var(--ship-muted);

  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
}


.fabrication-disabled {
  opacity: 0.43;
  cursor: not-allowed;
}


/* ALERT */

.fabrication-alert {
  display: flex;
  gap: 10px;
  align-items: baseline;

  margin: 12px 0;

  padding: 10px 12px;

  border: 1px solid var(--ship-border);
  border-left-width: 3px;

  font-size: 0.76rem;
}


.fabrication-alert strong {
  font-size: 0.69rem;
  letter-spacing: 0.08em;
}


.fabrication-alert-warning {
  border-left-color: var(--ship-warning);
}


/* COLLAPSIBLE PRODUCTION PANELS */

.fabrication-production-panel,
.fabrication-ready-panel {
  padding: 0 !important;
  overflow: hidden;
}


.fabrication-panel-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;

  padding: 11px 13px !important;

  color: var(--ship-text-bright) !important;

  background: rgba(255,255,255,0.015) !important;

  border: 0 !important;
  border-bottom: 1px solid var(--ship-border) !important;
  border-radius: 0 !important;

  text-align: left;

  box-shadow: none !important;
}


.fabrication-panel-title,
.fabrication-panel-sub {
  display: block;
}


.fabrication-panel-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}


.fabrication-panel-sub {
  margin-top: 2px;

  color: var(--ship-muted);

  font-size: 0.61rem;
  letter-spacing: 0.08em;
}


.fabrication-chevron {
  transition: transform 130ms ease;
}


.fabrication-panel-toggle[aria-expanded="false"]
.fabrication-chevron {
  transform: rotate(-90deg);
}


.fabrication-panel-body {
  padding: 12px;
}


.fabrication-panel-body[hidden] {
  display: none;
}


/* ACTIVE JOBS */

.fabrication-job-list {
  display: grid;
  gap: 9px;
}


.fabrication-job {
  padding: 10px 11px;

  background: rgba(255,255,255,0.018);

  border: 1px solid var(--ship-border);
}


.fabrication-job-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}


.fabrication-job-name {
  color: var(--ship-text-bright);

  font-size: 0.83rem;
  font-weight: 700;
}


.fabrication-job-meta {
  margin-top: 2px;

  color: var(--ship-muted);

  font-size: 0.64rem;
  letter-spacing: 0.06em;
}


.fabrication-job-percent {
  color: var(--ship-accent);

  font-size: 0.85rem;
  font-weight: 700;
}


.fabrication-progress {
  height: 5px;

  margin-top: 8px;

  overflow: hidden;

  background: #080d12;

  border: 1px solid #25313b;
}


.fabrication-progress-fill {
  height: 100%;

  background: var(--ship-accent);
}


.fabrication-job-readout {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px 12px;

  margin-top: 6px;

  color: var(--ship-muted);

  font-size: 0.61rem;
  letter-spacing: 0.06em;
}


.fabrication-job-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;

  margin-top: 8px;
}


/* READY OUTPUT */

.fabrication-ready-grid {
  display: grid;
  gap: 7px;
}


.fabrication-ready-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 9px 10px;

  background: rgba(111,164,129,0.035);

  border: 1px solid var(--ship-border);
  border-left: 2px solid var(--ship-good);
}


/* OPERATOR STRIP */

.fabrication-operator-strip {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  margin: 12px 0;

  border: 1px solid var(--ship-border);

  background: #0b1117;
}


.fabrication-operator-strip > div {
  min-width: 0;

  padding: 9px 11px;

  border-right: 1px solid var(--ship-border);
}


.fabrication-operator-strip > div:last-child {
  border-right: 0;
}


.fabrication-operator-strip strong {
  display: block;

  margin-top: 2px;

  font-size: 0.78rem;
}


/* BLUEPRINT SEARCH */

.fabrication-browser {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;

  margin: 14px 0 10px;

  padding: 11px 12px;

  background: #0b1117;

  border: 1px solid var(--ship-border);
}


.fabrication-search {
  flex: 1 1 450px;

  min-width: 0;
}


.fabrication-search > label {
  display: block;

  margin-bottom: 6px;

  color: var(--ship-muted);

  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}


.fabrication-search-row {
  display: flex;
  gap: 7px;
}


.fabrication-search-row input {
  flex: 1 1 auto;
  min-width: 0;
}


.fabrication-search-status {
  min-height: 18px;

  margin-top: 5px;

  color: var(--ship-muted);

  font-size: 0.67rem;
}


.fabrication-filter-controls {
  display: flex;
  gap: 7px;
}


/* BLUEPRINT REGISTER */

.fabrication-blueprint-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  padding: 0 2px 7px;

  color: var(--ship-muted);

  font-size: 0.62rem;
  letter-spacing: 0.09em;
}


.fabrication-blueprint-heading span,
.fabrication-blueprint-heading strong {
  display: block;
}


.fabrication-blueprint-heading strong {
  margin-top: 2px;

  color: var(--ship-text-bright);

  font-size: 0.82rem;
}


/* BLUEPRINT CARDS */

.fabrication-grid {
  align-items: stretch;
}


.fabrication-blueprint {
  position: relative;

  padding: 0 !important;

  overflow: hidden;
}


.fabrication-blueprint-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;

  padding: 11px 12px;

  background:
    linear-gradient(
      90deg,
      rgba(193,139,71,0.08),
      rgba(255,255,255,0.008)
    );

  border-bottom: 1px solid var(--ship-border);
}


.fabrication-blueprint-top h3 {
  margin: 2px 0 0;

  font-size: 0.92rem;
}


.fabrication-state {
  flex: 0 0 auto;

  padding: 3px 5px;

  border: 1px solid currentColor;

  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}


.fabrication-output {
  padding: 10px 12px;

  border-bottom: 1px solid var(--ship-border);
}


.fabrication-output strong {
  display: block;

  margin-top: 2px;

  color: var(--ship-text-bright);
}


.fabrication-spec-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0,1fr));

  border-bottom: 1px solid var(--ship-border);
}


.fabrication-spec-grid > div {
  padding: 8px 10px;

  border-right: 1px solid var(--ship-border);
}


.fabrication-spec-grid > div:last-child {
  border-right: 0;
}


.fabrication-spec-grid strong {
  display: block;

  margin-top: 2px;

  font-size: 0.71rem;
}


.fabrication-components {
  padding: 10px 12px;

  border-bottom: 1px solid var(--ship-border);
}


.fabrication-component-list {
  margin-top: 6px;

  border-top: 1px solid rgba(255,255,255,0.045);
}


.fabrication-component {
  display: flex;
  justify-content: space-between;
  gap: 12px;

  padding: 5px 0;

  border-bottom: 1px solid rgba(255,255,255,0.045);

  font-size: 0.72rem;
}


.fabrication-component:last-child {
  border-bottom: 0;
}


.fabrication-blueprint-actions {
  padding: 10px 12px;
}


.fabrication-run-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}


.fabrication-run-form label {
  color: var(--ship-muted);

  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}


.fabrication-run-form input {
  display: block;

  width: 68px;

  margin-top: 4px;
}


.fabrication-run-form .btn {
  flex: 1 1 auto;
}


.fabrication-hold {
  margin-top: 7px;

  color: var(--ship-warning);

  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}


.fabrication-no-results {
  text-align: center;
}


.fabrication-no-results strong {
  display: block;

  margin-bottom: 4px;

  font-size: 0.75rem;
  letter-spacing: 0.08em;
}


/* MOBILE */

@media (max-width: 720px) {

  .fabrication-header,
  .fabrication-commandbar,
  .fabrication-browser {
    flex-direction: column;
    align-items: stretch;
  }


  .fabrication-header-status {
    padding-top: 8px;
    padding-left: 0;

    border-top: 1px solid var(--ship-border);
    border-left: 0;

    text-align: left;
  }


  .fabrication-command-actions {
    justify-content: space-between;
  }


  .fabrication-operator-strip {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }


  .fabrication-operator-strip > div:nth-child(2) {
    border-right: 0;
  }


  .fabrication-operator-strip > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--ship-border);
  }


  .fabrication-filter-controls .btn {
    flex: 1 1 0;
  }


  .fabrication-spec-grid {
    grid-template-columns: 1fr;
  }


  .fabrication-spec-grid > div {
    border-right: 0;
    border-bottom: 1px solid var(--ship-border);
  }


  .fabrication-spec-grid > div:last-child {
    border-bottom: 0;
  }


  .fabrication-run-form {
    align-items: stretch;
    flex-direction: column;
  }


  .fabrication-run-form input {
    width: 100%;
  }

}


/* =========================================================
   FABRICATION MODE IDENTITY
   ========================================================= */

/* REFINE — processing / raw material conversion */

.fabrication-refine {
  --fab-mode: #65a9bd;
  --fab-mode-soft: rgba(101,169,189,0.10);
}

.fabrication-refine .fabrication-header,
.fabrication-refine .fabrication-blueprint {
  border-left-color: #65a9bd !important;
}


/* BUILD — manufacture / assembly */

.fabrication-build {
  --fab-mode: #c18b47;
  --fab-mode-soft: rgba(193,139,71,0.10);
}

.fabrication-build .fabrication-header,
.fabrication-build .fabrication-blueprint {
  border-left-color: #c18b47 !important;
}


/* ADVANCED — specialist fabrication */

.fabrication-advanced {
  --fab-mode: #9380b8;
  --fab-mode-soft: rgba(147,128,184,0.11);
}

.fabrication-advanced .fabrication-header,
.fabrication-advanced .fabrication-blueprint {
  border-left-color: #9380b8 !important;
}


/* Current mode button */

.fabrication-page .fabrication-modes .btn-primary {
  color: #f2f5f7 !important;

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--fab-mode) 34%, #18212a),
      color-mix(in srgb, var(--fab-mode) 18%, #0b1117)
    ) !important;

  border-color: var(--fab-mode) !important;
}


/* Mode colour remains visible further down page */

.fabrication-page .fabrication-blueprint-heading {
  border-bottom: 2px solid var(--fab-mode);
}


.fabrication-page .fabrication-blueprint-code {
  color: var(--fab-mode);
}


.fabrication-page .fabrication-blueprint-top {
  background:
    linear-gradient(
      90deg,
      var(--fab-mode-soft),
      rgba(255,255,255,0.008)
    );
}


/* Small persistent mode marker */

.fabrication-mode-readout {
  padding: 4px 7px;

  color: var(--fab-mode) !important;

  border: 1px solid
    color-mix(in srgb, var(--fab-mode) 55%, #293541);

  background: var(--fab-mode-soft);
}


/* =========================================================
   PEBBLE // FABRICATION ADVISORY
   ========================================================= */

.pebble-fabrication-advisory {
  margin: 12px 0;

  background:
    linear-gradient(
      90deg,
      rgba(101,169,189,0.07),
      rgba(10,15,21,0.96) 42%
    );

  border: 1px solid var(--ship-border);
  border-left: 3px solid var(--ship-accent);

  overflow: hidden;
}


.pebble-advisory-critical {
  border-left-color: var(--ship-danger);

  background:
    linear-gradient(
      90deg,
      rgba(191,100,100,0.10),
      rgba(10,15,21,0.96) 42%
    );
}


.pebble-advisory-high {
  border-left-color: var(--ship-warning);

  background:
    linear-gradient(
      90deg,
      rgba(197,152,82,0.09),
      rgba(10,15,21,0.96) 42%
    );
}


.pebble-advisory-nominal {
  opacity: 0.82;
}


.pebble-advisory-id {
  padding: 6px 10px;

  color: var(--ship-accent);

  background: rgba(0,0,0,0.16);

  border-bottom: 1px solid var(--ship-border);

  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}


.pebble-advisory-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;

  padding: 11px 12px;
}


.pebble-advisory-main {
  min-width: 0;
}


.pebble-advisory-priority {
  color: var(--ship-muted);

  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.10em;
}


.pebble-advisory-content h3 {
  margin: 3px 0 4px;

  font-size: 0.92rem;
}


.pebble-advisory-content p {
  max-width: 760px;

  margin: 0;

  color: var(--ship-text);

  font-size: 0.75rem;
}


.pebble-advisory-data {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;

  margin-top: 8px;

  color: var(--ship-muted);

  font-size: 0.58rem;
  letter-spacing: 0.07em;
}


.pebble-advisory-data strong {
  color: var(--ship-text-bright);
}


.pebble-advisory-action {
  flex: 0 0 auto;
}



/* =========================================================
   PEBBLE PRIORITY MODAL
   ========================================================= */

body.pebble-modal-open {
  overflow: hidden;
}


.pebble-production-modal {
  position: fixed;
  inset: 0;

  z-index: 5000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18px;

  background: rgba(2,5,8,0.78);

  backdrop-filter: blur(3px);
}


.pebble-production-modal[hidden] {
  display: none;
}


.pebble-production-dialog {
  width: min(560px, 100%);

  background:
    linear-gradient(
      180deg,
      #101820,
      #090f15
    );

  border: 1px solid #43515c;
  border-left: 3px solid var(--ship-danger);

  box-shadow:
    0 18px 60px rgba(0,0,0,0.55);
}


.pebble-production-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 8px 10px;

  background: #0a1016;

  border-bottom: 1px solid var(--ship-border);

  color: var(--ship-accent);

  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}


.pebble-production-close {
  padding: 0 4px !important;

  color: var(--ship-muted) !important;

  background: transparent !important;

  border: 0 !important;

  font-size: 1.15rem;

  cursor: pointer;
}


.pebble-production-dialog-body {
  padding: 18px;
}


.pebble-dialog-priority {
  color: var(--ship-danger);

  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}


.pebble-production-dialog h2 {
  margin: 4px 0 8px;

  font-size: 1.2rem;
}


.pebble-production-dialog p {
  margin: 0;

  color: var(--ship-text);

  line-height: 1.55;
}


.pebble-dialog-readouts {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0,1fr));

  margin-top: 15px;

  border: 1px solid var(--ship-border);
}


.pebble-dialog-readouts > div {
  padding: 9px;

  border-right: 1px solid var(--ship-border);
}


.pebble-dialog-readouts > div:last-child {
  border-right: 0;
}


.pebble-dialog-readouts span,
.pebble-dialog-readouts strong {
  display: block;
}


.pebble-dialog-readouts span {
  color: var(--ship-muted);

  font-size: 0.52rem;
  letter-spacing: 0.08em;
}


.pebble-dialog-readouts strong {
  margin-top: 3px;

  font-size: 0.69rem;
}


.pebble-dialog-actions {
  display: flex;
  gap: 8px;

  margin-top: 16px;
}



@media (max-width: 720px) {

  .pebble-advisory-content {
    flex-direction: column;
    align-items: stretch;
  }


  .pebble-advisory-action .btn {
    width: 100%;
  }


  .pebble-dialog-readouts {
    grid-template-columns: 1fr;
  }


  .pebble-dialog-readouts > div {
    border-right: 0;
    border-bottom: 1px solid var(--ship-border);
  }


  .pebble-dialog-readouts > div:last-child {
    border-bottom: 0;
  }


  .pebble-dialog-actions {
    flex-direction: column;
  }

}


/* =========================================================
   MISSION CONTROL
   ========================================================= */

.mission-daily-reset {
  color: var(--ship-accent);

  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}


.mission-complete {
  margin-top: 10px;
  padding: 7px 9px;

  color: var(--ship-good);

  background: rgba(111,164,129,0.07);

  border: 1px solid rgba(111,164,129,0.28);
  border-left: 3px solid var(--ship-good);

  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}


/* =========================================================
   PEBBLESHIP ITEM ARTWORK
   ========================================================= */

.ps-item-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.ps-item-thumb {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.035),
      rgba(0,0,0,0.18)
    ),
    #091018;

  border: 1px solid #293541;
  border-radius: 3px;
}

.ps-item-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}

.ps-item-name {
  min-width: 0;
  font-weight: 600;
  line-height: 1.2;
}

.ps-item-fallback {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: #7f909d;
}

@media (max-width: 720px) {
  .ps-item-thumb {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .ps-item-link {
    gap: 8px;
  }
}


/* =========================================================
   LOADOUT // AVAILABLE EQUIPMENT
   ========================================================= */

.ps-equipment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(127, 144, 157, 0.12);
}

.ps-equipment-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ps-equipment-copy {
  min-width: 0;
  line-height: 1.25;
}

.ps-equipment-copy strong {
  color: #dce5eb;
}

.ps-equipment-row form {
  flex: 0 0 auto;
  margin: 0;
}

@media (max-width: 600px) {
  .ps-equipment-row {
    gap: 8px;
  }

  .ps-equipment-info {
    gap: 8px;
  }

  .ps-equipment-copy {
    font-size: 0.95rem;
  }
}


/* =========================================================
   FABRICATION // COMPONENT ARTWORK
   ========================================================= */

.fabrication-component-art {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.fabrication-component-info {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.fabrication-component-name {
  min-width: 0;
  line-height: 1.2;
}

.fabrication-component-qty {
  flex: 0 0 auto;
  color: #dce5eb;
}

.fabrication-component-art .ps-item-thumb {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
}

@media (max-width: 600px) {
  .fabrication-component-art .ps-item-thumb {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
}


/* =========================================================
   FABRICATION // OUTPUT ARTWORK
   ========================================================= */

.fabrication-output-art {
  display: flex;
  align-items: center;
}

.fabrication-output-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.fabrication-output-info > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.fabrication-output-thumb {
  width: 64px;
  height: 64px;
  flex-basis: 64px;
}

@media (max-width: 600px) {
  .fabrication-output-thumb {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }
}


/* =========================================================
   SHIP OPERATIONS // MISSION ITEM ARTWORK
   ========================================================= */

.mission-req-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mission-req-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.mission-req-name {
  color: #dce5eb;
  line-height: 1.2;
}

.mission-req-thumb {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
}

@media (max-width: 600px) {
  .mission-req-thumb {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .mission-req-copy {
    gap: 6px;
  }
}


/* =========================================================
   CARGO HOLD // ITEM ARTWORK
   ========================================================= */

.cargo-item-thumb {
  width: 58px;
  height: 58px;
  flex-basis: 58px;
}

.cargo-equipped-state {
  display: block;
  margin-top: 4px;

  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;

  color: #6fa481;
}

@media (max-width: 720px) {
  .cargo-item-thumb {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }
}


/* ============================================================
   PEBBLESHIP GLOBAL SALVAGE THEME
   Future-old / repaired / utilitarian ship systems
   ============================================================ */

:root {
  --bg: #090c0b;
  --card: #151814;
  --text: #c9c8b8;
  --muted: #85897d;

  /* Main interactive colour: muted equipment teal */
  --accent: #789c96;

  --pb-panel: #171a16;
  --pb-panel-dark: #0d100e;
  --pb-border: #4c5145;
  --pb-border-soft: rgba(133, 139, 112, .24);

  --pb-olive: #8d9273;
  --pb-teal: #789c96;
  --pb-amber: #b19a62;
  --pb-red: #a8675c;
  --pb-green: #829d75;
}


/* ------------------------------------------------------------
   SHIP BACKGROUND
   ------------------------------------------------------------ */

body {
  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(106, 111, 88, .07),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #10130f 0,
      #090c0b 420px,
      #070908 100%
    );

  color: var(--text);
}


/* ------------------------------------------------------------
   TYPOGRAPHY
   ------------------------------------------------------------ */

h1 {
  color: #c7b67f;
  letter-spacing: .055em;
}

h2,
h3 {
  color: #aeb18e;
}

a {
  color: #8fa9a1;
}

a:hover {
  color: #bdc8b8;
}

.muted,
.panel-sub {
  color: var(--muted);
}


/* ------------------------------------------------------------
   GENERAL CARDS / PANELS
   ------------------------------------------------------------ */

.card,
.panel {
  background:
    linear-gradient(
      135deg,
      rgba(105, 107, 82, .055),
      rgba(22, 25, 21, .94) 36%,
      rgba(11, 14, 12, .97)
    );

  border: 1px solid var(--pb-border-soft);
  border-radius: 3px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 0 20px rgba(0,0,0,.28),
    0 2px 5px rgba(0,0,0,.28);
}


/* Slightly irregular industrial panel impression */

.card {
  position: relative;
}

.card::after {
  content: "";
  position: absolute;
  inset: 2px;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.012);
}


/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */

.btn,
button.btn,
input[type="submit"].btn {
  background:
    linear-gradient(
      180deg,
      #3a3e34,
      #242820
    );

  color: #cbc8ad;

  border: 1px solid #5c614f;
  border-radius: 2px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 1px 2px rgba(0,0,0,.4);

  text-transform: uppercase;
  letter-spacing: .035em;
}

.btn:hover,
button.btn:hover,
input[type="submit"].btn:hover {
  background:
    linear-gradient(
      180deg,
      #484d40,
      #2c3027
    );

  color: #e1ddc2;
  border-color: #777c63;
}

.btn:active,
button.btn:active {
  transform: translateY(1px);
}


/* Preserve dangerous actions but make them less arcade-red */

.btn-danger,
button.btn-danger {
  background:
    linear-gradient(
      #55372f,
      #39241f
    ) !important;

  border-color: #785247 !important;
  color: #d4b1a7 !important;
}


/* ------------------------------------------------------------
   FORM CONTROLS
   ------------------------------------------------------------ */

input,
select,
textarea {
  background: #0c100e;
  color: #c7c7b8;

  border: 1px solid #454b40;
  border-radius: 2px;

  box-shadow:
    inset 0 1px 5px rgba(0,0,0,.55);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #778e82;

  box-shadow:
    inset 0 1px 5px rgba(0,0,0,.55),
    0 0 0 1px rgba(116,151,140,.15);
}


/* ------------------------------------------------------------
   TABLES
   ------------------------------------------------------------ */

.table-shell {
  background: rgba(8, 11, 9, .72);
  border-color: #41463b;
  border-radius: 3px;
}

.table th {
  background:
    linear-gradient(
      #282c25,
      #1d211c
    );

  color: #aaa98e;
  text-transform: uppercase;
  letter-spacing: .035em;
}

.table th,
.table td {
  border-color: rgba(132, 137, 112, .22);
}

.table tbody tr:nth-child(even) td {
  background: rgba(125, 128, 101, .025);
}

.table tr:hover td {
  background: rgba(130, 139, 111, .055);
}


/* ------------------------------------------------------------
   PILLS / BADGES
   ------------------------------------------------------------ */

.pill,
.rank-pill,
.credits-pill,
.badge-rank,
.badge-credits {
  background: rgba(82, 87, 70, .18);
  border: 1px solid rgba(139, 143, 111, .28);
  border-radius: 3px;
  color: #aaa991;
}


/* ------------------------------------------------------------
   NAVIGATION
   ------------------------------------------------------------ */

.topnav {
  background:
    linear-gradient(
      180deg,
      #1d211b,
      #111510
    );

  border-bottom: 1px solid #3f4438;

  box-shadow:
    0 2px 8px rgba(0,0,0,.45);
}

.brand-home,
.brand a {
  color: #c7b67f;
  letter-spacing: .08em;
}

.hamburger,
.topnav a.nav-btn {
  background:
    linear-gradient(
      #34382f,
      #22261f
    );

  border: 1px solid #505646;
  border-radius: 2px;

  color: #c3c1aa;
}

.hamburger:hover,
.topnav a.nav-btn:hover {
  background: #3c4136;
}


/* ------------------------------------------------------------
   NAV DRAWER
   ------------------------------------------------------------ */

.nav-drawer {
  background:
    linear-gradient(
      135deg,
      #1b1e19,
      #0d100e
    );

  border-left-color: #484d40;
}

.nav-drawer-header {
  border-bottom-color: #44493d;
}

.nav-item {
  background:
    linear-gradient(
      100deg,
      rgba(91, 96, 77, .16),
      rgba(27, 30, 25, .92)
    );

  border: 1px solid rgba(127, 132, 105, .25);
  border-radius: 2px;

  color: #bbb9a4;
}

.nav-item:hover {
  background: rgba(108, 113, 90, .18);
}


/* ------------------------------------------------------------
   FLASH / STATUS MESSAGES
   ------------------------------------------------------------ */

.flash {
  background: #151914;
  border-color: #4a5042;
  border-radius: 2px;
}

.flash.success {
  color: #91a985;
  border-color: #536c4c;
}

.flash.warning {
  color: #c1aa70;
  border-color: #75653d;
}

.flash.danger {
  color: #bd8175;
  border-color: #70473f;
}


/* ------------------------------------------------------------
   GLOBAL COMMS BAR
   ------------------------------------------------------------ */

.commsbar {
  background: rgba(15, 18, 15, .97);
  border-top-color: #44493d;
}


/* ------------------------------------------------------------
   MOBILE TABLE TILES
   ------------------------------------------------------------ */

@media (max-width: 720px) {

  .table tr {
    background:
      linear-gradient(
        120deg,
        rgba(86, 91, 73, .10),
        rgba(14, 17, 14, .96)
      );

    border-color: #42473b;
    border-radius: 3px;
  }

}


/* ------------------------------------------------------------
   SCROLLBARS
   ------------------------------------------------------------ */

* {
  scrollbar-color: #555a4b #10130f;
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-track {
  background: #10130f;
}

*::-webkit-scrollbar-thumb {
  background: #555a4b;
  border: 2px solid #10130f;
}



/* ============================================================
   PEBBLESHIP BASE HARDWARE SHELL
   Global vessel structure around individual consoles
   ============================================================ */


/* ------------------------------------------------------------
   VESSEL INTERIOR / BASE LAYER
   ------------------------------------------------------------ */

html {
    background: #050605 !important;
}

body {
    background:
        /* faint overhead illumination */
        radial-gradient(
            ellipse at 50% -8%,
            rgba(151, 130, 78, .055) 0%,
            rgba(67, 69, 56, .025) 32%,
            transparent 58%
        ),

        /* subtle vertical structural shading */
        linear-gradient(
            90deg,
            rgba(0,0,0,.32) 0%,
            rgba(32,34,29,.08) 12%,
            rgba(0,0,0,.05) 50%,
            rgba(32,34,29,.08) 88%,
            rgba(0,0,0,.32) 100%
        ),

        /* hull colour */
        #080a08 !important;

    color: #c9c8b8 !important;
}


/* Very faint worn-metal grain without an image asset */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 3px,
            rgba(255,255,255,.006) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 190px,
            rgba(143,137,108,.012) 191px,
            transparent 192px
        );

    opacity: .72;
}


/* ------------------------------------------------------------
   TOP COMMAND RAIL
   ------------------------------------------------------------ */

.topnav {
    min-height: 48px !important;
    padding: 5px 13px !important;

    background:
        linear-gradient(
            180deg,
            #20231d 0%,
            #151914 16%,
            #0c100d 78%,
            #080b09 100%
        ) !important;

    border-top:
        1px solid rgba(151,147,116,.18) !important;

    border-bottom:
        1px solid #454a3d !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        inset 0 -2px 5px rgba(0,0,0,.65),
        0 3px 10px rgba(0,0,0,.52) !important;

    backdrop-filter: none !important;
}


/* Pebbleship vessel ID */

.brand-home {
    color: #c8b77e !important;

    font-size: .88rem !important;
    font-weight: 750 !important;

    letter-spacing: .115em !important;

    text-shadow:
        0 0 6px rgba(194,162,84,.08) !important;
}


/* Player telemetry beneath logo */

.mobile-player-status {
    color: #7f8574 !important;
    font-size: .62rem !important;
    letter-spacing: .075em !important;
}


/* ------------------------------------------------------------
   HEADER CONTROLS
   ------------------------------------------------------------ */

.topnav .nav-btn,
.topnav a.nav-btn,
.topnav button.nav-btn,
.topnav .hamburger {
    min-height: 32px !important;

    padding: 5px 9px !important;

    background:
        linear-gradient(
            180deg,
            #30342b 0%,
            #20241d 48%,
            #171a16 100%
        ) !important;

    border:
        1px solid #4c5144 !important;

    border-radius:
        2px !important;

    color:
        #b9b7a2 !important;

    font-size:
        .69rem !important;

    font-weight:
        650 !important;

    letter-spacing:
        .055em !important;

    text-transform:
        uppercase;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        inset 0 -1px 0 rgba(0,0,0,.48) !important;
}


.topnav .nav-btn:hover,
.topnav a.nav-btn:hover,
.topnav button.nav-btn:hover,
.topnav .hamburger:hover {
    color:
        #ddd7b7 !important;

    background:
        linear-gradient(
            180deg,
            #3b4034,
            #252a21
        ) !important;

    border-color:
        #686d57 !important;

    text-shadow:
        none !important;
}


/* Menu becomes slightly more obvious than ordinary nav */

.topnav .hamburger {
    border-color:
        #626650 !important;

    color:
        #d0c28f !important;
}


/* ------------------------------------------------------------
   PLAYER STATUS — RIGHT SIDE
   ------------------------------------------------------------ */

.nav-right {
    gap: 6px !important;
}

.user-greeting {
    color: #777d70 !important;

    font-size: .68rem !important;
    letter-spacing: .04em;
}

.topnav .credits-pill,
.topnav .rank-pill {
    padding: 4px 7px !important;

    background:
        rgba(16,19,15,.72) !important;

    border:
        1px solid #3e4337 !important;

    border-radius:
        2px !important;

    color:
        #969985 !important;

    font-size:
        .64rem !important;

    letter-spacing:
        .045em;

    box-shadow:
        inset 0 1px 3px rgba(0,0,0,.42) !important;
}


/* Credits get subtle amber instrument treatment */

.topnav .credits-pill {
    color:
        #bba66e !important;

    border-color:
        rgba(150,125,65,.34) !important;
}


/* ------------------------------------------------------------
   MAIN VESSEL AREA
   ------------------------------------------------------------ */

main.container {
    margin-top: 20px !important;
}


/* Framed physical consoles sit naturally against hull */

main.container > .bridge-frame,
main.container > .comms-frame,
main.container > .comms-room-frame,
main.container > .archive-frame,
main.container > .loadout-armoury-frame,
main.container > .cargo-hold-frame {
    filter:
        drop-shadow(0 14px 18px rgba(0,0,0,.42));
}


/* ------------------------------------------------------------
   LEGAL / SYSTEM FOOTER
   This is deliberately quiet.
   ------------------------------------------------------------ */

.footer {
    margin: 24px auto 58px !important;
    padding: 9px 16px !important;

    color:
        #62685d !important;

    background:
        transparent !important;

    border:
        0 !important;

    font-size:
        .64rem !important;

    letter-spacing:
        .055em;

    text-align:
        center;

    box-shadow:
        none !important;
}


.footer a {
    color:
        #747a6c !important;

    text-transform:
        uppercase;
}


.footer a:hover {
    color:
        #aaa78e !important;

    text-shadow:
        none !important;
}


/* Make old web-style separators much less prominent */

.footer span[aria-hidden="true"] {
    color:
        #3f443b !important;

    padding:
        0 3px;
}


/* ------------------------------------------------------------
   BOTTOM COMMS RAIL
   ------------------------------------------------------------ */

.commsbar {
    min-height: 37px !important;

    background:
        linear-gradient(
            180deg,
            rgba(27,30,25,.985) 0%,
            rgba(13,16,13,.99) 42%,
            rgba(8,10,8,.995) 100%
        ) !important;

    border-top:
        1px solid #4b5042 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02),
        0 -4px 12px rgba(0,0,0,.42) !important;

    backdrop-filter:
        none !important;
}


.commsbar-inner {
    min-height: 37px !important;
}


/* COMMS identifier */

.commsbar-left > strong {
    color:
        #aaa78a !important;

    font-size:
        .62rem !important;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;
}


/* Live event/contact */

.commsbar .pill {
    padding:
        3px 7px !important;

    color:
        #b8a26b !important;

    background:
        rgba(78,63,29,.14) !important;

    border:
        1px solid rgba(154,127,62,.30) !important;

    border-radius:
        2px !important;

    font-size:
        .64rem !important;

    box-shadow:
        none !important;
}


.commsbar .muted {
    color:
        #646a5f !important;

    font-size:
        .64rem !important;
}


/* Admin vessel broadcast */

.commsbar .admin-msg {
    color:
        #b8aa7c !important;

    font-size:
        .66rem !important;
}


/* Broadcast input */

.commsbar .broadcast input {
    height:
        27px !important;

    padding:
        4px 8px !important;

    color:
        #aaa994 !important;

    background:
        #080b09 !important;

    border:
        1px solid #3e4438 !important;

    border-radius:
        2px !important;

    font-size:
        .65rem !important;

    box-shadow:
        inset 0 1px 4px rgba(0,0,0,.55) !important;
}


.commsbar .broadcast input::placeholder {
    color:
        #51574d !important;
}


/* SEND control */

.commsbar .broadcast .nav-btn {
    min-height:
        27px !important;

    padding:
        4px 9px !important;

    color:
        #c1ad76 !important;

    background:
        linear-gradient(
            #35372d,
            #20231c
        ) !important;

    border:
        1px solid #555947 !important;

    border-radius:
        2px !important;

    font-size:
        .62rem !important;

    letter-spacing:
        .07em;
}


/* ------------------------------------------------------------
   NAV DRAWER — MATCH PHYSICAL SHIP
   ------------------------------------------------------------ */

.nav-drawer {
    background:
        linear-gradient(
            135deg,
            #1d211b,
            #0b0e0c 72%
        ) !important;

    border-left:
        1px solid #515648 !important;

    box-shadow:
        -16px 0 35px rgba(0,0,0,.55) !important;
}


.nav-drawer-header {
    background:
        linear-gradient(
            #272b23,
            #171a16
        ) !important;

    border-bottom:
        1px solid #4c5144 !important;
}


.nav-drawer-header strong {
    color:
        #c0b37f !important;
}


.nav-item {
    color:
        #aaa997 !important;

    background:
        linear-gradient(
            90deg,
            rgba(87,91,72,.12),
            rgba(19,22,18,.88)
        ) !important;

    border:
        1px solid rgba(116,121,96,.24) !important;

    border-radius:
        2px !important;
}


.nav-item:hover {
    color:
        #d0cdb3 !important;

    background:
        rgba(105,110,87,.16) !important;

    border-color:
        rgba(145,148,117,.40) !important;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 720px) {

    .topnav {
        min-height:
            48px !important;

        padding:
            5px 8px !important;
    }

    .brand-home {
        font-size:
            .78rem !important;
    }

    .mobile-player-status {
        font-size:
            .57rem !important;
    }

    .topnav .hamburger {
        min-height:
            34px !important;
    }

    .footer {
        margin-bottom:
            62px !important;

        padding-left:
            10px !important;

        padding-right:
            10px !important;
    }

    .commsbar {
        min-height:
            39px !important;
    }

}



/* ============================================================
   PEBBLESHIP GLOBAL HULL WALL
   Physical vessel wall behind all console frames
   ============================================================ */

html {
    background: #050605 !important;
}

body {
    background:
        linear-gradient(
            rgba(3, 4, 3, .18),
            rgba(3, 4, 3, .28)
        ),
        url("/static/images/pebbleship/hull-wall-master.png")
        center top / cover fixed no-repeat !important;

    color: #c9c8b8 !important;
}


/* Remove the old synthetic grain layer now that
   the actual hull artwork supplies the texture */

body::before {
    content: none !important;
}


/* Slight breathing room so page frames feel mounted
   onto the wall rather than touching the navigation rail */

main.container {
    margin-top: 24px !important;
}


/* Give the physical consoles a little separation
   from the hull wall */

main.container > .bridge-frame,
main.container > .comms-frame,
main.container > .comms-room-frame,
main.container > .archive-frame,
main.container > .loadout-armoury-frame,
main.container > .cargo-hold-frame {
    filter:
        drop-shadow(0 14px 20px rgba(0,0,0,.58))
        drop-shadow(0 2px 2px rgba(0,0,0,.72)) !important;
}


/* Smaller screens:
   keep the wall filling the viewport but avoid
   awkward fixed-background behaviour on mobile */

@media (max-width: 720px) {

    body {
        background:
            linear-gradient(
                rgba(3, 4, 3, .20),
                rgba(3, 4, 3, .30)
            ),
            url("/static/images/pebbleship/hull-wall-master.png")
            center top / cover no-repeat !important;

        background-attachment: scroll !important;
    }

}



/* ============================================================
   PEBBLESHIP HULL WALL — LARGE / FULLSCREEN FIX
   Allow the generic hull wall to extend indefinitely.
   ============================================================ */

html {
    min-height: 100%;
    background: #050605 !important;
}

body {
    min-height: 100vh;

    background-image:
        linear-gradient(
            rgba(3,4,3,.18),
            rgba(3,4,3,.28)
        ),
        url("/static/images/pebbleship/hull-wall-master.png") !important;

    /*
       Keep the artwork at a sensible physical scale rather
       than stretching one copy across the entire browser.
    */
    background-size:
        100% 100%,
        1536px 1024px !important;

    background-position:
        0 0,
        center top !important;

    /*
       Dark overlay does not repeat visually.
       Hull plates repeat to fill any screen/page size.
    */
    background-repeat:
        no-repeat,
        repeat !important;

    background-attachment:
        fixed,
        fixed !important;
}


/* Very large displays: make each hull section slightly larger
   so the repeating pattern remains subtle. */

@media (min-width: 1900px) {

    body {
        background-size:
            100% 100%,
            1920px 1280px !important;
    }
}


/* Mobile: scrolling fixed backgrounds can be expensive. */

@media (max-width: 720px) {

    body {
        background-size:
            100% 100%,
            1100px 733px !important;

        background-attachment:
            scroll,
            scroll !important;
    }
}