/* ================================================================
   INDEX'SUN — Cross-Hub Reference Styles (xref)
   Pill (inline citation) + Card (aggregated strip) + Back chip
   Version: 1.0 (Track B Step 1)
   Autonomy: uses CSS var fallbacks so works even without tokens.css
   ================================================================ */

/* ------------ Pill (inline citation) ------------ */
.xref{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--xref-pill-size,22px);
  height:var(--xref-pill-size,22px);
  border-radius:var(--xref-pill-radius,4px);
  font-family:var(--font-mono,'IBM Plex Mono',ui-monospace,monospace);
  font-weight:700;
  font-size:var(--xref-monogram-font-size,0.62rem);
  letter-spacing:.02em;
  color:#fff;
  background:var(--master,#8b7e9e);
  text-decoration:none;
  vertical-align:baseline;
  margin:0 2px;
  position:relative;
  transition:transform .12s ease, box-shadow .12s ease;
  cursor:pointer;
  line-height:1;
}
.xref:hover,
.xref:focus-visible{
  transform:scale(var(--xref-pill-hover-scale,1.1));
  box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.15));
  outline:none;
}
.xref:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}

/* Per-target-hub accent for pills */
.xref-mtl    { background:#7a4aa2; }
.xref-law    { background:#c85a3a; }
.xref-invest { background:#0fb5a5; }
.xref-health { background:#c94f6d; }
.xref-portal { background:#8b7e9e; }

html.dark .xref-mtl    { background:#b68fd0; color:#18191c; }
html.dark .xref-law    { background:#e09070; color:#18191c; }
html.dark .xref-invest { background:#2dd4bf; color:#18191c; }
html.dark .xref-health { background:#e68aa0; color:#18191c; }
html.dark .xref-portal { background:#c4b5d9; color:#18191c; }

/* Tooltip on hover */
.xref[data-xref-tip]:hover::after,
.xref[data-xref-tip]:focus-visible::after{
  content:attr(data-xref-tip);
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  background:var(--xref-tooltip-bg,var(--surface-2,#f3f2ed));
  color:var(--text,#1f1f1f);
  font-family:var(--font-thai,'IBM Plex Sans Thai',sans-serif);
  font-size:.72rem;
  font-weight:500;
  line-height:1.3;
  padding:.3rem .5rem;
  border-radius:var(--r-sm,4px);
  border:1px solid var(--border,#e6e5e2);
  white-space:nowrap;
  box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.15));
  z-index:50;
  pointer-events:none;
}

/* ------------ Card (bottom related strip) ------------ */
.xref-strip{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1.5rem;
  padding-top:1rem;
  border-top:1px solid var(--border,#e6e5e2);
}
.xref-strip-title{
  width:100%;
  font-family:var(--font-thai,'IBM Plex Sans Thai',sans-serif);
  font-size:.82rem;
  font-weight:600;
  color:var(--text2,#555);
  margin-bottom:.5rem;
  letter-spacing:.02em;
}
.xref-card{
  display:flex;
  flex-direction:column;
  width:var(--xref-card-width,240px);
  min-height:120px;
  padding:var(--xref-card-padding,1rem);
  padding-top:calc(var(--xref-card-padding,1rem) + 4px);
  background:var(--surface,#fff);
  border:1px solid var(--border,#e6e5e2);
  border-radius:var(--r-md,8px);
  text-decoration:none;
  color:inherit;
  position:relative;
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.xref-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:#8b7e9e;
}
.xref-card.xref-card-mtl::before    { background:#7a4aa2; }
.xref-card.xref-card-law::before    { background:#c85a3a; }
.xref-card.xref-card-invest::before { background:#0fb5a5; }
.xref-card.xref-card-health::before { background:#c94f6d; }
.xref-card.xref-card-portal::before { background:#8b7e9e; }

.xref-card:hover,
.xref-card:focus-visible{
  transform:translateY(-2px);
  box-shadow:var(--xref-card-hover-shadow,var(--shadow-lg,0 12px 24px rgba(0,0,0,.12)));
  outline:none;
}
.xref-card.xref-card-mtl:hover    { border-color:#7a4aa2; }
.xref-card.xref-card-law:hover    { border-color:#c85a3a; }
.xref-card.xref-card-invest:hover { border-color:#0fb5a5; }
.xref-card.xref-card-health:hover { border-color:#c94f6d; }

.xref-card-head{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:.5rem;
}
.xref-card-mono{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  border-radius:var(--xref-pill-radius,4px);
  font-family:var(--font-mono,'IBM Plex Mono',ui-monospace,monospace);
  font-weight:700;
  font-size:var(--xref-monogram-font-size,0.62rem);
  color:#fff;
  background:#8b7e9e;
  flex-shrink:0;
}
.xref-card.xref-card-mtl    .xref-card-mono{ background:#7a4aa2; }
.xref-card.xref-card-law    .xref-card-mono{ background:#c85a3a; }
.xref-card.xref-card-invest .xref-card-mono{ background:#0fb5a5; }
.xref-card.xref-card-health .xref-card-mono{ background:#c94f6d; }

.xref-card-hub{
  font-family:var(--font-thai,'IBM Plex Sans Thai',sans-serif);
  font-size:.78rem;
  font-weight:500;
  color:var(--text2,#555);
}
.xref-card-title{
  font-family:var(--font-thai,'IBM Plex Sans Thai',sans-serif);
  font-size:var(--xref-card-title-size,0.88rem);
  font-weight:500;
  color:var(--text,#1f1f1f);
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}
.xref-card-desc{
  font-family:var(--font-thai,'IBM Plex Sans Thai',sans-serif);
  font-size:.74rem;
  color:var(--text3,var(--textm,#8b8b88));
  margin-top:auto;
  padding-top:.5rem;
  line-height:1.4;
}

/* ------------ Back chip (top of target page when ?from=X) ------------ */
.xref-back{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem .6rem .3rem .4rem;
  background:var(--surface-2,#f3f2ed);
  border:1px solid var(--border,#e6e5e2);
  border-radius:999px;
  font-family:var(--font-thai,'IBM Plex Sans Thai',sans-serif);
  font-size:.78rem;
  font-weight:500;
  color:var(--text2,#555);
  text-decoration:none;
  margin-bottom:.75rem;
  transition:background .12s ease, color .12s ease;
  cursor:pointer;
}
.xref-back:hover,
.xref-back:focus-visible{
  background:var(--accent-soft,#c4b5d9);
  color:var(--text,#1f1f1f);
  outline:none;
}
.xref-back-mono{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px; height:18px;
  border-radius:var(--xref-pill-radius,4px);
  font-family:var(--font-mono,'IBM Plex Mono',ui-monospace,monospace);
  font-weight:700;
  font-size:.58rem;
  color:#fff;
  background:#8b7e9e;
  line-height:1;
}
.xref-back.xref-back-mtl    .xref-back-mono{ background:#7a4aa2; }
.xref-back.xref-back-law    .xref-back-mono{ background:#c85a3a; }
.xref-back.xref-back-invest .xref-back-mono{ background:#0fb5a5; }
.xref-back.xref-back-health .xref-back-mono{ background:#c94f6d; }
.xref-back.xref-back-portal .xref-back-mono{ background:#8b7e9e; }
.xref-back-arrow{ font-size:.7rem; color:var(--text3,var(--textm,#8b8b88)); }
.xref-back-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px; height:14px;
  margin-left:.2rem;
  border-radius:50%;
  color:var(--text3,var(--textm,#8b8b88));
  font-size:.82rem;
  line-height:1;
  opacity:.6;
  transition:opacity .12s ease;
  background:none;
  border:none;
  cursor:pointer;
}
.xref-back:hover .xref-back-close{ opacity:1; }

/* ------------ PDPA consent row helper (Health) ------------ */
.xref-pdpa-note{
  font-family:var(--font-thai,'IBM Plex Sans Thai',sans-serif);
  font-size:.78rem;
  color:var(--text2,#555);
  line-height:1.5;
  margin-top:.5rem;
  padding:.5rem .6rem;
  background:var(--surface-2,#f3f2ed);
  border-left:3px solid #c94f6d;
  border-radius:var(--r-sm,4px);
}
.xref-pdpa-note a{
  color:var(--text,#1f1f1f);
  text-decoration:underline;
  text-decoration-color:#c85a3a;
  text-underline-offset:2px;
}

/* ------------ Responsive ------------ */
@media (max-width:560px){
  .xref-card{ width:100%; }
  .xref-strip{ flex-direction:column; }
}

/* ------------ Print: hide xref furniture ------------ */
@media print{
  .xref-back, .xref-strip{ display:none; }
  .xref{ color:#000; background:transparent; border:1px solid #999; }
}