/* Tour Dash — the map of doors and funnels.
   Built on brand.css tokens. The moving ground behind the page is a GetLayers gradient
   (Gnomon) tinted to the paper/void tokens through its CONFIG. Amber stays reserved:
   it marks the step badge and nothing else. Access levels are text chips, not colours. */

#gl {
  position: fixed; inset: 0; z-index: 0; width: 100vw; height: 100vh;
  display: block; opacity: 0; transition: opacity 1.1s ease; pointer-events: none;
}
.topbar, .wrap, footer { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { #gl { display: none; } }

/* ---------- hero: headline left, host quad right ---------- */
.hero.map-hero {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px;
  align-items: end; padding: 40px 0 44px;
}
.hero.map-hero .lede { max-width: 52ch; }
.host-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.host-quad a {
  display: block; text-decoration: none;
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 4px);
  background: hsl(var(--card)); padding: 14px 15px; min-width: 0;
  transition: transform .18s ease, border-color .18s ease;
}
.host-quad a:hover { transform: translateY(-2px); border-color: hsl(var(--muted-foreground)); }
.host-quad .hq-n { font-size: 26px; font-weight: 510; letter-spacing: -0.02em; line-height: 1; }
.host-quad .hq-l { font-size: 12.5px; color: hsl(var(--muted-foreground)); margin-top: 7px; line-height: 1.4; }
@media (max-width: 820px) {
  .hero.map-hero { grid-template-columns: 1fr; gap: 26px; align-items: start; }
}

/* ---------- shared: path chip and access chip ---------- */
.path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  color: hsl(var(--foreground)); background: hsl(var(--secondary));
  border-radius: 6px; padding: 2px 7px; white-space: nowrap;
}
.host { color: hsl(var(--muted-foreground)); }
.acc {
  display: inline-block; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 510;
  color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); border-radius: 999px; padding: 2px 8px;
  white-space: nowrap;
}
.acc.agent { border-style: dashed; }
.acc.admin { border-color: hsl(var(--foreground)); color: hsl(var(--foreground)); }

/* ---------- hosts ---------- */
.hosts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.hostcard {
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  background: hsl(var(--card)); padding: 18px 19px; min-width: 0;
}
.hostcard .hc-d { font-size: 17px; font-weight: 510; letter-spacing: -0.01em; word-break: break-all; }
.hostcard .hc-d a { text-decoration: none; }
.hostcard .hc-d a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hostcard .hc-r { font-size: 12.5px; color: hsl(var(--muted-foreground)); margin-top: 3px; }
.hostcard .hc-s { font-size: 14px; line-height: 1.55; color: hsl(var(--muted-foreground)); margin-top: 12px; }
.hostcard .hc-s b { color: hsl(var(--foreground)); font-weight: 510; }

/* ---------- funnels: horizontal rails ---------- */
.funnel { margin: 0 0 34px; }
.funnel:last-child { margin-bottom: 0; }
.funnel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-bottom: 14px; }
.funnel-head h3 { font-size: 18px; font-weight: 510; letter-spacing: -0.01em; margin: 0; }
.funnel-head .who { font-size: 13.5px; color: hsl(var(--muted-foreground)); }
.funnel-head .rep { font-size: 13px; color: hsl(var(--muted-foreground)); margin-left: auto; }
.funnel-head .rep a { text-decoration: underline; text-underline-offset: 3px; }
.rail-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 2px 10px; }
.rail { display: flex; align-items: stretch; gap: 0; min-width: max-content; }
.step {
  position: relative; display: block; width: 214px; flex-shrink: 0; text-decoration: none;
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 4px);
  background: hsl(var(--card)); padding: 14px 15px 15px;
  transition: transform .18s ease, border-color .18s ease;
}
.step:hover { transform: translateY(-2px); border-color: hsl(var(--muted-foreground)); }
.step .sn {
  position: absolute; top: -10px; left: 12px; width: 22px; height: 22px; border-radius: 7px;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 590;
}
.step .sp { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.step .st { font-size: 14.5px; font-weight: 510; line-height: 1.35; margin-top: 9px; letter-spacing: -0.005em; }
.step .ss { font-size: 12.5px; line-height: 1.5; color: hsl(var(--muted-foreground)); margin-top: 5px; }
.step.end { border-style: dashed; background: transparent; }
.step.end .st { color: hsl(var(--muted-foreground)); }
.step.end .sn { background: hsl(var(--secondary)); color: hsl(var(--muted-foreground)); }
.step.hop { background: hsl(var(--secondary)); }
.link {
  width: 34px; flex-shrink: 0; position: relative; align-self: stretch;
}
.link::before {
  content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 1px; background: hsl(var(--muted-foreground));
}
.link::after {
  content: ""; position: absolute; right: 1px; top: 30.5px; width: 0; height: 0;
  border-left: 6px solid hsl(var(--muted-foreground)); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.link.dash::before { background: repeating-linear-gradient(to right, hsl(var(--muted-foreground)) 0 4px, transparent 4px 8px); }
.link .lt {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: hsl(var(--muted-foreground)); white-space: nowrap;
}

/* ---------- redirects ---------- */
.hops { display: grid; gap: 8px; }
.hop-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; align-items: center;
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 5px); background: hsl(var(--card)); padding: 11px 14px;
}
.hop-row .arr { text-align: center; color: hsl(var(--muted-foreground)); }
.hop-row .why { font-size: 13.5px; line-height: 1.5; color: hsl(var(--muted-foreground)); }
.hop-row .path { white-space: normal; word-break: break-all; }
@media (max-width: 720px) {
  .hop-row { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); }
  .hop-row .why { grid-column: 1 / -1; }
}

/* ---------- URL index ---------- */
.url-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.urls { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; }
table.urls th {
  text-align: left; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 510;
  color: hsl(var(--muted-foreground)); padding: 0 10px 10px 0; border-bottom: 1px solid hsl(var(--border));
}
table.urls td { padding: 10px 10px 10px 0; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; line-height: 1.45; }
table.urls tr:last-child td { border-bottom: none; }
table.urls td.w { color: hsl(var(--muted-foreground)); }
table.urls td.go { white-space: nowrap; }
table.urls td.go a { text-decoration: underline; text-underline-offset: 3px; margin-right: 10px; }
table.urls td.go a:last-child { margin-right: 0; }
table.urls .grp td { padding-top: 22px; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: hsl(var(--muted-foreground)); font-weight: 510; border-bottom: none; }