/* 星圖 starmap — 夜空與墨線，零建置 */

:root {
  color-scheme: light dark;

  /* 淺色：墨線星圖 */
  --bg: #f4f2ee;
  --fg: #1a1917;
  --muted: #6d6862;
  --rule: #d9d4cb;
  --panel-bg: #f4f2ee;
  --link-line: #3c3a35;
  --link-weak: #6d6862;
  --sky-bg: #f4f2ee;

  --d-drone: #9a7420;
  --d-warfare: #a6512c;
  --d-basketball: #4d7a4d;
  --d-aviation: #4c7aa8;
  --d-resilience: #8e628a;
  --d-strategy: #91825f;
  --d-other: #6d6862;

  --sans: "Noto Sans TC", system-ui, -apple-system, "Segoe UI", "PingFang TC",
    "Microsoft JhengHei", sans-serif;
  --serif: "Noto Serif TC", "Songti TC", "Source Han Serif TC", Georgia, serif;
  --mono: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  --pad: 24px;
  --col: 1040px;
  --sky-h: 62vh;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 深色：夜空（主要視覺） */
    --bg: #0b0e14;
    --fg: #e6e2d8;
    --muted: #8d8a82;
    --rule: #22262f;
    --panel-bg: #0b0e14;
    --link-line: #6f7686;
    --link-weak: #4a505c;
    --sky-bg: #0b0e14;

    --d-drone: #e3c27a;
    --d-warfare: #d98b6a;
    --d-basketball: #8fb98f;
    --d-aviation: #9fc0e0;
    --d-resilience: #c9a4c4;
    --d-strategy: #e0d3b8;
    --d-other: #8d8a82;
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

.serif { font-family: var(--serif); font-weight: 700; }

a { color: inherit; }

:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 3px;
}

/* ---------- 版面 ---------- */

.site-head,
.col,
.site-foot {
  max-width: var(--col);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.bleed { width: 100%; }

.site-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.brand:hover { color: var(--fg); }

.site-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
}

.col > section { padding-block: 56px; }
.col > section + section { border-top: 1px solid var(--rule); }

.sec-h {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 32px;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.22em;
  color: var(--muted);
}

.sec-h .sec-n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.sec-h::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}

h3 {
  margin: 0 0 16px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--muted);
}

/* ---------- 開場 ---------- */

.col > section.hero {
  padding-top: 8px;
  padding-bottom: 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 32px;
}

.lede {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

.counts {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.counts .sep { padding: 0 8px; color: var(--rule); }
.counts .n { font-family: var(--mono); }

/* ---------- 星圖 ---------- */

.sky {
  position: relative;
  width: 100%;
  height: var(--sky-h);
  background: var(--sky-bg);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  touch-action: none;
}

#map {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

#map:active { cursor: grabbing; }

.sky.ready #map { animation: fade 400ms ease both; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.link {
  fill: none;
  stroke: var(--link-weak);
  stroke-width: 0.6;
  opacity: 0.22;
}

.link.cite {
  stroke: var(--link-line);
  stroke-width: 1;
  opacity: 0.55;
}

.node { cursor: pointer; }
.node .hit { fill: transparent; stroke: none; }
.node .body { stroke: none; }
.node .ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.5;
}

.node .halo { fill: none; stroke: none; }

.link,
.node .body,
.node .ring,
.node .fresh,
.node .halo { vector-effect: non-scaling-stroke; }
.node .fresh {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.28;
}

.node.post .body { fill: currentColor; }
.node.paper .body { fill: currentColor; }
.node.book .body { fill: currentColor; }

.node.dom-drone { color: var(--d-drone); }
.node.dom-warfare { color: var(--d-warfare); }
.node.dom-basketball { color: var(--d-basketball); }
.node.dom-aviation { color: var(--d-aviation); }
.node.dom-resilience { color: var(--d-resilience); }
.node.dom-strategy { color: var(--d-strategy); }
.node.dom-other { color: var(--d-other); }

.node, .link { transition: opacity 150ms ease; }

.focusing .node { opacity: 0.18; }
.focusing .link { opacity: 0.06; }
.focusing .node.on { opacity: 1; }
.focusing .link.on { opacity: 0.7; }

.node.off, .link.off { opacity: 0.06; }
.focusing .node.off, .focusing .link.off { opacity: 0.06; }

.node.sel .body { stroke: var(--fg); stroke-width: 1.25; }
.node.sel .halo {
  fill: none;
  stroke: var(--fg);
  stroke-width: 1;
  opacity: 0.6;
}

.labels { pointer-events: none; }

.labels text {
  fill: var(--fg);
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  dominant-baseline: middle;
}

.labels text { transition: opacity 150ms ease; }
.labels text.dim { opacity: 0.2; }

.labels text.paper-label { fill: var(--muted); font-size: 9.5px; }
.labels text.book-label { font-family: var(--serif); }

/* ---------- 搜尋 ---------- */

.search {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.search input {
  width: 168px;
  padding: 5px 8px;
  border: 1px solid var(--rule);
  background: var(--sky-bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  border-radius: 0;
  appearance: none;
}

.search input:focus { outline: none; border-color: var(--muted); }
.search input::placeholder { color: var(--muted); }

.linkish {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.linkish:hover { color: var(--fg); }

/* ---------- 圖例 ---------- */

.legend {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 9px 7px;
  background: var(--sky-bg);
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 46%;
}

.legend button {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.legend button:hover { color: var(--fg); }
.legend button[aria-pressed="false"] { opacity: 0.4; }

.legend .swatch {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

.legend .shapes {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.legend .shapes span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.legend .shapes svg { flex: 0 0 auto; overflow: visible; }
.legend .shapes svg * { fill: none; stroke: var(--muted); stroke-width: 1; }
.legend .shapes svg .solid { fill: var(--muted); stroke: none; }

/* ---------- 面板 ---------- */

.panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 360px;
  max-width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 20px 22px 28px;
  background: var(--panel-bg);
  border-left: 1px solid var(--rule);
  animation: panel-in 180ms ease both;
}

@keyframes panel-in { from { opacity: 0; } to { opacity: 1; } }

.panel .p-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.panel .kind {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted);
}

.panel h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.panel .orig {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.panel .p-meta {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--muted);
}

.panel .p-meta .mono { font-family: var(--mono); }
.panel .p-meta .sep { padding: 0 7px; color: var(--rule); }

.panel .p-sum {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.panel .p-link { margin: 18px 0 0; font-size: 13px; }

.panel .p-link a {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.panel .p-near {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.panel .p-near ul { margin: 0; padding: 0; list-style: none; }

.panel .p-near li + li { margin-top: 10px; }

.panel .p-near button {
  appearance: none;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.6;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.panel .p-near button:hover { text-decoration: underline; text-underline-offset: 4px; }

.panel .p-near .dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

.panel .p-near .k {
  white-space: nowrap;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding-left: 6px;
}

/* ---------- tooltip ---------- */

.tip {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -140%);
  padding: 4px 8px;
  max-width: 240px;
  background: var(--bg);
  border: 1px solid var(--rule);
  font-size: 11.5px;
  line-height: 1.6;
  pointer-events: none;
}

.tip .t-meta { color: var(--muted); font-size: 10.5px; }
.tip .t-meta .mono { font-family: var(--mono); }

/* ---------- 下方清單 ---------- */

.recent { margin: 0; padding: 0; list-style: none; }

.recent li + li { margin-top: 2px; }

.recent button {
  appearance: none;
  display: grid;
  grid-template-columns: 92px 52px minmax(0, 1fr);
  align-items: baseline;
  gap: 0 16px;
  width: 100%;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.recent button:hover .t { text-decoration: underline; text-underline-offset: 5px; }

.recent .d { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.recent .k { font-size: 11px; letter-spacing: 0.12em; color: var(--muted); }
.recent .t { min-width: 0; line-height: 1.6; overflow-wrap: anywhere; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.rank { margin: 0; padding: 0; list-style: none; counter-reset: r; }

.rank li {
  counter-increment: r;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}

.rank button {
  appearance: none;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 0 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.65;
  text-align: left;
  cursor: pointer;
}

.rank button::before {
  content: counter(r, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

.rank button:hover .t { text-decoration: underline; text-underline-offset: 5px; }

.rank .t { min-width: 0; overflow-wrap: anywhere; }
.rank .c { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.grow { margin: 0; font-size: 14px; color: var(--muted); }

/* ---------- 頁尾 ---------- */

.site-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  padding-bottom: 56px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--muted);
}

.site-foot p { margin: 0; }

/* ---------- 寬 ---------- */

@media (min-width: 720px) {
  :root { --pad: 48px; --sky-h: 72vh; }
  .col > section { padding-block: 80px; }
  .col > section.hero { padding-top: 16px; padding-bottom: 32px; }
  .sec-h { margin-bottom: 40px; }
  .lede { font-size: 17px; }
}

/* ---------- 窄 ---------- */

@media (max-width: 719px) {
  .sky { --sky-h: 62vh; }

  .search { top: 10px; right: 10px; left: 10px; }
  .search input { width: 100%; }

  .legend {
    left: 10px;
    bottom: 10px;
    max-width: 60%;
    font-size: 10.5px;
  }

  .panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: 76%;
    padding: 14px 18px 22px;
    border-left: 0;
    border-top: 1px solid var(--rule);
    animation-name: sheet-in;
  }

  @keyframes sheet-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .panel h2 { font-size: 17px; }

  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .site-foot { flex-direction: column; gap: 8px; }

  .recent button { grid-template-columns: 78px minmax(0, 1fr); gap: 0 12px; font-size: 13.5px; }
  .recent .k { grid-column: 2; font-size: 10.5px; }
  .recent .t { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}