/* ============================================================
   lab.css — Urban Flux Research "Laboratory Layer" v1.0
   世界観拡充レイヤー: LAB WIRE ティッカー / 為替日次参考レート /
   関連研究モジュール / 読了時間 / Back-to-top / モダンCSS強化
   ax.css と独立・自己完結（どのページ配色でも安全に載る）。
   すべて progressive enhancement — JS/API 失敗時は何も表示しない。
============================================================ */

/* ---------- modern typography & platform polish (safe, progressive) ---------- */
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
:focus-visible { outline: 2px solid #2e7d5b; outline-offset: 2px; }

/* cross-document view transitions (Chromium 126+; no-op elsewhere) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- palette (light default / dark via body[data-ax-theme="dark"]) ---------- */
.lab-scope {
  --lab-bg: #fdfdfb;
  --lab-bg2: #f6f6f2;
  --lab-line: #d8dad2;
  --lab-ink: #1c2230;
  --lab-ink2: #4a5160;
  --lab-ink3: #8a8f9a;
  --lab-accent: #1e3a5f;
  --lab-up: #2e7d5b;
  --lab-down: #a14040;
  --lab-chip: #eef2f7;
  --lab-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --lab-serif: 'Noto Serif JP', serif;
  --lab-sans: 'Noto Sans JP', -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-family: var(--lab-sans);
  color: var(--lab-ink);
}
body[data-ax-theme="dark"] .lab-scope {
  --lab-bg: #10141b;
  --lab-bg2: #141821;
  --lab-line: #262c38;
  --lab-ink: #e8e8e8;
  --lab-ink2: #b8c0cc;
  --lab-ink3: #8a93a0;
  --lab-accent: #c4a660;
  --lab-up: #59b389;
  --lab-down: #d98080;
  --lab-chip: #1b2230;
}

/* ============================================================
   1. LAB STRIP — ticker bar (wire headlines + FX reference rates)
============================================================ */
.lab-strip {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;          /* 各ページの固定ナビ(z-index 900系)より必ず上 */
  background: var(--lab-bg2);
  border-bottom: 1px solid var(--lab-line);
  font-family: var(--lab-mono);
  font-size: 11.5px;
  line-height: 1;
  user-select: none;
}
.lab-strip__in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: stretch;
  gap: 12px;
  height: 34px;
}
.lab-strip__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--lab-accent);
  letter-spacing: .14em;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
}
.lab-strip__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lab-up);
  animation: lab-pulse 2.4s ease-in-out infinite;
}
@keyframes lab-pulse { 0%,100%{opacity:1;} 50%{opacity:.25;} }
.lab-strip__wire {
  flex: 1 1 42%;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-left: 1px solid var(--lab-line);
  padding-left: 12px;
}
.lab-strip__wire a {
  color: var(--lab-ink2);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity .5s ease;
}
.lab-strip__wire a.lab-on { opacity: 1; }
.lab-strip__wire a:hover { color: var(--lab-accent); text-decoration: underline; }
.lab-strip__wire time { color: var(--lab-ink3); margin-right: 8px; }
.lab-strip__rates {
  flex: 1 1 58%;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-left: 1px solid var(--lab-line);
  padding-left: 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.lab-strip__track {
  display: flex;
  gap: 26px;
  white-space: nowrap;
  animation: lab-marquee 46s linear infinite;
  will-change: transform;
}
.lab-strip:hover .lab-strip__track { animation-play-state: paused; }
@keyframes lab-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .lab-strip__track { animation: none; }
  .lab-strip__rates { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .lab-strip__dot { animation: none; }
}
.lab-rate { display: inline-flex; align-items: baseline; gap: 7px; color: var(--lab-ink2); }
.lab-rate b { color: var(--lab-ink); font-weight: 600; }
.lab-rate .lab-d-up { color: var(--lab-up); }
.lab-rate .lab-d-dn { color: var(--lab-down); }
.lab-rate .lab-d-fl { color: var(--lab-ink3); }
.lab-strip__toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  border-left: 1px solid var(--lab-line);
  color: var(--lab-ink3);
  font-family: var(--lab-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  padding: 0 2px 0 12px;
  cursor: pointer;
}
.lab-strip__toggle:hover { color: var(--lab-accent); }
.lab-strip__toggle .lab-chev { transition: transform .25s ease; display: inline-block; }
.lab-strip__toggle[aria-expanded="true"] .lab-chev { transform: rotate(180deg); }
@media (max-width: 760px) {
  .lab-strip__wire { display: none; }
  .lab-strip__toggle span.lab-lbl { display: none; }
}

/* ---------- expandable market panel ---------- */
.lab-panel {
  position: fixed;
  left: 0; right: 0;
  top: 34px;              /* JS が strip+nav の実測値で上書き */
  z-index: 995;
  overflow: hidden;
  max-height: 0;
  transition: max-height .45s cubic-bezier(.4,0,.2,1);
  background: var(--lab-bg);
  border-bottom: 0 solid var(--lab-line);
}
.lab-panel.lab-open {
  border-bottom-width: 1px;
  overflow-y: auto;
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
}
.lab-panel__in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 16px 22px;
}
.lab-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.lab-panel__title {
  font-family: var(--lab-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--lab-accent);
  font-weight: 600;
}
.lab-panel__src {
  font-size: 11px;
  color: var(--lab-ink3);
}
.lab-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.lab-card {
  border: 1px solid var(--lab-line);
  border-radius: 8px;
  background: var(--lab-bg2);
  padding: 12px 14px 10px;
  min-width: 0;
}
.lab-card__pair {
  font-family: var(--lab-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--lab-ink3);
  display: flex;
  justify-content: space-between;
}
.lab-card__rate {
  font-family: var(--lab-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--lab-ink);
  margin: 6px 0 2px;
  font-variant-numeric: tabular-nums;
}
.lab-card__delta { font-family: var(--lab-mono); font-size: 11.5px; }
.lab-card__delta.lab-d-up { color: var(--lab-up); }
.lab-card__delta.lab-d-dn { color: var(--lab-down); }
.lab-card__delta.lab-d-fl { color: var(--lab-ink3); }
.lab-card canvas { display: block; width: 100%; height: 44px; margin-top: 8px; }
.lab-panel__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 18px;
}
@media (min-width: 860px) { .lab-panel__cols { grid-template-columns: 3fr 2fr; } }
.lab-news h4, .lab-log h4 {
  font-family: var(--lab-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--lab-ink3);
  margin: 0 0 8px;
  font-weight: 600;
}
.lab-news ul, .lab-log ul { list-style: none; margin: 0; padding: 0; }
.lab-news li, .lab-log li {
  border-top: 1px solid var(--lab-line);
  padding: 7px 0;
  font-size: 12.5px;
  line-height: 1.55;
}
.lab-news a, .lab-log a { color: var(--lab-ink2); text-decoration: none; }
.lab-news a:hover, .lab-log a:hover { color: var(--lab-accent); text-decoration: underline; }
.lab-news .lab-src, .lab-log time {
  font-family: var(--lab-mono);
  font-size: 10.5px;
  color: var(--lab-ink3);
  margin-right: 8px;
  white-space: nowrap;
}
.lab-news .lab-ext { font-size: 10px; color: var(--lab-ink3); margin-left: 4px; }
.lab-panel__note {
  margin-top: 16px;
  font-size: 11px;
  color: var(--lab-ink3);
  line-height: 1.7;
  border-top: 1px solid var(--lab-line);
  padding-top: 10px;
}

/* ============================================================
   2. RELATED RESEARCH — 関連研究ノート
============================================================ */
.lab-related {
  border-top: 1px solid var(--lab-line);
  background: var(--lab-bg2);
  padding: 36px 0 44px;
}
.lab-related__in { max-width: 920px; margin: 0 auto; padding: 0 24px; }
.lab-related__t {
  font-family: var(--lab-mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--lab-ink3);
  margin: 0 0 4px;
}
.lab-related__h {
  font-family: var(--lab-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--lab-ink);
  margin: 0 0 18px;
}
.lab-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.lab-rcard {
  display: block;
  border: 1px solid var(--lab-line);
  border-radius: 8px;
  background: var(--lab-bg);
  padding: 14px 16px;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lab-rcard:hover {
  transform: translateY(-2px);
  border-color: var(--lab-accent);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.lab-rcard__cat {
  display: inline-block;
  font-family: var(--lab-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--lab-accent);
  background: var(--lab-chip);
  border-radius: 4px;
  padding: 3px 7px;
  margin-bottom: 8px;
}
.lab-rcard__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lab-ink);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lab-rcard time {
  display: block;
  margin-top: 8px;
  font-family: var(--lab-mono);
  font-size: 10.5px;
  color: var(--lab-ink3);
}
@media (prefers-reduced-motion: reduce) { .lab-rcard { transition: none; } }

/* ============================================================
   3. READING TIME chip + BACK-TO-TOP
============================================================ */
.lab-readtime {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--lab-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--lab-ink3);
  border: 1px solid var(--lab-line);
  border-radius: 99px;
  padding: 4px 11px;
  margin: 10px 0 0;
}
.lab-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--lab-line);
  background: var(--lab-bg);
  color: var(--lab-ink2);
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
}
.lab-top.lab-show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.lab-top:hover { color: var(--lab-accent); border-color: var(--lab-accent); }
@media (prefers-reduced-motion: reduce) { .lab-top { transition: opacity .3s ease; transform: none; } }