/* AS1 infrastructure map — page-scoped styles for /platforms/abyshire-one.
   Every class is prefixed as1-; tokens the shared sheet lacks are defined on
   .as1-embed so nothing leaks site-wide. Colours and fonts come from the
   shared :root tokens in styles.css. */

.as1-embed {
  --as1-panel: var(--surface);
  --as1-teal-line: var(--line-strong);
  --as1-amber-line: rgba(243, 198, 111, 0.26);
  --as1-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.as1-intro {
  margin-bottom: 34px;
}

/* ---------- Radial map ---------- */
.as1-map-frame {
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.as1-map {
  position: relative;
  width: 760px;
  height: 540px;
  flex: 0 0 auto;
}
.as1-map svg.as1-radial {
  position: absolute;
  inset: 0;
}

.as1-ring-label {
  position: absolute;
  right: 0;
  top: 8px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.as1-ring-label .rl-accent {
  color: var(--teal);
}

/* Brain interior */
.as1-core {
  position: absolute;
  left: 380px;
  top: 270px;
  transform: translate(-50%, -50%);
  width: 260px;
  text-align: center;
}
.as1-core .core-eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--faint);
  margin-bottom: 5px;
}
.as1-core h3 {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 6px;
}
.as1-core .core-line {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 auto 7px;
  max-width: 214px;
}
.as1-core .rule {
  width: 34px;
  height: 1px;
  background: var(--as1-teal-line);
  margin: 0 auto 8px;
}
.as1-core .faculty {
  margin-bottom: 7px;
}
.as1-core .faculty:last-child {
  margin-bottom: 0;
}
.as1-core .faculty .f-name {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--teal);
}
.as1-core .faculty .f-sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.03em;
  color: var(--faint);
  margin: 2px auto 0;
  max-width: 230px;
  line-height: 1.5;
}
.as1-core .faculty .f-sub2 {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
}

/* Module cards (universal layer) */
.as1-module {
  position: absolute;
  width: max-content;
  transform: translate(-50%, -50%);
  background: #071412;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px 7px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.25s var(--as1-ease), border-color 0.25s var(--as1-ease);
}
.as1-module .m-name {
  font-weight: 500;
  font-size: 12px;
  line-height: 1.25;
  color: var(--ink);
  white-space: nowrap;
}
.as1-module .m-name::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}
.as1-module .m-sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 3px;
  white-space: nowrap;
}
.as1-module.proven .m-name::before {
  background: var(--teal);
}
.as1-module.delivery .m-name::before {
  background: var(--amber);
}
.as1-module.available .m-name::before {
  background: transparent;
  border: 1px solid var(--faint);
  width: 5px;
  height: 5px;
}
.as1-module:hover,
.as1-module:focus-visible,
.as1-module.is-active {
  transform: translate(-50%, calc(-50% - 3px));
  border-color: var(--as1-teal-line);
}
.as1-module:focus-visible,
.as1-pack:focus-visible {
  outline: 1px solid var(--teal);
  outline-offset: 2px;
}

/* Legend + caption */
.as1-legend {
  width: max-content;
  max-width: 100%;
  margin: 18px auto 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  color: var(--faint);
  line-height: 2.1;
  text-transform: uppercase;
}
.as1-legend .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 0;
}
.as1-legend .dot.teal {
  background: var(--teal);
}
.as1-legend .dot.amber {
  background: var(--amber);
}
.as1-legend .dot.ghost {
  background: transparent;
  border: 1px solid var(--faint);
  width: 5px;
  height: 5px;
  margin-right: 9px;
}
.as1-legend .l-word {
  color: var(--muted);
}
.as1-caption {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  min-height: 17px;
  margin-top: 12px;
}

/* Tooltip (appended to body by abyshire-one.js) */
.as1-tip {
  position: fixed;
  z-index: 10;
  max-width: 300px;
  background: #071412;
  border: 1px solid rgba(62, 230, 214, 0.28);
  border-radius: 8px;
  padding: 10px 13px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.as1-tip.on {
  opacity: 1;
}

/* ---------- Sector layer ---------- */
.as1-sector-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 8px;
}
.as1-pack {
  background: rgba(7, 20, 18, 0.92);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 6px 7px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.25s var(--as1-ease), border-color 0.25s var(--as1-ease);
}
.as1-pack .p-name {
  font-weight: 500;
  font-size: 11px;
  line-height: 1.25;
  color: var(--ink);
}
.as1-pack .p-name::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
  background: transparent;
  border: 1px solid var(--faint);
}
.as1-pack .p-sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 3px;
  line-height: 1.5;
}
.as1-pack.proven .p-name::before {
  background: var(--teal);
  border: none;
  width: 7px;
  height: 7px;
}
.as1-pack:hover,
.as1-pack:focus-visible,
.as1-pack.is-active {
  transform: translateY(-3px);
  border-color: var(--as1-teal-line);
}

/* Recipe chips */
.as1-recipes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}
.as1-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 11px 4px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
.as1-chip b {
  font-weight: 500;
  color: var(--muted);
}
.as1-chip-core {
  border-color: var(--as1-teal-line);
}
.as1-chip-core b {
  color: var(--teal);
}

/* ---------- Governance band ---------- */
.as1-gov-band {
  border: 1px solid var(--as1-amber-line);
  border-radius: 8px;
  padding: 12px 18px 13px;
}
.as1-gov-band .gov-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.as1-gov-band .g-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
}
.as1-gov-band .g-clause {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.as1-gov-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.as1-gov-grid .g-block {
  padding: 2px 0 0;
}
.as1-gov-grid .g-name {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.as1-gov-grid .g-desc {
  font-size: 12.5px;
  color: var(--faint);
  margin-top: 2px;
  line-height: 1.45;
}

/* ---------- Foundation ---------- */
.as1-band-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 22px 0 8px;
}
.as1-foundation-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.as1-f-block {
  background: var(--as1-panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 16px 11px;
}
.as1-f-block.spine {
  border-left: 2px solid var(--teal);
}
.as1-f-block .f-name {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.as1-f-block .f-desc {
  font-size: 12.5px;
  color: var(--faint);
  margin-top: 3px;
  line-height: 1.45;
}

/* Module/pack detail text: crawlable in the markup, shown inline on the
   stacked mobile layout, surfaced by the tooltip everywhere else. */
.as1-module .m-detail,
.as1-pack .m-detail {
  display: none;
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .as1-radial > g[transform] circle {
    animation: as1-pulse 5s ease-in-out infinite;
  }
  .as1-radial > g[transform] circle:nth-of-type(2) { animation-delay: 0.5s; }
  .as1-radial > g[transform] circle:nth-of-type(3) { animation-delay: 1s; }
  .as1-radial > g[transform] circle:nth-of-type(4) { animation-delay: 1.5s; }
  .as1-radial > g[transform] circle:nth-of-type(5) { animation-delay: 2s; }
  .as1-radial > g[transform] circle:nth-of-type(6) { animation-delay: 2.5s; }
  .as1-radial > g[transform] circle:nth-of-type(7) { animation-delay: 3s; }
  .as1-radial > g[transform] circle:nth-of-type(8) { animation-delay: 3.5s; }
  .as1-radial > g[transform] circle:nth-of-type(9) { animation-delay: 4s; }
  .as1-radial > g[transform] circle:nth-of-type(10) { animation-delay: 4.5s; }
  html.enhanced [data-reveal].is-visible .as1-radial > g[stroke] {
    animation: as1-fade 1.4s var(--as1-ease) both;
  }
}
@keyframes as1-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
@keyframes as1-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .as1-sector-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Stacked card layout: the 760px artboard is unreadable scaled below
   ~640px, so the same markup reflows into a list. abyshire-one.js skips
   the scale transform at this width. */
@media (max-width: 640px) {
  .as1-map-frame {
    display: block;
    overflow: visible;
  }
  .as1-map {
    width: 100%;
    height: auto;
    display: grid;
    gap: 8px;
  }
  .as1-map svg.as1-radial,
  .as1-ring-label {
    display: none;
  }
  .as1-core {
    position: static;
    transform: none;
    width: auto;
    background: var(--as1-panel);
    border: 1px solid var(--as1-teal-line);
    border-radius: 8px;
    padding: 16px 14px;
  }
  .as1-module {
    position: static !important;
    transform: none;
    width: auto;
    cursor: default;
    padding: 12px 14px 11px;
  }
  .as1-module:hover,
  .as1-module:focus-visible,
  .as1-module.is-active {
    transform: none;
  }
  .as1-module .m-name,
  .as1-module .m-sub {
    white-space: normal;
  }
  .as1-module .m-detail {
    display: block;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
    margin-top: 6px;
  }
  .as1-caption {
    display: none;
  }
}
@media (max-width: 760px) {
  .as1-sector-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .as1-gov-grid,
  .as1-foundation-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .as1-gov-band .gov-head {
    flex-direction: column;
    gap: 2px;
  }
}

/* ---------- Print ---------- */
@media print {
  .as1-tip {
    display: none;
  }
  .as1-map-frame,
  .as1-gov-band {
    break-inside: avoid;
  }
}