.ranking-compare-dialog{box-sizing:border-box;width:min(1080px,calc(100vw - 16px));height:min(900px,calc(100dvh - 16px));max-width:none;max-height:none;margin:auto;padding:16px;border:1px solid #dbc99f;border-radius:18px;background:linear-gradient(145deg,#fff,#fffdf5);color:#182431;box-shadow:0 20px 80px #1f293740;overflow:hidden}
.ranking-compare-dialog[open]{display:flex;flex-direction:column;gap:12px}.ranking-compare-dialog::backdrop{background:#1e293b80}.ranking-compare-dialog header{display:flex;align-items:center;gap:12px;flex:none}.ranking-compare-dialog h2{margin:0;font-size:20px;flex:1;white-space:nowrap}.ranking-compare-dialog header input{box-sizing:border-box;width:150px;min-width:0;height:36px;padding:4px 8px;border:1px solid #ded8cb;border-radius:9px;background:white;color:inherit;font:inherit}.ranking-compare-dialog header button{width:34px;height:34px;flex:none;border:1px solid #ded8cb;border-radius:9px;background:white;color:inherit;font-size:23px;cursor:pointer}
[data-comparison-content]{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0}.ranking-compare-overview{display:grid;grid-template-columns:1fr 1.4fr;gap:18px;padding:14px;border:1px solid #e9ddbf;border-radius:12px;background:#fff9e9;flex:none}.ranking-compare-goal{display:grid;gap:4px;align-content:center}.ranking-compare-goal>span{font-size:12px;color:#776440}.ranking-compare-goal>strong{font-size:30px;line-height:1.1;color:#ae7607}.ranking-compare-goal small{font-size:14px;font-weight:400}.ranking-compare-goal progress{width:100%;height:6px;accent-color:#d69b15;border:0;border-radius:6px;overflow:hidden}.ranking-compare-goal progress::-webkit-progress-bar{background:#eee5d2}.ranking-compare-goal progress::-webkit-progress-value{background:#d69b15}.ranking-compare-goal progress::-moz-progress-bar{background:#d69b15}.ranking-compare-totals{display:grid;align-content:center;gap:8px}.ranking-compare-totals>div{display:grid;grid-template-columns:65px 1fr 45px;gap:8px;align-items:center;font-size:12px}.ranking-compare-totals i{height:9px;border-radius:5px;background:#eee9dd;overflow:hidden}.ranking-compare-totals i b{display:block;height:100%;background:linear-gradient(90deg,#eab940,#c38b0d);border-radius:5px}.ranking-compare-totals .previous i b{background:#98a1ad}.ranking-compare-totals strong{text-align:right;white-space:nowrap}.ranking-compare-totals p{margin:0;font-size:12px;text-align:right}
.ranking-compare-table{flex:1;min-height:0;display:flex;flex-direction:column}.ranking-compare-row{display:grid;grid-template-columns:36px minmax(65px,150px) minmax(25px,1fr) 48px 48px 48px;gap:12px;align-items:center;font-size:14px;min-height:0}.ranking-compare-row>:nth-child(n+4){text-align:right;font-variant-numeric:tabular-nums}.ranking-compare-head{flex:none;color:#87909b;font-size:11px;height:25px;border-bottom:1px solid #e9e2d4}.ranking-compare-rows{display:grid;grid-template-rows:repeat(var(--compare-count),minmax(0,1fr));flex:1;min-height:0}.ranking-compare-rows>.ranking-compare-row{border-bottom:1px solid #efebe3}.ranking-compare-row>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.ranking-compare-row .place{color:#7a8491;text-align:center}.ranking-compare-row .place.top{color:#ac7303;font-weight:700}.ranking-compare-bar{height:7px;border-radius:6px;background:#f4f0e6;overflow:hidden}.ranking-compare-bar i{display:block;height:100%;background:linear-gradient(90deg,#edc358,#bd8204);border-radius:6px}.ranking-compare-dialog .up{color:#b66852}.ranking-compare-dialog .down{color:#29816a}.ranking-compare-dialog footer{flex:none;border-top:1px solid #e5ddcd;padding-top:9px}.ranking-compare-dialog footer label{display:flex;align-items:center;gap:12px;margin:0;font-size:13px}.ranking-compare-dialog footer strong{white-space:nowrap;min-width:75px}.ranking-compare-dialog input[type=range]{height:26px;min-height:0;margin:0;flex:1;min-width:0;width:100%;accent-color:#ca9318;touch-action:pan-y;padding:0}.ranking-compare-dialog footer small{display:block;color:#87909b;font-size:10px;line-height:1.4;margin-top:2px}.ranking-compare-loading{margin:auto}
.mobile-ranking-tabs:has([data-ranking-comparison-open]){grid-template-columns:repeat(4,minmax(0,1fr))!important}.mobile-ranking-tabs [data-ranking-comparison-open]{color:#a56e00;background:#fff9e9;border-color:#dcc493}.ranking-compare-desktop-entry{margin:8px 0;padding:9px 18px;border:1px solid #dcc493;border-radius:10px;background:#fff9e9;color:#9a680b;cursor:pointer}body:not(.desktop-page) .ranking-compare-desktop-entry{display:none}
@media(max-width:600px){.ranking-compare-dialog{padding:12px;gap:9px!important;border-radius:14px}.ranking-compare-dialog header{gap:8px}.ranking-compare-dialog h2{font-size:18px}.ranking-compare-dialog header input{font-size:14px;width:126px}.ranking-compare-overview{padding:10px;gap:12px;grid-template-columns:.8fr 1.3fr}.ranking-compare-goal>strong{font-size:26px}.ranking-compare-goal small{font-size:11px}.ranking-compare-goal>span{font-size:10px}.ranking-compare-totals>div{grid-template-columns:51px minmax(12px,1fr) 36px;gap:5px;font-size:10px}.ranking-compare-totals p{font-size:10px}.ranking-compare-row{grid-template-columns:24px minmax(46px,65px) minmax(18px,1fr) 28px 28px 28px;gap:5px;font-size:11px}.ranking-compare-head{font-size:9px;height:22px}.ranking-compare-bar{height:5px}[data-comparison-content]{gap:8px}.mobile-ranking-tabs:has([data-ranking-comparison-open]) button{font-size:11px!important;padding-left:3px!important;padding-right:3px!important;gap:3px!important}.mobile-ranking-tabs:has([data-ranking-comparison-open]) button i{display:none!important}}

.ranking-compare-rows .ranking-compare-row,.ranking-compare-rows .ranking-compare-row>*{line-height:1}@media(max-height:620px) and (max-width:600px){.ranking-compare-dialog[open]{gap:7px!important}.ranking-compare-rows .ranking-compare-row{font-size:9px}.ranking-compare-overview{padding:8px}.ranking-compare-dialog footer{padding-top:6px}}

.mobile-ranking-tabs:has([data-ranking-comparison-open]){display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}.mobile-ranking-tabs:has([data-ranking-comparison-open]) button{width:100%;min-width:0;min-height:42px;font-size:13px!important;justify-content:center;white-space:nowrap}

.ranking-compare-head{font-size:14px;font-weight:600;color:#536477;height:29px;white-space:nowrap}@media(max-width:600px){.ranking-compare-head{font-size:11px;height:26px}}

.ranking-compare-dialog header input[data-comparison-month]{flex:0 0 128px;width:128px;min-width:0;max-width:128px;padding:4px 6px;font-size:14px}

.ranking-compare-close{position:absolute;z-index:1;right:24px;top:24px;width:28px;height:28px;display:grid;place-items:center;padding:0;border:1px solid #dcc99c;border-radius:8px;background:#fffdf5;color:#6c5b39;font-size:22px;cursor:pointer}.ranking-compare-overview{padding-top:42px}.ranking-compare-totals>div{grid-template-columns:128px minmax(12px,1fr) 45px}.ranking-compare-totals input[type=month]{box-sizing:border-box;min-width:0;width:100%;height:30px;margin:0;padding:3px 4px;border:1px solid #e0cfaa;border-radius:6px;background:#fffdf7;color:#55472f;font-size:13px;font-family:inherit}@media(max-width:600px){.ranking-compare-close{right:20px;top:20px}.ranking-compare-overview{grid-template-columns:.65fr 1.6fr;gap:8px;padding-top:38px}.ranking-compare-totals>div{grid-template-columns:110px minmax(8px,1fr) 30px;gap:4px}.ranking-compare-totals input[type=month]{font-size:11px;height:28px}}@media(max-height:620px) and (max-width:600px){.ranking-compare-overview{padding-top:38px}}

.ranking-compare-dialog footer{margin:0;padding:0;border-top:0}.ranking-compare-dialog footer label{padding:0;margin:0;line-height:1.2}.ranking-compare-dialog[open]{gap:4px!important;padding-bottom:8px}.ranking-compare-rows .ranking-compare-row{font-size:16px}.ranking-compare-row>strong{font-weight:600}.ranking-compare-rows .ranking-compare-bar{height:8px}@media(max-width:600px){.ranking-compare-rows .ranking-compare-row{font-size:13px}.ranking-compare-rows .ranking-compare-bar{height:6px}}@media(max-width:600px) and (max-height:620px){.ranking-compare-rows .ranking-compare-row{font-size:12px}}

.ranking-compare-totals input[type=month][data-comparison-month]{border:0;border-radius:0;background:transparent;box-shadow:none;padding:0 2px;color:inherit;cursor:pointer}.ranking-compare-totals input[type=month][data-comparison-month]:focus:not(:focus-visible){outline:none}.ranking-compare-totals input[type=month][data-comparison-month]:focus-visible{outline:2px solid #c99427;outline-offset:2px}.ranking-compare-totals input[type=month]::-webkit-calendar-picker-indicator{margin:0;padding:0 1px;cursor:pointer}

.ranking-compare-dialog .ranking-compare-overview{align-items:center}.ranking-compare-dialog .ranking-compare-goal{align-self:center}.ranking-compare-dialog .ranking-compare-totals{min-width:0;align-content:center}.ranking-compare-dialog .ranking-compare-totals>div{align-items:center;min-height:30px}.ranking-compare-dialog .ranking-compare-totals>div>input[data-comparison-month]{align-self:center;height:30px;min-height:30px;line-height:normal;margin:0;padding:0 2px;border:0;border-radius:0;background:transparent;box-shadow:none}.ranking-compare-dialog .ranking-compare-totals>div>i{display:block;align-self:center;margin:0}.ranking-compare-dialog .ranking-compare-totals>div>strong{display:flex;justify-content:flex-end;align-items:center;align-self:stretch;margin:0;padding:0;line-height:1;white-space:nowrap}.ranking-compare-dialog .ranking-compare-totals>p{margin:0;line-height:1.4}

.ranking-compare-dialog .ranking-compare-month-text{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:4px;height:30px;min-width:0;margin:0;padding:0;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;white-space:nowrap;cursor:pointer;font-size:13px;color:#55472f}.ranking-compare-month-text>span{display:block;line-height:1.2;pointer-events:none}.ranking-compare-month-text>svg{display:block;width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;pointer-events:none}.ranking-compare-dialog .ranking-compare-month-text>input[type=month][data-comparison-month]{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:0!important;opacity:0!important;border:0!important;background:transparent!important;box-shadow:none!important;cursor:pointer;font-size:16px}.ranking-compare-month-text:focus-within>span{text-decoration:underline;text-decoration-color:#c99427}@media(max-width:600px){.ranking-compare-dialog .ranking-compare-month-text{font-size:12px}}

.mobile-ranking-tabs:has([data-ranking-comparison-open]){grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}.mobile-ranking-tabs:has([data-ranking-comparison-open]) button{white-space:nowrap;min-width:0;padding-left:3px!important;padding-right:3px!important;font-size:12px!important}@media(max-width:380px){.mobile-ranking-tabs:has([data-ranking-comparison-open]){gap:4px!important}.mobile-ranking-tabs:has([data-ranking-comparison-open]) button{font-size:11px!important}}

.ranking-compare-dialog .ranking-compare-totals>div{grid-template-columns:max-content minmax(8px,1fr) max-content;column-gap:6px}.ranking-compare-dialog .ranking-compare-month-text{width:max-content;max-width:100%;justify-self:start}@supports(grid-template-columns:subgrid){.ranking-compare-dialog .ranking-compare-totals{grid-template-columns:max-content minmax(8px,1fr) max-content;column-gap:6px}.ranking-compare-dialog .ranking-compare-totals>div{grid-column:1/-1;grid-template-columns:subgrid}.ranking-compare-dialog .ranking-compare-totals>p{grid-column:1/-1}}

.ranking-compare-dialog .ranking-compare-goal{align-self:start;transform:translateY(-18px)}.ranking-compare-dialog .ranking-compare-close{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#6c5b39}.ranking-compare-dialog .ranking-compare-close:focus:not(:focus-visible){outline:none}

.ranking-compare-dialog .ranking-compare-goal{align-self:start;transform:translateY(-18px)}.ranking-compare-dialog .ranking-compare-close{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#6c5b39}.ranking-compare-dialog .ranking-compare-close{outline:none}.ranking-compare-dialog .ranking-compare-close:focus-visible{color:#a66f00;text-shadow:0 0 1px currentColor}

.ranking-compare-dialog,.ranking-compare-dialog::backdrop{overscroll-behavior:none}.ranking-compare-dialog{-webkit-user-select:none;user-select:none;touch-action:none}.ranking-compare-dialog input[type=range]{touch-action:pan-x}.ranking-compare-dialog input[type=month]{touch-action:manipulation}

/* Keep the goal, month comparison and change summary in reading order. */
.ranking-compare-dialog .ranking-compare-overview{grid-template-columns:minmax(0,1fr);gap:6px;padding:10px}
.ranking-compare-dialog .ranking-compare-goal{display:flex;align-items:center;align-self:start;gap:8px;min-width:0;padding-right:28px;transform:none}
.ranking-compare-dialog .ranking-compare-goal>span{white-space:nowrap;font-size:12px}
.ranking-compare-dialog .ranking-compare-goal>strong{white-space:nowrap;font-size:26px}
.ranking-compare-dialog .ranking-compare-goal small{font-size:12px}
.ranking-compare-dialog .ranking-compare-goal progress{flex:1;min-width:16px;width:auto;max-width:140px}
.ranking-compare-dialog .ranking-compare-totals{width:100%;justify-self:start;gap:4px 6px}
.ranking-compare-dialog .ranking-compare-totals>p{text-align:left;justify-self:start;font-size:16px;font-weight:600;line-height:1.3;margin-top:2px}
@media(max-width:600px){.ranking-compare-dialog .ranking-compare-goal{gap:5px}.ranking-compare-dialog .ranking-compare-goal>span{font-size:10px}.ranking-compare-dialog .ranking-compare-goal>strong{font-size:22px}.ranking-compare-dialog .ranking-compare-goal small{font-size:10px}.ranking-compare-dialog .ranking-compare-totals>p{font-size:14px}}

.ranking-compare-dialog[open]{padding-bottom:max(24px,env(safe-area-inset-bottom,0px))}
.ranking-compare-dialog footer{padding-top:4px}
.ranking-compare-dialog input[type=range][data-comparison-day]{appearance:none;-webkit-appearance:none;display:block;height:48px;min-height:48px;background:transparent;touch-action:none;cursor:ew-resize;border:0;border-radius:0;box-shadow:none}
.ranking-compare-dialog [data-comparison-day]::-webkit-slider-runnable-track{height:8px;border-radius:6px;background:#dcc68f}
.ranking-compare-dialog [data-comparison-day]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-8px;border:2px solid #fff8e6;border-radius:50%;background:#ca9318;box-shadow:0 1px 3px #80601640}
.ranking-compare-dialog [data-comparison-day]::-moz-range-track{height:8px;border-radius:6px;background:#dcc68f}
.ranking-compare-dialog [data-comparison-day]::-moz-range-thumb{box-sizing:border-box;width:24px;height:24px;border:2px solid #fff8e6;border-radius:50%;background:#ca9318;box-shadow:0 1px 3px #80601640}

@media(max-height:620px) and (max-width:600px){.ranking-compare-dialog .ranking-compare-overview{padding:8px;gap:2px}.ranking-compare-dialog .ranking-compare-totals{row-gap:2px}.ranking-compare-dialog .ranking-compare-totals>div{min-height:22px}.ranking-compare-dialog .ranking-compare-month-text{height:22px}.ranking-compare-dialog [data-comparison-content]{gap:4px}}

.ranking-compare-dialog .ranking-compare-goal{align-items:center;min-height:24px}.ranking-compare-dialog .ranking-compare-goal>span,.ranking-compare-dialog .ranking-compare-goal>strong,.ranking-compare-dialog .ranking-compare-goal small{font-size:13px;line-height:1.3}.ranking-compare-dialog .ranking-compare-goal>strong{display:inline-flex;align-items:baseline;gap:2px}.ranking-compare-dialog .ranking-compare-goal progress{align-self:center;margin:0}@media(max-width:600px){.ranking-compare-dialog .ranking-compare-goal>span,.ranking-compare-dialog .ranking-compare-goal>strong,.ranking-compare-dialog .ranking-compare-goal small{font-size:11px}}

.ranking-compare-dialog .ranking-compare-goal>span,.ranking-compare-dialog .ranking-compare-goal>strong,.ranking-compare-dialog .ranking-compare-goal small{font-size:15px}.ranking-compare-dialog .ranking-compare-goal progress{height:8px}@media(max-width:600px){.ranking-compare-dialog .ranking-compare-goal>span,.ranking-compare-dialog .ranking-compare-goal>strong,.ranking-compare-dialog .ranking-compare-goal small{font-size:13px}}@media(max-width:360px){.ranking-compare-dialog .ranking-compare-goal{gap:3px}.ranking-compare-dialog .ranking-compare-goal>span,.ranking-compare-dialog .ranking-compare-goal>strong,.ranking-compare-dialog .ranking-compare-goal small{font-size:12px}}
