/* Calculator pages (inc/live/calc.php, assets/js/live/calc.js): the coin / currency picker in the design's look,
   up / down tones of live values, logos and currency glyphs set by the scripts, chart hover rows. */

/* picker: a dialog over the form card, like the design's */
.wcc-ov { position: fixed; inset: 0; z-index: 60; }
.wcc-pk { position: absolute; left: 0; right: 0; top: 0; z-index: 61; display: flex; flex-direction: column; max-height: min(560px, 78vh); border-radius: 32px; background: #1D1D1F; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.1); overflow: hidden; color: #F5F5F7; text-align: left; }
.wcc-pk-hd { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 12px; }
.wcc-pk-tt { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wcc-pk-tt > span { font-family: -apple-system, 'SF Pro Display', 'Geist', system-ui, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: #F5F5F7; }
.wcc-pk-done { height: 44px; padding: 0 6px; border: 0; background: none; color: #2997FF; cursor: pointer; font: inherit; font-size: 16px; font-weight: 600; }
.wcc-pk-q { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); }
.wcc-pk-q svg { flex: 0 0 auto; }
.wcc-pk-q svg * { stroke: #86868B; }
.wcc-pk-q input { flex: 1 1 0%; min-width: 0; height: 100%; border: 0; outline: none; background: none; color: #F5F5F7; font: inherit; font-size: 16px; }
.wcc-pk-q input::placeholder { color: #6B7079; }
.wcc-pk-ls { flex: 1 1 0%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 10px 12px; }
.wcc-pk-g { display: flex; flex-direction: column; padding-top: 6px; }
.wcc-pk-gt { padding: 8px 10px 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #86868B; }
.wcc-pk-it { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 6px 10px; border: 0; border-radius: 14px; background: transparent; cursor: pointer; font: inherit; text-align: left; color: #F5F5F7; transition: background-color 0.2s; }
.wcc-pk-it:hover, .wcc-pk-it.is-kb { background: rgba(255, 255, 255, 0.05); }
.wcc-pk-it[aria-selected="true"] { background: rgba(255, 255, 255, 0.07); }
.wcc-pk-ic { position: relative; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: center / cover no-repeat transparent; font-size: 13px; font-weight: 700; letter-spacing: -0.02em; color: #FFFFFF; }
.wcc-pk-nm { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wcc-pk-nm b { font-size: 16px; font-weight: 600; }
.wcc-pk-nm span { font-size: 13px; color: #86868B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcc-pk-rt { flex: 0 0 auto; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; color: #A1A1A6; }
.wcc-pk-ck { flex: 0 0 auto; opacity: 0; color: #2997FF; }
.wcc-pk-it[aria-selected="true"] .wcc-pk-ck { opacity: 1; }
.wcc-pk-none { padding: 18px 10px; font-size: 14px; color: #86868B; }
html[data-theme=light] .wcc-pk { background: #FFFFFF; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(0, 0, 0, 0.1); color: #1D1D1F; }
html[data-theme=light] .wcc-pk-tt > span { color: #1D1D1F; }
html[data-theme=light] .wcc-pk-done { color: #0066CC; }
html[data-theme=light] .wcc-pk-q { background: rgba(0, 0, 0, 0.08); }
html[data-theme=light] .wcc-pk-q svg * { stroke: #6E6E73; }
html[data-theme=light] .wcc-pk-q input { color: #1D1D1F; }
html[data-theme=light] .wcc-pk-q input::placeholder { color: #86868B; }
html[data-theme=light] .wcc-pk-gt, html[data-theme=light] .wcc-pk-nm span, html[data-theme=light] .wcc-pk-rt, html[data-theme=light] .wcc-pk-none { color: #6E6E73; }
html[data-theme=light] .wcc-pk-it { color: #1D1D1F; }
html[data-theme=light] .wcc-pk-it:hover, html[data-theme=light] .wcc-pk-it.is-kb { background: rgba(0, 0, 0, 0.035); }
html[data-theme=light] .wcc-pk-it[aria-selected="true"] { background: rgba(0, 0, 0, 0.05); }
html[data-theme=light] .wcc-pk-ck { color: #0066CC; }

/* logos and currency glyphs in the design's icon circles */
main .wcc-ci { background-color: transparent !important; background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important; }
main .wcc-fi, .wcc-pk .wcc-fi { background-image: none !important; background-color: #3A3A3C !important; color: #F5F5F7 !important; }
html[data-theme=light] main .wcc-fi, html[data-theme=light] .wcc-pk .wcc-fi { background-color: #E3E3E8 !important; color: #1D1D1F !important; }

/* tones of live values: text (data-wcc-c) and badges (data-wcc-t) in the design's colours */
main [data-wcc-c="up"] { color: #30D158 !important; }
main [data-wcc-c="dn"] { color: #FF453A !important; }
main [data-wcc-c="flat"] { color: #A1A1A6 !important; }
main [data-wcc-c="or"] { color: #FF9F0A !important; }
main [data-wcc-c="t1"] { color: #F5F5F7 !important; }
main [data-wcc-t="up"] { color: #30D158 !important; background: rgba(48, 209, 88, 0.16) !important; }
main [data-wcc-t="dn"] { color: #FF453A !important; background: rgba(255, 69, 58, 0.16) !important; }
main [data-wcc-t="flat"] { color: #A1A1A6 !important; background: rgba(255, 255, 255, 0.08) !important; }
html[data-theme=light] main [data-wcc-c="up"] { color: #248A3D !important; }
html[data-theme=light] main [data-wcc-c="dn"] { color: #D70015 !important; }
html[data-theme=light] main [data-wcc-c="flat"] { color: #6E6E73 !important; }
html[data-theme=light] main [data-wcc-c="or"] { color: #C93400 !important; }
html[data-theme=light] main [data-wcc-c="t1"] { color: #1D1D1F !important; }
html[data-theme=light] main [data-wcc-t="up"] { color: #248A3D !important; background: rgba(36, 138, 61, 0.1) !important; }
html[data-theme=light] main [data-wcc-t="dn"] { color: #D70015 !important; background: rgba(215, 0, 21, 0.08) !important; }
html[data-theme=light] main [data-wcc-t="flat"] { color: #6E6E73 !important; background: rgba(0, 0, 0, 0.05) !important; }

/* fills in the design's up / down colours (market cap scale, profit bars) */
main [data-wcc-bg="up"] { background: #30D158 !important; }
main [data-wcc-bg="dn"] { background: #FF453A !important; }
main [data-wcc-bg="bl"] { background: #2997FF !important; }
main [data-wcc-bg="or"] { background: #FF9F0A !important; }
main [data-wcc-bg="flat"] { background: #A1A1A6 !important; }
html[data-theme=light] main [data-wcc-bg="up"] { background: #248A3D !important; }
html[data-theme=light] main [data-wcc-bg="dn"] { background: #D70015 !important; }
html[data-theme=light] main [data-wcc-bg="bl"] { background: #0071E3 !important; }
html[data-theme=light] main [data-wcc-bg="or"] { background: #C93400 !important; }
html[data-theme=light] main [data-wcc-bg="flat"] { background: #6E6E73 !important; }

/* charts drawn from live data: several rows in the hover tip, dots of each line, x labels */
.wc-ch-tip .wcc-tr { display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; color: inherit; }
.wc-ch-tip .wcc-tr i { font-style: normal; color: #6E6E73; }
.wc-ch-tip .wcc-tr em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-theme=light] .wc-ch-tip .wcc-tr i { color: #A1A1A6; }
main [data-wcc-hover] { cursor: crosshair; }
@media (max-width: 699px) { main [data-wcc-xl="q"] { display: none !important; } }

/* a field the calculator cannot use: the message in place of its label or result line (calc.js bad()) */
main [data-wcc-bad="1"] { color: #FF453A !important; }
html[data-theme=light] main [data-wcc-bad="1"] { color: #D70015 !important; }
main input[aria-invalid="true"] { text-decoration: underline wavy rgba(255, 69, 58, 0.7); text-decoration-thickness: 1px; text-underline-offset: 6px; }
html[data-theme=light] main input[aria-invalid="true"] { text-decoration-color: rgba(215, 0, 21, 0.6); }
/* the profit / average result while there is none ("—"): neutral, not the design's gain colour */
main [data-wcc-c="none"] { color: #86868B !important; }
html[data-theme=light] main [data-wcc-c="none"] { color: #6E6E73 !important; }
/* a buy row that is not counted (no price or amount, or not a number) */
main [data-wcc-skip="1"] input { opacity: 0.55; }
/* market cap scale: today's dot is near-white in the design — invisible on the light theme */
html[data-theme=light] main [data-wcc-now="1"] { background: #1D1D1F !important; }