/* «Анализ заправок» (design-v2/css/53-refan.css, ported: the same rules, the root is the page's #p-refan; REQ-UIX-267 … 286).
 * The drawing's stylesheet is the oracle: change a rule there first. */
#p-refan .rp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;margin-bottom:13px}
#p-refan .rp-scope{margin-left:auto;font-size:11.5px;color:var(--tx3)}
#p-refan .rp-pw{position:relative}
#p-refan .rp-pick b{color:var(--ok);font-weight:640;margin-left:3px}
#p-refan .rp-dd{position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:300px;padding:10px;border-radius:12px;background:var(--s2);border:1px solid var(--line-s);box-shadow:var(--shadow);display:none}
#p-refan .rp-dd.open{display:block}
#p-refan .rp-dd input{width:100%;margin-bottom:8px}
#p-refan .rp-ol{max-height:250px;overflow:auto}
#p-refan .rp-opt{display:flex;gap:8px;align-items:center;padding:6px 7px;border-radius:8px;cursor:pointer;font-size:12.5px}
#p-refan .rp-opt:hover{background:var(--s3)}
#p-refan .rp-opt i{width:14px;height:14px;border-radius:4px;border:1px solid var(--line-s);flex:none}
#p-refan .rp-opt.on i{background:var(--ok);border-color:var(--ok)}
#p-refan .rp-opt span{margin-left:auto;color:var(--tx3);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
#p-refan .rp-acts{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:8px;padding-top:8px;font-size:11.5px}
#p-refan .rp-acts a{color:var(--tx2);cursor:pointer}
#p-refan .rp-chips{display:flex;gap:6px;flex-wrap:wrap}
#p-refan .rp-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:4px 6px 4px 10px;border-radius:20px;background:var(--s3);border:1px solid var(--line);color:var(--tx1)}
#p-refan .rp-chip a{color:var(--tx3);cursor:pointer;font-size:13px}
#p-refan .rp-sum{padding:13px 16px;margin-bottom:13px;font-size:13.5px;color:var(--tx2)}
#p-refan .rp-sum b{color:var(--tx1);font-weight:620}
#p-refan .rp-dl{margin-top:5px;font-size:11.5px;color:var(--tx3)}
#p-refan .rp-dl span{margin-right:14px}
#p-refan .kd.prev{color:var(--tx3)}
#p-refan .rp-card{margin-bottom:13px}
#p-refan .ch .chr{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#p-refan .rp-lab{font-size:11px;color:var(--tx3)}
#p-refan .rp-scale{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--tx3);padding:10px 16px 0}
#p-refan .rp-scale i{display:inline-block;width:200px;height:7px;border-radius:4px}
#p-refan .rp-chart{position:relative;padding:4px 8px 0}
#p-refan .rp-chart svg text{fill:var(--tx3);font-size:11px;font-family:var(--font)}
#p-refan .rp-note{font-size:11.5px;color:var(--tx3);padding:2px 16px 12px}
#p-refan .rp-tip{position:absolute;pointer-events:none;display:none;z-index:20;min-width:210px;padding:9px 11px;border-radius:12px;font-size:11.5px;color:var(--tx2);background:var(--s2);border:1px solid var(--line-s);box-shadow:var(--shadow)}
#p-refan .rp-tip b{color:var(--tx1);font-size:12.5px}
#p-refan .rp-tw{overflow:auto;border-top:1px solid var(--line)}
#p-refan table.rp-t{width:100%;border-collapse:collapse}
#p-refan .rp-t th{font-size:10px;font-weight:660;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none}
#p-refan .rp-t th.on{color:var(--tx1)}
#p-refan .rp-t td{font-size:12.5px;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums;vertical-align:middle}
#p-refan .rp-t tbody tr{cursor:pointer}
#p-refan .rp-t tbody tr:hover td{background:var(--s3)}
#p-refan .rp-t tr.sel td{background:var(--s3)}
#p-refan .rp-c{display:flex;flex-direction:column;gap:4px;min-width:104px}
#p-refan .rp-c em{font-style:normal;font-weight:620;color:var(--tx1)}
#p-refan .rp-c em small{font-weight:450;color:var(--tx3);font-size:10.5px;margin-left:4px}
#p-refan .rp-b{height:5px;border-radius:3px;background:var(--s3);position:relative;width:104px}
#p-refan .rp-b i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--tx3);opacity:.8}
#p-refan .rp-b b{position:absolute;top:-3px;width:2px;height:11px;border-radius:1px;background:var(--tx1)}
#p-refan .rp-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none;vertical-align:middle}
#p-refan .rp-pad{padding:12px 16px}
#p-refan .rp-row{display:grid;grid-template-columns:230px 1fr 230px;gap:12px;align-items:center;padding:6px 0;font-size:12.5px}
#p-refan .rp-row .rp-b{width:100%;height:9px}
#p-refan .rp-row .rp-b i{opacity:1}
#p-refan .rp-r{text-align:right;color:var(--tx2)}
#p-refan .rp-mode{display:inline-flex;gap:6px;align-items:center;font-size:11px;padding:3px 9px;border-radius:20px;background:var(--s3);border:1px solid var(--line);color:var(--tx2);margin-left:8px}
#p-refan .rp-mode a{color:var(--tx3);cursor:pointer}
@media(max-width:900px){#p-refan .kpis{grid-template-columns:repeat(2,1fr)}#p-refan .rp-row{grid-template-columns:120px 1fr}#p-refan .rp-row .rp-r{grid-column:1/-1;text-align:left}}

/* ── v2 · 53 · «Анализ заправок» v3 (OD-393): the score, «Топ-3», the states, the fixes of the port ── */
#p-refan .rf-emp,#p-refan .rf-err{display:none}
#p-refan.rf-empty .rf-emp,#p-refan.rf-error .rf-err{display:block}
#p-refan.rf-empty .rp-body,#p-refan.rf-error .rp-body{display:none}
#p-refan .rp-g2{grid-template-columns:1.4fr 1fr}
#p-refan .rp-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:13px;margin-bottom:13px}
#p-refan .rp-tc{padding:14px 16px;margin:0;min-width:0}
#p-refan .rp-tc .ct{display:block;margin-bottom:8px}
#p-refan .rp-tr{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 4px;border-top:1px solid var(--line);font-size:12.5px;cursor:pointer;border-radius:8px}
#p-refan .rp-tr:first-of-type{border-top:0}
#p-refan .rp-tr:hover{background:var(--s3)}
#p-refan .rp-tr .rp-c{align-items:flex-end;min-width:0;gap:1px}
#p-refan .rp-sk{font-size:10px;color:var(--tx3)}
.rp-sc{font-style:normal;font-weight:700;font-size:15px;color:var(--tx1);cursor:pointer;display:inline-flex;align-items:baseline;gap:6px;border-bottom:1px dotted var(--line-s)}
.rp-sc small{font-size:10.5px;font-weight:450;color:var(--tx3)}
.rp-bd{margin:8px 0 4px;padding:10px 12px;border-radius:10px;background:var(--s3);border:1px solid var(--line);font-size:12px;color:var(--tx2)}
.rp-bdr{display:grid;grid-template-columns:1.5fr 1.3fr .6fr 1fr .9fr;gap:8px;padding:4px 0;border-bottom:1px solid var(--line)}
.rp-bdr small{color:var(--tx3);font-size:10.5px}
.rp-bdt{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:8px}
.rp-bdt b{color:var(--tx1)}
#p-refan tr.rp-bdrow td{padding:0 12px 10px;white-space:normal}
#p-refan .rp-tw table.rp-t td .rp-c .mut{white-space:nowrap}
#p-refan .rp-tip{z-index:30}
@media(max-width:1100px){
  #p-refan .rp-top{grid-template-columns:1fr}
  .rp-bdr{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  #p-refan .rp-g2{grid-template-columns:1fr}
  #p-refan .rp-bar{padding:8px}
}

/* the comparison table scrolls INSIDE its card when 13 columns do not fit; the edge shows (REQ-UIX-043);*/
#p-refan .rp-tw{background:linear-gradient(90deg,var(--s1),var(--s1)) left center/22px 100% no-repeat local,linear-gradient(270deg,var(--s1),var(--s1)) right center/22px 100% no-repeat local,linear-gradient(90deg,rgba(0,0,0,.30),transparent) left center/12px 100% no-repeat scroll,linear-gradient(270deg,rgba(0,0,0,.30),transparent) right center/12px 100% no-repeat scroll}
#p-refan .rp-t th,#p-refan .rp-t td{padding-left:8px;padding-right:8px}
#p-refan .rp-t th{white-space:normal;font-size:9.5px;line-height:1.25;vertical-align:bottom}
#p-refan .rp-c{min-width:78px}
#p-refan .rp-b{width:78px}
#p-refan .rp-tw table.rp-t td:first-child{min-width:150px}
@media(max-width:620px){
  #p-refan .rp-tw{overflow:visible;background:none}
  #p-refan table.rp-t{min-width:0}
  #p-refan .rp-t thead{display:none}
  #p-refan .rp-t,#p-refan .rp-t tbody,#p-refan .rp-t tr,#p-refan .rp-t td{display:block;width:100%}
  #p-refan .rp-t tr{padding:8px 14px;border-top:1px solid var(--line)}
  #p-refan .rp-t td{display:flex;justify-content:space-between;align-items:center;gap:10px;border:0;padding:4px 0;white-space:normal;min-width:0}
  #p-refan .rp-t td::before{content:attr(data-l);color:var(--tx3);font-size:10.5px;flex:none}
  #p-refan .rp-tw table.rp-t td:first-child{min-width:0}
  #p-refan tr.rp-bdrow td{display:block}
  #p-refan tr.rp-bdrow td::before{display:none}
  #p-refan .rp-bar{gap:7px}
  #p-refan .rp-row{grid-template-columns:100px 1fr}
  #p-refan .rp-row .rp-r{grid-column:1/-1;text-align:left}
  
  #p-refan .rp-chart{overflow:hidden}
  .rp-bdr{grid-template-columns:1fr}
}

/* phone: the bubble chart is a list ranked by the chosen vertical axis (place · value · «по n» · the colour value · score) */
#p-refan .rp-bl{display:none}
@media(max-width:620px){
  #p-refan .rp-chart svg{display:none!important}
  #p-refan .rp-bl{display:block;padding:4px 8px 8px}
  #p-refan .rp-blr{padding:9px 6px;border-top:1px solid var(--line);cursor:pointer}
  #p-refan .rp-blr:first-child{border-top:0}
  #p-refan .rp-bl1{display:flex;align-items:center;gap:8px;font-size:13px}
  #p-refan .rp-bls{margin-left:auto;font-weight:700;font-size:15px;color:var(--tx1);text-align:right}
  #p-refan .rp-bls small{display:block;font-size:9.5px;font-weight:450;color:var(--tx3)}
  #p-refan .rp-bl2{display:flex;justify-content:space-between;gap:10px;margin-top:4px;font-size:11.5px;color:var(--tx2)}
  #p-refan .rp-bl2 small{color:var(--tx3);font-size:10.5px}
  #p-refan .rp-blc{display:inline-flex;align-items:center;gap:6px;color:var(--tx2);white-space:nowrap}
  #p-refan .rp-blc i{width:10px;height:10px;border-radius:3px;display:inline-block}
  #p-refan [data-block="refan.compare"] .rp-note{display:none}
}

/* alignment with the site's components */
#p-refan .rp-t th{background:var(--s3);font-size:10px;letter-spacing:.07em}
#p-refan .rp-t td{color:var(--tx2);border-bottom:0;border-top:1px solid var(--line)}
#p-refan .rp-c em{font-family:var(--mono);font-size:12px;font-weight:400}
#p-refan .rp-c em small{font-family:var(--font)}
#p-refan .rp-b{height:7px;border-radius:4px}
#p-refan .rp-b i{border-radius:4px;opacity:1}
#p-refan .rp-b b{top:-3px;height:13px}
#p-refan .rp-row .rp-b{height:7px}
#p-refan .rp-chart svg text:not([style]){font-family:var(--mono);font-size:10px}
#p-refan .rp-tip{padding:10px 12px;border-radius:var(--r-s);font-size:12px;color:var(--tx3)}
#p-refan .rp-tip b{color:var(--tx1);font-size:12px;font-weight:620}
#p-refan .rp-tip div:not(.mut){color:var(--tx2)}
#p-refan .rp-dd{border-radius:var(--r-s)}
#p-refan .rp-chip,#p-refan .rp-mode{font-size:11px;padding:3px 9px}
#p-refan .rp-chip{padding-right:6px}
#p-refan .rp-sc{font-family:var(--mono);font-weight:620}

/* the pieces of the page the drawing takes from the site's own sheets (design-v2 41-deploy65-b, 08) */
#p-refan .lv2{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.25;vertical-align:top;text-align:right}
#p-refan .rf-fig.mut{color:var(--tx3)}
#p-refan.rf-loading{opacity:.6}
#p-refan .rp-pills{display:inline-flex;gap:6px;flex-wrap:wrap}
#p-refan .rp-pills .pill{cursor:pointer}
#p-refan .rp-pills .pill.on{background:var(--ok-d);color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok-b)}
#p-refan .rp-cap{font-size:11.5px}
#p-refan .rp-none{padding:8px}

/* the head's tiles use the site's own .kpi/.kv; the figure is a span inside .kv, which `.kv span` would shrink to a unit */
#p-refan .kv .rf-fig{font-size:inherit;font-weight:inherit;color:inherit;margin:0}
#p-refan .kv .rf-fig.mut{font-size:15px;color:var(--tx3);font-weight:520}

/* ── the window of a place (design-v2 53 · OD-405): the site's own dialog (.dlg), its body scrolls inside the window ── */
.rf-dlg{width:min(680px,calc(100% - 24px));max-height:calc(100% - 40px);padding:0}
.rf-dlg .dlgf{display:flex;flex-direction:column;max-height:calc(100vh - 40px)}
.rf-dlg-b{overflow:auto;min-height:0;flex:1 1 auto}
.rf-dlg .dlga{flex:none}
.rf-dlg .lv2{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.25;vertical-align:top;text-align:right}
.rf-dlg .lv-b{font-size:11px;font-weight:450;color:var(--tx3);white-space:normal}
.rp-pfk{display:grid;grid-template-columns:1fr 1fr;column-gap:26px;margin-bottom:12px}
.rp-pfk .kvr{align-items:flex-start}
.rf-dlg .kvr .l b{color:var(--tx1);font-weight:580}
.rf-dlg .fld .chart{padding:2px 0}
.rf-dlg .axl{font-size:11px}
.rf-dlg .fld .kvr:last-child{border-bottom:none}
.rf-dlg .kvr .v small{font-size:11px;font-weight:450}
#p-refan .rp-t tbody tr[data-veh]:focus-visible{outline:1px solid var(--ok-b)}
@media(max-width:620px){
  .rp-pfk{grid-template-columns:1fr}
  .rf-dlg .fld .chart{overflow-x:auto}
  .rf-dlg .fld .chart svg{min-width:520px}
}

/* phone · «Топливо» now has FIVE views (with «Анализ заправок», OD-404): like four, the tabs wrap into rows instead of scrolling (app.css has the rule for four) */
@media (max-width:620px){
  .vbar[data-views="5"]{flex-wrap:wrap;overflow-x:visible;row-gap:6px}
}