/* Eve WebTools — harmonisation layer for Planetary (P.I. Tools).
   One file for the four tools: Commodity Relations, System Checker, Setup Builder, Template Library.
   Load it LAST on each tool page, after styles.css, the tool stylesheet and lib/custom_elements.css.
   It restyles the selectors Planetary already uses (see the brand book, "Harmonisation plan").
   Sections: A shared chrome (0-7) · B Commodity Relations · C System Checker · D Setup Builder · E Template Library.
   When /lib/ewt-core.css exists, section A moves there. */

:root {
    --textColor2: #6b6b6b;                 /* quiet text: was #474747 */
    --btnTextColourNormal: #6b6b6b;
    --btnTextColourHover: #9e9e9e;
    --btnTextColourSelected: #d2d2d2;
    --btnMark: inset 0 -2px 0 #d2d2d2;
    --ok: #48f0c0;  --warn: #ffb648;  --bad: #ff9a9a;  --badFrame: #ff5c5c;
}

/* ====================================================================== A. SHARED CHROME */

/* ============================================================ A0. cursors: no cursor images, plain pointer / default
   (same selectors, same order as the sources, so the cascade is unchanged) */
a { cursor: pointer !important; }
html, body { cursor: default; }
.svg_ewtLogo, .svgNav, #right > #fbTopBtn, .fbX, .fbBtn, .fbTab, .fbDrop .fbBtn { cursor: pointer; }
.fbBtn:disabled { cursor: default; }
.select-items div, .select-selected, .custom-checkbox-label, .custom-checkbox-label input,
.logisticCollChoiceLabel, .custom-radio-label, .logisticCollChoiceLabel input, .custom-radio-label input { cursor: pointer; }
.vignette-input, .vignette-output, .crm_back, .crm_ghostbtn, .crm_tab, .crm_row, .crm_chip, .crm_onode { cursor: pointer; }
.crm_onode.center { cursor: default; }
.systemResult_ul { cursor: default; }
.systemResult_li, .adjacentSystems, .sc_prow, .scv { cursor: pointer; }
.planetPicker, .sb_levelspans, .sb_levelspans:hover, .sb_fmenu_items:not(#sb_fmenu_extractorheads) > span, .sb_svg_fmenu, .sb_ghostbtn, .facilities,
#SB-Overlay-MessageBox-Buttons > *, #MessageBoxButtons > *, .sb_pubTitle > *, #SB-pubCancel, #SB-pubSend { cursor: pointer; }
.sb_levelspans.deactivatedlevels, .sb_levelspans.deactivatedlevels:hover, .sb_fmenu_extratorheads_deactivated, .sb_fmenu_extratorheads_deactivated > div > svg { cursor: default !important; }
#TL-submitBtn, .tl_ddBtn, #TL-defToggle, .tl_ddOpt, .tl_sortTab, #TL-more, .tl_vote, .tl_action, .tl_subTitle > *, #TL-subCancel, #TL-subSend, #TL-expCancel, .tl_expPlanet { cursor: pointer; }
.tl_expPlanet:disabled, #SB-pubSend:disabled, #TL-subSend:disabled { cursor: default; }

/* ============================================================ A1. top bar (Atlas look, markup untouched) */
/* tool icons: quiet -> hover -> current, colour only; the current tool carries the bottom mark inside the 64px bar */
#right .toolLogos.pTools .svgNav { stroke: var(--btnTextColourNormal); color: var(--btnTextColourNormal); }
#right .toolLogos.pTools:hover .svgNav { stroke: var(--btnTextColourHover); color: var(--btnTextColourHover); }
#right .toolLogos.pTools .svgNav.svg_selected, #right .toolLogos.pTools:hover .svgNav.svg_selected { stroke: var(--btnTextColourSelected); color: var(--btnTextColourSelected); }
#right .toolLogos.pTools:has(.svg_selected) { box-shadow: var(--btnMark); }
/* feedback: an action button, constant frame */
#right > #fbTopBtn {                                  /* a <button> on the four tools (styles.css carries the base look) */
    appearance: none; -webkit-appearance: none;
    font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 0.8571em; letter-spacing: 1px; line-height: 1.2;
    padding: 0.6em 1.1em calc(0.6em + 2px); margin: 0 10px 0 0;
    border: 1px solid #313131; color: var(--btnTextColourNormal); transition: color .15s linear;
}
#right > #fbTopBtn:hover { color: var(--btnTextColourHover); border-color: #313131; }
#right > #fbTopBtn:active { color: var(--btnTextColourSelected); box-shadow: var(--btnMark); }
/* tooltips of the tool icons: small pop-over */
[data-tooltip]:before {
    font-family: 'Shentox Regular', 'Segoe UI', sans-serif; font-size: 0.8571em; letter-spacing: 0.5px;
    padding: 5px 10px; background-color: #0d0d0df7; border: 1px solid #313131; color: #d2d2d2;
}

/* ============================================================ A2. feedback dialog (same form as Atlas) */
.fbTab {
    background: none !important; border: 1px solid #313131 !important; color: var(--btnTextColourNormal);
    padding: 6px 13px 8px; transition: color .15s linear;
}
.fbTab:hover { color: var(--btnTextColourHover); }
.fbTab-active, .fbTab-active:hover { background: none !important; color: var(--btnTextColourSelected); box-shadow: var(--btnMark); }
.fbTabs { font-size: 0.8571em; }
.fbBtn {
    font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 0.8571em; letter-spacing: 1px; text-transform: uppercase;
    padding: 0.6em 1.6em calc(0.6em + 2px); line-height: 1.2;
    background: none !important; border: 1px solid #313131 !important; color: var(--btnTextColourNormal) !important;
    box-shadow: none; transition: color .15s linear;
}
.fbDrop .fbBtn { font-size: 0.8em; padding: 0.55em 1.1em calc(0.55em + 2px); }     /* 0.7143em of the body: the drop zone is already 0.8929em */
.fbBtn:hover { color: var(--btnTextColourHover) !important; }
.fbBtn:active { color: var(--btnTextColourSelected) !important; box-shadow: var(--btnMark); }
.fbBtn-active, #fbSend { color: var(--btnTextColourSelected) !important; box-shadow: none !important; }      /* primary */
.fbBtn-active:hover, #fbSend:hover { color: #ffffff !important; }
.fbBtn:disabled { opacity: 0.45; }
.fbFoot { border-top: 1px solid #313131; padding-top: 12px; justify-content: flex-end; gap: 6px; }
.fbFoot .fbNote { margin-right: auto; }
.fbX { color: var(--btnTextColourNormal); transition: color .15s linear; }
.fbX:hover { color: var(--btnTextColourHover); border-color: #313131; }
.fbRow input, .fbRow textarea { background-color: #00000060; border: 1px solid #313131; color: #d2d2d2; min-height: 34px; padding-top: 0; padding-bottom: 0; }
.fbRow textarea { padding-top: 7px; padding-bottom: 7px; }
.fbRow input::placeholder, .fbRow textarea::placeholder { color: #6b6b6b; }
.fbRow input:focus, .fbRow textarea:focus { border-color: #d2d2d2; }
.fbRow .fl { font-size: 0.7857em; letter-spacing: 1px; text-transform: uppercase; color: #6b6b6b; flex-basis: 5.6em; }
.fbLabel { text-transform: uppercase; }
.fbDrop { font-size: 0.8571em; }
.fbSmall { font-size: 0.8333em; }
.fbNote.err { color: #ff9a9a; }

/* ============================================================ A3. legacy custom select / checkbox / radio (lib/custom_elements.css)
   dark, no system blue; --toiletPaperColor was never defined, the states are spelled out here */
.select-selected { background-color: #00000060; border: 1px solid #313131; color: #d2d2d2 !important; transition: border-color .15s linear; }
.select-selected:hover, .select-selected:focus, .select-selected:active { border: 1px solid #313131; }
.select-selected.select-arrow-active { border-color: #d2d2d2; }
.select-selected:after { border-color: #6b6b6b transparent transparent transparent; }
.select-selected.select-arrow-active:after { border-color: transparent transparent #d2d2d2 transparent; }
.select-items { background-color: #0d0d0df7; border: 1px solid #313131; margin-top: 4px; }
.select-items div { color: #999999; transition: color .15s linear, background-color .15s linear; }
.select-items div:hover { color: #d2d2d2 !important; background-color: #d2d2d214 !important; }
.select-items div.same-as-selected { color: #d2d2d2 !important; background-color: #d2d2d214 !important; box-shadow: inset 3px 0 0 #d2d2d2; }
.custom-checkbox-checkmark, .custom-radio-checkmark, .logisticCollChoiceCheckmark {
    top: 1px; width: 14px; height: 14px; box-sizing: border-box; border: 1px solid #313131; background-color: #00000060;
}
.custom-checkbox-label:hover input ~ .custom-checkbox-checkmark,
.custom-radio-label:hover input ~ .custom-radio-checkmark,
.logisticCollChoiceLabel:hover input ~ .logisticCollChoiceCheckmark { background-color: #00000060; }
.custom-checkbox-label input:checked ~ .custom-checkbox-checkmark,
.custom-radio-label input:checked ~ .custom-radio-checkmark,
.logisticCollChoiceLabel input:checked ~ .logisticCollChoiceCheckmark { background-color: #d2d2d2; box-shadow: inset 0 0 0 3px #101010; }
.custom-checkbox-label .custom-checkbox-checkmark:after, .custom-radio-label .custom-radio-checkmark:after,
.logisticCollChoiceLabel .logisticCollChoiceCheckmark:after { display: none !important; }
.custom-checkbox-label, .custom-radio-label, .logisticCollChoiceLabel { color: #999999; transition: color .15s linear; }
.custom-checkbox-label:hover, .custom-radio-label:hover, .logisticCollChoiceLabel:hover { color: #d2d2d2; }
.custom-checkbox-label input:focus-visible ~ .custom-checkbox-checkmark,
.custom-radio-label input:focus-visible ~ .custom-radio-checkmark,
.logisticCollChoiceLabel input:focus-visible ~ .logisticCollChoiceCheckmark { outline: 1px solid #d2d2d2; outline-offset: 2px; }
select { color-scheme: dark; background-color: #00000060; border: 1px solid #313131; color: #d2d2d2; }
select:focus { border-color: #d2d2d2; }

/* ============================================================ A4. commodity tiles (shared by Relations and the Checker): px text -> em ladder */
.vignette-body-title, .vignette-body-infos, .scv .vignette-body-title, .scv .vignette-body-infos { font-size: 0.7143em; }
.vignette-input, .vignette-output { font-size: 0.7857em; }
/* tier tags P0..P4: neutral filled tag */
.mat_TierTitleSpanTier, .sc_tnum, .crm_tiertag {
    font-family: 'Shentox SemiBold', 'Segoe UI', sans-serif; font-size: 0.7143em; letter-spacing: 1px; text-transform: uppercase;
    color: #151515; background-color: #d2d2d2a0; padding: 1px 6px;
}

/* ============================================================ A5. keyboard focus */
a:focus-visible, button:focus-visible, [role="tab"]:focus-visible, [tabindex]:focus-visible, label.fbBtn:focus-within { outline: 1px solid #d2d2d2; outline-offset: 2px; }
.crm_row:focus-visible, .systemResult_li:focus-visible, .tl_ddOpt:focus-visible, .tl_action:focus-visible { outline-offset: -1px; }
input:focus-visible, textarea:focus-visible { outline: none; }      /* fields show focus on their frame */

/* ============================================================ A6. motion */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ============================================================ A7. the one dialog (builder: reset confirm, message box, publish form · library: submit, copy to game)
   veil #00000080 · surface #0d0d0df7 · panel title · framed ✕ · hairline under the head and above the foot · text left · actions right, primary last */
#SB-Overlay, #MessageBoxOverlay, #SB-pubOverlay, #TL-subOverlay, #TL-expOverlay { background: #00000080; }
#SB-Overlay-MessageBox, #MessageBoxDialog, #SB-pubForm, #TL-subForm, #TL-expBox {
    background: #0d0d0df7; border: 1px solid #313131; border-radius: 0; box-shadow: none;
    padding: 12px 16px 16px; gap: 12px; align-items: stretch; justify-content: flex-start; text-align: left;
}
#SB-Overlay-MessageBox, #MessageBoxDialog { width: 30em; max-width: calc(100% - 32px); box-sizing: border-box; }
#SB-Overlay-MessageBox-Message { color: #d2d2d2; line-height: 1.5; }
#MessageBoxMessage { text-align: left; }
/* head */
.sb_pubTitle, .tl_subTitle, #MessageBoxTitle {
    font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 0.8571em; letter-spacing: 2px; text-transform: uppercase; color: #d2d2d2;
    align-items: center; border-bottom: 1px solid #313131; padding-bottom: 8px;
}
#MessageBoxTitle { padding-bottom: 10px; }
.sb_pubTitle > *, .tl_subTitle > * {                                /* the ✕: framed icon button (a <span> today, a <button> in the shipped pages) */
    appearance: none; -webkit-appearance: none; background: none; margin: 0; border: 1px solid #313131; padding: 3px 9px;
    font-family: 'Shentox Regular', 'Segoe UI', sans-serif; font-size: 1.1667em; letter-spacing: 0; line-height: 1.2;
    color: var(--btnTextColourNormal); transition: color .15s linear;
}
.sb_pubTitle > *:hover, .tl_subTitle > *:hover { color: var(--btnTextColourHover); border-color: #313131; }
.sb_pubTitle > *:active, .tl_subTitle > *:active { color: var(--btnTextColourSelected); }
.sb_pubHint, .tl_subHint { font-size: 0.8571em; }
/* fields */
#SB-pubForm input, #TL-subForm input {
    background: #00000060; border: 1px solid #313131; color: #d2d2d2; min-height: 34px; padding: 0 10px; box-sizing: border-box;
}
#TL-subJson { background: #000000a8; border: 1px solid #313131; color: #d2d2d2; font-size: 0.8571em; }      /* big paste box */
#SB-pubForm input::placeholder, #TL-subForm input::placeholder, #TL-subJson::placeholder { color: #6b6b6b; }
#SB-pubForm input:focus, #TL-subForm input:focus, #TL-subJson:focus { border-color: #d2d2d2; }
/* foot */
.sb_pubFoot, .tl_subFoot, #SB-Overlay-MessageBox-Buttons, #MessageBoxButtons {
    display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 6px;
    border-top: 1px solid #313131; padding-top: 12px;
}
#SB-pubNote, #TL-subNote, #TL-expNote { font-size: 0.8571em; color: #6b6b6b; }
#SB-pubNote.err, #TL-subNote.err { color: #ff9a9a; }
#SB-pubNote.ok, #TL-subNote.ok, #TL-expNote.ok { color: #48f0c0; }
/* actions (spans today in the two builder message boxes, real buttons in the shipped pages) */
#SB-pubCancel, #SB-pubSend, #TL-subCancel, #TL-subSend, #TL-expCancel, #SB-Overlay-MessageBox-Buttons > *, #MessageBoxButtons > * {
    appearance: none; -webkit-appearance: none; margin: 0; background: none; border: 1px solid #313131; box-shadow: none;
    font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 0.8571em; letter-spacing: 1px; text-transform: uppercase; line-height: 1.2;
    padding: 0.6em 1.6em calc(0.6em + 2px); color: var(--btnTextColourNormal); transition: color .15s linear; user-select: none;
}
#SB-pubCancel:hover, #SB-pubSend:hover, #TL-subCancel:hover, #TL-subSend:hover, #TL-expCancel:hover, #SB-Overlay-MessageBox-Buttons > *:hover, #MessageBoxButtons > *:hover {
    color: var(--btnTextColourHover); border-color: #313131;
}
#SB-pubCancel:active, #TL-subCancel:active, #TL-expCancel:active, #SB-O-MB-B-Cancel:active { color: var(--btnTextColourSelected); box-shadow: var(--btnMark); }
#SB-pubSend, #TL-subSend, #MessageBoxOk { color: var(--btnTextColourSelected); }                     /* primary: bright at rest, no mark */
#SB-pubSend:hover, #TL-subSend:hover, #MessageBoxButtons > #MessageBoxOk:hover { color: #ffffff; }
#SB-pubSend:disabled, #TL-subSend:disabled { opacity: 0.45; }
#SB-O-MB-B-Cancel { order: 1; }  #SB-O-MB-B-Reset { order: 2; }                                       /* the confirming action comes last */
#SB-Overlay-MessageBox-Buttons > #SB-O-MB-B-Reset:hover { color: #ff9a9a !important; border-color: #313131 !important; }     /* danger */
#SB-Overlay-MessageBox-Buttons > #SB-O-MB-B-Reset:active { box-shadow: inset 0 -2px 0 #ff5c5c; }

/* ====================================================================== B. COMMODITY RELATIONS */
.planetTypeNames span { font-size: 0.9286em; }
#innerCRInfos span { font-size: 0.8571em; letter-spacing: 1px; color: #6b6b6b; }

/* ---- mobile flow (below 700px) */
.crm_title { font-size: 1em; }
/* real buttons since the second shipment: native look reset, same boxes as the spans they replace */
.crm_back, .crm_ghostbtn, .crm_chip { appearance: none; -webkit-appearance: none; margin: 0; font-family: inherit; }
.crm_back { box-sizing: content-box; padding: 0; background: none; font-size: 1em; }
.crm_ghostbtn { background: none; }
.crm_back { color: var(--btnTextColourNormal); transition: color .15s linear; }
.crm_back:hover { color: var(--btnTextColourHover); }
.crm_back:active { color: var(--btnTextColourSelected); }
.crm_ghostbtn {                                                     /* small action button */
    font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 0.7143em; letter-spacing: 1px; line-height: 1.2;
    padding: 0.55em 1.1em calc(0.55em + 2px); color: var(--btnTextColourNormal); transition: color .15s linear;
}
.crm_ghostbtn:hover { color: var(--btnTextColourHover); }
.crm_ghostbtn:active { color: var(--btnTextColourSelected); box-shadow: var(--btnMark); }
.crm_searchbox input::placeholder { color: #6b6b6b; }
#crm_sres { background-color: #0d0d0df7; }
#crm_sres .crm_row:hover { background-color: #d2d2d214; }
.crm_tab {                                                          /* menu buttons: which tier the list shows */
    font-size: 0.7857em; letter-spacing: 1px; padding: 5px 11px 7px; color: var(--btnTextColourNormal); transition: color .15s linear;
}
.crm_tab:hover { color: var(--btnTextColourHover); }
.crm_tab.on, .crm_tab.on:hover { background: none; color: var(--btnTextColourSelected); box-shadow: var(--btnMark); }
.crm_sub, .crm_srtype, .crm_statl, .crm_olbl, .crm_pairrow .crm_arr { color: #6b6b6b; }
.crm_statl, .crm_olbl { font-size: 0.7143em; }
.crm_statrow { gap: 8px 12px; }
.crm_stat { min-width: 56px; }
.crm_pairrow .crm_arr { font-size: 0.7857em; }
.crm_statv { font-size: 1.2857em; }
.crm_chip {                                                         /* navigating chip */
    border-color: transparent; font-size: 0.8571em; padding: 4px 10px; transition: color .15s linear;
}
.crm_onode.center img { box-shadow: none; }                         /* a left mark means "current row" only */
.crm_row, .crm_nm { transition: color .15s linear, background-color .15s linear; }

/* ====================================================================== C. SYSTEM CHECKER */
#SC-form-search { font-size: 1em; width: 33em; padding: 0.8em 1em 0.8em 2.75em; background-position: 1.1em center; }
#SC-form-search::placeholder { color: #6b6b6b; }
.systemResult_ul { background-color: #0d0d0df7; }
.systemResult_li:hover { background-color: #d2d2d214; }
.systemResult_li { transition: color .15s linear, background-color .15s linear; }
/* adjacent systems: navigating chips */
.adjacentSystems { padding: 4px 10px; }
.adjacentSystems > span { font-size: 0.8571em; transition: color .15s linear; }
.adjacentSystems .adjRegion { font-size: 1em; color: #6b6b6b; }
.adjacentSystems::before { font-size: 0.8571em; color: #6b6b6b; }
/* what a neighbour would add: success colour (the teal accent is retired) */
#SC-adjPreview { color: #48f0c0; }
.sc_unlock .vignette-mat { outline-color: #48f0c0aa; }
.sc_unlock .sc_misstag { color: #48f0c0; }
.sc_misstag { font-size: 0.7143em; letter-spacing: 0.02em; color: #6b6b6b; }
.sc_prow .sc_pn { font-size: 0.9286em; }
.sc_prow .sc_ps { color: #6b6b6b; }
#SC-empty-title { font-size: 1.2857em; }

/* ====================================================================== D. SETUP BUILDER */
/* ---- step 1: planet picker (whole-card hover keeps its frame change) */
#SB-pickTitle { font-size: 1.2857em; letter-spacing: 2px; }
.planetPicker_details_name { font-size: 1.2857em; }

/* ---- step 2: top panels */
#sb_selectedPlanetType { font-size: 1.2857em; }
#sb_pct_CPU, #sb_pct_PWG { font-size: 0.8571em; }
/* labels: caps, quiet */
#sb_SkillLevelSpan span, #sb_CCUpgradeLevelSpan span { font-size: 0.7857em; color: #6b6b6b; }
#SB-calinpan-Right > div > span:first-child, #sb_div_totalcost > span:first-child { font-size: 0.7857em; letter-spacing: 1.5px; color: #6b6b6b; }
/* skill levels: a menu-button group. The run 0..N stays readable, the top level carries the mark; no fill */
.sb_levelspans { appearance: none; -webkit-appearance: none; margin: 0; font-family: inherit; color: var(--btnTextColourNormal); }      /* real buttons */
.sb_levelspans:hover { background: none; color: var(--btnTextColourHover); }
.sb_levelspans.selectedlevel, .sb_levelspans.selectedlevels, .sb_levelspans.selectedlevels:hover { background: none; color: #999999; }
.sb_levelspans.selectedlevel:not(:has(~ .selectedlevel)), .sb_levelspans.selectedlevel:not(:has(~ .selectedlevel)):hover { color: var(--btnTextColourSelected); box-shadow: var(--btnMark); }
.sb_levelspans.deactivatedlevels, .sb_levelspans.deactivatedlevels:hover { color: #6b6b6b !important; border-color: #313131 !important; opacity: 0.45; }
/* back to the picker: small action button */
.sb_ghostbtn {
    appearance: none; -webkit-appearance: none; background: none; margin-top: 0; margin-bottom: 0;
    font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 0.7143em; letter-spacing: 1px; line-height: 1.2;
    padding: 0.55em 1.1em calc(0.55em + 2px); border: 1px solid #313131; color: var(--btnTextColourNormal);
}
.sb_ghostbtn:hover { color: var(--btnTextColourHover); }
.sb_ghostbtn:active { color: var(--btnTextColourSelected); box-shadow: var(--btnMark); }

/* ---- facility menu: rows. Hover fill of a translucent plate; an armed tool is the current row (left tick) */
.sb_fmenu_items:hover { background-color: #d2d2d20a; }
.sb_fmenu_items:has(> svg.createlink_active), .sb_fmenu_items:has(> svg.deletelink_active), .sb_fmenu_items:has(> svg.decommission_active) { background-color: #d2d2d20a; }
#sb_fmenu_createlink, #sb_fmenu_publish, #sb_fmenu_decommission { border-top-color: #313131; }
#sb_fmenu_deletelink:hover > span, #sb_fmenu_decommission:hover > span { color: #ff9a9a; }       /* destructive tools */
.sb_fmenu_extratorheads_deactivated, .sb_fmenu_extratorheads_deactivated > div > svg { opacity: 0.45; }

/* ---- right column */
#sb_input_pradius { background-color: #00000060; min-height: 34px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
#sb_input_pradius::placeholder { color: #6b6b6b; }

/* ---- messages under the canvas */
#SB-canvasHint { background-color: #00000040; }
.alertdiv_visible, .alertdiv_invisible { color: #ff9a9a; }
#SB-calnotifpan.alertdiv_visible { border-color: #ff5c5c80; background-color: #ff5c5c0d; font-family: 'Shentox Regular', 'Segoe UI', sans-serif; }
.collision-state::before { border-color: #ff5c5c; box-shadow: 0 0 9px #ff5c5c80, inset 0 0 9px #ff5c5c60; }

/* ====================================================================== E. TEMPLATE LIBRARY */
#content-TL { --tl_warn: #ffb648; --tl_bad: #ff9a9a; --tl_accent: #48f0c0; --tl_ok: #48f0c0; }
#TL-title { font-size: 1.2857em; letter-spacing: 2px; color: #d2d2d263; }
#TL-filters { border-top-color: #313131; }
/* submit: the primary action of the view */
#TL-submitBtn {
    font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 0.8571em; letter-spacing: 1px; line-height: 1.2;
    padding: 0.6em 1.6em calc(0.6em + 2px); background: none; border: 1px solid #313131; color: var(--btnTextColourSelected);
    box-shadow: none; transition: color .15s linear;
}
#TL-submitBtn:hover { background: none; border-color: #313131; color: #ffffff; }
#TL-more {
    font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 0.8571em; letter-spacing: 1px; line-height: 1.2;
    padding: 0.6em 1.6em calc(0.6em + 2px); background: none; color: var(--btnTextColourNormal); transition: color .15s linear;
}
#TL-more:hover { border-color: #313131; color: var(--btnTextColourHover); }
#TL-more:active { color: var(--btnTextColourSelected); box-shadow: var(--btnMark); }
/* filter pickers: they open a list, so the frame lights on hover and while open */
.tl_ddBtn { background: none; color: #999999; padding: 6px 12px 8px; transition: color .15s linear, border-color .15s linear; }
.tl_ddBtn:hover, .tl_dd:has(.tl_ddPanel:not([hidden])) .tl_ddBtn { color: #d2d2d2; border-color: #d2d2d2; }
.tl_ddBtn.tl_set { color: #d2d2d2; }
.tl_ddPanel { background: #0d0d0d; }
.tl_ddOpt { font-size: 0.8571em; transition: color .15s linear, background-color .15s linear; }
.tl_ddOpt:hover { background: #d2d2d214; }
.tl_ddOpt.tl_on { background: #d2d2d214; box-shadow: inset 3px 0 0 #d2d2d2; }
/* toggle and sort: menu buttons, 3px apart, bottom mark when on */
#TL-defToggle, .tl_sortTab {
    background: none; border: 1px solid #313131; color: var(--btnTextColourNormal); padding: 6px 13px 8px; transition: color .15s linear;
}
#TL-sortTabs { gap: 3px; }
.tl_sortTab, .tl_sortTab:first-child { border-left-width: 1px; }
#TL-defToggle:hover, .tl_sortTab:hover { color: var(--btnTextColourHover); border-color: #313131; }
#TL-defToggle.tl_on, #TL-defToggle.tl_on:hover, .tl_sortTab.tl_on, .tl_sortTab.tl_on:hover {
    background: none; border-color: #313131; color: var(--btnTextColourSelected); box-shadow: var(--btnMark);
}

/* ---- cards (whole-card hover keeps its frame change) */
.tl_cardName { font-size: 1em; }
.tl_cardDesc { font-size: 0.8571em; }
.tl_vote { background: none; color: var(--btnTextColourNormal); padding: 6px 10px 8px; transition: color .15s linear; }
.tl_vote:hover { border-color: #313131; color: var(--btnTextColourHover); }
.tl_vote.tl_voted, .tl_vote.tl_voted:hover { color: var(--btnTextColourSelected); box-shadow: var(--btnMark); }
/* badges: outlined tags; the default template takes the success colour */
.tl_badge, .tl_badge.tl_planet { background: none; border: 1px solid #313131; color: #999999; padding: 1px 6px; }
.tl_badge.tl_def { color: #48f0c0; border-color: #48f0c066; }
.tl_badge.tl_prov { color: #6b6b6b; border: 1px dotted #313131; }
.tl_badge.tl_flagN { background: none; color: #ff9a9a; border-color: #ff5c5c80; }
.tl_stats, .tl_fitPanel { font-size: 0.8571em; }
.tl_stats, .tl_fitPanel, .tl_actions, .tl_action { border-color: #313131; }
.tl_card { border-color: #313131; }
.tl_stat .k, .tl_fitBar .k, .tl_fitPanel .row .k { font-size: 0.8333em; }       /* 0.7143em of the body */
.tl_fitTrack { border-color: #313131; }
.tl_miniMap { border-color: #313131; }
.tl_miniMap rect[fill="#5ccbcb"] { fill: #d2d2d2; }                              /* storage / launchpad pins: no teal */
/* card actions: frameless buttons on the card's foot hairline */
.tl_action { padding: 8px 4px 10px; color: var(--btnTextColourNormal); transition: color .15s linear; }
.tl_action:hover { background: none; color: var(--btnTextColourHover); }
.tl_card.tl_open .tl_action[data-act="fit"] { color: var(--btnTextColourSelected); box-shadow: var(--btnMark); }
.tl_action[data-act="report"]:hover, .tl_action.tl_armed, .tl_action.tl_armed:hover { color: #ff9a9a; }
.tl_action.tl_reported { color: #6b6b6b; opacity: 0.45; }

/* ---- overlays: see A7. The validation list is a message box in the status tone */
#TL-subCheck { border: 1px solid #313131; background-color: #00000040; font-size: 0.8571em; color: #999999; }
#TL-subCheck:has(.ok) { border-color: #48f0c066; background-color: #48f0c00d; }
#TL-subCheck:has(.err) { border-color: #ff5c5c80; background-color: #ff5c5c0d; }
#TL-subCheck .ok { color: #48f0c0; }
#TL-subCheck .err { color: #ff9a9a; }
.tl_expPlanet {
    font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 0.7143em; letter-spacing: 1px; line-height: 1.2;
    padding: 0.8em 0.4em calc(0.8em + 2px); background: none; color: var(--btnTextColourNormal); transition: color .15s linear;
}
.tl_expPlanet:hover:not(:disabled) { border-color: #313131; color: var(--btnTextColourHover); }
.tl_expPlanet:active:not(:disabled) { color: var(--btnTextColourSelected); box-shadow: var(--btnMark); }
.tl_expPlanet:disabled { opacity: 0.45; }

/* ============================================================ scrollbars: one dark bar, 10px, thumb #313131 -> #6b6b6b -> #9e9e9e */
*::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent !important; }
*::-webkit-scrollbar-button { display: none !important; }
*::-webkit-scrollbar-thumb { background-color: #313131 !important; border: 2px solid transparent !important; background-clip: padding-box !important; border-radius: 0 !important; min-height: 28px; }
*::-webkit-scrollbar-thumb:hover { background-color: #6b6b6b !important; }
*::-webkit-scrollbar-thumb:active { background-color: #9e9e9e !important; }
textarea::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
textarea::-webkit-scrollbar-thumb { border-width: 1px !important; }
/* Chromium ignores the rules above on any element that sets scrollbar-color, so clear it there; Firefox has no ::-webkit-scrollbar and takes the standard properties */
@supports selector(::-webkit-scrollbar) { * { scrollbar-color: auto !important; } }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: #313131 transparent !important; } }