/* Presentation wrapper around the owner-confirmed dashboard source. */
html,body{margin:0!important;padding:0!important;min-height:0!important;background:#f1f4f8;color:#142a43;color-scheme:light;overflow-x:hidden}
#panel.report-section{padding:0!important;background:transparent!important;min-height:0!important}
#panel .client-console{border:0!important;border-radius:0!important;min-height:100dvh!important}
#panel .dashboard-sidebar{border-radius:0}
#panel .pf-bar{padding-right:80px!important}
#panel .demo-caption{max-width:none;font-size:11px}
#panel .console-account[hidden],#panel .console-settings[hidden]{visibility:hidden;pointer-events:none}
/* The opened dashboard is a product preview, so distinguish its records from a client's data. */
#panel .pf-bar::after{content:"Example records";grid-column:1;grid-row:2;color:#52647e;font:500 11px/1.35 var(--tl-font-body);letter-spacing:.01em}
html:lang(es) #panel .pf-bar::after{content:"Registros de ejemplo"}
/* Keep the five ring segments distinct at their smallest visible size and match each legend key. */
#panel [data-report-arcs] circle:nth-child(1),html.charts-only #panel [data-report-arcs] circle:nth-child(1),#panel .report-drivers>div:nth-child(1) .driver-swatch,html.charts-only #panel .report-drivers>div:nth-child(1) .driver-swatch{stroke:#1f4fd6!important;background:#1f4fd6!important}
#panel [data-report-arcs] circle:nth-child(2),html.charts-only #panel [data-report-arcs] circle:nth-child(2),#panel .report-drivers>div:nth-child(2) .driver-swatch,html.charts-only #panel .report-drivers>div:nth-child(2) .driver-swatch{stroke:#111217!important;background:#111217!important}
#panel [data-report-arcs] circle:nth-child(3),html.charts-only #panel [data-report-arcs] circle:nth-child(3),#panel .report-drivers>div:nth-child(3) .driver-swatch,html.charts-only #panel .report-drivers>div:nth-child(3) .driver-swatch{stroke:#4d5a7c!important;background:#4d5a7c!important}
#panel [data-report-arcs] circle:nth-child(4),html.charts-only #panel [data-report-arcs] circle:nth-child(4),#panel .report-drivers>div:nth-child(4) .driver-swatch,html.charts-only #panel .report-drivers>div:nth-child(4) .driver-swatch{stroke:#59688b!important;background:#59688b!important}
#panel [data-report-arcs] circle:nth-child(5),html.charts-only #panel [data-report-arcs] circle:nth-child(5),#panel .report-drivers>div:nth-child(5) .driver-swatch,html.charts-only #panel .report-drivers>div:nth-child(5) .driver-swatch{stroke:#657597!important;background:#657597!important}
#panel [data-report-arcs] circle{filter:drop-shadow(0 0 .65px #fff);stroke-linecap:butt}
/* Charts-only view: drawn on the landing page's ice-blue panel. Same document, data and renderer as the full dashboard; only presentation changes here. */
.charts-only,.charts-only body{background:transparent!important}
.charts-only #panel .client-console{display:block!important;min-height:0!important;background:transparent!important;box-shadow:none!important}
.charts-only .dashboard-sidebar,.charts-only .pf-bar,.charts-only .report-summary,.charts-only .console-account,.charts-only .console-settings,.charts-only .volume-total strong,.charts-only .volume-period,.charts-only .distribution-ring strong{display:none!important}
/* The source keeps hidden views at display:block to hold the grid stack's height; stacked as blocks here they add 1,239px of blank. */
html.charts-only #panel .console-view-stage>.console-account,html.charts-only #panel .console-view-stage>.console-settings{display:none!important}
.charts-only #panel .inst,.charts-only #panel .console-view-stage,.charts-only #panel .console-overview{display:block!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;min-height:0!important}
/* The renderer drops the opening-hours marker and the peak label below 420px of chart width, so the chart column is kept wider. */
.charts-only #panel .report-charts{display:grid!important;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0 36px;padding:0;margin:0}
.charts-only #panel .pf-chart,.charts-only #panel .report-distribution{display:block!important;border:0;border-radius:0;padding:0;background:transparent;min-height:0;margin:0}
.charts-only #panel .report-distribution{border-left:1px solid rgba(17,18,23,.16);padding-left:36px}
.charts-only #panel .pf-chart h3,.charts-only #panel .report-distribution h3{font-size:16px;font-weight:500;letter-spacing:0;color:#111217}
.charts-only #panel .pf-chart figcaption{margin-bottom:18px;align-items:center}
.charts-only #panel .pf-note{color:#39414f!important;font-size:12px}
.charts-only #panel .report-key{background:#1f4fd6;border-radius:2px}
.charts-only #panel .pf-bars{height:248px}
.charts-only #panel .pf-bars text,.charts-only #panel .pf-bars text.pf-peak{fill:#39414f}
.charts-only #panel .pf-bars text.pf-peak{fill:#111217;font-weight:500}
.charts-only #panel .pf-bars .report-gridline{stroke:rgba(17,18,23,.1)}
.charts-only #panel .pf-bars .pf-axis{stroke:rgba(17,18,23,.38)}
.charts-only #panel .pf-bars .pf-brk{stroke:rgba(17,18,23,.5)}
.charts-only #panel .report-line{stroke:#1f4fd6;stroke-width:2.5;stroke-linecap:round}
.charts-only #panel .pf-bars .pf-point{fill:#fff;stroke:#1f4fd6;stroke-width:2;transition:opacity .2s ease,r .2s ease,fill .2s ease}
.charts-only #panel .pf-bars .pf-point.hot{fill:#1f4fd6}
.charts-only #panel .distribution-body{grid-template-columns:112px minmax(0,1fr);gap:24px;margin-top:22px;align-items:start}
.charts-only #panel .distribution-ring{width:112px;height:112px;margin:0}
/* The hole is 58px wide at this size; the legend already names the total, so the centre stays empty. */
.charts-only #panel .distribution-ring span{display:none!important}
/* The step-through reader is for the full dashboard; on the landing page the chart is read with arrow keys. */
.charts-only #panel .chart-reader{display:none!important}
/* Ring and legend share one ordered set: cobalt for the largest share, then graphite and two slates. */
.charts-only #panel [data-report-arcs] circle:nth-child(1){stroke:#1f4fd6}
.charts-only #panel [data-report-arcs] circle:nth-child(2){stroke:#111217}
.charts-only #panel [data-report-arcs] circle:nth-child(3){stroke:#4d5a7c}
.charts-only #panel [data-report-arcs] circle:nth-child(4){stroke:#7f8db0}
.charts-only #panel [data-report-arcs] circle:nth-child(5){stroke:#a9b4d0}
.charts-only #panel .report-drivers>div:nth-child(1) .driver-swatch{background:#1f4fd6!important}
.charts-only #panel .report-drivers>div:nth-child(2) .driver-swatch{background:#111217!important}
.charts-only #panel .report-drivers>div:nth-child(3) .driver-swatch{background:#4d5a7c!important}
.charts-only #panel .report-drivers>div:nth-child(4) .driver-swatch{background:#7f8db0!important}
.charts-only #panel .report-drivers>div:nth-child(5) .driver-swatch{background:#a9b4d0!important}
.charts-only #panel .driver-swatch{width:10px;height:10px;border-radius:2px}
.charts-only #panel .report-drivers>div{border-color:rgba(17,18,23,.14);padding:7px 0}
.charts-only #panel .report-drivers dt{font-size:13px;color:#111217!important}
.charts-only #panel .report-drivers dd{font-size:13px;color:#111217;font-variant-numeric:tabular-nums}
.charts-only #panel .report-drivers dd small{font-size:12px;color:#39414f!important}
@media(max-width:760px){
 #panel .pf-bar{padding-right:20px!important}#panel .dashboard-sidebar{padding-right:64px!important}.dashboard-profile{display:none!important}
 #panel .client-console{min-height:100dvh!important}.dashboard-identity{font-size:18px}
 .charts-only #panel .client-console{min-height:0!important}
 .charts-only #panel .report-charts{gap:0 28px}.charts-only #panel .report-distribution{padding-left:28px}
 .charts-only #panel .distribution-body{grid-template-columns:1fr;gap:16px;margin-top:16px}.charts-only #panel .distribution-ring{width:96px;height:96px}
 .charts-only #panel .report-drivers dd{flex-direction:row}
}
/* Below 1000px of frame width the reasons column is too narrow for ring and legend side by side, so the legend goes under the ring. */
@media(min-width:561px) and (max-width:1000px){
 .charts-only #panel .distribution-body{grid-template-columns:1fr;gap:16px;margin-top:18px}
 .charts-only #panel .distribution-ring{width:104px;height:104px}
}
/* One column up to 760px of frame width: two columns there squeeze the line chart under 420px and the renderer drops the opening-hours marker. */
@media(max-width:760px){
 .charts-only #panel .report-charts{grid-template-columns:1fr}
 .charts-only #panel .pf-chart{padding:0 0 24px}
 .charts-only #panel .report-distribution{border-left:0;padding:24px 0 0;border-top:1px solid rgba(17,18,23,.16)}
 .charts-only #panel .pf-bars{height:220px}
 .charts-only #panel .pf-chart figcaption{gap:8px;flex-wrap:wrap;margin-bottom:12px}
 .charts-only #panel .distribution-body{grid-template-columns:110px minmax(0,1fr);gap:20px}
 .charts-only #panel .distribution-ring{width:110px;height:110px}
}
@media(max-width:360px){.charts-only #panel .distribution-body{grid-template-columns:90px minmax(0,1fr);gap:12px}.charts-only #panel .distribution-ring{width:90px;height:90px}.charts-only #panel .report-drivers dt{font-size:11px}.charts-only #panel .report-drivers dd small{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Landing case: the page sends which benefit is pointed at; the matching part of the chart stays strong and the rest recedes. */
html.charts-only #panel .pf-chart,html.charts-only #panel .report-distribution{transition:opacity .2s ease}
html.charts-only[data-highlight="peak"] #panel .pf-point,html.charts-only[data-highlight="after"] #panel .pf-point{opacity:.28}
html.charts-only[data-highlight="peak"] #panel .pf-point:nth-of-type(5),html.charts-only[data-highlight="peak"] #panel .pf-point:nth-of-type(6),html.charts-only[data-highlight="peak"] #panel .pf-point:nth-of-type(8){opacity:1;r:6;fill:#1f4fd6}
html.charts-only[data-highlight="after"] #panel .pf-point:nth-of-type(-n+4),html.charts-only[data-highlight="after"] #panel .pf-point:nth-of-type(n+10){opacity:1;r:6;fill:#1f4fd6}
html.charts-only[data-highlight="after"] #panel .pf-bars .pf-bands rect:is([data-i="0"],[data-i="1"],[data-i="2"],[data-i="3"],[data-i="9"],[data-i="10"],[data-i="11"]){fill:rgba(31,79,214,.14)}
html.charts-only[data-highlight="peak"] #panel .report-distribution,html.charts-only[data-highlight="after"] #panel .report-distribution,html.charts-only[data-highlight="reasons"] #panel .pf-chart{opacity:.32}
@media(prefers-reduced-motion:reduce){html.charts-only #panel .pf-point,html.charts-only #panel .pf-chart,html.charts-only #panel .report-distribution{transition:none}}

/* Case at rest on the landing card: name the period, show the out-of-hours count and shade the closed hours. */
.charts-only #panel .volume-total{display:none!important}
.charts-only #panel .pf-chart figcaption{flex-direction:column;align-items:flex-start;gap:4px}
.charts-only #panel .volume-period{display:block!important;margin:0;font:500 15px/1.35 var(--tl-font-body);letter-spacing:0;color:#111217}
.charts-only #panel .pf-bars .pf-bands rect:is([data-i="0"],[data-i="1"],[data-i="2"],[data-i="3"],[data-i="9"],[data-i="10"],[data-i="11"]){fill:rgba(31,79,214,.07);transition:fill .2s ease}
.charts-only #panel .report-summary{display:block!important;margin:22px 0 0;padding:14px 0 0;border:0;border-top:1px solid rgba(17,18,23,.14);border-radius:0;background:none;box-shadow:none}
.charts-only #panel .report-summary>div{display:none!important}
.charts-only #panel .report-summary>div:last-child{display:flex!important;align-items:baseline;flex-wrap:wrap;gap:6px 14px;padding:0;margin:0;border:0;background:none;min-height:0;box-shadow:none}
.charts-only #panel .report-summary h3{margin:0;font:500 14px/1.35 var(--tl-font-body);letter-spacing:0;color:#39414f}
.charts-only #panel .report-summary strong{font:500 24px/1 var(--tl-font-display);letter-spacing:-.02em;color:#111217}
.charts-only #panel .report-summary>div:last-child>span,.charts-only #panel .report-summary>div:last-child>span *{font-size:14px;color:#39414f}
.charts-only #panel .report-summary b{font-weight:500;color:#111217}

/* Expanded dashboard. */
#panel .rng button:focus-visible{outline:2px solid #1f4fd6!important;outline-offset:2px}
/* The ring centre repeated the total beside it and overflowed the 53px hole ("1,347" is 62px). */
html:not(.charts-only) #panel .distribution-ring>div{display:none!important}
@media(min-width:761px){html:not(.charts-only) #panel .client-console{min-height:0!important}}
@media(min-width:761px) and (max-width:1100px){html:not(.charts-only) #panel .report-drivers{max-width:440px}}
/* Motion when the visitor changes the period. The bridge adds .is-switching on that click only, so resize and language rebuilds stay still. */
@media(prefers-reduced-motion:no-preference){
 @keyframes tl-trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
 @keyframes tl-fade{from{opacity:0}to{opacity:1}}
 @keyframes tl-sweep{from{stroke-dasharray:0 277}}
 @keyframes tl-pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
 #pf.is-switching .report-line{stroke-dasharray:1;animation:tl-trace .6s cubic-bezier(.16,1,.3,1) both}
 #pf.is-switching .report-area{animation:tl-fade .35s .15s ease both}
 #pf.is-switching .pf-point{transform-box:fill-box;transform-origin:center;animation:tl-pop .3s .4s cubic-bezier(.16,1,.3,1) both}
 #pf.is-switching [data-report-arcs] circle{animation:tl-sweep .5s cubic-bezier(.16,1,.3,1) both}
 #pf.is-switching .report-drivers>div{animation:tl-fade .3s .1s ease both}
}
/* Live now: conversations in progress, set in the report's own panel, type and hairlines. client-dashboard-live.js fills the rows. */
#panel .live-now,#panel .live-list{margin:0 0 20px;padding:20px;background:#fcfdff;border:1px solid #d5deea;border-radius:5px;transition:opacity .3s ease}
#panel .live-list{margin:20px 0 0}
#panel .live-list h3{margin:0 0 6px;font:500 17px/1.2 var(--tl-font-body);color:#142a43}
#panel .live-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 18px}
#panel .live-head h3{display:flex;align-items:center;gap:10px;margin:0;font:500 17px/1.2 var(--tl-font-body);color:#142a43}
#panel .live-dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:#1f4fd6}
#panel .live-dot::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1px #1f4fd6;opacity:0}
#panel .live-clock{margin:0;font-size:13px;color:#52647e;font-variant-numeric:tabular-nums;white-space:nowrap}
#panel .live-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
#panel .live-counts>div{padding:0 16px;border-left:1px solid #d8e0eb;min-width:0}
#panel .live-counts>div:first-child{padding-left:0;border-left:0}
#panel .live-counts dt{margin:0 0 8px;font-size:14px;line-height:1.3;color:#52647e}
#panel .live-counts dd{margin:0;font:400 30px/1.1 var(--tl-font-display);letter-spacing:-.02em;color:#142a43;font-variant-numeric:tabular-nums}
#panel .live-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px;line-height:1.35;color:#142a43}
#panel .live-table caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#panel .live-table th{padding:10px 8px;font-size:12px;font-weight:400;color:#526176;border-bottom:1px solid #d8e0eb}
#panel .live-table td{padding:12px 8px;border-bottom:1px solid #e6ecf3;vertical-align:middle;font-variant-numeric:tabular-nums}
#panel .live-table tbody tr:last-child td{border-bottom:0}
#panel .live-table :is(th,td):first-child{padding-left:0}
#panel .live-table :is(th,td):last-child{padding-right:0;text-align:right}
#panel .live-table td strong{display:block;font-weight:500}
#panel .live-table td strong+span,#panel .live-ch span span{display:block;margin-top:2px;font-size:12px;color:#526176}
#panel .live-ch{white-space:nowrap}
#panel .live-ch>span{display:inline-block;vertical-align:middle}
#panel .live-icon{display:inline-grid!important;place-items:center;width:28px;height:28px;margin-right:10px;border-radius:50%;background:#e9eef8}
#panel .live-icon svg{width:15px;height:15px;fill:none;stroke:#1f4fd6;stroke-width:1.5;stroke-linejoin:round}
#panel .live-state{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
#panel .live-state::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:#1f4fd6}
#panel tr[data-status="transfer"] .live-state::before{background:#0a2540}
#panel tr[data-status="waiting"] .live-state{font-weight:500}
#panel tr[data-status="waiting"] .live-state::before{background:transparent;box-shadow:inset 0 0 0 1.5px #0a2540}
#panel .live-time{width:1%;white-space:nowrap;color:#526176}
@media(prefers-reduced-motion:no-preference){
 #panel .live-dot::after{animation:live-ring 2.4s cubic-bezier(.22,1,.36,1) infinite}
 #panel .live-table tr.is-new td{animation:live-in .7s cubic-bezier(.22,1,.36,1) both,live-flash 2.4s ease both}
 #panel .live-table tr.is-leaving td{opacity:0;transition:opacity .35s ease}
 #panel .live-state.is-changing{animation:live-fade .5s ease}
 #panel .live-counts dd.is-changing{animation:live-count .45s cubic-bezier(.22,1,.36,1)}
}
@keyframes live-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
@keyframes live-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes live-flash{0%,30%{background-color:#eef2fb}100%{background-color:transparent}}
@keyframes live-fade{from{opacity:.2}to{opacity:1}}
@keyframes live-count{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:none}}
/* Landing card: the charts stay first; under them, one quiet live line with three counters. The conversation rows live in the full dashboard. */
html.charts-only #panel .console-overview{display:flex!important;flex-direction:column}
.charts-only #panel .report-charts{order:1}.charts-only #panel .report-summary{order:2}.charts-only #panel .live-now{order:3}
.charts-only #panel .live-list,.charts-only #panel .live-counts>div:nth-child(4){display:none!important}
.charts-only #panel .live-now{margin:32px 0 4px;padding:28px 0 0;background:transparent;border:0;border-top:1px solid rgba(17,18,23,.16);border-radius:0}
.charts-only #panel .live-head{margin-bottom:20px}
.charts-only #panel .live-head h3{font-size:16px;color:#111217}
.charts-only #panel .live-counts{grid-template-columns:repeat(3,minmax(0,1fr))}
.charts-only #panel .live-counts>div{padding:0 20px;border-color:rgba(17,18,23,.14)}
.charts-only #panel .live-counts>div:first-child{padding-left:0}
.charts-only #panel .live-clock,.charts-only #panel .live-counts dt{color:#39414f}
.charts-only #panel .live-counts dt{font-size:13px}
.charts-only #panel .live-counts dd{font-size:28px;color:#111217}
html.charts-only #panel .report-charts,html.charts-only #panel .report-summary{transition:opacity .2s ease}
html.charts-only[data-highlight="live"] #panel .report-charts,html.charts-only[data-highlight="live"] #panel .report-summary,html.charts-only:is([data-highlight="peak"],[data-highlight="after"],[data-highlight="reasons"]) #panel .live-now{opacity:.32}
@media(max-width:560px){
 #panel .live-head{flex-wrap:wrap;gap:6px 16px}
 #panel .live-counts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
 #panel .live-counts>div:nth-child(3){padding-left:0;border-left:0}
 #panel .live-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #panel .live-table,#panel .live-table tbody{display:block}
 #panel .live-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:12px 0;border-bottom:1px solid #e6ecf3}
 #panel .live-table td{padding:0!important;border:0!important;text-align:left!important}
 #panel .live-table .live-ch{grid-column:1;grid-row:1}
 #panel .live-table .live-time{grid-column:2;grid-row:1;width:auto;justify-self:end;text-align:right!important}
 #panel .live-table .live-who{grid-column:1/-1;padding-left:38px!important}
 #panel .live-table .live-reason{grid-column:1;padding-left:38px!important;font-size:12px;color:#526176}
 #panel .live-table .live-status{grid-column:2;justify-self:end;text-align:right!important}
 .charts-only #panel .live-counts{grid-template-columns:repeat(3,minmax(0,1fr))}
 .charts-only #panel .live-counts>div{padding:0 12px;border-left:1px solid rgba(17,18,23,.14)!important}
 .charts-only #panel .live-counts>div:first-child{padding-left:0;border-left:0!important}
 .charts-only #panel .live-counts dt{font-size:12px}
 .charts-only #panel .live-counts dd{font-size:24px}
}
/* Landing card, 2026-10-15: the "Outside 08:00–18:00" line is removed at the owner's request; the shaded closed hours on the chart still show it. Live data moves up under the charts. */
html.charts-only #panel .report-summary{display:none!important}
.charts-only #panel .live-now{margin-top:24px;padding-top:24px}
.charts-only #panel .pf-bars{height:212px}
/* Reasons column at 761 to 1000px of frame width: it sets the height of the chart row, so the ring and legend are tighter there. */
@media(min-width:761px) and (max-width:1000px){
 .charts-only #panel .distribution-body{gap:12px;margin-top:12px}
 .charts-only #panel .distribution-ring{width:88px;height:88px}
 .charts-only #panel .report-drivers>div{padding:4px 0}
}
/* Landing card: the live dot sat on the frame's left edge, so its pulse ring (three times the dot) was cut off. The 8px inset is the ring's overhang. */
.charts-only #panel .live-dot{margin-left:8px}
.charts-only #panel .live-now{margin-top:36px;padding-top:36px}
html.charts-only body{padding-left:14px!important}
.charts-only #panel .live-dot{margin-left:0}
/* Live dot, 2026-10-15: the expanding ring drew outside the dot and could show as a broken arc. The dot now breathes in place inside a fixed 3px halo, so nothing grows past its box. */
#panel .live-dot::after{display:none!important}
#panel .live-dot{box-shadow:0 0 0 3px rgba(31,79,214,.16)}
@media(prefers-reduced-motion:no-preference){#panel .live-dot{animation:live-breathe 2s ease-in-out infinite}}
@keyframes live-breathe{0%,100%{opacity:1}50%{opacity:.35}}
/* The real clip: the source sets .client-console{overflow:hidden}, and on the landing card that box starts exactly at the content edge, so the dot's halo lost its left 3px. Overflow stays visible here; the frame's own 14px padding holds anything that spills. */
html.charts-only #panel .client-console{overflow:visible!important}
/* Landing line chart, 2026-10-15: at rest it shows only the line and its fill. The closed hours shade in while the pointer is over the chart
   (darker when "Follow up after closing" is hovered in the list), and point markers appear only for the periods a list item points at. */
.charts-only #panel .pf-bars .pf-bands rect:is([data-i="0"],[data-i="1"],[data-i="2"],[data-i="3"],[data-i="9"],[data-i="10"],[data-i="11"]){fill:transparent}
.charts-only #panel .pf-chart:hover .pf-bars .pf-bands rect:is([data-i="0"],[data-i="1"],[data-i="2"],[data-i="3"],[data-i="9"],[data-i="10"],[data-i="11"]){fill:rgba(31,79,214,.08)}
html.charts-only[data-highlight="after"] #panel .pf-bars .pf-bands rect:is([data-i="0"],[data-i="1"],[data-i="2"],[data-i="3"],[data-i="9"],[data-i="10"],[data-i="11"]){fill:rgba(31,79,214,.14)}
.charts-only #panel .pf-bars .pf-point,html.charts-only:is([data-highlight="peak"],[data-highlight="after"]) #panel .pf-point{opacity:0}
html.charts-only[data-highlight="peak"] #panel .pf-point:nth-of-type(5),html.charts-only[data-highlight="peak"] #panel .pf-point:nth-of-type(6),html.charts-only[data-highlight="peak"] #panel .pf-point:nth-of-type(8),html.charts-only[data-highlight="after"] #panel .pf-point:nth-of-type(-n+4),html.charts-only[data-highlight="after"] #panel .pf-point:nth-of-type(n+10){opacity:1;r:4;fill:#1f4fd6;stroke:#fff;stroke-width:1.5}
/* Chart axis, the opening-hours marker and the peak label were 10 to 11px; the site floor is 12px. */
.charts-only #panel .pf-bars text,.charts-only #panel .pf-bars text.pf-peak{font-size:12px}