/* ================================================== THE TECH ATLAS ====
   A depth chart for the whole industry. Navy ground, silver line work. Every
   visual element encodes something: tier is the column, status is the badge,
   and the lines are the relationships. */

:root{
  --a-line:rgba(226,233,243,.22);
  --a-card:#37445D;
  --a-card-open:#3F4D68;
  --a-ally:#8FD0B0;
  --a-rival:#EE8B7C;
  --a-own:#8DB4F2;
  --a-dep:#93B6DB;
  --a-prem:#0EA1F1;
}

/* OVR tiers, from docs/ratings-rubric.md. Brighter means higher. */
[data-tier="Generational"]{ --tier:#F2D98D; }
[data-tier="Superstar"]{ --tier:#D4B6FF; }
[data-tier="All-Star"]{ --tier:#94CFF7; }
[data-tier="Starter"]{ --tier:#E2E9F3; }
[data-tier="Rotation"]{ --tier:#C3CBD8; }
[data-tier="Role player"]{ --tier:#C6B79D; }
[data-tier="Bench"]{ --tier:#A6AFBE; }
[data-tier="Prospect"]{ --tier:#9099AB; }
[data-tier="Unrated"]{ --tier:rgba(226,233,243,.5); }

.atlas-wide{ max-width:1420px; margin-inline:auto; padding-inline:clamp(16px,3.2vw,48px); position:relative; z-index:1; }

/* header and introduction */
.atlas-head{ padding:clamp(86px,11vw,150px) 0 clamp(10px,2vw,24px); text-align:left; }
.atlas-head__k{ font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--silver-faint); margin-bottom:18px; }
.atlas-head__t{ font-size:clamp(44px,2.2rem + 4vw,104px); font-weight:400; line-height:1; letter-spacing:.01em; margin-bottom:22px; }
.atlas-head__by{ margin-top:16px; font-size:15px; letter-spacing:.14em; color:var(--silver-faint); }
.atlas-head__l{ max-width:46ch; font-size:clamp(17px,1.6vw,22px); line-height:1.5; font-style:italic; color:var(--silver-dim); }
.atlas-intro{ max-width:64ch; margin:clamp(26px,4vw,46px) 0 0; }
.atlas-intro p{ font-size:clamp(16.5px,1.45vw,19px); line-height:1.68; color:var(--silver-dim); }
.atlas-intro p + p{ margin-top:1em; }

/* the control bar */
.atlas-bar{
  position:sticky; top:0; z-index:20; margin-top:clamp(26px,3.5vw,44px);
  background:rgba(48,61,82,.96); backdrop-filter:blur(6px);
  border-top:1px solid var(--a-line); border-bottom:1px solid var(--a-line);
  padding:10px 0;
}
.atlas-bar__in{ display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; }
.atlas-search{
  flex:0 1 220px; background:transparent; color:var(--silver);
  border:1px solid var(--a-line); padding:7px 12px; font:inherit; font-size:15px;
}
.atlas-search::placeholder{ color:var(--silver-faint); }
/* Map or List, and the List's sort. Both need scripts, so they stay hidden without them. */
.view,.sort{ display:none; }
body.js .view{ display:inline-flex; }
body.js:not(.view-map) .sort{ display:inline-flex; align-items:center; }
.view__b,.sort__b{
  font:inherit; font-size:15px; padding:5px 14px; color:var(--silver-dim); background:transparent;
  border:1px solid var(--a-line); cursor:pointer; transition:color .2s ease, background .2s ease, border-color .2s ease;
}
.view__b + .view__b,.sort__b + .sort__b{ border-left:0; }
.view__b:hover,.sort__b:hover{ color:var(--silver); }
.view__b[aria-pressed="true"],.sort__b[aria-pressed="true"]{ color:var(--navy); background:var(--silver); border-color:var(--silver); }
.view__b:focus-visible,.sort__b:focus-visible,.chip:focus-visible{ outline:2px solid var(--silver); outline-offset:2px; }
.sort__k{ font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--silver-faint); margin-right:10px; }
body.view-map #atlas-list{ display:none; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; flex:1 1 100%; }
.chip{
  font:inherit; font-size:13.5px; padding:3px 10px; color:var(--silver-dim);
  background:transparent; border:1px solid var(--a-line); cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.chip:hover{ color:var(--silver); border-color:var(--silver-faint); }
.chip[aria-pressed="true"]{ color:var(--navy); background:var(--silver); border-color:var(--silver); }
.toggles{ display:flex; flex-wrap:wrap; gap:6px 20px; font-size:14.5px; color:var(--silver); }
.toggles label{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.toggles input{ accent-color:var(--silver); }
.key{ display:inline-block; width:26px; height:0; border-top:3px solid var(--a-ally); vertical-align:middle; }
.key--rivals{ border-top:3px dashed var(--a-rival); }
.key--backers{ border-top:3px solid var(--a-own); }

/* overview: nine tiles, three rows */
.overview{ margin-top:clamp(26px,4vw,46px); position:relative; }
.band{ margin-bottom:clamp(12px,1.6vw,20px); }
.band__label{ font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--silver-faint); margin-bottom:8px; }
.band__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,18px); }
.tile{
  display:block; padding:14px 18px 15px; border:1px solid var(--a-line); background:var(--navy-deep);
  color:inherit; transition:border-color .25s ease, background .25s ease;
}
.tile:hover,.tile.is-on{ border-color:var(--silver-faint); background:var(--navy-lift); }
.tile.is-on{ border-color:var(--silver); }
.tile__n{ display:block; font-size:clamp(19px,1.1rem + .5vw,24px); line-height:1.15; margin-bottom:4px; }
.tile__b{ display:block; font-size:14.5px; line-height:1.4; color:var(--silver-dim); }

/* sector sections */
.sector{ padding-top:clamp(46px,6vw,86px); scroll-margin-top:70px; }
.sector__k{ font-size:11.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--silver-faint); margin-bottom:8px; }
.sector__h{ font-size:clamp(32px,1.6rem + 2.2vw,60px); font-weight:400; line-height:1.05; margin-bottom:10px; }
.sector__b{ max-width:58ch; font-size:clamp(16px,1.4vw,19px); line-height:1.5; font-style:italic; color:var(--silver-dim); margin-bottom:26px; }

.board{ position:relative; }
.board svg.lines{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:visible; }
.cols{ display:grid; grid-template-columns:150px repeat(3,1fr); gap:0 clamp(10px,1.4vw,18px); margin-bottom:6px; }
.cols span{ font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--silver-faint); padding:0 2px 8px; border-bottom:1px solid var(--a-line); }
.pos{ display:grid; grid-template-columns:150px repeat(3,1fr); gap:0 clamp(10px,1.4vw,18px); padding:16px 0 18px; border-bottom:1px solid var(--a-line); }
.pos__h{ padding-right:12px; }
.pos__n{ font-size:19px; line-height:1.2; margin-bottom:8px; }
.tier{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.tier__empty{ font-size:13px; font-style:italic; color:var(--silver-faint); padding:8px 2px; }

/* a player card is a native disclosure, so it works without scripts. Cards are
   opaque so that the lines, which sit behind them, only show in the gaps. */
.card{ border:1px solid var(--a-line); background:var(--a-card); position:relative; z-index:1; transition:background .2s ease, border-color .2s ease, opacity .2s ease; }
.card--starter{ border-left:3px solid var(--silver); }
.card--second{ border-left:3px solid var(--silver-faint); }
.card--rookie{ border-style:dashed; }
.card[open]{ background:var(--a-card-open); border-color:var(--silver-faint); }
.card summary{ list-style:none; cursor:pointer; padding:10px 12px 11px; }
.card summary::-webkit-details-marker{ display:none; }
.card__top{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 8px; }
.card__name{ font-size:18px; line-height:1.15; font-weight:500; flex:1; min-width:0; }
.ovr{
  flex:none; align-self:center; display:inline-flex; align-items:baseline; gap:4px; padding:2px 5px 1px; margin-right:2px;
  font-size:15px; font-weight:600; line-height:1.1; color:var(--tier); border:1px solid var(--tier);
}
.ovr--draft{ border-style:dashed; }
.ovr--draft::after{ content:"draft"; font-size:9px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; }
.card__where{ display:none; margin-top:3px; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--silver-faint); }

/* sorted by OVR: the sector's cards become one ranked grid */
.sort-ovr .board{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:10px; align-items:start; }
.sort-ovr .pos,.sort-ovr .tier{ display:contents; }
.sort-ovr .pos__h,.sort-ovr .cols,.sort-ovr .tier::before{ display:none; }
.sort-ovr .card__where{ display:block; }
.badge{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--silver-dim); border:1px solid var(--a-line); padding:1px 6px; white-space:nowrap; }
.badge--leading{ color:var(--navy); background:var(--silver); border-color:var(--silver); }
.badge--rising{ border-style:dashed; }
.badge--premise{ color:var(--a-prem); border-color:var(--a-prem); }
.card__stat{ font-size:14px; line-height:1.4; color:var(--silver-dim); margin-top:5px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card[open] .card__stat{ display:block; -webkit-line-clamp:unset; }
.conf--reported{ color:#E2C79A; }
.conf--inferred{ color:var(--a-rival); }
.conf{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; }
.card__more{ padding:2px 12px 12px; font-size:14.5px; line-height:1.5; color:var(--silver-dim); border-top:1px solid var(--a-line); }
.card__more p{ margin-top:8px; }
.card__more b{ display:block; font-weight:400; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--silver-faint); margin-bottom:1px; }
.card__more a{ color:var(--silver); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.16em; }
.card__src{ font-size:13px; }
.also{ font-size:13px; color:var(--silver-faint); }

/* the three kinds of relationship */
.rel{ margin-top:12px; padding-top:8px; border-top:3px solid var(--a-ally); }
.rel--rivals{ border-top:3px dashed var(--a-rival); }
.rel--backers{ border-top:3px solid var(--a-own); }
.rel__h{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--silver); margin:0 0 2px !important; }
.rel ul{ list-style:none; margin:0; padding:0; }
.rel li{ padding:6px 0; border-top:1px solid rgba(226,233,243,.08); font-size:15px; color:var(--silver); }
.rel li:first-child{ border-top:0; }
.conn__v,.conn__s{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--silver-faint); }
.conn__x{ font-size:13.5px; line-height:1.45; color:var(--silver-dim); }

/* what the selection marks on the other cards */
.card.is-dim{ opacity:.32; }
.card[data-rel]{ opacity:1; border-width:2px; }
.card[data-rel="allies"]{ border-color:var(--a-ally); }
.card[data-rel="rivals"]{ border-color:var(--a-rival); border-style:dashed; }
.card[data-rel="backers"]{ border-color:var(--a-own); }
.card[data-rel]::before{ content:attr(data-tag); position:absolute; right:8px; bottom:6px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
.card[data-rel="allies"]::before{ color:var(--a-ally); }
.card[data-rel="rivals"]::before{ color:var(--a-rival); }
.card[data-rel="backers"]::before{ color:var(--a-own); }
.card.flash{ animation:flash 1.6s ease; }
@keyframes flash{ 0%,60%{ box-shadow:0 0 0 3px rgba(14,161,241,.55); } 100%{ box-shadow:0 0 0 0 rgba(14,161,241,0); } }

/* the written piece under each chart, folded away until asked for */
.note{ max-width:64ch; margin-top:clamp(20px,3vw,34px); }
.note summary{ cursor:pointer; font-size:15px; letter-spacing:.08em; color:var(--silver-dim); }
.note summary:hover{ color:var(--silver); }
.note p{ font-size:clamp(16.5px,1.45vw,19px); line-height:1.68; color:var(--silver-dim); margin-top:1em; }
.note a{ color:var(--silver); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.16em; }

/* method and log */
.atlas-foot{ margin-top:clamp(40px,6vw,80px); padding-bottom:clamp(40px,6vw,80px); max-width:78ch; }
.atlas-foot p,.atlas-foot li{ font-size:15.5px; line-height:1.6; color:var(--silver-dim); }
.atlas-foot p + p{ margin-top:.9em; }
.atlas-foot details{ margin-top:12px; border-top:1px solid var(--a-line); padding-top:10px; }
.atlas-foot summary{ cursor:pointer; font-size:16px; color:var(--silver); }
.atlas-foot ul{ margin:8px 0 0; padding-left:1.2em; }
.atlas-foot li{ margin-bottom:.4em; }
.atlas-foot a{ color:var(--silver); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.16em; }

/* with scripts, one sector is shown at a time */
body.js .sector{ display:none; }
body.js .sector.is-on{ display:block; }
body.hide-allies .rel--allies,body.hide-rivals .rel--rivals,body.hide-backers .rel--backers{ display:none; }

/* phones: tiers stack under each position */
@media (max-width:900px){
  .band__row{ grid-template-columns:1fr; }
  .cols{ display:none; }
  .pos{ grid-template-columns:1fr; gap:10px 0; }
  .pos__h{ padding-right:0; }
  .tier::before{ content:attr(data-tier); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--silver-faint); margin-top:6px; }
  .tier:empty,.tier--empty{ display:none; }
  .atlas-bar{ position:static; }
}

/* print: everything open, no controls */
@media print{
  body{ background:#fff; color:#111; }
  .atlas-bar,.back{ display:none; }
  body.js .sector{ display:block; }
  .card,.tile{ border-color:#999; background:none; color:#111; break-inside:avoid; }
  .note:not([open]) > *:not(summary){ display:block; }
  .card__stat,.tile__b,.note p,.atlas-intro p,.pos__m,.card__more{ color:#333; }
  .card .card__more{ display:block; }
}

/* link from a List card to the company's stats page */
.card__page a{ font-weight:600; }