/* On top of how-padel-works.css, which brings the palette, type, figures and the theme switch. */
:root{ --bar:#ff7a4d; --bar2:#3fc8bd; --z0:#4a4f57; --z1:#73c7f2; --z2:#61d68c; --z3:#f5d145; --z4:#f7943d; --z5:#f04d57; }
:root[data-theme="light"]{ --bar:#e2572b; --bar2:#17988f; --z0:#c9c4b8; --z1:#3f9fd6; --z2:#2fae5f; --z3:#d9ac13; --z4:#e2741c; --z5:#d6303c; }

.dek{font-size:22px;line-height:1.45;color:var(--muted);margin:-.2em 0 1.4em}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 2em}
.tile{background:var(--fig);border-radius:14px;padding:16px 14px 14px;display:flex;flex-direction:column;gap:4px}
.tile b{font-size:34px;line-height:1;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tile b small{font-size:16px;font-weight:650;color:var(--muted);letter-spacing:0}
.tile span{font-size:14px;line-height:1.3;color:var(--muted)}
@media (max-width:620px){.tiles{grid-template-columns:repeat(2,1fr)} .dek{font-size:19px}}

.fig.chart,.fig.calc,#fig-zones{width:auto;left:auto;transform:none}
.chart .stage{padding:6px 6px 0}
.chart svg{display:block;width:100%;overflow:visible}
.chart .bar{fill:var(--bar)}
.chart .bar.alt{fill:var(--bar2)}
.chart .hit{fill:transparent;cursor:pointer}
.chart .grid{stroke:var(--rule);stroke-width:1}
.chart .base{stroke:var(--muted);stroke-width:1}
.chart .axis{fill:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.chart .marker{stroke:var(--text);stroke-width:1.5;stroke-dasharray:3 3}
.chart .marker-label{fill:var(--text);font-size:12.5px;font-weight:650}
.tip{position:absolute;pointer-events:none;background:var(--bg);color:var(--text);border:1px solid var(--rule);
  border-radius:8px;padding:5px 9px;font-size:13.5px;line-height:1.3;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.25);z-index:2}

.calc .stage{padding:18px 18px 12px}
.calc-out{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.calc-out .big{font-size:40px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.calc-out .range{color:var(--muted);font-size:16px}
.calc .controls{padding-top:6px}

.zones{padding:18px}
.zbar{display:flex;height:34px;border-radius:9px;overflow:hidden;gap:2px;background:var(--fig)}
.zseg{display:block;min-width:2px}
.zlist{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px;font-size:15.5px}
.zlist li{display:grid;grid-template-columns:14px 1fr auto 3.2em 4.4em;gap:10px;align-items:center}
.zlist i{width:13px;height:13px;border-radius:3px;display:block}
.zlist .zr{color:var(--muted);font-size:14px}
.zlist .zp{text-align:right;font-weight:650;font-variant-numeric:tabular-nums}
.zlist .zm{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:460px){.zlist li{grid-template-columns:14px 1fr 3em 4em} .zlist .zr{display:none}}
.z0{background:var(--z0)} .z1{background:var(--z1)} .z2{background:var(--z2)} .z3{background:var(--z3)} .z4{background:var(--z4)} .z5{background:var(--z5)}

.method{padding-left:1.1em;margin:0 0 1.2em}
.method li{margin-bottom:.7em}
.note b{color:var(--text)}
.chart .legend{padding:10px 4px 0}
.legend i.k1{background:var(--bar)} .legend i.k2{background:var(--bar2)}