@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,400italic,700|Roboto:400,400italic,700&subset=latin,cyrillic);

.douchart { 
	width: 100%;
	background-color: #fff;
}



/*   TOOLTIP   */
#douchart-tooltip { 
	font-family: Roboto, Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	pointer-events: none; 

	position: absolute;
	display: none;
	width: 100%;
	max-width: 200px;
	background: black;
	color: white;
	padding: 8px 15px 12px;
	box-shadow: 10px 10px 0 #00000044;
}

#douchart-tooltip .tt-title {
	font-family: Roboto, Arial, sans-serif;
	font-size: 14px;
	line-height: 14px;
	font-weight: bold;
	margin-bottom: -1px;
}
#douchart-tooltip .tt-period { 
	margin: 3px 0 0;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 11px;
	line-height: 16px;
	color: #B0B0B0;
}
#douchart-tooltip .tt-period.underlined { padding-bottom: 0; }
#douchart-tooltip .tt-value span { font-weight: bold; }
#douchart-tooltip .tt-note {
	font-size: 12px;
	color: #999;
	font-style: italic;
	/* margin-bottom: 10px; */
}
#douchart-tooltip .tt-footer {
	font-size: 12px;
	font-style: italic;
	color: #999;
	border-top: 1px solid #4d4d4d;
	padding-top: 3px;
	margin-top: 5px;
}
#douchart-tooltip .tt-point span { font-weight: bold; }
#douchart-tooltip .tt-point.tt-junior span { color: #89e5de; }
#douchart-tooltip .tt-point.tt-middle span { color: #06b9b1; }
#douchart-tooltip .tt-point.tt-senior span { color: #1d7872; }

#douchart-tooltip .tt-header {
	font-size: 12px;
	line-height: 16px;
	text-transform: uppercase;
	color: #d0d0d0;
}
#douchart-tooltip .underlined {
	padding-bottom: 5px;
	border-bottom: 1px solid #4d4d4d;
	margin-bottom: 7px;
}
#douchart-tooltip .upperlined {
	padding-top: 5px;
	border-top: 1px solid #4d4d4d;
	margin-top: 10px;
}

#douchart-tooltip .tt-rows .option { 
	margin-top: 5px; 
}
#douchart-tooltip .tt-row {
	display: flex;
	align-items: baseline;
	gap: 7px;
}
#douchart-tooltip .tt-row.compact {
	font-size: 13px;
	line-height: 14px;
	margin-bottom: 5px;
}
#douchart-tooltip .tt-row.spaced { justify-content: space-between; }
#douchart-tooltip .tt-row-group {
	display: flex;
	/* align-items: flex-start; */
	align-items: baseline;
	gap: 5px;
}
#douchart-tooltip .tt-mark {
	width: 10px;
	min-width: 10px;
	height: 10px;
	border-radius: 8px;
}

#douchart-tooltip .tt-row-value { 
	font-weight: bold;
	white-space: nowrap;
}
#douchart-tooltip .tt-row-diff,
#douchart-tooltip .tt-diff {
	font-style: italic;
	font-size: 12px;
	margin: -2px 0 5px;
	color: #cdcdcd;
}
#douchart-tooltip .tt-row-group .tt-diff {
	margin: -8px 0 0 -1px;
}
#douchart-tooltip .tt-row-diff.positive,
#douchart-tooltip .tt-row-diff.increase,
#douchart-tooltip .tt-diff.increase { color: #06b9b1; }
#douchart-tooltip .tt-row-diff.negative,
#douchart-tooltip .tt-row-diff.decrease,
#douchart-tooltip .tt-diff.decrease { color: #eb4247; }
#douchart-tooltip .tt-count,
#douchart-tooltip .tt-vacancies { 
	font-size: 12px; 
	font-style: italic; 
	color: #b0b0b0; 
}
#douchart-tooltip .tt-row.compact .tt-row-group .tt-name {
	font-size: 12px;
}
#douchart-tooltip .tt-row.compact .tt-value {
	font-weight: bold;
}


/*   INFOLINE   */
.douchart_infoline {
    display: flex;
    justify-content: space-between;

    font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px;
    line-height: 15px;
    color: #3d3d3d;
    
    padding: 0 0 5px;
    border-bottom: 1px solid #eee;
    margin: 10px 0 15px;
}

.douchart_infoline.right { justify-content: end; }

.dark .douchart_infoline {
	color: #bdc1c6;
	border-bottom-color: #424348;
}


/*   CHART   */
.douchart .row a text {
	text-decoration: underline;
	cursor: pointer;
}
.douchart .row a:hover text,
.douchart .row a:active text { fill: var(--color-red); }
.douchart .label-name {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 15px;
    line-height: 18px;
    fill: #303030;
}
.douchart .label-value {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    line-height: 18px;
    fill: #303030;
}
.douchart .label-diff { 
	text-anchor: start; 
	font-size: 12px;
	font-style: italic;
}

.douchart.stacked .row *:not(.row-back), .douchart.stacked .chart .option { pointer-events: none; }
.douchart.stacked .bar rect { 
	stroke: white; 
	stroke-width: 1px;
}
.douchart.stacked .label-name { text-anchor: end; }
.douchart.stacked .label-value {
	font-size: 14px;
	font-style: italic;
	fill: white;
	fill-opacity: .8;
	stroke: none;
	pointer-events: none;
}

.douchart .row { cursor: help; }
.douchart .row .row-back { fill: rgba(0,0,0,.05); opacity: 0; }
.douchart .row:hover .row-back { opacity: 1; }
.douchart .row:hover .label-name { font-weight: bold; }
.douchart .row:hover .label-value { font-weight: bold; }

.douchart .axis.y line {
	shape-rendering: crispEdges;
    stroke-width: 1;
    stroke-opacity: .1;
}
.douchart .axis.y line.reference {
	stroke: #0d0d0d;
	stroke-dasharray: 3 5;
	stroke-opacity: .3;
}
.douchart .axis.y line.baseline {
	stroke: #303030; 
	stroke-opacity: 1; 
}
.douchart .axis.y .domain { display: none; }
.douchart .axis.x .tick line,
.douchart .axis.x path { 
	shape-rendering: crispEdges;
	stroke: #303030; 
    stroke-opacity: .1;
}

.douchart .tick text {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
	font-size: 14px;
	fill: #808080;
}
.douchart .axis-title {
	font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
	font-size: 14px;
	fill: #808080;
	text-anchor: end;
}
.douchart .row-guideline {
	shape-rendering: crispEdges;
	stroke: #303030; 
    stroke-opacity: .1;
}

.linechart .line path.tm-area {
	stroke: none;
}
.linechart .line path.tm-line {
	fill: none;
	stroke: #81008a;
	stroke-width: 3px;
}
.linechart .mark circle {
	fill: #81008a;
	stroke: #81008a;
	stroke-opacity: .3;
	stroke-width: 10px;
}
.linechart .mark text.label-name {
    font-family: 'Roboto Condensed', sans-serif;
	fill: #303030;
	stroke: #fff;
	paint-order: stroke;
	stroke-width: 3px;
	stroke-opacity: .85;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.linechart .mark text.label-name {
    font-size: 16px;
    font-weight: bold;
}
.linechart .mark text.label-value {
    font-size: 12px;
    font-style: italic;
}
.areachart .answers path { stroke: white; }

.linechart .refline,
.areachart .refline {
	shape-rendering: crispEdges;
	fill: none;
	stroke: #0d0d0d;
    stroke-dasharray: 3 2;
    stroke-linecap: round;
}

.douchart .overlay {
	opacity: 0;
	cursor: help;
}

.linechart-gradient .stop1 { stop-color: rgba(6,185,177,.05); }
.linechart-gradient .stop2 { stop-color: rgba(6,185,177,.4); }


.douchart-portrait {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
}
.douchart-portrait object,
.douchart-portrait img {
	width: 100%;
	max-width: 400px;
}

@media screen and (max-width: 740px) {
	.douchart-portrait object,
	.douchart-portrait img { 
		max-width: 600px; 
		margin-left: auto;
		margin-right: auto; 
	}
}

@media screen and (max-width: 620px) {

	.douchart-portrait object,
	.douchart-portrait img {
		margin-right: 0 !important;
		margin-left: 0 !important;
		max-width: unset !important;
	}

}

.douchart.dark {
	background-color: #35363a;
	color: #bdc1c6;
}
.douchart.dark text { fill: #bdc1c6; }
.douchart.dark .axis.y line.baseline { stroke: #bdc1c6; }
.douchart.dark .axis.x .tick line, .douchart.dark .axis.x path { stroke: #bdc1c6; }
.linechart.dark .refline, .areachart.dark .refline { stroke: #bdc1c6; }
.linechart.dark .mark text.label-name {
	fill: #bdc1c6;
    stroke: #35363a;
}
.linechart.dark .line path.tm-line {
	stroke: #a850af;
}
.linechart.dark .mark circle {
	fill: #a850af;
	stroke: #a850af;
}
.douchart.dark .row .row-back { fill: #23242666; }


.multilines .chart-note {
	color: #999;
	font-style: italic;
	font-size: 14px;
	line-height: 14px;
	margin-bottom: 30px;
}
.areachart .time-block,
.multilines .time-block {
	opacity: 0;
	cursor: help;
	pointer-events: all;
}
.areachart line.area-chart-reference,
.multilines line.area-chart-reference {
	pointer-events: none;
	shape-rendering: crispEdges;
	fill: none;
	stroke: #0d0d0d;
    stroke-dasharray: 3 2;
    stroke-linecap: round;
}
.multilines line.area-chart-date-borders {
	fill: none;
	stroke: #0d0d0d;
	stroke-width: .5;
	stroke-opacity: .2;
	shape-rendering: geometricPrecision;
	pointer-events: none;
}
.areachart.dark line.area-chart-reference,
.multilines.dark line.area-chart-reference,
.multilines.dark line.area-chart-date-borders {
	stroke: #bdc1c6;
}
.areachart .y .domain,
.multilines .y .domain { display: none; }
.multilines .line path {
	fill: none;
	stroke-width: 2;
	pointer-events: none;
}
.multilines .line.fade path {
	stroke: #6d6d6d!important;
	stroke-width: 1;
	stroke-opacity: .2;
}

.chart-salary-area-details {
	position: absolute;
	top: 5px; left: 0;
	width: 180px;
}
.chart-salary-ad-date {
	font-weight: bold;
	border-bottom: 1px #ccc solid;
	margin-bottom: 5px;
}
.chart-salary-ad-row { display: flex; }
.chart-salary-ad-row-value { 
	font-weight: bold; 
	min-width: 50px; 
	text-align: right; 
	margin-right: 7px; 
}
.multilines .refgroup .mark.fade {
	opacity: 0;
}

.last-answers {
	font-family: 'Roboto Condensed', sans-serif;
}

.last-answers .date-label { fill: #3d3d3d; font-weight: bold; }
.last-answers .reset-label {
	cursor: pointer;
}
.last-answers .reset-label text {
	font-size: 13px;
	fill: #606060;
}
.last-answers .reset-label rect { fill: #e8e8e8; }
.last-answers .reset-label:hover rect { fill: #d6d6d6; }
.last-answers .ankety-label { fill: #999; font-size: 14px; font-style: italic; }
.last-answers line.header-line { 
	stroke: #3d3d3d; 
	shape-rendering: crispEdges;
	stroke-width: .5;
}
.dark .last-answers line.header-line { stroke: #999;  }
.last-answers line { stroke: #ccc; }

.areachart .grid { pointer-events: none; }

.answer-info { cursor: pointer; }
.answer-info .row-back { fill-opacity: 0; }
.answer-info .name-label { font-size: 14px; }
.answer-info .value-label { font-weight: normal; }
.answer-info:hover > text { font-weight: bold; }
.answer-info.fade .color-label { fill: #e2e2e2!important; }
.dark .answer-info.fade .color-label { fill: #5d5d5d!important; }
.answer-info.fade text { opacity: .3; }
.answer-info.fade text.value-label { fill: #3d3d3d!important; }
.dark .answer-info.fade text.value-label { fill: #808080!important; }

@media screen and (max-width:760px) {
	.last-answers .answer-info {
        pointer-events: none;
    }
}
@media screen and (max-width:700px) {
	.answer-info .value-label { 
		pointer-events: none; 
		stroke: #fff;
		paint-order: stroke;
		stroke-width: 3px;
		stroke-opacity: .8;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
	.dark .answer-info .value-label {
		stroke: #35363a;
	}
}

.answer-info .diff-label { 
	font-style: italic; 
	font-size: 12px;
}
.answer-info .diff-label.positive, .dark .answer-info .diff-label.positive { fill: #06b9b1; }
.answer-info .diff-label.negative, .dark .answer-info .diff-label.negative { fill: #eb4247; }

.douchart_color-legend { 
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px;
    line-height: 15px;
    color: #3d3d3d;
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
}
.dark .douchart_color-legend {
	color: #bdc1c6;
}
.douchart_color-legend .item { 
	display: inline-block;
	line-height: 14px;
}
.douchart_color-legend .item.hidden { display: none; }
.douchart_color-legend .item-mark { 
	display: inline-block;
	margin: 2px 5px 0 0;
	width: 10px;
	height: 10px;
	border-radius: 10px;
}
.douchart_color-legend.interactive { gap: 3px; }
.douchart_color-legend.interactive .item {
	padding: 3px 10px 3px 6px;
	border: 1px solid #f0f0f0;
	border-radius: 3px;
	cursor: help;
}
.dark .douchart_color-legend.interactive .item {
	border-color: #4d4d4d;
}
.douchart_color-legend.interactive .item:hover { 
	background-color: #e8e8e8;
	border-color: #d2d2d2;
}
.dark .douchart_color-legend.interactive .item:hover {
	background-color: #505050;
	border-color: #6d6d6d;
}
.douchart_color-legend .median .item-mark { 
	background-color: #3d3d3d; 
	width: 5px;
	height: 5px;
	border-radius: 0px;
	transform: translate(0, 2px) rotate(45deg);
}
.douchart_color-legend .item-name { display: inline-block; }


.douchart-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 10px;
    width: 100%;
}
.module-chart { 
	width: 100%;
	max-width: 400px;
}
.module-chart .chart-back { fill: #F8F8F8; }
.dark .module-chart .chart-back { fill: #2C2D30; }
.module-chart .chart-title {
	font-family: 'Roboto', sans-serif;
	font-size: 17px;
	font-weight: bold;
	fill: #303030;
}
.dark .module-chart .chart-title { fill: #bdc1c6; }

.module-chart .card-label-name,
.module-chart .card-label-value {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 15px;
}
.module-chart .card-label-name { fill: #303030; }
.dark .module-chart .card-label-name { fill: #bdc1c6; }
.module-chart .card-label-value {
	text-anchor: end;
}
.module-chart .baseline {
	fill: none;
	stroke: #303030;
	stroke-width: 1;
	shape-rendering: crispEdges;
}
.dark .module-chart .baseline { stroke: #bdc1c6; }
.module-chart .piechart .card-label-value {
	text-anchor: left;
	font-weight: bold;
}
.module-chart .piechart .pie path { stroke: #f8f8f8; }
.dark .module-chart .piechart .pie path { stroke: #2C2D30; }

.module-chart .histogram .bar { 
	shape-rendering: crispEdges; 
	fill: #a850af;
}
.module-chart .histogram .bar.median {
	fill: #8e1b96;
}
.module-chart .histogram .card-label-median .card-label-value {
	text-anchor: start;
	font-size: 30px;
	fill: #a850af;
}
.module-chart .histogram .x-axis .card-label-value {
	text-anchor: middle;
	font-size: 14px;
	font-weight: 300;
	fill: #999999;
}
.module-chart .histogram .card-note {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 14px;
	font-style: italic;
	fill: #3d3d3d;
	opacity: .6;
	text-anchor: middle;
	stroke: #F8F8F8;
	paint-order: stroke;
	stroke-width: 3px;
	stroke-opacity: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.dark .module-chart .histogram .card-note { 
	fill: #bdc1c6; 
	stroke: #2C2D30;
}
.module-chart .map .map-areas path.area {
	fill: #e0e0e0;
	stroke: #F8F8F8;
	stroke-width: .25px;
}  
.dark .module-chart .map .map-areas path.area {
	fill: #424348;
	stroke: #2C2D30;
}
.module-chart .map .map-cities circle.city {
	fill: #a850af;
	stroke: #e0e0e0;
	stroke-width: 1px;
}
.dark .module-chart .map .map-cities circle.city {
	stroke: #2C2D30;
}
.module-chart .waffle .baseline {
	stroke: #999999;
}
.module-chart .waffle .card-label-value {
	font-weight: bold;
	text-anchor: start;
	font-size: 16px;
}


/*** CONTROLS ***/

.douchart_controls {
	display: flex;
	flex-wrap: wrap;
	font-family: 'Roboto Condensed', sans-serif;
    gap: 2px;
    margin-bottom: 15px;
}
.douchart_controls.mobile {
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.douchart_controls.grouped {
    flex-direction: column;
}
.douchart .douchart_controls .items-group {
    display: flex; 
    flex-wrap: wrap;
    gap: 2px;
}
.douchart .douchart_controls .item { 
    font-size: 13px;
	line-height: 15px;
    padding: 7px 10px 8px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #eee;
    color: #3d3d3d;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.douchart .douchart_controls .item.just-text {
    pointer-events: none;
    border: none;
    padding: 7px 5px 8px 0;
}
.douchart_controls .item:hover {
    color: #0d0d0d;
    background-color: #f4f4f4;
}
.douchart_controls .item.active { 
	color: #8a37b5; 
	background-color: #8A37B533;
	border-color: #8A37B54D;
	pointer-events: none;
}
.douchart_controls .item.disabled {
	pointer-events: none;
	opacity: .3;
}
.douchart.dark .douchart_controls .item {
	background-color: #35363a;
    border: 1px solid #62636a;
    color: #bdc1c6;
}
.douchart.dark .douchart_controls .item:hover {
    color: #acb0b5;
    background-color: #2e2f31;
}
.douchart.dark .douchart_controls .item.active { 
	color: #f2f2f2; 
	background-color: #a850af;
	border-color: #a850af;
}

.douchart.franchises .charts-wrapper {
	display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 10px;
}
.douchart.franchises .charts-wrapper svg {
	overflow: visible;
}
.douchart.franchises .chart-title {
	font-family: 'Roboto', sans-serif;
    font-size: 14px;
    fill: #3d3d3d;
}
.douchart.franchises .chart-bg {
	fill: #f2f2f2;
	shape-rendering: crispEdges;
	cursor: help;
}
.douchart.franchises rect.game {
	fill: #8a37b5;
	shape-rendering: crispEdges;
	pointer-events: none;
}
.douchart.franchises .axis .label {
	font-family: 'Roboto Condensed', sans-serif;
    font-size: 12px;
    fill: #808080;
}
.douchart.franchises .axis.x .label { text-anchor: middle; }
.douchart.franchises .axis.y .label { text-anchor: end; }
.douchart.franchises rect.reference {
	fill: none;
	outline: #3d3d3d 1px solid;
	outline-offset: 1px;
	shape-rendering: crispEdges;
	pointer-events: none;
}
.douchart.dark .axis.y line.reference { stroke: #bdc1c6; }
.douchart.franchises.dark .chart-title { fill: #bdc1c6; }
.douchart.franchises.dark .chart-bg { fill: #2e2f31; }
.douchart.franchises.dark rect.reference { outline-color: #62636a; }
.douchart.stacked.dark .bar rect { stroke: #35363a; }

#gd-top10_platform.areachart .answers path {
	shape-rendering: crispEdges;
	stroke-width: 1px;
	stroke: white!important;
}
#gd-top10_platform.areachart.dark .answers path {
	stroke: #35363a!important;
}

.douslider {
  color-scheme: light;
  --surface:#fcfcfb; --page:#f9f9f7;
  --ink:#0b0b0b; --ink2:#52514e; --muted:#898781;
  --grid:#e1e0d9; --axis:#c3c2b7; --ring:rgba(11,11,11,.10);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --gray:#b8b6ae;
  /* --accent:#2a78d6; */
  --accent:#81008a;
  --up:#006300; --down:#d03b3b;
  --ps:#9E1BDB; --ps4:#5440CC; --pc:#4a4a47; --switch:#d8321e;
  --row-hover:rgba(11,11,11,.035);
}
.douslider[data-resolved-theme="dark"],
.douslider.dark {
  color-scheme: dark;
  --surface:#1a1a19; --page:#0d0d0d;
  --ink:#ffffff; --ink2:#c3c2b7; --muted:#898781;
  --grid:#2c2c2a; --axis:#383835; --ring:rgba(255,255,255,.10);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --s5:#d55181; --s6:#008300; --s7:#9085e9; --gray:#4a4a47;
  /* --accent:#3987e5; */
  --accent:#9c30b6;
  --up:#0ca30c; --down:#e66767;
  --ps:#9E1BDB; --ps4:#5440CC; --pc:#b5b3aa; --switch:#ef5a48;
  --row-hover:rgba(255,255,255,.05);
}

/* ---------- timeline widget ---------- */
.douslider{
	.panel{background:var(--surface);border:1px solid var(--ring);border-radius:12px;
	padding:22px 24px;margin-bottom:26px}
	.month-row{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px}
	#month-name{font-size:30px;font-weight:700;letter-spacing:-.3px;min-width:280px}
	#month-meta{color:var(--ink2);font-size:13px}
	#month-meta b{color:var(--ink);font-weight:600}
	.controls{display:flex;align-items:center;gap:10px;margin:18px 0 4px}
	button.ctl{background:var(--surface);color:var(--ink);border:1px solid var(--axis);
	border-radius:8px;cursor:pointer;font:inherit;font-size:14px;padding:6px 12px;line-height:1.2}
	button.ctl:hover{border-color:var(--ink2)}
	button.ctl:disabled{opacity:.4;cursor:default}
	button.ctl.play{min-width:118px;font-weight:600}
	.slider-block{flex:1;display:flex;flex-direction:column;gap:2px;min-width:220px}
	input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;margin:0;height:26px}
	.ticks{position:relative;height:16px;font-size:11px;color:var(--muted)}
	.ticks span{position:absolute;transform:translateX(-50%)}
	.chart-area{position:relative;margin-top:16px;height:520px}
	.row{position:absolute;left:0;right:0;height:48px;display:flex;align-items:center;gap:12px;
	padding:0 10px;border-radius:9px;
	transition:top .55s cubic-bezier(.22,1,.36,1), opacity .35s, transform .45s cubic-bezier(.22,1,.36,1)}
	.row:hover{background:var(--row-hover)}
	.row .rank{width:30px;text-align:center;font-size:17px;font-weight:700;color:var(--muted);
	font-variant-numeric:tabular-nums;flex:none}
	.row.top3 .rank{color:var(--ink)}
	.row .medal{width:6px;height:34px;border-radius:3px;flex:none;background:transparent}
	.row.r1 .medal{background:var(--accent)}
	.row.r2 .medal{background:var(--accent);opacity:.55}
	.row.r3 .medal{background:var(--accent);opacity:.3}
	.row .info{flex:1;min-width:0}
	.row .name{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
	.row .genre{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
	.badge{flex:none;font-size:11px;font-weight:800;letter-spacing:.4px;color:#fff;
	border-radius:6px;padding:4px 8px;min-width:44px;text-align:center}
	.badge.PS5{background:var(--ps)}
	.badge.PS4{background:var(--ps4)}
	.badge.PC{background:var(--pc)}
	.badge.SWITCH{background:var(--switch)}
	.delta{flex:none;width:56px;text-align:right;font-size:12px;font-variant-numeric:tabular-nums;font-weight:600}
	.delta.up{color:var(--up)}
	.delta.down{color:var(--down)}
	.delta.same{color:var(--muted);font-weight:400}
	.delta.new{color:var(--accent);font-size:11px;letter-spacing:.3px}
	.tl-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;padding-top:14px;
	border-top:1px solid var(--grid);font-size:12px;color:var(--ink2);align-items:center}
	.tl-legend .badge{transform:scale(.9)}
	kbd{background:var(--row-hover);border:1px solid var(--axis);border-radius:4px;
	padding:0 5px;font-family:inherit;font-size:11px}
}
/* ---------- mobile ---------- */


.douslider{
	.tablewrap{overflow-x:auto}
	.scroll-hint{display:none;color:var(--muted);font-size:11.5px;margin:6px 0 0}
}
@media (max-width:700px){
	.douslider {
		.wrap{padding:20px 12px 60px}
		header h1{font-size:22px}
		section.chart{padding:16px 14px 12px}
		.svgwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
		.svgwrap > svg{min-width:820px}
		.scroll-hint{display:block}
	}
}
@media (max-width:600px){
	.douslider {
		.panel{padding:16px 12px}
		#month-name{font-size:24px;min-width:0}
		.controls{flex-wrap:wrap;gap:8px}
		.slider-block{order:3;flex-basis:100%;min-width:0}
		button.ctl.play{margin-left:auto;min-width:0}
		.row{gap:8px;padding:0 4px;height:58px}
		.row .rank{width:22px;font-size:15px}
		.row .medal{height:40px}
		.row .name{font-size:13.5px;white-space:normal;display:-webkit-box;
			-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.22}
		.row .genre{font-size:10.5px}
		.badge{min-width:36px;padding:3px 6px;font-size:10px}
		.delta{width:38px;font-size:11px}
		.tl-legend{gap:6px 10px;font-size:11px}
		.tl-legend span[style*="margin-left"]{margin-left:0 !important}
	}
}