/* Adjacent, muted chart shades derive from the two selected account colours. */
:root{--chart-neutral:#f4f4f0}:root[data-color-mode=dark]{--chart-neutral:#404040}.traffic-dashboard-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}.traffic-dashboard-controls .tabs{margin:0;border:0;padding:0}.traffic-dashboard-controls small{color:var(--muted)}.traffic-stat>span{display:flex;align-items:center;gap:9px}.traffic-stat>span i,.traffic-direction-key i,.traffic-pie-key>i{display:inline-block;flex-shrink:0;width:10px;height:10px;border-radius:4px}.traffic-stat strong{font-size:clamp(22px,2.4vw,34px)}.traffic-category-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.traffic-category-grid>.panel{min-width:0;margin-bottom:0}.traffic-category-body{padding:24px}.traffic-chart-note{margin:0 0 22px;color:var(--muted);line-height:1.8}.traffic-pie{display:grid;grid-template-columns:168px minmax(0,1fr);align-items:center;gap:24px;min-width:0}.traffic-pie-graphic{position:relative;width:168px;height:168px;flex-shrink:0}.traffic-pie-graphic svg{width:100%;height:100%}.traffic-pie-track,.traffic-pie-segment{fill:none;stroke-width:19}.traffic-pie-track{stroke:var(--line)}.traffic-pie-segment{transform:rotate(-90deg);transform-origin:84px 84px;stroke-linecap:butt;transition:stroke .3s}.traffic-pie-center{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:8px;pointer-events:none}.traffic-pie-center small{color:var(--muted)}.traffic-pie-center strong{font-size:16px}.traffic-pie-legend{min-width:0}.traffic-pie-key{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;gap:9px;align-items:center;margin:13px 0;min-width:0}.traffic-pie-key>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.traffic-pie-key strong{font-size:12px;font-weight:400;font-variant-numeric:tabular-nums}.traffic-pie-key small{width:42px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}.traffic-composition{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;padding:28px;align-items:center}.traffic-composition-copy strong{font-size:30px;font-weight:300}.traffic-composition-copy p{color:var(--muted);line-height:1.9;margin:12px 0}.traffic-direction-key{display:flex;gap:20px;flex-wrap:wrap;margin:28px 0 16px;font-size:11px;color:var(--muted)}.traffic-direction-key span{display:flex;align-items:center;gap:8px}.traffic-bar-up{background:color-mix(in srgb,color-mix(in srgb,var(--accent) 65%,var(--secondary)) 82%,var(--chart-neutral))}.traffic-bar-down{background:color-mix(in srgb,color-mix(in srgb,var(--accent) 35%,var(--secondary)) 62%,var(--chart-neutral))}.traffic-bars{display:grid;gap:17px}.traffic-bar-row{display:block;width:100%;min-width:0;border:0;border-radius:12px;padding:9px 0;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}.traffic-bar-row:hover,.traffic-bar-row:focus-visible{background:rgba(var(--accent-rgb),.07);outline-offset:4px}.traffic-bar-heading,.traffic-bar-numbers{display:flex;align-items:center;justify-content:space-between;gap:14px}.traffic-bar-heading strong{font-size:13px;font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap}.traffic-bar-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.traffic-bar-track{display:block;height:12px;border-radius:6px;background:rgba(var(--accent-rgb),.055);margin:11px 0 9px;overflow:hidden}.traffic-bar-fill{display:flex;height:100%;border-radius:6px;overflow:hidden}.traffic-bar-fill i{height:100%;display:block}.traffic-bar-numbers{color:var(--muted);font-size:11px;flex-wrap:wrap;gap:6px 14px}.traffic-bar-numbers>span:last-child{margin-left:auto}.traffic-raw-data{margin-top:24px;border-top:1px solid var(--line);padding-top:19px}.traffic-raw-data summary,.traffic-accounting-note summary{cursor:pointer;color:var(--muted)}.traffic-raw-data .table-wrap{margin-top:18px}.traffic-accounting-note{margin:28px 0}.traffic-accounting-note p{color:var(--muted);line-height:1.9;max-width:90ch}.traffic-category-grid+.traffic-accounting-note{margin-top:30px}@media(max-width:1399px){.traffic-category-grid{grid-template-columns:minmax(0,1fr)}}@media(max-width:899px){.traffic-composition{grid-template-columns:minmax(0,1fr);gap:24px}}@media(max-width:599px){.traffic-category-body,.traffic-composition{padding:20px}.traffic-pie{grid-template-columns:minmax(0,1fr);justify-items:center;gap:12px}.traffic-pie-legend{width:100%}.traffic-composition-copy strong{font-size:26px}.traffic-dashboard-controls{align-items:stretch}.traffic-dashboard-controls .tabs{flex-wrap:wrap}.traffic-category-grid{gap:20px}.traffic-bar-numbers>span:last-child{display:none}}@media(prefers-reduced-motion:reduce){.traffic-pie-segment{transition:none}}

/* Keep each chart's selection and numbers inside a single padded control row. */
.traffic-dashboard-controls{justify-content:flex-start}.traffic-timezone{margin-inline-start:auto;color:var(--muted)}
.traffic-trend-controls{padding:18px 28px;gap:16px;border-bottom:1px solid var(--line);align-items:center}
.traffic-trend-selection{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 320px}
.traffic-trend-selection>strong{min-width:0;max-width:52ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:300;color:var(--tone)}
.traffic-trend-selection .btn{flex-shrink:0;margin-left:auto}.traffic-trend-totals{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--muted);font-variant-numeric:tabular-nums}.traffic-trend-totals strong{font-weight:300;color:var(--text)}
html .traffic-bar-row{padding:14px 16px;border:1px solid transparent;border-radius:14px;box-sizing:border-box;overflow:hidden}
html .traffic-bar-row:hover,html .traffic-bar-row:focus-visible{background:rgba(var(--accent-rgb),.1);border-color:rgba(var(--accent-rgb),.3);outline:none}
html .traffic-bar-row:focus-visible{outline:2px solid var(--tone);outline-offset:-3px}
.traffic-bars{gap:6px;margin:0 -4px}.traffic-bar-heading{align-items:flex-start}.traffic-bar-heading strong{flex-shrink:0}.traffic-bar-track{margin-top:12px}.traffic-bar-numbers{line-height:1.65}
@media(max-width:767px){.traffic-trend-controls{padding:16px 20px}.traffic-trend-selection{flex-basis:100%;gap:8px}.traffic-trend-selection>.ui-control-label{display:none}.traffic-trend-totals{gap:10px}.traffic-trend-selection>strong{max-width:none}.traffic-trend-selection>.btn{padding:5px 8px}}
@media(max-width:450px){.traffic-dashboard-controls .ui-control-group{flex:1 1 100%;justify-content:space-between}.traffic-timezone{display:none}.traffic-trend-selection{flex-wrap:wrap}.traffic-trend-selection>strong{flex:1 1 150px}.traffic-bar-numbers{font-size:12px}}