/* ArbStrike: the guides (/guides and /guides/...) and the reading half of the calculator page.
   Loaded after og.css and legal.css. A guide is set like the legal pages (black head, the short version on a
   volt ticket, white reading page with numbered sections); this file adds what a guide needs on top:
   the path above the title, worked sums, drawn figures, the 18+ note, the list of guides. Nothing animates. */

/* two more places in the top bar: keep it on one line between 761 and 1040 px (under 900 the "Log in"
   button steps aside; the account page is one tap away in the footer and the bottom bar) */
@media (min-width: 761px) and (max-width: 1040px) { .nav-links { gap: 15px; margin-left: 2px; } .nav-links a { letter-spacing: .1em; } }
@media (min-width: 761px) and (max-width: 900px) { .nav .wrap { gap: 8px 16px; } .nav-links { gap: 12px; margin-left: 0; } .nav-links a { font-size: .7rem; letter-spacing: .08em; } .nav .hide-s { display: none; } }

/* ---- head ---- */
.gd-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 11px; margin-bottom: clamp(14px, 1.8vw, 22px); font: 700 .72rem/1.2 var(--t); letter-spacing: .14em; text-transform: uppercase; color: #949494; }
.gd-crumb a { color: #CFCFCF; text-decoration: none; padding-block: 4px; }
.gd-crumb i { flex: none; width: 5px; height: 13px; background: var(--v); transform: skewX(-14deg); }
@media (hover: hover) { .gd-crumb a:hover { color: var(--v); } }
.lg-title.gd-title { font-size: clamp(3.3rem, 7.9vw, 7.6rem); max-width: 7.6em; }
.lg-head.solo .lg-title.gd-title { max-width: 9em; }
.lg-docs.gd-tabs a { padding-inline: 18px; }

/* ---- sums: one line per step, the result in bold ---- */
.gd-math { display: grid; gap: 5px; padding: 14px 18px 13px; background: #F3F3EF; border-left: 6px solid #000; font-size: 1.02rem; line-height: 1.5; font-weight: 500; font-variant-numeric: tabular-nums; overflow-x: auto; }
.gd-math > * { white-space: nowrap; }
.gd-math b { font-weight: 800; background: var(--v); padding: 0 5px; }
.gd-math i { font-style: normal; color: #555; }
.lg-side .gd-math { background: #fff; }

/* ---- figures ---- */
.gd-fig { margin-block: 28px 30px; padding: 20px 20px 16px; border: 2px solid #000; }
.lg-text section > .gd-fig { margin-top: 28px; }
.gd-fig figcaption { margin-top: 14px; padding-top: 11px; border-top: 1px solid #000; font-size: .9rem; line-height: 1.5; color: #444; }
.gd-fig figcaption b { color: #000; }
.gd-fig svg { width: 100%; height: auto; overflow: visible; }
.gd-fig svg text { font-family: var(--t); font-weight: 700; fill: #000; }
.gd-fig svg .dsp { font-family: var(--d); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 21px; }
.gd-fig svg .ax { font-size: 13px; font-weight: 600; fill: #555; }                  /* sizes are in the drawing's units */

/* the 100% bar: each price's share, a line at 100, tape over what is past it or short of it */
.gd-bars { display: grid; gap: 22px; }
.gd-bar-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; margin-bottom: 7px; font-size: .9rem; line-height: 1.3; font-weight: 700; color: #000; }
.gd-bar-h span { font: italic 900 1.5rem/1 var(--d); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.gd-bar { position: relative; display: flex; height: 48px; margin-right: 12%; }                  /* the bar is 0 to 100; the margin is room past it */
.gd-bar > span { flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 10px 0; overflow: hidden; white-space: nowrap; font: italic 900 1.3rem/1 var(--d); font-variant-numeric: tabular-nums; }
.gd-bar > span b { font-size: 1.6rem; }
.lg-text .gd-bar b { color: inherit; font-weight: 900; }
.gd-bar .a { background: #000; color: var(--v); }
.gd-bar .m { background: #666; color: #fff; }
.gd-bar .b { background: #fff; color: #000; box-shadow: inset 0 0 0 2px #000; }
.gd-bar .gap { flex: 1 0 0; padding: 0; background: repeating-linear-gradient(-60deg, #000 0 4px, var(--v) 4px 8px); box-shadow: inset 0 0 0 2px #000; }
.gd-bar .over { position: absolute; left: 100%; top: 0; bottom: 0; padding: 0; background: repeating-linear-gradient(-60deg, #000 0 4px, #fff 4px 8px); box-shadow: inset 0 0 0 2px #000; }
.gd-bar::after { content: "100%"; position: absolute; left: 100%; top: -8px; bottom: -22px; display: flex; align-items: flex-end; padding-left: 6px; border-left: 3px solid #000; font: 700 .68rem/1 var(--t); letter-spacing: .1em; }
.gd-bars > div { padding-bottom: 20px; }

/* ---- the 18+ note at the foot of a guide ---- */
.gd-rg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: center; margin-top: clamp(44px, 5vw, 66px); padding: 16px 20px 15px 16px; border: 2px solid #000; font-size: .97rem; line-height: 1.55; }
.gd-rg > b { padding: 8px 11px 3px; background: #000; color: var(--v); font: italic 900 2.3rem/1 var(--d); transform: skewX(-9deg); }
.lg-text .gd-rg b { color: var(--v); }

/* ---- the one way on: a sentence and a button ---- */
.gd-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin-top: clamp(40px, 5vw, 60px); padding: 20px 0 0; border-top: 3px solid #000; }
.gd-cta p { flex: 1 1 17rem; margin: 0; font-size: 1rem; line-height: 1.5; }
.lg-side .gd-cta { margin-top: 26px; padding-top: 18px; }

/* ---- more to read: the legal pages' rows (.lg-topics) under a heading ---- */
.gd-next { margin-top: clamp(44px, 5vw, 66px); }
.gd-next h2 { margin-bottom: 14px; }
.lg-text .gd-next .lg-topics a { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr) auto; }

/* ---- /guides: the list ---- */
.gd-index { padding: clamp(34px, 5vw, 70px) 0 clamp(64px, 9vw, 124px); }
.gd-list { border-top: 3px solid #000; counter-reset: gd; }
.gd-list a { position: relative; display: grid; grid-template-columns: clamp(4.6rem, 9vw, 8.4rem) minmax(0, 1.05fr) minmax(0, 1fr) auto; gap: 6px clamp(18px, 3vw, 44px); align-items: center; padding: clamp(18px, 2.3vw, 30px) 8px clamp(15px, 2vw, 26px) 0; border-bottom: 1px solid #000; color: #000; text-decoration: none; counter-increment: gd; }
.gd-list a::before { content: counter(gd, decimal-leading-zero); font: italic 900 clamp(3.4rem, 6.4vw, 6rem)/.8 var(--d); color: transparent; -webkit-text-stroke: 2px #000; letter-spacing: -.01em; }
.gd-list h2 { font: italic 900 clamp(2.1rem, 3.7vw, 3.5rem)/.9 var(--d); text-transform: uppercase; letter-spacing: -.005em; }
.gd-list p { font-size: 1rem; line-height: 1.5; color: #2E2E2E; }
.gd-list p small { display: block; margin-top: 6px; font: 700 .68rem/1.2 var(--t); letter-spacing: .13em; text-transform: uppercase; color: #666; }
.gd-list i { display: block; width: 34px; height: 18px; background: #000; clip-path: polygon(0 36%, 62% 36%, 62% 0, 100% 50%, 62% 100%, 62% 64%, 0 64%); transition: transform .16s var(--out); }
@media (hover: hover) {
  .gd-list a:hover { background: var(--v); }
  .gd-list a:hover::before { color: #000; }
  .gd-list a:hover i { transform: translateX(7px); }
}
.gd-list a:focus-visible { outline-offset: -3px; }

/* the calculator, on the list page: a black slab with a volt end cut on the lean */
.gd-tool { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; margin-top: clamp(40px, 6vw, 80px); background: #000; color: #fff; overflow: hidden; }
.gd-tool-in { display: grid; gap: 14px; justify-items: start; padding: clamp(24px, 3.4vw, 46px) clamp(20px, 3.4vw, 48px); }
.gd-tool h2 { font: italic 900 clamp(2.5rem, 5vw, 4.6rem)/.86 var(--d); text-transform: uppercase; }
.gd-tool p { max-width: 34rem; color: #D2D2D2; }
.gd-tool .btn { margin-top: 6px; background: var(--v); color: #000; }
.paper .gd-tool .btn:hover { background: #fff; }
.gd-tool-fig { display: grid; align-content: center; justify-items: end; gap: 2px; min-width: clamp(13rem, 26vw, 24rem); padding: 20px clamp(20px, 3vw, 44px) 16px clamp(56px, 7vw, 100px); background: var(--v); color: #000; clip-path: polygon(clamp(40px, 6vw, 84px) 0, 100% 0, 100% 100%, 0 100%); }
.gd-tool-fig b { font: italic 900 clamp(4rem, 9vw, 8.4rem)/.78 var(--d); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gd-tool-fig span { font: 700 .72rem/1.3 var(--t); letter-spacing: .13em; text-transform: uppercase; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 1040px) {
  .gd-list a { grid-template-columns: clamp(4.2rem, 11vw, 6rem) minmax(0, 1fr) auto; }
  .gd-list p { grid-column: 2; }
  .gd-list i { grid-column: 3; grid-row: 1 / 3; }
}
@media (max-width: 760px) {
  .lg-title.gd-title { font-size: clamp(3.1rem, 15vw, 4.3rem); max-width: none; }
  .lg-docs.gd-tabs a { padding-inline: 4px; font-size: 1.14rem; }
  .gd-math { padding: 12px 13px 11px; font-size: .95rem; }
  .gd-math > * { white-space: normal; }
  .gd-fig svg .ax { font-size: 19px; }
  .gd-fig svg .dsp { font-size: 27px; }
  .gd-fig svg .ax-u { display: none; }
  .gd-fig { padding: 15px 13px 13px; margin-inline: -4px; }
  .gd-bar { height: 44px; }
  .gd-bar > span { padding-inline: 7px; gap: 5px; font-size: 1.05rem; }
  .gd-bar > span b { font-size: 1.3rem; }
  .gd-rg { grid-template-columns: minmax(0, 1fr); padding: 14px 15px 14px; }
  .gd-rg > b { justify-self: start; font-size: 1.9rem; margin-bottom: 6px; }
  .gd-cta .btn { width: 100%; }
  .lg-text .gd-next .lg-topics a { grid-template-columns: minmax(0, 1fr) auto; }
  .gd-list a { grid-template-columns: 3.3rem minmax(0, 1fr); gap: 6px 14px; align-items: start; padding-right: 0; }
  .gd-list a::before { font-size: 2.9rem; -webkit-text-stroke-width: 1.5px; padding-top: 2px; }
  .gd-list h2 { font-size: 2.15rem; }
  .gd-list i { display: none; }
  .gd-tool { grid-template-columns: minmax(0, 1fr); }
  .gd-tool-fig { order: -1; justify-items: start; min-width: 0; padding: 16px 20px 12px; clip-path: polygon(0 0, 100% 0, calc(100% - 46px) 100%, 0 100%); }
  .gd-tool-fig span { text-align: left; }
  .gd-tool .btn { width: 100%; }
}
@media print {
  .gd-crumb, .gd-cta, .gd-next, .gd-tool { display: none !important; }
}
/* on a two-column page (the calculator) the 18+ note runs under both columns */
.lg-body.duo .lg-text > .gd-rg { grid-column: 1 / -1; }
.gd-index .gd-rg { max-width: 62rem; }
.gd-index .gd-rg a { color: #000; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (hover: hover) { .gd-index .gd-rg a:hover { background: var(--v); } }

/* prices -> shares -> stakes: three cells, each handing on to the next */
.gd-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 22px; border: 2px solid #000; }
.gd-flow > div { position: relative; display: grid; gap: 2px; padding: 13px 16px 11px 26px; }
.gd-flow > div + div { border-left: 2px solid #000; }
.gd-flow > div + div::before { content: ""; position: absolute; left: -12px; top: 50%; width: 22px; height: 26px; margin-top: -13px; background: #000; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.gd-flow > div:first-child { padding-left: 16px; }
.gd-flow > div:last-child { background: var(--v); }
.gd-flow span { margin-bottom: 5px; font: 700 .68rem/1.2 var(--t); letter-spacing: .13em; text-transform: uppercase; color: #333; }
.gd-flow b { font: italic 900 clamp(1.7rem, 3.2vw, 2.3rem)/.95 var(--d); font-variant-numeric: tabular-nums; }
.lg-text .gd-flow b { font-weight: 900; }

/* the key under a drawn chart */
.gd-key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; font-size: .86rem; line-height: 1.4; color: #2E2E2E; }
.lg-text ul.gd-key { display: flex; }
.lg-text ul.gd-key > li { display: flex; align-items: center; gap: 9px; padding-left: 0; }
.lg-text ul.gd-key > li::before { content: none; }
.gd-key i { flex: none; width: 30px; height: 0; border-top: 2px solid #000; }
.gd-key .k-e { border-top: 2px dashed #777; }
.gd-key .k-a { height: 9px; border: 0; background: linear-gradient(#000, #000) 0 50% / 100% 2px no-repeat, var(--v); }
@media (max-width: 760px) {
  .gd-flow > div { padding: 11px 8px 9px 19px; }
  .gd-flow > div:first-child { padding-left: 10px; }
  .gd-flow span { font-size: .6rem; letter-spacing: .08em; }
  .gd-flow b { font-size: 1.55rem; }
}