Content deleted Content added

Inline

Revision as of 10:01, 31 March 2026

<!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> <style>

 :root {
   --bg: #ffffff;
   --surface: #f8f9fa;
   --surface2: #eaecf0;
   --border: #a2a9b1;
   --border-heavy: #202122;
   --text: #202122;
   --text-dim: #54595d;
   --text-muted: #72777d;
   --link: #000099;

   /* Monochrome block palette — dark-to-light for visual hierarchy */
   --assets-fill: #202122;
   --bel-fill: #54595d;
   --rm-fill: #72777d;
   --scr-fill: #a2a9b1;
   --mcr-fill: #c8ccd1;
   --surplus-fill: #eaecf0;
 }

 * { margin: 0; padding: 0; box-sizing: border-box; }

 body {
   background: var(--bg);
   color: var(--text);
   font-family: sans-serif;
   line-height: 1.6;
   -webkit-font-smoothing: auto;
 }

 .container {
   max-width: 900px;
   margin: 0 auto;
   padding: 24px 16px 60px;
 }

 /* ---- Header ---- */
 header {
   border-bottom: 2px solid var(--border-heavy);
   padding-bottom: 10px;
   margin-bottom: 20px;
 }

 header h1 {
   font-size: 1.8em;
   font-weight: bold;
   color: var(--text);
   line-height: 1.25;
   margin: 0;
 }

 header p {
   font-size: 0.88em;
   color: var(--text-dim);
   margin-top: 4px;
   line-height: 1.6;
 }

 /* ---- Two-column master layout ---- */
 .main-grid {
   display: grid;
   grid-template-columns: 1fr 300px;
   gap: 24px;
   align-items: start;
 }
 @media (max-width: 760px) {
   .main-grid { grid-template-columns: 1fr; }
 }

 /* ---- Balance-sheet visual ---- */
 .bs-visual {
   border: 1px solid var(--border);
   background: var(--bg);
   padding: 20px 24px 16px;
 }

 .bs-title-row {
   display: flex;
   justify-content: space-between;
   margin-bottom: 14px;
 }

 .bs-col-label {
   font-size: 0.78em;
   font-weight: bold;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--text-muted);
 }

 .bs-columns {
   display: grid;
   grid-template-columns: 1fr 24px 1fr;
   min-height: 480px;
 }

 .bs-col {
   display: flex;
   flex-direction: column;
   gap: 2px;
 }

 .bs-separator {
   display: flex;
   align-items: stretch;
   justify-content: center;
 }
 .bs-separator .line {
   width: 1px;
   background: var(--border);
 }

 /* ---- Blocks ---- */
 .bs-block {
   padding: 12px 14px;
   position: relative;
   cursor: pointer;
   transition: background 0.2s ease, box-shadow 0.2s ease;
   display: flex;
   flex-direction: column;
   justify-content: center;
   border: 1px solid transparent;
   color: #fff;
 }

 .bs-block .label {
   font-size: 0.82em;
   font-weight: bold;
   line-height: 1.3;
 }
 .bs-block .sublabel {
   font-size: 0.72em;
   opacity: 0.75;
   margin-top: 1px;
 }
 .bs-block .value {
   font-size: 0.88em;
   font-weight: bold;
   margin-top: 4px;
   font-variant-numeric: tabular-nums;
 }

 .bs-block:hover {
   box-shadow: 0 0 0 2px var(--border-heavy);
   z-index: 2;
 }
 .bs-block.active {
   box-shadow: 0 0 0 2.5px var(--border-heavy);
   z-index: 3;
 }

 /* Individual block fills */
 .block-assets  { background: var(--assets-fill); }
 .block-bel     { background: var(--bel-fill); }
 .block-rm      { background: var(--rm-fill); }
 .block-scr     { background: var(--scr-fill); color: var(--text); }
 .block-mcr     { background: var(--mcr-fill); color: var(--text); }
 .block-surplus  { background: var(--surplus-fill); color: var(--text); border: 1px solid var(--border); }

 /* ---- Legend ---- */
 .legend-strip {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
   margin-top: 16px;
   border-top: 1px solid var(--border);
   padding-top: 12px;
 }
 .legend-item {
   display: flex;
   align-items: center;
   gap: 5px;
   padding: 3px 8px;
   font-size: 0.75em;
   color: var(--text-dim);
   cursor: pointer;
   border: 1px solid transparent;
   border-radius: 2px;
   transition: border-color 0.15s ease;
 }
 .legend-item:hover { border-color: var(--border); }
 .legend-dot {
   width: 10px; height: 10px;
   border-radius: 1px;
   flex-shrink: 0;
 }

 /* ---- Status bar ---- */
 .status-bar {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
   margin-top: 12px;
   font-size: 0.8em;
   color: var(--text-dim);
 }
 .status-item {
   display: flex;
   align-items: center;
   gap: 6px;
 }
 .status-dot {
   width: 7px; height: 7px;
   border-radius: 50%;
   flex-shrink: 0;
 }
 .status-dot.ok   { background: var(--text); }
 .status-dot.warn { background: var(--text-muted); }
 .status-dot.fail { border: 2px solid var(--text); background: transparent; }

 /* ---- Side panel ---- */
 .side-panel {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }

 .info-card {
   border: 1px solid var(--border);
   background: var(--bg);
   padding: 16px 18px;
 }

 .card-label {
   font-size: 0.7em;
   font-weight: bold;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-muted);
   margin-bottom: 10px;
 }

 /* ---- Gauge ---- */
 .gauge-card { text-align: center; padding: 18px; }

 .gauge-value {
   font-size: 2em;
   font-weight: bold;
   color: var(--text);
   line-height: 1.1;
 }
 .gauge-label {
   font-size: 0.78em;
   color: var(--text-muted);
   margin-top: 2px;
 }
 .gauge-bar-track {
   margin-top: 14px;
   height: 6px;
   background: var(--surface2);
   border-radius: 3px;
   overflow: hidden;
 }
 .gauge-bar-fill {
   height: 100%;
   border-radius: 3px;
   background: var(--text);
   transition: width 0.6s ease;
 }
 .gauge-thresholds {
   display: flex;
   justify-content: space-between;
   margin-top: 6px;
   font-size: 0.68em;
   color: var(--text-muted);
 }

 /* ---- Sliders ---- */
 .slider-group { margin-bottom: 14px; }
 .slider-group:last-child { margin-bottom: 0; }
 .slider-header {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   margin-bottom: 5px;
 }
 .slider-header label {
   font-size: 0.8em;
   color: var(--text-dim);
 }
 .slider-val {
   font-size: 0.8em;
   font-weight: bold;
   color: var(--text);
   font-variant-numeric: tabular-nums;
 }

 input[type="range"] {
   -webkit-appearance: none;
   width: 100%;
   height: 3px;
   background: var(--surface2);
   border-radius: 2px;
   outline: none;
   cursor: pointer;
 }
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 14px; height: 14px;
   border-radius: 50%;
   background: var(--text);
   cursor: pointer;
   border: 2px solid #fff;
   box-shadow: 0 0 0 1px var(--border);
 }
 input[type="range"]::-moz-range-thumb {
   width: 14px; height: 14px;
   border-radius: 50%;
   background: var(--text);
   cursor: pointer;
   border: 2px solid #fff;
   box-shadow: 0 0 0 1px var(--border);
 }

 /* ---- Detail card ---- */
 .info-card h3 {
   font-size: 1.05em;
   font-weight: bold;
   color: var(--text);
   margin-bottom: 6px;
   line-height: 1.3;
 }
 .info-card p {
   font-size: 0.84em;
   color: var(--text-dim);
   line-height: 1.6;
 }
 .formula {
   margin-top: 10px;
   padding: 8px 12px;
   background: var(--surface);
   border: 1px solid var(--surface2);
   font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
   font-size: 0.88em;
   color: var(--text);
   letter-spacing: 0.01em;
 }

 /* ---- MCR badge inside SCR ---- */
 .tier-badge {
   display: inline-block;
   padding: 1px 6px;
   border-radius: 2px;
   font-size: 0.72em;
   font-weight: bold;
   margin-top: 3px;
   background: rgba(255,255,255,0.18);
   color: inherit;
   cursor: pointer;
 }
 .block-scr .tier-badge { background: rgba(0,0,0,0.08); }

 /* ---- Deficit block ---- */
 .block-deficit {
   background: #fff;
   border: 2px dashed var(--text);
   color: var(--text);
 }

 /* ---- Print ---- */
 @media print {
   .side-panel { display: none; }
   .main-grid { grid-template-columns: 1fr; }
   .container { padding: 0; }
   .bs-visual { border: 1px solid #000; }
 }

</style> </head> <body>

 <header>

Solvency II Balance Sheet

Interactive breakdown of the market-value balance sheet under the EU Solvency II Directive. Adjust the sliders and click any block to explore how assets, technical provisions, and capital requirements interconnect.

 </header>

         Assets
         Liabilities & Own Funds

Solvency Ratio

—

Eligible Own Funds / SCR

Adjust Values (€ bn)

           <label>Total Assets</label>
           150

         <input type="range" id="sliderAssets" min="80" max="250" value="150">

           <label>Best Estimate Liabilities</label>
           85

         <input type="range" id="sliderBEL" min="30" max="180" value="85">

           <label>Risk Margin</label>
           8

         <input type="range" id="sliderRM" min="1" max="30" value="8">

           <label>SCR</label>
           35

         <input type="range" id="sliderSCR" min="10" max="80" value="35">

           <label>MCR (% of SCR)</label>
           35%

         <input type="range" id="sliderMCR" min="20" max="50" value="35">

Component Detail

Select a component

Click or hover on any block in the balance sheet to see its definition, purpose, and relationship to other elements.

const descriptions = {

 assets: {
   title: 'Market Value of Assets',
   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.',
   formula: null
 },
 bel: {
   title: 'Best Estimate Liabilities (BEL)',
   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.',
   formula: 'BEL = \u03A3 PV(expected future cash flows)'
 },
 rm: {
   title: 'Risk Margin',
   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%).',
   formula: 'RM = CoC \u00D7 \u03A3 SCR(t) / (1 + r(t))^t'
 },
 tp: {
   title: 'Technical Provisions (TP)',
   desc: 'The total value of insurance liabilities \u2014 the sum of the Best Estimate Liabilities and the Risk Margin. This represents the full amount the insurer must reserve to meet policyholder obligations.',
   formula: 'TP = BEL + Risk Margin'
 },
 scr: {
   title: 'Solvency Capital Requirement',
   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.',
   formula: 'SCR = VaR\u2089\u2089.\u2085%(Basic Own Funds) over 1 year'
 },
 mcr: {
   title: 'Minimum Capital Requirement',
   desc: 'The minimum level of security below which financial resources should not fall. Breach triggers ultimate supervisory intervention \u2014 the insurer\u2019s licence may be withdrawn. Bounded between 25\u201345% of SCR.',
   formula: 'MCR = max(25% \u00D7 SCR, min(45% \u00D7 SCR, linear MCR))'
 },
 surplus: {
   title: 'Free Surplus',
   desc: 'Own funds in excess of the SCR \u2014 the capital cushion above regulatory requirements. A healthy surplus signals strong financial resilience and may support dividend distributions or growth strategies.',
   formula: 'Surplus = Own Funds \u2212 SCR'
 },
 ownfunds: {
   title: 'Eligible Own Funds',
   desc: 'Total own funds available to cover the SCR and MCR. Classified into Tier 1 (highest quality \u2014 equity, retained earnings), Tier 2 (subordinated debt), and Tier 3 (limited eligibility). Tiering limits apply when covering SCR/MCR.',
   formula: 'Own Funds = Assets \u2212 Technical Provisions'
 }

};

const legendItems = [

 { id: 'assets',   label: 'Assets',       color: 'var(--assets-fill)' },
 { id: 'bel',      label: 'BEL',          color: 'var(--bel-fill)' },
 { id: 'rm',       label: 'Risk Margin',   color: 'var(--rm-fill)' },
 { id: 'scr',      label: 'SCR',           color: 'var(--scr-fill)' },
 { id: 'surplus',  label: 'Surplus',       color: 'var(--surplus-fill)' },
 { id: 'tp',       label: 'Tech. Prov.',   color: '#72777d' },
 { id: 'ownfunds', label: 'Own Funds',     color: '#c8ccd1' },

];

function compute() {

 const tp = data.bel + data.rm;
 const ownFunds = Math.max(0, data.assets - tp);
 const mcr = Math.round(data.scr * data.mcrPct / 100);
 const surplus = Math.max(0, ownFunds - data.scr);
 const ratio = data.scr > 0 ? (ownFunds / data.scr * 100) : 0;
 return { tp, ownFunds, mcr, surplus, ratio };

}

function render() {

 const { tp, ownFunds, mcr, surplus, ratio } = compute();
 const total = data.assets;
 const totalLiab = tp + data.scr + Math.max(0, surplus);
 const ref = Math.max(total, totalLiab, 1);
 const totalH = 480;
 const pxPer = totalH / ref;

 // Assets
 const ac = document.getElementById('assetsCol');
 ac.innerHTML = ;
 ac.appendChild(makeBlock('assets', 'block-assets', 'Total Assets', 'Market value', '\u20AC' + data.assets + 'bn', totalH));

 // Liabilities
 const lc = document.getElementById('liabCol');
 lc.innerHTML = ;

 const belH = Math.max(32, data.bel * pxPer);
 lc.appendChild(makeBlock('bel', 'block-bel', 'Best Estimate Liabilities', 'Discounted expected cash flows', '\u20AC' + data.bel + 'bn', belH));

 const rmH = Math.max(26, data.rm * pxPer);
 lc.appendChild(makeBlock('rm', 'block-rm', 'Risk Margin', 'Cost-of-capital provision', '\u20AC' + data.rm + 'bn', rmH));

 const scrH = Math.max(40, data.scr * pxPer);
 const scrBlock = makeBlock('scr', 'block-scr', 'SCR', 'Solvency Capital Req.', '\u20AC' + data.scr + 'bn', scrH);
 const mcrBadge = document.createElement('div');
 mcrBadge.className = 'tier-badge';
 mcrBadge.textContent = 'MCR \u20AC' + mcr + 'bn';
 mcrBadge.style.cursor = 'pointer';
 mcrBadge.dataset.block = 'mcr';
 mcrBadge.addEventListener('click', function(e) { e.stopPropagation(); showDetail('mcr'); });
 scrBlock.appendChild(mcrBadge);
 lc.appendChild(scrBlock);

 if (surplus > 0) {
   const surpH = Math.max(26, surplus * pxPer);
   lc.appendChild(makeBlock('surplus', 'block-surplus', 'Free Surplus', 'Excess own funds', '\u20AC' + surplus + 'bn', surpH));
 } else if (ownFunds < data.scr) {
   const defBlock = makeBlock('surplus', 'block-deficit', 'Capital Shortfall', 'Own funds < SCR', '\u20AC' + Math.round(data.scr - ownFunds) + 'bn deficit', 32);
   lc.appendChild(defBlock);
 }

 // Ratio
 var rVal = document.getElementById('ratioValue');
 var rBar = document.getElementById('ratioBar');
 rVal.textContent = Math.round(ratio) + '%';
 rBar.style.width = Math.min(100, ratio / 3) + '%';
 rBar.style.opacity = ratio < 100 ? '0.35' : '1';

 // Status
 var sb = document.getElementById('statusBar');
 var scrOk = ownFunds >= data.scr;
 var mcrOk = ownFunds >= mcr;
 sb.innerHTML =

'

SCR ' + (scrOk ? 'covered' : 'breached') + '

' + '

MCR ' + (mcrOk ? 'covered' : 'breached') + '

' + '

= 150 ? 'ok' : ratio >= 100 ? 'warn' : 'fail') + '">

Ratio: ' + Math.round(ratio) + '%

' + '

Own Funds: \u20AC' + Math.round(ownFunds) + 'bn

';

 // Legend
 var lg = document.getElementById('legend');
 lg.innerHTML = ;
 legendItems.forEach(function(l) {
   var el = document.createElement('div');
   el.className = 'legend-item';
   el.innerHTML = '' + l.label;
   el.onclick = function() { showDetail(l.id); };
   lg.appendChild(el);
 });

}

function makeBlock(id, cls, label, sublabel, value, height) {

 var el = document.createElement('div');
 el.className = 'bs-block ' + cls;
 el.style.height = height + 'px';
 el.dataset.block = id;
 el.innerHTML =

'

' + label + '

' + (height > 38 ? '

' + sublabel + '

' : ) + '

' + value + '

';

 el.addEventListener('mouseenter', function() { showDetail(id); });
 el.addEventListener('click', function() { showDetail(id); });
 return el;

}

function showDetail(id) {

 var info = descriptions[id];
 if (!info) return;
 document.getElementById('detailTitle').textContent = info.title;
 document.getElementById('detailDesc').textContent = info.desc;
 var fEl = document.getElementById('detailFormula');
 if (info.formula) { fEl.style.display = 'block'; fEl.textContent = info.formula; }
 else { fEl.style.display = 'none'; }
 document.querySelectorAll('.bs-block').forEach(function(b) { b.classList.remove('active'); });
 document.querySelectorAll('.bs-block[data-block="' + id + '"]').forEach(function(b) { b.classList.add('active'); });

}

function bindSlider(sid, vid, key, suffix) {

 var s = document.getElementById(sid);
 var v = document.getElementById(vid);
 s.addEventListener('input', function() {
   data[key] = parseInt(s.value);
   v.textContent = suffix ? s.value + suffix : s.value;
   render();
 });

}

bindSlider('sliderAssets', 'valAssets', 'assets', ); bindSlider('sliderBEL', 'valBEL', 'bel', ); bindSlider('sliderRM', 'valRM', 'rm', ); bindSlider('sliderSCR', 'valSCR', 'scr', ); bindSlider('sliderMCR', 'valMCR', 'mcrPct', '%');

render(); </script> </body> </html>