/* What the price models (11 to 14 and 23) draw: the answer, the identity of a rate, the statistics, the
   gaps, a chart and the explanation. The classes are the model's own (pr-*), written in the same language
   as the profile pages (sections, hairline tables, small grey captions), so the blocks look native on a
   profile and stand on their own on the rate board. It depends on the colour variables of style.css. */
.pr-profile{margin:0 0 8px}
.pr-profile .pr-sec:first-child{margin-top:0}
.pr-num{unicode-bidi:isolate;font-variant-numeric:tabular-nums}

/* ---- a section ---- */
.pr-sec{margin:56px 0 0;min-width:0}
.pr-sec-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px 24px;margin-bottom:24px}
.pr-sec-head h2{margin:0;font-size:28px;font-weight:600;line-height:1.6;letter-spacing:0;color:var(--ink)}
.pr-sec-head>div>p:first-child{margin:0 0 4px;font-size:11px;line-height:1.8;color:var(--muted)}
.pr-sec-head>div>p:not(:first-child){max-width:76ch;margin:8px 0 0;font-size:13px;line-height:1.9;color:var(--muted)}
.pr-para{max-width:76ch;margin:0 0 12px;font-size:14.5px;line-height:2.1;color:var(--text)}
.pr-note{max-width:100ch;margin:12px 0 0;font-size:11.5px;line-height:1.95;color:var(--muted)}

/* ---- the answer ---- */
.pr-lead{max-width:70ch;margin:0 0 14px;font-size:20px;line-height:2.05;color:var(--ink)}
.pr-lead b{font-weight:600}
.pr-extra{max-width:76ch;margin:0 0 8px;font-size:15px;line-height:2.05;color:var(--ink)}
.pr-state{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:0 0 8px;font-size:13px;line-height:1.95;color:var(--text)}
.pr-state .quote-quality{display:inline-flex;align-items:center;gap:7px;padding:3px 11px;border:1px solid var(--line-strong);border-radius:999px;font-size:12.5px;line-height:1.8;color:var(--ink);white-space:nowrap}
.pr-state .quote-quality::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--faint)}
.pr-state .quote-quality.fresh::before{background:var(--up)}
.pr-state .quote-quality.delayed,.pr-state .quote-quality.stale{color:var(--stale)}
.pr-state .quote-quality.delayed::before,.pr-state .quote-quality.stale::before{background:var(--stale)}
.pr-activity{margin:0;font-size:13px;line-height:1.95;color:var(--muted)}

/* ---- facts ---- */
.pr-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;margin:0}
.pr-facts>div{min-width:0;padding:15px 0;border-bottom:1px solid var(--line)}
.pr-facts dt{font-size:11.5px;line-height:1.8;color:var(--muted)}
.pr-facts dd{margin:4px 0 0;font-size:15.5px;line-height:1.9;color:var(--ink);overflow-wrap:anywhere}
.pr-facts dd a{color:var(--ink)}
.pr-facts dd small{display:block;margin-top:4px;font-size:12px;line-height:1.95;color:var(--muted)}

/* ---- links ---- */
.pr-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;margin:18px 0 0;font-size:13px;line-height:1.9}
.pr-links>span{color:var(--muted)}
.pr-links a{display:inline-flex;align-items:center;gap:6px;min-height:36px;color:var(--ink);border-bottom:1px solid var(--line-strong)}
.pr-links a:hover{color:var(--brand);border-bottom-color:var(--brand)}

/* ---- tables ---- */
.pr-scroll{max-width:100%;padding-bottom:4px;overflow-x:auto;scrollbar-width:thin}
.pr-data{width:100%;min-width:520px;border-collapse:collapse;font-size:14px}
.pr-data.c2,.pr-data.c3,.pr-data.c4{min-width:0}
.pr-data th,.pr-data td{padding:16px 14px;border-bottom:1px solid var(--line);text-align:start;vertical-align:middle;white-space:nowrap}
.pr-data th:first-child{padding-inline-start:0}
.pr-data td:last-child,.pr-data th:last-child{padding-inline-end:0}
.pr-data thead th{padding-top:12px;padding-bottom:12px;font-size:11.5px;font-weight:400;color:var(--muted);background:var(--bg)}
.pr-data tbody th{min-width:140px;font-size:13px;font-weight:500;color:var(--text);white-space:normal}
.pr-data td{font-size:15px;font-weight:500;color:var(--ink)}
.pr-data small{display:block;margin-top:2px;font-size:11px;font-weight:400;line-height:1.7;color:var(--muted)}
.pr-data td.pr-muted{font-size:12.5px;font-weight:400;color:var(--muted)}
.pr-data td.pr-aside{min-width:150px;font-size:12.5px;font-weight:400;color:var(--muted);white-space:normal}
.pr-data tr.pr-total th,.pr-data tr.pr-total td{background:var(--surface-2);font-weight:600}
.pr-data a{color:var(--ink);border-bottom:1px solid var(--line-strong)}
.pr-data a:hover{color:var(--brand)}
.pr-fold{margin:0}
.pr-fold>summary{display:flex;align-items:center;min-height:44px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.pr-fold[open]>summary{margin-bottom:10px}

/* ---- a chart ---- */
.pr-chart{margin:8px 0 0}
.pr-chart-box svg{display:block;width:100%;height:auto}
.pr-chart .pr-n{display:none}
.pr-chart .grid line{stroke:var(--line);stroke-width:1}
.pr-chart text{fill:var(--muted);font-size:11px}
.pr-chart .xl text{font-size:11px}
.pr-chart .line{fill:none;stroke:var(--brand);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.pr-chart .base{stroke:var(--line-strong);stroke-width:1.2;stroke-dasharray:5 4}
.pr-chart .miss{stroke:var(--stale);stroke-width:1.6;opacity:.75}
.pr-chart .bl,.pr-chart .ptl{paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.pr-chart .pt{fill:var(--bg);stroke:var(--brand);stroke-width:2}
.pr-chart .ptl{fill:var(--ink);font-size:11.5px;font-weight:600}
.pr-chart figcaption{max-width:100ch;margin-top:10px;font-size:11.5px;line-height:1.95;color:var(--muted)}

/* ---- a bar list: the length is the share relative to the longest, the number beside it is the real one ---- */
.pr-bars{margin:18px 0 0}
.pr-bars ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.pr-bars li{display:grid;grid-template-columns:minmax(96px,170px) minmax(0,1fr) 72px;align-items:center;gap:12px;font-size:13.5px}
.pr-bar-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.pr-bar{display:block;width:100%;height:10px;border-radius:5px}
.pr-bar-bg{fill:var(--surface-2)}
.pr-bar-v{fill:var(--brand)}
.pr-bars .pr-num{text-align:end;color:var(--ink);font-weight:600}
.pr-bars figcaption{max-width:100ch;margin-top:10px;font-size:11.5px;line-height:1.95;color:var(--muted)}

@media(max-width:800px){
 .pr-data.c2 th,.pr-data.c2 td,.pr-data.c3 th,.pr-data.c3 td,.pr-data.c4 th,.pr-data.c4 td{padding:12px 6px;white-space:normal}
 .pr-data.c3 td,.pr-data.c4 td{font-size:13.5px}
 .pr-sec{margin-top:44px}
 .pr-sec-head h2{font-size:24px}
 .pr-lead{font-size:18px}
 .pr-facts{grid-template-columns:minmax(0,1fr)}
 .pr-bars li{grid-template-columns:minmax(0,1fr) 64px;row-gap:4px}
 .pr-bars .pr-bar-l{grid-column:1/-1}
 .pr-bars .pr-bar{grid-column:1}
 .pr-chart .pr-w{display:none}
 .pr-chart .pr-n{display:block}
}
