/* ============================================================
   DataStream - IFRS 9 ECL Engine
   Module-specific styles (loaded after style.css)
   DataStream
   ============================================================ */

/* ---------- Stage pills ---------- */
.stage{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:7px;white-space:nowrap}
.stage--1{background:#e7f6ee;color:#1f7d47}
.stage--2{background:#fdf3dd;color:#a8730a}
.stage--3{background:#fbe6e6;color:#b32626}
.stage--poci{background:#efe9fb;color:#5a3fa8}

/* ---------- Run status ---------- */
.rstat{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.rstat::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 8px}
.rstat--done{color:var(--ok)}
.rstat--run{color:var(--primary-dark)}
.rstat--fail{color:var(--danger)}
.rstat--draft{color:var(--muted)}
.rstat--wait{color:var(--warn)}
.rstat--run::before{animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- Pipeline / step tracker ---------- */
.pipe{display:flex;flex-wrap:wrap}
.pipe__step{flex:1;min-width:118px;padding:12px 14px;border:1px solid var(--line);border-right:0;background:var(--white)}
.pipe__step:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.pipe__step:last-child{border-right:1px solid var(--line);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.pipe__step.done{background:#f2fbf6;border-color:#cfeadd}
.pipe__step.active{background:var(--primary-ultra-light);border-color:var(--primary-light)}
.pipe__n{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pipe__t{font-size:12.5px;font-weight:600;margin-top:3px}
.pipe__m{font-size:11px;color:var(--muted);margin-top:2px}

/* ---------- Matrix / heatmap ---------- */
table.matrix{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--white)}
table.matrix th,table.matrix td{padding:9px 12px;text-align:right;border:1px solid var(--line-2);white-space:nowrap}
table.matrix th{background:var(--base);color:#dde1f6;font-weight:600;font-size:11px;letter-spacing:.03em;text-transform:uppercase}
table.matrix th:first-child,table.matrix td:first-child{text-align:left;background:var(--bg);font-weight:600;color:var(--ink)}
table.matrix td.hm{color:#fff;font-weight:600}
table.matrix tfoot td{background:var(--line-2);font-weight:700}

/* ---------- Waterfall (ECL movement attribution) ---------- */
.wf{display:flex;align-items:flex-end;gap:8px;height:240px;padding-top:14px}
.wf__col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;min-width:0}
.wf__bar{width:100%;max-width:56px;border-radius:4px}
.wf__bar--start,.wf__bar--end{background:linear-gradient(180deg,var(--accent-indigo),var(--base))}
.wf__bar--up{background:linear-gradient(180deg,#e05656,var(--danger))}
.wf__bar--down{background:linear-gradient(180deg,#35b877,var(--ok))}
.wf__val{font-size:10.5px;font-weight:700;margin-bottom:4px;white-space:nowrap}
.wf__lbl{font-size:10.5px;color:var(--muted);margin-top:7px;text-align:center;line-height:1.3;min-height:30px}
.wf__spacer{width:100%;max-width:56px}

/* ---------- Scenario cards ---------- */
.scen{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.scen__card{border:1px solid var(--line);border-radius:var(--radius-sm);padding:15px;background:var(--white)}
.scen__card.base{border-color:var(--primary-light);background:var(--primary-ultra-light)}
.scen__name{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:7px}
.scen__w{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--primary-dark)}
.scen__ecl{font-size:21px;font-weight:700;margin:9px 0 2px;letter-spacing:-.01em}
.scen__meta{font-size:11.5px;color:var(--muted)}
.scen__assum{margin-top:11px;padding-top:10px;border-top:1px dashed var(--line);font-size:11.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:4px}
.scen__assum b{font-weight:600}

/* ---------- Validation checks ---------- */
.vchk{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-2)}
.vchk:last-child{border-bottom:0}
.vchk__ico{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:0 0 26px;font-size:14px;font-weight:700}
.vchk__ico.pass{background:var(--ok-bg);color:var(--ok)}
.vchk__ico.warn{background:var(--warn-bg);color:var(--warn)}
.vchk__ico.fail{background:var(--danger-bg);color:var(--danger)}
.vchk__t{font-weight:600;font-size:13px}
.vchk__d{font-size:11.5px;color:var(--muted);margin-top:2px}
.vchk__v{margin-left:auto;text-align:right;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.vchk__v b{display:block;font-size:13.5px}

/* ---------- Formula / calculation trace ---------- */
.formula{background:var(--base);color:#dbe3ff;border-radius:var(--radius-sm);padding:15px 17px;
  font-family:"Cascadia Mono",Consolas,monospace;font-size:12.5px;line-height:1.85;overflow-x:auto}
.formula .op{color:#7fd3f9}
.formula .num{color:#ffd479}
.formula .cmt{color:#8b93c7;font-style:italic}
.formula .res{color:#7ee6a8;font-weight:700}
.trace{display:flex;flex-direction:column;gap:1px;background:var(--line-2);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.trace__row{display:grid;grid-template-columns:minmax(150px,1.4fr) 1fr auto;gap:12px;padding:9px 14px;background:var(--white);font-size:12.5px;align-items:center}
.trace__row.total{background:var(--primary-ultra-light);font-weight:700}
.trace__k{color:var(--ink-2);font-weight:600}
.trace__src{font-size:11px;color:var(--muted)}
.trace__v{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}

/* ---------- Parameter grid ---------- */
.pgrid{font-size:12.5px}
.pgrid input,.pgrid select{border:1px solid var(--line);border-radius:7px;padding:5px 8px;font:inherit;font-size:12.5px;width:100%;max-width:130px;background:var(--white)}
.pgrid .locked{background:var(--bg);color:var(--muted)}
.ver{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--muted);
  background:var(--line-2);padding:2px 8px;border-radius:6px;font-variant-numeric:tabular-nums}

/* ---------- Rule builder (no-code parametrisation) ---------- */
.rule{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--white);margin-bottom:11px;overflow:hidden}
.rule__head{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--bg);border-bottom:1px solid var(--line)}
.rule__head b{font-size:13px}
.rule__body{padding:13px 14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px}
.tok{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:7px;font-size:12px;font-weight:600;border:1px solid transparent}
.tok--field{background:#eef2ff;color:var(--accent-indigo);border-color:#d5ddf7}
.tok--op{background:var(--line-2);color:var(--ink-2)}
.tok--val{background:var(--primary-ultra-light);color:var(--primary-dark);border-color:var(--primary-light)}
.tok--logic{background:var(--base);color:#dbe3ff;font-size:10.5px;letter-spacing:.06em}
.tok--out{background:var(--ok-bg);color:var(--ok);border-color:#cfeadd}

/* ---------- Lineage / flow ---------- */
.flow{display:flex;align-items:center;flex-wrap:wrap;overflow-x:auto;padding-bottom:6px}
.flow__node{border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 14px;background:var(--white);min-width:132px;flex:0 0 auto}
.flow__node.src{background:#eef2ff;border-color:#d5ddf7}
.flow__node.out{background:var(--ok-bg);border-color:#cfeadd}
.flow__t{font-size:12.5px;font-weight:700}
.flow__m{font-size:10.5px;color:var(--muted);margin-top:2px}
.flow__arrow{flex:0 0 26px;height:2px;background:var(--line);position:relative}
.flow__arrow::after{content:"";position:absolute;right:0;top:-4px;border:5px solid transparent;border-left-color:var(--line)}

/* ---------- Sparkline ---------- */
.spark{display:inline-flex;align-items:flex-end;gap:2px;height:26px;vertical-align:middle}
.spark i{width:4px;background:var(--primary-light);border-radius:1px;display:block}
.spark i.hi{background:var(--primary)}

/* ---------- Split layout ---------- */
.split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:1080px){.split{grid-template-columns:1fr}}

/* ---------- Diff (input changes vs prior calculation) ---------- */
.diff-old{color:var(--muted);text-decoration:line-through;font-size:11.5px}
.diff-new{color:var(--ok);font-weight:600}
.diff-up{color:var(--danger);font-weight:600}

/* ---------- Section heading inside a page ---------- */
.sec-h{display:flex;align-items:center;gap:10px;margin:26px 0 13px}
.sec-h h3{font-size:15.5px}
.sec-h .line{flex:1;height:1px;background:var(--line)}

/* ---------- Landing: wider module grid for a bigger app ---------- */
.module-grid--lg{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.module-card__tag{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--primary-ultra-light);color:var(--primary-dark);padding:2px 7px;border-radius:5px;border:1px solid var(--primary-light)}

/* ---------- Reporting-date picker (header) ---------- */
.datepick{position:relative}
.datepick__btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--white);
  border-radius:999px;padding:6px 13px;font:inherit;font-size:12.5px;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.datepick__btn svg{width:15px;height:15px;fill:var(--muted)}
.datepick__btn b{color:var(--ink);font-weight:700}
.datepick__btn:hover{border-color:var(--primary-light)}
.datepick__chev{width:13px !important;height:13px !important}
.datepick__pop{position:absolute;right:0;top:calc(100% + 8px);width:262px;background:var(--white);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:12px;z-index:95}
.datepick__pop[hidden]{display:none}
.datepick__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.datepick__yr{font-weight:700;font-size:14px;color:var(--ink)}
.datepick__nav{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--white);
  cursor:pointer;font-size:17px;line-height:1;color:var(--ink-2)}
.datepick__nav:hover{background:var(--bg);color:var(--primary)}
.datepick__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.datepick__m{padding:9px 0;border-radius:8px;border:1px solid var(--line);background:var(--white);
  font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.datepick__m.off{color:var(--muted);opacity:.4;cursor:not-allowed;background:var(--bg)}
.datepick__m.avail:hover{border-color:var(--primary);color:var(--primary)}
.datepick__m.sel{background:var(--primary);border-color:var(--primary);color:#fff}
.datepick__foot{margin-top:10px;font-size:10.5px;color:var(--muted);text-align:center}

/* ---------- Breadcrumb bar (below the topbar, in renderShell) ---------- */
.crumbbar{padding:14px clamp(16px,3vw,30px) 0}
.crumbbar:empty{display:none}
.crumbbar .crumbs{margin-bottom:0}

/* ---------- Toggle switch ---------- */
.switch{position:relative;display:inline-block;width:38px;height:22px;flex:0 0 38px;vertical-align:middle}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch__t{position:absolute;inset:0;background:var(--line);border-radius:999px;transition:.2s;cursor:pointer}
.switch__t::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 2px rgba(10,36,52,.25)}
.switch input:checked + .switch__t{background:var(--ok)}
.switch input:checked + .switch__t::before{transform:translateX(16px)}

/* ---------- Inline rule editor ---------- */
tr.rule-edit{background:var(--primary-ultra-light)}
tr.rule-edit > td{vertical-align:top;padding-top:12px;padding-bottom:12px}
.edit-formula,.edit-scope{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.edit-formula select,.edit-scope select,tr.rule-edit select,tr.rule-edit input,select.sel{
  border:1px solid var(--line);border-radius:7px;padding:5px 8px;font:inherit;font-size:12.5px;
  background:var(--white);color:var(--ink);cursor:pointer;
  -webkit-appearance:none;appearance:none;padding-right:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2366719b' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 5px center;background-size:15px}
tr.rule-edit input{cursor:text;background-image:none;padding-right:8px}
.edit-formula select:focus,.edit-scope select:focus,tr.rule-edit select:focus,tr.rule-edit input:focus,select.sel:focus{
  border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-ultra-light)}
.ef-lbl{font-size:11px;color:var(--muted);font-weight:600}
.edit-scope .chip{cursor:pointer}

/* ---------- Breadcrumb (hierarchy navigation) - also used on module pages ---------- */
.crumbs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;margin-bottom:16px}
.crumbs a{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-weight:600;
  padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--white);transition:border-color .12s,background .12s}
.crumbs a:hover{border-color:var(--primary-light);background:var(--primary-ultra-light)}
.crumbs a svg{width:13px;height:13px;fill:currentColor;flex:0 0 13px}
.crumbs__sep{color:var(--muted)}
.crumbs__cur{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:700;
  padding:4px 10px;border-radius:999px;background:var(--line-2)}
.crumbs__cur svg{width:13px;height:13px;fill:var(--muted);flex:0 0 13px}
.crumbs__step{color:var(--ink-2);font-weight:600}

/* ---------- grouped results table (collective) - GE block vs provisions block ---------- */
table.data th.gsep,table.data td.gsep{border-left:3px solid var(--primary)}
table.data thead th.ghead{text-align:center;border-bottom:1px solid rgba(255,255,255,.25)}
table.data thead th.ghead--ge{background:var(--accent-indigo)}
table.data thead th.ghead--ecl{background:var(--primary-dark)}
table.data thead th.subh--ecl{background:#0d2f77}
table.data td.eclcell{background:rgba(0,174,239,.05)}

/* in-table numeric input (scenario editor) - matches the inline rule-editor look */
input.cellinp{border:1px solid var(--line);border-radius:7px;padding:5px 8px;font:inherit;font-size:12.5px;
  background:var(--white);color:var(--ink);text-align:right}
input.cellinp:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-ultra-light)}

/* numeric input with its unit OUTSIDE the box (what-if / scenario forms) */
.inpunit{display:flex;align-items:center;gap:8px}
.inpunit input{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;font-size:13px;
  background:var(--white);color:var(--ink);width:90px;text-align:right}
.inpunit input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-ultra-light)}
.inpunit span{font-size:12px;color:var(--muted);white-space:nowrap}

/* waterfall axis-origin column: the floor value sits at the chart baseline */
.wf__axis{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;height:100%;flex:0 0 auto}
.wf__zeroval{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;
  border-bottom:1px dashed var(--line);padding-bottom:1px}

/* ============================================================
   Stage-assumption analysis (Stress & What-if)
   Checkbox criteria blocks - one per stage assumption.
   ============================================================ */
.ckblock{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:16px;background:var(--white)}
.ckblock__head{display:flex;align-items:center;gap:11px;padding:11px 16px;background:var(--line-2);
  border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.ckblock__head .basis{font-size:12px;color:var(--muted)}
.ckblock__head .right{margin-left:auto;display:flex;align-items:center;gap:9px}
.ckblock__body{padding:12px 16px 4px}
.ckblock.off .ckblock__body{opacity:.4;pointer-events:none;filter:grayscale(.5)}
.ckgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:0 26px}
.ckrow{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:12.8px;color:var(--ink-2);cursor:pointer}
.ckrow input[type=checkbox]{width:15px;height:15px;flex:0 0 15px;margin:0;accent-color:var(--primary);cursor:pointer}
.ckrow>span{flex:1;min-width:0}
.ckrow--master{font-weight:700;color:var(--ink)}
.ck-num{width:78px;border:1px solid var(--line);border-radius:7px;padding:4px 8px;font:inherit;font-size:12.5px;
  background:var(--white);color:var(--ink);text-align:right;flex:0 0 auto}
.ck-num:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-ultra-light)}
.ck-unit{font-size:11.5px;color:var(--muted);white-space:nowrap;flex:0 0 auto}
.chiplist{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 10px 24px}
.chiplist .chip{font-size:11.3px;padding:3px 9px}
.chiplist.hide{display:none}
.samode{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted)}
.samode select{border:1px solid var(--line);border-radius:7px;padding:3px 7px;font:inherit;font-size:11.5px;
  background:var(--white);color:var(--ink-2)}
.sasum{display:flex;gap:22px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--line);background:var(--primary-ultra-light);
  border-radius:0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px)}
.sasum__i{display:flex;flex-direction:column;gap:1px}
.sasum__k{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.sasum__v{font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ck-dim{opacity:.35;pointer-events:none;filter:grayscale(.6)}
/* criteria tooltips must escape the block and sit above later blocks */
.ckrow .itip:hover,.ckrow .itip:focus,.ckblock__head .itip:hover,.ckblock__head .itip:focus{z-index:80}
.ckrow .itip__bub,.ckblock__head .itip__bub{z-index:80;width:max-content;max-width:300px}

/* tables whose cells carry itips must not clip the bubble; only for tables
   short enough not to need horizontal scrolling (restored below 900px) */
.table-wrap--tips{overflow:visible}
@media (max-width:900px){.table-wrap--tips{overflow:auto}}


/* ============================================================
   Collateral Allocation module
   ============================================================ */

/* framework switch - IFRS 9 / Basel III, shown side by side */
.fwsw{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:var(--white);padding:3px;gap:2px}
.fwsw button{border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);
  padding:5px 15px;border-radius:999px;cursor:pointer;white-space:nowrap}
.fwsw button.active{background:var(--primary);color:#fff}
.fwsw button:not(.active):hover{background:var(--bg)}

/* two results carried side by side */
.fwpair{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.fwcard{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);overflow:hidden}
.fwcard__h{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--bg);
  border-bottom:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink)}
/* the head carries an inline ICONS svg, which has no intrinsic size of its own -
   without this it paints at the full width of the card */
.fwcard__h>svg{width:16px;height:16px;flex:0 0 16px;fill:var(--primary)}
.fwcard__b{padding:12px 14px}
.fwcard__v{font-size:21px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fwcard__s{font-size:11.5px;color:var(--muted);margin-top:2px}
.fwcard--alt .fwcard__h{background:var(--primary-ultra-light)}

/* editable cell inside a matrix */
.hcin{width:52px;border:1px solid var(--line);border-radius:6px;padding:3px 5px;font:inherit;font-size:12px;
  text-align:right;background:var(--white);color:var(--ink);font-variant-numeric:tabular-nums}
.hcin:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ultra-light);outline:0}
.hcin.dirty{background:var(--primary-ultra-light);border-color:var(--primary-light);font-weight:700}
table.matrix td.mcell{padding:5px 8px}

/* ordered priority list with move up / move down */
/* overflow stays visible: the setting rows carry itips whose bubble would
   otherwise be clipped by the list. The rounding moves onto the end rows. */
.prio{display:flex;flex-direction:column;gap:1px;background:var(--line-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:visible}
.prio__row:first-child{border-radius:calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0 0}
.prio__row:last-child{border-radius:0 0 calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px)}
.prio__row:only-child{border-radius:calc(var(--radius-sm) - 1px)}
.prio .itip:hover,.prio .itip:focus{z-index:80}
.prio .itip__bub{z-index:80;width:max-content;max-width:340px}
.prio__row{display:grid;grid-template-columns:34px minmax(0,1.6fr) repeat(3,minmax(0,1fr)) auto auto;
  gap:12px;align-items:center;padding:9px 14px;background:var(--white);font-size:12.5px}
.prio__row.head{background:var(--base);color:#dde1f6;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.prio__row.off{opacity:.5}
.prio__n{width:24px;height:24px;border-radius:7px;background:var(--primary);color:#fff;
  display:grid;place-items:center;font-size:11.5px;font-weight:700}
.prio__row.off .prio__n{background:var(--muted)}
.prio__t{font-weight:600;color:var(--ink);min-width:0}
.prio__d{font-size:11px;color:var(--muted)}
.prio__v{text-align:right;font-variant-numeric:tabular-nums}
.prio__mv{display:flex;gap:4px}
.prio__mv button{width:24px;height:24px;border:1px solid var(--line);background:var(--white);border-radius:6px;
  cursor:pointer;color:var(--ink-2);font-size:11px;line-height:1;padding:0}
.prio__mv button:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.prio__mv button:disabled{opacity:.35;cursor:default}
.prio__bar{height:5px;border-radius:3px;background:var(--line-2);overflow:hidden;margin-top:4px}
.prio__bar i{display:block;height:100%;background:var(--primary);border-radius:3px}

/* the order-of-application worked example */
.ordex{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;align-items:start}
.ordex__c{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white)}
.ordex__c.on{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ultra-light)}
.ordex__h{padding:9px 14px;background:var(--bg);border-bottom:1px solid var(--line);
  font-size:12px;font-weight:700;display:flex;align-items:center;gap:8px}
.ordex__c.on .ordex__h{background:var(--primary-ultra-light)}

/* exclusion reasons */
.excl{display:flex;flex-direction:column;gap:9px}
.excl__r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:baseline;font-size:12.5px}
.excl__t{color:var(--ink-2);font-weight:600;min-width:0}
.excl__v{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);white-space:nowrap}
.excl__bar{grid-column:1/-1;height:6px;border-radius:3px;background:var(--line-2);overflow:hidden}
.excl__bar i{display:block;height:100%;background:var(--danger);border-radius:3px;opacity:.75}

/* haircut composition strip */
.hcbar{display:flex;height:26px;border-radius:7px;overflow:hidden;border:1px solid var(--line);background:var(--white)}
.hcbar span{display:grid;place-items:center;font-size:10.5px;font-weight:700;color:#fff;min-width:0;
  overflow:hidden;white-space:nowrap}
.hclegend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:11.5px;color:var(--muted)}
.hclegend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* framework eligibility flag inside a table */
.eflag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600}
.eflag--y{color:var(--ok)}
.eflag--n{color:var(--muted)}

@media (max-width:760px){
  .prio__row{grid-template-columns:28px minmax(0,1fr) auto auto;gap:8px}
  .prio__row .prio__hide{display:none}
}

/* A two- or three-column grid nested inside a card body has less room than
   the 330px / 260px minimum the auto-fit track asks for, so it burst the card
   on a phone. Below 640px every such grid is a single column anyway - top-level
   grids included - so forcing it here changes nothing except the nested case. */
@media (max-width:640px){
  .grid--2,.grid--3{grid-template-columns:1fr}
}