/* The trade and vault pages: plain pages that borrow the template's stylesheet (type scale, buttons,
   header and footer) and add their own grid, controls and lists. Loaded after hl.css. */
.hl-page { padding-top: 7rem; min-height: 70vh; }
.hl-page .container { max-width: 144rem; }
.hl-head { display: grid; gap: 2rem; align-items: end; margin-bottom: 4rem; }
@media (min-width: 1024px) { .hl-head { grid-template-columns: 1fr 1fr; } }
.hl-head .h1 { margin: 0; }
.hl-lede { max-width: 44rem; opacity: .75; }
.hl-line { position: relative; border-top: 1px solid var(--hl-line); }
.hl-mono, .hl-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hl-label { font-family: var(--font-mono); font-size: 1.2rem; text-transform: uppercase; letter-spacing: .02em; opacity: .55; }
.hl-up { color: #0f6e5c; }
.hl-down { color: #b3261e; }

/* the numbered steps, after the home page's accordion */
.hl-step { position: relative; padding: 2rem 0 3rem; border-top: 1px solid var(--hl-line); }
.hl-step__head { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 1.6rem; }
.hl-step__head .h2 { margin: 0; line-height: 1.05; }
.hl-step__head .title-counter { margin-top: .25em; }
.hl-step__note { font-size: 1.4rem; opacity: .7; max-width: 40rem; margin: -.6rem 0 1.6rem; }

/* controls */
.hl-input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--hl-line); padding: 1.2rem 0; font-family: var(--font-mono); font-size: 1.8rem; color: var(--hl-ink); border-radius: 0; outline: none; }
.hl-input:focus { border-bottom-color: var(--hl-teal); }
.hl-input::placeholder { color: rgba(17, 17, 17, .4); font-family: var(--font-primary); }
.hl-field { position: relative; }
.hl-field > .hl-unit { position: absolute; right: 0; bottom: 1.3rem; font-family: var(--font-mono); font-size: 1.4rem; opacity: .6; }
.hl-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.hl-chips button, .hl-tabs button, .hl-sides button { font-family: var(--font-mono); font-size: 1.3rem; padding: .7rem 1.1rem; border-radius: .4rem; background: var(--hl-teal-10); color: var(--hl-ink); border: 1px solid transparent; cursor: pointer; }
.hl-chips button.on, .hl-tabs button[aria-selected="true"] { background: var(--hl-teal); color: var(--hl-bg); }
.hl-tabs { display: flex; gap: .6rem; margin: 1.2rem 0; }
.hl-sides { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1.6rem; }
.hl-sides button { font-family: var(--font-primary); font-size: 1.6rem; padding: 1.1rem; }
.hl-sides button[aria-selected="true"][data-side="long"] { background: var(--hl-teal); color: var(--hl-bg); }
.hl-sides button[aria-selected="true"][data-side="short"] { background: var(--hl-ink); color: var(--hl-bg); }
.hl-range { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.6rem; margin-top: 2rem; }
.hl-range output { font-family: var(--font-mono); font-size: 2.2rem; min-width: 5rem; text-align: right; }
input[type="range"].hl-slider { -webkit-appearance: none; appearance: none; width: 100%; height: .2rem; background: linear-gradient(to right, var(--hl-teal) var(--fill, 0%), var(--hl-line) var(--fill, 0%)); border-radius: 0; outline: none; }
input[type="range"].hl-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--hl-teal); border: .3rem solid var(--hl-bg); box-shadow: 0 0 0 1px var(--hl-teal); cursor: pointer; }
input[type="range"].hl-slider::-moz-range-thumb { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--hl-teal); border: .3rem solid var(--hl-bg); cursor: pointer; }
.hl-ticks { display: flex; justify-content: space-between; margin-top: .6rem; }
.hl-ticks button { background: none; border: 0; font-family: var(--font-mono); font-size: 1.2rem; opacity: .6; cursor: pointer; padding: .2rem 0; color: inherit; }
.hl-ticks button:hover { opacity: 1; }

/* rows of figures */
.hl-rows { display: grid; gap: 0; margin-bottom: 2rem; }
.hl-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; padding: 1rem 0; border-bottom: 1px solid var(--hl-line); font-size: 1.5rem; }
.hl-rows > div > span:last-child { font-family: var(--font-mono); text-align: right; }
.hl-go { width: 100%; justify-content: center; }
.hl-go .btn__text { justify-content: center; padding: 1.4rem 1.6rem; font-size: 1.6rem; }
.hl-go:disabled { opacity: .5; cursor: default; }
.hl-term { font-family: var(--font-mono); font-size: 1.3rem; margin-top: 1.4rem; display: grid; gap: .3rem; min-height: 4rem; }
.hl-term .cmd::before { content: "$ "; opacity: .5; }
.hl-term .wait { opacity: .55; }
.hl-term .ok { color: var(--hl-teal); }
.hl-term .bad { color: #b3261e; }
.hl-term .step { opacity: .8; }

/* lists and tables */
.hl-list { display: grid; }
.hl-list button.row { display: grid; grid-template-columns: 2.4rem 1fr auto auto; gap: 1.2rem; align-items: center; width: 100%; text-align: left; padding: .9rem 0; background: none; border: 0; border-bottom: 1px solid var(--hl-line); cursor: pointer; color: inherit; font: inherit; }
.hl-list button.row[aria-current="true"] { background: var(--hl-teal-10); padding-left: .8rem; padding-right: .8rem; }
.hl-list .row img, .hl-list .row i { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--hl-teal-10); display: block; object-fit: cover; }
.hl-list .row b { font-weight: 500; display: block; }
.hl-list .row small { display: block; opacity: .6; font-size: 1.2rem; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-list .row .num { font-family: var(--font-mono); font-size: 1.3rem; text-align: right; }
.hl-list .empty, .hl-empty-note { font-size: 1.4rem; opacity: .6; padding: 1.2rem 0; }
.hl-results { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--hl-bg); border: 1px solid var(--hl-line); border-radius: .5rem; max-height: 32rem; overflow: auto; }
.hl-results button.row { padding: .9rem 1.2rem; }
.hl-results p { padding: 1.2rem; margin: 0; font-size: 1.4rem; opacity: .7; }
.hl-table { display: grid; }
.hl-table > div { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr auto; gap: 1.2rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--hl-line); font-size: 1.4rem; }
.hl-table > div > span:not(:first-child) { font-family: var(--font-mono); }
.hl-table > div.h { font-family: var(--font-mono); font-size: 1.2rem; text-transform: uppercase; opacity: .55; }
.hl-table .link { background: none; border: 0; color: var(--hl-teal); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 767px) { .hl-table > div { grid-template-columns: 1.4fr 1fr 1fr auto; } .hl-table > div > span:nth-child(3), .hl-table > div > span:nth-child(4) { display: none; } }

/* the drawer on phones (the template's menu, driven by ui.js here) */
.hl-page ~ footer { margin-top: 8rem; }