/* A working trade manifest, using the codex's existing game palette. */

body > main { max-width: 1320px; }
[hidden] { display: none !important; }
.trade-workbench { display: grid; grid-template-columns: minmax(330px, .85fr) minmax(420px, 1.15fr); gap: 24px; margin-top: 26px; }
body > main .trade-input, body > main .trade-output, body > main .trade-processing, body > main .trade-cargo { padding: 22px; margin: 0; border: 1px solid #74613e; }
body > main .trade-processing, body > main .trade-cargo { margin-top: 24px; }
.trade-step { display: inline-block; margin-right: 10px; color: #928665; font: 18px ui-monospace, monospace; }
body > main .trade-workbench h2, body > main .trade-processing h2, body > main .trade-cargo h2 { font-size: 22px; margin: 0 0 14px; }
.trade-help { font-size: 13px; line-height: 1.7; color: #c5baa0; }
.trade-assumption { color: #dac58e; font-size: 13px; margin: 20px 0 0; border-left: 3px solid #be9939; padding-left: 12px; }
#trade-planner button { cursor: pointer; font: inherit; color: #e8d5a6; background: #363329; border: 1px solid #78633d; border-radius: 2px; padding: 8px 12px; }
#trade-planner button:hover { background: #4c422c; border-color: #deb85c; }
#trade-planner button:active { transform: translateY(1px); }
#stock-bulk { display: block; width: 100%; box-sizing: border-box; resize: vertical; margin: 8px 0; padding: 10px; font: inherit; font-size: 13px; background: #1e211a; border: 1px solid #78633d; color: #e8d5a6; }
.trade-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 286px; overflow-y: auto; margin: 12px 0; border-top: 1px solid #75613e; }
#trade-planner .trade-catalog button { display: flex; align-items: center; gap: 8px; padding: 8px; background: #25271f; border: 0; border-bottom: 1px solid #4d4635; border-right: 1px solid #4d4635; text-align: left; font-size: 13px; }
.trade-catalog button span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.trade-catalog button small, .trade-basket-row small { display: block; color: #b4a888; font-size: 11px; margin-top: 3px; }
.trade-catalog button b { color: #eac14f; font-size: 19px; }
.trade-catalog img, .trade-basket-row img { object-fit: contain; flex-shrink: 0; }
.trade-basket-heading { display: flex; align-items: center; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.trade-basket-heading h3 { margin: 0 auto 0 0; font-size: 17px; }
#trade-planner .trade-basket-heading button { font-size: 12px; padding: 5px 8px; }
.trade-basket-row { display: flex; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid #574b32; font-size: 13px; }
.trade-basket-row > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.trade-basket-row label { font-size: 11px; color: #bdae8e; }
.trade-basket-row input { display: block; width: 65px; min-height: 36px; margin-top: 5px; background: #1e211a; border: 1px solid #77613c; color: #f1e6ca; padding: 5px; font: inherit; }
#trade-planner .trade-basket-row button { border: 0; background: transparent; font-size: 20px; padding: 5px; }
.trade-empty { padding: 22px 0; color: #c7bba0; font-size: 14px; }
body > main .trade-settings { margin: 12px 0; padding: 12px; background: #24261e; }
.trade-settings summary, .trade-mechanics summary, .trade-shelves > summary { color: #edcf83; cursor: pointer; }
.trade-controls .trade-check { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.trade-controls .trade-check input { display: inline-block; width: auto; min-height: auto; margin: 0; flex: none; }
.trade-controls input[type=number] { width: 110px; }
.trade-controls select { max-width: 100%; }
.trade-output .trade-controls label { min-width: 0; flex: 1 1 42%; }
.trade-output .trade-controls select { width: 100%; }
.trade-summary { border-top: 2px solid #a48640; border-bottom: 1px solid #7f693e; padding: 18px 0; margin: 18px 0 12px; color: #e0cfa5; font-size: 14px; }
.trade-summary > span { display: block; color: #bba982; font-size: 12px; }
.trade-summary > strong { display: block; margin-top: 6px; font-size: 25px; color: #f2d486; }
.trade-summary p { margin: 8px 0 0; }
.trade-summary b { color: #f2cc62; font: 22px ui-monospace, monospace; }
.trade-line { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 0; border-bottom: 1px solid #504631; font-size: 14px; }
.trade-line small { grid-column: 1 / -1; color: #c2b290; line-height: 1.7; }
.trade-demand { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.trade-demand label { display: flex; gap: 6px; align-items: center; }
.trade-demand input, .trade-check input, .shelf-state input { accent-color: #e1b537; }
.process-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 170px; gap: 16px; padding: 22px 0; border-top: 1px solid #675739; }
.process-rank { font: 22px ui-monospace, monospace; color: #938164; padding-top: 4px; }
.process-kind { color: #a59c81; font-size: 12px; }
.process-recipe h3 { font-size: 20px; margin: 3px 0 8px; }
.process-recipe h3 a { text-decoration: none; }
.process-recipe p { font-size: 13px; color: #d4c8aa; margin: 7px 0; line-height: 1.7; }
.process-recipe small { color: #a99d7e; }
.process-recipe .process-caution { color: #d7b779; }
.process-recipe details, #trade-breakdown details { padding: 8px 0; background: transparent; border: 0; margin: 8px 0 0; }
.process-recipe summary, #trade-breakdown summary { cursor: pointer; color: #c7af78; font-size: 13px; }
.process-gain { border-left: 1px solid #665539; padding-left: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.process-gain span { color: #bcac8b; font-size: 12px; }
.process-gain strong { font: 32px ui-monospace, monospace; color: #d0dca0; }
.process-gain small { font-size: 12px; color: #c5b897; }
.trade-shelves { margin-top: 24px; padding: 20px; border: 1px solid #75613e; }
.shelf-state { white-space: nowrap; font-size: 12px; }
.trade-table thead { display: table-header-group; }
.cargo-name { display: flex; align-items: center; gap: 10px; min-width: 145px; }
.cargo-name img { flex: none; object-fit: contain; }
.cargo-name small, .cargo-needed small { display: block; color: #b4a888; font-size: 11px; margin-top: 4px; }
.cargo-density { color: #f2cc62; font: 20px ui-monospace, monospace; }
.cargo-size { white-space: nowrap; }
.cargo-needed { min-width: 160px; }

@media (max-width: 1000px) {
  .trade-workbench { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 560px) {
  body > main .trade-input, body > main .trade-output, body > main .trade-processing, body > main .trade-cargo, .trade-shelves { padding: 16px; }
  .trade-basket-row img { display: none; }
  .trade-basket-row input { width: 54px; }
  .trade-basket-row { gap: 6px; }
  .trade-controls label { min-width: 0; }
  .trade-controls select, .trade-controls input { width: 100%; min-width: 0; }
  .process-row { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
  .process-rank { font-size: 17px; }
  .process-gain { grid-column: 2; border: 0; padding: 0; align-items: flex-start; }
  .process-gain strong { font-size: 26px; }
}

body > main .trade-hero { border-bottom: 1px solid #735e38; padding: 12px 0 26px; }
.trade-hero h1 { font-size: clamp(32px, 4vw, 52px); color: #f0be37; text-shadow: 3px 3px #080a06; margin: 10px 0; letter-spacing: .05em; }
.trade-subtitle { color: #c3b79c; font-size: 15px; margin: 4px 0 0; }

.trade-mechanics { border: 1px solid #6d5a36; background: linear-gradient(110deg, #2c2c22, #23241d); padding: 16px 20px; margin: 22px 0; box-shadow: inset 3px 0 #8d7844; }
.trade-mechanics h2 { margin: 0 0 10px; font-size: 20px; color: #efd49b; }
.trade-mechanics p { margin: 8px 0; color: #d8cdb2; font-size: 14px; line-height: 1.75; }
.trade-mechanics strong { color: #f1c14a; }
.trade-mechanics code { background: #1b1c16; border: 1px solid #4d4636; padding: 1px 6px; font-size: 12px; color: #e8d9ae; }

.trade-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 18px 0 6px; }
.trade-controls label { font-size: 12px; color: #c7b897; }
.trade-controls input, .trade-controls select { display: block; margin-top: 6px; min-height: 42px; padding: 9px 11px; border: 1px solid #7c6842; border-radius: 2px; background: #22251e; color: #f1e6ca; font: inherit; font-size: 14px; }
.trade-controls input[type="search"] { min-width: 220px; }
.trade-controls .trade-shared-only { display: flex; align-items: center; gap: 7px; min-height: 42px; font-size: 13px; }
.trade-controls .trade-shared-only input { display: inline-block; min-height: auto; margin: 0; padding: 0; accent-color: #e1b537; }
#trade-status { color: #e5c780; font-size: 13px; margin: 4px 0; min-height: 20px; }

.trade-points-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
body > main .trade-points-nav a { padding: 8px 13px; text-decoration: none; font-size: 13px; color: #e2d5b7; border: 1px solid #6a5836; background: #26271f; }
body > main .trade-points-nav a:hover { border-color: #d8b45a; color: #f4d98c; }

.trade-point { margin: 30px 0 36px; }
.trade-point h2 { font-size: 24px; color: #efd49b; margin: 0 0 8px; }
.trade-shop-id { margin-left: 12px; font-size: 12px; font-weight: 400; color: #b5a279; border: 1px solid #5c5138; padding: 3px 9px; vertical-align: 4px; }
.trade-hint, .trade-offer { margin: 5px 0; font-size: 13px; color: #c3b89f; }
.trade-hint::before { content: "❝ "; color: #8d7844; }

.table-scroll { overflow-x: auto; }
.trade-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.trade-table th, .trade-table td { border-bottom: 1px solid #453f30; padding: 8px 10px; text-align: left; vertical-align: middle; }
.trade-table thead th, .trade-table tr:first-child th[scope="col"] { color: #b5a279; font-size: 12px; font-weight: 400; border-bottom: 1px solid #6d5a36; white-space: nowrap; }
.trade-table tbody th { font-weight: 400; }
.trade-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trade-table td.num { color: #f0e3c0; }
.trade-table a { color: #ede0bd; text-decoration: none; border-bottom: 1px dotted #8d7844; }
.trade-table a:hover { color: #f4d98c; }
.shared-badge { margin-left: 8px; font-size: 10px; color: #72551a; background: #e3b434; padding: 1px 6px; vertical-align: 2px; white-space: nowrap; }
.trade-icon { width: 40px; height: 40px; image-rendering: auto; display: block; }
.trade-icon-empty { border: 1px dashed #514b3e; border-radius: 2px; }
.trade-cat { display: inline-block; font-size: 11px; color: #d8cdb2; border: 1px solid #5c5138; background: #2a2b22; padding: 2px 8px; white-space: nowrap; }
.trade-table tr[hidden] { display: none; }

.trade-note { color: #b5ae9c; font-size: 13px; margin: 26px 0; }
.trade-note code { background: #1b1c16; border: 1px solid #4d4636; padding: 1px 6px; font-size: 12px; }

@media (max-width: 720px) {
  .trade-table th, .trade-table td { padding: 7px 7px; }
  .trade-controls input[type="search"] { min-width: 0; width: 100%; }
  .trade-controls label { flex: 1 1 45%; }
}

/* Unified trade, inventory and value-planning workspace. */
.market-jump { position: sticky; top: 0; z-index: 8; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 24px; border: 1px solid #665536; background: rgba(25, 25, 22, .96); backdrop-filter: blur(8px); }
body > main .market-jump a { padding: 12px 16px; color: #d9caab; text-align: center; text-decoration: none; border-right: 1px solid #51452f; }
body > main .market-jump a:last-child { border-right: 0; }
body > main .market-jump a:hover { color: #f2cd68; background: #302d23; }
.market-section { scroll-margin-top: 64px; margin: 0 0 24px; padding: 24px; border: 1px solid #74613e; background: linear-gradient(145deg, rgba(43, 44, 35, .55), rgba(28, 29, 24, .45)); }
.market-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.market-heading h2 { margin: 2px 0 4px; font-size: 27px; color: #efd49b; }
.market-heading p { margin: 0; color: #bdb198; font-size: 13px; }
.market-kicker { color: #a38e5d !important; font: 11px ui-monospace, monospace; letter-spacing: .16em; }
.market-point-select { min-width: 280px; color: #c7b897; font-size: 12px; }
.market-point-select select { display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: 9px 11px; border: 1px solid #7c6842; background: #22251e; color: #f1e6ca; font: inherit; }
.market-point-summary { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(420px, 1.4fr) auto; align-items: center; gap: 22px; padding: 20px; border: 1px solid #665536; background: #22241d; }
.market-point-summary span { color: #a99b7d; font-size: 11px; }
.market-point-summary strong { display: block; margin: 5px 0; color: #f2d486; font-size: 23px; }
.market-point-summary p { margin: 0; color: #bdb198; font-size: 12px; }
.market-point-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.market-point-summary dl div { padding: 0 14px; border-left: 1px solid #51462f; }
.market-point-summary dt { color: #a99b7d; font-size: 11px; }
.market-point-summary dd { margin: 5px 0 0; color: #e3d4b4; font-size: 13px; }
.market-shelf-toolbar { padding-bottom: 0; }
.market-shelf .cargo-name { min-width: 220px; }
.market-context { max-width: 320px; padding: 9px 12px; color: #e8cc83; border: 1px solid #665536; background: #24251e; font-size: 12px; }
.market-context-wrap { min-width: 280px; }
.market-context-wrap label { color: #c7b897; font-size: 12px; }
.market-context-wrap select { display: block; width: 100%; min-height: 42px; margin: 6px 0; padding: 8px 10px; border: 1px solid #7c6842; background: #22251e; color: #f1e6ca; font: inherit; }
.market-context-wrap .market-context { display: block; box-sizing: border-box; max-width: none; }
.market-tabs { position: sticky; top: 45px; z-index: 7; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 20px; border: 1px solid #695735; background: rgba(31, 31, 26, .97); }
#trade-planner .market-tabs button { min-height: 48px; border: 0; border-right: 1px solid #584a31; border-radius: 0; background: transparent; }
#trade-planner .market-tabs button:last-child { border-right: 0; }
#trade-planner .market-tabs button[aria-selected="true"] { color: #171811; background: #d7b34e; font-weight: 700; }
.market-plan-panel { min-height: 280px; }
.market-plan-panel > .trade-controls:first-child { padding-top: 0; }
.market-subtool { margin-top: 24px; padding: 16px; border: 1px solid #5f5034; background: #22231d; }
.market-subtool > summary { color: #edcf83; cursor: pointer; font-size: 17px; }
.market-winner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 20px; margin: 4px 0 18px; padding: 18px 20px; border: 1px solid #6c5b38; background: linear-gradient(110deg, #343527, #24261e); }
.market-winner > span { color: #b9aa88; font-size: 12px; }
.market-winner strong { display: flex; align-items: center; gap: 10px; color: #f2d486; font-size: 24px; }
.market-winner p { grid-row: 1 / 3; grid-column: 2; align-self: center; margin: 0; color: #d0dca0; font: 16px ui-monospace, monospace; }
.market-migration { max-width: 520px; color: #eadfca; border: 1px solid #8a7242; background: #22231d; box-shadow: 0 20px 80px #000; }
.market-migration::backdrop { background: rgba(8, 9, 7, .78); }
.market-migration h2 { color: #f2d486; }
.market-migration div { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

@media (max-width: 900px) {
  .market-point-summary { grid-template-columns: minmax(0, 1fr); }
  .market-point-summary dl div:first-child { border-left: 0; padding-left: 0; }
  .market-point-summary button { justify-self: start; }
}
@media (max-width: 620px) {
  .market-jump { margin-left: -8px; margin-right: -8px; }
  body > main .market-jump a { padding: 10px 6px; font-size: 12px; }
  .market-section { padding: 16px; }
  .market-heading { display: block; }
  .market-point-select, .market-context-wrap, .market-context { display: block; min-width: 0; max-width: none; margin-top: 14px; }
  .market-point-summary dl { grid-template-columns: 1fr; gap: 10px; }
  .market-point-summary dl div { border-left: 0; border-top: 1px solid #51462f; padding: 10px 0 0; }
  .market-tabs { top: 39px; margin-left: -8px; margin-right: -8px; }
  #trade-planner .market-tabs button { padding: 8px 5px; font-size: 12px; }
  .market-shelf th:nth-child(2), .market-shelf td:nth-child(2), .market-shelf th:nth-child(4), .market-shelf td:nth-child(4) { display: none; }
  .market-winner { grid-template-columns: minmax(0, 1fr); }
  .market-winner p { grid-row: auto; grid-column: auto; margin-top: 8px; }
}