/* /skill-tree, loaded after anomalies.css, weapons.css and traders.css, which carry the HUD tokens,
   the title block, the section captions (.h2c), the redaction block (.unk3) and the ad slots. */

/* the branches, as the menu lists them */
.brow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.bt { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); align-items: start; gap: .7rem; padding: .8rem .9rem; border: 1px solid var(--h-line); background: var(--h-tile); color: inherit; text-decoration: none; }
.bt svg { width: 1.6rem; height: 1.6rem; }
.bt b { display: block; font-size: .9375rem; font-weight: 600; }
.bt small { display: block; margin-top: .15rem; font-size: .75rem; color: var(--h-ink3); line-height: 1.4; }
.bt:hover { border-color: var(--mark); }

/* the three official screenshots */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: .9rem; }
.shot { margin: 0; border: 1px solid var(--h-line); background: var(--h-tile); }
.shot img { width: 100%; height: auto; }
.shot figcaption { padding: .7rem .85rem; font-size: .8125rem; line-height: 1.5; color: var(--h-ink3); }
.shot figcaption b { display: block; margin-bottom: .2rem; color: var(--h-ink2); font-weight: 600; }

/* what a node costs */
.costrow { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.nodecard { border: 1px solid var(--h-line-hi); background: var(--h-tile-hi); padding: .9rem 1rem; }
.nodecard h3 { margin: 0 0 .15rem; font-size: 1rem; }
.nodecard h3 span { margin-left: .4rem; font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mark); }
.nodecard p { margin: 0 0 .7rem; font-size: .8125rem; color: var(--h-ink2); }
.nodecard .cost { display: flex; flex-wrap: wrap; gap: .4rem; }
.nodecard .cost span { padding: .3rem .55rem; background: var(--h-bg); font-size: .75rem; color: var(--h-ink3); }
.nodecard .cost b { color: var(--h-ink); }
.nodecard .pts { display: block; margin-top: .7rem; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--h-ink3); }

/* one section per branch */
.bsec { border-top: 1px solid var(--h-line); padding-top: 1.1rem; margin-top: 1.75rem; scroll-margin-top: 4.5rem; }
.bsec .line { margin: 0 0 .9rem; max-width: 70ch; color: var(--h-ink2); }
.nodes { display: flex; flex-wrap: wrap; gap: .35rem; }
.nodes span { padding: .35rem .6rem; border: 1px solid var(--h-line); background: var(--h-tile); font-size: .8125rem; }
.nonode { margin: 0; font-size: .8125rem; color: var(--h-ink3); }
.ourread { margin: 2rem 0 0; padding: .8rem 1rem; border-left: 0; background: var(--h-tile); font-size: .8125rem; line-height: 1.6; color: var(--h-ink3); max-width: 80ch; }

@media (max-width: 64rem) {
  .brow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .costrow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 30rem) { .brow { grid-template-columns: minmax(0, 1fr); } }