/* Split out of the old monolithic styles.css -- this file is loaded
   only by its own sub-module page, after the shared ../styles.css. */
/** CONTENT SETUP BUILDER -- Atlas skin. Every selector, id, size
    driver and state class the JS relies on is unchanged; only the
    cosmetic moved to the Atlas language (sharp translucent panels,
    Shentox Light letterspaced titles, ghost bars and tools). **/
#content-SB {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex: auto;
    overflow: hidden;
    animation: show 0.5s ease-out;
}

/* ---- step 1: planet picker -- ORIGINAL tiles, one line ---- */
#SB-planetPicker {
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 100%;
}

#SB-pickTitle {
    position: absolute;
    top: 1.5em;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Shentox Light', 'Segoe UI', sans-serif;
    font-size: 1.6em;
    letter-spacing: 4px;
    color: #d2d2d263;
    user-select: none;
    pointer-events: none;
}

.planetPicker {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 192px;
    height: 352px;
    background-color: var(--backgroundColor);
    border: solid 1px var(--borderColor31);
    padding: 16px;
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
    transition: all .25s linear;
    -webkit-transition: all 0.25s linear;
}

.planetPicker:hover {
    background-color: var(--backgroundColor63);
    border: solid 1px var(--borderColor62);
}

.planetPicker:hover .planetPicker_details .planetPicker_details_name span {
    color: var(--hoverColor);
}

.planetPicker_img {
    height: 118px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.planetPicker_img > img {
    height: 80px;
    width: 80px;
}

.planetPicker_details {
    height: 234px;
    display: flex;
    flex-direction: column;
}

.planetPicker_details_name {
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 1.5em;
    font-family: 'Shentox Light';
}

.planetPicker_details_name span {
    transition: all .25s linear;
    -webkit-transition: all 0.25s linear;
}

.planetPicker_details_mats {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: auto;
    margin-bottom: 16px;
}

.planetPicker_details_mat {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
}

.planetPicker_details_mat img {
    height: 24px;
    width: 24px;
}

/* ---- step 2: calculator, three separated top panels ---- */
#SB-calculator {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    width: 100%;
}

#SB-calpan-Top {
    /* the CPU/PWG tile holds the exact page centre (over the canvas);
       planet docks to its left, skills to its right, gaps kept */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    margin-top: 0.875em;
    margin-bottom: 0.75em;
    gap: 0.75em;
    width: 100%;
    padding: 0 1em;
    box-sizing: border-box;
    user-select: none;
}

#SB-calpan-Top-Left,
#SB-calpan-Top-Center,
#SB-calpan-Top-Right {
    background-color: var(--backgroundColor);
    border: 1px solid var(--borderColor31);
    padding: 0.75em 1em;
    box-sizing: border-box;
}

/* left panel: planet image beside its name, resources listed BELOW the
   name (the recap div is the picker card's own rows, re-parented by
   the JS -- grid areas place the three existing children) */
#SB-calpan-Top-Left {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "img name" "img recap";
    column-gap: 1em;
    align-items: start;
    justify-self: end;   /* docked against the CPU/PWG tile */
    width: max-content;
    max-width: 26em;
}

#SB-calpan-Top-Left > div:nth-child(1) { grid-area: img; align-self: center; }
#SB-calpan-Top-Left > div:nth-child(2) { grid-area: name; }

#sb_selectedPlanetIMG {
    height: 4.5em;
    width: 4.5em;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--borderColor31);
}

#sb_planetNameRow {
    display: flex;
    align-items: center;
    gap: 0.75em;
}

#sb_selectedPlanetType {
    font-size: 1.3em;
    font-family: 'Shentox Light', 'Segoe UI', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--themeColor);
}

#sb_selectedPlanetRessourcesRecap {
    grid-area: recap;
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 4px;
}

#sb_selectedPlanetRessourcesRecap .planetPicker_details_mat { font-size: 0.9286em; }
#sb_selectedPlanetRessourcesRecap .planetPicker_details_mat img { height: 1.15em; width: 1.15em; }

/* middle panel: CPU and PWG, always between the two sides */
#SB-calpan-Top-Center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.625em;
    width: 36em;   /* the middle grid column: always page-centred, over the canvas */
    box-sizing: border-box;
}

#sb_CPU, #sb_PWG {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75em;
    margin: 0 auto;
    width: 100%;
    max-width: 32em; /* the bars stay readable instead of spanning the panel */
}

#sb_span_CPU, #sb_span_PWG {
    padding-left: 0;
    width: 38px;
    flex-shrink: 0;
    font-size: 0.7143em;
    letter-spacing: 1.5px;
    color: var(--textColor2);
}

.sb_valuestyling {
    width: max-content;
    font-size: 0.8em;
    font-variant-numeric: tabular-nums;
}

#sb_valueNB {
    text-align: right;
    padding-right: 0;
    width: 10.5em;
    flex-shrink: 0;
}

.sb_progressbarStyle {
    flex: 1;
    height: 0.5em;
    background-color: #00000060;
    border: 1px solid var(--borderColor31);
    overflow: hidden;
}

#sb_progressbarCPU,
#sb_progressbarPWG {
    display: block;
    height: 100%;
    background-color: #d2d2d263;
    width: 0%;
    transition: width 0.2s linear;
}

/* right panel: the two skill selectors */
#SB-calpan-Top-Right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    justify-self: start;   /* docked against the CPU/PWG tile */
    width: max-content;
    gap: 0.625em;
}

#sb_SkillLevel,
#sb_CCUpgradeLevel {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
}

#sb_ResetRow {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.25em;
}

#sb_SkillLevelSpan span,
#sb_CCUpgradeLevelSpan span {
    font-size: 0.7143em;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--textColor2);
}

#sb_SkillLevelContent,
#sb_CCUpgradeLevelContent {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 3px;
}

#sb_SkillLevelContent > *,
#sb_CCUpgradeLevelContent > * {
    width: 1.25em;
    height: 1.25em;
    text-align: center;
    align-content: center;
    padding: 0.125em;
    box-sizing: content-box;
}

.sb_levelspans {
    background: none;
    border: 1px solid var(--borderColor31);
    color: var(--textColor2);
    font-size: 0.7857em;
    line-height: 1;
    padding-bottom: 0.35em !important; /* digits sit clear of the tick */
    box-sizing: content-box;
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
    transition: color .15s linear;
}

/* the JS fills levels CUMULATIVELY (0..N all carry the class, like
   in-game skill pips) -- so the run gets the ghost fill, and only the
   topmost filled box carries the Atlas tick */
.sb_levelspans.selectedlevel,
.sb_levelspans.selectedlevels {
    background-color: #d2d2d212;
    color: var(--themeColor);
    cursor: url(../img/cursors/cursor_default.svg), default;
}

.sb_levelspans.selectedlevel:not(:has(~ .selectedlevel)) {
    box-shadow: inset 0 -0.1875em 0 #d2d2d2;
}

.sb_levelspans.deactivatedlevels,
.sb_levelspans.deactivatedlevels:hover {
    background: none !important;
    color: var(--textColor4) !important;
    border-color: #232323 !important;
    box-shadow: none !important;
    cursor: url(../img/cursors/cursor_default.svg), default !important;
}

.sb_levelspans:hover {
    background-color: #d2d2d208;
    color: var(--themeColor);
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
}

.sb_svg_skillbook,
.sb_svg_commandcenter {
    fill: var(--textColor2);
    height: 1.25em !important;
    width: 1.25em !important;
    border: none !important;
}

/* ---- center: facility menu | playground | infos ---- */
#SB-calpan-Center {
    /* the canvas holds the exact page centre; the building list docks
       to its left edge, the info panels to its right, gaps kept */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 0.75em;
    width: 100%;
    padding: 0 1em;
    box-sizing: border-box;
}

#SB-calinpan-Left,
#SB-calinpan-Right {
    user-select: none;
    min-width: 0;
}

/* the facility menu is ONE bordered panel hugging the playground
   (sketch layout), rows reading icon-then-label */
#SB-calinpan-Left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    height: auto;
    width: max-content;
    min-width: 15em;
    max-width: 16em;
    justify-self: end;   /* docked to the canvas's left edge */
    gap: 0;
    background-color: var(--backgroundColor);
    border: 1px solid var(--borderColor31);
    padding: 8px 0;
    align-self: flex-start;
}

.sb_fmenu_items {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.625em;
    padding: 0.4375em 0.875em;
    font-size: 0.9286em;
    transition: background-color .15s linear;
}

.sb_fmenu_items > svg { order: -1; }  /* markup is label-then-icon; the sketch reads icon-then-label */
.sb_fmenu_items > span { color: var(--textColor); transition: color .15s linear; }
.sb_fmenu_items:hover { background-color: #d2d2d206; }
.sb_fmenu_items:hover > span { color: var(--themeColor); }

/* armed link modes get the Atlas tick, like the sketch's active tool */
.sb_fmenu_items:has(> svg.createlink_active),
.sb_fmenu_items:has(> svg.deletelink_active) {
    background-color: #d2d2d208;
    box-shadow: inset 3px 0 0 #d2d2d2;
}
.sb_fmenu_items:has(> svg.createlink_active) > span,
.sb_fmenu_items:has(> svg.deletelink_active) > span { color: var(--themeColor); }

/* the heads counter reads as the extractor's sub-row */
#sb_fmenu_extractorheads { padding-left: 30px; font-size: 0.8571em; }
#sb_fmenu_extractorheads > span { color: var(--textColor2); }

/* a separator before the link tools, like the sketch's rule */
#sb_fmenu_createlink { border-top: 1px solid #232323; margin-top: 6px; padding-top: 10px; }

#sb_fmenu_extractorheadsmenu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

#sb_fmenu_extractorheadnumber {
    width: 50px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.9286em;
}

.sb_fmenu_extratorheads_deactivated {
    color: var(--textColor4) !important;
    fill: var(--textColor4) !important;
    cursor: url(../img/cursors/cursor_default.svg), default !important;
}

.sb_fmenu_extratorheads_deactivated > div > svg {
    color: var(--textColor4) !important;
    fill: var(--textColor4) !important;
    cursor: url(../img/cursors/cursor_default.svg), default !important;
}

.sb_svg_fmenu {
    fill: var(--textColor2);
    height: 1.25em !important;
    width: 1.25em !important;
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
    transition: fill .15s linear;
}

.sb_svg_fmenu:hover {
    fill: var(--themeColor);
}

#sb_svg_minus,
#sb_svg_plus {
    height: 1em !important;
    width: 1em !important;
}

.createlink_active {
    fill: var(--themeColor);
}

.deletelink_active {
    fill: var(--themeColor);
}

.deletelink_active > g {
    fill: #ff5c5c !important;
}

.sb_svg_deletelink > g,
.sb_svg_decommission > g {
    fill: rgba(255, 92, 92, 0.5);
}

.sb_svg_deletelink:hover > g,
.sb_svg_decommission:hover > g {
    fill: #ff5c5c;
}

#sb_fmenu_deletelink {
    margin-top: 0;
}

#SB-calinpan-Right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    height: auto;
    width: 24em;
    max-width: 24em;
    justify-self: start;   /* docked to the canvas's right edge */
    gap: 0.75em;
    align-self: start;
}

#SB-calinpan-Right > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 8px;
    background-color: var(--backgroundColor);
    border: 1px solid var(--borderColor31);
    padding: 12px 14px;
    box-sizing: border-box;
}

#SB-calinpan-Right > div > span:first-child,
#sb_div_totalcost > span:first-child {
    font-size: 0.7143em;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--textColor2);
}

#sb_input_pradius {
    transition: border-color 0.15s linear;
    margin-top: 0px;
    padding: 7px 10px;
    background-color: #000000a8;
    border: 1px solid var(--borderColor31);
    color: var(--themeColor);
    font-family: inherit;
    outline: none;
}

#sb_input_pradius:focus { border-color: var(--themeColor); }

#sb_div_infos { gap: 16px !important; }

#sb_div_infos_div1 span,
#sb_div_infos_div2 span {
    font-size: 0.7857em;
    color: var(--textColor2);
    line-height: 1.5;
}

#sb_div_totalcost {
    background-color: var(--backgroundColor);
    padding: 12px 14px;
}

#sb_spans_totalcost {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    gap: 6px;
    height: 32px;
}

#sb_span_totalcost {
    font-family: 'Shentox Light', 'Segoe UI', sans-serif;
    font-size: 1.7em;
    color: var(--themeColor);
    font-variant-numeric: tabular-nums;
}

#sb_spans_totalcost > span:last-child {
    font-size: 0.7143em;
    letter-spacing: 1px;
    color: var(--textColor2);
}

/* the two Atlas top-bar buttons (back to picker, reset) */
.sb_ghostbtn {
    display: inline-block;
    border: 1px solid var(--borderColor31);
    color: var(--textColor2);
    font-size: 0.8571em;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.4em 0.9em;
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
    user-select: none;
    transition: color .15s linear;
    white-space: nowrap;
}
.sb_ghostbtn:hover { color: var(--themeColor); }
#SB-resetBtn:hover { color: #ff5c5c; border-color: #ff5c5c; }

/* the sketch's hint line, pinned to the playground's bottom edge
   (static 2nd child of the fixed-height canvas; no positioning, so
   the facilities' absolute anchor is untouched) */
#SB-calpan-Bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4em;
    width: 100%;
}

#SB-canvasHint {
    margin: 0.5em 0 0;
    width: max-content;
    max-width: 850px;
    padding: 0.3em 0.8em;
    font-size: 0.7143em;
    letter-spacing: 1px;
    color: var(--textColor);
    background-color: #000000a8;
    border: 1px solid var(--borderColor31);
    user-select: none;
}

/* ---- playground (sizes are load-bearing: link math uses 850px) ---- */
#SB-calinpan-Center {
    background-size: contain;
    height: 850px;
    width: 850px;
    flex-shrink: 0;
    margin: 0;
    z-index: 10;
    border: 1px solid var(--borderColor31);
    background-color: #00000030;
    box-sizing: content-box;
}

#playgroundlines {
    position: absolute;
    z-index: 15;
    height: 850px;
    width: 850px;
}

.facilities {
    position: absolute;
    height: 60px;
    width: 60px;
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
    z-index: 20;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.facilities > svg {
    position: absolute;
    top: 0px;
    left: 0px;
}

#moveable {
    z-index: 50;
}

.moveableSelected {
    border: 2px solid #d2d2d2a0;
    mask: conic-gradient(at var(--s) var(--s), #0000 75%, #000 0) 0 0 / calc(100% - var(--s)) calc(100% - var(--s)), conic-gradient(#000 0 0) content-box;
    --s: 16px;
}

.collision-state {
    border-radius: 50%;
    box-shadow: inset 0 0 0 25px #c30000;
}

.f_extractor_headsindicatordiv_notselected {
    position: relative;
    top: 42px;
    left: 42px;
    width: 18px;
    height: 18px;
    text-align: center;
    color: var(--themeColor);
    background-color: var(--backgroundColor63);
}

.f_extractor_headsindicatordiv_selected {
    position: relative;
    top: 39px;
    left: 39px;
    width: 18px;
    height: 18px;
    text-align: center;
    color: var(--themeColor);
    background-color: var(--backgroundColor63);
}

/* ---- notifications + reset overlay ---- */
#SB-calnotifpan {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 0;
    width: max-content;
    max-width: 850px;
    margin: 0;
    padding: 0.3em 0.8em;
    box-sizing: border-box;
    background-color: var(--backgroundColor);
    border: 1px solid var(--borderColor31);
    font-family: 'Shentox SemiBold', 'Segoe UI', sans-serif;
    letter-spacing: 1px;
    font-size: 0.8571em;
}

.alertdiv_invisible {
    color: var(--ss_security_1);
    opacity: 0;
    border-color: transparent !important;
    background: none !important;
    -webkit-transition: all 0.25s linear;
}

.alertdiv_visible {
    color: var(--ss_security_1);
    opacity: 1;
    -webkit-transition: all 0.25s linear;
}

#SB-Overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #00000083;
    z-index: 200;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    -webkit-transition: all 0.25s linear;
}

#SB-Overlay-MessageBox {
    z-index: 201;
    color: var(--themeColor);
    background-color: #0d0d0df2;
    border: 1px solid var(--borderColor31);
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
}

#SB-Overlay-MessageBox-Buttons > span {
    padding: 8px 18px;
    border: 1px solid var(--borderColor31);
    cursor: pointer;
    color: var(--textColor);
    font-size: 0.8571em;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    -webkit-transition: all 0.25s linear;
}

#SB-Overlay-MessageBox-Buttons > span:hover {
    color: var(--themeColor);
    -webkit-transition: all 0.25s linear;
}

#SB-O-MB-B-Reset:hover {
    color: #ff5c5c !important;
    border-color: #ff5c5c !important;
}

#SB-Overlay-MessageBox-Buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

#sb_div_infos_div1,
#sb_div_infos_div2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
}


/** MESSAGEBOX -- the generic alert dialog (rebuilt with the same
    language as the decommission overlay above) **/
#MessageBoxOverlay {
    position: fixed;
    inset: 0;
    background-color: #00000083;
    z-index: 300;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#MessageBoxDialog {
    color: var(--themeColor);
    background-color: #0d0d0df2;
    border: 1px solid var(--borderColor31);
    padding: 32px;
    max-width: 34em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25em;
}

#MessageBoxTitle {
    font-family: 'Shentox Medium', 'Segoe UI', sans-serif;
    font-size: 0.8571em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--themeColor);
}

#MessageBoxMessage {
    color: var(--textColor);
    text-align: center;
    line-height: 1.5;
}

#MessageBoxButtons > span {
    padding: 8px 18px;
    border: 1px solid var(--borderColor31);
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
    color: var(--textColor);
    font-size: 0.8571em;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    -webkit-transition: all 0.25s linear;
    user-select: none;
}

#MessageBoxButtons > span:hover {
    color: var(--themeColor);
}

/** SHORT SCREENS -- the calculator (64px bar + top panel + the
    load-bearing 850px canvas + hints) is ~1100px tall and cannot
    shrink, so on viewports under that the PAGE scrolls. Window-level
    scrolling on purpose: the facilities are absolutely positioned
    against the document (the drag math in builder.js counts on it), so
    an inner scroll container would shear them off the canvas, while
    document scroll keeps everything moving as one. These overrides are
    scoped to this page because only this stylesheet loads here. **/
html, body {
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    min-height: 100%;
}

#mainWrapperWrapper,
#mainWrapper,
#mainPrime,
#mainPrime-contentWrapper,
#content-SB {
    height: auto;
    min-height: 0;
    overflow: visible;
}

#mainWrapperWrapper,
#mainWrapper {
    /* still at least a full screen tall, so on large viewports the top
       bar stays pinned up top and the drag math's fixed offsets hold */
    min-height: 100vh;
}

/* with auto heights, mainPrime's align-items:center would float the
   calculator mid-screen and shear the drag offsets -- stretch instead,
   so the content keeps starting right under the top bar */
#mainPrime {
    align-items: stretch;
}

/* ...and the page column itself anchors to the top instead of
   centering the bar + content group; the top bar keeps its 64px
   instead of flex-growing into the freed space */
#mainWrapper {
    justify-content: flex-start;
}

#mainTop {
    flex: 0 0 auto;
}