/* Planetary -- Commodities Relations, the revamped board: legend panel, corner buttons (style swap, background,
   lock), the faint planet behind, responsive scaling (cr-board.js), and the CR22 style (cr22.js).
   Loaded after relations.css and harmonised.css. Lengths are multiples of --u (1px at full size). */
/* ---- responsive. fit.js sets --s (1 down to .636, cards 180px) on the board: every length below is a multiple of --u (1px at
   full size), and the board's type follows its font size (em), so the whole board shrinks as one, until the cards are
   180px wide; the phone view at 700px and under. */
#content-CR { --s: 1; --u: calc(var(--s) * 1px); font-size: calc(var(--s) * 1em); }
html:not([data-cr-view="orig"]) #content-CR .vignette-input, html:not([data-cr-view="orig"]) #content-CR .vignette-output { width: calc(13 * var(--u)); }
html:not([data-cr-view="orig"]) #content-CR .vignette-input { left: calc(-18 * var(--u)); }
html:not([data-cr-view="orig"]) #content-CR .vignette-output { right: calc(-18 * var(--u)); }
html:not([data-cr-view="orig"]) #content-CR .vignette-mat { border-bottom-left-radius: calc(7 * var(--u)); border-top-left-radius: calc(7 * var(--u)); }
html:not([data-cr-view="orig"]) #content-CR .vignetteSelected { box-shadow: 0 0 0 calc(4 * var(--u)) #d2d2d2 !important; }
html:not([data-cr-view="orig"]) #content-CR .mat_TierTitle { margin-top: calc(9 * var(--u)); margin-bottom: calc(9 * var(--u)); }
html:not([data-cr-view="orig"]) #content-CR .mat_TierTitleSpanTier { padding: calc(1 * var(--u)) calc(6 * var(--u)); letter-spacing: calc(1 * var(--u)); }
/* phone view: as today's, at 700px and under (fit.js), in both styles */
html:not([data-cr-view="orig"]) #content-CR.crPhone { overflow: hidden; }
html:not([data-cr-view="orig"]) #content-CR.crPhone > svg, html:not([data-cr-view="orig"]) #content-CR.crPhone > .mat_colWrapper, #content-CR.crPhone > #crLegend, #content-CR.crPhone > #crSwap, #content-CR.crPhone > #crOrig, #content-CR.crPhone > #crBgBtn,
#content-CR.crPhone > #crLock, html:not([data-cr-view="orig"]) #content-CR.crPhone > #cr22 { display: none !important; }
html:not([data-cr-view="orig"]) #content-CR.crPhone > #crMobile, html[data-cr-view] #content-CR.crPhone > #crMobile { display: block !important; position: absolute; inset: 0; }
/* the same in the page's own 700px rule, so the phone view never depends on fit.js having run */
@media only screen and (max-width: 700px) {
    #content-CR > #crLegend, #content-CR > #crSwap, #content-CR > #crOrig, #content-CR > #crBgBtn, #content-CR > #crLock, html:not([data-cr-view="orig"]) #content-CR > #cr22 { display: none !important; }
    html:not([data-cr-view="orig"]) #content-CR > #crMobile, html[data-cr-view] body #content-CR > #crMobile { display: block !important; position: absolute; inset: 0; }
}
/* ---- the hints as a legend panel in the bottom-left corner ---- */
#CRInfos { display: none; }   /* its two hints live in the legend now; #lockedNotif inside still carries the lock state */
/* CR22's legend, metric for metric (its SVG draws 12px in, keys column 116px, 18px lines in 22px rows, a 24px head,
   14px right and 6px bottom margins; px for geometry, em for type): text .8571em, keys and head .7143em of the page */
#crLegend { position: absolute; left: calc(16 * var(--u)); bottom: calc(16 * var(--u)); z-index: 3; box-sizing: border-box; width: max-content; white-space: nowrap; padding: 0 calc(13 * var(--u)) calc(5 * var(--u)) calc(11 * var(--u));
    background-color: #0d0d0deb; border: 1px solid #313131; color: #999999; font-size: 0.8571em; line-height: calc(18 * var(--u)); word-spacing: calc(1 * var(--u)); user-select: none; }   /* CR22 sets its words a space + 1px apart */
#crLegend .lgHead { height: calc(24 * var(--u)); box-sizing: border-box; padding-top: calc(4 * var(--u)); line-height: calc(13 * var(--u)); font-size: 0.8333em; letter-spacing: calc(1.5 * var(--u)); color: #6b6b6b; }
#crLegend .lgRow { display: grid; grid-template-columns: calc(116 * var(--u)) max-content; align-items: baseline; height: calc(22 * var(--u)); box-sizing: border-box; padding: calc(2 * var(--u)) 0; position: relative; }
#crLegend .lgRow > b { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-weight: 400; font-size: 0.8333em; letter-spacing: calc(1 * var(--u)); word-spacing: 0; color: #9e9e9e; }
#crLegend .lgRow > span { min-width: 0; }
#crLegend .lgRow.ring { grid-template-columns: calc(27 * var(--u)) max-content; align-items: center; }
#crLegend .lgRow.on { background: #d2d2d214; margin: 0 calc(-13 * var(--u)) 0 calc(-11 * var(--u)); padding: calc(2 * var(--u)) calc(13 * var(--u)) calc(2 * var(--u)) calc(11 * var(--u)); box-shadow: inset calc(3 * var(--u)) 0 0 #d2d2d2; }
#crLegend .lgRow.on > b, #crLegend .lgRow.on > span { color: #d2d2d2; }
#crLegend .ioPair { display: inline-flex; align-items: center; gap: calc(3.43 * var(--u)); width: calc(42.29 * var(--u)); vertical-align: middle; }   /* CR22's two 19.4px chevron keys, a pill centred in each */
#crLegend .io { display: inline-flex; align-items: center; justify-content: center; width: 0.85em; height: 1.15em; border-radius: 0.5em; background: #d2d2d2;
    color: #000; font-style: normal; font-size: 0.8em; line-height: 1; margin: 0 calc(3.9 * var(--u)); }
#crLegend .sw { display: inline-block; width: calc(9.14 * var(--u)); height: calc(9.14 * var(--u)); }
#crLegend .ramp { display: inline-flex; margin-right: calc(5 * var(--u)); vertical-align: 0; }
#crLegend .keys { display: inline; }
#crLegend .key { white-space: nowrap; }
#crLegend .ringSw { width: calc(15.71 * var(--u)); height: calc(15.71 * var(--u)); margin-left: calc(1.86 * var(--u)); border-radius: 50%; border: 2px solid #cccc3d; background: #1a1a1a; box-sizing: border-box; }
@media (max-width: 700px) { #crLegend { display: none; } }
/* top-left corner, 64px squares 8px apart, flat, 1px hairline: the original page (on it: back to the new one); "Swap
   style" (CRCurrent / CR22); the background picture, hidden / shown again; the lock, shown while the lines are locked
   (a click on it frees them, as a second shift-click would). The legend, the corner, the background and the lock are
   there on the original page too (scope_css.py leaves them unscoped); the swap is not. */
#crSwap, #crOrig, #crBgBtn, #crLock { position: absolute; top: calc(16 * var(--u)); z-index: 6; width: calc(32 * var(--u)); height: calc(32 * var(--u)); box-sizing: border-box; display: grid; place-items: center;
    background: #0d0d0deb; border: 1px solid #313131; border-radius: 0; padding: 0; cursor: pointer; transition: border-color .12s linear, color .12s linear; }
#crSwap { left: calc(56 * var(--u)); color: #6b6b6b; }
#crSwap:hover { color: #9e9e9e; border-color: #474747; }
#crOrig { left: calc(16 * var(--u)); color: #6b6b6b; }
#crOrig .toNew { display: none; }
#crOrig:hover { color: #9e9e9e; border-color: #474747; }
#crSwap svg, #crOrig svg, #crBgBtn svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); display: block; }
#crBgBtn { left: calc(96 * var(--u)); }
#crBgBtn:hover { border-color: #474747; }
#crLock { left: calc(136 * var(--u)); border-color: #d2d2d2; }
#crLock[hidden] { display: none; }
#crLock svg { width: calc(14 * var(--u)); height: calc(16 * var(--u)); display: block; }
#crLock:hover { border-color: #ffffff; }
#crSwap:focus-visible, #crOrig:focus-visible, #crBgBtn:focus-visible, #crLock:focus-visible { outline: 1px solid #d2d2d2; outline-offset: calc(2 * var(--u)); }
/* planets, look 22's rule: a ring around the picture (not a border eating into it) in the colour of the planet's step
   while it is in the chain, yellow when it can supply the whole chain alone; selection = white name, underlined */
html:not([data-cr-view="orig"]) #mat_Planets .vignette img { border: 0 !important; box-shadow: none !important; outline: calc(3.5 * var(--u)) solid transparent; outline-offset: calc(2.25 * var(--u)); transition: outline-color .12s linear;
    width: calc(64 * var(--u)); height: calc(64 * var(--u)); }   /* legend.js shrinks them only if the page is too short for the stack */
html:not([data-cr-view="orig"]) #mat_Planets { gap: calc(18 * var(--u)); }      /* the rings (5.75px out of the picture) keep 6.5px apart, as in CR22 */
html:not([data-cr-view="orig"]) #mat_Planets .boxShadowColor_0 img { outline-color: #6d3dcc; }
html:not([data-cr-view="orig"]) #mat_Planets .boxShadowColor_1 img { outline-color: #9c3dcc; }
html:not([data-cr-view="orig"]) #mat_Planets .boxShadowColor_2 img { outline-color: #cc3d68; }
html:not([data-cr-view="orig"]) #mat_Planets .boxShadowColor_3 img { outline-color: #cc793d; }
html:not([data-cr-view="orig"]) #mat_Planets .boxShadowColor_4 img { outline-color: #cccc3d; }
html:not([data-cr-view="orig"]) #mat_Planets .vignette.border_Exclusive img { outline-color: #cccc3d; }
html:not([data-cr-view="orig"]) #mat_Planets .planetSelected .planetTypeNames { box-shadow: inset 0 calc(-1.5 * var(--u)) 0 #d2d2d2; padding-bottom: calc(3 * var(--u)); }
html:not([data-cr-view="orig"]) #mat_Planets .planetSelected .planetTypeNames span { color: #ffffff; }
@media (prefers-reduced-motion: reduce) { html:not([data-cr-view="orig"]) #mat_Planets .vignette img { transition: none; } }
/* cards: the bottom-right part (quantity, price) has no plate of its own any more: the card colour covers the icon,
   full height, and the name strip; the quantity and price sit on the page. Selected: they turn white. Today's rounded
   corners: 7px on the left, and the 7.2px inner corner where the quantity / price part meets the icon and the name.
   Size: CR22's, 283 x 34px (the longest name in full beside the icon and the I / O buttons), its text (14.1px =
   .8813em) and its row pitch: the gap between two cards is 3 to 8px, as tall as the page allows (legend.js, --rowGap). */
html:not([data-cr-view="orig"]) #content-CR .vignette:not(.planet), html:not([data-cr-view="orig"]) #content-CR .vignette-mat { width: var(--cw, calc(283 * var(--u))); }   /* fit.js: 283 x scale, then down to 180px */
html:not([data-cr-view="orig"]) #content-CR .vignette-body { min-width: 0; }
html:not([data-cr-view="orig"]) #content-CR .vignette-body-title { overflow: hidden; padding-right: calc(4 * var(--u)); }
html:not([data-cr-view="orig"]) #content-CR .vignette-body-title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* a name too long for the card ends in "…"; legend.js puts it whole in the tooltip */
html:not([data-cr-view="orig"]) #content-CR .planetTypeNames span { font-size: 1em; }   /* CR22's planet names: 16px at full size */
html:not([data-cr-view="orig"]) #content-CR .vignette:not(.planet) { height: calc(34 * var(--u)); margin: var(--rowGap, calc(3 * var(--u))) 0; }   /* no 9px side margin any more: the card is its column (as CR22) */
html:not([data-cr-view="orig"]) #content-CR #mat_RawBasic { gap: calc(18 * var(--u)); }
html:not([data-cr-view="orig"]) #content-CR .mat_TierTitle { margin-left: 0; margin-right: 0; }
html:not([data-cr-view="orig"]) #content-CR #mat_Planets { width: calc(170 * var(--u)); flex: none; box-sizing: border-box; }   /* CR22's planet column */
html:not([data-cr-view="orig"]) #content-CR #mat_Planets .planet { gap: calc(16 * var(--u)); }
html:not([data-cr-view="orig"]) #content-CR .vignette-mat, html:not([data-cr-view="orig"]) #content-CR .vignette-body, html:not([data-cr-view="orig"]) #content-CR .vignette-input, html:not([data-cr-view="orig"]) #content-CR .vignette-output { height: calc(34 * var(--u)); }
html:not([data-cr-view="orig"]) #content-CR .vignette-img { width: calc(34 * var(--u)); height: calc(34 * var(--u)); align-items: center; justify-content: center; }
html:not([data-cr-view="orig"]) #content-CR .vignette-img img { width: calc(27 * var(--u)); height: calc(27 * var(--u)); }
html:not([data-cr-view="orig"]) #content-CR .vignette-body-title, html:not([data-cr-view="orig"]) #content-CR .vignette-body-infos { height: calc(17 * var(--u)); line-height: calc(17 * var(--u)); font-size: 0.8813em; }
html:not([data-cr-view="orig"]) #content-CR .vignette-body-infos-qty { margin-left: calc(4 * var(--u)); }
html:not([data-cr-view="orig"]) #content-CR .vignette-body-infos-price { margin-right: calc(4 * var(--u)); }
html:not([data-cr-view="orig"]) #content-CR .mat_TierTitle { width: var(--cw, calc(283 * var(--u))); }
html:not([data-cr-view="orig"]) #content-CR .vignette-mat { --mc: #999999; }
html:not([data-cr-view="orig"]) #content-CR .vignette-mat, html:not([data-cr-view="orig"]) #content-CR .vignette[class] .vignette-mat { background: linear-gradient(var(--mc), var(--mc)) 0 0 / calc(34 * var(--u)) 100% no-repeat, linear-gradient(var(--mc), var(--mc)) 0 0 / 100% calc(17 * var(--u)) no-repeat,
    radial-gradient(circle at 100% 100%, transparent calc(7 * var(--u)), var(--mc) calc(7.6 * var(--u))) calc(34 * var(--u)) calc(17 * var(--u)) / calc(7.2 * var(--u)) calc(7.2 * var(--u)) no-repeat !important; }
html:not([data-cr-view="orig"]) #content-CR .vignette:has(.vignette-body-infos.backgroundColor_0) .vignette-mat { --mc: var(--degree0); background-color: transparent !important; }
html:not([data-cr-view="orig"]) #content-CR .vignette:has(.vignette-body-infos.backgroundColor_1) .vignette-mat { --mc: var(--degree1); background-color: transparent !important; }
html:not([data-cr-view="orig"]) #content-CR .vignette:has(.vignette-body-infos.backgroundColor_2) .vignette-mat { --mc: var(--degree2); background-color: transparent !important; }
html:not([data-cr-view="orig"]) #content-CR .vignette:has(.vignette-body-infos.backgroundColor_3) .vignette-mat { --mc: var(--degree3); background-color: transparent !important; }
html:not([data-cr-view="orig"]) #content-CR .vignette:has(.vignette-body-infos.backgroundColor_4) .vignette-mat { --mc: var(--degree4); background-color: transparent !important; }
html:not([data-cr-view="orig"]) #content-CR .vignette:has(.vignette-body-infos.backgroundColor_5) .vignette-mat { --mc: var(--degree5); background-color: transparent !important; }
html:not([data-cr-view="orig"]) #content-CR .vignette:has(.vignette-body-infos.backgroundColor_6) .vignette-mat { --mc: var(--degree6); background-color: transparent !important; }
html:not([data-cr-view="orig"]) #content-CR .vignette:has(.vignette-body-infos.backgroundColor_7) .vignette-mat { --mc: var(--degree7); background-color: transparent !important; }
html:not([data-cr-view="orig"]) #content-CR .vignette:has(.vignette-body-infos.backgroundColor_8) .vignette-mat { --mc: var(--degree8); background-color: transparent !important; }
html:not([data-cr-view="orig"]) #content-CR .vignette:has(.vignette-body-infos.backgroundColor_00) .vignette-mat { --mc: #d2d2d2; background-color: transparent !important; }
html:not([data-cr-view="orig"]) #content-CR .vignette-body-infos, html:not([data-cr-view="orig"]) #content-CR .vignette-body-infos[class*="backgroundColor_"] { background: transparent !important; color: #999999 !important; }
html:not([data-cr-view="orig"]) #content-CR .vignette-body-title { text-align: left; padding-left: calc(4 * var(--u)); }
html:not([data-cr-view="orig"]) #content-CR .vignette-input, html:not([data-cr-view="orig"]) #content-CR .vignette-output { height: calc(34 * var(--u)); }
html:not([data-cr-view="orig"]) #content-CR .vignette-body-infos.vignetteSelected_BackgroundColor { background: transparent !important; color: #ffffff !important; }
/* no arrow column between P0 and P1: the two sit side by side, the pair reads by its row */
html:not([data-cr-view="orig"]) #mat_Arrow { display: none !important; }
/* columns spaced as in look 22: planets and the P0+P1 pair are one unit each, equal gaps between all five, 64px margins */
html:not([data-cr-view="orig"]) #content-CR .mat_colWrapper { justify-content: space-between !important; gap: 0 !important; padding: calc(40 * var(--u) - 1px) calc(64 * var(--u)) calc(30 * var(--u) - 1px); min-height: max(100%, calc(958 * var(--u))); width: var(--boardW, 100%);   /* CR22's board: 958 tall at least; -1px each: rounding at small scales */   /* top: the column titles; a short page scrolls rather than slide the cards under them */
    box-sizing: border-box; }

/* the link lines keep the board's proportions too: 2px at full size */
html:not([data-cr-view="orig"]) #content-CR > svg > line { stroke-width: calc(2 * var(--u)); }
/* column titles: CR22's lettering (Shentox Regular .8571em, 2px tracking), today's colour (#999) */
html:not([data-cr-view="orig"]) #content-CR .mat_TierTitleSpanTitle { letter-spacing: calc(2 * var(--u)); }
/* a selection keeps its full strength while a chain is shown, even outside it (today: .55 for commodities, .3 for planets) */
html:not([data-cr-view="orig"]) #content-CR:has(.vignette.highlighted) .vignette.selected:not(.highlighted),
html:not([data-cr-view="orig"]) #content-CR:has(.vignette.highlighted) .planet.selected:not(.highlighted) { opacity: 1; }


/* ---- a faint planet behind the board, as in System Checker (a little under System Checker's "with results" strength) ---- */
#content-CR { isolation: isolate; }
#content-CR::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.12; pointer-events: none;
    background: var(--cr-art, none) 50% 45% / cover no-repeat;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 75%);
}
/* the background picture can be hidden and shown again (the middle button of the top-left corner, remembered per browser) */
#content-CR.crNoArt::before { display: none; }
#content-CR .crBg { color: #d2d2d2; }
#content-CR .crBg .slash { display: none; }
#content-CR.crNoArt .crBg { color: #6b6b6b; }
#content-CR.crNoArt .crBg:hover { color: #9e9e9e; }
#content-CR.crNoArt .crBg .slash { display: inline; }


/* ---- CR22: the second style of the board (cr22.js), in place of today's when chosen ---- */
html:not([data-cr-view="orig"]) #cr22 { width: 100%; min-height: 100%; }
html:not([data-cr-view="orig"]) #cr22 svg.board { display: block; max-width: none; height: auto; user-select: none; font-family: 'Shentox Regular', 'Segoe UI', sans-serif; }
html:not([data-cr-view="orig"]) #cr22 [data-id] { cursor: pointer; }
html:not([data-cr-view="orig"]) #cr22 [data-io] { cursor: pointer; }
html:not([data-cr-view="orig"]) #cr22 [data-io] .hb, html:not([data-cr-view="orig"]) #cr22 [data-io] .hi { transition: fill .15s linear, stroke .15s linear; }
html:not([data-cr-view="orig"]) #cr22 [data-io]:focus { outline: none; }
html:not([data-cr-view="orig"]) .st-tight [data-io]:hover .hb { fill: var(--hc); } html:not([data-cr-view="orig"]) .st-tight [data-io]:hover .hi { stroke: #0d0d0d; }
@media (prefers-reduced-motion: reduce) { html:not([data-cr-view="orig"]) #cr22 [data-io] .hb, html:not([data-cr-view="orig"]) #cr22 [data-io] .hi { transition: none; } }
html:not([data-cr-view="orig"]) #cr22 .swapBtn { color: #6b6b6b; cursor: pointer; } html:not([data-cr-view="orig"]) #cr22 .swapBtn:hover { color: #9e9e9e; } html:not([data-cr-view="orig"]) #cr22 .swapBtn:hover rect { stroke: #474747; } html:not([data-cr-view="orig"]) #cr22 .swapBtn:focus { outline: none; }
/* the soft fades of today's page (.12s): the board is patched in place (part_engine2.js), so what changes fades */
html:not([data-cr-view="orig"]) #cr22 svg.board [data-id] rect, html:not([data-cr-view="orig"]) #cr22 svg.board [data-id] text, html:not([data-cr-view="orig"]) #cr22 svg.board [data-id] image, html:not([data-cr-view="orig"]) #cr22 svg.board [data-id] circle, html:not([data-cr-view="orig"]) #cr22 svg.board [data-id] path {
    transition: fill .12s linear, stroke .12s linear, opacity .12s linear, filter .12s linear; }
html:not([data-cr-view="orig"]) #cr22 svg.board g[data-id] { transition: opacity .12s linear; }   /* the fade outside the chain */
html:not([data-cr-view="orig"]) #cr22 .bgBtn { cursor: pointer; } html:not([data-cr-view="orig"]) #cr22 .bgBtn:hover rect { stroke: #474747; } html:not([data-cr-view="orig"]) #cr22 .bgBtn:focus { outline: none; }

/* the view: set on <html> by head.js before anything is drawn, then by swap.js */
html[data-cr-view="22"] #content-CR > :not(#cr22) { display: none !important; }
html:not([data-cr-view="22"]) #content-CR > #cr22 { display: none; }
/* until swap.js has the right view in place, nothing of the board shows (a 3s safety reveals it anyway) */
html.crBoot #content-CR > * { visibility: hidden; animation: crBootReveal 0s 3s forwards; }
@keyframes crBootReveal { to { visibility: visible; } }

/* ---- the original page (data-cr-view="orig"): the rules above that restyle the board are off there (scoped to the
   other two views); the legend, the corner buttons, the background picture and the lock stay. The first button
   becomes the way back, the swap is put away, and the background and lock buttons close up behind it. */
html[data-cr-view="orig"] #content-CR > #crSwap { display: none !important; }
html[data-cr-view="orig"] #crOrig .toOrig { display: none; }
html[data-cr-view="orig"] #crOrig .toNew { display: block; }
html[data-cr-view="orig"] #crOrig { color: #9e9e9e; }
html[data-cr-view="orig"] #content-CR > #crBgBtn { left: calc(56 * var(--u)); }
html[data-cr-view="orig"] #content-CR > #crLock { left: calc(96 * var(--u)); }