/* Reusable upgrade controls, shared by the two workshop panes. */
.cp-simple {
.upgrade-profile, .upgrade-pilot-profile { display: flex; align-items: center; gap: 20px; min-height: 164px; margin: 12px 0 16px; }
.upgrade-profile > div, .upgrade-pilot-profile > div { flex: 1; min-width: 0; }
.upgrade-callsign { display: block; font: 600 23px/1.2 var(--display); color: var(--amber); overflow-wrap: anywhere; }
.upgrade-pilot-profile small { display: block; font-size: 11px; margin-top: 5px; color: var(--muted); }
.upgrade-profile h3 { font: 600 22px/1.15 var(--display); margin: 0 0 6px; overflow-wrap: anywhere; }
.upgrade-role { color: var(--cyan); border: 1px solid #426571; border-radius: 3px; padding: 2px 8px; font-size: 10px; }
.upgrade-profile dl { max-width: 220px; margin: 16px 0 0; text-align: left; }
.upgrade-profile dl > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.upgrade-profile dt { color: var(--muted); font-size: 10px; }
.upgrade-profile dd { margin: 0; font: 600 19px var(--display); color: var(--cyan); }
.upgrade-main { padding: 20px; min-width: 0; }
.upgrade-section-title { margin: 0 0 12px; font: 600 20px/1.2 var(--display); color: var(--cyan); }
.upgrade-row { display: grid; grid-template-columns: minmax(0,1fr) 100px; gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid #29424d88; }
.upgrade-copy h3 { font: 600 18px/1.2 var(--display); margin: 0 0 4px; }
.upgrade-copy p { color: #b9cdd6; font-size: 11px; line-height: 1.4; }
.upgrade-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.upgrade-progress small { color: var(--muted); font-size: 9px; }
.upgrade-pips { display: flex; gap: 3px; }
.upgrade-pips i { width: 12px; height: 4px; background: #29424d; }
.upgrade-pips i.on { background: var(--amber); }
.upgrade-paints { margin-top: 18px; padding-top: 14px; border-top: 1px solid #29424d88; }
.paint-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.paint-tile { display: grid; gap: 4px; justify-items: stretch; padding: 7px; min-height: 0; text-align: left; border-color: #29424d; background: #10222a; }
.paint-tile i { display: block; height: 26px; border: 1px solid #0008; }
.paint-tile span { font-size: 11px; line-height: 1.2; }
.paint-tile small { font-size: 10px; color: var(--muted); }
.paint-tile:not(:disabled):not(.on):hover small { color: var(--amber); }
.paint-tile.on { border-color: var(--cyan); }
.paint-tile.on small { color: var(--cyan); }
.paint-tile:disabled { opacity: .55; }
/* an event's paint (特別任務's reward): a row of its own under the eight, locked till it's won */
.paint-tile.special { grid-column: 1 / -1; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-color: #6d5a1f; }
.paint-tile.special i { height: 22px; }
.paint-tile.special small { color: var(--amber); }
.paint-tile.special.locked:disabled { opacity: .78; filter: saturate(.55); }
.upgrade-buy { padding: 7px 6px; min-height: 52px; border-color: #715c3d; background: #32291b; color: var(--amber); }
.upgrade-buy span { display: block; font-size: 11px; }
.upgrade-buy strong { display: block; font: 600 17px/1.2 var(--display); margin-top: 3px; }
.upgrade-buy:hover { background: #493820; border-color: var(--amber); }
.upgrade-buy:disabled { background: #10202a; border-color: var(--line); color: var(--muted); opacity: .75; }
.upgrade-skills { padding: 20px; min-width: 0; background: #0c202655; }
.upgrade-skills-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.upgrade-skills-heading > span { color: var(--amber); font-size: 11px; white-space: nowrap; }
.upgrade-skills-heading .upgrade-section-title { margin-bottom: 0; }
.upgrade-skills-note { font-size: 10px; line-height: 1.5; color: var(--muted); margin: 18px 0 0; }
.pilot-skill-option { padding: 12px 0; border-top: 1px solid #29424d88; }
.pilot-skill-heading { display: flex; align-items: center; gap: 9px; }
.pilot-skill-heading svg { width: 27px; height: 27px; flex: 0 0 27px; color: var(--cyan); }
.pilot-skill-heading h4 { margin: 0; font: 600 18px/1.15 var(--display); }
.pilot-skill-option.unlocked .pilot-skill-heading svg { color: var(--amber); }
.pilot-skill-option:not(.unlocked) :is(.pilot-skill-heading svg,h4,.pilot-skill-trigger,p) { color: var(--muted); }
.pilot-skill-option:not(.unlocked) .skill-buy { color: var(--muted); border-color: #527582; background: #10202a; }
.pilot-skill-option:not(.unlocked) .skill-buy:not(:disabled):hover { color: var(--amber); border-color: var(--amber); }
.skill-owned { margin-left: auto; font-size: 10px; color: #a5d8af; white-space: nowrap; }
.pilot-skill-trigger { display: block; margin: 8px 0 4px; font-size: 11px; font-weight: 500; color: var(--cyan); }
.pilot-skill-option > p { font-size: 11px; line-height: 1.6; color: #b9cdd6; }
.pilot-skill-purchase { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.pilot-skill-purchase small { font-size: 10px; color: var(--muted); }
.skill-buy { margin-left: auto; min-height: 36px; padding: 5px 9px; font-size: 11px; color: var(--amber); border-color: #715c3d; background: #32291b; white-space: nowrap; }
.skill-buy:disabled { color: var(--muted); background: #10202a; border-color: var(--line); opacity: .75; }
.upgrade-footer { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-top: 1px solid var(--line); background: #10212b; }
.upgrade-footer p { font-size: 9px; color: var(--muted); }
.upgrade-footer .upgrade-feedback { font-size: 11px; color: #a5d8af; margin-bottom: 5px; }
.upgrade-feedback:empty { display: none; }
.upgrade-footer button { margin-left: auto; font-size: 12px; border-color: #527582; white-space: nowrap; }

}
/* The workshop is another page in the same centered campaign cockpit. */
/* Use the mission rail's column boundary for the tab rail on every page. */
#campaign[data-view="board"] .cp-top {
  gap:16px; padding-inline:var(--campaign-gutter);
  grid-template-columns:28px calc(var(--mission-rail-width) + var(--mission-gap) - 60px) minmax(320px,1fr) auto auto;
}
#campaign[data-view="board"] .cp-tabs { justify-self:start; max-width:680px; grid-column:3; grid-row:1; }
@media(max-height:850px) {
  #campaign[data-view="board"] .cp-top { grid-template-columns:28px calc(var(--mission-rail-width) + var(--mission-gap) - 60px) minmax(320px,1fr) auto; }
}
@media(max-width:1799px) {
  #campaign[data-view="board"] .cp-head .cp-eyebrow { display:none; }
  #campaign[data-view="board"] .cp-head h1 { font-size:clamp(20px,2.1vw,38px); }
}
@media(orientation:landscape) and (max-height:500px) {
  #campaign[data-view="board"] .cp-top { grid-template-columns:28px calc(var(--mission-rail-width) + var(--mission-gap) - 60px) minmax(270px,1fr) auto; }
}
#campaign[data-view="board"][data-tab="upgrade"] .cp-body { display:flex; overflow:hidden; padding-bottom:max(24px,6vh); }
#campaign[data-view="board"][data-tab="upgrade"] .cp-panel { flex:1; min-width:0; min-height:0; display:flex; overflow:hidden; }
.cp-simple.campaign-upgrade {
  width:100%; max-width:1440px; height:100%; min-height:0; margin-inline:auto;
  display:grid; grid-template-rows:auto auto minmax(0,1fr) auto;
  border:1px solid var(--line); background:#081820;
  & .upgrade-toolbar { display:flex; align-items:center; gap:20px; padding:16px 24px; border-bottom:1px solid var(--line); background:#0b1b23; }
  & .upgrade-toolbar small { font-size:10px; color:var(--muted); letter-spacing:.1em; }
  & .upgrade-toolbar h2 { font:600 28px/1.15 var(--display); color:var(--amber); margin-top:4px; }
  & .upgrade-tabs { display:flex; align-self:stretch; margin-left:auto; gap:4px; }
  & .upgrade-tabs button { min-width:112px; border:0; border-bottom:2px solid transparent; background:none; color:var(--muted); font-size:16px; }
  & .upgrade-tabs button[aria-pressed="true"] { color:var(--amber); border-bottom-color:var(--amber); background:#f5c2730a; }
  & .upgrade-units { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; padding:12px 24px; border-bottom:1px solid var(--line); }
  & .upgrade-unit { display:flex; align-items:center; min-width:0; gap:10px; padding:5px 10px; text-align:left; background:#10232c; }
  & .upgrade-unit img { width:40px; height:54px; object-fit:contain; flex-shrink:0; }
  &[data-section="pilot"] .upgrade-unit img { object-fit:cover; object-position:center top; }
  & .upgrade-unit span { min-width:0; }
  & .upgrade-unit b { display:block; font:600 17px/1.2 var(--display); overflow-wrap:anywhere; }
  & .upgrade-unit small { display:block; margin-top:4px; font-size:10px; color:var(--muted); overflow-wrap:anywhere; }
  & .upgrade-unit[aria-pressed="true"] { border-color:var(--amber); background:#2c2a20; box-shadow:inset 0 -2px var(--amber); }
  & .upgrade-unit[aria-pressed="true"] b { color:var(--amber); }
  & .upgrade-body { min-height:0; display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,1.4fr); overflow:hidden; }
  & .upgrade-identity { min-width:0; min-height:0; padding:18px 24px; display:grid; grid-template-rows:minmax(0,1fr) auto auto; border-right:1px solid var(--line); background:radial-gradient(ellipse at 50% 65%,#24435266,transparent 70%),#0a1c25; }
  & .upgrade-model { min-height:0; position:relative; background:radial-gradient(ellipse at 50% 90%,#82d7ed12,transparent 50%); }
  & .upgrade-model-view { position:absolute; inset:0; }
  & .upgrade-model canvas { display:block; width:100%; height:100%; }
  & .upgrade-model-control { position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; background:none; touch-action:none; cursor:grab; }
  & .upgrade-model-control:hover { background:none; }
  & .upgrade-model-control.model-dragging { cursor:grabbing; }
  & .upgrade-model-status { position:absolute; inset:45% 12px auto; text-align:center; font-size:12px; color:var(--muted); }
  & .upgrade-model .model-emoji { position:absolute; top:12%; left:65%; z-index:1; font-size:34px; pointer-events:none; }
  & .upgrade-profile { min-height:0; margin:12px 0 0; gap:20px; display:flex; align-items:center; }
  & .upgrade-profile > div { flex:1; }
  & .upgrade-profile h3 { font-size:24px; }
  & .upgrade-profile dl { min-width:120px; margin:0; }
  & .upgrade-profile dl > div { margin-top:4px; }
  &[data-section="mech"] .upgrade-identity { position:relative; display:block; padding:0; }
  & .upgrade-model { position:absolute; inset:0; }
  & .upgrade-profile { position:absolute; z-index:1; inset:16px; align-items:flex-start; margin:0; pointer-events:none; }
  & .upgrade-profile > div { flex:0 1 auto; padding:10px 12px; border:1px solid #42657188; background:#081820cf; }
  & .upgrade-profile dl { position:absolute; right:0; bottom:0; margin:0; padding:0; border:0; background:none; text-shadow:0 1px 4px #000; }
  & .upgrade-pilot-profile { position:relative; display:block; margin:0; padding:0; }
  & .upgrade-portrait { position:absolute; right:0; bottom:0; width:83%; height:100%; }
  & .upgrade-portrait img { display:block; width:100%; height:100%; object-fit:contain; object-position:right bottom; mask-image:linear-gradient(90deg,transparent,#000 26%); }
  & .pilot-bio { position:absolute; z-index:1; top:16px; left:16px; max-width:62%; max-height:calc(100% - 32px); margin:0; padding:0 4px 0 0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#426277 transparent; text-shadow:0 1px 4px #000,0 1px 8px #071219; }
  & .pilot-bio > div { display:grid; grid-template-columns:max-content minmax(0,1fr); align-items:baseline; gap:8px; margin-bottom:7px; font-size:12px; line-height:1.55; }
  & .pilot-bio dt { color:#a7c0cd; }
  & .pilot-bio dt::after { content:':'; }
  & .pilot-bio dd { margin:0; color:var(--text); overflow-wrap:anywhere; }
  & .pilot-bio .upgrade-callsign { font:600 17px/1.4 var(--display); color:var(--amber); }
  & .upgrade-pilot-profile .pilot-skill-badges { position:absolute; z-index:1; bottom:12px; left:auto; right:12px; justify-content:end; background:none; padding:0; }
  & .upgrade-main,& .upgrade-skills { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:20px 24px; scrollbar-width:thin; scrollbar-color:#426277 #0c2030; }
  & .upgrade-paints { margin:0; padding:0; border:0; }
  & .upgrade-components { margin-top:24px; padding-top:18px; border-top:1px solid var(--line); }
  & .upgrade-skill-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:12px; margin-top:18px; }
  & .pilot-skill-option { display:flex; flex-direction:column; gap:6px; padding:16px; border:1px solid var(--line); background:#10232c; }
  & .pilot-skill-heading { flex-wrap:wrap; }
  & .pilot-skill-heading h4 { font-size:20px; }
  & .pilot-skill-trigger { margin-top:8px; }
  & .pilot-skill-option > p { font-size:12px; line-height:1.7; }
  & .pilot-skill-purchase { flex-wrap:wrap; margin-top:auto; padding-top:14px; }
  & .pilot-skill-purchase small { flex-basis:100%; }
  & .skill-buy { min-height:44px; }
  & .skill-owned { margin-left:0; }
  & .skill-equipped { border:1px solid #6aab9f; border-radius:2px; padding:2px 6px; font-size:10px; line-height:1.3; color:#a5dfc6; white-space:nowrap; }
  & .pilot-skill-equip { display:flex; justify-content:end; margin-top:auto; padding-top:14px; }
  & .skill-equip { min-height:44px; padding:6px 12px; color:var(--cyan); border-color:#527582; font-size:12px; }
  & .upgrade-skills-note { margin-top:8px; }
  & .upgrade-footer { padding:10px 24px; gap:16px; }
  & .upgrade-footer p { font-size:11px; }
  & .upgrade-footer button { min-height:44px; }
  & .paint-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  & .paint-tile { min-height:82px; }
}
@media(max-width:1100px) {
  .cp-simple.campaign-upgrade {
    & .upgrade-units { padding-inline:12px; gap:6px; }
    & .upgrade-unit { gap:5px; padding-inline:6px; }
    & .upgrade-unit b { font-size:14px; }
    & .upgrade-unit img { width:28px; height:44px; }
    & .upgrade-body { grid-template-columns:minmax(230px,.8fr) minmax(0,1.2fr); }
    & .upgrade-identity,& .upgrade-main,& .upgrade-skills { padding:14px; }
  }
}
@media(orientation:landscape) and (max-height:600px) {
  #campaign[data-view="board"][data-tab="upgrade"] .cp-body { padding-bottom:8px; }
  .cp-simple.campaign-upgrade {
    & .upgrade-toolbar { padding:6px 12px; gap:10px; }
    & .upgrade-toolbar small { display:none; }
    & .upgrade-toolbar h2 { font-size:19px; margin:0; }
    & .upgrade-tabs button { min-width:90px; font-size:14px; padding:6px 12px; }
    & .upgrade-units { padding-block:6px; }
    & .upgrade-unit { min-height:44px; padding-block:0; }
    & .upgrade-unit img { width:26px; height:38px; }
    & .upgrade-unit small { display:none; }
    & .upgrade-body { grid-template-columns:minmax(170px,.65fr) minmax(0,1.35fr); }
    & .upgrade-identity,& .upgrade-main,& .upgrade-skills { padding:8px 12px; }
    & .upgrade-profile { inset:6px; gap:6px; }
    & .upgrade-profile > div { display:none; }
    & .upgrade-profile dl { display:grid; min-width:70px; max-width:50%; gap:3px; padding:0; }
    & .upgrade-profile dl > div { margin:0; gap:5px; }
    & .upgrade-profile dd { font-size:13px; }
    & .upgrade-role { font-size:9px; }
    & .upgrade-pilot-profile { display:block; padding:0; }
    & .upgrade-portrait { width:85%; opacity:.48; }
    & .pilot-bio { top:6px; left:6px; max-width:calc(100% - 12px); max-height:calc(100% - 12px); }
    & .pilot-bio > div { font-size:10.5px; line-height:1.35; gap:5px; margin-bottom:4px; }
    & .pilot-bio .upgrade-callsign { font-size:13px; }
    & .upgrade-pilot-profile .pilot-skill-badges { display:none; }
    & .upgrade-footer { padding:4px 12px; }
    & .upgrade-footer p { font-size:10px; }
    & .upgrade-footer button { min-height:36px; padding-block:4px; }
    & .upgrade-section-title { font-size:17px; }
    & .upgrade-skill-list { margin-top:12px; }
    & .pilot-skill-option { padding:12px; }
    & .paint-grid { gap:6px; }
    & .paint-tile { min-height:74px; padding:5px; }
  }
}