Widget:Solvency2 BalanceSheet - Revision history

https://www.insurerbrain.com/w/index.php?action=history&feed=atom&title=Widget%3ASolvency2_BalanceSheet Widget:Solvency2 BalanceSheet - Revision history 2026-04-22T07:07:42Z Revision history for this page on the wiki MediaWiki 1.43.8 https://www.insurerbrain.com/w/index.php?title=Widget:Solvency2_BalanceSheet&diff=22523&oldid=prev Wikilah admin at 02:21, 31 March 2026 2026-03-31T02:21:58Z

<p></p> <a href="https://www.insurerbrain.com/w/index.php?title=Widget:Solvency2_BalanceSheet&diff=22523&oldid=22522">Show changes</a>

Wikilah admin https://www.insurerbrain.com/w/index.php?title=Widget:Solvency2_BalanceSheet&diff=22522&oldid=prev Wikilah admin at 02:05, 31 March 2026 2026-03-31T02:05:16Z

<p></p> <a href="https://www.insurerbrain.com/w/index.php?title=Widget:Solvency2_BalanceSheet&diff=22522&oldid=22521">Show changes</a>

Wikilah admin https://www.insurerbrain.com/w/index.php?title=Widget:Solvency2_BalanceSheet&diff=22521&oldid=prev Wikilah admin at 02:01, 31 March 2026 2026-03-31T02:01:28Z

<p></p> <a href="https://www.insurerbrain.com/w/index.php?title=Widget:Solvency2_BalanceSheet&diff=22521&oldid=22519">Show changes</a>

Wikilah admin https://www.insurerbrain.com/w/index.php?title=Widget:Solvency2_BalanceSheet&diff=22519&oldid=prev Wikilah admin: Created page with "<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Solvency II Balance Sheet</title> <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet"> <style> :root { --bg: #0c1018; --surface: #141b27; --surface2: #1a2234; --border: #253044; --tex..." 2026-03-31T01:51:50Z

<p>Created page with "<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Solvency II Balance Sheet</title> <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet"> <style> :root { --bg: #0c1018; --surface: #141b27; --surface2: #1a2234; --border: #253044; --tex..."</p> <p><b>New page</b></p><div><!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br /> <title>Solvency II Balance Sheet</title><br /> <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet"><br /> <style><br /> :root {<br /> --bg: #0c1018;<br /> --surface: #141b27;<br /> --surface2: #1a2234;<br /> --border: #253044;<br /> --text: #e2e8f0;<br /> --text-dim: #8896ab;<br /> --text-muted: #5a6a80;<br /> --accent-blue: #4a9eff;<br /> --accent-cyan: #22d3ee;<br /> --accent-emerald: #34d399;<br /> --accent-amber: #fbbf24;<br /> --accent-rose: #fb7185;<br /> --accent-violet: #a78bfa;<br /> --accent-orange: #fb923c;<br /> /* Balance sheet colors */<br /> --assets-color: #4a9eff;<br /> --bel-color: #fb923c;<br /> --rm-color: #fbbf24;<br /> --scr-color: #fb7185;<br /> --mcr-color: #e879a0;<br /> --surplus-color: #34d399;<br /> --own-funds-color: #22d3ee;<br /> --tp-color: #f59e42;<br /> }<br /> <br /> * { margin: 0; padding: 0; box-sizing: border-box; }<br /> <br /> body {<br /> background: var(--bg);<br /> color: var(--text);<br /> font-family: 'IBM Plex Sans', sans-serif;<br /> min-height: 100vh;<br /> overflow-x: hidden;<br /> }<br /> <br /> /* Grain overlay */<br /> body::before {<br /> content: '';<br /> position: fixed;<br /> inset: 0;<br /> background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");<br /> pointer-events: none;<br /> z-index: 999;<br /> }<br /> <br /> .container {<br /> max-width: 1280px;<br /> margin: 0 auto;<br /> padding: 40px 32px 60px;<br /> }<br /> <br /> /* Header */<br /> header {<br /> text-align: center;<br /> margin-bottom: 48px;<br /> animation: fadeUp 0.8s ease-out;<br /> }<br /> <br /> header .eyebrow {<br /> font-family: 'IBM Plex Mono', monospace;<br /> font-size: 11px;<br /> font-weight: 500;<br /> letter-spacing: 3px;<br /> text-transform: uppercase;<br /> color: var(--accent-cyan);<br /> margin-bottom: 16px;<br /> opacity: 0.8;<br /> }<br /> <br /> header h1 {<br /> font-family: 'DM Serif Display', serif;<br /> font-size: clamp(28px, 5vw, 48px);<br /> font-weight: 400;<br /> line-height: 1.15;<br /> letter-spacing: -0.5px;<br /> background: linear-gradient(135deg, #e2e8f0 30%, var(--accent-cyan) 100%);<br /> -webkit-background-clip: text;<br /> -webkit-text-fill-color: transparent;<br /> margin-bottom: 12px;<br /> }<br /> <br /> header p {<br /> font-size: 15px;<br /> color: var(--text-dim);<br /> max-width: 640px;<br /> margin: 0 auto;<br /> line-height: 1.65;<br /> font-weight: 300;<br /> }<br /> <br /> /* Main layout */<br /> .main-grid {<br /> display: grid;<br /> grid-template-columns: 1fr 360px;<br /> gap: 32px;<br /> align-items: start;<br /> animation: fadeUp 0.8s ease-out 0.15s both;<br /> }<br /> <br /> @media (max-width: 960px) {<br /> .main-grid { grid-template-columns: 1fr; }<br /> }<br /> <br /> /* Balance sheet visual */<br /> .bs-visual {<br /> background: var(--surface);<br /> border: 1px solid var(--border);<br /> border-radius: 16px;<br /> padding: 36px;<br /> position: relative;<br /> overflow: hidden;<br /> }<br /> <br /> .bs-visual::before {<br /> content: '';<br /> position: absolute;<br /> top: -1px;<br /> left: 40px;<br /> right: 40px;<br /> height: 1px;<br /> background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);<br /> opacity: 0.4;<br /> }<br /> <br /> .bs-title-row {<br /> display: flex;<br /> justify-content: space-between;<br /> margin-bottom: 28px;<br /> }<br /> <br /> .bs-col-label {<br /> font-family: 'IBM Plex Mono', monospace;<br /> font-size: 11px;<br /> font-weight: 500;<br /> letter-spacing: 2.5px;<br /> text-transform: uppercase;<br /> color: var(--text-muted);<br /> }<br /> <br /> .bs-columns {<br /> display: grid;<br /> grid-template-columns: 1fr 32px 1fr;<br /> gap: 0;<br /> min-height: 520px;<br /> }<br /> <br /> .bs-col {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 3px;<br /> }<br /> <br /> .bs-separator {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> <br /> .bs-separator .line {<br /> width: 1px;<br /> height: 100%;<br /> background: var(--border);<br /> opacity: 0.5;<br /> }<br /> <br /> /* Blocks */<br /> .bs-block {<br /> border-radius: 10px;<br /> padding: 16px 18px;<br /> position: relative;<br /> cursor: pointer;<br /> transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);<br /> overflow: hidden;<br /> display: flex;<br /> flex-direction: column;<br /> justify-content: center;<br /> border: 1px solid transparent;<br /> }<br /> <br /> .bs-block::before {<br /> content: '';<br /> position: absolute;<br /> inset: 0;<br /> opacity: 0.08;<br /> transition: opacity 0.3s ease;<br /> }<br /> <br /> .bs-block:hover {<br /> transform: translateX(3px);<br /> border-color: rgba(255,255,255,0.08);<br /> }<br /> <br /> .bs-block:hover::before { opacity: 0.14; }<br /> <br /> .bs-block.active {<br /> border-color: rgba(255,255,255,0.15);<br /> box-shadow: 0 0 24px rgba(0,0,0,0.3);<br /> transform: scale(1.02);<br /> z-index: 2;<br /> }<br /> <br /> .bs-block .label {<br /> font-size: 13px;<br /> font-weight: 600;<br /> letter-spacing: 0.2px;<br /> margin-bottom: 3px;<br /> position: relative;<br /> }<br /> <br /> .bs-block .sublabel {<br /> font-size: 11px;<br /> opacity: 0.6;<br /> font-weight: 400;<br /> position: relative;<br /> }<br /> <br /> .bs-block .value {<br /> font-family: 'IBM Plex Mono', monospace;<br /> font-size: 15px;<br /> font-weight: 500;<br /> margin-top: 6px;<br /> position: relative;<br /> }<br /> <br /> /* Block specific colors */<br /> .block-assets {<br /> background: rgba(74, 158, 255, 0.12);<br /> border-color: rgba(74, 158, 255, 0.15);<br /> }<br /> .block-assets::before { background: var(--assets-color); }<br /> .block-assets .value { color: var(--assets-color); }<br /> <br /> .block-bel {<br /> background: rgba(251, 146, 60, 0.1);<br /> }<br /> .block-bel::before { background: var(--bel-color); }<br /> .block-bel .value { color: var(--bel-color); }<br /> <br /> .block-rm {<br /> background: rgba(251, 191, 36, 0.1);<br /> }<br /> .block-rm::before { background: var(--rm-color); }<br /> .block-rm .value { color: var(--rm-color); }<br /> <br /> .block-scr {<br /> background: rgba(251, 113, 133, 0.1);<br /> }<br /> .block-scr::before { background: var(--scr-color); }<br /> .block-scr .value { color: var(--scr-color); }<br /> <br /> .block-mcr {<br /> background: rgba(167, 139, 250, 0.1);<br /> }<br /> .block-mcr::before { background: var(--accent-violet); }<br /> .block-mcr .value { color: var(--accent-violet); }<br /> <br /> .block-surplus {<br /> background: rgba(52, 211, 153, 0.1);<br /> }<br /> .block-surplus::before { background: var(--surplus-color); }<br /> .block-surplus .value { color: var(--surplus-color); }<br /> <br /> .block-tp {<br /> background: rgba(245, 158, 66, 0.08);<br /> border-color: rgba(245, 158, 66, 0.12);<br /> }<br /> <br /> .block-of {<br /> background: rgba(34, 211, 238, 0.08);<br /> border-color: rgba(34, 211, 238, 0.12);<br /> }<br /> <br /> /* Bracket annotations */<br /> .bracket-group {<br /> position: absolute;<br /> display: flex;<br /> align-items: center;<br /> pointer-events: none;<br /> }<br /> <br /> /* Connector lines */<br /> .connectors {<br /> position: absolute;<br /> inset: 0;<br /> pointer-events: none;<br /> }<br /> <br /> /* Side panel */<br /> .side-panel {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 20px;<br /> }<br /> <br /> .info-card {<br /> background: var(--surface);<br /> border: 1px solid var(--border);<br /> border-radius: 14px;<br /> padding: 24px;<br /> transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);<br /> }<br /> <br /> .info-card .card-label {<br /> font-family: 'IBM Plex Mono', monospace;<br /> font-size: 10px;<br /> letter-spacing: 2px;<br /> text-transform: uppercase;<br /> color: var(--text-muted);<br /> margin-bottom: 14px;<br /> }<br /> <br /> .info-card h3 {<br /> font-family: 'DM Serif Display', serif;<br /> font-size: 22px;<br /> font-weight: 400;<br /> margin-bottom: 10px;<br /> line-height: 1.3;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .info-card p {<br /> font-size: 13.5px;<br /> line-height: 1.7;<br /> color: var(--text-dim);<br /> font-weight: 300;<br /> }<br /> <br /> .info-card .formula {<br /> margin-top: 14px;<br /> background: rgba(34, 211, 238, 0.06);<br /> border: 1px solid rgba(34, 211, 238, 0.12);<br /> border-radius: 8px;<br /> padding: 12px 16px;<br /> font-family: 'IBM Plex Mono', monospace;<br /> font-size: 12px;<br /> color: var(--accent-cyan);<br /> letter-spacing: 0.3px;<br /> }<br /> <br /> /* Solvency ratio gauge */<br /> .gauge-card {<br /> text-align: center;<br /> padding: 28px 24px;<br /> }<br /> <br /> .gauge-wrapper {<br /> position: relative;<br /> width: 160px;<br /> height: 90px;<br /> margin: 0 auto 16px;<br /> overflow: hidden;<br /> }<br /> <br /> .gauge-bg, .gauge-fill {<br /> position: absolute;<br /> width: 160px;<br /> height: 160px;<br /> border-radius: 50%;<br /> border: 14px solid transparent;<br /> }<br /> <br /> .gauge-bg {<br /> border-top-color: var(--border);<br /> border-left-color: var(--border);<br /> border-right-color: var(--border);<br /> transform: rotate(0deg);<br /> }<br /> <br /> .gauge-fill {<br /> border-top-color: var(--accent-emerald);<br /> border-left-color: var(--accent-emerald);<br /> border-right-color: transparent;<br /> transform: rotate(0deg);<br /> transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);<br /> }<br /> <br /> .gauge-value {<br /> font-family: 'IBM Plex Mono', monospace;<br /> font-size: 28px;<br /> font-weight: 600;<br /> color: var(--accent-emerald);<br /> margin-bottom: 4px;<br /> }<br /> <br /> .gauge-label {<br /> font-size: 12px;<br /> color: var(--text-muted);<br /> font-weight: 500;<br /> }<br /> <br /> .gauge-thresholds {<br /> display: flex;<br /> justify-content: space-between;<br /> margin-top: 12px;<br /> padding: 0 4px;<br /> }<br /> <br /> .gauge-thresholds span {<br /> font-family: 'IBM Plex Mono', monospace;<br /> font-size: 10px;<br /> color: var(--text-muted);<br /> }<br /> <br /> /* Slider controls */<br /> .controls-card {<br /> padding: 24px;<br /> }<br /> <br /> .slider-group {<br /> margin-bottom: 18px;<br /> }<br /> <br /> .slider-group:last-child { margin-bottom: 0; }<br /> <br /> .slider-header {<br /> display: flex;<br /> justify-content: space-between;<br /> align-items: center;<br /> margin-bottom: 8px;<br /> }<br /> <br /> .slider-header label {<br /> font-size: 12.5px;<br /> font-weight: 500;<br /> color: var(--text-dim);<br /> }<br /> <br /> .slider-header .slider-val {<br /> font-family: 'IBM Plex Mono', monospace;<br /> font-size: 12px;<br /> font-weight: 500;<br /> }<br /> <br /> input[type="range"] {<br /> -webkit-appearance: none;<br /> width: 100%;<br /> height: 4px;<br /> border-radius: 2px;<br /> background: var(--border);<br /> outline: none;<br /> cursor: pointer;<br /> }<br /> <br /> input[type="range"]::-webkit-slider-thumb {<br /> -webkit-appearance: none;<br /> width: 16px;<br /> height: 16px;<br /> border-radius: 50%;<br /> background: var(--accent-cyan);<br /> box-shadow: 0 0 10px rgba(34, 211, 238, 0.4);<br /> cursor: pointer;<br /> transition: transform 0.15s ease;<br /> }<br /> <br /> input[type="range"]::-webkit-slider-thumb:hover {<br /> transform: scale(1.2);<br /> }<br /> <br /> /* Legend items below chart */<br /> .legend-strip {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-top: 24px;<br /> }<br /> <br /> .legend-item {<br /> display: flex;<br /> align-items: center;<br /> gap: 6px;<br /> padding: 5px 10px;<br /> background: rgba(255,255,255,0.03);<br /> border: 1px solid var(--border);<br /> border-radius: 6px;<br /> font-size: 11px;<br /> color: var(--text-dim);<br /> cursor: pointer;<br /> transition: all 0.2s ease;<br /> }<br /> <br /> .legend-item:hover {<br /> background: rgba(255,255,255,0.06);<br /> color: var(--text);<br /> }<br /> <br /> .legend-dot {<br /> width: 8px;<br /> height: 8px;<br /> border-radius: 2px;<br /> flex-shrink: 0;<br /> }<br /> <br /> /* Bracket annotations on liabilities side */<br /> .bracket-area {<br /> position: relative;<br /> }<br /> <br /> .bracket-label {<br /> position: absolute;<br /> right: -28px;<br /> writing-mode: vertical-rl;<br /> text-orientation: mixed;<br /> font-family: 'IBM Plex Mono', monospace;<br /> font-size: 10px;<br /> letter-spacing: 1.5px;<br /> text-transform: uppercase;<br /> color: var(--text-muted);<br /> opacity: 0.6;<br /> }<br /> <br /> /* Animations */<br /> @keyframes fadeUp {<br /> from { opacity: 0; transform: translateY(16px); }<br /> to { opacity: 1; transform: translateY(0); }<br /> }<br /> <br /> @keyframes slideIn {<br /> from { opacity: 0; transform: translateX(-8px); }<br /> to { opacity: 1; transform: translateX(0); }<br /> }<br /> <br /> .bs-block {<br /> animation: slideIn 0.5s ease-out both;<br /> }<br /> <br /> .bs-col:first-child .bs-block:nth-child(1) { animation-delay: 0.2s; }<br /> .bs-col:last-child .bs-block:nth-child(1) { animation-delay: 0.3s; }<br /> .bs-col:last-child .bs-block:nth-child(2) { animation-delay: 0.4s; }<br /> .bs-col:last-child .bs-block:nth-child(3) { animation-delay: 0.5s; }<br /> .bs-col:last-child .bs-block:nth-child(4) { animation-delay: 0.6s; }<br /> <br /> /* Tooltip */<br /> .tooltip {<br /> position: fixed;<br /> background: #1e293b;<br /> border: 1px solid var(--border);<br /> border-radius: 8px;<br /> padding: 10px 14px;<br /> font-size: 12px;<br /> color: var(--text);<br /> pointer-events: none;<br /> opacity: 0;<br /> transition: opacity 0.2s ease;<br /> max-width: 220px;<br /> z-index: 100;<br /> box-shadow: 0 8px 32px rgba(0,0,0,0.4);<br /> }<br /> <br /> .tooltip.show { opacity: 1; }<br /> <br /> /* Grouped brackets */<br /> .group-bracket {<br /> position: absolute;<br /> display: flex;<br /> align-items: center;<br /> pointer-events: none;<br /> z-index: 3;<br /> }<br /> <br /> .group-bracket .bracket-line {<br /> width: 2px;<br /> background: currentColor;<br /> border-radius: 1px;<br /> opacity: 0.4;<br /> }<br /> <br /> .group-bracket .bracket-text {<br /> font-family: 'IBM Plex Mono', monospace;<br /> font-size: 10px;<br /> letter-spacing: 1px;<br /> text-transform: uppercase;<br /> writing-mode: vertical-rl;<br /> text-orientation: mixed;<br /> padding: 0 6px;<br /> opacity: 0.5;<br /> }<br /> <br /> /* Flow arrow between assets and liab */<br /> .flow-arrow {<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> justify-content: center;<br /> gap: 4px;<br /> color: var(--text-muted);<br /> font-size: 10px;<br /> font-family: 'IBM Plex Mono', monospace;<br /> }<br /> <br /> .flow-arrow svg {<br /> opacity: 0.3;<br /> }<br /> <br /> /* Small badge */<br /> .tier-badge {<br /> display: inline-block;<br /> padding: 2px 7px;<br /> border-radius: 4px;<br /> font-family: 'IBM Plex Mono', monospace;<br /> font-size: 9px;<br /> font-weight: 600;<br /> letter-spacing: 0.5px;<br /> margin-top: 4px;<br /> }<br /> <br /> .tier-1 { background: rgba(52, 211, 153, 0.15); color: var(--accent-emerald); }<br /> .tier-2 { background: rgba(251, 191, 36, 0.15); color: var(--accent-amber); }<br /> .tier-3 { background: rgba(251, 113, 133, 0.15); color: var(--accent-rose); }<br /> <br /> /* Status bar */<br /> .status-bar {<br /> display: flex;<br /> gap: 24px;<br /> justify-content: center;<br /> margin-top: 16px;<br /> flex-wrap: wrap;<br /> }<br /> <br /> .status-item {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> }<br /> <br /> .status-dot {<br /> width: 6px;<br /> height: 6px;<br /> border-radius: 50%;<br /> }<br /> <br /> .status-dot.green { background: var(--accent-emerald); box-shadow: 0 0 8px rgba(52,211,153,0.5); }<br /> .status-dot.amber { background: var(--accent-amber); box-shadow: 0 0 8px rgba(251,191,36,0.5); }<br /> .status-dot.red { background: var(--accent-rose); box-shadow: 0 0 8px rgba(251,113,133,0.5); }<br /> <br /> .status-item span {<br /> font-size: 11px;<br /> color: var(--text-dim);<br /> font-weight: 500;<br /> }<br /> </style><br /> </head><br /> <body><br /> <div class="container"><br /> <header><br /> <div class="eyebrow">Insurance Regulation Framework</div><br /> <h1>Solvency II Balance Sheet</h1><br /> <p>An interactive breakdown of the market-value balance sheet under the EU Solvency II Directive — explore how assets, technical provisions, and capital requirements interconnect.</p><br /> </header><br /> <br /> <div class="main-grid"><br /> <br /> <div><br /> <div class="bs-visual" id="bsVisual"><br /> <div class="bs-title-row"><br /> <span class="bs-col-label">Assets</span><br /> <span class="bs-col-label">Liabilities & Own Funds</span><br /> </div><br /> <div class="bs-columns" id="bsColumns"><br /> <br /> <div class="bs-col" id="assetsCol"></div><br /> <br /> <div class="bs-separator"><br /> <div class="line"></div><br /> </div><br /> <br /> <div class="bs-col" id="liabCol"></div><br /> </div><br /> <br /> <div class="legend-strip" id="legend"></div><br /> </div><br /> <br /> <div class="status-bar" id="statusBar"></div><br /> </div><br /> <br /> <br /> <div class="side-panel"><br /> <br /> <div class="info-card gauge-card"><br /> <div class="card-label">Solvency Ratio</div><br /> <div class="gauge-value" id="ratioValue">—</div><br /> <div class="gauge-label">Eligible Own Funds / SCR</div><br /> <div class="gauge-thresholds"><br /> <span style="color:var(--accent-rose)">100% min</span><br /> <span style="color:var(--accent-amber)">150%</span><br /> <span style="color:var(--accent-emerald)">200%+</span><br /> </div><br /> <div style="margin-top:14px; height:6px; border-radius:3px; background:var(--border); overflow:hidden;"><br /> <div id="ratioBar" style="height:100%; border-radius:3px; transition: width 0.8s ease, background 0.5s ease;"></div><br /> </div><br /> </div><br /> <br /> <br /> <div class="info-card controls-card"><br /> <div class="card-label">Adjust Values (€ bn)</div><br /> <br /> <div class="slider-group"><br /> <div class="slider-header"><br /> <label>Total Assets</label><br /> <span class="slider-val" id="valAssets" style="color:var(--assets-color)">150</span><br /> </div><br /> <input type="range" id="sliderAssets" min="80" max="250" value="150"><br /> </div><br /> <br /> <div class="slider-group"><br /> <div class="slider-header"><br /> <label>Best Estimate Liabilities</label><br /> <span class="slider-val" id="valBEL" style="color:var(--bel-color)">85</span><br /> </div><br /> <input type="range" id="sliderBEL" min="30" max="180" value="85"><br /> </div><br /> <br /> <div class="slider-group"><br /> <div class="slider-header"><br /> <label>Risk Margin</label><br /> <span class="slider-val" id="valRM" style="color:var(--rm-color)">8</span><br /> </div><br /> <input type="range" id="sliderRM" min="1" max="30" value="8"><br /> </div><br /> <br /> <div class="slider-group"><br /> <div class="slider-header"><br /> <label>SCR</label><br /> <span class="slider-val" id="valSCR" style="color:var(--scr-color)">35</span><br /> </div><br /> <input type="range" id="sliderSCR" min="10" max="80" value="35"><br /> </div><br /> <br /> <div class="slider-group"><br /> <div class="slider-header"><br /> <label>MCR (% of SCR)</label><br /> <span class="slider-val" id="valMCR" style="color:var(--accent-violet)">35%</span><br /> </div><br /> <input type="range" id="sliderMCR" min="20" max="50" value="35"><br /> </div><br /> </div><br /> <br /> <br /> <div class="info-card" id="detailCard"><br /> <div class="card-label">Component Detail</div><br /> <h3 id="detailTitle">Hover over a block</h3><br /> <p id="detailDesc">Click or hover on any component in the balance sheet to see its definition, purpose, and how it connects to other elements.</p><br /> <div class="formula" id="detailFormula" style="display:none;"></div><br /> </div><br /> </div><br /> </div><br /> </div><br /> <br /> <div class="tooltip" id="tooltip"></div><br /> <br /> <script><br /> const data = {<br /> assets: 150,<br /> bel: 85,<br /> rm: 8,<br /> scr: 35,<br /> mcrPct: 35<br /> };<br /> <br /> const descriptions = {<br /> assets: {<br /> title: 'Market Value of Assets',<br /> desc: 'All assets held by the insurer valued at fair (market) value under Solvency II. This includes bonds, equities, property, cash, reinsurance recoverables, and other investments. Market-consistent valuation is a core SII principle.',<br /> formula: null<br /> },<br /> bel: {<br /> title: 'Best Estimate Liabilities (BEL)',<br /> desc: 'The probability-weighted average of future cash flows for insurance obligations, discounted using the relevant risk-free interest rate term structure prescribed by EIOPA. It represents the expected cost of meeting policyholder obligations.',<br /> formula: 'BEL = Σ PV(expected future cash flows)'<br /> },<br /> rm: {<br /> title: 'Risk Margin',<br /> desc: 'An additional amount over the BEL to ensure technical provisions are sufficient. Calculated as the cost of holding eligible own funds equal to the SCR over the lifetime of the obligations, using a prescribed cost-of-capital rate (currently 6%).',<br /> formula: 'RM = CoC × Σ SCR(t) / (1 + r(t))^t'<br /> },<br /> tp: {<br /> title: 'Technical Provisions (TP)',<br /> desc: 'The total value of insurance liabilities — the sum of the Best Estimate Liabilities and the Risk Margin. This represents the full amount the insurer must reserve to meet policyholder obligations.',<br /> formula: 'TP = BEL + Risk Margin'<br /> },<br /> scr: {<br /> title: 'Solvency Capital Requirement',<br /> desc: 'The capital buffer required to absorb significant unforeseen losses over a 1-year period with a 99.5% confidence level (i.e. a 1-in-200 year event). Can be calculated via the Standard Formula or an approved Internal Model.',<br /> formula: 'SCR = VaR₉₉.₅%(Basic Own Funds) over 1 year'<br /> },<br /> mcr: {<br /> title: 'Minimum Capital Requirement',<br /> desc: 'The minimum level of security below which the amount of financial resources should not fall. Breach triggers ultimate supervisory intervention — the insurer\'s license may be withdrawn. Bounded between 25%–45% of SCR.',<br /> formula: 'MCR = max(25% × SCR, min(45% × SCR, linear MCR))'<br /> },<br /> surplus: {<br /> title: 'Free Surplus',<br /> desc: 'Own funds in excess of the SCR — the capital cushion above regulatory requirements. A healthy surplus signals strong financial resilience and may support dividend distributions or growth strategies.',<br /> formula: 'Surplus = Own Funds − SCR'<br /> },<br /> ownfunds: {<br /> title: 'Eligible Own Funds',<br /> desc: 'Total own funds available to cover the SCR and MCR. Classified into Tier 1 (highest quality — equity, retained earnings), Tier 2 (subordinated debt), and Tier 3 (limited eligibility). Tiering limits apply when covering SCR/MCR.',<br /> formula: 'Own Funds = Assets − Technical Provisions'<br /> }<br /> };<br /> <br /> const legendItems = [<br /> { id: 'assets', label: 'Assets', color: 'var(--assets-color)' },<br /> { id: 'bel', label: 'BEL', color: 'var(--bel-color)' },<br /> { id: 'rm', label: 'Risk Margin', color: 'var(--rm-color)' },<br /> { id: 'scr', label: 'SCR', color: 'var(--scr-color)' },<br /> { id: 'mcr', label: 'MCR', color: 'var(--accent-violet)' },<br /> { id: 'surplus', label: 'Surplus', color: 'var(--surplus-color)' },<br /> ];<br /> <br /> function compute() {<br /> const tp = data.bel + data.rm;<br /> const ownFunds = Math.max(0, data.assets - tp);<br /> const mcr = Math.round(data.scr * data.mcrPct / 100);<br /> const surplus = Math.max(0, ownFunds - data.scr);<br /> const ratio = data.scr > 0 ? (ownFunds / data.scr * 100) : 0;<br /> return { tp, ownFunds, mcr, surplus, ratio };<br /> }<br /> <br /> function render() {<br /> const { tp, ownFunds, mcr, surplus, ratio } = compute();<br /> const total = data.assets;<br /> const totalLiab = tp + data.scr + Math.max(0, surplus);<br /> <br /> // Height proportions (use asset total as reference)<br /> const ref = Math.max(total, totalLiab, 1);<br /> const totalH = 480;<br /> const pxPer = totalH / ref;<br /> <br /> // Assets column<br /> const assetsCol = document.getElementById('assetsCol');<br /> assetsCol.innerHTML = '';<br /> <br /> const assetBlock = makeBlock('assets', 'block-assets', 'Total Assets', `Market value`, `€${data.assets}bn`, totalH);<br /> assetsCol.appendChild(assetBlock);<br /> <br /> // Liabilities column<br /> const liabCol = document.getElementById('liabCol');<br /> liabCol.innerHTML = '';<br /> <br /> // BEL<br /> const belH = Math.max(32, data.bel * pxPer);<br /> liabCol.appendChild(makeBlock('bel', 'block-bel', 'Best Estimate Liabilities', 'Discounted expected cash flows', `€${data.bel}bn`, belH));<br /> <br /> // Risk Margin<br /> const rmH = Math.max(28, data.rm * pxPer);<br /> liabCol.appendChild(makeBlock('rm', 'block-rm', 'Risk Margin', 'Cost-of-capital provision', `€${data.rm}bn`, rmH));<br /> <br /> // SCR (show MCR within)<br /> const scrH = Math.max(40, data.scr * pxPer);<br /> const scrBlock = makeBlock('scr', 'block-scr', 'SCR', `Solvency Capital Req.`, `€${data.scr}bn`, scrH);<br /> // MCR badge inside SCR<br /> const mcrBadge = document.createElement('div');<br /> mcrBadge.className = 'tier-badge tier-3';<br /> mcrBadge.textContent = `MCR €${mcr}bn`;<br /> mcrBadge.style.position = 'relative';<br /> mcrBadge.style.cursor = 'pointer';<br /> mcrBadge.dataset.block = 'mcr';<br /> scrBlock.appendChild(mcrBadge);<br /> liabCol.appendChild(scrBlock);<br /> <br /> // Surplus<br /> if (surplus > 0) {<br /> const surpH = Math.max(28, surplus * pxPer);<br /> liabCol.appendChild(makeBlock('surplus', 'block-surplus', 'Free Surplus', 'Excess own funds', `€${surplus}bn`, surpH));<br /> } else if (ownFunds < data.scr) {<br /> const deficitH = 32;<br /> const defBlock = makeBlock('surplus', 'block-scr', 'Capital Shortfall', 'Own funds < SCR', `€${Math.round(data.scr - ownFunds)}bn deficit`, deficitH);<br /> defBlock.style.border = '1px dashed var(--accent-rose)';<br /> liabCol.appendChild(defBlock);<br /> }<br /> <br /> // Ratio bar<br /> const rVal = document.getElementById('ratioValue');<br /> const rBar = document.getElementById('ratioBar');<br /> rVal.textContent = `${Math.round(ratio)}%`;<br /> const barW = Math.min(100, ratio / 3);<br /> rBar.style.width = barW + '%';<br /> if (ratio >= 150) {<br /> rVal.style.color = 'var(--accent-emerald)';<br /> rBar.style.background = 'var(--accent-emerald)';<br /> } else if (ratio >= 100) {<br /> rVal.style.color = 'var(--accent-amber)';<br /> rBar.style.background = 'var(--accent-amber)';<br /> } else {<br /> rVal.style.color = 'var(--accent-rose)';<br /> rBar.style.background = 'var(--accent-rose)';<br /> }<br /> <br /> // Status bar<br /> const sb = document.getElementById('statusBar');<br /> const scrStatus = ownFunds >= data.scr;<br /> const mcrStatus = ownFunds >= mcr;<br /> sb.innerHTML = `<br /> <div class="status-item"><br /> <div class="status-dot ${scrStatus ? 'green' : 'red'}"></div><br /> <span>SCR ${scrStatus ? 'Covered' : 'Breached'}</span><br /> </div><br /> <div class="status-item"><br /> <div class="status-dot ${mcrStatus ? 'green' : 'red'}"></div><br /> <span>MCR ${mcrStatus ? 'Covered' : 'Breached'}</span><br /> </div><br /> <div class="status-item"><br /> <div class="status-dot ${ratio >= 150 ? 'green' : ratio >= 100 ? 'amber' : 'red'}"></div><br /> <span>Ratio: ${Math.round(ratio)}%</span><br /> </div><br /> <div class="status-item" style="cursor:pointer;" onclick="showDetail('ownfunds')"><br /> <div class="status-dot" style="background:var(--accent-cyan);box-shadow:0 0 8px rgba(34,211,238,0.5);"></div><br /> <span>Own Funds: €${Math.round(ownFunds)}bn</span><br /> </div><br /> `;<br /> <br /> // Legend<br /> const legend = document.getElementById('legend');<br /> legend.innerHTML = '';<br /> legendItems.forEach(l => {<br /> const li = document.createElement('div');<br /> li.className = 'legend-item';<br /> li.innerHTML = `<span class="legend-dot" style="background:${l.color}"></span>${l.label}`;<br /> li.onclick = () => showDetail(l.id);<br /> legend.appendChild(li);<br /> });<br /> // Add TP and Own Funds to legend<br /> [{ id: 'tp', label: 'Tech. Provisions', color: 'var(--tp-color)' },<br /> { id: 'ownfunds', label: 'Own Funds', color: 'var(--own-funds-color)' }<br /> ].forEach(l => {<br /> const li = document.createElement('div');<br /> li.className = 'legend-item';<br /> li.innerHTML = `<span class="legend-dot" style="background:${l.color}"></span>${l.label}`;<br /> li.onclick = () => showDetail(l.id);<br /> legend.appendChild(li);<br /> });<br /> }<br /> <br /> function makeBlock(id, cls, label, sublabel, value, height) {<br /> const el = document.createElement('div');<br /> el.className = `bs-block ${cls}`;<br /> el.style.height = height + 'px';<br /> el.dataset.block = id;<br /> el.innerHTML = `<br /> <div class="label">${label}</div><br /> ${height > 40 ? `<div class="sublabel">${sublabel}</div>` : ''}<br /> <div class="value">${value}</div><br /> `;<br /> el.addEventListener('mouseenter', () => showDetail(id));<br /> el.addEventListener('click', () => showDetail(id));<br /> return el;<br /> }<br /> <br /> function showDetail(id) {<br /> const info = descriptions[id];<br /> if (!info) return;<br /> document.getElementById('detailTitle').textContent = info.title;<br /> document.getElementById('detailDesc').textContent = info.desc;<br /> const fEl = document.getElementById('detailFormula');<br /> if (info.formula) {<br /> fEl.style.display = 'block';<br /> fEl.textContent = info.formula;<br /> } else {<br /> fEl.style.display = 'none';<br /> }<br /> <br /> // Highlight active block<br /> document.querySelectorAll('.bs-block').forEach(b => b.classList.remove('active'));<br /> document.querySelectorAll(`.bs-block[data-block="${id}"]`).forEach(b => b.classList.add('active'));<br /> }<br /> <br /> // Slider bindings<br /> function bindSlider(sliderId, valId, key, suffix = '') {<br /> const slider = document.getElementById(sliderId);<br /> const valEl = document.getElementById(valId);<br /> slider.addEventListener('input', () => {<br /> const v = parseInt(slider.value);<br /> data[key] = v;<br /> valEl.textContent = suffix ? v + suffix : v;<br /> render();<br /> });<br /> }<br /> <br /> bindSlider('sliderAssets', 'valAssets', 'assets');<br /> bindSlider('sliderBEL', 'valBEL', 'bel');<br /> bindSlider('sliderRM', 'valRM', 'rm');<br /> bindSlider('sliderSCR', 'valSCR', 'scr');<br /> bindSlider('sliderMCR', 'valMCR', 'mcrPct', '%');<br /> <br /> // Initial render<br /> render();<br /> </script><br /> </body><br /> </html></div>

Wikilah admin