/* Split out of the old monolithic styles.css -- this file is loaded
   only by its own sub-module page, after the shared ../styles.css.

   CR-board rebuild (approved sketch: sc_cr_merge_sketch). The page is
   the Commodities Relations board -- same 180px grey-plate vignettes,
   7px radii, paired P0 -> P1 rows with the arrow squares, coloured
   degree walk -- with the checker's Atlas head on top (hero search,
   adjacent chips with sec badges, letterspaced system title), each
   block on its own Atlas plate. What the system cannot produce is
   strongly greyed (7%) with a "needs X" tag; the walk fade is 45%;
   hovering an adjacent chip previews its unlocks in the launcher
   accent (#5ccbcb). Tile spacing steps 16 / 8 / 4px responsively
   (--sc_vgap, set by checker.js), planet images 68 -> 36px (--sc_pimg). */

/** CONTENT SYSTEM CHECKER **/
#content-SC {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    flex: auto;
    overflow-y: auto;
    overflow-x: hidden;
    animation: show 0.5s ease-out;
}

/** ATLAS PLATES: the search / system head on one, the board on the other **/
#SC-headPlate,
#SC-content {
    background-color: var(--backgroundColor);
    border: 1px solid var(--borderColor31);
}

#SC-headPlate {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    padding: 0.875em 1.375em 0.75em;
    margin: 0.75em 1.5em 0.625em;
}

/** SEARCH (Atlas hero) **/
#SC-form {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    gap: 0.625em;
}

input[type="text"] {
    font-family: "Shentox Regular";
    font-size: 1em;
    resize: none;
    outline: none;
    border: none;
    color: var(--textColor);
    background: var(--backgroundColor);
    box-sizing: border-box;
}

#SC-form-search {
    width: 30em;
    max-width: 90vw;
    font-size: 1.1em;
    color: var(--themeColor);
    background-color: #000000a8;
    border: 1px solid var(--borderColor31);
    padding: 0.7em 1em 0.7em 2.6em;
    /* magnifier, inlined so it costs no extra request */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round'><circle cx='10' cy='10' r='7'/><path d='M15 15l6 6'/></svg>");
    background-repeat: no-repeat;
    background-size: 1em 1em;
    background-position: 1em center;
}

#SC-form-search::placeholder {
    color: #666666;
}

#SC-form-search:hover {
    color: var(--themeColor);
}

#SC-form-search:focus {
    border-color: var(--themeColor);
}

/** SEARCH RESULTS (jQuery-UI autocomplete) **/
.systemResult_ul {
    position: absolute;
    top: 0;
    left: 0;
    cursor: url(../img/cursors/cursor_default.svg), default;
    max-height: 16em;
    overflow: auto;
    font-family: "Shentox Regular" !important;
    font-size: 1em !important;
    background-color: var(--color16);
    border: 1px solid var(--borderColor31);
    margin-left: 0px !important;
    padding-inline-start: 0px !important;
    z-index: 3;
}

.systemResult_li {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0.5em 1em;
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
}

.systemResult_li:hover {
    background-color: #d2d2d20a;
    color: var(--themeColor);
}

/** ADJACENT SYSTEMS (Atlas chips) **/
#SC-form-adjacents {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5em;
}

.adjacentSystems {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: auto;
    gap: 0.5em;
    background-color: var(--backgroundColor);
    padding: 0.3125em 0.75em;
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
    user-select: none;
}

.adjacentSystems:hover > span:nth-child(2) {
    color: var(--themeColor);
}

/* the jump glyph, quiet -- replaces the old white icon (the JS still
   sets the img src; it is simply not shown) */
.adjacentSystems > img {
    display: none;
}

.adjacentSystems::before {
    content: "\21c4";
    color: var(--textColor2);
    font-size: 0.85em;
}

.adjacentSystems .adjRegion {
    color: var(--textColor2);
    font-size: 0.88em;
}

.adjacentSystems > span {
    line-height: normal;
    font-size: 0.8929em;
    color: var(--textColor);
}

/* sec badge: dark digits on the sec colour (background set by the JS) */
.adjacentSystems > span:last-child {
    margin-left: 0.25em;
    min-width: 2.5em;
    box-sizing: border-box;
    text-align: center;
    font-family: "Shentox SemiBold";
    font-size: 0.7143em;
    color: var(--color21);
    padding: 0.15em 0.3em;
}

/* neighbor gain readout: a reserved line below the chips, so the chip
   row never changes size */
#SC-adjPreview {
    height: 1.1em;
    line-height: 1.1em;
    font-size: 0.7857em;
    letter-spacing: 0.0357em;
    color: #5ccbcb;
    text-align: center;
}

#SC-adjPreview b {
    color: var(--themeColor);
    font-family: "Shentox SemiBold";
    font-weight: 400;
    letter-spacing: 0.0714em;
}

/** SYSTEM HEAD (Atlas: big Light letterspaced name · sec badge · crumb) **/
#SC-sysHead {
    width: 100%;
}

#SC-content-title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.875em;
    padding: 0.375em 0 0;
}

/* the old left spacer -- everything is centered now (the JS finds its
   divs by index, display:none is safe) */
#SC-content-title > div:first-child {
    display: none;
}

#SC-content-title > div:nth-child(2) {
    padding: 0;
    font-family: "Shentox Light";
    font-size: 2.2em;
    font-variant-caps: normal;
    text-transform: uppercase;
    letter-spacing: 0.1136em;
    color: var(--themeColor);
}

#SC-content-title > div:last-child {
    flex-basis: auto;
    flex-grow: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5em;
    font-size: 1em;
}

#SC-content-title span {
    line-height: normal;
}

/* sec badge (background set by the JS) */
#SC-content-title > div:last-child > span:first-child {
    align-self: center;
    min-width: 2.5em;
    box-sizing: border-box;
    text-align: center;
    font-family: "Shentox SemiBold";
    font-size: 0.7143em;
    color: var(--color21);
    padding: 0.15em 0.3em;
}

/* the two "❮" separators */
#SC-content-title > div:last-child > span:nth-child(2),
#SC-content-title > div:last-child > span:nth-child(4) {
    color: var(--textColor2);
    font-size: 0.7143em;
}

/* constellation / region */
#SC-content-title > div:last-child > span:nth-child(3),
#SC-content-title > div:last-child > span:nth-child(5) {
    color: var(--textColor);
    font-size: 0.8571em;
    letter-spacing: 0.0714em;
}

/* produce summary: "5 planets · 12/15 P0 · ..." */
#SC-summary {
    text-align: center;
    font-size: 0.7857em;
    color: var(--textColor);
    letter-spacing: 0.0714em;
    margin-top: 0.25em;
}

/** BOARD PLATE **/
#SC-content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    margin: 0 1.5em 0.75em;
    padding: 0;
}

#SC-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

#SC-content-body {
    position: relative;
    flex: 1 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: stretch;
    padding: 0.5em 1.125em 0.75em;
    z-index: 2;
}

/** COLUMNS: tiles tightly stacked (CR's margins) and the stack centered
    vertically, as on the relations page **/
.sc_mcol {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.sc_colbody {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--sc_vgap, 16px);
}

.sc_pcol .sc_colbody {
    gap: 8px;
}

/** TIER LABELS: name left, tier badge right, spanning exactly the
    column width so both edges align with the tiles below **/
.sc_tierrow {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
}

.sc_tierhead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 180px;
    margin: 2px 9px 0;
}

.sc_tierhead.auto { width: auto; }
.sc_tierhead.h0 { margin-right: 0; }
.sc_tierhead.h1 { margin-left: 0; }

.sc_tname {
    font-size: 0.8571em;
    letter-spacing: 0.1em;
    color: var(--textColor);
    text-transform: uppercase;
}

.sc_tnum {
    font-family: "Shentox SemiBold";
    font-size: 0.7143em;
    color: #d2d2d2a0;
    background-color: #d2d2d221;
    padding: 1px 7px;
}

.sc_tnum:empty { display: none; }

/* the hole above the arrow squares, so BASIC starts above the basic tiles */
.sc_tiergap {
    width: 27px;
    margin: 0 9px;
    flex-shrink: 0;
}

/** PLANETS: a straight list -- name, type, radius. Image size is
    responsive (--sc_pimg), the degree ring colours on walk. **/
.sc_prow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 9px;
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
    transition: opacity 0.12s linear;
}

.sc_prow img {
    width: var(--sc_pimg, 68px);
    height: var(--sc_pimg, 68px);
    border-radius: 100%;
    border: 4px solid transparent;
    box-shadow: 0 0 0 2px transparent;
    transition: border-color 0.12s linear;
}

.sc_prow .sc_pn {
    color: var(--themeColor);
    font-size: 0.9em;
    white-space: nowrap;
}

.sc_prow .sc_ps {
    color: #666666;
    font-size: 0.7143em;
    letter-spacing: 0.0357em;
    white-space: nowrap;
}

/** VIGNETTES: the CR tile, verbatim (grey plate, 7px left radii, dark
    title, dark info strip with the price bottom-right) **/
.scv {
    position: relative;
    display: flex;
    flex-shrink: 0;
    width: 180px;
    height: 27px;
    margin: 0 9px;
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
    transition: opacity 0.12s linear;
}

.scv.vw0 { margin-right: 0; }
.scv.vw1 { margin-left: 0; }

.scv .vignette-mat {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 27px;
    background-color: #999999;
    border-bottom-left-radius: 7px;
    border-top-left-radius: 7px;
    overflow: hidden;
}

.scv .vignette-img {
    display: flex;
    flex-shrink: 0;
    height: 27px;
    width: 27px;
}

.scv .vignette-img img {
    width: 27px;
    height: 27px;
    display: block;
}

.scv .vignette-body {
    display: flex;
    flex-direction: column;
    height: 27px;
    flex: 1 1 auto;
    min-width: 0;
}

.scv .vignette-body-title {
    flex-shrink: 0;
    height: 13.5px;
    text-align: center;
    color: #000000;
    line-height: 13.5px;
    font-size: 11.5px;
    font-weight: 600;
    font-family: "Shentox Regular";
    white-space: nowrap;
    padding: 0 6px;
}

.scv .vignette-body-infos {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    height: 13.5px;
    border-top-left-radius: 7.2px;
    background-color: #212121;
    font-size: 11.5px;
    color: #999999;
    line-height: 13.5px;
    font-weight: 600;
}

.scv .vignette-body-infos-qty {
    margin-left: 2px;
}

.scv .vignette-body-infos-price {
    margin-left: auto;
    margin-right: 4px;
    white-space: nowrap;
}

/** P0 -> P1: CR's paired rows with the arrow square **/
.sc_pairrow {
    display: flex;
    align-items: center;
    transition: opacity 0.12s linear;
}

.sc_arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    height: 27px;
    width: 27px;
    color: #000000;
    font-family: "Shentox Regular";
    background-color: #999999;
    margin: 0 9px;
    border-radius: 7px;
    font-weight: 600;
    transition: opacity 0.12s linear;
}

/** OUT OF REACH: strongly greyed and inert. The fade sits on the plate
    itself so the "needs X" tag stays readable; the price of a tile you
    cannot make gives way to the reason you cannot make it. **/
.na, .sc_pairrow.na .scv {
    pointer-events: none;
}

.na .vignette-mat, .sc_pairrow.na .sc_arrow {
    opacity: 0.07;
    filter: grayscale(1);
}

.na .vignette-body-infos-price { display: none; }

.sc_misstag {
    position: absolute;
    right: 4px;
    bottom: 0;
    height: 13.5px;
    line-height: 13.5px;
    font-size: 10px;
    color: #55616c;
    letter-spacing: 0.05em;
    white-space: nowrap;
    pointer-events: none;
}

/** ADJACENT PREVIEW: tiles the hovered neighbor would unlock, in the
    launcher accent **/
.sc_unlock .vignette-mat {
    opacity: 0.5;
    filter: none;
    outline: 1px dashed #5ccbcbaa;
}

.sc_pairrow.sc_unlock .sc_arrow {
    opacity: 0.5;
    filter: none;
}

.sc_unlock .sc_misstag {
    color: #5ccbcbcc;
}

/** WALK FADE: what is off the walked chain steps back, clearly above
    the not-producible grey **/
.sc_dim { opacity: 0.45; }
.sc_prow.sc_dim { opacity: 0.55; }
.sc_arrow.sc_dim { opacity: 0.45; }

/** EMPTY STATE: the board plate's space teaches the gestures until
    the first system loads **/
#SC-empty {
    background-color: var(--backgroundColor);
    border: 1px solid var(--borderColor31);
    margin: 0 1.5em 0.75em;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1em;
    user-select: none;
}

#SC-empty-title {
    font-family: "Shentox Light";
    font-size: 1.3em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #d2d2d263;
    margin-bottom: 0.75em;
    text-align: center;
}

#SC-empty div span {
    font-size: 0.8571em;
    color: var(--textColor);
    letter-spacing: 0.0357em;
}

/** STATUS LINE: one contextual sentence at the board's bottom edge,
    only ever describing what applies right now **/
#SC-status {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    padding: 0.4em 0;
    text-align: center;
    font-size: 0.8571em;
    color: var(--textColor2);
    letter-spacing: 0.0714em;
    pointer-events: none;
    user-select: none;
}