/* =========================================================================
   JPC Private Bank — Regulation page. Loads after styles.css.
   Jurisdiction-led: Singapore · Hong Kong · UK, by asset class, quoted.
   ========================================================================= */

/* Comparison matrix — regulation-specific header treatment (base in styles.css) */
.ctable thead th { vertical-align: bottom; padding: 18px 20px; }
.ctable thead th .jx-name { font-family: var(--serif); font-size: 1.15rem; color: var(--ink-strong); text-transform: none; letter-spacing: 0; font-weight: 400; font-variation-settings:"opsz" 40; }
.ctable thead th .jx-reg { display: block; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; font-weight: 600; }
.ctable tbody th { width: 180px; }
.ctable tbody td { padding: 16px 20px; }

/* Jurisdiction block */
.jx { padding-block: clamp(48px, 7vw, 88px); border-top: 1px solid var(--hairline); }
.jx__head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,340px); gap: clamp(24px,4vw,56px); align-items: end; margin-bottom: 40px; }
.jx__num { font-family: var(--serif); font-size: 0.9rem; color: var(--accent-ink); }
.jx__path { border-left: 2px solid var(--accent); padding-left: 18px; }
.jx__path-label { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.jx__path-text { color: var(--ink); font-size: 0.96rem; line-height: 1.5; }

/* Asset-class trio */
.assets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--hairline); }
.asset { padding: 24px; border-right: 1px solid var(--hairline); }
.asset:last-child { border-right: 0; }
.asset__name { font-family: var(--serif); font-size: 1.12rem; color: var(--ink-strong); margin-bottom: 4px; font-variation-settings:"opsz" 36; }
.asset__verdict { font-size: 0.82rem; font-weight: 700; margin-bottom: 10px; }
.asset__body { font-size: 0.88rem; color: var(--muted); line-height: 1.5; }

/* The hard line callout */
.hardline { display: flex; gap: 16px; align-items: flex-start; background: #1a1a1a; color: var(--on-dark); padding: 24px 28px; margin-top: 24px; }
.hardline__icon { flex: none; width: 26px; height: 26px; color: var(--accent); }
.hardline__label { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-mut); font-weight: 600; margin-bottom: 8px; }
.hardline__text { color: #fff; font-size: 1.02rem; line-height: 1.45; max-width: 70ch; }
.hardline__cite { color: var(--on-dark-mut); font-size: 0.8rem; margin-top: 8px; }

/* Source quotes */
.sources-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 40px; margin-top: 32px; }
.srcq { border-top: 1px solid var(--hairline-2); padding-top: 16px; }
.srcq__tag { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; margin-bottom: 10px; }
.srcq__text { font-family: var(--serif); font-size: 1rem; line-height: 1.45; color: var(--ink-strong); font-style: italic; }
.srcq__link { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--muted); margin-top: 10px; }
.srcq__link svg { width: 13px; height: 13px; }
.srcq__link:hover { color: var(--ink-strong); }

@media (max-width: 860px) {
  .jx__head { grid-template-columns: 1fr; }
  .assets { grid-template-columns: 1fr; }
  .asset { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .asset:last-child { border-bottom: 0; }
  .sources-grid { grid-template-columns: 1fr; }
}

/* ===== The proposal story: Compliance / Legal / Risk / Mitigants lenses ===== */
.proposal-lead { border-left: 2px solid var(--accent); padding: 2px 0 2px 20px; margin: 0 0 28px; }
.proposal-lead__label { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); font-weight: 600; margin-bottom: 8px; }
.proposal-lead__text { font-size: 1.05rem; color: var(--ink-strong); line-height: 1.5; max-width: 66ch; }

.lens-rows { border-top: 1px solid var(--ink-strong); }
.lens-row { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--hairline); }
.lens-row__label { display: flex; align-items: flex-start; gap: 9px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--muted); padding-top: 2px; }
.lens-row__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 4px; }
.lens-row--compliance .lens-row__dot { background: var(--accent); }
.lens-row--legal .lens-row__dot { background: #4a6fa5; }
.lens-row--risk .lens-row__dot { background: #9a7b34; }
.lens-row--mitigants .lens-row__dot { background: var(--ink-strong); }
.lens-row__body { color: var(--ink); line-height: 1.55; font-size: 0.95rem; max-width: 72ch; }
.lens-row__body p + p { margin-top: 10px; }
.cite-inline { display: inline-block; font-size: 0.82rem; color: var(--accent-ink); font-weight: 600; margin-top: 6px; }

/* Disclaimer / click-to-accept box */
.disc-box { border: 1px solid var(--hairline-2); border-radius: 8px; padding: 16px 18px; background: var(--page-alt); max-width: 66ch; }
.disc-box__text { font-size: 0.9rem; color: var(--ink); line-height: 1.5; }
.disc-box__action { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; background: var(--ink-strong); color: #fff; border-radius: 100px; padding: 8px 16px; font-size: 0.82rem; font-weight: 500; }
.disc-box__action svg { width: 14px; height: 14px; }

/* Risk rating pill */
.risk-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; }
.risk-pill--low { background: #eaf6f1; color: var(--accent-ink); }
.risk-pill--med { background: #f6efdf; color: #9a7b34; }
.risk-pill--high { background: #f7e9e7; color: #a3433a; }

/* Mitigants list */
.mitigants { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.mitigants li { display: flex; gap: 10px; font-size: 0.95rem; color: inherit; line-height: 1.5; }
.mitigants li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 8px; }

@media (max-width: 860px) {
  .lens-row { grid-template-columns: 1fr; gap: 8px; }
}