/* ALB Atlas — chrome for the entity map. Same visual language as the wiki:
   restrained, print-like, the data carries the authority. */

/* masthead + tabs */
.amast {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 0.75rem 0 0.4rem;
  border-bottom: 1px solid #d5d9e0;
}
.abrand {
  display: flex; align-items: center; gap: 0.55rem;
  text-decoration: none; color: #202122;
  font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem;
}
.acomp { color: #0645ad; font-size: 1.1rem; }
.asearch { display: flex; }
.asearch input[type="search"] {
  border: 1px solid #a2a9b1; border-right: none;
  padding: 0.4rem 0.6rem; font: inherit; min-width: 14rem;
}
.asearch button {
  border: 1px solid #a2a9b1; background: #f8f9fa;
  padding: 0.4rem 0.8rem; font: inherit; cursor: pointer;
}
.asearch button:hover { background: #fff; }

.atabs {
  display: flex; gap: 0.25rem; padding: 0.35rem 0 0.6rem;
  border-bottom: 1px solid #d5d9e0; font-size: 0.88rem;
}
.atab {
  color: #0645ad; text-decoration: none; padding: 0.15rem 0.55rem;
  border-radius: 3px;
}
.atab:hover { text-decoration: underline; }
.atab-on { background: #eaf3fb; font-weight: 700; }

/* breadcrumb */
.acrumb { font-size: 0.82rem; color: #54595d; padding: 0.5rem 0 0.25rem; }
.acrumb a { color: #0645ad; text-decoration: none; }
.acrumb a:hover { text-decoration: underline; }
.acrumb .asep { margin: 0 0.35rem; color: #a2a9b1; }

.alede { font-size: 1.02rem; line-height: 1.55; max-width: 46rem; }
.adim { color: #54595d; font-size: 0.88rem; }
.aaka { color: #54595d; font-size: 0.82rem; margin-left: 0.4rem; }
.aaka::before { content: "("; } .aaka::after { content: ")"; }
.aempty { color: #54595d; font-style: italic; }

/* hall cards */
.acards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem; margin: 1.5rem 0 2rem;
}
.acard {
  display: flex; flex-direction: column; gap: 0.25rem;
  border: 1px solid #d5d9e0; border-radius: 4px; background: #f8f9fa;
  padding: 1.1rem 1.2rem; text-decoration: none; color: #202122;
}
.acard:hover { background: #fff; border-color: #a2a9b1; }
.acard-n { font-family: Georgia, serif; font-size: 2rem; color: #0645ad; }
.acard-l { font-weight: 700; }
.acard-s { font-size: 0.85rem; color: #54595d; }
.acard-dim { opacity: 0.6; }

.anews { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.75rem; }
.aent { border-left: 3px solid #d5d9e0; padding: 0.2rem 0 0.2rem 0.7rem; font-size: 0.9rem; }
.aent p { margin: 0.25rem 0 0; color: #54595d; font-size: 0.85rem; }

/* directory table */
.atable { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin: 1rem 0 2rem; }
.atable th {
  text-align: left; border-bottom: 2px solid #a2a9b1; padding: 0.4rem 0.5rem;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #54595d;
}
.atable td { border-bottom: 1px solid #eaecf0; padding: 0.45rem 0.5rem; vertical-align: top; }
.atable tr:hover td { background: #f8f9fa; }
.atable .ay { white-space: nowrap; font-variant-numeric: tabular-nums; color: #54595d; }
.atable .acr { color: #54595d; font-size: 0.88rem; }

/* status badges — muted, archival. Dead things get grey, not red. */
.ast {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  padding: 0.08rem 0.45rem; border-radius: 3px; letter-spacing: 0.03em;
  text-transform: uppercase; vertical-align: middle;
}
.ast-alive       { background: #e6f4e6; color: #1e6b1e; }
.ast-maintenance { background: #eaf3fb; color: #2a5a80; }
.ast-dormant     { background: #fdf3e0; color: #8a5a12; }
.ast-dead        { background: #ececec; color: #54595d; }
.ast-lost        { background: #202122; color: #f8f9fa; }
.ast-superseded  { background: #efecf6; color: #5a4a80; }

/* filter chips + edge chips */
.achip {
  display: inline-block; border: 1px solid #d5d9e0; border-radius: 3px;
  background: #fff; color: #0645ad; text-decoration: none;
  font-size: 0.8rem; padding: 0.1rem 0.5rem; margin: 0.12rem 0.12rem 0.12rem 0;
}
.achip:hover { border-color: #0645ad; }
.achip-on { background: #eaf3fb; border-color: #7299c9; font-weight: 700; }
.achip .an { color: #a2a9b1; font-size: 0.72rem; }

.afilter { border: 1px solid #eaecf0; background: #f8f9fa; border-radius: 4px; padding: 0.6rem 0.8rem; margin: 0.8rem 0 1.2rem; }
.afrow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.1rem; padding: 0.15rem 0; }
.aflab {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: #54595d; min-width: 4rem; margin-right: 0.4rem;
}

/* entity stat card — floats right like the wiki infobox */
.abox {
  float: right; width: 17rem; margin: 0 0 1rem 1.5rem;
  border: 1px solid #a2a9b1; background: #f8f9fa; font-size: 0.85rem;
}
.abox-t {
  background: #eaf3fb; font-weight: 700; text-align: center;
  padding: 0.45rem 0.6rem; border-bottom: 1px solid #a2a9b1;
  font-family: Georgia, serif; font-size: 1rem;
}
.abox-img { display: block; max-width: 100%; margin: 0 auto; }
.asrow { display: flex; gap: 0.5rem; padding: 0.28rem 0.6rem; border-bottom: 1px solid #eaecf0; }
.asrow:last-child { border-bottom: none; }
.ask { min-width: 5.5rem; color: #54595d; font-weight: 700; }
.asv { flex: 1; }
.asv a { color: #0645ad; }

/* lifespan strip */
.alife-wrap { margin: 1.2rem 0; clear: both; }
.alife-track {
  position: relative; height: 2.4rem;
  border-top: 1px solid #a2a9b1; border-bottom: 1px solid #a2a9b1;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1px), #eaecf0 calc(12.5% - 1px), #eaecf0 12.5%);
}
.alife { position: absolute; height: 0.55rem; border-radius: 2px; }
.alife-self { background: #0645ad; top: 0.45rem; height: 0.8rem; }
.alife-peer { background: #c8d3dc; top: 1.5rem; height: 0.4rem; }
.alife-scale { position: relative; height: 1rem; font-size: 0.7rem; color: #a2a9b1; }
.alife-scale span { position: absolute; transform: translateX(-50%); }

/* relationship edges */
.aedges { margin: 1rem 0; border-top: 1px solid #eaecf0; padding-top: 0.8rem; }
.aedge { padding: 0.2rem 0; font-size: 0.92rem; }
.aedge-l {
  display: inline-block; min-width: 9rem; color: #54595d; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}

.aevents { font-size: 0.88rem; }
.aevents .ay { font-weight: 700; color: #202122; width: 5.5rem; }

.awiki {
  border-left: 3px solid #7299c9; background: #f8f9fa;
  padding: 0.6rem 0.9rem; font-size: 0.95rem; margin: 1.2rem 0;
}
.awiki a { color: #0645ad; text-decoration: none; font-weight: 700; }
.awiki a:hover { text-decoration: underline; }

/* ---- the tree ---- */
.atree-wrap {
  overflow: auto; max-height: 80vh;
  border: 1px solid #d5d9e0; border-radius: 4px; background: #fff;
  margin: 0.8rem 0; cursor: grab;
}
.atree-drag { cursor: grabbing; }
.atree svg { display: block; width: 100%; min-width: 900px; }
/* With JS the wrap becomes a fixed viewBox viewport — no scrollbars, no
   reflow. Without JS it stays a plain scrollable box. */
.atree-js {
  overflow: hidden; position: relative;
  height: 76vh; max-height: 680px; touch-action: none;
}
.atree-js .atree { height: 100%; }
.atree-js svg { min-width: 0; width: 100%; height: 100%; }
.atree-ctl {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: flex; flex-direction: column; gap: 4px;
}
.atree-ctl button {
  width: 30px; height: 30px; border: 1px solid #d5d9e0; border-radius: 4px;
  background: #fff; color: #202122; cursor: pointer;
  font: 700 15px/1 Georgia, serif; box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.atree-ctl button:hover { background: #f8f9fa; }
.atree-ctl button[data-z="fit"] {
  font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: .05em;
}
.agrid { stroke: #eaecf0; stroke-width: 1; pointer-events: none; }
.agrid-t { fill: #a2a9b1; font-size: 10px; font-family: Georgia, serif; pointer-events: none; }
.ae-lin {
  fill: none; stroke: #7299c9; stroke-width: 1.4; opacity: 0.85;
  transition: opacity 0.15s; pointer-events: none;
}
.ae-inf {
  fill: none; stroke: #b8c4d0; stroke-width: 1; opacity: 0.35;
  stroke-dasharray: 4 3; transition: opacity 0.15s; pointer-events: none;
}
.ae-dim { opacity: 0.08; }
.ae-hot { opacity: 1; stroke-width: 2; }
.anode a { text-decoration: none; }
.anode circle { transition: r 0.12s, opacity 0.15s; }
.an-t { fill: #202122; font-size: 10.5px; font-family: Georgia, serif; }
.an-y { fill: #a2a9b1; font-size: 8.5px; }
.anode-dim { opacity: 0.12; }
.anode-hot circle { stroke: #202122; stroke-width: 1; }
.anode-hot .an-t { font-weight: 700; }

/* node status colors (SVG fills) — match the badge palette */
.an-alive       { fill: #2e8b2e; }
.an-maintenance { fill: #2a5a80; }
.an-dormant     { fill: #b06a10; }
.an-dead        { fill: #7a8088; }
.an-lost        { fill: #202122; }
.an-superseded  { fill: #7a68a8; }

/* legend */
.alegend {
  display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center;
  font-size: 0.8rem; color: #54595d; padding: 0.4rem 0;
}
.alegend .adot {
  display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 50%;
  margin-right: 0.3rem; vertical-align: middle;
}
.alegend .aline {
  display: inline-block; width: 1.4rem; height: 0; border-top: 2px solid #7299c9;
  margin-right: 0.3rem; vertical-align: middle;
}
.alegend .aline-inf { border-top: 1px dashed #b8c4d0; }

/* ---- the timeline ---- */
.atl-scale {
  position: relative; height: 1.1rem; margin: 0.6rem 0 0.2rem;
  font-size: 0.7rem; color: #a2a9b1;
}
.atl-scale span { position: absolute; transform: translateX(-50%); }
.atl-h {
  font-family: Georgia, serif; font-size: 1.1rem; margin: 1.4rem 0 0.4rem;
  border-bottom: 1px solid #d5d9e0; padding-bottom: 0.2rem;
}
.atl-list { border: 1px solid #eaecf0; border-radius: 4px; }
.atl-row {
  display: grid; grid-template-columns: 11rem 1fr 5.5rem;
  gap: 0.6rem; align-items: center;
  padding: 0.14rem 0.6rem; text-decoration: none; color: #202122;
  border-bottom: 1px solid #f2f3f5; font-size: 0.85rem;
}
.atl-row:last-child { border-bottom: none; }
.atl-row:hover { background: #f8f9fa; }
.atl-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atl-row:hover .atl-name { color: #0645ad; }
.atl-track {
  position: relative; height: 0.9rem;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1px), #f2f3f5 calc(12.5% - 1px), #f2f3f5 12.5%);
}
.atl-bar { position: absolute; top: 0.2rem; height: 0.5rem; border-radius: 2px; }
.atl-y { font-size: 0.72rem; color: #a2a9b1; font-variant-numeric: tabular-nums; text-align: right; }

/* bar fills reuse the node palette */
.ast-b-alive       { background: #2e8b2e; }
.ast-b-maintenance { background: #2a5a80; }
.ast-b-dormant     { background: #b06a10; }
.ast-b-dead        { background: #7a8088; }
.ast-b-lost        { background: #202122; }
.ast-b-superseded  { background: #7a68a8; }

@media (max-width: 720px) {
  .abox { float: none; width: auto; margin: 0 0 1rem; }
  .aedge-l { display: block; min-width: 0; }
  .atl-row { grid-template-columns: 6.5rem 1fr 4rem; }
  .atree svg { min-width: 640px; }
}
.abody { max-width: 46rem; margin: 0.6rem 0 1rem; font-size: 0.97rem; line-height: 1.6; }
.abody p { margin: 0 0 0.7rem; }
.asrc { margin: 1.2rem 0 0; border-top: 1px solid #eaecf0; padding-top: 0.7rem; max-width: 46rem; }
.asrc h2 { font-size: 0.95rem; margin: 0 0 0.35rem; }
.asrc ol { margin: 0; padding-left: 1.4rem; font-size: 0.82rem; line-height: 1.5; color: #54595d; }
.asrc a { color: #0645ad; text-decoration: none; word-break: break-all; }
.asrc a:hover { text-decoration: underline; }